/* Public pages — landing, auth, legal, errors.
   Built entirely on /static/app/tokens.css (loaded first); no token values are
   duplicated here. Mirrors the app's base rules (app.css) so the public face
   and the app read as one product. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh; background: var(--ground); color: var(--ink);
  font: var(--fs-2)/1.5 var(--font-body);
  font-feature-settings: "tnum";
  display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-1); }
img, svg { max-width: 100%; display: block; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; line-height: 1; text-transform: uppercase; }
.kicker { font: 700 var(--fs-0)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: var(--sp-3); top: -60px; z-index: 60; padding: 10px 16px; border-radius: var(--r-1);
  background: var(--ink); color: var(--ground); font-weight: 700; transition: top var(--t-fast) var(--ease); }
.skip:focus-visible { top: var(--sp-3); text-decoration: none; }

/* ---------- wordmark ---------- */
.wm { position: relative; display: inline-block; font: 800 1.5rem/1 var(--font-display);
  text-transform: uppercase; letter-spacing: .03em; color: var(--ink); padding-bottom: 9px; }
.wm i { position: absolute; left: 1px; bottom: 0; height: 4px; width: 2.4em; border-radius: 2px;
  background: linear-gradient(90deg, var(--vivid-1) 0 60%, var(--vivid-2) 60%); }
a.brand { color: inherit; display: inline-block; }
a.brand:hover { text-decoration: none; }

/* ---------- buttons (app.css .btn, public subset) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: var(--fs-1); white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { background: var(--accent); filter: brightness(1.06); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-dim); }
.btn.block { width: 100%; padding: 12px 18px; font-size: var(--fs-2); }
.btn.sm { padding: 5px 12px; font-size: var(--fs-0); }

/* ---------- alerts (rendered empty when unused → invisible) ---------- */
.alert { border-radius: var(--r-1); padding: 10px 14px; font-weight: 600; font-size: var(--fs-1); margin-bottom: var(--sp-3); }
.alert:empty { display: none; margin: 0; padding: 0; }
.alert.error { background: var(--neg-soft); color: var(--neg); }
.alert.notice { background: var(--accent-soft); color: var(--accent); }

/* ---------- auth shell: one centred card, max 420px ---------- */
.auth-wrap { flex: 1; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); }
.auth { width: 100%; max-width: 420px; }
.auth > .brand { display: table; margin: 0 auto var(--sp-5); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-5); box-shadow: var(--shadow-1); border-top: 4px solid var(--accent); }
.card h1 { font-size: var(--fs-4); margin-bottom: var(--sp-1); }
.card .lede { color: var(--ink-dim); font-size: var(--fs-1); margin-bottom: var(--sp-4); }
.card .lede strong { color: var(--ink); overflow-wrap: anywhere; }

form.stack { display: grid; gap: var(--sp-4); }
form.stack label { display: grid; gap: 5px; font: 700 var(--fs-0)/1.2 var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
form.stack input:not([type="checkbox"]) { padding: 10px 12px; border-radius: var(--r-1); border: 1px solid var(--line-2);
  background: var(--ground); color: var(--ink); font-size: var(--fs-2); text-transform: none; letter-spacing: 0; min-width: 0; width: 100%; }
form.stack input:focus { box-shadow: var(--focus); outline: 0; border-color: var(--accent); }
.hint { font: 400 var(--fs-0)/1.4 var(--font-body); color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
input.code { font: 800 var(--fs-4)/1 var(--font-mono); letter-spacing: .35em; text-align: center; }
input.code::placeholder { color: var(--ink-faint); font-weight: 400; }

.check { display: flex; gap: 10px; align-items: flex-start; font: 400 var(--fs-1)/1.45 var(--font-body);
  color: var(--ink); text-transform: none; letter-spacing: 0; }
.check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }

.or { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0;
  color: var(--ink-faint); font: 700 var(--fs-0)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-links { text-align: center; margin-top: var(--sp-4); color: var(--ink-dim); font-size: var(--fs-1); }
.auth-links a { font-weight: 700; }
.auth-foot { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-0); }
.auth-foot a { color: var(--ink-faint); }
.resend { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4);
  padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--ink-dim); font-size: var(--fs-1); flex-wrap: wrap; }

