/* Explore left pane. Pinned, it sits beside the map at --explore-pane-open-width and the map starts after it;
   collapsed, it is the icon rail and opens over the map on hover or focus. The nav bar, the footer and the time bar
   follow --explore-sidebar-width. */
.explore-page {
  --explore-pane-open-width: 290px;
  --explore-rail-width: 52px;
}
@media (min-width: 1100px) {
  .explore-page.explore-pane-pinned { --explore-sidebar-width: var(--explore-pane-open-width); }
}

.explore-page .explore-pane {
  display: flex;
  flex-direction: column;
  width: var(--explore-sidebar-width);
  padding: 4px 0 10px;
  color: #fff;
  transition: width .2s ease;
}
.explore-page .explore-pane:not(.is-pinned):is(:hover, :focus-within) {
  width: min(var(--explore-pane-open-width), calc(100vw - 52px));
  box-shadow: 6px 0 18px rgba(10, 30, 55, .28);
}
/* The pin is a pane control: a small, quiet button in its own row at the pane's top edge, right-aligned with the
   group chevrons. The row is kept in the rail too (button hidden), so the groups do not move when the pane opens. */
.explore-page .explore-pane .sidebar-pin {
  position: static;
  flex: none;
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 24px;
  height: 24px;
  /* Right edge in line with the group chevrons (16px from the content edge, plus the scrollbar gutter). */
  margin: 0 calc(16px + 10px) 0 0;
  padding: 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #ffffffa6;
  cursor: pointer;
  visibility: hidden;
}
.explore-page .explore-pane .sidebar-pin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.explore-page .explore-pane:is(.is-pinned, :hover, :focus-within) .sidebar-pin { visibility: visible; }
.explore-page .explore-pane .sidebar-pin:hover { background: #ffffff1c; color: #fff; }
.explore-page .explore-pane .sidebar-pin[aria-pressed="true"] { color: #ffffffd9; }

.explore-page .pane-groups { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff40 transparent; scrollbar-gutter: stable; }
.explore-page .pane-group { border-bottom: 1px solid #ffffff1f; }
.explore-page .pane-group-heading { margin: 0; font: inherit; }
.explore-page .pane-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 46px;
  padding: 8px 44px 8px 16px;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.explore-page .pane-group-head:hover { background: #ffffff12; }
.explore-page .pane-group-head > svg:first-child { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.explore-page .pane-group-text { display: grid; min-width: 0; }
.explore-page .pane-group-title { font-size: 16px; line-height: 1.3; white-space: nowrap; }
.explore-page .pane-group-value { font-size: 13px; color: #d2e2f4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore-page .pane-group-value:empty { display: none; }
.explore-page .pane-chevron { position: absolute; right: 16px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); transition: transform .15s; }
.explore-page .pane-group-head { position: relative; }
.explore-page .pane-group.is-open .pane-chevron { transform: none; }
.explore-page .pane-group-body { padding: 0 16px 14px 16px; font-size: 13px; min-width: 0; }

/* Icon rail: only the group icons, each with its tooltip from the title attribute. */
.explore-page .explore-pane:not(.is-pinned):not(:hover):not(:focus-within) :is(.pane-group-text, .pane-chevron, .pane-group-body, .map-tool-label) { display: none; }
.explore-page .explore-pane:not(.is-pinned):not(:hover):not(:focus-within) .pane-group-head { justify-content: center; padding: 8px 0; }
.explore-page .explore-pane:not(.is-pinned):not(:hover):not(:focus-within) .pane-group { border-bottom-color: transparent; }
.explore-page .explore-pane .map-tool { display: flex; align-items: center; gap: 12px; margin: 8px 6px 0; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.explore-page .explore-pane .map-tool:hover { background: #ffffff1a; }
.explore-page .explore-pane .map-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.explore-page .explore-pane:is(.is-pinned, :hover, :focus-within) .map-tool-label { display: inline; }

/* Layers */
.explore-page .explore-pane .add-layer {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: -42px 28px 0 0;
  padding: 0 14px;
  border: 1px solid #ffffffb0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: pointer;
  position: relative;
}
.explore-page .explore-pane .add-layer:hover { background: #ffffff1c; }
.explore-page .explore-pane #user-layers { clear: both; }
.explore-page .explore-pane #user-layers .user-layers-empty { color: #d2e2f4; font-size: 13px; padding: 4px 0; }
.explore-page .explore-pane #user-layers .user-layer-item { grid-template-columns: minmax(0, 1fr) 28px; margin: 0 0 6px; padding: 4px 0 8px; border: 0; border-bottom: 1px solid #ffffff1a; border-radius: 0; background: transparent; color: #fff; }
.explore-page .explore-pane #user-layers .user-layer-item:last-child { border-bottom: 0; }
.explore-page .explore-pane #user-layers .user-layer-toggle { color: #fff; }
.explore-page .explore-pane #user-layers .user-layer-toggle input { width: 18px; height: 18px; flex-basis: 18px; accent-color: #fff; }
.explore-page .explore-pane #user-layers .user-layer-toggle strong { font-size: 15px; }
.explore-page .explore-pane #user-layers .user-layer-toggle small { margin-top: 0; font-size: 12px; color: #d2e2f4; }
.explore-page .explore-pane #user-layers .user-layer-preview { color: #f2d48a; }
.explore-page .explore-pane #user-layers .user-layer-remove { width: 28px; height: 28px; color: #fff; }
.explore-page .explore-pane #user-layers .user-layer-remove:hover { background: #ffffff1c; }
/* Opacity and legend rows fit the pane at every width: only the slider shrinks; the label, the value (room for
   "100%") and the switch keep their size. */
.explore-page .user-layer-settings { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; padding-left: 27px; }
.explore-page .user-layer-opacity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; color: #e5eef8; }
.explore-page .user-layer-legend { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; color: #e5eef8; }
.explore-page .user-layer-opacity input { width: 100%; min-width: 0; margin: 0; accent-color: #fff; }
.explore-page .user-layer-opacity output { min-width: 4.5ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.explore-page .user-layer-legend span { min-width: 0; }
.explore-page .user-layer-legend input { flex: none; }

/* Switches: Reference layers, Show legend, Compare */
.explore-page .explore-pane input[role="switch"] {
  appearance: none;
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  border-radius: 999px;
  background: #ffffff40;
  cursor: pointer;
  transition: background .15s;
}
.explore-page .explore-pane input[role="switch"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.explore-page .explore-pane input[role="switch"]:checked { background: #2f86de; }
.explore-page .explore-pane input[role="switch"]:checked::after { transform: translateX(16px); }
.explore-page .explore-pane input:disabled { cursor: not-allowed; opacity: .55; }
.explore-page .pane-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; color: #fff; cursor: pointer; }
.explore-page .pane-switch small { display: block; color: #c4d6ea; font-size: 11px; }
.explore-page .pane-switch.is-disabled { color: #c4d6ea; cursor: default; }
.explore-page .pane-soon { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #ffffff1f; color: #e5eef8; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }

/* Regions */
.explore-page .pane-region + .pane-region { margin-top: 10px; }
.explore-page .pane-region-chosen:not(:empty) { margin-top: 12px; }
.explore-page .pane-region-hint, .explore-page .pane-option-hint { color: #c4d6ea; font-size: 12px; font-weight: 400; }
.explore-page .pane-subheading { margin: 16px 0 6px; color: #e5eef8; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.explore-page .pane-subheading[hidden] { display: none; }
.explore-page .pane-recent-list { margin: 0; padding: 0; list-style: none; }
.explore-page .pane-recent { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.explore-page .pane-recent:hover, .explore-page .pane-recent[aria-current="true"] { background: #ffffff1c; }
.explore-page .pane-recent-meta { flex-shrink: 0; color: #c4d6ea; font-size: 12px; }
.explore-page .pane-region-name { margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.explore-page .pane-region-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.explore-page .pane-small-button { min-height: 28px; padding: 0 10px; border: 1px solid #ffffffb0; border-radius: 4px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.explore-page .pane-small-button:hover:not(:disabled) { background: #ffffff1c; }
.explore-page .pane-small-button:disabled { opacity: .5; cursor: not-allowed; }
.explore-page .pane-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.explore-page .pane-check input { width: 15px; height: 15px; margin: 0; accent-color: #fff; }
.explore-page .pane-empty, .explore-page .pane-hint { margin: 4px 0 0; color: #c4d6ea; font-size: 12px; line-height: 1.5; }

/* Find a place: the country and district pickers from the Details pane, restyled for the dark pane. */
.explore-page :is([data-find], [data-regions]) .picker-input-row { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 32px; border: 1px solid #ffffffb0; border-radius: 4px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 10px center; }
.explore-page :is([data-find], [data-regions]) input[type="text"] { flex: 1; min-width: 0; min-height: 32px; border: 0; background: transparent; color: #fff; font: inherit; }
.explore-page :is([data-find], [data-regions]) input[type="text"]::placeholder { color: #c4d6ea; }
.explore-page :is([data-find], [data-regions]) input[type="text"]:focus { outline: none; }
.explore-page :is([data-find], [data-regions]) .picker-input-row:focus-within { box-shadow: 0 0 0 2px #fff; }
.explore-page :is([data-find], [data-regions]) .picker-input-row button { width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.explore-page :is([data-find], [data-regions]) [role="listbox"] { margin: 4px 0 0; padding: 4px 0; max-height: 220px; overflow-y: auto; list-style: none; border: 1px solid #ffffff59; border-radius: 4px; background: #163758; }
/* Options: white on the dark list (11:1); hover, keyboard focus and the selected one use one light row with dark text
   (11:1). */
.explore-page :is([data-find], [data-regions]) [role="option"] { padding: 6px 12px; color: #fff; background: transparent; text-shadow: none; cursor: pointer; }
.explore-page :is([data-find], [data-regions]) [role="option"]:is([aria-selected="true"], :hover, .is-focused) { background: #dcebf7; color: #0f2c4d; }
.explore-page :is([data-find], [data-regions]) [role="option"]:is([aria-selected="true"], :hover, .is-focused) .pane-option-hint { color: #3d5876; }
/* The pane body gives the inset; the site-wide 4px padding of .scope-panel-content would add to it. */
.explore-page [data-find] { padding: 0; }
.explore-page [data-find] .district-controls { margin-top: 10px; }
.explore-page [data-find] label, .explore-page [data-regions] .search-picker > label { display: block; margin: 8px 0 4px; color: #e5eef8; font-size: 12px; }
.explore-page [data-find] select { width: 100%; min-height: 30px; border: 1px solid #ffffffb0; border-radius: 4px; background: #234264; color: #fff; font: inherit; }
.explore-page :is([data-find], [data-regions]) .scope-hint, .explore-page :is([data-find], [data-regions]) .picker-feedback { margin: 4px 0 0; color: #c4d6ea; font-size: 12px; }
.explore-page :is([data-find], [data-regions]) .picker-feedback:empty { display: none; }
/* Links in the pane's groups are text links. (The site's .icon-sidebar a rule sizes the rail's icon links, and the pane
   is an .icon-sidebar too.) */
.explore-page .explore-pane .pane-group-body a { display: inline; width: auto; min-height: 0; padding: 0; border-radius: 0; background: none; color: #d2e2f4; text-decoration: underline; overflow-wrap: anywhere; }
.explore-page .explore-pane .pane-group-body a:hover { background: none; color: #fff; }
.explore-page [data-find] .boundary-credit { display: block; margin: 8px 0 0; color: #c4d6ea; font-size: 11px; line-height: 1.5; text-decoration: none; text-shadow: none; overflow-wrap: anywhere; }
.explore-page [data-find] .boundary-credit[hidden] { display: none; }
.explore-page [data-find] .boundary-retry { margin-top: 6px; border: 1px solid #ffffffb0; border-radius: 4px; background: transparent; color: #fff; cursor: pointer; }

/* Time view and Compare: shown with their final layout, not yet active. */
.explore-page .pane-options { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; color: #c4d6ea; }
.explore-page .pane-options label:not(.pane-switch) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.explore-page .pane-options label small { flex-basis: 100%; padding-left: 22px; font-size: 11px; }
.explore-page .pane-options input[type="radio"] { margin: 0; accent-color: #fff; }

/* Share link */
.explore-page .pane-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 34px; border: 1px solid #ffffffb0; border-radius: 6px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.explore-page .pane-button:hover { background: #ffffff1c; }
.explore-page .pane-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.explore-page [data-share-status] { overflow-wrap: anywhere; }

/* Details: the legend stays at the bottom; the content above scrolls. */
.explore-page .updates-pane { display: flex; flex-direction: column; }
.explore-page .details-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; padding-bottom: 14px; }
.explore-page .details-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.explore-page .details-legend { flex: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ffffff4d; }
.explore-page .details-legend[hidden] { display: none; }
.explore-page .details-legend-units { margin: 0 0 6px; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px #10294266; }
.explore-page .details-legend-scale { display: flex; align-items: flex-start; gap: 12px; }
.explore-page .details-legend-ramp { flex: 1; min-width: 0; }
.explore-page .details-legend-bar { height: 14px; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px #ffffff66; }
.explore-page .details-legend-bar.is-unavailable { height: auto; padding: 2px 6px; box-shadow: none; color: #fff; font-size: 11px; }
.explore-page .details-legend-ticks { position: relative; height: 18px; margin-top: 3px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #10294266; }
.explore-page .details-legend-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.explore-page .details-legend-ticks .is-first { transform: none; }
.explore-page .details-legend-ticks .is-last { transform: translateX(-100%); }
.explore-page .details-legend-nodata { display: inline-flex; align-items: center; gap: 6px; flex: none; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #10294266; }
.explore-page .details-legend-nodata[hidden] { display: none; }
.explore-page .details-legend-nodata span { width: 14px; height: 14px; border-radius: 3px; background: repeating-linear-gradient(45deg, #ffffff 0 3px, #c8d3de 3px 6px); box-shadow: 0 0 0 1px #ffffff99; }
.explore-page .layer-data-label { display: block; font-size: 15px; }
.explore-page .layer-data-row { display: block; }

/* Nav bar and footer: the pane's solid colour runs to the map's rounded corner, then the gradient begins, so the
   pane blends into both bars. Phones keep the site's gradient, as the pane is not beside the map there. */
@media (min-width: 641px) {
  .explore-page .site-header {
    background: linear-gradient(to right, var(--navy) 0, var(--navy) calc(var(--explore-sidebar-width) + 10px), #4776a3 100%);
  }
  .explore-page .site-footer {
    background: linear-gradient(to right, var(--navy) 0, var(--navy) calc(var(--explore-sidebar-width) + 10px),
      var(--footer-end) max(calc(var(--explore-sidebar-width) + 10px), calc(100% - var(--updates-width) - var(--pane-corner))), var(--footer-end) 100%);
  }
}

@media (max-width: 1099px) {
  .explore-page .explore-pane .sidebar-pin { visibility: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
  .explore-page .explore-pane, .explore-page .pane-chevron { transition: none; }
}