:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body,
.map-frame {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
}

.map-frame {
  position: relative;
  overflow: hidden;
  background: #dfeef5;
}

#map {
  position: absolute;
  inset: 0;
}

.map-status,
.hover-label {
  position: absolute;
  z-index: 1;
  color: #fff;
  pointer-events: none;
}

.map-status {
  top: 20px;
  left: 20px;
  max-width: min(420px, calc(100% - 40px));
  border-radius: 999px;
  background: rgb(18 50 70 / 88%);
  padding: 10px 14px;
  font: 14px/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  transition: opacity 180ms ease, transform 180ms ease;
}

.map-status.is-hidden {
  opacity: 0;
  transform: translateY(-6px);
}

.map-status.is-error {
  border-radius: 12px;
  background: #8d2424;
}

.hover-label {
  bottom: 22px;
  left: 50%;
  max-width: calc(100% - 44px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 999px;
  background: rgb(18 50 70 / 88%);
  padding: 10px 15px;
  font: 600 14px/1.2 Inter, ui-sans-serif, system-ui, sans-serif;
  text-overflow: ellipsis;
  transform: translate(-50%, 9px) scale(0.97);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.hover-label.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}