/* =========================================================================
   ML for kids — shared foundation
   =========================================================================
   Loaded first by every page in the series.

   A declaration only lives here if every page either declared it with the
   identical value, or provably cannot match the selector at all (the class
   appears nowhere in that page's markup or script). Anything else stays in
   the page's own stylesheet, which loads afterwards and wins on a tie. That
   rule is why `strong` and `table` are duplicated rather than hoisted: one
   page styles them differently, or not at all.

   Palette is the contributor app's Voice-as-Gold set. Three theme states:
   bare :root (light), prefers-color-scheme (system preference), and
   [data-theme] (explicit toggle, persisted by js/theme.js).
   ========================================================================= */

  :root {
    --bg-page: #fffcf8;
    --bg-surface: #ffffff;
    --bg-subtle: #fbf7f2;
    --text-primary: #2c2420;
    --text-secondary: #5c4d42;
    --text-muted: #8b7b6b;
    --text-placeholder: #b5a89c;
    --border-default: #e8e0d8;
    --border-subtle: #f0ebe5;
    --border-strong: #d4c8bc;
    --gold: #b8860b;
    --gold-hover: #daa520;
    --gold-pressed: #9a7209;
    --gold-subtle: #fdf6e3;
    --gold-border: #e6d5a8;
    --emerald: #10b981;
    --teal: #0d9488;
    --success: #4a7c23;
    --warning: #c67c00;
    --error: #b33d26;
    --info: #2d6a8a;
    --invert-accent: #daa520;
    --font-display: 'degular-display','Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;
    --font-body: 'acumin-pro','Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;
    --font-mono: ui-monospace,SFMono-Regular,Menlo,monospace;
    --col: min(880px, calc(100% - 2.4rem));
    color-scheme: light;
  }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg-page: #1c1512;
      --bg-surface: #2a2118;
      --bg-subtle: #241d18;
      --text-primary: #f5f0eb;
      --text-secondary: #c9beb4;
      --text-muted: #8b7b6b;
      --text-placeholder: #5c4d42;
      --border-default: #4d4035;
      --border-subtle: #3d322a;
      --border-strong: #5d5045;
      --gold: #daa520;
      --gold-hover: #e8c547;
      --gold-pressed: #b8860b;
      --gold-subtle: rgba(218,165,32,.10);
      --gold-border: rgba(218,165,32,.30);
      --emerald: #34d399;
      --teal: #2dd4bf;
      --success: #7eb851;
      --warning: #e9a93a;
      --error: #d87159;
      --info: #5ea4c9;
      --invert-accent: #9a7209;
      color-scheme: dark;
    }
}
  :root[data-theme="dark"] {
    --bg-page: #1c1512;
    --bg-surface: #2a2118;
    --bg-subtle: #241d18;
    --text-primary: #f5f0eb;
    --text-secondary: #c9beb4;
    --text-muted: #8b7b6b;
    --text-placeholder: #5c4d42;
    --border-default: #4d4035;
    --border-subtle: #3d322a;
    --border-strong: #5d5045;
    --gold: #daa520;
    --gold-hover: #e8c547;
    --gold-pressed: #b8860b;
    --gold-subtle: rgba(218,165,32,.10);
    --gold-border: rgba(218,165,32,.30);
    --emerald: #34d399;
    --teal: #2dd4bf;
    --success: #7eb851;
    --warning: #e9a93a;
    --error: #d87159;
    --info: #5ea4c9;
    --invert-accent: #9a7209;
    color-scheme: dark;
  }
  * { box-sizing: border-box; }
  html,body { margin: 0; padding: 0; }
  body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
  }
  .page {
    display: grid;
    grid-template-columns: 1fr var(--col) 1fr;
    padding: clamp(1.6rem,5vw,3rem) 0 5rem;
  }
  .page > * { grid-column: 2; }
  .band {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr var(--col) 1fr;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }
  .band > * { grid-column: 2; }
  .invert { background: var(--text-primary); color: var(--bg-page); border: 0; }
  .invert h2 { color: var(--invert-accent); }
  .invert p { color: var(--bg-page); opacity: 0.88; }
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  h1 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.015em;
  }
  h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem,3.1vw,2rem);
    font-weight: 600;
    line-height: 1.13;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
  }
  p { margin: 0 0 1rem; max-width: 64ch; }
  p:last-child { margin-bottom: 0; }
  .lede { font-size: 1.12rem; color: var(--text-secondary); max-width: 58ch; }
  .whofor {
    font-size: 0.93rem;
    color: var(--text-muted);
    border-left: 2px solid var(--gold-border);
    padding-left: 0.9rem;
    max-width: 56ch;
  }
  em { font-style: italic; }
  .meander {
    display: block;
    width: 100%;
    height: 18px;
    margin: 1.8rem 0 0;
    opacity: 0.7;
    color: var(--gold);
  }
  .sec { display: grid; grid-template-columns: 8.5rem minmax(0,1fr); }
  .sec > *:not(.step) { grid-column: 2; }
  .step { grid-column: 1; grid-row: 1; margin: 0; text-align: right; text-transform: uppercase; }
  .entryNo {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    text-align: right;
    padding-top: 0.4rem;
  }
  .entryTitle {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem,2.9vw,1.7rem);
    line-height: 1.16;
    letter-spacing: -0.01em;
    transition: color 160ms ease;
  }
  .entryBlurb {
    display: block;
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 0.5rem;
    max-width: 58ch;
  }
  .entryMyth {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 0.8rem;
  }
  .planned .entryTitle { color: var(--text-secondary); }
  .planned .entryMyth { color: var(--text-muted); }
