/* =========================================================================
   Bonjour! — Design System
   Mobile-first. iOS Safari + Android compatible.
   Inspired by Apple HIG / Linear / Stripe. Calm. Confident. Premium.
   ========================================================================= */

/* ---------- TOKENS (LIGHT) ---------- */
:root {
  /* Neutral scale (Apple-tuned grays) */
  --gray-0:   #FFFFFF;
  --gray-50:  #FBFBFD;   /* page background, very subtle */
  --gray-100: #F5F5F7;   /* card-on-page contrast, Apple's body color */
  --gray-150: #EFEFF4;
  --gray-200: #E5E5EA;
  --gray-300: #D2D2D7;
  --gray-400: #AEAEB2;
  --gray-500: #8E8E93;
  --gray-600: #6E6E73;
  --gray-700: #48484A;
  --gray-800: #1D1D1F;   /* Apple's primary text */
  --gray-900: #0A0A0B;

  /* Brand — French flag, demoted to accent */
  --bleu:     #0055A4;
  --bleu-2:   #003D7A;
  --rouge:    #EF4135;
  --accent:   #5E5CE6;   /* indigo, Apple-like */
  --accent-2: #7C3AED;

  /* Semantic */
  --good:     #34C759;
  --good-2:   #248A3D;
  --warn:     #FF9F0A;
  --bad:      #FF3B30;
  --bad-2:    #C7251C;

  /* Surfaces */
  --bg:        var(--gray-50);
  --surface:   var(--gray-0);    /* card default */
  --surface-2: var(--gray-100);  /* nested card */
  --surface-3: var(--gray-150);  /* even nested */
  --ink:       var(--gray-800);
  --ink-2:     var(--gray-600);
  --mute:      var(--gray-500);
  --line:      var(--gray-200);
  --line-2:    var(--gray-300);

  /* Legacy aliases (kept so existing modules still render) */
  --blanc:    var(--gray-0);
  --cream:    var(--surface-2);
  --card:     var(--surface);

  /* Type scale (modular, Apple-like ramp) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;   /* body */
  --fs-19: 19px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Weights */
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  /* Letter spacing (display tracking, Apple-style) */
  --ls-tight: -0.022em;
  --ls-snug:  -0.014em;
  --ls-base:  -0.003em;
  --ls-wide:  0.04em;

  /* Spacing scale (4px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 9999px;
  --radius: var(--r-lg);   /* legacy */

  /* Elevation (subtle, layered) */
  --e0: none;
  --e1: 0 1px 2px rgba(15, 17, 21, .04), 0 1px 3px rgba(15, 17, 21, .06);
  --e2: 0 2px 4px rgba(15, 17, 21, .04), 0 4px 12px rgba(15, 17, 21, .06);
  --e3: 0 4px 12px rgba(15, 17, 21, .06), 0 12px 32px rgba(15, 17, 21, .10);
  --e4: 0 12px 24px rgba(15, 17, 21, .08), 0 24px 60px rgba(15, 17, 21, .14);
  --shadow: var(--e2); /* legacy */

  /* Focus ring */
  --ring: 0 0 0 4px rgba(94, 92, 230, .25);

  /* Motion */
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   320ms;
  --t-slower: 480ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-snap:   cubic-bezier(.34, 1.56, .64, 1);

  /* Safe area */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Header chrome height — used for sticky offsets */
  --header-h: 60px;
}

/* ---------- TOKENS (DARK) ---------- */
body.dark {
  --gray-0:   #000000;
  --gray-50:  #0A0A0B;
  --gray-100: #1C1C1E;
  --gray-150: #232325;
  --gray-200: #2C2C2E;
  --gray-300: #3A3A3C;
  --gray-400: #48484A;
  --gray-500: #8E8E93;
  --gray-600: #AEAEB2;
  --gray-700: #C7C7CC;
  --gray-800: #F2F2F7;
  --gray-900: #FFFFFF;

  --bleu:    #5AA0E0;
  --rouge:   #FF6961;
  --accent:  #7D7AFF;

  --bg:        #000000;
  --surface:   #1C1C1E;
  --surface-2: #2C2C2E;
  --surface-3: #3A3A3C;
  --ink:       #F2F2F7;
  --ink-2:     #C7C7CC;
  --mute:      #8E8E93;
  --line:      #2C2C2E;
  --line-2:    #3A3A3C;
  --blanc:     var(--surface);
  --cream:     var(--surface-2);
  --card:      var(--surface);

  --e1: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
  --e2: 0 2px 4px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.5);
  --e3: 0 4px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.6);
  --e4: 0 12px 24px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.8);
  --shadow: var(--e2);

  --ring: 0 0 0 4px rgba(125, 122, 255, .35);
}

/* ---------- RESET ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-feature-settings: "ss01", "cv11"; /* Inter stylistic sets */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-17);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  font-weight: var(--fw-reg);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--t-base) var(--ease-in-out), color var(--t-base) var(--ease-in-out);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--ink);
}

p { line-height: var(--lh-base); }

::selection { background: rgba(94, 92, 230, .2); color: var(--ink); }

/* Numbers want tabular alignment in stats/progress */
.stat, .stats, .progress-num, .meter-label { font-variant-numeric: tabular-nums; }

