/* Operator. One switchboard operator's position: a wooden cabinet, a bakelite jack field and the
   key shelf in front of it. The module grammar (hairline plates butted edge to edge, tracked caps
   legends, bracket meters, state words) is read off his avionics sheet; the material, the palette
   and the lettering are read off his avatar and header. NOTE.md > Reference teardown. */

@font-face { font-family: "Routed"; src: url("/fonts/routed-gothic.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Routed Wide"; src: url("/fonts/routed-gothic-wide.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Routed Narrow"; src: url("/fonts/routed-gothic-narrow.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  /* colour tokens carry a -c suffix so a colour name can never collide with a spacing name */
  --panel-c: #efd9b0;
  --panel-deep-c: #e6cb9a;
  --cream-c: #fae9c7;
  --wood-c: #773815;
  --wood-dark-c: #49230a;
  --wood-edge-c: #a7541d;
  --bakelite-c: #231408;
  --bakelite-up-c: #33200f;
  --ink-c: #2b1708;
  --engrave-c: #f2e0ba;
  --engrave-dim-c: #c9b084;
  --brass-c: #c89a4a;
  --brass-dark-c: #8a5a1e;
  --lamp-c: #0257f9;
  --lamp-bloom-c: #a9e7f8;
  --busy-c: #e0401f;

  --gutter: 10px;
  --body-inset: 16px;
  --title-h: 46px;
  --field-pad: 26px;

  --t-body: 19px;
  --t-label: 16px;
  --t-value: 24px;
  --t-big: 44px;
  --t-huge: 58px;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--wood-dark-c);
  color: var(--ink-c);
  font-family: "Routed", ui-monospace, monospace;
  font-size: var(--t-body);
  line-height: 1.5;
  font-synthesis: none;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* every surface on this page is a drawn pixel object: never let a browser smooth one */
.cabinet, .mod, .bkey, .key-body, .terminal, .mint, .sheet-plate, .lamp, .band .hour,
img, .pick { image-rendering: pixelated; }
b { font-family: "Routed Wide", "Routed", monospace; font-weight: 400; }

/* -------------------------------------------------------------- the room behind the cabinet */

.room {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #2a160a url("/img/room.jpg") center/cover no-repeat;
}
.room-loop {
  width: 110%;
  height: 110%;
  margin: -5% 0 0 -5%;
  object-fit: cover;
  filter: blur(14px) saturate(0.85) brightness(0.72);
}
.room::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 225, 180, 0.18), rgba(20, 10, 4, 0.72) 72%);
}

/* -------------------------------------------------------------- the cabinet */

.cabinet {
  position: relative;
  z-index: 1;
  width: min(1680px, 100% - 48px);
  margin: 40px auto 56px;
  border: 26px solid transparent;
  border-image: url("/img/cabinet.png") 13 fill / 26px / 0 stretch;
  background: var(--panel-c);
  box-shadow: 0 30px 70px rgba(12, 6, 2, 0.55);
}

/* -------------------------------------------------------------- the crown */

.crown {
  position: relative;
  padding: 30px var(--field-pad) 26px;
  border-bottom: 3px solid var(--wood-dark-c);
  background: var(--wood-c) url("/img/wood-crown.jpg") center/auto 100% repeat-x;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "mark premise" "lamps state";
  gap: 18px 34px;
  align-items: center;
}
.crown-mark { grid-area: mark; display: flex; align-items: center; gap: 20px; }
.wordmark { width: clamp(240px, 26vw, 420px); height: auto; image-rendering: pixelated; }
.chip { width: clamp(84px, 9vw, 136px); height: auto; image-rendering: pixelated; }

