/* 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 Football Intelligence Platform Design System
   Brand Palette: #FCBDE5 #E87DC4 #000000 #FFFFFF
   Functional Palette: #034752 #4FC9DA plus semantic status colours
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
    --brand-nero: #000000;
    --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-2: 2px;
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-8: 8px;
    --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;
    --status-permission: #94a3b8;
    --status-absent: #94a3b8;

    /* Z-score direction: filled Rosa Ton for HIGH, Nero + Rosa Palermo for LOW. */
    --zscore-high-bg: var(--brand-rosa-ton);
    --zscore-high-color: var(--brand-rosa-ton);
    --zscore-low-bg: var(--brand-nero);
    --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);

    --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"] {
    --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-bg: var(--brand-rosa-ton);
    --zscore-high-color: var(--brand-rosa-ton);
    --zscore-low-bg: var(--brand-nero);
    --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;
    --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;
}

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);
}

.btn-entra {
    background: var(--surface-field);
    color: var(--text-primary);
    border-color: var(--ink-line-strong);
    text-decoration: none;
}

.btn-entra:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

.entra-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
}

.entra-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* ═══════════════ BUTTONS ═══════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-primary:disabled {
    opacity: 1;
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.18);
    color: rgba(var(--accent-rgb), 0.50);
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--ink-line-strong);
}

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

.btn-ghost:disabled,
.btn:disabled {
    opacity: 1;
    background: var(--ink-zebra);
    border-color: var(--ink-line);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* Squad Assessment toolbar actions. Re-scoped from the old .context-right
   lane; the wellness svg has no width/height attributes, so it collapses to
   0x0 outside this scope. Declaration order preserved so .btn-ghost padding
   cannot win over the 32px icon square. */
.sa-toolbar-right .btn-ghost {
    padding: 6px 14px;
    border-color: var(--ink-line);
    background: var(--ink-zebra);
    color: var(--text-tertiary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.sa-toolbar-right .btn-ghost:hover {
    background: var(--ink-wash);
    border-color: var(--accent);
    color: var(--accent);
}

.sa-toolbar-right .squad-assessment-sync-icon-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.sa-toolbar-right .squad-assessment-sync-icon-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sa-toolbar-right .squad-assessment-sync-icon-btn.running {
    width: 32px;
}

/* The sync time is this button's label (`title`/`aria-label`), not a bar
   object. Borderless at rest — an action on the page's plane, not a chip;
   the ink ladder carries hover. */
.sa-toolbar-right .squad-assessment-sync-icon-btn {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

.sa-toolbar-right .squad-assessment-sync-icon-btn:hover {
    background: var(--ink-wash);
    color: var(--text-primary);
}


.btn.running {
    border-color: var(--accent-pink);
    color: var(--accent-pink);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.icon-btn {
    padding: 0;
    width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-btn svg {
    display: block;
    flex-shrink: 0;
}

/* ═══════════════ 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,
.hub-date-foot-btn {
    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),
.hub-date-foot-btn:hover {
    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-date-foot-btn {
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 0.78rem;
}

.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,
.hub-time-foot-btn {
    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);
}

.hub-time-foot-btn {
    padding: 0 10px;
    color: var(--accent);
}

.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;
}

/* Header update pill: hidden in chrome until the update watcher sees a newer
   deployed version than the one this tab is running. Click reloads the page. */
.header-update-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 3px 14px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ink-wash);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.header-update-button[hidden] {
    display: none;
}

.header-update-button svg {
    color: var(--accent);
    flex-shrink: 0;
}

.header-update-button:hover {
    background: var(--ink-wash-strong);
    border-color: var(--accent);
}

.header-update-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.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-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);
}

.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;
}

/* Multiselect dropdown panel anchored under the Filters button */
.filter-bar {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: max-content;
    max-width: 540px;
    padding: 14px;
    background: var(--surface-overlay);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    align-items: center;
}

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

.filter-bar label {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-pill);
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
}

.filter-bar label:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.filter-bar label:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* checkbox drives state but is visually hidden — the pill itself is the toggle */
.filter-bar input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* 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 {
    display: inline-flex;
    align-items: center;
}

.med-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    padding: 0 4px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.16s, background 0.16s;
}

.med-filter-btn:hover,
.med-filter-btn[aria-expanded="true"] {
    background: var(--ink-wash);
    color: var(--text-primary);
}

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

.med-filter-btn svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 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 {
    position: fixed;
    z-index: 400;
    max-width: 320px;
}

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

