/* ============================================================
   LUMON INDUSTRIES — MACRODATA REFINEMENT
   Phase 1 stylesheet
   Palette, CRT atmosphere, two-screen layout, grid + bins.
   ============================================================ */

:root {
  /* Core palette */
  --bg-deep:      #0a1018;
  --bg-panel:     #0d1620;
  --bg-panel-2:   #101e2a;
  --bg-cell:      #0c151f;

  --line:         #1d3343;
  --line-strong:  #2e556b;

  --cyan:         #7fdfff;   /* accent */
  --cyan-dim:     #4a9eba;   /* dim accent */
  --cyan-deep:    #2c6378;
  --glow:         #cfe8f5;   /* active numerals */
  --text:         #9fc4d6;   /* body text, cool */
  --text-dim:     #5d7e8e;
  --text-faint:   #38515f;

  --danger:       #c0392b;
  --danger-glow:  #ff6b5a;

  --given:        #cfe8f5;   /* locked givens */
  --entered:      #7fdfff;   /* user values */

  /* Typography */
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── THE ONE CURSOR ─────────────────────────────────────────────
     A single outline-only arrow in theme cyan (#7fdfff -> %237fdfff
     in the data URI), thick stroke, no fill — used on EVERY page via
     the universal rule below. To restyle it, edit ONLY this variable:
       · stroke="%237fdfff"  -> color
       · stroke-width="3"    -> line thickness
       · rotate(22 10 3)     -> the slight clockwise lean
       · the trailing "10 3" -> hotspot = the arrow tip's x y in the
         32x32 image (keep it on the tip if you move the path)      */
  --cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M6 2 L6 28 L13 20 L24 20 Z" transform="rotate(-10 10 3)" fill="none" stroke="%237fdfff" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>') 10 3, auto;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* one cursor everywhere — overrides every per-element pointer/crosshair/
   default so the whole app shares the single themed arrow */
*, *::before, *::after { cursor: var(--cursor) !important; }

html, body {
  height: 100%;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #11202e 0%, var(--bg-deep) 55%, #060b11 100%);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body { position: relative; }

/* ============================================================
   CRT ATMOSPHERE
   ============================================================ */
.crt-scanlines {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  opacity: .55;
}
.crt-vignette {
  position: fixed; inset: 0; z-index: 8999; pointer-events: none;
  background: radial-gradient(ellipse 90% 85% at 50% 50%,
    rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.crt-flicker {
  position: fixed; inset: 0; z-index: 9001; pointer-events: none;
  background: rgba(127, 223, 255, .015);
  animation: flicker 7s infinite steps(1);
}
@keyframes flicker {
  0%,96%,100% { opacity: 0; }
  97% { opacity: .5; }
  98% { opacity: 0; }
  99% { opacity: .35; }
}

/* ============================================================
   SCREEN MACHINE
   ============================================================ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.screen--active { opacity: 1; pointer-events: auto; }
.screen[hidden] { display: none; }

/* ============================================================
   SOLVER-STATE CHIP  (lives in the bezel control cluster)
   ============================================================ */
.topbar__state {
  border: 1px solid var(--line-strong); padding: 4px 10px;
  color: var(--cyan); letter-spacing: .25em; font-size: 10px;
  background: rgba(127,223,255,.04);
}
.topbar__state.is-refining { color: var(--glow); border-color: var(--cyan);
  animation: pulse 1.1s infinite; }
.topbar__state.is-solved { color: #7fffb0; border-color: #2f7a4f; }
.topbar__state.is-failed { color: var(--danger-glow); border-color: var(--danger); }
@keyframes pulse { 50% { opacity: .4; } }

/* ============================================================
   SCREEN A — INTAKE  (hosted in the shared .crt monitor)
   The drifting number field now fills the CRT body, with the
   intake console floating centered over it.
   ============================================================ */
.intake-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.field-canvas {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
}

.intake {
  position: relative; z-index: 10;
  width: min(560px, 92%);
  max-height: 100%; overflow: auto;
  padding: 6px 4px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 2vh, 20px);
}
.intake__catechism {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--cyan-dim); font-style: italic; min-height: 18px;
  transition: opacity .6s var(--ease);
  text-shadow: 0 0 8px rgba(74,158,186,.4);
}
.intake__heading {
  font-size: clamp(24px, 4.4vw, 38px); font-weight: 800;
  letter-spacing: .26em; color: var(--glow);
  text-shadow: 0 0 18px rgba(127,223,255,.35);
}
.intake__sub { font-size: 12px; color: var(--text-dim); letter-spacing: .18em; }
.intake__actions { width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* Temper tiles */
.temper {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; width: 100%;
}
.temper__tile {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 16px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--sans); color: var(--text-dim);
  transition: all .25s var(--ease);
  position: relative; overflow: hidden;
}
.temper__tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(127,223,255,.08), transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.temper__tile:hover { border-color: var(--cyan-deep); color: var(--text); }
.temper__tile:hover::before { opacity: 1; }
.temper__tile--active {
  border-color: var(--cyan); color: var(--glow);
  box-shadow: 0 0 16px rgba(127,223,255,.15), inset 0 0 20px rgba(127,223,255,.05);
}
.temper__tile--active::before { opacity: 1; }
.temper__index {
  font-family: var(--mono); font-size: 11px; color: var(--cyan-dim);
  letter-spacing: .1em;
}
.temper__name { font-weight: 700; font-size: 14px; letter-spacing: .18em; }
.temper__desc { font-size: 10px; letter-spacing: .15em; color: var(--text-faint); }
.temper__tile--active .temper__desc { color: var(--cyan-dim); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--sans); font-weight: 600;
  letter-spacing: .2em; font-size: 12px;
  color: var(--cyan);
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  padding: 12px 18px; cursor: pointer;
  transition: all .22s var(--ease);
  text-transform: uppercase;
}
.btn:hover { border-color: var(--cyan); color: var(--glow);
  background: var(--bg-panel-2); box-shadow: 0 0 14px rgba(127,223,255,.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
.btn:disabled:hover { box-shadow: none; border-color: var(--line-strong); color: var(--cyan); }

.btn--primary {
  background: linear-gradient(to bottom, #123042, #0d2230);
  border-color: var(--cyan); color: var(--glow);
  text-shadow: 0 0 8px rgba(207,232,245,.4);
}
.btn--primary:hover { box-shadow: 0 0 22px rgba(127,223,255,.28); }
/* destructive action — wipes saved stats; styled in the warning red */
.btn--danger {
  color: var(--danger-glow);
  border-color: var(--danger);
  background: linear-gradient(to bottom, #2a1210, #1c0c0a);
}
.btn--danger:hover {
  color: #ffd8d2; border-color: var(--danger-glow);
  background: #34160f; box-shadow: 0 0 16px rgba(192,57,43,.35);
}
.btn--wide { width: 100%; padding: 15px; font-size: 13px; letter-spacing: .3em; }
.btn--ghost { background: transparent; }
.btn--sm { padding: 9px 12px; font-size: 11px; letter-spacing: .12em; }
.btn--full { width: 100%; }

.iconbtn {
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--cyan); width: 30px; height: 30px; cursor: pointer;
  font-size: 14px; transition: all .2s var(--ease);
}
.iconbtn:hover { border-color: var(--cyan); color: var(--glow); }
.iconbtn.is-muted { color: var(--text-faint); border-color: var(--line); }

/* ============================================================
   TERMINAL
   ============================================================ */
.terminal {
  width: 100%;
  background: rgba(8,14,20,.7);
  border: 1px solid var(--line);
  padding: 14px 16px;
  text-align: left;
  font-family: var(--mono);
}
.terminal__log {
  font-size: 12px; line-height: 1.6; color: var(--text-dim);
  max-height: 116px; overflow-y: auto; margin-bottom: 8px;
  white-space: pre-wrap; word-break: break-word;
}

/* themed scrollbar — Firefox */
.terminal__log {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-deep) transparent;
}
/* themed scrollbar — WebKit (Chrome/Safari/Edge) */
.terminal__log::-webkit-scrollbar { width: 8px; }
.terminal__log::-webkit-scrollbar-track {
  background: transparent;
}
.terminal__log::-webkit-scrollbar-thumb {
  background: var(--cyan-deep);
  border-radius: 0;                /* keep it boxy like the rest of the UI */
  box-shadow: 0 0 6px rgba(127,223,255,.4);
}
.terminal__log::-webkit-scrollbar-thumb:hover {
  background: var(--cyan-dim);
}

.terminal__log:empty { margin-bottom: 0; }
.terminal__log .t-cmd  { color: var(--cyan); }
.terminal__log .t-ok   { color: var(--glow); }
.terminal__log .t-err  { color: var(--danger-glow); }
.terminal__log .t-sys  { color: var(--cyan-dim); }
.terminal__inputline { display: flex; align-items: center; gap: 8px; position: relative; }
.terminal__prompt { color: var(--cyan); font-size: 14px; }
.terminal__input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--glow); font-family: var(--mono); font-size: 13px;
  letter-spacing: .08em;
  /* tiny home gutter so the position-0 block caret has its own space */
  padding-left: 2px;
  /* a wide, glowing block caret that is the REAL caret — it sits at the
     true text-insertion point and moves as the user types */
  caret-color: var(--cyan);
  caret-shape: block;
}
/* push the placeholder past the resting caret so they never overlap */
.terminal__input::placeholder { color: var(--text-faint); letter-spacing: .04em; }
.terminal__input:placeholder-shown { text-indent: 13px; }
/* when the synthetic wide caret is active, suppress the native one */
.terminal__input.has-fake-caret { caret-color: transparent; }
/* the real, wide, glowing block caret — positioned at the true insertion
   point by app.js and blinking like the original */
.terminal__caret {
  position: absolute; display: none;
  width: 9px; background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  animation: blink 1.05s steps(1) infinite;
  pointer-events: none; z-index: 2; mix-blend-mode: screen;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   SCREEN B — CONSOLE  (hosted in the shared .crt monitor)
   One header (title + live tally), a vertically stacked body
   (grid → numpad → two-row toolbar), and a 4-cell stats strip
   pinned to the bottom in the old bins' place.
   ============================================================ */

/* ---- stacked body sizes to its natural content ----
   IMPORTANT: this must NOT be flex:1. If it stretches to fill the column, the
   flexbox makes .crt__fit exactly fill the box and scrollHeight never reports
   overflow — so the Fit scaler thinks everything fits while the grid + numpad
   + toolbar + stats physically overrun and collide with the footer. By sizing
   to content (flex:0 0 auto), .crt__fit reports the TRUE height and the scaler
   shrinks the whole readout to fit. (The Floor body can stay flex:1 because its
   flexible child is a canvas with no min-content height; the console's grid is
   not shrinkable, so it needs honest measurement instead.) */
.console-body {
  flex: 0 0 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(8px, 1.4vh, 16px);
}

/* main split: grid column (left) beside the control panel (right).
   align-items:flex-start keeps both columns pinned to the top so the grid and
   the first button row share a baseline. */
.console-main {
  flex: 0 0 auto; min-height: 0;
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
}
/* left column hugs the grid width; numpad sits directly under the grid */
.console-left {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(6px, 1vh, 12px);
}
/* right column — the control panel. Fills the remaining width up to a
   sensible cap so the buttons read as a tidy stacked panel, not a sprawl. */
.console-right {
  flex: 1 1 auto; min-width: 0; max-width: 340px;
  align-self: stretch;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  border-left: 2px solid var(--line);
  padding-left: clamp(14px, 2vw, 28px);
}

/* Grid — sized off viewport height so the body fills the CRT with no gap.
   The grid is the flexible element; numpad/toolbar/stats are fixed-ish. */
.grid-frame {
  position: relative; flex: none;
  padding: 6px; background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 40px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.4);
}
.sudoku-grid {
  /* Stable natural size — the Fit scaler shrinks the whole readout to fit the
     box, so the grid no longer needs a vh term (the old min(38vh,…) made the
     grid huge on short-but-wide 16:9 windows, which is what overran the footer
     before honest measurement was in place). */
  --size: min(56vw, 449px);
  width: var(--size); height: var(--size);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background: var(--line-strong);
  gap: 1px;
}
.cell {
  background: var(--bg-cell);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700;
  font-size: calc(var(--size, 460px) / 18);
  color: var(--entered);
  cursor: pointer; position: relative; user-select: none;
  transition: background .15s, color .15s;
}
/* heavier 3x3 borders */
.cell[data-c="2"], .cell[data-c="5"] { box-shadow: inset -2px 0 0 var(--line-strong); }
.cell[data-r="2"], .cell[data-r="5"] { box-shadow: inset 0 -2px 0 var(--line-strong); }
.cell[data-r="2"][data-c="2"], .cell[data-r="2"][data-c="5"],
.cell[data-r="5"][data-c="2"], .cell[data-r="5"][data-c="5"] {
  box-shadow: inset -2px 0 0 var(--line-strong), inset 0 -2px 0 var(--line-strong);
}
.cell--given { color: var(--given); text-shadow: 0 0 6px rgba(207,232,245,.3); cursor: default; }
.cell--entered { color: var(--entered); text-shadow: 0 0 8px rgba(127,223,255,.45); }
.cell--selected {
  background: #14334a;
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 16px rgba(127,223,255,.3) !important;
  z-index: 2;
}
.cell--peer { background: #0f2230; }
.cell--same { background: #16384f; color: var(--glow); }
.cell--conflict { color: var(--danger-glow) !important;
  text-shadow: 0 0 10px rgba(255,107,90,.6); background: #2a1414; }
.cell--settle { animation: settle .45s var(--ease); }
@keyframes settle {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* solving sweep */
.grid-sweep {
  position: absolute; left: 6px; right: 6px; top: 6px; height: 0;
  background: linear-gradient(to bottom, transparent, rgba(127,223,255,.18), transparent);
  pointer-events: none; opacity: 0;
}
.grid-sweep.is-active { opacity: 1; animation: sweep 1.1s var(--ease); }
@keyframes sweep { from { height: 0; } to { height: calc(100% - 12px); } }

/* Numpad — compact single row of ten, scaled to the grid width */
.numpad {
  flex: none;
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: clamp(5px, 0.7vw, 8px); width: min(58vw, 440px);
}
.numpad__key {
  aspect-ratio: 1 / 1;
  background: var(--bg-panel); border: 1px solid var(--line-strong);
  color: var(--cyan); font-family: var(--mono);
  font-size: clamp(13px, 1.5vw, 18px); font-weight: 600;
  cursor: pointer; transition: all .18s var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.numpad__key:hover { border-color: var(--cyan); color: var(--glow);
  background: var(--bg-panel-2); box-shadow: 0 0 12px rgba(127,223,255,.18); }
.numpad__key:active { transform: translateY(1px); }
.numpad__key--erase { color: var(--text-dim); }

/* ============================================================
   CONTROL PANEL — the right-side column beside the grid.
   Buttons stack into labelled groups, each separated by a hairline
   divider so the panel reads as a tidy instrument cluster.
   ============================================================ */
.ctl-group {
  display: flex; flex-direction: column; gap: 8px;
}
/* a faint divider above each group (echoes the header rule). The drawer's
   inner wrapper also gets one so manage/custom stay visually separated. */
.console-right > .ctl-group + .ctl-group,
.console-right > .protocol-drawer + .ctl-group,
.console-right > .ctl-group + .protocol-drawer,
.protocol-drawer__inner > .ctl-group + .ctl-group {
  padding-top: clamp(10px, 1.4vh, 16px);
  border-top: 1px solid var(--line);
}
.ctl-group__heading {
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--cyan-dim); margin-bottom: 2px;
}

/* primary actions: REFINE + CHECK share a row, REFINE leads */
.ctl-group--primary {
  flex-direction: row; gap: 8px;
}
.ctl-group--primary .btn { flex: 1 1 auto; min-width: 0; }
.ctl-group--primary #refine-btn { flex: 2 1 0; }
/* the PROTOCOLS drawer toggle is a MOBILE-only affordance — hidden on desktop,
   where the drawer contents are simply always shown */
.drawer-toggle { display: none; }

/* a reusable two-up button grid (manage actions + custom intake actions) */
.ctl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctl-grid2 .btn { width: 100%; min-width: 0; }

/* ---- the PROTOCOLS drawer ----
   DESKTOP: a plain block, always open (no animation, no toggle).
   MOBILE: an animated push-down drawer (grid-template-rows 0fr→1fr) — it
   expands the layout and pushes siblings down, then rolls back, with NO
   scaling of the readout. */
.protocol-drawer { display: block; }
.protocol-drawer__inner {
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vh, 16px);
}

/* intake group */
.ctl-paste { display: flex; gap: 8px; }
.ctl-paste .paste-input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg-cell); border: 1px solid var(--line-strong);
  color: var(--glow); font-family: var(--mono); font-size: 11px;
  padding: 9px 11px; outline: none; letter-spacing: .04em;
}
.ctl-paste .paste-input:focus { border-color: var(--cyan); }
.ctl-paste .paste-input::placeholder { color: var(--text-faint); }
.ctl-paste .btn { flex: 0 0 auto; }
.intake-default, .intake-edit { display: flex; flex-direction: column; gap: 8px; }
.ctl-group--intake .paste-error {
  font-size: 10px; color: var(--danger-glow); min-height: 0; letter-spacing: .05em;
  text-align: center;
}
.ctl-group--intake .paste-error:empty { display: none; }

/* manual-intake state swap */
.manual-edit { display: none; }
body.is-editing .manual-default { display: none; }
body.is-editing .manual-edit { display: flex; }
body.is-editing .ctl-group--manage { opacity: .4; pointer-events: none; filter: saturate(.4); }

/* temper selector — four tiles in one row inside the panel */
.toolbar-row--temper {
  width: 100%; display: flex; flex-wrap: nowrap; gap: 6px;
}
.toolbar-row--temper .temper__tile {
  flex: 1 1 0; min-width: 0;
  flex-direction: column; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 1px;
  padding: 7px 4px;
}
.toolbar-row--temper .temper__index { display: none; } /* drop the Greek numeral */
.toolbar-row--temper .temper__name { font-size: 11px; letter-spacing: .1em; }
.toolbar-row--temper .temper__desc { font-size: 8px; letter-spacing: .08em; }
/* temper is meaningless while authoring givens — dim it */
body.is-editing .ctl-group--temper { opacity: .4; pointer-events: none; filter: saturate(.4); }

/* ---- numpad inside the panel (DESKTOP) ----
   Two rows: 1–5 on top, 6–9 + erase on the bottom. (The base .numpad rule
   further down still defines the key look; here we just re-grid it.) */
.ctl-group--numpad .numpad {
  width: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(5px, 0.5vw, 8px);
}

.ctl-group--numpad .numpad__key { aspect-ratio: auto; height: 28px; }

.manual-clues {
  display: inline-flex; gap: 8px; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--text-dim);
}
.manual-clues #manual-clues { color: var(--cyan); font-size: 14px; }
.manual-clues__min { color: var(--text-faint); }
.manual-clues.is-short #manual-clues { color: var(--danger-glow); }

/* the authored givens read like locked givens, but with an active tint */
.cell--editgiven {
  color: var(--glow);
  text-shadow: 0 0 8px rgba(127,223,255,.5);
  background: #0e2030;
}
/* a quiet "EDITING" cue on the header title */
body.is-editing .crt-head__name::after {
  content: " · EDITING"; color: var(--cyan); opacity: .85;
  font-size: .7em; letter-spacing: .14em;
}
body.is-editing .crt-head__bar {
  border-color: var(--glow);
  box-shadow: 0 0 14px rgba(127,223,255,.4), inset 0 0 12px rgba(127,223,255,.1);
}

/* ---- bottom stats strip: 4 bordered cells (Floor-bin styling) ---- */
.console-stats {
  flex: none; margin-top: clamp(4px, 0.8vh, 10px); width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1vw, 12px);
  padding-top: clamp(20px, 1.4vh, 16px); position: relative;
}
/* twin divider lines above the strip — same motif as the header underline */
.console-stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.4);
}
.cstat {
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.18), inset 0 0 10px rgba(127,223,255,.04);
  background: rgba(10,22,32,.35);
  padding: 7px clamp(8px, 1vw, 14px) 8px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cstat__label {
  font-family: var(--sans); font-size: 9px; letter-spacing: .16em;
  color: var(--cyan-dim); text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cstat__value {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(15px, 1.9vw, 22px); color: var(--glow);
  letter-spacing: .02em; line-height: 1; text-shadow: 0 0 10px rgba(127,223,255,.3);
  transition: color .3s, text-shadow .3s;
}
.cstat__value small { font-size: .6em; color: var(--text-dim); }
.cstat.is-warn .cstat__value { color: var(--danger-glow); text-shadow: 0 0 10px rgba(255,107,90,.4); }

/* solver state chip lives in the bezel now */
.iconbtn.is-on { color: var(--glow); border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(127,223,255,.2); }


.iconbtn.is-on { color: var(--glow); border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(127,223,255,.2); }

/* ============================================================
   TOAST — tiered corporate notice
   ============================================================ */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-panel); border: 1px solid var(--cyan-deep);
  color: var(--glow); padding: 12px 20px; z-index: 9500; opacity: 0; pointer-events: none;
  transition: all .4s var(--ease); box-shadow: 0 0 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 4px; max-width: min(440px, 90vw);
  border-left-width: 3px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast__mark {
  font-family: var(--mono); font-size: 8px; letter-spacing: .3em;
  color: var(--text-faint); text-transform: uppercase;
}
.toast__msg { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; line-height: 1.4; }
.toast--friendly { border-left-color: var(--cyan); }
.toast--passive  { border-left-color: #b08a3a; }
.toast--passive .toast__msg { color: #e0c98a; }
.toast--creepy   { border-left-color: var(--danger); background: #14100f; }
.toast--creepy .toast__msg { color: #e9c4bc; font-style: italic; }

/* ============================================================
   INTERSTITIAL — "FILE ACCEPTED" beat
   ============================================================ */
.interstitial {
  position: fixed; inset: 0; z-index: 9600; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(10,16,24,.85), rgba(6,11,17,.96));
  opacity: 0; transition: opacity .3s var(--ease);
}
.interstitial.show { opacity: 1; }
.interstitial__text {
  font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 5vw, 42px);
  letter-spacing: .5em; color: var(--glow); text-indent: .5em;
  text-shadow: 0 0 24px rgba(127,223,255,.4);
  transform: scale(.9); transition: transform .5s var(--ease);
}
.interstitial.show .interstitial__text { transform: scale(1); }

/* ============================================================
   BREAK ROOM
   ============================================================ */
.breakroom {
  position: fixed; inset: 0; z-index: 9700;
  background: #04070b; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .6s var(--ease);
  overflow: hidden;
}
.breakroom.show { opacity: 1; pointer-events: auto; }
.breakroom__light {
  position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 480px; height: 90%;
  background: radial-gradient(ellipse 50% 60% at 50% 0%,
    rgba(207,232,245,.16) 0%, rgba(127,223,255,.05) 35%, transparent 70%);
  pointer-events: none;
}
.breakroom__inner {
  position: relative; z-index: 2; text-align: center;
  max-width: 540px; padding: 40px 30px;
}
.breakroom__header {
  font-family: var(--sans); font-weight: 700; font-size: clamp(15px, 3vw, 20px);
  letter-spacing: .2em; color: var(--glow); margin-bottom: 28px; line-height: 1.5;
}
.breakroom__instr {
  font-size: 12px; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 24px;
}
.breakroom__affirm {
  font-family: var(--mono); font-size: clamp(15px, 3.4vw, 22px); color: var(--cyan);
  letter-spacing: .04em; line-height: 1.6; margin: 0 auto 26px; max-width: 460px;
  border: none; transition: all .5s var(--ease); text-shadow: 0 0 12px rgba(127,223,255,.3);
}
.breakroom__affirm--intense { color: var(--glow); text-shadow: 0 0 20px rgba(207,232,245,.6); }
.breakroom__affirm.flash { animation: brflash .4s var(--ease); }
@keyframes brflash { 50% { color: #fff; text-shadow: 0 0 30px rgba(255,255,255,.8); } }
.breakroom__count {
  font-family: var(--mono); font-size: 11px; color: var(--danger-glow);
  letter-spacing: .08em; min-height: 16px; margin-bottom: 20px;
}
.breakroom__btn {
  font-size: 13px; letter-spacing: .25em; padding: 13px 40px;
  border-color: var(--cyan-deep);
}

/* ============================================================
   GENERIC MODAL (waffle + report)
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 9650; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,13,20,.8), rgba(4,7,11,.94));
  backdrop-filter: blur(3px);
}
.modal__panel {
  position: relative; z-index: 2; background: var(--bg-panel);
  border: 1px solid var(--line-strong); width: min(560px, 94vw);
  max-height: 90vh; overflow-y: auto; padding: 28px;
  box-shadow: 0 0 60px rgba(0,0,0,.7);
  transform: scale(.95); transition: transform .4s var(--ease);
}
.modal.show .modal__panel { transform: scale(1); }
.modal__x {
  position: absolute; top: 12px; right: 12px; background: transparent;
  border: 1px solid var(--line); color: var(--text-dim); width: 28px; height: 28px;
  cursor: pointer; font-size: 13px; transition: all .2s var(--ease);
}
.modal__x:hover { border-color: var(--cyan); color: var(--glow); }

/* ---- Reset confirmation (destructive) ---- */
.confirm__panel { width: min(460px, 94vw); text-align: center; }
.confirm__panel.modal__panel {
  border-color: var(--danger);
  box-shadow: 0 0 60px rgba(0,0,0,.7), 0 0 26px rgba(192,57,43,.22);
}
.confirm__title {
  font-family: var(--sans); font-weight: 800; letter-spacing: .16em;
  font-size: 16px; color: var(--danger-glow); margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(255,107,90,.35);
}
.confirm__body {
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  color: var(--text); letter-spacing: .04em; margin-bottom: 24px;
}
.confirm__actions { display: flex; gap: 12px; justify-content: center; }
.confirm__actions .btn { min-width: 120px; }

/* ---- Waffle Party ---- */
.waffle-banner {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-12px);
  z-index: 9400; background: linear-gradient(to right, #123042, #1a3a4e, #123042);
  border: 1px solid var(--cyan); color: var(--glow);
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .22em;
  padding: 11px 26px; cursor: pointer; opacity: 0; pointer-events: none;
  transition: all .5s var(--ease); box-shadow: 0 0 24px rgba(127,223,255,.25);
}
.waffle-banner.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
  animation: bannerpulse 2.4s infinite; }
@keyframes bannerpulse { 50% { box-shadow: 0 0 36px rgba(127,223,255,.5); } }
.waffle-banner__star { color: var(--cyan); }
.waffle__panel { text-align: center; }
.waffle__title {
  font-weight: 800; font-size: 22px; letter-spacing: .26em; color: var(--glow);
  text-shadow: 0 0 18px rgba(127,223,255,.35); margin-bottom: 6px;
}
.waffle__sub { font-size: 11px; letter-spacing: .15em; color: var(--text-dim); margin-bottom: 20px; }
.waffle__video {
  /* match the clip's native 1280×592 so it fills with no letterbox bars */
  position: relative; width: 100%; aspect-ratio: 1280 / 592; background: #000;
  border: 1px solid var(--line-strong); margin-bottom: 18px; overflow: hidden;
}
.waffle__video iframe,
.waffle__video video { position: relative; z-index: 2; display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.waffle__video-fallback {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  justify-content: center; padding: 20px; text-align: center;
  font-size: 12px; color: var(--text-dim); letter-spacing: .08em; line-height: 1.6;
}
.waffle__pixel { display: flex; justify-content: center; margin-bottom: 18px; min-height: 90px; }
.pixfig {
  display: grid; grid-template-columns: repeat(11, 7px); grid-auto-rows: 7px;
  filter: drop-shadow(0 0 6px rgba(127,223,255,.4));
}
.px { width: 7px; height: 7px; }
.px--0 { background: transparent; }
.px--1 { background: var(--cyan); }
.px--2 { background: var(--glow); }
.px--3 { background: var(--cyan-dim); }
.waffle__cert {
  border: 1px dashed var(--cyan-deep); padding: 18px; margin-bottom: 20px;
  text-align: center; background: rgba(127,223,255,.03);
}
.waffle__cert-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .25em; color: var(--cyan);
  margin-bottom: 12px;
}
.waffle__cert p { font-size: 12px; line-height: 1.7; color: var(--text); margin-bottom: 8px; }
.waffle__cert strong { color: var(--glow); }
.waffle__badge { color: var(--text-dim); font-family: var(--mono); font-size: 11px; }
.waffle__fine { font-size: 10px !important; color: var(--text-faint) !important; font-style: italic; }

/* ---- Refinement Report ---- */
.report__panel { padding: 0; }
.report__form { padding: 30px 30px 24px; border-bottom: 1px solid var(--line); }
.report__crest { display: flex; justify-content: center; margin-bottom: 12px; }
.report__head {
  text-align: center; font-family: var(--mono); font-weight: 700; font-size: 18px;
  letter-spacing: .22em; color: var(--glow); margin-bottom: 4px;
}
.report__dept {
  text-align: center; font-size: 9px; letter-spacing: .26em; color: var(--text-dim);
  margin-bottom: 22px; text-transform: uppercase;
}
.report__fields {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin-bottom: 22px;
}
.report__fields dt {
  font-size: 10px; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase;
  align-self: center;
}
.report__fields dd {
  font-family: var(--mono); font-size: 13px; color: var(--cyan); text-align: right;
  font-weight: 600;
}
.report__thanks {
  text-align: center; font-family: var(--mono); font-size: 15px; color: var(--glow);
  letter-spacing: .1em; padding-top: 16px; border-top: 1px solid var(--line);
}
.report__tempers { margin-bottom: 22px; }
.report__subhead {
  font-size: 10px; letter-spacing: .16em; color: var(--text-dim);
  text-transform: uppercase; margin: 4px 0 10px;
}
.report__tempers-table {
  width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px;
}
.report__tempers-table th, .report__tempers-table td {
  padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--line);
}
.report__tempers-table thead th {
  font-size: 9px; letter-spacing: .12em; color: var(--text-dim);
  text-transform: uppercase; font-weight: 500;
}
.report__tempers-table th:first-child,
.report__tempers-table td:first-child { text-align: left; }
.report__tempers-table tbody th {
  color: var(--glow); font-weight: 600; letter-spacing: .06em;
}
.report__tempers-table tbody td { color: var(--cyan); }
.report__actions { display: flex; gap: 10px; padding: 18px 30px; }
.report__actions .btn { flex: 1; }

/* ============================================================
   REVEALS (terminal egg overlays)
   ============================================================ */
.reveal {
  position: fixed; inset: 0; z-index: 9680; display: flex; align-items: center;
  justify-content: center; cursor: pointer; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(ellipse at center, rgba(8,13,20,.92), rgba(4,7,11,.98));
}
.reveal.show { opacity: 1; }
.reveal__inner { text-align: center; max-width: 90vw; padding: 30px; }
.reveal__hint {
  margin-top: 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--text-faint);
}
/* KIER */
.kier-portrait { width: 180px; height: auto; filter: drop-shadow(0 0 14px rgba(127,223,255,.4)); margin-bottom: 14px; }
.kier-name { font-weight: 800; font-size: 26px; letter-spacing: .3em; color: var(--glow); }
.kier-years { font-family: var(--mono); font-size: 10px; letter-spacing: .25em; color: var(--text-dim); margin: 8px 0 22px; }
.kier-scripture { font-family: var(--mono); font-style: italic; font-size: 15px; color: var(--cyan); letter-spacing: .04em; margin-bottom: 8px; }
.kier-scripture--dim { color: var(--cyan-dim); font-size: 13px; }
/* HELLY */
.reveal--helly { background: radial-gradient(ellipse at center, rgba(60,12,8,.95), rgba(25,4,4,.99)); }
.helly-line { font-weight: 800; font-size: clamp(28px, 7vw, 56px); letter-spacing: .12em; color: #ff6b5a; text-shadow: 0 0 30px rgba(255,107,90,.6); }
.helly-sub { font-family: var(--mono); font-size: 13px; color: #e9a097; letter-spacing: .2em; margin: 14px 0 28px; }
.helly-note { font-family: var(--mono); font-size: 11px; letter-spacing: .25em; color: #b85c50; }
/* MARK */
.mark-quote { font-family: var(--mono); font-style: italic; font-size: clamp(18px, 4vw, 28px); color: var(--glow); letter-spacing: .03em; line-height: 1.5; }
.mark-sub { font-family: var(--mono); font-size: 12px; color: var(--text-dim); letter-spacing: .2em; margin: 16px 0 36px; }
.mark-q { font-size: 14px; letter-spacing: .12em; color: var(--cyan-dim); }
/* HATCH (LOST) */
.reveal--hatch { background: #000; }
.hatch-counter { font-family: var(--mono); font-size: clamp(24px, 6vw, 44px); letter-spacing: .15em; color: #8fff8f; text-shadow: 0 0 20px rgba(143,255,143,.5); }
.hatch-fail { font-family: var(--mono); font-weight: 700; font-size: clamp(20px, 5vw, 36px); letter-spacing: .3em; color: #ff5a4a; margin: 20px 0; animation: brflash .6s infinite; }
.hatch-note { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #5a7a5a; }

/* Palette takeovers */
body.rebellion { animation: redshift .3s var(--ease) forwards; }
body.rebellion .crt-scanlines { background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(80,0,0,.3) 3px, transparent 4px); }
@keyframes redshift { to { filter: hue-rotate(-150deg) saturate(1.4); } }
body.hatch { filter: contrast(1.2) brightness(.85); }

/* ============================================================
   PHASE 3 — OPTICAL INTAKE  (Import External Data Artifact)
   Reuses .modal shell, palette, typography, and button styles.
   ============================================================ */
.optical__panel { padding: 0; }
.optical__head {
  text-align: center; font-family: var(--mono); font-weight: 700; font-size: 18px;
  letter-spacing: .22em; color: var(--glow); padding: 28px 30px 0;
}
.optical__dept {
  text-align: center; font-size: 9px; letter-spacing: .26em; color: var(--text-dim);
  margin-bottom: 4px; text-transform: uppercase;
}
.optical__stage { padding: 18px 30px 26px; }

/* ---- intake drop zone ---- */
.optical__drop {
  border: 1px dashed var(--cyan-deep); background: rgba(127,223,255,.03);
  padding: 34px 20px; text-align: center; cursor: pointer; color: var(--cyan-dim);
  transition: all .22s var(--ease); outline: none;
}
.optical__drop:hover, .optical__drop:focus-visible {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(127,223,255,.06); box-shadow: inset 0 0 24px rgba(127,223,255,.06);
}
.optical__drop.is-over {
  border-color: var(--cyan); color: var(--glow);
  background: rgba(127,223,255,.1); box-shadow: 0 0 22px rgba(127,223,255,.18) inset;
}
.optical__drop-mark { display: flex; justify-content: center; margin-bottom: 12px;
  filter: drop-shadow(0 0 8px rgba(127,223,255,.3)); }
.optical__drop-title {
  font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .22em;
  color: var(--glow); margin-bottom: 8px;
}
.optical__drop-sub { font-size: 11px; line-height: 1.7; color: var(--text-dim); letter-spacing: .04em; }
.optical__controls { display: flex; gap: 10px; margin: 16px 0 12px; }
.optical__controls .btn { flex: 1; }
.optical__note {
  font-size: 9px; letter-spacing: .12em; color: var(--text-faint); text-align: center;
  font-style: italic; line-height: 1.6;
}

/* ---- working / progress panel ---- */
.optical__work { text-align: center; padding: 26px 10px 18px; }
.optical__spinner { display: inline-flex; gap: 7px; margin-bottom: 22px; }
.optical__spinner span {
  width: 9px; height: 9px; background: var(--cyan); display: inline-block;
  box-shadow: 0 0 8px var(--cyan); animation: opticalPulse 1.1s var(--ease) infinite;
}
.optical__spinner span:nth-child(2) { animation-delay: .15s; }
.optical__spinner span:nth-child(3) { animation-delay: .3s; }
@keyframes opticalPulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.optical__work-label {
  font-family: var(--mono); font-size: 14px; letter-spacing: .2em; color: var(--glow);
  margin-bottom: 18px; text-shadow: 0 0 12px rgba(127,223,255,.3);
}
.optical__work-bar {
  height: 4px; background: var(--bg-cell); border: 1px solid var(--line-strong);
  overflow: hidden; margin: 0 auto 12px; max-width: 320px;
}
.optical__work-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--cyan-deep), var(--cyan));
  box-shadow: 0 0 10px rgba(127,223,255,.4); transition: width .4s var(--ease);
}
.optical__work-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--text-dim); }

/* ---- review / correction ---- */
.optical__review-instr {
  font-size: 11px; line-height: 1.7; color: var(--text-dim); letter-spacing: .04em;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.optical__review-body { display: flex; gap: 18px; align-items: flex-start; }
.optical__review-gridwrap { flex: 1 1 auto; min-width: 0; }
.optical__rgrid {
  --rsize: min(58vw, 340px);
  width: var(--rsize); height: var(--rsize); max-width: 100%;
  display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
  background: var(--line-strong); gap: 1px; margin: 0 auto;
  border: 1px solid var(--line-strong);
}
.optical__rcell {
  background: var(--bg-cell); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: calc(var(--rsize, 340px) / 20);
  color: var(--entered); cursor: pointer; user-select: none; position: relative;
  transition: background .14s, color .14s;
}
.optical__rcell[data-c="2"], .optical__rcell[data-c="5"] { box-shadow: inset -2px 0 0 var(--line-strong); }
.optical__rcell[data-r="2"], .optical__rcell[data-r="5"] { box-shadow: inset 0 -2px 0 var(--line-strong); }
.optical__rcell.is-filled { color: var(--glow); text-shadow: 0 0 6px rgba(207,232,245,.3); }
.optical__rcell.is-low {
  color: #e0c98a; background: #1f1a10;
  box-shadow: inset 0 0 0 1px #b08a3a; text-shadow: 0 0 8px rgba(176,138,58,.5);
}
.optical__rcell.is-conflict {
  color: var(--danger-glow) !important; background: #2a1414;
  text-shadow: 0 0 10px rgba(255,107,90,.6);
}
.optical__rcell.is-sel {
  background: #14334a;
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 14px rgba(127,223,255,.3) !important; z-index: 2;
}
.optical__review-aside { width: 150px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }
.optical__warp-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--cyan-dim);
  margin-bottom: 6px; text-transform: uppercase;
}
.optical__warp img {
  width: 100%; display: block; border: 1px solid var(--line-strong);
  image-rendering: auto; background: #000; filter: contrast(1.1);
}
.optical__rpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.optical__rkey {
  aspect-ratio: 1 / 1; background: var(--bg-panel); border: 1px solid var(--line-strong);
  color: var(--cyan); font-family: var(--mono); font-size: 16px; font-weight: 600;
  cursor: pointer; transition: all .16s var(--ease);
}
.optical__rkey:hover { border-color: var(--cyan); color: var(--glow);
  background: var(--bg-panel-2); box-shadow: 0 0 10px rgba(127,223,255,.18); }
.optical__rkey:active { transform: translateY(1px); }
.optical__rkey--erase { color: var(--text-dim); font-size: 13px; }
.optical__review-err {
  font-size: 10px; color: var(--danger-glow); min-height: 14px; letter-spacing: .05em;
  margin: 12px 0 0; text-align: center; font-family: var(--mono);
}
.optical__review-actions { display: flex; gap: 10px; margin-top: 16px; }
.optical__review-actions .btn { flex: 1; }

/* ---- failure panel ---- */
.optical__fail { text-align: center; padding: 24px 10px 14px; }
.optical__fail-mark { font-size: 34px; color: #b08a3a; margin-bottom: 14px;
  text-shadow: 0 0 16px rgba(176,138,58,.4); }
.optical__fail-head {
  font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: .2em;
  color: var(--glow); margin-bottom: 12px;
}
.optical__fail-sub { font-size: 11px; line-height: 1.7; color: var(--text-dim);
  letter-spacing: .04em; margin-bottom: 22px; max-width: 380px; margin-left: auto; margin-right: auto; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  /* On narrow screens we no longer collapse the CRT into a flowing column
     (that wasted the tall viewport and produced the square box). Instead the
     monitor stays a real framed rectangle that USES the vertical space — it
     fills height and takes a portrait-friendly aspect ceiling — while the
     scaler shrinks the readout to fit. No internal scrollbars. */
  .screen--monitor, .screen--floor {
    padding: 10px;
    align-items: center; justify-content: center;
    flex-direction: column;
  }
  .crt {
    /* taller-than-wide ceiling so a phone fills its height; still capped by
       the void via max-height/max-width */
    aspect-ratio: 3 / 4;
    max-width: 560px; max-height: 100%;
    border-radius: 18px / 16px;
    box-shadow: 0 0 0 2px #0a1922, 0 0 0 8px #060f17, 0 0 0 10px #0c2230,
      0 16px 40px rgba(0,0,0,.6), inset 0 0 90px rgba(0,0,0,.5);
  }
  .crt__inner { padding: 14px 16px 10px; }
  /* On mobile the console must NOT scale to fit — opening the PROTOCOLS drawer
     should push the layout down and, if it runs past the glass, scroll inside
     the CRT (like the About page). So we cancel the Fit scaler's transform here
     and let the readout scroll vertically. */
  #console-crt .crt__fit {
    transform: scale(1.012);
    overflow-y: auto; overflow-x: hidden;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .console-body { gap: clamp(8px, 1.4vh, 16px); }
  .crt-head { padding-bottom: 12px; margin-bottom: 14px; }
  .crt-head__dept { display: none; }
  .sudoku-grid { --size: min(82vw, 460px); width: min(82vw, 460px); }

  /* ---- console folds to ONE column on narrow screens ----
     The right "panel" stops being a side rail and becomes a normal stacked
     block. Order on the shared column: grid → numpad → primary actions (with
     the PROTOCOLS toggle) → the push-down drawer (manage + custom) → temper.
     Full-width labelled buttons, no icon-only mode. */
  .console-main { flex-direction: column; align-items: center; gap: clamp(10px, 1.6vh, 18px); }
  .console-left { width: 100%; align-items: center; order: 0; }
  .console-right {
    width: 100%; max-width: min(86vw, 480px); align-self: center;
    display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px);
  }

  /* numpad jumps OUT of its desktop position (after temper) to sit directly
     under the grid — it becomes the first thing in the right column, and goes
     back to a single 10-key row */
  .ctl-group--numpad { order: 1; }
  .ctl-group--numpad .numpad {
    grid-template-columns: repeat(10, 1fr);
    width: 100%;
  }
  .ctl-group--numpad .ctl-group__heading { display: none; }

  .ctl-group--primary { order: 2; }
  .protocol-drawer    { order: 3; }
  .ctl-group--temper  { order: 4; }

  /* dividers/headings are noise once the panel is a plain stack — drop the
     inter-group borders and the ENTRIES/PROTOCOLS/CUSTOM/TEMPER labels EXCEPT
     keep the drawer's own internal structure tidy */
  .console-right > .ctl-group + .ctl-group,
  .console-right > .protocol-drawer + .ctl-group,
  .console-right > .ctl-group + .protocol-drawer { border-top: none; padding-top: 0; }
  .console-right > .ctl-group--temper > .ctl-group__heading { display: none; }

  /* PROTOCOLS toggle becomes visible and joins the primary row */
  .drawer-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 1 1 100%; justify-content: center;
    color: var(--text-dim); border-color: var(--line-strong);
  }
  .drawer-toggle:hover { color: var(--cyan); }
  .drawer-toggle__chev {
    font-size: .9em; line-height: 1; transition: transform .25s var(--ease);
    color: var(--cyan-dim);
  }
  .drawer-toggle[aria-expanded="true"] { color: var(--cyan); border-color: var(--cyan-deep); }
  .drawer-toggle[aria-expanded="true"] .drawer-toggle__chev { transform: rotate(90deg); }
  /* primary row wraps so REFINE + CHECK share the top line and PROTOCOLS sits
     full-width beneath them */
  .ctl-group--primary { flex-wrap: wrap; gap: 8px; }
  .ctl-group--primary .btn:not(.drawer-toggle) {
    flex: 1 1 calc(50% - 4px); min-width: 0; white-space: nowrap;
  }
  .drawer-toggle { flex: 1 1 100% !important; }

  /* ---- the REAL push-down drawer ----
     A grid whose single row animates from 0fr (collapsed) to 1fr (open). The
     inner wrapper has overflow:hidden so content is clipped while rolling, and
     min-height:0 lets the 0fr row actually collapse. This expands the layout
     and pushes the temper + stats DOWN — no transform, no scaling. */
  .protocol-drawer {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
  }
  .protocol-drawer.is-open { grid-template-rows: 1fr; }
  .protocol-drawer__inner {
    overflow: hidden; min-height: 0;
    /* a hairline frame so the open drawer reads as a distinct tray */
    gap: clamp(10px, 1.6vh, 16px);
  }
  /* pad only when open so the collapsed state is truly flush/zero-height */
  .protocol-drawer.is-open .protocol-drawer__inner {
    padding-top: clamp(10px, 1.4vh, 14px);
    margin-top: 2px; border-top: 1px solid var(--line);
  }
  /* keep the group dividers/headings inside the drawer (they aid scanning) */
  .protocol-drawer .ctl-group__heading { display: block; }

  .bezel-controls {
    position: absolute; top: 12px; right: 12px;
    width: auto; max-width: none; margin: 0;
    justify-content: flex-end; flex-wrap: wrap; gap: 6px;
  }
  .optical__rgrid { --rsize: min(72vw, 360px); }
}
@media (max-width: 560px) {
  .temper { grid-template-columns: repeat(2, 1fr); }
  .toolbar-row--temper { flex-wrap: wrap; }
  .toolbar-row--temper .temper__tile { flex: 1 1 40%; }
  .console-stats { grid-template-columns: repeat(2, 1fr); }
  .cstat__label { font-size: 8px; letter-spacing: .1em; }
  .cstat__value { font-size: 16px; }
  .crt-head__name { font-size: 13px; }
  .crt-foot { font-size: 9px; letter-spacing: .1em; gap: 6px; }
  .ctrlbtn__glyph { font-size: 16px; }
  .modal__panel { padding: 20px; }
  .report__form { padding: 22px 18px 18px; }
  .report__actions { padding: 14px 18px; flex-direction: column; }
  .waffle-banner { font-size: 10px; padding: 9px 16px; letter-spacing: .14em; top: 70px; }
  .breakroom__header { font-size: 15px; }
  .toast { bottom: 16px; }
  .optical__review-body { flex-direction: column; }
  .optical__review-aside { width: 100%; flex-direction: row; }
  .optical__warp { flex: 0 0 40%; }
  .optical__rpad { flex: 1 1 auto; }
  .optical__rgrid { --rsize: min(88vw, 420px); }
  .optical__controls { flex-direction: column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .crt-flicker { display: none; }
}

/* ============================================================
   SHARED MONITOR — the single CRT that hosts every screen.
   .screen--monitor frames one .crt in a dark void. The .crt
   shell, scanlines, vignette and the .crt-head readout are
   defined ONCE here and reused by intake, console and floor.
   Change the monitor or the logo here → every page updates.
   ============================================================ */
.screen--monitor {
  background: #04070b;
  align-items: center; justify-content: center;
  padding: clamp(8px, 2.2vh, 26px);
  /* centering context for the shape-first .crt (fills, capped by aspect) */
  min-height: 0;
}

/* utility controls live in the dark bezel, off the screen itself */
.bezel-controls {
  position: absolute; top: 14px; right: 16px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  color: var(--text-dim);
}
.bezel-id  { color: var(--text-dim); }
.bezel-sep { color: var(--text-faint); }

/* ---------- in-screen control stack: two square buttons ----------
   A single column of two buttons (audio cycle + return home) that lives
   inside the CRT header, sized so the stack height matches the bordered
   title bar beside it. Used on the console and floor screens. */
.crt-controls {
  flex: none; align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; gap: 6px;
}
.ctrlbtn {
  flex: 0 0 auto;
  /* explicit square — keeps the column exactly button-wide (no dead space) */
  width: clamp(22px, 2.5vw, 30px); height: clamp(22px, 2.5vw, 30px);
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,22,32,.35);
  border: 2px solid var(--cyan); color: var(--cyan);
  cursor: pointer; padding: 0;
  box-shadow: 0 0 8px rgba(127,223,255,.18), inset 0 0 10px rgba(127,223,255,.04);
  transition: all .2s var(--ease);
}
.ctrlbtn:hover {
  color: var(--glow); border-color: var(--glow);
  box-shadow: 0 0 16px rgba(127,223,255,.4), inset 0 0 12px rgba(127,223,255,.08);
}
.ctrlbtn:active { transform: translateY(1px); }
.ctrlbtn__glyph {
  font-size: clamp(15px, 1.8vw, 21px); line-height: 1;
  text-shadow: 0 0 8px rgba(127,223,255,.5);
}
/* audio-mode tints: off = faint, ambient = brighter glow */
.ctrlbtn.is-muted { color: var(--text-faint); border-color: var(--line); box-shadow: none; }
.ctrlbtn.is-muted .ctrlbtn__glyph { text-shadow: none; }
.ctrlbtn.is-ambient { color: var(--glow); border-color: var(--glow);
  box-shadow: 0 0 18px rgba(127,223,255,.45), inset 0 0 14px rgba(127,223,255,.1); }
