/* The only state shown while older chat paged in: a quiet line above the list, no narration. */
.chat-loading{margin:0;padding:var(--space-1) var(--space-4);color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.chat-loading[hidden]{display:none}
.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}
.chat-follow-button:hover,.chat-follow-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.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-md) 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}
.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-md) var(--font-sans);
}
.modal input::placeholder{
  color:var(--text-faint);
}
.modal input:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
.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:2px
}
#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-md) 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:2px
}
.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(--focus);
  outline-offset:2px
}
.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 h2{
  max-width:760px;
  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-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 h2{
    font-size:var(--text-2xl)
  }
  .sync-panel{
    padding:var(--space-3)
  }
  .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 h2{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),(max-height:559.98px){
/* Phone (Change A, "Communal mobile layout"): video, track and chat share one screen. The FloatingNav is gone;
   the chat and tracklist panels live in the same flex column as the room main, never behind a tab. Rules live in
   app/styles/09-communal-phone.css so the desktop bundle does not pay for them. */
.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-md) var(--font-sans)}
.room-key-field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.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-md) var(--font-mono)}
.cohost-form input:focus{outline:3px solid var(--focus);outline-offset:2px}
.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}