/* ============================================================
   Aesthetic: industrial / technical. Bone-white canvas, near-black
   ink, ZERO border radius anywhere, hairline rules, uppercase heads
   with tight negative tracking, mono for every micro-label, and a
   45-degree hatch used as the texture motif.
   ============================================================ */
:root{
  --bone:#f5f5f5;      /* page */
  --paper:#ebebeb;     /* recessed panel */
  --ink:#020202;       /* primary text */
  --coal:#101010;      /* inverted blocks */
  --coal2:#1f1d1c;
  --grey:#8a8380;      /* warm mid grey */
  --grey2:#5c5855;
  --line:#d8d5d3;      /* hairline on light */
  --line2:#2e2c2b;     /* hairline on dark */
  --hatch:#a49d9a;
  --live:#ff4b1f;      /* single accent — used sparingly */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bone);color:var(--ink);
  font-family:Geist,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:15px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}

/* hatch texture — the signature motif */
.hatch{
  background-image:repeating-linear-gradient(45deg,
    transparent 0px, transparent 2px,
    var(--hatch) 2px, var(--hatch) 3px,
    transparent 3px, transparent 5px);
}
.mono{font-family:"Geist Mono",ui-monospace,Menlo,monospace}

/* ---------- top bar ---------- */
header{
  position:sticky;top:0;z-index:100;background:var(--bone);
  border-bottom:1px solid var(--line);
}
.hrow{display:flex;align-items:center;gap:22px;padding:0 24px;height:52px;
  max-width:1440px;margin:0 auto}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.mark{width:19px;height:16px;flex:0 0 auto}
.mark svg{display:block;width:100%;height:100%}
.spacer{flex:1}
.hnav{display:flex;gap:2px}
.hnav a{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2);
  padding:16px 11px;transition:color .15s;display:flex;align-items:center;min-height:44px}
.hnav a:hover{color:var(--ink)}
.hnav a.on{color:var(--ink)}
.hbtn{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 15px;border:1px solid var(--ink);transition:.15s;white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hbtn.solid{background:var(--ink);color:var(--bone)}
.hbtn.solid:hover{background:transparent;color:var(--ink)}
.hbtn.ghost:hover{background:var(--ink);color:var(--bone)}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero-in{max-width:1440px;margin:0 auto;padding:52px 20px 44px;text-align:center;
  position:relative;z-index:2}
/* mark sits BESIDE the headline: one row instead of two, which is most of the
   height saving — the stacked glyph cost its own height plus a 30px margin. */
.lockup{display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,20px)}
.glyph{width:clamp(46px,5.2vw,64px);margin:0;flex:0 0 auto}
.glyph svg{width:100%;height:auto;display:block;opacity:0;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) .05s forwards}
@keyframes spin{to{transform:rotate(360deg)}}
h1{
  margin:0;font-weight:500;text-transform:uppercase;
  font-size:clamp(30px,6.1vw,74px);
  line-height:.92;letter-spacing:-.04em;
}
h1 .wd{display:inline-block;white-space:nowrap}
h1 .ch{display:inline-block;opacity:0;transform:translateY(0.5em);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.nb{white-space:nowrap}
.sub{margin:16px auto 0;max-width:min(96ch,92vw);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--grey);font-weight:400}
.cta{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.btn{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--ink);transition:.16s;
  display:inline-flex;align-items:center;gap:9px;min-height:44px}
.btn.solid{background:var(--ink);color:var(--bone)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}

