/*
 * Styles for PAC Media Player.
 *
 * Page chrome, player layout, controls, disclosure, and focus treatment are
 * local so this directory can be delivered on its own.
 *
 * The player uses Video.js 10's elements without a packaged skin, so nothing
 * styles them but this file: the media box, the control bar, the icons, and
 * the menus are all composed here. Video.js drives the visuals through
 * data-attributes and custom properties on its elements (`[data-paused]`,
 * `[data-muted]`, `[data-active]`, `--media-slider-fill`, ...); we hang PAC's
 * own tokens off those hooks. Caption cues are the browser's own rendering of
 * the showing text track, styled with ::cue.
 */

:root {
  color-scheme: light;
  --page: #f6f7f4;
  --panel: #ffffff;
  --ink: #18201c;
  --muted: #5d6b62;
  --border: #c9d5cc;
  --accent: #0d6b4c;
  --accent-strong: #084633;
  --accent-soft: #d8efe6;
  --focus: #b54b2a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

button {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.page {
  width: min(100% - 2rem, 64rem);
  margin: 0 auto;
  padding: 3rem 0;
}

.page > h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.lede {
  max-width: 46rem;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.15rem;
}

/* Links in page copy, such as the local sample page's link to the YouTube one. */
.lede a {
  color: var(--accent-strong);
  font-weight: 700;
}

.lede a:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.video-example > h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.video-shell,
.disclosure {
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 1rem 2rem rgb(24 32 28 / 0.08);
}

.video-shell {
  overflow: hidden;
  padding: 1rem;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Player + composed control bar
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

/* <video-player> holds the player state and draws nothing; the visible
   player box is the <media-container> inside it (.player), which is also
   what goes fullscreen. */
video-player {
  display: contents;
}

/*
 * The player is a column: the video stage on top, the control bar below it in
 * normal flow. The bar never overlays the video, so on a phone, where the
 * controls wrap onto several rows, the picture stays fully visible (the first
 * finding from testing was a bar covering the whole video). The stage keeps
 * the 16:9 ratio; Video.js gives media no default size.
 */
/*
 * The player's colors. Every color the player paints comes from one of
 * these custom properties, which the `colors` section of config.json
 * overrides by name (see js/colors.js and README.md): background, controlBar,
 * controlText, focus, sliderTrack, sliderBuffer, sliderFill, sliderThumb,
 * menuBackground, menuText, selectedOption, captionText, captionBackground.
 * Hover and border shades are mixed from them. The Windows Contrast Themes
 * rules at the end of this file use system colors directly, so configured
 * colors never outrank them. Page chrome keeps the tokens on :root.
 */
.player {
  --pac-color-background: #000;
  --pac-color-control-bar: rgb(12 16 14 / 0.86);
  --pac-color-control-text: #f5f5f5;
  --pac-color-focus: #b54b2a;
  --pac-color-slider-track: rgb(255 255 255 / 0.45);
  --pac-color-slider-buffer: rgb(255 255 255 / 0.5);
  --pac-color-slider-fill: #d8efe6;
  --pac-color-slider-thumb: #fff;
  --pac-color-menu-background: rgb(12 16 14 / 0.96);
  --pac-color-menu-text: #f5f5f5;
  --pac-color-selected-option: rgb(255 255 255 / 0.14);
  --pac-color-caption-text: #fff;
  --pac-color-caption-background: rgb(0 0 0 / 0.75);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  aspect-ratio: auto;
  position: relative;
  background: var(--pac-color-background);
  border-radius: 6px;
  overflow: hidden;
  container-type: inline-size;
}

/* The stage holds the media. It keeps a 16:9 area at every width; caption
   cues are drawn by the browser inside the video's own box, so the stage
   does not grow for enlarged cues. */
.player__stage {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--pac-color-background);
}

/* The media element (a <video>, or <youtube-video>, whose iframe fills it)
   fills the stage and letterboxes. <youtube-video>'s own host styles ask for
   a 300x150 minimum, which would overflow a phone-width stage. */
.player__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  background: var(--pac-color-background);
}

/* Caption cues: the browser draws the showing track inside the video's box,
   which sits in the stage above the control bar, so no control ever covers
   a cue. ::cue accepts only text styles (color, background, font,
   line-height, text-shadow, outline, opacity, visibility, white-space): no
   padding, border radius, or positioning.

   Size (issue #9) follows the player's width (the player is a size
   container, and cqi resolves inside ::cue); the browser's own default would
   follow the video's height. Three terms, the largest wins:
   - 2cqi: 2% of the player's width, the size on a desktop-width player
     (19.8px on the sample page's 988px player), unchanged from before.
   - min(1rem, 4.2cqi): the reader's text size, but never more than lets a
     42-character line (the sample captions' maximum) fit across the player:
     at about half an em per character, 42 characters take 21em, and 4.2cqi
     keeps that within 88% of the width. Before, the floor was a plain 1rem,
     so 200% text on a phone made cues 32px tall on a 276px player.
   - 12px: the readable minimum on the smallest players. */
.player__media::cue {
  color: var(--pac-color-caption-text);
  background: var(--pac-color-caption-background);
  font-family: Arial, Helvetica, sans-serif;
  font-size: max(12px, 2cqi, min(1rem, 4.2cqi));
  line-height: 1.25;
}

/* Fullscreen puts the player (the media-container) in the viewport: the
   stage takes whatever height the bar leaves and the media letterboxes in
   it, keeping a fifth of the viewport at minimum. When enlarged controls
   exceed a short viewport, scroll this surface instead of clipping its last
   controls. */
.player:fullscreen {
  overflow: auto;
}

.player:fullscreen .player__stage {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 20vh;
}

/*
 * The control bar is always visible: it is plain markup, not Video.js's
 * auto-hiding <media-controls>, so it never fades or hides and stays in the
 * accessibility tree and tab order throughout playback. It paints above the
 * stage.
 */
/*
 * The bar holds three layout groups in source order: transport (skip, play,
 * skip, mute, volume), timeline (time, seek), and extras (rate, captions,
 * audio, picture-in-picture, fullscreen). Grouping is layout only: names,
 * source order, and tab order are unchanged.
 *
 * Compact tier (the default, below 44.5rem of player width): each group is a
 * row of its own, every button is the same square, and the volume slider is
 * hidden while Mute stays. On a phone that is three rows at default text
 * size, where the plain wrap gave four or five; the breakpoint is in rem, so
 * a wide player at enlarged text gets the same treatment and each group then
 * wraps within itself. Hiding the volume slider there is a responsive-layout
 * choice the tester asked for, not an availability state: Mute remains, the
 * keyboard volume shortcuts still work, and the device's own volume control
 * is the better slider on a phone.
 *
 * Wide tier (44.5rem and up): the groups dissolve (display: contents) into
 * one row with the volume and seek sliders inline. The breakpoint is where
 * that row genuinely fits: measured at default text, the row's narrowest fit
 * is 42.9rem for a video under ten minutes (M:SS times), 43.9rem under an
 * hour (MM:SS), and 45.6rem from an hour (H:MM:SS), with the volume slider at
 * 4rem and the seek slider at its 4rem minimum. 44.5rem (712px) keeps 0.6rem
 * of room over the under-an-hour fit and still gives a player in an 800px
 * content column (about 730px after a wrapper's padding and borders) the one
 * row, with 18px to spare for a wider wrapper. The row may wrap rather than
 * overflow, so the rare hour-long video between 44.5rem and 45.6rem drops
 * its last control to a second line instead of clipping it.
 */
.player__bar {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.4rem 0.6rem;
  background: var(--pac-color-control-bar);
}

.player__group {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
}

/* The timeline row: the seek slider takes whatever the time read-out leaves.
   At enlarged text on a phone the two no longer fit side by side, and the
   slider drops to a row of its own rather than shrinking to a sliver. */
.player__group--timeline .slider--time {
  flex: 1 1 4rem;
}

.player__group--transport .slider--volume {
  display: none;
}

/* Square buttons: 44px at default text, growing with text but more slowly
   than the 2.75rem of the wide tier, so a phone at enlarged text keeps more
   controls per row without dropping under the 44px target. */
.player__group .ctl {
  width: var(--pac-ctl-size);
  min-width: var(--pac-ctl-size);
  height: var(--pac-ctl-size);
}

.player__group .ctl-menu {
  width: var(--pac-ctl-size);
}

/* Buttons: Video.js sets role=button and tabindex on the host element
   itself; the two menu buttons are native <button>s. */
.ctl {
  --pac-ctl-size: max(44px, 2rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pac-color-control-text);
  cursor: pointer;
}

.ctl:hover {
  background: color-mix(in srgb, var(--pac-color-control-text) 18%, transparent);
}

.ctl__icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
  pointer-events: none;
}

