/* Adulting Index 500. The page is the front of a shared flat fridge: a pale enamel door edge to
   edge, one dark exam display set into it, and the appliance's console along its foot. Three bands,
   10.4 / 75.5 / 14.2 of the height, measured off his reference (NOTE.md > Reference teardown).

   Every surface here is a real PNG drawn by tools/art.mjs: the frames are nine sliced plates with a
   see through middle, and the material behind them is a tile at 1:1. No SVG, no CSS rectangle
   standing in for an object.

   TWO FACES (his note 2026-11-03): Dot carries the marks, the heads, the keys and the figures; Chit
   carries every word and every value; the marker lives inside the task note and nowhere else.
   ONE TYPE SCALE: 16 / 20 / 24 / 32 / 48, with 64 for the single display line of a page.
   ONE SPACING SCALE: 4 / 8 / 12 / 16 / 24 / 32 / 48. Nothing off the scale is set anywhere below.
   A nine sliced frame is sliced at the size it was DRAWN at (panel 20, plate 26, display 28, key 34,
   note 14, receipt 12, cell 12), or its corner marks get stretched into the edge bands. */

@font-face { font-family: "Dot"; src: url(/font/dotgothic16-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chit"; src: url(/font/courierprime-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chit"; src: url(/font/courierprime-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Marker"; src: url(/font/gochihand-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* the brief's kitchen palette */
  --enamel: #f2f2ee;
  --enamel-shade: #e2e2da;
  --enamel-deep: #c9c9bf;
  --enamel-line: #b4b4a9;
  --ink: #222222;
  --ink-soft: #44443e;
  --glass: #141410;
  --glass-up: #1e1e18;
  --paper: #ededE7;
  /* every secondary word on the glass: 9.9:1 on the panels, 12.4:1 on the display (his note: the
     grey captions sat under the floor) */
  --paper-dim: #c8c8c0;
  --rule: #3b3b33;
  --steel: #b8b8b0;
  --tomato: #e4572e;
  --tomato-ink: #a3331a;   /* the same red, deep enough to read on an enamel key cap: 5.3:1 */
  --lemon: #f3c623;
  --sky: #4fb0c6;
  --grass: #7bb661;
  --gold: #e8b339;

  /* one type scale */
  --t-display: 88px;   /* the one big line of a page: the glyph share his picture sets, 2.46% of the
                          width. The single size that is not on the 16 / 20 / 24 / 32 / 48 scale. */
  --t-32: 32px;        /* a figure: an index, a mark, a weight */
  --t-24: 24px;        /* a head, a key, a button */
  --t-20: 20px;        /* a small head, a serial, a number in a chip */
  --t-16: 16px;        /* every word and every label. nothing is smaller anywhere */

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

  --band-top: 88px;
  --band-foot: 152px;
  --edge: 48px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  background: var(--enamel) url(/img/enamel-01.png) repeat;
  color: var(--ink);
  font-family: Chit, "Courier New", monospace;
  font-size: var(--t-16);
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 3px solid var(--tomato); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- the door */
.fascia {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
/* the light of the kitchen window, drifting across the enamel on its own clock */
.fascia::after {
  content: "";
  position: fixed;
  inset: -20% -40%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.2) 54%, transparent 66%);
  animation: sheen 54s linear infinite;
}
@keyframes sheen { from { transform: translate3d(-22%, 0, 0); } to { transform: translate3d(22%, 0, 0); } }

/* ----------------------------------------------------------------- band 1: the top rail */
.rail {
  flex: none;
  min-height: var(--band-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding: 0 var(--edge) var(--s3);
  position: relative;
}
.rail::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: url(/img/seam-01.png) repeat-x;
}
.badge { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.badge img { width: 62px; height: 62px; display: block; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.14)); }
.badge-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); }
.wordmark {
  font-family: Dot, monospace;
  font-size: var(--t-32);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ticker {
  font-family: Dot, monospace;
  font-size: var(--t-20);
  line-height: 1.2;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--ink);
  line-height: 1.4;
  padding: var(--s3) var(--s5);
}
.badge-sub { font-size: var(--t-16); color: var(--ink-soft); }

