/* ═══════════════════════════════════════════════════════════
   HCAI Engine — Tiểu Học (Primary School) Premium Theme
   Loaded AFTER theme.css to override warm orange → playful green
   Designed for Grade 1-5 (ages 6-10): bold colors, generous
   spacing, large readable text, premium feel.
   ═══════════════════════════════════════════════════════════ */

/* ═══ 1. COLOR TOKENS ═══
   Contrast ratios verified against WCAG 2.1 AA:
   --text (#1e293b) on white: 14:1 ✓ AAA
   --muted (#475569) on white: 7:1 ✓ AAA
   --accent-dk (#047857) on white: 5.8:1 ✓ AA
   Headings (#059669) on white: 4.6:1 ✓ AA (large text 3:1)
   ═══════════════════════════════════════════ */
:root {
  --bg: #ecfdf5;
  --bg2: #d1fae5;
  --border: #a7f3d0;
  --accent: #10b981;
  --accent-lt: rgba(16,185,129,.12);
  --accent-dk: #047857;
  /* Secondary accent — brand purple, complement to mint for gradients and
     current-state highlights on v2 organizer primitives. Without --accent-2
     defined, primitives building linear-gradient(var(--accent), var(--accent-2))
     fall back to transparent (bug: Lớp 5 B14 organizerCycle top node empty). */
  --accent-2:    #6541F2;
  --accent-2-lt: rgba(101,65,242,.12);
  --accent-2-dk: #4c2bd4;
  --muted: #475569;
  --orange: #10b981;
  --amber: #10b981;
  --amber-lt: #ecfdf5;
  --r: 20px;
}

