:root {
  --page: #f8fbfd;
  --surface: #ffffff;
  --surface-soft: #edf7fb;
  --surface-active: #d7edf7;
  --line: #c9dde8;
  --text: #10263a;
  --muted: #536b7b;
  --green: #4b872b;
  --green-bright: #3f7725;
  --green-soft: #e8f3df;
  --success-text: #315d1d;
  --focus: #007ea8;
  --header: #eaf6fb;
  --header-text: #10263a;
  --header-muted: #276987;
  --step-strip: #ffffff;
  --progress-track: #d7eaf3;
  --scroll-track: #edf5f8;
  --scroll-thumb: #91b9cf;
  --media-shadow: 0 18px 42px rgba(29, 76, 101, .14);
  --blue: #087ea5;
  --blue-strong: #006b91;
  --blue-soft: #dff1f8;
  --completion-blue: #075d82;
  --check-blue: #78b9d3;
  --check-text: #10263a;
}

:root[data-theme="dark"] {
  --page: #0b1c29;
  --surface: #122b3d;
  --surface-soft: #17384e;
  --surface-active: #214a64;
  --line: #345a70;
  --text: #f3f8fb;
  --muted: #b7cbd7;
  --green: #79ad48;
  --green-bright: #9acb69;
  --green-soft: #243f2e;
  --success-text: #d7efbf;
  --focus: #83c9eb;
  --header: #10283a;
  --header-text: #f3f8fb;
  --header-muted: #a8ccdf;
  --step-strip: #0e2332;
  --progress-track: #28485b;
  --scroll-track: #142d3e;
  --scroll-thumb: #5f879d;
  --media-shadow: 0 20px 45px rgba(0, 0, 0, .28);
  --blue: #63b3d9;
  --blue-strong: #8acdec;
  --blue-soft: #193f56;
  --completion-blue: #4f9fc6;
  --check-blue: #2f6f8d;
  --check-text: #ffffff;
}

/* Temporary VP comparison lesson. These values mirror the current VP earthy
   theme while the lesson remains isolated inside Rescue Me for review. */
body[data-comparison-theme="vp-green"] {
  --page: #f2f0e9;
  --surface: #fffefa;
  --surface-soft: #e9e7dd;
  --surface-active: #e4ead2;
  --line: #d4d0c1;
  --text: #293024;
  --muted: #68695d;
  --green: #85b923;
  --green-bright: #668f18;
  --green-soft: #edf4dc;
  --success-text: #4d681c;
  --focus: #6f9d19;
  --header: #30342b;
  --header-text: #fffefa;
  --header-muted: #d7d4c8;
  --step-strip: #faf8f2;
  --progress-track: #d8d6ca;
  --scroll-track: #e8e5dc;
  --scroll-thumb: #9a988c;
  --media-shadow: 0 18px 42px rgba(45, 43, 32, .17);
  --blue: #85b923;
  --blue-strong: #668f18;
  --blue-soft: #edf4dc;
  --completion-blue: #85b923;
  --check-blue: #edf4dc;
  --check-text: #4d681c;
}

:root[data-theme="dark"] body[data-comparison-theme="vp-green"] {
  --page: #171a15;
  --surface: #22261e;
  --surface-soft: #2b3026;
  --surface-active: #374329;
  --line: #45483c;
  --text: #f4f1e8;
  --muted: #c3c0b4;
  --green: #8fbe2d;
  --green-bright: #acd653;
  --green-soft: #344222;
  --success-text: #d9efaa;
  --focus: #b7df66;
  --header: #20231d;
  --header-text: #fffefa;
  --header-muted: #cbc7b9;
  --step-strip: #1b1e18;
  --progress-track: #3a3d32;
  --scroll-track: #292c25;
  --scroll-thumb: #77786c;
  --media-shadow: 0 20px 45px rgba(0, 0, 0, .3);
  --blue: #8fbe2d;
  --blue-strong: #acd653;
  --blue-soft: #344222;
  --completion-blue: #8fbe2d;
  --check-blue: #344222;
  --check-text: #d9efaa;
}

body[data-comparison-theme="vp-green"],
body[data-comparison-theme="vp-green"] .site-shell {
  background: var(--page);
}

