/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Hosted-mode sign-up, sign-in and learner setup (the "account gate"). Only shown when the server runs in family (Firebase) mode.
   Styled after landing prototype A (#signup / #login): a calm card on mist with the chosen teacher beside it on larger screens.
   Fonts are self-hosted from /fonts (SIL OFL; licence files sit next to the font files). No external requests. */

.account-gate{
  --mist:#F6FBFA;--surface:#FFFFFF;--sky:#D6ECF0;--lagoon:#256F66;--lagoon-deep:#1C5A53;
  --ink:#17324D;--ink-soft:#3C5670;--gold:#F2B544;--coral:#EF8A6F;
  --line:#C9DEDC;--blob-a:#CDE9E4;--blob-b:#BFE0E8;--shadow:rgba(23,50,77,.16);
  --gate-action-boundary:var(--action-border,#256F66);--focus:#17324D;
  --warn:#8A5A00;--warn-bg:#FFF3D6;
  --display:"Young Serif",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .account-gate{
    --mist:#10222F;--surface:#182E3D;--sky:#16323F;--lagoon:#4FB3A5;--lagoon-deep:#7FD0C4;
    --ink:#E6F1EF;--ink-soft:#B3C8CC;--gold:#F2B544;--coral:#F09A82;
    --line:#2B4756;--blob-a:#1D4A4E;--blob-b:#1A3F52;--shadow:rgba(0,0,0,.4);
    --gate-action-boundary:#BFE2DC;--focus:#F2B544;
    --warn:#F6CD7A;--warn-bg:#3A3220;color-scheme:dark;
  }
}
:root[data-theme="dark"] .account-gate{
  --mist:#10222F;--surface:#182E3D;--sky:#16323F;--lagoon:#4FB3A5;--lagoon-deep:#7FD0C4;
  --ink:#E6F1EF;--ink-soft:#B3C8CC;--gold:#F2B544;--coral:#F09A82;
  --line:#2B4756;--blob-a:#1D4A4E;--blob-b:#1A3F52;--shadow:rgba(0,0,0,.4);
  --gate-action-boundary:#BFE2DC;--focus:#F2B544;
  --warn:#F6CD7A;--warn-bg:#3A3220;color-scheme:dark;
}

.account-gate{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;padding:clamp(16px,4vw,48px) max(16px,env(safe-area-inset-right,0px)) clamp(16px,4vw,48px) max(16px,env(safe-area-inset-left,0px));background:var(--mist);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;overflow:auto;-webkit-font-smoothing:antialiased}
.account-gate[hidden]{display:none}
.account-gate *,.account-gate *::before,.account-gate *::after{box-sizing:border-box}
body[data-gate-open]{overflow:hidden}

/* Card on the left, teacher on the right. margin:auto centres it without ever clipping the top on short screens. */
.gate-wrap{width:100%;max-width:1100px;margin:auto;display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:48px;align-items:center;justify-content:center}
.gate-wrap-solo{grid-template-columns:minmax(0,520px)}
.gate-card{position:relative;z-index:1;display:grid;gap:18px;width:100%;background:var(--surface);border:2px solid var(--line);border-radius:28px;padding:clamp(20px,4vw,36px);box-shadow:0 14px 34px var(--shadow)}
.gate-card-solo{text-align:center;justify-items:center}
.gate-brand{margin:0;display:flex;align-items:center;gap:8px;font:800 1.2rem/1 var(--display);color:var(--ink)}
.gate-brand span{color:var(--gold)}
.gate-card-solo .gate-brand{justify-content:center}
.gate-card h2{margin:0;font:800 clamp(1.7rem,3.4vw,2.2rem)/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.gate-card h2:focus{outline:none}
.gate-sub{margin:-6px 0 0;font-size:1.125rem;color:var(--ink-soft);max-width:60ch}
.gate-sub:empty{display:none}
.gate-hero{width:auto;height:180px;max-width:100%;object-fit:contain}
.gate-steps{display:flex;align-items:center;gap:12px;margin-bottom:-6px}
.gate-steptag{margin:0;font-weight:700;font-size:1rem;color:var(--lagoon-deep)}
.gate-dots{display:inline-flex;gap:6px}
.gate-dots i{width:22px;height:6px;border-radius:6px;background:var(--line)}
.gate-dots i.on{background:var(--gold)}

/* Teacher beside the card (hidden on phones and tablets) */
.gate-peek{position:relative;display:grid;place-items:end start;min-height:420px}
.gate-blob{position:absolute;z-index:0;inset:4% 0 6% 0;width:100%;height:92%;pointer-events:none}
.gate-blob-a path{fill:var(--blob-a)}
.gate-blob-b path{fill:var(--blob-b)}
.gate-peek-img{position:relative;z-index:1;height:min(400px,52vh);width:auto;max-width:100%;object-fit:contain}

/* Forms */
.gate-form,.gate-choices{display:grid;gap:18px}
.gate-field{display:grid;gap:6px}
.gate-field>label,.gate-group>legend{font-weight:700;font-size:1.0625rem;padding:0}
.gate-field small,.gate-hint{font-size:1rem;color:var(--ink-soft)}
.gate-input{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:2px solid var(--line);background:var(--mist);color:var(--ink);font:400 1.125rem var(--body)}
select.gate-input{appearance:auto;padding-right:10px}
.gate-input:focus{border-color:var(--ink);outline:3px solid var(--focus);outline-offset:3px}
.gate-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gate-pw{position:relative}
.gate-pw .gate-input{padding-right:84px}
.gate-pw-toggle{position:absolute;right:2px;top:2px;min-height:44px;min-width:44px;padding:0 12px;border-radius:var(--action-radius,999px);border:0;background:transparent;color:var(--lagoon-deep);font:700 1rem var(--body);cursor:pointer}
.gate-pw-toggle:hover:not(:disabled),.gate-linkbtn:hover:not(:disabled){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gate-check{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;cursor:pointer}
.gate-check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--lagoon-deep)}
.gate-check a,.gate-alt a{color:var(--lagoon-deep)}
.gate-hint{margin:0;text-align:center}

/* Buttons */
.gate-actions{display:flex;flex-wrap:wrap;gap:10px}
.gate-actions:empty{display:none}
.gate-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--action-height,48px);padding:8px 24px;border-radius:var(--action-radius,999px);border:2px solid var(--action-border,#256F66);font:700 1.125rem var(--body);cursor:pointer;transition:background-color .15s,border-color .15s;text-align:center}
.gate-btn-primary{flex:1 1 100%;padding-inline:32px;font-size:1.2rem;background:var(--action-primary,#256F66);border-color:var(--gate-action-boundary);color:#fff}
.gate-btn-primary:hover:not(:disabled){background:var(--action-primary-hover,#1C5A53)}
.gate-btn-primary:active:not(:disabled){background:var(--action-primary-pressed,#174C46)}
.gate-btn-quiet{flex:0 1 auto;background:var(--action-secondary-bg,#fff);color:var(--action-ink)}
.gate-btn-quiet:hover:not(:disabled),.gate-btn-quiet:active:not(:disabled){background:var(--action-selected,#E3F3F0)}
.gate-btn-small{min-height:44px;font-size:1rem;padding:0 18px;justify-self:start}
.account-gate :is(.gate-btn,.gate-choice,.gate-pw-toggle,.gate-linkbtn):disabled{opacity:1;background:var(--action-disabled-bg,#E6ECEB);border-color:var(--action-disabled-border,#A5B4B1);color:var(--action-disabled-ink,#53636B);cursor:not-allowed;transform:none;box-shadow:none}
.gate-choice:disabled .gate-choice-text span{color:inherit}
.gate-alt{margin:0;text-align:center;font-size:1.125rem}
.gate-linkbtn{display:inline-block;min-height:44px;padding:10px 4px;border:0;background:none;font:700 1.125rem var(--body);color:var(--lagoon-deep);text-decoration:underline;cursor:pointer}

/* Choice cards: parent or student, and "Who's learning?" */
.gate-choices{gap:12px}
.gate-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:16px 18px;border-radius:18px;border:2px solid var(--action-border,#256F66);background:var(--action-secondary-bg,#fff);color:var(--action-ink);font:inherit;text-align:left;cursor:pointer;white-space:normal}
.gate-choice:hover:not(:disabled),.gate-choice:active:not(:disabled){background:var(--action-selected,#E3F3F0);border-color:var(--action-primary-hover,#1C5A53)}
.gate-choice-text{display:grid;gap:4px}
.gate-choice b{font:700 1.15rem/1.2 var(--display)}
.gate-choice-text span{color:var(--action-muted);font-size:1.0625rem}
.gate-choice-img{flex:none;width:auto;height:56px;object-fit:contain}

/* Age and grade chips, tutor picker (visually hidden radios, real labels) */
.gate-group{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.gate-pick-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.gate-chipset{display:flex;flex-wrap:wrap;gap:8px}
.gate-chipset span{position:relative}
.gate-chipset label{min-width:48px;min-height:44px;padding:0 14px;border-radius:var(--action-radius,999px);border:2px solid var(--action-border,#256F66);background:var(--action-secondary-bg,#fff);color:var(--action-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer}
.gate-chipset input:not(:disabled)+label:hover{background:var(--action-selected,#E3F3F0)}
.gate-chipset input:checked+label{background:var(--action-selected,#E3F3F0);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.gate-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gate-pick>div{position:relative;display:grid}
.gate-teacher{display:grid;gap:4px;justify-items:center;align-content:start;padding:8px 6px 10px;border-radius:18px;border:2px solid var(--action-border,#256F66);background:var(--action-secondary-bg,#fff);color:var(--action-ink);cursor:pointer;text-align:center}
.gate-pick input:not(:disabled)+.gate-teacher:hover{background:var(--action-selected,#E3F3F0);border-color:var(--action-primary-hover,#1C5A53)}
.gate-teacher img{height:96px;width:auto;max-width:100%;object-fit:contain}
.gate-teacher b{font-weight:700}
.gate-teacher small{font-weight:400;color:var(--action-muted);font-size:.95rem;line-height:1.2}
.gate-pick input:checked+.gate-teacher{background:var(--action-selected,#E3F3F0);box-shadow:inset 0 0 0 2px var(--action-border,#256F66)}
.gate-pick input:checked+.gate-teacher b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.account-gate .gate-pick-input:disabled+label{background:var(--action-disabled-bg,#E6ECEB);color:var(--action-disabled-ink,#53636B);border-color:var(--action-disabled-border,#A5B4B1);cursor:not-allowed}
.gate-pick-input:disabled+label small{color:inherit}
.gate-chipset input:focus-visible+label,.gate-pick input:focus-visible+.gate-teacher{outline:3px solid var(--focus);outline-offset:3px}
.account-gate :is(button,a,input,select):focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Messages */
.gate-message{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 12px;border-radius:10px;font-size:1rem;font-weight:700;color:var(--warn);background:var(--warn-bg)}
.gate-message::before{content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#17324D;display:grid;place-items:center;font-size:.95rem}
.gate-notice{margin:0;padding:8px 12px;border-radius:10px;font-size:1rem;font-weight:700;color:var(--ink);background:var(--sky)}
.gate-message:empty,.gate-notice:empty{display:none}

@media (max-width:900px){
  .gate-wrap,.gate-wrap-solo{grid-template-columns:minmax(0,520px);gap:0}
  .gate-peek{display:none}
}
@media (max-width:380px){.gate-row{grid-template-columns:1fr}.gate-pick{gap:6px}.gate-teacher{padding:6px 4px 8px}}
@media (prefers-reduced-motion:reduce){.gate-btn{transition:none}.gate-btn:active{transform:none}}
@media (forced-colors:active){.gate-chipset input:checked+label,.gate-pick input:checked+.gate-teacher{outline:3px solid Highlight}}

/* Hosted mode: the server marks <html data-account-mode="family">; keep the app hidden until the gate has opened or closed for the first time. */
html[data-account-mode="family"]:not([data-gate-settled]) .app-shell{visibility:hidden}