/* Shared mascot presentation; selectors stay local to these components. */
.pp-auth { padding: 2.6rem 0 1rem; background: radial-gradient(ellipse at 6% 0%,#e9f7f2 0,transparent 45%),radial-gradient(ellipse at 100% 80%,#fff4dc 0,transparent 42%); }
.pp-auth-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:2rem; max-width:1220px; margin-inline:auto; align-items:start; }
.pp-auth-card { min-width:0; padding:clamp(1.3rem,2.8vw,2.6rem); border:1px solid #e1e5ed; border-radius:1.8rem; background:#fff; box-shadow:0 15px 48px #24344b08; }
.pp-auth-card h1 { font-size:clamp(1.9rem,2.5vw,2.5rem); font-weight:800; letter-spacing:-.045em; line-height:1.16; color:#183449; }
.pp-auth-card .pp-form-intro { color:#596779; line-height:1.7; margin-bottom:1.5rem; }
.pp-auth-switch { display:flex; gap:.3rem; padding:.3rem; background:#f1f4f7; border:1px solid #e5e9ef; border-radius:.95rem; margin-bottom:1.8rem; }
.pp-auth-switch a { flex:1; text-align:center; padding:.65rem .4rem; border-radius:.7rem; text-decoration:none; font-size:.9rem; font-weight:700; color:#5e6979; }
.pp-auth-switch a[aria-current=page] { background:#fff; color:#3e3ba5; box-shadow:0 2px 6px #20344a12; }
.pp-auth-back { display:inline-flex; gap:.5rem; color:#4e5d70; font-size:.875rem; margin-bottom:1.5rem; text-decoration:none; }
.pp-auth-card .eyebrow { font-size:.72rem; letter-spacing:.14em; color:#487268; margin-bottom:.65rem; }
.pp-auth-divider { display:flex; align-items:center; gap:1rem; color:#68758a; font-size:.8rem; margin:1.4rem 0; }
.pp-auth-divider::before,.pp-auth-divider::after { content:''; height:1px; background:#e4e8ee; flex:1; }
.pp-auth-card .google-signin-button { min-height:3.2rem; border:1px solid #cbd3df; border-radius:.85rem; box-shadow:0 2px 0 #edf0f5; font-weight:600; }
.pp-auth-card .google-signin-button:hover:not(:disabled) { border-color:#6962cc; background:#fafaff; }
.pp-auth-card .form-label { color:#263d50; font-size:.875rem; font-weight:650; }
.pp-auth-card .form-control,.pp-auth-card .form-select { min-height:3rem; border:1px solid #d9e0e8; border-radius:.8rem; background-color:#fcfdfe; font-size:1rem; }
.pp-auth-card .form-control:focus,.pp-auth-card .form-select:focus { border-color:#746cdb; background-color:#fff; box-shadow:0 0 0 .2rem #7169d526; }
.pp-auth-card .form-text { font-size:.75rem; line-height:1.55; color:#617085; }
.pp-auth-card .choice-card { border-radius:.9rem; padding:.85rem .75rem; gap:.55rem; background:#fcfdfe; }
.pp-auth-card .choice-card strong { font-size:.86rem; }
.pp-auth-card .choice-card small { font-size:.73rem; line-height:1.5; }
.pp-auth-card .choice-card:has(input:checked) { background:#f4f2ff; border-color:#756bd7; }
.pp-auth-card .choice-card:has(input:focus-visible) { outline:3px solid #b8b1f6; outline-offset:3px; }
.pp-auth-card .form-check { font-size:.82rem; line-height:1.7; }
.pp-form-section { display:flex; gap:.5rem; align-items:center; font-size:.9rem; font-weight:750; color:#34495a; margin:1.4rem 0 .9rem; }
.pp-form-section span { display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:.5rem; color:#397363; background:#edf6f1; font-size:.68rem; }
.pp-auth-card .btn-primary { min-height:3.1rem; border-radius:.85rem!important; font-weight:700; box-shadow:0 4px 0 #413aa41a; }
.pp-auth-card .auth-help { background:#f8fafb; border-color:#e1e7ed; font-size:.8rem; }
.pp-auth-card .auth-help summary { font-weight:600; color:#46576b; }
.pp-auth-footnote { display:flex; align-items:center; justify-content:center; gap:.5rem; color:#687887; text-align:center; font-size:.78rem; margin:1.7rem auto 0; max-width:36rem; line-height:1.6; }
.pp-auth a:focus-visible,.pp-story button:focus-visible,.pp-auth button:focus-visible { outline:3px solid #655bc6; outline-offset:4px; }
.pp-story { position:sticky; top:1.2rem; min-width:0; overflow:hidden; padding:2rem 1.8rem 1.4rem; border:1px solid #d3e8de; border-radius:1.8rem; background:radial-gradient(circle at 80% 45%,#fff1c4 0,transparent 47%),linear-gradient(145deg,#eef9f2,#e3f4f0 65%,#f3f7e8); color:#244b48; }
.pp-story-heading { position:relative; z-index:1; }
.pp-story-label { display:flex; align-items:center; gap:.55rem; color:#386958; font-size:.69rem; font-weight:800; letter-spacing:.14em; margin-bottom:1rem; }
.pp-story-label span { color:#b68115; font-size:1.2rem; }
.pp-story h2 { font-size:clamp(2rem,3.1vw,2.85rem); letter-spacing:-.055em; font-weight:800; color:#214b48; line-height:1.12; margin-bottom:1rem; }
.pp-story-copy { color:#4e7067; font-size:.92rem; line-height:1.7; max-width:25rem; margin-bottom:0; }
.pp-story-stage { position:relative; display:grid; place-items:center; aspect-ratio:1.45; isolation:isolate; margin:1rem -.6rem .4rem; }
.pp-story-stage img { width:100%; height:100%; position:absolute; object-fit:contain; z-index:1; filter:drop-shadow(0 12px 12px #31574814); }
.pp-story-stage img.is-solo { width:82%; height:100%; }
.pp-story-orbit { width:80%; aspect-ratio:1; max-height:100%; border:1px dashed #a7c9b9; border-radius:50%; transform:rotate(-16deg); position:absolute; }
.pp-story-star { position:absolute; right:2%; top:11%; color:#a47c25; font-size:2rem; }
.pp-story-caption { text-align:center; min-height:4.2rem; position:relative; z-index:1; }
.pp-story-caption strong { font-size:.95rem; color:#244c45; }
.pp-story-caption p { font-size:.8rem; color:#506e64; line-height:1.55; margin:.35rem auto .8rem; max-width:26rem; }
.pp-friend-picker { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; margin-top:.5rem; }
.pp-friend-pick { min-width:0; border:1px solid transparent; border-radius:.9rem; background:#ffffff80; padding:.4rem .2rem .5rem; display:flex; flex-direction:column; align-items:center; color:#3e5d52; font-size:.68rem; font-weight:700; transition:background .15s,border-color .15s; }
.pp-friend-pick img { width:clamp(2.1rem,4.5vw,3.5rem); height:clamp(2.1rem,4.5vw,3.5rem); object-fit:contain; }
.pp-friend-pick[aria-pressed=true],.pp-friend-pick:hover:not(:disabled) { background:#fff; border-color:#7eac98; box-shadow:0 3px 8px #2f645910; }
.pp-all-friends { display:block; margin:.9rem auto 0; border:0; padding:.5rem .8rem; background:transparent; color:#386956; font-size:.75rem; border-radius:.7rem; text-decoration:underline; text-underline-offset:4px; }
.pp-all-friends[aria-pressed=true] { text-decoration:none; font-weight:750; }
.pp-story button:disabled { cursor:default; }
.brand-home-art { position:relative; padding:1.5rem .5rem 1rem; border:1px solid #dcece2; border-radius:2rem; background:radial-gradient(ellipse at center,#fff4c9,#eaf8f0 75%); text-align:center; }
.brand-home-art img { display:block; width:100%; height:auto; aspect-ratio:1.35; object-fit:contain; }
.brand-home-art p { margin:.4rem 0; font-size:.85rem; color:#456456; }
.brand-home-art strong { display:block; color:#244b48; font-size:1.1rem; }
.brand-dashboard-companion { display:flex; flex:0 0 13rem; flex-direction:column; align-items:center; text-align:center; }
.brand-dashboard-companion img { width:12rem; height:12rem; object-fit:contain; }
.brand-dashboard-companion p { font-size:.73rem; line-height:1.5; color:#516a63; max-width:15rem; margin:0; }
.brand-dashboard-companion strong { display:block; color:#37564e; }
@media(min-width:1200px) { .pp-auth-login .pp-auth-card { margin-top:1rem; } }
@media(max-width:991.98px) {
 .pp-auth { padding-top:1.4rem; }
 .pp-auth-layout { grid-template-columns:minmax(0,1fr); max-width:680px; gap:1rem; }
 .pp-story { position:relative; top:auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:.7rem 1rem; padding:1.4rem; }
 .pp-story-heading { align-self:center; }
 .pp-story h2 { font-size:clamp(1.55rem,4vw,2.2rem); margin-bottom:.65rem; }
 .pp-story-label { font-size:.6rem; letter-spacing:.1em; margin-bottom:.6rem; }
 .pp-story-copy { font-size:.8rem; }
 .pp-story-stage { margin:0; width:100%; align-self:center; aspect-ratio:1; }
 .pp-story-caption { grid-column:1/-1; min-height:0; }
 .pp-story-caption p { margin-bottom:0; }
 .pp-friend-picker { grid-column:1/-1; margin-top:0; }
 .pp-friend-pick { flex-direction:row; justify-content:center; gap:.2rem; padding:.3rem .2rem; min-height:2.8rem; }
 .pp-friend-pick img { width:2rem; height:2rem; }
 .pp-all-friends { grid-column:1/-1; margin:0 auto; padding:.35rem; }
 .pp-auth-card { padding:1.6rem; border-radius:1.4rem; }
 .pp-auth-switch { margin-bottom:1.4rem; }
}
@media(max-width:575.98px) {
 .pp-auth { padding-top:.9rem; }
 .pp-auth-layout { gap:.85rem; }
 .pp-story { padding:1.1rem .95rem .8rem; border-radius:1.4rem; gap:.45rem; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
 .pp-story h2 { font-size:1.48rem; letter-spacing:-.04em; }
 .pp-story-label { font-size:.52rem; letter-spacing:.06em; gap:.3rem; }
 .pp-story-copy { display:none; }
 .pp-story-stage { aspect-ratio:1.05; }
 .pp-story-caption strong { font-size:.82rem; }
 .pp-story-caption p { font-size:.73rem; }
 .pp-friend-picker { gap:.25rem; }
 .pp-friend-pick { flex-direction:column; font-size:.62rem; padding:.3rem .12rem; gap:0; }
 .pp-friend-pick img { width:2rem; height:2rem; }
 .pp-all-friends { font-size:.7rem; }
 .pp-auth-card { padding:1.25rem; }
 .pp-auth-card h1 { font-size:1.85rem; }
 .pp-auth-card .pp-form-intro { font-size:.875rem; }
 .pp-auth-footnote { font-size:.7rem; padding-inline:.7rem; }
 .brand-dashboard-companion { flex-basis:auto; width:100%; flex-direction:row; text-align:left; gap:.8rem; }
 .brand-dashboard-companion img { width:5.5rem; height:5.5rem; }
 .brand-dashboard-companion p { max-width:17rem; }
 .dashboard-welcome:has(.brand-dashboard-companion) { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .pp-friend-pick { transition:none; } }
/* Dashboard banners have dark backgrounds across all learner themes. */
.dashboard-welcome .brand-dashboard-companion { flex:0 0 13rem; }
.dashboard-welcome .brand-dashboard-companion p { color:#edf4f7; }
.dashboard-welcome .brand-dashboard-companion strong { color:#ffe59c; }
@media(max-width:575.98px) {
 .dashboard-page .learning-hero:has(.brand-dashboard-companion) > div { padding-right:0; }
 .dashboard-welcome .brand-dashboard-companion { flex:0 0 auto; }
}