/* ── Teacher training LMS styles ──────────────────────────────────────── */

:root {
  --c-teal: #3D8B84;
  --c-teal-dark: #2D6B65;
  --c-teal-light: #E8F4F3;
  --c-amber: #C8842A;
  --c-rust: #B85C38;
  --c-ink: #2A2522;
  --c-body: #3d3229;
  --c-faint: #8a8178;
  --c-sand: #E4D9C8;
  --c-cream: #FBF7F0;
  --c-paper: #FFFFFF;
}

.crs-page {
  background: var(--c-cream);
  min-height: 100vh;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  color: var(--c-ink);
  padding-bottom: 80px;
}

/* Inline SVG icon baseline - inherits currentColor, sizes via width/height. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon path, .icon line, .icon polyline, .icon polygon,
.icon rect, .icon circle {
  vector-effect: non-scaling-stroke;
}
.inline-icon {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
  color: currentColor;
}

/* ── Nav (reused across course pages) ── */
.crs-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-sand);
}
.crs-nav-right { display: flex; gap: 16px; align-items: center; }

.crs-container { max-width: 980px; margin: 0 auto; padding: 0 24px; }

/* ── Page header ── */
.crs-header {
  padding: 48px 0 24px;
  text-align: center;
}
.crs-header h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.crs-header p {
  color: var(--c-body);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto;
}
.crs-anon-note {
  margin: 14px auto 0 !important;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.92rem !important;
  color: var(--c-body) !important;
  max-width: 580px !important;
}

/* ── Breadcrumb ── */
.crs-crumbs {
  font-size: 0.85rem;
  color: var(--c-faint);
  padding: 24px 0 0;
}
.crs-crumbs a {
  color: var(--c-teal);
  text-decoration: none;
}
.crs-crumbs a:hover { text-decoration: underline; }

/* ── Course cards (index) ── */
.crs-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 720px) {
  .crs-card-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.crs-card {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 12px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s, transform 0.12s;
}
.crs-card:hover {
  border-color: var(--c-teal);
  transform: translateY(-1px);
}
.crs-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
  line-height: 1.25;
}
.crs-card-desc {
  color: var(--c-body);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
.crs-card-meta {
  font-size: 0.85rem;
  color: var(--c-faint);
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.crs-card-status {
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  font-weight: 600;
}
.crs-card-status--not-started { background: #F0EAE0; color: var(--c-body); }
.crs-card-status--in-progress { background: #FEF3E6; color: var(--c-amber); }
.crs-card-status--completed   { background: var(--c-teal-light); color: var(--c-teal-dark); }
.crs-card-status--locked      { background: #F0EAE0; color: var(--c-faint); }
.crs-card-action {
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--c-teal);
  color: var(--c-paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-block;
  transition: background 0.15s;
}
.crs-card-action:hover { background: var(--c-teal-dark); }
.crs-card-action--ghost {
  background: transparent;
  color: var(--c-teal);
  border: 1.5px solid var(--c-teal);
}
.crs-card-action--ghost:hover { background: var(--c-teal-light); }
.crs-card-action[aria-disabled="true"] {
  background: #E4D9C8; color: var(--c-faint); pointer-events: none;
}

/* ── Final screening gate ─────────────────────────────────────────── */
.crs-gate {
  max-width: 720px;
  margin: 40px auto;
  padding: 48px;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(42, 36, 24, .04);
}
.crs-gate-kicker {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.crs-gate-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.2;
  margin: 12px 0 16px;
}
.crs-gate-lede {
  color: var(--c-body);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 14px;
}
.crs-gate-consent {
  margin-top: 28px;
  padding: 22px;
  background: var(--c-cream);
  border-radius: 12px;
}
.crs-gate-consent h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--c-ink);
}
.crs-gate-consent p { margin: 0 0 8px; color: var(--c-body); }
.crs-gate-consent ul { margin: 8px 0 16px 20px; padding: 0; }
.crs-gate-consent ul li { margin-bottom: 4px; color: var(--c-body); }
.crs-gate-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
  font-size: .96rem;
  color: var(--c-body);
}
.crs-gate-check input { margin-top: 3px; }
.crs-gate-cta { margin-top: 18px; }
.crs-gate-cta:disabled {
  background: var(--c-sand) !important;
  color: var(--c-faint) !important;
  cursor: not-allowed;
}

/* ── Course overview (module list) ── */
.crs-overview-head {
  padding: 32px 0 16px;
}
.crs-overview-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.crs-overview-intro-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--c-sand);
  border-radius: 999px;
  background: var(--c-paper);
  color: var(--c-teal-dark);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.crs-overview-intro-link:hover {
  background: var(--c-cream);
  border-color: var(--c-teal);
}

/* ════════════════════════════════════════════════════════════════════
   Lock-in welcome (first-visit course onboarding)
   ════════════════════════════════════════════════════════════════════ */
.crs-welcome {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 24px;
}
.crs-welcome-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(61,139,132,.22), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(245,200,130,.18), transparent 60%),
    linear-gradient(180deg, #FBF7F0 0%, #F3EDE1 100%);
}
.crs-welcome-shell {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: auto;
  padding: 28px 40px 40px;
  background: var(--c-paper);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(42, 36, 24, .15);
  border: 1px solid var(--c-sand);
  display: flex;
  flex-direction: column;
  min-height: min(680px, calc(100vh - 64px));
}
.crs-welcome-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.crs-welcome-logo img {
  height: 26px;
  width: auto;
  display: block;
}
.crs-welcome-skip {
  color: var(--c-faint);
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s;
}
.crs-welcome-skip:hover {
  background: var(--c-cream);
  color: var(--c-body);
}

.crs-welcome-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 28px;
}
.crs-welcome-dots .dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-sand);
  cursor: pointer;
  transition: background .2s, width .2s;
}
.crs-welcome-dots .dot:hover { background: var(--c-teal-light); }
.crs-welcome-dots .dot.is-current {
  background: var(--c-teal);
  width: 22px;
  border-radius: 999px;
}

