/* Manrope (SIL Open Font License), served from here - not from Google's servers, so no visitor's
   address goes to Google (privacy policy, /privacy). One variable font file per character set. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* One stylesheet, design tokens on :root, light/dark by prefers-color-scheme or the person's
   choice - the chatbot's colours and font, so the two Latoda products feel like one family. No
   CSS framework.
   Layout: an app shell (sidebar + main) for signed-in pages, base.html. */

:root {
  color-scheme: light dark;

  --color-bg: #f5f6f4;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #eef1f2;
  --color-bg-sunken: #f0f2f1;
  --color-border: #e1e5e7;
  --color-border-strong: #c9d1d5;
  --color-text: #1b2a32;
  --color-text-muted: #5c6b72;
  --color-brand: #335c70;
  --color-brand-dark: #22404f;
  --color-brand-soft: #e5eef2;
  --color-accent: #ee7131;
  --color-accent-dark: #d1601f;
  --color-accent-soft: #fdeee5;
  --color-ok: #2f8f5b;
  --color-ok-soft: #e4f3ea;
  --color-warn: #b7740c;
  --color-warn-soft: #fbf1dc;
  --color-error: #c0392b;
  --color-error-soft: #fbe7e4;
  --shadow-soft: 0 1px 2px rgba(27, 42, 50, 0.05), 0 4px 16px rgba(27, 42, 50, 0.05);
  --shadow-lift: 0 2px 6px rgba(27, 42, 50, 0.08), 0 16px 40px rgba(27, 42, 50, 0.12);
  --ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 28%, transparent);
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sidebar-width: 248px;
}

/* Dark: when the browser asks for it and the person chose nothing else (data-theme on <html>,
   app/main.py /theme), or when they chose dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0d161b;
    --color-bg-elevated: #15222a;
    --color-bg-subtle: #1c2b33;
    --color-bg-sunken: #111c22;
    --color-border: #263640;
    --color-border-strong: #36505e;
    --color-text: #eef2f4;
    --color-text-muted: #93a7af;
    --color-brand: #7bacc4;
    --color-brand-dark: #a9cbdc;
    --color-brand-soft: #1a3341;
    --color-accent: #ff8a4c;
    --color-accent-dark: #ffab7a;
    --color-accent-soft: #3a2418;
    --color-ok: #5cc28a;
    --color-ok-soft: #173326;
    --color-warn: #e8a93c;
    --color-warn-soft: #362a12;
    --color-error: #ef6f61;
    --color-error-soft: #3a1c19;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --color-bg: #0d161b;
  --color-bg-elevated: #15222a;
  --color-bg-subtle: #1c2b33;
  --color-bg-sunken: #111c22;
  --color-border: #263640;
  --color-border-strong: #36505e;
  --color-text: #eef2f4;
  --color-text-muted: #93a7af;
  --color-brand: #7bacc4;
  --color-brand-dark: #a9cbdc;
  --color-brand-soft: #1a3341;
  --color-accent: #ff8a4c;
  --color-accent-dark: #ffab7a;
  --color-accent-soft: #3a2418;
  --color-ok: #5cc28a;
  --color-ok-soft: #173326;
  --color-warn: #e8a93c;
  --color-warn-soft: #362a12;
  --color-error: #ef6f61;
  --color-error-soft: #3a1c19;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

/* The attribute must win over a component's own display (.field is flex, for one). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--color-brand); text-underline-offset: 2px; }

:focus-visible { outline: none; box-shadow: var(--ring); }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
#i-grip circle, #i-more circle { fill: currentColor; }

/* ---------- App shell ---------- */

.shell-main { min-height: 100vh; display: flex; flex-direction: column; }
.shell-main main { flex: 1; }
.has-shell .shell-main { margin-left: var(--sidebar-width); }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width);
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 0.85rem 0.9rem;
  background: var(--color-bg-elevated); border-right: 1px solid var(--color-border);
  overflow-y: auto;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.45rem; }
.sidebar-brand img { height: 26px; display: block; }
.sidebar .sidebar-close { display: none; }
.sidebar-org { padding: 0.65rem 0.7rem; border-radius: var(--radius-md); background: var(--color-bg-subtle); display: grid; gap: 0.2rem; }
.sidebar-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.sidebar-org .org-switcher { width: 100%; }
.sidebar-nav { display: grid; gap: 2px; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--color-text-muted); text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.sidebar-nav a .icon { width: 1.2rem; height: 1.2rem; }
.sidebar-nav a:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.sidebar-nav a.active { background: var(--color-brand-soft); color: var(--color-brand); }
.sidebar-group { margin: 0.9rem 0 0.2rem; padding: 0 0.7rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.sidebar-foot .env-badge { flex-basis: 100%; text-align: center; }
.sidebar-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.4rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); }
.sidebar-user:hover, .sidebar-user.active { background: var(--color-bg-subtle); }
.sidebar-user-text { min-width: 0; display: grid; font-size: 0.82rem; line-height: 1.25; }
.sidebar-user-text strong, .sidebar-user-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-text small { color: var(--color-text-muted); }
.avatar {
  width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-brand), var(--color-accent)); color: #fff; font-weight: 800; font-size: 0.85rem;
}
.org-switcher { font: inherit; font-size: 0.88rem; font-weight: 700; padding: 0.25rem 0.4rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text); }
.org-name { font-weight: 700; font-size: 0.9rem; color: var(--color-text); }
.mobile-bar { display: none; }
.sidebar-backdrop { display: none; }

.env-badge {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--color-accent); color: #fff;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--color-text-muted);
  cursor: pointer; text-decoration: none; font: inherit;
}
.icon-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.icon-btn .icon { width: 1.25rem; height: 1.25rem; }
.icon-btn:disabled { opacity: 0.4; cursor: default; background: transparent; }

@media (max-width: 960px) {
  .has-shell .shell-main { margin-left: 0; }
  .mobile-bar {
    display: flex; align-items: center; gap: 0.6rem; position: sticky; top: 0; z-index: 30;
    padding: 0.5rem 0.75rem; background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border);
  }
  .mobile-brand img { height: 22px; display: block; }
  .mobile-bar .env-badge { margin-left: auto; }
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: var(--shadow-lift); width: min(300px, 86vw); }
  .sidebar .sidebar-close { display: inline-flex; }
  .nav-open .sidebar { transform: none; }
  .nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(13, 22, 27, 0.45); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-md); border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 0.9rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn .icon { width: 1.05rem; height: 1.05rem; }
