/* GENERATED by tools/render-docs.mjs. Do not edit by hand.
 * Run: node tools/render-docs.mjs
 *
 * The token blocks immediately below are extracted VERBATIM from
 * css/replay.css. They are not a copy maintained in parallel; re-running the
 * generator re-extracts them, and the drift test fails if this file is stale.
 * That is how the docs pages stay on the same theme as the app without this
 * file being allowed an opinion about the palette.
 */
:root, :root[data-theme="dark"] {
  --accent: #ff8a3d;
  --accent-soft: #ffa163;
  --accent-tint: rgba(255, 138, 61, 0.12);
  --accent-deep: #e0721f;
  /* Text on an accent fill. White on #ff8a3d is 2.35:1, so dark wins here. */
  --on-accent: #0d1117;

  --bg: #0d1117;
  --bg-elev: #161f2b;
  --bg-sunk: #0a0e14;
  --border: #222d3a;
  --border-soft: #1a2431;

  --ink: #e6edf3;
  --ink-muted: #a3b1bf;
  /* 4.5:1 on --bg AND on --bg-elev; the old #6d7d8d was 3.9:1 on
     elevated surfaces, which is where most faint text actually sits. */
  --ink-faint: #808f9e;

  --sage: #6ea87c;
  --mustard: #d9a441;
  --terra: #e5645b;
  --steel: #7a9bb8;

  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --font-serif: ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="light"] {
  /* Orange on white fails contrast as text, so the light theme darkens the
     accent for anything that carries meaning and keeps the bright orange
     for fills only. */
  --accent: #b8500f;
  --accent-soft: #d9670f;
  --accent-tint: rgba(184, 80, 15, 0.10);
  --accent-deep: #8f3d0a;
  --on-accent: #ffffff;

  --bg: #ffffff;
  --bg-elev: #f6f8fa;
  --bg-sunk: #eef1f4;
  --border: #d6dde4;
  --border-soft: #e6ebef;

  --ink: #111820;
  --ink-muted: #4a5764;
  --ink-faint: #626e7b;

  --sage: #2f6b41;
  --mustard: #8a6100;
  --terra: #b3241b;
  --steel: #3f6a8c;
}

