/* ============================================================
   Field Guide Shell — shared design system + course UI
   Used by every course page under /guides (each page links this
   file instead of inlining it). Extracted verbatim from the
   per-page <style> block; edit here, not in the pages.
   ============================================================ */
/* ============================================================
   Legal Writing Skills — Color tokens
   Vendored from the LegalWritingSkills.com Design System
   ("Professional Guides" — garnet + gold on warm cream).
   Reference the semantic aliases in components, not raw ramps.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Garnet : the primary brand accent (kept under --crimson-* names) --- */
  --crimson-950: #260f16;
  --crimson-900: #3b1720;
  --crimson-800: #572932; /* deep garnet */
  --crimson-700: #6a2c3a;
  --crimson-600: #782f40; /* PRIMARY garnet */
  --crimson-500: #8f4655;
  --crimson-400: #aa6a77;
  --crimson-300: #c3919b;
  --crimson-200: #debec5;
  --crimson-100: #eedee2;
  --crimson-50: #f8f0f2;
  --crimson-bright: #a6192e; /* brighter secondary red — hover / emphasis pop */

  /* --- Gold : the secondary + decorative accent --- */
  --gold-700: #9a7b3e;
  --gold-600: #b5975a;
  --gold-500: #ceb888; /* primary gold */
  --gold-400: #dfd1a7; /* light gold / sand */
  --gold-300: #e8ddbf;
  --gold-200: #f0e9d5;
  --gold-100: #f7f2e6;
  --gold-bright: #ffc72c; /* highlight gold — small moments only */

  /* --- Cream / paper : page grounds --- */
  --cream-50: #fcf8f0; /* primary page background */
  --cream-100: #f6efdf; /* alternating band / soft surface */
  --cream-200: #eee4ce; /* pressed / inset surface */
  --paper: #fefcf6; /* raised card surface (a touch lighter than page) */

  /* --- Night ink : cool near-black for strong text & dark surfaces --- */
  --ink-night: #101820;

  /* --- Warm neutral ramp : ink → cream, no cold grays --- */
  --warm-950: #1b1712;
  --warm-900: #2a231c;
  --warm-800: #3c3329;
  --warm-700: #52463a;
  --warm-600: #6b5d4e;
  --warm-500: #897a68;
  --warm-400: #a99a86;
  --warm-300: #c8bba5;
  --warm-200: #e2d7c2;
  --warm-100: #f0e9d9;
  --warm-50: #f9f4ea;

  /* --- Semantic hues : muted, editorial, never neon --- */
  --info-700: #244c6e; /* slate blue — "Note" */
  --info-600: #2c5a82;
  --info-100: #dce7f0;
  --info-50: #eef3f8;

  --success-700: #245840;
  --success-600: #2f6a4f;
  --success-100: #dbebe0;
  --success-50: #edf5ef;

  --caution-700: #935e17;
  --caution-600: #b5761f; /* amber — "Caution" */
  --caution-100: #f6e9cf;
  --caution-50: #fbf3e2;

  --danger-700: var(--crimson-700);
  --danger-600: var(--crimson-bright);
  --danger-100: var(--crimson-100);

  /* ============================================================
     Semantic aliases — reference THESE in components, not raw ramps
     ============================================================ */

  /* Surfaces */
  --color-bg: var(--cream-50);
  --color-bg-alt: var(--cream-100);
  --color-surface: var(--paper);
  --color-surface-sunk: var(--cream-200);
  --color-surface-ink: var(--ink-night); /* dark surface (code, footers) */

  /* Text */
  --text-strong: var(--ink-night);
  --text-body: var(--warm-800);
  --text-muted: var(--warm-600);
  --text-faint: var(--warm-500);
  --text-on-crimson: var(--cream-50);
  --text-on-ink: var(--cream-100);

  /* Accent — garnet primary, red pop on hover, garnet-deep on press */
  --accent: var(--crimson-600);
  --accent-hover: var(--crimson-bright);
  --accent-active: var(--crimson-800);
  --accent-soft: var(--crimson-100);
  --accent-tint: var(--crimson-50);
  --link: var(--crimson-700);
  --link-hover: var(--crimson-bright);

  /* Gold — secondary + decorative */
  --gold: var(--gold-500);
  --gold-line: var(--gold-400); /* hairline / keyline rules */
  --gold-soft: var(--gold-200);
  --gold-deep: var(--gold-700); /* gold text on cream (large only) */
  --highlight: var(--gold-bright);

  /* Borders & rules */
  --border-subtle: var(--warm-200);
  --border-default: var(--warm-300);
  --border-strong: var(--warm-400);
  --rule: var(--warm-200);

  /* Focus */
  --focus-ring: var(--crimson-500);
}

/* ============================================================
   Legal Writing Skills — Typography tokens
   Vendored from the LegalWritingSkills.com Design System.
   A three-voice system:
     serif  → display & long-form body (reads like a book)
     sans   → UI chrome, labels, eyebrows, captions
     mono   → code, keys, identifiers, data
   ============================================================ */

