/* Palermo FC 2026 display face. Inter remains the operational UI face. */
@font-face {
    font-family: 'Mosaico Flare';
    src: url('/fonts/MosaicoFlareBETA-Regular.woff2') format('woff2'),
         url('/fonts/MosaicoFlareBETA-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   Palermo FC Health & Performance Platform Design System
   Brand Palette: #FCBDE5 #E87DC4 #000000 #FFFFFF
   Functional Palette: #034752 #4FC9DA plus semantic status colours
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    /* Tells every browser this page is dark, so the widgets the UA draws
       itself - scrollbars, native select popups, date/time pickers, spinners,
       autofill, text selection - come back dark instead of the OS default
       white. Without it the same page looks different on each staff laptop. */
    color-scheme: dark;

    --brand-nero: #000000;
    /* Nero Puro: the brand's off-black ground, already the report masthead. */
    --brand-nero-puro: #1A1A1A;
    --brand-rosa-palermo: #FCBDE5;
    --brand-rosa-palermo-rgb: 252, 189, 229;
    --brand-rosa-ton: #E87DC4;
    --brand-rosa-ton-rgb: 232, 125, 196;
    --brand-bianco-luce: #FFFFFF;

    /* ---- Colour Flow ladder (Direction B): a solid grey is a HEIGHT ---- */
    --surface-recess: #121212;
    /* RETIRED HEIGHT (2026-08-06): merged into the field so every page reads
       one grey — Squad Assessment's full-bleed grid was making whole modules
       darker than their neighbours. The name survives as an alias in old
       rules; new work uses --surface-field. */
    --surface-field: #121212;
    /* page field: module body, toolbar, gutters */
    --surface-chrome: #191919;
    /* app chrome: header, sidebar, rail, summary bar */
    --surface-raised: #1F1F1F;
    /* cards, table header block, docked panels */
    --surface-overlay: #191919;
    /* RETIRED HEIGHT (2026-08-07): merged into the chrome so every floating
       surface — popover, menu, tooltip, modal — shows the one modal grey.
       Risto flagged the popovers reading lighter than the Generate Report
       modal beside them. Border and shadow carry the elevation. The name
       survives as an alias in old rules; new work uses --surface-chrome. */

    /* ---- inks: anything drawn ON a height is an ALPHA ---- */
    --ink-zebra: rgba(255, 255, 255, 0.025);
    /* row banding in dense grids */
    --ink-wash: rgba(255, 255, 255, 0.055);
    /* hover: rows, nav, list items; chip fill at rest */
    --ink-wash-strong: rgba(255, 255, 255, 0.10);
    /* selected, pressed, active nav, active filter chip */
    --ink-line: rgba(255, 255, 255, 0.08);
    /* hairline: row separators, card borders, seams */
    --ink-line-strong: rgba(255, 255, 255, 0.14);
    /* input outlines, column-header underline, overlay borders, plot baselines */
    --scrim: rgba(0, 0, 0, 0.66);
    /* modal backdrop — the only one */

    /* ---- text ---- */
    --text-primary: #F4F4F5;
    --text-secondary: #a0a0a0;
    --text-tertiary: #8A8A8A;
    /* was #666666 — #666 fails AA on every surface in this ladder */
    --text-disabled: #6E6E6E;
    /* disabled control foregrounds ONLY (WCAG-exempt); never meaningful text */
    --text-inverse: #262626;

    --border-focus: var(--brand-rosa-palermo);

    --accent: var(--brand-rosa-palermo);
    --accent-rgb: var(--brand-rosa-palermo-rgb);
    --accent-hover: var(--brand-rosa-ton);
    --accent-dark: #034752;
    --accent-soft: rgba(var(--accent-rgb), 0.15);
    --reference-gold: #A08849;
    --chart-neutral-data: #45454a;
    --chart-neutral-micro: #55555a;
    --chart-quadrant-line: #3a3a3a;
    --accent-vivid: #E6007E;
    --accent-vivid-hover: #cc006e;

    --font-system: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Mosaico Flare', Georgia, serif;

    --success: var(--text-secondary);
    --success-rgb: 160, 160, 160;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    /* Elevation shadows for the ladder: overlays only — cards use a hairline. */
    --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.60);
    --shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.72);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 100px;
    /* Preserve-exact legacy radii pending design consolidation. */
    --radius-circle: 50%;

    --app-header-height: 67px;
    --module-toolbar-height: 62px;
    --sidebar-width: 224px;
    /* Icon rail: rail width, item height, and the header band the nav rhythm
       aligns to (the rule under the table's column headers). */
    --sidebar-rail-width: 56px;
    --rail-item-height: 40px;
    --table-header-band: var(--module-toolbar-height);

    --wellness-good: var(--text-primary);
    --wellness-caution: #fbbf24;
    --wellness-concern: #f87171;

    --status-available: #7acb91;
    --status-recovery: #60a5fa;
    --status-injured: #f87171;
    --status-differentiated: #c084fc;
    --status-modified: #fbbf24;
    /* --status-illness #fb923c retired 2026-08-18: illness marks with the
       out tier now, and an orange nothing referenced only invited drift. */
    --status-permission: #94a3b8;
    --status-absent: #94a3b8;

    /* The four availability tiers were retired on 2026-08-25 with the dots
       that carried them: availability is a word now, and only Injured takes
       colour, so the state name carries all of it. */

    /* Z-score poles: Rosa Ton ink for HIGH, Rosa Palermo ink for LOW; the arrow carries polarity. */
    --zscore-high-color: var(--brand-rosa-ton);
    --zscore-low-color: var(--brand-rosa-palermo);
    --zscore-normal-color: rgba(255, 255, 255, 0.16);
    --chart-normal-band-color: rgba(255, 255, 255, 0.045);
    --chart-context-band-color: rgba(255, 255, 255, 0.05);

    /* The Medical track's middle ink: a treated day that is no longer recent.
       Between --text-disabled and --text-primary on the dark plane. */
    --med-track-tx: #9a9a9a;

    --sprint-good: var(--text-primary);
    --sprint-warn: #fbbf24;
    --sprint-bad: #f87171;

    --acwr-low: var(--status-injured);
    --acwr-ok: var(--text-primary);
    --acwr-moderate: var(--status-modified);
    --acwr-high: var(--status-injured);

    --logo-filter: none;

    /* Used in styles.css but previously undefined here (fell through to scoped fallbacks). */
    --accent-pink: var(--brand-rosa-ton);
    --accent-teal: #4fc9da;

    --white: #ffffff;
    --palermo-blush: #F9D3DD;
    --cyan-pale: #b2f0f7;
    --soft-blue: #93c5fd;
    --soft-red: #fca5a5;
    --danger-strong: #ef4444;

    /* Load-direction markers for dense suggested-load tables. */
    --dir-reduce: #f3a3a0;
    --dir-raise: var(--text-secondary);
    --dir-hold: var(--text-tertiary);

    /* RTP phase/criteria aliases. */
    --phase-injury: var(--status-injured);
    --phase-reached: var(--accent);
    --phase-current: var(--accent);
    --phase-future: var(--text-tertiary);
    --crit-met: var(--success);
    --crit-pending: var(--accent);

}

[data-theme="light"] {
    color-scheme: light;

    --bg-primary: #FDF1F4;
    --bg-secondary: #ffffff;
    --bg-tertiary: #F9D3DD;
    --bg-elevated: #ffffff;
    --bg-hover: rgba(var(--accent-rgb), 0.25);
    --bg-input: #ffffff;

    --text-primary: #262626;
    --text-secondary: #555555;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    --border-color: #e0d0d6;
    --border-light: #ECE7E0;
    --border-focus: #034752;

    --accent: #034752;
    --accent-rgb: 3, 71, 82;
    --accent-hover: #023d47;
    --accent-dark: #034752;
    --accent-soft: rgba(3, 71, 82, 0.10);
    --chart-neutral-data: #45454a;
    --chart-neutral-micro: #55555a;
    --chart-quadrant-line: #3a3a3a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.20);

    --zscore-high-color: var(--brand-rosa-ton);
    --zscore-low-color: var(--brand-rosa-palermo);
    --zscore-normal-color: rgba(38, 38, 38, 0.16);
    --chart-normal-band-color: rgba(38, 38, 38, 0.045);
    --chart-context-band-color: rgba(38, 38, 38, 0.05);

    /* Light-theme neutral states and the dedicated available-status dot. */
    --success: var(--text-secondary);
    --success-rgb: 85, 85, 85;
    --wellness-good: var(--text-primary);
    --status-available: #16a34a;
    --med-track-tx: #9a9a9a;
    --sprint-good: var(--text-primary);
    --wellness-caution: #d97706;
    --sprint-warn: #d97706;
    --wellness-concern: #dc2626;
    --sprint-bad: #dc2626;

    --row-even: #fefcfb;
    --row-odd: #ffffff;
    --row-hover: #F9D3DD;
    --header-bg: #ffffff;
    --logo-filter: brightness(0) saturate(100%);

    --accent-pink: #c94b7a;
    --accent-teal: #034752;
    --dir-reduce: #dc2626;
    --dir-raise: var(--text-secondary);
    --dir-hold: var(--text-tertiary);

    --bg-deep: #ffffff;
    --table-header-bg: #F9D3DD;
    --table-row-line: #ECE7E0;
}

/* ═══════════════ RESET & BASE ═══════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbars ──
   One bar for every user. Left to the browser, the same scroll area is a
   fat opaque light-grey bar on a Mac set to "Always show scroll bars", an
   overlay ghost on a Mac set to "When scrolling", and a different width
   again on Windows. These rules draw it from the ink ladder instead, so the
   bar is the same hairline on every laptop and reads as part of the page.
   Standard properties first for Firefox and current Safari; the WebKit
   pseudo-elements pin the geometry on every Chrome and Safari build.
   Module CSS never restyles a scrollbar; the deliberate hides (.nv-tabs,
   .nv-switch, .nv-seg) are class-scoped and still win over these. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-line-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-line-strong);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
    background-clip: padding-box;
}

/* ── Selects: drawn by the app, never by the user agent ──
   A select left at the browser default paints the OS control whatever
   background the author sets on it. On macOS that is nearly invisible, so a
   hand-styled select looks correct here and arrives as a white box with a
   system arrow on a Windows laptop. The fix has to be `appearance: none`,
   and once the native control is gone the page owes the reader an arrow.

   This element rule is the floor: it dresses the ~30 selects that carry no
   CSS of their own (the RTP exit-criteria editor builds most of them), and
   it hands `appearance: none` to every other select for free, because none
   of them declare the property themselves.

   Prefer .hub-select / .hub-select-sm for anything new. This rule exists so
   that a select nobody styled is still legible, not as a licence to add
   more of them. */
select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--surface-field);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23888'%3E%3Cpath d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 9px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 24px 6px 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

select:hover {
    border-color: var(--text-tertiary);
}

select:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

