/* One stylesheet, three themes. Every color is a token; themes only swap tokens and fonts.
   The math palette (func / secant / tangent / area / accum) is the same vocabulary the
   animations use, so a yellow dashed line means "secant" everywhere in the course. */

:root, [data-theme="slate"] {
  --bg: #0e1216; --panel: #161c22; --panel-2: #1c242c; --ink: #ece7dc; --ink-2: #b9c0c7; --dim: #87919b;
  --rule: #2a333c; --focus: #ffd166;
  --func: #58c4dd; --secant: #ffd166; --tangent: #ff6b5a; --area: #2ec4b6; --accum: #b39ddb; --deriv: #9cd96b;
  --accent: #ff6b5a; --accent-ink: #1a0f0d; --good: #7bd389; --good-bg: #13261b; --bad: #ff8a7a; --bad-bg: #2b1614;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif; --font-head: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible", system-ui, sans-serif;
  --radius: 10px; --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}
[data-theme="paper"] {
  --bg: #f7f2e8; --panel: #fffdf8; --panel-2: #f1ead9; --ink: #221d16; --ink-2: #4a4238; --dim: #7a6f60;
  --rule: #e2d8c4; --focus: #b4412f;
  --func: #1f5f8b; --secant: #a86b00; --tangent: #b4412f; --area: #1e7d74; --accum: #6a4c93; --deriv: #3f7d20;
  --accent: #b4412f; --accent-ink: #fff; --good: #2f6b2f; --good-bg: #e6f0df; --bad: #a3321f; --bad-bg: #f7e3dc;
  --font-body: "Source Serif 4", Georgia, serif; --font-head: "Source Serif 4", Georgia, serif;
  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --radius: 6px; --shadow: 0 1px 2px rgba(60,40,10,.06), 0 6px 18px rgba(60,40,10,.06);
  color-scheme: light;
}
/* no theme chosen: follow the device */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #f7f2e8; --panel: #fffdf8; --panel-2: #f1ead9; --ink: #221d16; --ink-2: #4a4238; --dim: #7a6f60;
  --rule: #e2d8c4; --focus: #b4412f;
  --func: #1f5f8b; --secant: #a86b00; --tangent: #b4412f; --area: #1e7d74; --accum: #6a4c93; --deriv: #3f7d20;
  --accent: #b4412f; --accent-ink: #fff; --good: #2f6b2f; --good-bg: #e6f0df; --bad: #a3321f; --bad-bg: #f7e3dc;
  --font-body: "Source Serif 4", Georgia, serif; --font-head: "Source Serif 4", Georgia, serif;
  --font-ui: "Source Sans 3", system-ui, sans-serif;
  --radius: 6px; --shadow: 0 1px 2px rgba(60,40,10,.06), 0 6px 18px rgba(60,40,10,.06);
  color-scheme: light;
}
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font-body); }
a { color: var(--accent); }
button, input, select { font: inherit; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0 0 .4em; }

/* ------------------------------------------------------------ top bar */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); font-family: var(--font-ui); }
.top .in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.brand { font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .01em; display: flex; gap: 8px; align-items: center; }
.brand svg { width: 26px; height: 26px; }
.top .grow { flex: 1; }
.top .who { color: var(--dim); font-size: .9rem; }
.linkbtn { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0; font-size: .9rem; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 80px; }
.narrow { max-width: 760px; margin: 0 auto; }

/* ------------------------------------------------------------ buttons, fields */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--panel-2);
  color: var(--ink); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-ui); font-size: .95rem; text-decoration: none; }
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.small { padding: 4px 10px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input[type=text], input[type=password], input[type=email], select { background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 10px; width: 100%; }
math-field { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px;
  padding: 4px 8px; min-width: 9rem; font-size: 1.1rem; --caret-color: var(--accent); --selection-background-color: color-mix(in srgb, var(--accent) 30%, transparent);
  --contains-highlight-background-color: transparent; }
math-field:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
math-field::part(virtual-keyboard-toggle), math-field::part(menu-toggle) { display: none; }
.card .row math-field, .card .row input[type=text] { min-width: min(16rem, 100%); flex: 0 1 18rem; font-size: 1.15rem; padding: 6px 10px; }
.kbd-btn { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: var(--panel); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 99px; padding: 8px 14px; font: 600 .9rem var(--font-ui); box-shadow: var(--shadow); cursor: pointer; }
.lock { font: 600 .62rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dim);
  border: 1px solid var(--rule); border-radius: 99px; padding: 0 6px; vertical-align: 2px; }
@media (max-width: 430px) { .brand span { display: none; } }
@media (max-width: 560px) {
  .top .in { gap: 10px; padding: 8px 12px; }
  .top .who, .top .crumb { display: none; }
  .tabs a { padding: 10px 10px; }
}
.locked-card { border-style: dashed; }

/* ------------------------------------------------------------ lesson header + tabs */
.lesson-head { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; margin-bottom: 18px; }
.chip { font-family: var(--font-ui); font-weight: 700; background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 8px; font-size: 1.1rem; grid-row: span 2; }
.lesson-head .unit { color: var(--dim); font-family: var(--font-ui); font-size: .9rem; }
.lesson-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); margin: 8px 0 24px; overflow-x: auto; font-family: var(--font-ui); }
.tabs a { padding: 10px 16px; color: var(--dim); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.goals { color: var(--ink-2); margin: -8px 0 20px; }

.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }
/* lesson: notes on the left, the video (and step list) pinned on the right while the notes scroll */
/* the video column grows with the window: about 320px just before the one-column switch, 820px at 1920px wide
   (Adder, 2026-10-02: big on a wide screen, but not swamping a half-width window) */
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, calc(62vw - 370px), 840px); gap: 32px; align-items: start; }
.side { position: sticky; top: 64px; display: grid; gap: 12px; }
/* wide screens: the lesson page grows past the usual 1180px and the video gets half of it (Adder, 2026-10-02) */
@media (min-width: 1300px) {
  body:has(.lesson-grid) .wrap, body:has(.lesson-grid) .top .in { max-width: 1680px; }
  /* the step list under the big video: two to a row, read left to right, so it fits under the video */
  .rail ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .rail li { padding: 4px 0; line-height: 1.25; }
}
.side-toggle { display: none; justify-self: end; }
.rail { font-family: var(--font-ui); font-size: .92rem; max-height: 42vh; overflow: auto; }
@media (max-width: 1000px) {
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .side { order: -1; top: 52px; z-index: 15; background: var(--bg); padding: 6px 0; }
  .side .rail { display: none; }
  .side-toggle { display: inline-flex; }
  .side-video .vtitle { display: none; }
  /* one column: the pinned video stays a moderate size, centered, so it doesn't fill the screen */
  .side .side-video { width: min(100%, 600px, 80vh); justify-self: center; }
}
.rail ol { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.rail li { counter-increment: s; display: flex; gap: 10px; align-items: center; padding: 6px 0; color: var(--dim); cursor: pointer; }
.rail li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule);
  display: grid; place-items: center; font-size: .78rem; flex: none; }
.rail li.done { color: var(--ink-2); } .rail li.done::before { content: "✓"; background: var(--good); border-color: var(--good); color: var(--bg); }
.rail li.cur { color: var(--ink); font-weight: 600; } .rail li.cur::before { border-color: var(--accent); }
.rail .bar { height: 4px; background: var(--rule); border-radius: 4px; margin: 14px 0 6px; overflow: hidden; }
.rail .bar i { display: block; height: 100%; background: var(--good); width: 0; transition: width .4s; }

/* ------------------------------------------------------------ steps + blocks */
.step { margin-bottom: 36px; }
.step > h2 { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; }
.step > h2 .n { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center;
  font-size: 1rem; font-family: var(--font-ui); flex: none; }
.step.locked { display: none; }
.step-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.prose { margin: 0 0 14px; }
.prose .pb { display: block; height: .6em; }
.prose .center, .center { text-align: center; margin: .6em 0; }
.block { margin: 18px 0; }

.formula { border: 2px solid var(--ink); background: var(--panel-2); border-radius: var(--radius); padding: 20px 18px 10px; position: relative; margin-top: 26px; }
.formula > .tag { position: absolute; top: -13px; left: 14px; background: var(--ink); color: var(--bg); font: 600 .82rem var(--font-ui);
  padding: 3px 10px; border-radius: 6px; letter-spacing: .02em; }
.definition { border-left: 5px solid var(--ink); background: var(--panel); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; }
.definition > .tag { font: 700 .9rem var(--font-ui); margin-bottom: 4px; }
.bigidea { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 12px 4px; font-style: italic; font-size: 1.08rem; }

