/* The map's own controls, on every page that draws one with js/map.js
   into a #map element. */
/* The base map picker and the overlay switches sit in one row,
   wrapping to the next when the map is too narrow, and leave
   room for the zoom buttons on the right. */
#map .maplibregl-ctrl-top-left {
    max-width: calc(100% - 50px);
}
#map .maplibregl-ctrl-top-left .maplibregl-ctrl {
    clear: none;
    margin-right: -2px;
}
/* Text and boxes big enough to read and tap without glasses:
   16 px, the same height as the base map picker. */
#map .maplibregl-ctrl-top-left label {
    font-size: 16px;
    line-height: 24px;
    padding: 7px 10px;
    display: block;
    cursor: pointer;
}
#map .maplibregl-ctrl-top-left select {
    font-size: 16px;
}
#map .maplibregl-ctrl-top-left input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
    vertical-align: -3px;
}
#map .map-ctrl-note {
    font-size: 14px;
    line-height: 20px;
    padding: 6px 10px;
}
#map .map-legend-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 4px;
    border: 0;
    background: none;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}
#map .map-legend-title:focus {
    outline: none;
}
#map .map-legend-title:focus-visible {
    outline: 2px solid #4d90fe;
}
#map .map-legend .map-legend-part {
    border-top: 1px solid #dee2e6;
    margin-top: 6px;
    padding-top: 6px;
}
#map .maplibregl-ctrl-top-left .map-ctrl-note {
    padding-top: 0;
}