/*
 * css/enhancements.css — Design System Upgrades
 * Overrides and additions layered on top of main.css.
 * Load AFTER main.css.
 */

/* ─── 1. Typography — Distinctive Google Fonts ─────────────────────────────
   Bricolage Grotesque: characterful variable grotesque — perfect for headings.
   DM Sans: humanist, highly legible — perfect for body text.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --enhanced-surface-soft: color-mix(in srgb, var(--color-bg-elevated) 88%, var(--color-bg) 12%);
  --enhanced-border-soft: color-mix(in srgb, var(--color-border) 82%, transparent);
  --enhanced-card-sheen: color-mix(in srgb, var(--color-text) 4%, transparent);
  --enhanced-overlay-muted: color-mix(in srgb, var(--color-scrim) 44%, transparent);
  --enhanced-elevated-bg: linear-gradient(145deg, color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-bg) 8%), color-mix(in srgb, var(--color-bg-elevated) 84%, #000 16%));
  --enhanced-accent-soft-1: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --enhanced-accent-soft-2: color-mix(in srgb, var(--color-accent) 6%, transparent);
  --enhanced-accent-glow: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --enhanced-code-bg: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --enhanced-code-border: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

h1, h2, h3, h4,
.dashboard-heading,
.lesson-view-title,
.module-title,
.header-title,
.module-card-title,
.settings-container h2,
.ref-page-header h1,
.instructor-heading {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

body {
  font-family: var(--font-sans);
}

/* ─── 2. Atmospheric Background (warm dark) ────────────────────────────────
   Subtle ambient color built from the existing design tokens.
   ─────────────────────────────────────────────────────────────────────────── */
body {
  background-image:
    radial-gradient(ellipse 70% 55% at 90% -5%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 5%  110%, color-mix(in srgb, var(--color-accent2) 10%, transparent) 0%, transparent 55%);
}

/* Grain overlay — adds tactile warmth and depth */
body::after {
  content: none;
}

/* ─── 3. Surface Hierarchy ──────────────────────────────────────────────────
   Clear 3-tier system: sidebar (darkest) → main (mid) → cards (elevated).
   ─────────────────────────────────────────────────────────────────────────── */

/* Sidebar: darker baseline */
.sidebar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 86%, #000 14%) 0%, var(--color-bg) 100%);
}

/* Header: elevated surface without expensive blur compositing */
.app-header {
  background: var(--enhanced-surface-soft);
  border-block-end-color: var(--enhanced-border-soft);
}

/* Cards: elevated surfaces with subtle inner shimmer */
.module-card {
  background: linear-gradient(
    145deg,
    var(--enhanced-card-sheen) 0%,
    transparent                100%
  );
  border-color: var(--enhanced-border-soft);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.module-card:not(.locked):hover {
  transform: translateY(-4px) scale(1.005);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.module-card-header,
.module-progress-row {
  background: var(--enhanced-overlay-muted);
}

.step-explanation,
.step-mcq,
.settings-section {
  background: var(--enhanced-elevated-bg);
  border-color: var(--enhanced-border-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* ─── 4. Gamification: XP Badge ────────────────────────────────────────────
   Quiet, token-based emphasis that stays legible without a loud gradient.
   ─────────────────────────────────────────────────────────────────────────── */
#header-xp {
  background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 65%, var(--color-warning)));
  color: var(--color-on-accent);
  padding: 0.2rem 0.7rem 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.3rem;
  box-shadow: 0 0 14px var(--enhanced-accent-glow);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

#header-xp .stat-icon {
  color: var(--color-on-accent);
}

/* ─── 5. Level badge in header ──────────────────────────────────────────────
   Clear chip treatment so level reads as a distinct label.
   ─────────────────────────────────────────────────────────────────────────── */
#header-level {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--enhanced-border-soft);
}

/* ─── 6. Streak fire animation ──────────────────────────────────────────────
   Always-on subtle flame flicker — looks great regardless of streak count.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes flame-flicker {
  0%,  100% { transform: scaleY(1)    rotate(-2deg); filter: brightness(1);   }
  25%        { transform: scaleY(1.1) rotate( 2deg); filter: brightness(1.15); }
  50%        { transform: scaleY(0.9) rotate(-1deg); filter: brightness(0.9);  }
  75%        { transform: scaleY(1.05)rotate( 1deg); filter: brightness(1.08); }
}

.streak-fire {
  animation: flame-flicker 2.4s ease-in-out 3;
  transform-origin: bottom center;
  display: inline-flex;
  align-items: center;
}

#header-streak:hover .streak-fire,
#header-streak:focus-within .streak-fire {
  animation: flame-flicker 1.4s ease-in-out 2;
}

/* ─── 7. Progress bars — thicker with restrained glow ──────────────────────
   Keeps progress readable without introducing a noisy highlight.
   ─────────────────────────────────────────────────────────────────────────── */
.progress-bar-container {
  height: 8px;
}

.progress-bar-fill {
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 38%, transparent);
}

.module-progress-row .progress-bar-container {
  height: 6px;
}

/* ─── 8. Primary module card — breathing pulse glow ────────────────────────
   Draws the eye to the recommended next action without being distracting.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent),
      0 0 18px color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-accent) 42%, transparent),
      0 0 24px color-mix(in srgb, var(--color-accent) 14%, transparent);
  }
}

.module-card-primary {
  animation: pulse-glow 3.5s ease-in-out 2;
  border-block-start-width: 3px;
}

.module-card-primary .module-card-header {
  background: color-mix(in srgb, var(--mod-color, var(--color-accent)) 10%, var(--enhanced-overlay-muted)) !important;
}

.module-card-primary .module-icon {
  width: 3rem;
  height: 3rem;
}

.module-card-primary .lesson-list {
  background: color-mix(in srgb, var(--mod-color, var(--color-accent)) 4%, transparent);
}

/* "COMMENCER ICI" chip opacity pulse */
@keyframes chip-pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.65; }
}

.module-priority-chip {
  animation: none;
}

