@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS: 3 semantic colors per theme, that's it ── */
:root {
  --bg:     #0c0c0c;
  --bg2:    #161412;
  --fg:     #ede9e0;
  --mid:    #9a9088;
  --dim:    #5a5048;
  --border: #2c2824;
  --red:    #c03;
  --green:  #4a9a6a;
  --blue:   #6a9cbc;
  --bar:    #2c2824;
  --scan:   rgba(255,255,255,.006);
  --warning:rgb(227, 227, 44);
}
[data-theme="light"] {
  --bg:     #f2ede4;
  --bg2:    #e8e3da;
  --fg:     #1a1612;
  --mid:    #6a5f52;
  --dim:    #a09080;
  --border: #d4ccc0;
  --red:    #922;
  --green:  #2a7a50;
  --blue:   #3a6e90;
  --bar:    #cec6ba;
  --scan:   transparent;
  --warning: #a22;
}

html, body {
  min-height: 100%; background: var(--bg); color: var(--fg);
  font-family: 'IBM Plex Mono', monospace; font-size: 16px;
  transition: background .2s, color .2s;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, var(--scan) 3px, var(--scan) 4px);
}

.app { max-width: 500px; margin: 0 auto; padding-bottom: 5rem; }
@media (min-width: 880px) {
  .app { max-width: 840px; display: grid; grid-template-columns: 1fr 300px;
         grid-template-areas: "hdr hdr" "player stations" "badge stations" "djbar stations" "browser stations"; }
  .hdr, .player, .badge-row, .dj-bar, .browser { border-right: 1px solid var(--border); }
  .hdr { grid-area: hdr; border-right: none; }
  .player   { grid-area: player; }
  .badge-row{ grid-area: badge; }
  .dj-bar   { grid-area: djbar; }
  .browser  { grid-area: browser; }
  .stations { grid-area: stations; border-top: none !important; padding-top: 1.6rem; }
}

/* HEADER */
.hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.8rem 1.5rem 1.3rem; border-bottom: 1px solid var(--border);
}
.call-sign { font-size: 2.1rem; font-weight: 600; letter-spacing: -.03em; color: var(--red); line-height: 1; margin-bottom: .2rem; }
.tagline   { font-size: .62rem; color: var(--mid); letter-spacing: .18em; text-transform: uppercase; }
.description { font-size: .75rem; color: var(--mid); margin-top: .5rem; /*max-width: 400px;*/ }
.theme-btn {
  background: none; border: none; color: var(--mid);
  font-size: 1.1rem; width: 2.3rem; height: 2.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color .15s;
}
.theme-btn:hover { color: var(--fg); }

