:root {
  --accent: #658d1b;
  --accent-soft: rgba(101, 141, 27, 0.16);
  --surface: rgba(246, 248, 250, 0.82);
  --surface-border: rgba(208, 215, 222, 0.9);
  --surface-elevated: rgba(255, 255, 255, 0.9);
  --ink: #1f2328;
  --ink-muted: #57606a;
}

html, body {
  font-feature-settings: "cv11", "ss01", "ss03";
  font-family: "Montserrat", "Open Sans", system-ui, -apple-system, sans-serif;
}

/* Map canvas */
#map {
  background: #0d1117;
}

/* Fade the map around a selected area. The hole is projected directly from
   the selected vector-tile pieces, avoiding a second tiled GeoJSON layer and
   the seams that come with it. MapLibre controls use z-index 2. */
.selection-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms ease;
}
.selection-dim.is-active { opacity: 0.68; }

@media (prefers-reduced-motion: reduce) {
  .selection-dim { transition: none; }
}

.chart-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(208, 215, 222, 0.9);
  background: rgba(255, 255, 255, 0.95);
  padding: 8px;
}
.dark .chart-wrap {
  border-color: rgba(48, 54, 61, 0.9);
  background: rgba(13, 17, 23, 0.95);
}
.chart-wrap.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 9999px;
  border: 3px solid rgba(101, 141, 27, 0.2);
  border-top-color: #658d1b;
  animation: chart-spin 720ms linear infinite;
  pointer-events: none;
}
.dark .chart-wrap.is-loading::after {
  border-color: rgba(137, 169, 73, 0.2);
  border-top-color: #89a949;
}
@keyframes chart-spin {
  to { transform: rotate(360deg); }
}
.chart-stack {
  display: grid;
  /* minmax(0, ...), not a bare 1fr. A 1fr track never shrinks below its
     widest item's min-content, and Chart.js pins its canvas to an inline
     pixel width - so once the panel had been wide, the column held that
     width, chart.resize() measured the wide column and kept it, and every
     card overflowed the narrowed panel. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.chart-card {
  border-radius: 12px;
  border: 1px solid rgba(208, 215, 222, 0.9);
  background: rgba(255, 255, 255, 0.78);
  padding: 12px;
}
.dark .chart-card {
  border-color: rgba(48, 54, 61, 0.9);
  background: rgba(22, 27, 34, 0.75);
}
.chart-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 4px;
}
.dark .chart-title {
  color: #cbd5e1;
}
.chart-ndvi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 10px;
  color: #64748b;
}
.dark .chart-ndvi-legend {
  color: #94a3b8;
}
.chart-ndvi-legend li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chart-ndvi-swatch {
  width: 14px;
  height: 2px;
  border-radius: 1px;
}
.chart-ndvi-swatch--dense {
  background: #44b374;
}
.chart-ndvi-swatch--sparse {
  background: #c8921f;
}
.chart-wrap-cover { height: 340px; }
.chart-wrap-pdsi { height: 320px; }
.chart-wrap-ndvi { height: 300px; }
#timeseriesCoverChart,
#timeseriesPdsiChart,
#timeseriesNdviChart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ---------- Glass cards ---------- */
.glass {
  background: var(--surface);
  -webkit-backdrop-filter: saturate(135%) blur(14px);
  backdrop-filter: saturate(135%) blur(14px);
  border: 1px solid var(--surface-border);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 3px rgba(31, 35, 40, 0.12),
    0 8px 24px rgba(31, 35, 40, 0.08);
}
.dark .glass {
  background: rgba(22, 27, 34, 0.8);
  border: 1px solid rgba(48, 54, 61, 0.95);
  box-shadow:
    0 0 0 1px rgba(48, 54, 61, 0.75),
    0 8px 24px rgba(1, 4, 9, 0.35);
}

/* App switcher — shares layer-control glass + summary/list styling */
.layer-control-list .app-switcher-item {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: inherit;
}
.layer-control-list .app-switcher-item + .app-switcher-item {
  margin-top: 2px;
}
.layer-control-list .app-switcher-item:hover .app-switcher-label {
  color: #547617;
}
.dark .layer-control-list .app-switcher-item:hover .app-switcher-label {
  color: #89a949;
}
.app-switcher-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.app-switcher-sub {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  color: rgba(31, 35, 40, 0.55);
}
.dark .app-switcher-sub {
  color: rgba(177, 186, 196, 0.7);
}

@media (max-width: 639px) {
  .app-switcher-label {
    overflow-wrap: anywhere;
  }
}

.analysis-brand-mark {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: visible;
}
.analysis-logo {
  width: 30px; height: 30px;
  object-fit: contain; object-position: center;
}

/* ---------- Panels (details/summary) ---------- */
.panel {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(208, 215, 222, 0.9);
  overflow: hidden;
  transition: border-color 150ms ease, background 150ms ease;
}
.dark .panel {
  background: rgba(22, 27, 34, 0.65);
  border-color: rgba(48, 54, 61, 0.9);
}
.panel[open] { background: var(--surface-elevated); }
.dark .panel[open] { background: rgba(22, 27, 34, 0.9); }

.panel-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  color: var(--ink);
}
.dark .panel-summary { color: #e6edf3; }
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary:hover { background: rgba(31, 35, 40, 0.04); }
.dark .panel-summary:hover { background: rgba(230, 237, 243, 0.05); }
.panel .chevron {
  transition: transform 200ms ease;
}
.panel[open] .chevron { transform: rotate(90deg); }

.panel-body {
  padding: 0 14px 14px;
}

.panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.dark .panel-label { color: rgba(177, 186, 196, 0.85); }
.panel-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
}