:root {
  /* Families */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale (px). Long-form reading sits at --text-body-lg (18/19). */
  --text-2xs: 0.75rem; /* 12px  — micro labels, table meta */
  --text-xs: 0.8125rem; /* 13px  — eyebrows, captions */
  --text-sm: 0.875rem; /* 14px  — UI, secondary */
  --text-base: 1rem; /* 16px  — default UI text */
  --text-body: 1.0625rem; /* 17px  — body copy */
  --text-body-lg: 1.1875rem; /* 19px  — article reading size */
  --text-lg: 1.25rem; /* 20px */
  --text-xl: 1.5rem; /* 24px  — h3 */
  --text-2xl: 1.9375rem; /* 31px  — h2 */
  --text-3xl: 2.5rem; /* 40px  — h1 */
  --text-4xl: 3.25rem; /* 52px  — page/guide title */
  --text-5xl: 4.25rem; /* 68px  — hero / cover */

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-heading: 1.15;
  --leading-normal: 1.5;
  --leading-body: 1.68; /* generous, book-like reading */
  --leading-loose: 1.8;

  /* Letter spacing */
  --tracking-tighter: -0.02em; /* large display headings */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.14em; /* uppercase section labels */

  /* Reading measure */
  --measure: 68ch;
  --measure-wide: 74ch;
  --measure-narrow: 54ch;
}

/* ============================================================
   Legal Writing Skills — Spacing, radii & layout tokens
   Vendored from the LegalWritingSkills.com Design System.
   4px base grid. Radii stay modest — paper, not pills.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem; /* 4  */
  --space-2: 0.5rem; /* 8  */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 2.5rem; /* 40 */
  --space-8: 3rem; /* 48 */
  --space-10: 4rem; /* 64 */
  --space-12: 5rem; /* 80 */
  --space-16: 8rem; /* 128 */

  /* Radii — editorial, restrained */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 11px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-accent: 3px; /* crimson rule under eyebrows / active tabs */

  /* Container widths */
  --container-prose: 44rem; /* single-column reading */
  --container-doc: 72rem; /* article + rail */
  --container-wide: 80rem; /* library / marketing */
  --gutter: var(--space-6);
}

/* ============================================================
   Legal Writing Skills — Elevation & motion tokens
   Vendored from the LegalWritingSkills.com Design System.
   Shadows are warm-tinted and low; the brand favours a 1px warm
   border over a heavy drop shadow. Motion is quick and quiet.
   ============================================================ */

