/* © 2026 William C. Chesher. All Rights Reserved. */
/* admin - the admin's page (four views: Periods, Machines, Settings, Erase) and the credits and privacy pages */

/* Built on launch.css's tokens and never redefining them: graphite, ignition orange as the one accent,
   hairline rules, Barlow Condensed for display, JetBrains Mono for anything the station says. One moving
   thing at a time; everything holds still under reduced motion. The flare (white) is the only alarm. */

.admin-page { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 max(16px, 2vw) var(--space-6); display: grid; gap: var(--space-6); }
.admin-page[hidden], .teacher-page[hidden] { display: none; }
.admin-page > * { min-width: 0; }

/* ---- the bar: the name, the four views with their states, sign out, and the machines in one line ------------- */
.admin-bar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand tabs out" "strip strip strip"; gap: 0 var(--space-6); align-items: end;
  margin: 0 calc(-1 * max(16px, 2vw)); padding: var(--space-4) max(16px, 2vw) 0;
  background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2);
  border-bottom: 1px solid var(--hairline); }
.admin-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-line) 30%, var(--accent-line) 70%, transparent); opacity: .7; }
.admin-brand { grid-area: brand; display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); color: var(--accent); }
.admin-brand .eyebrow { margin: 0; color: var(--accent); }
.admin-title { margin: 0; font-size: 1.75rem; line-height: 1; letter-spacing: .1em; color: var(--text); }
.admin-title:focus { outline: none; }
.admin-tabs { grid-area: tabs; display: flex; align-items: end; overflow-x: auto; scrollbar-width: none; }
.admin-tab { flex: none; display: grid; gap: 2px; min-height: 56px; align-content: end; padding: var(--space-2) var(--space-2) var(--space-3);
  margin-right: var(--space-5); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; transition: box-shadow var(--flow-ui) var(--ease-machined); }
.admin-tab:hover .tab-name { color: var(--text-secondary); }
.admin-tab[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.admin-tab[aria-current="page"] .tab-name { color: var(--text); }
.admin-tab .tab-state:empty::before { content: "\00a0"; }
.admin-tab .tab-state.is-alert { color: var(--flare); }
.admin-out { grid-area: out; margin-bottom: var(--space-2); }

.machine-strip { grid-area: strip; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5);
  margin: 0 calc(-1 * max(16px, 2vw)); padding: var(--space-2) max(16px, 2vw); border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  text-decoration: none; transition: background-color var(--flow-ui) var(--ease-machined); }
.machine-strip:empty { display: none; }
.machine-strip:hover { background: var(--veil-1); }
.strip-label { color: var(--accent); letter-spacing: .24em; }
.strip-item { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.strip-mark { width: 8px; height: 8px; flex: none; border: 1px solid var(--edge); }
.strip-name { color: var(--text-secondary); }
.strip-item[data-tone="good"] .strip-mark { background: var(--text-muted); border-color: var(--text-muted); }
.strip-item[data-tone="busy"] .strip-mark { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.strip-item[data-tone="busy"] .strip-word { color: var(--accent); }
.strip-item[data-tone="bad"] .strip-mark { background: var(--flare); border-color: var(--flare); box-shadow: var(--glow-flare); }
.strip-item[data-tone="bad"] .strip-word, .strip-item[data-tone="bad"] .strip-name { color: var(--flare); }
.strip-clock { margin-left: auto; font-variant-numeric: tabular-nums; }

/* the safety alert, above every view: the klaxon, the one thing on this page about a person */
.admin-alarm { margin-top: calc(-1 * var(--space-3)); }

/* ---- a view ---------------------------------------------------------------------------------------------- */
.admin-view { display: grid; gap: var(--space-5); align-content: start; animation: admin-enter var(--flow-ui) var(--ease-machined) both; }
.admin-view > * { min-width: 0; }
.view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-2) var(--space-5);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
.view-head .eyebrow { margin: 0 0 var(--space-1); color: var(--accent); }
.view-title { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: .06em; color: var(--text); }
.view-state { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.view-state.is-on { color: var(--flare); }

/* ---- the minihero atop each view (Maestro, 2026-11-06: "it needs some elegance and miniheroes") ---------------------
   A lit stage, compact on purpose: the panel's own key light and travelling seam (launch.css .ln-panel), ignition light
   pooled behind the right side, the telemetry glyph field running there under a mask so it never sits under the words,
   faint scan lines, and an ignition seam along the foot (flare on Erase). On arrival one chrome sweep crosses it. The
   view's few numbers sit on its right as readouts. */
.admin-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 560px); grid-template-areas: "words console" "readouts console";
  gap: var(--space-5) var(--space-6); align-items: end;
  padding: var(--space-6) var(--space-6) var(--space-5); overflow: hidden; isolation: isolate; border-top: 1px solid var(--accent-line);
  background:
    radial-gradient(60% 120% at 92% 10%, var(--accent-wash), transparent 70%),
    radial-gradient(120% 90% at 0% 0%, var(--key-light), transparent 55%),
    var(--surface); }
