/* ============================================================
   FKTP COURSE / CURRICULUM UI
   Layered on top of styles.css
   ============================================================ */

/* ---------- Topbar left group (burger + breadcrumb) ---------- */
.lesson__topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* ---------- Hamburger + close: shared base style ---------- */
.course-burger,
.course-nav__close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  transition: color 0.18s var(--ease);
  flex-shrink: 0;
}

/* Shift the buttons outward by their internal padding so the visible icon
   sits at the page's content margin instead of the button-box edge. */
.course-burger { margin-left: -11px; }
.course-nav__close { margin-right: -8px; }


.course-burger:hover,
.course-nav__close:hover { color: var(--ember); }

.course-burger:focus-visible,
.course-nav__close:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Hamburger glyph (SVG for crisp, even-weight lines) */
.course-burger svg { display: block; }

/* Close glyph (<<<) */
.course-nav__close svg {
  display: block;
  transition: transform 0.2s var(--ease);
}
.course-nav__close:hover svg { transform: translateX(-2px); }

/* Burger only visible when sidebar is closed (21st.dev mutual-exclusivity).
   When the sidebar is open, the burger drops out of layout so the breadcrumb
   takes its place at the gutter edge — aligned with everything else. */
@media (min-width: 1025px) {
  .course-layout:not(.is-collapsed) .course-burger { display: none; }
}
@media (max-width: 1024px) {
  .course-layout:has(.course-nav.is-open) .course-burger { display: none; }
}

/* ---------- Layout: sidebar + main column ---------- */
.course-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100dvh - 80px);
  transition: grid-template-columns 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-layout.is-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.course-layout > .lesson,
.course-layout > .course {
  min-width: 0;
}

/* ---------- Sidebar (Skool-style) ---------- */
.course-nav {
  position: sticky;
  top: 0;
  align-self: start;
  /* Subtract however many pixels of the site-header are currently visible.
     JS updates --course-nav-offset on scroll so the sidebar's bottom edge
     stays inside the viewport — otherwise its bottom items get clipped
     below the fold while the page is still showing the header. */
  height: calc(100dvh - var(--course-nav-offset, 0px));
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--paper-bright);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  z-index: 30;
  width: 320px;
  transition: opacity 0.2s var(--ease);

  /* Thin scrollbar with reserved gutter — no layout shift, minimal width cost.
     Scrollbar appears only when needed but the gutter is always there. */
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 13, 12, 0) transparent;
  scrollbar-gutter: stable;
  transition: scrollbar-color 0.2s var(--ease);
}

.course-nav:hover {
  scrollbar-color: rgba(13, 13, 12, 0.32) transparent;
}

/* Webkit overlay-style: thumb visible only on sidebar hover */
.course-nav::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
.course-nav::-webkit-scrollbar-track { background: transparent; }
.course-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s var(--ease);
}
.course-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(13, 13, 12, 0.32);
  background-clip: padding-box;
}
.course-nav::-webkit-scrollbar-thumb:hover { background: var(--ember); background-clip: padding-box; }

.course-layout.is-collapsed .course-nav {
  opacity: 0;
  pointer-events: none;
}

.course-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  flex-shrink: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: var(--paper-bright);
  z-index: 2;
}

.course-nav__brand {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: var(--ink);
}

.course-nav__brand-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
}

.course-nav__brand-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1;
}

/* (Pseudo-element chevron rendering removed — now handled by inline SVG on the button.) */

.course-nav__overall {
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  gap: 8px;
}

.course-nav__overall-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.course-nav__list {
  padding: 8px 0 32px;
  flex: 1;
}

/* ---------- Module group ---------- */
.course-nav__module {
  border-top: 1px solid var(--rule);
}
.course-nav__module:first-child { border-top: none; }

.course-nav__module-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 24px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s var(--ease);
}

.course-nav__module-head::-webkit-details-marker { display: none; }
.course-nav__module-head::marker { display: none; content: ""; }

.course-nav__module-head:hover { background: var(--paper); }

.course-nav__module-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ember);
}

.course-nav__module-meta { display: grid; gap: 2px; min-width: 0; }

.course-nav__module-code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
}

.course-nav__module-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-nav__module-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ash);
}

/* ---------- Lessons ---------- */
.course-nav__lessons {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.course-nav__lesson a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 8px 24px 8px 24px;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  position: relative;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.course-nav__lesson a:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.course-nav__lesson--active a {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
}

.course-nav__lesson--active a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ember);
}

