/*
 * Unit 1 Quiz Coach — scoped styles.
 * Every color, font, spacing, radius, shadow, and duration resolves through the
 * platform Visual_Token_Set in styles.css (checked by scripts/check-visual-tokens.mjs).
 */
.coach-shell { color: var(--ink); }
.coach-shell .coach-card{ background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--elevation-soft); padding: var(--space-5); margin-bottom: var(--space-5); }
.coach-shell .coach-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.coach-shell .topic-btn{ display: flex; flex-direction: column; gap: var(--space-1); text-align: left; border: 2px solid var(--cream); border-radius: var(--radius-md); padding: var(--space-4); background: var(--cream); cursor: pointer; font: inherit; color: var(--ink); min-height: 96px; }
.coach-shell .topic-btn:hover, .coach-shell .topic-btn:focus-visible{ border-color: var(--blue); outline: none; }
.coach-shell .topic-btn strong{ font-family: var(--font-display); font-size: var(--text-body); }
.coach-shell .topic-btn small{ color: var(--muted); }
.coach-shell .topic-btn .badge{ align-self: flex-start; font-size: var(--text-caption); font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--yellow); color: var(--ink); }
.coach-shell .topic-btn .badge.miss{ background: var(--coral-strong); color: var(--paper); }
.coach-shell .big-actions{ display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.coach-shell .prompt{ font-size: var(--text-body); line-height: 1.5; margin: 0 0 var(--space-4); color: var(--ink); }
.coach-shell .math{ font-family: var(--font-reading); font-size: 1.3em; white-space: normal; }
.coach-shell .math sup{ font-size: .68em; vertical-align: super; line-height: 0; }
.coach-shell .frac{ display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 var(--space-1); line-height: 1.15; }
.coach-shell .frac > span{ padding: 0 var(--space-1); }
.coach-shell .frac > span:first-child{ border-bottom: 2px solid currentColor; }
.coach-shell .paren{ font-size: 1.4em; vertical-align: middle; }
.coach-shell .choices{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.coach-shell .choice{ border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--paper); padding: var(--space-4); min-height: var(--target-min); font: inherit; color: var(--ink); cursor: pointer; text-align: center; }
.coach-shell .choice:hover, .coach-shell .choice:focus-visible{ border-color: var(--blue); outline: none; }
.coach-shell .choice[aria-pressed="true"]{ border-color: var(--blue); background: var(--cream); }
.coach-shell .choice.correct{ border-color: var(--state-correct-color); background: var(--cream); }
.coach-shell .choice.wrong{ border-color: var(--state-incorrect-color); background: var(--cream); }
.coach-shell .typed{ display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin: var(--space-4) 0; }
.coach-shell .typed input{ font: inherit; font-size: var(--text-heading); padding: var(--space-2) var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-sm); width: 10rem; min-height: var(--target-min); }
.coach-shell .typed input:focus-visible{ outline: 3px solid var(--blue); outline-offset: 2px; }
.coach-shell .feedback{ border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; display: none; }
.coach-shell .feedback.ok{ display: block; background: var(--cream); border-left: 6px solid var(--state-correct-color); }
.coach-shell .feedback.miss{ display: block; background: var(--cream); border-left: 6px solid var(--state-incorrect-color); }
.coach-shell .feedback h3{ margin: 0 0 var(--space-1); font-family: var(--font-display); }
.coach-shell .progress{ display: flex; gap: var(--space-1); margin-bottom: var(--space-4); flex-wrap: wrap; }
.coach-shell .progress i{ flex: 1 1 14px; height: 10px; border-radius: var(--radius-sm); background: var(--line); min-width: 14px; }
.coach-shell .progress i.done{ background: var(--state-correct-color); }
.coach-shell .progress i.miss{ background: var(--state-incorrect-color); }
.coach-shell .progress i.now{ background: var(--state-current-color); }
.coach-shell .walk{ border: 2px dashed var(--line); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }
.coach-shell .walk-head{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.coach-shell .walk-head h3{ margin: 0; font-family: var(--font-display); }
.coach-shell .step{ display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (min-width: 720px) { .coach-shell .step { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.coach-shell .step .vis{ background: var(--cream); border-radius: var(--radius-md); padding: var(--space-3); min-height: 120px; display: grid; place-items: center; overflow: auto; }
.coach-shell .step .say{ font-size: var(--text-body); line-height: 1.5; }
.coach-shell .step .say .rule{ display: inline-block; background: var(--cream); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-weight: 700; margin-top: var(--space-2); }
.coach-shell .step-dots{ display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.coach-shell .step-dots i{ width: 10px; height: 10px; border-radius: var(--radius-sm); background: var(--line); }
.coach-shell .step-dots i.on{ background: var(--blue); }
.coach-shell .tiles{ display: inline-flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; justify-content: center; }
.coach-shell .tile{ width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 700; background: var(--blue); color: var(--paper); font-family: var(--font-display); }
.coach-shell .tile.b{ background: var(--coral-strong); }
.coach-shell .tile.gone{ opacity: .25; text-decoration: line-through; }
.coach-shell .tile.flip{ background: var(--yellow); color: var(--ink); }
.coach-shell .tile-group{ display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: var(--space-1); padding: var(--space-1); border: 2px solid var(--line); border-radius: var(--radius-sm); }
.coach-shell .tile-frac{ display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.coach-shell .tile-frac hr{ width: 100%; border: 0; border-top: 3px solid var(--ink); margin: 0; }
.coach-shell .op{ font-size: var(--text-heading); font-weight: 700; margin: 0 var(--space-2); }
.coach-shell .summary-list{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.coach-shell .summary-list li{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); background: var(--cream); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.coach-shell .summary-list li.miss{ border-left: 6px solid var(--state-incorrect-color); }
.coach-shell .summary-list li.ok{ border-left: 6px solid var(--state-correct-color); }
.coach-shell .kicker{ font-weight: 700; color: var(--blue-strong); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-caption); margin: 0 0 var(--space-1); }
.coach-shell .coach-toast{ position: fixed; left: 50%; bottom: var(--space-5); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--elevation-raised); opacity: 0; transition: opacity var(--motion-quick) var(--ease-standard); pointer-events: none; }
.coach-shell .coach-toast.show{ opacity: 1; }
.coach-shell svg.g{ width: 100%; max-width: 360px; height: auto; font-family: var(--font-reading); }
.coach-shell .tbl{ border-collapse: collapse; font-size: var(--text-body); }
.coach-shell .tbl td, .coach-shell .tbl th{ border: 1px solid var(--line); padding: var(--space-1) var(--space-3); text-align: center; background: var(--paper); }
.coach-shell .tbl th{ background: var(--cream); }
.coach-shell .tbl td.hl{ background: var(--cream); font-weight: 700; }
.coach-shell .pw{ display: inline-grid; grid-template-columns: auto auto; gap: var(--space-1) var(--space-3); text-align: left; border-left: 3px solid var(--ink); padding-left: var(--space-2); }
.coach-shell .pw .on{ background: var(--cream); border-radius: var(--radius-sm); padding: 0 var(--space-1); }
.coach-shell .muted{ color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .coach-shell .coach-toast { transition: none; } }

/* Subject and Unit 1 use the same warm paper and ink as the rest of the app. */
.subject-hero.library-hero { padding: var(--space-6) 0 var(--space-5); }
.subject-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: var(--space-2) 0; }
.subject-hero p { max-width: 50rem; }
.math-subject-art { background: var(--subject-math); }
.math-subject-art > span { font-family: var(--font-reading); color: var(--ink); }
.coach-shell { max-width: 1200px; padding-top: var(--space-6); padding-bottom: var(--space-7); }
.coach-shell * { box-sizing: border-box; }
.coach-shell [hidden] { display: none !important; }
.coach-shell h2, .coach-shell h3 { font-family: var(--font-display); line-height: 1.2; color: var(--ink); }
.coach-shell h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: var(--space-2) 0 var(--space-3); }
.coach-shell p { line-height: 1.6; }
.coach-shell .study-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-5); align-items: center; border: 1px solid var(--line); padding: var(--space-6); }
.coach-shell .study-lead { font-size: var(--text-heading); margin: var(--space-2) 0; }
.coach-shell .study-caption { font-size: var(--text-caption); margin-bottom: 0; }
.coach-shell .study-function { background: var(--cream); padding: var(--space-5); border-radius: var(--radius-lg); text-align: center; }
.coach-shell .function-label { font-size: var(--text-caption); font-weight: 700; color: var(--muted); }
.coach-shell .study-function > div { display: flex; gap: var(--space-2); align-items: center; justify-content: center; margin-top: var(--space-4); }
.coach-shell .study-function b { background: var(--paper); color: var(--blue-strong); border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-heading); }
.coach-shell .study-function strong { background: var(--ink); color: var(--paper); border-radius: var(--radius-md); padding: var(--space-4) var(--space-3); font-size: var(--text-body); }
.coach-shell .study-function p { margin-bottom: 0; font-size: var(--text-caption); }
.coach-shell .study-progress-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4) 0 var(--space-5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-6); }
.coach-shell .study-progress-strip span { font-size: var(--text-caption); }
.coach-shell .study-progress-strip b { font-size: var(--text-body); }
.coach-shell .needs-practice { color: var(--coral-strong); }
.coach-shell .study-section-heading { margin-bottom: var(--space-5); }
.coach-shell .coach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.coach-shell .topic-card { background: var(--paper); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.coach-shell .topic-card h3 { font-size: var(--text-heading); margin: var(--space-3) 0 var(--space-2); }
.coach-shell .topic-card > p { color: var(--muted); min-height: 3.2em; margin-bottom: var(--space-2); }
.coach-shell .topic-number { display: inline-grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-md); background: var(--cream); color: var(--blue-strong); font-family: var(--font-display); font-size: var(--text-heading); }
.coach-shell .topic-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }
.coach-shell .topic-actions .button { padding: var(--space-2) var(--space-3); min-height: var(--target-min); }
.coach-shell .topic-count, .coach-shell .study-flag { font-size: var(--text-caption); font-weight: 700; }
.coach-shell .study-flag { color: var(--coral-strong); }
.coach-shell summary { cursor: pointer; padding: var(--space-2) 0; min-height: var(--target-min); color: var(--blue-strong); font-weight: 700; }
.coach-shell .skill-list { list-style: none; padding: 0; margin: 0; }
.coach-shell .skill-list li { border-top: 1px solid var(--line); padding: var(--space-2) 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.coach-shell .skill-list span { width: 100%; font-size: var(--text-caption); }
.coach-shell .skill-list button { min-height: var(--target-min); }
.coach-shell .study-privacy { margin-top: var(--space-5); }
.coach-shell .question-card { max-width: 900px; margin: var(--space-4) auto; padding: var(--space-5); border: 1px solid var(--line); }
.coach-shell .study-question-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.coach-shell .study-back { min-height: var(--target-min); color: var(--blue-strong); }
.coach-shell .question-title { font-size: clamp(1.3rem, 2vw, 1.8rem); scroll-margin-block-start: calc(var(--space-7) * 2); }
.coach-shell .prompt { overflow-wrap: anywhere; }
.coach-shell .prompt > div { text-align: center; margin-top: var(--space-4); }
.coach-shell .question-visual { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; }
.coach-shell .question-visual figcaption { max-width: 36rem; margin: var(--space-3) auto 0; color: var(--muted); font-size: var(--text-caption); line-height: 1.5; }
.coach-shell .graph-explorer { width: 100%; text-align: center; }
.coach-shell .graph-workspace { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); }
.coach-shell .sketch-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.coach-shell .sketch-heading h3 { margin: 0; font-size: var(--text-heading); }
.coach-shell .sketch-heading span, .coach-shell .sketch-help { color: var(--muted); font-size: var(--text-caption); }
.coach-shell .sketch-help { margin: var(--space-2) 0 var(--space-3); }
.coach-shell .sketch-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.coach-shell .sketch-canvas { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: crosshair; }
.coach-shell .sketch-canvas svg.g { display: block; width: 100%; max-width: none; height: auto; max-height: none; }
.coach-shell .sketch-line, .coach-shell .sketch-arrow { fill: none; stroke: var(--blue-strong); stroke-width: 3; stroke-linecap: round; }
.coach-shell .sketch-dot { fill: var(--blue-strong); stroke: var(--blue-strong); stroke-width: 2; }
.coach-shell .sketch-dot.is-open { fill: var(--paper); }
.coach-shell [data-sketch-pending] { fill: none; stroke-dasharray: 2 2; r: 8px; }
.coach-shell .sketch-controls { min-width: 0; }
.coach-shell .sketch-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.coach-shell .sketch-tools .button, .coach-shell [data-sketch-add] { min-height: var(--target-min); padding: var(--space-2); font-size: var(--text-caption); }
.coach-shell .sketch-tools [aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.coach-shell .sketch-coordinates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
.coach-shell .sketch-coordinates label, .coach-shell .sketch-range { display: grid; gap: var(--space-1); font-size: var(--text-caption); font-weight: 700; }
.coach-shell .sketch-coordinates input, .coach-shell .sketch-range select { min-width: 0; width: 100%; min-height: var(--target-min); margin: 0; padding: var(--space-2); font: inherit; font-size: var(--text-body); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.coach-shell .sketch-open { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font-size: var(--text-caption); }
.coach-shell .sketch-open input { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--blue-strong); }
.coach-shell .sketch-range { margin-top: var(--space-3); }
.coach-shell .sketch-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.coach-shell .sketch-actions button { min-height: var(--target-min); }
.coach-shell .sketch-status { margin: var(--space-2) 0 0; font-size: var(--text-caption); overflow-wrap: anywhere; }
.coach-shell .sketch-list { font-size: var(--text-caption); }
.coach-shell .sketch-list ol { padding-left: var(--space-5); max-height: 12rem; overflow: auto; overflow-wrap: anywhere; }
@media (max-width: 700px) { .coach-shell .sketch-layout { grid-template-columns: minmax(0, 1fr); } }
.coach-shell .explorer-heading { margin: 0 0 var(--space-3); color: var(--ink); font-weight: 700; }
.coach-shell .explorer-control { display: grid; text-align: left; gap: var(--space-1); font-weight: 700; font-size: var(--text-caption); }
.coach-shell .explorer-control input { width: 100%; min-width: 0; height: var(--target-min); margin: 0; accent-color: var(--blue-strong); cursor: pointer; }
.coach-shell .explorer-output { margin: var(--space-2) 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; }
.coach-shell .explorer-help { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-caption); }
.coach-shell .operation-path { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr) auto minmax(0, 1.6fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-1); width: 100%; max-width: 32rem; margin: var(--space-3) auto; font-size: var(--text-body); }
.coach-shell .machine-value, .coach-shell .machine-operation { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-1); text-align: center; font-weight: 700; }
.coach-shell .machine-value { color: var(--blue-strong); background: var(--paper); }
.coach-shell .machine-operation { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.coach-shell .compound-timeline { width: 100%; text-align: center; }
.coach-shell .period-strip { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--ink); padding: var(--space-2) 0; }
.coach-shell .period-strip i { flex: 1; min-width: 0; height: var(--space-6); background: var(--blue-strong); border-radius: var(--radius-sm); }
.coach-shell .concept-rows, .coach-shell .root-groups, .coach-shell .exponent-ladder, .coach-shell .balance-progression { width: 100%; min-width: 0; }
.coach-shell .concept-caption, .coach-shell .root-groups > p { font-weight: 700; margin: var(--space-2) 0 var(--space-3); text-align: center; }
.coach-shell .concept-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: var(--space-3); border-top: 1px solid var(--line); padding: var(--space-3) 0; text-align: left; overflow-wrap: anywhere; }
.coach-shell .concept-row > strong { color: var(--muted); font-size: var(--text-caption); }
.coach-shell .concept-row > div { min-width: 0; font-size: var(--text-body); }
.coach-shell .concept-row small { display: block; font-size: var(--text-caption); margin-top: var(--space-1); }
.coach-shell .factor-product { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); flex-wrap: wrap; max-width: 100%; vertical-align: middle; }
.coach-shell .factor-chip { display: inline-grid; place-items: center; min-width: var(--space-6); padding: var(--space-1); border-radius: var(--radius-sm); background: var(--blue-strong); color: var(--paper); font-weight: 700; }
.coach-shell .model-equals { display: inline-block; margin: var(--space-2); font-weight: 700; }
.coach-shell .power-root-model { width: 100%; text-align: center; }
.coach-shell .power-root-expression { font-size: var(--text-display); margin: var(--space-3) 0; }
.coach-shell .power-root-labels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.coach-shell .power-root-labels > div { border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); background: var(--paper); }
.coach-shell .power-root-labels b { display: block; font-size: var(--text-heading); color: var(--blue-strong); }
.coach-shell .power-root-labels span { display: block; font-size: var(--text-caption); margin-top: var(--space-1); }
.coach-shell .root-group { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3); margin-bottom: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.coach-shell .group-description { width: 100%; text-align: center; font-size: var(--text-caption); color: var(--muted); }
.coach-shell .group-take { font-size: var(--text-body); }
.coach-shell .ladder-rung { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-2); }
.coach-shell .ladder-divide { margin: var(--space-1) 0; color: var(--muted); font-size: var(--text-caption); text-align: center; }
.coach-shell .balance-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; font-size: var(--text-caption); }
.coach-shell .balance-track { display: block; height: var(--space-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.coach-shell .balance-track i { display: block; height: 100%; background: var(--blue-strong); }
.coach-shell .model-note { font-size: var(--text-caption); color: var(--muted); }
.coach-shell .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.coach-shell .choice-help { color: var(--muted); font-size: var(--text-caption); }
.coach-shell .choice-row { display: flex; flex-direction: row; align-items: stretch; min-width: 0; gap: 0; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.coach-shell .choice-row .choice { width: auto; flex: 1; border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.coach-shell .choice-content { min-width: 0; }
.coach-shell .choice-eliminate { flex: 0 0 44px; align-self: stretch; min-height: var(--target-min); min-width: 44px; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--paper); color: var(--muted); font: inherit; font-size: 1.1rem; cursor: pointer; }
.coach-shell .choice-eliminate[aria-pressed="true"] { color: var(--blue-strong); border-color: var(--blue-strong); }
.coach-shell .is-eliminated .choice:not(.correct) { border-style: dashed; background: var(--cream); color: var(--muted); }
.coach-shell .is-eliminated .choice:not(.correct) .choice-content { text-decoration: line-through; }
.coach-shell .answer-parts { margin: 0; padding-left: var(--space-4); text-align: left; }
.coach-shell .answer-parts li { padding-left: var(--space-1); }
.coach-shell .answer-parts li + li { margin-top: var(--space-2); }
.coach-shell .answer-result > p { margin-bottom: var(--space-2); }
.coach-shell .scratchpad-launch { margin: var(--space-3) 0; min-height: var(--target-min); }
.coach-shell .scratchpad-dialog { width: min(1100px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: var(--space-5); color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg); overscroll-behavior: contain; }
.coach-shell .scratchpad-dialog::backdrop { background: var(--ink); opacity: .65; }
.coach-shell .scratchpad-head { display: flex; align-items: start; gap: var(--space-3); justify-content: space-between; position: sticky; top: 0; z-index: 1; background: var(--cream); }
.coach-shell .scratchpad-head h2 { margin: 0; font-size: var(--text-heading); }
.coach-shell .scratchpad-head p, .coach-shell .scratchpad-help, .coach-shell .scratchpad-status { margin: var(--space-2) 0; font-size: var(--text-caption); color: var(--muted); }
.coach-shell .scratchpad-head .button { flex-shrink: 0; }
.coach-shell .scratchpad-question { max-height: 9rem; overflow: auto; padding: var(--space-3); margin: var(--space-3) 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); overflow-wrap: anywhere; }
.coach-shell .scratchpad-question svg { width: min(100%, 240px); }
.coach-shell .scratchpad-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.coach-shell .scratchpad-toolbar .button, .coach-shell .scratchpad-head .button { min-height: var(--target-min); padding: var(--space-2) var(--space-3); font-size: var(--text-caption); }
.coach-shell .scratchpad-toolbar [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.coach-shell .scratchpad-touch { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font-size: var(--text-caption); }
.coach-shell .scratchpad-touch input { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--blue-strong); }
.coach-shell .scratchpad-paper { display: block; width: min(100%, calc(50dvh * 1.53846154)); height: auto; margin-inline: auto; aspect-ratio: 1000 / 650; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.coach-shell .scratchpad-paper path { fill: none; stroke: var(--blue-strong); stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.coach-shell .scratchpad-notes { display: grid; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-caption); font-weight: 700; }
.coach-shell .scratchpad-notes textarea { width: 100%; min-width: 0; min-height: 6rem; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper); font: inherit; font-size: var(--text-body); resize: vertical; }
.coach-shell .study-summary { scroll-margin-block-start: calc(var(--space-7) * 2); }
@media (max-width: 600px) { .coach-shell .scratchpad-dialog { padding: var(--space-3); } }
.coach-shell .choice { display: flex; align-items: center; gap: var(--space-3); text-align: left; font-size: 1.1rem; min-height: 80px; overflow-wrap: anywhere; }
.coach-shell .choice-letter { flex: 0 0 30px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--cream); font-weight: 700; font-size: var(--text-caption); }
.coach-shell .choice:disabled { opacity: 1; cursor: default; }
.coach-shell .choice.correct { background: var(--cream); border-width: 3px; }
.coach-shell .choice.correct .choice-letter::after { content: ' ✓'; }
.coach-shell .choice.wrong { border-style: dashed; }
.coach-shell .typed { display: grid; justify-items: start; }
.coach-shell .typed label { font-weight: 700; }
.coach-shell .typed input { width: min(100%, 18rem); }
.coach-shell .typed p { font-size: var(--text-caption); margin: 0; }
.coach-shell .input-error { color: var(--coral-strong); }
.coach-shell .input-error:empty { display: none; }
.coach-shell .answer-result { overflow-wrap: anywhere; }
.coach-shell .walk { background: var(--paper); border-style: solid; scroll-margin: var(--space-5); scroll-margin-block-start: calc(var(--space-7) * 2); }
.coach-shell .step .vis { min-width: 0; min-height: 160px; }
.coach-shell .step .vis > div { max-width: 100%; }
.coach-shell .step .say { min-width: 0; overflow-wrap: anywhere; }
.coach-shell .number-mix { margin-block: var(--space-4); max-width: 32rem; }
.coach-shell .number-mix label, .coach-shell .quick-check label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.coach-shell .number-mix select, .coach-shell .quick-check input { min-width: 0; width: 100%; min-height: var(--target-min); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: var(--paper); }
.coach-shell .number-mix p { font-size: var(--text-caption); margin-top: var(--space-2); }
.coach-shell .number-format { color: var(--ink); font-weight: 700; }
.coach-shell .lesson-question { padding: var(--space-3); margin-block: var(--space-3); border-left: 3px solid var(--blue); background: var(--cream); overflow-x: auto; }
.coach-shell .lesson-question .kicker { margin-top: 0; }
.coach-shell .smaller-example { border: 1px solid var(--line); padding: var(--space-3); border-radius: var(--radius-md); }
.coach-shell .smaller-example summary { min-height: var(--target-min); cursor: pointer; font-weight: 700; align-content: center; }
.coach-shell .smaller-example h4, .coach-shell .say h4 { font-size: var(--text-body); margin: 0 0 var(--space-2); }
.coach-shell .basic-visual { padding: var(--space-3); background: var(--cream); border-radius: var(--radius-sm); }
.coach-shell .worked-equation { font-size: var(--text-heading); text-align: center; overflow-wrap: anywhere; }
.coach-shell .quick-check { margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.coach-shell .quick-check-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.coach-shell .quick-check input { flex: 1 1 8rem; width: 8rem; }
.coach-shell .quick-check .muted { font-size: var(--text-caption); }
.coach-shell .quick-check [data-check-message] { min-height: 1.5em; }
.coach-shell .fraction-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); margin-bottom: var(--space-3); }
.coach-shell .fraction-strip i { height: var(--space-6); border: 2px solid var(--ink); border-radius: var(--radius-sm); }
.coach-shell .fraction-strip .filled { background: var(--ink); }
.coach-shell .number-refresher { margin-top: var(--space-2); }
.coach-shell .lesson-question .tbl, .coach-shell .step .vis .tbl { max-width: 100%; font-size: var(--text-small); }
.coach-shell .lesson-question .tbl th, .coach-shell .lesson-question .tbl td, .coach-shell .step .vis .tbl th, .coach-shell .step .vis .tbl td { padding: var(--space-1); }
.coach-shell .step .rule { font-size: var(--text-caption); border-left: 3px solid var(--blue); text-align: left; }
.coach-shell .step svg.g { max-height: 340px; }
.coach-shell .summary-list li { border-left: 4px solid var(--coral-strong); }
.coach-shell .summary-list .big-actions { margin-top: 0; }
.coach-shell .summary-list p { margin: var(--space-1) 0; font-size: var(--text-caption); }
.coach-shell .study-summary { max-width: 850px; margin: var(--space-4) auto; }
.coach-shell .study-score { font-size: var(--text-heading); }
.coach-shell :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.coach-shell h1[tabindex="-1"]:focus-visible, .coach-shell h2[tabindex="-1"]:focus-visible { outline: none; }
@media (max-width: 900px) { .coach-shell .study-intro { grid-template-columns: 1fr; } .coach-shell .study-function { display: none; } .coach-shell .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .coach-shell .coach-grid, .coach-shell .choices { grid-template-columns: 1fr; } .coach-shell .study-intro { padding: var(--space-4); } .coach-shell .big-actions { flex-direction: column; align-items: stretch; } .coach-shell .step { grid-template-columns: 1fr; } .coach-shell .topic-card > p { min-height: 0; } .coach-shell .study-progress-strip { gap: var(--space-3); } .coach-shell .pw { font-size: .85em; } }

