.map-container {
  --map-font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
  --map-map-bg: #e3e6ea;
  --map-surface: #ffffff;
  --map-surface-hover: #eef3fa;
  --map-surface-disabled: #f0f2f5;
  --map-text: #2b303a;
  --map-text-muted: #6f7680;
  --map-text-disabled: #b0b6c0;
  --map-border: #c9cfda;
  --map-border-soft: #dfe3e9;
  --map-border-strong: #5a6270;
  --map-link: #2a81cb;
  --map-accent: #2a81cb;
  --map-accent-contrast: #ffffff;
  --map-overlay-bg: rgba(255, 255, 255, 0.85);
  --map-scale-border: #6f7680;
  --map-scale-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);
  --map-zoom-box-border: #2a81cb;
  --map-zoom-box-bg: rgba(255, 255, 255, 0.5);
  --map-touch-border: rgba(43, 48, 58, 0.25);
  --map-radius-sm: 4px;
  --map-radius-md: 8px;
  --map-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --map-shadow-md: 0 1px 5px rgba(0, 0, 0, 0.65);
  --map-shadow-lg: 0 3px 14px rgba(0, 0, 0, 0.4);

  position: relative;
  overflow: hidden;
  background: var(--map-map-bg);
  outline-offset: 1px;
  font: var(--map-font);
  -webkit-tap-highlight-color: transparent;

  & a { color: var(--map-link); }
}

/* Cartographic night — same hues, inverted tiers. Auto via OS preference,
   forced with .map-theme-dark, suppressed with .map-theme-light. */
.map-container.map-theme-dark {
  --map-map-bg: #16181d;
  --map-surface: #22262e;
  --map-surface-hover: #2a2f3a;
  --map-surface-disabled: #2a2f3a;
  --map-text: #e8eaf0;
  --map-text-muted: #9aa0ae;
  --map-text-disabled: #5c6370;
  --map-border: #3a4150;
  --map-border-soft: #2e323c;
  --map-border-strong: #8a919e;
  --map-link: #6fb1e8;
  --map-accent: #4f9be8;
  --map-accent-contrast: #ffffff;
  --map-overlay-bg: rgba(22, 24, 29, 0.85);
  --map-scale-border: #8a919e;
  --map-scale-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  --map-zoom-box-bg: rgba(22, 24, 29, 0.5);
}

@media (prefers-color-scheme: dark) {
  .map-container:not(.map-theme-light) {
    --map-map-bg: #16181d;
    --map-surface: #22262e;
    --map-surface-hover: #2a2f3a;
    --map-surface-disabled: #2a2f3a;
    --map-text: #e8eaf0;
    --map-text-muted: #9aa0ae;
    --map-text-disabled: #5c6370;
    --map-border: #3a4150;
    --map-border-soft: #2e323c;
    --map-border-strong: #8a919e;
    --map-link: #6fb1e8;
    --map-accent: #4f9be8;
    --map-accent-contrast: #ffffff;
    --map-overlay-bg: rgba(22, 24, 29, 0.85);
    --map-scale-border: #8a919e;
    --map-scale-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    --map-zoom-box-bg: rgba(22, 24, 29, 0.5);
  }
}

.map-pane {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 400;
}

.map-tile, .map-marker-icon, .map-marker-shadow, .map-zoom-box,
.map-pane > svg, .map-pane > canvas, .map-image-layer, .map-tile-container,
.map-tile-container img {
  position: absolute;
  left: 0;
  top: 0;
}

.map-tile-pane { z-index: 200; }
.map-overlay-pane { z-index: 400; }
.map-shadow-pane { z-index: 500; }
.map-marker-pane { z-index: 600; }
.map-tooltip-pane { z-index: 650; }
.map-popup-pane { z-index: 700; }
.map-control, .map-zoom-box { z-index: 800; }
.map-map-pane {
  & canvas { z-index: 100; }
  & svg { z-index: 200; }
}

