/* ==========================================================================
lesson.css — modern lesson design system (sans-serif, dashboard-matching).
Pairs with tokens.css. A lesson links both, sets its track accent
(e.g. or :root override), and
uses these component classes. Change a rule here -> every lesson updates.
========================================================================== */
*{box-sizing:border-box}
html{font-size:17px; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
font-family:var(--font-sans);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
.wrap{max-width:44rem; margin:0 auto; padding:2.6rem clamp(1rem,4vw,1.6rem) 5rem}
/* ---- hub bar (sticky header with prev/next + theme toggle) ---- */
#hubbar{position:sticky; top:0; z-index:50; display:flex; justify-content:space-between;
align-items:center; gap:1rem; margin:-2.6rem calc(-1 * clamp(1rem,4vw,1.6rem)) 1.6rem; padding:.6rem clamp(1rem,4vw,1.6rem);
background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px); border-bottom:1px solid var(--line); font-size:.8rem}
#hubbar a{color:var(--accent); text-decoration:none; font-weight:600}
#hubbar .pn{display:flex; gap:.9rem; align-items:center}
.themebtn{cursor:pointer; background:var(--card); border:1px solid var(--line); border-radius:8px;
padding:.25rem .5rem; font-size:.95rem; line-height:1; color:var(--ink)}
.themebtn:hover{background:var(--chip)}
/* reading-progress bar: thin accent line pinned to the top edge of the viewport,
width grows with scroll position (driven by assets/reading-progress.js). Sits
above the sticky #hubbar; theme-aware via --accent; never intercepts clicks. */
#reading-progress{position:fixed; top:0; left:0; height:3px; width:0;
background:var(--accent); z-index:60; transition:width .08s linear; pointer-events:none}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
#reading-progress{transition:none}
*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}
/* ---- masthead ---- */
.kicker{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700}
h1{font-size:clamp(1.45rem,6vw,2.2rem); line-height:1.13; margin:.3rem 0 .4rem; letter-spacing:-.02em; font-weight:700; overflow-wrap:break-word}
h1 em{font-style:normal; color:var(--accent)}
h2{font-size:1.3rem; margin:2.4rem 0 .5rem; font-weight:700; letter-spacing:-.01em}
h2.sec{padding-bottom:.3rem; border-bottom:2px solid var(--accent)}
h3{font-size:1.08rem; margin:1.5rem 0 .3rem; font-weight:700; letter-spacing:-.01em}
p{margin:.6rem 0}
.meta{font-size:.78rem; color:var(--muted)}
.lede{font-size:1.05rem; color:var(--muted)}
/* topic tags under the masthead — the page's keyword tags, made visible (the
same terms carried in ). Each chip gets its own hue
(cycled) so the row reads multi-colour, not one flat accent. Theme-aware:
text mixes the hue toward --ink so it stays legible in light and dark. */
.ltags{display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 .2rem}
.ltags .lt{font-size:.7rem; font-weight:600; line-height:1; white-space:nowrap;
padding:.32rem .56rem; border-radius:6px;
color:color-mix(in srgb, var(--lt-c,var(--text-muted)) 88%, var(--ink));
background:color-mix(in srgb, var(--lt-c,var(--border)) 55%, transparent);
border:1px solid var(--line)}
/* Topic chips are neutral metadata, not highlights — slate by default so amber
reads as a deliberate accent. A page MAY set --lt-c for a semantic accent. */
a{color:var(--link)}
a:hover{color:var(--link-hover)}
sup a{text-decoration:none; font-weight:700; padding:0 1px}
code{background:var(--chip); padding:.05rem .35rem; border-radius:4px; font-size:.86em;
font-family:var(--font-mono)}
blockquote{margin:1.1rem 0; padding:.3rem 0 .3rem 1rem; border-left:3px solid var(--line); color:var(--muted)}
hr.note,hr{border:0; border-top:1px solid var(--line); margin:2.2rem 0}
/* closing meta-note at the end of every lesson (injected by inject-lesson-endnote.py) */
.lesson-endnote{margin:1rem 0 .5rem; padding-top:1rem; border-top:1px solid var(--line);
font-size:.82rem; font-style:italic; line-height:1.55; color:var(--muted)}
/* ---- callouts ---- */
.mission{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
border-radius:10px; padding:.8rem 1rem; font-size:.92rem; margin:1.1rem 0 1.6rem}
.pull{font-size:1.05rem; font-weight:600; background:color-mix(in srgb,var(--accent) 8%,transparent);
border-radius:10px; padding:.9rem 1rem; margin:1.5rem 0}
.rule{background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:10px;
padding:.8rem 1rem; margin:1.4rem 0; font-size:1rem}
.constraint{margin:.5rem 0; padding-bottom:.5rem; border-bottom:1px dotted var(--line)}
.constraint b{color:var(--accent)}
.miscon,.myth .m{background:color-mix(in srgb,var(--bad) 12%,transparent); border-radius:8px; padding:.6rem .8rem}
.myth .t{background:color-mix(in srgb,var(--good) 14%,transparent); border-radius:8px; padding:.6rem .8rem; margin-top:.4rem}
/* ---- figures / diagrams ---- */
figure{margin:1.3rem 0}
figure svg,figure img{width:100%; height:auto; background:var(--diagram-bg); border:1px solid var(--line); border-radius:10px}
figcaption{font-size:.76rem; color:var(--muted); margin-top:.4rem}
pre.dgm{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem;
overflow:auto; font-family:var(--font-mono); font-size:.8rem; line-height:1.4}
/* ---- visual primitives: steps, cards, fact grid ---- */
.steps{display:flex; gap:.5rem; align-items:stretch; margin:1.2rem 0}
.step{flex:1; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem .75rem}
.step .lab{font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.step .big{font-size:1rem; font-weight:700; color:var(--accent); margin-top:.2rem; line-height:1.2}
.step .sub{font-size:.74rem; color:var(--muted); margin-top:.2rem}
.arrow{display:flex; align-items:center; color:var(--accent); font-weight:700}
.cards{display:flex; gap:.6rem; margin:1.1rem 0; flex-wrap:wrap}
.card{flex:1; min-width:8rem; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem; text-align:center}
.card .v{font-size:1.1rem; font-weight:700; color:var(--accent)}
.card .l{font-size:.74rem; color:var(--muted); margin-top:.25rem}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)); gap:.6rem; margin:1.1rem 0}
.fact{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; font-size:.9rem}
/* ---- tables ---- */
table{border-collapse:collapse; width:100%; margin:1.1rem 0; font-size:.9rem}
th,td{border:1px solid var(--line); padding:.5rem .65rem; text-align:left; vertical-align:top}
th{background:var(--chip); font-size:.82rem; font-weight:700}
/* ---- quiz ---- */
.quiz{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem; margin:1.2rem 0}
.q{font-weight:700; margin:.2rem 0 .7rem}
.qn{color:var(--accent)}
.opt{display:block; width:100%; text-align:left; font:inherit; font-size:.9rem; color:var(--ink);
background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem;
margin:.35rem 0; cursor:pointer; transition:background .12s,border-color .12s}
.opt:hover{background:var(--chip)}
.opt.correct{border-color:var(--good); background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); font-weight:700}
.opt.wrong{border-color:var(--bad); background:color-mix(in srgb,var(--bad) 12%,transparent); color:var(--bad)}
.opt:disabled{cursor:default}
.fb{font-size:.84rem; margin:.5rem 0 0; min-height:1.1rem}
.fb.ok{color:var(--good)} .fb.no{color:var(--bad)}
/* ---- rehearse / interview / memory-check ---- */
.rehearse textarea{width:100%; min-height:6rem; font:inherit; font-size:.92rem; padding:.6rem .7rem;
border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); resize:vertical}
.btn{font:inherit; font-size:.82rem; cursor:pointer; background:var(--accent-soft); color:var(--on-accent); border:0;
border-radius:8px; padding:.45rem .9rem; margin-top:.6rem}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}
.model{display:none; margin-top:.8rem; background:var(--chip); border-radius:8px; padding:.8rem 1rem; font-size:.9rem}
.model.show{display:block}
details.iq,details.mc,.memcheck{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.6rem .85rem; margin:.6rem 0}
details.iq summary,details.mc summary{cursor:pointer; font-weight:600}
/* ---- in-page section nav (nav.toc): tappable chips/tags by DEFAULT (phones,
tablets, narrow windows), upgrading to a sticky clickable right rail only on
wide screens (>=1240px) where the gutter has room. Targeted as `nav.toc` so its
specificity (0,1,1) beats each lesson's inline `.toc` rule (0,1,0) — no
per-lesson HTML edits. Only ai-agents + context-engineering lessons carry