/* ─── 9. Sidebar: active-item treatment without side-stripe accents ─────────
   Uses full-surface tint + subtle inset ring to keep emphasis intentional.
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar-lesson-link[aria-current="page"] {
  border-inline: 1px solid transparent;
  background: linear-gradient(
    to right,
    var(--enhanced-accent-soft-1) 0%,
    var(--enhanced-accent-soft-2) 60%,
    transparent              100%
  );
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* RTL keeps same visual treatment */
[dir="rtl"] .sidebar-lesson-link[aria-current="page"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* ─── 10. Dashboard: staggered card appearance on load ──────────────────────
   Applied via .animate-in class set by JS after rendering the grid.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes cardAppear {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dashboard-grid.animate-in .module-card,
.dashboard-grid.animate-in .module-card-placeholder {
  animation: cardAppear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.dashboard-grid.animate-in .module-card:nth-child(1)  { animation-delay: 0.04s; }
.dashboard-grid.animate-in .module-card:nth-child(2)  { animation-delay: 0.08s; }
.dashboard-grid.animate-in .module-card:nth-child(3)  { animation-delay: 0.12s; }
.dashboard-grid.animate-in .module-card:nth-child(4)  { animation-delay: 0.16s; }
.dashboard-grid.animate-in .module-card:nth-child(5)  { animation-delay: 0.20s; }
.dashboard-grid.animate-in .module-card:nth-child(6)  { animation-delay: 0.24s; }
.dashboard-grid.animate-in .module-card:nth-child(7)  { animation-delay: 0.28s; }
.dashboard-grid.animate-in .module-card:nth-child(8)  { animation-delay: 0.32s; }
.dashboard-grid.animate-in .module-card:nth-child(9)  { animation-delay: 0.36s; }
.dashboard-grid.animate-in .module-card:nth-child(10) { animation-delay: 0.40s; }

/* ─── 11. Lesson view: accent bar + better code colors ─────────────────────
   Left-edge gradient bar gives step cards a "designed" look.
   Code tokens in lesson content get brand-tinted treatment.
   ─────────────────────────────────────────────────────────────────────────── */
.step-explanation,
.step-mcq {
  border-inline-start: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Release readiness shell styles for content sync validation state */
.release-readiness-shell {
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
}

.release-readiness-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.release-readiness-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.release-readiness-item {
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.45rem;
}

.release-readiness-item.pass {
  color: var(--color-release-pass-text);
  background: var(--color-release-pass-bg);
}

.release-readiness-item.pending {
  color: var(--color-release-pending-text);
  background: var(--color-release-pending-bg);
}

.release-readiness-note {
  margin: 0.55rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.step-explanation code,
.step-mcq code {
  background: var(--enhanced-code-bg);
  border: 1px solid var(--enhanced-code-border);
  color: var(--color-accent-text);
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-size: 0.88em;
}

.lesson-view-title {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ─── 12. First-visit welcome banner ────────────────────────────────────────
   Shows only when 0 lessons completed. Dismissed with ×.
   ─────────────────────────────────────────────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 9%, transparent)  0%,
    color-mix(in srgb, var(--color-accent2) 9%, transparent) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-block-end: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.welcome-banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.welcome-banner-text h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-block-end: 0.25rem;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.welcome-banner-text p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.welcome-banner-dismiss {
  margin-inline-start: auto;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--transition-fast), background var(--transition-fast);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.welcome-banner-dismiss:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

/* ─── 13. Export actions: hidden until meaningful progress ──────────────────
   JS sets data-has-progress="false" when completed === 0.
   ─────────────────────────────────────────────────────────────────────────── */
.export-actions[data-has-progress="false"] {
  display: none;
}

/* ─── 14. View transition — smooth slide-in ────────────────────────────────
   Replaces plain fadeIn with slight vertical lift.
   ─────────────────────────────────────────────────────────────────────────── */
.inner-view {
  animation: viewSlideIn var(--transition-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes viewSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 15. Mobile nav: prevent overflow ──────────────────────────────────────
   Tighten padding and font size on small viewports.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .header-nav .nav-btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.45rem;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .header-nav .nav-btn[data-view="settings"] {
    font-size: 0.68rem;
    padding: 0.28rem 0.35rem;
    min-height: 44px;
  }
}

/* ─── 16. Dashboard heading: solid color emphasis (no gradient text) ────────
   ─────────────────────────────────────────────────────────────────────────── */
.dashboard-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-block-end: 0.5rem;
  color: var(--color-text);
}

/* ─── 17. XP award animation (lesson complete) ──────────────────────────────
   More energetic bounce vs the old scaleBounce.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes xpBurst {
  0%   { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.xp-award-badge {
  animation: xpBurst 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── 18. Lesson complete panel: success tint ───────────────────────────────
   Subtle green ambient on completion screens.
   ─────────────────────────────────────────────────────────────────────────── */
.lesson-complete-panel {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-success) 6%, transparent),
    transparent
  );
  border: 1px solid color-mix(in srgb, var(--color-success) 18%, transparent);
  border-radius: var(--radius-lg);
}

/* ─── 19. Sidebar footer progress label ─────────────────────────────────────
   Give the "Progression globale" label a gentle accent color.
   ─────────────────────────────────────────────────────────────────────────── */
.global-progress-label {
  color: var(--color-accent-text);
  opacity: 0.85;
}

/* ─── 20. Module locked states: clearer visual ──────────────────────────────
   Locked cards render with a muted overlay rather than blanket opacity.
   ─────────────────────────────────────────────────────────────────────────── */
.module-card.locked {
  opacity: 0.55;
  filter: grayscale(25%);
  pointer-events: none;
}

.module-card.locked .module-card-header {
  background: var(--color-scrim);
}

/* ─── 21. MCQ option hover: more distinct ───────────────────────────────────
   Uses full border accent rather than side-stripe accents.
   ─────────────────────────────────────────────────────────────────────────── */
.mcq-option:hover {
  border-color: var(--color-accent);
}

/* ─── 21. Reduced-motion: disable new animations safely ─────────────────────
   Override all new keyframe animations under prefers-reduced-motion.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .streak-fire,
  .module-card-primary,
  .module-priority-chip,
  .dashboard-grid.animate-in .module-card,
  .xp-award-badge,
  .inner-view,
  .welcome-banner,
  body::after {
    animation: none !important;
    transition: none !important;
  }

  body {
    background-image: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. STRATEGIC COLORIZATION — Module palette, status icons, stat cards
   Each color has purpose: module identity, semantic state, hierarchy signal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 22a. Module color palette ─────────────────────────────────────────────
   10 distinct hues anchored in the brand's warm-dark vocabulary.
   Rose (#e94560) and purple (#7c3aed) stay as brand primaries.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --mod-1-color:  #e94560;  /* Slash Commands  — brand rose    */
  --mod-2-color:  #f59e0b;  /* Memory          — amber         */
  --mod-3-color:  #10b981;  /* Skills          — emerald       */
  --mod-4-color:  #3b82f6;  /* Subagents       — blue          */
  --mod-5-color:  #7c3aed;  /* MCP             — brand purple  */
  --mod-6-color:  #f97316;  /* Hooks           — orange        */
  --mod-7-color:  #14b8a6;  /* Plugins         — teal          */
  --mod-8-color:  #6366f1;  /* Checkpoints     — indigo        */
  --mod-9-color:  #ec4899;  /* Advanced        — pink          */
  --mod-10-color: #06b6d4;  /* CLI Reference   — cyan          */
}

/* ─── 22b. Module card — colored top edge + icon tinted container ────────────
   Top edge = module identity (wayfinding + categorization).
   Icon container = warm micro-surface that frames the SVG with personality.
   ─────────────────────────────────────────────────────────────────────────── */
.module-card { border-block-start-width: 2px; border-block-start-style: solid; }

.module-card[data-module="mod-1"]  { border-block-start-color: var(--mod-1-color);  --mod-color: var(--mod-1-color); }
.module-card[data-module="mod-2"]  { border-block-start-color: var(--mod-2-color);  --mod-color: var(--mod-2-color); }
.module-card[data-module="mod-3"]  { border-block-start-color: var(--mod-3-color);  --mod-color: var(--mod-3-color); }
.module-card[data-module="mod-4"]  { border-block-start-color: var(--mod-4-color);  --mod-color: var(--mod-4-color); }
.module-card[data-module="mod-5"]  { border-block-start-color: var(--mod-5-color);  --mod-color: var(--mod-5-color); }
.module-card[data-module="mod-6"]  { border-block-start-color: var(--mod-6-color);  --mod-color: var(--mod-6-color); }
.module-card[data-module="mod-7"]  { border-block-start-color: var(--mod-7-color);  --mod-color: var(--mod-7-color); }
.module-card[data-module="mod-8"]  { border-block-start-color: var(--mod-8-color);  --mod-color: var(--mod-8-color); }
.module-card[data-module="mod-9"]  { border-block-start-color: var(--mod-9-color);  --mod-color: var(--mod-9-color); }
.module-card[data-module="mod-10"] { border-block-start-color: var(--mod-10-color); --mod-color: var(--mod-10-color); }

/* Module icon container — tinted circle per module */
.module-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background var(--transition-fast);
}

