/* Components specific to the Annual Grass Invasion Explorer.
   app.css and maplibre.css carry the shared design system; everything here is
   new UI this app needs and the mesic apps don't have. */

/* ---------------------------------------------------------------------------
   Area collection selector (header, left)
   Three-way segmented control over the zonal collections. Sits where the title
   pill used to, so it keeps the same left margin clearing the zoom control.
   --------------------------------------------------------------------------- */

.collection-selector {
  display: flex;
  align-items: stretch;
  padding: 0.2rem;
  gap: 0.1rem;
  min-width: 0;
}

/* Each collection is one pill; clicking it toggles that layer on the map. */
.collection-item {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.collection-item:hover { background: rgb(255 255 255 / 0.55); }
.dark .collection-item:hover { background: rgb(255 255 255 / 0.07); }
.collection-item.is-active {
  background: rgb(255 255 255 / 0.86);
  border-color: rgb(15 23 42 / 0.1);
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.12), inset 0 -2px var(--collection-accent);
}
.dark .collection-item.is-active {
  background: rgb(255 255 255 / 0.11);
  border-color: rgb(255 255 255 / 0.13);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), inset 0 -2px var(--collection-accent);
}
.collection-item.is-active .collection-btn { color: rgb(15 23 42); }
.dark .collection-item.is-active .collection-btn { color: white; }

/* The search button. Its own glass pill beside the selector, because it opens
   one modal over every collection and over places - it belongs to none of the
   three. Sized to match the selector's height so the header reads as one row. */
.collection-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0.6rem;
  border: 0;
  color: rgb(51 65 85);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.dark .collection-search-btn { color: rgb(203 213 225); }
.collection-search-btn svg { height: 1.05rem; width: 1.05rem; }
.collection-search-btn:hover { color: rgb(101 141 27); }
.dark .collection-search-btn:hover { color: rgb(154 190 85); }
.collection-search-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(101 141 27 / 0.25);
}

.collection-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: rgb(51 65 85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.dark .collection-btn { color: rgb(203 213 225); }
.collection-btn:disabled { opacity: 0.45; cursor: default; }
.collection-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(101 141 27 / 0.25);
}

.collection-btn-short { display: none; }

/* Narrow viewports: the header also carries the Layers pill, so drop to the
   short labels and hide the selector entirely while the
   Layers panel is open. All three buttons still have to fit beside the pill. */
@media (max-width: 639px) {
  .collection-btn-full { display: none; }
  .collection-btn-short { display: inline; }
  .collection-btn {
    padding: 0.3rem 0.4rem;
    font-size: 10.5px;
  }
  .collection-search-btn { padding: 0.45rem; }
  header:has(#layersControl[open]) .collection-bar { display: none; }
}

/* Pixel filters below the zoom threshold: still set, not yet applied. Dimmed
   rather than hidden, so the sliders a user left somewhere are still visible
   at the position they were left in. */
.filter-zoom-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  background: rgb(234 179 8 / 0.12);
  color: rgb(133 77 14);
  font-size: 10.5px;
  line-height: 1.45;
}
.dark .filter-zoom-note { background: rgb(234 179 8 / 0.14); color: rgb(250 204 21); }
.filter-zoom-note svg { height: 13px; width: 13px; flex: none; margin-top: 1px; }
.filter-details.is-zoom-gated .range-field,
.filter-details.is-zoom-gated .aspect-grid,
.filter-details.is-zoom-gated .filter-reset,
.filter-details.is-zoom-gated .filter-body > .layer-note {
  opacity: 0.45;
}
.filter-badge.is-idle { opacity: 0.45; }

.layer-note {
  margin: 0.4rem 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgb(100 116 139);
}
.dark .layer-note { color: rgb(148 163 184); }
/* The compare map only carries ISI/IAG, so context layers sit out a comparison. */
.layer-section.is-disabled .layer-row,
.layer-section.is-disabled #contextOpacityWrap { opacity: 0.45; pointer-events: none; }

/* ---------------------------------------------------------------------------
   Year slider (drives IAG cover and the ISI together)
   --------------------------------------------------------------------------- */

/* Inset 10px a side so the end labels ('18, Avg), which hang past the thumb,
   clear the panel edge. */
.year-slider { display: block; width: calc(100% - 20px); margin: 0.15rem auto 0; }
/* One label per stop, spread so each sits under its stop: the thumb's centre
   travels from half a thumb in from the left edge to half a thumb in from the
   right, so the row is inset by the same amount. */
