/* Player Explorer: grouped column picker (<details>/<summary>) */
.pe-colpicker-summary {
    list-style: none;
}

.pe-colpicker-summary::-webkit-details-marker {
    display: none;
}

/* Player Explorer controls dropdown styling */
.pe-controls-body {
    display: none !important;
}

.pe-controls.is-open .pe-controls-body {
    display: flex !important;
}

@media (min-width: 768px) {
    .pe-controls-body {
        display: inline-flex !important;
        width: auto !important;
    }
}

@media (max-width: 767px) {
    .pe-controls-body {
        display: none !important;
    }

    .pe-controls.is-open .pe-controls-body {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .pe-controls-body > * {
        width: 100%;
    }

    .pe-controls-item-filters {
        grid-column: 1;
        grid-row: 1;
    }

    .pe-controls-item-export {
        grid-column: 2;
        grid-row: 1;
    }

    .pe-controls-item-percentiles {
        grid-column: 1;
        grid-row: 2;
    }

    .pe-controls-item-adp {
        grid-column: 2;
        grid-row: 2;
    }

    .pe-controls-item-aps {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

.pe-colpicker-chevron {
    transition: transform 150ms ease;
}

.pe-colpicker-details[open] .pe-colpicker-chevron {
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .pe-controls-body {
        display: inline-flex !important;
        width: auto !important;
    }
}

/* Player Explorer controls: transparent button backgrounds */
.pe-controls-btn {
    /* Quiet button (uiux-audit P2-11): the old fully-transparent strip made
       Filters/Export/Save-view read as inert text. */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px;
    box-shadow: none !important;
}

.pe-controls-btn:hover,
.pe-controls-btn:focus,
.pe-controls-btn:active {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow: none !important;
}

.pe-controls-chip {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Mobile dropdown feel for Player Explorer controls */
@media (max-width: 767px) {
    .pe-controls-toggle {
        background: rgba(17, 17, 20, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: none !important;
    }

    .pe-controls-toggle.neo-shadow,
    .pe-controls-toggle.neo-shadow:active {
        box-shadow: none !important;
    }

    .pe-controls-toggle.pe-controls-btn {
        border-color: rgba(255, 255, 255, 0.16) !important;
        background: rgba(17, 17, 20, 0.6) !important;
    }

    .pe-controls.is-open .pe-controls-toggle {
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .pe-controls-chevron {
        transition: transform 200ms ease;
    }

    .pe-controls.is-open .pe-controls-chevron {
        transform: rotate(180deg);
    }

    .pe-controls.is-open .pe-controls-body {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(17, 17, 20, 0.55);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 12px;
        padding: 0.6rem;
        box-shadow: none;
        animation: pe-controls-drop 180ms ease;
        transform-origin: top center;
    }
}

@keyframes pe-controls-drop {
    from {
        opacity: 0;
        transform: translateY(-4px) scaleY(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* Baseball Stats Guru Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Dark, desaturated blue-gray UI palette (flat, no glassmorphism) */
    --primary-color: #0b0d11;
    --secondary-color: #1c2027;
    /* Single restrained UI accent (periwinkle); not performance semantics */
    --accent-color: #6b8aff;
    --accent-rgb: 107, 138, 255;
    --accent2-color: #22d3ee;
    --accent2-rgb: 34, 211, 238;
    /* Reserved strictly for AI/generate actions */
    --accent3-color: #a06bff;
    --accent3-rgb: 160, 107, 255;
    --accent-gradient: linear-gradient(90deg, rgba(var(--accent-rgb), 1) 0%, rgba(var(--accent3-rgb), 1) 100%);
    /* Global semantics: red = better, blue = worse */
    --success-color: #e15759;
    --danger-color: #4c9cdf;
    /* Percentile ramp endpoints — mirrored in src/core/color_utils.py
       (PCT_GOOD/PCT_MID/PCT_POOR); change them TOGETHER. (uiux-audit P1-7) */
    --pct-good: #e15759;
    --pct-mid: #b0bec5;
    --pct-poor: #4c9cdf;
    --warning-color: #ffc107;
    --dark-bg: #0b0d11;
    --dark-bg-2: #0e1117;
    --card-bg: #16191f;
    --card-bg-rgb: 22, 25, 31;
    --hover-bg: #1c2027;
    --text-primary: #e8eaed;
    --text-secondary: #9ba1ad;
    --text-secondary-rgb: 155, 161, 173;
    --border-color: #232830;
    --radius: 12px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
}

/* Belt-and-braces for the Tailwind custom palette (uiux-audit P0-1): these
   utility classes are used in callback-rendered content, and when the Play
   CDN misconfigures (as it silently did until 2026-07) they produce NO css
   at all — dead CTAs, colorless win/loss text. Defined here against the same
   CSS variables so they can never vanish again. The CDN's generated <style>
   loads after this sheet, so when Tailwind IS healthy its identical rules
   win the cascade and nothing changes. */
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-accent { background-color: rgba(var(--accent-rgb), 1); }
.bg-accent\/90 { background-color: rgba(var(--accent-rgb), 0.9); }
.bg-accent\/20 { background-color: rgba(var(--accent-rgb), 0.2); }
.bg-accent\/10 { background-color: rgba(var(--accent-rgb), 0.1); }
.bg-accent\/5 { background-color: rgba(var(--accent-rgb), 0.05); }
.bg-accent3 { background-color: rgba(var(--accent3-rgb), 1); }
.text-accent { color: var(--accent-color); }
.text-accent2 { color: var(--accent2-color); }
.text-accent3 { color: var(--accent3-color); }
.border-accent { border-color: var(--accent-color); }
.text-textPrimary { color: var(--text-primary); }
.text-textSecondary { color: var(--text-secondary); }
.bg-cardBg { background-color: var(--card-bg); }
.bg-darkBg { background-color: var(--dark-bg); }

/* --- Shared UI atoms (core/ui_components.py, uiux-audit P1) --------------- */

/* Ramp micro-legend (P1-7) */
.ramp-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ramp-legend-chip {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    display: inline-block;
}

.ramp-legend-chip--good { background: var(--pct-good); }
.ramp-legend-chip--poor { background: var(--pct-poor); }
.ramp-legend-sep { opacity: 0.6; }

/* Skeleton loading placeholders (P1-2) — real content dimensions, shimmer */
.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* F3-01: 4.5%/6% alphas were invisible on desktop card surfaces. */
    background: rgba(255, 255, 255, 0.07);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent,
        rgba(255, 255, 255, 0.12), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}

.skeleton-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.loading-status {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton::after { animation: none; }
}

/* Standard empty state (P1-10) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    padding: 24px;
}

.empty-state-icon {
    font-size: 1.8rem;
    color: var(--text-secondary);
    opacity: 0.8;
}

.empty-state-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 36ch;
    margin: 0;
}

/* Expanded Splits tables (uiux-audit P0-7): horizontal scroll with a sticky
   Split column so every metric column is reachable on narrow viewports. */
.es-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.es-table th:first-child,
.es-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
}

.es-table th,
.es-table td {
    white-space: nowrap;
}

/* Overlay priority arbitration (date picker vs nav search dropdown)
   JS in assets/overlayPriority.js toggles body[data-overlay-top]. */
body {
    --overlay-date-z: 10050;
    --overlay-search-z: 10060;
}

/* Secondary accent for interactive hover/focus states. */
.app-widget button:hover,
.app-widget a:hover {
    color: var(--text-primary);
}

.app-widget button:focus-visible,
.app-widget a:focus-visible,
.app-widget input:focus-visible,
.app-widget textarea:focus-visible,
.app-widget select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55);
}

.app-widget .Select-control:hover,
.app-widget .Select-control:focus,
.app-widget .Select-control:focus-within {
    border-color: rgba(var(--accent-rgb), 0.6) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

.app-widget input:focus,
.app-widget textarea:focus {
    border-color: rgba(var(--accent-rgb), 0.6) !important;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

/* Input depth: subtle border for dark backgrounds. */
.app-widget input,
.app-widget textarea,
.app-widget .Select-control,
.app-widget .Select__control {
    box-shadow: none;
    border: 1px solid var(--border-color);
    background-color: var(--dark-bg-2) !important;
}

/* Unified button styling inside widgets. */
.app-widget button {
    border-radius: 10px;
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
    box-shadow: none;
}

.app-widget button:active {
    transform: translateY(1px);
    filter: brightness(0.98);
}

/* Primary buttons. */
.app-widget button.bg-success,
.app-widget button.bg-primary,
.app-widget button.bg-accent {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Secondary buttons. */
.app-widget button.bg-secondary {
    border: none;
    box-shadow: none;
}

/* Ghost/neutral buttons. */
.post-content .player-percentile-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .post-content .player-percentile-image {
        width: 50%;
    }
}

.app-widget button.bg-cardBg\/40,
.app-widget button.bg-cardBg\/60,
.app-widget button.bg-cardBg\/50 {
    box-shadow: none;
    border: 1px solid var(--border-color);
}

/* Chip styling for filters/toggles. */
.app-chip {
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    box-shadow: none;
    transition: box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.app-chip:hover {
    border-color: transparent;
    color: var(--text-primary);
}

.app-chip.is-active,
.app-chip:has(input:checked) {
    border-color: transparent;
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}

/* Player Explorer: keep Percentiles label white (chip defaults are gray). */
.pe-controls-item-percentiles,
.pe-controls-item-percentiles span {
    color: var(--text-primary) !important;
}

/* Player Explorer: keep Avg Percentile Score label white. */
.pe-controls-item-aps,
.pe-controls-item-aps span {
    color: var(--text-primary) !important;
}

/* Player Trends: remove shadow box around Percentiles toggle chip. */
#pt-show-percentiles-wrap,
#pt-show-percentiles-wrap:hover,
#pt-show-percentiles-wrap:focus,
#pt-show-percentiles-wrap:focus-visible,
#pt-show-percentiles-wrap:has(input:checked),
#pt-show-percentiles-wrap:has(input:checked):hover {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

#pt-show-percentiles-wrap .form-check,
#pt-show-percentiles-wrap .form-check-input,
#pt-show-percentiles-wrap .form-check-input:focus {
    box-shadow: none !important;
}

#pt-show-percentiles-wrap .text-textSecondary {
    color: var(--text-primary) !important;
}

@media (max-width: 767px) {
    .pt-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem !important;
        align-items: center;
    }

    #pt-open-controls {
        justify-self: start;
    }

    #pt-show-percentiles-wrap {
        justify-self: center;
    }

    #pt-download-chart {
        justify-self: end;
    }

    .pt-trends-widget {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #pt-chart-title {
        display: block;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.9rem;
        line-height: 1.2;
    }
}

body[data-overlay-top="date"] {
    --overlay-date-z: 10060;
    --overlay-search-z: 10050;
}

body[data-overlay-top="search"] {
    --overlay-date-z: 10050;
    --overlay-search-z: 10060;
}

/* Player Trends: ensure the active control card (player vs date)
   is the top stacking context. Without this, the dropdown/calendar
   can render underneath adjacent cards due to backdrop-filter stacking contexts. */
.pt-overlay-card {
    position: relative;
    overflow: visible !important;
}

.pt-player-card {
    z-index: var(--overlay-search-z);
}

.pt-date-card {
    z-index: var(--overlay-date-z);
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(900px circle at 78% 6%, rgba(var(--accent-rgb), 0.06), transparent 60%),
        linear-gradient(160deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
    color: var(--text-primary);
    line-height: 1.6;
}

@media (min-width: 768px) {
    body {
        background-attachment: fixed;
    }
}

/* Tooltip styling (Bootstrap removed) */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    letter-spacing: 0;
    white-space: normal;
    opacity: 1;
}

.tooltip-inner {
    max-width: 320px;
    padding: 0.6rem 0.75rem;
    color: var(--text-secondary);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.tooltip .tooltip-arrow {
    position: absolute;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow {
    bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: var(--border-color);
}

.bs-tooltip-bottom .tooltip-arrow {
    top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: var(--border-color);
}

/* Enhanced Cards */
.custom-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.custom-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.45);
}

/* Neomorphism (soft UI) utilities: use sparingly on small controls */
.neo-shadow {
    box-shadow:
        6px 6px 14px rgba(0, 0, 0, 0.45),
        -6px -6px 14px rgba(255, 255, 255, 0.06);
}

.neo-shadow:active {
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.55),
        inset -4px -4px 10px rgba(255, 255, 255, 0.06);
}

