/*
 * Universal full-video player.
 *
 * This contract is intentionally opt-in. Card and thumbnail videos keep their
 * stable preview geometry; only opened/detail players use these classes.
 */
html body .site-video-container.site-video-container.site-video-container.site-video-container.site-video-container.site-video-container,
html body .video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #000 !important;
  line-height: 0 !important;
}

/*
 * Mobile detail pages previously shared a 16:9 thumbnail rule. Release every
 * opted-in native video and its media wrappers from that rule. This is kept
 * separate from card/thumbnail selectors so list previews retain their fixed
 * dimensions while opened videos use their intrinsic aspect ratio, like Media.
 */
@media (max-width: 767px) {
  html body :is(
    .profile-detail-card,
    .detail-media-card,
    .detail-media-shell,
    .detail-media-frame,
    .detail-media-wrap,
    .detail-split-media,
    .blog-detail-media,
    .training-detail-media-card,
    .workout-detail-hero,
    .workout-detail-display-media,
    .workout-detail-hero-media,
    .exercise-detail-media-item,
    .exercise-detail-upload-media,
    .food-journal-detail-media-stage,
    .highlight-detail-media-section,
    .watch-detail-player-section,
    .watch-detail-player-shell,
    .media-detail-carousel__item,
    .weekly-story-frame__media,
    .timeline-story-media
  ):has(.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  html body .video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container,
  html body .site-video-container.site-video-container.site-video-container.site-video-container.site-video-container.site-video-container {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  html body .video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player,
  html body .site-video-player.site-video-player.site-video-player.site-video-player.site-video-player.site-video-player,
  html body .video-detail-container.video-detail-container video {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* Release legacy detail wrappers that used image-card ratios around a player. */
:is(
  .profile-detail-card,
  .detail-page-card,
  .blog-detail-content-card,
  .workout-detail-content-card,
  .highlight-detail-post-card,
  .watch-detail-content-card,
  .detail-media-frame,
  .detail-media-shell,
  .detail-media-wrap,
  .detail-split-media,
  .detail-media-card,
  .blog-detail-media,
  .ms-external-media,
  .ms-external-media__frame,
  .ath-media-player-card,
  .ath-media-player,
  .training-detail-media-card,
  .workout-detail-hero,
  .workout-detail-display-media,
  .workout-detail-hero-media,
  .exercise-detail-media-item,
  .exercise-detail-upload-media,
  .food-journal-detail-media-stage,
  .media-detail-carousel__item,
  .media-story-composition-stage,
  .media-story-composition,
  .timeline-story-design,
  .highlight-detail-media-section,
  .watch-detail-player-section,
  .watch-detail-player-shell,
  .weekly-story-frame__media,
  .timeline-story-media,
  .daily-detail
):has(.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

html body .site-video-player.site-video-player.site-video-player.site-video-player.site-video-player.site-video-player,
html body .video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player,
html body .video-detail-container video {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #000 !important;
  border: 0 !important;
  transform: none !important;
}

/*
 * Desktop/tablet uses the same contained stage as Media. Landscape players
 * can use the full content width; portrait and square players are capped to a
 * comfortable viewport height while retaining every pixel of the frame.
 */
@media (min-width: 768px) {
  html body .site-video-container.site-video-container.site-video-container.site-video-container.site-video-container.site-video-container,
  html body .video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container.video-detail-container {
    min-height: min(360px, 45vw) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .site-video-player.site-video-player.site-video-player.site-video-player.site-video-player.site-video-player,
  html body .video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player.video-detail-player,
  html body .video-detail-container.video-detail-container video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(76vh, 780px) !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}