/* ───────────────────────────────────────────────────────────── lash · docs · shared stylesheet · warm iron Sodium spine threads every page from the band/opener through the body content and into the landscape strand convergence. Light + dark via [data-theme] on ; theme-init.js sets it pre-paint so there's no flash. ────────────────────────────────────────────────────────── */ /* ── shared tokens (theme-agnostic) ─────────────────── */ :root { --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --band-h: 3.4rem; /* sticky docs header height — keeps the sticky TOC clear of the band */ --space-4xl: 6rem; --font-display: "Big Shoulders Display", "Helvetica Neue", sans-serif; --font-body: "Spectral", "Iowan Old Style", Georgia, serif; --font-mono: "Chivo Mono", "JetBrains Mono", ui-monospace, monospace; /* width of the left rail column that hosts the spine + knot */ --rail: 9rem; --page-max: 88rem; /* spine sits at this X inside the .toc — a thin gutter on the left, so titles + items hang to the right of it as a left rail. Title and item padding-left below MUST clear this value. */ --toc-rail-x: 0.625rem; } /* ── dark theme (warm-iron, twilight) ───────────────── */ :root[data-theme="dark"] { color-scheme: dark; --bg: #141412; --bg-elev: #1b1a17; --bg-faint: #201d18; --bg-tint: #2b2722; --ink: #e8e4d0; --ink-mid: #c0bca8; --ink-dim: #a09e91; --ink-faint: #5a5a50; --rule: #2b2925; --rule-strong: #5a5a50; --sodium: #e8a33c; --sodium-deep: #ffb054; --sodium-soft: color-mix(in oklch, var(--sodium) 22%, transparent); --code-bg: #1b1814; --code-rule: #2b2925; --code-ink: #d8d3bd; --range-far-light: #7a7669; --range-far-shadow: #635d4f; --range-mid-light: #5a5448; --range-mid-shadow: #3e3a30; --range-near-light: #322f27; --range-near-shadow: #1f1d18; --sky-top: #141412; --sky-mid: #1a1814; --sky-bot: #221d16; --ground: #1d1b16; --ground2: #22201a; --horizon-line: #2d2925; --haze: #1a1814; --nun-robe: #14110d; --nun-headdress: #e8e4d0; --nun-chin: #bdb39a; --instrument-dark: #1d1c19; } /* ── light theme (warm-paper, daylight) ─────────────── */ :root[data-theme="light"] { color-scheme: light; --bg: #f5efe0; --bg-elev: #efe9d9; --bg-faint: #ebe4d2; --bg-tint: #e3dcc5; --ink: #1d1c19; --ink-mid: #4c4a45; --ink-dim: #7a7872; --ink-faint: #b0aea6; --rule: #d9d3c1; --rule-strong: #c5bea8; --sodium: #c97a1f; --sodium-deep: #a35e10; --sodium-soft: color-mix(in oklch, var(--sodium) 18%, transparent); --code-bg: #eee6cf; --code-rule: #d9d3c1; --code-ink: #1d1c19; --range-far-light: #d0c8b8; --range-far-shadow: #b3aea1; --range-mid-light: #918b7f; --range-mid-shadow: #5e5a52; --range-near-light: #383530; --range-near-shadow: #1d1c19; --sky-top: #f5efe0; --sky-mid: #f3ecdb; --sky-bot: #efe5cf; --ground: #e9e1cc; --ground2: #e3d9c0; --horizon-line: #c5bea8; --haze: #f5efe0; --nun-robe: #1d1c19; --nun-headdress: #dfd4b6; --nun-chin: #e7dcbf; --instrument-dark: #1d1c19; } :root[data-theme] body { transition: background-color 280ms ease, color 280ms ease; } /* ── base ───────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Paint the root with --bg too: while body is FOUC-hidden (visibility:hidden below until fonts settle), without this rule the browser's default white background flashes through. theme.js sets data-theme on pre-paint, so var(--bg) resolves immediately. */ html { background: var(--bg); } body { background: var(--bg); color: var(--ink-mid); font-family: var(--font-body); font-size: 17px; line-height: 1.66; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Spectral OpenType: kerning + ligatures + contextual alternates + old-style figures for prose. Mono blocks override with tnum. */ font-feature-settings: "kern", "liga", "calt", "onum"; font-variant-numeric: oldstyle-nums proportional-nums; font-kerning: normal; } /* dark mode wants slightly looser leading — light text on dark reads as lighter weight, so it needs more air to breathe */ :root[data-theme="dark"] body { line-height: 1.7; } /* monospace contexts: lining tabular figures so code, ids, and numbers align in columns */ code, pre, kbd, samp, var, .font-mono, .band, .knot__id, .knot__name { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "calt"; } /* display-face titles get tighter optical kerning */ .opener__title, .stanza__title, .section-header h2, .section h2, .stanza__body h3, .section h3, .toc__group-title { font-feature-settings: "kern", "liga", "ss01"; } /* Section tabs in the top band — Guide / Reference / Internals / CLI. The active section is the active edge: sodium text + underline so it reads at a glance. Inactive tabs stay chalk-dim and lift to chalk on hover; the underline is the accent, reserved for the active one. */ .band__sections { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; } .band__section { color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding-bottom: 0.3rem; border-bottom: 2px solid transparent; transition: color 160ms ease, border-color 160ms ease; } .band__section:hover { color: var(--ink); } .band__section:focus-visible { outline: none; color: var(--sodium); border-bottom-color: var(--sodium); } .band__section.is-active { color: var(--sodium); border-bottom-color: var(--sodium); } ::selection { background: var(--sodium-soft); color: var(--ink); } p { margin: 0 0 var(--space-md); max-width: 65ch; } a { color: var(--sodium); text-decoration: none; } a:hover { color: var(--sodium-deep); } em { font-style: italic; } strong { color: var(--ink); font-weight: 600; } .body :where(p, li, dd, td) a:not(.cta) { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklch, currentColor 62%, transparent); } .body :where(p, li, dd, td) a:not(.cta):hover { text-decoration-color: currentColor; } .body :where(p, li, dd, td) a strong { color: inherit; } hr { border: none; border-top: 1px solid var(--rule); margin: var(--space-xl) 0; } /* inline code in body prose — kept understated so dense reference pages don't strobe with sodium. The block-level

 keeps its
   neutral code-ink. Identifiers in lede/title positions inherit a
   sodium tint via parent rules so important call-outs still pop. */
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--ink);
  background: transparent;
  padding: 0;
  font-feature-settings: "tnum", "calt";
}
/* sodium-tint inline code only where it does call-out work: the
   first paragraph of each section. Everywhere else inline code stays
   in ink so the page doesn't strobe with sodium. */
