.mm-project-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
}

.mm-project-map__frame {
  background: #fff;
  border: 1px solid var(--mm-rule, #dce0e9);
  padding: clamp(10px, 1.6vw, 20px);
}

.mm-project-map__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mm-project-map__state {
  fill: var(--map-land, #e9ecf2);
  stroke: #fff;
  stroke-width: 0.9;
  transition: fill 180ms ease;
}

.mm-project-map__state.is-active {
  fill: var(--map-land-on, #8fa2ce);
}

.mm-project-map__leader {
  stroke: var(--mm-accent, #27409a);
  stroke-width: 1.6;
  opacity: 0.6;
}

.mm-project-map__true-location {
  fill: var(--mm-accent, #27409a);
}

.mm-project-map__pin {
  cursor: pointer;
}

.mm-project-map__pin-halo {
  fill: var(--mm-accent, #27409a);
  opacity: 0;
  transition: opacity 180ms ease;
}

.mm-project-map__pin-dot {
  fill: var(--mm-accent, #27409a);
  stroke: #fff;
  stroke-width: 2.5;
  transition: r 180ms ease, fill 180ms ease;
}

.mm-project-map__pin-number {
  fill: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.mm-project-map__pin-hit {
  fill: transparent;
  cursor: pointer;
  outline: none;
}

.mm-project-map__pin-ring {
  fill: none;
  stroke: var(--mm-accent-deep, #1b2a63);
  stroke-width: 0;
  pointer-events: none;
}

.mm-project-map__pin:hover .mm-project-map__pin-halo,
.mm-project-map__pin.is-active .mm-project-map__pin-halo,
.mm-project-map__pin:has(.mm-project-map__pin-hit:focus-visible) .mm-project-map__pin-halo {
  opacity: 0.2;
}

.mm-project-map__pin:hover .mm-project-map__pin-dot {
  r: 14px;
}

.mm-project-map__pin.is-active .mm-project-map__pin-dot {
  fill: var(--mm-accent-deep, #1b2a63);
  r: 14.5px;
}

.mm-project-map__pin:has(.mm-project-map__pin-hit:focus-visible) .mm-project-map__pin-ring {
  stroke-width: 3.5;
}

.mm-project-map__hint {
  color: #6e7486;
  font-size: 0.8rem;
  margin: 12px 2px 0;
}

.mm-project-map-cards {
  position: sticky;
  top: 20px;
}

.mm-project-map-card[hidden] {
  display: none !important;
}

.mm-project-map-cards:not(.is-map-ready) .mm-project-map-card:not(:first-child) {
  display: none !important;
}

.mm-project-map__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 979px) {
  .mm-project-map-layout {
    grid-template-columns: 1fr;
  }

  .mm-project-map-cards {
    position: static;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-project-map__state,
  .mm-project-map__pin-halo,
  .mm-project-map__pin-dot {
    transition: none;
  }
}