.admin-hero > .hero-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .75;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 72%); mask-image: linear-gradient(90deg, transparent 0, transparent 34%, #000 72%); }
.admin-hero > .hero-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.admin-hero::after { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: 2px; animation: none !important; background-size: auto; opacity: 1;
  background: linear-gradient(90deg, var(--accent) 0, var(--accent-line) 40%, transparent 100%); box-shadow: 0 0 14px var(--accent-glow); }
.admin-hero.is-danger { border-top-color: var(--edge); background: radial-gradient(60% 120% at 92% 10%, var(--veil-2), transparent 70%), radial-gradient(120% 90% at 0% 0%, var(--key-light), transparent 55%), var(--surface); }
.admin-hero.is-danger::after { background: linear-gradient(90deg, var(--flare) 0, var(--edge) 40%, transparent 100%); box-shadow: var(--glow-flare); }
.admin-hero > .hero-words, .admin-hero > .hero-readouts, .admin-hero > .hero-console { position: relative; z-index: 2; }
.admin-hero > .hero-words { grid-area: words; }
.admin-hero > .hero-readouts { grid-area: readouts; justify-self: start; }
.admin-hero > .hero-console { grid-area: console; align-self: end; }
.hero-words { display: grid; gap: var(--space-2); min-width: 0; }
.hero-words .eyebrow { margin: 0; color: var(--accent); }
.admin-hero.is-danger .hero-words .eyebrow { color: var(--flare); }
.hero-words .view-title { font-size: clamp(40px, 5vw, 64px); line-height: .92; letter-spacing: .05em; text-shadow: 0 2px 24px var(--shade); }
.hero-line { margin: var(--space-1) 0 0; max-width: 52ch; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); }
.hero-state { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.hero-state:empty { display: none; }
.hero-state.is-on { color: var(--flare); }
/* the readouts are annunciator windows, not tiles: a few backlit legends, the live one lit from behind in ignition */
.hero-readouts { margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; }
.hero-readouts:empty { display: none; }
.hero-readout { display: grid; gap: 3px; align-content: center; min-width: 104px; padding: var(--space-2) var(--space-4);
  background: var(--ground); border: 1px solid var(--hairline); box-shadow: inset 0 1px 4px var(--shade); }
.hero-readout dt { margin: 0; white-space: nowrap; font-size: 9px; }
.hero-readout dd { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; }
.hero-value { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.hero-unit { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; color: var(--text-muted); }
.hero-readout.is-live { border-color: var(--accent-line); background: radial-gradient(120% 140% at 50% 50%, var(--accent-wash), transparent 75%), var(--ground);
  box-shadow: inset 0 0 16px var(--accent-wash), 0 0 14px var(--accent-wash); }
.hero-readout.is-live .hero-value { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.hero-readout.is-alert { border-color: var(--flare); box-shadow: inset 0 0 14px var(--veil-2), var(--glow-flare); }
.hero-readout.is-alert .hero-value { color: var(--flare); }
/* the arrival: one bright chrome sweep across the whole hero, once per visit */
.hero-sweep { position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .06) 56%, transparent 64% 100%);
  transform: translateX(-120%) skewX(-12deg); }
:root:not(.is-still) .admin-hero.is-arriving .hero-sweep { animation: hero-sweep 1100ms var(--ease-machined) 80ms 1 both; }
:root:not(.is-still) .admin-hero.is-arriving .hero-words { animation: hero-rise 520ms var(--ease-machined) both; }
:root:not(.is-still) .admin-hero.is-arriving .hero-readout { animation: hero-rise 520ms var(--ease-machined) both; }
:root:not(.is-still) .admin-hero.is-arriving .hero-readout:nth-child(2) { animation-delay: 60ms; }
:root:not(.is-still) .admin-hero.is-arriving .hero-readout:nth-child(3) { animation-delay: 120ms; }
:root:not(.is-still) .admin-hero.is-arriving .hero-readout:nth-child(4) { animation-delay: 180ms; }
@keyframes hero-sweep { 0% { opacity: 1; transform: translateX(-120%) skewX(-12deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-12deg); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- the console panel in each minihero (Maestro, 2026-11-06: "we need some sort of minihero blinky matrix panel of
   controls", then "i dont want retro like this" / "but the sleek equivelent reinagined", then a graphite desk of glowing
   ring keys and dials as the mood). A chamfered graphite bezel; across its head a matrix of thin lamp segments, a few lit
   and a few blinking on their own clocks; below it a dial for the view's one number and a bank of round keys sunk in
   square wells, each with a lit ring. Lit is ignition with its glow, alert is flare, on is graphite, off a hairline.
   No domes, no coloured caps: the light is the ring. */
@property --share { syntax: "<number>"; inherits: true; initial-value: 0; }
.hero-console { --chamfer: 14px; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-4); min-width: 0; position: relative;
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  background:
    linear-gradient(180deg, var(--veil-2), transparent 22%),
    radial-gradient(90% 70% at 50% 110%, var(--accent-wash), transparent 70%),
    linear-gradient(180deg, var(--surface-raised), var(--ground));
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 var(--veil-3), inset 0 -24px 40px -28px var(--shade); }
.hero-console:empty { display: none; }
.console-matrix { display: grid; grid-template-columns: repeat(var(--matrix-columns, 24), minmax(0, 1fr)); gap: 3px 3px;
  padding: var(--space-2); background: var(--ground); box-shadow: inset 0 1px 3px var(--shade), inset 0 0 0 1px var(--hairline); }
.matrix-lamp { display: block; height: 3px; background: var(--hairline); }
.matrix-lamp[data-state="dim"] { background: var(--veil-3); }
.matrix-lamp[data-state="lit"], .matrix-lamp[data-state="blink"] { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
:root:not(.is-still) .matrix-lamp[data-state="blink"] { animation: matrix-blink var(--lamp-period, 5s) steps(1, end) infinite; animation-delay: var(--lamp-delay, 0s); }
:root:not(.is-still) .matrix-lamp[data-state="lit"] { animation: matrix-breathe calc(var(--lamp-period, 5s) * 2.3) ease-in-out infinite; animation-delay: var(--lamp-delay, 0s); }
@keyframes matrix-blink { 0%, 54% { opacity: 1; } 55%, 72% { opacity: .1; } 73%, 100% { opacity: 1; } }
@keyframes matrix-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.console-deck { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.console-deck:has(> .console-gauge[hidden]) { grid-template-columns: minmax(0, 1fr); }
.console-gauge[hidden] { display: none; }
/* the dial: a ring of ticks, the share of it lit in ignition, the number in the middle */
.console-dial { position: relative; width: 116px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 2px; margin: 0 auto;
  border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--surface-raised), var(--ground) 72%);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 2px 6px var(--shade), 0 1px 0 var(--veil-2);
  transition: --share 1200ms var(--ease-machined); }
.dial-ring, .dial-ticks { position: absolute; inset: 7px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.dial-ticks { background: repeating-conic-gradient(from -135deg, var(--veil-3) 0 1.6deg, transparent 1.6deg 9deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)), conic-gradient(from -135deg, #000 0 270deg, transparent 0);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)), conic-gradient(from -135deg, #000 0 270deg, transparent 0);
  mask-composite: intersect; }
.dial-ring { background: conic-gradient(from -135deg, var(--dial-tone, var(--text-muted)) 0 calc(var(--share) * 270deg), transparent 0);
  filter: drop-shadow(0 0 4px var(--dial-glow, transparent)); }
.console-dial.is-live { --dial-tone: var(--accent); --dial-glow: var(--accent-glow); }
.console-dial.is-alert { --dial-tone: var(--flare); --dial-glow: var(--flare-glow); }
.dial-value { position: relative; font-family: var(--font-mono); font-size: 1.375rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.console-dial.is-live .dial-value { color: var(--accent); text-shadow: 0 0 14px var(--accent-glow); }
.console-dial.is-alert .dial-value { color: var(--flare); }
.dial-label { position: relative; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
/* the keys: a round key sunk in a square well, its ring the lamp */
.console-keys { display: grid; grid-template-columns: repeat(var(--key-columns, 3), minmax(0, 1fr)); gap: var(--space-3) var(--space-2); }
.console-key { appearance: none; display: grid; justify-items: center; align-content: start; gap: var(--space-2); min-width: 0; padding: 0; border: 0;
  background: transparent; color: var(--text); cursor: pointer; border-radius: var(--radius-0); }
.console-key:focus-visible { outline: none; }
.console-key:focus-visible .key-well { outline: 2px solid var(--flare); outline-offset: 2px; }
.key-well { display: grid; place-items: center; width: 64px; aspect-ratio: 1; background: var(--ground);
  box-shadow: inset 0 2px 5px var(--shade), inset 0 0 0 1px var(--hairline), 0 1px 0 var(--veil-2); }
.key-ring { --ring: var(--hairline); --ring-glow: transparent; display: grid; place-items: center; width: 46px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--surface-raised), var(--surface) 60%, var(--ground));
  box-shadow: 0 0 0 2px var(--ring), 0 0 14px 1px var(--ring-glow), inset 0 0 10px var(--ring-glow), inset 0 1px 0 var(--veil-3), 0 3px 6px var(--shade);
  transition: box-shadow var(--flow-ui) var(--ease-machined), transform 120ms var(--ease-machined); }
.key-glyph { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--text-muted);
  max-width: 40px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.key-label { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15;
  text-align: center; color: var(--text-secondary); overflow-wrap: anywhere; }
.console-key:hover .key-ring { --ring: var(--edge); }
.console-key:hover .key-label { color: var(--text); }
.console-key[data-state="on"] .key-ring { --ring: var(--text-muted); }
.console-key[data-state="on"] .key-glyph { color: var(--text); }
.console-key[data-state="lit"] .key-ring { --ring: var(--accent); --ring-glow: var(--accent-glow);
  background: radial-gradient(circle at 50% 40%, var(--accent-wash), var(--surface) 62%, var(--ground)); }
.console-key[data-state="lit"] .key-glyph { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
.console-key[data-state="lit"] .key-label { color: var(--text); }
.console-key[data-state="alert"] .key-ring { --ring: var(--flare); --ring-glow: var(--flare-glow); }
.console-key[data-state="alert"] .key-glyph, .console-key[data-state="alert"] .key-label { color: var(--flare); }
.console-key[aria-pressed="true"] .key-ring { box-shadow: 0 0 0 2px var(--ring), 0 0 22px 3px var(--ring-glow), inset 0 0 14px var(--ring-glow), inset 0 1px 0 var(--veil-3), 0 2px 4px var(--shade); }
.console-key.is-pressing .key-ring, .console-key:active .key-ring { transform: translateY(1px) scale(.97); }
.console-key.is-pressing .key-ring { --ring-glow: var(--accent-glow); }
:root:not(.is-still) .console-key[data-state="lit"] .key-ring { animation: ring-breathe 4.8s ease-in-out infinite; }
@keyframes ring-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.78); } }

/* ---- the controls (Maestro, 2026-11-06: "we need to integrate switches", "less dashboard more comtrol panel", "and
   glowing"). A toggle switch for on or off, a rotary selector for a choice of a few, a guard over a hold that cannot be
   undone. Each glows ignition where it is live. Every drawn part reads a --sprite-* property first, so a rendered sprite
   (set the property to a url() on :root or on the control) takes the drawn part's place without touching the script:
   --sprite-toggle-paddle, --sprite-toggle-slot, --sprite-knob-cap, --sprite-guard-cover. */
.ctl-toggle { appearance: none; display: inline-grid; justify-items: center; gap: 5px; padding: var(--space-2) var(--space-3); margin: 0; border: 0;
  background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-0); font: inherit; }
