/* hidden means hidden: a component's own display rule must never resurrect it (the LIVE badge showed in empty rooms). */
[hidden]{display:none!important}
dialog:not([open]){display:none}
:root { --ink-0:#0E0D0C; --ink-1:#1C1A17; --ink-2:#46433D; --ink-3:#7A7669; --ink-4:#BEB9A9; --paper-0:#FFFFFF; --paper-1:#FAF8F2; --paper-2:#F1EDE3; --paper-3:#E3DED1; --signal-500:#FF4B1F; --signal-600:#E23C13; --signal-100:#FFE2D8; --volt-500:#D9FF3D; --volt-600:#BBE016; --volt-100:#F2FFC9; --bg:var(--paper-1); --bg-sunken:var(--paper-2); --surface:var(--paper-0); --surface-raised:var(--paper-0); --surface-inverse:var(--ink-0); --text:var(--ink-0); --text-muted:var(--ink-2); --text-faint:var(--ink-3); --text-inverse:var(--paper-1); --border:var(--ink-0); --border-soft:var(--paper-3); --border-strong:var(--ink-0); --accent:var(--signal-500); --accent-hover:var(--signal-600); --on-accent:var(--paper-0); --accent-wash:var(--signal-100); --accent-2:var(--volt-500); --accent-2-hover:var(--volt-600); --on-accent-2:var(--ink-0); --accent-2-wash:var(--volt-100); --focus:var(--signal-500); --shadow-ink:var(--ink-0); --overlay:rgba(14,13,12,.72); --font-display:"Bricolage Grotesque", "Helvetica Neue", Helvetica, sans-serif; --font-sans:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono:"Space Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-xs:12px; --text-sm:14px; --text-lg:20px; --text-xl:25px; --text-2xl:31px; --text-3xl:39px; --text-4xl:49px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --radius-md:9px; --radius-lg:16px; --radius-pill:999px; --stroke:2px; --stroke-bold:3px; --stroke-marker:4px; --border-drawn:var(--stroke) solid var(--border); --shadow-hard:4px 4px 0 0 var(--shadow-ink); --shadow-hard-lg:7px 7px 0 0 var(--shadow-ink); --dur-base:220ms; --dur-beat:600ms; --ease-out:cubic-bezier(.16,1,.3,1); --ink:var(--text); --muted:var(--text-muted); --line:var(--border-soft); --paper:var(--surface); --dark:var(--bg); --lime:var(--accent-2); --orange:var(--accent); --warning:var(--accent); --blue:var(--text-faint); --card:var(--surface-raised); --font:var(--font-sans); --display:var(--font-display); --mono:var(--font-mono); --ad-break-preroll-bg:color-mix(in srgb, var(--accent) 18%, transparent); --ad-break-pending-bg:color-mix(in srgb, var(--warning) 18%, transparent); }
[data-theme="dark"] { --bg:#101011; --bg-sunken:#08080A; --surface:#17181A; --surface-raised:#1F2023; --surface-inverse:#F2F2F0; --text:#F3F3F1; --text-muted:#B7B8B6; --text-faint:#85878B; --text-inverse:#101011; --border:#32353A; --border-soft:#232528; --border-strong:#4A4E55; --accent:#FF5A33; --accent-hover:#FF7754; --on-accent:#14100E; --accent-wash:rgba(255,90,51,.14); --accent-2:#CBF24A; --accent-2-hover:#DCF87C; --on-accent-2:#121309; --accent-2-wash:rgba(203,242,74,.10); --focus:#CBF24A; --shadow-ink:rgba(0,0,0,.6); --overlay:rgba(4,4,5,.84); --ad-break-preroll-bg:color-mix(in srgb, var(--accent) 10%, transparent); --ad-break-pending-bg:color-mix(in srgb, var(--warning) 14%, transparent); }
* { box-sizing:border-box; }
@keyframes pr-bars { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
html { background:var(--dark); color:var(--ink); font-family:var(--font); }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--dark); }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.shell { max-width:1440px; min-height:100vh; margin:auto; padding:20px 28px 30px; }
.utility { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 0 18px; font-size:13px; letter-spacing:.02em; }
.brand { display:flex; gap:10px; align-items:center; font-family:var(--display); font-size:25px; font-weight:800; letter-spacing:-.05em; }
.signal { position:relative; display:inline-block; width:23px; height:23px; border:2px solid var(--lime); border-radius:50%; }
.signal:before,.signal:after { content:""; position:absolute; border:2px solid var(--lime); border-radius:50%; inset:4px; }
.signal:after { inset:8px; background:var(--lime); }
.utility-nav { display:flex; align-items:center; gap:18px; color:var(--muted); }
.subtle { color:var(--muted); }
.mode { padding:8px 11px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--ink); }
.main { display:grid; grid-template-columns:minmax(0,1.52fr) minmax(300px,.72fr); gap:28px; padding-top:27px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--text-faint); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }

.dot { width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--accent-wash); }
h1 { max-width:760px; margin:14px 0 10px; font-size:clamp(38px,5vw,75px); line-height:.91; letter-spacing:-.075em; font-weight:780; }
.deck { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.5; }
.host-row { display:flex; align-items:center; gap:11px; margin:23px 0 30px; font-size:14px; }
.avatar { width:31px;height:31px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--dark);font-family:var(--mono);font-weight:800;background:var(--orange); }
.avatar.small { width:25px;height:25px;font-size:var(--text-xs); }
.host-row strong { font-weight:720; }
.host-row span { color:var(--muted); }
.listen-card { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); padding:25px; border:var(--border-drawn); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); }
.listen-card:after { content:""; width:190px;height:190px;position:absolute;right:-95px;top:-95px;border:var(--stroke) solid var(--line);border-radius:50%;box-shadow:0 0 0 20px var(--accent-2-wash),0 0 0 40px var(--accent-2-wash); }
.card-top { position:relative;z-index:1; display:flex;justify-content:space-between;align-items:start;gap:15px; }
.label { font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.sync { display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700; }
.sync:before { content:""; width:7px;height:7px;border-radius:50%;background:var(--lime); }
.record { position:relative;z-index:1; display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:end;margin-top:43px; }
.art { width:120px; aspect-ratio:1; position:relative; overflow:hidden; border:var(--border-drawn); background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 5px,var(--border-soft) 5px 10px); }
.art:after { content:"";position:absolute;width:74px;height:74px;border:12px solid var(--ink);border-radius:50%;left:23px;top:23px;box-shadow:inset 0 0 0 7px var(--dark); }
.track h2 { margin:0;font-family:var(--display);font-size:clamp(26px,3vw,42px);line-height:.96;letter-spacing:-.035em; }
.track p { margin:10px 0 4px;font-size:16px; }
.track p[data-empty-track] { color:var(--muted);font-size:15px;line-height:1.4;display:flex;flex-wrap:wrap;gap:10px;align-items:center; }
.inline-empty-action { margin-left:6px;min-height:32px;padding:0 12px;border:1px solid var(--lime);background:var(--lime);color:var(--dark);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase; }
.track small { color:var(--muted);font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase; }
.timeline { position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:32px;font-size:12px;font-variant-numeric:tabular-nums; }
.bar { height:8px;border:2px solid var(--line);background:var(--dark);border-radius:9px;overflow:hidden; }.bar span{display:block;background:var(--orange);height:100%;width:38%;}
.play-row { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--line);margin-top:23px;padding-top:17px; }
.provider { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:720; }.apple { width:19px;height:19px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--dark);color:var(--lime);font-size:12px; }
.local-state{font:700 12px var(--font);color:var(--lime)}.sync-panel{position:relative;z-index:1;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}.sync-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.sync-panel h3{margin:0;font-size:13px}.sync-panel p{margin:4px 0 0;color:var(--muted);font-size:12px}.sync-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.sync-stat{border:1px solid var(--line);padding:8px;font:var(--text-xs) var(--mono);color:var(--muted)}.sync-stat b{display:block;color:var(--ink);font-size:13px;margin-top:4px}.sync-panel audio{display:block;width:100%;height:30px;margin-top:12px}.tap-listen{min-height:38px;border:1px solid var(--lime);background:var(--lime);color:var(--dark);font-weight:800;padding:0 12px}.youtube-player{width:100%;height:auto;min-height:200px;margin-top:12px;border:1px solid var(--line);background:var(--dark)}.soundcloud-player{width:100%;height:166px;margin-top:12px;border:1px solid var(--line);background:var(--dark)}.detected-provider{margin:8px 0 0;color:var(--lime);font:700 12px var(--mono);letter-spacing:.04em}@media(max-width:520px){.sync-stats{grid-template-columns:repeat(2,1fr)}}.host-controls{margin-top:28px;border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow-hard)}.host-controls-head{display:flex;justify-content:space-between;gap:16px;padding:18px}.host-controls h2{margin:6px 0;font-size:28px;letter-spacing:-.06em}.host-controls p{color:var(--muted);font-size:13px;line-height:1.45;max-width:520px;margin:0}.danger{height:40px;white-space:nowrap;border:1px solid var(--orange);background:var(--orange);color:var(--on-accent);font-weight:800;padding:0 12px}.host-tabs{display:flex;flex-wrap:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden}.host-tab{position:relative;flex:0 0 auto;min-height:42px;padding:0 var(--space-4);white-space:nowrap;border:0;background:transparent;color:var(--text-faint);font:700 var(--text-xs) var(--font-mono)}.host-tab.active{color:var(--text)}.host-tab.active:after{content:"";position:absolute;right:var(--space-3);bottom:0;left:var(--space-3);height:var(--stroke-marker);background:var(--accent)}.host-pane{padding:18px}.host-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.host-action{min-height:54px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:12px;font-weight:800;text-align:left;padding:10px}.host-action:hover{border-color:var(--lime);color:var(--lime)}.host-list{display:grid;gap:9px}.host-row-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:8px 0;font-size:13px}.host-row-item small,.host-prototype{display:block;color:var(--muted);font-size:var(--text-xs);line-height:1.45;margin-top:3px}.access-toggle{width:44px;height:24px;border:1px solid var(--lime);border-radius:99px;background:var(--lime)}.access-toggle:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:var(--dark);margin-left:auto;margin-right:3px}@media(max-width:790px){.host-controls-head{display:block}.danger{margin-top:13px}.host-grid{grid-template-columns:1fr}.host-controls{margin-top:22px}}
.notice { margin-top:27px; display:flex;align-items:flex-start;gap:11px;padding:15px 16px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:13px;line-height:1.45; }.notice b{color:var(--ink);}.notice .spark{color:var(--lime);font-size:17px;line-height:16px;}
.prototype-review{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.prototype-review .eyebrow{margin-bottom:8px}.state-nav{display:flex;gap:8px;flex-wrap:wrap}.state-nav .tool[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--dark);font-weight:800}.countdown{margin:0 0 22px;padding:15px 17px;border:2px solid var(--orange);background:var(--accent-wash);color:var(--ink);box-shadow:var(--shadow-hard)}.countdown strong{display:block;font-size:16px}.countdown p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.4}.countdown-time{font:800 22px var(--mono);color:var(--orange);float:right}.warning{border-color:var(--orange);background:var(--accent-wash)}.integration{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.integration div{border:1px solid var(--line);padding:12px;font-size:12px;line-height:1.4}.integration b{display:block;color:var(--lime);font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}.ended{max-width:760px;padding:54px 0}.ended h2{font:800 clamp(40px,6vw,68px)/.9 var(--display);letter-spacing:-.07em;margin:12px 0}.ended>p{color:var(--muted);line-height:1.55;max-width:610px}.history{margin-top:27px;border:2px solid var(--line);background:var(--card)}.history-head{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}.history ol{margin:0;padding:0 16px;list-style:none}.history li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}.history li:last-child{border:0}.history small{color:var(--muted);display:block;margin-top:3px}.quiet{color:var(--muted);font:12px var(--mono)}@media(max-width:790px){.integration{grid-template-columns:1fr}.ended{padding:26px 0}.countdown-time{float:none;display:block;margin-top:8px}}
.room-aside { display:flex; flex-direction:column; border:var(--border-drawn); min-height:600px; background:var(--surface); }
.count{color:var(--text-muted);font-size:var(--text-xs);font-family:var(--font-mono)}
.people { display:flex;gap:7px;padding:16px 18px;border-bottom:1px solid var(--line); }.people .avatar{border:2px solid var(--card);margin-right:-14px;}.guest-stack{margin-left:11px;padding:4px 0 0 17px;color:var(--muted);font-size:12px;}
.room-aside .tracklist{display:none}
.chat{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px var(--space-4);border-bottom:var(--stroke) solid var(--border)}
.chat-title{font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.chat-list{display:flex;flex-direction:column;gap:0;margin:0;padding:var(--space-2) var(--space-4);list-style:none;overflow-y:auto;flex:1;min-height:0}
/* Chat rows are article.message (app/views/chat-panel.mjs), laid out like the design's .chat-list rows. */
.chat .message{display:grid;grid-template-columns:36px 1fr auto;gap:var(--space-3);align-items:start;padding:var(--space-2) 0;border-bottom:1px dashed var(--border-soft)}
.chat .message:last-of-type{border-bottom:0}
.chat .message .chat-body{display:block;margin:0;min-width:0}
.chat-text{display:block;margin-top:var(--space-1);overflow-wrap:anywhere}
.chat-avatar{width:36px;height:36px;border:var(--stroke) solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--on-accent);font:800 var(--text-sm) var(--font-mono)}
.chat-avatar[data-tone="signal"]{background:var(--accent)}
.chat-avatar[data-tone="volt"]{background:var(--accent-2);color:var(--on-accent-2)}
.chat-avatar[data-tone="paper"]{background:var(--surface);color:var(--text)}
.chat-meta{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.chat-name{font:700 var(--text-sm) var(--font-sans);color:var(--text)}
.chat-role{font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;border-radius:99px}
.chat-role[data-role="cohost"]{color:var(--on-accent-2);border-color:var(--accent-2);background:var(--accent-2)}
.chat-time{font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase}
.chat-body{margin:var(--space-1) 0 0;font:var(--text-sm)/1.45 var(--font-sans);color:var(--text);overflow-wrap:anywhere}
.chat-remove{justify-self:end;align-self:start;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--border-soft);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-faint);opacity:0;transition:opacity 140ms var(--ease-snap)}
.chat-remove svg{width:14px;height:14px}
.chat .message:hover .chat-remove,.chat .message:focus-within .chat-remove{opacity:1}
@media (hover:none){.chat-remove{opacity:1}}
.chat-remove:hover,.chat-remove:focus-visible{color:var(--accent);border-color:var(--accent);opacity:1}
.chat .message.chat-system{display:flex;align-items:center;gap:var(--space-2);border-bottom:0}
.chat-system-icon{display:inline-flex;align-items:center;color:var(--text-faint)}
.chat-system-icon svg{width:10px;height:10px}
.chat-system-text{font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;color:var(--text-faint)}
.chat-empty,.tracklist-empty{margin:var(--space-4) 0;color:var(--text-muted);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.chat-follow{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3) 0;border-top:1px solid var(--line);background:var(--surface)}
.chat-follow[hidden]{display:none}
.chat-follow-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-sunken);color:var(--text);font:700 var(--text-xs) var(--font-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;align-self:flex-start}
.chat-follow-button[hidden]{display:none}
.main[hidden]{display:none}
.mobile-state-strip[hidden]{display:none}
.mobile-tab-bar[hidden]{display:none}
.chat-follow-button:hover,.chat-follow-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.chat-follow-button.is-following{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}
.chat-follow-button[disabled]{opacity:.5;cursor:not-allowed}
.chat-follow-button .chat-follow-icon{width:14px;height:14px;flex-shrink:0}
.chat-follow-button.is-busy{opacity:.6}
.chat-foot{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:var(--stroke) solid var(--border);background:var(--surface)}
.chat-foot[hidden]{display:none}
.chat-input{flex:1;min-width:0;min-height:40px;padding:0 var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--bg);color:var(--text);font:var(--text-sm) var(--font-sans)}
.chat-input::placeholder{color:var(--text-faint)}
.chat-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.chat-send{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;padding:0;border:var(--stroke) solid var(--text);border-radius:var(--radius-pill);background:var(--text);color:var(--bg);cursor:pointer}
.chat-send svg{width:18px;height:18px}
.chat-send:hover{transform:translate(-1px,-1px)}
.chat-send:active{transform:translate(2px,2px)}
.chat-send[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.chat-signin{justify-self:stretch;margin:var(--space-3) var(--space-4);align-self:flex-start}
.chat-signin[hidden]{display:none}
.chat-mutes{margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--bg-sunken)}
.chat-mutes[hidden]{display:none}
#live[data-mobile-tab="chat"] .room-aside .chat-mutes[hidden]{display:none}
.chat-mutes h3{margin:0 0 var(--space-2);font:700 var(--text-xs) var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.chat-mute-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) 0;font:700 var(--text-xs) var(--font-mono);color:var(--text-muted)}
.chat-unmute{border:1px solid var(--line);background:transparent;color:var(--text-muted);padding:2px 8px;font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:99px}
.chat-unmute:hover,.chat-unmute:focus-visible{color:var(--accent);border-color:var(--accent)}
.mobile-unread{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--on-accent);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;align-items:center;justify-content:center}
.mobile-unread[data-count]:not([data-count="0"]){display:inline-flex}
.mobile-unread[hidden]{display:none}
.room-tools { display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}.tool{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:8px 11px;font-size:12px;}.tool:hover{border-color:var(--lime);color:var(--lime);}
dialog { border:3px solid var(--line);border-radius:20px;max-width:570px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);padding:0;box-shadow:7px 7px 0 var(--shadow-ink); }.modal{padding:27px;}.modal h2{margin:10px 0;font-size:38px;letter-spacing:-.065em;line-height:.94;}.modal p{line-height:1.5;max-width:470px;}.modal .close{float:right;border:0;background:transparent;font-size:23px;}.modal input{width:100%;min-height:44px;margin-top:var(--space-2);padding:0 var(--space-3);border:var(--border-drawn);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:var(--text-sm) var(--font-sans);}.modal input::placeholder{color:var(--text-faint);}.modal input:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}.choices{display:grid;gap:9px;margin-top:20px;}.choice{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border:1px solid var(--border-soft);background:var(--surface);font-weight:700;text-align:left;}.choice small{color:var(--text-muted);font-weight:500;}.primary{border:0;background:var(--dark);color:var(--lime);padding:12px 16px;font-weight:800;margin-top:18px;}.primary[disabled]{opacity:.4;cursor:not-allowed;}
.setup { max-width:640px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6);}
.setup .view-head{margin-bottom:var(--space-2);}
.setup h2{font:800 clamp(var(--text-2xl),6vw,var(--text-3xl))/.96 var(--font-display);letter-spacing:-.035em;margin:var(--space-3) 0 var(--space-6);}
.setup fieldset{min-width:0;margin:0;padding:0;border:0;}
.setup fieldset + fieldset{margin-top:var(--space-6);}
.setup-label{display:block;margin:0 0 var(--space-3);font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}
.setup p{margin:0;color:var(--text-muted);line-height:1.45;}
.recovery { display:none;max-width:750px;padding:54px 0;}.recovery h2{font-size:43px;letter-spacing:-.07em;line-height:.95;margin:10px 0;}.recovery>p{max-width:650px;color:var(--muted);line-height:1.55;}.recover-card{border:1px solid var(--line);padding:20px;margin-top:26px;background:var(--card);}.recover-card h3{margin:0 0 8px;font-size:16px;}.recover-card p{color:var(--muted);font-size:14px;line-height:1.45;}.recover-card .choice{color:var(--ink);background:transparent;width:100%;}.recover-card .choice.selected{border-color:var(--lime);}.recover-card .choice:before{content:"";width:12px;height:12px;border:1px solid var(--muted);border-radius:50%;}.recover-card .choice.selected:before{background:var(--lime);border-color:var(--lime);box-shadow:inset 0 0 0 3px var(--ink-0);}
.screen[hidden]{display:none}.view-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.view-head .back{display:inline-flex;align-items:center;min-height:var(--tap-min,44px);padding:0;border:0;background:none;color:var(--text-muted);font:700 var(--text-sm) var(--font-sans);cursor:pointer;}
.listener-provider{display:block;max-width:480px;border:0;margin:0;padding:0}
.listener-provider-options{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.listener-option{position:relative;display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min,44px);padding:0 var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:700 var(--text-md) var(--font-sans);cursor:pointer}
.listener-option:before{content:"";width:18px;height:18px;flex:0 0 auto;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--surface)}
.listener-option-label{flex:1;min-width:0}
.listener-option input{position:absolute;opacity:0;pointer-events:none}
.listener-option:has(input:checked){background:var(--accent-2);color:var(--on-accent-2);border-color:var(--border)}
.listener-option:has(input:checked):before{background:var(--on-accent-2);border-color:var(--on-accent-2)}
.listener-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}#match-status{margin:6px 0 0;color:var(--ink);font:700 12px var(--font-mono);letter-spacing:.04em}.matches-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}.match-row{padding:14px;border:1px solid var(--line);background:var(--card);display:grid;gap:10px}.match-row-head{display:flex;flex-direction:column;gap:2px}.match-row-head strong{font:800 14px var(--font);letter-spacing:-.01em;color:var(--ink)}.match-row-head span{font:700 var(--text-xs) var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}.match-row.is-current strong{color:var(--lime)}.provider-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.provider-cell{border:1px solid var(--line);padding:8px 10px;background:var(--surface);display:grid;gap:6px;font:700 var(--text-xs) var(--mono);letter-spacing:.04em;text-transform:uppercase}.provider-cell[data-status=set]{border-color:var(--lime);color:var(--ink)}.provider-cell[data-status=auto]{border-color:var(--text-faint);color:var(--muted)}.provider-cell[data-status=missing]{border-color:var(--line);color:var(--muted);opacity:.85}.provider-cell .provider-status{font:700 var(--text-xs) var(--mono);letter-spacing:.1em}.provider-cell[data-status=set] .provider-status{color:var(--lime)}.provider-cell[data-status=missing] .provider-status{color:var(--text-faint)}.provider-form{display:grid;gap:6px}.provider-form input{min-height:34px;padding:0 8px;border:1px solid var(--line);background:var(--paper);font:600 var(--text-xs) var(--font-mono);color:var(--ink)}.provider-form input::placeholder{color:var(--text-faint)}.provider-form button{border:1px solid var(--dark);background:var(--dark);color:var(--lime);min-height:34px;padding:0 10px;font:700 var(--text-xs) var(--mono);letter-spacing:.06em;text-transform:uppercase}.provider-form button[disabled]{opacity:.4;cursor:not-allowed}.provider-cell[data-status=set] .provider-form button{background:var(--surface);color:var(--text-faint);border-color:var(--line)}.provider-cell .provider-link{font:600 var(--text-xs) var(--mono);color:var(--signal-500);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.provider-cell .provider-link:hover,.provider-cell .provider-link:focus{color:var(--signal-600)}.match-credential{margin:6px 0 0;font:700 var(--text-xs) var(--mono);color:var(--orange);letter-spacing:.06em;text-transform:uppercase}
@media(max-width:790px){.shell{padding:16px 16px 24px}.utility-nav .subtle{display:none}.main{grid-template-columns:1fr;gap:21px;padding-top:22px}h1{font-size:45px}.listen-card{padding:20px}.record{grid-template-columns:90px 1fr;gap:17px;margin-top:29px}.art{width:90px}.art:after{width:54px;height:54px;border-width:11px;left:18px;top:18px;box-shadow:inset 0 0 0 5px var(--ink-0)}.track h2{font-size:30px}.room-aside{min-height:390px}.room-tools{margin-top:14px}.notice{margin-top:20px}.recovery{padding:26px 0}.recovery h2{font-size:38px}.utility{padding-bottom:14px}.mode{padding:7px 9px}.modal{padding:21px}.modal h2{font-size:32px}}
.host-grid{display:flex;flex-wrap:wrap}.host-action{flex:1 1 120px}.host-transport{display:grid;gap:var(--space-4);padding:0 var(--space-4) var(--space-4)}.round-transports{display:flex;gap:var(--space-3);align-items:center}.round-transports .host-action{flex:0 0 56px;width:56px;height:56px;min-height:56px;padding:0;border:var(--border-drawn);border-radius:50%;background:var(--surface);box-shadow:2px 2px 0 var(--shadow-ink);color:var(--text);font:700 var(--text-xs) var(--mono);text-align:center}.round-transports .host-action:nth-child(2){width:64px;height:64px;flex-basis:64px;min-height:64px;background:var(--accent-2);color:var(--on-accent-2)}.round-transports .host-action:disabled{border-color:var(--border-soft);background:var(--bg-sunken);box-shadow:none;color:var(--text-muted);cursor:not-allowed}.transport-icon{display:grid;place-items:center}.transport-icon svg{width:21px;height:21px;fill:none}.host-endings{display:flex;gap:var(--space-2);flex-wrap:wrap}.host-endings .host-action{min-height:44px;text-align:center}.host-endings .signal-action{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.host-diagnostics{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3)}.host-diagnostics .host-action{min-height:44px;text-align:center;font-size:var(--text-xs)}.host-diagnostics .diagnostic-status{grid-column:1/-1;font:var(--text-xs) var(--mono);color:var(--text-muted)}.ad-break-controls{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:var(--stroke) solid var(--line);background:var(--accent-wash)}.ad-break-controls .host-action{flex:1 1 140px;min-height:44px;text-align:center}.ad-break-controls .signal-action{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.ad-break-controls .host-action:disabled{border-color:var(--border-soft);background:var(--bg-sunken);color:var(--text-muted);cursor:not-allowed}.countdown.ad-break{background:var(--accent-wash);border-color:var(--accent);color:var(--ink)}.countdown.ad-break .countdown-time{color:var(--accent)}.countdown.ad-break-preroll{border-color:var(--accent);background:var(--ad-break-preroll-bg)}.countdown.ad-break-pending{border-color:var(--orange);background:var(--ad-break-pending-bg)}.countdown.ad-break-pending .countdown-time{color:var(--orange)}.countdown.ad-break-active{border-color:var(--line);background:var(--bg-sunken);color:var(--text-muted)}.countdown.ad-break-active .countdown-time{color:var(--text)}.queue-note{display:block;font:700 var(--text-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}.queue-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-top:var(--stroke) solid var(--border-soft)}.queue-art{width:44px;aspect-ratio:1;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}.queue-copy{min-width:0;display:grid;gap:2px}.queue-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--text-sm) var(--font-display)}.queue-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:var(--text-xs)}.queue-copy .queue-meta{color:var(--text-faint);font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase}.queue-remove{min-height:32px;border:0;border-bottom:var(--stroke) solid var(--border);background:transparent;color:var(--text-muted);font:700 var(--text-xs) var(--mono)}.presentation-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0;padding:0;border:0}.presentation-choice legend{grid-column:1/-1;padding:0;font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase}.presentation-option{position:relative;display:grid;place-items:center;min-height:44px;border:var(--border-drawn);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:700 var(--text-sm) var(--font-sans);cursor:pointer}.presentation-option input{position:absolute;opacity:0;pointer-events:none}.presentation-option:has(input:checked){background:var(--accent-2);color:var(--on-accent-2);box-shadow:2px 2px 0 var(--shadow-ink)}.presentation-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.modal #provider-form{}.modal .presentation-choice{width:100%}#provider-form .primary{width:100%;min-height:44px;border:var(--border-drawn);border-radius:var(--radius-md);background:var(--accent-2);color:var(--on-accent-2);box-shadow:var(--shadow-hard);font:800 var(--text-sm) var(--font-sans)}#provider-form .primary:hover{background:var(--accent-2-hover)}.transport-slider{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:16px}.transport-slider label{min-width:0}.transport-slider input{width:100%}.transport-slider input{accent-color:var(--lime)}.transport-slider input:focus-visible{outline:3px solid var(--lime);outline-offset:3px}.transport-slider input::-moz-range-track{height:8px;border-radius:9px;background:var(--line)}.transport-slider input::-moz-range-progress{height:8px;border-radius:9px;background:var(--lime)}.transport-slider input::-moz-range-thumb{width:16px;height:16px;border:2px solid var(--dark);border-radius:50%;background:var(--lime)}.transport-slider input::-webkit-slider-thumb{background:var(--lime)}
.channel-header { display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) 0 var(--space-5);border-bottom:var(--stroke-bold) solid var(--border);margin-bottom:var(--space-6); }.host-avatar{width:44px;height:44px;background:var(--accent);border-color:var(--border);color:var(--on-accent)}.channel-copy{min-width:0;flex:1}.channel-name{font:800 var(--text-xl)/1.12 var(--display);letter-spacing:-.035em}.channel-meta,.shared-timeline{font:var(--text-xs) var(--mono);color:var(--text-faint);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-badge{display:inline-block;vertical-align:middle;margin-left:var(--space-2);padding:4px 7px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:700 var(--text-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase}.provider-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);font:700 var(--text-xs) var(--mono);white-space:nowrap}.provider-pill span:first-child{color:var(--text-faint)}.listen-card .record{margin-top:0}.track .label{display:block;color:var(--text-faint);font:var(--text-xs) var(--mono);letter-spacing:.14em}.track h1{margin:var(--space-2) 0 0;font:800 clamp(var(--text-2xl),5vw,var(--text-4xl))/.96 var(--display);letter-spacing:-.035em}.track p{color:var(--text-muted)}.shared-timeline{display:block;margin:var(--space-2) 0 0}.sync-panel{background:var(--bg-sunken);border:var(--border-drawn);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-4)}.sync-panel-head{align-items:center}.sync-status-copy{min-width:0}.sync{font:700 var(--text-xs) var(--mono);letter-spacing:.12em;text-transform:uppercase}.sync:before{background:var(--accent-2)}.sync-panel p{font-size:var(--text-sm);color:var(--text-muted)}.tap-listen{min-height:44px;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font-weight:700;transition:transform var(--dur-base) var(--ease-out)}.tap-listen:hover{transform:translateY(-2px)}.generated-player{display:none}.reaction-presence{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-5);flex-wrap:wrap}.reaction-bar{display:flex;gap:var(--space-2)}.reaction-bar button{height:34px;padding:0 12px;border:var(--border-drawn);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-faint);font:700 var(--text-xs) var(--mono);box-shadow:2px 2px 0 var(--shadow-ink)}.reaction-bar button:disabled{opacity:.55;cursor:not-allowed}.cohost-avatar{background:var(--accent-2);color:var(--on-accent-2)}
@media(max-width:790px){.channel-header{gap:var(--space-2);margin-bottom:var(--space-4)}.channel-name{font-size:var(--text-lg)}.channel-meta{max-width:170px}.provider-pill{padding:0 8px;max-width:112px;overflow:hidden}.provider-pill span:last-child{overflow:hidden;text-overflow:ellipsis}.listen-card .record{grid-template-columns:90px 1fr}.track h1{font-size:var(--text-2xl)}.sync-panel{padding:var(--space-3)}.reaction-presence{align-items:flex-start}.room-aside{min-height:360px}.timeline{margin-top:var(--space-5)}}
@media(max-width:520px){
.main > *,.record > *,.sync-panel-head > *,.transport-slider > *{min-width:0}
.channel-header{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start}
.provider-pill{grid-column:2;justify-self:start;max-width:100%;white-space:normal;min-height:var(--tap-min,44px)}
.provider-pill span:last-child{white-space:normal;overflow-wrap:anywhere}
.channel-meta{max-width:none;white-space:normal;overflow:visible;text-overflow:clip}
.listen-card{padding:var(--space-4)}
.listen-card .record{grid-template-columns:90px minmax(0,1fr);gap:var(--space-3);align-items:start}
.track h1{overflow-wrap:anywhere}
.timeline{grid-template-columns:max-content minmax(0,1fr) max-content;gap:var(--space-2)}
.sync-panel-head{align-items:stretch;flex-wrap:wrap}
.tap-listen{width:100%}
.host-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.host-tab{white-space:nowrap;min-width:min-content}
.transport-slider{grid-template-columns:max-content minmax(0,1fr) max-content;gap:var(--space-2)}
.transport-slider .transport-rail{min-width:0}
}
.mobile-tab-bar,.mobile-state-strip{display:none}
@media(max-width:719px){
.shell{padding:0 0 82px;max-width:100%;}
.utility{min-height:56px;padding:0 var(--space-4);border-bottom:var(--stroke-bold) solid var(--border)}
.brand{font-size:var(--text-lg)}.signal{width:18px;height:18px}.signal:before{inset:3px}.signal:after{inset:6px}
.utility-nav .subtle{display:none}.mode{min-height:36px;padding:6px 9px}
.main{display:block;padding:0}.main>section{padding:0 var(--space-4)}
.channel-header{margin:0 -0px var(--space-4);padding:var(--space-3) 0;border-bottom:var(--stroke-bold) solid var(--border)}
.room-aside{margin:0;border:0;border-top:var(--stroke-bold) solid var(--border);min-height:calc(100vh - 170px)}
.aside-status,.aside-presence{display:none}
.listen-card{box-shadow:2px 2px 0 var(--shadow-ink)}
.mobile-tab-bar{position:fixed;z-index:4;right:0;bottom:0;left:0;display:flex;align-items:stretch;padding:var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));border-top:var(--stroke-bold) solid var(--border);background:var(--surface)}
.mobile-tab{display:flex;flex:1;min-height:44px;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:var(--text-faint);font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase}
.mobile-tab span{display:grid;place-items:center;width:32px;height:26px;border:var(--stroke) solid transparent;border-radius:var(--radius-pill);font:var(--text-sm) var(--mono)}
.mobile-tab.active{color:var(--text)}.mobile-tab.active span{border-color:var(--border);background:var(--accent-2);color:var(--on-accent-2)}
.mobile-state-strip{position:sticky;z-index:3;top:0;margin:0;padding:var(--space-2) var(--space-4);border-bottom:var(--stroke) solid var(--border);background:var(--surface);box-shadow:2px 2px 0 var(--shadow-ink)}
.mobile-state-strip strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 var(--text-sm)/1.2 var(--display);letter-spacing:-.02em}.mobile-state-strip span{display:block;margin-top:2px;color:var(--text-faint);font:700 var(--text-xs) var(--mono);letter-spacing:.1em;text-transform:uppercase}
#live[data-mobile-tab="room"] .room-aside,#live[data-mobile-tab="room"] .mobile-state-strip{display:none}
#live[data-mobile-tab="tracklist"] .main>section>*{display:none}#live[data-mobile-tab="tracklist"] .room-aside{display:flex}
#live[data-mobile-tab="tracklist"] .room-aside .chat,#live[data-mobile-tab="tracklist"] .room-aside .chat-mutes{display:none}
#live[data-mobile-tab="tracklist"] .room-aside .tracklist{display:grid}
#live[data-mobile-tab="tracklist"] .room-aside .aside-status,#live[data-mobile-tab="tracklist"] .room-aside .aside-presence{display:none}
#live[data-mobile-tab="chat"] .main>section>*{display:none}
#live[data-mobile-tab="chat"] .room-aside{display:flex}
#live[data-mobile-tab="chat"] .room-aside .aside-tracklist,#live[data-mobile-tab="chat"] .room-aside .aside-status,#live[data-mobile-tab="chat"] .room-aside .aside-presence{display:none}
#live[data-mobile-tab="chat"] .room-aside .chat{display:flex}
#live[data-mobile-tab="chat"] .room-aside .chat-mutes{display:block}
#live[data-mobile-tab="tools"] .room-aside{display:none}#live[data-mobile-tab="tools"] .main>section>*{display:none}#live[data-mobile-tab="tools"] .main>section>.room-tools,#live[data-mobile-tab="tools"] .main>section>.host-controls,#live[data-mobile-tab="tools"] .main>section>#countdown-banner{display:flex}
#live[data-mobile-tab="tools"] .main>section>.room-tools{padding-top:var(--space-4);margin-top:0}#live[data-mobile-tab="tools"] .main>section>.host-controls{display:block}
#live[data-mobile-tab="tools"] .mobile-state-strip,#live[data-mobile-tab="tracklist"] .mobile-state-strip{display:block}
.host-controls{margin-top:var(--space-5)}
#take-it-home-dialog::backdrop{background:var(--overlay)}
.tracklist{list-style:none;padding:0;margin:var(--space-3) 0 var(--space-4);display:grid;gap:var(--space-2)}
.tracklist-row{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.tracklist-title{flex:1;min-width:0;font:700 var(--text-md)/1.3 var(--display);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracklist-actions{display:flex;gap:var(--space-3);align-items:center}
.tracklist-link{color:var(--signal-500);font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.tracklist-link:hover,.tracklist-link:focus{color:var(--signal-600)}
.tracklist-empty{margin:var(--space-4) 0;color:var(--text-muted);font:var(--text-xs) var(--font-mono);letter-spacing:.04em}
#take-it-home-youtube-row{margin:var(--space-3) 0 var(--space-4)}
#take-it-home-youtube{display:inline-block}
#take-it-home-empty{margin:var(--space-4) 0}
}
.room-key-field{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:var(--stroke) solid var(--line);background:var(--bg-sunken)}
.room-key-label{font:800 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.room-key-field input{min-height:44px;padding:0 var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:var(--text-sm) var(--font-sans)}
.room-key-field input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.room-key-field input::placeholder{color:var(--text-faint)}
.room-key-submit{min-height:44px;padding:0 var(--space-4);border:var(--stroke) solid var(--accent);background:var(--accent);color:var(--on-accent);font:800 var(--text-sm) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;justify-self:start;border-radius:var(--radius-md)}
.room-key-note{margin:0;font:700 var(--text-xs) var(--font-mono);color:var(--text-faint);min-height:14px}
.room-key-field.is-refused{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.room-key-field.is-refused input{border-color:var(--accent)}
.ad-break-row{padding:var(--space-3) var(--space-4);border-top:var(--stroke) solid var(--line);background:var(--bg-sunken);margin-top:var(--space-3)}
.ad-break-row .ad-break-controls{padding:0;background:transparent;border-top:0}
.diagnostics-details{margin-top:var(--space-4);border-top:var(--stroke) solid var(--line);padding-top:var(--space-3)}
.diagnostics-details>summary{font:800 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;list-style:none}
.diagnostics-details>summary::-webkit-details-marker{display:none}
.diagnostics-details>summary:after{content:"→";margin-left:var(--space-2);color:var(--text-faint)}
.diagnostics-details[open]>summary:after{content:"↓"}
.diagnostics-details .diagnostic-status{margin:var(--space-2) 0;font:700 var(--text-xs) var(--mono);color:var(--text-muted)}
.diagnostics-details .host-action{margin-top:var(--space-2)}
.room-key-field.is-refused .room-key-note{color:var(--accent)}
.signed-in-chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:4px 12px 4px 4px;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--surface);font:700 var(--text-xs) var(--font-mono);color:var(--text)}
.signed-in-avatar{width:28px;height:28px;border-radius:var(--radius-pill);background-color:var(--bg-sunken);background-size:cover;background-position:center;flex-shrink:0}
.signed-in-meta{display:flex;flex-direction:column;line-height:1.1}
.signed-in-meta strong{font:800 12px var(--font-mono);color:var(--text);letter-spacing:.04em}
.signed-in-meta .handle{font:600 var(--text-xs) var(--font-mono);color:var(--text-faint);text-transform:none;overflow-wrap:anywhere}
.signed-in-chip[hidden]{display:none}
.signin-error{margin:var(--space-2) 0 var(--space-3);padding:8px 10px;border:var(--stroke) solid var(--accent);border-radius:var(--radius-md);background:var(--bg-sunken);color:var(--accent);font:700 var(--text-xs) var(--font-mono)}
.signed-in-stack{width:36px;height:36px;border-radius:var(--radius-pill);background-color:var(--bg-sunken);background-size:cover;background-position:center;border:2px solid var(--card)}
.mode.subtle-ghost{border:var(--stroke) solid var(--line);background:transparent;color:var(--text-muted)}
#signin-dialog::backdrop{background:var(--overlay)}
#signin-dialog{border:var(--stroke) solid var(--border);border-radius:var(--radius-lg);background:var(--card);color:var(--text);max-width:420px;width:calc(100% - 32px);padding:0}
#signin-dialog .modal{padding:var(--space-4)}
#signin-dialog h2{margin:0 0 var(--space-2);font:800 var(--text-lg) var(--font-mono)}
#signin-dialog p{color:var(--text-muted);font-size:var(--text-sm)}
#signin-dialog .close{position:absolute;top:8px;right:8px}
#sign-in-button[data-loading]{opacity:.6;pointer-events:none}
[data-role-surface="locked-host"]{margin-top:var(--space-5)}
[data-role-surface="locked-host"] h2{margin:0 0 var(--space-2);font:800 var(--text-lg) var(--font-mono)}
[data-role-surface="locked-host"] p{color:var(--text-muted);margin:0}
.host-locked-pane{box-sizing:border-box;max-width:100%;padding:var(--space-4);background:var(--bg-sunken);border:2px solid var(--line);border-radius:var(--radius-md);box-shadow:0 4px 0 var(--line);color:var(--text-muted)}
.host-locked-pane .host-locked-notice{margin:0;font:var(--text-sm) var(--font-mono);color:var(--text)}
#host-controls[data-locked] .host-controls-head .eyebrow{color:var(--text-faint)}
#host-controls[data-locked] .round-transports button[data-room-action]{opacity:.5;pointer-events:none}
.claim-cta{display:inline-flex;align-items:center;gap:var(--space-2);min-height:42px;padding:10px 16px;border:var(--stroke-bold) solid var(--accent);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:800 var(--text-sm) var(--font-mono);letter-spacing:.04em;cursor:pointer;margin-top:var(--space-4)}
.claim-cta[disabled]{opacity:.6;cursor:not-allowed}
.cohost-controls{margin-top:var(--space-4);border:var(--stroke) solid var(--line);border-radius:var(--radius-md);background:var(--bg-sunken);padding:var(--space-4)}
.cohost-head{font:700 var(--text-xs) var(--font-mono);color:var(--text-faint);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--space-3)}
.cohost-list{list-style:none;padding:0;margin:0 0 var(--space-3);display:flex;flex-direction:column;gap:6px}
.cohost-list li{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);padding:8px 10px;border:var(--stroke) solid var(--line);border-radius:var(--radius-md);background:var(--card);font:var(--text-xs) var(--font-mono);color:var(--text)}
.cohost-list li.cohost-empty{justify-content:center;color:var(--text-faint);font-style:italic}
.cohost-list li button.mode{min-height:30px;padding:5px 10px;font-size:var(--text-xs)}
.cohost-form{display:flex;gap:8px;align-items:center;margin-top:var(--space-2)}
.cohost-form input{flex:1;min-width:0;min-height:36px;padding:7px 10px;border:var(--stroke) solid var(--line);border-radius:var(--radius-md);background:var(--card);color:var(--text);font:var(--text-sm) var(--font-mono)}
.cohost-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.cohost-form button.mode{min-height:36px;padding:7px 12px;background:var(--accent);color:var(--on-accent);border-color:var(--accent);font:700 var(--text-xs) var(--font-mono)}
.cohost-form button.mode.subtle-ghost{background:transparent;color:var(--text-muted)}
.account-links-list{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.account-link-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-height:var(--tap-min,44px);padding:var(--space-3) var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.account-link-name{font:800 var(--text-sm) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.account-link-status{font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.account-link-row[data-loading]{opacity:.7}
.account-link-row[data-loading] .account-link-status{color:var(--text-muted)}
.account-link-row[data-linked="true"] .account-link-status{color:var(--accent-2)}
.account-link-button{margin-left:auto;min-height:44px;padding:0 var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--text);color:var(--bg);box-shadow:2px 2px 0 var(--shadow-ink);font:700 var(--text-sm) var(--font-sans);cursor:pointer}
#account-links .account-link-button,#account-links .account-link-unlink{white-space:nowrap}
.account-link-button:hover:not([disabled]){transform:translate(-1px,-1px);box-shadow:var(--shadow-hard)}
.account-link-button[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;border-color:var(--border-soft);background:var(--surface);color:var(--text-faint)}
.account-link-unlink{margin-left:auto;min-height:44px;padding:0 var(--space-4);border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text);box-shadow:2px 2px 0 var(--shadow-ink);font:700 var(--text-sm) var(--font-sans);white-space:nowrap;cursor:pointer}
.account-link-unlink:hover{border-color:var(--accent);color:var(--accent)}
#account-links .account-link-row{flex-wrap:nowrap;gap:var(--space-3)}
#account-links .account-link-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#account-links .account-link-status{display:none}
#account-links .account-link-button,#account-links .account-link-unlink{flex:0 0 auto}
.account-links-signin{width:100%;margin-top:var(--space-2)}
.matches-head{margin:0 0 12px;display:grid;gap:6px}
.matches-coverage{margin:0;padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.match-candidate{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 8px;background:var(--accent-wash);border:1px dashed var(--accent)}
.match-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--card);color:var(--ink);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.match-pill[data-candidate-confidence-pill="high"]{border-color:var(--lime);color:var(--lime)}
.match-pill[data-candidate-confidence-pill="low"]{border-color:var(--accent);color:var(--accent)}
.match-accept{margin-top:6px;min-height:34px;padding:0 12px;border:var(--stroke) solid var(--accent);border-radius:var(--radius-md);background:var(--accent);color:var(--on-accent);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.match-accept:hover{border-color:var(--lime);background:var(--lime);color:var(--dark)}
.take-it-home-services{margin-top:var(--space-4);padding-top:var(--space-4);border-top:var(--stroke) solid var(--line)}
.take-it-home-services h3{margin:0 0 var(--space-2);font:800 var(--text-md) var(--font-mono);letter-spacing:.02em}
.take-it-home-services .quiet{margin:0 0 var(--space-3);color:var(--text-muted);font-size:var(--text-sm)}
.take-it-home-services .account-links-list{margin-top:0}
.take-it-home-result{margin-top:var(--space-3);padding:var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--bg-sunken);display:grid;gap:var(--space-2)}
.take-it-home-result .quiet{margin:0;color:var(--text);font-size:var(--text-sm)}
.take-it-home-result .quiet[data-tone="transient"]{color:var(--accent)}
.take-it-home-result .quiet[data-tone="revoked"]{color:var(--accent)}
.take-it-home-result .quiet[data-tone="notConfigured"]{color:var(--text-muted)}
.take-it-home-result a.primary{justify-self:start}
.take-it-home-result-not-on{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.take-it-home-result-not-on li{padding:6px 8px;border:var(--stroke) solid var(--line);border-radius:var(--radius-sm);background:var(--card);font:700 var(--text-xs) var(--font-mono);color:var(--text);display:flex;flex-direction:column;gap:2px}
.take-it-home-result-not-on li small{color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.take-it-home-result-not-on .not-on-service{color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.take-it-home-result-close{justify-self:end}
.take-it-home-service-row .account-link-button{min-width:140px}

/* ============================================================
   U1 room shell — ported from docs/design (Button, ChannelHeader,
   NowPlayingHero, ArtworkSlot, EqBars, SyncStatus, TabBar, Card).
   Rules here intentionally override the legacy room markup.
   ============================================================ */

/* Button.jsx: sans, sentence case, pill, hard shadow */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);cursor:pointer;transition:box-shadow 140ms var(--ease-snap),transform 140ms var(--ease-snap)}
.button[hidden]{display:none}
.button-primary{min-height:44px;padding:0 var(--space-5);background:var(--text);color:var(--bg);box-shadow:2px 2px 0 var(--shadow-ink);font-size:15px}
.button-primary:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-hard)}
.button-primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow-ink)}
.button-primary[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--shadow-ink)}
.button-secondary{min-height:44px;padding:0 var(--space-5);background:var(--surface);color:var(--text);box-shadow:2px 2px 0 var(--shadow-ink);font-size:var(--text-sm)}
.button-secondary:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-hard)}
.button-secondary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow-ink)}
.primary{border:var(--stroke) solid var(--border);background:var(--text);color:var(--bg);font-family:var(--font-sans);font-weight:700;border-radius:var(--radius-pill);box-shadow:2px 2px 0 var(--shadow-ink)}
.primary:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-hard)}