@media (max-width:840px) {
    .step { grid-row: auto; text-align: left; padding-top: 0; margin-bottom: 0.5rem; }
    .entryNo { text-align: left; padding-top: 0; margin-bottom: 0.35rem; }
}
  .btn {
    font-family: var(--font-body);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: all 160ms ease;
  }
  .btn:hover { color: var(--text-primary); border-color: var(--text-primary); }
  .note { padding-left: 1rem; color: var(--text-secondary); max-width: 60ch; }
  .bigline {
    font-family: var(--font-display);
    font-size: clamp(1.35rem,3.6vw,1.9rem);
    font-weight: 600;
    line-height: 1.32;
  }
  footer { color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition-duration: 1ms !important; }
}
  .rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail-w);
    z-index: 50;
    display: flex;
    flex-direction: column;
    padding: 26px 0 22px 22px;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-page);
  }
  .rail-brand {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 34px;
    display: block;
  }
  .rail-nav { display: flex; flex-direction: column; flex: 1; position: relative; }
  .rail-nav::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c7));
    opacity: 0.3;
    border-radius: 2px;
  }
  .rail-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 9px 0;
    text-decoration: none;
  }
  .rail-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    border: 2px solid var(--node-c);
    background: var(--bg-page);
    transition: background 220ms ease, transform 220ms ease;
  }
  .rail-label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 220ms ease;
  }
  .rail-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    opacity: 0.7;
    text-transform: none;
    font-weight: 400;
    margin-top: 1px;
  }
  .rail-node:hover .rail-label { color: var(--text-primary); }
  .rail-node.is-active .rail-dot { background: var(--node-c); transform: scale(1.3); }
  .rail-node.is-active .rail-label { color: var(--node-c); }
  .rail-foot {
    padding-right: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .rail-note {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    color: var(--text-muted);
    line-height: 1.7;
    letter-spacing: 0.02em;
  }
@media (max-width:1080px) {
    .rail {
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      width: auto;
      height: 50px;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 0 14px;
      border-right: 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .rail-brand { margin: 0; font-size: 0.56rem; white-space: nowrap; }
    .rail-nav {
      flex-direction: row;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
      gap: 1px;
    }
    .rail-nav::before { display: none; }
    .rail-node { padding: 9px 7px; }
    .rail-label, .rail-note { display: none; }
    .rail-foot { padding: 0; }
}
  .chapter { scroll-margin-top: 70px; }
  .term { border-bottom: 1px dotted var(--acc,var(--gold)); }
  .instr { margin: 0; }
  .instr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-default);
  }
  .instr-title {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc,var(--gold));
    font-weight: 600;
  }
  .instr-status { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); }
  .instr-ctl { display: flex; flex-wrap: wrap; align-items: center; }
  .ctlgrp { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
  .ctlLabel {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .instr-cap {
    font-size: 0.87rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-default);
    margin-top: 1.1rem;
    padding-top: 0.8rem;
    max-width: 62ch;
  }
  .cta {
    font-family: var(--font-display);
    font-weight: 600;
    background: var(--text-primary);
    color: var(--bg-page);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
  .mazeWrap { overflow-x: auto; padding: 1rem 0 0.6rem; }
  .sq {
    border-radius: 2px;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    transition: background 200ms ease, border-color 200ms ease;
  }
  .sq.lit { background: var(--acc); border-color: var(--acc); }
  .lets { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 1rem; }
  .readout { display: flex; align-items: baseline; flex-wrap: wrap; }
  .num {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1;
    color: var(--acc,var(--gold));
  }
  .unit { font-size: 0.85rem; color: var(--text-muted); }
  .scrolllist {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-default);
    margin: 1rem 0 0;
  }
  .cand {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-body);
  }
  .cand .lbl { font-family: var(--font-mono); flex: none; }
  .cand .bar { height: 7px; border-radius: 2px; flex: none; min-width: 2px; }
  .cand .pct { font-family: var(--font-mono); color: var(--text-muted); margin-left: auto; }
  .seriesnav { color: var(--text-muted); border-top: 1px solid var(--border-subtle); }
  .seriesnav .all { color: var(--text-muted); border-bottom-color: var(--border-strong); }
  .fade1 { opacity: 0.5; }
  .fade2 { opacity: 0.28; }
  .fade3 { opacity: 0.13; }
  .hint {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
  }
  .btnrow {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 0.9rem;
  }
  .btn:focus-visible, .cta:focus-visible, .word:focus-visible, .tok:focus-visible, .cand:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }
  .tiles { display: flex; flex-wrap: wrap; gap: 5px; margin: 1rem 0 0.6rem; }
  .tile {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    background: var(--bg-page);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    padding: 0.28rem 0.5rem;
    white-space: pre;
  }
  .map {
    position: relative;
    height: 320px;
    background: var(--bg-page);
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
    margin: 0 0 1rem;
  }
  .word.near { background: var(--gold-subtle); border-color: var(--gold); color: var(--gold); }
  .sent { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0.9rem; }
  .tok {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    border: 1px solid var(--border-default);
    border-radius: 3px;
    padding: 0.38rem 0.5rem;
    cursor: pointer;
    text-align: center;
    transition: all 180ms ease;
    background: var(--bg-page);
    color: var(--text-primary);
  }
  .tok[aria-pressed="true"] {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-page);
  }
  .tok .pc { display: block; font-size: 0.64rem; color: var(--text-muted); margin-top: 2px; }
  .tok.lookahead { opacity: 0.28; }
  .bars { display: flex; gap: 4px; margin: 0 0 1.2rem; }
  .blk {
    flex: 1;
    height: 6px;
    border-radius: 2px;
    background: var(--border-default);
    transition: background 250ms ease;
  }
  .blk.on { background: var(--info); }
  .stage {
    font-family: var(--font-display);
    font-size: clamp(1.15rem,3vw,1.5rem);
    font-weight: 600;
    line-height: 1.35;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    color: var(--text-primary);
    border-top: 1px solid var(--border-default);
    padding-top: 1.1rem;
    margin-bottom: 1.1rem;
  }
  .msg {
    font-size: 0.92rem;
    margin: 0.7rem 0 0;
    min-height: 1.5em;
    color: var(--error);
    max-width: 60ch;
  }
  .msg.ok { color: var(--success); }
  .slabs {
    display: grid;
    gap: 0.9rem;
    margin: 1.2rem 0 0;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  }
  .slabs.solo { grid-template-columns: minmax(0,380px); justify-content: center; }
  .slabs.six { grid-template-columns: repeat(6,minmax(0,1fr)); }