.card-header {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    color: var(--text-primary);
}

/* Enhanced Form Controls */
.control-group {
    margin-bottom: 1.25rem;
}

.control-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Enhancements */
.Select-control {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease;
    min-height: 36px !important;
    height: 36px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* react-select v5 (Dash 3+). Keep styling aligned with legacy .Select-control. */
.Select__control {
    background-color: rgba(var(--card-bg-rgb), 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease;
    min-height: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.Select__control--is-focused {
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

.Select__value-container,
.Select__input-container,
.Select__single-value,
.Select__placeholder {
    min-height: 34px !important;
    line-height: 34px !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

.Select__input-container input {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.Select__indicator,
.Select__dropdown-indicator,
.Select__clear-indicator {
    color: var(--text-secondary) !important;
}

.Select__indicator-separator {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.Select__menu,
.Select__menu-portal {
    background-color: rgba(var(--card-bg-rgb), 0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--text-primary) !important;
}

/* Posts: align filter row control heights (input, dropdowns, and featured tile) */
.posts-filters-row {
    position: relative;
    z-index: 2147483645;
    overflow: visible !important;
}

.posts-filters-row .pt-player-dropdown {
    position: relative;
    z-index: 2147483646 !important;
    overflow: visible !important;
}

.posts-filters-row .pt-player-dropdown:focus-within {
    z-index: 2147483647 !important;
}

.posts-filters-row .Select-menu-outer,
.posts-filters-row .Select__menu,
.posts-filters-row .Select__menu-portal {
    z-index: 2147483647 !important;
    position: absolute !important;
}

.posts-filters-row .Select-control {
    min-height: 42px !important;
    height: 42px !important;
}

.posts-filters-row .Select-placeholder,
.posts-filters-row .Select-value-label,
.posts-filters-row .Select-control .Select-value,
.posts-filters-row .Select-input input {
    line-height: 40px !important;
}

/* Posts: embedded page widgets (iframes) */
.post-embed-iframe {
    width: 100%;
    border: 0;
    display: block;
    background: rgba(var(--card-bg-rgb), 0.6);
}

/* Posts: Markdown readability + tables */
.post-content {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
    line-height: 1.85;
}

.post-content .dash-markdown {
    color: inherit;
}

.post-content p,
.post-content li {
    color: rgba(255, 255, 255, 0.92);
}

/* Ensure Markdown lists actually show bullets/numbers (some global CSS resets can remove markers). */
.post-content ul {
    list-style: disc;
    padding-left: 1.35rem;
    margin: 0.75rem 0 1rem;
}

.post-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0.75rem 0 1rem;
}

.post-content li {
    margin: 0.25rem 0;
}

/* Markdown lists: restore bullets/numbering (some global resets remove them) */
.post-content ul,
.post-content ol {
    padding-left: 1.25rem;
    margin: 0.75rem 0 1rem;
    list-style-position: outside;
}

.post-content ul {
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content li {
    display: list-item;
    margin: 0.25rem 0;
}

.post-content a {
    color: var(--accent2-color);
    text-decoration: none;
}

.post-content a:hover {
    text-decoration: underline;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.post-content h2 {
    margin-top: 2.2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.post-content h3 {
    margin-top: 1.75rem;
}

.post-content hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2rem 0;
}

/* Markdown tables: real grid with dividers + header styling */
.post-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--card-bg-rgb), 0.35);
}

.post-content thead th {
    background: rgba(var(--card-bg-rgb), 0.85);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: none;
}

.post-content th,
.post-content td {
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    vertical-align: top;
}

.post-content tr:last-child td {
    border-bottom: 0;
}

.post-content th:last-child,
.post-content td:last-child {
    border-right: 0;
}

.post-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 640px) {
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Posts: Roto+ swimlane flowchart */
.post-content .roto-swimlane-graph {
    margin: 1.25rem 0 1.75rem;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(var(--card-bg-rgb), 0.30);
}

.post-content .roto-swimlane-graph__graph {
    width: 100%;
}

.post-content .roto-swimlane {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 18px;
    margin: 1.25rem 0 1.75rem;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(var(--card-bg-rgb), 0.30);
}

.post-content .roto-swimlane__divider {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.post-content .roto-swimlane__lane {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(var(--card-bg-rgb), 0.20);
}

.post-content .roto-swimlane__lane-title {
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.86);
    margin: 4px 0 10px;
}

.post-content .roto-swimlane__group {
    position: relative;
    padding: 10px 8px 12px;
    margin: 10px 0 16px;
}

.post-content .roto-swimlane__group-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 10px;
}

.post-content .roto-swimlane__inputs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.post-content .roto-swimlane__lane--hitters .roto-swimlane__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-content .roto-swimlane__lane--pitchers .roto-swimlane__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-content .roto-swimlane__input {
    position: relative;
    padding-bottom: 18px;
}

.post-content .roto-swimlane__wire {
    position: absolute;
    left: 50%;
    top: calc(100% - 18px);
    height: 18px;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.22);
}

.post-content .roto-swimlane__wire::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.32);
}

.post-content .roto-swimlane__bus {
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 0 10px;
}

.post-content .roto-swimlane__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(var(--card-bg-rgb), 0.55);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.post-content .roto-swimlane__box--model {
    border-color: rgba(var(--accent2-rgb), 0.55);
    background: linear-gradient(
        90deg,
        rgba(var(--accent2-rgb), 0.18) 0%,
        rgba(var(--accent-rgb), 0.14) 100%
    );
    color: var(--text-primary);
    font-weight: 900;
    letter-spacing: 0.01em;
    width: min(360px, 92%);
}

.post-content .roto-swimlane__box--xref {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    font-weight: 700;
}

.post-content .roto-swimlane__arrow {
    text-align: center;
    margin: 6px 0 10px;
    color: rgba(255, 255, 255, 0.60);
    font-weight: 800;
}

.post-content .roto-swimlane__aggregate {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.post-content .roto-swimlane__box--aggregate {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
    border-color: rgba(var(--accent-rgb), 0.40);
    background: rgba(var(--accent-rgb), 0.10);
    font-weight: 900;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .post-content .roto-swimlane {
        grid-template-columns: 1fr;
    }

    .post-content .roto-swimlane__divider {
        display: none;
    }
}

/* react-select v2/v3 (Dash versions vary) */
.posts-filters-row .Select__control {
    min-height: 42px !important;
    height: 42px !important;
}

.posts-filters-row .Select__value-container,
.posts-filters-row .Select__input,
.posts-filters-row .Select__single-value,
.posts-filters-row .Select__placeholder {
    min-height: 40px !important;
}

/* Selected value + placeholder text */
.Select-placeholder,
.Select-value-label,
.Select-control .Select-value,
.Select-input input {
    color: var(--text-primary) !important;
    font-size: 0.875rem;
    line-height: 34px !important;
}

.Select-input input {
    /* NO width override here (R0-06): react-select v1 sizes this input via
       JS; forcing width:auto made it ~186px and ballooned every fixed-width
       dropdown over its neighbors (home h-scroll, ES pill occlusion,
       Arsenal arrow hijack). */
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.Select,
.Select-control {
    max-width: 100%;
}

.Select-control {
    table-layout: fixed;
}

.Select--multi .Select-value {
    line-height: 1.2 !important;
}

.Select-control .Select-value-label {
    color: var(--text-primary) !important;
}

.Select-control:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.Select-menu-outer {
    background-color: rgba(var(--card-bg-rgb), 0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Player Trends: keep dropdown menu above other cards */
.pt-player-dropdown {
    position: relative;
    z-index: 10050;
    overflow: visible !important;
}

.pt-player-dropdown .Select-input,
.pt-player-dropdown .Select-input input {
    background: transparent !important;
    min-width: 0 !important;
}

.pt-player-dropdown .Select-input input {
    /* No width:auto here (R0-06): input default size is ~166px and defeats
       react-select's inline autosize; min-width floor is enough. */
    min-width: 24px !important;
}

@media (min-width: 768px) {
    #pc-open-controls,
    #ps-open-controls {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

#pc-open-controls:hover,
#ps-open-controls:hover {
    background: transparent !important;
}

/* Player Trends: when maxed at 3 players, make selected chips dark so text stays readable. */
.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value {
    background: rgba(var(--card-bg-rgb), 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value-icon {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
}

.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value-icon:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

/* When a dropdown is focused/open, raise its stacking context above sibling dropdowns.
   This prevents the menu from rendering behind other player selectors in the same panel. */
.pt-player-dropdown:focus-within {
    z-index: 2147483646 !important;
}

/* Player Profiles: DatePicker popover should overlay cards/graphs.
   Some containers (e.g., backdrop-filter / Plotly) create stacking contexts; force the DatePicker wrapper above. */
.pp-date-picker {
    position: relative;
    z-index: var(--overlay-date-z);
    overflow: visible !important;
}

.pp-date-picker .DateRangePicker,
.pp-date-picker .DateRangePickerInput,
.pp-date-picker .DateInput {
    overflow: visible !important;
}

/* Player Profiles header: keep the DatePicker from overflowing into the Season dropdown.
   Allow it to wrap within its grid cell instead of forcing a single line. */
.pp-date-picker .DateRangePicker {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
}

/* Player Profiles: the header card uses backdrop-blur which creates a stacking context.
   When the calendar opens, it can overlap the lower grid; keep this card above the rest. */
.pp-profile-header-card {
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

/* Navbar: player profile search dropdown should be able to overlay page content.
   Z-index is dynamically swapped with the date picker based on last interaction. */
.nav-player-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Profiles: season dropdown should overlay the date picker/cards.
   Uses the same overlay priority variables as navbar + date picker. */
.pp-player-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Profiles: when a dropdown is focused/open, keep it above sibling controls. */
.pp-player-dropdown:focus-within {
    z-index: 2147483646 !important;
}

.pp-player-dropdown:focus-within .Select-menu-outer,
.pp-player-dropdown:focus-within .Select__menu,
.pp-player-dropdown:focus-within .Select__menu-portal {
    z-index: 2147483647 !important;
}

.pp-player-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.pp-player-dropdown .Select__menu,
.pp-player-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

/* Player Profiles header: allow the react-select control to shrink inside a tight modal.
   Without this, the internal input can enforce a min-content width and visually overlap the date picker. */
.pp-player-dropdown .Select,
.pp-player-dropdown .Select-control,
.pp-player-dropdown .Select-input,
.pp-player-dropdown .Select-input input {
    min-width: 0 !important;
    width: 100% !important;
}

.pp-date-picker .DateRangePickerInput {
    max-width: 100% !important;
}

.nav-player-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.nav-player-dropdown .Select__menu,
.nav-player-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

/* Player Trends / Player Comparison: season dropdown should overlay the date picker when active.
   Uses the same overlay priority variables as navbar + date picker. */
.pt-season-dropdown,
.pc-season-dropdown,
.pt-matchup-dropdown,
.pc-matchup-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Comparison/Trends: when dropdowns are focused/open, keep them above sibling controls. */
.pt-season-dropdown:focus-within,
.pc-season-dropdown:focus-within,
.pt-matchup-dropdown:focus-within,
.pc-matchup-dropdown:focus-within {
    z-index: 2147483646 !important;
}

.pt-season-dropdown:focus-within .Select-menu-outer,
.pc-season-dropdown:focus-within .Select-menu-outer,
.pt-matchup-dropdown:focus-within .Select-menu-outer,
.pc-matchup-dropdown:focus-within .Select-menu-outer,
.pt-season-dropdown:focus-within .Select__menu,
.pc-season-dropdown:focus-within .Select__menu,
.pt-matchup-dropdown:focus-within .Select__menu,
.pc-matchup-dropdown:focus-within .Select__menu,
.pt-season-dropdown:focus-within .Select__menu-portal,
.pc-season-dropdown:focus-within .Select__menu-portal,
.pt-matchup-dropdown:focus-within .Select__menu-portal,
.pc-matchup-dropdown:focus-within .Select__menu-portal {
    z-index: 2147483647 !important;
}

.pt-season-dropdown .Select-menu-outer,
.pc-season-dropdown .Select-menu-outer,
.pt-matchup-dropdown .Select-menu-outer,
.pc-matchup-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.pt-season-dropdown .Select__menu,
.pt-season-dropdown .Select__menu-portal,
.pc-season-dropdown .Select__menu,
.pc-season-dropdown .Select__menu-portal,
.pt-matchup-dropdown .Select__menu,
.pt-matchup-dropdown .Select__menu-portal,
.pc-matchup-dropdown .Select__menu,
.pc-matchup-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

.pt-player-dropdown .Select-menu-outer {
    z-index: 2147483647 !important;
    position: absolute !important;
}

.pt-player-dropdown .Select,
.pt-player-dropdown .Select-control {
    overflow: visible !important;
}

/* react-select v2/v3 classnames (Dash versions vary) */
.pt-player-dropdown .Select__menu,
.pt-player-dropdown .Select__menu-portal {
    z-index: 2147483647 !important;
}

/* DatePicker can create a competing stacking context; keep it below menus */
.DateRangePicker_picker,
.DateRangePicker_picker__directionLeft,
.DateRangePicker_picker__directionRight {
    /* Must sit above AG Grid, modals, and Plotly modebars */
    z-index: calc(var(--overlay-date-z) + 1) !important;
}

/* Dash sometimes renders SingleDatePicker for certain components */
.SingleDatePicker_picker,
.SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionRight {
    z-index: calc(var(--overlay-date-z) + 1) !important;
}

/* React-Dates portal modes (used when with_portal / with_full_screen_portal is enabled).
   These must out-rank Plotly graphs which can create their own stacking contexts. */
.DateRangePicker__portal,
.SingleDatePicker__portal,
.DateRangePicker_picker__portal,
.SingleDatePicker_picker__portal,
.DayPicker_portal__horizontal,
.DayPicker_portal__vertical {
    z-index: 2147483647 !important;
}

/* React-Dates calendar popover: dark theme */
.DateRangePicker_picker,
.SingleDatePicker_picker {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
}

.DayPicker,
.DayPicker__withBorder,
.CalendarMonth,
.CalendarMonthGrid,
.CalendarMonthGrid_month__horizontal,
.DayPicker_transitionContainer,
.DayPicker_focusRegion {
    background: var(--card-bg) !important;
}

.CalendarMonth_caption {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.DayPicker_weekHeader {
    color: var(--text-secondary) !important;
}

.DayPickerNavigation_button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
}

.DayPickerNavigation_button:hover {
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    background: rgba(var(--accent-rgb), 0.10) !important;
}

.DayPickerNavigation_svg {
    fill: var(--text-secondary) !important;
}

.CalendarDay__default {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.CalendarDay__default:hover {
    background: rgba(var(--accent-rgb), 0.10) !important;
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__outside {
    color: rgba(var(--text-secondary-rgb), 0.55) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_calendar {
    color: rgba(var(--text-secondary-rgb), 0.35) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: rgba(var(--accent-rgb), 0.35) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.95) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background: rgba(var(--accent-rgb), 0.14) !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__selected_span,
.CalendarDay__selected_span:hover {
    background: rgba(var(--accent-rgb), 0.22) !important;
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    color: var(--text-primary) !important;
}

/* React-Dates: hide the keyboard shortcuts help button (the small '?' triangle) */
.DayPickerKeyboardShortcuts_show,
.DayPickerKeyboardShortcuts_show__bottomRight,
.DayPickerKeyboardShortcuts_show__bottomRight::before,
.DayPickerKeyboardShortcuts_show__bottomRight::after {
    display: none !important;
}

.Select-option {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 10px 12px !important;
}

.Select-option:hover {
    background-color: var(--hover-bg) !important;
}

/* Button Enhancements */
.btn-custom {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-custom:active {
    transform: translateY(0);
}

/* Slider Enhancements */
.rc-slider-track {
    background-color: var(--accent-color) !important;
}

.rc-slider-handle {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color) !important;
}

.rc-slider-handle:hover {
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.2);
}

.rc-slider-mark-text {
    color: var(--text-secondary) !important;
    font-size: 0.75rem;
}

/* Checklist Enhancements */
.custom-checklist label {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.custom-checklist label:hover {
    color: var(--accent-color);
}

.custom-checklist input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Apple-style switch (used for the Percentiles toggle in Player Explorer header) */
.pe-apple-switch .form-check {
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.pe-apple-switch .form-check-input {
    width: 46px !important;
    height: 26px !important;
    margin: 0 !important;
    cursor: pointer;
    border-radius: 9999px !important;
    border: none !important;
    background-image: none !important;
    background-color: rgba(var(--text-secondary-rgb), 0.28) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.pe-apple-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transition: transform 150ms ease;
}

.pe-apple-switch .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22) !important;
}

.pe-apple-switch .form-check-input:checked {
    background-color: var(--accent-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18) !important;
}

.pe-apple-switch .form-check-input:checked::before {
    transform: translateX(20px);
}

.pe-apple-switch .form-check-label {
    margin: 0;
    padding: 0;
}

/* Table Enhancements */
.dash-table-container {
    background-color: var(--card-bg) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dash-spreadsheet-container {
    max-height: 70vh !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-spacing: 0;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 1rem 0.75rem !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--accent-color) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: var(--hover-bg) !important;
    cursor: pointer;
}

/* AG Grid Enhancements */
.ag-theme-alpine-dark {
    --ag-background-color: var(--card-bg);
    --ag-header-background-color: var(--primary-color);
    --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
    --ag-row-hover-color: var(--hover-bg);
    --ag-border-color: var(--border-color);
    --ag-header-foreground-color: var(--text-primary);
    --ag-foreground-color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Player Explorer tabs (match app theme) */
.pe-view-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.pe-view-tabs .nav-link {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pe-view-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pe-view-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Player Explorer dcc.Tabs (Tailwind migration) */
.pe-view-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pe-view-tabs {
    /* Tab row scrolls rather than wrapping labels to 2-3 lines (P2-11). */
    overflow-x: auto;
    scrollbar-width: thin;
    /* R0-07: dcc.Tabs gives each tab width:calc(100%/N); with nowrap labels the
       text painted into the neighbor and clicks selected the wrong tab.
       Flex row + content-sized tabs makes the overflow scroll real. */
    flex-wrap: nowrap;
}

@media (min-width: 768px) {
    /* !important: beats the Tailwind md:block on pp-stats-tabs. */
    .pe-view-tabs {
        display: flex !important;
    }
}

.pe-view-tabs .tab {
    width: auto !important;
    flex: 0 0 auto !important;
}

.pe-view-tabs .tab {
    background: transparent !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 0.75rem;
    white-space: nowrap;
    padding: 6px 10px 10px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
    height: auto !important;
    position: relative;
}

.pe-view-tabs .tab:hover {
    color: var(--text-primary) !important;
    background-color: rgba(var(--accent-rgb), 0.10) !important;
}

.pe-view-tabs .tab--selected {
    color: var(--text-primary) !important;
    border-bottom-color: transparent !important;
}

.pe-view-tabs .tab--selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent-color);
    border-radius: 4px;
}

.ag-theme-alpine-dark .ag-header-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.ag-theme-alpine-dark .ag-cell {
    padding: 12px 8px;
}

/* In-cell sparklines (Player Explorer) */
.sparkline-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    line-height: 1;
}

.sparkline-wrap {
    width: 60px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.95;
    display: flex;
    align-items: center;
}

.sparkline-svg {
    width: 60px;
    height: 18px;
    display: block;
    vertical-align: middle;
}

.sparkline-svg path {
    stroke: var(--text-secondary);
}

.sparkline-svg.sparkline-up path {
    stroke: var(--success-color);
}

.sparkline-svg.sparkline-down path {
    stroke: var(--danger-color);
}

.sparkline-svg.sparkline-flat path {
    stroke: var(--text-secondary);
    opacity: 0.8;
}

.sparkline-value {
    white-space: nowrap;
}

/* Trend-direction glyph beside sparklines (uiux-audit P0-10): direction is
   encoded by the arrow, hue only reinforces it (red = hot/up, blue = cold/
   down). */
.sparkline-dir,
.home-snapshot-dir {
    font-size: 0.7em;
    line-height: 1;
    flex: 0 0 auto;
}

/* Home leader rows link to profiles. */
.home-snapshot-name-link {
    text-decoration: none;
    color: inherit;
    min-width: 0;
    display: block;
}

.home-snapshot-name-link:hover .home-snapshot-name {
    text-decoration: underline;
    color: var(--text-primary);
}

@media (max-width: 767.98px) {
    /* Player Explorer mobile (uiux-audit P0-2): NO transform scaling — the old
       scale(0.52) "zoom-out" produced ~6px text, ~27px rows and click-target
       drift. Instead the grid shows a curated tier-1 column set (clientside
       curation in player_explorer.py reading pe-mobile-cols) at native row
       heights, with horizontal scroll for the rest. */
    #pe-grid {
        width: 100%;
        max-width: 100%;
    }

    #pe-grid.ag-theme-alpine-dark .ag-header-cell {
        font-size: 0.75rem;
    }

    #pe-grid.ag-theme-alpine-dark .ag-cell {
        padding: 8px 6px;
        font-size: 0.8125rem; /* 13px floor for data text */
    }

    #pe-grid .sparkline-cell {
        gap: 6px;
    }

    #pe-grid .sparkline-wrap {
        width: 34px;
        height: 12px;
    }

    #pe-grid .sparkline-svg {
        width: 34px;
        height: 12px;
    }

    #pe-grid .trend-icon {
        font-size: 0.9em;
        margin-left: 4px;
    }

    /* Player Explorer: hide pagination page size selector on mobile. */
    #pe-grid .ag-paging-panel .ag-paging-page-size {
        display: none;
    }

    /* Player name cell renderer: slightly smaller headshot + tighter spacing */
    #pe-grid .pe-player-name-link + img,
    #pe-grid img.w-6.h-6 {
        width: 20px !important;
        height: 20px !important;
        margin-right: 6px !important;
    }

    /* Player Explorer: stat view selector should be dropdown-only on mobile. */
    #pe-view-tabs {
        display: none;
    }

    #pe-view-dropdown {
        display: block;
    }
}