.stanza__lede code,
.opener__lede code,
.section-header > p code {
  color: var(--sodium);
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: var(--space-md); top: var(--space-md);
  background: var(--bg); color: var(--sodium);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--sodium); border-radius: 2px;
  z-index: 10;
}

/* ── band — sticky running header ───────────────────── */
.band {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  /* full-bleed surface; content stays aligned to the page-max column so
     the wordmark/tabs line up with the docs grid below on any width. */
  padding-block: var(--space-sm);
  padding-inline: max(var(--space-xl), calc((100% - var(--page-max)) / 2 + var(--space-xl)));
  background: var(--bg);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Keep the sticky header to one row where the sidebar is sticky (≥981px),
   so --band-h stays accurate and the TOC clears it. Below 980px the TOC is
   a static disclosure, so let the band scroll away instead of pinning a
   wrapped, multi-row header over the mobile fold. */
@media (min-width: 981px) { .band { flex-wrap: nowrap; } }
@media (max-width: 980px) { .band { position: static; } }
.band__brand,
.band__brand a {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.band__brand a:hover { color: var(--sodium); }
.band__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.band__right b { color: var(--sodium); font-weight: 500; }
.band__btn {
  /* unified button chassis — same height across the band so the
     search / github / theme cluster reads as one row of equals */
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  height: 1.85rem;
  padding: 0 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1;
  box-sizing: border-box;
  text-decoration: none;
}
.band__btn:hover { color: var(--sodium); border-color: var(--sodium); }
.band__btn:focus-visible {
  outline: none; color: var(--sodium); border-color: var(--sodium);
  box-shadow: 0 0 0 3px var(--sodium-soft);
}
.band__btn .glyph { color: var(--sodium); display: inline-flex; align-items: center; }
/* icon-only band button — square aspect, same height as the rest */
.band__btn--icon {
  width: 1.85rem;
  padding: 0;
  justify-content: center;
}
.band__btn--icon svg { display: block; }

/* ── channel switcher — main / staging dropdown in the band ── */
.channel {
  position: relative;
  display: inline-flex;
}
.channel__btn {
  /* tighter than the default band button so the trio reads as a
     single horizontal beat with theme + search */
  text-transform: lowercase;
}
.channel__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--sodium);
  box-shadow: 0 0 6px color-mix(in oklch, var(--sodium) 60%, transparent);
  display: inline-block;
}
.channel__caret {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--ink-faint);
  margin-left: 0.05rem;
}
/* Menu styles that apply IN ALL CASES (when actually visible) —
   colour, font, shadow. Note: no `display` here, so the UA's
   `display: none` default for `[popover]` (closed) and `[hidden]`
   (fallback) wins until we explicitly open it. */
