/* BC Tool design system — ported from the mockup at
   mca-poc/mockups/background_check_tool/index.html (read-only UX reference).
   Re-architected as server-rendered Django templates; no client-side
   renderers copied — only the visual language (variables, classes, layout). */

:root{
  --bg:#f0eeeb; --panel:#fdfcfa; --ink:#3d3c3a; --muted:#8a8278; --line:#e0dbd5;
  --tint:#eae7e2; --tint-soft:#efede9; --ink-2:#55534f; --faint:#c9c4bc;
  --accent-line:#d6e0fd; --accent-faint:#f7f9ff; --hi-line:#f3c9c9; --hi-ink:#7a2020;
  --med-line:#f3dcae; --med-ink:#7a5304;
  --accent:#2f5bea; --accent-soft:#eaeffe; --clearblue:#1F4E79;
  --hi:#e03131; --hi-soft:#fdecec; --med:#e8920c; --med-soft:#fdf3e2; --ok:#2f9e44; --ok-soft:#e9f7ee;
  --src-clear:#2f5bea; --src-merch:#7c3aed; --src-court:#0d9488; --src-web:#d9740a; --src-exp:#c2255c;
  --shadow:0 1px 2px rgba(30,25,20,.05),0 6px 18px rgba(30,25,20,.04);
  --fs:13px; --cardpad:11px 13px; --gap:8px; --rowpad:8px 11px; --h1:19px; --sec-gap:14px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:var(--fs);line-height:1.4}
button{font-family:inherit;font-size:var(--fs);cursor:pointer;border:none;background:none}
a{color:var(--accent);text-decoration:none}
table{border-collapse:collapse}

.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--ink);transition:.12s;font-size:var(--fs)}
.btn:hover{background:var(--tint)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:#2549c9}
.btn.danger{background:var(--panel);color:var(--hi);border-color:var(--hi-line)}
.btn.danger:hover{background:var(--hi-soft)}
.btn.sm{padding:4px 8px;font-size:calc(var(--fs) - 1px);border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--tint)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.spacer{flex:1}
.hint{color:var(--muted);font-size:calc(var(--fs) - .5px)}

.pill{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--med-soft);color:var(--med);text-transform:uppercase;letter-spacing:.4px}
.pill.risk-hi{background:var(--hi-soft);color:var(--hi)}
.pill.risk-none{background:var(--tint-soft);color:var(--muted)}

.src-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;color:#fff;text-align:center;display:inline-block}
a.src-badge:hover{filter:brightness(1.12);text-decoration:underline}
.b-clear{background:var(--src-clear)} .b-merch{background:var(--src-merch)} .b-court{background:var(--src-court)}
.b-web{background:var(--src-web)} .b-exp{background:var(--src-exp)}
.f-src{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--tint-soft);color:var(--muted);border:1px solid var(--line);white-space:nowrap;display:inline-block}

.offtag{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:5px;text-transform:uppercase;white-space:nowrap}
.rail-item.rail-off{opacity:.7}
.rail-item.rail-off .src-badge{filter:grayscale(1);opacity:.65}

/* top bar */
.topbar{height:54px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;position:sticky;top:0;z-index:40}
/* Issue D.2 (owner 2026-07-09): anchor jumps put the target at the very
   top of the window, UNDER the 54px sticky topbar — a deep-linked record
   hid behind the bar and the NEXT section's heading filled the screen, so
   the link read as "opens the wrong section". The offset lands targets
   below the bar with their own section heading visible for context. */
