/* ==========================================================================
   kids.css  --  Mr Martin for Kids  --  kid-friendly UI layer
   Owner: Agent E3.  Created 2026-06-15.

   LOCKED RULES HONORED:
     - No black + red palette (RULE 32/37)
     - Dark navy backgrounds, NO white backgrounds (RULE 37)
     - 15-px minimum padding on containers (RULE 36)
     - 60-px minimum touch targets for kids (bigger than elder 44px)
     - Solid text only (no shadows / outlines)
     - State-as-label toggle buttons
     - Bilingual EN/ES from day one

   COLOR PHILOSOPHY:
     Dark navy base + bright pastels for kids.  Friendly, not neon.
     Each age band has a distinct pastel family so the child "feels"
     their band immediately.
   ========================================================================== */

/* ---------- ROOT VARIABLES ---------- */
:root {
  /* Page chrome */
  --kids-bg:           #0e2247;     /* dark navy, page background */
  --kids-fg:           #e8f0ff;     /* very light blue, body text */
  --kids-heading:      #fff3a8;     /* soft yellow, headings */
  --kids-subhead:      var(--elder-subhead);     /* light pink, sub-headings */

  /* Panels / cards */
  --kids-panel:        var(--navy-5);     /* navy, chrome bars */
  --kids-card-bg:      var(--btn-deep);     /* deep purple, cards */
  --kids-card-fg:      #e8f0ff;     /* light text in cards */
  --kids-card-border:  var(--purple-2);     /* subtle borders */

  /* Inputs */
  --kids-input-bg:     var(--navy-8);

  /* Buttons (cross-family pairing like elder) */
  --kids-btn-bg:       #3a6bc5;     /* friendly blue */
  --kids-btn-fg:       #ffffff;
  --kids-btn2-bg:      var(--btn-deep);     /* secondary: deep purple */
  --kids-btn2-fg:      #fff3a8;     /* yellow text */

  /* Links */
  --kids-link:         #fff3a8;     /* yellow on dark */
  --kids-link-card:    var(--elder-subhead);     /* pink inside cards */

  /* Accent colors */
  --kids-success:      #4caf50;
  --kids-warning:      #ffc107;
  --kids-danger:       #e53935;     /* only for destructive / emergency */

  /* Muted */
  --kids-muted:        var(--muted-6);

  /* Typography */
  --kids-base-size:    20px;        /* bigger than elder for kids */
  --kids-font:         'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* Age band accent colors */
  --band-sprouts:      var(--mint-pale);     /* mint green, 3-5 */
  --band-roots:        var(--peach);     /* peach, 5-8 */
  --band-branches:     var(--lilac-3);     /* lavender, 8-11 */
  --band-sky:          var(--baby-blue);     /* soft sky, 11-14 */

  /* ── Persona color themes (Persona Refinement 2026-06-15) ──────────── */
  /* Miss Dora: bright mint + warm peach + sky pastel (playful warm) */
  --persona-dora-primary:   var(--mint-pale);
  --persona-dora-secondary: var(--peach);
  --persona-dora-accent:    var(--baby-blue);
  /* Dr. Albert: cool deep blue + cream + soft amber (mature but warm) */
  --persona-albert-primary: #2c5282;
  --persona-albert-secondary: #f4e7c3;
  --persona-albert-accent:  #e8b84a;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  background: var(--kids-bg);
  color: var(--kids-fg);
  font-family: var(--kids-font);
  font-size: var(--kids-base-size);
  line-height: 1.5;
}

/* ---------- LAYOUT ---------- */
.kids-shell {
  display: flex;
  min-height: 100vh;
}

.kids-sidebar {
  width: 220px;
  background: var(--kids-panel);
  border-right: 2px solid var(--kids-card-border);
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 900;
  overflow-y: auto;
  transition: transform 0.25s ease;
}

.kids-sidebar .brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 10px 15px 18px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--kids-heading);
  text-decoration: none;
}
.kids-sidebar .brand .brand-main {
  font-size: 1.05rem;
  line-height: 1.2;
}
.kids-sidebar .brand .brand-sub {
  display: block;
  width: 100%;
  padding-left: 30px; /* clear heart icon */
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--kids-subhead);
  line-height: 1.2;
}
.kids-sidebar .brand .dot {
  font-size: 1.4rem;
  color: #ff6b8a;
}

.kids-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  min-height: 60px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kids-fg);
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.kids-nav-item:hover {
  background: rgba(255,255,255,0.06);
}
.kids-nav-item.active {
  border-left-color: var(--kids-heading);
  background: rgba(255,243,168,0.1);
  color: var(--kids-heading);
}
.kids-nav-item .ic {
  font-size: 1.4rem;
  min-width: 28px;
  text-align: center;
}

