/* =====================================================================
   HEG · Applied Statistics — shared stylesheet for the week pages
   (week1.html … week16.html). Ported from ideas-e1410/session.css, which
   is the reference implementation of this page archetype: top banner +
   two progress bars, hero, section cards, labs, classify rows, quiz,
   glossary, workbook, full-screen LECTURE mode and the print rules that
   turn the deck into the slides PDF. Same class names on purpose, so the
   lesson engine ports between the two courses unchanged.
   Colours are HEG's (see /shared/themes/heg.css): blue #002C46 carries
   headings and the dark slides, red #CC0000 the accents. Overrides that
   differ from E1410 sit at the END of the file, under "HEG overrides".
   .stages defaults to 4 columns — add .n3 / .n5 / .n6 for other counts.
   ===================================================================== */
:root{
  --accent:#CC0000;--accent-deep:#A30000;--accent-bright:#FF3127;--accent-pale:#FFF0EF;
  --navy:#002C46;--navy-deep:#001A2B;
  --ink:#24272A;--ink-soft:#3C4650;--grey:#5F6B76;--white:#FFFFFF;
  --paper:#F6F7F7;--line:#DADFE2;--card:#FFFFFF;
  --ok:#2F855A;--no:#B45309;
  --shadow:0 18px 50px -24px rgba(0,44,70,0.28);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);min-height:100vh;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:80px;}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.3px;}
