/* ============================================================
   lessons.css - styling for the interactive lesson widgets
   (js/lesson-widgets.js) and the teaching diagrams.

   Design intent: lessons should feel taught, not read. Interactive
   blocks sit inside lesson cards with a soft blue frame so they read
   as "something to do". Everything uses the design tokens so the
   clinical-system theme re-tints them automatically.

   Progressive enhancement: before the engine runs (or with no JS at
   all) every widget is fully readable - the .ix-on class, added at
   activation, is what hides the click-to-uncover parts.
   ============================================================ */

/* Reading measure: teaching prose capped at a dyslexia-friendly 70ch with longform
   leading; tables, widgets and diagrams keep the full card width. */
.lesson-body p, .lesson-body ul, .lesson-body ol, .lesson-body h4 { max-width: 70ch; }
.lesson-body p, .lesson-body li { line-height: var(--lh-longform, 1.7); }
.lesson-body .callout p, .lesson-body .rl-example p, .lesson-body .ixh-panel p { max-width: none; }

/* Model record entries, letters and safety-net scripts: quoted material in roman type.
   Never long italics - these passages carry drug names and doses and must be the
   easiest text on the page to read, not the hardest. */
.model-note, .qnote { font-style: normal; font-size: 1rem; line-height: var(--lh-longform, 1.7); }
.model-note::before { content: "Model wording"; display: block; font-size: .78rem; font-weight: 700;
  color: var(--green); margin-bottom: .3rem; }
.model-note em, .qnote em, .lesson-body .callout > p > em:only-child { font-style: normal; }

.ix { border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; margin: 1.1rem 0;
  background: linear-gradient(180deg, var(--card), var(--teal-50)); box-shadow: var(--shadow-xs); }
.ix .ixq { font-weight: 600; margin: 0 0 .6rem; }
.ix::before { content: "Try it"; display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--teal-600); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: .12rem .6rem; margin-bottom: .55rem; }
.ix[data-ix="selfcheck"]::before { content: "Self-check"; }
.ix[data-ix="hotspot"]::before { content: "Explore the diagram"; }
.ix[data-ix="steps"]::before { content: "Step through it"; }
.ix[data-ix="flips"]::before { content: "Tap the cards"; }
.ix[data-ix="reveal"]::before { content: "Think first"; }
.ix[data-ix="check"]::before { content: "Quick check"; }
.ix[data-ix="sort"]::before { content: "You decide"; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the "why" explanations ----------
   Visible for crawlers / no-JS; once a widget is live they only show
   after the learner commits to an answer. */
.ixwhy { display: block; font-weight: 400; font-size: .95rem; color: var(--ink); margin-top: .35rem; }
.ix-on .ixo .ixwhy, .ix-on .ixs .ixwhy { display: none; }
.ix-on .ixo.picked .ixwhy, .ix-on .ixs.good .ixwhy, .ix-on .ixs.bad .ixwhy { display: block; }
/* once a widget is completed every explanation stays readable - revision must
   never cost another round of clicks (dyslexic and ADHD readers re-read) */
.ix-on.done .ixo .ixwhy, .ix-on.done .ixs .ixwhy { display: block; }

/* the "show all" escape hatch on steps and flip decks */
.ix-showall { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--ink-soft); background: none; border: none; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; padding: .3rem 0; margin-top: .5rem; }
.ix-showall:hover { color: var(--teal-600); }
.ix-showall:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ix[data-ix="flips"] .ix-showall { grid-column: 1 / -1; justify-self: start; }

/* ---------- quick check ---------- */
.ixo { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: .6rem .75rem; border: 1.5px solid var(--line-strong); border-radius: 11px; margin: 0 0 .45rem;
  background: var(--card); transition: border-color .15s, background .15s; }
