.leaflet-control-locate a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dm-control-size);
    min-height: var(--dm-control-size);
    color: var(--dm-text);
    background: var(--dm-surface-raised);
}

.leaflet-top.leaflet-left { left: var(--dm-map-occlusion-left, 0px); }
@media (min-width: 840px) {
    .leaflet-top.leaflet-left {
        top: auto;
        left: auto;
        right: calc(var(--dm-map-tools-right, 16px) + env(safe-area-inset-right));
        bottom: calc(24px + var(--dm-system-bottom-inset, 0px) + env(safe-area-inset-bottom));
    }
}
.dm-selection-marker { position: relative; width: 28px; height: 36px; }
.dm-selection-marker::before { content: ""; position: absolute; top: 1px; left: 2px; width: 24px; height: 24px; border: 3px solid var(--dm-surface); border-radius: 50% 50% 50% 0; background: var(--dm-brand); box-shadow: 0 2px 7px var(--dm-text-muted); transform: rotate(-45deg); }
.dm-selection-marker span { position: absolute; z-index: 1; top: 10px; left: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--dm-surface); }

.leaflet-control-locate a:focus-visible {
    outline: 3px solid var(--dm-focus);
    outline-offset: 2px;
}

.leaflet-bottom .leaflet-control-attribution {
    margin-bottom: calc(var(--dm-map-occlusion-bottom, 0px) + env(safe-area-inset-bottom));
    margin-left: var(--dm-map-occlusion-left, 0px);
}
@media (width < 840px) {
    .leaflet-bottom .leaflet-control-attribution {
        margin-bottom: calc(100dvh - var(--dm-visual-viewport-top, 0px) - var(--dm-visual-viewport-height, 100dvh) + max(env(safe-area-inset-bottom), var(--dm-system-bottom-inset, 0px)));
        margin-right: env(safe-area-inset-right);
    }
}