/* Narrow broadcast treatment layered after stream-rosters.css. Presentation only. */
.roster-panel.roster-readable.roster-compact {
  width:180px;
  max-width:100%;
}
.roster-panel.roster-readable.roster-compact .compact-header {
  grid-template-columns:36px minmax(0,1fr) 22px;
  gap:4px;
}
.roster-panel.roster-readable.roster-compact .roster-logo {
  width:36px;
  height:28px;
}
.roster-panel.roster-readable.roster-compact .roster-logo svg {
  width:100%;
  max-width:100%;
  height:28px;
}
.roster-panel.roster-readable.roster-compact .compact-copy {
  display:grid;
  grid-template-rows:auto auto;
  gap:2px;
  min-width:0;
}
.roster-panel.roster-readable.roster-compact .roster-title {
  display:block;
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:700 11px/1.05 Georgia,serif;
  color:#ffe3a1;
  text-align:left;
}
.roster-panel.roster-readable.roster-compact .roster-subtitle {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:800 8px/1 system-ui,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#d4aeff;
}
.roster-panel.roster-readable.roster-compact .compact-counter {
  font-size:9px;
}
.roster-panel.roster-readable.roster-compact .roster-slot {
  padding-inline:4px;
  gap:4px;
}
.roster-panel.roster-readable.roster-compact .roster-number {
  width:14px;
  height:14px;
  font-size:7px;
}
.roster-panel.roster-readable.roster-compact .roster-slot-copy {
  gap:4px;
}
.roster-panel.roster-readable.roster-compact .roster-ink-name {
  flex-basis:43px;
  font-size:6.5px;
}
.roster-panel.roster-readable.roster-compact .roster-name {
  font-size:min(var(--compact-name-size,18px),17px);
}
.roster-panel.roster-readable.roster-compact .roster-star {
  font-size:10px;
}
.roster-viewer #roster-output {
  width:min(180px,calc(100vw - 32px));
}

/* A restrained reflection sweep draws attention only to currently open slots. */
.roster-panel.roster-readable.roster-compact .roster-slot.is-open::before {
  content:'';
  position:absolute;
  top:-50%;
  left:0;
  width:22%;
  height:200%;
  z-index:0;
  pointer-events:none;
  opacity:0;
  transform:translateX(-180%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(var(--slot-rgb),.06) 24%,rgba(255,255,255,.18) 50%,rgba(var(--slot-rgb),.06) 76%,transparent);
  animation:roster-open-reflection 7.5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes roster-open-reflection {
  0% { opacity:0; transform:translateX(-180%) skewX(-18deg); }
  6% { opacity:.65; }
  24% { opacity:.65; }
  32%,100% { opacity:0; transform:translateX(580%) skewX(-18deg); }
}
@media (prefers-reduced-motion:reduce) {
  .roster-panel.roster-readable.roster-compact .roster-slot.is-open::before { animation:none; opacity:0; }
}