.ixo:hover:not(:disabled) { border-color: var(--teal-600); }
.ixo:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ixo:disabled { opacity: .55; cursor: default; }
.ixo.picked.good { border-color: var(--green); background: var(--green-50); }
.ixo.picked.good::after { content: " Correct"; font-weight: 700; color: var(--green); }
.ixo.picked.bad { border-color: var(--red); background: var(--red-50); }
.ixo.picked.bad::after { content: " Not quite - try again"; font-weight: 700; color: var(--red); }

/* ---------- think-then-reveal ---------- */
.ix-revealbtn { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--teal-600); background: var(--card); border: 1.5px dashed var(--teal-600); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer; }
.ix-revealbtn:hover { background: var(--teal-50); }
.ix-revealbtn:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ix-on[data-ix="reveal"] .ixr { display: none; }
.ix-on[data-ix="reveal"].open .ixr { display: block; margin-top: .8rem; animation: ixfade .25s ease; }
@keyframes ixfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- sort into buckets ---------- */
.ixs { border: 1.5px solid var(--line); border-radius: 11px; background: var(--card); padding: .6rem .75rem; margin: 0 0 .55rem; }
.ixs.good { border-color: var(--green); background: var(--green-50); }
.ixs.bad { border-color: var(--red); }
.ixs-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.ix-on .ixs.good .ixs-btns .ixs-btn:not(.sel) { display: none; }
.ixs-btn { font: inherit; font-size: .88rem; font-weight: 700; color: var(--teal-700); background: var(--teal-50);
  border: 1.5px solid var(--line-strong); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.ixs-btn:hover:not(:disabled) { border-color: var(--teal-600); }
.ixs-btn:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ixs-btn:disabled { cursor: default; opacity: .8; }
.ixs-btn.sel { color: #fff; background: var(--green); border-color: var(--green); opacity: 1; }
.ixs-score { display: none; font-weight: 700; color: var(--navy); margin-top: .6rem; }
.ixs-score.show { display: block; }

/* ---------- step-through ---------- */
.ix-on[data-ix="steps"] .ixstep { display: none; }
.ix-on[data-ix="steps"] .ixstep.cur { display: block; animation: ixfade .25s ease; }
.ix-on[data-ix="steps"].all .ixstep { display: block; border-top: 1px dashed var(--line); padding-top: .7rem; margin-top: .7rem; }
.ix-on[data-ix="steps"].all .ixst-nav { display: none; }
.ixstep h5 { margin: .1rem 0 .45rem; font-size: 1rem; color: var(--navy); }
.ixst-nav { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: .9rem;
  border-top: 1px solid var(--line); padding-top: .75rem; }
.ixst-dots { display: flex; gap: .1rem; }
/* dots stay ~15px visually but the tappable area is 25px (WCAG 2.5.8) */
.ixst-dot { width: 25px; height: 25px; border-radius: 50%; border: none; background: none;
  padding: 0; cursor: pointer; position: relative; }
.ixst-dot::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); }
.ixst-dot.seen::after { background: var(--teal-50); border-color: var(--teal-600); }
.ixst-dot.cur::after { background: var(--teal-600); border-color: var(--teal-600); }
.ixst-dot:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ixst-count { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.ix.done .ixst-count { color: var(--green); }
.ixst-nav .ixst-next { margin-left: auto; }

/* ---------- flip cards ---------- */
.ix[data-ix="flips"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.ix[data-ix="flips"]::before { grid-column: 1 / -1; justify-self: start; }
.ixf { border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--card); padding: .7rem .8rem;
  cursor: pointer; min-height: 74px; transition: border-color .15s, box-shadow .15s; }
.ixf:hover { border-color: var(--teal-600); box-shadow: var(--shadow-sm); }
.ixf:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ixf-a { font-weight: 800; color: var(--teal-700); display: flex; align-items: center; gap: .4rem; }
.ixf-ic { flex: 0 0 auto; color: var(--teal-600); }
.ix-on .ixf .ixf-a::after { content: "tap"; margin-left: auto; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .5rem; }
/* "got it" persists once a card has been seen, even flipped back or after refresh */
.ix-on .ixf.seen .ixf-a::after { content: "got it"; color: var(--green); border-color: var(--green); }
.ixf-b { font-size: .95rem; color: var(--ink); margin-top: .4rem; line-height: 1.55; }
.ix-on .ixf:not(.flip) .ixf-b { display: none; }
.ix-on .ixf:not(.flip) { display: flex; align-items: center; }
.ix-on .ixf:not(.flip) .ixf-a { width: 100%; }

/* ---------- diagram hotspots ---------- */
.ixh-hint { font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin: .2rem 0 .6rem; }
/* on narrow screens the diagram scrolls instead of shrinking its text below legibility */
.ixh-stage { overflow-x: auto; }
.ixh-stage svg { display: block; max-width: 100%; min-width: 620px; height: auto; margin: 0 auto; }
.hs { cursor: pointer; }
.hs:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: 6px; }
.hs .hs-box { transition: filter .15s, stroke-width .15s; }
.hs:hover .hs-box { filter: brightness(1.04); }
.hs.cur .hs-box { stroke: var(--teal-600); stroke-width: 3; }
.hs.seen:not(.cur) .hs-box { stroke-dasharray: none; opacity: .92; }
.ixh-panel { border: 1.5px solid var(--line); border-left: 4px solid var(--teal-600); border-radius: 0 11px 11px 0;
  background: var(--card); padding: .7rem .9rem; margin-top: .6rem; }
