/* paper.css — THE RECORD register.
 *
 * Undercut has two surfaces and they are deliberately different objects.
 *
 *   nocturne.css  THE GAME. Dark, for the instance in front of you: the
 *                 editor, the byte bar, the claim. Someone playing.
 *   paper.css     THE RECORD. Light, for what has been measured: the figures,
 *                 the field, the method. Someone deciding whether to believe
 *                 any of it.
 *
 * The register is the argument. A page that asks you to check a measurement
 * should read like a paper, not like a casino — numbered figures, captions
 * that state the method and the source, tabular numerals, hairlines instead of
 * boxes, and no motion at rest. Every claim on this surface names the file it
 * comes from so a reader can go and disagree with it.
 *
 * Palette is ink on warm paper. The accent is the violet the dark side already
 * uses, dropped to ink weight so the two surfaces read as one project; the
 * bronze is reserved for RECORDS and nothing else, so "this is the deepest
 * anyone has been" has a colour of its own.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ground:#fbfaf7;
  --surface:#fff;
  --well:#f3f1ea;
  --ink:#1d1836;
  --ink-dim:#4a4460;
  /* 5.01:1 on --ground. The obvious lighter grey (#7d7791) measures 4.09 and
     fails AA — and this token carries the figure captions, the table headers
     and the source citations, which is the small text a record page most
     needs read. Measured, not eyeballed. */
  --ink-faint:#6f6982;
  --rule:color-mix(in oklab, var(--ink) 12%, transparent);
  --rule-strong:color-mix(in oklab, var(--ink) 26%, transparent);
  --rule-faint:color-mix(in oklab, var(--ink) 7%, transparent);
  --accent:#4c3fa8;
  --accent-soft:#efedfb;
  /* records only. Never decoration. */
  --record:#8a5a24;
  --record-soft:#f3ece0;
  --good:#0e7a4e;
  --bad:#b3352f;
  --font:"Inter",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --measure:64ch;
  --pad:clamp(18px,4vw,40px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.62;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px; margin:0 auto; padding:0 var(--pad)}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
a:hover{border-bottom-color:var(--accent)}
h1,h2,h3{line-height:1.14; letter-spacing:-0.025em; font-weight:600; margin:0}
h1{font-size:clamp(32px,5.4vw,50px); font-weight:700; letter-spacing:-0.033em}
h2{font-size:clamp(21px,2.9vw,27px); margin-top:0}
h3{font-size:16px; font-weight:600}
p{margin:0 0 14px; max-width:var(--measure)}
code,.mono,td.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
code{font-size:.88em; background:var(--well); padding:1px 5px; border-radius:3px}

/* ---- chrome ------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:20; background:color-mix(in oklab,var(--ground) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule);
}
.hdr .wrap{display:flex; align-items:center; gap:18px; height:56px}
.brand{font-weight:700; letter-spacing:.14em; font-size:12px; text-transform:uppercase}
.brand a{color:var(--ink); border:0}
.nav{margin-left:auto; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.nav a{font-size:12.5px; color:var(--ink-dim); border:0}
.nav a:hover{color:var(--ink)}
.nav a.cta{
  color:var(--surface); background:var(--ink); border-radius:999px;
  padding:6px 14px; font-weight:500;
}
.nav a.cta:hover{background:var(--accent)}

/* ---- rhythm ------------------------------------------------------------- */
section{padding:clamp(38px,6vw,66px) 0; border-top:1px solid var(--rule-faint)}
section:first-of-type{border-top:0}
.eyebrow{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; margin:0 0 14px;
}
.lede{font-size:clamp(16px,2vw,18.5px); color:var(--ink-dim); max-width:60ch}
.hero h1{margin-bottom:16px; max-width:17ch}
.hero .lede{margin-bottom:26px}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-block; padding:10px 20px; border-radius:999px; font-size:14px;
  font-weight:500; border:1px solid var(--ink); color:var(--surface);
  background:var(--ink); cursor:pointer;
}
.btn:hover{background:var(--accent); border-color:var(--accent)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--well); color:var(--ink); border-color:var(--ink)}