[id^="rec-"],[id^="sec-"]{scroll-margin-top:120px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;white-space:nowrap;color:var(--ink)}
.logo .mark{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.gsearch{position:relative;flex:1;max-width:480px;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:9px;background:var(--tint)}
.gsearch:focus-within{background:var(--panel);border-color:var(--accent)}
.gsearch input{flex:1;min-width:0;border:none;border-radius:0 9px 9px 0;padding:8px 12px;outline:none;background:transparent;font-size:var(--fs)}
/* Item 14 (comparison r2): the topbar's search-scope dropdown ("All deals" /
   "This deal — <name>"), same look as the mockup's #gScope. */
.gsearch select{border:none;border-right:1px solid var(--line);background:transparent;font-size:calc(var(--fs) - .5px);font-weight:700;color:var(--muted);padding:0 4px 0 9px;outline:none;cursor:pointer;border-radius:9px 0 0 9px}
.topbar-user{font-size:calc(var(--fs) - .5px);color:var(--muted);white-space:nowrap}

/* ALL DEALS */
.cases-wrap{max-width:1180px;margin:0 auto;padding:20px}
.cases-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cases-head h1{font-size:var(--h1);margin:0}
table.cases{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table.cases th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:9px 13px;border-bottom:1px solid var(--line);background:var(--tint-soft);white-space:nowrap}
table.cases td{padding:10px 13px;border-bottom:1px solid var(--line)}
table.cases tr:last-child td{border-bottom:none}
table.cases tbody tr:hover td{background:var(--tint)}
table.cases tbody tr{cursor:pointer}
.cs-name{font-weight:700}
.stat{display:inline-flex;align-items:center;gap:6px;font-size:calc(var(--fs) - .5px);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.st-intake{background:var(--accent)} .st-running{background:#8b5cf6} .st-review{background:var(--med)}
.st-decided{background:var(--ok)} .st-aborted{background:var(--hi)}

/* Wave C batch 1 item 3: deals-list layout — filter sidebar + main table +
   pager. Scoped to .deal-list-layout (never a bare change to .cases-wrap,
   which is reused as a plain centered wrapper on several other pages). */
.deal-list-layout{display:flex;gap:18px;align-items:flex-start}
.filters{width:210px;min-width:210px}
.filters .fbox{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 13px;margin-bottom:12px;box-shadow:var(--shadow)}
.filters h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.filters label{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.filters select{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:var(--fs);font-family:inherit;background:var(--panel);color:inherit}
.filters input[type="date"]{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:var(--fs);font-family:inherit;background:var(--panel);color:inherit}
.filters label.date-range-label{display:block;padding:4px 0}
.filters label.date-range-label input{margin-top:4px}
.cases-main{flex:1;min-width:0}
/* mockup stage vocabulary (New/Pre-screen/Awaiting review/BC complete/Cleared/Declined) */
.st-New{background:var(--accent)} .st-Prescreen{background:#8b5cf6} .st-Awaiting{background:var(--med)}
.st-BC{background:#0d9488} .st-Cleared{background:var(--ok)} .st-Declined{background:var(--hi)}
.pager{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:14px}
.pager .btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager button{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:600;background:var(--panel);opacity:.4;cursor:default}

/* CASE / DEAL WORKSPACE */
.case-screen{display:flex;min-height:calc(100vh - 54px)}
.rail{width:236px;min-width:236px;background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:11px 9px}
.rail .back{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:9px;font-weight:700;color:var(--ink);border:1px solid var(--line);margin-bottom:11px;background:var(--panel)}
.rail .back:hover{background:var(--tint)}
.rail-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;cursor:pointer;font-weight:600;color:var(--ink);margin-bottom:2px;text-decoration:none}
.rail-item:hover{background:var(--tint)}
.rail-item.active{background:var(--accent-soft);color:var(--accent)}
.rail-item .rc{margin-left:auto;font-size:11px;font-weight:700}
.rail-group{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:14px 10px 6px}
.rc-found{color:var(--hi)} .rc-done{color:var(--ok)} .rc-idle{color:var(--muted)}
.rc-running{color:var(--accent)} .rc-queued{color:var(--med)} .rc-failed{color:var(--hi)}

.case-main{flex:1;overflow:auto;padding:14px 20px 90px}
.case-inner{max-width:1000px}
.deal-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 15px;margin-bottom:var(--sec-gap);box-shadow:var(--shadow)}
.deal-strip h1{font-size:var(--h1);margin:0}
.chip{font-size:calc(var(--fs) - .5px);background:var(--tint-soft);border:1px solid var(--line);border-radius:8px;padding:3px 9px;color:var(--ink)}
.chip b{color:var(--ink)}
/* mockup .flag — the red-flag cue banner (owner Q4, Related People) */
.flag{display:flex;gap:9px;background:var(--med-soft);border:1px solid var(--med-line);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:calc(var(--fs) - .5px);color:var(--med-ink)}
/* mockup mdChip — missing-document warning chips in the deal strip */
.chip.flag-chip{background:var(--med-soft);color:var(--med);font-weight:600;border-color:var(--med-line)}
/* mockup rbadge2 — prior-submission count on the History rail item */
.rail-badge{margin-left:auto;font-size:10px;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 7px;white-space:nowrap}
/* audit r3 FIX 18 — report records read as ONE clipped line; the detail
   row (and its Raw source text) carries the full content.
   Owner (2026-07-08, one-line rows): the table is now table-layout:fixed —
   the header row sets every column's width once, so no cell's content can
   balloon a column and squeeze the neighbours into wrapping. Short columns
   (dates, amounts, status, entity) get fixed slots below; Record and the
   name-like category columns (Secured party, Case type…) share the rest.
   Every summary-row cell clips to one line with an ellipsis; the expand
   detail row is exempt (no .report-record-row class) and wraps freely. */
.rep-records .rec-line{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
table.rep-records{table-layout:fixed}
.rep-records th.col-sm{width:100px}
.rep-records th.col-md{width:130px}
.rep-records th.col-status{width:110px}
.rep-records th.col-ent{width:150px}
.rep-records tr.report-record-row td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* FIX 16 — slim zero-record section rows.
   Owner (2026-07-08): grouped below populated sections + dimmed so the
   page reads "found" first, "nothing found" second at a glance. */
.panel.zero-section{opacity:.55}
.panel.zero-section h2{font-size:var(--h2);color:var(--muted);font-weight:600}
.zero-section-divider{color:var(--faint);font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;border-top:1px solid var(--line);padding-top:14px;margin:4px 0 2px}

.tabnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sec-gap);border-bottom:1px solid var(--line);padding-bottom:8px}
.tabnav a{font-size:calc(var(--fs) - .5px);border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--panel);font-weight:600;color:var(--ink)}
.tabnav a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tabnav a:hover:not(.active){background:var(--tint)}

.section-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 11px;gap:10px;flex-wrap:wrap}
.section-row h2{font-size:calc(var(--fs) + 2px);margin:0}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:var(--cardpad);margin-bottom:12px}
.empty{color:var(--muted);text-align:center;padding:30px;border:1px dashed var(--line);border-radius:12px;background:var(--tint-soft)}
.run-cta{display:flex;flex-direction:column;align-items:center;gap:11px;padding:32px;border:1px dashed var(--line);border-radius:12px;background:var(--tint-soft);text-align:center}

