overrides.css

/* ------------------------------------------------------------------
 * Docs-site stylesheet — owns 100% of the visual rules.
 *
 * scripts/tour.mts copies this over meander's emitted walkthrough.css
 * wholesale during post-processing; every styling decision on the
 * deployed site comes from here. Meander owns the HTML shape (class
 * names, structure); this file owns the look.
 *
 * Organised top-down:
 *   1. @font-face (Geist + Geist Mono, self-hosted variable)
 *   2. Theme tokens (system / light / dark / synthwave)
 *   3. Reset + base typography
 *   4. Layout shell (topbar, main, footer)
 *   5. Buttons, pills, keycaps
 *   6. Tables, TOC rows, three-column feature grid
 *   7. Annotated part pages (pair-grid, code-section, file-block)
 *   8. Code / diff table styles
 *   9. Doc body prose
 *  10. Theme toggle UI
 *  11. Comment shim UI
 * ------------------------------------------------------------------ */

/* ── 1. Fonts ─────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Geist.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/GeistMono.woff2') format('woff2-variations');
}

/* Opt every same-origin navigation into the View Transitions API.
 * Supporting browsers (Chrome 126+, Safari 18+) cross-fade the old
 * page's frame into the new one — no JS, no rework needed in the
 * build. Non-supporting browsers ignore the rule; no polyfill
 * shipped. Honors reduced-motion at the UA level. */
@view-transition {
  navigation: auto;
}

/* ── 2. Theme tokens ──────────────────────────────────────────────── */

/* Light theme — eggshell + warm-pastel palette. Neutrals lean
 * WARM (hint of cream) instead of cool grey so the page reads
 * as "off-white stationery" rather than "grey UI". Contrast
 * ladder stays: --ink (near-black for headings) → --body
 * (warm medium for prose) → --muted (lighter warm for meta).
 * Pastels for accent/status so status badges stay gentle. */
:root,
html[data-theme='light'] {
  --bg: #fdfaf5;
  --bg-elev: #fbf6ec;
  --bg-tint: #f6efe0;
  --surface: #fdfaf5;
  --ink: #1a1714;
  --body: #5a5248;
  --muted: #8a8074;
  --border: #ece3d2;
  --border-strong: #d8cdb8;
  /* Light-mode accent — warm brown rust. Less red, more
   * hazelnut so the accent sits with the cream eggshell and
   * sepia body text as one "spice" family rather than a red
   * callout that fights the warm palette. */
  --accent: #92551c;
  --accent-fg: #7a4619;
  --accent-bg: #f3e3ca;
  /* Nav state tokens — warm eggshell tints of the page bg, one
   * family so hover-over-selected doesn't clash. Selected is a
   * touch deeper than hover so the active row still reads as the
   * anchor when a sibling is hovered. */
  --nav-hover-bg: #f2e8d2;
  --nav-selected-bg: #ede2c8;
  --danger: #c2410c;
  --success: #15803d;
  /* Code panel — warm starry-night charcoal, not ink-black.
   * Lifts the right-panel tone off "hole in the page" into
   * "deep dark room" so the cream light palette and the code
   * surface share the same warmth family. */
  --code-bg: #363230;
  --code-fg: #f5e9c8;
  --code-comment: #8b949e;
  --code-keyword: #ff7b72;
  --code-string: #a5d6ff;
  --code-number: #79c0ff;
  --code-function: #d2a8ff;
  --code-type: #ffa657;
  --diff-add-bg: rgba(46, 160, 67, 0.15);
  --diff-del-bg: rgba(248, 81, 73, 0.15);
  --diff-add-mark: #2ea043;
  --diff-del-mark: #f85149;
  --shadow-sm: 0 1px 2px rgba(90, 60, 30, 0.06);
  --shadow-md: 0 2px 8px rgba(90, 60, 30, 0.08);
  --shadow-lg: 0 8px 24px rgba(90, 60, 30, 0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --transition-fast: 120ms ease;
  --transition-med: 220ms ease;
  /* Universal tokens (theme-independent). --font-mono is the
   * one mono stack every code surface uses — Geist Mono (self-
   * hosted above), then system fallbacks. --col-split is the
   * splitter ratio drag.js writes back via inline style on :root. */
  --font-mono:
    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
  --col-split: 42;
}

/* System preference — follow prefers-color-scheme. Only applies when
 * the user hasn't picked an explicit theme (data-theme missing or
 * absent). The drag.js bootstrap resolves 'system' to 'light' or
 * 'dark' on page load, so this block is a fallback for pre-JS paint. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --bg-elev: #111111;
    --bg-tint: #161616;
    --surface: #111111;
    --ink: #fafafa;
    --body: #a1a1aa;
    --muted: #9ca3af;
    --border: #262626;
    --border-strong: #404040;
    --accent: #93c5fd;
    --accent-fg: #93c5fd;
    --accent-bg: #1a2540;
    /* Code panel — starry-night cool charcoal, not pure black.
     * Sits above --bg (#0a0a0a) / --surface (#111111) so the
     * code surface reads as lifted, not as void. */
    --code-bg: #1c2028;
  }
}

/* Dark theme — explicit toggle pick. Higher-contrast-than-system so
 * code blocks and diff markers read cleanly. */
html[data-theme='dark'] {
  --bg: #0a0a0a;
  --bg-elev: #111111;
  --bg-tint: #161616;
  --surface: #111111;
  --ink: #fafafa;
  --body: #a1a1aa;
  --muted: #71717a;
  --border: #262626;
  --border-strong: #404040;
  --accent: #93c5fd;
  --accent-fg: #93c5fd;
  --accent-bg: #1a2540;
  --nav-hover-bg: #0a0a0a;
  --nav-selected-bg: #1e2a3a;
  /* Code panel — starry-night cool charcoal, not pure black.
   * Sits above --bg (#0a0a0a) / --surface (#111111) so the
   * code surface reads as lifted, not as void. */
  --code-bg: #1c2028;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Synthwave — deep midnight purple with magenta accent. Not a
 * light/dark variant; its own coherent palette. Background uses a
 * subtle radial toward a warmer plum corner per the reference album
 * art. Active-state pink matches the cassette-icon tag color. */
html[data-theme='synthwave'] {
  --bg: radial-gradient(
    ellipse at top right,
    #3a2450 0%,
    #2a1b3d 40%,
    #1a0f2e 100%
  );
  --bg-elev: #2a1b3d;
  --bg-tint: #241633;
  --surface: #2a1b3d;
  --ink: #f8f0ff;
  --body: #c8b8e8;
  --muted: #b6a6d4;
  --border: #3d2a5a;
  --border-strong: #5a3d7a;
  --accent: #ff7edb;
  --accent-fg: #ff7edb;
  --accent-bg: rgba(255, 126, 219, 0.18);
  /* Hover is darker than --bg-elev (#2a1b3d), selected is lighter
   * — selected reads as lit-up, hover reads as pressed-into. Both
   * use --accent (pink) for text. */
  --nav-hover-bg: #1a0f2e;
  --nav-selected-bg: #3d2a5a;
  --danger: #ff6b9d;
  --success: #4ade80;
  --code-bg: #22143a;
  --code-fg: #f8f0ff;
  --code-comment: #9080b0;
  --code-keyword: #ff7edb;
  --code-string: #ffb86c;
  --code-number: #bd93f9;
  --code-function: #8be9fd;
  --code-type: #50fa7b;
  --diff-add-bg: rgba(80, 250, 123, 0.15);
  --diff-del-bg: rgba(255, 107, 157, 0.15);
  --diff-add-mark: #50fa7b;
  --diff-del-mark: #ff6b9d;
  --shadow-sm: 0 1px 2px rgba(255, 126, 219, 0.1);
  --shadow-md: 0 2px 12px rgba(255, 126, 219, 0.15);
  --shadow-lg: 0 8px 32px rgba(255, 126, 219, 0.2);
}

/* ── 3. Reset + base typography ──────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--body);
  font-family:
    'Geist',
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv01';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — near-black ink, tight tracking, extra-bold display
 * weight. The giant H1 is the signature of the editorial look. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

/* H1 is small by default — sized for UI labels like the topbar
 * wordmark. Hero headlines are opt-in via a parent class (e.g.
 * .doc-body h1 or .hero h1) so we don't clobber chrome-sized
 * occurrences. */
h1 {
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}

h2 {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 48px 0 18px;
}

h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 40px 0 14px;
}

h4 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
}

p {
  margin: 0 0 16px;
  color: var(--body);
  line-height: 1.6;
}

/* Inline code — Geist Mono, faint box, no color. Meant to sit in
 * prose without pulling focus. The first inline code token after a
 * heading often reads in --ink for emphasis. */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
  color: var(--ink);
  font-feature-settings: 'ss01';
}

/* First inline code in a paragraph is often a package/API name and
 * should carry ink weight to match the "@pierre/diffs"-style opening. */
p > code:first-child,
li > code:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* Inline code that drag.js routed through hljs for syntax coloring
 * (typically single-backtick `@example` spans inside .annotation-md).
 * The github-dark theme adds its own block-level padding + background
 * to .hljs; we want the span to read like regular inline code plus
 * syntax tint, not a floating code block. Keep our own box + padding;
 * let hljs's per-token colors flow through. */
code.hljs.hljs-inline {
  display: inline;
  /* Tight internal padding so the pill hugs the text, plus
   * generous horizontal + vertical margin so adjacent pills
   * don't touch and wrapped pills stacking across lines get
   * a clear row gap. Vertical margin is deliberately larger
   * than horizontal so stacked pills read as separate rows
   * even at cramped viewport widths. */
  padding: 1px 6px;
  margin: 4px 4px;
  /* Starry-night charcoal — one notch lighter than the right-
   * panel --code-bg so the pill reads as "mini right-panel"
   * without punching a pure-black slot into the page. hljs
   * tokens (blue numbers, purple types, red keywords, lilac
   * functions) land on the dark pill the way they're designed
   * to, matching the right-side code surface's language. One
   * tone across every theme so inline pills keep a coherent
   * identity when the user flips themes. */
  background: #3e3a37;
  color: var(--code-fg);
  border: 1px solid color-mix(in srgb, var(--code-fg) 14%, transparent);
  /* Keep inline code on a single line — a snippet split mid-
   * token (`{ ca` / `che }`) reads worse than horizontal
   * overflow. Same treatment as `.wt-purl`. */
  white-space: nowrap;
}

/* PURL-shaped inline code (`pkg:npm/lodash@4.17.21` etc.) and bare
 * identifier tokens (`arch`, `hex`, …). drag.js sniffs the content
 * and tags these instead of running hljs — PURLs are a fixed-
 * grammar identifier, not a language hljs can parse, and auto-
 * detect mis-tokenizes them as stray punctuation. Render as the
 * default inline-code box (monospace + tint + border) with no
 * syntax coloring. Keep on a single line — a PURL split mid-token
 * (e.g. `pkg:np` / `m/...`) is worse than horizontal overflow. */
code.wt-purl,
.annotation-md code.wt-purl {
  /* Same deep-charcoal pill treatment as hljs inline. The
   * second selector bumps specificity above meander's
   * `.annotation-md code` default so the color/background
   * aren't silently overridden. Since `.wt-purl` carries no
   * hljs token classes, we paint the content in --code-fg
   * (cream) directly — the pill reads as a single-tone quoted
   * identifier. */
  padding: 1px 6px;
  margin: 4px 4px;
  background: #3e3a37;
  color: var(--code-fg);
  border: 1px solid color-mix(in srgb, var(--code-fg) 14%, transparent);
  white-space: nowrap;
}

/* Parameter-name pill on the `@param` top strip. The inline
 * pill is a dark charcoal panel across all themes; --code-number
 * (github-dark blue) renders as the hljs "params" token color
 * on the right-side panel, so left/right reads as the same
 * token. */