.channel__menu {
  margin: 0;
  padding: 0;
  min-width: 7rem;
  background: var(--bg-elev, var(--bg));
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
/* Open popover: flex layout, anchored under the trigger button. */
.channel__btn { anchor-name: --channel-btn; }
.channel__menu:popover-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: auto;
  position-anchor: --channel-btn;
  top: anchor(bottom);
  right: anchor(right);
  margin-top: 0.35rem;
}
/* Browsers without CSS anchor positioning: hard-snap under the
   band's right edge. Same metrics for both cases. */
@supports not (anchor-name: --x) {
  .channel__menu:popover-open {
    top: 3.4rem;
    right: var(--space-md, 1rem);
  }
}
/* Manual-toggle fallback (no popover API) — re-style when the menu
   has no popover attribute and isn't hidden. */
.channel__menu:not([popover]):not([hidden]) {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
}
.channel__opt {
  padding: 0.55rem 0.75rem;
  color: var(--ink-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 140ms ease, background 140ms ease;
}
.channel__opt + .channel__opt {
  border-top: 1px solid var(--rule);
}
.channel__opt:hover,
.channel__opt:focus-visible {
  color: var(--sodium);
  background: color-mix(in oklch, var(--sodium-soft) 35%, transparent);
  outline: none;
}
.channel__opt.is-active {
  color: var(--ink);
}
.channel__opt.is-active::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--sodium);
  box-shadow: 0 0 6px color-mix(in oklch, var(--sodium) 60%, transparent);
  display: inline-block;
}
.channel__opt:not(.is-active)::before {
  content: "";
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: inline-block;
}

/* ── opener — breadcrumbs, title, lede ──────────────── */
.opener {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--space-xl);
  align-items: end;
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.opener::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--space-xl) + var(--rail) * 14 / 120);
  width: 1px;
  background: var(--sodium);
  pointer-events: none;
  z-index: 0;
}
.opener > * { position: relative; z-index: 1; }
.opener__title {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.5vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.034em;
  text-transform: lowercase;
  color: var(--ink);
}
.opener__title em { font-style: normal; color: var(--ink-faint); font-weight: 600; }
.opener__title .slash { color: var(--sodium); font-weight: 600; padding: 0 0.05em; }
.opener__lede {
  grid-column: 2;
  margin: var(--space-lg) 0 0;
  max-width: 60ch;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
}
.opener__lede em { color: var(--sodium); font-style: normal; font-weight: 500; }
.opener__lede code { color: var(--sodium); }
.opener__status {
  grid-column: 2;
  margin: var(--space-lg) 0 0;
  padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 56ch;
  color: var(--ink-mid);
  font-size: 0.94rem;
}
.opener__status strong { color: var(--sodium); }
.opener__cta-row {
  grid-column: 2;
  margin-top: var(--space-xl);
  display: flex;
  align-items: baseline;
  gap: var(--space-xl);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--sodium);
  border: 1px solid var(--sodium);
  padding: 0.55rem 1rem 0.45rem;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease;
}
.cta:hover { background: var(--sodium); color: var(--bg); }
.cta-secondary {
  color: var(--ink-mid);
  border: 1px solid var(--rule-strong);
  padding: 0.55rem 1rem 0.45rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color 160ms ease, border-color 160ms ease;
}
.cta-secondary:hover { color: var(--ink); border-color: var(--ink); }