.kids-sidebar .spacer { flex: 1; }

.kids-content {
  flex: 1;
  margin-left: 220px;
  min-width: 0;
}

/* ---------- TOP BAR ---------- */
.kids-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--kids-panel);
  border-bottom: 2px solid var(--kids-card-border);
  min-height: 56px;
  flex-wrap: wrap;
}
.kids-topbar .kids-wordmark {
  font-size: 1rem;
  font-weight: 800;
  color: var(--kids-heading);
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
.kids-topbar .kids-wordmark .wordmark-sub {
  display: block;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--kids-subhead);
  line-height: 1.2;
}

/* HELP bar: far top-right (LOCKED RULE) */
.kids-help-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

/* Second strip: A-/A+/contrast/voice */
.kids-substrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 20px;
  background: var(--kids-panel);
  border-bottom: 1px solid var(--kids-card-border);
  flex-wrap: wrap;
}
.kids-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--kids-fg);
  background: transparent;
  border: 1px solid var(--kids-card-border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.kids-ctrl:hover {
  background: rgba(255,255,255,0.08);
}
.kids-ctrl .lbl {
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Old .kids-greet moved to persona-aware section below BADGE HERO. */

/* ---------- MAIN CONTENT ---------- */
.kids-main {
  padding: 20px;
  min-height: 50vh;
}

/* ---------- CARDS ---------- */
.kids-card {
  background: var(--kids-card-bg);
  color: var(--kids-card-fg);
  border: 1px solid var(--kids-card-border);
  border-radius: 16px;
  padding: 20px;
}

.kids-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Module card (dashboard tiles) */
.kids-module-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--kids-card-bg);
  border: 2px solid var(--kids-card-border);
  border-radius: 20px;
  padding: 24px 16px;
  min-height: 160px;
  text-decoration: none;
  color: var(--kids-card-fg);
  transition: transform 0.1s, border-color 0.15s;
  cursor: pointer;
}
.kids-module-card:hover {
  transform: scale(1.03);
  border-color: var(--kids-heading);
}
.kids-module-card .ico {
  font-size: 2.8rem;
  margin-bottom: 10px;
  display: block;
}
.kids-module-card .card-label {
  font-size: 1.1rem;
  font-weight: 800;
}
.kids-module-card .card-sub {
  font-size: 0.85rem;
  color: var(--kids-muted);
  margin-top: 4px;
}

/* ---------- BUTTONS ---------- */
.kids-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  min-height: 60px;
  min-width: 60px;
  font-size: 1.1rem;
  font-weight: 800;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
  background: var(--kids-btn-bg);
  color: var(--kids-btn-fg);
}
.kids-btn:hover { opacity: 0.88; }
.kids-btn:active { opacity: 0.75; }

.kids-btn.secondary {
  background: var(--kids-btn2-bg);
  color: var(--kids-btn2-fg);
  border: 2px solid var(--kids-card-border);
}

.kids-btn.danger {
  background: var(--kids-danger);
  color: #fff;
}

/* HELP button (locked: always visible, far top-right) */
.kids-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-height: 60px;
  font-size: 1.05rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  background: var(--kids-danger);
  color: #fff;
}

