.msu-county-svg-wrapper {
  margin-block-end: var(--msu-space-md, 1rem);
}

#msuext_county_map svg {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 2 / 3;
  /* border: 1px solid var(--msu-border-color, #ccc);
  border-radius: 8px; */
  display: block;
  background: var(--msu-surface, #fff);
}

/* Default county styling if your paths don't include fills/strokes */
#msuext_county_map g.county > * {
  fill: var(--msu-county-fill, #757575);
  fill-opacity: 0.75;
  stroke: var(--msu-county-stroke, #000);
  stroke-width: 0.8;
}

/* Region colors (override base) */
#msuext_county_map g.region--northeast-region > * {
  /* hsla(288, 24%, 81%, 1) */
  fill: var(--msu-region-northeast, rgba(214, 193, 222, 1));
}

#msuext_county_map g.region--delta-region > * {
  /* hsla(33, 96%, 69%, 1) */
  fill: var(--msu-region-delta, rgba(252, 180, 98, 1));
}

#msuext_county_map g.region--southwest-region > * {
  /* hsla(209, 67%, 87%, 1) */
  fill: var(--msu-region-southwest, rgba(202, 224, 244, 1));
}

#msuext_county_map g.region--coastal-region > * {
  /* hsla(91, 44%, 78%, 1) */
  fill: var(--msu-region-coastal, rgba(203, 227, 172, 1));
}

#msuext_county_map g.county:hover > *,
#msuext_county_map g.county:focus-visible > * {
  fill-opacity: 1;
  cursor: pointer;
}

#msuext_county_map g.county:active > * {
  fill-opacity: 0.6;
}

#msuext_county_map g.county:focus-visible > *,
#msuext_county_map g.county.selected:focus-visible > * {
  stroke: var(--msu-focus-color, #005fcc);
  stroke-width: 8;
}

/* Suppress the browser's default outline on SVG elements; we use stroke instead */
#msuext_county_map g.county:focus {
  outline: none;
}

#msuext_county_map g.county.selected > * {
  fill: var(--msu-county-selected, #5d1725);
  fill-opacity: 1;
  stroke-width: 1.2;
}

/* Region border ring color — single value so the centered ring looks uniform at boundaries.
   Override --msu-region-border-color to change it. */
#msuext-region-borders {
  color: var(--msu-region-border-color, rgba(60, 60, 60, 0.75));
}

/* Windows High Contrast / forced-colors support.
   Custom fills are overridden in this mode, so use system color keywords
   to preserve selected and focused states. */
@media (forced-colors: active) {
  #msuext_county_map g.county > * {
    stroke: ButtonText;
    stroke-width: 1;
  }

  #msuext_county_map g.county.selected > * {
    fill: Highlight;
    stroke: HighlightText;
    stroke-width: 2;
  }

  #msuext_county_map g.county:focus-visible > *,
  #msuext_county_map g.county.selected:focus-visible > * {
    stroke: Highlight;
    stroke-width: 8;
  }
}

/* Keyboard navigation hint */
/*
#msuext_county_map::after {
  content: 'Arrow keys navigate · Enter or Space selects · Esc returns to selection';
  display: block;
  font-size: 0.72rem;
  color: var(--msu-hint-color, #555);
  text-align: center;
  padding-block-start: 0.4em;
}
*/

/* County tooltip */
#msuext_county_map {
  position: relative;
  display: inline-block;
}

.msuext-county-tooltip {
  position: absolute;
  background: rgba(20, 20, 20, 0.88);
  color: #fff;
  padding: 0.35em 0.65em;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
  max-width: min(16rem, 90%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.12s ease;
  transform: translateX(-50%) translateY(calc(-100% - 5px));
}

@media (prefers-reduced-motion: reduce) {
  .msuext-county-tooltip {
    transition: none;
  }
}

.msuext-county-tooltip.is-visible {
  opacity: 1;
}

.msuext-county-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(20, 20, 20, 0.88);
}