.crs-welcome-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: crs-welcome-fade .28s ease-out both;
}
.crs-welcome-step[hidden] { display: none; }

@keyframes crs-welcome-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crs-welcome-kicker {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.crs-welcome-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 4px 0 0;
  outline: none;
}
.crs-welcome-hero {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--c-teal-dark);
  line-height: 1.4;
  margin: 8px 0 0;
}
.crs-welcome-lede {
  color: var(--c-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 4px 0 0;
}

/* Step 1 - character card */
.crs-welcome-character {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 14px;
}
.crs-welcome-character-avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}
.crs-welcome-character-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.crs-welcome-character-text strong {
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 600;
}
.crs-welcome-character-text span {
  color: var(--c-body);
  font-size: .92rem;
  line-height: 1.5;
}

/* Step 2 - 2×2 format grid */
.crs-welcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.crs-welcome-cell {
  padding: 18px 18px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crs-welcome-cell-emoji {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--c-teal-light);
  color: var(--c-teal);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.crs-welcome-cell strong {
  color: var(--c-ink);
  font-size: .98rem;
  font-weight: 600;
}
.crs-welcome-cell span {
  color: var(--c-faint);
  font-size: .85rem;
  line-height: 1.4;
}

/* Step 3 - module chain visualisation */
.crs-welcome-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 20px 0 12px;
}
.crs-welcome-chain .node {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1rem;
  flex: 0 0 auto;
}
.crs-welcome-chain .node.is-open {
  background: var(--c-teal);
  color: var(--c-paper);
  box-shadow: 0 0 0 4px rgba(61,139,132,.18);
}
.crs-welcome-chain .node.is-locked {
  background: #E9DFC8;
  color: var(--c-faint);
  font-size: .9rem;
}
.crs-welcome-chain .link {
  flex: 1 1 auto;
  height: 2px;
  max-width: 60px;
  background: var(--c-sand);
}
.crs-welcome-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crs-welcome-bullets li {
  color: var(--c-body);
  font-size: .98rem;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bullet-icon {
  color: var(--c-teal);
  flex-shrink: 0;
  margin-top: 3px;
}
.crs-welcome-chain .node.is-locked .icon { color: var(--c-faint); }

/* Step 4 - certificate + tips */
.crs-welcome-cert {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #FDF5E0 0%, #FBF1D1 100%);
  border: 1px solid #E7D5A1;
  border-radius: 14px;
  margin-top: 8px;
}
.crs-welcome-cert-emoji {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: #EDD8A0;
  color: #8A6A1E;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.crs-welcome-cert-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.crs-welcome-cert-text strong {
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 600;
}
.crs-welcome-cert-text span {
  color: var(--c-body);
  font-size: .9rem;
}
.crs-welcome-tips {
  margin-top: 14px;
  padding: 16px 20px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 12px;
}
.crs-welcome-tips h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.crs-welcome-tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.crs-welcome-tips li {
  color: var(--c-body);
  font-size: .9rem;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: center;
}
.crs-welcome-tips kbd {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: .75rem;
  font-family: Menlo, Consolas, monospace;
  color: var(--c-ink);
}
.crs-welcome-tips .kbd-pair { display: inline-flex; gap: 4px; }
.crs-welcome-tips .kbd-pair kbd,
.crs-welcome-tips .kbd kbd { min-width: 28px; text-align: center; }

/* Actions row (Back / Continue or Begin) */
.crs-welcome-actions {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.crs-welcome-actions > :first-child:last-child { margin-left: auto; }
.crs-welcome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.crs-welcome-btn:active { transform: translateY(1px); }
.crs-welcome-btn--primary {
  background: var(--c-teal);
  color: var(--c-paper);
}
.crs-welcome-btn--primary:hover { background: var(--c-teal-dark); }
.crs-welcome-btn--ghost {
  background: transparent;
  color: var(--c-teal-dark);
  border-color: var(--c-sand);
}
.crs-welcome-btn--ghost:hover {
  background: var(--c-cream);
  border-color: var(--c-teal);
}
.crs-welcome-btn--begin {
  /* The final CTA: make it feel momentous. */
  padding: 14px 26px;
  font-size: 1rem;
  flex: 1 1 auto;
  justify-content: center;
}

@media (max-width: 640px) {
  .crs-welcome { padding: 16px; }
  .crs-welcome-shell { padding: 20px 20px 28px; min-height: calc(100vh - 32px); }
  .crs-welcome-title { font-size: 1.6rem; }
  .crs-welcome-hero { font-size: 1.05rem; }
  .crs-welcome-grid { grid-template-columns: 1fr; }
  .crs-welcome-chain .node { width: 34px; height: 34px; font-size: .85rem; }
  .crs-welcome-chain .link { max-width: 24px; }
  .crs-welcome-actions { flex-direction: column-reverse; align-items: stretch; }
  .crs-welcome-btn { width: 100%; }
}
.crs-progress-line {
  font-size: 0.95rem;
  color: var(--c-faint);
  margin-top: 6px;
}
.crs-module-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}
.crs-module-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 20px 22px;
  transition: border-color 0.12s;
}
.crs-module-row:hover { border-color: var(--c-teal); }
.crs-module-row--locked {
  opacity: 0.55;
  background: #F7F3EB;
}
.crs-module-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  font-size: 1.05rem;
}
.crs-module-row--passed .crs-module-num {
  background: var(--c-teal);
  color: var(--c-paper);
}
.crs-module-row--locked .crs-module-num {
  background: #E4D9C8;
  color: var(--c-faint);
}
.crs-module-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 4px;
}
.crs-module-summary {
  color: var(--c-faint);
  font-size: 0.9rem;
  margin: 0;
}
.crs-module-cta {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.crs-module-cta--primary { background: var(--c-teal); color: var(--c-paper); }
.crs-module-cta--primary:hover { background: var(--c-teal-dark); }
.crs-module-cta--ghost { background: var(--c-teal-light); color: var(--c-teal-dark); }
.crs-module-cta--locked { background: #E4D9C8; color: var(--c-faint); cursor: not-allowed; }

/* ── Module content page ── */
.crs-module-page h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--c-ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.crs-module-lede {
  color: var(--c-body);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 28px;
}
.crs-audio-wrap {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 24px;
}
.crs-audio-wrap audio { width: 100%; }
.crs-audio-placeholder {
  color: var(--c-faint);
  font-size: 0.9rem;
  font-style: italic;
}
.crs-content-body {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 32px 36px;
  color: var(--c-body);
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 24px;
}
.crs-content-body p + p { margin-top: 1em; }
.crs-actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.crs-btn {
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
.crs-btn--primary {
  background: var(--c-teal);
  color: var(--c-paper);
  border: none; cursor: pointer;
  font-family: inherit; font-size: 1rem;
}
.crs-btn--primary:hover { background: var(--c-teal-dark); }
.crs-btn--ghost {
  background: transparent;
  color: var(--c-teal);
  border: 1.5px solid var(--c-teal);
}
.crs-btn--ghost:hover { background: var(--c-teal-light); }

/* ── Quiz ── */
.crs-quiz-intro {
  background: var(--c-teal-light);
  border-left: 3px solid var(--c-teal);
  padding: 14px 20px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 28px;
  color: var(--c-teal-dark);
  font-size: 0.95rem;
}
.crs-quiz-question {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 24px 26px;
  margin-bottom: 18px;
}
.crs-quiz-question-text {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 14px;
  color: var(--c-ink);
}
.crs-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crs-quiz-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--c-cream);
  border: 1.5px solid var(--c-sand);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.crs-quiz-option:hover { border-color: var(--c-teal); background: var(--c-paper); }
.crs-quiz-option input { margin-top: 4px; }
.crs-quiz-option-label { font-weight: 600; color: var(--c-teal-dark); margin-right: 4px; }
.crs-quiz-submit {
  display: flex; justify-content: flex-end; margin-top: 20px;
  gap: 12px;
}

/* Pre/post course knowledge-check call-out card on the course overview. */
.crs-pretest-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: flex-start;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-left: 4px solid var(--c-teal);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 0 24px;
}
.crs-pretest-card--done {
  border-left-color: var(--c-teal-dark);
  background: var(--c-teal-light);
}
.crs-pretest-card-icon {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-teal-dark);
  flex-shrink: 0;
}
.crs-pretest-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 6px;
  color: var(--c-ink);
}
.crs-pretest-card-lede {
  margin: 0 0 12px;
  color: var(--c-body);
  line-height: 1.5;
  max-width: 64ch;
}
.crs-pretest-card-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Pretest / posttest variants - same shell as quiz, plus a header
   block, an in-question section tag, and a results comparison strip. */