/* Band selector buttons */
.kids-band-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  min-height: 120px;
  min-width: 140px;
  font-size: 1.3rem;
  font-weight: 800;
  border: 3px solid transparent;
  border-radius: 24px;
  cursor: pointer;
  text-decoration: none;
  color: #0e2247;
  transition: transform 0.12s, box-shadow 0.15s;
}
.kids-band-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.kids-band-btn .band-age {
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.kids-band-btn .band-name {
  font-size: 0.95rem;
  font-weight: 700;
  opacity: 0.85;
}

.band-sprouts  { background: var(--band-sprouts); }
.band-roots    { background: var(--band-roots); }
.band-branches { background: var(--band-branches); }
.band-sky      { background: var(--band-sky); }

/* ---------- BADGE HERO ---------- */
.kids-badge-hero {
  background: var(--kids-card-bg);
  border: 2px solid var(--kids-card-border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kids-badge-hero .badge-icon {
  font-size: 2.4rem;
}
.kids-badge-hero .badge-text {
  flex: 1;
}
.kids-badge-hero .badge-text strong {
  display: block;
  font-size: 1.05rem;
  color: var(--kids-heading);
}
.kids-badge-hero .badge-text small {
  color: var(--kids-muted);
}

/* ---------- GREETING (persona-aware, 2026-06-15) ---------- */
.kids-greet {
  padding: 15px 20px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kids-heading);
  border-bottom: 1px solid var(--kids-card-border);
  display: flex;
  align-items: center;
  gap: 14px;
}
.kids-greet-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.kids-greet-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kids-greet-name {
  font-size: 1.15rem;
  font-weight: 800;
}
.kids-greet-persona {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--kids-muted);
  font-style: italic;
}

/* ---------- PERSONA CARD (dashboard, 2026-06-15) ---------- */
.kids-persona-card {
  background: var(--kids-card-bg);
  border: 2px solid var(--kids-card-border);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.kids-persona-card .persona-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.kids-persona-card .persona-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kids-persona-card .persona-card-body strong {
  font-size: 1.1rem;
  color: var(--kids-heading);
}
.kids-persona-card .persona-card-role {
  font-size: 0.85rem;
  color: var(--kids-muted);
}
.kids-persona-card .persona-card-quote {
  font-size: 0.95rem;
  color: var(--kids-fg);
  font-style: italic;
  margin-top: 4px;
}

/* Persona-specific card accents */
.kids-persona-card.persona-miss_dora {
  border-color: var(--persona-dora-primary);
  background: linear-gradient(135deg, var(--kids-card-bg) 60%, rgba(184,230,200,0.12));
}
.kids-persona-card.persona-dr_albert {
  border-color: var(--persona-albert-accent);
  background: linear-gradient(135deg, var(--kids-card-bg) 60%, rgba(44,82,130,0.15));
}

/* ---------- FOOTER ---------- */
.kids-footer-bar {
  padding: 15px 20px;
  background: var(--kids-panel);
  border-top: 2px solid var(--kids-card-border);
  text-align: center;
}
.kids-footer-bar .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.kids-disclaimer {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--kids-muted);
}

/* ---------- GAME AREA ---------- */
.kids-game-area {
  background: var(--kids-card-bg);
  border: 2px solid var(--kids-card-border);
  border-radius: 20px;
  padding: 24px;
  position: relative;
}

.kids-score {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--kids-heading);
  margin-bottom: 16px;
}

/* Memory tap dots */
.memory-dot {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: #0e2247;
  transition: transform 0.08s;
  border: none;
}
.memory-dot:active {
  transform: scale(0.9);
}

/* ---------- HAMBURGER (mobile) ---------- */
.kids-burger {
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1001;
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  background: var(--kids-panel);
  color: var(--kids-fg);
  border: 2px solid var(--kids-card-border);
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Scrim overlay for mobile sidebar */
.kids-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3,16,31,0.6);
  z-index: 899;
}

/* ---------- HIGH CONTRAST ---------- */
html.kids-high-contrast {
  --kids-bg:          #03101f;
  --kids-fg:          #ffffff;
  --kids-heading:     #ffe680;
  --kids-subhead:     var(--elder-subhead);
  --kids-panel:       #050d1a;
  --kids-card-bg:     #0a0a22;
  --kids-card-fg:     #ffffff;
  --kids-card-border: #444;
  --kids-muted:       #ccc;
}

/* ---------- RESPONSIVE ---------- */

/* Tablet: sidebar shrinks */
@media (max-width: 900px) {
  .kids-sidebar {
    transform: translateX(-100%);
  }
  .kids-sidebar.open {
    transform: translateX(0);
  }
  .kids-content {
    margin-left: 0;
  }
  .kids-burger {
    display: flex;
  }
  .kids-scrim.active {
    display: block;
  }
  .kids-topbar {
    padding-left: 64px; /* room for burger */
  }
  .kids-substrip {
    padding-left: 15px;
  }
}

/* Phone: stack everything, bigger targets */
@media (max-width: 600px) {
  :root {
    --kids-base-size: 18px;
  }
  .kids-topbar {
    padding: 8px 12px 8px 64px;
  }
  .kids-substrip {
    padding: 6px 12px;
    gap: 6px;
  }
  .kids-main {
    padding: 15px;
  }
  .kids-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .kids-module-card {
    min-height: 130px;
    padding: 18px 12px;
  }
  .kids-band-btn {
    min-height: 100px;
    padding: 20px 16px;
  }
  .kids-btn {
    min-height: 56px;
    padding: 12px 18px;
    font-size: 1rem;
  }
}

/* Very small phone */
@media (max-width: 360px) {
  .kids-grid {
    grid-template-columns: 1fr;
  }
  .kids-band-btn {
    min-width: 100%;
  }
}