/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Lesson stage: the whiteboard is one clear frame (no border or lines) with even padding.
   An open lesson is one block centered both ways: the control bar on top, then the lesson, with the
   original homework beside it (tops lined up) when View Homework is on. "safe" centering starts a tall
   lesson at the top so nothing is clipped, and fitBoard() still shrinks it.
   Lists (Learning Center and Test Prep start, Homework Helper Home, All Homework) stay top-aligned. */
.workspace-panel #lesson-workspace{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;align-content:safe center;align-items:start;column-gap:16px;min-height:100%;padding:24px}
.workspace-panel #lesson-workspace:has(>.teaching-pane.choosing-learning){align-content:start}
/* Homework Helper Home replaces the lesson area (styles.css hides it); the grid above must not bring it back. */
.workspace-panel.showing-homework #lesson-workspace{display:none}
.workspace-panel #lesson-workspace>.teaching-pane{grid-column:1;grid-row:2;min-height:auto;justify-content:flex-start}
.workspace-panel #lesson-workspace #board-content{padding-top:0}
/* Control bar. Homework hidden: one row centered over the lesson, [Back · Replay · Pause · Next] [View Homework] [Exit].
   Homework shown: the player and Exit stay over the lesson; Hide Homework sits over the homework page, on the same line. */
.workspace-panel #lesson-workspace>.lesson-bar{grid-column:1/-1;grid-row:1;justify-self:center;display:flex;align-items:stretch;gap:10px;max-width:100%;margin:0 0 12px}
.lesson-bar:has(#lesson-controls[hidden]):has(#homework-preview-toggle[hidden]){display:none!important}
.lesson-bar>:is(.lesson-player,.homework-player){display:contents}
.lesson-player>#lesson-controls{order:1;flex:0 1 auto;min-width:0}
.homework-player>:is(.homework-preview-toggle,.reference-tools){order:2}
.lesson-player>.lesson-exit{order:3}
.lesson-player>#lesson-controls[hidden]~.lesson-exit{display:none}
/* Homework beside the lesson: two equal halves; each control group is centered over its own half, and the page's top lines up with the lesson's top. */
.workspace-panel #lesson-workspace.has-reference{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.workspace-panel #lesson-workspace.has-reference>.lesson-bar{justify-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
.workspace-panel #lesson-workspace.has-reference>.lesson-bar>.lesson-player{grid-column:1;justify-self:center;display:flex;align-items:stretch;gap:10px;max-width:100%}
.workspace-panel #lesson-workspace.has-reference>.lesson-bar>.homework-player{grid-column:2;justify-self:center;display:flex;align-items:stretch;gap:10px;max-width:100%}
.workspace-panel #lesson-workspace>.lesson-reference{grid-column:2;grid-row:2;align-self:start}
/* Beside the homework the lesson column is narrower, so the player shows icons only (the words stay as accessible names). */
.workspace-panel #lesson-workspace.has-reference .lesson-controls>.replay-board{padding:2px 10px}
.workspace-panel #lesson-workspace.has-reference .lesson-controls>.replay-board>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Narrow board: the homework stacks under the lesson, with its own control row right above it. */
@container(max-width:620px){
  .workspace-panel #lesson-workspace.has-reference{grid-template-columns:minmax(0,1fr)}
  .workspace-panel #lesson-workspace.has-reference>.lesson-bar{display:contents}
  .workspace-panel #lesson-workspace.has-reference>.lesson-bar>.lesson-player{grid-column:1;grid-row:1;justify-self:stretch;margin:0 0 12px}
  .workspace-panel #lesson-workspace.has-reference>.lesson-bar>.homework-player{grid-column:1;grid-row:3;justify-self:center;margin:16px 0 12px}
  .workspace-panel #lesson-workspace>.lesson-reference{grid-column:1;grid-row:4}
  .workspace-panel #lesson-workspace.has-reference>.lesson-reference .reference-page>:is(img,canvas){max-height:60vh}
}
/* Leaving saves the lesson; it is a secondary action, distinct from deleting work. */
.workspace-panel .lesson-player>.lesson-exit{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:2px 18px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--action-secondary-bg);color:var(--ink);font-size:18px;font-weight:700;line-height:1.1}
.lesson-player>.lesson-exit svg{width:20px;height:20px;flex:0 0 auto;color:currentColor}
.lesson-player>.lesson-exit:hover:not(:disabled){background:var(--action-selected)}
.lesson-player>.lesson-exit:disabled{opacity:1;background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink);cursor:not-allowed}
.lesson-player>.lesson-exit:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* View Homework: Homework Helper only, a lagoon-outline pill. It shows the original page beside the lesson. */
body:not([data-center=homework]) #homework-preview-toggle{display:none}
.workspace-panel .homework-player>.homework-preview-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:2px 16px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--surface);color:var(--lagoon-deep);font-size:18px;font-weight:700;line-height:1.1}
.workspace-panel .homework-player>.homework-preview-toggle[hidden]{display:none}
.homework-player>.homework-preview-toggle svg{width:20px;height:20px;flex:0 0 auto;color:var(--lagoon)}
.homework-player>.homework-preview-toggle:hover{background:var(--pool)}
.workspace-panel .homework-player>.homework-preview-toggle[aria-expanded=true]{background:var(--pool);border-color:var(--lagoon-deep)}
.homework-player>.homework-preview-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Markup on the homework beside the lesson: Point, Highlight, Focus and Clear sit with Hide Homework over the page.
   The drawing layer covers exactly the page image (no letterboxing), so marks land where they are drawn;
   touch-action is off only on that layer, so drawing never scrolls the page. */
