/* Radio shares the terminal's utility line; the video always has its own space. */
.desk { position: relative; width: min(980px, 100%); display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.desk .window { width: 100%; flex: none; min-width: 0; max-width: 980px; }
.foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px; }
.auto-note { white-space: nowrap; }
.radio-controls { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; justify-content: flex-end; color: var(--dim); }
.radio-controls button { background: transparent; border: 1px solid var(--rule); border-radius: 4px; color: var(--green); font: inherit; font-size: 11px; white-space: nowrap; padding: 4px 8px; min-height: 30px; cursor: pointer; }
.radio-controls button:disabled { opacity: .5; cursor: default; }
.radio-controls button:focus-visible, .radio-controls input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.radio-track { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; min-width: 0; font-size: 11px; }
.radio-controls { flex-wrap: wrap; }
.radio-live-status { color: var(--green); font-size: 11px; }
.radio-live-status:empty { display: none; }
.radio-controls input { width: 58px; accent-color: var(--green); flex: none; }
.radio-video { position: absolute; left: calc(100% + 12px); bottom: 0; width: 202px; flex: none; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--bg); }
.radio-video[hidden] { display: none; }
.radio-video-label { color: var(--dim); padding: 5px 8px; font-size: 10px; }
#youtube-player, #youtube-player iframe { display: block; width: 200px; height: 200px; border: 0; }
/* Keep the terminal centered; use the space below when its right margin is too narrow. */
@media (max-width: 1423px) {
  body:has(.radio-video:not([hidden])) { overflow: auto; }
  .desk { flex-direction: column; align-items: center; }
  .radio-video { position: static; }
  .desk .window { width: 100%; flex: none; }
  .desk:has(.radio-video:not([hidden])) .window { height: min(680px, calc(100dvh - 294px)); min-height: 260px; }
}
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .desk { position: fixed; top: var(--viewport-top, 0px); left: 0; width: 100%; height: var(--viewport-height, 100dvh); gap: 0; }
  .desk .window { position: static; flex: 1; height: auto; min-height: 0; }
  .desk:has(.radio-video:not([hidden])) .window { height: auto; min-height: 0; }
  .radio-video { flex: none; margin: 4px 0 max(4px, env(safe-area-inset-bottom)); }
  .radio-video-label { display: none; }
  .foot { padding-left: 0; gap: 3px; }
  .auto-note { font-size: 10px; }
  .radio-controls { flex-basis: 100%; justify-content: flex-start; }
  .radio-track { flex: 1; max-width: none; }
  .radio-controls button { min-height: 36px; }
  .radio-controls input { width: 64px; }
}