/* ---------------------------------------------------------------------------
   Exposure overlays (public/js/exposure-overlay.js) -- the wildness / sightshed /
   soundshed heatmaps and their legends. Shared by every map surface that offers
   the overlays (home explore map + the server-rendered hike/trailhead/city pages).

   .map-corner is the shared bottom-right stack: this overlay's legend and the
   weather radar pill drop into it so they line up instead of overlapping, kept
   clear of the top toolbar's Overlays button and sitting above the attribution.
   --------------------------------------------------------------------------- */

/* Hover readouts: the raw value under the cursor, shown only while hovering. The stack sits inside
   Leaflet's top-right control corner; controls there are floats, so clear:both drops the readouts
   BELOW the layers/Overlays control however tall it currently is (collapsed or expanded). If more
   than one sense is on, the pills line up. */
.map-readouts {
  clear: both;
  float: right;
  margin: 6px 10px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.exposure-readout {
  background: rgba(28, 28, 30, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 5px 10px;
  color: #fff;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

.exposure-readout-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1px;
}

.map-corner {
  position: absolute;
  bottom: 24px;
  right: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none; /* let map gestures pass through the gaps; children re-enable as needed */
}

.exposure-legend {
  background: rgba(28, 28, 30, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .9);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.3;
  min-width: 108px;
}

.exposure-legend-title {
  font-weight: 600;
  margin-bottom: 5px;
}

.exposure-legend-bar {
  height: 8px;
  border-radius: 4px;
  /* a faint checker so the transparent (low) end reads as "see-through", not black */
  background-color: rgba(255, 255, 255, .12);
}

.exposure-legend-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}

.exposure-legend-note {
  color: rgba(255, 255, 255, .5);
  font-size: 10px;
}
/* The note div is always rendered (so any mode can explain an empty field), so the gap belongs
   to a note that HAS text -- an empty one must not leave a 3px ledge under the scale. */
.exposure-legend-note:not(:empty) {
  margin-top: 3px;
}