/* ═══════════════════════════════════════════════════════════════════
   ATHLETE OS PRO  ·  DESIGN SYSTEM
   1. Token foundation   2. Base   3. Layout grids   4. Typography
   5. Header dock        6. Surfaces   7. Metrics   8. Controls
   9. Tables            10. Module shell / login   11. APEX
  12. Player 360       13. Coaches Hub  14. Medical   15. Overlays
  16. DataTable        17. Utilities    18. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
    /* Canvas & surfaces — one coherent ramp */
    --os-bg: #0A1128;
    --os-bg-alt: #0C1530;
    --os-surface: #121C3A;
    --os-surface-solid: #121C3A;
    --os-surface-elevated: #16224A;
    --os-surface-inset: #0C1530;
    --os-surface-header: rgba(10, 17, 40, 0.88);

    /* Borders */
    --os-border-lo: #1B2748;
    --os-border: #263356;
    --os-border-hi: #34426B;
    --os-border-grid: rgba(38, 51, 86, 0.55);

    /* Ink */
    --os-ink: #E6EAF3;
    --os-ink-dim: #C2CADB;
    --os-muted: #8A96B4;
    --os-muted-deep: #6B7796;
    --os-faint: #5A6480;

    /* Functional accents — the only colors that carry meaning */
    --os-accent: #C9A227;        /* indigo — primary nav / actions / actuals */
    --os-accent-light: #E0C24D;
    --os-accent-deep: #9E7E1C;
    --os-on-accent: #0A1128;      /* ink used on accent fills */
    --os-emerald: #46A758;        /* available / optimal / RTP progressing */
    --os-emerald-light: #6FC17C;
    --os-amber: #45B8CC;          /* modified / caution */
    --os-amber-light: #74CFDF;
    --os-rose: #E5484D;           /* acute / injury */
    --os-rose-light: #F08A8D;

    /* Type */
    --os-font: "Space Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --os-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
    --os-micro: 10px;       /* dense tactical-board labels */
    --os-title: 11px;       /* eyebrows / uppercase labels */
    --os-delta: 12px;       /* secondary + control labels */
    --os-body: 13px;        /* body + table text */
    --os-section: 18px;     /* section titles */
    --os-metric: 24px;      /* stat values */
    --os-metric-sm: 20px;   /* compact stat values */

    /* Geometry & motion */
    --os-radius-lg: 16px;
    --os-radius: 12px;
    --os-radius-sm: 8px;
    --os-radius-pill: 999px;
    --os-gap: 16px;
    --os-gap-sm: 10px;
    --os-pad-card: 20px;
    --os-track: rgba(38, 51, 86, 0.5);
    --os-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    --os-shadow-hi: 0 10px 34px rgba(0, 0, 0, 0.45);
    --os-ghd-bar-h: 56px;
    --os-ghd-toolbar-h: 44px;
    --os-nav-height: calc(var(--os-ghd-bar-h) + var(--os-ghd-toolbar-h));
    --os-header-h: var(--os-nav-height);

    /* Stacking ladder: content < navbar < offcanvas(1040/45) < modal(1050/55) < toast(1080) */
    --os-z-toolbar: 1035;
    --os-z-nav: 1040;
    --os-z-dropdown: 1050;
    --os-z-navbar: 1040;
}

/* ─────────────────────────── 2. BASE ─────────────────────────── */
html {
    scroll-padding-top: calc(var(--os-header-h) + 16px);
}

html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--os-bg) !important;
    color: var(--os-ink);
    font-family: var(--os-font);
    font-size: var(--os-body);
    -webkit-font-smoothing: antialiased;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--os-border) var(--os-surface-elevated);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: var(--os-surface-elevated);
    border-radius: var(--os-radius-pill);
}
::-webkit-scrollbar-thumb {
    background: var(--os-border);
    border-radius: var(--os-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--os-border-hi);
}

::selection {
    background: rgb(var(--os-accent-rgb) / 0.32);
    color: var(--os-ink);
}

:focus-visible {
    outline: 2px solid rgb(var(--os-accent-rgb) / 0.55);
    outline-offset: 2px;
}

/* Plotly chrome neutralisation */
.js-plotly-plot .plotly,
.js-plotly-plot .plotly .main-svg,
.plotly-graph-div {
    background: transparent !important;
}
.xtick > text,
.ytick > text {
    fill: var(--os-muted) !important;
}
.js-plotly-plot .modebar {
    background: transparent !important;
}

/* ─────────────────────── 3. LAYOUT GRIDS ─────────────────────── */
.os-grid {
    display: grid;
    gap: var(--os-gap);
}
.os-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--os-gap);
}
.os-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--os-gap);
}
.os-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--os-gap);
}
.os-grid > *,
.os-grid-2 > *,
.os-grid-3 > *,
.os-grid-4 > * {
    min-width: 0;
}

/* KPI header strips never compress: fixed 4 columns with min-width:0 children */
.os-kpi-strip,
.apex-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--os-gap);
    margin-bottom: 18px;
}
.os-kpi-strip > *,
.apex-kpi-grid > * {
    min-width: 0;
    min-height: 0;
}

/* Tactical two-column split (40 / 60) */
.os-split-40-60 {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--os-gap);
    align-items: start;
}

/* ─────────────────────────── 4. TYPOGRAPHY ─────────────────────────── */
.os-eyebrow,
.apex-eyebrow,
.player360-eyebrow,
.roster-eyebrow,
.injury-section-eyebrow,
.module-eyebrow {
    margin: 0 0 6px;
    color: var(--os-accent);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.os-section-title,
.apex-section-title,
.player360-section-title,
.roster-section-title,
.injury-section-title,
.module-title {
    margin: 0;
    color: var(--os-ink);
    font-size: var(--os-section);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.os-page-title {
    margin: 0;
    color: var(--os-ink);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.035em;
}

.os-subtext,
.apex-description,
.player360-description,
.matchday-description,
.injury-section-description,
.module-description {
    margin: 8px 0 0;
    color: var(--os-muted);
    font-size: var(--os-body);
    line-height: 1.5;
}

/* Metric typography — strict monospace for all data values */
.os-metric,
.numeric-output,
.apex-kpi-value,
.injury-metric-value,
.player360-metric,
.matrix-val,
.matchday-shirt-number {
    font-family: var(--os-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.os-metric {
    font-size: var(--os-metric);
    font-weight: 700;
    line-height: 1.1;
    color: var(--os-ink);
}
.os-metric-sm {
    font-size: var(--os-metric-sm);
    font-weight: 700;
    line-height: 1.15;
    color: var(--os-ink);
}
.os-delta,
.numeric-output-secondary,
.apex-kpi-sublabel {
    font-size: var(--os-delta);
    font-weight: 400;
    color: var(--os-muted);
}

/* ─────────────────────── 5. GLOBAL HEADER DOCK ───────────────────────
   Phase 1: the dock's anchoring contract (position: fixed; top: 0;
   width: 100%; z-index: var(--os-z-nav)) plus the .main-wrapper offset
   now live in `assets/design-system.css`, which loads after this file
   and is the single authority for the navigation rung. Nothing here may
   re-declare the dock's position/z-index/background — a second
   declaration with `!important` is exactly how a stale mid-viewport
   header regresses. Only the descendant chrome below is styled here. */

.ghd-left,
.ghd-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.ghd-left {
    flex: 0 0 auto;
}
.ghd-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.ghd-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.ghd-brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--os-radius-sm);
    background: var(--os-accent);
    color: var(--os-on-accent);
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}
.ghd-brand-name {
    color: var(--os-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.ghd-brand-badge {
    padding: 3px 7px;
    border: 1px solid rgb(var(--os-emerald-rgb) / 0.32);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-emerald-rgb) / 0.14);
    color: var(--os-emerald);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.ghd-brand-badge.mock {
    padding: 4px 8px;
    border-color: rgb(var(--os-amber-rgb) / 0.58);
    background: rgb(var(--os-amber-rgb) / 0.2);
    color: var(--os-amber);
    font-size: 10px;
    letter-spacing: 0.1em;
}
.ghd-brand-badge.error {
    border-color: rgb(var(--os-rose-rgb) / 0.65);
    background: rgb(var(--os-rose-rgb) / 0.2);
    color: var(--os-rose);
}
.integration-failure-banner {
    margin: 0 0 var(--os-space-4);
    padding: 12px 16px;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.56);
    border-left: 4px solid var(--os-rose);
    border-radius: var(--os-radius-md);
    background: rgb(var(--os-rose-rgb) / 0.12);
    color: var(--os-ink);
    font-size: 14px;
    line-height: 1.5;
}
.ghd-season-badge {
    padding: 3px 6px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
    white-space: nowrap;
}

.ghd-center {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--os-radius-sm);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--os-border-lo);
    flex: 0 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    min-width: 0;
}
.ghd-center::-webkit-scrollbar {
    display: none;
}
.ghd-squad-select,
#ghd-squad-select {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 220px;
    font-size: var(--os-micro);
    position: relative;
    z-index: var(--os-z-dropdown, 1050);
}
.team-setup-page {
    display: grid;
    gap: 16px;
}
.setup-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.setup-upload {
    display: grid;
    min-height: 96px;
    place-items: center;
    padding: 16px;
    border: 1px dashed var(--os-border-hi);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    color: var(--os-ink-dim);
    cursor: pointer;
    text-align: center;
}
.setup-roster-preview {
    margin-top: 12px;
}
.setup-preview-summary {
    margin: 0 0 8px;
    color: var(--os-ink-dim);
    font-size: var(--os-small);
}
.setup-preview-scroll {
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
}
.setup-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.setup-preview-table th,
.setup-preview-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--os-border-lo);
    text-align: left;
}
.setup-health-heading,
.setup-health-row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.setup-health-row {
    padding: 10px 0;
    border-top: 1px solid var(--os-border-lo);
}
.setup-health-status {
    flex: 0 0 auto;
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    text-transform: uppercase;
}
.setup-health-status.is-ok {
    color: var(--os-emerald-light);
}
.setup-health-status.is-warning {
    color: var(--os-amber);
}
.setup-health-detail {
    margin-top: 4px;
    color: var(--os-muted);
    font-size: var(--os-small);
    overflow-wrap: anywhere;
}
.ghd-nav-link {
    padding: 8px 12px;
    border-radius: var(--os-radius-sm);
    color: var(--os-muted-deep);
    font-size: var(--os-body);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--os-ease), background var(--os-ease);
}
.ghd-nav-link:hover,
.ghd-nav-link:focus {
    color: var(--os-ink-dim);
    background: rgb(var(--os-accent-rgb) / 0.08);
}
.ghd-nav-link.active {
    color: var(--os-accent-light);
    background: rgb(var(--os-accent-rgb) / 0.14);
    box-shadow: inset 0 0 0 1px rgb(var(--os-accent-rgb) / 0.24);
}