.btn-primary { background: var(--color-brand); color: #fff; box-shadow: 0 1px 2px rgba(27, 42, 50, 0.15); }
.btn-primary:hover { background: var(--color-brand-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { color: #0d161b; } }
:root[data-theme="dark"] .btn-primary { color: #0d161b; }
.btn-accent { background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-accent) 100%); color: #fff; box-shadow: var(--shadow-soft); }
.btn-accent:hover { box-shadow: var(--shadow-lift); }
.btn-secondary { background: var(--color-bg-elevated); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.btn-danger { background: var(--color-bg-elevated); color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 45%, transparent); }
.btn-danger:hover { background: var(--color-error-soft); }
.btn-small { padding: 0.35rem 0.75rem; font-size: 0.82rem; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }

.inline-form { display: inline; margin: 0; }

/* ---------- Pages & cards ---------- */

/* Pages use the width there is; only reading and short-form pages stay narrow. */
.page { padding: 1.75rem 2rem 3rem; }
.page-narrow { max-width: 780px; margin: 0 auto; }

.page h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 1.25rem; line-height: 1.2; }
.page h2 { font-size: 1.02rem; font-weight: 750; margin: 0 0 0.9rem; }
.page-intro { color: var(--color-text-muted); max-width: 52rem; margin: -0.5rem 0 1.5rem; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head .subtitle, .page-sub { color: var(--color-text-muted); margin: 0.35rem 0 0; font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.page-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.breadcrumb { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-brand); text-decoration: underline; }

.card {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft); padding: 1.35rem 1.5rem; margin-bottom: 1.25rem;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.card-head h2 { margin: 0; }
.card-head .muted { font-size: 0.85rem; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: 1.1rem 1.5rem 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; }
.card-grid .card { margin-bottom: 0; }
.card-link { text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.card-link:hover { border-color: var(--color-brand); box-shadow: var(--shadow-lift); }

code { background: var(--color-bg-subtle); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em; }

.muted { color: var(--color-text-muted); }
.text-error { color: var(--color-error); }

.notice {
  display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius-md);
  background: var(--color-brand-soft); border: 1px solid color-mix(in srgb, var(--color-brand) 25%, transparent);
  margin-bottom: 1.25rem; font-size: 0.9rem;
}
.notice > .icon { margin-top: 0.15rem; color: var(--color-brand); }
.notice-ok { background: var(--color-ok-soft); border-color: color-mix(in srgb, var(--color-ok) 30%, transparent); }
.notice-ok > .icon { color: var(--color-ok); }
.notice-warn { background: var(--color-warn-soft); border-color: color-mix(in srgb, var(--color-warn) 30%, transparent); }
.notice-warn > .icon { color: var(--color-warn); }
.notice-error { background: var(--color-error-soft); border-color: color-mix(in srgb, var(--color-error) 30%, transparent); }
.notice-error > .icon { color: var(--color-error); }

.status { font-weight: 700; }
.status-ok { color: var(--color-ok); }
.status-warn { color: var(--color-warn); }
.status-error { color: var(--color-error); }

.empty-state { text-align: center; padding: 2.25rem 1rem; color: var(--color-text-muted); }
.empty-state .icon { width: 2.4rem; height: 2.4rem; color: var(--color-border-strong); margin-bottom: 0.5rem; }
.empty-state h3 { margin: 0 0 0.3rem; color: var(--color-text); font-size: 1rem; }
.empty-state p { margin: 0 auto 1rem; max-width: 30rem; }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; font-size: 0.87rem; }
.table th, .table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.table th { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--color-bg-sunken); }
.table thead th:first-child { border-top-left-radius: var(--radius-sm); }
.table thead th:last-child { border-top-right-radius: var(--radius-sm); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent); }
.table tbody tr:last-child td { border-bottom: none; }
.table td.prose { white-space: normal; max-width: 34rem; min-width: 12rem; }
.table-empty { color: var(--color-text-muted); text-align: center; padding: 1.25rem; }

/* Tables like a spreadsheet (static/grid.js): sort by a click on the column's name, filter
   by the values ticked in its menu, search above. */
.grid-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.grid-search {
  display: flex; align-items: center; gap: 0.45rem; flex: 0 1 22rem; min-width: 12rem; padding: 0 0.65rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted);
}
.grid-search:focus-within { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft); }
.grid-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--color-text); font: inherit; font-size: 0.87rem; padding: 0.45rem 0; }
.grid-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.87rem; }
.grid-count { color: var(--color-text-muted); font-size: 0.82rem; margin-left: auto; }
.grid-th { display: flex; align-items: center; gap: 0.15rem; margin: -0.3rem -0.4rem -0.3rem -0.3rem; }
.grid-sort {
  display: inline-flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; padding: 0.3rem; border: 0; border-radius: 5px;
  background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left;
}
button.grid-sort { cursor: pointer; }
button.grid-sort:hover { color: var(--color-text); }
.grid-arrow .icon { width: 0.95rem; height: 0.95rem; color: var(--color-brand); vertical-align: -0.15em; }
.grid-menu-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; padding: 0;
  border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--color-text-muted); cursor: pointer; opacity: 0.55;
}
.grid-menu-btn .icon { width: 0.95rem; height: 0.95rem; }
.grid-col:hover .grid-menu-btn, .grid-menu-btn:focus-visible, .grid-menu-btn[aria-expanded="true"] { opacity: 1; border-color: var(--color-border-strong); background: var(--color-bg-elevated); }
.grid-col.is-filtered .grid-menu-btn { opacity: 1; color: var(--color-brand); background: var(--color-brand-soft); border-color: transparent; }
.grid-col.is-filtered .grid-sort, .table th[aria-sort] .grid-sort { color: var(--color-text); }
.grid-menu {
  position: absolute; z-index: 60; width: 17rem; max-width: calc(100vw - 16px); padding: 0.35rem;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
  font-size: 0.87rem;
}
.grid-menu-head { display: none; }
.grid-menu-item {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.55rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer;
}
.grid-menu-item:hover { background: var(--color-bg-subtle); }
.grid-menu-item .icon { color: var(--color-text-muted); }
.grid-menu-item.active { color: var(--color-brand); font-weight: 700; background: var(--color-brand-soft); }
.grid-menu-item.active .icon { color: var(--color-brand); }
.grid-menu-filter { border-top: 1px solid var(--color-border); margin-top: 0.35rem; padding-top: 0.45rem; }
.grid-menu-find {
  width: 100%; margin-bottom: 0.35rem; padding: 0.4rem 0.55rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-text); font: inherit;
}
.grid-menu-values { max-height: 16rem; overflow-y: auto; }
.grid-menu-values label { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.55rem; border-radius: var(--radius-sm); cursor: pointer; }
.grid-menu-values label:hover { background: var(--color-bg-subtle); }
.grid-menu-values label[hidden] { display: none; }
.grid-menu-values label span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.grid-menu-all { font-weight: 700; }
.grid-menu-count { color: var(--color-text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.grid-menu-foot { display: flex; justify-content: space-between; gap: 0.5rem; border-top: 1px solid var(--color-border); margin-top: 0.35rem; padding: 0.45rem 0.2rem 0.15rem; }
@media (max-width: 640px) {
  .grid-search { flex-basis: 100%; }
  .grid-count { margin-left: 0; }
  .grid-menu {
    position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; max-height: 80dvh; overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  }
  .grid-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 0.15rem 0.2rem 0.4rem; }
  .grid-menu-item, .grid-menu-values label { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .grid-menu-values { max-height: 40dvh; }
}
.table a { font-weight: 650; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.row-link { cursor: pointer; }

/* ---------- Login ---------- */

.login-shell { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.login-card {
  width: 100%; max-width: 400px; text-align: center; background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); padding: 2.5rem 2rem;
}
.login-card img { height: 46px; margin-bottom: 1.25rem; }
.login-card h1 { font-size: 1.35rem; margin: 0 0 0.4rem; }
.login-card p { color: var(--color-text-muted); margin: 0 0 1.75rem; }

/* ---------- Footer ---------- */

.site-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 1.5rem 1.25rem 2rem; font-size: 0.8rem; color: var(--color-text-muted); }
.site-footer a { color: var(--color-text-muted); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--color-brand); }
.lang-switcher { display: inline-flex; gap: 0.5rem; align-items: baseline; }
.lang-switcher > * + *::before { content: "·"; margin-right: 0.5rem; color: var(--color-text-muted); }
.lang-switcher .lang-current { color: var(--color-text); font-weight: 600; }
.theme-switcher { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--color-bg-subtle); }
.theme-switcher a { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.5rem; border-radius: 999px; color: var(--color-text-muted); }
.theme-switcher a:hover { color: var(--color-text); text-decoration: none; }
.theme-switcher a.active { background: var(--color-bg-elevated); color: var(--color-brand); box-shadow: var(--shadow-soft); }
.theme-switcher .icon { width: 0.95rem; height: 0.95rem; }

/* ---------- Form controls ---------- */

.field input, .field select, .field textarea, .filter-bar input, .filter-bar select, .input {
  font: inherit; font-size: 0.92rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; min-width: 0;
}
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: color-mix(in srgb, var(--color-brand) 50%, var(--color-border-strong)); }
.field input:focus, .field select:focus, .field textarea:focus, .filter-bar input:focus, .filter-bar select:focus, .input:focus {
  outline: none; border-color: var(--color-brand); box-shadow: var(--ring);
}
.field input:disabled { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.25rem; margin-bottom: 1.25rem; }
.form-grid-single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field label, .field .label { font-size: 0.8rem; font-weight: 700; color: var(--color-text); }
.field-wide { grid-column: 1 / -1; }
.field textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
.field-error { color: var(--color-error); font-size: 0.8rem; font-weight: 600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-error); }
.field-hint { color: var(--color-text-muted); font-size: 0.78rem; }
.form-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.inline-fields { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: end; }
.inline-fields .field { min-width: 10rem; }
.checkbox-list { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.checkbox-list label { font-size: 0.87rem; display: inline-flex; gap: 0.4rem; align-items: center; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-brand); width: 1rem; height: 1rem; }
.check-label { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.87rem; }
.switch-label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; font-size: 0.92rem; }
.switch-label input { margin-top: 0.2rem; }

/* A toggle switch: <label class="toggle"><input type="checkbox"><span></span> Text</label> */
.toggle { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.87rem; font-weight: 600; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle > span:first-of-type {
  position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--color-border-strong); transition: background 0.15s ease; flex-shrink: 0;
}
.toggle > span:first-of-type::after {
  content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease;
}
.toggle input:checked + span { background: var(--color-ok); }
.toggle input:checked + span::after { transform: translateX(1rem); }
.toggle input:focus-visible + span { box-shadow: var(--ring); }
.toggle input:disabled + span { opacity: 0.5; }

/* ---------- Badges, facts, details ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; line-height: 1.3;
  padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
  background: var(--color-bg-subtle); color: var(--color-text-muted); border: 1px solid transparent;
}
.badge-brand { background: var(--color-brand-soft); color: var(--color-brand); }
.badge-ok { background: var(--color-ok-soft); color: var(--color-ok); }
.badge-warn { background: var(--color-warn-soft); color: var(--color-warn); }
.badge-error { background: var(--color-error-soft); color: var(--color-error); }
.badge-accent { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.badge-dot::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.9rem 1.25rem; margin: 0; }
.facts dt { font-size: 0.74rem; color: var(--color-text-muted); margin-bottom: 0.15rem; font-weight: 600; }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.facts-list { display: grid; gap: 0; margin: 0; }
.facts-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.87rem; }
.facts-list > div:last-child { border-bottom: none; }
.facts-list dt { color: var(--color-text-muted); }
.facts-list dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

details.panel { margin-top: 1rem; }
details.panel > summary { cursor: pointer; font-weight: 700; color: var(--color-brand); }
details.panel[open] > summary { margin-bottom: 0.9rem; }

.stat { font-size: 2rem; font-weight: 800; }
#site-map { height: 360px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); margin-bottom: 1.25rem; }
.row-error td { background: color-mix(in srgb, var(--color-error) 8%, transparent); }
.mapping-select { min-width: 14rem; }

.admin-nav, .tabs {
  display: flex; gap: 1.25rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.admin-nav a, .tabs a, .tabs button {
  padding: 0 0 0.75rem; color: var(--color-text-muted); text-decoration: none; font: inherit; font-size: 0.9rem; font-weight: 700;
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-nav a:hover, .tabs a:hover, .tabs button:hover { color: var(--color-text); }
.admin-nav a.active, .tabs a.active, .tabs button.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }

/* ---------- Admin & settings ---------- */

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin: 0 0 1rem; }
.filter-bar input[type="search"] { min-width: 16rem; }
a.seg-btn { text-decoration: none; color: inherit; }
a.stat-card { display: block; text-decoration: none; color: inherit; }
a.stat-card:hover { border-color: var(--color-brand); }
.stat-card p { margin: 0.25rem 0; }
.stat-card strong { font-size: 1.5rem; }
.code-block {
  background: var(--color-bg-subtle); border-radius: var(--radius-md); padding: 0.75rem 1rem; margin: 0.5rem 0 0;
  font-size: 0.8rem; line-height: 1.45; overflow-x: auto; white-space: pre; max-height: 32rem;
}
.usage-table td, .usage-table th { white-space: nowrap; }
.usage-table .num { text-align: right; }
.section-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: -0.5rem 0 1.25rem; font-size: 0.9rem; }
.section-nav a { text-decoration: none; font-weight: 600; }

