.legend-dock {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 20px));
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    pointer-events: none;
}
.legend-dock-bottom {
    bottom: calc(80px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    max-height: calc(100dvh - 180px);
}
.legend-dock-side {
    right: 16px;
    top: 112px;
    width: 304px;
    align-items: flex-end;
    max-height: calc(100dvh - 204px);
}
/* Override legacy fixed offsets, including mobile !important rules. */
.legend-dock > :is(#wind-radii-legend, #radar-legend, #doppler-legend, #sst-legend, #shear-legend, #wind-field-legend) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto;
    max-width: 100% !important;
    min-width: 0 !important;
    pointer-events: auto;
}
.legend-dock > :is(#radar-legend, #doppler-legend, #sst-legend) { width: 340px !important; }
.legend-dock > #shear-legend { width: 304px !important; }
.legend-dock > #wind-field-legend { width: 90px !important; }
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .legend-dock-bottom {
        bottom: calc(92px + env(safe-area-inset-bottom) + var(--side-legend-height, 0px));
        max-height: calc(100dvh - 166px - var(--side-legend-height, 0px));
        /* Reserve the right-hand mobile HUD rail as well as the bottom toolbar. */
        left: 10px;
        transform: none;
        width: min(360px, calc(100vw - 84px));
        align-items: flex-start;
    }
    .legend-dock-side {
        top: auto;
        bottom: calc(82px + env(safe-area-inset-bottom));
        left: 10px;
        right: 74px;
        width: auto;
        max-height: calc(100dvh - 156px);
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }
    .legend-dock-side > #shear-legend {
        width: min(240px, calc(100% - 72px)) !important;
        padding: 8px !important;
    }
    .legend-dock-side > #wind-field-legend {
        width: 64px !important;
        padding: 8px 6px;
        margin-left: auto;
    }
    .legend-dock-side .shear-legend-header { gap: 5px; }
    .legend-dock-side .shear-legend-header > div { min-width: 0; }
    .legend-dock-side .shear-legend-symbol { width: 16px; height: 16px; }
    .legend-dock-side .shear-legend-title { font-size: 10px; letter-spacing: .06em; }
    .legend-dock-side .shear-legend-level { font-size: 9px; letter-spacing: 0; }
    .legend-dock-side .shear-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; gap: 6px; }
    .legend-dock-side .shear-scale span { padding-top: 3px; }
    .legend-dock-side .shear-legend-note { margin-top: 8px; padding-top: 6px; line-height: 1.4; }
    .legend-dock-side .wind-field-unit { margin-bottom: 8px; }
    .legend-dock-side .wind-field-bin { height: 13px; gap: 4px; font-size: 9px; }
    .legend-dock-side .wind-field-bin i { width: 5px; }
    .legend-dock-side .wind-field-scale { gap: 2px; }
    @media (max-width: 359px) {
        .legend-dock-side .shear-legend-symbol { display: none; }
    }
    /* A short landscape viewport has width for a row, not height for two
       stacked rails. Keep other legends beside, rather than above, these. */
    @media (max-height: 520px) and (min-width: 600px) {
        .legend-dock-bottom {
            bottom: calc(82px + env(safe-area-inset-bottom));
            width: min(340px, calc(45vw - 45px));
            max-height: calc(100dvh - 156px);
        }
        .legend-dock-side { left: calc(20px + min(340px, 45vw - 45px)); }
    }
}