/* =========================================================================
   LESSON PAGE MODULES (render/lesson-page.ts; reference page S1, 2026-10-08).
   Each module stands alone; the page is whichever modules a lesson lists.
   House tokens only. Prefix lsn- (not a room namespace).
   ========================================================================= */
.lsn { max-width: 64rem; }
.lsn-head { margin: 0 0 var(--s6); }
.lsn-crumb { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); font: var(--t-xs)/1.4 var(--mono); }
.lsn-crumb a { color: var(--ink-2); }
.lsn-crumb [aria-current] { color: var(--ink-3); }
.lsn-h1 { max-width: 24ch; margin: 0 0 var(--s4); font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.lsn-outcome { margin: 0 0 var(--s3); max-width: 40ch; font: 600 var(--t-md)/1.35 var(--ui); color: var(--ink); }
.lsn-meta { margin: 0; font: var(--t-xs)/1 var(--mono); color: var(--brand); }

.lsn-video { margin: 0 0 var(--s8); }
.lsn-video__fig { max-width: none; margin-bottom: var(--s3); }
.lsn-transcript { max-width: 46rem; margin: 0; }

.lsn-sec { margin: 0 0 var(--s9); }
.lsn-h2 { margin: 0 0 var(--s3); max-width: 24ch; font: 750 var(--t-display-md)/1.05 var(--display); letter-spacing: -.03em; color: var(--ink); }
.lsn-lede { margin: 0 0 var(--s6); max-width: 58ch; font: var(--t-md)/1.45 var(--ui); color: var(--ink-2); }
.lsn-concept__pair { margin-top: var(--s7); }

/* the worked example: five beats, each its own kind of artifact */
.lsn-case__beats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.lsn-case__beat { display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.lsn-case__k { margin: var(--s1) 0 0; font: var(--t-xs)/1.45 var(--mono); color: var(--ink-3); }
.lsn-case__b > :last-child { margin-bottom: 0; }
.lsn-case__q { margin: 0; font: 750 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.lsn-case__note { max-width: 40rem; padding: var(--s4) var(--s5); background: var(--paper-deep); border-left: 2px solid var(--brand); }
.lsn-case__note p { margin: 0 0 var(--s2); font: var(--t-base)/1.5 var(--ui); color: var(--ink); }
.lsn-case__unsure { color: var(--ink-2) !important; font-style: italic; }
.lsn-case__ai { position: relative; max-width: 34rem; padding: var(--s4) var(--s5) var(--s4) var(--s8); background: var(--paper-3); color: var(--ink); }
.lsn-case__ai p { margin: 0; font: var(--t-base)/1.5 var(--mono); }
.lsn-case__who { position: absolute; left: var(--s5); top: var(--s4); font: var(--t-xs)/1.9 var(--mono); color: var(--brand); }
.lsn-case__cmp { width: 100%; max-width: 46rem; border-collapse: collapse; font: var(--t-sm)/1.4 var(--ui); }
.lsn-case__cmp th, .lsn-case__cmp td { padding: var(--s3) var(--s4) var(--s3) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.lsn-case__cmp thead th { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); border-bottom-color: var(--rule-firm); }
.lsn-case__cmp tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.lsn-case__cmp td { color: var(--ink); }
.lsn-case__cmp td + td { color: var(--ink-3); }
.lsn-case__done { margin: 0 0 var(--s3); font: 750 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--brand); }
.lsn-case__after { margin: 0; max-width: 52ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.lsn-case .vis-cap { margin-top: var(--s3); }

/* the lesson's takeaway, once, at display size */
.lsn-take { margin: calc(-1 * var(--s6)) 0 var(--s9); max-width: 20ch; font: 800 var(--t-display-lg)/1 var(--display); letter-spacing: -.035em; color: var(--ink); }

/* the exercise: assets/exercise.css (render/exercise.ts), shared with Foundations */

/* the technical version */
.lsn-tech { margin: 0 0 var(--s8); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lsn-tech > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s4) 0; cursor: pointer; list-style: none; font: 600 var(--t-base)/1.3 var(--ui); color: var(--ink); }
.lsn-tech > summary::-webkit-details-marker { display: none; }
.lsn-tech > summary::after { content: "+"; content: "+" / ""; margin-left: auto; font: var(--t-md)/1 var(--mono); color: var(--ink-3); }
.lsn-tech[open] > summary::after { content: "−"; content: "−" / ""; }
.lsn-tech > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lsn-tech__k { font: 400 var(--t-xs)/1 var(--mono); color: var(--brand); }
.lsn-tech__body { padding-bottom: var(--s5); }
.lsn-tech__body > p { max-width: 60ch; margin: 0 0 var(--s4); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.lsn-tech__files { display: grid; gap: var(--s5); }

.lsn-pn { margin-top: var(--s7); }

@media (max-width: 56rem) {
  .lsn-case__beat { grid-template-columns: 1fr; gap: var(--s3); }
}
@media (max-width: 40rem) {
  .lsn-case__cmp, .lsn-case__cmp tbody, .lsn-case__cmp tr, .lsn-case__cmp th, .lsn-case__cmp td { display: block; width: auto; }
  .lsn-case__cmp thead { display: none; }
  .lsn-case__cmp tr { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .lsn-case__cmp th, .lsn-case__cmp td { border: 0; padding: var(--s1) 0; }
  .lsn-case__cmp td::before { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
  .lsn-case__cmp td:nth-of-type(1)::before { content: "Her answer"; }
  .lsn-case__cmp td:nth-of-type(2)::before { content: "The AI's"; }
}