/* ────────────────────────────────────────────────────────────
   Curriculum Preview — public-facing library + single-curriculum pages.
   Visual system mirrors storypie-web-schools (Curriculum + LessonView
   components): Storypie pink (#E91E8C) + orange (#F97316) brand pair,
   color-coded units, hand-drawn SVG icons, semantic section colors.
   Used by /curriculum-library, /curriculum-preview/:slug, and the
   landing-page partial views/partials/curated-curricula-section.ejs.
   ──────────────────────────────────────────────────────────── */

.cp-page {
  /* body is display:flex site-wide, which makes <main> a flex item that
     shrink-wraps to its content's intrinsic width until pressure from
     a wide descendant pushes it to its max-width. That made the page
     visibly narrower while everything was collapsed than when content
     was expanded. width:100% + max-width forces the page to its full
     capped width regardless of inner content state. */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  color: #0f172a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

.cp-hero { text-align: center; margin-bottom: 48px; }
.cp-eyebrow {
  display: inline-block;
  background: linear-gradient(90deg, #E91E8C 0%, #F97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.cp-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.cp-sub {
  max-width: 720px;
  margin: 0 auto;
  color: #475569;
  font-size: 1.05rem;
  line-height: 1.6;
}

.cp-empty { text-align: center; color: #64748b; }

/* ───────── Curriculum cards (grid) ───────── */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.cp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative;
}
.cp-card:hover {
  border-color: #f9a8d4;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(233, 30, 140, 0.10);
}
.cp-card-ribbon {
  background: linear-gradient(90deg, #E91E8C 0%, #F97316 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cp-card-ribbon svg {
  width: 12px;
  height: 12px;
}
.cp-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.cp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cp-card-grade {
  background: #fce7f3;
  color: #E91E8C;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.cp-card-weeks {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}
.cp-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.35;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-card-subject {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0 0 12px;
}
.cp-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
  list-style: none;
  padding-left: 0;
}
.cp-card-stats li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cp-card-stats svg {
  width: 14px;
  height: 14px;
  stroke: #64748b;
}
.cp-card-stats strong {
  color: #0f172a;
  font-weight: 700;
}

/* ───────── Detail page ───────── */
.cp-detail .cp-breadcrumb {
  font-size: 0.85rem;
  color: #64748b;
  margin-bottom: 16px;
}
.cp-detail .cp-breadcrumb a {
  color: #E91E8C;
  text-decoration: none;
  font-weight: 500;
}
.cp-detail .cp-breadcrumb a:hover { text-decoration: underline; }

.cp-detail-hero { text-align: center; margin-bottom: 40px; }
.cp-detail-hero .cp-card-grade {
  font-size: 0.85rem;
  padding: 6px 16px;
  margin-bottom: 12px;
}
.cp-detail-meta {
  margin-top: 12px;
  color: #475569;
  font-size: 0.95rem;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cp-detail-meta .cp-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-detail-meta svg {
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
}

.cp-section-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 20px;
  color: #0f172a;
}

/* ─── Schools-style page header (region/grade/year/weeks + framework pill + lesson count) ─ */
.cp-app-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 0;
}
.cp-app-header-text { flex: 1; min-width: 0; }
.cp-app-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.cp-app-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: #64748b;
}
.cp-app-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-app-meta-chip svg {
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
}
.cp-app-framework-row {
  margin-top: 4px;
}
.cp-app-framework-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fdf2f8;
  color: #E91E8C;
  border: 1px solid #fbcfe8;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.cp-app-framework-pill svg {
  width: 16px;
  height: 16px;
}
.cp-app-lesson-count {
  display: inline-block;
  padding: 6px 12px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* ─── App layout: sidebar + main panel ─── */
/* Sidebar starts narrow (just unit number chips + the word "Unit").
   Only hover of the SIDEBAR ITSELF (or keyboard focus into it) expands
   it — hovering the main panel doesn't trigger the expand. Uses
   :has() so the layout grid responds to a state inside the sidebar
   without JS. */
.cp-app-layout {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  transition: grid-template-columns 0.18s ease;
}
.cp-app-layout:has(.cp-app-sidebar:hover),
.cp-app-layout:has(.cp-app-sidebar:focus-within) {
  grid-template-columns: 340px minmax(0, 1fr);
}

/* Mobile (<=960px): drop the sidebar-rail pattern entirely. The user
   wants a totally different mobile layout — no collapse/expand, no
   hover behavior, no separate sticky sidebar. Render the sidebar
   inline above the main panel with horizontal scroll for the unit
   row. */
@media (max-width: 960px) {
  .cp-app-layout,
  .cp-app-layout:has(.cp-app-sidebar:hover),
  .cp-app-layout:has(.cp-app-sidebar:focus-within) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Sidebar panel (desktop) */
.cp-app-sidebar {
  position: sticky;
  top: 16px;
  width: 92px;
  transition: width 0.18s ease;
}
.cp-app-sidebar:hover,
.cp-app-sidebar:focus-within {
  width: 340px;
}
@media (max-width: 960px) {
  .cp-app-sidebar,
  .cp-app-sidebar:hover,
  .cp-app-sidebar:focus-within {
    position: static;
    width: 100%;
  }
}
.cp-sidebar-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
/* COLLAPSED STATE (desktop default — sidebar not hovered/focused).
   - Hide the panel-header count + per-unit titles/meta/chevrons
   - Replace the panel header text with a compact "Units" label
   - Show "Unit" mini-label under each number chip so the rail isn't
     just unlabeled numbers */
/* Sidebar h2 has two spans: short label visible when collapsed,
   long label visible when expanded. */
.cp-sidebar-h2-short { display: none; }
.cp-sidebar-h2-long { display: inline; }
/* The "Unit" mini-label visible only in collapsed desktop state. */
.cp-sidebar-unit-collapsed-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-top: 4px;
  display: none;
}

/* Collapsed-state rules apply only on DESKTOP (>=961px) — mobile uses
   a totally different (horizontal chip-row) layout that always shows
   titles regardless of hover state. */
@media (min-width: 961px) {
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-panel-header h2 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
  }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-h2-short { display: inline; }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-h2-long { display: none; }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-panel-header span,
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-unit-text-meta,
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-unit-title,
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-unit-chevron {
    display: none;
  }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-panel-header {
    padding: 12px 0;
    justify-content: center;
  }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-unit {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
    flex-direction: column;
  }
  .cp-app-sidebar:not(:hover):not(:focus-within) .cp-sidebar-unit-collapsed-label {
    display: inline-block;
  }
}

