/* GPT Everything. One videotex research terminal.
   Every colour here was measured off art/ref/terminal.jpg with site/tools/refmeasure*.mjs:
   the body #131417 (32.1% of his frame), the phosphor field #52534a, the ink core #b2f7fc with a
   #5f9ece bloom (5.45% ink), the key legends #de4823, the tape #eb4128.
   The field is grey olive, not black, because his is. */

:root {
  /* the machine */
  --body: #131417;
  --body-lift: #1d1f23;
  --ground: #0a0b0d;

  /* The glass. His measured field is #52534a, but that is a photograph of a lit tube whose ink
     is blown out to white; at that lightness no ink on it clears 4.5:1 except pure paper. The
     field is set a third of a stop under it, with the same olive, and the tube's own lift in
     the middle. Every ink below was then measured on the real composited pixels by
     tools/audit.mjs, which samples the surface off a frame with every glyph hidden. */
  --field: #343528;
  --field-mid: #3e3f32;
  --field-edge: #292a20;

  /* One ink in four steps. On a field this light hierarchy is scale and weight, not dimming,
     which is exactly how his picture works: everything on his glass is near white. */
  --ink: #f2ffff;        /* values, the display word */
  --ink-2: #ddf2f5;      /* reading text */
  --ink-3: #c3d8da;      /* labels */
  --ink-mute: #bfd2d1;   /* separators, and a reading that does not exist yet */
  --glow: #5f9ece;

  /* the hardware */
  --legend: #ff9663;     /* the lit key legend. His measured mean is #de4823, but that is the AVERAGE of a photographed legend including its antialiasing; the ink is lifted along the same hue until it clears 4.5:1 on the lit cap, which is the one surface on this machine that fights it */
  --legend-off: #f7fafb; /* a key that is not lit still has to be read */
  --readout: #e8f0f2;    /* the countdown: orange belongs on hardware, not on a reading */
  --tape: #eb4128;
  --engraved: #101316;       /* stamped into the brushed plate, which is light metal */
  --engraved-dim: #262b2f;
  --tape-ink: #050302;

  /* one spacing scale, nothing off it */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* one type scale, nothing off it. Dark theme floor: 14px (mono), values 16-24, one display. */
  --t-label: 14px;
  --t-body: 15px;
  --t-value: 17px;
  --t-big: 24px;
  --t-display: 64px;

  --slab: "Bespoke Slab", Georgia, serif;
  --mono: "Monaspace Xenon", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --page: 1120px;
  --gap: 24px;
  --rail: clamp(300px, 32%, 396px);
  --ring-w: 28px;
  --ring-side: 48px;

  --fast: 0.08s;
  --quick: 0.16s;
}

@font-face { font-family: "Bespoke Slab"; src: url("/fonts/BespokeSlab-Extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Bespoke Slab"; src: url("/fonts/BespokeSlab-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bespoke Slab"; src: url("/fonts/BespokeSlab-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Xenon"; src: url("/fonts/MonaspaceXenon-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Monaspace Xenon"; src: url("/fonts/MonaspaceXenon-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);

  color: var(--ink-2);
  font: 500 var(--t-body)/1.6 var(--mono);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s7) var(--s5);
}

/* ---------------------------------------------------------------- the room behind it */

/* His background rule: more of the world, blurred and alive, on its own clock, never the
   pointer's. One out of focus equipment room, drifting very slowly, with the lamps breathing. */
.room {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #06070a;
}
.room__plate {
  position: absolute; inset: -6%;
  background: url("/img/room.webp") center / cover no-repeat;
  opacity: 0.8;
  animation: drift 96s ease-in-out infinite alternate, breathe 17s ease-in-out infinite;
  will-change: transform;
}
.room::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(86% 72% at 50% 46%, rgba(6,7,10,0.04) 0%, rgba(6,7,10,0.5) 64%, rgba(4,5,7,0.86) 100%);
}
@keyframes drift { from { transform: translate3d(-1.4%, 0.8%, 0) scale(1.04); } to { transform: translate3d(1.4%, -0.8%, 0) scale(1.08); } }
@keyframes breathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.92; } }

/* ---------------------------------------------------------------- the machine */

.machine { position: relative; z-index: 1; width: min(var(--page), 100%); }

/* one moulded body: the glass aperture and the keypad well are both cut into it */
.machine__face {
  position: relative;
  isolation: isolate;
  padding: var(--s5);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.72));
}
.machine__face::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 30px solid transparent;
  border-image: url("/img/panel.webp") 64 fill / 30px / 0 stretch;
}

