/* YouTube uses the receiver's existing green display and controls. */
#retroChannel[role=button]{cursor:pointer;outline-offset:2px}
#retroChannel[role=button]:focus-visible{outline:2px solid #d9ff79}
body.receiverYoutubeMode #countryImageButton{justify-content:space-between}
body.receiverYoutubeMode #countryImageButton .countryFlagImage,
body.receiverYoutubeMode #pickerList .countryFlagImage{display:none!important}
body.receiverYoutubeMode .radioArtistLinks{display:none!important}
#receiverYoutubeDock{box-sizing:border-box;width:min(640px,calc(100% - 24px));margin:18px auto 24px;padding:12px;background:#08171e;border:1px solid #456b5b;border-radius:10px;color:#d4e8d5;font:13px/1.4 system-ui}
#receiverYoutubeDock iframe,#receiverYoutubeMount{display:block;width:100%;height:340px;min-width:200px;min-height:200px;border:0;background:#020906}
#receiverYoutubeDock p{margin:10px 0 5px}
#receiverYoutubeDock a{color:#d0efba;text-underline-offset:3px}
body.receiverYoutubeMode #receiver .refStation{overflow:hidden!important}
body.receiverYoutubeMode #receiver .refStation .tunerLabels>span:first-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:65%}
body.receiverYoutubeMode #receiver .refStation .retroText #retroTrack{white-space:nowrap!important;text-overflow:ellipsis!important}
@media(max-width:700px){#receiverYoutubeDock iframe,#receiverYoutubeMount{height:240px}#receiverYoutubeDock{margin-top:10px}}
@media(max-height:500px) and (orientation:landscape){#receiverYoutubeDock iframe,#receiverYoutubeMount{height:220px}}

/* Keep YouTube's player on the cabinet, alongside the existing receiver display. */
.referenceSurface > #receiverYoutubeDock {
 position:absolute;
 z-index:6;
 top:23%;
 right:1%;
 width:clamp(220px,28cqw,420px);
 margin:0;
 padding:4px;
}
#receiverYoutubeDock iframe,#receiverYoutubeMount {height:200px}
#receiverYoutubeDock p {margin:4px 4px 0}
#receiverYoutubeDock a {display:inline-block;margin:0 4px}
#receiverYoutubeDock a[hidden] {display:none}
body.compactRadio .referenceSurface > #receiverYoutubeDock {
 position:static;
 grid-area:youtube;
 transform:none;
 width:100%;
}
body.compactRadio.retroMode.receiverYoutubeMode .referenceRadio > .referenceSurface:has(> #receiverYoutubeDock) {
 grid-template-areas:
  "hero hero hero hero"
  "station station station station"
  "youtube youtube youtube youtube"
  "search search search search"
  "prev play play next"
  "favorites favorites recent recent"
  "volume volume volume volume"
  "info info settings full"
  "presets presets presets presets" !important;
}
@media (max-width:700px) and (orientation:portrait) {
 body.compactRadio.retroMode.receiverYoutubeMode .referenceRadio > .referenceSurface:has(> #receiverYoutubeDock) {
  grid-template-areas:
   "station station station station"
   "youtube youtube youtube youtube"
   "prev play play next"
   "volume volume volume volume"
   "presets presets presets presets"
   "search search search search"
   "favorites favorites recent recent"
   "info info settings settings"
   "hero hero hero hero" !important;
 }
}