select:disabled {
    background-color: var(--ink-zebra);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* The selects that DO carry their own colour and padding. Their rules use the
   `background` shorthand, which resets background-image, and their `padding`
   shorthand leaves no room for the mark - and module CSS loads after this
   file, so an equal-specificity rule here would lose. Tagging the element
   raises these to (0,1,1) so the mark and its gutter win wherever the rule
   sits, while the module keeps ownership of colour, height and type. */
select.cm-input,
select.day-type-select,
select.dp-cat-location,
select.dp-inline-select,
select.dp-table-select,
select.ec-template-target,
select.ir-body-comp-input,
select.ir-range-select,
select.lp-risk-select,
select.lp-role-select,
select.rg-review-player,
select.rtp-ec-add-category,
select.rtp-ec-template-select,
select.st-select,
select.sync-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23888'%3E%3Cpath d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 9px;
    padding-right: 24px;
}

/* The gutter for the mark. Every rule below sets a padding shorthand that
   leaves no room for an arrow, and each lives in module CSS that loads after
   this file — so `:not([multiple])` does two jobs: it lifts these one class
   above the rule they are correcting, and it keeps multi-selects out, which
   carry no mark. Change the padding in the module rule and this still holds,
   because it only ever sets the right edge. */
.cm-input:not([multiple]),
.day-type-select:not([multiple]),
.dp-inline-select:not([multiple]),
.dp-table-select:not([multiple]),
.imp-select:not([multiple]),
.ir-body-comp-input:not([multiple]),
.ir-range-select:not([multiple]),
.lp-risk-select:not([multiple]),
.lp-role-select:not([multiple]),
.rg-gym-field select:not([multiple]),
.rg-gym-table select:not([multiple]),
.rg-options-row select:not([multiple]),
.rg-review-player:not([multiple]),
.rg-ta-option-group > .hub-select:not([multiple]),
.rg-ta-scope .hub-select:not([multiple]),
.rg-training-primary-grid .rg-gym-field select:not([multiple]),
.rtp-ec-add-category:not([multiple]),
.rtp-ec-confirm select:not([multiple]),
.rtp-ec-editor select:not([multiple]),
.rtp-ec-evidence-form select:not([multiple]),
.rtp-ec-template-add-form select:not([multiple]),
.rtp-ec-template-select:not([multiple]),
.rtp-injury-field select:not([multiple]),
.rtp-phase-modal select:not([multiple]),
.st-select:not([multiple]),
.sync-field:not([multiple]),
.tp-module[data-mode="finder"] #tp-finder-filters .tp-filter-select:not([multiple]) {
    padding-right: 24px;
}

/* A multi-select is a listbox, not a dropdown: it honours its background
   already and has no closed state to mark. */
select[multiple] {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
    padding-right: 10px;
    cursor: default;
}

body {
    font-family: var(--font-system);
    background: var(--surface-field);
    color: var(--text-primary);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Desktop layout floor: below this width the window scrolls horizontally
   instead of restacking toolbars, filters, and header lanes. Matches the
   73.75rem (1180px) toolbar media breakpoint — px here because rem on this
   property resolves against the 14px app root, not the 16px media-query rem.
   body.ipad-mode keeps responsive compatibility. */
#app {
    min-width: 1180px;
}

body.ipad-mode #app {
    min-width: 0;
}

/* Links: without this, user-added links render browser-default blue */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

/* ═══════════════ LOGIN ═══════════════ */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-recess);
    padding: 20px;
}

.login-card {
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.login-logo {
    width: 80px;
    height: auto;
    margin-bottom: 20px;
    filter: var(--logo-filter);
}

.login-title {
    font-family: var(--font-display);
    font-size: 2.3rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 32px;
    letter-spacing: normal;
    text-transform: uppercase;
    line-height: 1.1;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group input::placeholder {
    color: var(--text-tertiary);
}

/* Keep browser-autofilled inputs on the dark theme (kills the pale lavender autofill bg). */
input:-webkit-autofill,
input:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-field) inset;
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-out 0s;
}

input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-field) inset, 0 0 0 3px var(--accent-soft);
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-out 0s;
}

.login-error {
    background: rgba(248, 113, 113, 0.15);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin-bottom: 16px;
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.login-note {
    margin: 9px 0 0;
    color: var(--text-tertiary);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--ink-line);
}
.entra-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
}

/* ═══════════════ BUTTONS ═══════════════ */
/* Buttons live in action.css (DESIGN_SYSTEM.md §4b). This file no longer
   declares a button height, padding, radius, font-size, weight, border or
   background — including the Squad Assessment toolbar overrides that used to
   sit here. The wellness control is now .ac-btn.ac-chrome.ac-icon.ac-m. */

/* ═══════════════ APP HEADER ═══════════════ */
.app-header {
    display: grid;
    /* Equal side lanes keep the date picker on the page's true centre line;
       the demoted wordmark fits its share at the 1180px floor. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: var(--app-header-height);
    min-height: var(--app-header-height);
    /* No left gutter: the hamburger lane is as wide as the icon rail below,
       so the two stay on one vertical. */
    padding: 12px 24px 12px 0;
    background: var(--surface-chrome);
    border-bottom: 1px solid var(--ink-line);
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    grid-column: 1;
    flex: 0 0 auto;
    gap: 11px;
}

.header-logo {
    width: 34px;
    height: auto;
    filter: var(--logo-filter);
    flex-shrink: 0;
}

/* The wordmark is identity, not a page title: same Mosaico Flare uppercase,
   smaller and letterspaced in secondary, so the module's hub-page-title is
   the only bright display line on screen. */
.header-title {
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.date-input {
    min-height: 36px;
    min-width: 168px;
    padding: 7px 36px 7px 12px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hub-date-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.hub-date-native-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hub-date-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    line-height: 1;
    padding-right: 12px;
    text-align: left;
}

.hub-date-trigger:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.hub-date-trigger:disabled {
    cursor: not-allowed;
}

.hub-date-control .hub-date-trigger {
    width: 100%;
}

.hub-date-trigger.hub-select,
.hub-date-trigger.hub-select-sm {
    background-image: none;
    padding-right: 12px;
}

.cm-field .hub-date-control,
.ir-body-comp-form-group .hub-date-control,
.rg-options-row .hub-date-control,
.rtp-injury-field .hub-date-control,
.rb-field .hub-date-control {
    width: 100%;
}

.hub-date-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-input:hover {
    border-color: var(--text-tertiary);
}

.date-input:focus,
.hub-date-control.open .hub-date-trigger {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.hub-date-trigger-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    line-height: 0;
    transition: color 0.2s;
}

.hub-date-trigger:hover .hub-date-trigger-icon,
.hub-date-control.open .hub-date-trigger-icon {
    color: var(--text-secondary);
}

.hub-date-popover {
    position: fixed;
    /* Above every modal/overlay layer (app modals top out at 10001) */
    z-index: 10500;
    width: 292px;
    padding: 14px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.hub-date-popover.hidden {
    display: none;
}

.hub-date-popover-head {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.hub-date-month {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 800;
    text-align: center;
}

.hub-date-nav {
    min-height: 30px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hub-date-nav {
    width: 34px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1;
}

.hub-date-nav:hover:not(:disabled) {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.hub-date-nav:disabled {
    color: var(--text-disabled);
    cursor: default;
    opacity: 0.35;
}

.hub-date-weekdays,
.hub-date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.hub-date-weekdays {
    margin-bottom: 6px;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.hub-date-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hub-date-day:hover:not(:disabled) {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.hub-date-day.is-muted {
    color: rgba(170, 170, 170, 0.38);
}

.hub-date-day.is-today:not(.is-selected) {
    border-color: rgba(var(--accent-rgb), 0.32);
    color: var(--text-primary);
}

.hub-date-day.is-selected {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.46);
    color: var(--accent);
}

.hub-date-day.is-disabled,
.hub-date-day:disabled {
    color: rgba(170, 170, 170, 0.24);
    cursor: default;
}

.hub-date-popover-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ink-line);
}
.hub-time-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.hub-time-native-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.hub-time-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
    padding: 7px 10px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-field);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}

.hub-time-control .hub-time-trigger {
    width: 100%;
}

.hub-time-trigger:hover {
    border-color: var(--text-tertiary);
}

.hub-time-trigger:focus,
.hub-time-control.open .hub-time-trigger {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.hub-time-trigger:disabled {
    cursor: not-allowed;
}

.hub-time-trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-time-trigger-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    line-height: 0;
    transition: color 0.2s;
}

.hub-time-trigger:hover .hub-time-trigger-icon,
.hub-time-control.open .hub-time-trigger-icon {
    color: var(--text-secondary);
}

.hub-time-popover {
    position: fixed;
    /* Above every modal/overlay layer (app modals top out at 10001) */
    z-index: 10500;
    width: 176px;
    padding: 10px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.hub-time-popover.hidden {
    display: none;
}

.hub-time-popover-head {
    padding: 2px 4px 9px;
}

.hub-time-title {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.hub-time-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-height: 232px;
    overflow-y: auto;
    padding-right: 2px;
}

.hub-time-option {
    min-height: 30px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hub-time-option:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.hub-time-option.is-selected {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.46);
    color: var(--accent);
}

.hub-time-popover-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--ink-line);
}
.rb-field .hub-time-control {
    width: 100%;
}

.rs-config-group .hub-time-control {
    width: 80px;
}

.context-badge {
    padding: 5px 12px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    grid-column: 3;
    flex: 0 0 auto;
    gap: 10px;
    min-width: 0;
}

/* The app refresh is a user-menu item; only its spinner needs own rules. */
.app-refresh-button:disabled {
    cursor: wait;
}

.app-refresh-icon {
    display: block;
    flex-shrink: 0;
}

.app-refresh-button.is-refreshing .app-refresh-icon {
    animation: app-refresh-spin 0.7s linear infinite;
}

@keyframes app-refresh-spin {
    to { transform: rotate(360deg); }
}

.user-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--accent);
    color: var(--text-inverse);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    text-align: center;
    flex-shrink: 0;
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    min-height: 36px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    /* The pill wears the one chrome grey — the same solid its open panel
       floats on. Hover and open change only the border, never the fill. */
    background: var(--surface-chrome);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.user-menu-trigger:hover,
.user-menu.open .user-menu-trigger {
    border-color: var(--accent);
}

.user-menu-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.user-menu-chevron {
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.user-menu.open .user-menu-chevron {
    transform: rotate(180deg);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: none;
    width: 292px;
    padding: 10px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-lg);
    z-index: 2000;
}

.user-menu.open .user-menu-panel {
    display: block;
}

.user-menu-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 12px;
    border-bottom: 1px solid var(--ink-line);
    margin-bottom: 8px;
}

.user-menu-profile-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 0.78rem;
}

.user-menu-profile > div strong,
.user-menu-profile > div span {
    display: block;
    max-width: 206px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-profile > div strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.user-menu-profile > div span {
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}
.user-menu-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
}

