/*
 * MeteOne — map-scoped Material 3 / Expressive-inspired presentation.
 * Load AFTER the application styles. The owning map root opts in with
 * data-meteone-design="material"; the rest of the WordPress page is unaffected.
 *
 * No external runtime, no Material Web Labs dependency, no global reset.
 * This is a locally authored adaptation, not an official Google component kit.
 * Roboto Condensed, approved weather icons and marker colour scales are kept.
 * Control size / geometry tokens and the application rail positions are kept.
 */

.meteone-live-stations[data-meteone-design="material"] {
    --m3e-primary: #00669c;
    --m3e-on-primary: #fff;
    --m3e-primary-container: #dceef8;
    --m3e-on-primary-container: #004e78;
    --m3e-surface: rgb(248 252 254 / 98%);
    --m3e-surface-container: rgb(235 245 250 / 98%);
    --m3e-surface-container-high: #e4f0f6;
    --m3e-control-surface: rgb(248 252 254 / 96%);
    --m3e-on-surface: #183545;
    --m3e-on-surface-variant: #496270;
    --m3e-outline: #7895a6;
    --m3e-outline-variant: #c0d7e4;
    --m3e-hover: #e7f4fa;
    --m3e-hover-text: #005f8c;
    --m3e-focus: #00669c;
    --m3e-success-container: #e3f0e9;
    --m3e-on-success-container: #38644d;
    --m3e-error-container: #f4e6e7;
    --m3e-on-error-container: #8a4b52;
    --m3e-inverse-surface: #183b50;
    --m3e-on-inverse-surface: #f4f9fc;
    --m3e-shadow-control: 0 2px 5px rgb(17 49 68 / 16%);
    --m3e-shadow-panel: 0 3px 8px rgb(17 49 68 / 10%), 0 12px 28px rgb(17 49 68 / 13%);
    --m3e-shadow-dialog: 0 4px 10px rgb(17 49 68 / 12%), 0 16px 40px rgb(17 49 68 / 20%);
    --m3e-shape-control: 12px;
    --m3e-shape-panel: 16px;
    --m3e-state-duration: 120ms;
    --m3e-panel-duration: 280ms;
    --m3e-panel-close-duration: 180ms;
    --m3e-content-duration: 180ms;
    --m3e-press-duration: 400ms;
    --m3e-emphasized: cubic-bezier(.2, 0, 0, 1);
    --meteone-control-radius: var(--m3e-shape-control);
    --meteone-control-shadow: var(--m3e-shadow-control);
    --meteone-hover-background: var(--m3e-hover);
    --meteone-hover-color: var(--m3e-hover-text);
    --meteone-gps-success-background: var(--m3e-success-container);
    --meteone-gps-success-color: var(--m3e-on-success-container);
    --meteone-gps-error-background: var(--m3e-error-container);
    --meteone-gps-error-color: var(--m3e-on-error-container);
    --meteone-feedback-background: var(--m3e-inverse-surface);
    --meteone-feedback-color: var(--m3e-on-inverse-surface);
    --meteone-feedback-error-background: var(--m3e-error-container);
    --meteone-feedback-error-color: var(--m3e-on-error-container);
    color: var(--m3e-on-surface);
}

/* One floating-control skin. Do not increase the target on hover or animate
 * dimensions: identical siblings must not jostle the existing Leaflet rails.
 * Border-box preserves every current 40/44/landscape pixel size. */
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
    .meteone-map-control-button,
    .meteone-station-menu__toggle,
    .meteone-map-tools-control__item,
    .meteone-map-tools-control__option,
    .meteone-map-tools-control__quick-actions > button,
    .meteone-certificate-quick-control
) {
    box-sizing: border-box;
    border: 1px solid var(--m3e-outline-variant) !important;
    border-radius: var(--m3e-shape-control) !important;
    background: var(--m3e-control-surface) !important;
    background-image: none !important;
    box-shadow: var(--m3e-shadow-control) !important;
    color: var(--m3e-on-surface);
    font-family: var(--meteone-map-font);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--m3e-state-duration) ease-out,
        border-color var(--m3e-state-duration) ease-out,
        color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
    .meteone-station-menu__toggle[aria-expanded="true"],
    .meteone-station-search__toggle[aria-expanded="true"],
    .meteone-map-tools-control__toggle.is-active,
    .meteone-map-tools-control__item.is-active,
    .meteone-map-tools-control__option[aria-checked="true"],
    .meteone-radar-marker-control__toggle.is-active,
    .meteone-certificate-quick-control[aria-pressed="true"]
) {
    border-color: #7baccc !important;
    background: var(--m3e-primary-container) !important;
    color: var(--m3e-on-primary-container) !important;
    box-shadow: var(--m3e-shadow-control) !important;
}