/* The skip buttons read as one glyph: a circular arrow with the number
   inside it. The arrow is a stroked ring, open for a quarter turn, with a
   round-capped chevron head that sits on the ring rather than reaching into
   the middle, so it never touches the number (the replay glyph on the play
   button is the same ring). The number is centered over the whole button
   and lands in the ring. The visible "15" is
   contained in the accessible name ("Skip backward 15 seconds"), which says
   the unit in full so screen readers do not spell out "sec". */
.ctl--skip {
  position: relative;
}

.ctl__icon--skip {
  width: 1.9rem;
  height: 1.9rem;
}

.ctl__skip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.05rem;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* Captions on: the rectangle fills and the text lines are cut out of it, so
   the state is visible as well as named. Video.js sets data-active on the
   button while captions are showing; the icon stays aria-hidden because the
   button's name ("Turn captions off" / "Turn captions on") carries the state. */
.ctl__icon--captions rect {
  fill: none;
  stroke: currentColor;
}

media-captions-button[data-active] .ctl__icon--captions rect {
  fill: currentColor;
}

media-captions-button[data-active] .ctl__icon--captions path {
  stroke: var(--pac-color-control-bar);
}

/* Icon swaps, driven by the state attributes Video.js sets on each button. */
media-play-button:not([data-paused]) .ctl__icon--play,
media-play-button[data-ended] .ctl__icon--play,
media-play-button[data-paused] .ctl__icon--pause,
media-play-button[data-ended] .ctl__icon--pause,
media-play-button:not([data-ended]) .ctl__icon--replay {
  display: none;
}