/* ---------- Custom sliders ---------- */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--accent) var(--progress, 50%), rgba(15, 23, 42, 0.08) var(--progress, 50%));
  outline: none;
  transition: background 120ms linear;
}
.dark .slider {
  background: linear-gradient(to right, var(--accent) var(--progress, 50%), rgba(241, 245, 249, 0.08) var(--progress, 50%));
}
/* Ramp-track variant: the slider track _is_ the persistence color bar. */
.slider--ramp {
  height: 6px;
  background: linear-gradient(to right, #d7191c 0%, #fdae61 25%, #ffffbf 50%, #abd9e9 75%, #2c7bb6 100%);
  transition: none;
}
.dark .slider--ramp {
  background: linear-gradient(to right, #d7191c 0%, #fdae61 25%, #ffffbf 50%, #abd9e9 75%, #2c7bb6 100%);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(101, 141, 27, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-webkit-slider-thumb:active { transform: scale(0.95); }
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(101, 141, 27, 0.35);
}
.dark .slider::-webkit-slider-thumb { background: #0f172a; }
.dark .slider::-moz-range-thumb { background: #0f172a; }
/* Thumb border follows the live ramp color at the thumb's position. JS sets
   --thumb-color on the slider element from the same ramp the track draws.
   Placed after the base .slider thumb rules so its border-color wins the
   cascade (specificity is equal; order matters). */
.slider--ramp::-webkit-slider-thumb {
  border-color: var(--thumb-color, var(--accent));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.slider--ramp::-moz-range-thumb {
  border-color: var(--thumb-color, var(--accent));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ---------- Checkboxes (context layers) ---------- */
.layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(15, 23, 42, 0.85);
  transition: background 120ms ease;
}
.dark .layer-row { color: rgba(226, 232, 240, 0.9); }
.layer-row:hover { background: rgba(15, 23, 42, 0.04); }
.dark .layer-row:hover { background: rgba(241, 245, 249, 0.05); }

.layer-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid rgba(15, 23, 42, 0.3);
  background: #ffffff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.dark .layer-row input[type="checkbox"] {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(241, 245, 249, 0.25);
}
.layer-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.layer-row input[type="checkbox"]:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M13.854 3.854a.5.5 0 0 0-.708-.708L6 10.293 2.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l7.5-7.5z'/></svg>");
  background-size: contain;
}

/* Context layers are a radio group - same box, round, with a dot instead of
   a tick, so the panel reads as one control family. */
.layer-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 1.5px solid rgba(15, 23, 42, 0.3);
  background: #ffffff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.dark .layer-row input[type="radio"] {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(241, 245, 249, 0.25);
}
.layer-row input[type="radio"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.layer-row input[type="radio"]:checked::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #ffffff;
}

/* ---------- Legends ---------- */
.legend-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink);
}
.dark .legend-list { color: #e6edf3; }
.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 6px;
  font-size: 11.5px;
  color: rgba(15, 23, 42, 0.78);
}
.dark .legend-item { color: rgba(226, 232, 240, 0.85); }
/* Legend labels wrap instead of truncating, so long category names never
   force the layers panel wider than the viewport. */
