/**
 * REQUIREMENT: PR-BD-12 / BD-T3-02 (Age-Adaptive Personas & Domain Constellations)
 *
 * Age-band persona theming for K-12 student experience.
 * Automatically applied via body[data-age-band] set by app.js based on grade_level.
 *
 * Age Bands:
 * - k2 (Grades K-2): Explorer persona - warm, playful, extra-large targets
 * - g35 (Grades 3-5): Builder persona - friendly, scaffolded, larger targets
 * - g68 (Grades 6-8): Navigator persona - clean, modern, studio aesthetic (DEFAULT)
 * - g912 (Grades 9-12): Scholar persona - compact, high-density, exam-prep focus
 */

/* ────────────────────────────────────────────────────────────────────────
   K-2 Explorer Persona (Ages 5-8)
   - Larger 56×56px tap targets everywhere
   - Warm playful colors
   - Maximum 45ch line length
   - 1.6 line-height for early readers
   ──────────────────────────────────────────────────────────────────────── */

body[data-age-band="k2"] {
  --tap-target-size: 56px;
  --body-font-size: 20px;
  --body-line-height: 1.6;
  --max-content-width: 45ch;
  --card-border-radius: 16px;
  --primary-hue: 200; /* Warm sky blue */
  --accent-hue: 30;   /* Warm orange */
}

body[data-age-band="k2"] .btn,
body[data-age-band="k2"] button,
body[data-age-band="k2"] .keypad-btn {
  min-width: 56px;
  min-height: 56px;
  font-size: 18px;
  font-weight: 600;
}

body[data-age-band="k2"] .problem-card,
body[data-age-band="k2"] .step-card {
  border-radius: var(--card-border-radius);
  padding: 24px;
  font-size: 20px;
  line-height: 1.6;
  max-width: 45ch;
}

body[data-age-band="k2"] .hint-text {
  font-size: 18px;
  line-height: 1.6;
}

body[data-age-band="k2"] .rail-btn {
  min-height: 56px;
  font-size: 16px;
}

/* ────────────────────────────────────────────────────────────────────────
   3-5 Builder Persona (Ages 8-11)
   - 48px standard controls, 56px keypad
   - Friendly scaffolded learning
   - Maximum 58ch line length
   ──────────────────────────────────────────────────────────────────────── */

body[data-age-band="g35"] {
  --tap-target-size: 48px;
  --body-font-size: 18px;
  --body-line-height: 1.55;
  --max-content-width: 58ch;
  --card-border-radius: 12px;
}

body[data-age-band="g35"] .btn,
body[data-age-band="g35"] button {
  min-width: 48px;
  min-height: 48px;
  font-size: 16px;
}

body[data-age-band="g35"] .keypad-btn {
  min-width: 56px;
  min-height: 56px;
}

body[data-age-band="g35"] .problem-card,
body[data-age-band="g35"] .step-card {
  padding: 20px;
  font-size: 18px;
  max-width: 58ch;
}

/* ────────────────────────────────────────────────────────────────────────
   6-8 Navigator Persona (Ages 11-14) - DEFAULT
   - Clean modern studio aesthetic
   - 48px controls, 56px keypad
   - Maximum 65ch line length
   ──────────────────────────────────────────────────────────────────────── */

body[data-age-band="g68"],
body:not([data-age-band]) {
  --tap-target-size: 48px;
  --body-font-size: 17px;
  --body-line-height: 1.5;
  --max-content-width: 65ch;
  --card-border-radius: 8px;
}

/* This is the default styling, already in app.css */

/* ────────────────────────────────────────────────────────────────────────
   9-12 Scholar Persona (Ages 14-18)
   - Compact high-density layout
   - 48px touch / 40px desktop pointer
   - Full algebraic/trig/radical keypad
   - Maximum 72ch for multi-step symbolic work
   ──────────────────────────────────────────────────────────────────────── */

body[data-age-band="g912"] {
  --tap-target-size: 48px;
  --body-font-size: 16px;
  --body-line-height: 1.5;
  --max-content-width: 72ch;
  --card-border-radius: 6px;
}

body[data-age-band="g912"] .problem-card,
body[data-age-band="g912"] .step-card {
  padding: 16px;
  font-size: 16px;
  max-width: 72ch;
}

/* Desktop pointer targets can be smaller for high schoolers */
@media (pointer: fine) {
  body[data-age-band="g912"] .btn,
  body[data-age-band="g912"] button {
    min-width: 40px;
    min-height: 40px;
  }
  /* Manipulative steppers retain their touch floor with a mouse attached. */
  body[data-age-band="g912"] .manipulative-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Constellation Cards (All Ages)
   - Visual domain progress grouping
   - 4-8 leaf standards per constellation
   - Completion stars and milestone cards
   ──────────────────────────────────────────────────────────────────────── */

.constellation-card {
  border: 1px solid var(--border-color, #ddd);
  border-radius: var(--card-border-radius, 8px);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--surface-1, #fff);
  transition: box-shadow 0.2s ease;
}

.constellation-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.constellation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.constellation-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1, #222);
}

.constellation-stars {
  display: flex;
  gap: 4px;
}

.constellation-star {
  width: 20px;
  height: 20px;
  fill: var(--accent-color, #fbbf24);
}

.constellation-star.dimmed {
  fill: var(--border-color, #ddd);
}

.constellation-progress {
  font-size: 14px;
  color: var(--text-2, #666);
  margin-bottom: 8px;
}

.constellation-standards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.standard-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-mono, 'Courier New', monospace);
  background: var(--surface-2, #f5f5f5);
  color: var(--text-2, #666);
}

.standard-badge.mastered {
  background: var(--success-surface, #d1fae5);
  color: var(--success-text, #065f46);
}

.constellation-milestone {
  margin-top: 12px;
  padding: 12px;
  border-radius: 6px;
  background: var(--accent-surface, #fef3c7);
  border: 1px solid var(--accent-border, #fbbf24);
  display: flex;
  align-items: center;
  gap: 8px;
}

.milestone-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.milestone-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1, #222);
}

/* ────────────────────────────────────────────────────────────────────────
   Phone Focus Mode (< 600px)
   - Automatically hides navigation rail during active problem work
   - Prevents collision with sticky action bar and math workspace
   - WCAG 2.2 SC 2.4.11 compliance
   ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  body.focus-mode .rail {
    display: none;
  }
  
  body.focus-mode main {
    padding-bottom: 0;
  }
  
  /* Ensure sticky action bar doesn't collide with keyboard */
  body.focus-mode .sticky-action-bar {
    bottom: 0;
    z-index: 1000;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Read-Aloud Button Positioning
   - User-initiated only (no autoplay)
   - Visible when "Show Read buttons" preference enabled
   ──────────────────────────────────────────────────────────────────────── */

.read-aloud-btn {
  display: none;
  min-width: var(--tap-target-size, 48px);
  min-height: var(--tap-target-size, 48px);
  padding: 8px 12px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  background: var(--surface-1, #fff);
  color: var(--text-2, #666);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

body[data-read-aloud="enabled"] .read-aloud-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.read-aloud-btn:hover {
  background: var(--surface-2, #f5f5f5);
}

.read-aloud-btn:active {
  background: var(--surface-3, #eee);
}

.read-aloud-btn[aria-pressed="true"] {
  background: var(--primary-surface, #dbeafe);
  border-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}