/* SteinerDesign — generated by lint/check.mjs. Do not edit; edit tokens/ and css/. */
/* tokens/fonts.css */
/* SteinerDesign — webfonts. Hanken Grotesk (sans, variable 100–900) + Martian Mono (mono, variable). Both OFL. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;src:url("../assets/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:italic;font-weight:100 900;font-display:swap;src:url("../assets/fonts/hanken-grotesk-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../assets/fonts/martian-mono-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../assets/fonts/martian-mono-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* tokens/palette.css */
/* SteinerDesign — tier 1: palette primitives.
 * 12-step ramps, Radix role contract: each step has one job.
 *   1–2 backgrounds · 3–5 component fills (rest/hover/pressed) · 6–8 borders
 *   9–10 solids · 11–12 text
 * Light and dark are parallel ramps behind the same step numbers.
 * Components MUST NOT use these directly — use the roles in color.css.
 * Neutral chroma ceiling: C ≤ 0.004 for steps 1–3, C ≤ 0.009 everywhere (keeps greys off cream). */
:root {
  /* neutral — light (hue 75) */
  --neutral-light-1: oklch(98.4% 0.002 75); /* app background */
  --neutral-light-2: oklch(96.8% 0.003 75); /* subtle background */
  --neutral-light-3: oklch(94.8% 0.004 75); /* component fill — rest */
  --neutral-light-4: oklch(92.6% 0.005 75); /* component fill — hover */
  --neutral-light-5: oklch(90.2% 0.006 75); /* component fill — pressed */
  --neutral-light-6: oklch(86.5% 0.006 75); /* border — subtle / decorative */
  --neutral-light-7: oklch(62% 0.008 75); /* border — control (3:1 on steps 1–2) */
  --neutral-light-8: oklch(57.5% 0.009 75); /* border — strong / hover */
  --neutral-light-9: oklch(54% 0.009 75); /* solid / placeholder text (≥4.5:1 on 1) */
  --neutral-light-10: oklch(50% 0.009 75); /* solid — hover */
  --neutral-light-11: oklch(47% 0.009 75); /* text — low contrast (≥4.5:1 on 1–2) */
  --neutral-light-12: oklch(23.5% 0.008 75); /* text — high contrast */
  /* neutral — dark (hue 75) */
  --neutral-dark-1: oklch(16.8% 0.003 75); /* app background */
  --neutral-dark-2: oklch(19.2% 0.004 75); /* subtle background */
  --neutral-dark-3: oklch(22.2% 0.005 75); /* component fill — rest */
  --neutral-dark-4: oklch(25% 0.006 75); /* component fill — hover */
  --neutral-dark-5: oklch(27.8% 0.007 75); /* component fill — pressed */
  --neutral-dark-6: oklch(31% 0.007 75); /* border — subtle / decorative */
  --neutral-dark-7: oklch(53% 0.008 75); /* border — control (3:1 on steps 1–2) */
  --neutral-dark-8: oklch(60% 0.008 75); /* border — strong / hover */
  --neutral-dark-9: oklch(64% 0.008 75); /* solid / placeholder text (≥4.5:1 on 1) */
  --neutral-dark-10: oklch(68% 0.008 75); /* solid — hover */
  --neutral-dark-11: oklch(76% 0.007 75); /* text — low contrast (≥4.5:1 on 1–2) */
  --neutral-dark-12: oklch(94% 0.004 75); /* text — high contrast */
  /* red — light (hue 27) */
  --red-light-1: oklch(98.5% 0.006 27); /* app background */
  --red-light-2: oklch(96.6% 0.013 27); /* subtle background */
  --red-light-3: oklch(94% 0.026 27); /* component fill — rest */
  --red-light-4: oklch(91% 0.042 27); /* component fill — hover */
  --red-light-5: oklch(87.5% 0.06 27); /* component fill — pressed */
  --red-light-6: oklch(82% 0.09 27); /* border — subtle / decorative */
  --red-light-7: oklch(74% 0.14 27); /* border — control (3:1 on steps 1–2) */
  --red-light-8: oklch(65% 0.18 27); /* border — strong / hover */
  --red-light-9: oklch(54% 0.205 27); /* solid */
  --red-light-10: oklch(49% 0.195 27); /* solid — hover */
  --red-light-11: oklch(50% 0.19 27); /* text — low contrast (≥4.5:1 on 1–2) */
  --red-light-12: oklch(30% 0.1 27); /* text — high contrast */
  /* red — dark (hue 27) */
  --red-dark-1: oklch(18% 0.012 27); /* app background */
  --red-dark-2: oklch(20.5% 0.025 27); /* subtle background */
  --red-dark-3: oklch(25% 0.06 27); /* component fill — rest */
  --red-dark-4: oklch(28.5% 0.08 27); /* component fill — hover */
  --red-dark-5: oklch(32% 0.1 27); /* component fill — pressed */
  --red-dark-6: oklch(37% 0.12 27); /* border — subtle / decorative */
  --red-dark-7: oklch(44% 0.14 27); /* border — control (3:1 on steps 1–2) */
  --red-dark-8: oklch(50% 0.17 27); /* border — strong / hover */
  --red-dark-9: oklch(54% 0.205 27); /* solid */
  --red-dark-10: oklch(59% 0.2 27); /* solid — hover */
  --red-dark-11: oklch(76% 0.12 27); /* text — low contrast (≥4.5:1 on 1–2) */
  --red-dark-12: oklch(90% 0.04 27); /* text — high contrast */
  /* status hues — tint / border / text only. Status never gets a solid fill.
     crimson (h 8) is ~19° off the accent red (h 27) and is never used as a solid. */
  --green-light-tint: oklch(95.5% 0.03 150);
  --green-light-border: oklch(70% 0.11 150);
  --green-light-text: oklch(47% 0.11 150);
  --green-dark-tint: oklch(24% 0.04 150);
  --green-dark-border: oklch(46% 0.08 150);
  --green-dark-text: oklch(80% 0.12 150);
  --amber-light-tint: oklch(95.8% 0.03 80);
  --amber-light-border: oklch(76% 0.13 80);
  --amber-light-text: oklch(49% 0.1 65);
  --amber-dark-tint: oklch(25% 0.035 80);
  --amber-dark-border: oklch(50% 0.09 80);
  --amber-dark-text: oklch(84% 0.12 85);
  --crimson-light-tint: oklch(95.8% 0.02 8);
  --crimson-light-border: oklch(68% 0.15 8);
  --crimson-light-text: oklch(49% 0.18 8);
  --crimson-dark-tint: oklch(25% 0.05 8);
  --crimson-dark-border: oklch(48% 0.13 8);
  --crimson-dark-text: oklch(77% 0.12 10);
  --white: oklch(100% 0 0);
}