/* ---------- Dashboard ---------- */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi {
  display: grid; gap: 0.35rem; padding: 1.05rem 1.2rem; border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.kpi:hover { border-color: var(--color-brand); box-shadow: var(--shadow-lift); }
.kpi-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); }
.kpi-label .icon { width: 1.05rem; height: 1.05rem; }
.kpi-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.kpi-hint { font-size: 0.78rem; color: var(--color-text-muted); }
.kpi-warn .kpi-value { color: var(--color-warn); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.quick-actions { display: grid; gap: 0.6rem; }
.quick-action {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); background: var(--color-bg-elevated);
}
.quick-action:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.quick-action .qa-icon { width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand-soft); color: var(--color-brand); flex-shrink: 0; }
.quick-action strong { display: block; font-size: 0.9rem; }
.quick-action small { color: var(--color-text-muted); font-size: 0.78rem; }
.quick-action > .icon:last-child { margin-left: auto; color: var(--color-text-muted); }
.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--color-border);
  text-decoration: none; color: inherit;
}
.list > li:last-child .list-row, .list > .list-row:last-child { border-bottom: none; }
a.list-row:hover { background: color-mix(in srgb, var(--color-brand-soft) 50%, transparent); border-radius: var(--radius-sm); }
.list-row-main { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.list-row-main strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-main small { color: var(--color-text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-icon { width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-subtle); color: var(--color-text-muted); flex-shrink: 0; }
.mini-progress { width: 4.5rem; height: 6px; border-radius: 999px; background: var(--color-bg-subtle); overflow: hidden; flex-shrink: 0; }
.mini-progress > span { display: block; height: 100%; background: var(--color-brand); }

/* ---------- Inspections ---------- */

.filters { padding: 1rem 1.25rem; }
.filters .inline-fields { align-items: end; gap: 0.75rem 1rem; }
.filter-chip { margin: 0.75rem 0 0; font-size: 0.85rem; }
.filter-chip a { text-decoration: none; font-weight: 700; margin-left: 0.35rem; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }

.type-picker { display: grid; gap: 0.5rem; }
.type-option {
  display: flex; gap: 0.7rem; align-items: center; padding: 0.75rem 0.95rem; cursor: pointer;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-elevated);
}
.type-option:hover { border-color: var(--color-brand); }
.type-option:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); background: var(--color-brand-soft); }
.type-option span { font-weight: 700; color: var(--color-text); font-size: 0.92rem; }
.type-option small { display: block; font-weight: 500; color: var(--color-text-muted); font-size: 0.8rem; }

/* The workflow as steps: draft -> in review -> reviewed -> released. */
.stepper { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.stepper li { flex: 1; position: relative; padding-top: 1.6rem; font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); text-align: center; min-width: 0; }
.stepper li::before {
  counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
  background: var(--color-bg-elevated); border: 2px solid var(--color-border-strong); color: var(--color-text-muted);
}
.stepper li::after { content: ""; position: absolute; top: 0.62rem; left: calc(-50% + 0.7rem); right: calc(50% + 0.7rem); height: 2px; background: var(--color-border-strong); }
.stepper li:first-child::after { display: none; }
.stepper li.done::before { content: "✓"; background: var(--color-ok); border-color: var(--color-ok); color: #fff; }
.stepper li.done, .stepper li.current { color: var(--color-text); }
.stepper li.done::after, .stepper li.current::after { background: var(--color-ok); }
.stepper li.current::before { border-color: var(--color-brand); background: var(--color-brand); color: #fff; box-shadow: var(--ring); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.detail-side { display: grid; gap: 1.25rem; }
.detail-side .card { margin-bottom: 0; }
.findings-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.findings-list li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.88rem; padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); background: var(--color-bg-sunken); }
.findings-list li span:first-of-type { flex: 1; min-width: 0; }
.workflow-box { display: grid; gap: 0.8rem; }
.workflow-box textarea { width: 100%; }

.timeline { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.timeline li { position: relative; padding: 0 0 0.85rem 1.2rem; border-left: 2px solid var(--color-border); margin-left: 0.3rem; }
.timeline li::before { content: ""; position: absolute; left: -0.36rem; top: 0.35rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-bg-elevated); border: 2px solid var(--color-brand); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline-when { color: var(--color-text-muted); display: block; font-size: 0.76rem; }
.timeline-comment { margin: 0.35rem 0 0; padding: 0.4rem 0.7rem; background: var(--color-bg-subtle); border-radius: var(--radius-md); white-space: pre-wrap; }

.dropzone {
  border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: 1.5rem 1.25rem; margin-bottom: 1.25rem;
  text-align: center; transition: border-color 0.15s ease, background 0.15s ease; background: var(--color-bg-sunken);
}
.dropzone p { margin: 0 0 0.75rem; color: var(--color-text-muted); }
.dropzone .form-actions { justify-content: center; }
.dropzone-active { border-color: var(--color-brand); background: var(--color-brand-soft); }
.upload-progress { margin-top: 1rem; display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--color-text-muted); }
.progress { height: 8px; border-radius: 999px; background: var(--color-bg-subtle); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-brand), var(--color-accent)); transition: width 0.2s ease; }
.upload-errors { text-align: left; color: var(--color-error); font-size: 0.82rem; margin: 0.5rem 0 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.tile { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); overflow: hidden; display: flex; flex-direction: column; }
.tile[draggable="true"] { cursor: grab; }
.tile-dragging { opacity: 0.4; }
.tile-excluded .tile-media { opacity: 0.45; }
/* overflow: hidden keeps the 4:3 box - without it a tall picture stretches the tile. */
.tile-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-subtle); text-decoration: none; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); padding: 0.5rem;
}
.tile-pending { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.tile-meta { padding: 0.55rem 0.65rem 0.65rem; display: grid; gap: 0.4rem; font-size: 0.8rem; }
.tile-name { color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tile-include { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--color-text-muted); }
.tile-caption { font: inherit; padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text); }
.tile-caption-text { color: var(--color-text-muted); }
.tile-tools { display: flex; gap: 0.35rem; }
.tile-tools .btn { padding: 0.2rem 0.6rem; }
.tile-tools .btn-danger { margin-left: auto; }

/* ---------- The inspection form (templates/inspection_form.html, static/form.js) ---------- */

.tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; padding: 0.05rem 0.45rem; margin-right: 0.35rem;
  border-radius: 999px; background: var(--color-brand); color: #fff; font-size: 0.75rem; font-weight: 800;
}
.fill-head {
  position: sticky; top: 0; z-index: 20; margin: -1.75rem -2rem 1.25rem; padding: 0.85rem 2rem;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.fill-head-title { flex: 1; min-width: 14rem; }
.fill-head-title h1 { font-size: 1.15rem; margin: 0; }
.fill-head-title p { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.ring { --p: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--color-ok) calc(var(--p) * 1%), var(--color-bg-subtle) 0); font-size: 0.68rem; font-weight: 800; }
.ring > span { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-bg-elevated); display: inline-flex; align-items: center; justify-content: center; }
.save-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.save-state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-ok); }
.save-state-ok { color: var(--color-ok); }
.save-state-error { color: var(--color-error); }
.save-state-error::before { background: var(--color-error); }
.save-state-pending { color: var(--color-warn); }
.save-state-pending::before { background: var(--color-warn); animation: pulse 1s ease-in-out infinite; }

.form-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.form-toc { position: sticky; top: 5.5rem; display: grid; gap: 1rem; max-height: calc(100vh - 7rem); overflow: auto; padding: 0.25rem; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-list a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--color-text-muted); text-decoration: none; font-size: 0.86rem; font-weight: 600;
}
.toc-list a:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.toc-list a.active { background: var(--color-brand-soft); color: var(--color-brand); }
.toc-num { width: 1.45rem; height: 1.45rem; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; background: var(--color-bg-subtle); color: var(--color-text-muted); }
.toc-num .icon { width: 0.85rem; height: 0.85rem; }
.toc-list a.complete .toc-num { background: var(--color-ok); color: #fff; }
.toc-label { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.toc-count { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }
.toc-flag { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-warn); flex-shrink: 0; }
.toc-flag.bad { background: var(--color-error); }
.toc-box { padding: 0.85rem 0.9rem; border-radius: var(--radius-md); background: var(--color-bg-elevated); border: 1px solid var(--color-border); font-size: 0.84rem; }
.toc-box h3 { margin: 0 0 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.toc-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.toc-findings a { display: flex; gap: 0.45rem; align-items: baseline; text-decoration: none; color: var(--color-text); font-size: 0.82rem; }
.toc-findings a:hover { color: var(--color-brand); }

.card.form-chapter { scroll-margin-top: 5.5rem; padding: 0; overflow: hidden; }
.chapter-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--color-border); }
.chapter-head h2 { margin: 0; flex: 1; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; }
.chapter-body { padding: 1.2rem 1.4rem 1.4rem; display: grid; gap: 1.3rem; }
.chapter-foot { padding: 0 1.4rem 1.2rem; display: flex; justify-content: flex-end; }
.form-section { display: grid; gap: 0.9rem; scroll-margin-top: 5.5rem; }
.form-section > h3 { font-size: 0.92rem; margin: 0; display: flex; gap: 0.5rem; align-items: baseline; color: var(--color-text); }
.form-section > h3 .sec-num { color: var(--color-text-muted); font-weight: 700; }
.form-section + .form-section { padding-top: 1.2rem; border-top: 1px dashed var(--color-border); }

