/*
 * Body Muscles documentation — an anatomical-atlas plate rendered for the screen.
 *
 * Layers, lowest precedence first:
 *   reset → tokens → base → layout → components → sections → utilities
 * Colours are defined once per theme in `tokens`; nothing below hard-codes a
 * colour. The chart itself is themed only through its public `--bm-*` properties.
 */
@layer reset, tokens, base, layout, components, sections, utilities;

/* ── Fonts (self-hosted; copied into docs/lib by `npm run docs:build`) ── */
@font-face {
  font-family: "Newsreader";
  src: url("lib/fonts/newsreader.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("lib/fonts/newsreader-italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("lib/fonts/ibm-plex-sans.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("lib/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("lib/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  img,
  svg {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }
  table {
    border-collapse: collapse;
  }
}

/* ── Tokens ────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    color-scheme: light;

    /* Surfaces: warm plate paper and printing ink. */
    --paper: #f5f1ea;
    --surface: #fbf9f5;
    --sunken: #efe9df;
    --ink: #1c1915;
    --ink-muted: #5c554b;
    --line: #dcd3c5;
    --line-strong: #b5a996;
    --accent: #b4301c;
    --accent-ink: #ffffff;
    --accent-wash: #f3ddd5;
    --focus: #1d56c9;
    --grid: rgb(28 25 21 / 0.05);
    --grid-major: rgb(28 25 21 / 0.08);

    /* Syntax tokens, each ≥ 4.5:1 on --sunken. */
    --code-keyword: #a3271a;
    --code-string: #2f6b3a;
    --code-number: #8a4b00;
    --code-comment: #6a6257;
    --code-function: #1f4fa8;
    --code-type: #7a3e9d;

    /* Chart: warm resting regions on paper, ink outline for selection. */
    --region-rest: #b9ae9e;
    --bm-region-stroke: #4a4238;
    --bm-region-stroke-selected: var(--ink);
    --bm-region-stroke-width-selected: 0.35;
    --bm-region-stroke-focus: var(--focus);
    --bm-background-fill: var(--ink);
    --bm-background-opacity: 0.05;
    --bm-svg-shadow: none;
    --bm-padding: 0;
    --bm-max-height: 100%;
    --bm-tooltip-bg: var(--ink);
    --bm-tooltip-color: var(--paper);
    --bm-tooltip-radius: 3px;
    --bm-tooltip-border: none;
    --bm-tooltip-shadow: 0 6px 18px rgb(28 25 21 / 0.25);
    --bm-tooltip-backdrop-filter: none;

    /* Type. */
    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.5rem;
    --text-2xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
    --text-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

    /* Space, on a 4px rhythm. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    --radius-sm: 3px;
    --radius: 6px;
    --shell: 78rem;
    --prose: 46rem;
    --header-height: 3.5rem;
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --duration: 160ms;
  }

  [data-theme="dark"] {
    color-scheme: dark;

    --paper: #13110f;
    --surface: #1b1916;
    --sunken: #0f0e0c;
    --ink: #eee8dd;
    --ink-muted: #a89f92;
    --line: #2f2b26;
    --line-strong: #4f483f;
    --accent: #f2785a;
    --accent-ink: #1a0b07;
    --accent-wash: #3a1d15;
    --focus: #8ab4ff;
    --grid: rgb(238 232 221 / 0.035);
    --grid-major: rgb(238 232 221 / 0.06);

    --code-keyword: #ff8a70;
    --code-string: #9fd49a;
    --code-number: #f0b46a;
    --code-comment: #8f877b;
    --code-function: #8ab4ff;
    --code-type: #d2a8ff;

    --region-rest: #6b645a;
    --bm-region-stroke: #cfc6b8;
    --bm-region-stroke-selected: #ffffff;
    --bm-background-fill: var(--ink);
    --bm-background-opacity: 0.06;
    --bm-tooltip-shadow: 0 6px 18px rgb(0 0 0 / 0.5);
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }
  h2 {
    font-size: var(--text-2xl);
  }
  h3 {
    font-size: var(--text-xl);
  }
  h4 {
    font-size: var(--text-base);
    font-weight: 600;
  }
  p,
  li {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--duration) var(--ease);
  }
  a:hover {
    text-decoration-color: currentColor;
  }

  code,
  kbd,
  pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
  }
  :not(pre) > code {
    padding: 0.05em 0.3em;
    border-radius: var(--radius-sm);
    background: var(--sunken);
    overflow-wrap: anywhere;
  }
  kbd {
    display: inline-block;
    padding: 0 0.35em;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.8em;
    line-height: 1.5;
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  ::selection {
    background: var(--accent-wash);
  }
}

/* ── Layout ────────────────────────────────────────────────────────────── */
@layer layout {
  .shell {
    width: min(100% - 2 * clamp(1rem, 4vw, 2.5rem), var(--shell));
    margin-inline: auto;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .site-header .shell {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    height: var(--header-height);
  }

  /* Documentation body: contents rail + prose column. */
  .docs {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
    padding-block: var(--space-8);
  }
  .docs-content {
    min-width: 0;
    max-width: 52rem;
  }
  @media (max-width: 60rem) {
    .docs {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
      padding-block: var(--space-7);
    }
  }

  .site-footer {
    border-top: 1px solid var(--line);
    padding-block: var(--space-6);
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }
  .site-footer .shell {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
  }
}

/* ── Components ────────────────────────────────────────────────────────── */
@layer components {
  /* Brand */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .brand em {
    font-weight: 400;
  }
  .brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
  }
  .version {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0 0.4em;
  }

  /* Primary navigation */
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
  }
  .site-nav a {
    padding: var(--space-1) var(--space-3);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .site-nav a:hover {
    color: var(--ink);
    background: var(--sunken);
  }
  @media (max-width: 44rem) {
    .site-nav .nav-section {
      display: none;
    }
  }

  /* Buttons */
  .button,
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.25rem;
    padding: 0 var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--duration) var(--ease),
      border-color var(--duration) var(--ease);
  }
  .button:hover,
  .icon-button:hover {
    border-color: var(--ink-muted);
    background: var(--sunken);
  }
  .button[data-variant="primary"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  .button[data-variant="primary"]:hover {
    background: color-mix(in srgb, var(--ink) 86%, var(--paper));
  }
  .button[data-variant="quiet"] {
    border-color: transparent;
    background: transparent;
    color: var(--ink-muted);
  }
  .button[data-variant="quiet"]:hover {
    color: var(--ink);
    background: var(--sunken);
  }
  .button[data-size="sm"] {
    min-height: 2rem;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
  }
  .icon-button {
    width: 2.25rem;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--ink-muted);
  }
  .icon-button:hover {
    color: var(--ink);
  }
  .icon-button svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Theme toggle: the icon shows the theme you would switch to. */
  [data-theme="light"] .theme-icon-light,
  [data-theme="dark"] .theme-icon-dark {
    display: none;
  }

  /* Eyebrow: the atlas plate label above a heading. */
  .eyebrow {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    transform: translateY(-0.25em);
  }

  /* Field label used by every control group. */
  .label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* Panel */
  .panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line);
  }
  .panel-body {
    padding: var(--space-4);
  }

  /* Code block: a labelled, copyable listing. */
  .code {
    position: relative;
    margin-block: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--sunken);
  }
  .code[data-label]::before {
    content: attr(data-label);
    display: block;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-muted);
  }
  .code pre {
    overflow-x: auto;
    padding: var(--space-4);
    font-size: 0.8125rem;
    line-height: 1.7;
    tab-size: 2;
  }
  .code-copy {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    width: 2rem;
    height: 2rem;
    opacity: 0.7;
  }
  .code:not([data-label]) .code-copy {
    top: var(--space-2);
    right: var(--space-2);
  }
  .code-copy:hover,
  .code-copy:focus-visible,
  .code-copy[data-copied] {
    opacity: 1;
  }
  .code-copy .icon-check,
  .code-copy[data-copied] .icon-copy {
    display: none;
  }
  .code-copy[data-copied] .icon-check {
    display: block;
    color: var(--code-string);
  }

  /* highlight.js tokens mapped to the theme. */
  .hljs-keyword,
  .hljs-literal,
  .hljs-built_in,
  .hljs-tag,
  .hljs-name,
  .hljs-selector-tag {
    color: var(--code-keyword);
  }
  .hljs-string,
  .hljs-regexp,
  .hljs-template-tag {
    color: var(--code-string);
  }
  .hljs-number,
  .hljs-attr,
  .hljs-attribute,
  .hljs-variable,
  .hljs-template-variable {
    color: var(--code-number);
  }
  .hljs-comment,
  .hljs-meta,
  .hljs-doctag {
    color: var(--code-comment);
    font-style: italic;
  }
  .hljs-title,
  .hljs-title.function_ {
    color: var(--code-function);
  }
  .hljs-type,
  .hljs-title.class_,
  .hljs-params {
    color: var(--code-type);
  }

  /* Tabs (WAI-ARIA tabs pattern; enhanced by js/ui.js). */
  .tabs {
    margin-block: var(--space-4) var(--space-5);
  }
  .tab-list {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
  }
  .tab {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
  }
  .tab:hover {
    color: var(--ink);
  }
  .tab[aria-selected="true"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
  }
  .tabs .code {
    margin-block: var(--space-3) 0;
  }
  .tab-panel > p {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }

  /* Chip: a pressable filter/selection token. */
  .chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .chip {
    min-height: 2rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition:
      background-color var(--duration) var(--ease),
      color var(--duration) var(--ease);
  }
  .chip:hover {
    background: var(--sunken);
  }
  .chip[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  /* Segmented control built from native radio inputs. */
  .segmented {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--sunken);
  }
  .segmented label {
    position: relative;
    padding: var(--space-1) var(--space-3);
    border-radius: 2px;
    color: var(--ink-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
  }
  .segmented input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }
  .segmented label:has(:checked) {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  }
  .segmented label:has(:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
  }

  /* Status tag */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
  }
  .tag::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    border: 1px solid currentColor;
  }
  .tag[data-state="on"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }
  .tag[data-state="on"]::before {
    background: currentColor;
  }

  /* Checkbox: native input, restyled with a visible checked marker. */
  .checkbox {
    appearance: none;
    flex: none;
    display: grid;
    place-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
  }
  .checkbox::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1px;
    background: transparent;
  }
  .checkbox:checked {
    border-color: var(--ink);
    background: var(--ink);
  }
  .checkbox:checked::after {
    background: var(--paper);
  }

  /* Range input whose track is the intensity ramp. */
  .range {
    appearance: none;
    width: 100%;
    height: 1.5rem;
    background: transparent;
    cursor: pointer;
  }
  .range::-webkit-slider-runnable-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--ramp, var(--line-strong));
  }
  .range::-moz-range-track {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--ramp, var(--line-strong));
  }
  .range::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    margin-top: -0.3125rem;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
  }
  .range::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
  }
  .range:focus-visible {
    outline-offset: 0;
    border-radius: var(--radius-sm);
  }

  /* Form fields */
  .field {
    display: grid;
    gap: var(--space-1);
  }
  .input,
  .select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: var(--text-sm);
  }
  .input::placeholder {
    color: var(--ink-muted);
  }

  /* Reference table */
  .table-wrap {
    overflow-x: auto;
    margin-block: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .table {
    width: 100%;
    font-size: var(--text-sm);
  }
  .table th,
  .table td {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
  }
  .table tr:last-child td {
    border-bottom: 0;
  }
  .table th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--sunken);
    white-space: nowrap;
  }
  .table td:first-child {
    white-space: nowrap;
  }
  .table code {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .table td:first-child code {
    background: none;
    padding: 0;
    font-weight: 500;
  }
  .table td:not(:first-child) {
    color: var(--ink-muted);
  }

  /* Contents rail */
  .toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    max-height: calc(100vh - var(--header-height) - var(--space-6));
    overflow-y: auto;
    font-size: var(--text-sm);
  }
  .toc summary {
    display: none;
  }
  .toc ol {
    list-style: none;
    padding: 0;
  }
  .toc > ol > li + li {
    margin-top: var(--space-4);
  }
  .toc li li a {
    display: block;
    padding: 0.2rem 0 0.2rem var(--space-3);
    border-left: 1px solid var(--line);
    color: var(--ink-muted);
    text-decoration: none;
  }
  .toc li li a:hover {
    color: var(--ink);
  }
  .toc a[aria-current="location"] {
    border-left-color: var(--accent);
    color: var(--ink);
    font-weight: 500;
  }
  .toc .label {
    display: block;
    margin-bottom: var(--space-2);
  }
  @media (max-width: 60rem) {
    .toc {
      position: static;
      max-height: none;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .toc summary {
      display: block;
      padding: var(--space-3) var(--space-4);
      font-weight: 500;
      cursor: pointer;
    }
    .toc > ol {
      padding: 0 var(--space-4) var(--space-4);
    }
  }

  /* Callout for limits and important caveats. */
  .note {
    margin-block: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--line-strong);
    background: var(--sunken);
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }
  .note strong {
    color: var(--ink);
  }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