code.wt-jsdoc-param-name {
  color: var(--code-number);
}

/* @example code blocks in the annotation prose should match
 * the right-side code panel exactly — both sides run through
 * hljs with github-dark's stylesheet, so token colors already
 * match. We only override the BACKGROUND so the left block
 * sits on the same surface tone as the right panel (and picks
 * up a faint outline to read as "a code panel, not a quote").
 * Leave token classes (.hljs-keyword etc.) untouched — they
 * resolve to the CDN github-dark values that the right side
 * also uses. */
.annotation-md pre:has(> code.hljs),
.annotation-md pre code.hljs {
  background: var(--code-bg);
}

/* Inline hljs pills in .annotation-md — meander's base CSS
 * sets its own color/background on `.annotation-md code`, so
 * this rule bumps specificity to keep our deep-charcoal pill
 * from being silently overridden. Matches the base rule above. */
.annotation-md code.hljs.hljs-inline {
  background: #3e3a37;
  color: var(--code-fg);
  border: 1px solid color-mix(in srgb, var(--code-fg) 14%, transparent);
}

/* Identifier / class / builtin tokens inside inline pills — the
 * github-dark CDN stylesheet paints these `#f0883e` (muddy
 * amber) which reads as "too dark" on our lifted charcoal
 * pill. Force identifier classes back to --code-fg so a lone
 * class name like `PurlBuilder` reads cream instead of dim
 * amber. Colored tokens (keyword / string / number / type)
 * keep their github-dark palette since those provide the
 * syntax signal the user expects. */
code.hljs.hljs-inline .hljs-title,
code.hljs.hljs-inline .hljs-title.class_,
code.hljs.hljs-inline .hljs-title.function_,
code.hljs.hljs-inline .hljs-built_in,
code.hljs.hljs-inline .hljs-variable.language_,
code.hljs.hljs-inline .hljs-attr,
code.hljs.hljs-inline .hljs-name,
code.hljs.hljs-inline .hljs-params,
.annotation-md code.hljs.hljs-inline .hljs-title,
.annotation-md code.hljs.hljs-inline .hljs-title.class_,
.annotation-md code.hljs.hljs-inline .hljs-title.function_,
.annotation-md code.hljs.hljs-inline .hljs-built_in,
.annotation-md code.hljs.hljs-inline .hljs-variable.language_,
.annotation-md code.hljs.hljs-inline .hljs-attr,
.annotation-md code.hljs.hljs-inline .hljs-name,
.annotation-md code.hljs.hljs-inline .hljs-params {
  color: var(--code-fg);
}

.annotation-md pre:has(> code.hljs) {
  border: 1px solid var(--border);
  border-radius: 8px;
}

pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
}

pre code {
  padding: 0;
  border: none;
  background: transparent;
  font-size: inherit;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--transition-fast);
}

a:hover {
  text-decoration-color: var(--ink);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}

ul,
ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

li {
  margin-bottom: 6px;
  color: var(--body);
}

blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--border-strong);
  color: var(--body);
  font-style: normal;
}

/* ── 4. Layout shell ──────────────────────────────────────────────── */

/* Topbar — wordmark only. Actions used to live here; they moved
 * into the part-nav strip so this band is pure identity. No sticky;
 * it scrolls away with the page. */
.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

html[data-theme='synthwave'] .topbar {
  background: color-mix(in srgb, #1a0f2e 88%, transparent);
}

/* Topbar wordmark. On the index:
 *   <code class="wt-product">packageurl-js</code>
 *   <span class="wt-descriptor">override by Socket</span>
 * The product is the npm package this tour documents, styled as
 * code (literal coordinate, not a marketing name). The descriptor
 * sits alongside in a sly purple saying what Socket contributes.
 * On part/doc pages this <h1> carries the part title as plain
 * text — the rules below only style the wordmark shape when the
 * children are present, so they no-op on part pages. */
.topbar h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}

.topbar h1 .wt-product {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0;
  /* Keep ligatures off so the hyphen in `packageurl-js` doesn't
   * collapse into a figure-dash or similar glyph. */
  font-variant-ligatures: none;
  -webkit-font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
  font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
}

/* Descriptor — "override by Socket" as a trademark-style marker
 * raised from the baseline like <sup>. Small, sly purple,
 * signature tint across every theme. Stays in the inline flow so
 * it can't get clipped by the topbar or positioned off-screen;
 * vertical-align handles the raise. */
.topbar h1 .wt-descriptor {
  display: inline-block;
  margin-left: 6px;
  vertical-align: top;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--accent-fg);
}

.topbar p {
  display: none;
}

/* Actions cluster (theme toggle, export, comments) — lives on the
 * right side of .part-nav. `margin-left: auto` pushes it to the
 * end of the flex row regardless of how many part pills precede
 * it, so the cluster is always right-aligned. Items bottom-align
 * so the visual baseline of the download square, chat-bubble body,
 * and cassette outline share a horizontal guideline — even though
 * each icon has its own viewBox + render size. */
.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* Pre-reserve the action cluster width so the theme-toggle
 * bolt lands in its final position on first paint — no jump
 * when comments.js hydrates the two shim buttons.
 *
 * Part pages (body[data-has-comments]) will eventually carry
 * 3 buttons × 30px + 2 × 4px gap = 98px. Reserving that
 * min-width means the lone bolt, rendered first (prepended by
 * drag.js), sits at the LEFT edge of a right-aligned 98px
 * cluster. When comments.js appends the export + unresolved
 * buttons, they fill the reserved slots to its right; the bolt
 * doesn't move.
 *
 * Doc + index pages never get the comments buttons, but we
 * still want the bolt at the rightmost slot for visual parity
 * — same 98px reservation, different end-alignment via
 * margin-left: auto on the bolt itself. */
body[data-has-comments] .topbar-actions {
  min-width: 98px;
}

body:not([data-has-comments]) .topbar-actions .theme-toggle-wrapper {
  margin-left: 68px;
}

/* <main> is a generic container — meander uses it for part-page
 * file stacks (wide, two-column) and we use it for doc-page prose
 * (narrow, single column). Keep the base rule wide; narrower
 * constraints belong on `.doc-body` and `.wt-contents` (the index
 * TOC), not on every <main>. */
main {
  margin: 0 auto;
  padding: 8px 32px 80px;
}

/* Index TOC: narrow editorial column — reading material, not a
 * data view. */
main .wt-contents {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Part pages (.files-stack) fill the viewport width up to a
 * generous cap — wide monitors shouldn't have prose + code
 * wedged into a small center strip when there's real estate to
 * spread out. Leaves each column room to breathe.  */
main.files-stack {
  max-width: 1800px;
  padding-left: 40px;
  padding-right: 40px;
}

/* Code sections paint immediately — no opacity gate, no
 * wait-for-hljs fade-in. Since hljs now only touches blocks
 * with an explicit `language-*` class (and ours all do) and the
 * script is `defer`-loaded, the unhighlighted-to-tokenized
 * flip happens within ~10ms of first paint. Hiding + fading in
 * was hurting LCP for no real visual payoff. */

/* ── 5. Buttons, pills, keycaps ──────────────────────────────────── */

/* Part-nav — a thin minimal strip directly beneath the topbar.
 * Shows "[home] Parts: 1 2 3 … 8" and sits at a fixed position on
 * every page (index, parts, docs) so the nav never visually jumps
 * when you click between pages. Lightweight chrome — compact
 * pills, small type, subtle tint — so it recedes when you're
 * actually reading. Active pill gets the "reversed elevation"
 * treatment: white fill with a thin border while siblings stay
 * transparent. */
.part-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 4px 32px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  /* Reserve the full 38px nav height (30px action-button height
   * + 4px top/bottom padding) BEFORE comments.js injects its
   * download + chat buttons. Without this, the nav initially
   * sizes to the 26px pill height and grows ~4px when the
   * buttons land → every reload jumps the page content. */
  min-height: 38px;
}

.topbar-actions {
  /* Same deal — keep the actions cluster at its final height
   * from first paint so its flex parent doesn't reflow when
   * the buttons hydrate. */
  min-height: 30px;
}

.wt-parts-label {
  color: var(--muted);
  font-weight: 500;
  /* Zero right margin so the label sits at the same flex `gap`
   * distance from "1" as "1" sits from "2". Extra left margin
   * widens the separation between the home icon and "Parts:" so
   * the home link reads as its own visual group. */
  margin: 0 0 0 16px;
  font-size: 11px;
}

.part-nav a,
.wt-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* Hover = darker than the strip bg, with accent-color text. Reads
 * as "I'm pressing into this option". */
.part-nav a:hover,
.wt-home-link:hover {
  background: var(--nav-hover-bg);
  border-color: var(--border-strong);
  color: var(--accent-fg);
}

/* Selected (active) = lighter than the strip bg, with accent-color
 * text. Reads as "you are here, lit up". Same text color as hover
 * so the two states share a signal (accent-colored = interactive
 * or selected); bg direction distinguishes them. Applies to the
 * active part pill AND to the home link when the user is on the
 * index — visual parity between "on home" and "on part N". */
.part-nav a.active,
.wt-home-link.active {
  background: var(--nav-selected-bg);
  border-color: var(--accent-fg);
  color: var(--accent-fg);
  box-shadow: var(--shadow-sm);
}

.wt-home-link {
  padding: 0 6px;
  min-width: 26px;
  color: var(--muted);
}

.wt-home-link svg {
  display: block;
  width: 18px;
  height: 18px;
}

.wt-topics-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

/* Doc pills in the unified Topics row. Same shape and tone as
 * numbered part pills (one word each) so the row reads as a
 * continuous sequence: "Anatomy Building … VERS | Architecture
 * Builders …". Slightly tighter padding than the number pills
 * since word labels carry their own width. */
.wt-topic-doc {
  padding: 0 8px;
}

/* First doc pill = the one NOT preceded by another .wt-topic-doc.
 * `:first-of-type` doesn't work here because every pill is an
 * <a>, so :first-of-type matches the first Part (Anatomy), not
 * the first doc. The `:not(:has(...))` form reads: "doc pill
 * whose previous sibling isn't also a doc pill," i.e. the first
 * in the sequence. */
.wt-topic-doc:not(.wt-topic-doc + .wt-topic-doc) {
  margin-left: 14px;
  position: relative;
}

/* Pretty vertical separator between the parts (code) and the
 * docs (articles). Accent-tinted, full-height, soft gradient
 * fade at top/bottom so it doesn't feel like a hard chop.
 * Sits in the 8px gap flex creates between the last part pill
 * and the first doc pill. */
.wt-topic-doc:not(.wt-topic-doc + .wt-topic-doc)::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--accent-fg) 50%, transparent) 20%,
    color-mix(in srgb, var(--accent-fg) 50%, transparent) 80%,
    transparent 100%
  );
}

/* Hover callback to the home page badges: code pages (parts)
 * pick up the blue used by the "CODE" kind badge; article pages
 * (docs) pick up the green "ARTICLE" tint. Subtle — just the
 * border and a faint fill. Same colors as .wt-badge-kind-code /
 * .wt-badge-kind-article so the connection reads. Only applies
 * to the non-active state; .active keeps its accent-fg framing. */
/* Code-page pills (blue) and article-page pills (green) on
 * hover — mirror the .wt-badge-size tier formula exactly so
 * the menu hovers read as the same color language as the
 * homepage TOC size chips (where "SMALL" is green). Text
 * follows the border/ink side of the chip, not the full-
 * saturation hue, so the pill stays readable on either the
 * warm light bg or dark navbar. */