.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.card > .tag { font: 700 .9rem var(--font-ui); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.card.check { border-style: dashed; }
.card .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.solution { margin-top: 12px; padding: 12px 14px; background: var(--panel-2); border-radius: 8px; }
.solution > .lbl { font: 600 .75rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.fb { font: 600 .92rem var(--font-ui); padding: 3px 10px; border-radius: 99px; }
.fb.good { color: var(--good); background: var(--good-bg); } .fb.bad { color: var(--bad); background: var(--bad-bg); }
.fb.info { color: var(--ink-2); background: var(--panel-2); }

figure { margin: 20px 0; text-align: center; }
figure img, figure .svg { max-width: 100%; height: auto; }
figure .svg svg { max-width: min(100%, 520px); height: auto; color: var(--ink); }
.figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.figrow figure { margin: 0; }
figcaption { color: var(--dim); font-size: .9rem; font-style: italic; margin-top: 6px; }

table.data { border-collapse: collapse; margin: 10px auto; font-variant-numeric: tabular-nums; }
table.data th, table.data td { padding: 6px 14px; text-align: center; border-bottom: 1px solid var(--rule); }
table.data th { font: 600 .9rem var(--font-ui); color: var(--ink-2); border-bottom: 2px solid var(--ink-2); }
table.data.vbar td:first-child { border-right: 1.5px solid var(--ink-2); font-weight: 600; }
table.data tr.rule td { border-top: 1.5px solid var(--ink-2); }
.table-wrap { overflow-x: auto; }

/* blanks inside prose */
.blank { display: inline-flex; vertical-align: middle; align-items: center; gap: 4px; margin: 0 2px; }
.blank input { width: var(--w, 10ch); min-width: 4ch; padding: 2px 6px; border: 0; border-bottom: 2px solid var(--ink-2); border-radius: 4px 4px 0 0; background: var(--panel-2); }
.blank math-field { min-width: 4rem; font-size: 1rem; padding: 0 6px; border: 0; border-bottom: 2px solid var(--ink-2); border-radius: 4px 4px 0 0; background: var(--panel-2); }
.blank.good input, .blank.good math-field { border-bottom-color: var(--good); background: var(--good-bg); }
.blank.bad input, .blank.bad math-field { border-bottom-color: var(--bad); background: var(--bad-bg); }
.blank .reveal { font-size: .75rem; color: var(--dim); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.blank .shown { font-weight: 700; color: var(--good); border-bottom: 2px solid var(--good); padding: 0 4px; }

/* four meanings */
.meanings { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: stretch; font-family: var(--font-ui); margin: 8px 0 4px; }
.meanings .h { color: var(--dim); font-size: .85rem; text-align: center; align-self: end; }
.meanings .r { color: var(--dim); font-weight: 700; font-size: .9rem; align-self: center; padding-right: 6px; }
.meanings .c { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; color: var(--dim); display: flex; gap: 10px; align-items: center; opacity: .55; }
.meanings .c.on { opacity: 1; color: var(--ink); border: 2px solid var(--accent); background: var(--panel-2); }
.meanings .c b { display: block; font-size: .98rem; } .meanings .c small { font-size: .8rem; color: var(--dim); }
.meanings .c svg { width: 42px; height: 30px; flex: none; }
.meanings-cap { text-align: center; color: var(--dim); font-style: italic; font-size: .92rem; }
@media (max-width: 560px) { .meanings { grid-template-columns: 1fr 1fr; } .meanings .r, .meanings .blankh { display: none; } }

/* video + desmos */
.video { background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; position: relative; }
.video video { width: 100%; height: 100%; display: block; }
.video .missing { position: absolute; inset: 0; display: grid; place-items: center; color: #aaa; font-family: var(--font-ui); padding: 20px; text-align: center; }
.vtitle { font: 600 .9rem var(--font-ui); color: var(--dim); margin: 6px 0 0; }
.desmos-box { height: 380px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); margin-top: 8px; }

/* practice / quiz / test prep lists */
.items { counter-reset: q; }
.q { counter-increment: q; }
.q > .tag::before { content: counter(q); width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--bg); display: inline-grid; place-items: center; font-size: .82rem; }
.calc { font: 600 .72rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--rule); padding: 1px 8px; border-radius: 99px; }
.choices { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.choices label { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; background: var(--panel); }
.choices label:hover { border-color: var(--ink-2); }
.choices input { accent-color: var(--accent); }
.choices .L { font: 700 .9rem var(--font-ui); color: var(--dim); width: 1.4em; }
.choices label.right { border-color: var(--good); background: var(--good-bg); }
.choices label.wrong { border-color: var(--bad); background: var(--bad-bg); }
.score { font: 700 2rem var(--font-head); }
.rubric { list-style: none; padding: 0; margin: 8px 0 0; }
.rubric li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--rule); }
.rubric input { margin-top: .35em; accent-color: var(--good); width: 18px; height: 18px; }
.rubric .pts { font: 700 .82rem var(--font-ui); color: var(--dim); min-width: 3.2em; }

