/* ============================================================
   SAT Maths · LEARN — map + lesson styles
   Design system: Economics reference tokens, --brand swapped to SAT blue.
   HARD RULE for this file: no paragraph-of-prose styling in the lesson.
   If a card needs a <p> block to work, the card is wrong.
   ============================================================ */
@import url("/assets/chrome.css");

:root {
  --brand: #0000ff;
  --brand-dark: #0000cc;
  --brand-deep: #000080;
  --brand-soft: #e0e7ff;
  --brand-soft-2: #f5f7ff;
  --text: #1a1d23;
  --muted: #6b7280;
  --border: #e1e4ea;
  --good: #2a8c39;
  --good-bg: #e9f8ec;
  --bad: #c33054;
  --bad-bg: #fde9ee;
  --gold: #f5a623;
  --gold-deep: #d4820a;
  --lock: #b9bfc9;
  --lock-bg: #e8eaef;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--brand-soft-2);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.wrap { max-width: 620px; margin: 0 auto; padding: 8px 18px 120px; }

/* ── Progress bar (sticky) ────────────────────────────────────────────────── */
.learn-bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.learn-bar-in {
  max-width: 620px; margin: 0 auto;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 14px;
}
.star-count {
  display: flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 15px; color: var(--brand-deep);
  white-space: nowrap;
}
.star-count .ic { display: inline-flex; line-height: 1; }
.star-count .ic svg { width: 17px; height: 17px; color: var(--gold); }
.star-count .of { color: var(--muted); font-weight: 600; font-size: 13px; }
.bar-track {
  flex: 1; height: 10px; border-radius: 99px;
  background: var(--lock-bg); overflow: hidden;
}
.bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  width: 0; transition: width 0.7s cubic-bezier(.34, 1.4, .64, 1);
}
.bar-reset {
  background: none; border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; cursor: pointer;
}
.bar-reset:hover { border-color: var(--bad); color: var(--bad); }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.map { position: relative; padding-top: 18px; }
.map-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* "What's actually playable" banner */
.ready-banner {
  position: relative; z-index: 2;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 204, 0.06);
}
.rb-k {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--warning);
}
.rb-t { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; margin: 4px 0 12px; }
.rb-btns { display: flex; flex-direction: column; gap: 8px; }
.rb-btn {
  font: inherit; font-size: 14px; font-weight: 700; text-align: left;
  padding: 12px 14px; border-radius: 12px; cursor: pointer;
  color: #fff; background: var(--u-colour); border: none;
  box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.18);
}
.rb-btn:active { transform: translateY(2px); box-shadow: none; }
.rb-note { font-size: 11.5px; color: var(--muted); margin-top: 11px; }

/* Unit banner */
.unit-band {
  position: relative; z-index: 2;
  margin: 30px 0 8px;
  border-radius: 16px;
  padding: 15px 18px;
  color: #fff;
  background: var(--u-colour);
  box-shadow: 0 8px 22px -8px var(--u-colour);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.unit-band:first-child { margin-top: 6px; }
.unit-band .ub-l { min-width: 0; }
.unit-band .ub-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; opacity: 0.75;
}
.unit-band .ub-title {
  font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-top: 2px;
}
.unit-band .ub-blurb { font-size: 12px; opacity: 0.82; margin-top: 2px; }
.unit-band .ub-stars {
  font-size: 13px; font-weight: 800; white-space: nowrap;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 11px; border-radius: 99px;
  display: flex; align-items: center; gap: 5px;
}
.unit-band .ub-stars .ic { width: 15px; height: 15px; color: var(--gold); }
.unit-band.crowned { box-shadow: 0 0 0 3px var(--gold), 0 10px 26px -8px var(--u-colour); }