.ctrlbtn__home { width: 58%; height: 58%; }
.ctrlbtn__home path {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(127,223,255,.45));
}

/* ---------- shared CRT footer: time · paired hex code · department ----------
   Three columns pinned to the bottom of every CRT, identical across intake,
   console and floor. */
.crt-foot {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; margin-top: clamp(6px, 1.2vh, 12px); padding-top: clamp(6px, 1vh, 10px);
  font-family: var(--mono); font-size: clamp(10px, 1.15vw, 13px); letter-spacing: .2em;
  color: var(--text-dim);
  background: var(--bg-deep);
  position: relative; z-index: 22;  /* above .crt__scan (z-index 20) */
}
.crt-foot__time {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-dim); white-space: nowrap;
}
.crt-foot__hex {
  justify-self: center; text-align: center; white-space: nowrap;
  color: var(--cyan-dim); text-shadow: 0 0 6px rgba(127,223,255,.3);
}
.crt-foot__dept {
  justify-self: end; text-align: right; white-space: nowrap;
  color: var(--text-dim);
}

/* a control stack holding just one button keeps the SAME square size as the
   two-button stacks (rather than filling the whole bar height) */
.crt-controls--single { justify-content: center; }
.crt-controls--single .ctrlbtn {
  flex: 0 0 auto;
  width: clamp(50px, 2.3vw, 28px);
  height: clamp(50px, 2.3vw, 28px);
  aspect-ratio: auto;
}