/* ---- figures: the whole point of this surface ---------------------------- */
figure{margin:0}
.fig{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:8px; overflow:hidden;
}
.fig-head{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--rule); background:var(--well);
  font-size:11px; letter-spacing:.05em; color:var(--ink-dim);
}
.fig-head .mono{font-size:11px}
.tag{
  margin-left:auto; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid var(--rule-strong);
  color:var(--ink-faint); font-weight:600;
}
.tag.live{color:var(--good); border-color:color-mix(in oklab,var(--good) 40%,transparent)}
.tag.measured{color:var(--record); border-color:color-mix(in oklab,var(--record) 40%,transparent)}
figcaption{
  font-size:12.5px; color:var(--ink-faint); line-height:1.55;
  margin-top:10px; max-width:78ch;
}
figcaption b{color:var(--ink-dim); font-weight:600}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:9px 14px; text-align:left; border-bottom:1px solid var(--rule-faint)}
th{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; background:var(--surface);
}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right; font-size:13px}
tr.best td{background:var(--record-soft)}
tr.best td:first-child{box-shadow:inset 3px 0 0 var(--record)}
.rec{color:var(--record); font-weight:600}
.dim{color:var(--ink-faint)}
.win{color:var(--good)}
.scroll{overflow-x:auto}

/* ---- prose blocks ------------------------------------------------------- */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px}
.cols h3{margin-bottom:6px}
.cols p{font-size:14px; color:var(--ink-dim); margin-bottom:0}
.note{
  border-left:2px solid var(--rule-strong); padding:2px 0 2px 16px;
  color:var(--ink-dim); font-size:14px; max-width:66ch;
}
.term{
  background:var(--ink); color:#e9e6f5; border-radius:8px; padding:16px 18px;
  font-family:var(--mono); font-size:12.5px; line-height:1.85; overflow-x:auto;
}
.term .c{color:#9d95c4}
.term .ok{color:#7fd6a6}
.term b{color:#fff; font-weight:500}

footer{
  border-top:1px solid var(--rule); padding:26px 0 44px;
  font-size:12.5px; color:var(--ink-faint);
}
footer a{color:var(--ink-dim)}

@media (max-width:560px){
  .hdr .wrap{height:auto; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; gap:10px}
  .nav{gap:12px}
  th,td{padding:8px 10px}
}
/* Motion on events only; nothing on this surface moves at rest. */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── the nocturne compatibility layer ─────────────────────────────────────
 *
 * The game was built dark, and its markup carries hundreds of inline
 * `var(--color-*)` references. Rather than rewrite every one of them by hand —
 * which is how a colour lands in the wrong place and nobody notices — the
 * nocturne TOKEN NAMES are redefined here in cream. The game's own component
 * CSS and markup are then correct by construction on this ground.
 *
 * The ramp INVERTS. On the dark original, `neutral-100` was the brightest and
 * therefore the most prominent; here the most prominent thing is the darkest.
 * So low numbers map to ink and high numbers map to paper, not the reverse.
 * Getting this backwards yields a page that is technically legible and
 * completely wrong: emphasis where the design meant recession.
 */
:root{
  --color-bg:var(--ground);
  --color-text:var(--ink);
  --color-divider:var(--rule);

  /* prominent -> ink; recessive -> paper */
  --color-neutral-100:var(--ink);
  --color-neutral-200:var(--ink);
  --color-neutral-300:var(--ink-dim);
  --color-neutral-400:var(--ink-dim);
  --color-neutral-500:var(--ink-faint);
  --color-neutral-600:var(--ink-faint);
  --color-neutral-700:var(--rule-strong);
  --color-neutral-800:var(--rule);
  --color-neutral-900:var(--well);

  --color-accent:var(--accent);
  --color-accent-2:var(--accent);
  --color-accent-100:var(--accent);
  --color-accent-200:var(--accent);
  --color-accent-300:var(--accent);
  --color-accent-400:var(--accent);
  --color-accent-500:color-mix(in oklab, var(--accent) 55%, var(--ground));
  --color-accent-600:color-mix(in oklab, var(--accent) 40%, var(--ground));
  --color-accent-700:color-mix(in oklab, var(--accent) 26%, var(--ground));
  --color-accent-800:var(--accent-soft);
  --color-accent-900:var(--accent-soft);
  --color-accent-2-100:var(--accent);
  --color-accent-2-200:var(--accent);
  --color-accent-2-300:var(--accent);
  --color-accent-2-400:var(--accent);
  --color-accent-2-500:color-mix(in oklab, var(--accent) 55%, var(--ground));
  --color-accent-2-600:color-mix(in oklab, var(--accent) 40%, var(--ground));
  --color-accent-2-700:color-mix(in oklab, var(--accent) 26%, var(--ground));
  --color-accent-2-800:var(--accent-soft);
  --color-accent-2-900:var(--accent-soft);

  --color-success:var(--good);
  --color-danger:var(--bad);
  --color-warning:#8a6410;

  --font-heading:var(--font);
  --font-body:var(--font);
  --font-heading-weight:600;
  /* the four tokens the game markup still names */
  --color-surface:var(--surface);
  --radius-md:8px;
  --shadow-md:0 6px 20px color-mix(in oklab, var(--ink) 14%, transparent);
  --shadow-lg:0 14px 40px color-mix(in oklab, var(--ink) 20%, transparent);
}

/* ── the component classes the game pages use (nocturne's names) ─────────
 * These lived in nocturne.css until D24 dropped it; on cream they were dead
 * classes and every .input rendered as a bare browser field. Defined once. */
.btn-primary{display:inline-block;padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:500;border:1px solid var(--ink);color:var(--surface);background:var(--ink);cursor:pointer;font-family:var(--font)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-secondary{display:inline-block;padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:500;border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;font-family:var(--font)}
.btn-secondary:hover{background:var(--well)}
.btn-ghost{display:inline-block;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:500;border:1px solid var(--rule-strong);color:var(--ink-dim);background:transparent;cursor:pointer;font-family:var(--font)}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink);background:var(--well)}
.btn-block{display:block;width:100%;text-align:center}
.btn:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled{opacity:.45;cursor:default}
.input{box-sizing:border-box;padding:8px 10px;border-radius:6px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);font:13px var(--font)}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.input.mono{font-family:var(--mono)}
.tag-accent{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,transparent)}

