/* ============================================================
   Markdown To — specification sheets  (site/specs/*.html)

   The interior pages of the same publication, in their airy
   edition. Typography, the vermillion accent and the
   file-beside-app idiom all come from ../styles.css, which each
   page links first; this file loads second and takes the ground
   somewhere lighter:

     · near-white surfaces instead of deep cream
     · rounded cards with soft elevation instead of hairline grids
     · generous whitespace instead of ruled compartments

   Light is the primary design. The dark block at the end is the
   automatic prefers-color-scheme variant, derived from it.

   No arrow glyphs anywhere — the subset fonts have none. Every
   chevron below is drawn from two CSS borders.
   ============================================================ */

/* ============================================================
   0. Tokens — light first
   ============================================================ */

:root {
  --paper:      #fdfcfa;   /* the page */
  --paper-2:    #f7f5f0;   /* alternating band */
  --paper-3:    #f1eee6;   /* recessed panel */
  --card:       #ffffff;   /* anything that lifts off the page */

  --ink:        #1b1913;
  --ink-2:      #514b3d;
  /* darker than the letterpress edition's tertiary ink: on near-white
     the old value fell just under 4.5:1 for running text */
  --ink-3:      #6f6856;

  --rule:       rgba(27, 25, 19, .085);
  --rule-soft:  rgba(27, 25, 19, .045);
  --code-bg:    rgba(27, 25, 19, .045);

  --acc-line:   rgba(195, 60, 25, .26);
  /* Panel tints are solid, not translucent: a tint that composites
     differently over the page and over the alternating band lands the
     vermillion label on one side of 4.5:1 and the other side of it. */
  --tint:       #fcf3f0;
  --tint-warn:  #faf3e6;
  --acc-soft:   var(--tint);

  --shadow-s:   0 1px 2px rgba(27, 25, 19, .04), 0 4px 12px -8px rgba(27, 25, 19, .14);
  --shadow-m:   0 1px 2px rgba(27, 25, 19, .04), 0 12px 28px -16px rgba(27, 25, 19, .22);
  --shadow-l:   0 2px 4px rgba(27, 25, 19, .05), 0 22px 46px -24px rgba(27, 25, 19, .3);

  --r:          14px;
  --r-sm:       8px;
  --r-xs:       5px;

  --sev-error:     var(--acc);
  --sev-warning:   #8a5f0e;
  --sev-info:      var(--ink-3);
  --sev-warn-soft: var(--tint-warn);
}

/* ============================================================
   1. Ground: soften what the shared sheet rules hard
   ============================================================ */

body { background: var(--paper); }
/* The paper grain belongs to the letterpress ground; on white it
   only muddies the surface. */
body::after { display: none; }

/* The base sheet resets h1–h3; these sheets go deeper, and so does the
   quoted output of the renderer. */
h4, h5, h6 { margin: 0; font-size: inherit; }

/* Inline code is `nowrap` in the base sheet, which is right for
   `[due:: 2026-08-20]` and wrong for `specs/kanban/fixtures/valid/…`.
   These sheets name paths, patterns and signatures constantly, and one
   40-character token must never be allowed to set the page's width.
   `anywhere` breaks only when the token genuinely does not fit. */
code {
  border-radius: var(--r-xs);
  padding: .12em .32em;
  white-space: normal;
  overflow-wrap: anywhere;
}
code.long { white-space: pre-wrap; }

/* Grid items take `min-width: auto`, so a single unbreakable line inside
   a plate can widen its whole column and, through it, the page. Every
   track on these sheets is allowed to be narrower than its contents;
   the contents scroll inside themselves instead. */
.section__in > *, .fig__grid > *, .proof > *, .ledger > *, .ledger > li > *,
.agentbox > *, .agentbox__points > *, .verbtable > *, .verbtable__row > *,
.catalogue > *, .facts > *, .diags > *, .codes > *, .ranges > *,
.constructs > *, .pagenav__in > *, .linkout > *,
.render__body .r-board > *, .render__body .r-items > *, .render__body .r-sub > * {
  min-width: 0;
}

/* Sections separate by ground colour and air, not by a ruled edge. */
.section { border-top: 0; }
.section--alt { background: var(--paper-2); }
.section__in { padding-block: clamp(3.4rem, 8vw, 6.5rem); }

.topnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--acc);
}

/* Code plates keep the inked ground — a dark card is what makes a
   file read as a file — but they round off and lift softly. */
.plate {
  border-radius: var(--r);
  box-shadow: var(--shadow-m);
}
.plate__bar { padding: .62rem .95rem; }
pre.md, pre.term { padding: 1.05rem clamp(.95rem, 2vw, 1.35rem) 1.25rem; }

.figcap {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 1.1rem;
}

/* The pull quote becomes a tinted panel rather than a ruled margin. */
.pull {
  border-left: 0;
  border-radius: var(--r);
  background: var(--acc-soft);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  max-width: 52rem;
}
.pull footer { max-width: 42rem; color: var(--ink-2); }

.verbs code {
  border-radius: 100px;
  padding: .24rem .6rem;
  background: var(--card);
  box-shadow: var(--shadow-s);
  border-color: transparent;
}
.verbs code.is-hosted { border-color: var(--acc-line); }
/* A verb the spec defines and deliberately does not ship yet. It loses its
   lift and keeps its ink: a deferred verb is still part of the vocabulary,
   and a reader has to be able to read the name to know not to call it. */
