/* ============================================================
   Altarifi LAB — IGCSE 0606
   lab.css — one stylesheet for every page in the series.
   Offline only: no @import, no CDN, no external URL.
   ============================================================ */

/* ---------- 1. Fonts (bundled, SIL OFL) ---------- */

@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- 2. Tokens — every token defined here first ---------- */

:root{
  --paper:#FCFBF8;  --panel:#FFFFFF;  --panel-2:#F3F4F1;
  --ink:#1B2230;    --ink-2:#3F4A5C;  --muted:#6C7686;
  --rule:#D9DEE5;   --rule-soft:#E9ECF0;

  --pen:#A6362B;    --pen-bg:#FAEEEC;  --pen-edge:#E8CFCA;
  --uni:#3B4A8C;    --uni-bg:#EDEFF8;  --uni-edge:#CFD5EC;
  --ok:#1F7A52;     --ok-bg:#E8F4EE;   --ok-edge:#BEDDCC;

  --gline:#DCE2EA;  --gaxis:#9AA5B3;
  --c-curve:#2E4CA6; --c-tan:#B23A2C;  --c-nor:#1F7A52;

  --shadow:0 1px 2px rgba(27,34,48,.05), 0 4px 14px rgba(27,34,48,.05);
  --shadow-lift:0 2px 6px rgba(27,34,48,.08), 0 12px 32px rgba(27,34,48,.08);

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s--1:0.825rem; --s-0:0.97rem; --s-1:1.12rem; --s-2:1.45rem;
  --s-3:2.05rem;   --s-4:2.7rem;

  --r:10px; --r-sm:7px; --r-lg:16px;
  --measure:34rem;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111419;  --panel:#171B22;  --panel-2:#1D222B;
    --ink:#E9EDF3;    --ink-2:#C2CAD6;  --muted:#8A94A3;
    --rule:#2B323D;   --rule-soft:#222833;

    --pen:#E89286;    --pen-bg:#2A1A17;  --pen-edge:#4B2C26;
    --uni:#9BAAE8;    --uni-bg:#191D2C;  --uni-edge:#343C5E;
    --ok:#5FC494;     --ok-bg:#132520;   --ok-edge:#27523F;

    --gline:#252B35;  --gaxis:#6A7482;
    --c-curve:#8AA2EE; --c-tan:#E89286;  --c-nor:#5FC494;

    --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
  }
}

:root[data-theme="dark"]{
  --paper:#111419;  --panel:#171B22;  --panel-2:#1D222B;
  --ink:#E9EDF3;    --ink-2:#C2CAD6;  --muted:#8A94A3;
  --rule:#2B323D;   --rule-soft:#222833;

  --pen:#E89286;    --pen-bg:#2A1A17;  --pen-edge:#4B2C26;
  --uni:#9BAAE8;    --uni-bg:#191D2C;  --uni-edge:#343C5E;
  --ok:#5FC494;     --ok-bg:#132520;   --ok-edge:#27523F;

  --gline:#252B35;  --gaxis:#6A7482;
  --c-curve:#8AA2EE; --c-tan:#E89286;  --c-nor:#5FC494;

  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.34);
}

/* ---------- 3. Base ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);          /* plain paper — no texture */
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--s-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--serif);line-height:1.22;margin:0 0 .5em;font-weight:600;letter-spacing:-.011em}
h1{font-size:var(--s-4);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--s-3);margin-top:2.4rem}
h3{font-size:var(--s-2);margin-top:1.9rem}
h4{font-size:var(--s-1);margin-top:1.4rem;font-weight:700}

p{margin:0 0 1em;max-width:var(--measure)}
ul,ol{margin:0 0 1em;padding-left:1.3em;max-width:var(--measure)}
li{margin:.3em 0}
li>ul,li>ol{margin:.3em 0}

a{color:var(--uni);text-underline-offset:2px}
a:hover{color:var(--ink)}

strong{font-weight:700;color:var(--ink)}
em{font-style:italic}

code,kbd,samp{font-family:var(--mono);font-size:.92em}

hr{border:0;border-top:1px solid var(--rule);margin:2.2rem 0}

::selection{background:var(--uni-bg);color:var(--ink)}

:focus-visible{outline:2px solid var(--uni);outline-offset:2px;border-radius:3px}

/* ---------- 4. Shell ---------- */

.wrap{max-width:62rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.2rem)}