.part-nav a:not(.wt-topic-doc):not(.active):hover {
  border-color: color-mix(in srgb, #7aa5c7 30%, var(--border-strong));
  background: color-mix(in srgb, #7aa5c7 14%, var(--nav-hover-bg));
  color: color-mix(in srgb, #7aa5c7 85%, var(--ink));
}

.wt-topic-doc:not(.active):hover {
  border-color: color-mix(in srgb, #6ec3a5 30%, var(--border-strong));
  background: color-mix(in srgb, #6ec3a5 14%, var(--nav-hover-bg));
  color: color-mix(in srgb, #6ec3a5 85%, var(--ink));
}

/* Generic button — used by doc pages and any future CTA surface.
 * Black pill with white text, primary-CTA style like
 * `bun i @pierre/diffs`. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  /* Enumerate properties instead of `all` — transition:all forces
   * style recalc + transition setup for every changed property,
   * including layout-triggering ones. Explicit list keeps the
   * hover change on the compositor (transform) + paint (shadow,
   * background, border, color) without style-engine churn. */
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  color: var(--ink);
  background: var(--bg-tint);
  border-color: transparent;
}

.btn-secondary:hover {
  background: var(--bg-elev);
}

/* Keycap chip — for keyboard shortcuts in tables + prose. Thin
 * border, soft white fill, monospace label. */
.kbd,
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow:
    0 1px 0 var(--border-strong),
    inset 0 0 0 1px var(--bg);
  line-height: 1;
  white-space: nowrap;
}

/* ── 6. Tables, TOC rows, feature grid ────────────────────────────── */

/* Tables — hairline rows, faint tinted header, generous row height.
 * Used for API references, keyboard shortcuts, any comparison table. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}

thead th {
  background: var(--bg-elev);
  padding: 14px 16px;
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody td {
  padding: 16px;
  vertical-align: top;
  color: var(--body);
}

tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* TOC on the index page — each part/topic is a row with a bold
 * title, a muted summary, and a count badge on the right. Replaces
 * meander's default <ul> TOC with a typeset list. */
.wt-contents {
  margin: 48px 0;
  padding: 0;
}

.wt-contents > h3 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wt-contents-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.wt-contents-row:last-of-type {
  border-bottom: none;
}

.wt-contents-main {
  flex: 1;
  min-width: 0;
}

.wt-contents-title {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 4px;
}

.wt-contents-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-underline-offset: 4px;
}

.wt-contents-summary {
  margin: 0;
  font-size: 15px;
  color: var(--body);
  line-height: 1.5;
}

/* Intro block above the TOC on the index. Establishes the npm
 * coordinates (the tour title is a product name; the installable
 * name differs). Copy-ready `npm install` line so a visitor can
 * start using the library before reading a single part. */
.wt-intro {
  max-width: 720px;
  margin: 24px auto 32px;
  padding: 0 8px;
}

.wt-intro-line {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

.wt-intro-line code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  /* Starry-charcoal pill + cream code-fg — same language as
   * the part-page inline pills and the .wt-contents-summary
   * chips, so every inline code chip across the site reads as
   * one "mini right-panel" surface. */
  background: #3e3a37;
  border: 1px solid color-mix(in srgb, var(--code-fg) 14%, transparent);
  color: var(--code-fg);
  font-variant-ligatures: none;
  -webkit-font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
  font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
}

.wt-intro-pkg,
.wt-intro-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

/* Code pills inside the hero links shouldn't carry the link's
 * dotted underline — the underline peeks out on either side of
 * the charcoal pill, which reads as a broken strike-through
 * rather than the link affordance it was meant to be. Scope
 * text-decoration: none to the pill; the non-code parts of the
 * link keep the dotted underline. */
.wt-intro-pkg code,
.wt-intro-link code {
  text-decoration: none;
}

.wt-intro-pkg:hover,
.wt-intro-link:hover {
  color: var(--accent-fg);
  text-decoration-style: solid;
  text-decoration-color: var(--accent-fg);
}

.wt-intro-pkg:hover code {
  border-color: color-mix(in srgb, var(--code-fg) 40%, transparent);
}

/* Install snippet — reads as a runnable command, not prose.
 * Darker background like the code-section panels, no line
 * numbers, comfortable touch target for a copy gesture. */
.wt-intro-install {
  margin: 0;
  padding: 12px 16px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.wt-intro-install code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--code-fg);
  background: transparent;
  border: none;
  padding: 0;
}

/* Numeric highlight inside TOC summaries — counts and tilde-
 * approximations (e.g. "~25 ecosystems", "41 parts") get lifted
 * in accent color so they read as quantitative anchors in prose.
 * Slightly stronger weight without changing the font, so the
 * text rhythm stays intact. */
/* Numeric highlight — universal. Used by the home TOC summary
 * and by doc-page prose (highlightProseNumbers in tour.mts).
 * Same token, one rule. */
.wt-num {
  color: var(--accent-fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Inline links inside TOC summaries — rendered from
 * [label](href) markdown. Subtle default (inherit color, no
 * underline) so they don't pull focus in a list view; reveal
 * on hover with accent color + underline. */
.wt-contents-summary .wt-toc-link {
  color: inherit;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

.wt-contents-summary .wt-toc-link:hover {
  color: var(--accent-fg);
  text-decoration-color: var(--accent-fg);
  text-decoration-style: solid;
}

/* Inline code spans inside TOC summaries — rendered from
 * `backtick`-wrapped segments in tour.json objective/summary
 * strings. Matches the mono tone of code blocks on part pages
 * but sized to sit inline with prose. font-variant-ligatures:none
 * stops Geist Mono from collapsing `...` into a single ellipsis
 * glyph (which would hide the user's literal three-dot intent). */
.wt-contents-summary code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  /* Same starry-charcoal pill + cream code-fg as the part-page
   * inline pills, so homepage and part pages share one "code
   * chip" language. One step lighter than --code-bg to keep
   * the "mini right-panel" read. */
  background: #3e3a37;
  border: 1px solid color-mix(in srgb, var(--code-fg) 14%, transparent);
  color: var(--code-fg);
  /* Allow mid-token wrapping on long single-word pills (e.g.
   * `pkg:type/ns/name@version?q#sub`). Without this the pill
   * stays one line and forces the TOC row wider than the
   * viewport, shoving the right-edge kind/size badges off-
   * screen. overflow-wrap on the prose surface picks a hyphen-
   * free mid-char break so the pill stays intact as a single
   * chip, just with visual line breaks where the content
   * naturally wraps. */
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-ligatures: none;
  -webkit-font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
  font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
}

/* Badge cluster — sits in the right column of each TOC row. Two
 * signals, visually distinct:
 *   - kind:  secondary metadata (code vs article). Small flat
 *            label, no pill shape — reads as a tag, not a button.
 *   - size:  primary signal (read-time estimate). Pill, muted
 *            fill, clear hierarchy.
 * The kind label sits right-justified above the size pill so the
 * size draws the eye first. */
.wt-contents-badges {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  align-self: center;
}

/* Base pill — used only by size tiers now. Kind is flat text. */
.wt-contents-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Kind badge — demoted to a small tag: flat, borderless, no
 * background. Slightly colored text so it still signals type at
 * a glance but doesn't compete with the size pill below. */
.wt-badge-kind {
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wt-badge-kind-code {
  color: color-mix(in srgb, #7aa5c7 75%, var(--muted));
}

.wt-badge-kind-article {
  color: color-mix(in srgb, #6ec3a5 75%, var(--muted));
}

/* Size badge — primary pill. Muted fill so the color reads as
 * "warm = more time" without blaring. Border tuned to each tier
 * but text kept closer to body color for readability. */
.wt-badge-size {
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--body);
  background: var(--bg-tint);
}

/* Size tier — the brightness signal. Each tier uses a tinted
 * background with a slightly stronger border in the same hue.
 * Text stays near body color for readability; the background
 * color does the work. Cooler for smaller, warmer for larger. */
.wt-badge-size-x-small {
  background: color-mix(in srgb, #7aa5c7 14%, var(--bg-tint));
  border-color: color-mix(in srgb, #7aa5c7 30%, var(--border));
}
.wt-badge-size-small {
  background: color-mix(in srgb, #6ec3a5 14%, var(--bg-tint));
  border-color: color-mix(in srgb, #6ec3a5 30%, var(--border));
}
.wt-badge-size-medium {
  background: color-mix(in srgb, #d8c26a 14%, var(--bg-tint));
  border-color: color-mix(in srgb, #d8c26a 30%, var(--border));
}
.wt-badge-size-large {
  background: color-mix(in srgb, #e69a5a 16%, var(--bg-tint));
  border-color: color-mix(in srgb, #e69a5a 35%, var(--border));
}
.wt-badge-size-x-large {
  background: color-mix(in srgb, #e47070 18%, var(--bg-tint));
  border-color: color-mix(in srgb, #e47070 40%, var(--border));
}

/* Three-column feature grid — for landing-page sections like
 * "Anatomy / Building / Parsing" presented as side-by-side briefs. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin: 64px 0;
}

@media (max-width: 840px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.feature-grid > .feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature h3 {
  margin: 0;
  font-size: 22px;
}

.feature p {
  margin: 0;
  color: var(--body);
  font-size: 15px;
}

/* ── 7. Annotated part pages ─────────────────────────────────────── */

/* Meander emits `.pair-grid` (two-column: prose + code) and
 * `.file-grid` (single-column file blocks). We preserve the
 * structure but restyle the cells. */

.layout {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

/* Two-column grid — prose on the left, code on the right. The
 * column ratio is driven by --col-split (declared in the main
 * :root block above — 42 by default). drag.js updates that
 * token via inline style on :root. Using calc with % units
 * (not fr) so the arithmetic is well-defined in every browser. */
.pair-grid,
.file-grid {
  display: grid;
  grid-template-columns:
    calc(var(--col-split) * 1%)
    calc((100 - var(--col-split)) * 1%);
  gap: 0;
  align-items: start;
  margin: 16px 0 32px;
  position: relative;
}

@media (max-width: 960px) {
  .pair-grid,
  .file-grid {
    grid-template-columns: 1fr;
  }
}

.pair-grid > .annotation-card,
.file-grid > .annotation-card {
  /* Right padding gives the prose breathing room before the code
   * block starts — without it, italic descenders in the prose can
   * touch the code-section's left border. Top padding stays small
   * so the first card sits close to the file-head bottom border. */
  padding: 8px 32px 20px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 0;
}

.pair-grid > .code-section,
.file-grid > .code-section {
  margin: 0;
  min-width: 0;
}

.files-stack {
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.file-block {
  margin: 0;
  border: none;
  background: transparent;
  /* Baseline: `contain: layout` isolates the grid inside this
   * block so a splitter drag doesn't reflow sibling file-blocks.
   * Paint is NOT contained because the sections-panel dropdown
   * needs to escape the block to render above siblings below.
   * Everyone gets this. */
  contain: layout;
}

/* Non-Safari browsers: promote to `content-visibility: auto`,
 * which skips rendering off-screen file-blocks entirely (layout
 * + paint + style). `contain-intrinsic-size` gives the browser a
 * placeholder height so the scrollbar doesn't thrash as blocks
 * hydrate on scroll. Safari 18+ supports the property but its
 * `:target` hash-anchor behavior on skipped blocks is still
 * flaky as of 2026, so Safari keeps the plain `contain: layout`
 * path. drag.js sets data-ua="safari" on <html> via UA sniff. */
html:not([data-ua='safari']) .file-block {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

.file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

/* File path on each file-block header — the "this section is
 * about <file>" title. Largest heading on the page but
 * sized to scale with the annotation-prose beneath (13px body
 * + 15px subheads), so the hierarchy is visible without the
 * path shouting. */
.file-head .path {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.file-head .count {
  font-size: 14px;
  color: var(--muted);
}

/* Files / sections dropdowns on the file-head. Native <details> for
 * toggle state; the <summary> carries a dashed underline + a small
 * dot as a "clickable" affordance. Clicking opens a floating panel:
 *   - Files menu (on .path): list of every file block on the page,
 *     each linking to its anchor — jump-to-file.
 *   - Sections menu (on .count): list of every section anchor in
 *     this file as "Line N" — jump-to-line within the current file.
 * Both panels are positioned absolute so they overlay content
 * instead of reflowing the page; both scroll internally when long. */
.wt-files-menu,
.wt-sections-menu {
  position: relative;
  display: inline-block;
}

.wt-files-menu > summary,
.wt-sections-menu > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Dashed underline — a sly "I'm interactive" hint without the
   * weight of a button. Small gap between text and underline so
   * the dashes read clearly. */
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

/* Inherit their existing color/size from .path and .count — the
 * path menu's summary IS a .path element (mono, ink-colored) and
 * the sections menu's summary IS a .count (muted, 12px). */

/* Suppress the default ▶/▼ disclosure marker in every browser.
 * Chrome 89+ uses ::marker; older Chrome / Safari use the
 * legacy ::-webkit-details-marker; Firefox respects
 * `list-style: none` on the <summary>. Belt-and-suspenders
 * all three so no dot/triangle slips through. */
.wt-files-menu > summary,
.wt-sections-menu > summary {
  list-style: none;
}

.wt-files-menu > summary::marker,
.wt-sections-menu > summary::marker {
  content: '';
  display: none;
}

.wt-files-menu > summary::-webkit-details-marker,
.wt-sections-menu > summary::-webkit-details-marker {
  display: none;
}

.wt-files-menu[open] > summary,
.wt-sections-menu[open] > summary {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.wt-files-panel,
.wt-sections-panel {
  position: absolute;
  top: calc(100% + 6px);
  /* High z-index so the panel renders above later siblings —
   * especially the per-code-section dropdown, which needs to
   * overlay the NEXT code block below it on a long part page. */
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Deeper shadow so the panel separates cleanly from whatever
   * content sits behind it. --shadow-lg is generic; this one layers
   * a dark ambient plus a sharper contact shadow to read as a
   * lifted surface. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Files panel sits left-aligned under the .path (which is
 * left-aligned in the file-head); the .count's sections panel
 * is right-aligned since .count sits on the right. */
.wt-files-panel {
  left: 0;
  min-width: 220px;
}

.wt-sections-panel {
  right: 0;
  min-width: 140px;
}

.wt-files-panel a,
.wt-sections-panel a {
  display: block;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--body);
  background: transparent;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

/* Zebra stripe — every other row gets a subtle tint so the
 * reader's eye can track rows when the menu is long. Applied
 * before :hover / active so those states still win. Uses
 * `--ink` (theme-inverted text color) at a low tint — darker
 * tint on light bg, lighter tint on dark bg, in both cases
 * visible enough to read as a band without dominating. Light
 * mode gets more tint (10%) because a grey-on-white stripe
 * needs more contrast than a grey-on-dark stripe to read. */
.wt-files-panel a:nth-child(even),
.wt-sections-panel a:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-theme='dark'] .wt-files-panel a:nth-child(even),
html[data-theme='dark'] .wt-sections-panel a:nth-child(even),
html[data-theme='synthwave'] .wt-files-panel a:nth-child(even),
html[data-theme='synthwave'] .wt-sections-panel a:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* Hover = darker than panel bg, ink text. Same "pressed-in"
 * semantic as parts-strip hover. Text stays ink (not accent) so
 * the light-mode menu reads as warm cream, not a purple wall. */
.wt-files-panel a:hover,
.wt-sections-panel a:hover {
  background: var(--nav-hover-bg);
  color: var(--ink);
}

/* Selected (current file / current section) = lighter than panel
 * bg, ink text with a weight bump. Same "lit up" semantic as
 * parts-strip selected — weight + bg carry the signal so we don't
 * need the accent color to do it too. */
.wt-files-panel a.active,
.wt-sections-panel a.active {
  background: var(--nav-selected-bg);
  color: var(--ink);
  font-weight: 600;
}

/* Scrollbar tweak inside the panels — unobtrusive when content
 * overflows, invisible when it doesn't. */
.wt-files-panel::-webkit-scrollbar,
.wt-sections-panel::-webkit-scrollbar {
  width: 8px;
}

.wt-files-panel::-webkit-scrollbar-thumb,
.wt-sections-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--surface);
}

/* Per-code-section chip — a small sections dropdown sitting at
 * the top of each .code-section, so every code chunk has its own
 * jump-to-section affordance. The summary shows the current
 * section label ("Section 5 of 41") with a dashed underline; the
 * panel is the same sections list used by the file-head menu,
 * with THIS chunk's section pre-marked active. */
.code-section {
  position: relative;
  /* Establish a proper stacking context so an open sections
   * dropdown can sit above sibling .code-sections later in the
   * document. Default `position: relative` without a z-index
   * doesn't create a stacking context; `isolation: isolate`
   * does. When a chip opens, its section gets bumped further
   * via the rule below to outrank every other section. */
  isolation: isolate;
}

/* When a per-section chip is open, lift its .code-section above
 * every sibling so the dropdown panel overlays later code blocks
 * cleanly. Closing the chip returns z-index to auto. */
.code-section:has(.wt-section-chip[open]) {
  z-index: 30;
}

/* Column splitter — vertical handle between prose and code columns
 * on every .file-block. drag.js injects .col-splitter as a
 * position:absolute div at the right edge of the prose column;
 * its --col-split CSS var drives the grid template above. The
 * handle is invisible at rest, subtle on hover, and the accent
 * color while being dragged. Cursor becomes col-resize on hover
 * so users know they can pull.
 *
 * The handle is attached to the .pair-grid/.file-grid (which
 * already has position:relative), so the rail only spans the
 * prose+code region — no overshoot into file-head above or the
 * gap below. 6px hit target (wider than visible) with a 1px
 * visible rail centered inside it. */

.col-splitter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(20%, var(--col-split, 42) * 1%, 80%));
  width: 6px;
  margin-left: -3px;
  cursor: col-resize;
  z-index: 5;
  touch-action: none;
  user-select: none;
  /* Clip the hotspot to the grid's bounds. Masking (below) softens
   * the clipped edges so the hard `overflow: hidden` cut doesn't
   * show — the splitter itself fades to transparent at top + bottom,
   * so whatever child (rail or hotspot) reaches the edge fades
   * rather than being chopped flat. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  /* The visible rail — thin pseudo centered in the 6px hit zone.
   * Faint until hover, stronger on active drag. */
}

.col-splitter::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition: background var(--transition-fast);
  /* Fade the top + bottom ends so the rail doesn't look like a
   * hard clipped line where it meets the file-head border or the
   * page gap below. At rest + on hover: solid-middle linear mask.
   * While dragging: a radial mask centered on --drag-origin (a
   * 0-100% y-offset drag.js sets on pointerdown) — the rail glows
   * brightest where the user grabbed it and fades out above +
   * below, so the drag feels anchored to the click. */
  --drag-origin: 50%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 10%,
    #000 90%,
    transparent 100%
  );
}

.col-splitter:hover::before,
.col-splitter:focus-visible::before {
  background: var(--border-strong);
}

.col-splitter.dragging::before {
  /* Hide the rail while dragging — the .col-hotspot sibling is
   * the only visible element, anchored to the click point via
   * inline top. Keeping the rail visible would compete with the
   * hotspot and make the brightness look centered on the rail
   * midpoint instead of the pointer. */
  background: transparent;
}

/* Hotspot: a tall bright pink segment drag.js positions inline
 * on pointerdown (top = click y) and moves on pointermove. It's
 * only rendered while .dragging so the normal rest state isn't
 * affected. A linear-gradient mask fades the top + bottom ends
 * to transparent so the hotspot blends softly into the rail. */
.col-splitter .col-hotspot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 800px;
  margin-top: -400px;
  /* Long, soft vertical glow — single linear-gradient background.
   * Starts at top:0 with a negative margin that centers the bar's
   * midpoint on the splitter's origin (y=0). drag.js then moves
   * the bar with translate3d(0, Ypx, 0) — compositor-accelerated,
   * no layout/paint per frame. */
  transform: translate3d(-50%, 0, 0);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--accent-fg) 55%, transparent) 50%,
    transparent 100%
  );
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* will-change is scoped to the dragging state — promoting every
 * hotspot to its own compositor layer at rest would be wasteful
 * (one layer per splitter on every page). The transform-only
 * animation during drag still gets the GPU path because the
 * promotion happens at the same moment `.dragging` lands. */
.col-splitter.dragging .col-hotspot {
  opacity: 1;
  will-change: transform;
}

.col-splitter:focus-visible {
  outline: none;
}

/* While dragging, override the whole document's cursor + disable
 * text selection so a fast pointer outside the handle still reads
 * as resize. drag.js sets body.col-resizing on pointerdown. */
body.col-resizing,
body.col-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

/* Right-align the chip inside its .code-section. The chip floats
 * at the top-right of the rounded dark code container — a small,
 * consistent "you're here" label that doesn't fight the code
 * content for attention. */
.wt-section-chip {
  display: inline-flex;
  float: right;
  margin: 10px 14px 0;
}

.wt-section-chip > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--code-comment);
  cursor: pointer;
  list-style: none;
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(
    in srgb,
    var(--code-comment) 50%,
    transparent
  );
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast);
}

.wt-section-chip > summary::marker,
.wt-section-chip > summary::-webkit-details-marker {
  content: '';
  display: none;
}

.wt-section-chip[open] > summary {
  color: var(--accent-fg);
  text-decoration-color: var(--accent-fg);
}

/* The chip's panel overlays the code content beneath it — the
 * .code-section already has `position: relative` so the panel's
 * absolute positioning anchors there. Right-aligned because the
 * chip itself is right-aligned; the panel drops from the same
 * edge. Numbers-only rows so the panel stays compact — a column
 * of "1 2 3 …" is fast to scan. */
.wt-section-chip .wt-sections-panel {
  top: calc(100% + 4px);
  right: 14px;
  left: auto;
  min-width: 60px;
  text-align: center;
}

.wt-section-chip .wt-sections-panel a {
  text-align: center;
  padding: 6px 12px;
}

/* Collapse noise annotation-cards — flagged by build-time
 * content sniff in scripts/tour.mts:
 *   `.annotation-card-license` — license preamble text
 *     (Copyright + permission to use / SPDX id / named
 *     license with copyright co-marker).
 *   `.annotation-card-directive` — tool directive-only
 *     comments: v8/c8/istanbul coverage ignores,
 *     eslint/oxlint/tslint/stylelint disables, biome /
 *     prettier / oxfmt / dprint ignores, ts-ignore /
 *     ts-expect-error, vite/webpack chunking magic. Pure
 *     directives are instructions to tooling, not commentary.
 * Both kinds hide while keeping the cell in grid flow so
 * left/right column pairing stays intact for every
 * subsequent section.
 *
 * GOTCHA: `visibility: hidden; height: 0` keeps the grid cell
 * but collapses its height to zero. The paired code-section
 * on the right will render at its natural height only if the
 * pair-grid uses `align-items: start` (or default). If a
 * future change sets `align-items: stretch` or similar on
 * `.pair-grid`, the right-column code panel will collapse to
 * match the hidden left card and disappear. */
.annotation-card.annotation-card-license,
.annotation-card.annotation-card-directive {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Annotation cards — prose that sits alongside code. Title + body. */
.annotation-card {
  padding: 0;
}

/* Every annotation heading (h1-h4) sits at the same 18px / 600
 * scale as doc-page titles + the home TOC. Hierarchy comes from
 * margin alone; size + weight stay flat so the prose rhythm
 * matches what readers see everywhere else on the site. */
.annotation-card h1,
.annotation-card h2,
.annotation-card h3,
.annotation-card h4,
.annotation-md h1,
.annotation-md h2,
.annotation-md h3,
.annotation-md h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}

.annotation-card h1,
.annotation-md h1 {
  margin: 0 0 16px;
}

.annotation-card h2,
.annotation-md h2 {
  margin: 24px 0 12px;
}

.annotation-card h3,
.annotation-md h3 {
  margin: 20px 0 10px;
}

.annotation-card h4,
.annotation-md h4 {
  margin: 16px 0 8px;
}

.annotation-md {
  color: var(--body);
  font-size: 13px;
  /* Generous line-height so wrapped inline code pills (which
   * have margin: 4px) never visually crowd text above/below.
   * 1.8 is airy for body prose but pays off at the pill rows. */
  line-height: 1.8;
  /* Skeleton placeholder while drag.js processes the
   * annotation. Meander's inline script runs `marked.parse()`
   * synchronously on every annotation, inserting raw markdown
   * (including literal `@example`, `@param` text) into the
   * DOM before `cleanupAnnotationProse()` has a chance to
   * rewrite them into pills. Instead of flashing the unstyled
   * state or opacity-0 emptiness, we hide the real content
   * and paint a shimmering React-style skeleton that hints at
   * shape. drag.js adds `.wt-annotation-md-ready` after the
   * pills are built; CSS swaps skeleton → content in the same
   * paint. */
  position: relative;
}
.annotation-md:not(.wt-annotation-md-ready) > * {
  visibility: hidden;
}
.annotation-md:not(.wt-annotation-md-ready)::before {
  /* Three stacked bars (pill + wide body + medium body) built
   * from layered gradients on a single pseudo-element. Each
   * bar is a rounded strip of the shimmer gradient, masked to
   * its own band of the element via background-position. The
   * shimmer sweeps across via background-size + animation. */
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      100deg,
      transparent 0%,
      color-mix(in srgb, var(--code-comment) 6%, transparent) 20%,
      color-mix(in srgb, var(--code-comment) 16%, transparent) 50%,
      color-mix(in srgb, var(--code-comment) 6%, transparent) 80%,
      transparent 100%
    ),
    linear-gradient(
      color-mix(in srgb, var(--code-comment) 10%, transparent),
      color-mix(in srgb, var(--code-comment) 10%, transparent)
    );
  background-size:
    220% 100%,
    100% 100%;
  background-repeat: no-repeat;
  background-position:
    -50% 0,
    0 0;
  border-radius: 6px;
  animation: wt-skeleton-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wt-skeleton-shimmer {
  0% {
    background-position:
      -50% 0,
      0 0;
  }
  100% {
    background-position:
      150% 0,
      0 0;
  }
}
/* Resilience fallback: if drag.js fails to add the ready
 * class (SRI mismatch, network error, thrown exception), show
 * the real content after 600ms so the page isn't stuck on
 * the skeleton forever. The reader sees the one-frame raw
 * markers but gets content instead of infinite shimmer. */
@keyframes wt-annotation-md-fallback {
  to {
    visibility: visible;
  }
}
.annotation-md:not(.wt-annotation-md-ready):not(:empty) > * {
  animation: wt-annotation-md-fallback 0ms linear 600ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .annotation-md:not(.wt-annotation-md-ready)::before {
    animation: none;
  }
}

.annotation-md > *:first-child {
  margin-top: 0;
}

.annotation-md > *:last-child {
  margin-bottom: 0;
}

/* Long URLs inside annotation prose — keep them on a single
 * line and let the card scroll horizontally if they overflow.
 * Breaking at `/` or `-` produces ugly wraps like `purl-\n
 * spec/...` which reads as a broken word. `overflow-wrap:
 * normal` + `word-break: keep-all` disables the aggressive
 * break-everywhere marked applies to long tokens inside <a>. */
.annotation-md a[href^='http'] {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.annotation-md p {
  margin: 0 0 12px;
}

.annotation-md-source {
  display: none;
}

/* JSDoc tag marker (@param, @returns, @throws, @example, …).
 * Set in annotation prose by drag.js's cleanupAnnotationProse
 * after meander hydrates. Monospace + slight weight bump so the
 * tag reads as a code-like token, distinct from surrounding
 * prose even inside the muted-italic first-card treatment —
 * without the pink/accent that would read as a link. Meander
 * collapses the newline after each JSDoc tag into a space, so
 * the tag and its body end up on the same line — and a run of
 * tags (`@param`, `@returns`, …) smushes into a wall of text.
 * display:block puts each tag on its own line; its `{Type}`
 * sibling + following prose flow back to the next line below. */
/* JSDoc tag marker — pill in the shape/size of the homepage
 * topic nav pills, tinted with the faded purple of unhighlighted
 * line numbers (`--code-comment`). Reads as a quiet related
 * label — kin to the code's gutter numerals — rather than a
 * call-to-action. A pseudo line-break after the pill drops the
 * body content to the next line. */
/* JSDoc tag block — a card that groups an `@tag` pill with its
 * body content. Two-tier: an outer frame carries the pill on a
 * lighter top strip; the `.wt-jsdoc-body` child sits beneath
 * the pill on a darker panel so the content reads as the
 * primary surface and the tag reads as a label above it. */
.wt-jsdoc-block {
  display: block;
  /* Tag cards sit flush against each other so they read as
   * one stacked signature block rather than three separate
   * cards. Adjacent-sibling rules below collapse duplicate
   * borders and round only the outer corners. */
  margin: 0;
  /* Tight top strip — pill sits flush with equal 4px inset on
   * top / bottom / left so it reads as a compact label tab.
   * line-height matches pill height so the inline baseline
   * doesn't push the pill up or down. */
  padding: 4px 4px 0;
  line-height: 16px;
  background: color-mix(in srgb, var(--code-comment) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--code-comment) 18%, transparent);
  border-radius: 6px;
  overflow: hidden;
}

/* Stack-collapse adjacent tag cards: the second-and-later
 * cards drop their top border (shared with the previous
 * card's bottom) and their top corner-radius so the outer
 * stack reads as one rounded container with horizontal rules
 * between tags. */
.wt-jsdoc-block + .wt-jsdoc-block {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Cards that have a following tag card lose their bottom
 * corner-radius so the boundary with the next card stays
 * square (the next card's border becomes the shared line). */
.wt-jsdoc-block:has(+ .wt-jsdoc-block) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Hide `@param` and `@returns` cards — TypeScript signatures
 * in the paired code panel already carry parameter names,
 * types, and return types. The JSDoc tags duplicate that
 * contract; keeping them costs vertical space and doubles the
 * signature reader has to scan.
 *
 * GOTCHA: the `:first-child` constraint depends on drag.js
 * appending `tagEl` as the first child of each `.wt-jsdoc-
 * block` before the `.wt-jsdoc-body`. If that construction
 * order is reshuffled (e.g. body first, then tag), every
 * `@param`/`@returns` card silently reappears. Matching keys
 * off `data-tag` (set on the tag span in drag.js) not text
 * content, so rename-the-textContent refactors won't break
 * it — but first-child assumption will. */
.wt-jsdoc-block:has(
  > .wt-jsdoc-tag:first-child:is([data-tag='param'], [data-tag='returns'])
) {
  display: none;
}

/* "Primary" tag blocks — @description (implicit or explicit)
 * and @fileoverview. Both carry the narrative "what is this"
 * prose, so they share the same warmer body fill so readers
 * can spot the primary statement at a glance. The tagged
 * contract cards (@param, @throws, @example, etc.) keep the
 * neutral grey bodies.
 *
 * Cream = surface + a touch of warm yellow; reads as a gentle
 * highlight rather than a flat grey panel. */
/* "Narrative primary" cards — description / fileoverview /
 * example. In light mode the tag strip (outer block) and the
 * body (inner) both take one shade deeper than the neutral-grey
 * tag cards so they read as a warm cream card, not a page-
 * colored blend. Strip is a hair deeper than body so the pill
 * still reads as a label tab above the content.
 *
 * Dark / synthwave themes keep the grey outer and only tint the
 * inner body (rules below) — the light-only scope avoids
 * leaking the cream hex into the dark palettes. */
html[data-theme='light'] .wt-jsdoc-block-desc,
html[data-theme='light']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='fileoverview']),
html[data-theme='light']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='example']),
:root:not([data-theme]) .wt-jsdoc-block-desc,
:root:not([data-theme])
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='fileoverview']),
:root:not([data-theme])
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='example']) {
  background: #f2e7ce;
}
.wt-jsdoc-block-desc .wt-jsdoc-body,
.wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='fileoverview']) .wt-jsdoc-body,
.wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='example']) .wt-jsdoc-body {
  background: #f7eedc;
}

