/* ==========================================================================
   LEAGUE TEAM TRUTH (Oct 9 2026) — js/roster-truth.js + js/game-state.js
   A league team's roster belongs to the commissioner; a league team's game
   today is the official one. Tokens only — no hex, no !important.
   ========================================================================== */

/* ── "Roster managed by <league>" ─────────────────────────────────────── */
.srt-banner {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-1);
    margin: 0 0 var(--gc-space-4);
    padding: var(--gc-space-3) var(--gc-space-4);
    border: 1px solid var(--gc-status-infoBorder);
    border-left-width: 4px;
    border-radius: var(--gc-radius-md);
    background: var(--gc-status-infoMuted);
    color: var(--gc-text-color-primary);
    font-family: var(--gc-font-body);
}
.srt-banner-title {
    display: flex;
    align-items: center;
    gap: var(--gc-space-2);
    font-family: 'Saira Condensed', var(--gc-font-body);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.srt-banner-title svg,
.srt-banner-title i { width: 18px; height: 18px; flex-shrink: 0; color: var(--gc-status-info); }
.srt-banner-body {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gc-text-color-secondary);
}
.srt-banner-yours { color: var(--gc-text-color-muted); }
.srt-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gc-text-color-link);
    font-weight: 700;
    text-decoration: underline;
}
.srt-dialog .srt-banner-title { margin-bottom: var(--gc-space-2); }

/* ── "Message the commissioner" (js/roster-truth.js → league_inbox) ───── */
.srt-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gc-space-2);
    margin: var(--gc-space-1) 0;
}
.srt-msg-btn,
.srt-msg-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gc-space-2);
    min-height: 44px;
}
.srt-msg-btn svg,
.srt-msg-btn i { width: 18px; height: 18px; flex-shrink: 0; }
/* The banner lives inside the Settings and Roster modals (z modal); the
   composer opens over them. */
.srt-msg-backdrop { z-index: var(--gc-z-modalElevated); align-items: center; }
.srt-msg-body {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-2);
    padding: var(--gc-space-5) var(--gc-space-6);
    font-family: var(--gc-font-body);
}
.srt-msg-to {
    font-size: 14px;
    font-weight: 700;
    color: var(--gc-text-color-secondary);
    margin-bottom: var(--gc-space-2);
}
.srt-msg-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-text-color-muted);
}
.srt-msg-input { width: 100%; min-height: 44px; font-family: var(--gc-font-body); }
.srt-msg-note:empty { display: none; }
.srt-msg-note { margin-top: var(--gc-space-2); }
.srt-msg-action[hidden] { display: none; }
.srt-dialog .srt-banner-body { margin-top: var(--gc-space-1); }

/* ── The banners as ONE slim line (Oct 10 2026, Carlos: "It's massive") ──
   lock · Roster managed by <league> · [Message the commissioner] · contact ·
   Why?  — at most ~48px tall at iPad landscape and desktop (44px controls +
   the 1px border). The explanation lives in .srt-why-panel, behind "Why?". */
.srt-banner--compact {
    container-type: inline-size;
    gap: 0;
    margin: 0 0 var(--gc-space-3);
    padding: 0 var(--gc-space-3);
    border-left-width: 3px;
}
.srt-bar {
    display: flex;
    align-items: center;
    gap: var(--gc-space-3);
    min-height: 44px;
    min-width: 0;
}
.srt-bar-title {
    display: inline-flex;
    align-items: center;
    gap: var(--gc-space-2);
    min-width: 0;
    flex: 0 1 auto;
    font-family: 'Saira Condensed', var(--gc-font-body);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.srt-bar-title svg,
.srt-bar-title i { width: 16px; height: 16px; flex-shrink: 0; color: var(--gc-status-info); }
.srt-bar-name { overflow: hidden; text-overflow: ellipsis; }
.srt-bar .srt-msg-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 var(--gc-space-3);
    font-size: 14px;
    white-space: nowrap;
}
.srt-bar .srt-msg-btn svg,
.srt-bar .srt-msg-btn i { width: 16px; height: 16px; }
.srt-bar-mail {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    line-height: 44px;
}
.srt-bar-mail-short { display: none; }
/* Settings → Roster's card is ~630px wide: the league's name wins the room,
   the link becomes "Email" (the address stays its href/title/Why? panel). */