/* course map */
.unit { margin-bottom: 26px; }
/* course map units fold; the summary is the unit heading, with a turning chevron */
details.unit > summary { list-style: none; cursor: pointer; }
details.unit > summary::-webkit-details-marker { display: none; }
details.unit > summary h2 { margin-bottom: 10px; }
details.unit .chev { display: inline-block; width: .55em; height: .55em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg); margin-right: .2em; transition: transform .15s; flex: none; align-self: center; }
details.unit[open] .chev { transform: rotate(45deg); }
details.unit:not([open]) { margin-bottom: 10px; }
.unit h2 { font-size: 1.25rem; display: flex; gap: 10px; align-items: baseline; }
.unit h2 .bc, .bc-tag { font: 700 .7rem var(--font-ui); letter-spacing: .08em; color: var(--accent); border: 1px solid var(--accent); border-radius: 99px; padding: 1px 7px; }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.topic { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: .95rem; line-height: 1.35; }
.topic .n { font-weight: 700; color: var(--dim); min-width: 2.6em; }
.topic.soon { opacity: .45; background: transparent; }
.topic.ready:hover { border-color: var(--accent); }
.topic .prog { height: 3px; background: var(--rule); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.topic .prog i { display: block; height: 100%; background: var(--good); }

/* auth pages */
.auth { max-width: 420px; margin: 8vh auto; }
.auth .card { padding: 26px; }
.auth label { display: block; font: 600 .9rem var(--font-ui); margin: 12px 0 4px; }
.auth .help { color: var(--dim); font-size: .82rem; }
.errorlist { color: var(--bad); list-style: none; padding: 0; margin: 4px 0; font-size: .9rem; }

/* teacher */
.roster { overflow-x: auto; }
.roster table { border-collapse: collapse; width: 100%; font-family: var(--font-ui); font-size: .9rem; }
.roster th, .roster td { padding: 8px 10px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.roster .meter { display: inline-block; width: 60px; height: 6px; background: var(--rule); border-radius: 4px; vertical-align: middle; overflow: hidden; margin-right: 6px; }
.roster .meter i { display: block; height: 100%; background: var(--good); }
.code { font: 700 1.3rem ui-monospace, monospace; letter-spacing: .15em; background: var(--panel-2); padding: 4px 10px; border-radius: 6px; }
.muted { color: var(--dim); }
.katex { font-size: 1.08em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* units shown beside an answer box */
.units { color: var(--ink-2); white-space: nowrap; align-self: center; }

/* right-aligned attribution under a quotation (\hfill{\small ...} in the notes) */
.attrib { display: block; text-align: right; font-size: .88em; color: var(--ink-2); margin-top: 4px; }
.step-end { height: 1px; }

/* guided-notes blanks: a right answer turns green on its own, whatever the design */
html .blank.good input, html .blank.good math-field { border-bottom-color: var(--good); background: var(--good-bg); }
html .blank.bad input, html .blank.bad math-field { border-bottom-color: var(--bad); background: var(--bad-bg); }
.blank .tick { color: var(--good); font-weight: 700; }

/* previous / unit / next, under the lesson tabs */
.lesson-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 4px 0 14px; font-family: var(--font-ui); font-size: .88rem; }
.lesson-nav a { color: var(--dim); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-nav a:hover { color: var(--ink); }
.lesson-nav .dir { font-weight: 700; color: var(--ink-2); }
.lesson-nav .up { justify-self: center; border: 1px solid var(--line, var(--dim)); border-radius: 999px; padding: 2px 12px; }
.lesson-nav .next { text-align: right; }
@media (max-width: 560px) { .lesson-nav .prev, .lesson-nav .next { font-size: 0; } .lesson-nav .dir { font-size: .88rem; } }

/* unit tests: two timed parts, a docked calculator for Part 2, a print option */
.test-part.locked { opacity: .7; }
.part-gate { margin: 18px 0; }
.desmos-dock { position: fixed; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); height: min(520px, 70vh); z-index: 50;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--line, var(--dim)); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.desmos-dock .row { justify-content: space-between; align-items: center; }
.desmos-dock .desmos-host { flex: 1; min-height: 0; }
.desmos-dock.min { height: auto; width: auto; }
.desmos-dock.min .desmos-host { display: none; }
.print-test summary { cursor: pointer; font-weight: 700; }
.print-test .row { flex-wrap: wrap; gap: 8px; }

/* a display line that holds fill-in blanks: centered, display-style pieces with the inputs between them */
.dline { display: block; text-align: center; margin: .7em 0; line-height: 2.4; }
.nobr { white-space: nowrap; }
/* the formula sheet: one card per formula, grouped by topic; topics not reached yet are grayed, still readable */
.formula-sheet .unit-sheet { margin: 28px 0 10px; }
.formula-sheet .sheet-topic { margin: 14px 0 22px; display: grid; gap: 10px; }
.formula-sheet .sheet-topic.ahead { opacity: .45; }
.formula-sheet .sheet-topic.ahead:hover { opacity: .8; }
.formula-sheet .sheet-tag { font: 600 .95rem var(--font-ui); color: var(--ink-2); text-decoration: none; }
.formula-sheet .sheet-tag:hover { text-decoration: underline; }
/* the key ideas & formulas page is a main destination: a button-like header link */
.nav-key { font: 600 .9rem var(--font-ui); color: inherit; text-decoration: none; border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.nav-key:hover { background: var(--panel-2); }
@media (max-width: 560px) { .nav-key { font-size: .78rem; padding: 2px 9px; } }
/* a check-box blank: its options sit side by side, each option's box and words kept together */
.blank.pick { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; border: 0; background: none; min-width: 0; padding: 0; }
.blank.pick .pick-opt { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; cursor: pointer; font-family: var(--font-ui); font-size: .95em; }
.blank.pick input { width: auto; min-width: 0; padding: 0; margin: 0 4px 0 0; border: 0; background: none; vertical-align: middle; }
.blank.pick.good .pick-opt:has(input:checked) { color: var(--good); font-weight: 600; }
.blank.pick.bad .pick-opt:has(input:checked) { color: var(--bad); }
/* one piece of a display that may wrap: pieces share a line when they fit, otherwise stack, never scroll */
.dline .dpiece { display: inline-block; margin: 0 .9em; line-height: normal; vertical-align: middle; }
/* on wide screens the test slides left so the docked calculator doesn't cover it */
@media (min-width: 1100px) { body.has-dock main.wrap { margin-right: 470px; margin-left: 24px; } }

/* teacher handouts page */
.handout-table { width: 100%; border-collapse: collapse; }
.handout-table th { text-align: left; font-weight: 600; padding: 8px 12px 8px 0; vertical-align: top; width: 38%; }
.handout-table td { padding: 8px 0; line-height: 1.9; }
.handout-table tr + tr { border-top: 1px solid var(--line, rgba(127,127,127,.25)); }
.handout-table .doc { display: inline-block; margin-right: 16px; white-space: nowrap; }
.handout-table .chip-sm { font-family: var(--font-ui); font-size: .8rem; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); margin-right: 4px; }
@media (max-width: 640px) { .handout-table th { display: block; width: auto; padding-bottom: 0; } .handout-table td { display: block; } }

/* printable packet download on lesson pages */
.packet-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 18px; font-family: var(--font-ui); font-size: .88rem; }
/* unit test scoring summary */
.scoring { font-family: var(--font-ui); font-size: .92rem; }
.scoring ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ------------------------------------------------------------ accounts, privacy, notices */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.auth label.check, .stack label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.small { font-size: .85rem; }
.flash { display: grid; gap: 6px; margin: 0 0 16px; }
.flash .fb { margin: 0; border-radius: var(--radius); padding: 8px 12px; }
.notice { background: var(--panel-2); border: 1px solid var(--rule); border-left: 4px solid var(--secant);
  border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px; font-family: var(--font-ui); }
.foot { border-top: 1px solid var(--rule); font: .85rem var(--font-ui); }
.foot .in { max-width: 1180px; margin: 0 auto; padding: 14px 16px 28px; display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--dim); }
.top a.who { text-decoration: none; }
.top a.who:hover { color: var(--ink); }
.account .card { margin: 0 0 16px; }
.account h2 { font-size: 1.15rem; }
.stack label { display: block; font: 600 .9rem var(--font-ui); margin: 12px 0 4px; }
.stack .help { color: var(--dim); font-size: .82rem; }
.stack input[type=text], .stack input[type=password], .stack input[type=email] { max-width: 26rem; }
details.pop > summary { list-style: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[open] > summary { border-color: var(--ink-2); }
details.pop > form { margin-top: 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); }
details.pop.inline { display: inline-block; vertical-align: middle; margin-left: 6px; }
details.pop.inline[open] { display: block; margin: 8px 0 0; }
.btn.danger { background: var(--bad); color: var(--bg); border-color: var(--bad); font-weight: 600; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--rule)); }
ul.plain { list-style: none; padding: 0; margin: 0 0 10px; }
ul.plain > li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
details.manage { margin-top: 12px; font-family: var(--font-ui); }
details.manage > summary { cursor: pointer; color: var(--ink-2); }
.manage-list > li > span { margin-right: 6px; }
.temp-pw { margin-bottom: 20px; border-color: var(--good); }
.legal { line-height: 1.65; }
.legal h2 { margin-top: 1.4em; font-size: 1.2rem; }
.legal li { margin: 4px 0; }

/* ------------------------------------------------------------ full-length practice exams */
.exam-cards { display: grid; gap: 10px; margin: 18px 0; }
.exam-card .n { min-width: 2.2em; }
.free-tag { font: 700 .66rem var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--good); border: 1px solid var(--good);
  border-radius: 99px; padding: 0 7px; vertical-align: 2px; }
.exam-outline { width: 100%; margin: 14px 0 20px; font-family: var(--font-ui); font-size: .92rem; }
table.data.exam-outline td, table.data.exam-outline th { text-align: left; padding-left: 0; }
.exam-outline tr.done td { color: var(--dim); }
.exam-outline tr.cur td { font-weight: 700; }
.exam-start ul { padding-left: 1.2em; }
.exam-start .row { align-items: flex-start; }
.small { font-size: .85rem; }
.discard summary { list-style: none; cursor: pointer; }
.discard summary::-webkit-details-marker { display: none; }
.discard[open] { flex-basis: 100%; }
.discard form { margin-top: 10px; padding: 10px 12px; background: var(--panel-2); border-radius: 8px; }
.exam-past { width: 100%; font-family: var(--font-ui); font-size: .92rem; }
table.data.exam-past th, table.data.exam-past td { text-align: left; padding-left: 0; }

/* the testing environment: a part bar under the site header, one question at a time, a navigator bar at the bottom */
body.in-exam .wrap { padding-bottom: 120px; }
.exam-bar { position: sticky; top: 52px; z-index: 18; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 10px 14px; margin: -12px 0 18px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  font-family: var(--font-ui); font-size: .92rem; box-shadow: var(--shadow); }
.exam-bar-l { display: flex; flex-direction: column; line-height: 1.25; }
.exam-bar-c { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.exam-bar-r { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.exam-clock { font: 700 1.35rem var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.exam-clock.low { color: var(--bad); }
.exam-saved { font-size: .8rem; }
.exam-saved.bad { color: var(--bad); }
.exam-stage { max-width: 760px; margin: 0 auto; }
.exam-q-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule);
  padding-bottom: 8px; margin-bottom: 10px; font-family: var(--font-ui); }
.exam-q-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; background: var(--ink);
  color: var(--bg); font: 700 .95rem var(--font-ui); }
.exam-flag { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--rule); border-radius: 99px;
  padding: 4px 12px; color: var(--ink-2); font: 600 .85rem var(--font-ui); cursor: pointer; }
