/* UI v2 additions on top of command-deck.css (the pristine mockup design
   system — never edit that file; put server-rendering needs here). */

/* Owner-caught 2026-07-21 (spec 20.132), carried across the switchover: the
 * deal menu rendered stuck OPEN and no close action had any visible effect.
 * Its markup and its script were both right — but .deal-menu sets
 * display:flex, and ANY author display rule overrides the browser's built-in
 * [hidden]{display:none}, so the attribute was silently ignored. This app
 * hides menus, panels and dialogs with the hidden attribute throughout, so
 * the attribute wins GLOBALLY, once, here. Without it every class that later
 * gains a display property is a stuck-visible bug waiting to ship, and the
 * fix is a per-class rule somebody has to remember. Guard-tested. */
[hidden] { display: none !important; }
a.mark, a.rail-item, a.chip, a.btn, a.switcher-item { color: inherit; text-decoration: none; }
a.rail-item:hover, a.chip:hover, a.btn:hover, a.switcher-item:hover { text-decoration: none; }
a.mark { display: inline-flex; }
#cmdbar .inline-form { display: contents; }
/* Owner 2026-08-23: the search form anchors the as-you-type dropdown, so it
   is a real flex item (not display:contents, which cannot position anything). */
#cmdbar .cmd-search-form { display: flex; position: relative; }
.topbar-user { color: var(--tx3); font-size: 11px; white-space: nowrap; }
.v2-placeholder { padding: 28px 32px; max-width: 720px; }
.v2-placeholder-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
/* Grid auto-placement put the badges in column 1 ahead of the name (the
   row-spanning item is placed first); pin it to the right column. */
.switcher-item .si-right { grid-column: 2; }
/* Entities / People: a weak match (the AI is under 60% sure about it) reads
   quieter than a confident row when the expander shows it. */
.row-weak td { color: var(--tx3); }

/* Sources rail: the source's own name badge inside a group head. The mockup
   styles the group head but never names this element in its stylesheet. */
.src-grp-name { flex: 0 0 auto; }
.src-tree a.src-row { color: inherit; text-decoration: none; }
/* Spec 20.348 (issue #10): an absent source's WHOLE group head is the link.
   The head already carries the mockup's hand cursor, so anything smaller
   than the whole row reads as a row that does nothing when clicked. */
.src-tree a.src-grp-h { color: var(--tx2); text-decoration: none; }
/* A combinable row carries its own checkbox, so the row is a container and
   the report NAME is the link. It fills the row, keeping the whole row
   clickable the way the mockup's row is. */
.src-tree a.src-name { color: inherit; text-decoration: none; flex: 1 1 auto; }
.src-grp-h a.btn { flex: 0 0 auto; }

/* ---- Assistant drawer (command-deck.css draws #drawer, .chat-user and
   .chat-sys; a real ANSWER and a visible wait are new here, because the
   mockup's drawer never connected to anything). ---- */
.drawer-foot textarea {
  flex: 1; resize: vertical; min-height: 42px; max-height: 160px;
  font: inherit; font-size: 12px;
}
.chat-who { display: block; font-size: 10.5px; opacity: .72; font-weight: 600; margin-bottom: 3px; }
.chat-text { display: block; white-space: pre-wrap; }
.chat-ai {
  background: var(--bg3); border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 10px; margin-bottom: 8px; font-size: 12px; margin-right: 40px;
}
.chat-advisory { display: block; margin-top: 5px; color: var(--tx3); font-size: 10px; }
/* The wait must be VISIBLE: TEST_MODE answers instantly, a real question does
   not, and a question with no sign of life reads as a lost click. */
.chat-wait { display: flex; align-items: center; gap: 7px; color: var(--tx2); font-style: italic; }
.chat-spin {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid var(--line2); border-top-color: var(--teal);
  animation: bc2spin .8s linear infinite;
}
@keyframes bc2spin { to { transform: rotate(360deg); } }

/* ---- Decision modal: the mockup's .dec-* rules cover the grid, the segment
   control and the reason rows; these two are the server form's extras. ---- */
.dec-grid textarea { width: 100%; resize: vertical; font: inherit; font-size: 12px; }
.dec-reason-meta { color: var(--tx3); font-size: 10.5px; white-space: nowrap; }
.insp-sec-h .hint { font-weight: 400; color: var(--tx3); }