/* =========================================================================
   TOPBAR
   ========================================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 10px var(--sp-6);
  padding-top: calc(10px + var(--safe-top));
  padding-left: calc(var(--sp-6) + var(--safe-left));
  padding-right: calc(var(--sp-6) + var(--safe-right));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-h);
}

.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  padding: 11px 9px;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--t-fast) var(--ease-in-out);
}
.hamburger:hover { background: var(--surface-2); }
.hamburger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-19);
  letter-spacing: var(--ls-snug);
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
}
.logo { font-size: 22px; line-height: 1; }

.nav {
  display: flex;
  gap: 2px;
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 7px 10px;
  border-radius: var(--r-md);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: var(--fw-med);
  font-size: var(--fs-13);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-in-out), color var(--t-fast);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  letter-spacing: var(--ls-base);
  white-space: nowrap;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a.active { background: var(--ink); color: var(--surface); }
body.dark .nav a.active { background: var(--gray-800); color: var(--gray-50); }

/* Nav pills — color-coded shortcuts (oral focus, mock) */
.nav .nav-pill-accent { background: rgba(94, 92, 230, .12); color: var(--accent); }
.nav .nav-pill-listen { background: rgba(10, 132, 255, .12); color: #0A84FF; }
.nav .nav-pill-mock   { background: var(--rouge); color: #fff; }

/* Drawer-only chrome — only shown when nav is in mobile drawer mode */
.nav .nav-group, .nav .nav-close { display: none; }

.stats {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  margin-left: auto;
  align-items: center;
}
.stat {
  background: var(--surface-2);
  border: none;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  font-size: var(--fs-13);
  color: var(--ink-2);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background var(--t-fast);
  cursor: pointer;
}
.stat:hover { background: var(--surface-3); }
.stat b { color: var(--ink); font-weight: var(--fw-bold); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 49;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-in-out);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-backdrop.open { display: block; opacity: 1; }

/* Prevent body scroll under the drawer on mobile */
body.nav-open, body.modal-open { overflow: hidden; }

/* Credit modal — opens from footer "Built by Arthik" link */
.credit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.credit-modal.open { display: flex; }
.credit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: cm-fade var(--t-base) var(--ease-in-out);
}
.credit-modal-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  width: 100%;
  max-width: 420px;
  text-align: center;
  box-shadow: var(--e4);
  animation: cm-pop var(--t-slow) var(--ease-snap);
}
.credit-modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 36px;
  height: 36px;
  border: none;
  background: var(--surface-2);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.credit-modal-close:hover { background: var(--surface-3); }
.credit-modal-avatar {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.credit-modal-name {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  text-decoration: none;
}
a.credit-modal-name { transition: color var(--t-fast); }
a.credit-modal-name:hover { color: var(--accent); text-decoration: underline; }
.credit-modal-tag {
  color: var(--ink-2);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  margin: 0 0 var(--sp-5);
}
.credit-modal-cta {
  display: inline-flex;
  margin-bottom: var(--sp-3);
}
.credit-modal-hint {
  font-size: var(--fs-12);
  color: var(--mute);
  margin: 0;
}
@keyframes cm-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cm-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Auto-advance row after a quiz answer (Chrome.advance) */
.advance-row {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.advance-row .advance-cd {
  font-variant-numeric: tabular-nums;
  opacity: .8;
  margin-left: 4px;
}
.advance-row .advance-arrow { margin-left: 2px; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
main {
  flex: 1;
  padding: var(--sp-8) var(--sp-6);
  padding-left: calc(var(--sp-6) + var(--safe-left));
  padding-right: calc(var(--sp-6) + var(--safe-right));
  padding-bottom: calc(var(--sp-9) + var(--safe-bottom));
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}

.footer {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  color: var(--mute);
  font-size: var(--fs-13);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-10);
}
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }

/* =========================================================================
   HERO — Apple-style, big calm headline
   ========================================================================= */
.hero {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-2xl);
  padding: var(--sp-10) var(--sp-9);
  margin-bottom: var(--sp-7);
  box-shadow: var(--e1);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero h1 {
  font-size: clamp(36px, 6vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  margin-bottom: var(--sp-3);
  color: var(--ink);
}
.hero p {
  font-size: clamp(17px, 1.8vw, 22px);
  opacity: .85;
  max-width: 640px;
  line-height: var(--lh-base);
  color: var(--ink-2);
}
.hero .flag-stripes {
  position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px;
  opacity: .04;
  background: repeating-linear-gradient(45deg, var(--ink) 0 30px, transparent 30px 60px);
  border-radius: 50%;
  pointer-events: none;
}

/* Hero with bleu/rouge accent (used for "ready" celebrations) */
.hero.accent {
  background: linear-gradient(135deg, var(--bleu) 0%, #1e40af 50%, var(--rouge) 100%);
  color: white;
  border: none;
}
.hero.accent h1, .hero.accent p { color: white; }
.hero.accent p { opacity: .92; }
.hero.accent .flag-stripes { background: repeating-linear-gradient(45deg, white 0 30px, transparent 30px 60px); opacity: .12; }

/* =========================================================================
   SECTION HEADINGS
   ========================================================================= */
.section-h {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  margin-bottom: var(--sp-5);
  margin-top: var(--sp-8);
}
.section-h:first-child { margin-top: 0; }
.section-sub {
  color: var(--mute);
  font-size: var(--fs-15);
  margin-top: -12px;
  margin-bottom: var(--sp-5);
}

/* =========================================================================
   GRID + CARD — flat surface, hover lift, no thick borders
   ========================================================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--e1);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-fast);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--e3);
  border-color: var(--line-2);
}
.card:active { transform: translateY(0); transition-duration: var(--t-fast); }
.card .icon {
  font-size: 32px;
  margin-bottom: var(--sp-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.card h3 {
  font-size: var(--fs-19);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
.card p {
  color: var(--ink-2);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
}
.card .meter {
  margin-top: var(--sp-4);
  height: 6px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.card .meter > div {
  height: 100%;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}
body.dark .card .meter > div { background: var(--gray-700); }

/* Accent card variant */
.card.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: white;
}
.card.accent h3, .card.accent p { color: white; }
.card.accent p { opacity: .9; }
.card.accent .icon { background: rgba(255,255,255,.18); }

/* Spotlight card — big, used for "Continue" CTA */
.spotlight {
  background: var(--surface);
  border-radius: var(--r-2xl);
  padding: var(--sp-7);
  box-shadow: var(--e2);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  margin-bottom: var(--sp-6);
  transition: box-shadow var(--t-base);
}
.spotlight:hover { box-shadow: var(--e3); }
.spotlight .eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--mute);
  margin-bottom: var(--sp-2);
}
.spotlight h2 {
  font-size: var(--fs-28);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-2);
  color: var(--ink);
}
.spotlight p {
  color: var(--ink-2);
  font-size: var(--fs-15);
  max-width: 480px;
}

