/* exam.4ab.in — /teach/ TEACHING WORKSPACE  (V.10, 2026-09-12)
 * =============================================================================
 * The owner's master data, §1: "ALL SELECTION / ACTION CONTROLS MUST BE IN THE
 * FOOTER." Everything here serves that one rule — the question is the hero, the
 * header is a thin metadata strip, and every tool lives in a sticky footer that
 * has two modes (normal / whiteboard).
 *
 * This file is DELIBERATELY UNLAYERED. ab-design-system.css ships inside
 * `@layer ab-design-system`, and an unlayered rule beats a layered one whatever
 * its specificity, so these components win without a specificity arms race.
 *
 * Palette is the spec's own (§33): #0B4EA2 primary, #1976D2 secondary,
 * #F5F9FF page, #FFFFFF card.
 * =========================================================================== */

:root {
  --tb-pri:   #0B4EA2;          /* brand: fills, borders, focus */
  --tb-pri-i: #0B4EA2;          /* brand AS TEXT — must answer per theme */
  --tb-link:  #1565C0;          /* #1976D2 measures 4.36 on white; this is 5.1 */
  --tb-sec:   #1976D2;
  --tb-page:  #F5F9FF;
  --tb-card:  #FFFFFF;
  --tb-ink:   #10203A;
  --tb-body:  #46536B;
  --tb-mute:  #5C6B85;          /* #6B7A93 measured 4.35 on white — under AA */
  --tb-line:  #DCE6F5;
  --tb-line2: #EDF3FC;
  --tb-ok:    #12805C;
  --tb-okbg:  #E8F7F0;
  --tb-warn:  #B45309;
  --tb-err:   #C62828;
  --tb-errbg: #FDECEC;
  --tb-grid:  rgba(11, 78, 162, .16);
  --tb-board: #FFFFFF;
  --tb-sh:    0 1px 2px rgba(16, 32, 58, .05), 0 8px 24px rgba(16, 32, 58, .06);
  --tb-sh-up: 0 -2px 6px rgba(16, 32, 58, .05), 0 -14px 34px rgba(16, 32, 58, .07);

  --wb-scale: 1;          /* text-size control — same key/behaviour as V.9 */
  --wbf-h: 100px;         /* real footer height, written by a ResizeObserver */
  --hdr-h: 56px;          /* real site-header height, written by a ResizeObserver */
  --tb-rail: 296px;
}

/* The dark board is a projector setting, not the site theme: it repaints the
   workspace only, and the site chrome above it is left alone. */
body.wb-board {
  --tb-page:  #070C18;
  --tb-card:  #101A2E;
  --tb-ink:   #EEF3FF;
  --tb-pri-i: #7FB2FF;          /* the brand navy is 2.17:1 on this card */
  --tb-link:  #8AB9FF;
  --tb-ok:    #4ADE80;          /* #12805C is 2.6:1 on the dark answer panel */
  --tb-err:   #FCA5A5;
  --tb-body:  #C3CFE6;
  --tb-mute:  #93A3C0;
  --tb-line:  #26334F;
  --tb-line2: #1A2438;
  --tb-grid:  rgba(190, 210, 245, .17);
  --tb-board: #0B1220;
  --tb-okbg:  #0E2A20;
  --tb-errbg: #2C1417;
  --tb-sh:    0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --tb-sh-up: 0 -2px 6px rgba(0, 0, 0, .4), 0 -14px 34px rgba(0, 0, 0, .35);
}

/* AN <svg> WITH NO WIDTH IS 300x150, NOT "the size of its box". That default
   turned the option cards' check mark into a 300x158 block, which both inflated
   every card and squeezed the option text into a 298px column. Give every icon
   on this page a size FIRST, at low specificity, so each component can still
   name its own below — and never rely on a component rule existing. */
.wbp svg, .wbf svg, .wbpop svg { width: 19px; height: 19px; flex: none; }

/* ---------------------------------------------------------------- page shell */

body.ex-p-app {
  background: var(--tb-page);
  color: var(--tb-ink);
  /* §20: reserve the footer's real height plus the phone's home-indicator
     inset, so the footer can never sit on top of the question. */
  padding-bottom: calc(var(--wbf-h) + env(safe-area-inset-bottom, 0px));
}

.wbp {
  display: grid;
  grid-template-columns: var(--tb-rail) minmax(0, 1fr);
  align-items: start;
  min-height: calc(100dvh - var(--hdr-h) - var(--wbf-h));
}

/* ------------------------------------------------------------- filter rail */