.machine__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: var(--gap);
  align-items: stretch;      /* the control object is full height beside the scene */
}

/* ---------------------------------------------------------------- the glass */

/* The glass is a window of a fixed size and the transmission scrolls BEHIND it, the way a
   terminal works. Without a definite height a long channel stretches the tube to 1000 px and
   pulls the keypad's rows apart with it. A grid item sizes to its content unless it is told
   not to, so min-height: 0 is load bearing here. */
.glass {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: clamp(500px, calc(100dvh - 206px), 664px);
  border: var(--ring-w) solid transparent;
  border-left-width: var(--ring-side);
  border-right-width: var(--ring-side);
  /* the moulding of his aperture, nine sliced on its measured ring:
     source ring 130 / 223 / 132 / 224 inside an outer of 1480 x 1000 (tools/ringmeasure.mjs).
     Both ratios are 4.64, so the corners keep their shape. */
  border-image: url("/img/ring.webp") 127 224 132 224 / var(--ring-w) var(--ring-side) var(--ring-w) var(--ring-side) / 0 stretch;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  isolation: isolate;
}

.glass__phosphor,
.glass__ghost,
.glass__scan,
.glass__roll { position: absolute; inset: 0; pointer-events: none; }

.glass__phosphor {
  background:
    radial-gradient(132% 124% at 50% 40%, var(--field-mid) 0%, var(--field) 58%, var(--field-edge) 100%);
}
.glass__phosphor::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("/img/grain.webp");
  background-size: 180px 180px;
  opacity: 0.1;
  mix-blend-mode: overlay;
}

/* yesterday, burned into the phosphor */
.glass__ghost {
  display: grid; place-items: center;
  font: 800 clamp(64px, 13vw, 150px)/1 var(--slab);
  letter-spacing: 0.04em;
  color: #ffffff;
  opacity: 0.032;
  overflow: hidden;
  transform: translate(2%, -4%);
}

/* his even ruling, under the ink, never over it */
.glass__scan {
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.045) 0 1px, rgba(0,0,0,0.085) 1px 4px);
}
.glass__roll {
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.05) 42%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.05) 58%, transparent 100%);
  height: 180px; inset: auto 0 auto 0;
  animation: roll 9s linear infinite;
}
@keyframes roll { from { transform: translateY(-190px); } to { transform: translateY(600px); } }

/* the inner lip of the moulding, drawn on the glass side */
.glass__ring {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.5), inset 0 2px 18px rgba(0,0,0,0.42);
}

.screen {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--s5) var(--s5) var(--s4);   /* inner padding: no reading sits near the lip */
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  overflow: hidden;
}

/* every reading on the glass is lit phosphor */
.screen, .screen * { text-shadow: 0 0 10px rgba(95, 158, 206, 0.55), 0 0 2px rgba(174, 231, 244, 0.5); }
.screen .nolit, .screen .nolit * { text-shadow: none; }

/* ---------------------------------------------------------------- the channel head */

.chead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex: none; }
.chead__name { font: 700 var(--t-label)/1.2 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.chead__note { font: 500 var(--t-label)/1.2 var(--mono); color: var(--ink-mute); }

.cbody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--s4); }

/* ---------------------------------------------------------------- today */

/* The name gets the whole glass; the echo column sits beside the spec rows, not beside the
   name, or a long word of the day breaks across two lines. */
.today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s3) var(--s5);
  flex: 1 1 auto; min-height: 0;
}
.today .model { grid-column: 1 / -1; }
/* the card scrolls inside the glass when the rows do not fit, or the last row runs straight
   into the stamp line underneath it, which at 1024 it did */