/* ---- The "⋯" deal menu (mockup renderCmdBar). command-deck.css draws .pop
   and .pop-item; these two are for an entry that is present but cannot be
   used yet, and for a link entry that must look like the button entries. ---- */
.pop a.pop-item { color: inherit; text-decoration: none; }
.pop .pop-item[disabled] { opacity: .45; cursor: default; }
.pop .pop-item[disabled]:hover { background: none; }
/* ---- The guarantor switch (owner answer #4, 2026-08-23). command-deck.css
   draws .gtoggle as a decorative span; here it becomes a real button, so it
   needs the browser's own button padding, border and font taken back off.
   `.by-hand` marks the rows the underwriter ruled on personally — a thin
   outline, so a hand-set switch is told apart from the AI's list at a
   glance without inventing a second control. ---- */
button.gtoggle {
  padding: 0; margin: 0; font: inherit; appearance: none; -webkit-appearance: none;
}
button.gtoggle:disabled { cursor: default; opacity: .55; }
.gtoggle.by-hand { outline: 1px solid var(--teal); outline-offset: 1px; }

/* ---- Entities / People (mockup renderEntities). Three additions only:
   the table caption beside the row count, the "also seen as …" line under a
   name (the old design's own .alias-line, spec 20.178), and the inspector's
   ONE checks list, which may wrap because the pane is narrow — the table's
   own runs cell still never wraps. ---- */