/* ---------- /join/<code>: the Hall of Fame invite landing ---------- */
.card.join .kicker { margin-bottom: var(--sp-2); }
.card.join h1 { font-size: var(--fs-5); text-wrap: balance; }
.card.join h1 em { font-style: normal; color: var(--accent); }
.join-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.join-code { margin-top: var(--sp-4); color: var(--ink-faint); font-size: var(--fs-0); text-align: center; }
.join-code:empty { display: none; }
.join-code code { font: 700 var(--fs-1)/1.4 var(--font-mono); color: var(--ink-dim); letter-spacing: .06em; }

/* ---------- site header / footer (landing, legal, 404) ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); max-width: 1080px; margin: 0 auto; width: 100%; }
.site-head nav { display: flex; gap: var(--sp-2); align-items: center; }
.site-foot { margin-top: auto; border-top: 1px solid var(--line); padding: var(--sp-5); }
.site-foot .inner { max-width: 1080px; margin: 0 auto; display: grid; gap: var(--sp-3); }
.site-foot .row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: baseline; justify-content: space-between; }
.site-foot nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.site-foot a { color: var(--ink-dim); font-weight: 600; font-size: var(--fs-1); }
.site-foot .fine { color: var(--ink-faint); font-size: var(--fs-0); max-width: 70ch; }

/* ---------- landing ---------- */
.land { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-5) var(--sp-7); }
.hero { position: relative; overflow: hidden; border-radius: var(--r-3); color: var(--on-structure);
  background: linear-gradient(120deg, var(--structure) 0%, var(--structure-2) 100%);
  padding: var(--sp-7) var(--sp-6); box-shadow: var(--shadow-2); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%;
  background: linear-gradient(115deg, transparent 0 46%, var(--vivid-2) 46% 52%, transparent 52% 58%, oklch(from var(--vivid-1) l c h / .55) 58% 66%, transparent 66%);
  opacity: .55; transform: rotate(8deg); pointer-events: none; }
.hero::after { content: attr(data-ghost); position: absolute; right: -0.05em; bottom: -0.28em;
  font: 900 clamp(8rem, 26vw, 15rem)/1 var(--font-display); color: oklch(from var(--on-structure) l c h / .06);
  pointer-events: none; letter-spacing: -.05em; }
.hero > * { position: relative; z-index: 1; }
.hero .kicker { color: var(--on-structure-dim); }
.hero h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); max-width: 18ch; margin: var(--sp-2) 0 var(--sp-3); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent-on-structure); }
.hero .sub { color: var(--on-structure-dim); font-size: var(--fs-2); max-width: 56ch; }
.hero .actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.hero .btn { background: oklch(from var(--structure) calc(l + .1) c h / .8);
  border-color: oklch(from var(--on-structure) l c h / .25); color: var(--on-structure); }
.hero .btn:hover { background: oklch(from var(--structure) calc(l + .16) c h / .9); }
.hero .btn.primary { background: var(--accent-on-structure); border-color: transparent;
  color: oklch(from var(--accent-src) 0.16 0.02 h); }
.hero .btn.primary:hover { background: var(--accent-on-structure); filter: brightness(1.06); }

.features { margin-top: var(--sp-7); }
.features h2 { font-size: var(--fs-4); margin: var(--sp-2) 0 var(--sp-5); max-width: 30ch; }
.fgrid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-4); box-shadow: var(--shadow-1); display: grid; gap: var(--sp-3); align-content: start; position: relative; }
.feature::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: var(--r-2) 0 0 var(--r-2);
  background: linear-gradient(180deg, var(--vivid-1), var(--vivid-2)); }
.feature { padding-left: calc(var(--sp-4) + 6px); }
.feature svg { width: 100%; height: auto; border-radius: var(--r-1); }
.feature h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-3); }
.feature p { color: var(--ink-dim); font-size: var(--fs-1); }

.bring { margin-top: var(--sp-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-5); box-shadow: var(--shadow-1); display: flex; gap: var(--sp-4); align-items: center;
  justify-content: space-between; flex-wrap: wrap; }
.bring h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.bring p { color: var(--ink-dim); max-width: 52ch; }

/* ---------- legal / document pages ---------- */
.doc { flex: 1; width: 100%; max-width: 74ch; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-7); }
.doc h1 { font-size: var(--fs-5); margin-bottom: var(--sp-2); }
.doc .stamp { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  font: 700 var(--fs-0)/1.4 var(--font-body); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.doc .lede { color: var(--ink-dim); margin-bottom: var(--sp-5); max-width: 60ch; }
.doc h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-3);
  margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.doc p, .doc li { color: var(--ink); font-size: var(--fs-2); }