/* ChannelHeader */
.channel-header{position:relative;display:flex;align-items:center;gap:var(--space-4);padding:14px 20px;background:var(--surface);border-bottom:var(--stroke-bold) solid var(--border);margin:0 0 var(--space-5)}
.channel-wordmark{font-family:var(--font-display);font-weight:800;font-size:var(--text-xl);letter-spacing:-.035em;white-space:nowrap;flex:0 0 auto}
.channel-header .host-avatar{width:44px;height:44px;background:var(--accent);color:var(--on-accent);border:var(--stroke) solid var(--border)}
.channel-copy{flex:1;min-width:0}
.channel-name{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font:800 var(--text-xl)/1.12 var(--font-display);letter-spacing:-.035em}
.channel-meta{display:flex;align-items:baseline;gap:6px;font:var(--text-xs) var(--font-mono);color:var(--text-faint);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;flex:0 0 auto}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;color:var(--text);background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);box-shadow:2px 2px 0 var(--shadow-ink);cursor:pointer;transition:box-shadow 140ms var(--ease-snap),transform 140ms var(--ease-snap)}
.icon-button svg{width:18px;height:18px}
.icon-button:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-hard)}
.icon-button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--shadow-ink)}
.icon-button[hidden]{display:none}
.signed-in-chip{padding:0;overflow:hidden}
.signed-in-chip .signed-in-avatar,.signed-in-avatar{display:block;width:36px;height:36px;border-radius:var(--radius-pill);background-color:var(--bg-sunken);background-size:cover;background-position:center}
.account-menu{position:absolute;z-index:7;top:calc(100% + 4px);right:20px;display:flex;flex-direction:column;gap:var(--space-3);min-width:190px;padding:var(--space-3);background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard)}
.account-menu[hidden]{display:none}
.account-menu .signed-in-meta{display:flex;flex-direction:column;gap:2px}
.probe-badge{font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);border:var(--stroke) solid var(--border-soft);border-radius:var(--radius-pill);padding:1px 7px}
.probe-badge[hidden]{display:none}