.module-card[data-module="mod-1"]  .module-icon { color: var(--mod-1-color); }
.module-card[data-module="mod-2"]  .module-icon { color: var(--mod-2-color); }
.module-card[data-module="mod-3"]  .module-icon { color: var(--mod-3-color); }
.module-card[data-module="mod-4"]  .module-icon { color: var(--mod-4-color); }
.module-card[data-module="mod-5"]  .module-icon { color: var(--mod-5-color); }
.module-card[data-module="mod-6"]  .module-icon { color: var(--mod-6-color); }
.module-card[data-module="mod-7"]  .module-icon { color: var(--mod-7-color); }
.module-card[data-module="mod-8"]  .module-icon { color: var(--mod-8-color); }
.module-card[data-module="mod-9"]  .module-icon { color: var(--mod-9-color); }
.module-card[data-module="mod-10"] .module-icon { color: var(--mod-10-color); }

/* Module card hover — let top border glow slightly */
.module-card[data-module="mod-1"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-1-color) 20%, transparent); }
.module-card[data-module="mod-2"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-2-color) 20%, transparent); }
.module-card[data-module="mod-3"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-3-color) 20%, transparent); }
.module-card[data-module="mod-4"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-4-color) 20%, transparent); }
.module-card[data-module="mod-5"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-5-color) 20%, transparent); }
.module-card[data-module="mod-6"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-6-color) 20%, transparent); }
.module-card[data-module="mod-7"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-7-color) 20%, transparent); }
.module-card[data-module="mod-8"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-8-color) 20%, transparent); }
.module-card[data-module="mod-9"]:hover  { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-9-color) 20%, transparent); }
.module-card[data-module="mod-10"]:hover { box-shadow: var(--shadow-md), 0 -1px 8px color-mix(in srgb, var(--mod-10-color) 20%, transparent); }

