/* curriculum.css — shared shell for all Grade 6 CPA unit files.
   Edit here once; every unit picks it up. */
/* Self-hosted fonts (Lexend, Fraunces) - SIL Open Font License 1.1, see fonts/OFL.txt.
   Served from this site so students' browsers make no third-party requests. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/lexend-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  /* Budapest palette (David, 2026-10-16), built in oklch; each -text twin passes
     4.5:1 as text. Bare hues are for fills and lines. */
  --ink:   oklch(0.25 0.05 255);   /* #102239 */
  --ink-2: oklch(0.34 0.07 252);
  --ink-3: oklch(0.44 0.07 250);
  --header-bg: oklch(0.25 0.05 255);
  --teal:  oklch(0.52 0.09 182);   /* fills and lines */
  --teal-text: oklch(0.45 0.08 182);  /* 6.4:1 on paper */
  --teal-pale: oklch(0.93 0.035 182);
  --amber: oklch(0.75 0.13 72);    /* fills and lines only */
  --amber-dk: oklch(0.50 0.10 68); /* text-strength amber: 6.0:1 on card */
  --amber-pale: oklch(0.94 0.04 80);
  --peri:  oklch(0.51 0.09 275);
  --peri-text: oklch(0.45 0.08 275);  /* 7.4:1 on card; white on it 7.6:1 */
  --peri-pale: oklch(0.93 0.025 275);
  --rose:  oklch(0.52 0.14 36);    /* was a pink; now Zsolnay terracotta */
  --rose-text: oklch(0.45 0.13 36);
  --rose-pale: oklch(0.94 0.03 45);
  --paper: oklch(0.962 0.012 85);  /* warm limestone, #F6F2EA */
  --card:  oklch(0.992 0.005 85);
  --line:  oklch(0.86 0.018 80);
  --text:  oklch(0.27 0.04 255);
  --muted: oklch(0.48 0.035 250);  /* 5.8:1 on paper */
  --focus: oklch(0.55 0.11 68);    /* 4.5:1 on paper; the old amber ring was 2:1 */
  --sans:"Lexend",system-ui,sans-serif;
  --serif:"Fraunces",Georgia,serif;
  --mono:"Lexend",ui-monospace,monospace;
  /* bar-model diagram palette: one hue per quantity in a comparison.
     bar-1/bar-5 double as the brand teal/amber; bar-2/3/4 are new.
     Reserved for "which quantity is which" in diagrams only — never
     reused for correct/incorrect feedback (that stays teal/rose). */
  --bar-1:#1F8A7D; --bar-2:#2E7FB8; --bar-3:#7B5EC7; --bar-4:#D9673F; --bar-5:#E4A03C;
  --petal: 22px 6px 22px 6px;
  --petal-sm: 14px 4px 14px 4px;
  --lift: 0 2px 4px oklch(0.25 0.05 255 / .06), 0 18px 36px -22px oklch(0.25 0.05 255 / .45);
  --lift-hi: 0 4px 8px oklch(0.25 0.05 255 / .08), 0 30px 48px -24px oklch(0.25 0.05 255 / .55);
  --ease: cubic-bezier(.2,.75,.2,1);

  /* Ornament, drawn as masks so they take any colour */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.075'%3E%3Ccircle r='28'/%3E%3Ccircle cx='56' r='28'/%3E%3Ccircle cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='1.7' fill='%23E09F45' fill-opacity='.4'/%3E%3Ccircle r='1.7' fill='%23E09F45' fill-opacity='.4'/%3E%3Ccircle cx='56' cy='56' r='1.7' fill='%23E09F45' fill-opacity='.4'/%3E%3Ccircle cx='56' r='1.7' fill='%23E09F45' fill-opacity='.4'/%3E%3Ccircle cy='56' r='1.7' fill='%23E09F45' fill-opacity='.4'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --wave-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C150 4 300 40 450 22S750 4 900 22s225 18 300 0V40H0Z'/%3E%3C/svg%3E");
  --wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22C150 4 300 40 450 22S750 4 900 22s225 18 300 0' fill='none' stroke='%23000' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 8h44M86 8h44'/%3E%3Ccircle cx='66' cy='8' r='6.5'/%3E%3Cpath d='M59.5 8a6.5 6.5 0 0 1 13 0M59.5 8a6.5 6.5 0 0 0 13 0' transform='rotate(90 66 8)'/%3E%3Cpath d='M46 8q6-6 10 0M86 8q-6-6-10 0'/%3E%3C/g%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M3 3l10 11L3 25' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* The dark frames (headers, the hub's access band): grain, lamplight and the
     compass-rosette lattice, the overlapping circles under Zsolnay tile */
  --frame-image: var(--grain),
    radial-gradient(120% 90% at 85% -10%, oklch(0.42 0.08 240 / .55), transparent 60%),
    radial-gradient(70% 70% at 0% 110%, oklch(0.45 0.08 182 / .28), transparent 65%),
    var(--rosette);
  --frame-size: 160px 160px, auto, auto, 56px 56px;
}
/* dark theme — toggled via [data-theme] on <html>, see theme-toggle.js.
   Header stays a dark band in both themes; only body chrome inverts. */
