/* ClientChaser cockpit — UPDATE-1 design system (Talha's mockups, 2026-08-05).
   Colour tokens are read off his Case-Progress mockup: deep navy sidebar,
   bright royal blue primary, very light cool-grey page, white rounded cards
   with a soft shadow, pastel stat tiles. Every pre-existing selector is kept
   so no template breaks; new components are added below them. */
:root{
  /* surfaces */
  --bg:#f5f7fb; --panel:#ffffff; --ink:#0f1e35; --muted:#64748b; --line:#e5eaf1;
  --line-soft:#eef2f7;
  /* brand */
  --navy:#0a1b4a; --navy2:#071033; --navy3:#122a63;
  --blue:#1a6dff; --blue2:#1355cc; --blue-bg:#e8f0ff;
  /* status */
  --green:#16a34a; --green-bg:#e7f7ee; --amber:#b45309; --amber-bg:#fdf3dc;
  --red:#e0324b; --red-bg:#fdecef; --orange:#f59e0b; --orange-bg:#fff3e0;
  --slate:#475569; --slate-bg:#eef2f6;
  /* shape */
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(16,32,64,.06), 0 6px 18px rgba(16,32,64,.05);
  --shadow-lg:0 10px 30px rgba(16,32,64,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.55 "Segoe UI",system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue2)}
h1{font-size:27px;margin:0 0 4px;letter-spacing:-.3px}
h2{font-size:19px;margin:26px 0 10px;letter-spacing:-.2px}
h3{font-size:15.5px;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 18px}
.muted{color:var(--muted)} .empty{color:var(--muted);padding:18px;text-align:center}

/* page head — icon tile + title + right-hand action (mockup pattern) */
.page-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.page-head .ico{width:52px;height:52px;border-radius:var(--r);background:var(--blue-bg);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}
.page-head .ht{flex:1 1 260px;min-width:0}
.page-head h1{margin:0}
.page-head .sub{margin:2px 0 0}
.page-head .head-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}

/* pilot hardening */
.next-hint{background:var(--blue-bg);border:1px solid #cfe0ff;color:#123a7a;
  border-radius:var(--r);padding:12px 15px;margin:0 0 16px;font-size:14.5px}
.issue-fab{position:fixed;right:18px;bottom:18px;background:var(--red);color:#fff;
  padding:11px 18px;border-radius:999px;font-weight:700;text-decoration:none;
  box-shadow:0 6px 18px rgba(224,50,75,.35);z-index:50;font-size:13.5px}
.issue-fab:hover{background:#c02440}
.app-foot{margin-top:34px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);font-size:12.5px}
.quickbar{margin:6px 0 14px}

/* pilot banner */
.pilot-banner{background:#fff8e6;color:#7a5200;border-bottom:1px solid #f0e0b0;
  padding:9px 18px;font-size:13.5px;text-align:center}

/* layout */
.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.content{padding:26px 30px;max-width:1320px}
.content.bare{max-width:none;padding:0}

/* sidebar */
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%);
  color:#dce7f2;display:flex;flex-direction:column;
  padding:20px 14px;gap:14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.2px;padding:0 8px}
