/* ============================================================
   RadioGrub — views.css
   SPA view switching + Browse / Station / About view styles.
   ============================================================ */

/* ---- SPA view switching ---- */
.view{ display:none; }
.view.on{ display:block; animation:viewIn .18s ease; }
@keyframes viewIn{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* ================= BROWSE VIEW ================= */
#view-browse .wrap{ max-width:var(--max); margin:0 auto; padding:24px 18px 130px; }
#view-browse .pageTitle{ font-size:clamp(26px,3.4vw,38px); font-weight:980; letter-spacing:-.6px; margin:0 0 4px; }
#view-browse .pageSub{ color:var(--muted); font-weight:650; font-size:15px; margin:0 0 20px; }
#view-browse .searchBar{ display:flex; gap:10px; align-items:center; margin-bottom:14px; }
#view-browse .searchBox{ flex:1; display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow2); }
#view-browse .searchBox:focus-within{ border-color:var(--accentLine); box-shadow:0 0 0 4px var(--accentSoft); }
#view-browse .searchBox svg{ width:20px; height:20px; color:var(--muted2); flex:0 0 auto; }
#view-browse .searchBox input{ border:none; outline:none; background:transparent; font-size:15px; font-family:inherit; width:100%; color:var(--text); }
#view-browse .geoBtn{ border:1.5px solid var(--line); background:var(--surface); border-radius:14px; padding:12px 16px; font-weight:900; font-size:14px; cursor:pointer; white-space:nowrap; box-shadow:var(--shadow2); }
#view-browse .geoBtn:hover{ border-color:var(--accentLine); background:var(--accentSoft); color:var(--accentText); }
#view-browse .geoBtn.on{ border-color:var(--accentLine); background:var(--accentSoft); color:var(--accentText); }
#view-browse .chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:24px; scrollbar-width:none; }
#view-browse .chips::-webkit-scrollbar{ display:none; }
#view-browse .chip{ border:1.5px solid var(--line2); background:var(--surface); border-radius:999px; padding:9px 16px; font-weight:850; font-size:13px; cursor:pointer; white-space:nowrap; transition:.15s; }
#view-browse .chip:hover{ border-color:var(--accentLine); }
#view-browse .chip.sel{ border-color:var(--accentText); background:var(--accent); color:#fff; }
#view-browse .sectionTitle{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:980; letter-spacing:-.3px; margin:6px 0 14px; }
#view-browse .sectionTitle .count{ font-size:13px; font-weight:850; color:var(--muted2); }
#view-browse .empty{ text-align:center; color:var(--muted); font-weight:750; padding:40px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--r16); }
/* ================= STATION VIEW ================ */
#view-station .wrap{ max-width:var(--max); margin:0 auto; padding:22px 18px 130px; }
#view-station .hero{
  display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center;
  background:
    radial-gradient(300px 200px at 12% 15%, rgba(226,27,35,.14), transparent 60%),
    radial-gradient(320px 220px at 88% 25%, rgba(255,198,26,.14), transparent 62%),
    var(--surface);
  border:1px solid var(--line2); border-radius:var(--r20); box-shadow:var(--shadow); padding:24px;
}
#view-station .heroArt{ width:200px; }
#view-station .onair{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:980; color:var(--accentText); border:1px solid var(--accentLine); background:var(--accentSoft); padding:6px 11px; border-radius:999px; }
#view-station .liveDot{ width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px rgba(226,27,35,.12); animation:blink 1.4s ease-in-out infinite; }
#view-station .hero h1{ margin:12px 0 0; font-size:clamp(30px,3.6vw,44px); font-weight:980; letter-spacing:-.7px; }
#view-station .genres{ margin-top:8px; color:var(--muted); font-weight:800; font-size:14px; }
#view-station .counts{ margin-top:8px; color:var(--muted); font-weight:650; font-size:14px; }
#view-station .counts b{ color:var(--text); font-weight:950; }
#view-station .heroCtas{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* base.css defines the button — see "ONE BUTTON". These are the station
   page's own variants, and its slightly roomier padding. */