/* ── body — spine + stanzas ─────────────────────────── */
.body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-xl) 0;
  position: relative;
}
/* The TOC spine is the rail. The body does not paint a second one. */
.body > * { position: relative; z-index: 1; }

/* a stanza is a numbered section in the body; the rail hosts a knot
   (sodium bead + section number + name) and the body holds the
   actual content. The .section class from older pages is aliased to
   the same layout so existing markup renders without restructuring. */
.stanza,
.section {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--space-xl);
  padding: var(--space-3xl) 0 var(--space-2xl);
  align-items: start;
}
.stanza__rail { position: relative; align-self: stretch; }

.knot {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  padding-top: var(--space-md);
}
.knot__bead {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sodium);
  box-shadow: 0 0 0 3px var(--bg);
  margin-left: calc(var(--rail) * 14 / 120 - 4.5px);
  margin-top: 0.45em;
  z-index: 2;
}
.knot__id {
  grid-column: 2; grid-row: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: var(--sodium);
  text-transform: uppercase;
  font-weight: 500;
}
.knot__name {
  grid-column: 2; grid-row: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.3;
  letter-spacing: 0.10em;
  color: var(--ink);
  text-transform: uppercase;
}

.stanza__body { min-width: 0; grid-column: 2; }

/* section-header from existing pages — works as a stanza title */
.section-header {
  grid-column: 2;
  margin-bottom: var(--space-lg);
}
.section > .section-header + * { grid-column: 2; }
.section > :not(.section-header) { grid-column: 2; min-width: 0; }
.section-header h2,
.stanza__title,
.section h2 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink);
}
/* h2 titles render in ink only; the slash device is reserved for the
   wordmark and the h1 opener title. The trailing `.accent` period is
   stripped from the markup — the wordmark owns that signature. */
.section-header > p,
.stanza__lede {
  margin: 0 0 var(--space-lg);
  max-width: 65ch;
  font-size: 1.04rem;
  color: var(--ink-mid);
}
.section-header > p code { color: var(--sodium); }

.stanza__title a { color: inherit; }
.stanza__title a:hover { color: var(--sodium); }
.stanza__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sodium);
  margin-top: var(--space-md);
}
.stanza__link:hover { color: var(--sodium-deep); }
.stanza__link .arrow { transition: transform 200ms ease; }
.stanza__link:hover .arrow { transform: translateX(4px); }

/* inline links in body prose — a soft underline sets them apart from code/em */
.stanza__body p a,
.stanza__body dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--sodium) 45%, transparent);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.stanza__body p a:hover,
.stanza__body dd a:hover { text-decoration-color: var(--sodium-deep); }

/* sub-headings inside a stanza */
.section h3,
.stanza__body h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--ink);
}
.section h4,
.stanza__body h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sodium);
}

/* ── code blocks ────────────────────────────────────── */
pre {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--code-bg);
  border: 1px solid var(--code-rule);
  border-radius: 3px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--code-ink);
  position: relative;
}
pre code { color: inherit; background: transparent; font-size: inherit; }
pre::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.45rem;
  right: 0.75rem;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── syntax highlighting — Prism token palette tied to warm-iron.
   Token classes come from Prism (syntax.js loads it on demand). We
   only set colours; layout + font + monospace come from `pre` above.
   Both themes share the same token surface; only the tones flip. */
