/* ============================================================================
   Algebra 1 — visual design language (warm, friendly, calm; for a true beginner).
   One stylesheet shared by the textbook, student guide, tutor guide, and landing.
   Light is the default theme; a refined slate-ink dark is the alternate.
   ============================================================================ */
:root{
  --step--1:.86rem; --step-0:1rem; --step-1:1.18rem; --step-2:1.42rem; --step-3:1.7rem; --step-4:2.05rem; --step-5:2.45rem;
  --lh:1.68; --lh-tight:1.18;
  --measure:64ch; --wide:46rem; --rail:16rem;
  --serif-math:"STIX Two Text","Cambria Math";
  --radius:16px; --radius-sm:11px;
  --s2:.5rem; --s3:.8rem; --s4:1.15rem; --s5:1.9rem; --s6:2.8rem; --s7:4.2rem;
  /* LIGHT — warm cream (default) */
  --paper:#f8f4ea; --card:#fffdf6; --card-2:#fbf6ec;
  --ink:#2c2820; --ink-soft:#6c6457; --rule:#ece2d0;
  --blue:#2f74b0; --link:#1f6391; --violet:#7d5aa6; --rose:#bb5b4a; --leaf:#3f8f5e; --honey:#a9740f;
  --tint-blue:#eef3f7; --tint-honey:#f6efe0; --tint-rose:#f7ede9; --tint-leaf:#eef4ee;
  --shadow:0 1px 2px rgba(60,48,28,.05), 0 6px 22px -12px rgba(60,48,28,.18);
}
html.dark{
  /* DARK — refined slate ink */
  --paper:#191c20; --card:#22262c; --card-2:#1d2127;
  --ink:#e9e8e3; --ink-soft:#9aa1a9; --rule:#2e333a;
  --blue:#6fb0e8; --link:#8cc2ef; --violet:#c3a4e6; --rose:#ef9b8e; --leaf:#69cf97; --honey:#e0bd76;
  --tint-blue:#1d2530; --tint-honey:#272318; --tint-rose:#2a1f1c; --tint-leaf:#1c2722;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -16px rgba(0,0,0,.65);
}
/* per-surface paper tint (student guide cooler, tutor guide buff) */
body[data-surface="guide"]{--paper:#eef2f4; --card:#fdfefe; --card-2:#f5f9fb; --rule:#dde7ec; --tint-blue:#e9f1f6;}
body[data-surface="tutor"]{--paper:#f4efe3; --card:#fffdf6; --card-2:#faf4e7; --rule:#e7ddca;}
html.dark body[data-surface="guide"]{--paper:#141a20; --card:#1c232b; --card-2:#18202a;}
html.dark body[data-surface="tutor"]{--paper:#1b1a16; --card:#24221c; --card-2:#1f1d18;}

*{box-sizing:border-box}
html{font-size:112.5%; overflow-x:clip}   /* durable guard: a too-wide block can never scroll the page sideways */
body{margin:0; background:var(--paper); color:var(--ink);
  font:var(--step-0)/var(--lh) "Source Serif 4",var(--serif-math),Georgia,serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; text-wrap:pretty;}
h1,h2,h3{font-family:"Fraunces",var(--serif-math),Georgia,serif; font-weight:600; line-height:var(--lh-tight);
  font-optical-sizing:auto; text-wrap:balance; color:var(--ink);}
h1{font-size:var(--step-4); margin:.2rem 0 .5rem}
h2{font-size:var(--step-2); margin:var(--s7) 0 var(--s4); padding-top:var(--s5); border-top:1px solid var(--rule)}
h3{font-size:var(--step-1); margin:var(--s6) 0 var(--s3)}
p{margin:0 0 var(--s4)}
a{color:var(--link)} a:hover{text-decoration-thickness:2px}
strong,b{font-weight:600; color:var(--ink)}
.imath{font-family:var(--serif-math),"Source Serif 4",serif}
code{font:500 .9em "IBM Plex Mono",ui-monospace,Consolas,monospace; background:var(--card-2); padding:.06em .35em; border-radius:5px}
pre{background:var(--card-2); padding:.85rem 1rem; border-radius:var(--radius-sm); overflow:auto; border:1px solid var(--rule)}
pre code{background:none; padding:0}
hr{border:0; border-top:1px solid var(--rule); margin:var(--s6) 0}
.ldiv{display:flex; align-items:center; gap:1rem; margin:var(--s6) auto}
.ldiv i{height:1px; flex:1; background:var(--rule)}
.ldiv svg{color:var(--honey); opacity:.7; flex:none}
.eyebrow{font-weight:600; font-size:var(--step--1); letter-spacing:.01em; color:var(--ink-soft); display:flex; align-items:center; gap:.42rem; margin-bottom:.4rem}
.cl-ic{width:1.15em; height:1.15em; flex:none}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1rem;
  padding:.6rem 1.2rem; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 88%,transparent); font-size:var(--step--1);}
@supports not (background:color-mix(in srgb,red,blue)){ .topbar{background:var(--paper)} }
.topbar nav{display:flex; gap:.9rem; flex-wrap:wrap; align-items:baseline}
.topbar a{color:var(--link); text-decoration:none} .topbar a:hover{text-decoration:underline}
.topbar .home{display:inline-flex; align-items:center; gap:.45rem; font-family:"Fraunces",serif; font-weight:600; font-size:var(--step-0); color:var(--ink)}
.topbar .home:hover{text-decoration:none}
.topbar .home .brandmark{width:1.55em; height:1.55em; flex:none; display:block}
.topbar .sp{margin-left:auto}
#theme,.menu{background:none; border:1px solid var(--rule); border-radius:999px; color:var(--ink-soft);
  cursor:pointer; padding:.3rem .7rem; font:inherit; font-size:var(--step--1)}
#theme:hover,.menu:hover{color:var(--ink); border-color:var(--blue)}
.menu{display:none}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar{-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)} }