.ghd-squad-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--os-radius-sm);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--os-border-lo);
}
.ghd-squad-pill {
    padding: 6px 11px;
    border: none;
    border-radius: var(--os-radius-sm);
    background: transparent;
    color: var(--os-muted-deep);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color var(--os-ease), background var(--os-ease);
}
.ghd-squad-pill:hover {
    color: var(--os-ink-dim);
}
.ghd-squad-pill.active {
    color: var(--os-accent-light);
    background: rgb(var(--os-accent-rgb) / 0.16);
}

.ghd-week-range {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 7px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: rgba(0, 0, 0, 0.22);
}
.ghd-week-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.ghd-week-select {
    min-width: 76px;
}
.ghd-week-arrow {
    color: var(--os-muted);
    font-size: 11px;
    font-weight: 700;
}

.ghd-presets {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ghd-preset {
    padding: 5px 9px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    color: var(--os-muted-deep);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--os-ease);
}
.ghd-preset:hover {
    border-color: var(--os-accent);
    color: var(--os-ink-dim);
}
.ghd-preset.active {
    border-color: var(--os-accent);
    background: rgb(var(--os-accent-rgb) / 0.14);
    color: var(--os-accent-light);
}

.ghd-session {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-accent-rgb) / 0.08);
}
.ghd-session-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--os-accent);
    color: var(--os-on-accent);
    font-size: 11px;
    font-weight: 700;
}
.ghd-session-role {
    color: var(--os-ink);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.ghd-logout {
    padding: 6px 11px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    color: var(--os-muted);
    font-size: var(--os-delta);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--os-ease);
}
.ghd-logout:hover {
    border-color: var(--os-rose);
    color: var(--os-rose-light);
}

/* ─────────────────────────── 6. SURFACES ─────────────────────────── */
/* Surface tokens now live in `assets/design-system.css` §5, which loads
   after this file and is the authority for card radius / hairline border /
   ambient elevation. Declarations were removed here (rather than kept and
   shadowed) so no rule in this file can win that fight via `!important`. */

/* Inner surface (wells, sub-panels) */
.os-well,
.apex-action-card,
.clinical-tier-cases,
.med-entry-grid {
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}

.os-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--os-border-lo);
}
.os-panel-title {
    color: var(--os-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.os-panel-sub {
    margin-top: 4px;
    color: var(--os-muted-deep);
    font-size: 11px;
}

/* Chart containers: never collapse */
.os-chart-frame,
.apex-panel .dash-graph,
.player360-panel .dash-graph,
.roster-panel .dash-graph {
    width: 100%;
    min-height: 240px;
}
.os-chart-frame {
    height: 340px;
}

/* ─────────────────────── 7. KPI / METRIC TILES ─────────────────────── */
.os-kpi-tile,
.kpi-tile-card,
.apex-kpi-card,
.injury-metric-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--os-pad-card);
}
.kpi-tile-label,
.os-kpi-label,
.apex-kpi-label,
.injury-metric-label {
    margin-bottom: 8px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpi-tile-value,
.apex-kpi-value,
.injury-metric-value {
    font-family: var(--os-mono);
    font-size: var(--os-metric);
    font-weight: 700;
    line-height: 1.1;
    color: var(--os-ink);
    white-space: nowrap;
}
.kpi-tile-sub,
.apex-kpi-sublabel {
    margin-top: 6px;
    color: var(--os-muted);
    font-size: var(--os-delta);
    font-weight: 400;
}
.apex-kpi-value.purple { color: var(--os-accent); }
.apex-kpi-value.light-purple { color: var(--os-accent-light); }
.apex-kpi-value.red { color: var(--os-rose); }
.apex-kpi-value.amber { color: var(--os-amber); }
.apex-kpi-value.blue { color: var(--os-accent-light); }
.apex-kpi-value.emerald { color: var(--os-emerald); }

/* ─────────────────────────── 8. CONTROLS ─────────────────────────── */
.btn-pill,
.week-chip,
.ghd-preset,
.apex-position-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: rgba(255, 255, 255, 0.025);
    color: var(--os-muted);
    font-family: var(--os-font);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--os-ease);
}
.btn-pill:hover,
.week-chip:hover,
.apex-position-chip:hover {
    border-color: var(--os-accent);
    color: var(--os-ink-dim);
}
.btn-pill.active,
.week-chip.active,
.apex-position-chip.active {
    border-color: var(--os-accent);
    background: rgb(var(--os-accent-rgb) / 0.14);
    color: var(--os-accent-light);
}

.nav-tab {
    padding: 8px 18px;
    border: none;
    border-radius: var(--os-radius-sm);
    background: transparent;
    color: var(--os-muted-deep);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.nav-tab.active {
    color: var(--os-accent-light);
    background: rgb(var(--os-accent-rgb) / 0.12);
}

.os-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 18px;
    border: 1px solid var(--os-accent);
    border-radius: var(--os-radius-sm);
    background: var(--os-accent);
    color: var(--os-on-accent);
    font-size: var(--os-delta);
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--os-ease);
}
.os-button:hover {
    border-color: var(--os-accent-light);
    background: var(--os-accent-light);
    color: var(--os-on-accent);
    box-shadow: 0 0 0 3px rgb(var(--os-accent-rgb) / 0.22);
}
.os-button.ghost {
    border-color: var(--os-border-hi);
    background: rgb(var(--os-accent-rgb) / 0.16);
    color: var(--os-accent-light);
}
.os-button.ghost:hover {
    background: var(--os-accent-light);
    color: var(--os-on-accent);
}

.badge,
.os-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-ink-rgb) / 0.05);
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.badge-position-status {
    border-color: rgb(var(--os-emerald-rgb) / 0.3);
    background: rgb(var(--os-emerald-rgb) / 0.14);
    color: var(--os-emerald);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Risk badges */
.risk-badge,
.severity-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--os-radius-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.risk-optimal,
.severity-minor {
    border-color: rgb(var(--os-emerald-rgb) / 0.3);
    background: rgb(var(--os-emerald-rgb) / 0.14);
    color: var(--os-emerald);
}
.risk-high,
.severity-severe {
    border-color: rgb(var(--os-rose-rgb) / 0.32);
    background: rgb(var(--os-rose-rgb) / 0.14);
    color: var(--os-rose-light);
}
.risk-caution,
.severity-moderate {
    border-color: rgb(var(--os-amber-rgb) / 0.3);
    background: rgb(var(--os-amber-rgb) / 0.13);
    color: var(--os-amber);
}
.risk-under {
    border-color: rgb(var(--os-accent-rgb) / 0.3);
    background: rgb(var(--os-accent-rgb) / 0.12);
    color: var(--os-accent-light);
}
.severity-unknown {
    border-color: var(--os-border);
    background: rgb(var(--os-ink-rgb) / 0.06);
    color: var(--os-muted);
}

/* Form controls */
select.form-select,
.os-select,
.med-entry-control,
.roster-move-control,
.injury-dropdown .Select-control,
.injury-textarea,
.native-week-select {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--os-ink) !important;
    border: 1px solid var(--os-border) !important;
    border-radius: var(--os-radius-sm) !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 12px;
}
select.form-select:focus,
.os-select:focus,
.med-entry-control:focus,
.roster-move-control:focus {
    border-color: var(--os-accent) !important;
    box-shadow: 0 0 0 3px rgb(var(--os-accent-rgb) / 0.16) !important;
    color: var(--os-ink) !important;
}
select option {
    background-color: var(--os-surface-elevated) !important;
    color: var(--os-ink-dim) !important;
}

.form-label,
.os-label,
.med-entry-label,
.injury-form-label,
.roster-move-label {
    display: block;
    margin-bottom: 7px;
    color: var(--os-accent-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.injury-form-label,
.roster-move-label {
    color: var(--os-muted);
}

.med-entry-radio .form-check-input:checked,
.form-check-input:checked {
    border-color: var(--os-accent);
    background-color: var(--os-accent);
}
.form-check-input {
    background-color: var(--os-surface-elevated);
    border-color: var(--os-border);
}
.form-check-label {
    color: var(--os-ink-dim);
}

/* Date pickers */
.DateInput,
.DateInput_input {
    width: 100%;
}
.DateInput_input {
    padding: 9px 11px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--os-ink);
    font-size: 12px;
}
.DateInput_input:focus {
    border-color: var(--os-accent);
    box-shadow: 0 0 0 3px rgb(var(--os-accent-rgb) / 0.16);
}
.DayPicker,
.CalendarMonth,
.DayPicker_weekHeader,
.DayPickerNavigation_button__default {
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink) !important;
}
.CalendarDay__default {
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink-dim) !important;
    border-color: var(--os-surface-elevated) !important;
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: var(--os-accent) !important;
    border-color: var(--os-accent) !important;
}
.CalendarDay__hovered_span,
.CalendarDay__selected_span {
    background: rgb(var(--os-accent-rgb) / 0.28) !important;
    border-color: rgb(var(--os-accent-rgb) / 0.4) !important;
    color: var(--os-ink) !important;
}