/* Node row */
.node-row {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding: 13px 0;
}
.node-slot {
  transform: translateX(var(--x, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform 0.4s ease;
}

/* ── Sprite icons (see _scripts/learn-icons.js) ───────────────────────────
   One <symbol> per icon, painted in currentColor, so an icon takes whatever
   colour its context sets. Sized by font-size-independent width/height —
   these no longer drift with the font the way the old ★ glyph did. */
/* ── "What's on the path" ──────────────────────────────────────────────────
   Static index of every unit and topic, below the board. The map itself is
   built by JS, so without this the page has no readable content on first
   fetch. Deliberately visible: a crawler-only block of 28 hidden topic names
   would be hidden text, and this is genuinely useful as an overview anyway. */
.path-index {
  max-width: 940px; margin: 8px auto 0; padding: 30px 20px 40px;
  border-top: 1px solid var(--border);
}
.path-index h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -0.3px; margin: 0 0 8px;
}
.path-index .pi-intro {
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
  max-width: 660px; margin: 0 0 24px;
}
.pi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
}
.pi-unit {
  border-left: 3px solid var(--u-colour); padding-left: 13px;
}
.pi-unit h3 {
  font-size: 14px; font-weight: 800; margin: 0 0 3px; color: var(--u-colour);
}
.pi-unit .pi-blurb {
  font-size: 11.5px; line-height: 1.45; color: var(--muted); margin: 0 0 9px;
}
.pi-unit ul { list-style: none; margin: 0; padding: 0; }
.pi-unit li {
  font-size: 12.5px; line-height: 1.7; color: var(--text);
}
@media (max-width: 560px) {
  .path-index { padding: 24px 16px 34px; }
  .pi-grid { gap: 16px; }
}

/* The map is a game board, so its H1 carries the page's search intent without
   taking up board space. Content matches what the page is — not cloaking. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Scoped to svg deliberately — the header star counter already owns a
   `.ic` span, and a bare `.ic` rule would squash it. */
svg.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.13em; flex: none; }
/* Inline in a sentence (sheet messages) */
.msg-ic { width: 15px; height: 15px; vertical-align: -0.19em; margin-right: 4px; }

/* Star arc above the node */
.star-arc {
  display: flex; gap: 3px; align-items: flex-end; height: 19px;
}
.star-arc .ic {
  width: 16px; height: 16px;
  color: var(--lock); opacity: 0.55;
  transition: transform 0.3s, color 0.3s, opacity 0.3s;
}
.star-arc .ic:nth-child(2) { transform: translateY(-4px); }
.star-arc .ic.on {
  color: var(--gold); opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(245, 166, 35, 0.45));
}
.star-arc .ic.pop { animation: starPop 0.65s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes starPop {
  0%   { transform: scale(0) translateY(-22px) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.5) translateY(-4px) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) translateY(0) rotate(0); opacity: 1; }
}
.star-arc .ic:nth-child(2).pop { animation-name: starPopMid; }
@keyframes starPopMid {
  0%   { transform: scale(0) translateY(-26px) rotate(-40deg); opacity: 0; }
  60%  { transform: scale(1.5) translateY(-8px) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) translateY(-4px) rotate(0); opacity: 1; }
}