.record-box { border-radius: var(--radius-md); background: var(--color-bg-sunken); border: 1px solid var(--color-border); padding: 0.85rem 1rem; }
.record-box .facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem 1rem; }
.record-box .facts dd { font-size: 0.9rem; }
.record-box-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; font-size: 0.76rem; color: var(--color-text-muted); font-weight: 600; flex-wrap: wrap; }
.form-note { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.85rem; color: var(--color-text-muted); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-brand-soft); }
.form-note .icon { color: var(--color-brand); margin-top: 0.15rem; }

.form-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem 1.25rem; }
.form-field { scroll-margin-top: 6rem; }
.form-field > label, .form-field > .label { display: flex; align-items: baseline; gap: 0.35rem; }
.form-field .req { color: var(--color-error); }
.form-field textarea { min-height: 7.5rem; }
.form-field-readonly .field-value { font-weight: 650; white-space: pre-wrap; }
.form-field.is-filled > label::after { content: ""; }
.input-unit { display: flex; align-items: stretch; }
.input-unit input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-unit span { display: inline-flex; align-items: center; padding: 0 0.65rem; font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong); border-left: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-bg-subtle); }

.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-option {
  font: inherit; font-size: 0.84rem; font-weight: 650; padding: 0.42rem 0.85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.chip-option:hover { border-color: var(--color-brand); }
span.chip-option { cursor: default; }
.chip-option.active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.chip-option.active[data-tone="ok"] { background: var(--color-ok); border-color: var(--color-ok); }
.chip-option.active[data-tone="warn"] { background: var(--color-warn); border-color: var(--color-warn); }
.chip-option.active[data-tone="bad"] { background: var(--color-error); border-color: var(--color-error); }
.chip-option.chip-off { color: var(--color-text-muted); font-weight: 500; }

/* A matrix: several choice fields with the same options - a row each, a column per option. */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
.matrix th, .matrix td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--color-border); }
.matrix thead th { font-size: 0.74rem; font-weight: 700; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
.matrix thead th:first-child { text-align: left; }
.matrix tbody th { text-align: left; font-weight: 650; }
.matrix tbody tr:last-child > * { border-bottom: none; }
.matrix td { text-align: center; }
.matrix tbody tr.has-finding th { color: var(--color-error); }
.matrix tbody tr.has-finding[data-tone="warn"] th { color: var(--color-warn); }
.matrix-all { font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--color-brand); background: none; border: none; cursor: pointer; padding: 0.15rem 0.3rem; border-radius: 4px; text-decoration: underline dotted; }
.matrix-all:hover { background: var(--color-brand-soft); }
.matrix-cell { appearance: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--color-border-strong); background: var(--color-bg-elevated); cursor: pointer; padding: 0; position: relative; vertical-align: middle; }
.matrix-cell:hover { border-color: var(--color-brand); }
.matrix-cell.active { border-color: var(--color-brand); background: var(--color-brand); box-shadow: inset 0 0 0 3px var(--color-bg-elevated); }
.matrix-cell.active[data-tone="ok"] { border-color: var(--color-ok); background: var(--color-ok); }
.matrix-cell.active[data-tone="warn"] { border-color: var(--color-warn); background: var(--color-warn); }
.matrix-cell.active[data-tone="bad"] { border-color: var(--color-error); background: var(--color-error); }
.matrix-cell:disabled { cursor: default; }
.matrix .field-error { display: block; text-align: left; }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.25rem 0.5rem; }
.matrix-mobile-label { display: none; }

.rows-table { border-collapse: collapse; margin-bottom: 0.5rem; }
.rows-table th { font-size: 0.75rem; color: var(--color-text-muted); text-align: left; padding: 0 0.5rem 0.3rem 0; }
.rows-table td { padding: 0 0.5rem 0.4rem 0; }
.rows-table input { width: 11rem; max-width: 100%; }
@media (max-width: 640px) {
  .rows-table { width: 100%; table-layout: fixed; }
  .rows-table th:last-child, .rows-table td:last-child { width: 2.4rem; }
  .rows-table input { width: 100%; }
}

