/* Front of House: "production desk" theme (docs/ART_DIRECTION.md, section 5). */

:root {
  --desk: #0e1117;
  --sheet: #161a23;
  --panel: #1e2430;
  --panel-alt: #131720;
  --border: #2b3242;
  --border-strong: #475569;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --cyan: #00f0ff;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --yellow: #facc15;
  --coral: #f43f5e;
  --teal: #06b6d4;
  --settlement-paper: #1b1916;
  --settlement-panel: #242019;
  --settlement-line: #6f542a;
  --settlement-ink: #f6e5bd;
  --settlement-muted: #c3a979;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 4px;
  /* HUD backplates (docs/HUD.md section 7): near-opaque, so small text keeps 4.5:1 over the board. */
  --plate: rgba(13, 17, 25, 0.88);
  --plate-line: rgba(148, 163, 184, 0.28);
  /* Set from game.js: the room the shared MixMash nav needs, and the strip's height. */
  --nav-room: 236px;
  --strip-h: 60px;
  --board-bottom: 0px;
  --clear-cx: 50vw;
  --clear-w: 100vw;
  /* Corner plate widths in the Build and Show HUD (docs/HUD.md section 3). */
  --corner-w: clamp(268px, 24vw, 330px);
  --status-w: clamp(300px, 25vw, 340px);
}

/* Daylight controls are the default; the board keeps the venue's time of day. */
:root:not([data-theme='dark']) {
  color-scheme: light;
  --desk: #e7e9ec;
  --sheet: #f8fafc;
  --panel: #e2e8f0;
  --panel-alt: #f1f5f9;
  --border: #bdc8d5;
  --border-strong: #718096;
  --text: #172332;
  --text-muted: #475569;
  --cyan: #006574;
  --green: #166534;
  --red: #a51d2d;
  --amber: #854d0e;
  --yellow: #875400;
  --teal: #0e6676;
  --settlement-paper: #fbf4e5;
  --settlement-panel: #f2e5cc;
  --settlement-line: #9b6b24;
  --settlement-ink: #362713;
  --settlement-muted: #70552d;
  --plate: #f8fafc;
  --plate-line: #718096;
}
:root[data-theme='dark'] { color-scheme: dark; }

* { box-sizing: border-box; }
/* The page never scrolls (docs/HUD.md): the board is the page, and the panel and the
   menu scroll inside themselves. */
html { background: var(--desk); height: 100%; overflow: hidden; }
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: radial-gradient(ellipse 70% 40% at 30% 0%, rgba(0, 240, 255, 0.06), transparent 60%), var(--desk);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--cyan); color: #050b14; padding: 10px 14px; font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { top: calc(var(--strip-h) + 8px); }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

a { color: var(--cyan); }

/* ---------- Top strip ---------- */
/* One row across the top. The shared MixMash nav (src/kit/nav.js) floats at its left;
   Front of House keeps its hub and mute pills there and puts full screen and the source
   link in the menu (docs/HUD.md decision 4). */
