/* Claims analyst console. Dark by default; a viewer can choose light (the theme button), and the choice is kept.
   Surfaces, ink and accent follow the Celesis brand (docs/brand/README.md): Midnight, Celesis Blue, Ice Blue,
   Stone; Montserrat headings, Public Sans text. Status colors are fixed across themes and always paired with an
   icon + label. */

@font-face { font-family: "Montserrat"; font-weight: 100 900; font-display: swap; src: url("fonts/Montserrat.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap; src: url("fonts/PublicSans.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --page: #050b1a;                /* Midnight */
  --surface-1: #0b1426;
  --surface-2: #111c33;
  --surface-3: #18243f;
  --ink: #ffffff;
  --ink-2: #c8d1e0;
  --muted: #94a3b8;               /* 6.6:1 or better on every dark surface */
  --grid: #18243f;
  --baseline: #26355a;
  --border: rgba(148, 163, 184, 0.14);
  --accent: #5b8cff;              /* Celesis Blue, lightened for dark grounds (6.2:1 on Midnight) */
  --accent-wash: rgba(37, 99, 255, 0.20);
  --accent-ink: #93b4ff;
  --seq-0: #111c33;               /* empty cell of the matrix heat scale */
  --accent-fill: #2563ff;         /* Celesis Blue: primary buttons, white text at 4.9:1 */
  --tile-ink: #e3ecff;            /* text on matrix tiles, 4.5:1 at the darkest step */
  --serious-ink: #f0a07f;         /* orange as text, not only as a mark */
  --danger-ink: #f08a8a;
  --crit: #d03b3b; --serious: #ec835a; --warn: #fab219; --good: #0ca30c; --neutral: #898781;
  --crit-wash: rgba(208, 59, 59, 0.16); --serious-wash: rgba(236, 131, 90, 0.16);
  --warn-wash: rgba(250, 178, 25, 0.14); --good-wash: rgba(12, 163, 12, 0.16);
  --good-ink: #3cc03c;            /* 4.8:1 or better on every dark surface, over the green wash */
  --focus: #7dd3fc;               /* Ice Blue */
  --shadow: 0 8px 24px rgba(0, 4, 12, 0.6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f7fb;
  --surface-1: #ffffff;
  --surface-2: #eef2f8;
  --surface-3: #e5e7eb;           /* Stone */
  --ink: #050b1a;                 /* Midnight */
  --ink-2: #475569;
  --muted: #526177;               /* 5.1:1 or better on every light surface */
  --grid: #e5e7eb;
  --baseline: #cbd5e1;
  --border: rgba(5, 11, 26, 0.10);
  --accent: #2563ff;              /* Celesis Blue */
  --accent-wash: rgba(37, 99, 255, 0.10);
  --accent-ink: #1d4ed8;
  --seq-0: #e8effc;
  --accent-fill: #2563ff;
  --tile-ink: #050b1a;
  --serious-ink: #a8461f;
  --danger-ink: #b42323;
  --crit-wash: rgba(208, 59, 59, 0.10); --serious-wash: rgba(236, 131, 90, 0.14);
  --warn-wash: rgba(250, 178, 25, 0.16); --good-wash: rgba(12, 163, 12, 0.10);
  --good-ink: #006300;
  --focus: #1d4ed8;
  --shadow: 0 8px 24px rgba(5, 11, 26, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--page); color: var(--ink);
  font: 14px/1.45 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Navigation, buttons, chips, tiles and table cells read as controls already: no underline until hover. */
.brand, a.btn, a.chip, .seg a, a.cell, .legend a, .export-item, a.key, td a, th a, .tableview a,
.op-panel a, .tabs-nav a, .viewer-tabs a, .fieldlink, .who a { text-decoration: none; }
td.muted a, td .muted a, .empty a { text-decoration: underline; }   /* a link inside a sentence */
td.ver a { text-decoration: underline; }        /* an analysis version beside its "current" chip */
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.amt { text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.ink2 { color: var(--ink-2); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.sr-only { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Only where a touchscreen is the main input (phones, tablets): photographing a document needs the device's camera.
   A laptop or desktop, with a mouse or trackpad, does not show it. */
@media (hover: hover) and (pointer: fine) { .touch-only { display: none !important; } }
/* left: 0 keeps hidden text inside the page: an absolute box escapes a scrolling table's overflow and widened it. */
h1, h2, h3 { margin: 0; font-weight: 600; font-family: "Montserrat", "Public Sans", system-ui, sans-serif; }
h2 { font-size: 16px; letter-spacing: -.005em; color: var(--ink); }

/* ---- shell ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 24px; background: var(--surface-1); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.brand img { height: 26px; width: auto; display: block; }
.brand .logo-light { display: none; }
.login-brand { margin-bottom: 18px; }
.login-brand img { height: 44px; }
:root[data-theme="light"] .brand .logo-light { display: block; }
:root[data-theme="light"] .brand .logo-dark { display: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
            border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.icon-btn[aria-current="page"] { background: var(--accent-wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-ink); }
/* ---- left-hand menu (_nav.html) ------------------------------------------------------------
   Wide screens: a dark Midnight sidebar, the logo on top, each link named beside its icon, in groups (Workspace,
   Administration). Below 1100 px it folds to a rail of icons: the names are visually hidden (screen readers still
   read them) and show as tooltips (console.js skips the tooltip while the name is visible). The sidebar is dark in
   both themes, so it has its own colors. */
:root { --side-bg: #070e1f; --side-ink: #c8d1e0; --side-muted: #8fa0ba; --side-hover: rgba(255, 255, 255, .06);
        --side-current: #2563ff; --side-rule: rgba(148, 163, 184, .14); }
:root[data-theme="light"] { --side-bg: #050b1a; }
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.content { min-width: 0; }
.sidenav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 12px;
           overflow-y: auto; overflow-x: hidden; background: var(--side-bg); color: var(--side-ink);
           border-right: 1px solid var(--side-rule); scrollbar-width: thin; }
.side-brand { display: flex; align-items: center; padding: 0 8px 18px; }
.side-logo { height: 40px; width: auto; display: block; }
.side-mark { display: none; height: 34px; width: auto; }
.side-list, .side-sub, .side-group > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-heading { display: block; padding: 14px 10px 6px; font: 600 10.5px/1 "Public Sans", system-ui, sans-serif;
                letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); }
.side-list > .side-heading:first-child { padding-top: 0; }
.side-group + .side-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--side-rule); }
.rail-only { display: none; }
.side-link { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0 12px; text-decoration: none;
             border-radius: 8px; border: 0; background: transparent; color: var(--side-ink); font: 500 14px/1.2 "Public Sans", system-ui, sans-serif;
             text-align: left; cursor: pointer; }
.side-link > span { white-space: normal; line-height: 1.25; padding-block: 6px; }
.side-link svg { flex: none; }
.side-link:hover { background: var(--side-hover); color: #fff; text-decoration: none; }
.side-link[aria-current="page"] { background: var(--side-current); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(47, 107, 255, .8); }
.side-link.side-open { color: #fff; background: var(--side-hover); }
.side-link:focus-visible { outline: 2px solid #9db8ff; outline-offset: 2px; }
.side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--side-rule); display: flex; flex-direction: column; gap: 2px; }
.side-foot form { margin: 0; }
@media (max-width: 1099px) {
  .shell { grid-template-columns: 60px minmax(0, 1fr); }
  .sidenav { align-items: center; padding: 12px 0; }
  .side-brand { padding: 0 0 12px; }
  .side-logo { display: none; }
  .side-mark { display: block; }
  .side-heading { display: none; }
  .side-list, .side-sub, .side-group > ul, .side-foot { align-items: center; }
  .rail-only { display: block; }
  .side-admin { display: none; }
  .side-admin.side-in { display: block; margin: 4px 0; padding: 4px 0; border-top: 1px solid var(--side-rule); border-bottom: 1px solid var(--side-rule); }
  .side-group + .side-group { width: 32px; margin-left: auto; margin-right: auto; }
  .side-link { justify-content: center; width: 42px; min-height: 42px; padding: 0; }
  .side-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 52px minmax(0, 1fr); }
  .side-link { width: 40px; min-height: 40px; }
}
.admin-current { color: var(--ink-2); font-weight: 500; }
.gloss-icon { display: inline-flex; vertical-align: -4px; margin-right: 6px; color: var(--ink-2); }
.topbar .search { flex: 1; max-width: 420px; }
.topbar .search input { width: 100%; }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-2); white-space: nowrap; }
.who-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.who-text b { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.who-role { font-size: 12px; color: var(--muted); }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash);
          color: var(--accent-ink); font: 700 13px/1 "Montserrat", "Public Sans", sans-serif; letter-spacing: .02em; }
.main { padding: 16px; max-width: 1680px; margin: 0 auto; }
.banner { padding: 8px 16px; background: var(--warn-wash); border-bottom: 1px solid var(--border); color: var(--ink); font-size: 13px; }
.flash { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--accent-wash); border: 1px solid var(--border); }