.crs-quiz-kicker {
  font-size: .8rem;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--c-teal);
  font-weight: 700;
  margin: 0 0 6px;
}
.crs-quiz-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.8rem;
  margin: 0 0 10px;
  color: var(--c-ink);
}
.crs-quiz-pct {
  color: var(--c-teal-dark);
  font-size: 1.4rem;
  font-weight: 500;
  margin-left: 6px;
}
.crs-quiz-lede {
  color: var(--c-body);
  max-width: 64ch;
  line-height: 1.55;
  margin: 0 0 8px;
}
.crs-quiz-meta {
  font-size: .9rem;
  color: var(--c-faint);
  margin: 0 0 24px;
}
.crs-quiz-section-tag {
  display: inline-block;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  color: var(--c-teal-dark);
  font-size: .7rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 2px;
}
.crs-test-form fieldset.crs-quiz-question {
  border: 1px solid var(--c-sand);
}
.crs-test-form legend.crs-quiz-question-text {
  padding: 0;
}

/* Pre/post results: hero block + per-question review */
.crs-test-results-hero {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 24px 0 32px;
}
.crs-improvement {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  align-items: center;
  gap: 16px;
  margin: 18px 0 8px;
}
.crs-improvement-cell {
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
}
.crs-improvement-cell--delta {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
}
.crs-improvement-label {
  display: block;
  font-size: .75rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-faint);
  margin-bottom: 6px;
}
.crs-improvement-value {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--c-ink);
}
.crs-improvement-cell--delta .crs-improvement-value--delta {
  color: var(--c-teal-dark);
}
.crs-improvement-pct {
  display: block;
  font-size: .85rem;
  color: var(--c-faint);
  margin-top: 2px;
}
.crs-improvement-arrow {
  font-size: 1.6rem;
  color: var(--c-faint);
}
@media (max-width: 700px) {
  .crs-improvement {
    grid-template-columns: 1fr 1fr;
  }
  .crs-improvement-arrow { display: none; }
  .crs-improvement-cell--delta { grid-column: 1 / -1; }
}

