/* ============================================================
   RadioGrub — discover.css
   /nearby and /discover. Plain on purpose: the frame Joe's design
   dresses. Shares .pageTitle/.pageSub/.chip wording with /browse.
   ============================================================ */

#view-nearby .wrap,
#view-discover .wrap{ max-width:var(--max); margin:0 auto; padding:24px 18px 130px; }

#view-nearby .pageTitle,
#view-discover .pageTitle{ font-size:clamp(26px,3.4vw,38px); font-weight:980; letter-spacing:-.6px; margin:0 0 4px; }
#view-nearby .pageSub,
#view-discover .pageSub{ color:var(--muted); font-weight:650; font-size:15px; margin:0 0 20px; max-width:70ch; }

#view-nearby .chip,
#view-discover .chip{
  border:1.5px solid var(--line2); background:var(--surface); border-radius:999px; padding:9px 16px;
  font-family:inherit; font-weight:850; font-size:13px; cursor:pointer; white-space:nowrap; color:inherit;
}
#view-nearby .chip:hover,
#view-discover .chip:hover{ border-color:var(--accentLine); }
#view-nearby .chip.sel,
#view-discover .chip.sel{ border-color:var(--accentText); background:var(--accent); color:#fff; }

/* ---------- nearby ---------- */
.nbHero{
  display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(260px, .75fr); gap:40px; align-items:center;
  margin:8px 0 34px; padding:36px; border-radius:24px; border:1px solid var(--line2);
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(226,27,35,.09), transparent 60%),
    radial-gradient(360px 240px at 0% 100%, rgba(255,198,26,.10), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow2);
}
.nbKicker{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:950; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accentText); background:var(--accentSoft); border:1px solid var(--accentLine); padding:6px 12px; border-radius:999px; }
.nbKicker svg{ width:14px; height:14px; }
.nbHero h1{ margin:16px 0 0; font-size:clamp(32px, 4.4vw, 52px); font-weight:980; letter-spacing:-1.4px; line-height:1.03; }
.nbHero p{ margin:14px 0 0; color:var(--muted); font-weight:650; font-size:16px; line-height:1.55; max-width:56ch; }

.nbControls{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:26px; }
.nbLocate{ padding:14px 22px; font-size:16px; gap:10px; }
.nbLocate svg{ width:20px; height:20px; }
.nbZipRow{ display:flex; gap:8px; }
.nbZipRow input{
  width:150px; border:1.5px solid var(--line); border-radius:999px; padding:12px 16px;
  font-size:15px; font-family:inherit; background:var(--surface); color:var(--text); outline:none;
}
.nbZipRow input:focus{ border-color:var(--accentLine); box-shadow:0 0 0 4px var(--accentSoft); }
.nbSr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nbRadiusRow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.nbRadiusLabel{ font-size:13px; font-weight:900; color:var(--muted); }
.nbRadius{ display:flex; gap:6px; flex-wrap:wrap; }
.nbStatus{ margin:16px 0 0; font-weight:850; min-height:1.4em; color:var(--text); }