/* tokens/color.css */
/* SteinerDesign — tier 2: colour roles. THE ONLY colours components may use.
 * One light-dark() declaration per role. light-dark() follows `color-scheme`,
 * so themes are switched by setting color-scheme (see base.css), never by swapping variables.
 * Grammar: --{family}-{role}. Families: bg, fill, border, fg, accent, good, warn, bad.
 * Contrast figures are WCAG 2 ratios, light / dark, against --bg-page unless noted. */
:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg-page: light-dark(var(--neutral-light-1), var(--neutral-dark-1));      /* the canvas. Never a tint, never cream. */
  --bg-surface: light-dark(var(--neutral-light-2), var(--neutral-dark-2));   /* sidebars, table heads, wells — a quiet second plane */
  --bg-raised: light-dark(var(--white), var(--neutral-dark-3));              /* popover, dialog, menu. MUST carry --border-default; shadow is optional */

  /* Fills — used sparingly. Nothing is filled above step 5 except the accent solid. */
  --fill-subtle: light-dark(var(--neutral-light-3), var(--neutral-dark-3));  /* rest fill for secondary controls, code */
  --fill-hover: light-dark(var(--neutral-light-4), var(--neutral-dark-4));   /* hover on rows, ghost buttons */
  --fill-active: light-dark(var(--neutral-light-5), var(--neutral-dark-5));  /* pressed */

  /* Borders — the main vocabulary. Separate things with lines, not boxes. */
  --border-subtle: light-dark(var(--neutral-light-6), var(--neutral-dark-6));  /* dividers, row rules, card outlines. Decorative: 1.4 / 1.5 */
  --border-default: light-dark(var(--neutral-light-7), var(--neutral-dark-7)); /* control boundaries. 3.48 / 3.63 — WCAG 1.4.11 */
  --border-strong: light-dark(var(--neutral-light-8), var(--neutral-dark-8));  /* control hover, emphasis rule. 4.2 / 4.9 */

  /* Text */
  --fg-default: light-dark(var(--neutral-light-12), var(--neutral-dark-12)); /* body + headings. 15.9 / 16.1 */
  --fg-muted: light-dark(var(--neutral-light-11), var(--neutral-dark-11));   /* secondary content, help text. 6.5 / 8.9 */
  --fg-subtle: light-dark(var(--neutral-light-9), var(--neutral-dark-9));    /* placeholder, disabled, metadata. 4.8 / 5.7 — never body copy */
  --fg-on-accent: var(--white);                                               /* label on --accent-solid. 5.6 / 5.6 */

  /* Accent — one only. Interaction, selection, brand. Signal red, h 27. */
  --accent-solid: var(--red-light-9);                                         /* identical in both themes. Primary button, selected mark */
  --accent-solid-hover: light-dark(var(--red-light-10), var(--red-dark-10));  /* darker in light, lighter in dark. White label ≥ 4.5 */
  --accent-fg: light-dark(var(--red-light-11), var(--red-dark-11));           /* links, active nav label. 6.3 / 8.5 — dark is desaturated so it does not vibrate */
  --accent-tint: light-dark(var(--red-light-3), var(--red-dark-3));           /* selected row / chip background. Pair with --accent-fg (5.5 / 7.2) */
  --accent-border: light-dark(var(--red-light-7), var(--red-dark-7));         /* selected outline next to a tint */

  /* Status — never a solid fill. Always icon + message + tint or rule. */
  --good-fg: light-dark(var(--green-light-text), var(--green-dark-text));     /* 6.2 / 10.7 */
  --good-tint: light-dark(var(--green-light-tint), var(--green-dark-tint));
  --good-border: light-dark(var(--green-light-border), var(--green-dark-border));
  --warn-fg: light-dark(var(--amber-light-text), var(--amber-dark-text));     /* 6.1 / 11.7 */
  --warn-tint: light-dark(var(--amber-light-tint), var(--amber-dark-tint));
  --warn-border: light-dark(var(--amber-light-border), var(--amber-dark-border));
  --bad-fg: light-dark(var(--crimson-light-text), var(--crimson-dark-text));  /* 6.6 / 8.8. Crimson h 8, not the accent */
  --bad-tint: light-dark(var(--crimson-light-tint), var(--crimson-dark-tint));
  --bad-border: light-dark(var(--crimson-light-border), var(--crimson-dark-border)); /* invalid control outline */

  /* Utility */
  --focus-ring: light-dark(oklch(30% 0.01 75), oklch(90% 0.006 75));         /* neutral ink, never red — can't be read as an error. 13.0 / 14.2 */
  --scrim: light-dark(oklch(20% 0.01 75 / 0.36), oklch(5% 0 0 / 0.62));      /* behind modal dialogs */
  --shadow-color: light-dark(oklch(20% 0.01 75 / 0.16), oklch(0% 0 0 / 0.5));
  --shadow-popover: 0 12px 32px -12px var(--shadow-color), 0 2px 6px -2px var(--shadow-color); /* the ONE shadow. Popovers and dialogs only */
}

