#map-explanation { font-size:.85rem; color:#52617a; }
#region-map { width:min(70rem,calc(100% - 1rem)); max-height:94dvh; overflow:auto; padding:.7rem; border:1px solid #cbd9ec; border-radius:.8rem; }
#region-map::backdrop { background:#123b8380; }
.map-tools { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }
.map-tools label { flex:1; min-width:120px; }
.map-tools select { display:block; width:100%; min-height:44px; padding:.4rem; font-size:.875rem; border:1px solid #cbd9ec; border-radius:.4rem; background:white; color:#123b83; }
.map-layout { display:grid; gap:.6rem; }
#region-canvas { height:clamp(230px,38dvh,420px); background:#edf3fc; border-radius:.5rem; }
.leaflet-marker-icon.leaflet-interactive.map-region-count { display:grid; place-items:center; pointer-events:none; }
.map-region-count span {
  pointer-events:auto; min-width:1.2rem; padding:0 .22rem; border-radius:1rem; border:1px solid #8aa5c6;
  background:#fff; color:#123b83; font-weight:700; font-size:.72rem; text-align:center;
}
.map-item { display:flex; gap:.6rem; padding:.6rem 0; border-bottom:1px solid #cbd9ec; }
.map-item img { width:85px; height:75px; object-fit:cover; border-radius:.4rem; }
.map-item h3 { font-size:.95rem; }
.map-item a { display:inline-flex; min-height:44px; align-items:center; padding:.4rem .6rem; color:#123b83; border:1px solid #cbd9ec; border-radius:.4rem; text-decoration:none; }
#map-results { max-height:40dvh; overflow:auto; }
#map-status { font-size:.8rem; }
@media(min-width:800px) { .map-layout { grid-template-columns:3fr 2fr; } #region-canvas { height:55dvh; } #map-results { max-height:55dvh; } }