/* ===================================================================
   THE SPRINT — shared design system (theme-aware)
   Palette: deep navy backgrounds + sprint-board amber accent (with a
   warm gold reward tone and a rose flag for errors/anti-patterns).
   A focused course UI with a DARK default and a LIGHT theme.
   Theming is driven by `html[data-theme="light"|"dark"]` (set by theme.js).
   Everything below reads from semantic CSS variables so both palettes
   stay in sync. Used by index.html, explore.html, lessons.html, flashcards.html.
   Var NAMES are stable across the app; only their values change per theme.
   =================================================================== */

:root{
  /* type */
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --r-sm:10px; --r-lg:20px; --maxw:980px;

  /* ---- DARK palette (default) — deep navy + sprint-board amber ---- */
  --ink:#eef1f8; --muted:#9aa6c0; --faint:#6b7791; --faintest:#434e69; --lead-ink:#d7deec;
  --bg:#0a0f1e; --bg2:#0e1426; --bg-grad1:#16213f; --bg-grad2:#191c34;
  --panel:rgba(18,26,46,.74); --panel-solid:#121a2e;
  --edge:rgba(255,255,255,.08); --edge-hi:rgba(255,255,255,.18);
  --hover:rgba(255,255,255,.06); --track:rgba(255,255,255,.10);
  --nav-bg1:rgba(10,15,30,.92); --nav-bg2:rgba(10,15,30,.62);

  /* brand accents — used as FILLS (button/bar). Three DISTINCT hues so semantically different
     pills stay legible: --cyan is a teal primary (lesson/flashcards/quiz), --amber & --gold are
     the warm reward tones (synthesis/carry/capstone), --rose flags errors/anti-patterns. */
  --gold:#e8963c; --cyan:#2bb5c4; --rose:#e0685c; --amber:#f2b53b;
  /* accent INKS — used as TEXT/borders; darkened in light theme for contrast */
  --cyan-ink:#5cd0dc; --gold-ink:#e8a24a; --rose-ink:#e0685c; --amber-ink:#f2b53b;
  /* accent tints — pill/callout/nav backgrounds + lines (teal 43,181,196 · gold 232,150,60 · rose 224,104,92) */
  --cyan-bg:rgba(43,181,196,.10); --cyan-line:rgba(43,181,196,.38); --cyan-soft:rgba(43,181,196,.16);
  --gold-bg:rgba(232,150,60,.09); --gold-line:rgba(232,150,60,.35);
  --rose-bg:rgba(224,104,92,.09); --rose-line:rgba(224,104,92,.35);
  --callout-cyan:rgba(43,181,196,.08); --callout-gold:rgba(232,150,60,.07); --callout-rose:rgba(224,104,92,.07);
  /* stronger accent lines + soft fills — for the hi-fi app chrome (buttons, cards, seals) */
  --cyan-line-2:rgba(43,181,196,.55); --gold-line-2:rgba(232,150,60,.6); --rose-line-2:rgba(224,104,92,.5);
  --cyan-fill:rgba(43,181,196,.14); --gold-fill:rgba(232,150,60,.12); --rose-fill:rgba(224,104,92,.10);
  --gold-shadow:0 8px 30px rgba(232,150,60,.22); --edge-card:rgba(255,255,255,.12); --surface:rgba(255,255,255,.03);

  --fc-front:linear-gradient(160deg,#131a2e,#0e1426);
  --fc-back:linear-gradient(160deg,#1c1608,#15100c);
  --shadow:0 24px 60px rgba(0,0,0,.5);
}

/* ---- LIGHT palette ---- */
html[data-theme="light"]{
  --ink:#141b29; --muted:#4f5d78; --faint:#5c6579; --faintest:#616a80; --lead-ink:#28313f;
  --bg:#f4f6fa; --bg2:#eceff5; --bg-grad1:#e7edf6; --bg-grad2:#eef0f6;
  --panel:rgba(255,255,255,.74); --panel-solid:#ffffff;
  --edge:rgba(20,30,55,.12); --edge-hi:rgba(20,30,55,.26);
  --hover:rgba(20,30,55,.05); --track:rgba(20,30,55,.10);
  --nav-bg1:rgba(244,246,250,.92); --nav-bg2:rgba(244,246,250,.66);

  /* on light: teal deepens to a readable ink; amber/gold deepen to bronze/amber-brown for contrast */
  --cyan-ink:#0d7a89; --gold-ink:#8a6a12; --rose-ink:#b23b2b; --amber-ink:#8a6a12;
  --cyan-bg:rgba(15,118,130,.12); --cyan-line:rgba(15,118,130,.34); --cyan-soft:rgba(15,118,130,.16);
  --gold-bg:rgba(150,110,20,.12); --gold-line:rgba(150,110,20,.30);
  --rose-bg:rgba(178,59,43,.10); --rose-line:rgba(178,59,43,.30);
  --callout-cyan:rgba(15,118,130,.10); --callout-gold:rgba(150,110,20,.10); --callout-rose:rgba(178,59,43,.08);
  --cyan-line-2:rgba(15,118,130,.5); --gold-line-2:rgba(150,110,20,.5); --rose-line-2:rgba(178,59,43,.5);
  --cyan-fill:rgba(15,118,130,.14); --gold-fill:rgba(150,110,20,.14); --rose-fill:rgba(178,59,43,.10);
  --gold-shadow:0 8px 30px rgba(150,110,20,.20); --edge-card:rgba(20,30,55,.14); --surface:rgba(20,30,55,.03);

  --fc-front:linear-gradient(160deg,#ffffff,#eef2f7);
  --fc-back:linear-gradient(160deg,#fff7e9,#f4ead2);
  --shadow:0 18px 50px rgba(40,50,80,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(1200px 680px at 50% -8%, var(--bg-grad1) 0%, transparent 62%),
    radial-gradient(900px 520px at 84% 8%, var(--bg-grad2) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed; line-height:1.5; -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
a{color:var(--cyan-ink); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.section{padding:34px 0}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.spread{display:flex; justify-content:space-between; align-items:center; gap:14px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---------- top nav ---------- */
.nav{
  position:sticky; top:0; z-index:30; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg,var(--nav-bg1),var(--nav-bg2));
  border-bottom:1px solid var(--edge);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:.02em; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .mark{width:26px; height:26px; flex:none}
.brand small{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); font-weight:500}
.navlinks{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.navlinks a{
  color:var(--muted); font-size:13.5px; font-weight:500; padding:8px 13px; border-radius:9px;
}
.navlinks a:hover{color:var(--ink); background:var(--hover); text-decoration:none}
.navlinks a.active{color:var(--ink); background:var(--cyan-soft)}

/* ---------- theme toggle ---------- */
.theme-toggle{display:inline-grid; place-items:center; width:36px; height:36px; flex:none; padding:0;
  border-radius:9px; border:1px solid var(--edge); background:transparent; color:var(--muted);
  cursor:pointer; font-size:15px; line-height:1; transition:.18s ease}
.theme-toggle:hover{color:var(--ink); border-color:var(--edge-hi); background:var(--hover)}
.theme-toggle:focus-visible{outline:2px solid var(--cyan-ink); outline-offset:2px}
/* the ☾/☀ glyph reads too pale against the light theme — deepen it toward ink */
html[data-theme="light"] .theme-toggle{color:var(--lead-ink)}

/* ---------- type ---------- */
.kicker{font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint)}
.display{font-family:var(--serif); font-weight:500; font-size:clamp(28px,5vw,46px); line-height:1.12; letter-spacing:.01em; margin:.2em 0}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.2}
h2.head{font-size:clamp(22px,3.4vw,24px); margin:0 0 4px}
.lead{font-family:var(--serif); font-size:clamp(17px,2.6vw,19px); color:var(--lead-ink); line-height:1.55}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.serif{font-family:var(--serif)}
.center{text-align:center}

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--edge); border-radius:var(--r);
  padding:22px; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:.2s ease;
}
.card.hover:hover{border-color:var(--edge-hi); transform:translateY(-2px); box-shadow:var(--shadow)}
.card.link{cursor:pointer; display:block; color:var(--ink)}
.card.link:hover{text-decoration:none}

/* ---------- pills / badges ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--edge); color:var(--muted); white-space:nowrap}
.pill.cyan{color:var(--cyan-ink); border-color:var(--cyan-line); background:var(--cyan-bg)}
.pill.gold{color:var(--gold-ink); border-color:var(--gold-line); background:var(--gold-bg)}
.pill.rose{color:var(--rose-ink); border-color:var(--rose-line); background:var(--rose-bg)}
.badge-far{color:var(--rose-ink)} .badge-near{color:var(--amber-ink)} .badge-center{color:var(--cyan-ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--sans);
  font-size:14px; font-weight:600; padding:12px 22px; border-radius:11px; border:1px solid transparent; transition:.18s ease}
.btn.primary{background:var(--cyan); color:#0a1622}
.btn.primary:hover{filter:brightness(1.08); transform:translateY(-1px); text-decoration:none}
.btn.gold{background:var(--gold); color:#16220c}
.btn.gold:hover{filter:brightness(1.07); transform:translateY(-1px); text-decoration:none}
/* outlined gold — a secondary CTA that keeps the reward hue but yields the filled-button
   emphasis to a true primary sitting beside it (e.g. the finale's Export vs Book pair) */
.btn.outline-gold{background:transparent; color:var(--gold-ink); border-color:var(--gold-line-2)}
.btn.outline-gold:hover{background:var(--gold-bg); border-color:var(--gold-ink); color:var(--gold-ink); text-decoration:none; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--edge)}
.btn.ghost:hover{color:var(--ink); border-color:var(--edge-hi); text-decoration:none}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}

/* ---------- progress ---------- */
.bar{height:7px; border-radius:5px; background:var(--track); overflow:hidden}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--gold)); width:0; transition:width .6s ease}
.dots{display:flex; gap:7px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--track); transition:.4s}
.dot.on{background:var(--cyan); box-shadow:0 0 9px var(--cyan)}

