/* ============================================================================
   Grade Mode — the kid-facing, grade-forward surface for qabasia.com.
   Aesthetic: "warm spark-lit picture book." Cream canvas, big tactile grade
   tiles in a single-hue gold→ember ramp (brand-keyed, NOT rainbow), the ember
   spark as the one sharp accent. Big touch targets for small hands; the brand
   tokens (--tsf-*) drive everything. Loaded on home, grade homes, parent gate.
   ============================================================================ */

:root {
  --kid-cream:    #FBF6EE;   /* warm canvas, matches the kindergarten world   */
  --kid-cream-2:  #F4ECDE;   /* slightly deeper cream for wells / footers     */
  --kid-card:     #FFFFFF;
  --kid-ink:      var(--tsf-graphite);
  --kid-soft:     #8A8175;   /* warm stone for sublabels                      */
  --kid-ring:     rgba(226,103,12,.38);
}

/* Warm the whole page only when the calm kid nav is present (no base.html edit). */
body:has(.kid-nav)   { background: var(--kid-cream); }
body:has(.parent-gate){ background: var(--kid-cream); }

/* ── Calm kid nav ─────────────────────────────────────────────────────────── */
.kid-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tsf-space-md);
  padding: 14px clamp(16px, 5vw, 40px);
  background: rgba(251,246,238,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(184,78,8,.10);
}
.kid-nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.kid-nav__brand img { height: 30px; width: auto; display: block; }
.kid-nav__grownups {
  font-family: var(--tsf-font); font-size: var(--tsf-small); font-weight: 600;
  color: var(--kid-soft); text-decoration: none;
  padding: 8px 16px; border-radius: var(--tsf-radius-full);
  border: 1px solid transparent; transition: all var(--tsf-transition);
}
.kid-nav__grownups:hover { color: var(--tsf-graphite); border-color: var(--tsf-border); background: var(--kid-card); }

/* ── The picker hero (the homepage IS the picker) ─────────────────────────── */
.kid-hero { padding: clamp(28px, 6vw, 64px) clamp(16px, 5vw, 40px) clamp(24px, 4vw, 40px); }
.kid-hero__inner { max-width: 64rem; margin: 0 auto; text-align: center; }
.kid-hero__welcome {
  font-size: var(--tsf-small); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tsf-sky); margin: 0 0 10px;
}
.kid-hero__title {
  font-family: var(--tsf-font); font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
  font-size: clamp(2.25rem, 6vw, 3.5rem); color: var(--kid-ink); margin: 0;
}
.kid-hero__sub { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--kid-soft); margin: 12px 0 0; }

/* ── Grade tiles ──────────────────────────────────────────────────────────── */
.grade-picker { margin-top: clamp(24px, 4vw, 44px); }
.grade-picker__grid {
  display: grid; gap: clamp(12px, 1.8vw, 18px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 60rem; margin: 0 auto;
}
@media (max-width: 760px){ .grade-picker__grid { grid-template-columns: repeat(2, 1fr); } }

.grade-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  min-height: clamp(108px, 15vw, 138px);
  padding: 18px; border-radius: var(--tsf-radius-lg);
  background: var(--kid-card); border: 1px solid var(--tsf-border);
  text-decoration: none; color: var(--kid-ink);
  box-shadow: var(--tsf-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: tile-rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.grade-tile__spark {
  position: absolute; top: 16px; right: 16px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--g, var(--tsf-sky));
  box-shadow: 0 0 0 0 var(--g, var(--tsf-sky)); transition: box-shadow .25s ease, transform .25s ease;
}
.grade-tile__label { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.grade-tile__meta  { margin-top: 4px; font-size: var(--tsf-xs); font-weight: 600; color: var(--kid-soft); }

.grade-tile::after {            /* warm wash that blooms from the spark on hover */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120px 90px at 85% 12%, color-mix(in srgb, var(--g, var(--tsf-sky)) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity .22s ease;
}
.grade-tile:hover, .grade-tile:focus-visible {
  transform: translateY(-4px); border-color: var(--g, var(--tsf-sky));
  box-shadow: 0 12px 26px rgba(184,78,8,.16); outline: none;
}
.grade-tile:hover .grade-tile__spark, .grade-tile:focus-visible .grade-tile__spark {
  box-shadow: 0 0 14px 2px var(--g, var(--tsf-sky)); transform: scale(1.12);
}
.grade-tile:hover::after, .grade-tile:focus-visible::after { opacity: 1; }
.grade-tile:active { transform: translateY(-1px); }

/* Single-hue gold→ember ramp (brand-keyed wayfinding, not rainbow). */
.grade-tile--g0 { --g:#F5C56B; } .grade-tile--g1 { --g:#F2B454; }
.grade-tile--g2 { --g:#EFA23E; } .grade-tile--g3 { --g:#EC8F2C; }
.grade-tile--g4 { --g:#E97D1C; } .grade-tile--g5 { --g:#E2670C; }
.grade-tile--g6 { --g:#CF5A0A; } .grade-tile--g7 { --g:#B84E08; }

/* staggered load */
.grade-tile:nth-child(1){animation-delay:.02s}.grade-tile:nth-child(2){animation-delay:.06s}
.grade-tile:nth-child(3){animation-delay:.10s}.grade-tile:nth-child(4){animation-delay:.14s}
.grade-tile:nth-child(5){animation-delay:.18s}.grade-tile:nth-child(6){animation-delay:.22s}
.grade-tile:nth-child(7){animation-delay:.26s}.grade-tile:nth-child(8){animation-delay:.30s}
@keyframes tile-rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }

.grade-picker__foot { margin-top: clamp(20px, 3vw, 32px); }
.grade-picker__skip {
  display: inline-block; font-size: var(--tsf-body); font-weight: 600;
  color: var(--kid-soft); text-decoration: none; padding: 10px 18px; border-radius: var(--tsf-radius-full);
  transition: color var(--tsf-transition), background var(--tsf-transition);
}
.grade-picker__skip:hover { color: var(--tsf-graphite); background: var(--kid-cream-2); }

/* ── Grade home ───────────────────────────────────────────────────────────── */
.grade-home { max-width: var(--tsf-max-width); margin: 0 auto; padding: clamp(24px,4vw,40px) clamp(16px,5vw,24px); }
.grade-home__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--tsf-space-md);
  flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px);
}
.grade-home__head h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0; }
.grade-home__sub { margin: 6px 0 0; color: var(--kid-soft); font-size: var(--tsf-body); font-weight: 500; }

/* change-grade as a friendly pill dropdown (large on the grade home) */
.change-grade { position: relative; }
.change-grade > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tsf-font); font-weight: 700; color: var(--tsf-graphite);
  background: var(--kid-card); border: 1.5px solid var(--tsf-border); border-radius: var(--tsf-radius-full);
  box-shadow: var(--tsf-shadow-sm); transition: all var(--tsf-transition);
}
.change-grade > summary::-webkit-details-marker { display: none; }
.change-grade > summary::after { content: "▾"; font-size: .8em; color: var(--tsf-sky); }
.change-grade--large > summary { padding: 12px 22px; font-size: var(--tsf-body); }
.change-grade > summary:hover { border-color: var(--tsf-sky); color: var(--tsf-sky); }
.change-grade[open] > summary { border-color: var(--tsf-sky); }
.change-grade > nav {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  padding: 10px; min-width: 240px;
  background: var(--kid-card); border: 1px solid var(--tsf-border);
  border-radius: var(--tsf-radius-md); box-shadow: var(--tsf-shadow-lg);
}
.change-grade > nav a {
  text-align: center; padding: 10px 12px; border-radius: var(--tsf-radius-sm);
  font-weight: 700; color: var(--kid-ink); text-decoration: none; transition: all var(--tsf-transition);
}
.change-grade > nav a:hover { background: var(--kid-cream); color: var(--tsf-sky); }

