/* ============================================================================
   Native Tongues — Shared Design Tokens
   One cohesive system, derived from teacher-tool/landing.html.
   Themes: dark (hero) · vellum (warm light) · jungle (bioluminescent)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
[data-theme="dark"] {
  --ink:        #0b0b0d;
  --ink-1:      #131418;
  --ink-2:      #1a1c20;
  --ink-3:      #232529;
  --line:       rgba(255,255,255,0.07);
  --line-soft:  rgba(255,255,255,0.04);
  --line-hard:  rgba(255,255,255,0.14);

  --paper:      #f1ece1;
  --paper-mute: #cfc7b5;

  --text:       #ece9e2;
  --text-mute:  #98948a;
  --text-dim:   #5e5c57;

  --gold:       #c4a24a;
  --gold-hi:    #d6b75e;
  --gold-soft:  rgba(196,162,74,0.18);
  --gold-line:  rgba(196,162,74,0.32);
  --gold-glow:  rgba(214,183,94,0.55);

  --card:       linear-gradient(180deg, #16171b, #0f1014);
  --card-flat:  #131418;

  --field-bg:   rgba(255,255,255,0.02);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 22px 50px -28px rgba(0,0,0,0.9);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 70px -28px rgba(0,0,0,0.9);
}

/* ── VELLUM — warm light parchment, gold accent ─────────────────────── */
[data-theme="vellum"] {
  --ink:        #e8dfce;
  --ink-1:      #f1ebdd;
  --ink-2:      #f6f1e6;
  --ink-3:      #fbf7ee;
  --line:       rgba(60,48,24,0.12);
  --line-soft:  rgba(60,48,24,0.07);
  --line-hard:  rgba(60,48,24,0.22);

  --paper:      #2c2416;
  --paper-mute: #4a3f2a;

  --text:       #2c2416;
  --text-mute:  #6b5d45;
  --text-dim:   #9a8e74;

  --gold:       #9a7716;
  --gold-hi:    #b08c1f;
  --gold-soft:  rgba(154,119,22,0.16);
  --gold-line:  rgba(154,119,22,0.34);
  --gold-glow:  rgba(176,140,31,0.45);

  --card:       linear-gradient(180deg, #fbf7ee, #f3eddf);
  --card-flat:  #f6f1e6;

  --field-bg:   rgba(60,48,24,0.03);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px -26px rgba(74,58,24,0.45);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.7) inset, 0 26px 60px -28px rgba(74,58,24,0.5);
}

/* ── JUNGLE — bioluminescent deep-forest, green accent ──────────────── */
[data-theme="jungle"] {
  --ink:        #07140c;
  --ink-1:      #0c2114;
  --ink-2:      #102b1a;
  --ink-3:      #16361f;
  --line:       rgba(120,255,170,0.09);
  --line-soft:  rgba(120,255,170,0.05);
  --line-hard:  rgba(120,255,170,0.18);

  --paper:      #eafff1;
  --paper-mute: #bdeccb;

  --text:       #e3f6e7;
  --text-mute:  #87b394;
  --text-dim:   #4d6f57;

  --gold:       #36c46a;
  --gold-hi:    #5cf08c;
  --gold-soft:  rgba(66,232,112,0.16);
  --gold-line:  rgba(66,232,112,0.30);
  --gold-glow:  rgba(92,240,140,0.6);

  /* jungle: DARK-GREEN GLASS cards on the green page (original design look) */
  --card:       linear-gradient(180deg, #103018, #0a2010);
  --card-flat:  #0e2614;
  --card-edge:  var(--line);
  /* card text on green glass = mint/gold (NOT dark ink) */
  --ink-text:    #e8f5ec;
  --ink-text-dim:#a9d8bb;
  --ink-gold:    var(--gold-hi);

  --field-bg:   rgba(120,255,170,0.03);

  --shadow-card: 0 1px 0 rgba(120,255,170,0.06) inset, 0 22px 50px -28px rgba(0,0,0,0.92);
  --shadow-lift: 0 1px 0 rgba(120,255,170,0.08) inset, 0 30px 70px -28px rgba(0,0,0,0.92);
}

/* ── radii & motion ──────────────────────────────────────────────────── */
:root {
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 18px;
  --r-xl: 26px;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  /* labels/eyebrows use Inter (the UI sans), not a monospace — kept as --mono
     so the 33 existing label rules switch in one place. Uppercase + letter-spacing
     on those rules still gives the "eyebrow" treatment. */
  --mono:  "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── reset ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink); }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold-soft); color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hard); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── type primitives ─────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow.lead::before {
  content: "";
  width: 20px; height: 1px;
  background: var(--gold-line);
}
.serif { font-family: var(--serif); }
.gold-rule {
  display: inline-block;
  width: 30px; height: 1px;
  background: var(--gold);
}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn-primary { background: var(--paper); color: var(--ink); border: 1px solid var(--paper); }
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-hard); }
.btn-ghost:hover { border-color: var(--gold-line); background: var(--gold-soft); }

