/* Layout concept: one reading column (~68ch) like a printed textbook page; a quiet sticky toolbar
   carries the three reader choices (language, software, depth). Boxes are used only for things the
   reader does: try, check, reveal, run software. */
/* Skins. Each kind of block has one color with a teaching meaning, the same in every skin; only its strength changes:
   book/structure purple · our data blue · your turn green · check yourself lilac · go deeper yellow · watch out coral.
   Statistics colors: sample symbols purple, population symbols teal, group 1 blue, group 2 orange. */
:root, body[data-skin="calm"]{
  --paper:#f6f7f9; --sheet:#ffffff; --ink:#1f2430; --ink-2:#5d6576; --rule:#e3e6ec;
  --accent:#5a3ff0; --accent-soft:#f1eefe; --sym:#5a3ff0; --sym-soft:#f1eefe; --pop:#0f8f8c; --pop-soft:#e2f5f4; --g1:#2d7fe0; --g2:#e8701f;
  --excel:#1e7145; --spss:#a8322d; --jasp:#2a5ca8; --ok:#1f8a52; --bad:#c43d3d; --warn-soft:#fdf0f1;
  --out-bg:#ffffff; --out-head:#eef1f4; --out-rule:#c9d0d6;
  --c-book:#5a3ff0; --c-data:#2d7fe0; --c-turn:#1a9a5e; --c-check:#7c5ce8; --c-deep:#d39b00; --c-warn:#e0475b;
  --s-book:#ffffff; --s-data:#ffffff; --s-turn:#ffffff; --s-check:#ffffff; --s-deep:#ffffff; --s-warn:#ffffff;
  --stripe:4px; --bw:1px; --key:0px; --radius:12px; --mark:#fff1b8; --barbg:var(--sheet); --barink:var(--ink); --segon:var(--ink); --segonink:#fff;
  --f-display:"Heebo", "Assistant", Arial, sans-serif; --hw:700;
  --f-body:"Assistant", "Heebo", "Segoe UI", Arial, sans-serif;
  --f-sym:"Source Serif 4", "Cambria", "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", "Consolas", "Courier New", monospace;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:2.2rem;
  color-scheme:light;
}
body[data-skin="happy"]{
  --paper:#faf9ff; --sheet:#ffffff; --ink:#1d1838; --ink-2:#5b5677; --rule:#e6e2f6;
  --accent:#5a3ff0; --accent-soft:#efeaff;
  --s-book:#efeaff; --s-data:#eef6ff; --s-turn:#eafaf1; --s-check:#f4f0ff; --s-deep:#fff8dc; --s-warn:#fff0f2;
  --stripe:0px; --bw:1.5px; --key:4px; --radius:18px; --mark:#ffe58a; --barbg:#1d1838; --barink:#ffffff; --segon:#ffcf3f; --segonink:#1d1838;
  --f-display:"Varela Round", "Heebo", Arial, sans-serif; --hw:400;
}
body[data-skin="night"]{
  --paper:#11151d; --sheet:#171d28; --ink:#e7eaf2; --ink-2:#a2abbd; --rule:#283043;
  --accent:#a996ff; --accent-soft:#1d1a33; --sym:#b9a8ff; --sym-soft:#221d3a; --pop:#4fd1c5; --pop-soft:#12302e; --g1:#6cb6ff; --g2:#ffa565;
  --excel:#5bbf8a; --spss:#ee8a83; --jasp:#8cb3f0; --ok:#5fd69c; --bad:#ff8796; --warn-soft:#2a1519;
  --out-bg:#1d252c; --out-head:#26313a; --out-rule:#3a4752;
  --c-book:#a996ff; --c-data:#6cb6ff; --c-turn:#5fd69c; --c-check:#b9a4ff; --c-deep:#f2c14e; --c-warn:#ff8796;
  --s-book:#1d1a33; --s-data:#131e2e; --s-turn:#12231b; --s-check:#1b1830; --s-deep:#262010; --s-warn:#2a1519;
  --mark:rgba(242,193,78,.28); --barbg:#0b0e14; --barink:#e7eaf2; --segon:#a996ff; --segonink:#0b0e14;
  color-scheme:dark;
}
html[data-fs="s"]{font-size:14px} html[data-fs="m"]{font-size:16px} html[data-fs="l"]{font-size:18.5px}

*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--step-0); line-height:1.7; margin:0}
.wrap{max-width:46rem; margin:0 auto; padding-inline:16px; padding-block:0 4rem}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; line-height:1.25; font-weight:700}
h1{font-size:var(--step-3); margin:.2em 0 .3em}
h2{font-size:var(--step-2); margin:2.6rem 0 .6rem; padding-top:1rem; border-top:1px solid var(--rule)}
h3{font-size:var(--step-1); margin:1.8rem 0 .4rem}
p{margin:.6em 0}
.eyebrow{font-size:var(--step--1); letter-spacing:.06em; color:var(--ink-2); font-weight:600}
.lead{font-size:var(--step-1); color:var(--ink-2)}

