/* EKHO Sonic Chill — the 30 Sep 2026 additions (build_extras.py).
   Same tokens as site.css: true black, cyan -> violet, keycap corners. */

/* share rows (episode header, artist header) */
.share{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.phead .share{margin-top:16px}

/* 1. start times + now playing */
.tracks.timed .tr>button{grid-template-columns:52px 1fr 1fr 64px 60px 28px}
.tr .at{font-family:"IBM Plex Mono",monospace;color:var(--cyan);font-size:13px;text-align:right}
.tnote{margin:-10px 0 18px;color:var(--muted)}
.tnote b{color:var(--ink2);font-weight:500}
.note .tplay{margin:0 0 14px}
.note .tplay .btn .play{margin-right:2px}
.tmsg{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--cyan);letter-spacing:.04em}
.tr.playing>button{background:linear-gradient(90deg,rgba(63,215,255,.10),rgba(180,76,255,.04) 60%,transparent);box-shadow:inset 3px 0 0 var(--cyan)}
.tr.playing .n{color:var(--violet)}
.tr.playing .ti::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(63,215,255,.8);vertical-align:middle;animation:onair 1.6s ease-in-out infinite}
@keyframes onair{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.tr.playing .ti::after{animation:none}}

/* 3. genres */
a.tag.glink{transition:border-color .15s,color .15s}
a.tag.glink:hover,a.tag.glink:focus-visible{border-color:rgba(63,215,255,.6);color:var(--ink);outline:none}
.gchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:20px}
.gchips .label{margin-right:6px}
.gmore{display:flex;gap:8px;flex-wrap:wrap}
.gart{columns:4 200px;column-gap:40px}
.gart a{display:block;padding:5px 0;color:var(--ink2);break-inside:avoid}
.gart a:hover{color:var(--cyan)}
.gsongs a{display:grid;grid-template-columns:1fr 1fr 170px;gap:16px;align-items:center;padding:13px 6px;border-top:1px solid var(--line)}
.gsongs a:last-child{border-bottom:1px solid var(--line)}
.gsongs a:hover .ti{color:var(--cyan)}
.gsongs .ti{font-size:18px;font-weight:500}
.gsongs .ar{color:var(--ink2)}
.gsongs .epn{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);text-align:right;letter-spacing:.06em}
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.gtile{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--key);padding:22px 22px 24px;background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:inset 0 -3px 0 rgba(180,76,255,.22);transition:border-color .2s,transform .2s}
.gtile:hover,.gtile:focus-visible{border-color:rgba(63,215,255,.5);transform:translateY(-2px);outline:none}
.gtile .gn{font-family:"Anton";font-size:36px;text-transform:uppercase;line-height:1}
.gtile .gc{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--cyan);letter-spacing:.08em}
.gtile .gl{color:var(--muted);font-size:15px}

/* 4. press */
.press .facts{display:grid;grid-template-columns:170px 1fr;max-width:900px;border-top:1px solid var(--line)}
.press .facts dt,.press .facts dd{padding:14px 0;border-bottom:1px solid var(--line)}
.press .facts dt{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);padding-top:18px}
.press .facts dd{font-size:18px;color:var(--ink2)}
.press .kit textarea{min-height:110px}

