/* Short viewports (a phone in landscape): the hero steps down so the player, title and playhead clear the fold. */
@media (max-height:559.98px){
  #now-title{font-size:26px}
  #now-title[data-size="lg"]{font-size:30px}
  #now-title[data-size="xl"]{font-size:34px}
  #now-title[data-size="off"]{font-size:30px}
  .hero-artist{font-size:16px}
  .track-block{margin-top:var(--lr-space-4)}
  .playhead{margin-top:12px;gap:10px}
  .playhead .phase-line canvas{height:32px}
}
@media (max-width:719px) and (prefers-reduced-motion: reduce), (max-height:559.98px) and (prefers-reduced-motion: reduce) {
}

/* The header host line already carries the count, so the header's presence span is only a test/compat hook. */
.channel-header [data-room-presence]{display:none}

/* Sentence case on the surfaces stage 4 touches: no ALL-CAPS labels, no mono eyebrows. */
.host-controls-head h2.eyebrow{margin:0;font:800 22px/1.1 var(--lr-font-display);letter-spacing:-.02em;text-transform:none;color:var(--lr-ink)}
.settings-sheet .account-link-name{font:600 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink)}
.settings-sheet .account-link-button,.settings-sheet .account-link-unlink{min-height:44px;padding:0 18px;border:1.5px solid var(--lr-rule-3);border-radius:var(--lr-radius-pill);background:var(--lr-card);color:var(--lr-ink);box-shadow:none;font:600 15px var(--lr-font-ui)}

/* Heart reactions (Liner stage 6). The chat rail holds the ReactionLayer (absolutely positioned, pointer-events:none).
   The chat-actions row holds the composer (or the sign-in prompt) and the 50px HeartButton beside it, on desktop and
   on the phone composer bar. The HeartButton is hidden off air so a listener without a track has nothing to react to. */
.chat{position:relative}
/* The reaction layer is bounded to the messages region, not the whole chat, so floating hearts and the chorus
   "xN" count end at the composer's top edge (between header and composer) on desktop and phone. */
.chat-body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.chat .reaction-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.heart-button{border-radius:50%}
/* iOS: a long press on the heart or a composer action must not select the label or pop the copy loupe. Only the heart
   cancels the touch default in JS; the composer input is a separate element and keeps its own selection and focus. */
