/* Copyright (c) 2026 Goldeneye Technologies LLC. All rights reserved. */
/**************************************************************************/
/********  Map color-scale legend (bottom-left Leaflet control)  **********/
/**************************************************************************/
/* Styles the legend built by static/js/map/legend.js: a collapse header button
   plus a diverging color bar, the shape/size key and a Modern/Traditional
   palette toggle. Tokenized against tokens.css so the Branding refresh retunes
   centrally. The color bar's gradient is set inline from the active palette in
   JS and is intentionally not tokenized (it mirrors the map percent-change
   scale, which lives in color_scale.js). */

.map-legend {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-2);
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  user-select: none;
}

/* Collapse header (P18). A real <button> carrying a VISIBLE "Legend" label plus
   a caret, so the collapsed control still reads as a named control. Full-width
   inside the shrink-to-fit control, so it lines up with the 168px color bar when
   expanded and shrinks to its own text when collapsed. <JAS 2026-08-19> */
.map-legend-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: var(--font-weight-medium);
  padding: 0;
  cursor: pointer;
  text-align: left;
}
/* Flush-element focus clip: the control has only var(--space-2) of padding, so
   the global +2px outline-offset would be clipped by the rounded card edge.
   Same inset pattern as the map toolbar / sort rows. */
.map-legend-collapse-btn:focus-visible {
  outline-offset: -2px;
}
.map-legend-caret {
  flex: none;
  display: block;
  color: var(--color-text-muted);
  transition: transform var(--transition-base);
}
/* Collapsed: caret points right (the content will open downward) and the body
   is hidden. Hidden, never removed — the shape + size rows are the non-color
   decode channels and stay one button press away. */
.map-legend-collapsed .map-legend-caret {
  transform: rotate(-90deg);
}
.map-legend-collapsed .map-legend-body {
  display: none;
}
.map-legend-body {
  margin-top: var(--space-2);
}

.map-legend-bar {
  width: 168px;
  height: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.map-legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
}

/* Shape + size key: the non-color (sign + magnitude) channels. */
.map-legend-key {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text-muted);
}
.map-legend-keyrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.map-legend-keyitem {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.map-legend-sizerow {
  gap: var(--space-1);
}
.map-legend-sizelabel {
  margin-left: var(--space-1);
}
/* Swatch path fills are set inline from the active palette in JS (so the key
   tracks Modern/Traditional); geometry mirrors map/shape_marker.js. */
.map-legend-swatch {
  flex: none;
  display: block;
}

.map-legend-toggle {
  display: flex;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.map-legend-palette-btn {
  flex: 1 1 0;
  border: none;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font: inherit;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.map-legend-palette-btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.map-legend-palette-btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.map-legend-palette-btn + .map-legend-palette-btn {
  border-left: 1px solid var(--color-border-strong);
}
.map-legend-palette-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}
.map-legend-palette-btn.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

/* Sector key (batch-8 A7, atlas mode). One row per sector present: swatch +
   name + count, each an isolate button. The NAME is the decode channel — colour
   alone cannot separate 11 categories for every viewer — so the label is never
   truncated away, and the swatch is aria-hidden because the text says it.
   Capped in height with its own scroll so ~12 rows can never push the control
   off a short viewport (same reasoning as .map-toolbar-scroll). */
.map-legend-sectors {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 40vh;
  overflow-y: auto;
}
.map-legend-sector {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base);
}
.map-legend-sector:hover {
  background: var(--color-bg-hover);
}
/* Latched (this sector is isolated on the map). Decodable without colour: the
   row also carries aria-pressed, and the toast names the count. */
.map-legend-sector.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-medium);
}
/* Flush rows: the global +2px focus offset would be clipped by the neighbour
   above, so inset it — the sort-row / toolbar pattern. */
.map-legend-sector:focus-visible {
  outline-offset: -2px;
}
.map-legend-sector-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.map-legend-sector-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.map-legend-sector-count {
  flex: none;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.map-legend-sector.active .map-legend-sector-count {
  color: inherit;
}
.map-legend-note {
  margin-top: var(--space-2);
  max-width: 180px;
  color: var(--color-text-muted);
}

/* ----------------------------------------- */
/* Mobile viewport (≤ 768 CSS px wide; Lane E / Prompt 4): grow the Modern/
   Traditional palette toggle to the 44px touch-target minimum (WCAG 2.5.5).
   The rest of the legend control keeps its compact desktop metrics.
   <JAS 2026-06-22> */
/* ----------------------------------------- */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .map-legend-palette-btn {
    min-height: 44px;
  }
  /* When collapsed the toggle is the control's ONLY affordance, so it takes the
     same 44px touch minimum as every other mobile control (WCAG 2.5.5). Kept on
     both states so the target doesn't shrink once expanded. <JAS 2026-08-19> */
  .map-legend-collapse-btn {
    min-height: 44px;
    min-width: 44px;
  }
  /* Sector rows are interactive (they isolate a sector), so they take the same
     44px touch minimum. The list keeps its own scroll — on a phone the legend
     defaults to COLLAPSED (P18), so this is only the opened state. */
  .map-legend-sector {
    min-height: 44px;
  }
  .map-legend-sectors {
    max-height: 50vh;
  }
}