/* aligned findings table */
table.findings{width:100%;border-collapse:collapse;font-size:var(--fs);background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-variant-numeric:tabular-nums}
table.findings th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);background:var(--tint-soft);white-space:nowrap}
table.findings td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.findings tr:last-child td{border-bottom:none}
table.findings th.num,table.findings td.num{text-align:right}
table.findings .dash{color:var(--faint)}
table.findings tr.ignored{opacity:.5}
.stt-open{color:var(--hi);font-weight:700} .stt-closed{color:var(--ok);font-weight:700}
.ign-btn{font-size:10px;font-weight:700;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;padding:1px 8px;cursor:pointer;white-space:nowrap}
.ign-btn:hover{color:var(--hi);border-color:var(--hi)}

/* modal / decision dialogs (item 19, comparison r2): every decision dialog +
   rerun/batch confirm page renders as a centered overlay MODAL above the
   dimmed page — same visual treatment as the mockup's .overlay/.modal —
   rather than inline in the page flow. The confirm PAGES keep their own
   URLs (still real Django pages); only the presentation changes to a fixed,
   dimmed backdrop with the modal centered over it. */
.overlay-inline{position:fixed;inset:0;background:rgba(18,22,35,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:480px;max-width:92vw;box-shadow:0 24px 60px rgba(15,20,40,.3);padding:20px;max-height:90vh;overflow:auto}
.modal h3{margin:0 0 4px;font-size:16px}
.modal p.sub{margin:0 0 14px;color:var(--muted)}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.opt-row{display:flex;gap:9px;flex-wrap:wrap}
.opt{flex:1;min-width:120px;border:1px solid var(--line);border-radius:11px;padding:12px;cursor:pointer;text-align:center;font-weight:700;background:var(--panel)}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt:disabled{opacity:.5;cursor:not-allowed}
.reason-list{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.reason{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;font-size:calc(var(--fs) - 1px)}
.form-error{background:var(--hi-soft);color:var(--hi-ink);border:1px solid var(--hi-line);border-radius:9px;padding:9px 12px;margin-bottom:10px;font-size:calc(var(--fs) - .5px)}

/* New-deal intake form — ported from the mockup's .iform/.doc-slot
   (mca-poc/mockups/background_check_tool/index.html lines ~187-198) */
.iform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.iform label{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.iform label.wide{grid-column:1/-1}
.iform input{font:inherit;font-size:calc(var(--fs) - .5px);color:var(--ink);background:var(--tint-soft);border:1px solid var(--line);border-radius:7px;padding:6px 9px}
.iform input:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.doc-slot{border:1px dashed var(--line);border-radius:9px;padding:8px 10px;margin-top:8px}
.doc-slot .ds-t{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
/* Issue E (owner 2026-07-08): selected files render as the mockup's
   .doc-chip pills (name + ✕ remove), never a bare "2 files" count. */
.doc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin:5px 6px 0 0;font-size:calc(var(--fs) - 1px)}
.doc-chip button{border:0;background:none;cursor:pointer;color:var(--muted);font-weight:700;padding:0}
.doc-chip button:hover{color:var(--hi)}
.doc-slot.ds-miss{border-color:var(--hi);background:var(--hi-soft)}
.doc-add{font-size:calc(var(--fs) - 1px);color:var(--accent);cursor:pointer;margin:5px 0 0;display:inline-block}

/* Items 15/16/39 (comparison r2): intake documents area is a real drop
   zone — highlight on drag-over, same treatment as the mockup's UCC drop
   target. */
.doc-dropzone{padding:18px 14px;text-align:center;transition:border-color .12s,background .12s}
.doc-dropzone.dragover{border-color:var(--accent);background:var(--accent-faint)}

/* Item 8 (comparison r2): bottom-fixed, non-blocking loadbar — ported from
   the mockup's .loadbar/.lb-*. Replaces the old inline .progress-box. */
.loadbar{position:fixed;left:0;right:0;bottom:0;background:#1c2230;color:#fff;z-index:45;box-shadow:0 -6px 24px rgba(0,0,0,.18);transform:translateY(110%);transition:.22s;padding:11px 16px}
.loadbar.show{transform:none}
/* owner 2026-07-06: waiting-on-human state — one quiet line, no spinner */
.loadbar.lb-compact{padding:6px 16px;font-size:12.5px}
.loadbar.lb-compact .lb-now{font-weight:600}
.lb-row{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;flex-wrap:wrap}
.lb-now{font-weight:700;display:flex;align-items:center;gap:10px}
.lb-now .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:bctool-rot .8s linear infinite;flex:none}
@keyframes bctool-rot{to{transform:rotate(360deg)}}
.lb-steps{display:flex;gap:12px;flex-wrap:wrap;font-size:12px}
.lb-step{color:#aab3c5;display:flex;align-items:center;gap:5px}
/* Owner 2026-07-08 (Star Jets re-test): the dupe-check step announces its
   OUTCOME — a positive hit must never hide behind the same mute checkmark
   a clean check gets. */
.lb-outcome{color:#c6cede}
.lb-outcome.lb-hit{color:#ffb04d;font-weight:700}
.lb-step.active{color:#fff}
.lb-close{margin-left:auto;color:#aab3c5;background:none;border:none;font:inherit;cursor:pointer}
/* Issue B (owner 2026-07-08): the only way back once the loadbar is hidden. */
.lb-restore{position:fixed;left:16px;bottom:12px;z-index:44}
.progress-step-status{font-size:calc(var(--fs) - 1px);color:inherit;font-weight:600;opacity:.85}

/* History timeline */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-node{position:relative;margin-bottom:var(--gap)}
.tl-dot{position:absolute;left:-20px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);box-shadow:0 0 0 2px var(--line)}
.tl-dot.g{background:var(--ok)} .tl-dot.o{background:var(--med)} .tl-dot.r{background:var(--hi)}
.tl-card{border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:var(--panel)}
.tl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-act{font-weight:700} .tl-meta{color:var(--muted);font-size:calc(var(--fs) - 1px);margin-left:auto;white-space:nowrap}
.tl-sub{color:var(--ink-2);font-size:calc(var(--fs) - .5px);margin-top:2px}

/* Prior-submission cards + identity-drift table (wave C batch 1 item 2) */
.ps-card{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel)}
.ps-card.click:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(47,91,234,.14)}
.ps-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.sub-status{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;background:var(--tint-soft);color:var(--muted)}
.sub-status.s-declined{background:var(--hi-soft);color:var(--hi)}
.sub-status.s-offer{background:var(--ok-soft);color:var(--ok)}
.sub-status.s-pending,.sub-status.s-followup{background:var(--med-soft);color:var(--med)}
.via{font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--tint-soft);color:var(--muted)}
.appdiff{border-color:var(--hi-line)}
.appdiff td.chg{color:var(--hi);font-weight:700}

.messages{max-width:1000px;margin:10px auto 0}
.message{border-radius:9px;padding:9px 13px;margin-bottom:8px;font-size:calc(var(--fs) - .5px)}
.message.success{background:var(--ok-soft);color:var(--ok)}
.message.error{background:var(--hi-soft);color:var(--hi-ink)}
.message.info{background:var(--accent-soft);color:var(--accent)}

/* --- findings gist + two-tier citation rendering (architecture §5 am. 3) --- */
table.findings .gist{margin-top:3px;font-size:12.5px;color:#555;max-width:520px}
.ground{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:10.5px;vertical-align:1px}
.ground.ok{background:#e6f4ea;color:#1e7e34;border:1px solid #bfe3c8}
.ground.claim{background:#fdf3e3;color:#9a6b00;border:1px solid #f0dcae}
.pill.warn{background:#fdf3e3;color:#9a6b00;border:1px solid #f0dcae;margin-left:6px;font-size:10.5px;padding:0 6px;border-radius:8px}
.pick-row.pick-off{opacity:.55}
.pick-why{font-size:11px;color:#777;margin-left:6px}

/* --- UI wave 2 (appended block; see web/views.py "UI wave 2" comments) --- */

/* spec 8.8a: clickable source pills look like links — accent + tint + ↗ —
   everywhere (findings, UCC, entities/people Source column). Non-clickable
   pills keep the existing muted .f-src look untouched. */
.f-src-link{background:var(--accent-faint);border-color:var(--accent-line);color:var(--accent);font-weight:700}
.f-src-link:hover{background:var(--accent-soft)}

/* pure-CSS :target flash on the report viewer — no vendored JS (spec 8.8a).
   Same treatment on Summary/UCC rows for global-search deep links (spec
   14.4: "opened + briefly highlighted"). */
table.findings tr.report-record-row:target,
table.findings tbody tr:target{animation:bctool-target-flash 2.2s ease-out 1}
@keyframes bctool-target-flash{
  0%{background:var(--accent-soft)}
  100%{background:transparent}
}

/* applicant chips (spec 7.9; wave C batch 1 item 4; item 21/22: per-chip
   BC-status ICON — ✓ done / ⏳ running — like the mockup, not a colored dot) */
.chip.applicant-chip{display:inline-flex;align-items:center;gap:4px;text-decoration:none;cursor:pointer}
.chip.applicant-chip:hover{background:var(--tint)}
.chip.applicant-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.applicant-chip.active b,.chip.applicant-chip.active .bc-status-icon{color:inherit}
.bc-status-icon{display:inline-block;font-size:calc(var(--fs) - 1px);line-height:1}

/* decided banner (spec 17) */
.decided-banner{display:flex;align-items:center;gap:10px}
.decided-banner b{color:var(--ok)}

/* hand-pick union rows (spec 15.11b) reuse .reason-list/.reason; no new
   classes needed beyond what decision dialogs already carry. */

/* --- UI wave 3 (appended block; see web/views.py "UI wave 3" comments) --- */

/* Focus filter (spec 7.8): dimmed rows stay fully visible, never hidden —
   the SAME family as .ignored (opacity, not display:none), so a row can be
   both dimmed AND ignored without conflict. */
table.findings tr.dimmed, .tl-node.dimmed, tr.dimmed { opacity: .45 }
.tl-node.dimmed .tl-card { background: var(--tint-soft) }

.focus-chip select{border:1px solid var(--line);border-radius:8px;padding:3px 7px;background:transparent;color:inherit;font:inherit;font-size:calc(var(--fs) - 1px);cursor:pointer}
.focus-banner{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.focus-banner .btn{margin-left:auto}
.focus-banner b{color:var(--accent)}

/* Prior-submission picker + historical read-only banner (spec 13) */
.sub-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.sub-picker-chip{border:1px solid var(--line);border-radius:999px;padding:4px 11px;background:var(--panel);font-weight:600}
.sub-picker-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.historical-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--hi-soft);border-color:var(--hi-line);color:var(--hi-ink)}
.historical-banner b{color:var(--hi)}
.historical-banner .btn{margin-left:auto}

/* Re-check / actualization PRIOR vs CURRENT (spec 13.5/13.6) */
.actualization{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;padding:8px 10px;border:1px solid var(--accent-line);background:var(--accent-faint);border-radius:9px;font-size:calc(var(--fs) - .5px)}
.actualization-col{flex:1;min-width:160px}

/* Drag-to-reorder handle (spec 8.5/11.7) */
.drag-handle{cursor:grab;color:var(--muted);margin-right:4px;user-select:none}
.drag-handle:active{cursor:grabbing}
tr.sortable-ghost{opacity:.3}
tr.sortable-chosen{background:var(--tint)}

/* Report-a-problem footer link (POC item 86) */
.app-footer{padding:14px 20px;text-align:center}
.app-footer a{color:var(--muted);font-size:calc(var(--fs) - 1px);text-decoration:none}
.app-footer a:hover{color:var(--accent);text-decoration:underline}

/* Manual takeover (spec 3.1): a small text link next to the rail's Run
   button, and its record-entry table. */
.manual-link{font-size:calc(var(--fs) - 1px);color:var(--accent);text-decoration:none;margin-left:6px}
.manual-link:hover{text-decoration:underline}
tr.manual-row input{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;font-size:calc(var(--fs) - 1px)}

/* Guided tour overlay (spec 4.1a) — no-dependency, plain fixed-position card */
/* Overlay must stack ABOVE .bctool-tour-highlight (which lifts the target
   with its own z-index): step 1 highlights the whole workspace screen, and
   if that outranks the overlay it swallows every click meant for the tour's
   Skip/Next buttons — the tour becomes undismissable. Guard-tested. */
.bctool-tour-overlay{position:fixed;inset:0;background:rgba(20,18,15,.35);z-index:1002;display:flex;align-items:flex-end;justify-content:center;padding:24px}
.bctool-tour-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(15,20,40,.35);padding:18px 20px;max-width:420px;width:100%}
.bctool-tour-card h3{margin:0 0 6px;font-size:15px}
.bctool-tour-card p{margin:0 0 8px}
.bctool-tour-highlight{position:relative;z-index:1001;outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}

/* --- header applicant groups (spec 7.9 amendment 2026-07-05) --- */
.chipgrp{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:1px dashed var(--line,#ccc);border-radius:10px}

/* ===========================================================================
   Dark mode + density (owner-visible UI fixes, 2026-07-06)
   Ported from the mockup's body.dark / body.d-* variable-override pattern
   (mca-poc/mockups/background_check_tool/index.html lines ~20-35) onto
   [data-theme]/[data-density] attributes on <html>, set by static/theme.js.
   Default: light theme, compact density (unchanged from before this change).
   =========================================================================== */

:root{
  /* density (default = compact, matches mockup's default) */
  --fs:13px; --cardpad:11px 13px; --gap:8px; --rowpad:8px 11px; --h1:19px; --sec-gap:14px;
}
html[data-density="comfortable"]{--fs:14px; --cardpad:15px 17px; --gap:11px; --rowpad:11px 13px; --h1:21px; --sec-gap:18px}
html[data-density="dense"]{--fs:12px; --cardpad:7px 10px; --gap:5px; --rowpad:5px 9px; --h1:17px; --sec-gap:9px}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#161719; --panel:#1e2023; --ink:#d8d6d2; --muted:#93908a; --line:#33353a;
  --tint:#282a2f; --tint-soft:#24262a; --ink-2:#b5b2ac; --faint:#4d5057;
  --accent:#7d9bff; --accent-soft:#252d47; --accent-line:#3a4670; --accent-faint:#20263a;
  --hi:#f47272; --hi-soft:#3a2325; --hi-line:#5d2f31; --hi-ink:#f2a6a6;
  --med:#f2ad45; --med-soft:#372c17; --med-line:#584420; --med-ink:#f4d192;
  --ok:#57c878; --ok-soft:#20342a;
  --clearblue:#8ab4e6;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
}
/* Elements whose look depends on a hardcoded (non-variable) color in the
   light design, same overrides the mockup carries alongside its variable
   block — the underwriter walks every dark-mode screen, these are the
   fixes found by that walk (see report for the per-screen list). */
html[data-theme="dark"] .btn.primary{background:#3b63d8;border-color:#3b63d8}
html[data-theme="dark"] .btn.primary:hover{background:#2549c9}
html[data-theme="dark"] .logo .mark{background:#3b63d8}
html[data-theme="dark"] .tabnav a.active{background:#3b63d8;border-color:#3b63d8}
html[data-theme="dark"] table.findings .gist{color:var(--ink-2)}
html[data-theme="dark"] .ground.ok{background:#1d3324;color:#7fd99a;border-color:#2c4a34}
html[data-theme="dark"] .ground.claim{background:#3a2f14;color:#f0c975;border-color:#584420}
html[data-theme="dark"] .pill.warn{background:#3a2f14;color:#f0c975;border-color:#584420}
html[data-theme="dark"] .toast{background:#0f1218;color:#fff}
/* Item 26 (comparison r2): toast host, ported from the mockup's
   .toasts/.toast/.tdot. */
.toasts{position:fixed;right:16px;bottom:70px;display:flex;flex-direction:column;gap:9px;z-index:70}
.toast{background:#1c2230;color:#fff;padding:11px 14px;border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:calc(var(--fs) - .5px);display:flex;align-items:center;gap:10px;max-width:330px;animation:bctool-toast-pop .16s}
@keyframes bctool-toast-pop{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.toast .tdot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.toast.warn .tdot{background:var(--med)}
html[data-theme="dark"] .hist-banner{background:#7a2020;border-bottom-color:#f47272;box-shadow:0 3px 14px rgba(0,0,0,.5)}
html[data-theme="dark"] .bctool-tour-overlay{background:rgba(0,0,0,.55)}
html[data-theme="dark"] .overlay-inline{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .empty,html[data-theme="dark"] .run-cta{background:var(--tint-soft)}
.grp-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#777;margin-right:2px}

/* --- Wave B additions (2026-07-06) --- */

/* FAILED row styling (spec 14.6/15.6: a source failure is a loud, first-
   class visual state — never a silent blank, never confused with a clean
   "no records" result). */
.stt-failed{color:#fff;background:var(--hi);font-weight:800;padding:1px 8px;border-radius:6px;font-size:10.5px;letter-spacing:.3px;text-transform:uppercase}
tr.row-failed{background:var(--hi-soft)}

/* UCC Category selector (spec 11.7): the expanded-row control that writes
   category_overridden, same visual language as the focus-chip select. */
/* audit r3 FIX 10/12 — mockup .colhead/.grid-u/.ucc-cat: the UCC column
   header renders as an aligned uppercase grid, category labels as styled
   group headings (they were unstyled plain text before) */
.colhead{display:grid;align-items:center;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:var(--rowpad);margin-bottom:2px;gap:0 10px}
.colhead>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-u{grid-template-columns:24px minmax(140px,1fr) 108px 86px 88px 88px minmax(140px,1fr) 60px}
.ucc-cat{font-size:11px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.ucc-cat .cnt{color:var(--muted);font-weight:600}
.ucc-cat-form{margin-top:9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ucc-cat-form select{border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--panel);color:inherit;font:inherit;font-size:calc(var(--fs) - 1px)}

/* Click-header-to-expand rows (spec 7.6) */
tr.expandable-row{cursor:pointer}
tr.ucc-detail-row td{padding:9px 11px;background:var(--tint-soft)}

/* Global search: entity/people result groups + anchor deep-links reuse
   .timeline/.tl-card already defined above — no new classes needed there.
   Search-scope selector in the topbar (spec 14.6). */
.scope-select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--tint);color:inherit;font:inherit;font-size:calc(var(--fs) - 1px)}

/* Item 35/45 (comparison r2): per-row "↗ where" location label on the
   search-results page, same look as the mockup's .sr-where. */
.sr-where{margin-left:auto;font-size:11px;color:var(--accent);white-space:nowrap;font-weight:600;flex:none}

/* Quick-match dropdown (spec 14.1) */
.gsearch{position:relative}
#quick-match-region{position:absolute;left:0;right:0;top:100%;z-index:50}
.quick-match-panel{margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:70vh;overflow:auto;padding:6px}
.quick-match-empty{padding:10px 12px;color:var(--muted)}
.quick-match-group-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 8px 2px}
.quick-match-row{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border-radius:7px;color:var(--ink)}
.quick-match-row:hover{background:var(--tint)}
.quick-match-seeall{display:block;text-align:center;padding:8px;font-weight:700;border-top:1px solid var(--line);margin-top:4px}
/* Item 35/45: pinned at the TOP now — border/margin flip to the bottom side. */
.quick-match-seeall-top{border-top:none;border-bottom:1px solid var(--line);margin-top:0;margin-bottom:4px}

/* ===========================================================================
   Wave C batch 2 additions (2026-07-06)
   =========================================================================== */

/* Item 6: courts rail — the four deactivated jurisdiction sub-rows share the
   existing .rail-off/.offtag look; only the explanatory note under
   Nationwide is new. */
.rail-nationwide-note{margin-top:3px;font-size:calc(var(--fs) - 2px)}

/* Item 8: raw source text expand/collapse per finding row (spec 8.4/11.6),
   ported from the mockup's .rawsrc/pre.raw. */
tr.finding-detail-row td{padding:9px 11px;background:var(--tint-soft)}
.rawsrc>summary{cursor:pointer;font-size:calc(var(--fs) - 1px);color:var(--muted);font-weight:700;list-style-position:inside}
.rawsrc[open]>summary{color:var(--ink)}
pre.raw{margin:6px 0 2px;padding:9px 11px;background:var(--accent-faint);border:1px solid var(--line);border-radius:8px;font:500 11px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink-2);white-space:pre-wrap;overflow-x:auto}

/* Item 7: relation-confidence pill (spec 9.8) — High/Medium/Low, same
   thresholds + colors as the mockup's confPill(). */
.conf-pill{font-size:10px;font-weight:800;border-radius:999px;padding:1px 7px;white-space:nowrap}
.conf-pill.c-hi{background:var(--ok-soft);color:var(--ok)}
.conf-pill.c-md{background:var(--med-soft);color:var(--med)}
.conf-pill.c-lo{background:var(--hi-soft);color:var(--hi)}

/* Item 5 (owner 2026-07-07): the CLEAR subject-switcher pill row — was
   missing entirely, so the working links/active-state rendered as bare
   unstyled text. Matches the mockup's .rep-select/.rep-tab exactly. */
.rep-select{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.rep-tab{display:inline-block;font-size:calc(var(--fs) - .5px);border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--panel);color:var(--ink);font-weight:600;cursor:pointer;text-decoration:none}
.rep-tab:hover{background:var(--tint)}
.rep-tab.active{background:var(--clearblue);border-color:var(--clearblue);color:#fff}

/* Item 9: report-viewer jump-nav count pills + in-report search box, same
   visual language as the mockup's .rep-toc/.docsearch. */
.rep-toc{display:flex;flex-wrap:wrap;gap:6px;background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:12px}
.rep-toc a{font-size:calc(var(--fs) - 1px);color:var(--accent);font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:3px 8px;cursor:pointer;text-decoration:none}
.docsearch{display:flex;align-items:center;gap:8px;background:var(--tint);border:1px solid var(--line);border-radius:9px;padding:7px 11px;margin-bottom:11px;color:var(--muted)}
.docsearch input{border:none;background:none;outline:none;width:100%;font-size:var(--fs);color:var(--ink);font:inherit}
.report-record-row.search-dim{opacity:.35}
.panel.search-dim{opacity:.45}

/* Per-party runs (spec 9.3/9.4, 2026-07-06) */
.batch-bar{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.party-sources{width:auto;min-width:420px}
.party-sources td{padding:3px 14px 3px 0;border:0}

/* ===========================================================================
   Item 12-part/20/21/25/41 (comparison r2): findings-table rebuild — chips
   row, related-party pill, bullet gist line, ignored block — ported from
   the mockup's .rel-tag/.fields/.fld/.blts/.ign-head/.ign-row.
   =========================================================================== */
.rel-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--med-soft);color:var(--med);border:1px solid var(--med-line);white-space:nowrap;margin-left:8px}
.fields{display:flex;flex-wrap:wrap;gap:4px 7px;margin-top:2px}
.fld{font-size:calc(var(--fs) - 1px);background:var(--tint);border:1px solid var(--line);border-radius:7px;padding:2px 8px}
.fld .k{color:var(--muted);margin-right:5px}
.fld .v{font-weight:600}
ul.blts{margin:6px 0 0;padding-left:16px}
ul.blts li{margin:2px 0;font-size:calc(var(--fs) - .5px);color:var(--ink-2)}
.ign-head{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:18px 0 6px;padding-top:12px;border-top:1px dashed var(--line)}
.ign-head .hint{text-transform:none;letter-spacing:0;font-weight:400}
.ign-row{display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px dashed var(--line);border-radius:10px;margin-bottom:6px;opacity:.78}

/* Ask the assistant (spec 16) */
.assistant-panel{position:fixed;right:16px;bottom:64px;width:380px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:60}
.assistant-log{display:flex;flex-direction:column;gap:10px}
.assistant-qa{margin:0;display:flex;flex-direction:column;gap:6px}
.assistant-q{align-self:flex-end;max-width:88%;padding:9px 11px;border-radius:12px;border-bottom-right-radius:4px;background:var(--accent);color:#fff}
.assistant-a{align-self:flex-start;max-width:88%;padding:9px 11px;border-radius:12px;border-bottom-left-radius:4px;background:var(--tint-soft);margin-top:0}
.assistant-panel textarea[data-testid="assistant-question"]{border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;font:inherit;font-size:calc(var(--fs) - .5px);resize:vertical;min-height:44px;max-height:150px;background:var(--panel);color:var(--ink)}
.assistant-thinking{display:none;align-items:center;gap:6px;font-size:calc(var(--fs) - 1px);color:var(--muted);margin:6px 0}
.assistant-thinking.htmx-request{display:flex}
.assistant-thinking .spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:bctool-rot .8s linear infinite;flex:none}