/* Impeccable · Lauched In · world: THE DOCKET · mode: operate · seed b3f1cc34
 *
 * The kitchen expo docket. A column of ruled lines and a total, printed on
 * ticket stock. No cards, no shadows, no radius, no gradients — hierarchy is
 * carried entirely by rule weight, caps, and inversion to solid black.
 *
 * Three disciplines carried in from the directions that lost:
 *   one-bit    — emphasis inverts to solid black; grey is structure, never emphasis
 *   stepped    — every state change is a two-frame step; nothing fades or eases
 *   whole-field— one tap re-derives the count, every ceiling, and the verdict at once
 *
 * Prices render as labelled blanks on purpose. Lauchlan has not set them, and
 * inventing a number to fill a layout puts a fake figure in front of a client.
 */

@import url("tokens.css");

/* Self-hosted, latin subset, variable. The scene this is designed for is a phone
   in the evening on a cold cache: a CDN round-trip there paints the first screen
   in Arial and delivers the world's lettering afterwards. `swap` is kept for the
   fallback path only — the files are same-origin and preloaded in base.njk.
   One file per family; Google serves the same variable woff2 for every weight. */
@font-face {
  font-family: "Archivo Narrow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/archivo-narrow.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/archivo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Azeret Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/azeret-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-line);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* ── browser surfaces · these ship with the design, not with the browser ── */
::selection { background: var(--color-ink); color: var(--color-paper); }
:root { caret-color: var(--color-accent); scrollbar-color: var(--color-rule-2) var(--color-paper-2); }
:focus-visible {
  outline: var(--rule-mid) solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 0;
}
[data-num], .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── the ticket ───────────────────────────────────────────────────────────
   One sheet down the middle of the page. Full-bleed on a phone; on a desktop
   it keeps ticket width and the surface shows either side of it. */
.sheet {
  background: var(--color-paper);
  max-width: var(--page);
  margin-inline: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sheet > main { flex: 1; }
.pad { padding-inline: var(--space-md); }

/* ── ticket head ──────────────────────────────────────────────────────── */
.head { background: var(--color-paper); }
.head__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm) var(--space-xs);
}
.wordmark {
  font-family: var(--font-line);
  font-weight: 700;
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 0.45em;
  transition: color var(--step);
}
/* It is a link on every page and the only route back on the public ones, so it
   has to answer a pointer. The spike hole fills — the mark is already the
   accent, and filling it is a state change rather than a new colour. */
.wordmark:hover { color: var(--color-accent-text); }
.wordmark:hover .wordmark__mark { background: var(--color-accent); }
.wordmark[aria-current="page"] { cursor: default; }
.wordmark[aria-current="page"]:hover { color: inherit; }
.wordmark[aria-current="page"]:hover .wordmark__mark { background: none; }
/* Away from the shop window the wordmark IS the way home and there is no bar
   under it to say so. A thumb never sees a hover state, so the mark does the work.
   A house rather than an arrow: this goes to / from anywhere, never to the page
   you came from, and an arrow would be promising browser history. */
.wordmark__home {
  width: 0.6em; height: 0.6em;
  flex: none;
  color: var(--color-accent);
  margin-right: 0.15em;
}
/* The mark is a docket spike hole, punched through the ticket head. */
.wordmark__mark {
  width: 0.5em; height: 0.5em;
  border: var(--rule-mid) solid var(--color-accent);
  border-radius: 50%;
  flex: none;
}
/* Wk label and, signed out, Log in — stacked so 375px does not have to fit
   three things across the ticket head. */
.head__right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px; flex: none;
}
.head__login {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: var(--rule-mid) solid var(--color-accent);
  padding-bottom: 1px;
  min-height: 0;
}
.head__login[aria-current="page"] { color: var(--color-muted); border-bottom-color: var(--color-rule); }

