/* --- SHARED CSS VARIABLES & ROOT DESIGN TOKENS --- */
:root {
    color-scheme: dark;
    /* Deeper, more premium dark mode backgrounds */
    --bg-color: #0a0e17; 
    --card-bg: #131b2c; 
    
    /* Text Colors - Off-white is easier on the eyes than pure white */
    --text-main: #f3f4f6; 
    --text-muted: #9ca3af;
    --border: #1f2937;

    /* Premium Accents (Desaturated for better contrast) */
    --primary-green: #10b981; 
    
    /* Call Out & Target Colors - Using subtle background opacities */
    --target-bg: rgba(16, 185, 129, 0.1); 
    --target-border: #10b981;
    
    --avoid-bg: rgba(239, 68, 68, 0.1); 
    --avoid-border: #ef4444;
    
    --dart-bg: rgba(59, 130, 246, 0.1); 
    --dart-border: #3b82f6;
    
    --stack-color: #f97316;

    /* Status colors for flashButton (js/utils.js), the error toast border, and inline error
       text. These used to be referenced with hard-coded fallbacks but never defined.
       --error-color is the strong red for fills and borders. --error-text is the lighter red
       for text on dark cards, where #ea4335 would be too dim to read comfortably. */
    --success-color: #4ade80;
    --error-color: #ea4335;
    --error-text: #fca5a5;

    /* Button accent colors -- previously hardcoded directly in .btn-blue/.btn-purple below.
       Named for what they are (a specific button's color), not reused from --dart-border/
       --pos-wr-border even though they currently share the same blue: those represent an
       unrelated concept (fantasy "dart throw" / WR position color) that happens to look the
       same today, and could reasonably change independently of what a button looks like. */
    --btn-blue-bg: #3b82f6;
    --btn-purple-bg: #8b5cf6;

    /* Positional Colors - Muted backgrounds with vibrant borders */
    --pos-qb: rgba(239, 68, 68, 0.15);   --pos-qb-border: #ef4444;
    --pos-rb: rgba(16, 185, 129, 0.15);  --pos-rb-border: #10b981;
    --pos-wr: rgba(59, 130, 246, 0.15);  --pos-wr-border: #3b82f6;
    --pos-te: rgba(245, 158, 11, 0.15);  --pos-te-border: #f59e0b;
    --pos-k: rgba(167, 139, 250, 0.15);   --pos-k-border: #a78bfa; /* Sleeper Kicker Lavender */
    --pos-def: rgba(146, 93, 72, 0.15);   --pos-def-border: #925d48; /* Sleeper DEF Rust */

    /* Spacing scale -- a token version of the ad-hoc rem values (0.4rem, 0.6rem, 0.85rem...)
       scattered through inline styles. The margin/padding/gap utilities below, and the
       .stack/.cluster layout primitives, are built on these so vertical/horizontal rhythm
       stays consistent instead of every element picking its own number. Values match what
       was already in use most often, so existing spacing mostly doesn't visibly shift --
       this is about giving those values one shared source, not a visual redesign. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
}

/* --- GLOBAL RESETS --- */
* { 
    box-sizing: border-box; 
    margin: 0; /* Reset margins globally to prevent unwanted scrollbars */
    padding: 0;
}

/* Visually hides content while keeping it available to screen readers -- the standard,
   widely-used pattern (as opposed to display:none, which hides it from assistive tech too). */
.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;
}

/* Skip link: off-screen until a keyboard user tabs to it, then pinned top-left above the
   sticky header (z-index 100). Offset by the notch inset for the installed iPhone PWA. */
.skip-link {
    position: absolute;
    top: calc(0.5rem + env(safe-area-inset-top));
    left: 0.5rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--primary-green);
    color: #0a0e17;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus-visible {
    transform: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    
    /* Apply our new premium font */
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; 
    
    /* CRITICAL FOR FANTASY FOOTBALL: Makes all numbers line up perfectly in columns */
    font-variant-numeric: tabular-nums; 
    
    /* Makes text render crisper on modern screens */
    -webkit-font-smoothing: antialiased;
    
    padding-bottom: 70px; 
    overflow-x: hidden; 
}

.container { 
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    /* Doubled the spacing to let the design breathe */
    padding: 2rem 1.5rem; 
}

/* --- STICKY HEADER --- */
.header { 
    /* Premium Glassmorphism replacing the heavy gradient */
    background: rgba(10, 14, 23, 0.85); /* Uses var(--bg-color) base */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* For Safari */
    
    border-bottom: 1px solid var(--border); 
    padding: 0.75rem 1.5rem; 
    /* Installed PWA uses the black-translucent status bar, so push content below the notch.
       env() is 0 in a normal browser tab, so this is a no-op there. */
    padding-top: calc(0.75rem + env(safe-area-inset-top));
    position: sticky; 
    top: 0; 
    z-index: 100; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    /* Subtly colored shadow instead of generic black */
    box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.4); 
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* --- Header League Select --- */
#draftProfileSelect { 
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.4rem 2.2rem 0.4rem 0.75rem; 
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
}

@media (max-width: 767px) {
    /* 1. Reduce the wide left/right padding on the ends of the header */
    .header {
        padding: 0.5rem 0.5rem; 
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }
    
    /* 2. Reduce the gap between the hamburger menu and the logo */
    .header-left {
        gap: 0.5rem;
    }
    
    /* 3. Hide the app title text to free up massive space for the controls */
    .logo-text {
        display: none;
    }

    /* 4. Implement the missing class to hide the word "Sync" inside the button */
    .hide-on-mobile {
        display: none;
    }
    
    /* 5. Keep the dropdown contained and leave room for the arrows */
        #draftProfileSelect, #headerLeagueSelect { 
            max-width: 130px !important; 
        }

    /* 6. Bigger, easier-to-tap prev/next league buttons on mobile. Desktop keeps the
       original compact size (set inline via .league-nav-btn's base rule below) --
       Shift+Arrow already covers fast league-cycling with a keyboard, so the larger
       touch target and accent border are only needed where a fingertip has to land on
       it precisely. 44px is the standard minimum recommended touch-target size. */
    .league-nav-btn {
        padding: 0.7rem 0.85rem;
        min-width: 44px;
        min-height: 44px;
        border: 1.5px solid var(--primary-green);
    }
    .league-nav-btn svg {
        width: 20px;
        height: 20px;
    }
}
/* --- HAMBURGER MENU & DRAWER --- */
.menu-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(10, 14, 23, 0.7); /* Slightly warmer, softer dark overlay */
    backdrop-filter: blur(4px); /* Blurs the background when menu is open */
    -webkit-backdrop-filter: blur(4px);
    z-index: 999; 
    display: none; 
}

.hamburger-menu { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 280px; 
    height: 100%; 
    background: var(--card-bg); 
    z-index: 1000; 
    
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; 
    
    border-right: 1px solid var(--border); 
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4); 
    display: flex; 
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden; 
    overscroll-behavior: contain;
}

/* Keep a field reached by Tab from landing under the sticky .header (matches the
   scroll-margin-top on #rosRankingsCard). */
html { scroll-padding-top: 5rem; }

/* --- MODAL OVERLAY CHROME (shared) + RANKINGS UPLOAD PREVIEW MODAL (MLS only) --- */
/* The .mds-modal-overlay / .mds-modal pair is the generic backdrop-and-card treatment, also
   used by the shared confirm dialog (showConfirm in utils.js). The .mls-preview-* selectors
   alongside them are the original names this markup shipped with, kept so the preview modal
   in lineup/index.html needs no change. */
.mls-preview-overlay,
.mds-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overscroll-behavior: contain;
}

.mls-preview-modal,
.mds-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    overscroll-behavior: contain;
}

.mls-preview-modal h3,
.mds-modal h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.mls-preview-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
}

.mls-preview-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.mls-preview-list li {
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mls-preview-list li:last-child {
    border-bottom: none;
}

.rankings-preview-rank {
    color: var(--primary-green);
    font-weight: 700;
    font-size: 0.8rem;
    min-width: 2.2rem;
}

.mls-preview-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin: 0 0 1rem 0;
}

/* Destination line directly above the preview modal's buttons. Neutral by default (new set);
   the .is-replace variant matches .btn-danger, since that case overwrites existing data. */
.mls-preview-target {
    font-size: 0.8rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin: 0 0 1rem 0;
}

.mls-preview-target.is-replace {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
}

.mls-preview-actions,
.mds-modal-actions {
    display: flex;
    gap: 0.75rem;
}

.mls-preview-actions .btn,
.mds-modal-actions .btn {
    width: auto;
    flex: 1;
}

/* --- SHARED IN-APP CONFIRM DIALOG (showConfirm in utils.js) --- */
/* Used by MDS, MLS and T-Score in place of window.confirm(). The backdrop and card chrome are
   the generalized .mds-modal-overlay/.mds-modal pair above (same rules the rankings preview
   modal uses), so only the message body and the button row are specific to this dialog. */
.mds-confirm-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 0.75rem 0;
}

.mds-confirm-body p:last-child {
    margin-bottom: 0;
}

/* The preview modal's own content blocks each carry a bottom margin, so .mls-preview-actions
   needs no top spacing of its own; the confirm dialog's body doesn't, so it adds one here. */
.mds-modal-actions {
    margin-top: 1.25rem;
}

.hamburger-menu.open { 
    transform: translateX(0); 
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* Header inside the drawer */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.menu-logo-section { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    font-size: 1.1rem; 
    color: var(--text-muted);
}

.menu-logo-section span strong {
    color: var(--text-main);
}

.menu-logo-img {
    height: 28px;
    width: auto; /* Guarantees 1:1 square ratio */
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); 
}

.close-menu-btn { 
    background: none; 
    border: none; 
    color: var(--text-muted); 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.close-menu-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

/* Nav Links Container */
.menu-nav-links {
    padding: 1rem 0;
    flex-grow: 1; /* Pushes the footer to the bottom */
}

/* Navigation Buttons */
.hamburger-menu .nav-btn { 
    background: transparent; 
    border: none; 
    padding: 0.85rem 1.5rem; 
    text-align: left; 
    font-size: 1rem; 
    color: var(--text-muted); 
    font-weight: 500; 
    cursor: pointer; 
    width: 100%; 
    display: flex;
    align-items: center;
    gap: 0.85rem;
    
    /* We set a transparent border so adding color on hover doesn't shift text */
    border-left: 3px solid transparent; 
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; 
}

/* SVG Icon styling inside buttons */
.hamburger-menu .nav-btn svg {
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hamburger-menu .nav-btn:hover { 
    background: rgba(255, 255, 255, 0.03); 
    color: var(--text-main); 
}

.hamburger-menu .nav-btn:hover svg {
    opacity: 1;
}

.hamburger-menu .nav-btn.active, 
.hamburger-menu .nav-btn.active-link { 
    background: var(--target-bg); 
    color: var(--primary-green); 
    border-left-color: var(--primary-green); 
}

.hamburger-menu .nav-btn.active svg {
    opacity: 1;
}

/* External / Premium Link Styling */
.premium-link-btn {
    margin-top: 1rem;
    position: relative;
}

.premium-link-btn::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: var(--border);
    border-top: 1px dashed var(--text-muted);
    opacity: 0.2;
}

.hamburger-menu .premium-link-btn:hover {
    color: var(--primary-green);
}

.hamburger-menu .premium-link-btn:hover svg {
    transform: translateX(3px); /* Cute little arrow scoot on hover */
}

/* Footer & Ko-fi */
.menu-footer {
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
}

.kofi-link {
    display: block;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kofi-link:hover {
    transform: scale(1.03);
}

.kofi-img {
    height: 36px;
    width: auto;
    max-width: 100%;
    border-radius: 8px;
    border: none;
}

/* --- LOGO & TITLE --- */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none; /* Prevents accidental highlighting */
}

.logo-img {
    height: 32px;
    width: 32px;
    border-radius: 8px;
    object-fit: cover;
    /* Tinted glow instead of harsh border */
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2); 
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.logo-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.1;
}

.logo-text span {
    display: block;
    font-weight: 700;
    color: var(--text-main);
}

.header-controls { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
}
/* --- BOTTOM TAB NAVIGATION --- */
.nav-bar { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    /* Glassmorphism to match the top header */
    background: rgba(19, 27, 44, 0.85); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    border-top: 1px solid var(--border); 
    display: flex; 
    justify-content: space-around; 
    
    /* CRITICAL: env() adds padding for the iPhone/Android home swipe bar */
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); 
    z-index: 98; 
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
    transform: translateZ(0); /* Forces iOS hardware acceleration */
    will-change: transform;   /* Stops the jitter on scroll */ 
}

.nav-bar .nav-btn { 
    background: transparent; 
    border: none; 
    display: flex;
    flex-direction: column; /* Stacks the icon above the text */
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem; /* Smaller text for mobile tabs */
    color: var(--text-muted); 
    font-weight: 600; 
    padding: 0.5rem; 
    cursor: pointer; 
    flex: 1; 
    border-radius: 8px;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    -webkit-tap-highlight-color: transparent; /* Removes blue flash on mobile tap */
    position: relative;
    z-index: 10;
}
.nav-btn * {
    pointer-events: none;
}

/* Tab Icon Animation */
.nav-bar .nav-btn svg {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s;
}

/* Hover & Active States */
.nav-bar .nav-btn:hover { 
    color: var(--text-main); 
    background: rgba(255, 255, 255, 0.05);
}

.nav-bar .nav-btn:active {
    transform: scale(0.92); /* Satisfying spring compression when tapped */
}

.nav-bar .nav-btn.active { 
    color: var(--primary-green); 
}

