/* =============================================================
 * TMB curriculum site — design system
 *
 * Discipline:
 *   • One chromatic accent: --color-primary (the user's --hue).
 *   • Neutrals are warm & hue-INdependent: warm cream canvas + ink-with-blue
 *     text. This stays harmonious regardless of which hue the user picks.
 *   • Triadic/analogous tokens are defined for opt-in but NEVER used in the
 *     default UI — auto-derived triadic clashes with most user hues
 *     (fuchsia 320 → olive 80 is the worst case but most pairings are bad).
 *   • Two-tier color hierarchy:
 *       Chrome (nav/sidebar/footer/code/blockquote strip)  → neutrals.
 *       Content (page h1, body links, callouts, CTA, gloss) → primary.
 *   • One callout pattern (.callout) — applied to driving-question and practice.
 *   • Modular type scale (ratio 1.25), 8-step spacing scale (4px base).
 *
 * Contrast targets (WCAG AA, light mode hue=320):
 *   text  hsl(230,18%,14%) ↔ bg hsl(40,30%,98%)  → 14.8:1  (AAA)
 *   muted hsl(230,8%,40%)  ↔ bg                  →  6.4:1  (AAA)
 *   primary hsla(320,75%,35%) ↔ bg               →  6.1:1  (AA normal, AAA large)
 * Dark mode and high-contrast pass the same gates (verified by lightness gap).
 * ============================================================= */