.user-menu-divider {
    height: 1px;
    background: var(--ink-line);
    margin: 8px 4px;
}

@media (max-width: 900px) {
    .user-menu-name {
        display: none;
    }

    .user-menu-trigger {
        padding-right: 6px;
    }

    .user-menu-panel {
        right: -2px;
        width: min(292px, calc(100vw - 24px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-refresh-button.is-refreshing .app-refresh-icon {
        animation: none;
    }
}

/* ═══════════════ SQUAD ASSESSMENT TOOLBAR ═══════════════
   Shares the 62px toolbar rule, lanes, and 24px gutters with the other
   modules (grouped selectors in the leaderboard section), so the page title
   sits on the same vertical as every other dashboard. */
/* The left lane may carry an exception string; it truncates rather than
   push the right lane off the 1180px layout floor. */
.sa-toolbar-left {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.sa-toolbar-left .hub-toolbar-meta {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-toolbar-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
}

/* The day type is the one emphasised token in the meta run. */
.hub-toolbar-meta .sa-day-echo {
    color: var(--text-primary);
    font-weight: 600;
}

/* The context value is meta, not a highlighted value: it rides in the meta
   run at secondary weight. */
.sa-context {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Lane rhythm ──
   A hairline separates the data-scope controls (date, Filters) from the
   actions (sync, Load Plan) so the right lane reads as two groups, not five
   loose objects. Also used in the left lane before an exception string. */
.sa-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--ink-line);
    flex: 0 0 auto;
}

/* ── The one exception string (left lane, after the meta run) ──
   Persistent status left the bar. Only an edit that did not reach the server
   earns a string here; sync age never does. */
.sa-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--warning);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.sa-unsaved::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-circle);
    background: var(--warning);
}

/* The `hidden` attribute must win over the inline-flex display above;
   the browser's own [hidden] rule loses to any author display rule. */
.sa-unsaved[hidden] {
    display: none;
}

/* The filter panel anchors right: from the right lane its old left edge
   would overflow the 1180px layout floor. */
.sa-toolbar-right .filter-header .filter-bar {
    left: auto;
    right: 0;
}

/* Column filters row */
/* Filter toggle header */
/* Filters control lives inline in the toolbar; this is the dropdown anchor. */
.filter-header {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Filter popover.
   A filter set is not a selector idiom (section 4b): these chips MARK, they
   never light up. The pink-outlined active chip went on 2026-08-25 - inside a
   panel Rosa Palermo belongs to a checkbox tick, a radio dot or a focus ring,
   never to a pressed state. The panel also declares its axes: Position filters
   rows, Columns filters columns, and the two are ruled apart. */
.filter-bar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 200;
    width: max-content;
    max-width: 540px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.filter-bar.hidden {
    display: none;
}

.fp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--ink-line);
}

.fp-title {
    color: var(--text-primary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* The count belongs here and nowhere else: a chip never carries one. */
.fp-count {
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.fp-count-on {
    color: var(--text-secondary);
    font-weight: 600;
}

.fp-body {
    padding: 14px 16px 4px;
}

.fp-group + .fp-group {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--ink-line);
}

.fp-group-head {
    margin: 0 0 9px;
    color: var(--text-tertiary);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.fp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

/* The multi-select control. Selection is an ink step on any plane: hover
   --ink-wash, on --ink-wash-strong, label to --text-primary. The weight never
   changes between states, so a pressed chip does not shift the row. */
.fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
}

.fp-chip:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.fp-chip[aria-pressed="true"] {
    background: var(--ink-wash-strong);
    color: var(--text-primary);
}

/* The only pink in the panel. */
.fp-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fp-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 11px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

.fp-field-label {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* appearance:none is load-bearing, not tidiness: a select left at the browser
   default paints the OS control inside this well - a white box with a system
   arrow on Windows - however transparent its background is set. The mark is
   the same filled triangle .hub-select draws. */
.fp-field-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0 15px 0 0;
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23888'%3E%3Cpath d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 9px;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
}

.fp-field-select:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.fp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid var(--ink-line);
    background: var(--surface-raised);
}

.fp-reset {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
}

.fp-reset:hover {
    color: var(--text-primary);
}


/* Medical column entry filter — icon-only anchor in the column header.
   The wrap centers the icon vertically on the label+date block. */
.med-th-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.med-th-text {
    display: inline-block;
}

.med-filter,
.th-filter {
    display: inline-flex;
    align-items: center;
}
/* Active category count. Neutral, not accent: it is a quantity, not a state. */
.med-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: var(--radius-pill);
    background: var(--ink-wash-strong);
    color: var(--text-primary);
    font-size: 0.56rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.med-filter-count[hidden] {
    display: none;
}

/* Panel reuses the .filter-bar pills but floats fixed (JS positions it under
   the header icon) so the table scroll container cannot clip it. */
.med-filter-panel,
.th-filter-panel {
    position: fixed;
    z-index: 400;
    max-width: 320px;
}

.med-filter-panel .fp-chip {
    font-family: var(--font-system);
}

/* Efficiency header: the window pill reads its choice, the panel holds a pick-one. */
#eff-filter-btn { font-size: 0.6rem; letter-spacing: 0.3px; text-transform: none; }
.th-filter-panel .nv-seg { height: 28px; }
.th-filter-panel .nv-seg-btn { font-size: 0.68rem; padding: 0 10px; }

/* ═══════════════ LOADING ═══════════════ */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--ink-line-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════════════ READINESS TABLE ═══════════════ */
.table-wrap {
    overflow-x: auto;
    padding: 0;
    background: var(--surface-recess);
    /* Standard 24px content gutters and a bordered deep field, matching the
       table treatment on the other dashboards. */
    margin: 0 24px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
}

.player-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
    /* ← bumped from 0.78rem */
}

.player-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-raised);
    padding: 8px 10px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--ink-line-strong);
    white-space: nowrap;
    z-index: 10;
}

.player-table thead tr.squad-assessment-group-row th {
    top: 0;
    z-index: 12;
    height: 20px;
    padding: 0 10px;
    background: var(--surface-recess);
    border-bottom: 0;
    color: var(--text-tertiary);
    font-size: 0.50rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-align: center;
    opacity: 0.74;
}

.player-table thead tr.squad-assessment-label-row th {
    top: 20px;
    height: calc(var(--module-toolbar-height) - 20px);
    padding: 5px 10px 6px;
    z-index: 11;
}

.player-table thead th.col-name,
.player-table thead th.col-pos,
.player-table td.col-name,
.player-table td.col-pos {
    text-align: left;
}

.player-table tbody tr:hover td {
    background-color: var(--ink-wash);
}

.player-table thead th .th-date {
    display: block;
    font-weight: 300;
    color: var(--text-tertiary);
    font-size: 0.55rem;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

.player-table tbody tr {
    transition: background 0.15s;
}

.player-table tbody tr:nth-child(even) {
    background: transparent;
}

.player-table tbody tr:nth-child(odd) {
    background: var(--ink-zebra);
}

.player-table tbody tr:hover {
    background: var(--ink-wash);
}

.player-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ink-line);
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    color: var(--text-primary);
}

/* Position — plain text */
.pos-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* Player name */
.name-cell {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.88rem;
}

.name-cell.clickable {
    cursor: pointer;
    transition: color 0.2s;
}

.name-cell.clickable:hover {
    color: var(--accent);
}

/* Pill taxonomy: status = semantic state; metric = compact data callout; metadata = quiet labels. */
/* Availability
   One idiom, and it is mostly silence (Risto, 2026-08-25). The dot-and-word
   pill went the way of the capsule before it: a fit squad now leaves the
   column empty, so any word in it is news. Only the exceptions are drawn,
   and only Injured takes colour - the four dot tiers were still asking the
   reader to decode a hue for a state the word already names. */
.av-word {
    display: block;
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.av-word-out {
    color: var(--status-injured);
}

/* Available is the null state: it confirms the data is there and then gets
   out of the way. Sentence case at a lighter weight, so a column of fit
   players reads as texture and the exceptions read as words. */
.av-word-quiet {
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

.note-label-sum {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* ── Wellness cells ── */
.wellness-good {
    color: var(--text-primary);
    font-weight: 600;
}

.wellness-caution {
    color: var(--wellness-caution);
    font-weight: 600;
}

.wellness-concern {
    color: var(--wellness-concern);
    font-weight: 600;
}

.wellness-na {
    color: var(--text-tertiary);
}

.delta-up {
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 2px;
}

.delta-down {
    color: var(--wellness-concern);
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 2px;
}

.cell-date {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 2px;
}

.vald-type {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--text-tertiary);
    background: var(--surface-raised);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    margin-right: 2px;
    letter-spacing: 0.3px;
}

/* Flagged values share one pill shape; fill, outline, and arrows carry polarity. */
/* Notable-value callout (|z| >= 1): ink only, no container (2026-08-26).
   The solid Rosa Ton capsule and the Nero outlined capsule were the only
   filled or stroked elements on the grid and carried an 11.5px bold numeral
   against the row's 14px regular, so the eye landed on the container before
   the number. Now the numeral keeps the row's size, takes weight 600 and the
   pole's pink, and the arrow carries polarity: high = Rosa Ton with an up
   arrow, low = Rosa Palermo with a down arrow. Same idiom as the wellness and
   sprint columns: colour on the value, nothing around it. */
.gps-high,
.gps-low,
.metric-flag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.gps-high,
.metric-flag-high {
    color: var(--zscore-high-color);
}

.gps-low,
.metric-flag-low {
    color: var(--zscore-low-color);
}

.metric-flag-high::before,
.metric-flag-low::before {
    font-size: 0.7em;
    line-height: 1;
}

.metric-flag-high::before {
    content: "↑";
}

.metric-flag-low::before {
    content: "↓";
}

.metric-main-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Metric pill: flagged training-response states use the shared Rosa treatment. */
.response-cell {
    cursor: pointer;
    position: relative;
    text-align: center;
    display: inline-flex;
    justify-content: center;
}

.response-cell:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.response-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    max-width: 100%;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.response-aligned {
    background: var(--ink-wash);
    color: var(--text-secondary);
}

.response-none {
    background: transparent;
    color: var(--text-tertiary);
    font-weight: 600;
}

.response-popup {
    display: none;
    position: fixed;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    max-width: 300px;
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.5;
    text-align: left;
    /* The popup lives inside table cells that set nowrap; reset it so
       the note text wraps instead of overflowing. */
    white-space: normal;
    overflow-y: auto;
}

.response-popup.open {
    display: block;
}

.response-popup-title {
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink-line);
    font-size: 0.8rem;
}

.response-popup-note {
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.45;
    margin-bottom: 6px;
}

/* Load Efficiency trend cell: eligible session history plus status triangle.
   Mark only (2026-08-26): the sparkline and its last point are always grey,
   and the triangle alone carries the state colour. A 52px line in green or
   coral was a colour block per row and, with the load capsules gone, the
   most saturated thing on the page. Study: "Squad Assessment - Load
   Efficiency Directions.html" (A) in the design project. */
.fit-trend {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.ft-up { color: var(--status-available); }
.ft-flat { color: var(--text-secondary); }
.ft-down { color: var(--wellness-concern); }

.ft-spark {
    overflow: visible;
    flex: none;
}

.ft-spark-history {
    stroke: var(--text-tertiary);
    opacity: 0.55;
}

.ft-spark-latest {
    fill: var(--text-secondary);
}

.ft-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 2px;
}

.ft-empty {
    color: var(--text-tertiary);
}

.response-spark-label {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    margin-top: 8px;
    margin-bottom: 2px;
}

.response-spark {
    display: block;
    width: 100%;
    height: 44px;
}

.response-popup-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--ink-line);
    font-size: 0.75rem;
}

