:root {
  --ink: #18352c;
  --muted: #66746f;
  --paper: #f4f5f2;
  --panel: #ffffff;
  --line: #d8d9cd;
}

* { box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2 { font-family: inherit; margin: 0; }
h1 { font-size: 1.05rem; font-weight: 600; }
h2 { font-size: 1.25rem; font-weight: 600; }

main { height: 100%; width: 100%; }

.map-shell {
  background: var(--panel);
  border: 0;
  overflow: hidden;
}

.map-shell, #map { height: 100%; width: 100%; }
.map-shell { position: relative; }

.map-controls, .legend, .map-message {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(70, 99, 79, 0.2);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(27, 50, 41, 0.14);
  position: absolute;
  z-index: 500;
}

.map-controls { left: 18px; padding: 13px 15px; top: 18px; width: min(390px, calc(100% - 36px)); }
.map-controls h1 { border-bottom: 1px solid var(--line); margin-bottom: 11px; padding-bottom: 9px; }
.date-row { align-items: end; display: grid; gap: 8px; grid-template-columns: auto 1fr auto; }
.date-row label { display: grid; gap: 4px; }
.date-row label span, .legend > span { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
select { background: transparent; border: 0; color: var(--ink); font: 650 1rem/1.2 inherit; outline: 0; width: 100%; }
.icon-button { background: #e8ece3; border: 0; border-radius: 3px; color: var(--ink); cursor: pointer; font-size: 1.1rem; height: 32px; width: 32px; }
#date-slider { margin: 10px 0 6px; width: 100%; }
.control-row { align-items: center; color: var(--muted); display: flex; font-size: 0.8rem; justify-content: space-between; }
.control-row label { align-items: center; display: flex; gap: 7px; }
#opacity { width: 90px; }

.legend { bottom: 24px; left: 18px; padding: 11px 13px; width: 190px; }
.legend-gradient { background: linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725); height: 9px; margin: 7px 0 3px; transform: scaleX(-1); }
.legend-labels { color: var(--muted); display: flex; font-size: 0.7rem; justify-content: space-between; }
.map-message { left: 50%; padding: 10px 14px; top: 50%; transform: translate(-50%, -50%); }

.leaflet-container { background: #dce4df; font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; }

.pixel-pin { background: transparent; border: 0; }
.pixel-pin svg { display: block; filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, 0.42)); }

.pixel-chart-popup .leaflet-popup-content-wrapper {
  border-radius: 9px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  padding: 0;
}

.pixel-chart-popup .leaflet-popup-content { margin: 0; }
.pixel-chart-popup .leaflet-popup-close-button { color: #56615d; font-size: 21px; padding: 9px 10px 0 0; }
.pixel-chart-popup .leaflet-popup-tip { box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.16); }

.pixel-popup-content { padding: 26px 30px 22px; }
.pixel-popup-content h2 { color: #183b68; font-size: 1.05rem; font-weight: 500; padding-right: 24px; }
.pixel-popup-meta { color: var(--muted); font-size: 0.72rem; margin: 4px 28px 13px 0; }
.pixel-popup-chart { height: clamp(240px, 38vh, 350px); position: relative; }
.pixel-popup-empty { align-items: center; color: var(--muted); display: flex; justify-content: center; }

.wtd-hover-tooltip {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(24, 53, 44, 0.24);
  border-radius: 4px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 5px 7px;
}
.wtd-hover-tooltip strong { font-size: 0.82rem; }

@media (max-width: 760px) {
  .pixel-popup-content { padding: 22px 16px 14px; }
  .pixel-popup-chart { height: clamp(230px, 36vh, 290px); }
}