/* Dark / synthwave themes — the cream would be too bright
 * against the dark surface. Keep the "warmer than grey" feel
 * by mixing a muted amber / lavender tint into surface at a
 * lower ratio so the card still lifts off the others without
 * turning into a glowing panel. */
html[data-theme='dark'] .wt-jsdoc-block-desc .wt-jsdoc-body,
html[data-theme='dark']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='fileoverview'])
  .wt-jsdoc-body,
html[data-theme='dark']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='example'])
  .wt-jsdoc-body {
  background: color-mix(in srgb, #8a7a4a 14%, var(--surface));
}
html[data-theme='synthwave'] .wt-jsdoc-block-desc .wt-jsdoc-body,
html[data-theme='synthwave']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='fileoverview'])
  .wt-jsdoc-body,
html[data-theme='synthwave']
  .wt-jsdoc-block:has(> .wt-jsdoc-tag[data-tag='example'])
  .wt-jsdoc-body {
  background: color-mix(in srgb, #c8a8ff 14%, var(--surface));
}

/* Kill default paragraph margins inside the description body
 * so the box hugs the prose. */
.wt-jsdoc-block-desc .wt-jsdoc-body > :first-child {
  margin-top: 0;
}
.wt-jsdoc-block-desc .wt-jsdoc-body > :last-child {
  margin-bottom: 0;
}

.wt-jsdoc-body {
  display: block;
  margin: 4px -4px 0;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--code-comment) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--code-comment) 14%, transparent);
}

