/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* WonderWise brand for the app: the landing page's palette and type (lagoon, ink, lamp;
   Figtree for text, Young Serif for headings). Fonts are self-hosted so the app's CSP
   (font-src 'self') holds. The lesson keeps its plain white teaching surface. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url("/fonts/figtree-latin-variable.woff2") format("woff2")}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/young-serif-latin-400.woff2") format("woff2")}
/* Young Serif has only old-style figures, which drop below the line ("Grade 3"). Headings take their digits from Figtree so numbers sit on the baseline. */
@font-face{font-family:"WonderWise Heading Digits";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/figtree-latin-variable.woff2") format("woff2");unicode-range:U+0030-0039}
:root{
  --haze:#EEF7F5;--surface:#FFFFFF;--ink:#17324D;--muted:#3C5670;--lagoon:#256F66;--lagoon-deep:#1C5A53;
  --lamp:#F2B544;--peach:#EF8A6F;--sage:#BFE2DC;--pool:#E3F3F0;--line:#C9DEDC;--soft:#DDEFEC;
  --teal:var(--lagoon);--teal-light:var(--pool);--coral:var(--peach);--page:#FFFFFF;--paper:#FFFFFF;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;--heading:"WonderWise Heading Digits","Young Serif",Georgia,serif;
  --focus:#17324D;--shadow:0 18px 40px -18px rgba(23,50,77,.35);
  --section-band:var(--ink);--section-gap:28px;
  --action-primary:var(--lagoon);--action-primary-hover:var(--lagoon-deep);--action-primary-pressed:#174C46;
  --action-ink:#17324D;--action-muted:#3C5670;--action-secondary-bg:#fff;--action-selected:var(--pool);--action-border:var(--lagoon);
  --action-danger:#A03A28;--action-danger-hover:#823020;
  --action-disabled-bg:#E6ECEB;--action-disabled-ink:#53636B;--action-disabled-border:#A5B4B1;
  --action-radius:999px;--action-height:48px;
}
body{font-family:var(--font);color:var(--ink)}
h1,h2,.page-heading h1,.board-content h2,.empty-board h2,.learning-start h2,.work-empty h2,.account-settings h2,.work-dialog h2{font-family:var(--heading);font-weight:400;letter-spacing:0}
.board-content h2{font-weight:400}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Header: navy structure, teal actions, gold keyboard focus. */
.topbar{border-bottom-color:var(--line)}
.topbar>.brand,.brand{font-family:var(--heading);font-weight:400;letter-spacing:0;color:var(--ink);gap:10px}
.brand .brand-mark{display:block;width:34px;height:34px;background:none;border-radius:0;line-height:1;flex:none}
.topbar>.brand .brand-mark{width:34px;height:34px}
.main-nav a{color:var(--muted);border-radius:12px}
.main-nav a:hover{background:var(--haze);color:var(--ink)}
.main-nav a[aria-current=page]{background:var(--pool);color:var(--lagoon-deep)}
#new-lesson{background:var(--action-primary);border:2px solid #fff;color:#fff;border-radius:var(--action-radius);font-weight:700;box-shadow:none}
#new-lesson:hover:not(:disabled){background:var(--action-primary-hover)}
#new-lesson:active:not(:disabled){background:var(--action-primary-pressed)}

/* Shared action roles. Components own layout; these roles own colour and states.
   Cards, tabs and teaching manipulatives retain their own geometry. */
:is(.button,.replay-board,.explain-button,.hint-button,.workspace-view-button,.reset-practice-button,.reference-tool,.see-all-homework){
  min-height:var(--action-height);border:2px solid var(--action-border);border-radius:var(--action-radius);
  background:var(--action-secondary-bg);color:var(--ink);font-weight:700;
  transition:background-color .15s ease,border-color .15s ease;color-scheme:light;
}
:is(.button,.replay-board,.explain-button,.hint-button,.workspace-view-button,.reset-practice-button,.reference-tool,.see-all-homework):hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
:is(.button,.replay-board,.explain-button,.hint-button,.workspace-view-button,.reset-practice-button,.reference-tool,.see-all-homework):active:not(:disabled){background:var(--sage);border-color:var(--action-primary-pressed)}
.button-primary,#learning-go,#check-answer,.send-button:not(.cancel-button){background:var(--action-primary);border:2px solid var(--action-primary);color:#fff}
.button-primary:hover:not(:disabled),#learning-go:hover:not(:disabled),#check-answer:hover:not(:disabled),.send-button:not(.cancel-button):hover:not(:disabled){background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.button-primary:active:not(:disabled),#learning-go:active:not(:disabled),#check-answer:active:not(:disabled),.send-button:not(.cancel-button):active:not(:disabled){background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)}
/* Featured section actions use the premium brand pair. Repeated teaching
   interactions (Check Answer and Send) remain teal so the hierarchy stays clear. */
.button-primary:not(#check-answer):not(.send-button),#new-lesson{background:var(--lamp);border-color:var(--ink);color:var(--ink)}
.button-primary:not(#check-answer):not(.send-button):is(:hover,:active,[aria-pressed=true]):not(:disabled),#new-lesson:is(:hover,:active,[aria-pressed=true]):not(:disabled){background:var(--lagoon);border-color:#fff;color:#fff}
.button-danger{background:var(--action-danger);border-color:var(--action-danger);color:#fff}
.button-danger:hover:not(:disabled){background:var(--action-danger-hover);border-color:var(--action-danger-hover)}
.button-danger:active:not(:disabled){background:var(--action-danger-hover);border-color:var(--ink)}
:is(.button-danger-quiet,.work-row-delete){background:#fff;border:2px solid var(--action-danger);color:var(--action-danger)}
:is(.button-danger-quiet,.work-row-delete):hover:not(:disabled),:is(.button-danger-quiet,.work-row-delete):active:not(:disabled){background:#FFF0EB;border-color:var(--action-danger-hover);color:var(--action-danger-hover)}
.send-button{border-radius:var(--action-radius)}
.cancel-button{background:#fff;color:var(--ink);border:2px solid var(--action-border)}
.cancel-button:hover:not(:disabled){background:var(--action-selected);color:var(--ink)}
.cancel-button:active:not(:disabled){background:var(--sage)}
.text-button{min-height:44px;border-radius:var(--action-radius);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.text-button:hover:not(:disabled){background:var(--action-selected);color:var(--ink)}
.icon-button{min-width:44px;min-height:44px;border-radius:var(--action-radius);color:var(--ink)}
.icon-button:hover:not(:disabled){background:var(--action-selected);color:var(--ink)}
/* Shared disabled state wins over hover, selected and page-specific colour rules.
   Keep the label legible and geometry stable while an action is unavailable/busy. */
button:disabled,button[aria-disabled=true],a.button[aria-disabled=true]{background:var(--action-disabled-bg)!important;border-color:var(--action-disabled-border)!important;color:var(--action-disabled-ink)!important;opacity:1!important;box-shadow:none!important;transform:none!important;filter:none!important;cursor:not-allowed}
button:disabled svg{color:inherit!important}

/* Native teaching actions use the same roles; objects themselves keep their
   meaningful shapes/colours and keyboard interaction. */
:is(.visual-exploration-button,.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.explore-reset){min-height:44px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:#fff;color:var(--ink);box-shadow:none}
:is(.visual-exploration-button,.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.explore-reset):hover:not(:disabled):not([aria-disabled=true]){background:var(--action-selected);border-color:var(--action-primary-hover)}
:is(.visual-exploration-button,.fraction-join-reset,.sharing-reset,.group-size-reset,.bundle-tens-reset,.unit-grid-reset,.boundary-reset,.hundreds-reset,.explore-reset):active:not(:disabled):not([aria-disabled=true]){background:var(--sage)}
.board-choice{background:#fff;border-color:var(--action-border)}
.board-choice:hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
.board-choice:active:not(:disabled){background:var(--sage)}
/* Start screen chips and cards. */
.learning-subjects :is(button,[role=radio]){min-height:44px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:#fff;color:var(--ink)}
.learning-subjects :is(button,[role=radio]):hover:not(:disabled){background:var(--action-selected)}
.learning-subjects :is([aria-pressed=true],[aria-checked=true]){background:var(--action-selected);color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
@media(max-width:480px){.learning-subjects{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-subjects :is(button,[role=radio]){padding:8px 10px;font-size:16px;line-height:1.2}}
.learning-intake,.learning-explore .learning-topics>*{border-color:var(--line)}
.learning-intake{background:var(--haze);border-style:solid}

/* Pages other than the lesson sit on the landing's haze with white cards. */
body:not([data-page=lesson]){background:var(--haze)}
body:not([data-page=lesson]) .app-shell{background:var(--haze)}
body:not([data-page=lesson]) .topbar{background:#fff;margin:0 calc(-1 * var(--shell-x));padding-left:var(--shell-x);padding-right:var(--shell-x)}
/* The header bleed must match .app-shell's side padding at every breakpoint (styles.css). */
:root{--shell-x:34px}
@media(min-width:1600px){:root{--shell-x:56px}}
@media(max-width:1099px){:root{--shell-x:22px}}
@media(max-width:760px){:root{--shell-x:14px}}
@media(max-width:390px){:root{--shell-x:10px}}
.page-heading p{color:var(--muted)}
.settings-grid fieldset,.profile-form fieldset,.account-settings,.billing-panel,.work-intake,.work-list>li,.work-empty{background:#fff;border-color:var(--line);border-radius:18px}
.settings-advanced{background:#fff;border-color:var(--line)}
.setting-help,.profile-form .setting-field small{color:var(--muted)}
.setting-field select,.profile-form .setting-field input,.gate-input{border-color:var(--line);border-radius:12px}
.user-avatar-face{background:var(--pool);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.user-avatar[aria-expanded=true] .user-avatar-face,.user-avatar.is-current .user-avatar-face{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lagoon)}
.user-menu-panel{border-color:var(--line);border-radius:18px}
.notice{background:var(--haze);color:var(--muted);border-radius:12px}
.notice.error{background:#FFF0EB;color:#A03A28}
.work-dialog{border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.teacher-status{font-family:var(--font)}
@media(max-width:760px){body:not([data-page=lesson]) .topbar{margin:0 -12px;padding-left:12px;padding-right:12px}}
/* Lesson controls: a small card at the top right of the lesson, above the board. */
.workspace-panel .workspace-actions{position:static;display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;min-height:0}
.workspace-panel .workspace-actions:not(:has(>:not([hidden]))){display:none}
.lesson-controls{display:flex;gap:6px;padding:5px;border:2px solid var(--line);border-radius:16px;background:var(--surface)}
.lesson-controls[hidden]{display:none}
.workspace-panel .lesson-controls>.replay-board{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;height:44px;padding:2px 14px;border-color:var(--action-border);color:var(--ink);font-size:18px;line-height:1.1}
.lesson-controls svg{width:20px;height:20px;flex:0 0 auto;color:var(--lagoon)}
.lesson-controls>.replay-board:hover:not(:disabled){background:var(--pool);border-color:var(--lagoon)}
.lesson-controls>.replay-board[aria-pressed=true]{background:var(--action-selected);border-color:var(--action-border);color:var(--ink);box-shadow:inset 0 -3px 0 var(--action-border)}
.lesson-controls>.replay-board[aria-pressed=true] svg{color:inherit}
.lesson-controls>.replay-board:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.board-past-note:empty{display:none}
.board-past-note{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--lagoon)}
@media(max-width:760px){
  .workspace-panel .workspace-actions{justify-content:flex-start;width:100%;align-self:stretch}
  .lesson-controls{flex:1 1 100%;gap:4px;padding:4px}
  .workspace-panel .lesson-controls>.replay-board{flex:1 1 0;padding:2px 4px;gap:4px;font-size:15px}
  .lesson-controls svg{width:18px;height:18px}
}
/* Homework Helper: the homework drop zone, with a dotted border. */
.learning-start #learning-drop-zone[hidden]{display:none}
#homework-drop-zone{border:3px dotted #2F8F83;background:var(--haze);width:min(100%,960px);aspect-ratio:auto;min-height:300px;margin-inline:auto}
.homework-view[data-has-homework=true] #homework-drop-zone{width:min(100%,960px);margin-inline:auto}
/* Drop-area buttons: one even border on every side, in every state. */
#homework-drop-zone .button{border-width:2px;border-style:solid;box-shadow:none}
#homework-drop-zone .button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#homework-drop-zone h2{margin:0;font:700 clamp(22px,2.2vw,28px)/1.2 var(--heading);color:var(--ink)}
#homework-drop-zone p{font-size:18px;color:var(--muted)}
.homework-intake-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.homework-intake-actions .button{font-size:17px;min-height:48px;padding:10px 16px}
#homework-drop-zone.drag-active{border-style:solid;border-color:#2F8F83;background:#E3F3F0}
.homework-view[data-has-homework=true] #homework-drop-zone{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px}
.homework-view[data-has-homework=true] #homework-drop-zone :is(h2,p,small){grid-column:1}
.homework-view[data-has-homework=true] .homework-intake-actions{grid-column:2;grid-row:1 / span 3;justify-content:flex-end}
@media(max-width:760px){.homework-view[data-has-homework=true] #homework-drop-zone{grid-template-columns:1fr}.homework-view[data-has-homework=true] .homework-intake-actions{grid-column:1;grid-row:auto;justify-content:flex-start}}
/* Homework Helper: what kind of homework this is, and the most recent saved homework. */
.homework-kind{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 auto 16px;padding:14px 16px;border:2px solid var(--line);border-radius:16px;background:var(--surface);width:min(100%,960px)}
.homework-kind[hidden],.recent-homework[hidden]{display:none}
.homework-kind-text{margin:0;flex:1 1 220px;font:700 clamp(20px,2vw,24px)/1.3 var(--heading);color:var(--ink)}
.homework-kind-actions{display:flex;flex-wrap:wrap;gap:10px}
.homework-kind-actions .button,.recent-homework-actions .button,.back-to-homework{min-height:44px;font-size:17px;padding:8px 16px;border-radius:999px}
.back-to-homework[hidden]{display:none}
.recent-homework{width:min(100%,960px);margin:0 auto 18px}
.recent-homework h2{margin:0 0 10px;font:700 clamp(20px,2vw,24px)/1.2 var(--heading);color:var(--ink)}
.recent-homework-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:2px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.recent-homework-row{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 14px;border-top:1px solid var(--line)}
.recent-homework-row:first-child{border-top:0}
.recent-homework-info{flex:1 1 auto;min-width:0}
.recent-homework-name{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-homework-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 0;font-size:15px;color:var(--muted)}
.recent-homework-tag{padding:2px 10px;border-radius:999px;background:#FDEBD0;color:#7A4B00;font-size:14px;font-weight:700}
.recent-homework-tag.is-done{background:var(--pool);color:var(--lagoon-deep)}
.recent-homework-actions{flex:0 0 auto;display:flex;gap:8px}
.recent-homework-actions .button{min-width:112px;padding:8px 14px;font-size:16px}
@media(max-width:600px){
  .recent-homework-row{flex-direction:column;align-items:stretch;gap:8px}
  .recent-homework-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
  .recent-homework-actions .button{flex:1 1 0;min-width:0}
}
.homework-view:has(.recent-homework:not([hidden])){justify-content:flex-start}
.homework-view:has(.recent-homework:not([hidden])) #homework-drop-zone{min-height:0}
.see-all-homework{display:flex;align-items:center;justify-content:center;width:fit-content;min-height:44px;margin:14px auto 0;padding:8px 22px;border:2px solid var(--lagoon);border-radius:999px;background:#fff;color:var(--ink);font-size:17px;font-weight:700;text-decoration:none}
/* Conversation utilities share the secondary action vocabulary. Their state label
   and underline stay visible while hovered; selection does not replace focus. */
.teacher-controls>button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:#fff;color:var(--ink);font-size:16px;font-weight:700;line-height:1.2}
.teacher-controls svg{width:20px;height:20px;flex:none}
.teacher-controls #conversation-toggle-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.teacher-controls>#mute-voice[data-voice=talking]{background:var(--action-selected);color:var(--ink);box-shadow:inset 0 -3px 0 var(--action-border)}
.teacher-controls>.conversation-toggle[aria-pressed=false] .mic-icon{position:relative;display:inline-flex}
.teacher-controls>.conversation-toggle[aria-pressed=false] .mic-icon::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:3px;border-radius:2px;background:currentColor;transform:translateX(-50%) rotate(45deg)}
.teacher-controls>button:hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
.teacher-controls>button:active:not(:disabled){background:var(--sage)}
.teacher-controls>.conversation-toggle[aria-pressed=true]{background:var(--action-primary);border-color:var(--action-primary);color:var(--surface);box-shadow:none}
.teacher-controls>.conversation-toggle[aria-pressed=true]:hover:not(:disabled){background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--surface)}
.teacher-controls>.conversation-toggle[aria-pressed=true]:active:not(:disabled){background:var(--action-primary-pressed);border-color:var(--action-primary-pressed);color:var(--surface)}
.teacher-controls>button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Chat box: one thin row, with "+" (add homework) at the far left of the input. */
.composer-box .input-shell{align-items:center}
.composer-box .input-shell>.chat-attach{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:999px;color:var(--lagoon)}
.composer-box .input-shell>.chat-attach[hidden]{display:none}
.composer-box .input-shell>.chat-attach svg{width:22px;height:22px;color:var(--ink)}
.composer-box #question::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Dark header: brand ink blue across the full width with a soft edge, so it reads apart from the light page below.
   Light wordmark and menu; the current page is a lighter navy box with white text/border; gold focus rings.
   "Start a lesson" uses teal with a light boundary; the account menu panel stays light. */
body header.topbar.topbar{background:var(--ink);color:#fff;margin:0 calc(-1 * var(--shell-x));padding-left:var(--shell-x);padding-right:var(--shell-x);border-bottom:0;box-shadow:0 8px 20px -14px rgba(23,50,77,.7)}
@media(max-width:760px){body header.topbar.topbar{margin:0 -12px;padding-left:12px;padding-right:12px}}
body header.topbar>.brand,body header.topbar>.brand span{color:#fff}
body header.topbar .main-nav a{color:var(--mist,#EEF7F5);background:transparent}
body header.topbar .main-nav a:hover{background:rgba(238,247,245,.14);color:#fff}
body header.topbar .main-nav a:is(:hover,[aria-current=page]){background:color-mix(in srgb,var(--ink) 78%,var(--surface));border-color:var(--surface);color:var(--surface);text-decoration:none}
body header.topbar :is(a,button):focus-visible{outline:3px solid var(--lamp,#F2B544);outline-offset:2px}
body header.topbar .user-avatar-face{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mist,#EEF7F5)}
body header.topbar .user-avatar[aria-expanded=true] .user-avatar-face{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--lamp,#F2B544)}
body header.topbar .nav-dot{box-shadow:0 0 0 2px var(--ink)}
/* One section title look, shared app-wide (Test Prep, #150, switches to the same band). On its own, .section-title is a bold heading
   with a short navy underline (Dashboard, Learning Center, Recent homework). At the top of a .section-card it becomes a full-width
   navy header band with white text, under the card's rounded corners. Progress keeps its teal band.
   Page h1 titles and the lesson whiteboard keep their own styles. The :is() leads older "area h2/h3" rules. */
:is(legend,h2,h3).section-title{width:fit-content;max-width:100%;margin:0 0 12px;padding:0 0 5px;border-bottom:3px solid var(--ink);font:650 clamp(21px,2vw,25px)/1.2 var(--heading);letter-spacing:0;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.section-card{--section-pad:16px;padding:var(--section-pad);overflow:hidden;border:3px solid var(--ink);border-radius:18px;background:var(--surface)}
@media(max-width:760px){.section-card{--section-pad:12px}}
.section-card>:is(legend,h2,h3).section-title{display:block;width:auto;max-width:none;margin:calc(-1 * var(--section-pad)) calc(-1 * var(--section-pad)) 16px;padding:16px var(--section-pad);background:var(--section-band);color:var(--surface)}
.section-card>.section-title *{color:inherit}
/* Legends sit inside the card as an ordinary title, not cut into the border (Chrome and Safari). */
legend.section-title{float:left;align-self:flex-start}
.section-card>legend.section-title{width:calc(100% + 2 * var(--section-pad));box-sizing:border-box;align-self:stretch}
legend.section-title~*{clear:both}
/* Safari ignores a floated legend in a flex fieldset and leaves it on the border, so cards with a section title are plain blocks
   and keep the 14px rhythm with margins instead of a flex gap. */
.settings-section:has(>legend.section-title){display:block}
.settings-section:has(>legend.section-title)>:not(legend)+*{margin-top:14px}
/* Go and Back buttons: Learning Center Home and its pages reuse Test Prep's .test-prep-go-button and .test-prep-back, so both
   centers share test-prep-center.css's hover and press (#167). The app's Calm movement setting also drops the lift. */
body[data-lesson-motion=reduced] :is(.test-prep-go-button,.test-prep-back):is(:hover,:focus-visible,:active){transform:none!important}
/* Shared utility action. Section tabs add a persistent marker in lesson-stage.css. */
.center-bar-button{border:2px solid var(--action-border);box-shadow:none;transition:background-color .15s ease,border-color .15s ease}
.center-bar-button:hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
.center-bar-button:active:not(:disabled){background:var(--sage)}
.center-bar-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Optional band meta: a short note at the right of a section band (for example the choice, Grade 3 · Math), in body type so digits
   sit on the baseline; it wraps under the title on narrow cards. Empty means nothing shows. */
.section-card>.section-title:has(>.section-title-meta){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.section-title-meta{font:600 17px/1.3 var(--font);letter-spacing:0;color:inherit}
.section-title-meta:empty{display:none}
/* Progress uses a teal band to distinguish information from gold action buttons. */
.section-card.section-card-highlight{border:3px solid var(--ink);background:var(--pool)}
.section-card.section-card-highlight>:is(legend,h2,h3).section-title{background:var(--lagoon);color:var(--surface)}
/* Home progress stays in one compact row; rewards live on My Profile. */
.progress-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
:is(.progress-tiles,.progress-empty,[data-rewards-panel])[hidden]{display:none}
[data-rewards-panel]{margin-top:14px}
.home-progress-card .progress-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.homework-progress-card .progress-stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-progress-card .progress-stats-row .progress-tile{padding:10px 12px}
.home-progress-card .progress-stats-row .progress-tile-value{overflow-wrap:anywhere;word-break:normal}
.home-progress-card .progress-stats-row .progress-tile-label{font-size:15px;overflow-wrap:normal;hyphens:auto}
.home-progress-link{min-height:44px;padding:8px 12px;font-size:16px;white-space:nowrap;text-align:center}
@media(max-width:360px){.home-progress-card .progress-stats-row{gap:6px}.home-progress-card .progress-stats-row .progress-tile{padding:8px 6px}.home-progress-card .progress-stats-row .progress-tile-label{font-size:14px}.home-progress-link{padding:8px 10px}}
.progress-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);min-width:0}
.progress-tile-value{font:650 clamp(26px,2.4vw,32px)/1.1 var(--heading);color:var(--ink);overflow-wrap:anywhere}
.progress-tile-label{font-size:16px;line-height:1.3;color:var(--muted)}
.progress-tile-note{font-size:14px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.progress-empty,.homework-view p.progress-empty{margin:0;font-size:18px;line-height:1.4;color:var(--muted)}
/* Visually hidden but read by screen readers (for example All Homework's page heading). */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The skip link is a full-size tap target when it shows on keyboard focus. */
.skip-link{min-height:44px;display:inline-flex;align-items:center}
/* Visible keyboard focus everywhere: the tutor stage (a tap or Enter sets off a gag), the tutor's message and the chat pill. */
#koa-stage:focus-visible,#koa-message:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:12px}
.composer-box:has(textarea:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
/* Test Prep's state and grade pickers are full-size tap targets too. */
.learning-start :is(.test-prep-state-field,.test-prep-grade-field) select{min-height:48px}
/* Grade and state are high-value setup choices. A navy edge makes every
   instance distinct from its white card without changing native select behavior. */
:is(#learning-grade,#test-prep-state,#test-prep-grade,#profile-grade,#grade){border:2px solid var(--ink)}
/* Calm movement (and reduced motion) keeps every hover and press still: colours still change, nothing lifts or slides. */
body[data-lesson-motion=reduced] :is(.home-card,.home-continue,.gate-btn):is(:hover,:active),
body[data-lesson-motion=reduced] .home-card:hover .home-card-arrow{transform:none}
body[data-lesson-motion=reduced] .teacher-controls>#teacher-status i{animation:none}
@media(prefers-reduced-motion:reduce){:is(.home-card,.home-continue,.gate-btn,.center-bar-button):is(:hover,:active),.home-card:hover .home-card-arrow{transform:none}}
/* Reward stickers keep their resting tilt and never animate: rewards.css loads later, so these rules lead with body to win. */
body[data-lesson-motion=reduced] .rewards-sticker{transition:none}
body[data-lesson-motion=reduced] .rewards-sticker:hover{transform:rotate(-2deg)}
body[data-lesson-motion=reduced] .rewards-sticker:nth-child(even):hover{transform:rotate(2deg)}
body[data-lesson-motion=reduced] .rewards-sticker:nth-child(3n):hover{transform:rotate(-1deg)}
@media(prefers-reduced-motion:reduce){
  body .rewards-sticker{transition:none}
  body .rewards-sticker:hover{transform:rotate(-2deg)}
  body .rewards-sticker:nth-child(even):hover{transform:rotate(2deg)}
  body .rewards-sticker:nth-child(3n):hover{transform:rotate(-1deg)}
}
/* The tutor's message is kept for screen readers only (aria-live); hidden, it must not be a scroll box a keyboard cannot reach. */
.teacher-message.visually-hidden p{max-height:none;overflow:visible}
body header.topbar .main-nav a[aria-current=page]{background:var(--surface);border-color:var(--surface);color:var(--ink)}

/* A lighter teal wash behind every page (haze mixed toward white). */
body:not([data-page=lesson]),body:not([data-page=lesson]) .app-shell{background:color-mix(in srgb,var(--haze) 50%,var(--surface))}