.btn-gold { background: transparent; color: var(--gold-hi); border: 1px solid var(--gold-line); }
.btn-gold:hover { background: var(--gold-soft); }

/* ── a glowing gold node (shared map/trail motif) ────────────────────── */
.node {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 5px var(--gold-line),
    0 0 16px var(--gold-glow);
}
.node.dim {
  background: var(--text-dim);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--line);
}
.node.done {
  background: var(--gold-hi);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--gold-line);
}

/* ── card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ── focus visibility ────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════
   JUNGLE = DARK-GREEN-GLASS cards (original design). Card text on the
   green card is mint/gold — the BASE .dc-es (--text=mint) / .dc-en
   (--text-dim) / .dc-es.now (--gold-hi=green) rules already produce the
   right look, so no jungle .dcard override is needed (would only re-break
   it with dark ink). The "manuscripts in the jungle" cream override was
   removed here on 2026-06-01.
   ════════════════════════════════════════════════════════════════════ */

/* VELLUM: warm parchment card → gold-on-cream target + dim ink english (legible).
   vellum has no --ink-* vars; use its dark --text / muted --text-mute / --gold-hi. */
[data-theme="vellum"] .dcard .dc-es { color: var(--gold-hi); }
[data-theme="vellum"] .dcard .dc-en { color: var(--text-mute); }
[data-theme="vellum"] .dcard.speaking .dc-es.now { color: var(--gold-hi); }
[data-theme="vellum"] .dcard.speaking .dc-en.now { color: var(--text); }
[data-theme="vellum"] .dc-mode { color: var(--text-mute); border-color: var(--line-hard); }
/* jungle .dash-resume / .sheet / .dict dark-ink-on-cream rules removed
   2026-06-01: those surfaces are green-glass/dark now, so the base
   mint/gold text (var(--text) / var(--gold-hi)) is correct. The journey
   "continue" card is handled by the .dash-current chrome block below. */