#view-station .btn{ padding:11px 16px; gap:8px; }
#view-station .btn.big{ padding:13px 26px; font-size:16px; }
#view-station .btn.active{ border-color:var(--accentLine); background:var(--accentSoft); color:var(--accentText); }
#view-station .btn.follow.active{ background:var(--surface3); border-color:var(--text); color:#fff; }
#view-station .cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-top:16px; }
#view-station .card{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20); box-shadow:var(--shadow2); padding:18px; margin-bottom:16px; }
#view-station .card h2{ margin:0 0 14px; font-size:17px; font-weight:980; letter-spacing:-.2px; }
#view-station .np{ display:flex; gap:14px; align-items:center; }
#view-station .npArt{ width:60px; flex:0 0 auto; }
#view-station .npInfo{ flex:1; min-width:0; }
#view-station .npTitle{ font-weight:980; font-size:16px; }
#view-station .npArtist{ color:var(--muted); font-weight:700; font-size:13px; margin-top:2px; }
#view-station .wave{ display:flex; align-items:flex-end; gap:3px; height:22px; }
#view-station .wave .b{ width:4px; border-radius:2px; background:var(--accent); animation:wv 1s ease-in-out infinite; }
#view-station .wave .b:nth-child(2){animation-delay:.15s}
#view-station .wave .b:nth-child(3){animation-delay:.3s}
#view-station .wave .b:nth-child(4){animation-delay:.45s}
#view-station .wave.paused .b{ animation-play-state:paused; height:6px; }
#view-station .queue{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line2); display:flex; flex-direction:column; }
#view-station .qRow{ display:flex; gap:12px; align-items:center; padding:8px 6px; border-radius:10px; }
#view-station .qRow:hover{ background:var(--surface2); }
#view-station .qIdx{ width:20px; text-align:center; color:var(--muted2); font-weight:850; font-size:13px; }
#view-station .qName{ flex:1; min-width:0; font-weight:850; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-station .qName span{ color:var(--muted); font-weight:650; }
#view-station .qDur{ color:var(--muted2); font-weight:750; font-size:12px; }
#view-station .slot{ display:grid; grid-template-columns:100px 1fr auto; gap:12px; align-items:center; border:1px solid var(--line2); border-radius:12px; padding:11px 14px; margin-bottom:8px; }
#view-station .slot.now{ border-color:var(--accentLine); background:var(--accentSoft); }
#view-station .slotTime{ font-weight:950; font-size:13px; color:var(--text); }
#view-station .slotName{ font-weight:900; font-size:14px; }
#view-station .slotName small{ display:block; color:var(--muted); font-weight:650; font-size:12px; margin-top:2px; }
#view-station .slotTag{ font-size:11px; font-weight:900; padding:5px 9px; border-radius:999px; border:1px solid var(--line2); background:var(--surface2); color:var(--muted); white-space:nowrap; }
#view-station .slotTag.live{ color:var(--accentText); border-color:var(--accentLine); background:var(--surface2); }
#view-station .about p{ margin:0 0 10px; color:var(--muted); font-weight:600; line-height:1.6; font-size:14px; }
#view-station .hostRow{ display:flex; align-items:center; gap:12px; margin-top:6px; }
#view-station .hostAv{ width:44px; height:44px; border-radius:50%; background:var(--surface3); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:950; }
#view-station .hostName{ font-weight:950; font-size:14px; }
#view-station .hostSub{ color:var(--muted); font-size:12px; font-weight:700; }
#view-station .mixGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
#view-station .mix{ border:1px solid var(--line2); border-radius:14px; overflow:hidden; background:var(--surface); cursor:pointer; transition:.15s; }
#view-station .mix:hover{ box-shadow:var(--shadow2); transform:translateY(-2px); }
#view-station .mixArt{ height:96px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:30px; }
#view-station .mixArt.alt{ background:linear-gradient(135deg,var(--warm),var(--accent)); }
#view-station .mixBody{ padding:11px 12px; }
#view-station .mixTitle{ font-weight:950; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#view-station .mixBy{ color:var(--muted); font-weight:700; font-size:12px; margin-top:2px; }