.nav-bar .nav-btn.active svg {
    transform: translateY(-2px); /* Lifts the icon slightly instead of using a hard border */
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

/* --- TAB CONTENT ANIMATIONS --- */
.tab-content { 
    display: none; 
}

.tab-content.active { 
    display: block; 
    /* Upgraded bezier curve for a smoother fade-in */
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}

@keyframes fadeIn { 
    from { 
        opacity: 0; 
        transform: translateY(8px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}

/* --- SETUP TAB & HERO --- */
.setup-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}
/* MLS: the hero sits outside the tabs (above the setup checklist), so hide it whenever the
   Dashboard (#setupTab) isn't the active tab. */
.container:not(:has(> #setupTab.active)) > .mls-hero {
    display: none;
}
.hero-logo {
    width: 100%;
    max-width: 500px;
    height: auto; /* Guarantees proportional scaling */
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hero-kofi {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
}

/* --- GUIDE BANNER --- */
.guide-intro {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-wrap: pretty;
}

/* .mt-2 belongs to the spacing-utility family (with mt-4/mb-1/mb-4) defined together
   further down -- removed the standalone duplicate that used to live here. */
.guide-banner {
    width: 100%;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(19, 27, 44, 0.9));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
    text-align: left;
}
.guide-banner:hover {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.15), rgba(19, 27, 44, 1));
    border-color: rgba(16, 185, 129, 0.6);
    transform: translateY(-2px);
}
.guide-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.95rem;
}
.guide-arrow {
    color: var(--primary-green);
    transition: transform 0.2s;
}
.guide-banner:hover .guide-arrow {
    transform: translateX(4px);
}

/* --- CARDS & LAYOUT --- */
.settings-card { 
    background: var(--card-bg); 
    padding: 1.5rem; 
    border-radius: 12px; 
    border: 1px solid var(--border); 
    margin-bottom: var(--space-4); /* was 1.25rem -- tightened per feedback that card-to-card spacing felt too loose */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.highlight-card {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.5), var(--card-bg));
}
.card-header {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.centered-header {
    justify-content: center;
    gap: 0.5rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}
.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.step-num {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 0.8rem;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.card-divider {
    border: 0; 
    border-top: 1px solid var(--border); 
    margin: 1.25rem 0;
}
.divider-text {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin: 1.25rem 0 0.5rem 0;
    position: relative;
}

/* --- FORMS & INPUTS --- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.input-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}
.flex-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.form-input { 
    width: 100%; 
    padding: 0.75rem 1rem; 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    font-size: 0.95rem; 
    background: rgba(0,0,0,0.2); 
    color: var(--text-main); 
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.text-center { text-align: center; }

/* Custom Range Slider */
.mds-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
}
.mds-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6; 
    cursor: pointer;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    transition: transform 0.1s ease;
}
.mds-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.mds-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
    transition: transform 0.1s ease;
}
.mds-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
}
/* Keyboard focus: ring the thumb (the track is only 6px tall, so an outline there is hard to see) */
.mds-slider:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #0a0e17, 0 0 0 5px var(--primary-green);
}
.mds-slider:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px #0a0e17, 0 0 0 5px var(--primary-green);
}

