/* Figures: the main figure (.lab-shell), further figures and application figures
   (.concept-visual-card), the matrix-product figure and the dice map.

   math-enhancements.js wraps each figure's plot and controls in .figure-workbench.
   At 1100px and wider it also moves the formula panels (.figure-side-evidence)
   into the workbench; below that width they follow the workbench. In both cases
   the side column holds only the controls and their readout, and the formula and
   "What to notice" panels run at full width beneath the plot. */

/* Figure surfaces ----------------------------------------------------------- */

.lab-shell,
.concept-visual-card,
.matrix-product-aid {
  min-width: 0;
  color: var(--ink);
  background: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.embedded-lab { background: none; border: 0; border-radius: 0; }
.explorer-list { display: grid; gap: 40px; }
.concept-visual-shell, .figure-layout-ready, .figure-workbench, .lab-body { min-width: 0; }
/* Visual order inside a figure: plot and controls, then the formula panels, the
   caption and the reading guide. (math-enhancements.js also places the panels in
   this order in the DOM, so the reading and tab order match.) */
.figure-layout-ready { display: flex; flex-direction: column; }
.figure-layout-ready > * { min-width: 0; }
.figure-layout-ready > .figure-workbench { order: 1; }
.figure-layout-ready > .figure-side-evidence { order: 2; }
.figure-layout-ready > .lab-caption, .figure-layout-ready > .figure-note { order: 3; }
.figure-layout-ready > .lab-figure-guide { order: 4; }

/* Card head: "Figure 2." and title, then the caption, the colour key and an
   optional "How to read this figure" disclosure. */
.concept-visual-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 16px 20px 4px;
  border-bottom: 1px solid var(--line);
}
.concept-visual-index { color: var(--ink); font: 600 .9375rem/1.4 var(--sans); white-space: nowrap; }
.concept-visual-head h3 { flex: 1 1 16rem; min-width: 0; font-size: 1.1875rem; line-height: 1.35; }
.concept-visual-head > p { flex-basis: 100%; padding-bottom: 12px; color: var(--muted); font: .9375rem/1.55 var(--sans); }
.concept-visual-head .figure-guide { flex-basis: 100%; }
.concept-visual-card > .concept-visual-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.concept-visual-card > .concept-visual-head > :not(.concept-visual-index, h3) { grid-column: 1 / -1; }
.concept-visual-card .concept-visual-head > .concept-visual-caption { max-width: var(--measure); margin: 6px 0 0; padding-bottom: 10px; color: var(--muted); font: .9375rem/1.6 var(--sans); }
.concept-visual-head > .figure-color-key { flex-basis: 100%; padding: 0 0 12px; border-top: 0; }
.concept-visual-head > .figure-color-key[hidden] { display: none; }
.concept-visual-head > .figure-color-key + .figure-guide > summary { padding-top: 0; }
/* Inside the application prose the disclosure keeps the figure style. */
.lesson-prose .concept-visual-card details.figure-guide { padding: 0; background: none; border-radius: 0; }
.lesson-prose .concept-visual-card .figure-guide > summary { color: var(--accent-text); font: 500 .875rem/1.4 var(--sans); }
.lesson-prose .concept-visual-card .figure-guide[open] > summary { margin-bottom: 0; }

.lab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
}
.lab-status { display: block; color: var(--ink); font: 400 .9375rem/1.4 var(--sans); }
.lab-status .figure-number { font-weight: 600; }
.status-light { display: none; }
.embedded-lab .lab-toolbar { display: none; }

/* Segmented control for figure modes. */
.lab-modes { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--space-2); border: 1px solid var(--line-bright); border-radius: 4px; overflow: hidden; }
.mode-button {
  min-height: 36px;
  padding: 7px 14px;
  color: var(--muted);
  font: 500 .875rem/1.2 var(--sans);
  border-left: 1px solid var(--line-bright);
  transition: color 150ms ease, background-color 150ms ease;
}
.mode-button:first-child { border-left: 0; }
.mode-button:hover { color: var(--ink); background: var(--space-3); }
.mode-button[aria-pressed="true"] { color: var(--space-2); background: var(--control); }
.mode-button:focus-visible { outline-offset: -3px; }
/* Inside a control column the toggle spans the column, so its buttons share the width equally. */
.control-group .lab-modes { display: flex; }
.control-group .lab-modes .mode-button { flex: 1 1 0; text-align: center; }

