/* ══════════════════════════════════════════════════════════════════════════
   guide.css — the one stylesheet for the MPM guide.

   Every page in this directory links it, the hand-written tutorial included, so
   there is exactly one place a color, a measure or a type scale is decided.
   It sits beside the pages rather than anywhere else precisely so that opening
   any of them straight off disk still finds it.

   Palette convention, which runs through every figure on every page:
     amber = particles (Lagrangian, persistent)
     blue  = grid      (Eulerian, disposable)
     red   = a trap
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #eef1f5;
  --surface:     #ffffff;
  --surface-2:   #e3e8ee;
  --ink:         #10161d;
  --ink-2:       #3f4c59;
  --ink-3:       #6d7c8a;
  --rule:        #c6d0da;
  --rule-soft:   #dde4ec;

  --particle:      #a35606;
  --particle-fill: #f3e0c6;
  --particle-line: #c98235;

  --grid:      #1d5a92;
  --grid-fill: #cfe1f1;
  --grid-line: #5d94c4;

  --warn:      #9a2f24;
  --warn-fill: #f6dcd8;
  --ok:        #2c6a4d;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 66ch;
  --wide: 1060px;
  --wide-table: 1240px;   /* tables need more room than figures do — four columns of prose */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a0e13;
    --surface:   #121922;
    --surface-2: #1a232e;
    --ink:       #e2e8ef;
    --ink-2:     #a2b0bd;
    --ink-3:     #71808d;
    --rule:      #26313d;
    --rule-soft: #1b232c;

    --particle:      #f2ac52;
    --particle-fill: #3a2a13;
    --particle-line: #a97b3c;

    --grid:      #74b3e8;
    --grid-fill: #14293c;
    --grid-line: #3d6a94;

    --warn:      #ef8779;
    --warn-fill: #3a1f1b;
    --ok:        #6fc5a0;
  }
}
:root[data-theme="dark"] {
  --bg:        #0a0e13;
  --surface:   #121922;
  --surface-2: #1a232e;
  --ink:       #e2e8ef;
  --ink-2:     #a2b0bd;
  --ink-3:     #71808d;
  --rule:      #26313d;
  --rule-soft: #1b232c;

  --particle:      #f2ac52;
  --particle-fill: #3a2a13;
  --particle-line: #a97b3c;

  --grid:      #74b3e8;
  --grid-fill: #14293c;
  --grid-line: #3d6a94;

  --warn:      #ef8779;
  --warn-fill: #3a1f1b;
  --ok:        #6fc5a0;
}

* { box-sizing: border-box; }

/* Every size below is expressed in rem, which resolves against THIS element and not against
   body. The browser default of 16px is what made the contents box, the tables and the
   back-link read smaller than the body text sitting beside them. */
html { font-size: 18px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout: a centered measure with a wide breakout lane ── */
main {
  display: grid;
  grid-template-columns: minmax(1.25rem, 1fr) min(var(--measure), 100%) minmax(1.25rem, 1fr);
  row-gap: 0;
  padding-bottom: 6rem;
}
main > * { grid-column: 2; }
main > .wide {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(var(--wide), 100% - 2.5rem);
}

/* ── Type ── */
h1, h2, h3, h4 { font-family: var(--mono); font-weight: 600; text-wrap: balance; }

h2 {
  font-size: 1.42rem;
  letter-spacing: -0.015em;
  line-height: 1.24;
  margin: 4.5rem 0 0.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
h3 {
  font-size: 1.03rem;
  letter-spacing: 0.005em;
  margin: 2.6rem 0 0.5rem;
}
h4 {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--ink-3);
  margin: 2rem 0 0.5rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.79rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--grid);
  margin: 0 0 0.35rem;
}
h2 + p, h3 + p, h4 + p { margin-top: 0.3rem; }
p { margin: 0 0 1.05rem; }

a { color: var(--grid); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--particle); outline-offset: 2px;
}

code, kbd {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface-2);
  padding: 0.08em 0.34em;
  border-radius: 2px;
}
strong { font-weight: 700; color: var(--ink); }
em.term { font-style: normal; font-weight: 700; color: var(--particle); }

ul, ol { margin: 0 0 1.05rem; padding-left: 1.3rem; }
li { margin-bottom: 0.45rem; }

/* ── Header ── */
header.hero {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  padding: 3.5rem 1.5rem 2.5rem;
  margin-bottom: 3rem;
}
.hero-inner { max-width: var(--wide); margin: 0 auto; }
h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: 0 0 0.85rem;
}
.standfirst {
  font-size: 1.16rem;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 1.9rem;
}
.hero-meta {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1rem;
}