.today .spec { grid-column: 1; grid-row: 2; align-content: start; min-height: 0; overflow: auto; padding-right: var(--s2); scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.42) transparent; }
.today .spec::-webkit-scrollbar { width: 8px; }
.today .spec::-webkit-scrollbar-track { background: transparent; }
.today .spec::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); }
.today .spec::-webkit-scrollbar-button { display: none; }
.today__side { grid-column: 2; grid-row: 2; }
.today .stamp { grid-column: 1 / -1; grid-row: 3; }
.today__main { display: contents; }

.model { display: flex; flex-direction: column; gap: var(--s1); }
.model__name {
  margin: 0;
  font: 800 var(--t-display)/1.02 var(--slab);
  letter-spacing: 0.005em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-shadow: 0 0 26px rgba(95,158,206,0.5), 0 0 6px rgba(174,231,244,0.45);
}
.model__motto { margin: 0; font: 500 var(--t-value)/1.45 var(--slab); color: var(--ink-2); }

.spec { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: baseline; }
.spec__k { font: 700 var(--t-label)/1.5 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.spec__v { font: 500 var(--t-body)/1.5 var(--mono); color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }

.stamp { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: auto; padding-top: var(--s3); position: relative; }
.stamp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-mute); opacity: 0.4; }
.stamp__cell { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.stamp__k { font: 700 var(--t-label)/1.5 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.stamp__v { font: 500 var(--t-label)/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }

/* his stepped echo, and it is the archive */
.echoes { display: flex; flex-direction: column; gap: var(--s1); align-items: flex-end; min-width: 0; }
.echoes__k { font: 700 var(--t-label)/1.4 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s1); }
.echo {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 500 var(--t-label)/1.5 var(--mono);
  color: var(--ink-2);
  padding: 2px var(--s1);
  text-align: right;
  display: block;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--quick), transform var(--fast);
}
.echo:nth-child(2) { margin-right: 0; }
.echo:nth-child(3) { margin-right: 8px; }
.echo:nth-child(4) { margin-right: 16px; }
.echo:nth-child(5) { margin-right: 24px; }
.echo:nth-child(6) { margin-right: 32px; }
.echo:hover, .echo:focus-visible { color: var(--ink); transform: translateX(-3px); }

/* ---------------------------------------------------------------- the race table */

.rows { display: flex; flex-direction: column; gap: 2px; overflow: auto; min-height: 0; padding-right: var(--s1); scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.42) transparent; }
.rows::-webkit-scrollbar { width: 8px; }
.rows::-webkit-scrollbar-track { background: transparent; }
.rows::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.35); border-radius: 4px; }
.rows::-webkit-scrollbar-button { display: none; }

.row { display: grid; grid-template-columns: 52px minmax(0,1fr) 150px 86px; gap: var(--s3); align-items: center; padding: var(--s1) 0; position: relative; }
.row + .row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink-mute); opacity: 0.22; }
.row__n { font: 500 var(--t-label)/1.5 var(--mono); color: var(--ink-3); }
.row__w { font: 700 var(--t-value)/1.35 var(--slab); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__bar { height: 8px; background: rgba(0,0,0,0.3); position: relative; }
.row__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink-2); box-shadow: 0 0 8px rgba(95,158,206,0.7); }
.row__g { font: 700 var(--t-value)/1.35 var(--mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.row--head .row__n, .row--head .row__w, .row--head .row__g, .row--head .row__bar { font: 700 var(--t-label)/1.5 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); background: none; box-shadow: none; height: auto; }
.row--mine { outline: 1px solid var(--ink-mute); outline-offset: 2px; }

/* ---------------------------------------------------------------- prose on the glass */

.prose { display: flex; flex-direction: column; gap: var(--s3); overflow: auto; min-height: 0; padding-right: var(--s3); scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.42) transparent; }
.prose p { margin: 0; font: 500 var(--t-body)/1.6 var(--mono); color: var(--ink-2); max-width: 62ch; }
.prose h3 { margin: var(--s2) 0 0; font: 700 var(--t-label)/1.4 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.prose code { font: 700 var(--t-body)/1.6 var(--mono); color: var(--ink); }
.prose::-webkit-scrollbar, .today .spec::-webkit-scrollbar { width: 8px; }
.prose::-webkit-scrollbar-track, .today .spec::-webkit-scrollbar-track { background: transparent; }
.prose::-webkit-scrollbar-thumb, .today .spec::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.42); }
.prose::-webkit-scrollbar-button, .today .spec::-webkit-scrollbar-button { display: none; }