@media (min-width: 768px) {
    /* Player Explorer: show tabs on desktop, hide dropdown.
       flex (not block) so the R0-07 content-sized tab row applies. */
    #pe-view-tabs {
        display: flex;
    }

    #pe-view-dropdown {
        display: none;
    }
}

/* Player Explorer: clickable player name (opens profile modal) */
.pe-player-name-link {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.pe-player-name-link:hover {
    text-decoration: underline;
}

/* Per-column Up/Down quick filter controls */
.trend-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    line-height: 1.1;
    width: 100%;
}

.trend-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-header-controls {
    display: flex;
    gap: 6px;
}

.trend-filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0 6px;
    border-radius: 8px;
    font-size: 0.65rem;
    line-height: 1.3;
}

.trend-filter-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.trend-filter-btn.active {
    border-color: var(--accent-color);
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Avg Percentile Score: per-column add/remove control (inline, right of title). */
.trend-header-title-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.trend-header-title-row .trend-header-title {
    flex: 1 1 auto;
    min-width: 0;
}

.trend-header-title-row .aps-toggle-btn {
    flex: 0 0 auto;
}

.aps-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: box-shadow 160ms ease, border-color 160ms ease, color 160ms ease,
        background-color 160ms ease, opacity 160ms ease;
}

/* "+" state: highlighted with an accent glow to invite the click. */
.aps-toggle-btn.aps-add-btn {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35),
        0 0 8px rgba(var(--accent-rgb), 0.55);
    animation: aps-add-glow 1.8s ease-in-out infinite;
}