.nbRadar{ margin:0; text-align:center; }
.nbRadar svg{ width:100%; max-width:340px; height:auto; overflow:visible; }
.nbRing{ fill:none; stroke:rgba(0,0,0,.92); stroke-width:1; }
.nbRingOuter{ stroke:rgba(226,27,35,.35); stroke-width:1.5; }
.nbAxis{ stroke:rgba(0,0,0,.92); stroke-width:1; }
.nbRingLabel{ font-size:9px; font-weight:800; fill:var(--muted2); }
.nbNorth{ font-size:10px; font-weight:950; fill:var(--muted); text-anchor:middle; }
.nbYou{ fill:#0b0d12; stroke:#fff; stroke-width:3; }
.nbYouRing{ fill:none; stroke:#0b0d12; stroke-width:2.5; pointer-events:none; }
.nbDot circle{ fill:var(--accent); stroke:#fff; stroke-width:2.5; transition:r .15s; }
.nbDot:hover circle{ r:9; }
.nbIdle{ fill:rgba(226,27,35,.14); transform-origin:150px 150px; animation:nbSweep 3.2s linear infinite; }
@keyframes nbSweep{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .nbIdle{ animation:none; } }
.nbRadar figcaption{ margin-top:8px; font-size:12.5px; font-weight:800; color:var(--muted); }

.nbList{ display:flex; flex-direction:column; gap:14px; }
.nbListHead{ margin:0 0 4px; font-size:clamp(20px, 2.2vw, 24px); font-weight:980; letter-spacing:-.5px; }
.nbRow{
  display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--line2); border-radius:20px; padding:14px 18px 14px 14px;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.nbRow:hover{ box-shadow:var(--shadow); border-color:var(--line); }
.nbArt{ display:block; width:96px; text-decoration:none; }
.nbInfo{ min-width:0; }
.nbTop{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.nbDist{ font-size:12px; font-weight:950; color:var(--accentText); background:var(--accentSoft); border:1px solid var(--accentLine); padding:3px 10px; border-radius:999px; }
.nbTop .rgBadge.nbBadge{ position:static; transform:none; box-shadow:none; border:1px solid var(--line2); }
.nbName{ margin:8px 0 2px; font-size:18px; font-weight:950; letter-spacing:-.3px; }
.nbName a{ color:inherit; text-decoration:none; }
.nbName a:hover{ color:var(--accentText); }
.nbMeta{ color:var(--muted); font-weight:700; font-size:13.5px; display:flex; gap:12px; flex-wrap:wrap; margin-top:2px; }
.nbMeta:empty{ display:none; }
.nbOpen.open, .nbOpen.always{ color:#0f7a3d; font-weight:850; }
.nbFine{ margin-top:4px; font-size:12px; font-weight:700; color:var(--muted2); }
.nbActions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.nbEmpty{
  text-align:center; color:var(--muted); font-weight:750; padding:34px 18px; line-height:1.7;
  background:var(--surface); border:1px dashed var(--line); border-radius:20px;
}
.nbEmpty a{ color:var(--accentText); font-weight:900; }
.nbEmpty .btn{ margin-top:10px; }
.nbFoot{ margin-top:16px; }

@media (max-width:860px){
  .nbHero{ grid-template-columns:1fr; padding:24px; gap:24px; }
  .nbRadar svg{ max-width:260px; }
}
@media (max-width:640px){
  .nbRow{ grid-template-columns:72px minmax(0, 1fr); gap:14px; }
  .nbArt{ width:72px; }
  .nbActions{ grid-column:1 / -1; justify-content:flex-start; }
  .nbLocate{ width:100%; justify-content:center; }
  .nbZipRow{ width:100%; }
  .nbZipRow input{ flex:1; width:auto; }
}

/* ---------- discover ---------- */
#view-discover .rgSection:first-of-type{ margin-top:34px; }
.dsSection .rgSectionHead{ margin-bottom:18px; }
.dsChips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:18px; }
.dsN{ opacity:.6; font-weight:800; }
.dsPending{
  color:var(--muted); font-weight:650; line-height:1.6; font-size:14.5px;
  background:var(--surface); border:1px dashed var(--line); border-radius:18px; padding:18px 20px;
}
.dsPending b{ color:var(--text); }

.dsRank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dsRankRow{ position:relative; display:grid; grid-template-columns:34px 64px minmax(0, 1fr) auto 46px; gap:16px; align-items:center;
  padding:10px 12px; border-radius:14px; transition:background .15s; }
.dsRankRow:hover{ background:var(--surface2); }
.dsRankRow + .dsRankRow{ border-top:1px solid var(--line2); }
.dsPos{ font-size:20px; font-weight:980; color:var(--muted2); text-align:center; }
.dsRankArt{ display:block; width:64px; }
.dsRankInfo{ min-width:0; }
.dsRankName{ display:block; font-weight:950; font-size:16px; color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsRankName:hover{ color:var(--accentText); }
.dsRankMeta{ margin-top:3px; color:var(--muted); font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsRankMeta .rgBadge.dsInline{ position:static; display:inline-block; margin-right:8px; box-shadow:none; vertical-align:1px; }
.dsRankCount{ text-align:right; line-height:1.15; }
.dsRankCount b{ display:block; font-size:20px; font-weight:980; }
.dsRankCount span{ font-size:11.5px; font-weight:800; color:var(--muted2); }
.dsRankRow .rgPlay.dsRankPlay{ position:static; opacity:1; transform:none; }
@media (max-width:640px){
  .dsRankRow{ grid-template-columns:24px 52px minmax(0, 1fr) 40px; gap:10px; }
  .dsRankArt{ width:52px; }
  .dsRankCount{ display:none; }
}