/* The page takes on the colours of the show on air ([data-show] on the body; the DJs page's cards wear
   their own). Shows without a palette of their own wear Neon Current's: near-black indigo, the logo's
   cyan-to-violet ribbon, a soft glow. */
:root {
  --bg: #17151f; --ink: #f1eefa; --soft: #aea8c4; --accent: #c7a3f4; --panel: rgba(199,163,244,.08);
  --fill: linear-gradient(90deg, #7ad8e7, #bc7de1); --brand-sub: #c7a3f4; --glow: 1;
  --display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --brand: "Inter", system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
[data-show="nova"]       { --bg: #1d1a3a; --ink: #ebe7ff; --soft: #a9a2d8; --accent: #a594ff; --panel: rgba(165,148,255,.10); }
[data-show="sunny"]      { --bg: #ffd84d; --ink: #2b1b00; --soft: #6b5216; --accent: #d9411a; --panel: rgba(43,27,0,.07); }
[data-show="marguerite"] { --bg: #dce4cf; --ink: #22301e; --soft: #55664d; --accent: #4f7232; --panel: rgba(34,48,30,.07); }
[data-show="dex"]        { --bg: #1834e6; --ink: #ffffff; --soft: #c3cbff; --accent: #ffd23a; --panel: rgba(255,255,255,.10); }
[data-show="hollis"]     { --bg: #3a0f15; --ink: #f4e2cb; --soft: #c9a88c; --accent: #dca65e; --panel: rgba(244,226,203,.08); }
[data-show="ash"]        { --bg: #573822; --ink: #f7e9d4; --soft: #d4b796; --accent: #f3a457; --panel: rgba(247,233,212,.08); }
:is([data-show="nova"], [data-show="sunny"], [data-show="marguerite"], [data-show="dex"], [data-show="hollis"], [data-show="ash"]) {
  --fill: var(--accent); --brand-sub: var(--soft); --glow: 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--body);
  transition: background-color 1.2s ease, color 1.2s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--glow);
  background: radial-gradient(60rem 40rem at 105% -5%, rgba(98, 52, 196, .32), transparent 70%),
              radial-gradient(40rem 30rem at -10% 110%, rgba(122, 216, 231, .07), transparent 70%);
  transition: opacity 1.2s ease;
}
@media (prefers-reduced-motion: reduce) { body, body::before { transition: none; } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--display); font-weight: 700; margin: 0; }
h2 { font-size: 1.15rem; font-variation-settings: "wdth" 90; margin-bottom: .75rem; }
main { padding: 0 var(--pad) 3rem; max-width: 1180px; margin: 0 auto; }

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem var(--pad); max-width: 1180px; margin: 0 auto;
}
/* The logo lockup: the ribbon mark on its own dark tile (it reads on every show's colours), then the
   wordmark as type so it takes the show's ink. */
.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand .mark {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent), 0 6px 18px -8px rgba(0,0,0,.6);
}
.wordmark { display: flex; flex-direction: column; }
.wordmark .name { font: 700 1.2rem/1 var(--brand); text-transform: uppercase; letter-spacing: .005em; }
.wordmark .sub { font: 500 .66rem/1 var(--brand); text-transform: uppercase; letter-spacing: .42em; color: var(--brand-sub); margin-top: .35rem; }
.links { margin-left: auto; display: flex; gap: 1.25rem; }
.chart-link {
  color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px; text-decoration-color: var(--accent);
}
.play {
  display: inline-flex; align-items: center; gap: .6rem; border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg); font: 700 1rem var(--body); padding: .7rem 1.2rem .7rem .8rem; border-radius: 999px;
}
.play svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.play .i-pause, .play[aria-pressed="true"] .i-play { display: none; }
.play[aria-pressed="true"] .i-pause { display: inline; }

.now { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: end; padding-top: 1rem; }
.cover { margin: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--panel); box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-blank { width: 100%; height: 100%; background: #16171b url(/static/brand/mark.png) center / cover no-repeat; }
.show-line { color: var(--soft); margin: 0 0 .5rem; font-size: 1.05rem; }
.show-line b { color: var(--ink); }
#title {
  font-size: clamp(2.4rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.025em;
  font-variation-settings: "wdth" 78, "opsz" 96; font-weight: 800; overflow-wrap: anywhere; max-width: 14ch;
}
.kind { color: var(--soft); margin: .9rem 0 0; }
.kind a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.progress { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; max-width: 34rem; }
.progress[hidden] { display: none; }
.progress .bar { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.progress .bar span { display: block; height: 100%; width: 0; background: var(--fill); border-radius: 3px; transition: width 1s linear; }
@media (prefers-reduced-motion: reduce) { .progress .bar span { transition: none; } }
.progress .left { font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; font-size: .95rem; }
.actions { display: flex; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.like, .quiet {
  border: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px;
  padding: .45rem 1rem; font: 700 .95rem var(--body); cursor: pointer;
}
.like[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.like .count { font-variant-numeric: tabular-nums; font-weight: 400; }
.quiet { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.next { margin-top: 1.75rem; }
.next ol { margin: 0; padding-left: 1.25rem; color: var(--soft); }
.next li { margin: .15rem 0; }

.lyrics { margin-top: 2rem; background: var(--panel); border-radius: 6px; padding: 1.25rem 1.5rem; }
.lyrics pre { margin: 0; white-space: pre-wrap; font: 400 1rem/1.7 var(--body); max-width: 60ch; columns: 2 26ch; column-gap: 3rem; }

/* Talk session panel: shown from 30 minutes before a session until it ends. */
.talk { margin-top: 2rem; background: var(--panel); border-radius: 6px; padding: 1.25rem 1.5rem; border-left: 4px solid var(--accent); }
.talk[hidden] { display: none; }
.talk-when { margin: 0 0 .25rem; color: var(--accent); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.talk h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: .4rem; overflow-wrap: anywhere; }
.talk-summary { margin: 0 0 1rem; max-width: 62ch; color: var(--soft); }
.talk-hosts { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.talk-hosts li { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.talk-hosts img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }
.talk-q { margin: 0 0 1rem; font: 700 1.15rem/1.3 var(--display); max-width: 48ch; }
.talk-q::before { content: "The hosts ask: "; color: var(--accent); font-family: var(--body); font-size: .85rem; display: block; }
.talk-form { max-width: 40rem; }
.talk-form label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .8rem; }
.talk-form input, .talk-form textarea {
  display: block; width: 100%; margin-top: .3rem; font: 400 1rem var(--body); color: var(--ink);
  background: var(--bg); border: 2px solid transparent; border-bottom-color: color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 4px; padding: .6rem .7rem;
}
.talk-form input:focus, .talk-form textarea:focus { border-color: var(--accent); outline: none; }
.talk-form[hidden] { display: none; }
.talk-said { list-style: none; margin: .5rem 0 0; padding: 0; color: var(--soft); font-size: .95rem; }
.talk-said li { padding: .3rem 0; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.talk-said b { color: var(--ink); }

/* The tuner dial: 24 hours, one band per show, a needle at now. */
.dial-wrap { margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.dial { position: relative; height: 5.5rem; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.dial .seg {
  /* Placed by start and length (set from JS) so blocks share the needle's scale; gaps stay gaps. */
  position: absolute; top: 0; bottom: 0; left: calc(var(--start) * 100%); width: calc(var(--len) * 100%); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; padding: 0 .6rem; min-width: 0;
  border-left: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 22%, transparent) 0 1px, transparent 1px 8px) bottom / 100% 10px no-repeat;
}
.dial .seg:first-child { border-left: 0; }
.dial .seg b { font: 700 1rem/1.1 var(--display); font-variation-settings: "wdth" 80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial .seg span { font-size: .85rem; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial .seg.on b { color: var(--accent); }
/* Talk sessions: a band over their show on the bar, labelled in a lane above it. */
.dial .seg-talk { display: none; }
.dial .band { position: absolute; top: 0; bottom: 0; left: calc(var(--start) * 100%); width: calc(var(--len) * 100%); z-index: 0;
  background: color-mix(in srgb, var(--accent) 32%, transparent); border-left: 2px solid var(--accent); }
.dial .seg { z-index: 1; } /* show names stay readable over a band */
.dial-lane { position: relative; height: 2.6rem; margin-bottom: .35rem; }
.dial-lane[hidden] { display: none; }
.dial-lane .tag { position: absolute; top: 0; bottom: 0; left: calc(var(--start) * 100%); width: calc(var(--len) * 100%); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 .75rem .1rem .45rem; border-left: 2px solid var(--accent); min-width: 0; }
.dial-lane .tag small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dial-lane .tag span { font: 600 .85rem/1.2 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dial-lane .tag.on span { color: var(--accent); }
.needle { position: absolute; top: -10px; bottom: -10px; width: 3px; background: var(--accent); border-radius: 2px; pointer-events: none; }
.needle::before { content: ""; position: absolute; top: -6px; left: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); }
.hours { display: flex; justify-content: space-between; color: var(--soft); font-size: .8rem; margin-top: .4rem; }

.lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.recent ol { list-style: none; margin: 0; padding: 0; }
.recent li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.recent time { color: var(--soft); font-variant-numeric: tabular-nums; }
.dedicate label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .8rem; }
.dedicate input, .dedicate textarea {
  display: block; width: 100%; margin-top: .3rem; font: 400 1rem var(--body); color: var(--ink);
  background: var(--panel); border: 2px solid transparent; border-bottom-color: color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 4px; padding: .6rem .7rem;
}
.dedicate input:focus, .dedicate textarea:focus { border-color: var(--accent); outline: none; }
.dedicate .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hint { color: var(--soft); margin: -.25rem 0 1rem; font-size: .95rem; }
.hint.small { font-size: .85rem; margin: .35rem 0 .8rem; }
.songpick { position: relative; }
.songpick > label { margin-bottom: 0; }
.song-results {
  list-style: none; margin: .25rem 0 0; padding: .25rem; background: var(--bg); border: 2px solid var(--accent);
  border-radius: 6px; max-height: 18rem; overflow-y: auto;
}
.song-results button {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: var(--ink); padding: .4rem .45rem; border-radius: 4px; font: inherit;
}
.song-results button:hover, .song-results button:focus-visible { background: var(--panel); }
.song-results img { width: 2.4rem; height: 2.4rem; border-radius: 3px; object-fit: cover; flex: none; }
.song-results span { display: flex; flex-direction: column; min-width: 0; }
.song-results b { font-size: .95rem; overflow-wrap: anywhere; }
.song-results small { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chosen {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .3rem 0 0;
  background: var(--panel); border-radius: 4px; padding: .5rem .7rem; font-weight: 700;
}
.chosen .quiet { padding: .2rem .4rem; }
.chosen[hidden], .song-results[hidden] { display: none; }
.send { border: 0; background: var(--accent); color: var(--bg); font: 700 1rem var(--body); padding: .75rem 1.4rem; border-radius: 999px; cursor: pointer; }
.status { min-height: 1.5em; color: var(--soft); }

.artist-posts { margin-top: 1.6rem; }
.artist-posts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.artist-posts li { font-size: .95rem; }
.artist-posts a { color: var(--ink); font-weight: 700; text-decoration-color: var(--accent); }
.small-link { margin: .6rem 0 0; font-size: .9rem; }
.small-link a { color: var(--soft); }

footer { padding: 2rem var(--pad) 3rem; max-width: 1180px; margin: 0 auto; color: var(--soft); font-size: .9rem; }
footer p { max-width: 62ch; margin: 0; }
footer .tagline {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; color: var(--ink);
  font: 500 .8rem/1 var(--brand); text-transform: uppercase; letter-spacing: .14em;
}
footer .tagline img { border-radius: 7px; }
footer .contact { margin-top: .5rem; }
footer .contact a { color: var(--ink); }

@media (max-width: 760px) {
  .now { grid-template-columns: 1fr; align-items: start; }
  .cover { max-width: 420px; }
  .lower { grid-template-columns: 1fr; }
  .lyrics pre { columns: 1; }
  .dial { height: auto; display: flex; flex-direction: column; border: 0; border-left: 2px solid var(--ink); }
  .dial .seg { position: static; width: auto; padding: .55rem .9rem; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: none; }
  .dial .seg:first-child { border-top: 0; }
  .needle, .hours, .dial .band, .dial-lane { display: none; }
  .dial .seg-talk { display: flex; border-left: 3px solid var(--accent); }
  .dial .seg-talk b { color: var(--accent); }
  .dial .seg.on { background: var(--panel); border-radius: 4px; }
}
@media (max-width: 420px) {
  .dedicate .pair { grid-template-columns: 1fr; } #play-label { display: none; } .play { padding: .7rem; }
  .brand { gap: .55rem; } .brand .mark { width: 36px; height: 36px; border-radius: 9px; }
  .wordmark .name { font-size: 1rem; } .wordmark .sub { font-size: .58rem; letter-spacing: .36em; }
}
@media (max-width: 560px) {
  .masthead { flex-wrap: wrap; row-gap: .6rem; }
  .links { order: 3; width: 100%; margin-left: 0; }
  .play { margin-left: auto; }
}