/* ==========================================================================
   LEHS Math -- MCAS apps shared skin
   --------------------------------------------------------------------------
   Borrowed from MathDOKtor's "Math Atlas" design system so the MCAS surfaces
   on lehsmath.com read as the same family as mathdoktor.com: warm paper,
   ink text, a deep slate-teal brand, and an editorial serif for display type.

   ⚠ AFTER EDITING, BUMP THE ?v= TOKEN in tools/mcas/, tools/mcas-practice/,
     and the three course banks (alg1-bank / geo-bank / alg2-bank).
     Cloudflare Pages caches /assets/* for four hours and ignores _headers.

   WHY THIS FILE HAS ITS OWN :root -- read before deleting the block.
   /assets/tool.css now carries the site's shared light palette (since
   2026-09-25; it was dark-only before, and both MCAS apps shipped without a
   light :root, usable only in dark mode). This file is loaded after it and
   re-declares the shared token names with DOKtor's warm palette on purpose:
   paper, ink, line and the rest here are a different family from the maroon
   site chrome, not a copy of it. scripts/test-tool-source.js exempts pages
   that load this file from its no-copies rule for that reason, and DOK 3,
   which loads it for the bank renderer but wants the site palette, has to
   re-declare the site values in its own :root.

   The dark block below intentionally re-overrides tool.css. Both selectors are
   html[data-theme="dark"], so equal specificity means load order decides, and
   this file is loaded after tool.css. That swaps tool.css's neutral greys for
   DOKtor's warm dark, keeping the two themes in the same family.

   FONTS: DOKtor uses Fraunces + Public Sans via next/font/google. This site's
   CSP is font-src 'self', so Google Fonts is blocked outright. We use the same
   fallback stacks DOKtor declares, which keeps the editorial serif/sans
   pairing without violating the policy or self-hosting two font families.
   ========================================================================== */