.reference-tools{display:flex;align-items:stretch;gap:4px}
.reference-tools[hidden]{display:none}
.workspace-panel .reference-tools>.reference-tool{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:48px;padding:2px 6px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--surface);color:var(--lagoon-deep);font-size:16px;font-weight:700;cursor:pointer}
.reference-tools>.reference-tool>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reference-tools>.reference-tool svg{width:22px;height:22px;color:var(--lagoon)}
.reference-tools>.reference-tool[aria-pressed=true]{background:var(--pool);border-color:var(--lagoon)}
.reference-tools>.reference-tool:hover:not(:disabled){border-color:var(--lagoon)}
.reference-tools>.reference-tool:disabled{opacity:1;background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink);cursor:not-allowed}
.reference-tools>.reference-tool:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.workspace-panel #lesson-workspace.has-reference .homework-player>.homework-preview-toggle{padding:2px 10px;font-size:16px}
.reference-page{position:relative;width:fit-content;max-width:100%;margin:0 auto}
.workspace-panel .reference-page>:is(img,canvas){display:block;width:auto;max-width:100%;height:auto;object-fit:fill;background:#fff}
.workspace-panel #lesson-workspace>.lesson-reference .reference-page>:is(img,canvas){max-height:calc(100vh - 260px)}
.reference-page>[hidden]{display:none!important}
.reference-overlay{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.reference-overlay .held-box{fill:rgba(47,143,131,.08);stroke:var(--lagoon);stroke-width:3px;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
.reference-overlay:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.reference-status{margin:6px 0 0;font-size:14px;color:var(--muted)}
.reference-status:empty{display:none}
/* Lists keep a readable width, centered in the frame. */
.workspace-panel :is(#learning-start,#test-prep-start,#work-page){width:100%;max-width:960px;margin-inline:auto}
/* Tablet and phone: the lesson row spans the lesson width, the player taking the room the other pills leave. */
@media(max-width:1099px){.workspace-panel #lesson-workspace>.lesson-bar{justify-self:stretch}.lesson-player>#lesson-controls{flex:1 1 auto}}
/* With View Homework in the same row on a tablet, the player shows icons only so nothing overlaps. */
@media(max-width:1099px){.lesson-bar:has(#homework-preview-toggle:not([hidden])) .lesson-controls>.replay-board>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:760px){
  .workspace-panel #lesson-workspace{padding:16px}
  .workspace-panel #lesson-workspace>.lesson-bar{gap:6px;margin-bottom:10px}
  .workspace-panel #lesson-workspace.has-reference>.lesson-bar>.lesson-player{gap:6px}
  .workspace-panel .lesson-player>.lesson-exit{padding:2px 10px;font-size:15px;gap:4px}
  .workspace-panel .homework-player>.homework-preview-toggle{padding:2px 12px}
  .homework-player>.homework-preview-toggle>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .homework-player>.homework-preview-toggle svg{width:22px;height:22px}
}
/* Circle the problem: the circled crop shows by the chat box (and in that turn's history) so the learner sees what was sent. */
.circled-sent{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:4px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;color:var(--muted)}
.circled-sent[hidden]{display:none}
.circled-sent img{max-height:48px;max-width:140px;border-radius:6px;background:#fff}
.history-circled{display:block;max-width:180px;max-height:90px;margin-top:4px;border-radius:6px;border:1px solid var(--line)}
/* While the homework shows beside the lesson (laptop and wider), the tutor column narrows to about 62% of its
   normal width (1fr of 4 instead of 2fr of 5) so the lesson and homework halves get the room; Hide Homework restores it.
   The tutor fits itself to its smaller area, so all of its movement stays in view. */
@media(min-width:1200px){
  .classroom{transition:grid-template-columns .25s ease}
  body:not(.board-expanded) .classroom:has(#lesson-workspace.has-reference){grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
}
@media(prefers-reduced-motion:reduce){.classroom{transition:none}}
body[data-lesson-motion=reduced] .classroom{transition:none}
/* Responsive sweep fixes (320-2560 wide). Touch sizes: every tap target is at least 44px. */
@media(max-width:1024px){
  body header.topbar>.brand{min-height:44px;min-width:44px}
  .lesson-actions .teacher-controls>:is(#conversation-toggle,#mute-voice){min-height:44px;height:44px}
  .workspace-panel .lesson-controls>.replay-board{min-width:44px}
  .learning-subjects>.learning-subject{min-height:44px}
}
/* The smallest phones cannot fit the player, View Homework and Exit on one line at 44px each, so the pills wrap under the player. */
/* The smallest phones wrap the bar only when it also carries homework (View Homework or the open page); otherwise the
   icon row and Exit stay on one row. */
@media(max-width:360px){.workspace-panel #lesson-workspace:is(.has-reference,:has(#homework-preview-toggle:not([hidden])))>.lesson-bar,.workspace-panel #lesson-workspace.has-reference>.lesson-bar>.lesson-player{flex-wrap:wrap;justify-content:center}.workspace-panel #lesson-workspace:is(.has-reference,:has(#homework-preview-toggle:not([hidden]))) .lesson-player>#lesson-controls{flex:1 1 100%}}
/* Phones: body copy never drops below 16px, even when a long lesson is shrunk to fit. */
@media(max-width:430px){
  .work-board .work-row p,.test-readiness .readiness-note,#homework-reference-placeholder{font-size:16px}
  #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4) #board-content :is(.board-paragraph,.board-block,.board-steps li),
  #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4) .visual-exploration-note{font-size:16px}
}
/* Recent homework names keep their intended 17px (a general .homework-view p rule had shrunk them to 15px). */
.homework-view .recent-homework-name{font-size:17px}
/* When the board is too narrow for the player's words (portrait tablets), Back · Replay · Pause · Next show icons only;
   the words stay as their accessible names. */
@container(max-width:560px){.workspace-panel .lesson-controls>.replay-board{padding:2px 8px}.workspace-panel :is(.lesson-controls>.replay-board,.homework-player>.homework-preview-toggle)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.workspace-panel .homework-player>.homework-preview-toggle{padding:2px 12px}}
/* This lesson's conversation: a round button on its own at the far left of the chat box, outside the chat pill, with a count
   badge, and a popover just above the chat box, left-aligned and never wider than it. Absolute, so nothing moves. */
.composer-row{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.composer-row>.composer-box{flex:1 1 auto;min-width:0}
.composer-row>.history-button{position:relative;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--lagoon)}
.composer-row>.history-button svg{width:24px;height:24px}
.composer-row>.history-button[aria-expanded=true]{background:var(--pool);border-color:var(--lagoon)}
@media(max-width:760px){.composer-row{gap:8px}.composer-row>.history-button{flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px}}
.history-badge{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--lagoon);color:#fff;font:700 12px/20px var(--font);text-align:center;pointer-events:none}
.composer-row>.history-panel{position:absolute;left:0;right:auto;bottom:calc(100% + 8px);width:min(440px,100%);max-height:50vh;z-index:30;background:var(--surface)}
.composer-row>.history-panel ol{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
/* Learning Center and Homework Helper start screens: the same section cards and ink header bands as Test Prep Home (#150).
   Learning Center: [Grade Level | Choose a Subject] side by side (1fr 2fr), then Lessons full width. Homework Helper:
   "Drop in Your Homework to Get Started" on top of Recent homework, both full width (Mike, Nov 4). */
#learning-start .learning-start-pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:14px;align-items:stretch}
#learning-start .learning-grade-select,#test-prep-start :is(#test-prep-grade,#test-prep-state){display:block;width:100%;max-width:none;min-height:64px;margin:0;padding:12px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);font-size:28px;line-height:1.2}
#learning-start>.section-card{margin-top:14px}
#learning-start .learning-intake.section-card{display:block;min-height:0;padding:var(--section-pad);border-style:solid;background:var(--surface)}
.homework-help-card #homework-drop-zone{width:100%;aspect-ratio:auto;min-height:0;margin:0;padding:clamp(16px,3vw,24px)}
.homework-view[data-has-homework=false]{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px}
.homework-view[data-has-homework=false]:not(:has(>.recent-homework:not([hidden]))) #homework-drop-zone{min-height:240px}
.homework-view[data-has-homework=true] .homework-help-card{margin:0 0 14px}
.homework-view .recent-homework.section-card{width:auto;margin:0}
.recent-homework.section-card .recent-homework-list{border-width:1.5px}
.recent-homework.section-card .see-all-homework{margin-top:12px}
@container(max-width:680px){.homework-view[data-has-homework=false]{gap:10px}}
@container(max-width:640px){#learning-start .learning-start-pickers{grid-template-columns:minmax(0,1fr);gap:10px}#learning-start>.section-card{margin-top:10px}}
#learning-start .learning-grade-field{display:block;width:100%;margin:0}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is(button,[role=radio]){display:flex;align-items:center;justify-content:center;min-width:0;min-height:64px;padding:12px 20px;border:3px solid var(--ink);border-radius:var(--action-radius);background:color-mix(in srgb,var(--lamp) 20%,var(--surface));color:var(--ink);font-size:28px;font-weight:750;line-height:1.2;text-align:center;white-space:normal}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is([aria-pressed=true],[aria-checked=true]){background:var(--lamp);border-color:var(--ink);color:var(--ink);text-decoration:underline;text-underline-offset:9px;text-decoration-skip-ink:auto}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is(button,[role=radio]):hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
/* Recent homework rows stack inside the narrower card so the file name keeps its room. */
.recent-homework.section-card{container-type:inline-size}
@container(max-width:460px){.recent-homework.section-card .recent-homework-row{flex-direction:column;align-items:stretch;gap:8px}.recent-homework.section-card .recent-homework-name{white-space:normal;overflow-wrap:anywhere}.recent-homework.section-card .recent-homework-actions .button{flex:1 1 0;min-width:0}}
/* Learning Center pages (learning-route.js): Home shows Your Progress, then Grade Level and Choose a Subject, then What Would You Like to Do?
   Lessons shows the lesson
   cards and Practice Tests the practice cards. Homework waiting for GO stays on Home. */
#learning-start[data-learning-view=home] :is(#learning-crumbs,#learning-explore,#learning-practice),
#learning-start[data-learning-view=lessons] :is(.learning-home-group,#learning-progress,#learning-practice),
#learning-start[data-learning-view=practice] :is(.learning-home-group,#learning-progress,#learning-explore){display:none}
#learning-start[data-learning-view=lessons]>#learning-explore,#learning-start[data-learning-view=practice]>#learning-practice{margin-top:0}
/* Life Skills Lesson Plan (#life-skills/plan): numbered steps in order, the next one marked, done ones checked. */
#learning-start:not([data-learning-view=plan])>#learning-plan{display:none}
#learning-start[data-learning-view=plan] :is(.learning-home-group,#learning-progress,#learning-explore,#learning-practice){display:none}
#learning-start[data-learning-view=plan]>#learning-plan{margin-top:0}
#learning-start .learning-choice-go>.learning-open-plan{grid-column:1/-1}
.learning-plan-intro{margin:0 0 12px;color:var(--ink)}
#learning-start .learning-plan-next{width:100%;margin:0 0 14px;min-height:56px;font-size:20px;font-weight:750;white-space:normal}
.learning-plan-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.learning-plan-step{margin:0}
#learning-start .learning-plan-open{width:100%;flex-direction:row;align-items:center;gap:12px;text-align:left;justify-content:flex-start}
.learning-plan-open>span:not(.learning-plan-number,.learning-plan-status){flex:1 1 auto;min-width:0}
.learning-plan-number{flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:#fff;color:var(--ink);font-weight:800}
.learning-plan-status{flex:0 0 auto;font-size:15px;font-weight:750;color:var(--ink)}
.learning-plan-step.is-done .learning-plan-number{background:var(--lagoon);border-color:var(--lagoon);color:#fff}
.learning-plan-step.is-next .learning-plan-open{outline:3px solid var(--lamp);outline-offset:2px}
.learning-plan-step.is-next .learning-plan-number{background:var(--lamp)}
#learning-start .learning-topics-link{display:inline;padding:0;border:0;background:none;color:var(--lagoon-deep);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Section navigation and display controls belong to the board. Tutor audio lives above the character.
   Overflow belongs to the navigation row, never the page; its labels stay visible on phones. */
body:not(:is([data-center=learning],[data-center=test-prep])) .lesson-actions :is(#show-lessons-page,#show-practice-page){display:none}
.lesson-actions .primary-lesson-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;min-width:0;width:100%}
.section-navigation{display:flex;flex:0 1 auto;align-items:center;gap:8px;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:6px;margin:0;scroll-padding-inline:6px}
.section-navigation>.section-tab{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;height:auto;padding:8px 14px;border:2px solid var(--action-border);border-radius:12px;background:var(--surface);color:var(--ink);font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap}
.section-navigation>.section-tab>[data-icon]{display:inline-flex}
.section-navigation>.section-tab>[data-icon] svg{width:20px;height:20px}
.section-navigation>.section-tab:is([aria-current=page],[aria-pressed=true]){background:var(--action-selected);color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.section-navigation>.section-tab:hover:not(:disabled){background:var(--action-selected);transform:none;box-shadow:none}
.section-navigation>.section-tab:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.section-navigation>.section-tab:disabled{opacity:1;background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink);cursor:not-allowed}
/* Shared center tabs: Learning Center is the source of truth for Homework Helper. */
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .lesson-actions .primary-lesson-tools{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:12px}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation{display:grid;grid-template-columns:repeat(var(--section-tab-count,3),minmax(170px,1fr));align-items:stretch;gap:6px;padding:6px 2px;border-bottom:2px solid var(--action-border)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{min-width:0;min-height:64px;padding:12px 6px;border-radius:10px 10px 0 0;font-size:24px;gap:0;white-space:nowrap}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab>[data-icon]{display:none}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab>[data-icon] svg{width:24px;height:24px}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .primary-lesson-tools>.view-buttons{justify-self:start;align-self:center}
.view-buttons #expand-board{min-width:168px;min-height:56px;height:auto;padding:12px 24px;background:var(--action-primary);border-color:var(--action-primary);color:var(--surface);font-size:20px;text-decoration:none}
.view-buttons #expand-board:hover:not(:disabled){background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.view-buttons #expand-board:active:not(:disabled){background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)}
@container(max-width:680px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .lesson-actions .primary-lesson-tools{grid-template-columns:minmax(0,1fr);gap:6px}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .primary-lesson-tools>.view-buttons{grid-row:1}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation{grid-row:2}
}
@container(max-width:560px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation{grid-template-columns:repeat(var(--section-tab-count,3),minmax(140px,1fr))}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{padding:10px 6px;font-size:20px}
}
@media(max-width:760px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .lesson-actions .primary-lesson-tools{grid-template-columns:minmax(0,1fr);gap:6px}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .primary-lesson-tools>.view-buttons{grid-row:1}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation{grid-row:2;grid-template-columns:repeat(var(--section-tab-count,3),minmax(140px,1fr))}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{min-height:52px;padding:10px 12px;font-size:20px}
}
body[data-center=homework] .section-navigation{--section-tab-count:3}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation{border-bottom-color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{border-color:var(--ink);background:var(--pool);color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:is([aria-current=page],[aria-pressed=true]){background:var(--lagoon-deep);color:var(--surface)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:hover:not(:disabled){background:var(--sage);color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:is([aria-current=page],[aria-pressed=true]):hover:not(:disabled){background:color-mix(in srgb,var(--lagoon-deep) 60%,var(--ink));color:var(--surface)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{border-width:3px;text-decoration-thickness:2px}
/* Content and tabs fill the right column; display controls live over the avatar. */
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .workspace-panel>#whiteboard{width:100%;align-self:flex-start}
body[data-center=learning] #lesson-workspace:has(#learning-start:not([hidden])){padding-inline:0;padding-top:0}
body[data-center=learning] #learning-start{padding-inline:0;padding-top:6px;max-width:none}
body[data-center=learning] #learning-start>:is(#learning-progress,.learning-home-group){max-width:none}
body[data-center=homework] .workspace-panel #work-page{max-width:none}
body[data-center=homework] .workspace-panel #work-page{padding:6px 0 24px}
#work-page .work-list-card>.section-title:has(>.section-title-meta){padding-block:12px;align-items:center}
#work-page .work-refresh{min-height:44px;font-size:18px;color:var(--ink);border-color:var(--ink)}
#work-page .work-refresh:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#work-page .work-intake{border:2px dashed var(--ink);background:var(--haze)}
#work-page .work-row{border:2px solid var(--ink);background:var(--surface)}
#work-page .work-row-actions .button{font-size:18px;min-height:48px}
@container(max-width:480px){
  #work-page .work-list-card>.section-title:has(>.section-title-meta){position:relative;display:block;padding-block:16px;margin-bottom:76px}
  #work-page .work-list-card>.section-title>.section-title-meta{position:absolute;right:var(--section-pad);top:calc(100% + 16px)}
}
@container(max-width:640px){
  #work-page .work-row{grid-template-columns:minmax(0,1fr);gap:12px}
  #work-page .work-file-icon{display:none}
  #work-page .work-row-actions{grid-column:1/-1;width:100%;max-width:none}
}
body[data-center=homework] .showing-homework #homework-view{padding-inline:0}
@container(max-width:680px){body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .workspace-panel>#whiteboard{width:100%}}
@media(max-width:760px){body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .workspace-panel>#whiteboard{width:100%}}
.lesson-utilities{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-width:0;padding:10px 0 12px}
.lesson-utilities>.teacher-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;min-width:0}
.primary-lesson-tools>.view-buttons{display:flex;flex:0 0 auto;gap:6px}
.lesson-utilities>.view-buttons{display:flex;flex:0 0 auto;justify-self:start;margin-right:auto}
:is(.lesson-utilities .teacher-controls,.primary-lesson-tools .view-buttons)>button{flex:0 0 auto;min-height:44px;height:44px;width:auto;min-width:44px;padding:6px 12px;font-size:16px;line-height:1.15;white-space:nowrap}
.lesson-utilities .teacher-controls>button{min-height:56px;height:auto;min-width:56px;padding:12px 18px;gap:8px;font-size:20px;line-height:1.2}
.lesson-utilities .teacher-controls>button svg{width:24px;height:24px}
.lesson-utilities .teacher-controls>#teacher-status{flex:0 0 auto;width:auto;min-height:56px;height:auto;padding:0 8px 0 0;gap:8px;border-radius:0;background:transparent;color:var(--ink);font-size:18px;line-height:1.2;overflow:visible}
.lesson-utilities .teacher-controls>#teacher-status>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap}
.lesson-utilities .teacher-controls>#teacher-status i{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--lagoon);mask:none;-webkit-mask:none}
.primary-lesson-tools .view-buttons>button[aria-pressed=true]{background:var(--action-selected);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
@media(max-width:1099px){.section-navigation>.section-tab{font-size:16px}}
@media(max-width:760px){
  .lesson-actions .primary-lesson-tools{gap:8px}
  .section-navigation{gap:6px}
  .section-navigation>.section-tab{min-height:44px;padding:8px 10px;font-size:15px}
  .lesson-utilities{padding:0;gap:8px}
  :is(.lesson-utilities .teacher-controls,.primary-lesson-tools .view-buttons)>button{padding:6px 8px;font-size:14px}
  .lesson-utilities>.teacher-controls{gap:8px}
  .lesson-utilities .teacher-controls>button{min-height:48px;min-width:48px;padding:10px 12px;font-size:16px}
  .lesson-utilities .teacher-controls>#teacher-status{min-height:48px;font-size:16px}
  .lesson-utilities .teacher-controls>button svg{width:22px;height:22px}
}
/* Learning Center Home: the choice uses Test Prep Home's two go buttons (.test-prep-go); Your Progress shows a few big numbers. */
#learning-start .learning-choice-go{margin-top:0;align-items:start}
#learning-start .learning-choice-go>.test-prep-go-button{box-sizing:border-box;height:auto;min-height:64px;max-height:none;padding:12px 20px;font-size:28px;font-weight:750;line-height:1.2;align-self:stretch}
@container(max-width:600px){#learning-start .learning-choice-go{grid-template-columns:minmax(0,1fr)}#learning-start .learning-choice-go>.test-prep-go-button{font-size:22px}}
#learning-start .learning-choice-note{margin:10px 0 0;font-size:17px;font-weight:600;color:var(--muted);text-align:center}
#learning-start .learning-choice-note[hidden]{display:none}
#learning-start #learning-choice-heading{align-items:center;gap:12px 24px}
#learning-start #learning-choice-meta{flex:0 1 auto;margin:0 0 0 auto;text-align:right;font:700 clamp(22px,2vw,28px)/1.2 var(--font)}

.classroom>.lesson-actions{padding:10px 0 12px}
/* Test Prep's first card sits close to its Home / Full Screen control row;
   spacing between the content sections remains unchanged. */
body[data-center=test-prep] #test-prep-start{padding-top:4px}
@media(max-width:760px){body[data-center=test-prep] #test-prep-start{padding-top:0}}
/* The section tabs replace Learning Center's separate Back and grade/subject row. */
#learning-start .learning-crumbs{display:none}
/* Keep the compact progress row in the Learning Center home view. */
#learning-start[data-learning-view=home]:not([hidden]){display:flex;flex-direction:column;min-height:100%;padding-top:6px}
#learning-start>#learning-progress{margin:0 auto 28px;width:100%;max-width:960px}
#homework-view>#homework-progress{margin-bottom:14px}
#learning-start .learning-home-group{display:flex;flex-direction:column;gap:28px;width:100%;max-width:960px;margin:0 auto}
.home-progress-card{background:var(--paper,#fff)}
/* Allow for the Profile button's target while keeping the band close to other headings. */
.home-progress-card>.section-title:has(>.section-title-meta){padding-block:12px;align-items:center}
.home-progress-card .progress-empty{font-size:16px}
.home-progress-card [data-rewards-summary]:not([hidden]){display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;min-width:0;margin-top:10px}
.home-progress-card:has(>.progress-stats-row[hidden]) [data-rewards-summary]{margin-top:0}
.home-progress-card .rewards-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;width:100%;min-width:0}
.home-progress-card .reward-summary-item{flex:1 1 160px;gap:12px}
.home-progress-card .reward-summary-copy{flex:1 1 auto}
.home-progress-card .reward-summary-icon{font-size:28px}
.home-progress-card .reward-summary-label{font-size:14px}
.home-progress-card .reward-summary-title{font-size:18px}
.reward-summary-item{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;color:var(--ink)}
.reward-summary-icon{flex:none;font-size:23px;line-height:1}
.reward-summary-copy{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.reward-summary-label{font-size:12px;font-weight:650;color:var(--muted)}
.reward-summary-title{font-size:15px;font-weight:650;overflow-wrap:anywhere}
.profile-rewards-card{margin-top:20px}
.profile-rewards-area{min-width:0;margin-top:16px}
.profile-rewards-area>h3{margin:0;font-size:19px;color:var(--ink)}
.profile-rewards-area [data-rewards-panel]{margin-top:4px}
.home-progress-card>.section-title .home-progress-link{color:var(--ink)}
/* Larger center-page reading text; action heights retain the shared button size. */
.workspace-panel :is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-title{font-size:30px}
:is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-card{font-size:20px;line-height:1.45}
:is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-card :is(p,.learning-subject,.learning-topic){font-size:20px}
:is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-card small{font-size:18px}
#homework-view .homework-intake p{font-size:22px}
#homework-view .homework-intake-actions .button{font-size:20px}
#homework-view .recent-homework-name{font-size:20px}
#homework-view .recent-homework-meta{font-size:18px}
.home-progress-card .reward-summary-icon{font-size:32px}
.home-progress-card .reward-summary-label{font-size:18px}
.home-progress-card .reward-summary-title{font-size:22px}
.home-progress-card .progress-tile-value{font-size:36px}
.home-progress-card .progress-stats-row .progress-tile-label{font-size:18px}
.home-progress-card .home-progress-link{font-size:18px}
.section-card-highlight .home-progress-link:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
/* Catalog headers keep search with its own list, with equal, readable destination cards. */
.section-card>.learning-catalog-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;width:auto;max-width:none;margin:calc(-1 * var(--section-pad)) calc(-1 * var(--section-pad)) 16px;padding:10px var(--section-pad);background:var(--section-band);color:var(--surface);border-bottom:3px solid var(--ink)}
.learning-catalog-header>h3{flex:1 1 220px;min-width:0;margin:0;font:650 30px/1.2 var(--heading);color:inherit}
.learning-catalog-search{display:block;flex:0 1 320px;max-width:100%;margin-left:auto}
:is(#learning-start,#test-prep-start) .learning-catalog-search input{width:100%;min-width:0;min-height:48px;padding:10px 14px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);font:600 18px/1.2 var(--font)}
:is(#learning-start,#test-prep-start) .learning-catalog-search input::placeholder{color:var(--muted);opacity:1}
:is(#learning-start,#test-prep-start) .learning-catalog-search input:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
:is(#learning-start,#test-prep-start) .learning-topics{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));grid-auto-rows:auto;gap:16px;align-items:stretch}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic{min-width:0;min-height:180px;height:180px;padding:20px 16px;border:2px solid var(--ink);background:var(--pool);color:var(--ink);font-size:24px;line-height:1.25;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic small{font-size:18px;color:var(--muted)}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic:is(:hover,:focus-visible,:active,[aria-pressed=true],[aria-current=page]):not(:disabled){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic:is(:hover,:focus-visible,:active,[aria-pressed=true],[aria-current=page]):not(:disabled) :is(span,small){color:inherit}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic[hidden]{display:none}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-group-heading{grid-column:1/-1;align-self:end;font-size:24px}
@media(max-width:760px){.learning-catalog-header>h3{font-size:26px}.learning-catalog-search{flex:1 1 240px}}
/* Testing Center keeps exam-specific choices and evidence in the shared navigation flow. */
body[data-center=test-prep] #lesson-workspace:has(#test-prep-start:not([hidden])){padding:0}
body[data-center=test-prep] #test-prep-start{max-width:none;padding:6px 0 16px}
#test-prep-page>.test-prep-crumbs,#test-prep-drills-heading,#test-prep-switch{display:none}
#test-prep-drills>.test-prep-section:first-child{margin-top:0}
#test-prep-start .test-prep-go>.test-prep-go-button{min-height:64px;height:auto;padding:12px 20px;font-size:28px;font-weight:750}
#test-prep-start .test-prep-tests{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));grid-auto-rows:1fr;gap:12px}
#test-prep-start .test-prep-tests>.learning-subject{min-height:88px;border:2px solid var(--ink);font-size:22px;align-items:center;text-align:center}
#test-prep-start .test-prep-tests>.learning-subject[aria-pressed=true]{background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
#test-prep-choice-heading{align-items:center;gap:12px 24px}
#test-prep-start #test-prep-choice{margin-top:28px}
#test-prep-choice-meta{flex:0 1 auto;margin:0 0 0 auto;text-align:right;font:700 clamp(22px,2vw,28px)/1.2 var(--font)}
@container(max-width:600px){#test-prep-start .test-prep-go{grid-template-columns:minmax(0,1fr)}#test-prep-start .test-prep-go>.test-prep-go-button{font-size:22px}}
@container(max-width:640px){#test-prep-start .test-prep-pickers{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.workspace-panel :is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-title{font-size:26px}}
/* Center controls share the section bands' stronger border and selection weight. */
:is(#learning-start,#test-prep-start,#homework-view,#work-page) .section-card :is(button,.button,select){border-width:3px}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is([aria-pressed=true],[aria-checked=true]){text-decoration-thickness:4px}
.teacher-controls>button,.view-buttons #expand-board{border-width:3px}
/* Give destination choices room around the heading and each action. */
:is(#learning-choice,#test-prep-choice){--section-pad:24px}
#learning-start #learning-choice-heading,#test-prep-start #test-prep-choice-heading{padding-block:20px;margin-bottom:24px}
#learning-start .learning-choice-go,#test-prep-start #test-prep-choice>.test-prep-go{gap:20px}
@media(max-width:760px){:is(#learning-choice,#test-prep-choice){--section-pad:20px}}
/* Home fills the board from the top; open lessons keep their centered teaching layout. */
.workspace-panel #lesson-workspace:has(#learning-start[data-learning-view=home]:not([hidden])){align-content:stretch;align-items:stretch;grid-template-rows:auto minmax(0,1fr);padding-top:0}
#teaching-pane>#learning-start[data-learning-view=home]:not([hidden]){flex:1 0 auto}
/* Progress leads Homework Helper Home; it hides while a homework lesson is active. */
.homework-view[data-has-homework=true] #homework-progress{display:none}
/* While a lesson plays, its Back · Replay · Pause · Next · Exit row sits at the top of the board, a little below the button bar
   (Mike, Nov 4), and the lesson centres in the space below it instead of the whole block centring together. */
.workspace-panel #lesson-workspace:not(.has-reference):has(#lesson-controls:not([hidden])){align-content:stretch;grid-template-rows:auto minmax(0,1fr)}
.workspace-panel #lesson-workspace.has-reference:has(#lesson-controls:not([hidden])){align-content:start}
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden]))>.lesson-bar{align-self:start;margin-bottom:16px}
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])):not(.has-reference)>#teaching-pane{align-self:center;align-self:safe center}
/* At fitBoard's two tightest levels the frame gives back its own spacing before a lesson would scroll. */
.workspace-panel .whiteboard:is(.board-fit-3,.board-fit-4) #lesson-workspace{padding-block:12px}
.workspace-panel .whiteboard:is(.board-fit-3,.board-fit-4) #lesson-workspace>.lesson-bar{margin-bottom:8px}
/* Explain Another Way, Hint and Check answer: on a narrow board Explain takes its own row and Hint and Check share the next. */
@container(max-width:620px){.workspace-panel #answer-actions{flex-wrap:wrap;max-width:100%;min-width:0}.workspace-panel #answer-actions>#explain-another-way{flex:1 1 100%;min-width:0;white-space:normal}.workspace-panel #answer-actions>:is(#give-hint,#check-answer){flex:1 1 0;min-width:0}}
@container(min-width:400px){.workspace-panel .whiteboard:is(.board-fit-3,.board-fit-4) #answer-actions>:is(#explain-another-way,#give-hint,#check-answer){flex:0 1 auto;font-size:15px;padding-inline:10px;white-space:nowrap}}
/* On tablets and laptops the conversation opens beside the chat box (over the board's edge) so the tutor stays fully in view;
   narrower screens, and Full Screen (where the tutor sits under the board), keep it just above the chat box. */
@media(min-width:761px){body:not(.board-expanded) .composer-row>.history-panel{left:calc(100% + 12px);bottom:0;width:min(440px,calc(100vw - 100% - 80px));max-height:min(60vh,520px)}}
/* Phones retain the Leave Lesson label; player groups wrap before losing their touch targets.
   Explain, Hint and Check answer stay beside one another at 44px or more. */
@media(max-width:760px){
  .classroom>.lesson-actions{padding:2px 0 4px}
  .workspace-panel #lesson-workspace>.lesson-bar,.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden]))>.lesson-bar{margin-bottom:6px;gap:6px}
  .workspace-panel .lesson-controls{padding:0;border:0;gap:6px;background:transparent}
  .workspace-panel .lesson-controls>.replay-board{border:2px solid var(--action-border)}
  .workspace-panel .lesson-player>.lesson-exit{min-height:44px;min-width:44px;padding:6px 12px;font-size:15px}
  .workspace-panel #lesson-workspace>.lesson-bar,.workspace-panel #lesson-workspace.has-reference>.lesson-bar>.lesson-player{flex-wrap:wrap}
  .workspace-panel .lesson-player>.lesson-exit svg{width:22px;height:22px}
  .workspace-panel #answer-actions{flex-wrap:nowrap;gap:6px}
  .workspace-panel #answer-actions>:is(#explain-another-way,#give-hint,#check-answer){flex:1 1 0;min-width:0;min-height:44px;padding:2px 6px;font-size:15px;line-height:1.1;white-space:normal;text-align:center}
  .workspace-panel #answer-actions>#explain-another-way{flex-grow:1.4}
}
/* Short phones (an iPhone SE is 667px tall) also trim the teacher row and the tool row; Koa stays beside the chat box. */
@media(max-width:760px) and (max-height:740px){
  .classroom{row-gap:2px}
  .teacher-column{height:auto}
  .teacher-column .teacher-panel,.teacher-column .character-space{height:84px;max-height:84px}
  .classroom>.lesson-actions{padding:0 0 2px}
}
/* The fifth fit step (a phone lesson still too tall at level 4) keeps every level-4 rule and trims the space around the
   board, the player row and the choices. Pictures keep their size: their own layout code measures them. */
@media(max-width:760px){
  .workspace-panel #whiteboard.board-fit-5 #lesson-workspace{padding-block:4px}
  .workspace-panel #whiteboard.board-fit-5 #lesson-workspace>.lesson-bar{margin-bottom:2px}
  #whiteboard.board-fit-5 #board-content{padding-top:0;padding-bottom:0}
  #whiteboard.board-fit-5 .board-illustration{margin-block:0}
  #whiteboard.board-fit-5 .lesson-answer-section{padding-block:0}
  #whiteboard.board-fit-5 .answer-entry{padding-block:0}
  #whiteboard.board-fit-5 :is(.lesson-answer-section,.answer-prompt){margin-bottom:0}
  #whiteboard.board-fit-5 .board-illustration>.explore-controls{margin-top:0}
  /* Short choices share a row; a long one still takes the whole row. */
  #whiteboard.board-fit-5 .board-choices{display:flex;flex-wrap:wrap}
  #whiteboard.board-fit-5 .board-choice{flex:1 1 auto}
}
/* Phones: the chat box fills the space beside the teacher, so its "Ask" placeholder is never cut off. */
@media(max-width:760px){.composer-row>div:has(>#question-form),.composer-row #question-form,.composer-row #question-form .input-shell{flex:1 1 auto;min-width:0}}
@media(max-width:374px){.teacher-column{grid-template-columns:88px minmax(0,1fr)}.teacher-column .character-space{width:88px}}
@media(max-width:340px){.teacher-column{grid-template-columns:64px minmax(0,1fr)}.teacher-column .character-space{width:64px}.teacher-column .composer-row{gap:6px}.teacher-column .composer-box{padding-inline:1px}.teacher-column #question{padding-inline:2px}}
/* The current reply stays readable even when speech is muted or unavailable. Keyboard users can scroll long replies. */
.teacher-column .teacher-message{margin:0;padding:2px 4px}
.teacher-column #koa-message{margin:0;max-height:144px;overflow:auto;font-size:18px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
@media(max-width:760px){
  .teacher-column{height:auto;align-items:end;row-gap:6px}
  .teacher-column .teacher-panel{grid-column:1;grid-row:2}
  .teacher-column .conversation-area{display:contents}
  .teacher-column .teacher-message{grid-column:1 / -1;grid-row:1;padding:4px 3px}
  .teacher-column #koa-message{max-height:78px;font-size:17px;line-height:1.45}
  .teacher-column .composer-row{grid-column:2;grid-row:2;align-self:end}
  .teacher-column .conversation-area>.notice{position:static;grid-column:1 / -1;grid-row:3;pointer-events:auto;max-height:96px;font-size:16px;line-height:1.4;padding:6px 8px;box-shadow:none}
}

/* Each column owns its controls, so alignment follows the 2:3 layout and the narrower tutor
   beside open homework. The former full-width toolbar no longer reserves a grid row. */
.classroom{grid-template-rows:minmax(0,1fr)}
.classroom>.teacher-column,.classroom>.workspace-panel{grid-row:1}
.workspace-panel>.lesson-actions{display:flex;flex:0 0 auto;flex-direction:column;gap:6px;min-width:0;border:0;padding:10px 0 12px}
.workspace-panel>.lesson-actions>.board-toolbar{width:100%;min-width:0}
@media(min-width:1200px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .classroom:not(:has(#lesson-workspace.has-reference)){grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:12px}
}
@media(min-width:761px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .teacher-column{container-type:inline-size}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .teacher-column>.lesson-utilities{min-height:100px}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .teacher-controls{flex-wrap:nowrap;max-width:100%}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .teacher-controls>button{flex:0 1 auto;white-space:normal}
}
@container(min-width:800px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .teacher-column>.lesson-utilities{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .lesson-utilities>.teacher-controls{justify-self:center}
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .lesson-utilities>.view-buttons{position:absolute;left:0;top:50%;transform:translateY(-50%)}
}
/* Full Screen keeps voice controls with the conversation tray below the expanded board. */
.board-expanded .classroom{grid-template-rows:minmax(0,1fr) auto}
.board-expanded .classroom>.workspace-panel{grid-row:1}
.board-expanded .classroom>.teacher-column{grid-row:2}
@media(max-width:760px){
  .classroom{grid-template-rows:minmax(0,1fr) auto}
  .classroom>.workspace-panel{grid-row:1}
  .classroom>.teacher-column{grid-row:2}
  .workspace-panel>.lesson-actions{padding:2px 0 6px}
  .teacher-column>.lesson-utilities{grid-column:1 / -1;grid-row:2}
  .teacher-column .teacher-panel,.teacher-column .composer-row{grid-row:3}
  .teacher-column .conversation-area>.notice{grid-row:4}
}

@container(max-width:600px){:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is(button,[role=radio]),#learning-start .learning-grade-select,#test-prep-start :is(#test-prep-grade,#test-prep-state){font-size:22px}}
/* In Progress uses the catalog grid and palette, with one explicit resume action. */
#work-page[data-library-view=in-progress] #work-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
#work-page .work-progress-item{min-width:0;padding:0;border:0;background:none;border-radius:16px}
#work-page .work-progress-card{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;height:180px;padding:20px 16px;border:3px solid var(--ink);border-radius:16px;background:var(--pool);color:var(--ink)}
#work-page .work-progress-card>h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:0;font:750 24px/1.2 var(--font);text-align:center;color:inherit}
#work-page .work-progress-card>footer{width:100%;margin-top:auto}
#work-page .work-progress-card .homework-continue{width:100%;min-height:64px;padding:12px 20px;font-size:24px;font-weight:750;line-height:1.2}
#work-page .work-progress-card .homework-continue:focus-visible{outline-color:var(--focus)}
#work-page[data-library-view=in-progress] #work-list>.work-empty{grid-column:1/-1}

#work-page .work-row-actions{grid-template-columns:minmax(0,1fr)}

/* One vertical section rhythm across centers and account pages. */
#learning-start .learning-home-group{gap:var(--section-gap)}
#learning-start>#learning-progress{margin-bottom:var(--section-gap)}
#homework-view[data-has-homework=false]{gap:var(--section-gap)}
#homework-view>#homework-progress{margin-bottom:0}
#homework-view[data-has-homework=true] .homework-help-card{margin-bottom:var(--section-gap)}
#work-page:not([hidden]){gap:var(--section-gap)}
#test-prep-start .test-prep-section,#test-prep-start #test-prep-choice{margin-top:var(--section-gap)}
#test-prep-start .test-prep-pickers{row-gap:var(--section-gap)}
#test-prep-start .test-prep-pickers>.test-prep-section,#test-prep-drills>.test-prep-section:first-child{margin-top:0}
#learning-start .learning-start-pickers{row-gap:var(--section-gap)}
body .home-page,body .settings-grid,body .profile-form{row-gap:var(--section-gap)}
body .home-page>.section-card+.section-card{margin-top:0}
/* Grade fields start light gold; an explicit choice is solid gold and hover is teal. */
:is(#learning-start #learning-grade,#test-prep-start #test-prep-grade){background:color-mix(in srgb,var(--lamp) 20%,var(--surface))}
:is(#learning-start #learning-grade,#test-prep-start #test-prep-grade,#test-prep-start #test-prep-state):has(option:checked:not([value=""])):not(:disabled){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
:is(#learning-start #learning-grade,#test-prep-start #test-prep-grade,#test-prep-start #test-prep-state) option{background:var(--surface);color:var(--ink)}
#account-page:not([hidden]){gap:var(--section-gap)}
.profile-rewards-card{margin-top:var(--section-gap)}
/* Exam choices share the featured action palette; selected still has its underline. */
#test-prep-start .test-prep-tests>.learning-subject{background:var(--surface);border-color:var(--ink);color:var(--ink)}
#test-prep-start .test-prep-tests>.learning-subject[aria-pressed=true]{background:var(--lamp);border-color:var(--ink);color:var(--ink);text-decoration-thickness:4px;text-underline-offset:9px;text-decoration-skip-ink:auto}
#test-prep-start .test-prep-tests>.learning-subject:hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
#test-prep-home-note:empty{display:none}
@container(max-width:800px){#learning-start .learning-start-pickers{grid-template-columns:minmax(0,1fr)}}

body:not([data-center=test-prep]) #show-test-overview{display:none}
body[data-center=test-prep] .section-navigation{--section-tab-count:5;grid-template-columns:repeat(5,minmax(140px,1fr))}
body[data-center=test-prep] .section-navigation>.section-tab{white-space:normal}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is([aria-pressed=true],[aria-checked=true]){text-decoration:none}
:is(#learning-start #learning-subjects,#test-prep-start #test-prep-subjects) :is([aria-pressed=true],[aria-checked=true])::after{content:'✓';flex:none;margin-left:8px;font-size:.8em;line-height:1}

#test-prep-start #test-prep-choice>.test-prep-go{grid-template-columns:repeat(3,minmax(0,1fr))}
@container(max-width:600px){#test-prep-start #test-prep-choice>.test-prep-go{grid-template-columns:minmax(0,1fr)}}
#test-prep-start .test-prep-tests>.learning-subject{position:relative}
#test-prep-start .test-prep-tests>.learning-subject[aria-pressed=true]{text-decoration:none}
#test-prep-start .test-prep-tests>.learning-subject[aria-pressed=true]::after{content:'✓';position:absolute;top:8px;right:10px;font-size:20px;line-height:1}

#test-prep-start .test-overview-summary{display:block;margin:0}
#test-prep-start .test-overview-summary>.state-about-eyebrow{margin:0 0 6px}
#test-prep-start .test-overview-summary>.test-prep-info-title{margin:0 0 8px}
#test-prep-start .test-overview-summary>.state-about-text{margin:0;font-size:20px}
.test-overview-details{margin-top:16px;border-top:2px solid var(--ink);padding-top:12px}
.test-overview-details>summary{min-height:48px;padding:10px 4px;color:var(--lagoon-deep);font:750 20px/1.3 var(--font);cursor:pointer}
.test-overview-details>summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.test-overview-details[open]>summary{margin-bottom:12px}

.test-overview-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:0 0 8px}
#test-prep-start .test-overview-heading>.test-prep-info-title,#test-prep-start .test-overview-heading>.state-about-eyebrow{margin:0}
.test-overview-details{margin-top:12px;padding-top:8px}
.test-overview-details>summary{min-height:44px;padding-block:8px}

/* Learning Center keeps the current teaching board in its own tab. */
body:not([data-center=learning]):not([data-center=test-prep]) #show-learning-in-progress{display:none}
body[data-center=learning] .section-navigation{--section-tab-count:4;grid-template-columns:repeat(4,minmax(140px,1fr))}
#learning-start:not([data-learning-view=in-progress])>#learning-in-progress{display:none}
#learning-start[data-learning-view=in-progress]>:not(#learning-in-progress){display:none}
#learning-start[data-learning-view=in-progress]>#learning-in-progress{margin-top:0}
/* Destination actions rest light gold, select solid gold, and hover teal. */
#learning-start .learning-choice-go>.test-prep-go-button:not(:disabled),#test-prep-start #test-prep-choice>.test-prep-go>.test-prep-go-button:not(:disabled){background:color-mix(in srgb,var(--lamp) 20%,var(--surface));border-color:var(--ink);color:var(--ink)}
#learning-start .learning-choice-go>.test-prep-go-button[aria-pressed=true]:not(:disabled),#test-prep-start #test-prep-choice>.test-prep-go>.test-prep-go-button[aria-pressed=true]:not(:disabled){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
#learning-start .learning-choice-go>.test-prep-go-button:is(:hover,:active):not(:disabled),#test-prep-start #test-prep-choice>.test-prep-go>.test-prep-go-button:is(:hover,:active):not(:disabled){background:var(--lagoon);border-color:var(--ink);color:var(--surface)}
/* About this Test uses featured actions for its disclosure and source links. */
.test-overview-details>summary,#test-prep-start .test-overview-summary :is(.state-practice-link,.state-choose){width:fit-content;max-width:100%;min-height:48px;padding:10px 20px;border:3px solid var(--ink);border-radius:var(--action-radius);background:var(--lamp);color:var(--ink);font:750 20px/1.3 var(--font);text-decoration:none}
#test-prep-start .test-overview-summary :is(.state-practice-link,.state-choose){display:inline-flex;align-items:center;justify-content:center;white-space:normal}
.test-overview-details>summary:hover,#test-prep-start .test-overview-summary :is(.state-practice-link,.state-choose):hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
/* Large active-lesson controls keep visible labels and the shared action states. */
.workspace-panel #lesson-workspace:not(.has-reference)>.lesson-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-self:stretch;width:100%;gap:12px}
.workspace-panel #lesson-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;border:0;background:transparent;min-width:0}
.workspace-panel #lesson-workspace #lesson-controls>.replay-board,.workspace-panel #lesson-player>#lesson-exit{min-width:0;min-height:64px;height:auto;padding:12px 16px;border:3px solid var(--ink);border-radius:var(--action-radius);font-size:22px;font-weight:750;line-height:1.2;gap:8px;white-space:normal}
.workspace-panel #lesson-workspace #lesson-controls>.replay-board:not(:disabled),.workspace-panel #lesson-player>#lesson-exit:not(:disabled){background:var(--surface);color:var(--ink)}
.workspace-panel #lesson-workspace #lesson-controls>.replay-board:is(:hover,:active,[aria-pressed=true]):not(:disabled),.workspace-panel #lesson-player>#lesson-exit:is(:hover,:active):not(:disabled){background:var(--lamp);color:var(--ink);border-color:var(--ink)}
.workspace-panel #lesson-workspace #lesson-controls>.replay-board:disabled,.workspace-panel #lesson-player>#lesson-exit:disabled{background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink)}
.workspace-panel #lesson-workspace #lesson-controls>.replay-board>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.workspace-panel #lesson-controls svg,.workspace-panel #lesson-exit svg{width:24px;height:24px;color:inherit}
.workspace-panel #lesson-exit{grid-column:2;grid-row:1;min-width:170px}
@container(max-width:800px){
  .workspace-panel #lesson-workspace:not(.has-reference)>.lesson-bar{grid-template-columns:minmax(0,1fr)}
  .workspace-panel #lesson-controls svg{display:none}
  .workspace-panel #lesson-exit{grid-column:1;grid-row:2;width:100%}
}
@container(max-width:560px){
  .workspace-panel #lesson-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #lesson-workspace #lesson-controls>.replay-board,.workspace-panel #lesson-player>#lesson-exit{font-size:20px}
}
/* Active teaching stays near the controls instead of centering in unused height. */
.workspace-panel #lesson-workspace:not(.has-reference):has(#lesson-controls:not([hidden])){align-content:start;grid-template-rows:auto auto}
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])):not(.has-reference)>#teaching-pane{align-self:start}
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic:is(:hover,:focus-visible,:active,[aria-pressed=true],[aria-current=page]):not(:disabled){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
.workspace-panel #lesson-player>#lesson-exit:not(:disabled){background:var(--action-danger);border-color:var(--action-danger);color:var(--surface)}
.workspace-panel #lesson-player>#lesson-exit:is(:hover,:active,[aria-pressed=true]):not(:disabled){background:color-mix(in srgb,var(--action-danger) 80%,var(--ink));border-color:var(--action-danger);color:var(--surface)}
/* The answer area gets room without changing inline-answer or choice behavior. */
.workspace-panel #answer-section{width:100%;max-width:760px;margin:20px auto 24px;padding:24px;border:3px solid var(--ink);border-radius:18px;background:var(--pool);gap:20px}
.workspace-panel #answer-section #answer-problem{width:100%}
.workspace-panel #answer-section .answer-entry{gap:10px;padding:10px;border:3px solid var(--ink);border-radius:14px;background:var(--surface)}
.workspace-panel #answer-section .answer-entry input{min-height:56px;padding:10px 12px;font-size:26px;line-height:1.3}
.workspace-panel #answer-section .answer-entry #answer-mic-button{min-width:56px;min-height:56px;width:56px;height:56px;flex-basis:56px}
.workspace-panel #answer-section #answer-actions{display:flex;flex-wrap:wrap;justify-content:center;width:100%;gap:14px;padding:0;margin-top:4px}
.workspace-panel #answer-section #answer-actions>:is(#explain-another-way,#give-hint,#check-answer){flex:1 1 160px;min-width:0;min-height:64px;padding:12px 18px;border:3px solid var(--ink);border-radius:var(--action-radius);font-size:22px;font-weight:750;line-height:1.2;white-space:normal}
.workspace-panel #answer-section #answer-actions>:is(#explain-another-way,#give-hint):not(:disabled){background:color-mix(in srgb,var(--lamp) 22%,var(--surface));color:var(--ink)}
.workspace-panel #answer-section #answer-actions>:is(#explain-another-way,#give-hint):hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
.workspace-panel #answer-section #check-answer:not(:disabled){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
.workspace-panel #answer-section #check-answer:is(:hover,:active):not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
.workspace-panel #answer-section #answer-actions>:disabled{background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink)}
@container(max-width:560px){
  .workspace-panel #answer-section{padding:16px;gap:16px}
  .workspace-panel #answer-section .answer-entry input{font-size:22px}
  .workspace-panel #answer-section #answer-actions>:is(#explain-another-way,#give-hint,#check-answer){flex-basis:100%;font-size:20px}
}
.workspace-panel #lesson-workspace #lesson-controls>#replay-board:hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
/* Active lesson content follows the tab strip's full board width. */
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])){padding-inline:0}
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden]))>#teaching-pane{width:100%;max-width:none}
.workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])) #board-content{width:100%;max-width:none;padding-inline:0}
.workspace-panel #whiteboard #answer-section{width:100%;max-width:none;padding:24px}
@container(max-width:560px){.workspace-panel #whiteboard #answer-section{padding:16px}}
/* Pause signals a stop on hover; Resume is a positive teal action. */
.workspace-panel #lesson-workspace #lesson-controls>#lesson-pause[aria-pressed=false]:hover:not(:disabled){background:color-mix(in srgb,var(--action-danger) 12%,var(--surface));border-color:var(--action-danger);color:var(--action-danger)}
.workspace-panel #lesson-workspace #lesson-controls>#lesson-pause[aria-pressed=true]:not(:disabled){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
.workspace-panel #lesson-workspace #lesson-controls>#lesson-pause[aria-pressed=true]:hover:not(:disabled){background:var(--lagoon-deep);border-color:var(--lagoon-deep);color:var(--surface)}
.workspace-panel #whiteboard #answer-section{margin-top:64px}

#work-page .work-row-action-grid>:is(.work-view,.work-print):is(:hover,:focus-visible):not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}

:is(#learning-start #learning-grade,#test-prep-start #test-prep-grade,#test-prep-start #test-prep-state):has(option:checked):hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}

/* Shared reading order: title, explanation/feedback, activity, then the task. */
.workspace-panel #whiteboard :is(#board-content,#board-past){text-align:center}
.workspace-panel #whiteboard :is(#board-content,#board-past) h2{max-width:100%;margin:8px 0 24px;font-size:34px;line-height:1.25}
.workspace-panel #whiteboard :is(#board-content,#board-past) .board-paragraph{font-size:26px;line-height:1.55;margin:20px auto;max-width:64ch}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-prompt{font-size:30px;font-weight:750;line-height:1.5;margin:28px auto 0;max-width:56ch}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn{width:100%;margin:0 0 28px;padding:24px;border:3px solid var(--ink);border-radius:18px;background:var(--pool);text-align:center}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn p{max-width:64ch;margin-inline:auto;font-size:26px;line-height:1.55}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn .lesson-turn-learner{font-size:22px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .illustration-tap_words .illustration-drawing{height:auto;max-height:none;padding:20px 12px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .tap-words{gap:16px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .tap-words-line{justify-content:center;gap:10px 12px;line-height:1.5}
.workspace-panel #whiteboard :is(#board-content,#board-past) .tap-word{min-height:56px;padding:8px 10px;font:750 30px/1.4 var(--font);white-space:pre;background:var(--surface);border:2px solid var(--ink);box-shadow:none;color:var(--ink)}
.workspace-panel #whiteboard :is(#board-content,#board-past) .tap-word:is(:hover,[aria-pressed=true]){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
@container(max-width:560px){
  .workspace-panel #whiteboard :is(#board-content,#board-past) h2{font-size:28px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .board-paragraph,.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn p{font-size:22px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-prompt{font-size:26px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn{padding:18px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .tap-word{font-size:26px}
}
/* Homework Home shares the larger primary and secondary button system. */
#homework-view :is(.homework-intake-actions,.homework-kind-actions,.recent-homework-actions) .button,#homework-view #see-all-homework{min-height:64px;padding:12px 20px;border-width:3px;border-color:var(--ink);font-size:22px;font-weight:750;line-height:1.2;border-radius:var(--action-radius)}
#homework-view .button-primary:not(:disabled){background:var(--lamp);color:var(--ink)}
#homework-view :is(.button:not(.button-primary),#see-all-homework):not(:disabled){background:var(--surface);color:var(--ink)}
#homework-view :is(.button,#see-all-homework):is(:hover,:focus-visible):not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
@container(max-width:560px){#homework-view :is(.homework-intake-actions,.homework-kind-actions,.recent-homework-actions) .button,#homework-view #see-all-homework{font-size:20px}}
.workspace-panel #whiteboard :is(#board-content,#board-past) .board-steps li{font-size:24px;line-height:1.55}
.workspace-panel #whiteboard :is(#board-content,#board-past) .board-choice{min-height:64px;padding:14px 20px;font-size:24px;line-height:1.4}
@container(max-width:560px){.workspace-panel #whiteboard :is(#board-content,#board-past) .board-steps li,.workspace-panel #whiteboard :is(#board-content,#board-past) .board-choice{font-size:22px}}
.view-buttons #expand-board{background:var(--lamp);border-color:var(--ink);color:var(--ink)}
.view-buttons #expand-board:is(:hover,:active):not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
.teacher-controls>:is(#conversation-toggle,#mute-voice)[aria-pressed=false]:not(:disabled){background:color-mix(in srgb,var(--action-danger) 12%,var(--surface));border-color:var(--action-danger);color:var(--action-danger)}
.teacher-controls>#mute-voice[data-voice=talking]{background:color-mix(in srgb,var(--action-danger) 12%,var(--surface));border-color:var(--action-danger);color:var(--action-danger);box-shadow:none}
.teacher-controls>#conversation-toggle:hover:not(:disabled),.teacher-controls>#mute-voice:hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
.teacher-controls .mic-hover-label{display:none}
.teacher-controls .voice-hover-label{display:none}
.teacher-controls>#mute-voice[data-voice=off]:is(:hover,:focus-visible):not(:disabled)>#mute-voice-label{display:none}
.teacher-controls>#mute-voice[data-voice=off]:is(:hover,:focus-visible):not(:disabled)>.voice-hover-label{display:inline}
.teacher-controls>#conversation-toggle[data-mic-off=true]:is(:hover,:focus-visible):not(:disabled)>#conversation-toggle-label{display:none}
.teacher-controls>#conversation-toggle[data-mic-off=true]:is(:hover,:focus-visible):not(:disabled)>.mic-hover-label{display:inline}
.teacher-controls>#conversation-toggle[data-mic-off=true]:is(:hover,:focus-visible):not(:disabled)>.mic-icon::after{display:none}
.lesson-utilities .teacher-controls>#teacher-status{font-size:24px;font-weight:750;gap:10px}
.lesson-utilities .teacher-controls>#teacher-status i{flex-basis:14px;width:14px;height:14px}
@media(max-width:760px){.lesson-utilities .teacher-controls>#teacher-status{font-size:20px}}
/* The source-page toggle belongs to the same toolbar as playback and Leave Lesson. */
.workspace-panel #lesson-workspace>#lesson-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;justify-self:stretch;width:100%;gap:12px;align-items:stretch}
.workspace-panel #lesson-workspace>#lesson-bar>:is(#lesson-player,#homework-player){display:contents}
.workspace-panel #lesson-workspace>#lesson-bar #lesson-controls{grid-column:1;grid-row:1}
.workspace-panel #lesson-workspace>#lesson-bar #homework-preview-toggle{grid-column:2;grid-row:1;min-height:64px;padding:12px 16px;border:3px solid var(--ink);font-size:22px;line-height:1.2;color:var(--ink);gap:8px}
.workspace-panel #lesson-workspace>#lesson-bar #homework-preview-toggle>span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}
.workspace-panel #lesson-workspace>#lesson-bar #homework-preview-toggle svg{width:24px;height:24px;color:inherit}
.workspace-panel #lesson-workspace>#lesson-bar #homework-preview-toggle:hover:not(:disabled){background:var(--lagoon);border-color:var(--surface);color:var(--surface)}
.workspace-panel #lesson-workspace>#lesson-bar #lesson-exit{grid-column:3;grid-row:1}
.workspace-panel #lesson-workspace>#lesson-bar #reference-tools{grid-column:1/-1;grid-row:2;justify-content:center;flex-wrap:wrap}
.workspace-panel #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar{grid-template-columns:minmax(0,1fr) auto}
.workspace-panel #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar #lesson-exit{grid-column:2}
@container(max-width:1000px){
  .workspace-panel #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #lesson-controls{grid-column:1/-1}
  .workspace-panel #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #homework-preview-toggle{grid-column:1;grid-row:2;font-size:20px}
  .workspace-panel #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #lesson-exit{grid-column:2;grid-row:2;width:100%}
  .workspace-panel #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #reference-tools{grid-row:3}
}
@container(max-width:560px){
  .workspace-panel #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar{grid-template-columns:minmax(0,1fr)}
  .workspace-panel #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar #lesson-exit{grid-column:1;grid-row:2}
}
@container(max-width:620px){.workspace-panel #lesson-workspace.has-reference>.lesson-reference{grid-row:3}}
/* Fit longer steps by reclaiming space before reducing reading sizes. Scroll remains available. */
.workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section{margin-top:24px;margin-bottom:12px;padding:16px;gap:12px}
.workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content h2{margin:4px 0 12px}
.workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-turn{padding:14px;margin-bottom:14px}
.workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-turn p{margin-block:0;line-height:1.4}
.workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-prompt{margin-top:16px;line-height:1.35}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content :is(.board-paragraph,.lesson-turn p){font-size:24px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-prompt{font-size:26px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content h2{font-size:clamp(36px,3.8dvh,42px)}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .illustration-tap_words .illustration-drawing{padding:10px 4px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .tap-words{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .tap-words-line{display:contents}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .tap-word{font-size:clamp(26px,2.7dvh,32px);min-height:48px;padding:4px 8px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section{padding:12px;margin-top:20px;gap:10px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section .answer-entry{padding:6px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section .answer-entry input{min-height:48px;font-size:22px}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section #answer-actions{gap:10px;margin:0}
.workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #answer-section #answer-actions>button{min-height:56px;font-size:20px;padding:10px 12px}
.workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #lesson-workspace{padding-block:6px}
.workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #lesson-workspace>#lesson-bar{margin-bottom:8px}
.workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #answer-section{margin-top:12px;margin-bottom:4px}
.workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content .board-illustration{margin-block:4px}
.home-progress-card .rewards-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:20px;min-height:0;padding-block:4px}
.home-progress-card .reward-summary-item{padding:2px 0;align-items:center}
.home-progress-card .reward-summary-icon{font-size:48px}
.home-progress-card .reward-summary-label{font-size:22px}
.home-progress-card .reward-summary-title{font-size:30px;line-height:1.15}
.home-progress-card .reward-summary-item[data-summary-slot=next]{padding-left:20px;border-left:2px solid var(--line)}
@container(max-width:400px){.home-progress-card .rewards-summary{gap:12px}.home-progress-card .reward-summary-item{flex-direction:column;align-items:flex-start;gap:10px}.home-progress-card .reward-summary-item[data-summary-slot=next]{padding-left:12px}.home-progress-card .reward-summary-title{font-size:22px}}
.teacher-column #koa-message{font-size:22px;line-height:1.45}
#learning-choice-meta,#test-prep-choice-meta{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px;text-decoration-skip-ink:auto}
@media(max-width:760px){.teacher-column #koa-message{font-size:20px;max-height:90px}}
@media(max-width:760px){
  .teacher-column .composer-row{flex-wrap:wrap;justify-content:flex-start}
  .teacher-column .composer-row>.composer-box{flex:1 1 100%;width:100%}
}
/* Keep answering beside the chat at the bottom; the lesson gets the remaining height. */
@media(min-width:761px){
  body:not(.board-expanded) .workspace-panel #whiteboard:has(#lesson-controls:not([hidden])){overflow:hidden}
  body:not(.board-expanded) .workspace-panel #whiteboard #lesson-workspace:has(#lesson-controls:not([hidden])){height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr);align-content:stretch;padding-bottom:var(--teaching-bottom-gap)}
  body:not(.board-expanded) .workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden]))>#teaching-pane{display:flex;flex-direction:column;align-self:stretch;height:100%;min-height:0;overflow:hidden}
  body:not(.board-expanded) .workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])) :is(#board-content,#board-past){flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:0}
  body:not(.board-expanded) .workspace-panel #whiteboard #lesson-workspace:has(#lesson-controls:not([hidden])) #answer-section{flex:0 0 auto;margin-top:8px;margin-bottom:0}
  body:not(.board-expanded) .workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden]))>.lesson-reference{max-height:100%;overflow:auto}
  .workspace-panel #whiteboard:not(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content :is(.board-paragraph,.lesson-turn p){font-size:28px}
  body:not(.board-expanded) .workspace-panel #whiteboard #answer-section #answer-actions>#explain-another-way{flex:1 1 0}
  body:not(.board-expanded) .workspace-panel #whiteboard #answer-section #answer-actions>#give-hint{flex:1 1 0}
  body:not(.board-expanded) .workspace-panel #whiteboard #answer-section #answer-actions>#check-answer{flex:1 1 0}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-turn p{font-size:clamp(26px,2.6dvh,30px)}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) #board-content p.lesson-prompt{font-size:clamp(30px,3dvh,34px);margin-top:8px}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content h2{margin-bottom:8px}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-turn{margin-bottom:10px;padding:10px}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #lesson-workspace>#lesson-bar{margin-bottom:4px}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content .illustration-tap_words .illustration-drawing{padding-block:8px}
}

/* Activity directions stay readable even at the compact fitting levels. */
.workspace-panel #whiteboard :is(#board-content,#board-past) .visual-exploration-note{font-size:30px;font-weight:700;line-height:1.4;max-width:56ch;margin:12px auto;color:var(--ink);text-align:center}
.workspace-panel #whiteboard :is(#board-content,#board-past) .board-illustration>.visual-exploration-note{flex:1 0 100%;margin:0 0 12px}
.workspace-panel #whiteboard :is(#board-content,#board-past) p.lesson-prompt{margin-top:0;margin-bottom:14px}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.sort-card,.order-card){font-size:24px;line-height:1.35;min-height:56px;padding:8px 14px;border-radius:14px;overflow-wrap:anywhere;max-width:100%}
.workspace-panel #whiteboard :is(#board-content,#board-past) .explore-bin-label{font-size:24px;line-height:1.3;margin-bottom:10px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .sort-bin{min-height:100px;padding:10px;border-width:3px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .sort-bin-cards{min-height:44px;gap:10px}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.sort-bins,.order-cards){max-width:none;gap:12px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .sort-supply{min-height:64px;gap:10px;padding:10px}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.explore-check,.explore-reset){font-size:22px;line-height:1.3;min-height:52px;padding:10px 20px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .order-card-number{width:36px;height:36px;font-size:22px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .number-line-label{font-size:24px}
@media(min-width:1100px) and (min-height:1000px){
  body:not(.board-expanded) .workspace-panel #whiteboard :is(#board-content,#board-past) :is(.board-paragraph,.lesson-turn p){font-size:28px;line-height:1.45}
  body:not(.board-expanded) .workspace-panel #whiteboard :is(#board-content,#board-past) p.lesson-prompt{font-size:30px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) h2{font-size:40px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .tap-word{font-size:32px;min-height:58px;padding:8px 12px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .teaching-fraction{width:min(100%,380px);height:140px;max-height:none}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .chocolate-bar{width:min(100%,420px)}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .count-dot.count-object{width:64px;height:64px}
}
@container(max-width:560px){
  .workspace-panel #whiteboard :is(#board-content,#board-past) .visual-exploration-note{font-size:26px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) :is(.sort-card,.order-card,.explore-bin-label,.number-line-label){font-size:22px}
}
@media(min-width:761px) and (max-width:1199px){
  body:is([data-center=learning],[data-center=homework],[data-center=test-prep]):not(.board-expanded) .classroom{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:12px}
}
/* Keep the teacher centered in the narrower column, with a little more drawing room. */
@media(min-width:761px){
  body:not(.board-expanded) .teacher-column>.teacher-panel{flex:1 1 0;aspect-ratio:auto;align-items:center;justify-content:center;min-height:0}
  body:not(.board-expanded) .teacher-column .character-space{align-self:center;width:calc(100% + 32px);max-width:none;height:100%;flex:1 1 0}
}
.teacher-column .conversation-area{border:3px solid var(--ink);box-shadow:0 5px 16px #17324d1f}
.workspace-panel #answer-section{box-shadow:0 5px 16px #17324d1f}
#learning-start:not([data-learning-view=practice])>#learning-test-tips{display:none}
#learning-start[data-learning-view=practice]>#learning-test-tips{margin-top:0}
#learning-start[data-learning-view=practice]>#learning-practice{margin-top:var(--section-gap)}
#test-prep-start .test-overview-details :is(p,li,dt,dd,td,th){font-size:22px;line-height:1.5}
#test-prep-start .test-overview-details :is(h4,h5){font-size:26px;line-height:1.3;margin-block:20px 12px}
#test-prep-start .test-overview-details :is(li,dt,dd)>:is(b,strong,span){font-size:inherit;line-height:inherit}
@container(max-width:560px){#test-prep-start .test-overview-details :is(p,li,dt,dd,td,th){font-size:20px}}
#test-prep-start .learning-topics>.test-tip-guide{grid-column:1/-1;padding:20px;border:3px solid var(--ink);border-radius:16px;background:var(--pool);font-size:22px;line-height:1.5}
#test-prep-start .test-tip-guide h4{font-size:26px;margin:0 0 12px}
#test-prep-start .test-tip-guide .state-tips li{font-size:22px;line-height:1.5}
/* Test facts have one reading order and aligned labels, followed by grouped detail. */
#test-prep-start .test-overview-details .state-card{padding:20px 0;margin:0;border:0;background:transparent;box-shadow:none}
#test-prep-start .test-overview-details .state-card-title{font-size:28px;line-height:1.3;margin:0 0 8px}
#test-prep-start .test-overview-details .state-card-name{margin:0 0 20px;font-size:20px;line-height:1.45;font-weight:500}
#test-prep-start .test-overview-details .state-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:16px;margin:20px 0;padding:0;list-style:none}
#test-prep-start .test-overview-details .state-facts>li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px;border-radius:12px;background:var(--pool);min-width:0}
#test-prep-start .test-overview-details .state-facts>li>b{font-weight:750}
#test-prep-start .test-overview-details .state-facts>li>span{font-weight:500}
#test-prep-start .test-overview-details .test-detail-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px;margin-top:24px}
#test-prep-start .test-overview-details .test-detail-group{min-width:0;padding:0;border:0;background:transparent}
#test-prep-start .test-overview-details .test-detail-group>h5{margin:0 0 14px;font-size:24px}
#test-prep-start .test-overview-details :is(.state-parts,.state-levels){display:block;margin:0;padding-left:26px;list-style:revert}
#test-prep-start .test-overview-details :is(.state-parts,.state-levels)>li{display:list-item;margin:0 0 10px;padding:0;border:0;background:none;font-size:22px;font-weight:500;line-height:1.5}
#test-prep-start .test-overview-details .state-about-change{margin:24px 0 16px;padding:16px 20px;border-left:3px solid var(--ink);background:var(--pool);border-radius:0 12px 12px 0;font-weight:500}
#test-prep-start .test-overview-details p.state-about-source{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:18px;line-height:1.5;color:var(--muted)}
@container(max-width:600px){#test-prep-start .test-overview-details .test-detail-columns{grid-template-columns:minmax(0,1fr);gap:20px}}
#test-prep-start .test-tips-section .learning-topics{gap:12px;align-items:stretch}
#test-prep-start .test-tips-section .learning-topics>.test-tip-guide{grid-column:auto;padding:16px}
#test-prep-start .test-tips-section .learning-topics>.learning-topic,#learning-start #learning-test-tips .learning-topics>.learning-topic{min-height:96px;height:auto;padding:14px 18px}
#test-prep-start .test-tips-section .learning-topic>span,#learning-start #learning-test-tips .learning-topic>span{font-size:22px;line-height:1.3}
#test-prep-start .test-tips-section .test-tip-guide h4{font-size:22px;margin-bottom:10px}
#test-prep-start .test-tips-section .test-tip-guide .state-tips{margin:0;padding-left:22px}
#test-prep-start .test-tips-section .test-tip-guide .state-tips li{font-size:20px;line-height:1.4;margin-bottom:8px}
#test-prep-start .test-overview-details .state-levels>li::before{content:none}
#test-prep-start .test-overview-details .state-facts>li>b{text-transform:none;letter-spacing:normal;font-size:22px}
/* Keep the original notice in one wide box, with compact boxed tip lessons. */
#test-prep-start .test-tips-section .learning-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;align-items:stretch}
#test-prep-start .test-tips-section .learning-topics>.test-tip-guide{grid-column:1/-1;padding:16px;border:3px solid var(--ink);border-radius:16px;background:var(--pool)}
#test-prep-start .test-tips-section .test-tip-guide .state-tips{display:block;padding-left:22px;margin:0;list-style:disc}
#test-prep-start .test-tips-section .test-tip-guide .state-tips>li{margin:0 0 6px;padding:0;border:0;background:none;font-size:20px;line-height:1.4}
#test-prep-start .test-tips-section .learning-topics>.learning-topic,#learning-start #learning-test-tips .learning-topics>.learning-topic{min-height:88px;height:auto}
#test-prep-start .test-overview-details .state-levels>li::before{content:none}
#test-prep-start .test-overview-details .state-facts>li>b{text-transform:none;letter-spacing:normal;font-size:22px}
@media(min-width:761px){body:not(.board-expanded) .teacher-column>.conversation-area{width:calc(100% - 24px);align-self:center;margin-inline:auto}}
#test-prep-start .test-readiness-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px;align-items:start}
#test-prep-start .test-preparation-group{min-width:0;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--surface)}
#test-prep-start .test-preparation-group>.test-readiness-heading{margin:0;padding:14px 16px;background:var(--ink);color:var(--surface);font-size:24px;line-height:1.3}
#test-prep-start .test-preparation-group>.readiness-rows{margin:0;padding:12px;gap:12px}
#test-prep-start .test-readiness>.readiness-note{font-size:18px;line-height:1.5;margin-top:20px}
#test-prep-start .readiness-summary{margin:20px 0 8px;font-size:20px;line-height:1.4}
#test-prep-start .readiness-method>summary{width:fit-content;min-height:44px;padding:10px 0;font-size:18px;font-weight:700;color:var(--lagoon-deep);cursor:pointer}
#test-prep-start .readiness-method .readiness-note{font-size:18px;line-height:1.5;margin:8px 0 0}
:root{--teaching-bottom-gap:clamp(16px,3.5dvh,36px)}
@media(min-width:761px){body:not(.board-expanded) .teacher-column>.conversation-area{margin-bottom:var(--teaching-bottom-gap)}}
#test-prep-start .test-tips-section .learning-topics,#learning-start #learning-test-tips .learning-topics{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.workspace-panel .test-tip-card{min-width:0;min-height:200px;padding:18px;border:3px solid var(--ink);border-radius:16px;background:var(--pool);text-align:left}
.workspace-panel .test-tip-card>h4{margin:0 0 14px;font-size:24px;line-height:1.3;color:var(--ink)}
.workspace-panel .test-tip-card>ul{margin:0;padding-left:22px}
.workspace-panel .test-tip-card>ul>li{margin-bottom:10px;font-size:20px;line-height:1.45}
#test-prep-start .readiness-row:is(.readiness-practice,.readiness-not-yet){background:color-mix(in srgb,var(--action-danger) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--action-danger) 40%,var(--surface));border-left:4px solid var(--action-danger)}
#test-prep-start .readiness-row:is(.readiness-practice,.readiness-not-yet) .readiness-level{background:color-mix(in srgb,var(--action-danger) 14%,var(--surface));color:var(--action-danger)}
#test-prep-start .readiness-row.readiness-close{background:color-mix(in srgb,var(--lamp) 16%,var(--surface));border:1px solid var(--lamp);border-left:4px solid var(--lamp)}
#test-prep-start .readiness-row.readiness-close .readiness-level{background:color-mix(in srgb,var(--lamp) 30%,var(--surface));color:var(--ink)}
#test-prep-start .readiness-row.readiness-ready{background:color-mix(in srgb,var(--lagoon) 12%,var(--surface));border:1px solid var(--lagoon);border-left:4px solid var(--lagoon)}
#test-prep-start .readiness-row.readiness-ready .readiness-level{background:color-mix(in srgb,var(--lagoon) 20%,var(--surface));color:var(--lagoon-deep)}
#test-prep-start .test-preparation-group>.readiness-rows{padding:16px;gap:16px}
#test-prep-start .readiness-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px;border-radius:12px}
#test-prep-start .readiness-row .readiness-skill{font-size:21px;line-height:1.3;font-weight:750}
#test-prep-start .readiness-row .readiness-level{align-self:flex-start;max-width:100%;padding:5px 12px;font-size:17px;line-height:1.3;white-space:normal}
#test-prep-start .readiness-row .readiness-brief{margin:0;font-size:18px;line-height:1.4}
#test-prep-start .readiness-skill-details>summary{min-height:40px;padding:8px 0;font-size:17px;font-weight:700;color:var(--lagoon-deep);cursor:pointer}
#test-prep-start .readiness-skill-details .readiness-bar{display:block;width:100%;margin:6px 0 12px}
#test-prep-start .readiness-skill-details .readiness-detail{font-size:17px;line-height:1.5;margin:0}
#test-prep-start .readiness-row>.readiness-review{align-self:flex-start;min-height:44px;padding:10px 16px;font-size:18px}
#test-prep-start .test-preparation-status>.section-title{background:var(--lagoon);color:var(--surface)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab{white-space:normal}
.home-progress-card>.section-title,#test-prep-start .test-preparation-status>.section-title,#home-stats-heading{background:linear-gradient(105deg,var(--lagoon-deep),var(--lagoon) 65%,color-mix(in srgb,var(--lagoon) 88%,var(--surface)));color:var(--surface)}

/* Prep & Tips: scan across skills; open evidence and advice only when needed. */
#test-prep-start .test-readiness-grid{gap:12px}
#test-prep-start .test-preparation-group>.readiness-rows{padding:12px;gap:12px;align-items:start}
#test-prep-start .test-readiness-grid:has(>.test-preparation-group:only-child) .readiness-rows{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
#test-prep-start .readiness-row{display:block;padding:0}
#test-prep-start .readiness-skill-details>summary{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:42px 30px;gap:4px 10px;align-items:center;min-height:100px;padding:12px;list-style:none;color:var(--ink)}
#test-prep-start .readiness-skill-details>summary::-webkit-details-marker{display:none}
#test-prep-start .readiness-skill-details>summary::before{content:'▸';grid-row:1/3;align-self:center;font-size:22px}
#test-prep-start .readiness-skill-details[open]>summary::before{content:'▾'}
#test-prep-start .readiness-skill-details>summary .readiness-skill{grid-column:2;font-size:21px}
#test-prep-start .readiness-skill-details>summary .readiness-level{grid-column:2;justify-self:start;font-size:16px;padding:4px 10px}
#test-prep-start .readiness-skill-body{padding:0 16px 16px;display:grid;gap:12px}
#test-prep-start .readiness-skill-body>.readiness-bar{margin:0}
#test-prep-start .readiness-skill-body>.readiness-review{justify-self:start;font-size:18px;min-height:44px}
#test-prep-start .readiness-method{margin-top:8px}
#test-prep-start .readiness-method>summary{padding-block:8px}
#test-prep-start .test-overview-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center}
#test-prep-start .test-overview-summary>.test-overview-heading{grid-column:1;margin:0}
#test-prep-start .test-overview-summary>.state-about-text{grid-column:1;margin:0}
#test-prep-start .test-overview-summary>.test-overview-details:not([open]){grid-column:2;grid-row:1/3;margin:0}
#test-prep-start .test-overview-summary>.test-overview-details[open]{grid-column:1/-1;margin-top:4px}
#test-prep-start .test-tips-section .test-tip-card{min-height:0;padding:0}
#test-prep-start .test-tip-disclosure>summary{min-height:100px;padding:18px;cursor:pointer;color:var(--ink)}
#test-prep-start .test-tip-disclosure>summary h4{display:inline;margin:0;font-size:22px;line-height:1.35}
#test-prep-start .test-tip-disclosure>ul{margin:0;padding:0 20px 12px 40px}
#test-prep-start .test-tip-disclosure>ul>li{margin-bottom:10px;font-size:20px;line-height:1.45}
#test-prep-start :is(.readiness-skill-details,.test-tip-disclosure)>summary:focus-visible{outline:3px solid var(--focus);outline-offset:-4px;border-radius:10px}
@media(max-width:760px){
  #test-prep-start .test-overview-summary{grid-template-columns:minmax(0,1fr)}
  #test-prep-start .test-overview-summary>.test-overview-details:not([open]){grid-column:1;grid-row:auto}
}

@media(max-width:760px){#test-prep-start .readiness-skill-details>summary{grid-template-rows:55px 45px;min-height:128px}}
@container(min-width:780px){
  #test-prep-start #test-prep-drills[data-test-view=overview]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
  #test-prep-start #test-prep-drills[data-test-view=overview]>.test-prep-section{margin-top:0;min-width:0}
  #test-prep-start #test-prep-drills[data-test-view=overview]>.test-preparation-status{grid-column:1/-1}
  #test-prep-start .test-readiness-grid:has(>.test-preparation-group:only-child) .readiness-rows{grid-template-columns:repeat(4,minmax(0,1fr))}
  #test-prep-start .readiness-skill-details>summary{grid-template-columns:12px minmax(0,1fr);grid-template-rows:55px 45px;gap:4px 6px;min-height:128px;padding:12px 10px}
  #test-prep-start .readiness-skill-details>summary .readiness-skill{font-size:20px;overflow-wrap:anywhere}
  #test-prep-start .readiness-skill-details>summary .readiness-level{font-size:16px;padding:3px 6px}
  #test-prep-start #test-prep-drills[data-test-view=overview] .test-overview-summary{grid-template-columns:minmax(0,1fr)}
  #test-prep-start #test-prep-drills[data-test-view=overview] .test-overview-details:not([open]){grid-column:1;grid-row:auto}
}

/* A slimmer, equal-width player gives the lesson more room. */
.workspace-panel #whiteboard #lesson-workspace:has(#lesson-controls:not([hidden])){padding-top:12px}
.workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #lesson-workspace:has(#lesson-controls:not([hidden])){padding-top:4px}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar{gap:10px;margin-bottom:8px;grid-template-columns:repeat(6,minmax(0,1fr))}
.workspace-panel #whiteboard #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar{grid-template-columns:repeat(5,minmax(0,1fr))}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar #lesson-controls{grid-column:1/span 4;grid-row:1;gap:10px}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar #homework-preview-toggle{grid-column:5;grid-row:1}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar #lesson-exit{grid-column:6;grid-row:1;min-width:0;width:100%}
.workspace-panel #whiteboard #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar #lesson-exit{grid-column:5;grid-row:1}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar :is(#lesson-controls>.replay-board,#lesson-exit,#homework-preview-toggle){min-height:52px;min-width:0;padding:6px 10px;font-size:20px;gap:6px;line-height:1.2}
.workspace-panel #whiteboard #lesson-bar :is(#lesson-controls,#lesson-exit,#homework-preview-toggle) svg{width:20px;height:20px}
.workspace-panel #whiteboard #answer-section #answer-actions{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;align-items:stretch}
.workspace-panel #whiteboard #answer-section #answer-actions>button{width:100%;min-width:0;min-height:64px;padding:6px 10px;font-size:20px;line-height:1.2}
@container(max-width:1000px){
  .workspace-panel #whiteboard #lesson-bar :is(#lesson-controls,#lesson-exit,#homework-preview-toggle) svg{display:none}
  .workspace-panel #whiteboard #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #whiteboard #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #lesson-controls{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #whiteboard #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #homework-preview-toggle{grid-column:1;grid-row:2}
  .workspace-panel #whiteboard #lesson-workspace:has(#homework-preview-toggle:not([hidden]))>#lesson-bar #lesson-exit{grid-column:2;grid-row:2}
}
@container(max-width:600px){
  .workspace-panel #whiteboard #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #whiteboard #lesson-workspace>#lesson-bar #lesson-controls{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-panel #whiteboard #lesson-workspace:not(:has(#homework-preview-toggle:not([hidden])))>#lesson-bar #lesson-exit{grid-column:1;grid-row:2}
}
@container(max-width:440px){
  .workspace-panel #whiteboard #answer-section #answer-actions{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr}
}

@media(min-width:761px){body .workspace-panel #whiteboard :is(#board-content,#board-past) .board-steps li{font-size:26px;line-height:1.4}}

.workspace-panel #whiteboard #lesson-workspace:has(#lesson-controls:not([hidden]))>#lesson-bar{margin-bottom:10px}
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar{padding:10px;border:3px solid var(--ink);border-radius:18px;background:var(--pool);box-shadow:0 5px 16px #17324d1f}
@media(min-width:761px){
  body:not(.board-expanded) .workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])) #board-content{display:flex;flex-direction:column;justify-content:safe center}
  body:not(.board-expanded) .workspace-panel #lesson-workspace:has(#lesson-controls:not([hidden])) #board-content>*{flex-shrink:0}
}
/* Separate navigation, teaching and answering without adding an avatar panel. */
.workspace-panel #whiteboard #lesson-workspace>#lesson-bar{background:color-mix(in srgb,var(--ink) 12%,var(--surface))}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn{background:color-mix(in srgb,var(--lamp) 12%,var(--surface))}

.workspace-panel #whiteboard :is(#board-content,#board-past) h2{margin-top:0}
.workspace-panel #whiteboard :is(#board-content,#board-past) .lesson-turn:not(.lesson-overview){background:var(--surface)}
@container(max-width:600px){.workspace-panel #whiteboard #lesson-workspace>#lesson-bar :is(#lesson-controls>.replay-board,#lesson-exit){min-height:66px}}

/* Apply the shared lesson standard to native homework and concept activities. */
.workspace-panel #whiteboard :is(#board-content,#board-past) .concept-card{font-size:clamp(24px,2.8dvh,30px);line-height:1.4;min-height:64px;padding:12px 16px}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.visual-exploration-button){min-height:52px;max-width:100%;padding:8px 16px;border:3px solid var(--ink);border-radius:var(--action-radius);background:var(--surface);color:var(--ink);box-shadow:none;font-size:20px;line-height:1.3;white-space:normal}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.visual-exploration-button):hover:not(:disabled,[aria-disabled=true]){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
.workspace-panel #whiteboard :is(#board-content,#board-past) :is(.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.visual-exploration-button):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.workspace-panel #whiteboard :is(#board-content,#board-past) .explore-bin-label{overflow-wrap:anywhere}
@container(max-width:560px){
  .workspace-panel #whiteboard :is(#board-content,#board-past) .concept-card{font-size:22px;min-height:56px;padding:10px 14px}
  .workspace-panel #whiteboard :is(#board-content,#board-past) .sort-bin-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container(max-width:360px){.workspace-panel #whiteboard :is(#board-content,#board-past) .sort-bin-row{grid-template-columns:minmax(0,1fr)}}
/* Preserve number-line targets, labels, marker and focus bounds while reclaiming gaps. */
.workspace-panel #whiteboard :is(#board-content,#board-past) .illustration-number_line .number-line{padding-block:42px}
@media(min-width:761px){
  .workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) :is(#board-content,#board-past) .illustration-number_line{row-gap:4px}
  .workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) :is(#board-content,#board-past) .illustration-number_line>.visual-exploration-note{margin-bottom:6px}
  .workspace-panel #whiteboard:is(.board-fit-1,.board-fit-2,.board-fit-3,.board-fit-4,.board-fit-5) :is(#board-content,#board-past) .illustration-number_line>.explore-controls{margin-top:4px}
}
@media(min-width:761px){
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-prompt{margin-bottom:8px}
  body:not(.board-expanded) .workspace-panel #whiteboard:is(.board-fit-3,.board-fit-4,.board-fit-5) #board-content .lesson-overview{margin-bottom:6px}
}

/* Design pass (Nov 8): gold hover on the "What do you want to do?" buttons; gold selected tab with gold-tint siblings.
   The In Progress tab keeps its teal treatment. */
#learning-start .learning-choice-go>.test-prep-go-button:is(:hover,:active):not(:disabled),#test-prep-start #test-prep-choice>.test-prep-go>.test-prep-go-button:is(:hover,:active):not(:disabled){background:var(--lamp);border-color:var(--ink);color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:not(#show-learning-in-progress):not(#show-in-progress){background:color-mix(in srgb,var(--lamp) 22%,var(--surface));color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:not(#show-learning-in-progress):not(#show-in-progress):hover:not(:disabled){background:var(--lamp);color:var(--ink)}
body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:not(#show-learning-in-progress):not(#show-in-progress):is([aria-current=page],[aria-pressed=true]),body:is([data-center=learning],[data-center=homework],[data-center=test-prep]) .section-navigation>.section-tab:not(#show-learning-in-progress):not(#show-in-progress):is([aria-current=page],[aria-pressed=true]):hover:not(:disabled){background:var(--lamp);color:var(--ink)}

/* Subject switcher in the Lessons, Test Tips and Practice Tests bands. */
.learning-subject-switch{display:block;flex:0 1 280px;margin-left:auto;margin-right:12px;min-width:0}
.learning-subject-switch+.learning-catalog-search{margin-left:0}
.learning-subject-select option{color:var(--ink);background:var(--surface)}
.learning-subject-select{width:100%;min-height:52px;padding:10px 40px 10px 18px;color:var(--ink)!important;-webkit-text-fill-color:var(--ink);border:2px solid var(--ink);border-radius:12px;background:var(--lamp);color:var(--ink);font:700 18px/1.2 var(--font);cursor:pointer}
.learning-subject-select:focus-visible{outline:3px solid var(--surface);outline-offset:2px}
.learning-catalog-header .learning-subject-switch .learning-subject-select{padding:10px 44px 10px 20px}

/* Check mark on Home once a grade is chosen, matching the selected subject chip. */

/* Larger dropdown arrow, set in from the edge, on the Home grade picker and the header subject picker. */
#learning-start #learning-grade,#learning-start .learning-subject-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5l7 7 7-7' fill='none' stroke='%2317324D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:26px 26px!important}
.learning-catalog-header .learning-subject-switch .learning-subject-select{padding-right:56px}

/* Lesson and practice test cards: dark teal on hover, focus and select. */
:is(#learning-start,#test-prep-start) .learning-topics>.learning-topic:is(:hover,:focus-visible,:active,[aria-pressed=true],[aria-current=page]):not(:disabled){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}

/* Test Prep state and grade pickers: same check mark and larger inset arrow as the Learning Home grade picker. */
#test-prep-start #test-prep-state,#test-prep-start #test-prep-grade{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8.5l7 7 7-7' fill='none' stroke='%2317324D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:26px 26px!important}

/* Check mark for a chosen grade or state sits at the right, beside the arrow (the dropdown text is untouched). */
:is(#learning-start,#test-prep-start) .learning-grade-field{position:relative}
:is(#learning-start,#test-prep-start) .learning-grade-field:has(:is(#learning-grade,#test-prep-state,#test-prep-grade) option:checked:not([value=""]))::after{content:'✓';position:absolute;top:50%;right:60px;transform:translateY(-50%);font-size:28px;font-weight:800;line-height:1;color:var(--ink);pointer-events:none}
:is(#learning-start,#test-prep-start) .learning-grade-field:has(:is(#learning-grade,#test-prep-state,#test-prep-grade) option:checked:not([value=""])) :is(#learning-grade,#test-prep-state,#test-prep-grade){padding-right:96px}

/* Choose a Test: unselected tests carry the gold tint, like the subject chips. */
#test-prep-start .test-prep-tests>.learning-subject:not([aria-pressed=true]):not(:hover):not(:disabled){background:color-mix(in srgb,var(--lamp) 22%,var(--surface))}

/* Concept notice: a white card with a thick gold edge, so it stands apart from the gold-tinted buttons below it. */
.workspace-panel #whiteboard #board-content .lesson-turn.lesson-overview{background:var(--surface);border:3px solid var(--ink);border-left:16px solid var(--lamp);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 18%,transparent)}

/* The lesson title and its concept notice read as one card: the header is the top half, the notice the bottom half. */
.workspace-panel #whiteboard #board-content>header:has(+.lesson-turn.lesson-overview){background:var(--surface);border:3px solid var(--ink);border-left:16px solid var(--lamp);border-bottom:0;border-radius:18px 18px 0 0;margin:0;padding:8px 16px 0}
.workspace-panel #whiteboard #board-content .lesson-turn.lesson-overview{border-top:0;border-radius:0 0 18px 18px;margin-top:0;padding-top:4px}

/* Reinforcement pause: the answered step stays on the board, its controls are inactive, and a Next Step button continues. */
#board-content.reinforce-hold :is(button,input,select,textarea,[draggable=true],[role=button],[tabindex]):not(.lesson-continue){pointer-events:none}
#board-content.reinforce-hold #answer-form{display:none}
.lesson-continue{display:block;margin:14px auto 0;min-height:56px;padding:10px 32px;border:3px solid var(--ink);border-radius:var(--action-radius,14px);background:var(--lamp);color:var(--ink);font:750 22px/1.2 var(--font);cursor:pointer}
.lesson-continue:is(:hover,:active){background:var(--lagoon);border-color:var(--lagoon);color:var(--surface)}
.lesson-continue:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Activities that take their answer by dragging or tapping (sort, order, number line, tap words) have their own Check:
   the typed answer box and Check Answer button go away, leaving Explain Another Way and Give me a Hint. */
.workspace-panel:has(#board-content :is(.illustration-sort_bins,.illustration-order_cards,.illustration-number_line,.illustration-tap_words)) :is(#answer-problem,#check-answer){display:none}