/* tokens/type.css */
/* SteinerDesign — type. Fixed scale; each step is a size / line-height / tracking triple used together.
 * Line-heights sit on the 4px grid. Tracking is positive below body size, negative above.
 * Agents choose a ROLE (--font-body, --font-label, --font-title, --font-caption) — never a raw size. */
:root {
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;  /* the designed face. System fonts are fallback only */
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* IDs, code, tabular figures in data */

  --weight-regular: 400;
  --weight-medium: 520;
  --weight-bold: 640;

  --text-xs: 0.75rem;   --leading-xs: 1rem;      --tracking-xs: 0.02em;   /* 12/16 caption, meta */
  --text-sm: 0.8125rem; --leading-sm: 1.25rem;   --tracking-sm: 0.01em;   /* 13/20 labels, dense table */
  --text-md: 0.875rem;  --leading-md: 1.25rem;   --tracking-md: 0;        /* 14/20 app UI body (default) */
  --text-lg: 1rem;      --leading-lg: 1.5rem;    --tracking-lg: 0;        /* 16/24 reading text, mobile inputs */
  --text-xl: 1.25rem;   --leading-xl: 1.75rem;   --tracking-xl: -0.01em;  /* 20/28 section title */
  --text-2xl: 1.5rem;   --leading-2xl: 2rem;     --tracking-2xl: -0.015em;/* 24/32 page title */
  --text-3xl: 2rem;     --leading-3xl: 2.5rem;   --tracking-3xl: -0.022em;/* 32/40 hero title in app */
  --text-display: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); /* @kind other */ /* the one fluid step: 40→72px (1.8×, WCAG 1.4.4 ≤ 2.5×) */
  --leading-display: 1.04; --tracking-display: -0.035em;

  /* Role shorthands (CSS `font`). Pair each with its tracking token. */
  --font-body: var(--weight-regular) var(--text-md) / var(--leading-md) var(--font-sans);
  --font-label: var(--weight-medium) var(--text-sm) / var(--leading-sm) var(--font-sans);
  --font-title: var(--weight-bold) var(--text-xl) / var(--leading-xl) var(--font-sans);
  --font-caption: var(--weight-regular) var(--text-xs) / var(--leading-xs) var(--font-sans);
  --font-reading: var(--weight-regular) var(--text-lg) / 1.75rem var(--font-sans); /* long-form only, 16/28 */
  --font-code: var(--weight-regular) 0.8125em / 1.5 var(--font-mono);

  --measure: 64ch; /* reading line length cap */
}

/* tokens/space.css */
/* SteinerDesign — space. 4px base; the number is the multiple of 4 (--space-3 = 12px). */
:root {
  --space-half: 2px;  /* hairline offsets only */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Fluid — page layout ONLY, never inside components */
  --space-gutter: clamp(16px, 2.5vw + 8px, 48px);   /* page side margins */
  --space-section: clamp(48px, 6vw + 24px, 128px);  /* gap between page sections */

  /* Control heights — buttons, inputs, selects and table rows line up */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px; /* touch / mobile primary */
}

/* tokens/shape.css */
/* SteinerDesign — shape and motion. All radii derive from one dial. */
:root {
  --radius: 3px;                              /* THE dial. Small: corners are eased, not rounded */
  --radius-sm: calc(var(--radius) * 0.67);    /* 2px — checkboxes, badges */
  --radius-md: var(--radius);                 /* 3px — controls, cards */
  --radius-lg: calc(var(--radius) * 2);       /* 6px — dialogs, popovers */
  --radius-pill: 999px;                       /* switch track, status dot. Never on buttons */

  --border-hairline: 1px;  /* every rule and outline */
  --border-focus: 2px;     /* focus ring + selected-state line */
  --focus-offset: 2px;

  --duration: 140ms; /* @kind other */ /* the one duration: hover, press, toggle */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* the one easing: fast out, no bounce */
}

/* css/base.css */
/* SteinerDesign — base. Layer order, theme switch, and semantic element defaults (Pico principle:
 * plain <button>, <input>, <table>, <dialog> come out right with no classes). */