.heart-button,
.chat-actions button,
.chat-actions .heart-button {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
.heart-button{touch-action:manipulation}
.heart-button:focus-visible{outline:3px solid var(--lr-red);outline-offset:2px}
.heart-button:active{transform:scale(.96)}
.chat-actions{display:flex;align-items:center;gap:8px;padding:16px 24px 24px;border-top:1px solid var(--lr-rule)}
.chat-actions .chat-foot{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:0;border-top:0}
.chat-actions .chat-signin{flex:1;min-width:0;margin:0;align-self:center}
.chat-actions .heart-slot{display:flex;align-items:center;flex:none}
.chat-actions .heart-slot:empty{display:none}
.chat-actions .heart-slot[hidden]{display:none}
/* A polite live region announces a chorus only ("12 people sent hearts"). It is hidden visually and aria-hidden is
   not set; the browser speaks it. */
.heart-announce{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (max-width:719px),(max-height:559.98px) {
  /* The phone composer bar and its position live in app/styles/09-communal-phone.css (Change A). */
}

/* Stage 5: the host's Up next card and the More / Add sheets. The card is a queue; every other host action lives in
   the More sheet. Both sheets are Liner sheets (settings-sheet), so neither ever covers the provider player. */
.host-up-next{background:var(--lr-card);border-radius:var(--lr-radius-panel);box-shadow:var(--lr-shadow-card);margin-top:26px;padding:20px 0 8px}
.host-up-next-head{display:flex;align-items:center;gap:12px;padding:0 24px 14px}
.host-up-next-title{margin:0;flex:1;min-width:0;font:800 22px/1.1 var(--lr-font-display);letter-spacing:-.02em;color:var(--lr-ink)}
.host-up-next-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#host-controls[data-locked] .host-up-next-title{color:var(--lr-ink-3)}
#host-controls[data-locked] .host-up-next-actions button{opacity:.5;pointer-events:none}
.liner-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:var(--lr-radius-pill);font:600 15px var(--lr-font-ui);cursor:pointer;white-space:nowrap;transition:transform var(--lr-dur-press),box-shadow var(--lr-dur-press)}
.liner-btn:disabled{opacity:.5;cursor:not-allowed}
.liner-btn-quiet{background:var(--lr-card);color:var(--lr-ink);border:1.5px solid var(--lr-rule-3)}
.liner-btn-ink{background:var(--lr-ink);color:var(--lr-page);border:1.5px solid var(--lr-ink)}
.liner-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.liner-btn-text-short{display:none}
.host-queue{padding:0}
.host-up-next .queue-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto 40px;gap:12px;align-items:start;padding:14px 24px;border-bottom:1px solid var(--lr-rule);font-family:var(--lr-font-ui)}
.host-up-next .queue-row:last-child{border-bottom:0}
.host-up-next .queue-index{font-family:var(--lr-font-time);font-size:14px;color:var(--lr-ink-3);padding-top:3px}
.host-up-next .queue-copy{min-width:0;display:flex;flex-direction:column}
.host-up-next .queue-title{font-size:18px;font-weight:600;color:var(--lr-ink);overflow-wrap:break-word}
.host-up-next .queue-artist{font-size:16px;color:var(--lr-ink-2);margin-top:2px}
.host-up-next .queue-meta{font-size:14px;color:var(--lr-ink-3);padding-top:3px;white-space:nowrap}
.host-up-next .queue-remove{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--lr-ink-2);border-radius:999px;cursor:pointer}
.host-up-next .queue-remove:disabled{opacity:.4;cursor:not-allowed}
.host-up-next .queue-remove .transport-icon svg{width:16px;height:16px;fill:none}
.host-up-next .presentation-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--lr-rule-2);border-radius:var(--lr-radius-pill);overflow:hidden}
.host-up-next .presentation-toggle-btn{min-width:56px;min-height:36px;padding:0 10px;border:0;background:var(--lr-card);color:var(--lr-ink-2);font:600 12px var(--lr-font-ui);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.host-up-next .presentation-toggle-btn[aria-pressed="true"]{background:var(--lr-ink);color:var(--lr-page)}
.host-up-next .presentation-toggle-btn:disabled{opacity:.4;cursor:not-allowed}
.host-up-next .host-presentation-toggle{display:inline-flex;align-items:center}
.host-up-next .queue-empty{margin:0;padding:0 24px 14px;color:var(--lr-ink-2);font:400 15px var(--lr-font-ui)}
.host-up-next .queue-import{display:flex;flex-direction:column;gap:8px;padding:0 24px 18px}
.host-up-next .queue-import-label{font:600 14px var(--lr-font-ui);color:var(--lr-ink-2)}
.host-up-next .queue-import-row{display:flex;gap:8px;min-width:0}
.host-up-next .queue-import-link{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1.5px solid var(--lr-rule-3);border-radius:12px;background:var(--lr-field);color:var(--lr-ink);font:400 16px var(--lr-font-ui)}
.host-up-next .queue-import-link:disabled{opacity:.4;cursor:not-allowed}
.host-up-next .queue-import .liner-btn{flex:0 0 auto}
.host-up-next .queue-import-error{margin:0;color:var(--lr-red);font:400 14px var(--lr-font-ui)}

/* The More sheet: matches, room settings, co-hosts, ad breaks, endings, the position slider and the room key. */
.more-pane{display:flex;flex-direction:column;gap:24px}
.more-section{display:flex;flex-direction:column;gap:12px}
.more-section-title{margin:0;font:800 20px/1.1 var(--lr-font-display);letter-spacing:-.02em;color:var(--lr-ink)}
.more-section .host-action,.more-section .host-pill{min-height:44px;padding:0 18px;border:1.5px solid var(--lr-rule-3);border-radius:var(--lr-radius-pill);background:var(--lr-card);color:var(--lr-ink);font:600 15px var(--lr-font-ui);box-shadow:none;text-align:center}
.more-section .host-action:disabled,.more-section .host-pill:disabled{opacity:.5;cursor:not-allowed}
.more-section .host-pill-danger,.more-section .signal-action{background:var(--lr-red);border-color:var(--lr-red);color:var(--lr-on-red)}
.more-section .host-section{margin-top:0}
.more-section .host-section-label{margin:0 0 8px;font:700 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-2)}
.more-section .host-endings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
.more-section .host-endings .host-pill{width:100%}
.more-section .transport-slider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:0}
.more-section .transport-slider #transport-elapsed,.more-section .transport-slider #transport-duration{font:400 15px var(--lr-font-time);color:var(--lr-ink-3)}
.more-section .transport-rail:before{background:var(--lr-track);border-color:var(--lr-rule-2)}
.more-section .transport-fill{background:var(--lr-ink)}
.more-section .transport-thumb{background:var(--lr-ink);border-color:var(--lr-ink);box-shadow:none}
.more-section .ad-break-controls{display:flex;flex-wrap:wrap;gap:8px;padding:0;border-top:0;background:transparent}
.more-section .ad-break-controls .host-action{flex:1 1 140px}
.more-section .matches-coverage{margin:0;padding:10px 14px;border:1.5px solid var(--lr-rule);border-radius:var(--lr-radius-card-m);background:var(--lr-field);color:var(--lr-ink-2);font:600 14px var(--lr-font-ui);letter-spacing:0;text-transform:none}
.more-section .matches-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.more-section .match-row{padding:14px;border:1.5px solid var(--lr-rule);border-radius:var(--lr-radius-card-m);background:var(--lr-card);display:grid;gap:10px}
.more-section .match-row.is-current{border-color:var(--lr-red)}
.more-section .match-row-head strong{font:700 16px var(--lr-font-ui);color:var(--lr-ink)}
.more-section .match-row-head span{font:600 13px var(--lr-font-ui);color:var(--lr-ink-3);letter-spacing:0;text-transform:none}
.more-section .provider-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:8px;min-width:0}
.more-section .provider-cell{border:1.5px solid var(--lr-rule);border-radius:var(--lr-radius-card-m);padding:10px;background:var(--lr-field);display:grid;gap:6px;text-transform:none}
.more-section .provider-cell[data-status="set"]{border-color:var(--lr-red)}
.more-section .provider-status{font:600 13px var(--lr-font-ui);color:var(--lr-ink-2);letter-spacing:0;text-transform:none}
.more-section .provider-cell[data-status="set"] .provider-status{color:var(--lr-red)}
.more-section .provider-link{color:var(--lr-ink-2);font:400 13px var(--lr-font-ui);overflow-wrap:anywhere;text-transform:none}
.more-section .provider-form input{width:100%;min-width:0;min-height:40px;padding:0 12px;border:1.5px solid var(--lr-rule-3);border-radius:10px;background:var(--lr-card);color:var(--lr-ink);font:400 16px var(--lr-font-ui)}
.more-section .provider-form button{min-height:40px;padding:0 14px;border:1.5px solid var(--lr-rule-3);border-radius:var(--lr-radius-pill);background:var(--lr-card);color:var(--lr-ink);font:600 14px var(--lr-font-ui);letter-spacing:0;text-transform:none}
.more-section .match-accept{border-color:var(--lr-ink);background:var(--lr-ink);color:var(--lr-page)}
.more-section .match-pill{font:600 12px var(--lr-font-ui);color:var(--lr-ink-2);letter-spacing:0;text-transform:none}
.more-section .cohost-controls{margin-top:0;border:1.5px solid var(--lr-rule);border-radius:var(--lr-radius-card-m);background:var(--lr-field);padding:14px}
.more-section .cohost-head{font:700 15px var(--lr-font-ui);color:var(--lr-ink-2);letter-spacing:0;text-transform:none;margin-bottom:10px}
.more-section .cohost-list li{border:1.5px solid var(--lr-rule);border-radius:10px;background:var(--lr-card);font:400 15px var(--lr-font-ui);color:var(--lr-ink)}
.more-section .cohost-list li button.mode{min-height:36px;padding:0 14px;border:1.5px solid var(--lr-rule-3);border-radius:var(--lr-radius-pill);background:var(--lr-card);color:var(--lr-ink);font:600 14px var(--lr-font-ui)}
.more-section .cohost-form input{min-height:40px;padding:0 12px;border:1.5px solid var(--lr-rule-3);border-radius:10px;background:var(--lr-card);color:var(--lr-ink);font:400 16px var(--lr-font-ui)}
.more-section .cohost-form button.mode{min-height:40px;padding:0 14px;border-color:var(--lr-ink);background:var(--lr-ink);color:var(--lr-page);font:600 14px var(--lr-font-ui)}
.more-section .diagnostics-details>summary{font:600 15px var(--lr-font-ui);color:var(--lr-ink-2);letter-spacing:0;text-transform:none}
.more-section .diagnostics-details .diagnostic-status{font:400 14px var(--lr-font-ui);color:var(--lr-ink-3)}
.more-section .room-key-field{margin-top:4px;border:1.5px solid var(--lr-rule);border-radius:var(--lr-radius-card-m);background:var(--lr-field);padding:14px}
.more-section .room-key-label{font:700 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-2)}
.more-section .room-key-field input{min-height:40px;border:1.5px solid var(--lr-rule-3);border-radius:10px;background:var(--lr-card);color:var(--lr-ink);font:400 16px var(--lr-font-ui)}
.more-section .room-key-submit{min-height:40px;border:1.5px solid var(--lr-ink);border-radius:var(--lr-radius-pill);background:var(--lr-ink);color:var(--lr-page);font:600 14px var(--lr-font-ui)}
.more-section .room-key-note{font:400 13px var(--lr-font-ui);color:var(--lr-ink-3)}
.more-sheet .host-prototype{margin:0;color:var(--lr-ink-3);font:400 15px var(--lr-font-ui)}