.response-popup-row:last-child {
    border-bottom: none;
}

.response-popup-row span {
    color: var(--text-secondary);
    white-space: nowrap;
}

.response-popup-row strong {
    color: var(--text-primary);
    font-weight: 700;
    text-align: right;
}

.response-popup-row em {
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 600;
}

/* ACWR inline */
.acwr-value {
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 4px;
}

.acwr-low {
    color: var(--acwr-low);
}

.acwr-ok {
    color: var(--text-secondary);
}

.acwr-moderate {
    color: var(--acwr-moderate);
}

.acwr-high {
    color: var(--acwr-high);
}

/* Sprint indicator */
.sprint-good {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
}

.sprint-warn {
    color: var(--sprint-warn);
    font-size: 0.78rem;
    font-weight: 600;
}

.sprint-bad {
    color: var(--sprint-bad);
    font-size: 0.78rem;
    font-weight: 600;
}

/* Metadata pill: medical summary — NO overflow:hidden so popup is visible ── */
.med-cell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 430px;
    min-height: 22px;
    padding: 3px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

/* The 14-day treatment track. Three inks and nothing else: an untreated day
   is the empty scale, a treated day is grey, a treated day inside the last
   three is near-white. The empty slots stay drawn - the full scale is what
   makes the pattern readable. */
.med-track {
    display: grid;
    grid-template-columns: repeat(14, 6px);
    gap: 2px;
    align-items: end;
    flex: 0 0 auto;
    height: 12px;
}

.med-track i {
    display: block;
    height: 12px;
    border-radius: 1px;
    background: var(--ink-wash);
}

.med-track i.is-tx {
    background: var(--med-track-tx);
}

.med-track i.is-tx.is-hot {
    background: var(--text-primary);
}

/* No ellipsis: condenseMedicalSite() abbreviates the name to fit, so a cut
   here would mean the vocabulary grew a term the shorthand does not know.
   Clip rather than trail off, and the title still carries the full text. */
/* The name never shrinks: condenseMedicalSite() already bounded it, so a
   squeezed flex line was cutting "R Lower Leg" mid-letter rather than the
   shorthand being too long. */
.med-cell-label {
    flex: 0 0 auto;
    min-width: 2ch;
    max-width: 19ch;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.2;
}

/* Nothing in the last week: the site is on record but not being worked on. */
.med-cell-label.is-past {
    color: var(--text-disabled);
}

.med-cell-meta {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}

.med-cell-recency {
    color: var(--text-disabled);
}

/* The doctor's note is text at the right edge, not a chip. */
.med-cell-docnote {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 4px;
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
}

.med-cell-none {
    flex: 0 0 auto;
    color: var(--text-disabled);
    font-size: 0.7rem;
}

.med-cell-empty {
    cursor: default;
}

.med-cell-more {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: var(--radius-pill);
    background: var(--ink-wash);
    color: var(--text-secondary);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
}

/* Doctor Daily Medical Summary: the DOC marker in the popup heading names
   who wrote the block. Neutral ink - it is a label, not a state. */
.med-cell-doc {
    flex: 0 0 auto;
    display: inline-block;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--ink-wash);
    color: var(--text-secondary);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.med-doc-block {
    margin-bottom: 6px;
}

.med-doc-divided {
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 6px;
}

.med-doc-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.med-doc-entry {
    padding: 2px 0;
}

.med-doc-meta {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 600;
}

.med-doc-author {
    color: var(--text-secondary);
    font-weight: 400;
}

.med-doc-text {
    font-size: 0.68rem;
    color: var(--text-primary);
    white-space: normal;
    overflow-wrap: break-word;
}

.med-cell .med-popup {
    display: none;
    position: fixed;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    white-space: normal;
    min-width: 280px;
    max-width: min(380px, 90vw);
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.5;
}

/* Click-to-open medical popup */
.med-cell .med-popup.open {
    display: block;
}

/* ═══════════════ SORE AREAS FLAG + POPUP ═══════════════ */
.sore-flag {
    cursor: pointer;
    text-align: center;
    position: relative;
}

.sore-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.sore-popup {
    display: none;
    position: fixed;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    z-index: 100;
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    max-width: 280px;
    font-size: 0.78rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.sore-popup.open {
    display: block;
}

.sore-popup-title {
    font-weight: 700;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ink-line);
    font-size: 0.8rem;
}

.sore-popup-item {
    padding: 3px 0;
    border-bottom: 1px solid var(--ink-line);
    font-size: 0.75rem;
}

.sore-popup-item:last-child {
    border-bottom: none;
}

.med-popup-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 0.82rem;
    border-bottom: 1px solid var(--ink-line);
    padding-bottom: 6px;
}