.course-nav__lesson-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ash);
  text-align: right;
}

.course-nav__lesson-check {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--ash-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper-bright);
  background: transparent;
  flex-shrink: 0;
}

.course-nav__lesson--complete .course-nav__lesson-check {
  background: var(--ember);
  border-color: var(--ember);
}

.course-nav__lesson--complete .course-nav__lesson-check::after { content: "\2713"; }
.course-nav__lesson--complete a { color: var(--ash); }

/* scroll-margin keeps the active lesson clear of the sticky head + overall
   bar when scrollIntoView('nearest') runs on lesson navigation. The active
   item never tucks behind the fixed top section. */
.course-nav__lesson {
  scroll-margin-top: 100px;
  scroll-margin-bottom: 32px;
}

/* Section header in the sidebar — surfaced from a mid-deck cover slide.
   Mono small-caps in ember, hairline rule beneath, sits between groups of
   lesson rows. Reads as an editorial chapter mark. */
.course-nav__section-header {
  list-style: none;
  margin: 18px 0 6px;
  padding: 0 12px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  border-bottom: 1px solid var(--rule);
}
.course-nav__lessons > .course-nav__section-header:first-child {
  margin-top: 0;
}

/* ---------- Edge tab toggle: vertical tab attached at the sidebar/main seam, vertically centered ---------- */
/* Edge tab removed — burger + sidebar close button are the only toggles now (21st.dev pattern) */
.course-nav__toggle {
  display: none !important;
}

.course-nav__toggle:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .course-nav__toggle,
  .course-nav__toggle::before,
  .course-layout {
    transition: none !important;
  }
}

@media (max-width: 1024px) {
  .course-layout { grid-template-columns: 1fr; }
  /* On mobile, the toggle becomes a hamburger pill at bottom-left, drawer-style */
  .course-layout .course-nav__toggle {
    top: auto;
    bottom: 80px;
    left: 16px;
    transform: none;
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 12px 18px;
    background: var(--ink);
    color: var(--paper-bright);
    border: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .course-layout .course-nav__toggle::before { display: none; }
  .course-layout .course-nav__toggle::after { content: "Course"; font-size: inherit; }
  .course-layout.is-collapsed .course-nav__toggle { left: 16px; }

  .course-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .course-nav.is-open { transform: translateX(0); }
}


.course {
  background: var(--paper);
  min-height: 100dvh;
  padding: clamp(48px, 6vw, 96px) 0 clamp(80px, 10vw, 140px);
  position: relative;
}

.course-frame { margin-bottom: clamp(32px, 4vw, 56px); }

.course__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: break-word;
}

.course__title em { color: var(--ash); font-weight: 300; }

.course__title-period {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  background: var(--ember);
  vertical-align: baseline;
  margin-left: 0.06em;
  transform: translateY(-0.06em);
}

.course__subtitle {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ---------- Top status bar (welcome + progress summary) ---------- */
.course-status {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(32px, 4vw, 56px);
  align-items: end;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(28px, 3.5vw, 44px) 0;
}

.course-status__welcome { display: grid; gap: 6px; }

.course-status__welcome-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.course-status__welcome-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: uppercase;
}

.course-status__welcome-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ash);
  margin-top: 4px;
  max-width: 50ch;
}

.course-status__welcome-meta a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}

.course-status__welcome-meta a:hover { color: var(--ink); }

.course-status__progress { display: grid; gap: 10px; }

.course-status__progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.course-status__progress-row .label { color: var(--ash); }
.course-status__progress-row .value { color: var(--ink); font-size: 13px; }

.progress-bar {
  position: relative;
  height: 4px;
  background: rgba(13, 13, 12, 0.12);
  overflow: hidden;
  border-radius: 2px;
}

.progress-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ember);
  width: var(--progress, 0%);
  transition: width 0.5s var(--ease);
}

@media (max-width: 880px) {
  .course-status { grid-template-columns: 1fr; align-items: stretch; }
}

/* Simple variant — single-row full-width progress (browse mode) */
.course-status--simple {
  display: block;
}