.legend-item > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  min-width: 0;
}
.legend-item > .legend-swatch { margin-top: 3px; }
.legend-swatch {
  width: 16px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
  background-clip: padding-box;
}
.dark .legend-swatch { border-color: rgba(255, 255, 255, 0.18); }
.legend-swatch--line {
  width: 18px;
  height: 0;
  border: 0;
  border-top-style: solid;
}
.legend-swatch--ramp {
  width: 100%;
  height: 10px;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.18);
}
.dark .legend-swatch--ramp { border-color: rgba(255, 255, 255, 0.18); }
.legend-ramp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
}
.legend-ramp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.dark .legend-ramp-labels { color: rgba(177, 186, 196, 0.85); }
.legend-block {
  margin: 4px 0 6px 26px;
  padding-left: 8px;
  border-left: 1px solid rgba(15, 23, 42, 0.06);
}
.dark .legend-block { border-left-color: rgba(241, 245, 249, 0.06); }
.legend-block:empty { display: none; }
.layer-row + .legend-block { margin-top: -2px; }

/* ---------- Status / stats chips ---------- */
/* Empty means nothing to say: the chip only shows progress or a failure. */
.status-chip:empty { display: none; }
.status-chip {
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #57606a;
  background: rgba(31, 35, 40, 0.04);
  border: 1px solid rgba(208, 215, 222, 0.9);
}
.dark .status-chip {
  color: #b1bac4;
  background: rgba(22, 27, 34, 0.85);
  border-color: rgba(48, 54, 61, 0.9);
}
.stats-chip {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.55;
  color: #24292f;
  background: rgba(31, 35, 40, 0.03);
  border: 1px solid rgba(208, 215, 222, 0.9);
  font-variant-numeric: tabular-nums;
}
.dark .stats-chip {
  color: #c9d1d9;
  background: rgba(22, 27, 34, 0.85);
  border-color: rgba(48, 54, 61, 0.9);
}
.stats-chip b { color: var(--accent); font-weight: 600; }