.map-overlay-pane svg, .map-marker-pane img, .map-shadow-pane img,
.map-tile-pane img, img.map-image-layer, .map-tile {
  max-width: none !important;
  max-height: none !important;
}

.map-tile, .map-marker-icon, .map-marker-shadow {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

img.map-tile { mix-blend-mode: plus-lighter; }
.map-safari .map-tile { image-rendering: -webkit-optimize-contrast; }
.map-safari .map-tile-container {
  width: 1600px;
  height: 1600px;
  transform-origin: 0 0;
}

.map-touch-zoom { touch-action: pan-x pan-y; }
.map-touch-drag { touch-action: none; }
.map-touch-drag.map-touch-zoom { touch-action: none; }

.map-zoom-animated { transform-origin: 0 0; }
svg.map-zoom-animated { will-change: transform; }
.map-zoom-anim .map-zoom-animated {
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.map-zoom-anim .map-tile, .map-pan-anim .map-tile { transition: none; }
.map-zoom-hide { visibility: hidden; }

.map-fade-anim .map-popup {
  opacity: 0;
  transition: opacity 0.2s linear;
}

.map-tile { visibility: hidden; }
.map-tile-loaded { visibility: inherit; }

.map-interactive { cursor: pointer; }

.map-marker-icon, .map-marker-shadow, .map-tile-container img,
.map-overlay-pane > svg, .map-overlay-pane > svg path {
  pointer-events: none;
}

.map-marker-icon.map-interactive,
.map-overlay-pane svg path.map-interactive,
canvas.map-interactive,
img.map-image-layer.map-interactive {
  pointer-events: auto;
}

.map-grab { cursor: grab; }
.map-dragging .map-grab, .map-dragging .map-marker-draggable { cursor: grabbing; }
.map-crosshair, .map-crosshair .map-interactive { cursor: crosshair; }
.map-popup-pane, .map-control { cursor: auto; }

.map-top, .map-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;

  & .map-control {
    margin: 10px;
    pointer-events: auto;
  }
  &.map-right .map-control { float: right; }
}

.map-top { top: 0; }
.map-bottom { bottom: 0; }
.map-left { left: 0; }
.map-right { right: 0; }

.map-control {
  float: left;
  clear: both;
  z-index: 800;
  cursor: auto;
  pointer-events: auto;
}

.map-bar {
  box-shadow: var(--map-shadow-md);
  border-radius: var(--map-radius-sm);

  & a, & a:hover {
    background-color: var(--map-surface);
    border-bottom: 1px solid var(--map-border);
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--map-text);
  }
  & a {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  }
  & a:hover { background-color: var(--map-surface-hover); }
  & a:focus-visible { outline: 2px solid var(--map-accent); outline-offset: -2px; }
  & a:first-child { border-top-left-radius: var(--map-radius-sm); border-top-right-radius: var(--map-radius-sm); }
  & a:last-child { border-bottom: none; border-bottom-left-radius: var(--map-radius-sm); border-bottom-right-radius: var(--map-radius-sm); }
  & a.map-disabled {
    cursor: default;
    background-color: var(--map-surface-disabled);
    color: var(--map-text-disabled);
  }
}