/* =========================================================================
   PATH — ladder of milestones
   ========================================================================= */
.path-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.path-node {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  cursor: pointer;
  border: 1px solid var(--line);
  min-height: 64px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.path-node:hover { transform: translateX(4px); box-shadow: var(--e2); border-color: var(--line-2); }
.path-node.unlocked { border-left: 3px solid var(--accent); }
.path-node.done {
  background: var(--surface);
  border-left: 3px solid var(--good);
}
.path-node.locked { opacity: .55; cursor: not-allowed; }
.path-node.locked:hover { transform: none; box-shadow: var(--e1); }
.path-node .num {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
}
.path-node.unlocked .num { background: var(--accent); color: white; }
.path-node.done .num { background: var(--good); color: white; }
.path-node.locked .num { background: var(--surface-2); color: var(--mute); }
.path-node .info { min-width: 0; flex: 1; }
.path-node .info h4 {
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  letter-spacing: var(--ls-base);
}
.path-node .info p {
  color: var(--mute);
  font-size: var(--fs-13);
  margin-top: 2px;
}
.path-node .badge {
  margin-left: auto;
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--ink-2);
  flex-shrink: 0;
  display: none;
}

/* =========================================================================
   LESSON SHELL
   ========================================================================= */
.lesson {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  box-shadow: var(--e1);
  border: 1px solid var(--line);
  min-height: 400px;
}
.lesson h2 {
  font-size: var(--fs-28);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-3);
  color: var(--ink);
}
.lesson .progress {
  height: 4px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.lesson .progress > div {
  height: 100%;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}
body.dark .lesson .progress > div { background: var(--gray-700); }

/* =========================================================================
   MODULE CHROME — breadcrumb + back + progress (Apple-style top chrome)
   ========================================================================= */
.chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.chrome-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-med);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
  min-height: 36px;
}
.chrome-back:hover { background: var(--surface-3); color: var(--ink); transform: translateX(-2px); }
.chrome-back svg, .chrome-back .arrow { width: 16px; height: 16px; flex-shrink: 0; }
.chrome-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-13);
  color: var(--mute);
  font-weight: var(--fw-med);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.chrome-crumbs .sep { opacity: .5; }
.chrome-crumbs b { color: var(--ink); font-weight: var(--fw-semi); }
.chrome-actions { display: inline-flex; gap: var(--sp-2); margin-left: auto; }
.chrome-actions .icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  font-size: var(--fs-15);
  transition: background var(--t-fast), color var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}
.chrome-actions .icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn {
  background: var(--ink);
  color: var(--surface);
  border: none;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  font-size: var(--fs-15);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
  min-height: 40px;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: var(--ls-base);
  line-height: 1;
}
.btn:hover { background: var(--gray-700); }
body.dark .btn { background: var(--gray-800); color: var(--gray-50); }
body.dark .btn:hover { background: var(--gray-700); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn.primary { background: var(--accent); color: white; }
.btn.primary:hover { background: var(--accent-2); }

.btn.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: none;
}
.btn.secondary:hover { background: var(--surface-3); }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn.ghost:hover { background: var(--surface-2); border-color: var(--ink-2); }

.btn.success { background: var(--good); color: white; }
.btn.success:hover { background: var(--good-2); }
.btn.danger { background: var(--bad); color: white; }
.btn.danger:hover { background: var(--bad-2); }

.btn.big { padding: 13px 26px; font-size: var(--fs-17); min-height: 48px; border-radius: var(--r-pill); }
.btn.sm  { padding: 7px 14px;  font-size: var(--fs-13); min-height: 32px; }

/* Inline icon for "→" or other glyphs inside buttons */
.btn .arr { transition: transform var(--t-fast); }
.btn:hover .arr { transform: translateX(3px); }

/* =========================================================================
   UTILITIES
   ========================================================================= */
.row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.center { text-align: center; }
.spacer { height: var(--sp-5); }
.spacer.lg { height: var(--sp-8); }
.muted { color: var(--mute); }
.eyebrow-h {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  color: var(--mute);
  margin-bottom: var(--sp-3);
}

/* English gloss shown under French content for beginner accessibility.
   Subordinate to the French (smaller, muted, italic) so the eye lands on
   the French first. Toggled off via body.no-gloss for advanced users. */
.gloss {
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--mute);
  margin-top: 4px;
  line-height: var(--lh-base);
}
.gloss-lg {
  font-size: var(--fs-17);
  font-style: italic;
  color: var(--mute);
  margin-top: var(--sp-3);
  line-height: var(--lh-base);
}
body.no-gloss .gloss,
body.no-gloss .gloss-lg { display: none; }