.filter-separator {
    width: 1px;
    height: 18px;
    background: var(--ink-line);
    margin: 0 4px;
}

.gps-date-select {
    padding: 4px 8px;
    background: var(--surface-raised);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* ═══════════════ 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. */
/* Status pill */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 78px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.status-pill-text {
    min-width: 0;
}

.status-available {
    min-width: 0;
    padding: 2px 0;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 650;
}

.status-available::before {
    background: var(--status-available);
}

.status-recovery {
    background: color-mix(in srgb, var(--status-recovery) 15%, transparent);
    color: var(--status-recovery);
}

.status-injured {
    background: color-mix(in srgb, var(--status-injured) 18%, transparent);
    color: var(--status-injured);
}

.status-differentiated {
    background: color-mix(in srgb, var(--status-differentiated) 15%, transparent);
    color: var(--status-differentiated);
}

.status-modified {
    background: color-mix(in srgb, var(--status-modified) 15%, transparent);
    color: var(--status-modified);
}

.status-illness {
    background: color-mix(in srgb, var(--status-illness) 15%, transparent);
    color: var(--status-illness);
}

.status-permission {
    background: color-mix(in srgb, var(--status-permission) 15%, transparent);
    color: var(--status-permission);
}

.status-absent {
    background: color-mix(in srgb, var(--status-absent) 15%, transparent);
    color: var(--status-absent);
}

.status-to-evaluate {
    background: color-mix(in srgb, var(--status-modified) 12%, transparent);
    color: var(--status-modified);
}

.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. */
.gps-high,
.gps-low,
.metric-flag-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    font-weight: 700;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    box-sizing: border-box;
}

.gps-high,
.metric-flag-high {
    background: var(--zscore-high-bg);
    border-color: var(--zscore-high-color);
    color: var(--brand-nero);
}

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

.metric-flag-high::before,
.metric-flag-low::before {
    margin-right: 3px;
    font-size: 0.65rem;
    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. */
.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: currentColor;
    opacity: 0.5;
}

.ft-spark-latest {
    fill: currentColor;
    opacity: 0.65;
}

.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: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 190px;
    min-height: 22px;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

.med-cell-dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--text-tertiary);
}

.med-cell-label {
    flex: 1 1 auto;
    min-width: 2ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
}

.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;
}

.med-cell-count,
.med-cell-date {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
}

.med-cell-date {
    font-weight: 600;
}

.med-cell-acute,
.med-cell-recent,
.med-cell-watch,
.med-cell-old,
.med-cell-treatment {
    background: transparent;
    border-color: var(--ink-line-strong);
    color: var(--text-secondary);
}

.med-cell-acute .med-cell-dot,
.med-cell-recent .med-cell-dot {
    background: var(--status-injured);
}

.med-cell-watch .med-cell-dot,
.med-cell-old .med-cell-dot,
.med-cell-treatment .med-cell-dot {
    background: var(--status-modified);
}

.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;
}

.legend-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 0 4px;
}

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

.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 {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-circle);
    background: var(--text-tertiary);
}

.modal-close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.modal-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
}

.modal-close:hover {
    background: var(--ink-wash);
    border-color: var(--ink-line);
    color: var(--text-primary);
}

.modal-close:focus-visible {
    outline: 2px solid var(--brand-rosa-palermo);
    outline-offset: 2px;
}

.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;
}

.pam-status {
    --pam-status-color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pam-status[data-status="available"] { --pam-status-color: var(--status-available); }
.pam-status[data-status="recovery"] { --pam-status-color: var(--status-recovery); }
.pam-status[data-status="injured"] { --pam-status-color: var(--status-injured); }
.pam-status[data-status="differentiated"] { --pam-status-color: var(--status-differentiated); }
.pam-status[data-status="modified"] { --pam-status-color: var(--status-modified); }
.pam-status[data-status="illness"] { --pam-status-color: var(--status-illness); }
.pam-status[data-status="absent"] { --pam-status-color: var(--status-absent); }

.pam-status-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    background: var(--pam-status-color);
}

.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 .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 .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;
    flex: 0 0 auto;
    gap: 10px;
    padding: 14px 24px 16px;
    border-top: 1px solid var(--ink-line);
    background: transparent;
}

.modal-footer .btn {
    min-height: 44px;
}

.modal-footer .btn-block {
    flex: 1 1 auto;
    width: auto;
}

.modal-footer .btn-primary {
    background: var(--brand-rosa-palermo);
    border-color: var(--brand-rosa-palermo);
    color: var(--brand-nero);
}

