/* The state map. Tokens fall back to the page's; the tone (deep navy or paper) decides how the relief
   blends and how lines read. */
.pemapa { --pm-grew: #7BA4F0; --pm-shrank: #E8773F; --pm-seq: #8FB4F5;
  --pm-ink: #E8EFFC; --pm-ink-2: rgba(232, 239, 252, 0.72); --pm-line: rgba(232, 239, 252, 0.28); --pm-water: #7BA4F0; --pm-road: rgba(232, 239, 252, 0.55);
  --pm-halo: #08152D; --pm-hosp: #F0945A; --pm-bg: transparent; display: grid; gap: 12px; min-width: 0; }
.pemapa[data-tone="light"], :root[data-theme="light"] .pemapa[data-tone="auto"] { --pm-ink: #0A111E; --pm-ink-2: #53627C; --pm-line: rgba(10, 17, 30, 0.22); --pm-water: #1B52A4; --pm-road: rgba(10, 17, 30, 0.5); --pm-halo: #F2F4F8; --pm-hosp: #C2561F; --pm-seq: #1B52A4; --pm-grew: #1B52A4; --pm-shrank: #D9622B; }
.pemapa-stage { position: relative; }
.pemapa-svg { display: block; width: 100%; height: auto; overflow: visible; }

.pm-relevo image { mix-blend-mode: screen; opacity: 0.42; }
.pemapa[data-tone="light"] .pm-relevo image, :root[data-theme="light"] .pemapa[data-tone="auto"] .pm-relevo image { mix-blend-mode: multiply; opacity: 0.85; }

.pm-mun { fill: transparent; stroke: var(--pm-line); stroke-width: 0.8; stroke-linejoin: round; transition: stroke-width 0.15s, opacity 0.2s; outline: none; cursor: default; }
.pm-mun.painted { mix-blend-mode: normal; }
.pemapa[data-tone="light"] .pm-mun.painted, :root[data-theme="light"] .pemapa[data-tone="auto"] .pm-mun.painted { mix-blend-mode: multiply; }
.pm-mun:hover, .pm-mun:focus-visible { stroke: var(--pm-ink); stroke-width: 2.4; }
.pemapa.has-highlight .pm-mun:not(.is-on) { opacity: 0.38; }
.pm-mun.is-on { fill: color-mix(in srgb, var(--pm-shrank) 70%, transparent) !important; stroke: var(--pm-ink); stroke-width: 1.6; opacity: 1; }

.pm-agua { fill: color-mix(in srgb, var(--pm-water) 55%, transparent); stroke: none; }
.pm-rio { fill: none; stroke: var(--pm-water); stroke-linecap: round; stroke-linejoin: round; }
.pm-rio-outros { stroke-width: 0.7; opacity: 0.55; }
.pm-rio-principais { stroke-width: 1.8; opacity: 0.95; }
.pm-rod { fill: none; stroke: var(--pm-road); stroke-linecap: round; stroke-linejoin: round; }
.pm-rod-sec { stroke-width: 0.6; opacity: 0.45; }
.pm-rod-prim { stroke-width: 1.1; opacity: 0.75; }
.pm-rod-princ { stroke-width: 2.2; opacity: 0.95; }
.pm-estado { fill: none; stroke: var(--pm-ink); stroke-width: 1.6; pointer-events: none; }
.pm-hosp { fill: var(--pm-hosp); stroke: var(--pm-halo); stroke-width: 0.8; opacity: 0.9; pointer-events: none; }
.pm-est { fill: color-mix(in srgb, var(--pm-water) 38%, transparent); stroke: var(--pm-water); stroke-width: 1.2; cursor: default; outline: none; }
.pm-est.cota { stroke-dasharray: 3 3; }
.pm-est:hover, .pm-est:focus-visible { fill: color-mix(in srgb, var(--pm-water) 60%, transparent); stroke-width: 2; }
.pm-est-core { fill: var(--pm-ink); pointer-events: none; }

.pm-nomes { pointer-events: none; }
.pm-city-dot { fill: var(--pm-ink); stroke: var(--pm-halo); stroke-width: 1.2; }
.pm-city { font: 600 19px/1 var(--sans, system-ui); fill: var(--pm-ink); paint-order: stroke; stroke: var(--pm-halo); stroke-width: 5px; stroke-linejoin: round; letter-spacing: -0.01em; }
.pm-rio-nome { font: italic 400 16px/1 var(--sans, system-ui); fill: var(--pm-water); paint-order: stroke; stroke: var(--pm-halo); stroke-width: 4px; stroke-linejoin: round; }
.pm-ref { font: 500 12.5px/1 var(--mono, monospace); fill: var(--pm-ink-2); paint-order: stroke; stroke: var(--pm-halo); stroke-width: 4.5px; stroke-linejoin: round; text-anchor: middle; letter-spacing: 0.04em; }
.pemapa[data-compact] .pm-city { font-size: 22px; }
.pemapa[data-compact] .pm-inset-sub, .pm-inset-sub { font-size: 12px; }
.pm-inset-box { fill: color-mix(in srgb, var(--pm-halo) 70%, transparent); stroke: var(--pm-line); stroke-width: 1; }
.pm-inset-sub { font: 400 11px/1 var(--mono, monospace); fill: var(--pm-ink-2); }
.pm-noronha { stroke: var(--pm-ink); stroke-width: 1; fill: color-mix(in srgb, var(--pm-seq) 40%, transparent); }

.pemapa-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.pemapa-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pemapa-chip { font: 500 12px/1 var(--mono, monospace); letter-spacing: 0.02em; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--pm-line); background: transparent; color: var(--pm-ink-2); cursor: pointer; }
.pemapa-chip.on { color: var(--pm-ink); border-color: var(--pm-ink-2); background: color-mix(in srgb, var(--pm-ink) 8%, transparent); }
.pemapa-chip:focus-visible, .pemapa-paint select:focus-visible { outline: 2px solid var(--pm-seq); outline-offset: 2px; }
.pemapa-paint { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono, monospace); color: var(--pm-ink-2); }
.pemapa-paint select { font: 500 13px/1.2 var(--sans, system-ui); color: var(--pm-ink); background: transparent; border: 1px solid var(--pm-line); border-radius: 8px; padding: 6px 10px; }
.pemapa-paint select option { color: #0A111E; background: #fff; }
.pemapa-legend { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font: 400 12px/1.4 var(--mono, monospace); color: var(--pm-ink-2); min-height: 18px; }
.pemapa-key { display: inline-flex; align-items: center; gap: 8px; color: var(--pm-ink); }
.pemapa-key i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.pemapa-key.ramp i { width: 120px; height: 10px; }
.pemapa-key b { font-weight: 400; color: var(--pm-ink-2); }
.pemapa-error { color: var(--pm-ink-2); font: 400 14px/1.4 var(--sans, system-ui); }

@media (max-width: 720px) {
  .pm-nomes { display: none; }
  .pm-inset { display: none; }
  .pemapa-key.ramp i { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .pm-mun { transition: none; } }
@media print { .pemapa-controls { display: none; } .pm-relevo image { mix-blend-mode: multiply; opacity: 0.7; } }