.map-zoom-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    background: #f6f7f2;
    border-bottom: 1px solid #d8ddd1;
    color: #293d35;
}
.map-zoom-controls button {
    width: auto;
    min-width: 2.5rem;
    margin: 0;
    padding: .45rem .65rem;
    border: 1px solid #b9c6ba;
    border-radius: .35rem;
    background: #fff;
    color: #244d3c;
    font: inherit;
    line-height: 1.25;
    cursor: pointer;
}
.map-zoom-controls button:hover:not(:disabled) {
    border-color: #416d56;
    background: #e9f1e7;
}
.map-zoom-controls button:focus-visible,
svg.map-zoom-enabled:focus-visible {
    outline: 3px solid #a14c27;
    outline-offset: 2px;
}
.map-zoom-controls button:disabled {
    cursor: default;
    opacity: .5;
}
.map-zoom-controls button[aria-pressed="true"] {
    background: #2f5b42;
    color: #fff;
    border-color: #2f5b42;
}
.map-zoom-percentage {
    flex: 0 0 4.1rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.map-zoom-help {
    flex: 1 1 16rem;
    padding: .1rem .2rem;
    font-size: .82rem;
    line-height: 1.4;
    color: #4d5e53;
}
svg.map-zoom-enabled {
    overflow: hidden;
}
svg.map-zoom-pan-enabled,
svg.map-zoom-pan-enabled * {
    cursor: grab;
}
svg.map-zoom-pan-enabled,
svg.map-zoom-dragging {
    touch-action: none;
}
svg.map-zoom-dragging,
svg.map-zoom-dragging * {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}
svg.map-zoom-enabled.is-placing-sc,
svg.map-zoom-enabled.is-placing-sc *,
svg.map-zoom-enabled.is-placing-layout,
svg.map-zoom-enabled.is-placing-layout * {
    cursor: crosshair;
}
@media (max-width: 480px) {
    .map-zoom-controls { gap: .3rem; padding: .45rem; }
    .map-zoom-controls button { min-height: 2.6rem; }
    .map-zoom-help { flex-basis: 100%; }
}