.med-popup-row {
    padding: 4px 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.med-popup-row strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── Notes ── */
.note-cell {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: left;
}

.note-label {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    background: var(--ink-wash);
    color: var(--text-tertiary);
    margin-right: 3px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

/* ═══════════════ LEGEND BAR ═══════════════ */
.legend-bar {
    /* Quiet metadata line under the inset table, on the same 24px gutters.
       The old 50px bottom clearance for the fixed summary bar is gone with it. */
    padding: 6px 10px;
    margin: 0 24px 24px;
    background: transparent;
    border-bottom: none;
}

/* Daily Board and Weekly Planning keep the disclosure legend. */
.legend-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 0 4px;
}

/* The marks inside the Legend dialog: one chip row per column family. */
.le-chips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-section {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Load efficiency: the explanation dialog opened from the Legend. Terms in a
   narrow column so the eye can scan; the method as numbered steps. */
.le-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* the body scrolls inside the capped height */
    max-width: 640px;
}
.le-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.le-body h3 {
    margin: 0 0 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.le-body p, .le-body ol { margin: 0; line-height: 1.45; text-wrap: pretty; }
.le-body ol { padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

.legend-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
}

.legend-dl dt {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.legend-dl dd {
    margin: 0;
    line-height: 1.4;
    text-wrap: pretty;
}

.legend-title {
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem;
    margin-right: 2px;
}

/* ═══════════════ SUMMARY BAR ═══════════════ */
/* ═══════════════ MODAL ═══════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    padding: 12px;
    background: color-mix(in srgb, var(--brand-nero) 68%, transparent);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal {
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 24px);
    box-shadow: var(--shadow-modal);
    animation: slideUp 0.25s ease;
}

#player-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 78px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--ink-line);
    gap: 13px;
}

.pam-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-circle);
    background: var(--brand-rosa-palermo);
    color: var(--brand-nero);
    font-family: var(--font-system);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.pam-player-info {
    min-width: 0;
    flex: 1 1 auto;
}

.modal-player-info h2 {
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: 1.38rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pam-player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 6px;
}

.pam-meta-separator[hidden] {
    display: none;
}

.pam-meta-separator {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-circle);
    background: var(--text-tertiary);
}
.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px 24px;
    scrollbar-gutter: stable;
}

.modal-section {
    margin: 0 0 22px;
}

.modal-section:last-child {
    margin-bottom: 0;
}

.pam-section-title {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.pam-field-grid,
.pam-notes-grid,
.pam-summary-grid,
.pam-previous-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pam-field {
    min-width: 0;
}

.pam-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.modal-label {
    display: block;
    margin: 0 0 7px;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: 0.03em;
}

.pam-field-hint {
    color: var(--text-tertiary);
    font-size: 0.64rem;
    line-height: 1.2;
}

.modal-effective-status {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.pam-effective-status {
    display: flex;
    align-items: center;
    min-height: 42px;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.pam-effective-label {
    margin-right: auto;
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* The availability word, in the modal's own type scale: no dot, and only
   Injured takes colour. Matches .av-word in the squad grid. */
.pam-status {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pam-status[data-status="injured"],
.pam-status[data-status="illness"] {
    color: var(--status-injured);
}

.pam-status[data-status="available"] {
    color: var(--text-tertiary);
    font-weight: 650;
}

.pam-source-chip {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-field);
    color: var(--text-secondary);
    font-size: 0.63rem;
    font-weight: 650;
    white-space: nowrap;
}

.modal-conflict {
    padding: 14px;
    border: 1px solid var(--status-modified);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.modal-conflict p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.modal-conflict-current {
    color: var(--text-primary);
}

.modal-conflict-actions {
    display: flex;
    gap: 8px;
}

.pam-freshness {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.pam-freshness p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

.pam-freshness .modal-label {
    color: var(--text-primary);
}

.pam-freshness .ac-btn {
    flex: 0 0 auto;
}

.modal-select {
    width: 100%;
    height: 42px;
    padding: 0 36px 0 12px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line-strong);
    border-style: solid;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.modal-select:focus {
    outline: none;
    border-color: var(--brand-rosa-palermo);
    box-shadow: 0 0 0 3px rgba(var(--brand-rosa-palermo-rgb), 0.15);
}

.modal-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-field);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: 0.79rem;
    line-height: 1.45;
    resize: none;
}

.modal-textarea:focus {
    outline: none;
    border-color: var(--brand-rosa-palermo);
    box-shadow: 0 0 0 3px rgba(var(--brand-rosa-palermo-rgb), 0.15);
}

.modal-textarea::placeholder {
    color: var(--text-tertiary);
}

.modal-textarea[readonly] {
    background: var(--surface-field);
    color: var(--text-secondary);
    cursor: default;
}

.pam-medical-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
}

.pam-medical-meta {
    color: var(--text-tertiary);
    font-size: 0.68rem;
    line-height: 1.35;
}

.pam-medical-actions .ac-btn {
    flex: 0 0 auto;
}

.pam-medical-buttons {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.previous-value {
    display: flex;
    align-items: flex-start;
    min-height: 68px;
    gap: 9px;
    margin: 0;
    padding: 11px 12px;
    background: var(--surface-field);
    border-radius: var(--radius-md);
    font-size: 0.73rem;
    color: var(--text-secondary);
    border: 1px solid var(--ink-line);
}

.prev-badge {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: var(--radius-pill);
    font-family: var(--font-system);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.prev-badge-pre {
    background: var(--surface-raised);
    color: var(--text-secondary);
    border: 1px solid var(--ink-line-strong);
}

.prev-badge-post {
    background: rgba(var(--brand-rosa-palermo-rgb), 0.15);
    color: var(--brand-rosa-palermo);
    border: 1px solid rgba(var(--brand-rosa-palermo-rgb), 0.3);
}

.prev-text {
    line-height: 1.45;
}

.prev-date {
    color: var(--text-tertiary);
    font-weight: 600;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 10px;
    padding: 14px 24px 16px;
    border-top: 1px solid var(--ink-line);
    background: transparent;
}
.pam-cancel {
    flex: 0 0 auto;
    min-width: 92px;
}

.pam-cancel:hover {
    background: var(--ink-wash);
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.pos-badge {
    display: inline-block;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal {
        max-height: 100dvh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-right: 18px;
        padding-left: 18px;
    }

    .pam-field-grid,
    .pam-notes-grid,
    .pam-summary-grid,
    .pam-previous-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pam-effective-status {
        flex-wrap: wrap;
    }

    .pam-effective-label {
        flex-basis: 100%;
    }

    .pam-medical-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ═══════════════ TOAST ═══════════════ */
.toast-container {
    position: fixed;
    bottom: 60px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Above every modal/drawer layer, or a failed save reads as no response */
    z-index: 10600;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
}

.toast.success {
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    color: var(--text-primary);
}

.toast.success::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--radius-circle);
    background: var(--status-available);
}

.toast.error {
    background: #7f1d1d;
    color: #fecaca;
}

.toast.info {
    background: #034752;
    color: var(--text-primary);
}

[data-theme="light"] .toast.success {
    background: var(--surface-overlay);
    color: var(--text-primary);
    border: 1px solid var(--ink-line-strong);
}

[data-theme="light"] .toast.error {
    background: #fecaca;
    color: #7f1d1d;
    border: 1px solid #f87171;
}

[data-theme="light"] .toast.info {
    background: #ECE7E0;
    color: #034752;
    border: 1px solid #034752;
}
.toast.fade-out {
    animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ═══════════════ IPAD MODE ═══════════════ */
body.ipad-mode .player-table {
    font-size: 1rem;
}

body.ipad-mode .player-table td {
    padding: 10px 12px;
}

body.ipad-mode .player-table thead th {
    font-size: 0.78rem;
    padding: 10px 12px;
}

body.ipad-mode .av-word {
    font-size: 0.84rem;
}

/* ── 14-inch laptops: the default Squad Assessment fits without a scroll ──
   Below 1600 px the table gives back the slack it does not need: tighter cell
   gutters, a slightly smaller face, a narrower treatment track and a shorter
   sparkline. Nothing is hidden and no label is cut; larger screens are untouched. */
@media (max-width: 1600px) {
    .player-table { font-size: 0.8rem; }
    .player-table td { padding: 6px 7px; }
    .player-table thead th { padding-left: 7px; padding-right: 7px; font-size: 0.64rem; letter-spacing: 0.4px; }
    .player-table thead tr.squad-assessment-group-row th { padding: 0 7px; }
    .player-table thead tr.squad-assessment-label-row th { padding: 5px 7px 6px; }
    .player-table .at-flag { font-size: 0.68rem; letter-spacing: 0.4px; gap: 5px; }
    .player-table .acwr-ok, .player-table .acwr-low, .player-table .acwr-moderate, .player-table .acwr-high { font-size: 0.66rem; }
    .med-cell { gap: 8px; }
    .med-track { grid-template-columns: repeat(14, 4px); gap: 1px; }
    .ft-spark { width: 58px; }
    .ft-date { font-size: 10px; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
/* Narrow-viewport chrome restacking is iPad/tablet compatibility only.
   Desktop windows below the layout floor scroll horizontally instead. */
@media (max-width: 768px) {
    body.ipad-mode .app-header {
        gap: 10px;
        padding: 10px 16px;
    }

    body.ipad-mode .header-title {
        font-size: 1rem;
    }

    body.ipad-mode .sa-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    body.ipad-mode .fp-body {
        padding: 10px 12px 2px;
    }
}

/* ═══════════════ SIDEBAR NAVIGATION ═══════════════ */

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    /* Centred in a rail-width lane so it aligns with the icons below */
    width: var(--sidebar-rail-width);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
}

.sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--ink-wash);
}

.sidebar {
    position: fixed;
    top: var(--app-header-height);
    /* below header */
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--surface-chrome);
    border-right: 1px solid var(--ink-line);
    /* Above the fixed summary bar (z 50): the scope popover and the rail
       flyout labels live inside this stacking context and must not be
       painted over near the viewport bottom. Still below the header (100). */
    z-index: 60;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    /* The scope popover and rail flyout open to the right of the sidebar edge. */
    overflow: visible;
}

/* The sidebar is never hidden: it narrows to a permanent icon rail.
   The header button toggles labels, not visibility. */
.sidebar.rail {
    width: var(--sidebar-rail-width);
}

.sidebar.rail .sidebar-navigation-shell {
    overflow: visible;
}

.sidebar.rail .sidebar-label,
.sidebar.rail .ws-picker-text,
.sidebar.rail .scope-text,
.sidebar.rail .rail-workspace .scope-chevron {
    display: none;
}

.sidebar.rail .sidebar-item {
    gap: 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.rail .sidebar-nav {
    padding-left: 0;
    padding-right: 0;
}

.sidebar.rail .sidebar-footer {
    padding: 8px 4px;
}

.sidebar.rail .rail-foot-scope {
    justify-content: center;
    padding: 8px 0;
}

/* Hover label flyout for the icon-only state */
.sidebar.rail [data-rail-label] {
    position: relative;
}

.sidebar.rail [data-rail-label]:hover::after {
    content: attr(data-rail-label);
    position: absolute;
    left: calc(100% + 9px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 300;
    padding: 5px 10px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.sidebar-navigation-shell {
    flex: 1;
    min-height: 0;
    display: block;
    overflow-y: auto;
    border-bottom: 1px solid var(--ink-line);
}

.sidebar-nav {
    min-height: 0;
    /* Top offset = the table's header band less one item, so the active
       item's bottom edge lands exactly on the rule under the column headers.
       Derived from the two tokens, so it survives a change to either. */
    padding: calc(var(--table-header-band) - var(--rail-item-height)) 0 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: visible;
}

.sidebar-nav.workspace-enter .sidebar-item {
    animation: sidebar-subsections-in 0.22s ease both;
}

@keyframes sidebar-subsections-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: var(--rail-item-height);
    padding: 7px 9px 7px 10px;
    border-radius: 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.sidebar-item:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.sidebar-item.active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.2s, opacity 0.2s;
}

.sidebar-icon svg {
    width: 17px;
    height: 17px;
    opacity: 0.82;
}

.sidebar-item:hover .sidebar-icon {
    color: var(--text-primary);
}

.sidebar-item:hover .sidebar-icon svg {
    opacity: 1;
}

.sidebar-item.active .sidebar-icon {
    color: var(--accent);
}

.sidebar-item.active .sidebar-icon svg {
    opacity: 1;
}

.sidebar-label {
    font-family: var(--font-system);
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--ink-line);
    text-align: center;
}

/* ── Workspace picker: one 62px zone at the top of the sidebar ──
   Its bottom border is the seam that module toolbars align to. */
.rail-workspace {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    height: var(--module-toolbar-height);
    box-sizing: border-box;
    padding: 0 8px;
    border-bottom: 1px solid var(--ink-line);
    flex: 0 0 auto;
}

.ws-picker {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 6px;
    background: transparent;
    border: 0;
    color: var(--accent);
    cursor: pointer;
    text-align: left;
}

.ws-picker:hover {
    background: var(--ink-wash);
}

.ws-picker-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-family: var(--font-system);
}

.ws-picker-kicker {
    color: var(--text-tertiary);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ws-picker-name {
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar.rail .rail-workspace {
    padding: 0;
    justify-content: center;
}

.sidebar.rail .ws-picker {
    flex: 0 0 auto;
    justify-content: center;
    padding: 0;
}

/* Workspace menu replaces the three permanent chip rows */
.ws-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 6px;
    z-index: 220;
    display: none;
    min-width: 236px;
    padding: 8px 0;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.wsp.open .ws-menu {
    display: block;
}

.sidebar.rail .ws-menu {
    left: calc(100% + 8px);
    top: 8px;
}

.ws-menu-title {
    padding: 0 14px 6px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

/* ═══════════════ PLATFORM SWITCHER ═══════════════
   The header wordmark is the trigger for the club's staff platforms (this
   one and, once live, the Operations Platform). It reuses the workspace
   menu rows: each row names a place, the current one is marked, an
   unavailable one is a quiet tertiary row with its status as a word. */
.platform-menu {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.platform-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
    padding: 0 6px;
    margin-left: -6px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.platform-trigger:hover,
.platform-menu.open .platform-trigger {
    background: var(--ink-wash);
}

.platform-trigger .header-title {
    margin: 0;
}

.platform-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}

.platform-menu.open .platform-chevron {
    transform: rotate(180deg);
}

.platform-panel {
    left: 0;
    top: calc(100% + 8px);
    min-width: 272px;
    z-index: 2000;
}

.platform-menu.open .platform-panel {
    display: block;
}

.ws-menu-item[disabled] {
    color: var(--text-tertiary);
    cursor: default;
}

.ws-menu-item[disabled]:hover {
    background: transparent;
    color: var(--text-tertiary);
}

.platform-status {
    margin-left: auto;
    padding-left: 12px;
    color: var(--text-tertiary);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.workspace-mark {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workspace-mark svg {
    width: 18px;
    height: 18px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-version {
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* ── Scope control: team + season at the foot of the sidebar ──
   The active team and season are global state, so they stay visible and one
   click away in every sidebar state instead of hiding inside two selects. */
.scope {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Team initials in a 36px round button that opens the scope popover */
.scope-chip {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: rgba(var(--accent-rgb), 0.115);
    color: var(--accent);
    font-family: var(--font-system);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
}

.scope-chip:hover {
    border-color: var(--accent);
}

.scope-chip[aria-expanded="true"] {
    border-color: var(--accent);
}

/* Full team + season + lock reason, shown when sidebar labels are on */
.scope-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    font-family: var(--font-system);
}

.scope-text .scope-text-team {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scope-text .scope-text-season {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 600;
}

.scope-chevron {
    display: flex;
    color: var(--text-tertiary);
}

/* Two-column popover: teams grouped, seasons beside them */
.scope-popover {
    position: absolute;
    z-index: 220;
    display: none;
    grid-template-columns: 210px 156px;
    min-width: 366px;
    max-height: 70vh;
    overflow: auto;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.scope.open .scope-popover {
    display: grid;
}

.scope-col {
    padding: 10px 0 12px;
}

.scope-col+.scope-col {
    border-left: 1px solid var(--ink-line);
}

.scope-col-title {
    padding: 0 14px 7px;
    color: var(--text-tertiary);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.scope-group {
    padding: 9px 14px 3px;
    color: var(--text-tertiary);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* Season lock stated as a sentence, replacing the disabled select's tooltip */
.scope-lock {
    margin: 9px 14px 0;
    padding-top: 9px;
    border-top: 1px solid var(--ink-line);
    color: var(--text-tertiary);
    font-size: 0.68rem;
    line-height: 1.4;
}

/* Scope at the foot of the sidebar, above the version footer */
.rail-foot-scope {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 8px;
    border-top: 1px solid var(--ink-line);
    flex: 0 0 auto;
}

.rail-foot-scope .scope {
    position: static;
}

/* The popover opens up and to the right of the sidebar edge */
.rail-foot-scope .scope-popover {
    top: auto;
    bottom: 8px;
    left: calc(100% + 8px);
}

/* Single-team deployments: same words, no control */
.scope-static {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary);
    font-family: var(--font-system);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

body.single-team .scope-chip {
    display: none;
}

body:not(.single-team) .rail-foot-scope .scope-static {
    display: none;
}

/* Content area follows the sidebar width: labelled column or icon rail */
.app-content {
    transition: margin-left 0.25s ease;
    margin-left: var(--sidebar-width);
}

.sidebar.rail~.app-content {
    margin-left: var(--sidebar-rail-width);
}

/* ═══════════════ LEADERBOARD MODULE ═══════════════ */

.leaderboard-module {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--app-header-height));
    padding: 0;
}

/* lb-toolbar specific overrides (shared rules in the block below) */
.lb-toolbar {
    justify-content: space-between;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Shared page title style for all dashboard headers */
.lb-page-title,
.tp-page-title,
.ta-toolbar-title,
.ir-toolbar-title,
.imp-page-title,
.ai-page-title,
.st-title,
.rb-page-title,
.cm-title,
.rtp-toolbar-title,
.rs-page-title,
.hp-page-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: normal;
    margin: 0;
}

/* Shared toolbar layout for all dashboard headers.
   Height matches the sidebar's workspace zone so the border seams align. */
.sa-toolbar,
.lb-toolbar,
.tp-toolbar,
.ta-toolbar,
.ir-toolbar,
.imp-toolbar,
.ai-toolbar,
.ch-toolbar,
.st-toolbar,
.rb-toolbar,
.cm-toolbar,
.rtp-toolbar,
.rs-toolbar,
.rp-toolbar,
.hp-toolbar {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    gap: 12px;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--ink-line);
    margin-bottom: 16px;
    box-sizing: border-box;
    height: var(--module-toolbar-height);
    flex-shrink: 0;
}

.lb-toolbar-left,
.tp-toolbar-left,
.ta-toolbar-left,
.ir-toolbar-left,
.imp-toolbar-left,
.ai-toolbar-left,
.st-toolbar-left,
.rb-toolbar-left,
.cm-toolbar-left,
.rtp-toolbar-left,
.rs-toolbar-left,
.lb-toolbar-center,
.imp-toolbar-center,
.ai-toolbar-center,
.rtp-toolbar-center,
.lb-toolbar-right,
.tp-toolbar-right,
.ta-toolbar-right,
.ir-toolbar-right,
.imp-toolbar-right,
.ai-toolbar-right,
.st-toolbar-right,
.rb-toolbar-right,
.cm-toolbar-right,
.rtp-toolbar-right,
.rs-toolbar-right,
.hp-toolbar-left,
.hp-toolbar-center,
.hp-toolbar-right,
.rp-toolbar-left,
.rp-toolbar-right,
.sa-toolbar-left,
.sa-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lb-toolbar {
    flex-wrap: nowrap;
    overflow: hidden;
}

.lb-toolbar-center,
.imp-toolbar-center,
.ai-toolbar-center,
.rtp-toolbar-center {
    flex: 1 1 auto;
    justify-content: center;
}

.lb-toolbar-left {
    flex: 0 1 auto;
    overflow: hidden;
}

.lb-toolbar-left .hub-page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-toolbar-center {
    flex: 1 1 auto;
    overflow: hidden;
}

.lb-toolbar-right {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-width: max-content;
}

.lb-toolbar-right,
.tp-toolbar-right,
.ta-toolbar-right,
.ir-toolbar-right,
.imp-toolbar-right,
.ai-toolbar-right,
.st-toolbar-right,
.rb-toolbar-right,
.cm-toolbar-right,
.rtp-toolbar-right,
.rs-toolbar-right {
    justify-content: flex-end;
}

.tp-toolbar-right,
.ta-toolbar-right,
.ir-toolbar-right,
.st-toolbar-right,
.rb-toolbar-right,
.cm-toolbar-right,
.rtp-toolbar-right,
.rs-toolbar-right {
    margin-left: auto;
}
.lb-select {
    flex: 0 0 auto;
    min-width: 0;
    border-radius: var(--radius-md);
}

.lb-select:focus {
    outline: none;
    border-color: var(--accent);
}

.lb-date-badge {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.5px;
}

.lb-metric-badge {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 3px 8px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-pill);
}

/* ── Leaderboard body ── */
.lb-body {
    display: flex;
    flex: 1;
    gap: 20px;
    padding: 16px 24px;
    overflow: hidden;
}

.lb-rankings {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 3px;
}/* ── Top 3 hero rows ── */
/* ── Divider ── */
/* ── Remaining rows (4+) ── */
/* ── Summary panel ── */


/* ── Loading and empty ── */
.lb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.875rem;
}

.lb-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 0.1875rem solid var(--ink-line-strong);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.lb-loading-text {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.lb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}/* ── Bar animation ── */


/* ── Leaderboard list ──
   One list, monochrome: the top three on taller rows in larger type with a
   quiet wash sized to the value's share of the squad best; rows four onwards
   are text and a hairline. Chosen 2026-08-26. */
.lb-list {
    --lb-cols: 48px minmax(0, 1fr) 72px 150px 96px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}
.lb-list-head,
.lb-list-row {
    display: grid;
    grid-template-columns: var(--lb-cols);
    align-items: center;
    padding: 0 12px;
    flex: 0 0 auto;
}
.lb-list-head {
    height: 32px;
    border-bottom: 1px solid var(--ink-line);
    color: var(--text-tertiary);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.lb-list-row {
    position: relative;
    height: 40px;
    border-bottom: 1px solid var(--ink-wash);
}
.lb-list-row > * {
    position: relative;
    min-width: 0;
}
.lb-list-row.is-top {
    height: 54px;
}
.lb-list-row.is-top::before {
    content: '';
    position: absolute;
    inset: 3px auto 3px 0;
    width: var(--lb-bar-width, 0%);
    border-radius: var(--radius-sm);
    background: var(--ink-wash);
}
.lb-list-break {
    flex: 0 0 auto;
    height: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--ink-line);
}
.lb-list .num {
    text-align: right;
}
.lb-rank {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.lb-name {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-pos {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.lb-value {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lb-value span {
    margin-left: 4px;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    font-weight: 500;
}
.lb-date {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.lb-date-muted {
    color: var(--text-tertiary);
}
.lb-list-row.is-top .lb-rank {
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}
.lb-list-row.is-top .lb-name {
    font-size: 1.125rem;
}
.lb-list-row.is-top .lb-value {
    font-size: 1.25rem;
}
/* ── Leaderboard redesign ── */
#lb-source-select {
    flex: 0 0 7rem;
    min-width: 7rem;
}

#lb-test-select {
    flex: 1 1 13rem;
    min-width: 10rem;
    max-width: 18rem;
}

.lb-toolbar-right {
    color: var(--text-secondary);
    font-size: 0.78125rem;
    white-space: nowrap;
    gap: 0.75rem;
}

.lb-toolbar-stat strong {
    color: var(--text-primary);
    font-weight: 600;
}

.lb-toolbar-stat {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 73.75rem) {
    .lb-toolbar {
        gap: 0.5rem;
    }

    .lb-toolbar-right {
        gap: 0.5rem;
        font-size: 0.71875rem;
    }

    #lb-test-select {
        max-width: 15rem;
    }
}

.lb-body {
    display: flex;
    flex: 1;
    margin: 0 1.5rem 1.5rem;
    padding: 0;
    overflow: auto;
}

.lb-rankings {
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.lb-loading {
    min-height: 20rem;
    gap: 0.875rem;
}

.lb-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border-width: 0.1875rem;
}

.lb-empty {
    min-height: 20rem;
    flex: initial;
}

/* ═══════════════════════════════════════════════════════════════
   Data Sync Modal
   ═══════════════════════════════════════════════════════════════ */
.data-freshness-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 24px 0;
    padding: 12px 14px;
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-system);
}

.data-freshness-notice-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.data-freshness-notice-copy strong {
    font-size: 0.8125rem;
    font-weight: 700;
}

.data-freshness-notice-copy span {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.data-freshness-reload {
    flex: 0 0 auto;
    padding: 7px 11px;
    background: transparent;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    font: 600 0.75rem/1 var(--font-system);
    cursor: pointer;
}

.data-freshness-reload:hover {
    background: var(--ink-wash);
}

.data-freshness-reload:disabled {
    background: var(--surface-chrome);
    border-color: var(--ink-line);
    color: var(--text-disabled);
    cursor: wait;
}

.sync-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.sync-modal-overlay.open { display: flex; }

.sync-modal {
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-lg);
    width: min(680px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
}
.sync-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ink-line);
}
.sync-modal-header h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}.sync-modal-body { padding: 18px 24px 24px; }

.sync-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--ink-line);
}
.sync-item:last-child { border-bottom: none; }

.sync-item-label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.sync-item-actions { display: flex; gap: 6px; }
@keyframes sync-spin {
    to { transform: rotate(360deg); }
}
.sync-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--ink-line-strong);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: sync-spin 0.8s linear infinite;
}
.sync-status {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.sync-status.success {
    color: var(--success);
}
.sync-status.running,
.sync-status.pending {
    color: var(--status-modified);
}
.sync-status.error {
    color: var(--status-injured);
}

/* ── Sync sections ── */
.sync-section { margin-bottom: 0; }
.sync-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 4px;
}
.sync-divider span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.sync-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-line);
}
.sync-item-left {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
}
.sync-item-copy {
    display: grid;
    gap: 4px;
}
.sync-item-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sync-maintenance-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-tertiary);
    margin: 0 0 8px;
}
.sync-advanced-panel {
    border: 1px solid var(--ink-line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-field) 82%, transparent);
    overflow: hidden;
}