.aps-toggle-btn.aps-add-btn:hover {
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.55),
        0 0 10px rgba(var(--accent-rgb), 0.8);
}

/* "-" state: selected; show a faded/grayed remove control. */
.aps-toggle-btn.aps-remove-btn {
    border-color: var(--border-color);
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
    opacity: 0.55;
    animation: none;
}

.aps-toggle-btn.aps-remove-btn:hover {
    opacity: 0.9;
    border-color: var(--accent-color);
    color: var(--text-primary);
}

@keyframes aps-add-glow {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35),
            0 0 6px rgba(var(--accent-rgb), 0.45);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.5),
            0 0 12px rgba(var(--accent-rgb), 0.85);
    }
}

@media (prefers-reduced-motion: reduce) {
    .aps-toggle-btn.aps-add-btn {
        animation: none;
    }
}

/* Avg Percentile Score column cell. */
.aps-score-cell {
    font-variant-numeric: tabular-nums;
}
.pe-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
}

/* Modal Enhancements */
.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

.modal-header {
    background-color: var(--primary-color) !important;
    border-bottom: 2px solid var(--accent-color) !important;
    border-radius: 12px 12px 0 0 !important;
}

.modal-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem !important;
}

/* Navbar Enhancements */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid var(--accent-color);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nav-link {
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    border-radius: 8px;
}