:root {
  /* ---- Hue is set by baseof.html inline <style>, default 220 ----
   * Do NOT redeclare --hue here: var(--hue, 220) self-references
   * and CSS treats that as a cycle (IACVT). */
  --hue-analogous: calc(var(--hue) + 30);
  --hue-triadic:   calc(var(--hue) + 120);

  /* ---- Neutrals (hue-independent, warm canvas) ---- */
  --color-bg:       hsl(40, 30%, 98%);   /* warm cream canvas */
  --color-surface:  hsl(40, 22%, 94%);   /* slightly warmer for code/table headers */
  --color-text:     hsl(230, 18%, 14%);  /* near-black with subtle blue ink */
  --color-muted:    hsl(230, 8%, 38%);   /* secondary text — 6.4:1 on bg (AAA) */
  --color-faint:    hsl(230, 10%, 45%);  /* tertiary text — 4.7:1 on bg (AA) */
  --color-border:   hsl(40, 14%, 86%);   /* hairlines */
  --color-rule:     hsl(40, 14%, 92%);   /* very soft section dividers */

  /* ---- Chromatic accent (the user's --hue) ----
   * primary       = body links, page h1, CTA fill, gloss underline, current state
   * primary-strong= h2/h3 headings, hover state
   * primary-soft  = callout left-strip, focus ring at low opacity
   * primary-fade  = callout background, hero wash
   */
  --color-primary:        hsla(var(--hue), 75%, 38%, 1);
  --color-primary-strong: hsla(var(--hue), 80%, 28%, 1);
  --color-primary-soft:   hsla(var(--hue), 65%, 88%, 1);
  --color-primary-fade:   hsla(var(--hue), 55%, 96%, 1);

  /* Defined for opt-in user customization; the default UI does not use them. */
  --color-analogous:    hsla(var(--hue-analogous), 75%, 40%, 1);
  --color-triadic:      hsla(var(--hue-triadic),   60%, 36%, 1);
  --color-triadic-soft: hsla(var(--hue-triadic),   60%, 92%, 1);

  /* ---- Secondary accent (derived from --hue) ----
   * Same hue as primary, low saturation. For annotation roles only.
   * Fuchsia → dusty mauve; blue → slate; green → sage. */
  --color-accent:      hsla(var(--hue), 28%, 42%, 1);
  --color-accent-soft: hsla(var(--hue), 30%, 90%, 1);

  /* ---- Link / annotation color (complement of --hue, +180°) ----
   * Classic editorial move: structural elements (h1, hero) use the primary;
   * actionable links + small annotation roles (eyebrows, numerals, prev/next
   * labels, heading anchors) use the complement so they're visibly distinct.
   * Mathematical complement, no temperature claim — for fuchsia primary the
   * complement lands in green; for teal it lands in rust; for orange it
   * lands in teal. Saturation kept moderate so the complement reads as
   * "linkable" rather than as a competing brand color.
   */
  --color-link:        hsla(calc(var(--hue) + 180), 55%, 32%, 1);
  --color-link-hover:  hsla(calc(var(--hue) + 180), 65%, 22%, 1);
  --color-link-soft:   hsla(calc(var(--hue) + 180), 50%, 88%, 1);

  /* ---- Type scale (1.25 modular ratio) ---- */
  --type-xs:  0.875rem;   /* 14px — labels, captions */
  --type-sm:  1rem;       /* 16px — body */
  --type-md:  1.125rem;   /* 18px — lead paragraph */
  --type-lg:  1.25rem;    /* 20px — h4 */
  --type-xl:  1.5625rem;  /* 25px — h3 */
  --type-2xl: 1.953rem;   /* 31px — h2 */
  --type-3xl: 2.441rem;   /* 39px — h1 */
  --type-4xl: 3.052rem;   /* 49px — hero h1 (home only) */

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Layout ---- */
  --measure: 65ch;                        /* prose line-length cap */
  --max-width: 700px;                     /* main column width */
  --sidebar-width: 220px;
  --layout-max: calc(var(--max-width) + var(--sidebar-width) + 4rem);
  --radius: 6px;
  --radius-lg: 10px;

  /* ---- Type families (default = signage; book preset overrides) ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --line-body:    1.6;
  --line-heading: 1.2;
}

html[data-font-preset="book"] {
  --font-body: "Source Serif 4", "Charter", "Iowan Old Style", Georgia, serif;
  --font-ui:   "Inter", system-ui, -apple-system, sans-serif;
  --line-body: 1.7;
}

/* ---- Dark mode tokens (shared) ---- */
/* Applied either via system preference (when no manual override is set)
 * or via html[data-theme="dark"] (when the user picks dark explicitly).
 * Light mode is always the :root default. */
html[data-theme="dark"] {
  --color-bg:       hsl(230, 16%, 9%);
  --color-surface:  hsl(230, 12%, 15%);
  --color-text:     hsl(40, 15%, 94%);
  --color-muted:    hsl(230, 10%, 68%);
  --color-faint:    hsl(230, 10%, 50%);
  --color-border:   hsl(230, 12%, 24%);
  --color-rule:     hsl(230, 12%, 18%);

  --color-primary:        hsla(var(--hue), 75%, 72%, 1);
  --color-primary-strong: hsla(var(--hue), 78%, 82%, 1);
  --color-primary-soft:   hsla(var(--hue), 50%, 28%, 1);
  --color-primary-fade:   hsla(var(--hue), 45%, 16%, 1);

  --color-accent:      hsla(var(--hue), 30%, 70%, 1);
  --color-accent-soft: hsla(var(--hue), 25%, 25%, 1);

  --color-link:        hsla(calc(var(--hue) + 180), 60%, 70%, 1);
  --color-link-hover:  hsla(calc(var(--hue) + 180), 70%, 80%, 1);
  --color-link-soft:   hsla(calc(var(--hue) + 180), 35%, 25%, 1);
}
@media (prefers-color-scheme: dark) {
  /* Apply dark tokens when system pref is dark AND no manual override.
   * The :not() guard means data-theme="light" wins over system pref. */
  html:not([data-theme]) {
    --color-bg:       hsl(230, 16%, 9%);
    --color-surface:  hsl(230, 12%, 15%);
    --color-text:     hsl(40, 15%, 94%);
    --color-muted:    hsl(230, 10%, 68%);
    --color-faint:    hsl(230, 10%, 50%);
    --color-border:   hsl(230, 12%, 24%);
    --color-rule:     hsl(230, 12%, 18%);

    --color-primary:        hsla(var(--hue), 75%, 72%, 1);
    --color-primary-strong: hsla(var(--hue), 78%, 82%, 1);
    --color-primary-soft:   hsla(var(--hue), 50%, 28%, 1);
    --color-primary-fade:   hsla(var(--hue), 45%, 16%, 1);

    --color-accent:      hsla(var(--hue), 30%, 70%, 1);
    --color-accent-soft: hsla(var(--hue), 25%, 25%, 1);

    --color-link:        hsla(calc(var(--hue) + 180), 60%, 70%, 1);
    --color-link-hover:  hsla(calc(var(--hue) + 180), 70%, 80%, 1);
    --color-link-soft:   hsla(calc(var(--hue) + 180), 35%, 25%, 1);
  }
}

/* ---- High-contrast mode ---- */
@media (prefers-contrast: more) {
  :root {
    --color-text:    hsl(230, 30%, 5%);
    --color-muted:   hsl(230, 25%, 22%);
    --color-border:  hsl(230, 20%, 60%);
    --color-primary: hsla(var(--hue), 90%, 28%, 1);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text:    hsl(40, 20%, 98%);
      --color-muted:   hsl(230, 8%, 82%);
      --color-border:  hsl(230, 12%, 38%);
      --color-primary: hsla(var(--hue), 85%, 82%, 1);
    }
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================= */
/* Reset & base                                                   */
/* ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-body);
  font-size: var(--type-sm);
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Skip link (a11y) — visible on focus only ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
  z-index: 100;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--type-xs);
}
.skip-link:focus { top: var(--space-2); }

/* ---- Universal focus ring ---- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Buttons/cards already have padding & radius — keep their existing shape */
.module-item:focus-within,
.model-answer-button:focus-visible {
  outline-offset: 3px;
}

/* ============================================================= */
/* Top nav — chrome. Neutral, hairline, sticky.                   */
/* ============================================================= */

nav.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
}
nav.topnav .topnav-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  flex-wrap: nowrap;
}
nav.topnav .brand {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--type-sm);
  letter-spacing: -0.01em;
  /* Truncate on narrow viewports — keeps nav one line */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