/* NowPlayingHero + ArtworkSlot */
.listen-card:after{content:none}
.listen-card{padding:var(--space-5)}
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:var(--space-4)}
.artwork-slot{position:relative;align-self:center;width:240px;height:240px;flex:0 0 auto;border:var(--stroke) solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 6px,var(--surface) 6px 12px);display:flex;align-items:flex-end;box-shadow:var(--shadow-hard-lg)}
.artwork-slot[data-presentation="video"]{width:100%;height:auto;aspect-ratio:16/9;align-self:stretch}
#youtube-slot{position:absolute;inset:0}
#youtube-slot[hidden]{display:none}
.youtube-player{width:100%;height:100%;margin:0;border:0;background:var(--bg-sunken)}
.youtube-player[hidden]{display:none}
.generated-player{display:none}
#soundcloud-slot{display:none;margin-top:var(--space-4)}
#soundcloud-slot:has(.soundcloud-player:not([hidden])){display:block}
.soundcloud-player{width:100%;height:166px;margin:0;border:var(--stroke) solid var(--border);background:var(--bg-sunken)}
.soundcloud-player[hidden]{display:none}
.hero-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.hero-copy .eyebrow{font:var(--text-xs) var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.hero-copy .eyebrow[hidden]{display:none}
#now-title{margin:0;font:800 clamp(var(--text-2xl),5vw,var(--text-4xl))/.96 var(--font-display);letter-spacing:-.035em;overflow-wrap:anywhere}
.hero-artist{margin:0;font-size:var(--text-lg);color:var(--text-muted)}
.hero-artist:empty{display:none}
.timeline{margin-top:var(--space-2);font:var(--text-xs) var(--font-mono);color:var(--text-muted)}
.timeline[hidden]{display:none}
.timeline .bar{border:var(--stroke) solid var(--border);background:var(--bg-sunken);border-radius:var(--radius-pill)}
.timeline .bar span{background:var(--accent)}
.shared-timeline{display:block;margin:0;font:var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.shared-timeline[hidden]{display:none}

/* SyncStatus */
.sync-panel{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding:10px 14px;background:var(--bg-sunken);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);position:relative;z-index:1}
.sync-panel[hidden]{display:none}
.sync-panel[data-state="synced"]{background:var(--accent-2-wash)}
.sync-panel[data-state="reconnecting"],.sync-panel[data-state="unavailable"]{background:var(--accent-wash)}
.sync-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;color:var(--text-faint)}
.sync-icon.sync-bars{width:auto;align-items:flex-end;gap:3px}
.sync-icon.sync-bars i{display:block;width:3px;height:16px;background:var(--accent-2);transform-origin:bottom;animation:pr-bars var(--dur-beat,600ms) var(--ease-out) infinite}
.sync-icon.sync-bars i:nth-child(2){height:60%;animation-delay:80ms}
.sync-icon.sync-bars i:nth-child(3){height:80%;animation-delay:140ms}
.sync-icon.sync-bars i:nth-child(4){height:45%;animation-delay:40ms}
.sync-dot{display:block;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--text-faint)}
.sync-panel[data-state="reconnecting"] .sync-dot,.sync-panel[data-state="unavailable"] .sync-dot{background:var(--accent)}
.sync-status-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.sync{font:700 var(--text-xs) var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.sync-copy{font-size:var(--text-sm);color:var(--text-muted)}
.sync-match{display:none}
.sync-provider{font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.sync-panel #tap-listen{margin-left:auto}

/* Claim card (Card.jsx) */
.claim-slot:empty{display:none}
.claim-card{margin:0 0 var(--space-5);padding:var(--space-5);background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.claim-card[hidden]{display:none}
.claim-card h2{margin:0;font:800 var(--text-2xl)/.96 var(--font-display);letter-spacing:-.035em}
.claim-card p{margin:0 0 var(--space-2);color:var(--text-muted)}

/* CountdownBanner: phone stacks time, title, copy */
.countdown{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3)}
.countdown-time{float:none;order:1}
.countdown-body{flex:1;min-width:200px;order:2}
.countdown-body strong{display:block;margin:0}
.countdown-body p{margin:4px 0 0}

/* Tracklist: the design's TrackRow — number, artwork, title over artist, Support pill */
.tracklist-wrap{display:block}
.tracklist-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0 var(--space-2)}
.tracklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-1)}
.tracklist-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min,44px);padding:var(--space-2);border-radius:var(--radius-md);background:transparent}
.tracklist-index{width:24px;flex:0 0 auto;text-align:center;font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
.tracklist-art{width:44px;height:44px;flex:0 0 auto;overflow:hidden;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}
.tracklist-art img{display:block;width:100%;height:100%;object-fit:cover}
.tracklist-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.tracklist-title{font:700 var(--text-sm) var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracklist-artist{color:var(--text-faint);font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracklist-actions{display:flex;gap:var(--space-2);align-items:center;flex:0 0 auto}
.tracklist-support{min-height:30px;padding:0 var(--space-3);font-size:var(--text-xs)}
.tracklist-link{color:var(--text-muted);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px}
.tracklist-link:hover,.tracklist-link:focus{color:var(--accent)}
.tracklist-empty{margin:var(--space-3) 0;color:var(--text-muted);font:var(--text-xs) var(--font-mono)}
.tracklist-summary{font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);cursor:pointer;list-style:none;padding:var(--space-3) 0}
.tracklist-summary::-webkit-details-marker{display:none}
.tracklist-summary:after{content:"↓";margin-left:var(--space-2)}
.aside-tracklist:not([open]) .tracklist-summary:after{content:"→"}

/* TabBar: icon above label, active icon in a volt pill */
.mobile-tab{flex-direction:column;gap:4px;min-width:0;padding:var(--space-2) 0}
.mobile-tab[hidden]{display:none}
.mobile-tab .mobile-tab-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:26px;border:var(--stroke) solid transparent;border-radius:var(--radius-pill);font:inherit}
.mobile-tab .mobile-tab-icon svg{width:18px;height:18px}
.mobile-tab.active .mobile-tab-icon{border-color:var(--border);background:var(--accent-2);color:var(--on-accent-2)}
.mobile-tab .mobile-unread{position:absolute;top:-5px;right:-3px;display:none;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:700 var(--text-xs) var(--font-mono);align-items:center;justify-content:center}
.mobile-tab .mobile-unread:not([hidden])[data-count],.mobile-tab .mobile-unread:not([hidden]){display:inline-flex}

/* Leaks: a listener never sees host controls on any tab */
#host-controls[hidden]{display:none!important}

@media(max-width:790px){
  .channel-header{gap:var(--space-2);margin-bottom:var(--space-4)}
  .channel-wordmark{display:none}
  .channel-name{font-size:var(--text-lg)}
}
@media(max-width:719px){
  .channel-header{position:sticky;top:0;z-index:5;gap:var(--space-2);margin:0;padding:10px var(--space-4)}
  .channel-meta{max-width:none}
  .channel-name{font-size:var(--text-lg)}
  .channel-actions{gap:6px}
  .icon-button{width:40px;height:40px}
  .listen-card{padding:var(--space-4)}
  .artwork-slot{width:240px;height:240px}
  .main>section,.room-main{padding:0 var(--space-4)}
  .claim-slot:not(:empty){margin-top:var(--space-4)}
  .countdown{flex-direction:column;align-items:stretch;gap:6px}
  .countdown-time{order:0}
  .tracklist-wrap{display:none}
  #live[data-mobile-tab="tracklist"] .room-aside .tracklist-wrap{display:block}
  #live[data-mobile-tab="tracklist"] .room-aside .aside-status,
  #live[data-mobile-tab="tracklist"] .room-aside .aside-presence,
  #live[data-mobile-tab="chat"] .room-aside .aside-status,
  #live[data-mobile-tab="chat"] .room-aside .aside-presence,
  #live[data-mobile-tab="chat"] .room-aside .aside-tracklist{display:none}
  #live[data-mobile-tab="chat"] .room-aside .chat-mutes{display:block}
  .mobile-tab-bar{display:flex}
}

/* UX bundle 1, second pass (2026-10-03): the phone room follows the mock. The hero sits on the page, not in a card;
   the claim card is a label and a button; the presence row lives in the header's count on a phone. */
.hero-copy h1{margin:0}
.hero-copy{gap:var(--space-2)}
.claim-card{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4)}
.claim-card h2.eyebrow{margin:0;font:700 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.mobile-state-strip{top:0}
@media (max-width: 760px) {
  .listen-card{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
  .reaction-presence{display:none}
}
/* One status mark per sync card: the card's icon already carries the state, so the title has no second dot. */
.sync-panel .sync:before{content:none}
#signed-in-avatar{display:grid;place-items:center;font:800 var(--text-sm) var(--font-display)}
/* "Host controls" is a mono label, not a headline. */
.host-controls-head h2.eyebrow{margin:0;font:700 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
/* Desktop: the sticky right column — sync card, presence, chat fills the rest, Tracklist below. */
@media (min-width: 761px) {
  .room-aside{flex-direction:column;position:sticky;top:0;align-self:start;height:100vh;max-height:100vh;overflow:hidden}
  .aside-status{display:block;flex:0 0 auto}
  .aside-status .sync-panel{margin:0;border:0;border-bottom:var(--stroke) solid var(--border-soft);border-radius:0;background:transparent}
  .aside-status .sync-panel[data-state="synced"]{background:transparent}
  .aside-presence{display:flex;flex:0 0 auto}
  .aside-presence .people{padding:0;border:0;flex:1;min-width:0;overflow:hidden}
  .aside-presence .people .avatar{width:28px;height:28px}
  .room-aside .chat{order:1;flex:1 1 auto;min-height:0;margin:var(--space-3) var(--space-3) 0}
  .room-aside .aside-tracklist{order:2;flex:0 0 auto;max-height:44vh;overflow:auto;padding:0 var(--space-3);border-top:var(--stroke) solid var(--border-soft)}
  .room-aside .tracklist{display:grid;padding-bottom:var(--space-3)}
}
/* Host tools: HostTransport, the Up next add row, TrackRow queue rows and the Room tab sections. */
.round-transports .host-action{background:var(--surface);border:var(--border-drawn);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard);color:var(--text)}
.round-transports .host-action:nth-child(2){background:var(--accent-2);color:var(--on-accent-2)}
.round-transports .host-action:disabled{background:var(--bg-sunken);border-color:var(--border-soft);box-shadow:none;color:var(--text-muted);cursor:not-allowed}
.round-transports .host-action:nth-child(2) .transport-icon svg{width:26px;height:26px}
.host-endings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin-top:var(--space-4)}
.host-pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:44px;padding:0 var(--space-4);border:var(--border-drawn);border-radius:var(--radius-pill);font:700 var(--text-sm) var(--font-sans);box-shadow:2px 2px 0 0 var(--shadow-ink);cursor:pointer}
.host-pill-secondary{background:var(--surface);color:var(--text)}
.host-pill-danger{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.host-pill:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.button-icon{display:inline-flex;width:16px;height:16px}
.button-icon svg{width:100%;height:100%;fill:none}
.transport-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.transport-rail{position:relative;display:block;height:26px;min-width:0}
.transport-rail:before{content:"";position:absolute;top:9px;right:0;left:0;height:8px;background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-pill)}
.transport-fill{position:absolute;top:11px;left:2px;width:0;height:4px;background:var(--text);border-radius:var(--radius-pill)}
.transport-thumb{position:absolute;top:0;left:-13px;width:26px;height:26px;background:var(--accent-2);border:var(--border-drawn);border-radius:var(--radius-pill);box-shadow:2px 2px 0 0 var(--shadow-ink);pointer-events:none}
.transport-rail input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.transport-slider #transport-elapsed,.transport-slider #transport-duration{font:700 var(--text-xs) var(--font-mono);color:var(--text-muted)}
.queue-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min,44px);padding:var(--space-3);border-top:var(--stroke) solid var(--border-soft)}
.queue-index{width:27px;flex:0 0 auto;text-align:center;font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
.queue-art{width:44px;height:44px;flex:0 0 auto;overflow:hidden;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}
.queue-art img{display:block;width:100%;height:100%;object-fit:cover}
.queue-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.queue-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--text-sm) var(--font-sans)}
.queue-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-faint);font-size:var(--text-sm)}
.queue-duration{font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
.queue-remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;padding:0;border:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer}
.queue-remove:disabled{opacity:.4;cursor:not-allowed}
.queue-remove .transport-icon svg{width:16px;height:16px;fill:none}
.host-add{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2);align-items:center;margin:var(--space-3) 0}
.host-add-input{width:100%;min-width:0;min-height:44px;padding:0 var(--space-3);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);font:var(--text-sm) var(--font-sans)}
.host-add-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.host-add-presentation{display:inline-flex;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);overflow:hidden}
.host-add-choice{min-height:44px;padding:0 var(--space-3);border:0;background:var(--surface);color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.host-add-choice[aria-pressed="true"]{background:var(--accent-2);color:var(--on-accent-2)}
.host-add-submit{min-height:44px;padding:0 var(--space-4);border:var(--border-drawn);border-radius:var(--radius-pill);background:var(--accent-2);color:var(--on-accent-2);font:700 var(--text-sm) var(--font-sans);box-shadow:2px 2px 0 0 var(--shadow-ink);cursor:pointer}
.host-add-submit:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.host-section-label{display:block;margin:var(--space-4) 0 0;font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.host-section{margin-top:var(--space-4)}
.search-results{display:grid;gap:var(--space-2);max-height:320px;margin:var(--space-3) 0;overflow-y:auto}
.search-result{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;width:100%;min-height:var(--tap-min,44px);padding:var(--space-2);border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);text-align:left;cursor:pointer}
.search-result:hover,.search-result:focus-visible{border-color:var(--accent)}
.search-result-art{width:44px;height:44px;overflow:hidden;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 4px,var(--border-soft) 4px 8px)}
.search-result-art img{display:block;width:100%;height:100%;object-fit:cover}
.search-result-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.search-result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--text-sm) var(--font-sans)}
.search-result-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-faint);font-size:var(--text-sm)}
.search-result-length{font:700 var(--text-sm) var(--font-mono);color:var(--text-faint)}
@media(max-width:520px){.host-add{grid-template-columns:minmax(0,1fr) auto}.host-add-presentation{grid-column:1/-1;justify-self:start}}