.exam-flag .flag-ico { width: 10px; height: 13px; border: 2px solid currentColor; border-right: 0; clip-path: polygon(0 0, 100% 0, 70% 45%, 100% 90%, 0 90%); }
.exam-flag.on { color: var(--accent); border-color: var(--accent); }
.exam-flag.on .flag-ico { background: currentColor; }
.exam-frq-part { margin: 14px 0; }
.exam-q .choices label { padding: 10px 12px; }
.exam-q .choices label:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 9px 11px; background: var(--panel-2); }
.exam-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); border-top: 1px solid var(--rule); }
.exam-nav-in { max-width: 760px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.exam-nav-mid { position: relative; display: flex; justify-content: center; }
.exam-nav-open { font-weight: 700; }
.exam-nav-panel { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px));
  display: grid; gap: 12px; z-index: 30; }
.exam-nav-panel .row { justify-content: space-between; margin-top: 0; }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.exam-cell { position: relative; height: 38px; border: 1.5px dashed var(--dim); border-radius: 6px; background: var(--panel); color: var(--ink);
  font: 700 .9rem var(--font-ui); cursor: pointer; display: inline-grid; place-items: center; }
.exam-cell.answered { border-style: solid; border-color: var(--ink-2); background: var(--panel-2); }
.exam-cell.cur { outline: 2px solid var(--accent); outline-offset: 1px; }
.exam-cell.flagged::after { content: ""; position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel); }
.exam-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: .82rem var(--font-ui); }
.exam-legend span { display: inline-flex; align-items: center; gap: 6px; }
.exam-legend .exam-cell { width: 18px; height: 16px; cursor: default; }
.exam-review h2 { margin-top: 0; }
.exam-break .lede { font-size: 1.1rem; font-weight: 600; }
.exam-pop-back { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; }
.exam-pop { max-width: 460px; width: 100%; }
.exam-pop h2 { margin-top: 0; font-size: 1.25rem; }
.exam-pop .row { justify-content: flex-end; }
.exam-toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 70; background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 8px; font: 600 .95rem var(--font-ui); box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
body.in-exam .desmos-dock { bottom: 76px; }
body.in-exam .desmos-dock .row strong { cursor: pointer; }
@media (min-width: 1100px) { body.in-exam.has-dock main.wrap { margin-right: 470px; margin-left: 24px; } }
@media (max-width: 560px) {
  .exam-bar { top: 46px; grid-template-columns: 1fr auto; padding: 8px 10px; }
  .exam-bar-c { grid-row: 1; grid-column: 2; }
  .exam-bar-r { grid-column: 1 / -1; justify-content: space-between; }
  .exam-clock { font-size: 1.15rem; }
  .exam-nav-in { padding: 8px 12px; gap: 6px; }
  .exam-nav-open { padding: 8px 10px; font-size: .88rem; }
}

/* the score report */
.exam-summary { display: grid; grid-template-columns: auto 1fr; gap: 14px 28px; align-items: center; margin-bottom: 14px; }
.exam-ap { display: flex; gap: 14px; align-items: center; }
.exam-ap-n { font: 700 3.4rem/1 var(--font-head); width: 74px; height: 74px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; }
.exam-ap strong { display: block; font-family: var(--font-ui); }
.exam-ap small { display: block; }
.exam-nums { display: grid; grid-template-columns: auto auto; gap: 2px 18px; margin: 0; font-family: var(--font-ui); justify-content: start; }
.exam-nums dt { color: var(--dim); }
.exam-nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.exam-how { grid-column: 1 / -1; font-size: .92rem; }
.exam-how summary { cursor: pointer; font: 600 .9rem var(--font-ui); color: var(--ink-2); }
@media (max-width: 560px) { .exam-summary { grid-template-columns: 1fr; } }
.exam-jump { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 22px; font: 600 .9rem var(--font-ui); }
.exam-frq, .exam-mc { margin: 14px 0; }
.exam-frq-part + .exam-frq-part { border-top: 1px solid var(--rule); padding-top: 12px; }
.rubric-line { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; width: 100%; }
.exam-mc > summary { display: flex; gap: 12px; align-items: center; cursor: pointer; list-style: none; font-family: var(--font-ui); }
.exam-mc > summary::-webkit-details-marker { display: none; }
.exam-mc[open] > summary { margin-bottom: 10px; }
.exam-mc .choices label { cursor: default; }
.exam-mc .tagline { margin-left: auto; font: 600 .75rem var(--font-ui); color: var(--dim); white-space: nowrap; }
.exam-only { display: inline-flex; gap: 6px; align-items: center; font: .92rem var(--font-ui); margin-bottom: 6px; cursor: pointer; }
.exam-units td:last-child { white-space: normal; text-align: left; }
table.data.exam-units th, table.data.exam-units td { text-align: left; }
.exam-promo { margin: 0 0 22px; max-width: 640px; }
.exam-grid + .exam-legend { margin-top: 10px; }
.exam-part-row { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; }
.exam-part-row .prose { margin: 0; }
.rubric-line input { flex: none; }
.rubric-line .pts { flex: none; }
table.data.exam-units td { vertical-align: top; font-family: var(--font-ui); font-size: .92rem; }
table.data.exam-units td:first-child { min-width: 9em; }
.exam-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; line-height: 1.35; }
.exam-review-list .chip-sm { font-family: var(--font-ui); font-size: .78rem; padding: 1px 6px; border-radius: 4px; background: var(--panel-2); margin-right: 2px; }
.exam-stage.time-up { opacity: .6; }
.exam-start { margin-bottom: 28px; }

/* free lessons for visitors (Adder 2026-10-08: Trig Review and Units 1-3 are free) */
.visitor-note { margin: 0 0 12px; padding: 10px 14px; border: 1.5px dashed var(--rule); border-radius: var(--radius, 8px); color: var(--ink-2); font-size: .95rem; }

/* the student / teacher / membership pages (the landing page has its own block at the end) */
.narrow .lede { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
.free-units { line-height: 1.9; padding-left: 1.2em; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.plan h3 { margin: 4px 0; }
.plan ul { padding-left: 1.1em; line-height: 1.6; }

/* ---------- main navigation (Adder 2026-10-12): links or dropdowns; folds into a Menu button on narrow screens */
.nav-fold > summary { display: none; list-style: none; cursor: pointer; font: 600 .9rem var(--font-ui); border: 1.5px solid currentColor; border-radius: 999px; padding: 3px 12px; }
.nav-fold > summary::-webkit-details-marker { display: none; }
.site-nav { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font: 600 .88rem var(--font-ui); }
.site-nav a { color: var(--ink-2); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--ink); }
.site-nav a.on { color: var(--ink); border-bottom-color: var(--accent); }
.nav-set { display: inline-flex; gap: 14px; }
.nav-links .nav-set + .nav-set { padding-left: 14px; border-left: 1.5px solid var(--rule); }
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; color: var(--ink-2); padding: 4px 2px; border-bottom: 2px solid transparent; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); }
.nav-group.on > summary { color: var(--ink); border-bottom-color: var(--accent); }
.nav-drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; display: grid; gap: 2px; padding: 8px; background: var(--panel); border: 1.5px solid var(--rule); border-radius: var(--radius, 8px); box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 30; }
.nav-drop a { padding: 7px 10px; border: 0; border-radius: 6px; }
.nav-drop a:hover, .nav-drop a.on { background: var(--panel-2); }
.nav-dash { margin-left: 4px; }
.menu-label { display: block; margin: 8px 0 2px; padding-top: 8px; border-top: 1px solid var(--rule); font: 600 .72rem var(--font-ui); color: var(--dim); }

/* ---------- all-videos page */
.videos-page { max-width: 1240px; margin: 0 auto; }
.vp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.vp-player { position: sticky; top: 72px; }
.vp-player video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius, 8px); }
.vp-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; }
.vp-now a { margin-left: auto; }
.vp-list { max-height: calc(100vh - 110px); overflow: auto; border: 1.5px solid var(--rule); border-radius: var(--radius, 8px); background: var(--panel); }
.vp-group > summary { cursor: pointer; padding: 10px 14px; font: 600 .95rem var(--font-ui); position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--rule); }
.vp-group ol { list-style: none; margin: 0; padding: 4px; }
.vp-item { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; font-size: .92rem; cursor: pointer; }
.vp-item:hover { background: var(--panel-2); }
.vp-item.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.vp-item .chip-sm { flex: none; min-width: 2.8em; }
@media (max-width: 900px) {
  .vp-grid { grid-template-columns: minmax(0, 1fr); }
  .vp-player { position: static; }
  .vp-list { max-height: none; }
}