media-mute-button:not([data-muted]) .ctl__icon--muted,
media-mute-button[data-muted] .ctl__icon--volume {
  display: none;
}

media-pip-button[data-pip] .ctl__icon--pip-enter,
media-pip-button:not([data-pip]) .ctl__icon--pip-exit,
media-fullscreen-button[data-fullscreen] .ctl__icon--fs-enter,
media-fullscreen-button:not([data-fullscreen]) .ctl__icon--fs-exit {
  display: none;
}

/* Time read-out. */
.player__time {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.35rem;
  color: var(--pac-color-control-text);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.time__divider {
  color: color-mix(in srgb, var(--pac-color-control-text) 70%, transparent);
}

/* Sliders: Video.js sets `--media-slider-fill` (and, on the seek slider,
   `--media-slider-buffer`) on the host as percentages. */
.slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  outline: none;
  cursor: pointer;
  touch-action: none;
}

.player__group--timeline .slider--time {
  min-width: 4rem;
  margin: 0;
}

.player__group--timeline .player__time {
  flex: 0 0 auto;
}

/* Wide tier: one row, groups dissolved, sliders inline. The group selectors
   keep the same specificity as the compact rules they override. */
@container (min-width: 44.5rem) {
  .player__group {
    display: contents;
  }

  .player__group .ctl,
  .player__group .ctl-menu {
    width: auto;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  .player__group .ctl--rate {
    min-width: 3.2rem;
  }

  .player__group--transport .slider--volume {
    display: inline-flex;
    width: 4rem;
    flex-shrink: 0;
  }

  .player__group--timeline .slider--time {
    flex: 1 1 auto;
    min-width: 4rem;
    margin: 0 0.4rem;
  }
}

/* The three rail layers share one geometry; each declares only its own
   width, color, and stacking. */
.slider__track,
.slider__progress,
.slider__fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 2px;
}

