/* Wyatt check-in: design tokens. Space Explorers theme, extended from /workspace/chores-design/tokens.css.
   WebView-safe: plain hex/rgba only. No color-mix(), oklch(), CSS nesting, :has() or 8-digit hex.
   Fonts are the same as the chore app (Google Fonts, or self-host the two families under the same names):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Fredoka:wght@500;600;700&display=swap" rel="stylesheet"> */

:root {
  /* ---- Space (backgrounds), unchanged from the chore kit ---- */
  --space-900: #0B1433;   /* page background, deep navy */
  --space-800: #121D45;   /* header band */
  --space-700: #1A2654;   /* raised dark panel, neutral answer buttons */
  --space-600: #24336B;   /* panel border, empty progress track */

  /* ---- Surfaces & text, unchanged ---- */
  --card:          #F5F7FF; /* question card / answer choices */
  --card-border:   #10183A;
  --ink:           #10183A; /* text on card and on every bright fill */
  --ink-soft:      #4A5578; /* secondary text on card (6.9:1) */
  --on-space:      #FFFFFF; /* text on navy (18:1) */
  --on-space-soft: #B8C4E8; /* secondary text on navy (10.4:1) */

  /* ---- Kit accents, unchanged ---- */
  --rocket-orange: #FF7A1A; /* primary action ("Next", "Start") */
  --planet-teal:   #19C3C8; /* read-aloud */
  --star-yellow:   #FFD23F;
  --alien-green:   #6BDB4B;
  --nebula-purple: #8B5CF6;
  --nebula-strong: #6D3FE6;
  --comet-blue:    #4D8BFF;
  --success:       #2FBF71;

  /* ---- NEW: subject colors. Fill/text on navy, with ink text on top of the fill.
     Contrast: on navy #0B1433 / on panel #1A2654 / ink text on the fill. All pass AA (4.5:1). ---- */
  --subj-reading:   #A98BFF;  /* Lavender "Nebula"  6.7 / 5.4 / ink 6.5 */
  --subj-writing:   #FFD23F;  /* Sun yellow pencil  12.5 / 10.0 / ink 12.0 */
  --subj-science:   #6BDB4B;  /* Alien green flask  10.2 / 8.2 / ink 9.8 */
  --subj-geography: #3BC9F5;  /* Sky-blue globe     9.3 / 7.5 / ink 9.0 */
  /* Darker partners for subject-colored TEXT on the light card (all AA on #F5F7FF) */
  --subj-reading-text:   #6D3FE6; /* 5.6:1 */
  --subj-writing-text:   #8A5A00; /* 5.5:1 */
  --subj-science-text:   #237A2E; /* 5.0:1 */
  --subj-geography-text: #0A6F96; /* 5.3:1 */

  /* ---- NEW: the two neutral "I don't know" answers. Never red, never a cross. ---- */
  --idk-bg:            #1A2654; /* same panel for both: equal weight, no "wrong" color */
  --idk-text:          #FFFFFF; /* 14.5:1 */
  --idk-remember-edge: #8B5CF6; /* matches the ? in icons/dont-remember.svg */
  --idk-taught-edge:   #4D8BFF; /* matches the book in icons/never-taught.svg */
  --idk-selected-bg:   #24336B;

  /* ---- Type (body is never below 20px; Wyatt is 9) ---- */
  --font-display: "Fredoka", "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body:    "Andika", "Lexend", system-ui, -apple-system, sans-serif;
  --fs-label:    1.125rem; /* 18px  progress labels, captions only. Never instructions */
  --fs-body:     1.375rem; /* 22px  body, hints (Andika 400) */
  --fs-answer:   1.5rem;   /* 24px  answer choices (Andika 700) */
  --fs-question: 1.75rem;  /* 28px  the question (Andika 700) */
  --fs-title:    2.25rem;  /* 36px  subject title (Fredoka 600) */
  --fs-hero:     3.5rem;   /* 56px  "Reading done!" (Fredoka 700) */
  --lh-body:  1.45;
  --lh-tight: 1.1;
  /* On iPhone (< 600px wide) step down a notch; body stays >= 20px. See media query below. */

  /* ---- Shape, space, touch ---- */
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px;
  --stroke: 4px;  /* matches icon outlines */
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px;
  --touch-floor: 48px;  /* absolute minimum hit area for ANY control (small icon buttons) */
  --touch-min:   56px;  /* normal buttons (chore-kit value) */
  --touch-lg:    72px;  /* answer choices, Next, read-aloud */
  --shadow-pop: 0 6px 0 var(--ink);
}
@media (max-width: 599px) {
  :root { --fs-body: 1.25rem; --fs-answer: 1.375rem; --fs-question: 1.5rem; --fs-title: 2rem; --fs-hero: 2.75rem; --touch-lg: 64px; }
}

