/* EIZO Station: a full-viewport stage under the site header with an overlay
   control bar (auto-hides while playing), a now-playing card and two side panels
   (stations + up next, mixer). Uses the Watch tokens from watch.css. */
.watch-station-page{overflow:hidden}
.watch-station-page .site-footer{display:none}
.watch-station-page .watch-main{min-height:0;padding:0}
.station{position:relative;height:calc(100dvh - var(--station-top,64px));background:#000;color:var(--w-ink,#f1f1ea);overflow:hidden;outline:none;isolation:isolate;
 --s-pad:max(16px,env(safe-area-inset-left));--s-pad-r:max(16px,env(safe-area-inset-right));--s-pad-b:max(12px,env(safe-area-inset-bottom))}
.station.is-full{height:100dvh}
.station-stage{position:absolute;inset:0;cursor:pointer;--pulse-stats-bottom:108px}
.station-canvas{display:block;width:100%;height:100%;background:#000}
.station.is-idle,.station.is-idle .station-stage{cursor:none}
/* Overlay chrome fades out when idle. */
.station-now,.station-bar,.station-panel{transition:opacity .35s ease,transform .35s ease}
.station.is-idle .station-now,.station.is-idle .station-bar{opacity:0;pointer-events:none}
.station.is-idle .station-bar{transform:translateY(12px)}
.station-now{position:absolute;z-index:3;top:max(14px,env(safe-area-inset-top));left:var(--s-pad);display:flex;gap:12px;align-items:center;max-width:min(520px,calc(100% - 32px));padding:10px 14px 10px 10px;border-radius:12px;background:#0b0b0acc;border:1px solid var(--w-line,#ffffff17);backdrop-filter:blur(8px)}
.station-now-art{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:none;background:#151513}
.station-now-art[hidden]{display:none}
.station-now-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.station-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--w-accent,#d3ff62)}
.station-now-title{font-size:17px;font-weight:700;line-height:1.25;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--w-ink,#f1f1ea)}
.station-now-series{margin:0;font-size:13px;color:var(--w-muted,#a3a59b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-now-link{font-size:13px;font-weight:600;color:var(--w-ink,#f1f1ea);text-decoration:underline;text-underline-offset:3px}
.station-now-link:hover{color:var(--w-accent,#d3ff62)}
.station-now-link[hidden],.station-now-series[hidden]{display:none}
.station-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:34px var(--s-pad-r) var(--s-pad-b) var(--s-pad);background:linear-gradient(180deg,#0000,#000000c0 55%)}
.station-row{display:flex;align-items:center;gap:6px;min-width:0}
.station-btn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--w-ink,#f1f1ea);border:1px solid transparent;font-size:16px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.station-btn:hover,.station-btn:focus-visible{color:var(--w-accent,#d3ff62);border-color:#d3ff6261;background:#ffffff0d}
.station-btn.is-on,.station-btn[aria-expanded="true"]{color:var(--w-accent,#d3ff62)}
.station-play{width:46px;height:46px;font-size:19px;background:var(--w-ink,#f1f1ea);color:#10110f}
.station-play:hover,.station-play:focus-visible{background:var(--w-accent,#d3ff62);color:#10110f}
.station-time{font-size:13px;font-variant-numeric:tabular-nums;color:var(--w-muted,#a3a59b);margin:0 6px;white-space:nowrap}
.station-volume{width:96px;accent-color:var(--w-accent,#d3ff62)}
.station-spacer{flex:1}
.station-big{position:absolute;z-index:4;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;font-size:30px;background:#0b0b0acc;border-color:var(--w-accent,#d3ff62)}
.station-big[hidden]{display:none}
.station-status{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,64px);padding:6px 12px;border-radius:8px;background:#000a;color:var(--w-muted,#a3a59b);font-size:14px}
.station-status[hidden],.station-status:empty{display:none}
/* Seek bar: a thin track that thickens on hover, a tick per shot, a hover preview. */
.station-seek{position:relative;height:18px;margin-bottom:4px;cursor:pointer;touch-action:none;outline-offset:2px}
.station-seek::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:2px;background:#ffffff33;transition:top .12s,height .12s}
.station-seek:hover::before{top:6px;height:6px}
.station-seek-fill{position:absolute;left:0;top:7px;height:4px;border-radius:2px;background:var(--w-accent,#d3ff62);pointer-events:none;transition:top .12s,height .12s}
.station-seek:hover .station-seek-fill{top:6px;height:6px}
.station-seek-knob{position:absolute;top:3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--w-accent,#d3ff62);box-shadow:0 0 0 3px #0006;opacity:0;transition:opacity .12s;pointer-events:none}
.station-seek:hover .station-seek-knob,.station-seek:focus-visible .station-seek-knob{opacity:1}
.station-seek-marks{position:absolute;inset:0;pointer-events:none}
.station-mark{position:absolute;top:5px;width:2px;height:8px;margin-left:-1px;background:#ffffffa0;border-radius:1px}
.station-tip{position:absolute;bottom:26px;width:140px;margin-left:-70px;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.station-tip[hidden]{display:none}
.station-tip img{width:140px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid #d3ff6261;background:#151513;box-shadow:0 8px 24px #000a}
.station-tip img[hidden]{display:none}
.station-tip span{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:#000c;padding:1px 6px;border-radius:5px}
/* Panels */
.station-panel{position:absolute;z-index:5;top:max(14px,env(safe-area-inset-top));right:var(--s-pad-r);bottom:calc(var(--s-pad-b) + 86px);width:min(340px,calc(100% - 32px));overflow-y:auto;overscroll-behavior:contain;padding:12px;border-radius:12px;background:#0b0b0ae8;border:1px solid var(--w-line,#ffffff17);backdrop-filter:blur(10px);scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}
.station-panel[hidden]{display:none}
.station-panel h2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--w-muted,#a3a59b);margin:6px 4px 8px}
.station-panel h2:not(:first-child){margin-top:16px}
.station-stations,.station-next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.station-pick,.station-next-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent;color:var(--w-ink,#f1f1ea);border:1px solid transparent;border-radius:8px;padding:6px 8px;cursor:pointer}
.station-pick{flex-direction:column;align-items:flex-start;gap:1px}
.station-pick:hover,.station-next-item:hover,.station-pick:focus-visible,.station-next-item:focus-visible{background:#ffffff0f;border-color:var(--w-line,#ffffff17)}
.station-pick.is-active{border-color:#d3ff6288;background:#d3ff620f}
.station-pick small,.station-next-text small{font-size:12px;color:var(--w-muted,#a3a59b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.station-next-item img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;flex:none;background:#151513}
.station-next-text{display:flex;flex-direction:column;min-width:0}
.station-next-text strong{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-fader{display:grid;grid-template-columns:70px 1fr auto auto;align-items:center;gap:8px;padding:6px 4px;font-size:13px}
.station-fader.is-master{grid-template-columns:70px 1fr}
.station-fader input{width:100%;accent-color:var(--w-accent,#d3ff62)}
.station-chip{min-width:30px;height:28px;border-radius:7px;border:1px solid var(--w-line,#ffffff17);background:var(--w-raise2,#1e1e1b);color:var(--w-ink,#f1f1ea);font-size:12px;font-weight:700;cursor:pointer;padding:0 8px}
.station-chip:hover,.station-chip:focus-visible{border-color:#d3ff6288}
.station-chip.is-on{background:var(--w-accent,#d3ff62);color:#10110f;border-color:var(--w-accent,#d3ff62)}
.station-chip.wide{width:100%;height:34px;text-align:left;padding:0 12px}
.station-mix-opts{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.station-hint{font-size:13px;color:var(--w-muted,#a3a59b);margin:4px}
/* Phones: smaller card, fewer controls on the row. */
@media (max-width:640px){
 .station-now{padding:6px 10px 6px 6px;gap:8px}.station-now-art{width:64px}.station-now-title{font-size:15px}.station-now-link{font-size:12px}
 .station-volume,.station-time{display:none}
 .station-btn{width:38px;height:38px;font-size:15px}.station-play{width:42px;height:42px}
 .station-row{gap:2px}
 .station-panel{left:var(--s-pad);right:var(--s-pad-r);width:auto;top:auto;max-height:62%}
}
@media (prefers-reduced-motion:reduce){.station-now,.station-bar,.station-panel{transition:none}}
/* The marketing site's display headings are tracked very tight (down to -7px); in the
   player every heading uses normal spacing, or titles pile their letters on each other. */
.station :is(h1,h2,h3,h4,h5,h6,strong,.station-now-title),.station-now :is(h1,h2,h3,h4,h5,h6,strong,.station-now-title){letter-spacing:normal}
.station-now-title{letter-spacing:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Visuals panel: looks (stackable) and widgets with a position each. */
.station-visuals h3{margin:0 0 10px;font-size:14px;letter-spacing:normal}
.station-visuals .station-sub{margin:12px 0 6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.station-chips{display:flex;flex-wrap:wrap;gap:6px}
.station-vis-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:8px;align-items:center;margin:0 0 6px}
.station-vis-place{height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.35);color:inherit;font-size:12px;padding:0 6px}
.station-vis-place:disabled{opacity:.4}
.station-btn.is-on{color:var(--accent,#d3ff62)}
/* Channel navigation stays available while the playback controls fade out. */
.station-channel-bar{position:absolute;z-index:5;inset:0 0 auto;display:flex;align-items:center;gap:10px;min-height:68px;padding:10px var(--s-pad-r) 10px var(--s-pad);background:linear-gradient(#0b0b0af5,#0b0b0ac9);border-bottom:1px solid var(--w-line,#ffffff17);cursor:auto}
.station-channel-current{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.station-channel-name{font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station-nav-button{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:44px;height:auto;padding:10px 14px;border-radius:9px;border-color:#ffffff28;background:#171916;font-size:14px;font-weight:650}
.station-nav-button[aria-expanded="true"]{background:#d3ff6217;border-color:#d3ff6299}
.station-now{top:82px}
.station-side{top:78px;width:min(430px,calc(100% - 32px));padding:0 14px 14px;background:#11120ff5}
.station-library-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;background:#11120f}
.station-library-heading h2{font-size:18px;text-transform:none;color:var(--w-ink,#f1f1ea);margin:0}
.station-library-heading .station-btn{width:44px;height:44px}
.station-channel-filters{display:flex;gap:8px;margin:12px 0 8px}
.station-channel-filters .station-chip{min-height:40px;padding:0 14px}
.station-channel-browse>.station-hint{margin:0 0 8px}
.station-channel-browse>.form-control{min-height:44px;width:100%;font-size:16px;background:#20221d;color:var(--w-ink,#f1f1ea);border:1px solid #ffffff30;border-radius:8px;padding:10px 12px}
.station-channel-group{border-bottom:1px solid #ffffff14;padding:3px 0}
.station-channel-group summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:46px;padding:8px 4px;font-size:14px;font-weight:650}
.station-channel-group summary::-webkit-details-marker{display:none}
.station-channel-group summary::before{content:'›';font-size:24px;font-weight:400;line-height:1;width:15px;text-align:center;transition:transform .15s}
.station-channel-group[open]>summary::before{transform:rotate(90deg)}
.station-channel-group summary small{margin-left:auto;font-size:12px;color:var(--w-muted,#a3a59b);font-variant-numeric:tabular-nums}
.station-channel-items{list-style:none;padding:0 0 8px;margin:0;display:flex;flex-direction:column;gap:4px}
.station-channel-row{display:flex;align-items:stretch;gap:4px}
.station-channel-row .station-pick{flex:1;min-width:0;flex-direction:row;align-items:center;gap:10px;min-height:64px;padding:8px}
.station-channel-cover{width:56px;height:42px;object-fit:cover;border-radius:5px;flex:none;background:#27291f}
.station-channel-cover[hidden]{display:none}
.station-channel-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.station-channel-text strong{font-size:14px;line-height:1.3;white-space:normal}
.station-pick.is-active .station-channel-text small{color:var(--w-accent,#d3ff62)}
.station-save{flex:none;width:44px;min-height:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:#787d70;cursor:pointer}
.station-save:hover,.station-save:focus-visible{border-color:#d3ff6261;color:var(--w-accent,#d3ff62)}
.station-save.is-saved{color:var(--w-accent,#d3ff62);background:#d3ff620b}
.station-empty{font-size:14px;line-height:1.6;padding:20px 8px;color:var(--w-muted,#a3a59b)}
.station-queue-browse[hidden],.station-channel-browse[hidden]{display:none}
.station-channel-group summary:focus-visible{outline:2px solid var(--w-accent,#d3ff62);outline-offset:-2px;border-radius:6px}
@media(max-width:640px){
 .station-channel-bar{gap:6px;min-height:68px}
 .station-channel-name{font-size:14px}
 .station-nav-button{padding:10px;gap:6px;font-size:13px}
 .station-nav-button i{display:none}
 .station-now{top:80px;max-width:calc(100% - 32px)}
 .station-side{top:78px;bottom:calc(var(--s-pad-b) + 82px);max-height:none;width:auto}
 .station-channel-cover{width:48px;height:36px}
}