/* small floating variant (over an activity) — available for P2/P3 surfaces */
.change-grade--float { position: fixed; right: 18px; bottom: 18px; z-index: 60; }
.change-grade--float > summary { padding: 10px 16px; font-size: var(--tsf-small); }

.more-coming {
  grid-column: 1 / -1; text-align: center; color: var(--kid-soft);
  background: var(--kid-card); border: 1px dashed var(--tsf-border); border-radius: var(--tsf-radius-lg);
  padding: clamp(28px, 6vw, 56px); font-size: var(--tsf-h4); font-weight: 600;
}

/* books row */
.grade-home__books { font-size: var(--tsf-h3); font-weight: 800; margin: clamp(28px,4vw,40px) 0 14px; }
.book-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.book-card {
  display: inline-flex; align-items: center; padding: 12px 18px;
  background: var(--kid-card); border: 1px solid var(--tsf-border); border-radius: var(--tsf-radius-full);
  font-weight: 600; color: var(--kid-ink); text-decoration: none; box-shadow: var(--tsf-shadow-sm);
  transition: all var(--tsf-transition);
}
.book-card::before { content: "📖"; margin-right: 8px; }
.book-card:hover { border-color: var(--tsf-sky); color: var(--tsf-sky); transform: translateY(-2px); }

/* featured-on-kid-home heading spacing */
.kid-featured { max-width: var(--tsf-max-width); margin: clamp(8px,2vw,20px) auto 0; padding: 0 clamp(16px,5vw,24px) clamp(32px,5vw,56px); }
.kid-featured .section-header { text-align: center; margin-bottom: clamp(16px,2.5vw,24px); }
.kid-featured .section-header h2 { font-weight: 800; letter-spacing: -.01em; }

/* ── Continue card (returning learner) ────────────────────────────────────── */
.kid-continue {
  max-width: 40rem; margin: clamp(20px,3vw,28px) auto 0; text-align: left;
  background: var(--kid-card); border: 1px solid var(--tsf-border); border-radius: var(--tsf-radius-lg);
  padding: 20px 24px; box-shadow: var(--tsf-shadow-sm);
}

/* ── Parent gate ──────────────────────────────────────────────────────────── */
.parent-gate {
  max-width: 30rem; margin: clamp(8vh,12vh,16vh) auto; text-align: center;
  background: var(--kid-card); border: 1px solid var(--tsf-border); border-radius: var(--tsf-radius-lg);
  padding: clamp(28px, 5vw, 44px); box-shadow: var(--tsf-shadow-lg);
}
.parent-gate__badge {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--tsf-radius-full);
  display: grid; place-items: center; font-size: 26px;
  background: var(--kid-cream); border: 1px solid rgba(184,78,8,.15);
}
.parent-gate h1 { font-size: var(--tsf-h3); font-weight: 800; margin: 0 0 6px; }
.parent-gate p  { color: var(--kid-soft); margin: 0 0 22px; }
.parent-gate__q {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 800; color: var(--kid-ink);
}
.parent-gate__q input {
  width: 4.5rem; font-size: inherit; font-weight: 800; text-align: center;
  padding: 8px 10px; border: 2px solid var(--tsf-border); border-radius: var(--tsf-radius-md);
  font-family: var(--tsf-font); color: var(--tsf-graphite); background: var(--kid-cream);
}
.parent-gate__q input:focus { outline: none; border-color: var(--tsf-sky); background: var(--kid-card); }
.parent-gate form > div { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .grade-tile { animation: none; }
  .grade-tile, .grade-tile__spark, .book-card, .grade-picker__skip { transition: none; }
}