/* CSS Variables for Theming */
        :root {
            /* Light Mode Colors (default) - Modern Blue-Gray Palette */
            --bg-primary: #ffffff;
            --bg-secondary: #f4f4f5;
            --bg-panel: rgba(255, 255, 255, 0.95);
            --text-primary: #18181b;
            --text-secondary: #71717a;
            --accent: #2563eb;
            --accent-hover: #1d4ed8;
            --border: #e4e4e7;
            --border-light: #f4f4f5;
            --shadow: rgba(0, 0, 0, 0.1);
            --input-bg: #ffffff;
            --input-border: #e4e4e7;
            --scrollbar-track: rgba(0, 0, 0, 0.05);
            --scrollbar-thumb: rgba(0, 0, 0, 0.2);
            --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
            /* Semantic & utility */
            --danger: #dc2626;
            --danger-bg: rgba(220, 38, 38, 0.1);
            --warning: #ea580c;
            --success: #16a34a;
            --accent-text: #ffffff;
            --accent-shadow: rgba(37, 99, 235, 0.2);
            --accent-bg: rgba(37, 99, 235, 0.08);
            /* Shadow scale */
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
        }

        [data-theme="dark"] {
            /* Dark Mode Colors - Enhanced Contrast */
            --bg-primary: #18181b;
            --bg-secondary: #27272a;
            --bg-panel: rgba(39, 39, 42, 0.95);
            --text-primary: #fafafa;
            --text-secondary: #a1a1aa;
            --accent: #3b82f6;
            --accent-hover: #60a5fa;
            --border: #3f3f46;
            --border-light: #27272a;
            --shadow: rgba(0, 0, 0, 0.4);
            --input-bg: #27272a;
            --input-border: #3f3f46;
            --scrollbar-track: rgba(255, 255, 255, 0.05);
            --scrollbar-thumb: rgba(255, 255, 255, 0.2);
            --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
            /* Semantic & utility */
            --danger: #ef4444;
            --danger-bg: rgba(239, 68, 68, 0.15);
            --warning: #f97316;
            --success: #22c55e;
            --accent-text: #ffffff;
            --accent-shadow: rgba(59, 130, 246, 0.3);
            --accent-bg: rgba(59, 130, 246, 0.12);
            /* Shadow scale */
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Eliminate the ~300ms tap delay on interactive controls and prevent
           double-tap zoom on buttons. Does NOT affect the map (div, not button). */
        button,
        [role="button"],
        input,
        select,
        label,
        a {
            touch-action: manipulation;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display",
                         "Segoe UI", "Roboto", system-ui, sans-serif;
            height: 100vh;
            overflow: hidden;
            background: var(--bg-primary);
            color: var(--text-primary);
            transition: background 0.3s ease, color 0.3s ease;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "cv11", "ss01";
        }

        #map {
            height: 100vh;
            width: 100%;
            z-index: 1;
            background-color: #1a1a1a; /* Dark background prevents white flash during tile loading */
        }

        /* Hardware acceleration for smoother zoom/pan */
        .leaflet-map-pane,
        .leaflet-tile-pane,
        .leaflet-overlay-pane,
        .leaflet-marker-pane {
            transform: translate3d(0, 0, 0);
            will-change: transform;
        }

        /* Quick fade-in animation for markers and clusters */
        .leaflet-marker-icon,
        .marker-cluster {
            animation: markerFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes markerFadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Quick cluster split/merge during zoom */
        .leaflet-cluster-anim .leaflet-marker-icon,
        .leaflet-cluster-anim .leaflet-marker-shadow {
            transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-out;
        }

        .controls-panel {
            position: absolute;
            top: 5px;
            right: 5px;
            background: var(--bg-panel);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 15px;
            padding-top: 5px;
            width: 280px;
            max-width: 280px;
            min-width: 280px;
            max-height: calc(100vh - 47.5px);
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 1000;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        .controls-panel.collapsed {
            max-width: 280px;
            min-width: 280px;
            width: 280px;
            padding-bottom: 8px;
            overflow: hidden;
        }

        .controls-panel.collapsed .panel-content {
            display: none;
        }

        .controls-panel.collapsed .panel-header {
            margin-bottom: 0;
        }

        .controls-panel::-webkit-scrollbar {
            width: 8px;
        }

        .controls-panel::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 4px;
        }

        .controls-panel::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
        }

        .controls-panel::-webkit-scrollbar-thumb:hover {
            background: var(--scrollbar-thumb-hover);
        }

        .panel-header {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--accent);
            border-bottom: 2px solid var(--border);
            padding-bottom: 6px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .collapse-btn {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            border-radius: 4px;
        }

        .collapse-btn:hover {
            background: var(--border);
            transform: scale(1.1);
        }

        .help-btn {
            background: none;
            border: 2px solid var(--accent);
            color: var(--accent);
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            border-radius: 50%;
            margin-right: 5px;
            font-weight: bold;
            font-size: 16px;
        }

        .help-btn:hover {
            background: var(--accent);
            color: var(--accent-text);
            transform: scale(1.1);
        }

        .theme-toggle-btn {
            background: none;
            border: none;
            color: var(--accent);
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            border-radius: 4px;
            margin-right: 5px;
        }

        .theme-toggle-btn:hover {
            background: var(--border);
            transform: scale(1.1);
        }

        /* ── Touch targets: ensure minimum 44×44px on mobile (WCAG 2.5.5) ── */
        @media (max-width: 768px) {
            .collapse-btn,
            .help-btn,
            .theme-toggle-btn {
                width: 44px;
                height: 44px;
            }

            /* :active provides touch feedback where :hover doesn't fire */
            .collapse-btn:active,
            .theme-toggle-btn:active {
                background: var(--border);
            }

            .help-btn:active {
                background: var(--accent);
                color: var(--accent-text);
            }

            .toggle-panel-btn {
                min-height: 44px;
                min-width: 44px;
            }

            .toggle-panel-btn:active {
                background: var(--accent-bg);
                border-color: var(--accent);
            }
        }

        .filter-group {
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
        }

        .filter-group:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        /* Professional Form Labels */
        .filter-label {
            display: block;
            margin-bottom: 4px;
            font-weight: 600;
            font-size: 11px;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Preset Selector Styles */
        .preset-selector-group {
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--border);
        }

        .preset-select {
            width: 100%;
            padding: 8px 10px;
            border-radius: 6px;
            border: 2px solid var(--accent);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }

        .preset-select:hover {
            background: var(--accent-bg);
            box-shadow: 0 2px 8px var(--accent-shadow);
        }

        .preset-select:focus {
            outline: none;
            box-shadow: 0 0 0 3px var(--accent-shadow);
        }

        .preset-description {
            margin-top: 8px;
            padding: 8px 12px;
            background: var(--accent-bg);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.5;
            min-height: 20px;
            border-left: 3px solid var(--accent);
        }

        .preset-description:empty {
            display: none;
        }

        /* Filter Toast Notification */
        .filter-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--accent);
            color: var(--accent-text);
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: var(--shadow-lg);
            font-size: 14px;
            font-weight: 500;
            z-index: 10001;
            opacity: 0;
            transform: translateX(400px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .filter-toast.show {
            opacity: 1;
            transform: translateX(0);
        }

        @media (max-width: 768px) {
            .filter-toast {
                top: 10px;
                right: 10px;
                left: 10px;
                text-align: center;
            }
        }

        /* Professional Input Styling */
        select, input[type="number"], input[type="text"] {
            width: 100%;
            padding: 5px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        select:hover, input[type="number"]:hover, input[type="text"]:hover {
            border-color: var(--accent);
            background: var(--bg-primary);
        }

        select:focus, input[type="number"]:focus, input[type="text"]:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px var(--accent-bg);
        }

        select:disabled, input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: var(--bg-secondary);
        }

        input[type="date"], input[type="time"] {
            width: 100%;
            padding: 4px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 11px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            color-scheme: light dark;
        }

        input[type="date"]:hover, input[type="time"]:hover {
            border-color: var(--accent);
            background: var(--bg-primary);
        }

        input[type="date"]:focus, input[type="time"]:focus {
            outline: none;
            border-color: var(--accent);
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px var(--accent-bg);
        }

        /* Prevent iOS Safari from zooming the page when an input is focused.
           Safari zooms when the focused input's font-size is below 16px.
           This only overrides font-size; visual scale is unchanged because
           the panel is narrow and 16px is not much larger than 13px here. */
        @media (max-width: 768px) {
            select,
            input[type="text"],
            input[type="number"],
            input[type="date"],
            input[type="time"] {
                font-size: 16px;
            }
        }

        input[type="range"] {
            width: 100%;
            height: 6px;
            background: var(--border);
            border-radius: 3px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            cursor: pointer;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background: var(--accent-hover);
            transform: scale(1.2);
        }

        input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }

        input[type="range"]::-moz-range-thumb:hover {
            background: var(--accent-hover);
            transform: scale(1.2);
        }

        select option {
            background: var(--input-bg);
            color: var(--text-primary);
        }

        /* Multi-select specific styling */
        select[multiple] {
            padding: 2px;
        }

        select[multiple] option {
            padding: 3px 5px;
            border-radius: 3px;
            margin: 1px 0;
            font-size: 11px;
        }

        select[multiple] option:checked {
            background: var(--accent);
            color: var(--accent-text);
        }

        /* Helper text for multi-select - hidden now that we have controls */
        .multi-select-hint {
            display: none;
        }

        /* Multi-select enhancements */
        .multi-select-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 4px;
            gap: 6px;
        }

        .multi-select-count {
            font-size: 11px;
            color: var(--accent);
            font-weight: 600;
        }

        .multi-select-buttons {
            display: flex;
            gap: 4px;
        }

        .select-all-btn, .clear-selection-btn {
            font-size: 11px;
            padding: 2px 6px;
            border: 1px solid var(--border);
            background: var(--border-light);
            color: var(--text-secondary);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .select-all-btn:hover {
            background: var(--accent);
            color: var(--accent-text);
            border-color: var(--accent);
        }

        .clear-selection-btn:hover {
            background: var(--danger-bg);
            color: var(--danger);
            border-color: var(--danger);
        }

        .selected-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
            min-height: 20px;
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            background: var(--accent);
            color: var(--accent-text);
            border-radius: 12px;
            font-size: 11px;
            font-weight: 600;
            animation: chipAppear 0.2s ease;
        }

        @keyframes chipAppear {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .chip .chip-remove {
            cursor: pointer;
            padding: 0 2px;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .chip .chip-remove:hover {
            opacity: 1;
        }

        /* Area search box */
        .area-search-box {
            margin-bottom: 4px;
        }

        .area-search-input {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-primary);
            border-radius: 4px;
            font-size: 11px;
            transition: all 0.3s;
        }

        .area-search-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px var(--border);
        }

        .area-search-input::placeholder {
            color: var(--text-secondary);
            font-style: italic;
        }

        /* Spatial Filters Side-by-Side Layout */
        .spatial-filters-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .spatial-filter-col {
            position: relative;
            min-width: 0;
            overflow: hidden;
            transition: opacity 0.3s ease-out;
            opacity: 1;
        }

        /* When search is active, give it full width */
        .spatial-filters-row.search-active {
            grid-template-columns: 1fr 0;
        }

        .spatial-filters-row.search-active .spatial-filter-col:nth-child(2) {
            opacity: 0;
        }

        /* When draw is active, give it full width */
        .spatial-filters-row.draw-active {
            grid-template-columns: 0 1fr;
        }

        .spatial-filters-row.draw-active .spatial-filter-col:nth-child(1) {
            opacity: 0;
        }

        /* Add subtle divider between columns (only when both visible) */
        .spatial-filter-col:first-child::after {
            content: '';
            position: absolute;
            top: 0;
            right: -4px;
            width: 1px;
            height: 100%;
            background: var(--border);
            opacity: 0.5;
            transition: opacity 0.3s;
        }

        /* Hide divider when either column is active */
        .spatial-filters-row.search-active .spatial-filter-col:first-child::after,
        .spatial-filters-row.draw-active .spatial-filter-col:first-child::after {
            opacity: 0;
        }

        /* Stack vertically on mobile */
        @media (max-width: 768px) {
            .spatial-filters-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .spatial-filter-col:first-child::after {
                display: none;
            }
        }

        /* Collapsible Location Search */
        .location-search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            background: var(--border-light);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
        }

        .location-search-header:hover {
            background: var(--border);
        }

        .location-search-header:active {
            background: var(--border);
        }

        .location-search-header .header-text {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent);
        }

        .location-search-header .toggle-icon {
            font-size: 12px;
            color: var(--text-secondary);
            transition: transform 0.3s;
        }

        .location-search-header.expanded .toggle-icon {
            transform: rotate(180deg);
        }

        .location-search-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .location-search-content.expanded {
            max-height: 500px;
            overflow: visible;
        }

        .location-search-inner {
            padding-top: 8px;
            position: relative;
        }

        /* Location autocomplete suggestions */
        .location-suggestions {
            position: absolute;
            top: 28px;
            left: 0;
            right: 0;
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 4px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 10000;
            box-shadow: var(--shadow-md);
            display: none;
            margin-top: 2px;
        }

        .location-suggestions.show {
            display: block !important;
        }

        .suggestion-item {
            padding: 6px 8px;
            font-size: 11px;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 1px solid var(--border-light);
        }

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

        .suggestion-item:hover,
        .suggestion-item.selected {
            background: var(--accent);
            color: var(--accent-text);
        }

        .suggestion-item .match {
            font-weight: 600;
            color: var(--accent);
        }

        .suggestion-item:hover .match,
        .suggestion-item.selected .match {
            color: var(--accent-text);
        }

        .suggestion-category {
            font-size: 11px;
            color: var(--text-secondary);
            padding: 4px 8px;
            background: var(--border-light);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--accent);
        }

        .checkbox-item label {
            font-size: 13px;
            cursor: pointer;
        }

        .layer-controls {
            margin-top: 15px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
        }

        .layer-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
            margin-bottom: 6px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 12px;
        }

        .layer-toggle:hover {
            background: var(--border);
            border-color: var(--accent);
            transform: translateX(-2px);
        }

        .layer-toggle.active {
            background: var(--border);
            border: 1px solid var(--accent);
            border-left: 3px solid var(--accent);
        }

        .choropleth-mode-pill {
            display: flex;
            background: var(--border);
            border-radius: 12px;
            padding: 2px;
            margin: 0 6px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .choropleth-mode-btn {
            padding: 3px 8px;
            font-size: 10px;
            font-weight: 600;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: 10px;
            transition: all 0.2s;
            position: relative;
            white-space: nowrap;
        }

        .choropleth-mode-btn:hover:not(:disabled) {
            color: var(--text-primary);
        }

        .choropleth-mode-btn.active {
            background: var(--accent);
            color: #ffffff;
        }

        .choropleth-mode-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Enhanced Statistics Panel */
        .stats-panel {
            margin-top: 12px;
            padding: 10px;
            background: linear-gradient(135deg,
                        var(--bg-secondary) 0%,
                        var(--bg-primary) 100%);
            border-radius: 8px;
            border: 1px solid var(--border);
            border-left: 4px solid var(--accent);
            box-shadow: var(--shadow-sm);
        }

        .stats-panel h3 {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
            color: var(--text-secondary);
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border-light);
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
            font-size: 12px;
            border-bottom: 1px solid var(--border-light);
        }

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

        .stat-label {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .stat-value {
            font-weight: 700;
            font-size: 14px;
            color: var(--text-primary);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.02em;
        }

        .export-btn {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            background: var(--accent);
            color: var(--accent-text);
            border: none;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .export-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px var(--accent-shadow);
        }

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

        .attribution-disclaimer {
            font-size: 11px;
            color: var(--text-secondary);
            font-style: italic;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid var(--border);
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-primary);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .loading-content {
            background: var(--bg-panel);
            padding: 30px 50px;
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            text-align: center;
            width: min(400px, calc(100vw - 40px));
        }

        .loading-spinner {
            border: 4px solid var(--border);
            border-top: 4px solid var(--accent);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 480px) {
            .loading-content {
                padding: 24px 20px;
            }
        }

        .hidden {
            display: none;
        }

        .apply-filters-btn {
            width: 100%;
            padding: 10px;
            margin-top: 6px;
            background: var(--accent);
            color: var(--accent-text);
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: var(--shadow-sm);
        }

        .apply-filters-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

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

        .clear-filters-btn {
            width: 100%;
            padding: 6px;
            margin-top: 4px;
            background: var(--border-light);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
        }

        .clear-filters-btn:hover {
            background: var(--danger-bg);
            border-color: var(--danger);
            color: var(--danger);
            transform: translateY(-2px);
        }

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

        /* Utility Classes */
        .flex-gap-small {
            display: flex;
            gap: 5px;
        }

        .flex-gap-medium {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 5px;
        }

        .button-row {
            display: flex;
            gap: 4px;
            margin-top: 6px;
        }

        .button-row-item {
            flex: 1;
            padding: 5px;
            font-size: 11px;
        }

        .section-divider {
            padding-bottom: 2px;
            margin-bottom: 12px;
        }

        .basic-filters-group {
            border-top: 2px solid var(--border);
            border-bottom: 2px solid var(--border);
            padding: 12px 0;
            margin-bottom: 12px;
        }

        .hidden {
            display: none;
        }

        /* GPS marker */
        .gps-marker-dot {
            width: 20px;
            height: 20px;
            position: relative;
            /* Pulse animates out to 44x44 — force visible so Leaflet's
               .leaflet-marker-icon can't clip it via future CSS changes. */
            overflow: visible;
        }

        .gps-marker-dot::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: #22c55e;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            z-index: 2;
        }

        .gps-marker-pulse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 12px;
            background: rgba(34, 197, 94, 0.5);
            border-radius: 50%;
            animation: gpsPulse 2s ease-out infinite;
        }

        @keyframes gpsPulse {
            0%   { width: 12px; height: 12px; opacity: 0.8; }
            100% { width: 44px; height: 44px; opacity: 0; }
        }

        /* GPS button — double-class specificity beats .apply-filters-btn, no !important needed */
        .button-row-item.gps-btn {
            background: #16a34a;
        }

        .button-row-item.gps-btn:hover,
        .button-row-item.gps-btn:active {
            background: #15803d;
            transform: translateY(-1px);
        }

        /* Lit-up ring when GPS mode is active */
        .button-row-item.gps-btn-active {
            background: #15803d;
            box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55);
        }

        /* On very narrow screens stack GPS on its own row so text doesn't squash */
        @media (max-width: 360px) {
            #gpsBtn {
                flex-basis: 100%;
                order: 1;
            }
        }

        /* Location Search Styles */
        .location-search-input {
            width: 100%;
            padding: 5px;
            border-radius: 4px;
            border: 1px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 11px;
        }

        .radius-container {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            align-items: center;
        }

        .radius-label {
            font-size: 11px;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .radius-select {
            flex: 1;
            padding: 3px;
            font-size: 11px;
            border-radius: 4px;
            border: 1px solid var(--input-border);
            background: var(--input-bg);
            color: var(--text-primary);
        }

        .search-results-box {
            margin-top: 6px;
            padding: 6px;
            background: var(--border-light);
            border-radius: 4px;
            font-size: 11px;
            color: var(--accent);
        }

        /* Slider Styles */
        .year-range-slider-container {
            margin: 8px 10px 12px 10px;
        }

        /* Button Styles */
        .share-view-btn {
            width: 100%;
            padding: 8px;
            margin-top: 8px;
            background: var(--border-light);
            color: var(--accent);
            border: 1px solid var(--accent);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .share-view-btn:hover {
            background: var(--accent);
            color: var(--accent-text);
        }

        /* Map Layers */
        .map-layers-label {
            margin-bottom: 6px;
            margin-top: 4px;
        }

        .layer-label-flex {
            flex: 1;
        }

        /* Time/Date Range Styles */
        .time-range-container {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-top: 5px;
        }

        .time-range-field {
            flex: 1;
        }

        .time-range-label {
            font-size: 11px;
            color: var(--accent);
        }

        .help-text-small {
            font-size: 11px;
            color: var(--text-secondary);
            margin-top: 3px;
        }

        /* Last Updated Text */
        .last-updated-text {
            font-style: italic;
            color: var(--text-secondary);
            margin-top: 15px;
        }

        .toggle-panel-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1001;
            background: var(--bg-panel);
            border: 1px solid var(--border);
            color: var(--accent);
            padding: 12px 18px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            display: none;
        }

        /* Layer info icon and tooltip */
        .layer-label-container {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .layer-info-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            background: transparent;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: bold;
            cursor: help;
            transition: all 0.2s;
            position: relative;
            flex-shrink: 0;
        }

        .layer-info-icon:hover {
            border-color: var(--accent);
            color: var(--accent);
            transform: scale(1.15);
        }

        .layer-info-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 8px;
            background: var(--bg-panel);
            border: 2px solid var(--accent);
            border-radius: 6px;
            padding: 6px 10px;
            width: max-content;
            max-width: 150px;
            font-size: 11px;
            line-height: 1.3;
            color: var(--text-primary);
            box-shadow: var(--shadow-md);
            z-index: 10000;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            white-space: normal;
            text-align: center;
        }

        .layer-info-icon:hover .layer-info-tooltip {
            opacity: 1;
            visibility: visible;
        }

        .layer-info-tooltip strong {
            color: var(--accent);
        }

        /* ── Mobile: bottom-sheet panel ─────────────────────────────────── */
        @media (max-width: 768px) {
            /* Reposition the panel as a bottom sheet that slides up from
               off-screen. position:fixed keeps it relative to the viewport
               regardless of any parent transform or scroll context. */
            .controls-panel {
                position: fixed;
                top: auto;
                right: 0;
                bottom: -100vh;   /* hidden below viewport */
                left: 0;
                width: 100%;
                max-width: 100%;
                min-width: 0;
                max-height: 85vh;
                border-radius: 16px 16px 0 0;
                padding-top: 0;
                /* Override the base 'transition: all 0.3s' to only animate
                   the slide — avoids janky transitions on other properties. */
                transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
                overscroll-behavior: contain;
                z-index: 1200;
            }

            /* Cosmetic drag-handle pill at the top of the sheet */
            .controls-panel::before {
                content: '';
                display: block;
                width: 40px;
                height: 4px;
                background: var(--border);
                border-radius: 2px;
                margin: 10px auto 6px;
                flex-shrink: 0;
            }

            /* Slide into view */
            .controls-panel.visible {
                bottom: 0;
            }

            /* The sheet is either fully open (.visible) or fully closed.
               The .collapsed state (desktop-only) must not hide content on
               mobile — override the base rule that sets panel-content to
               display:none when collapsed. */
            .controls-panel.collapsed .panel-content {
                display: block;
            }

            /* collapsed width overrides from Phase 1 updated to full-width */
            .controls-panel.collapsed {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            /* The collapse button is a desktop affordance; on mobile the
               user closes the sheet by tapping the backdrop or FAB. */
            .collapse-btn {
                display: none;
            }
        }

        /* Advanced Filters Button */
        .advanced-filters-btn {
            width: 100%;
            padding: 8px;
            margin: 10px 0;
            background: transparent;
            color: var(--accent);
            border: 1px solid var(--accent);
            border-radius: 6px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .advanced-filters-btn:hover {
            background: var(--accent);
            color: var(--accent-text);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        .filter-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--danger);
            color: var(--accent-text);
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 11px;
            font-weight: bold;
            box-shadow: var(--shadow-sm);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 10000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal-content {
            background: var(--bg-secondary);
            margin: 3% auto;
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            max-height: 85vh;
            box-shadow: var(--shadow-lg);
            display: flex;
            flex-direction: column;
            animation: slideIn 0.3s;
            border: 1px solid var(--border);
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Used by fullscreen modals on small screens — enter from below */
        @keyframes slideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            padding: 10px 24px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            margin: 0;
            color: var(--accent);
            font-size: 20px;
        }

        .modal-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 32px;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            line-height: 32px;
            transition: color 0.2s;
        }

        .modal-close:hover {
            color: var(--text-primary);
        }

        .modal-tabs {
            display: flex;
            padding: 0 24px;
            border-bottom: 1px solid var(--border);
            background: var(--bg-primary);
        }

        .tab-btn {
            padding: 12px 20px;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: var(--accent);
        }

        .tab-btn.active {
            color: var(--accent);
            border-bottom-color: var(--accent);
        }

        .modal-body {
            padding: 24px;
            overflow-y: auto;
            flex: 1;
            min-height: 300px;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .modal-apply-btn, .modal-cancel-btn {
            padding: 10px 24px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .modal-apply-btn {
            background: var(--accent);
            color: var(--accent-text);
        }

        .modal-apply-btn:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .modal-cancel-btn {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .modal-cancel-btn:hover {
            background: var(--border-light);
        }

        /* Mobile responsive modal */
        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 5% auto;
                max-height: 90vh;
            }

            .modal-tabs {
                overflow-x: auto;
            }

            .tab-btn {
                font-size: 12px;
                padding: 10px 16px;
            }
        }

        /* Tutorial Modal Specific Styles */
        .tutorial-modal-content {
            max-width: 1000px;
            max-height: 90vh;
        }

        .tutorial-body {
            padding: 20px 24px;
        }

        .tutorial-section {
            animation: fadeIn 0.3s;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            column-gap: 20px;
        }

        .tutorial-section h3 {
            grid-column: 1 / -1;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-primary);
            border-bottom: none;
            padding-bottom: 12px;
            margin-bottom: 12px;
            position: relative;
        }

        .tutorial-section h3::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 16px;
            background: var(--accent);
            margin-right: 10px;
            vertical-align: middle;
        }

        .tutorial-step {
            margin-bottom: 16px;
            padding: 14px;
            background: var(--bg-primary);
            border-radius: 8px;
            border-left: 3px solid var(--accent);
            break-inside: avoid;
        }

        .tutorial-step strong {
            display: block;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .tutorial-step ul {
            margin-left: 20px;
            margin-top: 6px;
        }

        .tutorial-step li {
            margin-bottom: 6px;
            color: var(--text-secondary);
            line-height: 1.5;
            font-size: 13px;
        }

        .tutorial-step li strong {
            display: inline;
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 600;
        }

        .tutorial-step .help-text {
            margin-top: 10px;
            padding: 8px 12px;
            background: var(--accent-bg);
            border-radius: 6px;
            color: var(--text-primary);
            font-size: 13px;
            border-left: 3px solid var(--accent);
        }

        /* Professional Callouts */
        .callout {
            padding: 10px 14px;
            border-radius: 6px;
            margin-top: 10px;
            font-size: 13px;
            border-left: 3px solid;
            line-height: 1.5;
        }

        .callout strong {
            display: inline;
            margin-right: 4px;
            font-size: 13px;
        }

        .callout-tip {
            background: rgba(59, 130, 246, 0.1);
            border-color: #3b82f6;
            color: var(--text-primary);
        }

        .callout-warning {
            background: rgba(245, 158, 11, 0.1);
            border-color: #f59e0b;
            color: var(--text-primary);
        }

        .callout-info {
            background: rgba(16, 185, 129, 0.1);
            border-color: #10b981;
            color: var(--text-primary);
        }

        /* Quick Reference Table */
        .quick-ref-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
            margin-top: 16px;
        }

        .quick-ref-table th {
            background: var(--bg-secondary);
            padding: 10px 12px;
            text-align: left;
            font-weight: 600;
            border-bottom: 2px solid var(--border);
            color: var(--text-primary);
        }

        .quick-ref-table td {
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-secondary);
        }

        .quick-ref-table tbody tr:hover {
            background: var(--bg-secondary);
        }

        .quick-ref-table kbd {
            background: var(--bg-secondary);
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            border: 1px solid var(--border);
            color: var(--text-primary);
        }

        .quick-ref-section {
            margin-bottom: 32px;
        }

        .quick-ref-section h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        .tutorial-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
        }

        .dont-show-again {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            user-select: none;
        }

        .dont-show-again input[type="checkbox"] {
            cursor: pointer;
            width: 16px;
            height: 16px;
        }

        .tutorial-nav-buttons {
            display: flex;
            gap: 10px;
        }

        /* Professional Button System */
        button, .btn {
            font-family: inherit;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            outline: none;
        }

        .btn-primary, .btn-secondary {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
        }

        /* Primary Button */
        .btn-primary {
            background: var(--accent);
            color: var(--accent-text);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        /* Secondary Button */
        .btn-secondary {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border);
        }

        .btn-secondary:hover {
            background: var(--bg-secondary);
            border-color: var(--accent);
            color: var(--accent);
        }

        .btn-secondary:active {
            background: var(--border-light);
        }

        /* Disabled State */
        .btn-primary:disabled,
        .btn-secondary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .btn-primary:disabled:hover,
        .btn-secondary:disabled:hover {
            background: var(--accent);
            transform: none;
            box-shadow: none;
        }

        .btn-secondary:disabled:hover {
            background: transparent;
            border-color: var(--border);
            color: var(--text-primary);
        }

        /* Button Sizes */
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }

        .btn-lg {
            padding: 12px 24px;
            font-size: 14px;
        }

        /* Mobile responsive tutorial modal */
        @media (max-width: 768px) {
            .tutorial-modal-content {
                width: 95%;
                max-height: 95vh;
            }

            .tutorial-section {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .tutorial-footer {
                flex-direction: column;
                gap: 12px;
                align-items: stretch;
            }

            .tutorial-nav-buttons {
                justify-content: space-between;
            }

            .btn-primary, .btn-secondary {
                flex: 1;
                padding: 12px 16px;
            }

            .dont-show-again {
                justify-content: center;
            }
        }

        /* Tutorial Search Functionality */
        .tutorial-header {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
        }

        .tutorial-header h2 {
            flex-shrink: 0;
        }

        .tutorial-search-container {
            position: relative;
            flex: 1;
            min-width: 200px;
            max-width: 300px;
        }

        .tutorial-search-input {
            width: 100%;
            padding: 8px 36px 8px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 13px;
            transition: all 0.2s;
        }

        .tutorial-search-input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-bg);
        }

        .tutorial-search-input::placeholder {
            color: var(--text-secondary);
            opacity: 0.7;
        }

        .tutorial-search-container .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            font-size: 14px;
            opacity: 0.6;
        }

        /* Collapsible Tutorial Steps */
        .tutorial-step.collapsible {
            cursor: default;
        }

        .tutorial-step .step-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            padding: 4px 8px;
            margin: -4px -8px 8px -8px;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .tutorial-step .step-header:hover {
            background: var(--accent-bg);
        }

        .tutorial-step .step-header strong {
            flex: 1;
        }

        .tutorial-step .expand-icon {
            font-size: 12px;
            color: var(--text-secondary);
            margin-left: 8px;
            transition: transform 0.2s;
        }

        .tutorial-step .step-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.3s ease;
            opacity: 1;
        }

        .tutorial-step.collapsed .step-content {
            max-height: 0;
            opacity: 0;
        }

        /* Search Highlighting */
        .tutorial-step.search-highlight {
            background: var(--accent-bg);
            border-left-color: var(--accent);
            box-shadow: 0 0 0 2px var(--accent-bg);
        }

        .tutorial-step.search-hidden {
            display: none;
        }

        /* Mobile responsive search */
        @media (max-width: 768px) {
            .tutorial-header {
                flex-direction: column;
                align-items: stretch;
            }

            .tutorial-search-container {
                max-width: 100%;
                order: 3;
            }

            .modal-close {
                order: 2;
            }

            .tutorial-header h2 {
                order: 1;
            }
        }

        /* noUiSlider Custom Styling */
        .noUi-target {
            background: var(--bg-secondary);
            border: none;
            box-shadow: inset 0 1px 3px var(--shadow);
            border-radius: 3px;
            height: 6px;
        }

        .noUi-horizontal {
            height: 10px;
        }

        .noUi-horizontal .noUi-handle {
            width: 16px;
            height: 16px;
            right: -8px;
            top: -5px;
        }

        .noUi-horizontal .noUi-tooltip {
            transform: 0;
            -webkit-transform: translate(-50%, 100%)
        }

        .noUi-connect {
            background: var(--accent);
        }

        .noUi-handle {
            background: var(--accent);
            border: 2px solid var(--bg-primary);
            border-radius: 50%;
            box-shadow: var(--shadow-sm);
            cursor: pointer;
        }

        .noUi-handle:before,
        .noUi-handle:after {
            display: none;
        }

        .noUi-handle:hover {
            background: var(--accent-hover);
            box-shadow: var(--shadow-sm);
        }

        .noUi-handle:active {
            transform: scale(1.15);
        }

        /* Larger handle on touch screens — 16px is too small to grab reliably.
           right = -(handle-width / 2); top = -((handle-height - track-height) / 2)
           Track height (.noUi-horizontal) = 10px, new handle = 24px:
             right = -12px, top = -(24-10)/2 = -7px */
        @media (max-width: 768px) {
            .noUi-horizontal .noUi-handle {
                width: 24px;
                height: 24px;
                right: -12px;
                top: -7px;
            }
        }

        .noUi-tooltip {
            background: var(--bg-secondary);
            border: 1px solid var(--accent);
            color: var(--accent);
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 3px;
            bottom: 130%;
        }

        /* Leaflet Layer Control Styling */
        .leaflet-control-layers {
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: var(--shadow-md);
        }

        .leaflet-control-layers-toggle {
            background-image: none !important;
            background-color: var(--bg-panel) !important;
            width: 36px !important;
            height: 36px !important;
            border-radius: 8px;
        }

        .leaflet-control-layers-toggle::before {
            content: "\2630";
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .leaflet-control-layers-expanded {
            padding: 10px;
            color: var(--text-primary);
        }

        .leaflet-control-layers-base label {
            color: var(--text-primary);
            font-size: 13px;
            padding: 4px 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: color 0.2s;
        }

        .leaflet-control-layers-base label:hover {
            color: var(--accent);
        }

        .leaflet-control-layers-base input[type="radio"] {
            accent-color: var(--accent);
            margin-right: 8px;
            cursor: pointer;
        }

        .leaflet-control-layers-separator {
            border-top: 1px solid var(--border);
            margin: 8px 0;
        }

        /* Footer Styles */
        .page-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-panel);
            backdrop-filter: blur(10px);
            border-top: 1px solid var(--border);
            padding: 10px 20px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            z-index: 999;
            font-size: 12px;
            box-shadow: 0 -4px 12px var(--shadow);
        }

        .footer-links {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-self: start;
        }

        .footer-links a {
            color: var(--accent);
            text-decoration: none;
            transition: all 0.2s;
            font-weight: 500;
        }

        .footer-links a:hover {
            color: var(--accent-hover);
            text-decoration: underline;
        }

        .footer-center {
            justify-self: center;
            color: var(--text-secondary);
            font-size: 11px;
            text-align: center;
            white-space: nowrap;
        }

        .footer-center a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
        }

        .footer-center a:hover {
            text-decoration: underline;
        }

        .footer-attribution {
            justify-self: end;
            color: var(--text-secondary);
            font-size: 11px;
            text-align: right;
        }

        .footer-attribution a {
            color: var(--accent);
            text-decoration: none;
        }

        .footer-attribution a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .page-footer {
                display: none;
            }
        }

        /* Fullscreen Info Modals */
        .info-modal {
            display: none;
            position: fixed;
            z-index: 20000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-primary);
            overflow-y: auto;
            animation: fadeIn 0.3s;
        }

        .info-modal.show {
            display: block;
        }

        .info-modal-header {
            position: sticky;
            top: 0;
            background: var(--bg-secondary);
            border-bottom: 3px solid var(--accent);
            padding: 20px;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: var(--shadow-sm);
        }

        .info-modal-header h1 {
            color: var(--accent);
            font-size: 24px;
            margin: 0;
        }

        .info-modal-close {
            background: var(--accent);
            color: var(--accent-text);
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .info-modal-close:hover {
            background: var(--accent-hover);
            transform: scale(1.05);
        }

        .info-modal-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 30px 20px 60px 20px;
        }

        .info-modal-section {
            background: var(--bg-secondary);
            border-left: 3px solid var(--accent);
            padding: 18px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow-sm);
        }

        .info-modal h2 {
            color: var(--accent);
            font-size: 18px;
            margin-bottom: 12px;
        }

        .info-modal h3 {
            color: var(--accent);
            font-size: 15px;
            margin: 15px 0 8px 0;
        }

        .info-modal h4 {
            color: var(--accent);
            font-size: 13px;
            margin: 12px 0 6px 0;
        }

        .info-modal p {
            margin-bottom: 10px;
            color: var(--text-primary);
            font-size: 13px;
            line-height: 1.5;
        }

        .info-modal ul, .info-modal ol {
            margin-left: 25px;
            margin-bottom: 12px;
            font-size: 13px;
        }

        .info-modal li {
            margin-bottom: 6px;
            line-height: 1.4;
        }

        .info-modal table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            background: var(--bg-primary);
            box-shadow: var(--shadow-sm);
            font-size: 12px;
        }

        .info-modal th, .info-modal td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .info-modal th {
            background: var(--accent);
            color: var(--accent-text);
            font-weight: 600;
            font-size: 12px;
        }

        .info-modal tr:hover {
            background: var(--bg-secondary);
        }

        .info-modal code {
            background: var(--input-bg);
            padding: 2px 5px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
        }

        .info-modal .important-notice {
            background: var(--danger-bg);
            border-left: 3px solid var(--danger);
            padding: 15px;
            margin: 20px 0;
            border-radius: 8px;
        }

        .info-modal .important-notice h3 {
            color: var(--danger);
            margin-bottom: 8px;
            font-size: 15px;
        }

        .info-modal .info-box {
            background: var(--accent-bg);
            border-left: 3px solid var(--accent);
            padding: 12px;
            margin: 15px 0;
            border-radius: 8px;
            font-size: 13px;
        }

        .info-modal .info-box strong {
            color: var(--accent);
        }

        .info-modal a {
            color: var(--accent);
            text-decoration: none;
        }

        .info-modal a:hover {
            text-decoration: underline;
        }

        @media (max-width: 768px) {
            .info-modal-header h1 {
                font-size: 20px;
            }

            .info-modal-container {
                padding: 20px 15px 50px 15px;
            }

            .info-modal h2 {
                font-size: 16px;
            }

            .info-modal p, .info-modal ul, .info-modal ol {
                font-size: 12px;
            }
        }

        /* Checkbox Groups */
        .checkbox-filter-group {
            display: flex;
            flex-direction: column;
            max-height: 200px;
            overflow-y: auto;
            padding: 4px;
            background: var(--bg-secondary);
            border-radius: 6px;
            border: 1px solid var(--border);
        }

        .checkbox-filter-group::-webkit-scrollbar {
            width: 6px;
        }

        .checkbox-filter-group::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 3px;
        }

        .checkbox-filter-group::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 3px;
        }

        .checkbox-filter-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 4px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .checkbox-filter-item:hover {
            background: var(--border-light);
        }

        .checkbox-filter-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent);
            flex-shrink: 0;
        }

        .checkbox-filter-item label {
            font-size: 12px;
            cursor: pointer;
            flex: 1;
            user-select: none;
        }

        .checkbox-select-controls {
            display: flex;
            gap: 4px;
            margin-top: 4px;
        }

        .checkbox-select-all, .checkbox-clear-all {
            flex: 1;
            font-size: 11px;
            padding: 3px 6px;
            border: 1px solid var(--border);
            background: var(--border-light);
            color: var(--text-secondary);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .checkbox-select-all:hover {
            background: var(--accent);
            color: var(--accent-text);
            border-color: var(--accent);
        }

        .checkbox-clear-all:hover {
            background: var(--danger-bg);
            color: var(--danger);
            border-color: var(--danger);
        }

        /* Custom Checkbox Dropdown */
        .checkbox-dropdown {
            position: relative;
            width: 100%;
        }

        .checkbox-dropdown-trigger {
            width: 100%;
            padding: 5px 30px 5px 8px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: var(--input-bg);
            color: var(--text-primary);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: left;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .checkbox-dropdown-trigger:hover {
            border-color: var(--accent);
            background: var(--bg-primary);
        }

        .checkbox-dropdown-trigger.open {
            border-color: var(--accent);
            background: var(--bg-primary);
            box-shadow: 0 0 0 3px var(--accent-bg);
        }

        .checkbox-dropdown-arrow {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--text-secondary);
            font-size: 11px;
            transition: transform 0.3s;
        }

        .checkbox-dropdown-trigger.open .checkbox-dropdown-arrow {
            transform: translateY(-50%) rotate(180deg);
        }

        .checkbox-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 4px;
            background: var(--input-bg);
            border: 1px solid var(--accent);
            border-radius: 6px;
            box-shadow: var(--shadow-md);
            z-index: 1000;
            max-height: 280px;
            display: none;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
        }

        .checkbox-dropdown-menu.show {
            display: flex;
        }

        /* Search bar pinned at top */
        .dropdown-search-wrap {
            padding: 6px 6px 4px;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }

        .dropdown-search {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid var(--input-border);
            border-radius: 4px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 12px;
            box-sizing: border-box;
            outline: none;
        }

        .dropdown-search:focus {
            border-color: var(--accent);
        }

        /* Scrollable items area */
        .dropdown-items-list {
            overflow-y: auto;
            flex: 1;
            padding: 4px;
            min-height: 0;
        }

        .dropdown-items-list::-webkit-scrollbar {
            width: 6px;
        }

        .dropdown-items-list::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 3px;
        }

        .dropdown-items-list::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 3px;
        }

        .checkbox-dropdown-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 6px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .checkbox-dropdown-item:hover {
            background: var(--border-light);
        }

        .checkbox-dropdown-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--accent);
            flex-shrink: 0;
        }

        .checkbox-dropdown-item label {
            font-size: 13px;
            cursor: pointer;
            flex: 1;
            user-select: none;
        }

        .checkbox-dropdown-controls {
            display: flex;
            gap: 4px;
            padding: 4px 6px;
            border-top: 1px solid var(--border);
            margin-top: 0;
            flex-shrink: 0;
            background: var(--input-bg);
            border-radius: 0 0 6px 6px;
        }

        .checkbox-dropdown-controls button {
            flex: 1;
            font-size: 11px;
            padding: 3px 6px;
            border: 1px solid var(--border);
            background: var(--border-light);
            color: var(--text-secondary);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .checkbox-dropdown-controls button:first-child:hover {
            background: var(--accent);
            color: var(--accent-text);
            border-color: var(--accent);
        }

        .checkbox-dropdown-controls button:last-child:hover {
            background: var(--danger-bg);
            color: var(--danger);
            border-color: var(--danger);
        }

        /* Analytics Panel */
        .analytics-panel {
            position: absolute;
            bottom: 45px;
            left: 5px;
            background: var(--bg-panel);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 0;
            max-width: 200px;
            width: calc(100% - 40px);
            max-height: 45px;
            z-index: 1000;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .analytics-panel.collapsed {
            max-height: 45px;
            max-width: 125px;
        }

        .analytics-panel.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            border-radius: 0;
            z-index: 10000;
        }

        .analytics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: var(--bg-secondary);
            cursor: pointer;
            user-select: none;
        }

        .analytics-panel.fullscreen .analytics-header {
            padding: 14px 20px;
            cursor: default;
        }

        .analytics-header:hover {
            background: var(--border-light);
        }

        .analytics-panel.fullscreen .analytics-header:hover {
            background: var(--bg-secondary);
        }

        .analytics-header h3 {
            margin: 0;
            font-size: 13px;
            color: var(--accent);
            font-weight: 700;
        }

        .analytics-panel.fullscreen .analytics-header h3 {
            font-size: 16px;
        }

        .analytics-close-btn {
            display: none;
            background: var(--border);
            border: none;
            color: var(--text-primary);
            font-size: 18px;
            line-height: 1;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .analytics-close-btn:hover {
            background: var(--accent);
            color: var(--accent-text);
        }

        .analytics-panel.fullscreen .analytics-close-btn {
            display: flex;
        }

        .analytics-panel.fullscreen .analytics-toggle {
            display: none;
        }

        .analytics-content {
            position: relative;
            padding: 15px;
            max-height: calc(100% - 50px);
            overflow-y: auto;
        }

        .analytics-panel.fullscreen .analytics-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            padding: 20px;
            max-height: calc(100vh - 55px);
            overflow-y: auto;
            align-content: start;
        }

        .analytics-content::-webkit-scrollbar {
            width: 8px;
        }

        .analytics-content::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 4px;
        }

        .analytics-content::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 4px;
        }

        .chart-container {
            margin-bottom: 20px;
            background: var(--bg-secondary);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border);
            position: relative;
            min-width: 0;
            overflow: visible;
        }

        .analytics-panel.fullscreen .chart-container {
            margin-bottom: 0;
        }

        /* Per-chart maximise button */
        .chart-maximize-btn {
            flex-shrink: 0;
            margin-left: 6px;
            background: none;
            border: 1px solid transparent;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 13px;
            line-height: 1;
            padding: 2px 5px;
            border-radius: 4px;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }

        .chart-maximize-btn:hover {
            color: var(--accent);
            border-color: var(--accent);
            background: var(--border-light);
        }

        .chart-maximize-btn.is-active {
            color: var(--accent);
            border-color: var(--accent);
        }

        /* Maximise — a semi-transparent backdrop covers the grid; the focused card
           pops above it spanning both columns. Grid layout is unchanged throughout,
           so restoring is just a class removal with no reflow needed. */
        .analytics-content.chart-zoomed::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 5;
            border-radius: 4px;
        }

        .analytics-content.chart-zoomed .chart-container.chart-focused {
            position: relative;
            z-index: 10;
            grid-column: 1 / -1;
            box-shadow: var(--shadow-lg);
            margin-bottom: 0;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .chart-container h4 {
            margin: 0;
            font-size: 12px;
            color: var(--accent);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .chart-toggle-btns {
            display: flex;
            gap: 3px;
        }

        .chart-toggle-btn {
            padding: 2px 8px;
            font-size: 11px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .chart-toggle-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .chart-toggle-btn.active {
            background: var(--accent);
            color: var(--accent-text);
            border-color: var(--accent);
        }

        .chart-header-right {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Full-width banner shown when Crashes Over Time is filtered to a single year */
        .year-filter-banner {
            align-items: center;
            justify-content: space-between;
            background: var(--warning);
            color: var(--accent-text);
            border-radius: 6px;
            padding: 7px 12px;
            margin-bottom: 8px;
            font-size: 12px;
            font-weight: 500;
            gap: 8px;
            max-width: 210px;
            margin-left: 50px;
        }

        .year-filter-banner button {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: var(--accent-text);
            padding: 3px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.15s;
            flex-shrink: 0;
        }

        .year-filter-banner button:hover {
            background: rgba(255, 255, 255, 0.35);
        }

        /* Info icon + hover tooltip */
        .chart-info-icon {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--text-secondary);
            color: var(--bg-primary);
            font-size: 11px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: default;
            position: relative;
            flex-shrink: 0;
            opacity: 0.65;
            transition: opacity 0.15s;
            user-select: none;
            line-height: 1;
        }

        .chart-info-icon:hover {
            opacity: 1;
        }

        .chart-info-icon:hover .chart-info-tooltip {
            display: block;
        }

        .chart-info-tooltip {
            display: none;
            position: absolute;
            top: 50%;
            left: calc(100% + 8px);
            transform: translateY(-50%);
            width: 220px;
            max-width: calc(100vw - 40px);
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 8px 10px;
            font-size: 11px;
            color: var(--text-primary);
            line-height: 1.5;
            z-index: 200;
            box-shadow: var(--shadow-md);
            pointer-events: none;
            font-weight: normal;
        }

        /* Position tooltip on the left if icon is in the right column */
        .chart-container:nth-child(even) .chart-info-tooltip {
            left: auto;
            right: calc(100% + 8px);
        }

        /* Click hint below clickable charts */
        .chart-click-hint {
            text-align: center;
            font-size: 11px;
            color: var(--text-secondary);
            margin: 4px 0 0;
            opacity: 0.7;
        }

        /* Chart loading overlay */
        .chart-loading-overlay {
            position: absolute;
            inset: 0;
            background: var(--bg-secondary);
            opacity: 0.9;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 5;
            border-radius: 4px;
        }

        .chart-loading-overlay.active {
            display: flex;
        }

        .chart-loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid var(--border);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: chart-spin 0.8s linear infinite;
        }

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

        /* Chart empty state */
        .chart-empty-state {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: var(--text-secondary);
            font-size: 12px;
            line-height: 1.6;
        }

        .chart-empty-state.active {
            display: flex;
        }

        .chart-empty-state-content {
            max-width: 250px;
        }

        .chart-empty-state-icon {
            font-size: 32px;
            opacity: 0.3;
            margin-bottom: 8px;
        }

        .chart-empty-state-message {
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-primary);
        }

        .chart-empty-state-hint {
            font-size: 11px;
            opacity: 0.7;
        }

        .analytics-panel.fullscreen .chart-container h4 {
            font-size: 14px;
        }

        .chart-wrapper {
            position: relative;
            height: 200px;
        }

        /* Taller variant for horizontal bar charts with up to 10 items */
        .chart-wrapper--tall {
            height: 260px;
        }

        .analytics-panel.fullscreen .chart-wrapper {
            height: calc((100vh - 55px - 40px - 80px) / 2 - 30px);
            min-height: 220px;
        }

        .analytics-panel.fullscreen .chart-wrapper--tall {
            height: calc((100vh - 55px - 40px - 80px) / 2 - 30px);
            min-height: 260px;
        }

        /* Day × Hour Heatmap */
        .heatmap-wrap {
            overflow-x: auto;
            padding: 4px 0;
        }

        .heatmap-table {
            display: flex;
            flex-direction: column;
            gap: 3px;
            min-width: 340px;
        }

        .heatmap-row {
            display: flex;
            gap: 2px;
            align-items: center;
        }

        .heatmap-row-label {
            width: 28px;
            font-size: 11px;
            color: var(--text-secondary);
            flex-shrink: 0;
            text-align: right;
            padding-right: 4px;
        }

        .heatmap-col-hdr {
            flex: 1;
            font-size: 11px;
            color: var(--text-secondary);
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
        }

        .heatmap-cell {
            flex: 1;
            height: 28px;
            border-radius: 2px;
            cursor: default;
            min-width: 0;
            transition: opacity 0.15s;
        }

        .heatmap-cell:hover {
            outline: 1px solid rgba(239, 83, 80, 0.8);
            opacity: 0.85;
        }

        /* Wide chart variant — spans full grid row when in fullscreen */
        .analytics-panel.fullscreen .chart-container--wide {
            grid-column: 1 / -1;
        }

        /* Crash Type × Severity Matrix */
        .ct-matrix {
            width: 100%;
            overflow-x: auto;
        }

        .ct-matrix-row {
            display: flex;
            gap: 3px;
            margin-bottom: 2px;
            align-items: stretch;
        }

        .ct-matrix-row.ct-matrix-hdr .ct-matrix-cell {
            background: none !important;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 11px;
        }

        .ct-matrix-label {
            flex: 0 0 155px;
            font-size: 11px;
            color: var(--text-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            padding-right: 6px;
        }

        .ct-matrix-cell {
            flex: 1;
            min-width: 52px;
            padding: 5px 3px;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            color: var(--accent-text);
            border-radius: 3px;
            cursor: default;
            transition: outline 0.1s;
        }

        .ct-matrix-cell:hover {
            outline: 1px solid rgba(255, 255, 255, 0.4);
        }

        @media (max-width: 768px) {
            .analytics-panel {
                left: 10px;
                /* Right edge stops 86px from viewport edge, leaving a 10px gap
                   before the FAB (56px wide + 20px right margin = 76px from right). */
                width: calc(100% - 96px);
                /* Footer is hidden on mobile; clear the edge only */
                bottom: 24px;
            }

            .analytics-panel.fullscreen .analytics-content {
                grid-template-columns: 1fr;
            }

            .analytics-panel.fullscreen .chart-wrapper {
                height: 220px;
            }
        }

        /* Active Filters Badge - Compact floating badge */
        .active-filters-bar {
            position: absolute;
            top: 10px;
            left: 50px;
            max-width: 125px;
            z-index: 100;
            background: var(--bg-panel);
            border: 1px solid var(--border);
            border-radius: 20px;
            box-shadow: var(--shadow-sm);
            backdrop-filter: blur(10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .active-filters-bar:hover {
            max-width: 700px;
            box-shadow: var(--shadow-md);
        }

        /* .expanded mirrors :hover — used as a JS-toggled alternative for
           touch devices where hover doesn't persist after tap. On desktop
           this acts as a "pin open" behaviour alongside hover. */
        .active-filters-bar.expanded {
            max-width: 700px;
            box-shadow: var(--shadow-md);
        }

        .active-filters-bar.expanded .active-filters-bar-content {
            max-height: 300px;
            padding: 6px 14px 10px 14px;
            overflow-y: auto;
            opacity: 1;
        }

        .active-filters-bar-header {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            border-radius: 20px;
        }

        .active-filters-bar-chevron {
            font-size: 10px;
            color: var(--text-secondary);
            transition: transform 0.2s ease;
            flex-shrink: 0;
            line-height: 1;
        }

        .active-filters-bar.expanded .active-filters-bar-chevron {
            transform: rotate(180deg);
        }

        .active-filters-bar-title {
            font-size: 11px;
            color: var(--accent);
            font-weight: 600;
        }

        .active-filters-bar-toggle {
            display: none;
        }

        .active-filters-bar-content {
            max-height: 0;
            padding: 0 14px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .active-filters-bar:hover .active-filters-bar-content {
            max-height: 300px;
            padding: 6px 14px 10px 14px;
            overflow-y: auto;
            opacity: 1;
        }

        .active-filter-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: var(--accent);
            color: var(--accent-text);
            padding: 4px 10px;
            border-radius: 14px;
            font-size: 11px;
            font-weight: 500;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .active-filter-tag .filter-name {
            opacity: 0.9;
        }

        .active-filter-tag .filter-value {
            font-weight: 600;
        }

        .filter-tag-remove {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 13px;
            line-height: 1;
            padding: 0;
            margin-left: 1px;
            display: flex;
            align-items: center;
            transition: color 0.12s;
        }

        .filter-tag-remove:hover {
            color: var(--accent-text);
        }

        .no-active-filters {
            font-size: 11px;
            color: var(--text-secondary);
            font-style: italic;
            padding: 4px 0;
        }

        .active-filters-bar-content::-webkit-scrollbar {
            height: 6px;
        }

        .active-filters-bar-content::-webkit-scrollbar-track {
            background: var(--scrollbar-track);
            border-radius: 3px;
        }

        .active-filters-bar-content::-webkit-scrollbar-thumb {
            background: var(--scrollbar-thumb);
            border-radius: 3px;
        }

        @media (max-width: 768px) {
            /* Center the bar horizontally so it doesn't sit on top of the
               Leaflet zoom controls (top-left) or layer control (top-right).
               transform: translateX(-50%) paired with left: 50% achieves true
               centering independent of the bar's own width. */
            .active-filters-bar {
                left: 50%;
                right: auto;
                top: 10px;
                transform: translateX(-50%);
                /* Inherit desktop max-width: 125px in collapsed state */
            }

            /* On touch screens :hover doesn't persist, so suppress the
               hover-expand entirely and rely only on .expanded from JS. */
            .active-filters-bar:hover {
                max-width: 125px;
                box-shadow: var(--shadow-sm);
            }

            .active-filters-bar:hover .active-filters-bar-content {
                max-height: 0;
                padding: 0 14px;
                opacity: 0;
            }

            /* Expanded: grow from center, clamped so it never clips the edges.
               The translateX(-50%) keeps it centered as it widens. */
            .active-filters-bar.expanded {
                max-width: min(300px, calc(100vw - 40px));
            }
        }

/* No-results map overlay */
.no-results-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
    pointer-events: none;
}

.no-results-content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
}

.no-results-icon {
    font-size: 36px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.no-results-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.no-results-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

/* First Visit Disclaimer Overlay */
.first-visit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.first-visit-popup {
    background: var(--bg-panel);
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    text-align: center;
}

.first-visit-popup h2 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 28px;
}

.first-visit-popup p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 16px;
}

.first-visit-actions {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.view-disclaimer-link {
    color: var(--accent);
    text-decoration: underline;
    font-size: 15px;
    cursor: pointer;
    transition: color 0.2s;
}

.view-disclaimer-link:hover {
    color: var(--accent-hover);
}

.acknowledge-btn {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.acknowledge-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-shadow);
}

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

@media (max-width: 768px) {
    .first-visit-popup {
        padding: 30px 20px;
        max-width: 90%;
    }

    .first-visit-popup h2 {
        font-size: 24px;
    }

    .first-visit-popup p {
        font-size: 14px;
    }
}

/* ── Marker Colour Legend ─────────────────────────────────────────────────── */
.marker-color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
    min-height: 18px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Data Table Panel ─────────────────────────────────────────────────────── */
.data-table-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1500;
    display: flex;
    flex-direction: column;
}

.data-table-header {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Top row: Title, Search, Actions */
.data-table-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.data-table-title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}

.data-table-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
}

