/* ═══════════════════════════════════════════════════════════════════════════
   BayRen Academy — DESIGN SYSTEM (Phase 2 of docs/product-directive.md)
   Tokens → type scale → components. Pages use these; they do not restyle them.
   Loaded after main.css (the shared estate system) and before academy.css
   (page layouts). Documented in docs/design-system.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Brand → semantic. Every colour in the Academy comes from one of these. */
  --primary:        var(--navy);        /* #0b2a49 */
  --primary-hover:  var(--navy-700);
  --primary-soft:   var(--navy-50);
  --primary-ink:    #ffffff;
  --accent:         var(--gold);        /* #d8b04c — reward, progress, "now" */
  --accent-strong:  #7d6319;            /* gold for SMALL text: 5.3:1 on paper (gold-700 was 2.9:1) */
  --accent-large:   #9a7a27;            /* gold for large headings / icons: 3.8:1 */
  --accent-soft:    var(--gold-100);
  --accent-faint:   var(--gold-50);
  --success:        #1c8f57;
  --success-soft:   #e6f6ed;
  --success-ink:    #0f5e38;
  --warning:        #b7791f;
  --warning-soft:   #fdf3e1;
  --danger:         #c9423f;
  --danger-soft:    #fdecec;
  --danger-ink:     #8f2b29;
  --info:           var(--navy-700);
  --info-soft:      #eaf1fa;

  --background:         var(--bg);          /* warm paper */
  --background-deep:    #efece4;            /* a shade below the page — sections, rails */
  --surface:            #ffffff;
  --surface-elevated:   #ffffff;
  --surface-sunken:     var(--surface-2);
  --text-primary:       var(--ink);
  --text-secondary:     var(--text);
  --text-muted:         var(--muted);
  --border:             var(--line);
  --border-strong:      var(--line-strong);

  /* Spacing scale (4-based) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* Elevation: two levels only */
  --elev-1: var(--shadow-sm);
  --elev-2: var(--shadow-md);

  /* Motion: one language. Fast for state, medium for entrance, slow for reward. */
  --m-fast: 140ms var(--ease-out);
  --m-med:  260ms var(--ease-out);
  --m-slow: 520ms var(--ease-out);
  --m-spring: 420ms var(--ease-spring);
}

/* ── 2. The laptop step ──────────────────────────────────────────────────────
   Asaf, 28 Aug: "the text is a bit too small for the laptop screen, adjust how
   things are arranged for phones as well as laptops."

   He was right, and the cause was structural: EVERY clamp() in the scale below
   saturates by about 1150px, and there was no min-width media query above 940px
   anywhere in any of the three sheets. A 1440px laptop therefore got exactly the
   type a 1160px one got — phone-sized, in a 680px column. Measured live before
   this: body 16px, .t-caption 13.8px, .t-meta 11.8px, .tiny 12.2px.

   ONE lever rather than fifty edits: step the ROOT, and every rem in the system
   — including the rem maxima of those clamps — grows with it. 375px is
   untouched by construction, because the first step is at 1024px. Percentages,
   not px, so a student who set a bigger font in their browser finally keeps it:
   main.css's hard `body { font-size: 16px }` was overriding that, and this
   overrides it back WITHOUT editing main.css, which is shared core.

   Media widths are unaffected by root font-size, so no layout breakpoint moves;
   --s-*, --r-* and every max-width are px, so only type and its own padding
   grow. */
html { font-size: 100%; }                                       /* 16px */
@media (min-width: 1024px) { html { font-size: 106.25%; } }     /* 17px */
@media (min-width: 1360px) { html { font-size: 112.5%;  } }     /* 18px — 1366 and 1440 laptops */
body { font-size: 1rem; line-height: 1.65; }