.wbp__rail {
  position: sticky;
  top: var(--hdr-h);
  max-height: calc(100dvh - var(--hdr-h) - var(--wbf-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: calc(100dvh - var(--hdr-h) - var(--wbf-h));
  padding: 16px 16px 24px;
  border-right: 1px solid var(--tb-line);
  background: var(--tb-card);
}
.wbp__rail h2 {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  margin: 16px 0 8px; color: var(--tb-mute); font-weight: 700;
}
.wbp__rail h2:first-child { margin-top: 0; }
.wbp__rail select,
.wbp__rail input {
  width: 100%; margin-bottom: 8px; min-height: 40px;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--tb-line); background: var(--tb-card); color: var(--tb-ink);
  font: inherit; font-size: .92rem;
}
.wbp__rail select:focus-visible,
.wbp__rail input:focus-visible { outline: 3px solid rgba(25, 118, 210, .45); outline-offset: 1px; }
.wbp__rail select option { background: var(--tb-card); color: var(--tb-ink); }
.wbp__rail input::placeholder { color: var(--tb-mute); opacity: 1; }
.wbp__count { font-size: .86rem; color: var(--tb-body); margin: 12px 0 10px; }
.wbp__ocr { margin: 10px 0 0; font-size: .82rem; color: var(--tb-warn); line-height: 1.45; }
.wbp__railclose { display: none; }
.wbp__scrim { display: none; }

/* ------------------------------------------------------------------- main */

.wbp__main { min-width: 0; padding: 14px 22px 22px; }

/* §3 — the compact header. This is the ONLY thing above the question. */
.wbq-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 12px;
}
.wbq-head__crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-width: 0; font-size: .88rem; color: var(--tb-body); line-height: 1.35;
}
.wbq-head__subj {
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  font-size: .76rem; color: var(--tb-pri-i);
}
.wbq-head__sep { color: var(--tb-mute); opacity: .7; }
.wbq-head__mid { display: contents; }
.wbq-head__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wbq-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(11, 78, 162, .08); color: var(--tb-pri-i);
  border: 1px solid rgba(11, 78, 162, .16); white-space: nowrap;
}
body.wb-board .wbq-tag { background: rgba(120, 170, 255, .13); color: #9EC2FF; border-color: rgba(120, 170, 255, .26); }
.wbq-tag--easy  { background: var(--tb-okbg); color: var(--tb-ok); border-color: rgba(18, 128, 92, .25); }
.wbq-tag--hard  { background: var(--tb-errbg); color: var(--tb-err); border-color: rgba(198, 40, 40, .25); }
.wbq-tag--qid   { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; text-transform: none; }
.wbq-head__pos {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: .86rem; color: var(--tb-body); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wbq-head__pos b { color: var(--tb-ink); }
.wbq-head__bar { width: 96px; height: 5px; border-radius: 999px; background: var(--tb-line2); overflow: hidden; }
.wbq-head__bar i { display: block; height: 100%; background: var(--tb-sec); border-radius: 999px; transition: width .2s ease; }
.wbq-head__link { color: var(--tb-link); font-size: .84rem; text-decoration: none; white-space: nowrap; }
.wbq-head__link:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ split */

.wbp__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
/* With the board open, .wbp__main itself becomes the two-column grid and the
   split wrapper dissolves (display:contents): the header line sits in the
   question column only, so the board column starts at the very top of the
   main area and its sticky height reaches the footer without overflowing. */
.wbp.is-board .wbp__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
.wbp.is-board .wbp__split { display: contents; }
.wbp.is-board .wbq-head { grid-column: 1; grid-row: 1; }
.wbp.is-board .wbp__qcol { grid-column: 1; grid-row: 2; min-width: 0; }
.wbp.is-board .wbp__bcol { grid-column: 2; grid-row: 1 / 3; }
/* Owner (2026-09-12): the open board wants more room — an even split, and the
   filter rail steps back to 232px while the board is open so the board gains it. */
.wbp.is-board { --tb-rail: 232px; }
/* §7 expanded: the board takes most of the viewport, the question shrinks to a
   small reference panel. */
.wbp.is-expand .wbp__main { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }

/* ------------------------------------------------------------ question card */

.wbq {
  position: relative;
  background: var(--tb-card);
  border: 1px solid var(--tb-line);
  border-radius: 20px;
  box-shadow: var(--tb-sh);
  padding: 22px 24px 26px;
  min-height: 40vh;
}
.wbp.is-expand .wbq {
  padding: 14px 15px 16px;
  max-height: calc(100dvh - var(--hdr-h) - var(--wbf-h) - 90px);
  overflow: auto; overscroll-behavior: contain;
  min-height: 0;
}
.wbq__stem { font-size: calc(2.25rem * var(--wb-scale)); line-height: 1.34; font-weight: 600; margin: 0 0 20px; color: var(--tb-ink); }
.wbp.is-expand .wbq__stem { font-size: calc(1.05rem * var(--wb-scale)); margin-bottom: 12px; }
.wbq__opts { display: grid; gap: 10px; }

/* §6 — every option is a selectable card. The key is NEVER shown before
   Show Answer; the selected state is the reader's own choice only. */
.wbq__opt {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  text-align: left; font: inherit;
  font-size: calc(1.6rem * var(--wb-scale)); line-height: 1.4;
  padding: 12px 16px; min-height: 44px;
  border: 1.5px solid var(--tb-line); border-radius: 14px;
  background: var(--tb-card); color: var(--tb-ink);
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}
.wbp.is-expand .wbq__opt { font-size: calc(.95rem * var(--wb-scale)); padding: 8px 11px; border-radius: 10px; }
.wbq__opt:hover { border-color: var(--tb-sec); box-shadow: 0 3px 12px rgba(25, 118, 210, .14); transform: translateY(-1px); }
.wbq__opt:focus-visible { outline: 3px solid rgba(25, 118, 210, .5); outline-offset: 2px; }
.wbq__opt > b { flex: none; min-width: 2.1em; font-weight: 700; color: var(--tb-pri-i); }
.wbq__opt > span { min-width: 0; }
.wbq__opt .wbq__optmark { margin-left: auto; flex: none; opacity: 0; align-self: center; display: inline-flex; }
.wbq__opt .wbq__optmark svg { width: 24px; height: 24px; }
.wbq__opt[aria-pressed="true"] {
  border-color: var(--tb-pri); background: rgba(11, 78, 162, .05);
  box-shadow: 0 0 0 1px var(--tb-pri) inset;
}
.wbq__opt[aria-pressed="true"] .wbq__optmark { opacity: 1; color: var(--tb-pri-i); }
/* after Show Answer */
.wbq__opt.is-right { border-color: var(--tb-ok); background: var(--tb-okbg); box-shadow: 0 0 0 1px var(--tb-ok) inset; }
.wbq__opt.is-right > b, .wbq__opt.is-right .wbq__optmark { color: var(--tb-ok); opacity: 1; }
.wbq__opt.is-wrong { border-color: var(--tb-err); background: var(--tb-errbg); box-shadow: 0 0 0 1px var(--tb-err) inset; }
.wbq__opt.is-wrong > b, .wbq__opt.is-wrong .wbq__optmark { color: var(--tb-err); opacity: 1; }
.wbq__opt.is-locked { cursor: default; }
.wbq__opt.is-locked:hover { transform: none; box-shadow: none; border-color: var(--tb-line); }
.wbq__opt.is-locked.is-right:hover { border-color: var(--tb-ok); box-shadow: 0 0 0 1px var(--tb-ok) inset; }
.wbq__opt.is-locked.is-wrong:hover { border-color: var(--tb-err); box-shadow: 0 0 0 1px var(--tb-err) inset; }

.wbq__stem img, .wbq__opt img {
  max-width: 100%; height: auto; vertical-align: middle;
  transform: scale(var(--wb-scale)); transform-origin: left center;
}
body.wb-board .wbq__stem img, body.wb-board .wbq__opt img { background: #fff; border-radius: 6px; padding: 4px; }

/* §22 / §23 — answer + explanation */
.wbq__ans {
  margin-top: 22px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid rgba(18, 128, 92, .3); background: var(--tb-okbg);
  font-size: calc(1.5rem * var(--wb-scale)); line-height: 1.45;
}
.wbp.is-expand .wbq__ans { font-size: calc(.95rem * var(--wb-scale)); padding: 10px 12px; margin-top: 12px; }
.wbq__ans .k { font-weight: 700; color: var(--tb-ok); display: inline-flex; align-items: center; gap: 8px; }
.wbq__ans .k svg { width: 1em; height: 1em; }
.wbq__ans--none { border-color: rgba(180, 83, 9, .35); background: rgba(217, 119, 6, .08); }
.wbq__ans--none .k { color: var(--tb-warn); }
.wbq__warn { font-weight: 700; font-size: calc(1.35rem * var(--wb-scale)); color: var(--tb-warn); }
.wbq__expl { margin-top: 10px; font-size: calc(1.2rem * var(--wb-scale)); line-height: 1.55; color: var(--tb-body); }
.wbp.is-expand .wbq__expl { font-size: calc(.9rem * var(--wb-scale)); }
.wbq__expl h4 {
  margin: 0 0 6px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-mute); font-weight: 700;
}
.wbq__note { margin-top: 8px; font-size: calc(.85rem * var(--wb-scale)); color: var(--tb-mute); }
.wbq__empty { font-size: 1.15rem; color: var(--tb-body); }

/* Annotation canvas over the question (V.9's ink layer, kept and extended).
   It only takes the pointer while the Question surface is being drawn on, so
   option cards, links and the rail keep working mid-lesson. */
.wbq__ink { position: absolute; inset: 0; z-index: 5; pointer-events: none; touch-action: none; }
body.wb-ink-q .wbq__ink { pointer-events: auto; cursor: crosshair; }
body.wb-ink-q .wbq > :not(.wbq__ink) { user-select: none; }

/* ------------------------------------------------------------ board panel */

.wbp__bcol { display: none; min-width: 0; }
.wbp.is-board .wbp__bcol {
  display: flex; flex-direction: column;
  position: sticky; top: calc(var(--hdr-h) + 14px);   /* = .wbp__main padding-top, so natural and stuck positions agree */
  height: calc(100dvh - var(--hdr-h) - var(--wbf-h) - 14px);
  min-height: 300px;
}
.wbp.is-expand .wbp__bcol { top: calc(var(--hdr-h) + 14px); height: calc(100dvh - var(--hdr-h) - var(--wbf-h) - 14px); }
body.wb-max .wbp.is-board .wbp__bcol { top: 10px; height: calc(100dvh - var(--wbf-h) - 10px); }

.wbb {
  flex: 1; min-height: 0; position: relative;
  border: 1px solid var(--tb-line); border-radius: 18px; overflow: hidden;
  background: var(--tb-board); box-shadow: var(--tb-sh);
  display: flex; flex-direction: column;
}
.wbb__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--tb-line);
  font-size: .78rem; color: var(--tb-mute); flex: none;
  background: var(--tb-card);
}
.wbb__head b { color: var(--tb-ink); font-size: .82rem; }
.wbb__save { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbb__save.is-saved { color: var(--tb-ok); }
.wbb__wrap { position: relative; flex: 1; min-height: 0; touch-action: none; }
.wbb__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.wbb__cv[data-grid="dot"] {
  background-image: radial-gradient(circle, var(--tb-grid) 1.1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px;
}
.wbb__cv[data-grid="square"] {
  background-image: linear-gradient(var(--tb-grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--tb-grid) 1px, transparent 1px);
  background-size: 26px 26px;
}
.wbb__cv[data-grid="ruled"] {
  background-image: linear-gradient(var(--tb-grid) 1px, transparent 1px);
  background-size: 100% 30px;
}
body.wb-surf-q .wbb__cv { cursor: default; }
.wbb__hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--tb-mute); font-size: .9rem; text-align: center; pointer-events: none;
  max-width: 78%; line-height: 1.5;
}
.wbb__hint[hidden] { display: none; }
/* the live text editor */
.wbb__te {
  position: absolute; z-index: 6; min-width: 120px; max-width: 90%;
  border: 1.5px dashed var(--tb-sec); border-radius: 6px;
  background: rgba(255, 255, 255, .94); color: #111;
  padding: 2px 5px; font-family: inherit; outline: none; resize: none; overflow: hidden;
  line-height: 1.25;
}
body.wb-board .wbb__te { background: rgba(11, 18, 32, .95); color: #fff; }

/* ------------------------------------------------------------ STICKY FOOTER */

.wbf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--tb-card);
  border-top: 1px solid var(--tb-line);
  box-shadow: var(--tb-sh-up);
  padding: 7px 14px calc(7px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 6px;
}
/* The site's own mobile drawer lives inside the sticky header and can run the
   full height of a phone; a fixed footer on top of it would eat its last row. */