.data-table-info {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bottom row: Pagination */
.data-table-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    gap: 12px;
}

.data-table-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dt-pagination-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-table-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}

.data-table-nav-btn {
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-table-nav-btn:hover:not(:disabled) {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.data-table-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.data-table-close-btn {
    padding: 4px 10px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.2s;
}

.data-table-close-btn:hover {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger);
    transform: scale(1.05);
}

/* Button icon and text */
.dt-btn-icon {
    font-size: 14px;
}

.dt-btn-text {
    font-size: 12px;
    font-weight: 500;
}

.data-table-scroll {
    overflow: auto;
    flex: 1;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-secondary);
}

.data-table th {
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    user-select: none;
}

.data-table th.dt-sortable {
    cursor: pointer;
}

.data-table th.dt-sortable:hover {
    color: var(--accent);
    background: var(--accent-bg);
}

.data-table th.dt-active-sort {
    color: var(--accent);
}

.dt-sort-icon {
    font-size: 10px;
    opacity: 0.6;
}

.data-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: var(--accent-bg);
}

.data-table .dt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Severity badge chips in table */
.dt-sev {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.dt-sev-pdo   { background: rgba(128,128,128,0.15); color: #666; }
.dt-sev-mi    { background: rgba(255,167,38,0.15);  color: #e65100; }
.dt-sev-si    { background: rgba(239,83,80,0.15);   color: #c62828; }
.dt-sev-fatal { background: rgba(139,0,0,0.15);     color: #8B0000; font-weight: 700; }

[data-theme="dark"] .dt-sev-pdo   { background: rgba(128,128,128,0.25); color: #bbb; }
[data-theme="dark"] .dt-sev-mi    { background: rgba(255,167,38,0.2);  color: #ffa726; }
[data-theme="dark"] .dt-sev-si    { background: rgba(239,83,80,0.2);   color: #ef9a9a; }
[data-theme="dark"] .dt-sev-fatal { background: rgba(180,0,0,0.25);    color: #ff6b6b; }

@media (max-width: 768px) {
    .data-table-panel {
        height: 320px;
    }
}

/* ── Data Table: New Features ─────────────────────────────────────────────── */

/* Search input */
.data-table-search {
    flex: 1;
    max-width: 350px;
    min-width: 200px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s;
}

.data-table-search:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.data-table-search::placeholder {
    color: var(--text-tertiary);
}

/* Loading overlay */
.dt-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

.dt-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dt-loading-text {
    margin-top: 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

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

/* Page size selector */
.data-table-page-size {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.data-table-page-size:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.data-table-page-size:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Jump to page */
.data-table-jump {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dt-jump-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.dt-jump-input {
    width: 55px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    text-align: center;
    transition: all 0.2s;
}

.dt-jump-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Remove spinner arrows */
.dt-jump-input::-webkit-inner-spin-button,
.dt-jump-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dt-jump-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Action buttons */
.data-table-column-btn,
.data-table-export-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.data-table-column-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.data-table-export-btn:hover {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
    transform: translateY(-1px);
}

/* Maximize button */
.data-table-maximize-btn {
    padding: 5px 10px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.data-table-maximize-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

/* Maximized state */
.data-table-panel.dt-maximized {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    border-radius: 0 !important;
}

/* Column picker dropdown */
.column-picker {
    position: absolute;
    top: 40px;
    right: 10px;
    width: 200px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
}

.column-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 12px;
}

.column-picker-header button {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.column-picker-header button:hover {
    color: var(--text-primary);
}

.column-picker-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 8px;
}

.column-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    transition: background 0.15s;
}

.column-picker-item:hover {
    background: var(--accent-bg);
}

.column-picker-item input[type="checkbox"] {
    cursor: pointer;
}

/* Clickable rows */
.dt-row-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dt-row-clickable:hover {
    background: var(--accent-bg) !important;
}

.dt-row-clickable:active {
    background: var(--accent-bg-hover) !important;
}

.dt-row-clickable:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Column resizers */
.column-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background 0.2s;
    z-index: 10;
}

.column-resizer:hover {
    background: var(--accent);
}

.data-table th {
    position: relative;
    user-select: none;
}

.data-table.dt-resizing {
    user-select: none;
}

.data-table.dt-resizing .column-resizer {
    background: var(--accent);
}

/* Marker highlighting from table hover */
.marker-highlighted {
    filter: brightness(1.5) drop-shadow(0 0 8px var(--accent));
    z-index: 1000 !important;
}

/* Responsive adjustments for new controls */
@media (max-width: 1200px) {
    .data-table-search {
        max-width: 250px;
        min-width: 150px;
    }

    .dt-btn-text {
        display: none; /* Hide text on smaller screens, keep icons */
    }
}

@media (max-width: 1024px) {
    .data-table-header-top {
        flex-wrap: wrap;
    }

    .data-table-title-row {
        width: 100%;
        margin-bottom: 8px;
    }

    .data-table-search {
        flex: 1;
        max-width: none;
    }

    .data-table-jump {
        display: none; /* Hide jump on smaller screens */
    }
}

@media (max-width: 768px) {
    .data-table-panel {
        /* 320px is fine on desktop but squashes the map to nothing on small
           phones. Clamp to 45vh so the panel never exceeds half the screen,
           with a 180px floor (header + a few visible rows). */
        height: clamp(180px, 45vh, 320px);
    }

    .data-table-header-top {
        padding: 8px 10px;
    }

    .data-table-header-bottom {
        padding: 6px 10px;
        flex-direction: column;
        gap: 8px;
    }

    .data-table-pagination,
    .data-table-navigation {
        width: 100%;
        justify-content: center;
    }

    .data-table-search {
        font-size: 12px;
        padding: 5px 10px;
    }

    .data-table-actions {
        gap: 4px;
    }

    .data-table-column-btn,
    .data-table-export-btn {
        padding: 10px 12px;
        min-width: 44px;
        min-height: 44px;
    }

    .data-table-nav-btn {
        padding: 10px 14px;
        min-width: 44px;
        min-height: 44px;
        font-size: 16px;
    }

    .data-table-maximize-btn,
    .data-table-close-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        font-size: 18px;
    }

    .dt-pagination-label {
        font-size: 12px;
    }

    .column-picker {
        right: 5px;
        width: 180px;
    }

    /* The × close button inside the column-picker header has padding:0 by
       default, making it a tiny tap target. Expand to 44×44px on touch. */
    .column-picker-header button {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Draw Area Filter ─────────────────────────────────────────────────────── */

/* Buttons inside the draw-area section */
.draw-area-btn {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex: 1;
}

.draw-area-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

/* Active state while drawing */
.draw-area-btn.draw-btn-active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Status message shown when area is drawn or drawing is in progress */
.draw-area-status {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    line-height: 1.4;
}

/* Map-overlay hint bar shown during active drawing */
.draw-mode-hint {
    position: fixed;
    top: 56px;         /* below any top bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-md);
    font-size: 13px;
    color: var(--text-primary);
    pointer-events: none;  /* let map clicks through by default */
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.draw-mode-hint.visible {
    opacity: 1;
    pointer-events: auto;
}

.draw-mode-cancel-btn {
    padding: 3px 10px;
    font-size: 12px;
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s;
}

.draw-mode-cancel-btn:hover {
    background: var(--danger);
    color: var(--accent-text);
}

/* Dim the cursor while drawing mode is active */
body.draw-mode-active #map {
    cursor: crosshair !important;
}

/* ========================================
   PDF Export Modal Styles
   ======================================== */

.pdf-export-modal-content {
    max-width: 650px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.pdf-export-body {
    overflow-y: auto;
    padding: 20px;
}

.pdf-data-summary {
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 13px;
}

.pdf-data-summary strong {
    color: var(--text-primary);
}

.pdf-data-summary span {
    color: var(--accent);
    font-weight: 600;
}

/* Preset Buttons */
.pdf-preset-section {
    margin-bottom: 24px;
}

.section-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.pdf-preset-buttons {
    display: flex;
    gap: 10px;
}

.pdf-preset-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 13px;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.pdf-preset-btn:hover {
    border-color: var(--accent);
    background: var(--bg-panel);
}

.pdf-preset-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-text);
}

/* PDF Preview Modal */
.pdf-preview-modal-content {
    max-width: 600px;
    max-height: 80vh;
}

.pdf-preview-summary {
    font-size: 14px;
}

.pdf-preview-summary ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.pdf-preview-summary li {
    padding: 8px 0;
    padding-left: 30px;
    position: relative;
}

.pdf-preview-summary li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 16px;
}

.pdf-preview-summary li.disabled {
    color: var(--text-secondary);
    opacity: 0.6;
}

.pdf-preview-summary li.disabled::before {
    content: '✗';
    color: var(--text-secondary);
}

/* Options Section */
.pdf-options-section {
    margin-bottom: 24px;
}

.pdf-option-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
}

.pdf-option-group:last-child {
    border-bottom: none;
}

.pdf-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.pdf-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pdf-checkbox-label > span {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
}

.pdf-checkbox-label small {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
    font-weight: normal;
}

/* Sub-options (charts, table rows) */
.pdf-sub-options {
    margin-top: 12px;
    margin-left: 28px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-light);
}

.pdf-chart-selection-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

.pdf-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    text-decoration: underline;
    transition: opacity 0.15s;
}

.pdf-link-btn:hover {
    opacity: 0.7;
}

.pdf-chart-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pdf-chart-checkboxes label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.pdf-chart-checkboxes input[type="checkbox"] {
    cursor: pointer;
}

/* Drag and Drop Styles */
.pdf-draggable-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pdf-draggable-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: move;
    transition: all 0.2s ease;
}

.pdf-draggable-item:hover {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.pdf-draggable-item.dragging {
    opacity: 0.5;
    background: var(--accent-bg);
}

.pdf-draggable-item.drag-over {
    border-top: 2px solid var(--accent);
    margin-top: 4px;
}

.drag-handle {
    color: var(--text-secondary);
    font-size: 14px;
    cursor: grab;
    user-select: none;
    padding: 0 4px;
}

.drag-handle:active {
    cursor: grabbing;
}

.pdf-draggable-item label {
    flex: 1;
    margin: 0;
}

/* Notes Section Styles */
.pdf-note-item {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 6px;
}

.pdf-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pdf-note-title-input {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
}

.pdf-note-remove-btn {
    background: var(--danger);
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pdf-note-remove-btn:hover {
    opacity: 0.8;
}

.pdf-note-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    resize: vertical;
}

.pdf-note-position-select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    cursor: pointer;
}

/* Table options */
.pdf-table-rows-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.pdf-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pdf-radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.pdf-radio-group input[type="radio"] {
    cursor: pointer;
}

.pdf-warning-text {
    color: var(--danger);
    font-size: 11px;
    margin-left: 4px;
}

/* Format Section */
.pdf-format-section {
    margin-bottom: 20px;
}

/* Filename Section */
.pdf-filename-section {
    margin-bottom: 16px;
}

.pdf-filename-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-top: 6px;
}

.pdf-filename-hint {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Size Estimate */
.pdf-size-estimate {
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.pdf-size-estimate span {
    font-weight: 600;
    color: var(--text-primary);
}

/* Position Map Button */
.position-map-btn {
    margin-left: 28px;
    margin-top: 8px;
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.position-map-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--accent-shadow);
}

.position-map-btn svg {
    flex-shrink: 0;
}

/* Map Positioning Overlay */
.map-positioning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    pointer-events: none;
}

.positioning-banner {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-panel);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 16px 24px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 20px;
    pointer-events: auto;
    animation: slideDown 0.3s ease;
    max-width: 90%;
}

.positioning-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.positioning-message {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 14px;
}

.positioning-message svg {
    color: var(--accent);
    flex-shrink: 0;
}

.positioning-layer-toggles {
    display: flex;
    gap: 16px;
    margin-left: 30px;
}

.layer-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.layer-toggle-label input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.layer-toggle-label span {
    white-space: nowrap;
}

.choropleth-mode-select {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.choropleth-mode-select:hover {
    border-color: var(--accent);
}

.choropleth-mode-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.map-highlight {
    box-shadow: 0 0 0 4px var(--accent), 0 0 32px rgba(74, 144, 226, 0.4);
    transition: box-shadow 0.3s ease;
}

/* Hide map UI elements during positioning */
.map-positioning-active .leaflet-control-container,
.map-positioning-active .leaflet-control,
.map-positioning-active .leaflet-top,
.map-positioning-active .leaflet-bottom,
.map-positioning-active .map-legend,
.map-positioning-active .custom-legend,
.map-positioning-active .info.legend {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide body-level UI elements when map is in positioning mode */
body:has(.map-positioning-active) .toggle-panel-btn,
body:has(.map-positioning-active) .active-filters-bar,
body:has(.map-positioning-active) .controls-panel,
body:has(.map-positioning-active) .analytics-panel {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Fullscreen modals on small screens ──────────────────────
   Below 640px (phones in portrait) floating dialogs feel cramped
   and the backdrop is distracting. Fill the entire screen instead,
   entering from the bottom for a native-app feel.
   Using .modal .modal-content (two classes) for specificity so
   this overrides both .modal-content and sub-class rules like
   .tutorial-modal-content and .pdf-export-modal-content. */
@media (max-width: 640px) {
    .modal .modal-content {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        animation: slideUp 0.3s ease;
    }

    /* Taller header padding so the title and close button are easy
       to reach with a thumb (top of screen is hardest on tall phones). */
    .modal .modal-header {
        padding: 16px 20px;
        min-height: 56px;
    }

    .modal .modal-header h2 {
        font-size: 18px;
    }

    /* Make the × close button a proper 44×44 touch target */
    .modal .modal-close {
        width: 44px;
        height: 44px;
        font-size: 28px;
        line-height: 44px;
    }

    /* Tabs row — allow horizontal scroll without clipping the underline */
    .modal .modal-tabs {
        padding: 0 12px;
    }

    .modal .tab-btn {
        padding: 12px 14px;
        font-size: 13px;
    }

    .modal .modal-body {
        padding: 16px;
    }

    /* Footer buttons: stack vertically and fill width for easy tapping */
    .modal .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal .modal-apply-btn,
    .modal .modal-cancel-btn {
        width: 100%;
        min-height: 44px;
        font-size: 15px;
    }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .pdf-preset-buttons {
        flex-direction: column;
    }

    .pdf-chart-checkboxes {
        grid-template-columns: 1fr;
    }

    .positioning-banner {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }

    .positioning-message {
        font-size: 13px;
    }

    .positioning-layer-toggles {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ============================================================
   Phase 2 — Mobile-first layout components
   ============================================================ */

/* ── Backdrop overlay ────────────────────────────────────────
   Sits between the map and the bottom-sheet panel. Transparent
   and non-interactive by default; becomes visible + tappable
   when the panel is open (JS adds .active). */
.mobile-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mobile-panel-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Filters FAB ─────────────────────────────────────────────
   On mobile the top-right text button becomes a circular FAB
   anchored to the bottom-right corner of the viewport.
   JS sets data-panel-open="true" when the sheet is visible,
   causing the FAB to hide (the backdrop handles close instead). */
@media (max-width: 768px) {
    .toggle-panel-btn {
        /* Override desktop: absolute + top:20px/right:20px */
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 24px;   /* footer hidden on mobile; clear edge only */
        right: 20px;
        top: auto;
        left: auto;
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        border: none;
        background: var(--accent);
        color: var(--accent-text);
        box-shadow: var(--shadow-lg);
        z-index: 1201;
        transition: bottom 0.2s ease, transform 0.2s, opacity 0.2s;
        /* Hide the "☰ Filters" text — icon provided by ::before */
        font-size: 0;
        overflow: hidden;
    }

    /* Hamburger icon rendered as a pseudo-element so font-size: 0
       on the button doesn't suppress it. */
    .toggle-panel-btn::before {
        content: '☰';
        font-size: 22px;
        line-height: 1;
        color: var(--accent-text);
    }

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

    /* Hide FAB while sheet is open — backdrop + panel header handle close */
    .toggle-panel-btn[data-panel-open="true"] {
        opacity: 0;
        pointer-events: none;
    }

    /* When the data table panel is open the FAB sits behind it at bottom:24px.
       Raise it above the panel so it remains reachable. The panel height on
       mobile is clamp(180px,45vh,320px); add 16px breathing room on top. */
    body.data-table-open .toggle-panel-btn {
        bottom: calc(clamp(180px, 45vh, 320px) + 16px);
    }
}

/* ============================================================
   Phase 3 — Polish
   ============================================================ */

/* ── Mobile panel close button ───────────────────────────────
   Shown only on mobile where the collapse button is hidden and
   the FAB is not visible while the bottom sheet is open. Gives
   an unambiguous "close" affordance inside the sheet header.  */
.mobile-panel-close-btn {
    display: none;
}

@media (max-width: 768px) {
    .mobile-panel-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid var(--border);
        color: var(--text-secondary);
        width: 44px;
        height: 44px;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        flex-shrink: 0;
    }

    .mobile-panel-close-btn:active {
        background: var(--border-light);
        color: var(--text-primary);
    }
}

/* ── Draw-mode hint ──────────────────────────────────────────
   white-space:nowrap causes the bar to overflow on narrow
   screens. Let it wrap and position it with inset offsets
   instead of left:50% + translateX so it never clips.        */
@media (max-width: 768px) {
    .draw-mode-hint {
        left: 16px;
        right: 16px;
        transform: none;
        width: auto;
        white-space: normal;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        top: 12px;
        font-size: 12px;
    }

    /* Cancel button was 3px 10px — nowhere near tappable.
       Let it grow to fill the available row width on wrap.   */
    .draw-mode-cancel-btn {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 14px;
        flex: 1 0 auto;
        text-align: center;
    }
}

/* ── Checkbox dropdown items ─────────────────────────────────
   4px 6px padding gives ~29px row height — too small for touch.
   Increase to meet the 44px minimum touch target.              */
@media (max-width: 768px) {
    .checkbox-dropdown-item {
        padding: 8px 8px;
        min-height: 44px;
    }

    .checkbox-dropdown-item:active {
        background: var(--accent-bg);
    }

    /* Larger checkbox to match the bigger row */
    .checkbox-dropdown-item input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
}

/* ── Layer info tooltip — touch/focus support ────────────────
   The tooltip is triggered by :hover which never fires
   persistently on touch. Adding :focus means tapping the icon
   (which now has tabindex="0") focuses it and reveals the tip. */
.layer-info-icon:focus .layer-info-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Expand to full 44×44 tap target on touch screens. The icon glyph stays
   small and centred; the element itself provides the tappable area.       */
@media (max-width: 768px) {
    .layer-info-icon {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }
}

/* ── Leaflet layer control toggle ────────────────────────────
   36px is below the 44px minimum touch target. Override the
   !important values set in the base Leaflet-custom rule.      */
@media (max-width: 768px) {
    .leaflet-control-layers-toggle {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ── First-visit disclaimer popup ───────────────────────────
   The 768px rule reduces to 24px heading but still leaves
   30px 20px padding. On phones ≤480px tighten further.       */
@media (max-width: 480px) {
    .first-visit-popup {
        padding: 24px 16px;
        width: 95%;
    }

    .first-visit-popup h2 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .first-visit-popup p {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .first-visit-actions {
        margin-top: 20px;
        gap: 12px;
    }

    /* The link has no padding so it's a tiny tap target on mobile */
    .view-disclaimer-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 12px;
    }
}

/* ── Phase 4 — Additional mobile fixes ───────────────────────────────────────
   Addresses issues found during the post-phase-3 audit:
     1. Missing notification keyframes (animations silently broken)
     2. Notification layout: hardcoded right:20px prevented mobile override
     3. Leaflet popups: no mobile width constraint
     4. Choropleth mode buttons: 10px font / tiny touch target
     5. Location suggestion items: ~28px touch target
     6. Analytics panel: full-width extended under FAB (handled inline above)
     7. Small fonts (11px) on key interactive elements
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. Notification animations (were missing — silently broken) ─────────── */
@keyframes slideInFromRight {
    from {
        transform: translateX(calc(100% + 40px));
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(calc(100% + 40px));
        opacity: 0;
    }
}

/* ── 2. Notification CSS class ───────────────────────────────────────────────
   Static appearance lives here so media queries can override layout.
   Dynamic values (top position, border-left colour) are set inline by JS.    */
.app-notification {
    position: fixed;
    right: 20px;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    min-width: 200px;
    max-width: 350px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    animation: slideInFromRight 0.3s ease-out;
    transition: top 0.3s ease-out;
}

/* On mobile: span edge-to-edge so long messages never overflow left.
   min-width: 0 removes the 200px floor that would overflow narrow screens. */
@media (max-width: 768px) {
    .app-notification {
        left: 10px;
        right: 10px;
        min-width: 0;
        max-width: none;
    }
}

/* ── 3. Leaflet popup mobile constraint ──────────────────────────────────────
   Default Leaflet popups have no width constraint. On 375px screens a
   maxWidth:450 popup can clip the viewport. CSS caps it as a safety net
   independent of the JS maxWidth option passed to bindPopup().             */
@media (max-width: 768px) {
    .leaflet-popup-content-wrapper {
        max-width: calc(100vw - 40px) !important;
    }

    /* Allow long words (addresses, road names) to wrap rather than overflow */
    .leaflet-popup-content {
        max-width: calc(100vw - 60px);
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ── 4. Choropleth mode buttons ───────────────────────────────────────────────
   Base style uses 10px font and ~26px height — well below WCAG 2.5.5 (44px)
   and illegible on mobile. Bump font and minimum height at the mobile
   breakpoint. The pill container (overflow:hidden) grows with its children. */
@media (max-width: 768px) {
    .choropleth-mode-btn {
        font-size: 12px;
        padding: 6px 10px;
        min-height: 44px;
    }
}

/* ── 5. Location suggestion item touch targets ────────────────────────────────
   6px padding gives ~28px tap height; autocomplete is used while a keyboard
   is on screen (less vertical space), so 44px is critical here.            */
@media (max-width: 768px) {
    .suggestion-item {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        font-size: 13px;
    }
}

/* ── 7. Small font bump on mobile ────────────────────────────────────────────
   11px is legible on desktop at arm's length; on a phone held 30cm away it
   is too small. Raise key interactive labels/chips/hints to 12px minimum.
   Excluded: data-table cells (density intentional) and canvas chart labels
   (controlled by Chart.js config, not CSS).                                */
@media (max-width: 768px) {
    .filter-label,
    .chip,
    .multi-select-count,
    .select-all-btn,
    .time-range-label,
    .help-text-small,
    .location-search-header .header-text {
        font-size: 12px;
    }
}

/* ── 8. :focus-visible — restore keyboard/switch-access focus rings ──────────
   Nearly every element has outline:none on :focus to remove the browser's
   default ring for mouse users. :focus-visible fires only when the browser
   determines a focus indicator is needed (keyboard, switch, sequential nav),
   so reinstating an outline here doesn't affect mouse/touch workflows but
   gives keyboard and assistive-technology users a clear indicator.
   !important is required because the per-element outline:none rules have
   higher specificity than this bare selector.                               */
:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

/* ── 9. prefers-reduced-motion ───────────────────────────────────────────────
   The app has panel slides, marker animations, notification slide-ins and
   many CSS transitions. Honour the OS-level preference so users who are
   sensitive to motion (vestibular disorders, etc.) get an instant UI.      */
@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;
    }
}