.modal-footer .btn-primary:hover {
    background: var(--brand-rosa-ton);
    border-color: var(--brand-rosa-ton);
}

.pam-cancel {
    flex: 0 0 auto;
    min-width: 92px;
    background: transparent;
    border-color: var(--ink-line-strong);
    color: var(--text-secondary);
}

.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;
}

[data-theme="light"] .btn-ghost {
    border-color: #b0a8a0;
    color: var(--text-primary);
}

.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 .status-pill {
    font-size: 0.84rem;
    padding: 4px 12px;
}

/* ═══════════════ 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 .filter-bar {
        padding: 6px 16px;
    }
}

/* ═══════════════ 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);
    scrollbar-width: thin;
    scrollbar-color: var(--ink-line) transparent;
}

.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;
}

.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);
}

.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;
}

.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);
}

/* Selected = accent text + dot. No inset colour rail (nav active state only). */
.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);
}

/* 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,
.st-toolbar,
.rb-toolbar,
.cm-toolbar,
.rtp-toolbar,
.rs-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,
.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-toolbar .btn-sm,
.tp-toolbar .btn-sm,
.ta-toolbar .btn-sm,
.ir-toolbar .btn-sm,
.imp-toolbar .btn-sm,
.ai-toolbar .btn-sm,
.st-toolbar .btn-sm,
.rb-toolbar .btn-sm,
.cm-toolbar .btn-sm,
.rtp-toolbar .btn-sm,
.rs-toolbar .btn-sm {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15px;
}

.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 ── */
.lb-hero-row {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
    flex: 1;
    min-height: 64px;
}

.lb-hero-row:hover {
    transform: scale(1.005);
}

