/* Article listening shares the film player's plain rules and precise controls. */
.immersive-case .opening .intro.has-narration { row-gap: 24px; }
.intro.has-narration > .intro-details { grid-column: 2; grid-row: 1 / span 2; }
.intro.has-narration > .article-audio { grid-column: 1; grid-row: 2; }
.article-audio, .audio-dock { font: var(--media-control-size, 12px)/1.4 Areal, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.article-audio { min-width: 0; container-type: inline-size; }
.article-audio audio { width: 100%; }
.article-audio [hidden], .audio-dock[hidden], .audio-dock [hidden] { display: none !important; }
.audio-ui { display: grid; grid-template-columns: 96px minmax(92px, 1fr) 64px; column-gap: 12px; padding-block: 8px; border-block: 1px solid #ddd; }
.audio-heading { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; min-width: 0; }
.audio-ui.is-started .audio-heading { grid-column: 1; grid-row: 1; }
.audio-ui.is-started .audio-length { display: none; }
.article-audio button, .audio-dock button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.article-audio .audio-play { width: 96px; padding-inline: 12px; text-transform: uppercase; text-decoration: none; }
.article-audio button:hover, .audio-dock button:hover { background: var(--ink); color: var(--paper); }
.article-audio button:disabled, .audio-dock button:disabled { opacity: .4; cursor: default; background: none; color: var(--ink); text-decoration: none; }
.article-audio :is(button, select, input, a):focus-visible,
.audio-dock :is(button, select, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.audio-glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; font: 16px/1 Areal, Arial, sans-serif; }
.audio-play-icon, .audio-pause-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; stroke: none; }
.audio-length, .audio-clock { font-size: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audio-length { color: #666; }
.audio-clock { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; min-width: 76px; }
.audio-clock > [aria-hidden] { color: #777; }
.audio-tools { display: contents; }
.audio-track { grid-column: 1 / -1; grid-row: 2; min-width: 0; display: flex; align-items: center; gap: 12px; }
.article-audio input[type="range"], .audio-dock input[type="range"] {
  appearance: none; -webkit-appearance: none; display: block; flex: 1; min-width: 0; width: 100%;
  height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: linear-gradient(to right, var(--ink) var(--audio-progress, 0%), #ddd var(--audio-progress, 0%)) center/100% 1px no-repeat;
  cursor: pointer; accent-color: var(--ink);
}
.article-audio input[type="range"]::-webkit-slider-runnable-track,
.audio-dock input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: transparent; border: 0; border-radius: 0; }
.article-audio input[type="range"]::-webkit-slider-thumb,
.audio-dock input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7px; height: 14px; margin-top: -6.5px; background: var(--ink); border: 0; border-radius: 0; }
.article-audio input[type="range"]::-moz-range-track,
.audio-dock input[type="range"]::-moz-range-track { height: 1px; background: transparent; border: 0; }
.article-audio input[type="range"]::-moz-range-progress,
.audio-dock input[type="range"]::-moz-range-progress { height: 1px; background: transparent; }
.article-audio input[type="range"]::-moz-range-thumb,
.audio-dock input[type="range"]::-moz-range-thumb { width: 7px; height: 14px; background: var(--ink); border: 0; border-radius: 0; }
.audio-skip { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 4px; }
.audio-skip button { gap: 4px; }
.audio-skip button > span { font-size: inherit; font-variant-numeric: tabular-nums; }
.audio-speed { grid-column: 3; grid-row: 1; position: relative; display: flex; align-items: center; width: 64px; height: 44px; flex: 0 0 auto; }
.audio-speed select { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; margin: 0; border: 0; border-radius: 0; padding: 0 20px 0 8px; color: var(--ink); background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.audio-speed > svg { position: absolute; right: 4px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; pointer-events: none; }
.audio-error a { text-decoration: underline; text-underline-offset: 4px; }
.audio-error a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.audio-error { grid-column: 1 / -1; max-width: 36em; margin: 8px 0; font-size: inherit; }
.audio-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.audio-dock {
  position: fixed; z-index: 90; inset: auto 0 0; background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--ink); padding: 8px var(--gutter) max(8px, env(safe-area-inset-bottom));
}
.audio-dock-inner { display: grid; grid-template-columns: minmax(120px, .65fr) 44px 92px minmax(160px, 1.35fr) 64px 44px; align-items: center; gap: 16px; max-width: var(--editorial-media-width, 1440px); margin: auto; }
.audio-dock-title { min-width: 0; font-size: inherit; text-transform: uppercase; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.audio-dock .audio-track, .audio-dock .audio-skip, .audio-dock .audio-speed { grid-column: auto; grid-row: auto; }
.audio-dock .audio-close-glyph { font-size: 22px; }
/* Use the player’s available width, including when the introduction has two columns. */
@container (min-width: 560px) {
  .audio-ui { grid-template-columns: 96px 92px minmax(0, 1fr) 64px; }
  .audio-track { grid-column: 3; grid-row: 1; }
  .audio-speed { grid-column: 4; }
}
@media (max-width: 900px) {
  .audio-dock-inner { grid-template-columns: 44px 44px minmax(0, 1fr) 64px 44px; gap: 0 4px; }
  .audio-dock-title { grid-column: 2 / 4; grid-row: 1; padding-left: 4px; }
  .audio-dock .audio-play { grid-column: 1; grid-row: 1; }
  .audio-dock .audio-speed { grid-column: 4; grid-row: 1; }
  .audio-dock .audio-close { grid-column: 5; grid-row: 1; }
  .audio-dock .audio-skip { grid-column: 1 / 3; grid-row: 2; }
  .audio-dock .audio-track { grid-column: 3 / -1; grid-row: 2; padding-left: 12px; }
}
@media (max-width: 700px) {
  .intro.has-narration > .intro-details { grid-row: 3; grid-column: 1; margin-top: 8px; }
  .audio-ui { column-gap: 12px; }
  .audio-track { gap: 8px; }
  .audio-dock { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}
@media print { .article-audio, .audio-dock { display: none !important; } }