.premise {
  grid-area: premise;
  margin: 0;
  max-width: 52ch;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.45;
  color: var(--cream-c);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.premise b { color: #ffd98a; }

.lampstrip {
  grid-area: lamps;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 34px;
}
.lampstrip .lamp { width: 34px; height: 34px; }

.crown-state {
  grid-area: state;
  margin: 0;
  justify-self: end;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--engrave-dim-c);
}

.lamp {
  width: 30px;
  height: 30px;
  background: url("/img/lamp-off.png") center/contain no-repeat;
  flex: 0 0 auto;
}
.lamp.on { background-image: url("/img/lamp-blue.png"); filter: drop-shadow(0 0 8px rgba(2, 87, 249, 0.75)); }
.lamp.busy { background-image: url("/img/lamp-red.png"); filter: drop-shadow(0 0 8px rgba(224, 64, 31, 0.7)); }

/* -------------------------------------------------------------- the jack field */

.field {
  padding: var(--field-pad);
  background: var(--panel-deep-c) url("/img/panel.jpg") center/420px repeat;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  /* a short view used to leave a bare cream band under the last plate: the rows take that space
     instead, so the field is always full to its own edge (his note, 2026-10-06) */
  align-content: stretch;
  min-height: 52vh;
}
.booting {
  grid-column: 1 / -1;
  margin: 0;
  padding: 60px 0;
  text-align: center;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wood-c);
}

/* every module is the one generated bakelite plate, nine-sliced */
.mod {
  grid-column: span var(--span, 12);
  display: flex;
  flex-direction: column;
  border: 24px solid transparent;
  border-image: url("/img/plate.png") 12 fill / 24px / 0 stretch;
  background: var(--bakelite-c) url("/img/tile-bakelite.png") top left/48px repeat;
  background-clip: padding-box;
  color: var(--engrave-c);
  min-width: 0;
}
.mod-title {
  margin: 0;
  padding: 0 var(--body-inset);
  height: var(--title-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-label);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass-c);
  border-bottom: 1px solid rgba(200, 154, 74, 0.42);
  flex: 0 0 auto;
}
.mod-title .state { color: var(--engrave-dim-c); letter-spacing: 0.13em; }
.mod-body {
  padding: 18px var(--body-inset) 22px;
  flex: 1 1 auto;
  min-width: 0;
}
/* A module whose neighbour is taller used to end in a bare void. With .fill the one element marked
   .grow takes the slack, so the plate is full to its lip at every width (his note, 2026-10-06). */
.mod-body.fill { display: flex; flex-direction: column; }
/* each .grow keeps its own floor, so taking the slack can never squash it below its resting size */
.mod-body.fill .grow { flex: 1 1 auto; }
.mod-body.fill .field-row:has(.grow) { flex: 1 1 auto; display: flex; flex-direction: column; }
.mod-body > :first-child { margin-top: 0; }
.mod-body > :last-child { margin-bottom: 0; }

/* the reference's own devices -------------------------------------------- */

/* a dotted leader line: label .......... value [state]. Used in two modules, never as the page */
.leaders { margin: 0; padding: 0; list-style: none; }
.leaders li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.leaders .lead {
  flex: 1 1 auto;
  min-width: 24px;
  border-bottom: 2px dotted rgba(242, 224, 186, 0.38);
  transform: translateY(-5px);
}
.leaders .val { font-size: 20px; letter-spacing: 0.05em; color: #fff3d6; white-space: nowrap; }
.leaders .st { color: var(--brass-c); white-space: nowrap; }

/* a bracket meter: [****--] */
.meter { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
.meter i {
  width: 11px;
  height: 11px;
  background: rgba(242, 224, 186, 0.22);
  display: block;
  font-style: normal;
}
.meter i.on { background: var(--brass-c); }

.rows { display: grid; gap: 2px; }
.row {
  display: grid;
  grid-template-columns: 34px 92px 1fr 150px 118px 120px;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  background: rgba(255, 236, 200, 0.045);
  min-width: 0;
}
.row + .row { border-top: 1px solid rgba(200, 154, 74, 0.2); }
.row.free { background: rgba(255, 236, 200, 0.02); color: var(--engrave-dim-c); }
.row.free .who { color: var(--brass-dark-c); }
.row.free .clock { color: var(--engrave-dim-c); }
.row .who { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-c); }
.row .what { font-size: 18px; min-width: 0; overflow-wrap: anywhere; }
.row .tag { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--engrave-dim-c); }
.row .clock { font-family: "Routed Wide", monospace; font-size: 28px; letter-spacing: 0.02em; color: #fff3d6; }
.row-head {
  display: grid;
  grid-template-columns: 34px 92px 1fr 150px 118px 120px;
  gap: 14px;
  padding: 0 26px 10px;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-dark-c);
}

