/* content/_lib/lesson.css — lesson styling shipped with the content (v3 base + v4 extras + v6). The app scopes it under .dl-reader at port time. */

/* ============ tokens (light) — EduPeak brand ============ */
:root{
  --indigo:#1E3A8A; --navy:#1B2A5E; --gold:#FBBF24; --coral:#C2410C; --sun:#E8613A;
  --ground:#F5F7FC; --page:#FFFFFF; --rule:#DDE2EE; --rule-soft:#ECEFF6;
  --ink:#191D2E; --muted:#5C6480; --faint:#6B7280;
  --ready:#1E7A5F; --pending:#9AA1B6; --hl:#FEF3C7;
  --spine-w:318px; --measure:68ch; --bar-h:52px;
  --ui-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-theme="paper"]{
  --ground:#EFE8DA; --page:#F6F1E5; --rule:#DCD2BE; --rule-soft:#E7DFCD;
  --ink:#2A2419; --muted:#6B6150; --faint:#857A66; --ready:#3F6B4A; --pending:#9C9280; --hl:#F3E3B5;
}
:root[data-theme="dark"]{
  --ground:#0D1020; --page:#131829; --rule:#2A3153; --rule-soft:#1E2440;
  --ink:#E7EAF6; --muted:#A5ADC7; --faint:#8D95B2; --indigo:#9DB4F2; --navy:#C7D2F5;
  --ready:#6FD3AE; --pending:#79819E; --hl:#3A3112; --coral:#FDBA74;
}
:root:lang(hi),:root:lang(mr){--ui-font:"Inter","Noto Sans Devanagari","Nirmala UI",sans-serif}
:root:lang(gu){--ui-font:"Inter","Noto Sans Gujarati","Nirmala UI",sans-serif}
:root:lang(ta){--ui-font:"Inter","Noto Sans Tamil","Nirmala UI",sans-serif}
:root:lang(te){--ui-font:"Inter","Noto Sans Telugu","Nirmala UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--ui-font);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.serif{font-family:"Fraunces",Georgia,"Times New Roman",serif}
a{color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
.proto-strip{background:#191D2E;color:#E7EAF6;font-size:12px;padding:6px 16px;text-align:center}
.proto-strip b{color:var(--gold)}

/* ============ bar ============ */
.bar{position:sticky;top:0;z-index:40;background:var(--page);border-bottom:1px solid var(--rule)}
.bar-in{max-width:1320px;margin:0 auto;padding:8px 18px;display:flex;align-items:center;gap:10px;min-height:var(--bar-h)}
.brand{display:flex;align-items:baseline;gap:6px;text-decoration:none;flex:none}
.brand .m{font-weight:800;color:var(--sun);font-size:13px}
.brand .n{font-weight:600;font-size:17px;color:var(--indigo)}
.locator{flex:1;min-width:0;text-align:center;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pill{flex:none;font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:4px 12px;min-height:34px;background:var(--page);cursor:pointer;text-decoration:none}
.pill:hover{color:var(--indigo);border-color:var(--indigo)}
.pill[aria-pressed="true"],.pill.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
:root[data-theme="dark"] .pill[aria-pressed="true"]{color:#0D1020}
.progress{height:3px;background:var(--rule-soft)}
.progress i{display:block;height:100%;background:var(--gold);width:0;transition:width .3s}
.menu-wrap{position:relative;flex:none}
.menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--page);border:1px solid var(--rule);border-radius:12px;box-shadow:0 14px 40px rgba(16,24,64,.18);padding:6px;min-width:210px;z-index:60}
.menu[hidden]{display:none}
.menu button{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;font-size:14px}
.menu button:hover{background:var(--rule-soft)}
.menu button[aria-checked="true"]{color:var(--indigo);font-weight:700}
.menu small{color:var(--faint);font-size:11px}
.menu .mh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:6px 10px 2px}
.lang-hi{font-family:"Noto Sans Devanagari","Nirmala UI",sans-serif}.lang-mr{font-family:"Noto Sans Devanagari","Nirmala UI",sans-serif}
.lang-gu{font-family:"Noto Sans Gujarati","Nirmala UI",sans-serif}.lang-ta{font-family:"Noto Sans Tamil","Nirmala UI",sans-serif}.lang-te{font-family:"Noto Sans Telugu","Nirmala UI",sans-serif}

/* ============ shell ============ */
.shell{max-width:1320px;margin:0 auto;padding:0 18px 90px;display:grid;grid-template-columns:var(--spine-w) minmax(0,1fr);gap:36px;align-items:start}
.spine{position:sticky;top:calc(var(--bar-h) + 16px);margin-top:20px;max-height:calc(100vh - var(--bar-h) - 34px);display:flex;flex-direction:column;background:var(--page);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.spine-head{padding:12px 12px 10px;border-bottom:1px solid var(--rule-soft);display:flex;flex-direction:column;gap:8px}
.spine-head h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.spine-head h2 .cov{letter-spacing:0;text-transform:none;font-weight:600;color:var(--ready);font-size:11.5px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;border:1px solid var(--rule);border-radius:10px;background:var(--ground)}
.seg button{border:0;background:none;padding:5px 4px;border-radius:7px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--page);color:var(--indigo);box-shadow:0 1px 3px rgba(16,24,64,.12)}
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:10px;padding:0 10px;background:var(--ground)}
.search input{flex:1;min-width:0;border:0;background:none;padding:8px 0;font:inherit;font-size:13px;color:var(--ink);outline:none}
.search .x{border:0;background:none;cursor:pointer;color:var(--faint);font-size:14px;padding:2px}
.tree-tools{display:flex;gap:6px}
.tree-tools button{flex:1;font-size:11.5px;border:1px solid var(--rule);background:var(--page);border-radius:8px;padding:5px 6px;cursor:pointer;color:var(--muted)}
.tree-tools button:hover{color:var(--indigo);border-color:var(--indigo)}
.tree{overflow-y:auto;padding:8px 6px 14px 6px;flex:1;overscroll-behavior:contain}
.tree ul{list-style:none;margin:0;padding:0}
.tree ul ul{margin-left:13px;border-left:1px solid var(--rule-soft);padding-left:3px}
.row{display:flex;align-items:flex-start;gap:2px;border-radius:7px}
.row:hover{background:var(--rule-soft)}
.row.cur{background:color-mix(in srgb,var(--indigo) 12%,transparent)}
.row.cur>.lbl{color:var(--indigo);font-weight:700}
.tw{flex:none;width:24px;height:28px;border:0;background:none;cursor:pointer;color:var(--faint);display:grid;place-items:center;border-radius:6px;font-size:10px}
.tw:hover{color:var(--indigo)}
.tw[aria-expanded="true"] span{transform:rotate(90deg)}
.tw span{display:inline-block;transition:transform .15s}
.tw.leaf{cursor:default;visibility:hidden}
.lbl{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--muted);padding:4px 6px 4px 0;font-size:13.2px;line-height:1.38;cursor:pointer}
.lbl .num{flex:none;font-variant-numeric:tabular-nums;color:var(--faint);font-size:11.5px;min-width:16px}
.lbl .tx{min-width:0}
.lbl .cnt{flex:none;margin-left:auto;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;padding-left:4px}
.lbl .cnt.has{color:var(--ready);font-weight:700}
.lv-1>.row .lbl{font-weight:700;color:var(--ink);font-size:13.5px}
.lv-2>.row .lbl{font-weight:600;color:var(--ink)}
.lv-4>.row .lbl{font-size:12.8px}
.lv-5 .lbl{font-size:12.4px}
.lv-5 .lbl .code{flex:none;font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--faint)}
.lv-5 .lbl .tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pending);opacity:.55;margin-top:6px}
.dot.ready{background:var(--ready);opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--ready) 22%,transparent)}
.gtag{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.04em;border-radius:5px;padding:1px 5px;align-self:center}
.gtag.pcm{background:#E0E7FF;color:#1E3A8A}.gtag.pcb{background:#DCFCE7;color:#166534}.gtag.both{background:#FEF3C7;color:#92400E}
mark{background:var(--hl);color:inherit;border-radius:3px;padding:0 1px}
.tree-empty{color:var(--faint);font-size:13px;padding:12px}
.spine-key{border-top:1px solid var(--rule-soft);padding:8px 12px;font-size:11px;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap}
.spine-key span{display:inline-flex;align-items:center;gap:5px}
.spine-key .dot{margin:0}

/* ============ reading column ============ */
.main{margin-top:20px;min-width:0}
.note-lang{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);background:color-mix(in srgb,var(--gold) 14%,var(--page));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--rule));border-radius:10px;padding:8px 12px;margin:0 0 16px}
.note-lang small{display:block;color:var(--faint);font-size:11.5px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--faint);margin:0 0 18px}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--indigo);text-decoration:underline}
.crumbs .here{color:var(--ink)}
.sheet{background:var(--page);border:1px solid var(--rule);border-radius:14px;padding:26px 28px}
.title{font-size:30px;line-height:1.2;font-weight:600;margin:0 0 8px;letter-spacing:-.015em}
.sub{margin:0 0 20px;color:var(--muted);font-size:14.5px;max-width:64ch}
.eyebrow{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--faint);display:block;margin:0 0 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;background:var(--page);color:var(--ink)}
.card:hover{border-color:var(--indigo);box-shadow:0 6px 18px rgba(30,58,138,.08)}
.card b{font-size:16px}
.card span{font-size:12.5px;color:var(--muted)}
.meter{height:6px;border-radius:999px;background:var(--rule-soft);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ready)}
.feature{display:flex;gap:16px;align-items:center;border:1px solid color-mix(in srgb,var(--gold) 60%,var(--rule));background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 12%,var(--page)),var(--page));border-radius:14px;padding:16px 18px;margin:0 0 20px;text-decoration:none;color:var(--ink)}
.feature .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:var(--gold);font-size:22px}
:root[data-theme="dark"] .feature .ic{background:#1B2A5E}
.feature b{display:block;font-size:15.5px}
.feature span{font-size:13px;color:var(--muted)}
.rows{list-style:none;margin:0;padding:0}
.rows>li>a,.rows>li>.r{display:flex;align-items:center;gap:14px;padding:12px 10px;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:var(--ink);border-radius:6px}
.rows>li>a:hover{background:var(--rule-soft)}
.rows .n{flex:none;width:30px;font-variant-numeric:tabular-nums;color:var(--faint);font-size:13px}
.rows .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rows .t{font-weight:600}
.rows .d{font-size:12.5px;color:var(--muted)}
.chip{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;flex:none}
.chip.ready{color:var(--ready);background:color-mix(in srgb,var(--ready) 12%,transparent);border:1px solid color-mix(in srgb,var(--ready) 28%,transparent)}
.chip.pending{color:var(--muted);background:var(--rule-soft);border:1px solid var(--rule)}
.kc-block{margin:22px 0 0}
.kc-block h3{margin:0 0 6px;font-size:16px}
.label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:12px}
.label::after{content:"";flex:1;height:1px;background:var(--rule)}