/* ── 2. Type scale ───────────────────────────────────────────────────────── */
.t-display { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.04; color: var(--text-primary); font-variant-numeric: lining-nums; }
.t-page    { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.t-section { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.15; color: var(--text-primary); font-variant-numeric: lining-nums; }
.t-lead    { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); }
.t-body    { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); }
.t-caption { font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
.t-meta    { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.t-meta.accent { color: var(--accent-strong); }
.t-button  { font-size: .98rem; font-weight: 600; letter-spacing: .01em; }
.t-num     { font-family: var(--font-display); font-weight: 600; font-variant-numeric: lining-nums; line-height: 1; }

/* ── 3. Page head (breadcrumbs · title · aside) ──────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-6) 0 var(--s-5); }
.page-head .crumbs { margin: 0 0 var(--s-2); }
.page-head h1 { margin: 0; }
.page-head .page-sub { margin: var(--s-2) 0 0; color: var(--text-secondary); max-width: 52ch; }
.page-aside { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
/* All topics and the roadmap are sections of Home now, not tabs — each says so
   with one way back (Asaf, 27 Aug: "one place"). */
.back-home { display: inline-flex; align-items: center; gap: .35rem; margin: var(--s-5) 0 calc(var(--s-4) * -1);
             font-size: .88rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.back-home:hover { color: var(--text-primary); }
.back-home .icon { width: 1em; height: 1em; }

/* ── 4. Progress ─────────────────────────────────────────────────────────── */
.progress { position: relative; height: 10px; background: var(--background-deep); border-radius: 999px; overflow: hidden; }
.progress.thin { height: 6px; }
.progress.tall { height: 14px; }
.progress > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width var(--m-slow); }
.progress.navy > i { background: linear-gradient(90deg, var(--primary-hover), var(--primary)); }
.progress.success > i { background: var(--success); }
.progress-row { display: flex; align-items: center; gap: var(--s-3); }
.progress-row .progress { flex: 1; }
.progress-row .pct { font-size: .82rem; font-weight: 600; color: var(--text-secondary); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Ring (SVG): <svg class="ring" viewBox="0 0 120 120"><circle class="ring-bg"/><circle class="ring-fg" style="--pct:72"/></svg> */
.ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; r: 52; cx: 60; cy: 60; }
.ring .ring-bg { stroke: var(--background-deep); }
.ring .ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: calc(326.7 - (326.7 * var(--pct, 0) / 100)); transition: stroke-dashoffset var(--m-slow); }
.ring.success .ring-fg { stroke: var(--success); }

/* ── 5. Pills: XP, streak, level, generic ────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--surface-sunken); color: var(--text-secondary); }
.pill .icon { width: 16px; height: 16px; }
.pill-xp { background: var(--accent-soft); color: var(--accent-strong); }
.pill-streak { background: var(--warning-soft); color: var(--warning); }
.pill-streak.cold { background: var(--surface-sunken); color: var(--text-muted); }
.pill-level { background: var(--primary); color: var(--primary-ink); }
.pill-success { background: var(--success-soft); color: var(--success-ink); }
.pill-soft { background: var(--primary-soft); color: var(--primary-hover); }
.pill b { font-variant-numeric: tabular-nums; }

/* ── 6. Stat ─────────────────────────────────────────────────────────────── */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.stat > span { font-size: .8rem; color: var(--text-muted); }
.stat-row { display: flex; gap: var(--s-6); flex-wrap: wrap; }

/* ── 7. Question options + answer states ─────────────────────────────────── */
.option-list { display: flex; flex-direction: column; gap: var(--s-3); }
.option-card { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left; padding: .95rem 1.05rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-md); color: var(--text-primary); font-size: 1.02rem; cursor: pointer; transition: border-color var(--m-fast), background var(--m-fast), transform var(--m-fast), box-shadow var(--m-fast); }
.option-card:hover:not(:disabled) { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--elev-1); }
.option-card .oletter { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-muted); font-size: .8rem; font-weight: 700; flex: none; transition: background var(--m-fast), color var(--m-fast); }
.option-card.selected { border-color: var(--primary); background: var(--primary-soft); animation: settle var(--m-fast, .16s) both; }
.option-card.selected .oletter { background: var(--primary); color: #fff; }
.option-card:disabled { cursor: default; }
.option-card.is-correct { border-color: var(--success); background: var(--success-soft); animation: popIn var(--m-spring); }
.option-card.is-correct .oletter { background: var(--success); color: #fff; }
.option-card.is-wrong { border-color: var(--danger); background: var(--danger-soft); animation: nudge 360ms var(--ease-out); }
.option-card.is-wrong .oletter { background: var(--danger); color: #fff; }
.option-card.is-reveal { border-color: var(--success); border-style: dashed; }
.option-card.is-reveal .oletter { background: var(--success-soft); color: var(--success-ink); }
.option-card .omark { margin-left: auto; width: 22px; height: 22px; flex: none; }
.option-card.is-correct .omark { color: var(--success); }
.option-card.is-wrong .omark { color: var(--danger); }
.option-card.is-reveal .omark { color: var(--success); }
.option-card.dim { opacity: .55; }

/* ── 8. Feedback panel (after Check) ─────────────────────────────────────── */
.feedback-panel { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4); align-items: start; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); border: 1px solid; animation: slideUp var(--m-med) both; }
.feedback-panel.ok { background: var(--success-soft); border-color: var(--correct-edge, var(--success)); }
.feedback-panel.bad { background: var(--danger-soft); border-color: var(--wrong-edge, var(--danger)); }
.feedback-panel .fb-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.feedback-panel.ok .fb-icon { background: var(--success); }
.feedback-panel.bad .fb-icon { background: var(--danger); }
.feedback-panel .fb-icon .icon { width: 20px; height: 20px; }
.feedback-panel .fb-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; margin: 0 0 .2rem; }
.feedback-panel.ok .fb-title { color: var(--success-ink); }
.feedback-panel.bad .fb-title { color: var(--danger-ink); }
.feedback-panel .fb-correct { font-weight: 600; color: var(--text-primary); margin: .15rem 0 .35rem; }
.feedback-panel .fb-en, .feedback-panel .fb-bn { color: var(--text-secondary); line-height: 1.65; }
.feedback-panel .fb-bn { font-family: var(--font-bn); line-height: 1.8; }
.feedback-panel .fb-en + .fb-bn { margin-top: .3rem; }
.feedback-panel .fb-xp { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; padding: .28rem .75rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .88rem; animation: popIn var(--m-spring) .15s both; }
.feedback-panel .fb-xp .icon { width: 16px; height: 16px; }