/* terminal-style status strip, echoing the install-command bar */
.strip{margin:24px auto 0;max-width:620px;border:1px solid var(--line);
  background:#fff;display:flex;align-items:center;gap:0}
.strip .scell{padding:9px 13px;font-size:10.5px;color:var(--grey2);
  border-right:1px solid var(--line);white-space:nowrap}
.strip .scell:last-child{border-right:0;flex:1;text-align:left}
.strip b{color:var(--ink);font-weight:500}
.dot{display:inline-block;width:6px;height:6px;background:var(--live);
  margin-right:7px;vertical-align:1px;animation:blink 1.9s step-end infinite}
@keyframes blink{50%{opacity:.25}}

/* hatch band down each side of the hero */
.hero .edge{position:absolute;top:0;bottom:0;width:14%;opacity:.62;z-index:1}
.hero .edge.l{left:0;mask-image:linear-gradient(90deg,#000,transparent)}
.hero .edge.r{right:0;mask-image:linear-gradient(270deg,#000,transparent)}

/* ---------- section scaffolding ---------- */
.sec{border-bottom:1px solid var(--line)}
.sec-in{max-width:1440px;margin:0 auto;padding:0 20px}
.sec-head{display:flex;align-items:baseline;gap:18px;padding:30px 0 20px;
  border-bottom:1px solid var(--line)}
.sec-num{font-size:10.5px;letter-spacing:.18em;color:var(--grey)}
.sec-title{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.sec-meta{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--grey)}

/* ---------- filters ---------- */
.filters{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line)}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:13px 18px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey2);border-right:1px solid var(--line);
  transition:.15s;position:relative;display:flex;align-items:center;min-height:44px}
.chip:hover{color:var(--ink);background:var(--paper)}
.chip.on{color:var(--ink);background:var(--ink);color:var(--bone)}

/* ---------- channel grid: flush cells, hairline dividers ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(305px,1fr))}
.cell{
  position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px;cursor:pointer;background:var(--bone);transition:background .16s;
  min-height:182px;display:flex;flex-direction:column;
}
.cell:hover{background:var(--paper)}
.cell.on{background:var(--coal);color:var(--bone);border-color:var(--line2)}
.cell.on .c-tag,.cell.on .c-host{color:#9c9691}
.cell.on .c-idx{color:#6b6561}
.c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.c-idx{font-size:10px;letter-spacing:.16em;color:var(--grey)}
.c-cat{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;padding:2px 6px;color:var(--grey2)}
.c-cat.rec{color:var(--live);border-color:var(--live)}
.cell.on .c-cat{color:var(--bone);border-color:#4a4542}
.c-name{margin:15px 0 0;font-size:22px;font-weight:500;letter-spacing:-.035em;
  text-transform:uppercase;line-height:1.05}
.c-tag{margin:7px 0 0;font-size:12px;color:var(--grey2);flex:1}
.c-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.c-host{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.c-count{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);display:flex;align-items:center;gap:5px;margin-left:auto}
.c-count.on{color:var(--ink)}
.cell.on .c-count{color:#9c9691}
.cell.on .c-count.on{color:var(--bone)}
.c-count .lbl{color:var(--grey)}
.c-count.on .lbl{color:inherit;opacity:.65}
.c-count .lbl.off{opacity:.55;letter-spacing:.14em}
.pulse{width:5px;height:5px;background:var(--live);flex:0 0 auto;
  animation:blink 1.9s step-end infinite}
.c-rank{font-size:10px;letter-spacing:.16em;color:var(--grey)}
.cell.on .c-rank{color:#6b6561}
.c-live{margin-left:0;display:flex;gap:2px;align-items:flex-end;height:13px;opacity:0}
.cell.on .c-live{opacity:1}
.c-live i{width:2px;background:var(--live);height:3px;animation:eq .8s infinite ease-in-out}
.c-live i:nth-child(2){animation-delay:.1s}.c-live i:nth-child(3){animation-delay:.2s}
.c-live i:nth-child(4){animation-delay:.3s}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}

/* ---------- player dock ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--coal);
  color:var(--bone);border-top:1px solid var(--coal);
  transform:translateY(105%);transition:transform .36s cubic-bezier(.2,.9,.2,1);
}
.dock.up{transform:none}
.dock-in{max-width:1440px;margin:0 auto;padding-right:4px;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:0}
.play{width:62px;height:62px;flex:0 0 auto;display:grid;place-items:center;
  border-right:1px solid var(--line2);transition:.16s}
.play:hover{background:var(--coal2)}
.play svg{width:16px;height:16px;fill:var(--bone)}
.meta{padding:11px 18px;min-width:0}
.m-top{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.m-name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.m-live{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--live);color:var(--live);padding:1px 5px}
.m-now{font-size:12.5px;color:#a8a29d;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.m-now b{color:var(--bone);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  font-size:10.5px;font-family:"Geist Mono",monospace}
.m-track{color:var(--bone);font-weight:500;font-size:13.5px}
.m-bar{height:2px;background:#2a2725;margin-top:7px;max-width:460px;overflow:hidden}
.m-bar>span{display:block;height:100%;background:var(--live);transition:width 1s linear}
.m-next{font-size:10.5px;color:#6f6a66;margin-top:5px;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-right{display:flex;align-items:stretch;height:62px}
.vwrap{display:flex;align-items:center;gap:9px;padding:0 16px;
  border-left:1px solid var(--line2)}
/* 44px hit area for the volume slider: the track stays 2px visually, but the
   input is tall enough to grab on a phone (it also sits inside the dock, whose
   controls all use .tg's 44px minimum). */
.vol{width:82px;accent-color:var(--live);height:44px;padding:21px 0;box-sizing:border-box}
.tg{padding:0 18px;border-left:1px solid var(--line2);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#8a837f;transition:.15s;
  display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.tg:hover{color:var(--bone);background:var(--coal2)}
.tg.on{color:var(--live)}
.tg.call{min-width:52px;padding:0 14px}
.tg.call svg{display:block;width:16px;height:16px;fill:currentColor;transition:transform .18s}
.tg.call.arm{color:var(--bone);background:#2a241c}
.tg.call.rec{color:#fff;background:#8b2e1f}
.tg.call.rec svg{transform:rotate(135deg)}
.tg.call.sent{color:var(--live)}
.tg.call[disabled]{opacity:.4}

/* transcript drawer */
.tp{max-width:1440px;margin:0 auto;max-height:0;overflow:hidden;
  transition:max-height .3s ease}
.tp.open{max-height:260px;overflow-y:auto;border-top:1px solid var(--line2)}
.ln{display:flex;gap:14px;padding:9px 18px;font-size:13px;
  border-bottom:1px solid var(--line2);align-items:baseline}
/* chapter nav (prerecorded stations) */
.resume{display:none;align-items:center;gap:12px;padding:10px 18px;
  border-top:1px solid #2a2724;background:#17150f;font-size:11px;
  letter-spacing:.08em;color:#c9c3b8;flex-wrap:wrap}
.resume #resume-txt{margin-right:auto;color:#e8e2d6}
.resume .tg{white-space:nowrap}
/* Account: button in the header, panels as popovers anchored under it.
   These used to be full-width strips inside the dock; as popovers they need
   their own surface, border and shadow, and z-index above the hero. */
.acctwrap{position:relative;display:flex;align-items:center}
.signin,.acct{display:none;position:absolute;top:calc(100% + 9px);right:0;
  z-index:90;min-width:330px;max-width:min(94vw,470px);
  background:#141310;border:1px solid #322e29;box-shadow:0 14px 34px rgba(0,0,0,.6);
  padding:13px 15px;gap:9px;font-size:11px;letter-spacing:.08em;color:#c9c3b8}
.signin.show{display:flex;flex-direction:column}
.acct.show{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:360px}
.acct-top{display:flex;align-items:center;gap:10px}
.acct-sec{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid #322e29}
.acct-h{font-size:9.5px;letter-spacing:.14em;color:#8c857a}
.acct-key{display:flex;align-items:center;gap:8px;color:#e8e2d6;font-size:11px}
.acct-key code{font:inherit;letter-spacing:.04em}
.acct-key .tg{margin-left:auto}
.acct-priv{display:flex;flex-direction:column;gap:6px;color:#e8e2d6}
.acct-priv a{color:#e8e2d6}
.acct-priv a:hover{color:var(--live)}
/* The pfk_ keys that power each private station. A desk has one station and
   may have several keys; the prefix is the session id. */
.acct-privrow{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.acct-kps{display:flex;flex-wrap:wrap;gap:6px 10px}
.acct-kp{color:#8c857a;font-size:11px;letter-spacing:.04em;white-space:nowrap}
.acct-empty{color:#8c857a}
.si-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.si-label{margin-right:auto;color:#a9a294}
.signin input{flex:1 1 100%;min-width:0;background:#0f0e0c;border:1px solid #322e29;
  color:#e8e2d6;font:inherit;font-size:12px;padding:7px 10px;border-radius:5px;outline:none}
.signin input:focus{border-color:#4a443b}
.signin input::placeholder{color:#6b6659}
.si-msg{color:#c9705f;min-height:14px;font-size:11px}
.si-msg.ok{color:#7fa36a}
/* The agent-instructions payload is long by design (it carries the whole
   setup, key included). Keep it scrollable and monospaced so the owner can
   eyeball what they are about to paste, and selectable for the no-clipboard
   fallback path. */
.agent-inst{width:100%;margin-top:6px;padding:6px;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#e8e2d4;background:#14120f;border:1px solid #3a352c;border-radius:3px;resize:vertical;white-space:pre}
.acct .who{margin-right:auto;color:#e8e2d6}
.ch-row{display:grid;grid-template-columns:34px 1fr auto auto;gap:12px;align-items:baseline;
  padding:9px 18px;font-size:13px;border-bottom:1px solid var(--line2);
  cursor:pointer;transition:background .14s}
.ch-row:hover{background:#1b1917}
.ch-row.on{background:#201d1b}
.ch-row .ch-n{font-family:"Geist Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  color:var(--grey2)}
.ch-row.on .ch-n{color:var(--live)}
.ch-row .ch-t{color:#cfc9c4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-row.on .ch-t{color:var(--bone)}
.ch-row .ch-at,.ch-row .ch-when{font-family:"Geist Mono",monospace;font-size:9.5px;
  letter-spacing:.1em;color:#6f6a66;white-space:nowrap}
.ch-row.on .ch-when{color:var(--live)}
.ch-bar{height:2px;background:#2a2826;margin:0 18px 10px}
.ch-bar span{display:block;height:100%;background:var(--live);width:0}
.ln .who{flex:0 0 74px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey2);font-family:"Geist Mono",monospace}
.ln .said{color:#a8a29d}
.ln.cur .said{color:var(--bone)}
.ln.mus .who{color:var(--live)}
.ln.mus .said{color:var(--bone)}

/* ---------- footer ---------- */
footer{background:var(--coal);color:#8a837f;padding:40px 20px 44px;
  transition:padding-bottom .3s}
body.dockup footer{padding-bottom:132px}
.f-in{max-width:1400px;margin:0 auto;display:flex;gap:30px;
  align-items:flex-start;flex-wrap:wrap;padding:0 4px}
.f-logo{display:flex;align-items:center;gap:9px;color:var(--bone);
  font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.f-meta{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-align:right;
  line-height:2;max-width:100%}
.stat{padding:14px 20px;font-size:10.5px;letter-spacing:.12em;color:var(--grey);
  text-align:center;text-transform:uppercase}

/* ---------- songs (generated library) ---------- */
html{scroll-behavior:smooth}
.tools{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.qwrap{display:flex;align-items:center;gap:10px;padding:0 16px;
  border-right:1px solid var(--line);flex:0 1 360px}
.qwrap svg{width:13px;height:13px;flex:0 0 auto;stroke:var(--grey2);fill:none;stroke-width:2}
.q{flex:1;border:0;background:none;font:inherit;font-size:12.5px;letter-spacing:.06em;
  padding:14px 0;color:var(--ink);outline:none;min-width:0}
.q::placeholder{color:var(--grey);text-transform:uppercase;font-size:10.5px;letter-spacing:.16em}
.tools .filters{border-bottom:0;flex:1;min-width:0}
.song{display:grid;grid-template-columns:44px minmax(150px,1.05fr) minmax(0,2fr) 88px 58px 30px;
  align-items:center;border-bottom:1px solid var(--line);cursor:pointer;background:var(--bone);
  transition:background .14s}
.song:hover{background:var(--paper)}
.song.on{background:var(--coal);color:var(--bone);border-color:var(--line2)}
.s-idx{padding:16px;font-size:10px;letter-spacing:.16em;color:var(--grey)}
.s-title{padding:12px 14px 12px 0;font-size:14px;font-weight:500;min-width:0}
.s-artist{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song.on .s-artist{color:#9c9691}
.s-desc{padding:12px 16px;font-size:12.5px;color:var(--grey2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.song.on .s-desc{color:#a8a29d}
.s-genre{justify-self:start;margin-left:2px}
.s-dur{padding:0 12px;font-size:11px;color:var(--grey);letter-spacing:.08em;white-space:nowrap}
.s-pb{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  margin-right:14px;transition:.15s;color:inherit}
.s-pb svg{width:9px;height:9px;fill:currentColor}
.song:hover .s-pb{border-color:var(--ink);background:var(--ink);color:var(--bone)}
.song.on .s-pb{border-color:#4a4542;color:var(--live)}
.s-empty{padding:28px 22px;font-size:11px;letter-spacing:.16em;color:var(--grey);text-transform:uppercase}

@media(max-width:820px){
  /* multi-page now: the nav must stay reachable on phones. Wrap it to a
     second row and let it scroll horizontally instead of hiding it. */
  .hrow{flex-wrap:wrap;height:auto;padding:6px 16px 0}
  .hnav{order:9;flex-basis:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .hnav::-webkit-scrollbar{display:none}
  .hnav a{padding:11px 11px;white-space:nowrap}
  .hnav a:first-child{padding-left:4px}
  /* Account popover: anchor it to the header rather than the button so a wide
     panel cannot run off the right edge on a narrow phone. */
  .acctwrap{position:static}
  .signin,.acct{top:calc(100% + 4px);right:8px;left:8px;max-width:none;min-width:0}
  /* hero: keep the lockup on one row but let the mark shrink with the type */
  .hero-in{padding:30px 18px 30px}
  .glyph{width:clamp(34px,9vw,46px)}
  .strip{flex-wrap:wrap}
  /* keep the header to two rows on phones: LISTEN LIVE stays, RANDOM yields */
  #btn-random{display:none}
  /* songs rows: drop the six-column desktop grid for a clean phone layout
     (idx | title+artist | time | play); genre is already in the artist line */
  .song{grid-template-columns:34px minmax(0,1fr) 50px 30px}
  .s-desc,.s-genre{display:none}
  .s-idx{padding:13px 8px 13px 12px}
  .s-dur{padding:0 6px}
  .s-pb{margin-right:12px}
  .grid{grid-template-columns:1fr}
  .dock-in{grid-template-columns:auto 1fr}
  .dock-right{grid-column:1/-1;height:auto;border-top:1px solid var(--line2)}
  .vwrap{flex:1;border-left:0}
  .vol{flex:1;width:auto}
  .strip{flex-wrap:wrap}
  body.dockup footer{padding-bottom:210px}
  .f-meta{margin-left:0;text-align:left}
}