.course-status__progress-aside {
  display: inline-flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.course-status__register {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.course-status__register:hover {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--paper-bright);
}

@media (max-width: 720px) {
  .course-status__progress-aside { width: 100%; justify-content: space-between; margin-top: 6px; }
}

/* ---------- Module list (dashboard) ---------- */
.module-list {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(14px, 1.5vw, 20px);
}

.module-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(80px, 110px) minmax(0, 1fr) minmax(160px, 220px) auto;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  background: var(--paper-bright);
  border: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.16s var(--ease-quick);
}

.module-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}

.module-card:hover { border-color: var(--ink); }
.module-card:hover::after { transform: translateY(0); }
.module-card:hover .module-card__num,
.module-card:hover .module-card__title,
.module-card:hover .module-card__title em,
.module-card:hover .module-card__desc,
.module-card:hover .module-card__progress-meta { color: var(--paper-bright); }
.module-card:hover .module-card__num em { color: var(--ash-light); }
.module-card:hover .module-card__progress-bar { background: rgba(250, 249, 244, 0.2); }
.module-card:hover .module-card__cta { background: var(--ember); border-color: var(--ember); color: var(--paper-bright); }
.module-card:active { transform: scale(0.997); }

.module-card__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ember);
  transition: color 0.3s var(--ease);
}

.module-card__num em {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ash);
  margin-top: 6px;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}

.module-card__body { display: grid; gap: 8px; }

.module-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.module-card__title em { color: var(--ash); font-weight: 300; transition: color 0.3s var(--ease); }

.module-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  transition: color 0.3s var(--ease);
}

.module-card__progress { display: grid; gap: 8px; }

.module-card__progress-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.3s var(--ease);
}

.module-card__progress-bar {
  position: relative;
  height: 3px;
  background: rgba(13, 13, 12, 0.12);
  border-radius: 2px;
  transition: background 0.3s var(--ease);
}

.module-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.module-card__cta-arrow { transition: transform 0.3s var(--ease); display: inline-block; }
.module-card:hover .module-card__cta-arrow { transform: translateX(4px); }

@media (max-width: 880px) {
  .module-card {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num body"
      "progress progress"
      "cta cta";
    gap: 18px;
  }
  .module-card__num { grid-area: num; font-size: 40px; }
  .module-card__body { grid-area: body; }
  .module-card__progress { grid-area: progress; }
  .module-card__cta { grid-area: cta; justify-self: flex-start; }
}

/* ---------- Lesson list (inside a module page) ---------- */
.lesson-list {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 0;
}

/* Section header on the module page — surfaced from a mid-deck cover slide.
   Stronger treatment than the sidebar's compact version: display caps with
   ember accent rule. Anchors the visual chapters of the module. */
.lesson-list__section-header {
  margin: clamp(28px, 3vw, 40px) 0 clamp(8px, 1vw, 14px);
  padding: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ember);
}
.lesson-list > .lesson-list__section-header:first-child {
  margin-top: 0;
}

.lesson-row {
  display: grid;
  grid-template-columns: 28px 80px minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: 22px 4px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  text-align: left;
  transition: background 0.2s var(--ease);
}

.lesson-row:last-child { border-bottom: 1px solid var(--rule); }
.lesson-row:hover { background: var(--paper-bright); }

.lesson-row__check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--paper-bright);
  background: transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lesson-row.is-complete .lesson-row__check {
  background: var(--ember);
  border-color: var(--ember);
}

.lesson-row.is-complete .lesson-row__check::after {
  content: "✓";
  font-weight: 700;
}

.lesson-row__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ash);
}

.lesson-row__title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.35;
}

.lesson-row.is-complete .lesson-row__title { color: var(--ash); }

.lesson-row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
}

@media (max-width: 720px) {
  .lesson-row {
    grid-template-columns: 22px 1fr;
    grid-template-areas:
      "check title"
      ". meta";
    gap: 8px 14px;
    padding: 18px 4px;
  }
  .lesson-row__check { grid-area: check; }
  .lesson-row__title { grid-area: title; }
  .lesson-row__num { display: none; }
  .lesson-row__meta { grid-area: meta; }
}

/* ---------- Lesson page ---------- */
.lesson {
  background: var(--paper);
  min-height: 100dvh;
  padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 140px);
}