/* ---------- toolbar */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--sheet); border-bottom:1px solid var(--rule)}
.bar-in{max-width:66rem; margin:0 auto; padding:.45rem 16px; display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center}
.bar .brand{font-family:var(--f-display); font-weight:700; margin-inline-end:auto; white-space:nowrap}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; background:var(--paper)}
.seg button{font:inherit; font-size:var(--step--1); border:0; background:transparent; color:var(--ink-2); padding:.3rem .75rem; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--sheet); font-weight:600}
.seg button:disabled{opacity:.45; cursor:not-allowed}
.seg-label{font-size:.75rem; color:var(--ink-2); margin-inline-end:.3rem}
.bar .grp{display:flex; align-items:center}
.tocbtn{font:inherit; font-size:var(--step--1); border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:999px; padding:.3rem .8rem; cursor:pointer}
@media (max-width:640px){ .seg-label{display:none} .bar{position:static} .bar .brand{flex:1 1 auto} .seg button{padding:.3rem .6rem} .read{grid-template-columns:1fr; gap:0} .read dt{margin-top:.5rem} }

/* ---------- depth & software visibility */
body[data-depth="short"] .d-main, body[data-depth="short"] .d-full{display:none}
body:not([data-depth="short"]) .d-short{display:none}
body:not([data-depth="full"]) .d-full{display:none}
body[data-sw="excel"] .sw:not(.sw-excel), body[data-sw="spss"] .sw:not(.sw-spss), body[data-sw="jasp"] .sw:not(.sw-jasp){display:none}
.d-short{border-inline-start:3px solid var(--accent); padding-inline-start:.9rem; color:var(--ink)}
.d-full{background:var(--accent-soft); border-radius:10px; padding:.8rem 1rem; margin:1rem 0}
.d-full > .tag, .boxtag{font-size:.75rem; font-weight:700; letter-spacing:.05em; color:var(--accent); display:block; margin-bottom:.2rem}

/* ---------- symbols */
.sym{font-family:var(--f-sym); font-style:italic; color:var(--sym); background:var(--sym-soft); border:0; border-radius:4px;
     padding:0 .22em; font-size:1.02em; cursor:pointer; line-height:1.3; unicode-bidi:isolate; direction:ltr}
.sym.up{font-style:normal}
.sym:hover{text-decoration:underline dotted}
.pop{position:absolute; z-index:40; width:min(20rem, calc(100vw - 32px)); background:var(--sheet); color:var(--ink); border:1px solid var(--rule);
     border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:.8rem 1rem; font-size:var(--step--1); line-height:1.55}
.pop h4{margin:0 0 .3rem; font-family:var(--f-display); font-size:1.05rem}
.pop .big{font-family:var(--f-sym); font-style:italic; font-size:1.5rem; color:var(--sym); direction:ltr; unicode-bidi:isolate}
.pop dl{display:grid; grid-template-columns:auto 1fr; gap:.15rem .7rem; margin:.4rem 0 0}
.pop dt{color:var(--ink-2)} .pop dd{margin:0}
.pop .x{position:absolute; inset-inline-end:.4rem; top:.3rem; border:0; background:none; color:var(--ink-2); font-size:1.1rem; cursor:pointer}

/* ---------- math (always its own LTR line) */
.math{direction:ltr; text-align:center; font-family:var(--f-sym); font-size:1.15rem; margin:.8rem 0; padding:.5rem; overflow-x:auto}
.math i{font-style:italic}
.frac{display:inline-grid; vertical-align:middle; text-align:center; margin:0 .2em}
.frac > span:first-child{border-bottom:1px solid currentColor; padding:0 .25em}
.frac > span:last-child{padding:0 .25em}
.steps{direction:ltr; font-family:var(--f-sym); font-size:1.05rem; display:grid; gap:.35rem; margin:.7rem 0; padding:.6rem .9rem; background:var(--sheet); border:1px solid var(--rule); border-radius:8px; overflow-x:auto}
.steps .why{font-family:var(--f-body); font-size:.85rem; color:var(--ink-2); direction:rtl; unicode-bidi:isolate; text-align:right}
:lang(en) .steps .why{direction:ltr; unicode-bidi:isolate; text-align:left}
bdi.ltr, .ltr{direction:ltr; unicode-bidi:isolate}
code, .xl{font-family:var(--f-mono); font-size:.9em; direction:ltr; unicode-bidi:isolate; background:var(--out-head); padding:.05em .3em; border-radius:4px}