.ixh-panel h5 { margin: 0 0 .3rem; font-size: .98rem; color: var(--navy); }
.ixh-panel p { margin: .25rem 0; font-size: .95rem; }
.ix-on .ixh-panel { display: none; }
.ix-on .ixh-panel.cur { display: block; animation: ixfade .25s ease; }

/* ---------- outcomes self-check ---------- */
.ixc { display: flex; align-items: flex-start; gap: .55rem; width: 100%; text-align: left; font: inherit;
  color: var(--ink); background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 11px;
  padding: .55rem .7rem; margin: 0 0 .45rem; cursor: pointer; transition: border-color .15s, background .15s; }
.ixc:hover { border-color: var(--teal-600); }
.ixc:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ixc .ixc-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: .05rem; }
.ixc.on { border-color: var(--green); background: var(--green-50); }
.ixc.on .ixc-tick { background: var(--green); border-color: var(--green); color: #fff; }
.ixc-status { font-size: .88rem; font-weight: 600; color: var(--ink-soft); margin-top: .55rem; }

/* ---------- teaching diagrams (static SVG) ---------- */
.lesson-diagram { margin: 1.1rem 0; }
.lesson-diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.lesson-diagram figcaption { text-align: center; font-size: .9rem; color: var(--ink-soft); margin-top: .45rem; }

/* diagram text inherits the brand font */
.ixh-stage svg text, .lesson-diagram svg text { font-family: inherit; }

/* shared diagram vocabulary (used by inline teaching SVGs)
   .dgm-box   plain node        .dgm-box.hl   highlighted node (that's you)
   .dgm-t     node title        .dgm-sub      small supporting text
   .dgm-edge  plain connector   .dgm-money    funding-flow connector
   .dgm-lbl   text on a connector */
svg .dgm-box { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.5; }
svg .dgm-box.tint { fill: var(--teal-50); }
svg .dgm-box.hl { fill: var(--teal-50); stroke: var(--teal-600); stroke-width: 2.5; }
svg .dgm-box.grn { fill: var(--green-50); stroke: var(--green); }
svg .dgm-box.amb { fill: var(--amber-50); stroke: var(--amber); }
svg .dgm-box.red { fill: var(--red-50); stroke: var(--red); }
/* numbered step chips and a green/red glyph for flow diagrams */
svg .dgm-num { fill: var(--teal-600); font-size: 13px; font-weight: 800; }
svg .dgm-ok { fill: var(--green); font-size: 15px; font-weight: 800; }
svg .dgm-no { fill: var(--red); font-size: 15px; font-weight: 800; }
svg .dgm-t { fill: var(--ink); font-size: 15px; font-weight: 700; }
svg .dgm-sub { fill: var(--ink-soft); font-size: 12.5px; font-weight: 500; }
svg .dgm-big { fill: var(--navy); font-size: 17px; font-weight: 800; }
svg .dgm-edge { stroke: var(--line-strong); stroke-width: 1.8; fill: none; }
svg .dgm-money { stroke: var(--green); stroke-width: 2.2; fill: none; }
svg .dgm-lbl { fill: var(--ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
/* the "member practices form the PCN" association link (a grouping, not a money flow) */
svg .dgm-member { stroke: var(--ink-soft); stroke-width: 1.6; fill: none; stroke-dasharray: 5 4; }
/* small icon inside a diagram node (top-left of the box) */
svg .dgm-ic { fill: none; stroke: var(--teal-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* realistic mock-record rows (the clinical-system screen) */
svg .dgm-rowh { fill: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
svg .dgm-row { fill: var(--ink); font-size: 12.5px; font-weight: 500; }
svg .dgm-date { fill: var(--ink-soft); font-size: 11px; font-weight: 600; }
svg .dgm-date.warn { fill: var(--amber-700); font-weight: 700; }
svg .dgm-hair { stroke: var(--line); stroke-width: 1; }
svg .dgm-arrhead { fill: var(--line-strong); }
svg .dgm-arrhead.money { fill: var(--green); }

/* ---------- real-life example callout ---------- */
.rl-example { display: flex; gap: .8rem; border: 1.5px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--card), var(--blue-50)); padding: .9rem 1rem; margin: 1.1rem 0; }
.rl-example .rl-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--blue-50);
  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--blue); }
.rl-example h5 { margin: 0 0 .25rem; font-size: .95rem; color: var(--navy); }
.rl-example h5 .rl-tag { font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--blue); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; margin-right: .45rem; vertical-align: 1px; }
.rl-example p { margin: .25rem 0; font-size: .95rem; }