.slider__track {
  width: 100%;
  /* Clear of 3:1 against the bar even over the lightest video frame. */
  background: var(--pac-color-slider-track);
}

.slider__progress {
  width: var(--media-slider-buffer, 0%);
  background: var(--pac-color-slider-buffer);
  z-index: 1;
}

.slider__fill {
  width: var(--media-slider-fill, 0%);
  background: var(--pac-color-slider-fill);
  z-index: 2;
}

/* The thumb is Video.js's <media-slider-thumb>: the focusable element with
   role="slider". */
.slider__thumb {
  position: absolute;
  top: 50%;
  left: var(--media-slider-fill, 0%);
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--pac-color-control-bar);
  background: var(--pac-color-slider-thumb);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.15s ease-in;
}

.slider[data-interactive] .slider__thumb,
.slider:has(.slider__thumb:focus-visible) .slider__thumb {
  opacity: 1;
}

/*
 * Keyboard focus shows a 4px accent outline. A slider's focus is on its thumb,
 * so the outline is drawn around the whole slider instead of the small thumb.
 */
.ctl:focus-visible,
.slider:has(.slider__thumb:focus-visible) {
  outline: 4px solid var(--pac-color-focus);
  outline-offset: 2px;
}

.slider__thumb:focus-visible {
  outline: none;
}

/* The player itself is a keyboard target for the scoped playback shortcuts. */
.player:focus-visible {
  outline: 4px solid var(--pac-color-focus);
  outline-offset: -4px;
}

/* Paint above the provider: an inset outline alone is covered by its video. */
.player:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border: 4px solid var(--pac-color-focus);
  border-radius: inherit;
  pointer-events: none;
}

.player:fullscreen:focus-visible::after {
  position: fixed;
}

/*
 * Playback-rate and audio-track menus: a control-bar button expanding a small
 * panel of menuitemradio options. The panel is Video.js's <media-menu>, a
 * popover in the browser's top layer, positioned against its button and kept
 * inside the viewport by Video.js (`boundary="viewport"` in the markup; the
 * default, the player container, would clip it to the player's height),
 * which also publishes the room it has as custom properties. Closed, the
 * browser's own popover styles hide it.
 */
.ctl-menu {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

/* The rate button shows the current rate as text, like Video.js's "1x". */
.ctl-menu__hint {
  font-size: 1rem;
  font-weight: 800;
  pointer-events: none;
}

.ctl--rate {
  min-width: 3.2rem;
}

.ctl-menu__popup {
  --media-popover-side-offset: 8px;
  --media-popover-boundary-offset: 8px;
  box-sizing: border-box;
  width: max-content;
  min-width: min(8rem, var(--media-menu-available-width, 100vw));
  max-width: var(--media-menu-available-width, 100vw);
  max-height: var(--media-menu-available-height, 100vh);
  overflow: auto;
  overflow-wrap: anywhere;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--pac-color-menu-text) 35%, transparent);
  border-radius: 8px;
  background: var(--pac-color-menu-background);
  color: var(--pac-color-menu-text);
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.4);
}

.ctl-menu__items {
  display: block;
  outline: none;
}

.ctl-menu__items media-menu-radio-item {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  color: var(--pac-color-menu-text);
  font-size: 0.95rem;
  cursor: pointer;
}