/* ─────────────────────────── 9. TABLES ─────────────────────────── */
.premium-table,
.os-table,
.injury-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--os-ink-dim);
    font-size: 13px;
}
.premium-table thead th,
.os-table thead th,
.injury-table th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--os-border);
    background: var(--os-surface-elevated);
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.premium-table tbody td,
.os-table tbody td,
.injury-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--os-border-lo);
    vertical-align: middle;
}
.premium-table tbody tr:hover,
.os-table tbody tr:hover,
.injury-table tbody tr:hover {
    background: rgb(var(--os-accent-rgb) / 0.035);
}
.matrix-val {
    font-family: var(--os-mono);
    font-weight: 600;
    color: var(--os-ink-dim);
    font-variant-numeric: tabular-nums;
}
.injury-table-scroll,
.injury-table-wrap {
    overflow-x: auto;
}
.injury-empty-state {
    padding: 42px 24px;
    color: var(--os-muted);
    font-size: 13px;
    text-align: center;
}
.injury-error-state {
    color: var(--os-rose-light);
}

/* ─────────────────── 10. MODULE SHELL / LOGIN ─────────────────── */
/* Horizontal gutter only — the vertical rhythm (and the dock offset on
   the authenticated routes) is owned by `assets/design-system.css` §2,
   which loads after this file. */
.main-wrapper {
    position: relative;
    z-index: var(--os-z-content);
    box-sizing: border-box;
    padding-left: var(--os-space-5);
    padding-right: var(--os-space-5);
    padding-bottom: var(--os-pad-hero);
}
.module-shell {
    box-sizing: border-box;
    min-height: auto;
    padding: 8px 0 0;
    color: var(--os-ink);
    background: transparent;
}
.module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 20px;
}
.module-logout,
.module-link {
    color: var(--os-ink);
    text-decoration: none;
}
.module-logout {
    padding: 9px 13px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    white-space: nowrap;
    transition: all var(--os-ease);
}
.module-logout:hover {
    border-color: var(--os-accent);
    color: var(--os-accent-light);
}
.module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.module-link {
    padding: 8px 13px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-pill);
    background: rgba(255, 255, 255, 0.025);
    color: var(--os-muted);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--os-ease);
}
.module-link:hover {
    border-color: var(--os-accent);
    color: var(--os-accent-light);
}
.module-card {
    box-sizing: border-box;
    min-height: 220px;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    background: var(--os-surface);
    box-shadow: var(--os-shadow);
}
/* Session-cache status: a small, non-interactive pill pinned to the
   bottom-right corner.

   The node (#store-cache-status) is emitted at the very TOP of the document
   in app.py data_store_components(), so if the position offsets ever fail to
   apply it falls back to that static spot and lands directly over the header.
   Guarding that is a two-part fix:
     1. the ``inset`` shorthand sets all four edges in ONE declaration, so the
        node can never be half-positioned (top/left:auto applied while
        right/bottom were dropped);
     2. explicit px fallbacks, ``margin: 0`` and ``width: max-content`` keep it
        pinned to the bottom-right even if a custom property fails to resolve.
   ``pointer-events: none`` keeps it from stealing clicks from the board
   beneath. */
.cache-status {
    position: fixed;
    inset: auto var(--os-space-5, 24px) var(--os-space-4, 16px) auto;
    margin: 0;
    width: max-content;
    /* Content-level chrome: the bottom rung of the z-scale, strictly below
       the navigation dock and every overlay rung, so it can never compete
       with the offcanvas backdrop. Rung owned by design-system.css §1. */
    z-index: var(--os-z-content, 1);
    max-width: 300px;
    padding: 6px 12px;
    border: 1px solid var(--os-border-lo, #1B2748);
    border-radius: var(--os-radius-pill, 999px);
    background: var(--os-surface-elevated, #16224A);
    color: var(--os-muted, #8A96B4);
    font-family: var(--os-mono);
    font-size: var(--os-text-2xs, 12px);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: var(--os-shadow, 0 4px 14px rgba(0, 0, 0, 0.32));
    pointer-events: none;
}
.cache-status:empty {
    display: none;
}

.login-page {
    box-sizing: border-box;
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
    color: var(--os-ink);
    background: var(--os-bg);
}
.login-card {
    box-sizing: border-box;
    width: min(420px, 100%);
    padding: clamp(26px, 7vw, 42px);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    background: var(--os-surface);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
}
.login-eyebrow {
    margin: 0 0 14px;
    color: var(--os-emerald);
    font-family: var(--os-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.login-card h1 {
    margin: 0;
    font-size: 30px;
    letter-spacing: -0.04em;
}
.login-description {
    margin: 10px 0 26px;
    color: var(--os-muted);
    line-height: 1.5;
}
.login-card label {
    display: block;
    margin: 16px 0 7px;
    color: var(--os-muted);
    font-size: 12px;
    font-weight: 600;
}
.login-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    outline: none;
    background: var(--os-surface-inset);
    color: var(--os-ink);
}
.login-input:focus {
    border-color: var(--os-accent);
}
.login-submit {
    width: 100%;
    margin-top: 24px;
    padding: 12px;
    border: 0;
    border-radius: var(--os-radius-sm);
    background: var(--os-accent);
    color: var(--os-on-accent);
    font-weight: 700;
    cursor: pointer;
}
.login-submit:hover {
    background: var(--os-accent-light);
}
.login-feedback:not(:empty) {
    margin-top: 14px;
    color: var(--os-rose-light);
    font-size: 13px;
}

.role-navigation {
    display: flex;
    align-items: center;
    gap: 9px;
}
.role-nav-link {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--os-radius-sm);
    color: var(--os-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.role-nav-link:hover {
    border-color: rgb(var(--os-accent-rgb) / 0.48);
    background: rgb(var(--os-accent-rgb) / 0.1);
    color: var(--os-accent-light);
}
.user-role-label {
    color: var(--os-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─────────────────────────── 11. APEX ─────────────────────────── */
.apex-content {
    max-width: 1600px;
    margin: 0 auto;
}
.apex-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}
.apex-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.apex-week-filter {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: min(100%, 360px);
    padding: 10px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}
.apex-filter-label {
    flex: 0 0 auto;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.apex-range-divider {
    color: var(--os-muted);
    font-size: var(--os-micro);
}
.apex-week-select {
    min-width: 105px;
    flex: 1 1 0;
    color: var(--os-ink);
    font-size: 11px;
}
.apex-kpi-card {
    min-height: 112px;
}
.apex-kpi-content {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(80px, 34%);
    align-items: center;
    gap: 8px;
}
.apex-kpi-copy {
    min-width: 0;
}
.apex-kpi-spark {
    width: 100%;
    min-width: 0;
    height: 54px;
}
.apex-content-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.65fr);
    align-items: stretch;
    gap: var(--os-gap);
}
.apex-tactical-layout {
    height: calc(100vh - 210px);
    min-height: 420px;
}
.apex-tactical-column {
    display: flex;
    min-height: 0;
    flex-direction: column;
}
.apex-panel {
    padding: var(--os-pad-card);
}
.apex-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}
.apex-hazard-count {
    display: grid;
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.3);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-rose-rgb) / 0.1);
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
}
.apex-hazard-list {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    padding: 0 3px 3px 0;
}
.apex-action-card {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    transition: transform var(--os-ease), border-color var(--os-ease);
}
.apex-action-card:hover {
    transform: translateY(-2px);
    border-color: var(--os-border-hi);
}
.apex-action-card .card-body {
    padding: 11px 12px;
}
.apex-action-card.overload {
    border-color: rgb(var(--os-rose-rgb) / 0.28);
    background: linear-gradient(115deg, rgb(var(--os-rose-rgb) / 0.2), var(--os-surface-inset));
}
.apex-action-card.wellness {
    border-color: rgb(var(--os-amber-rgb) / 0.32);
    background: linear-gradient(115deg, rgb(var(--os-amber-rgb) / 0.2), var(--os-surface-inset));
}
.apex-action-card-topline,
.apex-athlete-tags,
.apex-action-footer {
    display: flex;
    align-items: center;
}
.apex-action-card-topline {
    justify-content: space-between;
    gap: 8px;
}
.apex-action-identity {
    min-width: 0;
}
.apex-athlete-tags {
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.apex-squad-tag,
.apex-position-tag {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border: 1px solid rgb(var(--os-accent-rgb) / 0.2);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-accent-rgb) / 0.08);
    color: var(--os-accent-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
}
.apex-athlete-name {
    overflow: hidden;
    color: var(--os-ink);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apex-action-acwr-wrap {
    display: grid;
    flex: 0 0 auto;
    justify-items: end;
    gap: 3px;
}
.apex-action-acwr-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.apex-action-acwr {
    min-width: 46px;
    padding: 5px 8px;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.32);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-rose-rgb) / 0.13);
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: var(--os-delta);
    font-weight: 700;
    text-align: center;
}
.apex-action-acwr.wellness {
    border-color: rgb(var(--os-amber-rgb) / 0.34);
    background: rgb(var(--os-amber-rgb) / 0.12);
    color: var(--os-amber);
}
.apex-action-footer {
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
}
.apex-action-reason {
    overflow: hidden;
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apex-action-reason.wellness {
    color: var(--os-amber);
}
.apex-triage-link {
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid rgb(var(--os-accent-rgb) / 0.42);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-accent-rgb) / 0.17);
    color: var(--os-accent-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all var(--os-ease);
}
.apex-triage-link:hover {
    transform: translateY(-1px);
    border-color: var(--os-accent);
    background: var(--os-accent-light);
    color: var(--os-on-accent);
}
.apex-optimal-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgb(var(--os-accent-rgb) / 0.24);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-accent-rgb) / 0.08);
}
.apex-optimal-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgb(var(--os-emerald-rgb) / 0.16);
    color: var(--os-emerald-light);
    font-weight: 700;
}
.apex-optimal-title {
    color: var(--os-emerald-light);
    font-size: var(--os-delta);
    font-weight: 700;
}
.apex-optimal-copy,
.apex-empty-state {
    margin-top: 4px;
    color: var(--os-muted);
    font-size: var(--os-micro);
    line-height: 1.5;
}
.apex-matrix-panel {
    overflow: hidden;
}
.apex-matrix-toolbar {
    display: grid;
    gap: 10px;
    margin: -3px 0 12px;
}
.apex-matrix-search {
    width: min(100%, 360px);
    padding: 8px 11px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    outline: none;
    background: var(--os-surface-inset);
    color: var(--os-ink-dim);
    font-size: var(--os-body);
}
.apex-matrix-search:focus {
    border-color: var(--os-accent);
    box-shadow: 0 0 0 2px rgb(var(--os-accent-rgb) / 0.14);
}
.apex-position-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.apex-position-chip {
    height: 28px;
    padding: 0 10px;
    border-radius: var(--os-radius-pill);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
}
.apex-data-warning {
    margin-top: 12px;
    color: var(--os-amber);
    font-size: 11px;
}