.verbs code.is-deferred {
  color: var(--ink-2); background: transparent;
  border-color: var(--rule); box-shadow: none;
}

/* A verb chip that links out (the stable spec URLs) keeps the same pill;
   the anchor just drops the underline that would otherwise cut across it. */
.verbs a { text-decoration: none; transition: transform .2s; }
.verbs a:hover { transform: translateY(-1px); }
.verbs a:hover code { box-shadow: var(--shadow-m); }

/* ============================================================
   2. Colophon — the head of a specification sheet
   ============================================================ */

.colophon {
  position: relative;
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem) 0;
}
.colophon__kicker {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}
.colophon__back {
  text-decoration: none; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--card);
  border-radius: 100px;
  padding: .38rem .85rem .34rem .7rem;
  box-shadow: var(--shadow-s);
  transition: color .2s, box-shadow .2s, transform .2s;
}
.colophon__back:hover { color: var(--acc); box-shadow: var(--shadow-m); transform: translateY(-1px); }

/* left chevron, drawn */
.chev {
  width: 6px; height: 6px; flex: none;
  border: solid currentColor; border-width: 1.4px 0 0 1.4px;
  transform: rotate(-45deg);
}
.chev--r { border-width: 1.4px 1.4px 0 0; transform: rotate(45deg); }

.colophon__id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.1rem + 5.6vw, 5rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
.colophon__id .v { color: var(--acc); font-weight: 400; }

.colophon__line {
  margin-top: clamp(1.2rem, 3vw, 1.9rem);
  max-width: 46rem;
  font-size: clamp(1.08rem, .95rem + .65vw, 1.42rem);
  line-height: 1.42;
  letter-spacing: -.012em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.colophon__line strong { color: var(--ink); }
.colophon__line em { font-style: italic; color: var(--acc); }

/* the datasheet strip: four tiles, not four compartments */
.facts {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  display: grid; gap: .8rem;
}
@media (min-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1rem 1.1rem 1.15rem;
}
.facts dt {
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .5rem;
}
.facts dd {
  margin: 0; font-family: var(--font-mono); font-size: .76rem;
  line-height: 1.5; color: var(--ink);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}
.facts dd a { color: var(--acc); text-decoration-color: var(--acc-line); }
.facts dd .dim { color: var(--ink-3); }

/* ============================================================
   3. Contents strip
   ============================================================ */

.contents {
  max-width: var(--wide);
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}
.contents__in {
  background: var(--card);
  border-radius: 100px;
  box-shadow: var(--shadow-s);
  padding: .5rem clamp(.9rem, 2vw, 1.4rem);
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.9rem, 2.2vw, 1.8rem);
  font-family: var(--font-mono);
  font-size: .7rem; letter-spacing: .02em;
  font-variant-numeric: lining-nums;
}
@media (max-width: 620px) { .contents__in { border-radius: var(--r); } }
.contents__in a {
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .3rem .1rem;
  transition: color .18s;
}
.contents__in a:hover { color: var(--ink); }
.contents__in a:hover b { color: var(--acc); }
.contents__in b { color: var(--ink-3); font-weight: 400; }

/* ============================================================
   4. Figure — the file beside the app
   ============================================================ */

.fig { margin-top: clamp(2rem, 4.5vw, 3rem); }
.fig__grid {
  display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .fig__grid { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); align-items: stretch; }
  .fig__grid > * { min-width: 0; }
}
.fig__note {
  margin-top: 1.4rem; font-size: .93rem; line-height: 1.6;
  color: var(--ink-3); max-width: 46rem;
}
.fig__note em { color: var(--ink-2); font-style: italic; }
.fig__note code { color: var(--ink-2); }