body:has(#abPrimaryNav.is-open) .wbf { display: none; }

.wbf__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* A flex item SHRINKS by default. In the phone's `nowrap` rows that made the
   six labelled buttons squeeze below their text width and overlap each other
   instead of overflowing — the row's scrollWidth beat its clientWidth by 8px
   and read as "it scrolls" when nothing was scrolling. Nothing in this footer
   may ever be narrower than its own label. */
.wbf__row > * { flex: 0 0 auto; }
.wbf__row--nav { justify-content: center; gap: 10px; }
.wbf__row--act { justify-content: center; flex-wrap: wrap; }
.wbf__grp { display: flex; align-items: center; gap: 6px; }
.wbf__div { width: 1px; align-self: stretch; margin: 2px 6px; background: var(--tb-line); flex: none; }
.wbf__spacer { flex: 1 1 auto; min-width: 0; }
.wbf[hidden] { display: none; }
.wbf__mode { display: contents; }
.wbf__mode[hidden] { display: none; }

/* buttons */
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1.5px solid var(--tb-line); border-radius: 12px;
  background: var(--tb-card); color: var(--tb-ink);
  font: inherit; font-size: .88rem; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.tbtn:hover { border-color: var(--tb-sec); background: rgba(25, 118, 210, .07); }
.tbtn:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }
.tbtn:disabled { opacity: .42; cursor: not-allowed; }
.tbtn:disabled:hover { border-color: var(--tb-line); background: var(--tb-card); }
.tbtn[aria-pressed="true"], .tbtn.is-on {
  background: var(--tb-pri); border-color: var(--tb-pri); color: #fff;
}
.tbtn[aria-pressed="true"]:hover, .tbtn.is-on:hover { background: var(--tb-sec); border-color: var(--tb-sec); }
.tbtn--pri { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; }
.tbtn--pri:hover { background: var(--tb-sec); border-color: var(--tb-sec); color: #fff; }
.tbtn--icon { padding: 8px 10px; }
.tbtn--sm { min-height: 38px; padding: 6px 11px; font-size: .82rem; }
.tbtn svg { width: 19px; height: 19px; flex: none; }
.tbtn--icon svg { width: 21px; height: 21px; }

.wbf__pos {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--tb-line); background: var(--tb-card);
  color: var(--tb-ink); font: inherit; font-size: .86rem; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer; white-space: nowrap;
}
.wbf__pos:hover { border-color: var(--tb-sec); }
.wbf__pos:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }

/* the live colour dot on the Color button */
.tbtn__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.22); flex: none; }
.tbtn[aria-pressed="true"] .tbtn__dot { border-color: rgba(255,255,255,.7); }

/* §25 — the rail is permanently on screen on desktop, so the drawer button
   there would open nothing. It belongs to the narrow layout only. */
@media (min-width: 900px) { #wbFilters { display: none; } }

.wbf__save { font-size: .78rem; color: var(--tb-mute); white-space: nowrap; padding: 0 4px; font-variant-numeric: tabular-nums; }
.wbf__save.is-saved { color: var(--tb-ok); }

/* §19 — on a phone both footer rows scroll sideways rather than wrap into a
   tall stack that would swallow the question. */
@media (max-width: 899.98px) {
  .wbf__row {
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; justify-content: flex-start; flex-wrap: nowrap;
    padding-bottom: 1px;
  }
  .wbf__row::-webkit-scrollbar { display: none; }
  .wbf__row--nav { justify-content: space-between; }
  .tbtn { padding: 8px 12px; font-size: .84rem; }
  /* The slim desktop nav row buys vertical space at a desk; on a phone a
     38px target is simply too small to hit (§29 asks for ~44). */
  .tbtn--sm, .wbf__pos { min-height: 44px; }
}

/* ------------------------------------------------------------------ popovers */

.wbpop {
  position: fixed; z-index: 96;
  background: var(--tb-card); color: var(--tb-ink);
  border: 1px solid var(--tb-line); border-radius: 16px;
  box-shadow: 0 10px 40px rgba(16, 32, 58, .22);
  padding: 14px; min-width: 210px; max-width: min(440px, calc(100vw - 20px));
  max-height: min(70dvh, 560px); overflow: auto; overscroll-behavior: contain;
}
.wbpop[hidden] { display: none; }
.wbpop h3 {
  margin: 0 0 10px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tb-mute); font-weight: 700;
}
.wbpop h3 + h3 { margin-top: 14px; }
.wbpop__row { display: flex; flex-wrap: wrap; gap: 8px; }
.wbpop__list { display: grid; gap: 4px; }
.wbpop__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid transparent; background: none; color: var(--tb-ink);
  font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.wbpop__item:hover { background: rgba(25, 118, 210, .09); }