/* ─────────────────────────── 12. PLAYER 360 ─────────────────────────── */
.player360-content {
    max-width: 1500px;
    margin: 0 auto;
}
.player360-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.player360-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.035em;
}
.player360-select-actions {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.player360-select-wrap {
    min-width: 260px;
}
.player360-select-label {
    display: block;
    margin-bottom: 6px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.player360-athlete-select,
.player360-athlete-select .Select-control {
    border-radius: var(--os-radius-sm) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--os-ink) !important;
}
.player360-idp-trigger {
    min-height: 38px;
}
.player360-profile-heading {
    margin-bottom: 16px;
}

/* Dynamic bio pills — distinct glassmorphic badges with real padding/gap */
.player360-bio-pills {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}
.player360-bio-pill {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 8px 16px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-ink-rgb) / 0.07);
    box-shadow: var(--os-shadow);
    transition: border-color var(--os-ease), transform var(--os-ease);
}
.player360-bio-pill:hover {
    transform: translateY(-1px);
    border-color: var(--os-border-hi);
}
.player360-bio-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.player360-bio-value {
    color: var(--os-ink);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.player360-bio-pill.status-available {
    border-color: rgb(var(--os-emerald-rgb) / 0.32);
    background: rgb(var(--os-emerald-rgb) / 0.1);
}
.player360-bio-pill.status-available .player360-bio-value {
    color: var(--os-emerald);
}
.player360-bio-pill.status-injured {
    border-color: rgb(var(--os-rose-rgb) / 0.32);
    background: rgb(var(--os-rose-rgb) / 0.1);
}
.player360-bio-pill.status-injured .player360-bio-value {
    color: var(--os-rose-light);
}
.player360-bio-pill.status-monitor {
    border-color: rgb(var(--os-amber-rgb) / 0.32);
    background: rgb(var(--os-amber-rgb) / 0.1);
}
.player360-bio-pill.status-monitor .player360-bio-value {
    color: var(--os-amber);
}

.player360-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--os-gap);
    margin-bottom: var(--os-gap);
}
.player360-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--os-gap);
}
.player360-panel {
    padding: var(--os-pad-card);
    min-width: 0;
}
.player360-section-heading {
    margin-bottom: 14px;
}
/* Radar legend — same typographic voice as the metric labels (mono
   uppercase title-size); glyph colors mirror the radar trace colors
   (ACCENT / CYAN / EMERALD) set in pages/player.py _radar_figure. */
.player360-radar-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--os-gap);
    margin-bottom: 10px;
}
.player360-radar-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.player360-radar-legend.actual .player360-radar-legend-glyph {
    color: var(--os-accent);
}
.player360-radar-legend.target .player360-radar-legend-glyph {
    color: var(--os-emerald);
}
.player360-radar-legend.compare .player360-radar-legend-glyph {
    color: var(--os-muted);
}
/* Positional benchmark trace glyph — deeper slate (MUTED_DEEP), matching
   RADAR_TRACE_COLORS["benchmark"] in components/player_stats.py. */
.player360-radar-legend.benchmark .player360-radar-legend-glyph {
    color: var(--os-muted-deep);
}

/* ACWR load-band legend — status is never colour-alone, so each swatch is
   paired with its LOW / IN BAND / HIGH text label. */
.player360-band-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--os-gap);
    margin-bottom: 12px;
}
.player360-band-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.player360-band-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.player360-radar,
.player360-target-gauge,
.player360-load-chart,
.player360-meters-chart {
    width: 100%;
    min-height: 200px;
}
.player360-test-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--os-gap);
    margin: var(--os-gap) 0 4px;
}
.player360-metric-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    transition: border-color var(--os-ease), background-color var(--os-ease), transform var(--os-ease);
}
.player360-metric-tile:hover {
    transform: translateY(-1px);
    border-color: var(--os-border);
    background: var(--os-surface-elevated);
}
.player360-metric-label {
    margin-bottom: 6px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player360-metric {
    font-family: var(--os-mono);
    font-size: var(--os-metric-sm);
    font-weight: 700;
    line-height: 1.1;
    color: var(--os-ink);
    white-space: nowrap;
}
.player360-metric-sub {
    margin-top: 6px;
    color: var(--os-muted);
    font-size: var(--os-delta);
    font-weight: 400;
    line-height: 1.4;
}
.player360-empty-state {
    grid-column: 1 / -1;
    padding: 18px 16px;
    border: 1px dashed var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    color: var(--os-muted);
    font-size: var(--os-delta);
    line-height: 1.5;
    text-align: center;
}
.player360-idp-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--os-border-lo);
    background: var(--os-surface-inset);
}
.player360-idp-body {
    padding: 18px 20px;
}
.player360-session-scroll {
    max-height: 420px;
    overflow-y: auto;
}
.player360-data-warning {
    margin-top: 12px;
    color: var(--os-amber);
    font-size: 11px;
}
.player360-idp-drawer.offcanvas {
    width: min(560px, 100vw);
    border-left: 1px solid rgb(var(--os-accent-rgb) / 0.45);
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink);
    box-shadow: -18px 0 64px rgba(0, 0, 0, 0.45);
}
.player360-idp-form {
    display: grid;
    gap: 14px;
}
.player360-idp-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--os-accent-light);
    font-size: 11px;
    font-weight: 700;
}
.player360-idp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--os-border);
}
.player360-idp-feedback.alert-success {
    border-color: rgb(var(--os-emerald-rgb) / 0.4);
    background: rgb(var(--os-emerald-rgb) / 0.12);
    color: var(--os-emerald-light);
}
.player360-idp-feedback.alert-danger {
    border-color: rgb(var(--os-rose-rgb) / 0.4);
    background: rgb(var(--os-rose-rgb) / 0.1);
    color: var(--os-rose-light);
}

/* ─────────────────────────── 13. COACHES HUB ─────────────────────────── */
.coaches-hub-content {
    max-width: 1500px;
    margin: 0 auto;
}
.roster-status {
    border: 1px solid rgb(var(--os-amber-rgb) / 0.28);
    background: rgb(var(--os-amber-rgb) / 0.16);
    color: var(--os-amber-light);
}
.roster-panel {
    min-width: 0;
    padding: var(--os-pad-card);
}
.roster-panel-heading,
.unavailable-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.roster-panel-heading {
    margin-bottom: 20px;
}
.roster-live-indicator {
    color: var(--os-emerald-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    white-space: nowrap;
}
.roster-live-indicator::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--os-emerald);
    content: "";
    vertical-align: 1px;
}
.roster-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.75fr);
    align-items: start;
    gap: var(--os-gap);
}

/* Matchday pitch */
.matchday-panel {
    margin-bottom: 18px;
}
.matchday-heading {
    align-items: flex-start;
    margin-bottom: 14px;
}
.matchday-date-field {
    width: 170px;
    flex: 0 0 auto;
}
.matchday-fixture-field {
    max-width: 420px;
    margin-bottom: 12px;
}
.matchday-fixture-input {
    padding: 8px 10px;
    font-size: var(--os-micro);
}
.matchday-builder {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
    align-items: start;
    gap: 14px;
    margin-top: 12px;
}
.matchday-starting,
.matchday-reserves {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgb(var(--os-accent-rgb) / 0.18);
}
.matchday-reserves-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.matchday-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.matchday-group-title {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.matchday-group-count {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
}
.matchday-pitch {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid rgb(var(--os-emerald-rgb) / 0.15);
    border-radius: var(--os-radius-sm);
    background:
        linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, 0.08) 49.8% 50.2%, transparent 50.4%),
        repeating-linear-gradient(0deg, transparent 0 calc(20% - 1px), rgba(255, 255, 255, 0.08) calc(20% - 1px) 20%),
        linear-gradient(145deg, rgb(var(--os-surface-rgb) / 1), rgb(var(--os-surface-rgb) / 1));
}
.matchday-pitch-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.matchday-pitch-row-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matchday-pitch-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 18%; }
.matchday-pitch-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.matchday-pitch-row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 25%; }
.matchday-pitch-row-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.matchday-pitch-row-6 { grid-template-columns: minmax(0, 1fr); padding: 0 32%; }
.matchday-slot {
    min-width: 0;
    padding: 8px;
    border: 1px solid rgb(var(--os-accent-rgb) / 0.2);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.matchday-slot-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.matchday-shirt-number {
    color: var(--os-ink);
    font-size: 12px;
    font-weight: 700;
}
.matchday-position-code {
    overflow: hidden;
    color: var(--os-emerald-light);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matchday-position-name {
    min-height: 22px;
    margin-top: 4px;
    color: var(--os-ink-dim);
    font-size: var(--os-micro);
    line-height: 1.3;
}
.matchday-player-select {
    min-height: 31px;
    margin-top: 5px;
    padding: 4px 7px;
    font-size: var(--os-micro);
}
.matchday-status {
    min-height: 15px;
    margin-top: 5px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
}
.matchday-acwr-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--os-muted-deep);
    vertical-align: 0;
}
.matchday-acwr-dot.green {
    background: var(--os-emerald);
    box-shadow: 0 0 7px rgb(var(--os-emerald-rgb) / 0.65);
}
.matchday-acwr-dot.amber {
    background: var(--os-amber);
    box-shadow: 0 0 7px rgb(var(--os-amber-rgb) / 0.58);
}
.matchday-acwr-dot.red {
    background: var(--os-rose);
    box-shadow: 0 0 7px rgb(var(--os-rose-rgb) / 0.62);
}
.matchday-acwr-dot.unknown {
    background: var(--os-muted-deep);
}
.matchday-acwr-label {
    color: var(--os-muted);
}
.matchday-medical-flag:not(:empty) {
    display: block;
    margin-top: 3px;
    color: var(--os-amber);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
}
.matchday-feedback:not(.show) {
    display: none;
}
.matchday-feedback.alert-success {
    border-color: rgb(var(--os-emerald-rgb) / 0.4);
    background: rgb(var(--os-emerald-rgb) / 0.12);
    color: var(--os-emerald-light);
}
.matchday-save-button {
    display: block;
    min-height: 38px;
    margin: 14px 0 0 auto;
    padding: 8px 16px;
    letter-spacing: 0.04em;
}

