/* TJ Radio mini-player in the shared header (2026-10-26). Lives in the gap between the logo and the menu; it only takes
   the space the menu leaves, so it can never push or wrap the nav, and drops pieces as that space shrinks
   (volume, then meter, then genre, then the title). Phones: one round on/off button plus a mini cover
   in the logo row, which opens a small panel. Colours come from the header tokens (--hx-*), so the gear looks apply. */
.hx-inner{position:relative}
.hxp{flex:1 1 0;min-width:0;margin:0 -10px;padding:0 10px;display:flex;justify-content:center;container:hxp/inline-size;font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
.hxp[hidden]{display:none}
.hxp *{box-sizing:border-box}
.hxp-unit{display:flex;align-items:center;gap:10px;min-width:0;max-width:min(100%,470px);height:42px;padding:4px 12px 4px 5px;border:1px solid var(--hx-border);border-radius:999px;background:var(--hx-soft);color:var(--hx-dim)}
.hxp button{font:inherit;color:inherit;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hxp a,.hxp a:hover{border:0;background:none;text-decoration:none;color:inherit}
.hxp-tog{position:relative;flex:none;width:32px;height:32px;padding:0;border:1px solid var(--hx-border);border-radius:50%;background:var(--hx-panel);display:grid;place-items:center;color:var(--hx-deep)}
.hxp-tog:hover:not(:disabled){border-color:var(--hx-deep)}
.hxp-tog:disabled{opacity:.45;cursor:default}
.hxp-tog svg{width:14px;height:14px;display:block;fill:currentColor}
.hxp-tog .i-stop,.hxp.is-on .hxp-tog .i-play{display:none}
.hxp.is-on .hxp-tog .i-stop{display:block}
.hxp-tog::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--hx-border);box-shadow:0 0 0 2px var(--hx-soft)}
.hxp.is-on .hxp-tog{color:var(--hx-orange);border-color:var(--hx-orange)}
.hxp.is-on .hxp-tog::after{background:var(--hx-orange);animation:hxp-pilot 1.8s ease-in-out infinite}
@keyframes hxp-pilot{0%,100%{box-shadow:0 0 0 2px var(--hx-soft),0 0 0 2px rgba(196,74,38,.5)}50%{box-shadow:0 0 0 2px var(--hx-soft),0 0 0 6px rgba(196,74,38,0)}}
.hxp-now{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.hxp-cover{flex:none;display:block;width:30px;height:30px;border-radius:3px;overflow:hidden;background:var(--hx-panel)}
.hxp-cover svg,.hxp-cover img{display:block;width:100%;height:100%;object-fit:cover}
.hxp-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.hxp-title{font-weight:600;font-size:13px;color:var(--hx-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxp-genre{font-weight:600;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--hx-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hxp-now:hover .hxp-title{color:var(--hx-deep)}
.hxp-meter{flex:none;display:block;width:22px;height:16px;--viz-a:var(--hx-deep);--viz-b:var(--hx-orange)}
.hxp:not(.is-on) .hxp-meter{display:none}
.hxp-vol{flex:none;width:72px;margin:0;accent-color:var(--hx-deep);cursor:pointer}
.hxp a.hxp-here{display:none}
.hxp a:focus-visible,.hxp button:focus-visible,.hxp input:focus-visible{outline:2px solid var(--hx-orange);outline-offset:2px}
.hxp-more,.hxp-drop{display:none}
@container hxp (max-width:420px){.hxp-unit>.hxp-vol{display:none}}
@container hxp (max-width:340px){.hxp-meter{display:none!important}}
@container hxp (max-width:280px){.hxp-genre{display:none}}
@container hxp (max-width:170px){.hxp-txt{display:none}.hxp-unit{padding-right:5px}}
@container hxp (max-width:96px){.hxp-now{display:none}}
@media (max-width:760px){
 .hxp{position:absolute;top:10px;right:16px;margin:0;padding:0;flex:none;container-type:normal;display:block}
 .hxp-unit{height:36px;gap:6px;padding:2px;max-width:none}
 .hxp-now,.hxp-meter,.hxp-unit>.hxp-vol{display:none!important}
 .hxp-tog{width:30px;height:30px}
 .hxp-more{display:block;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:50%;overflow:hidden;background:var(--hx-panel)}
 .hxp-more .hxp-cover{width:30px;height:30px;border-radius:50%}
 .hxp-drop:not([hidden]){display:block;position:absolute;top:calc(100% + 8px);right:0;z-index:60;width:min(300px,calc(100vw - 32px));padding:14px;border:1px solid var(--hx-border);border-radius:6px;background:var(--hx-panel);color:var(--hx-dim);box-shadow:0 10px 26px rgba(20,18,10,.22)}
}
.hxp-drop .hxp-row{display:flex;align-items:center;gap:12px}
.hxp-drop .hxp-cover{width:52px;height:52px}
.hxp-drop .hxp-title{white-space:normal;font-size:15px;overflow-wrap:anywhere}
.hxp-drop .hxp-genre{margin-top:3px}
.hxp-status{min-height:0;margin:8px 0 0;font-size:12.5px;color:var(--hx-dim)}
.hxp-status:empty{display:none}
.hxp-go{display:block;width:100%;margin-top:12px!important;padding:10px 12px;border:1px solid var(--hx-deep);border-radius:3px;background:var(--hx-deep);color:var(--hx-panel)!important;font-weight:700!important;font-size:12.5px!important;letter-spacing:1.3px;text-transform:uppercase}
.hxp-go:disabled{opacity:.5}
.hxp-drop label{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:600;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.hxp-drop label .hxp-vol{flex:1;width:auto}
.hxp-links{display:flex;gap:18px;margin-top:12px;padding-top:10px;border-top:1px solid var(--hx-border)}
.hxp-links a{font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--hx-deep)!important}
/* page loading (soft navigation): a thin bar under the header */
html.hx-loading,html.hx-loading *{cursor:progress}
html.hx-loading .hx-bar::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:40%;background:var(--hx-orange);animation:hxp-load 1s ease-in-out infinite}
@keyframes hxp-load{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
/* "radio paused" / "resume" note */
.hxp-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:6px;background:#205552;color:#f8f3df;box-shadow:0 10px 26px rgba(20,18,10,.3);font:500 14px/1.4 'IBM Plex Sans',system-ui,sans-serif}
.hxp-note span{flex:1;min-width:0}
.hxp-note button{flex:none;margin:0;padding:8px 14px;border:1px solid #f8f3df;border-radius:3px;background:#f8f3df;color:#205552;font:700 12.5px/1.2 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.hxp-note .hxp-note-x{padding:6px 10px;background:transparent;color:#f8f3df;border-color:transparent;font-size:18px;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.hxp.is-on .hxp-tog::after,html.hx-loading .hx-bar::after{animation:none}}

/* 2026-10-26: soft nav moves focus to the page heading (screen readers); no visible box for that programmatic focus */
[tabindex="-1"]:focus{outline:none}
/* sets (2026-10-26) */
.hxp-sets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0}
.hxp-set{padding:6px 10px;border:1px solid var(--hx-deep);border-radius:3px;background:transparent;color:var(--hx-deep)!important;font-weight:700!important;font-size:11.5px!important;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;line-height:1.2}
.hxp-set:disabled{opacity:.5}
.hxp-setlab{flex-basis:100%;font-size:12px;color:var(--hx-dim)}
.hxp-setlab:empty{display:none}
[data-radio-newset][hidden],[data-radio-live][hidden]{display:none!important}
.hxp-shuf svg{width:15px;height:15px}
@media (max-width:760px){.hxp-unit>.hxp-shuf{display:none}}
.hxp-shuf::before,.hxp-shuf::after{display:none!important}