:root {
  /* Shadows — warm ink, low opacity */
  --shadow-xs: 0 1px 1px rgba(30, 23, 18, 0.05);
  --shadow-sm: 0 1px 2px rgba(30, 23, 18, 0.06), 0 1px 1px rgba(30, 23, 18, 0.04);
  --shadow-md: 0 2px 6px rgba(30, 23, 18, 0.07), 0 1px 2px rgba(30, 23, 18, 0.05);
  --shadow-lg: 0 10px 28px rgba(30, 23, 18, 0.1), 0 2px 6px rgba(30, 23, 18, 0.06);
  --shadow-xl: 0 22px 48px rgba(30, 23, 18, 0.14), 0 4px 10px rgba(30, 23, 18, 0.07);

  /* Focus ring (composed) */
  --ring: 0 0 0 3px rgba(120, 47, 64, 0.3);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   DARK MODE — warm near-black variant of the Field Guide palette
   ------------------------------------------------------------
   Light is the default (everything above). Dark applies in two
   ways with identical values:
     1. OS preference:  @media (prefers-color-scheme: dark),
        scoped to :root:not([data-theme="light"]) so an explicit
        light choice beats a dark OS.
     2. Explicit choice: :root[data-theme="dark"], unconditionally.
   The data-theme attribute is set before first paint by a tiny
   inline snippet (generated:meta block on course pages, inline on
   the hub) from localStorage "guides.theme"; the toggle lives in
   the course sidebar (js/guide-shell.js) and the hub nav.

   Course figures reference RAW ramp tokens directly (--paper,
   --cream-100, --warm-*, --ink-night, --gold-600, --danger-600,
   --accent…), so the raw ramps are remapped here — then the few
   aliases that must NOT follow their ramp are re-pinned below
   (code-block surfaces stay near-black, their text stays light).
   All pairs verified WCAG AA: body text >= 4.5:1 against its
   surface, muted/faint and graphical strokes >= 3:1.

   NOTE: the two blocks below must stay IDENTICAL — edit both.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* --- Garnet ramp, lightened for a dark ground --- */
    --crimson-950: #f8f0f2;
    --crimson-900: #eedee2;
    --crimson-800: #9a4a5c; /* pressed */
    --crimson-700: #c98a99; /* link : 6.9:1 on bg */
    --crimson-600: #c1687b; /* PRIMARY accent : 5.0:1 on bg, 5.0:1 under near-black button text */
    --crimson-500: #cd8496; /* focus ring : 6.6:1 on bg */
    --crimson-400: #8f4655;
    --crimson-300: #6a2c3a;
    --crimson-200: #4a2530;
    --crimson-100: #3a2129; /* accent-soft surface */
    --crimson-50: #261619; /* accent-tint surface */
    --crimson-bright: #d0798c; /* hover pop / danger-600 : 6.2:1 on bg */

    /* --- Gold ramp --- */
    --gold-700: #d9bc82; /* gold text on dark : 10.4:1 */
    --gold-600: #c4a468; /* figure accents / progress fills : 7.4:1 on paper */
    --gold-500: #bb9c60;
    --gold-400: #4a3e2a; /* hairlines */
    --gold-300: #3a3222;
    --gold-200: #2a2416; /* soft gold surface */
    --gold-100: #241f14;
    /* --gold-bright unchanged — highlight moments only */

    /* --- Cream / paper grounds -> warm near-blacks --- */
    --cream-50: #131009; /* page (also text-on-crimson: near-black on the lightened garnet) */
    --cream-100: #1a150e; /* alternating band / sidebar */
    --cream-200: #0e0b07; /* pressed / inset */
    --paper: #1e1913; /* raised card */

    /* --- Night ink flips to cream: it is the figures' text color --- */
    --ink-night: #f4eee1;

    /* --- Warm neutral ramp, inverted --- */
    --warm-950: #f9f4ea;
    --warm-900: #f0e9d9;
    --warm-800: #ddd3c1; /* body : 12.8:1 on bg */
    --warm-700: #cbbfa9;
    --warm-600: #a4967f; /* muted : 6.6:1 on bg */
    --warm-500: #857763; /* faint : 4.4:1 on bg */
    --warm-400: #7a6b58; /* strokes : 3.4:1 on paper */
    --warm-300: #4c4236;
    --warm-200: #332c23;
    --warm-100: #241e16;
    --warm-50: #1a150e;

    /* --- Semantic hues, lightened ~2 steps on dark tinted surfaces --- */
    --info-700: #93bcda; /* 8.3:1 on info-50 */
    --info-600: #7aa9cf;
    --info-100: #1d2a36;
    --info-50: #161f28;

    --success-700: #8cc3a5; /* 8.3:1 on success-50 */
    --success-600: #6fae8c;
    --success-100: #1b2b22;
    --success-50: #14211a;

    --caution-700: #ddab63; /* 8.1:1 on caution-50 */
    --caution-600: #cf9440;
    --caution-100: #2e2414;
    --caution-50: #241c10;

    /* danger-* aliases follow the remapped crimson ramp */

    /* --- Aliases re-pinned: must NOT follow their remapped ramp --- */
    --color-surface-ink: #0a0806; /* code blocks stay near-black (ink-night is now light) */
    --text-on-ink: #e6dcc8; /* …and their text stays light : 14.7:1 */

    /* --- Focus ring, lightened garnet --- */
    --ring: 0 0 0 3px rgba(193, 104, 123, 0.35);
  }
  /* Selection: garnet ground, cream text (gold-soft is a surface now) */
  :root:not([data-theme="light"]) ::selection {
    background: #7a3444;
    color: #f4eee1;
  }
  /* Near-black chrome needs an edge against the near-black page */
  :root:not([data-theme="light"]) pre {
    border: var(--border-hair) solid var(--warm-200);
  }
  :root:not([data-theme="light"]) .toast {
    border: var(--border-hair) solid var(--warm-300);
  }
}

/* Explicit dark choice — identical values to the media block above. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* --- Garnet ramp, lightened for a dark ground --- */
  --crimson-950: #f8f0f2;
  --crimson-900: #eedee2;
  --crimson-800: #9a4a5c; /* pressed */
  --crimson-700: #c98a99; /* link : 6.9:1 on bg */
  --crimson-600: #c1687b; /* PRIMARY accent : 5.0:1 on bg, 5.0:1 under near-black button text */
  --crimson-500: #cd8496; /* focus ring : 6.6:1 on bg */
  --crimson-400: #8f4655;
  --crimson-300: #6a2c3a;
  --crimson-200: #4a2530;
  --crimson-100: #3a2129; /* accent-soft surface */
  --crimson-50: #261619; /* accent-tint surface */
  --crimson-bright: #d0798c; /* hover pop / danger-600 : 6.2:1 on bg */

  /* --- Gold ramp --- */
  --gold-700: #d9bc82; /* gold text on dark : 10.4:1 */
  --gold-600: #c4a468; /* figure accents / progress fills : 7.4:1 on paper */
  --gold-500: #bb9c60;
  --gold-400: #4a3e2a; /* hairlines */
  --gold-300: #3a3222;
  --gold-200: #2a2416; /* soft gold surface */
  --gold-100: #241f14;
  /* --gold-bright unchanged — highlight moments only */

  /* --- Cream / paper grounds -> warm near-blacks --- */
  --cream-50: #131009; /* page (also text-on-crimson: near-black on the lightened garnet) */
  --cream-100: #1a150e; /* alternating band / sidebar */
  --cream-200: #0e0b07; /* pressed / inset */
  --paper: #1e1913; /* raised card */

  /* --- Night ink flips to cream: it is the figures' text color --- */
  --ink-night: #f4eee1;

  /* --- Warm neutral ramp, inverted --- */
  --warm-950: #f9f4ea;
  --warm-900: #f0e9d9;
  --warm-800: #ddd3c1; /* body : 12.8:1 on bg */
  --warm-700: #cbbfa9;
  --warm-600: #a4967f; /* muted : 6.6:1 on bg */
  --warm-500: #857763; /* faint : 4.4:1 on bg */
  --warm-400: #7a6b58; /* strokes : 3.4:1 on paper */
  --warm-300: #4c4236;
  --warm-200: #332c23;
  --warm-100: #241e16;
  --warm-50: #1a150e;

  /* --- Semantic hues, lightened ~2 steps on dark tinted surfaces --- */
  --info-700: #93bcda; /* 8.3:1 on info-50 */
  --info-600: #7aa9cf;
  --info-100: #1d2a36;
  --info-50: #161f28;

  --success-700: #8cc3a5; /* 8.3:1 on success-50 */
  --success-600: #6fae8c;
  --success-100: #1b2b22;
  --success-50: #14211a;

  --caution-700: #ddab63; /* 8.1:1 on caution-50 */
  --caution-600: #cf9440;
  --caution-100: #2e2414;
  --caution-50: #241c10;

  /* danger-* aliases follow the remapped crimson ramp */

  /* --- Aliases re-pinned: must NOT follow their remapped ramp --- */
  --color-surface-ink: #0a0806; /* code blocks stay near-black (ink-night is now light) */
  --text-on-ink: #e6dcc8; /* …and their text stays light : 14.7:1 */

  /* --- Focus ring, lightened garnet --- */
  --ring: 0 0 0 3px rgba(193, 104, 123, 0.35);
}
/* Selection: garnet ground, cream text (gold-soft is a surface now) */
:root[data-theme="dark"] ::selection {
  background: #7a3444;
  color: #f4eee1;
}
/* Near-black chrome needs an edge against the near-black page */
:root[data-theme="dark"] pre {
  border: var(--border-hair) solid var(--warm-200);
}
:root[data-theme="dark"] .toast {
  border: var(--border-hair) solid var(--warm-300);
}

