/* ============================================================================
   Crane Overhead Door & Hangars
   Cool industrial shell. Their wordmark is black with a brick-red second line on
   a white plate, so the surface has to stay light — composited over a dark rail
   the word CRANE disappears entirely. Steel neutrals, not warm paper.

   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 */
  --red:      #AC2824;
  --red-dk:   #8A1F1C;
  --red-sf:   #FBEDEC;
  --ink:      #0F1215;

  /* cool industrial neutrals */
  --page:     #F1F3F5;
  --rail:     #FFFFFF;
  --surface:  #FFFFFF;
  --sunk:     #F4F6F8;
  --line:     #DFE3E8;
  --line-soft:#EAEDF1;

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

  --good:     #1B6B45;
  --good-sf:  #E7F3ED;
  --warn:     #96601A;
  --warn-sf:  #FCF2E2;
  --bad:      #AC2824;
  --bad-sf:   #FBEDEC;
  --steel:    #1F5F8B;
  --steel-sf: #E9F1F7;

  --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(--red); 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(--red); }
.nav-count { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--red); 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(--red-dk); font-weight: 650; background: var(--red-sf); }
.nav-kid em { font-style: normal; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--red); }

.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(--red); 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(--red); border-color: var(--red-dk); color: #fff; }
.btn.is-primary:hover { background: var(--red-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: #F0CFCD; }
.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(--red-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(--red-sf); }
.pick.is-picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.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(--red-sf); border-color: #F0CFCD; }
.note.is-bad { background: var(--bad-sf); border-color: #F0CFCD; color: #7A1D19; }
.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(--red-sf); border: 1px solid #F0CFCD; 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(--red); }
.bolt:hover { background: var(--red-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 PROMISE RING
   Their published promise is "emergency service within one hour". This draws the
   real one-hour radius from the Deer Park shop over the service area they
   advertise, so the places where the promise cannot be kept are visible instead
   of discovered by a customer.
   ========================================================================== */
.ring-wrap { position: relative; }
.ring-map { border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; background: #E7EBEF; }
/* The global `svg { width:16px }` default would shrink the whole map to an icon. */
.ring-map .pr-svg { width: 100%; height: auto; max-height: 520px; display: block; }
.pr-rl { font: 700 11px var(--sans); letter-spacing: .04em; opacity: .85; }
.pr-border { stroke: #A9B3BE; stroke-width: 1.2; stroke-dasharray: 2 4; }
.pr-state { font: 700 10px var(--sans); letter-spacing: .16em; fill: #9AA4AF; }
.pr-town circle { fill: #77828E; stroke: #fff; stroke-width: 1; }
.pr-town text { font: 500 10.5px var(--sans); fill: #5A646F; }
.pr-job { cursor: pointer; }
.pr-job:focus { outline: none; }
.pr-job:focus-visible circle { stroke: #0F1215; stroke-width: 3.5; }
.pr-job circle { stroke: #fff; stroke-width: 2.5; transition: r .12s ease; }
.pr-job.is-ok circle { fill: #1B6B45; }
.pr-job.is-thin circle { fill: #96601A; }
.pr-job.is-late circle { fill: #AC2824; }
.pr-job:hover circle, .pr-job:focus circle { r: 12; }
.pr-job.is-picked circle { stroke: #0F1215; stroke-width: 3.5; }
.pr-shop circle { fill: #0F1215; stroke: #fff; stroke-width: 3; }
.pr-shop text { font: 700 11.5px var(--sans); fill: #0F1215; }
.ring-legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; box-shadow: var(--sh-2); font-size: 11.5px; max-width: 260px;
}
.ring-legend div { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: var(--ink-2); }
.ring-legend div:last-child { margin-bottom: 0; }
.ring-legend em { width: 13px; height: 13px; border-radius: 3px; display: block; font-style: normal; flex: 0 0 13px; }
.ring-fallback { padding: 22px; text-align: center; color: var(--muted); font-size: 12.5px; }

/* ============================================================================
   BESPOKE 2 — THE BREAK-EVEN DISTANCE BAR
   One bar per line of business: minutes of drive across, gross margin drawn as
   the budget, and the mile at which the job starts costing money marked on it.
   ========================================================================== */
.be-row { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.be-row:last-child { border-bottom: 0; }
.be-row.is-picked { background: var(--red-sf); }
.be-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.be-top b { font-size: 13.5px; font-weight: 660; }
.be-top small { font-size: 11.5px; color: var(--muted); }
.be-top .be-v { margin-left: auto; font-size: 13px; font-weight: 700; }
.be-track { position: relative; height: 30px; padding-top: 13px; }
.be-bar { position: relative; display: flex; height: 17px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line-soft); overflow: hidden; }
.be-bar i { display: block; height: 100%; flex: 0 0 auto; }
.be-bar i.is-ok { background: var(--good); opacity: .82; }
.be-bar i.is-loss { background: var(--bad); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.3) 4px 8px); }
/* the break-even mark: owner of an absolutely positioned label, so positioned */
.be-mark { position: absolute; top: 8px; bottom: -2px; width: 2px; background: var(--ink); z-index: 3; }
.be-mark::after {
  content: attr(data-l); position: absolute; top: -11px; left: 4px; white-space: nowrap;
  font: 700 9.5px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
.be-mark.is-flip::after { left: auto; right: 4px; }
.be-scale { display: flex; justify-content: space-between; margin-top: 5px; }
.be-scale span { font: 600 9px var(--mono); color: var(--faint); }
/* towns pinned along the axis, so the abstraction lands on real places */
.be-towns { position: relative; height: 40px; margin-top: 3px; }
.be-town { position: absolute; top: 0; transform: translateX(-50%); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.be-town::before { content: ""; display: block; width: 1px; height: 5px; background: var(--line); margin: 0 auto 2px; }
.be-town.is-low { top: 19px; }
.be-town.is-low::before { height: 24px; margin-top: -19px; }
.be-town.is-out { color: var(--bad); font-weight: 650; }
.be-bar.is-quiet { opacity: .32; height: 10px; margin-top: 4px; }

/* ============================================================================
   BESPOKE 3 — THE THREE-BOOK STRIP
   Four lines of business, eight weeks, one set of crews. Where a band goes over
   its capacity is where an emergency call is about to eat a booked install.
   ========================================================================== */
.books { padding: 14px 16px 16px; }
.book-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: center; margin-bottom: 8px; }
.book-row:last-of-type { margin-bottom: 0; }
.book-id b { display: block; font-size: 12.5px; font-weight: 660; }
.book-id small { font-size: 10.5px; color: var(--muted); }
/* fixed columns — auto sizing would make a busy week wider and destroy the grid */
.book-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.book-w { height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); background: var(--sunk); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 0; }
.book-w i { display: block; width: 100%; }
.book-w b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.book-w.is-over { border-color: var(--bad); }
.book-w.is-over b { color: var(--bad); }
.book-w:hover { border-color: var(--ink); }
.book-scale { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-top: 4px; }
.book-scale span { font: 600 9px var(--mono); color: var(--faint); text-align: center; }

/* ============================================================================
   BESPOKE 4 — THE PROJECT SPINE
   A hangar door is a chain, not a status. Draw the chain, and mark where it broke.
   ========================================================================== */
.spine { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 16px; scrollbar-width: none; }
.spine::-webkit-scrollbar { display: none; }
.spine-n { flex: 1 1 0; min-width: 96px; position: relative; padding: 0 6px; text-align: center; }
/* the connector is a positioned pseudo-element, so its owner is position:relative */
.spine-n::after {
  content: ""; position: absolute; top: 13px; right: -6px; width: 12px; height: 2px; background: var(--line); z-index: 0;
}
.spine-n:last-child::after { display: none; }
.spine-dot { width: 26px; height: 26px; border-radius: 999px; margin: 0 auto 8px; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--faint); position: relative; z-index: 1; font-size: 11px; font-weight: 700; }
.spine-n.is-done .spine-dot { background: var(--ink); border-color: var(--ink); color: #fff; }
.spine-n.is-done::after { background: var(--ink); }
.spine-n.is-now .spine-dot { background: var(--red); border-color: var(--red-dk); color: #fff; }
.spine-n.is-broke .spine-dot { background: var(--bad-sf); border-color: var(--bad); color: var(--bad); }
.spine-n b { display: block; font-size: 11px; font-weight: 620; line-height: 1.3; }
.spine-n small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.spine-n.is-broke small { color: var(--bad); font-weight: 650; }

/* --------------------------------------------------- warranty runway pill */
.runway { display: flex; align-items: center; gap: 8px; }
.runway-t { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--sunk); border: 1px solid var(--line-soft); overflow: hidden; min-width: 54px; }
.runway-t i { display: block; height: 100%; background: var(--good); }
.runway.is-soon .runway-t i { background: var(--warn); }
.runway.is-gone .runway-t i { background: var(--faint); }
.runway b { font-size: 11.5px; font-weight: 660; white-space: nowrap; }
.runway.is-soon b { color: var(--warn); }
.runway.is-gone b { color: var(--faint); }

/* ============================================================== agent bench */
.bench { border-bottom: 1px solid var(--line); }
.bench:last-child { border-bottom: 0; }
.bench-row { display: grid; grid-template-columns: 208px 1fr 238px; align-items: stretch; }
.bench-who { padding: 15px 16px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 5px; }
.bench-who b { font-size: 13.5px; font-weight: 670; display: flex; align-items: center; gap: 7px; }
.bench-who small { font-size: 11px; color: var(--muted); }
.bench-who .num { font-size: 11px; color: var(--faint); margin-top: auto; }
.bench-path { padding: 15px 16px; display: flex; align-items: center; gap: 10px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bench-path::-webkit-scrollbar { display: none; }
.bench-stop { min-width: 0; flex: 1 1 0; }
.bench-stop .tag { display: block; margin-bottom: 5px; }
.bench-stop p { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.bench-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.bench-tags .chip { font-size: 10.5px; padding: 1px 7px; }
.bench-arrow { flex: 0 0 auto; color: var(--faint); display: grid; place-items: center; }
.bench-wall {
  border-left: 3px solid var(--ink); padding: 15px 16px; position: relative;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(172,40,36,.08) 6px 12px);
  background-color: var(--bad-sf);
}
.bench-wall .tag { color: var(--bad); display: block; margin-bottom: 6px; }
.bench-wall ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.bench-wall li { font-size: 11.5px; color: #7A1D19; display: flex; align-items: flex-start; gap: 6px; }
.bench-wall li::before { content: "\00d7"; font-weight: 700; color: var(--bad); flex: 0 0 auto; }
.bench-wait { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(172,40,36,.22); font-size: 11.5px; font-weight: 650; color: var(--bad); display: flex; align-items: center; gap: 6px; }

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