/* Landing chapters (core/home.html partials under core/partials/landing/).
   Loaded after site_toybox.css, only by the landing page. Everything is `.lc*`
   (the chapter kit), `.ds*` / `.dsp*` (design systems) and later `.gm*`,
   `.cn*`, `.nt*`. It reads the Toy Box tokens (--ink, --soft, --card, --border,
   --violet, --ring-strong, --t-chapter ...) and adds two of its own below.
   Docs: docs/landing-page.md. */

:root{
  /* The hero's live signal, promoted so the chapters can use it (it is scoped to .tb-hero there). */
  --mint:#4FE3C1;
  /* One warm highlight: earned things, the single peach accent. Used sparingly. */
  --peach:oklch(81% .1 58);
}

/* ---- the chapter kit ------------------------------------------------------
   One job per chapter, one composition per chapter. Dark chapters flip the Toy
   Box tokens with data-tb-theme="dark" (the same mechanism the hero uses), and
   join the light page with a soft curve instead of a hard edge. */
.lc{position:relative;padding-block:clamp(3.5rem,8vw,6.5rem);scroll-margin-top:6.5rem}
.lc--dark{
  color:var(--ink);
  background:
    radial-gradient(60% 46% at 80% 8%, oklch(36% .15 295 / .5), transparent 70%),
    linear-gradient(180deg, oklch(15% .055 285), oklch(13% .05 280));
  border-radius:clamp(1.5rem,4vw,3.5rem)}
.lc__head h2{font-size:var(--t-chapter);line-height:1.08;letter-spacing:-.02em;margin:0}
/* a chapter heading is two short sentences: each gets its own line, so it never breaks mid-sentence */
.lc__head h2 span{display:block}
.lc__head .line{max-width:54ch;margin:1rem 0 0;color:var(--soft)}
.lc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0}

/* the Auto-Teach demo's label (it is a real Studio course, shown as an example) */
.at-example{margin-inline-end:.35rem;vertical-align:.12em}