/* ---------- lesson cards: place, size and progress ---------- */
.module-quick-actions { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; margin:.85rem 0 0; }
.module-quick-actions .btn { min-height:44px; }
.lessons-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.lesson-progress { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.lp-chip { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card);
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; padding: 0; }
.lp-chip.seen { border-color: var(--teal-600); background: var(--teal-50); color: var(--teal-700); }
.lp-chip.cur { border-color: var(--teal-600); background: var(--teal-600); color: #fff; }
.lp-chip:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.lp-resume { margin-right: .4rem; }
.lesson-strap { display: flex; align-items: center; gap: .7rem; margin-bottom: .35rem; }
.lesson-strap .lc-num { font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--teal-700);
  background: var(--teal-50); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .6rem; }
.lesson-strap .lc-min { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.gphc-details summary::-webkit-details-marker { color: var(--teal-600); }

/* ---------- lesson deck: one lesson on screen, paged through ---------- */
/* Only the current lesson is shown; the rest stay in the DOM (so their teaching
   widgets keep a stable persistence index) but hidden. [hidden] must beat .card. */
.lesson-deck .lesson-card[hidden] { display: none !important; }
.lesson-cardnav { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lesson-cardnav .lc-dots { font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-align: center; flex: 1 1 auto; }
.lesson-cardnav .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .module-quick-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .module-quick-actions .btn { width:100%; }
  .lesson-cardnav { gap: .5rem; }
  .lesson-cardnav .lc-dots { order: -1; flex-basis: 100%; }
}

@media (max-width: 640px) {
  .ix { padding: .8rem .8rem; }
  .ixst-nav .ixst-next { margin-left: 0; }
}

/* ============================================================
   Lesson colour components (panel-agreed set): one shared anatomy -
   4px accent edge, tinted ground, small uppercase kicker chip.
   Authoring meanings:
     .redflag         hard escalation thresholds and never-events ONLY
     .callout.green   "Practice point": an actionable habit or model behaviour
     .ev              inline evidence chip: NICE/CKS/BNF (teal dot),
                      GPhC/law/contract (navy dot), local SOP (green dot)
     .keynums         stat strip for intervals/thresholds already in the text
   ============================================================ */
.lesson-body .redflag { border-left: 4px solid var(--red); background: var(--red-50); border-radius: 0 9px 9px 0;
  padding: .9rem 1.1rem; margin: 1rem 0; color: #8a1f2f; }
.lesson-body .redflag::before { content: "Red flag"; display: inline-block; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--red); border-radius: 5px;
  padding: .12rem .5rem; margin-bottom: .45rem; }
.lesson-body .redflag p { margin: .3rem 0 0; color: inherit; }
.lesson-body .callout.green::before { content: "Practice point"; display: inline-block; font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--green); border-radius: 5px;
  padding: .12rem .5rem; margin-bottom: .45rem; }