/* ─── 22c. Sidebar module icons — inherit module color ───────────────────────
   Same hue as the dashboard card icon — consistent identity across views.
   ─────────────────────────────────────────────────────────────────────────── */
.sidebar-module-group[data-module="mod-1"]  .sidebar-module-icon { color: var(--mod-1-color); }
.sidebar-module-group[data-module="mod-2"]  .sidebar-module-icon { color: var(--mod-2-color); }
.sidebar-module-group[data-module="mod-3"]  .sidebar-module-icon { color: var(--mod-3-color); }
.sidebar-module-group[data-module="mod-4"]  .sidebar-module-icon { color: var(--mod-4-color); }
.sidebar-module-group[data-module="mod-5"]  .sidebar-module-icon { color: var(--mod-5-color); }
.sidebar-module-group[data-module="mod-6"]  .sidebar-module-icon { color: var(--mod-6-color); }
.sidebar-module-group[data-module="mod-7"]  .sidebar-module-icon { color: var(--mod-7-color); }
.sidebar-module-group[data-module="mod-8"]  .sidebar-module-icon { color: var(--mod-8-color); }
.sidebar-module-group[data-module="mod-9"]  .sidebar-module-icon { color: var(--mod-9-color); }
.sidebar-module-group[data-module="mod-10"] .sidebar-module-icon { color: var(--mod-10-color); }

/* Sidebar active module toggle — colored left border for wayfinding */
.sidebar-module-group[data-expanded="true"][data-module="mod-1"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-1-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-2"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-2-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-3"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-3-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-4"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-4-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-5"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-5-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-6"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-6-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-7"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-7-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-8"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-8-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-9"]  .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-9-color);  color: var(--color-text); }
.sidebar-module-group[data-expanded="true"][data-module="mod-10"] .sidebar-module-toggle { border-inline-start: 1px solid var(--mod-10-color); color: var(--color-text); }

/* Collapsed toggles: restore neutral padding so layout doesn't shift */
.sidebar-module-group[data-expanded="false"] .sidebar-module-toggle {
  border-inline-start: 1px solid transparent;
}

/* ─── 22d. Lesson status icons — semantic color ──────────────────────────────
   Check = success green. In-progress = rose pulse. Available = slate.
   ─────────────────────────────────────────────────────────────────────────── */
.lesson-card.completed   .lesson-status-icon { color: var(--color-success); }
.lesson-card.in-progress .lesson-status-icon { color: var(--color-accent-text); }
.lesson-card.available   .lesson-status-icon { color: var(--color-text-dim); }