nav.topnav .brand:hover { color: var(--color-primary); }
nav.topnav ul {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
nav.topnav ul a {
  font-weight: 500;
  font-size: var(--type-xs);
  color: var(--color-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
nav.topnav ul a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Theme switch — three-segment radio (light / system / dark) */
.theme-switch {
  display: inline-flex;
  gap: 0;
  margin-left: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px;
  background: var(--color-bg);
}
.theme-switch button {
  font: inherit;
  font-size: var(--type-xs);
  background: transparent;
  border: 0;
  color: var(--color-muted);
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.theme-switch button:hover { color: var(--color-text); }
.theme-switch button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-bg);
}
.theme-switch svg {
  width: 14px;
  height: 14px;
  display: block;
}
@media (max-width: 800px) {
  .theme-switch { margin-left: 0; }
}

/* ============================================================= */
/* Layout                                                         */
/* ============================================================= */

.layout {
  max-width: var(--layout-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-12);
  padding: var(--space-8) var(--space-6);
  align-items: start;
}
main { max-width: var(--max-width); min-width: 0; }
main > * { max-width: var(--measure); }
main > .home,
main > .module,
main > .module > .module-body,
main > .module > .module-header,
main > .module > .practice,
main > .module > .module-nav,
main > .single,
main > .section { max-width: none; }

@media (max-width: 800px) {
  /* Drop sidebar on mobile — top nav has the entry points */
  .layout {
    display: block;
    padding: var(--space-4);
  }
  .sidebar { display: none; }
  main { max-width: 100%; }
  main > * { max-width: 100%; }

  /* Mobile nav — drop the brand label entirely. The site title is already in
   * the page <h1> and in the browser tab. Persistent nav real estate is too
   * scarce on phones to spend on a 4-line title. */
  nav.topnav .brand { display: none; }
  nav.topnav .topnav-inner {
    padding: var(--space-3) var(--space-4);
    justify-content: center;
    gap: var(--space-4);
  }
  nav.topnav ul {
    margin: 0;
    gap: var(--space-4);
    width: 100%;
    justify-content: space-around;
  }
  nav.topnav ul a { font-size: var(--type-xs); letter-spacing: 0.06em; }
}

/* ============================================================= */
/* Sidebar — quiet chrome, no card                                */
/* ============================================================= */

.sidebar {
  font-family: var(--font-ui);
  position: sticky;
  top: var(--space-6);
  font-size: var(--type-xs);
  border-right: 1px solid var(--color-rule);
  padding-right: var(--space-4);
}
.sidebar h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-faint);
}
.sidebar h3 a { color: inherit; text-decoration: none; }
.sidebar h3 a:hover { color: var(--color-text); }
.sidebar ol.sidebar-modules {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  color: var(--color-link);   /* complement — sidebar numerals pop on every page */
}
.sidebar ol.sidebar-modules > li {
  margin: var(--space-2) 0;
  padding-left: var(--space-1);
  /* Hang the marker — number sits flush, title indents */
  text-indent: -1.2em;
  padding-left: 1.2em;
}
.sidebar ol.sidebar-modules > li > a {
  color: var(--color-text);
  text-decoration: none;
}
.sidebar ol.sidebar-modules > li > a:hover {
  color: var(--color-primary);
}
.sidebar ol.sidebar-modules > li.current > a {
  color: var(--color-primary);
  font-weight: 600;
}
.sidebar ul.sidebar-children {
  list-style: none;
  padding-left: 1rem;
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--type-xs);
  text-indent: 0;
}
.sidebar ul.sidebar-children li { margin: var(--space-1) 0; padding-left: 0; text-indent: 0; }
.sidebar ul.sidebar-children a {
  color: var(--color-muted);
  text-decoration: none;
}
.sidebar ul.sidebar-children a:hover { color: var(--color-primary); }