.crs-test-section-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin: 28px 0 14px;
  color: var(--c-ink);
}
.crs-test-review {
  list-style: none;
  padding: 0;
  margin: 0;
}
.crs-test-review-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-left: 4px solid var(--c-sand);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.crs-test-review-item.is-correct { border-left-color: var(--c-teal); }
.crs-test-review-item.is-wrong   { border-left-color: var(--c-rust); }
.crs-test-review-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-cream);
  margin-top: 2px;
}
.is-correct .crs-test-review-mark { background: var(--c-teal-light); color: var(--c-teal-dark); }
.is-wrong   .crs-test-review-mark { background: #FCE6E0; color: var(--c-rust); }
.crs-test-review-q {
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--c-ink);
}
.crs-test-review-options {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  font-size: .92rem;
  color: var(--c-body);
}
.crs-test-review-options li {
  padding: 4px 0;
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.crs-test-review-options li.is-correct-option { color: var(--c-teal-dark); font-weight: 500; }
.crs-test-review-options li.is-user-wrong { color: var(--c-rust); }
.crs-test-review-options li.is-user-right { color: var(--c-teal-dark); font-weight: 600; }
.crs-test-review-letter { font-weight: 600; color: var(--c-faint); }
.crs-test-review-tag {
  font-size: .7rem; letter-spacing: .5px; text-transform: uppercase;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
}
.crs-test-review-tag--wrong {
  background: #FCE6E0; color: var(--c-rust);
}
.crs-test-review-explain {
  background: var(--c-cream);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .9rem;
  color: var(--c-body);
  margin: 6px 0 0;
}

/* ── Quiz result ── */
.crs-result-hero {
  text-align: center;
  padding: 40px 24px;
  border-radius: 12px;
  margin-bottom: 32px;
}
.crs-result-hero--pass { background: var(--c-teal-light); color: var(--c-teal-dark); }
.crs-result-hero--fail { background: #FEF3E6; color: var(--c-amber); }
.crs-result-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.crs-result-msg {
  font-size: 1.1rem;
  margin: 0 0 16px;
}
.crs-result-q {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-left: 4px solid var(--c-sand);
  border-radius: 8px;
  padding: 18px 22px;
  margin-bottom: 12px;
}
.crs-result-q--correct { border-left-color: var(--c-teal); }
.crs-result-q--wrong   { border-left-color: var(--c-rust); }
.crs-result-q-text { font-weight: 600; margin: 0 0 8px; }
.crs-result-q-answer { font-size: 0.92rem; color: var(--c-body); }
.crs-result-q-answer .crs-correct  { color: var(--c-teal-dark); font-weight: 600; }
.crs-result-q-answer .crs-wrong { color: var(--c-rust); font-weight: 600; }
.crs-result-expl {
  margin-top: 10px; padding: 10px 14px;
  background: var(--c-cream); border-radius: 6px;
  font-size: 0.9rem; color: var(--c-body);
}

/* ── Certificate ── */
/* On-screen the cert is sized like an A4 landscape page (sqrt(2):1)
   so what the user sees previews what the printed/downloaded PDF
   will look like. Print rules below override sizing for the actual
   physical page. */
.crs-certificate {
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 6px;
  padding: 36px 56px 32px;
  width: min(100%, 1100px);
  aspect-ratio: 297 / 210;
  margin: 32px auto;
  text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--c-ink);
  box-shadow: 0 16px 48px rgba(61,139,132,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 740px) {
  /* On narrow screens the landscape ratio gets ugly. Drop the aspect
     lock and let it grow vertically; print still uses landscape. */
  .crs-certificate {
    aspect-ratio: auto;
    padding: 36px 28px;
  }
}
.crs-cert-logo { margin-bottom: 18px; }
.crs-cert-logo img { height: 40px; }
/* Co-branded header: Ibara + Stress Clinic Uganda, centred, side by side. */
.crs-cert-logos {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.crs-cert-logo-ibara { height: 36px; width: auto; }
.crs-cert-logo-partner { height: 40px; width: auto; }
.crs-cert-logo-sep {
  width: 1px;
  height: 30px;
  background: var(--c-sand);
}
/* Module list inside the certificate (everything the learner covered).
   On screen and in print this is laid out as a 2-column grid so the
   landscape page is filled efficiently. */
.crs-cert-modules {
  list-style: none;
  padding: 0;
  margin: 8px auto 8px;
  max-width: 760px;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
}
.crs-cert-modules li {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 10px;
  align-items: baseline;
  padding: 6px 12px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 6px;
}
/* If the course only has one module, don't leave a blank cell. */
.crs-cert-modules li:only-child { grid-column: 1 / -1; }
/* Five-module courses look most balanced with the last item spanning
   both columns rather than dangling. */
.crs-cert-modules li:nth-child(5):last-child { grid-column: 1 / -1; }
.crs-cert-module-check {
  color: var(--c-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 2px;
}
.crs-cert-module-num {
  color: var(--c-teal-dark);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.crs-cert-module-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  color: var(--c-ink);
  font-weight: 500;
  line-height: 1.35;
}
@media print {
  .crs-cert-modules li {
    background: transparent;
    border-color: #ccc;
  }
}

.crs-cert-partnership {
  font-size: .85rem;
  color: var(--c-faint);
  margin: 10px auto 4px;
  max-width: 600px;
  line-height: 1.4;
}
.crs-cert-screening {
  font-size: .82rem;
  color: var(--c-teal-dark);
  background: var(--c-teal-light);
  padding: 6px 14px;
  border-radius: 6px;
  margin: 4px auto;
  max-width: 560px;
  line-height: 1.4;
}
.crs-cert-title {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  color: var(--c-teal-dark);
}
.crs-cert-intro, .crs-cert-middle, .crs-cert-outro {
  font-size: .95rem;
  color: var(--c-faint);
  margin: 4px 0;
  letter-spacing: 0.3px;
}
.crs-cert-name {
  font-size: 2rem;
  font-weight: 500;
  margin: 8px 0 4px;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-sand);
  padding-bottom: 8px;
  display: inline-block;
  min-width: 50%;
}
.crs-cert-course {
  font-size: 1.4rem;
  margin: 8px 0 4px;
  color: var(--c-teal-dark);
  font-style: italic;
}
.crs-cert-footer {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--c-faint);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0.4px;
}
.crs-cert-verify {
  font-family: Menlo, Consolas, monospace;
  font-size: 0.75rem;
  margin-top: 6px;
  color: var(--c-faint);
}
.crs-cert-actions {
  margin: 32px 0 40px; text-align: center;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* Print certificate: aggressive single-page layout.

   We do two things:
   - kill every bit of chrome + container sizing that could push a
     second blank page (min-height, padding-bottom, lang modal,
     scripts, action buttons).
   - tighten every internal margin / font so the cert fits A4 portrait
     if the browser ignores the landscape @page hint, and fits A4
     landscape with breathing room if it honours it. */
@media print {
  /* Try both explicit dimensions and `size: A4 landscape` - different
     browsers/print-to-PDF pipelines accept one or the other. */
  @page { size: 297mm 210mm; margin: 8mm; }
  @page :first { size: A4 landscape; }

  /* Nuke everything outside the certificate card. Hides the language
     modal wrapper, any flash banner, the page nav/crumbs, and the
     action buttons below the card. */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    height: auto !important;
  }
  body > *:not(.crs-page) { display: none !important; }
  .crs-nav,
  .crs-cert-actions,
  .crs-crumbs,
  .crs-flash { display: none !important; }
  .crs-page {
    background: #fff !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .crs-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .crs-certificate {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    max-width: none !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Compact the vertical rhythm so it fits one page in either orientation. */
  .crs-cert-logos { margin-bottom: 10px; gap: 16px; }
  .crs-cert-logo-ibara  { height: 32px; }
  .crs-cert-logo-partner { height: 36px; }
  .crs-cert-logo-sep { height: 24px; }
  .crs-cert-title { font-size: 1.5rem; margin: 0 0 10px; }
  .crs-cert-intro, .crs-cert-middle, .crs-cert-outro {
    margin: 2px 0; font-size: .9rem;
  }
  .crs-cert-name {
    font-size: 1.8rem; margin: 4px 0 2px;
    padding-bottom: 4px; min-width: 50%;
  }
  .crs-cert-course { font-size: 1.2rem; margin: 2px 0 4px; }
  .crs-cert-modules {
    max-width: 620px; gap: 3px; margin: 6px auto 4px;
  }
  .crs-cert-modules li {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid #d8d0be;
  }
  .crs-cert-module-num { font-size: .7rem; }
  .crs-cert-module-title { font-size: .88rem; line-height: 1.2; }
  .crs-cert-partnership {
    font-size: .75rem; margin: 4px auto 2px; max-width: 620px;
  }
  .crs-cert-screening {
    font-size: .75rem; padding: 4px 10px;
    margin: 2px auto; max-width: 560px;
    background: transparent; border: 1px solid var(--c-teal);
  }
  .crs-cert-footer { margin-top: 8px; font-size: .7rem; }
  .crs-cert-verify { font-size: .65rem; margin-top: 1px; }
}

/* ── Flash messages ── */
.crs-flash {
  padding: 12px 18px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 0.95rem;
}
.crs-flash--info    { background: var(--c-teal-light); color: var(--c-teal-dark); }
.crs-flash--warning { background: #FEF3E6; color: var(--c-amber); }

/* ── Course banner on landing ─────────────────────────────────────────
   The landing nav is position:fixed at 64px tall, so anything placed at
   the top of document flow is hidden behind it. Clear the nav with an
   80px top margin and nudge the hero's own padding-top down via a body
   class the template sets when the banner is present. */
.landing-course-banner {
  background: var(--c-teal-light);
  border-left: 3px solid var(--c-teal);
  padding: 14px 22px;
  margin: calc(64px + 20px) auto 20px;
  max-width: 900px;
  border-radius: 0 8px 8px 0;
  font-size: 0.95rem;
  color: var(--c-teal-dark);
}
.landing-course-banner a {
  color: var(--c-teal-dark);
  font-weight: 600;
  text-decoration: underline;
}
/* When the banner is present the hero doesn't need its own nav-clear
   padding - the banner has already done the clearing. */
body:has(.landing-course-banner) .hero {
  padding-top: var(--sp-lg);
}
@media (max-width: 640px) {
  .landing-course-banner { margin-top: calc(64px + 12px); padding: 12px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════
   Slide-based module viewer (phase 1)
   ══════════════════════════════════════════════════════════════════════ */

.slides-page {
  background: var(--c-cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* ── Top bar ── */
.slides-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-sand);
}
/* Exit button (left of topbar). Visually matches the footer Back/Next
   ghost buttons so they feel like siblings. The topbar is a grid with a
   1fr left column, so we pin the button to its content width with
   justify-self rather than letting it stretch across the whole cell. */
.slides-exit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: max-content;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1.5px solid var(--c-sand);
  border-radius: 10px;
  color: var(--c-teal-dark);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.slides-exit-btn:hover {
  background: var(--c-cream);
  border-color: var(--c-teal);
}
.slides-exit-btn:active { transform: translateY(1px); }
.slides-exit-btn .icon { color: inherit; width: 16px; height: 16px; }
@media (max-width: 640px) {
  .slides-exit-btn span:not(.icon) { display: none; }
  .slides-exit-btn { padding: 9px 12px; }
}
.slides-breadcrumb {
  color: var(--c-faint);
  font-size: .85rem;
  text-align: center;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.slides-topbar-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.slides-icon-btn {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 999px;
  color: var(--c-body);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  font-family: inherit;
  line-height: 1.2;
}
.slides-icon-btn:hover {
  background: var(--c-paper);
  border-color: var(--c-teal);
  color: var(--c-teal-dark);
}
.slides-icon-btn.is-playing {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
  color: var(--c-teal-dark);
}
.slides-icon-btn i { width: 15px; height: 15px; }
.slides-icon-btn--handout {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
  color: var(--c-teal-dark);
}
.slides-icon-btn--handout:hover {
  background: var(--c-teal);
  color: var(--c-paper);
  border-color: var(--c-teal);
}
/* Pulse the handout button until the teacher has downloaded it once. */
.slides-icon-btn--urgent {
  background: var(--c-teal);
  color: var(--c-paper);
  border-color: var(--c-teal);
  animation: slides-handout-pulse 2s ease-out infinite;
}
.slides-icon-btn--urgent:hover { background: var(--c-teal-dark); }
@keyframes slides-handout-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 139, 132, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(61, 139, 132, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 139, 132, 0); }
}
.slides-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}

/* Handout gate: explicit callout strip under the topbar. Flips from an
   amber "please download" state to a teal "unlocked" state once the
   handout POST lands.  */
.slides-handout-gate {
  background: #FFF4DB;
  border-bottom: 1px solid #F0D98F;
  transition: background .3s, border-color .3s;
}
.slides-handout-gate.is-done {
  background: var(--c-teal-light);
  border-bottom-color: #B9DAD6;
}
.slides-handout-gate.is-flashing {
  animation: slides-handout-flash .9s ease-out;
}
@keyframes slides-handout-flash {
  0%   { background: #FFE098; }
  100% { background: #FFF4DB; }
}
.slides-handout-gate-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 28px;
  max-width: 1120px;
  margin: 0 auto;
}
.slides-handout-gate-icon {
  flex-shrink: 0;
  color: #8A6A1E;
}
.slides-handout-gate.is-done .slides-handout-gate-icon { color: var(--c-teal-dark); }
.slides-handout-gate-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.slides-handout-gate-title {
  color: var(--c-ink);
  font-size: .95rem;
  font-weight: 600;
}
.slides-handout-gate-sub {
  color: var(--c-body);
  font-size: .82rem;
  line-height: 1.4;
}
/* Swap the two title strings based on the done state. */
.slides-handout-gate [data-hg-done] { display: none; }
.slides-handout-gate.is-done [data-hg-done] { display: inline; }
.slides-handout-gate.is-done [data-hg-not-done] { display: none; }
.slides-handout-gate-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--c-teal);
  color: var(--c-paper);
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.slides-handout-gate-btn:hover { background: var(--c-teal-dark); }
.slides-handout-gate.is-done .slides-handout-gate-btn {
  background: transparent;
  color: var(--c-teal-dark);
  border: 1px solid var(--c-teal);
}
.slides-handout-gate.is-done .slides-handout-gate-btn:hover {
  background: var(--c-teal-light);
}
@media (max-width: 640px) {
  .slides-handout-gate-inner { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .slides-handout-gate-btn { align-self: stretch; justify-content: center; }
}

/* ── Audio player bar (slides beneath top bar when Audio is toggled) ── */
.slides-audiobar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-sand);
}
.slides-audiobar[hidden] { display: none; }
.slides-audiobar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-sand);
  background: var(--c-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  transition: background .12s, border-color .12s;
}
.slides-audiobar-btn:hover {
  background: var(--c-teal-light);
  border-color: var(--c-teal);
}
.slides-audiobar-icon { line-height: 0; display: inline-flex; color: var(--c-teal-dark); }
/* [hidden] beats our `display: inline-flex` rule; without this the
   play and pause glyphs are both visible at once. */
.slides-audiobar-icon[hidden] { display: none; }
.slides-audiobar-btn:hover .slides-audiobar-icon { color: var(--c-teal-dark); }
.slides-audiobar-time {
  font-size: .8rem;
  color: var(--c-faint);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: center;
}
.slides-audiobar-seek {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--c-sand);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.slides-audiobar-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-teal);
  border: 2px solid var(--c-paper);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.slides-audiobar-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-teal);
  border: 2px solid var(--c-paper);
  cursor: pointer;
}
.slides-audiobar-close {
  background: transparent;
  border: none;
  color: var(--c-faint);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.slides-audiobar-close:hover { color: var(--c-ink); }
@media (max-width: 640px) {
  .slides-audiobar { padding: 8px 14px; gap: 8px; }
  .slides-audiobar-time { min-width: 32px; font-size: .75rem; }
}

/* ── Slide stage ── */
.slides-stage {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 48px 24px;
  min-height: 60vh;
}
.slide {
  width: 100%;
  max-width: 820px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide[hidden] { display: none; }
.slide-inner {
  width: 100%;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 16px;
  padding: 56px 56px;
  box-shadow: 0 2px 12px rgba(61,139,132,0.04);
}
@media (max-width: 640px) {
  .slide-inner { padding: 36px 24px; }
  .slides-topbar { padding: 12px 16px; }
  .slides-stage { padding: 24px 12px; }
  .slides-icon-btn-label { display: none; }
}

/* ── Intro slide ── */
.s-intro-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--c-ink);
}
.s-intro-sub {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-faint);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.s-intro-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-intro-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1.05rem;
  color: var(--c-body);
  line-height: 1.5;
}
.s-intro-check {
  color: var(--c-teal);
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}
.s-intro-time {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
}
.s-intro-time i { width: 15px; height: 15px; }