.head__wk {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.head__count {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
}
.head__count b { font-weight: 700; }
.head__count[data-short="true"] b { color: var(--color-accent-text); }
.head__rule { border-bottom: var(--rule-heavy) solid var(--color-ink); }

.nav {
  display: flex; gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-sm) var(--space-sm);
  min-height: var(--tap);
  display: flex; align-items: center;
  white-space: nowrap;
  border-bottom: var(--rule-heavy) solid transparent;
  transition: color var(--step);
}
.nav a:first-child { padding-left: var(--space-md); }
.nav a:hover { color: var(--color-ink); }
.nav a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* ── page head ────────────────────────────────────────────────────────── */
.ph { padding-block: var(--space-xl) var(--space-md); }
.ph h1 { font-size: var(--text-3xl); }
.ph h2 { font-size: var(--text-2xl); }
.ph__sub {
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.ph__code {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-xs);
}

/* ── the docket line · one dish, one row, edge to edge ────────────────── */
.lines { border-top: var(--rule-mid) solid var(--color-ink); }
.lines--joined { border-top: 0; }
.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.line--stack { align-items: start; }
.line__name {
  font-family: var(--font-line);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  line-height: 1.08;
}
.line__desc { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 54ch; }
/* An email body is written with its line breaks in it; the outbox shows the text
   that will actually be sent, so they have to survive the render. */
.line__desc--mail { white-space: pre-line; }
.line__note {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── macros · printed verbatim or printed "not set" ───────────────────── */
/* An identifier is DATA, and the docket's uppercase would rewrite it. Stripe
   matches `meal_slots:in_x` exactly, so a screen that prints MEAL_SLOTS:IN_X is
   showing a value that does not exist. */
.line__id {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-muted);
  word-break: break-all;
}

.macros {
  margin-top: var(--space-xs);
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
}
.macros span { display: inline-flex; align-items: baseline; gap: 0.35em; }
.macros i { font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral); }
.macros b { font-weight: 700; }
.macros--unset b { font-weight: 500; color: var(--color-neutral); }

/* ── the quantity cell · the Logbook's donation: you write the number in ─ */
.qty {
  display: flex; align-items: stretch;
  border: var(--rule-mid) solid var(--color-ink);
  height: var(--tap);
  font-variant-numeric: tabular-nums;
}
.qty button {
  width: var(--tap);
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--step), color var(--step);
}
.qty button:hover:not(:disabled) { background: var(--color-paper-3); }
.qty button:disabled { color: var(--color-rule-2); cursor: not-allowed; }
.qty output {
  width: 2.75rem;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-lg);
  border-inline: var(--rule-mid) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-neutral);
  transition: background var(--step), color var(--step);
}
/* One-bit: a filled cell inverts to solid black. No tint, ever. */
.qty output[data-on="true"] { background: var(--color-ink); color: var(--color-paper); }

/* ── the total line · sticky, and it is the only verdict on the page ───── */
.dock {
  position: sticky; bottom: 0;
  background: var(--color-paper-2);
  border-top: var(--rule-heavy) solid var(--color-ink);
  transition: background var(--step), color var(--step);
  padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
}
.dock__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
}
.dock__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-4xl);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.dock__n small { font-size: var(--text-xl); color: var(--color-neutral); }
.dock__state {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
  margin-top: var(--space-2xs);
}
/* Nothing dead sits in the action slot: it holds the instruction until the
   count is exact, then it holds the control. */
/* Inversion is this world's emphasis device; the line the page exists to resolve
   gets it, the same way every filled quantity cell does. */
.dock[data-ready="true"] { background: var(--color-ink); color: var(--color-paper); }
.dock[data-ready="true"] .dock__n small { color: var(--color-rule-2); }
.dock[data-ready="true"] .dock__state { color: var(--color-paper-3); }
.dock[data-ready="true"] .btn {
  background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper);
}
.dock[data-ready="true"] .btn:hover:not(:disabled) {
  background: var(--color-paper-3); border-color: var(--color-paper-3); color: var(--color-ink);
}
.dock__act { justify-self: stretch; }
.dock__act .btn { width: 100%; font-size: var(--text-2xs); padding-inline: var(--space-sm); }
.dock__todo {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border: var(--rule-hair) dashed var(--color-rule-2);
  padding: var(--space-sm);
  display: block;
  text-align: center;
}