@media (max-width:640px) {
    .slabs.six { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
  .slab .cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
    line-height: 1.5;
  }
  .ctlVal {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--acc,var(--gold));
    font-weight: 600;
    min-width: 8.5rem;
  }
  .slid {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: min(100%,17rem);
  }
  .slid .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }


  /* ---------- semantic wrappers ----------------------------------------
     <main> and <article> exist for structure, not layout. Subgrid hands the
     page's three columns straight through them, so a .band nested inside
     still bleeds edge to edge exactly as it did when every section was a
     direct child of .page.

     Order matters: .passthrough is listed last so a nested .passthrough
     (article inside main) beats the `.passthrough > *` rule above it. .band
     carries higher specificity and wins over both.
     ------------------------------------------------------------------- */
  .passthrough > * { grid-column: 2; }
  .passthrough > .band { grid-column: 1 / -1; }
  .passthrough {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: inherit;
  }

  /* ---------- skip link -------------------------------------------------
     Off-screen until focused; occupies no space in either state.
     ------------------------------------------------------------------- */
  .skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip-link:focus {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
    background: var(--text-primary);
    color: var(--bg-page);
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
  }

  /* ---------- lists that are really lists ------------------------------- */
  .entries { list-style: none; margin: 0; padding: 0; }

  /* ---------- sources ----------------------------------------------------
     Every piece ends with its receipts: a numbered endnote list in the
     blog's register — quiet secondary text, the links gold, one or two
     sentences saying what each source actually established. Introduced by
     piece 11 (Atlas) and shared by the whole series, so it lives here.
     ------------------------------------------------------------------- */
  .refsIntro { font-size: 0.94rem; color: var(--text-secondary); }
  .refList { margin: 1.2rem 0 0; padding: 0 0 0 1.4rem; }
  .refList li {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0 0 0.95rem;
    max-width: 64ch;
    line-height: 1.6;
  }
  .refList li::marker { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }
  .refList a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-border);
  }
  .refList a:hover { color: var(--gold-hover); }
  .refList em { font-style: italic; }

  /* ---------- cross-references -------------------------------------------
     "piece two", "part two", "piece 11" — linked automatically by js/xref.js
     rather than by hand, so the whole series stays connected as pieces are
     added. These sit mid-sentence and are read far more often than they are
     followed, so they must not shout: the prose colour is kept and only a
     dotted rule marks them, which firms up on hover. The piece's real title
     is on the anchor's title attribute.
     --------------------------------------------------------------------- */
  .xref {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--gold-border);
  }
  .xref:hover {
    color: var(--gold);
    border-bottom-style: solid;
    border-bottom-color: var(--gold);
  }
  .xref:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* ---------- deeper into the maze ---------------------------------------
     The recurring "harder version" box: a native <details> after a chapter's
     instrument, giving the real numbers and the real terms for what the
     story just taught. Introduced by piece 01 (how-computers-hear-words)
     and shared by the whole series, so it lives here. The summary picks up
     each page's accent through var(--acc).
     ------------------------------------------------------------------- */
  details.deeper {
    margin: 1.4rem 0 0;
    max-width: 62ch;
    border-top: 1px solid var(--border-default);
    padding-top: 0.8rem;
  }
  details.deeper summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acc,var(--gold));
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  details.deeper summary::-webkit-details-marker { display: none; }
  details.deeper summary::before { content: "+"; font-size: 0.9rem; line-height: 1; }
  details.deeper[open] summary::before { content: "\2212"; }
  details.deeper > *:not(summary) {
    margin-top: 0.9rem;
    font-size: 0.96rem;
    color: var(--text-secondary);
  }
  details.deeper .mono {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    color: var(--text-primary);
    background: var(--bg-subtle);
    padding: 0.65rem 0.85rem;
    display: block;
    overflow-x: auto;
    white-space: pre;
    line-height: 1.6;
  }
  .band details.deeper .mono { background: var(--bg-page); }