/* 60-radio.css — RADIO section (#sec-radio): internet-radio source console.
   Reuses the chassis recipe (panel gradient + bezel, recessed wells, mono
   readouts) and the shared .panel / .btn / .badge / .chip / .switch / .empty
   components. Amber is the only working accent; red is ON AIR only and never
   appears here. */

#sec-radio > .sec-head::before{ content:"10/"; }

#sec-radio .panel + .panel{ margin-top:16px; }
#sec-radio .btn .ico,
#sec-radio .rd-dur .ico{ width:13px; height:13px; vertical-align:-2px; margin-right:6px; }
#sec-radio .btn.small .ico{ margin-right:5px; }
#sec-radio .btn.danger .ico{ margin-right:0; }

/* ---- now playing banner ---- */
.radio-banner{
  display:flex; align-items:center; gap:14px;
}
.radio-banner .spacer{ flex:1; }
.rb-mark{ color:var(--accent-dim); flex:none; }
.rb-mark svg{ width:34px; height:34px; display:block; }
.rb-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rb-kind{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.rb-title{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:.04em; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rb-sub{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
/* active radio / program wear an amber keyline — never red */
.radio-banner.radio,
.radio-banner.program{
  border-color:var(--accent-dim);
  box-shadow:var(--bezel), 0 0 0 1px rgba(245,165,36,.18), 0 0 16px rgba(245,165,36,.06), var(--shadow-1);
}
.radio-banner.radio .rb-mark,
.radio-banner.program .rb-mark{ color:var(--accent); }
.radio-banner.idle .rb-kind{ color:var(--muted); }

/* ---- search ---- */
.rs-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.rs-form .rs-q{ flex:2 1 240px; min-width:180px; }
.rs-form .rs-tag{ flex:1 1 120px; min-width:110px; }
.rs-form .btn{ flex:none; }

.rs-results{
  display:flex; flex-direction:column;
  margin-top:12px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--input-bg);
  box-shadow:var(--well-inset);
  overflow:hidden;
}

/* shared row: search result + saved station */
.rr, .rd-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-bottom:1px solid var(--hairline);
  min-width:0;
}
.rs-results .rr:last-child,
.rd-list .rd-row:last-child{ border-bottom:none; }
.rr:nth-child(odd), .rd-row:nth-child(odd){ background:rgba(255,255,255,.015); }
.rr:hover, .rd-row:hover{ background:#1E2026; }

.rr-fav{
  width:30px; height:30px; flex:none; border-radius:var(--radius-sm);
  object-fit:cover; background:var(--bg-deep);
  border:1px solid var(--line);
}
.rr-fav.ph{
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-dim);
}
.rr-fav.ph svg{ width:20px; height:14px; }

.rr-main{ flex:1; min-width:0; }
.rr-name{
  font-weight:600; font-size:14px; color:var(--text);
  display:flex; align-items:center; gap:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rr-meta{
  font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:1px;
}
.rr-tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.rr-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--muted);
  border:1px solid var(--line); border-radius:3px; padding:1px 5px;
}
.rr-actions{ display:flex; gap:6px; flex-wrap:wrap; flex:none; align-items:center; }

/* ---- saved stations ---- */
.rd-durbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:12px;
}
.rd-durs{ display:inline-flex; gap:0;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--bezel);
}
.rd-dur{
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:var(--muted);
  background:var(--key-face);
  border:none; border-right:1px solid var(--line);
  padding:6px 12px; cursor:pointer;
  transition:color var(--t-fast), background var(--t-fast);
}
.rd-dur:last-child{ border-right:none; }
.rd-dur:hover{ color:var(--text); }
.rd-dur.on{
  color:var(--ink-on-accent);
  background:var(--key-face-amber);
}
.rd-dur:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.rd-list{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--input-bg);
  box-shadow:var(--well-inset);
  overflow:hidden;
}
.rd-row.airing{ box-shadow:inset 3px 0 0 var(--accent); }
.rd-home{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--muted); font-size:11.5px;
}
.rd-home .ico{ width:12px; height:12px; color:var(--accent-dim); }
.rd-home:hover{ color:var(--accent); text-decoration:none; }

.chip.on{ color:var(--accent); border-color:var(--accent-dim); }

.rd-add{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--hairline);
}
.rd-add .rd-add-name{ flex:1 1 160px; min-width:130px; }
.rd-add .rd-add-url{ flex:2 1 240px; min-width:180px; }
.rd-add .btn{ flex:none; }

/* ---- program sequencer ---- */
.radio-program .pg-steps{
  display:flex; flex-direction:column;
  margin-top:12px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--input-bg);
  box-shadow:var(--well-inset);
  overflow:hidden;
}
.radio-program .pg-steps .empty{ padding:20px 12px; }
.pg-step{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-bottom:1px solid var(--hairline);
  min-width:0;
}
.pg-step:last-child{ border-bottom:none; }
.pg-step:nth-child(odd){ background:rgba(255,255,255,.015); }
.pg-step .spacer{ flex:1; }
.pg-num{
  font-size:12px; color:var(--accent-dim); flex:none;
  min-width:18px; text-align:right;
}
.pg-name{
  font-size:13.5px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.pg-durlabel{ font-size:11.5px; color:var(--muted); flex:none; }
.pg-dur{ padding:4px 8px; font-size:12.5px; flex:none; }
.pg-move{ display:inline-flex; gap:4px; flex:none; }
.pg-move .btn.small{ padding:4px 7px; }

.pg-add{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-top:12px;
}
.pg-add select{ flex:1 1 130px; min-width:120px; }
.pg-add .btn{ flex:none; }

.pg-loop-cap{ font-size:12.5px; color:var(--muted); }
.switch.inline{ vertical-align:middle; }

/* ---- responsive ---- */
@media (max-width:640px){
  .rr-actions{ width:100%; }
  .radio-banner{ flex-wrap:wrap; }
  .radio-banner .btn{ width:100%; }
  .rd-durs{ flex-wrap:wrap; }
}