/* ---- app shell: left index rail + reading column ---- */
.shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); align-items:start}
.content{min-width:0}
.sidenav{position:sticky; top:3.1rem; align-self:start; max-height:calc(100vh - 3.1rem); overflow:auto;
  padding:1.2rem .9rem 3rem; border-right:1px solid var(--rule); background:var(--paper); font-size:var(--step--1)}
.snav a{display:block; text-decoration:none; color:var(--ink-soft); border-radius:8px; padding:.3rem .55rem; line-height:1.35}
.snav a:hover{background:var(--card-2); color:var(--ink)}
.snav a.cur{color:var(--link); background:var(--tint-blue); font-weight:600}
.snav-top{font-weight:600; color:var(--ink)}
.snav-units{list-style:none; margin:.6rem 0 0; padding:0; counter-reset:none}
.snav-units > li{margin:.1rem 0}
.snav-unit{font-weight:600; color:var(--ink)}
.snav-lessons{list-style:none; margin:.05rem 0 .55rem; padding:0 0 0 .55rem; border-left:1px solid var(--rule); display:none}
.snav-units > li.active > .snav-lessons{display:block}
.snav-lesson .ln{font:600 .85em "IBM Plex Mono",monospace; color:var(--ink-soft); margin-right:.25rem}
.snav-lesson.cur .ln{color:var(--link)}

/* ---- reading column: calm centered measure; special blocks a touch wider ---- */
main{max-width:var(--wide); margin:0 auto; padding:1rem 1.3rem 4rem}
main > *{max-width:var(--measure); margin-inline:auto}
main > figure.fig, main > .worked, main > .practice, main > .answers, main > .hero,
main > table, main > .katex-display, main > .lesson-list, main > .pagenav, main > .tset, main > figure.viz{max-width:var(--wide)}
footer{max-width:var(--measure); margin:var(--s7) auto 0; padding:1.1rem 1.3rem; color:var(--ink-soft);
  font-size:var(--step--1); border-top:1px solid var(--rule)}

/* ---- unit hero + page kicker ---- */
.kicker{color:var(--blue); font-weight:600; font-size:var(--step--1); letter-spacing:.04em; margin:.6rem 0 .1rem}
.hero{margin:var(--s5) auto var(--s5); display:grid; grid-template-columns:1.05fr .95fr; gap:1.6rem; align-items:center}
.hero .kicker{margin:0}
.hero h1{margin:.3rem 0 .5rem}
.hero .lede{font-size:var(--step-1); color:var(--ink-soft); margin:0}
.hero-art{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); display:block; aspect-ratio:16/9; object-fit:cover}
html.dark .hero-art{filter:brightness(.9) saturate(.92)}
.subtitle{color:var(--ink-soft); font-size:var(--step-1); margin:.2rem auto var(--s5)}
@media (max-width:46rem){ .hero{grid-template-columns:1fr; gap:1rem} .hero-art{order:-1} }