/* ---- Base ---- */
html { background: var(--space-900); color: var(--on-space); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); -webkit-text-size-adjust: 100%; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: .01em; }

/* ---- Subject theming: put .subj--reading etc. on the screen or card wrapper ---- */
.subj--reading   { --subj: var(--subj-reading);   --subj-text: var(--subj-reading-text); }
.subj--writing   { --subj: var(--subj-writing);   --subj-text: var(--subj-writing-text); }
.subj--science   { --subj: var(--subj-science);   --subj-text: var(--subj-science-text); }
.subj--geography { --subj: var(--subj-geography); --subj-text: var(--subj-geography-text); }
.subj-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-floor);
  padding: 0 var(--space-4) 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--subj); color: var(--ink); border: 3px solid var(--ink);
  font: 600 var(--fs-body)/1 var(--font-display); }
.subj-chip img { width: 40px; height: 40px; }
.subj-title { color: var(--subj); font-size: var(--fs-title); margin: 0; }

/* ---- Question card ---- */
.q-card { background: var(--card); color: var(--ink); border: var(--stroke) solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: var(--space-4); }
.q-card__text { font: 700 var(--fs-question)/1.3 var(--font-body); margin: 0; }
.q-card__eyebrow { font: 700 var(--fs-label)/1.2 var(--font-body); color: var(--subj-text, var(--ink-soft)); }

/* ---- Answer choice (light, chunky, like a chore card) ---- */
.answer { display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: var(--touch-lg); padding: var(--space-2) var(--space-4); text-align: left;
  background: var(--card); color: var(--ink); border: var(--stroke) solid var(--ink); border-radius: var(--radius-md);
  box-shadow: 0 4px 0 var(--ink); font: 700 var(--fs-answer)/1.25 var(--font-body); cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease; }
.answer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.answer[aria-pressed="true"], .answer.is-selected { background: #FFF3C4; box-shadow: 0 0 0 4px var(--star-yellow), 0 4px 0 var(--ink); }

/* ---- The two neutral "I don't know" answers: same size and weight as each other, dark panel, colored edge ---- */
.idk { display: flex; align-items: center; gap: var(--space-3); width: 100%;
  min-height: var(--touch-lg); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); text-align: left;
  background: var(--idk-bg); color: var(--idk-text); border: var(--stroke) solid var(--idk-edge, var(--space-600));
  border-radius: var(--radius-md); font: 700 var(--fs-body)/1.25 var(--font-body); cursor: pointer; }
.idk img { width: 52px; height: 52px; flex: none; }
.idk--remember { --idk-edge: var(--idk-remember-edge); }
.idk--taught   { --idk-edge: var(--idk-taught-edge); }
.idk:active { transform: translateY(2px); }
.idk[aria-pressed="true"], .idk.is-selected { background: var(--idk-selected-bg); box-shadow: 0 0 0 4px var(--idk-edge); }

