.map-panel { margin-top: 18px; padding: 22px; }
.map-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.map-header .section-heading { justify-content: flex-start; }
.map-header h2 { font-size: 20px; }
.map-header .footnote { font-size: 10px; margin-top: 7px; }
.map-toolbar { display: flex; align-items: center; gap: 10px; }
.map-toolbar label { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 650; color: #68768c; }
.map-toolbar select { width: 155px; height: 38px; margin: 0; font-size: 12px; }
.map-reset { height: 38px; padding: 0 13px; background: #f1f5fc; color: #466799; border: 1px solid #dfe7f4; border-radius: 8px; font-size: 11px; white-space: nowrap; }
.map-reset:hover { background: #e5edfc; }
.map-layout { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 20px; align-items: start; }
.map-visual { min-width: 0; }
.district-map { height: clamp(380px,45vh,500px); width: 100%; z-index: 0; border: 1px solid #dfe5ef; border-radius: 12px; background: #f1f3f7; font-family: var(--font-sans); }
.district-map .leaflet-control-zoom a { font-family: inherit; }
/* Soften only the OSM raster tiles; choropleth, district labels and controls retain their colors. */
.district-map .leaflet-tile-pane { filter: grayscale(1) contrast(.72) brightness(1.16); }
.district-label { background: none; border: none; box-shadow: none; color: #334155; font-size: 11px; font-weight: 750; text-shadow: -1px -1px 1px #fff,1px 1px 1px #fff,0 0 4px #fff; padding: 0; pointer-events: none; }
.district-label:before { display: none; }
.district-popup { font-family: inherit; font-size: 12px; line-height: 1.6; }
.district-popup strong { font-size: 15px; }
.district-popup p { margin: 6px 0; }
.district-map .leaflet-interactive:focus { outline: none; stroke: #303630; stroke-width: 4; }
.map-sidebar { padding: 22px 18px; background: #f7f9fd; border: 1px solid #e5eaf4; border-radius: 12px; }
.map-sidebar>.eyebrow { font-size: 10px; color: #667e9f; letter-spacing: .06em; }
.map-legend { margin: 20px 0; }
.map-legend-title { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin: 0 0 13px; }
.map-legend-title>span { font-size: 10px; font-weight: 500; color: #71829d; }
.map-legend-scale { height: 10px; background: linear-gradient(to right,#ffffb2,#fd8d3c,#bd0026); border-radius: 4px; }
.map-legend-scale.single-value { background: #fd8d3c; }
.map-legend-values { display: flex; justify-content: space-between; gap: 3px; font-size: 9.5px; margin-top: 8px; color: #65748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.map-scale-direction { display: flex; justify-content: space-between; font-size: 9px; color: #7e8da5; margin: 5px 0 0; }
.map-no-value { font-size: 10px; color: #68768c; line-height: 1.7; margin: 13px 0 0; }
.map-no-value:before { content: ''; display: inline-block; width: 12px; height: 8px; background: #d5d8d2; border: 1px solid #c1c4bf; border-radius: 2px; margin-right: 5px; }
.map-sidebar .chart-count { border-top: 1px solid #e1e8f3; padding-top: 16px; margin: 0; font-size: 13px; color: #365c9b; }
.map-sidebar .metric-definition { font-size: 11px; color: #68768c; margin: 7px 0 17px; }
.map-scope { border-top: 1px solid #e1e8f3; padding-top: 14px; }
.map-selection { font-size: 11px; line-height: 1.8; color: var(--region-a); font-weight: 650; margin: 0; }
.map-scope .footnote { font-size: 11px; margin-top: 6px; }
.map-hint { font-size: 10px; color: #68768c; margin: 17px 0 0; line-height: 1.8; }
.map-notes { border-top: 1px solid #e1e8f3; padding-top: 13px; margin-top: 16px; font-size: 11px; line-height: 1.8; color: #68768c; }
.map-notes summary { font-weight: 650; color: #5b7193; }
.map-notes p { margin: 10px 0 0; }
.map-basemap-error { padding: 10px 13px; margin-bottom: 12px; background: #fff7e7; border: 1px solid #ecdfc1; border-radius: 9px; font-size: 11px; line-height: 1.8; }
.map-basemap-error button { background: none; border: none; color: #916331; text-decoration: underline; padding: 4px; font-size: inherit; height: auto; }
.map-source { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; font-size: 9px; margin-top: 8px; }
.map-source a { color: #647da5; }
.map-table { margin-top: 12px; padding-top: 12px; }
.map-panel .status.ready { padding: 0; }
.district-map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.9); }
@media(max-width:1000px) { .map-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 15px; } .map-sidebar { padding: 18px 14px; } .map-toolbar label>span { display: none; } }
@media(max-width:700px) {
  .map-panel { padding: 16px 12px; margin-top: 16px; } .map-header { flex-direction: column; align-items: stretch; gap: 13px; margin-bottom: 14px; }
  .map-header h2 { font-size: 18px; } .map-header .section-heading { justify-content: space-between; }
  .map-toolbar { justify-content: space-between; } .map-toolbar label>span { display: inline; font-size: 10px; } .map-toolbar select { width: 124px; }
  .map-reset { padding: 0 10px; font-size: 10px; } .map-layout { grid-template-columns: 1fr; gap: 14px; }
  .district-map { height: 380px; } .district-label { font-size: 9px; } .map-sidebar { padding: 17px; }
  .map-legend { margin: 13px 0 16px; } .map-legend-values { font-size: 10px; } .map-source { font-size: 8px; }
}