/* Floating "+10 XP" */
.xp-pop { position: fixed; left: 50%; bottom: 22vh; transform: translateX(-50%); padding: .5rem 1rem; border-radius: 999px; background: var(--accent); color: var(--navy-900); font-weight: 800; font-size: 1.05rem; box-shadow: var(--shadow-gold); pointer-events: none; z-index: 90; animation: xpFloat 1.1s var(--ease-out) both; }

/* ── 9. Completion screen ────────────────────────────────────────────────── */
.completion { max-width: 560px; margin: var(--s-6) auto; padding: clamp(1.4rem, 4vw, 2.4rem); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--elev-2); animation: slideUp var(--m-med) both; }
.completion .ring { margin: 0 auto var(--s-4); width: 136px; height: 136px; }
.completion .ring-wrap { position: relative; width: 136px; margin: 0 auto var(--s-4); }
.completion .ring-wrap .ring-label { position: absolute; inset: 0; display: grid; place-items: center; transform: none; }
.completion .ring-wrap .ring-label b { font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.completion .ring-wrap .ring-label > span { display: block; font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
.completion h2 { margin: 0 0 .3rem; }
.completion .verdict { color: var(--text-secondary); margin: 0 0 var(--s-5); }
.completion .gains { display: flex; justify-content: center; gap: var(--s-5); flex-wrap: wrap; margin: 0 0 var(--s-5); }
.completion .gain { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; }
.completion .gain b { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1; color: var(--text-primary); font-variant-numeric: lining-nums; }
.completion .gain b.up { color: var(--success); }
.completion .gain b.xp { color: var(--accent-strong); }
.completion .gain > span { font-size: .76rem; color: var(--text-muted); }
.completion .completion-actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.completion .next-line { margin: 0 0 var(--s-3); color: var(--text-secondary); }
.completion .coach { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--accent-strong); margin: 0 0 var(--s-4); }
.completion .coach .g-bn { font-style: normal; font-size: .85em; }

/* ── 10. Empty state ─────────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: clamp(1.6rem, 5vw, 2.6rem) var(--s-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface); }
.empty-state .es-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-faint); color: var(--accent-strong); display: grid; place-items: center; }
.empty-state .es-icon .icon { width: 26px; height: 26px; }
.empty-state h3 { margin: 0; }
.empty-state p { margin: 0; max-width: 40ch; color: var(--text-secondary); }
.empty-state .es-why { font-size: .88rem; color: var(--text-muted); }
.empty-state.compact { padding: var(--s-5); gap: var(--s-2); border-style: solid; }

/* ── 11. Skeleton loading ───────────────────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: var(--background-deep); border-radius: var(--r-sm); color: transparent !important; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmerX 1.3s infinite; }
.skeleton.line { height: 1em; }
.skeleton.block { min-height: 120px; border-radius: var(--r-md); }

/* ── 12. Toasts (achievement / level up) ─────────────────────────────────── */
.toast-stack { position: fixed; top: calc(var(--header-h) + 10px); right: 14px; left: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); z-index: 95; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); max-width: 380px; width: 100%; padding: .8rem 1rem; background: var(--primary); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); animation: slideIn var(--m-spring) both; border-left: 4px solid var(--accent); }
.toast .toast-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(216,176,76,.18); color: var(--accent); display: grid; place-items: center; flex: none; }
.toast .toast-icon .icon { width: 22px; height: 22px; }
.toast .toast-kicker { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); font-weight: 700; }
.toast .toast-title { font-weight: 600; line-height: 1.25; }
.toast.leaving { animation: fadeOut var(--m-med) both; }
@media (min-width: 560px) { .toast-stack { left: auto; } }