/* ---------- student dashboard */
.dash-resume { display: grid; gap: 6px; text-decoration: none; color: var(--ink); margin: 8px 0 18px; }
.dash-resume:hover { border-color: var(--accent); }
.dash-units { display: grid; gap: 6px; }
.dash-unit { display: grid; grid-template-columns: minmax(0, 1fr) 160px 56px; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.dash-unit:hover { background: var(--panel-2); }
.dash-unit .prog { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.dash-unit .prog i { display: block; height: 100%; background: var(--good); }
.dash-unit.locked { color: var(--dim); }
.dash-count { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .dash-unit { grid-template-columns: minmax(0, 1fr) 70px 48px; } }
/* dropdowns and the folded menu sit on a panel: their links always use the page's ink, whatever the header uses */
.top .nav-drop a { color: var(--ink-2); }
.top .nav-drop a.on, .top .nav-drop a:hover { color: var(--ink); }
/* the same fold on a wide screen when the bar doesn't fit (links style, a signed-in name, a wide design font):
   site.js measures the bar and sets .nav-tight, so the Menu button appears instead of a cut-off Sign out */
.top.nav-tight .nav-fold { position: relative; }
.top.nav-tight .nav-fold > summary { display: inline-block; }
.top.nav-tight .nav-fold > .site-nav { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 240px; flex-direction: column; align-items: stretch;
  flex-wrap: wrap; padding: 10px; background: var(--panel); border: 1.5px solid var(--rule); border-radius: var(--radius, 8px); box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.top.nav-tight .nav-fold .nav-set { flex-direction: column; gap: 2px; }
.top.nav-tight .nav-links .nav-set + .nav-set { padding: 6px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
.top.nav-tight .nav-fold .nav-group > summary { pointer-events: none; font-size: .72rem; color: var(--dim); border: 0; padding: 6px 2px 0; }
.top.nav-tight .nav-fold .nav-group > summary::after { display: none; }
.top.nav-tight .nav-fold .nav-drop { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
.top.nav-tight .nav-fold > .site-nav a { color: var(--ink-2); }
.top.nav-tight .nav-fold > .site-nav a.on { color: var(--ink); }
.top .in { max-width: 1320px; }
.brand span, .top .linkbtn, .site-nav a, .nav-group > summary { white-space: nowrap; }
.site-nav { flex-wrap: nowrap; }

/* the whole header strip of a unit opens and closes it, not just the heading's text (Adder 2026-10-12): the spacing
   lives inside the summary as padding, so no margin or box padding is left unclickable */
details.unit > summary { display: block; padding: 4px 0 10px; }
details.unit > summary h2 { margin: 0; }

/* ------------------------------------------------------------ landing page (.lp), About and Contact
   Colors and fonts are tokens only; safety.css and textbook.css add their own touches. Full-width bands use a
   spread box-shadow clipped to the band's height, which paints edge to edge without widening the page. */
.lp { display: grid; gap: clamp(64px, 9vw, 112px); margin-bottom: -40px; }
.lp img, .lp video { display: block; max-width: 100%; height: auto; }
.lp h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.lp-eyebrow, .lp-kicker { font: 700 .82rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.lp-h2 { margin-bottom: 26px; }
.btn.big { padding: 12px 22px; font-size: 1.05rem; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }

.lp-hero { display: grid; gap: 40px; align-items: center; padding-top: 12px; }
.lp-hero h1 { font-size: clamp(2.7rem, 7.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 18px; }
.lp-lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 40em; margin: 0; }
.lp-fine { color: var(--dim); font: .95rem var(--font-ui); margin: 14px 0 0; }
.lp-hero-art { position: relative; padding-bottom: 72px; }
.lp-hero-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius); }
.lp-screen { position: absolute; left: 0; bottom: 0; width: 76%; margin: 0; background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow); }
.lp-screen video { width: 100%; border-radius: calc(var(--radius) - 4px); background: #f3ead6; }
.lp-screen figcaption { font: .8rem var(--font-ui); color: var(--dim); padding: 6px 4px 2px; }
@media (min-width: 880px) {
  .lp-hero { grid-template-columns: 1.05fr .95fr; gap: 56px; min-height: min(78vh, 720px); }
  .lp-hero-art { padding: 0 0 56px 56px; }
  .lp-hero-photo { aspect-ratio: 4 / 5; max-height: 640px; }
  .lp-screen { left: 0; width: 72%; }
}

.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 22px 18px; padding: 30px 0;
  background: var(--panel); box-shadow: 0 0 0 100vmax var(--panel); clip-path: inset(0 -100vmax);
  border-block: 1px solid var(--rule); border-image: linear-gradient(var(--rule) 0 0) 1 / 1px 0 / 0 100vmax; }
.lp-facts div { display: grid; gap: 2px; }
.lp-facts b { font: 800 clamp(2rem, 4vw, 2.8rem)/1 var(--font-head); color: var(--ink); }
.lp-facts span { font: .92rem var(--font-ui); color: var(--ink-2); }

.lp-panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: lp; }
/* four steps: four across on wide screens, two by two in between, one column on phones */
@media (min-width: 640px) { .lp-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .lp-panel h3 { font-size: 1.2rem; margin: 16px 16px 6px; } .lp-panel p { margin: 0 16px 18px; font-size: .95rem; } }
.lp-panel { counter-increment: lp; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.lp-panel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; background: var(--panel-2);
  border-bottom: 1px solid var(--rule); }
.lp-panel img.lp-paper { object-position: 50% 6%; }
.lp-panel img.lp-fit { object-fit: contain; padding: 14px; }
.lp-panel h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 18px 20px 6px; }
.lp-panel h3::before { content: counter(lp); display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 1rem var(--font-ui); }
.lp-panel p { margin: 0 20px 20px; color: var(--ink-2); }

.lp-feature { display: grid; gap: 30px; align-items: center; }
.lp-feature-text p { color: var(--ink-2); max-width: 36em; }
@media (min-width: 880px) {
  .lp-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .lp-feature.flip .lp-feature-art { order: 2; }
  .lp-feature.flip { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.lp-shot { border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.lp-stack { display: grid; }
.lp-stack img { grid-area: 1 / 1; width: 78%; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); }
.lp-stack img + img { margin: 30% 0 0 22%; }
.lp-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.lp-free .lp-photo { max-height: 540px; }
@media (min-width: 880px) { .lp-free .lp-feature-art, .lp-last .lp-photo { max-width: 440px; justify-self: end; } }
@media (max-width: 879px) { .lp-free .lp-photo, .lp-last .lp-photo { aspect-ratio: 4 / 3; object-position: 50% 30%; } }

.lp-band { background: var(--panel-2); box-shadow: 0 0 0 100vmax var(--panel-2); clip-path: inset(0 -100vmax); padding: clamp(40px, 6vw, 72px) 0; }
.lp-teach { display: grid; gap: 30px; align-items: start; }
.lp-teach-text p { color: var(--ink-2); max-width: 36em; }
.lp-teach-shot { margin: 0; }
.lp-teach-shot figcaption, .lp-figcap { font: .85rem var(--font-ui); color: var(--dim); margin-top: 8px; }
.lp-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 460px; }
.lp-paper { background: #fff; box-shadow: var(--shadow); border: 1px solid var(--rule); }
.lp-sheets img:last-child { transform: translateY(18px); }
@media (min-width: 880px) {
  .lp-teach { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "text shot" "sheets shot"; column-gap: 56px; }
  .lp-teach-text { grid-area: text; }
  .lp-teach-shot { grid-area: shot; align-self: center; }
  .lp-sheets { grid-area: sheets; }
}

.lp-me { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 820px; }
.lp-me img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.lp-me h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.lp-me p { color: var(--ink-2); margin: 0; }
@media (min-width: 640px) { .lp-me { grid-template-columns: 170px minmax(0, 1fr); gap: 34px; align-items: center; } }

.lp-last { display: grid; gap: 30px; align-items: center; }
.lp-last h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.lp-last p { color: var(--ink-2); font-size: 1.1rem; max-width: 34em; }
@media (min-width: 880px) { .lp-last { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; } .lp-last .lp-photo { max-height: 440px; } }

/* About */
.about-page { display: grid; gap: 28px; max-width: 1000px; margin: 12px auto 0; align-items: start; }
.about-photo { margin: 0; max-width: min(240px, 70%); }
.about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.about-text h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.about-text .lede { font-size: clamp(1.08rem, 1.6vw, 1.2rem); color: var(--ink); line-height: 1.7; max-width: 38em; }
.about-ai { margin: 30px 0 26px; max-width: 42em; }
.about-ai h2 { font-size: 1.3rem; }
.about-ai p { margin-bottom: 0; color: var(--ink-2); }
.about-next { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 760px) { .about-page { grid-template-columns: 260px minmax(0, 1fr); gap: 52px; } .about-photo { max-width: 100%; position: sticky; top: 90px; } }

/* Contact */
.contact-page { display: grid; gap: 26px; max-width: 980px; margin: 12px auto 0; align-items: start; }
.contact-intro h1, .contact-done h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.contact-intro .lede { color: var(--ink-2); font-size: 1.1rem; }
.contact-card { padding: 22px 24px; }
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form select, .contact-form textarea { width: 100%; max-width: none; }
.contact-form textarea { font: inherit; color: var(--ink); background: var(--field, var(--panel)); border: 1px solid var(--rule);
  border-radius: 8px; padding: 8px 10px; resize: vertical; min-height: 9rem; }
.contact-form select { padding: 6px 8px; }
.contact-done { max-width: 640px; }
@media (min-width: 820px) { .contact-page:has(.contact-card) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; } }

/* ---------- formula sheets: one card style for every item, two per row, a size smaller (Adder 2026-10-03) */
.formula-sheet .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.formula-sheet .sheet-card { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 12px 14px; background: var(--panel);
  border: 1.5px solid var(--rule); border-radius: var(--radius, 8px); font-size: .92rem; min-width: 0; }
.formula-sheet .sheet-card.ahead { opacity: .45; }
.formula-sheet .sheet-card.ahead:hover { opacity: .85; }
.formula-sheet .sheet-title { margin: 0; font: 600 .95rem/1.3 var(--font-ui); color: var(--ink); }
.formula-sheet .sheet-body { overflow-x: auto; }
.formula-sheet .sheet-body p { margin: .3em 0; }
.formula-sheet .sheet-body .katex-display { margin: .4em 0; font-size: .95em; }
.formula-sheet .sheet-from { font: 500 .78rem var(--font-ui); color: var(--dim); text-decoration: none; justify-self: start; }
.formula-sheet .sheet-from:hover { color: var(--ink); text-decoration: underline; }
.formula-sheet .unit-sheet h2 { margin-bottom: 4px; }
@media (max-width: 760px) { .formula-sheet .sheet-grid { grid-template-columns: minmax(0, 1fr); } }

/* two cards stacked one after the other always get a little space between them (Adder 2026-10-14: in Safety card a
   unit test's print panel sat right on its scoring panel). Grids and rows space their cards with gap instead. */
.card + .card { margin-top: 16px; }
:is(.sheet-grid, .lp-panels, .plans, .exam-cards, .doors, .topics, .vp-grid, .exam-grid, .exam-part-row, .lesson-grid, .row, .figrow) > .card + .card { margin-top: 0; }

/* ---------- AP FRQ Archive (/frq/): College Board questions as page images, sorted by question type */
.frq-page { max-width: 980px; margin: 0 auto; }
.frq-head h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: .2em; }
.frq-head > .muted { max-width: 44em; margin: 0 0 18px; }
.frq-kicker { margin: 0 0 6px; font: 600 .9rem var(--font-ui); color: var(--dim); }
.frq-kicker a { color: var(--dim); }
.frq-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 16px; font-family: var(--font-ui); }
.frq-cat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px; color: var(--ink); text-decoration: none;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); font-size: .95rem; line-height: 1.25; }
.frq-cat:hover { border-color: var(--accent); }
.frq-cat.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.frq-count { font: 600 .82rem var(--font-ui); color: var(--dim); font-variant-numeric: tabular-nums; }
.frq-cat.on .frq-count { color: inherit; opacity: .8; }
.frq-filter { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end;
  padding: 14px; margin-bottom: 14px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-ui); }
