/* public/css/kids-learning.css
 * Kids Learning's own child-friendly content area, living INSIDE the existing
 * TotsName Video & Music shell (header/footer/nav are untouched — see
 * views/partials/header.ejs / footer.ejs, included as-is by every kl- page).
 * Everything here is namespaced .kl- so it can never leak onto, or be
 * affected by, any other page on the site — the same discipline the
 * existing .vm- library styles already use.
 *
 * BIG VISUAL REQUIREMENT (brief section 8): large images, large buttons,
 * large text, generous spacing, big touch targets (min 64px) throughout.
 */

/* These custom properties are declared on :root, NOT `.kl-shell`, even though
 * every consumer is namespaced .kl- (still safe: no other stylesheet on the
 * site defines a --kl-* name, so nothing leaks or collides). This matters
 * because the learner-setup modal (#kl-setup-modal) is appended as a SIBLING
 * of `.vm > .kl-shell`, not a descendant of it — found during visual QA when
 * every themed color inside the modal (pressed chips, the Continue/Skip
 * buttons) silently resolved to transparent/white because `var(--kl-primary)`
 * etc had nothing to inherit from outside `.kl-shell`. Declaring them on
 * :root means any .kl- element anywhere in the page can resolve them
 * regardless of where it sits in the DOM. */