/* Editorial spine — applies ONLY to the body content (slide text and the
   media wrapper). Title, breadcrumb meta, instructor notes, and the
   prev/complete/next action bar continue to span the full wrap width
   like they did before — those are page-level chrome, not slide reading
   content. Wrap stays at the global 1320px default.

   Slide body within .lesson__content is centred (margin auto) at its
   own 64ch reading measure. Slide media is centred too and can extend
   up to 1100px when its natural size warrants it.
*/

/* Body inside the content slot centres at its 64ch reading measure.
   Split body uses its own fit-content rules — leave alone. */
.lesson__content--text-only > .lesson__body,
.lesson__content--hero > .lesson__body,
.lesson__content--gallery > .lesson__body {
  margin-left: auto;
  margin-right: auto;
}

/* Figures / galleries / single-image media can stretch up to 1100px when
   their natural size benefits. Always centred. */
.lesson__content--hero > .lesson__media,
.lesson__content--gallery > .lesson__media {
  max-width: min(1100px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Lesson sticky address bar (breadcrumb + burger). Slim, single row, gutter-aligned. */
.lesson__topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: calc(-1 * clamp(40px, 5vw, 72px)) calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter);
  height: 60px;
  background: rgba(232, 230, 222, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(28px, 3.5vw, 40px);
}

/* Address-tree breadcrumb (FKTP › FD202 › Lesson) */
.lesson__crumbs {
  display: flex;
  align-items: center;
  align-self: center;
  flex-wrap: nowrap;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.lesson__crumb {
  color: var(--ash);
  text-decoration: none;
  padding: 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s var(--ease);
  min-width: 0;
  max-width: 28ch;
}

.lesson__crumb:first-child { padding-left: 0; }

.lesson__crumb:hover { color: var(--ember); }

.lesson__crumb--current {
  color: var(--ink);
  font-weight: 700;
  pointer-events: none;
  cursor: default;
  flex-shrink: 1;
}

.lesson__crumb-sep {
  color: var(--ash-light);
  font-size: 16px;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .lesson__topbar { flex-wrap: wrap; }
  .lesson__back-title { max-width: 22ch; }
}

/* Lesson position meta — replaces the breadcrumb (topbar covers wayfinding) */
.lesson__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lesson__meta-num {
  color: var(--ember);
  font-size: 13px;
  font-weight: 700;
}

.lesson__meta-sep { color: var(--ash-light); }
.lesson__meta-progress { color: var(--ash); }

/* Course-frame "All modules" back link inside section-frame headers */
.course-frame__back {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  text-decoration: none;
  transition: color 0.2s var(--ease);
  margin-left: auto;
}
.course-frame__back:hover { color: var(--ember); }

/* (Legacy .lesson__crumbs duplicate removed — see canonical rule above) */
.lesson__crumbs .sep { color: var(--ash-light); }
.lesson__crumbs .current { color: var(--ink); }

.lesson__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: break-word;
  margin-bottom: clamp(16px, 2vw, 22px);
  text-align: center;
}

.lesson__title em { color: var(--ash); font-weight: 300; }

.lesson__lede {
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ---------------------------------------------------------------------------
   Module page — "What you'll learn" block.
   Curated bullet list pulled from CURRICULUM[].objectives. Editorial feel
   matching the rest of the curriculum site: ember accent rail on the left
   to mark it as overview/context content, mono small-caps eyebrow, and an
   ember dash before each item instead of a default bullet glyph.
   ---------------------------------------------------------------------------*/
.mod-objectives {
  margin: clamp(28px, 3.5vw, 48px) 0;
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 36px);
  background: var(--paper-bright);
  border-left: 3px solid var(--ember);
}
.mod-objectives[hidden] { display: none; }

.mod-objectives__head {
  margin-bottom: 16px;
}
.mod-objectives__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
}

.mod-objectives__body {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two-column grid uses the full panel width without getting busy. Falls
     to a single column on narrow viewports. */
  grid-template-columns: 1fr 1fr;
  gap: 14px clamp(28px, 3vw, 44px);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

@media (max-width: 720px) {
  .mod-objectives__body {
    grid-template-columns: 1fr;
  }
}
.mod-objectives__body li {
  position: relative;
  padding-left: 22px;
}
.mod-objectives__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background: var(--ember);
}

/* ---------------------------------------------------------------------------
   Lesson content wrapper — populated by the renderer. Holds whichever
   inner layout was chosen for the slide (hero / split / gallery / text).
   ---------------------------------------------------------------------------*/
