:root {font-family: system-ui, sans-serif; color: #193750; background: #fff; color-scheme: light;}
* {box-sizing: border-box;}
html, body {margin: 0; width: 100%; min-width: 200px; height: 100%;}
main {display: flex; flex-direction: column; min-height: 360px; height: 100%;}
#map {flex: 1 0 280px; min-height: 280px; width: 100%; background: #edf3f8;}
#map-status, #map-legend {margin: 0; padding: 8px 12px; font-size: 13px; line-height: 1.45;}
#map-status:empty {display: none;}
#map-legend {border-top: 1px solid #ccd8e3;}
.map-marker {position: absolute; transform: translate(-50%, -100%); min-width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; background: #126150; color: #fff; font: 700 15px/24px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 4px #0008; pointer-events: none;}
.map-marker--destination {background: #244ade; transform: translate(-50%, 0);}
@media (max-width: 420px) {#map-status, #map-legend {font-size: 12px; padding: 6px 8px;}}