/* 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),(max-height:559.98px) {
  .listen-card{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible}
}
/* 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}
/* Avatar initials on the paper-tone (initial) circle use the primary ink on the sunken surface, so the "P" reads in
   both themes (CJ, 2026-10-05). The .avatar class sets color: var(--dark); these rules override it with var(--text). */
#signed-in-avatar,.signed-in-stack{display:grid;place-items:center;font:800 var(--text-sm) var(--font-display);color:var(--text)}
/* "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}
  .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:min(26vh,220px);overflow:auto;padding:0 24px;border-top:var(--stroke) solid var(--border-soft)}
  .room-aside .tracklist{display:grid;padding-bottom:var(--space-3)}
  /* Chat and the tracklist share the rail (CJ, 2026-10-05, "I prefer 2"): both are shown, so the Chat · Tracklist
     toggle has nothing to switch and is hidden. The toggle lives only on the phone, where one panel fits. */
  .rail-head{display:none}
}
/* CJ, 2026-10-09: the chat card takes most of the rail; the tracklist is a shorter cap. Overrides 04's
   min(44vh,320px) rail rule (same query, #live raises specificity; 05 loads after 04). */
@media (min-width:720px) and (min-height:560px){
  #live .room-aside{height:calc(100dvh - 140px)}
  #live .room-aside .chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  #live .room-aside .chat-list{flex:1 1 auto;min-height:0;overflow-y:auto}
  #live .room-aside .aside-tracklist{max-height:min(26vh,220px)}
}
/* Host tools: HostTransport, the Up next add row, TrackRow queue rows and the Room tab sections. */
.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}
.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-md) 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}
@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}
/* #309: one avatar stack, in the header, at every width. The rail's people row repeated the same presence.signedIn
   people the header AvatarStack renders, and with one person signed in it read as a stray circle above the chat
   card; the row's own count was already hidden, so the row goes. */
.aside-presence{display:none}
.aside-presence [data-room-presence]{display:none}
@media (max-width:760px),(max-height:559.98px) {
  .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}
}

/* 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),(max-height:559.98px){#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[data-muted="true"] .mute-cross{display:inline}.mute-toggle[data-muted="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}

/* Phone rules for the chat and tracklist tabs now live in app/styles/09-communal-phone.css (Change A). The desktop
   bundle keeps only rules common to every breakpoint. */