/* ---------- part headers ---------- */
.part-tab{display:flex; align-items:baseline; gap:12px; margin:30px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--edge)}
.part-tab .num{font-family:var(--serif); font-size:30px; color:var(--faintest)}
.part-tab .t{font-family:var(--serif); font-size:21px}
.part-tab .s{color:var(--faint); font-size:13px}

/* ---------- lesson list rows ---------- */
.lrow{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--edge); border-radius:var(--r);
  background:var(--panel); cursor:pointer; transition:.18s ease; color:var(--ink); margin-bottom:10px}
.lrow:hover{border-color:var(--edge-hi); transform:translateX(3px); text-decoration:none}
.lrow .chk{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--faint); flex:none; display:grid; place-items:center; font-size:13px; color:var(--cyan-ink)}
.lrow.done .chk{border-color:var(--cyan-line); background:var(--cyan-bg); color:var(--cyan-ink)}
.lrow .ix{font-family:var(--serif); color:var(--faint); width:26px; text-align:center}
.lrow .ti{flex:1; min-width:0} .lrow .ti b{font-weight:600; font-size:15.5px} .lrow .ti div{font-size:12.5px; color:var(--faint)}

/* ---------- callout (lesson body) ---------- */
.callout{border-left:3px solid var(--cyan-ink); background:var(--callout-cyan); padding:14px 18px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:16px 0}
.callout.gold{border-color:var(--gold-ink); background:var(--callout-gold)}
.callout.rose{border-color:var(--rose-ink); background:var(--callout-rose)}
.callout .lab{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.ditches{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0}
@media(max-width:620px){.ditches{grid-template-columns:1fr}}
.ditch{border:1px solid var(--edge); border-radius:var(--r-sm); padding:13px 15px}
.ditch .h{font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:5px}

/* ---------- flashcard ---------- */
.fc-scene{perspective:1600px; max-width:560px; margin:0 auto}
.fc{position:relative; width:100%; aspect-ratio:3/2; cursor:pointer; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.fc.flip{transform:rotateY(180deg)}
.fc-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--r-lg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:30px; border:1px solid var(--edge); box-shadow:var(--shadow)}
.fc-front{background:var(--fc-front)}
.fc-back{background:var(--fc-back); transform:rotateY(180deg)}
.fc-face .cat{position:absolute; top:16px; left:0; right:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--faint)}
.fc-front .q{font-family:var(--serif); font-size:clamp(21px,4vw,26px); line-height:1.3; color:var(--ink)}
.fc-back .a{font-size:16px; line-height:1.55; color:var(--lead-ink)} .fc-back .a b{color:var(--ink)}
.fc-hint{position:absolute; bottom:14px; left:0; right:0; font-size:11px; color:var(--faintest); letter-spacing:.1em}

/* ---------- misc ---------- */
.divider{height:1px; background:var(--edge); margin:26px 0; border:0}
.tag-src{font-size:12px; color:var(--faint); font-style:italic}
footer.site{border-top:1px solid var(--edge); margin-top:40px; padding:26px 0; color:var(--faint); font-size:12.5px; text-align:center; line-height:1.7}
.hidden{display:none!important}
.fade-in{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)}to{opacity:1}}
.eyebrow-quote{font-family:var(--serif); font-style:italic; color:var(--lead-ink); font-size:17px; line-height:1.6}

/* ---------- mobile ---------- */
@media(max-width:620px){
  .wrap{padding:0 15px}
  .section{padding:26px 0}
  body{background-attachment:scroll}
  .nav .wrap{min-height:54px}
  .navlinks a{padding:8px 9px; font-size:12.5px}
  .brand small{display:none}
  .theme-toggle{width:34px; height:34px}
}
@media(prefers-reduced-motion:reduce){
  body, .card, .lrow, .btn, .dot, .bar > i{transition:none}
  .fade-in{animation:none}
}