/* ---- controls -------------------------------------------------------- */
input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], select, textarea {
  background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 10px; font: inherit;
}
textarea { width: 100%; resize: vertical; min-height: 72px; }
button, .btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 500;
}
button:hover, .btn:hover { background: var(--surface-3); text-decoration: none; }
.btn-primary { background: var(--accent-fill); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--accent-fill); filter: brightness(1.1); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 4px 8px; font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.filters label { color: var(--muted); font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg a { padding: 6px 12px; color: var(--ink-2); }
.seg a[aria-current="true"] { background: var(--accent-wash); color: var(--ink); }
.seg a:hover { text-decoration: none; background: var(--surface-2); }

/* ---- cards & layout -------------------------------------------------- */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; overflow-x: auto; }
.card + .card { margin-top: 12px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tile { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 14px; }
.tile::before { content: ""; position: absolute; top: -1px; left: 18px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.tile.t-warn::before { background: var(--warn); } .tile.t-good::before { background: var(--good); } .tile.t-crit::before { background: var(--crit); }
.tile .label { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.tile .value { font: 700 30px/1.15 "Montserrat", "Public Sans", sans-serif; margin-top: 6px; color: var(--ink); }
.tile .value .sev { font-size: 12px; vertical-align: middle; }
.late { color: var(--danger-ink); font-weight: 600; }
@media (max-width: 720px) { .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile .value { font-size: 22px; } }
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

/* ---- severity / priority badges (status color + icon + label) -------- */
.sev { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px;
       font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink); border: 1px solid var(--border); }
.sev svg { flex: none; }
.sev-critical, .sev-high { background: var(--crit-wash); } .sev-critical svg, .sev-high svg { color: var(--crit); }
.sev-serious { background: var(--serious-wash); } .sev-serious svg { color: var(--serious); }
.sev-medium, .sev-warning { background: var(--warn-wash); } .sev-medium svg, .sev-warning svg { color: var(--warn); }
.sev-low { background: var(--surface-2); } .sev-low svg { color: var(--neutral); }
.sev-clear, .sev-good { background: var(--good-wash); } .sev-clear svg, .sev-good svg { color: var(--good); }
.sev-info { background: transparent; } .sev-info svg { color: var(--muted); }
.pri-high .sev { background: var(--serious-wash); } .pri-high .sev svg { color: var(--serious); }
.status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2);
          border: 1px solid var(--border); color: var(--ink-2); white-space: nowrap; }