.map-touch .map-bar {
  box-shadow: none;
  border: 2px solid var(--map-touch-border);
  background-clip: padding-box;

  & a, & a:hover {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}

.map-control-layers {
  box-shadow: var(--map-shadow-md);
  background: var(--map-surface);
  border-radius: var(--map-radius-sm);
}

.map-control-layers-toggle {
  background-image: url(images/layers.svg);
  width: 36px;
  height: 36px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
}

.map-control-layers-toggle:focus-visible { outline: 2px solid var(--map-accent); outline-offset: -2px; }

.map-touch .map-control-layers-toggle { width: 44px; height: 44px; }

.map-control-layers-expanded .map-control-layers-toggle { display: none; }
.map-control-layers-list { display: none; }
.map-control-layers-expanded .map-control-layers-list {
  display: block;
  position: relative;
}
.map-control-layers-expanded {
  padding: 6px 10px 6px 6px;
  color: var(--map-text);
  background: var(--map-surface);
}
.map-control-layers-scrollbar { overflow-y: scroll; padding-right: 5px; }
.map-control-layers-list label { display: block; padding: 2px 0; }
.map-control-layers-selector {
  margin-top: 2px;
  position: relative;
  top: 1px;
}
.map-control-layers-separator {
  border-top: 1px solid var(--map-border-soft);
  height: 0;
  margin: 5px -10px 5px -6px;
}

.map-control-attribution {
  background: var(--map-overlay-bg);
  padding: 0 5px;
  color: var(--map-text);
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;

  & a {
    color: var(--map-text);
    text-decoration: none;

    &:hover { text-decoration: underline; }
  }
}

.map-control-scale-line {
  border: 2px solid var(--map-scale-border);
  border-top: none;
  line-height: 1.1;
  padding: 2px 5px 1px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--map-overlay-bg);
  text-shadow: var(--map-scale-shadow);
}

.map-control-scale-line + .map-control-scale-line { margin-top: -2px; }

.map-popup {
  position: absolute;
  text-align: center;
  margin-bottom: 20px;
}

.map-popup-content-wrapper, .map-popup-tip {
  background: var(--map-surface);
  color: var(--map-text);
  box-shadow: var(--map-shadow-lg);
}

.map-popup-content-wrapper {
  padding: 1px;
  text-align: left;
  border-radius: var(--map-radius-md);
}

.map-popup-content {
  margin: 13px 19px;
  line-height: 1.4;

  & p { margin: 17px 0; }
}

.map-popup-tip-container {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  margin-top: -1px;
  overflow: hidden;
  pointer-events: none;
}

.map-popup-tip {
  width: 17px;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  pointer-events: auto;
  transform: rotate(45deg);
}

.map-popup-close-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border: none;
  text-align: center;
  font: 16px/24px Tahoma, Verdana, sans-serif;
  color: var(--map-text-muted);
  text-decoration: none;
  background: transparent;

  &:hover { color: var(--map-text); }
}

.map-popup-scrolled { overflow: auto; }

.map-tooltip {
  position: absolute;
  padding: 5px 10px;
  background-color: var(--map-surface);
  border-radius: var(--map-radius-sm);
  color: var(--map-text);
  white-space: nowrap;
  filter: drop-shadow(var(--map-shadow-sm));
}

.map-tooltip.map-interactive { cursor: pointer; }

.map-tooltip-top::before, .map-tooltip-bottom::before,
.map-tooltip-left::before, .map-tooltip-right::before {
  position: absolute;
  pointer-events: none;
  border: 6px solid transparent;
  content: "";
}

.map-tooltip-top::before {
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-top-color: var(--map-surface);
  border-bottom-width: 0;
}

.map-tooltip-bottom::before {
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-bottom-color: var(--map-surface);
  border-top-width: 0;
}

.map-tooltip-left::before {
  left: 100%;
  top: 50%;
  margin-top: -6px;
  border-left-color: var(--map-surface);
  border-right-width: 0;
}

.map-tooltip-right::before {
  right: 100%;
  top: 50%;
  margin-top: -6px;
  border-right-color: var(--map-surface);
  border-left-width: 0;
}

.map-div-icon {
  background: var(--map-surface);
  border: 1px solid var(--map-border-strong);
}

.map-zoom-box {
  border: 2px dotted var(--map-zoom-box-border);
  background: var(--map-zoom-box-bg);
}

path.map-interactive:focus:not(:focus-visible) { outline: 0; }

.map-default-icon-path { background-image: url(images/marker-icon.svg); }

@media print {
  .map-container { print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  .map-fade-anim .map-popup { opacity: 1; transition: none; }
  .map-tile { transition: none; }
  .map-zoom-anim .map-zoom-animated { transition: none; }
}