/* Lifted verbatim from templates/base.html. Edit here, not there.
   Load position in base.html is load-bearing: see the note at the
   <link> that pulls this file in. */
/* --- base.html line 193 --- */
/* ── Critical CSS: Accessibility & CLS Prevention ── */

    /* WCAG: Screen-reader-only utility */
    .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;
    }

    /* WCAG: Focus styles for keyboard navigation */
    *:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }

    /* WCAG: Reduced motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* CLS Prevention: Reserve space for images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* CLS Prevention: Reserve space for fonts */
    body {
        font-display: swap;
    }

    /* Skip navigation link */
    .skip-nav:focus {
        top: 0 !important;
        clip: auto;
        width: auto;
        height: auto;
    }

    /* Modern Scrollbar Styles - Universal */
    /* Firefox – wrapped in @supports so Lighthouse doesn't flag it as a non-composited animation */
    @supports (scrollbar-color: auto) {
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
        }
    }
    
    /* Chrome, Safari, Edge */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    *::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 10px;
    }
    
    *::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.4);
        border-radius: 10px;
        transition: background 0.2s ease;
    }
    
    *::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.6);
    }
    
    *::-webkit-scrollbar-thumb:active {
        background: rgba(148, 163, 184, 0.8);
    }
    
    /* Force auth buttons to show on mobile with labels */
    @media (max-width: 768px) {
        #mainHeader .auth-buttons,
        header .auth-buttons,
        .header-container .auth-buttons,
        .auth-buttons {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            gap: 0.3rem;
            align-items: center;
            flex-shrink: 0;
        }
        
        #mainHeader .auth-buttons .auth-btn,
        header .auth-buttons .auth-btn,
        .header-container .auth-buttons .auth-btn,
        .auth-buttons .auth-btn {
            display: inline-flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 0.2rem 0.5rem !important;
            font-size: 0.65rem !important;
            width: auto !important;
            height: auto !important;
            border-radius: 5px !important;
            gap: 0.2rem;
            line-height: 1.3;
        }
        
        #mainHeader .auth-buttons .auth-btn span,
        header .auth-buttons .auth-btn span,
        .header-container .auth-buttons .auth-btn span,
        .auth-buttons .auth-btn span {
            display: inline !important;
        }
        
        #mainHeader .auth-buttons .login-btn,
        header .auth-buttons .login-btn,
        .auth-buttons .login-btn {
            background: transparent !important;
            color: #475569 !important;
            border: 1px solid #e2e8f0 !important;
        }
        
        #mainHeader .auth-buttons .signup-btn,
        header .auth-buttons .signup-btn,
        .auth-buttons .signup-btn {
            background: var(--primary-green) !important;
            color: #ffffff !important;
            border: 1px solid var(--primary-green) !important;
        }
    }