.ctl-toggle[aria-busy="true"] { cursor: progress; }
.ctl-toggle:focus-visible { outline: none; }
.ctl-toggle:focus-visible .toggle-slot { outline: 2px solid var(--flare); outline-offset: 3px; }
.toggle-lamp { display: block; width: 30px; height: 5px; background: var(--hairline); transition: background-color var(--flow-ui), box-shadow var(--flow-ui); }
.toggle-word { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; line-height: 1; color: var(--text-muted); transition: color var(--flow-ui); }
.toggle-slot { position: relative; display: block; width: 40px; height: 84px;
  background: var(--sprite-toggle-slot, linear-gradient(180deg, var(--ground), var(--surface)));
  box-shadow: inset 0 2px 5px var(--shade), inset 0 0 0 1px var(--hairline), 0 1px 0 var(--veil-2);
  transition: box-shadow var(--flow-ui) var(--ease-machined); }
.toggle-paddle { position: absolute; left: 4px; right: 4px; height: 36px; top: calc(100% - 40px);
  background: var(--sprite-toggle-paddle, linear-gradient(180deg, var(--veil-3), transparent 45%), linear-gradient(180deg, var(--surface-raised), var(--surface)));
  box-shadow: inset 0 1px 0 var(--veil-3), inset 0 0 0 1px var(--hairline), 0 3px 6px var(--shade);
  transition: top 180ms var(--ease-machined); }