/* The Add a track sheet: the link field, Square / Wide, search results and the import path, in Liner style. */
.add-sheet .label{padding:0 0 8px;font:700 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-2)}
.add-sheet #youtube-input{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--lr-rule-3);border-radius:12px;background:var(--lr-field);color:var(--lr-ink);font:400 16px var(--lr-font-ui)}
.add-sheet #youtube-input::placeholder{color:var(--lr-ink-3)}
.add-sheet .detected-provider{margin:10px 0 0;color:var(--lr-red);font:600 14px var(--lr-font-ui);letter-spacing:0}
.add-sheet .search-results{max-height:320px;margin:14px 0}
.add-sheet .search-result{border:1.5px solid var(--lr-rule);border-radius:12px;background:var(--lr-card);color:var(--lr-ink)}
.add-sheet .search-result:hover,.add-sheet .search-result:focus-visible{border-color:var(--lr-ink)}
.add-sheet .search-result-title{font:600 15px var(--lr-font-ui);color:var(--lr-ink)}
.add-sheet .search-result-artist{font:400 14px var(--lr-font-ui);color:var(--lr-ink-2)}
.add-sheet .search-result-length{font:400 14px var(--lr-font-time);color:var(--lr-ink-3)}
.add-sheet .presentation-choice{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.add-sheet .presentation-choice legend{width:100%;padding:0 0 8px;font:700 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-2)}
.add-sheet .presentation-option{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1.5px solid var(--lr-rule-3);border-radius:999px;background:var(--lr-card);color:var(--lr-ink);font:600 15px var(--lr-font-ui);box-shadow:none}
.add-sheet .presentation-option:has(input:checked){background:var(--lr-ink);color:var(--lr-page);border-color:var(--lr-ink);box-shadow:none}
.add-sheet #provider-form .primary,.add-sheet .primary{width:100%;min-height:48px;border:0;border-radius:999px;background:var(--lr-red);color:var(--lr-on-red);box-shadow:var(--lr-shadow-press);font:600 16px var(--lr-font-ui)}