/* the paper frame around renderer output */
.render {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.render__bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.render__bar b { color: var(--ink-2); font-weight: 500; }
.render__bar .tail {
  margin-left: auto;
  background: var(--paper-2); border-radius: 100px;
  padding: .2rem .6rem .16rem; letter-spacing: .1em;
}
.render__body { padding: clamp(1rem, 2.4vw, 1.5rem); flex: 1; }

/* ============================================================
   5. Renderer output  (`r-` prefixed by site/tools/build-specs.mjs)

   These class names are exactly what @markdownto/web emits; the
   generator namespaces them so they cannot collide with the
   landing page's own .board / .card / .chip / .item rules.
   ============================================================ */

.render__body .r-display {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  font-weight: 400; line-height: 1.18; letter-spacing: -.02em;
  text-wrap: balance;
}
.render__body .r-display--plain { font-family: var(--font-mono); font-size: 1rem; }

.render__body .r-figcap {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .64rem; letter-spacing: .06em;
  color: var(--ink-3);
  margin: .6rem 0 1.1rem;
  font-variant-numeric: lining-nums;
}
.render__body .r-figcap__no { color: var(--acc); font-weight: 600; }
.render__body .r-figcap__tag {
  margin-left: auto; text-transform: uppercase; letter-spacing: .13em;
  font-size: .58rem;
  background: var(--paper-2); border-radius: 100px;
  padding: .16rem .5rem .12rem;
}

/* chips */
.render__body .r-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.render__body .r-chip {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .01em; line-height: 1.5;
  padding: .18rem .5rem; border-radius: 100px;
  background: var(--paper-2); color: var(--ink-3);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.render__body .r-chip b { font-weight: 500; color: var(--ink-2); }
.render__body .r-chip--prio-high { color: var(--acc); background: var(--acc-soft); }
.render__body .r-chip--prio-high b { color: var(--acc); }
.render__body .r-chip--prio-medium { color: var(--ink-2); }
/* The priority ladder reads by colour, never by opacity: low is the base
   chip's quiet ink, medium steps up, high takes the accent. Dimming the ink
   instead put `low` at 3.3:1, and a value worth printing is worth reading. */
.render__body .r-chip--prio-low { color: var(--ink-3); }
.render__body .r-chip--field { box-shadow: inset 0 0 0 1px var(--rule); background: transparent; }
.render__body .r-chip--invalid { color: var(--sev-error); background: var(--acc-soft); }
/* A pinned identifier recedes by losing its ground, not by fading. */
.render__body .r-chip--id { background: transparent; padding-inline: .22rem; }
.render__body .r-tag { color: var(--ink-3); font-family: var(--font-mono); font-size: .84em; }
.render__body .r-wikilink { color: var(--acc); }
.render__body a { color: var(--acc); }

/* board */
.render__body .r-board-scroll {
  overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
  margin: 0 calc(-1 * clamp(1rem, 2.4vw, 1.5rem));
  padding: .2rem clamp(1rem, 2.4vw, 1.5rem) .6rem;
}
.render__body .r-board {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(12rem, 1fr);
  gap: .9rem;
  min-width: min(100%, 48rem);
}
.render__body .r-col {
  background: var(--paper-2);
  border-radius: var(--r-sm);
  padding: .75rem .7rem 1rem;
}
.render__body .r-col__head {
  display: flex; align-items: baseline; gap: .4rem;
  padding: 0 .2rem .6rem;
}
.render__body .r-col__name {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
/* A count is information, so it steps back by size and position rather than
   by opacity — which had it at 2.8:1 on near-white. */
.render__body .r-col__n {
  margin-left: auto; font-family: var(--font-mono); font-size: .6rem;
  color: var(--ink-3); font-variant-numeric: lining-nums;
}
.render__body .r-col__empty {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); opacity: .45; padding: .4rem .2rem;
}

/* sections (todo) and chapters (audio) */
/* audio prints its document-level direction as chips between the
   caption and the chapters; the chapters need air under them. */
.render__body .r-meta + .r-main { margin-top: 1.2rem; }
.render__body .r-sec + .r-sec { margin-top: 1.5rem; }
.render__body .r-sec__head {
  display: flex; align-items: baseline; gap: .5rem;
  padding: 0 .2rem .55rem;
}
.render__body .r-sec__name {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.render__body .r-sec--implicit .r-sec__head::before {
  content: "implicit";
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); opacity: .6;
}
.render__body .r-sec__count {
  margin-left: auto; font-family: var(--font-mono); font-size: .6rem;
  color: var(--ink-3); font-variant-numeric: lining-nums;
}

/* items and cards */
.render__body .r-items, .render__body .r-sub { display: flex; flex-direction: column; gap: .55rem; }
.render__body .r-sub { margin: .55rem 0 0 1.15rem; gap: .3rem; }
.render__body .r-item {
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-s);
  padding: .6rem .7rem .65rem;
}
.render__body .r-sub .r-item {
  background: transparent; box-shadow: none;
  border-left: 1px solid var(--rule);
  border-radius: 0; padding: .08rem 0 .08rem .6rem;
}
.render__body .r-item__row { display: flex; align-items: flex-start; gap: .55rem; }
.render__body .r-item__main { flex: 1; min-width: 0; }
.render__body .r-item__box {
  flex: none; width: 13px; height: 13px; margin-top: .25rem;
  border: 1.4px solid var(--ink-3); border-radius: 4px;
  position: relative;
}
.render__body .r-item--done > .r-item__row > .r-item__box {
  background: var(--ink); border-color: var(--ink);
}
.render__body .r-item--done > .r-item__row > .r-item__box::after {
  content: ""; position: absolute; left: 3.6px; top: .8px;
  width: 3.4px; height: 7px;
  border: solid var(--card); border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.render__body .r-item__text {
  font-size: .86rem; line-height: 1.42; letter-spacing: -.004em;
  color: var(--ink); overflow-wrap: anywhere;
}
.render__body .r-item--done > .r-item__row .r-item__text {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--rule);
}
/* A kanban card draws no checkbox — the column is the state (kanban@0.1 §2.3 on this
   sheet). Done-ness is the strike plus a step back, and the word itself is left for a
   screen reader only. The generator prefixes every class, so `.sr-only` needs restating.
   The step back is a change of surface, not of contrast: fading the card to 82% put its
   own text at 3.8:1, and a finished card is still a card somebody has to be able to
   read. */
.render__body .r-item--card.r-item--done { background: var(--paper-2); box-shadow: var(--ring); }
.render__body .r-sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* bands, markers and blockers (backlog)
   A backlog is a ladder, so the pane is built as one: bands stack down the
   measure in the file's own order, each labelled with the rank the vocabulary
   gives it. Emphasis is spent on ground rather than on ink — Now sits under an
   accent hairline, Someday and Done step back into a recessed tray, and a held
   row loses its lift instead of losing contrast. Nothing here dims text that
   carries information. */

/* the key to the four markers */
.render__body .r-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28rem .85rem;
  margin: -.5rem 0 1.2rem;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .04em; color: var(--ink-2);
}
.render__body .r-legend__t {
  text-transform: uppercase; letter-spacing: .13em;
  font-size: .55rem; color: var(--ink-3);
}
.render__body .r-legend__k { display: inline-flex; align-items: center; gap: .35rem; }