.readouts { display: flex; gap: var(--s4); }
.cell {
  border: 12px solid transparent;
  border-image: url(/img/cell-01.png) 12 / 12px / 0 stretch;
  background: var(--glass) url(/img/grain-glass-01.png) repeat;
  padding: var(--s3) var(--s5);
  min-width: 182px;
  display: flex;
  flex-direction: column;
}
.cell-label {
  font-size: var(--t-16);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.cell-value {
  font-family: Dot, monospace;
  font-size: var(--t-24);
  line-height: 1.3;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-value .unit { font-family: Chit, monospace; font-size: var(--t-16); color: var(--paper-dim); margin-left: var(--s2); }

/* ----------------------------------------------------------------- band 2: the display */
.field { flex: 1 1 auto; min-height: 680px; padding: 0 var(--edge); display: flex; }
.display {
  flex: 1 1 auto;
  min-width: 0;
  border: 28px solid transparent;
  border-image: url(/img/display-01.png) 28 / 28px / 0 stretch;
  background: var(--glass) url(/img/grain-glass-01.png) repeat;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  position: relative;
}
/* the glass of a cold display: one slow bloom, no scanline noise over the words */
.display::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.07), transparent 60%);
}
/* the two regions of the display. The grid row takes the taller of them, so the columns always end
   on the same line, and NOTHING is clipped: the display grows with its content and the page scrolls
   (his note: the cards and the right panel were cut off by the bottom edge). */
.display-in {
  min-height: 100%;
  display: grid;
  grid-template-columns: 58.2% minmax(0, 1fr);
  gap: var(--s6);
  padding: var(--s5);
  color: var(--paper);
}
.view { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.view > * { flex: none; }
.stack { display: grid; grid-template-rows: auto minmax(min-content, 1fr); gap: var(--s4); min-width: 0; }

/* a framed panel inside the display: sliced at 20, the size its corner marks were drawn at */
.panel {
  border: 16px solid transparent;
  border-image: url(/img/panel-01.png) 20 / 16px / 0 stretch;
  background: var(--glass-up);
  padding: var(--s3) var(--s5);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.panel-head {
  margin-bottom: var(--s3);
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-family: Dot, monospace;
  font-size: var(--t-24);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.panel-head .note {
  font-family: Chit, monospace; font-size: var(--t-16); line-height: 1.3;
  letter-spacing: 0.08em; color: var(--paper-dim); text-transform: uppercase;
}

/* the exam headline, the one big thing on the display, his reference's title block */
.exam-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.exam-no {
  font-family: Dot, monospace;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.exam-state {
  font-size: var(--t-16); line-height: 1.4; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper-dim); margin-top: var(--s2);
}

/* ----------------------------------------------------------------- the task note
   The note is the whole width of the region and carries three things in one frame: the stamp of the
   kind, the task in marker, and (on the door) the object of that kind printed on the same paper.
   Nothing floats beside it any more and the object is a cell of this grid (his note 2026-11-03). */
.note-paper {
  border: 14px solid transparent;
  border-image: url(/img/note-01.png) 14 / 14px / 0 stretch;
  background: #fbfbf4 url(/img/grain-warm-01.png) repeat;
  color: var(--ink);
  padding: var(--s4) var(--s5) var(--s5);
  position: relative;
  transform: rotate(-0.5deg);
  filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.18));
}
.note-paper::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -17px; height: 18px;
  background: url(/img/tear-01.png) repeat-x;
}
.note-paper .marker { font-family: Marker, cursive; font-size: var(--t-24); line-height: 1.4; }
.note-paper .by { font-size: var(--t-16); color: var(--ink-soft); margin-top: var(--s3); }
.note-pin { position: absolute; width: 48px; height: 48px; top: -24px; right: var(--s5); z-index: 2; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.16)); }
.note-stamp {
  font-family: Dot, monospace; font-size: var(--t-20); line-height: 1.4; letter-spacing: 0.08em;
  color: var(--paper); background: var(--ink); padding: var(--s3) var(--s5);
  display: inline-block; margin-bottom: var(--s3);
}
/* with the object: two cells of one paper, the text left, the print right */
.note-paper.with-object { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 34%); gap: var(--s5); align-items: center; }
.note-cell { min-width: 0; }
.exam-object { min-width: 0; display: flex; align-items: center; justify-content: center; }
.exam-object img { width: 100%; max-width: 240px; height: auto; display: block; image-rendering: pixelated; }