/* Depth chart */
.depth-chart {
    overflow: hidden;
    border: 1px solid rgb(var(--os-emerald-rgb) / 0.16);
    border-radius: var(--os-radius);
    background:
        linear-gradient(90deg, transparent 49.7%, rgba(255, 255, 255, 0.055) 50%, transparent 50.3%),
        repeating-linear-gradient(0deg, transparent 0 118px, rgba(255, 255, 255, 0.045) 119px 120px),
        linear-gradient(145deg, rgb(var(--os-surface-rgb) / 1), rgb(var(--os-surface-rgb) / 1));
}
.depth-chart-pitch {
    display: grid;
    gap: 9px;
    padding: clamp(12px, 2vw, 22px);
}
.depth-chart-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.depth-chart-line-2 > :first-child,
.depth-chart-line-6 > :first-child {
    grid-column: 2;
}
.depth-chart-line-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16%;
}
.depth-chart-line-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.position-card {
    min-width: 0;
    min-height: 90px;
    padding: 9px;
    border: 1px solid rgb(var(--os-ink-rgb) / 0.15);
}
.position-heading {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 7px;
}
.position-code {
    color: var(--os-emerald-light);
    font-family: var(--os-mono);
    font-size: 11px;
    font-weight: 700;
}
.position-label {
    overflow: hidden;
    color: var(--os-muted);
    font-size: var(--os-micro);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.position-players {
    display: grid;
    gap: 5px;
}
.player-card.btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgb(var(--os-ink-rgb) / 0.13);
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-ink-rgb) / 0.07);
    color: var(--os-ink);
    text-align: left;
    text-decoration: none;
}
.player-card.btn:hover,
.player-card.btn:focus-visible {
    border-color: rgb(var(--os-accent-rgb) / 0.55);
    background: rgb(var(--os-accent-rgb) / 0.1);
    color: var(--os-ink);
}
.player-card-name {
    overflow: hidden;
    font-size: var(--os-micro);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player-card-squad {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
}
.player-card.btn.player-card-minor {
    border-color: rgb(var(--os-amber-rgb) / 0.42);
    background: rgb(var(--os-amber-rgb) / 0.18);
}
.player-card-warning {
    flex: 0 0 auto;
    color: var(--os-amber);
    font-size: 12px;
}
.position-empty {
    padding: 7px 4px;
    color: rgb(var(--os-ink-rgb) / 0.56);
    font-size: var(--os-micro);
    text-align: center;
}
.unavailable-count {
    display: grid;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    place-items: center;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.3);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-rose-rgb) / 0.11);
    color: var(--os-rose-light);
    font-family: var(--os-mono);
    font-size: 11px;
    font-weight: 700;
}
.unavailable-list {
    display: grid;
    gap: 9px;
}
.unavailable-card {
    padding: 12px;
    border: 1px solid rgb(var(--os-rose-rgb) / 0.19);
    border-radius: var(--os-radius-sm);
}
.unavailable-name {
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.unavailable-severity {
    padding: 3px 7px;
    border-radius: var(--os-radius-pill);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    text-transform: uppercase;
}
.unavailable-severity.severe {
    background: rgb(var(--os-rose-rgb) / 0.14);
    color: var(--os-rose-light);
}
.unavailable-severity.moderate {
    background: rgb(var(--os-amber-rgb) / 0.14);
    color: var(--os-amber-light);
}
.unavailable-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    color: var(--os-muted);
    font-size: var(--os-micro);
}
.unavailable-empty,
.unavailable-footnote,
.roster-error {
    color: var(--os-muted);
    font-size: 11px;
    line-height: 1.5;
}
.unavailable-empty {
    padding: 20px 8px;
    text-align: center;
}
.unavailable-footnote {
    margin: 14px 0 0;
}
.roster-error {
    padding: 20px;
    color: var(--os-rose-light);
}

/* ─────────────────────────── 14. MEDICAL ─────────────────────────── */
.medical-workspace {
    max-width: 1500px;
    margin: 0 auto;
}
.injury-heading-row,
.injury-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.injury-heading-row {
    margin: 0 0 22px;
}
.medical-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.injury-primary-button,
.med-entry-open-button {
    border: 1px solid rgb(var(--os-accent-rgb) / 0.55) !important;
    border-radius: var(--os-radius-sm) !important;
    background: var(--os-accent) !important;
    color: var(--os-on-accent) !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 26px rgb(var(--os-accent-rgb) / 0.2);
    transition: all var(--os-ease);
}
.injury-primary-button:hover,
.med-entry-open-button:hover {
    border-color: var(--os-accent-light) !important;
    background: var(--os-accent-light) !important;
    box-shadow: 0 0 0 3px rgb(var(--os-accent-rgb) / 0.2), 0 10px 28px rgb(var(--os-accent-rgb) / 0.26);
}
.injury-button-plus {
    margin-right: 7px;
    font-size: 19px;
    line-height: 0.8;
    vertical-align: -1px;
}
.injury-source-warning {
    margin-bottom: 14px;
}
.injury-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.injury-metric-card {
    min-height: 96px;
}
.injury-metric-value {
    margin-top: 10px;
    font-size: var(--os-metric);
}
.injury-table-card {
    overflow: hidden;
}
.injury-table-heading {
    padding: 18px var(--os-pad-card);
    border-bottom: 1px solid var(--os-border-lo);
}
.injury-table-title {
    margin: 0;
    color: var(--os-ink);
    font-size: var(--os-section);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.injury-table-caption {
    margin: 0;
    color: var(--os-muted);
    font-size: 11px;
}
.injury-table {
    min-width: 900px;
}

/* Clinical triage board */
.clinical-triage-board {
    padding: var(--os-gap) var(--os-pad-card) var(--os-pad-card);
}
.clinical-triage-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
}
.clinical-tier {
    min-width: 0;
    overflow: hidden;
    padding: 0;
}
.clinical-tier-1 { border-color: rgb(var(--os-rose-rgb) / 0.25) !important; }
.clinical-tier-2 { border-color: rgb(var(--os-amber-rgb) / 0.22) !important; }
.clinical-tier-3 { border-color: rgb(var(--os-emerald-rgb) / 0.28) !important; }
.clinical-tier-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-height: 76px;
    padding: 14px;
    border-bottom: 1px solid var(--os-border-lo);
    background: rgba(255, 255, 255, 0.02);
}
.clinical-tier-title {
    margin: 0;
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.clinical-tier-1 .clinical-tier-title { color: var(--os-rose-light); }
.clinical-tier-2 .clinical-tier-title { color: var(--os-amber-light); }
.clinical-tier-3 .clinical-tier-title { color: var(--os-emerald-light); }
.clinical-tier-description {
    margin: 5px 0 0;
    color: var(--os-muted);
    font-size: var(--os-micro);
}
.clinical-tier-count {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--os-border-lo);
    border-radius: 50%;
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
}
.clinical-tier-cases {
    display: grid;
    gap: 10px;
    max-height: 690px;
    overflow-y: auto;
    padding: 10px;
    background: var(--os-surface-inset);
}
.clinical-case-card {
    border: 1px solid rgb(var(--os-ink-rgb) / 0.15) !important;
    border-radius: var(--os-radius-sm) !important;
    background: var(--os-surface-solid) !important;
    color: var(--os-ink) !important;
}
.clinical-case-card.tier-1 { border-left: 3px solid var(--os-rose) !important; }
.clinical-case-card.tier-2 { border-left: 3px solid var(--os-amber) !important; }
.clinical-case-card.tier-3 { border-left: 3px solid var(--os-emerald) !important; }
.clinical-case-body {
    display: grid;
    gap: 12px;
    padding: 13px !important;
}
.clinical-case-header,
.clinical-case-tags,
.clinical-case-details {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.clinical-case-athlete {
    margin: 0 0 7px;
    color: var(--os-ink);
    font-size: var(--os-body);
    font-weight: 700;
}
.clinical-case-tags {
    justify-content: flex-start;
    flex-wrap: wrap;
}
.clinical-case-tag {
    padding: 3px 8px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-pill);
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 600;
}
.clinical-case-return,
.clinical-case-detail {
    display: grid;
    gap: 4px;
}
.clinical-case-return {
    flex: 0 0 auto;
    text-align: right;
}
.clinical-case-details {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-top: 10px;
    border-top: 1px solid rgb(var(--os-ink-rgb) / 0.1);
}
.clinical-case-meta-label,
.rtp-stepper-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.clinical-case-meta-value {
    color: var(--os-ink-dim);
    font-size: var(--os-micro);
}
.clinical-case-notes {
    margin: 0;
    color: var(--os-ink-dim);
    font-size: var(--os-micro);
    white-space: pre-wrap;
}
.clinical-tier-empty {
    padding: 22px 12px;
    color: var(--os-muted);
    font-size: 11px;
    text-align: center;
}

/* RTP progression ladder.

   Reads as a funnel, not a row of boxes: five equal flex cells joined by a
   3px state rail on the left edge, with the fill travelling emerald (done) to
   accent (where the athlete is now) to inset (still ahead). The number is
   demoted to a mono kicker and the stage name carries the weight, so the
   ladder stays legible while each cell keeps a real 11px label. */