/* UX bundle 2, Claude's pass: the host card wears the design's ink border; the slider's thumb never covers its time;
   on a phone the link field takes the row and the Music/Video toggle and Add share the next one. */
.host-controls{border:var(--stroke) solid var(--border)}
.transport-slider{gap:var(--space-3)}
.transport-slider input{margin:0 6px}
@media (max-width: 560px) {
  .host-add{grid-template-columns:auto 1fr}
  .host-add-input{grid-column:1 / -1}
  .host-add-submit{justify-self:end;min-width:96px}
}
/* Pills never wrap their label; on a phone the add row flows: link field, then toggle and Add side by side. */
.host-endings button,.host-endings .button{white-space:nowrap}
@media (max-width: 560px) {
  .host-endings button,.host-endings .button{padding-inline:var(--space-3);gap:6px;font-size:var(--text-sm)}
  .host-add{display:flex;flex-wrap:wrap}
  .host-add-input{flex:1 1 100%}
  .host-add-submit{margin-left:auto}
}
/* The range thumb is wider than the track's end: inset the track so the thumb never covers the elapsed time. */
/* The custom slider's thumb is centred on the value, so the rail is inset by half a thumb: at 0:00 it sits inside. */
.transport-rail{margin-inline:13px}
/* Bundle 3, Claude's pass: say each fact once. The hero's sync card (which carries Tap to listen) is the only one;
   the header already counts who is here, so the side column shows faces, not a second count. */