/* Two of the four markers are outside GFM's task-list grammar, so the shapes
   carry the difference on their own: hollow, half, solid, struck. */
.render__body .r-state {
  flex: none; width: 12px; height: 12px; margin-top: .28rem; position: relative;
  border: 1.5px solid var(--ink-3); border-radius: 50%;
}
.render__body .r-legend .r-state { margin-top: 0; }
.render__body .r-state--doing {
  border-color: var(--sev-warning);
  background: linear-gradient(to right, var(--sev-warning) 50%, transparent 50%);
}
.render__body .r-state--done { border-color: var(--ink); background: var(--ink); }
.render__body .r-state--dropped::before,
.render__body .r-state--dropped::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6.5px; height: 1.5px; background: var(--ink-3); border-radius: 1px;
}
.render__body .r-state--dropped::before { transform: translate(-50%, -50%) rotate(45deg); }
.render__body .r-state--dropped::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* the bands */
.render__body .r-band + .r-band { margin-top: 1.4rem; }
.render__body .r-band__head {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  padding: 0 .2rem .55rem;
  font-family: var(--font-mono);
}
.render__body .r-band__rank {
  flex: none; font-size: .58rem; letter-spacing: .1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.render__body .r-band__name {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.render__body .r-band__role {
  flex: none; font-size: .54rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-3);
  border-radius: 100px; padding: .16rem .45rem .12rem;
}
.render__body .r-band__n {
  margin-left: auto; font-size: .6rem; letter-spacing: .04em;
  color: var(--ink-3); text-align: right; font-variant-numeric: lining-nums;
}
.render__body .r-band__empty {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  color: var(--ink-3); padding: .25rem .2rem .1rem;
}
/* A band that reports MDTO404 has no name and none is invented for it. */
.render__body .r-band--unnamed .r-band__head::after {
  content: "unnamed"; font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
/* Now is where a reader is meant to land. */
.render__body .r-band--now .r-band__name { color: var(--ink); }
.render__body .r-band--now .r-band__rank { color: var(--acc); }
.render__body .r-band--now .r-band__head { border-bottom: 1px solid var(--acc-line); }
/* Someday is parked and Done is closed: a change of surface, not of contrast. */
.render__body .r-band--someday,
.render__body .r-band--done {
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: .75rem .8rem .85rem;
}
.render__body .r-band--someday .r-band__role,
.render__body .r-band--done .r-band__role { background: var(--card); }
/* Done folds, but it is open: a rendered document that hides part of the file
   by default is wrong in print and wrong for a reader who never thought to
   click. The disclosure says "this is foldable"; it does not decide. */
.render__body .r-band__disc > summary { cursor: pointer; list-style: none; }
.render__body .r-band__disc > summary::-webkit-details-marker { display: none; }
.render__body .r-band__disc > summary::after {
  content: "\25BE"; flex: none;
  font-family: var(--font-mono); font-size: .58rem; color: var(--ink-3);
}
.render__body .r-band__disc:not([open]) > summary::after { content: "\25B8"; }

/* the rows */
/* A backlog row carries its state in the marker glyph and in a chip, so done
   text is left alone here — striking it too would flatten the difference
   between finished and abandoned, which is the one distinction four markers
   exist to draw. */
.render__body .r-band .r-item--done > .r-item__row .r-item__text {
  color: var(--ink); text-decoration: none;
}
.render__body .r-band .r-item--dropped > .r-item__row .r-item__text {
  color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--rule);
}
/* Blocked work reads as not-ready by settling onto the ground, never by
   fading: the text of a blocked task is the text most worth reading. The
   band in the selector is not decoration — §13 gives every `.r-item` a lift,
   and dropping that lift is the whole treatment. */
.render__body .r-band .r-item--blocked {
  background: var(--paper-2); box-shadow: var(--ring);
}
.render__body .r-band--someday .r-item--blocked,
.render__body .r-band--done .r-item--blocked { background: var(--paper-3); }
/* Following "blocked by ^slug" lands on the row it names, and says so. */
.render__body .r-band .r-item { scroll-margin-top: 5rem; }
.render__body .r-band .r-item:target {
  box-shadow: var(--shadow-m), inset 0 0 0 1.5px var(--acc-line);
}
/* nesting — the elbow makes the parent-child relation a drawn thing */
.render__body .r-band .r-sub { margin: .5rem 0 0 .9rem; gap: .3rem; }
.render__body .r-band .r-sub > .r-item {
  position: relative; border-left: 0; padding: .08rem 0 .08rem 0;
}
.render__body .r-band .r-sub > .r-item::before {
  content: ""; position: absolute; left: -.9rem; top: .68rem;
  width: .55rem; border-top: 1px solid var(--rule);
}
.render__body .r-band .r-sub .r-state { width: 10px; height: 10px; margin-top: .28rem; }
.render__body .r-band .r-sub .r-item--blocked {
  border-radius: var(--r-xs); padding: .2rem .4rem; box-shadow: none;
}

/* the backlog chips */
.render__body .r-chip--doing { color: var(--sev-warning); background: var(--sev-warn-soft); }
.render__body .r-chip--doing b { color: var(--sev-warning); }
.render__body .r-chip--dropped { color: var(--ink-2); background: var(--paper-3); white-space: normal; }
.render__body .r-chip--dropped b { color: var(--ink-2); }
.render__body .r-chip--block { color: var(--acc); background: var(--acc-soft); white-space: normal; }
.render__body .r-chip--block b { color: var(--acc); font-weight: 600; }
.render__body a.r-chip--block { text-decoration: none; }
.render__body a.r-chip--block:hover { background: var(--acc); color: var(--paper); }
.render__body a.r-chip--block:hover b { color: var(--paper); }
/* A reference that resolves to nothing and one that points out of the file
   fail differently, so they look different: the first is a mistake to fix,
   the second is simply out of scope for a single-file parse. */
.render__body .r-chip--block-broken { color: var(--sev-warning); background: var(--sev-warn-soft); }
.render__body .r-chip--block-broken b { color: var(--sev-warning); }
.render__body .r-chip--block-ext {
  color: var(--ink-2); background: transparent;
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.render__body .r-chip--block-ext b { color: var(--ink-2); }
.render__body .r-chip--cycle {
  color: var(--acc); background: transparent;
  box-shadow: inset 0 0 0 1px var(--acc-line);
}
.render__body .r-chip--cycle b { color: var(--acc); }
.render__body .r-chip--reason {
  color: var(--ink-2); background: transparent;
  box-shadow: inset 0 0 0 1px var(--rule); white-space: normal;
}
.render__body .r-chip--reason b { color: var(--ink-2); }

/* ============================================================
   6. Construct lists — the distilled grammar
   ============================================================ */

.constructs {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: grid; gap: .6rem;
}
.constructs > div {
  display: grid; gap: .3rem .9rem;
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-s);
  padding: .85rem 1rem .95rem;
}
@media (min-width: 620px) { .constructs > div { grid-template-columns: 12rem minmax(0, 1fr); } }
.constructs dt {
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .01em; color: var(--ink); padding-top: .12rem;
  overflow-wrap: anywhere;
}
.constructs dt code {
  background: none; padding: 0; font-size: 1em; color: var(--acc);
  white-space: normal;
}
.constructs dd { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.constructs dd b { color: var(--ink); font-weight: 600; }

/* a marginal note — the "why", pulled out of the rationale */
.note {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--acc-soft);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.6vw, 1.6rem) clamp(1.2rem, 2.8vw, 1.8rem);
  max-width: 48rem;
}
.note__lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc); margin-bottom: .6rem;
}
.note__lbl code { background: none; padding: 0; font-size: 1em; letter-spacing: .1em; }
.note p { font-size: .96rem; line-height: 1.62; color: var(--ink-2); }
.note p + p { margin-top: .8rem; }
.note strong { color: var(--ink); }

