/* Moyako Training — app styles (standalone). Theme tokens come from the shared
   pipeline: _shared/tokens/products/training.json -> generated/training-tokens.css
   (edit the JSON + run _shared/tokens/build-tokens.js; never hand-edit tokens here). */
@import url("_shared/tokens/generated/training-tokens.css");
*{box-sizing:border-box}
body[data-moyako-v2]{margin:0;background:var(--bg-primary);color:var(--text);
  font-family:-apple-system,Segoe UI,Roboto,system-ui,sans-serif;line-height:1.45}
.page{min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}

/* header + bottom nav */
.header{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;background:var(--bg-surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
/* Native shells draw edge-to-edge (viewport-fit=cover): keep chrome clear of the
   status bar / home indicator. env() is 0 in ordinary browsers — zero effect there. */
@supports (padding-top: env(safe-area-inset-top)){
  .header{height:calc(58px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .bottom-nav{height:calc(66px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
}
.header .logo{font-weight:800;font-size:17px}.header .logo b{color:var(--action)}
.header .spacer{flex:1}
.pill{background:var(--bg-raised);border:1px solid var(--line);border-radius:20px;padding:5px 12px;
  font-size:12px;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.pill b{color:var(--text)}
/* settings gear: always flush right, icon readable at a glance */
.header .gear{margin-left:auto;font-size:17px;padding:7px 11px}
.course-switch{cursor:pointer;font-size:12px;color:var(--text);max-width:210px}
/* Mobile: the header holds a lot (switcher + streak + band + auth + gear). Keep it from
   widening the page — it scrolls within itself, items pack left, pills stay whole. */
@media (max-width:480px){
  /* padding-left/right only — the `padding` shorthand would wipe the safe-area
     padding-top above, sliding the header under the iPhone status bar. */
  .header{gap:8px;padding-left:12px;padding-right:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .header::-webkit-scrollbar{height:0}
  .header .spacer{flex:1}
  .header .pill,.header .logo,.course-switch{flex:0 0 auto}
  .course-switch{max-width:150px}
}
button.pill.gear{cursor:pointer}

/* Settings overlay — FULL-SCREEN (owner decision 2026-08-19, games alignment;
   supersedes the 2026-07-13 content-region drawer). The inset version left
   live strips of the page visible around it ("Show 3 more subjects" peeked
   through on the picker) and sat under the bottom nav (z 19 < nav's 20).
   Now it covers and out-stacks everything; the backdrop dims header + nav. */
.mt-overlay{position:fixed;inset:0;z-index:30}
@supports (top: env(safe-area-inset-top)){
  /* Full-screen means the panel now reaches the notch + home-indicator zones. */
  .mt-overlay-panel{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .mt-overlay-close{top:calc(10px + env(safe-area-inset-top))}
}
.mt-overlay-backdrop{position:absolute;inset:0;background:rgba(3,7,18,.55);opacity:0;transition:opacity .22s ease}
.mt-overlay.on .mt-overlay-backdrop{opacity:1}
.mt-overlay-panel{position:absolute;top:0;right:0;height:100%;width:min(440px,100%);
  background:var(--bg-primary);box-shadow:-8px 0 40px rgba(0,0,0,.35);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column}
.mt-overlay.on .mt-overlay-panel{transform:translateX(0)}
.mt-overlay-frame{flex:1;width:100%;border:0;background:var(--bg-primary)}
.mt-overlay-close{position:absolute;top:10px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--bg-surface);
  color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mt-overlay-close:hover{border-color:var(--muted)}
@media (max-width:600px){
  .mt-overlay-panel{top:auto;bottom:0;right:0;width:100%;height:96%;
    border-radius:18px 18px 0 0;transform:translateY(100%)}
  .mt-overlay.on .mt-overlay-panel{transform:translateY(0)}
}
/* Owner 2026-09-07: no double-tap zoom anywhere in the app — a fast second tap on a keypad
   key or a chip must type/click, never zoom the page (iOS WKWebView and Safari zoom on
   double-tap by default; Chrome already does not). `manipulation` keeps PINCH zoom, so the
   web stays WCAG 1.4.4-friendly; nothing sets user-scalable=no. */
html{touch-action:manipulation}
/* Owner 2026-09-07: the icons sat too close to the top rule — a taller bar with the group
   anchored 14px below the line gives the icon breathing room. */
.bottom-nav{height:66px;display:flex;background:var(--bg-surface);border-top:1px solid var(--line);position:sticky;bottom:0;z-index:20}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding-top:14px;color:var(--muted);font-size:11px}
.bottom-nav a.active{color:var(--action-ink,var(--action))}.bottom-nav .ic{font-size:19px}
.body{flex:1;padding:20px;max-width:1120px;width:100%;margin:0 auto}

/* cards + type */
.moyako-card{background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.moyako-card.raised{background:var(--bg-raised)}
.row{display:flex;gap:var(--gap)}.col{flex:1}.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.muted{color:var(--muted)}.small{font-size:12px}.tiny{font-size:11px}.center{text-align:center}
.kpi{font-size:28px;font-weight:800;color:var(--text)}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:12px;background:var(--bg-raised);border:1px solid var(--line);color:var(--muted)}
.tag.H{color:#ffb74d;border-color:#8a5a1c}.tag.F{color:#7ec8ff;border-color:#2b5a80}
h1,h2,h3{margin:0 0 .4em}.h-sec{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:6px 0 10px}

/* buttons */
.btn-primary,.btn-secondary,.btn-ghost{border:none;border-radius:12px;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;display:inline-block;text-align:center}
.btn-primary{background:var(--action);color:var(--on-action)}.btn-primary.block,.btn-secondary.block{width:100%}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost{background:var(--bg-raised);color:var(--text);border:1px solid var(--line);font-weight:600;font-size:13px;padding:8px 12px}
.btn-primary[disabled]{background:var(--bg-raised);color:var(--muted);cursor:not-allowed}

/* two-pane */
.two-pane{display:flex;gap:var(--gap);align-items:stretch}
.two-pane .pane{flex:1;display:flex;flex-direction:column;gap:var(--gap)}
.two-pane .pane.right{flex:0 0 380px}
/* iPad/desktop: sentence-length MCQ options need more than a 380px rail —
   keypad answers keep the calculator column, option lists widen (:has is
   progressive; older WebViews just keep 380px). */
.two-pane .pane.right:has(.opts){flex:0 0 46%;max-width:540px}
@media (max-width:820px){ .two-pane{flex-direction:column} .two-pane .pane.right{flex:1} .grid2{grid-template-columns:1fr} }

/* MTS ring */
.ring{--pct:0;--band:var(--band-train);width:132px;height:132px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--band) calc(var(--pct)*1%),color-mix(in srgb,var(--muted) 20%,transparent) 0);display:flex;align-items:center;justify-content:center;position:relative}
.ring.sm{width:104px;height:104px}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bg-surface)}
.ring .val{position:relative;text-align:center}.ring .val b{font-size:30px;color:var(--text)}.ring.sm .val b{font-size:24px}
.ring .val span{display:block;font-size:11px;color:var(--muted)}

/* mastery bars */
.bar{margin:10px 0}.bar .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.bar .lab a{color:var(--accent)}
.bar .track{height:9px;background:color-mix(in srgb,var(--muted) 20%,transparent);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--action)}
.bar .fill.mid{background:var(--accent)}.bar .fill.low{background:var(--danger)}
.bar.locked{opacity:.5}

/* progress */
.qprog{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qprog .track{flex:1;height:8px;background:color-mix(in srgb,var(--muted) 20%,transparent);border-radius:6px;overflow:hidden}
.qprog .fill{height:100%;background:var(--action);border-radius:6px;transition:width .3s}

/* question player */
.crumb{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.stem{font-size:25px;color:var(--text);margin:10px 0 8px;min-height:40px;overflow-x:auto;overflow-y:hidden;max-width:100%}
@media (max-width:820px){ .stem{font-size:21px} }
/* ---- shared subject cards (Study: lean · Progress: with numbers) and band chips — tokens only ---- */
.subj-cards{display:flex;flex-direction:column;gap:9px;margin:0 0 14px}
.subj-card{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--radius,14px);padding:12px 14px;color:var(--text);text-decoration:none}
a.subj-card:hover,.subj-card a.subj-main:hover .subj-name{color:var(--action-ink,var(--action))}
.subj-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-decoration:none;color:inherit}
.subj-ic{width:36px;height:36px;flex:0 0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg-raised);color:var(--muted);font-size:17px}
.subj-tx{flex:1;min-width:0}
.subj-name{display:block;font-weight:800;font-size:14.5px;color:var(--text);line-height:1.2}
.subj-next{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.subj-next.due{color:var(--accent-ink,var(--accent))}
.subj-next.new{color:var(--action-ink,var(--action))}
.subj-go{flex:0 0 auto;padding:8px 13px;border-radius:999px;background:var(--action);color:var(--on-action);font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap}
.subj-card.stats{flex-direction:column;align-items:stretch;gap:8px}
.subj-card.stats .subj-head{display:flex;align-items:center;gap:8px}
.subj-card.stats .subj-head .subj-name{flex:1;min-width:0}
.subj-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.subj-nums div{background:var(--bg-raised);border-radius:9px;padding:7px 9px;min-width:0}
.subj-nums b{display:block;font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.subj-nums span{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}
.subj-cov{height:5px;border-radius:3px;background:color-mix(in srgb,var(--muted) 20%,transparent);overflow:hidden}
.subj-cov i{display:block;height:100%;background:var(--action);border-radius:3px}
.subj-foot{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.subj-foot .ok{color:var(--action-ink,var(--action))}
.band{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.band.b-new{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted)}
.band.b-building{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent-ink,var(--accent));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.band.b-secure{background:color-mix(in srgb,var(--action) 16%,transparent);color:var(--action-ink,var(--action));border-color:color-mix(in srgb,var(--action) 50%,transparent)}
.band.b-strong{background:var(--action);color:var(--on-action)}
@media (max-width:420px){ .subj-nums{gap:5px} .subj-nums b{font-size:14px} }
/* ---- subject bar: subject chips, then section tabs, then the page title (Owner 2026-09-07) ---- */
.subj-tabs{display:flex;gap:7px;overflow-x:auto;margin:8px 0 0;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subj-tabs::-webkit-scrollbar{display:none}
.subj-tabs a{flex:0 0 auto;padding:7px 13px;border-radius:999px;background:var(--bg-raised);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.subj-tabs a:hover{color:var(--text);border-color:color-mix(in srgb,var(--action) 45%,var(--line))}
.subj-tabs a.on{background:var(--action);border-color:var(--action);color:var(--on-action)}
.subj-tabs a.subj-add{border-style:dashed;background:transparent}

/* version line (MT.shell.versionLine) — settings footer + every guest-facing page */
.ver-line{text-align:center;font-size:11.5px;color:var(--muted);margin:18px 0 6px}
.ver-line:empty{display:none}

/* ===== shared chip row (Owner 2026-09-07): mock presets, the topic map's lens, the Study scope chip ===== */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.chip-row .chip-lab{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.chip-row button{background:var(--bg-raised);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:700;padding:6px 12px;cursor:pointer;line-height:1.2}
.chip-row button:hover{color:var(--text);border-color:color-mix(in srgb,var(--action) 45%,var(--line))}
.chip-row button.on{background:var(--action);border-color:var(--action);color:var(--on-action)}
.chip-row button:disabled{opacity:.45;cursor:default}

/* ===== shared topic checklist (MT.shell.topicChecklist) — exam mock + "covered so far" editor ===== */
.mk-list{max-height:290px;overflow:auto;border:1px solid var(--line);border-radius:13px;background:var(--bg-raised);padding:2px 12px;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.mk-strand summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;font-size:13px;font-weight:700;color:var(--text)}
.mk-strand summary::-webkit-details-marker{display:none}
.mk-strand summary::before{content:"›";display:inline-block;width:12px;color:var(--muted);transition:transform .15s}
.mk-strand[open] summary::before{transform:rotate(90deg)}
.mk-strand summary span:first-of-type{flex:1;min-width:0}
.mk-strand summary .mk-c{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.mk-strand{border-top:1px solid var(--line)}
.mk-strand:first-child{border-top:none}
.mk-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0 8px 12px;font-size:13.5px;color:var(--text);cursor:pointer;line-height:1.35}
.mk-row input{margin:2px 0 0;flex:0 0 auto;width:18px;height:18px;accent-color:var(--action)}
.mk-row .mk-n{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto;padding-left:6px}
.mk-row .mk-calc{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font-size:11px;font-weight:700;color:var(--info);white-space:nowrap;vertical-align:middle}

/* ===== "covered so far" scope: the Overview card + the Study card chip ===== */
.scope-card{margin:0 0 16px}
.scope-card .scope-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.scope-card .scope-row label{font-size:13px;font-weight:700;color:var(--text)}
.scope-card select{background:var(--bg-primary);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:13px;padding:7px 10px;max-width:100%}
.scope-card .scope-count{font-size:13px;color:var(--muted)}
.scope-card .scope-count b{color:var(--text)}
.scope-card .scope-links{display:inline-flex;gap:12px;margin-left:4px}
.scope-card .scope-links a{font-size:13px;font-weight:700;color:var(--action-ink,var(--action))}
.scope-card .scope-note{font-size:12.5px;color:var(--muted);margin:0 0 6px;line-height:1.45}
.scope-card .scope-on{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin-top:8px}
.scope-card .scope-on input{width:18px;height:18px;accent-color:var(--action);margin:0}
.scope-card .mk-list{margin-top:10px}
.subj-scope{align-self:center;margin-right:8px;background:var(--bg-raised);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11.5px;font-weight:700;padding:5px 10px;cursor:pointer;white-space:nowrap}
.subj-scope.on{color:var(--action-ink,var(--action));border-color:color-mix(in srgb,var(--action) 45%,var(--line));background:color-mix(in srgb,var(--action) 10%,transparent)}
.sec-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:10px 0 14px;overflow-x:auto;scrollbar-width:none}
.sec-tabs::-webkit-scrollbar{display:none}
.sec-tabs a{flex:0 0 auto;padding:9px 12px 8px;font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sec-tabs a:hover{color:var(--text)}
.sec-tabs a.on{color:var(--text);border-bottom-color:var(--action)}
/* the question in words above the maths, shown only when the maths carries no instruction */
.exwords{font-size:16px;line-height:1.45;color:var(--text);margin:8px 0 0;max-width:60ch}
.mascot{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text)}.mascot .face{font-size:22px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;font-size:17px}
.opt:hover{border-color:#3d5a80}
.opt .k{width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--muted) 26%,transparent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 auto}
.opt.correct{border-color:var(--action);background:color-mix(in srgb,var(--action) 16%,var(--bg-surface))}.opt.correct .k{background:var(--action);color:var(--on-action)}
.opt.wrong{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,var(--bg-surface))}.opt.wrong .k{background:var(--danger);color:#2a0708}
.answer-box{font-size:30px;font-weight:700;color:var(--text);background:var(--bg-primary);border:2px solid var(--line);border-radius:12px;padding:14px 18px;min-height:62px;display:flex;align-items:center;justify-content:flex-end}
.answer-box.ok{border-color:var(--action)}.answer-box.no{border-color:var(--danger)}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.keypad button{background:var(--bg-raised);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:16px 0;font-size:18px;cursor:pointer}
.keypad button:hover{border-color:var(--action)}.keypad button.fn{color:var(--accent)}.keypad button.act{background:var(--action);color:var(--on-action);font-weight:700}.keypad button.del{color:var(--danger)}
.fb{border-radius:12px;padding:14px 16px;font-size:14px;display:none}.fb.show{display:block}
.fb.right{background:color-mix(in srgb,var(--action) 16%,var(--bg-surface));border:1px solid var(--action)}.fb.wrongfb{background:color-mix(in srgb,var(--danger) 14%,var(--bg-surface));border:1px solid var(--danger)}
.fb .em{color:var(--accent);font-weight:700}

/* exam-sim */
.exam-bar{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums;font-weight:800;color:var(--text)}
.qgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.qgrid .n{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer}
.qgrid .n.done{background:color-mix(in srgb,var(--action) 16%,var(--bg-surface));border-color:var(--action)}.qgrid .n.flag{background:#3a2a10;border-color:var(--accent)}.qgrid .n.cur{outline:2px solid var(--info)}

/* onboarding + settings */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{background:var(--bg-raised);border:none;color:var(--muted);padding:8px 14px;font-size:13px;cursor:pointer}
.seg button.on{background:var(--action);color:var(--on-action);font-weight:700}
.choice{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-raised);cursor:pointer;margin:8px 0;display:flex;justify-content:space-between;align-items:center}
.choice.on{border-color:var(--action);background:color-mix(in srgb,var(--action) 16%,var(--bg-surface))}
.choice.soon{opacity:.5;cursor:not-allowed}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.lock{color:var(--muted);font-size:12px}
.demo-note{max-width:1120px;margin:14px auto 0;color:var(--muted);font-size:12px}
.stat{display:flex;flex-direction:column;gap:2px}.stat .kpi{font-size:24px}

/* Light & wooden theme *tokens* now live in the shared pipeline (training.json).
   Only theme-specific component styles remain below. */
body[data-moyako-v2][data-theme="light"] .moyako-card{box-shadow:0 1px 3px rgba(16,27,45,.06),0 8px 24px rgba(16,27,45,.05)}
body[data-moyako-v2][data-theme="light"] .header{box-shadow:0 1px 0 var(--line)}

body[data-moyako-v2][data-theme="wooden"] .moyako-card{box-shadow:0 1px 2px rgba(74,48,20,.10),0 8px 22px rgba(74,48,20,.07)}
body[data-moyako-v2][data-theme="wooden"] .header{box-shadow:0 1px 0 var(--line)}

/* Micro-celebrations — CSS-only, cheap, and the single biggest "feels like my apps"
   signal for the 13-18 audience. All gated behind prefers-reduced-motion. */
@keyframes mt-pop{0%{transform:scale(.6)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mt-rise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes mt-flame{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
.opt.correct .k,.answer-box.ok{animation:mt-pop .35s ease-out}
.fb.right.show{animation:mt-rise .3s ease-out}
.mt-complete{animation:mt-rise .4s ease-out}
.header .flame i{display:inline-block}
.header .flame.bump i{animation:mt-flame .7s ease-in-out}
@media (prefers-reduced-motion: reduce){
  .opt.correct .k,.answer-box.ok,.fb.right.show,.mt-complete,.header .flame.bump i{animation:none}
}

/* Exam-season mode — the app changes gear when it matters (<=6 weeks to exams) */
.header .season{color:var(--accent);font-weight:800;border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--bg-raised))}

/* Figures (mt-figures.js) emit a viewBox-only SVG. Without an explicit size, WebKit/iOS
   collapses it to zero height inside a flex container — the exam simulator had no rule
   (only the player did), so "the graph" was missing on iPad (Owner report 2026-09-06).
   One shared rule for every surface that injects q.figure. */
.mt-fig-svg{width:100%;max-width:300px;height:auto;display:block}