:root[data-theme="dark"] {
  --tok-comment:     #6f6a5c;
  --tok-keyword:     #e8a33c;
  --tok-string:      #b6c79a;
  --tok-number:      #e0b178;
  --tok-type:        #d6caa6;
  --tok-function:    #e8e4d0;
  --tok-builtin:     #e8a33c;
  --tok-attribute:   #c98a5f;
  --tok-macro:       #e8a33c;
  --tok-operator:    #a8a395;
  --tok-punctuation: #837d6e;
  --tok-lifetime:    #d8a878;
  --tok-property:    #d6caa6;
  --tok-bool:        #e8a33c;
  --tok-regex:       #b6c79a;
  --tok-tag:         #e8a33c;
  --tok-deleted:     #d77272;
  --tok-inserted:    #b6c79a;
}
:root[data-theme="light"] {
  --tok-comment:     #8e8676;
  --tok-keyword:     #a35e10;
  --tok-string:      #3f6b34;
  --tok-number:      #a35e10;
  --tok-type:        #2b2722;
  --tok-function:    #1d1c19;
  --tok-builtin:     #a35e10;
  --tok-attribute:   #c97a1f;
  --tok-macro:       #a35e10;
  --tok-operator:    #4c4a45;
  --tok-punctuation: #6a665c;
  --tok-lifetime:    #a35e10;
  --tok-property:    #2b2722;
  --tok-bool:        #a35e10;
  --tok-regex:       #3f6b34;
  --tok-tag:         #a35e10;
  --tok-deleted:     #8a2828;
  --tok-inserted:    #3f6b34;
}
pre code .token { background: transparent; }
pre code .token.comment,
pre code .token.prolog,
pre code .token.cdata     { color: var(--tok-comment); font-style: italic; }
pre code .token.doc-comment { color: var(--tok-comment); font-style: italic; }
pre code .token.keyword,
pre code .token.atrule,
pre code .token.important { color: var(--tok-keyword); }
pre code .token.string,
pre code .token.char,
pre code .token.attr-value,
pre code .token.regex,
pre code .token.url-link  { color: var(--tok-string); }
pre code .token.number,
pre code .token.boolean,
pre code .token.constant,
pre code .token.symbol    { color: var(--tok-number); }
pre code .token.class-name,
pre code .token.type      { color: var(--tok-type); }
pre code .token.function,
pre code .token.function-definition,
pre code .token.method    { color: var(--tok-function); }
pre code .token.builtin,
pre code .token.namespace { color: var(--tok-builtin); }
pre code .token.attribute,
pre code .token.attr-name { color: var(--tok-attribute); }
pre code .token.macro,
pre code .token.macro-rules,
pre code .token.macro.property { color: var(--tok-macro); }
pre code .token.operator,
pre code .token.entity    { color: var(--tok-operator); }
pre code .token.punctuation { color: var(--tok-punctuation); }
pre code .token.lifetime-annotation { color: var(--tok-lifetime); font-style: italic; }
pre code .token.property,
pre code .token.key       { color: var(--tok-property); }
pre code .token.tag       { color: var(--tok-tag); }
pre code .token.deleted   { color: var(--tok-deleted); }
pre code .token.inserted  { color: var(--tok-inserted); }
pre code .token.italic    { font-style: italic; }
pre code .token.bold      { font-weight: 600; }
/* shell prompt + flag accents */
pre code .language-bash .token.variable,
pre code .language-bash .token.environment { color: var(--tok-builtin); }

/* ── definition list (editorial — hanging mono terms) ── */
.defs,
.def-list {
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(11rem, 16rem) 1fr;
  column-gap: var(--space-xl);
  row-gap: 0;
}
.defs dt,
.def-list dt {
  grid-column: 1;
  /* Grid items default to min-width:auto (min-content); a long
     unbreakable mono identifier would then spill out of the capped
     label track and over the prose column. Let it shrink and wrap. */
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--space-md) 0 var(--space-xs);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--sodium);
  font-weight: 500;
}
.defs dt:first-of-type,
.def-list dt:first-of-type { border-top: 1px solid var(--rule-strong); }
.defs dd,
.def-list dd {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-mid);
  font-size: 0.98rem;
  line-height: 1.6;
}
.defs dd:first-of-type,
.def-list dd:first-of-type { border-top: 1px solid var(--rule-strong); }
.defs dd code,
.def-list dd code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
.defs dt code,
.def-list dt code { font-size: inherit; color: inherit; }
.defs::after,
.def-list::after {
  content: "";
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule-strong);
}

