.mission-map[hidden],
.mission-map [hidden] {
  display: none !important;
}

.mission-map {
  margin-top: 22px;
  border: 1px solid #a9b69b;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}

.mission-map > summary {
  position: relative;
  min-height: 48px;
  padding: 15px 45px 14px 17px;
  color: var(--ink);
  background: #eef1df;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.mission-map > summary::-webkit-details-marker {
  display: none;
}

.mission-map > summary::after {
  content: "+";
  position: absolute;
  right: 17px;
  top: 50%;
  color: var(--green);
  font: 500 22px/1 var(--font-body);
  transform: translateY(-50%);
}

.mission-map[open] > summary::after {
  content: "−";
}

.mission-map > summary:hover {
  background: var(--lime);
}

.mission-map > summary:focus-visible,
.mission-map-retry:focus-visible {
  outline: 3px solid #c0764b;
  outline-offset: -4px;
}

.mission-map-content {
  padding: 13px;
  border-top: 1px solid #d5d8c7;
}

.mission-map-status {
  min-height: 16px;
  margin: 0 0 9px;
  color: #66705b;
  font-size: 11px;
  line-height: 1.5;
}

.mission-map-status[data-state="error"] {
  color: #99523d;
}

.mission-map-retry {
  margin: 0 0 12px;
  padding: 8px 11px;
  border: 1px solid #a7b395;
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
}

.mission-map-retry:hover {
  background: var(--lime);
}

.mission-map-canvas {
  width: 100%;
  height: min(54vh, 430px);
  min-height: 265px;
  overflow: hidden;
  border: 1px solid #c5cfb5;
  border-radius: 7px;
  background: #e6ebd7;
  color: var(--ink);
  z-index: 0;
}

.mission-map .leaflet-container {
  font-family: var(--font-body);
}

.mission-map .leaflet-control-attribution {
  font-size: 9px;
}

.mission-map .leaflet-popup-content-wrapper {
  border: 1px solid #a9b69b;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 3px 0 #263c2c22;
}

.mission-map .leaflet-popup-tip {
  background: var(--paper);
}

.mission-map .leaflet-popup-content {
  margin: 12px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
}

.tg-map-popup {
  display: grid;
  gap: 5px;
  overflow-wrap: anywhere;
}

.tg-map-popup strong {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.2;
}

.tg-map-popup > span {
  color: #66705b;
}

.tg-map-popup > a {
  width: fit-content;
  margin-top: 3px;
  color: #365e32;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tg-map-pin-wrap {
  border: 0;
  background: transparent;
}

.tg-map-pin {
  position: absolute;
  left: 4px;
  top: 2px;
  width: 21px;
  height: 21px;
  border: 2px solid #263c2c;
  border-radius: 50% 50% 50% 0;
  background: #d9ed9d;
  box-shadow: 1px 2px 0 #263c2c45;
  transform: rotate(-45deg);
}

.tg-map-pin::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 5.5px;
  top: 5.5px;
  border: 1px solid #263c2c;
  border-radius: 50%;
  background: #fffef5;
}

@media (max-width: 760px) {
  .mission-map {
    margin-top: 17px;
  }

  .mission-map-content {
    padding: 10px;
  }

  .mission-map-canvas {
    height: 52vh;
    min-height: 250px;
  }
}