/* ============================================================================
   Slick Rock Tanning & Spa OS
   Their wordmark is a WHITE knockout beside a red badge — composited on white it
   vanishes entirely and only the badge survives. So the shell is dark. Cool
   near-black rather than a warm one, because the brand line is "where technology
   meets confidence" and the accent is a hot #ED1C24.

   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 larger says so explicitly.
   - Uniform grids use grid-template-columns / table-layout: fixed, never auto.
   ========================================================================== */

:root {
  --red:      #ED1C24;
  --red-dk:   #C1141B;
  --red-sf:   #2A1416;
  --red-tx:   #FF6A6E;

  /* cool near-black */
  --bg:       #0C0E12;
  --rail:     #101319;
  --surface:  #14181F;
  --raised:   #1A1F28;
  --sunk:     #0F1217;
  --line:     #232935;
  --line-soft:#1B2029;

  --tx:       #EEF1F5;
  --tx-2:     #B9C1CC;
  --muted:    #7E8896;
  --faint:    #5C6674;

  --good:     #2FBF71;
  --good-sf:  #10241B;
  --warn:     #E0A030;
  --warn-sf:  #241D10;
  --bad:      #ED1C24;
  --bad-sf:   #2A1416;
  --blue:     #2F80C4;
  --blue-sf:  #101E2A;

  --r-sm: 4px; --r: 7px; --r-lg: 11px;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-3: 0 16px 40px rgba(0,0,0,.55);

  --rail-w: 15.5rem;
  --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(--bg); color: var(--tx);
  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, and 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; }
/* Any library that RENDERS an SVG — ECharts in svg mode, a hand-drawn map — is
   caught by the icon default above and silently collapses to a 16px square. The
   element exists, so a "did it render" assertion passes and the chart is gone.
   ECharts stamps `_echarts_instance_` on its container; that is the reliable hook. */
[_echarts_instance_] svg { width: 100% !important; height: 100% !important; }
: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: #000; color: #9BA4B0; font-size: 11.5px; }
.synthetic b { color: var(--red-tx); font-weight: 700; }

/* =================================================================== 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: 16px 14px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
/* The wordmark is a white knockout — it needs the dark rail, no plate. */
.crest { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.crest img { display: block; width: 100%; height: auto; max-height: 38px; object-fit: contain; object-position: left center; }
.app.is-collapsed .crest img { max-height: 30px; }
.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(--raised); color: var(--tx); }
.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: #2A313D; 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(--tx-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: .7; }
.nav-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row:hover { background: var(--raised); color: var(--tx); }
.nav-row.is-current { background: var(--red); color: #fff; font-weight: 620; }
.nav-row.is-current svg { opacity: 1; }
.nav-row.is-ancestor { color: var(--tx); font-weight: 600; }
.nav-row.is-ancestor svg { opacity: 1; color: var(--red-tx); }
.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(--red); }

.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(--raised); color: var(--tx-2); }
.nav-kid.is-current { color: var(--red-tx); 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-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; }
.nav-divider .tag { color: var(--red-tx); 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: 210px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunk); 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(--raised); color: var(--muted); }
.avatar { width: 32px; height: 32px; border-radius: var(--r-sm); flex: 0 0 32px; background: var(--red); 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(--raised); color: var(--tx); }