/* 5. sign-up choices */
.lists{border:0;display:grid;gap:12px}
.lists legend{margin-bottom:10px}
.subform .chk,.chk{display:flex;gap:14px;align-items:center;font-size:19px;color:var(--ink2);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;border-radius:8px;border:1px solid rgba(63,215,255,.55);background:#07050d;box-shadow:inset 0 -2px 0 rgba(180,76,255,.35);display:grid;place-items:center;cursor:pointer}
.chk input::after{content:"";width:12px;height:12px;border-radius:4px;background:var(--grad);transform:scale(0);transition:transform .12s}
.chk input:checked::after{transform:scale(1)}
.chk input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media (max-width:900px){
  .tracks.timed .tr>button{grid-template-columns:34px 1fr 24px}
  .tracks.timed .tr .at{grid-column:2;text-align:left;font-size:12px}
  .gsongs a{grid-template-columns:1fr;gap:2px}
  .gsongs .epn{text-align:left}
  .press .facts{grid-template-columns:1fr}
  .press .facts dt{border-bottom:0;padding-bottom:0}
  .gtile .gn{font-size:30px}
}

/* 3. genre pages, approved layout (1 Oct 2026): jump links, A–Z artist wall, song list */
.jump{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.jump a{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(63,215,255,.35);border-radius:10px;padding:8px 14px}
.jump a:hover{border-color:var(--cyan)}
.sec small{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--muted);margin-left:10px;letter-spacing:.06em}
#artists,#songs,#episodes,.wt{scroll-margin-top:110px}
.gaz{padding:0!important;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.gaz a{font-family:"IBM Plex Mono",monospace;font-size:13px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--ink2)}
.gaz a:hover{border-color:var(--cyan);color:var(--cyan)}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.wt{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--key);background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:inset 0 -2px 0 rgba(180,76,255,.2);transition:border-color .15s,transform .15s}
.wt:hover,.wt:focus-visible{border-color:rgba(63,215,255,.55);transform:translateY(-1px);outline:none}
.wn{font-family:"Oswald";font-size:19px;font-weight:500;color:var(--ink);line-height:1.15}
.wm{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.sh,.gsr{display:grid;grid-template-columns:1.4fr 1fr 150px;gap:16px;align-items:center}
.sh{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 8px 10px}
.gsr{padding:12px 8px;border-top:1px solid var(--line)}
.gsr:last-child{border-bottom:1px solid var(--line)}
.gsr:hover{background:rgba(63,215,255,.05)}
.st b{display:block;font-family:"Oswald";font-weight:500;font-size:18px;color:var(--ink)}
.st i{display:block;font-style:normal;font-size:13px;color:var(--muted)}
.sa{color:var(--ink2)}
.se{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted);text-align:right;letter-spacing:.06em}
.se em{font-style:normal;color:var(--cyan);margin-left:6px}
@media (max-width:900px){.sh{display:none}.gsr{grid-template-columns:1fr;gap:3px}.se{text-align:left}.wall{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}

/* eight menu items (Genres, News and Press added 1-2 Oct 2026): the full menu bar stays on every
   desktop and laptop. On narrower windows it tightens in steps instead of hiding; below 1,040px
   the wordmark steps aside (the ESC logo stays). The hamburger is for phones and small tablets
   only (site.css, 900px and below). Tested every 20px from 901 to 1,520px: never under ~44px clear. */
@media (max-width:1365px) and (min-width:901px){.links{gap:20px;letter-spacing:.1em}}
@media (max-width:1240px) and (min-width:901px){
  .links{gap:15px;letter-spacing:.07em;font-size:14px}
  .brand span{font-size:18px}
  .navr{gap:8px}
  .navbtn{padding:9px 12px;font-size:12px;letter-spacing:.1em}
}
@media (max-width:1100px) and (min-width:901px){.links{gap:12px;letter-spacing:.05em;font-size:13px}}
@media (max-width:1040px) and (min-width:901px){.brand span{display:none}}

/* back link on pages whose menu bar floats over a header photo (Blog, About, Sign-up):
   sit it just under the menu bar instead of underneath it (2 Oct 2026) */
nav.top:not(.solid) + .backrow{position:absolute;left:0;right:0;top:96px;z-index:21;padding-top:0}
@media (max-width:900px){nav.top:not(.solid) + .backrow{top:86px}}

/* artist pages: Play from on every song, the playing song lit (2 Oct 2026) */
.app[data-at]{transition:background .2s}
.app.playing{background:linear-gradient(90deg,rgba(63,215,255,.10),rgba(180,76,255,.04) 60%,transparent);box-shadow:inset 3px 0 0 var(--cyan);padding-left:14px}
.app.playing .ti::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(63,215,255,.8);vertical-align:middle;animation:onair 1.6s ease-in-out infinite}
.app .row .tmsg{flex-basis:100%}
#aplabel{min-height:1.2em}

/* the control bar under the player (2 Oct 2026): previous, back 15s, play/pause,
   forward 30s, next — keycap buttons in the show's colors */
.mcbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.mcbar button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--key);
  background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:inset 0 -2px 0 rgba(180,76,255,.25);color:var(--ink);cursor:pointer;
  font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase;transition:border-color .15s,transform .1s}
.mcbar button:hover,.mcbar button:focus-visible{border-color:rgba(63,215,255,.6);outline:none}
.mcbar button:active{transform:translateY(1px)}
.mcbar .ic{display:inline-flex;color:var(--cyan)}
.mcbar .ic svg{width:18px;height:18px;fill:currentColor}
.mcbar .ic svg.ln{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mcbar .pp{min-width:112px;justify-content:center;background:var(--grad);border-color:transparent;color:#07030f;box-shadow:0 0 18px rgba(63,215,255,.25)}
.mcbar .pp .ic{color:#07030f}
.mcnow{flex-basis:100%;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--cyan);min-height:1.3em;margin-top:4px}
@media (max-width:600px){
  .mcbar{display:grid;grid-template-columns:1fr 1fr 1.4fr 1fr 1fr;gap:6px}
  .mcbar button{padding:0 6px;justify-content:center;height:48px}
  .mcbar [data-act="prev"] .lb,.mcbar [data-act="next"] .lb{display:none}
  .mcbar button{gap:4px;font-size:13px}
  .mcbar .pp{min-width:0}
  .mcnow{grid-column:1/-1}
}

/* Spotify (2 Oct 2026): a quiet second option beside Mixcloud, in the show's colors */
.ctas .btn.sp{display:inline-flex;align-items:center;gap:10px}
.btn.sp svg{width:18px;height:18px;fill:currentColor;color:var(--cyan)}
a.buy.sp{border-color:rgba(63,215,255,.35)}
.press .pbio p{color:var(--ink2);font-size:18px;line-height:1.6;max-width:820px;margin:0 0 14px}