.wt-jsdoc-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 6px;
  margin: 0 6px 0 0;
  vertical-align: top;
  /* Geist Mono — the `@tag` identifier is mechanical code-ish
   * label language ("@param", "@throws"); typewriter face fits
   * the shape better than the body face. Same font family as
   * the file-head path. Small + faded so the pill reads as a
   * quiet marker inside its block frame. */
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--code-comment) 80%, transparent);
  background: color-mix(in srgb, var(--code-comment) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--code-comment) 30%, transparent);
  border-radius: 4px;
  font-style: normal;
}

/* Light-mode tag pill — swap grey for a warm sepia brown so
 * the label reads with the cream card instead of fighting it.
 * Color pulled from --body (#5a5248) at full strength; the
 * pill bg stays the neutral grey wash so it still reads as a
 * subdued marker, not a chip. */
html[data-theme='light'] .wt-jsdoc-tag,
:root:not([data-theme]) .wt-jsdoc-tag {
  color: var(--body);
  background: color-mix(in srgb, var(--body) 8%, transparent);
  border-color: color-mix(in srgb, var(--body) 24%, transparent);
}

/* First jsdoc-tag in a paragraph doesn't need the top margin —
 * the paragraph's own margin already provides spacing. */
.wt-jsdoc-tag:first-child {
  margin-top: 0;
}

/* ── 8. Code / diff tables ───────────────────────────────────────── */

/* The code-section wraps a meander code-table. Darkened, rounded
 * container like the diffs.com reference screenshots. */
.code-section {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  /* No overflow:hidden — the per-section dropdown needs to escape
   * the container to render above the next code block below. The
   * inner <pre> has its own overflow-x:auto for horizontal code
   * scrolling, so code content still stays contained; we just let
   * absolute-positioned children (the sections-panel dropdown)
   * bleed out of the rounded corner when open. */
}