/* ---- design systems: the choice rail ------------------------------------- */
.ds__grid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.ds__pick{border:0;margin:0;padding:0;min-width:0;display:grid}
.ds__opt{position:relative;display:block}
.ds__opt + .ds__opt{border-top:1px solid var(--border)}
.ds__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ds__body{display:grid;gap:.2rem;padding:1rem 1rem 1rem 1.2rem;border-radius:var(--r-sm);
  box-shadow:inset 3px 0 0 transparent;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ds__name{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.1;color:var(--ink)}
.ds__says{color:var(--soft);font-size:.95rem;line-height:1.45;max-width:34ch}
/* with no JS the list is plain text: no radio, no selected state, no pointer */
.ds:not(.is-live) .ds__opt input{display:none}
.ds.is-live .ds__opt{cursor:pointer}
.ds.is-live .ds__opt:hover .ds__body{background:var(--hover)}
.ds.is-live .ds__opt input:checked ~ .ds__body{
  background:color-mix(in oklch,var(--violet) 24%,transparent);box-shadow:inset 3px 0 0 var(--mint)}
.ds.is-live .ds__opt input:focus-visible ~ .ds__body{outline:2px solid var(--mint);outline-offset:2px}
.ds__stage{min-width:0;display:grid;justify-items:center;gap:1rem}
.ds__note{margin:0;max-width:46ch;text-align:center;color:var(--soft);font-size:.88rem;line-height:1.5}
.ds__now{display:none;margin:0;color:var(--soft);font-size:.95rem;line-height:1.45;text-align:center}

/* ---- design systems: the preview screen ----------------------------------
   One markup, five skins. Components read only the --p-* variables below, so a
   skin is a block of variables and nothing else. Every colour in a skin block is
   a value copied from the production file named above it (the real worlds cannot
   be loaded here: their rules key off html[data-ui-theme] and body, Clay and
   Material are global and conflict). core/tests/test_landing_design_tokens.py
   checks each hex against that file. */
.dsp{
  --p-bg:#fff;--p-card:#fff;--p-ink:#111;--p-muted:#555;--p-line:#ddd;
  --p-accent:#555;--p-accent-ink:#fff;--p-fill:#555;--p-track:#eee;
  --p-opt:#f4f4f4;--p-opt-border:1px solid transparent;--p-pick:none;
  --p-good:#e6f4ea;--p-good-ink:#111;--p-tutor:#f4f4f4;--p-chip:#eee;--p-chip-ink:#111;
  --p-r-screen:16px;--p-r-card:12px;--p-r-ctl:8px;--p-r-btn:8px;--p-r-pill:999px;
  --p-border-screen:0;--p-border-card:0;
  --p-shadow-screen:none;--p-shadow-card:none;--p-shadow-btn:none;
  --p-font:var(--body);--p-display:var(--display);--p-display-w:700;
  margin:0;width:100%;max-width:34rem;display:grid;gap:.9rem;padding:1.1rem;
  background:var(--p-bg);color:var(--p-ink);font-family:var(--p-font);
  border:var(--p-border-screen);border-radius:var(--p-r-screen);box-shadow:var(--p-shadow-screen)}
.dsp__top{display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-size:.86rem;color:var(--p-muted)}
.dsp__course{font-weight:700;color:var(--p-ink)}
.dsp__xp{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:var(--p-r-pill);
  background:var(--p-chip);color:var(--p-chip-ink);font-family:var(--p-display);font-weight:var(--p-display-w)}
.dsp__prog{height:.55rem;border-radius:var(--p-r-pill);background:var(--p-track);overflow:hidden}
.dsp__prog i{display:block;height:100%;width:37.5%;border-radius:inherit;background:var(--p-fill)}
.dsp__card{position:relative;display:grid;gap:.8rem;padding:1.2rem;background:var(--p-card);
  border:var(--p-border-card);border-radius:var(--p-r-card);box-shadow:var(--p-shadow-card)}
.dsp__step{margin:0;font-size:.8rem;color:var(--p-muted)}
.dsp__q{margin:0;padding-inline-end:5.6rem;font-family:var(--p-display);font-weight:var(--p-display-w);
  font-size:1.4rem;line-height:1.2}
.dsp__opts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.dsp__opt{padding:.75rem 1rem;border:var(--p-opt-border);border-radius:var(--p-r-ctl);background:var(--p-opt);
  font-family:var(--p-display);font-weight:var(--p-display-w);font-size:1.15rem}
.dsp__opt.is-picked{background:var(--p-good);color:var(--p-good-ink);box-shadow:var(--p-pick)}
.dsp__tutor{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.7rem .8rem;border-radius:var(--p-r-ctl);
  background:var(--p-tutor);font-size:.92rem;line-height:1.45}
.dsp__av{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--p-accent)}
.dsp__foot{display:flex;justify-content:flex-end}
.dsp__btn{padding:.65rem 1.4rem;border-radius:var(--p-r-btn);background:var(--p-accent);color:var(--p-accent-ink);
  font-family:var(--p-display);font-weight:700;box-shadow:var(--p-shadow-btn)}
/* art: only the active skin's kit piece is displayed (the others are display:none, so lazy images stay unfetched) */
.dsp__art{display:none}
.dsp__xp .dsp__art{width:1.4rem;height:1.4rem}
.dsp__card .dsp__art{position:absolute;top:.7rem;inset-inline-end:.7rem;width:5.2rem;height:auto}
.dsp[data-skin="clay"] .dsp__art--coin,
.dsp[data-skin="material"] .dsp__art--coin,
.dsp[data-skin="cyberpunk"] .dsp__art--cp,
.dsp[data-skin="retro_pixel"] .dsp__art--rp,
.dsp[data-skin="candy_pop"] .dsp__art--cpo{display:block}

