/* the map windows, on top of css/site.css */
.window { margin: 0 0 32px; border: 1px solid #000; }
.window h2 { margin: 0; padding: 8px 8px 0; font-size: 2em; }
.window .facts { margin: 4px 0 8px; padding: 0 8px; max-width: none; }
.map { height: 640px; background: #fff; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.elevation { position: relative; height: 170px; }
.elevation svg { display: block; cursor: crosshair; touch-action: pan-y; }
.elevation text { font: 11px monospace; fill: #000; }
.elevation .tip { position: absolute; top: 2px; padding: 1px 4px; background: #fff; border: 1px solid #000; font: 12px monospace; white-space: nowrap; pointer-events: none; }

/* leaflet's controls, in the site's plain look */
.leaflet-container { font: 13px/1.35 monospace; }
.leaflet-container a { color: #000; }
.leaflet-container .leaflet-control-attribution { font-size: 10px; }
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
.leaflet-bar, .leaflet-bar a { border-radius: 0 !important; }
.leaflet-touch .leaflet-bar { border: 1px solid #000; }
.leaflet-container .leaflet-bar a { color: #000; }

.touch { display: none; }
@media (pointer: coarse) { .touch { display: block; } .mouse { display: none; } }
@media (max-width: 720px) {
  .map { height: 420px; }
  .window h2 { font-size: 1.5em; }
}