.bwm {
    --bwm-ink: #153d58;
    --bwm-muted: #486477;
    --bwm-line: #ccdfec;
    color: var(--bwm-ink);
    background: #f5faff;
    width: 100%;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.bwm [hidden] { display: none !important; }
.bwm *, .bwm *::before, .bwm *::after { box-sizing: border-box; }
.bwm-content { min-width: 0; }
.bwm-map-panel { position: relative; }
.bwm-map, .bwm-external {
    display: block;
    width: 100%;
    height: clamp(280px, 80svh, var(--bwm-height));
    min-height: 280px;
    border: 0;
    background: #e3eef5;
}
.bwm-map { z-index: 0; }
.bwm-map:focus-visible { outline: 3px solid #146daf; outline-offset: -3px; }
.bwm-map .leaflet-popup-content { color: var(--bwm-ink); margin: .75rem; line-height: 1.5; }
.bwm-map .leaflet-popup-content p { margin: .25rem 0; }
.bwm-map .leaflet-tooltip { white-space: normal; max-width: 17rem; }
.bwm-map .leaflet-control-attribution { display: none; }
.bwm-legend {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    z-index: 400;
    padding: .3rem .5rem;
    background: #fff;
    color: var(--bwm-ink);
    font-size: .75rem;
    max-width: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
    overflow: auto;
}
.bwm .bwm-legend > summary { padding: .2rem; font-size: .75rem; font-weight: 400; }
.bwm-legend img { display: block; max-width: 100%; max-height: 250px; width: auto; margin: .5rem auto; }
.bwm-status { padding: .4rem .75rem; font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; min-height: 2rem; }
.bwm-status.is-error { background: #fff1dc; color: #773c00; }
.bwm-toolbar, .bwm-sources {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .5rem .75rem;
    border-top: 1px solid var(--bwm-line);
}
.bwm-toolbar { background: #eaf4fb; }
.bwm-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; width: 100%; min-width: 0; }
.bwm-toolbar-row + .bwm-toolbar-row { padding-top: .5rem; border-top: 1px solid var(--bwm-line); }
.bwm-toolbar-row > *, .bwm-sources > * { min-width: 0; max-width: 100%; margin: 0; }
.bwm-toolbar .btn { min-width: 2.75rem; min-height: 2.75rem; }
.bwm-control, .bwm-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; }
.bwm-main-controls .bwm-control { flex: 1 1 16rem; }
.bwm-main-controls [data-bwm-map-control] { flex-basis: 12rem; }
.bwm-control .form-select { flex: 1 1 0; width: 100%; min-width: 0; min-height: 2.75rem; }
.bwm-control .form-range { flex: 1 1 0; width: 100%; min-width: 0; min-height: 2.75rem; margin: 0; accent-color: #146daf; touch-action: pan-y; }
.bwm-opacity { flex: 1 1 8rem; }
.bwm-control.bwm-timeline { flex: 1 1 14rem; }
.bwm-navigation, .bwm-playback { display: flex; flex-wrap: wrap; gap: .35rem; }
.bwm-navigation { margin-left: auto; }
.bwm-toggle { min-height: 2.75rem; cursor: pointer; }
.bwm-toggle .form-check-input { flex-shrink: 0; margin: 0; }
.bwm-sources { color: var(--bwm-muted); font-size: .75rem; gap: .5rem .75rem; overflow-wrap: anywhere; }
.bwm-sources a { color: #165f91; text-underline-offset: .15em; }
.bwm-sources [data-bwm-source-time] { margin-left: auto; text-align: right; }
.bwm-data-panel { padding: .75rem; min-width: 0; }
.bwm-data-panel p { margin: 0 0 .75rem; color: var(--bwm-muted); font-size: .875rem; }
.bwm-chart { width: 100%; height: 260px; display: block; overflow: visible; }
.bwm-chart text { font: 12px var(--body-font-family, sans-serif); fill: var(--bwm-muted); }
.bwm-chart .bwm-temp-line { stroke: #176dab; stroke-width: 2.5; fill: none; }
.bwm-chart .bwm-wet-line { stroke: #8d4399; stroke-width: 2.5; fill: none; }
.bwm-chart .bwm-rain-bar { fill: #60accb; }
.bwm-chart .bwm-grid { stroke: #ccdfec; stroke-width: 1; }
.bwm-chart .bwm-threshold { stroke: #287c4d; stroke-width: 1.5; stroke-dasharray: 5 4; }
.bwm-table-scroll { max-width: 100%; overflow: auto; max-height: 28rem; scrollbar-width: thin; scrollbar-color: #5890b5 #e5f0f7; }
.bwm-table { margin-bottom: 0; font-size: .875rem; white-space: nowrap; --table-bg: transparent; }
.bwm-table th { color: var(--bwm-ink); }
.bwm-table th, .bwm-table td { padding: .5rem .65rem; }
.bwm-table thead th { position: sticky; top: 0; z-index: 1; background: #eaf4fb; }
.bwm-table th:first-child { position: sticky; left: 0; z-index: 2; background: #eaf4fb; }
.bwm-table thead th:first-child { z-index: 3; }
.bwm-table .is-good { color: #185833; background: #e3f3e8; }
.bwm-table .is-marginal { color: #754100; background: #fff1da; }
.bwm-table .is-bad { color: #872e25; background: #fff0ed; }
.bwm-sun { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0; font-size: .875rem; }
.bwm details > summary { cursor: pointer; color: #165f91; padding-block: .5rem; font-weight: 600; }
.bwm ::selection { color: #fff; background: #176dab; }
.bwm :focus-visible { outline: 2px solid #146daf; outline-offset: 2px; }
.bms-stage .bwm-map, .bms-stage .bwm-external { height: var(--bwm-full-height, calc(100svh - 190px)); }
@media (max-width: 575px) {
    .bwm-toolbar, .bwm-sources { padding-inline: .5rem; }
    .bwm-status { padding-inline: .5rem; }
    .bwm-data-panel { padding: .5rem; }
    .bwm-chart { height: 240px; }
}