/* ─────────────────────────── reset-ish */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--accent); color: var(--on-accent);
  padding: 8px 14px; border-radius: 0 0 4px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ─────────────────────────── masthead */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.masthead {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.masthead-inner { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand-link { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; }
.brand-vol {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-faint);
}
.doc-nav { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.doc-nav a {
  color: var(--ink-muted); text-decoration: none; font-size: 13px;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.doc-nav a:hover { color: var(--ink); }
.doc-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.actions { display: flex; align-items: center; gap: 12px; }
.open-link { font-size: 13px; text-decoration: none; white-space: nowrap; }
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--ink-muted);
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  font-size: 14px; line-height: 1; flex: none;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ─────────────────────────── shell */
/* The measure is the point: about 70ch of prose, never more, whatever the
   window does. The two columns are sized to their content and the PAIR is
   centered, rather than giving the slack to a column: an earlier version
   used 1fr for the contents rail and the whole page drifted right of centre
   on a wide screen. */
.doc-shell {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 80px;
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 70ch);
  justify-content: center; gap: 56px; align-items: start;
}
.doc { min-width: 0; grid-column: 2; }

/* A page with no contents rail (the index) must not reserve the rail's
   column, or it reads as pushed off to the right. */
.doc-shell.is-plain { grid-template-columns: minmax(0, 70ch); }
.doc-shell.is-plain .doc { grid-column: 1; }

.toc {
  position: sticky; top: 76px; grid-column: 1;
  font-size: 12.5px; border-left: 1px solid var(--border); padding-left: 14px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.toc-title {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 8px;
}
.toc a { display: block; color: var(--ink-muted); text-decoration: none; padding: 3px 0; line-height: 1.35; }
.toc a:hover { color: var(--accent); }
.toc-l3 { padding-left: 12px; font-size: 12px; color: var(--ink-faint) !important; }

/* ─────────────────────────── prose */
.doc h1, .doc h2, .doc h3, .doc h4 {
  line-height: 1.25; letter-spacing: -0.015em; scroll-margin-top: 72px;
}
.doc h1 { font-size: 32px; margin: 0 0 8px; }
.doc h2 {
  font-size: 22px; margin: 44px 0 14px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.doc h3 { font-size: 17px; margin: 30px 0 10px; }
.doc h4 { font-size: 15px; margin: 22px 0 8px; color: var(--ink-muted); }
.doc p { margin: 0 0 16px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc li > ul, .doc li > ol { margin: 5px 0 0; }
.doc strong { font-weight: 650; color: var(--ink); }

.anchor {
  margin-left: 8px; color: var(--ink-faint); text-decoration: none;
  font-weight: 400; opacity: 0; transition: opacity .12s;
  /* Not part of the heading's text: copying a heading should yield
     "Live mode", not "Live mode#". */
  user-select: none; -webkit-user-select: none;
}
.doc h1:hover .anchor, .doc h2:hover .anchor,
.doc h3:hover .anchor, .doc h4:hover .anchor,
.anchor:focus { opacity: 1; }
/* On a spec you want to cite a clause, and on touch there is no hover to
   reveal the link with. Where hover does not exist, the anchors just show. */
@media (hover: none) {
  .anchor { opacity: 0.45; }
}

/* ─────────────────────────── code */
.doc code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 4px; padding: 0.1em 0.35em;
  word-break: break-word;
}
.code-block {
  position: relative; margin: 0 0 18px;
  background: var(--bg-sunk); border: 1px solid var(--border); border-radius: 8px;
}
.code-block pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.code-block code {
  background: none; border: 0; padding: 0; font-size: 12.5px;
  line-height: 1.55; color: var(--ink); white-space: pre; word-break: normal;
}
.code-lang {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-faint);
  padding: 5px 9px; pointer-events: none;
}

/* ─────────────────────────── tables */
.table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: 8px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.doc th, .doc td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.doc thead th {
  background: var(--bg-elev); color: var(--ink-muted); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.doc tbody tr:last-child td { border-bottom: 0; }
/* Field-name columns hold identifiers, and an identifier that wraps is a
   lie: "startedAt" split across two lines reads as "start edAt". The name
   column keeps them whole and .table-wrap scrolls if that costs width. */
.doc td:first-child code, .doc th code { white-space: nowrap; }

/* ─────────────────────────── docs index */
.doc-cards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.doc-cards li { margin: 0; }
.doc-cards a {
  display: block; padding: 16px 18px; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
}
.doc-cards a:hover { border-color: var(--accent); }
.doc-cards .card-title { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.doc-cards .card-blurb { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }

/* ─────────────────────────── footer */
.doc-foot { border-top: 1px solid var(--border); padding: 20px 0; }
.doc-foot-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-faint);
}
.doc-foot a { color: inherit; }
.source-link { color: var(--accent); text-decoration: none; }

/* ─────────────────────────── mobile
 * Under 900px the table of contents is not worth a column, so it collapses
 * into a normal block at the top of the page and the prose gets the width.
 */
@media (max-width: 900px) {
  .doc-shell { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 60px; }
  .doc, .toc { grid-column: 1; }
  .toc {
    position: static; max-width: none; max-height: none;
    border-left: 0; border-bottom: 1px solid var(--border);
    padding: 0 0 14px; columns: 2; column-gap: 20px;
  }
  .toc-title { column-span: all; }
  .wrap { padding: 0 16px; }
  .masthead-inner { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 0; }
  .doc-nav { order: 3; width: 100%; margin-left: 0; gap: 14px; font-size: 12px; }
  .actions { margin-left: auto; }
  .open-link { display: none; }
  .doc h1 { font-size: 26px; }
  .doc h2 { font-size: 19px; }
  body { font-size: 15.5px; }
}
@media (max-width: 520px) {
  .toc { columns: 1; }
}

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

@media print {
  .masthead, .toc, .skip, .anchor { display: none; }
  .doc-shell { display: block; padding: 0; }
}