/* Radio Arcade — "98" theme.
   Hand-authored Windows 98 look: grey, beveled borders, 3D ridges. */
:root {
  --bg: #008080;
  --surface: #c0c0c0;
  --fg: #000;
  --shadow: #808080;
  --highlight: #fff;
  --accent: #000080;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Tahoma, "Segoe UI", Verdana, "Liberation Sans", "DejaVu Sans", "Noto Sans", sans-serif; background: var(--bg); color: var(--fg); }
.container { max-width: 960px; margin: 0 auto; padding: 1rem; }
.site-header {
  background: var(--surface); padding: .4rem 1rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.site-header h1 { margin: 0; font-size: 1.2rem; }
.site-header h1 a { color: inherit; text-decoration: none; }
.site-header nav a { color: var(--accent); text-decoration: underline; margin-left: .6rem; }
main { padding: 1rem 0; }
h1, h2, h3 { color: var(--accent); }
a { color: var(--accent); }
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.station-card {
  display: block; background: var(--surface); text-decoration: none; padding: .75rem;
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.station-card h2 { margin: 0 0 .2rem; font-size: 1rem; color: var(--fg); }
.station-card p { margin: 0; color: #333; font-size: .8rem; }
table.tracks { width: 100%; border-collapse: collapse; margin-top: .75rem; background: var(--surface); }
table.tracks th, table.tracks td { text-align: left; padding: .3rem .5rem; border: 1px solid var(--shadow); }
table.tracks th { background: var(--accent); color: var(--surface); }
.btn, button, input[type=submit] {
  font-family: inherit; font-size: .85rem; cursor: pointer;
  background: var(--surface); color: var(--fg); padding: .25rem .75rem;
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.btn:active, button:active { border-top-color: var(--shadow); border-left-color: var(--shadow); }
select { font-family: inherit; font-size: .85rem; background: var(--surface); border: 2px solid var(--shadow); }
.player { background: var(--surface); padding: .75rem; margin-top: 1rem; border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow); }
.honest-note { color: #333; font-size: .8rem; }
.badge { background: var(--accent); color: var(--highlight); padding: .1rem .4rem; font-size: .8rem; }
dl.stats dt { font-weight: bold; margin-top: .4rem; }
dl.stats dd { margin: 0 0 .3rem; }
.fav-btn { border: none; background: none; cursor: pointer; }
/* ============ Radio Arcade — 98 app polish ============ */
.app-shell { max-width: 960px; margin: 0 auto; padding: 0 1rem 2rem; }
.site-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
  padding: .5rem 1rem;
  background: var(--surface); border: 2px solid var(--highlight);
  border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
  position: sticky; top: 0; z-index: 50;
}
.brand-link { font-size: 1.3rem; font-weight: 700; color: var(--fg); text-decoration: none; }
.site-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--accent); text-decoration: underline; margin-left: .6rem; font-size: .9rem;
}
.site-nav a::before { content: ""; }
.site-toolbar { display: flex; align-items: center; }
.theme-switcher { display: inline-flex; align-items: center; gap: .4rem; }
.theme-label { font-size: .8rem; }
.mode-switcher { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; }
.mode-label { font-size: .8rem; }
.mode-switcher .mode-btn { min-width: 3.4rem; }
.theme-switcher select {
  background: #fff; border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow); color: var(--fg); font-family: inherit;
}
.site-main { padding: 1.25rem 0; }
.site-footer { margin-top: 2rem; padding-top: .6rem; border-top: 2px solid var(--shadow); font-size: .75rem; text-align: center; }
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.station-card {
  display: block; text-decoration: none; background: var(--surface); color: var(--fg);
  padding: .8rem; border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow); box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.station-card:hover { outline: 1px dotted var(--accent); }
.station-card h2 { margin: 0 0 .2rem; font-size: 1rem; color: var(--fg); }
.station-card p { margin: 0; font-size: .8rem; color: #333; }
table.tracks th, table.tracks td { text-align: left; padding: .4rem .5rem; border: 1px solid var(--shadow); }
table.tracks th { background: var(--accent); color: var(--surface); }
table.tracks tbody tr:hover { background: rgba(0,0,128,.08); }
.btn, button, input[type=submit] {
  font-family: inherit; font-size: .85rem; cursor: pointer; background: var(--surface); color: var(--fg);
  padding: .25rem .75rem; border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow); box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.btn:active, button:active { box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight); }
.fav-btn { }
.player { margin-top: 1rem; background: var(--surface); padding: 1rem; border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow); box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow); }
.now-playing strong { color: var(--fg); }
.transport { display: flex; gap: .5rem; margin-top: .5rem; }
.honest-note { font-size: .8rem; color: #333; }
.badge { border: 1px solid var(--accent); padding: 0 .4rem; font-size: .75rem; color: var(--accent); }

/* Radio Arcade — two-column layout (player left, content right) */
.main-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.player-column { flex: 0 0 300px; }
.content-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 760px) {
  .main-grid { flex-direction: column; }
  .player-column { flex: 1 1 auto; width: 100%; }
  .content-column { flex: 1 1 auto; width: 100%; }
}
/* iPod / Winamp-style player device */
.player { display: flex; flex-direction: column; gap: .6rem; margin-top: 0; }
.player-display {
  display: flex; gap: .6rem; align-items: center; padding: .5rem;
  background: var(--surface); border: 2px solid var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.player-trackinfo { display: flex; flex-direction: column; min-width: 0; }
.track-title { font-weight: bold; font-size: .95rem; color: var(--fg); word-break: break-word; }
.track-cell { min-width: 0; }
.track-meta { font-size: .8rem; color: var(--accent); margin-top: .15rem; line-height: 1.3; }
.track-meta-sep { opacity: .7; margin: 0 .2rem; }
.track-meta-dur { font-variant-numeric: tabular-nums; }
.track-album { font-size: .75rem; color: var(--fg); opacity: .75; }
.player-time { font-size: .7rem; margin-top: .15rem; }
.player-controls { display: flex; justify-content: center; gap: .35rem; }
.pbtn { min-width: 2.5rem; text-align: center; }
.player audio { width: 100%; }

/* Track row action buttons: side by side */
.track-actions { display: flex; gap: .35rem; align-items: center; white-space: nowrap; }
.track-actions .play-btn, .track-actions .fav-btn { margin: 0; }

/* ============================================================
   Radio Arcade — Windows 98 interaction & polish pass
   Beveled press-down, dotted focus highlight, tabular times.
   ============================================================ */
:root {
  --pressed:
    inset 1px 1px 0 var(--shadow),
    inset -1px -1px 0 var(--highlight);
}

/* --- Buttons: clear pressed feedback (already flips bevel) + transitions --- */
.btn, button, input[type=submit], .pbtn {
  transition: background .15s ease, box-shadow .1s ease, transform .05s ease;
}
.btn:hover, button:hover, .pbtn:hover {
  background: #d5d5d5;
}
.btn:active, button:active, input[type=submit]:active, .pbtn:active {
  transform: translate(1px, 1px);
  box-shadow: var(--pressed);
}
.fav-btn:active, .play-btn:active { transform: translate(1px, 1px); }
.fav-btn:hover { color: var(--accent); text-decoration: underline; }

/* --- Station cards: hover highlight + active press --- */
.station-card {
  transition: background .15s ease;
}
.station-card:hover {
  background: #d5d5d5;
  outline: 1px dotted var(--accent);
  outline-offset: 2px;
}
.station-card:active { box-shadow: var(--pressed); }
.station-card:hover h2 { color: var(--accent); }

/* --- Track rows + tabular time cells --- */
table.tracks tbody tr { transition: background .15s ease; }
table.tracks tbody tr:active { background: rgba(0,0,128,.14); }
table.tracks td.duration,
table.tracks td[data-dur],
.player-time,
.track-title,
.track-meta-dur { font-variant-numeric: tabular-nums; }

/* --- Theme select hover --- */
.theme-switcher select { transition: background .15s ease; }
.theme-switcher select:hover { background: #e8e8e8; }

/* --- Nav links: readable hover without underline jump --- */
.site-nav a {
  transition: color .15s ease, background .15s ease;
}
.site-nav a:hover { background: var(--accent); color: var(--surface); }

/* --- Focus-visible: classic Windows dotted rectangle --- */
a:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible,
select:focus-visible,
.station-card:focus-visible,
tr:focus-visible {
  outline: 1px dotted var(--accent);
  outline-offset: 2px;
}

/* --- Empty-state hooks: muted, on-theme --- */
.empty-state {
  color: #555;
  font-size: .85rem;
  padding: 1.25rem .5rem;
  text-align: center;
  border: 1px dashed var(--shadow);
  background: #d8d8d8;
}
table.tracks tbody tr:empty td,
table.tracks td[colspan] {
  color: #555;
  text-align: center;
  padding: 1rem;
}

/* --- Section rhythm & caption spacing --- */
.site-main h1, .site-main h2 {
  letter-spacing: .3px;
  margin-top: 1.5rem;
}
.site-main h1:first-child, .site-main h2:first-child { margin-top: 0; }
.site-footer, .theme-label, .honest-note, .badge { letter-spacing: .3px; }

/* --- Footer live metrics (CPU / RAM) --- */
.footer-metrics {
  font-variant-numeric: tabular-nums;
  opacity: .85;
  margin-left: .6em;
}
.footer-metrics::before { content: "•  "; opacity: .5; }

/* ============================================================
   Radio Arcade — full-page background visualiser + type selector
   ============================================================ */
#bg-viz {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}
.app-shell { position: relative; z-index: 1; }
.vis-type {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .3rem; margin-top: .5rem;
}
.vis-type-label {
  font-size: .78rem; color: var(--fg); opacity: .85;
}
.vbtn {
  font-family: inherit; font-size: .72rem; cursor: pointer;
  padding: .22rem .55rem; min-width: 2.6rem; text-align: center;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
  transition: background .15s ease, box-shadow .1s ease, transform .05s ease;
}
.vbtn:active { box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight); transform: translate(1px,1px); }
.vbtn[aria-pressed="true"] {
  background: var(--accent); color: var(--highlight);
  border-color: var(--accent);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.vbtn:focus-visible { outline: 1px dotted var(--accent); outline-offset: 2px; }

/* ============================================================
   Radio Arcade — custom audio transport (seek + play/pause)
   Win98 scrubber: beveled 3D groove, chunky beveled thumb.
   ============================================================ */
#player-audio { display: none; }

.player-seek { display: flex; align-items: center; padding: .1rem; }
.player-time {
  display: flex; align-items: baseline; justify-content: center;
  gap: .3rem; font-size: .72rem; color: var(--fg); margin-top: .1rem;
}
.player-time-cur { color: var(--accent); }

input[type="range"].seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; background: transparent; cursor: pointer; margin: 0;
}
/* recessed groove track */
input[type="range"].seek::-webkit-slider-runnable-track {
  height: 14px; background: #b8b8b8;
  border: 2px solid var(--highlight);
  border-top-color: var(--shadow); border-left-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: var(--seek, 0%) 100%;
}
input[type="range"].seek::-moz-range-track {
  height: 14px; background: #b8b8b8;
  border: 2px solid var(--highlight);
  border-top-color: var(--shadow); border-left-color: var(--shadow);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: var(--seek, 0%) 100%;
}
/* beveled 3D thumb */
input[type="range"].seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 16px; margin-top: -3px;
  background: var(--surface);
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
input[type="range"].seek::-moz-range-thumb {
  width: 10px; height: 14px; border-radius: 0;
  background: var(--surface);
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
input[type="range"].seek:hover::-webkit-slider-thumb { background: #d5d5d5; }
input[type="range"].seek:hover::-moz-range-thumb { background: #d5d5d5; }
input[type="range"].seek:active::-webkit-slider-thumb {
  border-top-color: var(--shadow); border-left-color: var(--shadow);
  border-right-color: var(--highlight); border-bottom-color: var(--highlight);
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight);
}
input[type="range"].seek:active::-moz-range-thumb {
  border-top-color: var(--shadow); border-left-color: var(--shadow);
  border-right-color: var(--highlight); border-bottom-color: var(--highlight);
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--highlight);
}

.pbtn-playpause { min-width: 3rem; }
input[type="range"].seek:focus-visible {
  outline: 1px dotted var(--accent); outline-offset: 2px;
}

/* ============================================================
   Radio Arcade — TV MODE (fullscreen immersive view on /tv)
   Windows 98 chrome: beveled panels, teal backdrop.
   ============================================================ */
body.tv-mode { height: 100vh; overflow: hidden; }
.tv-shell {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh;
}
.tv-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1rem; flex: 0 0 auto;
  background: var(--surface);
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.tv-exit {
  font-size: .85rem; color: var(--accent); text-decoration: none;
  padding: .35rem .55rem;
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  background: var(--surface);
}
.tv-exit:hover { background: #d5d5d5; }
.tv-toolbar { display: flex; align-items: center; gap: .25rem; }

.tv-screen {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: .5rem 1rem;
}
.tv-stage {
  display: flex; flex-direction: column; gap: 1.1rem; align-items: center;
  width: 100%; max-width: 78rem;
}

body.tv-mode .player {
  width: 100%; margin: 0;
  display: flex; flex-direction: column; gap: .8rem; align-items: center;
  text-align: center;
}
body.tv-mode .player-display {
  width: 100%; flex-direction: column; gap: .3rem;
  text-align: center; padding: .4rem 1rem;
  background: var(--surface);
  border: 2px solid var(--shadow); border-top-color: var(--highlight); border-left-color: var(--highlight);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
body.tv-mode .track-title { font-size: clamp(1.6rem, 5vw, 3.2rem); line-height: 1.1; }
body.tv-mode .track-artist { font-size: clamp(1rem, 2.6vw, 1.7rem); color: var(--accent); }
body.tv-mode .track-album { font-size: clamp(.85rem, 1.8vw, 1.1rem); color: var(--fg); opacity: .75; }
body.tv-mode .player-time { font-size: clamp(.9rem, 2vw, 1.3rem); }
body.tv-mode .player-seek { width: 100%; max-width: 46rem; padding: .4rem .1rem; }
body.tv-mode input[type="range"].seek { height: 26px; }
body.tv-mode input[type="range"].seek::-webkit-slider-thumb { width: 22px; height: 26px; }
body.tv-mode input[type="range"].seek::-moz-range-thumb { width: 20px; height: 22px; }

body.tv-mode .player-controls { display: flex; align-items: center; gap: 1rem; }
body.tv-mode .pbtn {
  min-width: 3.4rem; height: 3.4rem; font-size: 1.7rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
body.tv-mode .pbtn-playpause { min-width: 4.4rem; height: 4.4rem; font-size: 2.2rem; }

body.tv-mode .vis-type { gap: .5rem; margin-top: .4rem; }
body.tv-mode .vbtn { font-size: .95rem; padding: .55rem 1rem; min-width: 4.2rem; }
body.tv-mode .vis-type-label { font-size: 1rem; }

.tv-channels { width: 100%; max-width: 78rem; }
.tv-channels-label {
  font-size: .85rem; letter-spacing: 1px; color: var(--fg);
  text-align: center; margin-bottom: .55rem;
}
.tv-channels-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.tv-channel {
  font-family: inherit; cursor: pointer; text-align: left;
  padding: .75rem 1rem; min-width: 10rem; min-height: 3.4rem;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow); border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.tv-channel-name { font-size: 1.05rem; font-weight: 700; }
.tv-channel-count { font-size: .78rem; opacity: .75; }
.tv-channel:hover { background: #d5d5d5; }
.tv-channel.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.tv-channel-empty { opacity: .7; font-size: .95rem; }

.tv-footer {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 1rem; font-size: .72rem; opacity: .85;
  border-top: 1px solid var(--shadow);
}
.tv-hint { opacity: .7; }

body.tv-mode button:focus-visible,
body.tv-mode input:focus-visible,
body.tv-mode select:focus-visible,
body.tv-mode .tv-channel:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--highlight);
}

/* ============================================================
   Radio Arcade — ATC chatter mixer controls (live airport chatter)
   98: beveled grey selects, inset shadows, accent text.
   ============================================================ */
.atc-controls {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem; margin-top: .5rem;
}
.atc-label {
  font-size: .78rem; color: var(--fg); opacity: .85;
}
.atc-airport {
  font-family: inherit; font-size: .72rem; cursor: pointer;
  padding: .22rem .4rem; max-width: 15rem;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
.atc-airport:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.atc-blend-label { font-size: .78rem; color: var(--fg); opacity: .85; }
.atc-blend { width: 7rem; }
.atc-status {
  font-size: .72rem; color: var(--fg); opacity: .6; font-variant-numeric: tabular-nums;
}

/* ============================================================
   Radio Arcade — RADIO MODE (body.radio-mode)
   "Just a radio": station picker + a single PREVIOUS transport.
   Windows 98 bevels, sunken panels, one big raised button.
   ============================================================ */
body.radio-mode .radio-picker {
  max-width: 46rem; margin: 0 auto; padding: 1.5rem 0 2rem;
  text-align: center;
}
body.radio-mode .radio-heading {
  font-size: 1.4rem; margin: 0 0 .4rem; color: var(--fg);
}
body.radio-mode .radio-subhead {
  color: #333; font-size: .82rem; margin: 0 0 1.4rem;
}
body.radio-mode .radio-station-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
}
body.radio-mode .radio-station {
  font-family: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: .25rem;
  padding: .85rem 1rem; min-height: 3.6rem;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
body.radio-mode .radio-station:hover { outline: 1px dotted var(--accent); outline-offset: 1px; }
body.radio-mode .radio-station:active { box-shadow: var(--pressed); transform: translate(1px,1px); }
body.radio-mode .radio-station.active {
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px var(--highlight), 0 0 0 4px var(--accent);
}
body.radio-mode .radio-station-name { font-size: 1.05rem; font-weight: 700; }
body.radio-mode .radio-station-count { font-size: .78rem; color: #333; }
body.radio-mode .radio-empty { color: #333; font-size: .9rem; }

/* Radio player panel */
body.radio-mode .radio-player {
  display: flex; flex-direction: column; gap: .7rem;
  margin-top: 0; padding: .9rem;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
body.radio-mode .radio-player-display {
  padding: .45rem .6rem; text-align: center;
  background: #fff;
  border: 2px solid var(--shadow); border-right-color: var(--highlight);
  border-bottom-color: var(--highlight);
  box-shadow: inset 1px 1px 0 var(--shadow);
}
body.radio-mode .radio-player-trackinfo {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
body.radio-mode .radio-station-title {
  font-size: .7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px;
}
body.radio-mode .radio-now-title {
  font-size: 1.05rem; font-weight: 700; color: var(--fg); word-break: break-word;
}
body.radio-mode .radio-now-artist { font-size: .82rem; color: #333; }
body.radio-mode .radio-player .player-time { margin-top: .2rem; color: #333; }
/* The single transport: one BIG raised previous button + play/pause toggle. */
body.radio-mode .radio-controls {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
}
body.radio-mode .radio-prev {
  min-width: 8rem; min-height: 3.2rem; font-size: 1.3rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
body.radio-mode .radio-prev:hover { background: #d5d5d5; }
body.radio-mode .radio-prev:active { box-shadow: var(--pressed); transform: translate(1px,1px); }
body.radio-mode .radio-playpause {
  min-width: 3.2rem; min-height: 3.2rem; font-size: 1.1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--fg);
  border: 2px solid var(--highlight); border-right-color: var(--shadow);
  border-bottom-color: var(--shadow);
  box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--shadow);
}
body.radio-mode .radio-playpause:active { box-shadow: var(--pressed); transform: translate(1px,1px); }
body.radio-mode .radio-player .player-seek { padding: .1rem 0; }
body.radio-mode .radio-player input[type="range"].seek:focus-visible,
body.radio-mode .radio-station:focus-visible,
body.radio-mode .radio-prev:focus-visible,
body.radio-mode .radio-playpause:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
/* ATC chatter in radio mode: calm, quiet, below the transport. The panel is a
   flex-column so the row gap spaces it; drop the extra top margin. */
body.radio-mode .atc-controls.radio-atc {
  margin-top: 0;
  padding-top: .45rem;
  border-top: 1px solid #999;
}
body.radio-mode .atc-controls.radio-atc .atc-airport,
body.radio-mode .atc-controls.radio-atc .atc-blend {
  border: 1px solid #808080;
}