/* ============================================================
   Field Guide Shell — course components
   Built entirely on the Legal Writing Skills design tokens
   (shell/tokens/*.css). Garnet + gold on warm cream; Source
   Serif 4 / IBM Plex Sans / IBM Plex Mono. No raw hex in
   components — semantic aliases only.
   ============================================================ */

:root{--guide-text-body:var(--warm-800,#3c3329)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--color-bg);
  color:var(--guide-text-body);
  font-family:var(--font-serif);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-soft);color:var(--text-strong)}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--link-hover)}
b,strong{color:var(--text-strong);font-weight:var(--weight-semibold)}
em{font-style:italic}
button{font:inherit;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm)}

/* ---------- layout ---------- */
#shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
#side{
  border-right:var(--border-hair) solid var(--border-subtle);
  background:var(--color-bg-alt);
  padding:var(--space-6) var(--space-5);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  font-family:var(--font-sans);
}
#main{min-width:0}
.page{max-width:var(--container-prose);margin:0 auto;padding:var(--space-10) var(--space-6) var(--space-12)}
@media (max-width:920px){
  #shell{grid-template-columns:1fr}
  #side{position:static;height:auto;border-right:0;border-bottom:var(--border-hair) solid var(--border-subtle)}
  .page{padding:var(--space-7) var(--space-5) var(--space-10)}
}

/* ---------- sidebar ---------- */
.brand{
  font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  color:var(--text-strong);line-height:var(--leading-snug);cursor:pointer;
}
.brand em{color:var(--accent);font-style:italic}
.brand-sub{margin-top:var(--space-2);font-size:var(--text-2xs);color:var(--text-muted);line-height:var(--leading-normal)}
.rule{border:0;border-top:var(--border-hair) solid var(--border-subtle);margin:var(--space-5) 0}
.side-label{
  font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--space-2);
}
.snav{list-style:none}
.snav a{
  display:flex;align-items:baseline;gap:var(--space-2);
  padding:5px var(--space-2);margin:0 calc(-1 * var(--space-2));
  border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--guide-text-body);
  transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.snav a:hover{background:var(--color-surface);color:var(--text-strong)}
.snav a.on{background:var(--accent-tint);color:var(--accent);font-weight:var(--weight-medium)}
.nv-num{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint);min-width:1.7em}
.snav a.on .nv-num{color:var(--accent)}
.nv-dot{margin-left:auto;font-size:10px;color:var(--text-faint)}
.nv-dot.done{color:var(--success-600)}
.nv-dot.part{color:var(--gold-deep)}
.nv-dot.due{color:var(--accent)}
.side-meta{font-size:var(--text-2xs);color:var(--text-muted);line-height:var(--leading-loose)}
.side-meta b{color:var(--text-strong)}

