/* ============================================================================
   The /video page: the rendered explainer plus its chapter list.
   Tokens only — see tokens.css. Loaded only by video.html, so it declares its
   own layer at the end of the cascade order tokens.css sets up.
   ========================================================================= */

@layer video {

/* The player sits in the figure card like a chart does, and keeps the video's
   own 16:9 rather than letting a tall viewport stretch it. */
.video-frame { padding: var(--s3) var(--s4) var(--s4); }
.video-frame video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.video-missing { margin-top: var(--s3); color: var(--warn-ink); }

.chapters { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.chapter {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}

/* A timestamp that seeks the player. Styled as a quiet monospace control
   rather than a button, since it sits inside running text. */
.chapter-jump {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  background: var(--surface-sunken);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  /* Vertical padding alone used to leave this a 19px-tall target -- well
     under the ~44px touch-target guideline. The visible chip stays the
     same small size; the padding is what grows to make the tap area itself
     reasonable on a phone. */
  padding: var(--s4) var(--s2);
  cursor: pointer;
}
.chapter-jump:hover { color: var(--ink); border-color: var(--ink-3); }

.chapter-title { margin: 0; font-weight: 600; color: var(--ink); }
.chapter-text {
  margin: var(--s1) 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 68ch;
}

@media (max-width: 560px) {
  .chapter { flex-wrap: wrap; }
}

} /* @layer video */