.ctl-menu__items media-menu-radio-item:hover {
  background: color-mix(in srgb, var(--pac-color-menu-text) 20%, transparent);
}

.ctl-menu__items media-menu-radio-item[aria-checked="true"] {
  font-weight: 800;
  background: var(--pac-color-selected-option);
}

/* Inset outline so the focus ring is not clipped by the panel edge. */
.ctl-menu__items media-menu-radio-item:focus-visible {
  outline: 4px solid var(--pac-color-focus);
  outline-offset: -2px;
}

/* Unavailable controls stay visible but read and look disabled. */
.ctl[disabled],
.ctl[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Disclosure
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

.disclosure {
  margin-top: 1.5rem;
}

.disclosure__heading {
  margin: 0;
}

.disclosure__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 1rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  text-align: left;
}

.disclosure__button:hover {
  background: var(--accent-soft);
}

.disclosure__button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.disclosure__icon {
  flex: 0 0 auto;
  margin-left: 1rem;
  color: var(--accent-strong);
  font-size: 1.5rem;
  line-height: 1;
  min-width: 1ch;
  text-align: center;
}

.disclosure__content {
  border-top: 1px solid var(--border);
  padding: 1rem;
}

.disclosure__content h3 {
  margin: 1.25rem 0 0.25rem;
  font-size: 1.1rem;
}

.disclosure__content h3:first-child {
  margin-top: 0;
}