/* =========================================================================
   FLASHCARD
   ========================================================================= */
.flashcard {
  perspective: 1200px;
  height: 280px;
  margin: var(--sp-5) auto;
  max-width: 480px;
  width: 100%;
  cursor: pointer;
}
.flashcard .inner {
  position: relative; width: 100%; height: 100%;
  transition: transform .6s var(--ease-snap);
  transform-style: preserve-3d;
}
.flashcard.flipped .inner { transform: rotateY(180deg); }
.flashcard .face {
  position: absolute; inset: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  display: grid; place-items: center;
  text-align: center;
  padding: var(--sp-6);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--e2);
}
.flashcard .face.back {
  transform: rotateY(180deg);
  background: var(--surface-2);
}
.flashcard .word {
  font-size: 36px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
  word-break: break-word;
}
.flashcard .emoji { font-size: 56px; margin-bottom: var(--sp-3); }
.flashcard .ipa { color: var(--mute); margin-top: 6px; font-size: var(--fs-14); }
.flashcard .translation {
  font-size: 28px;
  font-weight: var(--fw-semi);
  color: var(--ink);
  word-break: break-word;
}
.flashcard .example {
  color: var(--mute);
  font-style: italic;
  margin-top: var(--sp-3);
  font-size: var(--fs-14);
}

.srs-controls {
  display: flex; gap: var(--sp-2); justify-content: center;
  margin-top: var(--sp-5); flex-wrap: wrap;
}
.srs-controls .btn { min-width: 90px; flex: 1; max-width: 130px; }

/* =========================================================================
   QUIZ
   ========================================================================= */
.q-prompt {
  font-size: var(--fs-22);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-snug);
  margin-bottom: var(--sp-5);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.q-prompt b { color: var(--accent); font-weight: var(--fw-bold); }
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-2);
}
.option {
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-15);
  font-weight: var(--fw-med);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.option:hover { border-color: var(--ink-2); background: var(--surface-2); }
.option:active { transform: scale(.98); }
.option.correct { background: rgba(52, 199, 89, .12); border-color: var(--good); color: var(--good-2); }
body.dark .option.correct { background: rgba(52, 199, 89, .18); color: var(--good); }
.option.wrong { background: rgba(255, 59, 48, .12); border-color: var(--bad); color: var(--bad-2); }
body.dark .option.wrong { background: rgba(255, 59, 48, .18); color: var(--bad); }
.option.disabled { pointer-events: none; }

.feedback {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-semi);
  font-size: var(--fs-15);
}
.feedback.good { background: rgba(52, 199, 89, .12); color: var(--good-2); }
body.dark .feedback.good { background: rgba(52, 199, 89, .15); color: var(--good); }
.feedback.bad { background: rgba(255, 59, 48, .12); color: var(--bad-2); }
body.dark .feedback.bad { background: rgba(255, 59, 48, .15); color: var(--bad); }
.feedback small {
  display: block; font-weight: var(--fw-reg);
  margin-top: 6px; color: var(--ink);
  font-size: var(--fs-14); line-height: var(--lh-base);
}

/* =========================================================================
   INPUTS
   ========================================================================= */
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-size: var(--fs-17);  /* 17 prevents iOS zoom */
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover { border-color: var(--ink-2); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.input::placeholder { color: var(--mute); }

textarea.input { min-height: 140px; resize: vertical; line-height: var(--lh-base); }

/* =========================================================================
   GAMES
   ========================================================================= */
.dnd-zone {
  min-height: 80px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface-2);
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  align-items: flex-start;
  align-content: flex-start;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dnd-zone.over { border-color: var(--accent); background: rgba(94, 92, 230, .08); }
.dnd-zone h4 {
  width: 100%; color: var(--mute);
  font-size: var(--fs-11); text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semi);
}
.token {
  background: var(--surface);
  border: 1px solid var(--line-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: var(--fw-semi);
  font-size: var(--fs-14);
  user-select: none;
  -webkit-user-select: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.token:hover { border-color: var(--accent); }
.token.fem { border-color: var(--rouge); color: var(--rouge); }
.token:active { transform: scale(.95); }

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  max-width: 520px;
  margin: 0 auto;
}
.mem-card {
  aspect-ratio: 1;
  background: var(--ink);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--surface);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  transition: background var(--t-base), transform var(--t-fast);
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  padding: 6px;
  word-break: break-word;
  line-height: 1.2;
}
.mem-card.flipped { background: var(--surface-2); color: var(--ink); }
.mem-card.matched { background: var(--good); color: white; opacity: .7; cursor: default; }
.mem-card:active:not(.matched) { transform: scale(.95); }

/* =========================================================================
   GRAMMAR — clean info panel
   ========================================================================= */
.grammar-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  margin: var(--sp-4) 0;
}
.grammar-box h3 {
  color: var(--ink);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-19);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}
.grammar-box p {
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-2);
  color: var(--ink-2);
}
.grammar-box .example {
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin: 6px 0;
  color: var(--ink);
  word-break: break-word;
  font-weight: var(--fw-med);
}
.grammar-box .example em {
  color: var(--accent);
  font-style: normal;
  font-weight: var(--fw-bold);
}