/* ---------- typographic voices ---------- */
.kicker{
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);
}
.kicker::before{
  content:"";display:inline-block;width:22px;height:3px;background:var(--accent);
  margin-right:var(--space-3);vertical-align:middle;
}
.sep{color:var(--gold-deep);margin:0 2px}
.display{
  font-family:var(--font-serif);font-size:var(--text-3xl);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-tighter);font-weight:var(--weight-semibold);color:var(--text-strong);
  margin:var(--space-3) 0 var(--space-4);
}
.display em{color:var(--accent);font-style:italic}
.lede{
  font-size:var(--text-body-lg);color:var(--text-muted);line-height:var(--leading-body);
  max-width:var(--measure-narrow);margin-bottom:var(--space-4);
}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:var(--space-4)}
.prose ul,.prose ol{margin:0 0 var(--space-4) 1.3em}
.prose li{margin-bottom:var(--space-2)}
.prose h3{
  font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  color:var(--text-strong);margin:var(--space-5) 0 var(--space-3);
}
.term{
  font-weight:var(--weight-semibold);color:var(--text-strong);
  border-bottom:2px solid var(--gold-line);
}
.divider{
  display:flex;align-items:center;gap:var(--space-4);margin:var(--space-8) 0 var(--space-6);
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-deep);
}
.divider::before,.divider::after{content:"";flex:1;border-top:var(--border-hair) solid var(--gold-line)}
.footer-note{
  margin-top:var(--space-10);padding-top:var(--space-5);
  border-top:var(--border-hair) solid var(--border-subtle);
  font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-faint);
  max-width:var(--measure-narrow);line-height:var(--leading-normal);
}

/* ---------- code & data ---------- */
code{
  font-family:var(--font-mono);font-size:0.86em;
  background:var(--color-surface-sunk);color:var(--text-strong);
  padding:1px 5px;border-radius:var(--radius-xs);
}
pre{
  background:var(--color-surface-ink);color:var(--text-on-ink);
  font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6;
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  overflow-x:auto;margin:0 0 var(--space-4);
}
pre code{background:none;color:inherit;padding:0;font-size:inherit}
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:var(--text-sm);margin:0 0 var(--space-4)}
.tbl th{
  text-align:left;font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-muted);font-weight:var(--weight-semibold);
  padding:var(--space-2) var(--space-3);border-bottom:var(--border-thin) solid var(--border-default);
}
.tbl td{padding:var(--space-3);border-bottom:var(--border-hair) solid var(--border-subtle);vertical-align:top;color:var(--guide-text-body)}
.tbl tr:hover td{background:var(--color-surface)}

/* ---------- callouts ---------- */
.callout{
  border:var(--border-hair) solid var(--border-subtle);
  border-left:var(--border-accent) solid var(--border-default);
  background:var(--color-surface);border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5);margin:var(--space-5) 0;
  font-size:var(--text-base);
}
.callout p{margin:0}
.callout p + p{margin-top:var(--space-3)}
.co-label{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
  margin-bottom:var(--space-2);
}
.callout.note{border-left-color:var(--info-600);background:var(--info-50)}
.callout.note .co-label{color:var(--info-700)}
.callout.caution{border-left-color:var(--caution-600);background:var(--caution-50)}
.callout.caution .co-label{color:var(--caution-700)}
.callout.key{border-left-color:var(--accent);background:var(--accent-tint)}
.callout.key .co-label{color:var(--accent)}
.callout.example{border-left-color:var(--success-600);background:var(--success-50)}
.callout.example .co-label{color:var(--success-700)}
.callout.xover{border-left-color:var(--gold-600);background:var(--gold-100)}
.callout.xover .co-label{color:var(--gold-deep)}
.callout.mislead{border-left-color:var(--success-600);background:var(--success-50)}
.callout.mislead .co-label{color:var(--success-700)}
.callout.casefile{border-left-color:var(--accent);background:var(--accent-tint)}
.callout.casefile .co-label{color:var(--accent)}

/* ---------- figures / diagrams ---------- */
.figure{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-6) 0;
  box-shadow:var(--shadow-xs);
}
.figure svg{display:block;max-width:100%;height:auto;margin:0 auto}
.figcap{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:var(--border-hair) solid var(--gold-line);
  font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted);line-height:var(--leading-normal);
}
.figcap b{color:var(--text-strong);font-weight:var(--weight-semibold)}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-block;background:var(--accent);color:var(--text-on-crimson);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);
  padding:10px 18px;border:var(--border-hair) solid var(--accent);border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-crimson)}
.btn:active{background:var(--accent-active);transform:translateY(0.5px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--border-default)}
.btn.ghost:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.btn.small{padding:6px 12px;font-size:var(--text-xs)}
.chip{
  display:inline-block;font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-medium);
  color:var(--text-muted);background:var(--color-surface);
  border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-pill);
  padding:3px 10px;margin-right:var(--space-2);
}

/* ---------- home ---------- */
.hero-stats{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-6)}
.stat{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);min-width:132px;
  box-shadow:var(--shadow-xs);
}
.stat .v{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--text-strong);line-height:var(--leading-tight)}
.stat .v small{font-size:var(--text-base);color:var(--text-muted)}
.stat .k{font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-muted);margin-top:var(--space-1)}
.stat.alert{border-color:var(--gold-600)}
.stat.alert .v{color:var(--accent)}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-2)}
@media (max-width:700px){.home-grid{grid-template-columns:1fr}}