.frq-filter label > span { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 3px; }
.frq-filter select { padding: 7px 8px; }
.frq-filter input[type=text], .frq-filter select, .frq-go .btn { min-height: 44px; }
.frq-go { display: flex; gap: 8px; }
@media (max-width: 820px) {
  .frq-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frq-search, .frq-go { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .frq-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .frq-cat { padding: 8px 10px; font-size: .88rem; }
  .frq-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frq-exam { grid-column: 1 / -1; }
}
.frq-summary { font: 600 .92rem var(--font-ui); color: var(--ink-2); margin: 0 0 8px; }
.frq-group { margin: 22px 0 8px; }
.frq-group h2 { font-size: 1.3rem; display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.frq-group h2 a { color: var(--ink); text-decoration: none; }
.frq-group h2 a:hover { text-decoration: underline; }
.frq-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .frq-list { grid-template-columns: minmax(0, 1fr); } }
.frq-row { height: 100%; }
.frq-row .n { color: var(--ink); }
.frq-row-main { flex: 1; min-width: 0; }
.frq-row small { display: block; color: var(--dim); margin-top: 3px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.frq-also { font: 600 .74rem var(--font-ui); color: var(--dim); border: 1px solid var(--rule); border-radius: 99px; padding: 0 7px; white-space: nowrap; }
.frq-credit { margin-top: 36px; padding-top: 12px; border-top: 1px solid var(--rule); font: .82rem/1.5 var(--font-ui); color: var(--dim); max-width: 60em; }
.frq-credit a { color: inherit; }
/* one question */
.frq-title { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.frq-title h1 { margin: 0; }
.frq-title .chip { grid-row: auto; grid-column: auto; }
.frq-meta { margin: 6px 0 14px; font: .95rem var(--font-ui); color: var(--dim); }
.frq-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.frq-sheets { display: grid; gap: 14px; justify-items: center; }
/* the College Board pages are white paper in every theme; in dark mode a softer white */
.frq-sheet { display: block; width: 100%; max-width: 816px; height: auto; background: #fff; border: 1px solid var(--rule);
  border-radius: 4px; box-shadow: var(--shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="paper"]) .frq-sheet { filter: brightness(.92); } }
[data-theme="slate"] .frq-sheet { filter: brightness(.92); }
.frq-sg { margin: 22px 0 0; }
.frq-sg > summary { list-style: none; display: flex; width: fit-content; margin: 0 auto 12px; }
.frq-sg > summary::-webkit-details-marker { display: none; }
.frq-sg .when-open, .frq-sg[open] .when-closed { display: none; }
.frq-sg[open] .when-open { display: inline; }
.frq-sg > p { text-align: center; margin: 0 0 14px; font-family: var(--font-ui); font-size: .92rem; }
.frq-text { margin: 22px 0 0; font-family: var(--font-ui); font-size: .9rem; }
.frq-text > summary { cursor: pointer; color: var(--ink-2); }
.frq-text pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .85rem/1.45 ui-monospace, monospace; background: var(--panel-2);
  border-radius: 8px; padding: 12px 14px; max-height: 24rem; overflow: auto; }
.frq-lessons { margin-top: 30px; }
.frq-lessons h2 { font-size: 1.3rem; }
/* lesson test-prep tab: the matching question types in the archive */
.frq-links { margin: 28px auto 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-ui); }
.frq-links h2 { font-size: 1.1rem; margin: 0 0 4px; }
.frq-links p { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }
.frq-links .frq-tools { margin: 0; }

/* ---------- course flyouts in the top bar (Adder 2026-10-15): hover AP Calc Course for its units, a unit for its
   lessons. site.js opens them (.open) with a short delay so a diagonal move toward the lessons doesn't flip units.
   Each nested panel is placed against the panel it sits in, so a unit's lessons always start at the top. */
.nav-item { position: relative; display: inline-flex; }
.nav-drop .nav-item, .nav-sub .nav-item { position: static; display: block; }
.nav-sub { display: none; position: absolute; z-index: 31; top: calc(100% + 6px); left: 0; width: 320px; padding: 8px;
  background: var(--panel); border: 1.5px solid var(--rule); border-radius: var(--radius, 8px); box-shadow: 0 10px 28px rgba(0,0,0,.14);
  font: 500 .86rem/1.3 var(--font-ui); }
.nav-drop .nav-sub, .nav-sub .nav-sub { top: -1.5px; left: calc(100% - 2px); }   /* only as tall as its own items (Adder 2026-10-15) */
.nav-sub .nav-sub { width: 380px; max-height: calc(100vh - 90px); overflow-y: auto; }
.nav-item.open > .nav-sub { display: grid; align-content: start; gap: 1px; }
.site-nav .nav-sub a, .nav-sub .soon { display: grid; grid-template-columns: 3.9em minmax(0, 1fr); gap: 8px; align-items: baseline;
  white-space: normal; padding: 6px 8px; border: 0; border-radius: 6px; color: var(--ink-2); text-decoration: none; }
