/* public/css/onboarding.css — the landing page and the warm-up (DECISIONS 59, 60; revised Round 7). Colors only from the
   themes.css tokens. The hero is the OG image made real: a heavy black headline, and a problem card with a thick ink border,
   a big prompt, a boxed answer field beside a black submit button, and four pips that fill with violet ✱. The warm-up view
   is that card alone (no menus, no footer), and the first home view after it lets the menus arrive. Loaded on every page. */

/* ---------------------------------------------------------------- hero */
.ob-hero { display: grid; gap: var(--s5) var(--s7); align-items: center; padding: var(--s5) 0 var(--s6); }
@media (min-width: 900px) { .ob-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); padding: var(--s7) 0 var(--s7); } }
.landing .hero-title { font: 800 clamp(2.25rem, 7.2vw, 4.5rem)/1.02 var(--font-display); letter-spacing: -0.035em; margin: 0 0 var(--s4); }
.landing .hero-title svg.ast { width: 0.4em; height: 0.4em; vertical-align: 0.55em; }
.landing .hero-sub { font-size: clamp(1.0625rem, 2.4vw, 1.3125rem); line-height: 1.45; max-width: 30rem; margin: 0 0 var(--s3); }
.ob-hero-alt { margin: 0; }
.landing .nowrap { white-space: nowrap; }
@media (max-width: 640px) { .ob-hero { padding-top: var(--s3); gap: var(--s4); } .landing .hero-sub { margin-bottom: 0; } }

/* ---------------------------------------------------------------- the card */
.ob-card { border: 3px solid var(--ink); background: var(--bg); padding: var(--s5); min-width: 0; }
@media (max-width: 640px) { .ob-card { padding: var(--s4); border-width: 2px; } }
.ob-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); margin: 0; font: 0.875rem/1.4 var(--font-mono); color: var(--muted); }
.ob-top b { color: var(--ink); font-weight: 700; }
.ob-where { min-width: 0; overflow-wrap: anywhere; }
.ob-top .nw { white-space: nowrap; }
.ob-prompt { font: 800 clamp(2.25rem, 9vw, 3.75rem)/1.08 var(--font-display); letter-spacing: -0.025em; margin: var(--s4) 0 var(--s5); overflow-wrap: anywhere; white-space: pre-line; }
.ob-prompt.story { font: 500 clamp(1.125rem, 3.6vw, 1.3125rem)/1.45 var(--font-ui); letter-spacing: 0; }
.ob-prompt.done { color: var(--muted); margin-bottom: var(--s3); }
.ob-prompt.done:not(.story) { font-size: clamp(1.5rem, 6vw, 2.25rem); }
.ob-card .ptable-wrap { overflow-x: auto; margin: 0 0 var(--s4); }

.ob-answer-row { display: flex; gap: var(--s3); align-items: stretch; }
.ob-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s2); border: 3px solid var(--ink); background: var(--field); padding: 0 var(--s3); }
.ob-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.ob-field input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; padding: var(--s2) 0; font: 700 clamp(1.625rem, 6vw, 2.25rem)/1.2 var(--font-ui); outline: none; }
.ob-field .affix { font: 600 clamp(1.25rem, 5vw, 1.75rem)/1 var(--font-ui); color: var(--muted); }
.ob-field .affix.unit { font-size: 1rem; }
.ob-submit { flex: none; font-size: 1.125rem; font-weight: 800; padding: 0 var(--s5); min-height: 56px; }
@media (max-width: 380px) { .ob-submit { padding: 0 var(--s3); } }
.ob-hint { margin: var(--s2) 0 0; }
.ob-error { margin: var(--s2) 0 0; font-weight: 600; }
.ob-skip { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-list); min-height: 44px; padding: 0; }

