/* ============================================================
   Stage 4 — header, rail, chat, mobile FloatingNav, settings sheet
   Liner ports of Logo, LiveIndicator, AvatarStack, SegmentedControl,
   ChatMessage, TrackRow, Composer, FloatingNav and the settings sheet.
   Appended last so these win over the legacy room-shell rules.
   ============================================================ */

/* Header */
.channel-header{display:flex;align-items:center;gap:24px;padding:22px 32px;background:transparent;border-bottom:1px solid var(--lr-rule);margin:0}
.channel-brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;color:inherit;text-decoration:none}
.brand-logo{display:inline-flex;width:40px;height:40px;flex:0 0 auto}
.brand-logo canvas{display:block;width:40px;height:40px}
.channel-wordmark{font-family:var(--lr-font-ui);font-weight:700;font-size:23px;letter-spacing:-.04em;color:var(--lr-ink);white-space:nowrap}
.channel-divider{width:1px;height:28px;flex:0 0 auto;background:var(--lr-rule-2)}
.channel-header .channel-name{margin:0;font-family:var(--lr-font-display);font-weight:800;font-size:26px;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
.channel-live{display:inline-flex;flex:0 0 auto}
.channel-header .channel-meta{display:flex;align-items:baseline;gap:6px;max-width:none;overflow:visible;white-space:nowrap;font-family:var(--lr-font-ui);font-size:15px;color:var(--lr-ink-2)}
.channel-spacer{flex:1 1 auto;min-width:8px}
.avatar-stack-slot{display:inline-flex;flex:0 0 auto}
.button-outline{min-height:48px;padding:0 22px;background:transparent;color:var(--lr-ink);border:1.5px solid var(--lr-ink);border-radius:var(--lr-radius-pill);box-shadow:none;font-family:var(--lr-font-ui);font-size:16px;font-weight:600}
.button-outline:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--lr-ink) 6%,transparent)}
.account-button{width:auto;min-width:44px;gap:8px;padding:0 12px}
.account-button-label{font:600 15px var(--lr-font-ui)}
.signed-in-chip.account-button{width:44px;height:44px;padding:0;overflow:hidden}
.signed-in-chip.account-button .signed-in-avatar{width:40px;height:40px}

/* LiveIndicator */
.live-indicator{display:inline-flex;align-items:center;gap:8px;font-family:var(--lr-font-ui);font-weight:700;font-size:17px;color:var(--lr-red)}
.live-indicator.live-paused{color:var(--lr-ink-2)}
.live-indicator.live-off{color:var(--lr-ink-3)}
.live-indicator.live-sm{font-size:14px;gap:6px}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;flex:0 0 auto}
.live-indicator.live-paused .live-dot{width:3px;height:11px;border-radius:1px;box-shadow:5px 0 0 currentColor}
.live-indicator.live-off .live-dot{width:10px;height:10px;background:transparent;border:2px solid currentColor;box-sizing:border-box}
.live-indicator.live-live .live-dot{animation:lr-breath 1400ms ease-in-out infinite alternate}
@keyframes lr-breath{from{opacity:1}to{opacity:.35}}
@media (prefers-reduced-motion: reduce){.live-indicator.live-live .live-dot{animation:none}}

/* Avatars / AvatarStack */
.lr-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;background:var(--lr-avatar);color:var(--lr-ink-2);font:700 14px var(--lr-font-ui);border:2px solid var(--lr-card)}
.lr-avatar img{width:100%;height:100%;object-fit:cover}
.avatar-ring-host{box-shadow:0 0 0 2px var(--lr-red)}
.avatar-ring-you{box-shadow:0 0 0 2px var(--lr-ink)}
.avatar-ring-none{box-shadow:0 0 0 1px var(--lr-rule-2)}
.avatar-stack{display:flex;align-items:center;padding-left:10px}
.avatar-stack-more{display:inline-flex;align-items:center;height:38px;padding:0 12px;border:2px solid var(--lr-page);border-radius:999px;background:var(--lr-ink);color:var(--lr-page);font:700 13px var(--lr-font-ui)}