/* Clay: core/css/claymorphism.css (:root). Inflated: cream ground, soft coloured glow, inner highlight. */
.dsp[data-skin="clay"]{
  --p-bg:#FFF8E7;--p-card:#FFFEF5;--p-ink:#1A365D;--p-muted:#4A6FA5;
  --p-accent:#9333EA;--p-accent-ink:#FFFFFF;--p-fill:#00C2FF;--p-track:#F0F8FF;
  --p-opt:#F0F8FF;--p-good:#F0FFF0;--p-good-ink:#1A365D;--p-pick:0 0 0 3px #66CC00;
  --p-tutor:#FFF0F5;--p-chip:#FFFACD;--p-chip-ink:#1A365D;
  --p-r-screen:32px;--p-r-card:28px;--p-r-ctl:20px;--p-r-btn:999px;
  --p-shadow-card:0 10px 24px -8px rgba(74,111,165,.2),inset -6px -6px 13px rgba(74,111,165,.08),inset 5px 6px 16px rgba(255,255,255,.92);
  --p-shadow-btn:0 3px 10px -3px rgba(74,111,165,.16),inset -4px -4px 9px rgba(74,111,165,.06),inset 3px 3px 7px rgba(255,255,255,.92);
  --p-font:'Nunito',system-ui,sans-serif;--p-display:'Fredoka One','Nunito',system-ui,sans-serif;--p-display-w:400}

/* Material: core/css/material_design.css (:root). Flat structure, elevation by standard shadow, small radii. */
.dsp[data-skin="material"]{
  --p-bg:#F3F4F6;--p-card:#FFFFFF;--p-ink:#1A365D;--p-muted:#4A6FA5;
  --p-accent:#4A6FA5;--p-accent-ink:#FFFFFF;--p-fill:#00C2FF;--p-track:#E5E7EB;
  --p-opt:#F3F4F6;--p-opt-border:1px solid #D1D5DB;--p-good:#E8F9FF;--p-good-ink:#1A365D;--p-pick:0 0 0 2px #00A3D9;
  --p-tutor:#F3F4F6;--p-chip:#E8F9FF;--p-chip-ink:#1A365D;
  --p-r-screen:16px;--p-r-card:12px;--p-r-ctl:8px;--p-r-btn:9999px;
  --p-shadow-card:0px 1px 3px 1px rgba(0,0,0,.15),0px 1px 2px 0px rgba(0,0,0,.3);
  --p-font:'Nunito',system-ui,sans-serif;--p-display:'Fredoka One','Nunito',system-ui,sans-serif;--p-display-w:400}