.disclosure__content p {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.disclosure__content ul {
  margin: 0;
  padding-left: 1.25rem;
}

.disclosure__content li + li {
  margin-top: 0.35rem;
}

.disclosure__content code {
  color: var(--accent-strong);
  font-weight: 700;
}

@media (max-width: 44rem) {
  .page {
    width: min(100% - 1rem, 64rem);
    padding: 1rem 0;
  }

  .video-shell {
    padding: 0.75rem;
  }
}

@media (forced-colors: active) {
  /* Cues in the system palette, so they keep the user's contrast. */
  .player__media::cue {
    color: CanvasText;
    background: Canvas;
  }

  .player__bar {
    border-top: 1px solid CanvasText;
    background: Canvas;
  }

  .ctl,
  .player__time,
  .time__divider,
  .ctl-menu__items media-menu-radio-item {
    color: CanvasText;
  }

  .ctl[disabled],
  .ctl[aria-disabled="true"] {
    color: GrayText;
    opacity: 1;
  }

  /* The filled captions state in the system palette: text-colored block with
     the lines cut out in the bar's Canvas. */
  media-captions-button[data-active] .ctl__icon--captions {
    forced-color-adjust: none;
  }

  media-captions-button[data-active] .ctl__icon--captions rect {
    fill: CanvasText;
    stroke: CanvasText;
  }

  media-captions-button[data-active] .ctl__icon--captions path {
    stroke: Canvas;
  }

  .player:focus-visible,
  .ctl:focus-visible,
  .slider:has(.slider__thumb:focus-visible),
  .ctl-menu__items media-menu-radio-item:focus-visible {
    outline-color: Highlight;
  }

  .player:focus-visible::after {
    border-color: Highlight;
  }

  /* Keep these authored shapes in the user's system palette. Without this
     narrow opt-out, Chromium paints every rail layer as the bar's Canvas. */
  .slider__track,
  .slider__progress,
  .slider__fill,
  .slider__thumb {
    forced-color-adjust: none;
  }

  .slider__track {
    background: GrayText;
  }

  .slider__progress {
    background: CanvasText;
  }

  .slider__fill {
    background: Highlight;
  }

  .slider__thumb {
    border-color: Canvas;
    background: CanvasText;
    opacity: 1;
  }

  .ctl-menu__popup {
    border-color: CanvasText;
    background: Canvas;
  }

  .ctl-menu__items media-menu-radio-item[aria-checked="true"] {
    forced-color-adjust: none;
    color: HighlightText;
    background: Highlight;
  }

  .ctl-menu__items media-menu-radio-item[aria-checked="true"]:focus-visible {
    outline-color: HighlightText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider__thumb {
    transition: none;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * YouTube pre-play cover
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * js/youtube.js creates this element inside the stage, for a YouTube source
 * only, and removes it on the first play. It sits over the media showing
 * the video's own thumbnail (black until that loads, or if it cannot) so
 * YouTube's painted play button is not a second Play beside ours while the
 * page still previews the video; it is aria-hidden and not focusable, so
 * nothing changes for a screen reader, and a click on it reaches the
 * stage's click-to-play.
 */
.player__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--pac-color-background);
}

/* The video's own thumbnail fills the cover; `cover` crops the letterbox
   bars of the 4:3 fallback frame on the 16:9 stage. */
.player__cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Audio player
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * js/player-config.js marks the player data-media-type="audio" for an audio
 * source. There is no picture, so no stage, and the captions,
 * picture-in-picture, and fullscreen controls are not part of an audio
 * player: they are removed, not shown unavailable.
 */
.player[data-media-type="audio"] .player__stage,
.player[data-media-type="audio"] media-captions-button,
.player[data-media-type="audio"] media-pip-button,
.player[data-media-type="audio"] media-fullscreen-button {
  display: none;
}

/*
 * The audio bar uses the row's width and never leaves a control alone on a
 * row. Compact (the default) keeps three unbreakable groups, in source order:
 * the transport buttons on a row of their own (the volume slider hidden, as
 * on a narrow video player); the time read-out with the seek slider, which
 * labels it; and the playback-rate and audio-track pair. The timeline and the
 * pair share a row where they fit, and the seek slider grows to fill it.
 * Measured down to a 320px viewport at 200% text, where the timeline needs
 * its narrowest form: a 1.25rem seek minimum and a tighter read-out.
 */
.player[data-media-type="audio"] .player__bar {
  justify-content: center;
}

.player[data-media-type="audio"] .player__group--timeline {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.player[data-media-type="audio"] .player__group--extras {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.player[data-media-type="audio"] .player__group--timeline .player__time {
  padding: 0 0.1rem;
}

.player[data-media-type="audio"] .player__group--timeline .slider--time {
  flex: 1 1 1.25rem;
  min-width: 1.25rem;
}

/* The four transport buttons make a 2x2 block when a row of four does not
   fit: each button is max(44px, 2rem) square with 0.4rem between, inside the
   bar's 0.6rem padding, so four need max(176px, 8rem) + 2.4rem. */
@container (width < calc(176px + 2.4rem)) or (width < 10.4rem) {
  .player[data-media-type="audio"] .player__group--transport {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }
}

/* One row with the volume slider where every audio control fits. Measured
   as for the video bar (see the wide tier above), the audio row's narrowest
   fit at default text is 33.9rem (M:SS times), 34.9rem (MM:SS), and 36.6rem
   (H:MM:SS); from 37rem it fits whatever the duration, so it never wraps. */
@container (min-width: 37rem) {
  .player[data-media-type="audio"] .player__bar {
    flex-wrap: nowrap;
  }

  .player[data-media-type="audio"] .player__group {
    display: contents;
  }

  .player[data-media-type="audio"] .player__group .ctl,
  .player[data-media-type="audio"] .player__group .ctl-menu {
    width: auto;
    min-width: 2.75rem;
    height: 2.75rem;
  }

  .player[data-media-type="audio"] .player__group .ctl--rate {
    min-width: 3.2rem;
  }

  .player[data-media-type="audio"] .player__group--transport .slider--volume {
    display: inline-flex;
    width: 4rem;
    flex-shrink: 0;
  }

  .player[data-media-type="audio"] .player__group--timeline .slider--time {
    flex: 1 1 auto;
    min-width: 4rem;
    margin: 0 0.4rem;
  }
}