.rtp-stepper-wrap {
    display: grid;
    gap: 10px;
    padding: 14px 0 0;
    border-top: 1px solid var(--os-border-lo);
}
.rtp-stepper-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
/* Current-phase pill, the "you are here" marker for the whole ladder. */
.rtp-current-phase {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgb(var(--os-emerald-rgb) / 0.35);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-emerald-rgb) / 0.12);
    color: var(--os-emerald-light);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.rtp-stepper {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.rtp-stage-step {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 8px 10px 8px 12px !important;
    /* State rail: the first 3px of the left border carries the colour. */
    border: 1px solid var(--os-border) !important;
    border-left: 3px solid var(--os-border-hi) !important;
    border-radius: var(--os-radius-sm) !important;
    background: var(--os-surface) !important;
    color: var(--os-ink-dim) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    transition: border-color var(--os-ease), background-color var(--os-ease),
        transform var(--os-ease);
}
.rtp-stage-index {
    color: var(--os-muted-deep);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.rtp-stage-text {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}
/* Completed: emerald fill, rail lit. */
.rtp-stage-step.is-complete {
    border-color: rgb(var(--os-emerald-rgb) / 0.35) !important;
    border-left-color: var(--os-emerald) !important;
    background: rgb(var(--os-emerald-rgb) / 0.12) !important;
    color: var(--os-emerald-light) !important;
}
.rtp-stage-step.is-complete .rtp-stage-index {
    color: var(--os-emerald);
}
/* Current: accent fill and the only cell that lifts. */
.rtp-stage-step.is-current {
    border-color: rgb(var(--os-accent-rgb) / 0.55) !important;
    border-left-color: var(--os-accent) !important;
    background: rgb(var(--os-accent-rgb) / 0.16) !important;
    color: var(--os-ink) !important;
    transform: translateY(-1px);
    box-shadow: var(--os-shadow);
}
.rtp-stage-step.is-current .rtp-stage-index {
    color: var(--os-accent-light);
}
/* Ahead: quiet inset, the rail is the only signal. */
.rtp-stage-step.is-pending,
.rtp-stage-step.is-unset {
    border-color: var(--os-border-lo) !important;
    border-left-color: var(--os-border) !important;
    background: var(--os-surface-inset) !important;
    color: var(--os-muted) !important;
}
.rtp-stage-step.is-pending:hover,
.rtp-stage-step.is-unset:hover {
    border-left-color: var(--os-accent-light) !important;
    color: var(--os-ink-dim) !important;
}
/* Static legend variant at the top of the board, no hover lift. */
.rtp-stage-step.is-ref {
    border-left-color: var(--os-border-hi) !important;
    background: var(--os-surface) !important;
    color: var(--os-ink-dim) !important;
    transform: none;
}
.rtp-stage-step:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.rtp-update-feedback {
    margin: 0 18px 12px;
    font-size: 11px;
}
.rtp-update-feedback.alert-success {
    border-color: rgb(var(--os-emerald-rgb) / 0.4);
    background: rgb(var(--os-emerald-rgb) / 0.1);
    color: var(--os-emerald-light);
}
.rtp-update-feedback.alert-danger {
    border-color: rgb(var(--os-rose-rgb) / 0.4);
    background: rgb(var(--os-rose-rgb) / 0.1);
    color: var(--os-rose-light);
}

/* Medical entry drawer */
.med-entry-drawer.offcanvas {
    width: min(560px, 100vw);
    border-left: 1px solid rgb(var(--os-accent-rgb) / 0.45);
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink);
    box-shadow: -18px 0 64px rgba(0, 0, 0, 0.45);
}
.med-entry-drawer-body {
    background: var(--os-surface-elevated);
}
.med-entry-drawer .offcanvas-header {
    border-bottom: 1px solid rgb(var(--os-accent-rgb) / 0.2);
}
.med-entry-drawer .btn-close {
    filter: invert(1);
    opacity: 0.78;
}
.med-entry-description {
    margin: 0 0 16px;
    color: var(--os-muted);
    font-size: 12px;
}
.med-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--os-border);
}
.med-entry-field {
    min-width: 0;
}
.med-entry-field:has(.med-entry-textarea) {
    grid-column: 1 / -1;
}
.med-entry-textarea {
    width: 100%;
    resize: vertical;
}
.med-entry-radio {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 17px;
    color: var(--os-ink);
}
.med-site-quick-select {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.med-site-quick-button {
    padding: 6px 10px !important;
    border-color: rgb(var(--os-accent-rgb) / 0.28) !important;
    border-radius: var(--os-radius-pill) !important;
    color: var(--os-accent-light) !important;
    font-size: var(--os-micro) !important;
    font-weight: 700 !important;
}
.med-site-quick-button:hover,
.med-site-quick-button:focus-visible {
    border-color: var(--os-accent) !important;
    background: rgb(var(--os-accent-rgb) / 0.18) !important;
    color: var(--os-ink) !important;
}
.med-entry-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgb(var(--os-accent-rgb) / 0.2);
}
.med-entry-feedback,
.med-form-feedback,
.injury-feedback {
    margin-bottom: 15px;
    font-size: 12px;
}
.med-entry-feedback.alert-success,
.injury-feedback.alert-success {
    border-color: rgb(var(--os-emerald-rgb) / 0.45);
    background: rgb(var(--os-emerald-rgb) / 0.12);
    color: var(--os-emerald-light);
}
.med-entry-feedback.alert-danger,
.injury-feedback.alert-danger {
    border-color: rgb(var(--os-rose-rgb) / 0.4);
    background: rgb(var(--os-rose-rgb) / 0.1);
    color: var(--os-rose-light);
}
.med-entry-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.med-entry-history-section {
    margin-top: 22px;
}
.med-entry-history-card {
    margin-bottom: 22px;
}
.med-entry-history-table {
    min-width: 1050px;
}
.injury-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}
.injury-form-field {
    min-width: 0;
}
.injury-date-picker,
.injury-date-picker .DateInput,
.injury-date-picker .DateInput_input {
    width: 100%;
}
.injury-textarea,
.injury-date-picker .DateInput_input {
    border: 1px solid var(--os-border) !important;
    border-radius: var(--os-radius-sm) !important;
    background: var(--os-surface-inset) !important;
    color: var(--os-ink) !important;
}
.injury-modal .modal-content,
.med-entry-modal .modal-content {
    border: 1px solid var(--os-border-hi);
    border-radius: var(--os-radius-lg);
    background: var(--os-surface-elevated);
    color: var(--os-ink);
    box-shadow: 0 25px 90px rgba(0, 0, 0, 0.55);
}
.injury-modal-header,
.injury-modal-footer,
.med-entry-modal-header,
.med-entry-modal .modal-footer {
    border-color: rgb(var(--os-accent-rgb) / 0.18);
}
.injury-modal-header .btn-close,
.med-entry-modal-header .btn-close {
    filter: invert(1);
}
.injury-modal-description {
    margin: 0 0 17px;
    color: var(--os-muted);
    font-size: 13px;
}
.injury-cancel-button {
    color: var(--os-muted) !important;
    text-decoration: none !important;
}
.injury-toast {
    border: 1px solid rgb(var(--os-emerald-rgb) / 0.35) !important;
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink) !important;
}

/* ─────────────────── 15. OVERLAYS: MODALS & DRAWERS ─────────────────── */
.modal-content {
    border: 1px solid rgb(var(--os-accent-rgb) / 0.42);
    border-radius: var(--os-radius);
    background: var(--os-surface-elevated);
    color: var(--os-ink);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 28px rgb(var(--os-accent-rgb) / 0.1);
}
.modal-header,
.modal-footer {
    border-color: rgb(var(--os-accent-rgb) / 0.2);
}
.modal-header .modal-title {
    color: var(--os-ink);
    font-weight: 700;
}
.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.78;
}
.offcanvas {
    border-left: 1px solid rgb(var(--os-accent-rgb) / 0.42);
    background: var(--os-surface-elevated) !important;
    color: var(--os-ink);
}
.offcanvas-header {
    border-bottom: 1px solid rgb(var(--os-accent-rgb) / 0.2);
}
.offcanvas-title {
    color: var(--os-ink);
    font-weight: 700;
}
.offcanvas-header .btn-close {
    filter: invert(1);
    opacity: 0.78;
}

.roster-move-modal .modal-content {
    overflow: hidden;
}
.roster-move-modal-header,
.roster-move-footer {
    border-color: rgb(var(--os-accent-rgb) / 0.2);
    background: var(--os-surface-elevated);
}
.roster-move-modal-header .modal-title {
    color: var(--os-ink);
    font-weight: 700;
}
.roster-move-description {
    margin: 0 0 16px;
    color: var(--os-muted);
    font-size: 11px;
    line-height: 1.55;
}
.roster-move-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}
.roster-move-field {
    min-width: 0;
}
.roster-move-notes-field {
    grid-column: 1 / -1;
}
.roster-move-control,
.roster-move-control.form-control,
.roster-move-control.form-select {
    width: 100%;
}
.roster-move-date-picker,
.roster-move-date-picker .DateInput,
.roster-move-date-picker .DateInput_input {
    width: 100%;
}
.roster-move-textarea {
    min-height: 86px;
}
.roster-move-feedback.alert-success {
    border-color: rgb(var(--os-emerald-rgb) / 0.4);
    background: rgb(var(--os-emerald-rgb) / 0.12);
    color: var(--os-emerald-light);
}
.roster-move-submit {
    border-color: var(--os-accent);
    background: var(--os-accent);
    color: var(--os-on-accent);
    font-weight: 700;
}
.roster-move-submit:hover,
.roster-move-submit:focus {
    border-color: var(--os-accent-light);
    background: var(--os-accent-light);
    box-shadow: 0 0 0 3px rgb(var(--os-accent-rgb) / 0.2);
}
.roster-move-toast,
.toast {
    position: fixed;
    right: var(--os-space-5);
    bottom: var(--os-space-5);
    z-index: var(--os-z-toast);
    width: min(420px, calc(100vw - var(--os-space-6)));
    border: 1px solid var(--os-border-hi);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-elevated);
    color: var(--os-ink);
    box-shadow: var(--os-shadow-hi);
}
.toast-header {
    border-bottom-color: var(--os-border-lo);
    background: rgba(255, 255, 255, 0.03);
    color: var(--os-accent-light);
    font-weight: 700;
}
.player-idp-modal .modal-content {
    border-radius: var(--os-radius-lg);
}
.player-idp-detail {
    margin-bottom: 17px;
}
.player-idp-label {
    margin-bottom: 5px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.player-idp-value {
    font-size: 13px;
    font-weight: 600;
}
.player-idp-targets {
    padding: 14px;
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-sm);
    background: rgba(255, 255, 255, 0.025);
}
.player-idp-placeholder {
    margin: 8px 0 0;
    color: var(--os-muted);
    font-size: 12px;
    line-height: 1.55;
}
.player-idp-close {
    color: var(--os-ink);
}