.block-summary { padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--color-bg-sunken); border: 1px solid var(--color-border); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.block-summary p { margin: 0; flex: 1; min-width: 12rem; }
.schema-block { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.schema-block p { margin: 0 0 0.5rem; }
.schema-preview { width: 240px; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
.schema-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.is-busy { opacity: 0.6; pointer-events: none; }
.form-progress { font-weight: 600; }
.form-body { min-width: 0; }

@media (max-width: 1100px) {
  .detail-grid, .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .page { padding: 1.25rem 1rem 2.5rem; }
  .page h1 { font-size: 1.35rem; }
  /* On a phone only the chapter bar stays in view, right under the menu bar. */
  .fill-head { position: static; margin: -1.25rem -1rem 0; padding: 0.7rem 1rem; gap: 0.6rem; backdrop-filter: none; border-bottom: none; }
  .fill-head-title { min-width: 0; flex-basis: calc(100% - 6rem); }
  .fill-head-title h1 { font-size: 1.05rem; }
  .fill-head .save-state { order: 5; flex-basis: 100%; font-size: 0.75rem; }
  .form-layout { grid-template-columns: 1fr; gap: 1rem; }
  .form-toc { position: sticky; top: 3.2rem; z-index: 15; max-height: none; overflow: visible; padding: 0; margin: 0 -1rem; }
  .form-toc .toc-box { display: none; }
  .toc-list { display: flex; overflow-x: auto; gap: 0.35rem; padding: 0.5rem 1rem; background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); scrollbar-width: none; }
  .toc-list a { white-space: nowrap; border: 1px solid var(--color-border); background: var(--color-bg-elevated); padding: 0.3rem 0.6rem; }
  .toc-list .toc-count { display: none; }
  .card.form-chapter, .form-section, .form-field { scroll-margin-top: 7rem; }
  .record-box .facts { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .chapter-head, .chapter-body { padding-left: 1rem; padding-right: 1rem; }
  .card { padding: 1.1rem 1.1rem; }
  .filter-bar input[type="search"] { min-width: 0; flex: 1 1 12rem; }
  .stepper li { font-size: 0.68rem; }
}
@media (max-width: 640px) {
  /* The matrix as stacked rows on a phone: the field's label, then its options as chips. */
  .matrix-wrap { border: none; padding: 0; }
  .matrix thead { display: none; }
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix tbody tr { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); }
  .matrix tbody th { border: none; padding: 0 0 0.15rem; }
  .matrix td { width: auto; border: none; padding: 0; }
  .matrix-cell { width: auto; height: auto; border-radius: 999px; border-width: 1px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.82rem; font-weight: 650; color: var(--color-text); }
  .matrix-cell.active { color: #fff; box-shadow: none; }
  .matrix-mobile-label { display: inline; }
  .form-fields { grid-template-columns: 1fr; }
}

/* ---------- Annotator ---------- */

.annotator { display: grid; gap: 0.75rem; }
.anno-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.anno-help { font-size: 0.75rem; flex-basis: 100%; }
.mode-btn {
  font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.85rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text);
}
.mode-btn.active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.anno-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; }
.anno-stage {
  height: calc(100vh - 290px); min-height: 420px; border-radius: var(--radius-lg); overflow: hidden;
  background: #1b1f22; border: 1px solid var(--color-border); position: relative;
}
.anno-stage canvas { display: block; cursor: crosshair; }
.anno-stage canvas.panning { cursor: grabbing; }
.anno-side {
  display: grid; gap: 1rem; align-content: start; max-height: calc(100vh - 290px); min-height: 420px; overflow: auto;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1rem;
}
.anno-side h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 0.5rem; }
.anno-side .field { margin-bottom: 0.5rem; }
.class-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.class-btn {
  font: inherit; font-size: 0.76rem; font-weight: 600; padding: 0.28rem 0.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--class-color); background: var(--color-bg); color: var(--color-text);
  box-shadow: inset 4px 0 0 var(--class-color);
}
.class-btn.active { background: var(--class-color); color: #fff; }
.severity-list { display: flex; gap: 0.3rem; }
.sev-btn {
  font: inherit; font-weight: 800; width: 2.2rem; height: 2.2rem; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--sev-color); background: var(--color-bg); color: var(--color-text);
}
.sev-btn.active { background: var(--sev-color); color: #fff; }
.mark-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.mark-row { padding: 0.4rem 0.5rem; border-radius: 8px; border: 1px solid var(--color-border); cursor: pointer; font-size: 0.8rem; }
.mark-row.selected { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.mark-head { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.mark-head select, .mark-head input { font: inherit; font-size: 0.78rem; padding: 0.2rem 0.3rem; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); max-width: 11rem; }
.mark-head .mark-sev { max-width: 7.5rem; }
.mark-head .btn { margin-left: auto; padding: 0.1rem 0.5rem; }
.sev-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.anno-strip { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; }
.strip-item {
  position: relative; flex: 0 0 auto; width: 92px; height: 69px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--color-bg-subtle);
}
.strip-item.active { border-color: var(--color-accent); }
.strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-count {
  position: absolute; right: 4px; top: 4px; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--color-accent); color: #fff; font-size: 0.7rem; font-weight: 800;
}
@media (max-width: 1000px) {
  .anno-main { grid-template-columns: 1fr; }
  .anno-side { max-height: none; }
}
.data-summary { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; max-width: 30rem; font-size: 0.85rem; }
.tile { position: relative; }
.tile-marks {
  position: absolute; top: 0.4rem; right: 0.4rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: rgba(27, 42, 50, 0.78); color: #fff; text-decoration: none;
}
.tile-marks:hover { background: var(--color-accent); }
.ai-panel { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-subtle); padding: 0.75rem 0.9rem; margin: 0 0 1rem; display: grid; gap: 0.45rem; font-size: 0.87rem; }
.ai-panel h3 { margin: 0; font-size: 0.95rem; }
.ai-panel p { margin: 0; }
.ai-run { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ai-run .badge-pending { animation: pulse 1.6s ease-in-out infinite; }
.tile-ai { justify-self: start; text-decoration: none; }
.ai-legend { list-style: none; margin: 0 0 0.5rem; padding: 0; display: grid; gap: 0.3rem; font-size: 0.87rem; }
.ai-legend li { display: flex; gap: 0.45rem; align-items: center; }
.ai-swatch { width: 0.8rem; height: 0.8rem; border-radius: 3px; border: 2px dashed; flex: none; }
.logo-row { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.org-logo { max-height: 56px; max-width: 220px; display: block; background: #fff; border-radius: 6px; padding: 4px; }

/* ---------- BLD-AI: erosion editor, card, reports list ---------- */

.erosion-toolbar { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.erosion-palette { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sev-pick {
  font: inherit; font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.75rem; border-radius: 8px; cursor: pointer; color: var(--color-text);
  border: 2px solid var(--color-border); background: var(--color-bg);
}
.sev-pick.active { border-color: var(--color-text); box-shadow: 0 0 0 3px rgba(51, 92, 112, 0.18); }
.sev-swatch { width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--sev-color); border: 1px solid rgba(0, 0, 0, 0.15); }
.sev-num { font-family: ui-monospace, monospace; font-size: 0.72rem; font-weight: 800; padding: 0 0.3rem; border-radius: 3px; background: var(--color-bg-subtle); }
.erosion-views { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.erosion-help { font-size: 0.8rem; margin: 0; }
.segmented { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.seg-btn {
  font: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.35rem 0.85rem; cursor: pointer;
  border: none; border-right: 1px solid var(--color-border); background: var(--color-bg-elevated); color: var(--color-text);
}
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--color-brand); color: #fff; }
.blade-row, .blade-axis-row { display: flex; align-items: center; }
.blade-label { width: 72px; flex-shrink: 0; text-align: right; padding-right: 0.75rem; font-size: 0.82rem; font-weight: 700; }
.blade-svg-wrap { flex: 1; min-width: 0; }
.blade-svg { display: block; width: 100%; height: 72px; cursor: crosshair; touch-action: none; }
.blade-outline { fill: none; stroke: var(--color-text); stroke-width: 1.5; pointer-events: none; }
.blade-axis { flex: 1; position: relative; height: 1.2rem; font-size: 0.72rem; color: var(--color-text-muted); }
.blade-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.blade-axis span:last-child { transform: translateX(-100%); }
.erosion-tip {
  position: fixed; z-index: 50; pointer-events: none; background: rgba(15, 15, 15, 0.85); color: #fff;
  font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap;
}
.erosion-table-wrap { max-height: 70vh; overflow: auto; }
.erosion-table { border-collapse: collapse; font-size: 0.82rem; }
.erosion-table th { position: sticky; top: 0; background: var(--color-bg-elevated); text-align: left; padding: 0.3rem 0.6rem; }
.erosion-table td { padding: 0.12rem 0.6rem; }
.sev-cell {
  font: inherit; font-weight: 800; width: 4.5rem; padding: 0.15rem 0; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.sev-cell:disabled { cursor: default; }
.sev-cell:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; }
.severity-guide summary { cursor: pointer; list-style: none; }
.severity-guide summary h2 { display: inline; }
.guide-figure img { max-width: 100%; border-radius: var(--radius-md); }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.guide-grid figure { margin: 0; }
.guide-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.guide-grid figcaption { font-size: 0.8rem; margin-top: 0.3rem; }
.blade-strips { display: grid; gap: 0.3rem; max-width: 46rem; margin-bottom: 0.6rem; }
.blade-strip { display: flex; align-items: center; gap: 0.5rem; }
.blade-strip-label { width: 1rem; font-weight: 800; font-size: 0.8rem; }
.blade-strip-cells { flex: 1; display: grid; grid-template-columns: repeat(50, 1fr); gap: 1px; height: 14px; }
.blade-strip-cells span { border-radius: 1px; }
.blade-strip-axis { display: flex; justify-content: space-between; font-size: 0.72rem; padding-left: 1.5rem; }
.severity-legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.82rem; }
.severity-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.forecast-summary h3 { font-size: 0.9rem; margin: 0 0 0.5rem; }
.forecast-table { max-width: 40rem; }
.field-error { color: var(--color-error); }
.select-col { width: 2rem; }
.multi-bar {
  position: sticky; bottom: 0.75rem; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--color-bg-elevated); border: 1px solid var(--color-brand);
  box-shadow: var(--shadow-lift); margin-top: 1rem;
}
.share-link { font-family: ui-monospace, monospace; font-size: 0.78rem; width: 100%; max-width: 34rem; }
.blade-strip-cells.mini { grid-template-columns: repeat(150, 1fr); height: 10px; min-width: 150px; gap: 0; }
.report-charts summary { font-weight: 700; }
.report-charts h3 { font-size: 0.95rem; margin: 1.4rem 0 0.4rem; color: var(--color-brand); }
.report-chart { margin: 0 0 1.25rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.report-chart h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: #1b2a32; }
.report-chart figcaption { font-size: 0.8rem; color: #5c6b72; margin-top: 0.4rem; }

/* /admin/testers */
.tester-target { border: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.6rem; }
.tester-target .inline-fields { margin-left: 1.6rem; }
.tester-done .form-grid { grid-template-columns: 1fr 1fr; }
.tester-done textarea { width: 100%; font: inherit; font-size: 0.85rem; }
.tester-org { padding: 0.75rem 0 1rem; border-bottom: 1px solid var(--color-border); }
.tester-org:last-child { border-bottom: none; }
.tester-org form { margin-top: 0.5rem; }
@media (max-width: 700px) { .tester-done .form-grid { grid-template-columns: 1fr; } }

/* /imprint */
.legal h2 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.legal p, .legal li { line-height: 1.6; }
.legal address { font-style: normal; margin: 0 0 1rem; line-height: 1.6; }
.imprint address { font-style: normal; margin: 0 0 1rem; line-height: 1.6; }
.imprint p { line-height: 1.6; }
.site-footer { flex-wrap: wrap; }

/* ---------- Menus (details.menu > summary + .menu-panel) ---------- */

details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; min-width: 18rem; padding: 0.9rem;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.menu-form { display: grid; gap: 0.75rem; }
.menu-list { min-width: 12rem; padding: 0.35rem; display: grid; }
.menu-list form { margin: 0; }
.menu-list button { width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem; border: none; background: none; font: inherit; font-size: 0.87rem; font-weight: 600; color: var(--color-text); border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.menu-list button:hover { background: var(--color-bg-subtle); }
.menu-list button.danger { color: var(--color-error); }

/* ---------- /org/forms ---------- */

.form-list .list-row { padding: 0.9rem 0.25rem; flex-wrap: wrap; }
.form-list .list-row-main strong { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; white-space: normal; }
.form-list .list-row-main small { white-space: normal; }
.form-list .list-row-main a { color: var(--color-text); text-decoration: none; }
.form-list .list-row-main a:hover { color: var(--color-brand); text-decoration: underline; }
.list-row-icon.brand { background: var(--color-brand); color: #fff; }
.hero-card { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, var(--color-brand-soft), var(--color-accent-soft)); border-color: transparent; }
.hero-card > div { flex: 1 1 18rem; }
.hero-card h2 { margin: 0 0 0.25rem; }
.hero-card p { margin: 0; }
.hero-card .inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hero-icon { width: 2.8rem; height: 2.8rem; border-radius: var(--radius-md); background: var(--color-bg-elevated); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; }
.hero-icon .icon { width: 1.5rem; height: 1.5rem; }
.row-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
.form-list-hint { margin: 0.25rem 0 0; font-size: 0.87rem; }
.toggle-btn { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: var(--radius-sm); }
.toggle-btn:hover { background: var(--color-bg-subtle); }
.toggle-btn > span { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--color-border-strong); transition: background 0.15s ease; }
.toggle-btn > span::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.toggle-btn.on { color: var(--color-ok); }
.toggle-btn.on > span { background: var(--color-ok); }
.toggle-btn.on > span::after { transform: translateX(1rem); }
.info-card h2 { display: flex; align-items: center; gap: 0.5rem; }
.info-card ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- The form builder (templates/form_builder.html, static/form-builder.js) ---------- */

.builder-bar {
  position: sticky; top: 0; z-index: 20; margin: -1.75rem -2rem 1.25rem; padding: 0.75rem 2rem;
  display: flex; gap: 0.75rem 1rem; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border);
}
.builder-title { flex: 1; min-width: 16rem; display: grid; gap: 0.1rem; }
.builder-title h1 { font-size: 1.15rem; margin: 0; }
.builder-title p { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); }
.builder-name, .builder-desc { font: inherit; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); padding: 0.1rem 0.4rem; margin-left: -0.4rem; width: 100%; max-width: 40rem; }
.builder-name { font-size: 1.15rem; font-weight: 800; }
.builder-desc { font-size: 0.82rem; color: var(--color-text-muted); }
.builder-name:hover, .builder-desc:hover { border-color: var(--color-border); }
.builder-name:focus, .builder-desc:focus { outline: none; border-color: var(--color-brand); background: var(--color-bg-elevated); box-shadow: var(--ring); }
.builder-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.builder-actions .segmented .seg-btn { display: inline-flex; align-items: center; gap: 0.35rem; }

.builder { display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.builder.previewing { grid-template-columns: minmax(0, 1fr) 360px; }
.builder-outline { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: hidden auto; }
.outline-head { display: flex; justify-content: space-between; align-items: center; padding: 0 0.3rem 0.4rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.outline-list, .outline-sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.outline-sections { margin: 0 0 0.3rem 2.3rem; }
.outline-list a { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 650; }
.outline-sections a { font-size: 0.8rem; padding: 0.25rem 0.5rem; font-weight: 600; }
.outline-list a:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.outline-list a.selected { background: var(--color-brand-soft); color: var(--color-brand); }
.outline-label { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.outline-num { color: var(--color-text-muted); font-size: 0.72rem; min-width: 1.8rem; }
.outline-grip { color: var(--color-border-strong); cursor: grab; display: inline-flex; }
.outline-stats { font-size: 0.78rem; padding: 0.6rem 0.4rem 0; margin: 0; }
.outline-ch[draggable="true"], .outline-sec[draggable="true"] { cursor: grab; }

.b-chapter { padding: 0; overflow: visible; }
.b-chapter.selected { border-color: var(--color-brand); box-shadow: var(--ring); }
.b-chapter-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem 0.8rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.b-chapter-head h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.b-inline { flex: 1; min-width: 0; font: inherit; color: var(--color-text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; }
.b-inline:hover { border-color: var(--color-border); }
.b-inline:focus { outline: none; border-color: var(--color-brand); background: var(--color-bg-elevated); box-shadow: var(--ring); }
.b-chapter-label { font-size: 1.05rem; font-weight: 800; }
.b-section-label { font-size: 0.9rem; font-weight: 700; }
.b-actions { display: flex; gap: 0.1rem; opacity: 0.55; transition: opacity 0.15s ease; }
.b-actions .icon-btn { width: 1.9rem; height: 1.9rem; }
.b-actions .icon-btn .icon { width: 1.05rem; height: 1.05rem; }
.b-chapter-head:hover .b-actions, .b-section-head:hover .b-actions, .b-item:hover .b-actions, .b-item.selected .b-actions, .b-item:focus-within .b-actions { opacity: 1; }
.is-hidden { visibility: hidden; }
.b-section { padding: 0.8rem 1.25rem 0.6rem; border-radius: var(--radius-md); margin: 0.4rem; }
.b-section.selected { background: color-mix(in srgb, var(--color-brand-soft) 55%, transparent); }
.b-section + .b-section { border-top: 1px dashed var(--color-border); border-radius: 0; }
.b-section-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.b-section-head h3 { margin: 0; font-size: 0.9rem; flex: 1; }
.b-section-head .sec-num { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 700; min-width: 1.8rem; }
.b-items { list-style: none; margin: 0; padding: 0.15rem; display: grid; gap: 0.35rem; min-height: 2.4rem; border-radius: var(--radius-md); }
.b-items.drop-into { background: var(--color-brand-soft); outline: 2px dashed var(--color-brand); }
.b-item {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.6rem; border-radius: var(--radius-md); cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-bg-elevated); transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.b-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-soft); }
.b-item.selected { border-color: var(--color-brand); box-shadow: var(--ring); }
.b-item.dragging, .outline-ch.dragging, .outline-sec.dragging { opacity: 0.4; }
.b-item.drop-before, .outline-ch.drop-before > a, .outline-sec.drop-before > a { box-shadow: 0 -3px 0 var(--color-accent); }
.outline-ch.drop-after > a, .outline-sec.drop-after > a { box-shadow: 0 3px 0 var(--color-accent); }
.outline-ch.drop-into > a { background: var(--color-brand-soft); }
.b-item-fact, .b-item-block { background: var(--color-bg-sunken); }
.b-item-note { background: var(--color-brand-soft); border-style: dashed; }
.b-grip { color: var(--color-border-strong); cursor: grab; display: inline-flex; }
.b-kind { width: 2rem; height: 2rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--color-brand-soft); color: var(--color-brand); flex-shrink: 0; }
.b-kind-fact { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.b-kind-block { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.b-item-main { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.b-item-main strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }
.b-item-main small { font-size: 0.76rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-item-main .b-help { font-style: italic; }
.b-tones { display: flex; gap: 3px; }
.b-tone { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--color-border-strong); }
.b-tone.tone-ok { background: var(--color-ok); }
.b-tone.tone-warn { background: var(--color-warn); }
.b-tone.tone-bad { background: var(--color-error); }
.b-empty { list-style: none; padding: 0.6rem; text-align: center; font-size: 0.82rem; color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); }
.b-add-row { position: relative; margin-top: 0.35rem; }
.b-chapter-foot { padding: 0 1rem 0.8rem; }
.b-add-chapter { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 1rem; font: inherit; font-weight: 700; color: var(--color-brand); background: transparent; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); cursor: pointer; }
.b-add-chapter:hover { border-color: var(--color-brand); background: var(--color-brand-soft); }
.add-menu {
  position: absolute; left: 0; top: calc(100% + 0.3rem); z-index: 25; width: min(34rem, 80vw); padding: 0.75rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift);
}
.add-group { display: grid; gap: 1px; align-content: start; }
.add-facts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.add-facts h4 { grid-column: 1 / -1; }
.add-group h4 { margin: 0 0 0.3rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.add-group button { display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.5rem; border: none; background: none; border-radius: var(--radius-sm); font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--color-text); cursor: pointer; text-align: left; }
.add-group button:hover:not(:disabled) { background: var(--color-brand-soft); color: var(--color-brand); }
.add-group button:disabled { color: var(--color-text-muted); opacity: 0.5; cursor: default; }

.builder-side {
  position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); display: flex; flex-direction: column;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
}
.side-tabs { margin: 0; padding: 0.8rem 1rem 0; gap: 1rem; flex-shrink: 0; }
.side-tabs button { display: inline-flex; align-items: center; gap: 0.35rem; }
.side-pane { padding: 1rem 1.1rem 1.2rem; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; align-content: start; }
.side-pane .field input, .side-pane .field textarea, .side-pane .field select { width: 100%; }
.props-title { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.45rem; }
.props-empty { text-align: center; color: var(--color-text-muted); font-size: 0.87rem; }
.props-empty > .icon { width: 2rem; height: 2rem; color: var(--color-border-strong); }
.props-tips { text-align: left; padding-left: 1.1rem; display: grid; gap: 0.45rem; font-size: 0.82rem; }
.props-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.props-grid .field:first-child:nth-last-child(2), .props-grid .field:first-child:nth-last-child(2) ~ .field { grid-column: span 1; }
.props-toggles { display: grid; gap: 0.5rem; }
.props-move { display: flex; gap: 0.4rem; }
.props-foot { display: flex; gap: 0.4rem; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.props-options { display: grid; gap: 0.35rem; }
.props-options-head { display: flex; justify-content: space-between; font-size: 0.8rem; padding-right: 4.2rem; }
.option-row { display: flex; gap: 0.35rem; align-items: center; }
.option-row input:not([type="checkbox"]) { flex: 1; min-width: 0; font: inherit; font-size: 0.87rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text); }
.option-row .icon-btn { width: 1.8rem; height: 1.8rem; }
.tone-select { font: inherit; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.2rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text-muted); width: 5.2rem; }
.tone-select.tone-ok { background: var(--color-ok-soft); color: var(--color-ok); border-color: transparent; }
.tone-select.tone-warn { background: var(--color-warn-soft); color: var(--color-warn); border-color: transparent; }
.tone-select.tone-bad { background: var(--color-error-soft); color: var(--color-error); border-color: transparent; }