/* Rail (400px) */
@media (min-width: 1024px) {
  .main{grid-template-columns:minmax(0,1fr) 400px}
}
.rail-head{padding:20px 24px 12px}
.segmented-control{display:flex;padding:4px;border-radius:999px;background:var(--lr-track)}
.segmented-option{flex:1;height:44px;min-width:0;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--lr-ink-2);font:600 16px var(--lr-font-ui);cursor:pointer;transition:background var(--lr-dur-ui)}
.segmented-option.active{background:var(--lr-card);color:var(--lr-ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.room-aside .chat{padding:12px 24px 0}
.room-aside .chat-list{display:flex;flex-direction:column;gap:10px;justify-content:flex-end;flex:1 1 auto;min-height:0}

/* ChatMessage (Liner). The article also carries the legacy .message class, so these selectors match its weight and
   drop the legacy dashed rule and row padding: messages sit on the page, one line of name/@handle/time then the body. */
.chat .message.chat-message{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:0;border-bottom:0;font-family:var(--lr-font-ui)}
.chat .message.chat-system-line{display:block;padding:4px 0;border-bottom:0;text-align:center;font:400 14px var(--lr-font-ui);color:var(--lr-ink-3)}
.chat-message .chat-avatar{position:relative;width:28px;height:28px;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;background:var(--lr-avatar);color:var(--lr-ink-2);font:700 12px var(--lr-font-ui);box-sizing:border-box;border:2px solid var(--lr-card)}
.chat-message .chat-body{display:block;min-width:0}
.chat-message .chat-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.chat-message .chat-name{font-size:15px;font-weight:700;color:var(--lr-ink)}
.chat-message .chat-handle{font-family:var(--lr-font-ui);font-size:13px;color:var(--lr-ink-3)}
.chat-message .chat-time{font:400 13px var(--lr-font-time);letter-spacing:0;text-transform:none;color:var(--lr-ink-3)}
.chat-message .chat-text{display:block;margin-top:1px;font-size:15px;line-height:1.35;color:var(--lr-ink);overflow-wrap:break-word}
.chat-role{display:inline-flex;align-items:center;padding:0 6px;border:1.5px solid var(--lr-red);border-radius:999px;color:var(--lr-red);font:600 12px/18px var(--lr-font-ui);letter-spacing:0;text-transform:none}
.chat-system-line{display:block;padding:4px 0;text-align:center;font:400 14px var(--lr-font-ui);color:var(--lr-ink-3)}
.chat-system-line .chat-system-icon{display:none}

/* Composer */
.chat-foot{display:flex;gap:8px;align-items:center;padding:16px 24px 24px;border-top:1px solid var(--lr-rule)}
/* The Message field can shrink but never collapse: it flexes with a real floor, and Send / the heart keep their
   sizes (a landscape phone once squeezed it into a 50px circle, CJ, 2026-10-05). */
.chat-foot .chat-input{flex:1 1 12ch;min-width:9ch;width:auto;height:50px;padding:0 18px;border:1.5px solid var(--lr-field-border);border-radius:999px;background:var(--lr-field);color:var(--lr-ink);font-family:var(--lr-font-ui);font-size:16px}
.chat-foot .chat-input::placeholder{color:var(--lr-ink-3)}
.chat-foot .chat-send{height:50px;min-width:64px;padding:0 20px;border:0;border-radius:var(--lr-radius-pill);background:var(--lr-ink);color:var(--lr-page);font:600 16px var(--lr-font-ui)}
.chat-foot .chat-send svg{display:none}
.chat-foot .chat-send:disabled{opacity:.4;cursor:not-allowed}
.chat-signin{align-self:center;margin:12px 24px 24px}

/* TrackRow / tracklist. These rules come after the legacy tracklist styles, so they restate the properties the legacy
   rules set (row border/radius, nowrap title/artist, index width, list gap) to land the Liner TrackRow: a clean row
   with an underline, number | thumbnail | title/artist | action, and no bordered boxes (CJ, 2026-10-06). */
.track-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;padding:14px 24px;border-bottom:1px solid var(--lr-rule);font-family:var(--lr-font-ui)}
.track-row.track-last{border-bottom:0}
.track-index{font-family:var(--lr-font-time);font-size:14px;color:var(--lr-ink-3);padding-top:3px}
.track-copy{min-width:0;display:flex;flex-direction:column}
.track-title{font-size:18px;font-weight:600;color:var(--lr-ink);overflow-wrap:break-word}
.track-artist{font-size:16px;color:var(--lr-ink-2);margin-top:2px;text-wrap:pretty}
.track-side{font-size:14px;color:var(--lr-ink-3);padding-top:3px;white-space:nowrap}
.tracklist{margin:0;padding:0;display:grid;gap:0}
.tracklist-row{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border:0;border-bottom:1px solid var(--lr-rule);border-radius:0;min-height:0;background:transparent}
.tracklist-row:last-child{border-bottom:0}
.tracklist-index{width:auto;min-width:1.5em;text-align:left;font-family:var(--lr-font-time);font-size:14px;color:var(--lr-ink-3);padding-top:3px;justify-self:start}
.tracklist-art{width:44px;height:44px;flex:0 0 auto;overflow:hidden;border:0;border-radius:var(--lr-radius-md);background:var(--lr-track);align-self:start}
.tracklist-art img{display:block;width:100%;height:100%;object-fit:cover}
.tracklist-copy{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:2px}
.tracklist-title{font:600 18px/1.25 var(--lr-font-ui);grid-column:1;grid-row:1;color:var(--lr-ink);overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip}
.tracklist-hearts{grid-column:2;grid-row:1;align-self:center;font:600 var(--text-xs) var(--lr-font-ui);color:var(--lr-ink-3);white-space:nowrap}
.tracklist-artist{font:400 16px var(--lr-font-ui);grid-column:1/-1;grid-row:2;color:var(--lr-ink-2);overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:clip}
.tracklist-actions{display:flex;gap:var(--lr-space-3);align-items:center;flex:0 0 auto;align-self:start}
.track-on-air{display:inline-flex;align-items:center;gap:6px;font:700 14px var(--lr-font-ui);color:var(--lr-red);white-space:nowrap}
.track-on-air .live-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:lr-breath 1400ms ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){.track-on-air .live-dot{animation:none}}
.tracklist-link{font:600 14px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-red);text-decoration:underline;text-underline-offset:3px}
.tracklist-tag{font:600 12px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-3);white-space:nowrap}
.track-source{grid-column:1/-1;grid-row:3;font:600 14px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-3)}
.tracklist-empty{font:400 15px var(--lr-font-ui)}