/* an empty module is not a void with a line of type at the top: the object sits in the middle of
   the plate and the sentence sits under it */
.empty {
  margin: 0;
  padding: 26px 0 18px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  color: var(--engrave-dim-c);
  font-size: 18px;
}
.empty img { width: 148px; height: auto; image-rendering: pixelated; opacity: 0.9; }
.empty span { max-width: 44ch; }

/* the one full width graphic band: the day in dither columns. It stands on a visible floor, so a
   quiet day reads as an instrument at rest and not as an empty box. */
.band { display: flex; align-items: flex-end; gap: 3px; height: 150px; position: relative; }
.band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: rgba(200, 154, 74, 0.45);
}
.band.quiet { height: 72px; }
.band .hour {
  flex: 1 1 0;
  background: url("/img/dither.png") bottom left/8px repeat;
  min-height: 11px;
  position: relative;
}
.band .hour.now { background-image: url("/img/dither-lit.png"); }
.band-axis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 12px;
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--brass-dark-c);
}
.band-axis span { text-align: left; }

/* The fee bus, drawn the way his sheet draws its electrical bus: one feed on the left, a bar down
   the middle, a tap into every cell. Every cell sits on its own tap, so none of them floats. */
.bus { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.3fr); align-items: stretch; gap: 0; }
.bus-in { display: grid; align-content: center; }
.bus-out { display: grid; gap: 10px; align-content: center; }
.bus-cell {
  border: 1px solid rgba(200, 154, 74, 0.55);
  background: rgba(0, 0, 0, 0.28);
  padding: 16px 30px;
  min-width: 0;
  position: relative;
}
.bus-cell .k { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-c); }
.bus-cell .v { font-family: "Routed Wide", monospace; font-size: 26px; color: #fff3d6; }

.bus-link { position: relative; }
/* the feed, from the one cell on the left into the bar */
.bus-link::before {
  content: "";
  position: absolute;
  left: 0; right: 50%; top: 50%;
  height: 2px;
  background: rgba(200, 154, 74, 0.65);
}
/* the bar itself */
.bus-link::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(200, 154, 74, 0.65);
}
/* a tap off the bar into each of the three cells it feeds */
.bus-out .bus-cell::before {
  content: "";
  position: absolute;
  right: 100%; top: 50%;
  width: 36px;
  height: 2px;
  background: rgba(200, 154, 74, 0.65);
}
.bus-out .bus-cell::after {
  content: "";
  position: absolute;
  right: 100%; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3px;
  background: var(--brass-c);
}

/* big readouts */
.big { font-family: "Routed Wide", monospace; font-size: var(--t-big); line-height: 1.05; color: #fff3d6; letter-spacing: 0.01em; }
.huge { font-family: "Routed Wide", monospace; font-size: var(--t-huge); line-height: 1; color: #fff3d6; }
.unit { font-family: "Routed", monospace; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-c); }
.note { font-size: 17px; color: var(--engrave-dim-c); margin: 12px 0 0; }

/* -------------------------------------------------------------- controls */

.bkey {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 22px;
  border: 18px solid transparent;
  border-image: url("/img/key-brass.png") 9 fill / 18px / 0 stretch;
  background: url("/img/tile-brass.png") top left/36px repeat;
  background-clip: padding-box;
  color: #3a1e06;
  font-family: "Routed Wide", monospace;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: transform 90ms ease, filter 90ms ease;
}
.bkey span { display: block; line-height: 1; transform: translateY(1px); }
.bkey img { width: 26px; height: 26px; object-fit: contain; }
.bkey:hover { filter: brightness(1.08); }
.bkey:active { transform: translateY(2px); }
.bkey[disabled], .bkey[aria-disabled="true"] {
  filter: grayscale(0.55) brightness(0.78);
  cursor: default;
  pointer-events: none;
}
.bkey:focus-visible { outline: 3px solid var(--lamp-bloom-c); outline-offset: 3px; }

.bkey.big-key { min-height: 68px; font-size: 22px; padding: 0 30px; }

.field-row { display: grid; gap: 14px; margin: 0 0 18px; }
.field-row label {
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-c);
}
input[type="text"], input[type="search"], textarea, select {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  background: #150c04;
  border: 1px solid rgba(200, 154, 74, 0.5);
  color: var(--engrave-c);
  font-family: "Routed", monospace;
  font-size: 19px;
  line-height: 1.45;
}
textarea { min-height: 132px; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--lamp-bloom-c);
  outline-offset: 2px;
}
::placeholder { color: rgba(242, 224, 186, 0.4); }