.status-new { color: var(--ink); border-color: var(--accent); }
.status-escalated { color: var(--ink); background: var(--crit-wash); }
.status-pending_info { color: var(--ink); background: var(--warn-wash); }
/* Business page urgency: the border carries the color, the text stays plain */
.chip.lvl { background: transparent; color: var(--ink); border: 1.5px solid; padding: 0 6px; }
.chip.lvl-act { border-color: var(--crit); } .chip.lvl-watch { border-color: var(--serious); } .chip.lvl-note { border-color: var(--warn); }
.chip { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2);
        font-size: 11px; border: 1px solid var(--border); white-space: nowrap; }

/* ---- charts (div-based, server rendered) ------------------------------ */
.stackbar { display: flex; gap: 2px; height: 14px; margin: 6px 0 10px; }
.stackbar span { display: block; height: 100%; min-width: 0; }
.stackbar span:first-child { border-radius: 4px 0 0 4px; }
.stackbar span:last-child { border-radius: 0 4px 4px 0; }
.stackbar span:only-child { border-radius: 4px; }
.fill-critical { background: var(--crit); } .fill-high { background: var(--serious); }
.fill-medium { background: var(--warn); } .fill-low { background: var(--neutral); } .fill-clear { background: var(--good); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend .key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hbars { display: grid; grid-template-columns: minmax(120px, 42%) 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.hbars .lbl { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .track { height: 12px; position: relative; border-left: 1px solid var(--baseline); }
.hbars .bar { height: 12px; max-height: 24px; background: var(--accent); border-radius: 0 4px 4px 0; }
.hbars .val { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch; }
.hbars [data-tip] { cursor: default; }
.hbars .row-hit { display: contents; }
.matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cell { border-radius: 8px; padding: 10px 12px; border: 1px solid var(--border); background: var(--seq-0); position: relative; color: var(--tile-ink); }
.cell a { color: inherit; }
.cell .t { font-weight: 600; font-size: 13px; }
.cell .n { font-size: 24px; font-weight: 600; margin: 2px 0; }
.cell .d { font-size: 11px; color: var(--tile-ink); }
.cell.on { outline: 2px solid var(--accent); }
.meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 4px; }
details.tableview { margin-top: 10px; }
details.tableview summary { cursor: pointer; color: var(--muted); font-size: 12px; }
#tip { position: fixed; z-index: 100; pointer-events: none; background: var(--surface-3); color: var(--ink);
       border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; box-shadow: var(--shadow);
       max-width: 280px; display: none; }
#tip strong { display: block; font-size: 13px; }

/* ---- tables ---------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
td { padding: 8px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
.queue td.file { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue tr { cursor: pointer; }
.queue tr.sel { background: var(--accent-wash); }
.scorecell { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.scorecell .meter { flex: 1; min-width: 50px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ---- case view ------------------------------------------------------- */
.case-head { display: block; margin-bottom: 14px; }
.case-title { font-size: 26px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.case-title .sep { color: var(--baseline); font-weight: 400; margin: 0 4px; }
.case-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.backlink { color: var(--ink-2); text-decoration: none; font-size: 13.5px; }
.backlink:hover { color: var(--ink); }
.risk-flag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.risk-flag .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.case-meta .file-name { color: var(--ink); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.hero { text-align: right; min-width: 200px; }
.hero .score { font-size: 52px; font-weight: 600; line-height: 1; }
.hero .score small { font-size: 16px; color: var(--muted); font-weight: 500; }
.hero .meter { margin: 8px 0 6px; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr) minmax(300px, 0.95fr); gap: 12px; align-items: start; }
/* The mockups' order: the document first, then the findings, then the outcome. Keyboard and reading order follow
   the markup (findings first), which is the order a reviewer works in. */
.case-grid .col-mid { order: 1; } .case-grid .col-left { order: 2; } .case-grid .col-right { order: 3; }
.det-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font: 700 12px/1 "Public Sans", sans-serif;
         color: #fff; background: var(--crit); }
.det-n.n-medium, .det-n.n-warning { background: var(--warn); color: #050b1a; } .det-n.n-low, .det-n.n-info { background: var(--neutral); }
.box[data-n]::after { content: attr(data-n); position: absolute; top: -11px; right: -11px; width: 20px; height: 20px; border-radius: 50%;
                      display: grid; place-items: center; font: 700 11px/1 "Public Sans", sans-serif; color: #fff; background: var(--crit);
                      box-shadow: 0 0 0 2px var(--surface-1); pointer-events: none; }
@media (max-width: 1280px) { .case-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .col-right { grid-column: 1 / -1; } }
@media (max-width: 860px) { .case-grid { grid-template-columns: minmax(0, 1fr); } .case-head { grid-template-columns: 1fr; } .hero { text-align: left; } }
.sticky { position: sticky; top: 72px; }
.catgroup + .catgroup { margin-top: 14px; }
.catgroup > h3 { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; display: flex; justify-content: space-between; }
.det { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-1); cursor: pointer; }
.det + .det { margin-top: 6px; }
.det:hover { border-color: var(--baseline); }
.det.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.det .top { display: flex; gap: 8px; align-items: flex-start; }
.det .ttl { font-weight: 600; flex: 1; }
.det .w { color: var(--muted); font-size: 12px; white-space: nowrap; }
.det .body { margin-top: 6px; color: var(--ink-2); font-size: 13px; }
.det .play { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); font-size: 12px; color: var(--ink); }
.det .play b { color: var(--ink-2); font-weight: 600; }
.det .fb { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; min-width: 0; }
.det .fb button, .det .fb > span { white-space: nowrap; }
.det .fb .fb-why { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 4px; min-width: 0; }
.det .fb .fb-why select, .det .fb .fb-why input { width: 100%; min-width: 0; box-sizing: border-box; }
.det .fb button[aria-pressed="true"].yes { background: var(--good-wash); border-color: var(--good); }
.det .fb button[aria-pressed="true"].no { background: var(--surface-3); border-color: var(--ink-2); }
.det.fp { opacity: .6; }
.det .collapsed { display: none; }
.det.active .collapsed { display: block; }
/* The page viewer (case.html, console.js): a toolbar, a rail of page thumbnails and one scrolling pane holding every
   page. The pane has its own height, so zooming moves the pages, not the rest of the case page. */
.viewer { overflow: visible; }
.viewer-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; margin-bottom: 8px;
              border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.vbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 6px;
        border: 1px solid transparent; background: none; color: var(--ink-2); cursor: pointer; }
