/* The Media page (frontend/panel/watch/; docs/plans/media-page.md): a YouTube video
   in the recording column (content/recording/recording.css lays the video, its
   bottom panel and the list out). Here: the page's height, the embed frame and
   the player bar Plyr shows over a YouTube video, and what the page says over
   the video when YouTube will not play it. The bar's look is Plyr's as the
   reference styles it (index-B6XZtG7p.css: `.plyr__controls`, range and
   `#video-wrap .plyr` with the main colour #9c40bf). */

/* The page fills the window under the app bar, as the other Nội dung pages (.ct, .mf); `.rd` alone is 100 % of its box. */
.rd.mp-page {
  height: var(--page-h);
  background: var(--bg);
}

.mp-column {
  flex: 1 1 auto;
  width: 100%;
}

/* The video's box: 16 : 9, the frame filling it (vp:L5810–5838, `paddingBottom: 56.25%`). */
.mp-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000000;
  user-select: none;
}

.rec-video-layout.is-fullscreen .mp-player,
.rec-video-layout.is-small.has-list .mp-player {
  height: 100%;
  aspect-ratio: auto;
}

.mp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Over the frame: a click plays or pauses, and the keys stay on the page. */
.mp-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* The bar at the video's foot on Plyr's gradient: 10 px apart, 35 px of gradient over it. */
.mp-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 35px 10px 10px;
  background: linear-gradient(#0000, #000000bf);
  color: var(--on-media);
  font-size: 13px;
  pointer-events: none;
}

.mp-controls > * {
  pointer-events: auto;
}

.mp-bar-button,
.mp-controls .rec-fullscreen {
  position: static;
  display: inline-flex;
  flex-shrink: 0;
  padding: 7px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  opacity: 1;
  cursor: pointer;
}

.mp-bar-button:hover,
.mp-controls .rec-fullscreen:hover {
  background: none;
  color: var(--on-media);
}

.mp-bar-button:focus-visible,
.mp-controls .rec-fullscreen:focus-visible {
  outline: 2px solid var(--wovia-blue);
}

.mp-bar-icon {
  display: inline-flex;
}

.mp-time {
  flex-shrink: 0;
  padding: 0 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mp-bar-end {
  display: inline-flex;
  flex-shrink: 0;
}

/* Plyr's ranges: a 5 px track, the played part #9c40bf, a white 13 px thumb. */
.mp-progress,
.mp-volume {
  --mp-track: color-mix(in srgb, var(--on-media) 25%, transparent);
  height: 19px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.mp-progress {
  flex: 1 1 auto;
  min-width: 40px;
}

.mp-volume {
  flex: 0 1 90px;
  min-width: 40px;
  max-width: 90px;
}

.mp-progress::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(to right, var(--wovia-blue) var(--mp-played, 0%), var(--mp-track) var(--mp-played, 0%));
}

.mp-volume::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(to right, var(--wovia-blue) var(--mp-volume, 100%), var(--mp-track) var(--mp-volume, 100%));
}

.mp-progress::-webkit-slider-thumb,
.mp-volume::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--on-media);
  box-shadow: 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2);
  appearance: none;
}

/* A small video beside the list (240 × 135) keeps only what fits. */
.rec-video-layout.is-small.has-list .mp-controls {
  padding: 20px 4px 4px;
}

.rec-video-layout.is-small.has-list .mp-time,
.rec-video-layout.is-small.has-list .mp-volume {
  display: none;
}

/* YouTube will not play the video here (M7): why, and the video on youtube.com, over it. */
.mp-problem {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
}

.mp-problem[hidden] {
  display: none;
}

.mp-problem-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  text-align: center;
}

.mp-problem-body p {
  margin: 0;
  color: #ffb4ab;
}

/* The outline button in the dark look whatever the page's: it lies on the scrim over the video. */
.mp-problem-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--on-media) 15%, transparent);
  color: var(--on-media);
  text-decoration: none;
}

.mp-problem-link:hover:not(:disabled) {
  background: color-mix(in srgb, var(--on-media) 5%, transparent);
}

.mp-problem-link .icon {
  color: #ff0000;
}