/* Speak & Sparkle portal – "Starry" theme v1 (logged-in pages).
   Load AFTER tokens.css, dashboard.css, portal.css and portal-sparkle.css. Pairs with js/portal-starry.js.
   Only adds .st-* classes and scopes overrides under body.st-page / body.st-form, so existing ids/classes keep working.
   CSP-safe: no inline style/script, no external hosts; images are same-origin. */

:root{
  --st-navy:#0c1f45;--st-navy-2:#16336e;--st-gold:#ffc83d;--st-coral:#ff7a6b;--st-cream:#fff7e8;
  --st-bg:#fffdf8;--st-butter:#fff3d1;--st-sky:#e6f3ff;--st-gold-text:#6b4d00;/* 7.4:1 on butter */
  --st-star:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  --st-glow:0 0 0 1px rgba(255,200,61,.55),0 0 22px -4px rgba(255,200,61,.55),0 14px 34px -18px rgba(12,31,69,.35);
}

/* ---------- 1. Page background: navy night sky melting into cream ---------- */
/* The blend happens behind the opaque hero band, so every heading after the hero sits on cream (AA). */
body.st-page{background:linear-gradient(180deg,var(--st-navy) 0,var(--st-navy-2) 150px,#b9bfd0 300px,var(--st-cream) 430px,var(--st-bg) 1000px) no-repeat,var(--st-bg)}
body.st-page main{position:relative}
/* Pages without a hero band (badges page, trial 'ended'): navy only behind the header, light before any text */
body.st-page.st-nohero{background:linear-gradient(180deg,var(--st-navy) 0,var(--st-navy-2) 60px,var(--st-sky) 170px,var(--st-cream) 520px,var(--st-bg) 1000px) no-repeat,var(--st-bg)}

/* ---------- 2. Hero band (section.hero + .st-hero) ---------- */
.st-hero{position:relative;isolation:isolate;padding:clamp(18px,3vw,36px);border-radius:var(--ss-r-card,28px);
  background:radial-gradient(90% 120% at 85% 0,#1f4690 0,var(--st-navy-2) 38%,var(--st-navy) 75%);
  box-shadow:0 30px 70px -30px rgba(12,31,69,.75),inset 0 0 0 1px rgba(255,200,61,.22)}
.st-hero>*:not(.st-hero-sky):not(.st-cutouts){position:relative;z-index:2}
.st-hero-sky{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.st-hero-sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* CSS star field shown until/without JS (and as a static sky under reduced motion) */
.st-hero-sky,.st-sky-card{background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 28% 72%,#ffde85 98%,transparent),
  radial-gradient(2px 2px at 46% 30%,#fff 98%,transparent),radial-gradient(1px 1px at 63% 84%,#b8e3ff 98%,transparent),
  radial-gradient(1.5px 1.5px at 78% 22%,#ffde85 98%,transparent),radial-gradient(1px 1px at 91% 64%,#fff 98%,transparent),
  radial-gradient(1px 1px at 6% 88%,#b8e3ff 98%,transparent),radial-gradient(1.5px 1.5px at 54% 52%,#fff 98%,transparent)}
.st-hero-sky.has-canvas{background-image:none}
/* glassy navy greeting card inside the band */
.st-page .st-hero .hero-main{background:linear-gradient(160deg,rgba(31,70,144,.55),rgba(12,31,69,.35));border:1px solid rgba(255,200,61,.35);box-shadow:0 0 30px -10px rgba(255,200,61,.35);backdrop-filter:blur(2px)}
.st-page .st-hero .countdown{box-shadow:var(--st-glow);border-color:rgba(255,200,61,.6)}

/* daily greeting chip (new) */
.st-greeting{display:inline-flex;align-items:center;gap:.5rem;margin:.2rem 0 .6rem;padding:.35rem .9rem .35rem .45rem;border-radius:999px;background:rgba(255,243,209,.12);border:1px solid rgba(255,200,61,.45);color:#fff3d1;font-family:var(--ss-font-head);font-weight:600;font-size:var(--ss-fs-sm);line-height:1.35;max-width:100%}
.st-greeting::before{content:"";flex:none;width:22px;height:22px;background:var(--st-gold);clip-path:var(--st-star);animation:st-tw 3.4s ease-in-out infinite}
.st-greeting .st-daily-text{margin:0;color:#fff3d1;max-width:none}/* 15:1 on navy */
.st-pool{display:none!important}

/* ---------- 3. Floating cut-outs (star, book, megaphone) ---------- */
.st-cutouts{position:absolute;inset:0;z-index:1;pointer-events:none}
.st-cut{position:absolute;display:block;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));animation:st-float 6s ease-in-out infinite;will-change:transform}
.st-cut-star{width:62px;top:-22px;left:calc(55.5% - 31px);animation-duration:6s}
.st-cut-book{width:92px;bottom:-26px;left:-14px;animation-duration:7.5s;animation-delay:-2s}
.st-cut-megaphone{width:70px;top:-24px;right:-10px;animation-duration:5.4s;animation-delay:-1s}
@keyframes st-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}

/* ---------- 4. Gold glow edges on cards + star section headers ---------- */
.st-page .card:not(.hero-main){border-color:rgba(255,200,61,.5);box-shadow:var(--st-glow)}
.st-page .section-title,.st-title-star{position:relative}
.st-page .section-title::before,.st-title-star::before{content:"";display:inline-block;width:.62em;height:.62em;margin:0 .38em .06em 0;vertical-align:baseline;background:var(--st-gold);clip-path:var(--st-star);animation:st-tw 3.2s ease-in-out infinite}
.st-page .section-title::after,.st-title-star::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.3em;vertical-align:super;background:var(--st-coral);clip-path:var(--st-star);animation:st-tw 2.6s ease-in-out -1.2s infinite}
@keyframes st-tw{50%{transform:scale(.62) rotate(45deg);opacity:.6}}

/* ---------- 5. New content slots: Today's sparkle row ---------- */
.st-today{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ss-sp-6,24px)}
.st-slot{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.45rem}
.st-slot .eyebrow{color:var(--st-gold-text)}
.st-slot .card-title{margin:0}
.st-slot p{margin:0}
.st-word{background:linear-gradient(160deg,#fff 0,var(--st-butter) 100%)}
.st-word-term{font-family:var(--ss-font-display);font-weight:600;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);line-height:1.05;color:var(--st-navy)}
.st-word-def{color:var(--ss-ink,#0a1733)}
.st-word-use{color:var(--ss-muted,#4a5672);font-style:italic;border-left:3px solid var(--st-gold);padding-left:.7rem}
.st-tip{background:linear-gradient(160deg,#fff 0,var(--st-sky) 100%)}
.st-tip-text{font-size:var(--ss-fs-md);color:var(--ss-ink,#0a1733)}
.st-slot-art{position:absolute;right:-8px;top:-6px;width:64px;height:auto;opacity:.9;pointer-events:none;animation:st-float 7.5s ease-in-out infinite}
.st-slot>.eyebrow,.st-slot>.card-title{padding-right:56px}

/* Games corner entry card */
.st-games{background:radial-gradient(120% 120% at 100% 0,#1f4690 0,var(--st-navy) 70%);color:#fff;border-color:rgba(255,200,61,.6)}
.st-games .eyebrow{color:var(--st-gold)}
.st-games .card-title{color:#fff}
.st-games p{color:#d6e2ff}/* 11:1 on navy */
.st-games-sub{font-size:var(--ss-fs-md);color:#fff3d1!important}
.st-games-msg strong{color:var(--st-gold)}
.st-games-msg{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .85rem;border-radius:16px;background:rgba(255,243,209,.1);border:1px dashed rgba(255,200,61,.55)}
.st-games-msg p{color:#fff3d1}
.st-games-msg svg{flex:none;width:22px;height:22px;color:var(--st-gold);margin-top:2px}
.st-games .st-games-btn{margin-top:auto;align-self:flex-start;justify-content:center}
.st-games-btn.is-resting{background:rgba(255,255,255,.1);color:#fff3d1;border:2px solid rgba(255,243,209,.4);box-shadow:none;cursor:not-allowed}
.st-games-btn.is-resting::before{display:none}
.st-games[data-state=locked] .st-games-open,.st-games[data-state=open] .st-games-locked{display:none!important}

/* ---------- 6. Twinkling Confidence Staircase ---------- */
.st-page .stairs-card{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,var(--st-sky) 0,#fff 45%,var(--st-cream) 100%)}
.st-page .stairs-card::before,.st-page .stairs-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(3px 3px at 8% 14%,#ffc83d 98%,transparent),radial-gradient(2px 2px at 23% 8%,#16336e 98%,transparent),
  radial-gradient(3px 3px at 41% 18%,#ffc83d 98%,transparent),radial-gradient(2px 2px at 66% 6%,#ff7a6b 98%,transparent),
  radial-gradient(2px 2px at 84% 12%,#16336e 98%,transparent),radial-gradient(3px 3px at 95% 30%,#ffc83d 98%,transparent);
  animation:st-field 4s ease-in-out infinite}
.st-page .stairs-card::after{transform:translate(7%,12%);animation-delay:-2s;opacity:.7}
@keyframes st-field{50%{opacity:.25}}
.st-page .step.is-earned{border-color:var(--st-gold);background:linear-gradient(180deg,#fffaf0,var(--st-butter));
  box-shadow:0 0 0 3px rgba(255,200,61,.35),0 0 26px -2px rgba(255,200,61,.75);animation:st-step-glow 3.2s ease-in-out infinite}
@keyframes st-step-glow{50%{box-shadow:0 0 0 4px rgba(255,200,61,.5),0 0 38px 2px rgba(255,200,61,.9)}}
.st-page .step.is-earned .state{background:var(--st-navy);color:#ffde85}/* 10:1 */
.st-page .step.is-earned .state::before{content:"✦ "}
.st-page .step.is-earned::after{background:repeating-linear-gradient(180deg,rgba(255,200,61,.35) 0 14px,rgba(255,200,61,.18) 14px 28px)}
.st-page .step.is-earned::before{content:"";position:absolute;top:-9px;right:-7px;width:22px;height:22px;background:var(--st-gold);clip-path:var(--st-star);pointer-events:none;animation:st-tw 2.8s ease-in-out infinite;filter:drop-shadow(0 0 4px rgba(255,200,61,.9))}
.st-page .step.is-earned:nth-child(even)::before{animation-delay:-1.3s}
.st-page .step.is-earned img{filter:drop-shadow(0 0 10px rgba(255,200,61,.75))}
.st-page .step.is-current{background:#fff}
.st-page .bar-fill{background:linear-gradient(90deg,#ffde85,var(--st-gold),var(--st-coral));box-shadow:0 0 12px rgba(255,200,61,.8)}

/* Sparkle burst on a newly earned badge (JS adds .st-burst inside the step) */
.st-burst{position:absolute;left:50%;top:58px;width:0;height:0;pointer-events:none;z-index:3}
.st-burst i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:radial-gradient(circle,#fff 0 30%,var(--st-gold) 60%,transparent 72%);clip-path:var(--st-star);
  animation:st-burst 1.1s cubic-bezier(.15,.8,.3,1) forwards;transform:rotate(var(--a)) translateY(0) scale(.4)}
.st-burst i.c{background:radial-gradient(circle,#fff 0 30%,var(--st-coral) 60%,transparent 72%)}
.st-burst b{position:absolute;left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;border:3px solid var(--st-gold);animation:st-ring .9s ease-out forwards}
@keyframes st-burst{60%{opacity:1}to{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1) rotate(160deg);opacity:0}}
@keyframes st-ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
.st-page .step.st-just-earned{animation:st-pop .7s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes st-pop{40%{transform:scale(1.08)}}

/* ---------- 7. Trial: ended screen becomes a starry card ---------- */
.st-sky-card{position:relative;isolation:isolate;overflow:hidden;background-color:var(--st-navy)!important;color:#fff;border:1px solid rgba(255,200,61,.55)!important}
.st-sky-card>.st-hero-sky{background-image:none}
.st-sky-card>*:not(.st-hero-sky){position:relative;z-index:1}
.st-sky-card h1{color:#fff!important}
.st-sky-card h1 .t-name{color:var(--st-gold)!important}
.st-sky-card p{color:#d6e2ff!important}
.st-page .t-expect{background:linear-gradient(160deg,#fff,var(--st-sky))}
.st-page .t-loved{box-shadow:var(--ss-shadow-coral),0 0 0 1px rgba(255,200,61,.5)}

/* ---------- 8. Change password / "Make it yours!" (body.page-login.page-change-password.st-form) ---------- */
.st-form .login-wrap{position:relative}
.st-form .login-card{box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 2px rgba(255,200,61,.65),0 0 40px -6px rgba(255,200,61,.55)}
.st-form .greet{position:relative}
.st-form .cp-logout{display:block;margin-top:1rem}
.st-form .cp-logout .btn-ghost{color:var(--st-navy);border-color:rgba(12,31,69,.3);background:#fff}/* was white-on-white */
.st-form .cp-logout .btn-ghost::before{background:var(--st-navy)}
.st-form .cp-logout .btn-ghost:hover{color:#fff}
.st-form-cutouts{position:absolute;left:50%;top:0;bottom:0;width:min(620px,100%);transform:translateX(-50%);pointer-events:none;z-index:0}
.st-form .login-card{z-index:1}
.st-form-cutouts .st-cut-star{left:auto;right:4px;top:18%}
.st-form-cutouts .st-cut-book{left:0;bottom:12%}
.st-form-cutouts .st-cut-megaphone{right:auto;left:6px;top:8%}

/* ---------- 9. Responsive: lighter on tablets/phones ---------- */
@media (max-width:1020px){.st-today{grid-template-columns:1fr 1fr}.st-games{grid-column:1/-1}}
@media (max-width:640px){
  .st-hero{padding:14px;margin-inline:calc(-1 * var(--ss-gutter) + 6px)}
  .st-today{grid-template-columns:1fr;gap:var(--ss-sp-4,16px)}
  .st-cut{animation-duration:8s;filter:none}
  .st-cut-star{width:44px;top:-18px;left:auto;right:58px}
  .st-cut-megaphone{width:48px;top:-18px;right:4px}
  .st-cut-book{display:none}
  @keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) rotate(3deg)}}
  .st-page .step.is-earned{animation:none}
  .st-page .stairs-card::after{display:none}
  .st-slot-art{width:52px}
  .st-form-cutouts{display:none}
  .st-burst b{display:none}
  .st-burst{left:40px;top:50%}
}
/* The two hero cards stack above 640 on small tablets; keep the centre star out of text */
@media (max-width:1020px) and (min-width:641px){.st-cut-star{left:auto;right:96px}}

/* ---------- 10. Reduced motion: everything still, sky stays (static) ---------- */
@media (prefers-reduced-motion:reduce){
  .st-cut,.st-greeting::before,.st-page .section-title::before,.st-page .section-title::after,.st-title-star::before,.st-title-star::after,
  .st-page .stairs-card::before,.st-page .stairs-card::after,.st-page .step.is-earned,.st-page .step.is-earned::before,.st-slot-art,.st-page .step.st-just-earned{animation:none!important}
  .st-burst{display:none!important}
}
@media (forced-colors:active){.st-cutouts,.st-hero-sky,.st-burst{display:none}.st-greeting,.st-games-msg{border:1px solid CanvasText}}
@media print{.st-cutouts,.st-hero-sky,.st-burst,.st-form-cutouts{display:none}body.st-page{background:#fff}}

/* ---------- 11. Expired trial login page (body.st-page.st-trial.st-nohero.st-expired) ---------- */
.st-expired-wrap{padding-bottom:clamp(32px,6vw,72px)}
.st-expired .st-expired-card{overflow:visible;border-radius:var(--ss-r-card,28px)}
.st-expired .st-expired-card>.st-hero-sky{border-radius:inherit}
.st-expired-card .st-cutouts{z-index:0}
.st-expired .st-expired-card .st-cut{margin:0;animation:st-float 6s ease-in-out infinite}/* undo .t-ended img sizing */
.st-expired-card .st-cut-star{width:62px;left:auto;right:22px;top:-26px}
.st-expired-card .st-cut-megaphone{width:70px;right:auto;left:-14px;top:auto;bottom:-24px;animation-duration:5.4s;animation-delay:-1s}
.st-expired .st-expired-card h1{font-size:clamp(1.7rem,1.25rem + 1.9vw,2.6rem);text-wrap:balance}
.st-expired .st-expired-card p{text-wrap:pretty}
.st-expired-card .t-name{color:var(--st-gold);font-weight:600}
.st-expired-loved{border-radius:var(--ss-r-card,28px)}
.st-expired-loved [data-child-name]{font-weight:700}
.st-expired-wa{flex:none;min-height:56px;justify-content:center}
.st-expired-wa svg{width:24px;height:24px}
.st-expired-login{text-align:center;margin:var(--ss-sp-6,24px) auto 0;font-size:var(--ss-fs-sm)}
.st-expired-login a{color:var(--st-navy-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:.5rem .25rem;display:inline-block}/* 11:1 on cream */
.st-expired-login a:hover{color:var(--st-navy)}
@media (max-width:640px){
  .st-expired-wa{width:100%}
  .st-expired .st-expired-card .st-cut-star{width:44px;right:14px;top:-18px}
  .st-expired-card .st-cut-megaphone{display:none}
}
@media (prefers-reduced-motion:reduce){.st-expired-mascot,.st-expired .st-expired-card .st-cut{animation:none!important}}
/* v1.16 expired trial "Loved it?": cream card, 2px coral border, coral star; the button stays gold */
.st-page .card.t-loved.st-expired-loved{background:#fff7e8;border:2px solid #ff7a6b;box-shadow:var(--ss-shadow-md)}
.st-page .st-expired-loved .section-title::before,.st-page .st-expired-loved .section-title::after{display:none}
.st-expired-loved .loved-star{color:#ff7a6b}
.st-page .st-expired-loved .st-expired-wa{background:var(--ss-gold);color:var(--ss-navy)}
/* v1.18.3 (audit 8): Open Sparkle Games is a gold pill with navy text, 48px, with the hover lift */
.st-games .st-games-btn.st-games-open{background:#ffc83d;color:#0c1f45;border:0;border-radius:999px;min-height:48px;height:48px;padding:0 1.5rem;box-shadow:0 10px 22px -10px rgba(255,170,0,.75);transition:transform .18s ease,box-shadow .18s ease}
.st-games .st-games-btn.st-games-open::before{display:none}
.st-games .st-games-btn.st-games-open span{color:#0c1f45}
.st-games .st-games-btn.st-games-open:hover,.st-games .st-games-btn.st-games-open:focus-visible{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(255,170,0,.85);color:#0c1f45}
@media (prefers-reduced-motion:reduce){.st-games .st-games-btn.st-games-open:hover{transform:none}}