/* Reader PLAYFUL theme (Theme 2 · Students/Family/Kids) — /read/ + /read/passage/.
   Owner-approved 2026-08-22 (the style-tile direction). Same Bucoo palette as the parent surfaces,
   turned up for kids: confident ROYAL-BLUE banner, warm CREAM reading, CORAL encouragement, LEAF
   success, and GOLD rewards, with a GRAPE accent. Rounder shapes, refined (not chunky) headings.
   Loaded AFTER brand.css; skins only — the deterministic coaching logic is untouched. */
:root{
  --ink:#1c212a; --muted:#586074;
  --bg:#fff9f0; --panel:#fffcf8; --line:#eadfce; --shadow:0 16px 38px -20px rgba(28,33,42,.3);
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-50:#eff6ff; --sky:#e0f2fe;
  --coral:#ff6b56; --coral-d:#f0553f; --coral-text:#cf3e29; --coral-100:#ffece7;
  --mint:#22b573; --mint-100:#e6f8ef; --green:#22b573; --green-text:#0f7a49;
  --gold:#ffb020; --gold-100:#fff3d4; --gold-text:#8a5a00; --amber:#ffb020; --amber-100:#fff3d4; --amber-text:#8a5a00;
  --grape:#7c5cfc; --grape-100:#efeaff;
  --nav-bg:#2563eb; --nav-line:#1d4ed8;
}
body{ background:
    radial-gradient(1100px 460px at 84% -10%, #eaf1ff 0%, transparent 60%),
    radial-gradient(900px 420px at -6% 6%, #fff0d9 0%, transparent 55%),
    var(--bg);
  font-family:var(--font-body,'Hanken Grotesk',-apple-system,system-ui,sans-serif); color:var(--ink); }

/* ---- Refined headings — Fredoka at 600, NOT the chunky 700/800 that reads as overly dominant and
   hard to read. This is the type treatment approved from the style tile. ---- */
h1,h2,h3,.home-hi,.stage-title,.finish-head,.setup-step-h,.pgate h2,.who,.carry-on .co-t{
  font-family:var(--font-brand,'Fredoka',system-ui,sans-serif); font-weight:600; letter-spacing:-.01em; }

/* ---- Royal-blue nav = the theme-2 banner (same treatment as the parent surfaces). ---- */
body #bucoo-nav{ background:var(--nav-bg); border-bottom-color:var(--nav-line); box-shadow:0 3px 16px rgba(37,99,235,.3); }
body #bucoo-nav .navlogo span{ color:#fff; }
body #bucoo-nav .navlogo img{ filter:none; }
body #bucoo-nav .bn2-link,body #bucoo-nav .bn2-dd>button{ color:rgba(255,255,255,.88); }
body #bucoo-nav .bn2-link:hover,body #bucoo-nav .bn2-dd:hover>button,body #bucoo-nav .bn2-link.here{ color:#fff; }
body #bucoo-nav .bn2-link.here::after{ background:#fff; }
body #bucoo-nav .bn2-signin{ background:#fff; color:var(--blue-d); border-color:transparent; }
body #bucoo-nav .bn2-signin:hover{ background:#eaf1ff; color:var(--blue-d); }
body #bucoo-nav .bn2-try{ background:var(--coral); color:#fff; }
body #bucoo-nav .bn2-try:hover{ background:var(--coral-d); color:#fff; }

/* ---- Cards + surfaces → warm cream, rounder. ---- */
.card{ background:var(--panel); border-color:var(--line); border-radius:22px; box-shadow:var(--shadow); }
.setup-step{ background:#fffdf8; border-color:var(--line); border-radius:16px; }
textarea,.ti{ background:#fffdf8; border-color:var(--line); border-radius:14px; }
textarea:focus,.ti:focus,select:focus{ border-color:var(--blue); }

/* ---- Buttons → rounder + on-palette. CORAL = action, BLUE = structure, LEAF/mint = success/go. ---- */
.btn{ border-radius:14px; font-weight:600; }
.btn.coral{ background:var(--coral); } .btn.coral:hover{ background:var(--coral-d); }
.btn.mint{ background:var(--mint); } .btn.mint:hover{ filter:brightness(.96); }
.btn.ghost{ background:#fff; color:var(--blue-d); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--blue); }
.controls .big{ border-radius:16px; }

/* ---- Reading pieces. ---- */
.bubble{ background:var(--sky); border-color:#c9e6ff; color:var(--blue-d); border-radius:18px; border-top-left-radius:5px; }
.w.read{ background:var(--mint-100); color:var(--green-text); }
.w.now{ background:var(--coral); color:#fff; box-shadow:0 4px 14px -2px rgba(255,107,86,.55); }
.listen-bar{ background:var(--mint-100); color:var(--green-text); }
.tap-bar{ background:var(--sky); color:var(--blue-d); }
.meter{ background:var(--sky); } .meter > div{ background:linear-gradient(90deg,var(--mint),#38d68a); }
.pill{ background:var(--blue-50); color:var(--blue-d); }
.setup-step-n{ background:var(--blue); }
.stage-back{ border-color:var(--mint); background:var(--mint-100); color:var(--green-text); }

/* ---- Shelf / book cards → rounder, on-palette badges. ---- */
.book-card{ background:#fffdf8; border-color:var(--line); border-radius:16px; }
.book-card:hover,.book-card:focus-visible{ border-color:var(--blue); }
.chip[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); }
.badge-resume{ background:var(--blue); } .badge-new,.badge-easy{ background:var(--mint); }
.badge-med{ background:var(--gold); color:var(--gold-text); } .badge-hard{ background:var(--coral); }
.carry-on{ background:var(--blue-50); border-color:var(--blue); border-radius:16px; }
.book-add .book-cov{ background:var(--blue-50); color:var(--blue); }

/* ---- Rewards / celebration → GOLD. The finished-book screen is the big reward moment. ---- */
.finish{ background:linear-gradient(165deg, var(--gold-100) 0%, var(--sky) 100%); }
.finish-head{ color:var(--ink); }
.finish-praise div{ color:var(--green-text); }
.wordsread{ color:var(--gold-text); font-weight:800; }
.home-praise{ color:var(--green-text); }

/* ---- Mobile (Mobile QA P2-4 / P3-1 / P1-3). The reader shipped with ZERO width breakpoints — a
   410px control in a 390px viewport, labels running off the right edge. Make wide controls fluid,
   bump sub-16px inputs so iOS Safari stops auto-zooming, and pad for the notch. ---- */
@media (max-width: 520px) {
  html { overflow-x: hidden; }               /* safety net: no sideways scroll from the nav's off-canvas drawers */
  .wrap { padding-left: 14px; padding-right: 14px; }
  .row { flex-wrap: wrap; }
  .row > label, label.hint { min-width: 0; max-width: 100%; }        /* let flex items shrink below their content */
  /* a <select> with long option text (e.g. #coachVoiceSel "Storybook Australian — most natural…") won't
     shrink below min-content inside a flex row — stack it full-width so it can't run off the edge */
  #coachVoiceSel, #soundoutVoiceSel { display: block; width: 100%; margin-left: 0; }
  select, .row select { max-width: 100%; min-width: 0; box-sizing: border-box; }
  .bmon-heardtext, .status, .wordsread { max-width: 100%; overflow-wrap: anywhere; }
  /* iOS auto-zooms any focused input/select under 16px — lift them to 16px */
  select, input[type=text], input[type=email], input[type=search], input[type=number], #shelfSort { font-size: 16px; }
}
/* Notch: /read/ + /read/passage/ opt into viewport-fit=cover; pad so nothing hides under the
   status bar / home indicator (env insets are 0 on non-notch devices). */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.finish { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
/* the collapsed "?" help chip stays legible on the royal-blue nav */
body #bucoo-nav #bn2-help-btn { color: #fff; }