/* a row of engraved choice keys (templates, languages) */
/* Every row of keys is a complete row: the grid says how many stand in it, so the last row is
   never a ragged two out of five (his note, 2026-10-06). */
.picks { display: grid; gap: 10px; }
/* the six templates fill the row in two complete rows of three, never four and then two */
.picks.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the five languages */
.picks.row5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* the eight lengths, one complete row */
.picks.row8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pick {
  appearance: none;
  min-height: 62px;
  padding: 8px 14px;
  border: 20px solid transparent;
  border-image: url("/img/key-up.png") 12 fill / 20px / 0 stretch;
  background: var(--bakelite-c) url("/img/tile-bakelite.png") top left/48px repeat;
  background-clip: padding-box;
  color: var(--engrave-c);
  font-family: "Routed", monospace;
  font-size: 18px;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.pick small { font-size: var(--t-label); color: var(--engrave-dim-c); letter-spacing: 0.04em; }
/* a one word key is centred on its own plate; only the template keys carry a sentence and read left */
.picks.row5 .pick, .picks.row8 .pick { align-items: center; text-align: center; padding: 8px 10px; }
/* A thrown key has to read as thrown. The pressed plate alone was too quiet to see, so the chosen
   key also carries the brass bead and the lamp glow of a line that is up. Nothing moves: the ring
   is drawn inside the plate it already occupies. */
.pick[aria-pressed="true"] {
  border-image-source: url("/img/key-down.png");
  color: #fff6de;
  box-shadow: inset 0 0 0 2px var(--brass-c), inset 0 0 18px rgba(2, 87, 249, 0.38);
}
.pick[aria-pressed="true"] small { color: var(--engrave-c); }
.pick:focus-visible { outline: 3px solid var(--lamp-bloom-c); outline-offset: 2px; }

/* the result slot is reserved from the first paint, so pressing search moves nothing */
.results { display: grid; gap: 2px; margin: 14px 0 0; align-content: start; min-height: 148px; }
.results .rest {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: 148px;
  padding: 18px;
  background: rgba(255, 236, 200, 0.03);
  color: var(--engrave-dim-c);
  font-size: 17px;
  text-align: center;
}
.results .rest .dots { display: flex; gap: 8px; }
.results .rest .dots i { width: 9px; height: 9px; background: rgba(200, 154, 74, 0.35); display: block; }
.result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(255, 236, 200, 0.05);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  color: var(--engrave-c);
  font-family: "Routed", monospace;
  font-size: 18px;
  min-width: 0;
}
.result:hover { border-color: rgba(200, 154, 74, 0.5); }
.result[aria-pressed="true"] { border-color: var(--brass-c); background: rgba(200, 154, 74, 0.14); }
.result .where { display: block; font-size: var(--t-label); color: var(--engrave-dim-c); margin-top: 4px; overflow-wrap: anywhere; }
.result .cat { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-c); white-space: nowrap; }