/* ---- reference code: one quiet, friendly identifier ---- */
.refcode{font:500 .8em "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-soft); text-decoration:none;
  background:var(--card-2); border:1px solid var(--rule); border-radius:999px; padding:.08em .55em; white-space:nowrap}
.refcode:hover,.refcode:focus-visible{color:var(--link); border-color:var(--blue)}
:target{scroll-margin-top:5rem}

/* ---- cross-material link (a guide pointing into the textbook, and back) ---- */
.xref{display:inline-flex; align-items:center; gap:.4rem; font-size:var(--step--1); font-weight:600;
  color:var(--link); text-decoration:none; background:var(--card-2); border:1px solid var(--rule);
  border-radius:999px; padding:.3rem .8rem}
.xref:hover,.xref:focus-visible{border-color:var(--blue); color:var(--link)}

/* ---- callout family (plain-language labels) ---- */
.cl-goal,.cl-terms,.cl-watch,.cl-note,.cl-check,.cl-wrap{background:var(--card); border-radius:var(--radius);
  padding:1.1rem 1.3rem; margin:var(--s6) auto; box-shadow:var(--shadow)}
.cl-goal{background:none; box-shadow:none; border-left:3px solid var(--blue); border-radius:0; padding:.3rem 0 .3rem 1.1rem}
.cl-goal .eyebrow{color:var(--blue)} .cl-goal p:last-child{margin-bottom:0} .cl-goal p{font-size:var(--step-1)}
.cl-why{font-size:var(--step-1); color:var(--ink-soft); line-height:1.55; margin:var(--s4) auto var(--s5);
  padding-left:1.1rem; border-left:2px solid var(--rule)}
.cl-terms{border-left:3px solid var(--violet)} .cl-terms .eyebrow{color:var(--violet)}
.cl-watch{background:var(--tint-honey); box-shadow:none; border:1px solid var(--rule)} .cl-watch .eyebrow{color:var(--honey)}
.cl-check .eyebrow{color:var(--leaf)} .cl-note{background:var(--card-2); box-shadow:none; color:var(--ink-soft)}
.cl-wrap{border-left:3px solid var(--leaf)} .cl-wrap .eyebrow{color:var(--leaf)}
.cl-goal p:last-child,.cl-terms :last-child,.cl-watch :last-child,.cl-note :last-child,.cl-check :last-child,.cl-wrap :last-child{margin-bottom:0}
.cl-terms ul,.cl-check ol,.cl-watch ul{margin:0; padding-left:0; list-style:none; display:grid; gap:.7rem}
.cl-terms li,.cl-check li,.cl-watch li{padding-left:0; min-width:0; overflow-wrap:break-word}
.cl-check ol{counter-reset:c}

/* ---- worked example ---- */
.worked{background:var(--card); border-radius:var(--radius); padding:1.2rem 1.4rem; margin:var(--s6) auto;
  box-shadow:var(--shadow); border-left:4px solid var(--blue)}
.worked .eyebrow{color:var(--blue)}
.worked ol,.worked ul{list-style:none; padding-left:0; margin:.4rem 0; display:grid; gap:1.1rem}
.worked li{padding-top:1.1rem; border-top:1px solid var(--rule); min-width:0; overflow-wrap:break-word} .worked li:first-child{padding-top:0; border-top:0}
.worked .katex-display{overflow-x:auto; padding:.3rem 0; margin:.5rem 0}
.worked :last-child{margin-bottom:0}
.worked,.answers{position:relative; overflow:hidden}
.worked::after,.answers::after{content:""; position:absolute; right:-22px; bottom:-22px; width:128px; height:128px; pointer-events:none; background:var(--blue); opacity:.05;
  --wm:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.4'/><circle cx='12' cy='12' r='5.5' fill='none' stroke='%23000' stroke-width='1.4'/></svg>");
  -webkit-mask:var(--wm) center/contain no-repeat; mask:var(--wm) center/contain no-repeat}
.answers::after{background:var(--leaf)}