/* ═══ 2. BACKGROUND ═══ */
body {
  background: linear-gradient(135deg, #ecfdf5, #dbeafe);
  background-image:
    radial-gradient(circle, rgba(16,185,129,.04) 1px, transparent 1px),
    radial-gradient(ellipse at 15% 60%, rgba(139,92,246,.08) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(59,130,246,.08) 0%, transparent 50%);
  background-size: 28px 28px, 100% 100%, 100% 100%;
}

/* ═══ 3. SLIDE CONTAINER — Premium depth + generous padding ═══ */
.slide {
  border-radius: 28px;
  padding: 32px 48px 28px;
  box-shadow:
    0 24px 64px rgba(16,185,129,.12),
    0 6px 20px rgba(30,41,59,.08),
    0 0 0 1px rgba(16,185,129,.08);
}

/* ═══ 4. VIBRANT HEADINGS — The #1 visual upgrade ═══ */
.slide h2 {
  color: #059669;
  font-weight: 900;
}
.slide h3 {
  color: #059669;
}

/* ── Cover slide h1 — solid green, no gradient ── */
.slide.cv h1 {
  color: #059669;
  background: none;
  -webkit-text-fill-color: #059669;
}
.slide.cv .slide-sub {
  color: #475569;
  font-weight: 600;
}
.slide.cv {
  background:
    radial-gradient(ellipse at 30% 110%, rgba(16,185,129,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 70% -10%, rgba(59,130,246,.12) 0%, transparent 40%),
    linear-gradient(135deg, #ecfdf5 0%, #ffffff 40%, #dbeafe 100%);
}
.slide.cv::after {
  background: radial-gradient(circle, rgba(16,185,129,.10) 2px, transparent 2px);
}
.slide.cv::before {
  background:
    radial-gradient(ellipse at 20% 85%, rgba(16,185,129,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,.08) 0%, transparent 50%);
}

/* ═══ 5. TOP ACCENT BAR & DECORATIONS ═══ */
.slide::before {
  background: linear-gradient(180deg, rgba(16,185,129,.18) 0%, transparent 100%);
  height: 120px; border-radius: 28px 28px 0 0;
}
.slide::after {
  background: radial-gradient(circle, rgba(16,185,129,.12) 1.5px, transparent 1.5px);
}
.slide:not(.cv)::after {
  background: linear-gradient(180deg, rgba(16,185,129,.04), transparent);
}
.slide:not(.cv) .slide-body::after {
  background: radial-gradient(ellipse at 50% 100%, rgba(16,185,129,.06) 0%, transparent 70%);
}

/* ── Title underlines ── */
.rule, .title-line {
  background: linear-gradient(90deg, #10b981, #ec4899);
}

/* ═══ 6. GENEROUS PADDING — Premium breathing room everywhere ═══
   Every container gets explicit padding so text never hugs edges. */

/* ── Slide body: gap between child elements ── */
.slide-body {
  gap: 10px;
  padding: 4px 0;
}

/* ── Boxes ── */
.box {
  border-radius: 20px;
  padding: 16px 24px;
  border-width: 3px;
}

/* ── Cards (grid items) ── */
.card {
  border-radius: 20px;
  padding: 20px 24px;
  border-width: 2.5px;
  box-shadow: 0 4px 16px rgba(16,185,129,.08);
}

/* ── Image card captions ── */
.img-card .img-body {
  padding: 14px 20px;
}

/* ── Row items (list-style content) ──
 * Crisp solid-white card on the mint slide background — the base
 * theme uses a bg→cream gradient that blends into the tieu-hoc mint
 * surface and looks washed out. Pure white + a bolder left accent
 * and wider vertical gap make each point visually distinct. */
.row-item {
  padding: 16px 22px;
  border-radius: 14px;
  background: #fff !important;
  border-left: 6px solid var(--accent);
  box-shadow: 0 2px 8px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
}
.slide .rows { gap: 14px !important }
.row-item .ic { flex-shrink: 0 }
.row-item .ic.ic-teal { color: var(--accent) }

/* ── Flow steps ── */
.flow-step {
  padding: 14px 22px;
}

/* ── Process rows ── */
.process-rows .row-item {
  padding: 10px 24px;
}

/* ── Comparison table cells ── */
.cmp th, .cmp td {
  padding: 16px 22px;
}

/* ── App card body ── */
.app-body {
  padding: 12px 16px;
}

/* ── Stack card body ── */
.stack-card .img-body {
  padding: 16px 22px;
}

/* ── Grids: generous gap ── */
.g2 { gap: 14px }
.g3 { gap: 12px }

/* ── Chip/drag/sort items ── */
.chip, .drag-chip, .drop-zone {
  padding: 10px 18px;
}

/* G1-2 pre-reader chips — big photo, small text. Kids recognise the
 * picture without needing to decode Vietnamese text. */
.drag-chip.has-img .chip-img,
.d-chip.has-img .chip-img { width: 96px; height: 96px }
.drag-chip.has-img .chip-label,
.d-chip.has-img .chip-label { font-size: .85em; max-width: 120px }

/* ── Checklist items ── */
.checklist-item {
  padding: 12px 16px;
}

/* ═══ 7. HEADER — Green badge, progress, timer ═══ */
.hdr-badge {
  background: linear-gradient(135deg, #10b981, #059669);
}
.prog-fill {
  background: linear-gradient(90deg, #10b981, #3b82f6);
}
.timer { color: #059669 }
.s-tag {
  background: rgba(16,185,129,.12);
  color: #047857;
  font-weight: 800;
}

/* ═══ 8. NAVIGATION BUTTONS ═══ */
.nav-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 16px rgba(16,185,129,.25);
}
.nav-btn:hover {
  box-shadow: 0 6px 20px rgba(16,185,129,.35);
}

/* ═══ 9. REVEALS — Snappy transitions + visible pre-reveal state ═══
   CRITICAL: Unrevealed items should be clearly visible (not ghosted)
   so slides don't look broken before interaction.
   0.35 = readable but obviously "waiting to be activated" */
.rv {
  opacity: 0.35 !important;
  transform: translateY(6px) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
.rv.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
/* Headings should ALWAYS be fully visible — never hidden behind reveal */
.slide h2.rv, .slide h3.rv, .slide h2, .slide h3 {
  opacity: 1 !important;
  transform: none !important;
}
/* Interactive elements should also be fully visible — users need to see what to click */
.slide .mcq-o.rv, .slide .card-tap-card.rv, .slide .chip.rv,
.slide .sort-item.rv, .slide .poll-card.rv, .slide .discussion-card.rv {
  opacity: 0.6 !important;
}
.slide .mcq-o.rv.show, .slide .card-tap-card.rv.show, .slide .chip.rv.show,
.slide .sort-item.rv.show, .slide .poll-card.rv.show, .slide .discussion-card.rv.show {
  opacity: 1 !important;
}
/* Content/reveal body items — fully hidden until revealed for strong progressive pacing */
.slide .box.rv { opacity: 0 !important; transform: translateY(12px) !important }
.slide .box.rv.show { opacity: 1 !important; transform: translateY(0) !important }

/* ═══ 10. MCQ — Premium interactive options ═══ */
.mcq-o {
  border-radius: 16px;
  border: 2.5px solid var(--border);
  font-weight: 700;
  padding: 18px 24px;
  background: linear-gradient(135deg, #ffffff, #f0fdf4) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(16,185,129,.06);
  transition: all .2s;
}
.mcq-o:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  box-shadow: 0 6px 20px rgba(16,185,129,.18);
  transform: translateY(-3px);
}
.mcq-o::before {
  background: var(--accent) !important;
}
.mcq-o.correct {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
}
.mcq-o.wrong {
  background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
}

/* ── Sorting / Drag items ── */
.sort-item, .drag-item {
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: all .2s;
}
.sort-item:hover, .drag-item:hover {
  box-shadow: 0 4px 12px rgba(16,185,129,.15);
  transform: translateY(-2px);
}

/* ── Card-tap cards ── */
.card-tap-card {
  border-radius: 16px;
  border-width: 2.5px;
  font-weight: 700;
  transition: all .2s;
}
.card-tap-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16,185,129,.12);
}

/* ── Poll cards ── */
.poll-card {
  padding: 16px 14px;
  min-height: 56px;
  border-radius: 16px;
}
.poll-label {
  font-size: max(1em, 16px);
  font-weight: 700;
}

/* ═══ 11. DISCUSSION CARDS — Green palette, premium feel ═══ */
.discussion-card {
  background: linear-gradient(135deg, #ecfdf5 0%, #dbeafe 100%) !important;
  border: 2.5px solid rgba(16,185,129,.25) !important;
  border-radius: 24px !important;
  padding: 40px 48px !important;
  box-shadow: 0 4px 20px rgba(16,185,129,.08) !important;
}
.disc-icon { color: #10b981 !important }
.disc-icon .lucide { stroke: #10b981 !important; width: 36px !important; height: 36px !important }
.disc-grade {
  color: #059669 !important;
  font-size: 1.4em !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}
.disc-prompt, .disc-prompt-en {
  font-size: 1.3em !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}

/* ═══ 11b. BILINGUAL TOGGLE — Green instead of orange ═══ */
.lang-toggle {
  background: rgba(16,185,129,.08) !important;
  border-color: rgba(16,185,129,.25) !important;
}
.lang-toggle:hover {
  background: rgba(16,185,129,.18) !important;
}
.notes-toggle:hover {
  background: rgba(16,185,129,.16) !important;
}
.notes-toggle.active {
  background: rgba(16,185,129,.2) !important;
  border-color: var(--accent) !important;
}

/* ═══ 12. BOX & ROW OVERRIDES ═══ */
.rows { background: linear-gradient(135deg, var(--bg), #ecfdf5); border-left-color: var(--accent) }
.rows.amber .row-item { border-left-color: var(--accent) }
.box-amber { border-color: rgba(16,185,129,.25) }
.box-amber::before { background: linear-gradient(180deg, var(--accent), rgba(16,185,129,.3)) }
.card-amber { background: var(--amber-lt); border-color: rgba(16,185,129,.18) }
.card-amber::after { background: var(--accent) }

/* ═══ 13. FLOW STEPS ═══ */
.flow-step {
  background: linear-gradient(135deg, #10b981, #059669);
}

/* ═══ 14. SIDE IMAGE — Tuned width + breathing room ═══ */
.slide.has-side-img .slide-side-img {
  width: 33%;
}
.slide.has-side-img .slide-main {
  padding-right: 28px;
}

/* ═══ 15. IMAGE LAYOUT FIX ═══ */
/* image-full: fill the frame, no empty space on sides */
.img-full-wrap .img-frame {
  max-height: 55%;
}
.img-full-wrap .img-frame img,
.img-top-wrap .img-frame img {
  object-fit: cover !important;  /* fill frame, crop if needed — no empty sides */
}
/* text-image: also cover */
.g2-img .img-frame img {
  object-fit: cover !important;
  max-height: none !important;
}
.slide-body {
  overflow-y: auto;
}

/* ═══ 16. FONT SIZE — Classroom-readable on small LED TVs ═══
   Design for back-of-room viewing on a 55" TV at 5m distance.
   Headings must be HUGE. Body text generous. */

/* ── Base: slide heading — big enough for back of room ── */
.slide h2 {
  font-size: 3em;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.slide h3, .slide .card h3, .slide .box h3 {
  font-size: 1.85em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── Body text — classroom minimum 20px ──
   Line-height 1.6: optimal for children ages 6-10 (Tinker 1963, Wilkins 2009).
   Letter-spacing +0.015em: moderate tracking boosts readability ~20% (Pelli 2006). */
.slide p, .slide span, .slide li, .slide td, .slide th,
.slide .card-body, .slide .img-body, .slide .checklist-label,
.slide .option-text, .slide .q-text, .slide .flow-label,
.slide .step-body, .slide .col-body, .slide .kv-val,
.slide .poll-label, .slide .disc-prompt {
  font-size: max(1.1em, 20px);
  line-height: 1.6;
  letter-spacing: 0.015em;
}

/* ── Interactive elements — large touch targets ──
   WCAG 2.5.5 (AAA): min 44px target. We target 48px for fat-finger safety. */
.slide button, .slide .chip, .slide .drag-item, .slide .sort-item,
.slide .mcq-o, .slide .card-tap-card {
  font-size: max(1.1em, 22px);
  min-height: 48px;
}

/* ── Paragraph spacing — visual separation between text blocks ── */
.slide p + p, .slide li + li {
  margin-top: 0.3em;
}

/* ── Small UI — at least 16px ── */
.slide .s-tag, .slide .prog-label, .slide .ann-legend-item,
.slide .img-tag, .slide .story-counter {
  font-size: max(0.85em, 16px);
}

/* ── Box text — generous for reading ── */
.slide .box {
  font-size: 1.3em;
}

/* ═══ 17. GRADE-BASED FONT SCALING ═══ */

/* Grade 1-2: extra large for young readers (6-8 years) on classroom TV */
body[data-grade-group="1-2"] .slide {
  font-size: 24px;
}
body[data-grade-group="1-2"] .slide h2 {
  font-size: 3em;
}
body[data-grade-group="1-2"] .box {
  font-size: 1.3em;
}
body[data-grade-group="1-2"] .card {
  font-size: 1.2em;
}
body[data-grade-group="1-2"] .mcq-o,
body[data-grade-group="1-2"] .card-tap-card {
  font-size: max(1.2em, 24px);
  min-height: 60px;
}

/* Grade 3-5: still large (8-10 years) */
body[data-grade-group="3-5"] .slide {
  font-size: 22px;
}
body[data-grade-group="3-5"] .slide h2 {
  font-size: 3em;
}

/* ═══ 18. FONT THEME SYSTEM ═══
   Three switchable font themes via body[data-font-theme].
   Default: Lexend (reading fluency optimized).
   Switched live via theme selector in viewer header. */

/* ── Theme: Lexend (default) ──
   Scientifically designed for reading fluency by Dr. Bonnie Shaver-Troup.
   Clean, modern, purpose-built for young readers. */
body[data-font-theme="lexend"],
body:not([data-font-theme]) {
  --font-heading: 'Lexend', system-ui, sans-serif;
  --font-body: 'Lexend', system-ui, sans-serif;
}

/* ── Theme: Plus Jakarta Sans ──
   Premium geometric sans. Modern, polished, high-end feel.
   Used by Notion, Linear, Vercel. */
body[data-font-theme="jakarta"] {
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Theme: Be Vietnam Pro ──
   Designed specifically for Vietnamese. Excellent diacritical rendering.
   Professional, sharp, distinctly Vietnamese-first. */
body[data-font-theme="vietnam"] {
  --font-heading: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
}

/* Apply font variables to all slide content */
.slide, .slide *, .hdr, .nav, .notes-panel {
  font-family: var(--font-body) !important;
}
.slide h1, .slide h2, .slide h3,
.slide .cv h1, .slide .disc-grade,
.hdr-badge, .s-tag {
  font-family: var(--font-heading) !important;
}

/* ── Theme-specific tweaks ── */

/* Lexend: slightly tighter letter-spacing (it runs wide) */
body[data-font-theme="lexend"] .slide,
body:not([data-font-theme]) .slide {
  letter-spacing: -0.01em;
}
body[data-font-theme="lexend"] .slide h2,
body:not([data-font-theme]) .slide h2 {
  letter-spacing: -0.02em;
}

/* Jakarta: tighter headings, wider body for contrast */
body[data-font-theme="jakarta"] .slide h2 {
  letter-spacing: -0.03em;
  font-weight: 800;
}
body[data-font-theme="jakarta"] .slide {
  letter-spacing: 0.005em;
}

/* Vietnam Pro: optimized for Vietnamese diacriticals */
body[data-font-theme="vietnam"] .slide {
  letter-spacing: 0.01em;
  line-height: 1.65;
}
body[data-font-theme="vietnam"] .slide h2 {
  letter-spacing: -0.01em;
  font-weight: 800;
}

/* ═══ 19. SMART TYPOGRAPHY — InDesign-grade layout controls ═══
   Mirrors Adobe InDesign's paragraph/character composition:
   - Text-wrap balance (= InDesign "Balance Ragged Lines")
   - Text-wrap pretty  (= InDesign "Adobe Paragraph Composer" orphan control)
   - Hanging punctuation (= InDesign "Optical Margin Alignment")
   - Hyphens auto       (= InDesign hyphenation with language awareness)
   - Overflow auto-fit  (= InDesign "Auto-Size Text Frame") → handled in core.js
   ════════════════════════════════════════════════════════════ */

/* ── Balance Ragged Lines: headings get equal-length lines ── */
.slide h1, .slide h2, .slide h3 {
  text-wrap: balance;
}

/* ── Orphan/Widow prevention: pretty wrap on body text ── */
.slide p, .slide li, .slide .card-body, .slide .img-body,
.slide .box p, .slide .disc-prompt, .slide .disc-prompt-en,
.slide .mcq-o, .slide .poll-label, .slide .flow-detail,
.slide .step-body, .slide .q-text {
  text-wrap: pretty;
}

/* ── Optical Margin Alignment: punctuation hangs outside text box ── */
.slide p, .slide li, .slide .box p,
.slide .disc-prompt, .slide .disc-prompt-en {
  hanging-punctuation: first allow-end last;
}

/* ── Hyphenation: auto-hyphenate Vietnamese + English ── */
.slide p, .slide li, .slide .card-body, .slide .img-body,
.slide .box p, .slide .step-body {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 3 3;  /* min word 8, min before 3, min after 3 */
  hyphenate-limit-lines: 2;      /* max 2 consecutive hyphenated lines */
}

/* ── Heading kerning: optical spacing like InDesign "Metrics" kerning ── */
.slide h1, .slide h2, .slide h3 {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ── Process/flow steps: balanced ── */
.slide .flow-step {
  text-wrap: balance;
}

/* ── Prevent break inside cards/boxes (= InDesign "Keep Lines Together") ── */
.slide .card, .slide .box, .slide .mcq-o,
.slide .card-tap-card, .slide .poll-card {
  break-inside: avoid;
  flex-shrink: 0;       /* don't crush content — let fixOverflow() scale instead */
  overflow: visible;    /* let content flow naturally for accurate measurement */
}

/* ═══ 20. KEYWORD EMPHASIS — Single-property rule ═══
   Best practice: one emphasis method only (color).
   No stacking bold + background + color. */

.slide b, .slide strong {
  color: var(--accent-dk);
  font-weight: inherit;
}
.slot-header .rule { margin: 8px 0 14px }

/* ═══════════════════ GRADE 1-2 TYPOGRAPHY BUMP ═══════════════════
 * 6-7 year olds in a classroom — text needs to be visibly bigger so
 * kids in the back row can read along with the teacher. The base
 * sizes (1.4em chips, 1.65em body) are calibrated for THCS / Grade
 * 3-5 self-paced reading. For Grade 1-2 (Lớp 1-2) classroom display,
 * scale up interactive text and body copy ~25-30% so chips are
 * thumb-friendly AND readable from the back row.
 *
 * Reflected via grade-system.js: body[data-grade="1-2"]. Headings
 * (h1, h2) are already large enough (4.4em, 3.2em) so they're not
 * bumped here — just the smaller, frequently-used elements.
 * ═════════════════════════════════════════════════════════════════ */
body[data-grade="1-2"] .slide .drag-chip,
body[data-grade="1-2"] .slide .chip,
body[data-grade="1-2"] .slide .sort-item,
body[data-grade="1-2"] .slide .mcq-o,
body[data-grade="1-2"] .slide .poll-card,
body[data-grade="1-2"] .slide .card-tap-card,
body[data-grade="1-2"] .slide .checklist-item,
body[data-grade="1-2"] .slide .reveal-btn,
body[data-grade="1-2"] .slide .story-next-btn { font-size: 1.75em }

body[data-grade="1-2"] .slide .slide-sub { font-size: 2.1em; line-height: 1.4 }
body[data-grade="1-2"] .slide .body,
body[data-grade="1-2"] .slide .narrative-body,
body[data-grade="1-2"] .slide .description,
body[data-grade="1-2"] .slide .caption,
body[data-grade="1-2"] .slide p { font-size: 1.55em; line-height: 1.5 }

body[data-grade="1-2"] .slide .label,
body[data-grade="1-2"] .slide .chip-label,
body[data-grade="1-2"] .slide .item-label,
body[data-grade="1-2"] .slide .stat-label { font-size: 1.4em }

body[data-grade="1-2"] .slide .pool { padding: 14px; gap: 12px }
body[data-grade="1-2"] .slide .drag-chip { padding: 14px 22px; min-height: 60px; border-radius: 16px }
body[data-grade="1-2"] .slide .mcq-o,
body[data-grade="1-2"] .slide .card-tap-card { min-height: 64px; padding: 14px 18px }

/* Story-branch buttons get the boldest treatment — these are the moments
 * the kid taps to drive the story forward. Make them feel like big buttons. */
body[data-grade="1-2"] .slide .story-branch button,
body[data-grade="1-2"] .slide .story-branch .branch-btn { font-size: 1.85em; padding: 16px 24px; min-height: 68px }