/* ============================================================================
   Pinnacle Investigations — the client onboarding desk
   Their logo is a self-contained navy tile, so it sits anywhere. The rail takes
   the logo's own ground colour and the workspace stays light — a dense,
   document-weight shell, because this is compliance work and the record is the
   product.

   CONVENTIONS
   - State modifiers are always `is-` prefixed, never a bare state word.
   - Component modifiers are namespaced to their component.
   - Inline SVG has a global size default; anything that needs to be big says so.
   - Uniform grids use grid-template-columns / table-layout: fixed, never auto.
   ========================================================================== */

:root {
  /* sampled from their own logo file */
  --navy:     #046BD2;
  --navy-dk:  #0356A8;
  --navy-sf:  #EAF2FC;
  --navy-tx:  #05529E;
  --deep:     #0B263B;
  --sky:      #49AAE1;
  --grey:     #64748B;
  --ink:      #10202E;

  /* cool industrial neutrals */
  --page:     #EFF3F7;
  --rail:     #0B263B;
  --surface:  #FFFFFF;
  --sunk:     #F6F7FA;
  --line:     #DCE3EB;
  --line-soft:#E9EEF4;

  --ink-2:    #39424C;
  --muted:    #6B7682;
  --faint:    #98A2AE;

  --good:     #1B6B45;
  --good-sf:  #E7F3ED;
  --warn:     #96601A;
  --warn-sf:  #FCF2E2;
  --bad:      #B3241C;
  --bad-sf:   #FCEDEC;
  --steel:    #3C556B;
  --steel-sf: #EEF0F4;

  --r-sm: 4px; --r: 7px; --r-lg: 11px;
  --sh-1: 0 1px 2px rgba(15,18,21,.05);
  --sh-2: 0 2px 8px rgba(15,18,21,.07), 0 1px 2px rgba(15,18,21,.05);
  --sh-3: 0 14px 34px rgba(15,18,21,.17);

  --rail-w: 15rem;
  --rail-w-collapsed: 4.25rem;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* Inline SVG with no width/height attribute expands to fill its container — a
   1500px icon, no console error. Global default, overridden per component. */
svg { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.chip svg { width: 12.5px; height: 12.5px; vertical-align: -2px; }
.icon-btn svg, .rail-toggle svg { width: 18px; height: 18px; }
.bolt svg { width: 14px; height: 14px; }
.cmdk svg { width: 15px; height: 15px; }
.pick svg, .bench-wait svg { width: 14px; height: 14px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r-sm); }

.tag { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ================================================================== banner */
.synthetic {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 18px; background: var(--ink); color: #D5D9DE; font-size: 11.5px;
}
.synthetic b { color: #E8635C; font-weight: 700; }
.synthetic span { color: #8A929B; }

/* =================================================================== shell */
.app { display: flex; height: calc(100vh - 33px); overflow: hidden; }

.rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--rail); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .16s ease, flex-basis .16s ease;
}
.app.is-collapsed .rail { width: var(--rail-w-collapsed); flex-basis: var(--rail-w-collapsed); }
.rail-head { padding: 15px 13px 13px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
/* The wordmark is black ink on transparency. It needs a light surface, so it sits
   directly on the rail with no plate — the inverse of a knockout mark. */
.crest { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.crest img { display: block; width: 100%; height: auto; max-height: 44px; object-fit: contain; object-position: left center; }
.app.is-collapsed .crest img { max-height: 26px; }
.rail-toggle { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--muted); }
.rail-toggle:hover { background: var(--sunk); color: var(--ink); }
.app.is-collapsed .rail-toggle { display: none; }

.rail-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 8px 22px; }
.rail-nav::-webkit-scrollbar { width: 8px; }
.rail-nav::-webkit-scrollbar-thumb { background: #D3D9E0; border-radius: 8px; }

.nav-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: var(--r); margin-bottom: 1px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500; position: relative; text-align: left;
}
.nav-row svg { flex: 0 0 18px; width: 18px; height: 18px; stroke-width: 1.7; opacity: .74; }
.nav-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row:hover { background: var(--sunk); color: var(--ink); }
.nav-row.is-current { background: var(--ink); color: #fff; font-weight: 620; }
.nav-row.is-current svg { opacity: 1; }
.nav-row.is-ancestor { color: var(--ink); font-weight: 600; }
.nav-row.is-ancestor svg { opacity: 1; color: var(--navy); }
.nav-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--navy); color: #fff; }
.nav-row.is-current .nav-count { background: #fff; color: var(--ink); }

.nav-kids { padding-left: 16px; margin: 1px 0 4px; position: relative; }
.nav-kids::before { content: ""; position: absolute; left: 18px; top: 2px; bottom: 6px; width: 1px; background: var(--line); }
.nav-kid { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 9px 5px 16px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted); text-align: left; }
.nav-kid:hover { background: var(--sunk); color: var(--ink-2); }
.nav-kid.is-current { color: var(--navy-dk); font-weight: 650; background: var(--navy-sf); }
.nav-kid em { font-style: normal; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--navy); }

.nav-divider { margin: 16px 4px 8px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-divider hr { flex: 1 1 auto; border: 0; border-top: 1px solid var(--line); margin: 0; min-width: 6px; }
.nav-divider .tag { color: var(--navy); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; letter-spacing: .09em; }
.app.is-collapsed .nav-divider .tag, .app.is-collapsed .nav-row span,
.app.is-collapsed .nav-count, .app.is-collapsed .nav-kids { display: none; }
.app.is-collapsed .nav-row { justify-content: center; padding: 8px; }

.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.topbar { flex: 0 0 auto; height: 56px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }
.topbar-title h1 { margin: 0; font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.topbar-title p { margin: 0; font-size: 11.5px; color: var(--muted); }
.topbar-spacer { flex: 1 1 auto; }
.cmdk { display: flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 200px; border: 1px solid var(--line); border-radius: var(--r); background: var(--page); color: var(--faint); font-size: 12.5px; }
.cmdk kbd { margin-left: auto; font: 600 10px var(--mono); padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: var(--r-sm); flex: 0 0 32px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.icon-btn { width: 32px; height: 32px; border-radius: var(--r); display: grid; place-items: center; color: var(--muted); }
.icon-btn:hover { background: var(--sunk); color: var(--ink); }

.page { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 20px 20px 64px; }
.page-wrap { max-width: 1380px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* ============================================================== primitives */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.panel-h { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; }
.panel-h h2 { margin: 0; font-size: 13.5px; font-weight: 660; }
.panel-h p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.panel-h .grow { flex: 1 1 auto; }
.panel-b { padding: 16px; }
.panel-b.is-flush { padding: 0; }
.sect-h { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 -4px; flex-wrap: wrap; }
.sect-h h2 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.015em; }
.sect-h p { margin: 0; font-size: 12.5px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: var(--sh-1); }
.btn:hover { background: var(--sunk); color: var(--ink); }
.btn svg { width: 15px; height: 15px; }
.btn.is-primary { background: var(--navy); border-color: var(--navy-dk); color: #fff; }
.btn.is-primary:hover { background: var(--navy-dk); color: #fff; }
.btn.is-ghost { background: none; border-color: transparent; box-shadow: none; }
.btn.is-ghost:hover { background: var(--sunk); }
.btn.is-sm { padding: 4px 9px; font-size: 11.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-sm); font-size: 11px; font-weight: 650; white-space: nowrap; background: var(--sunk); color: var(--ink-2); border: 1px solid var(--line-soft); }
.chip.is-good { background: var(--good-sf); color: var(--good); border-color: #C6E2D4; }
.chip.is-warn { background: var(--warn-sf); color: var(--warn); border-color: #EFDCBB; }
.chip.is-bad  { background: var(--bad-sf);  color: var(--bad);  border-color: #D6D6EC; }
.chip.is-steel{ background: var(--steel-sf);color: var(--steel);border-color: #C9DDEC; }

.dot { width: 7px; height: 7px; border-radius: 999px; background: var(--faint); flex: 0 0 7px; }
.dot.is-live { background: var(--good); box-shadow: 0 0 0 3px var(--good-sf); }
.dot.is-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-sf); }
.dot.is-bad  { background: var(--bad);  box-shadow: 0 0 0 3px var(--bad-sf); }

/* one bordered band, never a row of KPI cards */
.band { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.band-i { padding: 13px 18px; border-right: 1px solid var(--line-soft); min-width: 0; }
.band-i:last-child { border-right: 0; }
.band-i .tag { display: block; margin-bottom: 5px; }
.band-i .v { font-size: 21px; font-weight: 680; letter-spacing: -.025em; line-height: 1.1; }
.band-i .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.band-i .s b.up { color: var(--good); }
.band-i .s b.dn { color: var(--bad); }

.tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tbl th { text-align: left; padding: 9px 14px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--page); white-space: nowrap; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.is-clickable { cursor: pointer; }
.tbl tbody tr.is-clickable:hover { background: var(--page); }
.tbl tbody tr.is-selected { background: var(--navy-sf); }
.tbl .r { text-align: right; }
.tbl .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 6px 12px; border-radius: var(--r); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tab:hover { background: var(--sunk); color: var(--ink-2); }
.tab.is-current { background: var(--ink); color: #fff; }

.empty { padding: 34px 20px; text-align: center; color: var(--faint); font-size: 12.5px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 12.5px; font-weight: 550; box-shadow: var(--sh-3); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: min(90vw, 480px); }
.toast.is-up { opacity: 1; transform: translateX(-50%) translateY(0); }
.scrim { position: fixed; inset: 0; background: rgba(15,18,21,.36); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .16s; }
.scrim.is-up { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 94vw); z-index: 81; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--sh-3); transform: translateX(100%); transition: transform .2s cubic-bezier(.32,.72,0,1); display: flex; flex-direction: column; }
.drawer.is-up { transform: translateX(0); }
.drawer-h { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 10px; }
.drawer-h h3 { margin: 0; font-size: 15px; font-weight: 680; }
.drawer-h p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.drawer-b { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 15px; }

.split { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.split.is-wide { grid-template-columns: 420px 1fr; }
.split.is-flip { grid-template-columns: 1fr 380px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }

.pick { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; position: relative; }
.pick:last-child { border-bottom: 0; }
.pick:hover { background: var(--page); }
.pick.is-picked { background: var(--navy-sf); }
.pick.is-picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.pick-m { flex: 1 1 auto; min-width: 0; }
.pick-m b { display: block; font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-m small { font-size: 11.5px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-r { flex: 0 0 auto; text-align: right; }

.kv { display: grid; grid-template-columns: 132px 1fr; gap: 7px 14px; font-size: 12.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 550; }

.note { padding: 11px 13px; border-radius: var(--r); background: var(--page); border: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-2); line-height: 1.55; }
.note.is-brand { background: var(--navy-sf); border-color: #D6D6EC; }
.note.is-bad { background: var(--bad-sf); border-color: #D6D6EC; color: #5A2020; }
.note.is-steel { background: var(--steel-sf); border-color: #C9DDEC; }

.msg { display: flex; flex-direction: column; gap: 4px; }
.msg-b { padding: 10px 13px; border-radius: var(--r-lg); font-size: 12.5px; line-height: 1.5; max-width: 88%; }
.msg.is-them .msg-b { background: var(--sunk); border-top-left-radius: var(--r-sm); }
.msg.is-us { align-items: flex-end; }
.msg.is-us .msg-b { background: var(--ink); color: #fff; border-top-right-radius: var(--r-sm); }
.msg.is-agent .msg-b { background: var(--navy-sf); border: 1px solid #D6D6EC; color: #6E1A16; }
.msg small { font-size: 10.5px; color: var(--faint); }

.stage { display: flex; flex-direction: column; min-width: 0; }
.stage-h { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--page); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.stage-h b { font-size: 12px; font-weight: 660; flex: 1 1 auto; }
.bolt { width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--navy); }
.bolt:hover { background: var(--navy-sf); }
.stage-b { padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 90px; }
.lead { padding: 9px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1); text-align: left; }
.lead b { display: block; font-size: 12.5px; font-weight: 620; }
.lead small { font-size: 11px; color: var(--muted); }


/* ============================================================================
   BESPOKE 1 — THE MATCH BOARD
   Every community in the network against one family, each row either a match or
   the specific rule that stopped it. An advisor cannot use a refusal she cannot
   say out loud to a family in one sentence, so the rule and its evidence sit on
   the row together.
   ========================================================================== */
.mb { border-top: 1px solid var(--line-soft); }
.mb-r { display: grid; grid-template-columns: 26px 1fr 132px 118px; align-items: center;
  gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; position: relative; }
.mb-r:hover { background: var(--sunk); }
.mb-r.is-picked { background: var(--navy-sf); }
.mb-r.is-picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.mb-v { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; font: 700 11px var(--sans); }
.mb-v.is-ok { background: var(--good-sf); color: var(--good); border: 1px solid #C6E2D4; }
.mb-v.is-no { background: var(--bad-sf); color: var(--bad); border: 1px solid #F0CFCD; }
.mb-m { min-width: 0; }
.mb-m b { display: block; font-size: 13px; font-weight: 640; }
.mb-m small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mb-m .why { display: block; font-size: 11.5px; color: var(--bad); margin-top: 3px; line-height: 1.45; }
.mb-r.is-ok .mb-m .why { color: var(--good); }
.mb-lic { display: flex; gap: 4px; flex-wrap: wrap; }
.mb-beds { text-align: right; }
.mb-beds b { display: block; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mb-beds small { font-size: 10.5px; color: var(--muted); }
.mb-beds.is-stale b { color: var(--warn); }
.mb-beds.is-full b { color: var(--faint); }

/* the licence chip carries the cap, because the cap IS the licence */
.lic { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: var(--r-sm);
  font: 700 10px var(--sans); letter-spacing: .04em; border: 1px solid var(--line); background: var(--sunk); color: var(--ink-2); }
.lic.is-afh { background: #F3EEFB; border-color: #DCD0F0; color: #513A87; }
.lic.is-alf { background: var(--navy-sf); border-color: #D6D6EC; color: var(--navy-tx); }
.lic.is-snf { background: #EAF3F1; border-color: #C8E0D9; color: #17594A; }
.lic.is-il  { background: var(--sunk); color: var(--muted); }
.lic em { font-style: normal; opacity: .72; font-weight: 600; }
.end { display: inline-flex; padding: 1px 6px; border-radius: 999px; font: 700 9.5px var(--sans);
  letter-spacing: .05em; text-transform: uppercase; background: #FDF3E3; border: 1px solid #EFDCBB; color: var(--warn); }

/* ============================================================================
   BESPOKE 2 — THE GATE
   The same discipline as the match board, expanded: every rule that governs this
   placement with the data that produced its verdict.
   ========================================================================== */
.gate { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.gate-v { padding: 13px 15px; display: flex; align-items: center; gap: 11px; }
.gate-v b { font: 800 15px var(--sans); letter-spacing: -.01em; }
.gate-v small { font-size: 11.5px; opacity: .9; display: block; margin-top: 1px; }
.gate-v.is-ok { background: var(--good-sf); color: #14603F; }
.gate-v.is-no { background: var(--bad-sf); color: #8A1C16; }
.gate-c { display: flex; align-items: flex-start; gap: 10px; padding: 10px 15px; border-top: 1px solid var(--line-soft); }
.gate-c i { width: 16px; height: 16px; border-radius: 999px; flex: 0 0 16px; margin-top: 1px;
  display: grid; place-items: center; font: 700 10px var(--sans); font-style: normal; }
.gate-c.is-ok i { background: var(--good-sf); color: var(--good); border: 1px solid #C6E2D4; }
.gate-c.is-no i { background: var(--bad-sf); color: var(--bad); border: 1px solid #F0CFCD; }
.gate-c b { display: block; font-size: 12.5px; font-weight: 620; }
.gate-c small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.gate-c.is-no small { color: #8A4442; }

/* ============================================================================
   BESPOKE 3 — THE FEE CLOCK
   The insight the incumbent's own pitch skips: the fee is not earned at
   placement. Day 30 is when it can be invoiced; day 90 is when it stops being
   clawed back. A resident is somewhere on this track, and that position is the
   real state of the money.
   ========================================================================== */
.fc-row { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.fc-row:last-child { border-bottom: 0; }
.fc-row.is-picked { background: var(--navy-sf); }
.fc-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.fc-top b { font-size: 13.5px; font-weight: 650; }
.fc-top small { font-size: 11.5px; color: var(--muted); }
.fc-top .fc-amt { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-track { position: relative; height: 30px; padding-top: 14px; }
.fc-bar { position: relative; height: 16px; border-radius: var(--r-sm); background: var(--sunk);
  border: 1px solid var(--line-soft); overflow: hidden; display: flex; }
.fc-bar i { display: block; height: 100%; flex: 0 0 auto; }
.fc-bar i.is-wait { background: var(--grey); opacity: .5; }
.fc-bar i.is-warn { background: var(--warn); opacity: .7; }
.fc-bar i.is-good { background: var(--good); opacity: .78; }
.fc-bar i.is-bad  { background: var(--bad); opacity: .8;
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.34) 4px 8px); }
/* the two thresholds — owners of absolutely positioned labels, so positioned */
.fc-mark { position: absolute; top: 9px; bottom: -2px; width: 2px; background: var(--ink); z-index: 3; }
.fc-mark::after { content: attr(data-l); position: absolute; top: -12px; left: 4px; white-space: nowrap;
  font: 700 9px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.fc-mark.is-flip::after { left: auto; right: 4px; }
.fc-mark.is-soft { background: var(--grey); }
.fc-mark.is-soft::after { color: var(--muted); }
.fc-now { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 999px;
  background: var(--surface); border: 2.5px solid var(--navy); z-index: 4; transform: translateX(-5px); }
.fc-scale { display: flex; justify-content: space-between; margin-top: 6px; }
.fc-scale span { font: 600 9px var(--mono); color: var(--faint); }

/* ------------------------------------------------------------- staleness */
.stale { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: var(--r-sm);
  font: 700 10px var(--sans); background: var(--warn-sf); border: 1px solid #EFDCBB; color: var(--warn); }

/* --------------------------------------------------------- the intake card */
.fam { display: flex; align-items: flex-start; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft);
  width: 100%; text-align: left; position: relative; }
.fam:last-child { border-bottom: 0; }
.fam:hover { background: var(--sunk); }
.fam.is-picked { background: var(--navy-sf); }
.fam.is-picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--navy); }
.fam-u { flex: 0 0 48px; text-align: center; }
.fam-u b { display: block; font: 700 11px var(--sans); color: var(--bad); }
.fam-u small { font-size: 9.5px; color: var(--faint); }
.fam-m { flex: 1 1 auto; min-width: 0; }
.fam-m b { display: block; font-size: 13.5px; font-weight: 650; }
.fam-m small { display: block; font-size: 11.5px; color: var(--muted); }
.fam-c { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.fam-n { flex: 0 0 auto; font: 700 13px var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.fam-n small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------- the feature map */
.fmap-h { padding: 11px 16px; background: var(--sunk); border-bottom: 1px solid var(--line-soft); }
.fm { display: grid; grid-template-columns: 300px 108px 1fr; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.fm:last-child { border-bottom: 0; }
.fm-f { padding: 11px 16px; font-size: 12.5px; font-weight: 600; border-right: 1px solid var(--line-soft); }
.fm-s { padding: 11px 12px; border-right: 1px solid var(--line-soft); display: flex; align-items: flex-start; }
.fm-h { padding: 11px 16px; font-size: 12px; color: var(--ink-2); }


/* ---- the rail carries the logo's own navy, so its type inverts ------------ */
.rail { border-right: 1px solid #0F3050; }
.rail-head { border-bottom-color: #17395A; }
.crest img { border-radius: var(--r-sm); }
.rail-toggle { color: #7E9AB2; }
.rail-toggle:hover { background: #14344F; color: #fff; }
.rail-nav::-webkit-scrollbar-thumb { background: #1C4569; }
.nav-row:hover { background: #14344F; color: #fff; }
.nav-row.is-current { background: var(--navy); color: #fff; }
.nav-row.is-ancestor { color: #fff; }
.nav-row.is-ancestor svg { color: var(--sky); }
.nav-kids::before { background: #1C4569; }
.nav-kid { color: #8FA8BD; }
.nav-kid:hover { background: #14344F; color: #fff; }
.nav-kid.is-current { color: #fff; background: var(--navy); }
.nav-kid em { color: var(--sky); }
.nav-divider hr { border-top-color: #1C4569; }
.nav-divider .tag { color: var(--sky); }

/* ================================================================ responsive */
.rail-scrim { display: none; }
@media (max-width: 1180px) {
  .split, .split.is-wide, .split.is-flip { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bench-row { grid-template-columns: 186px 1fr 214px; }
}
@media (max-width: 900px) {
  .mb-r { grid-template-columns: 22px 1fr; gap: 9px; }
  .mb-r > :nth-child(3), .mb-r > :nth-child(4) { grid-column: 2; }
  .mb-beds { text-align: left; }
  .fm { grid-template-columns: 1fr; }
  .fm-f, .fm-s { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .app { height: calc(100vh - 48px); }
  .rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 85; width: 16rem; flex-basis: 16rem; transform: translateX(-100%); transition: transform .2s cubic-bezier(.32,.72,0,1); box-shadow: var(--sh-3); }
  .app.is-navopen .rail { transform: translateX(0); }
  .rail-scrim { display: block; position: fixed; inset: 0; background: rgba(15,18,21,.36); z-index: 84; opacity: 0; pointer-events: none; transition: opacity .16s; }
  .app.is-navopen .rail-scrim { opacity: 1; pointer-events: auto; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .band { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .band-i:nth-child(2n) { border-right: 0; }
  .band-i { border-bottom: 1px solid var(--line-soft); }
  .page { padding: 14px 12px 60px; }
  .cmdk { display: none; }
  .bench-row { grid-template-columns: 1fr; }
  .bench-who, .bench-path { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .bench-path { flex-direction: column; align-items: stretch; gap: 8px; }
  .bench-arrow { transform: rotate(90deg); }
  .bench-wall { border-left: 0; border-top: 3px solid var(--ink); }
  .book-row { grid-template-columns: 1fr; gap: 6px; }
  .ring-map { height: 380px; }
  .spine { padding: 12px; }
  .spine-n { min-width: 88px; }
}
@media (max-width: 560px) {
  .band { grid-template-columns: 1fr !important; }
  .band-i { border-right: 0; }
  .topbar { padding: 0 12px; gap: 10px; }
  .tbl th, .tbl td { padding: 8px 10px; font-size: 12px; }
}

/* ==================================================================
   Pinnacle Investigations — components built for this desk only.
   Every state modifier below is scoped to its own component root. A
   bare `.ok` / `.full` / `.empty` inherits whatever the shell already
   defines and breaks silently, so none are declared globally here.
   ================================================================== */

.sec { margin-top: 22px; }
.sec > h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sec-sub, .lede { font-size: 13px; color: var(--ink-2); line-height: 1.6; max-width: 78ch; margin: 5px 0 12px; }
.lede { margin-bottom: 16px; }
.lede b { color: var(--ink); font-weight: 650; }
.foot { font-size: 12px; color: var(--muted-2); line-height: 1.6; max-width: 76ch; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }

/* --- the metric band -------------------------------------------------- */
.band { grid-template-columns: repeat(4, minmax(0,1fr)); }
.band-cell { padding: 13px 16px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 1px; }
.band-cell:last-child { border-right: 0; }
.band-cell b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.band-cell span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.band-cell em { font-size: 11px; font-style: normal; color: var(--muted-2); line-height: 1.45; margin-top: 2px; }

/* --- the bar that appears inside other components ---------------------- */
.mini-bar { display: block; height: 4px; border-radius: 3px; background: var(--sunk); overflow: hidden; width: 100%; }
.mini-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--steel); transition: width .35s ease; }
.mini-bar.ok   > i { background: var(--good); }
.mini-bar.warn > i { background: var(--warn); }
.mini-bar.bad  > i { background: var(--bad); }

.line-chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 750;
  letter-spacing: .03em; border: 1px solid transparent; vertical-align: 1px; }
.line-chip.pre { background: var(--navy-sf); color: var(--navy-tx); border-color: #C8DFF6; }
.line-chip.nuc { background: #FFF3E0; color: #9A5B00; border-color: #F0DAB4; }

/* --- the client ladder: a ranked triage list, not a stack of cards ----- */
.ladder { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.rung { display: grid; grid-template-columns: 62px 1fr 90px; align-items: center; gap: 14px;
  padding: 11px 14px; background: var(--surface); text-align: left; width: 100%; }
.rung:hover { background: var(--navy-sf); }
.rung.is-on { background: var(--navy-sf); box-shadow: inset 3px 0 0 var(--navy); }
.rung-pct { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--steel);
  font-variant-numeric: tabular-nums; }
.rung-pct i { font-size: 11px; font-style: normal; font-weight: 600; color: var(--muted-2); }
.rung-pct.ok { color: var(--good); }
.rung-mid { display: block; min-width: 0; }
.rung-mid > b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.rung-sub { display: block; font-size: 11.5px; color: var(--muted-2); margin: 1px 0 6px; }
.rung-blk { justify-self: end; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  white-space: nowrap; background: var(--sunk); color: var(--muted-2); }
.rung-blk.ok   { background: var(--good-sf); color: var(--good); }
.rung-blk.warn { background: var(--warn-sf); color: #8A5B00; }
.rung-blk.bad  { background: var(--bad-sf);  color: var(--bad); }

/* --- the intake spine: one record on the left, nine destinations right --
   The signature component. The whole argument of this build is that the
   left column is entered once and the right column is written, not typed. */
.ix { display: grid; grid-template-columns: 1fr 340px; gap: 0; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.ix-src { padding: 14px 16px; border-right: 1px solid var(--line); }
.ix-fan { padding: 14px 14px; background: var(--sunk); position: relative; }
/* the connector: the record physically feeds the rail beside it */
.ix-fan::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--navy) 12%, var(--navy) 88%, transparent); }
.ix-cap { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.ix-cap b { font-size: 12px; font-weight: 750; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.ix-cap span { font-size: 11.5px; color: var(--muted-2); }

.grp { margin-bottom: 11px; }
.grp-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.grp-h b { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.grp-h span { font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.grp.is-full .grp-h span { color: var(--good); font-weight: 700; }
.grp-f { display: flex; flex-wrap: wrap; gap: 3px; }
.fld { font-size: 10.5px; font-weight: 600; padding: 2.5px 7px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted-2); line-height: 1.35; }
.fld:hover { border-color: var(--navy); color: var(--navy-tx); }
.fld em { font-style: normal; font-weight: 800; color: var(--navy); }
.fld.is-on  { background: var(--good-sf); border-color: #C6E2D4; color: #14603F; }
.fld.is-req { background: var(--bad-sf); border-color: #E3C9C9; color: var(--bad); }
.fld.is-opt { background: var(--surface); border-style: dashed; }

.dest { display: block; width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; margin-bottom: 6px; }
.dest:hover { border-color: var(--navy); box-shadow: var(--sh-1); }
.dest-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.dest-nm b { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.dest-nm em { font-style: normal; font-size: 10.5px; color: var(--muted-2); display: block; }
.dest-st { font-size: 10.5px; font-weight: 700; color: var(--bad); white-space: nowrap; }
.dest.is-ready .dest-st { color: var(--good); }
.dest.is-ready { border-color: #C6E2D4; }
.dest-need { display: block; font-size: 10.5px; color: var(--muted-2); line-height: 1.45; margin-top: 6px; }
.dest-need.ok { color: var(--good); }

/* --- the compliance gate: steps, then a wall that does not open -------- */
.gate-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.gate-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.gate-hd b { font-size: 15px; font-weight: 750; color: var(--ink); }
.gate-hd span { font-size: 11.5px; color: var(--muted-2); display: block; }
.gate-cnt { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.gate-cnt.ok  { background: var(--good-sf); color: var(--good); }
.gate-cnt.bad { background: var(--bad-sf);  color: var(--bad); }
.gate-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; padding: 11px 16px 0; max-width: 82ch; }
.gate-steps { list-style: none; padding: 12px 16px; margin: 0; }
.gstep { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); }
.gstep:last-child { border-bottom: 0; }
.gstep-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; background: var(--sunk); color: var(--muted-2); }
.gstep.is-done .gstep-n { background: var(--good-sf); color: var(--good); }
.gstep.is-done .gstep-n svg { width: 12px; height: 12px; }
.gstep.is-open .gstep-n { background: var(--bad-sf); color: var(--bad); }
.gstep-b b { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.gstep.is-done .gstep-b b { color: var(--muted-2); }
.gstep-b span { display: block; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; margin-top: 1px; }
/* the wall — a barrier, drawn, not a sentence in a coloured box */
.gate-wall { padding: 12px 16px; font-size: 12px; font-weight: 700; text-align: center; }
.gate-wall.is-shut { color: var(--bad);
  background: repeating-linear-gradient(-45deg, var(--bad-sf) 0 8px, #F4E7E7 8px 16px);
  border-top: 3px solid var(--bad); }
.gate-wall.is-open { color: var(--good); background: var(--good-sf); border-top: 3px solid var(--good); }

/* --- the client record -------------------------------------------------- */
.split-r { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 16px; }
.rec-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.rec-h h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.rec-h p { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.rec-pct { text-align: right; white-space: nowrap; }
.rec-pct b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy);
  font-variant-numeric: tabular-nums; }
.rec-pct span { font-size: 11px; color: var(--muted-2); }
.rec-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 10px 0 14px;
  padding: 9px 12px; background: var(--sunk); border-radius: var(--r); border-left: 3px solid var(--steel); }
.tab.is-on { background: var(--ink); color: #fff; }
.tab-body { margin-top: 14px; }

/* --- the intake sheet: label, why it exists, and one action ------------ */
.sheet-g { margin-bottom: 16px; }
.sheet-gh { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; margin-bottom: 6px; }
.sheet-gh b { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.sheet-gh span { font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.sheet-rows { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.srow { display: grid; grid-template-columns: 24px 220px 1fr 96px; align-items: center; gap: 10px;
  padding: 7px 11px; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.srow:last-child { border-bottom: 0; }
.srow.is-on { background: #FAFCFA; }
.srow-tick { display: flex; align-items: center; justify-content: center; color: var(--good); }
.srow-tick svg { width: 13px; height: 13px; }
.srow-l { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.srow.is-on .srow-l { font-weight: 500; color: var(--ink-2); }
.srow-l .req { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bad); }
.srow.is-on .srow-l .req { color: var(--muted-2); }
.srow-why { font-size: 11.5px; color: var(--muted-2); line-height: 1.45; }
.srow-why.muted { color: var(--faint); }
.srow-x { justify-self: end; font-size: 10.5px; font-weight: 700; color: var(--good); }
.srow-b { justify-self: end; font-size: 11px; font-weight: 650; padding: 4px 9px; border-radius: 5px;
  background: var(--navy); color: #fff; white-space: nowrap; }
.srow-b:hover { background: var(--navy-dk); }

.terms .band { margin-bottom: 14px; }
.portal { padding: 12px 14px; background: var(--sunk); border-radius: var(--r); border: 1px solid var(--line); }
.portal b { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.portal code { display: block; font-size: 13px; font-weight: 650; color: var(--navy-tx); margin: 3px 0 6px; }
.portal span { font-size: 12px; color: var(--muted-2); line-height: 1.6; }

/* --- the systems grid: the same fan-out, cut by destination ------------ */
.sys-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.sysc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 13px 14px; }
.sysc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sysc-h b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sysc-h em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted-2); }
.sysc-n { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.sysc-n.ok   { background: var(--good-sf); color: var(--good); }
.sysc-n.warn { background: var(--warn-sf); color: #8A5B00; }
.sysc-n.bad  { background: var(--bad-sf);  color: var(--bad); }
.sysc-note { font-size: 11.5px; color: var(--muted-2); line-height: 1.5; margin: 8px 0 10px; }
.sysr { display: grid; grid-template-columns: 1fr 60px 56px; align-items: center; gap: 8px; padding: 4px 0; }
.sysr-n { font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sysr-s { font-size: 10px; font-weight: 700; color: var(--muted-2); text-align: right; }
.sysr.is-ok .sysr-s { color: var(--good); }

/* --- ticklers: a fuse, not a to-do row --------------------------------- */
.tick-rail { display: flex; flex-direction: column; gap: 8px; }
.tick { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 15px; box-shadow: var(--sh-1); position: relative; }
.tick-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--steel); }
.tick.armed .tick-dot { background: var(--good); box-shadow: 0 0 0 4px var(--good-sf); }
.tick.late  .tick-dot { background: var(--bad);  box-shadow: 0 0 0 4px var(--bad-sf); }
.tick-b b { display: block; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.tick-k { display: block; font-size: 11.5px; font-weight: 600; color: var(--navy-tx); margin: 1px 0 3px; }
.tick-n { display: block; font-size: 12px; color: var(--muted-2); line-height: 1.5; }
.tick-s { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 5px; background: var(--sunk); color: var(--muted-2); }
.tick.armed .tick-s { background: var(--good-sf); color: var(--good); }
.tick.late  .tick-s { background: var(--bad-sf);  color: var(--bad); }

/* --- the two regimes, side by side ------------------------------------ */
.reg-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; }
.reg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 16px; }
.reg-h b { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; color: var(--ink); }
.reg-h em { display: block; font-style: normal; font-size: 12px; color: var(--muted-2); }
.reg-meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; padding: 10px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.reg-meta span { font-size: 11px; color: var(--muted-2); }
.reg-meta b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.reg-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 12px; }
.reg-steps { margin: 0; padding-left: 18px; }
.reg-steps li { margin-bottom: 9px; }
.reg-steps b { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.reg-steps span { display: block; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; }

/* --- the throttle: 15 passes against 1 -------------------------------- */
.thr { display: grid; grid-template-columns: 1fr 56px 1fr; gap: 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 20px; }
.thr-side { text-align: center; }
.thr-cap b { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.thr-cap span { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 12px; }
.thr-stack { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  min-height: 46px; align-items: center; }
.thr-tick { width: 13px; height: 30px; border-radius: 3px; background: var(--bad-sf);
  border: 1px solid #E3C9C9; }
.thr-tick.is-one { width: 40px; background: var(--good-sf); border-color: #C6E2D4; }
.thr-tot { margin-top: 12px; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.thr-tot.bad { color: var(--bad); }
.thr-tot.ok  { color: var(--good); }
.thr-arrow { display: flex; align-items: center; justify-content: center; color: var(--navy); }
.thr-arrow svg { width: 26px; height: 26px; }

/* --- replaced versus fed ---------------------------------------------- */
.pfmap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.pfm { display: grid; grid-template-columns: 92px 200px 1fr; align-items: baseline; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.pfm:last-child { border-bottom: 0; }
.pfm-s { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 5px; text-align: center; }
.pfm.fed .pfm-s      { background: var(--navy-sf); color: var(--navy-tx); }
.pfm.replaced .pfm-s { background: var(--good-sf); color: var(--good); }
.pfm.new .pfm-s      { background: var(--warn-sf); color: #8A5B00; }
.pfm > b  { font-size: 13px; font-weight: 650; color: var(--ink); }
.pfm > em { display: block; font-style: normal; font-size: 10.5px; color: var(--muted-2); }
.pfm-h { font-size: 12px; color: var(--ink-2); line-height: 1.55; }

/* --- the morning feed -------------------------------------------------- */
.feed { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.feed-i { display: grid; grid-template-columns: 68px 1fr; gap: 12px; padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft); }
.feed-i:last-child { border-bottom: 0; }
.feed-i.is-flag { background: #FFFCF6; }
.feed-t { font-size: 11px; font-weight: 650; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.feed-b > b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); }
.feed-w { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 1px; }
.feed-f { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px;
  color: #8A5B00; line-height: 1.5; }
.feed-f svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* --- drawer internals -------------------------------------------------- */
.dw-note { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.dw-stat { padding: 12px 14px; background: var(--good-sf); border-radius: var(--r); margin-bottom: 14px; }
.dw-stat b { display: block; font-size: 20px; font-weight: 750; color: var(--good); letter-spacing: -0.02em; }
.dw-stat span { font-size: 11.5px; color: var(--ink-2); }
.dw-stat.bad { background: var(--bad-sf); }
.dw-stat.bad b { color: var(--bad); }
.dw-ok { padding: 11px 13px; background: var(--good-sf); border-radius: var(--r); font-size: 12.5px;
  color: #14603F; line-height: 1.55; }
.dw-blk { padding: 12px 14px; background: var(--bad-sf); border-radius: var(--r); }
.dw-blk > b { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; color: var(--bad); }
.dw-blk ul { list-style: none; margin: 8px 0 0; padding: 0; }
.dw-blk li { padding: 6px 0; border-top: 1px solid #EBD8D8; }
.dw-blk li b { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.dw-blk li span { display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.dw-grp { margin-top: 16px; }
.dw-grp > b { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.dw-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
.dw-n { font-size: 11.5px; color: var(--muted-2); }
.dw-dest { list-style: none; margin: 8px 0 0; padding: 0; }
.dw-dest li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
  font-weight: 650; color: var(--ink); display: flex; justify-content: space-between; gap: 10px; }
.dw-dest li span { font-weight: 500; font-size: 11px; color: var(--muted-2); }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .ix { grid-template-columns: 1fr; }
  .ix-src { border-right: 0; border-bottom: 1px solid var(--line); }
  .ix-fan::before { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(90deg, transparent, var(--navy) 12%, var(--navy) 88%, transparent); }
  .sys-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .band { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .band-cell:nth-child(2) { border-right: 0; }
  .reg-two, .sys-grid { grid-template-columns: 1fr; }
  .pfm { grid-template-columns: 1fr; gap: 3px; }
  .pfm-s { justify-self: start; }
  .srow { grid-template-columns: 24px 1fr; }
  .srow-why { grid-column: 2; }
  .srow-x, .srow-b { grid-column: 2; justify-self: start; }
  .thr { grid-template-columns: 1fr; }
  .thr-arrow { transform: rotate(90deg); }
  .rung { grid-template-columns: 52px 1fr; }
  .rung-blk { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* The shell was written for a white rail, so its base .nav-row colour is a dark
   slate. This rail is the logo's own navy — every rail colour is re-declared
   here, scoped to .rail so it beats the base rule on specificity rather than
   on source order. */
.rail .nav-row  { color: #C3D4E2; }
.rail .nav-row svg { opacity: .92; color: #6E9AC0; }
.rail .nav-row:hover { background: #14344F; color: #fff; }
.rail .nav-row:hover svg { color: var(--sky); }
.rail .nav-row.is-current   { background: var(--navy); color: #fff; }
.rail .nav-row.is-current svg { color: #fff; opacity: 1; }
.rail .nav-row.is-ancestor  { color: #fff; }
.rail .nav-row.is-ancestor svg { color: var(--sky); opacity: 1; }
.rail .nav-count { background: var(--sky); color: #06263D; }
.rail .nav-row.is-current .nav-count { background: #fff; color: var(--navy-dk); }
.rail .nav-kid { color: #9DB7CC; }
.rail .nav-kid:hover { background: #14344F; color: #fff; }
.rail .nav-kid.is-current { background: var(--navy); color: #fff; }

/* --- the fifteen passes, enumerated ------------------------------------ */
.pass-list { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.pass { display: grid; grid-template-columns: 250px 1fr 62px 92px; align-items: center; gap: 14px;
  padding: 8px 15px; border-bottom: 1px solid var(--line-soft); }
.pass:last-child { border-bottom: 0; }
.pass.inferred { background: #FCFCFD; }
.pass-n { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.pass-n em { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted-2); }
.pass-bar { display: block; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.pass-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--bad); opacity: .78; }
.pass.inferred .pass-bar > i { background: var(--warn); opacity: .6; }
.pass-m { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; }
.pass-m small { font-size: 9.5px; font-weight: 600; color: var(--muted-2); margin-left: 2px; }
.pass-tag { justify-self: end; font-size: 9.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
  background: var(--warn-sf); color: #8A5B00; }
.pass-tag.named { background: var(--navy-sf); color: var(--navy-tx); }
.thr-tick.inferred { background: var(--warn-sf); border-color: #EFDCBB; }
@media (max-width: 900px) {
  .pass { grid-template-columns: 1fr 62px; row-gap: 5px; }
  .pass-bar { grid-column: 1 / -1; }
  .pass-tag { grid-column: 2; }
}
/* The shell's --warn is a dark olive tuned for small text; as a 4px progress
   fill it reads muddy against the red and green. Bars only, text unchanged. */
.mini-bar.warn > i { background: #D98A0B; }

/* --- the on-site inspection: an evidence board, not another checklist ---- */
.insp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.insp-h { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.insp-h b { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.insp-s { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.insp-s.ok  { background: var(--good-sf); color: var(--good); }
.insp-s.bad { background: var(--bad-sf);  color: var(--bad); }
.insp-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; padding: 16px; }
.ev { border: 1px solid var(--line); border-radius: var(--r); padding: 10px; background: var(--surface); }
.ev-k { font-size: 9.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2); }
/* The frame stands in for the photograph itself — an empty one reads as a gap
   in the audit file, which is exactly what it is. */
.ev-frame { display: flex; align-items: center; justify-content: center; height: 64px; margin: 7px 0 8px;
  border-radius: var(--r-sm); background: var(--sunk);
  border: 1px dashed var(--line); }
.ev.is-have .ev-frame { background: var(--good-sf); border-style: solid; border-color: #C6E2D4; }
.ev.attest .ev-frame { height: 40px; }
.ev-got { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--good); color: #fff; }
.ev-got svg { width: 14px; height: 14px; }
.ev-gap { font-size: 10.5px; font-weight: 650; color: var(--bad); }
.ev > b { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink); }
.ev-n { display: block; font-size: 11px; color: var(--muted-2); line-height: 1.45; margin-top: 3px; }

/* --- what the stack costs ---------------------------------------------- */
.spend { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.sp { display: grid; grid-template-columns: 1fr 100px 84px 80px; align-items: center; gap: 12px;
  padding: 10px 15px; border-bottom: 1px solid var(--line-soft); }
.sp-n b { font-size: 13px; font-weight: 650; color: var(--ink); }
.sp-n em { display: block; font-style: normal; font-size: 11px; color: var(--muted-2); line-height: 1.45; }
.sp-m { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right;
  font-variant-numeric: tabular-nums; }
.sp-m small { font-size: 9.5px; font-weight: 600; color: var(--muted-2); }
.sp-m i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--faint); }
.sp-src { justify-self: end; font-size: 9.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; background: var(--sunk); color: var(--muted-2); }
.sp-src.quoted { background: var(--navy-sf); color: var(--navy-tx); }
.sp-src.estimate { background: var(--warn-sf); color: #8A5B00; }
.sp-f { justify-self: end; font-size: 10.5px; font-weight: 700; }
.sp.fed .sp-f { color: var(--navy-tx); }
.sp.replaced .sp-f { color: var(--good); }
.spend-tot { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  background: var(--sunk); border-top: 1px solid var(--line); }
.spend-tot > div { padding: 13px 16px; border-right: 1px solid var(--line-soft); }
.spend-tot > div:last-child { border-right: 0; }
.spend-tot b { display: block; font-size: 21px; font-weight: 750; color: var(--good); letter-spacing: -0.02em; }
.spend-tot b small { font-size: 11px; font-weight: 600; color: var(--muted-2); }
.spend-tot span { font-size: 11.5px; color: var(--ink-2); }

@media (max-width: 1180px) { .insp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 900px)  {
  .insp-grid { grid-template-columns: 1fr; }
  .sp { grid-template-columns: 1fr auto; row-gap: 4px; }
  .sp-src, .sp-f { grid-column: 2; }
  .spend-tot { grid-template-columns: 1fr; }
}

.pfm.question .pfm-s { background: #F3EEFB; color: #5B3A9B; }
.pfm > em:empty { display: none; }