/* Sidebar status icons — same semantic palette */
.sidebar-lesson-link .sidebar-status-completed { color: var(--color-success); }
.sidebar-lesson-link .sidebar-status-progress  { color: var(--color-accent-text); }
.sidebar-lesson-link .sidebar-status-available { color: var(--color-text-dim); opacity: 0.7; }

/* ─── 22e. Profile stat cards — colored top borders ─────────────────────────
   XP = rose (achievement energy). Streak = amber (fire, consistency).
   Keeps the card surfaces neutral; only the top edge carries the signal.
   ─────────────────────────────────────────────────────────────────────────── */
.profile-stats-grid .stat-card:nth-child(1) {
  border-block-start: 2px solid var(--color-accent);
}
.profile-stats-grid .stat-card:nth-child(2) {
  border-block-start: 2px solid var(--color-warning);
}
.profile-stats-grid .stat-card:nth-child(2) .stat-card-value {
  color: var(--color-warning);
}

/* Level badge — colored by level tier */
.profile-level-badge[data-level="beginner"],
#header-level[data-level="beginner"] {
  background: color-mix(in srgb, var(--color-info) 15%, transparent);
  color: var(--color-info-text);
}
.profile-level-badge[data-level="intermediate"],
#header-level[data-level="intermediate"] {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}
.profile-level-badge[data-level="advanced"],
#header-level[data-level="advanced"] {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.profile-level-badge[data-level="expert"],
#header-level[data-level="expert"] {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent) 18%, transparent),
    color-mix(in srgb, var(--color-accent2) 18%, transparent)
  );
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* ─── 22f. Earned badge — richer treatment ───────────────────────────────────
   Gradient surface + soft glow ring. Still uses brand rose but elevated.
   ─────────────────────────────────────────────────────────────────────────── */
.badge-item.earned {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--color-accent) 14%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-accent2) 8%, var(--color-bg-elevated)) 100%
  );
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.badge-item.earned .badge-icon {
  color: var(--color-accent-text);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-accent) 40%, transparent));
}

/* ─── 22g. Tool cards — warm hover accent ────────────────────────────────────
   Subtle warm tint on the card surface complements the rose border on hover.
   ─────────────────────────────────────────────────────────────────────────── */
.tool-card:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg-elevated));
}

.tool-card-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  transition: background var(--transition-fast);
}

.tool-card:hover .tool-card-icon {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* ─── 22h. Parity pill — hidden from learners ────────────────────────────────
   Internal content-completeness tracking. Removed from the learner UI.
   ─────────────────────────────────────────────────────────────────────────── */
.module-meta-pill-parity { display: none; }

/* ─── 22i. Module priority chip — stronger accent ────────────────────────────
   "COMMENCER ICI" chip gets a proper filled accent treatment.
   ─────────────────────────────────────────────────────────────────────────── */
.module-priority-chip {
  background: var(--color-accent-aa);
  color: var(--color-on-accent);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* ─── 22j. Progress bar — per-module color in lesson header ──────────────────
   When a lesson's parent module is known, the fill matches its palette entry.
   Applied via .lesson-view[data-module] set by lesson-engine.js.
   ─────────────────────────────────────────────────────────────────────────── */
.lesson-view[data-module="mod-1"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-1-color), color-mix(in srgb, var(--mod-1-color) 60%, var(--color-accent2))); }
.lesson-view[data-module="mod-2"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-2-color), color-mix(in srgb, var(--mod-2-color) 60%, var(--color-success))); }
.lesson-view[data-module="mod-3"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-3-color), color-mix(in srgb, var(--mod-3-color) 60%, var(--mod-4-color))); }
.lesson-view[data-module="mod-4"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-4-color), color-mix(in srgb, var(--mod-4-color) 60%, var(--mod-5-color))); }
.lesson-view[data-module="mod-5"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-5-color), color-mix(in srgb, var(--mod-5-color) 60%, var(--mod-9-color))); }
.lesson-view[data-module="mod-6"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-6-color), color-mix(in srgb, var(--mod-6-color) 60%, var(--mod-2-color))); }
.lesson-view[data-module="mod-7"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-7-color), color-mix(in srgb, var(--mod-7-color) 60%, var(--mod-4-color))); }
.lesson-view[data-module="mod-8"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-8-color), color-mix(in srgb, var(--mod-8-color) 60%, var(--mod-5-color))); }
.lesson-view[data-module="mod-9"]  .progress-bar-fill { background: linear-gradient(90deg, var(--mod-9-color), color-mix(in srgb, var(--mod-9-color) 60%, var(--mod-5-color))); }
.lesson-view[data-module="mod-10"] .progress-bar-fill { background: linear-gradient(90deg, var(--mod-10-color), color-mix(in srgb, var(--mod-10-color) 60%, var(--mod-8-color))); }