.conj-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.conj-table th {
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 14px;
  text-align: left;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.conj-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.conj-table tr:last-child td { border-bottom: none; }
.conj-table td:first-child { font-weight: var(--fw-semi); color: var(--mute); }
.conj-table td:last-child { font-weight: var(--fw-semi); color: var(--accent); font-size: var(--fs-17); }

/* =========================================================================
   SPEAK — mic button
   ========================================================================= */
.mic-btn {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: white;
  font-size: 36px;
  cursor: pointer;
  box-shadow: var(--e2);
  transition: transform var(--t-fast), box-shadow var(--t-base);
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  display: grid; place-items: center;
}
.mic-btn:hover { box-shadow: var(--e3); }
.mic-btn:active { transform: scale(.95); }
.mic-btn.listening { animation: mic-pulse 1.4s var(--ease-in-out) infinite; background: var(--bad); }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .5), var(--e2); }
  50%      { box-shadow: 0 0 0 22px rgba(255, 59, 48, 0), var(--e2); }
}
.transcript {
  background: var(--surface-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  margin-top: var(--sp-4);
  min-height: 50px;
  font-style: italic;
  word-break: break-word;
  color: var(--ink-2);
}

/* =========================================================================
   MISC — tags, badges, kbd, empty
   ========================================================================= */
.kbd {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--fs-12);
}

.tag {
  display: inline-block;
  background: var(--surface-2);
  color: var(--ink-2);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  margin-right: 6px;
  white-space: nowrap;
  letter-spacing: var(--ls-base);
}
.tag.fem { background: rgba(255, 59, 48, .12); color: var(--bad-2); }
body.dark .tag.fem { color: var(--rouge); }
.tag.masc { background: rgba(0, 85, 164, .12); color: var(--bleu); }
.tag.verb { background: rgba(94, 92, 230, .12); color: var(--accent); }

.empty {
  text-align: center;
  padding: var(--sp-11) var(--sp-5);
  color: var(--mute);
}
.empty .big-icon { font-size: 56px; margin-bottom: var(--sp-4); opacity: .5; }

/* =========================================================================
   PROGRESS RING — SVG
   ========================================================================= */
.ring {
  display: inline-grid;
  place-items: center;
  position: relative;
}
.ring svg { transform: rotate(-90deg); display: block; }
.ring circle.bg { fill: none; stroke: var(--surface-2); }
.ring circle.fg {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slower) var(--ease-out);
}
body.dark .ring circle.fg { stroke: var(--gray-700); }
.ring .ring-label {
  position: absolute;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ring .ring-label .pct {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  color: var(--ink);
  letter-spacing: var(--ls-snug);
  display: block;
  line-height: 1;
}
.ring .ring-label .meta {
  font-size: var(--fs-12);
  color: var(--mute);
  font-weight: var(--fw-med);
  margin-top: 2px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* =========================================================================
   TOGGLE SWITCH — iOS-style for settings
   ========================================================================= */
.toggle-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .info { flex: 1; min-width: 0; }
.toggle-row .info h4 {
  font-size: var(--fs-15);
  font-weight: var(--fw-semi);
  color: var(--ink);
  letter-spacing: var(--ls-base);
  margin-bottom: 2px;
}
.toggle-row .info p {
  font-size: var(--fs-13);
  color: var(--mute);
  line-height: var(--lh-base);
}
.toggle {
  position: relative;
  flex-shrink: 0;
  display: inline-block;
  width: 51px;
  height: 31px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--gray-300);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-base) var(--ease-in-out);
  border: none;
  margin: 0;
  padding: 0;
}
.toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: white;
  border-radius: 50%;
  transition: transform var(--t-base) var(--ease-out);
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.1);
}
.toggle:checked {
  background: var(--good);
}
.toggle:checked::before {
  transform: translateX(20px);
}
.toggle:focus-visible {
  box-shadow: var(--ring);
}

/* =========================================================================
   HEATMAP — GitHub-style 12-week activity grid
   ========================================================================= */
.hm-wrap { display: flex; flex-direction: column; gap: var(--sp-3); }
.hm-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  aspect-ratio: 12 / 7;
}
.hm-cell {
  border-radius: 3px;
  min-width: 8px;
  min-height: 8px;
  background: var(--surface-2);
}
.hm-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-12);
  color: var(--mute);
  justify-content: flex-end;
}
.hm-legend .hm-cell { width: 12px; height: 12px; }

/* =========================================================================
   PHASE STRIP — horizontal scroll on mobile, grid on desktop
   ========================================================================= */
.phase-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.phase-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 116px;
}
.phase-chip:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line-2); }
.phase-chip .eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--mute);
}
.phase-chip h4 {
  font-size: var(--fs-17);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}