/* ── the workshop's instruments (seam-ui.js) ──────────────────────────────
 * Shared by play, board and solves: the trace, the notebook, the diff, the
 * free board. Small monospace, hairlines, no motion. */
.instruments{margin-top:10px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.instruments summary{cursor:pointer;padding:8px 12px;font:600 10.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);list-style:none;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.instruments summary::-webkit-details-marker{display:none}
.instruments summary .chips{margin-left:auto;display:flex;gap:4px}
.instruments[open] summary{border-bottom:1px solid var(--rule)}
.chip{font:600 10px var(--mono);padding:2px 7px;border-radius:999px;border:1px solid var(--rule-strong);color:var(--ink-dim);background:transparent;cursor:pointer}
.chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.instruments .body{padding:10px 12px;overflow-x:auto}
.instruments .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
table.trace{border-collapse:collapse;font:11px/1.5 var(--mono);width:100%}
table.trace th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:3px 8px;border-bottom:1px solid var(--rule)}
table.trace td{padding:2px 8px;border-bottom:1px solid var(--rule-faint);white-space:nowrap;vertical-align:top}
table.trace td.st{color:var(--ink-dim)} table.trace td.st b{color:var(--ink);font-weight:600}
table.trace tr.err td{color:var(--bad)}
table.trace .ok{color:var(--good)} table.trace .bad{color:var(--bad)} table.trace .bad i{font-style:normal;color:var(--ink-faint)}
.trace-foot{font:11px var(--mono);color:var(--ink-faint);margin-top:8px}
.sym-t{font:600 9.5px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin:6px 0 4px}
pre.sym{margin:0;font:11px/1.55 var(--mono);color:var(--ink);white-space:pre-wrap;word-break:break-all;background:var(--well);border-radius:6px;padding:8px 10px}
.diff-head{font:11px var(--mono);color:var(--ink-faint);margin:6px 0 4px}
.diff{font:11px/1.5 var(--mono);columns:2;column-gap:20px;column-width:150px}
.diff div{break-inside:avoid;white-space:pre}
.diff .dk{color:var(--ink-faint)} .diff .dm{color:var(--bad);text-decoration:line-through} .diff .dp{color:var(--good)}
table.fb{border-collapse:collapse;font:12px/1.5 var(--mono);width:100%}
table.fb th{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:4px 8px;border-bottom:1px solid var(--rule)}
table.fb td{padding:4px 8px;border-bottom:1px solid var(--rule-faint);white-space:nowrap}
table.fb .anon{color:var(--ink-faint);font-style:italic} table.fb .nick{font-weight:600} table.fb .you{color:var(--record);font-weight:600;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
table.fb tr.mine td{background:var(--record-soft)} table.fb .prov{font-style:normal;color:var(--ink-faint);margin-left:2px}
table.fb .tag{color:var(--ink-dim)}
.board-empty{font-size:12px;color:var(--ink-faint);padding:8px 0}
.solve{border:1px solid var(--rule);border-radius:8px;padding:12px 14px;margin-top:12px;background:var(--surface)}
.solve-head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:12.5px;margin-bottom:6px}
.solve-head .tag{margin-left:auto}
.tag.bad{color:var(--bad);border-color:color-mix(in oklab,var(--bad) 40%,transparent)}