/* ==========================================================================
   AI4KIDS TEEN — DARK THEME SHARED TOKEN SYSTEM
   ==========================================================================
   Contract doc: teen/theme/DARK_THEME_CONTRACT.md (read that first).

   HOW THIS FILE IS WIRED IN:
   - Linked AFTER each page's own <style> block (or after its Tailwind
     config / t2-premium.css), so plain-class-selector rules here win the
     cascade WITHOUT !important — same specificity, later wins.
   - Each page's <body> carries `data-world="t1|t2|t3|t4"`. World accent /
     atmosphere variables are scoped under `body[data-world="tN"]`; the base
     dark surface/text ramp is shared and defined once.
   - Nothing here touches JS, evidenceKey/evidencePolicy, mission fixtures,
     persistence, unlock/gating logic, or class *names* already wired to JS
     (e.g. .selected, .done, .current, #t2-btn-next) — only their paint.
   ========================================================================== */

/* ---------- 1. SHARED DARK BASE TOKENS (world-agnostic ramp) ---------- */
:root {
  --dk-surface-0: #14100C;   /* page canvas */
  --dk-surface-1: #1C1712;   /* raised card */
  --dk-surface-2: #262019;   /* nested/inset surface (inputs, chips) */
  --dk-border: rgba(244,238,227,0.12);
  --dk-border-strong: rgba(244,238,227,0.22);
  --dk-text-primary: #F4EEE3;
  --dk-text-secondary: rgba(244,238,227,0.72);
  --dk-text-tertiary: rgba(244,238,227,0.52);
  --dk-shadow: 0 8px 24px -10px rgba(0,0,0,0.55);
}

/* ---------- 2. WORLD IDENTITIES ----------
   Each world overrides only: base tint, accent, accent-soft (for selected/
   fill states), and the atmosphere pattern. Everything else inherits the
   shared ramp above — this is what keeps 4 worlds "one system". */