.phase-chip .meta { color: var(--ink-2); font-size: var(--fs-13); }
.phase-chip .meter {
  height: 4px; background: var(--surface-2);
  border-radius: var(--r-pill); overflow: hidden;
  margin-top: auto;
}
.phase-chip .meter > div {
  height: 100%; background: var(--ink); border-radius: var(--r-pill);
  transition: width var(--t-slow) var(--ease-out);
}
body.dark .phase-chip .meter > div { background: var(--gray-700); }
.phase-chip.done { border-color: var(--good); }
.phase-chip.done .meter > div { background: var(--good); }
.phase-chip.locked { opacity: .55; cursor: not-allowed; }
.phase-chip.locked:hover { transform: none; box-shadow: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .hamburger { display: flex; order: -1; }
  /* Drop backdrop-filter on mobile — it creates a containing block for the
     fixed-positioned nav drawer, clamping its height to the topbar instead of
     the viewport. (Desktop keeps the blur for visual polish.) */
  .topbar {
    gap: var(--sp-2);
    padding: 10px var(--sp-4);
    padding-top: calc(10px + var(--safe-top));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
  .brand-name { display: none; }
  .brand { font-size: var(--fs-19); }

  .nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 340px;
    background: var(--surface);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    padding: var(--sp-6) var(--sp-4);
    padding-left: calc(var(--sp-4) + var(--safe-left));
    padding-top: calc(var(--sp-6) + var(--safe-top));
    padding-bottom: calc(var(--sp-6) + var(--safe-bottom));
    box-shadow: var(--e4);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease-out);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav.open { transform: translateX(0); }
  .nav a {
    padding: 12px 14px;
    font-size: var(--fs-15);
    border-radius: var(--r-md);
    width: 100%;
    min-height: 44px;
  }

  /* Show drawer-only chrome */
  .nav .nav-group {
    display: block;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-size: var(--fs-11);
    font-weight: var(--fw-semi);
    color: var(--mute);
    margin: var(--sp-4) var(--sp-2) var(--sp-1);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--line);
  }
  .nav .nav-group:first-of-type { border-top: none; padding-top: 0; }

  .nav .nav-close {
    display: flex;
    position: absolute;
    top: calc(var(--sp-3) + var(--safe-top));
    right: var(--sp-3);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--surface-2);
    color: var(--ink);
    border-radius: var(--r-pill);
    font-size: 18px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .nav .nav-close:hover { background: var(--surface-3); }

  .stats { margin-left: auto; gap: 6px; }
  .stat { font-size: var(--fs-12); padding: 5px 10px; min-height: 30px; }

  main {
    padding: var(--sp-5) var(--sp-4);
    padding-left:  calc(var(--sp-4) + var(--safe-left));
    padding-right: calc(var(--sp-4) + var(--safe-right));
    padding-bottom: calc(var(--sp-6) + var(--safe-bottom));
  }

  .hero { padding: var(--sp-7) var(--sp-5); border-radius: var(--r-xl); }
  .hero h1 { font-size: clamp(32px, 8vw, 44px); }
  .hero p { font-size: var(--fs-15); }

  .section-h { font-size: var(--fs-22); margin-top: var(--sp-6); }

  .grid { gap: var(--sp-3); grid-template-columns: 1fr; }
  .card { padding: var(--sp-5); border-radius: var(--r-lg); }
  .card .icon { font-size: 28px; width: 48px; height: 48px; }
  .card h3 { font-size: var(--fs-17); }
  .card p { font-size: var(--fs-14); }

  .spotlight {
    grid-template-columns: 1fr;
    padding: var(--sp-5);
    border-radius: var(--r-xl);
  }
  .spotlight h2 { font-size: var(--fs-22); }

  .lesson { padding: var(--sp-5); border-radius: var(--r-lg); min-height: 360px; }
  .lesson h2 { font-size: var(--fs-22); }

  .q-prompt { font-size: var(--fs-19); }
  .options { grid-template-columns: 1fr; }
  .option { padding: var(--sp-4); font-size: var(--fs-15); }

  .flashcard { height: 260px; }
  .flashcard .word { font-size: 28px; }
  .flashcard .emoji { font-size: 44px; }
  .flashcard .translation { font-size: 22px; }

  .path-node { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .path-node .num { width: 32px; height: 32px; font-size: var(--fs-13); }
  .path-node .info h4 { font-size: var(--fs-14); }
  .path-node .info p { font-size: var(--fs-12); }
  .path-node .badge { display: none; }

  .memory-grid { grid-template-columns: repeat(3, 1fr); }
  .mem-card { font-size: var(--fs-13); }

  .grammar-box { padding: var(--sp-4) var(--sp-5); }
  .grammar-box h3 { font-size: var(--fs-17); }
  .grammar-box p { font-size: var(--fs-15); }

  .conj-table { font-size: var(--fs-14); }
  .conj-table th, .conj-table td { padding: 8px 10px; }

  .btn { padding: 10px 18px; font-size: var(--fs-14); min-height: 44px; }
  .btn.big { padding: 13px 22px; font-size: var(--fs-15); min-height: 48px; }
  .btn.sm { min-height: 36px; }

  /* Heatmap on Progress page — let it scroll horizontally on phone */
  .heatmap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Decision-tree pages — single column on phone */
  .deepdive-tree, .tree-grid { grid-template-columns: 1fr !important; }

  .mic-btn { width: 84px; height: 84px; font-size: 32px; }

  .chrome-crumbs { display: none; }

  .phase-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .topbar { padding: 8px var(--sp-3); gap: 6px; }
  .stats { gap: 4px; }
  .stat { font-size: var(--fs-11); padding: 4px 8px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: var(--fs-14); }
  .flashcard .word { font-size: 24px; }
  .flashcard .translation { font-size: 20px; }
  .memory-grid { grid-template-columns: repeat(2, 1fr); }
  .nav { width: 88vw; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding: var(--sp-5) var(--sp-4); }
  .hero h1 { font-size: 24px; margin-bottom: 4px; }
  .hero p { font-size: var(--fs-13); }
  .flashcard { height: 200px; }
}

@media print {
  .topbar, .footer, .nav-backdrop, .chrome { display: none; }
  main { max-width: none; }
}

/* =========================================================================
   MOTION LANGUAGE — bring the app to life
   =========================================================================
   Scoped to body[data-anim]. Three tiers:
     • full   — springs, particles, mascot, page slides (default)
     • subtle — opacity-only transitions, no springs or shakes
     • off    — all animations zeroed
   Respects OS "Reduce motion" on first paint (handled in modules/settings.js).
   ========================================================================= */