:root {
  /* Tells the browser to draw NATIVE controls to match. Without it a dark page
     still opens a blinding white <select> popup -- which is exactly where the
     unit dropdown's optgroups live, so the one part of that control a teacher
     actually reads was the part the theme never reached. Also fixes checkbox
     and scrollbar rendering across both MCAS apps. */
  color-scheme: light;

  /* ── Ink & paper ─────────────────────────────────────────────────────── */
  --bg: #f7f4ee;             /* warm paper */
  --card: #fffdf9;
  --sunken: #f1ede4;
  --line: #e3ddd0;
  --line-strong: #cfc7b6;
  --ink: #22252a;
  --ink-2: #5a5f66;
  --muted: #676c72;
  --gs: #e3ddd0;             /* alias some tools read */
  --gray-soft: #e3ddd0;

  /* ── Brand: deep slate-teal, chalkboard heritage ─────────────────────── */
  --primary: #14524f;
  --primary-light: #2a6f6b;
  --primary-dark: #0c3b39;
  --primary-tint: #e6efed;
  --on-primary: #fff;        /* text on a --primary fill */
  --accent: #a04a1a;         /* warm sienna; #b4551f read 4.28:1 on the tint, this is 5.2:1 */
  --accent-tint: #f9ede3;

  /* ── Correct / incorrect, taken from the two ends of DOKtor's ramp ───── */
  --ok: #3d5a2c;  --ok-solid: #64883f;  --ok-tint: #e4ecdd;
  --no: #93381c;  --no-solid: #bf4e26;  --no-tint: #f3ded6;

  /* LEHS maroon stays available: the student app keeps it so the page still
     belongs to the student grid rather than looking like a different site. */
  --maroon: #6E1F2E;
  --maroon-dk: #55172333;

  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-panel: 0.75rem;
  --radius-control: 0.5rem;
  --shadow-card: 0 1px 2px rgba(43,37,24,.05), 0 2px 6px rgba(43,37,24,.04);
  --shadow-pop: 0 8px 30px rgba(30,26,17,.16), 0 2px 8px rgba(30,26,17,.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191b1e;
  --card: #212428;
  --sunken: #16181b;
  --line: #34383d;
  --line-strong: #4a4f55;
  --ink: #ebe7de;
  --ink-2: #b0aca2;
  --muted: #a09d96;
  --gs: #34383d;
  --gray-soft: #34383d;

  --primary: #6fb3ae;
  --primary-light: #8cc7c2;
  --primary-dark: #4d8f8a;
  --primary-tint: #23312f;
  --on-primary: #0f1115;     /* the dark --primary is a light teal: ink on it, not white (2.4:1) */
  --accent: #d98d55;
  --accent-tint: #33271d;

  --ok: #a9c78c;  --ok-solid: #7fa457;  --ok-tint: #2b3325;
  --no: #e09675;  --no-solid: #cd6a41;  --no-tint: #392620;

  --maroon: #a83a4e;

  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
}

/* ── Header ───────────────────────────────────────────────────────────────
   --bar lets each app pick its own band: the teacher bank goes slate-teal to
   match mathdoktor.com, the student app keeps LEHS maroon. */
.bar {
  background: var(--bar, var(--primary));
  color: #fff;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px;
  position: relative;
  z-index: 30;
}
/* Dark mode's --primary is a light teal (#6fb3ae) for use as TEXT on the dark
   page background -- as a .bar FILL behind white text it is only 2.4:1. Pin
   the bar to the light theme's deep teal instead so white text stays
   readable; --bar is still the per-app override point, just with a darker
   fallback than var(--primary) would give in this theme. */
html[data-theme="dark"] .bar { background: var(--bar, #14524f); }
/* DOKtor's signature four-stop rule. Decorative only -- MCAS carries no DOK
   data, so it is never labelled or used to encode anything here. */
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg,
    #64883f 0 25%, #34749f 25% 50%, #c98a1b 50% 75%, #bf4e26 75% 100%);
}
.bar h1 {
  font-family: var(--font-display);
  font-size: 1.08rem; margin: 0; font-weight: 700; letter-spacing: .01em;
}
.bar a, .bar .lock-link, .bar .link {
  color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600;
  opacity: .92; white-space: nowrap;
}
.bar a:hover, .bar .lock-link:hover, .bar .link:hover { opacity: 1; text-decoration: underline; }
/* .link is a <button> made up to look like the .bar text links above (e.g.
   "All skills" in mcas-practice, previously an <a href="#"> that went nowhere
   for a screen reader or keyboard user). gate.js normally resets .lock-link's
   button chrome, but public pages like mcas-practice never load gate.js, so
   reset it here instead. */
.bar .link { cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.bar .spacer { margin-left: auto; }

/* Skip link: hidden until keyboard-focused, then jumps past the header
   straight to <main id="main">. Same pattern as assets/styles.css, which
   this page does not load. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--maroon); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: 0 0 10px 0; text-decoration: none;
}
.skip-link:focus-visible { left: 0; outline: 2px solid #fff; outline-offset: -4px; }

.wrap { max-width: 880px; margin: 0 auto; padding: 20px 16px 64px; }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}
.lede { color: var(--ink-2); font-size: .93rem; line-height: 1.55; margin: 2px 0 20px; }
.section-head {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px;
}
h2.display, .display {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
}

/* ── Controls ─────────────────────────────────────────────────────────── */
.btn {
  cursor: pointer; font: inherit; font-weight: 650; font-size: .9rem;
  padding: 10px 18px; border-radius: var(--radius-control);
  border: 1px solid transparent;
  background: var(--primary); color: var(--on-primary);
  transition: filter .12s, border-color .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.sec {
  background: var(--card); color: var(--primary); border-color: var(--line-strong);
}
.btn.sec:hover:not(:disabled) { border-color: var(--primary); }
.btn:focus-visible, .opt:focus-visible, .skill:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

input[type="search"], select, .input {
  font: inherit; font-size: .88rem; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background: var(--card); color: var(--ink);
}

/* ── Tags ─────────────────────────────────────────────────────────────── */
.tag {
  background: var(--sunken); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px;
  font-size: .71rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2);
}
.tag.brand { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.tag.mcas  { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.tag.unit  { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.tag.dok1 { background: var(--sunken); color: var(--ink-2); }
.tag.dok2 { background: var(--primary-tint); color: var(--primary); border-color: transparent; }
.tag.dok3 { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.tag.dok4 { background: #fff1d6; color: #8a5a00; border-color: transparent; }
html[data-theme="dark"] .tag.dok4 { background: #3a2e10; color: #e6c27a; }

/* Course switcher in the teacher-bank header. */
.course-nav {
  display: inline-flex; border: 1px solid rgba(255,255,255,.42);
  border-radius: 6px; overflow: hidden; margin-right: 8px;
}
.course-nav a {
  color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700;
  padding: 5px 10px; background: rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.28);
}
.course-nav a:last-child { border-right: 0; }
.course-nav a:hover { background: rgba(255,255,255,.24); }
.course-nav a.on { background: #fff; color: var(--bar, var(--primary)); }
/* Since 2026-10-03 the switcher is one select plus an "All banks" link. */
.course-nav select {
  font: inherit; font-size: .82rem; font-weight: 700; min-height: 44px;
  padding: 5px 8px; border: 0; border-right: 1px solid rgba(255,255,255,.28);
  background: #fff; color: #1b1b1d; max-width: 46vw;
}
.course-nav a.all-banks { display: inline-flex; align-items: center; min-height: 44px; }

/* Phone width: MCAS Bank measured +121px overflow -- the worst of the nine
   teacher pages in this audit, since it stacks .course-nav on top of the
   usual back link / h1 / badges / Lock. Wrap the bar and let the course
   switcher wrap internally too, instead of pushing Lock off-screen. */
@media (max-width: 560px) {
  .bar { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .bar h1 { flex: 1 1 100%; order: -1; }
  .course-nav { flex-wrap: wrap; }
}

/* Shared teacher-bank chrome (course DOK banks). MCAS still inlines its own
   copy so a stylesheet cache miss cannot blank that page. */
.filters {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-card);
  padding: 13px 15px; margin-bottom: 14px;
}
.frow { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.frow + .frow { margin-top: 9px; }
.filters input[type=search] { flex: 1; min-width: 200px; }
.chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 650; color: var(--ink-2); cursor: pointer;
}
.chk select { margin-left: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-control); overflow: hidden; }
.seg button {
  font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer;
  padding: 7px 13px; border: 0; background: var(--card); color: var(--ink-2);
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--sunken); }
.seg button.on { background: var(--primary); color: var(--on-primary); }
/* All + DOK 1-4 + MCAS do not fit at 390 and overflow:hidden cut the last
   pill to "MCA". Let the control wrap: the frame keeps the top and left
   edges and each button draws its own right and bottom edge, so a second
   row is boxed like the first instead of floating under it. */
@media (max-width: 560px) {
  .seg { flex-wrap: wrap; border-right: 0; border-bottom: 0; }
  .seg button, .seg button:last-child {
    flex: 1 1 auto;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
  }
}
.tag.unit.auto { border-bottom: 1px dotted currentColor; cursor: help; }
.tag.simbtn {
  cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line); background: transparent; color: var(--primary);
}
.tag.simbtn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.tag.stdbtn {
  cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700;
  border: 1px solid var(--line); background: transparent; color: var(--primary);
}
.tag.stdbtn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.stdpanel {
  margin: 0 0 6px; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--card));
  font-size: .84rem; line-height: 1.55;
}
.stdpanel[hidden] { display: none; }
.stdpanel .std-label { font-weight: 700; color: var(--primary); margin: 0 0 4px; }
.stdpanel .std-desc { margin: 0 0 6px; }
.stdpanel .std-from { margin: 0; color: var(--muted); font-size: .78rem; }
.stdpanel .std-from b { color: var(--ink); font-weight: 600; }
.stdpanel .std-attr { margin: 6px 0 0; color: var(--muted); font-size: .72rem; }
.stdpanel .std-attr a { color: var(--muted); }
.simbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--card));
  font-size: .86rem;
}
.simbar span { flex: 1; min-width: 220px; }
/* display:flex above beats the UA's [hidden] rule, and the banner is hidden
   until a Similar click -- without this an empty bar sat under the filters. */
.simbar[hidden] { display: none; }
.count {
  font-size: .85rem; color: var(--muted); margin: 0 0 12px;
  display: flex; gap: 11px; align-items: center; flex-wrap: wrap;
}
.count b { color: var(--ink); font-size: .98rem; font-family: var(--font-display); }
.item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-panel); box-shadow: var(--shadow-card);
  padding: 15px 17px; margin-bottom: 11px;
}
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.meta > span:last-child { font-size: .7rem; color: var(--muted); }
.pick { float: right; margin-left: 10px; }
.pick input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }
.exbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 12px;
}
.exbar .exbtn {
  cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--card); color: var(--primary);
}
.exbar .exbtn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.exbar .ex-ok { font-size: .75rem; font-weight: 650; color: var(--ok); }
.ws-head .exbar { margin-top: 0; }
.ch { margin-top: 11px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
.ch div {
  font-size: .92rem; padding: 6px 10px;
  border-radius: var(--radius-control); border: 1px solid var(--line);
  background: var(--sunken);
}
.ch img { max-width: 160px; }
.ch .k { font-weight: 800; color: var(--muted); margin-right: 6px; }
body.keys .ch .yes { background: var(--ok-tint); border-color: var(--ok-solid); }
body.keys .ch .yes .k { color: var(--ok); }
.tag.practice { font-style: italic; }
.ans { margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--ok); display: none; }
body.keys .ans { display: block; }
/* an answer that is a picture (the OpenStax banks' graphs) */
.ans .ans-fig { margin: 6px 0 0; }
.ans .ans-fig img { max-height: 240px; background: #fff; }

/* Directions. The instruction that belonged to a run of exercises: shown
   above a single problem rephrased for one, or once as a heading over a
   regrouped run on a worksheet. Built from existing tokens, so no separate
   dark block. */
.dir {
  font-size: .82rem; font-weight: 700; color: var(--primary);
  margin: 0 0 8px; letter-spacing: .01em;
}
.dir-run { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.dir-run > li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; }
.dir-run > li + li { border-top: 1px dashed var(--line); }
.dir-n { font-weight: 800; color: var(--muted); min-width: 1.6em; }
.dir-run .qtext { margin: 0; }

/* Quality flags. NOTE the `qflag` prefix: `.flag` is already taken by
   test-results in tool.css, whose dark rule (html[data-theme="dark"] .flag)
   outranks a bare class and silently repainted both chips the same red.

   Amber for "worth knowing", red for "cannot be answered". Amber for "worth knowing", red for "cannot be answered".
   Both use tokens that exist in light and dark, so there is deliberately no
   second block below to keep in sync. */
.qflags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.qflag {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: var(--radius-control);
  border: 1px solid transparent;
}
.qflag-warn { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.qflag-stop { background: var(--no-tint); color: var(--no); border-color: var(--no-solid); font-weight: 800; }

/* Multi-part items. Built only from existing tokens, so there is deliberately
   no dark override below -- adding one would be a second place to keep in
   sync. The rule above still governs whether part answers are visible. */
.parts { margin-top: 12px; border-left: 3px solid var(--line-strong); padding-left: 14px; }
.part { padding: 10px 0; }
.part + .part { border-top: 1px dashed var(--line); }
.part-label {
  display: inline-block; font-weight: 800; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint);
  padding: 2px 8px; border-radius: var(--radius-control); margin-bottom: 6px;
}
.part .qtext { margin-top: 4px; }
.part .fig { margin: 10px 0; }
/* Worksheet only: room to actually answer the part by hand. */
.part-space { display: none; }
.more { display: block; margin: 16px auto; }
.loading, .empty { padding: 46px 0; text-align: center; color: var(--muted); }
.import-note { font-size: .9rem; line-height: 1.5; max-width: 36em; margin: 0 auto; }
#sheet { display: none; }
body.sheet #list, body.sheet .filters, body.sheet .count, body.sheet .simbar { display: none; }
body.sheet #sheet { display: block; }
body.sheet .wrap { max-width: 9.4in; }
body.sheet[data-ws-cols="2"] .wrap { max-width: 10.4in; }

/* Toolbar above the printable paper. Hidden on print. */
.ws-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ws-head-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ws-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 0; flex: 1; min-width: 180px; }
.btn.sm { padding: 6px 12px; font-size: .82rem; }
#ws-controls {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-panel); padding: 12px 14px;
}
.ws-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
.ws-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ws-field.wide { grid-column: 1 / -1; }
.ws-field span { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ws-field input, .ws-field select, .ws-field textarea {
  font: inherit; font-size: .88rem; font-weight: 600;
  padding: 7px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-control); background: var(--bg); color: var(--ink);
}
.ws-field textarea { resize: vertical; min-height: 2.6em; line-height: 1.35; }
.ws-toggles { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 10px; }