.lesson__content {
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* ---------------------------------------------------------------------------
   Lesson entrance — subtle staggered fade + slight upward slide for the
   title, content, and notes panel. Runs on initial page load and on every
   SPA navigation (course.js restarts animations on lesson swap by toggling
   element.style.animation, forcing a reflow). Strong ease-out curve gives
   instant initial movement.
   ---------------------------------------------------------------------------*/
@keyframes lessonReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lesson__title {
  animation: lessonReveal 320ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
}
.lesson__content {
  animation: lessonReveal 320ms 40ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
}
.lesson__notes:not([hidden]) {
  animation: lessonReveal 320ms 80ms cubic-bezier(0.23, 1, 0.32, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .lesson__title,
  .lesson__content,
  .lesson__notes { animation: none !important; }
}

/* Side-by-side layout — for slides where the original PPT placed an image
   beside body text. The container shrinks to fit its two children (body +
   image at their natural widths) and centres as a group. This avoids the
   half-column whitespace problem where a 50/50 grid leaves a short body
   and a small image stranded at opposite edges of the page. */
.lesson__split {
  display: flex;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.lesson__split .lesson__media,
.lesson__split .lesson__media--split {
  margin-bottom: 0;
}

/* Body sized for readability (~48ch reading measure) but allowed to shrink
   when content is shorter. Paragraphs in split context are usually short
   reference bits — definitions, bullet lists — so the rhythm is tighter
   than the full-width body. */
.lesson__body--split {
  max-width: 48ch;
  min-width: 0;
  font-size: 17px;
  line-height: 1.55;
}
.lesson__body--split p { margin-bottom: 0.7em; }
.lesson__body--split p:last-child { margin-bottom: 0; }
.lesson__body--split ul,
.lesson__body--split ol { margin-bottom: 0.7em; }
.lesson__body--split ul:last-child,
.lesson__body--split ol:last-child { margin-bottom: 0; }
.lesson__body--split ul li,
.lesson__body--split ol li { margin-bottom: 0.35em; }

/* Image at its natural width, capped so very large images don't dominate.
   The 480px ceiling lets a wide landscape image (e.g. "...A Real Fire"
   at 886×525) sit next to a 48ch body column without overflowing the
   ~985px content area. Pairs with the body's 48ch cap to keep the
   composition balanced. */
.lesson__media--split {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 480px;
}
.lesson__media--split .lesson__media-figure {
  margin: 0;
}
.lesson__media--split .lesson__media-figure img,
.lesson__media--split .lesson__media-figure video {
  max-width: 100%;
  max-height: 56vh;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .lesson__split {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .lesson__body--split { max-width: 100%; }
  .lesson__media--split .lesson__media-figure img,
  .lesson__media--split .lesson__media-figure video {
    max-width: 100%;
    max-height: none;
  }
}

/* ---------------------------------------------------------------------------
   Lesson media — single hero figure OR gallery of images/videos.
   Empty container is hidden via [hidden] attr from the renderer.
   ---------------------------------------------------------------------------*/
.lesson__media {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.lesson__media[hidden] { display: none; }

.lesson__media-figure {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* max-width: 100% (not width: 100%) so images render at their native size
   when smaller than the container — no blurry upscaling. Larger images
   still scale down to fit the column. */
.lesson__media-figure img,
.lesson__media-figure video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Gallery row for multi-image slides. Each figure flex-grows by its native
   aspect ratio (--ar set inline). Because flex-basis is 0 and the image is
   width: 100%, every item ends up the SAME ROW HEIGHT — equal to row_w /
   Σ(ar_i) — while preserving each image's natural shape. This is the
   classic "photo row" layout: balanced heights, no distortion, no awkward
   half-empty columns when one image is much narrower than another. */
.lesson__media-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 14px);
  align-items: flex-start;
}

.lesson__media-gallery .lesson__media-figure {
  flex: var(--ar, 1) 1 0;
  margin: 0;
  min-width: 0;
}

.lesson__media-gallery .lesson__media-figure img,
.lesson__media-gallery .lesson__media-figure video {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .lesson__media-gallery {
    flex-direction: column;
  }
  .lesson__media-gallery .lesson__media-figure {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* YouTube iframe embeds — preserve 16:9 */
.lesson__video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.lesson__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Native HTML5 video (R2-hosted .mp4) */
.lesson__video {
  display: block;
  width: 100%;
  max-height: 80vh;
  background: var(--ink);
}

/* ---------------------------------------------------------------------------
   Hero figure with editorial caption.

   Triggered for hero-layout slides where body content is sparse (≤ 5 short
   blocks / ≤ 220 chars). Rather than dropping the body as a left-aligned
   paragraph below the image, we render it like a magazine figure legend:

     [ ─────── image, centered ─────── ]

           ── EYEBROW (mono, ember) ──

       "Italic display lede, the takeaway."

         SUPPORT · SUPPORT · SUPPORT

   The whole block reads as one intentional unit instead of "image then
   leftover text."
   ---------------------------------------------------------------------------*/
/* Title-to-figure rhythm: the gap ABOVE the figure (margin-top) should
   be larger than the gap WITHIN the figure (gallery↔caption) so the
   figure reads as one composition deliberately separated from the title
   above it. max-width caps the figure when there's no inline constraint
   (caption mode no longer applies fill-fraction) so a wide hero image
   doesn't sprawl edge-to-edge of the content column. */
.lesson__figure {
  margin: clamp(40px, 5vw, 64px) auto clamp(32px, 4vw, 48px);
  padding: 0;
  max-width: min(880px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch; /* children fill the figure's locked width */
  gap: clamp(16px, 1.6vw, 22px); /* tighter internal rhythm than block-to-block */
}

.lesson__figure-media {
  width: 100%;
  display: flex;
  justify-content: center;
}
.lesson__figure-media img,
.lesson__figure-media video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Caption fills the figure's locked width (set by inline max-width on the
   parent <figure>) so caption width == gallery width — they read as one
   intentional column rather than disconnected blocks. */
.lesson__figure-caption {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: center;
}

/* The lede — the real body content, set as a centred caption. Archivo's
   italic is a synthetic oblique (no true italic glyphs) so it reads janky
   at display size; we use medium-weight upright Archivo and lean on size +
   measure + centring to do the editorial work instead. */
.lesson__figure-lede {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  /* Tighter measure than the caption block as a whole so the lede wraps
     into 2-3 lines and reads as a caption, not a sentence in a paragraph. */
  max-width: 44ch;
  text-wrap: balance;
}

/* Multi-image galleries already do plenty of visual work — dial the
   caption text down a notch so the composition stays balanced and the
   gallery remains the dominant visual element. */
.lesson__figure--gallery .lesson__figure-lede {
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 500;
  line-height: 1.45;
  max-width: 52ch;
}

/* Supporting fragments — mono small-caps, ember-coloured separators. */
.lesson__figure-supports {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0;
}
.lesson__figure-sep {
  color: var(--ember);
  font-weight: 700;
  margin: 0 0.35em;
}

@media (max-width: 720px) {
  .lesson__figure-caption { max-width: 100%; padding: 0 4px; }
  .lesson__figure-eyebrow { padding: 0 22px; }
  .lesson__figure-eyebrow::before,
  .lesson__figure-eyebrow::after { width: 14px; }
}

/* ---------------------------------------------------------------------------
   Lesson body — slide content (visible text on the slide itself)
   ---------------------------------------------------------------------------*/
.lesson__body {
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.lesson__body[hidden] { display: none; }

.lesson__body p { margin-bottom: 1.5em; }
.lesson__body p:last-child { margin-bottom: 0; }

.lesson__body h3 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2em 0 0.5em;
}

.lesson__body strong { color: var(--ink); font-weight: 600; }
.lesson__body em { font-style: italic; }
.lesson__body u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.lesson__body ul {
  margin: 0 0 1.5em 1.2em;
  list-style: none;
  padding: 0;
}
.lesson__body ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 0.5em;
}
.lesson__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--ember);
}

.lesson__body ol {
  margin: 0 0 1.5em 1.5em;
  padding: 0;
}
.lesson__body ol li { margin-bottom: 0.5em; padding-left: 4px; }

.lesson__body-error {
  color: var(--ember);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Body pattern treatments — applied by transformBody() in course.js to give
   structural weight to extracted PowerPoint content. The goal: each rendered
   lesson reads as a deliberate editorial spread, not a paragraph dump.
   ---------------------------------------------------------------------------*/

/* Section label — paragraph that ended in ":". Treated as a chapter
   eyebrow: mono caps, ember accent, hairline rule beneath. */
.lesson__body .lesson__label,
.lesson__notes-body .lesson__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 2em 0 0.9em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  /* Strip the trailing ':' visually — we already conveyed "header" status
     via the typographic treatment, the colon is now decorative noise.
     Achieved by limiting the visible content to ::before and using a
     specific selector — see JS, which strips ":" from label text. */
}
.lesson__body .lesson__label:first-child,
.lesson__notes-body .lesson__label:first-child { margin-top: 0; }

/* Definition pattern: "Term — body" rendered as a two-column reference grid.
   Term sits in display caps on the left; body flows on the right. Hairline
   rule beneath each row reads as a glossary entry, not a paragraph. */
.lesson__body .lesson__def,
.lesson__notes-body .lesson__def {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  column-gap: clamp(20px, 2.5vw, 32px);
  align-items: baseline;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
  line-height: 1.6;
}
.lesson__body .lesson__def:first-of-type,
.lesson__notes-body .lesson__def:first-of-type {
  border-top: 1px solid var(--rule);
}
.lesson__def-term {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3;
}
.lesson__def-sep { display: none; }  /* grid columns provide the separation */
.lesson__def-body {
  color: var(--ink-soft);
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Auto-listified consecutive short paragraphs — render as a simple bulleted
   list. These come from PowerPoint slides where the source was a bulleted
   list of equivalent items (e.g. "Energy comes in many forms: Chemical,
   Thermal, Mechanical..."), so numbering would imply an order that isn't
   there. A small ember dash carries the list-marker role.

   For 5+ items the JS adds .lesson__autolist--cols to flow into two
   columns, matching the typical PPT two-column bullet layout. */
.lesson__body .lesson__autolist {
  list-style: none;
  margin: 0.4em 0 1.5em;
  padding: 0;
}
.lesson__body .lesson__autolist li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.lesson__body .lesson__autolist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--ember);
}

.lesson__body .lesson__autolist--cols {
  columns: 2;
  column-gap: clamp(24px, 3vw, 48px);
}
.lesson__body .lesson__autolist--cols li {
  break-inside: avoid;
}
@media (max-width: 720px) {
  .lesson__body .lesson__autolist--cols {
    columns: 1;
  }
}

/* ---------------------------------------------------------------------------
   Typography polish — applied to all body / notes for editorial weight.
   Kerning + ligatures + optimizeLegibility deliver the "intentional" feel
   that distinguishes designed text from raw rendering.
   ---------------------------------------------------------------------------*/
.lesson__body,
.lesson__notes-body {
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Layout-specific treatments — text-only slides get the most attention since
   they're the most likely to feel "blah" without it.

   The vertical ember accent is reserved for the instructor notes panel below
   (the editorial system has one strong ember vertical mark per slide, used
   for the "Instructor Notes" panel). Body text gets its character from
   typography + structural patterns (numbered autolists, definition grids,
   label rules), not extra page furniture.

   Design moves on the body:
   • Lede — first paragraph reads as the entry point (larger, ink-color)
   • Generous reading column (62ch) — feels considered, not full-bleed
   ---------------------------------------------------------------------------*/
.lesson__content--text-only .lesson__body {
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.65;
}

.lesson__content--text-only .lesson__body > p:first-of-type {
  font-size: 1.2em;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 1.2em;
}

/* ---------------------------------------------------------------------------
   Instructor notes — visually distinct from body. Editorial card with
   ember accent. Holds the slide's speaker notes when present.
   ---------------------------------------------------------------------------*/
.lesson__notes {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper-bright);
  border-left: 3px solid var(--ember);
}
.lesson__notes[hidden] { display: none; }

.lesson__notes-head {
  margin-bottom: 16px;
}

.lesson__notes-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.lesson__notes-body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.lesson__notes-body p { margin: 0 0 1.2em; }
.lesson__notes-body p:last-child { margin-bottom: 0; }
.lesson__notes-body strong { color: var(--ink); font-weight: 600; }
.lesson__notes-body em { font-style: italic; }
.lesson__notes-body u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

.lesson__notes-body ul,
.lesson__notes-body ol {
  margin: 0 0 1.2em 1.2em;
  padding: 0;
}
.lesson__notes-body ul { list-style: none; }
.lesson__notes-body ul li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 0.4em;
}
.lesson__notes-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--ash);
}
.lesson__notes-body ol li { margin-bottom: 0.4em; padding-left: 4px; }

