* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
            margin: 0;
            padding: 0;
        }
        
        /* Map viewport container - locks to screen */
        .map-viewport {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        
        /* Map Container - Full viewport */
        #map {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 1;
            background: #000;
        }
        
        /* Initial Loading Screen */
        #initial-loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f0f8ff;
            z-index: 1001;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-bottom: 20vh;
            opacity: 1;
            transition: opacity 0.85s cubic-bezier(0.97, 0.03, 0.88, 0.03);
            pointer-events: none;
        }
        
        #initial-loading-overlay.hidden {
            opacity: 0;
        }
        
        #initial-loading-context {
            font-size: 28px;
            font-weight: 700;
            color: rgba(0, 0, 0, 0.75);
            margin-bottom: 45px;
            animation: fadeInContext 0.5s ease-in;
            text-align: center;
            max-width: 90%;
            text-wrap: balance;
        }
        
        #initial-loading-logo {
            height: 60px;
            margin-bottom: 40px;
            opacity: 0.9;
            animation: fadeInLogo 0.5s ease-in;
        }
        
        #initial-loading-spinner {
            width: 64px;
            height: 64px;
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-top-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-bottom: 24px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        #initial-loading-text {
            color: rgba(0, 0, 0, 0.6);
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        
        #initial-loading-text::after {
            content: '...';
            animation: loadingDots 1.5s infinite;
        }
        
        @keyframes loadingDots {
            0%, 24% { content: ''; }
            25%, 49% { content: '.'; }
            50%, 74% { content: '..'; }
            75%, 100% { content: '...'; }
        }
        
        /* Top Bar - Search & Icons */
        .geocoder-container {
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 0;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .geocoder-top-row {
            display: flex;
            align-items: center;
            padding-right: 8px;
        }

        .geocoder-container .mapboxgl-ctrl-geocoder {
            width: 240px !important;
            border-radius: 8px 0 0 0 !important;
            box-shadow: none !important;
        }

        /* When no extra rows below, round bottom-left corner too */
        .geocoder-container:not(:has(.official-lookup-link)) .mapboxgl-ctrl-geocoder {
            border-radius: 8px 0 0 8px !important;
        }

        .geocoder-container .map-control-icons {
            display: flex;
            align-items: center;
            gap: 4px;
            padding-left: 8px;
        }
        
        /* Official lookup link - breaks out to top-right on desktop, in-flow row on mobile */
        .official-lookup-link {
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 1000;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            text-decoration: none;
            color: #0099ff;
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            padding: 10px 14px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transition: all 0.2s;
        }

        .official-lookup-link:hover {
            color: #0077cc;
        }

        .official-lookup-link svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        /* Mobile top bar */
        .mobile-top-bar {
            display: none;
            position: fixed;
            top: 8px;
            left: 8px;
            right: 8px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            padding: 8px 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            backdrop-filter: blur(10px);
        }
        
        .mobile-search-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            font-size: 14px;
            color: #333;
        }
        
        /* Map Controls - Bottom Center */
        .map-controls {
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 12px 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            max-width: 95vw;
        }
        
        .map-controls-main {
            display: flex;
            align-items: center;
            gap: 20px;
            justify-content: center;
            flex-wrap: nowrap;
        }
        
        /* Pipe separator between color selector and legend (desktop only) */
        .color-by-selector::after {
            content: '|';
            color: rgba(0, 0, 0, 0.15);
            font-weight: 300;
            margin-left: 20px;
        }
        
        .color-by-selector {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        
        .color-by-label {
            font-size: 13px;
            color: #666;
            font-weight: 400;
            white-space: nowrap;
        }
        
        .color-by-buttons {
            display: flex;
            gap: 0;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .color-by-btn {
            padding: 6px 12px;
            border: none;
            background: white;
            color: #666;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border-right: 1px solid #ddd;
            white-space: nowrap;
        }
        
        .color-by-btn:last-child {
            border-right: none;
        }
        
        .color-by-btn:hover {
            background: #f5f5f5;
        }
        
        .color-by-btn.active {
            background: #0066cc;
            color: white;
        }
        
        /* Map Control Icons */
        .map-icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            color: #666;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .map-icon-btn:hover {
            background: #f0f0f0;
            color: #333;
        }

        .map-icon-btn[aria-pressed="true"] {
            background: #edf5ff;
            color: #0066cc;
        }
        
        .map-icon-btn svg {
            width: 18px;
            height: 18px;
        }
        
        /* Map Legend */
        .map-legend {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #666;
            flex-shrink: 1;
            min-width: 0;
        }
        
        .legend-bar {
            width: 100px;
            height: 20px;
            flex-shrink: 0;
            background: linear-gradient(to right, 
                #d0d0d0 0%, 
                #d32f2f 10%, 
                #f57c00 20%, 
                #fbc02d 30%, 
                #afb42b 40%, 
                #7cb342 50%, 
                #66bb6a 60%, 
                #26a69a 70%, 
                #26c6da 80%, 
                #29b6f6 90%, 
                #42a5f5 100%);
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        /* Map Disclaimer & Info Row */
        .map-disclaimer-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            width: 100%;
            flex-shrink: 0;
            order: 10; /* Place after other elements */
            margin-top: 0;
            margin-bottom: 0;
        }
        
        .map-disclaimer {
            font-size: 11px;
            color: #666;
            text-align: center;
            flex-shrink: 0;
            line-height: 1.2;
            margin: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .map-disclaimer-text {
            white-space: nowrap;
        }
        
        .map-disclaimer-separator {
            color: #999;
            font-size: 11px;
        }
        
        .map-disclaimer a {
            color: inherit;
            text-decoration: underline;
        }
        
        .map-disclaimer a:hover {
            text-decoration: underline;
        }
        
        /* Map Info Link */
        .map-info-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: #666;
            text-decoration: underline;
            font-weight: 400;
            line-height: 1.2;
            padding: 0;
            margin: 0;
        }
        
        .map-info-link svg {
            transition: transform 0.2s;
            width: 10px;
            height: 10px;
            position: relative;
            top: -1px;
        }
        
        .map-info-link:hover svg {
            transform: translateY(2px);
        }
        
        .map-info-link:hover {
            color: #666;
        }
        
        /* Info Panel - Right Side (Desktop) */
        .info-panel {
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 10;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            backdrop-filter: blur(10px);
            max-width: 200px;
            display: none; /* Hidden by default, shown when needed */
        }
        
        .info-panel h3 {
            font-size: 14px;
            margin: 0 0 8px 0;
            color: #333;
        }
        
        .info-panel p {
            font-size: 12px;
            margin: 0;
            color: #666;
            line-height: 1.4;
        }
        /* Custom Popup Styling */
        .mapboxgl-popup {
            z-index: 10000 !important; /* Ensure popups appear above geocoder (1000) and map controls (10) */
        }

        /* Quick entrance fade. Popup creation can wait briefly on the
           hex-highlights fetch (up to HEX_HIGHLIGHT_OPEN_WAIT_MS), so easing
           the popup in reads as intentional rather than a late pop. Opacity
           animates on the container (tip included); the rise animates on the
           content box only — mapbox owns the container's transform. */
        @media (prefers-reduced-motion: no-preference) {
            .mapboxgl-popup {
                animation: bbm-popup-fade 220ms ease-out;
            }

            .mapboxgl-popup-content {
                animation: bbm-popup-rise 220ms ease-out;
            }
        }

        /* Mobile: snappier entrance to offset the longer highlights wait
           (the mobile bump in hexHighlightOpenWaitMs, internet-map.js) */
        @media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
            .mapboxgl-popup {
                animation-duration: 140ms;
            }

            .mapboxgl-popup-content {
                animation-duration: 140ms;
            }
        }

        @keyframes bbm-popup-fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes bbm-popup-rise {
            from { transform: translateY(3px); }
            to { transform: translateY(0); }
        }
        
        .mapboxgl-popup-content {
            padding: 0;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-width: 220px;
        }
        
        .mapboxgl-popup-close-button {
            font-size: 22px;
            padding: 8px 12px;
            line-height: 1;
            color: #999;
        }
        
        .mapboxgl-popup-close-button:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: #333;
        }
        
        .internet-popup {
            padding: 16px;
            padding-right: 32px; /* Extra space for close button */
        }
        
        .internet-popup-header {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin: 0 0 12px 0;
        }
        
        .internet-popup-stat {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .internet-popup-stat:last-child {
            border-bottom: none;
        }
        
        .stat-label {
            font-size: 13px;
            color: #666;
        }
        
        .stat-value {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        
        /* Sponsored highlight section at the bottom of hex popups
           (injected by injectHexHighlights in internet-map.js) */
        .popup-highlight {
            /* All vertical spacing lives on the rule's margins below. A top
               margin here would collapse with the rule's (parent/first-child
               margin collapse) and silently eat the intended gap. */
            margin-top: 0;
        }

        .popup-sponsored-rule {
            display: flex;
            align-items: center;
            margin: 28px 0 16px;
        }

        .popup-sponsored-rule::before,
        .popup-sponsored-rule::after {
            content: '';
            flex: 1;
            height: 1px;
        }

        .popup-sponsored-rule::before {
            background: linear-gradient(to right, transparent, #d0d0d0);
        }

        .popup-sponsored-rule::after {
            background: linear-gradient(to left, transparent, #d0d0d0);
        }

        .popup-sponsored-rule span {
            padding: 0 10px;
            font-size: 9px;
            color: #bbb;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .popup-highlight-heading {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .popup-highlight-info {
            color: #999;
            /* 12px matches the sponsor card's sc-info-tip; the tiny nudge sits
               the glyph's optical center on the heading's midline */
            font-size: 12px;
            font-weight: 400;
            cursor: help;
            line-height: 1;
            position: relative;
            top: 0.5px;
        }

        .popup-highlight-link {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 4px 0;
            font-size: 14px;
            font-weight: 600;
            color: #0066cc;
            text-decoration: none;
        }

        .popup-highlight-link:hover span:nth-child(2) {
            text-decoration: underline;
        }

        /* Same hover affordance for the popup's View Providers link (text
           only, not the chevron) — matches the highlight links above */
        .popup-view-providers:hover span {
            text-decoration: underline;
        }

        .popup-highlight-bullet {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #b5b5b5;
            flex: none;
        }

        .popup-highlight-arrow {
            width: 12px;
            height: 12px;
            flex: none;
        }

        /* ISP Details in Popup */
        .isp-list {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #f0f0f0;
        }
        
        .isp-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: 12px;
        }
        
        .isp-name {
            font-weight: 500;
            color: #333;
        }
        
        .isp-speed {
            color: #666;
            font-size: 11px;
        }
        
        /* Loading Indicator */
        .loading {
            /* absolute (not fixed) so it anchors to .map-viewport and clips with the map instead of floating over the listing */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            display: none;
            background: rgba(255, 255, 255, 0.95);
            padding: 20px 32px;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            max-width: 90vw; /* Prevent overflow on mobile */
            white-space: nowrap; /* Prevent text wrapping */
        }
        
        .loading.show {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid rgba(0, 102, 204, 0.1);
            border-top-color: #0066cc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            flex-shrink: 0; /* Prevent spinner from shrinking */
        }
        
        .loading-text {
            font-weight: 600;
            color: #333;
            font-size: 16px;
        }
        
        @media (max-width: 768px) {
            .loading {
                padding: 16px 24px; /* Slightly smaller padding on mobile */
                max-width: 85vw; /* More space on mobile */
            }
            
            .loading-text {
                font-size: 15px; /* Slightly smaller text on mobile */
            }
        }
        
        /* Hide normal loading indicator when modal is open */
        body.search-box-open .loading,
        body.city-search-box-open .loading,
        body.state-search-box-open .loading {
            display: none !important;
        }
        
        /* Modal Loading Indicator (toast-style, positioned dynamically via JS) */
        #modal-loading {
            position: fixed;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10020;
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(30, 30, 30, 0.9);
            padding: 10px 20px;
            border-radius: 24px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            backdrop-filter: blur(8px);
            opacity: 0;
            pointer-events: none;
        }

        #modal-loading.show {
            opacity: 1;
            pointer-events: auto;
            transition: opacity 1.1s ease-in-out;
        }
        
        #modal-loading .modal-loading-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            flex-shrink: 0;
        }
        
        #modal-loading .modal-loading-text {
            font-weight: 500;
            color: #fff;
            font-size: 14px;
            white-space: nowrap;
        }
        
        #modal-loading .modal-loading-text::after {
            content: '...';
            display: inline-block;
            width: 1.2em;
            text-align: left;
            animation: loadingDots 1.5s infinite;
        }
        
        @media (max-width: 768px) {
            #modal-loading .desktop-only {
                display: none;
            }
        }

        /* Zoom-in notice, shown when the API refuses an oversized viewport.
           Click-through so it never blocks map panning/zooming. */
        #viewport-too-large-notice {
            /* absolute (not fixed) so it anchors to .map-viewport and clips with the map instead of floating over the listing */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            display: none;
            background: rgba(255, 255, 255, 0.95);
            padding: 18px 28px;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            max-width: 85vw;
            text-align: center;
            pointer-events: none;
        }

        #viewport-too-large-notice.show {
            display: block;
        }

        #viewport-too-large-notice .viewport-notice-title {
            font-weight: 600;
            color: #333;
            font-size: 16px;
        }

        #viewport-too-large-notice .viewport-notice-text {
            color: #555;
            font-size: 14px;
            margin-top: 4px;
        }

        /* Hide behind the search modals, same as the loading indicator */
        body.search-box-open #viewport-too-large-notice,
        body.city-search-box-open #viewport-too-large-notice,
        body.state-search-box-open #viewport-too-large-notice {
            display: none !important;
        }

        /* Content section below map */
        .content-section {
            position: relative;
            background: white;
            min-height: 50vh;
            z-index: 2;
            padding: 20px 20px;
        }
        
        .content-container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .content-section h1 {
            font-size: 32px;
            font-weight: 700;
            color: #222;
            margin-bottom: 20px;
        }
        
        .content-section h2 {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-top: 40px;
            margin-bottom: 16px;
        }
        
        .content-section p {
            font-size: 16px;
            line-height: 1.7;
            color: #555;
            margin-bottom: 16px;
        }

        /* The global reset zeroes list margins, leaving space above lists (from the
           preceding p) but none below. Match paragraph spacing below lists. */
        .content-section ul {
            margin-bottom: 16px;
        }
        
        /* Table styling for content section */
        .content-section table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin: 24px 0;
            font-size: 15px;
            background: white;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        
        .content-section table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
            padding: 12px 16px;
            text-align: left;
            border-bottom: 2px solid #e9ecef;
        }
        
        .content-section table th:first-child {
            border-top-left-radius: 8px;
        }
        
        .content-section table th:last-child {
            border-top-right-radius: 8px;
        }
        
        .content-section table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            color: #555;
        }
        
        .content-section table tr:last-child td {
            border-bottom: none;
        }
        
        .content-section table tr:last-child td:first-child {
            border-bottom-left-radius: 8px;
        }
        
        .content-section table tr:last-child td:last-child {
            border-bottom-right-radius: 8px;
        }
        
        .content-section table tr:hover td {
            background: #f8f9fa;
        }
        
        .content-section table a {
            color: #0066cc;
            text-decoration: none;
            font-weight: 500;
        }
        
        .content-section table a:hover {
            text-decoration: underline;
        }

        /* Flagged multi-word brands render as two same-href anchors (see
           brand_link_with_flag) — underline the whole name on hover so it
           reads as one link. */
        .content-section table [data-row-slug]:hover a {
            text-decoration: underline;
        }
        
        /* Right-align numeric columns (2nd, 3rd, 4th) */
        .content-section table th:nth-child(n+2),
        .content-section table td:nth-child(n+2) {
            text-align: right;
        }
        
        /* Footer styling lives in components/footer.html */

        /* Mobile Optimizations */
        @media (max-width: 768px) {
            .geocoder-container {
                top: 6px;
                left: 50%;
                right: auto;
                width: 97vw;
                max-width: 97vw;
                transform: translateX(-50%);
            }

            .geocoder-top-row {
                padding-right: 4px;
            }

            .geocoder-container .mapboxgl-ctrl-geocoder {
                width: 100% !important;
                flex: 1;
                min-width: 0;
                font-size: 16px;
                line-height: 20px;
                border-radius: 8px 0 0 8px !important;
            }

            .geocoder-container .mapboxgl-ctrl-geocoder--input {
                height: 42px;
                padding: 4px 42px;
            }

            .geocoder-container .mapboxgl-ctrl-geocoder--icon-search {
                top: 11px;
                left: 12px;
                width: 20px;
                height: 20px;
            }

            .geocoder-container .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
                top: 6px;
            }
            
            .geocoder-container .map-control-icons {
                gap: 2px;
                padding-left: 4px;
                flex-shrink: 0;
            }
            
            .geocoder-container .map-icon-btn {
                padding: 4px 8px;
            }
            
            .geocoder-container .map-icon-btn svg {
                width: 20px;
                height: 20px;
            }
            
            .official-lookup-link {
                position: relative;
                top: auto;
                right: auto;
                width: 100%;
                justify-content: center;
                padding: 8px 14px;
                font-size: 13px;
                box-shadow: none;
                border-radius: 0 0 8px 8px;
                border-top: 0;
            }

            .official-lookup-link::before {
                content: "";
                position: absolute;
                top: 0;
                left: 50%;
                width: 95%;
                height: 1px;
                background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.14), transparent);
                transform: translateX(-50%);
                pointer-events: none;
            }

            /* When link is present on mobile, geocoder input gets square bottom-left */
            .geocoder-container:has(.official-lookup-link) .mapboxgl-ctrl-geocoder {
                border-radius: 8px 0 0 0 !important;
            }

            .mobile-top-bar {
                display: none !important;
            }

            .map-controls {
                bottom: 12px;
                left: 50%;
                right: auto;
                width: 97vw;
                transform: translateX(-50%);
                padding: 10px;
                max-width: 97vw;
            }
            
            .map-controls-main {
                flex-direction: column;
                gap: 12px;
                width: 100%;
            }
            
            .map-disclaimer-row {
                gap: 6px;
            }
            
            /* Hide pipe separator on mobile */
            .color-by-selector::after {
                display: none;
            }
            
            .color-by-selector {
                width: 100%;
                justify-content: center;
                order: 2;
            }
            
            .map-legend {
                width: 100%;
                order: 3;
                font-size: 13px;
                gap: 10px;
                padding: 0 8px;
            }
            
            .map-legend .legend-bar {
                flex: 1;
                min-width: 0;
                width: auto;
                max-width: none;
            }
            
            .map-legend span {
                flex-shrink: 0;
                white-space: nowrap;
            }
            
            .map-disclaimer-row {
                width: 100%;
                order: 10;
                gap: 6px;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
            }
            
            .map-disclaimer {
                font-size: 10px;
                margin: 0;
            }
            
            .content-section {
                padding: 20px 16px;
            }
            
            .content-section h1 {
                font-size: 26px;
            }
            
            .content-section h2 {
                font-size: 20px;
            }
        }

        @media (max-width: 393px) {
            .map-disclaimer {
                gap: 4px;
            }
        }
        
        /* Providers Modal - Full Screen */
        .providers-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            z-index: 10001;
            overflow-y: auto;
        }
        
        .providers-modal.active {
            display: block;
        }
        
        /* Default slide-in animation for modal opens */
        .providers-modal.active:not(.closing) {
            animation: slideInFromRight 0.3s ease-out;
        }
        
        @keyframes slideInFromRight {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }
        
        /* Slide-out animation when closing */
        .providers-modal.closing {
            animation: slideOutToRight 0.3s ease-in;
        }
        
        @keyframes slideOutToRight {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(100%);
            }
        }
        
        /* Settings Modal - Keep as centered modal */
        .settings-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10001;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .settings-modal.active {
            display: flex;
        }
        
        .providers-modal-toggle-container {
            /* same max-width + inner padding pattern as the title section, so the toggle lines up with the content on wide screens */
            padding: 16px 24px 16px 24px;
            max-width: 1000px;
            margin: 0 auto;
            border-bottom: none;
        }

        /* Hide any duplicate toggle that comes from hex.html */
        .providers-modal-body .container,
        .providers-modal-body .switches-container {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Pull content divs up to eliminate white space */
        .providers-modal-body #residential-info,
        .providers-modal-body #business-info {
            margin-top: 0 !important;
        }
        
        /* Full toggle switch styles for the modal toggle */
        .providers-modal-toggle-container .switches-container {
            box-sizing: border-box;
            width: 16rem !important;
            min-width: 16rem;
            position: relative;
            display: flex !important;
            padding: 0;
            background: #0d47a1;
            line-height: 3rem;
            border-radius: 3rem;
        }
        
        .providers-modal-toggle-container .switches-container input {
            visibility: hidden;
            position: absolute;
            top: 0;
        }
        
        .providers-modal-toggle-container .switches-container label {
            width: 50%;
            padding: 0;
            margin: 0;
            text-align: center;
            cursor: pointer;
            color: #f5f7ff;
            font-size: 15px;
            line-height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .providers-modal-toggle-container .switch-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            padding: 0.15rem;
            z-index: 3;
            transition: transform .5s cubic-bezier(.77, 0, .175, 1);
        }
        
        .providers-modal-toggle-container .switch {
            border-radius: 3rem;
            background: #f5f7ff;
            height: 100%;
        }
        
        .providers-modal-toggle-container .switch div {
            width: 100%;
            text-align: center;
            opacity: 0;
            display: block;
            color: #0d47a1;
            transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
            will-change: opacity;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 15px;
            line-height: 3rem;
        }
        
        .providers-modal-toggle-container .switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
            transform: translateX(0%);
        }
        
        .providers-modal-toggle-container .switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
            transform: translateX(100%);
        }
        
        .providers-modal-toggle-container .switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
            opacity: 1;
        }
        
        .providers-modal-toggle-container .switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
            opacity: 1;
        }
        
        .providers-modal-content {
            background: white;
            width: 100%;
            min-height: 100vh;
            position: relative;
        }
        
        .providers-modal-header {
            padding: 12px 24px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background: white;
            z-index: 1;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .providers-modal-header-content {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .providers-modal-title-section {
            padding: 16px 24px 0 24px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .providers-modal-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin: 0 0 4px 0;
        }
        
        .providers-modal-subtitle {
            font-size: 14px;
            color: #666;
            margin: 0;
        }
        
        .providers-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            font-size: 15px;
            color: #0066cc;
            cursor: pointer;
            padding: 8px 12px 8px 8px;
            margin: 0;
            border-radius: 6px;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .providers-back-btn:hover {
            background: rgba(0,102,204,0.08);
            color: #0052a3;
        }
        
        .providers-back-btn svg {
            width: 20px;
            height: 20px;
        }

        .providers-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: none;
            border: none;
            font-size: 15px;
            color: #0066cc;
            cursor: pointer;
            padding: 8px 8px 8px 12px;
            margin: 0;
            border-radius: 6px;
            transition: all 0.2s;
            font-weight: 500;
        }

        .providers-share-btn:hover {
            background: rgba(0,102,204,0.08);
            color: #0052a3;
        }

        .providers-share-btn svg {
            width: 18px;
            height: 18px;
        }
        
        .providers-modal-body {
            padding: 0 24px 24px 24px;
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* Style the injected hex.html content */
        .providers-modal-body h2 {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin: 20px 0 12px 0;
            padding-bottom: 8px;
        }
        
        /* Remove top margin from first h2 to reduce white space */
        .providers-modal-body h2:first-of-type {
            margin-top: 8px;
        }
        
        .providers-modal-body h2:first-child {
            margin-top: 0;
        }
        
        .providers-modal-body table.net {
            width: 100%;
            margin-bottom: 16px;
            font-size: 15px;
            table-layout: fixed;
        }
        
        .providers-modal-body table.net th {
            font-weight: 600;
            color: #666;
            padding: 8px;
            text-align: left;
            border-bottom: 2px solid #e0e0e0;
            font-size: 14px;
        }
        
        .providers-modal-body table.net th:nth-child(2),
        .providers-modal-body table.net th:nth-child(3) {
            width: 30%;
            max-width: 30%;
            text-align: right;
        }
        
        .providers-modal-body table.net td {
            padding: 10px 8px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .providers-modal-body table.net td:nth-child(2),
        .providers-modal-body table.net td:nth-child(3) {
            width: 30%;
            max-width: 30%;
            text-align: right;
        }
        
        .providers-modal-body table.net tr:hover {
            background-color: #f9fafb;
        }
        
        .providers-modal-body table.net a {
            color: #0066cc;
            text-decoration: none;
            font-weight: 500;
        }
        
        .providers-modal-body table.net a:hover {
            text-decoration: underline;
        }

        /* Flagged multi-word brands render as two same-href anchors (see
           brand_link_with_flag) — underline the whole name on hover so it
           reads as one link. */
        .providers-modal-body table.net [data-row-slug]:hover a {
            text-decoration: underline;
        }

        /* Plans column (residential modal tables carry .has-plans). Tables are
           table-layout: fixed, so the column needs an explicit width and the
           Down/Up columns give back some of their 30% to keep Provider roomy.
           The modal's containers cap at 1000px, which keeps the speed columns
           (and the buttons) from stranding way out to the right of the names.
           Buttons right-align in their cell, so extra column width becomes
           breathing room between the Upload numbers and the buttons. */
        /* Heading and buttons both center in the column so they stack as one
           unit; the column's extra width keeps the air gap from Upload. */
        .providers-modal-body table.net th.plans-col,
        .providers-modal-body table.net td.plans-col {
            width: 76px;
            max-width: 76px;
            text-align: center;
            padding-left: 4px;
        }

        /* Dotted-underline tooltip affordance on the Plans heading */
        .plans-tip {
            text-decoration: underline dotted;
            text-underline-offset: 2px;
            cursor: help;
        }

        /* ≥1000px the button reads "View Plans" (mnone span) — wider column. */
        @media (min-width: 1000px) {
            .providers-modal-body table.net th.plans-col,
            .providers-modal-body table.net td.plans-col {
                width: 170px;
                max-width: 170px;
            }
        }

        /* Only the first listing table spells out its full headings —
           repeating them on every tech section is noise. Later tables drop
           the "Plans" heading and the "(Mbps)" suffix: desktop shows
           "Download"/"Upload", mobile its usual "Down"/"Up" (the th-short
           span carries its own myes/mnone pair). Which table comes first
           varies by location (no fiber -> Cable is first), so these key off
           document order, not section name. Residential and business tables
           live in separate containers, so each view's first table keeps its
           headings independently. */
        .providers-modal-body table.net th .th-short {
            display: none;
        }

        .providers-modal-body table.net ~ table.net th.plans-col span {
            display: none;
        }

        .providers-modal-body table.net ~ table.net th .th-label {
            display: none;
        }

        .providers-modal-body table.net ~ table.net th .th-short {
            display: inline;
        }

        /* Placeholder modal for non-partner Plans buttons — sits above the
           providers modal (10001) and its tooltips (10002). */
        .plans-placeholder-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 10005;
            align-items: center;
            justify-content: center;
        }

        .plans-placeholder-overlay.active {
            display: flex;
        }

        .plans-placeholder-card {
            position: relative;
            background: white;
            border-radius: 12px;
            padding: 24px;
            max-width: 400px;
            width: calc(100% - 32px);
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
        }

        /* Wider card when researched plan content is loaded (set by
           renderPlansModalBody); the 400px default fits the placeholder text. */
        .plans-placeholder-overlay.has-content .plans-placeholder-card {
            width: 80vw;
            max-width: 800px;
        }

        /* Researched plan content (fragments from templates/plans/, wrapped by
           components/plans_modal_content.html) */
        .plans-content h3 {
            font-size: 17px;
            color: #333;
            margin: 0 0 8px 0;
        }

        .plans-content h4 {
            font-size: 14.5px;
            color: #333;
            margin: 16px 0 6px 0;
        }

        .plans-content p,
        .plans-content li {
            font-size: 13.5px;
            color: #444;
            line-height: 1.5;
        }

        .plans-content p {
            margin: 0 0 10px 0;
        }

        .plans-content ul {
            padding-left: 20px;
            margin: 6px 0 10px 0;
        }

        .plans-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
            font-size: 13px;
        }

        .plans-content th,
        .plans-content td {
            border: 1px solid #dde;
            padding: 6px 8px;
            text-align: left;
        }

        .plans-content th {
            background: #f4f6f8;
            font-weight: 600;
        }

        .plans-ai-note {
            /* Tight bottom margin — the last-checked line right below carries
               the gap to the plans content */
            margin: 0 0 8px 0;
            padding: 14px 16px;
            border: 1px solid #bfd3e8;
            border-left: 4px solid #3972a8;
            border-radius: 8px;
            background: #f2f7fc;
            color: #263b50;
            font-size: 16px;
            line-height: 1.5;
        }

        .plans-ai-note p {
            margin: 0;
        }

        .plans-ai-note strong {
            color: #172c40;
            font-weight: 700;
        }

        .plans-ai-checked {
            /* Plain metadata line below the AI-note box (the old pill look was
               designed to contrast against the box's blue background) */
            margin: 0 0 20px;
            color: #62707f;
            font-size: 12.5px;
            font-weight: 600;
        }

        .plans-draft-badge {
            display: inline-block;
            background: #fff3e0;
            color: #b35c00;
            border: 1px solid #f0c48a;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            margin-bottom: 10px;
        }

        .plans-placeholder-close {
            position: absolute;
            top: 10px;
            right: 14px;
            border: none;
            background: none;
            font-size: 22px;
            line-height: 1;
            color: #999;
            cursor: pointer;
            padding: 4px;
        }

        .plans-placeholder-close:hover {
            color: #333;
        }

        .plans-placeholder-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            padding-right: 24px;
        }

        .plans-placeholder-text {
            font-size: 14px;
            color: #555;
            line-height: 1.5;
            margin: 0 0 16px 0;
        }

        .plans-placeholder-link {
            display: block;
            text-align: center;
            padding: 8px 14px;
            border: 1px solid #0066cc;
            border-radius: 6px;
            color: #0066cc;
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            margin-top: 4px;
        }

        .plans-placeholder-link:hover {
            background: #0066cc;
            color: #fff;
        }

        @media (max-width: 600px) {
            .plans-placeholder-overlay.has-content .plans-placeholder-card {
                width: calc(100% - 32px);
            }

            .plans-ai-note {
                padding: 12px 14px;
            }
        }

        .providers-modal-body table.net.has-plans th:nth-child(2),
        .providers-modal-body table.net.has-plans th:nth-child(3),
        .providers-modal-body table.net.has-plans td:nth-child(2),
        .providers-modal-body table.net.has-plans td:nth-child(3) {
            width: 22%;
            max-width: 22%;
        }

        .providers-modal-body table.net a.plans-btn {
            display: inline-block;
            padding: 3px 10px;
            border: 1px solid #0066cc;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1.4;
            white-space: nowrap;
        }

        .providers-modal-body table.net a.plans-btn:hover {
            background: #0066cc;
            color: #fff;
            text-decoration: none;
        }

        .plans-btn svg {
            width: 10px;
            height: 10px;
            margin-left: 3px;
            vertical-align: -1px;
        }

        /* ≥1000px the 170px column has room to spare — size the button up a
           notch. Lives after the base .plans-btn rules so it wins the tie.
           The translateX optically centers the label: the arrow (11px) plus
           its gap (3px) sit right of the text, so a box-centered button reads
           7px left of center under the centered "Plans" heading. */
        @media (min-width: 1000px) {
            .providers-modal-body table.net a.plans-btn {
                padding: 5px 14px;
                font-size: 14px;
                transform: translateX(7px);
            }

            .plans-btn svg {
                width: 11px;
                height: 11px;
            }
        }

        /* Mobile: plain "Plans ›" link, no button chrome — the bordered box
           is heavy in the tight column there. Padding stays for tap area.
           Links and heading right-align (the centered stack is a desktop
           look; mobile rows read better flush to the table edge). */
        @media (max-width: 999px) {
            .providers-modal-body table.net a.plans-btn {
                border: none;
                background: none;
                padding-right: 0;
            }

            .providers-modal-body table.net a.plans-btn:hover {
                background: none;
                color: #0066cc;
                text-decoration: underline;
            }

            .providers-modal-body table.net th.plans-col,
            .providers-modal-body table.net td.plans-col {
                text-align: right;
            }

            /* No "Plans" heading on mobile — the links speak for themselves
               and the header row stays lighter. (Desktop keeps it, tooltip
               and all; the first-table-only rule still governs there.) */
            .providers-modal-body table.net th.plans-col span {
                display: none;
            }
        }

        /* Especially narrow screens (~320px devices): drop the plans column,
           give Down/Up their usual 30% back. Verified 360px fits fine. */
        @media (max-width: 359px) {
            .providers-modal-body table.net .plans-col {
                display: none;
            }
            .providers-modal-body table.net.has-plans th:nth-child(2),
            .providers-modal-body table.net.has-plans th:nth-child(3),
            .providers-modal-body table.net.has-plans td:nth-child(2),
            .providers-modal-body table.net.has-plans td:nth-child(3) {
                width: 30%;
                max-width: 30%;
            }
        }
        
        /* Toggle switch styles */
        .providers-modal-body .switches-container {
            box-sizing: border-box;
            width: 16rem !important;
            min-width: 16rem;
            position: relative;
            display: flex;
            padding: 0;
            background: #0d47a1;
            line-height: 3rem;
            border-radius: 3rem;
            margin-bottom: 16px;
        }
        
        /* Hide radio inputs */
        .providers-modal-body .switches-container input {
            visibility: hidden;
            position: absolute;
            top: 0;
        }
        
        /* Labels for clicking */
        .providers-modal-body .switches-container label {
            width: 50%;
            padding: 0;
            margin: 0;
            text-align: center;
            cursor: pointer;
            color: #f5f7ff;
            line-height: 3rem;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Switch wrapper for sliding animation */
        .providers-modal-body .switch-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            padding: 0.15rem;
            z-index: 3;
            transition: transform .5s cubic-bezier(.77, 0, .175, 1);
        }
        
        /* Switch background */
        .providers-modal-body .switch {
            border-radius: 3rem;
            background: #f5f7ff;
            height: 100%;
        }
        
        /* Switch text labels */
        .providers-modal-body .switch div {
            width: 100%;
            text-align: center;
            opacity: 0;
            display: block;
            color: #0d47a1;
            transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
            will-change: opacity;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 15px;
        }
        
        /* Slide switch to left (Residential) */
        .providers-modal-body .switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
            transform: translateX(0%);
        }
        
        /* Slide switch to right (Business) */
        .providers-modal-body .switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
            transform: translateX(100%);
        }
        
        /* Show Residential label when checked */
        .providers-modal-body .switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
            opacity: 1;
        }
        
        /* Show Business label when checked */
        .providers-modal-body .switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
            opacity: 1;
        }
        
        .providers-modal-body .speed-note {
            font-size: 13px;
            color: #999;
            margin: 8px 0;
        }
        
        .providers-modal-body #location-detail {
            display: none; /* Hide location text in modal */
        }
        
        /* Ensure the container holding the toggle is visible */
        .providers-modal-body .container {
            display: flex !important;
            flex-direction: column;
            align-items: flex-start;
            visibility: visible !important;
            overflow: visible !important;
            min-height: 80px !important;
            margin-bottom: 16px;
        }
        
        /* Override any inline transform scale that might collapse the toggle */
        .providers-modal-body .switches-container[style*="transform"] {
            width: 16rem !important;
            min-width: 16rem !important;
            height: 3rem !important;
            transform: none !important; /* Remove the scale transform that collapses it */
        }
        
        /* Override inline margins on container */
        .providers-modal-body .container[style] {
            margin-top: 0 !important;
            margin-bottom: 16px !important;
        }
        
        .providers-loading {
            text-align: center;
            padding: 40px 20px;
            color: #666;
        }
        
        .providers-loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(0,102,204,0.1);
            border-top-color: #0066cc;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 16px;
        }
        
        /* Settings Modal Specific Styles */
        .settings-modal-content {
            background: white;
            border-radius: 12px;
            max-width: 500px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            position: relative;
        }
        
        .settings-modal-header {
            padding: 24px 24px 16px 24px;
            border-bottom: 1px solid #eee;
            position: sticky;
            top: 0;
            background: white;
            border-radius: 12px 12px 0 0;
            z-index: 1;
        }
        
        .settings-modal-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin: 0;
        }
        
        .settings-close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 4px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        .settings-close-btn:hover {
            background: rgba(0,0,0,0.05);
            color: #333;
        }
        
        .settings-modal-body {
            padding: 20px 24px 24px 24px;
        }
        
        .setting-group {
            margin-bottom: 24px;
        }

        .setting-label {
            display: block;
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }

        .settings-section-divider {
            border: none;
            border-top: 1px solid #e5e5e5;
            margin: 4px 0 20px 0;
        }

        .setting-checkbox-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            cursor: pointer;
            margin-bottom: 12px;
        }

        .setting-checkbox-row:last-child {
            margin-bottom: 0;
        }

        .setting-checkbox-row input[type="checkbox"] {
            margin-top: 2px;
            width: 16px;
            height: 16px;
            accent-color: #0066cc;
            cursor: pointer;
        }

        .setting-checkbox-label {
            font-size: 14px;
            color: #333;
            cursor: pointer;
            line-height: 1.4;
        }

        .setting-checkbox-hint {
            font-size: 12px;
            color: #888;
            margin-top: 2px;
        }
        
        .setting-select,
        .setting-input {
            width: 100%;
            padding: 10px 12px;
            font-size: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: white;
            color: #333;
            cursor: pointer;
            transition: all 0.2s;
        }

        /* Kill native select chrome so Safari/Chrome render identically. */
        .setting-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding-right: 36px;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 14px;
        }

        .setting-input {
            cursor: text;
        }
        
        .setting-select:hover,
        .setting-input:hover {
            border-color: #0066cc;
        }
        
        .setting-select:focus,
        .setting-input:focus {
            outline: none;
            border-color: #0066cc;
            box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
        }
        
        .settings-dropdown-menu {
            list-style: none;
            padding: 0;
            margin: 8px 0 0 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            max-height: 200px;
            overflow-y: auto;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .settings-dropdown-menu:empty {
            display: none;
        }
        
        .settings-dropdown-menu li {
            padding: 10px 12px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .settings-dropdown-menu li:hover {
            background: #f5f7ff;
        }
        
        .settings-dropdown-menu li:active {
            background: #e3f2fd;
        }
        
        .settings-apply-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #0066cc, #0052a3);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 8px;
        }
        
        .settings-apply-btn:hover {
            background: linear-gradient(135deg, #0052a3, #003d7a);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,102,204,0.3);
        }
        
        .settings-apply-btn:active {
            transform: translateY(0);
        }
        
        /* Settings modal toggle switch */
        .settings-modal-body .switches-container {
            box-sizing: border-box;
            width: 16rem;
            position: relative;
            display: flex;
            padding: 0;
            background: #0d47a1;
            line-height: 3rem;
            border-radius: 3rem;
            margin-bottom: 0;
        }
        
        .settings-modal-body .switches-container input {
            visibility: hidden;
            position: absolute;
            top: 0;
        }
        
        .settings-modal-body .switches-container label {
            width: 50%;
            padding: 0;
            margin: 0;
            text-align: center;
            cursor: pointer;
            color: #f5f7ff;
        }
        
        .settings-modal-body .switch-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            padding: 0.15rem;
            z-index: 3;
            transition: transform .5s cubic-bezier(.77, 0, .175, 1);
        }
        
        .settings-modal-body .switch {
            border-radius: 3rem;
            background: #f5f7ff;
            height: 100%;
        }
        
        .settings-modal-body .switch div {
            width: 100%;
            text-align: center;
            opacity: 0;
            display: block;
            color: #0d47a1;
            transition: opacity .2s cubic-bezier(.77, 0, .175, 1) .125s;
            will-change: opacity;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 15px;
        }
        
        .settings-modal-body .switches-container input:nth-of-type(1):checked ~ .switch-wrapper {
            transform: translateX(0%);
        }
        
        .settings-modal-body .switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
            transform: translateX(100%);
        }
        
        .settings-modal-body .switches-container input:nth-of-type(1):checked ~ .switch-wrapper .switch div:nth-of-type(1) {
            opacity: 1;
        }
        
        .settings-modal-body .switches-container input:nth-of-type(2):checked ~ .switch-wrapper .switch div:nth-of-type(2) {
            opacity: 1;
        }
        
        @media (max-width: 768px) {
            .providers-modal-header {
                padding: 10px 16px;
            }
            
            .providers-modal-title-section {
                padding: 12px 16px 0 16px;
            }

            /* Keep the toggle and body at the same 16px mobile inset as the
               title section, so everything shares one left edge */
            .providers-modal-toggle-container {
                padding: 16px;
            }

            .providers-modal-body {
                padding: 0 16px 24px 16px;
            }
            
            .providers-modal-title {
                font-size: 18px;
            }
            
            .providers-back-btn {
                font-size: 14px;
                padding: 6px 10px 6px 6px;
                margin: 0;
            }
            
            .providers-back-btn svg {
                width: 18px;
                height: 18px;
            }

            .providers-share-btn {
                font-size: 14px;
                padding: 6px 6px 6px 10px;
                margin: 0;
            }

            .providers-share-btn svg {
                width: 16px;
                height: 16px;
            }
            
            .settings-modal-content {
                max-width: 100%;
                margin: 0 8px;
            }
            
            .settings-modal-header {
                padding: 20px 20px 14px 20px;
            }
            
            .settings-modal-title {
                font-size: 18px;
                padding-right: 32px;
            }
            
            .settings-close-btn {
                top: 16px;
                right: 16px;
            }
        }
        
        /* Prevent page scroll class - apply to elements that should block page scrolling when interacted with */
        .prevent-page-scroll {
            /* This class is detected by JavaScript to add scroll prevention */
        }
        
        /* Hide UI elements when viewing content section */
        body.viewing-content .geocoder-container,
        body.viewing-content .official-lookup-link,
        body.viewing-content .map-controls,
        body.viewing-content .provider-cta-bar {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        /* Dynamic positioning for map controls when provider bar is active.
           The html:not() guard matters at first paint: the hide-bar preference
           lands on <html> in an early head script, body gets the class later. */
        html:not(.bottom-bar-hidden) body:not(.bottom-bar-hidden):has(.provider-cta-bar.active) .map-controls {
            bottom: calc(var(--cta-bar-actual-height, 0px) + 10px);
        }

        /* Fade through white while staying opaque so the map never bleeds
           through. iOS Safari samples fixed bars for its toolbar tint and
           can retain the transition color after the swap. contrast(0) alone
           left the toolbar grey; brightness(2) makes that midpoint white. */
        .provider-cta-bar {
            transition: filter 300ms ease, opacity 300ms ease;
        }

        .provider-cta-bar.bbm-bottom-bar-transitioning {
            pointer-events: none !important;
        }

        .provider-cta-bar.bbm-bottom-bar-fading-out,
        .provider-cta-bar.bbm-bottom-bar-fading-in {
            filter: contrast(0) brightness(2);
        }

        .provider-cta-bar.bbm-bottom-bar-fading-in.bbm-bottom-bar-visible {
            filter: contrast(1) brightness(1);
        }

        @media (max-width: 768px) {
            html:not(.bottom-bar-hidden) body:not(.bottom-bar-hidden):has(.provider-cta-bar.active) .map-controls {
                bottom: calc(var(--cta-bar-actual-height, 0px) + 4px) !important;
            }
        }
        
        /* Hide location and hex details in modal - redundant with modal subtitle */
        #location-detail,
        #hex-details {
            display: none;
        }