.vbtn:hover { color: var(--ink); background: var(--surface-1); border-color: var(--border); }
.vbtn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent); }
.vzoom { width: auto; min-width: 96px; height: 32px; padding: 0 6px; }
.vpage { margin-left: 6px; white-space: nowrap; }
.vspace { flex: 1; }
.viewer-body { display: flex; gap: 8px; }
.viewer-thumbs { position: relative; flex: none; width: 76px; max-height: min(78vh, 920px); overflow-y: auto; display: flex; flex-direction: column;
                 gap: 8px; padding: 2px; }
.viewer-thumbs button { position: relative; display: block; width: 100%; padding: 3px; border-radius: 6px; cursor: pointer;
                        background: var(--surface-2); border: 2px solid var(--border); }
.viewer-thumbs button[aria-current="true"] { border-color: var(--accent); }
.viewer-thumbs img { display: block; width: 100%; height: auto; background: #fff; }
.viewer-thumbs span { position: absolute; left: 5px; bottom: 5px; min-width: 18px; padding: 1px 4px; border-radius: 4px;
                      font: 600 11px/1.3 "Public Sans", sans-serif; background: var(--surface-1); color: var(--ink); }
.viewer-scroll { position: relative; flex: 1; min-width: 0; height: min(78vh, 920px); overflow: auto; padding: 12px; border-radius: 8px;
                 background: var(--surface-2); border: 1px solid var(--border); touch-action: pan-x pan-y; overscroll-behavior: contain; }
.viewer-scroll .page { width: max-content; min-width: 100%; }
.viewer-scroll .page + .page { margin-top: 14px; }
.viewer-scroll.panning { cursor: grab; user-select: none; }
.viewer-scroll.panning.dragging { cursor: grabbing; }
.viewer-scroll.panning .box { cursor: inherit; }
.pagewrap { position: relative; margin: 0 auto; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pagewrap img { display: block; width: 100%; height: auto; }
.page-missing { padding: 48px 16px; text-align: center; background: var(--surface-1); }
.page-meta { text-align: center; margin-top: 6px; }
/* Full screen: the browser's own, or (where a page cannot have it, as on an iPhone) the viewer over the whole window. */
.viewer:fullscreen, .viewer.viewer-max { display: flex; flex-direction: column; padding: 12px; border-radius: 0; background: var(--surface-1); }
.viewer.viewer-max { position: fixed; inset: 0; z-index: 60; margin: 0; }
.viewer:fullscreen .viewer-body, .viewer.viewer-max .viewer-body { flex: 1; min-height: 0; }
.viewer:fullscreen .viewer-scroll, .viewer.viewer-max .viewer-scroll,
.viewer:fullscreen .viewer-thumbs, .viewer.viewer-max .viewer-thumbs { height: auto; max-height: none; }
@media (max-width: 860px) {
  .viewer-thumbs { display: none; }
  .viewer-scroll { height: min(70vh, 640px); padding: 8px; }
}
.box { position: absolute; border: 2px solid var(--serious); background: rgba(236, 131, 90, 0.10); border-radius: 2px; pointer-events: auto; cursor: pointer; }
.box.sev-high-box { border-color: var(--crit); background: rgba(208, 59, 59, 0.12); }
.box.sev-medium-box { border-color: var(--warn); background: rgba(250, 178, 25, 0.12); }
.box.sev-low-box, .box.sev-info-box { border-color: var(--neutral); background: rgba(137, 135, 129, 0.12); }
.box.role-source { border-style: dashed; }
.box.field { border: 1.5px solid var(--accent); background: rgba(47, 107, 255, 0.10); }
.box.dim { opacity: .25; }
.box.hl { opacity: 1; box-shadow: 0 0 0 3px var(--focus), 0 0 0 9999px rgba(0, 0, 0, 0.18); z-index: 3; }
.overlay-toggles { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-2); margin: 8px 0 0; flex-wrap: wrap; }
.diff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--border); overflow-x: auto; }
.diff div { padding: 3px 10px; white-space: pre; }
.diff .del { background: var(--crit-wash); } .diff .add { background: var(--good-wash); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 6px; border: 1px solid var(--border); background: #fff; }
.gallery figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.dispo { display: grid; gap: 6px; margin: 8px 0; }
.dispo label { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.dispo label:hover { background: var(--surface-2); }
.dispo input:checked + span { font-weight: 600; }
.decided { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.timeline { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.timeline li { padding: 6px 0 6px 14px; border-left: 2px solid var(--grid); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--baseline); border: 2px solid var(--surface-1); }
.timeline li.decision::before { background: var(--accent); }
.timeline .when { color: var(--muted); font-size: 11px; }
.kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-2); }
.login { max-width: 380px; margin: 12vh auto; }
.drop { border: 1.5px dashed var(--baseline); border-radius: 8px; padding: 12px; }
@media (forced-colors: active) { .box, .bar, .stackbar span, .meter > span { forced-color-adjust: none; } }
@media (max-width: 720px) { .topbar { flex-wrap: wrap; height: auto; padding: 8px 16px; } .topbar .search { order: 3; max-width: none; flex-basis: 100%; } }

/* sign-in and admin */
.role-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); margin-left: 4px; }
.login-form, .stack-form { display: grid; gap: 6px; }
.login-form input, .stack-form input, .stack-form select { width: 100%; }
.login-form button { margin-top: 10px; }
.stack-form label { font-weight: 600; margin-top: 8px; font-size: 13px; }
.stack-form label.check { font-weight: 500; display: flex; gap: 8px; align-items: center; }
.stack-form label.check input { width: auto; }
.stack-form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px 14px; margin: 8px 0 0; display: grid; gap: 6px; }
.stack-form legend { font-weight: 700; padding: 0 6px; }
.stack-form .row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
/* Admin > Settings (admin_settings.html): groups as cards; on/off settings as rows with a one-line summary, the
   detail behind "How it works". */