.mixnav button[title='Toggle fullscreen'],
.mixnav a[href^='https://github.com'] { display: none; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 14;
  display: flex; align-items: center; gap: 8px 20px; min-height: 60px;
  padding: 7px 12px 7px var(--nav-room);
  background: var(--plate); border-bottom: 1px solid var(--plate-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.brand { flex: none; }
.brand h1 { margin: 0; font-size: 1.1rem; line-height: 1.2; letter-spacing: 0.01em; }
.tagline { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.early { color: var(--amber); margin-left: 6px; }

.stepper {
  display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.stepper li { padding: 6px 10px; color: var(--text-muted); border: 1px solid transparent; border-radius: var(--radius); white-space: nowrap; }
.stepper li .num { opacity: 0.7; }
.stepper li.done { color: var(--text); }
.stepper li[aria-current='step'] { color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.4); }

.meters { display: flex; gap: 16px; margin: 0; flex: none; }
.meters div { display: flex; flex-direction: column; }
.meters dt { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.meters dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; }

.menu-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.menu-btn[aria-expanded='true'] { border-color: var(--cyan); color: var(--cyan); }
.key { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--border-strong); border-radius: 3px; font-size: 0.65rem; line-height: 16px; color: var(--text-muted); text-align: center; }

/* ---------- The board fills the window ---------- */
.layout { display: block; }
#board { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; cursor: crosshair; }
body:not([data-phase='build']) #board { cursor: default; }

/* The camera buttons sit in the top strip; on phones they float over the board. */
.camera-row { display: flex; gap: 4px; flex: none; }
.camera-row button { min-width: 44px; padding: 0 10px; font-size: 1rem; }
.camera-row .renderer-btn { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; }
/* The 2D/3D switch lights the view on screen; pressed (aria-pressed) means 3D is on. */
.renderer-btn .renderer-seg { padding: 2px 5px; border-radius: 4px; color: var(--text-muted); }
.renderer-btn .renderer-seg[data-on] { color: var(--desk); background: var(--cyan); }

/* The board's status line: a short toast under the strip, centred on the clear part of
   the board. It fades a few seconds after each change. */
.board-status {
  pointer-events: none;
  position: fixed; z-index: 11; top: calc(var(--strip-h) + 8px); left: var(--clear-cx); transform: translateX(-50%);
  width: max-content; max-width: min(520px, calc(var(--clear-w) - 24px));
  margin: 0; padding: 6px 12px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); text-align: center;
  background: var(--plate); border: 1px solid var(--plate-line); border-radius: 8px;
  transition: opacity 0.4s;
}
body[data-layout='hud'] .board-status { max-width: min(520px, calc(var(--clear-w) - 2 * var(--status-w) - 72px)); }
.board-status:empty { display: none; }
.board-status.quiet { opacity: 0; pointer-events: none; }

/* ---------- The controls layer ---------- */
/* #panel stays the one "Controls" landmark, in reading order; its plates are placed with
   CSS (docs/HUD.md section 7). Clicks reach the board between plates. */
.panel {
  position: fixed; z-index: 12; left: 0; right: 0; top: var(--strip-h); bottom: 0;
  pointer-events: none;
}
.panel:focus { outline: none; }
.panel h2 { margin: 0; font-size: 1.15rem; }
.panel h3 { margin: 0 0 6px; font-size: 0.95rem; }
.panel p { margin: 0; }
.plate {
  position: absolute; pointer-events: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--plate); border: 1px solid var(--plate-line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.plate > * { flex: none; }
.at-tl { top: 12px; left: 12px; width: var(--corner-w); }
.at-tr { top: 12px; right: 12px; width: var(--status-w); }
.at-bl { bottom: 12px; left: 12px; }
.at-br { bottom: 12px; right: 12px; }
.plate[hidden] { display: none; }
.sheet-controls { display: none; }
.show-status { color: var(--text-muted); font-size: 0.8rem; }
body .mixnav.is-idle { opacity: 1; }

/* The sheet on the right, for Book, Promote, Settle and Done (docs/HUD.md step 4). It never
   scrolls at 1024 x 700 and up: forms take two columns, and documents open in a window. */
.at-sheet {
  top: 12px; right: 12px; width: clamp(340px, 32vw, 420px);
  max-height: calc(100vh - var(--strip-h) - 24px);
  max-height: calc(100dvh - var(--strip-h) - 24px);
  /* Only below 1024 x 700, where the no-scroll rule stops, can a sheet need its scrollbar. */
  overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 16px; gap: 10px; background: var(--sheet); border-color: var(--border-strong);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-phase='book'] .at-sheet,
body[data-phase='promote'] .at-sheet { width: clamp(580px, 54vw, 760px); }
/* The map dims behind the documents; Promote keeps it bright (docs/HUD.md section 4). Book
   dims lightly: the empty lot is already dark, and a heavy dim against the light page made
   it read as an unlit black slab. */
body[data-phase='book'] #board { filter: brightness(0.85) saturate(0.9); }
body[data-phase='settle'] #board,
body[data-phase='done'] #board { filter: brightness(0.55) saturate(0.8); }

.sheet-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.info-btn { flex: none; min-height: 40px; padding: 8px 12px; }
.rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rooms button { padding: 6px 8px; font-size: 0.74rem; line-height: 1.2; }
.rooms small { display: block; font-weight: 400; color: inherit; opacity: 0.8; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.offers .offer + .offer { margin-top: 0; }
.offer { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; }
.offer .artist-name { font-size: 1.15rem; margin: 0; }
.offer .facts { font-size: 0.85rem; }
.offer .lede { font-size: 0.82rem; }
.offer .choice { padding: 8px 10px; gap: 2px; }
.choice-text { font-size: 0.8rem; color: var(--text-muted); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col .slider input[type='range'] { min-height: 32px; }
.col fieldset .slider + .slider { margin-top: 2px; }
.result-line { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }

.hint { color: var(--text-muted); font-size: 0.85rem; }
.row.tight { gap: 6px; flex-wrap: nowrap; }
.row.tight > * { flex: 1 1 auto; }
.count { font-family: var(--font-mono); color: var(--cyan); }

/* Build: tools in two desktop rows; phones use three wider rows. */
.tiles { display: grid; grid-template-columns: repeat(8, 50px); gap: 2px; }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px;
  height: 56px; min-height: 0; padding: 4px 2px 3px; margin: 0; cursor: pointer;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text);
}
.tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tile img { width: 40px; height: 28px; object-fit: contain; pointer-events: none; }
.tile-key { position: absolute; top: 2px; left: 4px; font-size: 0.6rem; color: var(--text-muted); }
.tile-glyph { font-size: 1.15rem; line-height: 28px; height: 28px; }
.tile-name { white-space: nowrap; }
.tile:has(input:checked), #select-btn[aria-pressed='true'] { border-color: var(--cyan); background: rgba(0, 240, 255, 0.1); box-shadow: inset 0 0 0 1px var(--cyan); }
.tile:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
button.tile:hover:not(:disabled) { background: var(--border); }
#doze-btn.on { background: #ef4444; color: #1a0a0a; border-color: #ef4444; }
#doze-btn.on .tile-key { color: #1a0a0a; }

/* Build: the readouts, two columns of three. */
.readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin: 0; }
.readouts div { min-width: 0; }
.readouts dt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.readouts dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.readouts small { font-weight: 400; font-size: 0.7rem; color: var(--text-muted); }
.readouts .warn { color: var(--amber); }
.readouts .bad { color: #fca5a5; }
.readouts .bar { display: block; height: 4px; margin-top: 3px; }
.readouts .cost-readout { padding-left: 6px; border-left: 2px solid var(--amber); background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 10%, transparent), transparent); }
.readouts .cost-readout dd { color: var(--amber); font-size: 0.95rem; }
.status-plate .checklist { padding: 0; list-style: none; font-size: 0.8rem; line-height: 1.35; }
.status-plate .checklist .more { color: var(--text-muted); }
.status-plate .toggle { min-height: 44px; justify-content: center; font-size: 0.78rem; font-family: var(--font-mono); font-weight: 700; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 8px; flex: 0 0 auto; }
.status-plate .toggle input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.status-plate .toggle { gap: 4px; }
.status-plate .row.tight { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
.status-plate .row.tight > * { min-width: 0; padding-inline: 5px; font-size: 0.75rem; }
.status-plate button, .actions-plate button { padding: 10px; white-space: nowrap; }
#fence-btn[aria-pressed='true'] { border-color: var(--green); color: #86efac; }

/* Show: the clock, the incident card and the feed. */
.card-plate .timecode { font-size: 1.8rem; line-height: 1; }
.incident-plate { width: var(--status-w); border-color: rgba(239, 68, 68, 0.75); box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 10px 28px rgba(0, 0, 0, 0.5); }
.incident-plate .incident { border: 0; background: none; padding: 0; gap: 6px; }
.incident-plate .incident p { font-size: 0.82rem; color: var(--text-muted); }
.incident-plate .choice { padding: 6px 10px; gap: 1px; min-height: 44px; }
.choice-head { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.choice-effect { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.feed-plate { width: var(--corner-w); }
.feed-plate .feed { font-size: 0.75rem; }
.crowd-now { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#crowd-now { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 800; color: var(--cyan); }

/* ---------- Windows ---------- */
/* A document the player opens on purpose, over the dimmed board. */
.win-layer {
  position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--strip-h) + 8px) 16px 8px; background: rgba(6, 8, 12, 0.6);
}
.win-layer[hidden] { display: none; }
.win {
  display: flex; flex-direction: column; width: min(720px, 100%); max-height: 100%;
  background: var(--sheet); border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}
.win-layer.wide .win { width: min(1180px, 100%); }
.win-head h2:focus { outline: none; }
.win-foot { display: flex; align-items: center; gap: 16px; padding: 6px 12px 6px 16px; border-top: 1px solid var(--border); background: #0d1118; border-radius: 0 0 10px 10px; }
.win-foot[hidden] { display: none; }
.win-foot .stamp { flex: none; margin: 0; padding: 2px 10px; font-size: 0.8rem; border-width: 2px; transform: rotate(-4deg); }
.win-foot .tip { flex: 1; font-size: 0.8rem; margin: 0; }
.win-foot .primary { flex: none; }

/* The settlement in three columns. */
.sheet-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sheet-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.win .meta-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 10px; }
.win .ledger th, .win .ledger td { padding: 4px 10px; }
.win .ledger table { font-size: 0.76rem; }
.win .payouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.win .payout { padding: 8px 10px; }
.win .payout .amount { font-size: 1.15rem; }
.win .outcomes { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.win .outcome { display: flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; }
.win .outcome .meta-label { flex: 1; }
.win .outcome .stat { display: inline; margin: 0; font-size: 0.9rem; }
.win .outcome .lede { font-size: 0.7rem; }
.win .payout { padding: 6px 10px; }
.win .payout p { font-size: 0.72rem; }
.win .sat-row { grid-template-columns: 124px 1fr 40px; font-size: 0.76rem; }
.win .meters-sat { gap: 4px; }
.win .sheet-head { font-size: 0.68rem; }
.win .meta-strip { gap: 6px; }
.win .meta-val { font-size: 0.8rem; }
.win .ledger-title { padding: 6px 10px; }
.win .payout p { margin-top: 2px; }
.win-body { padding: 10px 16px 12px; gap: 10px; }
.win .calc { padding: 8px 10px; }
.win h3 { font-size: 0.9rem; }
.win-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); }
.win-head h2 { margin: 0; font-size: 1.1rem; }
.win-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.win-body h3 { margin: 0 0 6px; font-size: 0.95rem; }
.win-body .checklist { margin: 0; }

/* The desk is one deliberate check-in, with a contained page per specialist. */
#win[data-kind="advisory"] .win { width: min(640px, 100%); }
#win[data-kind="advisory"] .win-body { overflow: hidden; }
#win[data-kind="advisory"] .tabbar { display: flex; gap: 4px; flex: none; order: 0; }
#win[data-kind="advisory"] .tabbar button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; }
#win[data-kind="advisory"] .tabbar [aria-selected="true"] { color: var(--cyan); border-color: var(--cyan); background: var(--panel); }
#win[data-kind="advisory"] .tab-off { display: none !important; }
.advisory-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.advisory-page p { margin: 0; line-height: 1.45; }
.advisory-context { color: var(--text-muted); font-size: 0.8rem; text-transform: capitalize; }
.advisory-page h3 { font-size: 1.2rem; }
.advisory-evidence { margin: 0; padding: 10px 12px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.advisory-evidence div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.advisory-evidence dt { color: var(--text-muted); }
.advisory-evidence dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.advisory-lock { padding-left: 10px; border-left: 2px solid var(--border-strong); color: var(--text-muted); font-size: 0.85rem; }
.advisory-page button { align-self: flex-start; min-height: 44px; }
@media (max-width: 680px) {
  #win[data-kind="advisory"] .tabbar { order: 2; }
  #win[data-kind="advisory"] .tabbar button { font-size: 0.75rem; padding-inline: 2px; }
  .advisory-page { gap: 8px; }
  .advisory-evidence div { gap: 8px; }
  .advisory-evidence dd { max-width: 60%; }
}
.obj-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.obj-groups li { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: start; }
.obj-name { font-size: 0.85rem; padding-top: 8px; }
.obj-places { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { min-height: 36px; padding: 4px 10px; font-size: 0.75rem; }

/* ---------- Menu ---------- */
.menu {
  position: fixed; z-index: 20; right: 12px; top: calc(var(--strip-h) + 8px);
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - var(--strip-h) - 20px);
  max-height: calc(100dvh - var(--strip-h) - 20px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding: 16px;
  background: var(--sheet); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
}
.menu[hidden] { display: none; }
.menu h2 { margin: 0 0 6px; font-size: 1rem; }
.menu-close { margin-left: auto; }
.board-help { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
/* The key list (controls.mjs keeps it and the handlers in step). */
.keys-head { margin: 10px 0 4px; }
.keys { display: grid; gap: 3px; margin: 0; font-size: 0.85rem; }
.keys > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 10px; }
.keys dt { font-family: var(--font-mono); font-weight: 700; }
.keys dd { margin: 0; color: var(--text-muted); }
a.button { display: inline-flex; align-items: center; text-decoration: none; }
label.button { display: inline-flex; align-items: center; cursor: pointer; }
.savebar:has(#save-file:focus-visible) label[for='save-file'] { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lede { color: var(--text-muted); }
.notice { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}

.message { padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel-alt); font-size: 0.9rem; }
.message:empty { display: none; }
.message.error { border-color: var(--red); color: #fecaca; }
.message.info { border-color: var(--teal); }

/* ---------- Controls ---------- */
button, .button {
  font: inherit; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em;
  min-height: 44px; padding: 10px 14px; border-radius: var(--radius); cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--border-strong);
}
button:hover:not(:disabled) { background: var(--border); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--cyan); color: #050b14; border-color: var(--cyan); box-shadow: 0 0 15px rgba(0, 240, 255, 0.25); }
button.primary:hover:not(:disabled) { background: #67f6ff; }
#doze-btn.on { background: #ef4444; color: #1a0a0a; border-color: #ef4444; }
button.danger { border-color: var(--red); color: #fecaca; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.actions .primary { margin-left: auto; }

.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; text-align: left;
  font-family: var(--font-ui); font-weight: 400; font-size: 0.9rem; padding: 12px 14px;
}
.choice strong { font-family: var(--font-mono); font-size: 0.85rem; color: var(--cyan); }
.choice .cost { font-family: var(--font-mono); color: var(--amber); }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.artist-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 2px 0 4px; }
.offer { display: grid; gap: 8px; }
.offer + .offer { margin-top: 12px; }
.choice[disabled] { opacity: 0.55; cursor: not-allowed; }
.career h3 { margin: 2px 0 6px; font-size: 1rem; }
.goal { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-family: var(--font-mono); font-size: 0.82rem; }
.goal li { color: var(--text); }
.goal li span { display: inline-block; width: 1.2em; color: var(--text-muted); }
.goal li.met span { color: var(--green); }
.career .hint { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0; padding: 10px 12px 12px; }
legend { padding: 0 6px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

.palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.palette label {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem;
}
.palette label:has(input:checked) { border-color: var(--cyan); background: rgba(0, 240, 255, 0.08); }
.palette input { accent-color: var(--cyan); width: 18px; height: 18px; }
.palette .swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.palette .meta { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

.toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.85rem; }
.toggle input { width: 20px; height: 20px; accent-color: var(--cyan); }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.stats div { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.stats dt { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.stats dd { margin: 2px 0 0; font-family: var(--font-mono); font-weight: 700; }
.stats .warn { color: var(--amber); }
.stats .bad { color: #fca5a5; }

.checklist { margin: 0; padding-left: 18px; color: #fde68a; font-size: 0.85rem; }
.checklist.ok { color: #86efac; list-style: none; padding-left: 0; }

.objects { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.objects li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; padding: 2px 0 2px 8px; border-left: 3px solid var(--border-strong); }
.objects button { min-height: 36px; padding: 6px 10px; }
summary { cursor: pointer; min-height: 32px; font-family: var(--font-mono); font-size: 0.8rem; }

.slider label { display: flex; justify-content: space-between; font-size: 0.9rem; }
.slider output { font-family: var(--font-mono); font-weight: 700; color: var(--cyan); }
.slider input[type='range'] { width: 100%; margin-inline: 0; min-height: 36px; accent-color: var(--cyan); }

.chart { width: 100%; height: auto; background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); }
figure { margin: 0; }
figcaption { color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }

.feed { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.8rem; display: flex; flex-direction: column; gap: 4px; }
.feed li::before { content: '▸ '; color: var(--cyan); }
.timecode { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--amber); }

.incident { border: 1px solid var(--red); background: rgba(239, 68, 68, 0.08); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.incident h3 { color: #fecaca; }

/* ---------- Settlement sheet ---------- */
#win[data-kind="settlement"] {
  border-color: var(--settlement-line);
  background:
    linear-gradient(105deg, transparent 0 62%, color-mix(in srgb, var(--settlement-line) 5%, transparent) 62% 63%, transparent 63%),
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--settlement-line) 9%, transparent), transparent 36%),
    var(--settlement-paper);
  color: var(--settlement-ink);
}
#win[data-kind="settlement"] .win-head,
#win[data-kind="settlement"] .win-foot { background: color-mix(in srgb, var(--settlement-paper) 92%, #000); border-color: var(--settlement-line); }
#win[data-kind="settlement"] .win-head h2 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1rem, 2vw, 1.32rem); color: var(--settlement-ink); }
#win[data-kind="settlement"] .win-body { overflow: hidden; }
#win[data-kind="settlement"] .win-body > .tabbar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; flex: none;
  order: 0; width: min(300px, 100%); margin-left: auto; padding: 3px;
  background: color-mix(in srgb, var(--settlement-panel) 72%, transparent); border: 1px solid var(--settlement-line); border-radius: 7px;
}
#win[data-kind="settlement"] .win-body > .tabbar button {
  min-width: 0; min-height: 44px; padding: 6px 14px; color: var(--settlement-muted); border-color: transparent; background: transparent;
}
#win[data-kind="settlement"] .win-body > .tabbar [aria-selected="true"] {
  color: var(--settlement-ink); border-color: var(--settlement-line); background: var(--settlement-panel);
}
#win[data-kind="settlement"] .tab-off { display: none !important; }
.settlement-context { margin: 0 0 6px; color: var(--settlement-muted); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.settlement-context .receipt-link { min-height: 32px; padding: 0; color: inherit; text-transform: inherit; }
.settlement-summary { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.settlement-verdict {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--settlement-line); border-radius: 7px;
  background: color-mix(in srgb, var(--settlement-panel) 84%, transparent);
}
.settlement-verdict .meta-label { color: var(--settlement-muted); }
.settlement-profit { display: block; margin-top: 1px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1; }
.settlement-secondary { display: grid; grid-template-columns: repeat(2, minmax(116px, 1fr)); gap: 8px; }
.settlement-secondary span { padding: 7px 10px; border-left: 1px solid var(--settlement-line); }
.settlement-secondary small { display: block; color: var(--settlement-muted); font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; }
.settlement-secondary strong { display: block; margin-top: 2px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; }
.settlement-verdict > p { grid-column: 1 / -1; margin: 0; max-width: 74ch; color: var(--settlement-muted); font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; }
.settlement-stamp { justify-self: end; padding: 4px 9px; border: 2px solid currentColor; border-radius: 4px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; transform: rotate(-2deg); }
.settlement-stamp.pass { color: var(--green); }
.settlement-stamp.retry { color: var(--amber); }
.settlement-summary-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
.settlement-summary-grid h3 { color: var(--settlement-muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }
.settlement-bridge { margin: 0; border: 1px solid var(--settlement-line); border-radius: 7px; background: color-mix(in srgb, var(--settlement-panel) 78%, transparent); }
.settlement-bridge > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--settlement-line) 55%, transparent); }
.settlement-bridge > div:last-child { border-bottom: 0; }
.settlement-bridge dt { color: var(--settlement-muted); }
.settlement-bridge dd { margin: 0; font-family: var(--font-mono); font-weight: 800; }
.settlement-bridge-total { background: color-mix(in srgb, var(--settlement-line) 11%, transparent); font-weight: 800; }
.settlement-coaching { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.settlement-note { display: flex; flex-direction: column; min-width: 0; padding: 9px 11px; border: 1px solid var(--settlement-line); border-radius: 7px; background: color-mix(in srgb, var(--settlement-panel) 78%, transparent); }
.settlement-note.positive { border-color: color-mix(in srgb, var(--green) 68%, var(--settlement-line)); }
.settlement-note.priority { border-color: color-mix(in srgb, var(--amber) 68%, var(--settlement-line)); }
.settlement-note h3 { margin-bottom: 3px; color: var(--settlement-ink); }
.settlement-note p { margin: 0; color: var(--settlement-ink); font-family: Georgia, 'Times New Roman', serif; font-size: 0.88rem; }
.settlement-note small { display: block; margin-top: auto; padding-top: 5px; color: var(--settlement-muted); font-size: 0.68rem; }
.settlement-ledger { min-height: 0; }
.settlement-ledger-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 8px; }
.settlement-ledger-tabs button { min-width: 0; min-height: 44px; padding: 6px; color: var(--settlement-muted); border-color: var(--settlement-line); background: transparent; }
.settlement-ledger-tabs [aria-selected="true"] { color: var(--settlement-ink); background: var(--settlement-panel); box-shadow: inset 0 -2px var(--amber); }
#win[data-kind="settlement"] .ledger,
#win[data-kind="settlement"] .calc { border-color: var(--settlement-line); background: color-mix(in srgb, var(--settlement-panel) 78%, transparent); }
#win[data-kind="settlement"] .ledger-title,
#win[data-kind="settlement"] .ledger tfoot td { color: var(--settlement-muted); border-color: var(--settlement-line); background: color-mix(in srgb, var(--settlement-panel) 88%, transparent); }
#win[data-kind="settlement"] .ledger thead th { color: var(--settlement-muted); border-color: var(--settlement-line); }
#win[data-kind="settlement"] .win-foot { display: grid; grid-template-columns: auto auto minmax(150px, 1fr) auto; gap: 8px 18px; padding: 8px 14px; }
#win[data-kind="settlement"] .settlement-change { display: flex; flex-direction: column; justify-content: center; }
#win[data-kind="settlement"] .settlement-change .meta-label { color: var(--settlement-muted); }
#win[data-kind="settlement"] .settlement-change strong { font-family: var(--font-mono); font-size: 1rem; }
#win[data-kind="settlement"] .settlement-change.cash { padding-left: 14px; border-left: 1px solid var(--settlement-line); }
#win[data-kind="settlement"] .settlement-change.cash small { color: var(--settlement-muted); font-size: 0.65rem; }
#win[data-kind="settlement"] .win-foot .primary { min-height: 44px; min-width: 150px; color: #171006; background: var(--amber); border-color: color-mix(in srgb, var(--amber) 70%, #000); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); margin-right: 6px; }
.meta-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; background: var(--panel); border: 1px solid var(--border); padding: 10px; border-radius: var(--radius); }
.meta-strip span { display: block; }
.meta-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.meta-val { font-weight: 700; font-size: 0.85rem; }
.meta-val.hl { color: var(--cyan); }
.meta-val.score { color: var(--amber); font-family: var(--font-mono); }