.nav-link:hover {
    color: var(--accent-color) !important;
    background-color: rgba(var(--accent-rgb), 0.1);
}

/* Loading Indicator */
.custom-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex: 0 0 auto;
    border: 4px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

/* Player Trends: hide the empty-state while the chart callback is loading.
     (Dash sets data-dash-is-loading="true" on outputs while they update.) */
#pt-chart-empty[data-dash-is-loading="true"] {
    display: none !important;
}

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

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/* Metric Badges */
.metric-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem;
}

.metric-badge-high {
    background-color: rgba(225, 87, 89, 0.20);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.metric-badge-medium {
    background-color: rgba(255, 193, 7, 0.2);
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}

.metric-badge-low {
    background-color: rgba(76, 156, 223, 0.20);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

/* Sidebar Enhancements */
.sidebar {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Charts */
.plotly-graph-div {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* Accent glow utilities */
.glow-on-hover:hover {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45));
}

.glow-on-focus:focus-visible,
.glow-on-focus:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}

/* Apply glow to key interactive elements already tagged with neo-shadow */
.neo-shadow:hover {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.38));
}

.neo-shadow:focus-visible {
    box-shadow:
        6px 6px 14px rgba(0, 0, 0, 0.45),
        -6px -6px 14px rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(var(--accent-rgb), 0.30);
}

/* Plotly modebar: make it feel native */
.js-plotly-plot .plotly .modebar {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-group {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-btn {
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
}

.js-plotly-plot .plotly .modebar-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.20));
}

/* Home CTAs: subtle glow to reinforce clickability */
.home-tile-link:hover .home-link-button {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.28));
}

/* Date Picker */
.DateRangePicker {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 0.35rem;
    white-space: nowrap;
}

.DateInput {
    background-color: var(--card-bg) !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
}

/* Date range arrow/separator (React-Dates) */
.DateRangePickerInput {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.35rem;
    white-space: normal;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.DateRangePickerInput_arrow {
    color: var(--text-secondary) !important;
    padding: 0 0.25rem;
    flex: 0 0 auto;
}

.DateRangePickerInput_arrow_svg {
    fill: var(--text-secondary) !important;
}

.DateInput_input {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    height: 36px !important;
    line-height: 1.2 !important;
    font-size: 0.875rem;
    font-family: inherit;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.DateInput_input:hover {
    border-color: var(--accent-color) !important;
}

.CalendarDay__selected {
    background: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
}

/* Input Fields */
input[type="number"],
input[type="text"] {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 0.5rem;
    width: 100%;
    transition: border-color 0.2s ease;
}

/* Prevent global input width rules from breaking 3rd-party controls */
input.DateInput_input {
    width: 100% !important;
}

input[type="number"]:focus,
input[type="text"]:focus {
    border-color: var(--accent-color) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* Page Headers */
.page-header {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--accent-color);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Summary Cards */
.stat-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--primary-color) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Homepage "Where do I find this CSV?" help modal. Rendered at the page root so
   it escapes the feature-card stacking contexts (the Player Profiles tile uses
   z-50 for its search dropdown). Forced above all page chrome. */
#home-roster-help-modal.home-roster-help-modal {
    z-index: 2147483647 !important;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-slow {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: spinSlow 10s linear infinite;
}

/* Home hero banner */
.home-hero {
    position: relative;
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    min-height: 282px;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.72) 100%),
        url("oracle_park_night.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    /* Keep home plate near the bottom while showing a bit more above it. */
    background-position: center, 50% 69%;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

@media (max-width: 640px) {
    .home-hero {
        /* On smaller screens, keep the crop slightly lower to preserve the infield. */
        background-position: center, 50% 75%;
    }
}

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

/* Feature icon hover cue */
.feature-icon {
    transition: color 0.2s ease, filter 0.2s ease;
}

.custom-card:hover .feature-icon {
    color: var(--accent-color) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35));
}

/* Home page feature tiles: make the whole tile feel clickable.
   Mimic Player Explorer tab hover tint (accent/10) and apply to CTA too. */
.home-tile-link:hover {
    background-color: rgba(var(--accent-rgb), 0.06) !important;
    border-color: rgba(var(--accent-rgb), 0.55) !important;
}

/* Home page: Roto+ snapshot tables
   Goal: keep player names readable on tight widths by shrinking the trendline column. */
.home-snapshot-table {
    table-layout: fixed;
    width: 100%;
}

.home-snapshot-table col.snap-col-rank { width: 2.5rem; }
/* Shrink sparkline/trend/roto columns as the viewport tightens to preserve name width. */
.home-snapshot-table col.snap-col-spark { width: clamp(3.75rem, 10vw, 9rem); }
.home-snapshot-table col.snap-col-trend { width: clamp(3rem, 6vw, 5rem); }
.home-snapshot-table col.snap-col-roto { width: clamp(3.75rem, 7vw, 5rem); }

.home-snapshot-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-snapshot-sparkline {
    width: 100%;
    max-width: 64px;
    height: 18px;
}

/* Tight viewports: reduce padding on non-name columns to preserve name width. */
@media (max-width: 950px) {
    .home-snapshot-table th:nth-child(1),
    .home-snapshot-table td:nth-child(1) { padding-right: 0.5rem !important; }

    .home-snapshot-table th:nth-child(3),
    .home-snapshot-table td:nth-child(3),
    .home-snapshot-table th:nth-child(4),
    .home-snapshot-table td:nth-child(4) { padding-right: 0.5rem !important; }
}

@media (max-width: 850px) {
    .home-snapshot-sparkline { max-width: 52px; height: 16px; }
}

@media (max-width: 700px) {
    .home-snapshot-sparkline { max-width: 46px; height: 14px; }
}

/* Player Profiles: percentile slider rows */
.pp-metric-row {
    display: grid;
    grid-template-columns: 160px 1fr 92px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-metric-row:last-child {
    border-bottom: none;
}

.pp-percentile-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding-top: 13px;
}

#pp-percentiles {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: visible;
}

.pp-percentile-section {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 12px 6px;
    width: 100%;
    max-width: 560px;
    background: linear-gradient(135deg, var(--pp-section-tint, rgba(127, 157, 187, 0.08)), rgba(0, 0, 0, 0.15));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 11px var(--pp-section-glow, rgba(127, 157, 187, 0.22));
}

.pp-percentile-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.pp-percentile-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--pp-section-color, var(--accent-color));
    opacity: 0.78;
    white-space: nowrap;
}

.pp-percentile-section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--pp-section-color, var(--accent-color)), rgba(255, 255, 255, 0));
    opacity: 0.5;
}

.pp-percentile-section-body .pp-metric-row {
    padding: 8px 0;
}

/* App-wide widget styling (flat dark surfaces with a subtle hairline border). */
.app-widget {
    box-shadow: none;
}

.app-widget--glass {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* App header matches widget styling but stays flush to the viewport edges. */
.app-header {
    background: rgba(14, 17, 23, 0.92) !important;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(140%) blur(8px) !important;
    -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
}

.app-nav-link {
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 0.01em;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.45);
    outline: none;
}

.app-nav-menu {
    border: 1px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

.app-nav-menu-link {
    color: var(--text-primary);
    font-weight: 400;
    transition: color 160ms ease, background 160ms ease;
}

.app-nav-menu-link:hover,
.app-nav-menu-link:focus-visible {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.14);
    outline: none;
}

/* Feature tiles use the same flat widget styling as primary widgets. */
.home-feature-card {
    box-shadow: none !important;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.app-widget-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
}

.app-widget-title {
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: rgba(232, 234, 237, 0.95);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-widget-title i {
    color: rgba(255, 255, 255, 0.85);
}

.app-widget-header i,
.app-page-title i,
.sub-widget-header i,
.sub-widget-title i,
.app-widget button i,
.app-widget a i,
.app-chip i {
    font-size: 0.95em;
    line-height: 1;
    font-weight: 600;
    text-rendering: geometricPrecision;
}


.app-widget-divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
    opacity: 1;
}

.app-page-title {
    font-size: 1.5rem;
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #e8eaed;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.app-page-title i {
    color: rgba(255, 255, 255, 0.85);
}

/* Thin separators + spacing rhythm helpers. */
.app-divider {
    height: 1px;
    background: var(--border-color);
    opacity: 1;
}

.space-y-12 > * + * {
    margin-top: var(--space-12);
}

.space-y-4 > * + * {
    margin-top: 4px;
}

.space-y-16 > * + * {
    margin-top: var(--space-16);
}

.space-y-24 > * + * {
    margin-top: var(--space-24);
}

.sub-widget-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.sub-widget-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(155, 161, 173, 0.9);
}

.sub-widget-divider {
    width: 100%;
    height: 1px;
    background: var(--border-color);
    opacity: 1;
}

.pp-metric-name {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

.pp-metric-raw {
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pp-pct-track {
    position: relative;
    height: 14px;
    border-radius: 9999px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(44, 95, 141, 0.55);
}

.pp-pct-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 9999px;
    opacity: 0.95;
}

.pp-pct-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--pp-pct-color, var(--accent-color));
    border: 2px solid rgba(10, 25, 41, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 6px;
}