.verdict { margin: 16px 0 0; padding: 16px 20px; border: 1px solid rgba(200, 154, 74, 0.45); font-size: 18px; }
.verdict.no { border-color: var(--busy-c); color: #ffc2ad; }
.verdict.ok { border-color: var(--brass-c); color: #d8f0ff; }

/* -------------------------------------------------------------- the key shelf */

/* Two blocks of equal height, nothing else: the operator's own position on the left (the keys of
   the board with the headset lying under them) and the outside line on the right. Nothing floats
   over the plates above: the patch cords that used to hang here belonged to no object (his note,
   2026-10-06). */
.shelf {
  position: relative;
  padding: 34px var(--field-pad) 34px;
  border-top: 3px solid var(--wood-dark-c);
  background: var(--wood-dark-c) url("/img/wood-shelf.jpg") center/auto 100% repeat-x;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 520px);
  gap: 34px;
  align-items: stretch;
}
.rack {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}

/* the headset rests in the middle of the shelf under its own keys, never dropped in a corner */
.hook {
  width: 196px;
  height: auto;
  margin: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(12, 6, 2, 0.6));
}
/* five keys, one complete row edge to edge: never four and then one, and all five the same height */
.keys { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream-c);
  flex: 0 1 auto;
  min-width: 0;
}
.key-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  width: 100%;
  /* the legend wraps rather than running out of its own plate at 1366 */
  flex: 1 1 auto;
  padding: 10px 20px;
  border: 20px solid transparent;
  border-image: url("/img/key-up.png") 12 fill / 20px / 0 stretch;
  background: var(--bakelite-c) url("/img/tile-bakelite.png") top left/48px repeat;
  background-clip: padding-box;
  font-family: "Routed", monospace;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #f6e6c4;
  transition: transform 90ms ease;
}
.key-plate {
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  color: #2b1708;
  padding: 3px 10px;
  border: 10px solid transparent;
  border-image: url("/img/key-brass.png") 9 fill / 10px / 0 stretch;
  image-rendering: pixelated;
}
.key:hover .key-body { transform: translateY(-2px); }
.key[aria-current="page"] .key-body {
  border-image-source: url("/img/key-down.png");
  color: #fff6de;
  transform: translateY(3px);
}
.key[aria-current="page"] .key-plate { border-image-source: url("/img/key-brass-down.png"); color: #1c0e04; }
.key:focus-visible .key-body { outline: 3px solid var(--lamp-bloom-c); outline-offset: 3px; }

/* the brass terminal where the switchboard meets the world outside */
.terminal {
  border: 26px solid transparent;
  border-image: url("/img/terminal.png") 13 fill / 26px / 0 stretch;
  background: #1b1005 url("/img/tile-bakelite.png") top left/48px repeat;
  background-clip: padding-box;
  color: var(--engrave-c);
  min-width: 0;
}
.terminal-title {
  margin: 0;
  padding: 10px 26px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 12px;
  font-family: "Routed", monospace;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2d1a08;
  background: var(--brass-c) url("/img/brass-strip.png") left center/auto 100% repeat-x;
  image-rendering: pixelated;
}
.terminal-title span { color: #3f2409; }
.terminal-body { padding: 20px 26px 24px; }
.terminal-label { margin: 0 0 8px; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-c); }
.mint {
  margin: 0 0 16px;
  padding: 2px 6px 6px;
  border: 16px solid transparent;
  border-image: url("/img/sunken.png") 8 fill / 16px / 0 stretch;
  background-color: #0f0803;
  font-family: "Routed Wide", monospace;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: #ffeec4;
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
/* only a real address breaks anywhere: the waiting line reads NOT CONNECTED YET, never CONNECT ED */
.mint.empty-state { overflow-wrap: normal; color: var(--engrave-dim-c); font-family: "Routed", monospace; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; user-select: none; }
.terminal-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.terminal-keys .bkey:first-child { grid-column: 1 / -1; }
.terminal-note { margin: 16px 0 0; font-size: 17px; color: var(--engrave-dim-c); }

/* -------------------------------------------------------------- the sheet (one dialog) */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(16, 8, 2, 0.74);
}
.sheet[hidden] { display: none; }
.sheet-plate {
  position: relative;
  width: min(820px, 100%);
  max-height: 86vh;
  overflow: auto;
  border: 24px solid transparent;
  border-image: url("/img/plate.png") 12 fill / 24px / 0 stretch;
  background: var(--bakelite-c) url("/img/tile-bakelite.png") top left/48px repeat;
  background-clip: padding-box;
  color: var(--engrave-c);
}
.sheet-title {
  margin: 0;
  padding: 0 var(--body-inset);
  height: var(--title-h);
  display: flex;
  align-items: center;
  font-family: "Routed", monospace;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--brass-c);
  border-bottom: 1px solid rgba(200, 154, 74, 0.42);
}
.sheet-close {
  position: absolute;
  top: 0;
  right: var(--body-inset);
  height: var(--title-h);
  min-width: 72px;
  background: none;
  border: 0;
  color: var(--brass-c);
  font-family: "Routed", monospace;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.sheet-close:focus-visible { outline: 3px solid var(--lamp-bloom-c); }
.sheet-body { padding: 24px var(--body-inset) 28px; }

.talk { display: grid; gap: 12px; margin: 0; }
.talk .turn { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline; }
.talk .turn .who { font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-c); }
.talk .turn.them .who { color: var(--engrave-dim-c); }
.talk .turn p { margin: 0; font-size: 18px; }