/* ---------- blocks */
.question{background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:1.1rem 1.2rem; margin:1.2rem 0}
.question .q{font-family:var(--f-display); font-size:var(--step-2); line-height:1.35}
.goals{margin:.4rem 0; padding-inline-start:1.2rem}
.goals li{margin:.25rem 0}
.box{border:1px solid var(--rule); border-radius:12px; background:var(--sheet); padding:1rem 1.1rem; margin:1.2rem 0}
details.sol{margin-top:.6rem}
details.sol > summary{cursor:pointer; color:var(--accent); font-weight:600; list-style:none; display:inline-block; border:1px solid var(--accent); border-radius:999px; padding:.15rem .8rem}
details.sol > summary::-webkit-details-marker{display:none}
details.sol[open] > summary{background:var(--accent); color:var(--sheet)}
.tbl-wrap{overflow-x:auto; margin:.8rem 0}
table.data{border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:.95rem; min-width:16rem}
table.data th, table.data td{border-bottom:1px solid var(--rule); padding:.3rem .7rem; text-align:center}
table.data th{font-weight:700; color:var(--ink-2); font-size:.85rem}
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}

/* ---------- software blocks */
.software{border:1px solid var(--rule); border-radius:12px; background:var(--sheet); margin:1.4rem 0; overflow:hidden}
.sw-tabs{display:flex; gap:0; border-bottom:1px solid var(--rule); background:var(--paper)}
.sw-tabs button{flex:1; font:inherit; font-size:var(--step--1); font-weight:600; border:0; background:none; color:var(--ink-2); padding:.55rem .4rem; cursor:pointer; border-bottom:3px solid transparent}
.sw-tabs button[aria-pressed="true"][data-sw="excel"]{color:var(--excel); border-color:var(--excel)}
.sw-tabs button[aria-pressed="true"][data-sw="spss"]{color:var(--spss); border-color:var(--spss)}
.sw-tabs button[aria-pressed="true"][data-sw="jasp"]{color:var(--jasp); border-color:var(--jasp)}
.sw-body{padding:.9rem 1.1rem}
.sw-body ol{padding-inline-start:1.3rem; margin:.4rem 0}
.sw-body li{margin:.2rem 0}
.path{font-family:var(--f-mono); font-size:.85rem; direction:ltr; unicode-bidi:isolate; background:var(--out-head); padding:.1rem .4rem; border-radius:4px; white-space:nowrap}
.note-recon{font-size:.8rem; color:var(--ink-2); margin:.3rem 0 0}
/* output replicas */
.out{direction:ltr; overflow-x:auto; margin:.6rem 0; padding:.6rem; background:var(--out-bg); border:1px solid var(--out-rule); border-radius:6px}
.out .ttl{font-family:Arial, sans-serif; font-weight:700; font-size:.85rem; margin:0 0 .3rem; text-align:left}
.out table{border-collapse:collapse; font-family:Arial, sans-serif; font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--ink)}
.out th, .out td{padding:.2rem .55rem; text-align:right; white-space:nowrap}
.out th:first-child, .out td:first-child{text-align:left}
.out.spss th{background:var(--out-head); border:1px solid var(--out-rule); font-weight:400}
.out.spss td{border:1px solid var(--out-rule)}
.out.jasp table{border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.out.jasp th{border-bottom:1px solid var(--ink); font-weight:400}
.out.excel table{border:1px solid var(--out-rule)}
.out.excel td, .out.excel th{border:1px solid var(--out-rule)}
.out.excel th{background:var(--out-head); color:var(--ink-2); font-weight:400; text-align:center}
.out .hl{background:color-mix(in srgb, var(--accent) 22%, transparent); font-weight:700}
.out .zoomlbl{display:inline-block; min-width:1.2rem; height:1.2rem; border-radius:50%; background:var(--bad); color:#fff; font-size:.7rem; line-height:1.2rem; text-align:center; margin-inline-start:.2rem; font-weight:700}
.read{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; font-size:.92rem; margin:.5rem 0}
.read dt{font-family:var(--f-mono); font-size:.82rem; direction:ltr; unicode-bidi:isolate; color:var(--ink-2)}
.read dd{margin:0}

/* ---------- applet */
.applet{border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--sheet); margin:1rem 0}
.applet iframe{display:block; width:100%; height:640px; border:0; background:#fff}
.applet .cap{padding:.6rem 1rem; font-size:var(--step--1); display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between}

/* ---------- quiz */
.quiz{counter-reset:q}
.qitem{border:1px solid var(--rule); border-radius:12px; background:var(--sheet); padding:.9rem 1.1rem; margin:.9rem 0}
.qitem .qtext{font-weight:600; margin-bottom:.5rem}
.qitem .qtext::before{counter-increment:q; content:counter(q) ". "; color:var(--accent)}
.opts{display:grid; gap:.4rem}
.opts button{font:inherit; text-align:start; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:8px; padding:.45rem .8rem; cursor:pointer}
.opts button.right{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--paper))}
.opts button.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--paper))}
.fb{margin-top:.5rem; font-size:.95rem}
.fb b.ok{color:var(--ok)} .fb b.no{color:var(--bad)}
.score{font-weight:700; color:var(--accent)}