.pp-pct-marker::before {
    content: none;
}

.pp-pct-bubble {
    position: static;
    background: transparent;
    color: var(--text-primary);
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 0;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}

/* Player Splits: compact table rendering so split columns have room.
   This intentionally does NOT change grid column widths; it only reduces
   internal element sizes to avoid overlap. */
#ps-splits-grid .pp-pct-track {
    height: 9px;
    overflow: visible;
}

/* Player Splits: reserve a small buffer between the bar and the raw value. */
#ps-splits-grid .ps-splits-track {
    margin-right: 6px;
}

#ps-splits-grid .pp-pct-marker {
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-width: 1px;
    box-shadow: none;
}

/* uiux-audit P0-6: the stat values are the page's whole point — 0.45/0.46rem
   (~7px) made them unreadable on every device. 0.75rem is the data-text
   floor; the grid scrolls horizontally rather than shrinking below it. */
#ps-splits-grid .pp-pct-bubble {
    font-size: 0.75rem;
}

#ps-splits-grid .ps-splits-raw,
#ps-splits-grid .ps-splits-delta {
    font-size: 0.75rem;
    line-height: 1.15;
}

#ps-splits-grid .ps-splits-metric {
    font-size: 0.8125rem;
}

/* Player Splits: metric column blends on desktop; below md it is sticky
   over horizontally-scrolling columns and MUST be opaque (R0-30). */
@media (min-width: 768px) {
    #ps-splits-grid .ps-splits-metric,
    #ps-splits-grid .pc-metric-sticky {
        background: transparent !important;
    }
}

@media (max-width: 767px) {
    #ps-splits-grid .pc-metric-sticky {
        background: var(--card-bg) !important;
    }
}

@media (max-width: 767.98px) {
    /* Player Profiles: Stats selector should be dropdown-only on mobile.
       (Some environments may not include Tailwind responsive utilities.) */
    #pp-stats-tabs {
        display: none;
    }

    #pp-stats-dropdown {
        display: block;
    }

    /* Player Profiles: on very small widths the percentile track can get squeezed
       into a tiny pill by the name/value columns. Stack the track below to give
       it full row width. */
    #pp-percentiles .pp-metric-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name raw"
            "track track";
        align-items: start;
        gap: 6px 10px;
    }

    #pp-percentiles .pp-metric-name {
        grid-area: name;
        font-size: 0.82rem;
        line-height: 1.15;
    }

    #pp-percentiles .pp-metric-raw {
        grid-area: raw;
        white-space: nowrap;
    }

    #pp-percentiles .pp-metric-row > :nth-child(2) {
        grid-area: track;
    }

    #pp-percentiles .pp-pct-track {
        height: 12px;
    }

    #pp-percentiles .pp-pct-marker {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
    }

    #pp-percentiles .pp-pct-bubble {
        font-size: 0.65rem;
    }

    /* Player Comparison: tighten the comparison table on mobile. */
    #pc-comparison-bars .pp-metric-name {
        font-size: 0.75rem;
    }

    #pc-comparison-bars .pp-pct-track {
        height: 12px;
    }

    #pc-comparison-bars .pp-pct-marker {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
    }

    #pc-comparison-bars .pp-pct-bubble {
        font-size: 0.65rem;
    }

    /* Player Comparison: keep the Metric column frozen during horizontal scroll. */
    #pc-comparison-bars .pc-metric-sticky {
        position: sticky;
        left: 0;
        z-index: 20;
        background: var(--dark-bg);
        padding-right: 6px;
    }

    /* Player Splits: match Player Comparison tight mobile layout.
       uiux-audit P0-6: same 0.75rem data-text floor as desktop — the old
       0.4rem (6.4px) bubbles were unreadable; horizontal scroll (with the
       sticky metric column below) is the density valve, not type size. */
    #ps-splits-grid .pp-metric-name {
        font-size: 0.75rem;
    }

    #ps-splits-grid .pp-pct-track {
        height: 10px;
        overflow: visible;
    }

    #ps-splits-grid .ps-splits-track {
        margin-right: 5px;
    }

    #ps-splits-grid .pp-pct-marker {
        min-width: 14px;
        height: 14px;
        padding: 0 2px;
        border-width: 1px;
        box-shadow: none;
    }

    #ps-splits-grid .pp-pct-bubble {
        font-size: 0.75rem;
    }

    /* R0-14: the delta column ran into the right split's raw value
       ("0.415-0.002" read as one number). */
    #ps-splits-grid .ps-splits-delta {
        white-space: nowrap;
        padding-left: 6px;
    }

    #ps-splits-grid .ps-splits-raw {
        padding-right: 4px;
    }

    /* Player Splits: keep the Metric column frozen during horizontal scroll. */
    #ps-splits-grid .pc-metric-sticky {
        position: sticky;
        left: 0;
        z-index: 20;
        background: transparent;
        padding-right: 6px;
    }
}

@media (min-width: 768px) {
    /* Player Profiles: show tabs on desktop, hide dropdown. */
    #pp-stats-tabs {
        display: block;
    }

    #pp-stats-dropdown {
        display: none;
    }
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 1rem;
    }
    
    .page-header {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

/* Tooltips */
.custom-tooltip {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Tags */
.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: rgba(var(--accent-rgb), 0.2);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 0.125rem;
    color: var(--accent-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1.125rem;
}

/* ===========================================================================
   Touch & type floor (uiux-audit P1-4) — one scoped layer instead of chasing
   sub-44px targets page by page. Applies on coarse pointers and phone
   widths; desktop pointer density is untouched. Kept at the END of this
   sheet so it wins the cascade (several base rules force 36px !important).
   =========================================================================== */
@media (pointer: coarse), (max-width: 767px) {
    /* Dropdowns (react-select v1 + v5) and date inputs: 44px targets. */
    .Select-control,
    .Select__control {
        min-height: 44px !important;
        height: auto !important;
    }

    .Select-placeholder,
    .Select-value {
        line-height: 42px !important;
    }

    .Select-input {
        height: 42px !important;
    }

    .DateInput_input {
        min-height: 44px;
        font-size: 16px;
    }

    /* Text inputs never below 16px (iOS focus-zoom threshold). */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea {
        font-size: 16px;
    }

    /* Buttons and links styled as buttons: 44px hit target. Grid-internal
       icon buttons (AG header/menu) are excluded — rows are 52px so their
       targets are already tall. */
    button:not([class*="ag-"]) {
        min-height: 44px;
    }

    /* Filter/metric chips: 40px min with comfortable padding. */
    .app-chip,
    .pe-controls-chip {
        min-height: 40px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Slider handles: 26px grab targets (was 14px). */
    .rc-slider-handle {
        width: 26px !important;
        height: 26px !important;
        margin-top: -11px !important;
    }

    .rc-slider-rail,
    .rc-slider-track {
        height: 6px;
    }

    /* Label floor: form labels never below 13px on touch. (1em = inherited
       size, so already-larger labels are left alone.) */
    label {
        font-size: max(0.8125rem, 1em);
    }
}

/* ===========================================================================
   Responsive-table contract (uiux-audit P1-1) — paired with assets/table_ux.js
   =========================================================================== */
.rt-scroll,
.es-table-wrap {
    position: relative;
}

/* Right-edge fade while a container actually overflows: clipped columns read
   as "more content this way", never as the end of the table. */
.rt-has-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25) 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25) 100%);
}

.rt-swipe-hint {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.72rem;
    color: var(--text-primary);
    background: rgba(var(--card-bg-rgb), 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.rt-swipe-hint--gone {
    opacity: 0;
}

/* Analyzer positional heatmap: pin the row-label column during horizontal
   scroll (uiux-audit P1-1). */
#fta-heatmap th:first-child,
#fta-heatmap td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card-bg);
}

/* Sticky column-header rows on Comparison / Splits (uiux-audit P1-12): the
   labels stay visible while scrolling long metric lists. Offset clears the
   sticky app header via the measured --app-header-h (assets/chat_ux.js). */
.pc-header-sticky {
    position: sticky;
    top: var(--app-header-h, 64px);
    z-index: 25;
    background: var(--card-bg);
}

/* Mobile drawer ergonomics (uiux-audit P1-13). */
@media (max-width: 767px) {
    /* Apply actions pin to the bottom of the scrolling drawer panel — no
       more burying "Apply" under 300+ option chips. */
    #pe-mobile-apply,
    #ps-mobile-apply,
    #pc-mobile-apply,
    #pt-mobile-apply {
        position: sticky;
        bottom: 0;
        z-index: 10;
        box-shadow: 0 -10px 18px rgba(0, 0, 0, 0.45);
    }

    /* Drawer close glyphs: real 44px hit targets. */
    #pe-howto-mobile-close,
    #ps-mobile-close,
    #pc-mobile-close,
    #pt-mobile-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    /* Splits: the Filters opener floats once the header scrolls away, so
       changing a filter never means scrolling back to the top. Opaque
       accent pill (R0-13 — a transparent quiet-strip once made this an
       invisible floating word blocking the footer links). */
    #ps-open-controls {
        position: fixed;
        right: 14px;
        bottom: 18px;
        z-index: 40;
        border-radius: 9999px;
        min-height: 48px;
        padding-left: 18px;
        padding-right: 18px;
        background: var(--accent-color) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
    }

    /* Keep the last content clear of the floating pill. */
    #ps-splits-grid {
        padding-bottom: 84px;
    }
}

