/* Panel of the measured surface-temperature layer (web/js/hazards.js). It sits next to the map legend rather than
   inside it, because it carries its own provenance: acquisition date and time, sensor, cloud cover and the caveats. */
.lst-panel {
  position: absolute;
  right: var(--map-right, 12px);
  top: var(--map-top, 104px);
  width: min(300px, calc(100% - 24px));
  max-height: calc(100dvh - var(--map-top, 104px) - var(--map-bottom, 28px) - 24px);
  overflow: auto;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  font-size: 12px;
  color: var(--ink);
  z-index: 5;
}

.lst-head { font-weight: 700; margin-bottom: 6px; }
.lst-select { width: 100%; margin: 4px 0 8px; font-size: 12px; }
.lst-ramp { height: 10px; border-radius: 5px; }
.lst-ends { display: flex; justify-content: space-between; color: var(--muted); margin: 3px 0 4px; }
.lst-dim { color: var(--muted); font-size: 11px; line-height: 1.35; }
.lst-facts { margin: 8px 0; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-2); }
.lst-stats { margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.lst-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lst-row-label { color: var(--ink-2); }
.lst-diff { margin-top: 2px; font-weight: 600; }
.lst-caveat { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.35; color: var(--ink-2); }
.lst-warn { color: var(--ink); background: #fff4e5; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; line-height: 1.35; }

@media (max-width: 900px) {
  .lst-panel { right: 12px; left: 12px; width: auto; max-height: 45dvh; }
}

/* Panel of the official urban climate analyses (web/js/hazards.js). It shares the layout of the surface-temperature
   panel because it answers the same kind of question, and adds the class distribution bars and the scenario notice. */
.sk-sub { font-weight: 600; margin: 8px 0 4px; }
.sk-swatch { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; border: 1px solid rgba(0, 0, 0, .15); }
.sk-bars { display: flex; flex-direction: column; gap: 3px; }
.sk-bar-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sk-bar-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sk-bar-track { flex: 0 0 52px; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.sk-bar-fill { display: block; height: 100%; }
.sk-bar-value { flex: 0 0 42px; text-align: right; font-variant-numeric: tabular-nums; }
/* The scenario notice is deliberately loud: without it the PET map next to a green scenario reads as if the greening
   were already in it. It is not, and the tool's own cooling band is a different quantity from a different method. */
.sk-scenario { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: #fff4e5; border-left: 3px solid #e08a1e; font-size: 11px; line-height: 1.35; }