/* SooBrainy custom layer atop Tailwind CDN. */

.pzx-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--accent) 78%, white) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, black) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.pzx-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 78%, rgba(255,255,255,.16) 0 12%, transparent 13%),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.10) 0 9%, transparent 10%);
  z-index: -1;
}
.pzx-cover-scene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Curated cover-library image: full-bleed, cropped to the tile; the .pzx-cover-title scrim sits on top. */
.pzx-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pzx-cover-badge {
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.24); box-shadow: 0 4px 14px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.25);
}
.pzx-cover-emoji { font-size: 1.85rem; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,.22)); }
.pzx-cover-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .55rem .6rem;
  font-weight: 800;
  font-size: .72rem;
  line-height: 1.15;
  letter-spacing: .01em;
  background: linear-gradient(to top, rgba(0,0,0,.42), transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Hide horizontal scrollbars on rails while keeping scroll. */
.pzx-rail { scrollbar-width: none; -ms-overflow-style: none; }
.pzx-rail::-webkit-scrollbar { display: none; }

/* ============================================================
   Responsive page container (desktop / iPad).
   Replaces the per-page `max-w-xl mx-auto` (=36rem) so width
   lives in ONE place. Padding stays a constant 1.25rem so the
   horizontal rails' `-mx-5 px-5` edge-bleed math is unaffected.
   ============================================================ */
.pzx-container { width: 100%; margin-inline: auto; padding-inline: 1.25rem; max-width: 36rem; }
@media (min-width: 768px)  { .pzx-container { max-width: 46rem; } }   /* iPad portrait */
@media (min-width: 1024px) { .pzx-container { max-width: 64rem; } }   /* iPad landscape / desktop */
@media (min-width: 1280px) { .pzx-container { max-width: 70rem; } }
/* Focus flows (auth/wizards) + the lesson reading column stay a calm measure. */
.pzx-container--reading { max-width: 34rem; }

/* Parent report (parent/child.php): balance its long stack of cards into two
   columns on desktop, keeping each section intact. Single column below lg. */
@media (min-width: 1024px) {
  .pzx-report { columns: 2; column-gap: 1.5rem; }
  .pzx-report > * { break-inside: avoid; margin-bottom: 1.5rem; }
}

/* Reader typography */
.reader-body { font-family: 'Lora', Georgia, serif; }
.prose-reader { line-height: 1.72; color: #223; }
.prose-reader p { margin: 0 0 1rem; }
.prose-reader strong { color: #0B2239; font-weight: 600; }
.prose-reader ul, .prose-reader ol { margin: 0 0 1rem 1.2rem; }
.prose-reader ul { list-style: disc; }
.prose-reader ol { list-style: decimal; }
.prose-reader li { margin-bottom: .4rem; }
.prose-reader h3 { font-weight: 700; margin: 1.2rem 0 .5rem; color: #0B2239; }
.prose-reader a { color: #12A873; text-decoration: underline; }
.prose-reader blockquote { border-left: 3px solid #1CC98B; padding-left: 1rem; color: #556; font-style: italic; margin: 0 0 1rem; }

/* Spinner */
.pzx-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.22);
  border-top-color: #1CC98B;
  animation: pzx-spin .8s linear infinite;
}
@keyframes pzx-spin { to { transform: rotate(360deg); } }

input[type="range"] { height: 1.5rem; }

/* ---- Mascot (Sooby) ---- */
.mascot { display: block; }
.mascot-spark { transform-origin: 60px 15px; }
@media (prefers-reduced-motion: no-preference) {
  .mascot-float { animation: mascot-bob 3s ease-in-out infinite; }
  .mascot-spark { animation: mascot-twinkle 2.2s ease-in-out infinite; }
}
@keyframes mascot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mascot-twinkle { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.28); opacity: .55; } }

/* ---- Shimmer skeletons ---- */
.pzx-skel { position: relative; overflow: hidden; background: rgba(255,255,255,.12); border-radius: .9rem; }
.pzx-skel--light { background: rgba(11,34,57,.07); }
.pzx-skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.pzx-skel--light::after { background: linear-gradient(90deg, transparent, rgba(11,34,57,.06), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .pzx-skel::after { animation: pzx-shimmer 1.5s ease-in-out infinite; }
}
@keyframes pzx-shimmer { 100% { transform: translateX(100%); } }

/* ---- Lesson build (loading) screen ---- */
.pzx-loading-bg {
  position: relative; isolation: isolate;
  background: radial-gradient(135% 100% at 50% -12%, color-mix(in srgb, var(--accent, #1CC98B) 66%, #0B2239) 0%, #0B2239 60%);
}
.pzx-loading-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image:
    radial-gradient(circle at 16% 22%, rgba(255,255,255,.10) 0 9%, transparent 10%),
    radial-gradient(circle at 86% 28%, rgba(255,255,255,.07) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 84%, rgba(255,255,255,.06) 0 8%, transparent 9%);
}
.pzx-buildbar { transition: width .9s cubic-bezier(.4, 0, .2, 1); }

/* ============================================================
   Kid-first UI layer — scoped to .kids-ui so parent/marketing
   views (which never set it) keep the calm, clean system.
   ============================================================ */
.kids-ui { font-size: 18px; --tts-hl: #FFE58A; }
.kids-ui h1, .kids-ui h2, .kids-ui .kid-display { font-family: 'Fredoka', 'Baloo 2', Inter, sans-serif; letter-spacing: .01em; }

/* Big, friendly, chunky cards. */
.kid-card {
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 6px 0 rgba(11,34,57,.08), 0 14px 30px rgba(11,34,57,.10);
  border: 2px solid rgba(11,34,57,.05);
}
/* Large touch targets (WCAG 2.5.5). */
.kid-tap { min-height: 60px; min-width: 60px; display: inline-flex; align-items: center; justify-content: center; }
.kids-ui button, .kids-ui a[role="button"] { touch-action: manipulation; }

/* Horizontal snap rails (reuse pzx-rail scrollbar hiding). */
.kid-rail { scroll-snap-type: x proximity; }
.kid-rail > * { scroll-snap-align: start; }

/* Focus visibility for keyboard users. */
.kids-ui :focus-visible { outline: 3px solid #2F6BFF; outline-offset: 2px; border-radius: 8px; }

/* ---- Lesson player ---- */
.lesson-step { display: none; }
.lesson-step.is-active { display: block; animation: kid-pop .28s ease; }
@keyframes kid-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.lesson-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.lesson-dots i { width: 9px; height: 9px; border-radius: 999px; background: #E4E9ED; transition: background .2s, transform .2s; }
.lesson-dots i.done { background: #5CB85C; }
.lesson-dots i.now { background: #2F6BFF; transform: scale(1.4); }

.lesson-opt {
  display: block; width: 100%; text-align: left;
  border-radius: 1rem; border: 2px solid #E4E9ED; background: #fff;
  padding: 1rem 1.1rem; font-weight: 600; color: #0B2239; transition: border-color .15s, background .15s, transform .1s;
}
.lesson-opt:hover { border-color: #2F6BFF; }
.lesson-opt:active { transform: scale(.99); }
.lesson-opt.is-selected { border-color: #2F6BFF; background: #EAF2FF; }
.lesson-opt.is-correct { border-color: #5CB85C; background: #EAF7EA; }
.lesson-opt.is-wrong { border-color: #FF6B6B; background: #FFECEC; }

/* ---- Word-by-word TTS highlighting ---- */
.tts-word { border-radius: 4px; transition: background .08s; }
.tts-word.tts-active { background: var(--tts-hl); box-shadow: 0 0 0 2px var(--tts-hl); }
.tts-block.tts-active { background: var(--tts-hl); border-radius: 6px; }

/* ---- Celebration overlay ---- */
.celebrate { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(11,34,57,.55); }
.celebrate.is-open { display: flex; }
.celebrate-card { background: #fff; border-radius: 1.75rem; padding: 2rem; text-align: center; max-width: 22rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: kid-pop .3s ease; }
.confetti { position: fixed; top: -12px; width: 10px; height: 14px; z-index: 61; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .confetti { animation: confetti-fall 2.4s linear forwards; }
}
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .lesson-step.is-active, .celebrate-card { animation: none; }
}

/* ---- Reading-accessibility backgrounds/fonts (applied on <html> by data-attrs) ---- */
:root[data-read-bg="cream"] body { background: #FBF3E0 !important; }
:root[data-read-bg="dark"] body { background: #12161C !important; color: #E8ECF1 !important; }
:root[data-read-bg="dark"] .kid-card { background: #1B222C !important; border-color: #2A333F !important; color: #E8ECF1; }
:root[data-read-bg="blue"] body { background: #E7F0FB !important; }

/* Desktop/iPad chrome (sidebar, bottom bar, reading-settings gear) in dark reading mode. */
:root[data-read-bg="dark"] .pzx-sidebar,
:root[data-read-bg="dark"] .pzx-navsurface { background: #12161C !important; border-color: #2A333F !important; }
:root[data-read-bg="dark"] .pzx-sidebar .text-ink { color: #E8ECF1 !important; }
:root[data-read-bg="dark"] .pzx-sidebar .text-slate-500 { color: #9AA6B4 !important; }
:root[data-read-bg="dark"] .pzx-sidebar a:hover.hover\:bg-mist { background: #1B222C !important; }
:root[data-read-bg="dark"] #rs-open { background: #1B222C !important; border-color: #2A333F !important; color: #E8ECF1; }

/* OpenDyslexic is self-hosted when present; if the woff2 is absent the stack below still
   applies the spacing/typeface changes that actually aid dyslexic readers. Drop
   public/assets/fonts/OpenDyslexic-Regular.woff2 in to upgrade the exact typeface. */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-display: swap;
}
:root[data-read-font="comic"] .lesson-reading, :root[data-read-font="comic"] .prose-reader,
:root[data-read-font="comic"] .kids-ui { font-family: 'Comic Sans MS', 'Comic Sans', 'Trebuchet MS', cursive; }
:root[data-read-font="arial"] .lesson-reading, :root[data-read-font="arial"] .prose-reader,
:root[data-read-font="arial"] .kids-ui { font-family: Arial, Helvetica, sans-serif; }
:root[data-read-font="dyslexic"] .lesson-reading, :root[data-read-font="dyslexic"] .prose-reader,
:root[data-read-font="dyslexic"] .kids-ui {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', Verdana, sans-serif;
  letter-spacing: .04em; word-spacing: .14em; line-height: 1.9;
}
:root[data-read-font="large"] .lesson-reading, :root[data-read-font="large"] .prose-reader { font-size: 1.2em; line-height: 1.85; }

/* ============================================================
   Curiosity-first redesign (Product Brief v2) — shared atoms.
   ============================================================ */

/* ---- Reusable kid buttons ---- */
.kid-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  border-radius: 1rem; background: #1CC98B; color: #fff; font-weight: 800; font-size: 1.125rem;
  padding: 1rem; min-height: 60px; transition: transform .1s, opacity .15s;
}
.kid-btn:active { transform: scale(.99); }
.kid-btn--accent { background: var(--topic, #2F6BFF); }
.kids-ui button:disabled, .kids-ui .next-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Today's Adventure cards ---- */
.adventure-card {
  display: block; width: 100%; text-align: left;
  border-radius: 1.5rem; background: #fff; padding: 1rem 1.1rem;
  box-shadow: 0 6px 0 rgba(11,34,57,.08), 0 14px 30px rgba(11,34,57,.10);
  border: 2px solid rgba(11,34,57,.05); border-left: 6px solid var(--accent, #2F6BFF);
  transition: transform .1s;
}
.adventure-card:active { transform: scale(.99); }
.adventure-inner { display: flex; align-items: center; gap: 1rem; }
.adventure-body { flex: 1 1 auto; min-width: 0; text-align: left; }
.adventure-emoji {
  width: 56px; height: 56px; flex: none; border-radius: 1rem;
  display: grid; place-items: center; font-size: 1.8rem; background: #EEF3FA;
}
@supports (background: color-mix(in srgb, red, blue)) {
  .adventure-emoji { background: color-mix(in srgb, var(--accent, #2F6BFF) 14%, #fff); }
}
.adventure-thumb {
  width: 56px; height: 56px; flex: none; border-radius: 1rem;
  object-fit: cover; display: block; box-shadow: inset 0 0 0 1px rgba(11,34,57,.06);
}
.adventure-cta {
  display: inline-block; margin-top: .9rem; border-radius: 999px;
  background: var(--accent, #2F6BFF); color: #fff; font-weight: 800;
  padding: .55rem 1.2rem; font-size: .95rem;
}
/* Desktop (lg+): the card goes cover-forward — the cover becomes a full-bleed top banner and the
   title/meta/hook stack below it, so the FLUX art gets the width. Phone/iPad-portrait keep the
   compact horizontal card above. Driven here (not with lg: utilities) because these are custom
   classes the CDN build can't prefix. */
@media (min-width: 1024px) {
  .adventure-card { padding: 0; overflow: hidden; }
  .adventure-inner { display: block; }
  .adventure-thumb,
  .adventure-emoji {
    width: 100%; height: auto; aspect-ratio: 16 / 10;
    border-radius: 0; flex: none; box-shadow: none;
  }
  .adventure-emoji { font-size: 4rem; }
  .adventure-body { padding: .9rem 1.15rem 0; }
  .adventure-cta { margin: .9rem 1.15rem 1.15rem; }
}

/* ---- v2 lesson screen theming (8-Discovery) ---- */
#lesson-root { --topic: #2F6BFF; }
/* Cap the reading measure so a widened lesson pane never runs to unreadable line lengths;
   centered within its column (single-col on mobile, the right pane on desktop). */
#lesson-steps { max-width: 34rem; margin-inline: auto; }
.wow-headline {
  font-family: 'Fredoka', 'Baloo 2', Inter, sans-serif; font-weight: 700; line-height: 1.05;
  font-size: clamp(2rem, 8vw, 3rem); color: #0B2239; letter-spacing: .01em;
}
/* On desktop/iPad the Wow headline lives in a ~34rem pane — 8vw would blow up to ~115px. */
@media (min-width: 1024px) { .wow-headline { font-size: clamp(2rem, 3.2vw, 2.75rem); } }
.curiosity-tail { margin-top: 1.25rem; font-weight: 700; color: var(--topic, #2F6BFF); }
.screen-emoji { font-size: 3.5rem; line-height: 1; }
.screen-badge {
  display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--topic, #2F6BFF); background: #EEF3FA;
  border-radius: 999px; padding: .2rem .7rem;
}
.reveal-box {
  margin-top: 1rem; border-radius: 1rem; padding: 1rem 1.1rem;
  background: #EAF7EA; border: 2px solid #5CB85C; color: #0B2239; font-weight: 600;
}

/* ---- Hero image (v2, WS3); falls back to pzx_cover when absent ---- */
.pzx-hero { display: block; width: 100%; object-fit: cover; background: #EEF3FA; }