/* End-of-content sentinel for auto-complete IntersectionObserver. Sits in
   normal flow at the bottom of the lesson content area (after notes). */
.lesson__end-sentinel {
  height: 1px;
  width: 100%;
  margin: 0;
  pointer-events: none;
}

/* Sticky bottom bar — Mark Complete + Prev / Next */
.lesson-actions {
  position: fixed;
  bottom: 0;
  left: 320px;       /* aligns with main column when sidebar is open */
  right: 0;
  z-index: 10;
  background: var(--paper-bright);
  border-top: 1px solid var(--ink);
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.course-layout.is-collapsed .lesson-actions { left: 0; }

@media (max-width: 1024px) {
  .lesson-actions { left: 0; }
}

/* Reserve space at bottom of lesson body so content isn't hidden under the fixed bar */
.lesson { padding-bottom: 120px; }

/* Prev / Next as pentagonal "arrow tab" buttons (sideways-house shape).
   Outline + fill rendered via inline SVG so the stroke stays uniform along the slant. */
.lesson-actions__prev,
.lesson-actions__next {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 240px;
  height: 64px;
  padding: 0 30px;
  position: relative;
  transition: transform 0.16s var(--ease-quick);
  background: transparent;
}

.lesson-actions__prev {
  justify-self: flex-start;
  padding-left: 40px;
  padding-right: 22px;
}

.lesson-actions__next {
  justify-self: flex-end;
  padding-left: 22px;
  padding-right: 40px;
  text-align: right;
  justify-content: flex-end;
}

.lesson-actions__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.lesson-actions__shape path {
  fill: transparent;
  stroke: var(--ember);
  stroke-width: 2;
  transition: fill 0.25s var(--ease);
}

.lesson-actions__prev:hover .lesson-actions__shape path,
.lesson-actions__next:hover .lesson-actions__shape path {
  fill: var(--ember);
}

.lesson-actions__inner {
  position: relative;
  z-index: 1;
  display: block;
}

.lesson-actions__prev:active,
.lesson-actions__next:active { transform: scale(0.98); }

.lesson-actions__prev .label,
.lesson-actions__next .label {
  display: block;
  color: var(--ember);
  opacity: 0.7;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2px;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.lesson-actions__prev .title,
.lesson-actions__next .title {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ember);
  transition: color 0.25s var(--ease);
}

.lesson-actions__prev:hover .label,
.lesson-actions__next:hover .label { color: var(--paper-bright); opacity: 0.7; }
.lesson-actions__prev:hover .title,
.lesson-actions__next:hover .title { color: var(--paper-bright); }

/* Chevron span no longer needed — the shape is the arrow. Hide if present. */
.lesson-actions__chevron { display: none; }

/* Mark Complete — black by default, only goes ember when actually completed */
.lesson-actions__complete {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-bright);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 14px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.16s var(--ease-quick);
}

