/**
 * Pollutant legend. The bracket/pill row markup (.legendRow, .legendPill,
 * .legendBracket + Top/Mid/Bot/Only, .legendCatLabel, .legendRangeBg …) is
 * generated by ui_legend.js's _createLegendRow/_makeBracketHtml/_pillInner
 * Shadow — a considered piece of work (proportional-width breakpoint bars,
 * color-matched glow, double-rAF crossfade on value change, a drawn bracket
 * that groups same-category rows under one centered label). That JS is NOT
 * touched by this redesign; every class below is restyling, not restructuring.
 */

.legendPanel {
  position: absolute;
  top: 68px;
  right: var(--space-3);
  z-index: var(--z-panel-toggle);
  width: 290px;
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  transition: transform var(--ease-standard), opacity var(--ease-standard);
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.legendPanel.hidden {
  transform: translateX(16px);
  opacity: 0;
  pointer-events: none;
}

.legendPanel.legend--collapsed .legendNameRow,
.legendPanel.legend--collapsed .legendUnit,
.legendPanel.legend--collapsed .legendBody,
.legendPanel.legend--collapsed .legendFooter {
  display: none;
}
.legendPanel.legend--collapsed .legendHeader {
  border-bottom: none;
}
.legendPanel.legend--collapsed .legendTab {
  filter: none !important;
  transition: color var(--ease-emphasized), opacity var(--ease-standard);
}
.legendPanel.legend--collapsed:has(.legendTab.active) .legendTab.tab-dim {
  opacity: 0.5;
}
.legendPanel.legend--collapsed:has(.legendTab.active) .legendTab.auto-active {
  opacity: 0.8;
}
.legendPanel.legend--collapsed .legendTab.active {
  opacity: 1;
}

.legendCollapseBtn {
  width: 26px;
  height: 30px;
  border: none;
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--ease-standard), color var(--ease-standard);
}
.legendCollapseBtn:hover { opacity: 1; color: var(--ink-100); }
.legendCollapseBtn svg { transition: transform var(--ease-standard); }

.legendHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-2) var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}

.legendTabs { display: flex; gap: 2px; }

.legendTab {
  position: relative;
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  cursor: pointer;
  filter: brightness(0.5) saturate(0.35);
  transition: background var(--ease-standard), border-color var(--ease-standard),
              filter var(--ease-standard), opacity var(--ease-standard);
}
.legendTab:hover { background: var(--ink-800); filter: brightness(0.75) saturate(0.6); }
.legendTab sub { font-size: 0.72em; vertical-align: baseline; position: relative; top: 0.2em; }
.legendTab.active {
  background: var(--ink-800);
  border-color: var(--hairline-strong);
  filter: none;
}
/* Underline reads clearer than the old brightness-only active state, at a
   glance, from across a room ("far away" per the design brief). */
.legendTab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.legendTab.auto-active { filter: brightness(0.8) saturate(0.65); }
.legendTab.tab-dim { filter: brightness(0.32) saturate(0.25); }

.legendNameRow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--ink-500);
  letter-spacing: 0.02em;
  padding: var(--space-2) var(--space-3) 0 var(--space-2);
  text-align: right;
  margin-right: 14px;
}
.legendUnit {
  font-size: var(--text-2xs);
  color: var(--ink-500);
  padding: 2px var(--space-3) 0 0;
  text-align: center;
  letter-spacing: 0.02em;
  margin-left: -55px;
}
.legendFooter {
  font-size: 10px;
  color: var(--ink-500);
  padding: 6px var(--space-3) var(--space-2);
  text-align: center;
  letter-spacing: 0.01em;
  border-top: 1px solid var(--hairline);
}

