/* ════════════════════════════════════════════════════════════════
   W2L LIQUID GLASS — site-wide skin.
   Loaded on every course page after styles/theme.css, so its rules win
   the cascade against both the page-inline styles and the light-theme
   overrides.

   Three layers:
   1. A fixed "aurora" backdrop (html::before) — brand-coloured radial
      glows, pure CSS, zero runtime cost, identical under
      prefers-reduced-motion because nothing moves.
   2. Transparent body so the aurora shows through.
   3. Frosted-glass surfaces: heavy backdrop blur + saturation, the
      specular top rim, soft drop shadows. Surface list mirrors the
      generated section of theme.css (every card-like opaque surface
      across the site) — when you add a new card class, add it to BOTH.

   Terminal surfaces stay opaque dark in both themes (course doctrine).
   prefers-reduced-transparency gets near-opaque fallbacks.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Aurora backdrop ─────────────────────────────────────────── */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 12% 16%, rgba(0, 196, 196, 0.14), transparent 70%),
    radial-gradient(40% 55% at 88% 10%, rgba(91, 77, 255, 0.11), transparent 70%),
    radial-gradient(52% 60% at 82% 86%, rgba(196, 160, 48, 0.10), transparent 70%),
    radial-gradient(45% 52% at 22% 92%, rgba(196, 33, 140, 0.07), transparent 72%),
    var(--bg, #060608);
}
html.w2l-light::before {
  background:
    radial-gradient(42% 52% at 12% 16%, rgba(0, 170, 175, 0.16), transparent 70%),
    radial-gradient(40% 55% at 88% 10%, rgba(110, 95, 255, 0.13), transparent 70%),
    radial-gradient(52% 60% at 82% 86%, rgba(214, 175, 60, 0.14), transparent 70%),
    radial-gradient(45% 52% at 22% 92%, rgba(225, 90, 175, 0.10), transparent 72%),
    var(--bg, #f3f4f6);
}

/* ── 2. Let the aurora show ─────────────────────────────────────── */
body,
html.w2l-light body { background: transparent; }

/* ── 3. Glass surfaces ──────────────────────────────────────────── */
/* Card-like opaque surfaces from every page (mirror of theme.css's
   generated surface list, minus terminals and micro-elements). */
.lesson-item, .info-box, .quiz-container, .distro-comparison,
.module-nav-btn, .distro-card, .reason-card, .resource-card,
.stat-card, .cmd-card, .day-card, .decision-tree, .ws-step,
.exercise-card, .fr-res-card, .lab-shell, .lab-result, .module-card,
.mcard, .boss, .progress-ribbon, .next-step-card, .cert-cta,
.module-hero-badge {
  background: rgba(16, 20, 30, 0.34);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 18px 50px rgba(0, 0, 0, 0.35);
}
.lesson-item:hover, .module-nav-btn:hover, .mcard:hover,
.module-card:hover, .distro-card:hover, .next-step-card:hover,
.boss:hover {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 24px 64px rgba(0, 0, 0, 0.42),
    0 0 36px rgba(0, 196, 196, 0.10);
}

/* Quiz options as glass capsules */
.quiz-option {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Chrome: sidebar + topbar as tall glass panes */
.sidebar-nav {
  background: rgba(8, 10, 16, 0.52);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.module-topbar {
  background: rgba(8, 10, 16, 0.42);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ── Light-water variants ───────────────────────────────────────── */
html.w2l-light .lesson-item, html.w2l-light .info-box,
html.w2l-light .quiz-container, html.w2l-light .distro-comparison,
html.w2l-light .module-nav-btn, html.w2l-light .distro-card,
html.w2l-light .reason-card, html.w2l-light .resource-card,
html.w2l-light .stat-card, html.w2l-light .cmd-card,
html.w2l-light .day-card, html.w2l-light .decision-tree,
html.w2l-light .ws-step, html.w2l-light .exercise-card,
html.w2l-light .fr-res-card, html.w2l-light .lab-shell,
html.w2l-light .lab-result, html.w2l-light .module-card,
html.w2l-light .mcard, html.w2l-light .boss,
html.w2l-light .progress-ribbon, html.w2l-light .next-step-card,
html.w2l-light .cert-cta, html.w2l-light .module-hero-badge {
  background: rgba(255, 255, 255, 0.40);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    0 18px 50px rgba(20, 32, 44, 0.12);
}
html.w2l-light .lesson-item:hover, html.w2l-light .module-nav-btn:hover,
html.w2l-light .mcard:hover, html.w2l-light .module-card:hover,
html.w2l-light .distro-card:hover, html.w2l-light .next-step-card:hover,
html.w2l-light .boss:hover {
  border-color: rgba(255, 255, 255, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 24px 64px rgba(20, 32, 44, 0.16),
    0 0 36px rgba(0, 138, 143, 0.10);
}
html.w2l-light .quiz-option {
  background: rgba(255, 255, 255, 0.50);
  border-color: rgba(255, 255, 255, 0.70);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
html.w2l-light .sidebar-nav {
  background: rgba(255, 255, 255, 0.55);
  border-right-color: rgba(20, 32, 44, 0.08);
}
html.w2l-light .module-topbar {
  background: rgba(255, 255, 255, 0.45);
  border-bottom-color: rgba(20, 32, 44, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80);
}

/* ── Doctrine guard: terminals stay opaque dark in both themes ──── */
.terminal-block, .terminal-bar, .lab-terminal, .lab-terminal-bar,
.terminal-mockup, .fs-tree,
html.w2l-light .terminal-block, html.w2l-light .terminal-bar,
html.w2l-light .lab-terminal, html.w2l-light .lab-terminal-bar,
html.w2l-light .terminal-mockup, html.w2l-light .fs-tree {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.terminal-block, .lab-terminal, .terminal-mockup, .fs-tree,
html.w2l-light .terminal-block, html.w2l-light .lab-terminal,
html.w2l-light .terminal-mockup, html.w2l-light .fs-tree {
  background: var(--term-bg, #090d14);
}

/* ── Accessibility: prefers-reduced-transparency ────────────────── */
@media (prefers-reduced-transparency: reduce) {
  body, html.w2l-light body { background: var(--bg, #060608); }
  .lesson-item, .info-box, .quiz-container, .distro-comparison,
  .module-nav-btn, .distro-card, .reason-card, .resource-card,
  .stat-card, .cmd-card, .day-card, .decision-tree, .ws-step,
  .exercise-card, .fr-res-card, .lab-shell, .lab-result, .module-card,
  .mcard, .boss, .progress-ribbon, .next-step-card, .cert-cta,
  .module-hero-badge, .quiz-option, .sidebar-nav, .module-topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(13, 16, 24, 0.96);
  }
  html.w2l-light .lesson-item, html.w2l-light .info-box,
  html.w2l-light .quiz-container, html.w2l-light .mcard,
  html.w2l-light .sidebar-nav, html.w2l-light .module-topbar,
  html.w2l-light .quiz-option {
    background: rgba(255, 255, 255, 0.97);
  }
}