/* STOA theme tokens. The dark ground every bench has been re-typing since
   hermes. Import this first; every other STOA sheet reads these variables
   and falls back to the same values if you skip it.

   Per project, override --accent (and friends) on :root after the import.
   Older benches used --rule or --border for --line and --fg for --ink;
   aliases for those are at the bottom so vendored pages keep working. */

:root {
  --bg: #0a0a0f;
  --panel: #13131c;
  --line: #23232f;
  --ink: #e7e7ef;
  --muted: #8a8a9c;
  --accent: #7cc4ff;
  --accent-ink: #06121f;
  --good: #58d68d;
  --bad: #ff6b6b;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* TAXIS P6: one face for maths symbols only, from system fonts so nothing
     downloads. Everything else stays sans. */
  --math: "STIX Two Math", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;

  /* TAXIS P3: ink layers. Context recedes, data stands out. Mint your own
     with palette.js inkLayers(ground); these defaults suit the ground above. */
  --ink-context: #1c1c21;
  --ink-secondary: #7f7f87;
  --ink-data: #bdbdc5;

  /* TAXIS P5: named widths. */
  --measure: 42rem;   /* prose column */
  --wide: 64rem;      /* breakout figures */

  /* aliases kept for pages written against older names */
  --fg: var(--ink);
  --border: var(--line);
  --rule: var(--line);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1100px 700px at 60% -10%, #14142a, transparent);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); }

/* Canvases scale down on narrow screens instead of pushing the page
   sideways (found in the SYMBOLE pilot). */
canvas { max-width: 100%; height: auto; }

footer {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* TAXIS P5: layout widths. Wrap page content in .l-page; children default
   to the prose measure, .l-wide breaks out for figures, .l-screen runs full
   bleed. */
.l-page { display: grid; grid-template-columns: 1fr min(var(--measure), 100% - 32px) 1fr; }
.l-page > * { grid-column: 2; }
.l-page > .l-wide { grid-column: 1 / -1; width: min(var(--wide), 100% - 32px); justify-self: center; }
.l-page > .l-screen { grid-column: 1 / -1; width: 100%; }

/* TAXIS R11: captions lead with a bold headline sentence; data figures end
   with one muted source line. */
figcaption { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 8px; }
figcaption b, figcaption strong { color: var(--ink); font-weight: 600; }
.source { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* TAXIS R15: say "tap" on touch screens and "click" elsewhere.
   <span class="click-word">Click</span><span class="tap-word">Tap</span> */
.tap-word { display: none; }
@media (pointer: coarse) { .tap-word { display: inline; } .click-word { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}