/* 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}
}
/* 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. */
.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}
/* 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}
/* #315: Pause / Skip / Settings live in their own row above the Up next heading; each control takes an equal share. */
.host-transport-row{display:flex;align-items:center;gap:var(--space-4);padding:0 24px 14px}
.host-transport-row > *{flex:1 1 0;min-width:0}
.host-transport-row .liner-btn{min-height:44px}
#host-controls[data-locked] .host-up-next-title{color:var(--lr-ink-3)}
#host-controls[data-locked] .host-up-next-actions button,#host-controls[data-locked] .host-transport-row 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);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none
}
.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 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}
/* #305: a queue title is the room's own label in sentence case, and it wraps to a second line instead of being cut
   off with an ellipsis. */
.host-up-next .queue-title{font-size:18px;font-weight:600;color:var(--lr-ink);text-transform:none;overflow-wrap:break-word;white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.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-3);border-radius:999px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.host-up-next .queue-remove:disabled{opacity:.4;cursor:not-allowed}
/* #315 (decision 0054): the driving host reorders Up next — a grip on the left, Move up / Move down beside the remove. */
.host-up-next .queue-row[data-movable]{grid-template-columns:24px 32px minmax(0,1fr) auto 44px 44px 40px;gap:8px}
.host-up-next .queue-row[data-align-drag]{grid-template-columns:24px 32px minmax(0,1fr) auto 40px}
.host-up-next .queue-drag-pad{width:24px}
.host-up-next .queue-drag-handle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:44px;padding:0;border:0;background:transparent;color:var(--lr-ink-3);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.host-up-next .queue-drag-handle:active{cursor:grabbing}
/* #315: the grip stays a 24px column (20px on phones) but answers a 44px-wide tap: a transparent ::before extends
   the hit box into the row padding and the gap, stopping short of the index number's column. */
.host-up-next .queue-drag-handle::before{content:"";position:absolute;top:0;bottom:0;left:-12px;right:-8px}
.host-up-next .queue-move{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--lr-ink-3);border-radius:999px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.host-up-next .queue-move:hover{color:var(--lr-ink)}
.host-up-next .queue-row-dragging{position:relative;z-index:1;background:var(--lr-card);box-shadow:var(--lr-shadow-card);opacity:.9}
@media (max-width:719px),(max-height:559.98px){.host-up-next .queue-row[data-movable]{grid-template-columns:20px 20px minmax(0,1fr) auto 44px 44px 40px;gap:4px}
.host-up-next .queue-row[data-align-drag]{grid-template-columns:20px 20px minmax(0,1fr) auto 40px;gap:4px}
.host-up-next .queue-drag-handle::before{left:-20px;right:-4px}}
.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 .song-field{display:flex;flex-direction:column;gap:8px;padding:0 24px 18px}
.host-up-next .song-field-label{font:600 14px var(--lr-font-ui);color:var(--lr-ink-2)}
.host-up-next .song-field-row{display:flex;gap:8px;min-width:0}
.host-up-next .song-field-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 .song-field-link:disabled{opacity:.4;cursor:not-allowed}
.host-up-next .song-field .liner-btn{flex:0 0 auto}
.host-up-next .song-field-status{margin:0;color:var(--lr-ink-2);font:400 14px var(--lr-font-ui)}

/* The More sheet (#305): labelled groups of full-width rows — playback, matches, room, co-hosts, ad breaks, endings —
   plus the position slider and the room key. Rows are separated by a 1px hairline; no pills. */
.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-rows{display:flex;flex-direction:column;min-width:0}
.more-rows > * + *{border-top:1px solid var(--lr-rule)}
.more-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;min-width:0;padding:10px 0;border:0;background:transparent;color:var(--lr-ink);font:400 15px var(--lr-font-ui);text-align:left;box-shadow:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.more-row-label{font:600 15px var(--lr-font-ui);color:var(--lr-ink)}
.more-row-value{display:flex;align-items:baseline;gap:6px;font:400 15px var(--lr-font-ui);color:var(--lr-ink-3)}
.more-row:disabled{opacity:.5;cursor:not-allowed}
.more-row-danger,.more-row-danger .more-row-label,.more-row-danger .more-row-value{color:var(--lr-red)}
.more-section .transport-slider{display:flex;flex-wrap:wrap;row-gap:8px}
.more-section .transport-slider .transport-rail{flex:0 0 100%;min-width: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{flex-direction:column;flex-wrap:nowrap;gap:0;padding:0;border-top:0;background:transparent}
.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{border:0;background:transparent;padding:0;margin-top:0}
.more-section .cohost-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.more-section .cohost-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;min-width:0;padding:8px 0;border:0;border-top:1px solid var(--lr-rule);background:transparent;font:400 15px var(--lr-font-ui);color:var(--lr-ink)}
.more-section .cohost-list li:first-child{border-top:0}
.more-section .cohost-list li.cohost-empty{color:var(--lr-ink-3)}
.more-section .cohost-list li button.mode{min-height:36px;padding:0 10px;border:0;background:transparent;color:var(--lr-ink-2);font:600 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;cursor:pointer}
.more-section .cohost-form{display:flex;gap:8px;align-items:center;min-height:44px;margin-top:0;padding:8px 0;border-top:1px solid var(--lr-rule)}
.more-section .cohost-form input{flex:1;min-width:0;min-height:44px;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:44px;padding:0 14px;border:0;background:transparent;color:var(--lr-ink);font:600 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;cursor:pointer}
.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)}
/* #315 (decision 0054): Show settings rows. A value row reads label left, current value and a chevron right; a
   disclosure row opens its editor under itself. */
.more-row-chevron{color:var(--lr-ink-3)}
.more-row[aria-pressed="true"] .more-row-value{color:var(--lr-ink)}
.more-sheet .sheet-head .close{width:auto;min-width:44px;height:44px;padding:0 16px;border-radius:999px;font:600 15px var(--lr-font-ui);letter-spacing:0;text-transform:none}
.more-section .row-form{display:flex;gap:8px;align-items:center;min-height:44px;padding:8px 0;border-top:1px solid var(--lr-rule)}
.more-section .row-form input{flex:1;min-width:0;min-height:44px;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 .row-form button{min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--lr-ink);font:600 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;cursor:pointer}
.more-section .row-form button:disabled{opacity:.5;cursor:not-allowed}

/* Phone: the Up next card is radius 16, the room's pause lives in that card, and a queue title wraps to two
   lines. */
@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}
  /* The transport (#315) takes its own row above the heading; the heading keeps its own width with the on-air
     toggle beside it, starting at the left (CJ, #305). */
  .host-up-next-title{font-size:19px;white-space:nowrap;flex:0 0 auto}
  .host-up-next-actions{flex:0 1 auto;min-width:0;flex-wrap:nowrap;justify-content:flex-start}
  .host-transport-row{gap:6px;padding:0 16px 8px}
  .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}
  #live:is([data-role-surface="host"],[data-role-surface="cohost"]) #playhead :is(.host-pause,.playhead-pause){display:none}
  /* The title takes the whole first row; the time and the 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 meta 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 .queue-remove{grid-area:remove}
  .host-up-next .queue-empty{padding:0 16px 10px}
  .host-up-next .song-field{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}
}