.sync-advanced-panel[open] {
    background: var(--surface-field);
}

.sync-advanced-toggle {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    cursor: pointer;
}

.sync-advanced-toggle::-webkit-details-marker {
    display: none;
}

.sync-advanced-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sync-advanced-subtitle {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.sync-advanced-body {
    display: grid;
    gap: 8px;
    padding: 0 14px 14px;
    border-top: 1px solid var(--ink-line);
}

.sync-maintenance-item .sync-item-left {
    align-items: flex-start;
}

.sync-workflow {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.sync-workflow-card {
    padding: 12px 14px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-field) 82%, transparent);
}

.sync-workflow-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.sync-workflow-copy {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.sync-step-card {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-field);
}

.sync-step-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
}

.sync-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sync-step-headings {
    display: grid;
    gap: 4px;
}

.sync-step-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sync-step-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.sync-step-footer {
    display: grid;
    gap: 8px;
}
.sync-step-meta {
    display: grid;
    gap: 4px;
}

.sync-step-note,
.sync-step-next,
.sync-step-status {
    font-size: 11px;
    line-height: 1.4;
}

.sync-step-note {
    color: var(--text-tertiary);
}

.sync-step-next {
    color: var(--status-modified);
}

.sync-step-status {
    color: var(--text-secondary);
}