/* ---------- summary, terms */
.formulas{display:grid; gap:.3rem; background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:.8rem 1rem}
.terms{display:flex; flex-wrap:wrap; gap:.4rem}
.terms span{border:1px solid var(--rule); border-radius:999px; padding:.1rem .7rem; font-size:.9rem; background:var(--sheet)}
.bridge{font-family:var(--f-display); font-size:var(--step-1); border-top:2px solid var(--accent); padding-top:.8rem; margin-top:2.5rem}
.banner{background:var(--warn-soft); border:1px solid var(--rule); border-radius:10px; padding:.6rem .9rem; font-size:var(--step--1); margin:1rem 0}

/* ---------- toc drawer */
.drawer{position:fixed; inset-block:0; inset-inline-start:0; width:min(24rem, 92vw); background:var(--sheet); border-inline-end:1px solid var(--rule);
        z-index:50; overflow-y:auto; padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom,0px)); box-shadow:0 0 40px rgba(0,0,0,.2)}
.drawer h3{margin-top:1rem; font-size:1rem}
.drawer ol{margin:0; padding-inline-start:1.6rem; font-size:.92rem}
.drawer li{margin:.15rem 0; color:var(--ink-2)}
.drawer li a{font-weight:700}
.drawer .close{float:inline-end; border:0; background:none; font-size:1.3rem; color:var(--ink); cursor:pointer}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:45}
@media (prefers-reduced-motion: no-preference){ .opts button, .seg button, .sw-tabs button{transition:background .15s, border-color .15s} }

/* ---------- page navigation */
.pager{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--rule); font-weight:600}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline}

/* ---------- cover */
.cover .book-title{font-family:var(--f-display); font-size:clamp(2.4rem, 7vw, 3.6rem); line-height:1.1; margin:2.4rem 0 .4rem}
.cover .byline{color:var(--ink-2); font-size:var(--step-1); margin:0 0 1.4rem}
.cover .three{display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.8rem; margin:1.2rem 0}
.cover .three > div{background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:.8rem 1rem; min-width:0}
.cover .three b{display:block; font-family:var(--f-display); font-size:1.1rem; margin-bottom:.2rem}
.parts{display:grid; gap:.4rem}
.part h3{margin:1.2rem 0 .3rem}
.part ol{margin:0; padding-inline-start:1.8rem}
.part li{margin:.15rem 0}
.part li.todo{color:var(--ink-2)}
.part li a{font-weight:700}
.start{display:inline-block; background:var(--accent); color:var(--sheet); text-decoration:none; font-weight:700; border-radius:999px; padding:.5rem 1.3rem; margin:.6rem 0}
/* labs page */
.start-2{background:transparent; color:var(--accent); border:2px solid var(--accent)}
.startrow{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center}
.drawer-labs{margin:.6rem 0 0; font-weight:700}
.labfilter{margin:.8rem 0 1rem; display:inline-flex}
.labch{margin-top:1.4rem}
.labgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.7rem}
.labgrid[hidden], .labch[hidden], .labcard[hidden]{display:none}
.labcard{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; min-width:0;
  background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:.8rem 1rem; text-align:start; color:var(--ink); font:inherit}
