/* =====================================================================
   RADIO
   Two panels: the station shelf on the left, the player on the right,
   matching the site. Below 900px they stack and the shelf scrolls
   sideways instead, so nine stations never push the player off screen.
   ===================================================================== */
.a-radio-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.a-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(23, 17, 16, .92), rgba(12, 9, 8, .92));
}

/* --- station shelf ----------------------------------------------------- */
.a-stations { padding: 10px; display: flex; flex-direction: column; gap: 2px; }

.a-station {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted, #c8b9b1);
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.a-station:hover { background: rgba(255, 255, 255, .04); color: var(--fg); }

.a-station.is-active {
  background: rgba(249, 115, 22, .12);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .35);
}

.a-station-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, var(--ac) 0 2px, transparent 3px),
    linear-gradient(150deg, rgba(249, 115, 22, .18), transparent 70%);
}

.a-station.is-active .a-station-icon { border-color: rgba(249, 115, 22, .5); }

.a-station-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.a-station-txt b { font-size: 13.5px; color: inherit; }
.a-station-txt span {
  font-size: 11.5px;
  color: var(--muted, #c8b9b1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a-station-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted, #c8b9b1);
  opacity: .8;
}

/* --- player ------------------------------------------------------------ */
.a-player { padding: 18px; }

.a-player-top { display: flex; gap: 18px; align-items: center; }

.a-art-wrap {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0b0807;
}

.a-player-art { width: 100%; height: 100%; object-fit: cover; display: block; }

.a-now { min-width: 0; }
.a-now-label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ac);
}
.a-now-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.15;
  margin: 4px 0 6px;
}
.a-now-meta { font-size: 12.5px; color: var(--muted, #c8b9b1); }

.a-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  font-size: 11px;
  color: var(--muted, #c8b9b1);
  font-variant-numeric: tabular-nums;
}

.a-bar {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  cursor: pointer;
}

.a-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ac2), var(--ac));
}

.a-bar-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .18);
}

.a-controls { display: flex; align-items: center; gap: 10px; }

.a-ctrl {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

.a-ctrl:hover { background: rgba(255, 255, 255, .07); border-color: rgba(249, 115, 22, .4); }
.a-ctrl:active { transform: scale(.94); }
.a-ctrl.is-on { border-color: var(--ac); color: var(--ac); }

.a-ctrl-main {
  width: 52px;
  height: 52px;
  border-color: transparent;
  background: linear-gradient(180deg, var(--ac), var(--ac2));
  color: rgb(24, 13, 6);
  font-size: 16px;
  box-shadow: 0 10px 30px -10px rgba(249, 115, 22, .7);
}

.a-ctrl-main:hover { background: linear-gradient(180deg, var(--ac), var(--ac2)); filter: brightness(1.06); }

.a-vol { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.a-vol input { width: 96px; accent-color: var(--ac); }

/* --- tracklist ---------------------------------------------------------- */
.a-tracklist {
  margin-top: 16px;
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.a-track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted, #c8b9b1);
  text-align: left;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}

.a-track:hover { background: rgba(255, 255, 255, .04); color: var(--fg); }
.a-track.is-current { background: rgba(249, 115, 22, .12); color: var(--fg); }

.a-track-n {
  flex: 0 0 auto;
  width: 18px;
  font-size: 11px;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

.a-track-art {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  background: #0b0807;
}

.a-track-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.a-track-txt b { font-size: 13px; color: inherit; }
.a-track-txt span {
  font-size: 11px;
  color: var(--muted, #c8b9b1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a-track-time {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: .75;
  font-variant-numeric: tabular-nums;
}

/* --- no media host ------------------------------------------------------ */
/* With nowhere to fetch audio from, the shelf stands on its own and says
   what it is, instead of a play button that cannot work. */
.a-radio-quiet .a-radio-grid { grid-template-columns: minmax(0, 1fr); }
.a-radio-quiet .a-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px;
}
.a-radio-quiet .a-station { cursor: default; }
.a-radio-quiet .a-station:hover { background: none; color: var(--muted, #c8b9b1); }
.a-radio-note { margin-top: 14px; }

@media (max-width: 900px) {
  .a-radio-grid { grid-template-columns: minmax(0, 1fr); }
  .a-stations {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }
  .a-station { width: auto; flex: 0 0 auto; }
  .a-station-txt span { display: none; }
  .a-player-top { flex-direction: column; align-items: flex-start; }
  .a-art-wrap { width: 96px; height: 96px; }
  .a-vol { display: none; }
}

/* --- browse mode -------------------------------------------------------
   Artwork hosted, audio not yet. The library is worth showing on its own,
   so the panel stays and only the transport goes. Give the tracklist the
   room the controls were using. */
.a-radio-browse .a-tracklist { max-height: 420px; margin-top: 18px; }
.a-radio-browse .a-track { cursor: default; }
.a-radio-browse .a-track:hover { background: rgba(255, 255, 255, .03); }
.a-radio-browse .a-now-title { margin-bottom: 2px; }