@layer steiner.reset, steiner.base, steiner.layout, steiner.components, steiner.utilities;

/* Manual theme override. Sets color-scheme so light-dark() resolves — NEVER swap variables.
 * Works on <html> or on any subtree. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

@layer steiner.reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  :where(svg) { flex-shrink: 0; }
}

@layer steiner.base {
  html {
    background: var(--bg-page);
    color: var(--fg-default);
    font: var(--font-body);
    letter-spacing: var(--tracking-md);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    font-feature-settings: "ss01", "cv11";
  }
  [data-theme] { background-color: var(--bg-page); color: var(--fg-default); }

  h1 { font: var(--weight-bold) var(--text-2xl) / var(--leading-2xl) var(--font-sans); letter-spacing: var(--tracking-2xl); text-wrap: balance; }
  h2 { font: var(--font-title); letter-spacing: var(--tracking-xl); text-wrap: balance; }
  h3 { font: var(--weight-bold) var(--text-lg) / var(--leading-lg) var(--font-sans); }
  h4, h5, h6 { font: var(--font-label); letter-spacing: var(--tracking-sm); }
  p { text-wrap: pretty; }
  small { font: var(--font-caption); letter-spacing: var(--tracking-xs); }
  strong, b { font-weight: var(--weight-bold); }

  a { color: var(--accent-fg); text-decoration-line: underline; text-decoration-thickness: var(--border-hairline); text-underline-offset: 0.22em; transition: text-decoration-thickness var(--duration) var(--ease); }
  a:hover { text-decoration-thickness: var(--border-focus); }

  :focus-visible { outline: var(--border-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
  ::selection { background: var(--accent-tint); color: var(--fg-default); }

  hr { border: 0; border-top: var(--border-hairline) solid var(--border-subtle); margin: 0; }
  code, kbd, samp, pre { font: var(--font-code); }
  :not(pre) > code { background: var(--fill-subtle); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
  kbd { border: var(--border-hairline) solid var(--border-default); border-bottom-width: var(--border-focus); padding: 0 0.4em; border-radius: var(--radius-sm); }
  pre { background: var(--bg-surface); border: var(--border-hairline) solid var(--border-subtle); padding: var(--space-4); overflow-x: auto; border-radius: var(--radius-md); }

  /* Button — default is the secondary (outlined) treatment */
  button, .sd-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--control-md); padding: 0 var(--space-4);
    font: var(--font-label); letter-spacing: var(--tracking-sm); white-space: nowrap; text-decoration: none;
    color: var(--fg-default); background: var(--bg-page);
    border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md);
    cursor: pointer; user-select: none;
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  :is(button, .sd-button) svg { width: 16px; height: 16px; }
  :is(button, .sd-button):hover { border-color: var(--border-strong); background: var(--fill-subtle); }
  :is(button, .sd-button):active { background: var(--fill-active); }
  :is(button, .sd-button)[data-variant="primary"] { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--fg-on-accent); }
  :is(button, .sd-button)[data-variant="primary"]:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); }
  :is(button, .sd-button)[data-variant="ghost"] { background: transparent; border-color: transparent; }
  :is(button, .sd-button)[data-variant="ghost"]:hover { background: var(--fill-hover); }
  :is(button, .sd-button)[data-variant="ghost"]:active { background: var(--fill-active); }
  :is(button, .sd-button)[data-variant="danger"] { color: var(--bad-fg); border-color: var(--bad-fg); }
  :is(button, .sd-button)[data-variant="danger"]:hover { background: var(--bad-tint); }
  :is(button, .sd-button)[data-size="sm"] { height: var(--control-sm); padding: 0 var(--space-3); gap: var(--space-1); }
  :is(button, .sd-button)[data-size="sm"] svg { width: 14px; height: 14px; }
  :is(button, .sd-button)[data-icon-only] { width: var(--control-md); padding: 0; }
  :is(button, .sd-button)[data-icon-only][data-size="sm"] { width: var(--control-sm); }
  :is(button, .sd-button):disabled, :is(button, .sd-button)[aria-disabled="true"] {
    cursor: not-allowed; color: var(--fg-subtle); background: var(--fill-subtle); border-color: var(--border-subtle);
  }
  :is(button, .sd-button)[data-variant="ghost"]:disabled { background: transparent; border-color: transparent; }

  /* Fields — input, textarea, select share one style */
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"]), select, textarea) {
    width: 100%; height: var(--control-md); padding: 0 var(--space-3);
    font: var(--font-body); color: var(--fg-default); background: var(--bg-page);
    border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-md);
    transition: border-color var(--duration) var(--ease);
  }
  :is(input, select, textarea):hover { border-color: var(--border-strong); }
  :is(input, select, textarea):focus-visible { outline-offset: 0; border-color: var(--focus-ring); }
  :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bad-fg); }
  :is(input, select, textarea):disabled { cursor: not-allowed; color: var(--fg-subtle); background: var(--fill-subtle); border-color: var(--border-subtle); }
  ::placeholder { color: var(--fg-subtle); opacity: 1; }
  textarea { height: auto; min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; }
  select {
    appearance: none; padding-right: var(--space-8); cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
    background-size: 5px 5px; background-repeat: no-repeat;
  }
  @media (pointer: coarse) { :is(input, select, textarea) { font-size: var(--text-lg); } }

  /* Checkbox, radio, switch — native, restyled */
  input:is([type="checkbox"], [type="radio"]) {
    appearance: none; margin: 0; width: 16px; height: 16px; flex: none;
    display: inline-grid; place-content: center; cursor: pointer;
    background: var(--bg-page); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-sm);
    transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }
  input[type="radio"] { border-radius: 50%; }
  input:is([type="checkbox"], [type="radio"]):hover { border-color: var(--border-strong); }
  input:is([type="checkbox"], [type="radio"])::before { content: ""; transform: scale(0); transition: transform var(--duration) var(--ease); background: var(--fg-on-accent); }
  input[type="checkbox"]::before { width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
  input[type="radio"]::before { width: 6px; height: 6px; border-radius: 50%; }
  input:is([type="checkbox"], [type="radio"]):checked, input[type="checkbox"]:indeterminate { background: var(--accent-solid); border-color: var(--accent-solid); }
  input:is([type="checkbox"], [type="radio"]):checked::before { transform: scale(1); }
  input[type="checkbox"]:indeterminate::before { transform: scale(1); clip-path: none; height: 2px; }
  input:is([type="checkbox"], [type="radio"])[aria-invalid="true"] { border-color: var(--bad-fg); }
  input:is([type="checkbox"], [type="radio"]):disabled { cursor: not-allowed; background: var(--fill-subtle); border-color: var(--border-subtle); }
  input:is([type="checkbox"], [type="radio"]):disabled:checked { background: var(--border-default); border-color: var(--border-default); }

  input[type="checkbox"][role="switch"] { width: 32px; height: 18px; border-radius: var(--radius-pill); place-content: center start; padding: 0 2px; background: var(--fill-active); border-color: var(--border-default); }
  input[type="checkbox"][role="switch"]::before { width: 12px; height: 12px; border-radius: 50%; clip-path: none; transform: none; background: var(--fg-muted); transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); }
  input[type="checkbox"][role="switch"]:checked { background: var(--accent-solid); border-color: var(--accent-solid); }
  input[type="checkbox"][role="switch"]:checked::before { transform: translateX(14px); background: var(--fg-on-accent); }
  input[type="checkbox"][role="switch"]:disabled::before { background: var(--fg-subtle); }

  label { font: var(--font-label); letter-spacing: var(--tracking-sm); }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { font: var(--font-label); padding: 0; margin-bottom: var(--space-2); }

  /* Table — rules, not zebra fills */
  table { width: 100%; border-collapse: collapse; font: var(--font-body); font-variant-numeric: tabular-nums; }
  th { text-align: left; font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-muted); height: var(--control-md); padding: 0 var(--space-3); border-bottom: var(--border-hairline) solid var(--border-default); white-space: nowrap; }
  td { height: var(--control-md); padding: var(--space-2) var(--space-3); border-bottom: var(--border-hairline) solid var(--border-subtle); vertical-align: middle; }
  :is(th, td):first-child { padding-left: 0; }
  :is(th, td):last-child { padding-right: 0; }
  :is(th, td)[data-num] { text-align: right; }
  tbody tr { transition: background-color var(--duration) var(--ease); }
  tbody tr:hover { background: var(--fill-subtle); }
  tbody tr[aria-selected="true"] { background: var(--accent-tint); }
  caption { font: var(--font-caption); color: var(--fg-muted); text-align: left; caption-side: bottom; padding-top: var(--space-3); }

  /* Dialog + popover — the only raised surfaces */
  dialog, [popover] {
    color: var(--fg-default); background: var(--bg-raised);
    border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover); padding: 0;
  }
  dialog { width: min(520px, 100vw - 32px); }
  dialog::backdrop { background: var(--scrim); }
  [popover] { padding: var(--space-1); min-width: 200px; margin: 0; }
}