.wordlist { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; padding: 0; list-style: none; }
.wordlist li { font: 500 var(--t-label)/1.5 var(--mono); color: var(--ink-2); }
.wordlist li::after { content: "\00b7"; margin-left: var(--s2); color: var(--ink-mute); }
.wordlist li:last-child::after { content: ""; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }
.step { display: flex; flex-direction: column; gap: var(--s1); }
.step__n { font: 800 var(--t-big)/1 var(--slab); color: var(--ink); }
.step__t { font: 700 var(--t-label)/1.4 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.step__p { margin: 0; font: 500 var(--t-label)/1.5 var(--mono); color: var(--ink-2); }

/* ---------------------------------------------------------------- the stake channel */

.stake { display: flex; flex-direction: column; gap: var(--s4); flex: 1 1 auto; min-height: 0; }
.entry { display: flex; align-items: center; gap: var(--s4); min-height: 80px; }
.entry__k { font: 700 var(--t-label)/1.4 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); flex: none; }
/* the field IS the display word: no box of its own, the caret is the machine's */
.entry__w {
  flex: 1 1 auto; min-width: 0; width: 100%;
  appearance: none; border: 0; background: none; outline: none;
  padding: var(--s2) 0;
  font: 800 52px/1.1 var(--slab);
  color: var(--ink);
  caret-color: var(--ink);
}
.entry__w::placeholder { color: var(--ink-mute); opacity: 1; }
.entry__w:focus-visible { box-shadow: 0 2px 0 0 var(--ink); }
.entry__hint { font: 500 var(--t-label)/1.5 var(--mono); color: var(--ink-mute); margin: 0; }

.stakestate { display: flex; flex-direction: column; gap: var(--s2); }
.weekboard { display: flex; flex-direction: column; gap: var(--s2); margin-top: auto; min-height: 0; }
.weekboard .chead__name { margin: 0; }

/* ---------------------------------------------------------------- the keypad */

.pad {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  border-style: solid; border-color: transparent; border-width: 26px 18px 14px 18px;
  border-image: url("/img/padplate.webp") 175 121 92 120 fill / 26px 18px 14px 18px / 0 stretch;
  min-width: 0;
}

.pad__channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pad__letters { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: 46px; gap: 5px; flex: none; }
.pad__meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.pad__grille { height: 20px; background: url("/img/grille.webp") center / auto 100% repeat-x; opacity: 0.9; flex: none; margin: auto 0; }
.pad__plate { flex: none; }

/* One key, used for every key on this machine. The cap is a nine slice on ::before rather
   than on the border, because a 14 px border on a 46 px key leaves an 18 px content box and
   every legend then physically sits outside its own box. */