/* ---------- course-complete: "where next" bridge ---------- */
.next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-2)}
@media (max-width:900px){.next-grid{grid-template-columns:1fr}}
.next-card{
  display:flex;flex-direction:column;gap:var(--space-2);
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);position:relative;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.next-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.next-card:hover h3{color:var(--accent)}
.nx-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gold-deep)}
.next-card h3{
  font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  color:var(--text-strong);transition:color var(--dur-fast) var(--ease-standard);
}
.next-card p{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);flex:1 1 auto}
.nx-go{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);
}
.mod-card{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);cursor:pointer;position:relative;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}
.mod-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.mod-card:hover h3{color:var(--accent)}
.mc-num{
  position:absolute;top:var(--space-4);right:var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gold-deep);
}
.mc-kick{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-faint);
  margin-bottom:var(--space-2);
}
.mod-card h3{
  font-family:var(--font-serif);font-size:var(--text-lg);font-weight:var(--weight-semibold);
  color:var(--text-strong);margin-bottom:var(--space-2);
  transition:color var(--dur-fast) var(--ease-standard);
}
.mc-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin-bottom:var(--space-4)}
.pbar{height:4px;background:var(--color-surface-sunk);border-radius:var(--radius-pill);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--gold-600);transition:width var(--dur-slow) var(--ease-out)}
.pbar.full i{background:var(--success-600)}
.mc-foot{
  display:flex;justify-content:space-between;margin-top:var(--space-2);
  font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--text-faint);
}

/* ---------- diagnostic ---------- */
.dom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.dom{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-4);cursor:pointer;position:relative;
  font-family:var(--font-sans);
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.dom:hover{border-color:var(--border-strong)}
.dom.sel{border-color:var(--accent);background:var(--accent-tint)}
.d-tick{position:absolute;top:var(--space-3);right:var(--space-4);color:var(--accent);opacity:0;transition:opacity var(--dur-fast)}
.dom.sel .d-tick{opacity:1}
.d-name{font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--text-strong)}
.d-sub{font-size:var(--text-2xs);color:var(--text-muted);margin-top:2px}
.stmt{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-3);
}
.s-comp{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--space-1);
}
.s-text{font-size:var(--text-base);color:var(--text-strong);margin-bottom:var(--space-3)}
.scale{display:flex;gap:var(--space-2);flex-wrap:wrap}
.scale button{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-medium);
  color:var(--text-muted);background:transparent;
  border:var(--border-hair) solid var(--border-default);border-radius:var(--radius-pill);
  padding:5px 12px;transition:all var(--dur-fast) var(--ease-standard);
}
.scale button:hover{border-color:var(--accent);color:var(--accent)}
.scale button.sel{background:var(--accent);border-color:var(--accent);color:var(--text-on-crimson)}
.prof{margin:var(--space-4) 0}
.prow{display:grid;grid-template-columns:200px 1fr 44px;gap:var(--space-4);align-items:center;padding:var(--space-3) 0;border-bottom:var(--border-hair) solid var(--border-subtle)}
.prow .pl{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong)}
.prow .pl small{display:block;font-weight:var(--weight-regular);color:var(--text-faint);font-size:var(--text-2xs)}
.ptrack{height:6px;background:var(--color-surface-sunk);border-radius:var(--radius-pill);overflow:hidden}
.ptrack i{display:block;height:100%;background:var(--gold-600)}
.prow .pv{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);text-align:right}
@media (max-width:700px){.prow{grid-template-columns:1fr 44px}.ptrack{grid-column:1 / -1}}

/* ---------- module ---------- */
.mod-head{position:relative;margin-bottom:var(--space-6)}
.big-num{
  position:absolute;top:-34px;right:0;
  font-family:var(--font-serif);font-size:var(--text-5xl);font-weight:var(--weight-bold);
  color:var(--gold-soft);line-height:1;user-select:none;z-index:-1;
}
.mod-meta{margin-top:var(--space-4)}
.msec{margin-bottom:var(--space-6)}
.sec-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--gold-deep)}
h2.sec{
  font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);color:var(--text-strong);
  margin:var(--space-1) 0 var(--space-4);
}
.msec-foot{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-5)}
.readtick{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--success-600);font-weight:var(--weight-medium)}
.objectives{
  background:var(--color-bg-alt);border:var(--border-hair) solid var(--gold-line);
  border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin:0 0 var(--space-6);
  font-family:var(--font-sans);font-size:var(--text-sm);
}
.objectives ul{margin:var(--space-2) 0 0 1.2em}
.objectives li{margin-bottom:var(--space-1);color:var(--guide-text-body)}

/* ---------- quiz ---------- */
.qq{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4);
  box-shadow:var(--shadow-xs);
}
.q-num{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-faint);
}
.q-text{font-size:var(--text-body);color:var(--text-strong);font-weight:var(--weight-medium);margin:var(--space-2) 0 var(--space-4)}
.opt{
  display:flex;gap:var(--space-2);align-items:baseline;width:100%;text-align:left;
  background:var(--color-bg);border:var(--border-hair) solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--guide-text-body);line-height:var(--leading-normal);
  transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);
}
.opt:hover{border-color:var(--accent);background:var(--accent-tint)}
.opt[disabled]{cursor:default}
.opt .ol{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-faint);min-width:1.4em}
.opt.right{border-color:var(--success-600);background:var(--success-50);color:var(--text-strong)}
.opt.right .ol{color:var(--success-700)}
.opt.wrong{border-color:var(--danger-600);background:var(--crimson-50)}
.opt.wrong .ol{color:var(--danger-600)}
.opt.dim{opacity:.5}
.q-why{
  border-left:var(--border-accent) solid var(--gold-600);background:var(--gold-100);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-top:var(--space-3);
  font-size:var(--text-sm);line-height:var(--leading-normal);
  animation:fadein var(--dur-slow) var(--ease-out);
}
.q-why b{display:block;font-family:var(--font-sans);font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--space-1)}
.q-score{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-strong)}

