/* Tokens mirror docs/sprint-brain/design/design-language.md §5 verbatim.
   At integration this block is replaced by the @fable/design-tokens export. */
:root {
  --bg: #FAF7F2;
  --surface: #FFFFFF;
  --paper: #FFFDF7;
  --paper-pulse: #F5EEDD;
  --ink: #1C1917;
  --ink-muted: #57534E;
  --rule: #D8D2C8;
  --accent: #9A4A00;
  --ok: #166534;
  --err: #B91C1C;
  --focus: #1D4ED8;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r0: 0; --r1: 2px; --r2: 6px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  --text-xs: 13px; --text-sm: 14px; --text-base: 16px; --text-lg: 20px;
  --text-xl: 25px; --text-2xl: 31px; --text-3xl: 39px; --text-4xl: 49px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-theme="dark"] {
  --bg: #141210;
  --surface: #1D1A17;
  --paper: #211E1A;
  --paper-pulse: #322C24;
  --ink: #ECE7DF;
  --ink-muted: #A8A29E;
  --rule: #3A352F;
  --accent: #E8853A;
  --ok: #4CC38A;
  --err: #F87171;
  --focus: #93C5FD;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  transition: background-color 150ms, color 150ms;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}
.wrap { max-width: 780px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r1); }
h1, h2 { font-family: var(--font-display); font-weight: 560; line-height: 1.15; }
h1 { font-size: var(--text-2xl); margin: var(--s2) 0; }
.mono, pre { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.page-head { margin-bottom: var(--s5); }
.picker-header, .crumb { color: var(--ink-muted); }
.fineprint { font-size: var(--text-xs); color: var(--ink-muted); }

/* picker */
.picker { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .picker { grid-template-columns: 1fr 1fr; } }
.card {
  display: block; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r1); padding: var(--s4) var(--s5);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
}
.card h2 { font-size: var(--text-lg); margin: var(--s1) 0; }
.card-cat {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
}
.card-hook { margin: var(--s1) 0; }
.card-meta { font-size: var(--text-sm); color: var(--ink-muted); margin: var(--s1) 0 0; }

/* challenge page */
.prompt-box { margin: var(--s4) 0; }
.sect-label { font-size: var(--text-sm); color: var(--ink-muted); font-family: var(--font-body); font-weight: 400; margin: 0 0 var(--s1); }
.prompt {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r1);
  padding: var(--s4); font-size: var(--text-sm); line-height: 1.45;
  white-space: pre-wrap; overflow-x: auto; margin: 0;
}
.controls { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0; }
.btn {
  font-family: var(--font-body); font-size: var(--text-base);
  min-height: 44px; padding: var(--s2) var(--s4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r2); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn-quiet { border-style: dashed; color: var(--ink-muted); }
.replay-badge {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted);
}
.empty-state { color: var(--ink-muted); border: 1px dashed var(--rule); border-radius: var(--r1); padding: var(--s3) var(--s4); }

/* lanes */
.lanes { display: grid; gap: var(--s4); margin: var(--s4) 0; }
.lane {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r1);
  padding: var(--s3) var(--s4);
}
.lane-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.lane-name { font-family: var(--font-mono); font-weight: 600; }
.lane-text {
  font-size: var(--text-sm); line-height: 1.45; white-space: pre-wrap;
  max-height: calc(3 * 1.45 * var(--text-sm) + 8px); height: calc(3 * 1.45 * var(--text-sm) + 8px);
  overflow-y: auto; margin: var(--s2) 0; border-bottom: 1px dashed var(--rule); padding-bottom: var(--s1);
}
/* Fixed 3-line height keeps cards stable WHILE streaming; once a lane is
   terminal it prints compactly — short answers stop floating in a void
   (2026-07-14 design pass). */
.lane[data-settled="1"] .lane-text {
  height: auto; min-height: calc(1.45 * var(--text-sm) + 8px);
}
.lane-ticker { font-size: var(--text-sm); color: var(--ink-muted); text-align: right; }
.verdict-detail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--s1); }

/* stamps — fixed rotations, never random (design §6.2) */
.stamp {
  display: inline-block; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs);
  border: 2px solid currentColor; border-radius: var(--r0); padding: 2px 10px;
}
.stamp-ok { color: var(--ok); transform: rotate(-2deg); }
.stamp-err { color: var(--err); transform: rotate(1.5deg); }
@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: stamp-in 120ms ease-out; }
  @keyframes stamp-in { from { scale: 1.15; } to { scale: 1; } }
}

.winner-banner {
  font-family: var(--font-mono); font-size: var(--text-base);
  border: 2px solid var(--ok); color: var(--ok);
  border-radius: var(--r0); padding: var(--s3) var(--s4); margin: var(--s4) 0;
  transform: rotate(-1deg);
}

.scoring-note { margin: var(--s5) 0; font-size: var(--text-sm); color: var(--ink-muted); }
.scoring-note summary { cursor: pointer; color: var(--ink); }
.share-row { display: flex; align-items: center; gap: var(--s3); }
.toast { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ok); }

/* receipt (share page + 404) */
.receipt {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r1);
  padding: var(--s4) var(--s5); margin: var(--s4) 0; position: relative;
}
.receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 98% 100%, 96% 20%, 94% 100%, 92% 20%, 90% 100%, 88% 20%, 86% 100%, 84% 20%, 82% 100%, 80% 20%, 78% 100%, 76% 20%, 74% 100%, 72% 20%, 70% 100%, 68% 20%, 66% 100%, 64% 20%, 62% 100%, 60% 20%, 58% 100%, 56% 20%, 54% 100%, 52% 20%, 50% 100%, 48% 20%, 46% 100%, 44% 20%, 42% 100%, 40% 20%, 38% 100%, 36% 20%, 34% 100%, 32% 20%, 30% 100%, 28% 20%, 26% 100%, 24% 20%, 22% 100%, 20% 20%, 18% 100%, 16% 20%, 14% 100%, 12% 20%, 10% 100%, 8% 20%, 6% 100%, 4% 20%, 2% 100%, 0 20%);
}
.receipt-row { display: flex; align-items: baseline; gap: var(--s2); font-size: var(--text-sm); }
.receipt-row .leader {
  flex: 1; height: 1em;
  background-image: radial-gradient(circle, var(--ink-muted) 0.75px, transparent 0.75px);
  background-size: 6px 6px; background-position: center;
}
.receipt pre { margin: 0; font-size: var(--text-sm); line-height: 1.45; overflow-x: auto; }

blockquote.prose { border-left: none; margin: var(--s4) 0; font-size: var(--text-lg); font-family: var(--font-display); }

.site-footer {
  margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule);
  font-size: var(--text-sm); color: var(--ink-muted);
  display: flex; gap: var(--s2); flex-wrap: wrap;
}

/* spend ledger (L3): the live-budget receipt on every challenge page */
.spend-ledger {
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r1);
  padding: var(--s3) var(--s4); margin: var(--s4) 0 0;
  color: var(--ink-muted); overflow-x: auto;
}

/* The hidden attribute must always win — author display rules otherwise defeat it. */
[hidden] { display: none !important; }

/* live path */
.live-confirm { margin: var(--s4) 0; }
.live-confirm .fineprint { font-size: var(--text-xs); color: var(--ink-muted); }
#turnstile-box { margin: var(--s3) 0; min-height: 66px; }
.stamp-muted { color: var(--ink-muted); transform: rotate(-1.5deg); }
.reconcile-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--s1); }