/* ── Table of contents ── */
nav.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
}
nav.toc ol {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;      /* one column: a contents list is read down, not across */
  gap: 0.15rem;
  counter-reset: toc;
}
nav.toc li {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  counter-increment: toc;
  display: flex;
  gap: 0.6rem;
}
nav.toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
nav.toc a { text-decoration: none; color: var(--ink-2); }
nav.toc a:hover { color: var(--grid); text-decoration: underline; }

/* ── Figures ── */
figure {
  margin: 2rem 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem 1.4rem 1.1rem;
  overflow-x: auto;
}
figure svg { display: block; max-width: 100%; height: auto; margin: 0 auto; color: var(--ink-2); }
figcaption {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule-soft);
}
figcaption b { color: var(--ink-2); font-weight: 600; }

/* SVG helper classes */
.s-ink   { stroke: currentColor; }
.f-ink   { fill: currentColor; }
.s-grid  { stroke: var(--grid); }
.f-grid  { fill: var(--grid); }
.s-part  { stroke: var(--particle); }
.f-part  { fill: var(--particle); }
.s-warn  { stroke: var(--warn); }
.f-warn  { fill: var(--warn); }
.lbl     { font-family: var(--mono); font-size: 12.5px; fill: var(--ink-2); }
.lbl-sm  { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
.lbl-hd  { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; fill: var(--ink-2); }
.num     { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* ── Callouts ── */
.note, .trap, .key {
  border-left: 3px solid var(--grid);
  background: var(--surface);
  padding: 0.95rem 1.15rem 0.35rem;
  margin: 1.6rem 0;
  border-radius: 0 3px 3px 0;
}
.trap { border-left-color: var(--warn); }
.key  { border-left-color: var(--particle); }
.note > .tag, .trap > .tag, .key > .tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
  color: var(--grid);
}
.trap > .tag { color: var(--warn); }
.key > .tag  { color: var(--particle); }
.note p:last-child, .trap p:last-child, .key p:last-child { margin-bottom: 0.7rem; }

/* ── Tables ──
   A table is the one thing on these pages that is genuinely wider than a column of prose:
   four columns of comparison do not fit in a 66-character measure, and squeezing them there
   is what turned the notes column into a scrollbar. Tables therefore take the same wide lane
   the tutorial's figures use. overflow-x stays as the fallback for the ones that are wider
   still, and for narrow screens. */
main > .tablewrap {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(var(--wide-table), 100% - 2.5rem);
}
.tablewrap { overflow-x: auto; margin: 1.8rem 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* ink-2, not ink-3: on the surface-2 header band ink-3 measures 3.5:1 in light and 3.9:1 in
     dark, and this is 14px uppercase, so WCAG AA wants 4.5:1. ink-2 gives 7.1:1 in both. */
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; white-space: nowrap; }
td.knob { font-family: var(--mono); font-size: 0.88rem; color: var(--particle); white-space: nowrap; }

/* ── Code blocks ── */
pre {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--grid-line);
  border-radius: 0 3px 3px 0;
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 1.5rem 0;
}
pre code { background: none; padding: 0; font-size: inherit; }
pre .cmt { color: var(--ink-3); font-style: italic; }
pre .hi  { color: var(--particle); }

/* ── The interactive lab ── */
.lab {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  margin: 2.2rem 0;
  overflow: hidden;
}
.lab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.lab-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-right: auto;
}
.lab-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 820px) { .lab-body { grid-template-columns: 1fr; } }
.lab-stage { padding: 0.6rem; border-right: 1px solid var(--rule); overflow-x: auto; }
@media (max-width: 820px) { .lab-stage { border-right: none; border-bottom: 1px solid var(--rule); } }
.lab-side { padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.84rem; }
.lab-side h5 {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-3);
  margin: 1.25rem 0 0.4rem;
  font-weight: 600;
}
.lab-side h5:first-child { margin-top: 0; }
.readout { width: 100%; font-size: 0.82rem; border-collapse: collapse; }
.readout td { padding: 0.16rem 0; border: none; font-variant-numeric: tabular-nums; }
.readout td:first-child { color: var(--ink-3); padding-right: 0.7rem; }
.readout td:last-child { text-align: right; }
.readout tr.sep td { border-top: 1px solid var(--rule-soft); padding-top: 0.4rem; }

.phase-strip { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--rule); background: var(--surface-2); }
.phase-strip button {
  font-family: var(--mono);
  font-size: 0.79rem;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 2px;
  cursor: pointer;
}
.phase-strip button[aria-pressed="true"] {
  background: var(--grid);
  border-color: var(--grid);
  color: var(--surface);
}
.phase-strip button:hover { border-color: var(--grid-line); }

.ctl { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-2); }
.ctl input[type="range"] { width: 130px; accent-color: var(--particle); }
.ctl input[type="checkbox"] { accent-color: var(--particle); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: baseline; }