/* ── hairline-divided list (editorial — labels + body) ── */
.listing {
  margin: var(--space-md) 0 0;
  border-top: 1px solid var(--rule-strong);
}
.listing__row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  column-gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--rule);
}
.listing__row:last-child { border-bottom: 1px solid var(--rule-strong); }
.listing__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  /* chalk, not accent — these are row taxonomy, not actions. The mono
     caps + tracking + weight read as a label; sodium stays reserved for
     active states and the recommended-action label. (Interactive
     a.listing__row rows still go sodium on hover — that IS an action.) */
  color: var(--ink);
  font-weight: 500;
  align-self: start;
}
.listing__body p { margin: 0; color: var(--ink-mid); font-size: 0.98rem; max-width: 60ch; }
.listing__body code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
.docs-registry-row__meta {
  display: inline-block;
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── task-first docs components ─────────────────────── */
.callout,
.note,
.gotcha,
.use-when,
.avoid,
.contract {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklch, var(--bg-faint) 74%, transparent);
}
.callout > :first-child,
.note > :first-child,
.gotcha > :first-child,
.use-when > :first-child,
.avoid > :first-child,
.contract > :first-child { margin-top: 0; }
.callout > :last-child,
.note > :last-child,
.gotcha > :last-child,
.use-when > :last-child,
.avoid > :last-child,
.contract > :last-child { margin-bottom: 0; }
.callout strong:first-child,
.note strong:first-child,
.gotcha strong:first-child,
.use-when strong:first-child,
.avoid strong:first-child,
.contract strong:first-child {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sodium);
}
/* Differentiate the callout family by its mono label, not a side-stripe
   (STYLEGUIDE guardrail #2). Sodium label = the recommended action
   (use-when); chalk = neutral statement (contract); ash = the quieter
   alternative or aside (avoid / note / gotcha). Accent still means action. */
.callout--contract strong:first-child,
.contract strong:first-child { color: var(--ink); }
.callout--note strong:first-child,
.note strong:first-child,
.callout--gotcha strong:first-child,
.gotcha strong:first-child,
.callout--avoid strong:first-child,
.avoid strong:first-child { color: var(--ink-dim); }

/* Paired decision: two asides side-by-side so a choose-X/choose-Y call
   reads as one comparison, and the page gets a second editorial texture
   beyond the listing rows. Stacks on narrow viewports. */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}
.choice-grid > .use-when,
.choice-grid > .avoid { margin: 0; }
@media (max-width: 820px) {
  .choice-grid { grid-template-columns: 1fr; }
}

.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}
.related-links__item {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
}
.related-links__item:hover {
  color: inherit;
  border-top-color: var(--sodium);
}
.related-links__item:hover strong { color: var(--sodium); }
.related-links__kind {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.related-links__item strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1;
  text-transform: lowercase;
  color: var(--ink);
}
.related-links__item span:last-child {
  max-width: 42ch;
  font-size: 0.9rem;
  line-height: 1.48;
  color: var(--ink-mid);
}

/* ── tables ─────────────────────────────────────────── */
.table,
table {
  margin: var(--space-md) 0 var(--space-lg);
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.table table { margin: 0; }
.table { overflow-x: auto; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-mid);
}
th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sodium);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
}
td code { color: var(--ink); }
tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

/* ── module-grid — rendered as a hairline-divided reference list
   (not a card grid). Same .module-grid + .panel markup the legacy
   pages used; the new look is reference-style rows so panels with
   one-sentence bodies don't strand alongside long ones in cards. */
.module-grid {
  display: block;
  margin: var(--space-md) 0 var(--space-lg);
  border-top: 1px solid var(--rule-strong);
}
.panel {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  column-gap: var(--space-xl);
  row-gap: var(--space-sm);
  align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  border-radius: 0;
}
.panel:last-child { border-bottom: 1px solid var(--rule-strong); }
/* label in col 1; heading + body + lists stack in col 2 */
.panel > small { grid-column: 1; grid-row: 1; }
.panel > h3,
.panel > h4,
.panel > p,
.panel > ul,
.panel > ol,
.panel > dl { grid-column: 2; margin-left: 0; }
.panel > small {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* heading sits in ink (not sodium) — accent means action, headings
   in a static dictionary don't qualify. weight + mono + uppercase
   already give the panel heading enough hierarchy. */
.panel h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  align-self: start;
}
.panel p {
  margin: 0;
  color: var(--ink-mid);
  font-size: 0.94rem;
  max-width: 60ch;
  line-height: 1.55;
}
.panel p code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink); }
/* code blocks and diagrams inside a panel span the full row so they
   don't auto-flow into the narrow label column and get clipped */