.toggle-paddle::after { content: ""; position: absolute; left: 5px; right: 5px; top: calc(50% - 1.5px); height: 3px; background: var(--edge); transition: background-color var(--flow-ui), box-shadow var(--flow-ui); }
.ctl-toggle:hover .toggle-slot { box-shadow: inset 0 2px 5px var(--shade), inset 0 0 0 1px var(--edge), 0 1px 0 var(--veil-2); }
.ctl-toggle[data-on="true"] .toggle-lamp { background: var(--accent); box-shadow: 0 0 14px 2px var(--accent-glow), 0 0 3px var(--accent); }
.ctl-toggle[data-on="true"] .toggle-paddle { top: 4px; }
.ctl-toggle[data-on="true"] .toggle-paddle::after { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.ctl-toggle[data-on="true"] .toggle-slot { box-shadow: inset 0 2px 5px var(--shade), inset 0 0 0 1px var(--accent-line), inset 0 -22px 24px -10px var(--accent-glow), 0 0 22px var(--accent-glow); }
.ctl-toggle[data-on="true"] .toggle-word:first-of-type { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); }
.ctl-toggle[data-on="false"] .toggle-word:last-of-type { color: var(--text-secondary); }
.ctl-toggle.is-compact { gap: 4px; padding: var(--space-1) var(--space-2); }
.ctl-toggle.is-compact .toggle-word { display: none; }
.ctl-toggle.is-compact .toggle-lamp { width: 20px; height: 4px; }
.ctl-toggle.is-compact .toggle-slot { width: 24px; height: 44px; }
.ctl-toggle.is-compact .toggle-paddle { left: 3px; right: 3px; height: 18px; top: calc(100% - 21px); }
.ctl-toggle.is-compact[data-on="true"] .toggle-paddle { top: 3px; }
.ctl-toggle.is-compact .toggle-paddle::after { left: 4px; right: 4px; height: 2px; top: calc(50% - 1px); }
:root:not(.is-still) .ctl-toggle[data-on="true"] .toggle-lamp { animation: matrix-breathe 5.2s ease-in-out infinite; }

/* the rotary selector over a .segments group: a knob on the left, its legends stacked on the right, each with a lamp */
.segments.ctl-selector { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: 2px; align-items: center;
  border: 0; padding: 0; }
.selector-knob { grid-column: 1; grid-row: 1 / span var(--stops, 3); position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--veil-3) 0 2deg, transparent 2deg 15deg);
  box-shadow: inset 0 0 0 1px var(--hairline); }
.knob-cap { position: relative; width: 46px; aspect-ratio: 1; border-radius: 50%; transform: rotate(var(--turn, 0deg)); transition: transform 280ms var(--ease-machined);
  background: var(--sprite-knob-cap, radial-gradient(circle at 50% 30%, var(--surface-raised), var(--surface) 62%, var(--ground)));
  box-shadow: 0 0 0 1px var(--edge), inset 0 1px 0 var(--veil-3), 0 4px 10px var(--shade), 0 0 16px var(--accent-wash); }
.knob-pointer { position: absolute; left: 54%; right: 6%; top: calc(50% - 1.5px); height: 3px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow), 0 0 2px var(--accent); }
.ctl-selector .segment { grid-column: 2; }
.ctl-selector .segment span, .ctl-selector .segment + .segment span { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); min-height: 32px;
  padding: 0 var(--space-2) 0 0; border: 0; background: transparent; box-shadow: none; text-align: left; color: var(--text-muted);
  font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ctl-selector .segment span::before { content: ""; flex: none; width: 12px; height: 4px; background: var(--hairline); transition: background-color var(--flow-ui), box-shadow var(--flow-ui); }
.ctl-selector .segment input:hover + span { color: var(--text); background: transparent; }
.ctl-selector .segment input:checked + span { color: var(--text); background: transparent; box-shadow: none; }
.ctl-selector .segment input:checked + span::before { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow), 0 0 2px var(--accent); }
.ctl-selector .segment input:focus-visible + span { outline: 2px solid var(--flare); outline-offset: 2px; }
.mission-field .ctl-selector .segment span { text-align: left; }

