/* Open Play — "who's playing" avatar strip (customer session page + public
   marketing pages). Plain CSS on purpose: the marketing pages do not ship the
   compiled Tailwind bundle, so utility classes would silently not exist.

   Colours read the marketing theme's custom properties where they exist
   (--text-muted, --card-bg, --card-border on /open-play) and fall back to the
   customer portal's light values where they don't. One file, both chromes. */

.op-roster { margin: 0 0 1rem; }

.op-roster__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
}
.op-roster__title {
    font-size: .8rem; font-weight: 700;
    color: var(--text-secondary, #374151);
    text-transform: uppercase; letter-spacing: .04em;
}
.op-roster__count {
    font-size: .75rem; white-space: nowrap;
    color: var(--text-muted, #6b7280);
}

/* Overlapping stack. Left padding compensates for the negative margin so the
   first avatar is not clipped by an ancestor's overflow. */
.op-roster__stack { display: flex; flex-wrap: wrap; align-items: center; padding-left: 6px; }

.op-roster__avatar {
    position: relative;
    width: 36px; height: 36px; flex-shrink: 0;
    margin-left: -6px;
    border-radius: 9999px;
    /* Ring separates overlapping avatars; matches the surface behind them. */
    border: 2px solid var(--card-bg, #fff);
    background: #ede9fe;
    color: #6d28d9;
    font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}
.op-roster__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-roster__initial { line-height: 1; }
.op-roster__avatar--more {
    background: var(--card-border, #f3f4f6);
    color: var(--text-muted, #4b5563);
    font-size: .72rem;
}

/* An unclaimed spot. Hollow and dashed so the row reads as a lineup still
   forming, rather than as avatars that failed to load. The outer ring stays
   the surface colour, exactly like a real avatar, so the overlap spacing and
   separation are identical along the whole row. */
.op-roster__avatar--open {
    background: transparent;
    box-shadow: none;
}
.op-roster__avatar--open::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1.5px dashed var(--card-border, #cbd6cf);
}

/* Name stays available to assistive tech even when a photo replaces the initial. */
.op-roster__sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.op-roster__names {
    margin-top: 8px;
    font-size: .78rem; line-height: 1.4;
    color: var(--text-muted, #4b5563);
}

@media (min-width: 640px) {
    .op-roster__avatar { width: 40px; height: 40px; font-size: .85rem; }
}

/* Customer portal dark mode — that chrome stamps the root rather than defining
   the marketing tokens, so it needs explicit overrides. */
:root[data-theme="dark"] .op-roster__title,
:root.theme-dark .op-roster__title { color: var(--text-secondary, #e5e7eb); }
:root[data-theme="dark"] .op-roster__count,
:root.theme-dark .op-roster__count,
:root[data-theme="dark"] .op-roster__names,
:root.theme-dark .op-roster__names { color: var(--text-muted, #9ca3af); }
:root[data-theme="dark"] .op-roster__avatar,
:root.theme-dark .op-roster__avatar {
    border-color: var(--bg-surface, var(--card-bg, var(--surface, #1f2937)));
    background: rgba(124, 58, 237, .25);
    color: #ddd6fe;
}
:root[data-theme="dark"] .op-roster__avatar--more,
:root.theme-dark .op-roster__avatar--more { background: var(--bg-subtle, #374151); color: var(--text-secondary, #d1d5db); }
:root[data-theme="dark"] .op-roster__avatar--open,
:root.theme-dark .op-roster__avatar--open { background: transparent; }