@media (max-width:900px){#view-station .hero{ grid-template-columns:1fr; }
#view-station .heroArt{ width:min(200px, 60vw); }
#view-station .cols{ grid-template-columns:1fr; }
#view-station .mixGrid{ grid-template-columns:repeat(2,1fr); }}
/* ================= ABOUT VIEW ================== */
#view-about .wrap{ max-width:var(--max); margin:0 auto; padding:26px 18px 90px; }
#view-about .hero{ text-align:center; padding:26px 10px 30px; }
#view-about .kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:950; letter-spacing:.4px; text-transform:uppercase; color:var(--accentText); border:1px solid var(--accentLine); background:var(--accentSoft); padding:6px 12px; border-radius:999px; }
#view-about .hero h1{ margin:16px 0 0; font-size:clamp(30px,5vw,50px); font-weight:980; letter-spacing:-1px; line-height:1.05; }
#view-about .hero p{ margin:14px auto 0; max-width:60ch; color:var(--muted); font-weight:600; font-size:17px; line-height:1.6; }
#view-about .grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
#view-about .card{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r16); box-shadow:var(--shadow2); padding:20px; }
#view-about .card .ic{ width:44px; height:44px; border-radius:12px; background:var(--accentSoft); display:flex; align-items:center; justify-content:center; font-size:22px; }
#view-about .card h3{ margin:14px 0 6px; font-size:17px; font-weight:950; letter-spacing:-.2px; }
#view-about .card p{ margin:0; color:var(--muted); font-weight:600; font-size:14px; line-height:1.55; }
#view-about .story{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20); box-shadow:var(--shadow); padding:28px; margin-top:26px; }
#view-about .story h2{ margin:0 0 10px; font-size:22px; font-weight:980; letter-spacing:-.4px; }
#view-about .story p{ color:var(--muted); font-weight:600; font-size:15px; line-height:1.7; margin:0 0 12px; }
#view-about .story p:last-child{ margin-bottom:0; }
#view-about .story b{ color:var(--text); font-weight:900; }
#view-about .sectionHead{ text-align:center; margin:40px 0 18px; }
#view-about .sectionHead h2{ margin:0; font-size:26px; font-weight:980; letter-spacing:-.5px; }
#view-about .sectionHead p{ margin:8px 0 0; color:var(--muted); font-weight:600; }
#view-about .contact{ display:grid; grid-template-columns:1.2fr 1fr; gap:16px; }
#view-about .form{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r20); box-shadow:var(--shadow2); padding:24px; }
#view-about .field{ margin-bottom:14px; }
#view-about label{ display:block; font-size:13px; font-weight:900; margin-bottom:6px; }
#view-about input, #view-about textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px; font-family:inherit; background:var(--surface2); outline:none; transition:.15s; color:var(--text); }
#view-about input:focus, #view-about textarea:focus{ border-color:var(--accentLine); box-shadow:0 0 0 4px var(--accentSoft); background:var(--surface2); }
#view-about textarea{ resize:vertical; min-height:120px; }
#view-about .btn{ border:none; background:var(--accent); color:#fff; padding:13px 20px; border-radius:12px; font-weight:950; font-size:15px; cursor:pointer; transition:.15s; width:100%; }
#view-about .btn:hover{ background:var(--accent2); }
#view-about .info{ display:flex; flex-direction:column; gap:12px; }
#view-about .infoCard{ background:var(--surface); border:1px solid var(--line2); border-radius:var(--r16); box-shadow:var(--shadow2); padding:18px; }
#view-about .infoCard .lbl{ font-size:12px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; color:var(--muted2); }
#view-about .infoCard a, #view-about .infoCard .val{ display:block; margin-top:6px; font-weight:900; font-size:15px; color:var(--text); text-decoration:none; }
#view-about .infoCard a:hover{ color:var(--accentText); }
#view-about .socials{ display:flex; gap:10px; margin-top:8px; }
#view-about .socials a{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line2); background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:18px; text-decoration:none; transition:.15s; }
#view-about .socials a:hover{ border-color:var(--accentLine); background:var(--accentSoft); }
#view-about .cta{ text-align:center; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:var(--r20); padding:34px 20px; margin-top:40px; color:#fff; }
#view-about .cta h2{ margin:0 0 8px; font-size:26px; font-weight:980; letter-spacing:-.4px; }
#view-about .cta p{ margin:0 0 18px; opacity:.92; font-weight:600; }
#view-about .cta a{ display:inline-block; background:var(--surface2); color:var(--accentText); text-decoration:none; font-weight:950; padding:13px 26px; border-radius:999px; }
#view-about footer{ max-width:var(--max); margin:34px auto 0; padding:22px 18px; border-top:1px solid var(--line2); display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--muted); font-weight:700; font-size:14px; flex-wrap:wrap; }
#view-about .footLinks{ display:flex; gap:16px; flex-wrap:wrap; }
#view-about .footLinks a{ color:var(--muted); text-decoration:none; font-weight:800; }
#view-about .footLinks a:hover{ color:var(--accentText); }

@media (max-width:820px){#view-about .grid{ grid-template-columns:1fr; }
#view-about .contact{ grid-template-columns:1fr; }}

/* ------------------------------------------------------------
   The owner's bar on a public station page.
   Only rendered when the signed-in account has a role on this
   station — the same USER -> MEMBERSHIP -> STATION the dashboard
   uses. It is the join between the public site and the studio.
   ------------------------------------------------------------ */
#view-station .ownerBar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
  margin:0 0 18px;
  padding:12px 16px;
  border-radius:var(--r16);
  border:1px solid var(--accentLine);
  background:var(--accentSoft);
}
#view-station .ownerTag{
  font-weight:950; font-size:13px; color:var(--accentText);
  text-transform:uppercase; letter-spacing:.4px;
}
#view-station .ownerActions{ display:flex; gap:8px; flex-wrap:wrap; }
#view-station .ownerBar .btn{ background:var(--surface); }