/* ── Vignette slide ── */
.s-vignette {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-vignette-avatar {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--c-teal);
  color: var(--c-paper);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  letter-spacing: .5px;
}
.s-vignette-who { margin-bottom: 20px; }
.s-vignette-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-ink);
}
.s-vignette-subtitle {
  font-size: .88rem;
  color: var(--c-faint);
  margin-top: 2px;
}
.s-vignette-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-teal-dark);
  margin: 8px 0 16px;
}
.s-vignette-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-body);
  max-width: 620px;
}

/* ── Big idea slide ── */
.s-bigidea {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.s-bigidea-icon {
  width: 72px; height: 72px;
  border-radius: 16px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  display: grid; place-items: center;
}
.s-bigidea-icon .icon { width: 36px; height: 36px; }
.s-bigidea-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0;
  max-width: 640px;
}
.s-bigidea-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--c-body);
  max-width: 620px;
  margin: 0;
}

/* ── Mythbuster slide ── */
.s-myth-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 28px;
  text-align: center;
}
.s-myth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .s-myth-grid { grid-template-columns: 1fr 1fr; }
}
.s-myth-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 20px;
  background: #FEF3E6;
  border: 1px solid #E8D7BE;
  border-radius: 10px;
  color: var(--c-body);
}
.s-myth-x {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-rust);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
}
.s-myth-text {
  font-size: 1rem;
  line-height: 1.5;
}