/* ---- practice / problem set: one clean column, wrap (never side-scroll) ---- */
.practice{margin:var(--s6) auto}
.practice .eyebrow{color:var(--ink-soft)}
.practice p em{font-style:normal; font-weight:600; font-size:var(--step--1); color:var(--ink-soft)}
.practice > p{margin:1.3rem 0 .5rem}
.practice ol{list-style:none; padding-left:0; margin:0; display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))}
.practice li{display:flex; gap:.6rem; align-items:baseline; background:var(--card); border:1px solid var(--rule);
  border-left:2px solid var(--rule); border-radius:var(--radius-sm); padding:.6rem .85rem; box-shadow:var(--shadow);
  min-width:0; overflow-wrap:anywhere}
.practice li > .refcode{flex:0 0 auto}
.practice li:hover{border-color:var(--blue); border-left-width:4px}
.practice li:target{border-color:var(--blue); border-left-width:4px; background:var(--tint-blue)}
.practice li .katex{white-space:normal}
.practice li .katex-display{overflow-x:auto; margin:.3rem 0}

/* ---- answer key reveal ---- */
.answers{background:var(--card); border-radius:var(--radius); margin:var(--s6) auto; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--rule)}
.answers > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; padding:.9rem 1.25rem}
.answers > summary::-webkit-details-marker{display:none}
.answers .tw{width:.7rem; height:.7rem; border:2px solid var(--leaf); border-top:0; border-right:0;
  transform:rotate(-45deg); transition:transform .2s; flex:0 0 auto; margin-bottom:.12rem}
.answers[open] .tw{transform:rotate(45deg) translate(-1px,-1px)}
.answers summary .eyebrow{color:var(--leaf); margin:0}
.answers .hint{color:var(--ink-soft); font-size:var(--step--1)} .answers[open] .hint{display:none}
.answers .ak-body{padding:.1rem 1.4rem 1.1rem; overflow-wrap:break-word} .answers .ak-body > :last-child{margin-bottom:0}

/* ---- per-question answer reveal (textbook practice) ---- */
/* project visually-hidden helper, scoped to the reveal so the short '.vh' name can't hide anything else */
.qcheck .vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* scoped under .practice so the (0,1,1) '.practice > p' rule can't override these margins */
.practice .practice-intro{color:var(--ink-soft); font-size:var(--step--1); margin:.2rem 0 .7rem}
.practice .practice-sub{font-weight:600; font-size:var(--step--1); color:var(--ink-soft); margin:1.3rem 0 .5rem}
.prow{display:flex; gap:.5rem .9rem; align-items:baseline; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius); padding:.7rem .9rem; margin:.6rem 0}
.prow .prob{flex:1 1 60%; min-width:0; overflow-wrap:break-word}
.prow .pnum{color:var(--ink-soft); margin-right:.3rem}   /* shown only on rows without a refcode badge */
.prow .katex{white-space:normal} .prow .katex-display{overflow-x:auto; margin:.3rem 0}
.qcheck{margin-left:auto; flex:0 0 auto}
.qcheck > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center}
.qcheck > summary::-webkit-details-marker{display:none}
.qcheck .qc-show, .qcheck .qc-hide{font-size:var(--step--1); font-weight:600; color:var(--leaf);
  border:1px solid var(--leaf); border-radius:999px; padding:.28rem .7rem; background:var(--tint-leaf, transparent)}
.qcheck[open] .qc-hide{color:var(--ink-soft); border-color:var(--rule)}   /* muted 'Hide' once open */
.qcheck:not([open]) .qc-hide{display:none} .qcheck[open] .qc-show{display:none}
.qcheck .qa{align-items:center; gap:.4rem; margin-left:.55rem; font-weight:600; color:var(--leaf)}
.qcheck .qa::before{content:"✓"; font-weight:700}
.qcheck:not([open]) .qa{display:none} .qcheck[open] .qa{display:inline-flex}
@media (prefers-reduced-motion:no-preference){ .prow{transition:border-color .15s ease} }
/* print: show every answer (even un-opened reveals) and hide the toggle. The screen rule
   .qcheck:not([open]) .qa{display:none} has higher specificity, so !important is needed here. */
@media print{ .qcheck .qa{display:inline-flex !important} .qcheck > summary{display:none} }

/* ---- prev / next page nav ---- */
.pagenav{display:flex; gap:1rem; justify-content:space-between; align-items:stretch;
  margin:var(--s7) auto 0; padding-top:var(--s5); border-top:1px solid var(--rule)}
