/* Piedmont Triad Injury & Violence Map — layout & panels */

:root {
  --panel-bg: rgba(255, 255, 255, 0.96);
  --border: #d7dce1;
  --ink: #1f2937;
  --muted: #6b7280;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--ink); }
#map { position: absolute; inset: 0; }

/* --- Title / caption box (top-left) --- */
#title-box {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  max-width: 320px; padding: 12px 16px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
#title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; }
#subtitle { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* --- Generic panel --- */
.panel {
  position: absolute; z-index: 2;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  padding: 12px 14px; font-size: 13px;
}

/* --- Controls (top-right) --- */
#controls { top: 14px; right: 14px; width: 190px; }
#controls .ctrl { display: block; margin-bottom: 10px; }
#controls .ctrl:last-child { margin-bottom: 0; }
#controls span { display: block; font-weight: 600; margin-bottom: 4px; }
#controls select { width: 100%; padding: 5px; border: 1px solid var(--border); border-radius: 5px; }
#controls fieldset { border: none; padding: 0; margin: 0; }
#controls legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
#controls fieldset label { display: block; font-weight: 400; margin: 4px 0; cursor: pointer; }

/* --- Legends (bottom-left; only one visible at a time) --- */
#legend, #legend-context { bottom: 28px; left: 14px; min-width: 170px; }
.lg-title { font-weight: 700; margin-bottom: 8px; }
.lg-row { display: flex; align-items: center; margin: 3px 0; }
.sw { width: 16px; height: 16px; border-radius: 3px; margin-right: 8px; border: 1px solid rgba(0,0,0,.15); }
.lg-foot { margin-top: 8px; font-size: 11px; color: var(--muted); }

/* --- City labels (HTML markers) --- */
.city-label {
  font-size: 12px; font-weight: 700; color: #333;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
  white-space: nowrap; pointer-events: none;
}

/* --- Popup --- */
.maplibregl-popup-content { font-family: var(--font); padding: 12px 14px; }
.maplibregl-popup-content h3 { margin: 0 0 6px; font-size: 14px; }
.popup-tbl { border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.popup-tbl td, .popup-tbl th { padding: 2px 10px 2px 0; text-align: left; }
.popup-tbl th:last-child, .popup-tbl td:last-child { text-align: right; color: var(--muted); }
.pop-sec { margin: 8px 0 2px; font-size: 10px; font-weight: 700; text-transform: uppercase;
           letter-spacing: .03em; color: var(--muted); }

/* --- Responsive: stack panels on narrow screens --- */
@media (max-width: 640px) {
  #title-box, #controls { max-width: 44%; width: auto; }
  #controls { width: 150px; }
}