/* ══════════════════════════════════════════════════════════════════
   THE NON-WRITER
   Axiom Design Core × NYC Subway (Vignelli, MTA Graphics Standards).

   The premise: a piece of text takes a ride. Four stops, one line.
   The route is not decoration — it is the page's actual spine, and it
   is the only thing holding the layout together.

   Core rules inherited from Axiom: zero radius, zero shadow, zero
   gradient, 4px grid, hairline rules, IBM Plex only, mono for anything
   that counts. From the MTA manual: the black sign field, the solid
   route bullet, the heavy rule, colour used only to name a route.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — tinted, never pure black (impeccable) */
  --bg:      #0a0e14;
  --bg-1:    #0d1117;
  --bg-2:    #161b22;
  --bg-3:    #21262d;
  --line:    #30363d;
  --line-2:  #484f58;

  /* Text */
  --text:    #e6edf3;
  --text-1:  #c9d1d9;
  --text-2:  #8b949e;
  --text-3:  #7d8590;

  /* MTA route colours. These name a route. They are never decoration. */
  --mta-yellow: #fccc0a;  /* N Q R W  — Natural   */
  --mta-red:    #ee352e;  /* 1 2 3    — Blunt     */
  --mta-orange: #ff6319;  /* B D F M  — Wry       */
  --mta-purple: #b933ad;  /* 7        — Story     */
  --mta-green:  #6cbe45;  /* G        — Explainer */
  --mta-blue:   #0039a6;  /* A C E                */
  --mta-brown:  #996633;  /* J Z      — Non-Laws */
  --mta-pine:   #00933c;  /* 4 5 6    — DND      */
  --mta-turq:   #00add0;  /* T        — Non-Talk */
  --mta-grey:   #808183;  /* S shuttle — admin    */

  --accent: var(--mta-yellow);
  --good:   #16a34a;
  --bad:    #dc2626;
  --warn:   #d97706;
  --data:   #2563eb;

  /* Type */
  --font-sans:    'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-serif:   'Lora', Georgia, serif;

  /* 4px grid */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px;  --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* The route runs at a fixed offset. Everything hangs off it. */
  --rail-x: 72px;
  --bullet: 40px;

  --page: 1180px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

/**
 * `hidden` must actually hide.
 *
 * The UA stylesheet implements [hidden] as `display: none`, which ANY author
 * `display` rule silently defeats. `.compare { display: grid }` did exactly
 * that: the code set `hidden` correctly, the pane kept rendering, and users saw
 * the rewrite twice — once in the compare pane, once in the piece body.
 *
 * Three per-element `[hidden] { display: none !important }` patches had already
 * accumulated, one per leak discovered. This is that rule, once, for every
 * element — so the next component with a `display` cannot reintroduce the bug.
 * Deliberate exceptions must out-specify this (see .write-stage .piece__body).
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(15px, 0.22vw + 14px, 17px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

main, .masthead, .tail__grid {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 700px) {
  main, .masthead, .tail__grid { padding-inline: var(--s-6); }
}

/* ─── THE ROUTE ────────────────────────────────────────────────────
   The rail is drawn per-stop rather than as one floating element, so
   it can never drift out of register with the marks: each stop paints
   the segment from its own mark down into the next one's.           */

.stop::before {
  content: '';
  position: absolute;
  left: calc(var(--bullet) / 2 - 3px);
  top: calc(var(--bullet) / 2);
  bottom: calc(var(--bullet) / -2);
  width: 6px;
  background: var(--line);
  z-index: 0;
  pointer-events: none;
}
.stop--terminal::before { display: none; }  /* end of the line */

/* ─── ROUTE BULLET ─────────────────────────────────────────────────
   The MTA bullet: a solid disc, letterform centred, no outline.     */

.bullet {
  display: grid;
  place-items: center;
  width: var(--bullet);
  height: var(--bullet);
  border-radius: 50% !important;
  background: var(--accent);
  color: #000;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
}
.bullet--xl { width: 76px; height: 76px; font-size: 2.6rem; }
.bullet--sm { width: 28px; height: 28px; font-size: 1rem; }

/* ─── MASTHEAD ─────────────────────────────────────────────────────
   Asymmetric. The bullet anchors left, the board sits far right, and
   the type between them is deliberately oversized and condensed.    */

.masthead {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding-top: var(--s-8);
  padding-bottom: var(--s-4);
  position: relative;
  z-index: 1;
}

.masthead__type { flex: 1 1 auto; min-width: 0; }

.masthead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.masthead h1 em {
  font-style: normal;
  color: var(--accent);
}

.masthead__sub {
  margin: var(--s-2) 0 0;
  max-width: 52ch;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.masthead__board {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 2px solid var(--text);
  min-width: 132px;
}
.board__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
}
.board__value {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.board__value[data-state='up']   { color: var(--good); }
.board__value[data-state='down'] { color: var(--bad); }

.board__rows {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  width: 100%;
  max-width: 200px;
}
.board__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  line-height: 1.4;
}
.board__row[data-ok='true'] { color: var(--good); }
.board__row[data-ok='false'] { color: var(--text-3); }
.board__keylink {
  margin-top: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--data);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.board__keylink:hover { color: var(--text); }

/* The heavy rule under the masthead — straight from the MTA manual. */
.stripe {
  height: 8px;
  background: var(--accent);
  max-width: calc(var(--page) - var(--s-6) * 2);
  margin: 0 auto var(--s-8);
  position: relative;
  z-index: 1;
}

/* ─── STOPS ────────────────────────────────────────────────────────
   Each section is a station: a numbered mark on the rail, body to
   its right. No cards. Hairline rules do the separating.            */

main { position: relative; z-index: 1; padding-bottom: var(--s-24); }

.stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--bullet) 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-12);
  /* Keep the mark column on every width so the rail stays in the gutter
     and never cuts through the textarea / dials (the old 1-col stack did). */
}
@media (max-width: 899px) {
  .stop {
    --bullet: 28px;
    grid-template-columns: var(--bullet) minmax(0, 1fr);
    gap: var(--s-3);
  }
  .stop::before {
    left: calc(var(--bullet) / 2 - 1px);
    width: 2px;
    background: var(--line-2);
  }
  .stop__mark { border-width: 3px; }
  .stop__num { font-size: 0.64rem; }
  .stop__title { font-size: 1.28rem; }
  .stop__body { max-width: none; }
  textarea#source { min-height: 10rem; }
}

/* Opaque fill: the mark punches a hole in the rail it sits on. */
.stop__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--bullet);
  height: var(--bullet);
  border-radius: 50% !important;
  background: var(--bg);
  border: 4px solid var(--text);
}
.stop--terminal .stop__mark { background: var(--accent); border-color: var(--accent); }