@media (max-width:640px){
  #view-station .ownerBar{ flex-direction:column; align-items:stretch; }
  #view-station .ownerActions .btn{ flex:1; justify-content:center; }
}

/* ============================================================
   THE BLOG  (views/blog.js)
   One column, long lines kept readable, headings that carry weight.
   ============================================================ */

.blogHead{ margin:8px 0 22px; max-width:720px; }
.blogHead h1{ margin:0 0 6px; font-size:clamp(26px,4vw,40px); font-weight:980; letter-spacing:-1px; }
.blogHead .sub{ color:var(--muted); font-size:15.5px; margin:0; }

.blogList{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; }
.blogCard{
  border:1px solid var(--line2); border-radius:var(--r20); background:var(--surface);
  box-shadow:var(--shadow2); overflow:hidden;
}
.blogCardLink{ display:block; padding:18px; color:inherit; text-decoration:none; }
.blogCardLink:hover{ background:var(--surface2); }
.blogCard h2{ margin:0 0 6px; font-size:19px; font-weight:950; letter-spacing:-.3px; }
.blogCard p{ margin:6px 0; font-size:14px; color:var(--muted); }
.blogMore{ display:inline-block; margin-top:8px; font-weight:950; font-size:13px; color:var(--accentText); }

.blogPost{ max-width:720px; margin:0 auto; }
.blogCrumb{ margin:4px 0 14px; font-size:13px; font-weight:900; }
.blogPost h1{ margin:0 0 8px; font-size:clamp(26px,4.2vw,42px); font-weight:980; letter-spacing:-1.2px; line-height:1.08; }
.blogMeta{ margin:0 0 14px; font-size:13px; }
.blogLede{ font-size:17.5px; line-height:1.55; margin:0 0 18px; }
.blogBody{ font-size:16px; line-height:1.68; }
.blogBody h2{ margin:30px 0 8px; font-size:22px; font-weight:960; letter-spacing:-.4px; }
.blogBody h3{ margin:22px 0 6px; font-size:17px; font-weight:950; }
.blogBody p{ margin:0 0 14px; }
.blogBody ul, .blogBody ol{ margin:0 0 16px; padding-left:22px; }
.blogBody li{ margin:6px 0; }
.blogBody blockquote{
  margin:18px 0; padding:10px 16px; border-left:3px solid var(--accentHot);
  background:var(--surface2); border-radius:0 12px 12px 0; font-size:16px;
}
.blogTags{ margin-top:24px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; }
.blogNext, .blogCta{ max-width:720px; margin:40px auto 0; }
.blogNext h2, .blogCta h2{ font-size:18px; font-weight:950; margin:0 0 12px; }
.blogCta{
  border:1px solid var(--line2); border-radius:var(--r20); padding:20px; background:var(--surface2);
}