.labcard:hover, .labcard:focus-visible{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}
.labcard b{font-family:var(--f-display); font-size:1.05rem; line-height:1.3}
.labcard .lede{font-size:var(--step--1); opacity:.85; line-height:1.45}
.lvl{align-self:flex-start; font-size:.75rem; font-weight:700; border-radius:999px; padding:.05rem .6rem; color:#fff}
.lvl-P{background:#2e7d4f} .lvl-S{background:#2f5d9a} .lvl-A{background:#7a3e8e}
.lab-old{font-size:.75rem; color:var(--muted, #8a5a00)}
.labviewer{position:relative}
.labviewer .cap{border-bottom:1px solid var(--rule)}
.linkbtn{all:unset; cursor:pointer; color:var(--accent); text-decoration:underline}
.labviewer{scroll-margin-top:4.5rem}
code.xl, .path, code{overflow-wrap:anywhere}
@media (max-width:640px){.path{white-space:normal}}
.math{overflow-wrap:anywhere}
.qtext,.opts{overflow-wrap:anywhere}
/* check-yourself items inside sections */
.checks{border-inline-start:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 5%, var(--paper)); border-radius:0 12px 12px 0; padding:.6rem 1rem .4rem; margin:1.4rem 0}
.checks > .boxtag{display:inline-block}
.chk{border-top:1px solid var(--rule); padding:.8rem 0}
.chk:first-of-type{border-top:0}
.chk .cq{font-weight:600; margin:0 0 .5rem}
.chk .cq .n{color:var(--accent); margin-inline-end:.35rem}
.copts{display:grid; gap:.35rem; margin:.3rem 0 .6rem}
.copts button{font:inherit; text-align:start; border:1px solid var(--rule); background:var(--sheet); color:var(--ink); border-radius:8px; padding:.4rem .8rem; cursor:pointer; overflow-wrap:anywhere}
.copts button[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent)}
.copts button.right{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--sheet))}
.copts button.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, var(--sheet))}
.cbtn{font:inherit; font-weight:600; cursor:pointer; color:var(--accent); background:transparent; border:1px solid var(--accent); border-radius:999px; padding:.15rem .9rem}
.chk.open .cbtn{background:var(--accent); color:var(--sheet)}
.chk .ans{margin-top:.6rem; padding:.6rem .9rem; background:var(--sheet); border:1px solid var(--rule); border-radius:10px}
.chk .verdict{font-weight:700; margin-inline-end:.4rem}
.chk .ans .steps{margin:.4rem 0}
/* video slot (author's short films, later) */
.video{border:1px dashed var(--rule); border-radius:12px; padding:.8rem 1rem; margin:1rem 0; background:var(--sheet)}
.video video, .video iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:8px}
/* glossary terms and pop-ups */
.gl{cursor:pointer; text-decoration:underline dotted color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset:.25em; text-decoration-thickness:1.5px}
.gl:hover, .gl:focus-visible{color:var(--accent); outline:none; text-decoration-style:solid}
.glpop{width:min(22rem, calc(100vw - 32px))}
.gltabs{display:flex; gap:.25rem; margin:0 0 .5rem; padding-inline-end:1.6rem; flex-wrap:wrap}
.gltabs button{font:inherit; font-size:.8rem; border:1px solid var(--rule); background:var(--paper); color:var(--ink); border-radius:999px; padding:.05rem .6rem; cursor:pointer}
.gltabs button[aria-pressed="true"]{background:var(--accent); color:var(--sheet); border-color:var(--accent)}
.glpop [lang="ar"], .gltab-ar, [lang="ar"]{font-family:'Noto Naskh Arabic', var(--f-body), serif}
.glpop .glalt{margin:-.2rem 0 .4rem; color:var(--ink-2); font-size:.85rem}
.glpop .glfoot{font-size:.8rem; margin:.4rem 0 0; color:var(--ink-2)}
.glpop .glseeline{font-size:.85rem; margin:.3rem 0}
.glsee{all:unset; cursor:pointer; color:var(--accent); text-decoration:underline; margin-inline-end:.3rem}
/* glossary page */
.gtools{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:1rem 0 .3rem}
.gsearch input{font:inherit; padding:.4rem .8rem; border:1px solid var(--rule); border-radius:999px; background:var(--sheet); color:var(--ink); width:min(22rem, calc(100vw - 32px))}
#gpart{font:inherit; padding:.35rem .6rem; border:1px solid var(--rule); border-radius:8px; background:var(--sheet); color:var(--ink); max-width:100%}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.gterm{border-bottom:1px solid var(--rule); padding:.7rem 0}
.gterm[hidden]{display:none}
.gterm.hit{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.gterm h3{margin:0 0 .25rem; font-size:1.05rem; display:flex; flex-wrap:wrap; gap:.2rem .9rem; align-items:baseline}
.gterm .gen{font-family:var(--f-body); font-weight:400; color:var(--ink-2); font-size:.95rem}
.gterm .gar{font-weight:400; color:var(--ink-2); font-size:1rem}
.gterm .gd{margin:.1rem 0}
.gterm .gmeta{font-size:.8rem; color:var(--ink-2); margin:.2rem 0 0}
.drawer-gloss{margin:.2rem 0 0; font-weight:700}
/* course mode */
.c-only{display:none}
body[data-mode="course"] .c-only{display:block}
.modebadge{font-size:.8rem; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:.1rem .7rem; text-decoration:none; white-space:nowrap}
.entries{display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:.8rem; margin:1.2rem 0 .4rem}
.entrybig{display:flex; flex-direction:column; gap:.3rem; text-decoration:none; color:var(--ink); background:var(--sheet); border:2px solid var(--accent); border-radius:14px; padding:1rem 1.2rem}
.entrybig b{font-family:var(--f-display); font-size:1.35rem; color:var(--accent)}
.entrybig:hover, .entrybig:focus-visible{background:color-mix(in srgb, var(--accent) 8%, var(--sheet))}
.entrygrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.7rem}
.entrycard{background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:.8rem 1rem; display:flex; flex-direction:column; gap:.4rem}
.entrycard.soon{opacity:.7}
.entrycard input{font:inherit; padding:.3rem .6rem; border:1px solid var(--rule); border-radius:8px; background:var(--paper); max-width:100%}
.entrycard button{font:inherit; border:1px solid var(--rule); border-radius:999px; padding:.2rem .8rem; background:var(--paper); align-self:flex-start}
.entrycard small{color:var(--ink-2)}
.progs{display:grid; gap:.4rem; margin:.5rem 0 1rem}
.progopt{display:flex; gap:.6rem; align-items:flex-start; background:var(--sheet); border:1px solid var(--rule); border-radius:10px; padding:.55rem .8rem; cursor:pointer}
.progopt small{color:var(--ink-2)}
.muted{color:var(--ink-2)}
.examcard{border:2px solid var(--accent)}
.exq{border:1px solid var(--rule); border-radius:12px; background:var(--sheet); padding:.8rem 1rem; margin:.8rem 0}
.exq.ok{border-color:var(--ok)} .exq.no{border-color:var(--bad)}
.exq .ans{margin-top:.6rem; padding:.6rem .9rem; background:var(--paper); border-radius:10px}
.numin input{font:inherit; width:9rem; padding:.3rem .6rem; border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink)}
.bigscore{font-family:var(--f-display); font-size:3rem; margin:.2rem 0; color:var(--accent)}
/* reader choice: questions along the way on/off (book mode); course mode always shows them */
body[data-q="off"]:not([data-mode="course"]) .checks,
body[data-q="off"]:not([data-mode="course"]) .q-only,
body[data-q="off"]:not([data-mode="course"]) .quiz,
body[data-q="off"]:not([data-mode="course"]) #check{display:none}
body[data-mode="course"] .qgrp{display:none}