.subhead {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
}
.subhead__no {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .1em; color: var(--acc);
  font-variant-numeric: lining-nums;
}
.subhead h3 {
  font-size: 1.28rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.2;
}
.body-copy { margin-top: .9rem; max-width: var(--measure); color: var(--ink-2); font-size: .98em; }
.body-copy + .body-copy { margin-top: .9rem; }

/* a bare plate — no title bar — for a two-line example inside prose */
.plate--mini { margin-top: 1rem; max-width: 44rem; }
.plate--mini pre.md { padding: .85rem 1rem .9rem; line-height: 1.7; }

/* ============================================================
   7. Verb ledger
   ============================================================ */

.verbtable {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: grid; gap: .8rem;
}
.verbtable__row {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1.15rem 1.25rem 1.25rem;
  display: grid; gap: .7rem;
}
@media (min-width: 900px) {
  .verbtable__row { grid-template-columns: 6.5rem minmax(0, 1.2fr) minmax(0, 1fr); gap: .7rem 1.4rem; align-items: start; }
}
.verbtable__head {
  display: none;
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 1.25rem .2rem;
}
@media (min-width: 900px) {
  .verbtable__head { display: grid; grid-template-columns: 6.5rem minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem; }
}
.verbtable__verb {
  font-family: var(--font-mono); font-size: .86rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
}
.verbtable__verb .hosted {
  display: block; margin-top: .35rem;
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400; color: var(--acc);
}
.sig {
  display: block; max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: .6rem .75rem;
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.65;
  white-space: pre; color: var(--ink-2);
  font-variant-numeric: lining-nums;
}
.verbtable__edit { font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.verbtable__edit b { color: var(--ink); font-weight: 600; }

.never {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  padding: 1.15rem 1.3rem 1.3rem;
  background: var(--paper-3);
  border-radius: var(--r);
  max-width: 52rem;
}
.never__lbl {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: .7rem;
}
.never p { font-size: .92rem; line-height: 1.8; color: var(--ink-2); }
.never .sep { color: var(--acc); padding: 0 .22rem; }

/* ============================================================
   8. Diagnostics proof sheet
   ============================================================ */

.proof {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: grid; gap: clamp(1.1rem, 2.6vw, 1.8rem);
  align-items: start;
}
@media (min-width: 980px) {
  .proof { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .proof > * { min-width: 0; }
}

.diags { display: grid; gap: .7rem; }
.diag {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1rem 1.15rem 1.1rem;
  border-left: 3px solid var(--sev-info);
}
.diag--error   { border-left-color: var(--sev-error); }
.diag--warning { border-left-color: var(--sev-warning); }
.diag__head {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .66rem;
  font-variant-numeric: lining-nums;
  margin-bottom: .6rem;
}
.diag__code { font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.diag__sev {
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 100px; padding: .18rem .55rem .14rem;
}
.diag--error .diag__sev { color: var(--sev-error); background: var(--acc-soft); }
.diag--warning .diag__sev { color: var(--sev-warning); background: var(--sev-warn-soft); }
/* `info` findings only appear where a spec owns some — backlog-workspace does, because a parked
   sub-backlog and an unlinked note are observations rather than faults. Same badge, the neutral
   ink the rest of the micro-labels use, on the recessed ground so it still reads as a badge. */
.diag--info .diag__sev { color: var(--sev-info); background: var(--paper-2); }
.diag__at { margin-left: auto; color: var(--ink-3); letter-spacing: .06em; }
.diag__src {
  display: block; overflow-x: auto; scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
  background: var(--paper-2); border-radius: var(--r-sm);
  padding: .5rem .7rem; margin-bottom: .7rem;
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.6;
  white-space: pre; color: var(--ink-2);
  font-variant-numeric: lining-nums;
}
.diag__msg {
  font-size: .95rem; line-height: 1.6; color: var(--ink);
  text-wrap: pretty;
}
.diag__msg code {
  background: var(--code-bg); color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* the spec's own code range, as a ledger */
.codes {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: grid; gap: .5rem;
}
.codes__row {
  display: grid; gap: .25rem .9rem;
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-s);
  padding: .75rem 1rem .8rem;
  align-items: baseline;
}
@media (min-width: 620px) { .codes__row { grid-template-columns: 6.2rem 5.2rem minmax(0, 1fr); } }
.codes__code {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  color: var(--ink); font-variant-numeric: lining-nums;
}
.codes__sev {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.codes__sev--error   { color: var(--sev-error); }
.codes__sev--warning { color: var(--sev-warning); }
.codes__sev--info    { color: var(--sev-info); }
.codes__what { font-size: .92rem; line-height: 1.5; color: var(--ink-2); }

/* ============================================================
   9. Catalogue (specs/index.html)
   ============================================================ */

.catalogue {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  display: grid; gap: clamp(1rem, 2.4vw, 1.6rem);
}
/* Two up, and two up all the way: with four specs a 2x2 reads as the whole
   family at once, where three columns would leave the fourth spec standing on
   its own as though it were an afterthought. The wider card also gives the
   construct map room for a two-word term like `— blocked by`. */
@media (min-width: 720px) { .catalogue { grid-template-columns: repeat(2, 1fr); } }
.entry {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1.5rem 1.5rem 1.6rem;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: box-shadow .25s cubic-bezier(.2,.8,.3,1), transform .25s cubic-bezier(.2,.8,.3,1);
}
.entry:hover { box-shadow: var(--shadow-l); transform: translateY(-3px); }
.entry:hover .entry__go b { color: var(--acc); }
.entry__id {
  font-family: var(--font-mono); font-weight: 600;
  font-size: 1.35rem; letter-spacing: -.03em; color: var(--ink);
}
.entry__id .v { color: var(--acc); font-weight: 400; }
.entry__file {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; color: var(--ink-3);
  margin-top: .45rem;
}
.entry__what {
  margin-top: 1.1rem; font-size: .95rem; line-height: 1.58; color: var(--ink-2);
}
.entry__map {
  margin-top: 1.2rem; padding: .9rem 1rem 1rem;
  background: var(--paper-2); border-radius: var(--r-sm);
  display: grid; gap: .45rem;
}
.entry__map div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: .5rem; }
.entry__map dt {
  font-family: var(--font-mono); font-size: .66rem; color: var(--acc);
  overflow-wrap: anywhere;
}
.entry__map dd { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.entry__verbs { margin-top: 1.1rem; }
.entry__foot {
  margin-top: auto; padding-top: 1.3rem;
  display: flex; align-items: center; gap: .5rem;
}
.entry__codes {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .06em; color: var(--ink-3);
  font-variant-numeric: lining-nums;
}
.entry__go {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--ink-2);
}
.entry__go b { font-weight: 500; transition: color .18s; }

/* ============================================================
   10. Conventions ledger (specs/index.html)
   ============================================================ */

.ledger {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  counter-reset: ledger;
  display: grid; gap: clamp(1rem, 2.4vw, 1.5rem);
}
.ledger > li {
  display: grid; gap: .6rem 1.5rem;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3vw, 2rem) clamp(1.4rem, 3.2vw, 2rem);
}
@media (min-width: 820px) { .ledger > li { grid-template-columns: 2.6rem minmax(0, 1fr); } }
.ledger > li::before {
  counter-increment: ledger;
  content: counter(ledger, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .06em; color: var(--acc);
  padding-top: .35rem; font-variant-numeric: lining-nums;
}
.ledger h3 {
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.016em;
  margin-bottom: .5rem;
}
.ledger p { font-size: .95rem; line-height: 1.62; color: var(--ink-2); }
.ledger p + p { margin-top: .65rem; }
.ledger .constructs { margin-top: 1.2rem; }
.ledger .constructs > div { background: var(--paper-2); box-shadow: none; }

/* the code-range allocation table */
.ranges {
  margin-top: clamp(1.8rem, 3.6vw, 2.4rem);
  display: grid; gap: .5rem;
}
.ranges__row {
  display: grid; gap: .2rem .9rem;
  background: var(--card);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-s);
  padding: .8rem 1rem .85rem;
  align-items: baseline;
}
@media (min-width: 620px) { .ranges__row { grid-template-columns: 11rem minmax(0, 1fr); } }
.ranges__range {
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink);
  font-variant-numeric: lining-nums;
}
.ranges__owner { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.ranges__owner a { color: var(--acc); }

/* ============================================================
   11. Page navigation
   ============================================================ */

.pagenav { background: var(--paper); }
.pagenav__in {
  max-width: var(--wide); margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  margin-block: clamp(2.4rem, 6vw, 4rem);
  display: grid; gap: clamp(.9rem, 2.2vw, 1.4rem);
}
@media (min-width: 700px) { .pagenav__in { grid-template-columns: 1fr 1fr; } }
.pagenav a {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1.35rem 1.5rem 1.5rem;
  text-decoration: none;
  display: flex; flex-direction: column; gap: .45rem;
  transition: box-shadow .25s cubic-bezier(.2,.8,.3,1), transform .25s cubic-bezier(.2,.8,.3,1);
}
.pagenav a:hover { box-shadow: var(--shadow-l); transform: translateY(-3px); }
.pagenav__dir {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3);
}
.pagenav__to {
  font-family: var(--font-mono); font-size: 1rem; font-weight: 600;
  letter-spacing: -.025em; color: var(--ink);
}
.pagenav__to .v { color: var(--acc); font-weight: 400; }
.pagenav__why { font-size: .88rem; color: var(--ink-3); line-height: 1.45; }
.pagenav a:last-child { text-align: right; }
.pagenav a:last-child .pagenav__dir { margin-left: auto; }

/* The sheet index at the foot of specs/index.html: every sheet, not a
   previous/next pair, so the last card is not the odd one out and does not
   get the right-aligned treatment. Two up from 700px (the base rule), then as
   many as fit — the count is not written down here, because the family grows
   and a hand-counted `repeat(4, …)` is one more list to forget to update. */
@media (min-width: 1040px) {
  .pagenav__in--sheets { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
}
.pagenav__in--sheets a:last-child { text-align: left; }
.pagenav__in--sheets a:last-child .pagenav__dir { margin-left: 0; }

/* ============================================================
   12. Misc
   ============================================================ */

.linkout {
  margin-top: clamp(1.6rem, 3.4vw, 2.4rem);
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.linkout a {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .72rem;
  text-decoration: none;
  padding: .7rem 1.1rem;
  background: var(--card);
  border-radius: 100px;
  box-shadow: var(--shadow-s);
  color: var(--ink-2);
  transition: box-shadow .22s, color .22s, transform .22s;
  overflow-wrap: anywhere;
}
.linkout a:hover { color: var(--ink); box-shadow: var(--shadow-m); transform: translateY(-2px); }
.linkout a .chev { color: var(--acc); }

.agentbox {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
}
@media (min-width: 940px) { .agentbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.agentbox > * { min-width: 0; }
.agentbox__points { display: grid; gap: .9rem; }
.agentbox__points li {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-s);
  padding: 1.2rem 1.35rem 1.3rem;
}
.agentbox__points p { font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.agentbox__points code { overflow-wrap: anywhere; white-space: normal; }

.soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .54rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-2);
  border-radius: 100px; padding: .14rem .45rem .1rem;
  vertical-align: .14em; margin-left: .4rem;
}

/* ============================================================
   13. The ring

   Every lifted surface carries a hairline as well as a shadow.
   A shadow alone does not separate white from white, and on the
   dark variant it does not separate anything at all.
   ============================================================ */

/* flashcards and timeline — compact quotations of the full standalone views */
.render__body .r-deck { max-width: 34rem; margin-inline: auto; }
.render__body .r-deck__stage { perspective: 1000px; }
.render__body .r-flashcard { min-height: 22rem; }
.render__body .r-flashcard__surface {
  position: relative; min-height: 22rem; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-l); cursor: pointer;
}
.render__body .r-flashcard__face {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1.2rem, 4vw, 2rem);
}
.render__body .r-flashcard__front { background: #182b2d; color: #f8f3e8; }
.render__body .r-flashcard__back { display: none; }
.render__body .r-flashcard__eyebrow,
.render__body .r-flashcard__prompt {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .68;
}
.render__body .r-flashcard__front strong {
  align-self: center; font-family: var(--font-serif); font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 400; line-height: 1.05;
}
.render__body .r-flashcard__prompt { padding-top: 1rem; border-top: 1px solid currentColor; }
.render__body .r-deck__controls {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; margin-top: 1rem;
}
.render__body .r-deck__controls button {
  border: 0; border-radius: 100px; padding: .6rem .8rem; color: var(--ink); background: var(--paper-2);
  font: 600 .54rem var(--font-mono); text-transform: uppercase;
}
.render__body .r-deck__controls button:last-child { justify-self: end; }
.render__body .r-deck__controls p,
.render__body .r-deck__hint { text-align: center; font: .56rem var(--font-mono); color: var(--ink-3); }
.render__body .r-deck__hint { margin-top: .7rem; }

/* podcast */
.render__body .r-podcast__legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
  margin: .8rem 0 1.2rem;
}
.render__body .r-podcast__speaker {
  display: flex; flex-direction: column; gap: .15rem; padding: .65rem .75rem;
  border-left: 3px solid var(--acc); background: var(--paper-2);
}
.render__body .r-podcast__speaker--2 { border-color: var(--ink-2); }
.render__body .r-podcast__speaker span,
.render__body .r-podcast__note > span,
.render__body .r-podcast__pause span {
  color: var(--ink-3); font: .56rem var(--font-mono); letter-spacing: .04em;
}
.render__body .r-podcast__section { margin-bottom: 1.4rem; }
.render__body .r-podcast__section h4 { margin: 0 0 .65rem; font: 400 1.2rem var(--font-serif); }
.render__body .r-podcast__section ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.render__body .r-podcast__turn,
.render__body .r-podcast__note { padding: .65rem .75rem; background: var(--paper-2); border-left: 3px solid var(--acc); }
.render__body .r-podcast__turn--2 { border-color: var(--ink-2); }
.render__body .r-podcast__turn > b { font: 600 .56rem var(--font-mono); letter-spacing: .08em; }
.render__body .r-podcast__turn p,
.render__body .r-podcast__note p { margin: .25rem 0 0; line-height: 1.45; }
.render__body .r-podcast__note { border-left-style: dotted; }
.render__body .r-podcast__pause { padding: .2rem; text-align: center; color: var(--ink-3); }
@media (max-width: 640px) {
  .render__body .r-podcast__legend { grid-template-columns: 1fr; }
}