.wbpop__item:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: -2px; }
.wbpop__item[aria-pressed="true"] { background: rgba(11, 78, 162, .1); border-color: rgba(11, 78, 162, .3); font-weight: 700; }
.wbpop__item svg { width: 19px; height: 19px; flex: none; color: var(--tb-mute); }
.wbpop__item[aria-pressed="true"] svg { color: var(--tb-pri); }
.wbpop__item small { margin-left: auto; color: var(--tb-mute); font-size: .78rem; }
.wbpop__sep { height: 1px; background: var(--tb-line); margin: 6px 0; }
.wbpop__note { margin: 8px 0 0; font-size: .78rem; color: var(--tb-mute); line-height: 1.5; }

/* swatches */
.wbsw {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2.5px solid transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) inset;
}
.wbsw:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }
.wbsw[aria-pressed="true"] { border-color: var(--tb-pri); box-shadow: 0 0 0 2px var(--tb-card) inset, 0 0 0 1px rgba(0, 0, 0, .2); }
body.wb-board .wbsw[aria-pressed="true"] { border-color: #7FB2FF; }

/* size pills */
.wbsz {
  min-width: 48px; min-height: 44px; padding: 6px 12px; cursor: pointer;
  border: 1.5px solid var(--tb-line); border-radius: 10px;
  background: var(--tb-card); color: var(--tb-ink); font: inherit; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.wbsz:hover { border-color: var(--tb-sec); }
.wbsz:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }
.wbsz[aria-pressed="true"] { background: var(--tb-pri); border-color: var(--tb-pri); color: #fff; }
.wbsz i { display: block; border-radius: 999px; background: currentColor; }

/* symbol palette (§13) */
.wbsym { display: flex; flex-wrap: wrap; gap: 6px; }
.wbsym button {
  min-width: 44px; min-height: 44px; padding: 4px 8px; cursor: pointer;
  border: 1.5px solid var(--tb-line); border-radius: 10px;
  background: var(--tb-card); color: var(--tb-ink);
  font-size: 1.05rem; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", system-ui, serif;
  display: inline-flex; align-items: center; justify-content: center;
}
.wbsym button:hover { border-color: var(--tb-sec); background: rgba(25, 118, 210, .07); }
.wbsym button:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }
.wbsym button.is-wide { font-size: .82rem; font-weight: 600; padding: 4px 12px; font-family: inherit; }

/* navigator (§24) */
.wbnav__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.wbnav__cell {
  min-height: 44px; padding: 4px 2px; cursor: pointer;
  border: 1.5px solid var(--tb-line); border-radius: 10px;
  background: var(--tb-card); color: var(--tb-ink);
  font: inherit; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative;
}
.wbnav__cell:hover { border-color: var(--tb-sec); }
.wbnav__cell:focus-visible { outline: 3px solid rgba(25, 118, 210, .55); outline-offset: 2px; }
.wbnav__cell em { font-style: normal; font-size: .84rem; line-height: 1; }
.wbnav__cell.is-cur { border-color: var(--tb-pri); background: rgba(11, 78, 162, .1); box-shadow: 0 0 0 1px var(--tb-pri) inset; }
.wbnav__cell.is-right { border-color: var(--tb-ok); color: var(--tb-ok); }
.wbnav__cell.is-wrong { border-color: var(--tb-err); color: var(--tb-err); }
.wbnav__cell.is-seen { background: var(--tb-line2); }
.wbnav__cell .wbnav__bm { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--tb-warn); }
.wbnav__jump { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.wbnav__jump input {
  flex: 1; min-width: 0; min-height: 40px; padding: 7px 10px; font: inherit;
  border: 1px solid var(--tb-line); border-radius: 10px; background: var(--tb-card); color: var(--tb-ink);
}
.wbnav__legend { font-size: .76rem; color: var(--tb-mute); margin-top: 10px; line-height: 1.6; }

/* keyboard shortcut table */
.wbkeys { display: grid; gap: 4px; font-size: .85rem; }
.wbkeys div { display: flex; align-items: center; gap: 10px; }
.wbkeys kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem;
  border: 1px solid var(--tb-line); border-bottom-width: 2px; border-radius: 6px;
  padding: 2px 7px; background: var(--tb-line2); color: var(--tb-ink); min-width: 26px; text-align: center;
}
.wbkeys span { color: var(--tb-body); }