.brandbar{
  border-bottom:1px solid var(--rule);
  background:var(--panel);
  position:sticky;top:0;z-index:40;
}
.brandbar__in{
  max-width:62rem;margin:0 auto;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  display:flex;align-items:center;gap:1rem;
}
.brandbar__mark{
  display:flex;align-items:baseline;gap:.5rem;
  text-decoration:none;color:var(--ink);
  font-family:var(--serif);font-weight:700;font-size:var(--s-1);
  letter-spacing:-.015em;
}
.brandbar__mark span{
  font-family:var(--mono);font-weight:600;font-size:var(--s--1);
  color:var(--pen);letter-spacing:.08em;
}
.brandbar__course{
  font-family:var(--mono);font-size:var(--s--1);color:var(--muted);
  letter-spacing:.04em;
}
.brandbar__sp{flex:1}

/* Shown only in answer-key mode, on screen and on paper, so a key is never
   handed out by mistake. */
.brandbar__key{display:none}
:root[data-key="on"] .brandbar__key{
  display:inline-block;
  font-family:var(--mono);font-size:var(--s--1);font-weight:700;
  letter-spacing:.1em;color:var(--pen);
  border:1px solid var(--pen-edge);background:var(--pen-bg);
  border-radius:4px;padding:.05rem .4rem;
}

.ansbox.is-key{color:var(--ok);font-weight:700;border-color:var(--ok-edge);background:var(--ok-bg)}

.btn{
  font-family:var(--sans);font-size:var(--s--1);font-weight:600;
  color:var(--ink-2);background:var(--panel);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.4rem .75rem;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;
  transition:background .15s, border-color .15s, color .15s;
  line-height:1.3;
}
.btn:hover{background:var(--panel-2);border-color:var(--muted);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--uni);border-color:var(--uni);color:#fff}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--ghost{background:transparent}

.pagehead{padding:2.6rem 0 1.2rem}
.pagehead .eyebrow{
  font-family:var(--mono);font-size:var(--s--1);color:var(--pen);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 .5rem;font-weight:600;
}
.pagehead .lede{
  font-size:var(--s-1);color:var(--ink-2);max-width:38rem;margin:.6rem 0 0;
}

