/* shadowbox - tokens copied from andrewrausch.com (never runtime-linked), own chrome.
   Colorblind rules are structural: no meaning on hue alone; dots = magnitude,
   stripe orientation = direction, heavy outline = structure. */

:root {
  --bg:          #fbfcfd;
  --surface:     #eef1f4;
  --border:      #d9dee4;
  --text:        #3b4252;
  --text-light:  #5a6270;
  --heading:     #0d121b;
  --accent:      #1e4a7a;   /* Doppler blue  */
  --accent-warm: #c1272d;   /* Doppler red   */
  --ink:         #1a1f2b;   /* structural ink: outlines, contours, rules */
  --ink-dot:     #4a515c;   /* halftone dots only. Owner's note 2026-08-21:
                               solid black reads as a dense black mass once the
                               dots grow and fuse, so the screen runs a darker
                               grey while outlines keep full weight. */

  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0e1116;
    --surface:     #181d26;
    --border:      #2a3340;
    --text:        #b8bdc7;
    --text-light:  #8d95a3;
    --heading:     #eef1f5;
    --accent:      #7ea9d8;
    --accent-warm: #e06a6f;
    --ink:         #dfe4ec;  /* reverse halftone: light ink on dark ground */
    --ink-dot:     #aeb7c4;  /* same softening, inverted */
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.essay {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--heading);
  line-height: 1.2;
  font-weight: 600;
}
h1 { font-size: 2.1rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.35rem; margin: 2.5rem 0 0.75rem; }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0 0 0.35rem;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-warm); }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* ---- instruments ---- */

.instrument { margin: 2rem 0; }
.instrument svg { width: 100%; height: auto; display: block; }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.4rem;
  align-items: center;
  padding: 0.6rem 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-light);
}
.controls label { display: inline-flex; align-items: center; gap: 0.5rem; }
.controls input[type="range"] { accent-color: var(--accent); width: 9rem; touch-action: none; }
.controls button {
  font: inherit;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.controls button:hover { border-color: var(--text-light); }
.controls button[aria-pressed="true"] {
  border-color: var(--heading);
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--heading);
}
.controls button[aria-pressed="true"]::before { content: "✓ "; }

.readout { font-family: var(--font-mono); }

/* ---- start-from-zero disclosure ---- */

details.from-zero {
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1.75rem 0;
  font-size: 0.98rem;
  background: var(--surface);
}
details.from-zero summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--heading);
}
details.from-zero summary::marker { color: var(--accent); }

/* ---- focus + a11y ---- */

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
svg [data-drag] { cursor: grab; touch-action: none; }
svg [data-drag]:focus { outline: none; }
svg [data-drag]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- trellis nav ---- */

.trellis {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.15rem;
}
.trellis a { color: var(--text-light); text-decoration: none; }
.trellis a:hover { color: var(--accent); text-decoration: underline; }
/* Current page is marked three ways at once, never by colour alone: a leading
   glyph, heavier weight, and full-strength text against the muted siblings. */
.trellis [aria-current="page"] {
  color: var(--heading);
  font-weight: 500;
}
.trellis [aria-current="page"]::before { content: "▸"; margin-right: 0.35em; }

/* ---- footer nav ---- */

.lessons { list-style: none; padding: 0; }
.lessons li { margin: 0.6rem 0; }
.lessons .coming { color: var(--text-light); }
.lessons .coming::after { content: " · coming"; font-family: var(--font-mono); font-size: 0.8em; }

footer {
  margin-top: 3.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-light);
}

@media print {
  /* Paper has no dark mode and no hue budget worth spending: collapse every
     token to ink on white and let weight, dash pattern and dot area carry the
     meaning, exactly as they do for a colourblind reader on screen. */
  :root {
    --bg: #ffffff;  --surface: #ffffff;  --border: #9aa0a8;
    --text: #000000; --text-light: #333333; --heading: #000000;
    --accent: #000000; --accent-warm: #000000;
    --ink: #000000; --ink-dot: #444444;
  }
  body { background: #ffffff; color: #000000; font-size: 10.5pt; }
  .essay { max-width: none; margin: 0; padding: 0; }

  .controls, .trellis { display: none; }

  /* A collapsible is optional on screen and part of the text on paper. */
  details, details > summary { display: block; }
  details > summary { font-weight: 600; list-style: none; }
  details > summary::-webkit-details-marker { display: none; }

  /* Never split a figure, and never strand a heading at the foot of a page. */
  .instrument-mount, svg { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, summary { break-after: avoid; page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  a { color: #000000; text-decoration: underline; }
  footer a::after { content: " (" attr(href) ")"; font-family: var(--font-mono); font-size: 0.8em; }
}