.lb-hero-row .lb-bar-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 8px;
    opacity: 0.85;
    z-index: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lb-hero-row.rank-1 {
    background: var(--surface-recess);
    border: 1px solid var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-1 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-2 {
    background: var(--surface-recess);
    border: 0.0625rem solid var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-2 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-3 {
    background: var(--surface-recess);
    border: 0.0625rem solid var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-3 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-rank-badge {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-system);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    margin-right: 14px;
    background: var(--scrim);
}

.rank-1 .lb-rank-badge {
    color: var(--brand-nero);
    background: var(--accent);
    border: 1px solid var(--accent);
}

.rank-2 .lb-rank-badge {
    color: var(--text-secondary);
    border: 1px solid var(--ink-line-strong);
}

.rank-3 .lb-rank-badge {
    color: var(--text-secondary);
    border: 1px solid var(--ink-line-strong);
}

.lb-hero-name {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: var(--font-system);
    text-transform: none;
    flex: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lb-hero-value {
    position: relative;
    z-index: 1;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin-right: 4px;
}

.lb-hero-unit {
    position: relative;
    z-index: 1;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.lb-hero-date {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-primary) 85%, transparent);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    margin-right: 12px;
    flex-shrink: 0;
}

/* ── Divider ── */
.lb-divider {
    height: 1px;
    background: var(--ink-line);
    margin: 3px 0;
    flex-shrink: 0;
    flex-grow: 0;
}

/* ── Remaining rows (4+) ── */
.lb-row {
    display: flex;
    align-items: center;
    padding: 2px 16px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.lb-row:nth-child(even) {
    background: transparent;
}

.lb-row:nth-child(odd) {
    background: var(--ink-zebra);
}

.lb-row .lb-bar-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: color-mix(in srgb, var(--text-secondary) 42%, var(--surface-recess));
    border-radius: 4px;
    opacity: 0.35;
    z-index: 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lb-row-rank {
    position: relative;
    z-index: 1;
    width: 26px;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.lb-row-name {
    position: relative;
    z-index: 1;
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
    color: var(--text-primary);
}

.lb-row-value {
    position: relative;
    z-index: 1;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 4px;
}

.lb-row-unit {
    position: relative;
    z-index: 1;
    font-size: 0.62rem;
    color: var(--text-tertiary);
    width: 46px;
}

.lb-row-date {
    position: relative;
    z-index: 1;
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-right: 10px;
    flex-shrink: 0;
    width: 50px;
    text-align: right;
}

/* ── Summary panel ── */
.lb-summary {
    width: 11.875rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.lb-stat-card {
    background: var(--surface-raised);
    border: 0.0625rem solid var(--ink-line);
    border-radius: var(--radius-sm);
    padding: 0.875rem;
    text-align: center;
}

.lb-stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.lb-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.lb-stat-value.highlight-teal {
    color: var(--zscore-high-color);
}

.lb-stat-value.highlight-pink {
    color: var(--text-primary);
}

.lb-stat-unit {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-top: 0.125rem;
}

/* ── 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 ── */
@keyframes lb-slide-in {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }

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

.lb-hero-row,
.lb-row {
    animation: lb-slide-in 0.35s ease-out both;
}

/* ── 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-podium {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 12px;
}

.lb-hero-row {
    display: flex;
    align-items: center;
    flex: initial;
    min-height: 64px;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    background: var(--surface-recess);
    border: 1px solid var(--ink-line);
    padding: 0 0.875rem 0 0.625rem;
    transform: none;
}

.lb-hero-row:hover {
    transform: none;
}

.lb-hero-row > * {
    position: relative;
    z-index: 1;
}

.lb-hero-row .lb-bar-bg {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--lb-bar-width);
    height: auto;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    opacity: 1;
    z-index: 0;
    transition: width 0.45s ease;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-1 {
    background: var(--surface-recess);
    border-color: var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-1 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-2 {
    background: var(--surface-recess);
    border-color: var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-2 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-3 {
    background: var(--surface-recess);
    border-color: var(--ink-line);
    box-shadow: none;
}

.lb-hero-row.rank-3 .lb-bar-bg {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-bianco-luce) 7%, transparent),
        color-mix(in srgb, var(--brand-bianco-luce) 2%, transparent)
    );
}

.lb-hero-row.rank-1 .lb-rank-badge,
.lb-hero-row.rank-2 .lb-rank-badge,
.lb-hero-row.rank-3 .lb-rank-badge {
    border: 1px solid var(--ink-line-strong);
    color: var(--text-secondary);
}

.lb-rank-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 0.75rem;
    background: var(--surface-recess);
    font-family: var(--font-system);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: normal;
}

.lb-hero-row.rank-1 .lb-rank-badge {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--brand-nero);
}

.lb-hero-info {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.lb-hero-name {
    font-family: var(--font-system);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
}

.lb-hero-meta {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lb-hero-score {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding-left: 0.875rem;
}

.lb-delta-pill {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 0.125rem 0.5rem;
    background: transparent;
    border: 0.0625rem solid var(--ink-line-strong);
    color: var(--text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.lb-hero-value {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin: 0;
    text-shadow: none;
}

.lb-hero-unit {
    font-size: 0.65625rem;
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-primary));
    text-shadow: none;
}

.lb-table-wrap {
    max-height: none;
    overflow: visible;
    border-radius: 0;
    background: var(--surface-recess);
}

.lb-table {
    table-layout: fixed;
    background: var(--surface-recess);
}

.lb-table thead th {
    color: var(--text-secondary);
    padding: 0.5625rem 0.75rem;
    letter-spacing: 0.0625rem;
}

.lb-table td {
    padding: 0.5rem 0.75rem;
}

.lb-table .lb-rank-head,
.lb-table .lb-rank-cell {
    width: 3.25rem;
}

.lb-rank-cell {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.lb-player-cell {
    color: var(--text-primary);
    font-weight: 600;
}

.lb-position-cell {
    width: 3.75rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.lb-bar-track {
    position: relative;
    height: 12px;
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-recess));
    overflow: visible;
}

.lb-table-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--lb-bar-width);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--text-secondary) 42%, var(--surface-recess));
}

.lb-average-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: var(--lb-avg-x);
    width: 2px;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--reference-gold);
}

.lb-delta-cell {
    width: 4.75rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.lb-value-cell {
    width: 5.25rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lb-value-cell span {
    margin-left: 0.1875rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.62rem;
    color: var(--text-tertiary);
}

.lb-tested-cell {
    width: 5.75rem;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.lb-date-stale,
.lb-legend-stale span {
    color: var(--text-tertiary);
}

.lb-delta-cell.is-up,
.lb-delta-pill.is-up {
    color: var(--text-secondary);
}

.lb-delta-icon {
    margin-right: 0.25rem;
    color: var(--text-primary);
    font-size: 0.625rem;
}

.lb-delta-cell.is-down,
.lb-delta-pill.is-down {
    color: var(--text-secondary);
}

.lb-delta-cell.is-zero,
.lb-delta-cell.is-empty,
.lb-delta-pill.is-zero,
.lb-delta-pill.is-muted {
    color: var(--text-tertiary);
}

.lb-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin: 0.625rem 0.125rem 0;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.lb-legend-swatch,
.lb-legend-marker {
    display: inline-block;
    vertical-align: -0.125rem;
    margin-right: 0.375rem;
}

.lb-legend-swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--text-secondary) 42%, var(--surface-recess));
}

.lb-legend-marker {
    width: 0.125rem;
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
}

.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-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-md);
}
.sync-modal-close:hover {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    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; }

.sync-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-field);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sync-btn:hover {
    border-color: var(--text-tertiary);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-primary);
}
.sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sync-btn.running {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

@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-btn-primary {
    padding-block: 8px;
    font-size: 12px;
}

.sync-step-card .sync-btn-primary {
    justify-content: center;
    width: 100%;
}

.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-adi-action {
    min-width: 110px;
    height: 34px;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 12px;
    white-space: nowrap;
}

.sync-adi-icon-btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-pill);
}

.sync-adi-icon-btn svg {
    width: 16px;
    height: 16px;
}

.sync-adi-panel .sync-btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-inverse);
}

.sync-adi-panel .sync-btn-primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--text-inverse);
}

.sync-adi-panel .sync-btn:disabled,
.sync-adi-panel .sync-btn.is-disabled {
    border-color: var(--ink-line);
    background: var(--surface-field);
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
}

.sync-adi-panel .sync-btn-primary.is-running:disabled {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--text-inverse);
    cursor: wait;
}

.sync-adi-panel .sync-btn-primary .sync-spinner {
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
}

.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: 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 {
    height: 34px;
    justify-content: center;
    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;
    text-decoration: none;
}

.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-refresh-btn {
    min-width: 110px;
    height: 34px;
    justify-content: center;
    padding-inline: 12px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 12px;
    white-space: nowrap;
}

.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-action,
    .sync-adi-refresh-btn {
        width: 100%;
    }

    .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-result-ok {
    background: var(--surface-raised);
    border: 1px solid var(--ink-line-strong);
    color: var(--text-primary);
    padding: 6px 28px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.sync-result-ok:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════
   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: 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: 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: 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. */
.hub-table-scroll.lb-table-wrap {
    max-height: none;
    overflow: visible;
    border-radius: 0;
    background: var(--surface-recess);
}

.hub-table.lb-table {
    table-layout: fixed;
    background: var(--surface-recess);
    font-size: 0.78125rem;
}

.hub-table.lb-table thead th {
    background: var(--surface-raised);
    color: var(--text-secondary);
    padding: 0.4375rem 0.625rem;
    font-size: 0.625rem;
    letter-spacing: 0.0625rem;
    border-bottom: 0.125rem solid var(--ink-line-strong);
}

.hub-table.lb-table td {
    padding: 0.375rem 0.625rem;
    border-bottom: 0.0625rem solid var(--ink-line);
}

.hub-table.lb-table .lb-rank-head,
.hub-table.lb-table .lb-rank-cell {
    width: 2.75rem;
}

.hub-table.lb-table th:nth-child(2) {
    width: 28%;
}

.hub-table.lb-table .lb-position-cell {
    width: 3.5rem;
    font-size: 0.65625rem;
}

.hub-table.lb-table th:nth-child(3) {
    width: 3.5rem;
}

.hub-table.lb-table th:nth-child(4) {
    width: auto;
}

.hub-table.lb-table .lb-delta-cell {
    width: 5rem;
    font-size: 0.71875rem;
}

.hub-table.lb-table th:nth-child(5) {
    width: 5rem;
}

.hub-table.lb-table .lb-value-cell {
    width: 5.25rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
}

.hub-table.lb-table th:nth-child(6) {
    width: 5.25rem;
}

.hub-table.lb-table .lb-tested-cell {
    width: 5.75rem;
    font-size: 0.6875rem;
}

.hub-table.lb-table th:nth-child(7) {
    width: 5.75rem;
}

.hub-table.lb-table .lb-bar-track {
    height: 12px;
    background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-recess));
}

.hub-table.lb-table .lb-average-marker {
    top: -3px;
    bottom: -3px;
    width: 2px;
}

/* ── 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; }

.rpt-exit-btn {
    display: none;
    position: fixed;
    top: 6px;
    right: 8px;
    z-index: 9999;
    background: var(--surface-raised);
    border: 1px solid var(--ink-line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    font-family: inherit;
    padding: 4px 10px 4px 10px;
    cursor: pointer;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.rpt-exit-btn:hover { opacity: 1; }
body.report-mode .rpt-exit-btn { 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;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.16s, background 0.16s;
}

.nv-disclosure:hover,
.nv-disclosure[aria-expanded="true"] {
    background: var(--ink-wash);
    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;
}