/* ---------- About screen prose ---------- */
.about-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* center when the prose is short, but anchor to the top once it overflows
     so the first lines stay reachable (centering would clip them above the
     scroll start). justify-content:safe center does exactly this. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: safe center;
  padding: clamp(8px, 2vh, 24px) 0;
}
.about-prose {
  width: min(760px, 92%);
  display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px);
}
.about-prose p {
  font-family: var(--mono); font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.85; letter-spacing: .03em; color: var(--text);
  text-shadow: 0 0 8px rgba(127,223,255,.08);
}
.about-prose em { color: var(--text-dim); font-style: italic; }
.about-lead {
  font-family: var(--sans); font-weight: 800; letter-spacing: .04em;
  color: var(--glow); text-shadow: 0 0 12px rgba(127,223,255,.45);
}
/* inline links within the about prose */
.about-prose p a {
  color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid var(--cyan-deep);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.about-prose p a:hover {
  color: var(--glow); border-bottom-color: var(--cyan);
  text-shadow: 0 0 8px rgba(207,232,245,.4);
}
/* support links — bordered terminal chips, kin to .btn */
.about-support {
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 16px);
}
.about-support__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600; letter-spacing: .14em;
  color: var(--cyan); text-decoration: none;
  background: rgba(127,223,255,.04);
  border: 1px solid var(--line-strong);
  padding: 9px 16px;
  transition: all .22s var(--ease);
}
.about-support__link:hover {
  border-color: var(--cyan); color: var(--glow);
  background: rgba(127,223,255,.07);
  box-shadow: 0 0 14px rgba(127,223,255,.12);
  text-shadow: 0 0 8px rgba(207,232,245,.4);
}
.about-support__link svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