/* ----------------------------------------------------------------- the index rows
   One grid for every row: the star, the name and its bar, then a fixed figure column, so the bars
   all end on the same line and the figures sit in one column (his note: they did not line up). */
.model {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 120px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s1) 0;
}
.rowrule { height: 2px; background: var(--rule); }
.model img.star { width: 40px; height: 40px; display: block; }
.model-cell { min-width: 0; }
.model-name { font-size: var(--t-16); font-weight: 700; color: var(--paper); line-height: 1.3; }
.model-lab { font-size: var(--t-16); color: var(--paper-dim); line-height: 1.4; }
.model-bar { height: 12px; background: var(--rule); margin-top: var(--s1); }
/* a bar at zero still prints its notch, so a row is never an empty trough */
.model-bar span { display: block; height: 100%; min-width: 4px; }
.model-index {
  font-family: Dot, monospace;
  display: flex; align-items: baseline; justify-content: flex-end; gap: var(--s1);
  font-size: var(--t-32);
  line-height: 1.1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.model-index .of { font-family: Dot, monospace; font-size: var(--t-20); line-height: 1.1; color: var(--paper-dim); }

/* ----------------------------------------------------------------- the lab cards (receipts)
   Four cards of one height, each a thermal slip. A value NEVER wraps: the label holds a fixed
   column and the figure is one unbroken line (his note: "budget 0.200 0"). */
.chits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: stretch; }
.chit {
  position: relative;
  border: 12px solid transparent;
  border-image: url(/img/receipt-01.png) 12 / 12px / 0 stretch;
  background: var(--paper) url(/img/grain-paper-01.png) repeat;
  color: var(--ink);
  font-size: var(--t-16);
  line-height: 1.5;
  padding: var(--s3) var(--s4);
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.chit::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -15px; height: 16px;
  background: url(/img/tear-receipt-01.png) repeat-x;
}
/* the lab's disc sits INSIDE the card, on the line of its name, one size on every card */
.chit-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.chit-head img { width: 24px; height: 24px; display: block; flex: none; }
.chit-head b { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.chit b { font-weight: 700; }
.chit .rule { border-top: 1px dashed #8d8d85; margin: var(--s2) 0; }
.chit .row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.chit .row span:first-child { color: var(--ink-soft); }
.chit .row span:last-child { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chit .muted { color: var(--ink-soft); }
.chit a { text-decoration: underline; word-break: break-all; }
.chit a:hover { background: var(--lemon); }
.chit .line { opacity: 0; animation: print .18s steps(1) forwards; }
@keyframes print { to { opacity: 1; } }

/* ----------------------------------------------------------------- the queue */
.queue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px auto;
  align-items: center;
  gap: var(--s4);
  background: var(--glass-up);
  border-left: 6px solid var(--paper);
  padding: var(--s3) var(--s4);
}
.queue-row + .queue-row { margin-top: var(--s2); }
.queue-row p { font-size: var(--t-16); color: var(--paper); line-height: 1.4; }
.queue-row .kind {
  font-family: Dot, monospace; font-size: var(--t-16); letter-spacing: 0.08em;
  color: var(--glass); background: var(--paper-dim); padding: var(--s2) var(--s4); margin-right: var(--s2);
}
.meter { height: 16px; background: var(--rule); position: relative; }
.meter span { display: block; height: 100%; min-width: 4px; background: var(--grass); }
.meter em {
  position: absolute; right: 0; top: -24px; font-style: normal;
  font-size: var(--t-16); line-height: 1.4; color: var(--paper-dim); white-space: nowrap;
}

/* ----------------------------------------------------------------- band 3: the console */
/* three parts on one line: the keys take what is left, the gauge and the plate are each as wide as
   their own content and no wider (his note: the plate was stretched with a hole in the middle) */
.console {
  flex: none;
  min-height: var(--band-foot);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s5);
  padding: 0 var(--edge);
  position: relative;
}
.console::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: url(/img/seam-01.png) repeat-x;
  transform: scaleY(-1);
}
/* five program keys in five EQUAL columns: being the open one changes the cap and the colour of the
   word, never the width of the key (his note 2026-11-03) */
