/* Load after the final inline style in index.html.
   The dropdown is below the header, but its original 70vh cap ignores that
   offset. Bound the header name first, then reserve 200px for that header and
   breathing room. Full names remain in the summary's accessible label and in
   the dropdown tiles. Keep native details/summary and existing touch targets. */
.home-profile-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.home-profile-options {
  max-height: min(70vh, max(0px, calc(100vh - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))));
  max-height: min(70dvh, max(0px, calc(100dvh - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))));
  overscroll-behavior-y: contain;
}

.chooser-account .p-button{min-height:44px;font-size:14px;padding:8px 12px;background:#ffffffd9;color:#29495d;border:1px solid #ffffff;border-radius:16px;white-space:nowrap}
.chooser-sync{margin:24px auto;padding:22px;max-width:520px;background:#fffef7;border:2px solid white;border-radius:26px;box-shadow:0 6px 0 #699bb94a;color:#253d55}
.chooser-sync h2{font-size:24px;margin:0 0 10px}.chooser-sync .p-button{width:100%;min-height:52px}.chooser-sync p{line-height:1.6}
@media(max-width:600px){.chooser-account .p-button{font-size:12px;padding:8px}.chooser-sync{padding:18px}.chooser-sync h2{font-size:21px}}

.chooser-cards[hidden],.chooser-sync[hidden]{display:none}

@media(max-width:600px){#app[data-screen="chooseProfile"] .topbar{flex-wrap:wrap;justify-content:center}#app[data-screen="chooseProfile"] .topbar-tools{justify-content:center;width:100%}.chooser-sync .p-button{margin:6px 0}}

/* The parent account check stays visible without blocking local child cards. */
.chooser-sync{text-align:start;overflow-wrap:anywhere}
.chooser-sync-email{font-size:14px;color:#425c70;unicode-bidi:plaintext}
.chooser-sync-status{min-height:3em;margin:12px 0}
.chooser-sync-status[role="alert"]{color:#8b2924;background:#fff0e9;border-radius:12px;padding:10px}
.chooser-sync-names{font-weight:700;font-size:20px}
.chooser-sync .p-button{white-space:normal;overflow-wrap:anywhere;margin:6px 0}
.chooser-sync .p-button:disabled{opacity:.65;cursor:wait}
.chooser-sync .p-button:focus-visible{outline:3px solid #527aab;outline-offset:3px}

.chooser-account{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.chooser-account .p-button:focus-visible{outline:3px solid #527aab;outline-offset:3px}

/* First visit: clear family sign-in, separate from the child experience. */
.welcome-screen{min-height:100%;display:grid;place-items:center;padding:28px 18px;box-sizing:border-box}
.welcome-card{width:min(100%,580px);text-align:center;padding:32px clamp(18px,4vw,46px);box-sizing:border-box;background:rgba(255,255,255,.92);border:2px solid #fff;border-radius:36px;box-shadow:0 12px 0 #589dc52b,0 24px 64px #387ea51a}
.welcome-letters{display:flex;justify-content:center;gap:14px;margin:4px 0 24px;direction:rtl}
.welcome-letters span{display:grid;place-items:center;width:76px;height:84px;border-radius:22px;background:#ffe8b0;color:#79521e;font-size:58px;font-weight:800;box-shadow:0 6px 0 #e4bd7144;transform:rotate(7deg)}
.welcome-letters span:nth-child(2){background:#dbeecf;color:#376340;transform:rotate(-5deg)}
.welcome-letters span:nth-child(3){background:#e9dfff;color:#75558f;transform:rotate(5deg)}
.welcome-eyebrow{color:#497569;font-size:17px;line-height:1.65;font-weight:500;margin:0 auto 14px;max-width:430px}.welcome-card h1{font-size:clamp(25px,4vw,36px);line-height:1.25;margin:0 0 14px;color:#253455}.welcome-copy{font-size:18px;line-height:1.6;color:#536479;margin:0 auto 26px;max-width:390px}
.welcome-actions{display:grid;gap:12px}.welcome-actions button{width:100%;min-height:54px;font-size:18px;border-radius:18px}.welcome-actions .quiet{background:#fff;border:2px solid #bed4df;color:#263f55}.welcome-actions button:focus-visible{outline:3px solid #176f9b;outline-offset:4px}
.welcome-note{font-size:14px;color:#627180;margin:-4px 0 8px}.welcome-footnote{font-size:13px;color:#627180;margin:20px 0 0}
@media(max-height:600px) and (orientation:landscape){.welcome-screen{padding:12px}.welcome-card{width:min(100%,760px);display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding:20px}.welcome-letters{grid-column:1;margin:0 0 12px}.welcome-eyebrow,.welcome-card h1,.welcome-copy{grid-column:1}.welcome-actions{grid-column:2;grid-row:1 / span 4;align-content:center}.welcome-footnote{grid-column:1 / -1;margin:10px 0 0}.welcome-copy{margin-bottom:0;font-size:16px}}

#app[data-screen="welcome"] #starsBtn{display:none}
/* Parent reports prioritize the selected child and the progress summary on phones. */
@media(max-width:600px){
 .screen[data-screen="parents"] .profile-picker{padding:14px;gap:8px;margin-bottom:12px}
 .screen[data-screen="parents"] .profile-picker h2{font-size:19px}
 .screen[data-screen="parents"] .profile-tile{padding:6px;gap:5px;flex-basis:76px;max-width:120px}
 .screen[data-screen="parents"] .profile-tile .profile-portrait{width:62px;height:62px;font-size:38px}
 .screen[data-screen="parents"] .profile-name{font-size:15px}
 .screen[data-screen="parents"] .p-hero{padding:17px 20px;margin-bottom:12px;border-radius:22px}
 .screen[data-screen="parents"] .p-hero h1{font-size:25px;margin:6px 0}
 .screen[data-screen="parents"] .p-hero p{font-size:14px;line-height:1.65}
 .screen[data-screen="parents"] .p-nav{margin-bottom:10px}
}
.p-badge[data-state="ready"]{background:#e6f1e9;color:#24583e}
.p-badge[data-state="error"]{background:#fff0e9;color:#8b2924}
.p-badge[data-state="syncing"]{background:#eef3f6;color:#365567}