* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  flex-direction: column;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1d2329;
}
header { padding: 8px 14px; border-bottom: 1px solid #d0d7de; }
h1 { font-size: 18px; margin: 0; }
h2 { font-size: 14px; margin: 14px 0 6px; }
#summary { margin: 2px 0 0; color: #57606a; }
.stale-warning { margin: 6px 0 0; padding: 6px 10px; background: #fff8c5; border: 1px solid #d4a72c; border-radius: 6px; color: #4d2d00; font-weight: 600; }
main { flex: 1; display: flex; min-height: 0; }
#map { flex: 1; min-height: 300px; }
aside { width: 340px; overflow-y: auto; padding: 0 14px 14px; border-left: 1px solid #d0d7de; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 3px 4px; border-bottom: 1px solid #eaeef2; }
td.ok { color: #1a7f37; }
td.stale { color: #9a6700; }
td.missing { color: #cf222e; }
.legend, .attributions { list-style: none; padding: 0; margin: 0; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.attributions li { margin: 3px 0; font-size: 13px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid; }
.swatch.line { border-radius: 0; height: 4px; border-width: 2px 0 0; }
.swatch.dormant { border-style: dashed; background: none !important; }
.swatch.reported { border-style: dotted; opacity: 0.6; }
.note { font-size: 12px; color: #57606a; }
.popup dt { font-weight: 600; }
.popup dd { margin: 0 0 4px; }
@media (max-width: 760px) {
  main { flex-direction: column; }
  #map { flex: none; height: 60vh; }
  aside { width: auto; border-left: 0; }
}