/* ============================================================= */
/* Typography — modular scale, vertical rhythm                    */
/* ============================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  line-height: var(--line-heading);
  font-weight: 700;
  /* Small caps treatment: every letter renders as a small-cap glyph.
   * Proper nouns lose distinction but headings gain editorial calm —
   * fits the "this is a chapter marker" reading rhythm. Letter-spacing
   * adds a touch of openness so the small-caps don't crowd. */
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

/* Page h1 — the article's voice. Carries primary color. */
h1 {
  color: var(--color-primary);
  font-size: var(--type-3xl);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* Section h2 — major break inside an article. Separation comes from
 * generous top margin alone; no rule. The whitespace IS the break. */
h2 {
  color: var(--color-text);
  font-size: var(--type-2xl);
  margin: var(--space-12) 0 var(--space-3);
}

/* Inside .practice (and other callouts), no top rule — the box itself separates */
.callout h2,
.practice h2,
.model-answer-cta h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

h3 {
  color: var(--color-text);
  font-size: var(--type-xl);
  margin: var(--space-8) 0 var(--space-2);
}

/* Heading anchor — appears on hover, copies hash on click.
 * Renders only on Markdown-sourced headings (via render-heading.html hook).
 * Reads as a quiet annotation mark, not a competing brand element. */
.md-heading {
  position: relative;
  scroll-margin-top: var(--space-12);
}
.heading-anchor {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-link);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
  font-size: 0.85em;
}
.md-heading:hover .heading-anchor,
.heading-anchor:focus-visible {
  opacity: 1;
}
.heading-anchor:hover {
  color: var(--color-link-hover);
  opacity: 1;
}
h4 {
  color: var(--color-text);
  font-size: var(--type-lg);
  margin: var(--space-6) 0 var(--space-2);
}

