/* Page grain only: an SVG feTurbulence layer behind the shell, so it never sits on a card (cards carry their own
   opaque surface). --lr-grain-alpha is .10 on Paper and .045 on Graphite. */
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--lr-grain); opacity:var(--lr-grain-alpha); }
.shell { position:relative; z-index:1; }
button { font:inherit; cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.shell { max-width:1440px; min-height:100vh; margin:auto; padding:20px 28px 30px; }
.utility { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 0 18px; font-size:13px; letter-spacing:.02em; }
.brand { display:flex; gap:10px; align-items:center; font-family:var(--display); font-size:25px; font-weight:800; letter-spacing:-.05em; }
.signal { position:relative; display:inline-block; width:23px; height:23px; border:2px solid var(--lime); border-radius:50%; }
.signal:before,.signal:after { content:""; position:absolute; border:2px solid var(--lime); border-radius:50%; inset:4px; }
.signal:after { inset:8px; background:var(--lime); }
.utility-nav { display:flex; align-items:center; gap:18px; color:var(--muted); }
.subtle { color:var(--muted); }
.mode { padding:8px 11px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--ink); }
.main { display:grid; grid-template-columns:minmax(0,1.52fr) minmax(300px,.72fr); gap:28px; padding-top:27px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--text-faint); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }

.dot { width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--accent-wash); }
h1 { max-width:760px; margin:14px 0 10px; font-size:clamp(38px,5vw,75px); line-height:.91; letter-spacing:-.075em; font-weight:780; }
.deck { max-width:650px; margin:0; color:var(--muted); font-size:16px; line-height:1.5; }
.host-row { display:flex; align-items:center; gap:11px; margin:23px 0 30px; font-size:14px; }
.avatar { width:31px;height:31px;border:2px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--dark);font-family:var(--mono);font-weight:800;background:var(--orange); }
.avatar.small { width:25px;height:25px;font-size:var(--text-xs); }
.host-row strong { font-weight:720; }
.host-row span { color:var(--muted); }
.listen-card { position:relative; overflow:hidden; background:var(--paper); color:var(--ink); padding:25px; border:var(--border-drawn); border-radius:var(--radius-lg); box-shadow:var(--shadow-hard); }
.listen-card:after { content:""; width:190px;height:190px;position:absolute;right:-95px;top:-95px;border:var(--stroke) solid var(--line);border-radius:50%;box-shadow:0 0 0 20px var(--accent-2-wash),0 0 0 40px var(--accent-2-wash); }
.card-top { position:relative;z-index:1; display:flex;justify-content:space-between;align-items:start;gap:15px; }
.label { font-size:var(--text-xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase; }
.sync { display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700; }
.sync:before { content:""; width:7px;height:7px;border-radius:50%;background:var(--lime); }
.record { position:relative;z-index:1; display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:end;margin-top:43px; }
.art { width:120px; aspect-ratio:1; position:relative; overflow:hidden; border:var(--border-drawn); background:repeating-linear-gradient(135deg,var(--bg-sunken) 0 5px,var(--border-soft) 5px 10px); }
.art:after { content:"";position:absolute;width:74px;height:74px;border:12px solid var(--ink);border-radius:50%;left:23px;top:23px;box-shadow:inset 0 0 0 7px var(--dark); }
.track h2 { margin:0;font-family:var(--display);font-size:clamp(26px,3vw,42px);line-height:.96;letter-spacing:-.035em; }
.track p { margin:10px 0 4px;font-size:16px; }
.track p[data-empty-track] { color:var(--muted);font-size:15px;line-height:1.4;display:flex;flex-wrap:wrap;gap:10px;align-items:center; }
.inline-empty-action { margin-left:6px;min-height:32px;padding:0 12px;border:1px solid var(--lime);background:var(--lime);color:var(--dark);font:700 12px var(--mono);letter-spacing:.06em;text-transform:uppercase; }
.track small { color:var(--muted);font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase; }
.timeline { position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:32px;font-size:12px;font-variant-numeric:tabular-nums; }
.bar { height:8px;border:2px solid var(--line);background:var(--dark);border-radius:9px;overflow:hidden; }.bar span{display:block;background:var(--orange);height:100%;width:38%;}
.play-row { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--line);margin-top:23px;padding-top:17px; }
.provider { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:720; }.apple { width:19px;height:19px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--dark);color:var(--lime);font-size:12px; }
.local-state{
  font:700 12px var(--font);
  color:var(--lime)
}
.sync-panel{
  position:relative;
  z-index:1;
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:14px
}
.sync-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.sync-panel h3{
  margin:0;
  font-size:13px
}
.sync-panel p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px
}
.sync-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:12px
}
.sync-stat{
  border:1px solid var(--line);
  padding:8px;
  font:var(--text-xs) var(--mono);
  color:var(--muted)
}
.sync-stat b{
  display:block;
  color:var(--ink);
  font-size:13px;
  margin-top:4px
}
.sync-panel audio{
  display:block;
  width:100%;
  height:30px;
  margin-top:12px
}
.tap-listen{
  min-height:38px;
  border:1px solid var(--lime);
  background:var(--lime);
  color:var(--dark);
  font-weight:800;
  padding:0 12px
}
.youtube-player{
  width:100%;
  height:auto;
  min-height:200px;
  margin-top:12px;
  border:1px solid var(--line);
  background:var(--dark)
}
.soundcloud-player{
  width:100%;
  height:166px;
  margin-top:12px;
  border:1px solid var(--line);
  background:var(--dark)
}
.detected-provider{
  margin:8px 0 0;
  color:var(--lime);
  font:700 12px var(--mono);
  letter-spacing:.04em
}
@media(max-width:520px){
  .sync-stats{
    grid-template-columns:repeat(2,1fr)
  }
}
.host-controls{
  margin-top:28px;
  border:2px solid var(--line);
  background:var(--card);
  box-shadow:var(--shadow-hard)
}
.host-controls-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:18px
}
.host-controls h2{
  margin:6px 0;
  font-size:28px;
  letter-spacing:-.06em
}
.host-controls p{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  max-width:520px;
  margin:0
}
.danger{
  height:40px;
  white-space:nowrap;
  border:1px solid var(--orange);
  background:var(--orange);
  color:var(--on-accent);
  font-weight:800;
  padding:0 12px
}
.host-tabs{
  display:flex;
  flex-wrap:nowrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  overflow-y:hidden
}
.host-tab{
  position:relative;
  flex:0 0 auto;
  min-height:42px;
  padding:0 var(--space-4);
  white-space:nowrap;
  border:0;
  background:transparent;
  color:var(--text-faint);
  font:700 var(--text-xs) var(--font-mono)
}
.host-tab.active{
  color:var(--text)
}
.host-tab.active:after{
  content:"";
  position:absolute;
  right:var(--space-3);
  bottom:0;
  left:var(--space-3);
  height:var(--stroke-marker);
  background:var(--accent)
}
.host-pane{
  padding:18px
}
.host-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px
}
.host-action{
  min-height:54px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  text-align:left;
  padding:10px
}
.host-action:hover{
  border-color:var(--lime);
  color:var(--lime)
}
.host-list{
  display:grid;
  gap:9px
}
.host-row-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
  padding:8px 0;
  font-size:13px
}
.host-row-item small,.host-prototype{
  display:block;
  color:var(--muted);
  font-size:var(--text-xs);
  line-height:1.45;
  margin-top:3px
}
.access-toggle{
  width:44px;
  height:24px;
  border:1px solid var(--lime);
  border-radius:99px;
  background:var(--lime)
}
.access-toggle:after{
  content:"";
  display:block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--dark);
  margin-left:auto;
  margin-right:3px
}
@media(max-width:790px){
  .host-controls-head{
    display:block
  }
  .danger{
    margin-top:13px
  }
  .host-grid{
    grid-template-columns:1fr
  }
  .host-controls{
    margin-top:22px
  }
}
.notice { margin-top:27px; display:flex;align-items:flex-start;gap:11px;padding:15px 16px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:13px;line-height:1.45; }.notice b{color:var(--ink);}.notice .spark{color:var(--lime);font-size:17px;line-height:16px;}
.prototype-review{
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--line)
}
.prototype-review .eyebrow{
  margin-bottom:8px
}
.state-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.state-nav .tool[aria-pressed="true"]{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--dark);
  font-weight:800
}
.countdown{
  margin:0 0 22px;
  padding:15px 17px;
  border:2px solid var(--orange);
  background:var(--accent-wash);
  color:var(--ink);
  box-shadow:var(--shadow-hard)
}
.countdown strong{
  display:block;
  font-size:16px
}
.countdown p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4
}
.countdown-time{
  font:800 22px var(--mono);
  color:var(--orange);
  float:right
}
.warning{
  border-color:var(--orange);
  background:var(--accent-wash)
}
.integration{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:18px
}
.integration div{
  border:1px solid var(--line);
  padding:12px;
  font-size:12px;
  line-height:1.4
}
.integration b{
  display:block;
  color:var(--lime);
  font:700 var(--text-xs) var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:5px
}
.ended{
  max-width:760px;
  padding:54px 0
}
.ended h2{
  font:800 clamp(40px,6vw,68px)/.9 var(--display);
  letter-spacing:-.07em;
  margin:12px 0
}
.ended>p{
  color:var(--muted);
  line-height:1.55;
  max-width:610px
}
.history{
  margin-top:27px;
  border:2px solid var(--line);
  background:var(--card)
}
.history-head{
  padding:16px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.history ol{
  margin:0;
  padding:0 16px;
  list-style:none
}
.history li{
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}
.history li:last-child{
  border:0
}
.history small{
  color:var(--muted);
  display:block;
  margin-top:3px
}
.quiet{
  color:var(--muted);
  font:12px var(--mono)
}
@media(max-width:790px){
  .integration{
    grid-template-columns:1fr
  }
  .ended{
    padding:26px 0
  }
  .countdown-time{
    float:none;
    display:block;
    margin-top:8px
  }
}
.room-aside { display:flex; flex-direction:column; border:var(--border-drawn); min-height:600px; background:var(--surface); }
.count{color:var(--text-muted);font-size:var(--text-xs);font-family:var(--font-mono)}
.people { display:flex;gap:7px;padding:16px 18px;border-bottom:1px solid var(--line); }.people .avatar{border:2px solid var(--card);margin-right:-14px;}.guest-stack{margin-left:11px;padding:4px 0 0 17px;color:var(--muted);font-size:12px;}
.room-aside .tracklist{display:none}
.chat{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface);border:var(--stroke) solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px var(--space-4);border-bottom:var(--stroke) solid var(--border)}
.chat-title{font:700 var(--text-xs) var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.chat-list{display:flex;flex-direction:column;gap:0;margin:0;padding:var(--space-2) var(--space-4);list-style:none;overflow-y:auto;flex:1;min-height:0}
/* Chat rows are article.message (app/views/chat-panel.mjs), laid out like the design's .chat-list rows. */
.chat .message{display:grid;grid-template-columns:36px 1fr auto;gap:var(--space-3);align-items:start;padding:var(--space-2) 0;border-bottom:1px dashed var(--border-soft)}
.chat .message:last-of-type{border-bottom:0}
.chat .message .chat-body{display:block;margin:0;min-width:0}
.chat-text{display:block;margin-top:var(--space-1);overflow-wrap:anywhere}
.chat-avatar{width:36px;height:36px;border:var(--stroke) solid var(--border);border-radius:50%;display:grid;place-items:center;color:var(--on-accent);font:800 var(--text-sm) var(--font-mono)}
.chat-avatar[data-tone="signal"]{background:var(--accent)}
.chat-avatar[data-tone="volt"]{background:var(--accent-2);color:var(--on-accent-2)}
.chat-avatar[data-tone="paper"]{background:var(--surface);color:var(--text)}
.chat-meta{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.chat-name{font:700 var(--text-sm) var(--font-sans);color:var(--text)}
.chat-role{font:700 var(--text-xs) var(--font-mono);letter-spacing:.1em;text-transform:none;color:var(--accent);border:1px solid var(--accent);padding:1px 6px;border-radius:99px}
.chat-role[data-role="cohost"]{color:var(--on-accent-2);border-color:var(--accent-2);background:var(--accent-2)}
.chat-time{font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase}
.chat-body{margin:var(--space-1) 0 0;font:var(--text-sm)/1.45 var(--font-sans);color:var(--text);overflow-wrap:anywhere}
.chat-remove{
  justify-self:end;
  align-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  padding:0;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-pill);
  background:var(--surface);
  color:var(--text-faint);
  opacity:0;
  transition:opacity 140ms var(--ease-snap)
}
.chat-remove svg{width:14px;height:14px}
.chat .message:hover .chat-remove,.chat .message:focus-within .chat-remove{opacity:1}
@media (hover:none){.chat-remove{opacity:1}}
.chat-remove:hover,.chat-remove:focus-visible{color:var(--accent);border-color:var(--accent);opacity:1}
.chat .message.chat-system{display:flex;align-items:center;gap:var(--space-2);border-bottom:0}
.chat-system-icon{display:inline-flex;align-items:center;color:var(--text-faint)}
.chat-system-icon svg{width:10px;height:10px}
.chat-system-text{font:700 var(--text-xs) var(--font-mono);letter-spacing:.06em;color:var(--text-faint)}
.tracklist-empty{margin:var(--space-4) 0;color:var(--text-muted);font:700 var(--text-xs) var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
/* Empty chat reads like a message (same sans tokens) and sits centred in the list's empty area (CJ, 2026-10-11). */
.chat-empty{margin:0;color:var(--text-muted);font:400 var(--text-sm)/1.45 var(--font-sans);text-align:center}
.chat-empty:not([hidden]){position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--space-4);pointer-events:none}