/* ── 13. Journey (roadmap as units and steps) ───────────────────────────── */
.journey { display: flex; flex-direction: column; gap: var(--s-4); }
.unit { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow var(--m-fast); }
.unit.is-current { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint), var(--elev-2); }
.unit.is-done { background: var(--surface); }
.unit.is-locked { opacity: .72; }
.unit-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none; }
.unit-head::-webkit-details-marker { display: none; }
.unit-head .unit-no { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; background: var(--surface-sunken); color: var(--text-muted); flex: none; font-variant-numeric: lining-nums; }
.unit.is-current .unit-no { background: var(--accent); color: var(--navy-900); }
.unit.is-done .unit-no { background: var(--success-soft); color: var(--success-ink); }
.unit-head .unit-name { font-weight: 600; color: var(--text-primary); font-size: 1.04rem; line-height: 1.25; }
.unit-head .unit-meta { font-size: .8rem; color: var(--text-muted); margin-top: 2px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.unit-head .unit-text { flex: 1; min-width: 0; }
.unit-head .unit-prog { width: 64px; flex: none; }
.unit-head .unit-chev { width: 18px; height: 18px; color: var(--text-muted); transition: transform var(--m-fast); flex: none; }
.unit[open] .unit-chev { transform: rotate(180deg); }
.unit-steps { padding: 0 var(--s-5) var(--s-4) calc(var(--s-5) + 19px); display: flex; flex-direction: column; position: relative; }
.unit-steps::before { content: ''; position: absolute; left: calc(var(--s-5) + 18px); top: 0; bottom: var(--s-4); width: 2px; background: var(--background-deep); }
.step { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: .55rem 0 .55rem var(--s-5); }
.step .step-dot { position: absolute; left: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.step .step-dot .icon { width: 11px; height: 11px; }
.step.is-done .step-dot { background: var(--success); border-color: var(--success); }
.step.is-current .step-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-faint); color: var(--navy-900); }
.step.is-skipped .step-dot { border-style: dashed; }
.step.is-locked .step-dot { background: var(--surface-sunken); }
.step .step-text { flex: 1; min-width: 0; }
.step .step-title { color: var(--text-primary); font-weight: 500; }
.step.is-done .step-title { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.step.is-current .step-title { font-weight: 600; }
.step .step-note { font-size: .78rem; color: var(--text-muted); }
.step .step-kind { font-size: .72rem; color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.step .step-go { flex: none; }
.journey-done { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--success-soft); color: var(--success-ink); font-size: .92rem; }
.journey-done .icon { width: 18px; height: 18px; }

/* ── 14. Feature card ("Continue learning") ──────────────────────────────── */
.feature-card { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem); border-radius: var(--r-xl); color: #fff; }
.feature-card .eyebrow { margin-bottom: .5rem; }
.feature-card .eyebrow::before { display: none; }
.feature-card h2 { color: #fff; margin: 0 0 .35rem; font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.feature-card .fc-meta { display: flex; gap: var(--s-3); flex-wrap: wrap; color: #bccadb; font-size: .86rem; align-items: center; }
.feature-card .fc-meta .icon { width: 15px; height: 15px; vertical-align: -2px; }
.feature-card .fc-actions { display: flex; gap: var(--s-2); flex-direction: column; align-items: stretch; }
@media (max-width: 620px) { .feature-card { grid-template-columns: 1fr; } .feature-card .fc-actions { flex-direction: row; flex-wrap: wrap; } }

/* ── 15. Today's goal ───────────────────────────────────────────────────── */
.goal-card { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.goal-card .goal-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-faint); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.goal-card .goal-icon .icon { width: 22px; height: 22px; }
.goal-card .goal-text { flex: 1; min-width: 0; }
.goal-card .goal-title { font-weight: 600; color: var(--text-primary); display: flex; justify-content: space-between; gap: var(--s-3); }
.goal-card .goal-title span { font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.goal-card .progress { margin-top: .5rem; }
.goal-card.is-done { border-color: var(--correct-edge, var(--success)); background: var(--success-soft); }
.goal-card.is-done .goal-icon { background: var(--success); color: #fff; }

/* ── 16. Skills ─────────────────────────────────────────────────────────── */
.skill-list { display: flex; flex-direction: column; gap: .7rem; }
.skill-row { display: grid; grid-template-columns: 110px 1fr 3.2ch; gap: var(--s-3); align-items: center; }
.skill-row .skill-name { font-size: .92rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skill-row .pct { font-size: .82rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.skill-row.weak .progress > i { background: var(--warning); }

/* ── 17. Badges ─────────────────────────────────────────────────────────── */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-3); }
.badge-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: var(--s-3) var(--s-2); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
/* An earned badge wears the hue the grid's cycle hands it (5 Sep); the old
   conic gold was the retired brand accent. */
.badge-tile .badge-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--tone-tint); color: var(--tone); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--tone-edge); }
.badge-tile .badge-icon .icon { width: 24px; height: 24px; }
.badge-tile .badge-name { font-size: .78rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.badge-tile .badge-date { font-size: .7rem; color: var(--text-muted); }
.badge-tile.locked .badge-icon { background: var(--surface-sunken); color: var(--text-muted); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--border); }
.badge-tile.locked .badge-name { color: var(--text-muted); font-weight: 500; }
.badge-tile.new { animation: popIn var(--m-spring); border-color: var(--accent); }

/* ── 18. Focus mode (practice, test): no site footer, a slim lesson header ── */
/* A lesson is an activity, not a section of the site. The site nav used to
   stay on top of the player with "Learn" lit up, so pressing Continue on Home
   looked like being moved to another page (Asaf, 27 Aug). In focus mode the
   header keeps the logo and nothing else — the ✕ is the way out. */
body.focus .site-head .head-nav { display: none; }
body.focus .site-head { border-bottom: 0; }
body.focus .site-foot { display: none; }
body.focus main { padding-bottom: 96px; }
.focus-head { display: flex; align-items: center; gap: var(--s-3); max-width: 680px; margin: var(--s-4) auto 0; padding: 0 20px; }
.focus-head .icon-btn { flex: none; }
.focus-head .progress { flex: 1; }
.focus-head .q-count { font-size: .82rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.focus-title { max-width: 680px; margin: var(--s-4) auto 0; padding: 0 20px; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.focus-title h1 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.65rem); }
.focus-title .t-meta { margin-left: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: background var(--m-fast), color var(--m-fast), border-color var(--m-fast); }
.icon-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--border-strong); }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn.is-off { color: var(--text-muted); }
.icon-btn.is-off::after { content: ''; position: absolute; width: 22px; height: 2px; background: currentColor; transform: rotate(-45deg); border-radius: 2px; }
.icon-btn { position: relative; }