.pagenav a{display:flex; flex-direction:column; gap:.15rem; flex:1 1 0; max-width:49%; text-decoration:none;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:.8rem 1.1rem; box-shadow:var(--shadow)}
.pagenav a:hover{border-color:var(--blue)}
.pagenav .pn-next{text-align:right; margin-left:auto}
.pagenav .pn-dir{font-size:var(--step--1); color:var(--ink-soft)}
.pagenav .pn-title{font-weight:600; color:var(--ink); font-family:"Fraunces",serif}

/* ---- unit overview: list of its lessons ---- */
.lesson-list ol{list-style:none; padding:0; margin:var(--s5) auto; display:grid; gap:.7rem}
.lesson-list li{margin:0}
.lesson-list a{display:block; background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--blue);
  border-radius:var(--radius-sm); padding:.75rem 1.05rem; text-decoration:none; box-shadow:var(--shadow); color:var(--ink)}
.lesson-list a:hover{border-color:var(--blue)}
.lesson-list a b{font-family:"Fraunces",serif; color:var(--link); margin-right:.3rem}

/* ---- tutor-guide problem card (cross-site consistency) ---- */
.tproblem{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:1rem 1.25rem; margin:var(--s4) auto; box-shadow:var(--shadow)}
.tproblem > .refcode{display:inline-block; margin-bottom:.5rem}
.tproblem > p{margin:.2rem 0 .6rem}
.tproblem .answers{margin:.5rem 0 0; box-shadow:none}
.tproblem .ans{margin:.7rem 0 0}

/* ---- figure (graph paper belongs here) ---- */
figure.fig{margin:var(--s6) auto; background:var(--card); border-radius:var(--radius); padding:1.1rem 1.1rem .7rem;
  box-shadow:var(--shadow); text-align:center; border:1px solid var(--rule);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:22px 22px}