/* Cyberpunk: core/cyberpunk/shell.css (--cx-*). Dark glass with a hairline edge; neon is rationed. */
.dsp[data-skin="cyberpunk"]{
  --p-bg:#060b1b;--p-card:linear-gradient(146deg,rgba(23,35,74,.96),rgba(10,16,40,.97));
  --p-ink:#f3f7ff;--p-muted:#aab9df;
  --p-accent:linear-gradient(115deg,#702dde,#bd1bdd 72%,#dc24c4);--p-accent-ink:#f3f7ff;
  --p-fill:#00e5ff;--p-track:#1b2650;
  --p-opt:#0a1129;--p-opt-border:1px solid rgba(109,139,228,.31);--p-good:#101a35;--p-good-ink:#30e6b0;--p-pick:0 0 0 2px #00e5ff;
  --p-tutor:#101a35;--p-chip:#101a35;--p-chip-ink:#ffbf4a;
  --p-r-screen:18px;--p-r-card:14px;--p-r-ctl:10px;--p-r-btn:10px;
  --p-border-screen:1px solid rgba(109,139,228,.31);--p-border-card:1px solid rgba(109,139,228,.31);
  --p-shadow-screen:0 0 48px rgba(124,77,255,.14)}

/* Retro Pixel: core/retro_pixel/shell.css (--rp-*). Square corners, 2px boundaries, a short hard shadow, a gold action. */
.dsp[data-skin="retro_pixel"]{
  --p-bg:#10182c;--p-card:#172842;--p-ink:#f6f2dc;--p-muted:#b6c5d9;
  --p-accent:#ffd66e;--p-accent-ink:#172034;--p-fill:#90d784;--p-track:#3f567b;
  --p-opt:#213653;--p-opt-border:2px solid #6c86ad;--p-good:#90d784;--p-good-ink:#172034;--p-pick:0 0 0 2px #82c9f4;
  --p-tutor:#101c32;--p-chip:#213653;--p-chip-ink:#ffd66e;
  --p-r-screen:4px;--p-r-card:4px;--p-r-ctl:4px;--p-r-btn:4px;--p-r-pill:4px;
  --p-border-screen:2px solid #6c86ad;--p-border-card:2px solid #6c86ad;
  --p-shadow-card:3px 3px 0 #070d19;--p-shadow-btn:3px 3px 0 #070d19;
  --p-font:'IBM Plex Sans',system-ui,sans-serif;--p-display:'Pixelify Sans','IBM Plex Sans',system-ui,sans-serif;--p-display-w:700}
.dsp[data-skin="retro_pixel"] .dsp__btn{border:2px solid #b8862f}

/* Candy Pop: core/candy_pop/shell.css (--cpo-*). A light world: pearl surfaces, strawberry action, a short flat offset shadow. */
.dsp[data-skin="candy_pop"]{
  --p-bg:#FFF8F4;--p-card:#FFFFFF;--p-ink:#2D223F;--p-muted:#685A73;
  --p-accent:#B82463;--p-accent-ink:#FFFFFF;--p-fill:#FF85B1;--p-track:#EDE5EF;
  --p-opt:#EEE7FF;--p-opt-border:1px solid #E5D5DF;--p-good:#DDF4E8;--p-good-ink:#226C4B;--p-pick:0 0 0 2px #226C4B;
  --p-tutor:#FFE3EE;--p-chip:#FFEACD;--p-chip-ink:#875014;
  --p-r-screen:24px;--p-r-card:18px;--p-r-ctl:12px;--p-r-btn:12px;
  --p-border-card:1px solid #E5D5DF;--p-shadow-card:0 5px 0 #EADBE4;--p-shadow-btn:0 3px 0 #861244;
  --p-font:'CPO DM Sans',system-ui,sans-serif;--p-display:'CPO Fredoka','CPO DM Sans',system-ui,sans-serif;--p-display-w:600}

/* the switch: a short crossfade, only for people who have not asked for less motion */
@media (prefers-reduced-motion:no-preference){
  .dsp.is-swap{animation:dsp-in .2s var(--ease) both}
}
@keyframes dsp-in{from{opacity:.35}to{opacity:1}}

@media (max-width:880px){
  .ds__grid{grid-template-columns:minmax(0,1fr)}
  .ds__says{max-width:none}
  /* live: the list becomes one row of pills you can swipe, and the screen it changes stays right under it */
  .ds.is-live .ds__pick{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding:.2rem .1rem .5rem}
  .ds.is-live .ds__pick::-webkit-scrollbar{display:none}
  .ds.is-live .ds__opt{flex:none}
  .ds.is-live .ds__opt + .ds__opt{border-top:0}
  .ds.is-live .ds__body{padding:.55rem 1.1rem;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--border)}
  .ds.is-live .ds__name{font-size:1rem;white-space:nowrap}
  .ds.is-live .ds__says{display:none}
  .ds.is-live .ds__opt input:checked ~ .ds__body{box-shadow:inset 0 0 0 2px var(--mint)}
  .ds.is-live .ds__now{display:block}
}
@media (max-width:420px){
  .dsp{padding:.8rem}
  .dsp__card{padding:.95rem}
  .dsp__q{font-size:1.2rem;padding-inline-end:4.2rem}
  .dsp__card .dsp__art{width:4rem}
}