body[data-world="t1"] {
  /* T1 — Truth District / AI Detective: forensic, alert, evidence-seeking.
     Motif: PCB/circuit trace network with node "pads" — reads as forensic
     scan/data-trace tech, not decorative wallpaper. */
  --dk-tint: #1A1512;                 /* charcoal / black-brown */
  --dk-accent: #E0A72E;               /* amber-gold */
  --dk-accent-strong: #EA580C;        /* warm orange, verdict/CTA emphasis */
  --dk-accent-soft: rgba(224,167,46,0.14);
  --dk-pattern-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23E0A72E' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M10 10h30v30M10 10v40h20M60 10h50M60 10v25h-15M60 10v50l30 0'/%3E%3Cpath d='M20 90h40v20M20 90v-20h-10M100 60v40h-30M100 60h-20'/%3E%3C/g%3E%3Cg fill='%23E0A72E' fill-opacity='0.12'%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Ccircle cx='40' cy='40' r='2.2'/%3E%3Ccircle cx='60' cy='10' r='2.2'/%3E%3Ccircle cx='110' cy='10' r='2.6'/%3E%3Ccircle cx='45' cy='35' r='1.6'/%3E%3Ccircle cx='90' cy='60' r='2.6'/%3E%3Ccircle cx='20' cy='90' r='2.2'/%3E%3Ccircle cx='60' cy='110' r='2.2'/%3E%3Ccircle cx='100' cy='60' r='2.6'/%3E%3Ccircle cx='70' cy='100' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --dk-motif-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23E0A72E' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M60 480 L180 400 L180 260 L320 180 L320 60'/%3E%3Cpath d='M180 400 L340 420 L480 340'/%3E%3Cpath d='M320 180 L470 200 L560 120'/%3E%3Cpath d='M180 260 L60 220'/%3E%3Cpath d='M480 340 L560 420'/%3E%3Ccircle cx='60' cy='480' r='34' stroke-opacity='0.10'/%3E%3Ccircle cx='320' cy='60' r='22' stroke-opacity='0.10'/%3E%3C/g%3E%3Cg fill='%23E0A72E' fill-opacity='0.16'%3E%3Ccircle cx='60' cy='480' r='4'/%3E%3Ccircle cx='180' cy='400' r='3.4'/%3E%3Ccircle cx='180' cy='260' r='3.4'/%3E%3Ccircle cx='320' cy='180' r='4.2'/%3E%3Ccircle cx='320' cy='60' r='4'/%3E%3Ccircle cx='340' cy='420' r='3'/%3E%3Ccircle cx='480' cy='340' r='3.6'/%3E%3Ccircle cx='470' cy='200' r='3'/%3E%3Ccircle cx='560' cy='120' r='4'/%3E%3Ccircle cx='60' cy='220' r='3'/%3E%3Ccircle cx='560' cy='420' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-world="t2"] {
  /* T2 — Creation Studio / Responsible Creation: expressive, making-with-care.
     Motif: generative idea-network — flowing bezier links between nodes of
     varying weight, like a mind-map/production graph. */
  --dk-tint: #1F1418;                 /* dark plum / oxblood */
  --dk-accent: #E0745A;               /* coral-rose */
  --dk-accent-strong: #C0392B;        /* orange-red emphasis */
  --dk-accent-soft: rgba(224,116,90,0.14);
  --dk-pattern-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cg fill='none' stroke='%23E0745A' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M10 20 C40 5,60 45,95 25 S120 55,125 40'/%3E%3Cpath d='M15 70 C45 90,55 55,90 80 S115 65,125 95'/%3E%3Cpath d='M10 20 C5 55,25 90,15 70'/%3E%3C/g%3E%3Cg fill='%23E0745A' fill-opacity='0.12'%3E%3Ccircle cx='10' cy='20' r='2.8'/%3E%3Ccircle cx='60' cy='45' r='2'/%3E%3Ccircle cx='95' cy='25' r='2.6'/%3E%3Ccircle cx='125' cy='40' r='2.2'/%3E%3Ccircle cx='15' cy='70' r='2.4'/%3E%3Ccircle cx='55' cy='55' r='1.8'/%3E%3Ccircle cx='90' cy='80' r='2.6'/%3E%3Ccircle cx='125' cy='95' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --dk-motif-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23E0745A' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M60 100 C160 60,220 180,320 140 S460 60,560 110'/%3E%3Cpath d='M100 260 C220 220,260 340,380 300 S520 240,580 300'/%3E%3Cpath d='M60 100 C40 180,90 220,100 260'/%3E%3Cpath d='M320 140 C340 220,360 260,380 300'/%3E%3C/g%3E%3Cg fill='%23E0745A' fill-opacity='0.20'%3E%3Ccircle cx='60' cy='100' r='4.4'/%3E%3Ccircle cx='220' cy='118' r='3'/%3E%3Ccircle cx='320' cy='140' r='4'/%3E%3Ccircle cx='460' cy='75' r='3'/%3E%3Ccircle cx='560' cy='110' r='4.2'/%3E%3Ccircle cx='100' cy='260' r='3.6'/%3E%3Ccircle cx='380' cy='300' r='4'/%3E%3Ccircle cx='520' cy='240' r='3'/%3E%3Ccircle cx='580' cy='300' r='3.8'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-world="t3"] {
  /* T3 — Learning Lab / Smart Learning: focused, analytical, experimental.
     Motif: layered neural-network diagram (input→hidden→output nodes) —
     directly legible as "AI/ML lab", not abstract decoration. */
  --dk-tint: #0F1C1A;                 /* deep teal / green-black */
  --dk-accent: #3FCFBE;               /* mint-aqua */
  --dk-accent-strong: #0F766E;        /* deep teal emphasis */
  --dk-accent-soft: rgba(63,207,190,0.14);
  --dk-pattern-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='none' stroke='%233FCFBE' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M15 20 L55 15 M15 20 L55 55 M15 55 L55 15 M15 55 L55 55 M15 90 L55 55 M15 90 L55 95'/%3E%3Cpath d='M55 15 L95 35 M55 55 L95 35 M55 55 L95 75 M55 95 L95 75'/%3E%3C/g%3E%3Cg fill='%233FCFBE' fill-opacity='0.13'%3E%3Ccircle cx='15' cy='20' r='2.4'/%3E%3Ccircle cx='15' cy='55' r='2.4'/%3E%3Ccircle cx='15' cy='90' r='2.4'/%3E%3Ccircle cx='55' cy='15' r='2.4'/%3E%3Ccircle cx='55' cy='55' r='2.4'/%3E%3Ccircle cx='55' cy='95' r='2.4'/%3E%3Ccircle cx='95' cy='35' r='2.8'/%3E%3Ccircle cx='95' cy='75' r='2.8'/%3E%3C/g%3E%3C/svg%3E");
  --dk-motif-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%233FCFBE' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M60 120 L260 70 M60 120 L260 200 M60 260 L260 200 M60 260 L260 320 M60 400 L260 320 M60 400 L260 450'/%3E%3Cpath d='M260 70 L460 160 M260 200 L460 160 M260 200 L460 300 M260 320 L460 300 M260 320 L460 420 M260 450 L460 420'/%3E%3C/g%3E%3Cg fill='%233FCFBE' fill-opacity='0.20'%3E%3Ccircle cx='60' cy='120' r='4.4'/%3E%3Ccircle cx='60' cy='260' r='4.4'/%3E%3Ccircle cx='60' cy='400' r='4.4'/%3E%3Ccircle cx='260' cy='70' r='3.6'/%3E%3Ccircle cx='260' cy='200' r='3.6'/%3E%3Ccircle cx='260' cy='320' r='3.6'/%3E%3Ccircle cx='260' cy='450' r='3.6'/%3E%3Ccircle cx='460' cy='160' r='4.6'/%3E%3Ccircle cx='460' cy='300' r='4.6'/%3E%3Ccircle cx='460' cy='420' r='4.6'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-world="t4"] {
  /* T4 — Quest / Problem Solving: strategic, independent, deeper-space.
     Motif: constellation / star-chart route lines — literal "mission map",
     matching the T4 "route logic" brief. */
  --dk-tint: #131328;                 /* deep navy / indigo-violet */
  --dk-accent: #7B7FE8;               /* electric violet-blue */
  --dk-accent-strong: #4C5FD5;        /* indigo emphasis */
  --dk-accent-soft: rgba(123,127,232,0.14);
  --dk-pattern-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%237B7FE8' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M10 15 L45 35 L80 20 L120 45 M45 35 L60 75 L30 100 M80 20 L110 80'/%3E%3C/g%3E%3Cg fill='%237B7FE8' fill-opacity='0.15'%3E%3Ccircle cx='10' cy='15' r='1.6'/%3E%3Ccircle cx='45' cy='35' r='2.2'/%3E%3Ccircle cx='80' cy='20' r='1.8'/%3E%3Ccircle cx='120' cy='45' r='2.4'/%3E%3Ccircle cx='60' cy='75' r='1.8'/%3E%3Ccircle cx='30' cy='100' r='1.6'/%3E%3Ccircle cx='110' cy='80' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --dk-motif-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%237B7FE8' stroke-opacity='0.08' stroke-width='1.2'%3E%3Cpath d='M60 500 L160 420 L280 460 L380 340 L420 200 L540 140 M280 460 L340 560 M160 420 L100 320'/%3E%3C/g%3E%3Cg fill='%237B7FE8' fill-opacity='0.18'%3E%3Ccircle cx='60' cy='500' r='3'/%3E%3Ccircle cx='160' cy='420' r='4'/%3E%3Ccircle cx='280' cy='460' r='3.4'/%3E%3Ccircle cx='380' cy='340' r='4.4'/%3E%3Ccircle cx='420' cy='200' r='3.6'/%3E%3Ccircle cx='540' cy='140' r='5'/%3E%3Ccircle cx='340' cy='560' r='3'/%3E%3Ccircle cx='100' cy='320' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 3. ATMOSPHERE LAYER (shared mechanism, per-world image) ----------
   Three background layers, painted BEHIND all normal-flow content (CSS
   background is never above content, so this cannot obstruct readability
   or the primary CTA regardless of layer count):
     1. a soft top highlight (depth, not motif)
     2. a small tiled node/circuit texture (close-up "material" feel)
     3. one large fixed "signature" diagram in a corner — this is the
        premium/sci-fi statement layer the Founder asked for: a real
        network/circuit/neural/constellation diagram, not a repeating tile,
        so it reads as "designed", not wallpaper. Opacity is baked into
        each SVG's own stroke/fill-opacity (7-11%) — capped there, not
        overridable per-screen, per contract §7. */
body[data-world] {
  background-color: var(--dk-tint) !important;
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,0.05), transparent 60%),
    var(--dk-pattern-svg),
    var(--dk-motif-svg);
  background-repeat: no-repeat, repeat, no-repeat;
  background-position: center top, 0 0, top right;
  background-size: 100% 640px, 110px 110px, min(620px, 90vw) auto;
  background-attachment: fixed, fixed, fixed;
  color: var(--dk-text-primary) !important;
}
@media (max-width: 480px) {
  /* On phones the signature diagram would otherwise dominate a narrow
     canvas — shrink + fade it further so it stays "atmospheric", never
     competing with the block-card content directly below the top bar. */
  body[data-world] { background-size: 100% 640px, 90px 90px, 380px auto; }
}