/* Settings sheet */
.settings-sheet{width:100%;max-width:none;padding:0;border:0;background:transparent;color:var(--lr-ink)}
/* No scrim: YouTube's terms forbid an overlay in front of the provider player (compliance finding 7). The sheet is
   positioned clear of the MediaFrame on a phone, so nothing dims or covers it. */
.settings-sheet::backdrop{background:transparent}
.sheet-panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);padding:24px;overflow:auto;background:var(--lr-card);border-left:1px solid var(--lr-rule);box-shadow:-20px 0 50px -30px rgba(0,0,0,.5)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.sheet-head h2{margin:0;font:800 26px/1 var(--lr-font-display);letter-spacing:-.02em}
.sheet-head .close{position:static;width:40px;height:40px;border:1.5px solid var(--lr-rule-3);border-radius:999px;background:var(--lr-card);color:var(--lr-ink);font-size:20px;line-height:1}
.settings-sheet .listener-provider,.settings-sheet .account-links{max-width:none;margin:0 0 20px;border:0;padding:0}
.settings-sheet .setup-label{padding:0 0 8px;font:700 15px var(--lr-font-ui);letter-spacing:0;text-transform:none;color:var(--lr-ink-2)}
.settings-sheet .listener-provider-options{display:flex;flex-wrap:wrap;gap:8px}
.settings-sheet .listener-option{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--lr-rule-3);border-radius:999px;background:var(--lr-card);font:600 15px var(--lr-font-ui)}
.settings-sheet .listener-option:has(input:checked){border-color:var(--lr-ink);background:var(--lr-ink);color:var(--lr-page)}
.settings-sheet .listener-option input{accent-color:var(--lr-red)}
.settings-sheet .sheet-account{display:flex;gap:8px;margin:20px 0}
.settings-sheet .button-primary{min-height:48px;padding:0 22px;border:0;border-radius:var(--lr-radius-pill);background:var(--lr-red);color:var(--lr-on-red);font:600 16px var(--lr-font-ui);box-shadow:var(--lr-shadow-press)}
.settings-sheet .button-secondary{min-height:48px;padding:0 22px;border:1.5px solid var(--lr-rule-3);border-radius:var(--lr-radius-pill);background:var(--lr-card);color:var(--lr-ink);font:600 16px var(--lr-font-ui);box-shadow:none}