.panel > pre,
.panel > .diagram,
.panel > .mermaid,
.panel > table { grid-column: 1 / -1; max-width: 100%; }

/* ── pager — continues the spine into the landscape ─── */
.pager {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--space-xl);
  position: relative;
}
.pager::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--space-xl) + var(--rail) * 14 / 120);
  width: 1px;
  background: var(--sodium);
  pointer-events: none;
  z-index: 0;
}
.pager > * { position: relative; z-index: 1; }
.pager__rail {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: var(--space-md);
}
.pager__main {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-md);
}
.pager__prev,
.pager__next {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--sodium);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pager__prev:hover,
.pager__next:hover { color: var(--sodium-deep); }
.pager__prev strong,
.pager__next strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: lowercase;
  font-weight: 700;
  line-height: 1;
}
.pager__prev:hover strong,
.pager__next:hover strong { color: var(--sodium); }
.pager__prev .arrow,
.pager__next .arrow { transition: transform 200ms ease; }
.pager__next:hover .arrow { transform: translateX(4px); }
.pager__prev:hover .arrow { transform: translateX(-4px); }

/* ── landscape footer ───────────────────────────────── */
.cover {
  position: relative;
  margin: 0;
  padding: 0;
  max-width: none;
  /* clip the slide-in transforms so they can't visually bleed onto
     the spine / text / page bg during a regen. */
  overflow: hidden;
}

/* FOUC guard — until fonts have downloaded (or the failsafe fires),
   hide the body so users don't see a flash of serif Times before the
   page typography settles. theme.js sets `.lash-ready` on . */
:root:not(.lash-ready) body {
  visibility: hidden;
}
:root.lash-ready body {
  visibility: visible;
}
.cover__svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg);
  overflow: hidden;
}
.cover__caption {
  max-width: var(--page-max);
  margin: var(--space-lg) auto 0;
  padding: 0 var(--space-xl) var(--space-3xl);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.cover__caption b { color: var(--sodium); font-weight: 500; }
.cover__caption em { font-style: normal; color: var(--ink); font-weight: 500; }
.cover__caption code {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 1em;
  text-transform: none;
  letter-spacing: 0.02em;
}
.cover__src {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklch, var(--ink-faint) 70%, transparent);
  transition: color 140ms ease, border-color 140ms ease;
}
.cover__src:hover {
  color: var(--sodium);
  border-bottom-color: var(--sodium);
}
.cover__src:hover code { color: var(--sodium); }

/* ─────────────────────────────────────────────────────────────
   docs subpage layout · TOC sidebar + compact prose
   Body gets class="docs-page". Landing keeps the editorial design.
   ────────────────────────────────────────────────────────── */

body.docs-page {
  font-size: 15.5px;
  line-height: 1.62;
}

.docs-layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  column-gap: var(--space-3xl);
  align-items: start;
  position: relative;
}
.docs-layout > .docs-main { position: relative; z-index: 1; }
/* .toc gets sticky positioning below — only the z-index applies here */
.docs-layout > .toc { z-index: 1; }

/* the organic snake — one continuous sodium thread that rises out
   of the brazier at the bottom and snakes up through the TOC area.
   Drawn by docs.js into .spine-snake; replaces the static
   border-left on .toc__items. */
.spine-snake {
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--sodium);
}

/* the main vertical thread draws UP on first visit — continuing
   the lash that bloomed out of the brazier at the bottom of the
   cover SVG. Triggered by html.spine-revealed (set by scene.js
   after its intro bloom reaches the spine attachment point).
   .lash-revisit (set by theme.js on 2nd+ pageviews) skips the
   entrance so the TOC feels snappy on later navs.

   Implemented as a keyframe animation rather than a transition
   because SVG stroke-dashoffset doesn't reliably react to CSS
   transitions in Chrome — but it does animate via @keyframes. */
.spine-thread {
  opacity: 1;
  stroke-dasharray: 4000;
}
:root:not(.lash-revisit):not(.spine-revealed) .spine-thread {
  stroke-dashoffset: 4000;
}
:root.spine-revealed:not(.lash-revisit) .spine-thread {
  animation: spine-draw-up 1500ms cubic-bezier(0.22, 0.72, 0.18, 1) forwards;
}
@keyframes spine-draw-up {
  from { stroke-dashoffset: 4000; }
  to   { stroke-dashoffset: 0; }
}