/* ════════════════════════════════════════════════════════════════════
   CHROME vs CONTENT cards:
   - CONTENT card (drill .dcard, reader story) = manuscript parchment in light.
   - CHROME card (journey dashboard .dash-current, panels) = page-toned glass,
     belongs to the page (NOT parchment). Defined per theme below.
   ════════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"] { --card-chrome: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); --card-chrome-edge: var(--line); --on-chrome: var(--text); --on-chrome-dim: var(--text-mute); --on-chrome-gold: var(--gold-hi); }
/* vellum chrome IS parchment (correct — vellum is the light parchment theme) */
[data-theme="vellum"] { --card-chrome: linear-gradient(180deg, #fbf7ee, #f3eddf); --card-chrome-edge: var(--line); --on-chrome: var(--text); --on-chrome-dim: var(--text-mute); --on-chrome-gold: var(--gold-hi); }
/* jungle chrome = DARK-GREEN GLASS (NOT cream) — matches --card so the
   journey "continue" + daily-mission cards sit as green glass on the green page */
[data-theme="jungle"] { --card-chrome: linear-gradient(180deg, #103018, #0a2010); --card-chrome-edge: var(--gold-line); --on-chrome: var(--text); --on-chrome-dim: var(--text-mute); --on-chrome-gold: var(--gold-hi); }

/* journey dashboard "continue" card = chrome (green-glass on jungle,
   dark on dark, parchment on vellum). Text = gold/mint on dark+jungle,
   gold/ink on vellum — all via the per-theme --on-chrome* tokens. */
.dash-current { background: var(--card-chrome) !important; border-color: var(--card-chrome-edge) !important; }
.dash-current .dc-eyebrow { color: var(--on-chrome-gold); }
.dash-current .dc-chapter { color: var(--on-chrome-dim); }
.dash-current .dc-story   { color: var(--on-chrome-gold); }
.dash-current .dc-en      { color: var(--on-chrome-dim); }
/* jungle: green-glass card → gold-hi target + mint-muted chapter/english (NOT dark ink) */
[data-theme="jungle"] .dash-current .dc-story,
[data-theme="jungle"] .dash-current .dc-eyebrow { color: var(--gold-hi); }
[data-theme="jungle"] .dash-current .dc-chapter,
[data-theme="jungle"] .dash-current .dc-en { color: var(--text-mute); }

/* THEME the range sliders (real app's <input type=range> were raw blue) — gold, all themes */
input[type=range] { -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:var(--track, var(--line-hard)); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--gold); border:2px solid var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold); border:2px solid var(--ink); cursor:pointer; }

/* real brand logo (replaces the CSS diamond .mark placeholder) */
.brand .mark-logo { width: 26px; height: 26px; object-fit: contain; display: block; flex-shrink: 0; }
@media (max-width: 560px){ .brand .mark-logo { width: 24px; height: 24px; } }

/* jungle modal dark-ink-on-cream forcing removed 2026-06-01: jungle
   modals use --card/--card-flat which are green-glass now, so the real
   app's inline color:var(--text) (mint on jungle) is already legible.
   Forcing dark ink here would re-break it. */

/* real drill card is static — no equalizer */
.dc-eq { display: none !important; }

/* Bootcamp drill card: the REAL #english-text / #target-text relocated into the design card.
   Style them as the design's dc-en (helper) + dc-es (hero) — static, one serif, no highlight. */
.dcard .dc-es-real, #target-text.dc-es-real {
  font-family: var(--serif); font-weight: 500; font-size: clamp(30px,5vw,48px);
  line-height: 1.14; letter-spacing: -0.01em; color: var(--gold-hi);
  max-width: 20ch; text-align: center; text-wrap: balance; order: 1; margin: 0 auto;
}
.dcard .dc-en-real, #english-text.dc-en-real {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(17px,2.4vw,22px);
  line-height: 1.35; color: var(--text-dim); max-width: 30ch; text-align: center; order: 3; margin: 14px auto 0;
}
.dcard .dc-es-real .clickable-word, .dcard #target-text span { cursor: pointer; }
/* The relocated real elements keep their engine classes (.flashcard-text.target-text +
   #target-text) whose embedded engine CSS forces a DARK color via ID specificity. Override
   per-theme with ID-strength selectors so the design colors win on every theme.
   dark + jungle: gold/green target, mint english.  vellum: gold-on-parchment + dim ink. */
[data-theme="dark"] #target-text.dc-es-real,
[data-theme="jungle"] #target-text.dc-es-real { color: var(--gold-hi) !important; }
[data-theme="dark"] #english-text.dc-en-real,
[data-theme="jungle"] #english-text.dc-en-real { color: var(--text-dim) !important; }
[data-theme="vellum"] #target-text.dc-es-real { color: var(--gold-hi) !important; }
[data-theme="vellum"] #english-text.dc-en-real { color: var(--text-mute) !important; }
/* the real elements may carry a .hidden class from the engine — respect it */
.dcard .dc-en-real.hidden, .dcard .dc-es-real.hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════
   DAILY MISSION card (real #dailyMissionCard, lifted into the journey
   dashboard slot). Force on-language styling so the ring is a thin
   gold/green ring (never a black-filled hole) + a chrome card.
   ════════════════════════════════════════════════════════════════════ */
#designDailyMissionSlot .daily-mission-card,
.daily-mission-card {
  background: var(--card-chrome, var(--card)) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  max-width: none !important; margin: 0 !important;
}
.daily-mission-card .dm-ring-bg { fill: none !important; stroke: var(--gold-soft) !important; stroke-width: 4 !important; }
.daily-mission-card .dm-ring-fg { fill: none !important; stroke: var(--gold-hi) !important; stroke-width: 4 !important; }
.daily-mission-card .dm-ring-text { color: var(--gold-hi) !important; font-family: var(--mono) !important; font-size: 12px !important; }
.daily-mission-card .dm-label { font-family: var(--mono) !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--text-dim) !important; font-size: 10.5px !important; }
.daily-mission-card .dm-amount { color: var(--text) !important; }
.daily-mission-card .dm-chev { color: var(--text-dim) !important; }
.daily-mission-card .dm-pill { color: var(--gold-hi) !important; background: var(--gold-soft) !important; border-color: var(--gold-line) !important; }
/* jungle: card is dark-GREEN-GLASS chrome (NOT cream), text mint/green; ring stays gold/green arc */
[data-theme="jungle"] .daily-mission-card, body.jungle .daily-mission-card { background: var(--card-chrome) !important; border-color: var(--gold-line) !important; }