.code-section pre {
  margin: 0;
  padding: 16px 0;
  overflow-x: auto;
}

.code-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--code-fg);
  background: transparent;
  margin: 0;
}

.code-table tr {
  border: none;
}

.code-table td {
  border: none;
  padding: 0;
  vertical-align: top;
  color: var(--code-fg);
}

.code-table .line-num {
  width: 1%;
  min-width: 48px;
  padding: 0 14px 0 18px;
  text-align: right;
  /* Dimmer at rest so the numbers recede — they're reference
   * information, not primary content. Brighten when the cursor
   * is anywhere over the code table so users can pick a specific
   * line easily when they want one. */
  color: var(--code-comment);
  opacity: 0.4;
  user-select: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.code-table tr:hover .line-num {
  opacity: 1;
}

.code-table .line-code {
  padding: 0 18px 0 4px;
  white-space: pre;
  color: var(--code-fg);
}

.code-table .line-code code {
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
}

/* Diff rows — add / delete highlight bars on the left edge + tinted
 * row background. Meander can emit `.line-add` / `.line-del` when
 * a range is diffed; style them identically to the reference
 * screenshots. */
.code-table tr.line-add {
  background: var(--diff-add-bg);
  box-shadow: inset 3px 0 0 var(--diff-add-mark);
}

.code-table tr.line-del {
  background: var(--diff-del-bg);
  box-shadow: inset 3px 0 0 var(--diff-del-mark);
}

/* ── 9. Doc body prose ───────────────────────────────────────────── */

.doc-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 0 64px;
}

/* All doc-page headings share the TOC row title size — 18px /
 * 600 — so a page's h1, h2, h3, h4 all read at the same weight
 * as their .wt-contents-title entry on the home TOC. One
 * typographic rhythm across the whole site; no shouty headlines. */
.doc-body h1,
.doc-body h2,
.doc-body h3,
.doc-body h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.doc-body h1 {
  margin: 0 0 24px;
}

.doc-body h2 {
  margin: 40px 0 16px;
}

.doc-body h3 {
  margin: 32px 0 12px;
}

.doc-body h4 {
  margin: 24px 0 10px;
}

/* Body text matches .wt-contents-summary on the home TOC
 * (15px / 1.5 / var(--body)). Same reading rhythm whether
 * you're scanning the index or sitting inside a doc. */
.doc-body p,
.doc-body li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
}

/* GFM task-list checkboxes — marked emits `<input disabled
 * type="checkbox">` for `- [ ]` items, but we render these
 * as plain bullet lists (no interactive state, just text).
 * The disabled checkbox adds visual noise and implies the
 * reader can't tick them (they can't — it's a static doc).
 * Hide the input, keep the list-marker dot. */
.doc-body li > input[type='checkbox'] {
  display: none;
}

/* Code blocks in doc pages share the same dark-panel tone as the
 * part pages' .code-section containers: rounded, bordered, and
 * using the site's --code-bg / --code-fg tokens. Same font and
 * line-height too so a reader switching between a part page and
 * a doc feels like they're reading the same codebase. */
/* Doc-page code blocks: font, size, line-height, and padding
 * identical to the part pages' .code-table rows (see
 * .code-table / .code-table .line-code above) so a reader
 * switching between vers.html and part/1 sees the same text
 * density. */
.doc-body pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow-x: auto;
  margin: 20px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  font-variant-ligatures: none;
  -webkit-font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
  font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
}

.doc-body pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  display: block;
}

/* Tame highlight.js's color shifts for unlanguaged code inside
 * docs — when the block has no `language-*` class, hljs often
 * paints heuristic classes (hljs-string, hljs-number, etc.) that
 * misalign with the prose tone. Keep tokens legible but pull
 * them toward the code-fg baseline so the block reads as one
 * consistent block of text, not a rainbow. */
.doc-body pre code:not([class*='language-']) .hljs-string,
.doc-body pre code:not([class*='language-']) .hljs-number,
.doc-body pre code:not([class*='language-']) .hljs-literal,
.doc-body pre code:not([class*='language-']) .hljs-built_in,
.doc-body pre code:not([class*='language-']) .hljs-variable,
.doc-body pre code:not([class*='language-']) .hljs-name {
  color: inherit;
}

/* Inline code — same shape as the TOC summary inline code + the
 * intro-line `@socketregistry/packageurl-js` chip. Keeps a single
 * visual for "code inside prose" across every surface. */
.doc-body p code,
.doc-body li code,
.doc-body td code,
.doc-body h1 code,
.doc-body h2 code,
.doc-body h3 code,
.doc-body h4 code,
.doc-body blockquote code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  /* Enough min-width that a single-character chip (like `` `.` ``
   * or `` `?` ``) reads as a pill rather than a truncated dot.
   * inline-block so the width actually applies — default <code>
   * is inline. text-align centers short contents inside the chip.
   * white-space: nowrap keeps multi-token commands like
   * `` `pnpm format --check` `` on one line so the pill doesn't
   * break mid-flag. */
  min-width: 1.4em;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  border-radius: 4px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--ink);
  font-variant-ligatures: none;
  -webkit-font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
  font-feature-settings:
    'liga' 0,
    'clig' 0,
    'calt' 0;
}

.doc-body table {
  margin: 24px 0;
  font-size: 14px;
}

/* Heading anchors — invisible at rest, fade in on hover over the
 * heading so readers can copy a permalink without the chrome
 * cluttering the text rhythm. */
.wt-heading-anchor {
  margin-left: 0.4em;
  color: var(--accent-fg);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  /* Inherit the heading's weight so the # sits at the same
   * visual density as its sibling text — only the color (accent)
   * signals "this is a link." */
  font-weight: inherit;
}

.doc-body h1:hover .wt-heading-anchor,
.doc-body h2:hover .wt-heading-anchor,
.doc-body h3:hover .wt-heading-anchor,
.doc-body h4:hover .wt-heading-anchor,
.wt-heading-anchor:focus-visible {
  opacity: 1;
}

.wt-heading-anchor:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mermaid diagrams — rendered to SVG at build time by
 * scripts/render-mermaid.mts (puppeteer + svgo), embedded inline.
 * Center the figure in the doc column with comfortable whitespace
 * above/below, and let the SVG size fluidly inside the column. */
.wt-mermaid {
  margin: 28px auto;
  padding: 20px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  text-align: center;
}

.wt-mermaid svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Mermaid ships an inline <style> block inside the SVG that
 * fully specifies text styling with #diagram-scoped rules. Don't
 * override from outside — any font-family / font-size / line-
 * height leak from .doc-body into the SVG shifts text away from
 * where mermaid measured it and causes clipping inside nodes. */

/* Repo tree — code blocks that draw a directory hierarchy with
 * box-drawing characters. Tightened line-height for a more
 * tree-like density, no hljs coloring (the nohighlight class
 * tells hljs to skip). The block stays copy-paste friendly as
 * plain ASCII text. */
.doc-body pre.wt-repo-tree {
  line-height: 1.5;
  padding: 18px 22px;
}

.doc-body pre.wt-repo-tree code {
  color: var(--code-fg);
}

.doc-body img {
  max-width: 100%;
  border-radius: var(--radius-md);
  margin: 24px 0;
}

/* ── 10. Theme toggle UI ─────────────────────────────────────────── */

/* Action buttons — export (download), comments, and the theme
 * toggle. Live on the right side of the part-nav strip now, so
 * sized to match that thin-strip language. One rule keeps them
 * aligned so the cluster reads as one control group. Injected at
 * runtime by comments.js + drag.js after first paint. */
.topbar-actions .wt-export-btn,
.topbar-actions .wt-unresolved-btn,
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.topbar-actions .wt-export-btn:hover,
.topbar-actions .wt-unresolved-btn:hover,
.theme-toggle:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.topbar-actions .wt-export-btn svg,
.topbar-actions .wt-unresolved-btn svg {
  display: block;
}

/* Unresolved-count badge — small dot + number overlay on the
 * comments button when there are threads to resolve. comments.js
 * sets data-count on the button; CSS surfaces the badge only when
 * count > 0. */
.wt-unresolved-btn[data-count]:not([data-count='0'])::after {
  content: attr(data-count);
  position: absolute;
  transform: translate(10px, -10px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--bg);
  background: var(--accent);
  border-radius: 999px;
}

.wt-unresolved-btn {
  position: relative;
}

.theme-toggle-wrapper {
  position: relative;
}

/* Expanded state — same tint as hover, plus a ring to show the
 * menu is open. Specific to the theme-toggle (export/comments
 * buttons don't have a menu). */
.theme-toggle[aria-expanded='true'] {
  background: var(--bg-tint);
  border-color: var(--border-strong);
  color: var(--ink);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.topbar-actions .wt-export-btn svg,
.topbar-actions .wt-unresolved-btn svg {
  width: 16px;
  height: 16px;
}

/* Stacked icons — all four are rendered on top of each other in the
 * same button; only the one matching the current pref is visible.
 * Uses opacity (not display:none) for the hide/show so the inactive
 * icons stay in the layout tree — that's the pre-condition for CSS
 * transitions to fire when the user switches preference (display
 * transitions silently drop on newly-rendered elements). Each icon
 * is absolutely positioned on top of its siblings; pointer-events
 * none on the hidden ones so clicks always hit the button. */
.theme-toggle {
  position: relative;
}

/* Stacked theme icons — only the one matching the current pref is
 * visible (opacity-based), but all four share the same centered
 * position inside the .theme-toggle button so switching themes
 * doesn't jump the icon. Absolutely positioned so they overlay
 * each other; inset:0 + margin:auto centers each one exactly
 * like a flex item would. */
.theme-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Lightning bolt is rendered the same 16×16 as the sun/moon/system
 * icons so every theme option has the same optical weight in the
 * button — no one-off "bigger" icon pulling rank. Center-aligned
 * via inset:0 + margin:auto inherited from .theme-icon above. */
.theme-icon-synthwave {
  width: 16px;
  height: 16px;
}

.theme-toggle-wrapper[data-pref='system'] .theme-icon-system,
.theme-toggle-wrapper[data-pref='light'] .theme-icon-light,
.theme-toggle-wrapper[data-pref='dark'] .theme-icon-dark,
.theme-toggle-wrapper[data-pref='synthwave'] .theme-icon-synthwave {
  opacity: 1;
}

.theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Two-layer shadow for a clearly-lifted feel — matches the
   * files/sections dropdown panels so every floating surface on
   * the site reads the same way. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.16);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-menu[hidden] {
  display: none;
}

.theme-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--body);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.theme-menu-item:hover {
  background: var(--nav-hover-bg);
  color: var(--ink);
}

.theme-menu-item[aria-checked='true'] {
  background: var(--nav-selected-bg);
  color: var(--ink);
}

.theme-menu-item[aria-checked='true'] .theme-menu-check {
  opacity: 1;
}

.theme-menu-check {
  opacity: 0;
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
  transition: opacity var(--transition-fast);
}

.theme-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.theme-menu-icon svg {
  width: 100%;
  height: 100%;
}

.theme-menu-item[aria-checked='true'] .theme-menu-icon,
.theme-menu-item:hover .theme-menu-icon {
  color: var(--ink);
}

/* Sun/moon/star ray animation — the rays + star on the theme icon
 * are hidden by default and fade + scale in after the core shape
 * lands. Triggered by the wrapper's data-pref attribute: when the
 * user picks Light, the light icon's rays animate in; picking Dark
 * animates the crescent's star. This only applies inside the
 * toggle button itself — menu icons always show everything so the
 * user can see each option's final visual at rest. */