/* ---------- shared CRT header: globe mark + bordered bar ---------- */
.crt-head {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: stretch; gap: clamp(8px, 1.6vw, 18px);
  padding-bottom: 16px; margin-bottom: clamp(12px, 1.8vw, 20px);
}
.crt-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.4);
}
.crt-head__globe {
  width: clamp(56px, 6.5vw, 98px); height: auto; flex: none; align-self: center;
  color: var(--cyan); overflow: visible;
}
.crt-head__globe use { filter: drop-shadow(0 0 4px rgba(127,223,255,.5)); }
.crt-head__bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px);
  padding: 4px 16px; border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(127,223,255,.25), inset 0 0 10px rgba(127,223,255,.06);
}
.crt-head__name {
  flex: none;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(14px, 2vw, 23px); letter-spacing: .03em;
  color: var(--glow); text-shadow: 0 0 12px rgba(127,223,255,.6); white-space: nowrap;
}
.crt-head__dept {
  flex: none; margin-left: auto;
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(10px, 1.3vw, 14px); letter-spacing: .3em;
  color: var(--text-dim); white-space: nowrap;
}
/* the growing tally bar (mirrors the Floor's "Cold Harbour" progress) */
.crt-head__tally {
  position: relative; flex: 1 1 auto; min-width: 30px;
  height: clamp(15px, 2.2vh, 22px); overflow: hidden;
}
.crt-head__tally-track,
.crt-head__tally-fill {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right,
    var(--cyan) 0 3px, transparent 3px 9px);
  background-position: left center;
}
.crt-head__tally-track { opacity: .16; }
.crt-head__tally-fill {
  width: 0%; opacity: .95;
  filter: drop-shadow(0 0 4px rgba(127,223,255,.6));
  transition: width .6s var(--ease);
}
.crt-head__pct {
  flex: none; margin-left: auto; padding-left: clamp(6px, 1vw, 12px);
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(13px, 1.7vw, 21px); letter-spacing: .01em;
  color: var(--glow); text-shadow: 0 0 12px rgba(127,223,255,.55); white-space: nowrap;
}
.crt-head__pct small { font-size: .62em; color: var(--text-dim); font-weight: 700; }

