/* outreach-states.css — Visual styles for the States tab in the SDR dashboard.
 *
 * Owns the UI shipped 2026-04-27:
 *   • Map drill-in wrapper (single-state zoomed view + "← Back to US")
 *   • State-name label overlaid on the zoomed SVG
 *
 * Companion JS: js/outreach-states.js — sets `stZoomed = true` on a state
 * click, renders only that state's geometry, and reuses these classes.
 *
 * Loaded from outreach.html <head>. Kept separate from the inline <style>
 * block so the monolith doesn't keep growing — extract the rest of the
 * .st-* family next time the file is touched.
 *
 * LABEL: PILOT-READY.
 */

/* Drill-in wrapper: state's geometry zoomed to fill the canvas + floating
   "← Back to US" button + state-name label. */
.st-map-zoomed {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.st-map-zoomed svg {
  width: 100%; height: 100%;
  display: block;
}

/* The back button reuses .st-map-back's existing inline styles for shape +
   typography; we only override placement and contrast for the zoomed view. */
.st-map-zoomed .st-map-back {
  position: absolute; top: 8px; left: 8px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.st-map-zoomed .st-map-back:hover {
  background: rgba(232, 163, 61, 0.85);
  color: #1d1d1f;
}

/* Floating caption beneath the geometry — state name + pipeline summary. */
.st-map-zoomed-label {
  position: absolute; bottom: 8px;
  left: 50%; transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
