*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
/* 2026-08-11 batch — generic "seed state hidden, JS reveals it later"
   utility, replacing a few inline style="display:none;" attributes on
   the global now-bar. !important so it reliably wins regardless of an
   element's own base display rule (.now-bar/.now-bar .vote-btn already
   set their own display:flex). */
.hidden{display:none !important;}
body{
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  color:var(--ink); overflow-x:hidden; position:relative; min-height:100vh;
  display:flex; flex-direction:column;
}
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(2,1,3,.25) 0%, rgba(2,1,3,.4) 35%, rgba(2,1,3,.7) 70%, rgba(2,1,3,.94) 100%);
}
a{color:inherit;}
header{
  position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px; font-size:12px; letter-spacing:.08em;
}
header .brand{display:flex; align-items:center; gap:10px; font-weight:800; text-decoration:none;}
/* 2026-09-03 batch, brugerrapporteret (Fabian, via user): "the brand logo
   we see on the front page, should persist to the other pages... we need
   to scale it the same on all pages. right now when you go to the
   weekly schedule or a single station page, the logo is smaller." Was
   28px — home.html's own header doesn't use this shared .brand markup at
   all (it has its own bespoke 3-column layout, see webradio-home.css's
   own 104px .brand img, untouched by this change since a more specific
   selector there still wins) — every OTHER page using this default
   header (weekly_schedule.html, schedule.html) was the only place still
   showing the small size. Matches home.html's own number and its own
   responsive breakpoints below, so the logo now reads as genuinely the
   same size everywhere instead of just coincidentally similar. */