.brand span{color:#5b9dff} .brand.big{font-size:30px}
h1 .h-pilot{color:var(--muted);font-weight:600;font-size:19px}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{color:#c2d2e8;text-decoration:none;padding:9px 12px;border-radius:10px;
  font-weight:600}
.sidebar nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-sep{height:1px;background:rgba(255,255,255,.13);margin:10px 8px}
/* CHASE CENTER V1 (Talha 08-07) - ADDITIVE only, two new classes, no existing
   rule touched. .nav-badge = the drafts-waiting count in the sidebar;
   .pick = one tickable/choosable row in the guided flow. */
.nav-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;
  background:#5b9dff;color:#08203f;font-size:11.5px;font-weight:800;text-align:center}
.pick{display:block;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:9px 11px;margin:6px 0;cursor:pointer}
.pick:hover{background:#f8fafc}
.pick small{display:block;color:var(--muted);font-size:12.5px}
.firm-switch{background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:8px}
.firm-switch label{font-size:11px;text-transform:uppercase;color:#8fa8bf;font-weight:700}
.firm-switch a{display:block;color:#c7d6e5;text-decoration:none;padding:5px 7px;
  border-radius:6px;font-size:13px}
.firm-switch a.on{background:#fff;color:var(--navy);font-weight:700}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;font-size:12.5px}
.safety{background:rgba(22,163,74,.16);color:#b7ecc9;padding:10px;border-radius:var(--r-sm);
  line-height:1.4}
.who{color:#9fb4c7;background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:10px}
.logout{color:#9fb4c7}

/* KPI cards + pastel stat tiles */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:14px 0 6px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;border-top:3px solid var(--slate);box-shadow:var(--shadow)}
.kpi b{display:block;font-size:27px;line-height:1.1}
.kpi span{color:var(--muted);font-size:12.5px}
.kpi.urgent{border-top-color:var(--red)} .kpi.approve{border-top-color:var(--blue)}
.kpi.review{border-top-color:var(--orange)} .kpi.warn{border-top-color:var(--amber)}

/* stat tiles (mockup): soft tint + matching icon and number */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 18px}
.tile{border-radius:var(--r);padding:15px;border:1px solid var(--line);
  background:var(--panel);box-shadow:var(--shadow);text-decoration:none;color:inherit;
  display:block}
.tile .t-top{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.tile .t-num{display:block;font-size:30px;font-weight:800;line-height:1.2;margin:8px 0 2px}
.tile .t-go{font-size:12.5px;font-weight:700}
.tile:hover{box-shadow:var(--shadow-lg)}
.tile.t-urgent{background:#fef4f6;border-color:#f8d6dd}
.tile.t-urgent .t-num,.tile.t-urgent .t-top,.tile.t-urgent .t-go{color:var(--red)}
.tile.t-review{background:#fff8ed;border-color:#fae3c2}
.tile.t-review .t-num,.tile.t-review .t-top,.tile.t-review .t-go{color:#c2620a}
.tile.t-approve{background:#eff5ff;border-color:#d3e2fd}
.tile.t-approve .t-num,.tile.t-approve .t-top,.tile.t-approve .t-go{color:var(--blue)}
.tile.t-chase{background:#fffaeb;border-color:#f7e5b8}
.tile.t-chase .t-num,.tile.t-chase .t-top,.tile.t-chase .t-go{color:var(--amber)}
.tile.t-wait{background:#f6f8fa;border-color:#e3e9f0}
.tile.t-wait .t-num,.tile.t-wait .t-top,.tile.t-wait .t-go{color:var(--slate)}
.tile.t-done{background:#f0faf4;border-color:#cfeddc}
.tile.t-done .t-num,.tile.t-done .t-top,.tile.t-done .t-go{color:var(--green)}
.tile .t-sub{color:var(--muted);font-size:12.5px;font-weight:600}

/* stage-flow strip (Case Progress) */
.stageflow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 10px;margin:0 0 18px}
.stage{padding:0 12px;text-align:center;position:relative;border-right:1px solid var(--line-soft)}
.stage:last-child{border-right:0}
.stage .s-ico{width:44px;height:44px;border-radius:50%;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--slate-bg)}
.stage b{display:block;font-size:14px}
.stage p{color:var(--muted);font-size:12.5px;margin:6px 0 10px;line-height:1.45}
.stage .s-bar{height:3px;border-radius:99px;background:var(--slate);opacity:.85}
.stage.s-urgent .s-ico{background:var(--red-bg)} .stage.s-urgent .s-bar{background:var(--red)}
.stage.s-review .s-ico{background:var(--orange-bg)} .stage.s-review .s-bar{background:var(--orange)}
.stage.s-approve .s-ico{background:var(--blue-bg)} .stage.s-approve .s-bar{background:var(--blue)}
.stage.s-chase .s-ico{background:var(--amber-bg)} .stage.s-chase .s-bar{background:var(--amber)}
.stage.s-wait .s-ico{background:var(--slate-bg)} .stage.s-wait .s-bar{background:var(--slate)}
.stage.s-done .s-ico{background:var(--green-bg)} .stage.s-done .s-bar{background:var(--green)}

/* kanban columns (pipeline variant) */
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 18px}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;box-shadow:var(--shadow)}
.col-head{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-weight:700;font-size:13px;margin-bottom:10px}
.col-head .n{background:var(--slate-bg);border-radius:8px;padding:1px 8px;font-size:12.5px}
.mini{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;margin:0 0 8px;
  display:block;text-decoration:none;color:inherit;background:#fff}
.mini:hover{border-color:#c9d8ef;box-shadow:var(--shadow)}
.mini b{display:block;font-size:13.5px}
.mini small{color:var(--muted)}
.col-empty{border:1px dashed var(--line);border-radius:var(--r-sm);padding:22px 10px;
  text-align:center;color:var(--muted);font-size:12.5px}
.col-empty b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}

/* tables + cards */
table{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:8px 0 4px;
  box-shadow:var(--shadow)}
th,td{text-align:left;vertical-align:top;padding:11px 13px;border-bottom:1px solid var(--line-soft)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  background:#fafbfd}
tr:last-child td{border-bottom:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin:0 0 14px;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap}
ul.plain{list-style:none;margin:6px 0 14px;padding:0}
ul.plain li{padding:6px 0;border-bottom:1px dashed var(--line)}
pre.notes{white-space:pre-wrap;font:inherit;margin:0}
code{background:var(--slate-bg);padding:2px 5px;border-radius:4px;font-size:12.5px}

/* tip / help boxes (mockup bottom row) */
.tipgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0}
.tipbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);display:flex;gap:13px;align-items:flex-start}
.tipbox .ico{width:42px;height:42px;border-radius:50%;background:var(--blue-bg);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.tipbox b{display:block;margin-bottom:3px}
.tipbox p{margin:0;color:var(--muted);font-size:13.5px}
.tipbox .t-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* explainer / callout strip */
.callout{background:var(--blue-bg);border:1px solid #cfe0ff;border-radius:var(--r);
  padding:14px 16px;margin:0 0 16px;color:#123a7a}
.callout b{color:#0f2f66}
.callout.warn{background:var(--amber-bg);border-color:#f0dfb3;color:#7a5200}
.callout.warn b{color:#7a5200}
.callout.plain{background:#f8fafc;border-color:var(--line);color:var(--slate)}

/* badges + dots + meter */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;
  font-weight:700;white-space:nowrap}
.b-urgent{color:var(--red);background:var(--red-bg)}
.b-review{color:#c2620a;background:var(--orange-bg)}
.b-approve{color:var(--blue);background:var(--blue-bg)}
.b-chase{color:var(--amber);background:var(--amber-bg)}
.b-wait{color:var(--slate);background:var(--slate-bg)}
.b-done{color:var(--green);background:var(--green-bg)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.dot.ok{background:var(--green)} .dot.bad{background:var(--red)}
.meter{background:var(--slate-bg);border-radius:99px;height:8px;min-width:90px;
  overflow:hidden;margin:4px 0}
.meter i{display:block;height:100%;background:var(--blue);border-radius:99px}
.health{font-size:12.5px;line-height:1.7}

/* forms + buttons */
label{display:block;font-weight:600;font-size:13px;margin:10px 0}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:10px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,109,255,.14)}
textarea{resize:vertical}
.chk{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.chk input{width:auto;display:inline;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:0 17px;border-radius:var(--r-sm);border:1px solid #cddcf5;
  background:#fff;color:var(--blue2);font-weight:700;font-size:14px;cursor:pointer;
  text-decoration:none}
.btn:hover{background:#f2f7ff}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 3px 10px rgba(26,109,255,.28)}
.btn.primary:hover{background:var(--blue2)}
.btn.danger{border-color:#f3c4cd;color:var(--red)} .btn.danger:hover{background:var(--red-bg)}
.btn.ghost{border-color:var(--line);color:var(--slate)}
.btn.small{min-height:32px;padding:0 12px;font-size:12.5px}
.btn.wide{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions form{display:inline-flex;gap:6px;align-items:center;margin:2px 0}
.actions input,.actions select{width:auto;display:inline-block;margin:0;padding:6px 8px}
/* UPDATE-2 S3: the quarantine decision cell is a stacked FORM, not a row of
   inline buttons — inside a flex `.actions` cell it was being squeezed into
   finger-width columns (caught on the generated manual screenshot). */
.actions .q-pick,.actions .q-secondary{flex:1 0 100%;display:block;width:100%}
.actions .q-pick label{display:block;width:100%;margin:6px 0 2px}
.actions .q-pick input,.actions .q-pick select{width:100%;display:block}
.actions .q-pick button{margin:6px 6px 0 0}
.actions .q-secondary form{display:inline-flex}
/* UX FIX PACK G (Talha 08-08). MEASURED at 1366x768 BEFORE this rule: the
   quarantine table gave FILE / FROM / WHY IT'S HERE / STATUS the width and
   left the decision cell a sliver, so "File to this client" wrapped to two
   lines, "Link to this client only, decide later" wrapped to two, and "Ask
   client to clarify" sat below the fold. The decision is the ONLY thing that
   page exists for, so it gets the width and the descriptive columns give it
   up. Numbers before/after: scripts/measure_quarantine_layout.py.
   ⚖ Layout only — no row, no action and no route changed.
   ⚠ EVERY RULE IS SCOPED TO `.q-board`. The first draft of this used
   `table th:last-child` and `table td:first-child`, which would have quietly
   re-laid-out every other table in the product — clients, drafts, uploads —
   to fix one page. Scoped instead. */
table.q-board{table-layout:fixed;width:100%}
table.q-board td.q-decide,table.q-board th.q-decide-h{width:42%;min-width:300px}
table.q-board td.q-decide .btn{white-space:nowrap}
table.q-board td.q-decide .q-secondary{margin-top:10px;padding-top:8px;
  border-top:1px solid var(--line)}
/* the descriptive columns stop competing: they wrap instead of pushing.
   ⚠ CAUGHT BY EYE, ⛔ NOT by the first version of the measurement script, and
   the gap is the lesson: giving the decision column 42% squeezed "Why it's
   here" until the reason badge OVERFLOWED its cell and collided with Status
   ("Needs review: we co… ead this file"). It got worse precisely because the
   plain wording from issue I is LONGER than the machine phrase it replaced,
   so fixing H made G's first draft fail. Every column now has a stated width,
   and the badge WRAPS instead of clipping. The script gates cell overflow now
   too — a check that only measured buttons could never have seen this. */
table.q-board td,table.q-board th{word-break:break-word;vertical-align:top}
table.q-board td:nth-child(1),table.q-board th:nth-child(1){width:17%}
table.q-board td:nth-child(2),table.q-board th:nth-child(2){width:12%}
table.q-board td:nth-child(3),table.q-board th:nth-child(3){width:19%}
table.q-board td:nth-child(4),table.q-board th:nth-child(4){width:10%}
table.q-board td .badge{white-space:normal;max-width:100%;line-height:1.4}
/* the suggestion button carries CLIENT DATA, so it is a stacked block by
   design: the ACTION on its own line, the document + confidence beneath it.
   It used to be one long sentence that wrapped five ways. */
table.q-board td.q-decide .btn.q-cand{display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;width:100%;height:auto;min-height:0;
  padding:8px 12px;text-align:left;white-space:normal}
.q-cand-act{font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
.q-cand-sub{font-size:11.5px;opacity:.8;line-height:1.35}
@media (max-width:1100px){
  table.q-board{table-layout:auto}
  table.q-board td.q-decide,table.q-board th.q-decide-h{width:auto;min-width:0}
}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin:0 0 14px;
  box-shadow:var(--shadow)}
.filters input[type=search],.filters select{width:auto;margin:0}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;max-width:520px;box-shadow:var(--shadow)}
.hint{margin-top:14px;color:var(--muted);font-size:13px}
.flash{position:sticky;top:10px;z-index:9;background:#0b3b2a;color:#d9f2e4;
  border-radius:var(--r);padding:2px 16px;margin-bottom:14px}
.safety-inline{font-size:12px;color:var(--green);background:var(--green-bg);
  padding:4px 10px;border-radius:999px;font-weight:700;white-space:nowrap}
.draft-card textarea{font-family:Consolas,monospace;font-size:13px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);
  margin:14px 0 16px}
.tabs a{padding:9px 15px;text-decoration:none;color:var(--muted);font-weight:700;
  border-radius:10px 10px 0 0}
.tabs a.on{color:var(--blue);background:var(--panel);border:1px solid var(--line);
  border-bottom:2px solid var(--panel);margin-bottom:-2px}

/* wizard steps (add client) */
.wiz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;margin:0 0 16px}
.wiz .step{display:flex;gap:11px;align-items:center;padding:15px 16px;
  border-right:1px solid var(--line-soft)}
.wiz .step:last-child{border-right:0}
.wiz .step .n{width:32px;height:32px;border-radius:50%;flex:0 0 auto;background:var(--slate-bg);
  color:var(--slate);display:flex;align-items:center;justify-content:center;font-weight:800}
.wiz .step b{display:block;font-size:13.5px}
.wiz .step small{color:var(--muted)}
.wiz .step.on{box-shadow:inset 0 -3px 0 var(--blue)}
.wiz .step.on .n{background:var(--blue);color:#fff}
.wiz .step.done .n{background:var(--green-bg);color:var(--green)}
.split{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.steps-list{list-style:none;margin:0;padding:0}
.steps-list li{display:flex;gap:12px;padding:0 0 16px;position:relative}
.steps-list li .ico{width:38px;height:38px;border-radius:var(--r-sm);background:var(--blue-bg);
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:17px}
.steps-list li b{display:block;font-size:13.5px}
.steps-list li p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* CHASE WORKBENCH REV3 (Talha 08-07) — ADDITIVE ONLY. New class names, so
   ⛔ no existing rule is rewritten and ⛔ nothing else on the site moves.
   Reuses the existing tokens (--panel/--line/--r/--blue/--muted) rather than
   introducing a second palette. */
.chase-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px}
.chase-strip-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow)}
.chase-strip-item:hover{border-color:var(--blue)}
.chase-strip-item b{display:block;font-size:22px;line-height:1.1}
.chase-strip-item span{color:var(--muted);font-size:12.5px}
.chase-strip-item.hot b{color:var(--amber)}
.chase-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:16px;align-items:start}
.chase-find{display:flex;gap:8px;margin:0 0 8px}
.chase-find input{flex:1 1 auto;min-width:0}
.chase-count{margin:0 0 10px;font-size:12.5px}
.chase-row{display:block;background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:var(--r);padding:11px 13px;
  margin:0 0 8px;text-decoration:none;color:inherit}
.chase-row:hover{border-color:var(--blue)}
.chase-row.on{border-left-color:var(--blue);background:var(--blue-bg)}
.chase-row .cr-top{display:flex;gap:8px;align-items:center;justify-content:space-between}
.chase-row .cr-mid{display:block;color:var(--muted);font-size:12.5px;margin:3px 0}
.chase-row .cr-bot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px}
/* measured in the cold walk: the detail pane's headings sat flush against the
   button row above them and read as one block. Scoped to the new pane, so
   ⛔ no existing h3 rule anywhere else is touched. */
.chase-detail h3{margin-top:18px}
.chase-detail .row-head h3{margin-top:0}
.chase-detail pre.notes{white-space:pre-wrap;word-break:break-all}
@media (max-width:900px){
  .chase-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chase-split{grid-template-columns:1fr}
}

/* accordion (help guide sections) */
details.acc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:0;margin:0 0 10px;box-shadow:var(--shadow);overflow:hidden}
details.acc>summary{cursor:pointer;padding:15px 18px;font-weight:700;list-style:none;
  display:flex;align-items:center;gap:10px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"▾";margin-left:auto;color:var(--muted)}
details.acc[open]>summary{border-bottom:1px solid var(--line-soft)}
details.acc[open]>summary::after{content:"▴"}
details.acc>summary:hover{background:#f8fafd}
details.acc .acc-body{padding:16px 18px}
.acc-num{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  flex:0 0 auto}

/* annotated screenshot steps (visual guide) */
.shot{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin:8px 0 4px;
  background:#fbfcfe}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:9px 12px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line-soft)}
.guide-step{display:flex;gap:12px;margin:0 0 18px}
.guide-step .body{flex:1 1 auto;min-width:0}
.guide-step b{display:block}
.guide-step p{margin:3px 0 0;color:var(--slate);font-size:13.5px}

/* password rule list */
.rules{list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--slate)}
.rules li{padding:3px 0}
.rules li::before{content:"•";color:var(--blue);font-weight:800;margin-right:8px}

/* login */
.login-box{max-width:410px;margin:7vh auto;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:32px;box-shadow:var(--shadow-lg)}
.tagline{color:var(--muted)}
.demo-accounts{margin-top:18px;font-size:12.5px;color:var(--muted);
  background:var(--slate-bg);border-radius:var(--r-sm);padding:4px 14px}
.demo-accounts ul{margin:6px 0;padding-left:16px}

/* client portal (mobile-first) */
.portal{max-width:480px;margin:0 auto;padding:18px}
.portal header{margin-bottom:14px}
.portal .brand{color:var(--navy);font-size:22px;padding:0}
.p-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin:8px 0;box-shadow:var(--shadow)}
.p-card.done{background:var(--green-bg);border-color:#bfe3cd}
.p-card .late{color:var(--red);font-weight:700}
.portal footer{margin-top:20px;font-size:13px}

/* ---- UPDATE-2B: shared filter bar + the panels A/C/D/F fold things into ----
   ⚖ Built ON TOP of the existing `details.acc` accordion (above) rather than a
   second collapsible look, and it adds NO theme token: every colour here is one
   of the variables already defined at the top of this file. */
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin:0 0 12px;box-shadow:var(--shadow)}
.filter-bar label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.filter-bar label span{white-space:nowrap}
.filter-bar input,.filter-bar select{padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:13.5px;background:#fff;min-width:140px}
.filter-bar .fb-q input{min-width:210px}
.filter-bar .fb-note{margin-left:auto;color:var(--muted);font-size:12.5px;
  font-weight:600;align-self:center}
.filter-group{margin:0 0 10px}
.filter-group>summary{cursor:pointer;font-weight:700;padding:9px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.filter-group>summary:hover{background:#f8fafd}
.filter-group[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* A: one panel per firm on /admin */
.firm-row>summary{flex-wrap:wrap}
.firm-row .health-inline{display:inline-flex;gap:4px;align-items:center}
.firm-row.acted{outline:2px solid var(--blue);outline-offset:1px}
/* the in-row result message must sit WHERE IT HAPPENED, so it drops the
   page-level flash's sticky behaviour */
.firm-panel .flash{position:static;margin:0 0 12px}
.firm-panel h3{margin:16px 0 6px;font-size:14px}
.firm-panel h3:first-child{margin-top:0}
.timeline{margin:0;padding-left:18px;font-size:13.5px;line-height:1.6}
.timeline li{margin:0 0 3px}
.firm-actions form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;
  padding:10px 0;border-top:1px solid var(--line-soft)}
.firm-actions label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;
  font-weight:700;color:var(--muted)}
.firm-actions input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:13.5px;min-width:260px}
.firm-actions .muted{font-size:12.5px}
/* D: one panel per client on Inbox updates */
.client-group>summary .cg-count{margin-left:auto;color:var(--muted);font-weight:600;
  font-size:12.5px}
.cg-latest{display:block;width:100%;color:var(--muted);font-weight:600;
  font-size:12.5px;margin-top:2px}

/* responsive */
@media(max-width:1180px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stageflow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
  .stage:nth-child(3n){border-right:0}
  .board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wiz{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid2,.tipgrid,.split{grid-template-columns:1fr}
}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:column}
  .content{padding:16px}
  .kpis,.tiles,.board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stageflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{border-right:0}
  .wiz{grid-template-columns:1fr}
  table{display:block;overflow-x:auto}
}