/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Navigation: the account menu behind the round avatar, the regrouped Settings page,
   the Billing page and a few phone layout fixes. Loaded after the other sheets. */
.user-menu{position:relative;display:inline-flex;flex:0 0 auto}
.user-avatar{border:0;padding:0;background:none;cursor:pointer}
.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 #256F66}
.user-menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:230px;padding:8px;border:1px solid #C9DEDC;border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(32,59,59,.18);display:flex;flex-direction:column;gap:2px}
.user-menu-panel[hidden]{display:none}
.user-menu-who{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 12px 12px;border-bottom:1px solid #DDEFEC;margin-bottom:6px}
.user-menu-who strong{font-size:17px;color:#17324D}
.user-menu-who span{font-size:14px;color:#3C5670;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-menu-panel [role=menuitem]{display:flex;align-items:center;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;color:#17324D;font-size:17px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;width:100%}
.user-menu-panel [role=menuitem]:hover{background:var(--action-selected);color:var(--ink)}
/* This menu is a light surface inside the dark header: focus stays separate from selection. */
body header.topbar .user-menu-panel [role=menuitem]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
body header.topbar .user-menu-panel [role=menuitem][aria-current=page]{background:var(--action-selected);color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.user-menu-panel #menu-sign-out{margin-top:4px;border-top:1px solid #DDEFEC;border-radius:0 0 10px 10px;padding-top:12px}
.user-menu-panel [hidden]{display:none!important}

/* Settings: three groups, then "More options" for controls most families never need. */
.settings-grid{align-items:start}
.settings-advanced{grid-column:1 / -1;border:1px dashed #cfdad2;border-radius:16px;padding:0 20px}
.settings-advanced>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;font-size:18px;font-weight:650;color:#256F66}
.settings-advanced>summary::-webkit-details-marker{display:none}
.settings-advanced>summary::before{content:'';width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.settings-advanced[open]>summary::before{transform:rotate(45deg)}
.settings-advanced>fieldset{margin:0 0 20px}
.settings-inline{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.settings-inline .button svg{width:18px;height:18px}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.account-data,.account-danger{margin-top:22px;padding-top:18px;border-top:1px solid #DDEFEC}
.account-data h3{margin:0 0 4px;font-size:18px}
.account-danger h3{margin:0 0 4px;font-size:18px}
.button-danger-quiet{border:1px solid #d9a69a;background:#fff;color:#a03a28}
.button-danger-quiet:hover{background:#fff0eb}
.billing-panel{max-width:760px;padding:28px;border:1px solid #C9DEDC;border-radius:18px;background:#fff}
.billing-panel h2{margin:0 0 8px;font:650 19px/1.25 var(--heading);color:var(--ink)}
.billing-panel .setting-help{font-size:19px;margin:0 0 10px}
.billing-actions{margin:18px 0 6px}
.billing-actions .button{min-height:52px;font-size:19px;padding:12px 26px}
.billing-error{color:#a03a28;font-weight:600;margin:10px 0 0}
.billing-error[hidden]{display:none}
.billing-note{font-size:15px;color:#3C5670;margin:18px 0 0}
.billing-panel[data-state=trial]{border-color:#F2B544;box-shadow:inset 6px 0 0 #F2B544}
.billing-panel[data-state=past_due],.billing-panel[data-state=expired],.billing-panel[data-state=canceled]{border-color:#EF8A6F;box-shadow:inset 6px 0 0 #EF8A6F}
.billing-panel[data-state=active],.billing-panel[data-state=free]{box-shadow:inset 6px 0 0 #256F66}
.work-dialog [role=alert]:empty{display:none}
.work-dialog [role=alert]{color:#a03a28;font-weight:600}

/* Phones: a grade picker that is never clipped, and room for the status pill. */
@media(max-width:760px){
  .learning-start .learning-grade-field select{width:auto;min-width:0;max-width:44vw;padding-right:28px}
  .learning-start-head h2{white-space:nowrap;font-size:21px}
  .user-menu-panel{right:-6px;min-width:220px}
  .settings-advanced{padding:0 14px}
}

/* Laptops: the lesson keeps a fixed-height shell so it never scrolls, but the other pages
   must scroll normally (Settings and Profile were cut off at 900px tall). */
@media(min-width:1100px) and (min-height:800px){body:not([data-page=lesson]) .app-shell{height:auto;min-height:100vh}}
/* Phones: the teacher shares a small row with the chat box, so the status pill shows its icon only. */
@media(max-width:760px){
}
.user-menu-who[hidden]{display:none}
/* The one-line plan reminder under the header (hosted app, last trial days or a lapsed plan). */
.billing-reminder{margin:0 0 10px;padding:12px 18px;border-radius:14px;background:#FFF4D6;border:1px solid #F2B544;color:#17324D;font-size:17px;line-height:1.4;text-align:center}
.billing-reminder[data-state=past_due],.billing-reminder[data-state=expired],.billing-reminder[data-state=canceled]{background:#FDEBE4;border-color:#EF8A6F}
.billing-reminder a{color:#256F66;font-weight:700;text-decoration:underline}
.billing-reminder[hidden]{display:none}
@media(max-width:760px){.billing-reminder{font-size:15px;padding:10px 12px}}
/* Phones: four top-menu items share the row; the two-word labels wrap onto two short lines instead of pushing the page sideways. */
@media(max-width:430px){.topbar .main-nav a{flex:1 1 0;min-width:0;white-space:normal;text-align:center;line-height:1.15;padding:4px 3px;font-size:15px}}
/* The menu uses the space between the brand and utility controls. The shared
   height also reserves room for the lesson and celebration layouts below. */
:root{--lesson-header-height:92px}
.app-shell>header.topbar{gap:20px}
header.topbar>.brand{font-size:34px;gap:12px;margin-right:0}
header.topbar>.brand .brand-mark{width:48px;height:48px}
header.topbar>.header-actions{flex:1 1 0;gap:20px}
header.topbar .main-nav{flex:1 1 0;width:auto;justify-content:space-evenly;gap:8px;margin:0}
header.topbar .main-nav a{font-size:24px;padding:10px 18px;min-height:56px;white-space:nowrap;text-decoration:none}
header.topbar .header-end{flex:0 0 auto;gap:12px}
header.topbar #new-lesson{min-height:56px;padding:10px 20px;font-size:20px}
header.topbar .user-avatar{flex-basis:56px;width:56px;height:56px}
@media(min-width:1600px) and (max-width:1799px){
  :root{--lesson-header-height:84px}
  .app-shell>header.topbar{gap:16px}
  header.topbar>.brand{font-size:30px;gap:10px}
  header.topbar>.brand .brand-mark{width:44px;height:44px}
  header.topbar>.header-actions{gap:12px}
  header.topbar .main-nav{gap:4px}
  header.topbar .main-nav a{font-size:22px;padding:8px 10px;min-height:52px}
  header.topbar #new-lesson{font-size:18px;padding:8px 16px;min-height:52px}
  header.topbar .user-avatar{flex-basis:52px;width:52px;height:52px}
}
/* Below laptop widths, keep readable destinations across their own full row. */
@media(max-width:1899px){
  :root{--lesson-header-height:140px}
  .app-shell>header.topbar{flex-wrap:wrap;height:var(--lesson-header-height);min-height:var(--lesson-header-height);gap:6px 12px;padding-top:8px;padding-bottom:8px;align-content:center}
  header.topbar>.header-actions{display:contents}
  header.topbar>.brand{font-size:28px;gap:10px;margin-right:auto}
  header.topbar>.brand .brand-mark{width:42px;height:42px}
  header.topbar .header-end{order:2;margin-left:auto;gap:10px}
  header.topbar .main-nav{order:3;flex:1 1 100%;width:100%;justify-content:space-evenly;gap:6px;margin:0}
  header.topbar .main-nav a{font-size:22px;padding:8px 12px;min-height:52px}
  header.topbar #new-lesson{min-height:50px;font-size:18px}
  header.topbar .user-avatar{flex-basis:50px;width:50px;height:50px}
}
@media(max-width:760px){
  :root{--lesson-header-height:124px}
  header.topbar>.brand{font-size:26px}
  header.topbar>.brand .brand-mark{width:40px;height:40px}
  header.topbar .main-nav{gap:4px;justify-content:space-between}
  header.topbar .main-nav a{flex:1 1 0;min-width:0;font-size:20px;padding:6px 4px;white-space:normal;text-align:center;line-height:1.2}
  header.topbar #new-lesson{padding:8px 12px}
  header.topbar .user-avatar{flex-basis:48px;width:48px;height:48px}
}
@media(max-width:430px){header.topbar .main-nav{gap:2px}header.topbar .main-nav a{font-size:17px;padding:4px 1px}}
@media(max-width:350px){body header.topbar .main-nav a{font-size:14.5px;padding:4px 0;letter-spacing:-.25px;border-width:1px}}
/* Center the destination group on the page, independent of unequal brand/utility widths. */
@media(min-width:1900px){
  .app-shell>header.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px}
  header.topbar>.brand{grid-column:1;justify-self:start}
  header.topbar>.header-actions{display:contents}
  header.topbar .main-nav{grid-column:2;justify-content:center;gap:8px;width:auto}
  header.topbar .main-nav a{padding-inline:12px}
  header.topbar .header-end{grid-column:3;justify-self:end}
}
@media(min-width:761px) and (max-width:1899px){header.topbar .main-nav{justify-content:center;gap:16px}}
header.topbar .main-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:18px}
header.topbar .main-nav a{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;text-align:center;white-space:normal;border:2px solid transparent}
@media(min-width:1900px){header.topbar .main-nav{width:clamp(1200px,62vw,1500px)}}
@media(min-width:761px) and (max-width:1899px){header.topbar .main-nav{width:100%;max-width:1200px;margin-inline:auto;gap:20px}}
@media(max-width:760px){header.topbar .main-nav{gap:4px}}
@media(max-width:430px){header.topbar .main-nav{gap:2px}}

@media(min-width:761px){header.topbar .main-nav a{white-space:nowrap}}
@media(min-width:761px) and (max-width:1000px){header.topbar .main-nav{gap:10px}header.topbar .main-nav a{font-size:18px;padding-inline:6px}}
header.topbar .main-nav a:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}

/* Tablet and phone navigation opens over the page, keeping lesson space available. */
header.topbar .main-nav-toggle{display:none}
header.topbar .main-nav-toggle .menu-close{display:none}
header.topbar .main-nav-toggle[aria-expanded=true] .menu-bars{display:none}
header.topbar .main-nav-toggle[aria-expanded=true] .menu-close{display:block}
@media(max-width:1199px){
  :root{--lesson-header-height:84px}
  .app-shell>header.topbar{position:relative;z-index:80;flex-wrap:nowrap;height:var(--lesson-header-height);min-height:var(--lesson-header-height);gap:12px;padding-block:8px}
  header.topbar>.brand{margin-right:auto;flex:0 0 auto}
  header.topbar .main-nav-toggle{order:2;display:inline-flex;flex:0 0 48px;align-items:center;justify-content:center;width:48px;height:48px;padding:8px;border:2px solid var(--mist);border-radius:12px;background:transparent;color:var(--mist)}
  header.topbar .main-nav-toggle svg{width:26px;height:26px;stroke-width:2.5}
  header.topbar .main-nav-toggle:hover{background:rgba(255,255,255,.14)}
  header.topbar .main-nav-toggle:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
  header.topbar .header-end{order:3;margin-left:0;gap:10px}
  header.topbar .main-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:1;width:100%;max-width:none;margin:0;padding:12px;grid-template-columns:minmax(0,1fr);gap:8px;background:var(--ink);border:2px solid var(--mist);border-radius:0 0 16px 16px;box-shadow:0 12px 24px #17324d33}
  header.topbar:has(#main-nav-toggle[aria-expanded=true]) .main-nav{display:grid}
  header.topbar .main-nav a{width:100%;min-height:52px;padding:12px;font-size:22px;white-space:normal}
}
@media(max-width:600px){
  :root{--lesson-header-height:76px}
  .app-shell>header.topbar{gap:4px}
  header.topbar>.brand{font-size:20px;gap:6px}
  header.topbar>.brand .brand-mark{width:28px;height:28px}
  header.topbar .header-end{gap:4px}
  header.topbar .main-nav-toggle,header.topbar .user-avatar{flex-basis:44px;width:44px;height:44px}
  header.topbar #new-lesson{min-width:44px;width:44px;min-height:44px;padding:0}
  header.topbar #new-lesson>span:not([data-icon]){display:none}
}