.nav-sub b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nav-sub .soon { color: var(--dim); }
.nav-sub .soon b { color: var(--dim); font-weight: 600; }
.nav-sub i { font-style: normal; font: 700 .68rem var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
  border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
.site-nav .nav-sub a:hover, .site-nav .nav-sub a:focus-visible, .nav-sub .nav-item.open > a { background: var(--panel-2); color: var(--ink); }
.nav-sub .has-sub > a::after { content: "›"; grid-column: 3; color: var(--dim); font-weight: 700; }
.nav-sub .has-sub > a { grid-template-columns: 3.9em minmax(0, 1fr) auto; }
.nav-sub b { white-space: nowrap; }
/* no room on the right (site.js measures): a nested panel opens to the left of its parent instead */
.nav-sub.flip { left: auto; right: calc(100% - 2px); }
.top .nav-sub a { color: var(--ink-2); }
.top .nav-sub a:hover, .top .nav-sub .nav-item.open > a { color: var(--ink); }
.nav-drop .has-sub > a::after { content: "›"; float: right; margin-left: 12px; color: var(--dim); }
/* phones and the folded Menu: plain links, no flyouts */
.top.nav-tight .nav-sub { display: none !important; }
.top.nav-tight .nav-drop .has-sub > a::after { content: none; }

/* the menu button (Adder 2026-10-15): a hamburger icon, shown only when the dropdowns no longer fit on the bar */
.nav-fold > summary { border: 0; padding: 4px; border-radius: 8px; line-height: 0; }
.nav-fold > summary svg { display: block; }
.nav-fold[open] > summary { background: var(--panel-2); }
/* a submenu row highlights edge to edge like the others, not just behind its words */
.nav-drop > .nav-item > a { display: block; }

/* light/dark switch: sun on the left, moon on the right, the knob sits over the current one */
.theme-switch { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink-2); }
.ts-track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 54px; height: 28px; padding: 0 6px;
  border: 1.5px solid var(--rule); border-radius: 999px; background: var(--panel-2); box-sizing: border-box; }
.ts-track svg { width: 15px; height: 15px; position: relative; z-index: 1; color: var(--dim); transition: color .2s; }
.ts-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease; }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(26px); }
.theme-switch[aria-checked="false"] .ts-sun, .theme-switch[aria-checked="true"] .ts-moon { color: var(--ink); }
.theme-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .ts-knob, .ts-track svg { transition: none; } }

/* a unit test that comes in an AB and a BC version (Units 6-8): the version switch above the test */
.test-versions { max-width: 760px; margin: 0 auto 18px; }
.test-versions p { margin: 0; }
.test-versions .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.test-versions .small { font-size: .9rem; }