.stop__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stop--terminal .stop__num { color: #000; }

.stop__body { min-width: 0; max-width: 68ch; }

.stop__title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.stop__note {
  margin: 0 0 var(--s-4);
  color: var(--text-2);
  max-width: 56ch;
  font-size: 0.95rem;
}

.sub {
  margin: var(--s-6) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.sub__opt {
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--line-2);
}

/* ─── TEXTAREA ─────────────────────────────────────────────────────  */

textarea, .note {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  padding: var(--s-4);
  resize: vertical;
  transition: border-color 160ms ease-out;
}
textarea::placeholder, .note::placeholder { color: var(--text-3); }
textarea:focus, .note:focus {
  outline: none;
  border-color: var(--line-2);
  border-top-color: var(--accent);
}
.note { font-size: 0.94rem; resize: none; }

/* ─── WORD METER ───────────────────────────────────────────────────  */

.meter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.meter__count { color: var(--text); font-size: 0.95rem; }
.meter__unit { margin-right: var(--s-2); }
.meter__bar {
  flex: 1 1 auto;
  height: 4px;
  background: var(--bg-2);
  min-width: 60px;
}
.meter__bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--text-3);
  transition: width 160ms ease-out, background-color 160ms ease-out;
}
.meter[data-over='true'] .meter__count,
.meter[data-over='true'] .meter__limit { color: var(--bad); }
.meter[data-over='true'] .meter__bar i { background: var(--bad); }

.pastebar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.pastebar .meter { margin-top: 0; flex: 1 1 220px; min-width: 0; }
.pastebar__acts {
  display: flex;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.pastebar__hint {
  margin: var(--s-2) 0 0;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: var(--text-3);
}
.pastebar__hint[data-state='err'] { color: var(--bad); }
.pastebar__hint[data-state='ok'] { color: var(--good); }

/* ─── LINES (register picker) ──────────────────────────────────────
   Each register is a route. The bullet carries the line's colour;
   selection is a 2px stripe, per Axiom's active-state rule.         */

.lines { display: flex; flex-direction: column; }

.line {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.line:last-child { border-bottom: 1px solid var(--line); }
.line:hover { background: var(--bg-1); }
.line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.line__bullet {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: var(--line);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex: none;
  transition: background-color 160ms ease-out;
}
.line__text { min-width: 0; }
.line__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-2);
}
.line__hint { display: block; font-size: 0.88rem; color: var(--text-3); }

.line[aria-checked='true'] {
  background: var(--bg-1);
  border-left: 3px solid var(--ln, var(--accent));
  padding-left: calc(var(--s-3) - 3px);
}
.line[aria-checked='true'] .line__bullet { background: var(--ln, var(--accent)); color: #000; }
.line[aria-checked='true'] .line__name  { color: var(--text); }
.line[aria-checked='true'] .line__hint  { color: var(--text-2); }

/* ─── DIAL (length) ────────────────────────────────────────────────
   Three stops on a short segment. Express / local logic, visually.  */

.dial { display: flex; border: 1px solid var(--line); }

.dial__opt {
  flex: 1 1 0;
  padding: var(--s-3) var(--s-2);
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-top: 2px solid transparent;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.dial__opt:last-child { border-right: 0; }
.dial__opt:hover { color: var(--text-1); }
.dial__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dial__opt[aria-checked='true'] {
  color: var(--text);
  border-top-color: var(--accent);
  background: var(--bg-1);
}
.dial__hint { display: block; margin-top: 2px; font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--text-3); }

/* ─── LANGUAGE ─────────────────────────────────────────────────────
   A native <select>, styled to the system. Native beats a custom
   dropdown here: keyboard, screen readers, and the iOS wheel picker
   all work for free, and 24 grouped options need real scrolling.   */

.lang__select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  cursor: pointer;
  /* Strip the platform chrome, then draw our own mark. */
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s-12);
  transition: border-color 160ms ease-out;
}
.lang__select:focus {
  outline: none;
  border-color: var(--line-2);
  border-top-color: var(--accent);
}
.lang__select:hover { border-top-color: var(--accent); }
.lang__select optgroup {
  font-family: var(--font-display);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  background: var(--bg-1);
}
.lang__select option { font-family: var(--font-mono); color: var(--text); background: var(--bg-1); }

.lang__note {
  margin: var(--s-2) 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
  max-width: 56ch;
}

/* ─── SCRIPTS ──────────────────────────────────────────────────────
   The finished piece is Lora, which covers Latin and Cyrillic only.
   Every other script gets IBM Plex's own cut where one exists, then
   the platform's system face. Set via data-script on the container.

   These carry a doubled class to out-specify `.piece__body`'s serif,
   which is declared later in this file — equal specificity would let
   source order win and render Arabic in a Latin fallback.            */