/* ─────────────────── 16. DASH DATATABLE ─────────────────── */
.dash-spreadsheet-container,
.dash-spreadsheet,
.dash-spreadsheet-inner {
    background: transparent !important;
}
.dash-spreadsheet td,
.dash-spreadsheet th {
    background: transparent !important;
    border: none !important;
}
.dash-spreadsheet td div {
    line-height: 1.25;
}
.Select-control,
.Select-menu-outer {
    border-color: var(--os-border);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-elevated);
    color: var(--os-ink);
}
/* Dropdown menus sit one rung above the navigation dock — token, not a
   magic 1200. See the z-index ladder in assets/design-system.css §1. */
.Select-menu-outer {
    z-index: var(--os-z-dropdown);
}
.Select-value-label,
.Select-placeholder,
.Select-arrow-zone,
.Select-input > input {
    color: var(--os-ink) !important;
}
.Select-option {
    background: var(--os-surface-elevated);
    color: var(--os-ink);
}
.Select-option.is-focused {
    background: rgb(var(--os-accent-rgb) / 0.22);
}
.is-open > .Select-control {
    border-color: var(--os-accent) !important;
}

/* ─────────────────────────── 17. UTILITIES ─────────────────────────── */
.pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--os-emerald);
    box-shadow: 0 0 0 rgb(var(--os-emerald-rgb) / 0.6);
    animation: os-pulse 2s infinite;
}
@keyframes os-pulse {
    0% { box-shadow: 0 0 0 0 rgb(var(--os-emerald-rgb) / 0.6); }
    70% { box-shadow: 0 0 0 10px rgb(var(--os-emerald-rgb) / 0); }
    100% { box-shadow: 0 0 0 0 rgb(var(--os-emerald-rgb) / 0); }
}
.os-hide {
    display: none !important;
}
.os-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─────────────────────────── 18. RESPONSIVE ─────────────────────────── */
@media (max-width: 1180px) {
    .apex-kpi-grid,
    .os-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .os-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ghd-center {
        overflow-x: auto;
        scrollbar-width: none;
    }
}

@media (max-width: 1024px) {
    .apex-content-grid,
    .apex-tactical-layout,
    .player360-chart-grid,
    .player360-detail-grid,
    .roster-layout,
    .matchday-builder,
    .os-split-40-60 {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }
    .apex-tactical-column {
        min-height: 380px;
    }
}

@media (max-width: 860px) {
    .clinical-triage-tiers {
        grid-template-columns: minmax(0, 1fr);
    }
    .clinical-tier-cases {
        max-height: 520px;
    }
}

@media (max-width: 900px) {
    .player360-kpi-strip {
        flex-direction: column;
    }
    .player360-streak-card {
        border-right: none;
        border-bottom: 1px solid var(--os-border-lo);
    }
    .player360-gps-rows {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .global-header-dock {
        gap: 10px;
        padding: 0 12px;
    }
    .ghd-brand-name,
    .ghd-session-role {
        display: none;
    }
    .main-wrapper {
        padding: 12px 12px 24px;
    }
    .module-header {
        flex-direction: column;
    }
    .apex-kpi-grid,
    .os-kpi-strip,
    .os-grid-2,
    .os-grid-3,
    .os-grid-4,
    .injury-metric-grid,
    .med-entry-kpi-grid,
    .injury-form-grid,
    .med-entry-grid,
    .roster-move-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .med-entry-field:has(.med-entry-textarea),
    .roster-move-notes-field {
        grid-column: auto;
    }
    .matchday-reserves-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* The ladder is a flex row, so narrow viewports let it scroll rather
       than squeezing five cells below the legibility floor. */
    .rtp-stepper {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-bottom: 4px;
    }
    .rtp-stage-step {
        flex: 0 0 132px;
    }
    .injury-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .medical-actions {
        width: 100%;
    }
    .depth-chart-line {
        gap: 5px;
    }
    .position-card {
        padding: 6px;
    }
    .position-label,
    .player-card-squad {
        display: none;
    }
    .player-card.btn {
        padding: 6px 4px;
    }
    .player-card-name {
        font-size: var(--os-micro);
    }
    .matchday-pitch {
        padding: 7px;
    }
    .matchday-pitch-row {
        gap: 4px;
    }
    .matchday-slot {
        padding: 5px;
    }
    .matchday-position-name {
        font-size: var(--os-micro);
    }
    .matchday-player-select {
        padding-right: 18px;
        font-size: var(--os-micro);
    }
    .roster-panel {
        padding: 14px;
    }
}


/* Radar legend glyphs — the shared semantic trace palette from
   components.player_stats.RADAR_TRACE_COLORS, kept in sync with the
   design tokens: actual = indigo, IDP target = emerald, compare = muted. */

/* KPI strip — one slim unified surface fusing the attendance streak
   segment with the GPS / volume segment. The strip itself is the single
   elevated surface (border + shadow); the segments inside are quiet inset
   treatments separated by a hairline divider, so the profile area reads
   as one row instead of two stacked boxes. */
.player360-kpi-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: var(--os-gap);
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius);
    background: var(--os-surface);
    box-shadow: var(--os-shadow);
    overflow: hidden;
}

/* Strip segment labels — same mono/uppercase voice as KPI tile labels */
.player360-strip-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.player360-strip-head {
    margin-bottom: 8px;
}
.player360-strip-empty {
    color: var(--os-muted);
    font-size: var(--os-delta);
    line-height: 1.5;
}