.sync-step-status.success {
    color: var(--success);
}

.sync-step-status.running,
.sync-step-status.pending {
    color: var(--status-modified);
}

.sync-step-status.error {
    color: var(--status-injured);
}

.sync-item-with-panel {
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 10px 14px;
}

.sync-item-with-panel .sync-item-left {
    flex: 1 1 260px;
}

.sync-workflow-panel {
    flex: 1 0 100%;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
}

.sync-adi-panel {
    overflow: hidden;
    font-family: var(--font-body);
}

.sync-adi-step {
    padding: 12px 14px;
}

.sync-adi-step + .sync-adi-step {
    border-top: 1px solid var(--ink-line);
}

.sync-adi-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sync-adi-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
}

.sync-adi-step-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sync-adi-field + .sync-adi-field {
    margin-top: 10px;
}

.sync-adi-control-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

.sync-adi-control-row > .sync-field,
.sync-adi-control-row > .hub-date-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.sync-adi-session-actions {
    display: flex;
    flex: none;
    gap: 6px;
}
.sync-field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 11px;
}

.sync-field,
.sync-file {
    width: 100%;
    height: 34px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    background-color: var(--surface-field);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 0 10px;
}

.sync-field:focus {
    border-color: var(--accent);
    outline: none;
}

.sync-adi-control-row .hub-date-trigger {
    height: 34px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 12px;
}

.sync-adi-upload {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.sync-adi-signal-controls {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 136px;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.sync-adi-manual-import {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 11px;
}

.sync-adi-manual-import summary {
    width: fit-content;
    cursor: pointer;
    user-select: none;
}

.sync-adi-manual-import[open] summary {
    margin-bottom: 8px;
}

.sync-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sync-file-trigger {
    white-space: nowrap;
}

.sync-file-name {
    height: 34px;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px dashed var(--ink-line);
    border-radius: var(--radius-md);
    background: var(--surface-field);
    color: var(--text-tertiary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sync-adi-status-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--status-modified) 22%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--status-modified) 8%, transparent);
    color: var(--status-modified);
    font-size: 11px;
    line-height: 1.4;
}

.sync-adi-status-banner .sync-spinner {
    flex: none;
    width: 15px;
    height: 15px;
    border-color: color-mix(in srgb, var(--status-modified) 30%, transparent);
    border-top-color: var(--status-modified);
}

.sync-workflow-findings {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.sync-download-link {
    width: fit-content;
}

.sync-adi-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 14px;
    border-top: 1px solid var(--ink-line);
    background: color-mix(in srgb, var(--text-primary) 1.5%, transparent);
}
.sync-adi-panel-error {
    margin: 0 14px 12px;
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .sync-modal {
        max-height: calc(100vh - 24px);
    }

    .sync-adi-control-row,
    .sync-adi-upload,
    .sync-adi-signal-controls {
        grid-template-columns: 1fr;
    }

    .sync-adi-control-row {
        flex-direction: column;
    }

    .sync-adi-session-actions {
        width: 100%;
    }

}

/* ── Sync result popup ── */
.sync-result-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 10001;
    justify-content: center;
    align-items: center;
}
.sync-result-overlay.open { display: flex; }
.sync-result-box {
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    padding: 28px 32px 20px;
    text-align: center;
    width: min(560px, calc(100vw - 32px));
    min-width: 320px;
    max-width: calc(100vw - 32px);
}
.sync-result-icon { font-size: 32px; margin-bottom: 8px; }
.sync-result-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}
.sync-result-msg {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-line;
}

.sync-confirm-box { text-align: left; }
.sync-confirm-box .sync-result-title { font-size: 15px; }
.sync-confirm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--text-secondary);
}
.sync-confirm-field[hidden] { display: none; }
.sync-confirm-field .hub-input { width: 100%; box-sizing: border-box; }
.sync-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   Shared Component Classes  (hub-* prefix)
   ---------------------------------------------------------------
   Used across all modules. Per-page CSS should compose on top of
   these with module-prefixed classes for overrides only.
   ═══════════════════════════════════════════════════════════════ */

/* ── Card ── */
.hub-card {
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    padding: 20px 24px;
}

/* ── Player Card (grid selection) ── */
.hub-player-card {
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    position: relative;
}
.hub-player-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.hub-player-card.active,
.hub-player-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* ── Chart Card ── */
.hub-chart-card {
    background: var(--surface-raised);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: border-color 0.2s;
}
.hub-chart-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}

/* ── Chart Title ── */
.hub-chart-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

/* ── Page Title (inside toolbar) ── */
.hub-page-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text-primary);
    white-space: nowrap;
    margin: 0;
}

/* ── Toolbar meta: muted read-only context beside the page title ──
   One vocabulary for one value: date, day badge, or team/season echo.
   Space alone separates the values — never a middle dot, bullet, slash or
   pipe. Never a control, never a second source. */
.hub-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Analysis sub-navigation ── */
/* ── Select (toolbar) ── */
.hub-select {
    background: var(--surface-field);
    color: var(--text-primary);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    min-height: 36px;
    padding: 7px 30px 7px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23888'%3E%3Cpath d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}
.hub-select:hover {
    border-color: var(--text-tertiary);
}
.hub-select:focus {
    outline: none;
    border-color: var(--accent);
}
.hub-select:disabled {
    background-color: var(--ink-zebra);
    color: var(--text-disabled);
    border-color: var(--ink-line);
    cursor: not-allowed;
}

/* ── Select (compact, inside cards) ── */
.hub-select-sm {
    background: var(--surface-raised);
    color: var(--text-primary);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 6px 28px 6px 10px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='%23888'%3E%3Cpath d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}
.hub-select-sm:hover {
    border-color: var(--text-tertiary);
}
.hub-select-sm:focus {
    outline: none;
    border-color: var(--accent);
}
.hub-select-sm:disabled {
    background-color: var(--ink-zebra);
    color: var(--text-disabled);
    border-color: var(--ink-line);
    cursor: not-allowed;
}

/* ── Text / time / number input ──
   The input twin of .hub-select: the same well, border and type scale,
   without the select's chevron and its 30px of right padding. Use it on
   every non-select input; a select skin on a text or time input grows a
   fake dropdown arrow and starves the field. Date/time pickers copy the
   class onto their trigger, so an enhanced control keeps the same shape. */
.hub-input {
    background-color: var(--surface-field);
    color: var(--text-primary);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    min-height: 36px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.hub-input::placeholder {
    color: var(--text-tertiary);
}
.hub-input:hover {
    border-color: var(--text-tertiary);
}
.hub-input:focus {
    outline: none;
    border-color: var(--accent);
}
.hub-input:disabled {
    background: var(--ink-zebra);
    color: var(--text-disabled);
    border-color: var(--ink-line);
    cursor: not-allowed;
}

/* ── Table ── */
.hub-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.85rem;
}
.hub-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface-raised);
    padding: 8px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 2px solid var(--ink-line-strong);
    white-space: nowrap;
}
.hub-table thead th.num {
    text-align: right;
}
.hub-table tbody tr {
    transition: background 0.15s;
}
.hub-table tbody tr:nth-child(even) {
    background: transparent;
}
.hub-table tbody tr:nth-child(odd) {
    background: var(--ink-zebra);
}
.hub-table tbody tr:hover {
    background: var(--ink-wash);
}
.hub-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ink-line);
    white-space: nowrap;
    vertical-align: middle;
}
.hub-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Table Compact (for dense data like audit logs, drill lists) ── */
.hub-table-compact {
    font-size: 0.80rem;
}
.hub-table-compact thead th {
    padding: 6px 8px;
    font-size: 0.65rem;
}
.hub-table-compact td {
    padding: 4px 8px;
}

/* ── Table Scrollable wrapper ── */
.hub-table-scroll {
    max-height: 500px;
    overflow-y: auto;
    border-radius: var(--radius-sm);
}/* Leaderboard table overrides sit after hub-table so the shared table cascade stays intact elsewhere. */


/* ── iPad Mode — extend to all hub tables ── */
body.ipad-mode .hub-table {
    font-size: 1rem;
}
body.ipad-mode .hub-table td {
    padding: 10px 12px;
}
body.ipad-mode .hub-table thead th {
    font-size: 0.78rem;
    padding: 10px 12px;
}

/* ── Report Mode — hides chrome for dashboard focus ── */
body.report-mode .app-header { display: none !important; }
body.report-mode .sidebar { display: none !important; }
body.report-mode .app-content { margin-left: 0 !important; padding-top: 12px !important; }
body.report-mode .ta-toolbar { display: none !important; }
body.report-mode .ir-toolbar { display: none !important; }
body.report-mode .sa-toolbar { display: none !important; }
body.report-mode .ta-sr-kpi-row { margin-bottom: 12px; }
body.report-mode .ta-sr-controls { margin-bottom: 6px; }
body.report-mode .ta-sr-legend-row { margin-bottom: 2px; }
body.report-mode .ta-sr-table-wrap { margin-bottom: 0; }
body.report-mode .ta-page > *:not(.ta-toolbar) { margin-left: 16px; margin-right: 16px; }
body.report-mode .ta-page { padding-bottom: 0 !important; }
body.report-mode .ta-gk-cards { min-height: auto; padding-bottom: 0 !important; }

/* The element selector matters: action.css loads after this sheet and its
   .ac-btn rule sets position and display at the same specificity, which
   once dropped this anchor into normal flow at the page foot. */
button.rpt-exit-anchor {
    display: none;
    position: fixed;
    top: 6px;
    right: 8px;
    z-index: 9999;
}
button.rpt-exit-anchor:hover { opacity: 1; }
body.report-mode .rpt-exit-anchor { display: flex; }