/* the guard: a smoked cover over the hold. Closed, the hold sits dim beneath it and cannot be pressed; lifted, it
   folds to a tab along the top and its lamp turns flare and blinks: armed. */
.ctl-guard { position: relative; display: inline-grid; justify-self: start; padding-top: 22px; }
.guard-inner { transition: opacity var(--flow-ui) var(--ease-machined), filter var(--flow-ui) var(--ease-machined); }
.ctl-guard[data-open="false"] .guard-inner { opacity: .62; filter: saturate(.4); }
.guard-cover { appearance: none; position: absolute; z-index: 2; left: -5px; right: -5px; top: 0; bottom: -5px; margin: 0; padding: 0 var(--space-3);
  display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-2); padding-top: 5px; cursor: pointer; color: var(--accent);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--accent-line); border-radius: var(--radius-0);
  background: var(--sprite-guard-cover, linear-gradient(160deg, var(--veil-3), transparent 34%), linear-gradient(180deg, var(--accent-wash), transparent 60%));
  box-shadow: inset 0 1px 0 var(--veil-3), 0 0 0 1px var(--shade), 0 0 22px var(--accent-wash);
  transition: bottom 320ms var(--ease-machined), border-color var(--flow-ui), font-size var(--flow-ui), background var(--flow-ui); }
.guard-cover:hover { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--veil-3), 0 0 0 1px var(--shade), 0 0 26px var(--accent-glow); }
.guard-cover:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; }
.guard-lamp { flex: none; width: 14px; height: 4px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow), 0 0 2px var(--accent); }
.ctl-guard[data-open="true"] .guard-cover { bottom: calc(100% - 14px); padding-top: 0; align-items: center; font-size: 8px; color: var(--text-secondary); border-color: var(--edge); background: linear-gradient(180deg, var(--surface-raised), var(--surface)); }
.ctl-guard[data-open="true"] .guard-lamp { width: 10px; height: 3px; background: var(--flare); box-shadow: var(--glow-flare); }
:root:not(.is-still) .ctl-guard[data-open="true"] .guard-lamp { animation: matrix-blink 1.4s steps(1, end) infinite; }
.setting-danger .guard-cover, .manage-danger .guard-cover { border-color: var(--edge); }

/* where the switches sit */
.intern-switch { display: flex; align-items: center; }
.manage-switch { display: flex; align-items: center; gap: var(--space-4); }
.row-controls { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.row-switch { display: inline-grid; justify-items: center; gap: 2px; }
.row-switch-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.console-switch .switch-well { width: 64px; aspect-ratio: auto; min-height: 64px; padding: var(--space-1) 0; }

/* ---- the chrome flash (Maestro, 2026-11-06: "and flourishes like chrome panel flashes"): a panel's trim glint
   (launch.css .ln-trim-glint) crosses once, brighter, as its view opens and again when what it did lands ------------- */
:root:not(.is-still) .ln-panel.is-flashing > .ln-trim > .ln-trim-glint {
  background: linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, .07) 44%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .07) 56%, transparent 64% 100%);
  animation: panel-flash 950ms var(--ease-machined) var(--flash-delay, 0ms) 1 both; }
:root[data-theme="day"]:not(.is-still) .ln-panel.is-flashing > .ln-trim > .ln-trim-glint { background: linear-gradient(105deg, transparent 0 40%, rgba(255, 255, 255, .7) 50%, transparent 60% 100%); }
@keyframes panel-flash { 0% { opacity: 1; transform: translateX(-120%) skewX(-12deg); } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(300%) skewX(-12deg); } }

/* ---- the console rail (Maestro, 2026-11-06: "maybe a vertical array of mission console lights along the side?") ----
   Fixed down the left edge, in the page's gutter: three banks (Sys, the machines; Per, the periods; Aux, the switches)
   and a run of idle spares. A lamp is a square: off (an outline), on (graphite lit), lit (ignition), alert (flare),
   blink (a spare on its own clock). Shown only where the gutter has room for it. */
.console-rail { display: none; }
@media (min-width: 1180px) {
  .admin-page { max-width: min(1320px, calc(100vw - 2 * 64px)); }
  .console-rail { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: 40px; display: flex; flex-direction: column; align-items: center;
    gap: var(--space-5); padding: var(--space-5) 0; overflow: hidden; border-right: 1px solid var(--hairline);
    background: linear-gradient(90deg, var(--surface), var(--ground)); box-shadow: inset -1px 0 0 var(--veil-1), 8px 0 24px -16px var(--shade); }
  .console-rail::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--accent-line) 22%, var(--accent-line) 46%, transparent 70%); opacity: .6; }
}
.rail-bank { display: grid; justify-items: center; gap: 7px; padding: var(--space-2) 6px 9px; border: 1px solid var(--hairline); background: var(--veil-1);
  box-shadow: inset 0 1px 0 var(--veil-2); }
