/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Tutor page: Pick your tutor · Talking with <teacher> (voice and sounds) · Movement · conversation. Also the Grown-ups (login and safety) section on Profile.
   Big plain switches and tappable option cards instead of dropdowns. Lagoon palette from brand.css. */
.settings-grid .settings-section{display:flex;flex-direction:column;gap:14px}
.settings-hidden-fields{display:none}
/* The Tutor page is one column: the sections stack, on phones and on wide screens. */
.tutor-form{grid-template-columns:minmax(0,1fr)}
.tutor-form .avatar-options{display:block}
.setting-switch{display:flex;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line,#C9DEDC);border-radius:14px;background:#F7FBFA;margin:0;cursor:pointer;min-height:64px}
.setting-switch:has(input:checked){background:var(--action-selected,#E3F3F0);border-color:var(--action-border,#256F66)}
.setting-switch:hover:not(:has(input:disabled)){border-color:var(--action-border,#256F66);background:var(--action-selected,#E3F3F0)}
.setting-switch:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
.setting-switch input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:52px;height:30px;margin:0;border-radius:15px;background:#B8CBC8;position:relative;transition:background .2s;cursor:pointer}
.setting-switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(23,50,77,.3);transition:transform .2s}
.setting-switch input:checked{background:var(--lagoon,#2F8F83)}
.setting-switch input:checked::after{transform:translateX(22px)}
.setting-switch-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.setting-switch-text strong{font-size:19px;line-height:1.3;color:var(--ink,#17324D)}
.setting-switch-text span{font-size:16px;line-height:1.4;color:#3C5670}
.choice-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choice-card{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:14px 16px;border:2px solid var(--action-border,#256F66);border-radius:16px;background:#fff;color:var(--ink,#17324D);min-height:88px}
.choice-card strong{font-size:18px;line-height:1.3}
.choice-card span{font-size:15px;line-height:1.4;color:#3C5670}
.choice-card:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--action-primary-hover,#1C5A53);background:var(--action-selected,#E3F3F0)}
.choice-card[aria-checked=true]{border-color:var(--action-border,#256F66);background:var(--action-selected,#E3F3F0);box-shadow:0 0 0 2px var(--action-border,#256F66) inset}
.choice-card[aria-checked=true] strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.choice-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.choice-card:is(:disabled,[aria-disabled=true]),.setting-switch:has(input:disabled){opacity:1;border-color:var(--action-disabled-border,#A5B4B1);background:var(--action-disabled-bg,#E6ECEB);color:var(--action-disabled-ink,#53636B);cursor:not-allowed;box-shadow:none}
.choice-card:is(:disabled,[aria-disabled=true]) span,.setting-switch:has(input:disabled) :is(strong,span){color:inherit}
.settings-inline-label{font-size:17px;font-weight:600;color:#2d4840;align-self:center;margin-right:4px}
.settings-section .setting-help{margin:0}
.settings-section #turn-timing:not([hidden]){margin:0}
/* Account Settings: Login and safety, then Billing (both behind the grown-ups PIN on a parent account) */
.account-billing{display:flex;flex-direction:column;gap:14px;margin:28px 0 0;padding:24px;border:1px solid var(--line,#C9DEDC);border-radius:18px;max-width:760px;min-width:0;background:#fff}
.account-billing[hidden]{display:none}
.account-billing .billing-panel[data-state],.account-billing .billing-panel{padding:0;border:0;box-shadow:none;max-width:none}
@media(max-width:480px){.account-billing{padding:18px}}
.account-settings h3{font:650 19px/1.25 var(--heading);color:var(--ink);margin:0 0 8px}
.account-lock,.account-private{margin-top:16px;display:flex;flex-direction:column;gap:18px}
.lock-card{padding:20px;border:2px solid var(--gold,#F2B544);border-radius:16px;background:#FFF8E8}
.lock-form{display:flex;flex-direction:column;gap:14px;margin-top:12px;max-width:420px}
.lock-form .setting-field{margin:0;gap:8px}
.lock-form input{width:100%;min-width:0;min-height:52px;padding:10px 14px;border:1px solid #7FA9A3;border-radius:10px;font-size:22px;background:#fff;letter-spacing:.08em}
.lock-form input[type=email]{letter-spacing:normal;font-size:20px}
.lock-form .text-button{min-height:44px;font-size:17px;font-weight:650;color:var(--lagoon,#2F8F83);text-decoration:underline;padding:8px 10px}
.lock-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:12px 16px;border-radius:12px;background:#E3F3F0;font-size:17px;font-weight:600;color:#1f5e55}
.lock-bar span{flex:1 1 160px}
.lock-bar .text-button{min-height:44px;font-size:16px;font-weight:650;color:var(--lagoon,#2F8F83);text-decoration:underline}
.account-login,.account-data,.account-danger{padding-top:18px;border-top:1px solid var(--line,#C9DEDC)}
.account-login:first-child{padding-top:0;border-top:0}
#login-email{font-size:18px;overflow-wrap:anywhere}
#login-status:empty,#lock-error:empty{display:none}
@media(max-width:480px){.tutor-form .teacher-team-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .choice-cards{grid-template-columns:1fr}
  .choice-card{min-height:48px}
  .setting-switch{padding:12px 14px;min-height:56px}
  .setting-switch-text strong{font-size:17px}
  .setting-switch-text span{font-size:15px}
  .lock-card{padding:16px}
}
@media(prefers-reduced-motion:reduce){.setting-switch input,.setting-switch input::after{transition:none}}

/* One look for every section card on My Profile, My Tutor and Account Settings:
   1px lagoon-tint border, white background, 18px corners, 24px padding, 24px between cards, one legend/title style. */
.profile-form,.settings-grid{gap:24px}
.profile-form fieldset,.settings-grid fieldset,.account-settings,.account-billing{box-sizing:border-box;width:100%;max-width:none;min-width:0;margin:0;padding:var(--section-pad,16px);border:1.5px solid var(--line);border-radius:18px;background:#fff}
#account-page:not([hidden]){display:flex;flex-direction:column;gap:24px}
.account-settings+.account-billing,.account-settings{margin:0}
/* Match the center pages' section headings, with category and tutor choices in separate cards. */
.tutor-form>.section-card>.section-title{font-size:30px}
.tutor-form #learning-audio-note:empty{display:none}
.tutor-form .talking-fieldset>.voice-picker{margin-top:8px}
.tutor-current-section>.section-title{align-items:center}
.tutor-current-section .tutor-current-note{margin-left:auto;max-width:none;font-size:18px;font-weight:500;line-height:1.4;text-align:right;white-space:nowrap}
#motion-options .choice-card strong{font-size:22px;font-weight:650;line-height:1.3}
#motion-options .choice-card span{font-size:18px;line-height:1.4}
#motion-options .choice-card[aria-checked=true]{border-color:var(--ink);background:var(--lamp);color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
#motion-options .choice-card[aria-checked=true] strong{text-decoration-thickness:1px;text-underline-offset:5px}
#motion-options .choice-card[aria-checked=true] span{color:var(--ink)}
#motion-options .choice-card:is(:hover,:active):not(:disabled):not([aria-disabled=true]){border-color:var(--ink);background:var(--lagoon);color:var(--surface)}
#motion-options .choice-card:is(:hover,:active):not(:disabled):not([aria-disabled=true]) span{color:inherit}
@media(max-width:760px){.tutor-form>.section-card>.section-title{font-size:26px}}
@media(max-width:900px){.tutor-current-section .tutor-current-note{flex-basis:100%;margin-left:0;text-align:left;white-space:normal}}