/* ===========================================================================
 * subjects/math/styles.css
 * ===========================================================================
 * Scoped class rules for the Math practice surface.
 *
 * Mirrors vocab's .mc-choice canon under .math-screen so the MC/QC choice
 * rows are pixel-identical across subjects. Math adds two pieces of chrome
 * not present in vocab: the Scratchpad / Flag tool buttons in the header,
 * and an optional sub-step progress bar (interactive items).
 * ======================================================================== */

/* Toolbar buttons in the header right slot retired — see Sub-phase B.
 * The .tool-btn shared rule (components/tools/tool-btn.css) is now the
 * canonical visual. Math's ProblemHeader uses <FlagButton> + <ScratchpadButton>. */

/* "Guided" eyebrow chip — replaces the old inline Guided pill. */
.math-screen .math-guided-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  padding: 3px 8px;
  border-radius: 999px;
}

/* MC / QC choice rows retired here. Math inherits the canonical .mc-*
 * visual from components/items/mc-item.css (Sub-phase D consolidation).
 * No math-specific tweaks remain — what used to be `.math-screen .mc-*`
 * was a pixel-mirror of vocab's canon. */

/* ===========================================================================
 * Learning Lab — the unit spine's beads.
 * ===========================================================================
 * The ONE moving thing on this screen. A unit bubble changes fill exactly
 * once in its life — the moment the unit is completed — and that is a state
 * that happened TO the student, so it is worth the 120ms it takes to read.
 * Everything else on the surface swaps instantly, on purpose.
 *
 * `color` rides along because the digit → check swap changes ink with the
 * fill; box-shadow carries the current unit's "you are here" ring.
 * The tokens collapse to 0ms under prefers-reduced-motion (app-surface.css),
 * so there is no branch here and no motion for anyone who asked for none. */
.math-screen .mathlab-unit-dot {
  transition: background var(--dur-quick, 0ms) var(--ease-settle, linear),
              color var(--dur-quick, 0ms) var(--ease-settle, linear),
              box-shadow var(--dur-quick, 0ms) var(--ease-settle, linear);
}