/* English name of a term, shown once per chapter: inline in parentheses (inside an LTR isolate, so they never flip),
   or on its own line in headings and table cells */
.en{direction:ltr;unicode-bidi:isolate;font-family:inherit;font-size:.86em;color:var(--ink-2);display:inline-block;margin-right:.3em}
[dir="ltr"] .en{margin-right:0;margin-left:.3em}
.en::before{content:"("}
.en::after{content:")"}
.en-line{display:block;font-size:.8em;font-weight:400;margin-top:.1em;margin-right:0;text-align:right}
[dir="ltr"] .en-line{text-align:left}
h2 .en-line,h3 .en-line{font-size:.55em;letter-spacing:.01em}
.en-line::before,.en-line::after{content:none}


/* ================= skins: components ================= */
/* toolbar */
.bar{background:var(--barbg); color:var(--barink); border-bottom-color:var(--rule)}
.bar .seg{border-color:color-mix(in srgb, var(--barink) 22%, transparent); background:transparent}
.bar .seg button{color:inherit; opacity:.85}
.bar .seg button[aria-pressed="true"]{background:var(--segon); color:var(--segonink); opacity:1}
.tocbtn{background:transparent; color:inherit; border-color:color-mix(in srgb, var(--barink) 22%, transparent)}
.gear{font:inherit; width:2.1rem; height:2.1rem; display:inline-grid; place-items:center; border-radius:999px; cursor:pointer; color:inherit; background:transparent; border:1px solid color-mix(in srgb, var(--barink) 22%, transparent); padding:0}
.gear svg{width:1.15rem; height:1.15rem}
.gear[aria-expanded="true"]{background:var(--segon); color:var(--segonink)}
.bar-in{position:relative}
.settings{position:absolute; top:calc(100% + 6px); inset-inline-end:16px; z-index:30; width:min(21rem, calc(100vw - 32px)); background:var(--sheet); color:var(--ink); border:1px solid var(--rule); border-radius:16px; box-shadow:0 18px 40px rgba(0,0,0,.22); padding:.9rem 1rem; display:flex; flex-direction:column; gap:.85rem; font-size:var(--step--1)}
.settings[hidden]{display:none}
.settings .sh{display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:1rem}
.settings .sh button{border:0; background:none; color:var(--ink-2); font-size:1.3rem; line-height:1; cursor:pointer}
.settings .srow{display:flex; flex-direction:column; gap:.35rem}
.settings .srow > span{font-weight:700; color:var(--ink-2); font-size:.8rem}
.settings .chips{display:flex; flex-wrap:wrap; gap:.35rem}
.settings .chips button{font:inherit; cursor:pointer; color:var(--ink); background:var(--sheet); border:1.5px solid var(--rule); border-radius:12px; padding:.25rem .75rem; display:inline-flex; gap:.4rem; align-items:center}
.settings .chips button[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft); font-weight:700}
.settings .chips button:disabled{opacity:.45; cursor:not-allowed}
.settings .dot{width:.85rem; height:.85rem; border-radius:50%; border:1px solid rgba(0,0,0,.18)}
.settings .later{margin:0; font-size:.78rem; color:var(--ink-2); border-top:1px dashed var(--rule); padding-top:.6rem}
@media (max-width:640px){ .settings{inset-inline:12px; width:auto} }