/* ── controls ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding-inline: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-paper);
  border: var(--rule-mid) solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--step), color var(--step);
}
.btn:hover:not(:disabled) { background: var(--color-accent); border-color: var(--color-accent); }
.btn--quiet { background: var(--color-paper); color: var(--color-ink); }
.btn--quiet:hover:not(:disabled) { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }
.btn--link {
  background: none; border: 0; min-height: 0; padding: 0;
  color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px;
  letter-spacing: 0.08em;
}
.btn--link:hover { color: var(--color-ink); background: none; }

/* ── the stamp · the one authored moment, and it only lands on a fact ──── */
.stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border: var(--rule-mid) solid var(--color-accent-text);
  padding: var(--space-2xs) var(--space-sm);
  rotate: -3deg;
  animation: stamp 90ms steps(2, end) 1;
}
@keyframes stamp { from { scale: 1.14; } to { scale: 1; } }

/* ── slips · a note is a boxed slip, never a coloured left border ──────── */
.slip {
  border: var(--rule-hair) solid var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: var(--measure);
}
.slip b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}
.slip--refused { border-width: var(--rule-mid); }
.slip--refused b { color: var(--color-accent-text); }

/* ── the week · a sequence, so it is numbered ─────────────────────────── */
.week { border-top: var(--rule-mid) solid var(--color-ink); }
.step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.step__n {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral);
  line-height: 1.6;
}
.step__day {
  display: block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1.2;
}
.step h2 { font-size: var(--text-xl); }
.step p { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 56ch; }
.step p + p { margin-top: var(--space-sm); }

/* ── bundles · a price list is a table of rules, not three equal cards ─── */
.rates { border-top: var(--rule-mid) solid var(--color-ink); }
.rate {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.rate__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rate__unit {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rate__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  text-align: right;
  white-space: nowrap;
}
/* The weekly total sits under the rate, in the same right-hand column: a fourth
   grid child would drop onto a second row and break the rule spacing. */
.rate__sub {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

/* A rate you can choose. The radio replaces the big numeral's own cell rather
   than adding a fourth column, so the picked row rules exactly like a static
   one and the ladder does not shift when the page becomes a form (ADR-097).
   Inversion, not a tint: the same "this is the marked line" the picker uses. */
.rate--pick { position: relative; cursor: pointer; }
.rate--pick input { position: absolute; opacity: 0; pointer-events: none; }
.rate--pick:has(input:checked) { background: var(--color-ink); color: var(--color-paper); }
.rate--pick:has(input:checked) .rate__unit,
.rate--pick:has(input:checked) .rate__price,
.rate--pick:has(input:checked) .rate__sub { color: var(--color-paper); }
.rate--pick:has(input:focus-visible) { outline: var(--rule-mid) solid var(--color-accent); outline-offset: -3px; }

/* An unset price is a blank on the ticket, never a made-up figure. */
.blank {
  display: inline-block; min-width: 3em;
  border-bottom: var(--rule-hair) dashed var(--color-rule-2);
}

/* ── kitchen · read standing up, at arm's length ──────────────────────── */
.tally {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--rule-mid) solid var(--color-ink);
  border-bottom: var(--rule-mid) solid var(--color-ink);
}
.tally div { padding: var(--space-md); }
.tally div + div { border-left: var(--rule-hair) solid var(--color-rule); }
.tally dt, .tally__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tally__v {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-3xl);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cook__n {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-4xl);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.cook__n span {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-neutral);
  text-align: right;
}

/* ── forms ────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); max-width: 26rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.field input {
  font-family: var(--font-body);
  font-size: var(--text-base);
  min-height: var(--tap);
  padding: var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-mid) solid var(--color-ink);
  border-radius: 0;
}
.field input::placeholder { color: var(--color-neutral); }

/* ── the kitchen's own screens ────────────────────────────────────────── */
/* Same ruled ticket, one level in: a second row of tabs under the main nav,
   forms that are lines rather than boxes, and no radius anywhere. */