/* Grid Layouts */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 0.75rem;
}
.roster-grid .input-group { margin-bottom: 0; }
.roster-grid label { font-size: 0.75rem; text-align: center; color: var(--text-muted); }
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* --- PREMIUM TOGGLE SWITCHES (Replaces checkboxes) --- */
.toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    gap: 16px;
}
.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.toggle-title {
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Toggle titles that are (or contain) a <label for> toggle their switch when clicked, so show
   the hand cursor to say so. */
label.toggle-title,
.toggle-title > label { cursor: pointer; }
.toggle-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch:checked {
    background: var(--primary-green);
}
.toggle-switch:checked::after {
    transform: translateX(20px);
}
.toggle-switch:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

/* --- BUTTONS --- */
.btn { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none; 
    padding: 0.8rem 1.5rem; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 0.95rem; 
    cursor: pointer; 
    width: 100%; 
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s;
    font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary { 
    background: var(--primary-green); 
    color: #0a0e17; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25); filter: brightness(1.1); }

.btn-secondary { background: var(--border); color: var(--text-main); }
.btn-secondary:hover { background: #2d3748; }

.btn-blue { background: var(--btn-blue-bg); color: #0a0e17; }
.btn-purple { background: var(--btn-purple-bg); color: #0a0e17; }
.btn-warning { background: rgba(245, 158, 11, 0.15); color: #fde047; border: 1px solid #f59e0b; }
.btn-warning:hover { background: rgba(245, 158, 11, 0.25); }
.btn-danger { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid #ef4444; }
.btn-danger:hover { background: rgba(239, 68, 68, 0.25); }
.btn-header { 
    background-color: var(--primary-green); 
    color: #0a0e17; /* Dark text on bright button for high contrast */
    border: none; 
    padding: 0.5rem 1rem; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 0.85rem; 
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* Spring-like transitions for hover/press states */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
}

.btn-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-header:active {
    transform: translateY(1px) scale(0.96); /* Simulates a physical click */
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}
/* Base small button styling with smooth spring transitions */
.btn-sm { 
    padding: 0.4rem 0.8rem; 
    border: none; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 0.75rem; 
    cursor: pointer; 
    font-family: inherit;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

/* MDS-namespaced small button (Tracker/Queue: Pick, Taken, Undo, Save, Cancel, reorder arrows).
   Intentionally duplicated from .btn-sm rather than reusing it, for the same reason MLS has
   its own .mls-btn-sm below: this file is shared between both apps, and an unprefixed .btn-sm
   used to be redefined twice in this same stylesheet (once here, once in the MLS-specific
   section), with source order silently deciding which rule any given page got. Both apps now
   use their own namespaced class so neither can be silently resized by the other's override.
   Do not delete this in favor of the bare .btn-sm. */
.mds-btn-sm {
    padding: 0.4rem 0.8rem; 
    border: none; 
    border-radius: 6px; 
    font-weight: 600; 
    font-size: 0.75rem; 
    cursor: pointer; 
    font-family: inherit;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

/* 'Taken' button - Ghost style to reduce visual noise */
.btn-draft { 
    background-color: transparent; 
    color: var(--text-muted); 
    border: 1px solid var(--border); 
}

.btn-draft:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-draft:active {
    transform: scale(0.95); /* Simulates a physical press */
}

/* 'My Pick' button - Premium primary style with subtle glow */
.btn-mine { 
    background-color: var(--primary-green); 
    color: #0a0e17; 
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    border: 1px solid transparent;
}

.btn-mine:hover {
    background-color: #10b981; 
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.btn-mine:active {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
/* .swap-btn / .lock-btn (MLS roster swap+lock controls) defined near their actual
   markup context further down -- removed the earlier duplicate that lived here. */

/* --- HAMBURGER BUTTON --- */
.hamburger-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.hamburger-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.hamburger-btn:active { 
    transform: scale(0.92); 
}

/* --- UTILITIES --- */
.flex-column { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-3); }
.gap-3 { gap: var(--space-4); }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } /* was referenced (trade-group-header, Save Manual SoS button) but never defined -- those margins were silently no-ops until now */
.mt-4 { margin-top: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-3 { margin-left: var(--space-3); }
.mr-2 { margin-right: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pl-2 { padding-left: var(--space-2); }
.pl-6 { padding-left: var(--space-6); }

/* --- LAYOUT PRIMITIVES --- */
/* .stack: vertical rhythm for a run of same-kind items, replacing ad-hoc
   "display:flex; flex-direction:column; gap:0.5rem" inline styles. Pair with a size
   modifier for the gap -- same xs/sm/md/lg scale as .cluster below, both keyed to the
   --space-* tokens, so a "sm" gap means the same thing whether the items stack or run
   horizontally. */
.stack { display: flex; flex-direction: column; }
.stack-xs { gap: var(--space-1); }
.stack-sm { gap: var(--space-2); }
.stack-md { gap: var(--space-3); }
.stack-lg { gap: var(--space-4); }

/* .cluster: a horizontal run of items that wraps instead of overflowing, replacing ad-hoc
   "display:flex; align-items:center; gap:...rem" inline styles used for icon+label rows,
   button rows, and similar. */
/* .cluster: a horizontal run of items, replacing ad-hoc "display:flex; align-items:center;
   gap:...rem" inline styles used for icon+label rows, button rows, and similar. Every inline
   style this replaced had no flex-wrap set (i.e. nowrap), including rows with a <select> or
   a margin-left:auto push-to-edge element that only render correctly unwrapped -- so nowrap
   is the default here too, matching what was actually there before. Opt into wrapping
   explicitly with .cluster-wrap for a row of purely reflowable content (e.g. icon + long
   text) where wrapping is actually desired on narrow screens. */
.cluster { display: flex; align-items: center; }
.cluster-wrap { flex-wrap: wrap; }
.cluster-xs { gap: var(--space-1); }
.cluster-sm { gap: var(--space-2); }
.cluster-md { gap: var(--space-3); }
.cluster-lg { gap: var(--space-4); }

/* Small text-level helper for the many "font-size: 0.75rem; color: var(--text-muted)"
   inline captions/hints scattered through the markup. */
.text-helper { font-size: 0.75rem; color: var(--text-muted); }

/* Padding for a <details> body, replacing the repeated inline style="padding-top: 1rem;"
   used on every accordion's content wrapper. */
.accordion-body { padding-top: var(--space-4); }

/* Modifier for a .card-header that sits directly above a list of accordions/sub-sections
   rather than a card's main content -- no divider needed underneath it. */
.card-header-flush { border-bottom: none; padding-bottom: 0; }

/* The "or" separator row used between two alternative inputs (e.g. upload a file / auto-fetch
   instead). Was three inline-styled divs repeated wherever this pattern appears. */
.or-divider { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.or-divider .divider-line { flex: 1; height: 1px; background: var(--border); }
.or-divider span { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; }

/* Groups related settings (e.g. Trade Analyzer's Waiver Adjustment) into their own visually
   distinct sub-section, set off from the primary inputs above it with a border/background,
   rather than letting a toggle+input run directly into a card's main content. */
.settings-subsection {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.settings-subsection .toggle-row { padding: 0; border: none; background: none; margin-bottom: var(--space-3); }
.settings-subsection .input-group:last-child { margin-bottom: 0; }

/* A .toggle-row that needs to sit flush inside another container (a settings-grid cell,
   paired with a dropdown) instead of looking like its own bordered card -- was three
   identical inline overrides (padding/border/background stripped, font-size shrunk). */
.toggle-row-flush { padding: 0; border: none; background: none; }
.toggle-row-flush .toggle-title { font-size: 0.85rem; }

/* Same rationale as .roster-grid .input-group above: a grid's own gap already handles
   spacing between cells, so an input-group inside a settings-grid shouldn't add its own
   bottom margin on top of it. */
.settings-grid .input-group { margin-bottom: 0; }
/* Bottom-aligns a grid cell's content with its sibling (e.g. a toggle lining up with an
   adjacent dropdown's baseline). */
.input-group-end { display: flex; flex-direction: column; justify-content: flex-end; }

/* The collapsible "upload one file per position" panel -- identical markup duplicated for
   ROS and Weekly rankings uploads. */
.multi-upload-panel {
    display: none;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

/* The row of position checkboxes inside a .multi-upload-panel -- also duplicated for ROS
   and Weekly. */
.pos-checkbox-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.pos-checkbox-label { display: flex; align-items: center; gap: var(--space-1); font-size: 0.85rem; cursor: pointer; }

/* The <fieldset> that groups a .pos-checkbox-row with its "Check the positions..." prompt, so
   screen readers announce the prompt with each checkbox. Browser default fieldset border,
   padding and margin are stripped so it looks the same as the old plain wrapper; min-width: 0
   stops the fieldset from refusing to shrink on narrow phones (a browser quirk). */
.pos-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pos-fieldset-legend { display: block; padding: 0; font-size: 0.85rem; font-weight: 600; color: var(--text-main); }

/* Smaller variant of .close-banner-btn for banners with less vertical room. */
.close-banner-btn-sm { font-size: 0.85rem; padding: var(--space-1); }

/* A .mls-btn-sm styled to read as a plain inline text link rather than a button. */
.btn-link-inline { background: none; padding: 0; color: var(--primary-green); }
.text-green { color: var(--primary-green); }
.text-blue { color: #60a5fa; }
.border-none { border: none; }
.app-version { text-align: center; color: var(--text-muted); font-size: 0.8rem; margin: 2rem 0; }

/* Call Out Dots */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.bg-target { background: var(--target-border); box-shadow: 0 0 8px var(--target-border); }
.bg-avoid { background: var(--avoid-border); box-shadow: 0 0 8px var(--avoid-border); }
.bg-dart { background: var(--dart-border); box-shadow: 0 0 8px var(--dart-border); }
.text-target { color: var(--target-border); }
.text-avoid { color: var(--avoid-border); }
.text-dart { color: var(--dart-border); }

/* LeagueLogs Attribution */
.leaguelogs-attribution { margin-top: 1rem; text-align: center; }
.leaguelogs-attribution a {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-family: Georgia, 'Times New Roman', serif; font-size: 14px;
    line-height: 1; color: currentColor; text-decoration: none;
}
.leaguelogs-attribution span:first-child { color: var(--text-muted); }
.leaguelogs-attribution em { font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); font-style: normal; }
.dot-accent { width: 5px; height: 5px; border-radius: 50%; background: #ffe24c; display: inline-block; }

/* --- BADGES & POSITIONAL STYLING --- */
.badge { 
    background: #3a506b; padding: 2px 5px; border-radius: 4px; font-weight: bold; 
    font-size: 0.7rem; color: #f1f5f9; display: inline-block; white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* Restrict fixed 32px width only to roster/lineup contexts */
.lineup-slot .pos-badge,
.roster-item .pos-badge,
.draft-cell .pos-badge {
    width: 32px;
    min-width: 32px !important;
    max-width: 32px;
    padding: 2px 0 !important;
    text-align: center !important;
    display: inline-block;
    box-sizing: border-box;
}

/* Position-specific colors remain untouched */
.pos-badge.QB { background-color: var(--pos-qb); color: #fca5a5; border: 1px solid var(--pos-qb-border); }
.pos-badge.RB { background-color: var(--pos-rb); color: #86efac; border: 1px solid var(--pos-rb-border); }
.pos-badge.WR { background-color: var(--pos-wr); color: #93c5fd; border: 1px solid var(--pos-wr-border); }
.pos-badge.TE { background-color: var(--pos-te); color: #fde047; border: 1px solid var(--pos-te-border); }
.pos-badge.K { background-color: var(--pos-k); color: #e2e8f0; border: 1px solid var(--pos-k-border); }
.pos-badge.DEF { background-color: var(--pos-def); color: #e9d8fd; border: 1px solid var(--pos-def-border); }

.badge-value { background: #102a1e; color: #4ade80; border: 1px solid #34A853; }
.badge-reach { background: #3a1515; color: #fca5a5; border: 1px solid #ea4335; }
.badge-rookie { background: #281442; color: #e9d8fd; border: 1px solid #9f7aea; font-size: 0.65rem; margin-left: 4px; }
.early-badge { background: #fbbc04; color: #0b132b; font-weight: bold; border: 1px solid #f59e0b; padding: 1px 4px; font-size: 0.70rem; margin-left: 4px;}
.inj-badge { background: #ea4335; color: white; border: none; padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }
/* Shown only when a player's bye falls on the CURRENTLY active NFL week (see
   getByeBadgeHTML() in mls.js) -- distinct from inj-badge's solid red (hard-out) and
   early-badge's yellow (early kickoff) so all three read as different kinds of "heads up". */
.bye-badge { background: rgba(249, 115, 22, 0.15); color: #fb923c; border: 1px solid #f97316; padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }

/* Taxi squad. Deliberately borrows .badge-rookie's exact violet rather than introducing a
   seventh badge hue: taxi slots exist to stash rookies, so the two read as the same family of
   "roster status, informational" -- unlike inj/bye/early, nothing here needs acting on. The
   violet used by .slot-badge.slot-FLEX is a different, lighter shade, and the two can never
   collide on one row anyway (a taxi row's slot badge is always TX, never FLEX). */
.taxi-badge { background: #281442; color: #e9d8fd; border: 1px solid #9f7aea; padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }

/* Kickoff-time badge (see getKickoffBadgeHTML() in mls.js) -- neutral/informational blue, since
   unlike bye/inj/early this isn't a warning, just a fact the person can use to verify FLEX
   kickoff ordering at a glance. */
.kickoff-badge { background: rgba(96, 165, 250, 0.15); color: #93c5fd; border: 1px solid #60a5fa; padding: 1px 4px; font-size: 0.65rem; font-weight: 600; margin-left: 4px; }
/* Once kickoff has passed (see getKickoffBadgeHTML in mls.js), the badge swaps from the clock
   time to "Started" -- a deeper, more solid blue so it visually reads as "locked in" rather
   than "upcoming", pairing with the auto-lock indicator icon used on that same row. */
.kickoff-started { background: rgba(59, 130, 246, 0.28); color: #bfdbfe; border-color: #3b82f6; }

/* Lock-state text badges on Lineup starter rows (see lockBadge in renderLineupUI, mls.js).
   Colours match each padlock icon's tint -- green for a manual season-long lock, blue for an
   auto-lock at kickoff -- so badge and icon read as one signal, but the words carry the meaning
   on their own (the tint alone was the only difference before, and title= never shows on touch). */
.mls-lock-badge { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border: 1px solid var(--primary-green); padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }
.mls-autolock-badge { background: rgba(96, 165, 250, 0.15); color: #93c5fd; border: 1px solid #60a5fa; padding: 1px 4px; font-size: 0.65rem; font-weight: bold; margin-left: 4px; }

/* Lineup tab's "next lock" countdown (top of the card) -- reuses the same blue used for
   kickoff-badge/kickoff-started above, since this is the same "kickoff time" information,
   just summarized across the whole lineup instead of shown per-player. Deliberately not
   red/amber: this is routine status, not a warning, so it shouldn't compete visually with
   the "Action Required: Differs from Sleeper lineup" banner it can appear right above. */
.lineup-lock-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.lineup-lock-countdown-time {
    color: #bfdbfe;
    font-weight: 700;
}

.lineup-injury-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.sim-lookup-card {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: var(--space-4);
}
.sim-lookup-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.sim-lookup-range {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}
.sim-lookup-injury-flag {
    font-size: 0.8rem;
    font-weight: 600;
    color: #93c5fd;
    margin-bottom: var(--space-2);
}
.sim-lookup-injury-flag.is-excluded {
    color: #fca5a5;
}

/* Collapsible variant of .lineup-lock-countdown above, used when several starters share the
   exact same earliest kickoff moment (see getNextLockCountdownHTML) -- same pill look, just
   stacked (header row + expandable name list) instead of a single line. Collapsed by default
   so a big Sunday-1pm-style slate with many simultaneous locks doesn't turn this into a wall
   of names; tapping it reveals exactly who, without having to scroll into the lineup below. */
.lineup-lock-countdown-collapsible {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}
.lock-countdown-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    width: 100%; /* <button> since Chunk 3; buttons don't stretch like the old <div> did */
}
.lock-countdown-header .chevron-icon {
    flex-shrink: 0;
}
.lineup-lock-countdown-collapsible.expanded .chevron-icon {
    transform: rotate(180deg);
}
.lineup-lock-countdown-collapsible:not(.expanded) .lock-countdown-detail {
    display: none;
}
.lock-countdown-detail {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(96, 165, 250, 0.25);
    font-weight: 500;
    color: #bfdbfe;
}
.status-badge { font-size: 0.85rem; padding: 0.5rem; border-radius: 4px; margin-bottom: 1rem; display: none; background-color: #102a1e; color: #4ade80; border: 1px solid #34A853; }

/* Dashboard Status Icons */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-good { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.status-warn { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.status-danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* --- TOOLTIPS (Refined for Dark Mode) --- */
.tooltip, .tooltip-container { position: relative; display: inline-flex; align-items: center; cursor: help; 
                             user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
                             }
.tooltip-icon { 
    background: rgba(255,255,255,0.1); color: var(--text-muted); border: 1px solid var(--border);
    border-radius: 50%; width: 18px; height: 18px; display: inline-flex; justify-content: center; 
    align-items: center; font-size: 11px; font-weight: bold; line-height: 1; font-family: monospace;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.tooltip-container:hover .tooltip-icon { background: var(--border); color: var(--text-main); }
.tooltip .tooltip-text, .tooltip-container .tooltip-text { 
    visibility: hidden; width: 260px; 
    background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
    color: #f1f5f9; text-align: left; border-radius: 8px; padding: 12px; 
    position: absolute; z-index: 1001; top: calc(100% + 8px); right: -10px; 
    opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; font-size: 0.85rem; font-weight: 400; 
    border: 1px solid var(--border); box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    pointer-events: none; line-height: 1.5;
    transform: translateY(-4px);
}
.tooltip:hover .tooltip-text, .tooltip-container:hover .tooltip-text { 
    visibility: visible; opacity: 1; transform: translateY(0);
}

/* Keyboard: an icon with keyboard focus shows its tooltip (see initInfoTooltips in
   js/utils.js), unless Escape/Enter dismissed it. cursor: pointer on the icon is also what
   makes iOS Safari deliver the tap to the document-level handler at all. */
.tooltip-icon { cursor: pointer; }
.tooltip-icon:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    background: var(--border);
    color: var(--text-main);
}
.tooltip-icon:focus-visible + .tooltip-text:not(.tt-dismissed) {
    visibility: visible; opacity: 1; transform: translateY(0);
}
.tooltip-container:hover .tooltip-text.tt-dismissed:not(.mobile-visible) {
    visibility: hidden; opacity: 0;
}
/* Icon-less tooltips, where the badge/status icon/cell itself is the trigger (data-tt-self is
   set by initTooltips in js/utils.js): League Command Center status icons and badges, Power
   Rankings cells, the T-Score badge on Draft Tracker cards. */
.tooltip-container[data-tt-self]:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
    border-radius: 4px;
}
.tooltip-container[data-tt-self]:focus-visible > .tooltip-text:not(.tt-dismissed) {
    visibility: visible; opacity: 1; transform: translateY(0);
}

/* Mobile tap-to-toggle class */
.tooltip-text.mobile-visible {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* --- MLS LINEUP & ROSTER TAB SPECIFIC STYLES --- */

/* Shared classes consolidated from repeated inline styles across mls.js's several player-row
   renderers (Roster, Scout table, Lineup). Prefixed mls- deliberately: this file is shared with
   My Draft Strategist, and an earlier un-prefixed shared class (.btn-sm) caused a real collision
   between the two apps -- see the .mds-btn-sm note further down for the full story. */
.mls-table-header-cell { padding: 12px 10px; }
.mls-tooltip-center { display: flex; justify-content: center; width: 100%; }
.mls-dotted-underline { border-bottom: 1px dotted currentColor; cursor: pointer; }
.mls-error-text { color: var(--error-text); }
.mls-meta-row { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; }
.mls-text-right { text-align: right; }
.mls-player-row-info { display: flex; align-items: center; gap: 0.6rem; overflow: hidden; }
.mls-pos-badge-sizing { min-width: 26px; padding: 2px 4px; text-align: center; }
.mls-player-row-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

/* MLS player headshots (Roster list + Lineup starters/bench) -- see playerHeadshotHTML in
   lineup/mls.js. The circle always renders at a fixed size with the player's initials inside;
   the Sleeper photo sits on top and removes itself if it fails to load, so rows keep one
   shape and the name column starts at the same x whether or not a photo exists. */
.mls-headshot {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}
.mls-headshot-initials {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1;
}
.mls-headshot-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mls-headshot-def .mls-headshot-initials { font-size: 0.56rem; }
body.mls-hide-headshots .mls-headshot { display: none; }
@media (max-width: 480px) {
    .mls-headshot { width: 28px; height: 28px; }
    .mls-headshot-initials { font-size: 0.56rem; }
    .mls-headshot-def .mls-headshot-initials { font-size: 0.5rem; }
}
.mls-player-row-meta { margin-top: 3px; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
/* Sits between the name and the team/rank meta row -- holds status badges (injury, bye, early,
   kickoff, Sleeper-mismatch) on their own line so a heavily-flagged player doesn't crowd the
   name line or force ugly mid-word wraps on mobile. */
.mls-player-badges-row { margin-top: 3px; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
/* Roster tab: injury / rookie / bye badges on the player's name line instead of a row of their
   own, so every roster card stays two lines. inline-flex + nowrap keeps the group together:
   on a long name at phone width the whole group drops to the next line rather than splitting.
   The badges' own margin-left is zeroed here since the gap already spaces them. The space from
   the name is a real space character in the markup, not a margin: a wrapped line drops its
   leading space, so a wrapped group lines up flush under the name instead of indented. */
.mls-name-badges { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.15rem; white-space: nowrap; vertical-align: middle; position: relative; top: -1px; }
/* One size for every badge in the group: .badge-rookie/.bye-badge carry a 1px border and
   .inj-badge doesn't, so side by side they sat at different heights and a rookie card came out
   2px taller than an injured one. Same padding + a border on all (transparent on injury). */
.mls-name-badges .badge { margin-left: 0; padding: 1px 4px; font-size: 0.65rem; line-height: 1.3; border-style: solid; border-width: 1px; }
.mls-name-badges .inj-badge { border-color: transparent; }
.mls-rank-badge { background: #1c2541; border: 1px solid var(--border); }
/* Optional tier shown beside a rank on player cards ("#12 (T3)") -- see tierTag in mls.js. */
.mls-tier { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.mls-rank-sep { opacity: 0.5; }
/* Opponent ("@ PHI" / "vs KC") shown right after the kickoff badge on the Lineup row's badge line
   (see getGameInfoHTML in mls.js) -- plain text rather than another badge. The wrapper keeps the
   two together if the line wraps. */
.mls-game-info { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.mls-opp { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
/* Projected (or, once the game is final, actual) points at the right edge of a Lineup row: the
   number on top, a small caption under it saying which it is. Lives inside .mls-row-actions
   rather than as its own flex child of .lineup-slot, since that layout stretches any middle child. */
.mls-pts { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; min-width: 2.2rem; margin-right: 0.15rem; }
.mls-pts-main { font-weight: 700; font-size: 0.95rem; color: var(--text-main); font-variant-numeric: tabular-nums; }
.mls-pts-sub { font-size: 0.6rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mls-pts-none .mls-pts-main { color: var(--text-muted); font-weight: 400; }
.mls-row-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.mls-stat-blue { color: #93c5fd; }
.mls-stat-green { color: #86efac; }
.mls-stat-red { color: #fca5a5; }
.mls-item-name { font-weight: bold; font-size: 0.95rem; margin-bottom: 4px; }
.mls-item-subtext { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.lineup-action-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.btn-flex-2 { flex: 2; margin-top: 0 !important; }
.btn-flex-1 { flex: 1; margin-top: 0 !important; }

.lineup-container-wrapper {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.lineup-empty-state,
.bench-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

/* Early Games Warning Banner */
.early-warning-banner {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fde047;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    display: none;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
}

/* Early Games Control Group */
.early-games-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.team-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Weekly Rankings Feedback */
.weekly-meta-display {
    font-size: 0.75rem;
    color: #60a5fa;
    font-weight: 700;
    display: none;
    margin-bottom: 0.5rem;
}

.weekly-success-feedback {
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 600;
    display: none;
    text-align: center;
    margin-top: 0.75rem;
}

/* --- Lineup Slots & Roster Rows --- */
.lineup-slot, .roster-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0.8rem 1rem; 
    border: 1px solid var(--border); 
    background: rgba(0, 0, 0, 0.2); 
    margin-bottom: 0.5rem; 
    border-radius: 8px; 
    transition: border-color 0.2s, background-color 0.2s;
    gap: 1rem;
}

.lineup-slot:hover, .roster-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.lineup-slot.locked { 
    border-color: var(--primary-green); 
    background: var(--target-bg); 
}

.lineup-slot.swapping, .roster-item.swapping { 
    border-color: #f59e0b; 
    background: rgba(245, 158, 11, 0.1); 
}

.lineup-slot.empty {
    border: 1px dashed var(--border);
    background: rgba(255, 255, 255, 0.01);
}

/* Taxi-squad rows at the foot of the bench. Recedes via a flatter background and a dashed
   border -- the same "not in play" language .lineup-slot.empty already uses -- rather than
   via opacity, which would also wash out the TAXI and injury badges these rows exist to
   show. Everything on the row stays at full contrast; only its container steps back. */
.lineup-slot.taxi-row {
    border: 1px dashed var(--border);
    background: rgba(0, 0, 0, 0.32);
}

/* Separates real bench depth from the taxi squad below it. A rule with an inset label rather
   than a full section header: the taxi group belongs to the bench list visually (same rows,
   same card) and a second heading here would imply a second card's worth of importance. */
.bench-taxi-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.6rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bench-taxi-divider::before,
.bench-taxi-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* 1. Fix position badge width so it never shifts */
.roster-item .pos-badge { 
    width: 38px;
    min-width: 38px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.8rem;
}
.lineup-slot .slot-badge { 
    width: 46px;
    min-width: 46px;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.68rem; /* small enough that "SFLEX" still fits at this fixed width */
}
/* 2. UNIVERSAL FIX: Force whatever player data is in the middle to left-align and fill space */
.roster-item > *:not(:first-child):not(:last-child),
.lineup-slot > *:not(:first-child):not(:last-child) {
    flex-grow: 1;
    text-align: left;
}

/* Consolidated slot indicator for the Lineup tab (starters + bench): replaces the old
   plain-text slot-label ("RB1") + separate colored pos-badge pair with a single badge, styled
   like pos-badge, showing just the slot TYPE with no player-count suffix (slotType in mls.js is
   already digit-stripped before this renders, so "RB1"/"RB2" both just show "RB"). Fixed width
   above keeps every row's name column starting at the same x position regardless of whether the
   slot text is "RB" or "SFLEX".
   The player's actual position is only shown separately (see .mls-plain-pos) when the slot type
   itself doesn't already reveal it -- FLEX, SFLEX, and bench -- so this never duplicates info a
   strict RB/WR/TE/QB/K/DEF slot already conveys. */
.slot-badge {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
    box-sizing: border-box;
}
.slot-badge.slot-QB  { background-color: var(--pos-qb);  color: #fca5a5; border: 1px solid var(--pos-qb-border); }
.slot-badge.slot-RB  { background-color: var(--pos-rb);  color: #86efac; border: 1px solid var(--pos-rb-border); }
.slot-badge.slot-WR  { background-color: var(--pos-wr);  color: #93c5fd; border: 1px solid var(--pos-wr-border); }
.slot-badge.slot-TE  { background-color: var(--pos-te);  color: #fde047; border: 1px solid var(--pos-te-border); }
.slot-badge.slot-K   { background-color: var(--pos-k);   color: #e2e8f0; border: 1px solid var(--pos-k-border); }
.slot-badge.slot-DEF { background-color: var(--pos-def); color: #e9d8fd; border: 1px solid var(--pos-def-border); }
.slot-badge.slot-FLEX,
.slot-badge.slot-SFLEX { background-color: rgba(168, 85, 247, 0.18); color: #d8b4fe; border: 1px solid #a855f7; }
.slot-badge.slot-BN,
.slot-badge.slot-ROS { background-color: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid var(--border); }
/* Taxi squad, at the foot of the bench list. Same muted greys as .slot-BN rather than a new
   hue, because a taxi player is a quieter version of a bench player, not a different kind of
   alert -- the dashed border carries the whole distinction, reading as "parked, not in play"
   against every other slot badge's solid one. */
.slot-badge.slot-TX { background-color: rgba(148, 163, 184, 0.06); color: var(--text-muted); border: 1px dashed var(--border); }

/* Plain, unstyled position text -- deliberately NOT a badge, since a second colored pill here
   is exactly the duplication the slot-badge consolidation above was meant to remove. Shown on
   every row (see mls.js) so every row's meta line has the same leading element -- color comes
   from the existing .pos-text-* utility (extended below with K/DEF) so it matches the
   corresponding slot-badge/pos-badge color without a second color palette to maintain. Small
   left padding matches the kickoff-badge's own inset, so its text starts at the same x as the
   name and kickoff lines above it rather than being thrown off by the badge's padding. */
.mls-plain-pos { font-size: 0.75rem; font-weight: 600; padding-left: 4px; }

.player-name-wrap { 
    font-weight: 600; 
    color: var(--text-main); 
    line-height: 1.3; 
    font-size: 0.95rem; 
    /* Matches .mls-plain-pos's left padding below, so the name text and the position text on
       the meta line start at the same x -- both are plain text with no badge chrome to offset
       them, but the kickoff badge above still has its own small inset, hence the 4px here. */
    padding-left: 4px;
}

.team-chip { 
    background: var(--target-bg); 
    padding: 0.35rem 0.75rem; 
    border-radius: 999px; 
    font-size: 0.8rem; 
    font-weight: 600; 
    color: var(--primary-green); 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    border: 1px solid var(--target-border); 
}

.team-chip .close-chip { 
    cursor: pointer; 
    color: #fca5a5; 
    font-size: 1rem; 
    line-height: 1; 
    transition: opacity 0.2s; 
}

.team-chip .close-chip:hover {
    opacity: 0.7;
}
/* Now a <button> (was a <span>): drop the browser's button chrome so it looks the same. */
button.close-chip {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.close-chip:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: -4px;
    border-radius: 4px;
}

/* League Command Center: the league cell's content is a full-cell <button> (was a clickable
   <td>), so it's reachable by keyboard. Padding moved here from the <td> so the whole cell
   stays the click target. */
.mls-league-row-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 0.5rem 0.75rem calc(0.5rem + 6px);
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mls-league-row-btn:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: -2px;
}
/* ▲/▼ on the first/last league. The dimming used to be a second style="" attribute on a button
   that already had one, which browsers ignore, so disabled arrows looked clickable. */
.mls-league-move-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Action Buttons within slots */
.swap-btn { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.lock-btn { font-size: 1.1rem; background: transparent; border: none; cursor: pointer; padding: 0 0.25rem; }

/* Responsive adjustments */
/* Responsive adjustments for optimal mobile density */
@media (max-width: 480px) {
    .lineup-slot, .roster-item { 
        padding: 0.5rem 0.4rem; 
        gap: 0.4rem; 
    }
    
    .roster-item .pos-badge { 
        width: 32px; 
        min-width: 32px; 
        font-size: 0.7rem; 
    }
    .lineup-slot .slot-badge { 
        width: 42px; 
        min-width: 42px; 
        font-size: 0.62rem; 
    }
    
    .player-name-wrap { 
        font-size: 0.85rem; 
    }
    
    .badge { 
        padding: 2px 4px; 
        font-size: 0.65rem; 
    }
    
    .swap-btn { 
        padding: 0.3rem 0.5rem; 
        font-size: 0.75rem; 
    }
    
    .lock-btn { 
        /* Bumps the SVG size up slightly for better touch targets */
        transform: scale(1.1); 
    }
}
/* Scout Tab Specific Styles */
.scout-textarea { 
    width: 100%; 
    min-height: 90px; 
    background: rgba(0, 0, 0, 0.2); 
    color: var(--text-main); 
    border: 1px solid var(--border); 
    border-radius: 6px; 
    padding: 0.8rem; 
    margin-bottom: 0.75rem; 
    font-family: inherit; 
    resize: vertical; 
    transition: border-color 0.2s, box-shadow 0.2s;
}

.scout-textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.scout-result-card { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    padding: 1rem; 
    margin-bottom: 0.75rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: border-color 0.2s, transform 0.2s;
}

.scout-result-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.scout-status { 
    font-size: 0.75rem; 
    font-weight: 700; 
    padding: 0.35rem 0.6rem; 
    border-radius: 999px; 
    display: inline-block; 
    text-align: center; 
    letter-spacing: 0.5px;
}

.status-avail { background: var(--target-bg); color: var(--primary-green); border: 1px solid var(--target-border); }
.status-owned { background: var(--avoid-bg); color: #fca5a5; border: 1px solid var(--avoid-border); }
.status-mine { background: var(--dart-bg); color: #93c5fd; border: 1px solid var(--dart-border); }
/* --- MLS SCOUT TAB SPECIFIC STYLES --- */

/* Info Banner Component */
/* --- MATCHUP SIMULATOR (MONTE CARLO) RESULTS --- */
/* Markup for this comes from monteCarloUi.js's worker.onmessage handler. */
.simulation-card {
    background: var(--bg-card, #151d33);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}

.simulation-card h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.probability-bar-legend {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.legend-you { color: var(--primary-green, #10b981); }
.legend-opp { color: var(--btn-blue-bg, #3b82f6); }

.probability-bar {
    display: flex;
    width: 100%;
    height: 0.6rem;
    border-radius: 6px;
    overflow: hidden;
}

.bar-you { background: var(--primary-green, #10b981); }
.bar-opp { background: var(--btn-blue-bg, #3b82f6); }

.simulation-card small {
    display: block;
    margin-top: 0.6rem;
    color: var(--text-muted);
}

/* Standalone message shown in the results container in place of a result card -- "not enough
   roster data", a bye week, or a worker that failed to load. */
.sim-message {
    margin: 0;
    color: var(--text-muted);
}

.sim-message-error {
    color: #fca5a5;
}

.sim-fallback-note {
    color: #fbbf24 !important;
}

.sim-lineup-note {
    color: #93c5fd !important;
}

.sim-projection-note {
    color: #86efac !important;
}

.sim-actual-note {
    color: #93c5fd !important;
}

.sim-final-tag {
    color: #93c5fd;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.sim-team-columns {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.sim-team-column {
    flex: 1 1 240px;
    min-width: 0;
}

.sim-team-column h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sim-player-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sim-player-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.sim-player-row:last-child { border-bottom: none; }

.sim-player-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sim-player-name { font-weight: 500; }

.sim-player-boombust {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sim-player-info .pos-badge,
.sim-bench-row .pos-badge,
.sim-waiver-empty .pos-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: middle;
}

.sim-bust { color: #f87171; }
.sim-boom { color: #4ade80; }

.sim-player-range {
    white-space: nowrap;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sim-player-mean {
    font-size: 0.75rem;
}

.sim-bench-insights {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.sim-bench-insights h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sim-bench-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sim-bench-row {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.sim-bench-row strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Waiver Insights when the check ran but produced no rows (see renderWaiverInsights in
   monteCarloUi.js): a green confirmation when nothing beat your starters, amber when the check
   couldn't run, so an empty section never reads as "did this even do anything?". */
.sim-waiver-empty {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
}
.sim-waiver-empty-ok {
    color: var(--text-main);
    background: var(--target-bg);
    border: 1px solid var(--target-border);
}
.sim-waiver-empty-warn {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.sim-waiver-check {
    color: var(--primary-green);
    font-weight: 700;
    margin-right: 4px;
}

.info-banner {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #93c5fd;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.info-banner-icon {
    background: #3b82f6;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: serif;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Card Header Inline Actions */
.header-actions-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Trade Analyzer Section Headers */
.trade-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.text-target-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4ade80;
    display: flex;
    align-items: center;
}

.text-avoid-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fca5a5;
    display: flex;
    align-items: center;
}

.scout-output-container {
    margin-top: 1.25rem;
}

/* --- COLLAPSIBLE WAIVER UPGRADE SECTIONS (Scout tab, Auto-Find Upgrades) ---
   Reuses .rankings-card/.rankings-card-header/.rankings-card-body (see the Roster/Lineup
   tabs' upload cards) purely for the expand/collapse mechanics -- those classes don't require
   .settings-card, so they work fine nested inside the Waiver Wire Assistant card without
   double-applying its box styling. .mls-waiver-section supplies its own lighter box instead. */
.mls-waiver-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.mls-waiver-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
}

/* Waiver section toggle: <h4><button> filling the header, title left and chevron right
   (same layout the old role="button" header div had). */
.mls-waiver-section-heading {
    margin: 0;
    font-size: inherit;
    flex: 1;
    min-width: 0;
}
.rankings-card-toggle.mls-waiver-section-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.mls-waiver-section-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mls-waiver-section-body {
    padding: 0.9rem;
}

/* Trade Analyzer -- Fairness Verdict Banner */
.trade-verdict-banner {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    background: var(--card-bg);
}

.trade-verdict-source-label {
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.trade-verdict-source-label .tooltip-icon {
    width: 14px;
    height: 14px;
    font-size: 9px;}

.trade-verdict-source-label .tooltip-text {
    text-transform: none;
    letter-spacing: normal;
}

.trade-verdict-subnote {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
}

.trade-verdict-totals {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.trade-verdict-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.trade-verdict-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.trade-verdict-amount {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
}

/* These totals are summed from whichever rankings or values the verdict is using, so they're
   estimates -- but at 1.4rem/800 they read like settled, official numbers. "est." sits inside
   the amount so it qualifies the figure rather than the "You Receive" label above it, and is
   small and muted so it doesn't compete with the number it's marking. */
.trade-verdict-est {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 3px;
}

.trade-verdict-vs {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.trade-verdict-result {
    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

.trade-verdict-diff {
    font-weight: 600;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-left: 4px;
}

.trade-verdict-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.verdict-fair { border-color: var(--dart-border); background: var(--dart-bg); }
.verdict-fair .trade-verdict-result { color: #93c5fd; }

.verdict-favor-you { border-color: var(--target-border); background: var(--target-bg); }
.verdict-favor-you .trade-verdict-result { color: var(--primary-green); }

.verdict-favor-them { border-color: var(--avoid-border); background: var(--avoid-bg); }
.verdict-favor-them .trade-verdict-result { color: #fca5a5; }

.mls-stat-value { color: #fde047; }
.mls-stat-market { color: #93c5fd; }

/* MLS-namespaced small button (Setup league manager reorder/remove, Lineup swap/lock controls).
   Renamed from a bare .btn-sm -- that selector was defined twice in this shared stylesheet
   (once here, once in the MDS section above), and because both rules had equal specificity,
   whichever came later in the file silently won on BOTH apps' pages. MLS now uses its own
   namespaced class, matching the .mds-btn-sm pattern, so this sizing can never leak onto MDS's
   buttons (or vice versa) just because someone reorders the file.
   Fully self-contained (not just the padding/font-size/width this used to override) since these
   buttons no longer also match the base .btn-sm rule above -- without border/cursor/etc. repeated
   here, they'd fall back to the browser's default button chrome (visible border, 3D look).
   Do not rename back to .btn-sm. */
.mls-btn-sm {
    padding: 0.25rem 0.6rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
    width: auto !important;
}
/* Base (desktop) size for the header's prev/next league buttons -- unchanged from what
   used to be inline styles. The @media (max-width: 767px) block above bumps this up for
   mobile touch targets. */
.league-nav-btn {
    padding: 0.4rem 0.6rem;
    flex-shrink: 0;
}
/* Strength of Schedule (SoS) Grid Styles */
.sos-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.5rem;
}

.sos-grid { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 0.85rem; 
    text-align: center; 
}

.sos-grid th { 
    background: rgba(0, 0, 0, 0.3); 
    color: var(--text-muted); 
    padding: 0.6rem 0.4rem; 
    border: 1px solid var(--border); 
    font-weight: 600;
}

.sos-grid td { 
    padding: 0.4rem; 
    border: 1px solid var(--border); 
}

.sos-input { 
    width: 48px; 
    padding: 6px; 
    text-align: center; 
    background: rgba(0, 0, 0, 0.3); 
    color: var(--text-main); 
    border: 1px solid var(--border); 
    border-radius: 4px; 
    font-family: inherit;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.sos-input:focus {
    outline: none;
    border-color: var(--primary-green);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* --- MLS SETUP TAB SPECIFIC STYLES --- */

.button-row-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.league-req-subtitle {
    font-size: 0.85rem;
    color: var(--primary-green);
    margin-bottom: 1.25rem;
    font-weight: 600;
}

.manual-player-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.5rem;
}

.manual-add-feedback {
    color: var(--primary-green);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.75rem;
    text-align: center;
}
.manual-add-feedback:empty { display: none; }
.manual-add-feedback.is-error { color: #fb923c; }

/* Keyboard hint -- only on devices with a real pointer (desktop), where Enter-to-add applies */
.mls-manual-key-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}
.mls-manual-key-hint kbd {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}
@media (hover: none) {
    .mls-manual-key-hint { display: none; }
}

/* "Added this session" list under Add Player Manually */
.mls-manual-log:empty { display: none; }
.mls-manual-log {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.mls-manual-log-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 1px solid var(--border);
}
.mls-manual-log-total {
    color: var(--text-muted);
    font-weight: 500;
}
.mls-manual-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.mls-manual-log-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.mls-manual-log-item:last-child { border-bottom: none; }
.mls-manual-log-item.is-latest {
    background: rgba(16, 185, 129, 0.10);
    box-shadow: inset 3px 0 0 var(--primary-green);
}
.mls-manual-log-name {
    color: var(--text-main);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mls-manual-log-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}
.mls-manual-log-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-green);
    white-space: nowrap;
}
.mls-manual-log-remove {
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.mls-manual-log-remove:hover,
.mls-manual-log-remove:focus-visible {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.10);
}

/* Danger Zone Card Styling */
.danger-card {
    border: 1px dashed rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), var(--card-bg));
}

.text-danger {
    color: #ef4444 !important;
}
/* --- MLS ROSTER TAB SPECIFIC STYLES --- */

.roster-container-wrapper {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.roster-empty-state {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem 0;
}

.status-badge-meta {
    font-size: 0.75rem;
    color: var(--primary-green);
    font-weight: 700;
    display: none;
    margin-bottom: 0.5rem;
}

.rankings-fresh {
    color: var(--text-muted);
    font-weight: 500;
}

.rankings-stale {
    color: #f59e0b;
    font-weight: 700;
}

/* A sync that actually failed, as opposed to data that's merely aged (.rankings-stale, amber).
   Red so it doesn't read as the same "getting old" signal -- this roster is known to be behind,
   not just unrefreshed. Same red as .status-danger. */
.sync-failed {
    color: #ef4444;
    font-weight: 700;
}

/* --- COLLAPSIBLE RANKINGS CARDS (Roster/Lineup tabs) ---
   The toggle is <h3><button class="rankings-card-toggle">Title + chevron</button></h3>, with
   the freshness readout and tooltip as siblings OUTSIDE the button (a role="button" header
   used to swallow the heading and nest the tooltip control inside it). Two CSS tricks keep
   the old look and feel:
   1. The button's ::after stretches over the whole header, so clicking anywhere on it still
      toggles the card. The tooltip stays its own control without any z-index: it's positioned
      and comes after the button in the markup, so it already paints above that layer (and no
      z-index means its popup isn't trapped in a new stacking context).
   2. In the ROS/Weekly cards the chevron lives inside the button but is pinned to the header's
      right edge, where it used to sit after the tooltip. */
.rankings-card-header {
    cursor: pointer;
    position: relative;
}
.rankings-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.rankings-card-toggle::after {
    content: '';
    position: absolute;
    inset: 0;
}
.settings-card.rankings-card > .rankings-card-header .chevron-icon {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0.75rem; /* .card-header's padding-bottom: centre on the content, not the padding */
    margin: auto 0;
}
.settings-card.rankings-card:not(.expanded) > .rankings-card-header .chevron-icon {
    bottom: 0; /* padding-bottom is 0 when collapsed (rule below) */
}
.settings-card.rankings-card > .rankings-card-header > .cluster {
    margin-right: calc(18px + var(--space-2)); /* room for the pinned chevron */
}

.rankings-card:not(.expanded) .rankings-card-body {
    display: none;
}

/* Collapsed is the usual resting state now (picking a set collapses the card), so drop the
   header's divider and gap that only exist to separate it from the hidden body. */
.settings-card.rankings-card:not(.expanded) > .rankings-card-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rankings-card.expanded .chevron-icon {
    transform: rotate(180deg);
}

.header-freshness {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.header-freshness.rankings-stale {
    color: #f59e0b;
}

/* Title + "Set: <name>" line. min-width: 0 lets a long set name truncate instead of shoving
   the freshness readout and chevron off the edge on a phone. */
.rankings-header-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    margin-right: 0.5rem;
}
.rankings-header-set {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rankings-header-set:empty { display: none; }
.rankings-header-set strong {
    color: var(--primary-green);
    font-weight: 600;
}

/* "Used in 2 of 5 leagues · Choose leagues..." under the set dropdown */
.mls-set-leagues-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.mls-set-leagues-summary {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.mls-set-leagues-row .btn-link-inline { margin-left: auto; }

/* League checklist (upload preview + standalone picker dialog) */
.mls-league-picker { margin: 0 0 1rem 0; }
.mls-league-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}
.mls-league-picker-head:has(> span:empty):not(:has(button)) { display: none; }
.mls-league-picker-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
}
.mls-league-picker-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.mls-league-picker-row:last-child { border-bottom: none; }
.mls-league-picker-row:hover:not(.is-locked) { background: rgba(16, 185, 129, 0.06); }
.mls-league-picker-row.is-locked { cursor: default; opacity: 0.7; }
.mls-league-picker-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary-green);
}
.mls-league-picker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mls-league-picker-name {
    font-size: 0.875rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mls-league-picker-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.success-feedback {
    color: var(--primary-green);
    font-size: 0.85rem;
    font-weight: 600;
    display: none;
    text-align: center;
    margin-top: 0.75rem;
}

/* Rankings upload in-progress indicator -- shown between file selection and the preview
   modal appearing (or an error toast), so a slow .xlsx parse never looks like nothing
   happened. Empty/hidden by default; setUploadStatus() in mls.js fills and toggles it. */
.mls-upload-processing {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.file-input {
    cursor: pointer;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.2);
}

/* Accordion styling for Manual SoS */
.sos-details-accordion {
    margin-top: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s;
}

.sos-details-accordion[open] {
    border-color: rgba(16, 185, 129, 0.3);
}

.sos-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: #60a5fa;
    padding: 0.25rem 0;
    user-select: none;
}

.sos-summary:hover {
    color: var(--text-main);
}
/* --- MDS SPECIFIC STYLES (Tracker, Board, Limits) --- */

/* Tracker Controls */
.tracker-controls-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.tracker-header-actions {
    display: flex; 
    justify-content: space-between; 
    align-items: stretch; 
    gap: 0.75rem; 
    margin-bottom: 0.75rem;
}

.pick-badge {
    background: var(--primary-green);
    color: #0a0e17; /* High contrast dark text */
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.flex-grow {
    flex-grow: 1;
}

/* Search Bar Wrapper */
.search-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none; /* Let clicks pass through to the input */
}

.search-input {
    margin: 0;
    padding-left: 2.5rem; /* Make room for the icon */
    width: 100%;
}

/* Position Filters Grid */
.tier-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 0.5rem; 
    margin-bottom: 1.5rem; 
}

.pos-filter { 
    cursor: pointer; 
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.5rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), filter 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    font-size: 0.85rem;
    font-weight: 600;
    width: auto;
    min-width: 0;
    max-width: none;
    
    /* Visually mute non-selected filters */
    opacity: 0.35;
    filter: grayscale(85%);
}

.pos-filter:hover { 
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    transform: translateY(-2px);
    
    /* Slightly illuminate when hovering over an inactive filter */
    opacity: 0.7;
    filter: grayscale(40%);
}

.pos-filter.active-filter { 
    /* Snaps the filter back to full vibrancy, inheriting its native positional color */
    opacity: 1;
    filter: grayscale(0%);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.08); 
}

/* Specific rule for ALL button so it turns green when active, since it lacks a positional color */
.pos-filter.badge-all.active-filter {
    color: var(--primary-green);
    background: var(--target-bg);
    border-color: var(--primary-green); 
}

/* Premium Tier Dividers (Replaces heavy green block) */
.tier-divider { 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--primary-green);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 2rem 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-divider::before,
.tier-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--primary-green), transparent);
    opacity: 0.3;
}

/* Player Cards Generated via JS */
.player-pool-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.player-card { 
    background: var(--card-bg); 
    border: 1px solid var(--border); 
    border-radius: 8px; 
    padding: 1rem; 
    display: flex; 
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Tracker pool render cost: renderBoard() swaps in several hundred cards on every pick. With
   content-visibility: auto the browser skips style/layout/paint for cards that are off-screen,
   which is where most of that cost went. Scoped to #playerPool only -- the queue and roster are
   short lists and gain nothing.
   contain-intrinsic-size is the placeholder height for a card that hasn't been rendered yet;
   `auto` makes the browser remember each card's real height once it has been seen. It sizes the
   CONTENT box -- the card's 1rem padding and 1px border are added on top -- so these are the
   measured card heights minus 34px: desktop 114px card -> 80px, phone 108px card (collapsed and
   uncollapsed are within ~2px) -> 74px. A wrong value only makes the scrollbar thumb drift a
   little while scrolling -- it can't clip a card. */
#playerPool .player-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
}
@media (max-width: 767px) {
    #playerPool .player-card { contain-intrinsic-size: auto 74px; }
}
/* content-visibility: auto implies paint containment, which clips anything that overflows the
   card -- the T-Score tooltip opens below the stats row and would be cut off at the card edge.
   Drop the containment on the one card being interacted with, and lift it above its neighbours
   (each contained card is its own stacking context, so the next card would paint over the tooltip). */
#playerPool .player-card:hover,
#playerPool .player-card:focus-within,
#playerPool .player-card:has(.tooltip-text.mobile-visible) {
    content-visibility: visible;
    position: relative;
    z-index: 2;
}

.player-card-main {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.player-info h4 { 
    margin: 0 0 0.4rem 0; 
    color: var(--text-main); 
    font-size: 1.05rem; 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 0.4rem; 
}

/* NOTE: .player-stats and .actions rules for the player-card layout live further down,
   in the "PLAYER CARD GRID LAYOUT" section -- removed the older, now-superseded duplicates
   that used to live here to avoid two competing definitions in this file. */

/* Inline Editor (Replaces dashed border) */
.inline-editor { 
    display: none; 
    background: rgba(0, 0, 0, 0.2); 
    padding: 1rem; 
    margin-top: 1rem; 
    border-radius: 6px; 
    border: 1px solid rgba(16, 185, 129, 0.3); 
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

/* Toggle Container (for Tracker/Team tabs) */
.toggle-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem; 
    background: var(--card-bg);
    border: 1px solid var(--border); 
    border-radius: 8px; 
    margin-bottom: 1rem; 
}

/* Roster Limits Table (Team Tab) */
.limits-table { 
    width: 100%; 
    text-align: center; 
    border-collapse: collapse; 
    margin-bottom: 1.5rem; 
}

.limits-table th { 
    padding: 0.75rem 0.5rem; 
    border-bottom: 1px solid var(--border); 
    font-size: 0.8rem; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted); 
}

.limits-table td { 
    padding: 0.75rem 0.5rem; 
    font-weight: 600; 
    font-size: 1rem; 
    color: var(--text-main);
    white-space: nowrap;
}

/* Roster Slots (Team Tab) */
.roster-slot { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 0; 
    border-bottom: 1px solid var(--border); 
}

.roster-slot:last-child { 
    border-bottom: none; 
}

.roster-label { 
    font-weight: 700; 
    width: 45px; 
    font-size: 0.85rem; 
    color: var(--text-muted);
}

.roster-slot.empty { 
    opacity: 0.5; 
}

/* Bye Warning Banner */
.bye-warning-banner { 
    background-color: rgba(239, 68, 68, 0.1); 
    border: 1px solid rgba(239, 68, 68, 0.3); 
    color: #fca5a5; 
    padding: 1rem; 
    border-radius: 8px; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600; 
    font-size: 0.9rem; 
    margin-bottom: 1.25rem; 
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}
/* --- TEAM TAB UTILITIES --- */

/* Horizontal scrolling for the table if on a very small mobile screen */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll-shadow cue: a subtle inset shadow on the right edge, toggled by initScrollShadows()
   in utils.js rather than always-on, so it only appears while there's actually more content
   to scroll to and disappears once the user reaches the end. Shared by .table-responsive
   (Command Center) and .sos-table-wrapper (Strength of Schedule grid) -- deliberately NOT
   applied to the Positional Power Rankings heatmap, which uses overflow: visible on purpose
   so its tooltips aren't clipped; adding this class there would require overflow-x: auto
   and break that. */
.table-responsive.has-scroll-shadow,
.sos-table-wrapper.has-scroll-shadow {
    box-shadow: inset -14px 0 10px -10px rgba(0, 0, 0, 0.5);
}

/* Map text colors to the CSS variables defined in :root */
.pos-text-qb { color: var(--pos-qb-border) !important; }
.pos-text-rb { color: var(--pos-rb-border) !important; }
.pos-text-wr { color: var(--pos-wr-border) !important; }
.pos-text-te { color: var(--pos-te-border) !important; }
.pos-text-k { color: var(--pos-k-border) !important; }
.pos-text-def { color: var(--pos-def-border) !important; }

/* Subtitle styling for headers */
.header-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-left: 0.5rem;
    text-transform: none;
}

/* Roster list container spacing */
.roster-list, 
.other-drafted-list {
    display: flex;
    flex-direction: column;
}
/* --- DRAFT BOARD GRID --- */
.board-header-group {
    margin-bottom: 1.25rem;
}

.board-header-group h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: var(--text-main);
    margin: 0;
}

.draft-board-container { 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 1.5rem;
    
    /* Adds explicit padding space on the right edge so the last column can fully scroll into view */
    padding-right: 1.5rem; 
    
    /* Ensures the container respects the screen width properly */
    max-width: 100%;
}

/* Premium Empty State */
.empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1.5rem;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px dashed var(--border);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}

.empty-state-icon {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    color: var(--text-muted); /* was var(--border): nearly invisible against this badge's own background */
}

.empty-state-cta {
    margin-top: 1rem;
    width: auto;
}

.recap-grade-box {
    background: rgba(0,0,0,0.2);
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    text-align: center;
}

.recap-label {
    font-size: 0.75rem;
    color: #93c5fd;
    text-transform: uppercase;
    font-weight: 700;
}

.roster-slot-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.roster-slot-pos-caption {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.recap-callout-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* The actual Grid generated by JS */
.draft-grid { 
    display: grid;
    grid-template-columns: repeat(var(--num-teams, 12), minmax(0, 1fr)); 
    gap: 2px; 
    background-color: var(--border); 
    border: 2px solid var(--border); 
    border-radius: 6px; 
    width: 100%; /* Replaced rigid min-width with full container width */
    max-width: 100%;
    overflow-x: auto;
}

.draft-col-header { 
    background: var(--card-bg); 
    color: var(--text-muted); 
    text-align: center; 
    font-weight: 700; 
    padding: 0.5rem 0.25rem; 
    font-size: 0.8rem; 
    letter-spacing: 0.5px;
    
    /* --- CRITICAL GRID TRUNCATION RULES --- */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-width: 0; /* Forces grid children to shrink and truncate text */
    width: 100%;
    box-sizing: border-box;
}

.draft-col-header.mine { 
    background: rgba(255, 255, 255, 0.15); 
    color: #ffffff; 
    border-bottom: 3px solid #ffffff; 
}

.draft-cell { 
    background: var(--bg-color); 
    padding: 0.35rem 0.3rem; 
    min-height: 48px; /* Gives player names more breathing room */
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    transition: filter 0.2s;
    gap: 2px;
    overflow: hidden;
    position: relative;
    max-width: 100%;
}

.draft-cell:hover {
    filter: brightness(1.2); /* Slight hover effect on grid cells */
}

.draft-cell.picked { 
    border: 1px solid transparent; 
}

.draft-cell.mine { 
    /* Soft white outer border and inner glow to highlight the cell without clashing */
    border: 1px solid rgba(255, 255, 255, 0.3); 
    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.08); 
    position: relative; 
    z-index: 1;
}

.draft-cell-first { 
    font-size: 0.7rem; 
    color: var(--text-muted); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 100%; 
    line-height: 1.2;
}

.draft-cell-last { 
    font-size: 0.85rem; 
    font-weight: 700; 
    color: var(--text-main); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 100%; 
    line-height: 1.2;
}

/* Position Colors using CSS Variables from :root */
.draft-cell.QB { background-color: var(--pos-qb); border-left: 3px solid var(--pos-qb-border); }
.draft-cell.RB { background-color: var(--pos-rb); border-left: 3px solid var(--pos-rb-border); }
.draft-cell.WR { background-color: var(--pos-wr); border-left: 3px solid var(--pos-wr-border); }
.draft-cell.TE { background-color: var(--pos-te); border-left: 3px solid var(--pos-te-border); }
.draft-cell.K { background-color: var(--pos-k); border-left: 3px solid var(--pos-k-border); }
.draft-cell.DEF { background-color: var(--pos-def); border-left: 3px solid var(--pos-def-border); }

@media (min-width: 768px) {
    .draft-cell-first {
        font-size: 0.65rem;
    }
    .draft-cell-last {
        font-size: 0.72rem;
        font-weight: 700;
    }
}
/* --- LIVE INDICATOR --- */
.live-indicator {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444; /* Premium red instead of harsh neon green */
    padding: 0.35rem 0.6rem;
    border-radius: 999px; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    letter-spacing: 0.5px;
}

.live-indicator:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}
/* The animated dot */
.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #ef4444;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes btn-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.btn-pulse {
    animation: btn-pulse-anim 2s infinite;
}

@keyframes border-pulse-anim {
    0% { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
    50% { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 0 2px rgba(16, 185, 129, 0.1); }
    100% { border-color: rgba(16, 185, 129, 0.8); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
}

.pulse-border {
    animation: border-pulse-anim 2.5s infinite;
    border-radius: 8px; /* ensures corner rounding matches the card */
}

@keyframes nav-pulse-anim {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0); }
    50% { box-shadow: 0 0 12px 2px rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); background: rgba(16, 185, 129, 0); }
}

.nav-pulse {
    animation: nav-pulse-anim 2s infinite;
    border-radius: 8px;
}

/* Reduced motion: stop the four pulses but keep a static highlight, so the
   "this is next" cue survives without the animation. */
@media (prefers-reduced-motion: reduce) {
    .pulse-dot,
    .btn-pulse,
    .pulse-border,
    .nav-pulse {
        animation: none;
    }
    .btn-pulse {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
    }
    .pulse-border {
        border-color: rgba(16, 185, 129, 0.8);
        box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
    }
    .nav-pulse {
        background: rgba(16, 185, 129, 0.15);
    }
    .tab-content.active {
        animation: none;
    }
}

/* Setup progress checklist (Dashboard) -- the text version of the pulse prompts */
.setup-checklist {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: var(--space-4);
}
.setup-checklist-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}
.setup-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.setup-checklist-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.setup-checklist-list li.is-done {
    color: var(--text-main);
}
.setup-step-mark {
    width: 1em;
    flex-shrink: 0;
    text-align: center;
    font-weight: 700;
}
.setup-checklist-list li.is-done .setup-step-mark {
    color: var(--primary-green);
}
.setup-step-body {
    min-width: 0;
}
.setup-checklist-list li.is-actionable .setup-step-label {
    color: var(--text-main);
    font-weight: 600;
}
.setup-step-how {
    margin: 0.15rem 0 0.25rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.setup-step-go {
    font-size: 0.8rem;
    font-weight: 600;
}
/* goToSetupStep scrolls these into view; clear the sticky .header so the card title shows */
#setupSyncCard,
#rosRankingsCard,
#weeklyRankingsCard,
#powerRankingsCard {
    scroll-margin-top: 5.5rem;
}
/* Sync Loading Spinner */
@keyframes spin {
    100% { transform: rotate(360deg); }
}
.sync-spinner {
    animation: spin 1s linear infinite;
}
/* --- INFO & GUIDE TAB --- */
.guide-content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 1rem;
}

.guide-step {
    position: relative;
}

.step-title {
    color: var(--text-main);
    font-size: 1.05rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Custom step color for the guide */
.blue-step {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.step-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0 2.2rem; /* Indents the text to align perfectly past the circle number */
    text-wrap: pretty;
}

.guide-list {
    margin: 0.75rem 0 0 2.2rem;
    padding-left: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.guide-list li {
    margin-bottom: 0.75rem;
}

.text-main {
    color: var(--text-main);
    font-weight: 600;
}
/* --- DARK MODE SELECT DROPDOWNS --- */
select.form-input, 
select {
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom sleek dropdown arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

select.form-input:focus,
select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

/* Forces dropdown option lists to respect dark theme where supported */
select option {
    background-color: var(--card-bg);
    color: var(--text-main);
    padding: 0.75rem;
}
optgroup {
    background-color: var(--bg-color);
    color: var(--primary-green, #4ade80);
    font-weight: 600;
    font-style: normal;
    padding: 4px 8px;
}
/* --- MODERNIZED FILE UPLOAD BUTTON --- */
input[type="file"]::file-selector-button {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.75rem;
    transition: background 0.2s, border-color 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* WebKit / Safari compatibility prefix */
input[type="file"]::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.75rem;
    transition: background 0.2s, border-color 0.2s;
}

input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 480px) {
    .limits-table th, 
    .limits-table td {
        /* Reduces the left/right padding to free up horizontal space */
        padding: 0.5rem 0.2rem; 
    }
    
    .limits-table th {
        font-size: 0.7rem;
        letter-spacing: 0; /* Removes extra spacing between header letters */
    }
    
    .limits-table td {
        font-size: 0.85rem; /* Shrinks the numbers just enough to fit */
    }
}
.close-banner-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.2s;
}

.close-banner-btn:hover {
    color: var(--text-main);
}
/* Premium Live State for the Sync Button */
.btn-header.is-live {
    background-color: rgba(239, 68, 68, 0.15); 
    color: #ef4444; 
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4); 
}

.btn-header.is-live:hover {
    background-color: rgba(239, 68, 68, 0.25);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.6), 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* Stalled Live Sync: the 3s poll has missed enough ticks in a row that the board may no
   longer match the draft. Amber rather than red so it reads as "still trying, but don't
   trust this yet" instead of a hard failure -- the poll is deliberately still running. */
.btn-header.is-live.is-stalled {
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45);
}

.btn-header.is-live.is-stalled:hover {
    background-color: rgba(245, 158, 11, 0.25);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.65), 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* The dot stops pulsing when stalled: the pulse is what sells "picks are arriving", and
   that's exactly the claim we can no longer make. */
#liveIconWrap.is-stalled .pulse-dot {
    background-color: #f59e0b;
    animation: none;
    box-shadow: none;
}

.live-sync-stamp {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    opacity: 0.85;
    white-space: nowrap;
}

/* Nothing to show while the poll is healthy -- collapse the gap the flex row would
   otherwise leave for an empty span. */
.live-sync-stamp:empty {
    display: none;
}
/* Mobile-specific adjustments for Draft Board edge-to-edge bleed */
@media (max-width: 767px) {
    .draft-board-container {
        /* Pull container out to the absolute edges. Must match .container's MOBILE padding
           (0.5rem, not its 1.5rem desktop padding) or this overshoots and causes real
           horizontal page overflow -- that overflow is what caused the Board tab to appear
           "zoomed in" on mobile, with the bottom nav cut off until scrolling/zooming out. */
        margin-left: -0.5rem; 
        margin-right: -0.5rem;
        width: calc(100% + 1rem);
        max-width: none;
        
        /* Start grid cleanly with padding, but let it scroll fully to the edge */
        padding-left: 0.5rem;
        padding-right: 0.5rem; 
        
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .draft-grid {
        /* REMOVE the 100% width trap and nested scroll */
        max-width: none;
        width: max-content; 
        overflow-x: visible;
        min-width: 100%;
        
        /* THE FIX: Hardcode columns to 80px so they NEVER stretch to fit long team names */
        grid-template-columns: repeat(var(--num-teams, 12), 80px) !important;
    }

    .draft-col-header {
        padding: 0.5rem 0.2rem !important;
    }

    /* Ensures long names truncate elegantly in the narrower columns */
    .draft-cell-first, 
    .draft-cell-last {
        font-size: 0.75rem !important; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 1px;
        line-height: 1.2;
    }
}
.draft-cell-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--card-bg);
    object-fit: cover;
}
.draft-cell-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    overflow: hidden; 
}
/* Reclaim horizontal space for player cards on mobile */
@media (max-width: 767px) {
    .container {
        /* Reduces the outer screen edge gap from 1.5rem to 0.5rem */
        padding: 1.25rem 0.5rem; 
    }

    .settings-card {
        /* Reduces the inner card gap from 1.5rem to 0.75rem */
        padding: 1rem 0.75rem; 
    }

    /* Optional: Ensure the empty state messages don't force awkward sizing */
    .lineup-empty-state,
    .bench-empty-state,
    .roster-empty-state {
        padding: 1.5rem 0.5rem;
    }
}
/* --- ACCESSIBILITY & MICRO-INTERACTIONS --- */
.player-card {
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The card itself is no longer a tab stop (its buttons are), so this marks which card a
   keyboard user is on while tabbing through its buttons. :focus-visible keeps it from
   lighting up on a mouse click or tap. */
.player-card:has(:focus-visible) {
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Position filters and the edit pencil used to be a <div>/<span> and are now <button>s:
   strip the browser's button font and chrome so they look exactly as before. */
button.pos-filter,
button.edit-link {
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button.edit-link {
  background: none;
  border: none;
  padding: 0;
}
.pos-filter:focus-visible,
.edit-link:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
  opacity: 1;
}

/* .btn-bare: shared reset for controls that used to be role="button" <div>s (logo, banners,
   queue/lock-countdown/rankings-card toggles) and are now real <button>/<a> elements. It only
   strips the browser's button/link chrome so they look exactly as before. Wrapped in :where()
   so it has zero specificity: every existing class rule (.queue-header's padding, the banners'
   inline styles, etc.) still wins over the reset regardless of source order. */
:where(.btn-bare) {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.btn-bare:focus-visible {
  outline: 2px solid var(--primary-green);
  outline-offset: 2px;
}

/* --- TOAST NOTIFICATIONS --- */
.mds-toast {
  position: fixed;
  bottom: 80px;
  right: 24px;
  background-color: var(--card-bg, #131b2c); 
  color: var(--text-main, #f3f4f6);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--primary-green, #10b981);
  transform: translateY(150%);
  opacity: 0;
  /* visibility flips only after the slide-out finishes, so a hidden toast's ✕ drops out of
     the tab order without cutting the exit animation short */
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0s linear 0.4s;
  z-index: 9999;
  pointer-events: none;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}

.mds-toast.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, visibility 0s;
}

/* Pointer events, only while shown and only where needed. A success toast stays click-through
   except for its ✕: it lands over the lower lineup rows, and quick lock/swap taps must reach
   the buttons underneath. Error toasts take the whole box, so a long message can be hovered or
   tapped to hold it open (see getToastElement in utils.js). Nothing hidden takes taps -- an
   invisible toast parked over the bottom nav must not swallow them. */
.mds-toast.show.toast-error,
.mds-toast.show .toast-dismiss-btn {
  pointer-events: auto;
}

.mds-toast.toast-error {
  border-color: var(--error-color);
}

.mds-toast .toast-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  /* ~32px tap target for phones; the negative margins keep it from growing the toast */
  padding: 8px;
  margin: -8px -12px -8px auto;
  flex-shrink: 0;
}

.mds-toast .toast-dismiss-btn:hover {
  color: var(--text-main);
}

@media (max-width: 767px) {
  .mds-toast {
    /* Clears .nav-bar, which pads itself by the same env() inset for the home indicator.
       (env() is 0 until the viewport meta adds viewport-fit=cover; this keeps them in step.) */
    bottom: calc(90px + env(safe-area-inset-bottom));
    left: 50%;
    right: auto;
    transform: translate(-50%, 150%);
    width: max-content;
    max-width: 90vw;
  }
  .mds-toast.show {
    transform: translate(-50%, 0);
  }
}

/* --- DENSE DATA TABLE STICKY SCROLLING (SCOPED) --- */
.table-container th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-surface, #121212);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); 
}

.table-container th:first-child, 
.table-container td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--bg-surface, #121212);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1); 
}

.table-container th:first-child {
  z-index: 15;
}
/* --- MOBILE COLLAPSIBLE CARDS --- */
.btn-expand {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
}

.chevron-icon {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-card.is-expanded .chevron-icon {
    transform: rotate(180deg);
}

.queue-header {
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    width: 100%; /* <button> since Chunk 3; buttons don't stretch like the old <div> did */
}

.queue-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.queue-header .chevron-icon {
    color: #f59e0b;
    flex-shrink: 0;
}

.queue-header.is-expanded .chevron-icon {
    transform: rotate(180deg);
}

/* Mobile Default: Details hidden only if setting is enabled.
   (Consolidated from what used to be two overlapping @media(max-width:600px) blocks here plus
   a third small one further down -- see the single block near the PLAYER CARD GRID LAYOUT
   section below for the live rules.) */

/* Desktop Default: Details always visible, expand button hidden.
   (Previously declared 3 times near-identically across this file -- consolidated to one.) */
@media (min-width: 768px) {
    .card-details {
        display: block !important; /* Force visible */
        margin-top: 0.25rem;
    }
    
    .hide-on-desktop {
        display: none !important;
    }
}
/* --- PLAYER CARD GRID LAYOUT --- */
.card-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    /* Default: Actions span both rows, vertically centering them */
    grid-template-areas:
        "name actions"
        "stats actions";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.2rem;
    width: 100%;
}

.player-info {
    grid-area: name;
    min-width: 0;
}

.actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.card-details {
    grid-area: stats;
    min-width: 0;
}

.player-info h4 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    word-break: break-word;
}

.player-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.edit-link {
    cursor: pointer;
    font-size: 0.8rem;
    opacity: 0.75;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0; 
}

.edit-link:hover {
    opacity: 1;
    color: var(--primary-green);
}

/* --- SHARED CARD SUB-LAYOUT CLASSES ---
   Extracted from repeated inline styles in buildPlayerCardHTML() / buildQueueCardHTML()
   (js/mds.js). Each of these appeared identically in both card templates. */
.card-top-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.card-name {
    margin: 0;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.card-badges-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.card-field-label {
    font-size: 0.75rem;
    font-weight: bold;
    display: block;
}

.queue-arrow-btn {
    padding: 2px 8px;
    background: var(--bg-card);
    border-color: var(--border);
}

.queue-arrow-btn:disabled {
    opacity: 0.3;
}

/* --- MOBILE COLLAPSIBLE CARDS CONDITIONAL LAYOUT --- */
@media (max-width: 767px) {
    body.enable-mobile-collapse .card-grid {
        /* When enabled: Actions stay on top row, Stats span full width below */
        grid-template-areas:
            "name actions"
            "stats stats";
    }
    
    body.enable-mobile-collapse .card-details {
        display: none;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        padding-right: 0; /* allow full width when collapsed -- merged in from a separate block that used to live here */
        border-top: 1px dashed rgba(255, 255, 255, 0.1);
    }
    
    body.enable-mobile-collapse .player-card.is-expanded .card-details {
        display: block;
    }

    body:not(.enable-mobile-collapse) .btn-expand {
        display: none !important;
    }
}

.methodology-link {
    margin-left: 4px;
    display: inline-block;
}

@media (max-width: 767px) {
    .methodology-link {
        display: block; /* Forces it to its own line */
        margin-left: 0;
        margin-top: 4px;
    }
}
/* Instantly hides headshots when the body class is present */
body.hide-headshots .draft-cell-img {
    display: none !important;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; } 
.custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
.tooltip-container, 
.tooltip-icon, 
.tooltip-text {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
/* --- ROSTER AVATARS --- */
.roster-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.roster-avatar.placeholder {
    background-color: transparent;
    border: none;
}

/* --- FULL-WIDTH DRAFT BOARD FOR DESKTOP --- */
@media (min-width: 1024px) {
    /* THE FIX: Break #boardTab out of the 1200px .container trap to fill the monitor */
    #boardTab {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        box-sizing: border-box;
    }

    #draftMatrixContainer {
        width: 100%;
        max-width: 100%;
    }

    .draft-grid {
        width: 100%;
        /* Force all columns to distribute evenly across the full width */
        grid-template-columns: repeat(var(--num-teams, 12), minmax(0, 1fr)) !important;
        gap: 4px; 
    }

    /* Scale up cell heights, font sizes, and headshots on large monitors */
    .draft-cell {
        min-height: 80px;
        padding: 6px 4px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* Stop inner text from pushing cell boundaries */
    }

    .draft-cell-img {
        width: 38px;  
        height: 38px;
        margin-bottom: 2px;
    }

    .draft-cell-first {
        font-size: 0.8rem;
    }

    .draft-cell-last {
        font-size: 0.85rem;
        font-weight: 700;
    }

    .draft-col-header {
        font-size: 0.9rem;
        padding: 0.75rem 0.4rem;
        overflow: hidden; 
        text-overflow: ellipsis; 
        white-space: nowrap;
    }
}
/* Accessibility: Ensure Minimum Mobile Touch Targets (44x44px) */
.close-banner-btn,
.close-menu-btn,
.btn-expand,
.edit-icon,
.close-chip {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* Optional: If a small icon visual size needs to be preserved, expand hit area via pseudo-element */
.close-banner-btn {
    padding: 0.5rem;
    position: relative;
}

.close-banner-btn::after {
    content: '';
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
}
/* Remove default browser underlines from link buttons */
a.nav-btn,
.nav-btn {
    text-decoration: none;
}
/* --- TABLE HEADER TOOLTIP FIXES --- */

/* Tooltip Container on Table Headers */
.table-header-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
}

/* Tooltip Popup Bubble */
.table-header-tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 999;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    
    /* Strict Text Wrapping & Sizing */
    width: max-content;
    max-width: 220px;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box;
    
    /* Typography */
    text-align: center;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: none; /* Keeps original casing without forcing layout-breaking uppercase */
    
    /* Styling */
    background: rgba(15, 23, 42, 0.98);
    color: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

/* Hover Trigger */
.table-header-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Right-side Column Alignment (Prevents horizontal scrolling & right-edge clipping) */
.table-header-tooltip.align-right .tooltip-text {
    left: auto;
    right: 0;
    transform: none;
}
/* Player-name autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
}
.autocomplete-item:hover, .autocomplete-item.highlighted {
    background: rgba(16, 185, 129, 0.12);
}
.autocomplete-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 0.75rem;
    white-space: nowrap;
}

/* "Did you mean" hint on a Scout card */
.scout-suggest-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.scout-suggest-link { color: #fb923c; font-weight: 600; text-decoration: underline; }
.scout-suggest-link:hover { color: #fdba74; }
/* --- WAIVER WIRE ASSISTANT: AUTO-FIND (Scout tab) ---
   Waiver Wire Assistant Auto-Find + Scan Pasted List. Cards reuse .scout-result-card; these add
   the verdict line, pills, drop-candidate box, and the Compare Against toggle. See
   autoFindWaiverUpgrades / buildWaiverContext in mls.js. */
.mls-scan-summary { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; padding: 0.75rem 0.9rem; background: rgba(255, 255, 255, 0.04); border-radius: 6px; }
.mls-scan-summary strong { color: var(--text-main); }
.mls-scan-notes { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; }
.mls-scan-notes li { margin-top: 0.2rem; }
.mls-scan-card { align-items: flex-start; gap: 0.75rem; }
.mls-scan-card-start { border-left: 3px solid var(--primary-green); }
.mls-scan-main { min-width: 0; flex: 1; }
.mls-scan-ranks { margin-top: 5px; }
.mls-scan-verdict { font-size: 0.8rem; color: var(--text-main); margin-top: 6px; line-height: 1.4; }
/* Own line under the verdict sentence: at phone width these two ranks wrapped mid-phrase when
   they trailed the sentence inline. Each pair inside is .mls-nowrap, so a narrow screen breaks
   at the comma, never inside "Wk Flex:" or between a name and its rank. */
.mls-verdict-nums { display: block; color: var(--text-muted); margin-top: 2px; }
.mls-muted-rank { color: var(--text-muted); font-weight: 400; }
.mls-scan-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 1rem; }
.mls-verdict-start { background: var(--target-bg); color: var(--primary-green); border: 1px solid var(--target-border); white-space: nowrap; }
.mls-verdict-bench { background: rgba(255, 255, 255, 0.05); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; }
.mls-verdict-out { background: var(--avoid-bg); color: #fca5a5; border: 1px solid var(--avoid-border); white-space: nowrap; }
.mls-scan-pill-stack { margin-top: 4px; }
.mls-scan-benchmark { background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 6px; border-left: 3px solid #fca5a5; font-size: 0.85rem; color: var(--text-main); margin-bottom: 1rem; line-height: 1.5; }
.mls-scan-benchmark-title { color: #fca5a5; font-weight: bold; margin-bottom: 4px; }
.mls-scan-benchmark-ok { margin-top: 0.35rem; color: var(--primary-green); font-weight: 600; }
.mls-scan-benchmark-next { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.8rem; }
/* Two-option segmented toggle (Compare Against: Starting Lineup | Whole Roster). */
.mls-segmented { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, 0.15); }
.mls-segmented-btn { flex: 1; padding: 0.6rem 0.5rem; background: transparent; color: var(--text-muted); border: none; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.mls-segmented-btn + .mls-segmented-btn { border-left: 1px solid var(--border); }
.mls-segmented-btn.active { background: var(--target-bg); color: var(--primary-green); }
.mls-segmented-btn:focus-visible { outline: 2px solid var(--primary-green); outline-offset: -2px; }
.mls-nowrap { white-space: nowrap; }

/* --- ALL-LEAGUES PLAYER SEARCH (Scout tab, Scan Pasted List -> "All My Leagues") ---
   One card per player, with a per-league ownership row beneath the header. Markup comes from
   runAllLeaguesSearch in mls.js. The card is deliberately its own box rather than a
   .scout-result-card: those are single-line summaries, while each of these carries a variable
   number of league rows and needs a header/body split to stay readable at five-plus leagues. */
.mls-league-search-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.mls-league-search-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
}
.mls-league-search-name {
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.mls-league-search-team { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }

/* Rows sit on a slightly recessed panel so the per-league list reads as the card's body
   rather than as more header content. */
.mls-league-search-rows {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid var(--border);
}
.mls-league-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-left: 3px solid transparent;
}
.mls-league-search-row + .mls-league-search-row { border-top: 1px solid var(--border); }
/* Only the actionable row gets a colored edge -- marking every status would turn the list
   into a stripe chart and bury the one row worth acting on. */
.mls-league-search-free { border-left-color: var(--primary-green); }
.mls-league-search-meta { min-width: 0; }
.mls-league-search-league { font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.mls-league-search-format { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.mls-league-search-active {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary-green);
    border: 1px solid var(--target-border);
    background: var(--target-bg);
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.mls-league-search-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Recommended row for the chosen Buy/Sell intent (see buildPowerRead in mls.js). Wins over the
   green free-agent edge: when a Buy/Sell verdict exists, it's the more specific signal. */
.mls-league-search-row.mls-league-search-rec { border-left-color: #a78bfa; background: rgba(167, 139, 250, 0.06); }

/* Per-league Positional Power Rank line + verdict, under the league name. Tier colors match the
   Positional Power Rankings table's own green / neutral / red cells. */
.mls-power-line { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.mls-power-line strong { font-weight: 700; }
.mls-power-strong { color: #4ade80; }
.mls-power-middle { color: var(--text-main); }
.mls-power-weak { color: #fca5a5; }
.mls-power-arrow { opacity: 0.6; }
.mls-power-src {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 4px;
    padding: 0 4px;
    margin-left: 2px;
    cursor: help;
}
.mls-power-verdict {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
.mls-power-chip {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    white-space: nowrap;
}
.mls-power-chip-rec {
    color: #c4b5fd;
    background: rgba(167, 139, 250, 0.12);
    border-color: rgba(167, 139, 250, 0.5);
}
/* Leagues scored without their own ROS rankings (market fallback) or not at all -- see
   renderPowerSourceNote in mls.js. Amber to match the "mkt" tag it explains. */
.mls-power-note {
    font-size: 0.72rem;
    color: #fbbf24;
    margin-top: 4px;
    line-height: 1.4;
}
.mls-power-summary { font-size: 0.8rem; color: var(--text-main); margin-top: 6px; line-height: 1.5; }
.mls-power-summary-none { color: var(--text-muted); }

/* Neutral fourth state alongside status-avail/owned/mine: a league that structurally can't
   answer the availability question (manual or handoff leagues store only your own players). */
.mls-status-unknown {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

@media (max-width: 520px) {
    /* At phone width the status pill plus a Switch button crowds the league name off its
       line; stacking the row keeps both the name and its format badge fully readable. */
    .mls-league-search-row { align-items: flex-start; flex-direction: column; }
    .mls-league-search-actions { width: 100%; justify-content: space-between; }
}

/* Unmatched-name warning inside the rankings upload preview modal (see openRankingsPreview). */
.mls-preview-unmatched { background: rgba(252, 165, 165, 0.08); border: 1px solid var(--avoid-border); border-radius: 6px; padding: 0.7rem 0.8rem; margin-top: 0.75rem; text-align: left; }
.mls-preview-unmatched-title { color: #fca5a5; font-weight: 700; font-size: 0.82rem; margin-bottom: 0.3rem; }
.mls-preview-unmatched-list { font-size: 0.82rem; color: var(--text-main); line-height: 1.45; }
.mls-preview-unmatched-hint { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; margin: 0.4rem 0 0; }
.mls-preview-derived { background: rgba(147, 197, 253, 0.08); border: 1px solid var(--dart-border, rgba(147, 197, 253, 0.35)); border-radius: 6px; padding: 0.7rem 0.8rem; margin-top: 0.75rem; text-align: left; }
.mls-preview-derived-title { color: #93c5fd; font-weight: 700; font-size: 0.82rem; margin-bottom: 0.3rem; }
.mls-preview-derived-body { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin: 0; }
/* --- Drag-and-drop file upload (see window.enableFileDrop in js/utils.js) --- */
/* The card (or MLS position box) under a dragged file. An outline rather than a border so
   nothing shifts; the tint makes the whole target read as one drop area. */
.mds-drop-active {
    outline: 2px dashed var(--primary-green);
    outline-offset: -4px;
    background-color: rgba(16, 185, 129, 0.06);
}
/* "Or drop a file here" hint under the upload inputs. Hidden on touch-only devices, where
   there's nothing to drag from. */
.mds-drop-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0;
}
@media (hover: none) {
    .mds-drop-hint { display: none; }
}

/* --- POSITIONAL POWER RANKINGS (Roster tab) ---
   Markup from renderPowerRankingsTable in mls.js. Replaces the old inline-styled table. Cell
   colors are the same green / neutral / red thirds powerTier() uses everywhere else.
   overflow: visible so the player tooltips aren't clipped by the table wrapper. */
.mls-power-table-wrap { overflow: visible; border: 1px solid var(--border); border-radius: 6px; }
.mls-power-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 0.9rem; }
.mls-power-table th {
    padding: 10px 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border);
}
.mls-power-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); font-weight: 600; }
.mls-power-table tbody tr:last-child td { border-bottom: none; }
.mls-power-table .mls-power-manager { text-align: left; padding-left: 10px; }
.mls-power-owner { color: var(--text-main); font-weight: 500; display: block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mls-power-you td { background: rgba(147, 197, 253, 0.08); }
.mls-power-you .mls-power-owner { font-weight: 700; }
.mls-power-strong-col { font-weight: 800; }
.mls-power-cell-strong { color: #4ade80; }
.mls-power-cell-middle { color: var(--text-main); }
.mls-power-cell-weak { color: #fca5a5; }
/* Table tooltips: display:none (not the site-wide visibility:hidden) while closed, because a
   hidden-but-laid-out tooltip that opens rightward still widens the page and lets it scroll
   sideways on a phone. Selectors carry .mls-power-table .tooltip-container so they outrank the
   site-wide .tooltip-container .tooltip-text rule. Left-hand columns open rightward, the rest
   leftward (see buildTooltip in renderPowerRankingsTable). */
.mls-power-table .tooltip-container .mls-power-tooltip { display: none; width: 220px; font-weight: normal; z-index: 1005; text-align: left; }
.mls-power-table .tooltip-container:hover .mls-power-tooltip,
.mls-power-table .tooltip-container:focus-visible .mls-power-tooltip,
.mls-power-table .tooltip-container .mls-power-tooltip.mobile-visible { display: block; }
/* Dismissed with Escape or a second tap/press (see initTooltips in js/utils.js). */
.mls-power-table .tooltip-container:hover .mls-power-tooltip.tt-dismissed:not(.mobile-visible),
.mls-power-table .tooltip-container:focus-visible .mls-power-tooltip.tt-dismissed:not(.mobile-visible) { display: none; }
.mls-power-table .tooltip-container .mls-power-tooltip-left { left: -10px; right: auto; }
.mls-power-table .tooltip-container .mls-power-tooltip-right { right: 0; left: auto; }
.mls-power-tooltip-title { font-weight: 700; color: var(--text-main); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.mls-power-tooltip-empty { color: var(--text-muted); font-style: italic; font-size: 0.8rem; }
.mls-power-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 0.8rem; }
.mls-power-tooltip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; }
.mls-power-tooltip-slot { display: inline-block; min-width: 3.4em; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; }
.mls-power-tooltip-rank { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.mls-power-balance-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.mls-power-balance { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.78rem; margin: 2px 0 6px; }
.mls-power-balance-item { white-space: nowrap; color: var(--text-muted); }
.mls-power-balance-item strong { color: var(--text-main); }
.mls-power-balance-item strong.mls-power-cell-strong { color: #4ade80; }
.mls-power-balance-item strong.mls-power-cell-weak { color: #fca5a5; }
.mls-power-balance-foot { font-size: 0.7rem; color: var(--text-muted); margin: -2px 0 6px; }
.mls-power-tooltip-more { color: var(--text-muted); font-size: 0.75rem; margin-top: 6px; text-align: center; }
.mls-power-notes { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.mls-power-empty { font-size: 0.85rem; color: var(--text-muted); padding: 1rem; text-align: center; background: rgba(0, 0, 0, 0.15); border: 1px dashed var(--border); border-radius: 8px; }

@media (max-width: 520px) {
    /* Seven-plus columns on a phone: tighter cells and a narrower name column keep the table
       inside the card without a horizontal scroller (which would clip the tooltips). */
    .mls-power-table { font-size: 0.8rem; }
    .mls-power-table th { padding: 8px 1px; font-size: 0.6rem; letter-spacing: 0; }
    .mls-power-table td { padding: 9px 1px; }
    .mls-power-table .mls-power-manager { padding-left: 6px; }
    .mls-power-owner { max-width: 5.5rem; font-size: 0.78rem; }
    /* The "window closing" / "young core" qualifier stays in the Your Team summary; in the
       table it would make the Manager column the widest thing on the row. */
    .mls-power-table .mls-power-label-note { display: none; }
    .mls-power-table .mls-power-label { font-size: 0.55rem; padding: 0 4px; }
    /* On a phone, anchor each tooltip to its ROW rather than its cell, so it opens across the
       full table width just under that row -- never off either edge of the screen. */
    .mls-power-table tbody tr { position: relative; }
    .mls-power-table td .tooltip-container { position: static; }
    .mls-power-table .tooltip-container .mls-power-tooltip,
    .mls-power-table .tooltip-container .mls-power-tooltip-left,
    .mls-power-table .tooltip-container .mls-power-tooltip-right { left: 4px; right: 4px; width: auto; top: calc(100% - 2px); }
}

/* Team direction labels (see assignPowerLabels in mls.js). Green = win now, blue = close,
   amber = on the fence (redraft Bubble), red = sell / long odds. */
.mls-power-label {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.mls-power-label-note { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.mls-power-label-contender { color: #4ade80; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.45); }
.mls-power-label-retool { color: #93c5fd; background: rgba(147, 197, 253, 0.1); border-color: rgba(147, 197, 253, 0.45); }
.mls-power-label-bubble { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.45); }
.mls-power-label-rebuild,
.mls-power-label-longshot { color: #fca5a5; background: rgba(252, 165, 165, 0.1); border-color: rgba(252, 165, 165, 0.45); }

/* "Your Team" summary above the table, edged in the label's color. */
.mls-power-summary-card {
    margin-bottom: 0.9rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}
.mls-power-summary-contender { border-left-color: #4ade80; }
.mls-power-summary-retool { border-left-color: #93c5fd; }
.mls-power-summary-bubble { border-left-color: #fbbf24; }
.mls-power-summary-rebuild,
.mls-power-summary-longshot { border-left-color: #fca5a5; }
.mls-power-summary-head { font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mls-power-summary-head .mls-power-label { margin-top: 0; font-size: 0.7rem; }
.mls-power-summary-facts { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.mls-power-summary-facts strong { color: var(--text-main); }
.mls-power-summary-advice { font-size: 0.82rem; color: var(--text-main); margin-top: 6px; line-height: 1.45; }

/* Active Roster card's Power Rankings snapshot (see renderRosterPowerStrip in mls.js): your
   own ranks only, same tier colors as the table. Seven evenly split cells fit a 360px phone. */
.mls-roster-power {
    margin-bottom: 0.9rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}
.mls-roster-power-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 0.55rem; }
.mls-roster-power-title { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.mls-roster-power-head .mls-power-label { margin-top: 0; }
.mls-roster-power-of { font-size: 0.72rem; color: var(--text-muted); }
.mls-roster-power-stats { display: grid; gap: 4px; } /* column count set inline: one per stat */
.mls-roster-power-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.35rem 0.1rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
}
.mls-roster-power-stat-name { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.mls-roster-power-stat-rank { font-size: 1.05rem; font-weight: 800; line-height: 1.1; }
.mls-roster-power-link { display: inline-block; margin-top: 0.55rem; font-size: 0.75rem; font-weight: 600; color: #c4b5fd; text-decoration: underline; }
.mls-roster-power-link:hover { color: #ddd6fe; }
@media (max-width: 520px) {
    /* All seven cells stay on one row at 360px: slimmer padding and labels. */
    .mls-roster-power { padding: 0.65rem 0.6rem; }
    .mls-roster-power-stats { gap: 3px; }
    .mls-roster-power-stat-name { font-size: 0.55rem; letter-spacing: 0; }
    .mls-roster-power-stat-rank { font-size: 0.95rem; }
}

/* Scout tab's temporary "moved to the Roster tab" pointer -- see goToPowerRankings in mls.js
   for when to remove it. */
.mls-moved-pointer { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.mls-moved-pointer-text { margin: 0; }
/* Now a <button> (was <a href="#">); the underline keeps the old link look. */
.mls-moved-pointer-link { color: #c4b5fd; font-weight: 600; white-space: nowrap; text-decoration: underline; }