[data-aside-sync-status]{display:none!important}
.aside-presence [data-room-presence]{display:none}
@media (max-width: 760px) {
  .room-aside .chat{margin:var(--space-3) var(--space-4);border-radius:var(--radius-lg)}
}
@media (min-width: 761px) {
  /* One frame: the chat panel is the card, so the column itself carries no second border. */
  .room-aside{border:0;box-shadow:none;background:transparent}
}
/* An empty presence row leaves no stray rule under the hero. */
.reaction-presence:has(.people:empty){display:none}

/* Apple Music album art fills the artwork slot as a square; the placeholder label goes away (CJ's phone test, 2026-10-04). */
.artwork-slot[data-artwork="image"]{width:240px;height:240px;aspect-ratio:1;align-self:center}.artwork-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}

/* Phone: the sticky channel header has no bottom margin, so the room content needs its own top gap, the same 16px as
   the side gutter (CJ, 2026-10-04: art touched the header). */
@media(max-width:719px){#live .main{padding-top:var(--space-4)}}

/* Mute: an icon button in the listening status; muting never pauses, so the listener stays in sync. */
.sync-panel .mute-toggle{flex:0 0 auto;margin-left:auto;display:inline-grid;place-items:center}.mute-toggle .mute-cross{display:none}.mute-toggle[aria-pressed="true"] .mute-cross{display:inline}.mute-toggle[aria-pressed="true"] .mute-waves{display:none}

/* Room info polish from the screenshot review: both groups share one width, and Sign in stands apart from the rows
   with its offset shadow inside the gutter. */
.setup .listener-provider,.setup .account-links{max-width:480px}.setup .account-links-signin{width:calc(100% - 3px);margin-top:var(--space-4)}

/* Sign-in: the main button goes to Bluesky's own login; another server's handle sits behind "Other server". */
.signin-other{margin-top:var(--space-4)}.signin-other summary{cursor:pointer;color:var(--text-muted);font:700 var(--text-xs) var(--mono);letter-spacing:.08em;text-transform:uppercase;min-height:44px;display:flex;align-items:center}.signin-other[open] summary{margin-bottom:var(--space-2)}.signin-other .secondary{margin-top:var(--space-3);width:100%;min-height:44px}

/* Chat: the handle beside a display name, so two people with the same name can be told apart. */
.chat-handle{color:var(--text-muted);font:var(--text-xs) var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Phones: no zoom. iPhone zooms into any text field under 16px and stays zoomed, and double-tap zooms (CJ, 2026-10-04:
   the page kept resizing). Fields are 16px on touch screens; double-tap zoom is off; pinch is blocked in
   app/room-view.mjs (Safari ignores user-scalable=no). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
@media (pointer:coarse){input,textarea,select{font-size:16px!important}}

/* Chat: the sender's Bluesky picture fills the bubble, over the initial. */
.chat-avatar{position:relative;overflow:hidden}.chat-avatar-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* Phones, chat and tracklist tabs: exactly the space between the header and the tab bar (measured into --chrome-top and
   --chrome-bottom by app/room-view.mjs; 100dvh is the visible height on iPhone, unlike 100vh). No gap or rule above. */
@media(max-width:719px){
  #live[data-mobile-tab="chat"] .main,#live[data-mobile-tab="tracklist"] .main{padding-top:0}
  #live[data-mobile-tab="chat"] .room-aside,#live[data-mobile-tab="tracklist"] .room-aside{border-top:0;min-height:0;max-height:none;height:calc(100dvh - var(--chrome-top,89px) - var(--chrome-bottom,79px) - var(--chrome-strip,0px))}
  .shell:has(#live[data-mobile-tab="chat"]),.shell:has(#live[data-mobile-tab="tracklist"]){padding-bottom:0}
  #live[data-mobile-tab="chat"] .room-aside .chat{margin-bottom:var(--space-3)}
}