/* Station host: no Post Radio brand in the header; the station name leads. */
body[data-station] .channel-brand{display:none}
body[data-station] .channel-divider{display:none}
/* Powered by lives at the very end of the page content, never floating over the list and never behind the FloatingNav.
   On phone tabs (when the tracklist fills the scroll area) the link sits inside the scroll area's bottom padding. */
.powered-by{order:99;margin:24px 0 8px;padding:8px 0 0;text-align:center;font:400 13px var(--lr-font-ui);color:var(--lr-ink-3)}
.powered-by a{color:var(--lr-ink-3);text-decoration:underline;text-underline-offset:2px}
.powered-by[hidden]{display:none}

.phone-tab-toggle{display:none}

/* Tap targets (hex#178): the sign-in button, the brand link, the legal links, the phone tab toggle and the tracklist
   source links keep their visible size; an invisible ::before stretches each touchable area to at least var(--lr-tap)
   square without moving the layout around them (the host keeps position:relative so the pseudo-element tracks its
   box). The tab toggle sits 10px from its header neighbours and the source link 14px from the row art, so the small
   extensions never overlap another hit area by more than 4px. */
.chat-signin,.channel-brand,.legal-links a,.phone-tab-toggle,.track-source{position:relative}
.chat-signin::before{content:"";position:absolute;inset:-8px}
.channel-brand::before{content:"";position:absolute;inset:-8px}
.legal-links a::before{content:"";position:absolute;inset:-12px -2px}
.phone-tab-toggle::before{content:"";position:absolute;inset:-2px}
.track-source::before{content:"";position:absolute;inset:-13px -4px}

@media (max-width:719px),(max-height:559.98px) {
  /* Phone layout rules now live in app/styles/09-communal-phone.css (Change A, "Communal mobile layout"). This block
     keeps only the rules that must override a desktop rule above for the phone breakpoint. */
  .rail-head{display:none}

  /* Settings is a bottom sheet clear of the MediaFrame: no scrim, and its top is measured to the frame's bottom so
     it never paints over the provider player. It scrolls inside the viewport, with the safe area kept clear. */
  /* The sheet is the scroll container: it starts clear of the player and ends at the viewport bottom, scrolling from
     its header to the last control. max-height is the small viewport height (svh) so the bottom never hides behind
     mobile browser chrome; dvh is the fallback where svh is unknown. */
.sheet-panel{
  top:var(--settings-sheet-top,auto);
  bottom:0;
  height:auto;
  max-height:calc(100dvh - var(--settings-sheet-top,54vh));
  max-height:calc(100svh - var(--settings-sheet-top,54vh));
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-left:0;
  border-top:1px solid var(--lr-rule);
  border-radius:16px 16px 0 0;
  box-shadow:0 -20px 50px -30px rgba(0,0,0,.5);
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
  overscroll-behavior:contain
}
}