/* Ambient preview (/ambient.html): the same frame as the room, a stack of seed cards. Plays only on a tap. */
.ambient-shell{max-width:760px}
.ambient-head{padding:var(--space-4) 0 var(--space-5);border-bottom:var(--stroke-bold) solid var(--border);margin-bottom:var(--space-6)}
.ambient-head h1{margin:0;font:800 clamp(var(--text-2xl),6vw,var(--text-4xl))/.96 var(--font-display);letter-spacing:-.035em}
.ambient-controls,.ambient-seed-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ambient-controls{margin-bottom:var(--space-5)}
.ambient-volume{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6)}
.ambient-volume input[type="range"]{width:100%;min-height:44px;accent-color:var(--accent-2)}
.ambient-volume-value{font:700 var(--text-sm) var(--font-mono);color:var(--text-muted);min-width:52px;text-align:right}
.ambient-seeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-4)}
.ambient-seed{padding:var(--space-4);border:var(--border-drawn);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-hard)}
.ambient-seed[data-active]{box-shadow:var(--shadow-hard-lg);border-color:var(--accent-2)}
.ambient-seed h2{margin:0;font:800 var(--text-xl)/1 var(--font-display);letter-spacing:-.035em}
.ambient-meta{margin:var(--space-2) 0 0;color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.ambient-state{margin:var(--space-3) 0 var(--space-4);font:700 var(--text-sm) var(--font-mono);color:var(--text-muted)}
.ambient-seed[data-active] .ambient-state{color:var(--text)}
@media (max-width:719px),(max-height:559.98px){
  .ambient-shell{padding:0 var(--space-4) var(--space-6)}
  .ambient-seeds{grid-template-columns:1fr}
  .ambient-controls .tool,.ambient-seed-actions .tool{flex:1 1 auto}
}

/* Owner-only song alignment tool (/align.html). Phone first: a 16px side gutter, the room's header and back control,
   the room's buttons and links, theme tokens so dark mode is the room's dark. The video keeps its controls. */
.align-shell{max-width:760px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}
.align-head{gap:var(--space-3);padding:0 0 var(--space-4);border-bottom:var(--stroke-bold) solid var(--border);margin-bottom:var(--space-5)}
.align-head-copy{min-width:0;flex:1}
.align-title{margin:0;font:800 var(--text-xl)/1.12 var(--font-display);letter-spacing:-.035em}
.align-head .back{flex:0 0 auto;text-decoration:none}
.align-meta{margin:var(--space-2) 0 0;color:var(--text-faint);font:var(--text-xs) var(--font-mono);letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-status{margin:0 0 var(--space-4);color:var(--text-muted);font:700 var(--text-sm) var(--font-sans)}
.align-status[hidden]{margin:0}
.align-status[data-state="error"]{color:var(--accent)}
.align-status[data-state="saved"]{color:var(--text)}
.align-list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}
.align-h2{margin:0;font:800 var(--text-lg)/1.1 var(--font-display);letter-spacing:-.03em}
.align-list{list-style:none;margin:0;padding:0;border-top:var(--stroke) solid var(--border)}
.align-list li{border-bottom:var(--stroke) solid var(--border)}
.align-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);width:100%;min-height:var(--tap-min,44px);padding:var(--space-3) 0;border:0;background:transparent;text-align:left;color:var(--text);cursor:pointer}
.align-row:hover,.align-row:focus-visible{background:var(--bg-sunken)}
.align-row-main{display:grid;gap:2px;min-width:0}
.align-row-name{font:700 var(--text-sm) var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-row-artist{color:var(--text-muted);font:var(--text-xs) var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.align-row-lengths{margin-top:2px;color:var(--text-faint);font:var(--text-xs) var(--font-mono);letter-spacing:.02em}
.align-row-side{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto}
.align-row-offset{color:var(--text-muted);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em}
.align-row-done{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border:var(--stroke) solid var(--border);border-radius:var(--radius-pill);background:var(--accent-2);color:var(--on-accent-2)}
.align-row-done svg{width:13px;height:13px}
.align-empty{margin:var(--space-4) 0;color:var(--text-muted);font:var(--text-xs) var(--font-mono);letter-spacing:.04em}
.align-detail{margin-top:0}
.align-detail-head{align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.align-detail-head .back{flex:0 0 auto;text-decoration:none}
.align-detail .align-h2{margin:var(--space-3) 0 var(--space-1)}
.align-detail .align-meta{overflow:visible;white-space:normal}
.align-video{margin-top:var(--space-3)}
.align-youtube{position:relative;width:100%;aspect-ratio:16/9;border:var(--stroke) solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-sunken)}
.align-youtube iframe{position:absolute;inset:0;width:100%;height:100%}
.align-controls{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.align-offset{display:flex;align-items:baseline;gap:var(--space-2)}
.align-offset-value{font:800 var(--text-2xl)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.align-offset-label{color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.align-buttons{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:var(--space-2)}
.align-buttons .button{min-height:48px;padding:0 var(--space-2);font-size:var(--text-sm);white-space:nowrap}
.align-save{width:100%;min-height:48px}
.align-preview-note{margin:0;color:var(--text-muted);font:var(--text-xs) var(--font-sans);line-height:1.5}
.align-apple-link{display:inline-block;color:var(--accent);font:700 var(--text-sm) var(--font-sans);text-decoration:underline;text-underline-offset:3px}
.align-apple-link:hover,.align-apple-link:focus{color:var(--accent-hover)}

/* Legal pages (/privacy, /terms). Plain prose on the paper surface; text never below --text-xs. */
.legal{max-width:62ch;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-6)}
.legal .back{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);font:700 var(--text-sm) var(--font-sans);text-decoration:none}
.legal h1{margin:var(--space-3) 0 var(--space-5);font:800 clamp(var(--text-2xl),6vw,var(--text-3xl))/.96 var(--font-display);letter-spacing:-.035em}
.legal h2{margin:var(--space-6) 0 var(--space-3);font:800 var(--text-lg) var(--font-display);letter-spacing:-.02em}
.legal p{margin:0 0 var(--space-4);font:400 var(--text-sm)/1.5 var(--font-sans);color:var(--text)}
.legal .legal-meta,.legal .legal-meta a{color:var(--text-muted)}
.legal a{color:inherit;text-underline-offset:2px}
.legal-links{display:flex;gap:var(--space-3);margin-top:var(--space-5);color:var(--text-muted);font:700 var(--text-xs) var(--font-sans)}
.legal-links a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}

/* YouTube is named as the source beside any YouTube thumbnail (compliance finding 12). A small mono label, never the
   thumbnail itself, links to the video; the row opens playback, not the badge. */
.track-source{align-self:flex-start;width:max-content;color:var(--text-faint);font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.track-source:hover,.track-source:focus{color:var(--accent);text-decoration:underline;text-underline-offset:2px}