/* css/layout.css */
/* SteinerDesign — layout is composition, not components. Each primitive exposes one or two custom-property knobs. */
@layer steiner.layout {
  .sd-container { max-width: var(--container, 1200px); margin-inline: auto; padding-inline: var(--space-gutter); }
  .sd-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
  .sd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
  .sd-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .sd-sidebar { display: flex; flex-wrap: wrap; gap: var(--sidebar-gap, var(--space-8)); }
  .sd-sidebar > :first-child { flex-basis: var(--sidebar-width, 240px); flex-grow: 1; }
  .sd-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--sidebar-content-min, 60%); }
  .sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 240px), 100%), 1fr)); gap: var(--grid-gap, var(--space-4)); }
  /* Ruled grid: cells divided by structural 1px lines, no boxes. The signature SteinerDesign layout. */
  .sd-ruled { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 200px), 100%), 1fr)); gap: var(--border-hairline); background: var(--border-subtle); border-block: var(--border-hairline) solid var(--border-subtle); }
  .sd-ruled > * { background: var(--bg-page); padding: var(--ruled-pad, var(--space-5)); }
}
@layer steiner.utilities {
  .sd-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sd-mono { font-family: var(--font-mono); font-size: 0.92em; }
  .sd-num { font-variant-numeric: tabular-nums; }
  .sd-muted { color: var(--fg-muted); }
}