/* ── Stat slide ── */
.s-stat {
  text-align: center;
}
.s-stat-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-faint);
  margin: 0 0 16px;
}
.s-stat-big {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 5.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-teal-dark);
  margin-bottom: 10px;
  letter-spacing: -2px;
}
.s-stat-label {
  font-size: 1.15rem;
  color: var(--c-body);
  margin-bottom: 24px;
}
.s-stat-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-width: 320px;
  margin: 0 auto 12px;
}
.s-stat-dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--c-sand);
}
.s-stat-dot-on { background: var(--c-teal); }
.s-stat-visual-caption {
  font-size: .85rem;
  color: var(--c-faint);
  margin: 0 0 20px;
}
.s-stat-body {
  font-size: 1rem;
  color: var(--c-body);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto;
}

/* ── Checklist slide ── */
.s-checklist-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0 0 24px;
  color: var(--c-ink);
}
.s-checklist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-checklist-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
}
.s-checklist-iconwrap {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.s-checklist-iconwrap .icon { width: 18px; height: 18px; }
.s-checklist-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-body);
}

/* ── Timeline slide ── */
.s-timeline-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0 0 28px;
  color: var(--c-ink);
  text-align: center;
}
.s-timeline-stages {
  display: grid;
  gap: 18px;
}
@media (min-width: 640px) {
  .s-timeline-stages { grid-template-columns: 1fr 1fr; }
}
.s-timeline-stage {
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--c-cream);
  border-left: 4px solid var(--c-sand);
  position: relative;
}
.s-timeline-stage--ok     { border-left-color: var(--c-teal); }
.s-timeline-stage--alert  { border-left-color: var(--c-amber); background: #FEF3E6; }
.s-timeline-stage--risk   { border-left-color: var(--c-rust); background: #FBEAE5; }
.s-timeline-when {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.s-timeline-desc {
  color: var(--c-body);
  line-height: 1.5;
}

/* ── Card list slide ── */
.s-cards-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0 0 16px;
  color: var(--c-ink);
}
.s-cards-lede {
  color: var(--c-body);
  line-height: 1.6;
  margin: 0 0 24px;
}
.s-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .s-cards-grid { grid-template-columns: 1fr 1fr; }
}
.s-cards-card {
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 12px;
}
.s-cards-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--c-teal-dark);
}
.s-cards-card-body {
  color: var(--c-body);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
}