/* ------------------------------------------------------------ teacher class pages (classwork) */
.cw-head { margin-bottom: 4px; }
.cw-title { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.cw-title h1 { margin: 0; }
.cw-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 12px 0 22px; border-bottom: 2px solid var(--soft); font-family: var(--font-ui); }
.cw-tabs a { padding: 10px 14px; color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cw-tabs a:hover { border-bottom-color: var(--soft); }
.cw-tabs a.on { border-bottom-color: var(--accent); }
.cw-intro { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.cw-intro > div { flex: 1 1 520px; }
.cw-intro h2 { margin: 0 0 4px; }
.cw-intro p { margin: 0; max-width: 46rem; }
.cw-template { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; font: 600 .9rem var(--font-ui); }
.cw-template select { width: auto; display: block; margin-top: 4px; }
details.pop > div.stack { margin-top: 10px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--rule); border-radius: var(--radius); }
.cw-setup { padding: 6px 10px 10px; }
.cw-setup table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .95rem; }
.cw-setup th, .cw-setup td { text-align: left; padding: 8px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.cw-setup thead th { font: 700 .78rem var(--font-ui); color: var(--dim); border-bottom: 2px solid var(--rule); vertical-align: bottom; }
.cw-setup select { width: auto; max-width: 13rem; padding: 6px 8px; font-size: .9rem; }
.cw-setup tr.cw-off td select:not([name$=".where"]) { opacity: .45; }
.cw-sub { display: block; font-weight: 400; font-size: .82rem; margin-top: 2px; }
.cw-fixed { display: inline-block; padding: 6px 0; font-size: .9rem; }
.cw-more { position: relative; margin-left: 0; }
.cw-more[open] { display: inline-block; margin: 0; }
.cw-more[open] > div.stack { position: absolute; right: 0; top: 100%; z-index: 15; width: 17rem; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.cw-more .stack select { width: 100%; max-width: none; }
.cw-cards { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.cw-cards > .card { flex: 1 1 340px; min-width: 0; margin: 0; }
.cw-cards h3 { margin: 0 0 8px; }
.cw-check { display: flex; gap: 8px; align-items: center; padding: 5px 0; flex-wrap: wrap; }
.cw-days { width: 3.2rem !important; padding: 3px 6px !important; display: inline-block; }
.cw-save { margin-top: 16px; }
.cw-lead { margin: -8px 0 14px; max-width: 52rem; }
.cw-cal-layout { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cw-cal-main { flex: 999 1 620px; min-width: 0; }
.cw-cal-side { flex: 1 1 300px; min-width: 0; margin: 0; }
.cw-cal-side h2 { margin: 0 0 6px; font-size: 1.25rem; }
.cw-cal-side h3 { margin: 18px 0 6px; font-size: 1rem; }
.cw-cal-side .stack label { margin-top: 8px; }
.cw-cal-side .stack input[type=datetime-local], .cw-cal-side .stack select { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.cw-cal-side input[type=datetime-local], .cw-inline input[type=date] { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; font: inherit; }
.cw-cal-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-family: var(--font-ui); }
.cw-cal { display: grid; min-width: 560px; border: 2px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cw-cal > div { border-top: 1px solid var(--soft); border-left: 1px solid var(--soft); padding: 6px; min-height: 74px; display: flex; flex-direction: column; gap: 4px; font-size: .82rem; }
.cw-cal .hd { min-height: 0; font: 700 .78rem var(--font-ui); background: var(--panel-2); border-top: 0; }
.cw-cal .wk { font: 700 .76rem var(--font-ui); color: var(--dim); border-left: 0; }
.cw-cal .day.today { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.cw-cal .day.off { background: repeating-linear-gradient(135deg, var(--panel-2) 0 6px, var(--panel) 6px 12px); }
.cw-cal .num { font: 700 .74rem var(--font-ui); color: var(--dim); }
.it { display: block; font: 700 .76rem var(--font-ui); padding: 3px 6px; border-radius: 6px; border: 1.5px solid var(--rule); background: var(--panel); color: var(--ink); text-decoration: none; line-height: 1.25; }
.cw-legend .it { display: inline-block; margin: 0 4px 0 10px; }
.cw-legend .it:first-child { margin-left: 0; }
.it.due { border-style: dashed; }
.it.quiz { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border-color: var(--hi); }
.it.unittest { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.it.sel { box-shadow: 0 0 0 3px var(--accent); }
.exc { font: 700 .7rem var(--font-ui); background: var(--hi); color: var(--panel); border-radius: 99px; padding: 0 5px; }
.cw-legend { font-size: .85rem; color: var(--dim); margin: 10px 0 0; line-height: 2; }
.cw-inline { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; font: 600 .88rem var(--font-ui); }
.cw-inline label { display: flex; flex-direction: column; gap: 4px; }
.cw-inline select, .cw-inline input[type=text] { width: auto; }
.cw-exc li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 4px 0; font-size: .92rem; }
.cw-gap { margin-top: 22px !important; }
.cw-days-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.due-line { font: 600 .92rem var(--font-ui); margin: -6px 0 10px; color: var(--ink-2); }
.late-tag { font: 700 .72rem var(--font-ui); background: var(--hi); color: var(--panel); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.gate-card { max-width: 40rem; margin-top: 10px; }
.cw-pm-bar { margin-bottom: 12px; }
.cw-row-check { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 600; }
.cw-pm { padding: 10px 14px; }
.cw-pm table { border-collapse: separate; border-spacing: 3px 0; font-size: .88rem; }
.cw-pm th, .cw-pm td { padding: 3px 0; text-align: center; border-bottom: 1px solid var(--soft); }
.cw-pm thead th { font: 700 .74rem var(--font-ui); color: var(--ink); vertical-align: bottom; padding-bottom: 6px; white-space: nowrap; }
.cw-pm thead th.focus { border-bottom: 3px solid var(--accent); }
.cw-pm thead th a { color: var(--ink-2); }
.cw-pm .who { text-align: left; padding-right: 14px; min-width: 12rem; max-width: 15rem; font-family: var(--font-ui); }
.cw-pm tbody .who { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 0; }
.cw-pm .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-pm tfoot th, .cw-pm tfoot td { border-top: 2px solid var(--rule); border-bottom: 0; padding-top: 6px; }
.cw-pm .classv { font: 700 .7rem var(--font-ui); }
.cell { position: relative; display: inline-flex; width: 28px; height: 28px; box-sizing: border-box; border: 1.5px solid var(--rule); border-radius: 5px;
  overflow: hidden; background: var(--panel); align-items: center; justify-content: center; font: 700 .78rem var(--font-ui); color: var(--ink); vertical-align: middle; }
.cell .fill { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--func) 32%, var(--panel)); }
.cell .n { position: relative; }
.cell.full { background: var(--ink); color: var(--bg); }
.cell.locked { background: var(--panel-2); border-color: var(--soft); color: var(--dim); font-weight: 400; font-size: .62rem; }
.cell.untracked { border-color: var(--soft); background: transparent; }
.cell .late { position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 10px solid var(--hi); border-left: 10px solid transparent; }
.cell .low { color: var(--accent); }
.lowp, .cell .lowp { color: var(--hi); text-decoration: underline; }
.cw-pm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: .85rem; margin-top: 12px; }
.cw-pm-legend > span { display: inline-flex; gap: 6px; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw-pm thead th a { text-decoration: none; border: 0; box-shadow: none; background: none; }
.cw-pm thead th a:hover { color: var(--hi); }
.cw-big { margin: 2px 0 6px; font-size: 1.9rem; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.cw-intro .muted a { color: inherit; }
.tag { display: inline-block; font: 700 .75rem var(--font-ui); padding: 2px 9px; border-radius: 99px; border: 1.5px solid var(--rule); color: var(--ink); background: var(--panel); white-space: nowrap; }
.tag.warn { border-color: var(--hi); color: var(--hi); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.cw-home { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.cw-home > .cw-needs, .cw-col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cw-home-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cw-home .card { margin: 0; }
.cw-home h2 { font-size: 1.25rem; margin: 0 0 10px; }
.cw-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cw-need { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft); }
.cw-need:first-of-type { border-top: 0; }
.cw-need p { flex: 1; margin: 0; }
.cw-due { margin-bottom: 12px; }
.cw-due-top { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 4px; }
.bar { display: block; height: 9px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); }
.bar.small { width: 110px; display: inline-block; vertical-align: middle; }
.bar.lowb > i { background: var(--hi); }
.cw-next { margin: 4px 0 0; }
.cw-pace { position: relative; margin: 14px 8px 0; border-bottom: 2px solid var(--rule); }
.cw-pace .dot { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--panel); }
.cw-pace .dot.none { background: var(--panel); border-color: var(--ink); }
.cw-pace .line { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1px; background: var(--accent); }
.cw-pace .line span { position: absolute; left: 6px; top: -4px; white-space: nowrap; font: 700 .72rem var(--font-ui); color: var(--hi); }
.cw-pace-axis { display: flex; justify-content: space-around; margin: 4px 8px 8px; font: 600 .74rem var(--font-ui); color: var(--dim); }
.cw-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cw-table th { text-align: left; font: 700 .76rem var(--font-ui); color: var(--dim); padding: 6px 8px; border-bottom: 2px solid var(--rule); }
.cw-table td { padding: 7px 8px; border-bottom: 1px solid var(--soft); vertical-align: middle; }
.cw-table tr.hot { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.cw-table tr.dropped td { opacity: .5; }
.cw-table code, .cw-answer code { font-size: .85rem; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }
.cw-qtext { max-width: 26rem; }
.cw-key { display: block; font-size: .8rem; margin-top: 2px; }
.cw-marks { font-family: ui-monospace, monospace; letter-spacing: 3px; }
.nowrap { white-space: nowrap; }
.inline-form { display: inline; }
.cw-hist { display: flex; gap: 8px; align-items: flex-end; height: 130px; padding-top: 6px; }
.cw-hist > div { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 .75rem var(--font-ui); flex: 1; max-width: 40px; }
.cw-hist i { display: block; width: 100%; background: var(--ink); border-radius: 3px 3px 0 0; }
.cw-answer { padding: 10px 0; border-top: 1px solid var(--soft); }
.cw-answer-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.cw-same { margin-top: 6px; padding: 6px 10px; border: 1.5px dashed var(--hi); border-radius: 8px; font-size: .88rem; }
.cw-unitbar { display: grid; grid-template-columns: 5.5rem 1fr 3rem; gap: 10px; align-items: center; font-size: .85rem; padding: 3px 0; color: var(--ink); text-decoration: none; }
.cw-unitbar.on { font-weight: 700; }
.cw-unitbar > span:last-child { text-align: right; }
.cw-miss { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 0; font-size: .92rem; }
.cw-days { display: grid; grid-template-columns: repeat(7, 16px); gap: 4px; }
.cw-days span { width: 16px; height: 16px; border-radius: 3px; background: var(--panel-2); }
.cw-days .d1 { background: color-mix(in srgb, var(--func) 30%, var(--panel)); }
.cw-days .d2 { background: color-mix(in srgb, var(--func) 65%, var(--panel)); }
.cw-days .d3 { background: var(--ink); }
.cw-home textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--rule); border-radius: 8px; padding: 8px; background: var(--panel); color: var(--ink); }
.cw-need-group { flex: 1; }
.cw-need-group summary { cursor: pointer; }
.cw-need-group ul { margin: 8px 0 0; font-size: .9rem; }
.cw-need-group li { padding: 3px 0; }
.cw-need-group li a { color: var(--ink); }
.cw-pace .line.r span { left: auto; right: 6px; }
.cw-given { background: var(--panel-2); padding: 1px 6px; border-radius: 4px; }
.cw-grades td, .cw-grades th { text-align: right; white-space: nowrap; }
.cw-grades td:first-child, .cw-grades th:first-child { text-align: left; }
.cw-grades th a { color: var(--dim); }
.cw-cat { padding: 8px 0; border-top: 1px solid var(--soft); }
.cw-cat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cw-w { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; }
.cw-w input, .cw-num, .cw-inline input[size] { width: 4.2rem !important; padding: 4px 6px; text-align: right; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.cw-rule { display: flex !important; justify-content: space-between; align-items: center; gap: 8px; font: 400 .85rem var(--font-ui) !important; margin: 6px 0 0 !important; }
.cw-rule select { width: auto; padding: 4px 6px; font-size: .85rem; }
.cw-own { border-top: 1px solid var(--soft); margin-top: 12px; padding-top: 6px; }
.cw-own h3 { margin: 4px 0; font-size: 1rem; }
.cw-enter select { width: auto; }
.me-grade, .me-due { margin: 12px 0; } .me-due li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--soft); } .me-grade h2, .me-due h2 { margin: 0 0 6px; font-size: 1.2rem; }
.me-late { color: var(--hi); font: 700 .88rem var(--font-ui); }
.timer-bar { position: sticky; top: 64px; z-index: 12; margin: 0 0 14px; padding: 8px 14px; border-radius: 8px; background: var(--ink); color: var(--bg);
  font: 700 1rem var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.timer-bar.low { background: var(--hi); color: var(--panel); }
.timer-start { max-width: 40rem; }

/* the list of classes (teacher/dashboard.html): one brief card per class, the whole card a link into it */
.class-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin: 0 0 22px; }
.class-card { display: flex; flex-direction: column; gap: 6px; height: 100%; color: inherit; text-decoration: none; }
.class-card:hover, .class-card:focus-visible { border-color: var(--accent); }
.class-card:hover .cc-open, .class-card:focus-visible .cc-open { text-decoration: underline; }
.cc-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cc-name { font-size: 1.25rem; }
.cc-facts { font-size: .92rem; }
.cc-needs { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: .92rem; }
.cc-line { padding-left: 2px; }
.cc-open { margin-top: auto; padding-top: 4px; color: var(--accent); font-weight: 600; font-size: .92rem; }
.new-class summary { cursor: pointer; }
.new-class-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 12px; }
.new-class-form label:first-child { flex: 1; min-width: 200px; }
.cw-title form.inline { display: inline; }
.cw-links { margin-left: auto; font-size: .92rem; }
ul.plain.class-cards > li { border: 0; padding: 0; margin: 0; }
[data-design] a.class-card { text-decoration: none; }
.review-head { margin: 28px 0 12px; font-size: 1.2rem; }
.review-head .muted { font-size: .95rem; font-weight: 400; }
.given-steps { margin: 8px 0 4px; padding: 8px 12px; border-left: 3px solid var(--rule); color: var(--ink-2); }