/* ==========================================================================
   4. T1 — hoc/mission.html — BASE SHELL + GLOBAL PRIMITIVES overrides
   Targets the [1/4] TEEN BASE SHELL + [2/4] GLOBAL PRIMITIVES layers that
   already apply to all 17 T1 missions (per the file's own doc comments) —
   this is the correct shared leverage point, not a per-mission rewrite.
   ========================================================================== */
body[data-world="t1"] #block-card,
body[data-world="t1"] .character-card,
body[data-world="t1"] .decision-card,
body[data-world="t1"] .t3-map-sheet {
  background: var(--dk-surface-1);
  color: var(--dk-text-primary);
  border-color: var(--dk-border);
  box-shadow: var(--dk-shadow);
}
body[data-world="t1"] #block-kicker { color: var(--dk-accent); }
body[data-world="t1"] #block-title,
body[data-world="t1"] .decision-card-title,
body[data-world="t1"] .character-line { color: var(--dk-text-primary); }
body[data-world="t1"] #block-body,
body[data-world="t1"] .decision-card-desc,
body[data-world="t1"] .argument-scaffold-step { color: var(--dk-text-secondary); }

/* ---------- SYSTEMIC DARK-ON-DARK FIX (Production Experience Recovery,
   2026-09-05) — root cause: #block-interaction is where every AI-response
   panel, loading state, resume/review note, and bullet list is rendered,
   and a large amount of that dynamic HTML still uses RAW Tailwind
   `text-ink`/`text-ink/NN` utility classes — written before the dark-theme
   retrofit, when #block-card's default background was still light (Tailwind
   `bg-white`). #block-card is now unconditionally dark for all 17 T1
   missions, so every one of these un-migrated `text-ink*` classes renders
   dark text on a dark card. This is NOT one screenshot's bug — it is every
   AI block's loading/resume/reviewed state and every AI-response bullet
   list, in every T1 mission except M08 (whose courtroom panel happened to
   opt in to light text before this fix existed — see `opts.lightText`
   above renderTeenAiBlock). Fixed at the container level so no future
   `text-ink` class added inside this container silently regresses again:
   exact `text-ink` (no opacity) -> primary light token (this is the
   stronger-emphasis case, e.g. bold inline labels); `text-ink/NN` (any
   opacity suffix, e.g. `text-ink/60`, `text-ink/80`) -> secondary light
   token. `#block-feedback` is a SIBLING of #block-interaction (not inside
   it) and keeps its own legitimate light `bg-cream` card with dark text —
   correctly untouched by this rule. */