/* headings */
h1,h2,h3{font-family:var(--f-display); font-weight:var(--hw)}
h1{color:var(--ink)}
h2{border-top:0; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
h2::before{content:""; flex:0 0 1.3rem; height:4px; border-radius:2px; background:var(--c-book)}
body[data-skin="happy"] h2::before{flex-basis:.75rem; height:.75rem; border-radius:3px; transform:rotate(45deg)}
h2 .en-line{flex-basis:100%}
.eyebrow{color:var(--c-book)}
.bridge{border-top-color:var(--c-book)}
a{color:var(--accent)}
mark, .hl-key{background:var(--mark); color:inherit; padding:0 .15em; border-radius:4px}

/* one card rule, colored by meaning */
.d-full, .box, .checks, .question, .d-short, .applet{--c:var(--c-book); --s:var(--s-book)}
.d-full{--c:var(--c-deep); --s:var(--s-deep)}
.box{--c:var(--c-data); --s:var(--s-data)}
.box.try{--c:var(--c-turn); --s:var(--s-turn)}
.box.warn{--c:var(--c-warn); --s:var(--s-warn)}
.checks{--c:var(--c-check); --s:var(--s-check)}
.question{--c:var(--c-check); --s:var(--s-check)}
.applet{--c:var(--c-turn); --s:var(--s-turn)}
.d-full, .box, .checks, .question{background:var(--s); border:var(--bw) solid var(--rule); border-inline-start:var(--stripe) solid var(--c); border-radius:var(--radius); padding:.95rem 1.1rem; margin:1.3rem 0}
.d-short{background:var(--sheet); border:var(--bw) solid var(--rule); border-inline-start:var(--stripe) solid var(--c-book); border-radius:var(--radius); padding:.6rem 1rem}
body[data-skin="happy"] :is(.d-full, .box, .checks, .question){border:var(--bw) solid color-mix(in srgb, var(--c) 45%, white); box-shadow:0 var(--key) 0 color-mix(in srgb, var(--c) 25%, white)}
body[data-skin="happy"] .d-short{border:var(--bw) solid color-mix(in srgb, var(--c-book) 35%, white); box-shadow:0 3px 0 color-mix(in srgb, var(--c-book) 18%, white)}
.applet{border:var(--bw) solid var(--rule); border-inline-start:var(--stripe) solid var(--c); border-radius:var(--radius)}
body[data-skin="happy"] .applet{border:var(--bw) solid color-mix(in srgb, var(--c) 45%, white); box-shadow:0 var(--key) 0 color-mix(in srgb, var(--c) 25%, white)}
.applet .cap{background:color-mix(in srgb, var(--c) 7%, var(--sheet)); border-top:1px solid var(--rule)}
.applet .cap strong, .applet .cap a{color:color-mix(in srgb, var(--c) 80%, var(--ink))}

/* tags */
.boxtag, .d-full > .tag{display:inline-flex; gap:.3rem; align-items:center; font-family:var(--f-display); font-size:.78rem; font-weight:700; letter-spacing:.01em; padding:.1rem .7rem; border-radius:999px; margin-bottom:.45rem;
  background:color-mix(in srgb, var(--c, var(--c-book)) 14%, transparent); color:color-mix(in srgb, var(--c, var(--c-book)) 75%, var(--ink))}
body[data-skin="happy"] :is(.boxtag, .d-full > .tag){background:var(--c, var(--c-book)); color:#fff; font-weight:400}
body[data-skin="happy"] .d-full > .tag{color:#3a2a00}
body[data-skin="night"] :is(.boxtag, .d-full > .tag){color:var(--c, var(--c-book))}
.d-full > .tag::before{content:"✦"}
.box.try > .boxtag::before{content:"✎"}
.d-full strong{color:inherit}
.question .q{color:color-mix(in srgb, var(--c-check) 80%, var(--ink))}

/* buttons that reveal answers take the color of their card */
details.sol > summary, .cbtn{color:color-mix(in srgb, var(--c, var(--accent)) 80%, var(--ink)); border:1.5px solid var(--c, var(--accent)); background:var(--sheet)}
details.sol[open] > summary, .chk.open .cbtn{background:var(--c, var(--accent)); color:#fff}
body[data-skin="night"] :is(details.sol[open] > summary, .chk.open .cbtn){color:#0b0e14}
body[data-skin="happy"] :is(details.sol > summary, .cbtn){border-radius:12px; box-shadow:0 3px 0 color-mix(in srgb, var(--c, var(--accent)) 35%, white)}

/* answer options: one per line, with a letter tab (א׳ ב׳ ג׳ ד׳) */
.opts, .copts{counter-reset:opt}
.opts button, .copts button{position:relative; padding-inline-start:3.2rem; min-height:2.6rem; border:1.5px solid var(--rule); border-radius:12px; background:var(--sheet); overflow:hidden; line-height:1.5}
.opts button::before, .copts button::before{counter-increment:opt; content:counter(opt, hebrew) "׳"; position:absolute; inset-block:0; inset-inline-start:0; width:2.4rem; display:grid; place-items:center;
  font-family:var(--f-display); font-weight:700; background:color-mix(in srgb, var(--c-check) 12%, var(--sheet)); color:var(--c-check); border-inline-end:1.5px solid var(--rule)}
:lang(en) :is(.opts, .copts) button::before{content:counter(opt, upper-alpha)}
.opts button:hover, .copts button:hover{border-color:color-mix(in srgb, var(--c-check) 50%, var(--rule))}
.copts button[aria-pressed="true"]{border-color:var(--c-check); box-shadow:none}
.copts button[aria-pressed="true"]::before{background:var(--c-check); color:#fff}
.opts button.right, .copts button.right{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, var(--sheet))}
.opts button.right::before, .copts button.right::before{background:var(--ok); color:#fff}
.opts button.wrong, .copts button.wrong{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--sheet))}
.opts button.wrong::before, .copts button.wrong::before{background:var(--bad); color:#fff}
.opts{gap:.5rem} .copts{gap:.5rem}
.qitem, .exq{border-radius:var(--radius)}
.qitem .qtext::before, .chk .cq .n, .score, .bigscore{color:var(--c-check)}

/* statistics colors: population symbols teal, groups blue/orange */
.sym[data-s="mu"], .sym[data-s="sigma"]{color:var(--pop); background:var(--pop-soft)}
.g1{color:var(--g1); font-weight:700} .g2{color:var(--g2); font-weight:700}
.examcard{border:var(--bw) solid var(--c-check)}
.entrybig{border-color:var(--accent)}
.entrybig b{color:var(--accent)}

/* self-checks start closed: one line with the count; a click opens the questions */
details.checks{padding:0; overflow:hidden}
details.checks > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem}
details.checks > summary::-webkit-details-marker{display:none}
details.checks > summary .boxtag{margin:0}
details.checks > summary .qcount{color:var(--ink-2); font-size:.9rem}
details.checks > summary::after{content:"+"; margin-inline-start:auto; font-size:1.3rem; line-height:1; color:var(--c-check); font-weight:700}
details.checks[open] > summary::after{content:"−"}
details.checks[open] > summary{border-bottom:1px solid var(--rule)}
details.checks > .chk{padding-inline:1rem}
details.checks > summary:focus-visible{outline:2px solid var(--c-check); outline-offset:-2px}
.labbar{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin:.8rem 0 1rem}
.labbar .labfilter{margin:0}
.lablang button{font:inherit; font-size:var(--step--1); border:0; background:transparent; color:var(--ink-2); padding:.3rem .75rem; cursor:pointer}
.lablang button[aria-pressed="true"]{background:var(--accent); color:#fff; font-weight:600}

/* beta */
.beta{font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:.05rem .5rem; border-radius:999px; background:var(--c-deep); color:#2a2000; margin-inline-start:-.6rem; align-self:center}
.betabox{margin:2rem 0 1rem; padding:.9rem 1.1rem; border:1px dashed var(--c-deep); border-radius:var(--radius); background:color-mix(in srgb, var(--c-deep) 8%, var(--sheet)); font-size:.95rem; line-height:1.6}
.fbbtn, .cmt{font:inherit; cursor:pointer; border:1.5px solid var(--c-deep); color:color-mix(in srgb, var(--c-deep) 70%, var(--ink)); background:var(--sheet); border-radius:999px; padding:.1rem .8rem; font-weight:600}
.fbbtn{margin-inline-start:.4rem}
.cmt{display:inline-block; font-size:.78rem; padding:.05rem .6rem; margin:-.3rem 0 .4rem; border-width:1px; opacity:.75}
.cmt:hover, .cmt:focus-visible{opacity:1}
.fbmsg{display:block; margin-top:.4rem; font-size:.85rem; color:var(--ink-2)}
.fbmsg:empty{display:none}
@media print{ .cmt, .betabox, .beta{display:none} }