.legendBody {
  padding: var(--space-2) var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.legendRow {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0;
  transition: max-height var(--ease-standard), opacity var(--ease-standard);
  overflow: hidden;
  max-height: 24px;
}
.legendRow.entering { max-height: 0; opacity: 0; }
.legendRow.leaving  { max-height: 0; opacity: 0; pointer-events: none; }

.legendLeftZone {
  position: relative;
  width: 60px;
  flex-shrink: 0;
  height: 18px;
  overflow: visible;
  transition: filter var(--ease-standard);
}
.legendPill {
  position: absolute;
  left: 0;
  top: 1px;
  height: 16px;
  min-width: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid oklch(0% 0 0 / 0.35);
  box-shadow: 0 0 0 1px oklch(94% 0.004 262 / 0.08) inset;
  transition: width var(--ease-spring), background-color var(--ease-standard),
              border-color var(--ease-standard), box-shadow var(--ease-standard);
}
.legendRow--dim .legendLeftZone { filter: brightness(0.2) saturate(0.5); }

.legendRange { transition: opacity var(--ease-standard); }
.legendBracket { transition: opacity var(--ease-standard); }
.legendCatLabel { transition: opacity var(--ease-standard); }
.legend-no-transition .legendPill,
.legend-no-transition .legendLeftZone,
.legend-no-transition .legendRow,
.legend-no-transition .legendRange,
.legend-no-transition .legendBracket,
.legend-no-transition .legendCatLabel { transition: none !important; }

.legendRange {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-1);
}
.legendRangeBg {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  color: var(--ink-100);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  text-shadow: 0 0 4px var(--ink-950), 0 0 2px var(--ink-950);
}
.legendLo { display: inline-block; min-width: 22px; text-align: left; }
.legendDash { display: inline-block; width: 14px; text-align: center; color: var(--ink-600); }
.legendHi { display: inline-block; min-width: 22px; text-align: right; }

.legendBracket,
.legendBracketTop,
.legendBracketMid,
.legendBracketBot,
.legendBracketOnly {
  position: relative;
  z-index: 1;
  width: 112px;
  flex-shrink: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: var(--space-2);
}
.legendBracketTop::before,
.legendBracketMid::before,
.legendBracketBot::before {
  content: "";
  position: absolute;
  left: 6px;
  width: 1px;
  background: var(--ink-700);
}
.legendBracketTop::before { top: 50%; bottom: 0; }
.legendBracketMid::before { top: 0; bottom: 0; }
.legendBracketBot::before { top: 0; bottom: 50%; }
.legendBracketTop::after,
.legendBracketBot::after,
.legendBracketOnly::after {
  content: "";
  position: absolute;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--ink-700);
  top: 50%;
}
.legendCatLabel {
  font-size: 10px;
  color: var(--ink-100);
  white-space: nowrap;
  text-align: right;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-medium);
  padding-right: 2px;
  text-shadow: 0 0 4px var(--ink-950), 0 0 2px var(--ink-950);
}

.legendToggleBtn {
  position: absolute;
  top: 68px;
  right: var(--space-3);
  z-index: var(--z-camera-btn);
  width: 34px;
  height: 34px;
  border: 1px solid var(--hairline);
  background: var(--ink-900);
  color: var(--ink-500);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease-standard), opacity var(--ease-standard), border-color var(--ease-standard);
  opacity: 1;
}
.legendToggleBtn:hover { background: var(--ink-800); border-color: var(--hairline-strong); }
.legendToggleBtn.hidden { opacity: 0; pointer-events: none; }
/* #legendToggle and #legend occupy the same top-right corner by design (the
   toggle button is what reopens a closed panel) — JS only ever toggles
   .active on the button, never .hidden, so without this the button's higher
   z-index paints it over the open panel's header. CSS-only fix, no JS touched. */
#legend:not(.hidden) ~ #legendToggle {
  opacity: 0;
  pointer-events: none;
}

.legendToggleBtn.pbLegendBtn {
  position: static;
  z-index: auto;
  background: none;
  border-color: transparent;
  width: auto;
  height: auto;
  padding: 4px 6px;
  color: var(--ink-500);
}
.legendToggleBtn.pbLegendBtn:hover { color: var(--ink-100); border-color: var(--hairline-strong); }
.legendToggleBtn.pbLegendBtn.active {
  background: var(--accent-live-dim);
  border-color: var(--accent-live-line);
  box-shadow: 0 0 8px var(--accent-live-line);
}
.legendToggleBtn.pbLegendBtn.active rect { opacity: 1; }
.legendToggleBtn.pbLegendBtn.hidden { display: none; }