@layer sections {
  /* Hero */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-5) var(--space-7);
    align-items: end;
    padding-block: var(--space-6) var(--space-5);
  }
  .hero h1 {
    font-size: var(--text-hero);
    font-weight: 400;
    letter-spacing: -0.025em;
  }
  .hero h1 em {
    color: var(--accent);
  }
  .hero-lead {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--ink-muted);
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .install {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.25rem;
    padding-left: var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--sunken);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .install::before {
    content: "$";
    color: var(--ink-muted);
  }
  .install .code-copy {
    position: static;
    opacity: 1;
  }
  .specs {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
  }
  .specs div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .specs dt {
    order: 2;
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }
  .specs dd {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
  }
  @media (max-width: 52rem) {
    .hero {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
    }
  }

  /* Playground: the chart plate and its inspector. */
  .workbench {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
  }
  .workbench-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
  }
  .workbench-bar fieldset {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: 0;
    border: 0;
  }
  .workbench-bar legend {
    float: left;
  }
  .workbench-bar .button {
    margin-left: auto;
  }
  .workbench-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    min-height: 38rem;
  }
  @media (max-width: 60rem) {
    .workbench-body {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .plate {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-width: 0;
    background-color: var(--paper);
    background-image:
      linear-gradient(var(--grid-major) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size:
      5rem 5rem,
      5rem 5rem,
      1rem 1rem,
      1rem 1rem;
    background-position: center;
  }
  .plate-chart {
    /* Tall enough for both figures; narrow screens are bound by width instead. */
    height: min(34rem, 72vh, 115vw);
    padding: var(--space-5);
  }
  .plate-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }
  .plate-caption strong {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
  }

  .legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .legend-ramp {
    width: 9rem;
    height: 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--ramp, var(--line-strong));
  }

  .inspector {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(10rem, 1fr) auto;
    min-width: 0;
    border-left: 1px solid var(--line);
  }
  .inspector > section + section {
    border-top: 1px solid var(--line);
  }
  @media (max-width: 60rem) {
    .inspector {
      border-left: 0;
      border-top: 1px solid var(--line);
    }
  }
  .inspector-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .inspector-section > .panel-head {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .region-card {
    display: grid;
    gap: var(--space-3);
  }
  .region-name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.2;
  }
  .region-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }
  .region-meta code {
    color: var(--ink);
  }
  .intensity-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }
  .intensity-field .range {
    grid-column: 1 / -1;
  }
  .intensity-field output {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .empty {
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }

  .selection-list {
    flex: 1;
    min-height: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .selection-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 5.5rem 1.5rem;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-1);
  }
  .selection-row + .selection-row {
    border-top: 1px dashed var(--line);
  }
  .selection-row-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm);
  }
  .selection-row-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-align: right;
    color: var(--ink-muted);
  }

  .state-output {
    margin: 0 var(--space-4) var(--space-4);
  }
  .state-output pre {
    max-height: 12rem;
    font-size: var(--text-xs);
  }

  /* Quick start: a numbered procedure, prose beside its listing. */
  .steps {
    margin-block: var(--space-4) var(--space-5);
    counter-reset: step;
  }
  .steps > li {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-5);
    counter-increment: step;
  }
  .steps > li + li {
    border-top: 1px solid var(--line);
    padding-top: var(--space-4);
  }
  .steps h4 {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
  }
  .steps h4::before {
    content: counter(step);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--accent);
  }
  .steps p {
    margin-top: var(--space-1);
    color: var(--ink-muted);
    font-size: var(--text-sm);
  }
  .steps .code {
    margin-block: var(--space-4);
  }
  @media (max-width: 48rem) {
    .steps > li {
      grid-template-columns: minmax(0, 1fr);
    }
    .steps .code {
      margin-top: var(--space-2);
    }
  }

  /* Prose sections of the guide and reference. */
  .doc-part + .doc-part {
    margin-top: var(--space-8);
  }
  .doc-part > h2 {
    margin-bottom: var(--space-5);
  }
  .doc-section + .doc-section {
    margin-top: var(--space-7);
  }
  .doc-section h3 {
    margin-bottom: var(--space-3);
  }
  .doc-section h4 {
    margin-top: var(--space-5);
  }
  .doc-section > p,
  .doc-section > ul {
    max-width: var(--prose);
  }
  .doc-section > p + p,
  .doc-section > p + ul,
  .doc-section > h4 + p {
    margin-top: var(--space-3);
  }
  .doc-section > ul {
    padding-left: var(--space-5);
  }
  .doc-section > ul li + li {
    margin-top: var(--space-1);
  }
  .anchor {
    color: inherit;
    text-decoration: none;
  }
  .anchor:hover::after {
    content: " #";
    color: var(--ink-muted);
  }

  /* Region catalog */
  .catalog-controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-4);
  }
  .catalog-body {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .catalog-preview {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
    padding: var(--space-4);
  }
  .catalog-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
  .catalog-figures figcaption {
    margin-top: var(--space-1);
    text-align: center;
  }
  .catalog-preview-svg {
    width: 100%;
    height: auto;
  }
  .catalog-preview-path {
    fill: var(--region-rest);
    opacity: 0.5;
  }
  .catalog-preview-path.is-active {
    fill: var(--accent);
    opacity: 1;
  }
  .catalog-caption {
    min-height: 4.5em;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--ink-muted);
  }
  .catalog-count {
    margin-bottom: var(--space-2);
  }
  .catalog-results {
    max-height: 32rem;
    overflow-y: auto;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .catalog-results li + li {
    border-top: 1px solid var(--line);
  }
  .catalog-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: none;
    text-align: left;
    cursor: copy;
  }
  .catalog-row:hover {
    background: var(--sunken);
  }
  .catalog-row[aria-current="true"] {
    background: var(--accent-wash);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .catalog-row:focus-visible {
    outline-offset: -2px;
  }
  .catalog-row code {
    font-size: var(--text-sm);
    font-weight: 500;
    overflow-wrap: anywhere;
  }
  .catalog-row-name {
    font-size: var(--text-sm);
  }
  .catalog-row-meta {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    white-space: nowrap;
  }
  @media (max-width: 48rem) {
    .catalog-controls {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .catalog-controls .field:first-child {
      grid-column: 1 / -1;
    }
    .catalog-body {
      grid-template-columns: minmax(0, 1fr);
    }
    .catalog-preview {
      position: static;
    }
    .catalog-figures {
      max-width: 14rem;
      margin-inline: auto;
    }
    .catalog-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .catalog-row-meta {
      white-space: normal;
    }
  }
}

/* ── Utilities ─────────────────────────────────────────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-2);
    z-index: 30;
    padding: var(--space-2) var(--space-4);
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-200%);
  }
  .skip-link:focus {
    transform: none;
  }
  [hidden] {
    display: none !important;
  }
}