* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  font-family: system-ui, sans-serif;
  background: #e9ecef;
}

#map {
  position: absolute;
  inset: 0;
  /* Keep all Mapbox layers and controls in their own stacking context. */
  z-index: 0;
}

.map-panel {
  position: absolute;
  z-index: 10;
  top: 16px;
  left: 16px;
  width: 300px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 64px);
  overflow-y: auto;
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgb(255 255 255 / 75%);
  color: #252525;
  box-shadow: 0 2px 12px #0002;
  font-size: 14px;
  line-height: 1.5;
}

.map-panel h1 {
  margin: 0;
  font-size: 18px;
}

.panel-description {
  margin: 2px 0 16px;
  color: #59636e;
}

.map-panel fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.map-panel legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}

.map-panel button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #cbd2d9;
  border-radius: 6px;
  background: #f8fafc;
  color: #252525;
  font: inherit;
  cursor: pointer;
}

.map-panel button:hover:not(:disabled) { background: #e8eef5; }
.map-panel button:focus-visible { outline: 3px solid #175cd3; outline-offset: 2px; }
.map-panel button:disabled { opacity: 0.5; cursor: default; }
.status { margin: 12px 0 0; color: #59636e; }

.period-total { margin: 0 0 16px; }
.period-total span { display: block; color: #59636e; font-size: 12px; }
.period-total output { display: block; font-size: 24px; font-weight: 600; line-height: 1.3; }
.period-controls output { font-variant-numeric: tabular-nums; }
.histogram-caption { margin: -4px 0 12px; color: #59636e; font-size: 11px; }
.period-histogram { position: absolute; inset: 6px 0 0; pointer-events: none; }
.histogram-bar {
  position: absolute;
  bottom: 0;
  width: var(--bar-width);
  margin-left: calc(var(--bar-width) / -2);
  border-radius: 2px 2px 0 0;
  background: var(--bar-color, #b6c2d0);
  opacity: 0.22;
}
.histogram-bar.is-selected { opacity: 1; }
.histogram-legend { list-style: none; padding: 0; margin: 0 0 12px; font-size: 11px; color: #59636e; }
.histogram-legend li { display: flex; align-items: center; gap: 7px; margin: 4px 0; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.period-slider {
  position: relative;
  height: 136px;
  margin: 0 20px 8px;
  --start: 0%;
  --end: 100%;
  --bar-half-width: 0%;
  --selection-left: calc(var(--start) - var(--bar-half-width) - 2px);
  --selection-right: calc(var(--end) + var(--bar-half-width) + 2px);
}
.period-track {
  position: absolute;
  top: 8px;
  width: 100%;
  height: 96px;
  background: transparent;
}
.period-track::after {
  content: "";
  position: absolute;
  left: calc(var(--bar-half-width) * -1);
  right: calc(var(--bar-half-width) * -1);
  bottom: -1px;
  height: 1px;
  background: #aebbc9;
  pointer-events: none;
}
.period-selection {
  position: absolute;
  left: var(--selection-left);
  right: calc(100% - var(--selection-right));
  top: 8px;
  height: 96px;
  background: transparent;
  border-top: 1px solid #64748b26;
  touch-action: none;
  cursor: grab;
}
.period-ticks { position: absolute; inset: 8px 0 auto; height: 96px; pointer-events: none; }
.period-tick { position: absolute; bottom: 0; height: 7px; }
.major-tick { height: 12px; }
.period-tick span {
  position: absolute;
  top: 16px;
  left: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: #59636e;
  font-variant-numeric: tabular-nums;
}
.period-tick:first-child span { transform: none; }
.period-tick:last-child span { transform: translateX(-100%); }
.is-dragging-range .period-selection { cursor: grabbing; }
.is-full .period-selection,
.period-controls:disabled .period-selection { cursor: default; }
.map-panel .period-handle {
  position: absolute;
  top: 56px;
  width: 20px;
  min-width: 20px;
  height: 100px;
  min-height: 100px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: ew-resize;
}
.map-panel .period-handle:hover:not(:disabled) { background: transparent; }
.period-handle::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 8px;
  border: 1px solid #8292a3;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 3px #17212b20;
}
.start-handle::before { right: 0; }
.end-handle::before { left: 0; }
.period-handle::after {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: #64748b;
}
.start-handle::after { right: 3px; }
.end-handle::after { left: 3px; }
.period-handle:hover::before { border-color: #175cd3; }
/* Enclose the complete endpoint bars, including a single-year selection. */
.map-panel .start-handle { left: var(--selection-left); transform: translate(-100%, -50%); }
.map-panel .end-handle { left: var(--selection-right); transform: translate(0, -50%); }
.map-panel .period-handle:focus-visible {
  outline: none;
}
.period-tooltip {
  position: fixed;
  z-index: 11;
  width: 240px;
  max-width: calc(100% - 32px);
  padding: 14px 16px;
  border-radius: 8px;
  background: #17212b;
  color: #fff;
  box-shadow: 0 4px 18px #0003;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
}
.period-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  top: var(--arrow-y, 20px);
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}
.period-tooltip.below-panel::before { top: -6px; left: var(--arrow-x, 24px); }
.period-tooltip p { margin: 6px 0 0; }
.period-tooltip .keyboard-hint { color: #c4d3e3; font-size: 12px; }

[hidden] {
  display: none !important;
}