p, ul, ol, dl, blockquote, pre, table, figure {
  margin: var(--space-4) 0;
}

/* Links — complementary color (hue+180), classic editorial pairing.
 * Headings/structure use the primary; links use the complement so they
 * stand out from prose by hue, not just by underline. The underline is
 * thick and at full link color (not desaturated) so the link is obvious
 * even at a glance. On hover, a soft highlight wash signals interactivity. */
a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--color-link);
  text-decoration-skip-ink: auto;
  font-weight: 500;
  border-radius: 2px;
  transition: background-color 0.12s ease, color 0.12s ease, text-decoration-color 0.12s ease;
  padding: 0 0.05em;
}
a:hover {
  color: var(--color-link-hover);
  background-color: var(--color-link-soft);
  text-decoration-color: var(--color-link-hover);
}

/* Glossary tooltip links — same complement color so they're clearly clickable,
 * but a DOTTED underline differentiates them from regular hyperlinks (signals
 * "definition available" vs "external/internal link"). */
a.gloss {
  color: var(--color-link);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px dotted var(--color-link);
  padding: 0 0.05em;
  border-radius: 2px;
  transition: background-color 0.12s ease, color 0.12s ease, border-bottom-color 0.12s ease;
}
a.gloss:hover {
  color: var(--color-link-hover);
  background-color: var(--color-link-soft);
  border-bottom-color: var(--color-link-hover);
  border-bottom-style: solid;
}

/* Inline code — neutral surface, ink text. Stays out of the way. */
code {
  font-family: var(--font-mono);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
  border: 1px solid var(--color-border);
}

/* Block code — same surface, larger pad, no inline border */
pre {
  font-family: var(--font-mono);
  background: var(--color-surface);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  font-size: var(--type-xs);
  line-height: 1.55;
}
pre code {
  background: transparent;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: 1em;
}
pre.mermaid {
  background: var(--color-bg);
  text-align: center;
  padding: var(--space-6);
}
pre.mermaid svg { max-width: 100%; height: auto; }

/* Tables — quiet. Only header gets a subtle fill. */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--type-xs);
}
th, td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--color-surface);
  font-family: var(--font-ui);
  color: var(--color-text);
  font-weight: 600;
  border-bottom-width: 2px;
}

/* Lists — restrained */
ul, ol { padding-left: 1.4em; }
li { margin: var(--space-1) 0; }
li > ul, li > ol { margin: var(--space-1) 0; }

/* Blockquote — left strip in primary, neutral bg */
blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-fade);
  color: var(--color-text);
  font-style: normal;
  border-radius: 0 var(--radius) var(--radius) 0;
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child  { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-8) 0;
}

/* ============================================================= */
/* Home — editorial, not card-in-card                             */
/* ============================================================= */

.home > h1:first-child {
  font-size: var(--type-4xl);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--color-text);
  margin: var(--space-4) 0 var(--space-3);
  position: relative;
}
.home > h1:first-child::after {
  /* Two-tone rule: primary into its complement. The single most visible
   * spot on the home page where both colors meet. */
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  background: linear-gradient(to right, var(--color-primary), var(--color-link));
  margin-top: var(--space-3);
}
.home .tagline {
  font-size: var(--type-md);
  color: var(--color-muted);
  margin: 0 0 var(--space-12);
  max-width: 60ch;
  line-height: 1.5;
}
/* "MODULES" eyebrow — small complement-color label */
.home > h2 {
  border-top: 0;
  padding-top: 0;
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-link);
  font-weight: 700;
}

@media (max-width: 800px) {
  .home > h1:first-child { font-size: var(--type-3xl); }
  h1 { font-size: var(--type-2xl); }
}