/* nav.css — Navigation & Selection System.
   DELTA ONLY: every rule here is new. Nothing from styles.css is repeated.

   Four idioms replace eleven shipped selector classes:
     .nv-tab         Module Tabs    — which screen of a module (level 1)
     .nv-switch-btn  View Switcher  — how the same data is drawn (level 2)
     .nv-seg-btn     Filter Segment — which data is fetched (level 3)
     .nv-rail-item   Section Rail   — persistent vertical destinations (level 0)

   Decisions taken: accent rail on the active module tab (DESIGN_SYSTEM.md §5
   exception, see README); Filters becomes a ghost disclosure button; module tabs
   are 13px sentence case.

   NO NEW TOKENS. Every value below is an existing var() or a geometry integer.
   Rules:
     - No idiom has both a container and a border.
     - Selection is a step on the ink ladder: transparent / --ink-wash /
       --ink-wash-strong, text --text-secondary -> --text-primary.
     - font-weight never changes between states, so labels never reflow.
     - --accent appears only as: the active module tab rail, the Section Rail
       active state, and every :focus-visible ring. Nowhere else.

   The sweep is complete: selection state lives on aria-selected /
   aria-pressed / aria-current="page", never on a .active class. The
   retired-class list is in DESIGN_SYSTEM.md §4a.
   ------------------------------------------------------------------------- */


/* ═══════════ §1 MODULE TABS — which screen of a module ═══════════
   Seam-anchored: the tabs stretch to the full 62px toolbar height so the active
   2px rail lands exactly on the toolbar's 1px bottom border. The rail is a
   per-item active mark scoped to one tab's width — the horizontal twin of the
   sidebar's 3px inset rail — not a chrome seam. Do not give the tab row its own
   border-bottom; the toolbar seam is the line. */

.nv-tabs {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.nv-tabs::-webkit-scrollbar {
    display: none;
}

/* Set by nav-overflow.js when the row cannot fit its lane. */
.nv-tabs.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}

.nv-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color 0.16s, background 0.16s, box-shadow 0.16s;
}

.nv-tab:hover {
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--ink-line-strong);
}

.nv-tab[aria-selected="true"] {
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* Washes never stack: active + hover keeps the accent rail and adds one wash. */
.nv-tab[aria-selected="true"]:hover {
    background: var(--ink-wash);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.nv-tab:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -3px;
    border-radius: var(--radius-sm);
}

.nv-tab:disabled {
    background: transparent;
    color: var(--text-disabled);
    box-shadow: none;
    cursor: not-allowed;
}

/* Module Tabs inside the shared 62px toolbar (padding 14px 24px): cancel the
   vertical padding so the tabs stretch the full height and the active rail
   lands exactly on the toolbar's 1px bottom seam. */
.sa-toolbar > .nv-tabs,
.lb-toolbar > .nv-tabs,
.tp-toolbar > .nv-tabs,
.ta-toolbar > .nv-tabs,
.ir-toolbar > .nv-tabs,
.imp-toolbar > .nv-tabs,
.ai-toolbar > .nv-tabs,
.st-toolbar > .nv-tabs,
.rb-toolbar > .nv-tabs,
.cm-toolbar > .nv-tabs,
.rtp-toolbar > .nv-tabs,
.rs-toolbar > .nv-tabs,
.hp-toolbar > .nv-tabs {
    margin-top: -14px;
    margin-bottom: -14px;
}

/* A Module Tab row with no toolbar to sit in (Recovery Profiles/Schedule in
   the Readiness workspace, the Individual Report tabs under the player
   banner) owns its own hairline seam at the shared gutter. */
.nv-tabs-bar {
    height: 43px;
    padding: 0 24px;
    border-bottom: 1px solid var(--ink-line);
    margin-bottom: 16px;
}


/* ═══════════ §2 VIEW SWITCHER — how the same data is drawn ═══════════
   Floats directly on its plane: no container, no border, no accent. Works at
   two items or six, with or without icons. This is also the analysis sub-nav. */

.nv-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.nv-switch::-webkit-scrollbar {
    display: none;
}

.nv-switch.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}

.nv-switch-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s, background 0.16s;
}

.nv-switch-btn:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.nv-switch-btn[aria-selected="true"],
.nv-switch-btn[aria-pressed="true"] {
    background: var(--ink-wash-strong);
    color: var(--text-primary);
}

.nv-switch-btn[aria-selected="true"]:hover,
.nv-switch-btn[aria-pressed="true"]:hover {
    background: var(--ink-wash-strong);
}

.nv-switch-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.nv-switch-btn:disabled {
    background: transparent;
    color: var(--text-disabled);
    cursor: not-allowed;
}

.nv-switch-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nv-switch-btn.nv-icon {
    width: 28px;
    padding: 0;
    justify-content: center;
}


/* ═══════════ §3 FILTER SEGMENT — which data is fetched ═══════════
   This is an input, so it obeys the ladder's input rule: a sunken
   --surface-field well on whatever plane hosts it, INCLUDING inside a card or a
   modal. The well is the container, so it carries no border — the active chip
   reads as a thumb raised in a groove. */

.nv-seg-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nv-seg-label {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nv-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-field);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.nv-seg::-webkit-scrollbar {
    display: none;
}

.nv-seg.is-overflowing {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}

.nv-seg-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color 0.16s, background 0.16s;
}

.nv-seg-btn:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.nv-seg-btn[aria-selected="true"] {
    background: var(--ink-wash-strong);
    color: var(--text-primary);
}

.nv-seg-btn[aria-selected="true"]:hover {
    background: var(--ink-wash-strong);
}

/* Inset ring: a 2px outset would collide with the neighbouring chip. */
.nv-seg-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.nv-seg-btn:disabled {
    background: transparent;
    color: var(--text-disabled);
    cursor: not-allowed;
}


/* ═══════════ §4 SECTION RAIL — persistent vertical destinations ═══════════
   The design system's one documented inset-rail exception. Behaviour is
   unchanged from the shipped .sidebar-item; only the fill is retokenised from
   the literal rgba(var(--accent-rgb),0.115) to --accent-soft, and the
   active:hover special case is dropped so washes cannot stack. */

.nv-rail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nv-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--rail-item-height);
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 3px 0 0 transparent;
    transition: color 0.16s, background 0.16s;
}

.nv-rail-item:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.nv-rail-item[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.nv-rail-item[aria-current="page"]:hover {
    background: var(--accent-soft);
}

.nv-rail-item:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -2px;
}

.nv-rail-item:disabled {
    background: transparent;
    color: var(--text-disabled);
    cursor: not-allowed;
}

.nv-rail-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Section names rather than module names: Settings sub-nav. */
.nv-rail--plain .nv-rail-item {
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
}


/* ═══════════ §5 SHARED COUNT ═══════════ */

.nv-count {
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nv-tab .nv-count,
.nv-switch-btn .nv-count {
    margin-left: 7px;
}

.nv-tab[aria-selected="true"] .nv-count {
    color: var(--text-secondary);
}

/* In a rail the count sits hard right. */
.nv-rail-item .nv-count {
    margin-left: auto;
}


/* ═══════════ §6 FILTERS DISCLOSURE BUTTON ═══════════
   Decision 2: the old Filters toggle left the selector system. A hairline plus a
   chevron says "this opens a panel"; a fill says "this is on". Mount unchanged
   — .filter-header stays the anchor and .filter-bar stays the panel. */

.nv-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.75rem;
    font-weight: 600;
    /* 1.35, not 1: the label spans clip their overflow for the ellipsis,
       and a one-em line box cuts descenders ("g", "y") off. The button
       height is fixed, so the taller line box changes nothing else. */
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s, background 0.16s;
}

.nv-disclosure:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

/* Open is a step above hover, so a disclosure holding an open panel reads as
   held down rather than merely pointed at (2026-08-25). */
.nv-disclosure[aria-expanded="true"] {
    background: var(--ink-wash-strong);
    color: var(--text-primary);
}

.nv-disclosure:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.nv-disclosure svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nv-disclosure .nv-chev {
    color: var(--text-tertiary);
    transition: transform 0.16s;
}

.nv-disclosure[aria-expanded="true"] .nv-chev {
    transform: rotate(180deg);
}

/* Active filter count. Neutral, not accent: it is a quantity, not a state. */
.nv-disclosure-count[hidden] {
    display: none;
}

.nv-disclosure-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--ink-wash-strong);
    color: var(--text-primary);
    font-size: 0.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════ CHROME MENUS ═══════════════
   The app-header user menu, the workspace picker and the team-scope list are
   navigation menus, not action menus: each row names a place or a scope, and
   the selected one is marked. §4b's .ac-menu stays for menus that hold
   actions (the Session Planner builder menu, the roster prefill list, the
   Settings drawer). Risto kept these three as they were, 2026-08-13. */
.user-menu-item {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.user-menu-item.danger:hover {
    color: var(--danger);
}

.ws-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.ws-menu-item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ws-menu-item .ws-menu-count {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.66;
}

.ws-menu-item:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.ws-menu-item.selected {
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
}

.scope-option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: 0;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.scope-option::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: var(--radius-circle);
    background: transparent;
}

.scope-option:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}

.scope-option.selected {
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
    font-weight: 600;
}

.scope-option.selected::before {
    background: currentColor;
}

.scope-option:disabled {
    color: var(--text-disabled);
    cursor: default;
}

.scope-option:disabled:hover {
    background: none;
    color: var(--text-disabled);
}

.scope-option.selected:disabled {
    color: var(--text-secondary);
    background: var(--ink-wash);
}

/* ── Pick list (§4b, Picking a value) ──
   Pick-some-of-N behind one control: a hub-select-shaped trigger that
   names what is chosen, opening a checklist of ac-cbx rows on the chrome
   plane. components/pick-list.js owns open, close, search and the events;
   the host owns the data. */
.hub-pick {
    position: relative;
    display: block;
    min-width: 0;
}

.hub-pick-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 32px;
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.hub-pick-trigger:hover { border-color: var(--text-tertiary); }
.hub-pick.is-open .hub-pick-trigger,
.hub-pick-trigger:focus-visible { outline: none; border-color: var(--accent); }
.hub-pick-trigger:disabled {
    background: var(--ink-zebra);
    color: var(--text-disabled);
    border-color: var(--ink-line);
    cursor: not-allowed;
}

.hub-pick-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-pick-empty { color: var(--text-tertiary); font-weight: 500; }

.hub-pick-more {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.hub-pick-chev {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--text-tertiary);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hub-pick-pop {
    /* On the fixed layer with the date and time popovers, above every
       modal (app modals top out at 10001); pick-list.js sets the box. */
    position: fixed;
    z-index: 10500;
    padding: 8px;
    box-sizing: border-box;
    background: var(--surface-chrome);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
}

.hub-pick-search {
    width: 100%;
    min-height: 30px;
    margin-bottom: 6px;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
}

.hub-pick-list {
    max-height: 280px;
    overflow-y: auto;
}

.hub-pick-row { min-height: 30px; }
.hub-pick-row:hover { background: var(--ink-wash); }
.hub-pick-row.is-off { color: var(--text-disabled); }
.hub-pick-lbl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hub-pick-lbl small {
    margin-left: auto;
    color: var(--text-tertiary);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hub-pick-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 8px 6px 2px;
    border-top: 1px solid var(--ink-line);
    color: var(--text-tertiary);
    font-size: 0.7rem;
}