:root[data-theme="dark"]{
  /* Night on the Danube: deep navy paper, warm limestone text */
  --ink:   oklch(0.95 0.012 85);
  --ink-2: oklch(0.86 0.03 245);
  --ink-3: oklch(0.76 0.04 245);
  --header-bg: oklch(0.15 0.03 255);
  --teal:  oklch(0.72 0.11 182);
  --teal-text: oklch(0.82 0.10 180);  /* 10:1 on card */
  --teal-pale: oklch(0.30 0.04 182);
  --amber: oklch(0.80 0.12 75);
  --amber-dk: oklch(0.84 0.10 78);
  --amber-pale: oklch(0.30 0.04 75);
  --peri:  oklch(0.72 0.08 275);
  --peri-text: oklch(0.84 0.06 275);
  --peri-pale: oklch(0.28 0.04 275);
  --rose:  oklch(0.70 0.12 40);
  --rose-text: oklch(0.80 0.08 48);   /* apricot-terracotta, not pink */
  --rose-pale: oklch(0.29 0.05 38);
  --paper: oklch(0.19 0.02 250);
  --card:  oklch(0.235 0.022 250);
  --line:  oklch(0.36 0.025 250);
  --text:  oklch(0.92 0.012 85);    /* 13:1 on card */
  --muted: oklch(0.74 0.025 250);   /* 7.2:1 on card */
  --focus: oklch(0.80 0.12 75);
  --lift: 0 1px 0 oklch(1 0 0 / .05) inset, 0 18px 36px -20px oklch(0 0 0 / .7);
  --lift-hi: 0 1px 0 oklch(1 0 0 / .07) inset, 0 30px 48px -22px oklch(0 0 0 / .8);
  --bar-1:#3FBFA9; --bar-2:#5FA8DB; --bar-3:#A98CE8; --bar-4:#E8926B; --bar-5:#E9AD55;
}
/* Interactive manipulatives draw with hardcoded hex in raw SVG (7 tool
   files, predating dark mode) — theirs is the one part of the page
   that stays a light "paper" surface in dark mode rather than trying
   to re-theme hand-drawn diagrams. Pinning the tokens here (the light theme's
   values) means every var()-based label inside a .tool card matches that
   paper surface too, and tools look the same in both themes. */