/* ---------- worksheet ---------- */
.wsq{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-5);
  box-shadow:var(--shadow-xs);
}
.w-prompt{font-size:var(--text-body);font-weight:var(--weight-medium);color:var(--text-strong);margin-bottom:var(--space-2)}
.w-hint{font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3);line-height:var(--leading-normal)}
.wsq textarea{
  width:100%;min-height:130px;resize:vertical;
  font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--guide-text-body);
  background:var(--color-bg);border:var(--border-hair) solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
}
.wsq textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.w-saved{font-family:var(--font-sans);font-size:var(--text-2xs);color:var(--success-600);min-height:1.4em;margin:var(--space-1) 0 var(--space-2)}
.model{margin-top:var(--space-4);border-top:var(--border-hair) solid var(--gold-line);padding-top:var(--space-4)}
.m-body{font-size:var(--text-sm);line-height:var(--leading-normal)}
.m-body p{margin-bottom:var(--space-3)}
.m-ex{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-3);
  white-space:pre-line;font-style:italic;line-height:var(--leading-normal);
}
.rub{margin-top:var(--space-4);background:var(--color-bg-alt);border-radius:var(--radius-md);padding:var(--space-4)}
.rubitem{
  display:flex;gap:var(--space-2);align-items:baseline;
  font-family:var(--font-sans);font-size:var(--text-sm);color:var(--guide-text-body);
  padding:var(--space-1) 0;cursor:pointer;
}
.rubitem input{accent-color:var(--accent)}

/* ---------- review ---------- */
.card{
  background:var(--color-surface);border:var(--border-hair) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-xs);
}
.rev-card{max-width:620px}
.r-type{
  font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-deep);margin-bottom:var(--space-3);
}
.r-q{font-size:var(--text-lg);color:var(--text-strong);font-weight:var(--weight-medium);margin-bottom:var(--space-4);line-height:var(--leading-snug)}
.rev-ans{margin-top:var(--space-4);animation:fadein var(--dur-slow) var(--ease-out)}
.rev-acts{display:flex;gap:var(--space-3);margin-top:var(--space-4)}

/* ---------- glossary ---------- */
.fw-row{
  display:grid;grid-template-columns:180px 1fr auto;gap:var(--space-4);align-items:baseline;
  padding:var(--space-3) 0;border-bottom:var(--border-hair) solid var(--border-subtle);
}
.f-name{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-strong)}
.f-desc{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal)}
.fw-row a{font-family:var(--font-sans);font-size:var(--text-2xs);white-space:nowrap}
@media (max-width:700px){.fw-row{grid-template-columns:1fr}}

/* ---------- motion ---------- */
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:riseIn .5s var(--ease-out) both}
.rise.d1{animation-delay:.06s}
.rise.d2{animation-delay:.12s}
.rise.d3{animation-delay:.18s}
.rise.d4{animation-delay:.24s}
.rise.d5{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .rise,.q-why,.rev-ans{animation:none}
}
.toast{
  position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);
  background:var(--color-surface-ink);color:var(--text-on-ink);
  font-family:var(--font-sans);font-size:var(--text-sm);
  padding:10px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  animation:fadein var(--dur-base) var(--ease-out);z-index:50;
}

/* ---------- theme toggle (sidebar footer) ---------- */
.theme-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);
  color:var(--text-muted);background:transparent;
  border:var(--border-hair) solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:5px 11px;
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.theme-btn:hover{color:var(--accent);border-color:var(--border-default)}


/* ---------- static reader (no-JS / crawler edition) ----------
   Generated by tools/gen-guide-artifacts.mjs into each course page as
   #reader; guide-shell.js hides it on boot and hydrates the app from the
   same nodes. Content inside .reader-intro/.reader-body carries the
   global prose/callout/figure/table classes, so it styles itself. */