/* ============================================================
   PHASE 4 — THE REFINEMENT FLOOR  (standalone macrodata screen)
   A faithful CRT-terminal recreation: curved glass, scanlines,
   a header readout, a dense number field with a follow-cursor
   magnifier, and five O1-O5 bins whose temper meters live inside
   the box that opens above them.
   ============================================================ */

/* the floor screen is a black void that frames a single CRT */
.screen--floor {
  background: #04070b;
  align-items: center; justify-content: center;
  padding: clamp(8px, 2.2vh, 26px);
  min-height: 0;
}

/* utility controls live in the dark bezel, off the screen itself */
.floor-controls {
  position: absolute; top: 14px; right: 16px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
}

/* ---------- the CRT ----------
   SHAPE-FIRST sizing. The monitor no longer derives its shape from a single
   magic content ratio (the old 1.34 broke on non-16:10 screens). Instead the
   shell takes the largest pleasing rectangle that fits the dark void, and the
   readout content scales DOWN to fit inside it (see .crt__fit + the Fit scaler
   in app.js). The box just fills its flex parent; the parent (.screen--monitor
   / .screen--floor) is the centering void, and a max aspect-ratio keeps the
   glass from going absurdly wide on ultrawide displays. */
.crt {
  position: relative;
  width: 100%; height: 100%;
  max-width: 1240px;
  /* a comfortable widescreen ceiling — the box may be squarer than this
     (it just fills available height), but never wider/flatter than 16:9 */
  aspect-ratio: 16 / 9;
  /* …yet never exceed the void: width caps height, height caps width */
  max-height: 100%;
  margin: auto;
  border-radius: 32px / 26px;
  background:
    radial-gradient(122% 132% at 50% 42%, #0e2433 0%, #0a1a27 46%, #06121c 74%, #030a12 100%);
  box-shadow:
    0 0 0 2px #0a1922,
    0 0 0 11px #060f17,
    0 0 0 13px #0c2230,
    0 26px 64px rgba(0,0,0,.72),
    inset 0 0 150px rgba(0,0,0,.55);
  overflow: hidden;
  isolation: isolate;
}
/* inner content frame — the padded readout area. Holds the scanline/vignette
   siblings outside it so only the readout (.crt__fit) ever scales. */
.crt__inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: clamp(14px, 2.3vw, 28px) clamp(16px, 2.8vw, 36px) clamp(8px, 1.4vw, 16px);
}