/* Phone: the Up next card is radius 16, the host Pause lives on the playhead row, and a queue title never wraps. */
@media (max-width:719px),(max-height:559.98px) {
  .host-up-next{border-radius:16px;margin-top:20px;padding:14px 0 4px}
  .host-up-next-head{gap:6px;padding:0 16px 8px;flex-wrap:wrap}
  .host-up-next-title{font-size:19px;white-space:nowrap}
  .host-up-next-head > .host-up-next-actions{flex:1 1 100%}
  .host-up-next-actions{flex:0 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .host-up-next-actions{gap:6px}
  .host-up-next .liner-btn{padding:0 14px}
  .liner-btn-text-full{display:none}
  .liner-btn-text-short{display:inline}
  .host-pause-action{display:none}
  /* The title takes the whole first row; the time, the Square / Wide toggle and remove sit under it, so the title is
     never crushed into the fixed columns the way it was before. */
  .host-up-next .queue-row{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"index copy copy" "meta toggle remove";align-items:center;row-gap:8px;column-gap:12px;padding:12px 16px}
  .host-up-next .queue-index{grid-area:index;padding-top:0}
  .host-up-next .queue-copy{grid-area:copy}
  .host-up-next .queue-meta{grid-area:meta;padding-top:0}
  .host-up-next .queue-row .presentation-toggle{grid-area:toggle;justify-self:end}
  .host-up-next .queue-row .queue-remove{grid-area:remove}
  .host-up-next .queue-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .host-up-next .queue-empty{padding:0 16px 10px}
  .host-up-next .queue-import{padding:0 16px 14px}
}

/* Reduced motion: every animation stops and nothing moves or scales; opacity fades stay. The live dot holds full
   opacity, buttons press without lifting. The phase line, hearts and chorus are canvas JS that check
   prefers-reduced-motion themselves (phase-line.mjs, views/reaction-layer.mjs, views/liner-ui.mjs). */
@media (prefers-reduced-motion: reduce){
  .live-indicator.live-live .live-dot,.track-on-air .live-dot{animation:none}
  .tap-listen,.button,.icon-button,.sync-primary,.liner-btn{transition-duration:0s}
}