.doc p + p { margin-top: var(--sp-3); }
.doc ul { padding-left: 1.3em; display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.doc .callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; font-weight: 600; }

/* ---------- help: rendered Markdown (docs/*.md via interface/markdown.py) ----------
   One column on phones (tabs, title, contents list, then the text); from 900px the
   contents list becomes a sticky left rail beside the prose. Tokens only. */
.help { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.help-head { display: grid; gap: var(--sp-3); }
.help-head h1 { font-size: var(--fs-5); }
.help-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.help-tabs a { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  font: 700 var(--fs-0)/1.4 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.help-tabs a:hover { background: var(--surface-2); text-decoration: none; }
.help-tabs a[aria-current="page"] { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.help-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-1); }
.help-toc .kicker { margin-bottom: var(--sp-2); }
.help-toc .toc { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.help-toc .toc a { color: var(--ink); font-size: var(--fs-1); font-weight: 600; display: block; }
.help-toc .toc a:hover { color: var(--accent); }
.help .doc { padding: 0; margin: 0; max-width: 74ch; min-width: 0; }
.help .doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 900px) {
  .help { grid-template-columns: 220px minmax(0, 1fr); column-gap: var(--sp-6); }
  .help-head { grid-column: 1 / -1; }
  .help-toc { position: sticky; top: var(--sp-4); }
}
@media (max-width: 640px) { .help { padding: var(--sp-4) var(--sp-3) var(--sp-6); } }

/* Prose — every element the renderer emits. Headings ride on .doc h2; the rest here. */
.prose h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--fs-2);
  letter-spacing: .02em; margin: var(--sp-5) 0 var(--sp-2); color: var(--ink); }
.prose h4 { font-weight: 700; font-size: var(--fs-2); margin: var(--sp-4) 0 var(--sp-2); }
.prose p { margin: var(--sp-3) 0; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { margin: var(--sp-2) 0 0; gap: 4px; }
.prose li::marker { color: var(--ink-dim); font-weight: 700; }
.prose code { font: 400 .92em/1.4 var(--font-mono); background: var(--surface-2); color: var(--ink);
  padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.prose pre { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-1); padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0; overflow-x: auto; }
.prose pre code { background: transparent; padding: 0; border-radius: 0; font-size: var(--fs-1);
  overflow-wrap: normal; white-space: pre; }
.prose blockquote { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-4); border-left: 4px solid var(--accent);
  background: var(--accent-soft); border-radius: var(--r-1); color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }
.prose .table-wrap { overflow-x: auto; margin: var(--sp-3) 0; border: 1px solid var(--line); border-radius: var(--r-1); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--fs-1); background: var(--surface); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prose th { font: 700 var(--fs-0)/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); background: var(--surface-2); white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }
.prose th.ta-r, .prose td.ta-r { text-align: right; }
.prose th.ta-c, .prose td.ta-c { text-align: center; }
.prose a { font-weight: 600; }
.prose strong { color: var(--ink); }
.prose h2 a, .prose h3 a { color: inherit; }

/* ---------- error pages ---------- */
.errpage { flex: 1; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); text-align: center; }
.errpage .code { font: 900 clamp(6rem, 22vw, 11rem)/1 var(--font-display); letter-spacing: -.04em;
  color: var(--structure); }
.errpage .code em { font-style: normal; color: var(--accent); }
.errpage h1 { font-size: var(--fs-4); margin: var(--sp-3) 0 var(--sp-2); }
.errpage p { color: var(--ink-dim); max-width: 46ch; margin: 0 auto var(--sp-5); }
.errpage .actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ---------- small screens (down to 360px) ---------- */
@media (max-width: 640px) {
  .site-head { padding: var(--sp-3) var(--sp-4); }
  .site-head .btn.ghost { padding-inline: 10px; }
  .land { padding: 0 var(--sp-3) var(--sp-6); }
  .hero { padding: var(--sp-6) var(--sp-4); border-radius: var(--r-2); }
  .card { padding: var(--sp-4); }
  .auth-wrap { padding: var(--sp-5) var(--sp-3); align-items: start; }
  .bring { padding: var(--sp-4); }
  .site-foot { padding: var(--sp-4); }
}

/* Motion: only the transitions above; tokens.css zeroes every duration under
   prefers-reduced-motion, so nothing moves for users who opt out. */