/* ---------- the fit layer ----------
   One wrapper between .crt__inner and the screen content (head/body/foot).
   It lays the content out at its NATURAL size, then app.js measures that
   natural box against the available .crt__inner box and applies a single
   transform: scale(s), s = min(1, fitW, fitH). Scaling only ever shrinks,
   so a roomy viewport is pixel-identical to before; a cramped one shrinks
   uniformly with NO overflow and NO scrollbars.
   The slight 1.012 "bulge" read that used to live on .crt__inner now rides
   here as the scale baseline (app.js multiplies into it). */
.crt__fit {
  /* Fill the readout box so canvas-backed screens (intake field, floor field)
     and the console body get real height to lay out in. The scaler in app.js
     measures the content's NATURAL height against this box and, only when the
     content would overflow, sets --fit-scale < 1 to shrink the whole readout
     uniformly — never up, so a roomy viewport is pixel-identical to before.
     justify-content:safe center sits shorter-than-box content in the middle
     of the glass, but falls back to top-aligned the instant content would
     overflow — so the header can never be clipped off the top edge.
     transform-origin:center keeps any applied scale pivoting around center. */
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: safe center;
  transform-origin: center center;
  transform: scale(calc(1.012 * var(--fit-scale, 1)));
  width: 100%;
}
/* About opts out of scaling — text must stay readable, so it scrolls inside
   the CRT body. Floor opts out too — its fluid canvas already adapts to any
   box shape and scaling would desync the canvas hit-test rect. */