.lesson-body .ev { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
  color: var(--navy); background: var(--chip, #eef2f6); border-radius: 999px; padding: .12rem .6rem; white-space: nowrap; }
.lesson-body .ev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-600); }
.lesson-body .ev.law::before { background: var(--navy); }
.lesson-body .ev.sop::before { background: var(--green); }
.lesson-body .keynums { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; }
.lesson-body .keynums .kn { flex: 1 1 130px; max-width: 200px; background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--teal-600); border-radius: 10px; padding: .6rem .75rem; }
.lesson-body .keynums .kn b { display: block; font-size: 1.15rem; color: var(--navy); line-height: 1.2; }
.lesson-body .keynums .kn span { font-size: .76rem; color: var(--ink-soft); }
.lesson-body .keynums .kn.warn { border-top-color: var(--amber); }
.lesson-body .keynums .kn.danger { border-top-color: var(--red); }
.lesson-body .keynums .kn.danger b { color: var(--red); }

/* ============================================================
   Reading & focus preferences (dyslexia / ADHD support)
   Body classes set by js/reading-prefs.js; BDA style guidance:
   bigger type, generous spacing, low-glare cream ground, no italics.
   ============================================================ */
/* text size steps: lesson bodies and the widgets inside them */
body.read-lg .lesson-body, body.read-lg .diag-card, body.read-lg .ix { font-size: 1.08rem; }
body.read-xl .lesson-body, body.read-xl .diag-card, body.read-xl .ix { font-size: 1.18rem; }
body.read-xl .lesson-body p, body.read-xl .lesson-body li { line-height: 1.85; }
/* extra spacing: lines, letters, words, paragraphs */
body.read-spaced .lesson-body p, body.read-spaced .lesson-body li,
body.read-spaced .diag-qt, body.read-spaced .ixq {
  line-height: 2.1; letter-spacing: .015em; word-spacing: .12em; }