@media (hover: hover) and (pointer: fine) {
    .meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
        .meteone-map-control-button,
        .meteone-station-menu__toggle,
        .meteone-map-tools-control__item,
        .meteone-map-tools-control__option,
        .meteone-map-tools-control__quick-actions > button,
        .meteone-certificate-quick-control
    ):not(:disabled):not([aria-disabled="true"]):hover {
        border-color: #87b3cd !important;
        background: var(--m3e-hover) !important;
        box-shadow: var(--m3e-shadow-control) !important;
        color: var(--m3e-hover-text) !important;
    }
}

/* Native touch :hover may linger. A non-active touch target returns to its
 * normal surface; a selected target keeps its selection after the tap. */
@media (hover: none), (pointer: coarse) {
    .meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
        .meteone-map-control-button,
        .meteone-station-menu__toggle,
        .meteone-map-tools-control__item,
        .meteone-map-tools-control__option
    ):not(.is-active):not(.has-location):not(.has-error):not([aria-expanded="true"]):not([aria-checked="true"]):hover {
        background: var(--m3e-control-surface) !important;
        color: var(--m3e-on-surface) !important;
        box-shadow: var(--m3e-shadow-control) !important;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
        .meteone-map-control-button,
        .meteone-station-menu__toggle,
        .meteone-map-tools-control__item,
        .meteone-map-tools-control__option
    ):not(:disabled):active {
        background: var(--m3e-hover) !important;
        color: var(--m3e-hover-text) !important;
    }
}

/* Zoom's existing state-overlay must not repaint a different rectangular
 * white background over the common skin. Its text and hit area stay intact. */
.meteone-live-stations[data-meteone-design="material"] .meteone-zoom-control a.meteone-map-control-button::before {
    background: transparent !important;
    box-shadow: none !important;
}