/* Plot and controls ---------------------------------------------------------- */

.lab-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.figure-workbench { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.lab-stage { position: relative; min-width: 0; min-height: 0; background: var(--space-2); }
.lab-canvas-frame { position: relative; height: 100%; min-height: 0; }
/* Absolute canvases keep the Retina drawing buffer out of the grid's size calculation. */
.lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-body:not(.figure-workbench) .lab-stage { min-height: 420px; }
.concept-visual-stage { position: relative; min-width: 0; height: 380px; background: var(--space-2); }
.concept-visual-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.lab-controls,
.concept-visual-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 20px;
  background: var(--space-2);
}
.lab-controls > h3 { color: var(--ink); font: 600 .9375rem/1.4 var(--sans); }
.control-group { display: grid; align-content: start; gap: 6px; min-width: 0; }
.control-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font: .875rem/1.45 var(--sans); }
.control-label output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.control-label .katex { font-size: 1.04em; }
.lab-range { width: 100%; height: 22px; margin: 2px 0; accent-color: var(--control); cursor: pointer; }
.lab-range:disabled { opacity: .45; cursor: not-allowed; }
.lab-select {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--space-2);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  font: .875rem/1.3 var(--sans);
}
.lab-button {
  min-height: 40px;
  padding: 8px 14px;
  color: var(--ink);
  background: var(--space-2);
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  font: 500 .875rem/1.2 var(--sans);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.lab-button:hover { background: var(--space-3); border-color: var(--control); }
.lab-button[aria-pressed="true"] { color: var(--space-2); background: var(--control); border-color: var(--control); }
.control-note { align-self: center; color: var(--muted); font: .875rem/1.5 var(--sans); }
.figure-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Play buttons show a triangle, or two bars while playing (as in the matrix-product figure). */
.play-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 104px; }
.play-button::before { width: 0; height: 0; content: ""; border-block: 5px solid transparent; border-left: 7px solid currentColor; }
.play-button[data-playing="true"]::before { width: 7px; height: 10px; border-block: 0; border-inline: 2px solid currentColor; }

/* Readout under the controls. */
.lab-reading { padding-top: 16px; border-top: 1px solid var(--line); }
.lab-reading > span { color: var(--muted); font: 500 .8125rem/1.4 var(--sans); }
.lab-reading strong { display: block; margin-top: 4px; color: var(--ink); font: 600 1.125rem/1.35 var(--serif); }
.lab-reading p { margin-top: 6px; color: var(--muted); font: .875rem/1.55 var(--sans); }
.lab-reading .katex, .concept-visual-reading .katex, .equation-meaning .katex, .figure-key .katex, .lab-caption .katex { font-size: 1.04em; }
/* The ball readout reserves the tallest state at the current width. Each state
   can wrap naturally, including with larger browser text, without moving the
   graph when the time marker crosses the highest point. */
.ball-reading-slot { display: grid; }
.ball-reading-slot > * { grid-area: 1 / 1; min-width: 0; }
.ball-reading-slot strong { font-variant-numeric: tabular-nums; }
.ball-reading-size { visibility: hidden; pointer-events: none; user-select: none; }

/* Wide screens: plot beside the controls, explanations at full width below. */
@media screen and (min-width: 1100px) {
  .figure-workbench { grid-template-columns: minmax(0, 1fr) 300px; }
  .figure-workbench > .lab-stage,
  .figure-workbench > .concept-visual-stage { grid-column: 1; grid-row: 1; height: auto; min-height: 420px; }
  .figure-workbench > .lab-controls,
  .figure-workbench > .concept-visual-controls { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line); }
  .figure-workbench > :not(.lab-stage, .concept-visual-stage, .lab-controls, .concept-visual-controls) { grid-column: 1 / -1; }
}