.tbl-caption {
  font-weight: 700; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tx2);
}
.alias-line {
  font-size: 10.5px; color: var(--tx3); font-weight: 400;
  margin-top: 2px; line-height: 1.35; max-width: 250px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp .runs-cell { flex-wrap: wrap; white-space: normal; }
.run-pill a { color: var(--blue); font-size: 9.5px; font-weight: 700; }
.run-pill form { display: inline-flex; }

/* --- command-bar quick-match dropdown (v2/quickmatch.js; owner 2026-08-23).
   The old top bar's spec-14.1 suggestions, in the new design's clothes. --- */
.cmd-quick-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  min-width: 320px; max-width: 460px; max-height: 60vh; overflow-y: auto;
  background: var(--bg1); border: 1px solid var(--line2); border-radius: 3px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: 4px 0; font-size: 11.5px;
}
.cmd-quick-seeall {
  display: block; padding: 5px 10px; color: var(--blue); font-weight: 700;
  border-bottom: 1px solid var(--line2); text-decoration: none;
}
.cmd-quick-seeall:hover { background: var(--bg2); }
.cmd-quick-group { padding: 3px 0; }
.cmd-quick-label {
  padding: 3px 10px 1px; color: var(--tx3); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.cmd-quick-row {
  display: block; padding: 4px 10px; color: var(--tx); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmd-quick-row:hover { background: var(--bg2); }
.cmd-quick-row b { font-weight: 600; }
.cmd-quick-hint { color: var(--tx3); margin-left: 6px; font-size: 10.5px; }
.cmd-quick-empty { padding: 6px 10px; color: var(--tx3); }

/* ---- Raw-data page (spec 20.330, owner answer 36) ---- */
.raw-panel { padding: 12px; }
.raw-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.raw-search { flex: 1; max-width: 420px; background: var(--bg1); color: var(--tx);
              border: 1px solid var(--line2); border-radius: 6px; padding: 6px 9px; font-size: 12px; }
.raw-count { white-space: nowrap; }
.raw-pre { margin: 0; max-height: 72vh; overflow: auto; white-space: pre-wrap;
           word-break: break-word; background: var(--bg1); border: 1px solid var(--line2);
           border-radius: 6px; padding: 10px; font-size: 11.5px; line-height: 1.5; }
.raw-hit { background: var(--amber-dim, #6b5d1f); color: inherit; border-radius: 2px; }
.raw-hit-cur { outline: 2px solid var(--amber, #e2b93b); }
.raw-missing { margin: 0; font-weight: 600; }
.raw-stored-title { margin: 12px 0 2px; font-size: 12px; }
.src-chip-flat { display: inline-block; background: var(--bg3); border: 1px solid var(--line2);
                 border-radius: 5px; padding: 1px 7px; font-size: 11px; margin-right: 6px; }

/* Spec 20.331 — the reader's focus banner + dimmed non-matching records
   (the old reader's focus rule, re-skinned). */
.focus-banner { border: 1px solid var(--line2); border-left: 3px solid var(--amber);
  background: var(--bg2); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 12px; }
.focus-banner .focus-count { color: var(--tx3); font-size: 10.5px; }
.focus-banner .focus-note { color: var(--tx3); font-size: 10.5px; margin-top: 4px; }
tbody.rowgrp.row-focus-dim td { opacity: .45; }

/* Spec 20.332 — issue reporting: the modal's own bits + the Issues page. */
.modal-overlay { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; background: var(--backdrop); }
.issue-auto { border: 1px solid var(--line2); background: var(--bg1); border-radius: 4px; padding: 8px 10px; font-size: 11px; color: var(--tx2); margin-bottom: 10px; }
.issue-auto-h { font-weight: 700; color: var(--tx3); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.issue-desc, .issue-res { width: 100%; box-sizing: border-box; background: var(--bg1); color: var(--tx); border: 1px solid var(--line2); border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 12px; resize: vertical; }
.issue-desc:focus, .issue-res:focus { outline: none; border-color: var(--amber); }
.issue-shot-host { margin: 10px 0; }
.issue-shot { max-width: 100%; max-height: 220px; border: 1px solid var(--line2); border-radius: 4px; display: block; margin-bottom: 6px; }
.issue-shot-hint { color: var(--tx3); font-size: 10.5px; }
.issue-warn { color: var(--tx3); font-size: 10.5px; margin-top: 8px; }
.issue-digest-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--bg2); border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; font-size: 12px; }
.issue-digest-box input { background: var(--bg1); color: var(--tx); border: 1px solid var(--line2); border-radius: 4px; padding: 5px 8px; font: inherit; font-size: 12px; }
.issue-card { border: 1px solid var(--line2); background: var(--bg2); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; }
.issue-card-h { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-bottom: 6px; }
.issue-when { color: var(--tx3); font-size: 11px; }
.issue-text { font-size: 12px; color: var(--tx); white-space: pre-wrap; overflow-wrap: break-word; }
.issue-res-view { margin-top: 6px; color: var(--tx2); }
.issue-admin { margin-top: 8px; }
.issue-admin-btns { display: flex; gap: 8px; margin-top: 6px; }

/* Issue #18: the coverage grid's hidden-columns cue */
.cov-more-cue { color: var(--amber, #a06a00); font-size: 10.5px; text-align: right; padding: 3px 2px 0; }

/* Spec 20.333 — the verdict strip + severity folds (Findings page). */
.verdict { border: 1px solid var(--line2); background: var(--bg1); border-radius: 8px;
  padding: 10px 14px; margin: 8px 14px 4px; font-size: 12.5px; }
.verdict.v-red { border-left: 3px solid var(--sev-red); }
.verdict.v-amber { border-left: 3px solid var(--sev-amber); }
.verdict .v-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verdict .v-toggle { background: none; border: none; color: var(--tx2); cursor: pointer;
  padding: 0 2px; font-size: 12px; }
.verdict .v-why { color: var(--tx2); }
.verdict .v-items { margin: 8px 0 0; padding-left: 22px; }
.verdict .v-items li { margin: 3px 0; }
.verdict .v-items li.clickable { cursor: pointer; }
.verdict .v-items li.clickable:hover b { text-decoration: underline; }
.verdict .v-sub { color: var(--tx2); }
.verdict .v-next { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verdict .v-lbl { color: var(--tx3); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.sev-folds { margin: 6px 14px 0; }
.sev-fold { display: flex; align-items: center; gap: 9px; padding: 7px 12px; margin-top: 6px;
  border: 1px dashed var(--line2); border-radius: 7px; background: var(--bg-bar);
  color: var(--tx2); font-size: 12px; cursor: pointer; }
.sev-fold:hover { border-color: var(--line3); }
.sev-fold.open { border-style: solid; }
.sev-fold .sf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tx3); }
.sev-fold .sf-dot.medium { background: var(--sev-amber); }
.sev-fold .sf-act { margin-left: auto; color: var(--teal); }

/* ============ Issue report #2 (2026-08-25): status bar cut off ============ */
/* The v2 rail (z-index 50) painted OVER the fixed bottom status bar
   (loadbar, z-index 45) and its restore button (44), cutting off the bar's
   left side and hiding the restore control entirely. The bar overlays the
   whole page bottom — rail included — exactly as it overlays the content.
   Stays below the assistant drawer (90) and every modal (400). */
/* body-prefixed: loadbar.css loads AFTER app.css, so a bare .loadbar rule
   here would lose the cascade tie. */
body .loadbar, body .lb-restore { z-index: 55; }

/* ============ Spec 20.337: notify.js dialogs in the v2 frame ============ */
/* The rerun-question popup (static/notify.js) builds old-design class
   names; these rules give them the v2 look. The .modal box itself already
   has v2 rules in command-deck.css. */
.overlay-inline { position: fixed; inset: 0; z-index: 590; background: var(--backdrop, rgba(10,14,22,.55)); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay-inline .modal { max-width: 480px; width: 100%; padding: 18px 20px; }
.overlay-inline h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.overlay-inline .sub { color: var(--tx2); font-size: 13px; margin: 0 0 14px; }
.overlay-inline .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ============ Spec 20.338: the waiting-question dialog in the v2 frame ==== */
/* fragments/decision_dialog.html is ONE shared template (both designs, one
   `decide` endpoint). Its markup uses old-design class names and a few
   old-design color variables in inline styles; these rules give all of it
   the v2 look. Scoped under .overlay-inline so nothing leaks to the page. */
.overlay-inline { --hi: var(--red); --hi-soft: var(--red-dim); --hi-line: var(--red-bd);
                  --hi-ink: var(--red); --tint-soft: var(--teal-dim); }
.overlay-inline .modal { max-height: 90vh; overflow: auto; }
.overlay-inline .form-error { background: var(--red-dim); border: 1px solid var(--red-bd);
                              color: var(--red); border-radius: 8px; padding: 8px 10px;
                              margin-bottom: 10px; font-size: 12.5px; }
.overlay-inline .hint { color: var(--tx3); font-size: 11.5px; }
.overlay-inline .panel { background: var(--bg2); border: 1px solid var(--line2);
                         border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.overlay-inline .f-src { display: inline-block; font-size: 10px; font-weight: 700;
                         letter-spacing: .4px; text-transform: uppercase; color: var(--tx2);
                         background: var(--bg3); border: 1px solid var(--line2);
                         border-radius: 5px; padding: 1px 6px; }
.overlay-inline .opt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.overlay-inline .opt { flex: 1; min-width: 120px; border: 1px solid var(--line2);
                       border-radius: 9px; padding: 10px 12px; cursor: pointer;
                       text-align: center; font-weight: 700; font-size: 12.5px;
                       background: var(--bg2); color: var(--tx);
                       font-family: inherit; text-decoration: none; }
.overlay-inline .opt:hover { border-color: var(--blue-bd); background: var(--blue-dim); }
.overlay-inline .opt.primary { background: var(--primary-bg, var(--teal-dim));
                               border-color: var(--teal-bd); color: var(--teal); }
.overlay-inline .opt:disabled { opacity: .5; cursor: not-allowed; }
.overlay-inline .ps-card { background: var(--bg2); border: 1px solid var(--line2);
                           border-radius: 10px; padding: 10px 12px; }
/* Spec 20.370 gap 24: the same card outside the dialog — the History tab's
   prior-submission and cross-deal panels. Same look, one rule each. */
.panel-body > .ps-card { background: var(--bg2); border: 1px solid var(--line2);
                         border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.panel-body > .ps-card:last-child { margin-bottom: 0; }
.panel-body > .ps-card .sub { color: var(--tx3); font-size: 11px; margin-top: 3px; }
.overlay-inline .ps-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.overlay-inline .ititle { font-weight: 700; }
.overlay-inline .sub-status { font-size: 10.5px; font-weight: 700; border-radius: 5px;
                              padding: 1px 7px; background: var(--bg3);
                              border: 1px solid var(--line2); color: var(--tx2); }
.overlay-inline .via { color: var(--tx3); font-size: 11px; }
.overlay-inline table.ev, .overlay-inline .vs-table { width: 100%; border-collapse: collapse;
                                                      font-size: 12px; margin-top: 6px; }
.overlay-inline table.ev th, .overlay-inline .vs-table th { text-align: left; color: var(--tx3);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--line2); padding: 4px 8px 4px 0; }
.overlay-inline table.ev td, .overlay-inline .vs-table td { border-bottom: 1px solid var(--line);
                                                            padding: 5px 8px 5px 0; }
.overlay-inline .vs-mis td { color: var(--red); }
.overlay-inline .vs-ok { color: var(--green); }
.overlay-inline .chg { color: var(--tx3); text-decoration: line-through; }
.overlay-inline .dash { color: var(--tx3); }
.overlay-inline .appdiff { margin-top: 8px; }
.overlay-inline .reason-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.overlay-inline .reason { display: flex; gap: 8px; align-items: baseline;
                          border: 1px solid var(--line2); border-radius: 9px;
                          padding: 9px 11px; background: var(--bg2); cursor: pointer; }
.overlay-inline .fld input[type="text"], .overlay-inline .fld select {
    background: var(--bg2); border: 1px solid var(--line2); border-radius: 8px;
    color: var(--tx); padding: 8px 10px; font-size: 13px; font-family: inherit; }
.overlay-inline .fld input[type="text"]:focus, .overlay-inline .fld select:focus {
    outline: none; border-color: var(--blue-bd); }

/* pickList — the dropdown you can type into (issue #13, 2026-08-26).
   The face is a <select> to the eye: the mockup's own facet-select rule,
   repeated here for a <button>. The open list reuses the mockup's .pop /
   .pop-item, so a picker looks native to the design and gains nothing of
   its own. */
.pick { display: inline-flex; align-items: center; gap: 6px;
        background: var(--bg1); border: 1px solid var(--line2); color: var(--tx);
        padding: 3px 7px; border-radius: 2px; font-size: 11.5px;
        font-family: inherit; cursor: pointer; max-width: 220px; }
.pick:hover { border-color: var(--blue-bd); }
.pick:focus-visible { outline: none; border-color: var(--blue); }
.pick-face { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-caret { color: var(--tx3); font-size: 9px; margin-left: auto; }
.pick-search { width: 100%; background: var(--bg1); border: 1px solid var(--line2);
               color: var(--tx); border-radius: 2px; padding: 3px 6px;
               font-size: 11.5px; font-family: inherit; margin-bottom: 4px; }
.pick-search:focus { outline: none; border-color: var(--blue); }
.pick-list { max-height: 260px; overflow-y: auto; }
.pop .pop-item.on { background: var(--bg3); }
.pick-none { padding: 5px 8px; font-size: 11.5px; color: var(--tx3); }

/* ── the Experian credit report (spec 20.352, issue #14) ───────────────────
   The report used to print one glued sentence per account. It now reads as a
   credit report: a profile band, then one row per account with the figures
   Experian sent, and a square per month of payment history. Only the colours
   live here — every word and every square's meaning is decided on the server
   (web/v2/experian_view.py). */

/* the profile band */
.cr-top { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; margin: 4px 0 2px; }
.cr-score { border: 1px solid var(--line2); border-radius: 3px; background: var(--bg1);
            padding: 7px 13px; min-width: 118px; display: flex;
            flex-direction: column; justify-content: center; }
.cr-score-n { font-family: var(--mono); font-size: 24px; line-height: 1.1; }
.cr-score-b { font-size: 11px; }
.cr-score-m { color: var(--tx3); font-size: 10.5px; margin-top: 2px; }
.cr-score.c-red .cr-score-n, .cr-score.c-red .cr-score-b { color: var(--red); }
.cr-score.c-amber .cr-score-n, .cr-score.c-amber .cr-score-b { color: var(--amber); }
.cr-score.c-green .cr-score-n, .cr-score.c-green .cr-score-b { color: var(--green); }
.cr-sum { flex: 1 1 420px; border: 1px solid var(--line); border-radius: 3px;
          display: flex; flex-wrap: wrap; gap: 1px; background-color: var(--line);
          overflow: hidden; }
.cr-sum > div { background: var(--bg1); padding: 6px 11px; flex: 1 1 150px; }
.cr-k { color: var(--tx3); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.cr-v { font-family: var(--mono); font-size: 12.5px; margin-top: 2px; }

/* one account row */
.cr-acct .cr-n4 { color: var(--tx3); font-family: var(--mono); font-size: 10.5px; }
.cr-cond { display: inline-flex; align-items: center; gap: 5px; }
.cr-cond .cr-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
                   background: var(--tx3); display: inline-block; }
.cr-cond.t-ok { color: var(--green); }
.cr-cond.t-ok .cr-dot { background: var(--green); }
.cr-cond.t-late { color: var(--amber); }
.cr-cond.t-late .cr-dot { background: var(--amber); }
.cr-cond.t-bad { color: var(--red); }
.cr-cond.t-bad .cr-dot { background: var(--red); }
.cr-cond.t-unknown { color: var(--tx2); }
.cr-unconf { color: var(--tx3); font-size: 10px; border: 1px dashed var(--line3);
             border-radius: 8px; padding: 0 6px; margin-left: 5px; white-space: nowrap; }
.cr-late-on { color: var(--amber); }

/* the payment grid — one square per month, newest first */
.cr-grid { display: inline-flex; gap: 1.5px; align-items: center; vertical-align: middle; }
.cr-grid i { width: 7px; height: 12px; border-radius: 1px; display: inline-block;
             background: var(--bg3); border: 1px solid var(--line2); }
/* SOLID fill, not the -dim tints (owner 2026-08-26). The -dim variables are
 * about a tenth of full strength, because they are made to sit BEHIND text.
 * A square is 7px wide and carries no text, so a tenth of a colour reads as
 * nothing at all. Departure 4 from the mockup, which draws the tints. */
.cr-grid i.k-ok { background: var(--green); border-color: var(--green); }
.cr-grid i.k-late { background: var(--amber); border-color: var(--amber); }
/* the account itself went bad that month — a charge-off, a collection, a
   repossession, a foreclosure or a bankruptcy. Never the same colour as a late
   payment: spec 20.353. */
.cr-grid i.k-derog { background: var(--red); border-color: var(--red); }
/* nothing reported stays quiet — but the outline is the STRONGER hairline, so
 * an unreported month still reads as a square rather than as a hole. */
.cr-grid i.k-none { background: var(--bg3); border-color: var(--line3); }
/* the strip inside a one-line account row: narrower, so the drawn columns fit
   a normal screen without a sideways scroll. The inspector keeps full size. */
.cr-grid.cr-tight { gap: 1px; }
.cr-grid.cr-tight i { width: 5px; height: 11px; }
.cr-more { color: var(--tx3); font-size: 10px; font-family: var(--mono); }
/* The account table carries more columns than a narrow reading pane fits. Its
   sideways scrollbar must be VISIBLE: a macOS overlay bar appears only while
   scrolling, so a reader who never scrolls never learns the last columns are
   there. (Issue #14 — an unreachable column is the same fault as a missing
   one.) */
/* `scrollbar-width` is deliberately NOT set here: setting it makes Chrome
   ignore the ::-webkit- rules below and keep the overlay bar. */
#v2-report-main .tbl-scroll::-webkit-scrollbar { height: 9px; }
#v2-report-main .tbl-scroll::-webkit-scrollbar-thumb { background: var(--line3); border-radius: 5px; }
#v2-report-main .tbl-scroll::-webkit-scrollbar-track { background: transparent; }

/* the same grid in the record inspector, labelled by year */
.cr-hist { margin-top: 10px; }
.cr-hist-l { color: var(--tx3); font-size: 10px; text-transform: uppercase;
             letter-spacing: .4px; margin-bottom: 5px; }
/* One year per line, newest first, the year on the left — a reader follows a
   run of late months down the years instead of hunting them across a wrap. */
.cr-years { display: flex; flex-direction: column; gap: 3px; }
.cr-yr { display: flex; align-items: center; gap: 8px; }
.cr-yr-l { color: var(--tx3); font-size: 10px; font-family: var(--mono);
           flex: 0 0 30px; text-align: right; }
.cr-legend { margin-top: 8px; color: var(--tx3); font-size: 10.5px;
             display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cr-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* what the tool cannot read, said out loud */
.cr-note { margin: 8px 0 2px; padding: 7px 11px; border-left: 2px solid var(--amber);
           background: var(--amber-dim); color: var(--tx2); font-size: 11px;
           border-radius: 0 3px 3px 0; }

/* ---------------------------------------------------------------------------
   Spec 20.357 — the AI Summary panel on Findings, and the web sources list.

   The verdict strip above answers in one line; this panel is the review's own
   write-up behind it, collapsed until asked for. It reuses the Command Deck's
   narrative classes (.ai-orig / .ai-sec-h / .ai-item / .ai-verdict / .ai-meta)
   so the reading looks the same here as on the Brief. Only the frame and the
   source list are new.

   NOTE the class name: .ai-sum is already taken in command-deck.css (a narrow
   340px caption in an inspector), so this frame is .ai-panel — a shared name
   would have inherited that width and squeezed the whole write-up.
   --------------------------------------------------------------------------- */
.ai-panel { border: 1px solid var(--line2); background: var(--ai-bg);
            border-left: 2px solid var(--purple); margin-bottom: 10px;
            border-radius: 2px; }
.ai-panel--decline { border-left-color: var(--sev-red); }
.ai-panel--unsure  { border-left-color: var(--amber); }
.ai-panel--accept  { border-left-color: var(--green); }
.ai-panel-head { display: flex; align-items: baseline; gap: 7px; width: 100%;
                 background: none; border: 0; cursor: pointer; text-align: left;
                 padding: 8px 11px; color: var(--tx); font: inherit;
                 font-size: 12.5px; }
.ai-panel-head:hover { background: var(--bg3); }
.ai-panel-chev { flex: 0 0 auto; color: var(--tx3); font-size: 10px; }
.ai-panel-title { font-weight: 700; }
.ai-panel .ai-orig { margin-top: 0; border-top: 1px solid var(--line2);
                     padding: 8px 11px 11px; }

/* The addresses the review cited. Numbered, because the review's own [n]
   markers point into this list when the vendor returns structured citations. */
.ai-websrc { margin-top: 10px; border-top: 1px dashed var(--line2);
             padding-top: 8px; }
.ai-websrc-list { margin: 4px 0 0; padding-left: 22px; font-size: 11.5px;
                  line-height: 1.6; color: var(--tx2); }
.ai-websrc-list li { margin-bottom: 2px; }
.ai-websrc-list a { color: var(--blue); text-decoration: none;
                    overflow-wrap: anywhere; }
.ai-websrc-list a:hover { text-decoration: underline; color: var(--blue-hov); }
.ai-websrc-host { color: var(--tx3); }

/* Issue #22 — the one dropdown a report section may offer, above its table.
 * Sits inside the section body, quiet, so it reads as part of the table's
 * head rather than as a second toolbar. */
.rsec-pick { display: flex; align-items: center; gap: 7px;
             padding: 5px 8px 6px; border-bottom: 1px solid var(--line2); }
.rsec-pick-l { color: var(--tx3); font-size: 10.5px;
               text-transform: uppercase; letter-spacing: .04em; }
select.rsec-pick-s { background: var(--bg1); border: 1px solid var(--line2);
                     color: var(--tx); padding: 2px 6px; border-radius: 2px;
                     font-size: 11.5px; }

/* Spec 20.366 — the vendor-outage banner. Sits between #cmdbar and #frame in
 * normal flex flow, so it pushes the page down instead of covering it: a
 * notice that overlaps the first row of results would hide the very thing it
 * is qualifying. Amber, not red — the results on screen are real, they are
 * incomplete, and red is the colour this design reserves for stop.
 *
 * ONE line tall (owner 2026-08-28) — the height is paid for by the results
 * underneath. `nowrap` is what guarantees it: a narrow window trims the tail
 * with an ellipsis instead of growing a second row, and the whole sentence
 * stays readable in the element's title. */
.outage-banner { flex: 0 0 auto; display: flex; align-items: center;
                 gap: 8px; padding: 3px 12px; font-size: 11.5px;
                 line-height: 1.6; white-space: nowrap; overflow: hidden;
                 background: var(--amber-dim);
                 border-bottom: 1px solid var(--amber-bd); color: var(--tx); }
.ob-mark { color: var(--amber); font-size: 13px; line-height: 1; flex: 0 0 auto; }
.ob-text { color: var(--tx2); min-width: 0; overflow: hidden;
           text-overflow: ellipsis; }

/* Owner answer 37 — the "this page shows the current analysis" notice. Same
 * place and the same flow rule as the outage banner above (it pushes the page
 * down, never covers it), but BLUE: nothing is wrong and nothing is missing.
 * The reader simply walked off an older analysis onto a page that only ever
 * draws the deal as it stands now, and the way back is in the notice. */
.hist-banner { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
               padding: 7px 12px; font-size: 11.5px;
               background: var(--blue-dim); border-bottom: 1px solid var(--blue-bd);
               color: var(--tx); }
.hist-banner a { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* Switchover stage 4 — the docket deep dive (web/v2/pages/docket.py). Two
 * rules only: the AI's recommendation line, which must read as a flag and not
 * as an instruction, and the filings column, which keeps each entry's filings
 * stacked in their own column so a long entry text can never squeeze them off
 * the page (the defect spec 20.222 fixed on the case links). */
.docket-airec { margin: 0 0 10px; font-size: 11.5px; color: var(--tx2); }
.docket-airec b { color: var(--amber); font-weight: 700; }
.docket-filing { white-space: normal; min-width: 150px; }
.docket-filing form { display: inline-block; margin: 0 4px 2px 0; }
.docket-filing .case-link { display: inline-block; margin: 0 4px 2px 0; }

/* Switchover stage 4 — a form's refusal line (web/v2/pages/spouse.py). Red is
 * this design's colour for stop, and the line sits ABOVE the form it refused
 * so the reader meets it before the fields again. */
.form-err { margin: 0 0 10px; padding: 7px 10px; font-size: 11.5px;
            background: var(--red-dim); border: 1px solid var(--red-bd);
            border-radius: 3px; color: var(--tx); }

/* Switchover stage 4 — a check that cannot be run on this page. `.muted` in
 * command-deck.css is scoped to a findings row group, so putting it on a tr
 * here styled nothing: an Experian row with no SSN read exactly like a Web row
 * that was ready to go. The reason sentence beside it is the message; this is
 * what makes the row scan as unavailable before it is read. */
.pick-off td, .pick-off label { color: var(--tx3); }

/* Switchover stage 5 (spec 20.370) — the report page's warning strip. The
   old reader drew these seven notices above a report's records; the new one
   drew none, so a sweep that stopped at its spending cap looked complete.
   Four tones, matching the old page: red (something is probably wrong),
   amber (the report stands, read it knowing this), green (searched, clean
   no), plain (context). */
.rep-notice { border: 1px solid var(--line2); border-left: 3px solid var(--line2);
  background: var(--bg2); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;
  font-size: 12px; }
.rep-notice.tone-warn { border-color: var(--red-bd); border-left-color: var(--red);
  background: var(--red-dim); }
.rep-notice.tone-caution { border-color: var(--amber-bd); border-left-color: var(--amber);
  background: var(--amber-dim); }
.rep-notice.tone-good { border-color: var(--green-bd); border-left-color: var(--green);
  background: var(--green-dim); }
.rep-notice.tone-quiet { color: var(--tx3); }
.rep-notice-title { display: block; margin-bottom: 3px; }
.rep-notice-lines { margin: 4px 0 0; padding-left: 18px; color: var(--tx2); }
.rep-notice-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Spec 20.378 (issue #35): the record inspector's one-click add — the names
 * a CLEAR record carries, each addable to the Entities/People tab for free. */
.rec-addables { margin: 8px 0 4px; padding: 7px 9px; border: 1px solid var(--line2);
  border-radius: 6px; background: var(--bg2); max-width: 560px; }
.rec-add-head { font-size: 10.5px; font-weight: 700; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.rec-add-row { display: flex; align-items: center; gap: 8px; padding: 2px 0;
  font-size: 11.5px; min-width: 0; }
.rec-add-row > b { color: var(--tx); word-break: break-word; min-width: 0; }
.rec-add-kind { color: var(--tx3); font-size: 10.5px; }
.rec-add-note { color: var(--tx3); font-size: 11px; font-style: italic; }

/* Spec 20.381 (issue #37): the People inspector's Identity section — the
   typing door for a hand-added person's SSN / date of birth / address. */
.ident-fld { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ident-lbl { flex: 0 0 92px; color: var(--tx3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; }
.ident-in { flex: 1; min-width: 0; background: var(--bg1); color: var(--tx);
  border: 1px solid var(--line2); border-radius: 4px; padding: 5px 8px;
  font: inherit; font-size: 12px; }
.ident-in:focus { outline: none; border-color: var(--blue); }