body[data-world="t1"] #block-interaction [class~="text-ink"] { color: var(--dk-text-primary) !important; }
body[data-world="t1"] #block-interaction [class*="text-ink/"] { color: var(--dk-text-secondary) !important; }
body[data-world="t1"] .choice-btn {
  border-color: var(--dk-border-strong);
  background: var(--dk-surface-2);
  color: var(--dk-text-primary);
}
body[data-world="t1"] .choice-btn.selected {
  border-color: var(--dk-accent-strong);
  background: var(--dk-accent-soft);
}
body[data-world="t1"] textarea,
body[data-world="t1"] textarea#short-text-input {
  background: var(--dk-surface-2);
  border-color: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
body[data-world="t1"] #bottom-nav {
  background: var(--dk-surface-1);
  border-top-color: var(--dk-border);
  box-shadow: 0 -4px 16px -6px rgba(0,0,0,0.5);
}
body[data-world="t1"] .step-dot { background: var(--dk-border-strong); }
body[data-world="t1"] .step-dot.current { background: var(--dk-accent); }
body[data-world="t1"] .step-dot.done { background: #22C55E; } /* evidence-state green stays — not color-only, still paired with icon/label elsewhere */
body[data-world="t1"] .evidence-chip {
  background: rgba(63,207,190,0.10);
  border-color: rgba(63,207,190,0.35);
  color: #7EE0D2;
}
body[data-world="t1"] .decision-card.selected {
  border-color: var(--dk-accent-strong);
  background: var(--dk-accent-soft);
}
body[data-world="t1"] .decision-card-radio { border-color: var(--dk-border-strong); }
body[data-world="t1"] #mission-eyebrow,
body[data-world="t1"] #mission-title { color: var(--dk-text-primary); }

/* .teen-choice-* — S0 global choice-list primitive, used across many T1
   missions (not just M14) — same leverage point as #block-card. */
body[data-world="t1"] .teen-choice-list {
  background: var(--dk-surface-1);
  border-color: var(--dk-border);
}
body[data-world="t1"] .teen-choice-row { border-bottom-color: var(--dk-border); }
body[data-world="t1"] .teen-choice-row[data-tone="orange"].selected { background: rgba(224,123,39,0.14); }
body[data-world="t1"] .teen-choice-row[data-tone="red"].selected { background: rgba(192,57,43,0.14); }
body[data-world="t1"] .teen-choice-row[data-tone="teal"].selected { background: rgba(15,118,110,0.16); }
body[data-world="t1"] .teen-choice-title { color: var(--dk-text-primary); }
body[data-world="t1"] .teen-choice-desc { color: var(--dk-text-tertiary); }
body[data-world="t1"] .teen-choice-check { border-color: var(--dk-border-strong); }
body[data-world="t1"] .teen-choice-row .teen-choice-icon.numbered { background: var(--dk-surface-2); color: var(--dk-text-secondary); }

/* Courtroom stage (M08) is already a dark panel by design — keep it, just
   fold its accent onto the shared T1 accent so it doesn't clash. DEFER: the
   long tail of one-off experience-specific classes (ecomap-*, biasscan-*,
   argument-scaffold internals, etc.) is NOT individually restyled in this
   batch — see contract doc §Impact Audit for the DEFER list; they inherit
   readable text via the base shell above and are not left illegible, but
   their bespoke visual production is future-ready work, not redone here. */
body[data-world="t1"] .stage-courtroom .courtroom-panel .choice-btn.selected {
  border-color: var(--dk-accent);
  background: rgba(224,167,46,0.16);
}

/* ==========================================================================
   5. SHARED T2/T3/T4 RUNTIME — hoc/mission-t2.html, mission-t3.html,
   mission-t4.html reuse the SAME .t2-* runtime shell (confirmed: identical
   class names/markup across all three files — only fixtures/mission ids
   differ). This is exactly the "one shared architecture, per-world config"
   case: one override block, world accent comes from data-world already.
   ========================================================================== */
body[data-world="t2"] .t2-page,
body[data-world="t3"] .t2-page,
body[data-world="t4"] .t2-page {
  --t2-bg-page: transparent;
  --t2-ink: var(--dk-text-primary);
}
body[data-world="t2"] .t2-card, body[data-world="t3"] .t2-card, body[data-world="t4"] .t2-card,
body[data-world="t2"] .t2-learn-card, body[data-world="t3"] .t2-learn-card, body[data-world="t4"] .t2-learn-card,
body[data-world="t2"] .t2-artifact-panel, body[data-world="t3"] .t2-artifact-panel, body[data-world="t4"] .t2-artifact-panel,
body[data-world="t2"] .t2-matrix-row, body[data-world="t3"] .t2-matrix-row, body[data-world="t4"] .t2-matrix-row {
  background: var(--dk-surface-1);
  border-color: var(--dk-border);
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t2-choice-row, body[data-world="t3"] .t2-choice-row, body[data-world="t4"] .t2-choice-row {
  background: var(--dk-surface-2);
  border-color: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t2-choice-row.selected, body[data-world="t3"] .t2-choice-row.selected, body[data-world="t4"] .t2-choice-row.selected {
  border-color: var(--dk-accent);
  background: var(--dk-accent-soft);
}
body[data-world="t2"] .t2-choice-row .t2-choice-check, body[data-world="t3"] .t2-choice-row .t2-choice-check, body[data-world="t4"] .t2-choice-row .t2-choice-check {
  border-color: var(--dk-border-strong);
}
body[data-world="t2"] textarea.t2-input, body[data-world="t3"] textarea.t2-input, body[data-world="t4"] textarea.t2-input {
  background: var(--dk-surface-2);
  border-color: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t2-bottom-nav, body[data-world="t3"] .t2-bottom-nav, body[data-world="t4"] .t2-bottom-nav {
  background: rgba(20,16,12,0.92);
  border-top-color: var(--dk-border);
  backdrop-filter: blur(8px);
}
body[data-world="t2"] .t2-bottom-nav .t2-btn-back, body[data-world="t3"] .t2-bottom-nav .t2-btn-back, body[data-world="t4"] .t2-bottom-nav .t2-btn-back { color: var(--dk-text-secondary); }
body[data-world="t2"] #t2-btn-next, body[data-world="t3"] #t2-btn-next, body[data-world="t4"] #t2-btn-next {
  background: var(--dk-accent-strong);
}
body[data-world="t2"] .t2-progress span, body[data-world="t3"] .t2-progress span, body[data-world="t4"] .t2-progress span {
  background: var(--dk-border-strong);
}
body[data-world="t2"] .t2-progress span.done, body[data-world="t3"] .t2-progress span.done, body[data-world="t4"] .t2-progress span.done {
  background: var(--dk-accent);
}
body[data-world="t2"] .t3-missionnav-prev, body[data-world="t2"] .t3-missionnav-map,
body[data-world="t3"] .t3-missionnav-prev, body[data-world="t3"] .t3-missionnav-map,
body[data-world="t4"] .t3-missionnav-prev, body[data-world="t4"] .t3-missionnav-map {
  background: var(--dk-surface-1);
  border-color: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t3-map-sheet, body[data-world="t3"] .t3-map-sheet, body[data-world="t4"] .t3-map-sheet {
  background: var(--dk-tint);
}
/* AI panel keeps its distinct violet identity (it signals "AI is acting
   here", a semantic that must stay stable across worlds per the evidence/
   provenance rule) — only darkened to sit correctly on the dark page. */
body[data-world="t2"] .t2-ai-panel, body[data-world="t3"] .t2-ai-panel, body[data-world="t4"] .t2-ai-panel {
  background: linear-gradient(135deg, rgba(108,92,231,0.20), rgba(108,92,231,0.06));
  border-color: rgba(108,92,231,0.4);
}
body[data-world="t2"] .t2-ai-output-line, body[data-world="t3"] .t2-ai-output-line, body[data-world="t4"] .t2-ai-output-line {
  background: var(--dk-surface-2);
  color: var(--dk-text-primary);
}
/* character-card (An/Minh/Linh/Sulato mentor quotes) — identity tint kept
   per contract §13, only the base card + line/name text darkened so quote
   text doesn't wash out against its own tinted gradient. */
body[data-world="t2"] .character-card, body[data-world="t3"] .character-card, body[data-world="t4"] .character-card {
  background-color: var(--dk-surface-1);
  background-blend-mode: overlay;
}
body[data-world="t2"] .character-line, body[data-world="t3"] .character-line, body[data-world="t4"] .character-line {
  color: var(--dk-text-primary);
}
body[data-world="t2"] .character-name, body[data-world="t3"] .character-name, body[data-world="t4"] .character-name {
  color: var(--dk-text-primary);
}
/* sticky top navbar (T3/T4 reuse it) + its map/back controls */
body[data-world="t2"] .t3-navbar, body[data-world="t3"] .t3-navbar, body[data-world="t4"] .t3-navbar {
  background: rgba(20,16,12,0.94);
  border-bottom-color: var(--dk-border);
}
body[data-world="t2"] .t3-navbar-pos, body[data-world="t3"] .t3-navbar-pos, body[data-world="t4"] .t3-navbar-pos,
body[data-world="t2"] .t3-navbar-archetype, body[data-world="t3"] .t3-navbar-archetype, body[data-world="t4"] .t3-navbar-archetype,
body[data-world="t2"] .t3-navbar-prevlink, body[data-world="t3"] .t3-navbar-prevlink, body[data-world="t4"] .t3-navbar-prevlink {
  color: var(--dk-text-secondary);
}
body[data-world="t2"] .t3-navbar-mapbtn, body[data-world="t3"] .t3-navbar-mapbtn, body[data-world="t4"] .t3-navbar-mapbtn {
  background: var(--dk-surface-2);
  border-color: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
/* "mang vào studio" reuse-bridge tag rows */
body[data-world="t2"] .t3-reusebridge-row, body[data-world="t3"] .t3-reusebridge-row, body[data-world="t4"] .t3-reusebridge-row {
  background: var(--dk-surface-2);
  border-color: rgba(63,207,190,0.3);
}
body[data-world="t2"] .t3-reusebridge-row.t3-reusebridge-missing, body[data-world="t3"] .t3-reusebridge-row.t3-reusebridge-missing, body[data-world="t4"] .t3-reusebridge-row.t3-reusebridge-missing {
  border-color: var(--dk-border);
}
body[data-world="t2"] .t3-reusebridge-value, body[data-world="t3"] .t3-reusebridge-value, body[data-world="t4"] .t3-reusebridge-value {
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t3-reusebridge-row.t3-reusebridge-missing .t3-reusebridge-tag,
body[data-world="t3"] .t3-reusebridge-row.t3-reusebridge-missing .t3-reusebridge-tag,
body[data-world="t4"] .t3-reusebridge-row.t3-reusebridge-missing .t3-reusebridge-tag {
  color: var(--dk-text-tertiary);
}

/* ==========================================================================
   6. CLOSURE SURFACES — t2-completion.html / t2-midpoint.html are ALREADY
   dark (#150F1C, teal accent) from an earlier pass — KEEP AS-IS structurally,
   token-align only: fold their hardcoded teal onto the shared T3 accent so
   the "completed T2 → teaser T3" moment reads as one continuous system
   rather than a coincidental color match.
   ========================================================================== */
body[data-world="t2"].closure-surface { background-color: #150F1C !important; }

/* ==========================================================================
   7. LIGHT-SURFACE / DARK-ON-DARK CONTRAST HARDENING
   (P1 systemic fix — Mission Runtime Desktop + Contrast batch)
   ==========================================================================
   Root cause (confirmed by CSS/inheritance audit, not a per-screenshot patch):
   several components were authored before the dark-theme retrofit and never
   revisited. Two failure shapes, both closed here:

   (a) Component keeps its ORIGINAL LIGHT background (#fff or a near-white
       tint) but the page-level `body[data-world] { color: ... !important }`
       rule only sets BODY's own color — it does not touch a descendant
       that has no explicit `color` of its own, so such a descendant simply
       inherits the (light) text color down onto its own (light) card ->
       invisible. Fix: give the component a dark surface background so the
       already-inherited light text becomes correctly readable, consistent
       with every other card in the shell (no new "light card in a dark app"
       pattern introduced).
       Confirmed instances: `.t3-map-row` (T2/T3/T4 Studio/Workflow/Ops Map —
       this is the Founder's "locked Mission card" screenshot) and
       `.t3-ai-wall-card` (T3/T4 AI wall — the "AI response card" screenshot).

   (b) Component has NO background of its own (transparent) but DOES set an
       explicit hardcoded dark hex `color` (authored assuming it would sit on
       the old light page) and now renders directly on a dark card ->
       dark-on-dark. Fix: override just the `color` to the correct light/
       tinted-light token, background untouched (still transparent, correctly
       showing the dark card underneath).
       Confirmed instances: `.teen-response-point[data-tone="ecosystem|
       consent|datalab"]` headline/detail/chevron (3 of the 6 real data-tone
       variants were fixed in an earlier pass — reason/verify/weakness — the
       other 3 were missed, same bug, same component family: this is the
       Founder's "learner choice / AI response text barely readable"
       screenshot, recurring across multiple T1 missions, not one screenshot),
       `.trap-card` + children, `.journey-value` (T1 courtroom recap),
       `.t4-sim-banner` (T4 risk banner: text was dark-on-near-dark, not
       fully invisible but well under the 4.5:1 target — brightened).

   Contract going forward (§28 of the batch brief): DARK SURFACE -> LIGHT
   TEXT, LIGHT SURFACE -> STRONG DARK TEXT. Existing self-contained light
   cards that already pair a light background with their OWN dark text
   (.teen-object, .ecomap*, .signal-dossier*, .matrix-row, .rulesheet*,
   .teen-datalist*, .portfolio-card*, .teen-artifact-hero — all audited)
   already satisfy this contract as-is and are intentionally left untouched.
   ========================================================================== */

/* --- (a) T2/T3/T4 shared Map/Wall — light bg -> dark surface --- */
body[data-world="t2"] .t3-map-row, body[data-world="t3"] .t3-map-row, body[data-world="t4"] .t3-map-row {
  background: var(--dk-surface-2);
  border-color: var(--dk-border);
}
body[data-world="t2"] .t3-map-row.current, body[data-world="t3"] .t3-map-row.current, body[data-world="t4"] .t3-map-row.current {
  border-color: var(--dk-accent);
  background: var(--dk-accent-soft);
}
body[data-world="t2"] .t3-map-num, body[data-world="t3"] .t3-map-num, body[data-world="t4"] .t3-map-num {
  background: var(--dk-border-strong);
  color: var(--dk-text-primary);
}
body[data-world="t2"] .t3-ai-wall-card, body[data-world="t3"] .t3-ai-wall-card, body[data-world="t4"] .t3-ai-wall-card {
  background: var(--dk-surface-2);
  color: var(--dk-text-primary);
}

/* --- (b) T1 courtroom recap / trap-card / risk banner / response-point tones --- */
body[data-world="t1"] .journey-value { color: var(--dk-text-primary); }
body[data-world="t1"] .trap-card { background: var(--dk-surface-2); border-color: var(--dk-border); }
body[data-world="t1"] .trap-card-num { color: var(--dk-text-tertiary); }
body[data-world="t1"] .trap-card-name { color: var(--dk-text-primary); }

/* the 3 previously-missed .teen-response-point data-tone variants — same
   fix shape already applied to reason/verify/weakness above in this file:
   keep the tinted background, brighten headline/detail/chevron to a light
   tint of the same accent hue so the tone identity survives. */
body[data-world="t1"] .teen-response-point[data-tone="ecosystem"] .teen-response-num { color: #C7D0F5; }
body[data-world="t1"] .teen-response-point[data-tone="ecosystem"] .teen-response-headline { color: #F4EEE3; }
body[data-world="t1"] .teen-response-point[data-tone="ecosystem"] .teen-response-detail { color: #C7D0F5; }
body[data-world="t1"] .teen-response-point[data-tone="ecosystem"] .teen-response-chevron { color: #9AA6F0; }

body[data-world="t1"] .teen-response-point[data-tone="consent"] .teen-response-num { color: #F5D3E0; }
body[data-world="t1"] .teen-response-point[data-tone="consent"] .teen-response-headline { color: #F4EEE3; }
body[data-world="t1"] .teen-response-point[data-tone="consent"] .teen-response-detail { color: #F0BFD2; }
body[data-world="t1"] .teen-response-point[data-tone="consent"] .teen-response-chevron { color: #E091AC; }

body[data-world="t1"] .teen-response-point[data-tone="datalab"] .teen-response-num { color: #CFEDE8; }
body[data-world="t1"] .teen-response-point[data-tone="datalab"] .teen-response-headline,
body[data-world="t1"] .teen-response-point[data-tone="datalab"] .teen-response-detail { color: #CFEDE8; }
body[data-world="t1"] .teen-response-point[data-tone="datalab"] .teen-response-chevron { color: #5FC9BA; }

body[data-world="t4"] .t4-sim-banner { color: #F5B8AC; background: rgba(192,57,43,0.16); border-color: rgba(192,57,43,0.4); }