/* ============================================================= */
/* Module list — clickable items. Cards because they ARE the      */
/* interaction. Hairline border, subtle hover lift.               */
/* ============================================================= */

.module-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-8);
  counter-reset: module;
  display: grid;
  gap: var(--space-3);
}
/* Whole card is a single anchor — clicking anywhere navigates.
 * Border is a uniform hairline; hover swaps the background to a soft
 * diagonal gradient (primary-fade → bg) and tightens the border to primary. */
.module-item {
  counter-increment: module;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  transition: border-color 0.18s ease, background 0.25s ease, transform 0.18s ease;
  position: relative;
}
.module-item:hover,
.module-item:focus-within {
  border-color: var(--color-primary);
  background: hsla(var(--hue), 60%, 50%, 0.06);
  transform: translateY(-1px);
}
.module-item-link {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
}
.module-item-link:hover { text-decoration: none; color: inherit; }
.module-item::before {
  content: counter(module);
  color: var(--color-link);   /* complement — visible spot against the primary-themed canvas */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--type-lg);
  line-height: 1.2;
  position: absolute;
  left: var(--space-6);
  top: var(--space-4);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.module-item-link > * {
  display: block;
  grid-column: 2;
}
.module-item-link > * + * { margin-top: var(--space-2); }
.module-item-header {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--type-md);
  color: var(--color-text);
  line-height: 1.3;
}
.module-item:hover .module-item-header,
.module-item:focus-within .module-item-header { color: var(--color-primary); }
.module-item-summary { color: var(--color-muted); font-size: var(--type-sm); }
.driving-question-inline {
  color: var(--color-faint);
  font-style: italic;
  font-size: var(--type-xs);
}

/* ============================================================= */
/* Module concept page                                            */
/* ============================================================= */

.module-header {
  margin-bottom: var(--space-8);
}
.module-header h1 {
  border: 0;
  padding: 0;
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--type-3xl);
}
.module-header .summary {
  font-size: var(--type-md);
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
  line-height: 1.5;
  max-width: var(--measure);
}
/* "MODULE N" eyebrow — small complement-color label. Tiny dot of color
 * but visible on every module page; pairs visibly with the primary h1. */
.module-number {
  font-family: var(--font-ui);
  color: var(--color-link);
  font-size: var(--type-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--space-2);
}

/* Driving question = the article's thesis statement. Quoted-pull-quote feel:
 * subtle left strip, no background fill, italic to read as "the question".
 * Keeps the h1 above as the unambiguous focal point. */
.driving-question {
  font-family: var(--font-body);
  font-size: var(--type-md);
  font-weight: 400;
  font-style: italic;
  padding: 0 0 0 var(--space-4);
  border-left: 3px solid var(--color-primary);
  margin: var(--space-6) 0 0;
  color: var(--color-muted);
  line-height: 1.5;
  max-width: 60ch;
}
.driving-question strong {
  font-weight: 400;
  color: var(--color-text);
}

.module-body { /* prose styles inherit */ }
.module-body > :first-child { margin-top: 0; }

.blog-link {
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  margin: var(--space-3) 0 0;
}

/* ============================================================= */
/* Practice section — same callout pattern, slightly stronger     */
/* ============================================================= */