.crt__fit[data-fit="scroll"],
.crt__fit[data-fit="none"] {
  transform: scale(1.012);
}
/* The console's children (head · body · stats · foot) are all content-sized —
   none can grow to push things to the edges, because the body must report its
   honest height for the Fit scaler (it's flex:0 0 auto). So on desktop we use
   AUTO TOP-MARGINS to distribute spare vertical space: one above the body and
   one above the stats strip. The header pins to the top, the body floats
   centered in the upper region, and the stats strip drops to the bottom just
   above the footer — mirroring the Floor's bins. Auto margins only ever absorb
   SPARE space (a roomy / zoomed-out viewport); the instant the content fills or
   overflows the glass they collapse to 0, so the readout stacks at its true
   height and the scaler measures it honestly and shrinks uniformly — no empty
   band, no clipping.
   Scoped to desktop (min-width:861px): the mobile rule above intentionally
   keeps flex-start + vertical scroll with everything stacked, and since this
   rule sits later in the file it would otherwise win the equal-specificity tie
   and clobber it. */
@media (min-width: 861px) {
  #console-crt .crt__fit { justify-content: flex-start; }
  #console-crt .console-body,
  #console-crt .console-stats { margin-top: auto; }
}

/* scanlines (above content) */
.crt__scan {
  position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.22) 2.5px, rgba(0,0,0,.22) 3.5px);
  mix-blend-mode: multiply;
}
.crt__scan::after { /* slow rolling bright band */
  content: ""; position: absolute; left: 0; right: 0; height: 26%; top: -30%;
  background: linear-gradient(to bottom, transparent, rgba(127,223,255,.05), transparent);
  animation: crtRoll 8s linear infinite;
}
@keyframes crtRoll { from { top: -30%; } to { top: 102%; } }

/* vignette / curved-glass corners */
.crt__vignette {
  position: absolute; inset: 0; z-index: 21; pointer-events: none; border-radius: inherit;
  background: radial-gradient(132% 132% at 50% 50%,
    transparent 54%, rgba(2,6,10,.5) 80%, rgba(1,3,6,.94) 100%);
  box-shadow: inset 0 0 64px rgba(2,8,14,.7);
}
@media (prefers-reduced-motion: reduce) { .crt__scan::after { display: none; } }

/* ---------- header readout ---------- */
.floor-head {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: stretch; gap: clamp(8px, 1.6vw, 18px);
  padding-bottom: 20px; margin-bottom: 16px;
}
/* two parallel divider lines under the header (like the gospel) */
.floor-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.4);
}
/* the bordered box wraps name + tally + percent and stretches to the logo */
.floor-head__bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px);
  padding: 4px 14px; border: 2px solid var(--cyan);
  box-shadow: 0 0 10px rgba(127,223,255,.25), inset 0 0 10px rgba(127,223,255,.06);
}
.floor-head__name {
  flex: none;
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(15px, 2.2vw, 25px); letter-spacing: .02em;
  color: var(--glow); text-shadow: 0 0 12px rgba(127,223,255,.6); white-space: nowrap;
}
/* the growing tally: a track of vertical bars; the fill reveals more bars
   from the left as completion climbs */
.floor-head__tally {
  position: relative; flex: 1 1 auto; min-width: 30px;
  height: clamp(15px, 2.2vh, 22px); overflow: hidden;
}
.floor-head__tally-track,
.floor-head__tally-fill {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right,
    var(--cyan) 0 3px, transparent 3px 9px);
  background-position: left center;
}
.floor-head__tally-track { opacity: .16; }
.floor-head__tally-fill {
  width: 0%; opacity: .95;
  filter: drop-shadow(0 0 4px rgba(127,223,255,.6));
  transition: width .6s var(--ease);
}
.floor-head__pct {
  flex: none; margin-left: auto; padding-left: clamp(6px, 1vw, 12px);
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(14px, 2vw, 23px); letter-spacing: .01em;
  color: var(--glow); text-shadow: 0 0 12px rgba(127,223,255,.55); white-space: nowrap;
}
.floor-head__globe {
  width: clamp(58px, 7vw, 98px); height: auto; flex: none; align-self: center;
  color: var(--cyan); overflow: visible;
}
.floor-head__globe use { filter: drop-shadow(0 0 4px rgba(127,223,255,.5)); }

/* ---------- number field ---------- */
.floor-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.floor-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; touch-action: none; cursor: crosshair;
}
.floor-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--text-dim); text-align: center; max-width: 84%;
  text-shadow: 0 0 8px rgba(4,8,12,.95); transition: opacity .6s var(--ease);
}
.floor-hint.is-hidden { opacity: 0; }