/* ── Button press: bouncy spring with subtle overshoot ───────────────────── */
body[data-anim="full"] .btn:active,
body[data-anim="full"] .icon-btn:active,
body[data-anim="full"] .chrome-back:active {
  animation: btn-spring 280ms var(--ease-snap);
}
@keyframes btn-spring {
  0%   { transform: scale(1); }
  35%  { transform: scale(.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
body[data-anim="full"] .btn { transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-base); }
body[data-anim="full"] .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(94,92,230,.22); }
body[data-anim="full"] .btn.big:hover     { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,17,21,.10); }

/* ── Top nav links: lift + accent underline grow on hover ────────────── */
body[data-anim="full"] .nav a {
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
body[data-anim="full"] .nav a:hover {
  transform: translateY(-1px);
}
body[data-anim="full"] .nav a:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── Topbar stat chips (Progress, User) ─────────────────────────────── */
body[data-anim="full"] .stat {
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast);
}
body[data-anim="full"] .stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15,17,21,.08);
}
body[data-anim="full"] .stat:active {
  transform: translateY(0) scale(.97);
  transition-duration: 60ms;
}

/* ── Back / icon buttons / hamburger ────────────────────────────────── */
body[data-anim="full"] .chrome-back,
body[data-anim="full"] .icon-btn,
body[data-anim="full"] .hamburger {
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
body[data-anim="full"] .chrome-back:hover,
body[data-anim="full"] .icon-btn:hover {
  transform: translateX(-2px);
}
body[data-anim="full"] .hamburger:hover {
  transform: scale(1.06);
}

/* ── Brand logo: lift + sway on hover (interrupts idle bob briefly) ─── */
body[data-anim="full"] .brand {
  transition: transform var(--t-fast) var(--ease-out);
  cursor: pointer;
}
body[data-anim="full"] .brand:hover .logo {
  animation: mascot-peek 600ms var(--ease-snap) infinite;
}
@keyframes mascot-peek {
  0%, 100% { transform: translateY(-2px) rotate(-5deg); }
  50%      { transform: translateY(-4px) rotate(5deg);  }
}

/* ── Footer links: subtle slide ─────────────────────────────────────── */
body[data-anim="full"] .footer a,
body[data-anim="full"] #credit-link {
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast);
  display: inline-block;
}
body[data-anim="full"] .footer a:hover,
body[data-anim="full"] #credit-link:hover {
  transform: translateY(-1px);
}

/* ── Speed selector buttons (🐢 / 🚶 / 🐇) get an emoji wiggle ──────── */
body[data-anim="full"] [data-rate]:hover {
  transform: translateY(-1px) scale(1.02);
}

/* ── Card hover: lift + slight rotate ───────────────────────────────────── */
body[data-anim="full"] .card {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast);
}
body[data-anim="full"] .card:hover {
  transform: translateY(-3px) rotate(.4deg) scale(1.005);
  box-shadow: var(--e3);
}

/* ── Option select: correct pulses, wrong shakes ───────────────────────── */
body[data-anim="full"] .option {
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast);
}
body[data-anim="full"] .option:hover { transform: translateY(-1px) scale(1.005); }
body[data-anim="full"] .option:active { transform: scale(.97); }
body[data-anim="full"] .option.correct {
  animation: opt-correct 560ms var(--ease-snap);
}
@keyframes opt-correct {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.06); box-shadow: 0 0 0 0 rgba(52,199,89,.45); }
  60%  { transform: scale(1.0);  box-shadow: 0 0 0 14px rgba(52,199,89,0); }
  100% { transform: scale(1.0);  box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}
body[data-anim="full"] .option.wrong {
  animation: opt-wrong 380ms var(--ease-in-out);
}
@keyframes opt-wrong {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* ── Feedback entrance: slide up + fade ─────────────────────────────────── */
body[data-anim="full"] .feedback {
  animation: fb-enter 320ms var(--ease-snap);
}
body[data-anim="subtle"] .feedback {
  animation: fb-fade 240ms var(--ease-out);
}
@keyframes fb-enter {
  0%   { opacity: 0; transform: translateY(12px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes fb-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Advance row entrance: stagger after feedback ───────────────────────── */
body[data-anim="full"] .advance-row {
  animation: adv-enter 380ms var(--ease-snap) 180ms backwards;
}
body[data-anim="subtle"] .advance-row {
  animation: fb-fade 240ms var(--ease-out) 120ms backwards;
}
@keyframes adv-enter {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Transcript reveal: gentle fade ─────────────────────────────────────── */
body[data-anim="full"] .feedback + div,
body[data-anim="subtle"] .feedback + div {
  animation: tx-enter 320ms var(--ease-out) 80ms backwards;
}
@keyframes tx-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Page transitions ───────────────────────────────────────────────────── */
body[data-anim="full"] main > * {
  animation: page-in 320ms var(--ease-snap);
}
body[data-anim="subtle"] main > * {
  animation: page-fade 240ms var(--ease-out);
}
@keyframes page-in {
  0%   { opacity: 0; transform: translateX(12px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Mascot 🐓: idle bob + flap on win ──────────────────────────────────── */
body[data-anim="full"] .logo {
  display: inline-block;
  animation: mascot-bob 3.6s ease-in-out infinite;
  transform-origin: 50% 70%;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  50%      { transform: translateY(-2px) rotate(-2deg); }
}
body[data-anim="full"] .logo.celebrating {
  animation: mascot-flap 700ms var(--ease-snap);
}
@keyframes mascot-flap {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1);   }
  20%  { transform: translateY(-12px) rotate(-12deg) scale(1.15); }
  45%  { transform: translateY(-4px)  rotate(8deg)   scale(1.10); }
  70%  { transform: translateY(-8px)  rotate(-6deg)  scale(1.12); }
  100% { transform: translateY(0)    rotate(0deg)   scale(1);   }
}

/* ── Confetti / sparkle particles ──────────────────────────────────────── */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  will-change: transform, opacity;
}
.confetti-piece.go {
  animation: confetti-burst 1.4s var(--ease-out) forwards;
}
@keyframes confetti-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(var(--rz, 540deg)); }
}

/* ── Sparkles emitted from correct option ──────────────────────────────── */
.sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.sparkle {
  position: absolute;
  font-size: 16px;
  opacity: 0;
  animation: sparkle-rise 700ms var(--ease-out) forwards;
}
@keyframes sparkle-rise {
  0%   { opacity: 0; transform: translate(0, 0)     scale(.6); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(1.1); }
}

/* ── Speed lines for streak hot-state ──────────────────────────────────── */
body[data-anim="full"] .speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: speed-out 400ms var(--ease-out) forwards;
}
@keyframes speed-out {
  from { opacity: .8; transform: scale(.7); }
  to   { opacity: 0;  transform: scale(1.4); }
}

/* ── Anim level: subtle disables springs but keeps fades ───────────────── */
body[data-anim="subtle"] .option:hover,
body[data-anim="subtle"] .card:hover,
body[data-anim="subtle"] .btn.primary:hover,
body[data-anim="subtle"] .btn.big:hover { transform: none !important; }
body[data-anim="subtle"] .option.correct,
body[data-anim="subtle"] .option.wrong,
body[data-anim="subtle"] .btn:active { animation: none !important; }

/* ── Anim level: off truly disables everything ─────────────────────────── */
body[data-anim="off"] *,
body[data-anim="off"] *::before,
body[data-anim="off"] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
}
body[data-anim="off"] .confetti-layer,
body[data-anim="off"] .sparkle-layer,
body[data-anim="off"] .speed-lines { display: none !important; }

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  body:not([data-anim="full"]) *,
  body:not([data-anim="full"]) *::before,
  body:not([data-anim="full"]) *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}