.practice {
  margin: var(--space-12) 0 var(--space-6);
  padding: var(--space-6);
  background: var(--color-primary-fade);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.practice h2 {
  color: var(--color-primary-strong);
  font-size: var(--type-xl);
}
.practice ul { padding-left: 1.25rem; margin-bottom: 0; }
.practice li { margin: var(--space-2) 0; }
.practice a { color: var(--color-primary-strong); }

/* ============================================================= */
/* Module prev/next nav                                           */
/* ============================================================= */

.module-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
.module-nav-slot {
  flex: 1 1 50%;
  font-family: var(--font-ui);
  font-size: var(--type-sm);
  min-width: 0;
}
.module-nav-prev { text-align: left; }
.module-nav-next { text-align: right; }
.module-nav a {
  text-decoration: none;
  color: var(--color-text);
  display: inline-block;
  font-weight: 500;
}
.module-nav a:hover { color: var(--color-primary); }
.module-nav .label {
  display: block;
  color: var(--color-link);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
  font-weight: 700;
}

/* ============================================================= */
/* Single page (validation, exercise, answer, glossary)           */
/* ============================================================= */

.single > header { margin-bottom: var(--space-6); }
.single > header h1 { margin: 0; }
.single-body > :first-child { margin-top: 0; }

.back-link {
  margin-top: var(--space-12);
  font-family: var(--font-ui);
  font-size: var(--type-sm);
}
.back-link a { color: var(--color-muted); text-decoration: none; }
.back-link a:hover { color: var(--color-primary); }

/* ============================================================= */
/* Exercise → model-answer CTA                                    */
/* ============================================================= */

.model-answer-cta {
  margin: var(--space-12) 0 var(--space-4);
  padding: var(--space-6);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-primary-fade);
}
.model-answer-cta p { margin: 0 0 var(--space-3); color: var(--color-text); }
.model-answer-cta p strong { color: var(--color-primary-strong); }

.model-answer-button {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--type-sm);
  text-decoration: none;
  color: var(--color-bg);
  background: var(--color-primary);
  border-radius: var(--radius);
  border: 1px solid var(--color-primary-strong);
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.model-answer-button:hover {
  background: var(--color-primary-strong);
  transform: translateY(-1px);
}

/* ============================================================= */
/* Glossary — definition list feel, not section feel              */
/* ============================================================= */

/* The glossary page is a long alphabetical list. Each <h2> is a TERM,
 * not a section break. Override the page-h2 styling to look more like
 * an entry header in a dictionary. */
.single-body h2 {
  font-family: var(--font-ui);
  font-size: var(--type-lg);
  color: var(--color-primary-strong);
  border-top: 0;
  padding-top: 0;
  margin: var(--space-8) 0 var(--space-2);
  font-weight: 700;
}
.single-body h2 + p {
  margin-top: 0;
  color: var(--color-text);
  max-width: var(--measure);
}

/* ============================================================= */
/* Section index pages (validation, exercises lists)              */
/* ============================================================= */

.section h1 { font-size: var(--type-3xl); }
.section > p:first-of-type { font-size: var(--type-md); color: var(--color-muted); max-width: 60ch; }

/* ============================================================= */
/* Footer                                                         */
/* ============================================================= */

footer {
  max-width: var(--layout-max);
  margin: var(--space-16) auto var(--space-6);
  padding: var(--space-6) var(--space-6) 0;
  border-top: 1px solid var(--color-rule);
  color: var(--color-faint);
  font-size: var(--type-xs);
  text-align: center;
}
footer p { margin: 0; max-width: 60ch; margin-inline: auto; }

/* ============================================================= */
/* Visual-needed callout — placeholder for slots where free-use   */
/* imagery is unavailable. Soft tinted block with action links to */
/* YouTube and Wikimedia searches.                                */
/* ============================================================= */
.visual-needed {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary);
  background: hsla(var(--hue), 60%, 50%, 0.05);
  border-radius: var(--radius);
  font-size: var(--type-sm);
}
.visual-needed-label {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-primary-strong);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--type-xs);
}
.visual-needed-body { margin-bottom: var(--space-3); color: var(--color-text); }
.visual-needed-body p { margin: 0 0 var(--space-2); }
.visual-needed-body p:last-child { margin-bottom: 0; }
.visual-needed-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.visual-needed-links a {
  font-family: var(--font-ui);
  font-size: var(--type-xs);
  text-decoration: none;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.visual-needed-links a:hover {
  background: hsla(var(--hue), 60%, 50%, 0.12);
}