.syttom19-map { --syttom-border: #cbd5e1; color: #172b22; width: 100%; min-width: 0; }
.syttom19-map *, .syttom19-map *::before, .syttom19-map *::after { box-sizing: border-box; }
.syttom19-map [hidden] { display: none !important; }
.syttom19-map__canvas { width: 100%; min-height: 280px; max-height: 80vh; border: 1px solid var(--syttom-border); border-radius: .5rem; z-index: 0; }
.syttom19-map__controls { margin-top: .75rem; }
.syttom19-map__controls fieldset { border: 1px solid var(--syttom-border); padding: .6rem 1rem; margin: 0 0 .6rem; border-radius: .4rem; }
.syttom19-map__controls legend { font-weight: 600; width: auto; padding: 0 .3rem; font-size: 1rem; }
.syttom19-map__controls label { display: inline-flex; gap: .4rem; align-items: center; margin: .3rem 1rem .3rem 0; cursor: pointer; }
.syttom19-map__controls input { width: 1.1rem; height: 1.1rem; margin: 0; }
.syttom19-map__controls button { font: inherit; font-size: .9rem; color: #172b22; background: #fff; border: 1px solid var(--syttom-border); border-radius: .35rem; padding: .55rem .7rem; min-height: 44px; text-align: left; cursor: pointer; line-height: 1.35; white-space: normal; }
.syttom19-map__controls button:hover { background: #edf6f0; }
.syttom19-map :is(button, input, a, summary):focus-visible { outline: 3px solid #1659bd; outline-offset: 3px; }
.syttom19-map__legend { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .6rem 0 0; list-style: none; overflow-y: auto; }
.syttom19-map__legend li { margin: 0; padding: 0; }
.syttom19-map__legend button { display: flex; gap: .5rem; align-items: center; }
.syttom19-map__swatch { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.2rem; width: 1.2rem; height: 1.2rem; border: 1px solid #475569; border-radius: .2rem; color: #fff; }
.syttom19-map__pin { display: flex; width: 32px; height: 38px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 1px 5px #0008; justify-content: center; align-items: center; color: #fff; font: bold 20px/1 sans-serif; }
.syttom19-map .leaflet-popup-content { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.syttom19-map .leaflet-popup-content :is(strong, b) { font-weight: 700; }
.syttom19-map .leaflet-popup-content img { max-width: 100%; height: auto; }
.syttom19-map__status:empty { display: none; }
.syttom19-map__status { padding: .5rem; background: #fff5d6; }
/* Lite mode: the map is the whole widget, so it keeps no control spacing of its own. */
.syttom19-map--lite .leaflet-control-attribution { font-size: 10px; opacity: .75; }
.syttom19-map--lite .leaflet-container { background: #e8eef2; }
.syttom19-map .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
    .syttom19-map__controls label { display: flex; min-height: 36px; }
    .syttom19-map__legend { max-height: 10rem; }
    .syttom19-map__legend li, .syttom19-map__legend button { width: 100%; }
    .syttom19-map__canvas { max-height: 65vh; }
}