.rail-label { margin-bottom: var(--space-1); font-family: var(--font-mono); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.rail-lamp { display: block; width: 9px; height: 9px; border: 1px solid var(--edge); background: transparent;
  transition: background-color var(--flow-ui) var(--ease-machined), border-color var(--flow-ui), box-shadow var(--flow-ui); }
.rail-lamp[data-state="dim"] { border-color: var(--hairline); background: var(--veil-2); }
.rail-lamp[data-state="on"] { border-color: var(--text-muted); background: var(--text-muted); }
.rail-lamp[data-state="lit"], .rail-lamp[data-state="blink"] { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.rail-lamp[data-state="alert"] { border-color: var(--flare); background: var(--flare); box-shadow: var(--glow-flare); }
.rail-idle { gap: 7px; margin-top: auto; padding-top: 9px; border-color: transparent; background: none; box-shadow: none; }
.rail-idle .rail-lamp { width: 7px; height: 7px; border-color: var(--hairline); }
.rail-idle .rail-lamp[data-state="blink"] { opacity: .9; }
:root:not(.is-still) .rail-lamp[data-state="blink"] { animation: rail-blink 6.4s steps(1, end) infinite; animation-delay: var(--lamp-delay, 0s); }
:root:not(.is-still) .rail-lamp[data-state="alert"] { animation: rail-alert 1.6s steps(2, jump-none) infinite; }
@keyframes rail-blink { 0%, 58% { opacity: .9; } 59%, 70% { opacity: .12; } 71%, 100% { opacity: .9; } }
@keyframes rail-alert { 0% { opacity: 1; } 100% { opacity: .45; } }

/* ---- periods: add one, and the Mission Control code, side by side -------------------------------------- */
.periods-setup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.setup-card { display: grid; gap: var(--space-4); align-content: start; }
.setup-card .ln-eyebrow { margin: 0; }
.setup-title { margin: calc(-1 * var(--space-3)) 0 0; font-size: 1.5rem; letter-spacing: .08em; color: var(--text); }
.setup-card .setup-copy { max-width: 56ch; }
#one-code { border-top-color: var(--accent-line); }
.make-class { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.make-class .ln-btn { justify-self: start; min-width: 180px; }
.mission-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.mission-field .segment span { font-size: 0.875rem; letter-spacing: .1em; text-align: center; }

.made:empty, .drawer-result:empty { display: none; }
.made { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--hairline); animation: admin-enter var(--flow-ui) var(--ease-machined) both; }
.made-title { margin: 0; display: flex; gap: var(--space-2); align-items: baseline; font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.made-title .reply-tag { color: var(--accent); }
.codes { display: grid; gap: var(--space-2); justify-items: start; }
.codes .made-codes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: 0; }
.codes .made-codes > div { display: grid; gap: var(--space-1); }
.codes .made-codes dt { margin: 0; }
.codes .made-codes dd { margin: 0; }
.codes .made-codes .value.is-key { color: var(--accent); text-shadow: 0 0 18px var(--accent-glow); }
.codes .field-hint { max-width: 60ch; }

/* ---- the period board ------------------------------------------------------------------------------------ */
.class-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.class-board { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14px; }
.class-board thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
  text-align: left; padding: 0 var(--space-3) var(--space-2); white-space: nowrap; }
.class-board thead th.number { text-align: right; color: var(--text-muted); font-weight: 500; }
.class-board tbody th, .class-board tbody td { padding: var(--space-4) var(--space-3); border-top: 1px solid var(--hairline); vertical-align: top; color: var(--text-secondary); text-align: left; font-weight: 400; }
.class-board tbody tr { transition: background-color var(--flow-ui) var(--ease-machined); }
.class-board tbody tr:hover > * { background: var(--veil-1); }
.class-board tbody tr.is-open > * { background: var(--veil-2); }
.class-board tbody tr.is-open > th { box-shadow: inset 2px 0 0 var(--accent); }
.class-board .class-title { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.class-board .class-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.class-board .class-mission { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.class-board .class-code { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--text-muted); }
.class-board .class-tags .class-code { display: inline; }
.class-board .own-code { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  padding: 0 var(--space-1); border: 1px solid var(--accent-line); border-radius: var(--radius-1); }
.class-board .number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--text); }
.class-board .students { white-space: nowrap; }
.class-board .students .number { font-size: 18px; text-align: left; margin-right: var(--space-2); }
.class-board .students .of { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }
.class-board .students .of + .of { display: block; margin-top: 2px; }
.class-board .released { color: var(--text); }
.class-board .when { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
.class-board .actions-cell { text-align: right; vertical-align: middle; }
.class-board .actions-cell .ln-btn { min-width: 112px; }
.class-board .plays span { display: block; }
.class-board tr.is-closed .class-title, .class-board tr.is-closed .number, .class-board tr.is-closed .released { color: var(--text-muted); }

.status { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.status::before { content: ""; width: 8px; height: 8px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.status.is-closed { color: var(--text-muted); }
.status.is-closed::before { background: transparent; border: 1px solid var(--edge); box-shadow: none; }

/* the drawer row under a period. launch.css's .drawer is the console's station drawer, a fixed panel on the right;
   here the same word is a row in the flow, so its panel properties are put back first (without this every row
   drawer opened as a fixed column over the page). */
.class-board tbody tr.drawer-row > td { padding: 0; background: var(--veil-2); border-top: 0; }
.class-board .drawer { position: static; inset: auto; width: auto; height: auto; max-width: none; max-height: none; overflow: visible;
  border: 0; border-left: 2px solid var(--accent); background: none; box-shadow: none; color: inherit; }
.drawer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4) var(--space-6); align-items: start;
  padding: var(--space-4) var(--space-5) var(--space-5); border-left: 2px solid var(--accent); animation: admin-enter var(--flow-ui) var(--ease-machined) both; }
.drawer-copy { display: grid; gap: var(--space-2); }
.drawer-copy .eyebrow { margin: 0; color: var(--text); }
.drawer-copy p:not(.eyebrow) { margin: 0; max-width: 58ch; line-height: 1.5; }
.drawer-result { grid-column: 1 / -1; }

.manage { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
.manage-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-5) var(--space-6); align-items: start; }
.manage-part { display: grid; gap: var(--space-3); align-content: start; justify-items: start; min-width: 0; }
.manage-part > .eyebrow { margin: 0; color: var(--text); }
.manage-part .field-hint { max-width: 40ch; }
.manage-missions { width: 100%; }
.manage-missions .segment span { font-size: 0.8125rem; letter-spacing: .08em; text-align: center; }
.manage-fact { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.manage-reply:empty { display: none; }
.manage-danger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start;
  padding-top: var(--space-5); border-top: 1px solid var(--hairline); }