#reader[hidden]{display:none}
.reader{max-width:46rem;margin:0 auto;padding:var(--space-10) var(--space-6) var(--space-12)}
.reader-head{margin-bottom:var(--space-8)}
.reader-eyebrow{
  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--space-3);
}
.reader h1{
  font-family:var(--font-serif);font-size:var(--text-3xl);line-height:var(--leading-heading);
  letter-spacing:var(--tracking-tighter);font-weight:var(--weight-semibold);color:var(--text-strong);
  margin:0 0 var(--space-3);
}
.reader-sub{font-size:var(--text-body-lg);color:var(--text-muted);margin-bottom:var(--space-4)}
.reader-lede{
  font-size:var(--text-body-lg);color:var(--text-muted);line-height:var(--leading-body);
  max-width:var(--measure-narrow);
}
.reader-mod{margin-top:var(--space-10)}
.reader-mod h2{
  font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);color:var(--text-strong);
  border-top:var(--border-hair) solid var(--gold-line);
  padding-top:var(--space-6);margin-bottom:var(--space-4);
}
.reader-modnum{
  display:block;font-family:var(--font-sans);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:var(--space-2);
}
.reader-intro{font-size:var(--text-body-lg);margin-bottom:var(--space-6)}
.reader-sec h3{
  font-family:var(--font-serif);font-size:var(--text-xl);font-weight:var(--weight-semibold);
  color:var(--text-strong);margin:var(--space-6) 0 var(--space-3);
}
.reader-gloss{margin-top:var(--space-4)}
.reader-gloss dt{
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text-strong);margin-top:var(--space-3);
}
.reader-gloss dd{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin:0}
.reader-note{
  margin-top:var(--space-10);padding-top:var(--space-5);
  border-top:var(--border-hair) solid var(--border-subtle);
  font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-faint);
  line-height:var(--leading-normal);
}

/* ============================================================
   PRINT — the reader edition, black on white
   ------------------------------------------------------------
   Print the static #reader (complete course text), not the app:
   #shell and all runtime chrome are hidden, #reader is unhidden
   even after the runtime set [hidden] on it. Tokens are forced to
   a grayscale "light" set regardless of theme — the selectors
   below repeat the dark-mode selectors at equal-or-higher
   specificity, and this block comes last, so it wins over both
   the media-query dark and the explicit data-theme dark.
   ============================================================ */
@media print{
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"]{
    color-scheme:light;
    /* grounds */
    --cream-50:#ffffff;--cream-100:#ffffff;--cream-200:#f2f0ea;--paper:#ffffff;
    --color-bg:#ffffff;--color-bg-alt:#ffffff;--color-surface:#ffffff;--color-surface-sunk:#f2f0ea;
    --color-surface-ink:#ffffff;--text-on-ink:#000000;
    /* ink */
    --ink-night:#000000;
    --warm-950:#000000;--warm-900:#111111;--warm-800:#1a1a1a;--warm-700:#222222;
    --warm-600:#3d3d3d;--warm-500:#555555;--warm-400:#777777;--warm-300:#999999;
    --warm-200:#cccccc;--warm-100:#eeeeee;--warm-50:#f6f6f6;
    --text-strong:#000000;--text-on-crimson:#ffffff;
    /* accents flatten to grays (figures reference these raw) */
    --crimson-950:#111111;--crimson-900:#1a1a1a;--crimson-800:#222222;--crimson-700:#2a2a2a;
    --crimson-600:#333333;--crimson-500:#555555;--crimson-400:#777777;--crimson-300:#aaaaaa;
    --crimson-200:#cccccc;--crimson-100:#e8e8e8;--crimson-50:#f4f4f4;--crimson-bright:#333333;
    --gold-700:#444444;--gold-600:#666666;--gold-500:#888888;--gold-400:#bbbbbb;
    --gold-300:#d5d5d5;--gold-200:#e8e8e8;--gold-100:#f4f4f4;--gold-bright:#999999;
    --info-700:#333333;--info-600:#555555;--info-100:#e8e8e8;--info-50:#f6f6f6;
    --success-700:#333333;--success-600:#555555;--success-100:#e8e8e8;--success-50:#f6f6f6;
    --caution-700:#333333;--caution-600:#555555;--caution-100:#e8e8e8;--caution-50:#f6f6f6;
    --shadow-xs:none;--shadow-sm:none;--shadow-md:none;--shadow-lg:none;--shadow-xl:none;
    --ring:none;
  }

  @page{margin:18mm 16mm}

  /* the app never prints; the reader always does */
  #shell,.toast,#storage-warn,.theme-btn{display:none !important}
  #reader[hidden]{display:block}

  html,body{background:#ffffff}
  body{
    color:#000000;
    font-family:var(--font-serif);
    font-size:11pt;line-height:1.55;
    -webkit-print-color-adjust:economy;print-color-adjust:economy;
  }
  a{color:#000000;text-decoration:underline}

  .reader{max-width:100%;margin:0;padding:0}
  .reader-head{margin-bottom:2em}
  .reader h1{break-after:avoid}
  .reader-mod h2{break-after:avoid;border-top:1px solid #999999}
  .reader-sec h3{break-after:avoid}
  .reader-sec h3 + p{break-before:avoid}
  .figure,.callout{break-inside:avoid;page-break-inside:avoid}
  .figure{box-shadow:none;border:1px solid #999999;max-width:100%}
  .figure svg{max-width:100% !important;height:auto}
  pre{
    background:#ffffff;color:#000000;border:1px solid #999999;
    white-space:pre-wrap;word-break:break-word;break-inside:avoid;
  }
  code{background:none;color:#000000}
  .tbl tr{break-inside:avoid}

  /* glossary: a clean definition list */
  .reader-gloss dt{break-after:avoid;margin-top:.6em}
  .reader-gloss dd{break-inside:avoid;color:#333333}
  .reader-note{border-top:1px solid #cccccc;color:#555555}
}