.btn:focus-visible, .option:focus-visible, .token:focus-visible,
.chrome-back:focus-visible, .icon-btn:focus-visible, .stat:focus-visible {
  box-shadow: var(--ring);
}

/* =========================================================================
   TOAST
   ========================================================================= */
#toast-host {
  position: fixed;
  bottom: calc(var(--sp-5) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: 92vw;
}
.toast {
  background: var(--ink);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
  font-size: var(--fs-14);
  box-shadow: var(--e3);
  opacity: 0;
  transform: translateY(20px) scale(.95);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  text-align: center;
  pointer-events: auto;
  max-width: 100%;
}
body.dark .toast { background: var(--gray-800); color: var(--gray-50); }
.toast.toast-in { opacity: 1; transform: translateY(0) scale(1); }
.toast.toast-out { opacity: 0; transform: translateY(-10px); }
.toast.toast-good { background: var(--good); color: white; }
.toast.toast-bad  { background: var(--bad); color: white; }
.toast.toast-warn { background: var(--warn); color: #1a1a2e; }

/* =========================================================================
   SKELETON
   ========================================================================= */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--e1);
  border: 1px solid var(--line);
}

/* =========================================================================
   STICKY MOBILE NEXT BUTTON
   ========================================================================= */
@media (max-width: 900px) {
  .lesson .sticky-next {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--surface) 65%, transparent);
    padding: var(--sp-3) 0;
    margin: 0 calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
    padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  }
}

/* =========================================================================
   WORD POPUP
   ========================================================================= */
#wordpop {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--e3);
  width: 280px;
  max-width: calc(100vw - 24px);
  z-index: 200;
  opacity: 0;
  transform: translateY(-4px) scale(.96);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
  pointer-events: none;
}
#wordpop.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wp-head { display: flex; align-items: center; gap: var(--sp-2); }
.wp-fr {
  font-size: var(--fs-19);
  color: var(--ink);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  flex: 1;
}
.wp-play, .wp-close {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  font-size: var(--fs-13);
  display: grid; place-items: center;
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink-2);
  transition: background var(--t-fast);
}
.wp-play:hover, .wp-close:hover { background: var(--surface-3); color: var(--ink); }
.wp-close { font-size: var(--fs-17); }
.wp-en { color: var(--ink-2); margin-top: 6px; font-size: var(--fs-14); }

/* =========================================================================
   DIALOGUE LINES
   ========================================================================= */
.dialogue-line {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  margin: var(--sp-2) 0;
  padding: 10px var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-md);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.dialogue-line.active {
  background: var(--surface);
  transform: scale(1.015);
  box-shadow: var(--e2);
  border: 1px solid var(--line-2);
}
.dl-speaker {
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.dl-A    { background: rgba(0, 85, 164, .12);   color: var(--bleu); }
.dl-B    { background: rgba(239, 65, 53, .12);  color: var(--rouge); }
.dl-NARR { background: rgba(94, 92, 230, .12);  color: var(--accent); }
.dl-text { flex: 1; line-height: var(--lh-base); word-break: break-word; color: var(--ink); }

/* =========================================================================
   READING PLAYER + SENTENCE HIGHLIGHT
   ========================================================================= */
.reading-text .r-sent {
  display: inline;
  transition: background var(--t-base);
  border-radius: 4px;
  padding: 2px 0;
}
.reading-text .r-sent.active {
  background: rgba(255, 159, 10, .35);
  padding: 2px 4px;
  box-shadow: 0 0 0 2px rgba(255, 159, 10, .35);
}
body.dark .reading-text .r-sent.active { background: rgba(255, 159, 10, .5); }

.reading-player {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}