/* Table-style summary rows (aligned with mesic-watersheds detail panel) */
.query-stats-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stat-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.dark .stat-section-title { color: rgba(177, 186, 196, 0.85); }
.stat-rows {
  display: grid;
  /* Same reason as .chart-stack: let the tracks shrink with the panel. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  border-radius: 10px;
  border: 1px solid rgba(208, 215, 222, 0.9);
  background: rgba(208, 215, 222, 0.9);
  overflow: hidden;
}
.dark .stat-rows {
  border-color: rgba(48, 54, 61, 0.9);
  background: rgba(48, 54, 61, 0.9);
}
@media (min-width: 640px) {
  .stat-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Avoid a blank grid cell (gap fill) when row count is odd */
  .stat-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.85);
}
.dark .stat-row {
  background: rgba(22, 27, 34, 0.85);
}
.stat-row-label {
  font-weight: 500;
  color: var(--ink-muted);
  font-size: 11.5px;
}
.dark .stat-row-label { color: rgba(177, 186, 196, 0.85); }
.stat-row-value {
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
  text-align: right;
  max-width: 65%;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.dark .stat-row-value { color: #e6edf3; }
.stat-row-value.is-missing {
  font-style: italic;
  font-weight: 500;
  color: rgba(31, 35, 40, 0.45);
  font-size: 11px;
}
.dark .stat-row-value.is-missing { color: rgba(177, 186, 196, 0.5); }
.stat-row-value.stat-row-value--flex {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Compact Shoelace copy control inline with stat-row values. */
.mesic-copy-coords-btn {
  display: inline-block;
  flex-shrink: 0;
  margin: -2px 0;
  --success-color: #547617;
  --error-color: #b42318;
}
.mesic-copy-coords-btn::part(button) {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 6px;
  color: #64748b;
}
.dark .mesic-copy-coords-btn::part(button) {
  color: #94a3b8;
}
.mesic-copy-coords-btn:hover::part(button) {
  color: #0f172a;
}
.dark .mesic-copy-coords-btn:hover::part(button) {
  color: #f1f5f9;
}
.mesic-copy-coords-btn::part(copy-icon),
.mesic-copy-coords-btn::part(success-icon),
.mesic-copy-coords-btn::part(error-icon) {
  width: 14px;
  height: 14px;
}
.mesic-copy-coords-btn::part(tooltip__body) {
  font-size: 11px;
}

/* ---------- Scroll shadow on sidebar ---------- */
.scroll-shadow {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.dark .scroll-shadow {
  scrollbar-color: rgba(241, 245, 249, 0.12) transparent;
}
.scroll-shadow::-webkit-scrollbar { width: 6px; }
.scroll-shadow::-webkit-scrollbar-track { background: transparent; }
.scroll-shadow::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 9999px;
}
.dark .scroll-shadow::-webkit-scrollbar-thumb {
  background: rgba(241, 245, 249, 0.12);
}

/* ---------- Leaflet & Geoman theming ---------- */
.leaflet-container {
  font-family: inherit !important;
}
.leaflet-bar {
  border-radius: 12px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 8px 24px rgba(31, 35, 40, 0.18);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
.leaflet-bar a {
  background: rgba(246, 248, 250, 0.92) !important;
  color: #24292f !important;
  border-color: rgba(208, 215, 222, 0.9) !important;
  transition: background 120ms;
}
.leaflet-bar a:hover { background: rgba(255, 255, 255, 1) !important; }
.dark .leaflet-bar a {
  background: rgba(22, 27, 34, 0.92) !important;
  color: #e6edf3 !important;
  border-color: rgba(48, 54, 61, 0.95) !important;
}
.dark .leaflet-bar a:hover { background: rgba(33, 38, 45, 0.95) !important; }

.leaflet-control-attribution {
  display: none !important; /* we provide our own */
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #24292f !important;
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.18) !important;
  border-radius: 12px !important;
}
.dark .leaflet-popup-content-wrapper,
.dark .leaflet-popup-tip {
  background: rgba(22, 27, 34, 0.95) !important;
  color: #e6edf3 !important;
}

/* Geoman: dark-mode tweaks for the toolbar buttons */
.dark .leaflet-pm-toolbar .leaflet-pm-icon-marker,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-polygon,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-rectangle,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-edit,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-drag,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-delete,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-cut,
.dark .leaflet-pm-toolbar .leaflet-pm-icon-rotate {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

/* Dark mode satellite tiles: subtle desaturation so biome outline pops */
.dark .leaflet-tile {
  filter: brightness(0.86) saturate(0.9);
}

/* Sidebar toggle state: panel visible */
#sidebar.open { transform: translateX(0) !important; }

/* Left offcanvas analysis panel. Slides in from the left. */
.offcanvas {
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}
.offcanvas > * { pointer-events: auto; }
.offcanvas.open { transform: translateX(0); }

/* On mobile the offcanvas is full width; bump z-index over sidebar when open
   so it stacks cleanly. */
@media (max-width: 1023px) {
  .offcanvas { z-index: 1100; }
}

/* ---------- Analysis panel resize handle ----------
   Only where the panel is a side panel. Below the breakpoint it covers the
   whole map, so there is no split to drag. The handle sits half over the
   panel edge and half over the map, which is where a pointer aims for it. */
.analysis-resizer { display: none; }

@media (min-width: 1024px) {
  #analysis[data-resized="true"] { width: var(--analysis-width, 50%); }

  /* Dragged narrow, the header has to give something up or its controls
     overlap: the second brand mark stands down. Driven by data-narrow rather
     than a media query, because what is short of room here is the panel, not
     the screen. */
  #analysis[data-narrow="true"] .analysis-brand-mark--wlfw {
    display: none;
  }

  .analysis-resizer {
    position: absolute;
    top: 0;
    right: -5px;
    display: block;
    width: 11px;
    height: 100%;
    z-index: 5;
    cursor: col-resize;
    /* Chrome for the grip only - the strip itself stays invisible so the panel
       edge does not gain a second border. */
    background: transparent;
    touch-action: none;
  }
  /* The grip: a short vertical bar, centred, that fades up on hover so the
     handle is discoverable without being a permanent piece of furniture. */
  .analysis-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    background: rgba(100, 116, 139, 0.35);
    opacity: 0;
    transition: opacity 140ms, background 140ms;
  }
  .analysis-resizer:hover::after,
  .analysis-resizer:focus-visible::after,
  body.is-resizing-panel .analysis-resizer::after {
    opacity: 1;
    background: #658d1b;
  }
  .analysis-resizer:focus-visible {
    outline: none;
  }
  /* Kill text selection and hover flicker across the whole page mid-drag; the
     pointer leaves the handle long before the panel edge catches up. */
  body.is-resizing-panel {
    cursor: col-resize;
    user-select: none;
  }
  body.is-resizing-panel .maplibregl-canvas { pointer-events: none; }
}

/* ---------- Selection handles / drawn shapes ---------- */
.leaflet-pm-vertex-marker,
.leaflet-pm-middle-marker {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
}

/* ---------- Tier badge (used in print report meta) ---------- */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.06);
  color: #1f2328;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}
.tier-badge-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #94a3b8;
  flex-shrink: 0;
}

