/* Illustrated explainers — shared design system. Vanilla CSS, no external deps. */
:root {
  --navy: #1a2b4a;
  --blue: #1456b0;
  --green: #0a7d2c;
  --red: #c0392b;
  --amber: #b9770e;
  --light: #f3f6fb;
  --border: #cfd8e6;
  --ink: #1f2937;
  --muted: #5b6678;
  --bg: #ffffff;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(20, 40, 80, .08), 0 6px 24px rgba(20, 40, 80, .06);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ---- top nav ---- */
.topbar {
  position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.topbar a { color: #cfe0ff; text-decoration: none; font-size: 14px; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .brand { font-weight: 700; color: #fff; font-size: 15px; letter-spacing: .2px; }
.topbar .spacer { flex: 1; }
.topbar .pill { background: rgba(255,255,255,.14); padding: 2px 10px; border-radius: 999px; font-size: 12px; }

/* ---- layout ---- */
.wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px 80px; }
.hero { padding: 40px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.hero h1 { font-size: 2rem; color: var(--navy); margin: 0 0 8px; line-height: 1.2; }
.hero p.lede { font-size: 1.1rem; color: var(--muted); margin: 0; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag { font-size: 12px; background: var(--light); border: 1px solid var(--border); color: var(--muted); padding: 3px 10px; border-radius: 999px; }
.tag.byo { background: #eafaef; border-color: #b6e3c4; color: var(--green); font-weight: 600; }

h2 { color: var(--navy); font-size: 1.5rem; margin: 44px 0 8px; }
h3 { color: var(--navy); font-size: 1.15rem; margin: 26px 0 6px; }
p { margin: 10px 0; }
a { color: var(--blue); }
code { font-family: var(--mono); background: var(--light); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* ---- interactive panel / card ---- */
.panel {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin: 18px 0;
}
.panel h4 { margin: 0 0 12px; color: var(--navy); font-size: 1rem; }
.controls { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin: 8px 0 14px; }
.ctrl { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.ctrl label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.ctrl label .val { color: var(--blue); font-family: var(--mono); }
input[type=range] { width: 100%; accent-color: var(--blue); }
input[type=text], textarea, select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; width: 100%; color: var(--ink);
}
textarea { resize: vertical; font-family: var(--mono); font-size: 13px; }

button {
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--navy);
  background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 8px; transition: filter .15s, background .15s;
}
button:hover { filter: brightness(1.12); }
button.ghost { background: #fff; color: var(--navy); }
button.ghost:hover { background: var(--light); }
button:disabled { opacity: .45; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }

/* ---- chips / tokens ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 13px; padding: 4px 9px; border-radius: 7px; background: var(--light); border: 1px solid var(--border); }
.chip.hot { background: #fdecea; border-color: #f1b0a8; color: var(--red); }
.chip.on { background: #eafaef; border-color: #b6e3c4; color: var(--green); }
.chip.sel { background: #e7efff; border-color: #a9c6f5; color: var(--blue); }

/* ---- bars ---- */
.bar { height: 14px; background: var(--blue); border-radius: 4px; transition: width .3s ease; }
.barrow { display: grid; grid-template-columns: 90px 1fr 56px; gap: 10px; align-items: center; margin: 6px 0; font-size: 13px; }
.barrow .lbl { font-family: var(--mono); color: var(--muted); text-align: right; }
.barrow .num { font-family: var(--mono); color: var(--blue); }

svg { max-width: 100%; height: auto; display: block; }
.note { background: #fff8e6; border: 1px solid #e6cf8a; color: #6b5a16; border-radius: 10px; padding: 12px 14px; margin: 16px 0; font-size: .94rem; }
.note.green { background: #eafaef; border-color: #b6e3c4; color: #1d5b30; }
.callout { border-left: 4px solid var(--blue); background: var(--light); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 16px 0; }

.footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
.footer a { color: var(--blue); }

/* ---- catalog grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: var(--radius);
        padding: 14px 16px; background: #fff; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(20,40,80,.12); }
.card .kind { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.card.ours .kind { color: var(--green); }
.card.curated .kind { color: var(--blue); }
.card h4 { margin: 6px 0 4px; color: var(--navy); font-size: 1.02rem; }
.card p { margin: 0; font-size: .88rem; color: var(--muted); }
.phasehdr { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 6px; }
.phasehdr h2 { margin: 0; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; color: var(--muted); margin: 10px 0 18px; }
.legend b.ours { color: var(--green); }
.legend b.curated { color: var(--blue); }
.searchbar { width: 100%; font-size: 1rem; padding: 12px 14px; margin: 8px 0 6px; }

/* ---- sequential prev / next nav (injected by app.js) ---- */
.prevnext { display: flex; justify-content: space-between; gap: 14px; margin: 52px 0 0; }
.prevnext .pn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; background: #fff; box-shadow: var(--shadow); transition: border-color .12s, transform .12s; }
.prevnext .pn:hover { border-color: var(--blue); transform: translateY(-2px); }
.prevnext .pn.next { text-align: right; align-items: flex-end; }
.prevnext .pn .dir { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--muted); text-transform: uppercase; }
.prevnext .pn .t { color: var(--blue); font-weight: 600; }
.prevnext .pn.empty { border: none; background: none; box-shadow: none; }
.topbar .tbnav { display: flex; align-items: center; gap: 12px; margin-left: 14px; }
.topbar .tbnav a { font-size: 13px; white-space: nowrap; }
.topbar .tbnav .of { font-size: 12px; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .topbar .tbnav .of { display: none; } .prevnext { flex-direction: column; } .prevnext .pn.next { text-align: left; align-items: flex-start; } .prevnext .pn.empty { display: none; } }

/* ============================================================
   v2 · CINEMATIC DARK LAYER (appended override — Apple-style)
   Dark premium canvas + neon accents. Interactive .panel widgets
   stay as light "paper islands": the original palette vars are
   re-declared inside .panel so all JS/SVG var() colors resolve
   to the proven light-theme values. Never use light literals in
   page chrome; use the vars below.
   ============================================================ */
:root {
  --navy: #eaf1ff;            /* heading ink is now light */
  --blue: #6db4ff;
  --green: #3ddc84;
  --red: #ff7a6e;
  --amber: #ffc24d;
  --violet: #b78cff;
  --cyan: #4cc9f0;
  --light: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.14);
  --ink: #dfe7f5;
  --muted: #93a0b8;
  --bg: #0a0e17;
  --panel-bg: #ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --grad: linear-gradient(100deg, #eaf1ff 0%, #3ddc84 45%, #4cc9f0 75%, #b78cff 100%);
  --grad-btn: linear-gradient(135deg, #0ba360 0%, #0891b2 100%);
}
html { background: #0a0e17; }
body {
  background:
    radial-gradient(60vw 40vh at 12% -8%, rgba(61,220,132,.14), transparent 60%),
    radial-gradient(55vw 40vh at 95% 5%, rgba(76,201,240,.12), transparent 60%),
    radial-gradient(70vw 50vh at 50% 115%, rgba(183,140,255,.10), transparent 60%),
    #0a0e17;
  background-attachment: fixed;
}
/* faint dot-grid wash */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(90vw 90vh at 50% 8%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(90vw 90vh at 50% 8%, #000 0%, transparent 75%);
}
.wrap { position: relative; z-index: 1; }

/* glass topbar */
.topbar {
  background: rgba(12,16,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.topbar a { color: #b9c6e0; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .pill { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); color: #cfe0ff; }
.topbar .tbnav .of { color: rgba(255,255,255,.45); }

/* cinematic hero */
.hero { border-bottom-color: rgba(255,255,255,.10); padding: 56px 0 22px; }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -.02em; font-weight: 800; line-height: 1.08;
  background: var(--grad); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: heroshine 9s ease-in-out infinite alternate;
}
@keyframes heroshine { 0% { background-position: 0% 0; } 100% { background-position: 100% 0; } }
.hero p.lede { color: #aeb9d0; font-size: 1.12rem; max-width: 64ch; }

h2 { color: #f2f6ff; letter-spacing: -.01em; font-weight: 750; }
h2::before {
  content: ""; display: inline-block; width: 22px; height: 4px; border-radius: 3px;
  background: var(--grad-btn); margin: 0 10px 5px 0; vertical-align: middle;
  box-shadow: 0 0 12px rgba(61,220,132,.55);
}
h3 { color: #e7edfa; }
a { color: var(--blue); }
code { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.10); color: #cfe0ff; }
.tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #a7b3ca; }
.tag.byo { background: rgba(61,220,132,.12); border-color: rgba(61,220,132,.4); color: #3ddc84; }

/* notes & callouts → tinted glass */
.note { background: rgba(255,194,77,.09); border-color: rgba(255,194,77,.35); color: #ffd98a; }
.note.green { background: rgba(61,220,132,.09); border-color: rgba(61,220,132,.35); color: #8fe6b4; }
.note a, .callout a { color: #9fd0ff; }
.callout { background: rgba(109,180,255,.08); border-left-color: #6db4ff; color: #c9d7ef; }

/* buttons (page chrome) */
button {
  border: none; background: var(--grad-btn); color: #fff;
  box-shadow: 0 6px 20px rgba(11,163,96,.35);
}
button:hover { filter: brightness(1.12); box-shadow: 0 8px 26px rgba(11,163,96,.5); }
button.ghost { background: rgba(255,255,255,.08); color: #dfe7f5; border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
button.ghost:hover { background: rgba(255,255,255,.14); }

/* bars */
.bar { background: var(--grad-btn); box-shadow: 0 0 14px rgba(61,220,132,.35); }
.barrow .num { color: var(--green); }

/* ---- LIGHT ISLAND: interactive widgets keep the original paper look.
       Re-declare the original palette so every var() used by page JS/SVG
       inside a .panel resolves exactly as designed. ---- */
.panel {
  --navy: #1a2b4a; --blue: #1456b0; --green: #0a7d2c; --red: #c0392b; --amber: #b9770e;
  --light: #f3f6fb; --border: #cfd8e6; --ink: #1f2937; --muted: #5b6678; --bg: #ffffff;
  --shadow: 0 1px 3px rgba(20,40,80,.08), 0 6px 24px rgba(20,40,80,.06);
  background: #fff; color: #1f2937;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
.panel code { background: #eef2f9; border: none; color: #1f2937; }
.panel .note { background: #fff8e6; border-color: #e6cf8a; color: #6b5a16; }
.panel .note.green { background: #eafaef; border-color: #b6e3c4; color: #1d5b30; }
.panel .callout { background: #f3f6fb; border-left-color: #1456b0; color: #1f2937; }
.panel a { color: #1456b0; }
.panel button { border: 1px solid #1a2b4a; background: #1a2b4a; color: #fff; box-shadow: none; }
.panel button.ghost { background: #fff; color: #1a2b4a; border-color: #cfd8e6; }
.panel .bar { background: #1456b0; box-shadow: none; }
.panel .barrow .num { color: #1456b0; }

/* catalog cards → dark glass tiles with accent glow */
.card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--acc, #3ddc84);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--acc, #3ddc84) 35%, transparent);
}
.card h4 { color: #eef3ff; }
.card p { color: #98a5bd; }
.card.ours .kind { color: var(--acc, #3ddc84); }
.card.curated .kind { color: #9fb8dd; }
.card .done { float: right; font-size: 12px; color: #3ddc84; }
.phasehdr h2 { background: none; }
.phasehdr .cnt { color: #7f8ca6; font-size: .9rem; }
.legend { color: #93a0b8; }
.legend b.ours { color: #3ddc84; }
.legend b.curated { color: #9fb8dd; }
.searchbar {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #eaf1ff;
  border-radius: 12px; outline: none;
}
.searchbar::placeholder { color: #7f8ca6; }
.searchbar:focus { border-color: rgba(61,220,132,.6); box-shadow: 0 0 0 3px rgba(61,220,132,.15); }

/* prev/next → glass */
.prevnext .pn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.prevnext .pn:hover { border-color: var(--green); box-shadow: 0 0 22px rgba(61,220,132,.2); transform: translateY(-3px); }
.prevnext .pn .t { color: #cfe0ff; }
.footer { border-top-color: rgba(255,255,255,.10); color: #7f8ca6; }
.footer a { color: #9fd0ff; }

/* ---- motion: reading bar + scroll reveal (injected by app.js) ---- */
#readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100;
  background: var(--grad); box-shadow: 0 0 12px rgba(76,201,240,.8);
  transition: width .1s linear;
}
.rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rvd, 0s); }
.rv.in { opacity: 1; transform: none; }

/* progress (catalog) */
.progressline { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; }
.progressline .track { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.progressline .fill { height: 100%; border-radius: 99px; background: var(--grad-btn); box-shadow: 0 0 14px rgba(61,220,132,.5); transition: width .6s ease; }
.progressline .pct { font-family: var(--mono); font-size: 13px; color: #3ddc84; min-width: 88px; }
.resume-btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px;
  background: var(--grad-btn); color: #fff; padding: 9px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(11,163,96,.4);
}
.resume-btn:hover { filter: brightness(1.1); }

/* big stat blocks (hero) */
.statrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.stat {
  flex: 1 1 120px; text-align: center; padding: 14px 10px; border-radius: 14px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
}
.stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.stat span { font-size: 12px; color: #8d9ab3; }

@media (max-width: 560px) { .hero h1 { font-size: 1.9rem; } }

/* ============================================================
   v3 · SHARED GAME/QUIZ COMPONENTS (used by quiz.html, learn/,
   and scenario drills — extracted from the Foundry patterns)
   ============================================================ */
.choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.choice { cursor: pointer; text-align: left; border-radius: 10px; padding: 10px 13px; font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--ink); box-shadow: none; }
.choice:hover { border-color: var(--blue); filter: none; }
.choice.good { border-color: var(--green); background: rgba(61,220,132,.12); }
.choice.bad { border-color: var(--red); background: rgba(255,122,110,.12); }
.choice:disabled { cursor: default; opacity: .75; }
.choice .kbd { float: right; font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 0 6px; }
.fb2 { font-size: 13.5px; border-radius: 10px; padding: 10px 13px; margin-top: 10px; display: none; }
.fb2.ok { display: block; background: rgba(61,220,132,.10); border: 1px solid rgba(61,220,132,.4); color: #8fe6b4; }
.fb2.no { display: block; background: rgba(255,122,110,.10); border: 1px solid rgba(255,122,110,.4); color: #ffb3aa; }
.shake { animation: ill-shake .35s; }
@keyframes ill-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.term { font-family: var(--mono); font-size: 13px; background: #0d1320; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 18px; margin-top: 14px; min-height: 100px; line-height: 1.75; }
.term .sys { color: #7f8ca6; } .term .warn { color: var(--amber); } .term .okx { color: var(--green); } .term .badx { color: var(--red); }
.trust { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.trust .bar2 { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.trust .fill2 { height: 100%; border-radius: 99px; background: var(--grad-btn); transition: width .4s; }
.trust .lbl2 { font-family: var(--mono); font-size: 12.5px; color: var(--green); min-width: 110px; }
/* score ring (quiz results) */
.ring { position: relative; width: 130px; height: 130px; margin: 10px auto; }
.ring svg { transform: rotate(-90deg); }
.ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 850; font-size: 1.7rem; color: #eef3ff; }
/* mastery-ladder rungs (learn pages) */
.ladder { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.rung { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--muted); }
.rung.done { color: var(--green); border-color: rgba(61,220,132,.5); background: rgba(61,220,132,.10); }
/* exercise checklist */
.exl { list-style: none; margin: 8px 0; padding: 0; }
.exl li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px dashed rgba(255,255,255,.10); }
.exl input[type=checkbox] { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--green); flex: none; }
.exl .xt { flex: 1; font-size: 14px; }
.exl .hintbtn { flex: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--blue);
  background: none; border: 1px solid rgba(109,180,255,.4); border-radius: 999px; padding: 2px 10px; box-shadow: none; }
.exl .hint2 { display: none; font-size: 13px; color: #9fb0cc; background: rgba(109,180,255,.07);
  border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 7px; }
.exl li.open .hint2 { display: block; }
.exl li.ck .xt { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(61,220,132,.6); }
/* module block on learn pages */
.mod { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035);
  padding: 22px 24px; margin: 26px 0; }
.mod > h2 { margin-top: 0; }
.lens { background: rgba(183,140,255,.08); border: 1px solid rgba(183,140,255,.35); border-radius: 12px;
  padding: 13px 16px; margin: 16px 0 4px; font-size: .94rem; color: #d5c5f5; }
.lens b { color: #e6dbff; }
.lens .lt { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--violet); margin-bottom: 5px; }