/* ── Reflection slide ── */
.s-reflect {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.s-reflect-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
}
.s-reflect-prompt {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-body);
  margin: 0;
}
.s-reflect-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: .88rem;
  color: var(--c-faint);
  font-weight: 600;
}
.s-reflect-input {
  padding: 12px 14px;
  border: 1.5px solid var(--c-sand);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--c-paper);
}
.s-reflect-input:focus {
  outline: none;
  border-color: var(--c-teal);
}
.s-reflect-status {
  font-size: .8rem;
  color: var(--c-faint);
  font-style: italic;
  min-height: 1em;
}

/* ── Quiz slide ── */
.s-quiz-meta {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--c-teal);
  margin: 0 0 8px;
}
.s-quiz-question {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 28px;
}
.s-quiz-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-quiz-opt {
  display: block;
  cursor: pointer;
}
.s-quiz-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.s-quiz-opt-inner {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: var(--c-cream);
  border: 1.5px solid var(--c-sand);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.s-quiz-opt:hover .s-quiz-opt-inner {
  border-color: var(--c-teal);
  background: var(--c-paper);
}
.s-quiz-opt input:checked + .s-quiz-opt-inner {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
}
.s-quiz-letter {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 1.5px solid var(--c-sand);
  color: var(--c-teal-dark);
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: .85rem;
}
.s-quiz-text {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-body);
}
.s-quiz-opt.is-picked-correct .s-quiz-opt-inner {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
}
.s-quiz-opt.is-picked-wrong .s-quiz-opt-inner {
  border-color: var(--c-rust);
  background: #FBEAE5;
}
.s-quiz-opt.is-right-answer .s-quiz-opt-inner {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
  outline: 2px dashed var(--c-teal);
  outline-offset: 2px;
}
.s-quiz-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.s-quiz-feedback {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--c-cream);
  border-radius: 10px;
  border-left: 3px solid var(--c-teal);
}
.s-quiz-feedback[hidden] { display: none; }
.s-quiz-verdict {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.s-quiz-verdict.is-correct { color: var(--c-teal-dark); }
.s-quiz-verdict.is-wrong   { color: var(--c-rust); }
.s-quiz-explanation {
  color: var(--c-body);
  line-height: 1.55;
  font-size: .95rem;
}

/* ── Result slide ── */
.s-result {
  text-align: center;
}
.s-result-status {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-faint);
  margin: 0 0 12px;
}
.s-result-status.is-pass { color: var(--c-teal-dark); }
.s-result-status.is-fail { color: var(--c-rust); }
.s-result-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: -2px;
  margin-bottom: 14px;
}
.s-result-score.is-pass { color: var(--c-teal-dark); }
.s-result-score.is-fail { color: var(--c-amber); }
.s-result-summary {
  color: var(--c-body);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 28px;
}
.s-result-missed {
  text-align: left;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.s-result-missed-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: 0 0 6px;
}
.s-result-missed-item {
  padding: 14px 18px;
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-left: 3px solid var(--c-rust);
  border-radius: 8px;
}
.s-result-missed-q {
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--c-ink);
}
.s-result-missed-answer {
  font-size: .92rem;
  margin: 0 0 6px;
  color: var(--c-body);
}
.s-result-missed-answer .is-wrong   { color: var(--c-rust); font-weight: 600; }
.s-result-missed-answer .is-correct { color: var(--c-teal-dark); font-weight: 600; }
.s-result-missed-expl {
  font-size: .9rem;
  color: var(--c-body);
  line-height: 1.5;
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--c-sand);
}
.s-result-allgood {
  color: var(--c-teal-dark);
  font-weight: 600;
  text-align: center;
}

/* ── Completion slide ── */
.s-done {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.s-done-icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--c-teal-light);
  color: var(--c-teal);
  display: grid; place-items: center;
  line-height: 1;
}
.s-done-icon .icon { width: 44px; height: 44px; }
.s-done-icon i { width: 42px; height: 42px; }
.s-done-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
}
.s-done-body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--c-body);
  max-width: 560px;
  margin: 0;
}
.s-done-hint {
  font-size: .85rem;
  color: var(--c-faint);
  margin-top: 16px;
}
.s-done-hint kbd {
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .8rem;
  font-family: Menlo, Consolas, monospace;
}