.manage-danger .drawer-copy .eyebrow { color: var(--flare); }
.purge-confirm { display: grid; gap: var(--space-3); justify-items: start; }
.purge-confirm .field { width: 100%; }
.purge-modes { border: 1px solid var(--edge); padding: var(--space-2) var(--space-4) var(--space-3); margin: 0; display: grid; gap: var(--space-1); min-width: 0; }
.purge-modes legend { padding: 0 var(--space-2); }
.purge-modes label.choice { display: flex; gap: var(--space-3); align-items: flex-start; width: auto; min-height: 44px; padding: var(--space-2) 0 0;
  background: none; border: 0; cursor: pointer; }
.purge-modes input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.purge-modes .choice-label { display: block; color: var(--text); font-size: 15px; }
.purge-modes .field-hint { display: block; }

/* ---- settings and erase: each one says what it is on the left and holds its controls on the right --------- */
.setting { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start;
  padding: var(--space-5) 0 var(--space-6); border-bottom: 1px solid var(--hairline); scroll-margin-top: 160px; }
.setting:last-child { border-bottom: 0; }
.setting-about { display: grid; gap: var(--space-2); align-content: start; }
.setting-about .eyebrow { margin: 0; }
.setting-title { font-size: 1.625rem; line-height: 1.05; letter-spacing: .08em; color: var(--text); }
.setting-state { display: inline-flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.setting-state.is-on { color: var(--text); }
.setting-copy { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--text-secondary); max-width: 46ch; }
.setting-controls { min-width: 0; }
.setting-table { grid-column: 1 / -1; display: grid; gap: var(--space-3); min-width: 0; }
.setting-table .eyebrow { margin: 0; }
.setting-danger .setting-about .eyebrow { color: var(--flare); }
.danger-panel { display: grid; gap: var(--space-4); align-content: start; max-width: 520px; border-top-color: var(--edge); }
.danger-panel .ln-eyebrow { margin: 0; }

.intern-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.intern-grid .ln-panel { display: grid; gap: var(--space-3); align-content: start; background: var(--surface); }
.intern-grid .ln-panel .ln-eyebrow { margin: 0; }
.key-state { margin: 0; font-size: 14px; letter-spacing: .08em; color: var(--text); }
.input-key { font-family: var(--font-mono); letter-spacing: .06em; }
.key-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.meter-readouts { margin: 0; display: grid; gap: var(--space-3); }
.meter-readouts div { display: grid; gap: 2px; }
.meter-readouts dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); }
.meter-readouts .readout-value { font-family: var(--font-mono); font-size: 22px; font-variant-numeric: tabular-nums; color: var(--text); }
.meter-readouts .readout-of { margin: 0; }
.ceiling { height: 3px; background: var(--hairline); overflow: hidden; }
.ceiling-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(var(--share, 0));
  transition: transform 600ms var(--ease-machined); }
.ceiling-fill.is-full { background: var(--flare); }

/* ---- media delivery: the station's levers, then each class's health and its own levers --------------- */
.media-station { display: grid; gap: var(--space-4); background: var(--surface); }
.media-station-head { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; justify-content: space-between; }
.media-station-head .ln-eyebrow { margin: 0; }
.media-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.media-levers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.media-lever { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.media-lever .field-hint { margin: 0; }
.media-board { min-width: 1080px; }
.media-board tbody th, .media-board tbody td { vertical-align: middle; }
.media-board .released { display: block; white-space: nowrap; }
.media-board .class-title { white-space: nowrap; font-size: 17px; }
.media-guarded { display: block; margin-top: 2px; color: var(--accent); }
.media-drawer { grid-template-columns: minmax(0, 1fr); }
.media-drawer .drawer-copy .media-presets { margin-top: var(--space-2); }

/* ---- the credits and privacy pages ---------------------------------------------------------------------- */
.credits-page { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: var(--space-7) max(16px, 2vw) 0; display: grid; gap: var(--space-6); }
.credits-head { display: grid; gap: var(--space-4); }
.credits-head .mark { width: 64px; height: 64px; margin-left: -4px; }
.credits-head .eyebrow { color: var(--accent); margin: 0; }
.credits-head h1 { margin: 0; }
.credit-line { margin: 0; padding: var(--space-4) 0 var(--space-4) var(--space-5); border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: .04em; color: var(--text); }
.credits-list { margin: 0; display: grid; gap: 0; }
.credits-list > div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.credits-list dt { margin: 0; padding-top: 3px; }
.credits-list dd { margin: 0; display: grid; gap: var(--space-2); }
.credits-list dd p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-secondary); max-width: 62ch; }
.credits-list .credit-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.credits-list a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.credits-list a:hover { text-decoration-color: var(--accent); }