/* ---------- Print report ---------- */
@page { size: letter; margin: 0.55in 0.5in 0.6in; }

@media print {
  /* Most of the chrome is hidden — the report body owns the page. */
  body > *:not(#printReport) { display: none !important; }
  body {
    overflow: visible !important;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html, body { height: auto !important; }
  #printReport {
    display: block !important;
    position: static !important;
    width: 100%;
    padding: 0;
    color: #0f172a;
    font-family: 'Montserrat', 'Open Sans', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    line-height: 1.45;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }

  /* ---------- Letterhead ---------- */
  #printReport .report-letterhead {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 2px solid #658d1b;
  }
  #printReport .report-letterhead-mark {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  #printReport .report-letterhead-mark img {
    width: 40px; height: 40px;
    object-fit: contain;
    transform: scale(1.14);
    transform-origin: center;
  }
  #printReport .report-letterhead-copy { flex: 1; min-width: 0; }
  #printReport .report-letterhead-program {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1f2937;
  }
  #printReport .report-letterhead-product {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #658d1b;
    margin-top: 1px;
  }
  #printReport .report-letterhead-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }
  #printReport .report-letterhead-mark--wlfw img {
    transform: none;
  }

  /* ---------- Title block ---------- */
  #printReport .report-title-block { margin-bottom: 14px; }
  #printReport h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: #0f172a;
  }
  #printReport .report-title-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    color: #475569;
  }
  #printReport .tier-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #658d1b;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #printReport .report-id { color: #64748b; }
  #printReport .report-id code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: #1f2937;
  }

  /* ---------- Section primitives ---------- */
  #printReport h2 {
    font-size: 10.5px;
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #658d1b;
  }
  #printReport .report-section { page-break-inside: avoid; }
  #printReport .report-section + .report-section { margin-top: 10px; }
  #printReport .report-summary-grid > .report-section { margin-top: 0; }
  #printReport .report-section-lede {
    font-size: 10px;
    color: #64748b;
    margin: 0 0 8px;
  }

  /* ---------- Map ---------- */
  #printReport .report-section-map { margin-bottom: 14px; }
  #printReport .report-map {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    page-break-inside: avoid;
  }
  #printReport .report-map img { width: 100%; height: auto; display: block; }
  #printReport .report-map-caption {
    font-size: 9.5px;
    color: #64748b;
    font-style: italic;
    margin: 4px 0 0;
  }

  /* ---------- Summary grid ---------- */
  #printReport .report-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 12px;
    margin-bottom: 14px;
  }
  /* Mesic Resources: single details table — let it span. */
  #printReport .report-summary-grid > .report-section:only-child {
    grid-column: 1 / -1;
  }

  /* ---------- Tables ---------- */
  #printReport .report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
  }
  #printReport .report-table th,
  #printReport .report-table td {
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: baseline;
  }
  #printReport .report-table th {
    font-weight: 500;
    color: #475569;
    width: 55%;
  }
  #printReport .report-table td {
    font-weight: 600;
    color: #0f172a;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  #printReport .report-table tr:last-child th,
  #printReport .report-table tr:last-child td { border-bottom: none; }

  /* ---------- Time series ---------- */
  #printReport .report-section-charts {
    page-break-before: always;
    padding-top: 4px;
  }
  #printReport .report-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #printReport .report-chart {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
    page-break-inside: avoid;
  }
  #printReport .report-chart h3 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    color: #475569;
  }
  #printReport img.report-chart-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ---------- Footer ---------- */
  #printReport .report-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    margin-top: 18px;
    padding-top: 8px;
    font-size: 9px;
    color: #94a3b8;
    letter-spacing: 0.02em;
  }
  #printReport .report-footer-brand { font-weight: 600; color: #475569; }
}
#printReport { display: none; }