:root{ --kl-primary:#E17741; --kl-teal:#45949C; --kl-ink:#332217; --kl-muted:#75665A;
  --kl-surface:#FEFAF1; --kl-card:#FFFFFF; --kl-border:#E6DFD3; --kl-good:#3FA66B; --kl-bad:#D9564A; }
.kl-shell{ max-width:1180px; margin:0 auto; padding:1.5rem 1rem 4rem; color:var(--kl-ink); }
@media (min-width:768px){ .kl-shell{ padding:2.5rem 1.5rem 5rem; } }

.kl-shell *, .kl-modal-backdrop *{ box-sizing:border-box; }
.kl-shell img, .kl-modal-backdrop img{ max-width:100%; display:block; }
.kl-shell button, .kl-modal-backdrop button{ font-family:inherit; cursor:pointer; }

/* ---------------------------------------------------------------- top bar */
.kl-topbar{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  justify-content:space-between; margin-bottom:1.5rem; }
.kl-badge{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700;
  font-size:.9rem; padding:.5rem .9rem; border-radius:999px; background:var(--kl-card);
  border:1px solid var(--kl-border); }
.kl-badge.kl-badge-active{ background:#E9F7EF; border-color:#BFE6CE; color:#1F6B41; }
/* "Balance" (what the family owns) is deliberately styled DIFFERENTLY from a
 * session's "cost" (what THIS unlock takes) everywhere in the UI, so no one
 * mistakes a large balance number for the price of playing (brief: "must not
 * make the balance look like the activity's cost"). Balance = calm teal
 * pill; cost = the same warm/orange treatment as every other price on
 * TotsName. See .kl-btn-session-cost below for the session-start button. */
.kl-badge.kl-badge-balance{ background:#EAF6F7; border-color:#BFE1E3; color:#1F5F63; }
.kl-badge.kl-badge-credits{ background:#FFF3E0; border-color:#F3D9AE; color:#8A5A16; }
.kl-badge.kl-badge-cost{ background:#FFF3E0; border-color:#F3D9AE; color:#8A5A16; }
.kl-lang-toggle{ display:inline-flex; border-radius:999px; overflow:hidden; border:2px solid var(--kl-border); }
.kl-lang-toggle a{ padding:.5rem 1rem; font-weight:700; font-size:.9rem; text-decoration:none;
  color:var(--kl-muted); background:var(--kl-card); min-height:44px; display:flex; align-items:center; }
.kl-lang-toggle a[aria-current="true"]{ background:var(--kl-primary); color:#fff; }

/* ------------------------------------------------------------------- hero */
.kl-hero{ text-align:center; padding:2.5rem 1.25rem; border-radius:1.75rem; margin-bottom:2rem;
  background:linear-gradient(135deg,#FCEBD5,#E9F5F1); }
.kl-hero h1{ font-size:clamp(2rem,5.5vw,3.1rem); margin:.25rem 0; font-weight:800; }
.kl-hero p{ font-size:1.15rem; color:var(--kl-muted); max-width:38rem; margin:.5rem auto 1.5rem; }
.kl-journey-line{ font-weight:700; color:var(--kl-ink) !important; font-size:1.05rem !important; }
.kl-hero-scene{ padding-top:0; overflow:hidden; }
.kl-hero-art{ width:100%; max-height:280px; object-fit:cover; border-radius:1.75rem 1.75rem 0 0;
  margin-bottom:1.5rem; display:block; }
/* Plain contextual welcome banner — NOT a second "Totsy" character. The one
   and only Totsy is the site-wide AI assistant mounted via partials/footer;
   this is just a friendly, server-personalised line of copy on the page. */
.kl-welcome-banner{ display:inline-flex; align-items:center; gap:.9rem; background:#fff;
  border-radius:1.75rem; padding:1.1rem 1.5rem; box-shadow:0 6px 20px rgba(51,34,23,.08);
  font-size:1.2rem; font-weight:700; max-width:38rem; margin:0 auto 1.25rem; text-align:left; }
.kl-welcome-icon{ font-size:3rem; flex:none; }

/* ----------------------------------------------------------- big buttons */
.kl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:64px; padding:1rem 1.75rem; border-radius:1.25rem; font-size:1.15rem; font-weight:800;
  border:none; text-decoration:none; color:#fff; background:var(--kl-primary);
  box-shadow:0 6px 0 #A85527; transition:transform .12s, box-shadow .12s; }
.kl-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 #A85527; }
.kl-btn.kl-btn-ghost{ background:#fff; color:var(--kl-ink); border:2px solid var(--kl-border);
  box-shadow:0 4px 0 var(--kl-border); }
.kl-btn.kl-btn-teal{ background:var(--kl-teal); box-shadow:0 6px 0 #2E6A70; }
/* The session-START button always shows its 🎟️10-credit COST, styled with
 * the same amber/orange "price" tone as .kl-badge-cost — visually distinct
 * from the calm teal "balance" badge beside it, per the brief's explicit
 * requirement that the two never look like the same kind of number. */
.kl-btn.kl-btn-session-cost{ background:#E4A11B; box-shadow:0 6px 0 #A87614; }
.kl-btn[disabled]{ opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
.kl-btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ------------------------------------------------------------ islands grid */
.kl-section-head{ text-align:center; max-width:40rem; margin:0 auto 1.5rem; }
.kl-section-head h2{ font-size:clamp(1.4rem,3.5vw,1.9rem); margin:.25rem 0; }
.kl-section-head p{ color:var(--kl-muted); margin:.25rem 0 0; }

.kl-islands{ display:grid; gap:1.5rem; grid-template-columns:repeat(1,1fr); list-style:none; margin:0 0 2.5rem; padding:0; }
@media (min-width:560px){ .kl-islands{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .kl-islands{ grid-template-columns:repeat(3,1fr); } }
.kl-island{ position:relative; display:block; border-radius:1.5rem; padding:0 0 1.5rem;
  background:var(--kl-card); border:1px solid var(--kl-border); text-decoration:none; color:inherit;
  min-height:180px; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.kl-island.kl-live{ box-shadow:0 8px 24px rgba(51,34,23,.06); }
.kl-island.kl-live:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(51,34,23,.12); }
.kl-island.kl-soon{ opacity:.8; cursor:default; }
/* PRIMARY artwork: a large illustrated badge (see data/kidsLearning/islands.js
 * `image`), never a small emoji glyph. The emoji is kept only as a tiny
 * supplementary marker inline with the title. */
.kl-island-art{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; margin-bottom:1rem; }
.kl-island h3{ font-size:1.25rem; margin:.25rem 1.25rem .25rem; display:flex; align-items:center; gap:.4rem; }
.kl-island-icon-badge{ font-size:1.1rem; }
.kl-island p{ font-size:.95rem; color:var(--kl-muted); margin:0 1.25rem .75rem; line-height:1.55; }
.kl-island-cta{ font-weight:800; font-size:1rem; margin:0 1.25rem; display:inline-block; }
.kl-island.kl-soon .kl-soon-chip{ margin:0 1.25rem; }
.kl-soon-chip{ display:inline-block; font-size:.8rem; font-weight:700; padding:.3rem .7rem;
  border-radius:999px; background:#F1EDE4; color:var(--kl-muted); }

/* ------------------------------------------------------------ learner setup */
/* NOTE: an author stylesheet's `display` always beats the browser's built-in
 * `[hidden]{display:none}` default, even at equal selector specificity — so
 * this rule MUST explicitly stay off while the `hidden` attribute is set, or
 * the modal renders as a permanent full-page overlay that blocks every click
 * on the entry page (found during visual QA: the setup modal was covering
 * the whole page for every visitor, signed in or not, before this guard). */
.kl-modal-backdrop[hidden]{ display:none !important; }
.kl-modal-backdrop{ position:fixed; inset:0; background:rgba(51,34,23,.45); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:640px){ .kl-modal-backdrop{ align-items:center; } }
.kl-modal{ background:#fff; width:100%; max-width:38rem; border-radius:1.5rem 1.5rem 0 0;
  padding:1.75rem 1.5rem 2rem; max-height:92vh; overflow:auto; }
@media (min-width:640px){ .kl-modal{ border-radius:1.5rem; } }
.kl-modal h2{ margin:0 0 .25rem; font-size:1.55rem; }
.kl-modal p{ color:var(--kl-muted); margin:.25rem 0 1rem; font-size:1.05rem; }
.kl-field{ margin-bottom:1.25rem; }
.kl-field label{ display:block; font-weight:700; margin-bottom:.5rem; }
.kl-field input[type=text]{ width:100%; min-height:56px; border-radius:.9rem; border:2px solid var(--kl-border);
  padding:0 1.1rem; font-size:1.1rem; }
.kl-chip-grid{ display:flex; flex-wrap:wrap; gap:.65rem; }
.kl-chip{ min-height:56px; padding:0 1.2rem; border-radius:999px; border:2px solid var(--kl-border);
  background:#fff; font-weight:700; font-size:1rem; display:inline-flex; align-items:center; }
.kl-chip[aria-pressed="true"]{ background:var(--kl-primary); border-color:var(--kl-primary); color:#fff; }

/* --------------------------------------------------------------- course grid */
.kl-courses{ display:grid; gap:1.25rem; grid-template-columns:repeat(1,1fr); list-style:none; margin:0 0 2rem; padding:0; }
@media (min-width:640px){ .kl-courses{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .kl-courses{ grid-template-columns:repeat(3,1fr); } }
.kl-course{ border-radius:1.5rem; padding:0 0 1.4rem; background:var(--kl-card); border:1px solid var(--kl-border);
  display:flex; flex-direction:column; gap:.6rem; min-height:190px; overflow:hidden; }
.kl-course-art{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.kl-course h3{ margin:.2rem 1.25rem 0; font-size:1.2rem; display:flex; align-items:center; gap:.4rem; }
.kl-course-icon-badge{ font-size:1.05rem; }
.kl-course-meta{ font-size:.9rem; color:var(--kl-muted); margin:0 1.25rem; }
.kl-progress-bar{ height:10px; border-radius:999px; background:#EFE7D8; overflow:hidden; }
.kl-progress-bar > span{ display:block; height:100%; background:var(--kl-good); border-radius:999px; }
.kl-course .kl-progress-bar{ margin:0 1.25rem; width:auto; }
.kl-course-actions{ margin:auto 1.25rem 0; }
.kl-pill-done{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; color:#1F6B41; font-size:.95rem; }
.kl-pill-locked{ color:var(--kl-muted); font-size:.9rem; }
.kl-course > p, .kl-course > .kl-soon-chip{ margin-left:1.25rem; margin-right:1.25rem; }

/* ------------------------------------------------------- certificate progress */
.kl-cert-progress{ background:linear-gradient(135deg,#FFF7E8,#F3F9F4); border:1px solid var(--kl-border);
  border-radius:1.5rem; padding:1.5rem 1.5rem 1.75rem; margin-bottom:2rem; }
.kl-cert-progress-row{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; }
.kl-cert-progress-label{ display:block; font-size:.8rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--kl-muted); margin-bottom:.35rem; }
.kl-cert-progress-badge{ font-size:1.3rem; font-weight:800; }
.kl-cert-progress-missing ul{ margin:0; padding-left:1.2rem; font-size:1rem; line-height:1.7; }

/* -------------------------------------------------------------- activity UI */
.kl-activity-head{ text-align:center; margin-bottom:1.5rem; }
.kl-activity-head h1{ font-size:clamp(1.65rem,4.5vw,2.3rem); margin:.25rem 0; }
.kl-instructions{ font-size:1.15rem; color:var(--kl-muted); max-width:36rem; margin:0 auto; }
.kl-progress-line{ display:flex; align-items:center; justify-content:center; gap:1rem; margin:1rem 0 2rem; font-weight:700; font-size:1.05rem; }
.kl-progress-line .kl-progress-bar{ width:220px; max-width:50vw; }

.kl-question{ text-align:center; margin-bottom:2rem; }
.kl-subject-image{ width:280px; height:280px; max-width:78vw; max-height:44vh; margin:0 auto 1.25rem;
  object-fit:contain; filter:drop-shadow(0 10px 18px rgba(51,34,23,.15)); }
.kl-sound-panel{ background:var(--kl-card); border:1px solid var(--kl-border); border-radius:1.5rem;
  padding:2rem; max-width:28rem; margin:0 auto 1.25rem; }
.kl-sound-word{ font-size:3rem; font-weight:900; color:var(--kl-primary); margin:.75rem 0; letter-spacing:.03em; }
.kl-sound-label{ font-size:1.2rem; color:var(--kl-muted); }
.kl-prompt{ font-size:1.5rem; font-weight:700; max-width:36rem; margin:0 auto 1.25rem; line-height:1.5; }
.kl-genius-visual{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center;
  max-width:28rem; margin:0 auto 1.25rem; font-size:2.8rem; min-height:3.5rem; }
.kl-genius-visual .kl-fade{ opacity:.25; }

.kl-options{ display:grid; gap:1.1rem; grid-template-columns:repeat(2,1fr); max-width:46rem; margin:0 auto; }
@media (min-width:640px){ .kl-options.kl-options-4{ grid-template-columns:repeat(4,1fr); } }
.kl-options.kl-options-numeric{ grid-template-columns:repeat(4,1fr); max-width:32rem; }
.kl-option{ min-height:100px; border-radius:1.25rem; border:3px solid var(--kl-border); background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  font-size:1.25rem; font-weight:800; padding:.9rem; transition:transform .12s, border-color .12s; }
.kl-option img{ width:76px; height:76px; object-fit:contain; }
.kl-option:hover{ transform:translateY(-2px); border-color:var(--kl-teal); }
.kl-option[aria-pressed="true"]{ border-color:var(--kl-primary); }
.kl-option.kl-correct{ border-color:var(--kl-good); background:#EAF8EF; }
.kl-option.kl-wrong{ border-color:var(--kl-bad); background:#FCEBE9; }
.kl-option[disabled]{ opacity:.6; }

.kl-feedback{ text-align:center; max-width:36rem; margin:1.5rem auto 0; padding:1.4rem 1.6rem;
  border-radius:1.25rem; font-size:1.15rem; }
.kl-feedback.kl-good{ background:#EAF8EF; color:#1F6B41; }
.kl-feedback.kl-bad{ background:#FFF6EC; color:#8A5A16; }
.kl-feedback h3{ margin:0 0 .4rem; font-size:1.3rem; }
.kl-hint-box{ margin-top:1rem; background:#F1EDE4; border-radius:1rem; padding:1.1rem 1.4rem; font-size:1.05rem; }

.kl-summary{ text-align:center; padding:2rem 1.5rem; }
.kl-summary .kl-score{ font-size:3.4rem; font-weight:900; color:var(--kl-primary); }
.kl-confetti{ font-size:2.75rem; letter-spacing:.5rem; margin-bottom:.5rem; }
.kl-course-done-msg{ font-size:1.15rem; font-weight:700; color:#1F6B41; }

/* --------------------------------------------------------------- upgrade */
.kl-upgrade-card{ max-width:34rem; margin:3rem auto; text-align:center; background:var(--kl-card);
  border-radius:1.75rem; padding:2.5rem 1.75rem; border:1px solid var(--kl-border); }
.kl-upgrade-card .kl-emoji{ font-size:3rem; }
.kl-upgrade-card h1{ font-size:1.5rem; margin:.5rem 0; }
.kl-upgrade-card p{ color:var(--kl-muted); line-height:1.7; }
.kl-upgrade-hi{ font-size:1.05rem; margin:1rem 0; }

/* --------------------------------------------------------------- certificate */
.kl-cert{ max-width:52rem; margin:2rem auto; background:#FEFCF6; border:6px solid var(--kl-primary);
  border-radius:1.5rem; padding:3rem 2rem; text-align:center; position:relative; }
.kl-cert:before{ content:""; position:absolute; inset:10px; border:1.5px solid var(--kl-teal); border-radius:1.1rem; pointer-events:none; }
.kl-cert-badge{ font-size:3.5rem; }
.kl-cert h1{ font-size:1.6rem; margin:.5rem 0 1.5rem; }
.kl-cert-name{ font-size:2rem; font-weight:900; margin:.5rem 0; }
.kl-cert-course{ font-size:1.3rem; font-weight:700; color:var(--kl-primary); margin:.25rem 0 1rem; }
.kl-cert-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; margin:1.5rem 0; }
.kl-cert-grid div{ min-width:9rem; }
.kl-cert-grid .kl-cert-label{ font-size:.8rem; color:var(--kl-muted); text-transform:uppercase; letter-spacing:.06em; }
.kl-cert-grid .kl-cert-value{ font-size:1.3rem; font-weight:800; }
.kl-not-eligible{ max-width:34rem; margin:0 auto; }

/* --------------------------------------------------------------- parent area */
.kl-parent-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(1,1fr); }
@media (min-width:720px){ .kl-parent-grid{ grid-template-columns:repeat(3,1fr); } }
.kl-stat-card{ background:var(--kl-card); border:1px solid var(--kl-border); border-radius:1.25rem; padding:1.25rem; text-align:center; }
.kl-stat-card .kl-stat-num{ font-size:2rem; font-weight:900; color:var(--kl-primary); }
.kl-parent-table{ width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; }
.kl-parent-table th, .kl-parent-table td{ text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--kl-border); }
.kl-tag-weak{ color:#B24A3B; font-weight:700; }
.kl-tag-mastered{ color:#1F6B41; font-weight:700; }

@media (prefers-reduced-motion:reduce){
  .kl-island.kl-live:hover{ transform:none; }
  .kl-btn{ transition:none; }
}