:root[data-theme="dark"] .tool{
  --ink:   oklch(0.25 0.05 255); --ink-2: oklch(0.34 0.07 252); --ink-3: oklch(0.44 0.07 250);
  --teal:  oklch(0.52 0.09 182); --teal-pale: oklch(0.93 0.035 182); --teal-text: oklch(0.45 0.08 182);
  --amber: oklch(0.75 0.13 72);  --amber-dk: oklch(0.50 0.10 68);   --amber-pale: oklch(0.94 0.04 80);
  --peri:  oklch(0.51 0.09 275); --peri-pale: oklch(0.93 0.025 275); --peri-text: oklch(0.45 0.08 275);
  --rose:  oklch(0.52 0.14 36);  --rose-pale: oklch(0.94 0.03 45);   --rose-text: oklch(0.45 0.13 36);
  --paper: oklch(0.962 0.012 85); --card: oklch(0.992 0.005 85); --line: oklch(0.86 0.018 80);
  --text:  oklch(0.27 0.04 255); --muted: oklch(0.48 0.035 250);
  --bar-1:#1F8A7D; --bar-2:#2E7FB8; --bar-3:#7B5EC7; --bar-4:#D9673F; --bar-5:#E4A03C;
}
/* Tools stay a light paper card in dark mode ; give their
   focus ring the dark amber that shows on white */
:root[data-theme="dark"] .tool{--focus: oklch(0.55 0.11 68)}
/* ...and their own text colour: without it, unstyled text in a tool inherits
   the page's light dark-mode text onto the white card (1.3:1). */
:root[data-theme="dark"] .tool{color:var(--text)}
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:3px}
a{color:var(--ink-2)}