/* ── 19. Coach line (the product talks) ─────────────────────────────────── */
.coach-line { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--accent-faint); border: 1px solid var(--gold-300); color: var(--text-primary); }
.coach-line .icon { width: 20px; height: 20px; color: var(--accent-strong); flex: none; margin-top: .15em; }
.coach-line p { margin: 0; }

/* ── 20. Sections on tinted ground ──────────────────────────────────────── */
.ground { background: var(--background-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ground-soft { background: linear-gradient(180deg, var(--accent-faint), transparent 60%); }

/* ── 21. Motion ─────────────────────────────────────────────────────────── */
@keyframes settle { from { transform: scale(.985); } to { transform: none; } }
@keyframes streakPop { 0% { transform: scale(.92); } 55% { transform: scale(1.12); } 100% { transform: none; } }
@keyframes popIn { 0% { transform: scale(.97); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes xpFloat { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.9); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -36px) scale(1); } }
@keyframes shimmerX { to { transform: translateX(100%); } }
.count-up { font-variant-numeric: tabular-nums; }

/* Confetti canvas */
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 94; }

@media (prefers-reduced-motion: reduce) {
  .xp-pop { animation: none; opacity: 1; }
  .option-card.is-correct, .option-card.is-wrong, .badge-tile.new { animation: none; }
  .confetti-canvas { display: none; }
  .skeleton::after { animation: none; }
}