.ledger { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ledger-title { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); padding: 8px 12px; background: var(--panel-alt); border-bottom: 1px solid var(--border); }
.ledger table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ledger th, .ledger td { padding: 6px 12px; text-align: left; }
.ledger thead th { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.ledger .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.ledger tfoot td { border-top: 1px solid var(--border-strong); background: var(--panel-alt); font-family: var(--font-mono); font-weight: 700; }
.ledger tr.faint { opacity: 0.55; }
.pos { color: #4ade80; }
.neg { color: #f87171; }

.calc { font-family: var(--font-mono); font-size: 0.78rem; background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.payouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.payout { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.payout .amount { display: block; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 800; }
.payout.artist .amount { color: var(--amber); }
.payout.promoter .amount { color: var(--green); }
.payout.promoter.loss .amount { color: var(--red); }
.payout p { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.meters-sat { display: flex; flex-direction: column; gap: 6px; }
.sat-row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 8px; align-items: center; font-size: 0.8rem; }
.bar { height: 8px; background: var(--panel-alt); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--teal); }
.sat-row .num { font-family: var(--font-mono); text-align: right; }

.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.outcome { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.outcome .stat { display: block; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; margin: 2px 0; }

.stamp-wrap { position: relative; }
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; padding: 6px 16px; border: 3px solid; border-radius: 4px;
  font-family: var(--font-mono); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
  transform: rotate(-6deg); margin: 4px 0;
}
.stamp small { font-size: 0.6rem; letter-spacing: 0.15em; }
.stamp.pass { color: var(--green); border-color: var(--green); box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }
.stamp.retry { color: var(--red); border-color: var(--red); box-shadow: 0 0 15px rgba(239, 68, 68, 0.2); }
.tip { border-left: 3px solid var(--amber); padding-left: 10px; font-size: 0.85rem; }

.history { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.78rem; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Save and load (in the menu) ---------- */
.savebar { background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; }
.save-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: 0.85rem; }
.save-body textarea { width: 100%; background: var(--desk); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.75rem; padding: 8px; }
.save-status { min-height: 1.2em; font-family: var(--font-mono); font-size: 0.8rem; }
.credit { color: var(--text-muted); font-size: 0.8rem; margin: 0; }

:root:not([data-theme='dark']) button.primary,
:root:not([data-theme='dark']) .skip-link { color: #fff; }
:root:not([data-theme='dark']) button.primary:hover:not(:disabled) { background: #004a57; }
:root:not([data-theme='dark']) .incident h3,
:root:not([data-theme='dark']) .message.error,
:root:not([data-theme='dark']) button.danger,
:root:not([data-theme='dark']) .bad,
:root:not([data-theme='dark']) .neg { color: #9f1239; }
:root:not([data-theme='dark']) .checklist,
:root:not([data-theme='dark']) .readouts .warn { color: #854d0e; }
:root:not([data-theme='dark']) .checklist.ok,
:root:not([data-theme='dark']) #fence-btn[aria-pressed='true'],
:root:not([data-theme='dark']) .pos { color: #166534; }
:root:not([data-theme='dark']) .win-foot { background: var(--panel-alt); }

/* ---------- Narrower windows ---------- */
/* The strip makes room for the camera buttons and the 2D/3D switch: the game's name is read
   out but not shown. */
@media (max-width: 1599px) {
  .brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .wide-only { display: none; }
}
/* Only the current phase keeps its name; the others keep their numbers. */
@media (max-width: 1279px) {
  .stepper li:not([aria-current]) .step-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .topbar { gap: 8px 10px; }
  .stepper li { padding: 6px 8px; }
  .meters { gap: 10px; }
}
@media (max-width: 1100px) {
  .tagline { display: none; }
}

@media (min-width: 681px) and (max-width: 1023px) {
  .topbar { flex-wrap: wrap; gap: 4px 10px; }
  .meters { order: 4; flex-basis: 100%; justify-content: flex-end; }
  .meters div { flex-direction: row; align-items: baseline; gap: 6px; }
}

/* Phones (docs/HUD.md section 8): the board takes the top of the window and the phase
   panel is a sheet across the bottom that scrolls inside itself. */
@media (max-width: 680px) {
  body { font-size: 14px; }
  .topbar { flex-wrap: wrap; gap: 4px 10px; padding: 6px 8px 6px var(--nav-room); }
  .brand { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .stepper { margin: 0; }
  .stepper li:not([aria-current]) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .menu-btn { margin-left: auto; }
  /* The meters occupy their own row below the navigation pills. */
  .meters { order: 4; margin-left: calc(8px - var(--nav-room)); flex-basis: calc(100% + var(--nav-room) - 8px); justify-content: space-between; gap: 8px; min-width: 0; }
  .meters div { flex-direction: row; align-items: baseline; gap: 6px; }
  .meters dd { font-size: 0.9rem; }
  .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panel {
    top: auto; height: 44vh; height: 44dvh; pointer-events: auto;
    display: flex; flex-direction: column; gap: 12px; padding: 12px;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--sheet); border-top: 1px solid var(--border-strong); border-radius: 14px 14px 0 0;
  }
  .plate, .at-sheet,
  body[data-phase='book'] .at-sheet,
  body[data-phase='promote'] .at-sheet,
  body[data-phase='settle'] .at-sheet,
  body[data-phase='done'] .at-sheet {
    position: static; width: auto; max-height: none; overflow: visible;
    padding: 0; border: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .camera-row {
    position: fixed; z-index: 10; left: 8px; bottom: calc(var(--board-bottom) + 8px);
    padding: 4px; gap: 2px; background: var(--plate); border: 1px solid var(--plate-line); border-radius: 8px;
  }
  .camera-row button { width: 44px; padding: 0; }
  /* Phones keep four camera buttons beside the sheet controls; 3D stays in Menu, Camera. */
  .camera-row .renderer-btn { display: none; }
  .wide-only { display: none; }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles:has(input[value="bar-tent"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiles:has(input[value="vip-deck"]) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .offers, .cols, .sheet-cols { grid-template-columns: minmax(0, 1fr); }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win-layer { padding: calc(var(--strip-h) + 4px) 4px 4px; }
  .win-foot { flex-wrap: wrap; gap: 8px 12px; }
  .win-foot .tip { flex-basis: 100%; order: 3; }
  .win .meta-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .win .ledger th, .win .ledger td { padding: 3px 8px; }

  /* Tabs (docs/HUD.md decision 12): one group at a time, so nothing scrolls. */
  .tabbar { display: flex; gap: 4px; flex: none; order: 1; }
  .tabbar [role='tab'] {
    flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 4px; font-size: 0.74rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tabbar [aria-selected='true'] { border-color: var(--cyan); color: var(--cyan); background: rgba(0, 240, 255, 0.08); }
  .tab-off { display: none !important; }

  /* Build and Show: a peek sheet under the board, with the phase card as its header. */
  body[data-layout='hud'] .panel { gap: 6px; padding: 8px 12px; }
  .win-body { gap: 8px; padding: 8px 12px 10px; }
  body[data-layout='hud'] .panel > .card-plate { order: 0; }
  body[data-layout='hud'] .panel > [data-tab] { order: 2; }
  body[data-layout='hud'] .card-plate .eyebrow,
  body[data-layout='hud'] .card-plate .hint { display: none; }
  body[data-layout='hud'] .card-plate { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  body[data-layout='hud'] .card-plate .message { flex-basis: 100%; padding: 6px 10px; font-size: 0.82rem; }
  /* The padless phone header sizes to its line boxes, so the clock's line box must hold the
     font's whole ascent and descent (about 1.32em in JetBrains Mono) or it overflows the plate. */
  body[data-layout='hud'] .card-plate .timecode { font-size: 1.2rem; line-height: 1.4; }
  /* A long cost ("$125 · not enough cash") beside its label filled a 375px row to within a few
     pixels and wrapped the choice onto a second line; a smaller cost keeps one line with room. */
  body[data-layout='hud'] .incident-plate .choice .cost { font-size: 0.8rem; }

  /* Book, Promote, Settle and Done: the sheet grows with its content up to the height under
     the strip, so a short sheet (Settle, Done) leaves the lot visible above it. */
  body[data-layout='sheet'] .panel {
    top: auto; height: auto; padding: 12px;
    max-height: calc(100vh - var(--strip-h) - 8px); max-height: calc(100dvh - var(--strip-h) - 8px);
  }
  body[data-layout='sheet'] .camera-row { display: none; }
  .at-sheet .rooms button { min-height: 40px; }
  .palette, .stats { grid-template-columns: minmax(0, 1fr); }
  .sat-row { grid-template-columns: 80px 1fr 40px; }

  .tile-key, .menu-btn .key { display: none; }
  .tabbar [role='tab'] { min-height: 44px; }
  body[data-phase='show'] .card-plate h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body[data-phase='show'] .panel { gap: 4px; padding: 6px 12px; }
  body[data-layout='hud'] .card-plate .show-status { font-size: 0.75rem; }
  body[data-layout='hud'] .sheet-controls:not([hidden]) {
    display: flex; gap: 2px; position: fixed; z-index: 15; right: 8px;
    bottom: calc(var(--board-bottom) + 8px);
    padding: 4px; background: var(--plate); border: 1px solid var(--plate-line); border-radius: 8px;
  }
  .sheet-grip { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; touch-action: none; cursor: grab; }
  .sheet-grip::before { content: ''; width: 18px; height: 6px; border-block: 2px solid var(--text-muted); }
  .sheet-controls button { width: 44px; height: 44px; padding: 0; font-size: 1.25rem; touch-action: manipulation; }
  body[data-layout='hud'][data-sheet-size='expanded'] .panel {
    height: calc(100dvh - var(--strip-h) - 76px);
  }
  body[data-layout='hud'][data-sheet-size='collapsed'] .panel {
    height: 0; padding: 0; border: 0; visibility: hidden; overflow: hidden;
  }
  body[data-layout='hud'][data-sheet-size='collapsed'] #locate-incident { visibility: hidden; }
  /* The gesture is optional; these controls also work by touch, mouse and keyboard. */
  body[data-layout='hud'] .board-status { max-width: calc(100vw - 24px); top: calc(var(--strip-h) + 62px); }
}

@media (max-width: 359px) {
  .sheet-grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Live services use compact rows so queues and cash fit the phone peek sheet. */
.live-readouts { display: grid; gap: 4px; margin: 0; }
.live-readouts div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.live-readouts dt, .live-readouts dd { font-size: 0.8rem; margin: 0; }
.live-readouts dt { color: var(--text-muted); }
.live-readouts dd { font-family: var(--font-mono); font-weight: 700; }

.live-optin { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.live-controls .row[hidden] { display: none; }
.live-controls label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-controls select { min-height: 44px; padding: 6px 10px; font: inherit; color: var(--text); background: var(--panel-alt); border: 1px solid var(--border-strong); border-radius: 6px; }
/* The input canvas retains keyboard/pointer ownership while the 3D layer presents the Lot. */
.lot-webgl { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.lot-webgl[hidden] { display: none; }
#board.board-3d-input { opacity: 0; touch-action: none; }
.board-wrap:has(#board.board-3d-input:focus-visible) .lot-webgl { box-shadow: inset 0 0 0 3px var(--yellow); }
.lot-camera-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body[data-phase='done'] .lot-webgl { filter: brightness(0.55) saturate(0.8); }

/* Keep clock controls still as a travelling worker arrives or the crowd count grows. */
.live-controls #live-worker { min-height: 2.9em; }
.live-controls #crowd-now { display: inline-block; min-width: 3ch; font-variant-numeric: tabular-nums; }

.food-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.food-heading h3 { margin: 0; }
.food-heading button, .receipt-link { min-height: 44px; }
.food-icon { color: #69c59d; font-size: 2rem; line-height: 1; }
#food-plan { min-height: 44px; max-width: 100%; font: inherit; }
body[data-phase='promote'] .actions button { padding-inline: 8px; }

/* Facilities use explicit pages at every width to keep the window contained. */
#win[data-kind="food-settings"] .tabbar { display: flex; gap: 4px; flex: none; }
#win[data-kind="food-settings"] .tabbar button { flex: 1; min-width: 0; min-height: 44px; }
#win[data-kind="food-settings"] .tabbar [aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); }
#win[data-kind="food-settings"] .tab-off { display: none !important; }
.facility-options > label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.facility-options input { flex: none; width: 18px; height: 18px; }

#win[data-kind="food-settings"] .tabbar { order: 0; }

@media (max-width: 680px), (max-height: 760px) {
  #win[data-kind="settlement"] .win-body { padding: 6px 8px 8px; gap: 6px; }
  #win[data-kind="settlement"] .win-body > .tabbar { width: 100%; }
  .settlement-summary { gap: 6px; }
  .settlement-context { margin-bottom: 0; font-size: 0.62rem; }
  .settlement-verdict { padding: 8px 10px; gap: 5px 10px; }
  .settlement-profit { font-size: clamp(1.65rem, 9vw, 2.25rem); }
  .settlement-secondary { gap: 3px; }
  .settlement-secondary span { padding: 4px 6px; }
  .settlement-secondary strong { font-size: 1rem; }
  .settlement-verdict > p { font-size: 0.82rem; line-height: 1.25; }
  .settlement-stamp { padding: 3px 6px; font-size: 0.58rem; }
  .settlement-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .settlement-summary-grid h3 { margin-bottom: 3px; }
  .settlement-bridge > div { padding: 3px 8px; font-size: 0.75rem; }
  .settlement-note { padding: 6px 8px; }
  .settlement-note p { font-size: 0.78rem; line-height: 1.2; }
  .settlement-note small { padding-top: 3px; font-size: 0.6rem; line-height: 1.2; }
  .settlement-ledger-tabs { margin-bottom: 5px; }
  #win[data-kind="settlement"] .win-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; padding: 6px 8px; }
  #win[data-kind="settlement"] .settlement-change.cash { padding-left: 8px; }
  #win[data-kind="settlement"] .win-foot .primary { grid-column: 1 / -1; width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
  #win[data-kind="settlement"] .win-head { padding-left: 10px; }
  #win[data-kind="settlement"] .win-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settlement-summary { gap: 4px; }
  .settlement-verdict { grid-template-columns: minmax(105px, 0.7fr) minmax(0, 1.3fr); }
  .settlement-verdict { padding-block: 6px; }
  .settlement-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settlement-verdict > p { grid-column: 1; }
  .settlement-stamp { justify-self: start; max-width: 100%; text-align: center; }
  .settlement-coaching { grid-template-columns: minmax(0, 1fr); }
  .settlement-summary-grid { gap: 4px; }
  .settlement-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  .settlement-note h3, .settlement-note p { grid-column: 1; }
  .settlement-note small { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 128px; text-align: right; }
}

@media (max-width: 480px) and (max-height: 820px) {
  #win[data-kind="settlement"] .win-body { gap: 4px; padding-block: 4px; }
  .settlement-context { font-size: 0.58rem; }
  .settlement-verdict { gap: 3px 8px; padding-block: 5px; }
  .settlement-verdict > p { font-size: 0.74rem; line-height: 1.15; }
  .settlement-summary-grid h3 { font-size: 0.62rem; }
  .settlement-bridge > div { padding-block: 2px; }
  .settlement-note { padding-block: 4px; }
  .settlement-note p { font-size: 0.72rem; line-height: 1.1; }
  .settlement-note small { font-size: 0.56rem; line-height: 1.1; }
  #win[data-kind="settlement"] .win-foot { gap: 3px 8px; padding-block: 4px; }
}

/* Development pages share one contained space at all viewport sizes. */
#win:is([data-kind="development"], [data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .tabbar { display: flex; gap: 4px; flex: none; order: 0; }
#win:is([data-kind="development"], [data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .tabbar button { flex: 1; min-width: 0; min-height: 44px; padding: 6px 4px; }
#win:is([data-kind="development"], [data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .tabbar [aria-selected="true"] { border-color: var(--cyan); color: var(--cyan); }
#win:is([data-kind="development"], [data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .tab-off { display: none !important; }
#win:is([data-kind="development"], [data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) [data-tab] > p { margin: 8px 0; }
.development-summary { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; }
body[data-phase='done'] .row.tight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-phase='done'] .row.tight > button { min-width: 0; padding-inline: 4px; font-size: 0.75rem; }

.equipment-events { list-style: none; padding: 0; margin: 8px 0; }
.equipment-events li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.equipment-events small { display: block; overflow-wrap: anywhere; }

#win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) [hidden] { display: none !important; }
#win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) button { min-height: 44px; }
@media (max-height: 560px) {
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) { padding: 4px; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win { height: 100%; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-head { padding: 0 6px; flex: none; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-body { flex: 1; min-height: 0; padding: 4px 8px; gap: 4px; overflow: hidden; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-body > [data-tab] { flex: none; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-body p { font-size: 0.85rem; line-height: 1.3; margin: 4px 0; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-foot { flex: none; justify-content: space-between; padding: 0 6px; gap: 4px; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .win-foot span { font-size: 0.8rem; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .live-readouts div { padding: 2px 0; }
}
@media (max-height: 560px) {
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) [data-tab="Deploy"] .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) [data-tab="Deploy"] .actions button { min-width: 0; padding: 4px; }
}

#win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .capital-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
#win:is([data-kind="equipment"], [data-kind="site-equipment"], [data-kind="ticketing"], [data-kind="held-run"], [data-kind="seating"], [data-kind="stages"], [data-kind="set-time"], [data-kind="deals"], [data-kind="advisory"]) .capital-actions button { min-width: 0; padding-inline: 4px; }
.stage-choice { display: flex; flex-direction: column; gap: 6px; }
.stage-choice select { width: 100%; min-height: 44px; padding: 8px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); }

/* The overview occupies a measured gap between existing HUD plates. */
.site-map { position: fixed; z-index: 13; width: 196px; padding: 6px 7px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--sheet); box-shadow: 0 4px 14px #0003; }
.site-map strong { display: block; font: 11px var(--font-mono); line-height: 18px; }
.site-map canvas { display: block; width: 180px; height: 110px; touch-action: none; cursor: crosshair; border-radius: 3px; }
.site-map canvas:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.site-map[hidden] { display: none; }
@media (max-width: 680px) { .site-map { display: none; } }

/* Festival account pages keep two touch-sized rows on narrow screens. */
@media (max-width: 420px) {
  #win[data-kind="stages"] .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #win[data-kind="deals"] .tabbar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) and (max-height: 560px) {
  #win[data-kind="stages"] .development-summary { display: none; }
}

#win [data-act="cost-page"][aria-pressed="true"] {
  border-color: var(--cyan); color: var(--cyan); background: rgba(0, 240, 255, 0.08);
}

@media (max-width: 680px) and (min-height: 561px) {
  #win[data-kind="advisory"] .tabbar { order: 2; }
}
@media (max-height: 560px) {
  #win[data-kind="advisory"] .advisory-page { gap: 4px; }
  #win[data-kind="advisory"] .advisory-evidence { padding: 4px 8px; }
  #win[data-kind="advisory"] .advisory-evidence div { padding: 2px 0; }
  #win [data-act="advisory-back"] { padding-inline: 6px; }
}

@media (max-width: 680px) {
  #win[data-kind="advisory"] .tabbar button { padding-inline: 2px; }
}

#win[data-kind="settlement"] .win-foot:has([data-act="advisory-back"]) { grid-template-columns: 1fr 1fr 1.25fr auto auto; }
@media (max-width: 680px), (max-height: 760px) {
  #win[data-kind="settlement"] .win-foot:has([data-act="advisory-back"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #win[data-kind="settlement"] .win-foot:has([data-act="advisory-back"]) .primary { grid-column: 1 / 3; }
  #win[data-kind="settlement"] [data-act="advisory-back"] { grid-column: 3; width: 100%; min-width: 0; padding-inline: 4px; }
}
@media (max-width: 360px) {
  #win[data-kind="advisory"] .tabbar button { font-family: var(--font-ui); flex: 1 0 auto; }
}

/* Concert illustrations stay separate from authoritative prices and forecasts. */
.band-art { display: block; width: 100%; height: 108px; flex: none; object-fit: cover; border-radius: 5px; }
.offer .band-art { order: -1; }
.offer .artist-name { font-family: Georgia, serif; font-size: 1.4rem; line-height: 1.15; }
.rooms button { overflow: hidden; padding: 0 0 6px; min-height: 44px; }
.rooms button > span { display: block; padding: 5px 5px 0; }
.venue-art { display: block; width: 100%; height: 38px; object-fit: cover; }
.rooms button:disabled .venue-art { filter: grayscale(1); opacity: .5; }
.show-art-heading { display: flex; align-items: center; gap: 12px; }
.show-art-heading h2 { margin: 0; }
.band-art-small { width: 108px; height: 57px; border-radius: 4px; }
@media (max-height: 800px) { .offer .band-art { height: 48px; } .venue-art { height: 26px; } }
@media (max-width: 600px) { .offer .band-art { height: 76px; } .offer .artist-name { font-size: 1.25rem; } }
@media (max-height: 560px) { .offer .band-art { height: 38px; } .venue-art { height: 18px; } .band-art-small { height: 32px; width: 61px; } }
.menu-art { border-radius: 6px; overflow: hidden; }
.menu-art .band-art, .menu-art .venue-art { height: 68px; width: 100%; }
@media (max-height: 560px) { .menu-art { display: none; } }
.band-art { background: #242c3a; }
.artist-identity { display: flex; flex-direction: column; gap: 6px; order: -1; }
@media (min-width: 601px) and (max-height: 800px) {
  .artist-identity { flex-direction: row; align-items: center; gap: 10px; }
  .artist-identity .band-art { width: 88px; height: 47px; }
  .artist-identity .artist-name { font-size: 1.18rem; }
}
@media (min-width: 601px) and (max-height: 800px) {
  .show-art-heading .band-art-small { width: 61px; height: 32px; }
}

/* Keep held-run booking art compact without shrinking its touch controls. */
@media (max-width: 600px) {
  .artist-identity { flex-direction: row; align-items: center; gap: 8px; }
  .artist-identity .band-art { width: 68px; height: 37px; }
  .artist-identity .artist-name { font-size: 1.1rem; }
  .tabbar [role='tab'] { min-height: 44px; flex-shrink: 0; }
  /* Two rows of venue buttons on phones: keep the room art as a short band so the act tabs stay on screen. */
  .venue-art { height: 12px; }
  .rooms button > span { padding-top: 3px; }
}

/* Suggestions (docs/ANTICIPATORY_UX.md): highlights and one-press pre-fills, never commitments.
   Every highlight carries words as well as a colour (ART_DIRECTION.md section 5). */
.suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.suggest[hidden] { display: none; }
.suggest-btn { min-height: 44px; padding: 4px 10px; font-size: 0.78rem; }
.checklist .suggest-btn { margin-left: 6px; color: var(--text); }
.choice.suggested { box-shadow: inset 0 0 0 2px var(--amber); }
.hint-badge {
  display: inline-block; padding: 0 6px; border: 1px solid var(--amber); border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; color: var(--amber); white-space: nowrap; vertical-align: middle;
}
.tile.ring:not(:has(input:checked)) { box-shadow: inset 0 0 0 2px var(--amber); }

/* Equipment cards use the runtime PA model renders, with no independent scene or animation. */
.pa-equipment-card { display: grid; grid-template-columns: minmax(100px, 42%) minmax(0, 1fr); align-items: center; gap: 16px; margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); }
.pa-equipment-card img { display: block; width: 100%; height: 132px; object-fit: contain; background: #d5d8d1; border-radius: 6px; }
.pa-equipment-card figcaption { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.pa-equipment-card h3 { margin: 0; color: var(--text); font-size: 1.35rem; line-height: 1.15; }
.pa-card-eyebrow { font: 0.65rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.pa-equipment-card small { color: var(--text-muted); font-size: .72rem; }
@media (max-width: 600px), (max-height: 700px) {
  .pa-equipment-card { padding: 8px; gap: 10px; margin-bottom: 8px; }
  .pa-equipment-card img { height: 88px; }
  .pa-equipment-card h3 { margin: 0; color: var(--text); font-size: 1.1rem; }
  .pa-equipment-card figcaption { font-size: .8rem; gap: 3px; }
}
@media (max-height: 400px) {
  .pa-equipment-card img { height: 56px; }
  .pa-equipment-card { margin: 0; padding: 4px; }
  .pa-equipment-card small, .pa-card-eyebrow { display: none; }
}
@media (max-height: 560px) {
  #win[data-kind="selection"] { padding: 4px; }
  #win[data-kind="selection"] .win-body { gap: 4px; padding: 8px; }
  #win[data-kind="selection"] .win-body > p { margin: 0; font-size: .85rem; line-height: 1.3; }
  #win[data-kind="selection"] .pa-equipment-card { margin: 0; }
  #win[data-kind="selection"] .pa-equipment-card img { height: 64px; }
}
@media (max-height: 300px) {
  #win[data-kind="selection"] .pa-equipment-card { display: none; }
}

/* Five Equipment tabs stay legible without clipping in narrow windows. */
@media (max-width: 600px) {
  #win[data-kind="equipment"] .tabbar button { font-family: var(--font-ui); font-size: .75rem; letter-spacing: 0; padding-inline: 2px; }
}

/* One equipment model at a time; short screens use the existing window paginator. */
.equipment-model-choice { display: grid; gap: 4px; }
.equipment-model-choice select { min-height: 44px; min-width: 0; width: 100%; }
#win[data-kind="site-equipment"] .live-readouts dd { overflow-wrap: anywhere; }

/* FOH-QA-012: below the 1024 x 700 no-scroll gate (a zoomed desktop window, for example 150% or
   200% of 1440 x 900) the sheet may scroll, but the phase action stays on screen. Promote's
   action row sticks to the sheet's bottom edge. Book lists the acts first, with each act's deal
   buttons straight under its name; the room choice, the intro line and the act details follow. */
@media (min-width: 681px) and (max-width: 1023px), (min-width: 681px) and (max-height: 699px) {
  body[data-phase='promote'] .at-sheet > .actions {
    position: sticky; bottom: -14px; z-index: 2;
    margin: 0 -16px -14px; padding: 8px 16px 14px;
    background: var(--sheet); border-top: 1px solid var(--border);
  }
  body[data-phase='book'] .at-sheet > .offers { order: 1; }
  body[data-phase='book'] .at-sheet > :is(.rooms, .nights, .lede) { order: 2; }
  body[data-phase='book'] .offer > * { order: 3; }
  body[data-phase='book'] .offer > .artist-identity { order: 1; }
  body[data-phase='book'] .offer > .choice { order: 2; }
}
@media (min-width: 681px) and (max-height: 560px) {
  body[data-phase='book'] .offer { grid-template-columns: minmax(0, 1fr); }
  body[data-phase='book'] .offer .choice { min-width: 0; padding-block: 6px; }
  body[data-phase='book'] .offer .choice-text { display: block; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (min-width: 681px) and (max-height: 420px) {
  body[data-phase='book'] .offer .band-art { display: none; }
  body[data-phase='book'] .offer .choice { padding-block: 4px; }
}