/* Tier comparison responsive swap (uiux-audit P1-15): table on md+, stacked
   per-tier cards on phones. */
.tier-cards {
    display: none;
}

@media (max-width: 767px) {
    .tier-table-wrap { display: none; }

    .tier-cards {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .tier-card {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        background: rgba(var(--card-bg-rgb), 0.6);
        padding: 18px 16px;
    }

    .tier-card--current {
        border-color: rgba(var(--accent-rgb), 0.55);
        box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.3);
    }

    .tier-card-features {
        list-style: none;
        margin: 12px 0 14px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .tier-card-feature {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--text-primary);
    }
}

/* ===========================================================================
   Navigation IA (uiux-audit P1-5/P1-6): grouped dropdowns, active route,
   fixed-overlay mobile drawer, global search hotkey.
   =========================================================================== */
.app-nav-group > summary::-webkit-details-marker {
    display: none;
}

.app-nav-caret {
    font-size: 0.6rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.app-nav-group[open] > summary .app-nav-caret {
    transform: rotate(180deg);
}

/* Active route (set by assets/nav_ux.js with aria-current="page"). */
.app-nav-link--active,
.app-nav-menu-link--active {
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 0 rgba(var(--accent-rgb), 0.9);
    background: rgba(var(--accent-rgb), 0.08);
}

/* Group summary highlights when a child route is active. */
.app-nav-group--active > summary {
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 0 rgba(var(--accent-rgb), 0.9);
}

@media (max-width: 899px) {
    /* Fixed overlay drawer replacing the in-flow panel that pushed 1300px of
       content and relocated its own toggle. (F1-09: nav breakpoint is 900 —
       at 768-850 the desktop nav overflowed and hid the sign-in button.) */
    #navbar-collapse.app-nav-open {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(86vw, 340px);
        z-index: 70;
        margin: 0;
        padding: 12px 14px 24px;
        overflow-y: auto;
        background: rgba(14, 17, 23, 0.97);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: -18px 0 40px rgba(0, 0, 0, 0.5);
    }

    .nav-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 65;
        border: none;
        background: rgba(5, 6, 9, 0.6);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .nav-drawer-close {
        position: sticky;
        top: 0;
        z-index: 5;
        align-self: flex-end;
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
        border: none;
        border-radius: 10px;
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.06);
    }

    /* Drawer group menus render in-flow and indented (not floating). */
    #navbar-collapse.app-nav-open .app-nav-menu {
        margin-left: 10px;
    }
}

@media (min-width: 900px) {
    .nav-drawer-close,
    .nav-drawer-backdrop {
        display: none !important;
    }
}

/* The header's backdrop-filter creates a CSS containing block that would
   trap the fixed drawer/backdrop inside the header box — lift it while the
   drawer OR the account popover is open (R0-18: the popover's backdrop was
   trapped to the 72px header strip, so click-outside never dismissed). */
@media (max-width: 899px) {
    .app-header:has(#navbar-collapse.app-nav-open) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

.app-header:has(#profile-popover-wrap[style*="block"]) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.profile-popover-backdrop {
    z-index: 75;
}

.profile-popover {
    z-index: 76;
    position: relative;
}

/* Deep-link metric toast on Player Trends (uiux-audit P1-8). */
.pt-url-toast {
    display: flex;
    align-items: center;
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--warning-color);
    border: 1px solid rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.08);
}

/* Hot/cold badge icons (uiux-audit P2-1) — replace the 🔥/🧊 emoji. */
.hotcold--hot { color: var(--pct-good); }
.hotcold--cold { color: var(--pct-poor); }

/* Provenance line in the footer (uiux-audit P2-6). */
.app-footer-provenance {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 6px 16px 2px;
    opacity: 0.85;
}

/* Posts filter disclosure (uiux-audit P2-14): open by default; the toggle
   only exists on phones. Trial-banner icon alignment fix included. */
.posts-filters-toggle {
    list-style: none;
    cursor: pointer;
    display: none;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.posts-filters-toggle::-webkit-details-marker {
    display: none;
}

@media (max-width: 767px) {
    .posts-filters-toggle {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}

.profile-sub-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.profile-sub-status > i {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Segmented pills for binary/ternary choices (uiux-audit P2-9): replaces
   two-option dropdowns that hid their choices behind a click. */
.seg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seg-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 38px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 160ms ease, color 160ms ease, background 160ms ease;
}

.seg-pill:hover {
    color: var(--text-primary);
}

.seg-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.seg-pill:has(input:checked) {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}

.seg-pill:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.55);
}

/* Visually-hidden accessible labels (belt-and-braces for Tailwind sr-only). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Home mobile compaction (uiux-audit P2-7): the hero spent the first fold
   repeating the app name that's already in the header, and each feature
   card was a full screen tall. */
@media (max-width: 767px) {
    .home-hero {
        padding: 20px 16px !important;
    }

    .home-hero h1 {
        font-size: 1.75rem !important;
        margin-bottom: 6px !important;
    }

    .home-feature-card {
        padding: 12px !important;
    }

    .home-feature-card p {
        display: none; /* icon + title carry it at this size */
    }
}

/* League-average pinned row (uiux-audit P2-4). */
.ag-theme-alpine-dark .ag-floating-top .ag-row,
.ag-theme-alpine-dark .ag-row-pinned {
    font-style: italic;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.035);
}

/* Profiles quick-links row (uiux-audit P2-5). */
.pp-quicklink {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    min-height: 36px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pp-quicklink:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.1);
}

/* "On your roster" star in home leader rows (uiux-audit P2-8). */
.home-my-player {
    color: var(--warning-color);
    font-size: 0.7em;
    flex: 0 0 auto;
}

/* Key-stat strip on the Profiles identity header (uiux-audit P2-3). */
.pp-keystat {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.pp-keystat-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}

.pp-keystat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}

/* R0-19: plotly.js treats displayModeBar:'hover' as ALWAYS-VISIBLE on touch
   devices — the bar parked over chart titles and range chips on every
   chart. scrollZoom is already off; nothing essential is lost on touch. */
@media (pointer: coarse) {
    .js-plotly-plot .modebar {
        display: none !important;
    }
}

/* Profiles/Trends: the rangeslider eats ~90px of a phone chart. */
@media (max-width: 767px) {
    .js-plotly-plot .rangeslider-container {
        display: none;
    }
}

/* R0-08: the sticky must live on the #app-navbar wrapper — the nav's own
   `sticky top-0` could only stick within this 148px wrapper, which is why
   the app header never stuck anywhere. z-80 also puts the header's drawer/
   backdrop children above page content that reached z-50 (R0-17). */
#app-navbar {
    position: sticky;
    top: 0;
    /* z-50, NOT higher: page-level fixed overlays (splits/trends drawers,
       profile modal — all z-50, later in DOM) must win ties so their close
       buttons aren't blocked by the header strip. The home-tile conflict
       that motivated z-80 was solved by dropping the tiles to z-10. */
    z-index: 50;
}

/* R0-22: the fade masks the AG grid root when its center viewport overflows
   (the wrapper-based mask can't see internal scroll). */
.ag-root-wrapper.rt-has-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25) 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), rgba(0, 0, 0, 0.25) 100%);
}

/* R0-25: Roto+ info disclosure (tap-friendly; title tooltips are dead on touch). */
.roto-info {
    position: relative;
}

.roto-info-toggle {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    color: var(--text-secondary);
}

.roto-info-toggle::-webkit-details-marker { display: none; }

.roto-info-pop {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    width: 230px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    font-size: 0.78rem;
    color: var(--text-primary);
    text-align: left;
    white-space: normal;
    font-weight: 400;
}

@media (pointer: coarse) {
    .roto-info-toggle { min-width: 44px; min-height: 44px; }
}

/* R1-18: the page must not scroll behind the open drawer. */
body:has(#navbar-collapse.app-nav-open) {
    overflow: hidden;
}

#navbar-collapse.app-nav-open {
    overscroll-behavior: contain;
}

/* R1-20: AG Grid pagination/filter internals join the touch floor (they
   were excluded by the blanket [class*="ag-"] carve-out). */
@media (pointer: coarse), (max-width: 767px) {
    .ag-paging-button {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ag-floating-filter-button-button {
        min-width: 36px;
        min-height: 36px;
    }

    .ag-floating-filter-input .ag-input-field-input {
        min-height: 38px;
        font-size: 16px;
    }
}

/* R1-14: Profiles stats table — cap the label-to-value stretch on wide
   screens (values sat ~740px from their labels). */
@media (min-width: 1024px) {
    #pp-stats-table table,
    #pp-stats-table {
        max-width: 640px;
    }
}

/* R2-03: home leader-row links reach the 44px touch floor. */
@media (pointer: coarse), (max-width: 767px) {
    .home-snapshot-name-link {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* R2-06: profile quick pills too. */
    .pp-quicklink {
        min-height: 44px;
        padding: 8px 14px;
    }
}

/* R2-16: ES sticky Split column matches the card surface + edge cue. */
.es-table th:first-child,
.es-table td:first-child {
    background: var(--card-bg);
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.45);
}

/* R2-20: hide Comparison's stray empty container when it has no content. */
#pc-comparison-bars > div:empty {
    display: none;
}

/* R2-10: metric labels wrap at word boundaries only — "SwingDecisions+"
   left an orphaned "+" on its own line. */