[data-script='thai'][data-script],
[data-script='thai'] p       { font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', sans-serif; }
[data-script='sc'][data-script],
[data-script='sc'] p         { font-family: 'IBM Plex Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
[data-script='tc'][data-script],
[data-script='tc'] p         { font-family: 'IBM Plex Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
[data-script='jp'][data-script],
[data-script='jp'] p         { font-family: 'IBM Plex Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif; }
[data-script='kr'][data-script],
[data-script='kr'] p         { font-family: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
[data-script='arabic'][data-script],
[data-script='arabic'] p     { font-family: 'IBM Plex Sans Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Naskh Arabic', serif; }
[data-script='devanagari'][data-script],
[data-script='devanagari'] p { font-family: 'IBM Plex Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', 'Noto Sans Devanagari', sans-serif; }
[data-script='bengali'][data-script],
[data-script='bengali'] p    { font-family: 'Kohinoor Bangla', 'Nirmala UI', 'Noto Sans Bengali', sans-serif; }
[data-script='myanmar'][data-script],
[data-script='myanmar'] p    { font-family: 'Myanmar Sangam MN', 'Noto Sans Myanmar', 'Padauk', sans-serif; }
[data-script='khmer'][data-script],
[data-script='khmer'] p      { font-family: 'Khmer Sangam MN', 'Noto Sans Khmer', 'Hanuman', sans-serif; }
[data-script='lao'][data-script],
[data-script='lao'] p        { font-family: 'Lao Sangam MN', 'Noto Sans Lao', sans-serif; }

/* Non-Latin scripts carry more ink per line; give them room to breathe. */
.piece__body[data-script]:not([data-script='latin']) { line-height: 1.85; }
.piece__body[dir='rtl'] { text-align: right; }
.advice__list[dir='rtl'] li { direction: rtl; }
.advice__list[dir='rtl'] li::before { justify-self: end; }

/* ─── NOTICE ───────────────────────────────────────────────────────
   The MTA hazard strip: diagonal yellow/black. This is the one place
   the page raises its voice, and it earns it.                       */

.notice { display: flex; border: 1px solid var(--line); background: var(--bg-1); }

.notice__flag {
  flex: none;
  width: 12px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 8px,
    #000 8px 16px
  );
}
.notice__text { padding: var(--s-4) var(--s-4) var(--s-2); }
.notice__text p { margin: 0 0 var(--s-3); font-size: 0.94rem; color: var(--text-2); }
.notice__text strong { color: var(--text); font-weight: 600; }
.notice__text a,
.creed__lead a,
.servicekey__lead a {
  color: var(--data);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}
.notice__text a:hover,
.creed__lead a:hover,
.servicekey__lead a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── CONSENT ──────────────────────────────────────────────────────  */

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 160ms ease-out;
}
.consent:hover { border-color: var(--line-2); }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }

.consent__box {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 2px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.consent__box::after {
  content: '';
  width: 10px; height: 10px;
  background: #000;
  transform: scale(0);
  transition: transform 160ms ease-out;
}
.consent input:checked + .consent__box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent__box::after { transform: scale(1); }
.consent input:focus-visible + .consent__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent__label { font-size: 0.94rem; color: var(--text-1); }

/* ─── GO ───────────────────────────────────────────────────────────  */

.go {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--accent);
  border: 0;
  color: #000;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.go:hover:not(:disabled) { background: #ffe14d; }
.go:active:not(:disabled) { transform: translateY(1px); }
.go:disabled { background: var(--bg-3); color: var(--text-3); cursor: not-allowed; }
.go:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.go__arrow { font-size: 1.5rem; line-height: 1; }
.go__hint {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-3);
}

/* ─── WRITE STAGE — laptop split: compose left, result right ─────── */

.write-stage {
  display: block;
}
.write-stage__out { min-width: 0; }
.arrival--pane {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  min-height: 12rem;
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: var(--s-4);
}
.arrival:not(.arrival--pane) {
  border-top: 8px solid var(--accent);
  padding-top: var(--s-4);
  margin-top: var(--s-6);
}
.arrival__empty {
  padding: var(--s-8) var(--s-4);
  color: var(--text-3);
  font-size: 0.95rem;
}
.arrival__emptyEn { margin: 0 0 var(--s-2); }
.arrival__emptyTh { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.note-th {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.88rem;
  color: var(--text-3);
}
.actionstrip {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.actionstrip__notice {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.45;
}
.actionstrip__notice a { color: var(--data); }
.actionstrip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.consent--inline {
  flex: 1 1 220px;
  margin: 0;
  padding: var(--s-2) var(--s-3);
}
.actionstrip__row .go { flex: none; margin: 0; }

@media (min-width: 1000px) {
  .write-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .write-stage__in {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
  }
  .write-stage__out {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
  }
  .arrival--pane {
    min-height: calc(100vh - var(--s-16));
  }
  /* Same-screen left pane is the source — hide inline compare chrome */
  .write-stage .compare-tog { display: none; }
  .write-stage .compare { display: none !important; }
  .write-stage .piece__body[hidden] { display: block !important; } /* never hide rewrite on laptop */
  .stop--action .stop__title { display: none; }
  #panel-write .stop { padding-bottom: var(--s-6); }
  #source { min-height: 14rem; }
}

.uilang {
  display: inline-flex;
  gap: 0;
  margin-left: var(--s-3);
  border: 1px solid var(--line);
}
.uilang__btn {
  padding: var(--s-1) var(--s-2);
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.uilang__btn[aria-pressed='true'] {
  background: var(--text);
  color: var(--bg);
}

/* EN | TH — one language at a time for marked blocks */
body:not([data-ui-lang='th']) .i18n-th { display: none !important; }
body[data-ui-lang='th'] .i18n-en { display: none !important; }
body[data-ui-lang='th'] {
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', var(--font-sans);
}
body[data-ui-lang='th'] .reader__th {
  padding-left: 0;
  border-left: 0;
}


.arrival__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.arrival--pane .arrival__head { border-top: 3px solid var(--accent); padding-top: var(--s-3); margin-top: var(--s-2); }
.arrival__status {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arrival__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Waiting: a segment of track filling. No spinner. */
.arrival__wait { padding: var(--s-6) 0; }
.wait__track { height: 6px; background: var(--bg-2); overflow: hidden; }
.wait__track i {
  display: block;
  height: 100%;
  width: 28%;
  background: var(--accent);
  animation: run 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.wait__note { margin: var(--s-3) 0 0; font-size: 0.88rem; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .wait__track i { animation: none; width: 100%; opacity: 0.4; }
  * { transition-duration: 0.01ms !important; }
}

/* ─── THE PIECE ────────────────────────────────────────────────────
   The finished text is the only serif on the page. It is the thing
   the reader came for, so it reads like something published.        */

.piece { padding: var(--s-6) 0 0; }
.piece__rule {
  width: 100%;
  max-width: 62ch;
  height: 3px;
  background: var(--text);
  margin-bottom: var(--s-3);
}
.piece__deck {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  max-width: 62ch;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.piece__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.piece__score {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.piece__score[data-gain='up'] { color: var(--good); }
.piece__score[data-gain='down'] { color: var(--warn); }
.piece__score[data-gain='flat'] { color: var(--text-2); }

.piece__body {
  font-family: var(--font-serif);
  font-size: clamp(1.14rem, 0.5vw + 1rem, 1.36rem);
  line-height: 1.65;
  color: var(--text);
  max-width: 62ch;
}
.piece--compare .piece__body,
.piece__body p { margin: 0 0 1.1em; }
.piece__body p:last-child { margin-bottom: 0; }

.piece__tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.tool {
  padding: var(--s-1) var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.tool:hover { color: var(--accent); border-color: var(--accent); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool__stat {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

/* ─── ADVICE ───────────────────────────────────────────────────────  */

.advice { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.advice__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.advice__list { margin: 0; padding: 0; list-style: none; counter-reset: advice; max-width: 66ch; }
.advice__list li {
  counter-increment: advice;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  color: var(--text-1);
  font-size: 0.98rem;
}
.advice__list li:first-child { border-top: 0; }
.advice__list li::before {
  content: counter(advice);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50% !important;
  background: var(--accent);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
}
/* Explainer-licence additions ride the blue line: information, clearly labeled. */
.advice__list li.advice__add::before { background: var(--mta-blue); color: #fff; }

/* ─── FAULT ────────────────────────────────────────────────────────  */

.fault {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border: 1px solid var(--bad);
  border-left: 6px solid var(--bad);
  background: var(--bg-1);
}
.fault__tag {
  display: block;
  font-family: var(--font-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bad);
  margin-bottom: var(--s-1);
}
.fault p { margin: 0; color: var(--text-1); font-size: 0.94rem; }

/* ─── CREED — what's Non-Writing ───────────────────────────────────
   Off the rail deliberately: this is the manifesto, not a step. Full
   width, heavy top rule, numbered laws as a station list.            */

.creed {
  margin-top: var(--s-16);
  border-top: 10px solid var(--text);
  padding-top: var(--s-4);
  background: transparent;
}
.creed.fold { border-left: 0; border-right: 0; border-bottom: 0; }

.creed__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: var(--s-2) 0;
  cursor: pointer;
  list-style: none;
}
.creed__head::-webkit-details-marker { display: none; }
.creed__panel { margin-top: var(--s-4); }
.creed__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.creed__stamp {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.creed__lead { max-width: 60ch; margin-bottom: var(--s-2); }
.creed__lead p { margin: 0; color: var(--text-1); font-size: 1.06rem; }
.creed__lead strong { color: var(--text); font-weight: 600; }

/* The laws as a station list — each one a stop on a second line. */
.creed__laws {
  margin: var(--s-12) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: law;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0 var(--s-8);
}
.creed__laws li {
  counter-increment: law;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.creed__laws li::before {
  content: counter(law, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: none;
  border: 3px solid var(--text-3);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.creed__lawName {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 2px;
}
.creed__lawDetail { display: block; font-size: 0.9rem; color: var(--text-2); }

/* The canon — one signature move per thinker; full set in the download. */
.creed__canonHead { margin-top: var(--s-12); }
.creed__canonHead h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.creed__canonHead p { margin: 0 0 var(--s-4); color: var(--text-2); max-width: 56ch; font-size: 0.96rem; }

.creed__canon { margin: 0; padding: 0; list-style: none; }
.creed__canon li {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .creed__canon li { grid-template-columns: 1fr; gap: var(--s-1); } }
.creed__canonWho {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
}
.creed__canonMove { font-size: 0.92rem; color: var(--text-2); max-width: 62ch; }

/* Download block — the one call to action down here. */
.creed__take {
  display: flex;
  align-items: stretch;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.creed__takeText { flex: 1 1 340px; max-width: 56ch; }
.creed__takeText h3 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.creed__takeText p { margin: 0 0 var(--s-3); color: var(--text-2); font-size: 0.96rem; }
.creed__living { color: var(--text-3) !important; font-size: 0.9rem !important; }

.creed__dls {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: min(300px, 100%);
}
.creed__dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  background: var(--accent);
  color: #000;
  text-decoration: none;
  transition: background-color 160ms ease-out;
}
.creed__dl--sm {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--line);
}
.creed__dl--sm .creed__dlName { font-size: 0.86rem; color: var(--text); }
.creed__dl--sm:hover { background: var(--bg-3); border-color: var(--line-2); }
.creed__dl:hover { background: #ffe14d; }
.creed__dl:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.creed__dlName {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
}
.creed__dlMeta {
  font-family: var(--font-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}

/* ─── TAIL ─────────────────────────────────────────────────────────  */

.tail { margin-top: var(--s-16); }
.tail__rule { height: 1px; background: var(--line); }
.tail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6);
  padding-block: var(--s-8) var(--s-16);
}
.tail__k {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: var(--s-1);
}
.tail__v {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* ─── ADMIN ────────────────────────────────────────────────────────
   Same system, grey line (S — the shuttle). Denser: this is a reading
   surface for one person, not a front door.                          */

.admin .masthead h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }

.adminH {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: var(--s-12) 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-2);
}
.adminH__sub {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
.adminH .tool { margin-left: auto; text-decoration: none; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line);
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4);
  border-right: 1px solid var(--line);
  border-top: 2px solid var(--mta-grey);
}
.kpi:last-child { border-right: 0; }
.kpi__k {
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.kpi__v {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.kpi__n { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-3); }

.tableWrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.84rem; }
.grid th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  white-space: nowrap;
}
.grid td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

/* Original vs rewrite, side by side. */
.pair { border-top: 1px solid var(--line); padding: var(--s-6) 0; }
.pair__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.pair__reg {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  border-left: 3px solid var(--mta-grey);
  padding-left: var(--s-2);
}
.pair__meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-3); }
.pair__ask {
  margin: 0 0 var(--s-3);
  font-size: 0.9rem;
  color: var(--text-2);
  font-style: italic;
}
.pair__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 860px) { .pair__cols { grid-template-columns: 1fr; } }
.pair__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: var(--s-2);
}
.pair__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-2);
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  padding-right: var(--s-2);
}
.pair__text--out { font-family: var(--font-serif); color: var(--text); font-size: 1rem; }
.pair__notes { margin: var(--s-4) 0 0; padding-left: var(--s-4); }
.pair__notes li { font-size: 0.86rem; color: var(--text-3); margin-bottom: var(--s-1); }

/* ─── LIGHT MODE ───────────────────────────────────────────────────
   The white MTA sign field. Same system, inverted surfaces.         */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f4f2;  --bg-1: #ffffff; --bg-2: #ececea; --bg-3: #e0e0dd;
    --line: #c9c9c4; --line-2: #8a8a84;
    --text: #12151a; --text-1: #33383f; --text-2: #5b6169; --text-3: #767c85;
    --data: #1d4ed8;
  }
  .bullet, .go, .stop--terminal .stop__num, .advice__list li::before { color: #000; }
  .stop__mark { background: var(--bg); border-color: var(--text); }
  .go:hover:not(:disabled) { background: #ffd93b; }
}

/* ═══════════════════════════════════════════════════════════════════
   TABS — the two products plus the reading rooms.
   Drawn as a station sign: heavy rule, bullets for the two apps.
   ═══════════════════════════════════════════════════════════════════ */

.tabs {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  max-width: var(--page);
  margin: calc(var(--s-8) * -1 + var(--s-2)) auto var(--s-8);
  padding-inline: var(--s-6);
  border-bottom: 2px solid var(--text);
}
.tabs__gap { flex: 1 1 auto; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.tab:hover { color: var(--text-1); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); }

.tab--main { font-size: 0.88rem; padding-inline: var(--s-2) var(--s-3); }
.tab__bullet {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50% !important;
  background: var(--accent);
  color: #000;
  font-size: 0.78rem;
  font-weight: 700;
}
.tab__bullet--ask { background: var(--mta-blue); color: #fff; }
.tab__bullet--legal { background: var(--mta-brown); color: #fff; }
.tab__bullet--dnd { background: var(--mta-pine); color: #fff; }
.tab__bullet--talk { background: var(--mta-turq); color: #000; }
.tab[aria-current='page'].tab--main:nth-of-type(2) { border-bottom-color: var(--mta-blue); }
.tab[aria-current='page'].tab--main:nth-of-type(3) { border-bottom-color: var(--mta-brown); }
.tab[aria-current='page'].tab--main:nth-of-type(4) { border-bottom-color: var(--mta-pine); }
.tab[aria-current='page'].tab--main:nth-of-type(5) { border-bottom-color: var(--mta-turq); }

@media (max-width: 700px) {
  .tabs {
    padding-inline: var(--s-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: var(--s-2) var(--s-3); font-size: 0.76rem; letter-spacing: 0.06em; flex: none; }
  .tab--main { font-size: 0.86rem; }
  .tabs__gap { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIVE QUEUE CARD — the honest "where am I" readout.
   ═══════════════════════════════════════════════════════════════════ */

.queuecard {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
}
.queuecard__pos {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.queuecard__pos--now { color: var(--good); font-size: 1.6rem; }
.queuecard__label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.queuecard__eta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.queuecard__depth {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════
   INTENSITY SPECTRUM — gentle → unflinching, as a heat ramp.
   ═══════════════════════════════════════════════════════════════════ */

.spectrum { display: flex; flex-direction: column; border: 1px solid var(--line); }

.spec {
  display: grid;
  grid-template-columns: 6px 1fr;
  grid-template-areas: 'bar name' 'bar hint';
  gap: 0 var(--s-3);
  padding: var(--s-3);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.spec:first-child { border-top: 0; }
.spec:hover { background: var(--bg-1); }
.spec:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* The bar warms from yellow to red across the five settings. */
.spec__bar {
  grid-area: bar;
  align-self: stretch;
  background: color-mix(in oklab, var(--mta-red) calc(var(--heat) * 100%), var(--mta-yellow));
  opacity: 0.28;
  transition: opacity 160ms ease-out;
}
.spec[aria-checked='true'] .spec__bar { opacity: 1; }
.spec[aria-checked='true'] { background: var(--bg-1); }

.spec__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-2);
}
.spec[aria-checked='true'] .spec__name { color: var(--text); }
.spec__hint { grid-area: hint; font-size: 0.88rem; color: var(--text-3); }

.go--ask { background: var(--mta-blue); color: #fff; }
.go--ask:hover:not(:disabled) { background: #1a52c7; }
.notice--ask .notice__flag {
  background: repeating-linear-gradient(-45deg, var(--mta-blue) 0 8px, #000 8px 16px);
}
.go--legal { background: var(--mta-brown); color: #fff; }
.go--legal:hover:not(:disabled) { background: #b0783d; }
.notice--legal .notice__flag {
  background: repeating-linear-gradient(-45deg, var(--mta-brown) 0 8px, #000 8px 16px);
}
.bullet--legal { background: var(--mta-brown) !important; color: #fff; }

.legal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.chip {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.3;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-1);
  cursor: pointer;
  text-align: start;
}
.chip:hover { border-color: var(--mta-brown); color: var(--text); }
.chip:focus-visible { outline: 2px solid var(--mta-brown); outline-offset: 2px; }

/* ─── NON-LAWS — how-it-works + split Q&A | appendix ──────────────── */

.laws-how {
  margin: 0 0 var(--s-6);
  padding: var(--s-5) var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-left: 4px solid var(--mta-brown);
}
.laws-how__kicker {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mta-brown);
}
.laws-how__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.laws-how__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  counter-reset: laws-how;
}
.laws-how__steps li {
  position: relative;
  padding-left: calc(var(--s-8) + var(--s-1));
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1);
  counter-increment: laws-how;
}
.laws-how__steps li::before {
  content: counter(laws-how);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--mta-brown);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.laws-how__steps strong { color: var(--text); font-weight: 600; }

.laws-stage { display: block; }
.laws-stage__appendix { min-width: 0; margin-top: var(--s-6); }

.appendix {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: var(--s-4);
  min-height: 12rem;
}
.appendix__head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.appendix__badge {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--mta-brown);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.appendix__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.appendix__sub {
  margin: var(--s-1) 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.35;
}
.appendix__empty {
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: var(--s-4) 0;
}
.appendix__empty p { margin: 0 0 var(--s-2); }
.appendix__body { display: grid; gap: var(--s-5); }
.appendix__section-title {
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.statute, .deka-card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: var(--s-3) var(--s-4);
}
.statute__cite, .deka-card__cite {
  display: inline-block;
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--mta-brown);
  letter-spacing: 0.02em;
}
.statute__law {
  margin: 0 0 var(--s-2);
  font-size: 0.78rem;
  color: var(--text-3);
}
.statute__text, .deka-card__head {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.deka-card__link {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: 0.82rem;
  color: var(--data);
}
.appendix__foot {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--text-3);
  line-height: 1.4;
}

@media (min-width: 1000px) {
  .laws-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .laws-stage__main {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
  }
  .laws-stage__appendix {
    margin-top: 0;
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
  }
  .appendix { min-height: calc(100vh - var(--s-16)); }
  #panel-laws .stop { padding-bottom: var(--s-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   DND · DR NON'S DIGEST — a board, not a feed.
   The 4 5 6 runs down the left. Every story is a stop on it.
   ═══════════════════════════════════════════════════════════════════ */

.dnd-how {
  margin: 0 0 var(--s-6);
  padding: var(--s-5) var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  background: var(--bg-1);
  border-left: 4px solid var(--mta-pine);
}
.dnd-how__kicker {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mta-pine);
}
.dnd-how__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.dnd-how__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  counter-reset: dnd-how;
}
.dnd-how__steps li {
  position: relative;
  padding-left: calc(var(--s-8) + var(--s-1));
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-1);
  counter-increment: dnd-how;
}
.dnd-how__steps li::before {
  content: counter(dnd-how);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--mta-pine);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dnd-how__steps strong { color: var(--text); font-weight: 600; }

.dnd-stage { display: block; }
.dnd-stage__read { min-width: 0; margin-top: var(--s-6); }

/* ─── the board ───────────────────────────────────────────────────── */

.dnd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
}
.chip--dnd:hover { border-color: var(--mta-pine); color: var(--text); }
.chip--dnd:focus-visible { outline: 2px solid var(--mta-pine); outline-offset: 2px; }
.chip--dnd[aria-pressed='true'] {
  background: var(--mta-pine);
  border-color: var(--mta-pine);
  color: #fff;
  font-weight: 600;
}
.chip__n {
  margin-left: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.chip--dnd[aria-pressed='true'] .chip__n { color: #fff; }

.dnd-board { border-top: 1px solid var(--line); }
.dnd-board__loading,
.dnd-board__empty {
  margin: 0;
  padding: var(--s-6) 0;
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.5;
}

.despatch {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--s-4);
  width: 100%;
  margin: 0;
  padding: var(--s-4) var(--s-1) var(--s-4) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
/* The rail is drawn per stop — never as one floating element. */
.despatch::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-2);
}
.despatch:first-of-type::before { top: var(--s-4); }
.despatch:last-of-type::before { bottom: auto; height: var(--s-4); }
.despatch:hover { background: var(--bg-1); }
.despatch:focus-visible { outline: 2px solid var(--mta-pine); outline-offset: -2px; }
.despatch[aria-current='true'] { background: var(--bg-1); }
.despatch[aria-current='true'] .despatch__hed { color: var(--mta-pine); }

.despatch__rail { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-2); }
.despatch__mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  border: 2px solid var(--line-2);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.despatch[data-signal='4'] .despatch__mark,
.despatch[data-signal='5'] .despatch__mark {
  background: var(--mta-pine);
  border-color: var(--mta-pine);
  color: #fff;
}
.despatch__date {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-3);
  background: var(--bg);
  padding: 2px 0;
}
.despatch__beat {
  display: block;
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.despatch__hed {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.despatch__blurb {
  margin: var(--s-2) 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.despatch--lead { border-left: 4px solid var(--mta-pine); padding-left: var(--s-3); }
.despatch--lead .despatch__hed { font-size: 1.16rem; }
.despatch--lead::before { left: 31px; }

.dnd-desk {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ─── the reading room ────────────────────────────────────────────── */

.digest {
  border: 1px solid var(--line);
  background: var(--bg-1);
  padding: var(--s-4);
  min-height: 12rem;
}
.digest__head {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.digest__badge {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  background: var(--mta-pine);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}
.digest__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.digest__sub {
  margin: var(--s-1) 0 0;
  font-size: 0.82rem;
  color: var(--text-3);
  line-height: 1.35;
}
.digest__empty {
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.45;
  padding: var(--s-4) 0;
}
.digest__empty p { margin: 0 0 var(--s-2); }

.digest__line {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mta-pine);
}
.digest__hed {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 700;
  line-height: 1.22;
  color: var(--text);
}
.digest__blurb {
  margin: var(--s-4) 0 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.digest__note {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--text-1);
}
.digest__note p { margin: 0 0 var(--s-3); }
.digest__note h4 {
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.digest__note ul { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.digest__note li { margin: 0 0 var(--s-1); }

.dials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dials li {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  background: var(--bg);
}
.dial__k {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dial__v {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.digest__panel {
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mta-pine);
  background: var(--bg);
}
.digest__panel--dyk { border-left-color: var(--mta-orange); }
.digest__panelTitle {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.digest__panel p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-1); }

.digest__srcWrap { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.digest__sources { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.digest__sources a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--data);
  word-break: break-word;
}
.digest__sources span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── ask about this story ────────────────────────────────────────── */

.dndask {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 3px solid var(--mta-pine);
}
.dndask__title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.dndask__note {
  margin: 0 0 var(--s-4);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-3);
}
.dnd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.go--dnd { background: var(--mta-pine); color: #fff; }
.go--dnd:disabled {
  color: #fff;
  background: repeating-linear-gradient(-45deg, var(--mta-pine) 0 8px, #000 8px 16px);
}
.go--dnd:hover:not(:disabled) { background: #05ad49; }
.bullet--dnd { background: var(--mta-pine) !important; color: #fff; }
.notice--dnd { margin-top: var(--s-6); }
.notice--dnd .notice__flag {
  background: repeating-linear-gradient(-45deg, var(--mta-pine) 0 8px, #000 8px 16px);
}
/* Already inside the reading-room box — no second frame around the answer. */
#dndArrival.arrival--pane {
  border: 0;
  padding: 0;
  background: none;
  min-height: 0;
  margin-top: var(--s-4);
}

@media (min-width: 1000px) {
  .dnd-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .dnd-stage__board {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
  }
  .dnd-stage__read {
    margin-top: 0;
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
  }
  .digest { min-height: calc(100vh - var(--s-16)); }
  #panel-dnd .stop { padding-bottom: var(--s-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   NON-TALK — the T line. The day, spoken.

   Borrows the DND stage geometry deliberately: both are reading rooms
   over a board, and two different layouts for the same job would be a
   design failure, not variety.
   ═══════════════════════════════════════════════════════════════════ */

#panel-talk .dnd-how__steps li::before { background: var(--mta-turq); color: #000; }

.talk-stage { display: block; }
.talk-stage__side { min-width: 0; margin-top: var(--s-6); }

.talk-empty {
  padding: var(--s-6) 0;
  color: var(--text-3);
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: var(--s-4);
}

.talk-now { border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-4); }

.talk-now__day {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mta-turq);
}
.talk-now__title {
  margin: var(--s-2) 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.talk-player {
  border-left: 4px solid var(--mta-turq);
  background: var(--bg-2);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
/* The browser's own control. A hand-rolled player would be one more thing
   to keep working at 3 AM, and this one already does keyboard and scrubbing. */
.talk-player audio { width: 100%; display: block; }
.talk-player__voice {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.talk-textonly {
  border-left: 4px solid var(--mta-orange);
  background: var(--bg-2);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  font-size: 0.88rem;
  color: var(--text-1);
}

.talk-now__summary {
  margin: 0 0 var(--s-4);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-1);
}

.talk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.talk-meta b { color: var(--text-1); font-weight: 600; }

.talk-script { margin-top: var(--s-4); }
.talk-script > summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: var(--s-2) 0;
}
.talk-script > summary:hover { color: var(--text); }
.talk-script__body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-1);
  padding-top: var(--s-3);
}
.talk-script__body p { margin: 0 0 var(--s-4); }

.talk-stories { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ─── the archive ─────────────────────────────────────────────────── */

.talk-archive { border-top: 1px solid var(--line); margin-top: var(--s-4); }

.talk-ep {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.talk-ep:hover { background: var(--bg-2); }
.talk-ep:focus-visible { outline: 2px solid var(--mta-turq); outline-offset: -2px; }
.talk-ep[aria-current='true'] { border-left: 4px solid var(--mta-turq); padding-left: var(--s-3); }
.talk-ep__day {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.talk-ep__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
.talk-ep__sum {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1.45;
}
.talk-ep__len {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
}

/* ─── patterns across the archive ─────────────────────────────────── */

.talk-patterns { display: block; }

.talk-pattern {
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
}
.talk-pattern__top {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: space-between;
}
.talk-pattern__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.talk-pattern__days {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-3);
  white-space: nowrap;
}
.talk-pattern__tags {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.talk-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px var(--s-2);
  border: 1px solid var(--line-2);
  color: var(--text-2);
}
/* Direction is the day's own reading; momentum is arithmetic over the
   archive. Colour names which of the two you are looking at, nothing more. */
.talk-tag--rising { border-color: var(--mta-turq); color: var(--mta-turq); }
.talk-tag--contested { border-color: var(--mta-orange); color: var(--mta-orange); }
.talk-tag--fading { border-color: var(--line-2); color: var(--text-3); }
.talk-tag--building { border-color: var(--mta-yellow); color: var(--mta-yellow); }
.talk-tag--new { border-color: var(--mta-green); color: var(--mta-green); }

.talk-pattern__ev {
  margin: var(--s-2) 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-3);
}

.talk-patterns__caveat {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-3);
}

.notice--talk { margin-top: var(--s-6); }
.notice--talk .notice__flag {
  background: repeating-linear-gradient(-45deg, var(--mta-turq) 0 8px, #000 8px 16px);
}

@media (min-width: 1000px) {
  .talk-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  .talk-stage__now {
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
    padding-right: var(--s-2);
  }
  .talk-stage__side {
    margin-top: 0;
    position: sticky;
    top: var(--s-4);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
  }
  #panel-talk .stop { padding-bottom: var(--s-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   DIAGRAM — mind maps drawn as transit diagrams.
   ═══════════════════════════════════════════════════════════════════ */

.dgmWrap { margin: var(--s-8) 0 0; padding: 0; border-top: 1px solid var(--line); padding-top: var(--s-6); }
.dgmWrap__cap {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-bottom: var(--s-4);
}
.dgmWrap__canvas { overflow-x: auto; }
.dgm { width: 100%; height: auto; min-width: 280px; display: block; }
.dgm__box { fill: var(--bg-1); stroke: var(--line); stroke-width: 1; }
.dgm__label {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.dgm__note { fill: var(--text-3); font-family: var(--font-sans); font-size: 11px; }
.dgm__edge {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dgm__rail { stroke-linecap: butt; stroke-linejoin: miter; }

/* ═══════════════════════════════════════════════════════════════════
   SOURCES — the receipts under an answer.
   ═══════════════════════════════════════════════════════════════════ */

.sources { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.sources__conf {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: none;
}
.sources__list { margin: 0; padding-left: var(--s-6); }
.sources__list li { margin-bottom: var(--s-2); font-size: 0.9rem; }
.sources__list a { color: var(--data); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.sources__list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.answer__disclaimer {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════
   READER — About / System / Fine print.
   ═══════════════════════════════════════════════════════════════════ */

.reader { max-width: 68ch; padding-bottom: var(--s-24); }
.reader__h1 {
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  border-bottom: 6px solid var(--accent);
  padding-bottom: var(--s-3);
}
.reader__h2 {
  margin: var(--s-12) 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.reader__lead { font-size: 1.1rem; color: var(--text-1); margin-bottom: var(--s-6); }
.reader p { margin: 0 0 var(--s-4); color: var(--text-2); line-height: 1.65; }

/* About sub-tabs + shelf + kit */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 var(--s-8);
  border-bottom: 1px solid var(--line);
}
.subtab {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--text-1); }
.subtab[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.shelf {
  list-style: none;
  margin: 0 0 var(--s-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-6);
}
.shelf__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.shelf__cover {
  margin: 0;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.shelf__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shelf__title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--text);
}
.shelf__author {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.shelf__why {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.5;
}
.shelf__note { font-size: 0.9rem; color: var(--text-3); }
.kitlist {
  list-style: none;
  margin: 0 0 var(--s-8);
  padding: 0;
  border-top: 1px solid var(--line);
}
.kitlist li { border-bottom: 1px solid var(--line); }
.kitlist__a {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  text-decoration: none;
  color: inherit;
  border-bottom: none !important;
}
.kitlist__a:hover .kitlist__name { color: var(--accent); }
.kitlist__name {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
.kitlist__desc {
  font-size: 0.88rem;
  color: var(--text-3);
  line-height: 1.4;
}
.reader__th {
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', 'Thonburi', 'Leelawadee UI', sans-serif;
  padding-left: var(--s-4);
  border-left: 3px solid var(--line-2);
}
.reader strong { color: var(--text); font-weight: 600; }
.reader a { color: var(--data); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.reader a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.reader code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-2);
  padding: 1px 5px;
  color: var(--text-1);
}

.reader__steps { margin: 0 0 var(--s-6); padding-left: var(--s-6); }
.reader__steps li { margin-bottom: var(--s-3); color: var(--text-2); line-height: 1.6; }
.reader__list { margin: 0 0 var(--s-6); padding-left: var(--s-6); }
.reader__list li { margin-bottom: var(--s-3); color: var(--text-2); line-height: 1.6; }

.reader__table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-6); font-size: 0.9rem; }
.reader__table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.reader__table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.84rem;
}

/* ═══════════════════════════════════════════════════════════════════
   NON SCORE — the diagnosis, before the rewrite.
   Hemingway shows you difficulty. This shows you whether the writing
   earned its place, which is a different and harder question.
   ═══════════════════════════════════════════════════════════════════ */

.nonscore {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: var(--bg-1);
}
.nonscore__sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
}
.nonscore__sum::-webkit-details-marker { display: none; }
.nonscore__num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--tone, var(--text));
}
.nonscore__of {
  font-family: var(--font-display);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
}
.nonscore__say {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  flex: 1 1 8rem;
  min-width: 0;
}
.nonscore__tap {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nonscore[open] .nonscore__tap { display: none; }
.nonscore__body { border-top: 1px solid var(--line); }
.nonscore__stats {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}

.nonscore__dims { margin: 0; padding: var(--s-3) var(--s-4); list-style: none; display: grid; gap: var(--s-2); }
.nonscore__dims li {
  display: grid;
  grid-template-columns: 1fr 120px 34px;
  align-items: center;
  gap: var(--s-3);
}
.dim__label { font-size: 0.84rem; color: var(--text-2); }
.dim__track { height: 6px; background: var(--bg-2); }
.dim__fill { display: block; height: 100%; background: var(--tone, var(--text-3)); transition: width 200ms ease-out; }
.dim__n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  text-align: right;
}

.nonscore__caught { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.caught { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: baseline; }
.caught__k {
  font-family: var(--font-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  min-width: 92px;
}
.caught__v { font-family: var(--font-mono); font-size: 0.76rem; color: var(--bad); }
.caught__v--quote { color: var(--text-3); font-style: italic; font-family: var(--font-sans); }

@media (max-width: 620px) {
  .nonscore__dims li { grid-template-columns: 1fr 70px 30px; }
  .nonscore__num { font-size: 1.5rem; }
}

/* Legacy delta card — superseded by .piece__score one-liner; keep for safety. */
.delta { display: none; }

/* Tap folds — dials and creed depth stay off the first ride on phones. */
.fold {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  background: var(--bg-1);
}
.fold__sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-1);
}
.fold__sum::-webkit-details-marker { display: none; }
.fold__hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.fold__body { padding: 0 var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.fold__body .sub:first-child { margin-top: var(--s-4); }

/* Intent presets — station-directory chips, not SaaS pills. */
.intent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
}
.intent__opt {
  padding: var(--s-1) var(--s-3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.intent__opt:hover { color: var(--text); border-color: var(--line-2); }
.intent__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.intent__opt[aria-checked='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* Side-by-side contrast — the product's payoff. */
.compare-tog {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  user-select: none;
}
.compare-tog input { position: absolute; opacity: 0; width: 0; height: 0; }
.compare-tog__box {
  width: 14px;
  height: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  display: grid;
  place-items: center;
}
.compare-tog input:checked + .compare-tog__box {
  background: var(--accent);
  border-color: var(--accent);
}
.compare-tog input:checked + .compare-tog__box::after {
  content: '';
  width: 6px;
  height: 6px;
  background: #000;
}
.compare-tog:hover { color: var(--text-1); }
.compare-tog input:focus-visible + .compare-tog__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
}
.compare__col {
  padding: var(--s-4);
  min-width: 0;
  border-right: 1px solid var(--line);
}
.compare__col:last-child { border-right: 0; }
.compare__col--out { background: var(--bg-1); }
.compare__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.compare__text {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.compare__col--out .compare__text { color: var(--text); }

@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
  .compare__col { border-right: 0; border-bottom: 1px solid var(--line); }
  .compare__col:last-child { border-bottom: 0; }
}

/* System directory — station listing, not a card grid. */
.directory {
  margin: var(--s-4) 0 var(--s-6);
  border-top: 1px solid var(--line);
}
.directory dt {
  margin: var(--s-3) 0 0;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.directory dd {
  margin: var(--s-1) 0 0;
  color: var(--text-2);
  font-size: 0.95rem;
  max-width: 58ch;
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND — the badge replaces the route bullet in the masthead.
   It keeps its own circular artwork, so the global zero-radius rule
   is irrelevant here; the PNG carries the shape.
   ═══════════════════════════════════════════════════════════════════ */

.brand { display: block; flex: none; line-height: 0; text-decoration: none; }
.brand__logo {
  width: clamp(56px, 7vw, 84px);
  height: auto;
  display: block;
  /* The badge is navy-on-white; on the dark field it needs a hair of lift. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.28));
  transition: transform 160ms ease-out;
}
.brand:hover .brand__logo { transform: translateY(-1px); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* On the reading tabs the badge stays, but the tab bullet identifies section. */
@media (max-width: 620px) {
  .brand__logo { width: 48px; }
  .masthead { flex-wrap: wrap; gap: var(--s-3); }
  .masthead__board {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-2) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .board__rows { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__logo { transition: none; }
  .brand:hover .brand__logo { transform: none; }
}

/* The badge stands in for the N bullet on the Non-Writer tab. Same size and
   baseline as .tab__bullet so the two tabs stay optically level. */
.tab__logo {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
  object-fit: contain;
}

/* The heat dial reuses the Ask Non spectrum, tightened for a secondary control. */
.spectrum--heat .spec { padding: var(--s-2) var(--s-3); }
.spectrum--heat .spec__name { font-size: 0.94rem; }
.spectrum--heat .spec__hint { font-size: 0.82rem; }

/* When the dial is turned up, the note stops being a caption and starts
   being a warning. Same element, different weight. */
.lang__note--warn {
  color: var(--mta-orange);
  border-left: 3px solid var(--mta-orange);
  padding-left: var(--s-3);
}

/* A redirected piece is not a failure — it is the machine choosing. It gets
   its own mark so it never reads as "your rewrite, but worse". */
.piece--redirected .piece__rule { background: var(--mta-orange); width: 100%; }
.redirected__tag {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--mta-orange);
  color: var(--mta-orange);
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ─── SERVICE KEY (BYOK) ───────────────────────────────────────────
   Station notice, not a settings modal. Collapsed by default.        */

.servicekey {
  margin: var(--s-6) 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--mta-grey);
  background: var(--bg-1);
}
.servicekey__sum {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  list-style: none;
}
.servicekey__sum::-webkit-details-marker { display: none; }
.servicekey__bullet { background: var(--mta-grey); color: #fff; width: 24px; height: 24px; font-size: 0.7rem; }
.servicekey__opt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.servicekey__body { padding: 0 var(--s-4) var(--s-4); }
.servicekey__lead,
.servicekey__hint {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 0 0 var(--s-3);
  max-width: 62ch;
}
.servicekey__label {
  display: block;
  margin: var(--s-3) 0 var(--s-1);
  font-family: var(--font-display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
.servicekey__howto {
  margin: var(--s-3) 0;
  padding: var(--s-3);
  border-left: 3px solid var(--data);
  background: var(--bg-2);
  font-size: 0.88rem;
  color: var(--text-1);
  max-width: 64ch;
  line-height: 1.45;
}
.servicekey__howto a { color: var(--data); }
.servicekey__howto code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--text);
}
.servicekey__custom { margin-top: var(--s-2); }
.servicekey__remember { margin-top: var(--s-4); }
.servicekey__actions { margin-top: var(--s-3); }
.fault .tool { margin-top: var(--s-3); }

/* High-heat confirm — two lines, no modal chrome. */
.heatconfirm {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(10, 14, 20, 0.72);
  padding: var(--s-6);
}
.heatconfirm__panel {
  width: min(420px, 100%);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-top: 6px solid var(--mta-orange);
  padding: var(--s-6);
}
.heatconfirm__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.heatconfirm__body { margin: 0 0 var(--s-6); color: var(--text-2); }
.heatconfirm__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: flex-end;
}

/* Heat as a horizontal 5-bullet strip on narrow viewports. */
@media (max-width: 699px) {
  .spectrum--heat {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--s-1);
    overflow-x: auto;
  }
  .spectrum--heat .spec {
    flex: 1 0 auto;
    min-width: 64px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s-2);
  }
  .spectrum--heat .spec__bar { width: 100%; height: 4px; }
  .spectrum--heat .spec__hint { display: none; }
  .spectrum--heat .spec__name { font-size: 0.78rem; }
}

/* Corroboration from the Digest desk — a different colour because it is a
   different kind of claim: not this archive's count, but another service's. */
.talk-tag--desk { border-color: var(--mta-pine); color: var(--mta-pine); }
.talk-patterns__desk {
  margin: var(--s-4) 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
  border-left: 3px solid var(--mta-pine);
  padding-left: var(--s-3);
}

/* ═══════════════════════════════════════════════════════════════════
   CITATIONS — open research, shown as a route between claim and source.

   A superscript number is the smallest mark that can carry a link without
   interrupting a sentence. It gets the Ask Non blue because it belongs to
   that product line, and it is a real button so it reaches the keyboard.
   ═══════════════════════════════════════════════════════════════════ */

.cite {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  margin: 0 1px;
  border: 0;
  background: var(--bg-3);
  color: var(--mta-blue);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.62em;
  line-height: 1.5;
  vertical-align: super;
  cursor: pointer;
}
.cite:hover { background: var(--mta-blue); color: #fff; }
.cite:focus-visible { outline: 2px solid var(--mta-blue); outline-offset: 1px; }

.sources__cited {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
  padding: var(--s-2);
  margin-left: calc(var(--s-2) * -1);
  border-left: 2px solid transparent;
  transition: background 120ms linear, border-color 120ms linear;
}
.sources__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--mta-blue);
  text-align: right;
}
.sources__host {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  grid-column: 2;
}
/* Hover from the answer lights the source; a click parks a brighter mark on it
   long enough to find, then lets go. */
.sources__cited--lit { background: var(--bg-2); border-left-color: var(--mta-blue); }
.sources__cited--hit { background: var(--bg-3); border-left-color: var(--mta-blue); }

@media (prefers-reduced-motion: reduce) {
  .sources__cited { transition: none; }
}