/* radio.sala.company — styled after a late-70s 10-band shortwave portable (black body, brushed-metal
   scale strip, wide multi-band tuning window, rotary BAND / TUNING / VOLUME, slide switches).
   Desktop: radio left, station guide right. Phone: station guide with a mini-player; the radio slides up over it.
   The pixel font is for big display text only; small labels use the print font so they stay readable. */
:root {
  --room: #0d0e0f;
  --room2: #121314;
  --body1: #2a2b2d; --body2: #1f2022; --body-edge: #0a0a0b;
  --metal1: #d9dadc; --metal2: #9c9ea2;
  --guide: #1d1e20;
  --guide-deep: #111213;
  --row1: #28292c;
  --row2: #232427;
  --num: #3a3b40;
  --hi: #ff8a1f;          /* dial-pointer orange */
  --print: #e9e6dc;       /* white printing on the body */
  --lcd: #a5b08e; --lcd-ink: #1c2416;
  --lcd-lit: #f0b04e; --lcd-lit-ink: #2a1600;
  --text: #f1efea;
  --muted: #b3b1ab;
  --good: #5cff7a;
  --warn: #ffc14d;
  --bad: #ff5a4a;
  --blocked: #b6aed6;
  --untested: #8d8b86;
  --pixel: 'VT323', ui-monospace, Consolas, monospace;
  --print-font: "Helvetica Neue", Arial, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--room) repeating-linear-gradient(90deg, var(--room) 0 28px, var(--room2) 28px 56px);
  color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column;
}
button, select, input, textarea {
  font: inherit; color: inherit; background: var(--row2);
  border: 2px solid var(--num); border-radius: 4px; padding: 5px 10px;
}
select option, select optgroup { background: var(--guide); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--untested); }
button, .filebtn { cursor: pointer; }
button:hover, .filebtn:hover { border-color: var(--hi); }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, .ch:focus-visible, .knob:focus-visible { outline: 3px solid var(--hi); outline-offset: 2px; }
button:disabled { opacity: .4; cursor: default; border-color: var(--num); }
button.primary { background: var(--hi); border-color: var(--hi); color: #1a0d00; font-weight: 600; }
button.danger { color: var(--bad); }
button.on { background: var(--hi); border-color: var(--hi); color: #1a0d00; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; gap: 8px; align-items: center; padding: 8px 14px;
  background: var(--guide-deep); border-bottom: 3px solid var(--hi);
}
.brand { font: 700 20px/1 var(--print-font); color: var(--print); letter-spacing: .06em; white-space: nowrap; display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.brand-icon { width: 26px; height: 26px; flex: none; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #4a1a12; box-shadow: inset 0 0 0 2px #200a06; }
body.onair .brand-dot { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
#listSelect { min-width: 0; max-width: 320px; flex: 0 1 auto; }
.topbar button { white-space: nowrap; flex: none; }

/* ---------- layout ---------- */
.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 18px; padding: 18px; min-height: 0; }
.stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; overflow-y: auto; }

/* ---------- the radio ---------- */
.radio {
  position: relative; flex: none; display: flex; flex-direction: column; gap: 0;
  border-radius: 16px; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    linear-gradient(var(--body1), var(--body2));
  box-shadow: inset 0 0 0 2px var(--body-edge), inset 0 2px 0 3px rgba(255,255,255,.05), 0 20px 34px -16px rgba(0,0,0,.9);
}
/* brushed-metal strip holding the tuning window */
.radio-top {
  display: flex; gap: 14px; align-items: stretch; padding: 14px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.04) 1px 2px, transparent 2px 4px),
    linear-gradient(var(--metal1), var(--metal2));
  border-bottom: 3px solid var(--body-edge);
}
/* The dial window: band strip on top, what's playing in the middle (printed-on-glass style),
   tuning scale with the needle along the bottom. Lit warm when LIGHT is on. */
