/* EKHO Sonic Chill — ESC Radio, the 24/7 Live365 station (8 Oct 2026, build_live.py).
   Same tokens as site.css: true black, cyan -> violet, keycap corners. Never a stock red ON AIR light. */
.oa-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(63,215,255,.55);vertical-align:middle;margin-right:8px;flex:none}
body.live-on .oa-dot,.escdock.live.on .dk-dot{animation:oapulse 2.4s ease-in-out infinite}
@keyframes oapulse{0%,100%{opacity:1;box-shadow:0 0 12px rgba(63,215,255,.7)}50%{opacity:.45;box-shadow:0 0 4px rgba(180,76,255,.4)}}
@media (prefers-reduced-motion:reduce){body.live-on .oa-dot,.escdock.live.on .dk-dot{animation:none}}
.links a.navlive .oa-dot,#navmenu a.navlive .oa-dot{width:6px;height:6px;margin:-2px 7px 0 0}
#navmenu a.navlive .oa-dot{width:9px;height:9px;margin:-6px 12px 0 0}

/* the dock in live mode: no waveform, no song skipping — it's radio */
.escdock.live .dk-frame{height:0;margin-bottom:0}
.escdock.live [data-dk=prev],.escdock.live [data-dk=back],.escdock.live [data-dk=fwd],.escdock.live [data-dk=next],.escdock.live [data-dk=min]{display:none}
.dk-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--grad);margin-right:7px;vertical-align:middle;box-shadow:0 0 8px rgba(63,215,255,.6)}
.escdock.live .dk-epn{color:var(--ink)}

/* homepage band */
.block.onair{padding-top:0;padding-bottom:28px}
.oa{display:flex;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.oa .oa-t{flex:1;min-width:0}
.oa .label{display:flex;align-items:center}
.oa-now{font-family:Oswald,sans-serif;font-size:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.oa-next{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.oa .btns{display:flex;gap:10px;flex:none}
.oa .btns .btn{white-space:nowrap}
button.btn{font-family:inherit;cursor:pointer}
.btn[data-live-play].on{box-shadow:0 0 18px rgba(63,215,255,.35)}

/* episode pages: one quiet line under the player */
.oa-ep{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:14px 0 0;padding:12px 16px;border:1px dashed var(--line);border-radius:14px;color:var(--ink2);font-size:15px}
.oa-ep .t{flex:1;min-width:220px}
.oa-ep a.alink{color:var(--cyan)}

/* the Live page */
.onair-head .label{display:flex;align-items:center}
.oa-note{color:var(--muted);font-size:14px;margin-top:12px}
.oa-card{display:grid;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.oa-slot{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.oa-card .oa-now{font-size:26px;white-space:normal}
.oa-tz{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin:-6px 0 16px}
.lsdays{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lsday{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.015)}
.lsday h3{font-family:Oswald,sans-serif;font-weight:500;font-size:17px;letter-spacing:.02em;margin:0 0 10px;color:var(--ink)}
.lsday ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lsday li{display:grid;gap:2px;padding-left:12px;border-left:2px solid var(--line)}
.lsday li.premiere{border-left-color:rgba(63,215,255,.8)}
.lsday li.encore{border-left-color:rgba(180,76,255,.75)}
.lsday li.now{background:linear-gradient(90deg,rgba(63,215,255,.08),transparent)}
.lsday .lt{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink)}
.lsday .lk{font-size:15px;color:var(--ink2)}
.lsday .lp{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted)}
.lsday .nowtag{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--cyan);margin-left:8px}
.oa-blend{color:var(--muted);font-size:14.5px;margin-top:16px}
.oa-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.oa-list li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.oa-list li.cur{border-bottom-color:rgba(63,215,255,.35)}
.oa-list .tm{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--muted)}
.oa-list li.cur .tm{color:var(--cyan)}
.oa-list .so{font-family:Oswald,sans-serif;font-size:18px;color:var(--ink)}
.oa-list .by{color:var(--ink2);font-size:15px}
.oa-list .by a{color:var(--cyan)}
.oa-more{color:var(--muted);font-size:14.5px;margin-top:14px}
.oa-ways{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.oa-way{padding:16px 18px;border:1px solid var(--line);border-radius:14px}
.oa-way h3{font-family:Oswald,sans-serif;font-weight:500;font-size:17px;margin:0 0 6px}
.oa-way p{margin:0 0 10px;color:var(--ink2);font-size:14.5px}
.oa-way code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--cyan);word-break:break-all}
@media (max-width:900px){
  .oa{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .oa .btns{width:100%}
  .oa .btns .btn{flex:1;justify-content:center;text-align:center;padding-left:12px;padding-right:12px}
  .oa-card .oa-now{font-size:21px}
  .oa-list li{grid-template-columns:70px minmax(0,1fr);gap:10px}
}

/* ten menu items with Live: the bar keeps its stepped tightening (extras.css) but each step
   gives up a few pixels of gap, so the full bar still fits on one line at every desktop width */
@media (min-width:1366px){.links{gap:22px;letter-spacing:.12em}}
@media (max-width:1365px) and (min-width:1241px){.links{gap:13px;letter-spacing:.08em}}
@media (max-width:1240px) and (min-width:1101px){.links{gap:10px;letter-spacing:.05em}}
@media (max-width:1100px) and (min-width:901px){.links{gap:8px;letter-spacing:.03em}}

/* Play Episode N buttons that play in place: lit while that episode is playing (8 Oct 2026) */
.btn[data-ep-feed].on{box-shadow:0 0 18px rgba(63,215,255,.35)}

/* photo headers on Press, Genres, Artists and Charts (8 Oct 2026): the picture sits behind the page's own header,
   dark on the left where the title is and fading to black at the bottom, so the header grows with its text */
.phead.imghead{position:relative;isolation:isolate;background-color:#000;background-repeat:no-repeat;background-size:cover;
  background-position:right center;padding-top:190px!important;padding-bottom:40px!important}
.phead.imghead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.74) 38%,rgba(0,0,0,.14) 72%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 34%)}
.onair-intro .lede{max-width:760px}
@media (max-width:900px){
  .phead.imghead{padding-top:210px!important;background-size:auto 360px;background-position:68% top}
  .phead.imghead::before{background:linear-gradient(180deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.55) 150px,#000 350px)}
}
/* Charts: the title is long, so the light bars stay pinned to the far right on desktop and clear of it */
@media (min-width:901px){.phead.chhead.imghead{background-size:auto 100%;background-position:right center}}
@media (min-width:901px) and (max-width:1240px){.phead.chhead.imghead::before{background:linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.84) 62%,rgba(0,0,0,.35) 92%),linear-gradient(0deg,#000 0,rgba(0,0,0,0) 34%)}}