/* ============================================================================
   Spokane Fitness Center OS
   Warm paper shell. The crest is cream + black + orange, so the system is built
   on warm neutrals rather than cold grey, and the crest sits on a small ink plate
   in the rail where its cream fill has something to push against.

   CONVENTIONS THAT MATTER
   - Every state modifier is prefixed `is-` so it can never inherit a global
     utility of the same bare name (.empty, .full, .open, .done ...).
   - Every component modifier is namespaced to its component (.plate-z, not .zone).
   - Any element owning an absolutely positioned pseudo-element is position:relative.
   - Every uniform grid uses grid-template-columns / table-layout:fixed, never auto.
   ========================================================================== */

:root {
  /* brand — sampled from the client's own logo file, not guessed */
  --orange:     #F89925;
  --orange-dk:  #C2700D;
  --orange-tx:  #8A4E05;   /* accessible orange for text on paper */
  --orange-sf:  #FEF1DE;
  --cream:      #FFFBED;
  --crest-ink:  #050708;

  /* surfaces */
  --paper:      #FAF7F0;
  --rail:       #F4F0E6;
  --surface:    #FFFFFF;
  --sunk:       #F2EEE4;
  --line:       #E4DCCA;
  --line-soft:  #EFE9DC;

  /* ink */
  --ink:        #10130F;
  --ink-2:      #3B4148;
  --muted:      #6E757D;
  --faint:      #9AA0A7;

  /* semantic */
  --good:       #1B7A4B;
  --good-sf:    #E6F4EC;
  --warn:       #A9640B;
  --warn-sf:    #FCF0DC;
  --bad:        #A82318;
  --bad-sf:     #FBE9E7;
  --cool:       #2C5F8A;
  --cool-sf:    #E8F0F7;

  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --sh-1: 0 1px 2px rgba(16,19,15,.05);
  --sh-2: 0 2px 8px rgba(16,19,15,.07), 0 1px 2px rgba(16,19,15,.05);
  --sh-3: 0 12px 32px rgba(16,19,15,.14);

  --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(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
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. In a
   flex or grid parent that produces a 1500px icon and no console error whatsoever.
   Every icon gets a default box here; component rules below override it. */
svg { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; vertical-align: -3px; }
.chip svg { width: 13px; height: 13px; vertical-align: -2px; }
.icon-btn svg, .rail-toggle svg { width: 18px; height: 18px; }
.bolt svg { width: 14px; height: 14px; }
.rdy-box svg { width: 12px; height: 12px; stroke-width: 3; }
.trail-charge svg, .bench-wait svg, .pick svg { width: 14px; height: 14px; }
.cmdk svg { width: 15px; height: 15px; }
:focus-visible { outline: 2px solid var(--orange-dk); outline-offset: 2px; border-radius: var(--r-sm); }

/* athletic tag — the one typographic gesture borrowed from the crest banner */
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted);
}

/* ================================================================== banner */
.synthetic {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 18px; background: var(--crest-ink); color: #E9E4D6;
  font-size: 11.5px; letter-spacing: .015em;
}
.synthetic b { color: var(--orange); font-weight: 700; }
.synthetic span { color: #9C978A; }

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

/* ---------------------------------------------------------------- the rail */
.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: 14px 12px 12px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
/* The crest is cream-filled; on warm paper it loses its shield. A small ink plate
   gives it the background it was drawn for without darkening the whole product. */
.crest {
  background: var(--crest-ink); border-radius: var(--r);
  padding: 7px 9px; display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: 0;
}
.crest img { display: block; width: 100%; height: auto; max-height: 42px; object-fit: contain; }
.app.is-collapsed .crest { padding: 6px; }
.app.is-collapsed .crest img { max-height: 34px; }
.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: rgba(16,19,15,.06); 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 20px; }
.rail-nav::-webkit-scrollbar { width: 8px; }
.rail-nav::-webkit-scrollbar-thumb { background: #DFD7C4; 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: .78; }
.nav-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row:hover { background: rgba(16,19,15,.05); color: var(--ink); }
.nav-row.is-current { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: var(--sh-1); }
.nav-row.is-current::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--orange);
}
/* A parent whose child is current gets a quieter mark, so two rows never read as
   two selections. */
.nav-row.is-ancestor { color: var(--ink); font-weight: 600; }
.nav-row.is-ancestor svg { opacity: 1; color: var(--orange-tx); }
.nav-count {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  border-radius: 999px; background: var(--orange); color: #2A1A02;
}

