/* ==========================================================================
   Shack Stack · RELAY (the look layer, loads last)
   Source: Shack-Stack-Relay-Hybrid-Style-Guide.pdf ("a human control room"): bold graphic structure from one world, warm analogue craft from another,
   balanced 60% classroom clarity / 25% graphic structure / 15% analogue character. Original interface: no game assets, logos or screen layouts.
     parchment page, deep-teal console frame, sage enamel panels, brass for the main action, phosphor for small technical labels
     6px cards, 4-6px buttons, 10-14px framed panels, ONE fine inner rule, no bevels, no weathering, no grain, no scanlines
     heavy sans headings, plain system sans for names and controls, mono only for short metadata
     motion is 120-180ms with an 8px entrance; no flicker, typewriter, boot sequence or sound; reduced motion is honoured
   Presentation only: no geometry, data or storage is touched here.
   1 tokens · 2 page · 3 console: header, wordmark, module keys · 4 section bar · 5 panels and controls · 6 dialogs · 7 Seat Studio · 8 other modules
   9 hub, rooms · 10 desk inspector and gauge · 11 motion · 12 narrower windows
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --font-display: "Avenir Next", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
html body[data-room-theme] {
  color-scheme: light;
  /* the six colours of the guide */
  --parchment: #EDE4CB; --teal: #202D2C; --brass: #E8BB56; --phosphor: #AFC48B; --oxide: #C76B48; --signal: #6BB6B0;
  /* working colours */
  --ink: #202D2C; --muted: #46524E; --edge: #7C8A7F; --cast: #202D2C;
  --bg: #EDE4CB; --surface: #DADFCB; --raised: #FFFBEF; --sunken: #CBD3BA;
  --line: #A9B49C; --line-strong: #6F7D72; --rule: #9AA68E;
  --warn-bg: #F4DFA0; --warn-ink: #5A3F00; --warn-line: #7C8A7F;
  --bad: #A83A1B; --bad-bg: #F2CFC1; --ok: #2F6B3A;
  /* five module colours (bright = fills with dark text on them, -d = deeper, for text and focus on enamel) */
  --c-teal: var(--brass); --c-teal-d: #6B4F00;
  --c-tomato: var(--oxide); --c-tomato-d: #9A3F20;
  --c-sun: var(--signal); --c-sun-d: #1B625C;
  --c-sky: var(--phosphor); --c-sky-d: #41601A;
  --c-leaf: var(--parchment); --c-leaf-d: #5A5530;
  --mod: var(--brass); --mod-d: var(--c-teal-d); --sel-bg: color-mix(in srgb, var(--mod) 38%, var(--raised));
  --ui-accent: var(--mod-d); --ui-accent-ink: #ffffff;
  --shadow-warm: 32 45 44;
  --shadow-1: 0 1px 0 rgb(32 45 44 / .28);
  --shadow-2: 0 2px 0 rgb(32 45 44 / .30);
  --shadow-3: 0 18px 44px rgb(15 25 24 / .42);
  --scrim: rgb(20 32 31 / .62);
  --paper: none;
  --seat-bg: #FFFBEF; --seat-ink: #202D2C; --gold: var(--mod-d);
  --header-bg: #202D2C; --header-ink: #EDE4CB; --header-muted: #AFC48B; --header-edge: rgb(237 228 203 / .34);
  --r-card: 6px; --r-btn: 5px; --r-panel: 12px;
  background: var(--bg); color: var(--ink);
}
html body[data-room-theme][data-module=home]       { --mod: #9FB4C7;          --mod-d: #3C5470; }   /* steel: the landing page sits between the four spectral colours */
html body[data-room-theme][data-module=seating]    { --mod: var(--signal);    --mod-d: #1B625C; }
html body[data-room-theme][data-module=namedrop]   { --mod: var(--phosphor);  --mod-d: #41601A; }
html body[data-room-theme][data-module=timer]      { --mod: var(--brass);     --mod-d: #6B4F00; }
html body[data-room-theme][data-module=groupmaker] { --mod: #D58766;           --mod-d: #9A3F20; }   /* the guide's oxide, lightened just enough for dark text on it (4.5:1). The four working colours follow the logo's stripes, left to right: teal, sage, gold, oxide. */
html body[data-room-theme][data-module=noise]      { --mod: var(--parchment); --mod-d: #5A5530; }

/* the night console */
html body[data-mode=dark][data-room-theme] {
  color-scheme: dark;
  --ink: #EDE4CB; --muted: #A9B8B0; --edge: #5E716B; --cast: #000000;
  --bg: #121A19; --surface: #1B2827; --raised: #243634; --sunken: #0E1514;
  --line: #3A4D49; --line-strong: #8FA19A; --rule: #3F544F;
  --warn-bg: #3B3218; --warn-ink: #F3D88A; --warn-line: #7C8A7F;
  --bad: #FF9C85; --bad-bg: #3D211B; --ok: #9ED7A2;
  --mod-d: var(--mod); --sel-bg: color-mix(in srgb, var(--mod) 11%, var(--raised));
  --ui-accent: var(--mod); --ui-accent-ink: #14201f;
  --shadow-warm: 0 0 0; --shadow-1: 0 1px 0 rgb(0 0 0 / .5); --shadow-2: 0 2px 0 rgb(0 0 0 / .5); --scrim: rgb(5 10 9 / .72);
  --header-bg: #0E1514; --header-ink: #EDE4CB; --header-muted: #AFC48B;
}
html body[data-mode=dark][data-room-theme][data-module=home]       { --mod-d: #9FB4C7; }
html body[data-mode=dark][data-room-theme][data-module=seating]    { --mod: #7DC5BF; --mod-d: #7DC5BF; }   /* the teal stripe, a touch lighter so small text on the night panels keeps 4.5:1 */
html body[data-mode=dark][data-room-theme][data-module=namedrop]   { --mod-d: var(--phosphor); }
html body[data-mode=dark][data-room-theme][data-module=timer]      { --mod-d: var(--brass); }
html body[data-mode=dark][data-room-theme][data-module=groupmaker] { --mod-d: #D58766; }
html body[data-mode=dark][data-room-theme][data-module=noise]      { --mod-d: var(--parchment); }

/* ---------- 2. Page ---------- */
body[data-room-theme] { background: var(--bg); }
body[data-room-theme] aside, body[data-room-theme] .nd-panel { background-color: var(--surface); background-image: none; }
body[data-room-theme] .module-view { background: transparent; }
body[data-room-theme] :focus-visible { outline: 3px solid var(--mod-d); outline-offset: 2px; }
body[data-room-theme] ::selection { background: var(--brass); color: #202D2C; }

/* ---------- 3. The console: header, wordmark, module dock ---------- */
header, .app-nav {
  --surface: transparent; --raised: rgb(237 228 203 / .07); --sunken: rgb(237 228 203 / .07);
  --line: var(--header-edge); --line-strong: var(--header-ink); --edge: var(--header-edge); --rule: rgb(175 196 139 / .3);
  --ink: var(--header-ink); --muted: var(--header-muted); --chrome-text: var(--header-ink); --cast: #000000;
  background-color: var(--header-bg) !important; background-image: none !important; color: var(--header-ink);
}
header { border-bottom: 0 !important; box-shadow: none !important; position: relative; z-index: 4; gap: var(--s4); justify-content: flex-start !important; }
header > * { position: relative; z-index: 1; }
header::before { content: ""; position: absolute; inset: 3px; z-index: 0; border: 1px solid var(--rule); border-radius: 9px; pointer-events: none; }
header .brand { color: var(--header-ink); gap: 10px; align-items: center; }
header .brand > div { display: block !important; }
header .brand .brand-mark { background: #FFFBEF; border: 1px solid var(--header-edge); border-radius: 8px; box-shadow: none; padding: 1px; }
.brand-bands { display: flex; gap: 2px; height: 42px; flex: none; }
.brand-bands i { display: block; width: 4px; height: 100%; transform-origin: 50% 100%; }
.brand-bands i:nth-child(1) { background: var(--signal); } .brand-bands i:nth-child(2) { background: var(--phosphor); }
.brand-bands i:nth-child(3) { background: var(--brass); } .brand-bands i:nth-child(4) { background: var(--oxide); }
.brand-text { display: flex; flex-direction: column; gap: 5px; line-height: 1; width: 112px; flex: none; }
.brand-word { display: block; width: 70px; height: auto; overflow: visible; }
.brand-word .l1 { fill: var(--parchment); } .brand-word .l2 { fill: var(--mod); transition: fill .14s; }
header .brand small, .brand-module { display: block; margin: 0; font: 700 9.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--header-muted); white-space: nowrap; background: none; }
header .tag { background: transparent; color: var(--header-ink); border: 1px solid var(--header-edge); border-radius: var(--r-btn); font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; }
header select, header input { color: var(--header-ink); border-color: transparent; background-color: transparent; box-shadow: none; }
header select option { color: #202D2C; background: #FFFBEF; }
header .header-room select { background-image: url(assets/ui-chevron.svg?v=90); }
header .header-room select:hover { background-color: rgb(237 228 203 / .1); }
header #headingIconTile { background: #FFFBEF; color: #202D2C; border: 1px solid var(--header-edge); border-radius: 6px; box-shadow: none; }
header #headingIconTile .subject-symbol { background: currentColor; }
header button { background: transparent; color: var(--header-ink); border: 1px solid var(--header-edge); border-radius: var(--r-btn); box-shadow: none; font-weight: 650; }
header button:hover:not(:disabled) { background: rgb(237 228 203 / .12); border-color: var(--header-ink); color: #fff; }
header button:disabled { opacity: .4; }
header #print { background: var(--brass); color: #202D2C; border: 1px solid #B58B1F; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; }
header #print::after { content: "\2192"; margin-left: 8px; font-weight: 800; }
header #print:hover:not(:disabled) { background: #F2C968; color: #202D2C; }
header .ui-icon, header .toolbar-symbol { filter: none; }
header .header-actions .ui-icon { background: currentColor; }

/* the module dock: a row of labelled keys; the active one takes the module's colour. It always starts in the same place. */
.module-switch { background: transparent; box-shadow: none; padding: 0; gap: 6px; border-radius: 0; margin: 0 !important; align-items: center; }
.module-switch button { background: transparent !important; color: var(--header-ink); border: 1px solid var(--header-edge) !important; border-radius: var(--r-btn) !important; height: 36px; min-height: 36px; padding: 0 12px; position: relative; box-shadow: none; transition: background-color .14s, border-color .14s, color .14s; }
.module-switch button:hover:not(:disabled) { background: rgb(237 228 203 / .12) !important; border-color: var(--header-ink) !important; }
.module-switch button[aria-pressed=true] { background: var(--tabc) !important; color: #202D2C; border-color: var(--tabc) !important; }
#modHome { --tabc: #9FB4C7; } #modSeating { --tabc: var(--signal); } #modNameDrop { --tabc: var(--phosphor); } #modTimer { --tabc: var(--brass); } #modGroups { --tabc: #D58766; } #modNoise { --tabc: var(--parchment); }
.module-switch button .toolbar-symbol { background: currentColor; width: 17px; height: 17px; }
.module-switch button[aria-pressed=true] .toolbar-symbol { color: #202D2C; }
.module-switch .mod-label { font-weight: 750; letter-spacing: .01em; }
.mod-run { background: #202D2C22; color: #202D2C; }
@media (max-width: 1500px) {
  .module-switch button:not([aria-pressed=true]) .mod-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .module-switch button:not([aria-pressed=true]) { padding: 0 10px; }
}
/* tooltips for the collapsed keys (hover and keyboard focus) */
.module-switch button[data-name]::after { content: attr(data-name); position: absolute; left: 50%; top: calc(100% + 9px); translate: -50% 0; padding: 5px 9px; background: #FFFBEF; color: #202D2C; border: 1px solid #202D2C; border-radius: var(--r-btn); font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; z-index: 30; }
.module-switch button[data-name]:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; }
.module-switch button[aria-pressed=true]::after { display: none; }

/* ---------- 4. Section bar: numbered labels on the same console ---------- */
.app-nav { border-bottom: 1px solid #000 !important; box-shadow: none !important; position: relative; }
.app-nav::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--rule); pointer-events: none; }
.nav-tabs { background: transparent !important; box-shadow: none !important; gap: 4px; padding: 0; counter-reset: sec; }
.app-nav .nav-tabs button { background: transparent !important; color: var(--header-ink) !important; border: 1px solid transparent !important; border-radius: var(--r-btn) !important; box-shadow: none; font-weight: 700; }
.app-nav .nav-tabs button::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); font: 700 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--phosphor); margin-right: 2px; }
.app-nav .nav-tabs button:hover:not(:disabled) { border-color: var(--header-edge) !important; }
.app-nav .nav-tabs button[aria-pressed=true], .app-nav .nav-tabs button[aria-current=step] { background: var(--brass) !important; color: #202D2C !important; border-color: var(--brass) !important; }
.app-nav .nav-tabs button[aria-pressed=true]::before, .app-nav .nav-tabs button[aria-current=step]::before { color: #202D2C; }
.app-nav .nav-tabs button[aria-pressed=true] .toolbar-symbol, .app-nav .nav-tabs button[aria-current=step] .toolbar-symbol { color: #202D2C; }
.app-nav button { color: var(--header-ink); }
.app-nav .hub-trigger, .app-nav #toggleTools { background: transparent; border: 1px solid var(--header-edge); color: var(--header-ink); border-radius: var(--r-btn); box-shadow: none; }
.app-nav .hub-trigger:hover:not(:disabled), .app-nav #toggleTools:hover:not(:disabled) { background: rgb(237 228 203 / .12); border-color: var(--header-ink); }

/* ---------- 5. Panels and controls ---------- */
body[data-room-theme] aside, body[data-room-theme] .nd-panel {
  border-right: 1px solid var(--edge);
  box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--rule);
  background-image: radial-gradient(circle, var(--line-strong) 0 1.6px, transparent 2.2px), radial-gradient(circle, var(--line-strong) 0 1.6px, transparent 2.2px), radial-gradient(circle, var(--line-strong) 0 1.6px, transparent 2.2px), radial-gradient(circle, var(--line-strong) 0 1.6px, transparent 2.2px) !important;
  background-size: 8px 8px; background-repeat: no-repeat; background-position: 11px 11px, calc(100% - 11px) 11px, 11px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px);   /* decorative screws, in the margin, never interactive */
}
.menu-section { border-top: 1px solid var(--line); }
.menu-h, h3.menu-h { font: 800 12px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.menu-h::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.nd-title, #panelTitle { font: 800 28px/1 var(--font-display) !important; letter-spacing: -.005em !important; text-transform: uppercase; }
#panelTitle .pt-mod { display: block; font: 700 11px/1.2 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.nd-title::after, #panelTitle::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 9px; background: linear-gradient(90deg, var(--signal) 0 25%, var(--phosphor) 25% 50%, var(--brass) 50% 75%, var(--oxide) 75%); }
.panel-lead, .hint { color: var(--muted); }
kbd { font: 700 11px/1 var(--font-mono); padding: 2px 5px; border: 1px solid var(--edge); border-radius: 3px; background: var(--raised); color: var(--ink); }
.shortcut-list { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-body); color: var(--muted); }
.shortcut-list kbd { margin-right: 6px; }
.kbd-hint { margin-top: var(--s2); }
:where(aside, .nd-panel, .nd-top, .nd-controls, .canvas-controls, .room-heading-bar, dialog, .hub, .tm-controls, .gm-tools, .nm-tools, .module-view .menu-section) button {
  background: var(--raised); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-btn); box-shadow: none; font-weight: 650;
  transition: background-color .12s, border-color .12s, translate .08s; }
:where(aside, .nd-panel, .nd-top, .nd-controls, .canvas-controls, .room-heading-bar, dialog, .hub, .tm-controls, .gm-tools, .nm-tools, .module-view .menu-section) button:hover:not(:disabled) { background: var(--sel-bg); border-color: var(--ink); }
:where(aside, .nd-panel, .nd-top, .nd-controls, .canvas-controls, .room-heading-bar, dialog, .hub, .tm-controls, .gm-tools, .nm-tools, .module-view .menu-section) button:active:not(:disabled) { translate: 0 1px; }
:where(aside, .nd-panel, .nd-top, .nd-controls, .canvas-controls, .room-heading-bar, dialog, .hub, .tm-controls, .gm-tools, .nm-tools, .module-view .menu-section) button:disabled { opacity: .5; }
button.primary, .primary { background: var(--mod) !important; color: #202D2C !important; border: 1px solid color-mix(in srgb, var(--mod) 55%, #202D2C) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; box-shadow: none !important; }
button.primary::after { content: "\2192"; margin-left: 8px; }
button.primary:hover:not(:disabled) { filter: brightness(1.06); }
button.danger, .danger { background: var(--raised); color: var(--bad); border-color: var(--bad); }
.segmented, .seg { background: var(--sunken) !important; border: 1px solid var(--edge); border-radius: 8px; box-shadow: none !important; padding: 3px; }
.segmented button, .seg button { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: var(--r-btn) !important; translate: none !important; }
.segmented button[aria-pressed=true], .seg button[aria-pressed=true] { background: var(--mod) !important; color: #202D2C !important; box-shadow: none !important; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { background-color: var(--raised); color: var(--ink); border: 1px solid var(--edge); border-radius: var(--r-btn); box-shadow: none; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--mod-d); outline-offset: 1px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--mod-d); }
details > summary { font-weight: 750; letter-spacing: .01em; }
.saved-room-card { background: var(--raised); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: inset 0 0 0 3px var(--raised), inset 0 0 0 4px var(--rule); transition: border-color .12s, background-color .12s; }
.saved-room-card:hover { border-color: var(--ink); }
.saved-room-card[aria-pressed=true] { background: var(--sel-bg); border-color: var(--ink); }
.class-icon-tile { border: 1px solid var(--edge); border-radius: 6px; background: #FFFBEF; box-shadow: none; }
html body .mode-badge, html body[data-mode=dark] .mode-badge { background: var(--brass); color: #202D2C; border: 1px solid #B58B1F; border-radius: var(--r-btn); box-shadow: none; font: 750 12px var(--font-display); }
.mode-badge::before { background: #202D2C !important; }
.tag { border-radius: var(--r-btn); }
.room-chip, .room-add { border: 1px solid var(--edge); border-radius: var(--r-btn) var(--r-btn) 0 0; box-shadow: none; }
.room-chip { background: var(--raised); color: var(--ink); }
.room-chip[aria-pressed=true] { background: var(--mod); color: #202D2C; border-color: var(--ink); }
.room-add { border-style: dashed; background: transparent; }
.room-row { border: 1px solid var(--edge); border-radius: 8px; background: var(--raised); box-shadow: none; }
.room-row[data-active=true] { background: var(--sel-bg); border-color: var(--ink); }
.scene-lock-note { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--r-btn); }

/* ---------- 6. Dialogs: a framed panel with one fine inner rule ---------- */
/* Dialogs are frosted glass: a milky, mostly opaque sheet over a softly blurred, saturated view of what is behind it. The alpha is a measured compromise (.80 day, .82 night, with a slightly stronger muted-text colour inside): even over the darkest or brightest thing behind it, the text colours keep 4.5:1. Controls inside stay solid. */
dialog { --glass: color-mix(in srgb, #FFFFFF 22%, var(--surface)); background-color: color-mix(in srgb, var(--glass) 80%, transparent); --muted: #3A4642; background-image: none; -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 14px; box-shadow: var(--shadow-3), inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(255 255 255 / .28); }
dialog::backdrop { background: color-mix(in srgb, var(--scrim) 55%, transparent); backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { dialog { background-color: var(--surface); } }
@media (prefers-reduced-transparency: reduce) { dialog { background-color: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } dialog::backdrop { background: var(--scrim); } }
dialog.hub, #printPreviewDialog { border-radius: 14px; }
#ndDrop, #ndAgain, #tmStart { border-radius: var(--r-btn); }

/* ---------- 7. Seat Studio: the room, desks and student cards ---------- */
.room { border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: none; overflow: hidden; background: var(--bg); }
.room-heading-bar, .canvas-controls { background-image: none; border-color: var(--edge); }
.room-heading-bar { background-color: var(--surface); border-bottom: 1px solid var(--edge); }
.canvas-controls { border-top: 0; }
#canvasWrap, body[data-mode=dark] #canvasWrap { background-image: none; box-shadow: none; }
.board { font: 750 11px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
#roomViewInfo { font: 700 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--phosphor) !important; }
.canvas-controls { background-color: var(--header-bg) !important; --ink: var(--header-ink); --muted: var(--header-muted); --raised: rgb(237 228 203 / .07); --edge: var(--header-edge); --line: var(--header-edge); --sunken: rgb(237 228 203 / .07); color: var(--header-ink); }
.canvas-controls button, .canvas-controls select { background: transparent; color: var(--header-ink); border: 1px solid transparent; }
.canvas-controls select { border-color: var(--header-edge); background-color: transparent; }
.canvas-controls select option { color: #202D2C; background: #FFFBEF; }
.canvas-controls button:hover:not(:disabled) { background: rgb(237 228 203 / .12); border-color: var(--header-edge); }
.canvas-controls button[aria-pressed=true] { background: var(--brass); color: #202D2C; border-color: var(--brass); }
.canvas-controls .control-label { font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--header-muted); }
.desk .desk-surface, .desk.teacher .desk-surface, body[data-mode=dark] .desk .desk-surface, body[data-mode=dark] .desk.teacher .desk-surface {
  background: color-mix(in srgb, var(--desk-bottom) 70%, #DADFCB) !important; background-image: none !important;
  border: 1px solid #7C8A7F; border-radius: 10px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--desk-bottom) 70%, #DADFCB), inset 0 0 0 4px rgb(32 45 44 / .16) !important; }
body[data-mode=dark] .desk .desk-surface { background: color-mix(in srgb, var(--desk-bottom) 45%, #1F2E2C) !important; border-color: #5E716B; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--desk-bottom) 45%, #1F2E2C), inset 0 0 0 4px rgb(237 228 203 / .12) !important; }
.desk.teacher .desk-surface { background: color-mix(in srgb, var(--brass) 38%, var(--desk-bottom)) !important; }
.desk.active .desk-surface, .desk.teacher.active .desk-surface { border: 2px solid var(--brass); }
.desk-shadow { filter: none; translate: 0 3px; opacity: 1; }
.desk-shadow > i { background: rgb(32 45 44 / .18); border-radius: 10px; }
body[data-mode=dark] .desk-shadow > i { background: rgb(0 0 0 / .4); }
.desk.dragging .desk-shadow, .desk.resizing .desk-shadow { translate: 0 7px; filter: none; }
.desk .desk-handle, .arranging .desk-handle, .room:not(.arranging) .desk-handle { height: 24px; min-height: 24px; border: 0; border-radius: 4px; background: #202D2C; color: #EDE4CB !important; font: 700 11px/1 var(--font-mono); letter-spacing: .04em; box-shadow: none; top: -27px; }
.desk .student-card, .desk .seat.student-card { border: 1px solid #D6CDB2; border-radius: var(--r-card); background: var(--seat-bg) !important; box-shadow: 0 2px 0 #B9B196 !important; }
.desk .student-card.empty, .desk .student-card.seat-marker { box-shadow: none !important; }
.desk .student-card:not(.empty):hover { translate: 0 -1px; box-shadow: 0 3px 0 #B9B196 !important; }
.desk .student-card.selected { scale: 1; border: 2px solid var(--brass); background: #FFF6D8 !important; }
.desk .student-card .card-name { color: #202D2C; font-weight: 700; }
.desk .student-card.empty { border-style: dashed; background: transparent !important; }
.desk .student-card .card-initials, .card-initials { background: color-mix(in srgb, var(--mod) 34%, #FFFBEF) !important; background-image: none !important; color: #202D2C !important; border: 0; border-radius: 4px; font-weight: 800; }
.card-portrait { border: 0; border-radius: 4px; box-shadow: none; }
.arranging .desk .desk-resize::after, .arranging .decor .decor-grip::after, .arranging .desk .resize-e::after, .arranging .desk .resize-s::after { inset: 28%; border-radius: 3px; background: var(--brass); border: 1px solid #202D2C; box-shadow: none; }
.desk .desk-duplicate, html body .desk .desk-duplicate { left: auto !important; right: -2px; top: -30px; width: 24px; height: 24px; padding: 4px; background: var(--brass) !important; color: #202D2C !important; border: 1px solid #202D2C; border-radius: var(--r-btn); box-shadow: none; display: grid; place-items: center; }
.desk .desk-duplicate:hover { background: #F2C968 !important; }
.desk .desk-duplicate.beside, html body .desk .desk-duplicate.beside { top: 0; right: -32px; }
.desk .desk-duplicate svg { width: 100%; height: 100%; }

/* ---------- 8. The other modules ---------- */
.nd-stage-wrap, .gm-stage-wrap { border: 1px solid var(--edge) !important; border-radius: var(--r-panel) !important; box-shadow: none !important; background-color: var(--raised) !important; background-image: none !important; }
.tm-stage { border: 1px solid var(--edge) !important; border-radius: var(--r-panel) !important; box-shadow: none !important; }
.gm-card { border: 1px solid var(--edge) !important; border-top: 4px solid var(--hue) !important; border-radius: 8px !important; box-shadow: 0 2px 0 var(--rule) !important; background: var(--raised); }
.nd-style { border: 1px solid var(--edge); box-shadow: none; border-radius: 8px; }
.nd-style[aria-pressed=true] { background: var(--sel-bg); border-color: var(--ink); }
.nd-chip { border: 1px solid var(--edge); box-shadow: none; }
.tm-face, .tm-controls { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.tm-face { background: rgb(32 45 44 / .92) !important; border: 1px solid rgb(237 228 203 / .5) !important; border-radius: 12px !important; box-shadow: inset 0 0 0 5px rgb(32 45 44 / .92), inset 0 0 0 6px rgb(175 196 139 / .35) !important; }
.tm-fs .tm-controls { background: rgb(32 45 44 / .94) !important; border: 1px solid rgb(237 228 203 / .5); box-shadow: none; }
.tm-mode { border: 1px solid var(--edge); box-shadow: none; border-radius: 8px; }
.tm-mode[aria-pressed=true] { background: var(--sel-bg); border-color: var(--ink); box-shadow: none; translate: none; }
.tm-stage::before { content: none; }
/* Teacher view: leaf elements only (the 3D-chain rules in TECHNICAL-HANDOFF.md still hold) */
.s-floor { border: 1px solid var(--edge); }
.s-wall { background: var(--wall-a) !important; }
.s-slice.top .s-shape { background: color-mix(in srgb, var(--desk-bottom) 70%, #DADFCB) !important; background-image: none !important; border: 1px solid #7C8A7F; }
.s-slice.edge .s-shape { background: color-mix(in srgb, var(--desk-bottom) 45%, #202D2C) !important; }
.s-desk.teacher .s-slice.top .s-shape { background: color-mix(in srgb, var(--brass) 38%, var(--desk-bottom)) !important; }
.s-shadow .s-shape { background: rgb(32 45 44 / .4); filter: none; }
.s-gshadow { background: rgb(32 45 44 / .3); filter: none; }
.s-card { border: 1px solid #D6CDB2; box-shadow: 0 2px 0 #B9B196; background: #FFFBEF; }
.s-card:hover:not(.s-teacher) { border-color: #D6CDB2; }
.s-card .s-name { color: #202D2C; font-weight: 700; }
.s-portrait { background: color-mix(in srgb, var(--mod) 34%, #FFFBEF) !important; background-image: none !important; color: #202D2C; border: 0; }
.s-sprite img { filter: none; }
.scene-ui button, .scene-caption, .scene-tip { border: 1px solid var(--edge); box-shadow: none; }

/* ---------- 9. Class Hub and rooms ---------- */
.hub-card { border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: inset 0 0 0 3px var(--raised), inset 0 0 0 4px var(--rule); background: var(--raised); }
.hub-card:hover { translate: none; border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--raised), inset 0 0 0 4px var(--rule); }
.hub-card[data-active=true] { background: var(--sel-bg); border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--sel-bg), inset 0 0 0 4px var(--rule); }
.hub-main { border: 0 !important; box-shadow: none !important; background: transparent !important; translate: none !important; }
.hub-plan { border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: none; }
.hub-chip { border: 1px solid var(--edge); border-radius: 4px; background: var(--raised); color: var(--ink); font: 700 11px/1.2 var(--font-mono); letter-spacing: .04em; }
.hub-chip[data-tone=ok] { background: var(--phosphor); color: #202D2C; } .hub-chip[data-tone=warn] { background: var(--brass); color: #202D2C; } .hub-chip[data-tone=note] { background: var(--sunken); }
.hub-now { border: 1px solid #202D2C; border-radius: 4px; background: #202D2C; color: #EDE4CB; font: 700 11px/1.2 var(--font-mono); letter-spacing: .04em; }
.hub-new { border: 1px dashed var(--edge); box-shadow: none; background: transparent; }
.hub-merge-card { border: 1px solid var(--edge); border-radius: 8px; background: color-mix(in srgb, var(--brass) 30%, var(--raised)); box-shadow: none; }
.hub-plus { border: 1px solid #202D2C; background: var(--brass); border-radius: var(--r-btn); box-shadow: none; }
.hub-plus::before, .hub-plus::after { background: #202D2C; }
.hub-titles h2 { font: 800 32px/1 var(--font-display); text-transform: uppercase; letter-spacing: -.005em; }
.hub-actions button .toolbar-symbol { background: currentColor; }

/* ---------- 10. The seat gauge ---------- */
.workspace { position: relative; }
.seat-gauge { display: inline-flex; gap: 2px; align-items: center; height: 14px; margin-right: 10px; vertical-align: middle; }
.seat-gauge i { display: block; width: 4px; height: 14px; background: rgb(237 228 203 / .22); border-radius: 1px; }
.seat-gauge i.on { background: var(--phosphor); }
body[data-room-theme]:not([data-mode=dark]) #count { font-family: var(--font-mono); letter-spacing: .02em; }

/* ---------- 11. Motion: brief colour transitions and an 8px entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .brand-module.swap { animation: label-in .16s ease-out both; }
  @keyframes label-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .brand-bands i { animation: bands-in .18s ease-out backwards; animation-delay: calc(var(--i, 0) * 40ms); }
  .brand-bands i:nth-child(2) { --i: 1; } .brand-bands i:nth-child(3) { --i: 2; } .brand-bands i:nth-child(4) { --i: 3; }
  @keyframes bands-in { from { transform: scaleY(.3); } to { transform: none; } }
  dialog[open] { animation: panel-in .16s ease-out both; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  dialog.hub[open] .hub-card { animation: panel-in .16s ease-out both; animation-delay: calc(var(--i, 0) * 24ms); }
  .module-view:not([hidden]) > aside > :not([hidden]) { animation: panel-in .16s ease-out both; }
  #grid.room-swap { animation: panel-in .16s ease-out both; }
}
@media print { header, .app-nav { display: none !important; } }

/* ---------- 12. Narrower windows: the console gives up words before it gives up anything you press ---------- */
@media (max-width: 1400px) { header #saveState { font-size: 0; padding: 0 9px; gap: 0; min-width: 0; } }
@media (max-width: 1180px) {
  header .header-actions #undo .btn-text, header .header-actions #redo .btn-text { display: none; }
  header .header-actions #undo, header .header-actions #redo { padding: 0 10px; min-width: 38px; }
  header { gap: var(--s3); padding: 0 var(--s4); }
}
@media (max-width: 1000px) { header { gap: 8px; padding: 0 12px; } header .header-room { min-width: 0; flex: 0 1 96px; } .brand-bands { height: 38px; } .module-switch { gap: 4px; } .module-switch button { padding: 0 8px !important; } header .header-actions { gap: 4px; } }
@media (max-width: 860px) {
  header .brand > .brand-text, header .brand > .brand-bands { display: none !important; }
  header .header-room #headingIconTile { display: none; }
}
/* make room for the class name: below 1100 px the Print key says "Print" (its accessible name stays "Print preview") and loses its arrow */
@media (max-width: 1100px) {
  header #print .btn-text { font-size: 0; }
  header #print .btn-text::before { content: "Print"; font-size: 12.5px; }
  header #print::after { display: none; }
  header .header-room { flex: 1 1 120px; min-width: 96px; }
}
@media (max-width: 760px) {
  header { gap: var(--s2); padding: 0 var(--s3); }
  .module-switch button .mod-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .module-switch button { padding: 0 9px !important; }
  header .header-room #headingIconTile { display: none; }
  header .header-actions #print { padding: 0 10px; font-size: 12px; }
}
@media (max-width: 560px) {
  header { flex-wrap: wrap; height: auto !important; min-height: 56px; padding: 8px 12px 10px; row-gap: 8px; }
  header .brand { order: 1; } header .header-room { order: 2; flex: 1 1 90px; min-width: 0; }
  header #saveState { order: 3; } header .header-actions { order: 4; margin-left: auto; }
  header .module-switch { order: 5; flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, 1fr); height: auto; }
  header .module-switch button { justify-content: center; }
  header .module-switch .toolbar-symbol { display: inline-block !important; width: 20px; height: 20px; }
  .module-view { height: auto; }
}

/* ---------- 13. Name Drop result: a single winner gets the width of the stage, so a long first name stays on one line ---------- */
.nd-result[data-count="1"] .ndr-card { max-width: min(62vw, 1100px); }
.ndr-name { overflow-wrap: break-word; }

/* ---------- 14. Jump (command palette) button in the header ---------- */
.icon-jump { mask-image: url(assets/ui-jump.svg?v=90); -webkit-mask-image: url(assets/ui-jump.svg?v=90); }
header #cmdOpen { gap: 7px; }
@media (max-width: 1500px) { header #cmdOpen .btn-text { display: none; } header #cmdOpen { padding: 0 10px; min-width: 38px; } }

/* ---------- 15. Settings gear (top right of the header) ---------- */
.icon-gear { mask-image: url(assets/ui-gear.svg?v=91); -webkit-mask-image: url(assets/ui-gear.svg?v=91); }
header .header-gear { order: 99; margin-left: 0; min-width: 38px; padding: 0 9px; flex: none; }
header .header-actions { margin-left: auto; }
body:not([data-module=seating]) header .header-gear { margin-left: auto; }
@media (max-width: 1400px) { header .header-actions #undo .btn-text, header .header-actions #redo .btn-text { display: none; } header .header-actions #undo, header .header-actions #redo { padding: 0 10px; min-width: 38px; } }
header .header-gear .ui-icon { background: currentColor; width: 24px; height: 24px; }
/* day / night switch, just left of the gear */
.icon-moon { mask-image: url(assets/ui-moon.svg?v=91); -webkit-mask-image: url(assets/ui-moon.svg?v=91); }
.icon-sun { mask-image: url(assets/ui-sun.svg?v=91); -webkit-mask-image: url(assets/ui-sun.svg?v=91); }
header .header-theme { order: 98; margin-left: 0; }
body:not([data-module=seating]) header .header-theme { margin-left: auto; }
body:not([data-module=seating]) header .header-theme + .header-gear { margin-left: 0; }
header .header-theme .ui-icon { background: currentColor; width: 22px; height: 22px; }
header .header-theme:hover .ui-icon { rotate: 0deg; }
header .header-theme[aria-pressed=true] { background: #EDE4CB !important; color: #162122 !important; border-color: #EDE4CB !important; }
@media (max-width: 560px) { header .header-gear { order: 3; margin-left: 0; } header .header-theme { order: 3; } }

/* night glass: a deep, smoky sheet */
body[data-mode=dark][data-room-theme] dialog { --glass: color-mix(in srgb, #FFFFFF 6%, var(--surface)); background-color: color-mix(in srgb, var(--glass) 82%, transparent); --muted: #BDC9C2; box-shadow: var(--shadow-3), inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .07); border-color: color-mix(in srgb, var(--ink) 24%, transparent); }
body[data-mode=dark][data-room-theme] dialog::backdrop { background: color-mix(in srgb, var(--scrim) 60%, transparent); }
@media (prefers-reduced-transparency: reduce) { body[data-mode=dark][data-room-theme] dialog { background-color: var(--surface); } }

/* The Jump button sat on the light panel colour in day mode (".header-actions button" in themes.css outranks "header button"), which left its pale label unreadable.
   It now matches Undo and Redo: a faint fill on the dark header, in both modes. */
header .header-actions #cmdOpen { background: rgb(237 228 203 / .07); color: var(--header-ink); border-color: var(--header-edge); }
header .header-actions #cmdOpen:hover:not(:disabled) { background: rgb(237 228 203 / .12); border-color: var(--header-ink); color: #fff; }

/* ---------- 16. Seat Studio header fits laptop widths (v1.17) ----------
   The Seat Studio header (lockup, dock, class picker, save state, Jump, Undo, Redo, Print, day/night, gear) needed about 1950 px, so on a 1440 to 1600 px
   laptop the day/night switch and the gear were pushed off the right edge. The words give way in stages, widest first, and every key keeps its
   accessible name (aria-label and title); the class picker keeps its normal minimum width (160 px) at every width above 1100 px:
   1. up to 1960 px  the "Saved on this browser" text becomes the green tick (a warning or error keeps its words);
   2. up to 1810 px  Jump, Undo and Redo become icons;
   3. up to 1650 px  the inactive dock keys show only their icon (tooltips are unchanged) and Print reads "Print" without its arrow.
   The lockup and the dock keep their fixed left edge, so the dock never moves between modules. The right-hand group never shrinks. */
header .header-actions, header .header-gear { flex: none; }
header #saveState { flex: 0 1 auto; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1960px) {
  header #saveState[data-state=saved] { font-size: 0; padding: 0 9px; gap: 0; }
}
/* below 1500 px a warning or error is the icon too (its words are the tooltip, and an error also raises a toast), so a long state can never push the gear off the edge */
@media (max-width: 1500px) { header #saveState { font-size: 0; padding: 0 9px; gap: 0; } }
@media (max-width: 1810px) {
  header .header-actions #cmdOpen .btn-text, header .header-actions #undo .btn-text, header .header-actions #redo .btn-text { display: none; }
  header .header-actions #cmdOpen, header .header-actions #undo, header .header-actions #redo { padding: 0 10px; min-width: 38px; }
}
@media (max-width: 1650px) {
  .module-switch button:not([aria-pressed=true]) .mod-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .module-switch button:not([aria-pressed=true]) { padding: 0 10px; }
  header #print .btn-text { font-size: 0; }
  header #print .btn-text::before { content: "Print"; font-size: 12.5px; }
  header #print::after { display: none; }
}
/* between 1101 and 1300 px the class picker may give up to 50 px of its width (never below 110 px) so the right-hand group still fits */
@media (max-width: 1300px) { header .header-room { min-width: 110px; } }

/* ---------- 17. Targets and small text found by the v1.18 review (tests/browser/ux-audit.js) ----------
   Section-bar tabs were 30 px high, the room chips and Add room 28 px, the crowded-desks chip 26 px and the check rows in Settings, Name Drop, Group Maker and
   Audio Audit only 19 to 20 px, below the 32 px minimum the console uses for anything pressed with a mouse (44 px on touch). Small captions go up one step. */
html body .app-nav .nav-tabs button { min-height: 36px; height: 36px; }
html body .room-chip, html body .room-add { height: 32px; min-height: 32px; }
html body #crowdedOverview { height: 32px; min-height: 32px; }
html body .remove-student, html body .room-row button, html body .student select { height: 32px; min-height: 32px; }
html body label.check-label, html body .st-check { min-height: 32px; align-items: center; }
html body aside label.check-label { align-items: center; margin: var(--s2) 0; }
html body .theme-copy small { font-size: 11px; line-height: 1.35; }
html body .canvas-controls .control-label { font-size: 11px; }
html body .hub-now, html body .hub-chip { font-size: 12px; }
html body #clear { font-size: 12px; }
@media (pointer: coarse) {
  html body .app-nav .nav-tabs button { min-height: 44px; height: 44px; }
  html body .room-chip, html body .room-add, html body #crowdedOverview, html body .remove-student, html body .room-row button, html body .student select, html body label.check-label, html body .st-check { min-height: 44px; height: auto; }
  html body .room-chip, html body .room-add, html body #crowdedOverview { height: 44px; }
}

/* ---------- 18. First-run: the empty room says what to do and offers the button (v1.19) ---------- */
html body .empty-room .empty-room-go { pointer-events: auto; margin-top: var(--s2); min-height: 36px; padding: 0 16px; background: var(--brass); color: #202D2C; border: 1px solid #B58B1F; border-radius: var(--r-btn); font-weight: 800; letter-spacing: .02em; cursor: pointer; }
html body .empty-room .empty-room-go:hover { background: #F2C968; }
html body .empty-room .empty-room-go:focus-visible { outline: 2px solid var(--mod-d); outline-offset: 2px; }
/* the idle line on Name Drop's and Group Maker's stage says why nothing can happen when the class or list is empty */
html body .nd-stage[data-empty]:empty::before { content: attr(data-empty); font: 600 clamp(14px, 1.6vw, 18px)/1.5 var(--font-display); letter-spacing: .01em; text-transform: none; text-align: center; max-width: 32em; padding: 0 var(--s5); margin: auto; }
html body .gm-stage[data-empty]:empty::before { content: attr(data-empty); font-size: clamp(16px, 1.8vw, 22px); line-height: 1.5; text-align: center; max-width: 32em; margin: 0 auto; }
/* phones: the four section tabs must all fit (the Appearance tab was cut off at 375 px): drop the 01 to 04 numerals and tighten the padding */
@media (max-width: 480px) {
  html body .app-nav .nav-tabs button::before { display: none; }
  html body .app-nav .nav-tabs button { padding-left: 8px; padding-right: 8px; }
}

/* ---------- 19. Skip link (v1.20): the first Tab stop, out of sight until it has focus ---------- */
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 70; padding: 10px 16px; background: var(--brass); color: #202D2C; border: 1px solid #B58B1F; border-radius: var(--r-btn); font: 800 14px/1.2 var(--font-display); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid #202D2C; outline-offset: 2px; }
@media print { .skip-link { display: none !important; } }

/* ---------- 20. Safari (v1.20): it draws a default select 22 px high where Chrome draws 26 px, under the 24 px target minimum on Home's class picker ---------- */
html body #moduleHome select { min-height: 26px !important; -webkit-appearance: none; appearance: none; background: transparent url(assets/ui-chevron.svg?v=90) no-repeat right .7em center / 1em !important; padding-right: 2.2em; }