/* Video takeaways (scripts/lib/components/takeaways.mjs): the poster, then one timestamped
   line per takeaway, with a dated later change under a line and an optional frame. Shared by
   class pages (T2) and spec pages (T3). No JavaScript of its own; the poster is video.css. */

.class-video { margin: 0 0 var(--s-6); }
.class-video > h3 { margin: 0 0 .25rem; font: 400 1.4rem/1.1 var(--font-display); letter-spacing: .01em; color: var(--ink); }
.class-video-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .75rem; font: 400 .82rem/1.4 var(--font-ui); color: var(--ink-3); }
.class-video-body { display: grid; gap: var(--s-4); }
.class-video .wfg-video { max-width: 36rem; margin: 0; }
.class-takeaways { margin: 0; padding: 0; list-style: none; }
.class-takeaway { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .15rem .75rem; align-items: start; padding: 7px 0; border-top: 1px solid var(--hairline); }
.class-takeaway.has-shot { grid-template-columns: 3.5rem minmax(0, 1fr) 96px; }
.class-takeaways .class-takeaway p { margin: 0; line-height: 1.45; color: var(--ink); }
.class-stamp { display: inline-flex; align-items: center; min-height: 1.75rem; font: 400 .92rem/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-text); }
.class-takeaways .class-takeaway .class-update { margin-top: .3rem; padding-left: .6rem; border-left: 2px solid var(--line-control); font-size: .88rem; color: var(--ink-2); }
.class-update > span:first-child { color: var(--ink-3); }
.class-update .wfg-evidence { margin-inline: .2rem; }
.class-takeaway .figure-zoom { display: block; }
.class-takeaway .figure-zoom img { display: block; width: 96px; height: auto; border: 1px solid var(--edge); }
@media (max-width: 40rem) {
  .class-takeaway, .class-takeaway.has-shot { grid-template-columns: 3rem minmax(0, 1fr); }
  .class-takeaway .figure-zoom { grid-column: 2; margin-top: .3rem; }
}