/* header */
.top{background:var(--header-bg);color:#fff;padding:34px 0 0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.back{font-family:var(--sans);font-size:1.2rem;color:#0F2338;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  background:#fff;border:2px solid #fff;border-radius:999px;padding:12px 24px 12px 20px;font-weight:700}
.back:hover{background:var(--amber);border-color:var(--amber);color:#2B1B04}
.theme-toggle{font-family:var(--sans);font-size:1.2rem;color:#fff;font-weight:700;
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;cursor:pointer;
  background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.7);border-radius:999px;padding:12px 24px}
.theme-toggle:hover{background:rgba(255,255,255,.2);border-color:#fff}
.top h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 8px;letter-spacing:-.015em;line-height:1.06}
.top .sub{color:#B8CBDC;margin:0 0 20px;max-width:66ch;font-size:1rem}
.facts{display:flex;flex-wrap:wrap;gap:22px;padding-bottom:22px;font-family:var(--mono);font-size:.84rem;color:#9FB6CC}
.facts b{color:#fff;font-weight:600;font-family:var(--sans)}
/* day nav */
.daynav{display:flex;gap:0;overflow-x:auto;border-top:1px solid rgba(255,255,255,.14)}
.daynav button{
  flex:1;min-width:108px;overflow-wrap:anywhere;background:transparent;border:0;border-bottom:4px solid transparent;
  color:#9FB6CC;font-family:var(--sans);font-size:.8rem;font-weight:600;padding:13px 6px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;align-items:center;line-height:1.15;transition:color .15s
}
.daynav button span.d{font-family:var(--mono);font-size:.95rem}
.daynav button:hover{color:#fff}
.daynav button[aria-current="true"]{color:#fff;border-bottom-color:var(--amber);background:rgba(255,255,255,.06)}

main{padding:34px 0 70px}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:26px;align-items:start}

.hd{margin-bottom:22px}
.hd .eyebrow{font-family:var(--mono);font-size:.95rem;font-weight:600;letter-spacing:.01em;color:var(--teal-text);margin:14px 0 8px}
.hd h2{font-family:var(--serif);font-weight:600;font-size:2rem;margin:0 0 10px;color:var(--ink);letter-spacing:-.01em;line-height:1.12}
.obj{background:var(--card);border-left:4px solid var(--amber);padding:16px 20px;border-radius:0 8px 8px 0}
.obj p{margin:0;font-size:1rem}
.obj p b{font-family:var(--serif);font-weight:600}

.block{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:22px 24px;margin-bottom:16px}
.block > h3{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:0 0 3px;color:var(--ink);
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap
}
.mins{font-family:var(--mono);font-size:.78rem;color:#fff;background:var(--header-bg);padding:2px 8px;border-radius:4px;font-weight:400}
.sense{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--teal-text);margin:0 0 14px}
.block.c{border-top:4px solid var(--teal)}
.block.p{border-top:4px solid var(--amber)}
.block.a{border-top:4px solid var(--peri)}
.block.w{border-top:4px solid var(--rose)}

.moves{margin:0 0 16px;padding-left:18px}
.moves li{margin-bottom:6px;font-size:.96rem}
.say{border-left:3px solid var(--line);padding:2px 0 2px 16px;margin:0 0 14px}
.say p{margin:0 0 9px;font-size:.97rem;color:var(--ink-2)}
.say p:last-child{margin-bottom:0}
.say .who{font-family:var(--mono);font-size:.8rem;color:var(--muted);display:block;margin-bottom:2px}
.watch,.readaloud{position:relative;border-radius:10px;padding:24px 16px 15px;font-size:.92rem;
  margin-top:24px;box-shadow:0 2px 0 rgba(0,0,0,.07)}
.watch{background:var(--amber-pale)}
.readaloud{background:var(--peri-pale)}
.watch b,.readaloud b{position:absolute;top:-16px;left:14px;font-family:var(--sans);font-weight:700;
  font-size:.85rem;line-height:1;letter-spacing:.01em;padding:8px 17px;border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,.22)}
.watch b{background:var(--amber);color:#2B1B04}
.readaloud b{background:var(--peri-text);color:#fff}
:root[data-theme="dark"] .readaloud b{color:#0F2338}

ol.probs,ul.probs{margin:0;padding-left:20px}
ol.probs li,ul.probs li{margin-bottom:9px;font-size:.96rem}
.ans{font-family:var(--mono);font-size:1em;font-weight:600;color:var(--teal-text);margin-left:6px}

.ws-sec{margin-bottom:18px}
.ws-sec:last-child{margin-bottom:0}
.ws-sec h4{font-family:var(--serif);font-size:1.05rem;font-weight:600;margin:0 0 4px;color:var(--ink)}
.ws-sec .dir{font-size:.88rem;color:var(--muted);margin:0 0 9px}
.ws-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px 20px;margin:0;padding:0;list-style:none;counter-reset:q}
.ws-items li{font-size:.95rem;padding-left:26px;position:relative;font-family:var(--mono)}
.ws-items li::before{counter-increment:q;content:counter(q) ".";position:absolute;left:0;color:var(--muted);font-size:.85rem}
.ws-items.wide{grid-template-columns:1fr}
.ws-items.wide li{font-family:var(--sans);margin-bottom:8px}

.exit{background:var(--header-bg);color:#fff;border:0}
.exit h3{color:#fff}
.exit .sense{color:var(--amber)}
.exit ol{padding-left:20px;margin:0}
.exit li{margin-bottom:8px;font-size:.96rem;color:#DDE8F1}
.exit .crit{margin-top:14px;font-size:.88rem;color:#A9BFD3;border-top:1px solid rgba(255,255,255,.15);padding-top:12px}

/* sidebar */
.side{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:17px 19px}
.card h4{font-family:var(--mono);font-size:.83rem;color:var(--muted);margin:0 0 10px;font-weight:600;letter-spacing:.02em}
.card ul{margin:0;padding-left:16px;font-size:.9rem}
.card li{margin-bottom:5px}
.vocab li b{font-family:var(--serif);font-weight:600}
.std{display:flex;flex-wrap:wrap;gap:6px}
.std span{font-family:var(--mono);font-size:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:3px 8px}
.diff h4{color:var(--teal-text)}
.diff.ext h4{color:var(--amber-dk)}
.diff.acc h4{color:var(--peri-text)}

.pager{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.pager button{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 18px;
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--ink-3)}
.pager button:disabled{opacity:.35;cursor:default}

.printbtn{background:var(--amber);border:0;color:#2B1B04;font-weight:700;font-family:var(--sans);
  font-size:.88rem;padding:10px 16px;border-radius:7px;cursor:pointer;width:100%}

@media(max-width:940px){
  .lesson{grid-template-columns:minmax(0,1fr)}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side .card{flex:1 1 240px}
}
@media print{
  :root,:root[data-theme="dark"]{
    --ink:#0F2338;--ink-2:#1B3A5C;--ink-3:#33557A;--header-bg:#0F2338;
    --teal:#1F8A7D;--teal-pale:#DCEFEB;--teal-text:#136155;
    --amber:#E4A03C;--amber-dk:#96630E;--amber-pale:#FAEDD6;
    --peri:#6B7FB3;--peri-pale:#E4E9F4;
    --rose:#AA4429;--rose-pale:#F7E6DF;--rose-text:#8F331A;
    --paper:#fff;--card:#fff;--line:#999;--text:#000;--muted:#333;
  }
  .top{background:#fff;color:#000;border-bottom:2px solid #000;background-image:none}
  .top h1,.facts b{color:#000}.facts,.top .sub{color:#333}
  .daynav,.pager,.printbtn,.back,.theme-toggle{display:none}
  body{background:#fff;font-size:11pt}
  .block,.card{break-inside:avoid;border:1px solid #999}
  .exit{background:#fff;color:#000;border:1px solid #999}
  .exit h3,.exit li{color:#000}
  .side{position:static}
  .lesson{grid-template-columns:minmax(0,1fr)}
}

/* ===== Budapest layer (David, 2026-10-16) =====
   Ornament where it helps, calm where people read: the header frame carries the
   texture; lesson cards get petal corners and a double rule; motion is driven by
   the reader and skipped when the device asks for reduced motion. The hub adds
   its own parts in its page. See docs/3d-tools.md for the one place real 3D is used. */
:focus-visible{outline-color:var(--focus)}
/* On the dark frames the bright amber ring is the one that shows */
:is(.hero, header.top, .access, .exit) :focus-visible{outline-color:var(--amber)}

header.top{position:relative;padding-bottom:40px;
  background-image:var(--frame-image);background-size:var(--frame-size)}
/* The Danube: a wave of paper with an amber line along its crest */
header.top::after, header.top::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:40px;pointer-events:none;
  -webkit-mask:var(--wave-fill) center/100% 100% no-repeat;mask:var(--wave-fill) center/100% 100% no-repeat;
  background:var(--paper)}
header.top::before{bottom:0;-webkit-mask-image:var(--wave-line);mask-image:var(--wave-line);background:var(--amber);z-index:1}
header.top h1{font-optical-sizing:auto;letter-spacing:-.025em}
header.top .facts{gap:10px}
/* solid, so the rosette pattern never shows through text */
header.top .facts > span{padding:6px 12px;border:1px solid oklch(1 0 0 / .16);border-radius:var(--petal-sm);background:color-mix(in oklch, var(--header-bg), white 7%)}
.daynav{border-top:1px solid oklch(1 0 0 / .12);gap:4px;padding-top:8px;scroll-snap-type:x proximity}
.daynav button{border-radius:12px 12px 0 0;scroll-snap-align:start;transition:color .2s, background .25s, transform .3s var(--ease)}
.daynav button:hover{background:oklch(1 0 0 / .06)}
.daynav button[aria-current="true"]{background:oklch(1 0 0 / .1);border-bottom-width:4px}

.hd h2{font-size:clamp(1.9rem,3.6vw,2.5rem);letter-spacing:-.02em}
.obj{border-radius:0 10px 10px 0;border-left:6px double var(--amber);box-shadow:var(--lift)}
.block, .tool{border-radius:var(--petal);box-shadow:var(--lift);border-color:var(--line)}
.block.c, .tool{border-top:6px double var(--teal)}
.block.p{border-top:6px double var(--amber)}
.block.a{border-top:6px double var(--peri)}
.block.w{border-top:6px double var(--rose)}
.exit{border-radius:var(--petal);box-shadow:var(--lift-hi)}
.card{border-radius:var(--petal-sm);box-shadow:var(--lift)}
.watch, .readaloud{border-radius:var(--petal-sm)}
.mins{border-radius:999px;padding:2px 10px}
.pager button{border-radius:999px;min-height:44px;padding:10px 22px;box-shadow:var(--lift);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s}
.printbtn{border-radius:999px;min-height:44px}

@media (prefers-reduced-motion: no-preference){
  /* Moving between the hub and a unit: the header carries across */
  @view-transition{navigation:auto}
  header.top{view-transition-name:masthead}
  /* Once, on arrival: the header's words rise into place */
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  header.top .hdr-row, header.top h1, header.top .sub, header.top .facts{animation:rise .9s var(--ease) both}
  header.top h1{animation-delay:.08s}
  header.top .sub{animation-delay:.16s}
  header.top .facts{animation-delay:.24s}
  /* The rosettes drift with the scroll, so the frame feels layered */
  @supports (animation-timeline: scroll()){
    @keyframes drift{to{background-position:0 0, 0 0, 0 0, 0 -168px}}
    header.top{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 600px}
  }
  /* Hover: a straight lift and a deeper shadow; nothing tilts */
  .daynav button:hover{transform:translateY(-2px)}
  .pager button:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--lift-hi)}
  /* A newly chosen lesson day settles in, one piece after another */
  @keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  #content > *, #side > *{animation:arrive .55s var(--ease) both}
  #content > :nth-child(2), #side > :nth-child(2){animation-delay:.06s}
  #content > :nth-child(3), #side > :nth-child(3){animation-delay:.12s}
  #content > :nth-child(4), #side > :nth-child(4){animation-delay:.18s}
  #content > :nth-child(n+5), #side > :nth-child(n+5){animation-delay:.24s}
}
@media print{
  header.top::before, header.top::after{display:none}
  header.top{background-image:none}
  .block, .tool, .card{box-shadow:none}
}

/* ===== interactive manipulatives ===== */
.tool{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--teal);
  border-radius:9px;padding:22px 24px;margin-bottom:16px}
.tool > h3{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin:0 0 3px;color:var(--ink);
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.tool .sense{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--teal-text);margin:0 0 4px}
.tool .how{font-size:.92rem;color:var(--muted);margin:0 0 18px}
.ctl{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:16px}
.ctl label{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.ctl input[type=number],.ctl input[type=text],.ctl select{
  font-family:var(--mono);font-size:.95rem;padding:7px 9px;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);color:var(--text)}
.ctl input[type=text]{min-width:200px}
.ctl select{max-width:100%}
.btn{font-family:var(--sans);font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);cursor:pointer}
.btn:hover{border-color:var(--ink-3)}
.btn.go{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.btn.go:hover{background:var(--ink)}
.btn.amb{background:var(--amber);border-color:var(--amber);color:#2B1B04}
.btn.sm{padding:5px 10px;font-size:.8rem}
.stage-area{container-type:inline-size;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto}
.out{margin-top:14px;font-family:var(--mono);font-size:.95rem;color:var(--ink-2);line-height:1.9}
.out b{color:var(--teal-text);font-weight:600}
.note{font-size:.88rem;color:var(--muted);margin-top:10px}

/* place value */
.pv{display:flex;gap:4px;min-width:640px}
.pvcol{flex:1;text-align:center}
.pvcol .lab{font-family:var(--mono);font-size:.78rem;color:var(--muted);line-height:1.25;margin-bottom:6px;height:54px}
.pvcol .bin{min-height:132px;border:1px dashed var(--line);border-radius:6px;background:var(--card);
  display:flex;flex-wrap:wrap-reverse;align-content:flex-start;gap:3px;padding:5px;justify-content:center}
.pvcol.hot .bin{border-color:var(--amber);background:var(--amber-pale)}
.disc{width:17px;height:17px;border-radius:50%;background:var(--teal);border:1px solid #17685E;flex:0 0 auto}
.disc.pop{animation:pop .3s ease both}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.pvcol .btns{display:flex;gap:3px;margin-top:6px;justify-content:center}
.pvcol .lab .short{display:none}
@container (max-width:640px){
  .pv{min-width:0;gap:3px}
  .pvcol{min-width:0}
  .pvcol .lab{overflow:hidden}
  .pvcol .lab{height:auto;margin-bottom:5px;font-size:.78rem;font-weight:600}
  .pvcol .lab .full{display:none}
  .pvcol .lab .short{display:block}
  .pvcol .bin{min-height:120px;padding:3px;gap:2px}
  .pvcol .disc{width:10px;height:10px}
  .pvcol .btns{flex-direction:column;gap:4px}
  .pvcol .btns .btn{padding:0;height:34px;width:100%;font-size:1.1rem}
}
.pvcol .cnt{font-family:var(--mono);font-size:.8rem;color:var(--ink-2);margin-top:4px}

/* shift machine */
.sm-chart{display:flex;gap:3px;min-width:600px}
.smcol{flex:1;text-align:center}
.smcol .lab{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:5px;height:34px;line-height:1.2}
.smcol .lab .short{display:none}
.smcol .cell{height:52px;border:1px solid var(--line);border-radius:6px;background:var(--card);
  display:grid;place-items:center;font-family:var(--mono);font-size:1.5rem;color:var(--ink);
  transition:transform .45s cubic-bezier(.3,1,.4,1),background .3s,color .3s}
.smcol.moved .cell{background:var(--teal-pale);color:var(--teal-text);font-weight:700}
.smcol.gone .cell{background:var(--rose-pale);color:var(--rose-text);border-color:var(--rose);font-weight:700}
@container (max-width:640px){
  .sm-chart{min-width:0;gap:2px}
  .smcol{min-width:0}
  .smcol .lab .full{display:none}
  .smcol .lab .short{display:block;font-weight:600}
  .smcol .lab{height:36px;font-size:.78rem}
  .smcol .cell{height:46px;font-size:1.3rem;border-radius:5px}
}

/* number line */
.nl{width:100%;height:120px}
.nl .mk{transition:transform .6s cubic-bezier(.3,1,.4,1)}

/* stepper */
.steps{font-family:var(--mono);font-size:1.02rem;line-height:2.1}
.steps div{padding:3px 0;border-bottom:1px dashed var(--line)}
.steps div:last-child{border-bottom:0}
.steps .hl{background:var(--amber);color:#2B1B04;border-radius:3px;padding:1px 5px;font-weight:600}
.steps .fin{color:var(--teal-text);font-weight:600}
.steps .lbl{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin-left:12px}

/* bar model */
.bm{width:100%;height:auto}
.bmseg{transform-origin:left center}
.anim .bmseg{animation:grow .45s cubic-bezier(.22,1,.36,1) both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* factor lab */
.rects{display:flex;flex-wrap:wrap;gap:16px}
.rect{text-align:center}
.rect .grid{display:grid;gap:2px;justify-content:center;margin-bottom:5px}
.rect .sq{width:13px;height:13px;background:var(--amber);border:1px solid var(--amber-dk);border-radius:2px}
.rect .cap{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.hundred{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;max-width:340px}
.hundred div{aspect-ratio:1;display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;
  background:var(--card);border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.hundred div.a{background:var(--teal-pale);color:var(--teal-text);border-color:var(--teal)}
.hundred div.b{background:var(--amber-pale);color:var(--amber-dk);border-color:var(--amber)}
.hundred div.both{background:var(--ink-2);color:#fff;border-color:var(--ink);font-weight:600}
@container (max-width:640px){
  .hundred{gap:1px}
  .hundred div{letter-spacing:-.04em}
}
.flists{display:flex;gap:26px;flex-wrap:wrap;margin-top:12px;font-family:var(--mono);font-size:.88rem}
.flists .sh{background:var(--ink-2);color:#fff;border-radius:3px;padding:1px 5px}

/* power blocks */
.pow{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.powbox{text-align:center}
.powbox .cap{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:8px}
.powbox .val{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink)}
.usq{width:14px;height:14px;background:var(--peri);border:1px solid #4A5C8C;border-radius:2px}
.layers{position:relative}
.layer{position:absolute;display:grid;gap:2px}
.picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.picker .btn[aria-pressed=true]{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
@media (prefers-reduced-motion:reduce){.disc.pop,.anim .bmseg{animation:none}.smcol .cell,.nl .mk{transition:none}}