/* Blue leads navigation and actions; green is reserved for completion/success. */
.brand-mark, .progress-value, .primary-button { background: var(--blue); }
.primary-button { border-color: var(--blue-strong); }
.step-kicker, .duration-chip, .panel-eyebrow { color: var(--blue-strong); }
.action-list li::before { background: var(--blue-soft); color: var(--blue-strong); }
.resource-link:hover { border-color: var(--blue); background: var(--blue-soft); }
.theme-toggle {
  border-color: #1274cc;
  background: #1e90ff;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 82, 153, .28);
}
.theme-toggle:hover { border-color: #0f65b4; background: #187bcd; color: #ffffff; }
.step-button.is-complete .step-number {
  border-color: var(--completion-blue);
  background: var(--completion-blue);
  color: #ffffff;
}
.complete-button[aria-pressed="true"] {
  border-color: var(--completion-blue);
  background: var(--completion-blue);
  color: #ffffff;
}
.success-check {
  background: var(--check-blue);
  color: var(--check-text);
}
.success-check strong { color: var(--check-text); }

.action-column {
  display: grid;
  gap: 12px;
}

.primary-lesson-action {
  display: grid;
  place-items: center;
  min-height: 74px;
  padding: 12px 18px;
  border: 4px solid var(--blue);
  border-radius: 14px;
  background: var(--surface);
  color: var(--blue-strong);
  box-shadow: 0 8px 22px rgba(8, 126, 165, 0.12);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.primary-lesson-action:hover {
  background: var(--blue-soft);
  transform: translateY(-1px);
}

.primary-lesson-action[hidden] { display: none; }

/* Keep the inactive media element out of the layout. The base media rule sets
   display:block, which otherwise overrides the browser's hidden attribute. */
.media-panel video[hidden],
.media-panel img[hidden] {
  display: none !important;
}

/* Wide lesson layout: media is the primary learning surface. */
.lesson-shell {
  width: min(1540px, calc(100% - 48px));
  padding: 24px 0 30px;
}

.lesson-summary { margin-top: 8px; }

.learning-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  margin-top: 20px;
}

.action-column { display: block; }

.action-panel { padding: 18px; }

.primary-lesson-action {
  min-height: 58px;
  margin-bottom: 16px;
  padding: 10px 15px;
  border-width: 3px;
  box-shadow: none;
  font-size: clamp(20px, 1.55vw, 25px);
}

.action-list {
  gap: 11px;
  margin-top: 15px;
}

.action-list p { margin-top: 2px; }

.success-check {
  margin-top: 14px;
  padding: 11px 12px;
}

.lesson-links { margin-top: 10px; }
.resource-link { padding: 7px 9px; }
.lesson-controls { margin-top: 20px; }

.media-panel img { cursor: zoom-in; }

.image-lightbox {
  width: min(96vw, 1600px);
  max-width: none;
  padding: 48px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #071018;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
}

.image-lightbox::backdrop { background: rgba(3, 12, 19, .82); }

.image-lightbox img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 72px);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 7px 11px;
  border: 1px solid #8db7ca;
  border-radius: 9px;
  background: #ffffff;
  color: #10263a;
  cursor: pointer;
  font-weight: 700;
}

@media (min-width: 1100px) {
  .site-header { padding: 12px clamp(24px, 3vw, 48px); }
  .brand-mark { width: 36px; height: 36px; }
  .step-nav { padding: 10px clamp(16px, 2.5vw, 42px); }
  .step-button { padding-block: 8px; }
  .lesson-title-row { align-items: center; }
  h1 { font-size: clamp(34px, 3vw, 44px); }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .lesson-shell { width: calc(100% - 32px); }
  .learning-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: 16px;
  }
  .action-panel { padding: 16px; }
  .primary-lesson-action { min-height: 54px; margin-bottom: 14px; }
}

@media (max-width: 900px) {
  .lesson-shell {
    width: 100%;
    padding: 26px 20px 34px;
  }
  .learning-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }
  .primary-lesson-action { margin-bottom: 14px; }
}

@media (max-width: 600px) {
  .lesson-shell { padding: 22px 14px 30px; }
  h1 { font-size: 30px; }
  .lesson-summary { font-size: 14px; }
  .action-panel { padding: 15px; }
  .primary-lesson-action {
    min-height: 54px;
    font-size: 21px;
  }
  .action-list { gap: 10px; }
}