/* Rays / star start hidden; shown when its icon is the
 * selected pref. Transition runs ONLY when <html> carries
 * `.wt-theme-toggle-fired` — the class drag.js adds for the
 * ~2.5s after a user-initiated switch. On initial page paint
 * (theme restored from localStorage) the rays just appear at
 * their final state without animating — the user didn't pick
 * this theme now, they picked it on a previous visit. */
.theme-toggle .theme-ray,
.theme-toggle .theme-star {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: 50% 50%;
}

.theme-toggle-wrapper[data-pref='light'] .theme-icon-light .theme-ray,
.theme-toggle-wrapper[data-pref='system'] .theme-icon-system .theme-ray,
.theme-toggle-wrapper[data-pref='dark'] .theme-icon-dark .theme-star {
  opacity: 1;
  transform: scale(1);
}

html.wt-theme-toggle-fired .theme-toggle .theme-ray,
html.wt-theme-toggle-fired .theme-toggle .theme-star {
  transition:
    opacity 280ms ease 60ms,
    transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1) 60ms;
}

/* Synthwave lightning — strike animation. When synthwave is the
 * active theme, the bolt plays a one-shot "strike": scales up and
 * brightens briefly, then settles back to its resting size. Runs
 * exactly once on page load / theme selection — not infinite —
 * so the motion signals "energized" without distracting for the
 * rest of the session. */