/* The printed page itself -- always ink-on-paper, even in dark mode. */
#ws-paper {
  background: #fff; color: #222;
  padding: 28px 32px 40px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
#ws-body { color: #222; background: #fff; }
#ws-body .qtext { color: #222; }
#ws-body .part-label { color: #14524f; background: #e6efed; }
#ws-body .ch div { background: #f7f4ee; border-color: #e3ddd0; color: #222; }
#ws-body .ch .k { color: #5a5f66; }

.ws-mast { border-bottom: 2.5px solid #6E1F2E; margin: 0 0 22px; padding: 0 0 14px; }
.ws-mast-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ws-brand {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6E1F2E;
}
.ws-course { font-size: .82rem; color: #5a5f66; font-weight: 650; }
.ws-score {
  margin-left: auto; display: flex; align-items: flex-end; gap: 6px;
  font-size: .82rem; font-weight: 700; color: #5a5f66;
}
.ws-score b {
  display: inline-block; min-width: 3.2em; height: 1.15em;
  border-bottom: 1.5px solid #222;
}
.ws-mast-title {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  margin: 8px 0 12px; letter-spacing: -.01em; color: #222;
  cursor: text;
}
.ws-blanks { display: flex; gap: 16px; margin: 0 0 8px; }
.ws-blank { flex: 1; display: flex; gap: 6px; align-items: flex-end; font-size: .84rem; color: #5a5f66; }
.ws-blank i { font-style: normal; font-weight: 700; }
.ws-blank b { flex: 1; border-bottom: 1.5px solid #222; height: 1.15em; }
.ws-blank.short { flex: 0 0 8.5em; }
.ws-blank.tiny { flex: 0 0 5.2em; }
.ws-dir { margin: 8px 0 0; font-size: .92rem; color: #222; cursor: text; }
.ws-dir-hint {
  margin: 8px 0 0; font-size: .92rem; color: #8a8580; font-style: italic;
  cursor: text; border-bottom: 1px dashed #cfc7b6; display: inline-block;
}

.ws-items { display: flex; flex-direction: column; gap: 0; }
.ws-items.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.ws-item { margin: 0 0 26px; page-break-inside: avoid; break-inside: avoid; }
.ws-item .n { font-weight: 800; margin-right: 7px; }
.ws-q { display: flex; gap: 10px; align-items: flex-start; }
.ws-num {
  flex: 0 0 1.7em; width: 1.7em; height: 1.7em;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #222; border-radius: 4px;
  font-weight: 800; font-size: .92rem; line-height: 1; margin-top: 2px;
}
.ws-stem { flex: 1; min-width: 0; }
.ws-pts-slot {
  flex: 0 0 auto; margin-top: 2px; min-width: 3.4em; text-align: right;
}
.ws-pts {
  display: none;
  font-size: .78rem; font-weight: 800; color: #5a5f66;
  letter-spacing: .02em; white-space: nowrap;
}
.ws-pts-edit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 800; color: #5a5f66;
  letter-spacing: .03em; text-transform: uppercase; cursor: text;
}
.ws-pts-edit b { font-style: normal; font-weight: 800; }
.ws-pts-in {
  width: 2.2em; font: inherit; font-size: .82rem; font-weight: 800;
  text-align: center; padding: 3px 0; color: #222; background: #fff;
  border: 1.5px solid #6E1F2E; border-radius: 4px;
  -moz-appearance: textfield;
}
.ws-pts-in::-webkit-outer-spin-button,
.ws-pts-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-id { margin-top: 6px; font-size: .7rem; color: #7d8288; }
.ws-origin {
  margin-top: 6px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: #6E1F2E;
}
.ws-items.cols-2 .fig img { max-height: 28vh; }
.ws-items.cols-2 .ch { grid-template-columns: 1fr; }

.ws-lines {
  margin: 10px 0 0 2.1em;
  background-repeat: repeat-y;
  background-size: 100% 1.45em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.45em - 1px),
    #cfc7b6 calc(1.45em - 1px),
    #cfc7b6 1.45em
  );
}
.ws-lines[data-n="3"] { height: calc(3 * 1.45em); }
.ws-lines[data-n="4"] { height: calc(4 * 1.45em); }
.ws-lines[data-n="6"] { height: calc(6 * 1.45em); }
.ws-lines[data-n="10"] { height: calc(10 * 1.45em); }

body.sheet .part-space {
  display: block; height: calc(4 * 1.45em); margin-top: 8px;
  background-repeat: repeat-y; background-size: 100% 1.45em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(1.45em - 1px),
    #cfc7b6 calc(1.45em - 1px),
    #cfc7b6 1.45em
  );
}
body.sheet[data-ws-space="none"] .part-space { display: none; }
body.sheet[data-ws-space="short"] .part-space { height: calc(3 * 1.45em); }
body.sheet[data-ws-space="medium"] .part-space { height: calc(6 * 1.45em); }
body.sheet[data-ws-space="long"] .part-space { height: calc(10 * 1.45em); }
body.sheet[data-ws-key="inline"] .part-space { height: calc(2 * 1.45em); }

.ws-inline-ans { margin: 8px 0 0 2.1em; font-size: .88rem; font-weight: 700; color: #3d5a2c; }
.ws-key {
  margin-top: 28px; padding-top: 18px; border-top: 2px solid #cfc7b6;
  break-before: page; page-break-before: always;
}
.ws-key h2 { font-family: var(--font-display); margin: 0 0 4px; font-size: 1.15rem; color: #222; }
.ws-key-note { margin: 0 0 12px; font-size: .82rem; color: #5a5f66; }
.ws-key-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 28px;
}
.ws-key-list li {
  break-inside: avoid; display: flex; gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid #eee; font-size: .92rem;
}
.ws-key-list .k-n { font-weight: 800; min-width: 1.6em; color: #222; }
.ws-key-list .k-a { flex: 1; }
.ws-key-list .k-pts { font-size: .72rem; font-weight: 700; color: #5a5f66; white-space: nowrap; }
.ws-key-list .k-id { font-size: .7rem; color: #7d8288; }
.ws-key-list .k-origin { font-size: .7rem; font-weight: 700; color: #6E1F2E; white-space: nowrap; }

.key { margin-top: 28px; padding-top: 15px; border-top: 2px solid var(--line-strong); }
.key h3 { font-family: var(--font-display); margin: 0 0 9px; font-size: 1rem; }
.key ol { margin: 0; padding-left: 22px; font-size: .9rem; columns: 2; }
@media (max-width: 720px) {
  .ws-grid { grid-template-columns: 1fr 1fr; }
  .ws-items.cols-2 { grid-template-columns: 1fr; }
  .ws-blanks { flex-wrap: wrap; }
  .ws-key-list { columns: 1; }
  #ws-paper { padding: 18px 16px 28px; }
}
.dn { margin: 0 0 18px; padding: 16px 18px; border-radius: 14px;
      background: var(--card); border: 1px solid var(--line); }
.dn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dn-head h2 { margin: 0; flex: 1; font-size: 1.05rem; }
.dn-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dn-row input[type=text] {
  flex: 1; min-width: 200px; font: inherit; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--bg); color: var(--ink);
}
.dn ol { margin: 0 0 14px; padding-left: 20px; font-size: .87rem; }
.dn li { margin: 4px 0; }
.dn .drop { color: var(--muted); }
.dn .drop b { color: var(--accent); font-weight: 700; }
.dn-note { font-size: .84rem; color: var(--muted); margin: 0 0 12px; }
.dn-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2.6rem; font-weight: 800; letter-spacing: .14em;
  text-align: center; margin: 10px 0; color: var(--primary);
}
.dn-err { color: var(--accent); font-size: .87rem; font-weight: 600; }
.aid-checks { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.aid-checks > p { margin: 0 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.aid-checks label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; margin: 6px 0; }
.aid-checks input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
@media print {
  /* Ctrl+P on a bank page prints the worksheet preview and nothing else. The
     PDF button opens a dedicated print document (assets/worksheet-print.js);
     this block is the fallback for a teacher who just hits print. */
  .bar, .filters, .count, .ws-head, .no-print, .course-nav, .simbar,
  .stdpanel, .lock-link, .dn, #dn, #loading, .sheet-pop, .bar-tool,
  body.sheet #list { display: none !important; }
  body.sheet #sheet { display: block !important; }
  .ws-pts-edit { display: none !important; }
  .ws-pts { display: block; }
  .ws-item { break-inside: avoid; page-break-inside: avoid; }
  .ws-key { break-before: page; page-break-before: always; }
  body { background: #fff; color: #000; }
  .wrap { max-width: none !important; padding: 0; }
  #ws-paper { border: 0; box-shadow: none; padding: 0; }
  .ws-item { margin-bottom: 20px; }
  .fig img { max-height: none; padding: 0; border: 0; }
  .ws-items.cols-2 .fig img { max-height: 2.3in; }
  a[href]:after { content: ""; }
}

/* ── Misconceptions panel ─────────────────────────────────────────────── */
.misc {
  margin: 0 0 12px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-panel);
  background: var(--sunken); font-size: .86rem;
}
.misc[hidden] { display: none; }
.misc summary {
  cursor: pointer; padding: 10px 14px;
  font-weight: 700; font-size: .84rem; color: var(--ink-2);
  list-style: revert;
}
.misc summary:hover { color: var(--primary); }
.misc-list {
  list-style: disc; margin: 0 0 6px; padding: 4px 14px 8px 34px;
  color: var(--ink); line-height: 1.55;
}
.misc-list li { margin: 3px 0; }
.misc-attr {
  margin: 0; padding: 4px 14px 10px;
  font-size: .72rem; color: var(--muted); line-height: 1.45;
}
.misc-attr a { color: var(--muted); }
@media print { .misc { display: none !important; } }

/* ── Question body ────────────────────────────────────────────────────── */
.qtext { font-size: 1.02rem; line-height: 1.6; }
.qtext p { margin: 0 0 .55em; }
.qtext p:last-child { margin-bottom: 0; }
.qtext .katex-display { margin: .7em 0; }
.mny { white-space: nowrap; }

/* Figures are black line art on a transparent ground -- without a white plate
   they disappear in dark mode. Capped so a tall diagram cannot push the answer
   choices off screen. */
.fig { margin: 14px 0; text-align: center; }
.fig img {
  max-width: 100%; max-height: 48vh; width: auto;
  border-radius: var(--radius-control);
  background: #fff; padding: 8px;
  border: 1px solid var(--line);
}

/* Header tool buttons (Sheet, and the practice app's Desmos). White-on-bar
   so they read as chrome, not as the page. */
.bar-tool {
  cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700;
  padding: 5px 12px; border-radius: 6px; white-space: nowrap;
  color: #fff; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.42);
}
.bar-tool:hover { background: rgba(255,255,255,.28); }
.bar-tool[aria-expanded="true"] {
  background: #fff; color: var(--bar, var(--primary)); border-color: #fff;
}

/* Official Grade 10 sheet, full-screen overlay -- the same motion as the
   real MCAS formula-sheet button. The PNG is the DESE artifact; keep it
   on a white plate in both themes so the printed page stays readable. */
.sheet-pop {
  position: fixed; left: 0; right: 0; bottom: 0; top: 56px;
  z-index: 20;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.sheet-pop[hidden] { display: none !important; }
.sheet-pop__head {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.sheet-pop__head h2 {
  margin: 0; flex: 1; font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700;
}
.sheet-pop__close {
  cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700;
  padding: 6px 12px; border-radius: 6px;
  background: var(--sunken); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.sheet-pop__body {
  flex: 1; overflow: auto; padding: 12px 14px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  background: var(--sunken);
}
.sheet-pop__body img {
  display: block; width: min(920px, 100%); height: auto;
  margin: 0 auto; background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
html.sheet-open, body.sheet-open {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
@media print {
  .sheet-pop, .bar-tool { display: none !important; }
}