/* ---- Primary + read-aloud buttons ---- */
.btn { min-height: var(--touch-lg); min-width: var(--touch-lg); padding: 0 var(--space-5);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-pill);
  background: var(--rocket-orange); color: var(--ink); font: 600 var(--fs-answer)/1 var(--font-display);
  box-shadow: var(--shadow-pop); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn:disabled { background: var(--space-600); color: var(--on-space-soft); border-color: var(--space-600); box-shadow: none; }
.speak { width: var(--touch-lg); height: var(--touch-lg); flex: none; display: grid; place-items: center; padding: 0;
  border: var(--stroke) solid var(--ink); border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 0 var(--ink); cursor: pointer; }
.speak img { width: 44px; height: 44px; }
.speak.is-speaking { background: #D7F7F8; box-shadow: 0 0 0 4px var(--planet-teal), 0 4px 0 var(--ink); }
.btn:focus-visible, .answer:focus-visible, .idk:focus-visible, .speak:focus-visible { outline: 4px solid var(--star-yellow); outline-offset: 4px; }

/* ---- Progress dots (one per question; no right/wrong colors, just done vs to-go) ---- */
.dots { display: flex; gap: var(--space-1); }
.dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--space-600); }
.dots i.is-done { background: var(--subj, var(--star-yellow)); }
.dots i.is-now { background: var(--on-space); }
/* "Subject done!" animation for celebration/subject-done.svg. WebView-safe: transforms + opacity only, no color-mix/oklch.
   Usage: inline the SVG (so the class names reach its groups) inside <div class="sd-wrap">, then add .is-playing. */
.sd-wrap { width: min(92vw, 640px); margin: 0 auto; }
.sd-wrap svg { display: block; width: 100%; height: auto; }
.sd-wrap .sd-star, .sd-wrap .sd-orbit, .sd-wrap .sd-confetti, .sd-wrap .sd-sparkles, .sd-wrap .sd-rays {
  transform-box: view-box; transform-origin: 400px 300px; }
.sd-wrap.is-playing .sd-star     { animation: sd-pop .7s cubic-bezier(.3,1.6,.5,1) both, sd-wiggle 2.4s .8s ease-in-out infinite; }
.sd-wrap.is-playing .sd-orbit    { animation: sd-spin 9s linear infinite; }
.sd-wrap.is-playing .sd-confetti { animation: sd-burst .9s .1s cubic-bezier(.2,.9,.3,1) both; }
.sd-wrap.is-playing .sd-sparkles { animation: sd-twinkle 1.4s .4s ease-in-out infinite alternate; }
.sd-wrap.is-playing .sd-rays     { animation: sd-spin 30s linear infinite; }
.sd-wrap.is-playing .sd-rocket   { animation: sd-fly 1.1s .2s cubic-bezier(.2,.8,.3,1) both; }
@keyframes sd-pop     { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes sd-wiggle  { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.03); } 75% { transform: rotate(4deg) scale(1.03); } }
@keyframes sd-spin    { to { transform: rotate(360deg); } }
@keyframes sd-burst   { 0% { transform: scale(.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sd-twinkle { 0% { opacity: .35; } 100% { opacity: 1; } }
@keyframes sd-fly     { 0% { transform: translate(-260px, 260px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
.sd-title { margin: 16px 0 0; text-align: center; color: var(--star-yellow, #FFD23F); text-shadow: 0 6px 0 #10183A;
  font: 700 var(--fs-hero, 56px)/1 var(--font-display, "Fredoka", system-ui, sans-serif);
  animation: sd-title .6s .3s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes sd-title { 0% { transform: translateY(24px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sd-wrap.is-playing .sd-star, .sd-wrap.is-playing .sd-orbit, .sd-wrap.is-playing .sd-confetti,
  .sd-wrap.is-playing .sd-sparkles, .sd-wrap.is-playing .sd-rays, .sd-wrap.is-playing .sd-rocket, .sd-title { animation: none; }
}