/* toggle switch row */
.wbchk { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--tb-body); cursor: pointer; min-height: 44px; }
.wbchk input { width: 20px; height: 20px; accent-color: var(--tb-pri); cursor: pointer; }

/* mobile: popovers become bottom sheets (§38) */
@media (max-width: 899.98px) {
  .wbpop {
    left: 0 !important; right: 0 !important;
    bottom: calc(var(--wbf-h) + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    max-width: none; border-radius: 18px 18px 0 0;
    max-height: 60dvh; padding: 16px 16px 20px;
  }
  .wbpop::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--tb-line); margin: -6px auto 12px;
  }
}

/* The Zoho SalesIQ bubble is pinned bottom:10px at the maximum z-index, which
   was harmless while this page's controls lived at the top. They are all in a
   bottom bar now, so on a narrow window it sat on top of Close/Export. Lift it
   above the footer — !important because the widget's own sheet is specific and
   this rule only ever loads on /teach/. */
.zsiq_floatmain,
#zsiq_float {
  bottom: calc(var(--wbf-h) + env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* toast */
.wbtoast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--wbf-h) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 98; max-width: min(440px, calc(100vw - 24px));
  background: var(--tb-ink); color: var(--tb-page);
  padding: 11px 16px; border-radius: 12px; font-size: .87rem; line-height: 1.45;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
}
body.wb-board .wbtoast { background: #EEF3FF; color: #0B1220; }
.wbtoast[hidden] { display: none; }

/* ------------------------------------------------------- projector / expand */

/* The class-driven projector view. It is what actually delivers "fullscreen" on
   an iPad, where requestFullscreen is refused for non-video elements; the real
   Fullscreen API is layered on as a best effort. The FOOTER STAYS (§27). */
body.wb-max #abNav,
body.wb-max .ab-credit { display: none; }
body.wb-max { --hdr-h: 0px; }
body.wb-max .wbp { min-height: calc(100dvh - var(--wbf-h)); }
body.wb-max .wbp__main { padding-top: 10px; }
:fullscreen #abNav, :fullscreen .ab-credit { display: none; }

/* In expanded board mode the rail steps aside — the board is the point. */
.wbp.is-expand > .wbp__rail { display: none; }
.wbp.is-expand { grid-template-columns: minmax(0, 1fr); }
.wbp.is-expand .wbq-head { margin-bottom: 8px; }

/* ------------------------------------------------------------------ tablet */

@media (max-width: 1199.98px) and (min-width: 900px) {
  :root { --tb-rail: 250px; }
  .wbq__stem { font-size: calc(1.85rem * var(--wb-scale)); }
  .wbq__opt { font-size: calc(1.25rem * var(--wb-scale)); }
  .wbq__ans { font-size: calc(1.2rem * var(--wb-scale)); }
  .wbp__main { padding: 12px 16px 18px; }
}
/* Portrait tablet / anything narrow: question above, board below (§37). */
@media (max-width: 1059.98px) and (min-width: 900px) {
  .wbp.is-board .wbp__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .wbp.is-board .wbp__bcol { position: static; height: 52dvh; grid-column: 1; grid-row: 3; margin-top: 16px; }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 899.98px) {
  .wbp { grid-template-columns: minmax(0, 1fr); }

  /* §25 — the rail becomes a drawer opened from the footer. */
  .wbp__rail {
    position: fixed; z-index: 97; inset: 0 auto 0 0;
    width: min(88vw, 340px); max-height: none;
    padding: 16px 16px calc(24px + var(--wbf-h));
    border-right: 1px solid var(--tb-line);
    box-shadow: 10px 0 40px rgba(16, 32, 58, .2);
    transform: translateX(-102%); visibility: hidden;
    transition: transform .24s ease, visibility .24s;
  }
  body.wb-filters .wbp__rail { transform: none; visibility: visible; }
  .wbp__railclose {
    display: flex; align-items: center; gap: 8px; width: 100%;
    min-height: 44px; margin-bottom: 10px; padding: 8px 12px;
    border: 1.5px solid var(--tb-line); border-radius: 12px;
    background: var(--tb-card); color: var(--tb-ink); font: inherit; font-weight: 600; cursor: pointer;
  }
  .wbp__railclose svg { width: 18px; height: 18px; }
  .wbp__scrim {
    display: block;
    position: fixed; inset: 0; z-index: 96; background: rgba(8, 18, 38, .45);
    opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s;
  }
  body.wb-filters .wbp__scrim { opacity: 1; visibility: visible; }

  .wbp__main { padding: 10px 12px 16px; }
  .wbq { padding: 15px 15px 18px; border-radius: 16px; min-height: 0; }
  .wbq__stem { font-size: calc(1.32rem * var(--wb-scale)); margin-bottom: 14px; }
  .wbq__opt { font-size: calc(1.05rem * var(--wb-scale)); padding: 11px 13px; gap: 10px; border-radius: 12px; }
  .wbq__ans { font-size: calc(1.05rem * var(--wb-scale)); padding: 13px 14px; }
  .wbq__expl { font-size: calc(.95rem * var(--wb-scale)); }
  /* §3 — the phone header is SUBJECT, the question number, and the topic.
     The full breadcrumb, the question id and the progress bar are all real
     information, but on a 390px screen they cost the question three rows of
     height it needs more. They stay on desktop, and "Open page" stays here. */
  .wbq-head { gap: 4px 10px; margin-bottom: 8px; }
  .wbq-head__mid { display: none; }
  .wbq-head__pos { margin-left: auto; }
  .wbq-head__bar, .wbq-tag--qid { display: none; }
  .wbq-head__crumb { width: 100%; font-size: .84rem; }

  /* §38 — stacked, question first. */
  .wbp.is-board .wbp__main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .wbp.is-board .wbp__bcol { position: static; height: 46dvh; grid-column: 1; grid-row: 3; margin-top: 16px; }
  /* Expanded on a phone: the board is an overlay above the footer, with the
     question kept as a collapsible reference strip inside it. */
  .wbp.is-expand .wbp__bcol {
    position: fixed; z-index: 88;
    inset: 0 0 calc(var(--wbf-h) + env(safe-area-inset-bottom, 0px)) 0;
    height: auto; padding: 8px;
  }
  .wbp.is-expand .wbb { border-radius: 14px; }
  .wbp.is-expand .wbp__main { grid-template-columns: minmax(0, 1fr); }
  .wbp.is-expand .wbq { max-height: 26dvh; }
}

@media (max-width: 419.98px) {
  .wbq__stem { font-size: calc(1.18rem * var(--wb-scale)); }
  .wbq__opt { font-size: calc(.98rem * var(--wb-scale)); }
  .wbp__main { padding: 8px 10px 14px; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .wbp__rail, .wbp__scrim, .wbq__opt, .wbq-head__bar i, .tbtn { transition: none !important; }
}

/* ------------------------------------------------------------ KaTeX + typed */

/* Set by fitWideBlocks() in whiteboard.js on a display block too wide for the
   column. The block keeps its scrollable fallback when even the floor does not
   fit, so nothing is ever cut off. */
.wbq .tv-block.is-fitted { overflow-x: visible; transform-origin: left top; }

.wbq .katex { font-size: 1em; }
.wbq .tv-sub { vertical-align: sub; font-size: .72em; }
.wbq .tv-sup { vertical-align: super; font-size: .72em; }
.wbq__stem .tv-stem, .wbq__opt .tv-opt { display: inline; }

/* ------------------------------------------------------------- export popover */
.wbpop__grp { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid rgba(11,78,162,.12); }
.wbpop__grp:first-of-type { border-top: 0; }
.wbpop__in { width: 100%; min-height: 40px; margin: 4px 0 2px; padding: 8px 10px; border: 1px solid #c9d3e6; border-radius: 10px; font: inherit; }
.wbpop__in:disabled { opacity: .5; }

/* ------------------------------------------------------------- PDF export
   #wbPrint is built by exportPDFPages() and shown ONLY on paper. One A4 sheet
   per question: question at the top, the teacher's board work below. */
#wbPrint { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 14mm; }
  html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; height: auto !important; }
  body.wb-printing > *:not(#wbPrint) { display: none !important; }
  body.wb-printing #wbPrint { display: block !important; color: #10203A; font-family: Roboto, Arial, sans-serif; }
  .wbpp { break-after: page; page-break-after: always; }
  .wbpp:last-child { break-after: auto; page-break-after: auto; }
  .wbpp__head, .wbpp__foot { display: flex; justify-content: space-between; font-size: 9pt; color: #4b5b7a; }
  .wbpp__head { border-bottom: 1px solid #0B4EA2; padding-bottom: 2mm; margin-bottom: 4mm; font-weight: 600; letter-spacing: .02em; }
  .wbpp__foot { border-top: 1px solid #c9d3e6; padding-top: 2mm; margin-top: 4mm; }
  .wbpp__stem { font-size: 14pt; font-weight: 600; line-height: 1.35; margin: 0 0 3mm; }
  .wbpp__opts { display: grid; gap: 1.6mm; }
  .wbpp__opt { display: flex; gap: 3mm; font-size: 12pt; line-height: 1.35; align-items: flex-start; }
  .wbpp__opt b { flex: none; min-width: 9mm; color: #0B4EA2; }
  .wbpp__q img { max-width: 100%; height: auto; }
  .wbpp__label { font-size: 9pt; text-transform: uppercase; letter-spacing: .08em; color: #0B4EA2; margin: 5mm 0 2mm; }
  .wbpp__board { display: block; width: auto; max-width: 100%; max-height: 150mm; object-fit: contain; border: 1px solid #c9d3e6; border-radius: 2mm; }
}

/* ---------------------------------------------------------- colourful skin
   Owner (2026-09-12): "background and options is tarah se colourful" — the
   mockup: soft blue page with faint blobs, a gradient breadcrumb band, a white
   question card, and every option in its own pastel tint with a coloured
   letter badge. Each option carries one colour token (--oc) and every part of
   the card derives from it, so the four tints, the badge, the hover ring, the
   selected ring and the dark-board variant all stay in step. Right/wrong after
   Show Answer keep their green/red, which override --oc. */
:root {
  --oc-1: #2F7BF6;   /* A blue   */
  --oc-2: #E8467C;   /* B pink   */
  --oc-3: #22A55B;   /* C green  */
  --oc-4: #8A5CF6;   /* D violet */
  --oc-5: #F08A24;   /* E amber  */
  --oc-6: #12A5A5;   /* F teal   */
}
body:not(.wb-board) {
  background:
    radial-gradient(900px 480px at -8% -10%, rgba(47, 123, 246, .16), transparent 60%),
    radial-gradient(760px 420px at 108% 8%, rgba(138, 92, 246, .14), transparent 60%),
    radial-gradient(640px 400px at 60% 110%, rgba(34, 165, 91, .10), transparent 60%),
    linear-gradient(180deg, #EEF4FF 0%, #F5F9FF 55%, #EEF4FF 100%);
  background-attachment: fixed;
}
body:not(.wb-board) .wbp__rail { background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); }

/* the breadcrumb as a gradient band (mockup's top-left banner) */
body:not(.wb-board) .wbq-head__crumb {
  background: linear-gradient(90deg, #0B4EA2 0%, #1976D2 55%, #3C8DE8 100%);
  color: #fff; padding: 9px 16px; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(11, 78, 162, .22);
}
body:not(.wb-board) .wbq-head__crumb .wbq-head__subj { color: #fff; }
body:not(.wb-board) .wbq-head__crumb .wbq-head__sep { color: rgba(255, 255, 255, .7); opacity: 1; }
body:not(.wb-board) .wbq-head__crumb .wbq-head__leaf { color: #fff; font-weight: 700; }
body:not(.wb-board) .wbq-tag { background: #fff; border-color: rgba(11, 78, 162, .18); box-shadow: 0 2px 8px rgba(11, 78, 162, .08); }
body:not(.wb-board) .wbq-head__pos {
  background: #fff; border: 1px solid rgba(11, 78, 162, .14); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 2px 8px rgba(11, 78, 162, .08);
}
body:not(.wb-board) .wbq {
  box-shadow: 0 14px 40px rgba(11, 78, 162, .12), 0 1px 0 rgba(255, 255, 255, .8) inset;
  border-color: rgba(11, 78, 162, .12);
}
body:not(.wb-board) .wbb { box-shadow: 0 14px 40px rgba(11, 78, 162, .12); border-color: rgba(11, 78, 162, .14); }

/* option tints */
.wbq__opt:nth-child(6n+1) { --oc: var(--oc-1); }
.wbq__opt:nth-child(6n+2) { --oc: var(--oc-2); }
.wbq__opt:nth-child(6n+3) { --oc: var(--oc-3); }
.wbq__opt:nth-child(6n+4) { --oc: var(--oc-4); }
.wbq__opt:nth-child(6n+5) { --oc: var(--oc-5); }
.wbq__opt:nth-child(6n+6) { --oc: var(--oc-6); }
.wbq__opt:not(.is-right):not(.is-wrong) {
  background: color-mix(in srgb, var(--oc) 9%, #fff);
  border-color: color-mix(in srgb, var(--oc) 32%, #fff);
  align-items: center;
}
.wbq__opt:not(.is-right):not(.is-wrong):hover {
  border-color: var(--oc);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--oc) 22%, transparent);
}
.wbq__opt:not(.is-right):not(.is-wrong)[aria-pressed="true"] {
  border-color: var(--oc);
  box-shadow: 0 0 0 2px var(--oc) inset, 0 6px 18px color-mix(in srgb, var(--oc) 22%, transparent);
}
.wbq__opt:not(.is-right):not(.is-wrong)[aria-pressed="true"] .wbq__optmark { color: var(--oc); }
/* the letter badge */
.wbq__opt > b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; min-width: 2.1em; border-radius: 50%;
  background: var(--oc); color: #fff; font-size: .78em; line-height: 1;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--oc) 40%, transparent);
  letter-spacing: 0;
}
.wbq__opt.is-right > b { background: var(--tb-ok); color: #fff; box-shadow: none; }
.wbq__opt.is-wrong > b { background: var(--tb-err); color: #fff; box-shadow: none; }
/* dark board: same colours, low-alpha tints so ink stays light-on-dark */
body.wb-board .wbq__opt:not(.is-right):not(.is-wrong) {
  background: color-mix(in srgb, var(--oc) 14%, var(--tb-card));
  border-color: color-mix(in srgb, var(--oc) 45%, transparent);
}
body.wb-board .wbq__opt:not(.is-right):not(.is-wrong):hover { box-shadow: 0 0 0 1px var(--oc) inset; }
body.wb-board .wbq__opt > b { box-shadow: none; }