body, html, #map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
      }
      .map-overlay {
          position: absolute;
          font-size: 0.95em;   /* a hair smaller */
          top: 10px;
          right: 10px;
          z-index: 1;
          background: white;
          padding: 5px;
          border-radius: 3px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          width: 285px; /* Adjusted width (default might be too wide) */
          max-width: 286px; /* Prevent it from getting too wide */
      }
      .collapsed {
          display: none;
      }
      #filterSelect {
          width: 100%;
          padding: 5px;
          margin-top: 5px;
      }
      .layer-toggle {
          margin-top: 5px;
      }

       .loading-spinner {
          border: 8px solid #f3f3f3;
          border-top: 8px solid #3498db;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          animation: spin 2s linear infinite;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1000;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }
      .home-button {
          position: absolute;
          top: 105px;
          left: 10px;
          z-index: 1;
          background: white;
          border: none;
          padding: 2px 7px;
          border-radius: 3px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          cursor: pointer;
          font-size: 18px;
      }
      .draggable-marker-home {
          position: absolute;
          top: 150px;
          left: 10px;
          z-index: 100;
          background: white;
          border: none;
          padding: 2px 8px;
          border-radius: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          cursor: pointer;
          font-size: 24px;
      }
            /* default/off button */
      .draggable-marker-home i {
        color: #3FB1CE !important;   /* MapLibre default marker blue */
      }

      /* on/active state: red background, icon stays blue */
      .draggable-marker-home.active {
        background: #e53935;         /* red when ON */
        /* don't set `color` here, or the icon will inherit it */
      }
      .draggable-marker-home.active i {
        color: #3FB1CE !important;   /* force blue even when active */
      }




      #hover-popup {
          position: absolute;
          background: white;
          border-radius: 3px;
          padding: 5px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          pointer-events: none;
          display: none;
          z-index: 10;
      }
      .legend {
          background: white;
          padding: 10px;
          font-size: 12px;
          border-radius: 3px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          position: absolute;
          bottom: 30px;
          right: 10px;
          z-index: 1;
      }
      .legend-item {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
      }
      .legend-color {
          width: 15px;
          height: 15px;
          margin-right: 5px;
      }
      .divider {
          margin: 10px 0;
          border-top: 1px solid #ccc;
      }
      .toggle-button {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 2;
          background: white;
          border: none;
          padding: 5px;
          cursor: pointer;
          border-radius: 3px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }
      .coordinates {
          background: rgba(0, 0, 0, 0.7);
          color: #fff;
          position: absolute;
          bottom: 40px;
          left: 10px;
          padding: 10px;
          margin: 0;
          font-size: 14px;
          line-height: 20px;
          border-radius: 5px;
          display: none;
      }
      .coordinates a {
          color: #fff;
          text-decoration: underline;
      }
      /* Style for the legend toggle button */
.toggle-button-legend {
    position: absolute;
    top: 2px;
    right: 3px;
    z-index: 2;
    background: transparent; /* Make the background transparent */
    border: none; /* Remove border */
    padding: 0; /* Remove any padding */
    cursor: pointer;
    font-size: 16px;
    color: #000; /* Set text color to ensure visibility */
}


    #legendContent.collapsed {
    display: none; /* Hide content when collapsed */
}

.popup-gallery {
    display: flex;
    overflow-x: auto; /* Horizontal scrolling if images overflow */
    gap: 5px; /* Space between images */
}

.popup-gallery img {
    width: 100px; /* Width of each thumbnail */
    height: 100px; /* Height of each thumbnail */
    object-fit: cover; /* Crop images to fit the dimensions */
    border: 1px solid #ccc; /* Optional border around images */
    border-radius: 5px; /* Optional rounded corners */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Optional shadow for images */
}

.custom-geolocate-control {
    position: absolute;
    top: 205px;  /* Position below the draggable marker */
    left: 9px;  /* Position to the far left */
    z-index: 2;
    background: white;
    border: none;
    padding: 2px 4px;
    font-size: 20px;
    border-radius: 2px;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }

.search-container {
        position: absolute;
        top: 250px; /* Adjust to be below Geolocator */
        left: 10px;
        z-index: 1;
        display: flex;
        align-items: center;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 18px;
        padding: 3px 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        transition: width 0.3s;
        width: 35px;
        overflow: hidden;
    }

    .search-container.expanded {
        width: 280px;
    }

    .search-icon {
        cursor: pointer;
        border-radius: 50%;
        margin-right: 5px;
        transition: background 0.3s;
    }

    .search-icon:hover {
        background: #f0f0f0;
    }

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

    .search-box input {
        border: none;
        outline: none;
        width: 100%;
        padding: 5px;
        border-radius: 4px;
    }

    .clear-button {
        cursor: pointer;
        padding: 0 5px;
        color: orange !important;
        font-weight: bold;
        display: none; /* Hidden initially */
    }

    .search-container.expanded .clear-button {
        display: block; /* Only visible when the search box is expanded */
    }

#windy-toggle {
  position: absolute;
  top: 300px;  /* adjust as needed */
  left: 10px;
  z-index: 1000;
  background: white;
  border: none;
  padding: 2px 4px;
  font-size: 20px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#windy-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.5s ease;
}

#windy-overlay.show {
  display: block;
  opacity: 1;
}

#windy-iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 1.0;  /* Not transparent so user doesn't see base map misalignment */
  pointer-events: auto;
}

#windy-location {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
}

#windy-location.show {
  opacity: 1;
}

#windy-label {
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 5px black;
  margin-bottom: 4px;
}

#windy-marker {
  width: 14px;
  height: 14px;
  background: red;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Hide All Stations button */
body.windy-active #all-stations-btn {
  display: none !important;
}

/* Hide the Windrose button */
body.windy-active #btn-windrose,
body.windy-active .rose-btn {   /* class fallback */
  display: none !important;
}


#windrose-panel {
    position: absolute;
    bottom: 120px;
    left: 10px;
    z-index: 999;
    background: white;
    padding: 3px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
  }
  #windrose-controls {
    margin-top: 3px;
  }
  #windrose-toggle {
    font-size: 16px;
  }

body.windy-active #windrose-toggle,
body.windy-active #windrose-panel,
body.windy-active #windrose-controls {
  display: none !important;
}


/* Card */
.snapCard{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:8px;
  background:#fff;
  padding:6px;                 /* was 8 */
  box-shadow:0 1px 4px rgba(0,0,0,0.06); /* was 0 2px 8px */
  margin-bottom:6px;           /* was 8 */
}

/* Header */
.snapHead{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px;           /* was 6 */
}
.snapHead strong{ font-size:13px; line-height:1.2; }

/* Copy button stays on one line and smaller */
.copyAll{
  border:1px solid #e6e6e6; background:#fff; border-radius:8px;
  padding:4px 6px;             /* was 6x8 */
  font-size:8px;              /* was 12 */
  white-space:nowrap;          /* prevent 2-line wrap */
  line-height:1; cursor:pointer;
}

/* Rows */
.snapRows{ border-top:1px solid #eee; }   /* lighter line */

.snapRow{
  display:grid;
  grid-template-columns: 1fr auto auto;   /* label | badge | arrow */
  gap:6px;                                /* was 8 */
  align-items:center;
  padding:4px 0;                          /* was 6 */
  border-bottom:1px solid #f2f2f2;        /* lighter & thinner */
}

/* Label */
.lab{
  font-weight:600;
  font-size:12px;             /* was default */
  line-height:1.2;
  white-space:nowrap;         /* keep on one line */
}

/* Badge (value pill) */
.badge {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #e6e6e6;
  background: #f7f7f7;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #000 !important;    /* black text */
  font-weight: 700;           /* bold */
}

.b-green{ background:#e8f5e9; border-color:#a5d6a7 }
.b-yellow{ background:#fff8e1; border-color:#ffe082 }
.b-red{ background:#ffebee; border-color:#ef9a9a }

/* Trend arrow */
.trend{
  display:inline-flex; align-items:center;
  gap:4px;                    /* was 6 */
  font-size:12px;             /* was 13 */
  color:#666; line-height:1;
}
.trend.up .arrow{ color:#c62828 }   /* up = bad (red) */
.trend.down .arrow{ color:#2e7d32 } /* down = good (green) */
.trend.flat .arrow{ color:#6b7280 }

/* Small text */
.subtle{ color:#666; font-size:9px; }     /* was 12 */

/* 📊 All Stations button (left rail, below Windy) */
#all-stations-btn {
  position: absolute;
  top: 347px;            /* adjust if it overlaps your Windy button */
  left: 10px;
  z-index: 1000;
  background: white;
  border: none;
  padding: 2px 4px;
  font-size: 18px;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#all-stations-btn:hover { background:#f7f7f7; }

/* Small colored circle swatches used in legend */
.legend-dot{
  display:inline-block;
  width:12px; height:12px;
  border-radius:50%;
  margin:0 4px 0 6px;          /* space from checkbox and between dots */
  vertical-align:middle;
  border:2px solid #fff;        /* mimic the map's white stroke */
  box-shadow:0 0 0 1px rgba(0,0,0,0.15); /* subtle edge so white stroke shows on white bg */
}

/* Colors matching your layer paint */
.dot-orange { background:#FFA500; } /* "orange" */
.dot-blue   { background:#0000FF; } /* "blue"   */
.dot-red    { background:#FF0000; } /* "red"    */

/* Make the label align its contents nicely */
.layer-toggle{
  display:inline-flex;
  align-items:center;
  gap:2px;
}

/* 🌡️ Weather button (left rail, near your other buttons) */
#weather-btn{
  position:absolute;
  top:390px;          /* tweak so it stacks under your other left buttons */
  left:10px;
  z-index:1000;
  background:white;
  border:none;
  padding:2px 6px;
  font-size:20px;     /* nice size for the 🌡️ */
  border-radius:3px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
#weather-btn:hover{ background:#f7f7f7; }

/* Weather info panel */
#weatherInfo{
  position:absolute;
  top:90px;           /* under your overlay; tweak as needed */
  left:50px;
  z-index:1000;
  background:#fff;
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:0 1px 6px rgba(0,0,0,0.2);
  padding:4px 7px;
  max-width:300px;
  max-height:75vh;
  overflow-y:auto;
  display:none;       /* toggled via JS */
  font-size:13px;
  line-height:1.3;
}

/* AQHI/AQI pill backgrounds (reuse your class names) */
.low-risk{ background:#e8f5e9; padding:1px 6px; border-radius:999px; }
.moderate-risk{ background:#fff8e1; padding:1px 6px; border-radius:999px; }
.high-risk{ background:#ffe0e0; padding:1px 6px; border-radius:999px; }
.very-high-risk{ background:#ffcdd2; padding:1px 6px; border-radius:999px; }

.green{ background:#e8f5e9; padding:1px 6px; border-radius:999px; }
.yellow{ background:#fff8e1; padding:1px 6px; border-radius:999px; }
.orange{ background:#ffe5b4; padding:1px 6px; border-radius:999px; }
.red{ background:#ffebee; padding:1px 6px; border-radius:999px; }
.purple{ background:#f3e5f5; padding:1px 6px; border-radius:999px; }
.maroon{ background:#ef9a9a; padding:1px 6px; border-radius:999px; }
.unknown{ background:#eee; padding:1px 6px; border-radius:999px; }

/* Hide weather UI while Windy overlay is active */
body.windy-active #weather-btn,
body.windy-active #weatherInfo{
  display:none !important;
}

/* Row that holds Buffers + info button */
.overlay-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;           /* tighten spacing a touch */
}

.overlay-row .layer-toggle{
  margin: 0;                 /* remove extra top margin */
  flex: 1;                   /* take remaining space so ⓘ goes far right */
  white-space: nowrap;       /* keep on one line */
}

/* Small circular info button */
.info-btn{
  width: 22px;
  height: 22px;
  line-height: 20px;         /* centers the glyph nicely */
  text-align: center;
  font-weight: 700;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #f7f7f7;
  cursor: pointer;
  padding: 0;
}
.info-btn:hover{ background:#eef6ff; border-color:#9cc3ff; }
.info-btn:active{ transform: scale(0.97); }

/* subtle highlight + pulse */
.peek-highlight {
  box-shadow: 0 0 0 3px rgba(0,123,255,.45), 0 0 12px rgba(0,123,255,.35) !important;
  transition: box-shadow .3s ease;
}
.pulse {
  animation: peekPulse 1.2s ease-in-out 2;
}
@keyframes peekPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}


@media (max-width: 600px) {
  #windrose-panel {
    max-width: 90vw;
    padding: 2px;
  }

  #windrose-toggle {
    font-size: 14px;
  }
}


.rose-btn {
    position: fixed;
    left: 8px;           /* “left margin” button */
    top: 435px;           /* adjust so it clears your other controls */
    z-index: 999;
    background: #fff;  /* Bootstrap green-ish */
    color: #fff;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 17px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    cursor: pointer;
    user-select: none;
  }
  .rose-btn:active { transform: translateY(1px); }

  /* Air Quality Modelling Scenario Explorer link (left rail, under the windrose) */
#plume-explorer-btn {
  position: absolute; top: 478px; left: 10px; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: white; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#plume-explorer-btn:hover { background: #f7f7f7; }
body.windy-active #plume-explorer-btn { display: none !important; }


/* New Development Areas: hatch / wave swatches (images set by js/01b-dev-area-style.js) */
.dev-sw {
  box-sizing: border-box;
  border: 1.5px solid #999;
  background-color: #fff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.legend-color.dev-sw { width: 18px; height: 18px; }
.dev-sw-row { display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; }
.dev-sw-mini { display: inline-block; width: 14px; height: 14px; }