/* GPS keeps the muted, meaningful success / error colours. */
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
    .meteone-geolocation-control__button.has-location,
    .meteone-geolocation-quick-control__stop
),
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map :is(
    .meteone-geolocation-control__button.has-location,
    .meteone-geolocation-quick-control__stop
):is(:hover, :active, :focus-visible) {
    border-color: #adc9b9 !important;
    background: var(--m3e-success-container) !important;
    color: var(--m3e-on-success-container) !important;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map .meteone-geolocation-control__button.has-error,
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map .meteone-geolocation-control__button.has-error:is(:hover, :active, :focus-visible),
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map .meteone-geolocation-quick-control.has-error .meteone-geolocation-quick-control__stop {
    border-color: #d5b9bc !important;
    background: var(--m3e-error-container) !important;
    color: var(--m3e-on-error-container) !important;
}

/* Navigation rail and menus: distinct surface roles, not individual pills.
 * Keep intrinsic width measurement and the complete-height scroll behaviour. */
.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__panel {
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface-container);
    box-shadow: var(--m3e-shadow-panel);
    color: var(--m3e-on-surface);
    scrollbar-color: #8daec2 transparent;
    scrollbar-width: thin;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__category-button,
    .meteone-station-menu__certificate
) {
    border-radius: var(--m3e-shape-control);
    color: var(--m3e-on-surface);
    transition: background-color var(--m3e-state-duration) ease-out, color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__category-button:is(.is-active, [aria-expanded="true"]) {
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-primary-container);
    box-shadow: none;
    color: var(--m3e-on-primary-container);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__category-button:is(.is-active, [aria-expanded="true"]) .meteone-station-menu__icon {
    border-radius: var(--m3e-shape-control);
    background: transparent;
    outline: 2px solid var(--m3e-primary);
    outline-offset: -2px;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__panel:is(.is-open, .has-open-category, .is-category-closing, .is-closing) .meteone-station-menu__item-label {
    color: inherit;
    font-weight: 700;
    letter-spacing: .035em;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__submenu,
    .meteone-station-menu__submenu.is-daily-extremes,
    .meteone-station-menu__radar-submenu
) {
    padding: 8px;
    border: 1px solid #d3e5ee;
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-surface);
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__metric,
    .meteone-station-menu__radar-option
) {
    min-height: 32px;
    margin-block: 2px;
    padding-block: 5px;
    padding-inline: 5px;
    border-radius: 8px;
    background: transparent;
    color: var(--m3e-on-surface);
    font: 600 13px/1.35 var(--meteone-map-font);
    transition: background-color var(--m3e-state-duration) ease-out, color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__metric,
    .meteone-station-menu__radar-option
).is-active {
    background: var(--m3e-primary);
    color: var(--m3e-on-primary);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__history-label {
    margin-bottom: 6px;
    color: var(--m3e-on-surface-variant);
    font-size: 12px;
    font-weight: 650;
}

/* Right action stack deliberately stays a column of separate equal buttons.
 * No enclosing elevated card: that would join the shadows again. */
.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-map-tools-control__panel,
    .meteone-map-tools-control__actions,
    .meteone-map-tools-control__basemaps,
    .meteone-map-tools-control__quick-actions
) {
    background: transparent;
    box-shadow: none;
}

/* Search field and results are one continuous surface with no spacer. */
.meteone-live-stations[data-meteone-design="material"] .meteone-station-search .meteone-station-search__panel {
    padding: 0;
    border-radius: var(--m3e-shape-control) !important;
    background: var(--m3e-surface);
    box-shadow: var(--m3e-shadow-panel);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__input {
    height: var(--meteone-map-control-size, 40px);
    padding-inline: 13px;
    border: 1px solid var(--m3e-outline);
    background: var(--m3e-control-surface);
    color: var(--m3e-on-surface);
    font: 650 16px/1 var(--meteone-map-font);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__input::placeholder {
    color: var(--m3e-on-surface-variant);
    font-weight: 500;
    opacity: 1;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-search__results,
    .meteone-station-search__message
) {
    margin-top: 0;
    border-color: var(--m3e-outline);
    border-top: 0;
    background: var(--m3e-surface);
    color: var(--m3e-on-surface-variant);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__option {
    min-height: 42px;
    padding: 10px 13px;
    border-bottom-color: #d9e8ef;
    background: transparent;
    color: var(--m3e-on-surface);
    font: 600 14px/1.25 var(--meteone-map-font);
    transition: background-color var(--m3e-state-duration) ease-out, color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__availability {
    font-size: 11px;
    font-weight: 650;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__option.is-active {
    background: var(--m3e-hover);
    color: var(--m3e-hover-text);
}

/* Filter / date / installation are small, tonal, fully native HTML cards. */
.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-value-filter,
    .meteone-date-calendar,
    .meteone-basemap-control__panel,
    .meteone-map-tools-control__install-help
) {
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface-container);
    box-shadow: var(--m3e-shadow-panel);
    color: var(--m3e-on-surface);
    font-family: var(--meteone-map-font);
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-value-filter__heading,
    .meteone-map-tools-control__install-heading
) {
    color: var(--m3e-on-surface);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-value-filter__metric {
    margin-block: 5px 12px;
    color: var(--m3e-primary);
    font-weight: 650;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-value-filter__caption,
    .meteone-date-calendar__weekday
) {
    color: var(--m3e-on-surface-variant);
    font-weight: 650;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-value-filter__input,
    .meteone-station-menu__history-date,
    .meteone-station-menu__date-trigger,
    .meteone-date-calendar__month-select,
    .meteone-date-calendar__year-input
) {
    border: 1px solid var(--m3e-outline);
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-surface);
    color: var(--m3e-on-surface);
    font-family: var(--meteone-map-font);
    box-shadow: none;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__date-trigger,
    .meteone-date-calendar__month-select,
    .meteone-date-calendar__year-input
) {
    font-size: 13px;
    font-weight: 650;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-value-filter__apply,
    .meteone-station-value-filter__reset,
    .meteone-map-tools-control__install-close,
    .meteone-live-stations__update-notice button
) {
    min-height: 38px;
    padding-inline: 14px;
    border: 1px solid var(--m3e-primary);
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-primary);
    color: var(--m3e-on-primary);
    font-family: var(--meteone-map-font);
    font-weight: 700;
    box-shadow: none;
    transition: background-color var(--m3e-state-duration) ease-out, color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-value-filter__reset {
    border-color: var(--m3e-outline-variant);
    background: var(--m3e-surface);
    color: var(--m3e-primary);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-value-filter__close {
    border-radius: 9px;
    background: transparent;
    color: var(--m3e-on-surface-variant);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-value-filter__input[aria-invalid="true"] {
    border-color: var(--m3e-on-error-container);
    background: var(--m3e-error-container);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-station-value-filter__error {
    color: var(--m3e-on-error-container);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar__header {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--m3e-outline-variant);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar button {
    border-radius: 10px;
    color: var(--m3e-on-surface);
    transition: background-color var(--m3e-state-duration) ease-out, color var(--m3e-state-duration) ease-out;
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar__navigation {
    background: var(--m3e-surface);
    color: var(--m3e-primary);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar__day.is-selected {
    background: var(--m3e-primary);
    color: var(--m3e-on-primary);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar__day.is-today {
    box-shadow: inset 0 0 0 1px var(--m3e-primary);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar__footer {
    border-top-color: var(--m3e-outline-variant);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar button:disabled {
    background: transparent;
    color: #8397a3;
}

/* Common hover colour for every list / text action, including navigation
 * categories. Disabled / checked semantic states are not turned into hover. */
@media (hover: hover) and (pointer: fine) {
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-station-menu__category-button,
        .meteone-station-menu__certificate,
        .meteone-station-menu__metric,
        .meteone-station-menu__radar-option,
        .meteone-station-search__option,
        .meteone-station-menu__date-trigger,
        .meteone-date-calendar button,
        .meteone-basemap-control__option,
        .meteone-station-value-filter__apply,
        .meteone-station-value-filter__reset,
        .meteone-station-value-filter__close,
        .meteone-map-tools-control__install-close,
        .meteone-live-stations__update-notice button
    ):not(:disabled):hover {
        background: var(--m3e-hover);
        color: var(--m3e-hover-text);
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__category-button:is(.is-active, [aria-expanded="true"]):hover {
        background: var(--m3e-hover);
        color: var(--m3e-hover-text);
    }
}

/* Informational feedback is one family, independent of its original control.
 * Preserve the existing placement and message stack so radar / GPS / capture
 * never acquire separate offsets or compete for the same bottom row. */
.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-count,
    .meteone-map-feedback-stack > .meteone-map-feedback,
    .meteone-radar-status,
    .meteone-geolocation-control__status,
    .meteone-screenshot-control__status,
    .meteone-live-stations__update-notice
) {
    border: 1px solid #3e647b;
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-inverse-surface);
    box-shadow: var(--m3e-shadow-control);
    color: var(--m3e-on-inverse-surface);
    font-family: var(--meteone-map-font);
    font-weight: 650;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-map-feedback-stack > .meteone-map-feedback,
    .meteone-geolocation-control__status,
    .meteone-screenshot-control__status
).is-error {
    border-color: #d5b9bc;
    background: var(--m3e-error-container);
    color: var(--m3e-on-error-container);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-map-control-tooltip,
.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__panel:not(.is-open):not(.has-open-category):not(.is-category-closing):not(.is-closing) .meteone-station-menu__item-label {
    padding: 7px 10px;
    border: 1px solid var(--m3e-outline-variant);
    border-radius: 10px;
    background: #e7f4fa;
    box-shadow: 0 2px 8px rgb(17 49 68 / 10%);
    color: var(--m3e-on-primary-container);
    font: 600 12px/1.35 var(--meteone-map-font);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__status {
    border-color: var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface-container);
    box-shadow: var(--m3e-shadow-panel);
    color: var(--m3e-on-surface);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__status.is-loading {
    /* Refine the one existing loader, rather than adding competing spinners.
     * The live-region text stays available to assistive technology. */
    width: 48px;
    height: 48px;
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-control-surface);
    box-shadow: var(--m3e-shadow-control);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__status.is-loading::before {
    width: 26px;
    height: 26px;
    border-color: #c3dfed;
    border-top-color: var(--m3e-primary);
    border-right-color: var(--m3e-primary);
    animation-duration: 1000ms;
}

/* Outer widget chrome only: iframe content belongs to the widget, not this
 * map skin. This deliberately does not recolour meteorological values. */
.meteone-live-stations[data-meteone-design="material"] .meteone-widget-popup__error {
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface-container);
    color: var(--m3e-on-surface);
}

.meteone-live-stations[data-meteone-design="material"] .leaflet-popup a.leaflet-popup-close-button {
    box-sizing: border-box;
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-control-surface);
    box-shadow: var(--m3e-shadow-control);
    color: var(--m3e-on-surface);
}

.meteone-live-stations[data-meteone-design="material"] .leaflet-popup a.leaflet-popup-close-button:hover {
    background: var(--m3e-hover);
    color: var(--m3e-hover-text);
}

/* Leaflet owns the OUTER popup transform: it is the geographic anchor.
 * Reveal only its inner surface and close button, together, after the
 * existing widget lifecycle reports ready (or an actionable error).
 * The loading popup remains hidden by popup.css; there is no white shell,
 * extra spinner, scale effect or delayed close control. */
.meteone-live-stations[data-meteone-design="material"] .meteone-station-popup:has(.meteone-widget-popup:is(.is-ready, .has-error)) :is(
    .leaflet-popup-content-wrapper,
    .leaflet-popup-close-button
) {
    animation: m3e-meteone-popup-ready 160ms var(--m3e-emphasized) both;
}

@keyframes m3e-meteone-popup-ready {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.meteone-live-stations[data-meteone-design="material"] .leaflet-popup.radar-status-popup .leaflet-popup-content-wrapper {
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface-container);
    box-shadow: var(--m3e-shadow-dialog);
    color: var(--m3e-on-surface);
}

.meteone-live-stations[data-meteone-design="material"] .leaflet-popup.radar-status-popup .leaflet-popup-content {
    color: var(--m3e-on-surface);
}

.meteone-live-stations[data-meteone-design="material"] .leaflet-popup.radar-status-popup .leaflet-popup-tip {
    background: var(--m3e-surface-container);
    box-shadow: none;
}

/* Both geographic popup families share their enter motion and close target.
 * Never animate Leaflet's outer positioning transform. */
.meteone-live-stations[data-meteone-design="material"] .leaflet-popup.radar-status-popup :is(
    .leaflet-popup-content-wrapper,
    .leaflet-popup-close-button
) {
    animation: m3e-meteone-popup-ready 160ms var(--m3e-emphasized) both;
}

.meteone-live-stations[data-meteone-design="material"] .radar-status-popup__title {
    color: var(--m3e-primary);
    font-size: 16px;
}

.meteone-live-stations[data-meteone-design="material"] .radar-status-popup__value--active {
    color: var(--m3e-on-success-container);
}

.meteone-live-stations[data-meteone-design="material"] .radar-status-popup__value--inactive {
    color: var(--m3e-on-error-container);
}

/* Webcam content stays dark for photography; toolbars and controls follow
 * the same tonal vocabulary. Media / weather marker images are not touched. */
.meteone-live-stations[data-meteone-design="material"] .meteone-webcam-gallery__toolbar {
    background: var(--m3e-inverse-surface);
    font-family: var(--meteone-map-font);
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-webcam-gallery__expand,
    .meteone-webcam-gallery__external,
    .meteone-webcam-gallery__arrow
) {
    border-color: #b8d4e3;
    border-radius: var(--m3e-shape-control);
    background: var(--m3e-control-surface);
    box-shadow: var(--m3e-shadow-control);
    color: var(--m3e-on-surface);
    font-family: var(--meteone-map-font);
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-webcam-gallery__expand,
    .meteone-webcam-gallery__external,
    .meteone-webcam-gallery__arrow
):hover {
    background: var(--m3e-hover);
    color: var(--m3e-hover-text);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-webcam-overlay__dialog {
    border-color: #4d7087;
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-inverse-surface);
    box-shadow: var(--m3e-shadow-dialog);
}

.meteone-live-stations[data-meteone-design="material"] .meteone-webcam-overlay__title {
    font-family: var(--meteone-map-font);
    font-weight: 700;
}

.meteone-live-stations[data-meteone-design="material"] button.meteone-webcam-overlay__close {
    border: 1px solid var(--m3e-outline-variant) !important;
    border-radius: var(--m3e-shape-control) !important;
    background: var(--m3e-control-surface) !important;
    box-shadow: var(--m3e-shadow-control) !important;
    color: var(--m3e-on-surface) !important;
}

.meteone-live-stations[data-meteone-design="material"] button.meteone-webcam-overlay__close:hover {
    background: var(--m3e-hover) !important;
    color: var(--m3e-hover-text) !important;
}

/* Focus is a recognisable ring, not another hover skin. Target dimensions
 * remain constant and the ring is inset where the existing scrollers clip. */
.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-map-control-button,
    .meteone-station-menu__toggle,
    .meteone-station-menu__category-button,
    .meteone-station-menu__certificate,
    .meteone-station-menu__metric,
    .meteone-station-menu__radar-option,
    .meteone-map-tools-control__item,
    .meteone-map-tools-control__option,
    .meteone-station-search__option,
    .meteone-station-value-filter button,
    .meteone-date-calendar button,
    .meteone-webcam-gallery button,
    .meteone-webcam-gallery a,
    .meteone-webcam-overlay__close,
    .leaflet-popup-close-button
):focus-visible {
    outline: 3px solid var(--m3e-focus) !important;
    outline-offset: -3px;
}

/* An inset blue ring disappears on a filled blue selection. Use a white
 * inset ring there, without changing size, colour semantics or elevation. */
.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-menu__metric.is-active,
    .meteone-station-menu__radar-option.is-active,
    .meteone-date-calendar__day.is-selected,
    .meteone-station-search__option.is-active,
    .meteone-station-value-filter__apply,
    .meteone-map-tools-control__install-close,
    .meteone-live-stations__update-notice button
):focus-visible {
    outline: 2px solid var(--m3e-on-primary) !important;
    outline-offset: -4px;
}

.meteone-live-stations[data-meteone-design="material"] :is(
    .meteone-station-search__input,
    .meteone-station-value-filter__input,
    .meteone-station-menu__history-date,
    .meteone-station-menu__date-trigger,
    .meteone-date-calendar select,
    .meteone-date-calendar input
):focus-visible {
    border-color: var(--m3e-primary);
    outline: 2px solid var(--m3e-primary);
    outline-offset: -2px;
}

/* Do not resurface unavailable actions. All display/hidden decisions stay
 * with the existing application; this skin modifies presentation only. */
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map .meteone-map-tools-control .meteone-map-tools-control__actions .meteone-map-tools-control__item:is(:disabled, [aria-disabled="true"], .is-disabled),
.meteone-live-stations[data-meteone-design="material"] .meteone-live-stations__map .meteone-map-tools-control .meteone-map-tools-control__actions .meteone-map-tools-control__item:is(:disabled, [aria-disabled="true"], .is-disabled):is(:hover, :active, :focus, :focus-visible) {
    background: var(--m3e-control-surface) !important;
    box-shadow: var(--m3e-shadow-control) !important;
    color: #6c838f !important;
}

/* Class-keyframe fallback only. The local expressive-motion engine owns
 * completion and reads these same duration tokens when WAAPI is available.
 * Managed surfaces suppress these keyframes to prevent two animations from
 * fighting. Clip-path preserves the left panel's centred base transform. */
.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__submenu.is-opening {
    animation: m3e-meteone-reveal-down var(--m3e-panel-duration) var(--m3e-emphasized) both;
}
.meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__submenu.is-closing {
    animation: m3e-meteone-reveal-down var(--m3e-panel-close-duration) ease-in reverse both;
}
.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__panel.is-opening {
    animation: m3e-meteone-search-left var(--m3e-panel-duration) var(--m3e-emphasized) both;
}
.meteone-live-stations[data-meteone-design="material"] .meteone-station-search__panel.is-closing {
    animation: m3e-meteone-search-left var(--m3e-panel-close-duration) ease-in reverse both;
}
@keyframes m3e-meteone-search-left {
    from { opacity: 1; clip-path: inset(0 0 0 100% round 12px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
}
.meteone-live-stations[data-meteone-design="material"] .meteone-map-tools-control__panel.is-opening {
    animation: m3e-meteone-tools-up var(--m3e-panel-duration) var(--m3e-emphasized) both;
}
.meteone-live-stations[data-meteone-design="material"] .meteone-map-tools-control__panel.is-closing {
    animation: m3e-meteone-tools-up var(--m3e-panel-close-duration) ease-in reverse both;
}
.meteone-live-stations[data-meteone-design="material"] :is(.meteone-station-value-filter, .meteone-map-tools-control__basemaps).is-opening {
    animation: m3e-meteone-reveal-left var(--m3e-panel-duration) var(--m3e-emphasized) both;
}
.meteone-live-stations[data-meteone-design="material"] :is(.meteone-station-value-filter, .meteone-map-tools-control__basemaps).is-closing {
    animation: m3e-meteone-reveal-left var(--m3e-panel-close-duration) ease-in reverse both;
}

@keyframes m3e-meteone-reveal-down {
    from { opacity: .25; clip-path: inset(0 0 100% 0 round 12px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes m3e-meteone-reveal-right {
    from { opacity: .25; clip-path: inset(0 100% 0 0 round 12px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes m3e-meteone-reveal-left {
    from { opacity: .25; clip-path: inset(0 0 0 100% round 12px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes m3e-meteone-tools-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.meteone-live-stations[data-meteone-design="material"] .m3e-motion-managed:is(.is-opening, .is-closing) {
    animation: none !important;
}

/* Only an empty surface interpolates size. Text, icons and action targets
 * remain at their native scale. This transient layer is absent in Current. */
.meteone-live-stations[data-meteone-design="material"] .m3e-surface-transition {
    position: absolute;
    z-index: 999;
    box-sizing: border-box;
    pointer-events: none;
    border: 1px solid var(--m3e-outline-variant);
    border-radius: var(--m3e-shape-panel);
    background: var(--m3e-surface);
    box-shadow: var(--m3e-shadow-panel);
    transform-origin: top left;
}

.meteone-live-stations[data-meteone-design="material"] .m3e-surface-transitioning {
    background: transparent !important;
    box-shadow: none !important;
}

/* The state layer is clipped inside its own command. It never adds a lasting
 * active box, changes shadows or scales the command's text/approved icon. */
.meteone-live-stations[data-meteone-design="material"] .m3e-ripple-host {
    isolation: isolate;
}

.meteone-live-stations[data-meteone-design="material"] .m3e-ripple-relative {
    position: relative;
}

.meteone-live-stations[data-meteone-design="material"] .m3e-ripple-clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.meteone-live-stations[data-meteone-design="material"] .m3e-ripple {
    position: absolute;
    z-index: 0;
    display: block;
    border-radius: 50%;
    background: var(--m3e-primary);
    pointer-events: none;
}

@media (max-width: 999px) {
    /* Width sizers must follow category tracking, otherwise labels can be
     * wider than the hidden row the current JS uses for intrinsic sizing. */
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__category-width-row {
        font-weight: 700;
        letter-spacing: .035em;
    }
    .meteone-live-stations[data-meteone-design="material"] :is(.meteone-station-menu__panel, .meteone-station-menu__submenu).is-opening {
        animation: m3e-meteone-reveal-right var(--m3e-panel-duration) var(--m3e-emphasized) both;
    }
    .meteone-live-stations[data-meteone-design="material"] :is(.meteone-station-menu__panel, .meteone-station-menu__submenu).is-closing {
        animation: m3e-meteone-reveal-right var(--m3e-panel-close-duration) ease-in reverse both;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__panel.is-opening {
        animation: meteone-menu-right var(--m3e-panel-duration) var(--m3e-emphasized) both;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__panel.is-closing {
        animation: meteone-menu-right var(--m3e-panel-close-duration) ease-in reverse both;
    }
}

@media (max-width: 767px) {
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-search__panel.is-opening {
        animation-name: m3e-meteone-search-left;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-search__panel.is-closing {
        animation-name: m3e-meteone-search-left;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-search__option {
        min-height: 44px;
    }
}

/* Roomier touch rows, not larger floating buttons. Keep the approved
 * 40/44 px (and compact-landscape) rail geometry identical for every action.
 * Short screens scroll the existing panel, never shrink the label font or
 * make the surrounding document scroll when the list reaches its end. */
@media (pointer: coarse) {
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-station-menu__metric,
        .meteone-station-menu__radar-option,
        .meteone-station-menu__date-trigger,
        .meteone-station-value-filter__apply,
        .meteone-station-value-filter__reset,
        .meteone-map-tools-control__install-close
    ) {
        min-height: 44px;
        touch-action: manipulation;
    }
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-date-calendar__month-select,
        .meteone-date-calendar__year-input
    ) {
        min-height: 40px;
        font-size: 16px;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-date-calendar button {
        min-height: 36px;
        touch-action: manipulation;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-station-menu__panel,
        .meteone-station-search__panel,
        .meteone-map-tools-control__actions,
        .meteone-station-value-filter,
        .meteone-date-calendar
    ) {
        overscroll-behavior-y: contain;
        scroll-padding-block: 8px;
        scrollbar-width: thin;
        scrollbar-color: #7895a6 transparent;
    }
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-station-menu__metric,
        .meteone-station-menu__radar-option
    ) {
        min-height: 40px;
        margin-block: 1px;
    }
    .meteone-live-stations[data-meteone-design="material"] .meteone-station-menu__submenu {
        padding-block: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-map-control-button,
        .meteone-station-menu__toggle,
        .meteone-station-menu__category-button,
        .meteone-station-menu__certificate,
        .meteone-station-menu__metric,
        .meteone-station-menu__radar-option,
        .meteone-map-tools-control__item,
        .meteone-map-tools-control__option,
        .meteone-station-menu__panel,
        .meteone-station-menu__submenu,
        .meteone-station-search__panel,
        .meteone-station-search__option,
        .meteone-map-tools-control__panel,
        .meteone-map-tools-control__basemaps,
        .meteone-station-value-filter,
        .meteone-date-calendar,
        .m3e-ripple,
        .m3e-surface-transition,
        .meteone-station-popup .leaflet-popup-content-wrapper,
        .meteone-station-popup .leaflet-popup-close-button,
        .radar-status-popup .leaflet-popup-content-wrapper,
        .radar-status-popup .leaflet-popup-close-button,
        .meteone-date-calendar button,
        .meteone-station-value-filter button
    ) {
        animation: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .meteone-live-stations[data-meteone-design="material"] :is(
        .meteone-map-control-button,
        .meteone-station-menu__toggle,
        .meteone-map-tools-control__item,
        .meteone-map-tools-control__option,
        .meteone-station-menu__panel,
        .meteone-station-value-filter,
        .meteone-date-calendar,
        .meteone-station-search__input,
        .meteone-station-menu__date-trigger
    ) {
        border-color: CanvasText !important;
    }
    .meteone-live-stations[data-meteone-design="material"] :is(button, a, input, select):focus-visible {
        outline-color: Highlight !important;
    }
}