/* VERISComply — base styles. Deep green + brass, matching the original
   Apps Script build's own palette (see ReportGenerator.gs's #003117 / #4A5550).
   Simple, utilitarian layout — swap in your own branding/co-branding
   assets under public/assets/images/ and adjust the vars below.

   Type scale locked 16 Sep 2026, matching the VERISChecks design-system
   handover: only these seven sizes anywhere in the app, only weights
   400/500/600/700 (no 800), line-height 1.5 body / 1.3 titles / 1.15
   figures, and secondary text gets a lighter colour rather than a smaller
   size. --vc-fs-* are documentation of the scale; existing rules already
   use the literal pixel values below rather than var() everywhere. */
:root{
  --vc-fs-display:32px;  /* 700 - biggest brand lockup text only */
  --vc-fs-figure:24px;   /* 700 - stat totals, big figures */
  --vc-fs-page:20px;     /* 700 - h1 / page & card-panel titles */
  --vc-fs-card:16px;     /* 700 - card and panel sub-titles (h3) */
  --vc-fs-body:14px;     /* 400/500 - body copy, cells, buttons, nav, inputs */
  --vc-fs-label:12px;    /* 400/600 - labels, pills, counts, compact controls */
  --vc-fs-micro:11px;    /* 400 - floor. Nothing in the app goes smaller. */
  --green-900:#003117;
  --green-700:#0b4a2b;
  --green-600:#0f5c37;
  /* Brass/line/secondary-text/red retuned 18 Sep 2026 to match the
     VERISDiligence mockup pack's shared.css — same emerald+brass family
     (the pack's own README says it deliberately carries over the
     VERISChecks design reference), just the more refined hex values from
     that later pass. --mut in particular is the pack's own accessibility
     fix (#6E7570, chosen over its reference pack's #8A9099 for WCAG AA
     contrast on white) — worth adopting here for the same reason. Visual
     tokens only; no workflow, vocabulary or status values changed. */
  --brass:#b3903f;
  --brass-light:#d8bc7a;
  --brass-outline:#cdb37e;
  --brass-dark:#8a6f2e;
  --ink:#1f2a25;
  --mut:#6e7570;
  --line:#dfdcd2;
  --bg:#f6f5f1;
  --card:#ffffff;
  --red:#a81b2e;
  --red-bg:#fdecea;
  --ok:#0f5c37;
  --ok-bg:#e8f3ec;
  /* Semantic tokens layered on top of the brand colors above so dark mode
     only has to redefine these, not rewrite every rule. */
  --accent-text:var(--green-900);
  --link:var(--green-700);
  --input-bg:#ffffff;
  --hover-bg:#f0efeb;
  --pill-neutral-bg:#eef1ee;
  --pill-neutral-fg:#5c6862;
  --pill-warn-bg:#fff4de;
  --pill-warn-fg:#8a5a00;
  --banner-ok-border:#bfe3cd;
  --banner-err-border:#f3c6c2;
  --brass-bg:#f3ead9;
  --pill-info-bg:#e3eef8;
  --pill-info-fg:#2f5f8a;
}
:root[data-theme="dark"]{
  --bg:#0a0a0a;
  --card:#161616;
  --ink:#e6e6e6;
  --mut:#8f8f8f;
  --line:#2a2a2a;
  --red:#ff6b60;
  --red-bg:#2a1613;
  --ok:#58d68d;
  --ok-bg:#122318;
  --accent-text:#6fd9a6;
  --link:#8fe0b8;
  --input-bg:#1e1e1e;
  --hover-bg:#232323;
  --pill-neutral-bg:#242424;
  --pill-neutral-fg:#aeaeae;
  --pill-warn-bg:#332711;
  --pill-warn-fg:#e0b355;
  --banner-ok-border:#1f5c3a;
  --banner-err-border:#5c2621;
  --brass-bg:#2e2717;
  --brass-dark:#d8bc7a;
  --pill-info-bg:#16293b;
  --pill-info-fg:#7ab8e8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a;
    --card:#161616;
    --ink:#e6e6e6;
    --mut:#8f8f8f;
    --line:#2a2a2a;
    --red:#ff6b60;
    --red-bg:#2a1613;
    --ok:#58d68d;
    --ok-bg:#122318;
    --accent-text:#6fd9a6;
    --link:#8fe0b8;
    --input-bg:#1e1e1e;
    --hover-bg:#232323;
    --pill-neutral-bg:#242424;
    --pill-neutral-fg:#aeaeae;
    --pill-warn-bg:#332711;
    --pill-warn-fg:#e0b355;
    --banner-ok-border:#1f5c3a;
    --banner-err-border:#5c2621;
    --brass-bg:#2e2717;
    --brass-dark:#d8bc7a;
    --pill-info-bg:#16293b;
    --pill-info-fg:#7ab8e8;
  }
}
*{box-sizing:border-box}
body{margin:0;font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
/* FIXED 29 Oct 2026 — form controls don't inherit font-family from the
   page by default in any browser's UA stylesheet; only ordinary inline
   elements (a, span, etc.) do. Every <button>/<input>/<select>/<textarea>
   in the app was silently rendering in the browser's native UI font
   instead of Montserrat, which is why a <button class="bgold"> (e.g.
   "Recheck now") looked different from an <a class="bgold"> with the
   exact same class right next to it (e.g. "Export matches (CSV)") — not a
   one-off bug in that one button, a gap in the base reset that affected
   every form control on every page. */
button,input,select,textarea,optgroup{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}
/* FIXED 29 Oct 2026 (round 2) — Naseer: "Recheck button size is still
   small" after the font fix above shipped. The font now matched, but the
   BOX SIZE still didn't: Safari/Chrome give <button> a native OS "control"
   appearance that keeps its own intrinsic padding/min-height baked in,
   which silently fights a stylesheet's padding:10px 18px/border:none the
   same way the old font gap silently fought font-family — the override
   looks like it should win but the native chrome still shows through.
   <a class="bgold"> never had this problem because anchors have no native
   control appearance to begin with. appearance:none strips it, so
   .bgold's own padding/border/radius are 100% what renders — same fix
   shape as the font bug: don't restyle the one button, close the gap for
   every button in the app. */
button{-webkit-appearance:none;appearance:none}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{display:flex;min-height:100vh}
.sidebar{width:250px;flex:none;background:var(--card);color:var(--ink);display:flex;flex-direction:column;padding:20px 16px;border-right:1px solid var(--line)}
.brand{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.brandmark{width:36px;height:36px;border-radius:8px;background:var(--brass);color:var(--green-900);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
.brandname{font-weight:700;font-size:16px;line-height:1.3;letter-spacing:.3px;color:var(--accent-text)}
.brandtm{font-size:.5em;font-weight:600;vertical-align:super;color:var(--mut);margin-left:1px}
.tagline{font-size:11px;color:var(--mut);margin-top:2px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{color:var(--ink);opacity:.8;padding:10px 12px;border-radius:8px;font-size:14px;border-left:3px solid transparent}
.nav a:hover{background:var(--bg);text-decoration:none;opacity:1}
.nav a.active{background:var(--bg);opacity:1;color:var(--accent-text);font-weight:600;border-left-color:var(--brass)}
.acct{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.who{display:flex;align-items:center;gap:10px}
.av{width:32px;height:32px;border-radius:50%;background:var(--green-900);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.av-lg{width:38px;height:38px;font-size:15px}
.nm{font-size:14px;font-weight:600;color:var(--ink)}
.rl{font-size:11px;color:var(--mut)}
.logout{font-size:12px;color:var(--mut)}
.main{flex:1;min-width:0}
.pane{padding:28px 34px;max-width:1600px}
h1{font-size:20px;line-height:1.3;margin:0 0 4px;font-weight:700}
h3{font-size:16px;line-height:1.3;margin:0 0 6px}
h4{font-size:14px;line-height:1.3;margin:0 0 10px}
/* Fixed height on every screen — deliberately does not grow or shrink to
   fit its content, so it lines up with the sidebar's brand-block divider
   the same way on every page regardless of how much (or little) is inside
   it. A page needing more room adds a separate card below the band rather
   than the band growing (see .caseheader on case_detail.php). */
.band{display:flex;align-items:center;justify-content:space-between;background:var(--green-900);color:#fff;margin:-28px -34px 24px;height:154.5px;padding:20px 34px;border-radius:0}
.band h1{color:#fff}
.band .band-sub{opacity:.75;font-size:14px;margin-top:2px}
.band .mut{color:rgba(255,255,255,.6)}
.band .bgold{background:var(--brass);color:var(--green-900);border:none;padding:10px 18px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600}
.band .bgold:hover{background:var(--brass-outline)}
.band .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.band .btn-ghost:hover{background:rgba(255,255,255,.1)}
.band .band-search{position:relative;flex:1 1 380px;max-width:420px;margin:0 24px}
.band .band-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.55);pointer-events:none}
.band .band-search input{width:100%;padding:10px 14px 10px 38px;border-radius:8px;border:1px solid var(--brass);background:rgba(255,255,255,.08);color:#fff;font-size:14px}
.band .band-search input::placeholder{color:rgba(255,255,255,.55)}
.band .band-search input:focus{outline:none;border-color:var(--brass);background:rgba(255,255,255,.14);box-shadow:0 0 0 2px rgba(179,144,63,.25)}
@media (max-width:640px){
  .band{flex-direction:column;align-items:flex-start;gap:14px}
  .band .band-search{margin:0;max-width:none;width:100%}
}
.mut{color:var(--mut)}
.hint{color:var(--mut);font-size:12px}
.req{color:var(--red)}

/* Case detail header — sticky + brass actions, more visible Back link
   (added 14 Oct 2026, per Naseer's live-usage feedback: Export/Download
   were easy to lose once scrolled past, the outline buttons didn't read as
   the primary actions on this screen, and the Back link was too faint to
   notice). Scoped to .band-sticky/.band-back/.band-actions specifically —
   never touches the plain .band every other page's header also uses, so
   the dashboard/new-screening/case-manager bands keep their current,
   non-sticky look exactly as it is today. */
.band.band-sticky{position:sticky;top:0;z-index:40;box-shadow:0 3px 14px rgba(0,0,0,.18)}
.band .band-back{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:700;opacity:.95;margin-bottom:10px;padding:6px 10px;border-radius:6px;transition:background .15s ease,opacity .15s ease}
.band .band-back:hover{background:rgba(255,255,255,.14);opacity:1;text-decoration:none}
.band .band-back svg{width:13px;height:13px;flex:none}
.band .band-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.band .band-actions a.bgold,.band .band-actions button.bgold{display:inline-block;text-decoration:none}

.banner{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;font-weight:600;line-height:1.45;border:1px solid transparent;border-left-width:4px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.banner::before{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;line-height:1}
.banner.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--banner-ok-border)}
.banner.ok::before{content:"\2713";background:var(--ok)}
.banner.err{background:var(--red-bg);color:var(--red);border-color:var(--banner-err-border)}
.banner.err::before{content:"!";background:var(--red)}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}
.statcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.statcard:hover{text-decoration:none;border-color:var(--brass);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.07)}
.statcard h3{font-size:16px;color:var(--accent-text)}
.statcard.attn{border-color:var(--brass);border-width:1.5px}
.statcard .sicon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:10px;background:var(--brass-bg);color:var(--brass-dark)}
.statcard.attn .sicon{background:var(--red-bg);color:var(--red)}
.statcard .sicon-mut{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.statcard .sicon-ok{background:var(--ok-bg);color:var(--ok)}
.statcard .total{font-size:24px;line-height:1.15;font-weight:700;margin-top:6px;font-family:'Montserrat',sans-serif}
.statcard .hint{margin-top:6px;font-size:11px;font-weight:600;color:var(--mut)}
.statcard:hover .hint{color:var(--brass)}

.chips{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--card);font-size:12px;cursor:pointer;color:var(--mut)}
.chip.on{background:var(--green-900);color:#fff;border-color:var(--green-900)}

/* Type toggle (Individual/Company) on the redesigned New Screening form —
   ADDED 24 Sep 2026. Reuses .chip/.chip.on so it never drifts visually
   from the rest of the app's chip styling; this just adds the flex layout
   labels don't get by default and a bit more size/weight since it's a
   primary form control here, not a secondary filter. */
.typetoggle{display:flex;gap:8px;margin-top:4px}
.typetoggle .chip{padding:9px 20px;font-size:13px;font-weight:600;position:relative}

.panel,.card,.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:16px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.tcard{padding:0}
.fbar{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.tscroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em}
tr:last-child td{border-bottom:none}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th.sortable::after{content:"\2195";margin-left:5px;opacity:.35;font-size:10px}
th.sortable.sort-asc::after{content:"\2191";opacity:1;color:var(--brass)}
th.sortable.sort-desc::after{content:"\2193";opacity:1;color:var(--brass)}
.searchbox{padding:7px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;min-width:220px}

.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.pill.draft{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}
.pill.results{background:var(--pill-warn-bg);color:var(--pill-warn-fg)}
/* ADDED 29 Oct 2026 — Naseer flagged the "Activity" tag on the Notes &
   Activity feed: it was borrowing .pill.draft (the gray "Draft" CASE-STATE
   color) and "Note" was borrowing .pill.results (the orange "Results
   Ready" CASE-STATE color) — case_detail.php's feed renderer reused those
   two classes just because they happened to be gray/orange, not because
   "Activity"/"Note" mean the same thing as those case states. Purpose-
   built pair instead: .note picks up the same brass "this is Veris's own
   annotation" treatment used elsewhere (.pill.status, .tag.verisreviewed,
   .clreason). Neither is tied to a case-state color any more, so they
   can't drift out of sync if a case-state color ever changes.
   .activity's first pass reused .pill.riskna's outlined-neutral look —
   Naseer saw it live and said it "doesn't feel like good": next to the
   solid brass .note pill it read as washed-out/forgettable rather than a
   deliberate second tag. REVISED same day — new --pill-info-bg/-fg tokens
   (a muted blue, light+dark theme pairs added up in :root — the one hue
   family nothing else in this app's palette already uses, so it reads as
   its own distinct category rather than competing with brass/green/red/
   amber), applied as a flat fill with no border, matching how every other
   status-style pill here is built (.completed/.action/.results/etc. are
   all solid fill, no border — only the deliberately-subdued .riskna
   outlines). */
.pill.note{background:var(--brass-bg);color:var(--brass-dark);border:1px solid var(--brass-outline)}
.pill.activity{background:var(--pill-info-bg);color:var(--pill-info-fg)}
.pill.completed{background:var(--ok-bg);color:var(--ok)}
.pill.action{background:var(--red-bg);color:var(--red)}
.pill.escalate{background:var(--red);color:#fff}
.pill.failed{background:var(--red-bg);color:var(--red)}
.pill.awaiting{background:var(--pill-warn-bg);color:var(--pill-warn-fg)}
.pill.qa{background:var(--pill-neutral-bg);color:var(--pill-neutral-fg)}

.bprim{background:var(--green-900);color:#fff;border:none;padding:9px 16px;border-radius:6px;font-size:14px;cursor:pointer;font-weight:600}
.bprim:hover{background:var(--green-700)}
.bbrass{display:inline-block;background:var(--brass);color:var(--green-900);border:none;padding:9px 16px;border-radius:6px;font-size:14px;cursor:pointer;font-weight:600;text-align:center}
.bbrass:hover{background:var(--brass-outline);text-decoration:none}
.btn-ghost{background:transparent;border:1px solid var(--line);padding:9px 16px;border-radius:6px;font-size:14px;cursor:pointer;color:var(--ink)}
.btn-ghost:hover{background:var(--hover-bg)}
.btn-danger{background:transparent;border:1px solid #f3c6c2;color:var(--red);padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer}
.btn-edit{display:inline-block;background:transparent;border:1px solid var(--line);color:var(--link);padding:5px 10px;border-radius:6px;font-size:12px;cursor:pointer;margin-right:6px}
.btn-edit:hover{background:var(--hover-bg);text-decoration:none}

.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
.fld{display:flex;flex-direction:column;gap:5px}
.fld.full{grid-column:1/-1}
/* ADDED 20 Oct 2026 — pairs "ID / passport number" with "ID issuer / type"
   on New Screening as their own shared row, regardless of how many fields
   sit above them (see new_check.php's comment at this wrapper). */
.idpair-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
.fld label{font-size:12px;font-weight:600;color:var(--ink)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;background:var(--input-bg);color:var(--ink)}
.chkrow{display:flex;gap:10px;align-items:center;font-size:14px}
.formfoot{display:flex;align-items:center;gap:12px;margin-top:8px}

.settingspanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:16px;min-width:0}
.screensplit{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start;max-width:100%}
.formpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.entitylist label,.checkrow{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.checkrow{justify-content:space-between}

/* On/off pill toggle for check types (World-Check / Passport Check),
   styled after World-Check One's own toggle but in our palette. */
.wctoggle{position:relative;display:inline-flex;width:68px;height:28px;border-radius:6px;overflow:hidden;border:1px solid var(--line);cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.04em;flex:none}
.wctoggle input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.wctoggle .wct-off,.wctoggle .wct-on{flex:1;display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;pointer-events:none}
.wctoggle input:not(:checked) ~ .wct-off{background:var(--green-900);color:#fff}
.wctoggle input:not(:checked) ~ .wct-on{background:var(--card);color:var(--mut)}
.wctoggle input:checked ~ .wct-off{background:var(--card);color:var(--mut)}
.wctoggle input:checked ~ .wct-on{background:var(--green-700);color:#fff}
.wctoggle.locked{cursor:default}
.wctoggle.locked input{cursor:default}
.wctoggle .wct-lock{display:block;pointer-events:none}
/* Locked (World-Check) variant: two solid squares — a dark segment holding
   just the padlock icon, and a filled "on" segment — no OFF/ON text, matching
   the real World-Check screening screen's always-on/locked control. */
.wctoggle.locked input:checked ~ .wct-off{background:#15161a;color:#fff}
.wctoggle.locked input:checked ~ .wct-on{background:var(--green-700)}

.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 0}
.dtabs button,.dtabs a{background:none;border:none;padding:10px 14px;font-size:14px;cursor:pointer;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.dtabs button.on,.dtabs a.on{color:var(--accent-text);border-bottom-color:var(--accent-text);font-weight:600}
.matchcard{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.matchhead{display:flex;justify-content:space-between;align-items:flex-start}
.matchname{font-weight:700;font-size:14px}
.matchmeta{color:var(--mut);font-size:12px;margin-top:4px}
.resbtns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.resbtn{padding:5px 12px;border-radius:16px;border:1px solid var(--line);background:var(--input-bg);color:var(--ink);font-size:12px;cursor:pointer}
.resbtn.on{background:var(--green-900);color:#fff;border-color:var(--green-900)}

.ghead{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:14px}
.ghead .k{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.ghead .v{margin-top:2px}

/* Login / password pages */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px;width:100%;max-width:380px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 2px 16px rgba(0,0,0,.04)}
.authcard h2{margin:0 0 4px;font-size:20px;line-height:1.3}
.authcard .sub{color:var(--mut);font-size:14px;margin-bottom:18px}
.authcard input{width:100%;margin-bottom:12px}
.authcard .bprim{width:100%}
.autherr{color:var(--red);font-size:12px;margin-top:8px}
.authlinks{margin-top:14px;font-size:12px;text-align:center}

/* Split-panel sign-in screen (login.php only — other auth pages keep the
   simple .authwrap/.authcard layout above). Left = cream brand panel with
   the full-colour mosaic mark + wordmark, dead-centered both ways so it
   sits on the same line as the form on the right. Right = dark-green
   form panel. */
.loginsplit{min-height:100vh;display:flex;background:var(--bg)}
.loginbrand{flex:1 1 46%;background:var(--bg);color:var(--accent-text);display:flex;align-items:center;justify-content:center;padding:56px 48px;position:relative;overflow:hidden}
.loginbrand::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(176,141,79,.12),transparent 55%);pointer-events:none}
.loginbrand-block{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:320px}
.loginmark{width:120px;height:auto;display:block;margin-bottom:18px}
.loginbrand-name{font-size:32px;line-height:1.3;font-weight:700;letter-spacing:.3px;color:var(--accent-text)}
.loginbrand-tag{font-size:14px;color:var(--mut);margin-top:8px;line-height:1.5}
.loginbrand-foot{position:absolute;left:0;right:0;bottom:28px;text-align:center;font-size:12px;color:var(--mut);opacity:.8;line-height:1.6}
.loginbrand-foot strong{color:var(--link);font-weight:700}
.loginform-wrap{flex:1 1 54%;background:var(--green-900);display:flex;align-items:center;justify-content:center;padding:32px;position:relative}
.loginform{width:100%;max-width:380px}
.loginform h2{margin:0 0 4px;font-size:20px;line-height:1.3;color:#fff}
.loginform .sub{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:22px}
.loginform input{width:100%;margin-bottom:12px}
.loginform .bprim{width:100%;padding:11px 16px;font-size:14px;background:var(--brass);color:var(--green-900)}
.loginform .bprim:hover{background:var(--brass-outline)}
.loginform .autherr{color:#7a1c14;font-size:12px;margin-top:10px;background:var(--red-bg);padding:9px 12px;border-radius:6px}
.loginform .authlinks{margin-top:16px;font-size:12px;text-align:center}
.loginform .authlinks a{color:var(--brass)}
@media (max-width:860px){
  .loginsplit{flex-direction:column}
  .loginbrand{flex:none;padding:44px 28px 96px}
  .loginbrand-foot{bottom:16px}
  .loginform-wrap{flex:none;padding:36px 24px 48px}
}

/* Sidebar brand mark, sized down from the same mosaic mark used on login. */
.brandmark-img{width:76px;height:auto;display:block;margin-bottom:10px}

@media (max-width: 760px){
  .wrap{flex-direction:column}
  .sidebar{width:100%}
  .pane{padding:18px}
  .band{margin:-18px -18px 20px;height:auto;min-height:120px;padding:20px 18px;border-radius:0}
  .screensplit,.form-grid,.grid3,.idpair-row{grid-template-columns:1fr}
}

/* Case Manager — filter rail + bulk action bar */
.cmgrid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start;max-width:100%}
.filter-rail{display:flex;flex-direction:column;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;position:sticky;top:18px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.filter-group h5{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.fchk{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:6px;cursor:pointer}
.fchk input{margin:0}
.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--green-900);color:#fff;padding:10px 14px;border-radius:10px;margin-bottom:12px}
.bulkbar span{font-size:12px;font-weight:600;margin-right:6px}
.bulkbar .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff;padding:6px 12px;font-size:12px}
.bulkbar .btn-ghost:hover{background:rgba(255,255,255,.12)}
.bulkbar .btn-danger{border-color:#ff9d94;color:#ffb3ab;padding:6px 12px;font-size:12px}
@media (max-width:900px){ .cmgrid{grid-template-columns:1fr} .filter-rail{position:static} }

/* World-Check match list filters (case_detail.php) */
.matchfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.matchfilters select{padding:7px 10px;font-size:12px}

/* Resolution form — Risk level + Reason row, sits alongside the existing
   status pill buttons. */
.resmeta{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.resmeta select{font-size:12px;padding:6px 8px}

/* Notes & Activity feed */
.feeditem{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.feeditem:last-child{border-bottom:none}
.feedtext{font-size:14px;line-height:1.5}
.feedmeta{color:var(--mut);font-size:11px;margin-top:4px}

/* Dark mode toggle, in the sidebar's account footer */
.theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--mut);font-size:12px;cursor:pointer;margin-bottom:10px;font-family:inherit}
.theme-toggle:hover{background:var(--hover-bg)}
.theme-toggle svg{width:14px;height:14px;flex:none}
.theme-toggle .lbl-dark,.theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .lbl-light,[data-theme="dark"] .theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .lbl-dark,[data-theme="dark"] .theme-toggle .ic-moon{display:inline-flex}

/* Case detail — quick-edit header row (Case Rating / Assignee / Ongoing
   Screening editable inline for internal users, read-only chips otherwise). */
.caseheader{display:flex;flex-wrap:wrap;gap:22px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:16px}
.caseheader form{display:contents}
.chfield{display:flex;flex-direction:column;gap:3px;min-width:120px}
.chlabel{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.chval{font-size:14px;font-weight:600}
.chfield select,.chfield input[type=text]{padding:5px 8px;font-size:12px;border:1px solid var(--line);border-radius:6px;background:var(--input-bg);color:var(--ink)}

/* Resolution workflow — Current Status (read-only) + Status/Risk/Reason
   editable columns, modeled on World-Check One's own resolution panel. */
.rescols{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cshead{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;margin-bottom:8px}
.curstatus{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.csrow{display:flex;flex-direction:column;gap:1px;font-size:12px;margin-bottom:8px}
.csrow span{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.csrow b{font-weight:600}
.rescol3{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px}
.rcglabel{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;margin-bottom:6px}
.rradio{display:flex;align-items:center;gap:7px;font-size:14px;margin-bottom:7px;cursor:pointer}
.rradio input{margin:0}
.rradio.disabled{opacity:.4;cursor:not-allowed}
.rradio.disabled input{cursor:not-allowed}
.rescolgroup select,.rescolgroup input[type=text]{width:100%;font-size:12px}
.resedit select,.resedit textarea{width:100%;font-size:13px}
@media (max-width:820px){ .rescols{grid-template-columns:1fr} .rescol3{grid-template-columns:1fr} }

/* Bulk resolve table — mirrors World-Check One's own bulk panel: one row per
   Status, each showing the Risk Level/Reason it narrows to, instead of three
   independent radio columns. Click anywhere on a row to pick it. */
.bulkrestable{width:100%;border-collapse:collapse;font-size:13px}
.bulkrestable th{color:var(--mut);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.bulkrestable td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.bulkrestable tr:last-child td{border-bottom:none}
.bulkrestable tr.bulkrestrow{cursor:pointer}
.bulkrestable tr.bulkrestrow:hover{background:var(--bg)}
.bulkrestable tr.bulkrestrow.sel{background:var(--brass-bg)}
.bulkrestable .bulkrestrow-label{font-weight:600}
.bulkrestable input[type=radio]{margin:0}
.bulkrestable select{font-size:12px;padding:4px 6px}
.bulkrestable select:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:820px){ .bulkrestable{font-size:12px} .bulkrestable th,.bulkrestable td{padding:7px 8px} }

/* Bulk-resolve remark row — ADDED 20 Oct 2026, per live feedback: the
   remark box used to be a small textarea with the Resolve button stacked
   on its own line below it. Now one row — textarea spans the full width
   (left to right), Resolve button sits at the right extreme, bottom-
   aligned with the textarea so they read as one control. */
.bulkresolve-row{display:flex;align-items:flex-end;gap:12px;margin-top:12px}
.bulkresolve-row textarea{flex:1;min-width:0;margin:0}
.bulkresolve-row .bprim{flex:none;white-space:nowrap;padding:9px 18px;font-size:12.5px}
@media (max-width:640px){ .bulkresolve-row{flex-direction:column;align-items:stretch} .bulkresolve-row .bprim{width:100%} }


/* Record nav — "Matching World-Check Record X of Y" with prev/next, so a
   match is worked one at a time instead of scrolling one long stacked list
   (mirrors World-Check One's own List -> single-record drill-down). */
.recordnav{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px;flex-wrap:wrap;gap:10px}
.recordnav-pos{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.recordnav-pos b{color:var(--ink);font-weight:700}
.rnbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:16px;line-height:1}
.rnbtn:hover{background:var(--hover-bg)}
.rnbtn[aria-disabled="true"]{opacity:.35;pointer-events:none}

/* Comparison Data — Submitted vs Matched, with a plain literal-match
   indicator (not a scored algorithm) on fields we actually store both sides of. */
.compdata{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.comptable{width:100%;border-collapse:collapse;font-size:12px}
.comptable th{text-align:left;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:4px 8px;border-bottom:1px solid var(--line)}
.comptable td{padding:6px 8px;border-bottom:1px solid var(--line)}
.comptable tr:last-child td{border-bottom:none}
.cok{color:var(--ok);font-weight:700}
.cno{color:var(--red);font-weight:700}

/* Match strength meter — a small visual bar alongside the existing text
   value (Exact/Strong/Medium/Weak), not a replacement for it. */
.matchmeta-row{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.strengthmeter{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--pill-neutral-bg);overflow:hidden;vertical-align:middle}
.strengthbar{display:block;height:100%;background:var(--ok);border-radius:3px}

/* Type badges — reuse matchCategory()'s own labels, just styled as pills
   instead of plain "Category: X" text. */
.typebadge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--brass);color:var(--green-900)}

/* Resolution / Review sub-tabs — two edit panels for one match, only one
   shown at a time, matching World-Check One's own Resolution/Review split
   (Review Comment is its own field, separate from Resolution Remark). */
.restabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.restabs button{background:none;border:none;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--mut);border-bottom:2px solid transparent}
.restabs button.on{color:var(--accent-text);border-bottom-color:var(--accent-text)}

/* Record-detail sub-tabs — Key Data / Further Information / Aliases /
   Keywords / Connections-Relationships / Sources. Content is only ever
   what's actually stored for the match; tabs with nothing recorded say so
   plainly rather than showing fabricated detail. */
.recorddetail{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rdtabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rdtabs button{background:none;border:none;padding:8px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap}
.rdtabs button.on{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.rdbody{font-size:13px}
.sourcelist{margin:0;padding-left:18px}
.sourcelist li{margin-bottom:4px}
.legalnotice{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--mut);line-height:1.5}

/* Key Findings — collapsible match-status rollup on the Summary tab. */
.keyfindings{padding:0;overflow:hidden}
.kfhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;cursor:pointer}
.kfcaret{color:var(--mut);font-size:11px;transition:transform .15s}
.keyfindings.collapsed .kfcaret{transform:rotate(-90deg)}
.keyfindings.collapsed .kfbody{display:none}
.kfbody{padding:0 18px 18px}
/* FIXED 29 Oct 2026 — Naseer: "make the boxes consistent, height and
   length... same identical". There are always exactly 7 tiles (5 status
   counts + Total Matches + Ongoing Screening). The old flex-wrap layout
   gave each tile flex:1 1 110px and let them wrap — on a container width
   where 6 tiles fit a row but the 7th didn't, that lone 7th tile wrapped
   onto its own row and flex-grow stretched it to fill the FULL row width
   by itself, so "Ongoing Screening" rendered visibly wider/taller than
   the other six. A grid with a fixed column count gives every tile in a
   row the same share of the width, with no lone-item-stretch case. */
.kfrow{display:grid;grid-template-columns:repeat(7,1fr);gap:0;border-top:1px solid var(--line)}
.kfstat{padding:14px 12px 16px;text-align:center;border-right:1px solid var(--line)}
.kfstat:last-child{border-right:none}
.kfnum{font-size:20px;font-weight:700;color:var(--ink)}
.kflabel{font-size:11px;color:var(--mut);margin-top:2px}
@media (max-width:700px){
  .kfrow{grid-template-columns:repeat(2,1fr)}
  .kfstat{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .kfstat:nth-child(2n){border-right:none}
  .kfstat:last-child{border-bottom:none}
}

/* Key Findings tiles as links (added 14 Oct 2026) — Naseer: "i want to
   click on them directly and see it" — each status count (and Total
   Matches) now jumps straight to the World-Check tab's filter+table,
   pre-filtered to just that status (see the ?mf= handling in
   case_detail.php's inline script). Only .kfstat-link gets pointer/hover
   affordances; the plain "Ongoing Screening" tile (not a match count, so
   not filterable) is untouched and stays a plain div. */
.kfstat.kfstat-link{display:block;color:inherit;text-decoration:none;cursor:pointer;border-radius:8px;transition:background .15s ease}
.kfstat.kfstat-link:hover{background:var(--hover-bg);text-decoration:none}
.kfstat.kfstat-link:hover .kfnum{color:var(--brass-dark)}
.kfstat.kfstat-link:hover .kflabel{color:var(--brass-dark)}

/* Prominent "back" links on the per-record review screens (.recordnav's
   left-hand link — "Back to Matches" for the internal analyst, "Back to
   overview" for the Client User) — added 14 Oct 2026, same live-usage
   feedback round as the sticky header: Naseer wanted these a little more
   prominent too, once he saw the header's Back link get the icon+bold
   treatment. These sit on a plain white card, not the dark green band, so
   they use the brass accent + bold weight + icon instead of the header's
   white-on-green styling, but read with the same weight/intent. */
.recordnav .back-link{display:inline-flex;align-items:center;gap:6px;color:var(--brass-dark);font-weight:700;font-size:13.5px;text-decoration:none;padding:6px 4px;border-radius:6px;transition:background .15s ease}
.recordnav .back-link:hover{background:var(--brass-bg);text-decoration:none}
.recordnav .back-link svg{width:13px;height:13px;flex:none}

/* Logo swap — the full-colour mark is designed for light surfaces, the
   reversed cream/gold mark for dark ones. Both images are rendered; CSS
   picks the right one for the active theme (explicit choice, or system
   preference when nothing's been chosen yet). */
.logo-dark{display:none}
[data-theme="dark"] .logo-light{display:none}
[data-theme="dark"] .logo-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}

/* Triage — grouped match resolution (VERISDiligence mockup screen 04).
   "Needs your judgement" (.grp.judge/.risk) is individual review;
   "Can be cleared together" (.grp.clear) is bulk. Ported from the mockup
   pack's shared.css, retextured onto this app's own tokens. */
.bucket{margin-top:8px;margin-bottom:22px}
.bucket .hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:4px;flex-wrap:wrap}
.bucket .hd h2{font-size:16px;margin:0;display:flex;align-items:center;gap:9px}
.bucket .hd .tot{font-size:13px;color:var(--mut)}
.bucket .lead{font-size:12.5px;color:var(--mut);line-height:1.6;margin:0 0 12px}
/* Small colored status dot on each section heading (added 23 Sep 2026, to
   match the same marker now used on the Client User view's sections) —
   purely a heading decoration, scoped to the two internal triage sections
   specifically so it never appears on an unrelated .bucket elsewhere. */
.bucket-judge .hd h2::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--brass)}
.bucket-clear .hd h2::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--ok)}
.grp{border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.grp + .grp{margin-top:12px}
.grp .top{display:flex;gap:16px;align-items:flex-start;padding:15px 17px;flex-wrap:wrap}
.grp .n{flex:none;min-width:74px;text-align:center}
.grp .n b{display:block;font-size:24px;font-weight:700;color:var(--green-900);line-height:1.15}
.grp .n span{font-size:11px;color:var(--mut)}
.grp .body{flex:1 1 260px;min-width:0}
.grp h3{font-size:15px;margin:0 0 4px}
.grp .share{font-size:12.5px;color:var(--mut);line-height:1.6}
.grp .act{flex:none;display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:170px}
.grp .act form{margin:0}
.grp .will{border-top:1px solid var(--line);background:var(--bg);padding:11px 17px;font-size:12px;color:var(--mut);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.grp .will b{color:var(--green-900);font-weight:600}
.grp.judge{border-left:4px solid var(--brass)}
.grp.judge .n b{color:var(--brass-dark)}
.grp.risk{border-left:4px solid var(--red)}
.grp.risk .n b{color:var(--red)}
.grp.clear{border-left:4px solid var(--mut)}
.triagefoot{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}
@media (max-width:820px){ .triagefoot{grid-template-columns:1fr} }
.disclaimer{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:0 8px 8px 0;padding:12px 15px;font-size:12px;line-height:1.65;color:var(--ink)}
.disclaimer strong{color:var(--brass-dark)}
.callout{background:var(--brass-bg);border-radius:10px;padding:12px 14px;color:var(--ink);line-height:1.55;font-size:12px}
.callout strong{color:var(--brass-dark)}

/* Quick "record this match as" strip in the per-record detail view — the
   new 5-option identity vocabulary, deliberately separate from the
   detailed Status/Risk/Reason editor below it (identity vs. risk). */
/* .triagequick (old quick-decision button strip) removed 18 Sep 2026 —
   replaced by .triagecompare's "Compare"/"Your decision" panel above. */

/* Audit trail timeline — replaces the plain table with a vertical feed of
   dot markers (colored by event kind), bold action text, an actor+time
   line, and an optional monospace chip for the real `source` column.
   No structured metadata is invented: every field shown comes straight
   from case_audit_log (timestamp, actioned_by, action, source). */
.tlhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.tlhead h4{margin:0}
.tlfilter{display:flex;gap:6px}
.tlfilter button{font-family:inherit;font-size:12px;font-weight:600;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer}
.tlfilter button:hover{color:var(--ink)}
.tlfilter button.on{border-color:var(--brass);background:var(--brass-bg);color:var(--brass-dark)}
.timeline{position:relative;margin:18px 2px 2px;padding:0;list-style:none}
.timeline:before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 20px 30px}
.timeline li:last-child{padding-bottom:0}
.timeline .dot{position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--card);border:2px solid var(--brass-outline);z-index:1}
.timeline .dot.sys{border-color:var(--mut)}
.timeline .dot.alert{border-color:var(--red)}
.timeline .dot.done{background:var(--brass);border-color:var(--brass)}
.timeline .ev{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.5}
.timeline .when{margin-top:3px;font-size:12px;color:var(--mut);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.timeline .ref{font-family:'SF Mono',Consolas,'Courier New',monospace;font-size:10.5px;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--mut)}

/* Dashboard — four-up operational snapshot cards (global, not scoped to
   the period chips below, since a current backlog shouldn't disappear
   when the period filter changes), each with a real assigned/unassigned
   sub-row where that split is meaningful. */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
@media (max-width:900px){ .grid4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }
.statcard .sub{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.statcard .sub .row{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--mut)}
.statcard .sub .row b{color:var(--ink);font-weight:700;font-family:'Montserrat',sans-serif}

/* "Cases waiting on you" — real cases assigned to the signed-in user that
   still need a decision, not a fabricated queue. */
.waitlist{display:flex;flex-direction:column}
.waititem{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.waititem:last-child{border-bottom:none}
.waititem .wtri{flex:none;font-size:13px;line-height:1.6;margin-top:1px}
.waititem .wtri-brass{color:var(--brass)}
.waititem .wtri-red{color:var(--red)}
.waititem .wcode{font-weight:700;color:var(--ink);text-decoration:none;font-size:13.5px}
.waititem .wcode:hover{color:var(--brass)}
.waititem .wsub{flex:1 1 260px;min-width:0}
.waititem .wname{font-size:13.5px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.waititem .wmeta{font-size:11.5px;color:var(--mut);margin-top:3px}
.waititem .wgo{flex:none;padding:8px 16px;font-size:12.5px}

.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.03em}
.tag.clientmanaged{background:var(--bg);color:var(--mut);border:1px solid var(--line)}
.tag.verisreviewed{background:var(--brass-bg);color:var(--brass-dark);border:1px solid var(--brass-outline)}

.pill.riskhigh{background:var(--red);color:#fff}
.pill.riskmed{background:var(--brass);color:var(--green-900)}
.pill.risklow{background:var(--brass-bg);color:var(--brass-dark)}
.pill.riskna{background:var(--bg);color:var(--mut);border:1px solid var(--line)}

/* Per-record triage view — "Compare" (is this the same person?) beside
   "Your decision" (the 5-option identity vocabulary), replacing the old
   quick-decision button strip and the buried Comparison Data table with
   one panel that actually explains itself, per the mockup's match-review
   screen. Every field shown is real (see the $compareRows comment in
   case_detail.php) — nothing here is a fabricated score. */
.triagecompare{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:18px 0}
@media (max-width:900px){ .triagecompare{grid-template-columns:1fr} }
.tcpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.tclabel{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brass-dark)}
.tcpanel h3{margin:4px 0 8px;font-size:17px}
.comptable2{width:100%;border-collapse:collapse;font-size:13px}
.comptable2 th{text-align:left;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);font-weight:700;padding:0 8px 8px 0;border-bottom:1px solid var(--line)}
.comptable2 td{padding:9px 8px 9px 0;border-bottom:1px solid var(--line);vertical-align:top}
.comptable2 tr:last-child td{border-bottom:none}
.comptable2 td:first-child{color:var(--mut);white-space:nowrap;width:1%}
.cok{color:#1a8446;font-weight:700}
.cno{color:var(--red);font-weight:700}
.cdash{color:var(--mut)}
.tcoptions{display:flex;flex-direction:column;gap:8px}
.tcoption{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;position:relative}
.tcoption input{position:absolute;top:12px;left:12px;margin:0}
.tcoption .tcotitle,.tcoption .tcosub{padding-left:24px}
.tcoption .tcotitle{font-weight:700;font-size:13.5px;color:var(--ink)}
.tcoption .tcosub{font-size:11.5px;color:var(--mut)}
.tcoption.on{border-color:var(--brass);box-shadow:0 0 0 2px rgba(179,144,63,.12)}
.tcoption.on .tcotitle{color:var(--brass-dark)}
.tcoption.tcoption-escalate.on{border-color:var(--red);box-shadow:0 0 0 2px rgba(168,27,46,.12)}
.tcoption.tcoption-escalate.on .tcotitle{color:var(--red)}

/* ---------------------------------------------------------------------- */
/* Simplified Client User World-Check view (added 20 Sep 2026)            */
/* ---------------------------------------------------------------------- */
.mrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mname{font-weight:700;font-size:14.5px}
.mreason{color:var(--mut);font-size:12.5px;margin-top:3px}
.mactions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.mactions form{display:contents}
.detail-toggle{font-size:12px;color:var(--brass-dark);font-weight:600;margin-top:10px;display:inline-block;text-decoration:none}
.detail-toggle:hover{text-decoration:underline}
.feetag{background:var(--brass);color:var(--green-900);font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:1px;display:inline-block}
.clcard{padding:20px 22px}
.clreason{background:var(--brass-bg);color:var(--brass-dark);font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;display:inline-block;margin-bottom:16px}
.cmp2{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px}
.cmpcol{padding:14px 16px}
.cmpcol:first-child{border-right:1px solid var(--line);background:var(--bg)}
.cmpcol h5{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);font-weight:700}
.cmpcol .kv{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--line)}
.cmpcol .kv:last-child{border-bottom:none}
.cmpcol .kv span{color:var(--mut)}
.cmpcol .kv b{font-weight:600}
.cmpcol .kv b.mismatch{color:var(--red)}
.clactions{display:flex;gap:10px;flex-wrap:wrap}
.bconfirm{background:var(--red);color:#fff;border:none;padding:9px 16px;border-radius:6px;font-size:14px;cursor:pointer;font-weight:600}
.bconfirm:hover{filter:brightness(.9)}
/* ---------------------------------------------------------------------- */
/* Client World-Check view — visual refresh (added 23 Sep 2026)           */
/* Naseer: "the look of the above page... more viewable and great." Every */
/* selector below is scoped to a class unique to this client-only         */
/* template (.clsummary/.kfstat-*/.clbucket/.clgroup*) precisely so the   */
/* internal analyst's own World-Check screen — which reuses some of the   */
/* same base class names, e.g. .bucket/.card/.kfrow/.hd/.tot — renders     */
/* completely unchanged. Nothing here touches an un-namespaced selector.  */
/* ---------------------------------------------------------------------- */

/* Stat strip: three elevated tiles instead of one flat joined bar, each
   carrying its own semantic accent color so the overall state of the case
   reads at a glance before scrolling into any list. */
.clsummary{border:none;border-radius:0;overflow:visible;display:flex;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.clsummary .kfstat{flex:1 1 180px;text-align:left;border:1px solid var(--line);border-right:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px 18px 16px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.clsummary .kficon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;margin-bottom:12px}
.clsummary .kfstat-input .kficon{background:var(--brass-bg);color:var(--brass-dark)}
.clsummary .kfstat-team .kficon{background:var(--pill-warn-bg);color:var(--pill-warn-fg)}
.clsummary .kfstat-done .kficon{background:var(--ok-bg);color:var(--ok)}
.clsummary .kfnum{text-align:left;font-size:26px}
.clsummary .kflabel{text-align:left;margin-top:4px;font-size:12.5px}
@media (max-width:700px){.clsummary .kfstat{flex:1 1 45%;border-right:1px solid var(--line);border-bottom:none}}

/* Each of the three sections ("Needs your input" / "With our compliance
   team" / "Reviewed & cleared") becomes its own elevated panel — a small
   colored dot on the heading marks which kind of section it is, and the
   record count moves from plain text into a pill matching the group
   badges below it. */
.clbucket{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02);margin-top:0;margin-bottom:24px}
.clbucket:last-child{margin-bottom:0}
.clbucket .hd{margin-bottom:2px}
.clbucket .hd h2{display:flex;align-items:center;gap:10px}
.clbucket .hd h2::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.clbucket-input .hd h2::before{background:var(--brass)}
.clbucket-team .hd h2::before{background:var(--pill-warn-fg)}
.clbucket-done .hd h2::before{background:var(--ok)}
.clbucket .tot{background:var(--bg);color:var(--mut);font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px}
.clbucket .lead{margin-bottom:18px}
.clbucket > .card{border:none;border-radius:0;padding:15px 0;margin:0;box-shadow:none;border-top:1px solid var(--line)}
.clbucket > .card:first-of-type{border-top:none;padding-top:2px}

/* "Needs your input" sub-groups (added 23 Sep 2026) — clusters matches by
   classification (Sanctions, Alias found, No DOB, etc.) instead of one
   long undifferentiated list, per Naseer's request to "club it" like the
   internal triage screen does. Each group is now its own elevated panel
   with a colored left rule — red for the two risk-carrying buckets
   (sanctions/PEP), brass for everything else — so a glance down the page
   already shows which groups carry a risk listing before reading a word. */
.clgroup{margin-bottom:22px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:14px;padding:20px 22px 6px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02)}
.clgroup:last-child{margin-bottom:0}
.clgroup.clgroup-risk{border-left-color:var(--red)}
.clgroup-hd{display:flex;flex-direction:column;gap:12px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.clgroup-label{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--brass-dark)}
.clgroup.clgroup-risk .clgroup-label{color:var(--red)}
.clgroup-tot{background:var(--brass-bg);color:var(--brass-dark);font-size:12px;font-weight:800;padding:2px 9px;border-radius:9px;letter-spacing:0;text-transform:none}
.clgroup.clgroup-risk .clgroup-tot{background:var(--red-bg);color:var(--red)}
.clgroup-note{line-height:1.5;max-width:640px;margin-top:-2px}
.clgroup .card{margin-bottom:0;border:none;border-radius:0;padding:16px 0;box-shadow:none;border-top:1px solid var(--line)}
.clgroup-cards .card:first-child{border-top:none;padding-top:14px}
/* Per-group bulk actions (added 23 Sep 2026) — one-click versions of the
   per-record buttons, for when a client is confident a whole group (e.g.
   19 sanctions hits) should get the same outcome, without giving up the
   individual buttons on each card below for the one-off exception. */
.clgroup-bulk{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bgroupmini{border:none;padding:8px 16px;border-radius:6px;font-size:12.5px;font-weight:700;cursor:pointer;text-transform:none;letter-spacing:0}
.bprimmini{background:var(--green-900);color:#fff}
.bprimmini:hover{background:var(--green-700)}
.bconfirmmini{background:var(--red);color:#fff}
.bconfirmmini:hover{filter:brightness(.9)}
.bghostmini{background:transparent;border:1px solid var(--line);color:var(--ink)}
.bghostmini:hover{background:var(--hover-bg)}
@media (max-width:520px){.cmp2{grid-template-columns:1fr}.cmpcol:first-child{border-right:none;border-bottom:1px solid var(--line)}.clgroup-bulk{width:100%}.clgroup-bulk form,.clgroup-bulk .clgroup-toggle{flex:1;min-width:120px}.bgroupmini{width:100%}}

/* Client World-Check view — staged resolution flow (added 23 Sep 2026)    */
/* Rebuilt around a guided two-stage wizard per a mockup Naseer's client   */
/* contact Anil asked for ("still want the internal view for client       */
/* resolution as well"), modeled on the internal analyst's own triage     */
/* screen. Everything below is scoped to .clwiz-* or to elements nested   */
/* inside them, so none of it touches the internal analyst's own markup.  */
.clwiz-progress{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 24px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 1px 10px rgba(0,0,0,.02);margin-bottom:22px}
.clwiz-progress-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.clwiz-progress-title{font-size:19px;font-weight:800;color:var(--ink);font-family:'Montserrat',sans-serif}
.clwiz-progress-sub{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.6}
.clwiz-progress-pct{font-size:26px;font-weight:800;color:var(--brass-dark);font-family:'Montserrat',sans-serif}
.clwiz-bar{height:8px;background:var(--bg);border-radius:10px;overflow:hidden;margin:14px 0 10px;border:1px solid var(--line)}
.clwiz-bar span{display:block;height:100%;background:var(--brass);border-radius:10px;transition:width .3s ease}
.clwiz-progress-bottom{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);font-weight:600}
.clwiz-stepno{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--green-900);color:#fff;font-size:11.5px;font-weight:700;margin-right:9px;flex:none}
.clwiz-stage-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.clwiz-stage-act{flex:none;display:flex;flex-direction:column;gap:8px;min-width:170px}
.clwiz-stage-act form{margin:0}
.clwiz-handover{margin-top:4px;margin-bottom:22px;background:var(--brass-bg);border:1px solid var(--brass-outline);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.clwiz-handover .t{font-size:13px;line-height:1.55;color:var(--ink)}
.clwiz-handover form{margin:0}
.clwiz-faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:22px}
.clwiz-faq summary{cursor:pointer;color:var(--accent-text);font-weight:700;font-size:12.5px;list-style:revert}
.clwiz-faq .txt{font-size:12.5px;color:var(--mut);line-height:1.65;margin-top:10px}

/* Individual record review screen */
.clwiz-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;margin-top:16px}
.clwiz-card{margin-top:0;margin-bottom:16px;padding:0}
.clwiz-card:last-child{margin-bottom:0}
.clwiz-sticky{position:sticky;top:18px}
.cardhd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.cardhd h2{font-size:15px;color:var(--ink);margin:0}
.cardbody{padding:18px}
.clwiz-card .cmp2{margin:0;border:none;border-radius:0}
.clwiz-card .cmp2 .cmpcol{padding:18px}
.pill.status{border:1px solid var(--brass-outline);background:var(--brass-bg);color:var(--brass-dark);white-space:nowrap}
.audit{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.auditbox{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
.auditbox b{display:block;font-size:11.5px;color:var(--accent-text);margin-bottom:3px}
.auditbox span{font-size:12px;color:var(--mut)}
.signalrow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)}
.signalrow:first-child{border-top:none;padding-top:0}
.signalrow .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);margin-top:4px;flex:none}
.signalrow .dot.warn{background:var(--brass)}
.signalrow b{font-size:13px;color:var(--ink)}
.signalrow span{display:block;color:var(--mut);font-size:12px;margin-top:3px;line-height:1.5}

.choice{border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-top:9px;background:var(--card);cursor:pointer;transition:border-color .12s ease,background .12s ease}
.choice:first-child{margin-top:0}
.choice:hover{border-color:var(--brass-outline)}
.choice.selected{border:2px solid var(--brass);background:var(--brass-bg);padding:12px 13px}
.choice strong{display:block;color:var(--accent-text);font-size:13px}
.choice span{display:block;color:var(--mut);font-size:12px;line-height:1.5;margin-top:4px}
.choice.clwiz-choice-team{border-color:var(--brass-outline)}
.clwiz-notes-label{display:block;font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;margin:16px 0 6px}
#clReviewForm textarea{width:100%;min-height:78px;border:1px solid var(--line);border-radius:8px;padding:10px 11px;font-size:13px;font-family:inherit;resize:vertical;background:var(--card);color:var(--ink)}
.clwiz-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.clwiz-bottom button:disabled{opacity:.5;cursor:not-allowed}

/* "Resolve group" confirm modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,24,12,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:60}
.modal{width:min(480px,100%);padding:22px}
.modal h2{font-size:17px;color:var(--ink);margin:0 0 6px}
.dl{display:grid;grid-template-columns:110px 1fr;gap:9px 12px;margin-top:12px}
.dl .label{font-size:12px;color:var(--mut)}
.dl .value{font-size:13px;font-weight:700;color:var(--ink)}
.clwiz-modal-notice{margin-top:14px;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--mut);line-height:1.55}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

@media (max-width:900px){.clwiz-grid{grid-template-columns:1fr}.clwiz-sticky{position:static}}
@media (max-width:600px){.clwiz-progress-top{align-items:flex-start}.clwiz-stage-hd{flex-direction:column}.clwiz-stage-act{width:100%}.clwiz-stage-act .bbrass,.clwiz-stage-act a{width:100%}.audit{grid-template-columns:1fr}.clwiz-handover{flex-direction:column;align-items:flex-start}}

/* "Resolve options" interstitial (added 24 Sep 2026) */
.clresolve-hd{margin-bottom:6px}
.clresolve-hd h2{font-size:19px;margin:0 0 6px}
.clresolve-hd .lead{font-size:13px;color:var(--mut);line-height:1.6;margin:0}
.clresolve-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.clresolve-card{display:flex;flex-direction:column}
.clresolve-recommended{border-color:var(--brass);border-width:1.5px}
.clresolve-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.clresolve-attn{background:var(--brass);color:var(--green-900);font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;margin-left:8px;vertical-align:1px;letter-spacing:.03em}
.clresolve-card h2{font-size:18px;margin:4px 0 10px}
.clresolve-kpi{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.4}
.clresolve-kpi .mut{display:block;font-size:11.5px;font-weight:400;margin-top:3px;line-height:1.5}
.clresolve-list{list-style:none;margin:0 0 12px;padding:0;font-size:12.5px;color:var(--ink);line-height:1.6}
.clresolve-list li{margin-bottom:9px}
.clresolve-list b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--accent-text);margin-bottom:2px}
@media (max-width:900px){.clresolve-options{grid-template-columns:1fr}}