.region-map-panel { padding:26px; margin:0 0 24px; border:1px solid var(--line); border-radius:7px; background:white; }
.region-map-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.region-map-heading h2 { font-size:20px; }
.region-map-heading .eyebrow { margin-bottom:6px; }
.region-map-caption { padding:6px 9px; border-radius:4px; background:#f3f1e7; color:#776746; font-size:11px; line-height:1.6; }
.region-map-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 12px; }
.region-map-toolbar button { min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:5px; background:white; font-size:12px; }
.region-map-toolbar button[aria-pressed=true] { background:var(--green); color:white; border-color:var(--green); }
.region-map-selection { min-height:24px; margin:0; color:var(--muted); font-size:12px; }
.region-map-instruction { margin:6px 0 0; color:var(--muted); font-size:12px; }
.region-map-canvas { position:relative; width:min(100%,560px); aspect-ratio:560/650; margin:14px auto 16px; border:1px solid #e6eeeb; border-radius:12px; background:linear-gradient(145deg,#f0f6f4,#f8faf8); }
.region-map-outline { display:block; width:100%; height:auto; aspect-ratio:560/650; }
.region-map-area { fill:#e2eadd; stroke:#77978a; stroke-width:.85; stroke-linejoin:round; cursor:pointer; }
.region-map-area path { vector-effect:non-scaling-stroke; }
.region-map-area.is-previewed { fill:#bfd6bb; stroke:#477666; stroke-width:1.3; }
.region-map-area[aria-pressed=true] { fill:var(--green); stroke:#0c4d40; stroke-width:1.5; }
.region-map-area:focus-visible { outline:none; stroke:#b77513; stroke-width:3; }
.region-map-labels { pointer-events:none; user-select:none; }
.region-map-labels text { pointer-events:auto; cursor:pointer; fill:#254b43; font-weight:700; paint-order:stroke; stroke:#f9fbf8; stroke-linejoin:round; }
.region-map-labels text.is-selected { fill:#fff; stroke:var(--green); }
.region-map-popup { position:absolute; z-index:4; display:grid; gap:7px; width:216px; max-width:calc(100% - 16px); box-sizing:border-box; padding:16px; border:1px solid #bfd2c9; border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 9px 28px #163c3924; }
.region-map-popup[hidden] { display:none; }
.region-map-popup-kicker { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.region-map-popup-name { font-size:17px; line-height:1.4; }
.region-map-popup-count { font-size:15px; font-weight:700; color:var(--green); }
.region-map-popup-hint { margin-top:3px; padding-top:9px; border-top:1px solid var(--line); font-size:10px; line-height:1.6; color:var(--muted); }
.region-map-list { max-width:560px; margin:0 auto 22px; border:1px solid var(--line); border-radius:6px; }
.region-map-list summary { min-height:44px; padding:13px 14px; font-size:12px; color:var(--ink); cursor:pointer; }
.region-map-markers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:8px; }
.region-map-marker { position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; width:100%; min-width:44px; min-height:48px; padding:6px 4px; border:1px solid #c8d7c9; border-radius:6px; background:#fffffff5; color:var(--ink); }
.region-map-marker:hover { border-color:var(--green); background:#f0f6ec; }
.region-map-marker[aria-pressed=true] { border-color:var(--green); background:var(--green); color:white; }
.region-map-marker:focus-visible { z-index:2; outline:3px solid #b77513; outline-offset:3px; }
.region-map-name { font-weight:700; font-size:12px; line-height:1.4; }
.region-map-count { font-size:11px; line-height:1.4; }
.region-map-marker[data-count-status=missing] .region-map-count,
.region-map-marker[data-count-status=invalid] .region-map-count,
.region-map-marker[data-count-status=duplicate] .region-map-count { font-size:10px; }
.region-map-selected-mark { position:absolute; top:1px; right:4px; font-size:10px; }
.region-map-explanation { max-width:800px; margin:0 auto; font-size:12px; color:var(--muted); line-height:1.8; }
.region-map-explanation summary { cursor:pointer; min-height:36px; padding:8px 0; }
.region-map-explanation p { margin:8px 0; }
.region-map-panel[data-level=district] .region-map-canvas { background:#f5f8f2; }
.region-map-key { display:flex; align-items:center; gap:8px; }
.region-map-selected-swatch { flex:0 0 12px; height:12px; border-radius:2px; background:var(--green); }
.region-map-geography-note,.region-map-source { font-size:11px; }
@media(max-width:760px) {
  .region-map-panel { padding:18px 12px; }
  .region-map-heading { flex-direction:column; gap:10px; padding:0 4px; }
  .region-map-heading h2 { font-size:18px; }
  .region-map-caption { font-size:10px; }
  .region-map-markers { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .region-map-popup { padding:12px; }
  .region-map-popup-name { font-size:15px; }
  .region-map-popup-count { font-size:13px; }
  .region-map-toolbar button { font-size:11px; padding:10px; }
  .region-map-explanation { padding:0 4px; font-size:11px; }
}
@media(max-width:420px) {
  .region-map-labels { display:none; }
}