.ai-pane { grid-template-rows: minmax(0, 1fr) auto auto; min-height: 0; flex: 1; }
.ai-log { display: grid; gap: 0.7rem; align-content: start; overflow: auto; min-height: 12rem; }
.ai-msg { font-size: 0.87rem; padding: 0.65rem 0.8rem; border-radius: var(--radius-md); background: var(--color-bg-sunken); }
.ai-msg p { margin: 0; white-space: pre-wrap; }
.ai-user { background: var(--color-brand); color: #fff; margin-left: 2rem; }
.ai-assistant { margin-right: 1rem; }
.ai-intro { background: linear-gradient(135deg, var(--color-brand-soft), var(--color-accent-soft)); }
.ai-suggestions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ai-suggestions button { font: inherit; font-size: 0.78rem; font-weight: 650; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text); cursor: pointer; }
.ai-suggestions button:hover { border-color: var(--color-brand); color: var(--color-brand); }
.ai-thinking { color: var(--color-text-muted); animation: pulse 1.4s ease-in-out infinite; }
.ai-changes { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: 0.82rem; }
.ai-actions { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; margin-top: 0.6rem; flex-wrap: wrap; font-size: 0.8rem; }
.ai-input { display: grid; gap: 0.45rem; }
.ai-input textarea { width: 100%; font: inherit; font-size: 0.88rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text); resize: vertical; }
.ai-input textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--ring); }
.ai-input-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.ai-input-row label.icon-btn { cursor: pointer; }
.ai-files { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.file-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.15rem 0.2rem 0.15rem 0.55rem; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-brand); font-size: 0.78rem; font-weight: 650; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .icon-btn { width: 1.4rem; height: 1.4rem; color: inherit; }
.ai-attached { display: flex; gap: 0.35rem; align-items: center; margin-top: 0.35rem !important; font-size: 0.78rem; opacity: 0.85; }
.ai-drop { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.7rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); border: 1.5px dashed var(--color-border-strong); background: var(--color-bg-elevated); cursor: pointer; }
.ai-drop > .icon { width: 1.6rem; height: 1.6rem; color: var(--color-brand); }
.ai-drop span { display: grid; gap: 0.15rem; }
.ai-drop small { color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.35; }
.ai-drop:hover, .ai-drop-hot, .is-dragging .ai-drop { border-color: var(--color-brand); background: var(--color-brand-soft); }
.ai-drop-hot { animation: glow 1.8s ease-in-out 3; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand) 22%, transparent); } }
.is-dragging { outline: 2px dashed var(--color-brand); outline-offset: -6px; border-radius: var(--radius-md); }
.lang-intro { margin: 0; font-size: 0.82rem; }
.lang-head { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }
.lang-head select { font: inherit; font-size: 0.87rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text); }
.lang-list { display: grid; gap: 0.55rem; }
.lang-row { display: grid; gap: 0.2rem; }
.lang-source { font-size: 0.78rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.lang-row input, .lang-row textarea { width: 100%; font: inherit; font-size: 0.87rem; padding: 0.4rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-bg-elevated); color: var(--color-text); resize: vertical; }
.lang-row.proposed input, .lang-row.proposed textarea { border-color: var(--color-accent); background: var(--color-accent-soft); }
.lang-foot .save-state { font-size: 0.78rem; }
.lang-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; position: sticky; bottom: -1.2rem; padding: 0.6rem 0; background: var(--color-bg-elevated); }
.builder-preview { min-width: 0; }
.preview-note { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1rem; }