.player { display: flex; align-items: center; gap: 18px; margin: 20px 0 0; padding: 18px 20px; background: rgba(255, 236, 200, 0.05); border: 1px solid rgba(200, 154, 74, 0.35); }
.player img { width: 72px; height: auto; image-rendering: pixelated; }
.player audio { flex: 1 1 auto; min-width: 0; height: 44px; }

/* -------------------------------------------------------------- how it works steps */

.steps { display: grid; gap: var(--gutter); grid-column: span 12; grid-template-columns: repeat(12, 1fr); }
.step-pic { width: 100%; height: auto; margin: 0 0 16px; border: 1px solid rgba(200, 154, 74, 0.3); }
.safelist { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.safelist li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: baseline; font-size: 18px; }
.safelist li .n { font-size: var(--t-label); letter-spacing: 0.1em; color: var(--brass-c); }

/* -------------------------------------------------------------- phone */

/* The phone is drawn, not squeezed: the cabinet keeps its crown and its shelf, the jack field
   becomes one column, and the leader lines turn into two line rows so nothing ever wraps mid label. */
/* a template key carries a sentence, so it gets a whole row as soon as two would squeeze it */
@media (max-width: 760px) {
  .picks.wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1099px) and (min-width: 761px) {
  .picks.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrower than the field, the short keys fold into complete rows: five languages become two and
   two and one whole row, eight lengths become two rows of four. Never a ragged last row. */
@media (max-width: 1099px) {
  .picks.row5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picks.row5 .pick:last-child { grid-column: 1 / -1; }
  .picks.row8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  /* a language name is one word and cannot wrap: under 440 it takes the whole row rather than
     running out of its own plate */
  .picks.row5 { grid-template-columns: minmax(0, 1fr); }
  .picks.row8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Between the phone rules and 1280 the shelf cannot carry two blocks side by side: five key plates
   in a 560 px column run out of their own legends. It stacks there instead. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .shelf .terminal { max-width: 640px; margin-inline: auto; }
  .rack { gap: 22px; }
  .hook { margin: 0 auto; width: 168px; }
}

@media (max-width: 1099px) {
  :root { --field-pad: 22px; --body-inset: 20px; --gutter: 8px; --t-big: 34px; --t-huge: 42px; --title-h: 42px; }

  .cabinet { width: calc(100% - 16px); margin: 12px auto 24px; border-width: 16px; border-image-width: 16px; }

  .crown {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mark" "premise" "lamps" "state";
    gap: 12px;
    padding: 18px var(--field-pad) 16px;
  }
  .crown-mark { flex-wrap: wrap; gap: 12px; }
  .wordmark { width: min(260px, 62vw); }
  .chip { width: 92px; }
  .premise { max-width: none; font-size: 18px; }
  .crown-state { justify-self: start; font-size: 16px; letter-spacing: 0.06em; }
  .lampstrip { flex-wrap: wrap; gap: 10px; min-height: 0; }
  .lampstrip .lamp { width: 24px; height: 24px; }
  .lampstrip .lamp:nth-child(n + 9) { display: none; }

  .field { padding: var(--field-pad); min-height: 0; }
  .mod { grid-column: span 12 !important; border-width: 18px; border-image-width: 18px; }
  .mod-title { height: auto; min-height: var(--title-h); padding: 10px var(--body-inset); flex-wrap: wrap; gap: 6px; }
  .mod-body { padding: 16px var(--body-inset) 20px; }

  /* the label owns its own line. Sharing one with the value wrapped "Line credit" around it:
     LINE $0.00 [FREE OFF] / CREDIT (his note, 2026-10-06) */
  .leaders li { display: grid; grid-template-columns: minmax(24px, 1fr) auto auto; gap: 4px 10px; padding: 10px 0; align-items: baseline; }
  .leaders li > span:first-child { grid-row: 1; grid-column: 1 / -1; }
  .leaders .lead { grid-row: 2; grid-column: 1; transform: translateY(-4px); margin-top: 0; }
  .leaders .val { grid-row: 2; grid-column: 2; }
  .leaders .st { grid-row: 2; grid-column: 3; }

  /* on the phone a line reads down, not across: lamp and number, the business, then its state */
  .row, .row-head { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; padding: 16px 24px; }
  .row .who { grid-column: 2; grid-row: 1; }
  .row .what { grid-column: 2; grid-row: 2; font-size: 17px; }
  .row .tag { grid-column: 2; grid-row: 3; }
  .row .clock { grid-column: 2; grid-row: 4; font-size: 18px; }
  .row .meter { display: none; }
  /* a free jack says one thing on a phone: twelve four line rows is a long scroll for nothing */
  .row.free { padding: 12px 24px; }
  .row.free .tag, .row.free .clock { display: none; }
  .row.free .what { grid-row: 1; grid-column: 2; justify-self: end; font-size: 16px; }
  .row.free .who { grid-row: 1; grid-column: 2; justify-self: start; }
  .row .bkey { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin-top: 6px; }
  .row-head { display: none; }

  /* stacked, the bus runs down the middle of the module instead of across it */
  .bus { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bus-link { height: 30px; justify-self: center; width: 2px; }
  .bus-link::before { left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 2px; margin-left: -1px; }
  .bus-link::after { left: 50%; top: 0; bottom: 0; }
  .bus-out .bus-cell::before, .bus-out .bus-cell::after { display: none; }
  .bus-cell { padding: 14px 30px; }

  .band { height: 96px; }
  /* four marks instead of six: at this width the last one would touch the module edge */
  .band-axis { font-size: 16px; }
  .steps { grid-template-columns: repeat(12, 1fr); }
  .talk .turn { grid-template-columns: 1fr; gap: 4px; }
  .picks { gap: 8px; }
  .pick { padding: 10px 16px; }

  /* the shelf stays the object it is, stacked: the keys, the headset, then the outside line */
  .shelf { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px var(--field-pad) 24px; }
  .rack { gap: 18px; }
  .hook { width: 132px; }
  .keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* five keys over two columns: the last one takes the whole row, so no half row is left open */
  .keys .key:last-child { grid-column: 1 / -1; }
  .key { min-width: 0; }
  .key-body { min-height: 62px; border-width: 18px; border-image-width: 18px; font-size: 17px; padding: 8px 10px; white-space: normal; }
  .terminal { border-width: 18px; border-image-width: 18px; }
  .terminal-title { padding: 10px 20px; font-size: 16px; }
  .terminal-body { padding: 16px 18px 20px; }
  .mint { font-size: 18px; }
  .terminal-keys { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bkey { font-size: 16px; padding: 0 26px; gap: 10px; letter-spacing: 0.02em; }
  .bkey img { width: 22px; height: 22px; }
  .sheet { padding: 12px; }
  .sheet-body { padding: 18px var(--body-inset) 22px; }
}

@media (max-width: 360px) {
  /* at 320 a template key is 156 px wide: let the sentence break and give the plate a thinner lip */
  .pick { border-width: 14px; border-image-width: 14px; padding: 10px 14px; }
  .pick small, .pick span { overflow-wrap: anywhere; }
  .leaders .val { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  :root { --field-pad: 20px; --body-inset: 20px; }
  .lampstrip .lamp:nth-child(n + 7) { display: none; }
  /* at 320 the waiting line is 133 px of a 128 px box: it comes down a step rather than breaking */
  .mint.empty-state { font-size: 17px; letter-spacing: 0.06em; }
  .wordmark { width: min(230px, 66vw); }
  .bus-cell { padding: 14px 24px; }
  .bus-cell .v { font-size: 22px; }
  .bus-cell .k, .bus-cell .v { overflow-wrap: anywhere; }
}

/* -------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .room-loop { display: none; }
  * { animation: none !important; transition: none !important; }
}