/* PLAYER */
.player { padding: 1.8rem 1.5rem 1.5rem; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.player-art {
  position: absolute; top: 0; right: 0; width: 75%; height: 100%;
  object-fit: cover; filter: saturate(.5); opacity: .12;
  mask-image: linear-gradient(to right, transparent, black 30%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 30%);
  pointer-events: none;
}
.player > *:not(.player-art) { position: relative; }

.vu { display: flex; gap: 2px; height: 24px; margin-bottom: 1.6rem; align-items: flex-end; }
.vu-bar { flex: 1; background: var(--bar); border-radius: 1px; height: 3px; }
/* VU only animates when audio is actually outputting — driven by .audio-live on playerEl */
.audio-live .vu-bar { animation: vu var(--d,.4s) ease-in-out infinite alternate; }
@keyframes vu { from { height: 3px; } to { height: var(--p, 22px); } }

.track-title {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 1.05rem;
  color: var(--fg); line-height: 1.35; margin-bottom: .3rem;
  word-break: break-word;
}
.track-meta { font-weight: 500; font-size: .7rem; color: var(--mid); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .4rem; }
.track-desc {
  font-size: .75rem; color: var(--mid); line-height: 1.6;
  margin-bottom: 1.1rem;
  max-height: 4.8em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  line-clamp: 4;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500;
}
.track-desc:empty { display: none; margin-bottom: 0; }

.prog-row { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.25rem; }
.t-lbl { font-size: .65rem; color: var(--mid); min-width: 3rem; letter-spacing: .04em; }
.t-lbl.r { text-align: right; }
.prog { flex: 1; height: 2px; background: var(--bar); border-radius: 1px; cursor: default; transition: height .1s, margin .1s; }
.prog.scrub { cursor: pointer; }
.prog.scrub:hover { height: 6px; margin: -2px 0; }
.prog-fill { height: 100%; background: var(--red); width: 0%; border-radius: 1px; pointer-events: none; }
.prog-fill.anim { transition: width 1s linear; }

.controls { display: flex; align-items: stretch; gap: .65rem; }

.play-btn {
  flex: 1; padding: .9rem 1rem; background: var(--green); border: 1px solid var(--dim);
  color: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .7rem; transition: all .15s;
}
.play-btn:hover:not(:disabled) { border-color: var(--fg); background: var(--mid); color: var(--bg); }
.play-btn.ready { border-color: var(--green); color: var(--bg); }
.play-btn.live  { border-color: var(--green); background: rgba(74,154,106,.09); color: var(--green); }
.play-btn.dj-on { border-color: var(--green); background: rgba(74,154,106,.09); color: var(--green); }
.play-btn:disabled { opacity: .3; cursor: default; }

@keyframes blink { 50% { opacity: 0; } }

/* DJ button label describes what clicking it *does* (where you'll go) */
.dj-btn {
  padding: .9rem 1rem; background: none; border: 1px solid var(--border);
  background: var(--blue); border-color: var(--fg);
  color: var(--bg); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.dj-btn:hover:not(:disabled) { border-color: var(--mid); color: var(--bg); background: var(--mid); }
.dj-btn.on { border-color: var(--blue); color: var(--bg); background: var(--blue); }
.dj-btn:disabled { opacity: .2; cursor: default; }

.status-txt { margin-top: .85rem; font-size: .62rem; font-weight: 500; color: var(--mid); letter-spacing: .08em; min-height: 1em; }

/* MODE BADGE */
.badge-row {
  display: none; align-items: center; gap: .55rem;
  padding: .7rem 1.5rem; border-bottom: 1px solid var(--border);
  font-size: .63rem; letter-spacing: .12em; text-transform: uppercase;
}
.badge-row.show { display: flex; }
.badge-row.live  { background: rgba(74,154,106,.08); color: var(--green); }
.badge-row.dj    { background: rgba(106,156,188,.08); color: var(--blue); }
.bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* DJ BAR */
.dj-bar { display: none; align-items: center; flex-wrap: wrap; gap: .8rem; padding: .85rem 1.5rem; border-bottom: 1px solid var(--border); }
.dj-bar.show { display: flex; }
.spd-wrap { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.spd-lbl  { font-size: .62rem; color: var(--mid); }
.spd-btns { display: flex; gap: 2px; }
.spd-btn  {
  padding: .25rem .55rem; background: none; border: 1px solid var(--border);
  color: var(--mid); font-family: 'IBM Plex Mono', monospace; font-size: .65rem; cursor: pointer; transition: all .1s;
}
.spd-btn:hover { border-color: var(--mid); color: var(--fg); }
.spd-btn.on { border-color: var(--blue); color: var(--blue); background: rgba(106,156,188,.09); }

/* TRACK BROWSER */
.browser { display: none; flex-direction: column; border-bottom: 1px solid var(--border); max-height: 52vh; overflow: hidden; }
.browser.show { display: flex; }
.b-hdr {
  display: grid; grid-template-columns: 2.6rem 1fr 4rem;
  gap: .5rem; padding: .55rem 1.5rem; font-size: .58rem; color: var(--dim);
  letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--border); background: var(--bg);
}
.b-list { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.b-list::-webkit-scrollbar { width: 3px; }
.b-list::-webkit-scrollbar-thumb { background: var(--border); }
.t-row {
  display: grid; grid-template-columns: 2.6rem 1fr 4rem;
  gap: .5rem; padding: .68rem 1.5rem; cursor: pointer;
  border-bottom: 1px solid var(--border); align-items: center; transition: background .08s;
}
.t-row:hover { background: var(--bg2); }
.t-row.cur  { background: rgba(106,156,188,.09); }
.t-num { font-size: .62rem; color: var(--dim); text-align: left; }
.t-row.cur .t-num { color: var(--blue); }
.t-date { font-size: .58rem; color: var(--dim); margin-right: .35rem; }
.t-name { font-size: .75rem; color: var(--fg); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-row.cur .t-name { opacity: 1; }
.t-dur { font-size: .62rem; color: var(--dim); text-align: right; }

/* STATIONS */
.stations { padding: 1.3rem 1.5rem .5rem; border-top: 1px solid var(--border); }
.sec-lbl { font-size: .8rem; color: var(--mid); letter-spacing: .25em; text-transform: uppercase; margin-bottom: .5rem; }
.content-warn {
  font-size: .7rem; font-weight: 900; padding: 0.25rem; color: var(--warning); letter-spacing: .05em; line-height: 1.5;
  margin-bottom: .85rem;
}
.st-scroll-wrap { position: relative; }
.st-list { display: flex; flex-direction: column; gap: 2px; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding-bottom: .5rem; }
.st-scroll-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--bg) 80%);
  pointer-events: none; transition: opacity .2s;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: .25rem;
}
.st-scroll-fade::after {
  content: '▾ more';
  font-size: .55rem; color: var(--dim); letter-spacing: .15em; text-transform: uppercase;
}
.st-scroll-fade.hidden { opacity: 0; }
.st-scroll-top {
  position: absolute; top: 0; left: 0; right: 0; height: 3.5rem;
  background: linear-gradient(to top, transparent, var(--bg) 80%);
  pointer-events: none; transition: opacity .2s; opacity: 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: .25rem;
  z-index: 1;
}
.st-scroll-top::after {
  content: '▴ more';
  font-size: .55rem; color: var(--dim); letter-spacing: .15em; text-transform: uppercase;
}
.st-scroll-top.visible { opacity: 1; }
.st-list::-webkit-scrollbar { width: 3px; }
.st-list::-webkit-scrollbar-thumb { background: var(--border); }

.st-btn {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem;
  cursor: pointer; background: none; border: 1px solid transparent;
  color: var(--mid); font-family: 'IBM Plex Mono', monospace;
  text-align: left; width: 100%; min-width: 0; transition: all .1s;
}
.st-btn:hover { color: var(--fg); border-color: var(--border); background: var(--bg2); }
.st-btn.sel   { color: var(--fg); border-color: var(--red); background: rgba(192,0,51,.09); }
.st-btn.loading { opacity: .45; }

.st-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.st-img { width: 28px; height: 28px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* Single-line layout: title fills space, identifier dim on right */
.st-labels { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; overflow: hidden; }
.st-full { font-size: .72rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.st-abbr { font-size: .58rem; color: var(--dim); font-family: 'IBM Plex Sans', sans-serif; white-space: nowrap; flex-shrink: 0; }
.st-btn.sel .st-abbr { color: var(--mid); }
.st-count { font-size: .56rem; color: var(--dim); flex-shrink: 0; white-space: nowrap; margin-left: auto; }

.footer-sep { color: var(--border); }
.email-link {
  color: var(--mid); letter-spacing: .05em;
  font-size: .56rem; user-select: all;
}
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: .55rem 1rem;
  font-size: .58rem;
  color: var(--fg);
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.live { color: var(--green); }