/* The node button */
.node {
  position: relative;
  width: 74px; height: 74px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  font-size: 26px; color: #fff;
  background: var(--u-colour);
  box-shadow: 0 6px 0 0 var(--u-shadow), 0 12px 20px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, box-shadow 0.12s;
  font-family: inherit;
}
.node:active { transform: translateY(4px); box-shadow: 0 2px 0 0 var(--u-shadow), 0 6px 12px -6px rgba(0, 0, 0, 0.3); }
.node .n-num { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
/* Lock / crown inside a node. currentColor does the work: the locked node
   sets `color: var(--lock)`, the mastered node inherits the node's white. */
.node .n-ic { width: 33px; height: 33px; }

.node.locked {
  background: var(--lock-bg); color: var(--lock);
  box-shadow: 0 5px 0 0 #d3d7de;
  cursor: pointer;
}
/* Not authored yet — visibly inert, never playable */
.node.todo {
  background: repeating-linear-gradient(45deg, #eef0f4, #eef0f4 6px, #e6e9ef 6px, #e6e9ef 12px);
  color: #a8afba;
  box-shadow: 0 4px 0 0 #d8dce3;
}
.node.todo .n-num { font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.node.mastered {
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow: 0 6px 0 0 #a8660a, 0 12px 24px -8px rgba(212, 130, 10, 0.6);
}
.node.checkpoint {
  width: 92px; height: 92px; border-radius: 26px;
  font-size: 30px;
}
.node.checkpoint .n-num { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }

/* Current node: a pulsing halo marks where to tap (no label needed) */
.node.current::before {
  content: ''; position: absolute; inset: -9px;
  border-radius: inherit; border: 3px solid var(--u-colour);
  opacity: 0.55;
  animation: halo 1.9s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(0.94); opacity: 0.6; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Node label */
.node-label {
  font-size: 12px; font-weight: 700; color: var(--text);
  text-align: center; max-width: 190px; line-height: 1.35;
}
.node-slot.is-locked .node-label { color: var(--lock); font-weight: 600; }

/* Landing/unlock animations played on return from a lesson */
.node.just-unlocked { animation: unlockPop 0.75s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes unlockPop {
  0%   { transform: scale(0.5) rotate(-12deg); filter: grayscale(1); }
  55%  { transform: scale(1.18) rotate(4deg); filter: grayscale(0); }
  100% { transform: scale(1) rotate(0); filter: grayscale(0); }
}
.node.just-scored { animation: scorePop 0.55s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes scorePop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Confetti */
.confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden;
}
.confetti span {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: fall 2.1s linear forwards;
}
@keyframes fall {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.9; }
}

/* ── Node sheet (tap a node) ──────────────────────────────────────────────── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(12, 14, 22, 0.45);
  backdrop-filter: blur(2px);
  display: none;
}
.sheet-scrim.on { display: block; animation: fade 0.18s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: #fff;
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(.2, .9, .3, 1);
}
.sheet.on { transform: translateY(0); }
.sheet-grip {
  width: 40px; height: 4px; border-radius: 99px; background: var(--border);
  margin: -8px auto 16px;
}
.sheet-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--u-colour, var(--brand));
}
.sheet-title { font-size: 20px; font-weight: 800; letter-spacing: -0.4px; margin: 3px 0 12px; }
.sheet-stars { display: flex; gap: 5px; margin-bottom: 14px; }
.sheet-stars .ic { width: 21px; height: 21px; color: var(--lock); opacity: 0.5; }
.sheet-stars .ic.on { color: var(--gold); opacity: 1; }

.tier-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 13px;
  border: 1.5px solid var(--border); margin-bottom: 8px;
  background: #fff;
}
.tier-row.done { background: var(--good-bg); border-color: #b9e5c2; }
.tier-row.next { border-color: var(--u-colour, var(--brand)); box-shadow: 0 0 0 3px var(--u-soft, var(--brand-soft)); }
.tier-row .t-star { width: 16px; height: 16px; color: var(--lock); opacity: 0.5; }
.tier-row.done .t-star { color: var(--gold); opacity: 1; }
.tier-row .t-body { flex: 1; min-width: 0; }
.tier-row .t-name { font-size: 13px; font-weight: 800; }
.tier-row .t-meta { font-size: 11.5px; color: var(--muted); }
.tier-row .t-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--good);
}

.sheet-btn {
  display: block; width: 100%; text-align: center;
  border: none; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 18px; margin-top: 14px;
  color: #fff; background: var(--u-colour, var(--brand));
  box-shadow: 0 4px 0 0 var(--u-shadow, var(--brand-dark));
}
.sheet-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--u-shadow, var(--brand-dark)); }
.sheet-btn.ghost {
  background: #fff; color: var(--muted);
  border: 1.5px solid var(--border); box-shadow: none;
  text-transform: none; letter-spacing: 0; font-weight: 700;
}
.sheet-note {
  font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 11px;
}
.sheet-lockmsg {
  background: var(--lock-bg); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; color: var(--muted); font-weight: 600;
  margin-bottom: 4px;
}

/* ── Lesson ───────────────────────────────────────────────────────────────── */
.lesson-top {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--border);
}
.lesson-top-in {
  max-width: 620px; margin: 0 auto; padding: 11px 18px;
  display: flex; align-items: center; gap: 12px;
}
.lt-quit {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 21px; line-height: 1; color: var(--muted); padding: 0 2px;
}
.lt-track { flex: 1; height: 12px; border-radius: 99px; background: var(--lock-bg); overflow: hidden; }
.lt-fill {
  height: 100%; border-radius: 99px; background: var(--u-colour, var(--brand));
  width: 0; transition: width 0.4s cubic-bezier(.34, 1.3, .64, 1);
}
.lt-tier {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 99px;
  background: var(--u-soft, var(--brand-soft)); color: var(--u-colour, var(--brand));
  white-space: nowrap;
}

.stage { max-width: 620px; margin: 0 auto; padding: 26px 18px 150px; }

.card-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.card-q {
  font-size: 21px; font-weight: 700; letter-spacing: -0.3px;
  line-height: 1.4; margin-bottom: 18px;
}
.eq {
  font-family: 'Cambria Math', Cambria, Georgia, serif;
  font-size: 1.06em; font-style: italic;
  background: var(--brand-soft-2); border: 1px solid var(--brand-soft);
  border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}

/* Step reveal */
.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 14px 16px;
  animation: stepIn 0.34s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step.blank { border-style: dashed; background: var(--brand-soft-2); }
.step .s-op {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--u-colour, var(--brand)); margin-bottom: 5px;
}
.step .s-math { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; }
.step .s-cap { font-size: 12.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.why {
  margin-top: 8px; background: none; border: 1px dashed var(--border);
  border-radius: 8px; font: inherit; font-size: 11px; font-weight: 700;
  color: var(--muted); padding: 4px 9px; cursor: pointer;
}
.why-out { font-size: 12.5px; color: var(--text); margin-top: 7px; font-weight: 600; }

/* "The move" */
.move-card {
  background: var(--u-colour, var(--brand)); color: #fff;
  border-radius: 18px; padding: 22px 20px; text-align: center;
  box-shadow: 0 12px 30px -12px var(--u-colour, var(--brand));
  animation: stepIn 0.4s cubic-bezier(.2, .9, .3, 1) both;
}
.move-card .m-k {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; opacity: 0.7;
}
.move-card .m-line { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 8px 0 14px; }
.move-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.move-chips span {
  background: rgba(255, 255, 255, 0.2); border-radius: 99px;
  padding: 5px 12px; font-size: 12px; font-weight: 700;
}

/* Options (fill-the-gap) */
.opts { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.opt {
  background: #fff; border: 2px solid var(--border); border-radius: 13px;
  padding: 15px 17px; font: inherit; font-size: 16px; font-weight: 700;
  text-align: left; cursor: pointer; box-shadow: 0 3px 0 0 var(--border);
}
.opt:active { transform: translateY(2px); box-shadow: none; }
.opt.sel { border-color: var(--u-colour, var(--brand)); box-shadow: 0 3px 0 0 var(--u-colour, var(--brand)); }
.opt.right { border-color: var(--good); background: var(--good-bg); box-shadow: 0 3px 0 0 var(--good); }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 3px 0 0 var(--bad); }

/* Type-in */
.typein { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.typein input {
  flex: 1; font: inherit; font-size: 26px; font-weight: 800; text-align: center;
  padding: 16px 14px; border-radius: 14px;
  border: 2.5px solid var(--border); background: #fff; color: var(--text);
  letter-spacing: 1px; min-width: 0;
}
.typein input:focus { outline: none; border-color: var(--u-colour, var(--brand)); }
.typein input.right { border-color: var(--good); background: var(--good-bg); }
.typein input.wrong { border-color: var(--bad); background: var(--bad-bg); animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.typein-hint { font-size: 11.5px; color: var(--muted); margin-top: 9px; font-weight: 600; text-align: center; }

/* Roughpad — LEARN gives it more surface than the shared default. Scoped to
   .stage so the CBSE runners and YoungMath keep their tuned heights. Two
   classes here out-specifies roughpad.css's single-class rules. */
.stage .rp-canvas,
.stage .rp-text { height: 360px; }
@media (max-width: 620px) {
  .stage .rp-canvas { height: 320px; }
  .stage .rp-text { height: 200px; }
}

/* Worked solution — medium/hard, after a wrong answer only */
.solution-block {
  margin-top: 20px; padding-top: 18px;
  border-top: 2px dashed var(--border);
}
.sol-k {
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--bad); margin-bottom: 11px;
}

/* Hint ladder */
.ladder { display: flex; gap: 7px; margin-top: 14px; flex-wrap: wrap; }
.rung {
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 8px 12px; cursor: pointer;
}
.rung:disabled { opacity: 0.4; cursor: not-allowed; }
.rung.used { border-color: var(--u-colour, var(--brand)); color: var(--u-colour, var(--brand)); }
.rung-out {
  margin-top: 10px; background: var(--brand-soft-2); border: 1px solid var(--brand-soft);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; font-weight: 600;
}

/* Trap / Desmos / recap cards */
.mini {
  border-radius: 16px; padding: 18px 18px;
  animation: stepIn 0.36s cubic-bezier(.2, .9, .3, 1) both;
}
.mini.trap { background: #fff7ed; border: 1.5px solid #fed7aa; }
.mini.desmos { background: #ecfdf5; border: 1.5px solid #a7f3d0; }
.mini.recap { background: #fff; border: 1.5px solid var(--border); }
.mini .mi-k {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 9px;
}
.mini.trap .mi-k { color: #c2410c; }
.mini.desmos .mi-k { color: #047857; }
.mini.recap .mi-k { color: var(--muted); }
.mini .mi-line { font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.mini ul { margin: 8px 0 0; padding-left: 19px; }
.mini li { font-size: 14px; font-weight: 600; margin-bottom: 5px; }

/* Footer action bar */
.act-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom));
}
.act-bar-in { max-width: 620px; margin: 0 auto; display: flex; gap: 10px; }
.act {
  flex: 1; border: none; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; text-align: center; text-decoration: none;
  padding: 16px 18px; color: #fff;
  background: var(--u-colour, var(--brand));
  box-shadow: 0 4px 0 0 var(--u-shadow, var(--brand-dark));
}
.act:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--u-shadow, var(--brand-dark)); }
.act:disabled { background: var(--lock-bg); color: var(--lock); box-shadow: 0 4px 0 0 #d3d7de; cursor: not-allowed; }
.act.ghost {
  flex: 0 0 auto; background: #fff; color: var(--muted);
  border: 1.5px solid var(--border); box-shadow: none;
  text-transform: none; letter-spacing: 0;
}
.act.good { background: var(--good); box-shadow: 0 4px 0 0 #1f6b2b; }

/* The lesson's action bar is fixed to the bottom, so the shared footer needs
   room to clear it — otherwise it sits underneath and reads as broken. */
.lesson-footer { margin-bottom: calc(120px + env(safe-area-inset-bottom)); }

.verdict-strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  animation: stepIn 0.3s cubic-bezier(.2, .9, .3, 1) both;
}
.verdict-strip.ok  { background: var(--good-bg); border-top: 2px solid var(--good); }
.verdict-strip.no  { background: var(--bad-bg);  border-top: 2px solid var(--bad); }
.verdict-in { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.verdict-in .v-txt { flex: 1; font-size: 15px; font-weight: 800; }
.verdict-strip.ok .v-txt { color: var(--good); }
.verdict-strip.no .v-txt { color: var(--bad); }
.verdict-in .v-sub { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Result screen */
.result-wrap { text-align: center; padding: 40px 18px 40px; }
.result-stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.result-stars .ic { width: 46px; height: 46px; color: var(--lock); opacity: 0.4; }
.result-stars .ic.on {
  color: var(--gold); opacity: 1;
  filter: drop-shadow(0 5px 14px rgba(245, 166, 35, 0.5));
}
.result-stars .ic.pop { animation: starPop 0.7s cubic-bezier(.34, 1.56, .64, 1) both; }
.result-h { font-size: 27px; font-weight: 800; letter-spacing: -0.6px; }
.result-sub { font-size: 14.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.result-score {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin: 20px auto 4px; padding: 12px 24px; border-radius: 16px;
  background: #fff; border: 1.5px solid var(--border);
}
.result-score b { font-size: 38px; font-weight: 800; letter-spacing: -1px; color: var(--u-colour, var(--brand)); }
.result-score span { font-size: 17px; color: var(--muted); font-weight: 700; }

@media (max-width: 380px) {
  .node { width: 66px; height: 66px; }
  .node.checkpoint { width: 82px; height: 82px; }
  .node-label { font-size: 11px; max-width: 150px; }
}

/* ============================================================
   Journey map — winding trail, tinted regions, gate checkpoints.
   The trail is drawn as two SVG paths in learn-map.js layout(); these
   rules give it its stacking, region backdrops, and node state polish.
   ============================================================ */

/* Trail sits above the region tint but below the nodes. */
.map-svg { z-index: 1; }
.map { padding-top: 8px; }

/* Measure trail from settled positions — no slot slide. */
.node-slot { transition: none; }

/* A little more vertical room so the trail reads as a journey. */
.node-row { padding: 20px 0; }

/* Region backdrop: one tinted panel per unit, painted in layout(). */
.region-bg {
  position: absolute;
  left: -14px; right: -14px;
  z-index: 0;
  border-radius: 26px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rc) 10%, #fff) 0%,
      color-mix(in srgb, var(--rc) 4%, #fff) 100%);
  border: 1px solid color-mix(in srgb, var(--rc) 16%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Region header reads as a place, not a label bar. */
.unit-band {
  margin: 26px 0 6px;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: 0 12px 26px -12px var(--u-colour);
}
.unit-band::before {                     /* soft emblem disc */
  content: '';
  position: absolute; right: 14px; top: 50%;
  width: 78px; height: 78px; transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .28), transparent 62%);
  pointer-events: none;
}
.unit-band .ub-kicker { letter-spacing: 1.6px; }

/* Nodes a touch flatter so the trail is the hero. */
.node { box-shadow: 0 6px 0 0 var(--u-shadow), 0 10px 22px -10px rgba(0, 0, 0, .32); }

/* Cleared: gold coin with a halo — a finished region reads at a glance. */
.node.mastered {
  box-shadow: 0 6px 0 0 #a8660a, 0 0 0 4px rgba(245, 166, 35, .28), 0 12px 24px -8px rgba(212, 130, 10, .55);
}
.node.mastered .n-ic { color: #fff; }

/* Locked: sink into the region as a quiet disc. */
.node.locked { box-shadow: 0 4px 0 0 #d3d7de; opacity: .92; }

/* Current node: a proper "you are here", with a bobbing pin. */
.node.current {
  transform: scale(1.06);
  box-shadow: 0 7px 0 0 var(--u-shadow), 0 0 0 5px #fff, 0 0 0 8px var(--u-colour), 0 16px 30px -10px rgba(0, 0, 0, .4);
}
.node.current::before { inset: -14px; border-width: 4px; }
.here-pin {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  background: var(--u-colour); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);
  animation: pinBob 1.8s ease-in-out infinite;
}
.here-pin::after {
  content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--u-colour); border-bottom: 0;
}
@keyframes pinBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* Gate: the unit test looks like a gate/boss, not another dot. */
.node.checkpoint {
  border-radius: 22px;
  background: linear-gradient(160deg, var(--u-colour), var(--u-shadow));
}
.node.checkpoint::after {
  content: ''; position: absolute; inset: 10px;
  border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .5);
  pointer-events: none;
}
.node.checkpoint.locked { background: var(--lock-bg); }
.node.checkpoint.locked::after { border-color: rgba(0, 0, 0, .12); }

.node-label { font-weight: 800; }
.node-slot.is-locked .node-label { font-weight: 600; }