header .brand img{height:104px;}
header nav{display:flex; gap:20px;}
header nav a{text-decoration:none; opacity:.75; transition:opacity .2s;}
header nav a:hover{opacity:1;}
@media (max-width:900px){
  header .brand img{height:64px;}
}
@media (max-width:600px){
  header .brand img{height:52px;}
  /* 2026-09-09 batch, brugerønske (odd/uncommon-size pass) — found via a
     real horizontal-overflow sweep, not just eyeballing: this default
     header (schedule.html/station.html/weekly_schedule.html — home.html
     has its own bespoke header, untouched) never wrapped at all. Four
     nav links (Stations/Schedule/Weekly Schedule/Login) at gap:20px in a
     single non-wrapping flex row simply don't fit under ~360-400px wide
     (a 320px kiosk display, well within this project's own "odd screen
     size" scope), pushing the last link's right edge past the viewport
     and creating a real horizontal scrollbar. flex-wrap here matches the
     same "stack/center on mobile" pattern webradio-home.css's own header
     already uses at this exact breakpoint. */
  header{flex-wrap:wrap; justify-content:center; gap:10px; text-align:center; padding:14px 16px;}
  header nav{flex-wrap:wrap; justify-content:center; gap:8px 14px; font-size:11px;}
}
main{position:relative; z-index:5; padding:0 32px;}
#page-main{flex:1 0 auto;}
#page-header,#page-footer{flex:none;}
.live-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.06em;
  color:#7dffb0; margin:10px 0;
}
.live-pill i{width:6px; height:6px; border-radius:50%; background:#7dffb0; box-shadow:0 0 6px #7dffb0;}
.live-pill.off{color:var(--ink-dim);}
.live-pill.off i{background:var(--ink-dim); box-shadow:none;}
.footer-credit{
  position:relative; z-index:5; display:flex; align-items:center; justify-content:center;
  padding:14px 0 6px; font-size:11px; color:var(--ink-dim); text-align:center;
}
.footer-credit img{height:18px; vertical-align:middle; margin-right:8px; opacity:.8;}
.footer-domain:empty{display:none;}
.footer-domain:not(:empty)::before{content:'· ';}
.connect-row{position:relative; z-index:5; display:flex; gap:16px; justify-content:center; font-size:11px; padding-bottom:4px;}
.connect-row a{color:var(--gold); text-decoration:none; opacity:.8;}
.connect-row a:hover{opacity:1;}
/* The shared footer remains part of the page instead of floating over the
   content.  When the global player is open, reserve exactly its footprint at
   the bottom so the footer finishes directly above it at the end of the page.
   Home and station pages use their own footer plus .bottom-safe and therefore
   deliberately do not match this rule. */
body:has(.now-bar:not(.hidden)) #page-footer:has(.footer-credit){padding-bottom:96px;}
.alliance-blurb{
  position:relative; z-index:5; max-width:640px; margin:6px auto 20px; padding:0 16px;
  font-size:10.5px; line-height:1.5; color:var(--ink-dim); text-align:center;
}
.alliance-blurb b{color:var(--gold);}
.coming-soon{
  border:1px dashed rgba(230,184,102,.35); border-radius:10px; padding:14px 16px;
  font-size:12px; color:var(--ink-dim); margin:14px 0;
}
/* 2026-08-11 batch — now-bar + artist-bio/lyrics modals moved here from
   webradio-home.css/webradio-station.css (previously near-identical
   duplicates in both) now that the now-bar itself lives in base.html as
   a single global, page-independent component (persists across AJAX
   navigation instead of being torn down/recreated per page). */
.launch-standby-callout{
  position:fixed; left:50%; bottom:104px; z-index:12; transform:translateX(-50%);
  width:min(760px,92vw); padding:18px 72px 24px; text-align:center;
  border:1px solid rgba(87,217,237,.55); border-radius:14px;
  color:#f5f8fa; background:linear-gradient(115deg,rgba(5,24,34,.97),rgba(12,8,18,.97));
  box-shadow:0 18px 65px rgba(0,0,0,.58),0 0 38px rgba(87,217,237,.14),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
}
.launch-standby-callout::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(87,217,237,.08) 50%,transparent 80%); animation:launch-signal-scan 3.2s ease-in-out infinite;}
.launch-standby-kicker{display:block; margin-bottom:8px; color:#57d9ed; font:700 9px/1 'Orbitron',sans-serif; letter-spacing:.28em;}
.launch-standby-callout strong{display:block; color:#fff; font:900 clamp(18px,2.2vw,30px)/1.08 'Orbitron',sans-serif; letter-spacing:.08em; text-shadow:0 0 24px rgba(87,217,237,.35);}
.launch-standby-callout p{max-width:620px; margin:9px auto 0; color:#c9d3d8; font:600 14px/1.35 'Rajdhani',sans-serif; letter-spacing:.035em;}
.launch-standby-arrow{position:absolute; left:50%; bottom:-27px; transform:translateX(-50%); color:#f1c66f; font:900 28px/1 'Orbitron',sans-serif; text-shadow:0 0 16px rgba(241,198,111,.7); animation:launch-arrow 1s ease-in-out infinite;}
@keyframes launch-signal-scan{0%,100%{opacity:.25;transform:translateX(-12%)}50%{opacity:1;transform:translateX(12%)}}
@keyframes launch-arrow{50%{transform:translate(-50%,7px)}}
.now-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:10;
  width:min(600px,90vw); background:rgba(2,1,3,.85); border:1px solid rgba(230,184,102,.3);
  border-radius:6px; display:flex; align-items:center; gap:14px; padding:12px 18px; backdrop-filter:blur(12px);
  overflow:hidden;
}
body.launch-standby-active .now-bar{border-color:rgba(87,217,237,.58); box-shadow:0 0 30px rgba(87,217,237,.12);}
@media(max-width:700px){
  .launch-standby-callout{bottom:132px; padding:15px 18px 21px;}
  .launch-standby-callout strong{font-size:16px; letter-spacing:.05em;}
  .launch-standby-callout p{font-size:12px;}
}
@media(prefers-reduced-motion:reduce){.launch-standby-callout::before,.launch-standby-arrow{animation:none;}}
.now-bar .play{
  width:34px; height:34px; border-radius:3px; background:var(--gold); color:#1a1204; display:flex; align-items:center;
  justify-content:center; font-size:12px; cursor:pointer; flex:none; border:none;
}
.now-bar .play:disabled{opacity:.5; cursor:default;}
.now-bar .nowbar-cover{
  width:56px; object-fit:cover; flex:none; align-self:stretch;
  margin:-12px 0 -12px -18px;
}
.now-bar .meta{flex:1; min-width:0; text-align:left;}
.now-bar .live{font-size:9px; letter-spacing:.1em; color:#ff5a5a; font-weight:700;}
.now-bar .track{font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.now-bar .artist{font-size:11px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.now-bar .bio-link{
  flex:none; font-size:10px; letter-spacing:.02em; color:var(--gold);
  text-decoration:none; text-align:center; line-height:1.35;
  opacity:.85; transition:opacity .2s ease;
}
.now-bar .bio-link:hover{opacity:1;}
.now-bar .volume-row{flex:none;}
input[type=range].volume-slider{
  -webkit-appearance:none; appearance:none;
  width:70px; height:4px; border-radius:2px; background:rgba(255,255,255,.15);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:var(--fill, 70%) 100%;
  cursor:pointer; outline:none;
}
input[type=range].volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid #0c0c0c; cursor:pointer;
  box-shadow:0 0 6px var(--accent-glow);
}
input[type=range].volume-slider::-moz-range-track{
  height:4px; border-radius:2px; background:rgba(255,255,255,.15); border:none;
}
input[type=range].volume-slider::-moz-range-progress{
  height:4px; border-radius:2px; background:var(--accent);
}
input[type=range].volume-slider::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid #0c0c0c; cursor:pointer;
  box-shadow:0 0 6px var(--accent-glow);
}
.now-bar .vote-btn{
  flex:none; display:flex; align-items:center; gap:6px;
  background:rgba(230,184,102,.14); border:1px solid rgba(230,184,102,.45);
  color:var(--gold); padding:8px 14px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.03em; cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.now-bar .vote-btn:hover{background:rgba(230,184,102,.26); transform:scale(1.04);}
.now-bar .vote-btn.voted{background:#7dffb0; border-color:#7dffb0; color:#042013; cursor:default; transform:none;}
.now-bar .vote-btn:disabled{opacity:.5; cursor:default;}

/* --- Real artist-bio modal (mockup's own .bio-modal-* component) --- */
.bio-modal-overlay{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,1,3,.78); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.bio-modal-overlay.open{opacity:1; pointer-events:auto;}
.bio-modal-panel{
  --bio-hero-size:min(560px,78vh);
  position:relative; width:min(1080px,95vw); height:var(--bio-hero-size); max-height:90vh;
  display:grid; grid-template-columns:var(--bio-hero-size) 1fr; border-radius:16px; overflow:hidden;
  border:1px solid rgba(230,184,102,.3);
  background:linear-gradient(160deg, rgba(20,10,20,.92), rgba(2,1,3,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .2s ease;
}
.bio-modal-overlay.open .bio-modal-panel{transform:scale(1);}
.bio-modal-hero{position:relative; width:100%; height:100%; background-size:cover; background-position:center; background-color:#0a0a0a;}
.bio-modal-hero.no-cover{display:flex; align-items:center; justify-content:center; font-size:64px; opacity:.25;}
.bio-modal-hero.no-cover::after{content:'🎤';}
.bio-modal-close{
  position:absolute; top:14px; right:14px; z-index:5; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(2,1,3,.6);
  border:1px solid rgba(230,184,102,.4); color:var(--ink); font-size:14px; cursor:pointer;
}
.bio-modal-close:hover{border-color:var(--gold); color:var(--gold);}
.bio-modal-scroll{height:100%; min-height:0; overflow-y:auto; padding:26px 28px;}
.bio-modal-kicker{display:inline-block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.bio-modal-genre{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; opacity:.9;}
.bio-quote-card{position:relative; background:rgba(230,184,102,.08); border:1px solid rgba(230,184,102,.25); border-radius:12px; padding:16px 20px 14px; margin-bottom:14px; overflow:hidden;}
.bio-quote-mark{position:absolute; top:-6px; left:10px; font-size:44px; color:var(--gold); opacity:.3; line-height:1;}
.bio-quote-card p{position:relative; font-style:italic; font-size:13px; line-height:1.5; padding-left:6px;}
.bio-card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:13px 16px; margin-bottom:12px;}
.bio-card p{margin-top:5px; font-size:12px; line-height:1.6; color:var(--ink); white-space:pre-wrap;}
.bio-field-label{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); opacity:.9; margin-bottom:2px;}
.bio-field-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
.bio-field span:not(.bio-field-label){font-size:12px; color:var(--ink);}
.bio-card-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.bio-card-row .bio-card{margin-bottom:0;}
.bio-bullet-list{margin:4px 0 0; padding-left:16px;}
.bio-bullet-list li{font-size:12px; line-height:1.55; color:var(--ink);}
.bio-keyword-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px;}
.bio-chip{font-size:9.5px; letter-spacing:.03em; color:var(--accent); border:1px solid rgba(255,143,217,.35); background:rgba(255,143,217,.08); border-radius:20px; padding:3px 10px;}
.bio-empty{font-size:11px; color:var(--ink-dim); opacity:.8;}
.bio-song-heading{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.bio-lyrics-btn{
  font-family:inherit; font-size:11px; letter-spacing:.04em; color:#1a1204;
  background:linear-gradient(135deg, var(--gold), #f5d998); border:none; border-radius:24px;
  padding:9px 16px; cursor:pointer; margin:2px 0 4px; font-weight:700; display:inline-block;
}
.bio-lyrics-btn:hover{filter:brightness(1.08);}
.lyrics-modal-overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,1,3,.82); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.lyrics-modal-overlay.open{opacity:1; pointer-events:auto;}
.lyrics-modal-panel{
  position:relative; width:min(600px,92vw); max-height:82vh; overflow-y:auto;
  padding:30px 26px 26px; border-radius:16px; border:1px solid rgba(230,184,102,.3);
  background:linear-gradient(160deg, rgba(20,10,20,.95), rgba(2,1,3,.98));
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.97); transition:transform .2s ease;
}
.lyrics-modal-overlay.open .lyrics-modal-panel{transform:scale(1);}
.lyrics-modal-title{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.lyrics-display{font-size:13px; line-height:1.75; color:var(--ink); white-space:pre-wrap;}
.bio-modal-scroll, .lyrics-modal-panel{scrollbar-width:thin; scrollbar-color:rgba(230,184,102,.35) transparent;}
.bio-modal-scroll::-webkit-scrollbar, .lyrics-modal-panel::-webkit-scrollbar{width:8px; height:8px;}
.bio-modal-scroll::-webkit-scrollbar-track, .lyrics-modal-panel::-webkit-scrollbar-track{background:transparent;}
.bio-modal-scroll::-webkit-scrollbar-thumb, .lyrics-modal-panel::-webkit-scrollbar-thumb{background:rgba(230,184,102,.35); border-radius:6px;}
.bio-modal-scroll::-webkit-scrollbar-thumb:hover, .lyrics-modal-panel::-webkit-scrollbar-thumb:hover{background:var(--gold);}
@media (max-width:760px){
  .bio-modal-panel{width:94vw; height:88vh; grid-template-columns:1fr; grid-template-rows:auto 1fr;}
  .bio-modal-hero{aspect-ratio:1/1; width:100%; height:auto;}
  .bio-modal-scroll{height:auto; min-height:0;}
  .bio-field-grid, .bio-card-row{grid-template-columns:1fr;}
  .lyrics-modal-panel{width:94vw;}
  .now-bar{width:94vw; padding:10px 14px; gap:8px;}
  .now-bar .bio-link{display:none;}
  .now-bar .volume-row{display:none;}
  .now-bar .vote-btn .vote-label{display:none;}
  .now-bar .vote-btn{padding:8px 10px;}
}