/* ============================================================
   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 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); }
.render__body .r-chip--prio-low { opacity: .78; }
.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); }
.render__body .r-chip--id { opacity: .7; }
.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);
}
.render__body .r-col__n {
  margin-left: auto; font-family: var(--font-mono); font-size: .6rem;
  color: var(--ink-3); opacity: .7; 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); opacity: .7; 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. */
.render__body .r-item--card.r-item--done { opacity: .82; }
.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;
}

/* ============================================================
   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); }
.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__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);
}
@media (min-width: 720px)  { .catalogue { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .catalogue { grid-template-columns: repeat(3, 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; }

@media (min-width: 760px) { .pagenav__in--three { grid-template-columns: repeat(3, 1fr); } }
.pagenav__in--three a:last-child { text-align: left; }
.pagenav__in--three 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.
   ============================================================ */

.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); }
}