:root {
    --panel-left: 12px;
    --panel-top: calc(var(--banner-height) + 12px);
    --legend-width: 270px;
    --panel-gap: 10px;
}

/* fill the viewport without introducing page scroll */
#map {
    position: absolute;
    top: var(--banner-height);
    bottom: 0;
    width: 100%;
}

.map-panels {
    position: absolute;
    top: var(--panel-top);
    left: var(--panel-left);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap);
    width: var(--legend-width);
}

.zoom-viewer {
    position: absolute;
    top: 13px;
    right: 12px;
    z-index: 1;
    color: #000;
    font: 13px/1 system-ui, sans-serif;
}

.basemap-picker {
    box-sizing: border-box;
    display: inline-flex;
    align-self: flex-start;
    width: auto;
    margin: 0;
    padding: 3px;
    gap: 0;
    background: var(--panel-background);
    border: 0;
    border-radius: 7px;
    box-shadow: var(--panel-shadow);
    font: 12px/1.3 system-ui, sans-serif;
}

.basemap-picker__option {
    position: relative;
    display: block;
    cursor: pointer;
}

.basemap-picker__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.basemap-picker__option span {
    display: block;
    min-width: 58px;
    padding: 6px 9px;
    color: #555;
    border-radius: 5px;
    text-align: center;
    transition: color 120ms ease, background-color 120ms ease;
}

.basemap-picker__option input:checked + span {
    color: #fff;
    background: var(--ohaz-grey);
    font-weight: 600;
}

.basemap-picker__option input:focus-visible + span {
    outline: 2px solid var(--ohaz-yellow);
    outline-offset: 1px;
}

/* keep the Mapbox controls together immediately to the legend's right */
.mapboxgl-ctrl-top-left {
    top: 12px;
    left: calc(var(--panel-left) + var(--legend-width) + var(--panel-gap));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
    float: none;
    margin: 0 0 8px;
}

.mapboxgl-ctrl-home i {
    display: block;
    margin: auto;
    color: #333;
    font-size: 18px;
    line-height: 20px;
}

@media (max-width: 520px) {
    :root {
        --legend-width: 245px;
        --panel-gap: 8px;
    }
}