/* Video walkthrough embed (overrides/partials/video.html, requirements R12, DEV-1052).

   DS tokens only (space, radius, colour). Loaded after extra.css, so the
   --dn-warn-* colours (light and dark) are already defined there. Sizes use
   px space tokens or em, so the DS-vs-Material root-size difference does not
   apply. */

.dn-video {
  margin: 0 0 var(--space-8);
  padding: 0;
}

/* Responsive 16:9 player. */
.dn-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-surface);
  background: var(--color-surface-recessed);
}
.dn-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* "Watch on Vimeo" link: always shown, the fallback without JS or iframes. */
.dn-video__caption {
  margin: var(--space-2) 0 0;
  text-align: left;
  font-size: 0.8rem;
}
.dn-video__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
}
.dn-video__link-icon svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

/* Chapters. */
.dn-video__chapters { margin-top: var(--space-4); }
.dn-video__chapters-title {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
}
ol.dn-video__chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol.dn-video__chapter-list > li.dn-video__chapter {
  display: flex;
  gap: var(--space-3);
  margin: 0 0 var(--space-1);
  padding: 0;
}
.dn-video__time {
  flex: none;
  min-width: 3.5em;
  font-variant-numeric: tabular-nums;
}

/* Out-of-date note (video.stale: true): the DS compact callout in the
   pending (amber) family the warning admonitions use. */
.dn-video__stale {
  --callout-bg:          var(--dn-warn-bg);
  --callout-icon-color:  var(--dn-warn-icon);
  --callout-title-color: var(--dn-warn-text);
  --callout-text-color:  var(--dn-warn-text);
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-surface);
}
.dn-video__stale .callout__text { color: var(--dn-warn-text); }
.dn-video__stale .callout__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media print {
  .dn-video__frame { display: none; }
}