.scale-window {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px 6px; border-radius: 4px; color: var(--print);
  background: #0b0b0c; box-shadow: inset 0 0 0 2px #000, inset 0 3px 10px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.6);
  transition: background .3s;
}
body.fx .scale-window { background: radial-gradient(ellipse at 50% 55%, #2c2217, #0f0d0b 80%); }

.band-strip { display: flex; gap: 2px; border-bottom: 1px solid rgba(233,230,220,.18); padding-bottom: 5px; }
.band-btn {
  flex: 1; min-width: 0; padding: 2px 0; border: none; border-radius: 2px; background: none;
  font: 700 10px/1.1 var(--print-font); letter-spacing: .04em; color: rgba(233,230,220,.6); white-space: nowrap;
}
.band-btn em { display: block; font-style: normal; font-weight: 400; font-size: 9px; opacity: .7; }
.band-btn:nth-child(n+3) { color: rgba(232, 195, 90, .75); }
.band-btn:hover:not(:disabled) { color: var(--print); background: rgba(255,255,255,.06); }
.band-btn:disabled { opacity: .3; }
.band-btn.active { color: #1a0d00; background: var(--hi); }
body.fx .band-btn.active { box-shadow: 0 0 10px rgba(255,138,31,.5); }

.dial-info { display: flex; flex-direction: column; gap: 8px; font-family: var(--pixel); min-width: 0; }
.dial-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dial-logo { width: 44px; height: 44px; flex: none; border-radius: 4px; display: grid; place-items: center; background: rgba(255,255,255,.04); }
.dial-logo img { max-width: 40px; max-height: 40px; object-fit: contain; }
.dial-title { display: flex; flex-direction: column; min-width: 0; }
.dial-name { font-weight: normal; font-size: 30px; line-height: 1; color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vfdNum { color: rgba(255, 138, 31, .6); }
/* now playing: song / show title from the station */
.dial-np { font-size: 21px; line-height: 1.1; color: var(--print); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fx .dial-np { text-shadow: 0 0 6px rgba(255, 220, 160, .45); }
.dial-meta { font: 13px/1.3 var(--print-font); color: rgba(233,230,220,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.fx .dial-name { text-shadow: 0 0 8px rgba(255, 138, 31, .55); }
.dial-grid { display: grid; gap: 4px 6px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.vfd-cell { display: flex; flex-direction: column; min-width: 0; padding: 2px 6px; border-left: 1px solid rgba(233,230,220,.15); }
.vfd-k { font: 700 9px/1.2 var(--print-font); letter-spacing: .14em; color: rgba(233,230,220,.5); }
.vfd-cell b { font-weight: normal; font-size: 21px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--print); }
body.fx .vfd-cell b { text-shadow: 0 0 6px rgba(255, 220, 160, .35); }
.dial-info .lvl-good { color: var(--good); }
.dial-info .lvl-warn { color: var(--warn); }
.dial-info .lvl-bad { color: var(--bad); }
.dial-info .lvl-blocked { color: var(--blocked); }
.dial-info.standby .vfd-cell b, .dial-info.standby .dial-name { opacity: .5; }

/* tuning scale: the current guide numbered 1…n; click to tune there */
.tune-scale {
  --sl: 6px; --sr: 6px; /* where the scale starts / ends: the needle travels between them */
  position: relative; height: 30px; cursor: pointer; border-top: 1px solid rgba(233,230,220,.18);
  background: repeating-linear-gradient(90deg, rgba(233,230,220,.35) 0 1px, transparent 1px 2.5%) top / 100% 6px no-repeat,
              repeating-linear-gradient(90deg, rgba(233,230,220,.6) 0 1px, transparent 1px 12.5%) top / 100% 11px no-repeat;
  background-origin: content-box; padding: 0 var(--sr) 0 var(--sl);
}
.tune-nums i { position: absolute; top: 13px; transform: translateX(-50%); font: 600 10px/1 var(--print-font); font-style: normal; color: rgba(233,230,220,.7); }
.needle {
  position: absolute; top: -3px; bottom: 0; width: 3px; margin-left: -1px; border-radius: 2px;
  left: calc(var(--sl) + (100% - var(--sl) - var(--sr)) * var(--f, 0));
  background: var(--hi); box-shadow: 0 0 6px rgba(255, 138, 31, .8); transition: left .35s cubic-bezier(.3,.7,.2,1);
  pointer-events: none;
}
/* station controls under the dial: prev · pause · stop · next | mute · live · favorite */
.transport { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(233,230,220,.18); flex-wrap: wrap; }
/* sleep timer: looks like a transport key; the countdown lights up orange while it runs */
.t-sleep {
  height: 34px; display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 9px; cursor: pointer;
  background: linear-gradient(#2c2d30, #1b1c1e); border: 1px solid #000; border-radius: 5px; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--print); font: 700 13px/1 var(--print-font);
}
.t-sleep:hover, .t-sleep:focus-within { border-color: var(--hi); }
.t-sleep-ico { font-size: 15px; color: rgba(233,230,220,.7); }
.t-sleep select {
  border: none; background: transparent; color: inherit; font: inherit; padding: 0 2px; height: 100%; cursor: pointer;
}
.t-sleep select:focus-visible { outline: none; }
.t-sleep-left { font: 20px/1 var(--pixel); color: var(--hi); padding-right: 4px; min-width: 3.2em; text-align: right; font-weight: normal; }
.t-sleep.on { border-color: rgba(255,138,31,.6); }
.t-sleep.on .t-sleep-ico { color: var(--hi); }
body.fx .t-sleep.on .t-sleep-left { text-shadow: 0 0 6px rgba(255,138,31,.55); }
.transport button {
  min-width: 40px; height: 34px; padding: 0 10px; display: grid; place-items: center;
  font: 700 15px/1 var(--print-font); color: var(--print); letter-spacing: .06em;
  background: linear-gradient(#2c2d30, #1b1c1e); border: 1px solid #000; border-radius: 5px; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.06);
}
.transport button:hover:not(:disabled) { border-color: var(--hi); }
.transport button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 #000; }
.transport .t-main { min-width: 56px; font-size: 18px; color: var(--hi); }
.transport .t-sep { flex: 1; }
.transport button.on { color: #1a0d00; background: linear-gradient(#ffa34d, #e2700f); }
#tLive { font-size: 12px; color: rgba(233,230,220,.55); }
#tLive.behind { color: var(--bad); text-shadow: 0 0 6px rgba(255, 90, 74, .6); }
#tFav { font-size: 18px; }
#tFav.on { color: var(--hi); background: linear-gradient(#2c2d30, #1b1c1e); }
.leds { display: flex; flex-direction: column; justify-content: center; gap: 12px; flex: none; }
.led-wrap { display: flex; align-items: center; gap: 6px; }
.led-wrap small { font: 700 10px/1 var(--print-font); letter-spacing: .12em; color: #2b2c2e; }
.led { width: 11px; height: 11px; border-radius: 50%; background: #3b2a26; box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.6); }
.led.good { background: #59ff76; box-shadow: 0 0 9px #59ff76, inset 0 -1px 2px rgba(0,0,0,.3); }
.led.warn { background: #ffbf3f; box-shadow: 0 0 9px #ffbf3f; animation: blink 1s steps(2) infinite; }
.led.bad { background: #ff4a3a; box-shadow: 0 0 9px #ff4a3a; }
.led.pwr.on { background: #ff3b2a; box-shadow: 0 0 9px #ff3b2a; }
@keyframes blink { 50% { opacity: .35; } }

.radio-face { display: grid; grid-template-columns: minmax(140px, 0.55fr) minmax(0, 1.6fr); gap: 16px; padding: 16px; }
.speaker {
  position: relative; border-radius: 10px; min-height: 170px; overflow: hidden;
  background: #191a1b; box-shadow: inset 0 0 0 2px #0b0b0c, inset 0 4px 14px rgba(0,0,0,.7);
}
.holes {
  position: absolute; inset: 14px 14px 58px;
  background: radial-gradient(circle, #050505 0 38%, transparent 42%) 0 0 / 10px 10px;
  -webkit-mask: radial-gradient(ellipse at center, #000 62%, transparent 72%);
  mask: radial-gradient(ellipse at center, #000 62%, transparent 72%);
}
body.fx.playing .holes { animation: thump 0.5s ease-in-out infinite alternate; }
@keyframes thump { to { transform: scale(1.012); } }
.nameplate { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.nameplate b { font: 800 15px/1.1 var(--print-font); letter-spacing: .02em; color: var(--print); }
.nameplate small { font: 600 9px/1 var(--print-font); letter-spacing: .2em; color: rgba(233,230,220,.7); }

.panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }


/* rotary knobs */
.knobs { display: flex; justify-content: space-around; align-items: flex-end; gap: 10px; }
.knob-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.knob-wrap small { font: 700 10px/1 var(--print-font); letter-spacing: .16em; color: var(--print); }
.knob-val { font: 15px/1 var(--pixel); color: var(--hi); min-height: 15px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knob {
  --rot: 0deg; position: relative; border-radius: 50%; cursor: grab; touch-action: none; user-select: none;
  transform: rotate(var(--rot)); transition: transform .12s;
  background:
    radial-gradient(circle at 50% 45%, #4a4b4f 0 46%, transparent 47%),
    repeating-conic-gradient(#2b2c2f 0 6deg, #47484c 6deg 12deg);
  box-shadow: 0 4px 0 #060606, 0 6px 12px rgba(0,0,0,.6), inset 0 0 0 2px #121214;
}
.knob:active { cursor: grabbing; }
.knob i { position: absolute; left: 50%; top: 9%; width: 4px; height: 26%; margin-left: -2px; border-radius: 2px; background: var(--print); }
.knob.band { width: 64px; height: 64px; }
.knob.band i { background: var(--hi); }
.knob.tuning { width: 92px; height: 92px; }
.knob.tuning::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6b6c70, #2f3033); }
.knob.vol { width: 64px; height: 64px; }

/* slide switches + rubber keys */
.switches { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.slide {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 3px 8px; align-items: center;
  padding: 6px 10px; background: #18191b; border: 1px solid #0b0b0c; border-radius: 6px; color: var(--print);
}
.slide small { grid-column: 1 / -1; font: 700 10px/1 var(--print-font); letter-spacing: .16em; text-align: left; }
.slide .track { width: 46px; height: 14px; border-radius: 3px; background: #050505; box-shadow: inset 0 1px 3px #000; position: relative; }
.slide .track i { position: absolute; top: -2px; left: 1px; width: 20px; height: 18px; border-radius: 3px; background: linear-gradient(#cfd0d3, #8d8f93); box-shadow: 0 1px 2px #000; transition: left .15s; }
.slide.on .track i { left: 25px; }
.slide .pos { display: flex; gap: 8px; font: 700 10px/1 var(--print-font); letter-spacing: .08em; }
.slide .pos b:first-child { color: var(--print); }
.slide .pos b:last-child, .slide.on .pos b:first-child { color: rgba(233,230,220,.35); }
.slide.on .pos b:last-child { color: var(--hi); }
.slide:hover { border-color: var(--hi); }
.slide.on { background: #18191b; border-color: #0b0b0c; color: var(--print); font-weight: inherit; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.pill {
  font: 700 11px/1 var(--print-font); letter-spacing: .1em; color: var(--print); padding: 8px 10px;
  background: linear-gradient(#3c3d41, #26272a); border: 1px solid #0b0b0c; border-radius: 5px; box-shadow: 0 2px 0 #050505;
}
.pill:active { transform: translateY(1px); box-shadow: 0 1px 0 #050505; }
.pill.on { background: linear-gradient(#ffa34d, #e2700f); color: #1a0d00; border-color: #0b0b0c; }
.pill b { font-weight: 400; }

.overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  background: rgba(17, 18, 19, .96); border: 3px solid var(--hi); border-radius: 6px;
  padding: 12px 18px; max-width: 90%; width: max-content; text-align: center; font: 24px/1.15 var(--pixel); letter-spacing: .02em;
}
.overlay b { color: var(--hi); font-weight: normal; font-size: 28px; }
.overlay .muted { color: var(--text); opacity: .85; font-size: 20px; }
.overlay .acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.overlay .acts button { font: 20px/1 var(--pixel); background: var(--hi); color: #1a0d00; border-color: var(--hi); padding: 6px 12px; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 8px; border-radius: 50%;
  border: 3px solid var(--num); border-top-color: var(--hi); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- station details (below the radio) ---------- */
.details { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--guide); border-radius: 8px; flex: none; }
.det-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#sourceSel { max-width: 100%; min-width: 0; flex: 1 1 220px; }
.rate { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rate-lbl { font: 600 12px/1 var(--print-font); color: var(--muted); margin-right: 4px; letter-spacing: .04em; text-transform: uppercase; }
.details button { padding: 4px 10px; font-size: 13px; }
.stats { font-size: 13px; }
.stats div { margin: 3px 0; overflow-wrap: anywhere; }
.stats .badge { margin-right: 6px; }

/* ---------- station guide ---------- */
.guide {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  background: var(--guide); border-radius: 10px; box-shadow: 0 0 0 5px var(--guide-deep), 0 18px 30px -14px rgba(0,0,0,.7);
}
.guide-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 10px; background: var(--hi); color: #1a0d00; font: 24px/1 var(--pixel); letter-spacing: .06em; }
.guide-head .count { font-size: 19px; }
.filters { padding: 6px; display: flex; flex-direction: column; gap: 5px; background: var(--guide-deep); }
.filters input, .filters select, .filters button { padding: 3px 6px; font-size: 13px; }
.frow { display: flex; gap: 5px; align-items: center; }
.frow select { flex: 1; min-width: 0; }
#search { flex: 1; min-width: 0; }
#testBtn { white-space: nowrap; flex: none; }
.filters .scope { flex: 0 0 auto; width: auto; max-width: 140px; }
/* quick browse chips: one scrolling row */
.chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; padding: 3px 10px; font-size: 12px; border-radius: 999px; border-width: 1px; background: var(--row1); }
/* "you're browsing results, not your list" */
.browse-bar { display: flex; gap: 6px; align-items: center; padding: 5px 8px; background: #2b2216; border-top: 1px solid #4a3a22; font-size: 13px; }
.browse-bar .bb-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.browse-bar .bb-label b { color: var(--text); }
.browse-bar button { padding: 2px 8px; font-size: 12px; flex: none; }

.list { flex: 1; overflow-y: auto; position: relative; scrollbar-color: var(--num) var(--guide-deep); }
#listInner { position: relative; }
.ch {
  position: absolute; left: 0; right: 0; height: 70px;
  display: flex; align-items: center; cursor: pointer; border-top: 2px solid var(--guide-deep);
  font-family: var(--pixel);
}
.ch-num { width: 62px; align-self: stretch; display: grid; place-items: center; background: var(--num); font-size: 22px; flex: none; }
.ch-body { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; background: var(--row1); }
.ch:nth-child(even) .ch-body { background: var(--row2); }
.ch:hover .ch-body { background: #34353a; }
.ch.active .ch-num, .ch.active .ch-body { background: var(--hi); color: #1a0d00; }
.ch.active .grp, .ch.active .badge, .ch.active .badge i { color: #1a0d00; }
.logo {
  width: 38px; height: 38px; flex: none; border-radius: 4px; overflow: hidden;
  background: #0b0b0c; display: grid; place-items: center; color: #55565a; font-size: 18px;
}
.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.info { flex: 1; min-width: 0; }
.name {
  font-size: 21px; line-height: .95; text-transform: uppercase; letter-spacing: .02em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }
.grp { color: var(--muted); font: 12px/1.2 var(--print-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.star { background: none; border: none; font-size: 20px; padding: 4px 6px; color: var(--untested); font-family: system-ui; }
.star:hover { color: var(--hi); }
.star.on { color: var(--hi); }
.ch.active .star, .ch.active .star.on { color: #1a0d00; }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); font: 22px var(--pixel); }
.empty button { margin-top: 12px; font: 20px var(--pixel); }

.badge { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--print-font); color: var(--muted); white-space: nowrap; flex: none; }
.badge i { font: 13px/1 var(--pixel); font-style: normal; letter-spacing: 1px; color: var(--untested); }
.badge.good, .badge.good i { color: var(--good); }
.badge.warn, .badge.warn i { color: var(--warn); }
.badge.bad, .badge.bad i { color: var(--bad); }
.badge.blocked, .badge.blocked i { color: var(--blocked); }

.guide-foot {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px; overflow: hidden; white-space: nowrap;
  background: var(--guide-deep); border-top: 2px solid var(--guide); font: 12px/1.2 var(--print-font);
}
#testProgress { color: var(--hi); flex: none; }
#testProgress:empty { display: none; }
.legend { display: flex; gap: 10px; flex: 1; min-width: 0; overflow: hidden; justify-content: space-between; }
.legend .badge { font-size: 11px; gap: 3px; }
.legend .badge i { letter-spacing: 0; }
.help {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 4px; vertical-align: 2px;
  border-radius: 50%; background: var(--guide); color: var(--hi); font-size: 17px; cursor: help;
}

.ch.cursor .ch-body, .ch.cursor .ch-num { box-shadow: inset 0 0 0 3px var(--hi); }
.ch.cursor:not(.active) .ch-body { background: #3a3b40; }
.list:focus { outline: none; }
.list:focus-visible { box-shadow: inset 0 0 0 2px var(--hi); }

/* Working stations (on air or weak): brushed-silver rows with dark print. Untested stay charcoal. */
.ch.ok:not(.active) .ch-num { background: linear-gradient(#a9acb1, #8e9196); color: #16171a; }
.ch.ok:not(.active) .ch-body { background: linear-gradient(#d6d8db, #bfc2c6); color: #16171a; }
.ch.ok:not(.active):nth-child(even) .ch-body { background: linear-gradient(#cdd0d3, #b6b9bd); }
.ch.ok:not(.active):hover .ch-body { background: linear-gradient(#e2e4e7, #cbced2); }
.ch.ok:not(.active).cursor .ch-body { background: linear-gradient(#e2e4e7, #cbced2); }
.ch.ok:not(.active) .grp { color: #2e3034; }
/* dark enough for 4.5:1 on silver */
.ch.ok:not(.active) .badge.good, .ch.ok:not(.active) .badge.good i { color: #065a1b; }
.ch.ok:not(.active) .badge.warn, .ch.ok:not(.active) .badge.warn i { color: #6b3c00; }
.ch.ok:not(.active) .badge.checking { color: #7a3400; }
.ch.ok:not(.active) .star { color: #5d6066; }
.ch.ok:not(.active) .star.on { color: #c25600; }
.ch.ok .logo { background: #1b1c1e; }
/* Off air / blocked: dark brown rows */
.ch.dead .ch-num { background: #3a2617; color: #a8896f; }
.ch.dead .ch-body { background: #2a1b10; color: #a8896f; }
.ch.dead:nth-child(even) .ch-body { background: #25180e; }
.ch.dead:hover .ch-body { background: #36241a; }
.ch.dead .grp { color: #846650; }
.ch.dead .logo { background: #1a1009; }
.ch.dead .logo img { filter: sepia(1) brightness(.6); opacity: .6; }
.ch.dead .star:not(.on) { color: #6e5442; }
.ch.dead.cursor:not(.active) .ch-body { background: #3a2617; }
.ch.lit .ch-body, .ch.lit .ch-num { animation: lightup 1.2s ease-out both; }
@keyframes lightup { 0% { box-shadow: inset 0 0 0 2px var(--good); } 60% { box-shadow: inset 0 0 0 2px var(--good); } }
.badge.checking { color: var(--hi); }
.badge.queued, .badge.queued i { color: #77777b; }
.mini-spin {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none;
  border: 2px solid rgba(255, 138, 31, .3); border-top-color: var(--hi); animation: spin .8s linear infinite;
}
.ch.checking .ch-num { animation: numpulse 1s ease-in-out infinite; }
@keyframes numpulse { 50% { color: var(--hi); } }
.scanbar { height: 3px; background: var(--guide-deep); position: relative; overflow: hidden; flex: none; }
.scanbar.on::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 35%; left: -35%;
  background: linear-gradient(90deg, transparent, var(--hi), transparent);
  animation: scan 1.3s linear infinite;
}
@keyframes scan { to { left: 100%; } }

/* ---------- dialogs ---------- */
dialog {
  background: var(--guide); color: var(--text); border: 3px solid var(--hi); border-radius: 8px;
  padding: 18px; width: min(520px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog h3 { margin: 4px 0 8px; font: 30px/1 var(--pixel); color: var(--hi); font-weight: normal; letter-spacing: .04em; }
dialog label { display: block; margin: 12px 0 4px; color: var(--muted); }
dialog label.check { display: flex; gap: 8px; align-items: flex-start; color: var(--text); }
dialog input[type=text], dialog input[type=url], dialog input[type=search], dialog input[type=number], dialog textarea, dialog select { width: 100%; }
dialog .rbx { margin-top: 6px; }
dialog a { color: var(--hi); }
dialog textarea { min-height: 80px; font: 12px/1.4 ui-monospace, Consolas, monospace; }
.filebtn { display: inline-block; margin: 0 !important; color: var(--text) !important; background: var(--row2); border: 2px solid var(--num); border-radius: 4px; padding: 5px 10px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.err { color: var(--bad); min-height: 1em; margin-top: 8px; }
dialog.wide { width: min(680px, calc(100vw - 32px)); }
.dlg-acts .spacer { flex: 1; }
/* songs heard */
.songs { max-height: min(60vh, 520px); overflow-y: auto; margin-top: 10px; border-top: 1px solid var(--num); }
.song-day { position: sticky; top: 0; background: var(--guide); padding: 8px 0 4px; font: 700 11px/1 var(--print-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hi); }
.song { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #2a2b2e; }
.song-time { font: 13px/1 var(--print-font); color: var(--muted); }
.song-text { min-width: 0; overflow-wrap: anywhere; }
.song-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.song-links { display: flex; gap: 8px; font-size: 12px; white-space: nowrap; }
.songs .empty { font: 14px/1.4 var(--print-font); }
/* help */
.help-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 0; }
.help-grid dt { font: 700 12px/1.4 var(--print-font); letter-spacing: .08em; color: var(--hi); text-transform: uppercase; }
.help-grid dd { margin: 0; }
.hl-ok { background: linear-gradient(#d6d8db, #bfc2c6); color: #16171a; padding: 0 4px; border-radius: 3px; }
.hl-off { background: #2a1b10; color: #c8a98f; padding: 0 4px; border-radius: 3px; }

/* phone-only pieces, hidden on bigger screens */
.mini, .sheet-close { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; max-width: calc(100vw - 32px);
  background: var(--guide); border: 3px solid var(--hi); border-radius: 6px; padding: 6px 16px;
  font: 22px var(--pixel); letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .needle, .knob { transition: none; }
  .spinner, .mini-spin { animation-duration: 2.4s; }
  .led.warn, body.fx.playing .holes, .ch.lit .ch-body, .ch.lit .ch-num, .ch.checking .ch-num { animation: none; }
  .scanbar.on::after { animation: none; left: 0; width: 100%; opacity: .6; }
}

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .radio-face { grid-template-columns: 1fr; }
  .speaker { min-height: 0; height: 70px; }
  .holes { inset: 10px 200px 10px 10px; -webkit-mask: none; mask: none; }
  .nameplate { left: auto; right: 14px; bottom: 50%; transform: translateY(50%); align-items: flex-end; }
}

/* ---------- phone: the station guide fills the screen, a mini-player sits at the bottom,
   and the radio slides up over everything when you tap the mini-player ---------- */
@media (max-width: 820px) {
  body { height: 100dvh; background: var(--guide-deep); overflow: hidden; }
  .topbar { padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
  .brand { font-size: 16px; flex: 1; } .brand-dot { display: none; }
  #listSelect { order: 9; flex: 1 1 100%; max-width: none; }
  #songsBtn { padding: 5px 8px; }
  .layout { display: flex; flex-direction: column; padding: 0; gap: 0; flex: 1; min-height: 0; }
  .guide { flex: 1; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
  .list { flex: 1; height: auto; }
  .stage {
    position: fixed; inset: 0; z-index: 30; gap: 10px; padding: 0 0 calc(16px + env(safe-area-inset-bottom));
    background: var(--guide-deep); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(100%); transition: transform .25s ease-out; visibility: hidden;
  }
  body.sheet-open .stage { transform: none; visibility: visible; }
  .sheet-close {
    display: block; position: sticky; top: 0; z-index: 7; width: 100%; padding: 10px; border: none; border-radius: 0;
    background: var(--guide-deep); color: var(--hi); font: 700 13px/1 var(--print-font); letter-spacing: .1em; text-align: center;
    border-bottom: 2px solid var(--hi);
  }
  .details { margin: 0 10px; }
  .mini {
    display: flex; align-items: center; gap: 6px; flex: none; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(var(--body1), var(--body2)); border-top: 3px solid var(--hi);
  }
  .mini-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px; border: none; background: none; text-align: left; }
  .mini-logo { width: 40px; height: 40px; flex: none; border-radius: 4px; background: #0b0b0c; display: grid; place-items: center; }
  .mini-logo img { max-width: 36px; max-height: 36px; object-fit: contain; }
  .mini-text { min-width: 0; display: flex; flex-direction: column; }
  .mini-text b { font: 20px/1.05 var(--pixel); color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-text span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini.live .mini-text span { color: var(--text); }
  .mini-btn { flex: none; width: 44px; height: 44px; padding: 0; font-size: 18px; border-radius: 50%; background: #18191b; border: 1px solid #000; color: var(--print); }
  #miniPlay { width: 50px; height: 50px; color: var(--hi); font-size: 22px; }
  .mini-btn.on { background: var(--hi); color: #1a0d00; }
  .radio { border-radius: 0; }
  .transport { gap: 4px; }
  .transport button { min-width: 36px; padding: 0 6px; }
  #tLive { font-size: 11px; }
  .radio-top { padding: 8px; gap: 8px; }
  .scale-window { padding: 6px 8px 4px; gap: 6px; }
  .band-btn { font-size: 9px; }
  .band-btn em { display: none; }
  .dial-logo { width: 34px; height: 34px; } .dial-logo img { max-width: 30px; max-height: 30px; }
  .dial-name { font-size: 24px; }
  .dial-meta { font-size: 11px; }
  .dial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dial-grid .vfd-cell:nth-child(n+4) { display: none; }
  .vfd-cell b { font-size: 18px; }
  .leds { gap: 8px; }
  .led-wrap small { display: none; }
  .radio-face { padding: 10px; gap: 10px; }
  .speaker { display: none; }
  .knob.tuning { width: 74px; height: 74px; }
  .knob.band, .knob.vol { width: 54px; height: 54px; }
  .pills { justify-content: flex-start; }
  .ch-num { width: 50px; font-size: 19px; }
  .frow4 { flex-wrap: wrap; }
  .frow4 select { flex: 1 1 40%; }
  .help-grid { grid-template-columns: 1fr; gap: 2px; }
  .help-grid dd { margin-bottom: 8px; }
  .song { grid-template-columns: 52px minmax(0, 1fr); }
  .song-links { grid-column: 2; }
}