/* ---------- Upload modal ---------- */
.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.upload-modal[hidden] { display: none; }
.upload-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dark .upload-modal-backdrop { background: rgba(1, 4, 9, 0.65); }
.upload-modal-card {
  position: relative;
  width: 100%;
  max-width: 36rem;
  border-radius: 16px;
  border: 1px solid #d0d7de;
  background: #ffffff;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(31, 35, 40, 0.12),
    0 16px 48px rgba(15, 23, 42, 0.18);
}
.dark .upload-modal-card {
  background: #161b22;
  border-color: #30363d;
  box-shadow:
    0 0 0 1px rgba(48, 54, 61, 0.75),
    0 16px 48px rgba(1, 4, 9, 0.55);
}
.upload-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.upload-modal-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.dark .upload-modal-kicker { color: #89a949; }
.upload-modal-title {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dark .upload-modal-title { color: #e6edf3; }
.upload-modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.upload-modal-close:hover {
  background: #f6f8fa;
  color: var(--ink);
}
.dark .upload-modal-close { color: #8b949e; }
.dark .upload-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e6edf3;
}

.upload-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.upload-tab {
  border-radius: 9999px;
  border: 1px solid #d0d7de;
  background: #ffffff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.upload-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.upload-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(101, 141, 27, 0.25);
}
.upload-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #3f5713;
}
.dark .upload-tab {
  background: #161b22;
  border-color: #30363d;
  color: #e6edf3;
}
.dark .upload-tab:hover {
  border-color: #89a949;
  color: #d2e1aa;
}
.dark .upload-tab.is-active {
  border-color: #89a949;
  background: rgba(137, 169, 73, 0.18);
  color: #d2e1aa;
}

.upload-panels { display: block; }
.upload-panel[hidden] { display: none; }

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px dashed #d0d7de;
  border-radius: 14px;
  background: #f6f8fa;
  padding: 28px 20px;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
}
.dark .upload-dropzone {
  background: rgba(13, 17, 23, 0.55);
  border-color: #30363d;
}
.upload-dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dark .upload-dropzone.is-dragover {
  border-color: #89a949;
  background: rgba(137, 169, 73, 0.16);
}
.upload-dropzone-icon {
  width: 28px;
  height: 28px;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.dark .upload-dropzone-icon { color: #8b949e; }
.upload-dropzone-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.dark .upload-dropzone-title { color: #e6edf3; }
.upload-dropzone-sub {
  margin: 0;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.dark .upload-dropzone-sub { color: #8b949e; }

.upload-browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 2px;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--accent);
  transition: background 150ms ease, transform 120ms ease;
}
.upload-browse:hover { background: #547617; }
.upload-browse:active { transform: scale(0.97); }

.upload-hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-muted);
}
.dark .upload-hint { color: #8b949e; }

.upload-modal-status {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(31, 35, 40, 0.04);
  border: 1px solid rgba(208, 215, 222, 0.9);
  color: var(--ink);
}
.dark .upload-modal-status {
  background: rgba(22, 27, 34, 0.85);
  border-color: rgba(48, 54, 61, 0.9);
  color: #e6edf3;
}
.upload-modal-status.is-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}
.dark .upload-modal-status.is-error {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.45);
  color: #fca5a5;
}
.upload-modal-status.is-success {
  background: rgba(101, 141, 27, 0.10);
  border-color: rgba(101, 141, 27, 0.45);
  color: #3f5713;
}
.dark .upload-modal-status.is-success {
  background: rgba(137, 169, 73, 0.16);
  border-color: rgba(137, 169, 73, 0.45);
  color: #d2e1aa;
}
.upload-modal-status.is-loading {
  background: rgba(31, 35, 40, 0.04);
  color: var(--ink-muted);
}