/* ============================================================
   Curriculum (Lessons tab) — SEED-styled.
   Hero "next lesson" card + collapsible week sections + per-lesson
   rows with thumbnail/status/title/duration. Scoped to
   #page-curriculum so the rest of the classroom is unaffected.
   ============================================================ */

#page-curriculum {
  font-family: var(--seed-font-sans);
  letter-spacing: -0.01em;
}

/* === Hero — next lesson the student should do ============================
   Brand-blue solid card with a white "Continue learning" CTA. The hero
   of the page. */
.curriculum-hero {
  background: var(--seed-bg-brand-solid);
  border-radius: var(--seed-radius-6);
  padding: var(--seed-space-6) var(--seed-space-6) var(--seed-space-6);
  margin-bottom: var(--seed-space-4);
  color: var(--seed-fg-brand-contrast);
  display: flex;
  flex-direction: column;
  gap: var(--seed-space-2);
}
.curriculum-hero-meta {
  font-size: var(--seed-label-s-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* "White-on-brand muted" — no SEED token; rgba on contrast color. */
  color: rgba(255,255,255,0.75);
}
.curriculum-hero-title {
  font-size: var(--seed-title-1-size);
  line-height: var(--seed-title-1-leading);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.curriculum-hero-sub {
  font-size: var(--seed-label-m-size);
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  margin-bottom: var(--seed-space-3);
}
.curriculum-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--seed-space-2);
  align-self: flex-start;
  height: 48px;                                /* SEED Medium */
  padding: 0 var(--seed-space-5);
  border: none;
  border-radius: var(--seed-radius-4);
  background: var(--seed-bg-layer-default);
  color: var(--seed-bg-brand-solid);
  font-family: var(--seed-font-sans);
  font-size: var(--seed-label-m-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard),
              transform var(--seed-duration-short) var(--seed-easing-standard);
  margin-top: var(--seed-space-1);
}
.curriculum-hero-cta:hover  { background: var(--seed-bg-layer-basement); }
.curriculum-hero-cta:active { transform: scale(0.98); }

/* "All caught up" variant: lighter card, brand-blue CTA inverted. */
.curriculum-hero.is-caught-up {
  background: var(--seed-bg-layer-basement);
  color: var(--seed-fg-neutral);
}
.curriculum-hero.is-caught-up .curriculum-hero-meta { color: var(--seed-fg-neutral-subtle); }
.curriculum-hero.is-caught-up .curriculum-hero-sub  { color: var(--seed-fg-neutral-muted); }
.curriculum-hero.is-caught-up .curriculum-hero-cta {
  background: var(--seed-bg-brand-solid);
  color: var(--seed-fg-brand-contrast);
}
.curriculum-hero.is-caught-up .curriculum-hero-cta:hover { background: var(--seed-bg-brand-solid-pressed); }

/* === Week section — collapsed by default; .is-expanded shows lessons === */
.curriculum-week {
  margin-bottom: var(--seed-space-2);
  border: 1px solid var(--seed-stroke-neutral-muted);
  border-radius: var(--seed-radius-5);
  background: var(--seed-bg-layer-default);
  overflow: hidden;
  scroll-margin-top: var(--seed-space-4);
}
.curriculum-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-space-3);
  width: 100%;
  padding: var(--seed-space-4) var(--seed-space-5);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--seed-font-sans);
  text-align: left;
  transition: background var(--seed-duration-short) var(--seed-easing-standard);
}
.curriculum-week-header:hover { background: var(--seed-bg-layer-basement); }
.curriculum-week-title {
  display: flex;
  align-items: center;
  gap: var(--seed-space-2);
  font-size: var(--seed-body-m-size);
  font-weight: 700;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.01em;
}
.curriculum-week-current {
  font-size: var(--seed-caption-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--seed-bg-brand-solid);
  background: var(--blue-soft);
  padding: var(--seed-space-1) var(--seed-space-2);
  border-radius: var(--seed-radius-full);
}

/* Right-side status indicator: progress ring SVG when active, or
   "Locked" label when the entire week is gated. */
.curriculum-week-indicator {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.curriculum-ring { width: 24px; height: 24px; }
.curriculum-week-locked {
  font-size: var(--seed-label-s-size);
  font-weight: 600;
  color: var(--seed-fg-neutral-subtlest);
  letter-spacing: -0.01em;
}
.curriculum-week-chevron {
  width: 16px;
  height: 16px;
  color: var(--seed-fg-neutral-subtlest);
  flex-shrink: 0;
  transition: transform var(--seed-duration-medium) var(--seed-easing-standard);
}
.curriculum-week.is-expanded .curriculum-week-chevron { transform: rotate(180deg); }

.curriculum-week-lessons {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--seed-space-3) var(--seed-space-3);
}
.curriculum-week.is-expanded .curriculum-week-lessons { display: flex; }

/* === Per-lesson row inside a week section === */
.curriculum-lesson {
  display: flex;
  align-items: center;
  gap: var(--seed-space-3);
  padding: var(--seed-space-3);
  background: transparent;
  border-radius: var(--seed-radius-4);
  border: none;
  cursor: pointer;
  transition: background var(--seed-duration-short) var(--seed-easing-standard);
}
.curriculum-lesson:hover { background: var(--seed-bg-layer-basement); }
.curriculum-lesson.completed { background: transparent; }
.curriculum-lesson.locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.curriculum-lesson.locked:hover { background: transparent; }

.curriculum-lesson .lesson-countdown {
  font-size: var(--seed-label-s-size);
  color: var(--seed-fg-neutral-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.lesson-thumbnail {
  width: 80px;
  height: 45px;
  border-radius: var(--seed-radius-3);
  object-fit: cover;
  flex-shrink: 0;
}
.curriculum-lesson.locked .lesson-thumbnail { filter: grayscale(100%); }

/* Status circle next to title — matches the per-week progress ring
   size for visual rhythm between parent (week) and child (lesson). */
.lesson-status {
  width: 24px;
  height: 24px;
  border-radius: var(--seed-radius-full);
  border: 2px solid var(--seed-stroke-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lesson-status svg { width: 14px; height: 14px; }
.curriculum-lesson.completed .lesson-status {
  background: var(--seed-bg-positive-solid);
  border-color: var(--seed-bg-positive-solid);
  color: var(--seed-fg-brand-contrast);
}

.lesson-info { flex: 1; }

.curriculum-lesson .lesson-day {
  font-size: var(--seed-label-s-size);
  color: var(--seed-fg-neutral-muted);
  margin-bottom: 2px;
}
.curriculum-lesson .lesson-title {
  font-size: var(--seed-body-m-size);
  line-height: var(--seed-body-m-leading);
  font-weight: 400;
  color: var(--seed-fg-neutral);
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.curriculum-lesson .lesson-duration {
  font-size: var(--seed-label-s-size);
  color: var(--seed-fg-neutral-muted);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .curriculum-lesson {
    gap: var(--seed-space-2);
    padding: var(--seed-space-3);
  }
  .curriculum-lesson .lesson-thumbnail { width: 56px; height: 32px; }
  .curriculum-lesson .lesson-title { font-size: var(--seed-label-m-size); }
  .curriculum-lesson .lesson-day { font-size: var(--seed-caption-size); }
  .curriculum-lesson .lesson-duration { font-size: var(--seed-caption-size); }
}