@media (max-width: 1280px) {
  .builder { grid-template-columns: 200px minmax(0, 1fr) 320px; }
}
@media (max-width: 1100px) {
  .builder, .builder.previewing { grid-template-columns: minmax(0, 1fr); }
  .builder-outline { display: none; }
  .builder-side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; max-height: 70vh; z-index: 45; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(calc(100% - 3rem)); transition: transform 0.2s ease; }
  .builder.side-open .builder-side { transform: none; }
  .builder { padding-bottom: 4rem; }
}
@media (max-width: 960px) {
  .builder-bar { margin: -1.25rem -1rem 1rem; padding: 0.6rem 1rem; top: 3.2rem; }
  .menu-panel { position: fixed; left: 1rem; right: 1rem; top: auto; min-width: 0; }
  .add-menu { grid-template-columns: 1fr; width: calc(100vw - 3rem); }
}
.forecast-summary { display: block; }
.forecast-summary h3 { margin: 0 0 0.5rem; }
.stepper-card { padding: 1rem 1.5rem; }
.stepper-note { margin: 0.5rem 0 0; text-align: center; font-size: 0.8rem; }
.subhead { font-size: 0.85rem; margin: 1rem 0 0.5rem; }
.card > h2 { display: flex; align-items: center; gap: 0.5rem; }
.card > h2 .icon, .card-head h2 .icon { color: var(--color-text-muted); }
.card-head h2 { display: flex; align-items: center; gap: 0.5rem; }
.detail-side h2 { font-size: 0.95rem; }
.workflow-card { border-color: color-mix(in srgb, var(--color-brand) 35%, var(--color-border)); }
@media (max-width: 1100px) {
  /* One column: the next workflow step first, then the data, then details and history. */
  .detail-grid { display: flex; flex-direction: column; gap: 0; }
  .detail-main, .detail-side { display: contents; }
  .detail-side .card { margin-bottom: 1.25rem; width: 100%; }
  .workflow-card { order: -1; }
  .detail-side .card:not(.workflow-card) { order: 1; }
}

/* ---------- Dialogs; filling a form in from documents (inspection_form.html, form.js) ---------- */