/* ── Pictures on questions and lesson blocks (Phase 5) ──────────────────── */
.q-image { margin: 0 0 var(--s-4); }
.q-image img { display: block; max-width: 100%; max-height: 280px; width: auto; margin: 0 auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════════
   READING FLOOR + BANGLA + HIGHLIGHTS  (Asaf, 28 Aug)
   "the text is a bit too small… use the best quality bangla fonts available.
    use colors and highlights as well."

   Everything here overrides static/css/main.css, which is SHARED CORE — it is
   byte-identical to ../BayRen Platform/core/ui/main.css and is synced into
   Grammar, Reading, Listening and Speaking. Editing it there would move four
   other live apps inside a pass meant for the Academy. Overriding is the
   supported route; ui.css loads after main.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Small print that a student actually reads ───────────────────────────── */
.tiny  { font-size: .85rem; }
.small { font-size: .88rem; }
.q-count, .action-dock .dock-note, .progress-row .pct { font-size: .88rem; }

/* ── The lesson card: this is the reading surface ────────────────────────── */
.concept-card .body      { font-size: 1.04rem; line-height: 1.8; }
.example .en             { font-size: 1.02rem; }
.example .bn             { font-size: .97rem; line-height: 1.8; }
.tip-line                { font-size: .97rem; line-height: 1.75; }
.mistake-card .why       { font-size: .92rem; line-height: 1.75; }
.gtable                  { font-size: .97rem; }
.gtable th               { font-size: .86rem; }
.check-feedback          { font-size: 1rem; }
.ielts-card p            { font-size: 1rem; }
.formula-card .fnote     { font-size: .9rem; }
.q-sentence .sen-bn      { font-size: .97rem; }
.more-examples > summary { font-size: .95rem; }
.lesson-intro            { font-size: 1.06rem; line-height: 1.85; }

/* ── Bangla ──────────────────────────────────────────────────────────────────
   Bengali needs MORE leading than Latin: the matra rides above the letters and
   the conjuncts stack below, so a Latin-tuned 1.65 crowds them. In Bangla mode
   the primary line is .g-bn.g-solo, and academy.css set `line-height: inherit`
   on it — so the one line the student is actually reading lost the 1.7/1.9 it
   gets everywhere else. It is also no longer a gloss, so it stops being
   smaller than the English it used to sit under. */
.g .g-bn.g-solo, .g-inline .g-bn.g-solo { line-height: 1.75; font-size: 1.02em; }
.g .g-bn { font-size: .97em; }
.concept-card .body, .lesson-intro, .tip-line, .example .bn,
.mistake-card .why, .check-card .bn { line-height: 1.8; }
/* Bengali has no true italic and no true bold — a browser will synthesise a
   slant and a smear if asked. Ask for the real 600 instead. */
[lang="bn"] em, [lang="bn"] i, .bn em, .bn i { font-style: normal; font-weight: 600; }
[lang="bn"] b, [lang="bn"] strong, .bn b, .bn strong { font-weight: 600; }

/* ── Highlights ──────────────────────────────────────────────────────────────
   A lesson body supported exactly one mark — **bold** → an UNSTYLED <b>, so a
   bolded English term inside a Bangla paragraph looked like the sentence around
   it. Two marks now, each meaning one thing:
     **term**      the English being taught      → navy, the colour of authority
     ==remember==  the one line to carry away    → a gold highlighter stroke
   Neither is state, so the "never colour alone" rule does not apply; right and
   wrong keep their icon and their word. */
.concept-card .body b, .tip-line b, .check-feedback b, .check-card .body b,
.fb-en b, .fb-bn b, .mistake-card .why b, .lesson-intro b {
  color: var(--primary); font-weight: 600;
}
/* The two dark navy cards need the light end of the scale instead. */
.formula-card .body b, .formula-card .fnote b, .ielts-card p b { color: var(--gold-300); }

mark {
  background: transparent; color: var(--accent-strong);
  box-shadow: inset 0 -.42em 0 var(--gold-100);
  padding: 0 .14em; border-radius: 3px; font-weight: 600;
}
/* Bengali sits lower on the line, so the stroke has to reach further up. */
.bn mark, [lang="bn"] mark, .concept-card .body mark { box-shadow: inset 0 -.52em 0 var(--gold-100); }
/* On the two dark cards the stroke is the page tone's tint, not a gold literal
   the skin cannot repaint (5 Sep). */
.formula-card mark, .ielts-card mark { color: var(--gold-300); box-shadow: inset 0 -.42em 0 var(--tone-tint, var(--gold-100)); }

/* The third mark (5 Sep — Asaf: "underline important things"): __key__ is
   the word in the example that makes the point. A tone-coloured underline,
   set low enough to clear a Bengali conjunct; the text itself keeps its
   colour so the underline reads as a pointer, not a link. */
u.key {
  text-decoration: underline; text-decoration-color: var(--tone, var(--accent-strong));
  text-decoration-thickness: 2px; text-underline-offset: .18em; text-decoration-skip-ink: none;
  font-weight: 600;
}
.bn u.key, [lang="bn"] u.key, u.key:lang(bn) { text-underline-offset: .26em; }
.formula-card u.key, .ielts-card u.key { text-decoration-color: var(--gold-300); }

/* The check verdict's icon (was a bare ✓ / ✗ dingbat in a fallback font). */
.check-feedback .fb-ic { display: inline-flex; vertical-align: -.18em; }
.check-feedback .fb-ic .icon { width: 1.05em; height: 1.05em; }
.check-feedback .fb-ic.is-right { color: var(--success); }
.check-feedback .fb-ic.is-wrong { color: var(--danger); }
/* A wrong/right example: icon + word + colour, never colour alone. */
.mistake-card .pair-ic { display: inline-flex; vertical-align: -.16em; margin-right: .38rem; }
.mistake-card .pair-ic .icon { width: 1em; height: 1em; stroke-width: 2.4; }
.mistake-card .bad .pair-ic { color: var(--danger); }
.mistake-card .good .pair-ic { color: var(--success); }

/* ── Lesson headings ─────────────────────────────────────────────────────────
   Two problems, both visible once the body grew:

   1. `.concept-card h3` was 1.13rem against a 1.04rem body — a ratio of 1.09,
      and Cormorant reads optically smaller than Inter at the same size, so the
      heading of a teaching card was effectively SMALLER than the card. The
      directive asks for a stronger hierarchy; this is where it was weakest.
   2. A teaching heading is mostly Bangla ("Adjective কোথায় বসে?"), and setting
      that in a Latin display serif put a small-x-height serif beside a
      full-height Bengali face in the same line. The display face belongs to
      page titles; a lesson heading belongs to the reading stack. */
.concept-card h3, .formula-card > h3, .check-card h3 {
  font-family: var(--font-body);
  font-size: 1.32rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--text-primary);
}