/* css/components.css */
/* SteinerDesign — components. Plain classes, every value via var(). Selected states are lines; status is tint + rule + icon. */
@layer steiner.components {
  .sd-icon { width: 16px; height: 16px; display: inline-block; vertical-align: -0.2em; }

  /* Field group */
  .sd-field { display: grid; gap: var(--space-1); align-content: start; }
  .sd-field__label { display: flex; justify-content: space-between; gap: var(--space-2); font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-default); }
  .sd-field__optional { font-weight: var(--weight-regular); color: var(--fg-muted); }
  .sd-field__help { font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-muted); }
  .sd-field__error { display: flex; align-items: center; gap: var(--space-1); font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-sans); letter-spacing: var(--tracking-xs); color: var(--bad-fg); }
  .sd-field__error .sd-icon { width: 14px; height: 14px; }

  .sd-check { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--font-body); color: var(--fg-default); cursor: pointer; min-height: var(--control-sm); }
  .sd-check:has(input:disabled) { color: var(--fg-subtle); cursor: not-allowed; }
  .sd-check__text { display: grid; }
  .sd-check__desc { font: var(--font-caption); color: var(--fg-muted); }

  /* Badge / chip */
  .sd-badge { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; font: var(--weight-medium) var(--text-xs) / 1 var(--font-sans); letter-spacing: var(--tracking-xs); white-space: nowrap; color: var(--fg-muted); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; }
  .sd-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
  .sd-badge[data-tone="accent"] { color: var(--accent-fg); border-color: var(--accent-border); background: var(--accent-tint); }
  .sd-badge[data-tone="good"] { color: var(--good-fg); border-color: var(--good-border); background: var(--good-tint); }
  .sd-badge[data-tone="warn"] { color: var(--warn-fg); border-color: var(--warn-border); background: var(--warn-tint); }
  .sd-badge[data-tone="bad"] { color: var(--bad-fg); border-color: var(--bad-border); background: var(--bad-tint); }
  .sd-badge[data-variant="outline"] { background: transparent; }

  /* Card — border-led, never shadowed */
  .sd-card { display: flex; flex-direction: column; background: var(--bg-page); border: var(--border-hairline) solid var(--border-subtle); border-radius: var(--radius-md); color: inherit; text-decoration: none; min-width: 0; }
  a.sd-card, .sd-card[data-interactive] { transition: border-color var(--duration) var(--ease); }
  a.sd-card:hover, .sd-card[data-interactive]:hover { border-color: var(--border-strong); }
  .sd-card[aria-selected="true"], .sd-card[aria-current="true"] { border-color: var(--accent-solid); box-shadow: inset 0 0 0 1px var(--accent-solid); }
  .sd-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline) solid var(--border-subtle); }
  .sd-card__title { font: var(--weight-bold) var(--text-md) / var(--leading-md) var(--font-sans); }
  .sd-card__body { padding: var(--space-5); display: grid; gap: var(--space-3); }
  .sd-card__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: var(--border-hairline) solid var(--border-subtle); }

  /* Notice — tint + 2px top rule + icon + message. Never a solid fill. */
  .sd-notice { --n-fg: var(--fg-muted); --n-tint: var(--bg-surface); --n-rule: var(--border-strong);
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--n-tint); border-top: var(--border-focus) solid var(--n-rule); color: var(--fg-default); }
  .sd-notice[data-tone="good"] { --n-fg: var(--good-fg); --n-tint: var(--good-tint); --n-rule: var(--good-border); }
  .sd-notice[data-tone="warn"] { --n-fg: var(--warn-fg); --n-tint: var(--warn-tint); --n-rule: var(--warn-border); }
  .sd-notice[data-tone="bad"] { --n-fg: var(--bad-fg); --n-tint: var(--bad-tint); --n-rule: var(--bad-fg); }
  .sd-notice__icon { color: var(--n-fg); width: 18px; height: 18px; margin-top: 1px; }
  .sd-notice__title { font: var(--weight-bold) var(--text-md) / var(--leading-md) var(--font-sans); color: var(--n-fg); }
  .sd-notice__body { display: grid; gap: var(--space-half); font: var(--font-body); }
  .sd-notice__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
  .sd-notice > button { margin: -4px -8px 0 0; }

  /* Tabs — selected = 2px accent line */
  .sd-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-hairline) solid var(--border-subtle); overflow-x: auto; }
  .sd-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; margin-bottom: -1px; cursor: pointer;
    font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-muted); white-space: nowrap;
    border-bottom: var(--border-focus) solid transparent; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
  .sd-tab:hover { color: var(--fg-default); border-bottom-color: var(--border-default); }
  .sd-tab[aria-selected="true"] { color: var(--fg-default); border-bottom-color: var(--accent-solid); }
  .sd-tab:focus-visible { outline: var(--border-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
  .sd-tab:disabled, .sd-tab[aria-disabled="true"] { color: var(--fg-subtle); cursor: not-allowed; border-bottom-color: transparent; }
  .sd-tab__count { font: var(--font-caption); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

  /* Navigation bar — selected = 2px accent line under the link */
  .sd-nav { display: flex; align-items: stretch; gap: var(--space-8); height: 56px; padding-inline: var(--space-gutter); border-bottom: var(--border-hairline) solid var(--border-subtle); background: var(--bg-page); }
  .sd-nav__brand { display: flex; align-items: center; gap: var(--space-2); font: var(--weight-bold) var(--text-lg) / 1 var(--font-sans); letter-spacing: -0.02em; color: var(--fg-default); text-decoration: none; }
  .sd-nav__links { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
  .sd-nav__link { display: flex; align-items: center; height: 100%; font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-muted); text-decoration: none; border-bottom: var(--border-focus) solid transparent; margin-bottom: -1px; transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
  .sd-nav__link:hover { color: var(--fg-default); text-decoration: none; }
  .sd-nav__link[aria-current="page"] { color: var(--fg-default); border-bottom-color: var(--accent-solid); }
  .sd-nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
  .sd-nav__brand, .sd-nav__end { flex: none; }
  /* Narrow screens: links scroll sideways instead of pushing the page wider. Desktop is unchanged. */
  @media (max-width: 640px) {
    .sd-nav, .sd-nav__links { gap: var(--space-4); }
    .sd-nav__links { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .sd-nav__link { white-space: nowrap; }
  }

  /* Side navigation — selected = 2px accent line at the leading edge */
  .sd-sidenav { display: grid; gap: var(--space-half); padding: 0; margin: 0; list-style: none; }
  .sd-sidenav__heading { font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-subtle); padding: var(--space-4) var(--space-3) var(--space-1); }
  .sd-sidenav__link { display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-muted); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
  .sd-sidenav__link:hover { background: var(--fill-hover); color: var(--fg-default); text-decoration: none; }
  .sd-sidenav__link[aria-current="page"] { color: var(--fg-default); box-shadow: inset var(--border-focus) 0 0 var(--accent-solid); border-radius: 0; }
  .sd-sidenav__link .sd-icon { color: var(--fg-subtle); }
  .sd-sidenav__link[aria-current="page"] .sd-icon { color: var(--fg-default); }
  .sd-sidenav__count { margin-left: auto; font: var(--font-caption); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

  /* List row */
  .sd-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--border-hairline) solid var(--border-subtle); }
  .sd-list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; border-bottom: var(--border-hairline) solid var(--border-subtle); color: inherit; text-decoration: none; }
  .sd-list-row:not(:has(> .sd-list-row__lead)) { grid-template-columns: minmax(0, 1fr) auto; }
  a.sd-list-row, .sd-list-row[data-interactive] { cursor: pointer; padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); transition: background-color var(--duration) var(--ease); }
  a.sd-list-row:hover, .sd-list-row[data-interactive]:hover { background: var(--fill-subtle); }
  .sd-list-row[aria-selected="true"] { background: var(--accent-tint); }
  .sd-list-row__lead { color: var(--fg-subtle); display: flex; }
  .sd-list-row__main { display: grid; min-width: 0; }
  .sd-list-row__title { font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-list-row__meta { font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sd-list-row__trail { display: flex; align-items: center; gap: var(--space-3); color: var(--fg-muted); font: var(--font-caption); font-variant-numeric: tabular-nums; }

  /* Dialog parts */
  .sd-dialog__header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-2); }
  .sd-dialog__title { font: var(--font-title); letter-spacing: var(--tracking-xl); }
  .sd-dialog__body { padding: var(--space-2) var(--space-6) var(--space-6); display: grid; gap: var(--space-4); color: var(--fg-muted); }
  .sd-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: var(--border-hairline) solid var(--border-subtle); }
  .sd-dialog__header > button { margin: -4px -8px 0 0; }

  /* Static raised surface — for specimens and non-popover floating panels */
  .sd-raised { background: var(--bg-raised); border: var(--border-hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-popover); color: var(--fg-default); }
  [popover].sd-raised, .sd-raised[popover] { padding: var(--space-1); }

  /* Popover menu */
  .sd-menu { display: grid; gap: var(--space-half); }
  .sd-menu__item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font: var(--font-body); color: var(--fg-default); cursor: pointer; }
  .sd-menu__item:hover, .sd-menu__item:focus-visible { background: var(--fill-hover); outline: none; }
  .sd-menu__item .sd-icon { color: var(--fg-muted); }
  .sd-menu__item[data-tone="bad"], .sd-menu__item[data-tone="bad"] .sd-icon { color: var(--bad-fg); }
  .sd-menu__item kbd { margin-left: auto; color: var(--fg-subtle); font-size: 0.7rem; }
  .sd-menu__sep { height: 1px; background: var(--border-subtle); margin: var(--space-1) calc(var(--space-1) * -1); }

  /* Long-form prose */
  .sd-prose { font: var(--font-reading); color: var(--fg-default); max-width: var(--measure); }
  .sd-prose > * + * { margin-top: 1.1em; }
  .sd-prose :is(h2, h3) { margin-top: var(--space-12); }
  .sd-prose :is(h2, h3) + * { margin-top: var(--space-3); }
  .sd-prose h2 { font: var(--weight-bold) var(--text-2xl) / var(--leading-2xl) var(--font-sans); letter-spacing: var(--tracking-2xl); }
  .sd-prose h3 { font: var(--font-title); letter-spacing: var(--tracking-xl); }
  .sd-prose :is(h2, h3) + h3 { margin-top: var(--space-8); }
  .sd-prose :is(ul, ol) { padding-left: 1.25em; }
  .sd-prose li + li { margin-top: 0.4em; }
  .sd-prose blockquote { font: var(--weight-medium) var(--text-xl) / var(--leading-xl) var(--font-sans); letter-spacing: var(--tracking-xl); padding-left: var(--space-8); }
  .sd-prose figure { margin-block: var(--space-10); }
  .sd-prose figcaption { font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-muted); margin-top: var(--space-2); }

  /* ── Content pages: meta line, breadcrumb, on-page index, steps, disclosure, sources ── */

  /* Meta line — date, status, reading time under a title */
  .sd-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-muted); }

  /* Breadcrumb — "/" separators, current page in default ink */
  .sd-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-muted); }
  .sd-breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
  .sd-breadcrumb li + li::before { content: "/"; color: var(--fg-subtle); }
  .sd-breadcrumb a { color: var(--fg-muted); text-decoration: none; }
  .sd-breadcrumb a:hover { color: var(--fg-default); text-decoration: underline; }
  .sd-breadcrumb [aria-current="page"] { color: var(--fg-default); }

  /* On-page index — opened by an ink rule; current section = 2px accent line at the leading edge */
  .sd-toc { border-top: var(--border-hairline) solid var(--fg-default); padding-top: var(--space-3); }
  .sd-toc__heading { font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-subtle); }
  .sd-toc ol { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); font: var(--font-label); letter-spacing: var(--tracking-sm); }
  .sd-toc a { display: block; padding: var(--space-half) 0 var(--space-half) var(--space-3); margin-left: calc(var(--space-3) * -1); border-left: var(--border-focus) solid transparent; color: var(--fg-muted); text-decoration: none; }
  .sd-toc a:hover { color: var(--fg-default); }
  .sd-toc a[aria-current] { color: var(--fg-default); border-left-color: var(--accent-solid); }
  .sd-toc ol ol { margin: var(--space-1) 0 0 var(--space-3); }

  /* Steps — numbered, ruled; the current step gets a 2px accent line on top */
  .sd-steps { list-style: none; margin: 0; padding: 0; counter-reset: sd-step; border-top: var(--border-hairline) solid var(--border-subtle); }
  .sd-step { counter-increment: sd-step; display: grid; grid-template-columns: var(--space-10) minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-5); border-bottom: var(--border-hairline) solid var(--border-subtle); color: inherit; }
  .sd-step::before { content: counter(sd-step, decimal-leading-zero); font: var(--weight-medium) var(--text-sm) / var(--leading-xl) var(--font-mono); color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
  .sd-step__main { display: grid; gap: var(--space-2); min-width: 0; }
  .sd-step__title { font: var(--font-title); letter-spacing: var(--tracking-xl); color: var(--fg-default); }
  a.sd-step__title { text-decoration: none; }
  a.sd-step__title:hover { text-decoration: underline; }
  .sd-step__body { font: var(--font-body); letter-spacing: var(--tracking-md); color: var(--fg-muted); }
  .sd-step[aria-current="step"] { box-shadow: inset 0 var(--border-focus) 0 var(--accent-solid); }
  .sd-step[aria-current="step"]::before { color: var(--accent-fg); }
  .sd-step[data-state="done"]::before { color: var(--good-fg); }

  /* Disclosure — <details class="sd-disclosure">, ruled rows, chevron turns when open */
  .sd-disclosure { border-block: var(--border-hairline) solid var(--border-subtle); }
  .sd-disclosure + .sd-disclosure { border-top: 0; }
  .sd-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-lg); padding-block: var(--space-2); cursor: pointer; list-style: none; font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-default); }
  .sd-disclosure > summary::-webkit-details-marker { display: none; }
  .sd-disclosure > summary::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--fg-muted); mask: url("../assets/icons/chevron-down.svg") center / contain no-repeat; transition: transform var(--duration) var(--ease); }
  .sd-disclosure[open] > summary::after { transform: rotate(180deg); }
  .sd-disclosure > summary:hover::after { background: var(--fg-default); }
  .sd-disclosure > summary:focus-visible { outline: var(--border-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
  .sd-disclosure__body { padding-bottom: var(--space-5); display: grid; gap: var(--space-3); }

  /* Sources — numbered references at the end of a page; .sd-ref is the superscript link in the text */
  .sd-sources { border-top: var(--border-hairline) solid var(--border-subtle); padding-top: var(--space-4); font: var(--font-caption); letter-spacing: var(--tracking-xs); color: var(--fg-muted); }
  .sd-sources__heading { font: var(--font-label); letter-spacing: var(--tracking-sm); color: var(--fg-default); }
  .sd-sources ol { margin: var(--space-2) 0 0; padding-left: var(--space-6); display: grid; gap: var(--space-1); }
  .sd-sources li { padding-left: var(--space-1); scroll-margin-top: var(--space-6); }
  .sd-sources li:target { background: var(--accent-tint); color: var(--fg-default); }
  .sd-sources a { color: inherit; text-decoration-color: var(--border-default); }
  .sd-sources a:hover { color: var(--fg-default); }
  .sd-ref { font: var(--weight-medium) var(--text-xs) / 0 var(--font-mono); vertical-align: super; }
  .sd-ref a { color: var(--accent-fg); text-decoration: none; }
  .sd-ref a:hover { text-decoration: underline; }
}