.key {
  appearance: none;
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  min-height: 46px;
  /* The cap is bright in two places: a sheen along its top edge and the chrome crescent across
     its lower quarter, and both are near white. A legend on either measures under 3:1 whatever
     colour it is, so the content sits in the plain plastic between them, which is exactly the
     14 px nine slice band at each end. */
  padding: 13px var(--s2);
  border: 0;
  background: none;
  color: var(--legend-off);
  font: 700 var(--t-label)/1.1 var(--slab);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fast), filter var(--quick), color var(--quick);
}
.key::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border: 11px solid transparent;
  border-image: url("/img/keycap.webp") 108 fill / 11px / 0 stretch;
}
.key:hover:not(:disabled) { filter: brightness(1.3); }
.key:active:not(:disabled) { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.key:disabled { cursor: default; opacity: 0.74; }

.key[aria-pressed="true"], .key.is-lit { color: var(--legend); }
.key[aria-pressed="true"]::before, .key.is-lit::before { border-image-source: url("/img/keycap-lit.webp"); }

.key__n { font: 700 var(--t-label)/1 var(--mono); color: inherit; opacity: 0.92; }
.key__w { font: 700 var(--t-label)/1 var(--slab); letter-spacing: 0.08em; }

.key--chan { min-height: 62px; padding: 14px var(--s2) 18px; }
.key--letter { min-height: 44px; padding: 13px 2px; }
.key--copy { min-height: 48px; flex: none; padding: 14px var(--s4); }
.key--mark { min-height: 46px; padding: 12px 4px; }
.key--mark img { display: block; width: 20px; height: 20px; object-fit: contain; }

/* the countdown, drawn as the machine's own falling slider */
.meter { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: baseline; }
.meter__label { font: 700 var(--t-label)/1.3 var(--slab); letter-spacing: 0.08em; text-transform: uppercase; color: var(--legend-off); min-width: 0; }
.meter__value { font: 700 var(--t-big)/1.1 var(--mono); color: var(--readout); font-variant-numeric: tabular-nums; }
.meter__track { height: 8px; background: #08090b; box-shadow: inset 0 1px 2px rgba(0,0,0,0.9); overflow: hidden; }
.meter__fill { height: 100%; width: 0%; background: var(--legend); box-shadow: 0 0 10px rgba(240,92,42,0.6); transition: width 1s linear; }

.lamp { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 56px; }
.lamp__dot { width: 11px; height: 11px; border-radius: 50%; background: #3b4440; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08); }
.lamp.is-on .lamp__dot { background: #6df0a6; box-shadow: 0 0 10px rgba(109,240,166,0.75); }
.lamp__word { font: 700 var(--t-label)/1 var(--slab); letter-spacing: 0.08em; text-transform: uppercase; color: var(--legend-off); }

/* The maker's plate, where his machine prints its maker's word. A 44 character mint cannot
   share a line with a label and a key, so the plate is three rows, not one. */
.plate {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4) var(--s5);
}
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 16px solid transparent;
  border-image: url("/img/plate.webp") 70 fill / 16px / 0 stretch;
}
.plate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center; min-width: 0; }
.plate__label { grid-column: 1 / -1; font: 700 var(--t-label)/1.3 var(--slab); letter-spacing: 0.1em; text-transform: uppercase; color: var(--engraved); }
.plate__ca {
  min-width: 0;
  font: 500 var(--t-label)/1.45 var(--mono);
  color: var(--engraved);
  overflow-wrap: anywhere;
  user-select: all;
}
.plate__ca[data-empty="1"] { color: var(--engraved-dim); user-select: none; }
.plate__marks { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s2); }

/* ---------------------------------------------------------------- the tape */

.tape {
  position: absolute;
  left: calc(var(--s5) + var(--s7));
  bottom: calc(var(--s2) * -1);
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 14px var(--s5);   /* 0.5 em of the 24 px figure on it, which is what the checker asks */
  background: var(--tape);
  background-image: url("/img/tape.webp");
  background-size: 100% 100%;
  color: var(--tape-ink);
  transform: rotate(-1.1deg);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  z-index: 4;
}
.tape__k { font: 700 var(--t-label)/1.2 var(--slab); letter-spacing: 0.08em; text-transform: uppercase; }
.tape__v { font: 800 var(--t-big)/1.1 var(--slab); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%) translateY(12px);
  padding: var(--s3) var(--s5);
  background: #e9f7fb; color: #11161a;
  font: 700 var(--t-label)/1.3 var(--slab); letter-spacing: 0.06em;
  opacity: 0; pointer-events: none;
  transition: opacity var(--quick), transform var(--quick);
  z-index: 20;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- states */

.empty { font: 500 var(--t-body)/1.6 var(--mono); color: var(--ink-mute); margin: 0; }
/* a note AFTER a list closes the screen at its foot; a note that IS the whole screen is
   centred in the glass, because pinning it to the bottom opens a 400 px hole above it */