body.read-spaced .lesson-body p { margin-bottom: 1.1em; }
/* dyslexia mode: cream ground on the reading surfaces, emphasis without italics */
body.read-dyslexic .lesson-card, body.read-dyslexic .diag-card { background: #fbf7ec; }
body.read-dyslexic .lesson-body em, body.read-dyslexic .lesson-body i { font-style: normal; font-weight: 600; }
body.read-dyslexic .lesson-body { color: #23303f; }
body.read-dyslexic .letter-paper { background: #fbf7ec; }
/* focus mode: strip the chrome, one lesson in view, an always-visible exit */
body.read-focus .topbar, body.read-focus .footer, body.read-focus .cookie-bar,
body.read-focus .report-fab, body.read-focus .mascot, body.read-focus .trust-band { display: none !important; }
body.read-focus .app { padding-top: .5rem; }
.rp-focus-exit { display: none; }
body.read-focus .rp-focus-exit { display: inline-flex; position: fixed; top: .6rem; right: .6rem; z-index: 950;
  font: inherit; font-size: .8rem; font-weight: 700; color: #fff; background: var(--navy); border: 0;
  border-radius: 999px; padding: .45rem .9rem; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(16,32,64,.5); }

/* the floating Aa button + panel */
.rp-btn { position: fixed; bottom: 5.2rem; right: 1rem; z-index: 940; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--card, #fff); color: var(--navy); font-weight: 800; font-size: 1rem;
  cursor: pointer; box-shadow: 0 8px 20px -10px rgba(16,32,64,.45); }
.rp-btn:hover { border-color: var(--teal-600); }
.rp-btn:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.rp-panel { position: fixed; bottom: 5.2rem; right: 4.2rem; z-index: 945; width: min(320px, calc(100vw - 5.5rem));
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
  box-shadow: 0 18px 40px -18px rgba(16,32,64,.5); }
.rp-head { font-weight: 800; color: var(--navy); margin-bottom: .6rem; }
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.rp-lbl { font-size: .85rem; font-weight: 600; }
.rp-segs { display: inline-flex; gap: 2px; background: var(--surface-muted, #e9f1fa); border-radius: 999px; padding: 3px; }
.rp-seg { font: inherit; font-size: .76rem; font-weight: 700; color: var(--ink-soft); background: none; border: 0;
  border-radius: 999px; min-height: 40px; padding: .4rem .65rem; cursor: pointer; }
.rp-seg.on { background: var(--teal-600); color: #fff; }
.rp-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-top: 1px solid var(--line); padding: .55rem 0; cursor: pointer; }
.rp-toggle strong { display: block; font-size: .86rem; color: var(--ink); }
.rp-toggle small { display: block; font-size: .74rem; color: var(--ink-soft); }
.rp-knob { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px; background: #cdd8e4; position: relative; transition: background .15s; }
.rp-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s; }
.rp-toggle.on .rp-knob { background: var(--green); }
.rp-toggle.on .rp-knob::after { transform: translateX(14px); }
.rp-note { font-size: .72rem; color: var(--ink-soft); margin: .5rem 0 0; }
/* per-lesson Listen button */
.rp-listen { font: inherit; font-size: .76rem; font-weight: 700; color: var(--teal-600); background: none;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .2rem .6rem; cursor: pointer; margin-left: auto; }
.rp-listen:hover { border-color: var(--teal-600); }
@media (prefers-reduced-motion: reduce) { .rp-knob, .rp-knob::after { transition: none; } }

/* ============================================================
   Learning-style chooser + switcher
   ============================================================ */
.mode-chooser { border-top: 4px solid var(--teal-600); }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: .8rem; }
.mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; text-align: left; font: inherit;
  cursor: pointer; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: .95rem 1rem;
  transition: border-color .12s, transform .12s, box-shadow .12s; }
.mode-card:hover { border-color: var(--teal-600); transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(16,42,80,.4); }
.mode-card:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.mode-card strong { color: var(--navy); font-size: .96rem; }
.mode-card .muted { font-size: .82rem; line-height: 1.45; }
.mode-switch { display: inline-flex; gap: 2px; background: var(--surface-muted, #e9f1fa); border-radius: 999px; padding: 3px; }
.mode-seg { display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: .3rem .7rem; cursor: pointer; }
.mode-seg:hover { color: var(--navy); }
.mode-seg.on { background: var(--teal-600); color: #fff; }
.mode-seg:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
@media (max-width:620px) {
  .lp-chip { width:42px; height:42px; }
  .mode-seg { min-height:42px; padding:.45rem .75rem; }
  .rp-listen { min-height:42px; padding:.45rem .7rem; }
}

/* ============================================================
   Baseline diagnostic ("prove it first, then teach the gaps")
   ============================================================ */
.diag-card { border-top: 4px solid var(--teal-600); }
.diag-card.done { border-top-color: var(--green); }
.diag-q { margin: .9rem 0; }
.diag-qt { font-weight: 600; margin: 0 0 .45rem; max-width: 70ch; }
.diag-opts { display: flex; flex-direction: column; gap: .4rem; }
.diag-opt { display: block; width: 100%; max-width: 62ch; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); padding: .5rem .7rem;
  transition: border-color .12s, background .12s; }
.diag-opt:hover { border-color: var(--teal-600); }
.diag-opt.picked { border-color: var(--teal-600); background: var(--teal-50); font-weight: 600; }
.diag-opt:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
/* the personal path map: one chip per lesson, coloured by what the baseline proved */
.diag-map { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.diag-chip { font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); padding: .35rem .75rem; }
.diag-chip.secure { border-color: var(--green); background: var(--green-50); color: var(--green-700, #1e6f43); }
.diag-chip.secure::before { content: "✓ "; }
.diag-chip.gap { border-color: var(--amber); background: var(--amber-50); color: #7c5108; font-weight: 700; }
.diag-chip.gap::before { content: "→ "; }
.diag-chip:hover { border-color: var(--teal-600); }
/* per-lesson banners */
.diag-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; font-weight: 600;
  border-radius: 10px; padding: .55rem .8rem; margin: .2rem 0 .9rem; }
.diag-banner.secure { background: var(--green-50); color: var(--green-700, #1e6f43); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.diag-banner.gap { background: var(--amber-50); color: #7c5108; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.diag-banner .btn { margin-left: auto; }
/* the lesson map inherits the baseline colours */
.lp-chip.secure { border-color: var(--green); background: var(--green-50); color: var(--green-700, #1e6f43); }
.lp-chip.gap { border-color: var(--amber); background: var(--amber-50); color: #7c5108; }
.lp-chip.gap:not(.cur) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--amber) 30%, transparent); }
.lp-chip.cur.secure, .lp-chip.cur.gap { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }
   clinical illustration widget (js/lesson-widgets.js buildIllus)
   A pathophysiology cartoon: a stage scrubber or stepped story that
   morphs an inline SVG and updates a readout. Authored SVGs use the
   physiology palette below; everything sits on design tokens.
   ============================================================ */
:root {
  --tissue:#d98a86; --tissue-deep:#b6635f; --tissue-pale:#f3d7d3;
  --muscle:#c96f8f; --muscle-deep:#a24d6d;
  --urine:#e7b64a; --urine-deep:#c9962a;
  --air:#3f9bd6; --mucus:#cbb46a; --lipid:#e3c23c; --thrombus:#7a1a2b;
}
.ix[data-ix="illus"]::before { content: "Explore the diagram"; }
/* smooth morphing between stages for every element the engine drives */
.ill-stage svg [data-el] { transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease,
  cx .6s ease, cy .6s ease, r .6s ease, rx .6s ease, ry .6s ease, x .6s ease, y .6s ease,
  width .6s ease, height .6s ease, d .6s ease, stroke-width .5s ease, stroke .4s ease; }

.ill-scene { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 1.3rem; align-items: start; }
@media (max-width: 680px) { .ill-scene { grid-template-columns: 1fr; } }
.ill-stage { overflow-x: auto; }
.ill-stage svg { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--line); }
.ill-side { min-width: 0; }

/* inflammation / level meter */
.ill-meter { margin: 0 0 .8rem; }
.ill-meter-top { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .3rem; }
.ill-meter-top span:last-child { color: var(--navy); }
.ill-meter-track { height: 12px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--line); overflow: hidden; }
.ill-meter-fill { height: 100%; border-radius: 999px; width: 12%;
  background: linear-gradient(90deg, var(--green), var(--amber-700) 55%, var(--red)); transition: width .6s cubic-bezier(.4,0,.2,1); }

.ill-read h4 { display: flex; align-items: center; gap: .5rem; margin: .55rem 0 .5rem; font-size: 1.05rem; color: var(--navy); }
.ill-read p { margin: 0; font-size: .97rem; }
.sev-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.sev-dot.sev1 { background: var(--green); } .sev-dot.sev2 { background: var(--amber-700); } .sev-dot.sev3 { background: var(--red); }
.ill-tag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border-radius: 999px; padding: .14rem .6rem; border: 1px solid var(--line); }
.ill-tag.green { color: var(--green-700); background: var(--green-50); }
.ill-tag.amber { color: var(--amber-700); background: var(--amber-50); }
.ill-tag.red { color: #b13a4d; background: var(--red-50); }
.ill-syms { list-style: none; padding: 0; margin: .6rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.ill-syms li { display: flex; align-items: flex-start; gap: .5rem; font-size: .93rem; padding: .4rem .6rem; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line); }
.ill-syms li svg { flex: 0 0 auto; margin-top: 3px; }
.ill-syms li.ok { color: var(--ink-soft); }
.ill-syms li.act { background: var(--red-50); border-color: #e0919d; font-weight: 600; }
.ill-syms li.act svg { color: var(--red); }

/* scrubber controls */
.ill-track { display: flex; gap: .4rem; }
.ill-stbtn { flex: 1; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink-soft); line-height: 1.25;
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: .5rem .3rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s; }
.ill-stbtn:hover { border-color: var(--teal-600); }
.ill-stbtn:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.ill-stbtn.sev1[aria-pressed="true"] { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.ill-stbtn.sev2[aria-pressed="true"] { color: #fff; background: var(--amber-700); border-color: var(--amber-700); }
.ill-stbtn.sev3[aria-pressed="true"] { color: #fff; background: var(--red); border-color: var(--red); }
.ill-range { width: 100%; margin-top: .7rem; accent-color: var(--teal-600); }

/* stepped-story controls */
.ill-nav { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ill-dots { display: flex; gap: .35rem; flex: 1 1 auto; justify-content: center; }
.ill-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); opacity: .5; display: inline-block; transition: opacity .2s, background .2s, transform .2s; }
.ill-dots i.seen { opacity: .9; background: var(--teal-600); }
.ill-dots i.cur { opacity: 1; background: var(--teal-600); transform: scale(1.35); }
.ill-nav .ill-next { margin-left: auto; }
.ill-count { display: block; font-size: .8rem; color: var(--ink-soft); text-align: center; margin-top: .5rem; }

/* no-JS / SEO fallback: full text of every stage, hidden once the engine runs */
.ill-fallback { margin-top: .4rem; }
.ill-fallback ol { margin: 0; padding-left: 1.2rem; }
.ill-fallback li { margin-bottom: .5rem; }
.ix-on[data-ix="illus"].ill-live .ill-fallback { display: none; }

/* ---------- reduced motion: no fades, no smooth scrolling in the lesson layer ---------- */
@media (prefers-reduced-motion: reduce) {
  .ix-on[data-ix="reveal"].open .ixr,
  .ix-on[data-ix="steps"] .ixstep.cur,
  .ix-on .ixh-panel.cur { animation: none; }
  .ixf, .ixo, .ix-revealbtn { transition: none; }
  .ill-stage svg [data-el], .ill-meter-fill, .ill-dots i { transition: none; }
}

/* ---------- dashboard "your learning, your way" card ---------- */
.learnaid { border-top: 4px solid var(--teal-600); }
.learnaid-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, 1fr); gap: 1.4rem; align-items: start; }
.learnaid-styles { list-style: none; padding: 0; margin: .2rem 0 0; }
.learnaid-styles li { font-size: .9rem; margin: .35rem 0; }
.learnaid-controls { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; background: var(--surface-2, #f7f9fb); }
@media (max-width: 760px) { .learnaid-grid { grid-template-columns: 1fr; } }