/* ─── 23. Language Switcher Dropdown ─────────────────────────────────────────
   Replaces the blind cycle button with a friendly popover: native names,
   checkmark on active, chevron rotation, smooth entry animation.
   ─────────────────────────────────────────────────────────────────────────── */

/* Wrapper — creates the stacking context for the absolutely-positioned dropdown */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Globe and chevron sizing inside the toggle button */
.lang-globe-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.lang-chevron-icon {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Rotate chevron when dropdown is open */
.lang-toggle-btn[aria-expanded="true"] .lang-chevron-icon {
  transform: rotate(180deg);
}

/* Override button to support the multi-child flex row */
.lang-toggle-btn {
  gap: 0.3rem;
}

/* Keep the code label width stable across FR/EN/AR to avoid layout jump */
#lang-current {
  min-width: 1.6em;
  text-align: center;
}

/* Active state — accent border when open */
.lang-toggle-btn[aria-expanded="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* ── Dropdown panel ────────────────────────────────────────────────────────── */
.lang-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 168px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 16px -4px rgba(0, 0, 0, 0.35),
    0 2px 4px -2px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 12%, transparent);
  padding: 0.3rem;
  z-index: 200;
  list-style: none;
  margin: 0;
  animation: langDropIn 160ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes langDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Option rows ────────────────────────────────────────────────────────────── */
.lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
}

.lang-option:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

.lang-option[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 600;
}

/* Checkmark — hidden until option is selected */
.lang-option-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 700;
  transition: opacity var(--transition-fast);
}

.lang-option-check::before {
  content: "✓";
}

.lang-option[aria-selected="true"] .lang-option-check {
  opacity: 1;
}

/* Native language name fills available space */
.lang-option-native {
  flex: 1;
}

/* Language code chip */
.lang-option-code {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  background: var(--color-surface);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.lang-option[aria-selected="true"] .lang-option-code {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-text);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
}

/* RTL — dropdown opens to the left edge of the button instead */
[dir="rtl"] .lang-dropdown {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lang-dropdown { animation: none; }
  .lang-chevron-icon { transition: none; }
}

/* ─── Theme Switcher (header icon group) ─────────────────────────────────── */
.theme-switcher {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

[data-theme="light"] .theme-switcher {
  background: rgba(0, 0, 0, 0.07);
}

.theme-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.theme-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.theme-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.theme-btn[aria-pressed="true"]:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* ─── Theme Pill (settings segmented control) ────────────────────────────── */
.theme-pill {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}

[data-theme="light"] .theme-pill {
  background: rgba(0, 0, 0, 0.07);
}

.theme-pill-btn {
  flex: 1;
  padding: 0.375rem 0;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.theme-pill-btn:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.theme-pill-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

.theme-pill-btn[aria-pressed="true"]:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* ─── Responsive: hide theme-switcher text on small screens ─────────────── */
@media (max-width: 768px) {
  .theme-switcher {
    display: none;
  }
}