/*
 * trades.css — shared design system for the eZine Trades learning experience (Study Desk, Profile,
 * Curriculum, Lesson). ONE source of truth for tokens + components across every /trades/* page, so the
 * dedicated pages stay visually consistent with each other and with Academy/Professional (same "reading
 * room / brass lamp" token set), while giving Trades a more grounded, business-workspace feel.
 *
 * Loaded as a classic <link> after config.js. Theme is applied pre-paint by a tiny inline <script> in
 * each page's <head> that sets data-theme on <html> from localStorage['ezine_theme'].
 */

:root{
  --ink:#1B1E30; --ink-2:#252A42; --lamp:#E0A951; --lamp-soft:#f0cf9e; --lamp-deep:#c98b34;
  --chalk:#ECE8DF; --muted-dark:#9aa0bb; --paper:#FAF7F0; --paper-2:#F3EEE3;
  --text:#2A2D3A; --muted:#797E92; --line:#E4DCCB; --sage:#5E8B7E; --sage-soft:rgba(94,139,126,.12);
  --danger:#B4533F; --danger-soft:rgba(180,83,63,.10); --info:#4b6a8f;
  --card:#FFFFFF; --surface-deep:#1B1E30; --on-deep:#ECE8DF; --radius:14px;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 14px 40px -22px rgba(27,30,48,.45);
  --shadow-sm:0 1px 2px rgba(27,30,48,.06);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --ink:#E8E4DA; --ink-2:#2B3047; --paper:#13151D; --paper-2:#1A1D28; --card:#1E212E;
  --text:#E8E4DA; --muted:#9CA2B8; --muted-dark:#838AA4; --chalk:#ECE8DF; --line:#2C3142;
  --lamp:#E6B567; --lamp-soft:#F0CF9E; --lamp-deep:#E0A951; --sage:#74A593; --sage-soft:rgba(116,165,147,.15);
  --danger:#D06B54; --danger-soft:rgba(208,107,84,.14); --surface-deep:#0E1017; --on-deep:#ECE8DF; --info:#8fb0d6;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 18px 50px -24px rgba(0,0,0,.7);
  color-scheme: dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--text); background:var(--paper); font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.55;}
.serif{font-family:"Newsreader",Georgia,serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit}
h1,h2,h3,h4{line-height:1.18; margin:0 0 .4em}
img{max-width:100%}

/* ── Layout shell ─────────────────────────────────────────────────────────── */
.tw-wrap{max-width:1080px; margin:0 auto; padding:0 20px}
.tw-wrap.narrow{max-width:820px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--lamp)}

.tw-topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.tw-topbar-in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px}
.tw-brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:.01em; text-decoration:none; white-space:nowrap}
.tw-brand .mark{width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,var(--lamp),var(--lamp-deep)); display:inline-flex; align-items:center; justify-content:center; color:#231a08; font-weight:700; font-family:"Newsreader",serif}
.tw-brand b{color:var(--lamp)}
.tw-nav{display:flex; gap:2px; margin-left:6px; flex-wrap:wrap}
.tw-nav a{font-size:14px; color:var(--muted); text-decoration:none; padding:7px 12px; border-radius:9px; white-space:nowrap; border:1px solid transparent}
.tw-nav a:hover{color:var(--text); background:var(--paper-2)}
.tw-nav a[aria-current="page"]{color:var(--text); background:var(--paper-2); border-color:var(--line)}
.tw-top-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.tw-menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:9px; padding:7px 10px; color:var(--text); cursor:pointer; font-size:16px}
/* Partial-translation banner (Phase 7) — appears when the fetched string catalog reports
   missing translations for the selected language. Dismissible; auto-clears on language switch. */
.tw-i18n-partial{display:flex; align-items:center; gap:10px; padding:8px 14px; margin:0 0 14px;
  background:color-mix(in srgb, var(--lamp) 12%, var(--paper)); border:1px solid color-mix(in srgb, var(--lamp) 40%, var(--line));
  border-radius:10px; font-size:13.5px; color:var(--text)}