/* ── The one line to remember ────────────────────────────────────────────────
   Asaf, 28 Aug: the lessons leave a student with "nothing to hold on to".
   Every lesson now ends on one short sentence they can repeat. It is the only
   gold card in a lesson, so it is the thing the eye lands on — gold is reward
   and "you are here" in this system, and nothing else in a lesson claims it. */
.rule-card {
  margin: var(--s-5) 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--accent-faint);
  border: 1px solid var(--gold-300);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
}
.rule-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-strong);
}
.rule-kicker .icon { width: 1.05em; height: 1.05em; }
.rule-text {
  margin: .5rem 0 0;
  font-size: 1.16rem; line-height: 1.75; font-weight: 500;
  color: var(--text-primary);
}
.rule-text b { color: var(--primary); font-weight: 600; }
.rule-text mark { box-shadow: inset 0 -.5em 0 var(--tone-edge, var(--gold-100)); }
@media (max-width: 520px) { .rule-card { padding: 1.05rem 1.1rem; } .rule-text { font-size: 1.1rem; } }

/* The same line, pinned at the top of the topic page so it is the first thing
   a returning student sees rather than something buried at the end. */
.topic-rule { margin: var(--s-5) 0; }

/* Small print a student actually READS (the rest are in academy.css, which
   loads after this sheet and would otherwise win) (as opposed to a ring's "%" or a step
   number). Each of these was under 15px on a laptop — the squint Asaf reported. */
.badge-tile .badge-name   { font-size: .88rem; }
.step .step-note          { font-size: .86rem; }
.skill-row .pct           { font-size: .88rem; }
.lib-topic .lib-name      { font-size: 1rem; }
.app-door                 { font-size: .96rem; }
.crumbs                   { font-size: .88rem; }
.lesson-intro             { font-size: 1.06rem; }