/* ---- narrow --------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .admin-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand out" "tabs tabs" "strip strip"; }
  .admin-out { margin: 0; align-self: center; }
  .intern-grid, .periods-setup, .manage-grid, .manage-danger { grid-template-columns: minmax(0, 1fr); }
  .admin-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "words" "readouts" "console"; padding: var(--space-5); }
  .hero-readouts { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); row-gap: var(--space-3); }
  .admin-hero > .hero-field { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70%); mask-image: linear-gradient(180deg, transparent 0, #000 70%); opacity: .5; }
  .setting { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .setting-copy { max-width: 62ch; }
  .drawer { grid-template-columns: minmax(0, 1fr); }
  .admin-hero > .hero-console { width: 100%; max-width: 620px; justify-self: start; }
  .admin-hero > .hero-readouts { justify-self: stretch; }
}
@media (max-width: 720px) {
  .console-deck { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .console-keys { width: 100%; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .console-dial { width: 104px; }
  .admin-bar { position: relative; }
  .admin-tab { min-height: 48px; margin-right: var(--space-4); padding: var(--space-2) 0 var(--space-3); }
  .admin-tab .tab-state { display: none; }
  .admin-tab .tab-name { font-size: 1rem; }
  .strip-clock { margin-left: 0; }
  .media-board { min-width: 0; }
  /* the board becomes one card per period: the period, then its numbers labelled, then Manage */
  .class-scroll { overflow: visible; margin: 0; padding: 0; }
  .class-board { min-width: 0; }
  .class-board thead { display: none; }
  .class-board tbody tr:not(.drawer-row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4);
    padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
  .class-board tbody tr:not(.drawer-row) > * { padding: 0; border-top: 0; background: none !important; box-shadow: none !important; }
  .class-board tbody tr > th, .class-board .actions-cell { grid-column: 1 / -1; }
  .class-board td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
  .class-board .number { text-align: left; }
  .class-board .actions-cell { text-align: left; }
  .class-board .actions-cell .ln-btn { width: 100%; }
  .class-board .actions-cell .ln-btn-quiet { border-color: var(--edge); }
  .class-board tbody tr.is-open { border-left: 2px solid var(--accent); padding-left: var(--space-3); }
  .class-board tbody tr.drawer-row { display: block; }
  .class-board tbody tr.drawer-row > td { display: block; }
  .drawer, .manage { padding: var(--space-4); }
  .credits-list > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---- motion ------------------------------------------------------------------------------------------ */
@keyframes admin-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .made, .drawer, .admin-view, .hero-words, .hero-readout, .hero-sweep, .rail-lamp, .matrix-lamp, .key-ring, .toggle-lamp, .guard-lamp { animation: none !important; }
  .console-dial, .key-ring, .toggle-paddle, .knob-cap, .guard-cover { transition: none; }
  .hero-field { display: none; }
  .ceiling-fill, .class-board tbody tr, .admin-tab, .machine-strip, .box-more summary::before { transition: none; }
}
@media print {
  .console-rail, .hero-field, .hero-sweep, .admin-page .admin-tabs, .admin-out, .machine-strip, .admin-page .make-class, .actions-cell, .intern-switch, #key-form, #demo-reset { display: none !important; }
  .admin-view[hidden] { display: grid !important; }
}

/* ---- the render boxes: one card each; the tone is the box's verdict (static/boxes.js) -------------------- */
.boxes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.box-card { display: grid; gap: var(--space-3); align-content: start; background: var(--surface); border-left: 2px solid var(--hairline); }
.box-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.box-head .ln-eyebrow { margin: 0; }
.box-name { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: .04em; color: var(--text); }
.box-state { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; white-space: nowrap; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.box-state::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--edge); }
.box-why { margin: 0; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.box-why:empty { display: none; }
.box-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font-family: var(--font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--text-secondary); overflow-wrap: anywhere; }
.box-card[data-tone="good"] .box-state { color: var(--text); }
.box-card[data-tone="good"] .box-state::before { background: var(--text-muted); border-color: var(--text-muted); }
.box-card[data-tone="busy"] { border-left-color: var(--accent); }
.box-card[data-tone="busy"] .box-state { color: var(--accent); }
.box-card[data-tone="busy"] .box-state::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.box-card[data-tone="bad"] { border-left-color: var(--flare); box-shadow: var(--glow-flare); }
.box-card[data-tone="bad"] .box-state { color: var(--flare); padding: 1px 6px; border: 1px solid var(--flare); }
.box-card[data-tone="bad"] .box-state::before { background: var(--flare); border-color: var(--flare); }
:root:not(.is-still) .box-card[data-tone="busy"] .box-state::before { animation: box-pulse 2.4s var(--ease-machined) infinite; }
@keyframes box-pulse { 50% { opacity: .35; } }

/* ---- right now: the servers, the voice computer and both render boxes, one card each in the render boxes' tones
   (static/machines.js, static/boxes.js glance); four across, two, then one on a phone ------------------------- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
/* a card a quarter of the page wide: the state on its own line above the name, so neither wraps around the other */
.live-card .box-head { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-2); }
.live-card .box-name { margin: 0 0 var(--space-1); font-size: 1.5rem; }
.live-card .box-lines li:first-child { color: var(--text); }

/* the full report folded under a render box's card: the Render computers band this replaced, said once */
.box-more { border-top: 1px solid var(--hairline); padding-top: var(--space-2); }
.box-more summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); list-style: none; }
.box-more summary::-webkit-details-marker { display: none; }
.box-more summary::before { content: ""; width: 6px; height: 6px; margin-right: var(--space-2); border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform var(--flow-ui) var(--ease-machined); }
.box-more[open] summary::before { transform: rotate(45deg); }
.box-more summary:hover { color: var(--text); }
.box-more .box-lines { margin-top: var(--space-2); }