@keyframes wt-bolt-strike {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  40% {
    transform: scale(1.25);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bolt strike + sparkle sequence fire ONLY on a live theme
 * switch — gated by `.wt-theme-toggle-fired` on <html> which
 * drag.js sets for ~2.5s after a user-initiated change. On
 * initial page paint (synthwave loaded from localStorage) the
 * icon just renders at rest — no entrance animation on a state
 * the user didn't actively select. */
html[data-theme='synthwave'].wt-theme-toggle-fired .theme-icon-synthwave {
  transform-origin: center;
  animation: wt-bolt-strike 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
}

/* Sparkles are always hidden by default — shown only on the
 * toggle button when synthwave is the active theme, and only for
 * a few flickers after it settles. Menu icons never show sparks
 * (all four preview icons render at rest so the menu is calm). */
.wt-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Choreographed 3-beat sequence — middle, top, bottom. Each
 * spark flashes once, in its own 33% of the cycle:
 *   beat 1 (0-33%):  spark-2 (middle)
 *   beat 2 (33-67%): spark-1 (top)
 *   beat 3 (67-100%): spark-3 (bottom)
 * Total cycle 1.5s = 3 beats × 500ms. scale(1.2) at peak makes
 * each twinkle read as visibly larger than its rest size. Runs
 * once after the bolt's strike (520ms delay) then stays hidden
 * via fill-mode:forwards.
 *
 * Each spark has its own keyframes rather than sharing one — that
 * way the timing per beat is explicit and the sequence reads
 * correctly even with scaled time. Beats fall at:
 *   beat 1:  0%   — 17% of cycle
 *   beat 2: 17%   — 33%
 *   beat 3: 33%   — 50%
 *   beat 4: 50%   — 67%
 *   beat 5: 67%   — 83%
 *   beat 6: 83%   — 100%
 * Each spark is visible for ~8% of the cycle at each of its
 * assigned beats. */

/* Single-flash twinkle keyframes — each spark visible only during
 * its own beat (a third of the cycle), rest of the cycle hidden.
 * scale(1.2) at peak punches the sparkle; brief hold at peak for
 * the "shining" beat. */

/* Middle spark — beat 1 (0-33%). */
@keyframes wt-spark-middle {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  10% {
    opacity: 1;
    transform: scale(1.2);
  }
  22% {
    opacity: 1;
    transform: scale(1.2);
  }
  33%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Top spark — beat 2 (33-67%). */
@keyframes wt-spark-top {
  0%,
  33% {
    opacity: 0;
    transform: scale(0.3);
  }
  43% {
    opacity: 1;
    transform: scale(1.2);
  }
  56% {
    opacity: 1;
    transform: scale(1.2);
  }
  67%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Bottom spark — beat 3 (67-100%). */
@keyframes wt-spark-bottom {
  0%,
  67% {
    opacity: 0;
    transform: scale(0.3);
  }
  77% {
    opacity: 1;
    transform: scale(1.2);
  }
  90% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* Sparks fire only on a live user-triggered theme toggle (drag.js
 * adds .wt-theme-toggle-fired to <html> for a 2.5s window after
 * the click, then strips it). A fresh page load that just restores
 * synthwave from localStorage never has this class, so the bolt
 * stays static — no unprompted animation on navigation. */
html[data-theme='synthwave'].wt-theme-toggle-fired
  .theme-toggle
  .theme-icon-synthwave
  .wt-spark-1 {
  animation: wt-spark-top 1.5s ease 0.55s 1 forwards;
}

html[data-theme='synthwave'].wt-theme-toggle-fired
  .theme-toggle
  .theme-icon-synthwave
  .wt-spark-2 {
  animation: wt-spark-middle 1.5s ease 0.55s 1 forwards;
}

html[data-theme='synthwave'].wt-theme-toggle-fired
  .theme-toggle
  .theme-icon-synthwave
  .wt-spark-3 {
  animation: wt-spark-bottom 1.5s ease 0.55s 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='synthwave'] .theme-icon-synthwave {
    animation: none;
  }
  html[data-theme='synthwave'] .theme-toggle .theme-icon-synthwave .wt-spark {
    animation: none;
  }
}

/* Synthwave — pink-tinted glow on every floating panel (files menu,
 * sections menu, theme menu, modal). Overrides the neutral shadows
 * set earlier with a magenta ambient that matches the --accent
 * color, so menus feel lit from below by neon. Two layers: a close
 * contact shadow for depth + a wider colored bloom for the glow. */
html[data-theme='synthwave'] .wt-files-panel,
html[data-theme='synthwave'] .wt-sections-panel,
html[data-theme='synthwave'] .theme-menu {
  box-shadow:
    0 1px 2px rgba(10, 5, 20, 0.4),
    0 12px 32px rgba(255, 126, 219, 0.18),
    0 0 24px rgba(255, 126, 219, 0.12);
}

html[data-theme='synthwave'] .wt-modal {
  box-shadow:
    0 8px 24px rgba(10, 5, 20, 0.6),
    0 0 48px rgba(255, 126, 219, 0.2);
}

/* Comments-button bubble. Empty outline when signed out (invitation
 * to engage); three dots drop in one-by-one when the user signs in.
 * comments.js toggles data-signed-in="true" on the button when auth
 * succeeds, and adds the .wt-dots-drop class for a single reflow
 * so the keyframes play fresh each sign-in. */
.wt-unresolved-btn .wt-bubble-dots {
  display: none;
}

.wt-unresolved-btn[data-signed-in='true'] .wt-bubble-dots {
  display: inline;
}

@keyframes wt-dot-drop {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.5);
  }
  60% {
    opacity: 1;
    transform: translateY(1px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wt-unresolved-btn.wt-dots-drop .wt-dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: wt-dot-drop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.wt-unresolved-btn.wt-dots-drop .wt-dot-1 {
  animation-delay: 0ms;
}

.wt-unresolved-btn.wt-dots-drop .wt-dot-2 {
  animation-delay: 140ms;
}

.wt-unresolved-btn.wt-dots-drop .wt-dot-3 {
  animation-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .wt-unresolved-btn.wt-dots-drop .wt-dot {
    animation: none;
    opacity: 1;
  }
}

/* ── 11. Comment shim UI ─────────────────────────────────────────── */

/* Auth / comment-compose modal — <dialog> element injected by
 * comments.js. Native `::backdrop` pseudo styles the scrim; the
 * dialog itself is a card with editorial padding + radius. All
 * form controls inside the modal share one visual language so the
 * sign-in flow feels of-a-piece with the rest of the site.
 *
 * Anchored near the top of the viewport rather than centered so
 * the dialog can grow downward (e.g. when an error message
 * appears) without the top edge jumping up. The user's focus
 * stays where it was — fields don't reflow underneath their
 * cursor. */
.wt-modal {
  /* Pin to the current viewport, not the document. Native
   * <dialog>.showModal() places the dialog in the top layer,
   * but the browser's default block-level positioning still
   * uses margin: auto, which varies by engine and can leave
   * the dialog off-screen on a scrolled page. Explicit
   * position:fixed + top offset keeps it anchored to the
   * user's current viewport every time. */
  position: fixed;
  top: 18vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 28px 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--body);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.wt-modal::backdrop {
  background: rgba(10, 10, 10, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Comment compose dialog — a native <dialog> injected by
 * comments.js when a reader selects lines and clicks "Add
 * comment". Uses the same card language as .wt-modal so the
 * two dialogs read as one family. Anchored at viewport top-
 * center so the user can still see the code they're
 * commenting on. Transparent backdrop (no blur) so context
 * stays visible while writing. */
.wt-comment-form {
  /* Same viewport-pin treatment as .wt-modal — default
   * margin:auto placement on a scrolled document lands the
   * dialog off-screen. */
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 20px 24px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--body);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.wt-comment-form::backdrop {
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Gmail-style "fill the area" variant — opt-in via the
 * `.wt-comment-form-fill` class. Expands the dialog to cover
 * most of the viewport (the writer gets room to draft a long
 * comment without the tiny textarea feeling cramped). Header
 * pins to top; textarea grows to fill; action row pins to
 * bottom. Toggle from comments.js: `dialog.classList.add(
 * 'wt-comment-form-fill')` on a "compose large" affordance. */
.wt-comment-form.wt-comment-form-fill {
  top: 4vh;
  max-width: min(880px, calc(100% - 48px));
  height: min(88vh, 720px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
}

.wt-comment-form.wt-comment-form-fill > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 14px;
}

.wt-comment-form.wt-comment-form-fill .wt-textarea {
  flex: 1;
  min-height: 0;
  resize: none;
}

.wt-comment-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}

.wt-comment-header strong {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

/* Size-toggle — flips composer between compact + fill modes.
 * Lives in the header row, pushed to the right. Accent-
 * colored (reads like a link) and a comfortable click target
 * (34px) so the affordance is discoverable without dominating
 * the header. Unicode expand/shrink arrows (⤢ / ⤡) carry the
 * intent without needing SVG icons. */
.wt-comment-size-toggle {
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.wt-comment-size-toggle:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: var(--accent);
}

.wt-comment-size-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wt-comment-form .wt-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.wt-comment-form .wt-error {
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 13px;
  min-height: 0;
}
.wt-comment-form .wt-error:empty {
  display: none;
}

.wt-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.wt-modal-close:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.wt-modal-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
}

.wt-modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}

.wt-modal-sub strong {
  color: var(--ink);
  font-weight: 600;
}

/* Form inside the modal — labels stack with their inputs, buttons
 * land on their own row at the bottom. Gap is the vertical rhythm
 * between every field + button cluster. */
.wt-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wt-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--body);
}

.wt-input,
.wt-textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.wt-input:focus,
.wt-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.wt-textarea {
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

/* Primary and secondary buttons inside the modal. Primary is the
 * black pill — solid commitment (send code, post comment). Secondary
 * is the neutral tint (cancel, dismiss). Side-by-side with a small
 * gap, same height, aligned on text baseline. */
.wt-primary,
.wt-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

/* Primary button is the pass/fail signal itself — enabled means
 * the form is valid, disabled means it isn't. No red/green state
 * markers elsewhere; the button does the talking.
 *
 * Enabled: solid accent-colored background with the theme's bg
 * color as text (readable contrast on all themes). In synthwave
 * this lights up pink; in light/dark it's the blue accent.
 *
 * Disabled: flat muted surface with muted text — visibly inert
 * so the state difference reads at a glance. No hover lift, no
 * shadow, not-allowed cursor. */
/* Enabled: tinted fill matching the nav-selected state, with
 * accent-color text and border. Same visual language as the
 * active part-nav pill — consistent "this is the go option"
 * across every surface. Less assaulting than a solid neon fill,
 * still unmistakably active.
 *
 * Disabled: muted surface, muted text, no hover. Visually inert
 * so the state difference reads clearly. */
.wt-primary {
  color: var(--accent-fg);
  background: var(--nav-selected-bg);
  border: 1px solid var(--accent-fg);
  font-weight: 600;
}

.wt-primary:hover {
  background: var(--accent-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Disabled — muted tint, dashed outline so the button still
 * reads as a control (just not one that's currently actionable).
 * The earlier "no border" version blended into the cream dialog
 * bg; a subtle dashed border gives the shape back without
 * implying "click me". */
.wt-primary:disabled,
.wt-primary[aria-disabled='true'] {
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, var(--bg-tint));
  border: 1px dashed var(--border-strong);
  font-weight: 500;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.wt-primary:disabled:hover,
.wt-primary[aria-disabled='true']:hover {
  background: var(--bg-tint);
}

/* Secondary (cancel) — thin outline button, transparent-ish fill.
 * Outline is the signal: it's interactive even though it's not
 * the primary action. Same visual weight of outline as the email
 * input above, so the dialog has one consistent "interactive
 * surfaces carry a border" rule. */
.wt-secondary {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-strong);
}

.wt-secondary:hover {
  background: var(--bg-tint);
  border-color: var(--accent-fg);
  color: var(--accent-fg);
}

/* Button rows inside the form — by default form children stack
 * vertically; a pair of buttons should sit side-by-side. comments.js
 * emits them as consecutive <button> siblings, so target adjacent
 * buttons directly. */
.wt-form button + button {
  margin-top: -8px; /* close the gap inherited from .wt-form */
}

.wt-form .wt-primary + .wt-secondary,
.wt-form .wt-secondary + .wt-primary {
  margin-top: 0;
}

/* Resend-code row — a small "Resend code" link-button + a
 * live timer showing the remaining cooldown. Sits directly
 * under the primary/cancel buttons in step 2. The link is
 * accent-colored when active (reads as a link); when the
 * cooldown is armed it's muted + disabled so users don't
 * repeatedly request fresh codes and get rate-limited. */
.wt-resend {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.wt-resend-link {
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 0;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.wt-resend-link:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.wt-resend-link:disabled {
  color: var(--muted);
  border-color: transparent;
  cursor: default;
}

.wt-resend-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wt-resend-timer {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* Inline error text below the form — live region announces to AT
 * when the message changes. Uses the muted tone (not alarm red)
 * so the message feels like a helpful note rather than a
 * shout. The element always occupies layout space (no display:
 * none) so the dialog doesn't jump upward when a message
 * appears/clears — error text grows into pre-allocated height. */
.wt-error {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.wt-error:not(:empty) {
  opacity: 1;
}

/* Selection popover — the inline "Add comment" toolbar comments.js
 * injects when the user highlights one or more code lines. Floats
 * directly above the selection with a Lines label, a primary
 * action (open composer), and a secondary dismiss. Card styling
 * matches the modal + menu surfaces so every injected UI on the
 * site reads with the same language. */
.wt-selection-popover {
  position: absolute;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.16);
  font-size: 13px;
}

html[data-theme='synthwave'] .wt-selection-popover {
  box-shadow:
    0 1px 2px rgba(10, 5, 20, 0.4),
    0 12px 32px rgba(255, 126, 219, 0.18),
    0 0 24px rgba(255, 126, 219, 0.12);
}

.wt-selection-popover .wt-sel-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  padding-right: 4px;
  border-right: 1px solid var(--border);
  margin-right: 2px;
}

/* Smaller-than-modal variant of the primary/secondary buttons for
 * this compact inline toolbar. Inherits the enabled/disabled
 * pass/fail semantics from the base .wt-primary rules. */
.wt-selection-popover .wt-primary,
.wt-selection-popover .wt-secondary {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* Comment row — comments.js injects these into the thread
 * dialog. Only the classes the shim actually emits are styled:
 * .wt-comment-body (the row content), .wt-comment-meta (author +
 * time row above it), .wt-comment-form / .wt-comment-header (the
 * new-comment dialog wrapper). */
/* Inside a .wt-comment card: meta (author + time + badge)
 * sits on one tight line above the body. Body is plain prose,
 * 13px to match the card's reading size. No extra margin
 * between meta and body — the meta's `line-height` is the
 * gap. */
.wt-comment-body {
  flex: 1;
  min-width: 0;
  color: var(--body);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.wt-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
}

.wt-comment-meta strong {
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
}

/* Inline confirm — swaps in where the Delete/Resolve buttons
 * sat. Uses the same opacity-on-hover rule as .wt-actions so
 * the confirm panel also stays hidden when the card isn't
 * hovered. Accent + danger colors match the two choices. */
.wt-comment .wt-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--body);
}

.wt-comment .wt-confirm-msg {
  color: var(--danger);
  font-weight: 500;
}

.wt-comment .wt-confirm > button {
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.wt-comment .wt-confirm .wt-confirm-yes {
  color: var(--danger);
  border: 1px solid var(--danger);
}
.wt-comment .wt-confirm .wt-confirm-yes:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}

.wt-comment .wt-confirm .wt-confirm-no {
  color: var(--muted);
  border: 1px solid var(--border);
}
.wt-comment .wt-confirm .wt-confirm-no:hover {
  background: var(--nav-hover-bg);
  color: var(--ink);
}

/* Comment card — the container a single comment lives in
 * (and replies are nested cards with .wt-reply). Translucent
 * surface so the code behind stays partly visible; the card
 * reads as an overlay, not a page-sized interruption.
 * Backdrop-filter adds a subtle blur so text inside stays
 * legible even over tokenized code. Tight padding keeps the
 * inline thread compact — most comments are one line. */
.wt-comment {
  display: block;
  margin: 4px 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  line-height: 1.45;
}

/* Replies — indented, a shade more transparent than top-level
 * so the nesting reads without a left-rail line. */
.wt-comment.wt-reply {
  margin-left: 16px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* Resolved comments — dim the fill so the active thread
 * stays visually dominant. */
.wt-comment.wt-resolved {
  opacity: 0.55;
}
.wt-comment.wt-resolved:hover {
  opacity: 0.88;
}

/* Action row — hidden until the card is hovered / focused.
 * The idle state is just author + body + time (compact
 * reading surface); action buttons only appear when the
 * reader is engaging with this specific comment. `focus-
 * within` keeps buttons visible when a user is keyboard-
 * navigating through them. Opacity transition (not display)
 * so the row reserves space on first hover and the card
 * doesn't jump. */
.wt-comment .wt-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}
.wt-comment:hover .wt-actions,
.wt-comment:focus-within .wt-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Compact action buttons — smaller than the primary row in
 * the composer. Accent tint on Resolve, danger tint on
 * Delete. Font-mono (12px) matches the rest of the thread
 * chrome. */
.wt-comment .wt-actions > button {
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.wt-comment .wt-actions .wt-secondary {
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.wt-comment .wt-actions .wt-secondary:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
}

.wt-comment .wt-actions .wt-danger {
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.wt-comment .wt-actions .wt-danger:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: var(--danger);
}

.wt-comment .wt-actions button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Resolved badge — a tiny pill sitting on the meta row. */
.wt-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  border-radius: 3px;
}

/* ── 12. Footer ──────────────────────────────────────────────────── */

.wt-socket-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 80px;
}

html[data-theme='synthwave'] .wt-socket-footer {
  background: color-mix(in srgb, #1a0f2e 88%, transparent);
}

/* Footer bolt — a two-element bundle: an SVG (visible) next to
 * a "⚡" emoji span (invisible but selectable). When the user
 * selects + copies the tagline, the clipboard picks up the emoji
 * character; visually they still see the SVG.
 *
 * The wrapper is inline-block so it reads as one "word" to text
 * selection. Width = SVG width so the hidden emoji can't push
 * the layout wider. */
/* Two-element bundle: a visible SVG + an invisible, selectable
 * "⚡" emoji. Both are in the wrapper so the emoji lands inside
 * any text selection that crosses the wrapper — clipboard picks
 * up "Made with ⚡ by Socket Inc" even though the user sees the
 * SVG, not the emoji.
 *
 * The wrapper is a 14×14 inline-block with overflow:hidden. The
 * SVG fills it. The emoji is absolutely positioned OUTSIDE the
 * visible area (negative left) so overflow:hidden clips it, but
 * it's still a real inline character inside the DOM so the
 * selection range spans it. */
.wt-footer-bolt-wrap {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: 2px;
  margin: 0 2px;
  overflow: hidden;
  white-space: nowrap;
}

.wt-footer-bolt-text {
  position: absolute;
  top: 0;
  left: -100px;
  font-size: 14px;
  line-height: 1;
  color: transparent;
  pointer-events: none;
}

/* Hide the selection highlight over the bolt region. The emoji
 * is still in the selection range (and clipboard), but the
 * colored rectangle doesn't extend over it — reads as a clean
 * gap between "Made with " and " by Socket Inc" with the SVG
 * untouched. */
.wt-footer-bolt-wrap ::selection,
.wt-footer-bolt-wrap::selection {
  background: transparent;
  color: inherit;
}

/* SVG — same lightning bolt shape as the synthwave theme toggle.
 * Fills the wrapper. Color follows the current theme's accent
 * (pink in synthwave, muted on light/dark). Animates once on
 * page load with a subtle strike settling to rest. */
.wt-footer-bolt {
  display: block;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transform-origin: 50% 50%;
  animation: wt-footer-bolt-strike 900ms ease 250ms 1 both;
}

html[data-theme='synthwave'] .wt-footer-bolt {
  color: var(--accent-fg);
}

/* Footer sparks — three twinkles choreographed across the same
 * 1.5s window the strike uses, firing after the bolt lands.
 * Share the same keyframes the theme-toggle sparkles use. Rest
 * state is invisible (opacity 0); each spark flashes once in its
 * assigned third of the cycle then stays hidden via forwards. */
.wt-footer-spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.wt-footer-bolt .wt-footer-spark-1 {
  animation: wt-spark-top 1.5s ease 1s 1 forwards;
}

.wt-footer-bolt .wt-footer-spark-2 {
  animation: wt-spark-middle 1.5s ease 1s 1 forwards;
}

.wt-footer-bolt .wt-footer-spark-3 {
  animation: wt-spark-bottom 1.5s ease 1s 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .wt-footer-bolt .wt-footer-spark {
    animation: none;
  }
}

@keyframes wt-footer-bolt-strike {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-14deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.35) rotate(6deg);
  }
  65% {
    transform: scale(0.92) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wt-footer-bolt {
    animation: none;
  }
}

/* ── 12b. Cmd/Ctrl-click source-code links ──────────────────────── */

/* Links wrapping URLs or cross-file import paths inside .line-code.
 * By default they're invisible: inherit color, no underline, normal
 * cursor. Clicking them without a modifier does nothing (drag.js
 * preventDefault) — so code selection stays uninterrupted. While
 * the user is holding Cmd (macOS) or Ctrl (every other OS),
 * body.wt-mod-pressed flips on and hovering a link reveals a
 * dotted underline + pointer cursor. Matches how the DevTools
 * console and VS Code handle source links: invisible until you
 * signal intent, then obvious. */
.wt-src-link {
  color: inherit;
  text-decoration: none;
  cursor: text;
}

body.wt-mod-pressed .wt-src-link {
  cursor: pointer;
}

body.wt-mod-pressed .wt-src-link:hover {
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-fg);
  color: var(--accent-fg);
}

/* ── 13. Utilities ───────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selection color picks up the accent on every theme. */
::selection {
  background: var(--accent-bg);
  color: var(--accent-fg);
}

/* Scrollbar chrome — subtle on all themes. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}