.verdict { font-family: var(--mono); font-size: 0.82rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--rule); color: var(--ink-2); }
.verdict b.good { color: var(--ok); }
.verdict b.loss { color: var(--warn); }

/* ── Two-up card grid ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; margin: 1.8rem 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1rem 1.1rem;
}
.card h4 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin-bottom: 0; }

/* ── Struct listing ── */
.struct { font-family: var(--mono); font-size: 0.86rem; line-height: 1.75; }
.struct .fld { color: var(--particle); }
.struct .fld-g { color: var(--grid); }
.struct .ann { color: var(--ink-3); }

footer.end {
  grid-column: 1 / -1;
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding: 2rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink-2);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Prose-page rules — the document pages carry markup the tutorial never had:
   a contents box, a back-link, block figures, blockquotes and typeset mathematics.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: title, standfirst, and the way back to the index ── */
.hero-nav {
  font-family: var(--mono);
  font-size: 0.88rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 1.4rem;
}
.hero-nav a { color: var(--ink-3); text-decoration: none; }
.hero-nav a:hover { color: var(--grid); text-decoration: underline; }

/* ── Table of contents: <nav id="TOC"> holding one flat <ul> of section links ── */
nav#TOC {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
}
nav#TOC > ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;      /* one column: a contents list is read down, not across */
  gap: 0.15rem;
}
nav#TOC ul ul { display: none; }          /* one level is the whole point */
nav#TOC li {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.5;
}
nav#TOC a { text-decoration: none; color: var(--ink-2); }
nav#TOC a:hover { color: var(--grid); text-decoration: underline; }
nav#TOC .toc-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  margin: 0 0 0.7rem;
}

/* ── Figures are a bare <img>; the description stays in alt, off the page.
   A paragraph holding nothing but a figure takes the wide lane, like a table: the diagrams
   are 680–880 units across and would otherwise be scaled DOWN to the prose measure, shrinking
   their labels below the body text they sit beside. ── */
main > p:has(> img:only-child),
main > p:has(> picture:only-child) {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(var(--wide), 100% - 2.5rem);
}
p > picture { display: block; }

p > img, p > picture > img, .figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.2rem;
}

/* ── Blockquotes read as the tutorial's .note callout ── */
blockquote {
  border-left: 3px solid var(--grid);
  background: var(--surface);
  padding: 0.95rem 1.15rem 0.35rem;
  margin: 1.6rem 0;
  border-radius: 0 3px 3px 0;
  color: var(--ink-2);
}
blockquote p:last-child { margin-bottom: 0.7rem; }

/* ── Section rules ──
   h2 draws its own border above itself, so a page should never also carry an <hr>
   directly above a heading; the two together read as a stutter. An <hr> anywhere
   else — before a closing note, between unheaded blocks — is deliberate. */
hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* ── Math. Native MathML: no script, no web font, no layout shift. ── */
math { font-size: 1.02em; }
math[display="block"] {
  display: block;
  width: fit-content;      /* so the auto margins actually center it */
  max-width: 100%;
  margin: 1.7rem auto;
  overflow-x: auto;        /* and a wide one scrolls rather than widening the page */
  overflow-y: hidden;
}
/* A paragraph holding only display math should not also carry paragraph spacing. */
p:has(> math[display="block"]:only-child) { margin: 0; }

/* ── The index's document list ──
   Each entry is a name, a one-line reason to read it, and a paragraph of detail. As a table
   those three were three columns of a 40%-wide cell and read as a wall; as a list they read
   as three lines. */
ul.doclist > li { margin-bottom: 1.5rem; }
ul.doclist > li > p { margin-bottom: 0.35rem; }
ul.doclist > li > p:last-child { margin-bottom: 0; color: var(--ink-2); }

/* ── Definition lists and nested lists ── */
dt { font-weight: 700; margin-top: 0.8rem; }
dd { margin: 0.2rem 0 0 1.3rem; }
li > ul, li > ol { margin-top: 0.45rem; }

/* ── Footnotes ── */
.footnotes {
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ── Footer, and the last-updated stamp ──
   The date is written into the pages by the publish script immediately before upload, so the
   copy in the repository and the copy on the server always agree about when they were sent. */
footer.end a { color: var(--ink-2); }
footer.end a:hover { color: var(--grid); }
/* The page you are on appears in its own footer nav, unlinked, so the row reads as a
   position rather than as ten interchangeable destinations. */
footer.end .here { color: var(--ink); font-weight: 600; }
footer.end .updated {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.94em;
  color: var(--ink-2);
}

/* ── Narrow screens ── */
@media (max-width: 620px) {
  body { font-size: 1rem; }
  header.hero { padding: 2.5rem 1.15rem 1.8rem; }
  h2 { margin-top: 3rem; }
}