/* theme.css — shared look for every page (Khan Academy Kids–inspired).
   Pages load it before their own <style>, and must not redefine these tokens.
   Fonts: add this to each page's <head>:
   <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> */

:root {
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fredoka", "Nunito", system-ui, sans-serif;

  /* surfaces & text */
  --paper: #F2F6FF;          /* soft sky page background */
  --paper-raised: #FFFFFF;   /* cards */
  --paper-sunk: #F6F8FC;     /* inputs, wells */
  --ink: #21242C; --ink-soft: #5F6577; --ink-faint: #979DAB;
  --rule: #E1E6F0;
  --brand: #1865F2; --brand-bg: #E3EDFF;

  /* feedback / grades (<6 low, <8 mid, else good) */
  --good: #1A9C4B; --good-bg: #DDF6E6;
  --mid: #D17A00;  --mid-bg: #FFF0D2;
  --low: #D9472F;  --low-bg: #FFE4DF;
  --review: #1865F2; --review-bg: #E3EDFF;

  /* subjects */
  --subj-math: #1865F2;     --subj-math-bg: #E3EDFF;
  --subj-thinking: #D63F76; --subj-thinking-bg: #FFE3EE;
  --subj-reading: #2E9A3A;  --subj-reading-bg: #E0F5E2;
  --subj-writing: #E4600B;  --subj-writing-bg: #FFE9D9;

  /* who is logged in (Selective School) */
  --tutor: #7048E8;   --tutor-bg: #EEE8FF;
  --student: #0C9A83; --student-bg: #D9F4EE;
  --on-role: #FFFFFF;

  /* maths path stages */
  --tappa1: #E4600B; --tappa2: #D63F76; --tappa3: #2E9A3A;
  --tappa4: #0C9A83; --tappa5: #1865F2; --tappa6: #7048E8;

  /* decorative background blobs */
  --blob1: #FFE7A8; --blob2: #D6E6FF; --blob3: #FFD9E6; --blob4: #D5F3E9;

  --radius: 20px; --radius-sm: 12px;
  --shadow: 0 2px 0 rgba(33, 36, 44, 0.06), 0 8px 24px rgba(33, 36, 44, 0.06);

  /* aliases used by the maths page */
  --bg: var(--paper); --surface: var(--paper-raised); --border: var(--rule);
  --text: var(--ink); --text-dim: var(--ink-soft);
  --accent: var(--brand); --accent-soft: var(--brand-bg);
  --done: var(--good);
  --grade-low: var(--low); --grade-mid: var(--mid); --grade-good: var(--good);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141722; --paper-raised: #1E2230; --paper-sunk: #181B26;
    --ink: #EEF0F6; --ink-soft: #AEB4C4; --ink-faint: #767D8F; --rule: #2E3344;
    --brand: #6C9DFF; --brand-bg: #1F2B47;
    --good: #5FD08A; --good-bg: #183324; --mid: #F2B347; --mid-bg: #3A2E14;
    --low: #FF8A76; --low-bg: #3D2220; --review: #6C9DFF; --review-bg: #1F2B47;
    --subj-math: #6C9DFF;     --subj-math-bg: #1F2B47;
    --subj-thinking: #FF7AAA; --subj-thinking-bg: #3A1F2C;
    --subj-reading: #6DD27A;  --subj-reading-bg: #1C3320;
    --subj-writing: #FF9A57;  --subj-writing-bg: #3A2618;
    --tutor: #A98BFF; --tutor-bg: #2A2346; --student: #4FD6BE; --student-bg: #163530; --on-role: #141722;
    --tappa1: #FF9A57; --tappa2: #FF7AAA; --tappa3: #6DD27A; --tappa4: #4FD6BE; --tappa5: #6C9DFF; --tappa6: #A98BFF;
    --blob1: #2B2716; --blob2: #1B2540; --blob3: #33202A; --blob4: #16302A;
    --shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --paper: #141722; --paper-raised: #1E2230; --paper-sunk: #181B26;
  --ink: #EEF0F6; --ink-soft: #AEB4C4; --ink-faint: #767D8F; --rule: #2E3344;
  --brand: #6C9DFF; --brand-bg: #1F2B47;
  --good: #5FD08A; --good-bg: #183324; --mid: #F2B347; --mid-bg: #3A2E14;
  --low: #FF8A76; --low-bg: #3D2220; --review: #6C9DFF; --review-bg: #1F2B47;
  --subj-math: #6C9DFF;     --subj-math-bg: #1F2B47;
  --subj-thinking: #FF7AAA; --subj-thinking-bg: #3A1F2C;
  --subj-reading: #6DD27A;  --subj-reading-bg: #1C3320;
  --subj-writing: #FF9A57;  --subj-writing-bg: #3A2618;
  --tutor: #A98BFF; --tutor-bg: #2A2346; --student: #4FD6BE; --student-bg: #163530; --on-role: #141722;
  --tappa1: #FF9A57; --tappa2: #FF7AAA; --tappa3: #6DD27A; --tappa4: #4FD6BE; --tappa5: #6C9DFF; --tappa6: #A98BFF;
  --blob1: #2B2716; --blob2: #1B2540; --blob3: #33202A; --blob4: #16302A;
  --shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
}
/* accent of the page: the logged-in role (see sidebar.js), brand blue before one is chosen */
:root { --role: var(--brand); --role-bg: var(--brand-bg); }
:root[data-role="student"] { --role: var(--student); --role-bg: var(--student-bg); }
:root[data-role="tutor"] { --role: var(--tutor); --role-bg: var(--tutor-bg); }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html {
  background: var(--paper);
  scroll-padding-top: env(safe-area-inset-top, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body {
  margin: 0; min-height: 100%;
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* friendly background shapes, fixed behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 6% 10%, var(--blob1) 0 110px, transparent 111px),
    radial-gradient(circle at 96% 18%, var(--blob2) 0 150px, transparent 151px),
    radial-gradient(circle at 90% 92%, var(--blob3) 0 120px, transparent 121px),
    radial-gradient(circle at 4% 78%, var(--blob4) 0 90px, transparent 91px);
}
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--role) 55%, transparent); outline-offset: 2px; }

/* ---------- shared building blocks ---------- */
.card {
  background: var(--paper-raised); border: 2px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
/* chunky "pressable" buttons with a darker bottom edge */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 14px; border: 2px solid var(--rule);
  background: var(--paper-raised); color: var(--ink);
  font-family: var(--font-head); font-size: 1rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 0 var(--rule); transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--rule); }
.btn.primary {
  background: var(--role); border-color: var(--role); color: var(--on-role);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--role) 65%, #000);
}
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 color-mix(in srgb, var(--role) 65%, #000); }
.btn.danger { color: var(--low); border-color: color-mix(in srgb, var(--low) 45%, var(--rule)); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap;
}

/* ---------- confetti (confetti.js) ---------- */
.confetti-piece {
  position: fixed; top: -12px; width: 10px; height: 14px; border-radius: 3px; z-index: 100; pointer-events: none;
  animation: confetti-fall var(--dur, 1.8s) cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--dx, 0), 105vh) rotate(var(--rot, 540deg)); opacity: 0.9; }
}