figure.fig svg{max-width:100%; max-height:360px; height:auto; display:block; margin-inline:auto}
figcaption{color:var(--ink-soft); font-size:var(--step--1); margin-top:.6rem; text-align:left}
figcaption b,figcaption strong{color:var(--blue); font-weight:600}
html.dark figure.fig [stroke="#888"]{stroke:#7c8590} html.dark figure.fig text[fill="#888"]{fill:#9aa3b0}
html.dark figure.fig text[fill="#c0392b"],html.dark figure.fig [fill="#c0392b"]{fill:#ef9b8e}
html.dark figure.fig text[fill="#2980b9"],html.dark figure.fig [fill="#2980b9"]:not(line){fill:#6fb0e8}
html.dark figure.fig text[fill="#27ae60"]{fill:#69cf97} html.dark figure.fig text[fill="#8e44ad"]{fill:#c3a4e6}
html.dark figure.fig line[stroke="#2980b9"]{stroke:#6fb0e8} html.dark figure.fig line[stroke="#8e44ad"]{stroke:#c3a4e6}
/* #555 is a neutral gray hardcoded inline by the flowchart figures (sub-labels + an inner caption);
   lighten it in dark mode so the prose + equations stay legible. !important beats the inline style. */
html.dark figure.fig text[fill="#555"]{fill:#a7adb4}
html.dark figure.fig [style*="color:#555"]{color:#a7adb4 !important}

/* ---- inline metaphor illustration (raster; warm, decorative but meaningful) ---- */
figure.illus{margin:var(--s5) auto; max-width:30rem; text-align:center}
figure.illus img.illus-art{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); display:block}
html.dark figure.illus img.illus-art{filter:brightness(.92) saturate(.94)}

/* ---- viz: candidate visual elements embedded in lessons (svg / html / interactive) ---- */
figure.viz{margin:var(--s6) auto; max-width:var(--wide); background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1.1rem 1.2rem .8rem; box-shadow:var(--shadow); overflow:hidden}
figure.viz figcaption{color:var(--ink-soft); font-size:var(--step--1); margin-top:.7rem; text-align:center}
figure.viz svg{max-width:100%; height:auto}
figure.viz .katex-display{overflow-x:auto}
figure.viz input[type=range]{width:100%; max-width:24rem}

/* ---- objectives blockquote & tables ---- */
blockquote{margin:var(--s5) auto; padding:1rem 1.25rem; background:var(--tint-blue); border:1px solid var(--rule);
  border-left:3px solid var(--blue); border-radius:var(--radius); color:var(--ink)}
blockquote :last-child{margin-bottom:0}
table{border-collapse:collapse; width:100%; margin:var(--s4) auto; font-size:.95em; background:var(--card); border-radius:var(--radius-sm); overflow:hidden}
th,td{border:1px solid var(--rule); padding:.45rem .65rem; text-align:left} th{background:var(--card-2); font-family:"IBM Plex Mono",monospace; font-size:.85em; font-weight:600}
.katex-display{overflow-x:auto; overflow-y:hidden; padding:.2rem 0; max-width:100%}

/* ---- landing / index catalogs ---- */
ul.units{list-style:none; padding:0; margin:var(--s5) auto; display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
ul.units li{margin:0; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:1rem 1.15rem; box-shadow:var(--shadow)}
ul.units a{text-decoration:none; font-size:var(--step-1)} ul.units a b{font-family:"Fraunces",serif}
.u{color:var(--ink-soft); font-size:.92em}
section.ug{margin:var(--s4) auto; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--shadow)}
section.ug h3{margin:.1rem 0 .4rem} section.ug :last-child{margin-bottom:0}
.toc{background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:.8rem 1.15rem}

/* ---- mobile: the rail slides in over the page ---- */
@media (max-width:62rem){
  .shell{grid-template-columns:minmax(0,1fr)}
  .menu{display:inline-flex; order:-1}
  .sidenav{position:fixed; top:0; left:0; height:100dvh; width:17rem; max-height:none; z-index:60;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.nav-open .sidenav{transform:none}
  body.nav-open::after{content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:50}
}

/* ---- motion (reduced-motion safe) ---- */
@media (prefers-reduced-motion:no-preference){
  .practice li,.worked,figure.fig,#theme,.menu,ul.units li,.refcode,.xref,.lesson-list a,.pagenav a{transition:border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease}
  ul.units li:hover,.lesson-list a:hover,.pagenav a:hover{transform:translateY(-1px)}
  :target{animation:flash 1.4s ease-out 1} @keyframes flash{0%{background:var(--tint-honey)}100%{background:transparent}}
}

/* ---- print (courtesy) ---- */
@media print{
  html{overflow-x:visible}   /* reset the screen-only clip guard so paged media can't drop content */
  .topbar,.sidenav,.pagenav{display:none} .shell{display:block} a{color:inherit; text-decoration:none}
  body,figure.fig{background-image:none}
  .answers[open] .ak-body, details > *{display:revert} details{display:block} .answers summary{display:none}
  .worked,.practice li,figure.fig,blockquote,ul.units li{break-inside:avoid; box-shadow:none}
}

/* ---- reference-code tutor launcher (textbook surface only) ---- */
body[data-surface="textbook"] .refcode{cursor:copy}
body[data-surface="textbook"] #rc-tip{position:fixed; z-index:80; max-width:min(92vw,30rem); margin:0;
  padding:.6rem .8rem; background:var(--card); color:var(--ink); border:1px solid var(--rule);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  font:var(--step--1)/1.5 "Source Serif 4",var(--serif-math),Georgia,serif;
  opacity:0; visibility:hidden; pointer-events:none}
body[data-surface="textbook"] #rc-tip.show{opacity:1; visibility:visible}
body[data-surface="textbook"] #rc-tip .rc-tip-h{display:block; font-weight:600; font-size:.82em;
  letter-spacing:.01em; color:var(--ink-soft); margin-bottom:.25rem}
body[data-surface="textbook"] #rc-tip .rc-tip-q{display:block; color:var(--ink)}
body[data-surface="textbook"] #rc-toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:90; background:var(--ink); color:var(--paper); border-radius:999px; padding:.55rem 1.1rem;
  font:var(--step--1)/1.3 "Source Serif 4",Georgia,serif; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none; max-width:92vw}
body[data-surface="textbook"] #rc-toast.show{opacity:1; visibility:visible}
@media (prefers-reduced-motion:no-preference){
  body[data-surface="textbook"] #rc-tip{transition:opacity .12s ease}
  body[data-surface="textbook"] #rc-toast{transition:opacity .18s ease, transform .18s ease}
  body[data-surface="textbook"] #rc-toast.show{transform:translateX(-50%) translateY(-2px)}
}