/* ============================================================================
   SimpliAge Senior Advisors — the placement desk
   Their wordmark is navy over grey with a navy SA monogram. Composited on
   anything dark the navy drowns and on navy it vanishes outright, so this is a
   light shell — the logo's decision. Calm, high-legibility neutrals: the users
   are advisors working at speed, and the subject is somebody's mother.

   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:     #010180;
  --navy-dk:  #000159;
  --navy-sf:  #EDEDF7;
  --navy-tx:  #1A1A8C;
  --grey:     #9EA0A4;
  --ink:      #14161B;

  /* cool industrial neutrals */
  --page:     #F2F3F7;
  --rail:     #FFFFFF;
  --surface:  #FFFFFF;
  --sunk:     #F6F7FA;
  --line:     #E0E2EA;
  --line-soft:#ECEEF3;

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

  --good:     #1B6B45;
  --good-sf:  #E7F3ED;
  --warn:     #96601A;
  --warn-sf:  #FCF2E2;
  --bad:      #B3241C;
  --bad-sf:   #FCEDEC;
  --steel:    #4A5568;
  --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); }

/* ================================================================ 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; }
}