.rows + .empty, .prose + .empty, .rows ~ .wire { margin-top: auto; }
.cbody > .empty:first-child { margin-top: auto; }
.cbody > .empty:first-child ~ .wire:last-child { margin-bottom: auto; }
.cbody > .empty:only-child { margin: auto 0; }
.wire { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

.btn {
  appearance: none; cursor: pointer;
  min-height: 46px; padding: 0 var(--s5);
  border: 0;
  background: var(--ink-2);
  color: #13171a;
  font: 700 var(--t-label)/1 var(--slab); letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--fast), background var(--quick);
  text-shadow: none;
}
.btn:hover:not(:disabled) { background: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: default; opacity: 0.74; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- phone: his own portrait arrangement */

@media (min-width: 1001px) and (max-height: 860px) {
  body { padding: var(--s5) var(--s5) var(--s6); }
  .machine__face { padding: var(--s4); }
  .machine__face::before { border-width: 22px; border-image-width: 22px; }
  .pad { padding: var(--s3); }
  .screen { padding: var(--s4) var(--s4) var(--s3); }
  .glass { height: clamp(430px, calc(100dvh - 170px), 664px); }
  .pad__letters { grid-auto-rows: 42px; }
  .key--chan { min-height: 58px; padding: 12px var(--s2) 16px; }
  .plate { padding: var(--s3) var(--s4); gap: var(--s2); }
}

@media (max-width: 1000px) {
  body { padding: var(--s5) var(--s4) var(--s7); align-items: flex-start; }
  .machine__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* On the phone the glass is not a fixed window: the PAGE is the scroll, so the tube grows
     with its message instead of cutting it off. Keeping the desktop clamp here cut the foot of
     the card off at 390 by 73 px, silently, because the screen hides its overflow. */
  .glass { height: auto; min-height: 420px; border-width: 20px; border-left-width: 26px; border-right-width: 26px;
           border-image-width: 20px 26px 20px 26px; }
  .screen { padding: var(--s4) var(--s4) var(--s3); gap: var(--s3); overflow: visible; }
  .rows, .prose { overflow: visible; }
  .cbody { min-height: 0; }
  /* the phone is his own portrait arrangement: one column, the echo row under the name */
  .today { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--s4); }
  .today .model, .today .spec, .today__side, .today .stamp { grid-column: 1; grid-row: auto; }
  .today__side { order: 2; }
  .today .spec { order: 3; }
  .today .stamp { order: 4; }
  .echoes { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .echo { margin-right: 0 !important; text-align: left; }
  .echoes__k { margin-bottom: 0; }
  /* a 130 px value column turns every sentence into a tower: on the phone the label
     sits above its value and the pair gets the whole width */
  .spec { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spec__k { margin-top: var(--s3); }
  .spec__k:first-child { margin-top: 0; }
  .meter { grid-template-columns: minmax(0, 1fr); }
  .key--letter { padding: var(--s1) 0; letter-spacing: 0.02em; }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* under 520 px a four column table cannot hold a nine letter word: the row becomes two
     lines, the word on its own, the figures under it */
  .row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 2px; column-gap: var(--s2);
    padding: var(--s2) 0;
  }
  .row__n { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .row__w { grid-column: 2 / -1; grid-row: 1; }
  .row__bar { grid-column: 2; grid-row: 2; align-self: center; }
  .row__g { grid-column: 3; grid-row: 2; }
  .tape { position: static; transform: rotate(-0.8deg); align-self: flex-start; margin-top: var(--s2); }
  :root { --t-display: 44px; --rail: auto; }
}

@media (max-width: 400px) {
  :root { --t-display: 38px; }
  .pad__letters { gap: 4px; }
  .steps { grid-template-columns: minmax(0,1fr); }
  /* the machine's own chrome gives way before the content does */
  body { padding: var(--s4) var(--s3) var(--s6); }
  .machine__face { padding: var(--s3); }
  .machine__face::before { border-width: 18px; border-image-width: 18px; }
  .pad { padding: var(--s4) var(--s4) var(--s3); border-width: 20px 14px 11px 14px; border-image-width: 20px 14px 11px 14px; }
  .glass { border-width: 15px; border-left-width: 20px; border-right-width: 20px; border-image-width: 15px 20px 15px 20px; }
  .screen { padding: var(--s3); }
  .entry__w { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  /* the world holds still, and it still READS: nothing is hidden, only stopped */
  .glass__roll { animation: none; opacity: 0.4; }
  .room__plate { animation: none; opacity: 0.74; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}