.year-ticks {
  display: flex;
  justify-content: space-between;
  margin: 0.35rem 8px 0;
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgb(100 116 139);
}
.year-ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.year-ticks span.is-active { color: #547617; }
.dark .year-ticks { color: rgb(148 163 184); }
.dark .year-ticks span.is-active { color: #89a949; }

/* ---------------------------------------------------------------------------
   % IAG cover
   --------------------------------------------------------------------------- */

#iagControls .panel-label, #isiControls .panel-label { margin-top: 12px; }

/* The selected fire's overlay, tucked under the context radios. */
.burned-block { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   Filters
   --------------------------------------------------------------------------- */

.filter-details { padding-bottom: 0.25rem; }
.filter-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.filter-summary::-webkit-details-marker { display: none; }
.filter-summary .layer-section-title { flex: 1; margin: 0; }
.filter-summary .chevron { transition: transform 0.2s; opacity: 0.55; }
.filter-details[open] .filter-summary .chevron { transform: rotate(180deg); }

.filter-badge {
  min-width: 1.1rem;
  text-align: center;
  border-radius: 999px;
  background: #658d1b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0.05rem 0.3rem;
}
.dark .filter-badge { background: #89a949; color: #0d1117; }

.filter-body { padding-top: 0.35rem; }

.range-field { margin-bottom: 0.9rem; }
/* Breathing room between the intro text (or the zoom note) and the first filter. */
.filter-body > p + .range-field { margin-top: 0.85rem; }

/* Two sliders stacked in the same grid cell, one per handle.
 *
 * Neither input paints its own track: an <input type=range> can only fill from
 * its own end, and a two-handle control has to fill the band *between* the
 * handles. So the track is drawn by the wrapper - ::before is the full rail,
 * ::after is the selected band between --lo and --hi, both set from JS. The
 * inputs themselves sit transparently on top purely to carry the thumbs. */
.range-pair {
  display: grid;
  align-items: center;
  position: relative;
  height: 1.5rem;
  margin-top: 0.15rem;
}
.range-pair::before,
.range-pair::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 9999px;
  transform: translateY(-50%);
  pointer-events: none;
}
.range-pair::before {
  left: 0;
  right: 0;
  background: rgba(15, 23, 42, 0.08);
}
.dark .range-pair::before { background: rgba(241, 245, 249, 0.08); }
/* The selected band. Insetting by half a thumb keeps the fill under the two
   handles rather than running out past them at the extremes. */
.range-pair::after {
  left: calc(9px + (100% - 18px) * var(--lo-frac, 0));
  width: calc((100% - 18px) * (var(--hi-frac, 1) - var(--lo-frac, 0)));
  background: var(--accent);
}
.range-pair input[type="range"] {
  grid-area: 1 / 1;
  width: 100%;
  height: 6px;
  margin: 0;
  background: none;
  pointer-events: none;
  z-index: 1;
}
/* Both native tracks are hidden - the wrapper draws the rail. */
.range-pair input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.range-pair input[type="range"]::-moz-range-track { background: transparent; }
.range-pair input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.range-pair input[type="range"]::-moz-range-thumb { pointer-events: auto; }
/* JS marks whichever handle the pointer is nearest. That handle comes to the
   front and takes clicks across the whole rail, so the two thumbs stay
   independently grabbable even when they sit on top of each other, and a click
   anywhere on the rail moves the nearer one. */
.range-pair input[type="range"].is-front {
  z-index: 2;
  pointer-events: auto;
}

.aspect-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
  margin: 0.15rem 0 0.6rem;
}
.aspect-btn {
  appearance: none;
  border: 1px solid rgb(15 23 42 / 0.1);
  background: rgb(255 255 255 / 0.6);
  color: rgb(51 65 85);
  border-radius: 0.5rem;
  padding: 0.28rem 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.aspect-btn.is-active { background: #658d1b; border-color: #658d1b; color: #fff; }
.dark .aspect-btn {
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.05);
  color: rgb(203 213 225);
}
.dark .aspect-btn.is-active { background: #89a949; border-color: #89a949; color: #0d1117; }

.filter-reset {
  width: 100%;
  margin-top: 0.2rem;
  border: 1px solid rgb(15 23 42 / 0.1);
  background: transparent;
  border-radius: 0.55rem;
  padding: 0.3rem;
  font-size: 11px;
  font-weight: 600;
  color: rgb(71 85 105);
  cursor: pointer;
}
.filter-reset:hover { background: rgb(15 23 42 / 0.04); }
.dark .filter-reset { border-color: rgb(255 255 255 / 0.12); color: rgb(148 163 184); }
.dark .filter-reset:hover { background: rgb(255 255 255 / 0.06); }

/* ---------------------------------------------------------------------------
   Areas browser
   --------------------------------------------------------------------------- */

.areas-card { max-width: 34rem; }

.areas-filters {
  display: flex;
  gap: 0.4rem;
  padding: 0.25rem 0 0.5rem;
  flex-wrap: wrap;
}
.areas-search { flex: 1 1 12rem; }

.areas-select {
  appearance: none;
  border: 1px solid rgb(15 23 42 / 0.12);
  background: rgb(255 255 255 / 0.75);
  border-radius: 0.6rem;
  padding: 0.35rem 0.55rem;
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(51 65 85);
  cursor: pointer;
  max-width: 9rem;
}
.dark .areas-select {
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.06);
  color: rgb(203 213 225);
}

.areas-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22rem;
  overflow-y: auto;
  border-top: 1px solid rgb(15 23 42 / 0.07);
}
.dark .areas-results { border-color: rgb(255 255 255 / 0.07); }

.areas-result {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 12px;
}
.areas-result:hover { background: rgb(15 23 42 / 0.05); }
.dark .areas-result:hover { background: rgb(255 255 255 / 0.07); }
.areas-result-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.areas-result.is-note { cursor: default; }
.areas-result.is-note:hover { background: transparent; }
.areas-result-meta {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10.5px;
  color: rgb(100 116 139);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dark .areas-result-meta { color: rgb(148 163 184); }

.areas-count {
  margin: 0.4rem 0 0;
  font-size: 10.5px;
  color: rgb(100 116 139);
}
.dark .areas-count { color: rgb(148 163 184); }

/* ---------------------------------------------------------------------------
   Analysis panel additions
   --------------------------------------------------------------------------- */

.chart-sub {
  margin: -0.15rem 0 0.35rem;
  font-size: 10.5px;
  color: rgb(100 116 139);
}
.dark .chart-sub { color: rgb(148 163 184); }

/* Elevation range: a strip across the filter's full span, the site's range
   highlighted, median ticked, values tiled underneath. */
.elev-range { padding: 14px 14px 12px; }
.elev-strip-wrap { padding-top: 24px; }
.elev-strip {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgb(15 23 42 / 0.08);
}
.dark .elev-strip { background: rgb(255 255 255 / 0.1); }
.elev-strip-range {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 4px;
  border-radius: 5px;
  background: #4d97d4;
}
.elev-strip-median {
  position: absolute;
  top: -6px;
  width: 3px;
  height: 22px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
}
.elev-strip-median-label {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #4f7015;
}
.dark .elev-strip-median-label { color: #8fbf3a; }
.elev-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--ink-muted);
}
.elev-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.elev-tile {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgb(15 23 42 / 0.05);
}
.dark .elev-tile { background: rgba(22, 27, 34, 0.9); }
.elev-tile-label { font-size: 10px; color: var(--ink-muted); }
.elev-tile-value {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.elev-tile-value small { font-size: 10px; font-weight: 400; margin-left: 2px; color: var(--ink-muted); }
.elev-tile-value.is-median { color: #4f7015; }
.dark .elev-tile-value.is-median { color: #8fbf3a; }

.ownership-bar {
  display: flex;
  height: 1.4rem;
  border-radius: 0.45rem;
  overflow: hidden;
  margin: 0.2rem 0 0.55rem;
  background: rgb(15 23 42 / 0.06);
}
.dark .ownership-bar { background: rgb(255 255 255 / 0.08); }
.ownership-seg {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Severity class and cover bands, coloured to match the charts. */
.isi-chip { font-weight: 600; white-space: nowrap; }
.isi-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   Year comparison swipe
   --------------------------------------------------------------------------- */

/* The comparison map: a second, non-interactive map over the main one,
   clipped to the right of the divider. Inside #map, ahead of the controls. */
.compare-map {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Full-height strip positioned by --x (px from the left of the viewport).
   Sits under the header, toolbar and analysis panel, over the map. */
.compare-swipe {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 0;
  z-index: 1000;
  pointer-events: none;
}
.compare-swipe[hidden] { display: none; }
/* Too tight for a swipe on a phone. */
@media (max-width: 639px) {
  #compareBtn, .compare-swipe, .compare-picker { display: none !important; }
}
.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.35), 0 0 8px rgb(15 23 42 / 0.35);
}
.compare-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 2px solid #fff;
  background: #658d1b;
  color: #fff;
  box-shadow: 0 2px 10px rgb(15 23 42 / 0.45);
  cursor: ew-resize;
  pointer-events: auto;
  touch-action: none;
}
.compare-handle svg { width: 20px; height: 20px; }
.compare-handle:focus-visible { outline: 3px solid rgb(101 141 27 / 0.5); outline-offset: 2px; }

/* Year labels either side of the divider, just under the header. */
.compare-tag {
  position: absolute;
  top: 76px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.compare-tag--left { right: 10px; }

/* The picker: centred on its own before a year is chosen, then docked just
   right of the divider as the right-hand year's label. */
.compare-picker {
  position: fixed;
  top: 76px;
  left: var(--x, 50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  transform: translateX(-50%);
}
.compare-picker.is-docked { transform: translateX(10px); }
.compare-picker[hidden] { display: none; }
.compare-picker-label { font-weight: 500; color: rgb(71 85 105); white-space: nowrap; }
.dark .compare-picker-label { color: rgb(148 163 184); }
.compare-picker.is-docked .compare-picker-label { display: none; }
.compare-select {
  appearance: auto;
  border: 1px solid rgb(15 23 42 / 0.15);
  border-radius: 7px;
  background: rgb(255 255 255 / 0.85);
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
}
.dark .compare-select { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.15); }
.compare-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: rgb(100 116 139);
}
.compare-close:hover { background: rgb(15 23 42 / 0.08); color: rgb(15 23 42); }
.dark .compare-close:hover { background: rgb(255 255 255 / 0.1); color: #e6edf3; }
.compare-close svg { width: 14px; height: 14px; }

/* When the filters go with the ISI, drop the divider that would follow them. */
#filtersSection[hidden] + .layer-section-divider { display: none; }