.settings-col { max-width: 760px; display: grid; gap: 16px; }
.jump-links { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.jump-links .muted { flex-basis: 100%; }
.check-row { padding: 14px 0 4px; border-top: 1px solid var(--grid); }
.card-head + .check-row, .card-head + p + .check-row { border-top: 0; padding-top: 2px; }
.check-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-row-head h3 { margin: 0; font-size: 15px; }
.check-row > p { margin: 4px 0 0; }
.toggle-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; }
.toggle-form label.check { display: flex; gap: 8px; align-items: center; font-weight: 500; }
details.howto { margin: 8px 0 6px; }
details.howto > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); width: max-content; max-width: 100%; }
details.howto[open] > summary { margin-bottom: 4px; }
#capacity > details.fold > summary.card-head { margin-bottom: 0; }
#capacity > details.fold[open] > summary.card-head { margin-bottom: 8px; }
.sso-list { display: grid; gap: 8px; margin: 12px 0; }
.sso-btn { justify-content: center; text-align: center; text-decoration: none; display: block; padding: 10px 14px; border-radius: 8px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 14px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.admin-pw { margin-top: 16px; }
.admin-pw summary { cursor: pointer; }
/* Page headings (admin pages, Overview, the queue and metrics pages): a small group label, the page's name, one line
   on what it is for, then tabs to the pages beside it. */
.page-head { display: block; margin: 4px 0 18px; }
.page-head .eyebrow { display: block; margin-bottom: 6px; }
.page-head h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.page-sub { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.eyebrow { font: 600 11px/1 "Public Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.page-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; border-bottom: 1px solid var(--grid); font-size: 14px; }
.page-tabs a { padding: 0 0 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.page-tabs a:hover { color: var(--ink); }
.page-tabs a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent); font-weight: 600; }
.tabs-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs-nav a { padding: 7px 12px; border-radius: 6px; color: var(--ink-2); font-weight: 500; }
.tabs-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.admin-grid > .card + .card, .split > .card + .card { margin-top: 0; }
@media (max-width: 980px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }
form.inline { display: inline-flex; gap: 6px; margin: 0; }
td.actions { white-space: nowrap; }
.temp-pw { border-color: var(--accent); margin-bottom: 12px; }
.copybox { background: var(--surface-2); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.setup-steps { padding-left: 1.2em; display: grid; gap: 10px; margin: 0; }
.btn-danger { color: var(--danger-ink); }
.btn-primary.btn-danger { background: var(--crit); color: #fff; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink); }
.tag.ok { background: var(--good-wash); color: var(--good-ink); }
.tag.warn { background: var(--warn-wash); }
fieldset.checks { border: 0; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
fieldset.checks legend { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
fieldset.checks label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
fieldset.checks input[type=checkbox] { width: auto; margin: 0; }
fieldset.checks label { justify-content: flex-start; }

/* operator console */
.op-menu { position: relative; display: inline-block; }
.op-menu > summary { list-style: none; cursor: pointer; }
.op-menu > summary::-webkit-details-marker { display: none; }
.op-menu .op-panel { position: absolute; right: 0; z-index: 5; width: min(340px, 86vw); margin-top: 6px; padding: 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }

/* executive summary */
.exec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; margin-bottom: 12px; }
.exec-grid .card { margin: 0; }
.exec-bar { position: relative; min-width: 140px; height: 20px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.exec-bar span { position: absolute; inset: 0 auto 0 0; background: var(--accent-wash); }
.exec-bar b { position: relative; padding-left: 6px; font-size: 12px; line-height: 20px; font-weight: 600; }
.print-only { display: none; }
@media print {
  .topbar, .sidenav, .admin-head, .no-print, .banner, .flash { display: none !important; }
  .shell { display: block; }
  .print-only { display: block; }
  body, .main { background: #fff !important; color: #000; }
  .card, .tile { break-inside: avoid; box-shadow: none; }
  .exec-grid { grid-template-columns: 1fr; }
}

/* Analyst notes on an analysis */
.note { padding: 6px 0; border-bottom: 1px solid var(--border); }
.note:last-of-type { border-bottom: 0; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Claim panel: the claim form's facts and every document on the claim */
.claim-docs tr.current td { background: var(--surface-2); }
.claim-docs tfoot td { border-top: 1px solid var(--border); font-weight: 500; }
.claim-docs td:nth-child(3) { white-space: nowrap; }
.claim-gap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Export menu on the case page */
.export-menu .op-panel { left: 0; right: auto; width: min(360px, 90vw); display: grid; gap: 4px; }
/* on a phone it opens from the content's left edge: no wider than what's left beside the rail (52 px) and padding */
@media (max-width: 720px) { .export-menu .op-panel { width: min(360px, calc(100vw - 76px)); } }
.export-item { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.export-item:hover, .export-item:focus-visible { background: var(--surface-2); }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.subtabs a { padding: 7px 12px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.team-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 8px 0 12px; }
.team-members label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.hold { border: 1px solid var(--warn); border-radius: 6px; padding: 8px 10px; background: var(--warn-wash); }
.danger-zone { border-color: var(--crit); }
.certificate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: pre-wrap; overflow-x: auto; max-height: 320px; }

/* ---- guidance: info tips, upload form, guides, help page, example data --------------------- */
.info { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%;
        border: 1px solid var(--baseline); color: var(--ink-2); font-size: 10px; font-weight: 700; cursor: help;
        text-transform: none; letter-spacing: 0; vertical-align: 1px; }
.info:hover, .info:focus { border-color: var(--accent); color: var(--accent-ink); }
.upload { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grid); }
.upload h3 { font-size: 14px; }
.upload > p { margin: 4px 0 10px; }
.upload .field { display: grid; gap: 4px; min-width: 0; }
.upload .field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.upload .field-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.upload .field-row .field { flex: 1 1 150px; }
.next-steps, .guide { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.next-steps summary, .guide summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.next-steps ol, .guide ol { margin: 8px 0 4px; padding-left: 20px; display: grid; gap: 4px; color: var(--ink-2); }
.next-steps b, .guide b { color: var(--ink); }
.next-steps p, .guide p { margin: 6px 0 2px; }
.page-intro { margin: 0 0 12px; max-width: 90ch; }
.example-tag { background: var(--warn-wash); color: var(--ink); border-color: var(--warn); text-transform: none; letter-spacing: 0; }
.is-example .bar { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(127, 127, 127, .35) 4px 6px); opacity: .75; }
.help { display: grid; gap: 12px; max-width: 1100px; }
.help .split { margin-bottom: 0; }
.help > .card + .card { margin-top: 0; }
.help h1 { font-size: 22px; text-wrap: balance; }
.help-hero p { max-width: 75ch; color: var(--ink-2); line-height: 1.55; }
.help .steps { padding-left: 22px; display: grid; gap: 10px; max-width: 85ch; line-height: 1.5; color: var(--ink-2); }
.help .steps b { color: var(--ink); }
.gloss { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 10px 0 0; }
.gloss dt { font-weight: 600; }
.gloss dd { margin: 0; color: var(--ink-2); line-height: 1.45; }
@media (min-width: 1000px) { .gloss-2 { grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); } }
@media (max-width: 560px) { .gloss { grid-template-columns: 1fr; } .gloss dd { margin-bottom: 6px; } }

/* ---- product tour ------------------------------------------------------------------------- */
.tour-ring { position: fixed; z-index: 90; border-radius: 10px; pointer-events: none;
             box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(0, 0, 0, .55); transition: all .2s ease; }
.tour-pop { position: fixed; z-index: 91; width: min(360px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 10px;
            background: var(--surface-1); color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tour-pop h3 { font-size: 15px; margin-bottom: 6px; }
.tour-pop p { margin: 0 0 6px; color: var(--ink-2); line-height: 1.5; font-size: 13px; }
.tour-pop .tour-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.tour-pop .tour-count { margin-right: auto; color: var(--muted); font-size: 12px; }
.tour-offer { position: fixed; z-index: 89; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); padding: 12px 14px;
              border-radius: 10px; background: var(--surface-1); border: 1px solid var(--accent); box-shadow: var(--shadow); }
.tour-offer p { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; }
@media print { .tour-ring, .tour-pop, .tour-offer, .guide, .next-steps { display: none !important; } }

/* ---- shared UI practice: skip link, dialogs, busy and disabled states, motion, small screens ------ */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: 6px;
             background: var(--accent-fill); color: #fff; text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 8px; }
main:focus { outline: none; }
button:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
form[aria-busy="true"] { cursor: progress; }
dialog#confirm { width: min(440px, calc(100vw - 32px)); padding: 18px 20px; border-radius: 10px; border: 1px solid var(--border);
                 background: var(--surface-1); color: var(--ink); box-shadow: var(--shadow); }
dialog#confirm::backdrop { background: rgba(0, 0, 0, .5); }
dialog#confirm h2 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
dialog#confirm p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.5; }
.confirm-actions { justify-content: flex-end; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse) { .btn-sm, button.btn-sm { min-height: 32px; } }
@media (max-width: 560px) {
  .topbar { position: static; }                     /* too tall to pin on a phone */
  .who { flex-wrap: wrap; white-space: normal; gap: 6px 10px; }
  .main { padding: 12px; }
}

/* Tables of records (table.rowcards) become one block per row on a phone: each value under its column's name
   (data-label on the cell). The first cell, the record's name, leads unlabelled. */
@media (max-width: 720px) {
  table.rowcards thead { position: absolute; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rowcards, table.rowcards tbody, table.rowcards tr, table.rowcards td { display: block; width: 100%; }
  table.rowcards tr { padding: 10px 0; border-bottom: 1px solid var(--grid); }
  table.rowcards tbody tr:hover { background: none; }
  table.rowcards td { border: 0; padding: 4px 0; text-align: left; overflow-wrap: anywhere; }   /* long emails */
  table.rowcards td form.inline { display: flex; max-width: 100%; }
  table.rowcards td select, table.rowcards td input { min-width: 0; max-width: 100%; }
  table.rowcards td.rowcards-skip { display: none; }      /* an empty cell, e.g. a total row's unused column */
  table.rowcards td[data-label] { position: relative; padding-left: 132px; min-height: 26px; }
  table.rowcards td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 6px;
                                          width: 124px; white-space: normal; color: var(--muted); font-size: 12px; }
  table.rowcards td.actions { white-space: normal; }
  table.rowcards td.actions form { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* ---- fraud technique watch ---------------------------------------------------------------- */
.stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.stack > .card + .card { margin-top: 0; }
.watch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.watch-list li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--grid); }
.watch-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.watch-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.watch-title { font-weight: 600; color: var(--ink); text-decoration: none; }
.watch-title:hover { text-decoration: underline; }
.watch-foot { margin-top: 10px; }
.cov { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap;
       color: var(--ink); border: 1px solid var(--border); }
.cov-covered { background: var(--good-wash); border-color: var(--good); }
.cov-partial { background: var(--warn-wash); border-color: var(--warn); }
.cov-gap { background: var(--crit-wash); border-color: var(--crit); }
.watch-entry p { max-width: 80ch; line-height: 1.5; }
.watch-entry .watch-h { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.watch-meta { margin: 0; }
.watch-checks { gap: 6px; flex-wrap: wrap; }

/* Queue header: priority, the counts that aren't in it, and Add documents, in one band. */
.qhead { margin-bottom: 12px; }
.qhead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.qhead-pri { flex: 1 1 420px; min-width: 0; }
.qhead-pri .card-head { margin-bottom: 0; }
.qhead-stats { display: flex; gap: 24px; margin: 0; }
.qhead-stats dt { font-size: 12px; color: var(--ink-2); }
.qhead-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 600; }
.qhead-add { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.qhead-add svg { width: 18px; height: 18px; }
.qhead-note { margin: 10px 0 0; }
.legend a.key[aria-current="true"] { text-decoration: underline; text-underline-offset: 3px; }
.section-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 18px 0 8px; }

/* Case page: technical detail on request; the false-positive reason once a finding is marked false positive. */
html:not(.tech) .tech-only { display: none !important; }
.det .fb .fb-why { display: none; }
.det .fb:has(button.no[aria-pressed="true"]) .fb-why { display: grid; }
details.fold > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2::before, .case-details > summary h2::before { content: "▸ "; color: var(--ink-2); }
details.fold[open] > summary h2::before, .case-details[open] > summary h2::before { content: "▾ "; }
details.fold:not([open]) > summary { margin-bottom: 0; }
.case-details { margin-top: 12px; }
.case-details > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.case-details > summary::-webkit-details-marker { display: none; }
.case-details[open] > summary { margin-bottom: 12px; }
.details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px 24px; align-items: start; }
.details-grid .sub { min-width: 0; }
/* Related cases sits in a column about 320px wide: the claim shares the case's line, a long file name is cut short,
   and the priority and status stack, so the table never spills into the section beside it. */
.related { width: 100%; }
.related .related-case { width: 100%; max-width: 0; }
.related .related-case div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related .related-case span { white-space: nowrap; }
.related .related-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.filter-more { display: contents; }
.filter-more > summary { display: none; }
.filter-fields { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .filter-more { display: block; flex: 1 1 100%; }
  .filter-more > summary { display: inline-flex; cursor: pointer; list-style: none; }
  .filter-more > summary::-webkit-details-marker { display: none; }
  .filter-more[open] > summary { margin-bottom: 8px; }
}
[data-tech-toggle][aria-pressed="true"] { background: var(--accent-wash, var(--surface-3)); border-color: var(--accent); color: var(--ink); }
/* Case page: notes sit inside the Decision card, above the one box used for a note or the justification. */
.notes { margin: 12px 0 10px; padding-top: 10px; border-top: 1px solid var(--grid); }
.notes h3 { font-size: 13px; margin: 0 0 4px; }
#decide-form .dispo + label { display: block; margin-top: 10px; }

/* Integration setup guide (admin_integration_setup.html): a row of numbered steps, then one step's card. */
.guide-steps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.guide-steps a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.guide-steps a:hover span:last-child { text-decoration: underline; }
.guide-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong, var(--muted));
  font-size: 12px; font-variant-numeric: tabular-nums; }
.guide-steps .is-done .guide-num { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.guide-steps .is-current a { color: var(--ink); font-weight: 600; }
.guide-steps .is-current .guide-num { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.guide { max-width: 860px; }
.guide-list { padding-left: 20px; display: grid; gap: 14px; margin: 0; }
.guide-list p { margin: 4px 0 0; color: var(--ink-2); max-width: 72ch; }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.copy-row code { font-size: 12.5px; padding: 4px 8px; background: var(--surface-2); border-radius: 4px; overflow-wrap: anywhere; min-width: 0; }
.event-status { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: var(--surface-2); border-left: 3px solid var(--warn); }
.event-status.is-ok { border-left-color: var(--good); }
.guide-actions { gap: 8px; margin-top: 12px; }
.guide-nav { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.map-rows { display: grid; gap: 8px; }
.map-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; max-width: 560px; }

/* Ask the issuer (case page) */
.issuer-req + .issuer-req { margin-top: 10px; }
.issuer-text { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.issuer-text { margin: 6px 0; padding: 8px; background: var(--surface-2); border-radius: 4px; }

/* "How was it faked?" under a decision (case.html) */
.missed { display: grid; gap: 4px; margin-top: 10px; padding: 10px; border-radius: 6px; background: var(--surface-2); }
.missed[hidden] { display: none; }
.missed select, .missed input { width: 100%; }
.sec-sub { font-size: 14px; margin: 14px 0 6px; }
.card-head + .sec-sub { margin-top: 0; }

/* Overview (admin_overview.html): outcomes donut, risk bars, status pills */
.donut-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 170px; height: 170px; transform: none; }
.donut circle { transition: none; }
.donut-n { font: 700 8px/1 "Montserrat", sans-serif; fill: var(--ink); }
.donut-l { font: 400 3px/1 "Public Sans", sans-serif; fill: var(--muted); }
.legend-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 220px; display: grid; gap: 8px; }
.legend-list li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.legend-list i { width: 10px; height: 10px; border-radius: 50%; }
.bars-table td { border: 0; padding: 7px 8px 7px 0; }
.bars-table .bar-cell { width: 60%; }
.pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill-good { background: var(--good-wash); color: var(--good-ink); }
.pill-warn { background: var(--warn-wash); color: var(--ink); }
.pill-crit { background: var(--crit-wash); color: var(--danger-ink); }

.actions .inline { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

/* Review queue (queue.html), as in the October 2026 mockups: risk chips with counts, the score as a colored pill,
   the claim number leading each row. */
.qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 14px; padding: 0; background: none; border: 0; }
.riskchips { display: flex; flex-wrap: wrap; gap: 8px; }
.riskchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
            background: var(--surface-1); color: var(--ink); font-weight: 500; text-decoration: none; }
.riskchip:hover { border-color: var(--accent); text-decoration: none; }
.riskchip[aria-current="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.riskchip .num { color: var(--ink-2); font-weight: 500; }
.riskchip .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.qhead-stats { display: flex; gap: 22px; margin: 0; }
.qhead-stats div { display: flex; flex-direction: column; }
.qhead-stats dt { font-size: 12px; color: var(--muted); }
.qhead-stats dd { margin: 0; font: 700 18px/1.2 "Montserrat", sans-serif; color: var(--ink); }
.qhead-note { flex-basis: 100%; margin: 0; }
.risk-pill { display: inline-grid; place-items: center; min-width: 42px; padding: 6px 8px; border-radius: 8px; font: 700 16px/1 "Montserrat", sans-serif; }
.r-critical { background: var(--crit-wash); color: var(--danger-ink); }
.r-high { background: var(--serious-wash); color: var(--serious-ink); }
.r-medium { background: var(--warn-wash); color: var(--ink); }
.r-low { background: var(--surface-2); color: var(--ink-2); }
.r-clear { background: var(--good-wash); color: var(--good-ink); }
.claimref { font-weight: 600; }
.queue .file { white-space: nowrap; }
.queue .file .fname { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.filetype { display: inline-grid; place-items: center; width: 34px; height: 20px; margin-right: 8px; border-radius: 4px; vertical-align: middle;
            font: 700 10px/1 "Public Sans", sans-serif; letter-spacing: .04em; background: var(--crit-wash); color: var(--danger-ink); }
.filetype.ft-image { background: var(--accent-wash); color: var(--accent-ink); }
.topfinding { max-width: 260px; color: var(--ink); }
.sans { font-family: "Public Sans", system-ui, sans-serif; }
.claimref { white-space: nowrap; }
.queue .types { min-width: 190px; }
.chip.more { background: transparent; border-style: dashed; }
/* Quality sample: a "No flags" document picked at random for review (console/pipeline.py) */
.chip.qsample { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.subtabs a { text-decoration: none; }

/* Separate axes beside the risk score (console/verification.py): integrity, verification, review outcome */
.axes { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 10px 0 0; }
.axes > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.axes dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.axes dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-weight: 600; color: var(--ink); }
.vpill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.v-verified { background: var(--good-wash); color: var(--good-ink); }
.v-mismatch { background: var(--crit-wash); color: var(--danger-ink); }
.v-unresolved { background: var(--warn-wash); color: var(--ink); }
.v-unavailable { background: var(--surface-2); color: var(--ink-2); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vlist li { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; align-items: start; }
.vlist .vpill { justify-self: start; }
.r-incomplete { background: var(--warn-wash); color: var(--ink); }
.r-incomplete .dot { background: var(--warn); }
.incomplete-note { margin-top: 10px; }
.chip.incomplete { background: var(--warn-wash); border-color: transparent; color: var(--ink); }
.queue .vpill { margin-top: 4px; font-size: 11.5px; }
/* Claims queue (queue.html, console/claims.py): one row per claim; the viewer's own claims first, marked. */
.chip.chip-mine { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.claimq tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.claimq td .fname { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.claimq td.num { white-space: nowrap; }