#ps-splits-grid .pp-metric-name {
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

/* R2-19: footer support anchor joins the touch floor. */
@media (pointer: coarse), (max-width: 767px) {
    .app-footer-support-btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* R2-08: comparison raw values never ellipsize inside ringed cells. */
@media (max-width: 767px) {
    #pc-comparison-bars .pp-metric-raw,
    #pc-comparison-bars .ps-splits-raw {
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }
}

/* Pitch Arsenal redesign: pitch dots, insight chips. */
.at-pitch-dot {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    display: inline-block;
    flex: 0 0 auto;
}

.at-insight-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    min-height: 38px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
}

/* ===========================================================================
   Explorer mobile scroll containment (owner-reported): scrolling rows chained
   into PAGE scroll, sliding the column-name row under the sticky nav so
   headers appeared "half cut off". Contain the grid's internal scrollers and
   size the grid to the viewport below the header so the header row stays
   visible during normal row-scrolling.
   =========================================================================== */
@media (max-width: 767px) {
    #pe-grid {
        height: calc(100dvh - var(--app-header-h, 70px) - 150px) !important;
        min-height: 420px;
        scroll-margin-top: calc(var(--app-header-h, 70px) + 8px);
    }

    #pe-grid .ag-body-viewport,
    #pe-grid .ag-center-cols-viewport {
        overscroll-behavior: contain;
    }
}

/* Pinned name column: ellipsize instead of hard-clipping ("Pete Crow-Armstro"). */
#pe-grid .pe-player-name-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Explorer mobile: the header quick-filter chips (All/Risers/Fallers) push
   the column title out of the 48px header cell — on phones the chips are
   sub-44px targets anyway; the drawer filters cover the use case. */
@media (max-width: 767px) {
    #pe-grid .trend-header-controls {
        display: none;
    }

    #pe-grid .trend-header {
        justify-content: center;
    }
}

/* ===========================================================================
   Branded boot splash (F1-03): Dash's stock app-entry shows a raw top-left
   "Loading..." string on black for 0.3-2.6s on EVERY cold navigation — the
   most-seen frame in the product. Style it into a real splash: house
   background, wordmark, spinner. Pure CSS; removed automatically when React
   hydrates and replaces the entry node.
   =========================================================================== */
#react-entry-point ._dash-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background:
        radial-gradient(900px circle at 78% 6%, rgba(107, 138, 255, 0.06), transparent 60%),
        linear-gradient(160deg, #0b0d11 0%, #0e1117 100%);
    /* hide the raw "Loading..." text */
    color: transparent;
    font-size: 0;
    user-select: none;
}

#react-entry-point ._dash-loading::before {
    content: "Baseball Stats Guru";
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #e8eaed;
}

#react-entry-point ._dash-loading::after {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(107, 138, 255, 0.22);
    border-top-color: #6b8aff;
    animation: bsg-boot-spin 0.85s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    #react-entry-point ._dash-loading::after {
        animation: none;
        border-top-color: rgba(107, 138, 255, 0.6);
    }
}

/* F1-02: dcc.Loading overlays hosting skeleton spinners must never center a
   tall skeleton on a short strip — clip to the region and start at the top.
   (Belt-and-braces beneath the per-component overlay_style props.) */
[class*="dash-default-spinner"],
.dash-spinner {
    width: 100%;
}

/* F1-11: below the nav breakpoint the header row's containing scrollport is
   the horizontal wrapper, so a 74px top offset just displaced it INSIDE the
   table (covering the first rows). Vertical stickiness doesn't exist there
   anyway — zero the offset. */
@media (max-width: 899px) {
    .pc-header-sticky {
        top: 0;
    }
}

/* F1-12: league-load errors get room to breathe (the status line is
   normally a one-line ellipsized whisper). */
.chat-roster-status:has(.text-warning) {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 420px;
}

/* F1-14: the trend-open icon becomes a real target on touch. */
@media (pointer: coarse) {
    #pe-grid .trend-icon {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* F2-01: Explorer assembles in stages — keep the placeholder pieces quiet.
   "Active filters: None" fades in late so the seeded chip (which lands a
   beat after the columns) replaces it invisibly; empty count pill/title
   collapse instead of rendering ghost chrome. */
.pe-filters-none {
    opacity: 0;
    animation: pe-fade-in 0.3s ease 2.5s forwards;
}
@keyframes pe-fade-in {
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pe-filters-none { animation-delay: 1.5s; }
}
#pe-row-count:empty,
#pe-table-title:empty,
#pe-table-date-range:empty {
    display: none;
}

/* F2-10: skip link — visually hidden until keyboard-focused. */
.bsg-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    background: var(--color-accent, #e05a2b);
    color: #fff;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.bsg-skip-link:focus {
    left: 0;
}

/* F2-10: page titles are real h1s now — neutralize UA heading styles so the
   existing .app-page-title look is unchanged. */
h1.app-page-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

/* F2-08: overlay close buttons are real touch/click targets (the profile
   modal's ✕ measured 12×26px). */
#pe-profile-close,
#pe-trends-modal button[id$="-close"],
#pe-howto-close,
#pe-howto-mobile-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
#pe-profile-close:hover,
#pe-howto-close:hover,
#pe-howto-mobile-close:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* F2-13: recently-viewed pills. */
.bsg-recent-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-primary, #e8eaed);
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bsg-recent-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* F2-17: copy-to-clipboard affordance beside the saved link. */
.bsg-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border-radius: 8px;
    color: var(--color-text-secondary, #9aa2ad);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.bsg-copy-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* F2-16: on phones the daily-habit leaders sat ~2,300px deep behind
   marketing tiles. Reorder: hero → ask-the-guru → leaders → the rest. */
@media (max-width: 767.98px) {
    #home-sections {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    #home-sections > * {
        margin-top: 0 !important; /* neutralize space-y-6 under flex order */
    }
    #home-sections > .home-hero { order: -30; }
    #home-sections > .guru-hero { order: -20; }
    #home-sections > #home-sec-snapshot { order: -10; }
}

/* F2-23: at 1024 the paired split cards squeezed the trailing EV/HR columns
   out instead of overflowing — keep the table at natural width and let
   .es-table-wrap scroll (fade cue via table_ux.js). */
.es-table {
    min-width: max-content;
}

/* F2-26: at desktop widths the view-tab strip clipped labels mid-word with an
   invisible scrollbar — wrap instead (there's vertical room); below lg keep
   the scroll but with the table_ux fade cue (rt-scroll on the component). */
@media (min-width: 1024px) {
    .pe-view-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* F2-26: the mixing-rule toast self-dismisses (visually) after a beat. */
.pt-toast-transient {
    animation: pt-toast-fade 0.4s ease 6s forwards;
}
@keyframes pt-toast-fade {
    to { opacity: 0; visibility: hidden; }
}

/* ---- F3 polish batch ---- */

/* F3-13: native widgets (scrollbars, form controls) render dark on
   Windows/Linux instead of glaring light UA chrome. */
:root {
    color-scheme: dark;
}

/* F3-11: Explorer numeric cells right-align like every other stats surface;
   header labels follow. Identity/text columns opt out. */
#pe-grid .ag-cell.trendable-cell,
#pe-grid .ag-cell.aps-score-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#pe-grid .ag-header-cell[col-id] .ag-header-cell-label {
    justify-content: flex-start;
}
/* Reserve the faller/riser triangle slot so ROTO+ values don't shift. */
#pe-grid .trend-icon {
    display: inline-block;
    min-width: 18px;
}

/* F3-14: drawer + nav dropdowns share the page-transition motion language. */
#navbar-collapse.app-nav-open {
    animation: bsg-slide-in 0.18s ease-out;
}
.app-nav-group[open] > .app-nav-menu {
    animation: bsg-pop-in 0.14s ease-out;
}
@keyframes bsg-slide-in {
    from { transform: translateX(-14px); opacity: 0.4; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes bsg-pop-in {
    from { transform: translateY(-4px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #navbar-collapse.app-nav-open,
    .app-nav-group[open] > .app-nav-menu { animation: none; }
}

/* F3-18: visible keyboard focus for the quiet-button family + nav controls. */
#pe-export-csv:focus-visible,
#pe-save-view:focus-visible,
#pe-clear-filters:focus-visible,
#nav-search-btn:focus-visible,
.app-nav-group summary:focus-visible,
.bsg-copy-btn:focus-visible,
.app-nav-link:focus-visible {
    outline: 2px solid var(--color-accent, #e05a2b);
    outline-offset: 2px;
    border-radius: 8px;
}

/* F3-21 (partial): date-picker popover must clear the sticky navbar (z-50);
   narrow-sidebar date inputs stop truncating ("Jul 07, 2"). */
.DateRangePicker_picker {
    z-index: 60 !important;
}
.DateInput_input {
    font-size: 0.82rem;
    text-overflow: ellipsis;
}
/* Explorer avatar slot is reserved so rows don't reflow when images land. */
#pe-grid img.w-6.h-6 {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
}

/* F3-02: Profiles mobile quick-link pills wrapped 2-1-1 beside the headshot,
   stranding it — below md the pill row breaks out to full width. */
@media (max-width: 767.98px) {
    #pp-header > .flex {
        flex-wrap: wrap;
    }
    #pp-header .pp-quicklink {
        flex: 0 0 auto;
    }
}