.render__body .r-timeline-page .r-main { overflow-x: auto; padding-top: 1rem; }
.render__body .r-timeline {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr);
  min-width: 42rem; margin: 0; padding: 11rem 0 0; list-style: none;
}
.render__body .r-timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 11rem; height: 2px; background: var(--rule);
}
.render__body .r-timeline__entry { position: relative; min-height: 12rem; padding: 1.8rem .8rem 0; }
.render__body .r-timeline__entry--above { transform: translateY(-11rem); display: flex; align-items: flex-end; padding-bottom: 1.8rem; }
.render__body .r-timeline__node {
  position: absolute; left: -.3rem; top: -.3rem; width: .62rem; height: .62rem;
  border-radius: 50%; background: var(--acc);
}
.render__body .r-timeline__entry--above .r-timeline__node { top: auto; bottom: -.32rem; }
.render__body .r-timeline__entry time { font: .55rem var(--font-mono); color: var(--acc); text-transform: uppercase; }
.render__body .r-timeline__entry time span { margin-left: .45rem; color: var(--ink-3); }
.render__body .r-timeline__entry h4 { margin: .55rem 0; font: 400 1.25rem/1.08 var(--font-serif); }
.render__body .r-timeline__details { font-size: .72rem; line-height: 1.5; color: var(--ink-2); }