/* Narrower screens: the plot stays in view while its controls are adjusted. */
@media screen and (max-width: 1099px) {
  .lab-body { grid-template-columns: minmax(0, 1fr); }
  .figure-workbench > .lab-stage,
  .figure-workbench > .concept-visual-stage {
    position: sticky;
    top: var(--figure-sticky-top);
    z-index: 2;
    height: clamp(260px, 42svh, 380px);
    border-bottom: 1px solid var(--line);
  }
  .figure-workbench > .lab-controls,
  .figure-workbench > .concept-visual-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .figure-workbench .lab-controls > h3,
  .figure-workbench .lab-controls > .lab-reading,
  .figure-workbench .figure-actions,
  .figure-workbench .control-note { grid-column: 1 / -1; }
  .figure-workbench :is(.control-group, input, select, button) {
    scroll-margin-top: calc(var(--figure-sticky-top) + clamp(260px, 42svh, 380px) + 20px);
    scroll-margin-bottom: 24px;
  }
}
@media screen and (max-width: 599px) {
  .figure-workbench > .lab-controls,
  .figure-workbench > .concept-visual-controls,
  .concept-visual-controls { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .concept-visual-head { padding: 14px 16px 2px; }
}
/* A short landscape window needs room for keyboard focus and the controls. */
@media screen and (max-height: 620px) {
  .figure-workbench > .lab-stage,
  .figure-workbench > .concept-visual-stage { position: relative; top: auto; }
}

/* Formula, legend and "What to notice" panels -------------------------------- */

.figure-side-evidence { min-width: 0; border-top: 1px solid var(--line); }
.equation-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  background: var(--highlight-wash);
}
.equation-main { min-width: 0; }
.equation-label,
.figure-legend-title { display: block; margin-bottom: 8px; color: var(--ink); font: 600 .8125rem/1.3 var(--sans); }
.live-equation { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.live-equation::-webkit-scrollbar { display: none; }
.live-equation .katex-display, .live-equation .katex-display > .katex { margin: 0; text-align: left; }
.equation-meaning { max-width: var(--measure); margin-top: 8px; color: var(--muted); font: .875rem/1.55 var(--sans); }
.figure-legend { min-width: 0; }
.figure-legend-items { display: grid; gap: 6px; }
.figure-key { display: grid; grid-template-columns: 10px auto minmax(0, 1fr); align-items: baseline; gap: 4px 8px; color: var(--muted); font: .875rem/1.45 var(--sans); }
.figure-key strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.figure-key-dot { width: 10px; height: 10px; background: var(--key-color); border-radius: 50%; transform: translateY(1px); }
.key-chapter { --key-color: var(--figure-accent); }
.key-gold { --key-color: var(--gold); }
.key-aqua { --key-color: var(--aqua); }
.key-coral { --key-color: var(--coral); }
.key-green { --key-color: var(--green); }
.key-blue { --key-color: var(--blue); }
.key-violet { --key-color: var(--violet); }
.key-faint { --key-color: var(--faint); }
@media (min-width: 900px) {
  .equation-bridge { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; }
  .figure-legend { padding-left: 24px; border-left: 1px solid var(--line-bright); }
}
@media (max-width: 520px) {
  .equation-bridge { padding: 16px; }
  .figure-key { grid-template-columns: 10px minmax(0, 1fr); }
  .figure-key > span:last-child { grid-column: 2; }
}

.concept-visual-evidence { display: grid; grid-template-columns: minmax(0, 1fr); }
.concept-visual-formula {
  display: grid;
  align-content: center;
  min-width: 0;
  max-width: 100%;
  padding: 18px 20px;
  overflow-x: auto;
  color: var(--ink);
  background: var(--highlight-wash);
}
.concept-visual-formula .katex-display, .concept-visual-formula .katex-display > .katex { margin: 0; text-align: left; }
.concept-visual-reading { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 18px 20px; border-top: 1px solid var(--line); }
.concept-visual-reading > span { color: var(--ink); font: 600 .8125rem/1.3 var(--sans); }
.concept-visual-reading strong { color: var(--ink); font: 600 1.0625rem/1.4 var(--serif); }
.concept-visual-reading p { max-width: var(--measure); color: var(--muted); font: .9375rem/1.6 var(--sans); }
@media screen and (min-width: 1100px) {
  .concept-visual-evidence { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .concept-visual-reading { border-top: 0; border-left: 1px solid var(--line); }
}

.teaching-equation { min-width: 0; max-width: 100%; margin: 0; padding: 16px 20px; overflow-x: auto; background: var(--highlight-wash); }
.teaching-equation .katex-display, .teaching-equation .katex-display > .katex { margin: 0; text-align: left; }
.live-equation .katex, .concept-visual-formula .katex, .teaching-equation .katex { font-size: 1.08rem; }

.lab-caption,
.figure-layout-ready > .lab-caption { margin: 0; padding: 12px 20px; color: var(--muted); border-top: 1px solid var(--line); font: .875rem/1.55 var(--sans); }
.lab-body:not(.figure-workbench) .lab-caption { position: absolute; right: 0; bottom: 0; left: 0; border: 0; }

.figure-note { padding: 16px 20px; color: var(--ink); border-top: 1px solid var(--line); font-size: 1rem; }
.figure-note p + p { margin-top: 12px; }
.figure-note .formula { margin-block: 14px; }
.figure-note strong { font-weight: 600; }
.figure-color-key { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 20px; color: var(--muted); border-top: 1px solid var(--line); font: .875rem/1.5 var(--sans); }
.teaching-equation + .figure-color-key { background: var(--highlight-wash); border-top-color: var(--line); }
.figure-color-key > span { display: block; }
.figure-color-key i { display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--key-color); }
.figure-color-key i.is-dashed { height: 0; background: none; border-top: 2px dashed var(--key-color); }
.figure-color-key i.is-dot { width: 9px; height: 9px; margin-inline: 4px 9px; border-radius: 50%; }
.figure-color-key i.is-ring { width: 9px; height: 9px; margin-inline: 4px 9px; background: none; border: 1.5px solid var(--key-color); border-radius: 50%; }
.figure-color-key i.is-area { width: 16px; height: 11px; background: color-mix(in srgb, var(--key-color) 28%, transparent); border: 1.5px solid var(--key-color); }
.figure-color-key i.is-frame, .figure-color-key i.is-dashframe { width: 16px; height: 11px; background: none; border: 2px solid var(--key-color); }
.figure-color-key i.is-dashframe { border-style: dashed; }

/* "How to read this figure" disclosure. */
.figure-guide { min-width: 0; color: var(--muted); }
.figure-guide > summary {
  width: fit-content;
  min-height: 40px;
  padding: 10px 0;
  color: var(--accent-text);
  font: 500 .875rem/1.4 var(--sans);
  cursor: pointer;
}
.figure-guide > summary:hover { color: var(--ink); }
.figure-guide-copy { max-width: var(--measure); padding-bottom: 14px; font: .9375rem/1.6 var(--sans); }
.figure-guide-copy > p + p, .figure-guide-copy > .lab-guide { margin-top: 10px; }
.lab-figure-guide { padding: 0 20px; border-top: 1px solid var(--line); }
.lab-guide { padding: 12px 20px; color: var(--muted); border-bottom: 1px solid var(--line); font: .9375rem/1.6 var(--sans); }
.lab-guide > span { display: block; color: var(--ink); font-weight: 600; }
.figure-guide .lab-guide { display: block; padding: 0 0 14px; background: none; border: 0; }
.figure-guide .lab-guide > [hidden] { display: none; }

/* Axis names drawn over the canvases (see axisLabel in visuals.js). */
.axis-label-layer { position: absolute; pointer-events: none; }
.axis-label { position: absolute; color: var(--muted); font: 500 .8125rem/1.2 var(--sans); white-space: nowrap; }
.axis-label[data-align="right"] { transform: translateX(-100%); }
.axis-label .katex { color: var(--ink); font-size: 1.08em; }

.application-figure .concept-visual-head { padding-bottom: 4px; }

@media (max-width: 520px) {
  .live-equation .katex { font-size: .9rem; }
  .concept-visual-formula .katex, .teaching-equation .katex { font-size: 1rem; }
  .concept-visual-formula, .concept-visual-reading, .teaching-equation, .lab-caption,
  .figure-layout-ready > .lab-caption, .figure-note, .figure-color-key { padding-inline: 16px; }
  .lab-figure-guide { padding-inline: 16px; }
  .concept-visual-stage { height: 330px; }
}
@media (max-width: 700px) {
  [data-concept="coins"] .concept-visual-stage { height: 290px; }
}
/* The two square panels of the projection figure sit side by side below 650px. */
@media (max-width: 649px) {
  [data-concept="spaces"] .figure-workbench > .concept-visual-stage, [data-concept="spaces"] .concept-visual-stage { height: 250px; }
}

/* Dice map: outcomes, the random variable, values ----------------------------- */

.dice-map { display: grid; grid-template-columns: minmax(0, 1fr) 60px 76px; align-items: center; gap: 12px 16px; padding: 20px; }
.dice-label { color: var(--muted); font: .875rem/1.4 var(--sans); }
.dice-label:first-child { grid-column: 1; grid-row: 1; }
.dice-label:nth-child(2) { grid-column: 3; grid-row: 1; }
.dice-grid { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.dice-cell { display: grid; place-items: center; min-height: 40px; color: var(--muted); background: var(--space-2); border: 1px solid var(--line-bright); border-radius: 3px; font: .875rem var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dice-cell.selected { color: var(--ink); background: color-mix(in srgb, var(--figure-accent) 18%, var(--space-2)); border-color: var(--figure-accent); }
.mapping-arrow { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 1.75rem; text-align: center; }
.mapping-arrow .katex { color: var(--ink); font-size: 1.1rem; }
.dice-values { display: grid; grid-column: 3; grid-row: 2; gap: 4px; padding-left: 12px; border-left: 1px solid var(--line-bright); }
.dice-value { min-height: 30px; padding: 3px 8px; color: var(--muted); background: transparent; border: 0; border-radius: 3px; font: .9375rem var(--sans); text-align: left; cursor: pointer; }
.dice-value:hover { background: var(--space-3); }
.dice-value[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--figure-accent) 18%, var(--space-2)); outline: 1px solid var(--figure-accent); }
.dice-value:focus-visible { outline: 2px solid var(--control); outline-offset: 1px; }
@media (max-width: 700px) {
  .dice-map { grid-template-columns: minmax(0, 1fr) 26px 42px; gap: 8px; padding: 14px; }
  .dice-cell { min-height: 32px; font-size: .65rem; }
  .dice-grid { gap: 2px; }
  .dice-values { padding-left: 5px; }
  .dice-value { padding-inline: 3px; font-size: .875rem; }
}

/* Matrix-product figure (Chapter 6 introduction) ----------------------------- */

.matrix-product-aid { --matrix-wash: var(--highlight-wash); margin: 28px 0 32px; padding: 18px 24px 22px; }
.matrix-product-aid figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.matrix-product-aid figcaption h3 { margin: 0; font-size: 1.1875rem; line-height: 1.35; }
.matrix-product-aid > p { max-width: var(--measure); margin-top: 12px; }
.matrix-product-aid .matrix-product-size { margin-top: 16px; }
.matrix-product-expression { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 40px); margin-top: 20px; padding: 24px 0; border-block: 1px solid var(--line); font-size: 1.6rem; }
.matrix-product-expression > span { padding-top: 56px; color: var(--muted); font-size: 1.25rem; }
.matrix-product-label { display: block; margin-bottom: 14px; text-align: center; }
.matrix-product-label small { display: block; margin-top: 4px; color: var(--muted); font: 500 .75rem/1.3 var(--sans); }
.matrix-product-table { color: var(--ink); border-collapse: separate; border-spacing: 0 4px; border-inline: 2px solid var(--ink); border-radius: 8px; font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.matrix-product-table td { width: 52px; height: 46px; padding: 5px 12px; text-align: center; }
.matrix-product-aid .matrix-first { color: var(--gold); }
.matrix-product-aid .matrix-second { color: var(--aqua); }
.matrix-product-aid .matrix-third { color: var(--coral); }
.matrix-product-playback { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 20px; margin: 20px 0 16px; }
.matrix-product-playback .lab-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 104px; }
.matrix-product-playback .lab-button::before { width: 0; height: 0; content: ""; border-block: 5px solid transparent; border-left: 7px solid currentColor; }
.matrix-product-aid[data-playing="true"] .lab-button::before { width: 7px; height: 10px; border-block: 0; border-inline: 2px solid currentColor; }
.matrix-product-progress { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--muted); font: .8125rem var(--sans); }
.matrix-product-progress > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.matrix-product-progress i { width: 28px; height: 1px; background: var(--line-bright); }
.matrix-product-playback p { grid-column: 1 / -1; min-height: 3.2em; margin: 0; color: var(--muted); font: .9375rem/1.55 var(--sans); }
.matrix-product-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 601px) { .matrix-product-steps[data-size="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.matrix-product-steps > div { padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--line-bright); border-radius: 4px; }
.matrix-product-steps h4 { color: var(--muted); font: 600 .8125rem/1.4 var(--sans); }
.matrix-product-steps .matrix-product-sum { margin: 12px 0 8px; color: var(--ink); font-size: 1.125rem; }
.matrix-product-steps p:last-child { margin: 0; color: var(--muted); font: .875rem/1.5 var(--sans); }
.matrix-product-aid > .formula { margin-block: 14px; }
@media screen {
  .matrix-product-aid[data-active-row="1"] tr[data-row="1"],
  .matrix-product-aid[data-active-row="2"] tr[data-row="2"],
  .matrix-product-aid[data-active-row="3"] tr[data-row="3"],
  .matrix-product-aid:not([data-active-row="0"]) .matrix-input tr,
  .matrix-product-aid[data-complete="true"] .matrix-output tr { background: var(--matrix-wash); box-shadow: inset 0 -2px var(--ink); }
  .matrix-product-aid[data-active-row="1"] .matrix-product-steps > [data-row="1"],
  .matrix-product-aid[data-active-row="2"] .matrix-product-steps > [data-row="2"],
  .matrix-product-aid[data-active-row="3"] .matrix-product-steps > [data-row="3"] { background: var(--matrix-wash); border-left-color: var(--ink); }
  .matrix-product-aid[data-active-row="1"] [data-matrix-stage="1"],
  .matrix-product-aid[data-active-row="2"] [data-matrix-stage="2"],
  .matrix-product-aid[data-active-row="3"] [data-matrix-stage="3"],
  .matrix-product-aid[data-complete="true"] [data-matrix-stage] { color: var(--ink); font-weight: 600; }
}
@media (prefers-reduced-motion: no-preference) {
  .matrix-product-table tr, .matrix-product-steps > div { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
}
@media (max-width: 600px) {
  .matrix-product-aid { padding: 16px; }
  .matrix-product-expression { gap: 10px; padding-block: 20px; font-size: 1.3rem; }
  .matrix-product-expression > span { padding-top: 52px; font-size: 1rem; }
  .matrix-product-table td { width: 32px; height: 36px; padding: 4px 7px; }
  .matrix-product-label small { font-size: .625rem; }
  .matrix-product-steps { grid-template-columns: minmax(0, 1fr); }
  .matrix-product-playback { gap: 12px 10px; }
  .matrix-product-playback .lab-button { min-width: 88px; }
  .matrix-product-progress { gap: 6px; font-size: .75rem; }
  .matrix-product-progress i { width: 12px; }
  .matrix-product-progress > span { gap: 4px; }
  .matrix-product-playback p { min-height: 4.8em; }
  .matrix-product-aid[data-size="3"] .matrix-product-progress > span > span { display: none; }
}
@media (max-width: 360px) { .matrix-product-progress > span > span { display: none; } }

/* Print: figures kept as images, controls hidden ----------------------------- */

@media print {
  .lab-shell, .concept-visual-card, .matrix-product-aid { overflow: visible; border-color: var(--line); }
  .lab-toolbar .lab-modes, .lab-controls, .concept-visual-controls, .lab-button, .matrix-product-playback { display: none !important; }
  .figure-workbench, .lab-body { display: block; }
  .figure-workbench > .lab-stage,
  .figure-workbench > .concept-visual-stage,
  .lab-stage,
  .concept-visual-stage { position: relative; height: 300px; min-height: 0; break-inside: avoid; }
  .lab-canvas-frame { height: 100%; }
  .concept-visual-card { break-inside: avoid; }
  .lab-shell, .application-figure { break-inside: auto; }
  .concept-visual-head, .figure-guide-copy, .lab-toolbar, .lab-shell > .figure-color-key { break-after: avoid; }
  .equation-bridge, .concept-visual-formula, .teaching-equation, .formula { background: none; }
  .equation-bridge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 16px; }
  .concept-visual-evidence { grid-template-columns: minmax(0, 1fr); }
  .concept-visual-reading, .figure-note, .concept-visual-head { padding: 12px 16px; }
  .figure-guide > summary { min-height: 0; padding-block: 4px; color: var(--ink); }
  .figure-guide > summary::marker { content: ""; }
  .matrix-product-aid { padding: 14px; }
  .matrix-product-expression { margin-top: 10px; padding-block: 10px; font-size: 16pt; }
  .matrix-product-expression, .matrix-product-steps > div { break-inside: avoid; }
  .matrix-product-table td { height: 30px; }
  .dice-value[aria-pressed="true"], .dice-cell.selected { border-color: var(--ink); }
}