/* ---------- bins ---------- */
.floor-bins {
  position: relative; z-index: 2; flex: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1vw, 12px); margin-top: 4px; padding-top: 22px;
}
/* two parallel divider lines between the number field and the bins —
   pulled up tight (margin-top 24px -> 4px) against the last row of
   digits, freeing vertical room for the taller boxes below */
.floor-bins::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.4);
}
/* each bin is a column of TWO separate rectangles (head + foot) */
.floor-bin {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; gap: clamp(4px, 0.7vh, 8px);
  background: none; border: none; box-shadow: none;
  transition: filter .2s var(--ease);
}
.floor-bin:hover { filter: drop-shadow(0 0 6px rgba(127,223,255,.35)); }

/* rectangle 1 — the code plate. 3px border = the visual weight of the
   door lids (stroke 2.4 viewBox units stretched to ~3px on screen) */
.floor-bin__head {
  text-align: center; padding: 7px 0 8px;
  border: 3px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.18), inset 0 0 10px rgba(127,223,255,.04);
  background: rgba(10,22,32,.35);
  font-family: var(--sans); font-weight: 800; letter-spacing: .14em;
  font-size: clamp(15px, 1.7vw, 21px); color: var(--cyan);
  text-shadow: 0 0 8px rgba(127,223,255,.5);
}
/* rectangle 2 — the fill bar, with the % sitting INSIDE it on the left;
   sized to ~80-85% of the head box's height; same 3px lid-weight border */
.floor-bin__foot {
  position: relative; height: clamp(32px, 4.2vh, 38px);
  border: 3px solid var(--cyan);
  box-shadow: 0 0 8px rgba(127,223,255,.18), inset 0 0 10px rgba(127,223,255,.04);
  background: rgba(10,22,32,.35); overflow: hidden;
}
.floor-bin__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--cyan); box-shadow: 0 0 8px rgba(127,223,255,.55);
  transition: width .6s var(--ease); z-index: 1; overflow: hidden;
}
.floor-bin__pct {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(12px, 1.4vw, 16px); letter-spacing: .02em;
  white-space: nowrap;
}
/* base copy: cyan, sits on the dark track (visible where unfilled) */
.floor-bin__pct--base { z-index: 0; color: var(--cyan); text-shadow: 0 0 4px rgba(127,223,255,.4); }
/* fill copy: black, lives inside the bar so it's clipped to the filled width
   and reads black-on-cyan exactly where the bar covers the text */
.floor-bin__pct--fill { z-index: 2; color: #04070b; }

.floor-bin.is-full .floor-bin__head { border-color: #7fffb0; color: #7fffb0;
  box-shadow: 0 0 14px rgba(127,255,176,.36); border-bottom-color: #7fffb0; }
.floor-bin.is-full .floor-bin__foot { border-color: #7fffb0; box-shadow: 0 0 14px rgba(127,255,176,.36); }
.floor-bin.is-full .floor-bin__bar { background: #7fffb0; box-shadow: 0 0 8px #7fffb0; }
.floor-bin.is-full .floor-bin__pct--base { color: #7fffb0; }
.floor-bin--settle { animation: binSettle .6s var(--ease); }
@keyframes binSettle {
  0% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
  55% { transform: translateY(2px); }
  75% { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* ---------- the box + temper meter that opens above a bin ---------- */
/* the box matches the bin width below it (left:0;right:0) and sits FLUSH
   on the bin's top edge so the lid hinges attach to the bin itself */
.floor-box {
  position: absolute; left: 0; right: 0; bottom: 100%;
  z-index: 30; opacity: 0; pointer-events: none;
}
.floor-bin.is-open .floor-box { opacity: 1; }

/* ── PANEL REVEAL ──────────────────────────────────────────────────
   The panel literally comes OUT of the box. .floor-box__reveal is a
   clipping mask whose BOTTOM edge sits exactly on the bin's top line
   (= the horizontal "revealing line"). The panel starts fully pushed
   below that line (translateY(100%) — invisible inside the bin) and
   slides straight up out of it; nothing is ever drawn below the line.
   Negative side/top margins (+ matching padding) give the panel's
   glow room on the open sides while keeping the bottom clip exact. */
.floor-box__reveal {
  position: relative; z-index: 2;
  overflow: hidden;                 /* the mask — clips at the bin top line */
  margin: -28px -28px 0;            /* widen the mask up + sideways for glow… */
  padding: 28px 28px 0;             /* …without moving the panel or the clip line */
}
.floor-box__panel {
  position: relative;
  min-height: 180px;              /* doubled (was ~90px of natural content height) */
  display: flex; flex-direction: column;
  border: 2px solid var(--cyan); background: rgba(7,16,24,.96);
  box-shadow: 0 0 20px rgba(127,223,255,.32), inset 0 0 16px rgba(127,223,255,.05);
  transform: translateY(100%);      /* parked below the reveal line, fully hidden */
  /* slide OUT of view (sinking back into the box) */
  transition: transform .65s var(--ease);
}
.floor-bin.show-panel .floor-box__panel {
  transform: translateY(0);
  /* slide IN — steady rise out of the open box, gated by JS until the
     lids are fully open (hover) or the numbers have dropped (dump) */
  transition: transform .95s var(--ease) .1s;
}

.floor-box__meters {
  flex: 1 1 auto; padding: 14px 12px;
  display: flex; flex-direction: column;
  justify-content: space-evenly; gap: 8px;   /* meters spread across the taller panel */
}
.floor-meter { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; }
.floor-meter__lbl { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--cyan); }
.floor-meter__track {
  position: relative; height: 24px; overflow: hidden;
  background: rgba(127,223,255,.05); border: 1px solid var(--line-strong);
}
.floor-meter__bar {
  display: block; height: 100%; width: 0%; background: var(--c);
  box-shadow: 0 0 7px var(--c); opacity: .92; transition: width .55s var(--ease);
}
.floor-meter__bar.is-full { opacity: 1; box-shadow: 0 0 11px var(--c); }

/* the SVG door — two line-lids hinged at the box mouth, opening UP (\/).
   The hinge line is drawn at the SVG's bottom edge and the door is anchored
   flush on the bin head. The element spans EXACTLY the bin rectangle
   (left:0; right:0) and the SVG mouth spans its full viewBox, so the two
   hinges sit precisely on the bin's top corners. overflow stays visible so
   the open lids can swing beyond the box width. */
.floor-box__door {
  position: absolute; left: 0; right: 0; bottom: 0; height: 78px;
  z-index: 3; pointer-events: none; overflow: visible;
}
.floor-box__door svg { width: 100%; height: 100%; overflow: visible; display: block; }
.floor-box__door .door-lid {
  fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(127,223,255,.55));
}
.floor-box__door .door-shadow {
  fill: none; stroke: var(--cyan-deep); stroke-width: 2; opacity: .5;
}

.floor-bin.is-full .floor-box__panel { border-color: #7fffb0; }
.floor-bin.is-full .floor-box__door .door-lid { stroke: #7fffb0; }

/* the REAL numbers in transit from the field into a bin — styled to match
   a selected glyph on the canvas (white-cyan, glowing), centred on its exact
   former position; per-flyer transitions are set inline by floor.js */
.floor-flyer {
  position: fixed; left: 0; top: 0; z-index: 9450;
  font-family: var(--mono); font-weight: 700;
  color: rgb(214,238,251); pointer-events: none;
  text-shadow: 0 0 12px rgba(127,223,255,.9);
  will-change: transform, opacity;
}

/* ---------- "Nope" rejection feedback (thumbs-down) ---------- */
.floor-nope {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity .18s var(--ease);
}
.floor-nope.show { opacity: 1; }
.floor-nope__card {
  display: flex; align-items: center; gap: 24px;
  padding: 24px 46px; border: 2px solid var(--cyan); border-radius: 16px;
  background: rgba(7,14,22,.82);
  box-shadow: 0 0 34px rgba(127,223,255,.3), inset 0 0 26px rgba(127,223,255,.08);
  transform: scale(.88); transition: transform .22s var(--ease);
}
.floor-nope.show .floor-nope__card { transform: scale(1); }
.floor-nope__icon { width: 56px; height: 48px; flex: none; }
.floor-nope__icon * {
  fill: none; stroke: var(--cyan); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(127,223,255,.5));
}
.floor-nope__icon .cuff { fill: rgba(127,223,255,.12); }
.floor-nope__text { display: flex; flex-direction: column; }
.floor-nope__word {
  font-family: var(--sans); font-weight: 800; font-size: 40px; line-height: 1;
  letter-spacing: .03em; color: var(--glow); text-shadow: 0 0 14px rgba(127,223,255,.5);
}
.floor-nope__reason {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: var(--text-dim); margin-top: 9px;
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .floor-bin__head { font-size: 12px; }
  .floor-head__name { font-size: 14px; }
  .floor-head__pct { font-size: 13px; }
  .floor-nope__word { font-size: 30px; }
  .floor-nope__icon { width: 42px; height: 36px; }
}