.keys { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.key {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 80px;
  padding: var(--s2) var(--s4) var(--s2) 36px;
  border: 16px solid transparent;
  border-image: url(/img/key-01.png) 34 fill / 16px / 0 stretch;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
}
.key .lamp { position: absolute; left: var(--s2); top: 50%; margin-top: -12px; width: 24px; height: 24px; }
.key .word { font-family: Dot, monospace; font-size: var(--t-20); line-height: 1.3; letter-spacing: 0.04em; white-space: nowrap; }
.key .no i { font-style: normal; color: var(--ink-soft); margin-right: var(--s2); }
.key .no { font-size: var(--t-16); line-height: 1.3; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key:hover { color: var(--tomato-ink); }
.key:hover .no { color: var(--tomato-ink); }
.key:active { border-image-source: url(/img/key-down-01.png); }
.key:focus-visible { outline-offset: 0; }
.key[aria-current="page"] { border-image-source: url(/img/key-down-01.png); }
.key[aria-current="page"] .word { color: var(--tomato-ink); }

.gauge { position: relative; width: 132px; height: 132px; flex: none; align-self: center; }
.gauge img.face { width: 100%; height: 100%; display: block; }
.gauge img.needle {
  position: absolute; left: 50%; bottom: 50%;
  width: 17px; height: 84px;
  margin-left: -8px; margin-bottom: -14px;
  transform-origin: 50% 82%;
  transform: rotate(135deg);
  transition: transform 1.6s cubic-bezier(.2, .8, .2, 1);
}
.gauge .cap {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: Dot, monospace; font-size: var(--t-16); line-height: 1.3;
  letter-spacing: 0.08em; color: var(--ink-soft);
}

/* the rating plate: model, serial, the copy key and the three marks, as ONE group that is as wide as
   it needs to be. Sliced at 26, the size the plate's own frame was drawn at. */
.rating {
  justify-self: end;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  border: 26px solid transparent;
  border-image: url(/img/plate-01.png) 26 / 26px / 0 stretch;
  background: var(--steel) url(/img/grain-steel-01.png) repeat;
  padding: var(--s2) var(--s4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s2) var(--s4);
}
.rating .lbl {
  font-size: var(--t-16); line-height: 1.3;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.rating .model-line, .rating .serial-line { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; grid-column: 1 / 3; }
.rating .model-line b { font-weight: 700; font-size: var(--t-16); line-height: 1.3; }
.rating .serial { font-size: var(--t-20); line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); user-select: all; min-width: 0; overflow-wrap: anywhere; }
.rating .serial.empty { color: var(--ink-soft); }
.rating .copy { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.rating .marks { grid-column: 4; grid-row: 1 / span 2; align-self: center; }

/* ----------------------------------------------------------------- controls, one set of states */
.cta, .copy {
  font-family: Dot, monospace;
  font-size: var(--t-20);
  line-height: 1.2;
  letter-spacing: 0.04em;
  min-height: 56px;
  padding: 0 var(--s6);
  border: 20px solid transparent;
  border-image: url(/img/key-01.png) 34 fill / 20px / 0 stretch;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  white-space: nowrap;
}
.cta:hover, .copy:hover:not([disabled]) { color: var(--tomato-ink); }
.cta:active, .copy:active:not([disabled]) { border-image-source: url(/img/key-down-01.png); }
.cta[disabled], .copy[disabled] { color: #5e5e57; cursor: not-allowed; }
.cta.small { min-height: 48px; padding: 0 var(--s5); }
.copy { min-width: 120px; height: 56px; }

.marks { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.marks-row { display: flex; gap: var(--s2); }
/* the three marks keep the full contrast of the official file in every state: what is not live yet
   is said in words under them, never by dimming the mark (his note 2026-11-03) */
.marks-row a, .marks-row span {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 16px solid transparent;
  border-image: url(/img/key-01.png) 34 fill / 16px / 0 stretch;
}
.marks-row img { width: 24px; height: 24px; display: block; }
.marks-row a:hover, .marks-row a:active { border-image-source: url(/img/key-down-01.png); }
.marks-row span.off { cursor: not-allowed; }
.marks-cap { font-size: var(--t-16); line-height: 1.2; letter-spacing: 0.08em; color: var(--ink-soft); white-space: nowrap; }

.pill {
  font-family: Dot, monospace; font-size: var(--t-20); line-height: 1.4; letter-spacing: 0.08em;
  padding: var(--s3) var(--s5); background: var(--paper); color: var(--glass);
}
a.pill { text-decoration: none; }
a.pill:hover { background: var(--lemon); }
a.pill:active { background: var(--gold); }
.say { font-size: var(--t-16); line-height: 1.5; color: var(--paper-dim); min-height: var(--s5); }
.say.bad { color: var(--tomato); }
.say.good { color: var(--grass); }
.quote-line {
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--paper);
  background: var(--glass-up);
  border-left: 6px solid var(--lemon);
  padding: var(--s2) var(--s4);
}
.quote-line b { font-weight: 700; }
.quote-line span { color: var(--paper-dim); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }

/* a numbered step: the digit's baseline sits on the first line of its text (his note) */
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: baseline; padding: var(--s2) 0; color: var(--paper); font-size: var(--t-16); line-height: 1.5; }
.step-no {
  font-family: Dot, monospace; font-size: var(--t-16); line-height: 1.5;
  padding: var(--s2) var(--s4); min-width: 44px;
  color: var(--glass); background: var(--paper-dim); text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .fascia::after { animation: none; }
  .chit .line { opacity: 1; animation: none; }
  .gauge img.needle { transition: none; }
}

/* ----------------------------------------------------------------- the exam page */
/* the full receipt has room, so a long value wraps there instead of being cut, and it wraps at a
   space only: a figure is never broken in half either way */
.chits-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chits-full .chit .row span:last-child { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.chit .explain { color: var(--ink); line-height: 1.5; }
.chit .code { font-weight: 700; overflow-wrap: anywhere; }
.picker { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.picker-label { font-size: var(--t-16); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.mark-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 80px; align-items: center; gap: var(--s4); padding: var(--s2) 0; }
.mark-row .star { width: 40px; height: 40px; }
.mark-cell { min-width: 0; }
.mark-value { font-family: Dot, monospace; font-size: var(--t-32); line-height: 1.1; color: var(--paper); text-align: right; font-variant-numeric: tabular-nums; }
.mark-range { width: 100%; margin-top: var(--s2); accent-color: var(--lemon); height: var(--s5); }
.stars { display: flex; gap: var(--s1); margin-top: var(--s2); }
.star-cell { width: var(--s5); height: var(--s5); display: block; }

/* ----------------------------------------------------------------- the propose page */
.kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.kind-key {
  border: 16px solid transparent;
  border-image: url(/img/key-01.png) 34 fill / 16px / 0 stretch;
  padding: var(--s2) var(--s4) var(--s3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  color: var(--ink);
}
.kind-key img { width: 100%; max-width: 128px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.kind-key .word { font-family: Dot, monospace; font-size: var(--t-20); line-height: 1.2; }
.kind-key:hover .word { color: var(--tomato-ink); }
.kind-key:active { border-image-source: url(/img/key-down-01.png); }
.kind-key[aria-pressed="true"] { border-image-source: url(/img/key-down-01.png); }
.kind-key[aria-pressed="true"] .word { color: var(--tomato-ink); }
.kind-hint { font-size: var(--t-16); color: var(--paper-dim); line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: start; gap: var(--s4); }
.field-label { font-size: var(--t-16); line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); padding-top: var(--s4); }
.task-field, .region-field {
  font-family: Chit, monospace; font-size: var(--t-16); line-height: 1.5; color: var(--ink);
  border: 14px solid transparent;
  border-image: url(/img/note-01.png) 14 / 14px / 0 stretch;
  background: #fbfbf4 url(/img/grain-warm-01.png) repeat;
  padding: var(--s3) var(--s4); width: 100%; resize: vertical; min-height: 112px;
}
.region-field { min-height: 0; width: 140px; text-transform: uppercase; }
.count { font-size: var(--t-16); line-height: 1.5; color: var(--paper-dim); padding-top: var(--s4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.region-row { align-items: center; grid-template-columns: 112px auto minmax(0, 1fr); }
.region-row .count { justify-self: start; }

/* ----------------------------------------------------------------- mine */
.code-chit { margin-top: 0; }
.big-figure { display: flex; align-items: baseline; gap: var(--s3); }
.figure { font-family: Dot, monospace; font-size: 48px; line-height: 1.1; color: var(--paper); font-variant-numeric: tabular-nums; }
.figure-unit { font-size: var(--t-16); color: var(--paper-dim); letter-spacing: 0.08em; }

/* ----------------------------------------------------------------- the manual
   Each step's object is printed on its own paper card, because the object's ink is paper ink. */
.manual-step { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.manual-pic {
  border: 14px solid transparent;
  border-image: url(/img/note-01.png) 14 / 14px / 0 stretch;
  background: #fbfbf4 url(/img/grain-warm-01.png) repeat;
  padding: var(--s2);
}
.manual-pic img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
/* a block of words beside a printed object: the 404 */
.exam-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 30%); gap: var(--s5); align-items: center; }
.manual-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); font-family: Dot, monospace; font-size: var(--t-24); line-height: 1.3; color: var(--paper); }
.manual-body { font-size: var(--t-16); line-height: 1.5; color: var(--paper-dim); }
.kind-row { padding: var(--s2) 0; }
.kind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.tool-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s4); padding: var(--s1) 0; align-items: baseline; }
.tool-name { font-size: var(--t-16); line-height: 1.5; color: var(--lemon); }

/* ----------------------------------------------------------------- widths
   Six widths are measured on every page: 1920, 1440, 1280, 1024, 768, 390 (tools/audit.mjs). */
@media (max-width: 1800px) {
  :root { --t-display: 64px; --edge: 40px; }
}
/* MEASURED, not guessed: five caps need 182px each to print "03 set one" whole, and a lab card needs
   229px to print "budget 0.20 SOL" on one line. Both only fit beside the plate at 1920, so below that
   the keys take their own row of the console and the cards go two across. */
@media (max-width: 1900px) {
  :root { --band-foot: auto; }
  .console { grid-template-columns: auto minmax(0, 1fr); padding: var(--s5) var(--edge); }
  .keys { grid-column: 1 / -1; }
  .gauge { grid-column: 1; }
  .rating { grid-column: 2; }
  .chits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1500px) {
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  :root { --band-top: auto; --t-display: 48px; }
  .rail { flex-wrap: wrap; padding: var(--s5) var(--edge) var(--s6); }
  .readouts { flex-wrap: wrap; width: 100%; }
  .cell { flex: 1 1 180px; }
  .display-in { grid-template-columns: minmax(0, 1fr); }
  .stack { grid-template-rows: auto auto; }
  .field { padding: var(--s5) var(--edge) var(--s6); min-height: 0; }
  .note-paper.with-object { grid-template-columns: minmax(0, 1fr) minmax(180px, 30%); }
  .chits-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* below this the five caps stop fitting across, so they go two across with the last one whole:
   a row of keys is never left half empty */
@media (max-width: 900px) {
  .keys { grid-template-columns: 1fr 1fr; }
  .key:last-child { grid-column: 1 / -1; }
}
/* the phone is its own composition: the door is narrow, so the bands stack and every block
   is drawn for 390, never squeezed from the desktop (RULES/LESSONS.md 1.16) */
@media (max-width: 760px) {
  :root { --edge: 16px; --t-display: 32px; --t-32: 24px; --s6: 20px; }
  .rail { flex-direction: column; align-items: stretch; gap: var(--s4); padding: var(--s4) var(--edge) var(--s5); }
  /* the star belongs to the name, so it keeps the name's line when the block stacks */
  .badge { align-items: flex-start; }
  .badge img { width: 44px; height: 44px; }
  .wordmark { font-size: var(--t-24); }
  .readouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; }
  .cell { min-width: 0; }
  .cell:last-child { grid-column: 1 / -1; }
  .field { padding: var(--s4) var(--edge) var(--s5); }
  .display { border-width: 18px; border-image-width: 18px; }
  .display-in { gap: var(--s5); padding: var(--s4); }
  .stack { gap: var(--s4); }
  .exam-head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .note-paper { padding: var(--s3) var(--s4) var(--s4); }
  .note-paper.with-object { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .note-pin { right: var(--s4); }
  .exam-object img { max-width: 240px; }
  .panel { padding: var(--s3) var(--s4); border-width: 16px; border-image-width: 16px; }
  .chits, .chits-full { grid-template-columns: 1fr 1fr; }
  .model { grid-template-columns: 40px minmax(0, 1fr) 96px; gap: var(--s3); }
  .model-index { font-size: var(--t-24); }
  .queue-row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .meter em { position: static; display: block; margin-top: var(--s1); }
  .console { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding: var(--s4) var(--edge) var(--s5); }
  .keys, .gauge, .rating { grid-column: 1; }
  .gauge { justify-self: center; }
  .rating { justify-self: stretch; }
  .keys { grid-template-columns: 1fr 1fr; }
  .key { padding: var(--s2) var(--s3) var(--s2) 44px; }
  .key .lamp { left: var(--s2); }
  .gauge { align-self: center; }
  .rating { grid-template-columns: minmax(0, 1fr); }
  .rating .model-line, .rating .serial-line { grid-column: 1; flex-wrap: wrap; }
  .rating .copy { grid-column: 1; grid-row: auto; justify-self: start; }
  .rating .marks { grid-column: 1; grid-row: auto; align-items: flex-start; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .field-label, .count { padding-top: 0; }
  .manual-step { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); }
  .manual-head { font-size: var(--t-20); }
  .exam-row { grid-template-columns: minmax(0, 1fr); }
  .mark-row { grid-template-columns: 32px minmax(0, 1fr) 72px; }
  .mark-row .star { width: 32px; height: 32px; }
  .tool-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}
@media (max-width: 420px) {
  .cell { padding: var(--s2) var(--s4); }
  .cell-value { white-space: normal; }
  .cell-value .unit { display: block; margin-left: 0; }
  .keys { grid-template-columns: 1fr; }
  .chits, .chits-full { grid-template-columns: 1fr; }
  .kinds { grid-template-columns: 1fr; }
  .model { grid-template-columns: 32px minmax(0, 1fr); }
  .model img.star { width: 32px; height: 32px; }
  .model-index { grid-column: 2; justify-content: flex-start; margin-top: var(--s1); }
}