.facts > div, .render, .entry, .diag, .codes__row, .ranges__row,
.constructs > div, .verbtable__row, .ledger > li, .pagenav a,
.agentbox__points li, .render__body .r-item, .contents__in,
.linkout a, .colophon__back {
  box-shadow: var(--shadow-s), inset 0 0 0 1px var(--rule-soft);
}
.entry:hover, .pagenav a:hover {
  box-shadow: var(--shadow-l), inset 0 0 0 1px var(--rule-soft);
}
.linkout a:hover, .colophon__back:hover {
  box-shadow: var(--shadow-m), inset 0 0 0 1px var(--rule-soft);
}
.render { box-shadow: var(--shadow-m), inset 0 0 0 1px var(--rule-soft); }
.ledger .constructs > div { box-shadow: none; }

/* ============================================================
   14. Dark — the automatic variant, derived from the light design
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #131209;
    --paper-2:    #1a1811;
    --paper-3:    #232016;
    --card:       #1d1a13;

    --ink:        #efe9d9;
    --ink-2:      #c5bda9;
    --ink-3:      #948c78;

    --rule:       rgba(239, 233, 217, .13);
    /* The hairline does more of the work here: a shadow on near-black
       separates nothing. */
    --rule-soft:  rgba(239, 233, 217, .1);
    --code-bg:    rgba(239, 233, 217, .075);

    --acc-line:   rgba(239, 113, 72, .34);
    --tint:       #241811;
    --tint-warn:  #2a2210;
    --acc-soft:   var(--tint);

    --shadow-s:   0 1px 2px rgba(0, 0, 0, .3);
    --shadow-m:   0 2px 4px rgba(0, 0, 0, .34), 0 14px 30px -18px rgba(0, 0, 0, .6);
    --shadow-l:   0 3px 6px rgba(0, 0, 0, .38), 0 24px 50px -24px rgba(0, 0, 0, .72);

    --sev-warning:   #d6a44a;
    --sev-warn-soft: var(--tint-warn);
  }
  .render__body .r-chip--field { box-shadow: inset 0 0 0 1px var(--rule); }
}