@container (max-width: 720px) {
    .srt-bar-mail-full { display: none; }
    .srt-bar-mail-short { display: inline; }
    .srt-bar-mail { flex-shrink: 0; }
    .srt-bar { gap: var(--gc-space-2); }
    .srt-bar-title { font-size: 13px; letter-spacing: 0; }
    .srt-bar .srt-msg-btn { padding: 0 var(--gc-space-2); }
}
.srt-why {
    margin-left: auto;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 var(--gc-space-2);
    border: 0;
    background: transparent;
    color: var(--gc-text-color-secondary);
    font-family: var(--gc-font-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.srt-why[aria-expanded="true"] { color: var(--gc-text-color-primary); }
.srt-why-panel {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-1);
    padding: var(--gc-space-1) 0 var(--gc-space-3);
    border-top: 1px solid var(--gc-status-infoBorder);
}
.srt-why-panel[hidden] { display: none; }
@media (max-width: 640px) {
    .srt-bar { flex-wrap: wrap; gap: 0 var(--gc-space-3); }
    .srt-bar-title { flex-basis: 100%; min-height: 36px; }
}

/* The add controls are not drawn on a league team — js/settings.js guards the
   functions too; this keeps the button from being a door that says no. */
body[data-roster-authority="league"] #settingsTabRoster [onclick="addPlayerRow()"],
body[data-roster-authority="league"] #rosterModal .rmv2-add { display: none; }

/* Read-only names (the Roster & Depth Chart table + the Edit Player form). */
#rosterTableBody input[data-field="name"][readonly],
#addPlayerModal input[readonly] {
    cursor: default;
    color: var(--gc-text-color-secondary);
    background: transparent;
    border-color: transparent;
}
.srt-editor-note {
    margin-top: var(--gc-space-2);
    font-family: var(--gc-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--gc-text-color-muted);
}

/* ── START: today's official game leads ───────────────────────────────── */
.gs-today {
    display: flex;
    flex-direction: column;
    gap: var(--gc-space-3);
    margin: 0 0 var(--gc-space-5);
}
.gs-today[hidden] { display: none; }
.gs-today .gs-scheduled-card { cursor: default; }
/* The card's hover sheen (theme.css .gs-scheduled-card::before) is an
   absolute inset:0 layer; on this card it must never take the JOIN tap. */
.gs-today .gs-scheduled-card::before { pointer-events: none; }
.gs-today-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gc-space-2);
    min-height: 48px;
    min-width: 120px;
    margin-left: auto;
    padding: 0 var(--gc-space-5);
    border: none;
    border-radius: var(--gc-radius-md);
    background: var(--gc-accent-primary);
    color: var(--gc-text-on-accent);
    font-family: 'Saira Condensed', var(--gc-font-body);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-right: var(--gc-space-3);
}
.gs-today-join:hover { background: var(--gc-accent-primaryHover); }
.gs-today-wait {
    font-family: var(--gc-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--gc-text-color-secondary);
}
.gs-today-own {
    margin: var(--gc-space-1) 0 0;
}
@media (max-width: 600px) {
    .gs-today .gs-scheduled-card { flex-wrap: wrap; }
    .gs-today-join { width: 100%; margin: 0 var(--gc-space-3) var(--gc-space-3); }
}

/* ── Join: waiting for the officials ──────────────────────────────────── */
.jg-wait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-6) var(--gc-space-4);
    text-align: center;
}
.jg-wait-title {
    font-family: 'Saira Condensed', var(--gc-font-body);
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--gc-text-color-primary);
}
.jg-wait-body {
    font-family: var(--gc-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--gc-text-color-secondary);
    max-width: 360px;
}
.jg-wait-actions { display: flex; gap: var(--gc-space-3); width: 100%; max-width: 360px; }
.jg-wait-actions .gc-btn { flex: 1; min-height: 44px; }
.gs-sched-initial {
    font-size: 18px;
    font-weight: 700;
    color: var(--gc-text-color-muted);
}

/* ── Settings → Roster: the player's face, live ───────────────────────── */
.srt-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--gc-space-2);
}
.srt-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--gc-radius-full);
    border: 1px solid var(--gc-border-subtle);
    background: var(--gc-bg-elevated);
}
.srt-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srt-face--initials {
    font-family: var(--gc-font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--gc-text-color-secondary);
}

/* Active on a league team: a state, not a control (the commissioner's). */
.status-toggle.srt-active-locked {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
}