.tw-i18n-partial-msg{flex:1}
.tw-i18n-partial-x{background:none; border:0; color:var(--muted); font-size:14px; cursor:pointer; padding:2px 6px; border-radius:6px}
.tw-i18n-partial-x:hover{color:var(--text); background:var(--paper-2)}

/* Language availability badges on explore-trades course cards (Phase 7). */
.tw-lang-badges{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.tw-lang-badge{font-family:"IBM Plex Mono",monospace; font-size:10px; padding:1px 6px; border-radius:5px;
  background:var(--paper-2); color:var(--muted); border:1px solid var(--line); text-transform:uppercase; letter-spacing:.04em}
.tw-lang-badge.available{background:color-mix(in srgb, var(--sage,#5E8B7E) 14%, var(--paper)); color:var(--sage,#5E8B7E)}
.tw-lang-badge.partial{background:color-mix(in srgb, var(--lamp) 14%, var(--paper)); color:var(--lamp)}

/* Top-bar language selector — appears only when the API returns >1 enabled language. */
.tw-lang{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.tw-lang-lbl{display:none}
@media (min-width:640px){ .tw-lang-lbl{display:inline} }
.tw-lang-sel{background:var(--paper); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; font-size:13px; cursor:pointer; max-width:180px}
.tw-lang-sel:focus{outline:2px solid var(--lamp); outline-offset:1px}

/* Breadcrumb */
.tw-crumbs{max-width:1080px; margin:0 auto; padding:12px 20px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.tw-crumbs a{text-decoration:none; color:var(--muted)}
.tw-crumbs a:hover{color:var(--text)}
.tw-crumbs .sep{opacity:.5}
.tw-crumbs .cur{color:var(--text); font-weight:500}

.tw-main{padding:22px 0 60px}
.tw-footer{border-top:1px solid var(--line); margin-top:40px; padding:26px 0; color:var(--muted); font-size:13px}

/* ── Hero / page head ─────────────────────────────────────────────────────── */
.page-head{margin:6px 0 18px}
.page-head h1{font-family:"Newsreader",Georgia,serif; font-size:clamp(26px,4vw,38px); font-weight:600; margin:.15em 0 .1em}
.page-head h1 em{font-style:italic; color:var(--lamp)}
.page-head p.lede{color:var(--muted); font-size:16px; max-width:64ch; margin:.3em 0 0}

/* ── Cards & grids ────────────────────────────────────────────────────────── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px; margin:0 0 16px}
.card.pad-lg{padding:26px}
.card h2{font-size:19px; margin:0 0 4px}
.card h3{font-size:16px}
.card .sub{color:var(--muted); font-size:14px; margin:0 0 14px}
.card-title-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.card-title-row h2,.card-title-row h3{margin:0}

.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.span-2{grid-column:span 2}
@media (max-width:720px){ .span-2{grid-column:auto} }

/* Deep "continue" hero banner */
.hero-band{background:var(--surface-deep); color:var(--on-deep); border-radius:18px; padding:26px; position:relative; overflow:hidden}
.hero-band::after{content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(224,169,81,.22),transparent 70%)}
.hero-band .eyebrow{color:var(--lamp-soft)}
.hero-band h2{font-family:"Newsreader",serif; font-size:24px; margin:.2em 0; color:#fff; position:relative}
.hero-band p{color:var(--muted-dark); margin:.2em 0 16px; position:relative; max-width:60ch}
.hero-band .row{position:relative}

/* ── Stat tiles ───────────────────────────────────────────────────────────── */
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:"Newsreader",serif; font-size:30px; font-weight:600; line-height:1.1; margin-top:4px}
.stat .v small{font-size:15px; color:var(--muted); font-family:"IBM Plex Sans",sans-serif}
.stat .foot{font-size:12.5px; color:var(--muted); margin-top:4px}

/* ── Progress ─────────────────────────────────────────────────────────────── */
.progbar{height:9px; border-radius:999px; background:var(--paper-2); overflow:hidden}
.progbar > span{display:block; height:100%; background:linear-gradient(90deg,var(--lamp),var(--lamp-deep)); transition:width .5s ease}
.prog-pct{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted); margin-top:7px}
.ring{--p:0; width:74px; height:74px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--lamp) calc(var(--p)*1%), var(--paper-2) 0);}
.ring i{width:56px; height:56px; border-radius:50%; background:var(--card); display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:15px; font-style:normal}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:11px; padding:11px 18px; font-weight:600; font-size:14.5px; cursor:pointer; text-decoration:none; font-family:inherit; transition:transform .1s ease, box-shadow .12s, border-color .12s, background .12s; background:var(--card); color:var(--text); border-color:var(--line)}
.btn:hover{border-color:var(--lamp)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-loading{opacity:.55; cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--lamp),var(--lamp-deep)); color:#231a08; border-color:transparent}
.btn-primary:hover{box-shadow:0 8px 22px -12px var(--lamp-deep); border-color:transparent}
.btn-ghost{background:transparent}
.btn-sm{padding:8px 13px; font-size:13.5px; border-radius:9px}
.btn-block{width:100%}
.btn-danger{color:var(--danger); border-color:var(--danger)}
/* Exit chip in the trades chrome — mirrors the MBS surfaces (gold-bordered
   ghost that fills gold on hover), pointing at /hub so a learner can leave
   trades and land on the same segment picker they get from MBS. */
.btn-exit{background:transparent; color:var(--lamp); border-color:var(--lamp)}
.btn-exit:hover{background:var(--lamp); color:#231a08; border-color:var(--lamp)}

/* ── Badges / chips / pills ───────────────────────────────────────────────── */
.badge{display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.badge.ok{color:var(--sage); border-color:var(--sage); background:var(--sage-soft)}
.badge.warn{color:var(--lamp-deep); border-color:var(--lamp)}
.badge.danger{color:var(--danger); border-color:var(--danger); background:var(--danger-soft)}
.badge.muted{color:var(--muted)}
.chip{font-size:13px; padding:8px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer; color:var(--text)}
.chip.on{border-color:var(--lamp); color:var(--lamp-deep); background:var(--lamp-soft)}
.pill-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ── Lists (lessons / actions / upcoming) ─────────────────────────────────── */
.tw-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.tw-item{display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); text-decoration:none; color:var(--text); transition:border-color .12s, transform .08s}
a.tw-item:hover{border-color:var(--lamp); transform:translateY(-1px)}
.tw-item .lead{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line); font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted)}
.tw-item.done .lead{background:var(--sage); border-color:var(--sage); color:#fff}
.tw-item.locked{opacity:.6}
.tw-item .body{flex:1; min-width:0}
.tw-item .t{font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis}
.tw-item .m{font-size:12.5px; color:var(--muted); margin-top:1px}
.tw-item .end{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field{margin:0 0 15px}
label.fld{display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px}
label.fld .req{color:var(--danger); margin-left:2px}
.field .hint{font-size:12.5px; color:var(--muted); margin:5px 0 0}
input[type=text],input[type=number],input[type=date],select,textarea{width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:15px; font-family:inherit}
textarea{min-height:96px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--lamp); box-shadow:0 0 0 3px var(--lamp-soft)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft)}
.field .err-msg{color:var(--danger); font-size:12.5px; margin-top:5px; display:none}
.field.invalid .err-msg{display:block}
.chk{display:inline-flex; align-items:center; gap:8px; font-size:15px; cursor:pointer}
.chk input{width:auto; margin:0}
/* "What you'll learn" topic chips under each curriculum lesson (value preview) */
.l-topics{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.l-topics span{font-size:11.5px; line-height:1.3; color:var(--muted); background:var(--paper-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px}
fieldset.q{border:0; margin:0 0 14px; padding:0; min-width:0}
fieldset.q > legend{font-weight:600; padding:0; margin-bottom:8px; font-size:15px}
.opt{display:flex; gap:10px; align-items:flex-start; margin:6px 0; padding:11px 13px; border:1px solid var(--line); border-radius:10px; cursor:pointer}
.opt:hover{border-color:var(--lamp)}
.opt input{margin-top:3px; flex:none; width:auto}
.opt.correct{border-color:var(--sage); background:var(--sage-soft)}
.opt.wrong{border-color:var(--danger); background:var(--danger-soft)}

/* Mentor guidance blocks */
.mentor-block{border-top:1px solid var(--line); padding:12px 0 2px; margin-top:6px}
.mentor-block:first-of-type{border-top:0}
.mentor-block .lbl{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lamp-deep); margin-bottom:3px}
.mentor-block p{margin:0; font-size:15px; line-height:1.6}
.mentor-block ul{margin:.3em 0 0; padding-left:1.15em; font-size:14.5px}
.mentor-block li{margin:.3em 0}

/* Callouts */
.callout{border:1px solid var(--line); border-left:3px solid var(--lamp); border-radius:10px; padding:13px 15px; margin:14px 0; background:var(--paper-2); font-size:14.5px}
.callout.tip{border-left-color:var(--sage)}
.callout.ok{border-left-color:var(--sage)}
.callout.warn{border-left-color:var(--danger)}
.callout .lbl{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:4px}

/* ── Lesson depth scaffold — four-beat voice + per-lesson kit (Phase C, additive) ─ */
.lesson-depth{margin:14px 0 4px}
.lesson-depth .beats{border:1px solid var(--line); border-radius:12px; background:var(--paper-2); padding:6px 16px 14px; margin-bottom:12px}
.lesson-depth .beat{padding:12px 0; font-size:14.5px}
.lesson-depth .beat + .beat{border-top:1px solid var(--line)}
.lesson-depth .beat .lbl{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lamp-deep); display:block; margin-bottom:2px}
.lesson-depth .beat p, .lesson-depth .beat ol{color:var(--text)}
.lesson-depth .kit{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.lesson-depth .kit-item{border:1px solid var(--line); border-left:3px solid var(--sage); border-radius:10px; background:var(--paper-2); padding:11px 13px; display:flex; flex-direction:column; gap:3px}
.lesson-depth .kit-lbl{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.lesson-depth .kit-txt{font-size:14px; color:var(--text); line-height:1.5}
@media (max-width:560px){ .lesson-depth .kit{grid-template-columns:1fr} }

/* ── Placement quiz (profile page) ──────────────────────────────────────────── */
.card.pad-md{padding:16px}
.pl-quiz{background:var(--paper-2)}
.pl-q{border:0; margin:0 0 12px; padding:0}
.pl-q legend{font-weight:600; font-size:14.5px; margin-bottom:6px; padding:0}
.pl-opt{display:flex; align-items:flex-start; gap:8px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; margin-bottom:5px; cursor:pointer; font-size:14px; background:var(--card)}
.pl-opt:hover{border-color:var(--lamp)}
.pl-opt input{margin-top:2px}
.pl-opt:has(input:checked){border-color:var(--lamp); background:var(--lamp-soft)}

/* ── States: notice / spinner / skeleton / empty / error / save ───────────── */
.notice{position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); z-index:80; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:12px; padding:12px 16px; font-size:14px; max-width:90vw; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.notice.show{opacity:1; transform:translate(-50%,0)}
.notice.err{border-color:var(--danger); color:var(--danger)}
.notice.ok{border-color:var(--sage); color:var(--sage)}
.spinner{width:26px; height:26px; border:3px solid var(--line); border-top-color:var(--lamp); border-radius:50%; animation:tw-spin .8s linear infinite}
.spinner.lg{width:40px; height:40px}
@keyframes tw-spin{to{transform:rotate(360deg)}}
.loading-row{display:flex; align-items:center; gap:12px; color:var(--muted); padding:26px 0; justify-content:center}
.skel{background:linear-gradient(90deg,var(--paper-2) 25%, var(--line) 37%, var(--paper-2) 63%); background-size:400% 100%; animation:tw-shimmer 1.4s ease infinite; border-radius:8px}
@keyframes tw-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.empty,.errbox{text-align:center; padding:34px 20px; border:1px dashed var(--line); border-radius:14px; color:var(--muted)}
.empty h3,.errbox h3{color:var(--text); margin-bottom:6px}
.errbox{border-style:solid; border-color:var(--danger); color:var(--text)}
.save-ind{font-size:12.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px}
.save-ind.saving::before{content:""; width:10px; height:10px; border:2px solid var(--line); border-top-color:var(--lamp); border-radius:50%; animation:tw-spin .7s linear infinite; display:inline-block}
.save-ind.saved{color:var(--sage)}

.muted{color:var(--muted)} .small{font-size:13px} .mt{margin-top:14px} .mb0{margin-bottom:0}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.row.between{justify-content:space-between}
.divider{height:1px; background:var(--line); border:0; margin:18px 0}
.err{color:var(--danger); font-size:14px}
.hidden{display:none !important}
.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}
.skip-link{position:absolute; left:8px; top:-48px; z-index:100; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:9px 14px; font-weight:600; text-decoration:none; transition:top .15s ease}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,.chip:focus-visible,.btn:focus-visible,.tw-item:focus-visible{outline:3px solid var(--lamp); outline-offset:2px; border-radius:8px}
:focus:not(:focus-visible){outline:none}

/* ── Lesson reading column ────────────────────────────────────────────────── */
.lesson-body{font-size:16.5px; line-height:1.7; max-width:70ch; margin-left:auto; margin-right:auto}
/* Spoken classroom: narration controls + read-along highlight */
.tw-controls{display:flex; align-items:center; gap:8px; padding:8px 10px; margin:0 0 16px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2)}
.tw-cbtn{width:38px; height:38px; flex:none; border-radius:9px; border:1px solid var(--line); background:var(--card); color:var(--text); font-size:15px; cursor:pointer; display:grid; place-items:center; transition:border-color .12s}
.tw-cbtn:hover{border-color:var(--lamp)}
/* Nudge the play button when the browser blocks autoplay — a tap starts the voice. */
.tw-cbtn.pulse{border-color:var(--lamp); animation:tw-pulse 1.25s ease-in-out infinite}
@keyframes tw-pulse{0%{box-shadow:0 0 0 0 rgba(224,169,81,.5)} 70%{box-shadow:0 0 0 8px rgba(224,169,81,0)} 100%{box-shadow:0 0 0 0 rgba(224,169,81,0)}}
/* Mic is "listening": solid red so the learner can see it's picking up their voice. */
.tw-cbtn.listening{background:var(--danger); border-color:var(--danger); color:#fff}
.tw-cbtn.listening:hover{border-color:var(--danger)}
.tw-cstatus{font-size:13px; color:var(--muted); margin-left:4px}
.rd .rb{border-radius:8px; padding:4px 10px; margin:6px -10px; transition:background .25s ease, box-shadow .25s ease}
.rd .rb.on{background:var(--lamp-soft); box-shadow:inset 3px 0 0 var(--lamp-deep)}
.rd li.rb{margin-left:16px}
.rd h3.rb, .rd h4.rb{font-family:"Newsreader",serif; margin:1em -10px .2em}
/* Whiteboard reveals itself step-by-step in sync with the teacher's voice. */
.tw-board-canvas svg g.tw-step{opacity:0; transition:opacity .55s ease}
.tw-board-canvas svg g.tw-step.on{opacity:1}
/* "No dead air" prep bubble: the teacher chats with the learner while the lesson is generated. */
.tw-prep{display:flex; gap:10px; align-items:flex-start; background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.tw-prep .avatar{flex:none; width:34px; height:34px; border-radius:50%; background:var(--lamp); color:#231a08; display:flex; align-items:center; justify-content:center; font-size:18px}
.tw-prep .who{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:2px}
.tw-prep .say{font-size:14.5px; line-height:1.5; color:var(--text)}
@media (prefers-reduced-motion: reduce){ .tw-cbtn.pulse{animation:none} .tw-board-canvas svg g.tw-step{transition:none} }
/* Lesson whiteboard: pinned above the scrolling lesson text (mirrors the Academy player).
   Sticks below the sticky topbar while the teaching text scrolls, releasing at the assessment. */
.tw-stage{position:relative}
.tw-board{position:sticky; top:56px; z-index:30; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); margin:0 0 16px; overflow:hidden}
.tw-board[hidden]{display:none}
/* Board bar carries the title AND the full, always-visible control set (they pin with the board). */
.tw-board-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 12px; border-bottom:1px solid var(--line); background:var(--paper-2); font-size:12.5px; font-weight:600; color:var(--text)}
.tw-board-title{flex:1 1 140px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tw-board-ctrls{flex:none; display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.tw-board-ctrls .tw-cbtn{width:32px; height:32px; font-size:14px}
.tw-csep{width:1px; height:22px; background:var(--line); margin:0 2px}
.tw-board-canvas{padding:12px; display:flex; align-items:center; justify-content:center; background:var(--card); overflow:auto}
.tw-board-canvas svg{max-width:100%; height:auto; max-height:min(240px,32vh); display:block}
.tw-board-canvas svg text{font-family:"IBM Plex Sans",sans-serif}
/* Ask-your-teacher row + status, pinned at the bottom of the board card. */
.tw-ask{display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper-2)}
.tw-ask .tw-cstatus{flex:none; max-width:34%; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tw-ask-in{flex:1 1 auto; min-width:80px; padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--text); font:inherit; font-size:13.5px}
/* An answer to a 💡/↺/🤔/ask question renders below the lesson; its board scrolls (not pinned). */
.answer-board{position:static; margin-top:10px}
/* Mobile: keep the board — and therefore the full control set — PINNED (it stays sticky under the
   topbar), but bound the card's height and let the whiteboard scroll INSIDE it. So the controls and the
   ask row stay reachable the whole lesson without the pinned card eating the small screen. */
@media (max-width:640px){
  .tw-board{ display:flex; flex-direction:column; max-height:min(46vh,380px) }
  .tw-board-bar{ flex:none }
  .tw-board-title{ flex:1 1 60px }
  .tw-board-ctrls{ gap:4px }
  .tw-board-ctrls .tw-cbtn{ width:34px; height:34px; font-size:15px }
  .tw-board-canvas{ flex:1 1 auto; min-height:0; overflow:auto; padding:8px }
  .tw-board-canvas svg{ max-height:none }
  .tw-ask{ flex:none }
}
.lesson-body h2{font-family:"Newsreader",serif; font-size:24px; margin:1.4em 0 .4em}
.lesson-body h3{font-size:18px; margin:1.3em 0 .3em}
.lesson-body p{margin:.7em 0}
.lesson-body ul,.lesson-body ol{margin:.7em 0; padding-left:1.3em}
.lesson-body li{margin:.35em 0}
.lesson-body code{font-family:"IBM Plex Mono",monospace; font-size:.9em; background:var(--paper-2); padding:1px 5px; border-radius:5px}
.lesson-body table{border-collapse:collapse; width:100%; margin:1em 0; font-size:14.5px; display:block; overflow-x:auto}
.lesson-body th,.lesson-body td{border:1px solid var(--line); padding:8px 11px; text-align:left}

/* Sticky lesson transport (prev / next / continue) */
.transport{position:sticky; bottom:0; z-index:30; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(6px); border-top:1px solid var(--line); margin-top:24px}
.transport-in{max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:10px}
.transport .grow{flex:1}
.transport .lbl{font-size:11px; color:var(--muted); font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.1em}
.transport .tt{font-weight:600; font-size:13.5px; max-width:22ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .tw-nav{display:none; position:absolute; top:56px; left:0; right:0; background:var(--card); border-bottom:1px solid var(--line); flex-direction:column; padding:8px 14px; gap:2px; box-shadow:var(--shadow)}
  .tw-nav.open{display:flex}
  .tw-nav a{padding:11px 12px}
  .tw-menu-btn{display:inline-flex}
  .transport .tt{max-width:9ch}
  .transport-in{padding:10px 14px; gap:7px}
  .card{padding:18px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important}
}