.subnav {
  display: flex; gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-x: auto;
}
.subnav a { color: var(--color-muted); text-decoration: none; white-space: nowrap; padding-block: var(--space-2xs); }
.subnav a:hover { color: var(--color-ink); }
.subnav a[aria-current="page"] { color: var(--color-ink); font-weight: 700; }

.form { padding-block: var(--space-md) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.field__hint { text-transform: none; letter-spacing: 0; color: var(--color-neutral); }
.field textarea, .field select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-mid) solid var(--color-ink);
  border-radius: 0;
}
.field select { min-height: var(--tap); }

.macroset { border: 0; padding: 0; margin: 0; }
.macroset legend {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.macroset__note { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 54ch; }
.macroset__grid {
  margin-top: var(--space-sm);
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 26rem;
}
.macroset__grid .field input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.ticks { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.tick { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--tap); cursor: pointer; }
.tick input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-ink); }
.tick span { font-family: var(--font-mono); font-size: var(--text-xs); }

/* The close is the hard cutoff, so it reads as its own act, under a rule. */
.closebar { border-top: var(--rule-mid) solid var(--color-ink); padding-top: var(--space-md); align-items: baseline; }

.weekbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-md); padding-block: var(--space-md); }
.weekctl { display: flex; flex-direction: column; align-items: end; gap: var(--space-2xs); }
.weekctl label > span {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-right: var(--space-2xs);
}
.weekctl input[type="text"], .weekctl input:not([type]) {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  width: 3.5rem;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-mid) solid var(--color-ink);
  border-radius: 0;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

@media (min-width: 48rem) {
  .subnav { padding-inline: var(--space-lg); }
  .form { padding-inline: var(--space-lg); }
  .macroset__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
}

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: var(--space-3xl);
  border-top: var(--rule-heavy) solid var(--color-ink);
  padding-block: var(--space-lg) var(--space-xl);
}
.foot__line {
  font-family: var(--font-line);
  font-weight: 700;
  font-size: var(--text-xl);
  text-transform: uppercase;
  line-height: 1.06;
  max-width: 20ch;
}
.foot__meta {
  margin-top: var(--space-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral);
}

.banner {
  background: var(--color-ink);
  color: var(--color-paper-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-xs) var(--space-md);
  text-align: center;
}
.banner b { color: var(--color-paper); font-weight: 700; }

/* ── spacing helpers, used sparingly so views stay style-free ─────────── */
.stack { padding-block: var(--space-xl); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-2xl); }

/* ── desktop · the ticket keeps its width and the surface shows around it ─ */
@media (min-width: 48rem) {
  .sheet { border-inline: var(--rule-hair) solid var(--color-rule); }
  .pad, .line, .rate, .tally div, .dock { padding-inline: var(--space-lg); }
  .step { padding-inline: var(--space-lg); grid-template-columns: 7rem minmax(0, 1fr); }
  .ph h1 { font-size: var(--text-4xl); }
  .line__name { font-size: var(--text-xl); }
  .dock__n { font-size: var(--text-5xl); }
  .dock__act { justify-self: end; }
  .dock__act .btn { width: auto; font-size: var(--text-xs); padding-inline: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── the clock · how long is left to order ────────────────────────────────
   ADR-106. A stamped line, not a badge: mono, caps, one rule above it, the
   number in the accent. The world has no pills and no colour beyond the one
   red, so urgency is weight and inversion rather than an orange bar.

   ⚠ Three sentences live in this element and the script reveals one. Without
   JavaScript the served one stays, which is the absolute moment ("Picking
   closes Wednesday 6pm") and is true forever. */
.clock {
  border-top: var(--rule-mid) solid var(--color-ink);
  padding-top: var(--space-xs);
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  max-width: var(--measure);
}
.clock b {
  color: var(--color-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Inside the last day it stops being a fact and starts being a deadline. */
.clock[data-near="true"] b { color: var(--color-accent-text); }