/* ---------------------------------------------------------------- the result: one line, one lesson, Next */
.ob-result { margin: 0; }
.ob-award { font: 800 1.625rem/1.3 var(--font-ui); margin: 0 0 var(--s3); word-spacing: 0.15em; }
.ob-award .mark { font-weight: 800; }
.ob-award.wrong, .ob-award.skipped { font-weight: 600; font-size: 1.25rem; }
.ob-lesson { margin: 0 0 var(--s4); font-size: var(--fs-body); line-height: 1.5; border-left: 3px solid var(--ink); padding: var(--s1) 0 var(--s1) var(--s3); }
.ob-lesson .tip-label { margin-right: var(--s2); }
.ob-lesson[data-lesson="nice"] { border: 0; padding: 0; font: 800 1.25rem/1.3 var(--font-display); }
.ob-line { margin: calc(-1 * var(--s3)) 0 var(--s4); color: var(--muted); }
.ob-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0; }
.ob-go .button { font-size: 1.125rem; font-weight: 800; min-height: 52px; padding: 12px var(--s5); }
.ob-par { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 var(--s2); }
.ob-ring { width: 14px; height: 14px; color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) .ob-result { animation: ob-in 180ms ease-out; }
}
html[data-motion="full"] .ob-result { animation: ob-in 180ms ease-out; }
@keyframes ob-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the four pips */
.ob-squares { list-style: none; display: flex; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; }
.ob-sq { width: 32px; height: 32px; display: grid; place-items: center; border: 2px solid var(--rule); font: 800 1rem/1 var(--font-ui); color: var(--ink); }
.ob-sq[data-state="current"] { border-color: var(--ink); }
.ob-sq[data-state="ast"] { background: var(--accent); border-color: var(--accent); }
.ob-sq[data-state="ast"] svg.ast { color: var(--bg); width: 18px; height: 18px; }
.ob-sq[data-state="xp"] { border-color: var(--ink); }
.ob-sq[data-state="xp"]::before { content: "✓"; }
.ob-sq[data-state="missed"] { border-color: var(--muted); color: var(--muted); }
.ob-sq[data-state="missed"]::before { content: "✗"; }

/* ---------------------------------------------------------------- what you get */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.features li { display: flex; gap: var(--s3); align-items: flex-start; line-height: 1.45; }
.feat-text b { display: block; }
.feat-text > span { color: var(--muted); font-size: var(--fs-list); }
.feat-icon { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 2px solid var(--ink); font: 800 0.75rem/1 var(--font-ui); }
.feat-icon svg.icon { width: 20px; height: 20px; }
.feat-icon.ast svg.ast { width: 18px; height: 18px; }
.feat-icon .xp-mark { font: 800 0.75rem/1 var(--font-ui); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- every course */
.sec-h .meta { font-weight: 400; margin-left: var(--s2); }
.course-list { columns: 15rem; column-gap: var(--s6); }
.course-group { margin: 0 0 var(--s4); }
.course-group .group-name { margin: 0 0 var(--s2); break-after: avoid; }
.course-track { break-inside: avoid; margin: 0 0 var(--s4); }
.course-track h4 { font: 700 var(--fs-body)/1.3 var(--font-ui); margin: 0 0 var(--s1); }
.course-track ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-list); line-height: 1.5; }
.course-track li { display: flex; gap: var(--s2); }
.course-track .lv { flex: none; width: 2ch; text-align: right; font: 0.75rem/1.9 var(--font-mono); color: var(--muted); }
.landing-start { display: block; margin-top: var(--s5); }
.landing-start .linkish { color: var(--muted); }

/* ---------------------------------------------------------------- the isolated warm-up view (Round 7) */
.ob-solo { padding-top: var(--s6); }
@media (min-width: 641px) { .ob-solo { padding-top: var(--s8); } }
.ob-solo .ob-card { max-width: 32rem; margin: 0 auto; }
body:has(main.ob-solo) .site-footer .footer-links { display: none; }
body:has(main.ob-solo) .site-footer { border-top: 0; margin-top: var(--s5); }
.ob-skip-all .linkish { color: var(--muted); font-size: var(--fs-meta); }

/* The header's level and wallet arrive with the first answer (the first view of the warm-up). */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) body:has(main[data-reveal="1"]) .site-header :is([data-testid="header-level"], [data-testid="header-wallet"]) { animation: ob-fade 700ms ease-out both; }
  html:not([data-motion="reduce"]) .ob-par.is-new { animation: ob-fade 500ms ease-out both; }
}
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }

/* The finish: short, one button. */
.ob-finish { max-width: 32rem; margin: 0 auto; text-align: left; }
.ob-finish h1 { font: 800 clamp(2rem, 7vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.03em; margin: 0 0 var(--s3); }
.ob-finish-big { font: 800 clamp(1.5rem, 5vw, 2rem)/1.2 var(--font-ui); display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--s2); }
.ob-dot-sep { color: var(--muted); font-weight: 400; }
.ob-cta { font-size: 1.1875rem; font-weight: 800; min-height: 56px; padding: 14px var(--s6); margin-top: var(--s4); }
.ob-save-line { margin-top: var(--s5); font-size: var(--fs-list); }

/* The first home view after the warm-up: the menus arrive, and the three places to go are marked (Round 7). */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="reduce"]) body:has([data-testid="first-note"][data-key="welcome-home"]) .site-header .nav { animation: ob-fade 900ms ease-out both; }
}
body:has([data-testid="first-note"][data-key="welcome-home"]) .nav-list :is([data-testid="nav-courses"], [data-testid="nav-box"], [data-testid="nav-shop"]) {
  text-decoration-thickness: 3px; text-decoration-color: var(--ink); font-weight: 700; }