/* Attendance & compliance streak segment */
.player360-streak-card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 16px 20px;
    border-right: 1px solid var(--os-border-lo);
    background: var(--os-surface-inset);
}
.player360-streak-body {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.player360-streak-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.player360-streak-value {
    color: var(--os-accent);
    font-family: var(--os-mono);
    font-size: var(--os-metric);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.player360-streak-unit {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.player360-streak-note {
    margin: 0;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* GPS / volume segment */
.player360-gps-card {
    display: flex;
    flex: 1 1 58%;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
}
.player360-gps-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 26px;
}

/* Integrated GPS metric rows — no per-metric border or heavy inset box:
   a quiet slate wash + tight padding keeps the row readable while the
   surrounding strip carries the surface. */
.player360-gps-metric {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-ink-rgb) / 0.05);
}
.player360-gps-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.player360-gps-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.player360-gps-value {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.player360-gps-track {
    height: 6px;
    width: 100%;
    border-radius: var(--os-radius-pill);
    background: var(--os-track);
    overflow: hidden;
}
.player360-gps-row-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.player360-gps-caption {
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Weekly meters panel — distance bars over the target range band ──
   The chart anchors the panel; a slim % of target tile rides alongside it
   in the same panel surface (never colour-alone — the tile always states
   its percentage, the metres split, and a text status caption). The panel
   spans the full chart grid so it never leaves a half-width gap. */
.player360-meters-panel {
    grid-column: 1 / -1;
}
.player360-meters-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
    align-items: center;
    gap: var(--os-gap);
}
.player360-meters-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}
.player360-meters-pct-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.player360-meters-pct-value {
    font-family: var(--os-mono);
    font-size: var(--os-metric-sm);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.player360-meters-pct-unit {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.player360-meters-pct-detail {
    color: var(--os-ink-dim);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-variant-numeric: tabular-nums;
}
.player360-meters-pct-caption {
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .player360-meters-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Wellness panel — composite trend + drop-alert chip ──
   Full-bleed in the chart grid, chart anchors and the alert chip rides
   alongside. The red drop chip is a decision cue, but status is never
   colour-alone: the point delta, the week tags and a text caption carry
   the meaning too. */
.player360-wellness-panel {
    grid-column: 1 / -1;
}
.player360-wellness-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    align-items: center;
    gap: var(--os-gap);
}
.player360-wellness-alert {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}
.player360-wellness-alert.status-risk {
    border-color: rgb(var(--os-rose-rgb) / 0.42);
    background: rgb(var(--os-rose-rgb) / 0.1);
}
.player360-wellness-alert-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.player360-wellness-alert-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.player360-wellness-alert-value {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-metric-sm);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.player360-wellness-alert-unit {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.player360-wellness-alert-caption {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    line-height: 1.5;
}
@media (max-width: 900px) {
    .player360-wellness-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Testing panel — positional delta chips (Actual − Benchmark) ──
   One chip per pillar beneath the radar. The band glyph is Cyan (on par),
   Green (above average) or Red (below average), but the deviation value and
   the caption text carry the meaning too — status is never colour-alone. */
.player360-test-deltas {
    margin-top: var(--os-gap);
}
.player360-delta-note {
    margin-bottom: 8px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.player360-delta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--os-gap-sm);
}
.player360-delta-chip {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--os-border-lo);
    border-left-width: 3px;
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-ink-rgb) / 0.04);
}
.player360-delta-chip.status-above {
    border-left-color: rgb(var(--os-emerald-rgb));
    background: rgb(var(--os-emerald-rgb) / 0.1);
}
.player360-delta-chip.status-below {
    border-left-color: rgb(var(--os-rose-rgb));
    background: rgb(var(--os-rose-rgb) / 0.1);
}
.player360-delta-chip.status-on-par {
    border-left-color: rgb(var(--os-amber-rgb));
    background: rgb(var(--os-amber-rgb) / 0.08);
}
.player360-delta-label {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.35;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.player360-delta-value {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-metric-sm);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.player360-delta-caption {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    line-height: 1.4;
}

/* ── Medical panel — body map + injury timeline ──
   Full-bleed clinical section. The SVG silhouette is hand-drawn geometry
   (front + back) and the hotspots are coordinate-mapped from injury rows.
   The panel is server-gated: Head Coach / Sports Science receive empty
   containers, so no clinical styling is ever populated for them. */
.player360-medical-panel {
    grid-column: 1 / -1;
    margin-bottom: var(--os-gap);
}
.player360-medical-note {
    margin-bottom: 12px;
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.player360-medical-layout {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: start;
    gap: var(--os-gap);
}
.player360-body-map {
    display: flex;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}
/* Body map is a Plotly figure (Dash 4.4.1 ships no html.Svg primitives):
   silhouette drawn with layout.shapes, hotspots as coordinate-mapped
   scatter marks. The chart owns its own canvas height. */
.player360-body-map-chart {
    width: 100%;
}
.player360-body-map-chart .dash-graph {
    width: 100%;
}
.player360-injury-timeline {
    min-width: 0;
}
.player360-medical-empty {
    padding: 18px 16px;
    border: 1px dashed var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    line-height: 1.5;
}
.player360-injury-timeline-list {
    display: flex;
    flex-direction: column;
    gap: var(--os-gap-sm);
    max-height: 440px;
    overflow-y: auto;
}
.player360-injury-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--os-border-lo);
    border-left-width: 3px;
    border-radius: var(--os-radius-sm);
    background: rgb(var(--os-ink-rgb) / 0.04);
}
.player360-injury-entry.status-severe {
    border-left-color: rgb(var(--os-rose-rgb));
    background: rgb(var(--os-rose-rgb) / 0.1);
}
.player360-injury-entry.status-moderate {
    border-left-color: rgb(var(--os-amber-rgb));
    background: rgb(var(--os-amber-rgb) / 0.08);
}
.player360-injury-entry.status-minor {
    border-left-color: rgb(var(--os-emerald-rgb));
    background: rgb(var(--os-emerald-rgb) / 0.08);
}
.player360-injury-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.player360-injury-chip {
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.player360-injury-date {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.player360-injury-site {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-body);
    font-weight: 700;
}
.player360-injury-detail {
    color: var(--os-ink-dim);
    font-size: var(--os-delta);
    line-height: 1.4;
}
.player360-injury-row-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}
.player360-injury-meta {
    color: var(--os-muted);
    font-family: var(--os-mono);
    font-size: var(--os-micro);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .player360-medical-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── APEX Command Center — readiness / load / data-quality panels ──
   Phase 3a additions to /apex. Status is never colour-alone: every band,
   chip and table status carries its own text label; the semantic tone only
   rides the border/background. */
.apex-readiness-panel,
.apex-load-panel,
.apex-quality-panel {
    padding: var(--os-pad-card);
    margin-bottom: var(--os-gap);
}

/* Squad readiness — 3-band headcount (GREEN / AMBER / RED). */
.apex-readiness-strip {
    margin-top: 4px;
}
.apex-readiness-bands {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--os-gap);
}
.apex-readiness-band {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--os-border-lo);
    border-left-width: 3px;
    border-radius: var(--os-radius-sm);
    background: var(--os-surface-inset);
}
.apex-readiness-band.status-green {
    border-left-color: rgb(var(--os-emerald-rgb));
    background: rgb(var(--os-emerald-rgb) / 0.08);
}
.apex-readiness-band.status-amber {
    border-left-color: rgb(var(--os-amber-rgb));
    background: rgb(var(--os-amber-rgb) / 0.08);
}
.apex-readiness-band.status-red {
    border-left-color: rgb(var(--os-rose-rgb));
    background: rgb(var(--os-rose-rgb) / 0.08);
}
.apex-readiness-count {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-metric);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.apex-readiness-band.status-green .apex-readiness-count { color: var(--os-emerald); }
.apex-readiness-band.status-amber .apex-readiness-count { color: var(--os-amber); }
.apex-readiness-band.status-red .apex-readiness-count { color: var(--os-rose-light); }
.apex-readiness-label {
    color: var(--os-ink-dim);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.apex-readiness-caption {
    color: var(--os-muted);
    font-size: var(--os-delta);
}

/* Load distribution figure. */
.apex-load-distribution-chart {
    width: 100%;
    min-height: 240px;
}

/* Data-quality audit — gap chip + table. */
.apex-quality-summary {
    flex: 0 0 auto;
}
.apex-quality-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-pill);
    background: rgb(var(--os-ink-rgb) / 0.05);
}
.apex-quality-chip.status-ok {
    border-color: rgb(var(--os-emerald-rgb) / 0.32);
    background: rgb(var(--os-emerald-rgb) / 0.12);
}
.apex-quality-chip.status-gap {
    border-color: rgb(var(--os-amber-rgb) / 0.34);
    background: rgb(var(--os-amber-rgb) / 0.12);
}
.apex-quality-chip.status-neutral {
    border-color: var(--os-border);
}
.apex-quality-chip-value {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-delta);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.apex-quality-chip.status-ok .apex-quality-chip-value { color: var(--os-emerald); }
.apex-quality-chip.status-gap .apex-quality-chip-value { color: var(--os-amber); }
.apex-quality-chip-caption {
    color: var(--os-muted);
    font-size: var(--os-micro);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .apex-readiness-bands {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Phase 3b — Team & Tactics heatmap + Medical/RTP rehab phases ──
   Load matrix on /coaches-hub and the rehab-phase aggregate on /medical.
   The heatmap rides its own roster-panel surface; the RTP figure sits above
   the detail triage board. Status is never colour-alone — every RTP bar is
   labelled with its stage and headcount. */
.coaches-load-heatmap,
.med-rtp-phases-chart {
    width: 100%;
    min-height: 240px;
}
.coaches-load-heatmap .dash-graph,
.med-rtp-phases-chart .dash-graph {
    width: 100%;
}

/* Rehab-phase aggregate — a supporting panel inside the clinical card,
   set off from the availability board below it by a hairline divider. */
.medical-rtp-legend {
    margin: 0 var(--os-pad-card) 4px;
}
.med-rtp-phases {
    margin: 0 var(--os-pad-card) var(--os-gap);
    padding-bottom: var(--os-gap);
    border-bottom: 1px solid var(--os-border-lo);
}

@media (max-width: 900px) {
    .med-rtp-phases {
        margin: 0 var(--os-pad-card);
    }
}

/* ── Phase 4 — Matchday selection lifecycle (lock / publish) ──
   Manual lock-out mechanics. The lock chip states DRAFT · EDITABLE or
   LOCKED · PUBLISHED in text (never colour alone); locked slots carry a
   dashed hairline + dimmed surface so the read-only board is obvious. */
.matchday-action-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.matchday-lock-button {
    border-color: var(--os-border-hi) !important;
    color: var(--os-ink-dim) !important;
    font-weight: 700 !important;
}
.matchday-lock-button:hover,
.matchday-lock-button:focus {
    border-color: var(--os-accent) !important;
    color: var(--os-accent-light) !important;
}
.matchday-new-draft-button {
    color: var(--os-muted) !important;
}
.matchday-new-draft-button:hover,
.matchday-new-draft-button:focus {
    color: var(--os-ink-dim) !important;
}
.matchday-lock-status {
    margin-top: 14px;
}
.matchday-lock-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--os-border-lo);
    border-radius: var(--os-radius-sm);
    border-left-width: 3px;
    background: rgb(var(--os-ink-rgb) / 0.04);
}
.matchday-lock-chip.is-draft {
    border-left-color: var(--os-amber);
    background: rgb(var(--os-amber-rgb) / 0.07);
}
.matchday-lock-chip.is-locked {
    border-left-color: var(--os-emerald);
    background: rgb(var(--os-emerald-rgb) / 0.08);
}
.matchday-lock-chip-value {
    color: var(--os-ink);
    font-family: var(--os-mono);
    font-size: var(--os-title);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.matchday-lock-chip.is-draft .matchday-lock-chip-value { color: var(--os-amber); }
.matchday-lock-chip.is-locked .matchday-lock-chip-value { color: var(--os-emerald); }
.matchday-lock-chip-caption {
    color: var(--os-muted);
    font-size: var(--os-delta);
}

/* Locked board: dimmed slots + dashed hairline make the read-only state
   structural (a disabled dropdown also blocks interaction). */
.matchday-slot-locked {
    border-style: dashed;
    opacity: 0.82;
}
.matchday-slot-locked .matchday-player-select {
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════
   PLAYER 360 WORKLOAD SUITE & COACH FEEDBACK LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.player360-kpi-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
@media (max-width: 1280px) {
    .player360-kpi-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .player360-kpi-summary {
        grid-template-columns: 1fr;
    }
}

.player360-workload-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1280px) {
    .player360-workload-grid {
        grid-template-columns: 1fr;
    }
}

.player360-row-2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) {
    .player360-row-2-grid {
        grid-template-columns: 1fr;
    }
}

.player360-row-3-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 1100px) {
    .player360-row-3-grid {
        grid-template-columns: 1fr;
    }
}

.player360-wellness-table-container {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
    background: var(--card);
}
.player360-wellness-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.player360-wellness-table th {
    padding: 8px 10px;
    text-align: left;
    color: var(--muted-foreground);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.02);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}
.player360-wellness-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--foreground);
    font-variant-numeric: tabular-nums;
}
.player360-wellness-table tr:last-child td {
    border-bottom: none;
}
.player360-score-badge {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.4;
}
.player360-score-5 { background: rgba(16, 185, 129, 0.22); color: #34d399; }
.player360-score-4 { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
.player360-score-3 { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.player360-score-2 { background: rgba(244, 63, 94, 0.18); color: #f87171; }
.player360-score-1 { background: rgba(244, 63, 94, 0.28); color: #fda4af; }


/* ─────────────────────────────────────────────────────────────
   Player 360: Quick KPI strip & Workload Suite summary grid
   ───────────────────────────────────────────────────────────── */
.player360-quick-kpi-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.player360-workload-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}
@media (max-width: 768px) {
    .player360-workload-summary-grid {
        grid-template-columns: 1fr;
    }
}