.topbar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:8px 14px;}
.topbar-inner{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:10px;}
.topbar img.brand{height:26px;width:auto;flex:none;}
.topbar .course{font-size:10px;letter-spacing:1.5px;color:var(--accent);font-weight:800;white-space:nowrap;}
.topbar .who{display:none;align-items:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--accent-deep);background:var(--accent-pale);border:1px solid rgba(204,0,0,0.2);border-radius:20px;padding:3px 9px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;}
.topbar .who.on{display:inline-flex;}
@media(max-width:640px){.topbar .course{display:none;}.topbar .who{max-width:108px;}}
.tb-spacer{flex:1;}
.topbar a.home{font-size:12px;font-weight:700;color:var(--accent-deep);text-decoration:none;white-space:nowrap;margin-right:12px;flex:none;}
.topbar-bars{max-width:880px;margin:7px auto 1px;display:flex;gap:18px;align-items:center;}
@media(max-width:640px){.topbar-bars{flex-direction:column;gap:5px;align-items:stretch;}}
.tbar{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.tbl{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--grey);font-weight:800;white-space:nowrap;flex:none;width:80px;text-align:right;}
.tk{flex:1;height:7px;background:var(--line);border-radius:4px;overflow:hidden;min-width:30px;}
.tf{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-bright));width:0;transition:width .5s ease;border-radius:4px;}
.tp{font-size:10.5px;color:var(--accent-deep);font-weight:800;min-width:32px;text-align:right;flex:none;}
.cbar{flex:1;display:flex;gap:2px;height:9px;min-width:40px;}
.cbar .cseg{flex:1;background:#E5E9EF;border-radius:2px;overflow:hidden;position:relative;min-width:2px;}
.cbar .cseg .cf{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);}
.cbar .cseg.locked{opacity:.5;background:repeating-linear-gradient(45deg,#E5E9EF,#E5E9EF 3px,#D3D8DC 3px,#D3D8DC 6px);}
.lect-btn{background:var(--accent);color:#fff;border:none;border-radius:20px;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.5px;padding:6px 13px;cursor:pointer;flex:none;}
.lect-btn:hover{background:var(--accent-deep);}
.wrap{max-width:840px;margin:0 auto;padding:26px 20px;}
.eyebrow{font-size:11px;letter-spacing:4px;color:var(--accent);font-weight:800;text-align:center;text-transform:uppercase;}
.hero h1{font-size:clamp(28px,5vw,42px);text-align:center;line-height:1.1;margin:14px 0 12px;color:var(--ink);}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .sub{color:var(--ink-soft);font-size:16px;max-width:66ch;margin:0 auto;text-align:center;}
.hero .sub b{color:var(--ink);}
.liveinfo{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px;}
.liveinfo .li{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--ink-soft);font-weight:600;}
.liveinfo .li b{color:var(--accent-deep);}
.objectives{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:26px auto 0;max-width:680px;box-shadow:var(--shadow);}
.objectives h4{font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:14px;font-weight:800;}
.objectives ul{list-style:none;}
.objectives li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-soft);font-size:14.5px;}
.objectives li:last-child{margin-bottom:0;}
.objectives li::before{content:"▸";position:absolute;left:2px;color:var(--accent);font-weight:800;}
.materials{background:var(--accent-pale);border:1px solid rgba(204,0,0,0.2);border-radius:18px;padding:20px 24px;margin:16px auto 0;max-width:680px;}
.materials h4{font-size:11px;letter-spacing:2px;color:var(--accent-deep);text-transform:uppercase;margin-bottom:12px;font-weight:800;}
.materials .mi{display:flex;align-items:flex-start;gap:11px;padding:7px 0;cursor:pointer;font-size:14px;color:var(--ink-soft);}
.materials .mi .box{flex:none;width:20px;height:20px;border:2px solid var(--accent);border-radius:6px;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;background:transparent;transition:.15s;}
.materials .mi.on .box{background:var(--accent);}
.materials .mi a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(204,0,0,0.5);text-underline-offset:3px;}
.materials .mi a:hover{color:var(--accent-deep);}
.section-list{display:flex;flex-direction:column;gap:10px;margin-top:26px;}
.section-card{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid var(--line);border-radius:15px;padding:15px 18px;cursor:pointer;transition:.2s;}
.section-card:hover{border-color:var(--accent);transform:translateX(4px);box-shadow:var(--shadow);}
.section-card.done{border-left:4px solid var(--accent);}
.section-card .num{font-size:19px;font-weight:800;color:var(--accent);min-width:52px;text-align:center;}
.section-card .info{flex:1;}
.section-card .info .name{font-size:15.5px;font-weight:800;color:var(--ink);}
.section-card .info .tag{font-size:12.5px;color:var(--grey);margin-top:2px;}
.section-card .badge{font-size:9px;letter-spacing:1px;font-weight:800;text-transform:uppercase;padding:2px 9px;border-radius:20px;border:1px solid var(--line);color:var(--grey);margin-top:6px;display:inline-block;}
.section-card .status{font-size:18px;color:var(--accent);}
.screen{display:none;}
.screen.active{display:block;animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.crumb{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--accent-deep);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:4px 0;margin-bottom:6px;}
.crumb:hover{color:var(--accent);}
.sec-head{margin:6px 0 18px;}
.sec-head .kicker{font-size:11px;letter-spacing:3px;color:var(--accent);font-weight:800;text-transform:uppercase;}
.sec-head h2{font-size:clamp(23px,4vw,30px);margin:6px 0;line-height:1.15;color:var(--ink);}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 24px;margin-bottom:18px;box-shadow:var(--shadow);}
.label{display:inline-block;font-size:10px;letter-spacing:2px;font-weight:800;padding:4px 12px;border-radius:20px;margin-bottom:13px;text-transform:uppercase;}
.label.problem{background:var(--accent-pale);color:var(--accent);border:1px solid rgba(204,0,0,0.3);}
.label.idea{background:rgba(204,0,0,0.06);color:var(--accent-deep);border:1px solid rgba(204,0,0,0.25);}
.label.play{background:rgba(255,49,39,0.08);color:var(--accent);border:1px solid rgba(255,49,39,0.35);}
.label.trap{background:#FEF3C7;color:#92400E;border:1px solid rgba(180,83,9,0.3);}
.label.why{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);}
.label.case{background:var(--ink);color:#fff;border:1px solid var(--ink);}
/* a worked example inside a case card: what the reported capability looks like
   on an ordinary Tuesday. Deliberately styled apart from the reported facts
   above it, because it is an illustration and not something the source says. */
.eg{background:var(--paper,#F6F7F7);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:14px 16px;margin:14px 0 4px;}
.eg .eh{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;
  color:var(--accent);margin-bottom:7px;}
.eg p{font-size:13.5px;margin-bottom:8px;}
.eg p:last-child{margin-bottom:0;}
.eg .then{color:var(--grey);}
.eg .now{color:var(--ink);}
.eg b{color:var(--accent-deep);}
.label.read{background:rgba(204,0,0,0.06);color:var(--accent-deep);border:1px solid rgba(204,0,0,0.25);}
.card h3{font-size:19px;margin-bottom:12px;line-height:1.28;color:var(--ink);}
.card p{color:var(--ink-soft);margin-bottom:12px;font-size:15px;}
.card p:last-child{margin-bottom:0;}
.card p.lead{font-size:16.5px;color:var(--ink);}
.card strong{color:var(--ink);font-weight:700;}
.card em{color:var(--accent-deep);font-style:italic;}
.card ul,.card ol{margin:0 0 12px 20px;color:var(--ink-soft);font-size:15px;}
.card li{margin-bottom:7px;}
.punch{font-size:17px;font-weight:700;color:var(--accent-deep);border-left:3px solid var(--accent);padding-left:16px;margin:16px 0 4px;line-height:1.45;}
.rlist{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.rd{display:block;text-decoration:none;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:12px 15px;transition:.18s;}
a.rd:hover{border-color:var(--accent);transform:translateX(3px);box-shadow:var(--shadow);}
.rd .ty{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:var(--accent);}
.rd .rt{display:block;font-size:15px;color:var(--ink);font-weight:700;margin:2px 0;}
.rd .rt .ext{font-size:11px;color:var(--accent);font-weight:800;}
.rd .rw{display:block;font-size:12.5px;color:var(--ink-soft);}
.lab{background:var(--accent-pale);border:1px solid rgba(204,0,0,0.2);border-radius:16px;padding:18px;margin:16px 0;}
.lab-title{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:800;margin-bottom:14px;text-transform:uppercase;}
.lab-title::before{content:"▸ ";color:var(--accent);}
.caption{text-align:center;font-size:13px;color:var(--grey);margin-top:12px;font-style:italic;min-height:18px;}
.btn{background:var(--accent);color:#fff;border:none;padding:12px 24px;font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.4px;cursor:pointer;border-radius:30px;transition:.2s;box-shadow:0 10px 24px -12px rgba(204,0,0,.6);}
.btn:hover{background:var(--accent-deep);transform:translateY(-1px);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.ghost{background:transparent;color:var(--accent-deep);border:1.5px solid var(--accent);box-shadow:none;}
.btn.ghost:hover{background:rgba(204,0,0,0.06);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px;}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:3px;background:var(--line);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:2.5px solid #fff;box-shadow:0 2px 8px rgba(204,0,0,.4);}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:2.5px solid #fff;}
.bignum{font-size:46px;font-weight:800;color:var(--accent-deep);text-align:center;line-height:1;}
.bignum .suf{font-size:22px;color:var(--grey);}
.reveal{display:none;margin-top:12px;background:var(--white);border:1px solid rgba(204,0,0,0.25);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--ink-soft);line-height:1.55;}
.reveal.show{display:block;animation:fade .3s ease;}
.reveal b{color:var(--ink);}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0;}
@media(max-width:640px){.stages{grid-template-columns:1fr 1fr;}}
.tside{text-align:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 8px;}
.tside .th{font-size:13.5px;font-weight:800;color:var(--accent-deep);}
.tside .td{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.3;}
.cl-row{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;}
.cl-row .st{font-size:14.5px;color:var(--ink);margin-bottom:9px;}
.cl-row .st b{color:var(--accent-deep);}
.cl-btns{display:flex;gap:8px;flex-wrap:wrap;}
.cl-btns button{background:var(--paper);border:1.5px solid var(--line);color:var(--ink-soft);font-family:inherit;font-size:12px;font-weight:800;padding:7px 14px;border-radius:20px;cursor:pointer;transition:.15s;}
.cl-btns button:hover{border-color:var(--accent);}
.cl-btns button.ok{background:var(--accent);border-color:var(--accent);color:#fff;}
.cl-btns button.no{background:#FEF3C7;border-color:var(--no);color:var(--no);}
.cl-btns button:disabled{cursor:default;}
.cl-why{display:none;font-size:13px;color:var(--ink-soft);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);}
.cl-why.show{display:block;}
.cl-why b{color:var(--accent-deep);}
.q{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;}
.q .qt{font-size:15px;color:var(--ink);font-weight:700;margin-bottom:11px;}
.q .qt .qn{color:var(--accent);font-weight:800;margin-right:6px;}
.opt{display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:8px;font-family:inherit;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:.15s;}
.opt:hover{border-color:var(--accent);}
.opt.correct{background:rgba(204,0,0,0.10);border-color:var(--ok);color:var(--accent-deep);font-weight:700;}
.opt.wrong{background:#FEF3C7;border-color:var(--no);color:var(--no);}
.opt:disabled{cursor:default;opacity:.9;}
.q .why{display:none;font-size:13px;color:var(--ink-soft);margin-top:6px;padding-top:9px;border-top:1px dashed var(--line);}
.q .why.show{display:block;}
.scorechip{position:sticky;top:50px;z-index:40;display:inline-block;background:var(--accent-deep);color:#fff;font-size:12.5px;font-weight:800;border-radius:20px;padding:6px 16px;margin-bottom:14px;}
.result{display:none;text-align:center;background:var(--accent-deep);color:#fff;border-radius:18px;padding:26px 22px;margin:18px 0;}
.result.show{display:block;animation:fade .4s ease;}
.result .big{font-size:42px;font-weight:800;color:#fff;line-height:1.1;}
.result p{color:rgba(255,255,255,0.88);font-size:14px;margin-top:8px;}
.gloss{border-bottom:1.5px dotted var(--accent);cursor:help;color:var(--accent-deep);font-weight:600;}
#glossTip{position:fixed;z-index:200;max-width:280px;background:var(--white);border:1.5px solid var(--accent);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px;color:var(--ink-soft);display:none;line-height:1.45;}
#glossTip b{display:block;color:var(--accent-deep);font-size:14px;margin-bottom:4px;}
#glossTip .x{float:right;color:var(--grey);cursor:pointer;margin:-4px -4px 0 8px;font-size:17px;line-height:1;}
.guess-recall{background:rgba(204,0,0,0.06);border:1.5px dashed var(--accent);border-radius:12px;padding:12px 16px;margin:14px 0;color:var(--accent-deep);font-size:14px;font-weight:600;}
.nav-foot{display:flex;justify-content:space-between;gap:10px;margin-top:24px;}
.complete-bar{text-align:center;margin:20px 0 4px;}
.foot{text-align:center;color:var(--grey);font-size:12px;margin-top:44px;}
.backlink{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--accent-deep);text-decoration:none;border:1.5px solid var(--accent);border-radius:30px;padding:7px 16px;font-weight:700;}
.backlink:hover{background:var(--accent-pale);}
.wb{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:15px 17px;margin-bottom:12px;}
.wb .wq{font-size:14.5px;color:var(--ink);font-weight:600;margin-bottom:9px;line-height:1.4;}
.wb .wq .qn{color:var(--accent);font-weight:800;margin-right:6px;}
.wb input,.wb textarea{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:14px 'Helvetica Neue',Arial,sans-serif;padding:9px 11px;}
.wb input:focus,.wb textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(204,0,0,0.12);}
.wb textarea{min-height:68px;resize:vertical;line-height:1.5;}
.wb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.wb-grid label{display:block;font-size:11px;color:var(--grey);margin-bottom:3px;}
@media(max-width:560px){.wb-grid{grid-template-columns:1fr;}}
.wb-save{font-size:12.5px;color:var(--accent-deep);font-weight:600;margin-top:8px;min-height:16px;text-align:right;}
#lect{position:fixed;inset:0;z-index:400;background:#fff;display:none;flex-direction:column;user-select:none;}
#lect.on{display:flex;}
.lect-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:5vh 7vw;position:relative;overflow:hidden;}
.lect-slide{max-width:1150px;width:100%;animation:fade .25s ease;}
.lect-kicker{font-size:clamp(12px,1.3vw,16px);letter-spacing:4px;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:1.6vh;}
.lect-slide h2{font-size:clamp(30px,4.6vw,58px);line-height:1.08;color:var(--ink);margin-bottom:2.8vh;letter-spacing:-1px;}
.lect-body{font-size:clamp(17px,1.9vw,26px);color:var(--ink-soft);line-height:1.5;max-width:60ch;}
.lect-body ul{list-style:none;margin-top:.6vh;}
.lect-body li{position:relative;padding-left:1.3em;margin-bottom:1.4vh;}
.lect-body li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-weight:800;}
.lect-body b,.lect-body strong{color:var(--ink);}
.lect-body em{color:var(--accent-deep);font-style:normal;font-weight:700;}
.lect-body .cols{display:grid;grid-template-columns:1fr 1fr;gap:2.4vw;max-width:none;}
.lect-body .colh{font-size:.85em;font-weight:800;color:var(--accent-deep);letter-spacing:1px;text-transform:uppercase;margin-bottom:.8vh;}
.lect-body .statline{font-size:clamp(50px,8vw,120px);font-weight:800;color:var(--accent);line-height:1;margin:1.5vh 0;}
.lect-body .statsub{font-size:.8em;color:var(--grey);}
.lect-slide.dk .lect-kicker{color:rgba(255,255,255,.85);}
.lect-slide.dk h2{color:#fff;}
.lect-slide.dk .lect-body{color:rgba(255,255,255,.88);}
.lect-slide.dk .lect-body b,.lect-slide.dk .lect-body strong{color:#fff;}
.lect-slide.dk .lect-body em{color:#FFB3AD;}
.lect-slide.dk .lect-body li::before{color:#FFB3AD;}
/* "On our project →" thread — the MekongPay running example */
.lect-body .onproj{margin-top:2.4vh;background:var(--accent-pale);border-left:4px solid var(--accent);border-radius:10px;padding:1.3vh 1.6vw;font-size:.78em;color:var(--ink-soft);line-height:1.42;}
.lect-body .onproj b{color:var(--accent-deep);}
.lect-slide.dk .lect-body .onproj{background:rgba(255,255,255,.13);border-left-color:#FFB3AD;color:rgba(255,255,255,.92);}
.lect-slide.dk .lect-body .onproj b{color:#FFB3AD;}
.lect-body .num-hi{color:var(--accent);font-weight:800;}
#lect.dkbg .lect-stage{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);}
.lect-badge{display:inline-block;font-size:clamp(11px,1.1vw,14px);letter-spacing:2px;text-transform:uppercase;font-weight:800;border-radius:20px;padding:.5em 1.2em;margin-bottom:2vh;}
.lect-badge.disc{background:var(--accent-pale);color:var(--accent);}
.lect-badge.case{background:var(--ink);color:#fff;}
.lect-badge.act{background:var(--accent);color:#fff;}
.lect-logo-big{height:clamp(60px,9vw,110px);width:auto;margin-bottom:3vh;background:#fff;border-radius:14px;padding:10px 16px;}
.lect-foot{flex:none;display:flex;align-items:center;gap:12px;padding:10px 20px;border-top:1px solid var(--line);background:#fff;z-index:5;}
.lect-foot img{height:20px;width:auto;}
.lect-foot .lf-t{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lect-foot .lf-n{font-size:12px;color:var(--ink-soft);font-weight:800;min-width:64px;text-align:right;}
.lect-foot button{background:none;border:1px solid var(--line);color:var(--grey);border-radius:20px;font-family:inherit;font-size:11px;font-weight:700;padding:4px 12px;cursor:pointer;}
.lect-foot button:hover{border-color:var(--accent);color:var(--accent-deep);}
.lect-zone{position:absolute;top:0;bottom:0;width:28%;cursor:pointer;z-index:4;}
.lect-zone.prev{left:0;}
.lect-zone.next{right:0;width:44%;}
#lectNotes{display:none;flex:none;background:var(--ink);color:#DADFE2;font-size:13.5px;line-height:1.55;padding:12px 20px;max-height:26vh;overflow-y:auto;}
#lectNotes.on{display:block;}
#lectNotes b{color:#fff;}
#lectNotes .nt{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-bright);font-weight:800;display:block;margin-bottom:4px;}
#printDeck{display:none;}
@media print{
  @page{size:A4 landscape;margin:0;}
  body{background:#fff;padding:0;}
  .topbar,.wrap,#lect,#ann-bar{display:none!important;}
  #printDeck{display:block;}
  .p-slide{page-break-after:always;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:6vh 8vw;position:relative;}
  .p-slide.dk{background:linear-gradient(135deg,#002C46 0%,#001A2B 100%);-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .p-slide .lect-kicker{margin-bottom:12px;}
  .p-slide h2{font-size:34px;line-height:1.1;margin-bottom:18px;letter-spacing:-.5px;}
  .p-slide .lect-body{font-size:16px;}
  .p-slide .lect-body .statline{font-size:64px;}
  .p-slide.wide .lect-body{max-width:none;}
  .p-slide .lect-body .figure img{border:none;background:none;padding:0;max-height:52vh;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .p-slide .lect-body .figure figcaption{font-size:11px;text-align:center;margin-top:8px;}
  .p-slide .lect-body .onproj{margin-top:12px;background:#FFF0EF;border-left:4px solid #CC0000;border-radius:8px;padding:8px 12px;font-size:12.5px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .p-slide.dk .lect-body .onproj{background:rgba(255,255,255,.16);border-left-color:#FFB3AD;color:#fff;}
  .p-slide.dk h2{color:#fff;}
  .p-slide.dk .lect-kicker{color:rgba(255,255,255,.85);}
  .p-slide.dk .lect-body{color:rgba(255,255,255,.88);}
  .p-slide .pnum{position:absolute;right:24px;bottom:16px;font-size:11px;color:#8A949C;}
}

/* --- viz: interactive charts -------------------------------------------
   Self-contained inline SVG + vanilla JS (no chart library — this repo has
   no build step and pages must work offline). Series colours are validated
   for colour-vision deficiency: #CC0000 vs #002C46 is ΔE 24.1 under protan,
   30.0 normal. Identity is never colour-alone — every series carries a
   legend key AND a direct end-label, and every value is reachable in the
   table view under the chart. */
.viz{margin-top:14px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px 12px;}
.viz .vz-h{font-size:14.5px;font-weight:800;color:var(--ink);margin-bottom:2px;}
.viz .vz-s{font-size:12.5px;color:var(--grey);margin-bottom:10px;line-height:1.5;}
.viz .vz-ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px 14px;margin-bottom:12px;}
.viz .vz-ctl label{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--grey);
  text-transform:uppercase;margin-bottom:3px;min-height:2.5em;}   /* keeps sliders on one baseline when a label wraps */
.viz .vz-ctl .vv{font-variant-numeric:tabular-nums;color:var(--accent-deep);}
.viz .vz-ctl input[type=range]{width:100%;accent-color:var(--accent);margin:0;}
.viz .vz-ctl select{width:100%;font:13px inherit;padding:4px 6px;border:1px solid var(--line);
  border-radius:7px;background:var(--white);color:var(--ink);}
.viz svg{display:block;width:100%;height:auto;overflow:visible;}
.viz .vz-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:6px;}
.viz .vz-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);}
.viz .vz-legend i{display:inline-block;width:16px;height:2px;border-radius:2px;}
.viz .vz-read{margin-top:10px;background:var(--paper);border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0;padding:9px 13px;font-size:13.5px;color:var(--ink-soft);line-height:1.55;}
.viz .vz-read b{color:var(--accent-deep);}
.viz .vz-read .hero{display:block;font-size:26px;font-weight:800;color:var(--accent);line-height:1.15;
  font-variant-numeric:tabular-nums;margin-bottom:2px;}
.viz details{margin-top:10px;}
.viz summary{font-size:12px;color:var(--grey);cursor:pointer;}
.viz table{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px;}
.viz th,.viz td{text-align:right;padding:4px 7px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
.viz th:first-child,.viz td:first-child{text-align:left;}
.viz th{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--grey);}
.vz-tip{position:fixed;z-index:120;pointer-events:none;background:var(--ink);color:#fff;border-radius:8px;
  padding:8px 11px;font-size:12.5px;line-height:1.45;box-shadow:0 10px 28px -12px rgba(0,0,0,.5);display:none;}
.vz-tip .tt{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#ff9a90;font-weight:800;margin-bottom:4px;}
.vz-tip .tr{display:flex;align-items:center;gap:7px;white-space:nowrap;}
.vz-tip .tr i{display:inline-block;width:12px;height:2px;border-radius:2px;flex:none;}
.vz-tip .tr b{font-variant-numeric:tabular-nums;}
.vz-tip .tr span{color:#b9c0cc;}
/* on a lecture slide the chart is presented, not poked at */
.lect-body .viz{background:none;border:none;padding:0;margin-top:1.2vh;}
.lect-body .viz .vz-h,.lect-body .viz .vz-s,.lect-body .viz details{display:none;}
.lect-body .viz .vz-read{font-size:.62em;margin-top:1vh;}
.lect-body .viz .vz-read .hero{font-size:1.5em;}
.lect-body .viz .vz-legend span{font-size:.55em;}
@media print{
  .p-slide .viz{background:none;border:none;padding:0;}
  .p-slide .viz .vz-h,.p-slide .viz .vz-s,.p-slide .viz details{display:none;}
  .p-slide .viz .vz-read{font-size:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .p-slide .viz .vz-read .hero{font-size:22px;}
  .p-slide .viz .vz-legend span{font-size:11px;}
}

/* --- primer callout -----------------------------------------------------
   This cohort has no modelling prerequisite, but Sessions 3, 4 and 6 use
   modelling vocabulary (labels, weights, features, drift) as if it were
   common knowledge. The five video-*.html primer pages exist to close that
   gap; this callout points at the right one from the exact card where the
   vocabulary first bites. Worded so nobody has to admit to not knowing. */
.primer{margin-top:14px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:11px 14px;}
.primer .pk{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--accent);margin-bottom:5px;}
.primer a{display:inline-block;font-size:14.5px;font-weight:800;color:var(--accent-deep);
  text-decoration:none;}
.primer a:hover{text-decoration:underline;}
.primer .pw{display:block;font-size:13px;color:var(--grey);margin-top:4px;line-height:1.5;}

/* --- figures ------------------------------------------------------------
   A diagram that carries an argument (currently the Sculley et al. 2015
   ML-system picture in 3.1). Kept as a local SVG rather than a raster so it
   stays sharp in full-screen Lecture mode and in the printed slides PDF.
   A slide that holds one needs `cls:'wide'` — .lect-body is capped at 60ch
   for prose, which is far too narrow for a diagram. */
.figure{margin:14px 0 2px;}
.figure img{display:block;width:100%;height:auto;background:var(--white);
  border:1px solid var(--line);border-radius:10px;padding:12px;}
.figure figcaption{font-size:12.5px;color:var(--grey);margin-top:8px;line-height:1.5;}
.figure figcaption b{color:var(--ink);}
.lect-slide.wide .lect-body{max-width:none;}
.lect-body .figure{margin:1.2vh 0 0;}
.lect-body .figure img{border:none;background:none;padding:0;max-height:46vh;
  margin:0 auto;object-fit:contain;}
.lect-body .figure figcaption{font-size:.6em;margin-top:.9vh;text-align:center;}
.lect-slide.dk .lect-body .figure img{background:var(--white);padding:1.2vh;border-radius:8px;}

/* stage-strip column counts (default above is 4) */
.stages.n3{grid-template-columns:repeat(3,1fr);}
.stages.n5{grid-template-columns:repeat(5,1fr);}
.stages.n6{grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){
  .stages.n3,.stages.n5,.stages.n6{grid-template-columns:1fr 1fr;}
  .stages.n3 .tside:last-child,.stages.n5 .tside:last-child{grid-column:1/-1;}
}

/* ---------- worked-example tables (added for 4.3 · analysis) ----------
   .dtab wraps a table so a wide one scrolls inside its own card instead of
   pushing the page sideways on a phone. The band pills reuse the exact three
   labels of the probability–impact grid — monitor / plan / act — so a table
   and the interactive never disagree about what a cell means. */
.dtab{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--white);}
.dtab table{width:100%;border-collapse:collapse;font-size:13px;min-width:540px;}
.dtab th{background:var(--accent-pale);color:var(--accent-deep);text-align:left;
  font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;font-weight:800;
  padding:9px 11px;border-bottom:1px solid var(--line);}
.dtab td{padding:9px 11px;border-bottom:1px solid var(--line);color:var(--ink-soft);
  vertical-align:top;line-height:1.45;}
.dtab tr:last-child td{border-bottom:none;}
.dtab td b,.dtab td strong{color:var(--ink);}
.dtab td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dtab td.mid,.dtab th.mid{text-align:center;}
.dtab td.mid b{font-weight:800;}
.dtab th.rowh,.dtab td.rowh{background:var(--paper);font-weight:800;color:var(--ink);
  white-space:nowrap;}
.dtab caption{caption-side:bottom;text-align:left;font-size:11.5px;color:var(--grey);
  padding:9px 11px;line-height:1.5;}
.dtab caption b{color:var(--ink-soft);}
.pill{display:inline-block;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;
  font-weight:800;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.pill.b1{background:#F1F5F9;color:var(--grey);}
.pill.b2{background:#FEF3C7;color:#92400E;}
.pill.b3{background:var(--accent-pale);color:var(--accent-deep);}
.dtab code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.9em;background:var(--paper);border:1px solid var(--line);
  border-radius:5px;padding:1px 5px;color:var(--accent-deep);white-space:nowrap;}

/* =====================================================================
   HEG overrides — what differs from the E1410 original.
   ===================================================================== */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.2px;}
.hero h1,.sec-head h2,.card h3{color:var(--navy);}
.hero h1 em{color:var(--accent);}
.topbar img.brand{height:30px;}
.topbar .course{color:var(--navy);letter-spacing:1.2px;}
.topbar a.home{color:var(--navy);}
.lect-btn{background:var(--navy);}
.lect-btn:hover{background:var(--navy-deep);}
.section-card .num{color:var(--navy);}
.section-card.done{border-left-color:var(--accent);}
.objectives h4{color:var(--navy);}
.objectives li::before{color:var(--accent);}
.label.idea{background:rgba(0,44,70,0.06);color:var(--navy);border:1px solid rgba(0,44,70,0.25);}
.label.def{background:rgba(0,44,70,0.06);color:var(--navy);border:1px solid rgba(0,44,70,0.25);}
.label.read{background:rgba(0,44,70,0.06);color:var(--navy);border:1px solid rgba(0,44,70,0.25);}
.punch{color:var(--navy);border-left-color:var(--accent);}
.lect-slide h2{color:var(--navy);}
.lect-body .colh{color:var(--navy);}
.lect-slide.dk h2{color:#fff;}
.lect-logo-big{background:#fff;padding:14px 22px;}
.lect-foot img{height:22px;}
/* statistics-specific bits ported from the old Module 0 / Chapter 1 pages */
.formula{background:rgba(0,44,70,0.05);border:1px dashed rgba(0,44,70,0.4);border-radius:10px;padding:11px 14px;text-align:center;font-size:15.5px;color:var(--navy);margin:12px 0;line-height:1.7;font-weight:600;}
.formula .gk,.gk{text-transform:none;}
.quote{font-size:17px;font-style:italic;color:var(--navy);text-align:center;margin:14px auto;max-width:46ch;}
.quote .who{display:block;font-size:13px;font-style:normal;color:var(--grey);margin-top:8px;}
.toggle-row{display:flex;gap:0;border:1px solid var(--line);border-radius:30px;overflow:hidden;margin:4px 0 10px;flex-wrap:wrap;background:var(--white);}
.toggle-row button{flex:1;min-width:90px;background:none;border:none;color:var(--grey);font-family:inherit;font-size:12.5px;font-weight:800;padding:9px 8px;cursor:pointer;transition:.2s;}
.toggle-row button.on{background:var(--navy);color:#fff;}
.ctrl label{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:6px;font-weight:600;}
.ctrl label .val{color:var(--accent);font-weight:800;font-variant-numeric:tabular-nums;}
.statrow{display:flex;justify-content:space-around;gap:8px;flex-wrap:wrap;margin-top:12px;}
.stat{text-align:center;flex:1;min-width:84px;}
.stat .v{font-size:22px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;}
.stat .l{font-size:10px;letter-spacing:1px;color:var(--grey);text-transform:uppercase;margin-top:2px;font-weight:700;}
.numin{background:var(--white);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:15px "Helvetica Neue",Helvetica,Arial,sans-serif;padding:9px 11px;width:110px;}
.numin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,0,0,0.10);}
svg.viz{width:100%;height:auto;display:block;}
.bignum .cur{font-size:22px;color:var(--grey);vertical-align:super;font-weight:700;}
.stem{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:8px;padding:14px 16px;white-space:pre;line-height:1.7;overflow-x:auto;}
.stem .stemd{color:var(--accent);font-weight:800;}
.flip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.flip{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:.2s;min-height:112px;}
.flip:hover{border-color:var(--navy);box-shadow:var(--shadow);}
.flip .word{font-size:16px;color:var(--navy);font-weight:800;}
.flip .face{font-size:13px;color:var(--ink-soft);margin-top:8px;line-height:1.45;}
.flip .tagline{font-size:9px;letter-spacing:1px;text-transform:uppercase;margin-top:8px;font-weight:800;color:var(--grey);}
.flip.front .tagline{color:var(--accent);}
.flip.back{border-color:var(--ok);background:rgba(47,133,90,0.06);}
.flip.back .tagline{color:var(--ok);}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:8px;}
.map-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;}
.map-card .mq{font-size:15px;color:var(--navy);font-weight:800;margin-bottom:6px;line-height:1.3;}
.map-card .tools{font-size:12.5px;color:var(--accent);font-weight:600;}
.map-card .ch{font-size:11px;color:var(--grey);margin-top:4px;}
.tool-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.tool-links a{font-size:12px;color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-weight:700;background:var(--white);}
.tool-links a:hover{border-color:var(--accent);color:var(--accent);}
.btn.small{padding:8px 14px;font-size:12px;}
/* the running case callout on a lesson card, sibling of the slide-only .onproj */
.case-note{margin-top:14px;background:var(--accent-pale);border-left:4px solid var(--accent);border-radius:10px;padding:11px 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.case-note b{color:var(--accent-deep);}
/* a page still being built — weeks 3–16 carry this until they are written */
.draft-banner{background:var(--navy);color:#fff;font-size:12.5px;padding:8px 16px;text-align:center;font-weight:600;}
.draft-banner b{color:#FFB3AD;}
.plan-list{margin:10px 0 0 0;padding:0;list-style:none;}
.plan-list li{position:relative;padding:8px 0 8px 26px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
.plan-list li:last-child{border-bottom:none;}
.plan-list li::before{content:"○";position:absolute;left:4px;color:var(--accent);font-weight:800;}
.plan-list li b{color:var(--navy);}


/* =====================================================================
   PART 2 · the in-class exercise set (exercises.js).
   The same exercise renders three ways — a form here, a slide in the
   deck, and the solution in the speaker notes — so the styles come in
   two families: .exq* for the page, .exs* for the slide.
   ===================================================================== */
.part-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 10px;padding-top:16px;border-top:2px solid var(--navy);}
.part-head .pt{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--navy);font-weight:800;white-space:nowrap;}
.part-head .pd{font-size:12.5px;color:var(--grey);}
.section-card.part2{border-left:4px solid var(--navy);}
/* the slide ↔ site cross-reference chip, on both surfaces */
.ref{display:inline-block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;
  background:var(--surface);color:var(--grey);border:1px solid var(--line);border-radius:20px;padding:2px 9px;margin-left:8px;vertical-align:2px;}
.sec-head .ref{background:var(--accent-pale);color:var(--accent-deep);border-color:rgba(204,0,0,.25);}

/* instructor strip on the exercise screen */
.ex-inst{background:var(--navy);color:#fff;border-radius:14px;padding:13px 16px;margin-bottom:16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ex-inst .ei-t{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;white-space:nowrap;}
.ex-inst .ei-d{font-size:12.5px;color:rgba(255,255,255,.85);flex:1;min-width:200px;line-height:1.45;}
.ex-inst .btn{background:#fff;color:var(--navy);}
.ex-inst .btn:hover{background:#FFB3AD;}
.ei-tag{display:inline-block;font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;
  background:var(--navy);color:#fff;border-radius:20px;padding:2px 8px;margin-right:8px;vertical-align:1px;}

/* one exercise on the page */
.exq{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:14px;
  box-shadow:var(--shadow);transition:.18s;}
.exq.solved{border-color:var(--ok);border-left:4px solid var(--ok);}
.exq .exh{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:10px;}
.exq .exn{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:var(--accent);white-space:nowrap;}
.exq .exm{font-size:10px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--grey);
  border:1px solid var(--line);border-radius:20px;padding:1px 8px;}
.exq h4{font-size:16.5px;color:var(--navy);width:100%;line-height:1.3;margin-top:2px;}
.exq .exb{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.exq .exb p{margin-bottom:9px;}
.exq .exb p:last-child{margin-bottom:0;}
.exq .exb b{color:var(--ink);}
.exq .exb em{color:var(--accent-deep);font-style:normal;font-weight:700;}
.exdata{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--navy);
  background:var(--paper);border:1px dashed var(--navy);border-radius:10px;padding:12px 14px;margin:12px 0;
  line-height:1.8;overflow-x:auto;white-space:pre-wrap;font-variant-numeric:tabular-nums;}
.exq .fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:12px;}
.exq .field{display:flex;flex-direction:column;gap:4px;}
.exq .field label{font-size:12px;color:var(--grey);font-weight:700;}
.exq .field .inwrap{display:flex;align-items:center;gap:6px;}
.exq .field input{width:118px;background:var(--paper);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  font:15px inherit;padding:9px 11px;font-variant-numeric:tabular-nums;}
.exq .field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,0,0,.10);}
.exq .field input.ok{border-color:var(--ok);background:rgba(47,133,90,.07);}
.exq .field input.no{border-color:var(--no);background:rgba(204,0,0,.06);}
.exq .field .unit{color:var(--grey);font-size:13px;}
.exq .field .mark{font-size:16px;width:18px;font-weight:800;}
.exq .opts{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.exq .opt{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:10px 13px;
  color:var(--ink);font:14px inherit;cursor:pointer;transition:.15s;}
.exq .opt:hover{border-color:var(--accent);}
.exq .opt.sel{border-color:var(--accent);background:var(--accent-pale);font-weight:700;}
.exq .opt.ok{border-color:var(--ok);background:rgba(47,133,90,.10);}
.exq .opt.no{border-color:var(--no);background:rgba(204,0,0,.08);}
.exq .exopen{width:100%;margin-top:12px;background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font:14px inherit;color:var(--ink);resize:vertical;}
.exq .exopen:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,0,0,.10);}
.exq .exbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.exq .btn.dim{background:transparent;color:var(--grey);border:1px solid var(--line);box-shadow:none;}
.exq .btn.dim:hover{color:var(--navy);border-color:var(--navy);}
.exq .btn.dim.locked{opacity:.65;cursor:help;}
.exq .exfb{margin-top:12px;font-size:14px;display:none;border-radius:10px;padding:11px 14px;line-height:1.6;}
.exq .exfb.show{display:block;}
.exq .exfb.good{background:rgba(47,133,90,.09);border:1px solid rgba(47,133,90,.4);color:#1F6B45;}
.exq .exfb.bad{background:rgba(204,0,0,.06);border:1px solid rgba(204,0,0,.3);color:var(--accent-deep);}
.exq .exfb.hint{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft);}
.exq .exfb.sol{background:rgba(0,44,70,.05);border:1px solid rgba(0,44,70,.25);color:var(--ink-soft);}
.exq .exfb.sol b{color:var(--navy);}
.exq .exfb code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--white);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--navy);}
.exq .exfb .step{margin:7px 0;}

/* the same exercise, on a slide */
.ex-slide .exs-q{font-size:.92em;}
.ex-slide .exs-q p{margin-bottom:.8vh;}
.ex-slide .exdata{font-size:.72em;padding:1vh 1.2vw;margin:1.2vh 0;line-height:1.7;}
.ex-slide .exs-ask{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.2vh;}
.ex-slide .exs-ask span{font-size:.62em;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);
  border:1.5px dashed var(--accent);border-radius:8px;padding:.7vh 1vw;}
.ex-slide .exs-opts{display:grid;grid-template-columns:1fr 1fr;gap:.7vh 1.4vw;margin-top:1.2vh;}
.ex-slide .exs-opts span{font-size:.72em;color:var(--ink-soft);}
.ex-slide .exs-sol{margin-top:1.6vh;background:var(--accent-pale);border-left:4px solid var(--accent);border-radius:10px;
  padding:1.2vh 1.5vw;font-size:.72em;color:var(--ink-soft);line-height:1.5;max-height:34vh;overflow-y:auto;}
.ex-slide .exs-sol b{color:var(--accent-deep);}
.ex-slide .exs-sol code{font-family:ui-monospace,Menlo,monospace;background:var(--white);border-radius:4px;padding:0 4px;}
.ex-slide .exs-btn{margin-top:1.6vh;background:var(--navy);color:#fff;border:none;border-radius:30px;
  font:800 .62em inherit;padding:.9vh 1.6vw;cursor:pointer;letter-spacing:.5px;}
.ex-slide .exs-btn:hover{background:var(--navy-deep);}
.ex-slide .exs-btn:disabled{background:var(--ok);cursor:default;}
.ex-slide .exs-wait{margin-top:1.6vh;font-size:.6em;color:var(--grey);border-top:1px solid var(--line);padding-top:1.2vh;}
.ex-slide .exs-wait b{color:var(--accent-deep);}
@media print{
  .p-slide .ex-slide .exs-btn,.p-slide .ex-slide .exs-wait{display:none;}
  .p-slide .ex-slide .exs-sol{max-height:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .p-slide .ex-slide .exdata{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
/* the deck's half of the cross-reference: which section of the site this
   slide is. Its twin is .ref on the section card and the section head. */
.lect-kicker .lect-site{display:inline-block;margin-left:1.2vw;font-size:.72em;letter-spacing:1px;
  text-transform:none;font-weight:700;color:var(--grey);border-left:2px solid var(--line);padding-left:1vw;}
.lect-slide.dk .lect-kicker .lect-site{color:rgba(255,255,255,.7);border-left-color:rgba(255,255,255,.3);}
@media print{.p-slide .lect-kicker .lect-site{font-size:11px;}}
/* An exercise slide carries a question, a dataset strip, answer chips and a
   revealed solution — far more than the 60ch prose column .lect-body assumes,
   and it must not be vertically centred or the reveal pushes it off screen. */
.lect-slide.wide:has(.ex-slide){width:100%;}
.lect-stage:has(.ex-slide){align-items:flex-start;padding-top:3.5vh;}
.ex-slide{max-width:none;}
.lect-slide:has(.ex-slide) h2{font-size:clamp(24px,3.4vw,42px);margin-bottom:1.8vh;}