.page { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 20px 20px 64px; }
.page-wrap { max-width: 1400px; 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); }
.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(--raised); font-size: 12.5px; font-weight: 600; color: var(--tx-2); }
.btn:hover { background: #222834; color: var(--tx); }
.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; }
.btn.is-ghost:hover { background: var(--raised); }
.btn.is-sm { padding: 4px 9px; font-size: 11.5px; }
.btn[disabled] { opacity: .4; 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(--raised); color: var(--tx-2); border: 1px solid var(--line); }
.chip.is-good { background: var(--good-sf); color: var(--good); border-color: #1B4030; }
.chip.is-warn { background: var(--warn-sf); color: var(--warn); border-color: #3D331C; }
.chip.is-bad  { background: var(--bad-sf);  color: var(--red-tx); border-color: #4A2124; }
.chip.is-blue { background: var(--blue-sf); color: #6FB3E8; border-color: #1D3448; }

.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(--red);  box-shadow: 0 0 0 3px var(--bad-sf); }

.band { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); 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(--red-tx); }

.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(--sunk); 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(--raised); }
.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(--raised); color: var(--tx-2); }
.tab.is-current { background: var(--red); 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(--red); color: #fff; padding: 10px 16px; border-radius: var(--r); font-size: 12.5px; font-weight: 560; 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(0,0,0,.6); 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(540px, 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: 380px 1fr; gap: 16px; align-items: start; }
.split.is-wide { grid-template-columns: 440px 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(--raised); }
.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: 140px 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(--sunk); border: 1px solid var(--line-soft); font-size: 12px; color: var(--tx-2); line-height: 1.55; }
.note.is-brand { background: var(--red-sf); border-color: #43201F; color: #F0C9C7; }
.note.is-bad { background: var(--bad-sf); border-color: #4A2124; color: #F3B9B7; }
.note.is-blue { background: var(--blue-sf); border-color: #1D3448; color: #B8D6EC; }
.note b { color: var(--tx); }
.note.is-brand b, .note.is-bad b { color: #FFD9D7; }

.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(--raised); border-top-left-radius: var(--r-sm); }
.msg.is-us { align-items: flex-end; }
.msg.is-us .msg-b { background: var(--red); color: #fff; border-top-right-radius: var(--r-sm); }
.msg.is-agent .msg-b { background: var(--red-sf); border: 1px solid #43201F; color: #F0C9C7; }
.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(--sunk); 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-tx); }
.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(--raised); 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 ROOM BOARD
   Twelve rooms, live. This is the screen a person alone on a Saturday looks at
   two hundred times a shift, so it has to answer "what is free right now" from
   across the counter, not after a click.
   ========================================================================== */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; padding: 14px 16px 16px; }
.rm {
  position: relative; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--sunk); padding: 11px 12px 12px; text-align: left; min-height: 108px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.rm:hover { border-color: var(--tx-2); }
.rm.is-picked { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.rm-n { font: 700 12.5px var(--sans); letter-spacing: -.01em; }
.rm-l { font-size: 10.5px; color: var(--muted); }
.rm-s { margin-top: auto; font-size: 11.5px; font-weight: 650; }
.rm.is-free   { background: #0F1A14; border-color: #1E3A2A; }
.rm.is-free .rm-s { color: var(--good); }
.rm.is-running { background: #16171F; border-color: #2B2F45; }
.rm.is-running .rm-s { color: #9BB6FF; }
.rm.is-turnover { background: #211B10; border-color: #3D331C; }
.rm.is-turnover .rm-s { color: var(--warn); }
.rm.is-down { background: var(--bad-sf); border-color: #4A2124; }
.rm.is-down .rm-s { color: var(--red-tx); }
/* the countdown — the thing that makes it read as live equipment */
.rm-t { font: 700 26px/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.rm-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; margin-top: 6px; }
.rm-bar i { display: block; height: 100%; background: #6E8BE8; }
.rm.is-turnover .rm-bar i { background: var(--warn); }
.rm-who { font-size: 10.5px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-lamp { position: absolute; top: 9px; right: 10px; font: 700 9px var(--mono); color: var(--red-tx); }
.board-key { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 16px 16px; }
.board-key div { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.board-key em { width: 12px; height: 12px; border-radius: 3px; display: block; }

/* ============================================================================
   BESPOKE 2 — THE ELIGIBILITY GATE
   Every rule that governs a UV session, each with the actual data behind it. No
   verdict without its evidence — because the desk has to say the reason out loud
   to a person who is standing right there.
   ========================================================================== */
.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: .85; }
.gate-v.is-ok { background: var(--good-sf); color: #6FE0A6; }
.gate-v.is-no { background: var(--bad-sf); color: #FF9A9C; }
.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 #1E4433; }
.gate-c.is-no i { background: var(--bad-sf); color: var(--red-tx); border: 1px solid #4A2124; }
.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; }
.gate-c.is-no small { color: #E8A8A8; }

/* -------------------------------------------------- the exposure time dial */
.dial { display: flex; align-items: center; gap: 14px; padding: 14px 15px; background: var(--sunk); border-radius: var(--r); border: 1px solid var(--line); }
.dial-n { font: 800 40px/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dial-u { font-size: 12px; color: var(--muted); font-weight: 600; }
.dial-m { flex: 1 1 auto; min-width: 0; }
.dial-m b { display: block; font-size: 12px; font-weight: 650; }
.dial-m small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.dial-b { display: flex; gap: 5px; }
.dial-b button { width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--raised); font-weight: 700; }
.dial-b button:hover { background: #232935; }
.dial.is-blocked .dial-n { color: var(--red-tx); font-size: 22px; }

/* ---------------------------------------------- the exposure ladder (history)
   Tanning is progressive — you build up. Drawn as the climb it is, with the
   ceiling for this skin type marked, because that is the thing the member
   argues with and the desk has to be able to point at. */
.ladder { display: flex; align-items: flex-end; gap: 5px; height: 116px; padding: 0 2px; }
.ladder-s { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.ladder-s i { display: block; border-radius: 3px 3px 0 0; background: var(--red); opacity: .42; }
.ladder-s.is-now i { opacity: 1; }
.ladder-s b { font: 700 10px var(--mono); text-align: center; color: var(--tx-2); }
.ladder-s small { font-size: 8.5px; color: var(--faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ladder-wrap { position: relative; }
.ladder-cap { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,.4); z-index: 2; }
.ladder-cap::after { content: attr(data-l); position: absolute; right: 0; top: -13px; font: 700 8.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ============================================================================
   BESPOKE 3 — THE TURNOVER CARD
   The published 100% cleanliness guarantee, as the twelve things that actually
   have to happen before the room can be sold again.
   ========================================================================== */
.turn { padding: 14px 16px; }
.turn-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.turn-i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); background: var(--sunk); border: 1px solid var(--line-soft); font-size: 11.5px; }
.turn-i i { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--faint); flex: 0 0 14px; display: grid; place-items: center; font-style: normal; font-size: 9px; }
.turn-i.is-done { color: var(--muted); }
.turn-i.is-done i { background: var(--good); border-color: var(--good); color: #06180F; }
.turn-i.is-done span { text-decoration: line-through; text-decoration-color: var(--faint); }

/* ============================================================================
   BESPOKE 4 — THE QUEUE
   Who is at the counter, in order, each already resolved against the room they
   asked for — so the answer is on screen before they finish saying their name.
   ========================================================================== */
.q { display: flex; flex-direction: column; }
.qr { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); width: 100%; text-align: left; position: relative; }
.qr:last-child { border-bottom: 0; }
.qr:hover { background: var(--raised); }
.qr.is-picked { background: var(--red-sf); }
.qr.is-picked::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); }
.qr-t { font: 700 11px var(--mono); color: var(--faint); flex: 0 0 38px; }
.qr-m { flex: 1 1 auto; min-width: 0; }
.qr-m b { display: block; font-size: 13px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-m small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-v { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center; font: 700 9px var(--sans); }
.qr-v.is-ok { background: var(--good-sf); color: var(--good); border: 1px solid #1E4433; }
.qr-v.is-no { background: var(--bad-sf); color: var(--red-tx); border: 1px solid #4A2124; }

/* ------------------------------------------------------ the connection strip
   SunLync lists Offline Utility as a feature and still goes down. So this does
   not claim resilience, it displays it.
   ========================================================================== */
.link { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--sunk); font-size: 11.5px; }
.link.is-online { border-color: #1E4433; }
.link.is-degraded { border-color: #3D331C; background: var(--warn-sf); }
.link b { font-weight: 660; }
.link .num { margin-left: auto; color: var(--muted); font-size: 11px; }

/* ============================================================ the feature map
   SunLync's own published list, and what this build does about each line.
   ========================================================================== */
.fmap { border-bottom: 1px solid var(--line); }
.fmap:last-child { border-bottom: 0; }
.fmap-h { padding: 11px 16px; background: var(--sunk); border-bottom: 1px solid var(--line-soft); }
.fm { display: grid; grid-template-columns: 268px 96px 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(--tx-2); }
/* ============================================================== agent bench */
.bench { border-bottom: 1px solid var(--line); }
.bench:last-child { border-bottom: 0; }
.bench-row { display: grid; grid-template-columns: 208px 1fr 244px; 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(--tx-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(--red); padding: 15px 16px;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(237,28,36,.09) 6px 12px);
  background-color: var(--red-sf);
}
.bench-wall .tag { color: var(--red-tx); 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: #F0C9C7; display: flex; align-items: flex-start; gap: 6px; }
.bench-wall li::before { content: "\00d7"; font-weight: 700; color: var(--red); flex: 0 0 auto; }
.bench-wait { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(237,28,36,.25); font-size: 11.5px; font-weight: 650; color: var(--red-tx); display: flex; align-items: center; gap: 6px; }

/* ================================================================ 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: 186px 1fr 220px; }
  .stk { grid-template-columns: 160px 1fr 1fr; }
}
@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(0,0,0,.6); 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(--red); }
  .stk { grid-template-columns: 1fr; }
  .stk-t, .stk-d { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stk-g { border-left: 0; border-top: 3px solid var(--red); }
  .clus { grid-template-columns: 1fr; gap: 10px; }
  .clus-gap::before { display: none; }
  .acc { grid-template-columns: 1fr; }
  .wall-g { grid-template-columns: repeat(auto-fill, minmax(76px, 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; }
}