.coach-shell .quiz-stage { color: var(--blue-strong); font-weight: 700; margin-block: var(--space-3) var(--space-1); }

.math-unit-page, .math-topic-shell, .math-question-page { padding-block: var(--space-2) var(--space-3); }
.page-view .coach-shell { padding-top: var(--space-2); padding-bottom: var(--space-3); }
.page-view[data-page="math-quiz"],
.page-view[data-page="math-practice"] { height: calc(100vh - 122px); overflow: hidden; }
.math-question-page { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#math-quiz-app, #math-practice-app { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.math-question-page .study-back { flex-shrink: 0; }
.math-unit-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-2); max-height: 140px; }
.math-unit-head h1 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.math-unit-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-left: auto; }
.math-unit-head .study-caption { width: 100%; margin: 0; }
.compact-mix { display: grid; gap: var(--space-1); font-size: var(--text-caption); font-weight: 700; }
.compact-mix select { min-height: 40px; padding: 0 var(--space-3); }
.math-unit-page .study-progress-strip { padding: var(--space-1) 0; margin-bottom: var(--space-3); }
.math-unit-page .study-privacy { display: none; }
.math-unit-page .coach-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.math-unit-page .topic-card { padding: var(--space-3); display: flex; flex-direction: column; cursor: pointer; transition: transform var(--motion-quick) var(--ease-standard), box-shadow var(--motion-quick) var(--ease-standard); }
.math-unit-page .topic-card:hover, .math-unit-page .topic-card:focus-within { transform: translateY(-2px); box-shadow: var(--elevation-soft); }
.math-unit-page .topic-card h3 { font-size: 20px; margin: var(--space-2) 0 var(--space-1); }
.math-unit-page .topic-card > p { min-height: 0; margin-bottom: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.math-unit-page .topic-actions { margin: auto 0 0; padding-top: var(--space-2); }
.math-topic-tabs { display: flex; gap: var(--space-2); margin: var(--space-3) 0; padding: var(--space-1); background: var(--cream); border-radius: var(--radius-sm); }
.math-topic-tabs [role="tab"] { min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }
.math-topic-tabs [aria-selected="true"] { background: var(--paper); box-shadow: var(--elevation-soft); }
.math-topic-page { max-height: calc(100vh - 170px); overflow: auto; }
.math-topic-page h1 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 var(--space-3); }
.coach-shell details.graph-workspace { margin: var(--space-3) 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); }
.coach-shell details.graph-workspace > summary { min-height: 44px; padding: 0 var(--space-3); cursor: pointer; font-weight: 700; align-content: center; }
.coach-shell details.graph-workspace[open] > summary { border-bottom: 1px solid var(--line); }
.coach-shell details.graph-workspace[open] { padding: 0 0 var(--space-3); }
.coach-shell details.graph-workspace .sketch-heading,
.coach-shell details.graph-workspace .sketch-layout,
.coach-shell details.graph-workspace > .sketch-help { padding-inline: var(--space-4); }
.coach-shell .sketch-notes { display: grid; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-caption); font-weight: 700; }
.coach-shell .sketch-notes textarea { width: 100%; min-height: 4rem; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }
.math-question-page .question-card { flex: 1; min-height: 0; max-height: none; overflow: auto; margin-block: 0; }
.math-question-page [data-answer-actions] { position: sticky; bottom: 0; z-index: 1; background: var(--paper); padding-top: var(--space-3); margin-bottom: 0; border-top: 1px solid var(--line); }
.math-question-page .question-card .prompt svg { display: block; max-width: 100%; max-height: min(34vh, 300px); height: auto; margin-inline: auto; }
.math-question-page .question-visual svg.g { max-height: 220px; }
@media (max-width: 900px) {
  .math-unit-page .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .math-unit-tools { margin-left: 0; width: 100%; }
  .math-unit-page .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}