/* ============================================================
   RadioGrub — ui.css
   Shared bits the views lean on: toast, badges, artwork in cards,
   small type helpers, empty states.
   ============================================================ */

/* toast — replaces the old blocking alert() calls */
.rgToast{
  position:fixed; left:50%; bottom:104px; transform:translate(-50%,14px);
  z-index:400; max-width:min(92vw,420px);
  background:var(--surface3); color:#fff; font-weight:800; font-size:14px; line-height:1.35;
  padding:12px 18px; border-radius:999px; box-shadow:0 18px 40px rgba(0,0,0,.92);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.rgToast.show{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){ .rgToast{ transition:none; } }

/* type helpers */
.muted{ color:var(--muted); font-weight:650; }
.small{ font-size:12.5px; }
.linkBtn{
  background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-weight:900; color:var(--accentText);
}
.linkBtn:hover{ text-decoration:underline; }

.codeBlock{
  background:var(--surface3); color:#e7eaf0; border-radius:12px;
  padding:12px 14px; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.5;
}
code{
  background:var(--surface2); border:1px solid var(--line2); border-radius:6px;
  padding:1px 5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
}

/* empty / not-found states */
.emptyState{ text-align:center; padding:70px 18px 90px; }
.emptyState h1{ font-size:clamp(26px,4vw,40px); font-weight:980; letter-spacing:-.6px; margin:0 0 10px; }
.emptyState p{ color:var(--muted); font-weight:650; margin:0 auto 22px; max-width:52ch; }

/* "tune in" rows on a station page */
.tuneList{ display:flex; flex-direction:column; gap:10px; }
.tuneRow{
  display:flex; gap:12px; align-items:center; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line2); border-radius:14px;
  padding:12px 14px; cursor:pointer; text-decoration:none; color:inherit;
  font-family:inherit; font-size:14px;
}
.tuneRow:hover{ border-color:var(--accentLine); background:var(--accentSoft); }
.tuneRow span{ font-size:22px; }
.tuneRow b{ display:block; font-weight:900; font-size:14px; }
.tuneRow small{ display:block; color:var(--muted); font-weight:650; font-size:12px; margin-top:2px; }

/* setup card (Firebase not configured yet) */
.setupCard{
  max-width:640px; margin:40px auto 90px;
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20);
  box-shadow:var(--shadow); padding:30px;
}
.setupTag{
  display:inline-flex; gap:6px; align-items:center;
  font-size:12px; font-weight:950; letter-spacing:.4px; text-transform:uppercase;
  color:var(--accentText); background:var(--accentSoft); border:1px solid var(--accentLine);
  padding:6px 12px; border-radius:999px;
}
.setupCard h1{ font-size:24px; font-weight:980; letter-spacing:-.4px; margin:14px 0 8px; }
.setupCard p{ color:var(--muted); font-weight:650; line-height:1.6; margin:0 0 14px; }
.setupSteps{ margin:0 0 18px; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-weight:650; line-height:1.55; }
.setupSteps b{ font-weight:900; color:var(--text); }

/* station view: the little "live now" note above the hero */
#view-station .demoNote,
.demoNote{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--warmSoft); border:1px solid rgba(255,198,26,.45);
  border-radius:14px; padding:12px 14px; margin-bottom:16px;
  font-size:13.5px; font-weight:700; line-height:1.5;
}
#view-station .onair.off{ color:var(--muted); border-color:var(--line); background:var(--surface2); }
#view-station .onair.off .liveDot{ background:var(--muted2); animation:none; }

/* ------------------------------------------------------------
   Player bar polish (mobile mostly).
   ------------------------------------------------------------ */

/* The player hides the skip buttons while a live stream is playing.
   .pBtn is display:flex, which beats the [hidden] attribute, so make
   [hidden] win everywhere. */
[hidden]{ display:none !important; }

/* Long track names must not grow the bar. */
.playerSub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:560px){
  .playerBar{ padding:0 12px; gap:10px; }
  .playerControls{ gap:8px; }
  /* the label is hidden at this width, and a bare dot reads as a broken pill */
  .playerDropBtn{ display:none; }
}

/* The hero, the mobile drawer, the featured strip, the station page and
   the dashboard each used to carry their own copy of the light button.
   base.css now defines it once for every surface — see "ONE BUTTON" there.
   Only genuine variants live on: .btn.big, .btn.active, .btn.follow. */

/* .btn started life as a <button>; several are <a> now (real links the
   router can intercept). Stop them rendering underlined. */
a.btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* Sidebar icons are real links now; the router marks the current one. */
.sideIcon{ text-decoration:none; color:inherit; }
.sideIcon.on{ background:var(--accentSoft); border-color:var(--accentLine); color:var(--accentText); }

/* 404 — a real "not found", never a station message */
.notFound .nfCode{ margin:0 0 6px; font-size:clamp(56px, 9vw, 96px); font-weight:980; letter-spacing:-3px; color:var(--accentText); line-height:1; }
.notFound code{ word-break:break-all; }
.nfLinks{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }