/* Explore overlays share one live map surface, including the active tab. */
.explore-page {
  --explore-sidebar-width: 52px;
  --explore-tab-rise: 0px;
  --explore-tab-x: 0px;
  --explore-tab-top: 0px;
  --explore-tab-width: 0px;
  --explore-control-gap: 12px;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.explore-page .site-header,
.explore-page .site-footer {
  position: relative;
  flex-shrink: 0;
  z-index: 20;
}

.explore-page .site-header {
  background: linear-gradient(to right, var(--navy) 54px, var(--footer-end) 100%);
}

.explore-page .navbar {
  position: relative;
  z-index: 1;
}

.explore-page .site-footer {
  background: linear-gradient(to right, var(--navy) 54px, var(--footer-end) 100%);
}

.explore-page .footer-inner {
  min-height: 30px;
  padding-block: 0;
}

.explore-page .page-content {
  display: block;
  position: relative;
  isolation: isolate;
  z-index: 0;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.explore-page .map-workspace {
  position: absolute;
  inset: 0 0 0 var(--explore-sidebar-width);
  z-index: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.explore-page #explore-map,
.explore-page #explore-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.explore-page .icon-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 8;
  width: var(--explore-sidebar-width);
  min-width: 0;
  margin: 0;
  background: var(--navy);
  transition: width .2s ease;
}


.explore-page .icon-sidebar::before,
.explore-page .icon-sidebar::after {
  right: -10px;
  width: 10px;
  height: 10px;
}

.explore-page .updates-pane {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 5;
  width: var(--updates-width);
  max-width: calc(100% - var(--explore-sidebar-width) - 12px);
  height: auto;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    to top,
    var(--footer-end) 0px,
    var(--footer-end) 10px,
    transparent 90%,
    transparent 100%
  );
}

.explore-page .updates-heading {
  flex-shrink: 0;
  min-width: 0;
}

.explore-page .scope-panel > summary,
.explore-page .scope-panel label,
.explore-page .scope-panel .scope-hint,
.explore-page .scope-panel .picker-feedback,
.explore-page .scope-panel .boundary-credit {
  color: #fff;
  text-shadow: 0 1px 3px #102942, 0 0 2px #102942;
}

/* The pane's heading sits on the light top of its gradient: dark text, no glow. So does the chosen area's title. */
.explore-page .feature-details h3,
.explore-page .feature-details p,
.explore-page .updates-heading h2,
.explore-page .updates-collapse {
  color: #10233a;
  text-shadow: none;
}

.explore-page .scope-panel input,
.explore-page .scope-panel select,
.explore-page .scope-panel button,
.explore-page .scope-options span,
.explore-page .search-picker ul {
  text-shadow: none;
}

.explore-page .details-content {
  min-width: 0;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #294b7380 transparent;
}

.explore-page .feature-details,
.explore-page .scope-panel {
  min-width: 0;
  overflow-wrap: anywhere;
}

.explore-page .scope-panel {
  margin-top: auto;
}

.explore-page .scope-panel select,
.explore-page .scope-panel input {
  max-width: 100%;
}

.explore-page .updates-reopen {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 6;
  width: 10px;
  min-width: 10px;
  padding: 0;
  border: 0;
  background: linear-gradient(
    to top,
    var(--footer-end) 0px,
    var(--footer-end) 10px,
    transparent 90%,
    transparent 100%
  );
}

.explore-page .updates-reopen span {
  display: grid;
  place-items: center;
  position: absolute;
  top: calc(50% - 22px);
  right: 0;
  width: 28px;
  height: 44px;
  border-radius: 5px 0 0 5px;
  color: #fff;
  background: var(--footer-end);
  font-size: 25px;
  line-height: 1;
}

.explore-page .updates-reopen::after {
  content: '';
  position: absolute;
  inset: 0 0 0 -18px;
}

.explore-page .updates-pane::before,
.explore-page .updates-reopen::before {
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at top left, transparent 9.5px, var(--footer-end) 10px);
  pointer-events: none;
}

.explore-page .leaflet-top {
  top: calc(var(--explore-tab-rise) + var(--explore-control-gap));
}

.explore-page .leaflet-right {
  right: calc(var(--updates-width) + var(--explore-control-gap));
}

.explore-page .leaflet-control-attribution {
  max-width: min(430px, calc(100vw - var(--explore-sidebar-width) - var(--updates-width) - 30px));
  white-space: normal;
}

.explore-page .layers-panel {
  top: calc(var(--explore-tab-rise) + 60px);
  max-width: calc(100% - 24px);
}

.explore-page .map-view-switch {
  top: calc(var(--explore-tab-rise) + 12px);
  right: auto;
  left: 12px;
}

/* The header mask reveals the live surface extended above the workspace. */
@media (min-width: 1001px) {
  .explore-page.map-tab-ready .map-workspace {
    top: calc(-1 * var(--explore-tab-rise));
  }

  .explore-page.map-tab-ready .site-header {
    background: transparent;
  }

  .explore-page.map-tab-ready .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, var(--navy) 54px, var(--footer-end) 100%);
    mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0),
      radial-gradient(circle at bottom right, transparent calc(var(--nav-tab-radius) - .5px), #000 var(--nav-tab-radius)),
      radial-gradient(circle at bottom left, transparent calc(var(--nav-tab-radius) - .5px), #000 var(--nav-tab-radius));
    mask-size:
      var(--explore-tab-x) 100%,
      calc(100% - var(--explore-tab-x) - var(--explore-tab-width)) 100%,
      100% var(--explore-tab-top),
      var(--nav-tab-radius) var(--nav-tab-radius),
      var(--nav-tab-radius) var(--nav-tab-radius);
    mask-position:
      left top,
      right top,
      left top,
      var(--explore-tab-x) var(--explore-tab-top),
      calc(var(--explore-tab-x) + var(--explore-tab-width) - var(--nav-tab-radius)) var(--explore-tab-top);
    mask-repeat: no-repeat;
    mask-composite: add;
  }

  /* A solid tab, Home's light tab colour, so map labels never show behind the word. */
  .explore-page.map-tab-ready .nav-links > a[aria-current] {
    isolation: auto;
    background: #dcebf7;
    border-radius: var(--nav-tab-radius) var(--nav-tab-radius) 0 0;
    color: #10233a;
    text-shadow: none;
  }

  .explore-page.map-tab-ready .nav-links > a[aria-current]::before,
  .explore-page.map-tab-ready .nav-links > a[aria-current]::after {
    display: none;
  }
}

@media (max-width: 1000px) {
  .explore-page {
    --explore-tab-rise: 0px !important;
  }

  .explore-page .site-header {
    max-height: 72dvh;
    overflow-y: auto;
  }

  .explore-page .nav-links > a[aria-current] {
    background: #ffffff24;
    border-radius: 4px;
    color: #fff;
  }
}

@media (max-width: 640px) {
  .explore-page {
    --explore-sheet-height: min(48%, 360px);
    --updates-width: min(280px, calc(100vw - 64px));
  }

  .explore-page.updates-collapsed {
    --explore-sheet-height: 0px;
    --updates-width: 10px;
  }

  .explore-page .updates-pane {
    top: auto;
    height: var(--explore-sheet-height);
    max-height: calc(100% - 100px);
  }

  .explore-page .scope-options span {
    min-height: 40px;
  }

  .explore-page .scope-panel > summary,
  .explore-page .updates-collapse {
    min-height: 44px;
  }

  .explore-page .leaflet-right {
    right: 8px;
  }

  .explore-page .leaflet-bottom {
    bottom: calc(var(--explore-sheet-height) + 8px);
  }

  .explore-page .leaflet-control-attribution {
    max-width: calc(100vw - var(--explore-sidebar-width) - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .explore-page .icon-sidebar {
    transition: none;
  }
}
/* Frosted map backdrop; pane contents remain sharp. */
.explore-page .updates-pane {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.explore-page #map-settings-toggle { margin-top: auto; }
.explore-page .icon-sidebar::after { display: none; }

/* The legend over the map while the Details pane is collapsed (explore.js moves it here and back). */
.explore-page .map-legend-overlay { position: absolute; z-index: 800; right: 12px; bottom: 28px; display: none; width: 240px; max-width: calc(100% - 24px); padding: 8px 10px; border-radius: 6px; background: #ffffffeb; box-shadow: 0 1px 6px #0f2c4d33; color: #0f2c4d; }
.explore-page .map-legend-overlay.is-active:has(.details-legend:not([hidden]), .gauge-legend:not([hidden])) { display: block; }
.explore-page .map-legend-overlay .gauge-legend + .details-legend, .explore-page .map-legend-overlay .details-legend + .gauge-legend { margin-top: 8px; padding-top: 8px; border-top: 1px solid #d8e1ec; }
.explore-page .map-legend-overlay .gauge-legend :is(.details-legend-units, .details-legend-ticks, .details-legend-nodata, .gauge-legend-note) { color: #0f2c4d; text-shadow: none; }
.explore-page .map-legend-overlay .details-legend { margin: 0; padding: 0; border: 0; }
.explore-page .map-legend-overlay :is(.details-legend-units, .details-legend-ticks, .details-legend-nodata) { color: #0f2c4d; text-shadow: none; }

/* Phones: the legend overlay is a "Legend" button that opens the legends above it (explore.js placeLegend). */
.explore-page .map-legend-toggle { display: none; }
.explore-page .map-legend-overlay.is-folding.is-active { display: none; width: auto; padding: 0; background: transparent; box-shadow: none; }
.explore-page .map-legend-overlay.is-folding.is-active:has(.details-legend:not([hidden]), .gauge-legend:not([hidden])) { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.explore-page .map-legend-overlay.is-folding .map-legend-toggle { display: inline-flex; align-items: center; order: 2; min-height: 34px; padding: 0 14px; border: 1px solid #c8d3de; border-radius: 17px; background: #fff; color: #0f2c4d; font: inherit; font-size: 14px; font-weight: 600; box-shadow: 0 1px 6px #0f2c4d33; cursor: pointer; }
.explore-page .map-legend-overlay.is-folding .map-legend-toggle:focus-visible { outline: 3px solid #0f2c4d; outline-offset: 2px; }
.explore-page .map-legend-overlay.is-folding .map-legend-toggle[aria-expanded="true"] { background: #dcebf7; }
.explore-page .map-legend-overlay.is-folding:not(.is-open) > :not(.map-legend-toggle) { display: none !important; }
.explore-page .map-legend-overlay.is-folding.is-open > :not(.map-legend-toggle):not([hidden]) { width: min(240px, calc(100vw - 90px)); padding: 8px 10px; border-radius: 6px; background: #ffffffeb; box-shadow: 0 1px 6px #0f2c4d33; }