[data-tpm-live-player] {
 min-width: 0;
 max-width: 100%;
 margin-inline: 0;
 background: #080808;
}

[data-tpm-live-player] iframe {
 display: block;
 width: 100%;
 max-width: 100%;
 border: 0;
}

[data-tpm-live-player] > iframe {
 height: auto;
 aspect-ratio: 16 / 9;
}

[data-tpm-live-player] > video {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 object-fit: contain;
}

.tpm-player-unavailable {
 display: grid;
 place-items: center;
 min-height: 150px;
 aspect-ratio: 16 / 9;
 margin: 0;
 padding: 20px;
 text-align: center;
 color: #ddd;
}

.tpm-broadcast-links {
 display: flex;
 flex-wrap: wrap;
 gap: 8px 20px;
 padding: 8px 0;
 border-bottom: 1px solid #333;
}

.tpm-broadcast-links a {
 display: inline-flex;
 min-height: 44px;
 align-items: center;
 gap: 8px;
 color: #eee;
 font-size: 14px;
 text-decoration: none;
}

.tpm-broadcast-links a:hover,
.tpm-broadcast-links a:focus-visible,
.tpm-broadcast-links a span {
 color: #ff9a50;
}

.tpm-tv-experience__stage {
 width: min(1120px, calc(100% - 48px));
}

@media (max-width: 820px) {
 .tpm-tv-experience__stage {
  width: calc(100% - 2 * var(--tpm-gutter, 16px));
 }
 .tpm-tv-experience__top {
  padding-inline: 0;
 }
 .tpm-tv-experience {
  min-height: 0;
  padding-block: 20px 32px;
 }
 .tpm-home-reference .tpm-broadcast-grid {
  gap: 18px;
 }
 .tpm-home-reference .tpm-air-desk {
  padding-top: 14px;
 }
}

@media (max-width: 600px) {
 .tpm-home-reference .tpm-broadcast-stage {
  padding-top: 14px;
 }
 .tpm-home-reference .tpm-clean-live-heading {
  margin-bottom: 12px;
 }
 .tpm-ref-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: start;
  gap: 14px;
 }
 .tpm-ref-story-copy {
  grid-column: 1;
  grid-row: 1;
  padding-top: 0;
 }
 .tpm-ref-story-art {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 1;
 }

 .tpm-ref-story:not(:has(.tpm-ref-story-art)) {
  grid-template-columns: minmax(0, 1fr);
 }
 .tpm-ref-story h3 {
  font-size: 18px;
  overflow-wrap: anywhere;
 }
}

/* Size the toolbar against the player, which can sit in a narrow desktop column. */
[data-tpm-live-player] {
 container-type: inline-size;
}

[data-tpm-live-player] .tpm-tv-player__bar,
[data-tpm-live-player] .tpm-tv-player__actions,
[data-tpm-live-player] .tpm-tv-transfer__buttons {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 6px;
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
}

[data-tpm-live-player] .tpm-tv-player__actions,
[data-tpm-live-player] .tpm-tv-transfer__buttons {
 flex: 0 1 auto;
 width: auto;
}

[data-tpm-live-player] :is(.tpm-player-action, [data-tpm-cast], [data-tpm-airplay]):not([hidden]) {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 flex: 0 0 auto;
 gap: 6px;
 width: max-content !important;
 min-width: 44px !important;
 min-height: 44px !important;
 max-width: 100%;
 padding: 8px 10px !important;
 box-sizing: border-box;
 white-space: nowrap !important;
 overflow-wrap: normal;
 word-break: normal;
}

[data-tpm-live-player] :is(.tpm-player-action, [data-tpm-cast], [data-tpm-airplay]) span {
 width: auto;
 max-width: none;
 white-space: inherit !important;
 overflow-wrap: normal;
 word-break: normal;
}

[data-tpm-live-player] :is(.tpm-player-action, [data-tpm-cast], [data-tpm-airplay]) :is(svg, i) {
 flex: none;
}

[data-tpm-live-player] .tpm-play-action:not([hidden]) {
 min-width: 76px !important;
}

[data-tpm-live-player] .tpm-tv-player__bar [hidden] {
 display: none !important;
}

[data-tpm-live-player] .tpm-casting-feedback {
 flex: 1 0 100%;
}

@container (max-width: 460px) {
 [data-tpm-live-player] .tpm-tv-player__bar {
  justify-content: flex-start;
 }
 [data-tpm-live-player] .tpm-tv-player__actions {
  flex-basis: 100%;
  justify-content: flex-start;
 }
}

@media (max-width: 600px) {
 .tpm-home-reference .tpm-broadcast-links {
  border-bottom: 0;
  padding-bottom: 0;
 }
}