/* IMPORTANT: scope reset to the Atlas only.
           A global * selector changes Tilda's own blocks on the published page. */
        #qf-atlas-root,
        #qf-atlas-root * {
            box-sizing: border-box;
        }

        #qf-atlas-root {
            width: 100%;
            font-family: Arial, sans-serif;
            color: #173f32;
        }

        /* ---------------- DESKTOP ---------------- */

        #qf-desktop-map {
            width: 100%;
            height: 100vh;
            min-height: 620px;
            visibility: hidden;
            background: #d9d9d9;
            position: relative;
            overflow: hidden;
        }

        #qf-desktop-map .leaflet-top {
            top: 12px !important;
        }

        #qf-desktop-map:fullscreen,
        #qf-desktop-map:-webkit-full-screen {
            width: 100vw !important;
            height: 100vh !important;
            background: #d9d9d9;
        }

        #qf-desktop-map:fullscreen .leaflet-top,
        #qf-desktop-map:-webkit-full-screen .leaflet-top {
            top: 12px !important;
        }

        #qf-desktop-map .leaflet-control-layers {
            background: #f7f6ef;
            color: #173f32;
            border: 1px solid #b8bbb3;
            border-radius: 8px;
            box-shadow: none;
        }

        #qf-desktop-map .leaflet-control-layers-expanded {
            padding: 14px 16px;
        }

        #qf-desktop-map .leaflet-control-layers-list::before {
            content: "Layers";
            display: block;
            font-weight: 700;
            font-size: 14px;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        #qf-desktop-map .leaflet-control-layers label {
            margin: 8px 0;
            font-size: 14px;
        }

        .qf-fullscreen-control {
            background: transparent;
            border: 0;
            border-radius: 8px;
            overflow: visible;
            box-shadow: 0 2px 10px rgba(0,0,0,0.22);

            /* Pull the button slightly up and left from the map edge */
            margin-right: 18px !important;
            margin-bottom: 18px !important;
        }

        .qf-fullscreen-button {
            min-width: 168px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            background: #173f32;
            color: #ffffff;
            border: 1px solid #173f32;
            border-radius: 8px;
            padding: 0 22px;
            cursor: pointer;
            font-family: Arial, sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        .qf-fullscreen-button:hover {
            background: #0f3026;
            border-color: #0f3026;
        }

        .qf-fullscreen-button:focus-visible {
            outline: 3px solid rgba(23,63,50,0.28);
            outline-offset: 2px;
        }

        .qf-fullscreen-button svg {
            width: 24px;
            height: 24px;
            display: block;
            flex: 0 0 auto;
        }

        .qf-fullscreen-label {
            white-space: nowrap;
        }

        #qf-desktop-map:fullscreen .qf-fullscreen-button,
        #qf-desktop-map:-webkit-full-screen .qf-fullscreen-button {
            background: rgba(23,63,50,0.94);
            border-color: rgba(255,255,255,0.45);
        }

        .qf-desktop-legend {
            background: rgba(20, 20, 20, 0.92);
            color: #fff;
            padding: 12px 14px;
            border-radius: 6px;
            font-size: 13px;
            line-height: 1.25;
            box-shadow: 0 1px 5px rgba(0,0,0,0.35);
        }

        .qf-desktop-legend-title {
            font-weight: 700;
            margin-bottom: 8px;
        }

        .qf-legend-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 4px 0;
        }

        .qf-legend-color {
            width: 14px;
            height: 14px;
            border: 1px solid rgba(255,255,255,0.35);
            flex: 0 0 auto;
        }

        .qf-legend-source {
            margin-top: 8px;
            font-size: 11px;
            opacity: 0.72;
        }

        .qf-fire-legend {
            background: rgba(20, 20, 20, 0.92);
            color: #fff;
            padding: 11px 13px;
            border-radius: 6px;
            font-size: 12px;
            line-height: 1.25;
            box-shadow: 0 1px 5px rgba(0,0,0,0.35);
            max-width: 250px;
        }

        .qf-fire-legend-title {
            font-weight: 700;
            margin-bottom: 7px;
        }

        .qf-fire-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            flex: 0 0 auto;
            border: 1px solid rgba(255,255,255,0.55);
        }

        .qf-fire-note {
            margin-top: 8px;
            padding-top: 7px;
            border-top: 1px solid rgba(255,255,255,0.20);
            font-size: 10px;
            line-height: 1.35;
            opacity: 0.75;
        }

        #qf-mobile-map .qf-fire-legend {
            max-width: 210px;
            padding: 9px 11px;
            font-size: 11px;
        }

        /* ---------------- HARD VIEWPORT EDGE MASK ---------------- */

        #qf-desktop-map .qf-edge-mask,
        #qf-mobile-map .qf-edge-mask {
            position: absolute;
            z-index: 345;
            background: #d9d9d9;
            pointer-events: none;
            margin: 0;
            padding: 0;
        }

        /* ---------------- CLICKABLE REGION / SITE INFO ---------------- */

        .qf-map-info {
            display: none;
            width: 370px;
            max-width: calc(100vw - 32px);
            background: rgba(247,246,239,0.98);
            color: #173f32;
            border: 1px solid #b8bbb3;
            border-radius: 10px;
            box-shadow: 0 3px 14px rgba(0,0,0,0.18);
            padding: 15px 16px 14px;
            font-family: Arial, sans-serif;
        }

        .qf-map-info.qf-visible {
            display: block;
        }

        .qf-info-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 10px;
        }

        .qf-info-title {
            margin: 0;
            font-size: 17px;
            line-height: 1.25;
            font-weight: 700;
            color: #173f32;
        }

        .qf-info-kicker {
            margin-top: 3px;
            font-size: 11px;
            line-height: 1.25;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: #66756e;
        }

        .qf-info-close {
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 6px;
            background: transparent;
            color: #173f32;
            font: 400 24px/28px Arial, sans-serif;
            cursor: pointer;
            padding: 0;
        }

        .qf-info-close:hover {
            background: #ebeae3;
        }

        .qf-info-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 16px;
            padding: 7px 0;
            border-top: 1px solid #dcddd7;
            font-size: 13px;
            line-height: 1.35;
        }

        .qf-info-label {
            color: #66756e;
        }

        .qf-info-value {
            color: #173f32;
            font-weight: 700;
            text-align: right;
        }

        .qf-info-note {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #dcddd7;
            color: #56645e;
            font-size: 12px;
            line-height: 1.45;
        }

        .qf-site-dot {
            background: #173f32;
            border: 2px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 1px 5px rgba(0,0,0,0.30);
        }

        /* ---------------- MOBILE PREVIEW ---------------- */

        #qf-mobile-shell {
            display: none;
            width: 100%;
            padding: 0;
            background: #f7f6ef;
        }

        #qf-mobile-preview-wrap {
            position: relative;
            width: 100%;
            height: min(50svh, 450px);
            min-height: 340px;
            background: #d9d9d9;
            overflow: hidden;
        }

        #qf-mobile-preview {
            width: 100%;
            height: 100%;
            visibility: hidden;
            background: #d9d9d9;
        }

        #qf-mobile-preview::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 700;
            pointer-events: auto;
            background: transparent;
        }

        #qf-open-atlas {
            position: absolute;
            left: 50%;
            bottom: 22px;
            transform: translateX(-50%);
            z-index: 1100;
            width: min(88%, 360px);
            min-height: 52px;
            border: 0;
            border-radius: 8px;
            padding: 13px 20px;
            background: #173f32;
            color: #fff;
            font: 700 16px/1.2 Arial, sans-serif;
            cursor: pointer;
            box-shadow: 0 3px 12px rgba(0,0,0,0.22);
        }

        #qf-mobile-preview-wrap .leaflet-control-attribution {
            font-size: 7px !important;
            line-height: 1.05 !important;
            max-width: 68vw;
            white-space: normal;
        }

        /* ---------------- MOBILE ATLAS OVERLAY ---------------- */

        #qf-mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            width: 100vw;
            height: 100svh;
            background: #f7f6ef;
            color: #173f32;
            grid-template-rows: auto minmax(0, 1fr);
            overscroll-behavior: none;
        }

        #qf-mobile-overlay.qf-open {
            display: grid;
        }

        .qf-mobile-header {
            min-height: 58px;
            padding-top: env(safe-area-inset-top);
            background: #f7f6ef;
            border-bottom: 1px solid #d0d2cb;
            display: grid;
            grid-template-columns: 52px 1fr 52px;
            align-items: center;
            position: relative;
            z-index: 30;
        }

        #qf-close-atlas {
            width: 44px;
            height: 44px;
            margin-left: 4px;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: #173f32;
            font-size: 31px;
            line-height: 40px;
            cursor: pointer;
        }

        .qf-mobile-title {
            text-align: center;
            font-size: 17px;
            font-weight: 700;
            white-space: nowrap;
        }

        .qf-mobile-map-stage {
            position: relative;
            min-height: 0;
            overflow: hidden;
            background: #d9d9d9;
        }

        #qf-mobile-map {
            width: 100%;
            height: 100%;
            background: #d9d9d9;
            visibility: hidden;
            opacity: 0;
            transition: opacity 120ms ease;
        }

        #qf-mobile-map.qf-map-ready {
            visibility: visible;
            opacity: 1;
        }

        #qf-mobile-map .leaflet-control-attribution {
            font-size: 8px !important;
            line-height: 1.05 !important;
            max-width: 80vw;
            white-space: normal;
        }

        /* Mobile layer control:
           collapsed = explicit green "Layers" button;
           expanded = existing light panel. */
        #qf-mobile-map .leaflet-control-layers {
            background: #f7f6ef;
            color: #173f32;
            border: 1px solid #b8bbb3;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.14);
            font-family: Arial, sans-serif;
        }

        #qf-mobile-map
        .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
            background: #173f32;
            border-color: #173f32;
            box-shadow: 0 3px 12px rgba(0,0,0,0.22);
            overflow: hidden;
        }

        #qf-mobile-map
        .leaflet-control-layers:not(.leaflet-control-layers-expanded)
        .leaflet-control-layers-toggle {
            position: relative;
            display: flex !important;
            align-items: center;
            justify-content: flex-start;
            width: 116px !important;
            min-width: 116px;
            height: 48px !important;
            margin: 0;
            padding: 0 14px 0 44px;
            background-image: none !important;
            color: #ffffff;
            text-decoration: none;
            cursor: pointer;
        }

        #qf-mobile-map
        .leaflet-control-layers:not(.leaflet-control-layers-expanded)
        .leaflet-control-layers-toggle::before {
            content: "";
            position: absolute;
            left: 14px;
            top: 50%;
            width: 22px;
            height: 22px;
            transform: translateY(-50%);
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m3 12 9 5 9-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='m3 16 9 5 9-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
        }

        #qf-mobile-map
        .leaflet-control-layers:not(.leaflet-control-layers-expanded)
        .leaflet-control-layers-toggle::after {
            content: "Layers";
            display: block;
            color: #ffffff;
            font: 700 14px/1 Arial, sans-serif;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }

        #qf-mobile-map
        .leaflet-control-layers:not(.leaflet-control-layers-expanded):active {
            background: #0f3026;
            border-color: #0f3026;
        }

        #qf-mobile-map .leaflet-control-layers-expanded {
            width: min(76vw, 280px);
            padding: 12px 14px;
        }

        #qf-mobile-map .leaflet-control-layers-list::before {
            content: "Layers";
            display: block;
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        #qf-mobile-map .leaflet-control-layers label {
            margin: 8px 0;
            font-size: 14px;
            line-height: 1.25;
        }

        #qf-mobile-map .leaflet-control-layers input {
            margin-right: 7px;
        }

        #qf-mobile-map .leaflet-top {
            top: 6px;
        }

        #qf-mobile-map .leaflet-right {
            right: 6px;
        }

        #qf-region-info {
            display: none;
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 10px;
            z-index: 1200;
            max-height: 46%;
            overflow-y: auto;
            padding: 15px 15px 14px;
            border: 1px solid #b9beb6;
            border-radius: 12px;
            background: rgba(247,246,239,0.98);
            color: #173f32;
            box-shadow: 0 4px 18px rgba(0,0,0,0.20);
            font-family: Arial, sans-serif;
            pointer-events: auto;
        }

        #qf-region-info.qf-visible {
            display: block;
        }

        #qf-region-info .qf-info-title {
            font-size: 17px;
        }

        #qf-region-info .qf-info-row {
            font-size: 13px;
        }

        /* Prevent the page behind the mobile Atlas from moving. */
        body.qf-atlas-locked {
            overflow: hidden !important;
            touch-action: none;
        }

        /* Mobile gets preview + explicit Explore button. */
        @media (max-width: 900px), (pointer: coarse) {
            #qf-desktop-map {
                display: none;
            }

            #qf-mobile-shell {
                display: block;
            }
        }

        /* Desktop gets the regular inline Atlas. */
        @media (min-width: 901px) and (pointer: fine) {
            #qf-mobile-shell,
            #qf-mobile-overlay {
                display: none !important;
            }
        }