/* ═══════════════════════════════════════════════════════════════════
   MATCHDAY ROSTER & SELECTION — wave-2 page styles
   Loaded globally by Dash (every file in assets/ is auto-served).

   Scope
   ────
   · /matchday page furniture (workspace width, slim KPI pair, board
     loading + live status readout).
   · Circular monogram headshot placeholders used on the depth chart,
     the medical-unavailable aside, and the selection status board.
   · Medical "flagged & dimmed" depth-chart state for moderate/severe
     cases wired from store-medical-data.
   · Shared cyan stale-injury physio banner rendered on /matchday
     (matchday-physio-prompt) and on /medical (first child of the
     availability board).

   Tokens come from custom.css (var(--os-*)); this file intentionally
   never restyles components owned by custom.css — it only adds the
   new wave-2 classes and narrow overrides for containers rendered by
   pages/matchday.py.

   Colour policy (Sale 1861 navy + gold): every semantic tint resolves
   from an RGB-channel token so there are no hardcoded colour literals.
     · accent (gold)  rgb(var(--os-accent-rgb)  / <a>)
     · in band        rgb(var(--os-emerald-rgb) / <a>)   AVAILABLE
     · modified / sub rgb(var(--os-amber-rgb)   / <a>)   CYAN
     · danger         rgb(var(--os-rose-rgb)    / <a>)   UNAVAILABLE
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. PAGE FURNITURE ─────────────────────────── */
.matchday-workspace {
    max-width: 1500px;
    margin: 0 auto;
}

/* Slim two-tile KPI pair (base .os-kpi-strip is a fixed 4-column grid) */
.matchday-kpi-strip {
    max-width: 560px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Builder placeholder while the roster stores hydrate */
.matchday-loading {
    grid-column: 1 / -1;
    padding: 18px 12px;
    color: var(--os-muted);
    font-size: var(--os-micro);
    text-align: center;
}

/* ─────────────────────────── 2. HEADSHOT PLACEHOLDERS ───────────────────────────
   Pure CSS/DOM monogram circles: navy base ring with a semantic accent
   ring — green available · cyan modified · red injured. Flat base fill
   (no decorative gradient). */
.player-headshot {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--os-border);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--os-border);
    background: rgb(var(--os-ink-rgb) / 0.06);
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}
.player-headshot.is-available {
    border-color: rgb(var(--os-emerald-rgb) / 0.45);
    box-shadow: 0 0 0 1px var(--os-border), 0 0 0 3px rgb(var(--os-emerald-rgb) / 0.38);
}
.player-headshot.is-modified {
    border-color: rgb(var(--os-amber-rgb) / 0.45);
    box-shadow: 0 0 0 1px var(--os-border), 0 0 0 3px rgb(var(--os-amber-rgb) / 0.38);
}
.player-headshot.is-injured {
    border-color: rgb(var(--os-rose-rgb) / 0.45);
    box-shadow: 0 0 0 1px var(--os-border), 0 0 0 3px rgb(var(--os-rose-rgb) / 0.42);
}
.player-headshot-sm {
    width: 24px;
    height: 24px;
    font-size: 9px;
}

/* ─────────────────────────── 3. SELECTION STATUS BOARD ───────────────────────────
   Live per-slot readout (children of the whitelisted
   ``matchday-status`` container): shirt chip, monogram, name,
   ACWR traffic light, medical / modified flag. */
.matchday-status-panel {
    margin-top: 14px;
}
.matchday-status-board {
    display: grid;
    gap: 6px;
}
.matchday-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--os-border-grid);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-ink-rgb) / 0.03);
}
.matchday-status-shirt {
    flex: 0 0 auto;
    color: var(--os-accent-light);
    font-family: var(--os-mono);
    font-size: 11px;
    font-weight: 700;
}
.matchday-status-name {
    min-width: 0;
    overflow: hidden;
    color: var(--os-ink);
    font-size: var(--os-delta);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matchday-status-load {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
}
.matchday-status-load .matchday-acwr-dot {
    margin-right: 0;
}
.matchday-status-flag {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.34);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-rose-rgb) / 0.12);
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.matchday-status-flag.modified {
    border-color: rgb(var(--os-amber-rgb) / 0.34);
    background: rgb(var(--os-amber-rgb) / 0.12);
    color: var(--os-amber-light);
}
.matchday-status-empty {
    padding: 18px 12px;
    color: var(--os-muted);
    font-size: var(--os-micro);
    text-align: center;
}

/* ─────────────────────────── 4. DEPTH CHART MEDICAL STATE ───────────────────────────
   Moderate / severe cases wired from store-medical-data: red
   "MEDICAL" tag, dimmed + disabled so the chip cannot be picked. */
.player-card.btn.player-card-medical {
    border-color: rgb(var(--os-rose-rgb) / 0.32);
    background: rgb(var(--os-rose-rgb) / 0.1);
    opacity: 0.72;
    cursor: default;
}
.player-card.btn.player-card-medical:hover,
.player-card.btn.player-card-medical:focus-visible {
    border-color: rgb(var(--os-rose-rgb) / 0.32);
    background: rgb(var(--os-rose-rgb) / 0.1);
    color: var(--os-ink);
}
.player-card-medical-tag {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.34);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-rose-rgb) / 0.12);
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Medical-unavailable aside: heading keeps name next to the red
   monogram with the severity badge pushed right; long-running cases
   surface the same cyan review chip as the physio prompt. */
.unavailable-card-heading {
    justify-content: flex-start;
    gap: 8px;
}
.unavailable-card-heading .player-headshot {
    width: 26px;
    height: 26px;
    font-size: 9px;
}
.unavailable-card-heading .unavailable-name {
    flex: 1 1 auto;
    min-width: 0;
}
.unavailable-card-heading .unavailable-severity {
    margin-left: auto;
}
.unavailable-review-chip {
    display: inline-flex;
    align-items: center;
    margin-top: 9px;
    padding: 2px 8px;
    border: 1px solid rgb(var(--os-amber-rgb) / 0.34);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-amber-rgb) / 0.12);
    color: var(--os-amber-light);
    font-family: var(--os-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ─────────────────────────── 5. STALE-INJURY PHYSIO BANNER ───────────────────────────
   Shared cyan prompt for injury cases logged ≥30 days ago without a
   closure status. /matchday renders it inside the
   ``matchday-physio-prompt`` alert; /medical renders the same banner
   (``.stale-physio-flat`` adds the alert chrome) as the first child of
   the clinical availability board. */
.stale-physio-alert {
    margin-bottom: 14px;
    border: 1px solid rgb(var(--os-amber-rgb) / 0.34);
    border-radius: var(--os-radius);
    background: rgb(var(--os-amber-rgb) / 0.1);
    color: var(--os-amber-light);
}
.stale-physio-flat {
    margin-bottom: 14px;
    padding: 10px 14px;
}
.stale-physio-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.stale-physio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--os-amber-light);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.stale-physio-hint {
    color: var(--os-muted);
    font-size: var(--os-micro);
}
.stale-physio-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid rgb(var(--os-amber-rgb) / 0.3);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-amber-rgb) / 0.1);
}
.stale-physio-days {
    color: var(--os-amber-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
}
.stale-physio-item-name {
    color: var(--os-ink);
    font-size: var(--os-delta);
    font-weight: 600;
}

/* ─────────────────────────── 6. NARROW VIEWPORTS ─────────────────────────── */
@media (max-width: 900px) {
    .matchday-kpi-strip {
        max-width: none;
    }
    .matchday-status-row {
        flex-wrap: wrap;
    }
    .matchday-status-load {
        margin-left: auto;
    }
}