.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: rgba(16,19,15,.05); color: var(--ink-2); }
.nav-kid.is-current { color: var(--ink); font-weight: 650; background: var(--orange-sf); }
.nav-kid em { font-style: normal; margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--orange-tx); }

.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; }
/* The label must be allowed to shrink; nowrap plus a fixed rail width silently
   pushed it past the rail edge and it read as clipped text. */
.nav-divider .tag {
  color: var(--orange-tx); white-space: nowrap; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; 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; }

/* --------------------------------------------------------------- workspace */
.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 { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.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: 190px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  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: 999px; flex: 0 0 32px;
  background: var(--crest-ink); color: var(--cream);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
}
.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: 1360px; 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; letter-spacing: -.005em; }
.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; }
.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(--paper); color: var(--ink); }
.btn svg { width: 15px; height: 15px; stroke-width: 1.9; }
.btn.is-primary { background: var(--orange); border-color: var(--orange-dk); color: #2A1A02; }
.btn.is-primary:hover { background: #F08E15; color: #2A1A02; }
.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: 999px; 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: #C8E5D5; }
.chip.is-warn { background: var(--warn-sf); color: var(--warn); border-color: #F0DCB8; }
.chip.is-bad  { background: var(--bad-sf);  color: var(--bad);  border-color: #F2CFCB; }
.chip.is-cool { background: var(--cool-sf); color: var(--cool); border-color: #C9DCEB; }
.chip.is-brand{ background: var(--orange-sf); color: var(--orange-tx); border-color: #F5DCB4; }

.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); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ------------------------------------------------- the one metric band
   Replaces the row of four KPI cards. Same numbers, a quarter of the weight. */
.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 { font-weight: 650; }
.band-i .s b.up { color: var(--good); }
.band-i .s b.dn { color: var(--bad); }

/* --------------------------------------------------------------- tables */
.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(--paper); 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(--paper); }
.tbl tbody tr.is-selected { background: var(--orange-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(--crest-ink); color: var(--cream); }

.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(--crest-ink); color: var(--cream); 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 ease, transform .18s ease;
  max-width: min(90vw, 460px);
}
.toast.is-up { opacity: 1; transform: translateX(-50%) translateY(0); }

.scrim {
  position: fixed; inset: 0; background: rgba(16,19,15,.34); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity .16s ease;
}
.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: 16px; }

/* ============================================================================
   BESPOKE COMPONENT 1 — THE CLUB PLATE
   Each club drawn as the band of amenity zones it actually has, each zone sized
   by capacity and filled by live use. Zones the club does NOT have are hatched.
   Stack the four and North is eight segments wide while the 24 Hour Club is two.
   That contrast IS the argument this product makes.
   ========================================================================== */
.plate { border-bottom: 1px solid var(--line); }
.plate:last-child { border-bottom: 0; }
.plate-top {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 9px; flex-wrap: wrap;
}
.plate-id { display: flex; flex-direction: column; gap: 1px; min-width: 148px; }
.plate-id b { font-size: 14px; font-weight: 680; letter-spacing: -.01em; }
.plate-id small { font-size: 11px; color: var(--muted); }
.plate-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plate-meta .num { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

.plate-band {
  display: flex; gap: 3px; padding: 0 16px 14px; align-items: stretch;
  min-height: 74px;
}
.plate-z {
  border-radius: var(--r); border: 1px solid var(--line); background: var(--sunk);
  padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 5px;
  min-width: 0; position: relative; overflow: hidden; text-align: left;
}
.plate-z:hover { border-color: var(--orange-dk); }
.plate-z-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plate-z-n { font-size: 13px; font-weight: 680; letter-spacing: -.02em; }
.plate-z-n span { font-size: 10.5px; font-weight: 500; color: var(--faint); }
.plate-z-bar { margin-top: auto; height: 5px; border-radius: 3px; background: #E2DBCB; overflow: hidden; }
.plate-z-bar i { display: block; height: 100%; border-radius: 3px; background: var(--orange); }
.plate-z.is-hot .plate-z-bar i { background: var(--bad); }
.plate-z.is-hot .plate-z-n { color: var(--bad); }
.plate-z.is-staffed { background: var(--surface); border-color: #E9DFC6; }
.plate-z.is-staffed .plate-z-l { color: var(--orange-tx); }
/* A zone this club does not have. Hatched, not hidden — the absence is the point. */
.plate-z.is-absent {
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(16,19,15,.055) 5px 10px);
  background-color: var(--paper); border-style: dashed; border-color: #DED6C4;
}
.plate-z.is-absent .plate-z-n, .plate-z.is-absent .plate-z-bar { display: none; }
.plate-z.is-absent .plate-z-l { color: var(--faint); }
.plate-z.is-absent::after {
  content: "not here"; font-size: 9.5px; color: var(--faint); margin-top: auto; font-style: italic;
}
.plate.is-preopen .plate-band { opacity: .58; }

/* ============================================================================
   BESPOKE COMPONENT 2 — THE 24-HOUR RIBBON
   24 fixed columns. The staffed window is solid; the hours nobody is there are
   left open. Events sit on the hour they happened. The dead hours become literal.
   ========================================================================== */
.ribbon { padding: 14px 16px 16px; }
.ribbon-row { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.ribbon-row:last-child { margin-bottom: 0; }
.ribbon-id b { display: block; font-size: 13px; font-weight: 660; }
.ribbon-id small { font-size: 10.5px; color: var(--muted); }
/* Fixed 24 columns — auto sizing would let a busy hour dominate and the strip
   would stop reading as a clock. */
.ribbon-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.ribbon-h {
  height: 34px; border-radius: 3px; border: 1px solid var(--line-soft);
  background: var(--paper); position: relative; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
}
.ribbon-h.is-staffed { background: var(--crest-ink); border-color: var(--crest-ink); }
.ribbon-h.is-dark {
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(16,19,15,.07) 4px 8px);
}
.ribbon-h:hover { border-color: var(--orange-dk); }
.ribbon-h.is-picked { outline: 2px solid var(--orange-dk); outline-offset: 1px; }
.ribbon-h i { display: block; height: 4px; margin: 0 1px 1px; border-radius: 2px; background: var(--faint); }
.ribbon-h i.ev-access { background: var(--orange); }
.ribbon-h i.ev-clean  { background: var(--cool); }
.ribbon-h i.ev-fault  { background: var(--bad); }
.ribbon-h i.ev-tailgate { background: var(--bad); }
.ribbon-h i.ev-lone   { background: var(--warn); }
.ribbon-h i.ev-quiet  { background: #C9C2B2; }
.ribbon-scale { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: 4px; }
.ribbon-scale span { font: 600 8.5px/1 var(--mono); color: var(--faint); text-align: center; }
.ribbon-key { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ribbon-key div { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.ribbon-key em { width: 14px; height: 5px; border-radius: 2px; display: block; font-style: normal; }
/* Cell-state swatches have to be cell-shaped, not pip-shaped, or the legend does
   not explain the three states the ribbon is actually made of. */
.ribbon-key em.sw { width: 15px; height: 14px; border-radius: 3px; border: 1px solid var(--line-soft); }
.ribbon-key em.sw.is-staffed { background: var(--crest-ink); border-color: var(--crest-ink); }
.ribbon-key em.sw.is-dark {
  background: var(--paper);
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(16,19,15,.14) 4px 8px);
}
.ribbon-key em.sw.is-shut { background: var(--paper); }

/* ============================================================================
   BESPOKE COMPONENT 3 — THE NOTICE TRAIL
   A cancellation drawn as the legal record it is under RCW 19.142: signal,
   evidence, the statutory clock, the last legitimate charge, and any charge that
   landed after it — marked as what it is.
   ========================================================================== */
.trail { position: relative; padding: 4px 0 0 26px; }
.trail::before {
  content: ""; position: absolute; left: 7px; top: 12px; bottom: 14px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.trail-n { position: relative; padding-bottom: 18px; }
.trail-n:last-child { padding-bottom: 0; }
.trail-n::before {
  content: ""; position: absolute; left: -23px; top: 4px; width: 12px; height: 12px;
  border-radius: 999px; background: var(--surface); border: 2px solid var(--line-soft);
  box-shadow: 0 0 0 3px var(--surface);
}
.trail-n.is-done::before { background: var(--crest-ink); border-color: var(--crest-ink); }
.trail-n.is-live::before { background: var(--orange); border-color: var(--orange-dk); }
.trail-n.is-breach::before { background: var(--bad); border-color: var(--bad); }
.trail-n b { display: block; font-size: 12.5px; font-weight: 660; }
.trail-n p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.trail-ev { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.trail-ev .chip { font-weight: 550; }
.trail-clock {
  margin-top: 8px; height: 8px; border-radius: 4px; background: var(--sunk);
  border: 1px solid var(--line-soft); overflow: hidden; position: relative;
}
.trail-clock i { display: block; height: 100%; background: var(--orange); }
.trail-clock.is-over i { background: var(--bad); }
.trail-charge {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 10px;
  border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--paper); font-size: 12px;
}
.trail-charge .num { margin-left: auto; font-weight: 660; }
.trail-charge.is-breach { background: var(--bad-sf); border-color: #F2CFCB; color: var(--bad); }
.trail-charge.is-breach .num { color: var(--bad); }

/* ============================================================================
   BESPOKE COMPONENT 4 — THE MARGIN BAR
   What a plan pays, drawn as a line. What it consumes, stacked against it. When
   consumption crosses the line the overflow renders past it, in red.
   ========================================================================== */
.mbar-row { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.mbar-row:last-child { border-bottom: 0; }
.mbar-row.is-picked { background: var(--orange-sf); }
.mbar-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mbar-top b { font-size: 13px; font-weight: 660; }
.mbar-top small { font-size: 11px; color: var(--muted); }
.mbar-top .mbar-net { margin-left: auto; font-size: 13px; font-weight: 700; }
.mbar-net.is-good { color: var(--good); }
.mbar-net.is-bad { color: var(--bad); }
/* The pay label lives outside the track, so it cannot be clipped by the track's
   own overflow when the line sits far to the right. */
.mbar-wrap { position: relative; padding-top: 15px; }
.mbar-track {
  position: relative; height: 26px; border-radius: var(--r-sm);
  background: var(--sunk); border: 1px solid var(--line-soft); overflow: hidden;
  display: flex;
}
.mbar-seg { height: 100%; border-right: 1px solid rgba(255,255,255,.55); min-width: 0; }
.mbar-seg:last-child { border-right: 0; }
.mbar-seg.is-over { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255,255,255,.28) 4px 8px); }
/* The pay line, drawn over the track inside .mbar-wrap so its label is never
   clipped by the track's overflow. Owner of an absolutely positioned child. */
.mbar-pay {
  position: absolute; top: 12px; bottom: 0; width: 2px; background: var(--crest-ink); z-index: 3;
}
.mbar-pay::after {
  content: attr(data-l); position: absolute; top: -13px; left: 4px; white-space: nowrap;
  font: 700 9.5px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--crest-ink);
}
/* Past halfway the label would run off the end, so it flips to the other side. */
.mbar-pay.is-flip::after { left: auto; right: 4px; }
.mbar-key { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.mbar-key div { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.mbar-key em { width: 9px; height: 9px; border-radius: 2px; display: block; font-style: normal; }

/* ============================================================================
   BESPOKE COMPONENT 5 — THE RATIO METER
   Kids Club capacity is a legal staffing question, not a comfort question. Draw
   the staff-equivalents each age band demands, stacked against the staff present.
   ========================================================================== */
.ratio { display: flex; flex-direction: column; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.ratio:last-child { border-bottom: 0; }
.ratio-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ratio-top b { font-size: 13px; font-weight: 660; }
.ratio-top small { font-size: 11px; color: var(--muted); }
.ratio-top .chip { margin-left: auto; }
.ratio-track { position: relative; display: flex; height: 30px; gap: 2px; }
.ratio-slot {
  flex: 1 1 0; border-radius: var(--r-sm); border: 1px dashed var(--line);
  background: var(--paper); position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.ratio-slot.is-filled { border-style: solid; border-color: #E9DFC6; background: var(--orange-sf); }
.ratio-slot.is-over { border-color: var(--bad); background: var(--bad-sf); }
.ratio-slot b { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-tx); }
.ratio-slot.is-over b { color: var(--bad); }
.ratio-slot.is-empty b { color: var(--faint); }
.ratio-bands { display: flex; gap: 6px; flex-wrap: wrap; }
.ratio-band { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); padding: 3px 8px; border-radius: 999px; background: var(--sunk); }
.ratio-band .num { font-weight: 700; }

/* ============================================================== agent bench
   An agent is a worker with a reach and a leash, so it is drawn as the path the
   work travels, running into a barrier it cannot cross alone. Not a card.  */
.bench { border-bottom: 1px solid var(--line); }
.bench:last-child { border-bottom: 0; }
.bench-row { display: grid; grid-template-columns: 210px 1fr 232px; gap: 0; 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-arrow svg { width: 16px; height: 16px; }

/* the wall */
.bench-wall {
  border-left: 3px solid var(--crest-ink); padding: 15px 16px; position: relative;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,35,24,.075) 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: #7C2B23; 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(168,35,24,.2);
  font-size: 11.5px; font-weight: 650; color: var(--bad); display: flex; align-items: center; gap: 6px;
}

/* ================================================================ court grid
   Fixed columns per hour so the day reads as a matrix. */
.courts { padding: 14px 16px 16px; }
.court-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.court-lane { display: grid; gap: 2px; }
.court-blk {
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper);
  padding: 6px 8px; min-height: 46px; text-align: left; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.court-blk b { font-size: 11.5px; font-weight: 660; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.court-blk small { font-size: 10px; color: var(--muted); }
.court-blk.is-rental { background: var(--orange-sf); border-color: #F0D9AF; }
.court-blk.is-rental b { color: var(--orange-tx); }
.court-blk.is-hold { background: var(--bad-sf); border-color: #F2CFCB; }
.court-blk.is-hold b { color: var(--bad); }
.court-blk.is-member { background: var(--surface); }
.court-blk:hover { border-color: var(--orange-dk); }
.court-scale { display: grid; gap: 2px; margin-top: 2px; }
.court-scale span { font: 600 9px/1 var(--mono); color: var(--faint); text-align: left; padding-left: 2px; }

/* ============================================================ misc modules */
.split { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.split.is-wide { grid-template-columns: 400px 1fr; }
.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(--paper); }
.pick.is-picked { background: var(--orange-sf); }
.pick.is-picked::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange);
}
.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); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pick-r { flex: 0 0 auto; text-align: right; }

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

.note {
  padding: 11px 13px; border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line-soft); font-size: 12px; color: var(--ink-2); line-height: 1.55;
}
.note.is-brand { background: var(--orange-sf); border-color: #F0D9AF; }
.note.is-bad { background: var(--bad-sf); border-color: #F2CFCB; color: #7C2B23; }
.note b { font-weight: 660; }

.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(--crest-ink); color: var(--cream); border-top-right-radius: var(--r-sm); }
.msg.is-agent .msg-b { background: var(--orange-sf); border: 1px solid #F0D9AF; color: #5C3703; }
.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(--paper);
  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(--orange-tx); }
.bolt:hover { background: var(--orange-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); }
.lead .num { font-size: 11.5px; font-weight: 660; color: var(--orange-tx); }

.rdy { display: flex; flex-direction: column; gap: 2px; }
.rdy-i { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.rdy-i:last-child { border-bottom: 0; }
.rdy-i b { flex: 1 1 auto; font-size: 12.5px; font-weight: 570; }
.rdy-box {
  width: 17px; height: 17px; border-radius: var(--r-sm); border: 1.5px solid var(--line);
  display: grid; place-items: center; flex: 0 0 17px; color: transparent;
}
.rdy-i.is-done .rdy-box { background: var(--good); border-color: var(--good); color: #fff; }
.rdy-i.is-done b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.rdy-i.is-block .rdy-box { border-color: var(--bad); background: var(--bad-sf); }

.presale { position: relative; height: 34px; border-radius: var(--r); background: var(--sunk); border: 1px solid var(--line-soft); overflow: hidden; }
.presale i { display: block; height: 100%; background: var(--orange); }
.presale-be { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--crest-ink); }
.presale-be::after {
  content: attr(data-l); position: absolute; top: 2px; left: 6px; white-space: nowrap;
  font: 700 9.5px/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--crest-ink);
  background: rgba(255,255,255,.88); padding: 1px 4px; border-radius: 2px;
}
.presale-l { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 660; color: #2A1A02; }

/* ================================================================ responsive */
.rail-scrim { display: none; }
@media (max-width: 1180px) {
  .split, .split.is-wide { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bench-row { grid-template-columns: 190px 1fr 210px; }
}
@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(16,19,15,.34); 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; }
  /* the agent path rotates from a row into steps */
  .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(--crest-ink); }
  .plate-band { overflow-x: auto; padding-bottom: 16px; }
  .plate-z { min-width: 84px; }
  .ribbon-row { grid-template-columns: 1fr; gap: 6px; }
  .courts { overflow-x: auto; }
  .court-row { grid-template-columns: 64px 1fr; }
}
@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; }
}

@media print { .rail, .topbar, .synthetic { display: none; } }

/* ============================================================================
   BESPOKE COMPONENT 6 — THE RANK-FLIP STRIP
   Two ranked columns, joins on the left and contribution on the right, with a
   line per person running between them. Where the lines cross is the argument:
   the best closer on the floor is the worst earner for the company, and no
   leaderboard in any gym CRM can show that because none of them price the club.
   ========================================================================== */
.flip { position: relative; padding: 14px 16px 16px; }
.flip-head { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; margin-bottom: 10px; }
.flip-head .tag { text-align: center; }
.flip-head .tag:first-child { text-align: left; }
.flip-head .tag:last-child { text-align: right; }
.flip-body { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 0; align-items: stretch; }
.flip-col { display: flex; flex-direction: column; gap: 6px; }
.flip-n {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  min-height: 42px;
}
.flip-col.is-right .flip-n { flex-direction: row-reverse; text-align: right; }
.flip-n .rk {
  width: 20px; height: 20px; border-radius: var(--r-sm); flex: 0 0 20px;
  display: grid; place-items: center; background: var(--sunk);
  font: 700 11px var(--sans); color: var(--muted);
}
.flip-n.is-top .rk { background: var(--crest-ink); color: var(--cream); }
.flip-n b { flex: 1 1 auto; font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flip-n .v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.flip-n .v.is-bad { color: var(--bad); }
.flip-n .v.is-good { color: var(--good); }
.flip-n.is-picked { border-color: var(--orange-dk); background: var(--orange-sf); }
/* The middle gutter holds the SVG that draws the crossings. It must override the
   global 16px icon default, or it collapses to a 16px square and the whole
   component silently disappears. */
.flip-lines { position: relative; }
.flip-lines svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.flip-key { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------- the activity funnel bar */
.fnl { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.fnl-s { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
.fnl-s i { display: block; border-radius: 2px 2px 0 0; background: var(--orange); }
.fnl-s.is-last i { background: var(--crest-ink); }
.fnl-s span {
  font: 600 8.5px/1 var(--mono); color: var(--faint); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fnl-lab { display: flex; gap: 3px; margin-top: 3px; }
.fnl-lab span { flex: 1 1 0; font-size: 8.5px; color: var(--faint); text-align: center; text-transform: uppercase; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------- the pay ladder */
.pay { display: flex; flex-direction: column; gap: 0; }
.pay-r { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.pay-r:last-child { border-bottom: 0; }
.pay-r b { flex: 1 1 auto; font-size: 12.5px; font-weight: 570; }
.pay-r small { font-size: 11px; color: var(--muted); display: block; font-weight: 400; }
.pay-r .v { font-size: 13px; font-weight: 680; font-variant-numeric: tabular-nums; }
.pay-r.is-total { border-top: 2px solid var(--crest-ink); border-bottom: 0; padding-top: 12px; }
.pay-r.is-total .v { font-size: 17px; }
.pay-r.is-lost .v { color: var(--bad); }
.pay-r.is-lost b { color: var(--bad); }
.pay-bar { height: 22px; border-radius: var(--r-sm); overflow: hidden; display: flex; border: 1px solid var(--line-soft); }
.pay-bar i { display: block; height: 100%; }
.pay-bar i.is-base { background: var(--crest-ink); }
.pay-bar i.is-bonus { background: var(--orange); }
.pay-bar i.is-lost {
  background: var(--bad-sf);
  background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(168,35,24,.35) 4px 8px);
}

/* ------------------------------------------------------ seat target rows */
.seat-r { display: grid; grid-template-columns: 1fr 78px 78px 84px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.seat-r:last-child { border-bottom: 0; }
.seat-r .num { text-align: right; font-weight: 620; }
.seat-r .tag { grid-column: 1 / -1; padding-bottom: 2px; }
.seat-hd { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------- three-filter diagnosis */
.tri { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tri-f { flex: 1 1 0; padding: 10px 12px; border-right: 1px solid var(--line-soft); background: var(--paper); text-align: center; }
.tri-f:last-child { border-right: 0; }
.tri-f b { display: block; font-size: 12px; font-weight: 660; color: var(--faint); }
.tri-f small { font-size: 10.5px; color: var(--faint); }
.tri-f.is-on { background: var(--orange-sf); }
.tri-f.is-on b { color: var(--orange-tx); }
.tri-f.is-on small { color: var(--orange-tx); }

@media (max-width: 900px) {
  .flip-head, .flip-body { grid-template-columns: 1fr; }
  .flip-lines { display: none; }
  .flip-col.is-right .flip-n { flex-direction: row; text-align: left; }
  .flip-col.is-right { margin-top: 12px; }
  .seat-r { grid-template-columns: 1fr 62px 62px; }
  .seat-r > :nth-child(5) { display: none; }
  .tri { flex-direction: column; }
  .tri-f { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}