.dialog { width: min(720px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-lift); }
.dialog::backdrop { background: rgba(13, 22, 27, 0.45); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-bg-elevated); z-index: 1; }
.dialog-head h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.dialog-head h2 .icon { color: var(--color-accent); }
.dialog-body { padding: 1rem 1.25rem 1.25rem; display: grid; gap: 0.85rem; }
.dialog-body > p { margin: 0; }
.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; }
.dialog-actions .btn:last-child { margin-left: auto; }
.dialog .ai-drop { margin-top: 0; }
.fill-note { padding: 0.65rem 0.8rem; border-radius: var(--radius-md); background: var(--color-brand-soft); font-size: 0.88rem; }
.fill-select-all { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; }
.fill-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fill-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.65rem 0.8rem; display: grid; gap: 0.45rem; }
.fill-item label { display: flex; gap: 0.65rem; align-items: flex-start; cursor: pointer; }
.fill-item input[type="checkbox"] { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--color-brand); flex-shrink: 0; }
.fill-item:has(input:checked) { border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand-soft) 45%, transparent); }
.fill-same { opacity: 0.7; }
.fill-main { display: grid; gap: 0.1rem; min-width: 0; }
.fill-label { font-weight: 650; font-size: 0.9rem; }
.fill-main small { color: var(--color-text-muted); font-size: 0.75rem; }
.fill-value { font-size: 0.95rem; color: var(--color-brand); overflow-wrap: anywhere; white-space: pre-wrap; }
.fill-main .fill-current { color: var(--color-warn); }
.fill-item blockquote, .evidence blockquote { margin: 0 0 0 1.7rem; padding: 0.4rem 0.65rem; border-left: 3px solid var(--color-accent); background: var(--color-bg-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.8rem; color: var(--color-text-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.fill-item cite { display: block; margin-top: 0.25rem; font-style: normal; font-size: 0.72rem; font-weight: 650; }
.fill-rejected { font-size: 0.82rem; color: var(--color-text-muted); }
.fill-rejected summary { cursor: pointer; font-weight: 650; }
.fill-rejected ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.evidence { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.2rem; font-weight: 500; }
.evidence summary { cursor: pointer; color: var(--color-accent-dark); font-weight: 650; list-style: none; }
.evidence summary::before { content: "❝ "; }
.evidence blockquote { margin: 0.3rem 0 0; }
.from-document input, .from-document textarea { border-color: var(--color-accent); }

@media (max-width: 640px) {
  .dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }
  .fill-item blockquote { margin-left: 0; }
  #fill-open span { display: none; }
}

/* Repair economics: the assumption-set editor's table of inputs (templates/blade_erosion/economics_set.html). */
.econ-table .input { width: 6.5rem; padding: 0.3rem 0.45rem; font-size: 0.85rem; }
.econ-table select.input { width: auto; }
.econ-table .input.econ-note { width: 11rem; }
.econ-table .input::placeholder { color: var(--color-text-muted); opacity: 0.75; }
.econ-table tr.has-error td { background: var(--color-error-soft); }
.econ-table tr.econ-filled td { background: var(--color-accent-soft); }

/* Interactive repair economics (templates/blade_erosion/economics_live.html, static/economics-live.js) */
.econ-live { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.econ-controls { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.econ-controls select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
.econ-sliders { display: flex; flex-direction: column; gap: 0.85rem; }
.econ-slider label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; }
.econ-slider output { font-variant-numeric: tabular-nums; color: var(--color-brand); white-space: nowrap; }
.econ-slider output.changed { color: var(--color-accent-dark); }
.econ-slider input[type=range] { width: 100%; accent-color: var(--color-brand); }
.econ-slider small { color: var(--color-text-muted); font-size: 0.72rem; }
.econ-report { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.econ-results { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.econ-results.busy #econ-result { opacity: 0.55; transition: opacity 0.2s; }
.econ-summary-box { margin-bottom: 0.75rem; border-left: 4px solid var(--color-brand); background: var(--color-brand-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 0.75rem 1rem; line-height: 1.5; }
.econ-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0 1rem; }
.econ-kpi { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-elevated); }
.econ-kpi span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.econ-kpi strong { font-size: 1.05rem; }
.econ-kpi small { font-size: 0.75rem; color: var(--color-text-muted); }
.econ-kpi-decision { background: var(--color-brand-soft); border-color: color-mix(in srgb, var(--color-brand) 35%, transparent); }
.econ-kpi-loss { background: var(--color-error-soft); border-color: color-mix(in srgb, var(--color-error) 25%, transparent); }
.econ-matrix-live td.best { font-weight: 700; }
.econ-matrix-live td.rec { font-weight: 700; box-shadow: inset 0 0 0 2px var(--color-brand); }
.econ-matrix-live td.neg { color: var(--color-text-muted); }
.econ-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
.econ-chart { margin: 0; }
.econ-chart figcaption { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.econ-chart [data-chart] { height: 300px; }
@media (max-width: 960px) {
  .econ-live { grid-template-columns: 1fr; }
  .econ-controls { position: static; }
  .econ-charts { grid-template-columns: 1fr; }
}

/* BLD-AI image import (templates/blade_erosion/image_import.html) */
.import-explain { display: grid; gap: 0; margin: 0 0 0.75rem; }
.import-explain > div { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.87rem; }
.import-explain > div:last-child { border-bottom: none; }
.import-explain dt { font-weight: 700; }
.import-explain dd { margin: 0; }
.import-groups { list-style: none; margin: 0; padding: 0; }
.import-group { padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); display: grid; gap: 0.35rem; }
.import-group:last-child { border-bottom: none; }
.import-group-error { background: color-mix(in srgb, var(--color-error) 8%, transparent); }
.import-group-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.import-group-head select { width: auto; display: inline-block; }
.import-group-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.87rem; }
.import-group .field-hint { margin: 0; }
.name-parts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.1rem; margin: 0.25rem 0 1rem; }
.name-part { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.name-part code { padding: 0.25rem 0.45rem; border-radius: var(--radius-sm); background: var(--color-brand-soft); color: var(--color-brand); font-size: 0.9rem; }
.name-part small { font-size: 0.72rem; color: var(--color-text-muted); text-align: center; max-width: 9rem; }
.name-sep { padding: 0.25rem 0; font-family: var(--font-mono, monospace); color: var(--color-text-muted); }
.import-examples th code { text-transform: none; letter-spacing: 0; font-size: 0.75rem; font-weight: 400; overflow-wrap: anywhere; white-space: normal; }
.import-examples tbody th { text-align: left; white-space: nowrap; color: var(--color-text-muted); font-weight: 600; }
.import-done h2 .icon { color: var(--color-ok, var(--color-brand)); }
.import-done .list-row .btn { flex-shrink: 0; }
@media (max-width: 600px) {
  .import-explain > div { grid-template-columns: 1fr; }
}

/* --- An inspection in steps (BLD-AI: images, detection, mapping, analysis) ---------------------- */
.step-no {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; flex-shrink: 0;
  background: var(--color-brand-soft); color: var(--color-brand); font-size: 0.85rem; font-weight: 800; margin-right: 0.15rem;
}
.step-card { min-width: 0; }
.step-skipped { margin: 0; font-size: 0.88rem; }
.step-choices { margin: 0 0 1rem; }
.step-card .ai-panel { margin: 0; }
.step-card .ai-panel h3 { display: none; }
.gallery-panel { margin-top: 0.5rem; }
.gallery-panel .gallery { margin-top: 0.75rem; }
.quick-path { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1rem; }
.quick-path p { margin: 0 0 0.5rem; }
.quick-path > div { min-width: 0; }
.quick-path .btn { white-space: normal; text-align: left; }

/* The erosion mapping (static/mapping.js): images on the blade's scale above the grid. */
.mapping { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.mapping > p { margin: 0; }
.map-state { font-size: 0.88rem; }
.map-state-warn { color: var(--color-warn); font-weight: 600; }
.map-note { margin: 0; }
.map-blade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; min-width: 0; }
.map-blade-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.map-blade-head h3 { margin: 0; font-size: 0.95rem; }
.map-blade-head .muted, .map-placed { font-size: 0.8rem; }
.map-placed { margin: 0; }
.map-scroll { overflow-x: auto; padding-bottom: 0.2rem; }
.map-track { min-width: 600px; position: relative; padding-right: 2.5rem; }
.map-strip { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-bg-sunken); }
.map-tile {
  position: absolute; padding: 0; margin: 2px 0; border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-bg-subtle); overflow: hidden; cursor: pointer; font: inherit;
}
.map-tile:hover, .map-tile:focus-visible { border-color: var(--color-brand); z-index: 2; box-shadow: var(--ring); outline: none; }
.map-tile-selected { border: 2px solid var(--color-accent); z-index: 3; }
.map-tile-svg { display: block; width: 100%; height: 100%; }
.map-slice { cursor: help; }
.map-cells { display: grid; grid-template-columns: repeat(50, 1fr); gap: 1px; height: 22px; margin-top: 4px; }
.map-cell { position: relative; border-radius: 1px; cursor: pointer; }
.map-cell-lit { outline: 2px solid var(--color-text); outline-offset: -1px; z-index: 1; }
.map-cell-ambiguous { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(148, 103, 189, 0.85) 3px 5px) !important; }
.map-cell-human::after { content: ""; position: absolute; top: 2px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--color-text); }
.map-cell-painted { box-shadow: inset 0 -4px 0 var(--color-brand); }
.map-axis { position: relative; height: 1.2rem; font-size: 0.72rem; color: var(--color-text-muted); }
.map-axis span { position: absolute; top: 0.15rem; transform: translateX(-50%); white-space: nowrap; }
.map-axis span:first-child { transform: none; }
.map-axis .map-axis-end { transform: translateX(-100%); }
.map-info { margin: 0; font-size: 0.8rem; min-height: 2.4em; }
.map-legend .severity-legend { margin-bottom: 0.4rem; }
.map-swatch { display: inline-block; width: 1rem; height: 0.8rem; border-radius: 2px; }
.map-unused ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.82rem; }
.map-actions { margin: 0; }
.map-toolbar { display: grid; gap: 0.5rem; }
.map-toolbar .field-hint { margin: 0; }
.map-toolbar > .btn { justify-self: start; }
.map-palette { align-items: center; }
.map-cells-paint { cursor: crosshair; touch-action: none; }
.map-cell-stale { outline: 2px dashed var(--color-warn); outline-offset: -2px; }
.map-tile-moved { border-style: dashed; border-color: var(--color-brand); }
.map-flip { margin-left: auto; }
.map-move { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: 0.5rem; vertical-align: middle; }
.save-state-pending { color: var(--color-warn); }
.save-state-pending::before { background: var(--color-warn); }

/* BLD-AI steps: overview, step heads, mapping view (docs/bld-ai-mapping-plan.md) */
.steps-overview { padding: 0.8rem 1rem; display: grid; gap: 0.6rem; }
.steps-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.steps-item a { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: 0.85rem; min-width: 0; }
.steps-item a:hover { background: var(--color-bg-subtle); }
.steps-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps-done a { color: var(--color-text); }
.steps-next a { background: var(--color-brand-soft); color: var(--color-brand); font-weight: 600; }
.steps-next-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.steps-next-box p { margin: 0; }
.steps-next-box .form-actions { margin: 0; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.step-no-done { background: var(--color-ok-soft); color: var(--color-ok); }
.step-no-current { background: var(--color-brand); color: #fff; }
.step-no-todo, .step-no-skipped { opacity: 0.55; }
.step-card.step-todo > :not(.step-head) { opacity: 0.75; }
.erosion-source { margin: 0 0 0.6rem; font-size: 0.88rem; }
.ai-choice { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem 0.6rem; margin: 0; display: grid; gap: 0.35rem; }
.ai-choice legend { font-weight: 600; padding: 0 0.25rem; }
.ai-choice-option { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.ai-choice-option input { margin-top: 0.2rem; }
.map-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; font-size: 0.85rem; }
.map-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.map-tile { touch-action: pan-y; cursor: grab; }
.map-tile-dragging { cursor: grabbing; z-index: 4; box-shadow: var(--ring); opacity: 0.9; }
.map-tile-empty { opacity: 0.55; }
.map-tile-badge { position: absolute; right: 2px; bottom: 2px; font-size: 0.65rem; padding: 0 0.25rem; border-radius: 3px; background: var(--color-brand); color: #fff; pointer-events: none; }
.map-viewer { border: none; border-radius: var(--radius-md); padding: 0.8rem 1rem; width: min(1200px, 96vw); max-height: 94vh; background: var(--color-bg); color: var(--color-text); }
.map-viewer::backdrop { background: rgba(0, 0, 0, 0.6); }
.map-viewer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.map-viewer-head h3 { margin: 0; font-size: 1rem; word-break: break-all; }
.map-viewer-head p { margin: 0.15rem 0 0; font-size: 0.82rem; }
.map-viewer-figure { margin: 0.6rem 0; background: #000; border-radius: var(--radius-sm); overflow: auto; max-height: 70vh; }
.map-viewer-svg { display: block; width: 100%; height: auto; }
.map-viewer-slices { margin: 0 0 0.6rem; padding-left: 0; list-style: none; display: grid; gap: 0.2rem; font-size: 0.85rem; }
.map-viewer-slices li { display: flex; align-items: center; gap: 0.4rem; }
@media (max-width: 640px) {
  .steps-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Turbine data asked at the start (image import, inspection page; blade_erosion/turbine_data.py) */
.turbine-data { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.turbine-data-fields { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 0.5rem; }
.turbine-data-fields .field { margin: 0; min-width: 0; }
.turbine-data-inputs { display: flex; gap: 0.4rem; }
.turbine-data-inputs .input { width: 8.5rem; max-width: 100%; }

/* Smart entry of sites and turbines (static/asset-lookup.js) */
.lookup-panel { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-subtle); padding: 0.75rem 0.9rem; display: grid; gap: 0.75rem; }
.lookup-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 0.35rem; }
.lookup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.87rem; }
.lookup-entry { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; }
.lookup-entry > div { min-width: 0; overflow-wrap: anywhere; }
.lookup-entry > .btn, .lookup-entry > .badge { flex: none; }
.lookup-source { font-size: 0.75rem; color: var(--color-text-muted); }
.lookup-message { margin: 0; font-size: 0.85rem; color: var(--color-ok); }
.lookup-linked { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.87rem; }
.lookup-linked > .icon { color: var(--color-ok); }
.register-card .form-actions { margin-top: 0.75rem; }

/* BLD-AI in steps: the steps take the page's width, the side cards follow in a row. */
.detail-grid-stepped { grid-template-columns: minmax(0, 1fr); }
.detail-grid-stepped .detail-side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }