.map-page .main-panel {
  height: 100%;
}

.map-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(36, 86, 63, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 86, 63, 0.04) 1px, transparent 1px),
    var(--paper-deep);
  background-size: 34px 34px;
}

.map-workspace iframe {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #dce7d6;
  border: 0;
}

.map-loading {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--ink);
  background: var(--paper-light);
  text-align: center;
  transition:
    visibility 220ms ease,
    opacity 220ms ease;
}

.map-loading.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.map-loading > strong {
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.map-loading > span:last-child {
  color: var(--ink-soft);
  font-size: 11px;
}

.map-loading-cube {
  width: 37px;
  height: 37px;
  background:
    linear-gradient(30deg, #27563d 50%, transparent 50%) 0 100% / 50% 50%,
    linear-gradient(-30deg, #356f4a 50%, transparent 50%) 100% 100% / 50% 50%,
    linear-gradient(150deg, transparent 50%, #9ad765 50%) 0 0 / 50% 50%,
    linear-gradient(-150deg, transparent 50%, #b8e37d 50%) 100% 0 / 50% 50%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 12px rgba(36, 86, 63, 0.18));
  animation: cube-float 3.6s ease-in-out infinite;
}

.map-fullview-short {
  display: none;
}

.map-noscript {
  position: absolute;
  z-index: 3;
  right: 16px;
  bottom: 16px;
  left: 16px;
  margin: 0;
  padding: 14px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}

.map-noscript a {
  color: var(--forest-mid);
  font-weight: 800;
}

@media (max-width: 520px) {
  .map-fullview-long {
    display: none;
  }

  .map-fullview-short {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-loading-cube {
    animation: none;
  }
}