.backbar{padding:1rem 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.backbar--bottom{border-top:1px solid var(--rule);margin-top:3rem;padding-top:1.5rem}

.sitefoot{
  border-top:1px solid var(--rule);background:var(--panel);
  margin-top:3.5rem;padding:2rem 0 2.6rem;
}
.sitefoot__in{max-width:62rem;margin:0 auto;padding:0 clamp(1rem,4vw,2.2rem)}
.sitefoot p{font-size:var(--s--1);color:var(--muted);max-width:42rem;margin:0 0 .6rem}
.sitefoot a{color:var(--ink-2)}
.sitefoot .foot-brand{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:var(--s-0)}
.sitefoot .foot-contact{font-family:var(--mono);font-size:var(--s--1)}

/* ---------- 5. Tabs ---------- */

.tabs{
  position:sticky;top:52px;z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  margin:1.4rem 0 0;
}
.tabs__scroll{
  display:flex;gap:.15rem;
  overflow-x:auto;overflow-y:hidden;      /* scrolls, never wraps */
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.tabs__scroll::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;scroll-snap-align:start;
  font-family:var(--sans);font-size:var(--s-0);font-weight:600;
  color:var(--muted);background:none;border:0;
  border-bottom:2px solid transparent;
  padding:.7rem .85rem;cursor:pointer;white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.tab:hover{color:var(--ink-2)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pen)}
.tab__n{font-family:var(--mono);font-size:var(--s--1);color:var(--muted);margin-right:.35rem}
.tab[aria-selected="true"] .tab__n{color:var(--pen)}

.panel{padding:.6rem 0 2rem;animation:fade .18s ease}
.panel[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* ---------- 6. Blocks ---------- */

.card{
  background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.15rem 1.25rem;margin:1.2rem 0;
  box-shadow:var(--shadow);
}

.block{
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--panel);margin:1.5rem 0;overflow:hidden;
  box-shadow:var(--shadow);
}
.block__head{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem 1.1rem;background:var(--panel-2);
  border-bottom:1px solid var(--rule);
}
.block__kind{
  font-family:var(--mono);font-size:var(--s--1);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.block__title{font-family:var(--serif);font-weight:600;font-size:var(--s-0);color:var(--ink)}
.block__body{padding:1.1rem 1.25rem}
.block__body>:first-child{margin-top:0}
.block__body>:last-child{margin-bottom:0}
.block__sp{flex:1}

.block--worked .block__kind{color:var(--ink-2)}
.block--guided{border-color:var(--uni-edge)}
.block--guided .block__head{background:var(--uni-bg);border-bottom-color:var(--uni-edge)}
.block--guided .block__kind{color:var(--uni)}
.block--drill{border-color:var(--rule)}
.block--exam .block__head{background:var(--panel-2)}
.block--hunt{border-color:var(--pen-edge)}
.block--hunt .block__head{background:var(--pen-bg);border-bottom-color:var(--pen-edge)}
.block--hunt .block__kind{color:var(--pen)}

/* marks note — red, short, never an essay */
.marks{
  border-left:3px solid var(--pen);
  background:var(--pen-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:.75rem 1rem;margin:1.2rem 0;
  max-width:var(--measure);
}
.marks__label{
  font-family:var(--mono);font-size:var(--s--1);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pen);
  display:block;margin-bottom:.15rem;
}
.marks p{margin:0;color:var(--ink-2);font-size:var(--s-0)}
.marks p+p{margin-top:.5rem}

/* worked solution lines */
.soln{margin:.4rem 0 1rem;padding:0;list-style:none;max-width:var(--measure)}
.soln li{
  margin:.5rem 0;padding-left:0;
  display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:baseline;
}
.soln .why{
  font-size:var(--s--1);color:var(--muted);font-style:italic;
  text-align:right;max-width:16rem;line-height:1.4;
}

/* colour coding — shared with the graphs, §6.4 */
.c-curve{color:var(--c-curve);font-weight:600}
.c-tan{color:var(--c-tan);font-weight:600}
.c-nor{color:var(--c-nor);font-weight:600}

.key{display:flex;gap:1.1rem;flex-wrap:wrap;margin:.7rem 0 0;padding:0;list-style:none}
.key li{display:flex;align-items:center;gap:.4rem;font-size:var(--s--1);font-family:var(--mono);color:var(--ink-2);margin:0}
.key i{width:16px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}
.key .k-curve{background:var(--c-curve)}
.key .k-tan{background:var(--c-tan)}
.key .k-nor{background:var(--c-nor)}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:var(--s-0)}
.tbl th,.tbl td{border:1px solid var(--rule);padding:.5rem .7rem;text-align:left;vertical-align:middle}
.tbl th{background:var(--panel-2);font-family:var(--sans);font-weight:600;font-size:var(--s--1);letter-spacing:.02em}
.tbl tbody tr:nth-child(even){background:var(--panel-2)}
.tbl--center td,.tbl--center th{text-align:center}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* on a phone, tighter cells so a table only scrolls when it truly must */
@media (max-width:480px){.tbl th,.tbl td{padding:.45rem .4rem}}

/* ---------- 7. Interactive lab ---------- */

.lab{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--panel);margin:1.6rem 0;overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.lab__head{
  padding:.7rem 1.15rem;background:var(--panel-2);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.lab__grid{display:grid;grid-template-columns:1fr 15rem;gap:0}
.lab__stage{padding:1.1rem;display:flex;align-items:center;justify-content:center;min-width:0}
.lab__side{
  border-left:1px solid var(--rule);padding:1.1rem;
  background:var(--panel-2);display:flex;flex-direction:column;gap:.9rem;
}
.lab__note{font-size:var(--s--1);color:var(--muted);margin:0;line-height:1.5}

.ctrl label{
  display:block;font-family:var(--mono);font-size:var(--s--1);
  color:var(--ink-2);margin-bottom:.3rem;font-weight:600;
}
.ctrl input[type=range]{width:100%;accent-color:var(--c-tan);cursor:pointer}

.readout{
  background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:.55rem .7rem;
}
.readout__k{
  font-family:var(--mono);font-size:var(--s--1);color:var(--muted);
  display:block;letter-spacing:.03em;
}
.readout__v{
  font-family:var(--mono);font-size:var(--s-1);font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.readout--tan .readout__v{color:var(--c-tan)}
.readout--nor .readout__v{color:var(--c-nor)}
.readout--curve .readout__v{color:var(--c-curve)}

.btnrow{display:flex;gap:.45rem;flex-wrap:wrap}

/* graphs */
/* Graphs are drawn at a real pixels-per-unit scale, so cap the display
   width — blowing an SVG up magnifies its labels along with everything else. */
.graph{width:100%;height:auto;display:block;max-width:min(100%,34rem);margin:0 auto}
.graph .gl{stroke:var(--gline);stroke-width:1;shape-rendering:crispEdges}
.graph .gl--major{stroke:var(--gaxis);stroke-opacity:.35}
.graph .ax{stroke:var(--gaxis);stroke-width:1.6;shape-rendering:crispEdges}
.graph .axlab{fill:var(--ink-2);font-family:var(--mono);font-size:15px;font-style:italic}
.graph .ticklab{fill:var(--muted);font-family:var(--mono);font-size:13px}
.graph .curve{fill:none;stroke:var(--c-curve);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.graph .tan{fill:none;stroke:var(--c-tan);stroke-width:2.6;stroke-linecap:round}
.graph .tan--soft{stroke-width:2;opacity:.45}
.graph .chord{fill:none;stroke:var(--c-tan);stroke-width:2.6;stroke-dasharray:8 5;stroke-linecap:round}
.graph .chord--thick{stroke:var(--c-nor);stroke-width:7;stroke-dasharray:none;stroke-linecap:butt;opacity:.8}
.graph .nor{fill:none;stroke:var(--c-nor);stroke-width:2.2;stroke-linecap:round}
.graph .pt{fill:var(--c-curve);stroke:var(--panel);stroke-width:2}
.graph .pt--tan{fill:var(--c-tan)}
.graph .pt--nor{fill:var(--c-nor)}
.graph .pt--ghost{fill:var(--panel);stroke:var(--c-tan);stroke-width:2.5;stroke-dasharray:3 2}
.graph .ptlab{font-family:var(--mono);font-size:12px;font-weight:600}
.graph .helper{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.graph .runrise{stroke:var(--c-tan);stroke-width:1.4;stroke-dasharray:4 3;fill:none;opacity:.85}

/* sign-of-the-derivative strip */
.graph .signpos{stroke:var(--c-nor);stroke-width:7;stroke-linecap:butt}
.graph .signglyph{fill:var(--panel);font-family:var(--mono);font-size:13px;font-weight:700}
.graph .signneg{stroke:var(--c-tan);stroke-width:7;stroke-linecap:butt}

/* ---- pictures of real objects (scene): no axes, still true to scale ---- */
.diagram .face{fill:var(--panel-2);stroke:var(--ink-2);stroke-width:1.6;stroke-linejoin:round}
.diagram .face--base{fill:var(--panel-2);stroke:var(--ink-2)}
.diagram .face--curve{fill:var(--c-curve);fill-opacity:.28;stroke:var(--c-curve);stroke-width:1.6}
.diagram .face--tan{fill:var(--c-tan);fill-opacity:.28;stroke:var(--c-tan);stroke-width:1.6}
.diagram .face--nor{fill:var(--c-nor);fill-opacity:.45;stroke:var(--c-nor);stroke-width:1.6}
.diagram .face--wall1{fill:var(--c-curve);fill-opacity:.34;stroke:var(--ink-2);stroke-width:1.6}
.diagram .face--wall2{fill:var(--c-curve);fill-opacity:.28;stroke:var(--ink-2);stroke-width:1.6}
.diagram .rim{fill:none;stroke:var(--c-tan);stroke-width:2.4;stroke-linejoin:round}
.diagram .edge{stroke:var(--ink-2);stroke-width:1.6;fill:none;stroke-linecap:round}
.diagram .edge--hidden{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1.2}
.diagram .ground{stroke:var(--rule);stroke-width:2;stroke-dasharray:7 5}
.diagram .wheelrim{fill:none;stroke:var(--ink-2);stroke-width:3}
.diagram .spoke{stroke:var(--rule);stroke-width:1.1}
.diagram .sprocket{fill:var(--c-nor);fill-opacity:.3;stroke:var(--c-nor);stroke-width:2}
.diagram .chainring{fill:var(--c-curve);fill-opacity:.22;stroke:var(--c-curve);stroke-width:2.4}
.diagram .chain-run{stroke:var(--c-tan);stroke-width:2.4;stroke-linecap:round}
.diagram .radius{stroke:var(--c-curve);stroke-width:2;stroke-dasharray:5 4}
.diagram .crank{stroke:var(--c-tan);stroke-width:3;stroke-linecap:round}
.diagram .arrowhead{fill:var(--ink-2);stroke:none}
.diagram .arrowhead--up{fill:var(--c-tan)}
.diagram .dimlab{fill:var(--ink-2);font-family:var(--mono);font-size:13px}
.diagram .arealab{fill:var(--muted);font-family:var(--mono);font-size:15px;font-style:italic}

/* ---- integration: shaded regions and approximating strips ---- */
.graph .region{fill:var(--c-curve);fill-opacity:.17;stroke:none}
.graph .strip rect{fill:var(--c-tan);fill-opacity:.20;stroke:var(--c-tan);stroke-width:.8;stroke-opacity:.65}
.graph .curve--ghost{stroke:var(--c-curve);stroke-width:1.4;opacity:.28}

.graph .balloon{fill:var(--c-curve);fill-opacity:.16;stroke:var(--c-curve);stroke-width:2.6}

/* a one-dimensional meter — for a quantity that has no honest second axis */
.meter{display:block}
.meter__track{
  position:relative;height:12px;margin:.3rem 0 .25rem;
  background:var(--panel);border:1px solid var(--rule);border-radius:6px;overflow:hidden;
}
.meter__fill{position:absolute;left:0;top:0;bottom:0;background:var(--c-tan);opacity:.75;transition:width .12s linear}
.meter__mark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--c-nor)}
.meter__cap{font-family:var(--mono);font-size:var(--s--1);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- 8. Practice ---------- */

/* guided steps */
.gstep{
  display:grid;grid-template-columns:1.7rem 1fr;gap:.7rem;
  padding:.75rem 0;border-top:1px dashed var(--rule);
}
.gstep:first-of-type{border-top:0;padding-top:.2rem}
.gstep__n{
  font-family:var(--mono);font-size:var(--s--1);font-weight:700;color:var(--uni);
  background:var(--uni-bg);border-radius:50%;
  width:1.7rem;height:1.7rem;display:flex;align-items:center;justify-content:center;
}
.gstep__body>:first-child{margin-top:0}
.gstep__body>:last-child{margin-bottom:0}
.gstep__ask{margin:0 0 .55rem;color:var(--ink-2)}
.gstep__row{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}

.ansbox{
  font-family:var(--mono);font-size:var(--s-0);color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.4rem .6rem;width:9rem;max-width:100%;
}
.ansbox:focus{outline:2px solid var(--uni);outline-offset:1px;border-color:var(--uni)}
.ansbox.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.ansbox.is-no{border-color:var(--pen);background:var(--pen-bg)}
.ansbox--wide{width:14rem}

.verdict{font-family:var(--mono);font-size:var(--s--1);font-weight:600;min-height:1.2em}
.verdict.is-ok{color:var(--ok)}
.verdict.is-no{color:var(--pen)}

.hintbox{
  margin:.55rem 0 0;padding:.55rem .75rem;
  background:var(--uni-bg);border:1px solid var(--uni-edge);border-radius:var(--r-sm);
  font-size:var(--s--1);color:var(--ink-2);max-width:var(--measure);
}
.hintbox[hidden]{display:none}
.hintbox p{margin:0;font-size:var(--s--1)}

/* ruled space for an answer in words — the two outcomes the marker cannot
   check numerically (syllabus 1.1 "explain why it is a function" and 1.5
   "explain why it has no inverse"). Deliberately not an .ansbox: nothing
   here is marked by the page, and the page does not pretend otherwise. */
.writeon{margin:.7rem 0 .2rem;max-width:var(--measure)}
.writeon .rule{height:1.85rem;border-bottom:1px solid var(--rule)}

/* drills */
.drill__bar{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.6rem 1.25rem;background:var(--panel-2);border-bottom:1px solid var(--rule);
}
.drill__score{font-family:var(--mono);font-size:var(--s--1);color:var(--ink-2);font-variant-numeric:tabular-nums}
.drill__score b{color:var(--ok)}
.drill__list{list-style:none;margin:0;padding:.2rem 1.25rem .6rem;max-width:none}
.drill__item{
  display:grid;grid-template-columns:1.9rem 1fr auto;gap:.7rem;align-items:center;
  padding:.6rem 0;border-top:1px solid var(--rule-soft);margin:0;
}
.drill__item:first-child{border-top:0}
.drill__n{font-family:var(--mono);font-size:var(--s--1);color:var(--muted);font-variant-numeric:tabular-nums}
.drill__q{min-width:0;overflow-wrap:anywhere}
.drill__a{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.drill__a .ansbox{width:7.5rem}
/* authored fluency sets — written in the page, not generated.
   Numbered by the browser, so the questions stay readable in the source. */
.fset{list-style:none;margin:0;padding:.2rem 1.25rem .6rem;max-width:none;counter-reset:fq}
.fset .fq{
  display:grid;grid-template-columns:1.9rem 1fr auto;gap:.7rem;align-items:center;
  padding:.6rem 0;border-top:1px solid var(--rule-soft);margin:0;
  counter-increment:fq;
}
.fset .fq:first-child{border-top:0}
/* the li is a grid, so it has no list marker of its own — number it here */
.fset .fq::before{
  content:counter(fq) ".";
  font-family:var(--mono);font-size:var(--s--1);color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.fq__body{min-width:0;overflow-wrap:anywhere}
.fq__a{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}
.fq__a .ansbox{width:8rem}
.fq__a .ansbox--wide{width:13rem}
.fq__body mjx-container[display="true"]{margin:0!important}

.drill__mark{font-family:var(--mono);font-size:var(--s-1);font-weight:700;width:1.2em;text-align:center}
.drill__mark.is-ok{color:var(--ok)}
.drill__mark.is-no{color:var(--pen)}

/* multiple choice */
.mcq{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.4rem;max-width:var(--measure)}
.mcq li{margin:0}
.mcq button{
  width:100%;text-align:left;cursor:pointer;
  font-family:var(--sans);font-size:var(--s-0);color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:.5rem .7rem;display:flex;gap:.6rem;align-items:center;
  transition:border-color .15s, background .15s;
}
.mcq button:hover:not(:disabled){border-color:var(--uni);background:var(--uni-bg)}
.mcq button:disabled{cursor:default}
.mcq button .lt{
  font-family:var(--mono);font-size:var(--s--1);font-weight:700;color:var(--muted);
  flex:0 0 auto;width:1.3rem;
}
.mcq button.is-ok{border-color:var(--ok);background:var(--ok-bg)}
.mcq button.is-ok .lt{color:var(--ok)}
.mcq button.is-no{border-color:var(--pen);background:var(--pen-bg)}
.mcq button.is-no .lt{color:var(--pen)}
.mcq__why{
  margin:.5rem 0 0;font-size:var(--s--1);color:var(--ink-2);
  padding:.5rem .7rem;border-radius:var(--r-sm);background:var(--panel-2);
  border:1px solid var(--rule);
}
.mcq__why[hidden]{display:none}

/* exam-style questions */
.qcard{margin:1.1rem 0;padding:0}
.qcard__head{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.5rem}
.qcard__n{font-family:var(--mono);font-weight:700;color:var(--ink-2);font-size:var(--s-0)}
.marksTag{
  font-family:var(--mono);font-size:var(--s--1);color:var(--muted);
  white-space:nowrap;margin-left:auto;
}
.qparts{list-style:none;margin:.5rem 0 0;padding:0}
.qparts>li{
  display:grid;grid-template-columns:2rem 1fr auto;gap:.6rem;
  padding:.5rem 0;border-top:1px dashed var(--rule);align-items:baseline;
}
.qparts>li:first-child{border-top:0}
.qparts .pl{font-family:var(--mono);font-size:var(--s-0);color:var(--muted)}

.reveal{margin:.7rem 0 0}
.reveal__body{
  margin-top:.6rem;padding:.85rem 1rem;
  background:var(--ok-bg);border:1px solid var(--ok-edge);border-radius:var(--r-sm);
}
.reveal__body[hidden]{display:none}
.reveal__body>:first-child{margin-top:0}
.reveal__body>:last-child{margin-bottom:0}
.reveal__body .marks{background:var(--panel);border-left-color:var(--pen)}

/* error hunt */
.hunt__lines{list-style:none;margin:0;padding:0;counter-reset:hl}
.hunt__lines li{
  display:grid;grid-template-columns:2.4rem 1fr;gap:.7rem;align-items:baseline;
  padding:.45rem .5rem;margin:0;border-radius:var(--r-sm);
  border:1px solid transparent;
}
.hunt__lines li .ln{
  font-family:var(--mono);font-size:var(--s--1);color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.hunt__lines.is-live li{cursor:pointer;transition:background .12s, border-color .12s}
.hunt__lines.is-live li:hover{background:var(--panel-2);border-color:var(--rule)}
.hunt__lines li.is-wrong{background:var(--pen-bg);border-color:var(--pen-edge)}
.hunt__lines li.is-wrong .ln{color:var(--pen);font-weight:700}
.hunt__lines li.is-right{background:var(--ok-bg);border-color:var(--ok-edge)}

.tag{
  display:inline-block;font-family:var(--mono);font-size:var(--s--1);
  padding:.1rem .45rem;border-radius:4px;letter-spacing:.03em;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--rule);
}

/* ---------- 9. Hub cards ---------- */

.cards{
  display:grid;gap:.85rem;margin:1.4rem 0;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}
.lcard{
  display:block;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:1rem 1.1rem;box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.lcard:hover{border-color:var(--uni);box-shadow:var(--shadow-lift);transform:translateY(-2px);color:inherit}
.lcard__n{
  font-family:var(--mono);font-size:var(--s--1);font-weight:700;
  color:var(--pen);letter-spacing:.06em;
}
.lcard__t{font-family:var(--serif);font-size:var(--s-1);font-weight:600;margin:.2rem 0 .3rem;color:var(--ink)}
.lcard__d{font-size:var(--s--1);color:var(--muted);margin:0;line-height:1.5}
.lcard--locked{cursor:default;opacity:.7}
.lcard--locked:hover{border-color:var(--rule);box-shadow:var(--shadow);transform:none}
.lcard__lock{
  display:inline-block;margin-top:.6rem;padding:.12rem .6rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule);border-radius:999px;
}

.notecols{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.2rem 0}
.notecols .card{margin:0}
.notecols h4{margin-top:0}
.notecols ul{margin-bottom:0}

/* ---------- 10. MathJax fit ---------- */

/* no scrollbars on formulas: inline maths never scrolls; a display formula
   scrolls sideways only if it is genuinely wider than its column */
mjx-container{max-width:100%}
mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden}
mjx-container[display="true"]{margin:.85em 0!important;text-align:left!important}
mjx-container[display="true"] svg{max-width:100%;height:auto}
.drill__q mjx-container[display="true"]{margin:0!important}

/* ---------- 11. Utilities ---------- */

.u-muted{color:var(--muted)}
.u-mono{font-family:var(--mono)}
.u-small{font-size:var(--s--1)}
.u-nowrap{white-space:nowrap}
.u-center{text-align:center}
.u-wide{max-width:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.printonly{display:none}

/* ---------- 12. Responsive ---------- */

@media (max-width:780px){
  .lab__grid{grid-template-columns:1fr}                 /* collapses to one column */
  .lab__side{
    border-left:0;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:start;   /* readouts two-up */
  }
  .lab__side .ctrl,.lab__side .lab__note,.lab__side .btnrow{grid-column:1/-1}
  h1{font-size:2.2rem}
  h2{font-size:1.7rem}
  .tabs{top:48px}
}

@media (max-width:520px){
  .gstep{grid-template-columns:1fr;gap:.35rem}          /* guided steps stack */
  .gstep__n{display:none}
  .drill__item{grid-template-columns:1.6rem 1fr;row-gap:.35rem}
  .drill__a{grid-column:2/-1;justify-content:flex-start}
  .fset .fq{grid-template-columns:1.6rem 1fr;row-gap:.35rem}
  .fq__a{grid-column:2/-1;justify-content:flex-start}
  .fq__a .ansbox--wide{width:100%;max-width:13rem}
  .qparts>li{grid-template-columns:1.7rem 1fr;row-gap:.2rem}
  .qparts>li .marksTag{grid-column:2/-1;margin-left:0}
  .soln li{grid-template-columns:1fr}
  .soln .why{text-align:left;max-width:none;margin-top:-.2rem}
  .brandbar__course{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================
   13. PRINT — A4 portrait worksheet
   ============================================================ */

@page{size:A4 portrait;margin:28mm 20mm 30mm}

@media print{

  :root{
    --paper:#fff; --panel:#fff; --panel-2:#F5F6F4;
    --ink:#000; --ink-2:#222; --muted:#555;
    --rule:#B9C0C9; --rule-soft:#D8DDE3;
    --shadow:none; --shadow-lift:none;
  }

  *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;          /* keeps the colour coding */
    box-shadow:none!important;
  }

  html,body{background:#fff;font-size:10.3pt;line-height:1.38}
  body{margin:0}
  .wrap{max-width:none;padding:0}

  /* chrome off */
  .tabs, .backbar, .brandbar__actions, .noprint,
  .btnrow, .ctrl, .lab__side, .drill__bar,
  button, input[type=range], .mcq__why[hidden]{display:none!important}
  /* …but the multiple-choice options ARE the question, so they must print. */
  .mcq button{display:flex!important}
  .printonly{display:block}

  /* Answer key: the filled-in values print, in the "correct" green. */
  :root[data-key="on"] .ansbox{
    color:var(--ok)!important;font-weight:700;
    border-bottom-color:#000!important;
  }
  :root[data-key="on"] .mcq button.is-ok{border:1.4pt solid var(--ok)!important}
  :root[data-key="on"] .hunt__lines li.is-wrong{
    background:#FBF2F0!important;border:.7pt solid var(--pen)!important;
  }

  /* brand: a quiet line at the top of page 1 only */
  .brandbar{
    position:static;border:0;border-bottom:.6pt solid #000;
    padding:0 0 2mm;margin:0 0 5mm;background:none;
  }
  .brandbar__in{padding:0;max-width:none}
  .brandbar__mark{font-size:11pt}
  .brandbar__course{font-size:8pt;display:inline}

  .pagehead{padding:0 0 4mm;break-after:avoid;page-break-after:avoid}
  h1{font-size:19pt}
  h2{font-size:14pt;break-after:avoid;page-break-after:avoid}
  h3{font-size:12pt;break-after:avoid;page-break-after:avoid}
  h4{font-size:10.5pt;break-after:avoid;page-break-after:avoid}
  p,li{orphans:3;widows:3}

  /* Every panel prints, in order, each headed by its tab name.

     They used to start on a fresh page each. That guaranteed a short page
     wherever a tab ended early — which is most of them — so the sections
     now flow and only the heading is protected from being orphaned. */
  .panel{display:block!important;padding:0;animation:none}
  .panel[hidden]{display:block!important}
  .panel+.panel{margin-top:6mm}
  .panel::before{
    content:attr(data-title);
    display:block;font-family:var(--serif);font-weight:700;font-size:14pt;
    color:#000;border-bottom:.6pt solid #000;
    padding-bottom:1.2mm;margin:0 0 3mm;
    break-after:avoid;page-break-after:avoid;
    break-inside:avoid;page-break-inside:avoid;
  }

  /* Keep the small atoms whole — a question, a step, a marks note. Large
     containers are allowed to flow across a page break: forcing a whole
     block onto the next page is what leaves half-empty pages. */
  .marks,.qcard,.gstep,.drill__item,.fset .fq,.hunt__lines li,.lcard,.lab{
    break-inside:avoid;page-break-inside:avoid;
  }
  .block,.card,.reveal__body{break-inside:auto;page-break-inside:auto}
  /* In answer-key mode a qcard carries its revealed solution and can grow
     taller than a page. Held whole it forces a break and leaves a hole in
     the page before it, which the page-fill check catches. Let it flow, but
     keep the stem and the part list with the question number. */
  :root[data-key="on"] .qcard{break-inside:auto;page-break-inside:auto}
  :root[data-key="on"] .qcard__head,
  :root[data-key="on"] .qcard>p{break-after:avoid;page-break-after:avoid}
  :root[data-key="on"] .qparts{break-inside:avoid;page-break-inside:avoid}
  .block__head,.lab__head{break-after:avoid;page-break-after:avoid}
  .soln li,.qparts>li,.key li{break-inside:avoid;page-break-inside:avoid}
  .key{break-inside:avoid;page-break-inside:avoid}

  .block,.card,.lab{border:.7pt solid #999;border-radius:0;margin:2.4mm 0}
  .block__head,.lab__head{background:#F0F1EF!important;border-bottom:.7pt solid #999;padding:1.1mm 3mm}
  .block__body{padding:2.2mm 3mm}
  .block__body>p:last-child,.card>p:last-child{margin-bottom:0}
  p{margin:0 0 .7em}
  h2{margin-top:4mm}h3{margin-top:3.5mm}h4{margin-top:2.5mm}
  .marks{border-left:1.6pt solid var(--pen);background:#FBF2F0!important;padding:1.6mm 3mm;margin:2.2mm 0}

  /* graphs: about 118 mm wide, centred */
  .lab__grid{display:block}
  .lab__stage{display:block;padding:2mm 0}
  .graph{width:96mm!important;max-width:96mm!important;max-height:86mm;height:auto;margin:0 auto;display:block}

  /* guided practice prints as blank writable lines */
  .ansbox{
    border:0!important;border-bottom:.8pt solid #000!important;border-radius:0!important;
    background:none!important;color:transparent!important;
    width:34mm;padding:0 0 .4mm;
  }
  .ansbox--wide{width:52mm}
  /* the prompt is on-screen help; on paper the box is a line to write on */
  .ansbox::placeholder{color:transparent!important;opacity:0!important}
  .drill__a .ansbox{width:30mm}
  .verdict,.drill__mark{display:none!important}
  .hintbox{display:none!important}

  .writeon{margin:1.5mm 0 1mm;break-inside:avoid;page-break-inside:avoid}
  .writeon .rule{height:8mm;border-bottom:.5pt solid #000}

  .drill__list{padding:1mm 3mm 2mm}
  .fset{padding:1mm 3mm 2mm}
  .fq__a .ansbox{width:30mm}
  .fq__a .ansbox--wide{width:52mm}

  .mcq button{border:.7pt solid #999!important;background:none!important;padding:1mm 2mm}
  .mcq button.is-ok,.mcq button.is-no{background:none!important;border-color:#999!important}

  /* solutions print only if the teacher revealed them on screen */
  .reveal__body[hidden]{display:none!important}
  .reveal__body{background:#F3F7F4!important;border:.7pt solid #9BBFAA}

  .hunt__lines li{border:0}
  .hunt__lines li.is-wrong,.hunt__lines li.is-right{background:none!important;border:0}

  .tbl{font-size:9.5pt}
  .tbl th{background:#F0F1EF!important}
  .tbl tbody tr:nth-child(even){background:#F7F8F6!important}

  .cards{grid-template-columns:1fr 1fr;gap:3mm}
  .lcard{border:.7pt solid #999;padding:2.5mm 3mm}

  a{color:#000;text-decoration:none}

  .sitefoot{
    border-top:.6pt solid #000;margin-top:6mm;padding:2mm 0 0;background:none;
    break-inside:avoid;page-break-inside:avoid;
  }
  .sitefoot__in{padding:0;max-width:none}
  .sitefoot p{font-size:7.5pt;line-height:1.35}
}