/* staggered fade-in of TOC entries — first visit only */
:root:not(.lash-revisit) .toc__group,
:root:not(.lash-revisit) .toc__label {
  opacity: 0;
  transform: translateY(4px);
  animation: toc-rise 460ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
:root:not(.lash-revisit) .toc__label                { animation-delay:  60ms; }
:root:not(.lash-revisit) .toc__group:nth-of-type(1) { animation-delay: 140ms; }
:root:not(.lash-revisit) .toc__group:nth-of-type(2) { animation-delay: 240ms; }
:root:not(.lash-revisit) .toc__group:nth-of-type(3) { animation-delay: 340ms; }
:root:not(.lash-revisit) .toc__group:nth-of-type(4) { animation-delay: 440ms; }
:root:not(.lash-revisit) .toc__group:nth-of-type(5) { animation-delay: 540ms; }
@keyframes toc-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not(.lash-revisit) .toc__group,
  :root:not(.lash-revisit) .toc__label {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* cross-document view transition — Chrome 126+ smoothly fades
   between same-origin pages, killing the "full reload" feel even
   on the very first navigation.

   Gated above the layout breakpoint on purpose. The default crossfade
   snapshots the whole root and dissolves the outgoing page into the
   incoming one at the same coordinates. On wide screens the TOC is a
   fixed-width sticky sidebar, so the content column keeps the same Y on
   every page and the two snapshots line up. Below 980px the TOC becomes
   an inline block whose height varies per page (the active page's group
   auto-expands), so the heading lands at a different Y on each page and
   the crossfade ghosts the outgoing TOC over the incoming heading — the
   "weird overlap" seen on narrow windows. Only opt in where it aligns. */
@media (min-width: 981px) {
  @view-transition { navigation: auto; }
}

/* floating marker beside each entry — hollow ring (normal) or
   filled dot (active page). Never touches the thread or the text. */
.spine-mark {
  transition:
    opacity 220ms ease,
    r 240ms cubic-bezier(0.2, 0.6, 0.2, 1),
    stroke-width 220ms ease;
}
.spine-mark.is-hover {
  opacity: 1;
  stroke-width: 1.4;
}
.spine-mark.spine-mark--group {
  /* groups read a touch more present than their items */
}
.spine-mark.is-active {
  /* a single steady halo — the earlier pulsing animation read as a
     visual blip rather than a "you are here" cue. Static is calmer. */
  filter: drop-shadow(0 0 3px var(--sodium));
}

@media (prefers-reduced-motion: reduce) {
  .spine-thread { animation: none; stroke-dashoffset: 0; }
}

/* ── TOC sidebar ────────────────────────────────────── */
.toc {
  /* sticky — the TOC follows scroll so the reader's "you are here"
     stays in view. The spine snake lives inside the sticky element
     so the thread and its eyelets travel with the items. The column
     occupies the full viewport-aligned height so the spine reads as
     a continuous line down the page instead of stopping mid-air. */
  position: sticky;
  top: calc(var(--band-h) + var(--space-sm));
  align-self: start;
  height: calc(100vh - var(--band-h) - var(--space-xl));
  overflow-y: auto;
  overflow-x: hidden;
  /* hide the scrollbar UI — content still scrolls via wheel / drag /
     keyboard. Standard rule for Firefox, vendor selector for WebKit. */
  scrollbar-width: none;
  padding: var(--space-xl) 0 var(--space-2xl);
  font-size: 0.92rem;
}
.toc::-webkit-scrollbar { width: 0; height: 0; }

.toc__label {
  margin: 0 0 var(--space-md);
  padding-left: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim); /* AA-passing (6.85:1); --ink-faint was sub-AA */
}

.toc__group {
  margin: 0 0 var(--space-sm);
}
.toc__group-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--space-2xs);
  /* left padding MUST sit comfortably past --toc-rail-x so the spine
     never crosses the caret/title text */
  padding: 0.18rem var(--space-sm) 0.18rem var(--space-md);
  /* industrial signage voice — not editorial italic */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--ink);
  border-radius: 4px;
}
/* When the title is a