.lesson-actions__complete:hover {
  background: var(--ink-soft, #2a2622);
}

.lesson-actions__complete:active { transform: scale(0.97); }

.lesson-actions__complete[data-complete="true"] {
  background: var(--ember);
  border-color: var(--ember);
}

.lesson-actions__complete[data-complete="true"]:hover {
  background: var(--ember);
}

/* Checkmark + pulse animation for completion feedback */
.lesson-actions__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--paper-bright);
  animation: check-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes check-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.lesson-actions__complete.is-pulsing {
  animation: complete-pulse 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes complete-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(247, 3, 3, 0.25); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(247, 3, 3, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-actions__check,
  .lesson-actions__complete.is-pulsing {
    animation: none;
  }
}

/* ---------- Focus-visible: keyboard navigation rings ---------- */
.module-card:focus-visible,
.lesson-row:focus-visible,
.lesson-actions__prev:focus-visible,
.lesson-actions__next:focus-visible,
.lesson-actions__complete:focus-visible,
.lesson__back:focus-visible,
.lesson__all-link:focus-visible,
.course-frame__back:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .lesson-actions {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "complete complete"
      "prev next";
    gap: 12px;
  }
  .lesson-actions__complete { grid-area: complete; justify-content: center; }
  .lesson-actions__prev { grid-area: prev; }
  .lesson-actions__next { grid-area: next; }
}