/* leaf (CLO) page */
.from-report{display:flex;gap:12px;border-left:3px solid var(--gold);background:var(--page);border-radius:0 10px 10px 0;padding:10px 14px;margin:0 0 22px;font-size:13px;color:var(--muted)}
.from-report b{display:block;color:var(--ink)}
.leaf-head{max-width:var(--measure)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--faint);display:block;margin:0 0 10px}
.statement{font-size:28px;line-height:1.32;font-weight:500;margin:0;letter-spacing:-.012em}
.meta{margin:12px 0 0;font-size:12.5px;color:var(--faint);display:flex;flex-wrap:wrap;gap:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tag{font-size:11.5px;border:1px solid var(--rule);border-radius:999px;padding:2px 10px;color:var(--muted);background:var(--page)}
.tag.bl{border-color:color-mix(in srgb,var(--indigo) 30%,var(--rule));color:var(--indigo)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.jump a{font-size:12px;color:var(--muted);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:4px 12px;display:inline-block;background:var(--page)}
.jump a:hover{color:var(--indigo);border-color:var(--indigo)}
.sec{margin-top:40px;scroll-margin-top:calc(var(--bar-h) + 20px)}
.prose{font-size:17px;line-height:1.75;max-width:var(--measure)}
.prose p{margin:0 0 14px}
.prose h4{font-size:15px;margin:22px 0 6px;color:var(--indigo)}
.lead{font-size:19px;line-height:1.6;max-width:var(--measure);margin:22px 0 0;color:var(--ink)}
.empty{border:1px dashed var(--rule);border-radius:12px;padding:18px 20px;background:var(--page);max-width:var(--measure)}
.empty h3{margin:0 0 6px;font-size:16px}
.empty p{margin:0;color:var(--muted);font-size:14px}
.ind{border:1px solid var(--rule);border-radius:12px;background:var(--page);padding:14px 16px;margin:0 0 10px;max-width:var(--measure)}
.ind-head{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ind-code{flex:none;font-size:13.5px;font-weight:700;color:var(--indigo);background:color-mix(in srgb,var(--indigo) 10%,transparent);border-radius:6px;padding:1px 7px}
.ind-text{font-weight:600;min-width:0;overflow-wrap:anywhere}
.ind-hint{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.65}
.mistakes{list-style:none;margin:0;padding:0;max-width:var(--measure);display:flex;flex-direction:column;gap:12px}
.mistakes li{display:flex;gap:14px;background:var(--page);border:1px solid var(--rule);border-radius:12px;padding:12px 14px}
.mistakes .x{flex:none;font-weight:800;color:var(--sun);font-variant-numeric:tabular-nums}
.mistakes .mh{display:block;margin:0 0 2px;font-weight:700}
.mistakes span.t{font-size:15px;line-height:1.6}
.tbl{overflow-x:auto;max-width:100%;border:1px solid var(--rule);border-radius:12px;background:var(--page)}
.tbl table{border-collapse:collapse;width:100%;font-size:14px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--rule-soft)}
.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:var(--ground)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:700;white-space:nowrap}
.rule-box{border-radius:12px;background:var(--navy);color:#fff;padding:14px 18px;max-width:var(--measure);margin:14px 0 0;font-size:15.5px}
:root[data-theme="dark"] .rule-box{background:#1B2A5E}
.book{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--rule);border-radius:12px;background:var(--page);padding:14px 16px;max-width:var(--measure)}
.book .ic{font-size:22px}
.book b{display:block}
.book span{font-size:13.5px;color:var(--muted)}
.turn{display:flex;gap:16px;margin-top:46px;padding-top:18px;border-top:1px solid var(--rule)}
.turn a,.turn span{flex:1;display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:10px 12px;border-radius:10px;min-width:0}
.turn a:hover{background:var(--page)}
.turn .next{text-align:right}
.turn .dir{font-size:12px;color:var(--faint)}
.turn .nm{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.turn .off{opacity:.35}
.keys{font-size:11.5px;color:var(--faint);text-align:center;margin-top:12px}

/* try one */
.quiz{border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:16px 18px;max-width:var(--measure);margin:0 0 14px}
.quiz .q{font-weight:600;margin:0 0 12px}
.quiz .opts{display:flex;flex-direction:column;gap:8px}
.quiz .opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--rule);background:var(--page);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:14.5px}
.quiz .opt:hover{border-color:var(--indigo)}
.quiz .opt .k{flex:none;font-weight:800;color:var(--indigo)}
.quiz .opt.right{border-color:var(--ready);background:color-mix(in srgb,var(--ready) 10%,var(--page))}
.quiz .opt.wrong{border-color:var(--sun);background:color-mix(in srgb,var(--sun) 10%,var(--page))}
.quiz .why{margin:12px 0 0;font-size:14.5px;color:var(--muted);line-height:1.6}
.order-pool,.order-done{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;min-height:38px}
.order-done{border:1px dashed var(--rule);border-radius:10px;padding:6px}
.ev{border:1px solid var(--rule);background:var(--ground);border-radius:999px;padding:6px 12px;font-size:13.5px;cursor:pointer}
.ev:hover{border-color:var(--indigo)}
.ev.placed{background:color-mix(in srgb,var(--indigo) 10%,var(--page));border-color:color-mix(in srgb,var(--indigo) 40%,var(--rule));cursor:default}
.ev.placed .o{font-weight:800;color:var(--indigo);margin-right:6px}
.qbtns{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--indigo);background:var(--indigo);color:#fff;border-radius:10px;padding:8px 14px;font-weight:700;font-size:13.5px;cursor:pointer}
.btn.ghost{background:var(--page);color:var(--indigo)}
:root[data-theme="dark"] .btn{color:#0D1020}
:root[data-theme="dark"] .btn.ghost{color:var(--indigo)}

/* ============ the animated picture (doors technique) ============ */
.stage-card{border-radius:16px;overflow:hidden;border:1px solid #1d2b5c;background:radial-gradient(120% 90% at 12% 88%,#16295E 0%,#0D1940 45%,#080F28 100%);color:#fff;margin:14px 0 0}
.stage-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:14px 16px 0}
.stage-top .ttl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8FA3CC}
.tgl{display:inline-grid;grid-auto-flow:column;gap:2px;padding:3px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05)}
.tgl button{border:0;background:none;color:#C7D2EA;font-size:12px;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer}
.tgl button[aria-pressed="true"]{background:#FBBF24;color:#2A1E03}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.schip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#C7D2EA;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;cursor:pointer}
.schip:hover{border-color:#FBBF24}
.schip[aria-current="step"]{background:#FBBF24;color:#2A1E03;border-color:#FBBF24}
.svg-wrap{position:relative;padding:4px 6px 0}
.svg-wrap svg{display:block;width:100%;height:auto}
.cap{padding:4px 16px 0;min-height:76px}
.cap .sn{font-family:"Fraunces",Georgia,serif;font-size:19px;font-weight:600;color:#FDE68A}
.cap .sd{font-size:14px;color:#C7D2EA;line-height:1.55;margin:2px 0 0}
.counts{margin:8px 16px 0;display:flex;flex-wrap:wrap;gap:8px}
.counts>span{font-size:13px;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#FDE68A;border-radius:10px;padding:5px 10px}
.counts .katex{color:#fff}
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px 14px}
.ctrl .sl{flex:1;min-width:200px}
.ctrl label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8FA3CC;margin:0 0 6px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;outline:none;cursor:pointer}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #FBBF24;cursor:pointer;box-shadow:0 2px 10px rgba(251,191,36,.6)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #FBBF24;cursor:pointer}
.cbtn{border:1px solid rgba(255,255,255,.18);background:none;color:#C7D2EA;border-radius:12px;padding:10px 14px;font-size:12.5px;font-weight:800;cursor:pointer;min-height:42px}
.cbtn:hover{border-color:#FBBF24;color:#fff}
.cbtn.primary{background:#FBBF24;color:#5A3E05;border-color:#FBBF24}
.stage-foot{font-size:12px;color:#8FA3CC;padding:0 16px 14px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
.stage-foot b{color:#C7D2EA}

/* ============ phone ============ */
.only-sm{display:none}
@media (max-width: 960px){
  .shell{grid-template-columns:minmax(0,1fr);gap:0}
  .spine{position:fixed;top:0;left:0;bottom:0;width:min(88vw,360px);max-height:none;margin:0;border-radius:0;z-index:70;transform:translateX(-102%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .spine.show{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(10,14,30,.4);z-index:65}
  .only-sm{display:inline-flex}
  .hide-sm{display:none !important}
  .sheet{padding:20px 18px}
  .title{font-size:25px}
  .statement{font-size:23px}
  .prose{font-size:16px}
  .lead{font-size:17px}
  .locator{display:none}
}
@media (max-width: 520px){
  .bar-in{padding:8px 12px;gap:6px}
  .brand .n{font-size:15px}
  .pill{padding:4px 9px}
  .shell{padding:0 12px 80px}
  .tbl td:first-child{white-space:normal}
  .turn .nm{white-space:normal}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;scroll-behavior:auto !important}}
@media print{.bar,.spine,.proto-strip,.ctrl,.turn,.keys{display:none !important}.shell{display:block}}


/* ============ v4 additions ============ */
.bar .back{font-size:14px;padding:4px 10px}
.up{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.levels{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 14px;padding:0;list-style:none}
.levels li{display:flex;align-items:center;gap:4px}
.levels a,.levels span.cur,.levels span.off{font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:4px 10px;text-decoration:none;border:1px solid var(--rule);color:var(--muted);background:var(--page)}
.levels a:hover{border-color:var(--indigo);color:var(--indigo)}
.levels span.cur{background:var(--indigo);border-color:var(--indigo);color:#fff}
:root[data-theme="dark"] .levels span.cur{color:#0D1020}
.levels span.off{opacity:.45}
.levels .arr{color:var(--faint);font-size:11px}
.lvl-badge{flex:none;font-size:9px;font-weight:800;letter-spacing:.06em;border-radius:4px;padding:1px 4px;align-self:center;color:#fff;background:var(--faint);margin-right:2px}
.lvl-badge.ch{background:#1E3A8A}.lvl-badge.kc{background:#0F766E}.lvl-badge.lo{background:#C2410C}
:root[data-theme="dark"] .lvl-badge.ch{background:#4C6BD1}
.conf{flex:none;font-size:11px;margin-left:4px;align-self:center}
.conf.c1{color:var(--sun)}.conf.c2{color:#B45309}.conf.c3{color:var(--ready)}
.spine-key .lvl-badge{margin:0}
.lead-in{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 0}
.lead-in .pill{min-height:30px;font-size:12px}
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:18px 0 0;max-width:var(--measure)}
.plan a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:10px;padding:9px 11px;background:var(--page)}
.plan a:hover{border-color:var(--indigo)}
.plan .pn{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700}
.plan .pt{font-size:13.5px;font-weight:600}
.plan .pm{font-size:11.5px;color:var(--muted)}
.plan a.done .pn{color:var(--ready)}
.rd-lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--page)}
.rd-lang button{border:0;background:none;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.rd-lang button[aria-pressed="true"]{background:var(--indigo);color:#fff}
:root[data-theme="dark"] .rd-lang button[aria-pressed="true"]{color:#0D1020}
.you{border-left:3px solid var(--gold);padding:2px 0 2px 14px;margin:0 0 16px;max-width:var(--measure);font-size:15.5px;color:var(--muted)}
.slip{list-style:none;margin:0;padding:0;max-width:var(--measure);display:flex;flex-direction:column;gap:12px}
.slip li{background:var(--page);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.slip .x{font-weight:800;color:var(--sun);font-variant-numeric:tabular-nums;grid-row:1/3}
.slip .when{font-weight:700}
.slip .fix{font-size:15px;line-height:1.6}
.slip .fix b{color:var(--ready)}
.ind .ask{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 4px}
.ind .do{margin:8px 0 0;padding:10px 12px;border-radius:9px;background:var(--ground);font-size:14.5px;line-height:1.65}
.ind .do b{color:var(--indigo)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ptab{border:1px solid var(--rule);background:var(--page);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.ptab[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
:root[data-theme="dark"] .ptab[aria-selected="true"]{color:#0D1020}
.ptab .pc{font-size:11px;opacity:.8}
.pool-note{font-size:13px;color:var(--muted);border:1px dashed var(--rule);border-radius:10px;padding:8px 12px;margin:0 0 12px;max-width:var(--measure)}
.qmeta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.qmeta span{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid var(--rule);color:var(--muted)}
.qmeta .src{border-color:color-mix(in srgb,var(--sun) 50%,var(--rule));color:var(--sun)}
.qmeta .tb{border-color:color-mix(in srgb,var(--indigo) 40%,var(--rule));color:var(--indigo)}
.quiz .ar{margin:0 0 12px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.quiz .ar b{color:var(--indigo)}
.quiz .ml{font-size:14.5px;margin:0 0 12px;border-collapse:collapse}
.quiz .ml td{padding:3px 12px 3px 0;vertical-align:top}
.score{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.recap{border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:16px 18px;max-width:var(--measure)}
.recap ol{margin:0;padding-left:20px;font-size:15.5px;line-height:1.7}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0 0;max-width:var(--measure)}
.flip{position:relative;min-height:112px;border:1px solid var(--rule);border-radius:12px;background:var(--page);padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:inherit;display:flex;flex-direction:column;gap:6px}
.flip:hover{border-color:var(--indigo)}
.flip .fq{font-weight:600;font-size:14.5px}
.flip .fa{font-size:14px;color:var(--ready);display:none}
.flip[aria-pressed="true"] .fq{color:var(--faint);font-size:12.5px}
.flip[aria-pressed="true"] .fa{display:block}
.flip .fh{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:auto}
.rate{border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:16px 18px;max-width:var(--measure)}
.rate p{margin:0 0 10px}
.rate .rb{display:flex;gap:8px;flex-wrap:wrap}
.rate .rb button{flex:1;min-width:150px;border:1px solid var(--rule);background:var(--page);border-radius:10px;padding:10px 12px;cursor:pointer;text-align:left;font-size:14px}
.rate .rb button b{display:block}
.rate .rb button small{color:var(--muted)}
.rate .rb button[aria-pressed="true"]{border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 8%,var(--page))}
.rate .next{margin:12px 0 0;font-size:14px;color:var(--muted)}
.prime{margin:34px 0 0;border-radius:14px;background:var(--navy);color:#fff;padding:18px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
:root[data-theme="dark"] .prime{background:#1B2A5E}
.prime b{display:block;font-size:16px}
.prime ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:#C7D2EA;line-height:1.6}
.prime .cta{flex:none;background:var(--gold);color:#5A3E05;border-radius:10px;padding:10px 16px;font-weight:800;text-decoration:none;font-size:14px}
.prime small{display:block;color:#8FA3CC;font-size:11.5px;margin-top:6px}
.exam-tbl td:nth-child(3){white-space:nowrap}
.tier{font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 8px;border:1px solid var(--rule);white-space:nowrap}
.tier.t-easy{color:var(--ready)}.tier.t-med{color:#B45309}.tier.t-hard{color:var(--sun)}
.cover{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.cover span{font-size:12.5px;border:1px solid var(--rule);border-radius:999px;padding:4px 10px;background:var(--page);color:var(--muted)}
.path{counter-reset:p;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:var(--measure)}
.path li a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;background:var(--page)}
.path li a:hover{border-color:var(--indigo)}
.path .pn{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ground);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--indigo)}
.path .pt{flex:1;min-width:0}
.path .pt small{display:block;color:var(--muted);font-size:12px}
.hint-row{font-size:13px;color:var(--faint);margin:12px 0 0}
@media (max-width:960px){ .bar .up{display:none} .plan{grid-template-columns:repeat(2,1fr)} }


/* ============ v5 additions ============ */
.lh{font-size:18px;color:var(--indigo);margin:30px 0 8px;font-weight:700;line-height:1.35}
.learn5>p{margin:0 0 12px}
.learn5 .tbl{margin:10px 0 16px;overflow-x:auto}
.learn5 .tbl td:first-child{white-space:normal}
.learn5 .rule-box{margin:12px 0 16px}
.tipbox{display:flex;gap:10px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--rule));background:color-mix(in srgb,var(--gold) 9%,var(--page));border-radius:12px;padding:12px 14px;margin:12px 0 16px;max-width:var(--measure);font-size:15px;line-height:1.6}
.tipbox .ic{color:#B7791F;font-weight:800}
.fig5{margin:16px 0 20px;max-width:var(--measure);border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:12px 12px 10px}
.fig5 figcaption{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.55}
.fig5 figcaption b{color:var(--ink)}
.fig-svg{width:100%;height:auto;display:block;margin:0 auto;color:var(--ink);font-family:Inter,system-ui,sans-serif}
.ex5{border:1px solid color-mix(in srgb,var(--indigo) 35%,var(--rule));border-left:4px solid var(--indigo);border-radius:12px;background:var(--page);padding:14px 16px;margin:14px 0 18px;max-width:var(--measure)}
.ex5 .ex-t{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo);font-weight:800;margin:0 0 6px}
.ex5 .ex-q{font-weight:600;margin:0 0 8px}
.ex5 .ex-s{margin:0 0 6px;padding-left:22px;font-size:15px;line-height:1.75}
.ex5 .ex-s li{margin:2px 0;animation:fadein .35s ease}
.ex5 .ex-a{margin:8px 0 0;padding:8px 12px;border-radius:9px;background:color-mix(in srgb,var(--ready) 10%,var(--page));animation:fadein .35s ease}
.ex5 .qbtns,.quiz .qbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@keyframes fadein{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.asked{display:flex;flex-direction:column;gap:2px;margin:14px 0 0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--sun) 8%,var(--page));border:1px solid color-mix(in srgb,var(--sun) 35%,var(--rule));max-width:var(--measure)}
.asked b{color:var(--sun);font-size:15px}.asked span{font-size:13px;color:var(--muted)}
/* widgets */
.wid{border:1px solid var(--rule);border-radius:16px;background:var(--page);padding:14px 14px 12px;max-width:calc(var(--measure) + 120px)}
.wid-intro{margin:0 0 10px;font-size:15px;color:var(--muted)}
.wid-ctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 10px;font-size:13.5px}
.wid-ctl label{display:flex;gap:8px;align-items:center}
.wid-ctl label.grow{flex:1;min-width:220px}
.wid-ctl label.grow input{flex:1}
.wid-ctl select,.wid-ctl input[type=text],.numin{font:inherit;font-size:14px;border:1px solid var(--rule);border-radius:9px;padding:6px 10px;background:var(--page);color:var(--ink)}
.wid-stage{border-radius:12px;background:var(--ground);padding:8px;overflow:hidden}
.wid-stage svg{width:100%;height:auto;display:block;font-family:Inter,system-ui,sans-serif}
.wid-out{min-height:1.4em;margin:10px 0 0;font-size:15px}
.wid-rule{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.seg-mini{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:2px;gap:2px}
.seg-mini button{border:0;background:none;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.seg-mini button[aria-pressed="true"]{background:var(--indigo);color:#fff}
.vread{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.vread span{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:10px;padding:6px 10px;background:var(--page);min-width:120px}
.vread small{font-size:11px;color:var(--faint);letter-spacing:.02em;font-weight:700}
.vread b{font-variant-numeric:tabular-nums;font-size:14.5px}
.vread .hl{border-color:var(--ready);background:color-mix(in srgb,var(--ready) 9%,var(--page))}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chipb{border:1px solid var(--rule);background:var(--page);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;font-variant-numeric:tabular-nums}
.chipb small{opacity:.7;font-weight:600}
.chipb[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
:root[data-theme="dark"] .chipb[aria-pressed="true"],:root[data-theme="dark"] .seg-mini button[aria-pressed="true"]{color:#0D1020}
.sig-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;padding:16px 10px;border-radius:12px;background:var(--ground);min-height:84px}
.sig-d{display:inline-grid;place-items:center;width:44px;height:58px;border-radius:10px;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;animation:pop .4s ease both}
.sig-d.y{background:var(--ready);color:#fff}.sig-d.n{background:var(--page);color:var(--faint);border:1.5px dashed var(--rule)}
.sig-dot{font-size:34px;font-weight:800;line-height:1;padding:0 2px}
.sig-exp{font-size:22px;color:var(--faint);padding:0 4px 8px}
.sig-n{margin-left:auto;font-size:30px;font-weight:800;color:var(--indigo);display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.sig-n small{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.sig-why{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:14px}
.sig-why li{display:flex;gap:8px;align-items:center}
.sig-why i{width:12px;height:12px;border-radius:3px;flex:none}
.sig-why li.y i{background:var(--ready)}.sig-why li.n i{border:1.5px dashed var(--faint)}
/* pool questions */
.pq .q{font-weight:500;line-height:1.65}
.pq .qmeta .src{white-space:normal}
.qmeta .qn{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.qmeta .dl.d-easy{color:var(--ready);border-color:color-mix(in srgb,var(--ready) 45%,var(--rule))}
.qmeta .dl.d-medium{color:#B45309;border-color:color-mix(in srgb,#B45309 45%,var(--rule))}
.qmeta .dl.d-hard{color:var(--sun);border-color:color-mix(in srgb,var(--sun) 45%,var(--rule))}
.qimg{margin:6px 0 12px}.qimg img{max-width:100%;height:auto;max-height:320px;border-radius:8px;background:#fff;border:1px solid var(--rule)}
.mt{margin:0 0 8px}.mt td:first-child{white-space:normal}
.mt-note{font-size:12px;color:var(--faint);margin:0 0 10px}
.numrow{display:flex;gap:8px;align-items:center}
.numin{width:12em}.numin.right{border-color:var(--ready)}.numin.wrong{border-color:var(--sun)}
.quiz .opt.picked{border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 9%,var(--page))}
.quiz .opt:disabled{cursor:default}
.verdict{margin:12px 0 0;font-size:14.5px}
.verdict .ok{color:var(--ready)}.verdict .no{color:var(--sun)}
.sol{margin:12px 0 0;padding:12px 14px;border-radius:10px;background:var(--ground);font-size:14.5px;line-height:1.7}
.sol .label{margin:0 0 6px}
.sol-body{overflow-x:auto}
.filt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.filt .fl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:800;margin:0 2px 0 6px}
.filt .fl:first-child{margin-left:0}
/* chapter page */
.path5{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:var(--measure)}
.path5 a{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;background:var(--page)}
.path5 a:hover{border-color:var(--indigo)}
.path5 .pn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:800}
:root[data-theme="dark"] .path5 .pn{color:#0D1020}
.path5 .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.path5 .pt small{color:var(--muted);font-size:13.5px;line-height:1.5}
.path5 .pmeta{font-size:12px;color:var(--faint);font-weight:600}
.path5 .go{font-size:22px;color:var(--faint)}
.stats5{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;max-width:calc(var(--measure) + 120px)}
.stats5>div{border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:12px 14px}
.stats5 svg{width:100%;height:auto;font-family:Inter,system-ui,sans-serif}
.sheet5 th{white-space:nowrap;text-transform:none;letter-spacing:0;font-size:13px;color:var(--indigo);background:var(--ground);width:1%}
.sheet5 td{font-size:14.5px}
.chkres{border:1px solid var(--rule);border-radius:14px;background:var(--page);padding:16px 18px;margin:12px 0 0;max-width:var(--measure)}
.chkres .big{font-size:22px;font-weight:800;margin:0 0 10px}
.chkres ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.chkres li{display:grid;grid-template-columns:64px 1fr 120px 40px;gap:10px;align-items:center;font-size:14px}
.chkres .code{font-weight:800;color:var(--indigo)}
.chkres .bar{height:10px;border-radius:999px;background:var(--ground);overflow:hidden}
.chkres .bar i{display:block;height:100%;background:var(--ready)}
@media (max-width:760px){ .stats5{grid-template-columns:1fr} .chkres li{grid-template-columns:52px 1fr 70px 34px} .sig-d{width:36px;height:50px;font-size:24px} .wid{padding:12px 10px} }
.tbl,.sol-body,.wid-stage,.fig5{position:relative}

/* ============ v6 ============ */
.know5 th{text-transform:none;letter-spacing:0;font-size:12px}
.know5 td{font-size:14.5px;line-height:1.6;vertical-align:top}
.know5 td:first-child{white-space:normal;font-weight:600;width:38%}
.know5 td.trap{color:var(--muted)}
.know5 td.trap::before{content:"✗ ";color:var(--sun);font-weight:800}
.know5 .kn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--indigo);color:#fff;font-size:11px;font-weight:800;margin-right:8px;vertical-align:middle}
:root[data-theme="dark"] .know5 .kn{color:#0D1020}
.ltoc{border:1px solid var(--rule);border-radius:12px;background:var(--ground);padding:12px 16px;margin:0 0 18px;max-width:var(--measure)}
.ltoc .label{margin:0 0 6px}
.ltoc ol{margin:0;padding-left:20px;columns:2;column-gap:24px;font-size:14px;line-height:1.7}
.ltoc a{color:var(--indigo);text-decoration:none}.ltoc a:hover{text-decoration:underline}
.askbox{display:flex;gap:12px;align-items:flex-start;margin:18px 0 10px;max-width:var(--measure);font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.5}
.askbox .ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#5A3E05;display:grid;place-items:center;font-weight:900;font-size:17px}
.wid-wrap{margin:14px 0 20px}
.vsteps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.schip{border:1px solid var(--rule);background:var(--page);border-radius:999px;padding:6px 12px 6px 6px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.schip .sn{width:20px;height:20px;border-radius:50%;background:var(--ground);display:grid;place-items:center;font-size:11px;color:var(--indigo)}
.schip[aria-selected="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
.schip[aria-selected="true"] .sn{background:#fff;color:var(--indigo)}
.schip.free{padding-left:12px}
.vcap{min-height:3em;margin:0 0 10px;font-size:15.5px;line-height:1.6;border-left:3px solid var(--sun);padding:4px 0 4px 12px}
.evid{margin:14px 0 0;max-width:var(--measure)}
.evid.none .evid-none{font-size:13.5px;color:var(--muted);border:1px dashed var(--rule);border-radius:10px;padding:10px 12px;margin:0}
.evid .label{margin-bottom:6px}
.perpaper{font-size:15px;margin:10px 0 0;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--ready) 9%,var(--page));border:1px solid color-mix(in srgb,var(--ready) 35%,var(--rule));max-width:var(--measure)}
.ownline{font-size:13.5px;color:var(--muted);margin:12px 0 0;max-width:var(--measure)}
.stats5.one{grid-template-columns:1fr;max-width:var(--measure)}
.bookline{font-size:13.5px;color:var(--muted);margin:16px 0 0}
@media (max-width:760px){ .ltoc ol{columns:1} .know5 td:first-child{width:auto} }
.evid-mini{font-size:12.5px;color:var(--faint);margin:6px 0 0;max-width:var(--measure)}

/* step rows under the open outcome in the tree */
.steps{list-style:none;margin:0 0 4px 30px;padding:0 0 0 8px;border-left:1px solid var(--rule)}
.lv-6 .lbl.step{font-size:12px;padding:3px 6px 3px 4px;gap:7px;align-items:center;border-radius:6px}
.lv-6 .lbl.step .sn{flex:none;width:16px;height:16px;border-radius:50%;background:var(--ground);color:var(--faint);font-size:9.5px;font-weight:800;display:grid;place-items:center}
.lv-6 .lbl.step.done .sn{background:color-mix(in srgb,var(--ready) 18%,var(--page));color:var(--ready)}
.lv-6 .lbl.step .sm{margin-left:auto;font-size:10px;color:var(--faint);flex:none}
.lv-6 .lbl.step.here{background:color-mix(in srgb,var(--indigo) 10%,transparent);color:var(--indigo);font-weight:700}
.lv-6 .lbl.step:hover{background:var(--rule-soft)}

/* R3.13: hidden must win over display:flex controls */
.wid-ctl[hidden],.qbtns[hidden],[data-ppane][hidden]{display:none}

/* R3.13: long rules must wrap; containers never widen the page */
.know5 td:first-child{white-space:normal}
article,.sec,.prose,.learn5{min-width:0;max-width:100%}
.tbl table{min-width:0}

/* R3.13: a long formula scrolls inside its own box instead of widening the page */
.dl-lesson .katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%;padding:2px 0}
.dl-lesson .prose p,.dl-lesson .rule-box,.dl-lesson .askbox>div,.dl-lesson .tipbox>div,.dl-lesson td,.dl-lesson .ex-q,.dl-lesson .ex-a,.dl-lesson .ex-s li,.dl-lesson .why,.dl-lesson .fa,.dl-lesson .fq,.dl-lesson .fix,.dl-lesson .do,.dl-lesson .ask{overflow-x:auto;overflow-y:hidden}

/* R3.13: on a phone a figure keeps a legible size and pans sideways instead of shrinking its labels */
@media (max-width:640px){.dl-lesson .fig5{overflow-x:auto;overflow-y:hidden}.dl-lesson .fig5 .fig-svg{min-width:560px}}

@media (max-width:640px){.dl-lesson .wid-gms .wid-stage{overflow-x:auto;overflow-y:hidden}.dl-lesson .wid-gms .wid-stage .fig-svg{min-width:560px}}


/* v9: phone — the "What you must know" table becomes one card per rule */
@media (max-width:600px){
  .know5 table,.know5 thead,.know5 tbody,.know5 tr,.know5 th,.know5 td{display:block}
  .know5 thead{display:none}
  .know5 tr{border:1px solid var(--rule,#dde3ee);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:var(--card,#fff)}
  .know5 td{border:0;padding:4px 0}
  .know5 td[data-h]::before{content:attr(data-h);display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:4px 0 2px}
}
.ind .ask{text-transform:none;letter-spacing:0}
/* Maths keeps its own letter case inside upper-cased labels and table headers (γ must not become Γ, k must not become K). */
.katex, .katex *{text-transform:none !important; letter-spacing:normal}
/* Phones: wide figures keep a readable text size and scroll sideways (above). Tell the student so. */
@media (max-width:640px){.dl-lesson .fig5::before{content:"↔ Swipe the figure sideways to see all of it";display:block;font-size:11.5px;color:var(--muted);margin:0 0 6px}}
/* A wide equation or table that scrolls sideways shows a soft shadow at the edge that hides more (CSS-only "scroll shadows"). */
.dl-lesson .katex-display,.dl-lesson .tbl{background:linear-gradient(to right,var(--bx,var(--page)) 30%,transparent),linear-gradient(to left,var(--bx,var(--page)) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.18),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.18),transparent) 100% 0;background-repeat:no-repeat;background-size:36px 100%,36px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
/* Scroll shadows use the page colour; inside dark rule boxes use the box colour instead. */
.dl-lesson .rule-box .katex-display{background:linear-gradient(to right,var(--navy) 30%,transparent),linear-gradient(to left,var(--navy) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(255,255,255,.25),transparent),radial-gradient(farthest-side at 100% 50%,rgba(255,255,255,.25),transparent) 100% 0;background-repeat:no-repeat;background-size:36px 100%,36px 100%,12px 100%,12px 100%;background-attachment:local,local,scroll,scroll}
/* scroll-shadow cover colour = the tinted box's own background (--bx), so display maths in a tinted box shows no white end blocks */
.tipbox{--bx:color-mix(in srgb,var(--gold) 9%,var(--page))}
.ex5 .ex-a{--bx:color-mix(in srgb,var(--ready) 10%,var(--page))}
.ind .do,.sol,.ltoc{--bx:var(--ground)}
.asked{--bx:color-mix(in srgb,var(--sun) 8%,var(--page))}
.perpaper{--bx:color-mix(in srgb,var(--ready) 9%,var(--page))}
.quiz .opt.right{--bx:color-mix(in srgb,var(--ready) 10%,var(--page))}
.quiz .opt.wrong{--bx:color-mix(in srgb,var(--sun) 10%,var(--page))}
.quiz .opt.picked{--bx:color-mix(in srgb,var(--indigo) 9%,var(--page))}
.nw{white-space:nowrap}
/* Phones: only the drawing scrolls sideways; the caption (and the swipe hint) stay at screen width. */
@media (max-width:640px){.dl-lesson .fig5 figcaption,.dl-lesson .fig5::before{position:sticky;left:0;max-width:calc(100vw - 64px)}}
/* a figure drawn to fit a phone (TK.fitSVG → .fig-fit) needs no swipe hint */
@media (max-width:640px){.dl-lesson .fig5:has(.fig-fit)::before{content:none;display:none}}

/* Chemistry (22 Oct): formulas inside uppercase labels keep their case (PCl5 never becomes PCL5) */
.ex5 .ex-t .katex,.tbl th .katex,.label .katex,.chip .katex,.ind .ask .katex,.qmeta span .katex{text-transform:none;letter-spacing:normal}
/* Chemistry (22 Oct): in figures and animations, Inter's tailed l and serifed I, so Al, Cl and I (iodine) never look alike */
.fig5 svg,.wid-wrap{font-feature-settings:"cv05" 1,"cv08" 1}
/* Chemistry (22 Oct): Greek nu in figures/widgets is drawn as <tspan class="nu">ν</tspan>, so frequency never reads as v */
.fig-svg .nu,.wid-stage .nu,.fig5 svg .nu{font-family:"Times New Roman","Noto Serif",Georgia,serif;font-style:italic}