/* On mobile (no hover), always show full content + horizontal layout */
@media (max-width: 960px) {
  .cp-app-sidebar .cp-sidebar-panel-header h2 { font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: #0f172a; }
  .cp-app-sidebar .cp-sidebar-panel-header h2::before { content: ''; }
  .cp-app-sidebar .cp-sidebar-panel-header h2 .cp-sidebar-h2-long { display: inline; }
  .cp-app-sidebar .cp-sidebar-panel-header span,
  .cp-app-sidebar .cp-sidebar-unit-text,
  .cp-app-sidebar .cp-sidebar-unit-text-meta,
  .cp-app-sidebar .cp-sidebar-unit-title,
  .cp-app-sidebar .cp-sidebar-unit-chevron { display: initial; }
  .cp-app-sidebar .cp-sidebar-panel-header { padding: 14px 20px; justify-content: space-between; }
  .cp-app-sidebar .cp-sidebar-unit { padding: 12px 14px; flex-direction: row; gap: 10px; justify-content: flex-start; }
  .cp-app-sidebar .cp-sidebar-unit-collapsed-label { display: none; }
  /* On mobile the unit list becomes a horizontal scrolling rail of
     compact tiles, not a vertical list. */
  .cp-sidebar-units {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    padding: 10px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cp-app-sidebar .cp-sidebar-unit {
    flex: 0 0 auto;
    min-width: 240px;
    max-width: 280px;
    padding: 10px 12px;
    border-bottom: none;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    scroll-snap-align: start;
    align-items: flex-start;
  }
  .cp-app-sidebar .cp-sidebar-unit-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .cp-app-sidebar .cp-sidebar-unit-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    /* No truncation — full title wraps to as many lines as needed.
       Some unit titles run ~80 chars which doesn't fit on 2 lines at
       240px wide. The chip grows vertically to fit. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.3;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .cp-app-sidebar .cp-sidebar-unit-text-meta {
    font-size: 0.72rem;
    color: #94a3b8;
    white-space: nowrap;
  }
  .cp-app-sidebar .cp-sidebar-unit-chevron { display: none; }
}
.cp-sidebar-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.cp-sidebar-panel-header h2 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.cp-sidebar-panel-header span {
  font-size: 0.82rem;
  color: #94a3b8;
}
.cp-sidebar-units {
  max-height: 480px;
  overflow-y: auto;
}
@media (max-width: 960px) {
  .cp-sidebar-units { max-height: 340px; }
}
.cp-sidebar-unit {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.cp-sidebar-unit:last-child { border-bottom: none; }
.cp-sidebar-unit:hover { background: #f8fafc; }
.cp-sidebar-unit.cp-sidebar-unit-active {
  background: #fdf2f8;
  box-shadow: inset 3px 0 0 #E91E8C;
}
.cp-sidebar-unit.cp-sidebar-unit-active .cp-sidebar-unit-num {
  box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.22);
}
.cp-sidebar-unit.cp-sidebar-unit-active .cp-sidebar-unit-title { color: #be185d; }
.cp-sidebar-unit.cp-sidebar-unit-active .cp-sidebar-unit-collapsed-label { color: #E91E8C; }
.cp-sidebar-unit:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: -2px;
}
.cp-sidebar-unit-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  background: #8b5cf6; /* default; overridden by .cp-unit-color-N */
}
/* The .cp-unit-color-N classes already set .cp-unit-num-square background;
   for sidebar buttons we re-key them on .cp-sidebar-unit-num. */
.cp-sidebar-unit.cp-unit-color-0 .cp-sidebar-unit-num { background: #8b5cf6; }
.cp-sidebar-unit.cp-unit-color-1 .cp-sidebar-unit-num { background: #3b82f6; }
.cp-sidebar-unit.cp-unit-color-2 .cp-sidebar-unit-num { background: #06b6d4; }
.cp-sidebar-unit.cp-unit-color-3 .cp-sidebar-unit-num { background: #10b981; }
.cp-sidebar-unit.cp-unit-color-4 .cp-sidebar-unit-num { background: #eab308; }
.cp-sidebar-unit.cp-unit-color-5 .cp-sidebar-unit-num { background: #f97316; }
.cp-sidebar-unit.cp-unit-color-6 .cp-sidebar-unit-num { background: #ec4899; }
.cp-sidebar-unit.cp-unit-color-7 .cp-sidebar-unit-num { background: #ef4444; }
.cp-sidebar-unit-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-sidebar-unit-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-sidebar-unit-meta {
  font-size: 0.75rem;
  color: #94a3b8;
}
.cp-sidebar-unit-chevron {
  width: 16px;
  height: 16px;
  stroke: #cbd5e1;
  flex-shrink: 0;
}
.cp-sidebar-unit.cp-sidebar-unit-active .cp-sidebar-unit-chevron {
  stroke: #E91E8C;
}

/* Main panel — each .cp-unit-view is hidden except the active one */
.cp-app-main {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.cp-unit-view {
  display: block;
}
.cp-unit-view[hidden] {
  display: none;
}
.cp-unit-view-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 4px solid #8b5cf6; /* default; overridden per color */
}
.cp-unit-view.cp-unit-color-0 .cp-unit-view-header { border-bottom-color: #8b5cf6; }
.cp-unit-view.cp-unit-color-1 .cp-unit-view-header { border-bottom-color: #3b82f6; }
.cp-unit-view.cp-unit-color-2 .cp-unit-view-header { border-bottom-color: #06b6d4; }
.cp-unit-view.cp-unit-color-3 .cp-unit-view-header { border-bottom-color: #10b981; }
.cp-unit-view.cp-unit-color-4 .cp-unit-view-header { border-bottom-color: #eab308; }
.cp-unit-view.cp-unit-color-5 .cp-unit-view-header { border-bottom-color: #f97316; }
.cp-unit-view.cp-unit-color-6 .cp-unit-view-header { border-bottom-color: #ec4899; }
.cp-unit-view.cp-unit-color-7 .cp-unit-view-header { border-bottom-color: #ef4444; }
.cp-unit-view-headline { flex: 1; min-width: 0; }
.cp-unit-view-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin: 0 0 4px;
}
.cp-unit-view-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.cp-unit-view-weeks {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: #f1f5f9;
  color: #0f172a;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  flex-shrink: 0;
}
.cp-unit-view-weeks-label {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}
.cp-unit-view-weeks-value {
  font-weight: 700;
}
.cp-unit-view-body {
  padding: 22px 26px 26px;
}

/* Sections inside the unit view */
.cp-unit-section + .cp-unit-section { margin-top: 24px; }
.cp-unit-section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.cp-unit-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 14px;
}
.cp-unit-section-row .cp-unit-section-title { margin: 0; }
.cp-unit-section-title svg {
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
}
.cp-unit-section-count {
  font-size: 0.78rem;
  color: #94a3b8;
}

.cp-unit-questions {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 0.92rem;
  line-height: 1.6;
}
.cp-unit-questions li { margin-bottom: 4px; }

.cp-unit-standards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cp-unit-standard-pill {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  padding: 5px 12px;
  background: #fdf2f8;
  color: #E91E8C;
  border: 1px solid #fbcfe8;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Lesson rows inside a unit view — match schools-app sidebar style */
.cp-unit-lessons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.cp-unit-lesson-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: background 0.12s, border-color 0.12s;
}
.cp-unit-lesson-row:hover {
  /* Subtle slate hover only — pink-on-hover for the whole lesson card
     felt too loud for content the user is actively reading. */
  background: #f1f5f9;
  border-color: #cbd5e1;
}
/* Open lessons keep a neutral background — no pink wash while reading. */
.cp-unit-lesson-row:has(details[open]),
.cp-unit-lesson-row:has(details[open]):hover {
  background: #fff;
  border-color: #e2e8f0;
}
.cp-unit-lesson-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.cp-unit-lesson-summary::-webkit-details-marker { display: none; }
.cp-unit-lesson-summary::marker { content: ''; }
.cp-unit-lesson-summary:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: -2px;
}
.cp-unit-lesson-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fdf2f8;
  color: #E91E8C;
  font-weight: 700;
  font-size: 0.82rem;
}
.cp-unit-lesson-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-unit-lesson-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-unit-lesson-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.4;
}
.cp-unit-lesson-topic {
  font-size: 0.78rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-unit-lesson-chevron {
  width: 16px;
  height: 16px;
  stroke: #cbd5e1;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.cp-unit-lesson-row details[open] > summary .cp-unit-lesson-chevron {
  transform: rotate(90deg);
  stroke: #E91E8C;
}
.cp-unit-lesson-row details[open] > summary .cp-unit-lesson-num {
  background: #E91E8C;
  color: #fff;
}
/* Outline-only lessons get an amber square instead of pink */
.cp-unit-lesson-row .cp-status-pill {
  padding: 2px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Locked lesson row (gated CTA) */
.cp-unit-lesson-locked .cp-unit-lesson-summary {
  background: linear-gradient(135deg, rgba(233, 30, 140, 0.10) 0%, rgba(249, 115, 22, 0.08) 100%);
}
.cp-unit-lesson-locked .cp-unit-lesson-num {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
  color: #fff;
}
.cp-unit-lesson-locked .cp-unit-lesson-title { color: #be185d; }

.cp-no-lessons {
  text-align: center;
  color: #94a3b8;
  font-size: 0.88rem;
  padding: 24px 0;
  margin: 0;
}

/* ─── Disclosure chevron pattern (shared by collapsible units + lessons) ─ */
.cp-disclosure-chevron {
  width: 20px;
  height: 20px;
  stroke: #64748b;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
details[open] > summary > .cp-disclosure-chevron {
  transform: rotate(180deg);
}
/* Hide the native disclosure marker — replaced by .cp-disclosure-chevron. */
.cp-unit-details > summary,
.cp-lesson-details > summary {
  list-style: none;
  cursor: pointer;
}
.cp-unit-details > summary::-webkit-details-marker,
.cp-lesson-details > summary::-webkit-details-marker {
  display: none;
}
.cp-unit-details > summary::marker,
.cp-lesson-details > summary::marker {
  content: '';
}
.cp-unit-details > summary:focus-visible,
.cp-lesson-details > summary:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: -2px;
  border-radius: 8px;
}

/* ───────── Units list (color-coded per UNIT_COLORS in schools app) ───────── */
.cp-units-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Grid with a minmax(0, 1fr) column: the canonical "let the child
     shrink to the container instead of growing to its intrinsic
     content" pattern. Block / flex-column both let inner tab strips
     (with white-space:nowrap on tabs) push the unit outward — grid
     with min:0 enforces the container width strictly. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.cp-unit {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  /* Left accent bar — color set via .cp-unit-color-N modifier classes
     below so we don't depend on runtime color-mix() support. */
  border-left: 4px solid #8b5cf6;
  /* min-width:0 lets the unit shrink to fit the parent — without it, a
     wide-content child (tab strip, lesson card) would refuse to shrink
     and push the unit past its container width. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cp-unit-header {
  padding: 18px 24px 14px;
  background: #f5f3ff;
  border-bottom: 1px solid #ddd6fe;
  display: flex;
  align-items: center;
  gap: 16px;
}
.cp-unit-header-inner {
  flex: 1;
  min-width: 0;
}
/* Bottom border only renders when the unit is open — collapsed units
   look like a flat row, not a header on top of an empty box. */
.cp-unit-details:not([open]) > summary.cp-unit-header {
  border-bottom: 1px solid transparent;
}
.cp-unit-details > summary.cp-unit-header:hover {
  filter: brightness(0.98);
}

/* Per-unit color rotation — mirrors storypie-web-schools UNIT_COLORS.
   Each modifier sets: left accent bar, header background tint, header
   border, the numbered square chip color, the lesson chip color, and the
   unit-number label color in a single rule block. */
.cp-unit-color-0 { border-left-color: #8b5cf6; }
.cp-unit-color-0 .cp-unit-header { background: #f5f3ff; border-bottom-color: #ddd6fe; }
.cp-unit-color-0 .cp-unit-num,
.cp-unit-color-0 .cp-section-label-pink { color: #7c3aed; }
.cp-unit-color-0 .cp-unit-num-square,
.cp-unit-color-0 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #8b5cf6; }

.cp-unit-color-1 { border-left-color: #3b82f6; }
.cp-unit-color-1 .cp-unit-header { background: #eff6ff; border-bottom-color: #bfdbfe; }
.cp-unit-color-1 .cp-unit-num { color: #1d4ed8; }
.cp-unit-color-1 .cp-unit-num-square,
.cp-unit-color-1 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #3b82f6; }

.cp-unit-color-2 { border-left-color: #06b6d4; }
.cp-unit-color-2 .cp-unit-header { background: #ecfeff; border-bottom-color: #a5f3fc; }
.cp-unit-color-2 .cp-unit-num { color: #0891b2; }
.cp-unit-color-2 .cp-unit-num-square,
.cp-unit-color-2 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #06b6d4; }

.cp-unit-color-3 { border-left-color: #10b981; }
.cp-unit-color-3 .cp-unit-header { background: #ecfdf5; border-bottom-color: #a7f3d0; }
.cp-unit-color-3 .cp-unit-num { color: #047857; }
.cp-unit-color-3 .cp-unit-num-square,
.cp-unit-color-3 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #10b981; }

.cp-unit-color-4 { border-left-color: #eab308; }
.cp-unit-color-4 .cp-unit-header { background: #fefce8; border-bottom-color: #fde68a; }
.cp-unit-color-4 .cp-unit-num { color: #a16207; }
.cp-unit-color-4 .cp-unit-num-square,
.cp-unit-color-4 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #eab308; }

.cp-unit-color-5 { border-left-color: #f97316; }
.cp-unit-color-5 .cp-unit-header { background: #fff7ed; border-bottom-color: #fed7aa; }
.cp-unit-color-5 .cp-unit-num { color: #c2410c; }
.cp-unit-color-5 .cp-unit-num-square,
.cp-unit-color-5 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #f97316; }

.cp-unit-color-6 { border-left-color: #ec4899; }
.cp-unit-color-6 .cp-unit-header { background: #fdf2f8; border-bottom-color: #fbcfe8; }
.cp-unit-color-6 .cp-unit-num { color: #be185d; }
.cp-unit-color-6 .cp-unit-num-square,
.cp-unit-color-6 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #ec4899; }

.cp-unit-color-7 { border-left-color: #ef4444; }
.cp-unit-color-7 .cp-unit-header { background: #fef2f2; border-bottom-color: #fecaca; }
.cp-unit-color-7 .cp-unit-num { color: #b91c1c; }
.cp-unit-color-7 .cp-unit-num-square,
.cp-unit-color-7 .cp-lesson:not(.cp-lesson-locked) .cp-lesson-num { background: #ef4444; }
.cp-unit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-unit-num {
  font-weight: 700;
  color: #7c3aed; /* overridden by .cp-unit-color-N */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cp-unit-num-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #8b5cf6; /* overridden by .cp-unit-color-N */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
}
.cp-unit-weeks { font-weight: 500; }
.cp-unit-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.35;
}

.cp-unit-body { padding: 14px 24px 22px; }

.cp-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 16px 0 8px;
}
.cp-section-label svg {
  width: 14px;
  height: 14px;
}
.cp-section-label-emerald { color: #059669; }
.cp-section-label-emerald svg { stroke: #10b981; }
.cp-section-label-cyan { color: #0891b2; }
.cp-section-label-cyan svg { stroke: #06b6d4; }
.cp-section-label-amber { color: #b45309; }
.cp-section-label-amber svg { stroke: #f59e0b; }
.cp-section-label-pink { color: #E91E8C; }
.cp-section-label-pink svg { stroke: #E91E8C; }

.cp-unit-questions {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.93rem;
  color: #334155;
  line-height: 1.55;
}
.cp-unit-questions li { margin-bottom: 4px; }
.cp-unit-standards {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: #64748b;
}
.cp-unit-standards .cp-standard-pill {
  display: inline-block;
  background: #ecfeff;
  color: #0891b2;
  border: 1px solid #a5f3fc;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
}

/* ───────── Lesson list (under each unit) ───────── */
.cp-lesson-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  /* Same minmax(0,1fr) grid trick as .cp-units-list — the tab strip
     inside each lesson card otherwise pushes the lesson card past
     its container's content area when expanded. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.cp-lesson {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  transition: background 0.12s, border-color 0.12s;
}
.cp-lesson:hover {
  background: #fdf2f8;
  border-color: #f9a8d4;
}
.cp-lesson-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #8b5cf6; /* overridden by .cp-unit-color-N */
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.cp-lesson-body { flex: 1; min-width: 0; }
.cp-lesson-title {
  margin: 0 0 4px;
  font-size: 0.93rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.cp-lesson-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cp-lesson-meta svg {
  width: 12px;
  height: 12px;
  stroke: #94a3b8;
}
.cp-lesson-meta .cp-status-pill {
  display: inline-block;
  padding: 1px 6px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-lesson-objectives {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
}
.cp-lesson-objectives li { margin-bottom: 2px; }

.cp-status-pill-full {
  background: #d1fae5 !important;
  color: #047857 !important;
}

/* Lesson detail blocks (full lesson plan view inside each lesson card) */
.cp-lesson-rich {
  background: #fff;
}
.cp-lesson-detail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #f1f5f9;
}
.cp-lesson-detail:first-of-type {
  border-top: none;
  padding-top: 0;
}
.cp-lesson-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0 0 6px;
}

/* Five-phase lesson structure pills */
.cp-lesson-phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cp-phase {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.cp-phase-name { color: #0f172a; }
.cp-phase-minutes { color: #64748b; font-weight: 500; font-size: 0.72rem; }
.cp-phase.cp-phase-warm_up { background: #fff7ed; border-color: #fed7aa; }
.cp-phase.cp-phase-warm_up .cp-phase-name { color: #c2410c; }
.cp-phase.cp-phase-direct_instruction { background: #eff6ff; border-color: #bfdbfe; }
.cp-phase.cp-phase-direct_instruction .cp-phase-name { color: #1d4ed8; }
.cp-phase.cp-phase-guided_practice { background: #ecfdf5; border-color: #a7f3d0; }
.cp-phase.cp-phase-guided_practice .cp-phase-name { color: #047857; }
.cp-phase.cp-phase-independent_practice { background: #faf5ff; border-color: #ddd6fe; }
.cp-phase.cp-phase-independent_practice .cp-phase-name { color: #7c3aed; }
.cp-phase.cp-phase-closure { background: #ecfeff; border-color: #a5f3fc; }
.cp-phase.cp-phase-closure .cp-phase-name { color: #0891b2; }

/* Lesson-level standards list */
.cp-lesson-standards {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.5;
}
.cp-lesson-standards li { margin-bottom: 4px; }
.cp-standard-code {
  display: inline-block;
  background: #ecfeff;
  color: #0891b2;
  border: 1px solid #a5f3fc;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  margin-right: 6px;
}

/* Vocabulary pills */
.cp-lesson-vocab {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cp-vocab-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.cp-lesson-exit {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #475569;
  font-style: italic;
  line-height: 1.5;
}

/* ── Lesson classroom-setup meta row ──────────────────────── */
.cp-lesson-classroom-setup {
  margin: 6px 0 8px;
  font-size: 0.78rem;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cp-lesson-region-pill {
  display: inline-block;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Rich objectives w/ success criteria + bloom ──────────── */
.cp-objectives-rich {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-objectives-rich > li {
  padding-left: 14px;
  border-left: 3px solid #a7f3d0;
}
.cp-objective-statement {
  margin: 0 0 4px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #064e3b;
  line-height: 1.5;
}
.cp-bloom-pill {
  display: inline-block;
  background: #d1fae5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
.cp-success-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 6px 0 4px;
}
.cp-success-criteria {
  margin: 0 0 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.5;
}
.cp-success-criteria li { margin-bottom: 2px; }

/* ── Materials list ───────────────────────────────────────── */
.cp-materials-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.55;
}
.cp-materials-list li {
  padding: 4px 0;
  border-bottom: 1px dashed #fef3c7;
}
.cp-materials-list li:last-child { border-bottom: none; }
.cp-materials-list strong { color: #92400e; font-weight: 700; }
.cp-material-notes {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  font-style: italic;
}

/* ── Phase blocks (full teacher + student actions per phase) ─ */
.cp-phase-blocks {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-phase-block {
  padding: 14px 16px;
  border-radius: 10px;
  background: #f8fafc;
  border-left: 4px solid #94a3b8;
}
.cp-phase-block-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-phase-block-min {
  display: inline-block;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: auto;
}
.cp-phase-block-warm_up { background: #fff7ed; border-left-color: #f97316; }
.cp-phase-block-direct_instruction { background: #eff6ff; border-left-color: #3b82f6; }
.cp-phase-block-guided_practice { background: #ecfdf5; border-left-color: #10b981; }
.cp-phase-block-independent_practice { background: #faf5ff; border-left-color: #8b5cf6; }
.cp-phase-block-closure { background: #ecfeff; border-left-color: #06b6d4; }
.cp-phase-sub {
  margin: 4px 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.5;
}
.cp-phase-sub strong {
  color: #0f172a;
  font-weight: 700;
}
.cp-phase-script {
  margin: 6px 0 0;
  font-size: 0.84rem;
}
.cp-phase-script summary {
  cursor: pointer;
  color: #4f46e5;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cp-phase-script summary:hover { color: #312e81; }
.cp-phase-script[open] summary { margin-bottom: 6px; }
.cp-phase-script p {
  margin: 6px 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  line-height: 1.6;
  font-style: italic;
}

/* ── Differentiation — stacked rows (one row per track, not cards) ─ */
.cp-diff-grid {
  display: block;
  margin: 0;
  padding: 0;
}
.cp-diff-track {
  padding: 12px 0;
  border: none;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9;
}
.cp-diff-track:last-child { border-bottom: none; }
.cp-diff-track-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
}
.cp-diff-track ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.55;
}
.cp-diff-track li { margin-bottom: 3px; }
.cp-diff-ell_supports .cp-diff-track-label { color: #047857; }
.cp-diff-struggling_learners .cp-diff-track-label { color: #92400e; }
.cp-diff-iep_504_accommodations .cp-diff-track-label { color: #1d4ed8; }
.cp-diff-advanced_learners_extensions .cp-diff-track-label { color: #7c3aed; }

/* ── Vocabulary — stacked rows (term + definition per row, no cards) ─ */
.cp-vocab-list {
  margin: 0;
  padding: 0;
  display: block;
}
.cp-vocab-list dt {
  font-size: 0.9rem;
  font-weight: 700;
  color: #b45309;
  margin: 10px 0 2px;
}
.cp-vocab-list dt:first-child { margin-top: 0; }
.cp-vocab-list dd {
  margin: 0 0 2px;
  font-size: 0.83rem;
  color: #475569;
  line-height: 1.5;
}

/* ─── Tabbed lesson card (mirrors schools-app LessonView tabs) ─── */
.cp-lesson-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  list-style: none;
  margin-bottom: 12px;
  /* Same width-stability fix as .cp-unit — without min-width:0 the
     expanded tab strip refuses to shrink and the card grows past its
     parent (unit body's content area). */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* Inner block-level wrappers also need min-width:0 so their flex
   children can shrink. */
.cp-lesson-details,
.cp-tab-panels,
.cp-tabs {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Every text-heavy element wrapping AI-generated lesson copy needs to
   word-break aggressively. Long URLs, long teacher scripts, and long
   activity descriptions otherwise refuse to wrap and push the parent
   wider than its container. */
.cp-lesson-card,
.cp-lesson-card *,
.cp-tab-panel,
.cp-tab-panel * {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The lesson list + lesson cards are flex column items. Flex items
   default to min-width:auto which honors intrinsic content width and
   prevents shrinking below it — so wide tab strips push the cards out
   past the parent. Force them to shrink to the container. */
.cp-lesson-list {
  min-width: 0;
  width: 100%;
}
.cp-lesson-list > li {
  min-width: 0;
  max-width: 100%;
}

/* Same for the units list. */
.cp-units-list {
  min-width: 0;
  width: 100%;
}
.cp-units-list > li {
  min-width: 0;
  max-width: 100%;
}

/* Unit body is the containing block for the lesson list. Constrain it
   too so its flex grandchildren can't grow past its content area. */
.cp-unit-body {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* The tab strip itself is the most likely overflow culprit — display:
   flex + nowrap means tabs would push out the lesson card if they
   exceed the available width. Pin the tab strip to its container so
   overflow-x:auto can scroll instead. */
.cp-tabs {
  width: 100%;
  flex-shrink: 1;
}
.cp-lesson-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
}
/* When the lesson is collapsed, the header has no body below it — drop
   the bottom border so it doesn't look like a hanging line. */
.cp-lesson-details:not([open]) > summary.cp-lesson-card-header {
  border-bottom-color: transparent;
}
.cp-lesson-details > summary.cp-lesson-card-header:hover {
  background: #fdfdff;
}
.cp-lesson-card-header > .cp-disclosure-chevron {
  margin-top: 6px;
}
.cp-lesson-num-lg {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cp-lesson-card-headline { flex: 1; min-width: 0; }
.cp-lesson-title-lg {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

/* Tab strip — pink active, slate inactive, matches schools LessonView */
.cp-tabs {
  display: flex;
  gap: 4px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cp-tabs::-webkit-scrollbar { height: 4px; }
.cp-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.cp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  transition: color 0.12s, background 0.12s;
  margin-bottom: -1px;
}
.cp-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
.cp-tab:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.cp-tab.cp-tab-active {
  background: #E91E8C;
  color: #fff;
}
.cp-tab.cp-tab-active:hover {
  background: #D1177A;
}
.cp-tab:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: 2px;
}

/* Tab panels */
.cp-tab-panels { padding: 20px 22px 22px; }
.cp-tab-panel { animation: cp-tab-fade 0.18s ease; }
.cp-tab-panel-hidden { display: none; }
@keyframes cp-tab-fade {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-tab-panel > .cp-lesson-detail-label:first-child { margin-top: 0; }

/* ─── Resources tab list ──────────────────────────────────── */
.cp-resources-hint {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.55;
}
/* Resources list — each item is a full-width ROW, not a grid card. */
.cp-resources-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-resources-list:last-child { margin-bottom: 0; }
.cp-resource { margin: 0; }
.cp-resource-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.cp-resource-link:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.cp-resource-link:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: 2px;
}
.cp-resource-type-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
  white-space: nowrap;
}
.cp-resource-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-resource-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}
.cp-resource-desc {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cp-resource-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: #94a3b8;
}
.cp-resource-link:hover .cp-resource-icon {
  stroke: #475569;
}

/* Mobile / narrow viewport: stack the resource row vertically. At
   sub-600px widths the pill + body + icon horizontal layout squeezes
   the body column so hard that overflow-wrap:anywhere starts breaking
   the title one character per line. Stacking gives each part its own
   row and the title wraps naturally. */
@media (max-width: 600px) {
  .cp-resource-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    position: relative;
  }
  .cp-resource-icon {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .cp-resource-body {
    width: 100%;
    padding-right: 24px; /* leave room for the absolutely positioned icon */
  }
  .cp-resource-title {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Type-specific pill tints. */
.cp-resource-worksheet .cp-resource-type-pill,
.cp-resource-ai_worksheet .cp-resource-type-pill { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.cp-resource-entity_content .cp-resource-type-pill { background: #ecfeff; color: #0891b2; border-color: #a5f3fc; }
.cp-resource-exit_ticket .cp-resource-type-pill { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.cp-resource-graphic_organizer .cp-resource-type-pill,
.cp-resource-vocabulary_cards .cp-resource-type-pill,
.cp-resource-flashcards .cp-resource-type-pill { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
.cp-resource-assessment_rubric .cp-resource-type-pill,
.cp-resource-discussion_guide .cp-resource-type-pill { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* ── Teacher notes collapsible ────────────────────────────── */
.cp-teacher-notes {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.cp-teacher-notes summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.cp-teacher-notes[open] summary { margin-bottom: 8px; }
.cp-teacher-notes .cp-success-label:first-of-type { margin-top: 0; }

.cp-lesson-locked {
  background-color: #fdf2f8;
  background-image: linear-gradient(135deg, rgba(233, 30, 140, 0.18) 0%, rgba(249, 115, 22, 0.14) 100%);
  border: 1px dashed #f9a8d4;
  list-style: none;
  padding: 0;
}
.cp-lesson-locked:hover {
  background-color: #fce7f3;
  background-image: linear-gradient(135deg, rgba(233, 30, 140, 0.26) 0%, rgba(249, 115, 22, 0.22) 100%);
  border-color: #E91E8C;
}
.cp-lesson-locked .cp-lesson-num {
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
}
.cp-lesson-locked .cp-lesson-title { color: #E91E8C; }

/* The locked row is now a real button so click opens the signup wall.
   Reset native button styling so it inherits the parent's row layout. */
.cp-lesson-locked-trigger {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}
.cp-lesson-locked-trigger:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: -2px;
}

.cp-unit-locked-note {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  /* Flat solid tint + gradient overlay — flat tint guarantees visibility
     even if the browser drops the gradient (older WebKit, prefers-reduced).*/
  background-color: #fdf2f8;
  background-image: linear-gradient(135deg, rgba(233, 30, 140, 0.18) 0%, rgba(249, 115, 22, 0.14) 100%);
  border: 1px dashed #f9a8d4;
  font-size: 0.88rem;
  color: #be185d;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Now rendered as a <button> for click-to-signup. Reset the native
     button visuals so it still reads as a banner row. */
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.cp-unit-locked-note:hover {
  background-color: #fce7f3;
  background-image: linear-gradient(135deg, rgba(233, 30, 140, 0.26) 0%, rgba(249, 115, 22, 0.22) 100%);
  border-color: #E91E8C;
}
.cp-unit-locked-note:focus-visible {
  outline: 2px solid #E91E8C;
  outline-offset: 2px;
}
.cp-unit-locked-note svg {
  width: 16px;
  height: 16px;
  stroke: #E91E8C;
  flex-shrink: 0;
}

/* ───────── Bottom CTA banner ───────── */
.cp-cta-banner {
  margin-top: 56px;
  background: linear-gradient(135deg, #E91E8C 0%, #F97316 100%);
  color: #fff;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
}
.cp-cta-banner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff;
}
.cp-cta-banner p {
  max-width: 600px;
  margin: 0 auto 20px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
}
.cp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.cp-btn-primary {
  background: #fff;
  color: #E91E8C;
}
.cp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.cp-btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.cp-btn-secondary:hover { background: rgba(255, 255, 255, 0.25); }
.cp-btn-solid {
  background: #E91E8C;
  color: #fff;
}
.cp-btn-solid:hover {
  background: #D1177A;
  box-shadow: 0 6px 16px rgba(233, 30, 140, 0.30);
  transform: translateY(-1px);
}
.cp-btn-ghost {
  background: #fff;
  color: #E91E8C;
  border: 1.5px solid #fbcfe8;
}
.cp-btn-ghost:hover {
  background: #fdf2f8;
  border-color: #E91E8C;
}

/* ───────── Landing-page embed ───────── */
.cp-landing-section {
  padding: 64px 0 64px;
  background: linear-gradient(180deg, #fff 0%, #fef9fc 100%);
  border-top: 1px solid #fce7f3;
  border-bottom: 1px solid #fce7f3;
}
.cp-landing-section .cp-grid {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 24px;
}

/* Horizontal scroller variant — replaces the grid on landing pages so
   users can flick through all 8 curated curricula without the section
   eating a giant vertical chunk of the page. */
.cp-scroller-wrap {
  margin: 32px auto 0;
  max-width: 1200px;
  position: relative;
}
.cp-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  padding: 8px 24px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #fbcfe8 #fdf2f8;
}
.cp-scroller::-webkit-scrollbar { height: 8px; }
.cp-scroller::-webkit-scrollbar-track { background: #fdf2f8; border-radius: 4px; }
.cp-scroller::-webkit-scrollbar-thumb { background: #fbcfe8; border-radius: 4px; }
.cp-scroller::-webkit-scrollbar-thumb:hover { background: #f9a8d4; }
.cp-scroller .cp-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}
@media (min-width: 720px) {
  .cp-scroller .cp-card { flex-basis: 300px; }
}
.cp-scroller-hint {
  text-align: center;
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 8px 24px 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-scroller-hint svg {
  width: 14px;
  height: 14px;
  vertical-align: -3px;
  margin: 0 2px;
  stroke: #cbd5e1;
}
/* Fade right edge to suggest more content offscreen. */
.cp-scroller-wrap::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 24px;
  width: 40px;
  background: linear-gradient(90deg, rgba(254, 249, 252, 0) 0%, rgba(254, 249, 252, 1) 100%);
  pointer-events: none;
}
.cp-landing-header {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.cp-landing-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.cp-landing-header p {
  color: #475569;
  margin: 0;
  line-height: 1.6;
}
.cp-landing-footer {
  text-align: center;
  margin-top: 24px;
}

/* ───────── "Create your own" panel ───────── */
.cp-create-panel {
  max-width: 1100px;
  margin: 56px auto 0;
  background: #fff;
  border: 1px solid #fce7f3;
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 4px 24px rgba(233, 30, 140, 0.06);
  position: relative;
  overflow: hidden;
}
.cp-create-panel-lead {
  margin-top: 0;
  padding: 48px 36px 40px;
  background: linear-gradient(180deg, #fff 0%, #fefcfd 100%);
}
.cp-create-panel-lead .cp-create-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

/* Split layout: copy on the left, product screenshot on the right.
   Stacks (image-on-top) below 880px so it reads cleanly on phones. */
.cp-create-panel-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 40px 32px;
}
@media (min-width: 880px) {
  .cp-create-panel-split {
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    padding: 48px 44px;
  }
}
.cp-create-panel-split .cp-create-content {
  text-align: left;
  max-width: none;
  margin: 0;
  order: 2;
}
@media (min-width: 880px) {
  .cp-create-panel-split .cp-create-content { order: 1; }
}
.cp-create-panel-split .cp-eyebrow,
.cp-create-panel-split .cp-create-title,
.cp-create-panel-split .cp-create-sub,
.cp-create-panel-split .cp-create-frameworks-label {
  text-align: left;
}
.cp-create-panel-split .cp-create-cta-row {
  justify-content: flex-start;
}
.cp-create-panel-split .cp-frameworks {
  justify-content: flex-start;
}
.cp-create-image {
  order: 1;
  display: flex;
  justify-content: center;
}
@media (min-width: 880px) {
  .cp-create-image { order: 2; }
}
.cp-create-image img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 14px;
  border: 1px solid #fce7f3;
  box-shadow: 0 12px 32px rgba(233, 30, 140, 0.10);
}
.cp-create-frameworks-label {
  margin: 6px 0 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
}
.cp-eyebrow-pink {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #E91E8C;
}

/* Section intro (header above the create panel) */
.cp-section-intro {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 0 24px;
}
.cp-section-h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  margin: 8px 0 12px;
  color: #0f172a;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.cp-section-sub {
  color: #475569;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* "Sample output" header that introduces the cards below the create panel */
.cp-samples-header {
  max-width: 720px;
  margin: 56px auto 16px;
  text-align: center;
  padding: 0 24px;
}
.cp-samples-header .cp-eyebrow {
  font-size: 0.72rem;
}
.cp-samples-title {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 800;
  margin: 6px 0 8px;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.cp-samples-sub {
  color: #475569;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.55;
}
.cp-samples-footer {
  text-align: center;
  margin-top: 8px;
  padding: 0 24px 8px;
}
.cp-create-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #E91E8C 0%, #F97316 100%);
}
.cp-create-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.cp-create-title {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 800;
  margin: 8px 0 12px;
  color: #0f172a;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cp-create-sub {
  color: #475569;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 24px;
}
.cp-frameworks {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cp-framework-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cp-framework-badge svg {
  width: 12px;
  height: 12px;
  stroke: #E91E8C;
}
.cp-framework-more {
  background: transparent;
  color: #64748b;
  border-color: #cbd5e1;
  border-style: dashed;
  font-weight: 500;
}
.cp-framework-more svg { display: none; }
.cp-create-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}