.by-map, .by-map-shell {
  --map-paper: #f8f3e9;
  --map-line: #929388;
  --map-empty: #e7e3d8;
  --map-covered: #c5d1b8;
  --map-positive: #b9cda8;
  --map-mixed: #e1cd9e;
  --map-contested: #d2c0d7;
  --map-weak: #d7d1cb;
  --map-leaf: #4f6b3a;
}
.by-map {
  color-scheme:light;
  position: relative;
  width: 100%;
  min-height: 320px;
  background:
    radial-gradient(circle at 18% 17%, color-mix(in srgb,var(--brand-olive) 3.922%,transparent), transparent 28%),
    var(--map-paper);
  border: 1px solid var(--line, var(--border-subtle));
  border-radius: 22px;
  overflow: hidden;
}

.by-map.has-decoration {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb,var(--brand-olive) 6.275%,transparent) 4px, transparent 5px),
    radial-gradient(ellipse at 30% 15%, var(--surface-card), transparent 70%), var(--map-paper);
}
.by-map__decoration { pointer-events: none; }
.by-map__sprig { fill: color-mix(in srgb,var(--text-secondary) 7.059%,transparent); stroke: var(--text-secondary); stroke-width: 1.2; opacity: .46; }
.by-map__thematic { pointer-events: none; }
.by-map__country { fill: none; stroke: var(--map-line); stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: none; }
.by-map__fill { fill: var(--map-empty); transition: fill .18s ease; }

.by-map__svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 760; }
.by-map__region {
  fill: transparent;
  stroke: var(--map-line);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
  transition: fill .18s ease, stroke .18s ease, filter .18s ease;
  cursor: pointer;
  outline: none;
}
.by-map__region:hover,
.by-map__region:focus-visible { stroke: var(--text-primary); stroke-width: 2; }
.by-map__region.is-selected { stroke: var(--text-primary); stroke-width: 3; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .09)); }
.by-map__fill.is-covered { fill: var(--map-covered); }
.by-map__fill.is-positive { fill: var(--map-positive); }
.by-map__fill.is-mixed { fill: var(--map-mixed); }
.by-map__fill.is-contested { fill: var(--map-contested); }
.by-map__fill.is-weak,
.by-map__fill.is-unknown { fill: var(--map-weak); }
.by-map__fill.density-0 { fill: var(--map-empty); }
.by-map__fill.density-1 { fill: color-mix(in srgb, var(--map-leaf) 14%, var(--map-paper)); }
.by-map__fill.density-2 { fill: color-mix(in srgb, var(--map-leaf) 25%, var(--map-paper)); }
.by-map__fill.density-3 { fill: color-mix(in srgb, var(--map-leaf) 39%, var(--map-paper)); }
.by-map__fill.density-4 { fill: color-mix(in srgb, var(--map-leaf) 55%, var(--map-paper)); }

.by-map__label {
  fill: var(--text-secondary);
  font: 500 17px/1 var(--sans, system-ui, sans-serif);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: color-mix(in srgb, var(--map-paper) 86%, transparent);
  stroke-width: 5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.by-map__label--capital { font-size: 13px; font-weight: 700; fill: var(--text-primary); }

.by-map__marker, .by-map__uncertainty { --marker-color: #7c8073; }
.by-map__marker.is-positive, .by-map__uncertainty.is-positive { --marker-color: #527b48; }
.by-map__marker.is-mixed, .by-map__uncertainty.is-mixed { --marker-color: #b28a36; }
.by-map__marker.is-contested, .by-map__uncertainty.is-contested { --marker-color: #8d6090; }
.by-map__marker.is-weak, .by-map__uncertainty.is-weak { --marker-color: #7c8073; }
.by-map__marker circle { fill: var(--marker-color); stroke: var(--map-paper); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.by-map__marker.is-locality circle { fill: var(--map-paper); stroke: var(--marker-color); stroke-width: 1.5; }
.by-map__marker.is-rounded circle { stroke-dasharray: 2 2; }
.by-map__uncertainty { fill: var(--marker-color); fill-opacity: .08; stroke: var(--marker-color); stroke-opacity: .3; stroke-width: .7; stroke-dasharray: 3 3; pointer-events: none; }
.by-map__cluster-count { fill: #fff; font: 700 10px/1 var(--sans, system-ui, sans-serif); text-anchor: middle; dominant-baseline: central; }
.by-map__marker.is-locality .by-map__cluster-count { fill: var(--marker-color); }

.by-map__error { margin: 0; padding: 24px; color: var(--ink-2, var(--text-secondary)); }
.by-map__attribution {
  position: relative;
  z-index: 2;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--map-paper) 90%, transparent);
  padding: 8px 12px;
  border-radius: 5px;
}
.by-map__attribution a { color: inherit; text-underline-offset: 2px; }

.by-map-shell {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, .8fr);
  gap: 28px;
  align-items: center;
}
.by-map-copy { max-width: 34em; }
.by-map-copy h2 { margin-bottom: .45em; }
.by-map-copy p { color: var(--ink-2, var(--text-secondary)); }
.by-map-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; font-size: .82rem; color: var(--ink-2, var(--text-secondary)); }
.by-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.by-map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid var(--map-line); }
.by-map-note { font-size: .78rem; color: var(--muted, var(--text-secondary)); margin-top: 10px; }

@media (max-width: 1000px) {
  .by-map-shell { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 760px) {
  .by-map { border-radius: 16px; min-height: 260px; }
  .by-map__label { font-size: 24px; }
  .by-map__label--capital { font-size: 18px; }
}

@media (max-width: 480px) {
  /* ~325 px wide SVG: 38 viewBox units ≈ 12 px on screen. */
  .by-map__label { font-size: 38px; stroke-width: 7px; }
  .by-map__label[data-region-label="BY-HR"],
  .by-map__label[data-region-label="BY-MA"] { font-size: 36px; }
  .by-map__label--capital { font-size: 35px; }
  /* Nudges in viewBox units keep the large labels inside their oblasts and apart. */
  .by-map__label[data-region-label="BY-HR"] { transform: translate(8px, -20px); }
  .by-map__label[data-region-label="BY-MI"] { transform: translate(18px, 6px); }
  .by-map__attribution { font-size: 10px; max-width: calc(100% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .by-map__region, .by-map__fill { transition: none; }
}