/* ── Footer nav bar ── */
.slides-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px 28px;
  background: var(--c-paper);
  border-top: 1px solid var(--c-sand);
}
.slides-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.slides-progress-text {
  font-size: .8rem;
  color: var(--c-faint);
  text-align: center;
}
.slides-progress-bar {
  height: 4px;
  background: var(--c-sand);
  border-radius: 999px;
  overflow: hidden;
}
.slides-progress-fill {
  height: 100%;
  background: var(--c-teal);
  border-radius: 999px;
  transition: width .2s ease-out;
}
.slides-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s, border-color .15s;
  line-height: 1.2;
}
.slides-btn i { width: 16px; height: 16px; }
.slides-btn--primary {
  background: var(--c-teal);
  color: var(--c-paper);
}
.slides-btn--primary:hover { background: var(--c-teal-dark); }
.slides-btn--primary:disabled {
  background: var(--c-sand);
  color: var(--c-faint);
  cursor: not-allowed;
}
.slides-btn--ghost {
  background: transparent;
  color: var(--c-teal-dark);
  border-color: var(--c-sand);
}
.slides-btn--ghost:hover {
  background: var(--c-cream);
  border-color: var(--c-teal);
}
.slides-btn--ghost:disabled {
  color: var(--c-faint);
  cursor: not-allowed;
  background: transparent;
}
@media (max-width: 640px) {
  .slides-footer { padding: 12px 14px; gap: 10px; }
  .slides-btn { padding: 8px 12px; font-size: .85rem; }
  .slides-btn span { display: none; }
  .slides-btn i  { width: 18px; height: 18px; }
}

/* ── Audience grouping (For Teachers / For Parents) ─────────────────────
   Used on the courses index to separate the two audience tracks. The
   badge sits on each card; the section heading sits above each track. */
.crs-audience-section { margin: 28px 0 12px; }
.crs-audience-section + .crs-audience-section { margin-top: 36px; }
.crs-audience-heading {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 4px;
  letter-spacing: 0.2px;
}
.crs-audience-lede {
  color: var(--c-faint);
  font-size: 0.95rem;
  margin: 0 0 18px;
  max-width: 640px;
}
.crs-audience-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin: 0 0 8px;
  background: var(--c-teal-light);
  color: var(--c-teal-dark);
  border: 1px solid #C9E2DE;
  align-self: flex-start;
}
.crs-audience-badge--parent {
  background: #FBF3E4;
  color: #8E5A18;
  border-color: #EBDDB7;
}

/* ── Scenario slide ─────────────────────────────────────────────────────
   Tap-to-reveal cards. No scoring, no save; pure in-the-moment reflection. */
.s-scenario { max-width: 640px; margin: 0 auto; }
.s-scenario-title {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.s-scenario-body {
  color: var(--c-body);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.s-scenario-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.s-scenario-opt {
  text-align: left;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--c-ink);
  font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.s-scenario-opt:hover,
.s-scenario-opt[aria-expanded="true"] {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
}
.s-scenario-opt-label {
  display: block;
  font-weight: 600;
  color: var(--c-teal-dark);
  margin-bottom: 0;
}
.s-scenario-opt[aria-expanded="true"] .s-scenario-opt-label {
  margin-bottom: 8px;
}
.s-scenario-opt-reveal {
  display: block;
  color: var(--c-body);
  font-size: 0.95rem;
  line-height: 1.5;
}
.s-scenario-hint {
  color: var(--c-faint);
  font-size: 0.85rem;
  margin: 14px 0 0;
  text-align: center;
}

/* ── Commitment slide ───────────────────────────────────────────────────
   Saves the user's chosen commitment into UserReflection (field_name =
   "commitment"). Picker suggestions are pre-filled options. */
.s-commit { max-width: 620px; margin: 0 auto; }
.s-commit-title {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.s-commit-body {
  color: var(--c-body);
  line-height: 1.55;
  margin: 0 0 14px;
}
.s-commit-prompt {
  font-weight: 600;
  color: var(--c-teal-dark);
  margin: 0 0 12px;
}
.s-commit-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.s-commit-suggestion {
  text-align: left;
  background: var(--c-paper);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--c-ink);
  transition: border-color .15s, background .15s;
}
.s-commit-suggestion:hover,
.s-commit-suggestion.is-picked {
  border-color: var(--c-teal);
  background: var(--c-teal-light);
}
.s-commit-custom-label {
  display: block;
  color: var(--c-faint);
  font-size: 0.9rem;
  margin: 4px 0 0;
}
.s-commit-custom {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  color: var(--c-ink);
  border: 1px solid var(--c-sand);
  border-radius: 8px;
  background: var(--c-paper);
  resize: vertical;
  font-family: inherit;
}
.s-commit-custom:focus {
  outline: none;
  border-color: var(--c-teal);
}
.s-commit-status {
  margin-top: 8px;
  min-height: 1.1em;
  color: var(--c-teal-dark);
  font-size: 0.85rem;
}

/* ── Prior-commitments recap (top of later modules) ─────────────────── */
.slides-commit-recap {
  background: var(--c-cream);
  border: 1px solid var(--c-sand);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 auto 14px;
  max-width: 680px;
  color: var(--c-body);
  font-size: 0.92rem;
}
.slides-commit-recap-summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-teal-dark);
  list-style: none;
}
.slides-commit-recap-summary::-webkit-details-marker { display: none; }
.slides-commit-recap-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .15s;
}
.slides-commit-recap[open] .slides-commit-recap-summary::before {
  content: "▾ ";
}
.slides-commit-recap-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.slides-commit-recap-list li {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--c-sand);
}
.slides-commit-recap-list li:first-child { border-top: 0; }
.slides-commit-recap-mod {
  flex: 0 0 32px;
  font-weight: 700;
  color: var(--c-teal-dark);
  font-size: 0.82rem;
}
.slides-commit-recap-text {
  color: var(--c-body);
  line-height: 1.4;
}