.map-overlay {
    --map-surface: var(--md-canvas);
    --map-surface-elevated: var(--md-surface-raised);
    --map-surface-card: var(--md-stone);
    --map-fg: var(--md-ink);
    --map-muted: var(--md-muted);
    --map-hover: var(--md-highlight);
    --map-divider: var(--md-border);
    --map-border: var(--md-border-strong);
    --map-shadow: var(--md-shadow-subtle);
    --map-accent: var(--md-blue);
    --map-accent-hover: var(--md-blue-hover);
    --map-link: var(--md-blue);
    --map-danger: var(--md-danger);
    --map-btn-primary: var(--md-btn-primary-bg);
    --map-btn-primary-fg: var(--md-btn-primary-fg);
    --map-moss: var(--md-body);
    --map-subtle-bg: var(--md-stone);
    --map-subtle-border: var(--md-border);

    /* Opaque Editorial Geo chrome (class name kept for markup; not translucent glass). */
    --map-glass-bg: var(--md-surface-raised);
    --map-glass-border: var(--md-border-strong);
    --map-glass-shadow: var(--md-shadow-subtle);
    --map-glass-fg: var(--map-fg);
    --map-glass-muted: var(--map-muted);
    --map-glass-btn-hover: var(--md-stone);
    --map-glass-divider: var(--map-divider);
    --map-space-1: 4px;
    --map-space-2: 8px;
    --map-space-3: 12px;
    --map-space-4: 16px;
    --map-glass-control: 28px;
    --map-glass-plaque: calc(var(--map-glass-control) + 6px);
    --map-toolbar-control: var(--map-glass-control);
    --map-toolbar-height: calc(var(--map-toolbar-control) + var(--map-space-2));
    --map-chrome-radius: 999px;
    --map-timeline-height: 0px;
    --map-timeline-bar-height: 60px;
    --map-legend-gutter: 0px;
    /* Wide: one horizontal dock row beside the timeline. */
    --map-timeline-dock-gutter: 320px;
    /* Single source of truth for the bottom dock height. The dock is a
       content-sized command bar that fits one row on most viewports and wraps
       to two only on the narrowest phones, so the reserved height is derived
       from the row count instead of being re-declared in several media queries. */
    --map-dock-rows: 1;
    --map-bottom-dock-height: calc(
        var(--map-toolbar-height) * var(--map-dock-rows)
        + var(--map-space-1) * (var(--map-dock-rows) - 1)
    );
    --map-dock-stack-gap: var(--map-space-2);
    --map-dock-br-bottom: calc(
        var(--map-chrome-inset)
        + var(--map-bottom-dock-height)
        + var(--map-dock-stack-gap)
        + env(safe-area-inset-bottom, 0px)
    );
    --map-panel-radius: var(--md-radius-shell);
    --map-panel-pad: 0.35rem;
    --map-chrome-inset: var(--map-space-3);
    /* Top safe area for notched devices (PWA / landscape). Bottom already has
       its own env() usages; this mirror keeps every top-anchored plaque clear
       of the status bar. */
    --map-chrome-inset-top: calc(var(--map-chrome-inset) + env(safe-area-inset-top, 0px));
    /* Shared baseline for the second row of the top stack: anything pinned under
       the toolbar row (weather, assistant launcher, banners) starts here. */
    --map-top-stack: calc(var(--map-chrome-inset-top) + var(--map-toolbar-height) + var(--map-space-2));
    /* Nominal height of the compare / measure banner; the offline notice is
       stacked below it. Kept as a token so it is no longer a magic 10rem. */
    --map-top-banner-height: 7rem;
    --map-panel-settings-w: 300px;
    --map-panel-analytics-w: 520px;
    --map-dock-shift-settings: calc(var(--map-panel-settings-w) + 44px);
    --map-dock-shift-analytics: calc(var(--map-panel-analytics-w) + 24px);
    --map-center-nudge-settings: calc(var(--map-panel-settings-w) / 2 + 6px);
    --map-center-nudge-analytics: calc(var(--map-panel-analytics-w) / 2 - 4px);
    /* Premium Orbit — aligned with meridian-theme motion identity */
    --map-ease: var(--md-ease, cubic-bezier(0.4, 0, 0.2, 1));
    --map-ease-snap: var(--md-ease-snap, cubic-bezier(0.2, 0, 0, 1));
    --map-ease-exit: cubic-bezier(0.3, 0, 1, 1);
    --map-dur-fast: 0.18s;
    --map-dur: 0.32s;
    --map-dur-slow: 0.48s;

    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    font-family: var(--md-font);
}

.map-overlay--timeline-open {
    --map-timeline-height: var(--map-timeline-bar-height);
}

.map-overlay--has-legend {
    --map-legend-gutter: calc(8px + min(372px, 36vw));
}

.map-overlay > * {
    pointer-events: auto;
}

/* Panels are full-height hit boxes; only the shell receives clicks so map stays usable around them. */
.map-overlay > .layer-settings-panel,
.map-overlay > .layer-analytics-panel {
    pointer-events: none;
}

.map-glass {
    background: var(--map-glass-bg);
    border: 1px solid var(--map-glass-border);
    border-radius: var(--md-radius-card);
    box-shadow: var(--map-glass-shadow);
    color: var(--map-glass-fg);
    transition: box-shadow var(--map-dur) var(--map-ease), border-color var(--map-dur) var(--map-ease);
}

.map-glass__group {
    display: flex;
    align-items: center;
    gap: var(--map-space-1);
    padding: var(--map-space-1);
}

.map-toolbar.map-glass,
.map-left-toolbar.map-glass,
.map-bottom-dock__pill.map-glass {
    border-radius: var(--map-chrome-radius);
}

.map-toolbar.map-glass__group,
.map-left-toolbar.map-glass__group,
.map-info-btn.map-glass__group,
.map-viewport-info__btn.map-glass__group {
    height: var(--map-toolbar-height);
    min-height: var(--map-toolbar-height);
    max-height: var(--map-toolbar-height);
    box-sizing: border-box;
}

.map-glass__group--column {
    flex-direction: column;
    align-items: stretch;
}

.map-glass__btn.mud-icon-button {
    color: var(--map-fg);
    border-radius: var(--md-radius-tag);
    transition:
        background-color var(--map-dur) var(--map-ease),
        color var(--map-dur) var(--map-ease),
        box-shadow var(--map-dur) var(--map-ease),
        transform var(--map-dur-fast) var(--map-ease-snap);
}

.map-glass__btn.mud-icon-button:hover:not(:disabled),
.map-glass__btn.mud-icon-button:focus-visible:not(:disabled) {
    transform: translateY(-1px);
}

.map-glass__btn.mud-icon-button:active:not(:disabled) {
    transform: scale(0.96) translateY(0);
}

.map-toolbar .map-glass__btn.mud-icon-button,
.map-left-toolbar .map-glass__btn.mud-icon-button,
.map-info-btn .map-glass__btn.mud-icon-button,
.map-viewport-info__btn .map-glass__btn.mud-icon-button,
.map-bottom-dock .map-glass__btn.mud-icon-button {
    width: var(--map-toolbar-control);
    height: var(--map-toolbar-control);
    padding: 0;
}

.map-glass__btn.mud-icon-button .mud-icon-root {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.92;
    overflow: visible;
}

.map-glass__btn.mud-icon-button .mud-icon-root svg,
.map-layer-chip__icon .mud-icon-root,
.map-layer-chip__action .mud-icon-root,
.map-compare-banner__swap.mud-icon-root {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    overflow: visible;
}

.map-layer-chip__icon .mud-icon-root,
.map-layer-chip__action .mud-icon-root {
    width: 1.125rem;
    height: 1.125rem;
}

.map-glass__btn.mud-icon-button:hover,
.map-glass__btn.mud-icon-button:focus-visible {
    background: var(--map-glass-btn-hover);
}

.map-glass__btn--active.mud-icon-button {
    background: var(--md-highlight);
    color: var(--map-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-fg) 14%, transparent);
}

.map-glass__btn.mud-icon-button:hover .mud-icon-root,
.map-glass__btn.mud-icon-button:focus-visible .mud-icon-root {
    opacity: 1;
}

.map-glass__btn.mud-icon-button:disabled {
    opacity: 0.45;
}

.map-glass__btn--dirty {
    position: relative;
}

.map-glass__btn--dirty::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--md-warning, #f1b467);
    box-shadow: 0 0 0 1px var(--map-glass-bg);
}

.map-glass .mud-divider {
    border-color: var(--map-glass-divider);
    opacity: 1;
}

.map-glass__separator {
    flex-shrink: 0;
    align-self: center;
    width: 1px;
    height: var(--map-toolbar-control);
    margin: 0 2px;
    background: var(--map-glass-divider);
}

.map-glass__group--column > .mud-divider {
    width: 100%;
    margin: 0;
}

.map-compass.mud-icon-button .mud-icon-root {
    transition: transform var(--md-dur-base) var(--map-ease);
    transform: rotate(var(--compass-bearing, 0deg));
}

.map-overlay__right-dock {
    right: var(--map-chrome-inset);
    transition: right var(--map-dur) var(--map-ease);
}

.map-overlay--layer-panel-open .map-overlay__right-dock {
    right: min(var(--map-dock-shift-settings), calc(100vw - var(--map-chrome-inset)));
}

.map-overlay--analytics-panel-open .map-overlay__right-dock {
    right: min(var(--map-dock-shift-analytics), calc(100vw - var(--map-chrome-inset)));
}

.map-toolbar {
    position: absolute;
    top: var(--map-chrome-inset-top);
    animation: map-chrome-fade var(--map-dur-slow) var(--map-ease) 0.05s both;
}

.map-zoom-hud {
    position: absolute;
    bottom: calc(var(--map-chrome-inset) + var(--map-timeline-height));
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    padding: 3px 8px 4px;
    min-width: 44px;
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--map-glass-fg);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--map-dur) var(--map-ease),
        transform var(--map-dur) var(--map-ease),
        bottom var(--map-dur) var(--map-ease),
        left var(--map-dur) var(--map-ease);
    z-index: 1;
}

.map-zoom-hud--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Map timeline (open-meteo-style scrubber) ── */

.map-timeline-bar {
    --tl-fg: var(--map-fg);
    --tl-muted: var(--map-muted);
    --tl-tick: color-mix(in srgb, var(--map-fg) 34%, transparent);
    --tl-tick-empty: color-mix(in srgb, var(--map-fg) 13%, transparent);
    --tl-cursor: var(--md-danger);
    --tl-now: var(--md-warning);

    position: absolute;
    bottom: var(--map-chrome-inset);
    left: calc(var(--map-chrome-inset) + var(--map-legend-gutter));
    right: calc(var(--map-chrome-inset) + var(--map-timeline-dock-gutter));
    z-index: 2;
    display: flex;
    align-items: center;
    width: auto;
    height: var(--map-timeline-bar-height);
    pointer-events: auto;
    transition: left var(--map-dur) var(--map-ease), right var(--map-dur) var(--map-ease), bottom var(--map-dur) var(--map-ease);
    animation: map-timeline-enter var(--map-dur-slow) var(--map-ease) both;
}

.map-timeline-bar__shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    color: var(--tl-fg);
}

.map-timeline-bar .map-glass__btn.mud-icon-button {
    flex: 0 0 auto;
    width: var(--map-toolbar-control);
    height: var(--map-toolbar-control);
    padding: 0;
}

.map-timeline-bar__days {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.map-timeline-bar__days:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
}

.map-timeline-bar__tz {
    position: absolute;
    top: 3px;
    left: 8px;
    z-index: 2;
    color: var(--tl-muted);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

.map-timeline-bar__day {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.map-timeline-bar__ticks {
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    height: 26px;
    pointer-events: none;
}

.map-timeline-bar__tick {
    flex: 1 1 0;
    min-width: 0;
    height: 6px;
    border-left: 2px solid var(--tl-tick);
    border-radius: var(--md-radius-hairline);
}

.map-timeline-bar__tick--semi {
    height: 11px;
}

.map-timeline-bar__tick--mid {
    height: 16px;
}

.map-timeline-bar__tick--major {
    height: 24px;
}

.map-timeline-bar__tick--empty {
    border-left-color: var(--tl-tick-empty);
}

.map-timeline-bar__tick--active {
    border-left-color: var(--tl-cursor);
}

.map-timeline-bar--daily .map-timeline-bar__tick {
    height: 10px;
    margin: 0 7px;
    border-left: none;
    border-radius: var(--md-radius-pill);
    background: var(--tl-tick);
}

.map-timeline-bar--daily .map-timeline-bar__tick--empty {
    background: var(--tl-tick-empty);
}

.map-timeline-bar--daily .map-timeline-bar__tick--active {
    background: var(--tl-cursor);
}

.map-timeline-bar__day-label {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    padding: 0 2px;
    line-height: 1.08;
    text-align: center;
    pointer-events: none;
}

.map-timeline-bar__day-name,
.map-timeline-bar__day-date {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-timeline-bar__day-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tl-fg);
}

.map-timeline-bar__day-date {
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    color: var(--tl-muted);
}

.map-timeline-bar__day--today .map-timeline-bar__day-name {
    color: var(--tl-now);
}

.map-timeline-bar__now {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 2px;
    margin-left: -1px;
    border-radius: var(--md-radius-2xs);
    background: var(--tl-now);
    box-shadow: 0 0 6px color-mix(in srgb, var(--tl-now) 55%, transparent);
    pointer-events: none;
    z-index: 2;
}

.map-timeline-bar__crosshair {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    margin-left: -0.5px;
    background: color-mix(in srgb, var(--map-glass-fg) 45%, transparent);
    pointer-events: none;
    z-index: 3;
}

.map-timeline-bar__cursor {
    position: absolute;
    top: 0;
    width: 3px;
    height: 16px;
    margin-left: -1.5px;
    border-radius: var(--md-radius-2xs);
    background: var(--tl-cursor);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--map-glass-bg) 70%, transparent);
    pointer-events: none;
    z-index: 4;
}

.map-timeline-bar__tooltip {
    position: absolute;
    top: -31px;
    left: 0;
    width: 68px;
    margin-left: -34px;
    padding: 3px 0;
    border: 1px solid var(--tl-border);
    border-radius: var(--md-radius-sm);
    background: var(--tl-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--map-glass-shadow);
    color: var(--tl-fg);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
}

.map-timeline-bar__tooltip--hover {
    font-weight: 500;
    color: var(--tl-muted);
}

.map-timeline-bar__tooltip::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    border-right: 1px solid var(--tl-border);
    border-bottom: 1px solid var(--tl-border);
    background: var(--tl-glass);
}

.map-timeline-bar__skeleton {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    overflow: hidden;
    border-radius: inherit;
}

.map-timeline-bar__skeleton-day {
    position: relative;
    flex: 1 1 0;
    border-left: 1px solid color-mix(in srgb, var(--map-glass-divider) 45%, transparent);
}

.map-timeline-bar__skeleton-day:first-child {
    border-left: none;
}

.map-timeline-bar__skeleton-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 52px;
    height: 12px;
    border-radius: var(--md-radius-tag);
    background: color-mix(in srgb, var(--map-glass-fg) 10%, transparent);
    animation: map-timeline-pulse 1.4s var(--map-ease) infinite;
}

@keyframes map-timeline-pulse {
    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

.map-timeline-bar__menu-label {
    padding: 6px 12px 2px;
    color: var(--map-glass-muted);
    font-size: 0.6875rem;
}

.map-timeline-bar__speed {
    display: flex;
    gap: 3px;
    padding: 4px 8px 8px;
}

.map-timeline-bar__speed-btn {
    min-width: 36px;
    min-height: 28px;
    padding: 0 8px;
    border: none;
    border-radius: calc(var(--md-radius-tag) - 1px);
    background: transparent;
    color: var(--map-glass-muted);
    font: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.map-timeline-bar__speed-btn:hover {
    color: var(--map-glass-fg);
}

.map-timeline-bar__speed-btn:focus-visible {
    color: var(--map-glass-fg);
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
}

.map-timeline-bar__speed-btn--active {
    background: var(--md-highlight);
    color: var(--map-glass-fg);
}

.map-overlay--layer-panel-open .map-timeline-bar {
    right: calc(var(--map-dock-shift-settings) + var(--map-timeline-dock-gutter));
}

.map-overlay--analytics-panel-open .map-timeline-bar {
    right: calc(var(--map-dock-shift-analytics) + var(--map-timeline-dock-gutter));
}

.map-zoom-hud__label {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.map-zoom-hud__track {
    position: relative;
    height: 5px;
    border-bottom: 1px solid currentColor;
    transition: width 90ms linear;
}

.map-zoom-hud__tick {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 5px;
    background: currentColor;
}

.map-zoom-hud__tick--start {
    left: 0;
}

.map-zoom-hud__tick--mid {
    left: 50%;
    height: 3px;
    transform: translateX(-50%);
}

.map-zoom-hud__tick--end {
    right: 0;
}

.map-overlay--layer-panel-open .map-zoom-hud {
    left: calc(50% - min(var(--map-center-nudge-settings), calc((100vw - 24px) / 4)));
}

.map-overlay--analytics-panel-open .map-zoom-hud {
    left: calc(50% - min(var(--map-center-nudge-analytics), calc((100vw - 24px) / 3)));
}

.map-dock-br {
    position: absolute;
    right: var(--map-chrome-inset);
    bottom: var(--map-dock-br-bottom);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--map-dock-stack-gap);
    max-height: calc(
        100%
        - var(--map-dock-br-bottom)
        - var(--map-chrome-inset)
        - var(--map-toolbar-height)
        - var(--map-dock-stack-gap)
        - env(safe-area-inset-top, 0px)
    );
    z-index: 5;
    animation: map-chrome-rise var(--map-dur-slow) var(--map-ease) 0.1s both;
}

.map-bottom-dock {
    position: absolute;
    left: auto;
    bottom: calc(var(--map-chrome-inset) + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: var(--map-space-2);
    pointer-events: none;
    animation: map-chrome-rise var(--map-dur-slow) var(--map-ease) 0.12s both;
}

.map-bottom-dock > * {
    pointer-events: auto;
}

.map-bottom-dock__pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--map-space-2);
    min-width: 0;
}

.map-bottom-dock__pill.map-glass {
    width: auto;
    justify-content: center;
    height: var(--map-toolbar-height);
    min-height: var(--map-toolbar-height);
    max-height: var(--map-toolbar-height);
    padding: var(--map-space-1);
}

.map-bottom-dock__pill--nav {
    box-shadow: var(--map-glass-shadow);
}

.map-bottom-dock__text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--map-toolbar-control);
    height: var(--map-toolbar-control);
    padding: 0 6px;
    border: 0;
    border-radius: var(--map-chrome-radius);
    background: transparent;
    color: var(--map-glass-fg);
    font-family: var(--md-font);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--map-dur) var(--map-ease),
        color var(--map-dur) var(--map-ease),
        transform var(--map-dur-fast) var(--map-ease-snap);
}

.map-bottom-dock__text-btn:hover:not(:disabled),
.map-bottom-dock__text-btn:focus-visible:not(:disabled) {
    background: var(--map-glass-btn-hover);
    transform: translateY(-1px);
}

.map-bottom-dock__text-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.map-bottom-dock__text-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.map-bottom-dock__text-btn.map-glass__btn--active {
    background: var(--md-highlight);
    color: var(--map-fg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-fg) 14%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .map-bottom-dock__text-btn:hover:not(:disabled),
    .map-bottom-dock__text-btn:focus-visible:not(:disabled) {
        transform: none;
    }
}

.map-info-btn {
    position: relative;
}

.map-viewport-info {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-height: 0;
    max-height: 100%;
    gap: var(--map-dock-stack-gap);
}

.map-viewport-info__panel {
    width: min(280px, calc(100vw - 48px));
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 10px 8px;
    border-radius: var(--md-radius-card);
    font-family: var(--md-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.75rem;
    line-height: 1.35;
    animation: map-popover-enter var(--map-dur) var(--map-ease) both;
    transform-origin: bottom right;
}

.map-viewport-info__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.map-viewport-info__title {
    font-family: var(--md-font);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--map-fg);
}

.map-viewport-info__close.mud-icon-button {
    width: 24px;
    height: 24px;
    padding: 0;
}

.map-viewport-info__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-viewport-info__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: start;
    gap: 6px;
    min-height: 28px;
    padding: 2px 0;
}

.map-viewport-info__row dt {
    margin: 0;
    padding-top: 5px;
    color: var(--map-muted);
    font-family: var(--md-font);
    font-size: 0.75rem;
    font-weight: 500;
}

.map-viewport-info__row dd {
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    color: var(--map-fg);
}

.map-viewport-info__row code {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 5px;
    font: inherit;
    color: inherit;
    word-break: break-all;
    white-space: pre-wrap;
}

.map-viewport-info__copy.mud-icon-button {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    opacity: 0.7;
}

.map-viewport-info__copy.mud-icon-button:hover,
.map-viewport-info__copy.mud-icon-button:focus-visible {
    opacity: 1;
}

/* Hidden until MapLibre writes transform — otherwise the first paint is top-left (top:0; left:0). */
.geoportal-map-popup.maplibregl-popup {
    visibility: hidden;
    transition: none;
}

.geoportal-map-popup.maplibregl-popup[style*="translate"] {
    visibility: visible;
}

.geoportal-map-popup.maplibregl-popup .maplibregl-popup-content {
    padding: 12px 14px;
    border-radius: var(--md-radius-card);
    background: var(--md-popup-bg);
    border: 1px solid var(--md-popup-border);
    box-shadow: none;
    color: var(--md-popup-fg);
    font-family: var(--md-font);
    font-size: 0.875rem;
    line-height: 1.45;
}

.geoportal-map-popup--dark.maplibregl-popup .maplibregl-popup-content {
    background: var(--md-popup-bg);
    border-color: var(--md-popup-border);
    color: var(--md-popup-fg);
}

.geoportal-map-popup__heading {
    display: block;
    margin: 0 0 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--md-popup-fg);
}

.geoportal-map-popup__title {
    font-weight: 600;
    line-height: 1.3;
}

.geoportal-map-popup__meta {
    margin-top: 4px;
    color: var(--md-popup-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.geoportal-map-popup__body {
    margin-top: 8px;
    line-height: 1.4;
}

.geoportal-map-popup__content b,
.geoportal-map-popup__content strong {
    font-weight: 500;
    color: var(--md-popup-fg);
}

.geoportal-map-popup--dark .geoportal-map-popup__content b,
.geoportal-map-popup--dark .geoportal-map-popup__content strong {
    color: var(--md-popup-fg);
}

.geoportal-map-popup.maplibregl-popup .maplibregl-popup-close-button {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 1.125rem;
    line-height: 28px;
    color: var(--md-popup-muted);
}

.geoportal-map-popup--dark.maplibregl-popup .maplibregl-popup-close-button {
    color: var(--md-popup-muted);
}

.geoportal-map-popup__actions {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--md-popup-border);
}

.geoportal-map-popup__class {
    margin-top: 8px;
    font-size: 0.875rem;
    font-weight: 500;
}

.geoportal-map-popup__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
}

.geoportal-map-popup__label {
    color: var(--md-popup-muted);
}

.geoportal-map-popup.maplibregl-popup:not(.geoportal-map-popup--hover) {
    pointer-events: none;
}

.geoportal-map-popup.maplibregl-popup:not(.geoportal-map-popup--hover) .maplibregl-popup-content,
.geoportal-map-popup.maplibregl-popup:not(.geoportal-map-popup--hover) .maplibregl-popup-close-button {
    pointer-events: auto;
}

.geoportal-map-popup--hover.maplibregl-popup {
    pointer-events: none;
}

.geoportal-map-popup--hover.maplibregl-popup .maplibregl-popup-content {
    padding: 8px 10px;
    font-size: 0.8125rem;
    pointer-events: none;
}

.geoportal-map-popup--hover.maplibregl-popup .maplibregl-popup-close-button {
    display: none;
}

.geoportal-map-popup--dark .geoportal-map-popup__actions {
    border-top-color: var(--md-popup-border);
}

.geoportal-popup-stats-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--md-radius-tag);
    background: var(--md-btn-primary-bg);
    color: var(--md-btn-primary-fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--md-transition);
}

.geoportal-popup-stats-btn:hover {
    background: var(--md-blue-hover);
    color: var(--md-btn-primary-fg);
}

.geoportal-map-popup--dark .geoportal-popup-stats-btn {
    background: var(--md-btn-primary-bg);
    color: var(--md-btn-primary-fg);
}

.geoportal-map-popup--dark .geoportal-popup-stats-btn:hover {
    background: var(--md-blue-hover);
    color: var(--md-btn-primary-fg);
}

.analytics-panel__hint,
.analytics-panel__charts-hint {
    display: block;
    margin-top: 10px;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.8125rem;
    line-height: 1.4;
}

.analytics-panel__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.analytics-panel__summary--grouped {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
    border: 0;
    background: transparent;
    overflow: visible;
}

.analytics-panel__summary-section {
    margin-top: 0;
}

.analytics-panel__summary-section-title {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.analytics-panel__summary-section .analytics-panel__summary,
.analytics-panel__summary-section .analytics-panel__metric-grid {
    margin-top: 0;
}

.analytics-panel__metric {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 12px 12px 11px;
    background: var(--map-subtle-bg, var(--md-stone));
    border: 1px solid var(--map-subtle-border, var(--md-border));
    border-radius: var(--md-radius-card);
}

.analytics-panel__metric-label {
    order: 0;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.analytics-panel__metric-value {
    color: var(--map-fg, var(--md-ink));
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.analytics-panel__metric-delta {
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.analytics-panel__summary--comparison {
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.analytics-panel__summary--comparison .analytics-panel__metric {
    min-height: 0;
}

.analytics-panel__comparison-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.analytics-panel__comparison-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.analytics-panel__comparison-picker-wrap {
    flex: 0 0 auto;
    display: inline-flex;
    max-width: 100%;
}

.analytics-panel__comparison-picker {
    width: max-content;
    max-width: 100%;
    margin: 0;
    display: inline-block;
}

.analytics-panel__comparison-picker.mud-picker,
.analytics-panel__comparison-picker .mud-input-control,
.analytics-panel__comparison-picker .mud-input-root,
.analytics-panel__comparison-picker .mud-input-full-width {
    width: max-content;
    max-width: 100%;
}

.analytics-panel__comparison-picker .mud-input-slot {
    width: auto;
    gap: 4px;
}

.analytics-panel__comparison-picker .mud-input-root,
.analytics-panel__comparison-picker .mud-input-slot,
.analytics-panel__comparison-picker input {
    font-size: 0.875rem !important;
    line-height: 1.35 !important;
}

.analytics-panel__comparison-picker .mud-input-adornment {
    margin-inline-start: 2px;
}

.analytics-panel__comparison-picker .mud-input-adornment-end {
    margin-inline-start: 4px;
}

.analytics-panel__comparison-picker .mud-input-label {
    font-size: 0.8125rem !important;
}

.analytics-panel__comparison-picker .mud-input-control-input-container {
    margin-top: 0 !important;
}

.analytics-panel__comparison-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 8px;
    padding-bottom: 2px;
}

.analytics-panel__charts--comparison {
    margin-top: 12px;
    grid-template-columns: minmax(0, 1fr);
}

.analytics-panel__truncation-action {
    align-self: flex-start;
    margin-top: 2px;
    padding-left: 0;
}

.analytics-panel__ranking-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.analytics-panel__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.analytics-panel__chart-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-panel__chart-group + .analytics-panel__chart-group {
    margin-top: 8px;
}

.analytics-panel__chart-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 12px;
}

.analytics-panel__chart-groups--expandable {
    gap: 0;
    margin-top: 8px;
    border: 1px solid var(--map-border, var(--md-border));
    border-radius: var(--md-radius-tag);
    overflow: hidden;
}

.analytics-panel__chart-group-panel.mud-expand-panel {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--map-border, var(--md-border));
    border-radius: 0;
    margin-bottom: 0 !important;
}

.analytics-panel__chart-group-panel.mud-expand-panel:last-child {
    border-bottom: 0;
}

.analytics-panel__chart-group-panel .mud-expand-panel-header {
    min-height: 44px;
    padding: 8px 12px;
}

.analytics-panel__chart-group-panel .mud-expand-panel-content {
    padding: 0 12px 12px;
}

.analytics-panel__lazy-placeholder {
    margin-top: 12px;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.8125rem;
}

.analytics-panel__section-title {
    margin: 0 0 10px;
    color: var(--map-fg, var(--md-ink));
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.analytics-parameter-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 16px;
    border-radius: var(--md-radius-card);
    background: var(--map-surface, var(--md-canvas));
    border: 1px solid var(--map-subtle-border, var(--md-border));
    overflow: hidden;
    isolation: isolate;
}

.analytics-parameter-chart__title {
    margin: 0;
    color: var(--map-fg, var(--md-ink));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.3;
}

.analytics-parameter-chart__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin: 4px 0 0;
    padding-top: 4px;
}

.analytics-parameter-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.2;
    opacity: 0.88;
}

.analytics-parameter-chart__legend-dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.analytics-parameter-chart__legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-parameter-chart__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    opacity: 0.7;
}

.analytics-parameter-chart__canvas {
    display: block;
    width: 100%;
}

.analytics-panel__table--clickable .analytics-panel__table-row--clickable {
    cursor: pointer;
}

.analytics-panel__table-hint,
.analytics-panel__table-search {
    margin-top: 8px;
}

.analytics-panel__comparison-presets {
    margin-top: 4px;
}

.period-date-range-picker__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 0 4px;
}

.analytics-panel__region-list {
    max-height: 320px;
    overflow: auto;
}

.analytics-panel__table {
    overflow-x: auto;
}

.analytics-panel__rankings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 12px;
}

.analytics-panel__ranking {
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--map-subtle-border, var(--md-border));
    padding-top: 12px;
}

.analytics-panel__ranking-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    counter-reset: analytics-rank;
}

.analytics-panel__ranking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid var(--map-subtle-border, var(--md-border));
    counter-increment: analytics-rank;
}

.analytics-panel__ranking-item::before {
    content: counter(analytics-rank, decimal-leading-zero);
    flex: 0 0 1.75rem;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.analytics-panel__ranking-item:last-child {
    border-bottom: 0;
}

.analytics-panel__ranking-link {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    padding-inline: 0 !important;
}

.analytics-panel__ranking-value {
    flex-shrink: 0;
    color: var(--map-fg, var(--md-ink));
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.analytics-panel__ranking-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.analytics-panel__ranking-primary {
    color: var(--map-fg, var(--md-ink));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
}

.analytics-panel__ranking-secondary {
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    line-height: 1.3;
}

.analytics-panel__analog-year {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    padding: 16px;
    border: 1px solid var(--map-subtle-border, var(--md-border));
    border-radius: var(--md-radius-tag);
}

.analytics-panel__analog-year-hero {
    margin: 0;
    color: var(--map-fg, var(--md-ink));
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.analytics-panel__season {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.analytics-panel__season-overview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-panel__season-dynamics {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analytics-panel__season-dynamics-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 960px) {
    .analytics-panel__charts,
    .analytics-panel__rankings {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .analytics-panel__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-panel__comparison-picker {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .analytics-panel__comparison-picker-wrap {
        flex: 1 1 100%;
        width: 100%;
    }
}

.map-left-panel {
    position: absolute;
    top: var(--map-chrome-inset-top);
    left: var(--map-chrome-inset);
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Do not stretch the toolbar / cue to the widest sibling: each block keeps
       its own intrinsic width and reads as a separate plaque. */
    align-items: flex-start;
    gap: var(--map-space-4);
    max-width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: visible;
    animation: map-chrome-rise-left var(--map-dur-slow) var(--map-ease) both;
    /* The panel box is as wide as its widest child; let clicks fall through the
       empty area beside narrower blocks so the map stays draggable there. */
    pointer-events: none;
}

.map-left-panel > * {
    pointer-events: auto;
}

/* The invisible tour target must never swallow map gestures. */
.map-left-panel > .map-tour-spot {
    pointer-events: none;
}

.map-left-toolbar {
    flex-shrink: 0;
    padding-left: 8px;
    min-width: 0;
    max-width: 100%;
}

.map-left-toolbar__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--map-toolbar-control);
    min-width: 0;
    padding-right: 2px;
    overflow: hidden;
}

.map-left-toolbar__logo {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    animation: map-logo-enter 0.55s var(--map-ease) both;
}

.map-left-toolbar__logo-spin {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes map-logo-enter {
    from {
        opacity: 0;
        transform: scale(0.72);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-left-toolbar__logo {
        animation: none;
    }
}

.map-left-toolbar__title {
    font-family: var(--md-font-display);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--map-fg);
    white-space: nowrap;
}

.map-glass__text-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: var(--map-toolbar-control);
    height: var(--map-toolbar-control);
    padding: 0 8px 0 6px;
    border: none;
    border-radius: var(--md-radius-tag);
    background: transparent;
    color: var(--map-fg);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--map-dur-fast) var(--map-ease),
        color var(--map-dur-fast) var(--map-ease),
        box-shadow var(--map-dur) var(--map-ease),
        transform var(--map-dur-fast) var(--map-ease-snap);
}

.map-glass__text-btn .mud-icon-root {
    font-size: 1.125rem;
}

.map-glass__text-btn:hover {
    background: var(--map-glass-btn-hover);
    transform: translateY(-1px);
}

.map-glass__text-btn:focus-visible {
    background: var(--map-glass-btn-hover);
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
    transform: translateY(-1px);
}

.map-glass__text-btn:active:not(:disabled) {
    transform: scale(0.97) translateY(0);
}

.map-glass__text-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.map-measure-banner__modes {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px;
    border-radius: var(--md-radius-tag);
    border: 1px solid var(--map-glass-divider);
    background: var(--map-glass-btn-hover);
}

.map-measure-banner__mode {
    min-height: 26px;
    padding: 0 10px;
    border: none;
    border-radius: calc(var(--md-radius-tag) - 1px);
    background: transparent;
    color: var(--map-glass-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--md-dur-base) var(--map-ease), color var(--md-dur-base) var(--map-ease);
}

.map-measure-banner__mode:hover {
    color: var(--map-glass-fg);
}

.map-measure-banner__mode:focus-visible {
    color: var(--map-glass-fg);
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
}

.map-measure-banner__mode--active {
    background: color-mix(in srgb, var(--map-glass-fg) 12%, transparent);
    color: var(--map-glass-fg);
}

.map-measure-banner__hint {
    font-size: 12px;
    color: var(--map-glass-muted);
    text-align: center;
}

.map-layer-stack {
    display: flex;
    flex-direction: column;
    gap: var(--map-space-2);
    flex-shrink: 1;
    min-height: 0;
    max-height: min(420px, calc(100dvh - 120px));
    width: fit-content;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
}

.map-empty-cue {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: min(240px, calc(100vw - 48px));
    padding: 12px 14px;
    border: 1px solid var(--map-glass-border);
    border-radius: var(--md-radius-card);
    background: var(--map-glass-bg);
    box-shadow: var(--map-glass-shadow);
    color: var(--map-fg);
    text-align: left;
    cursor: pointer;
    animation: map-chip-enter var(--map-dur) var(--map-ease) both;
    animation-delay: 0.16s;
}

.map-empty-cue:hover:not(:disabled),
.map-empty-cue:focus-visible {
    background: var(--map-glass-btn-hover);
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
}

.map-empty-cue:disabled {
    opacity: 0.55;
    cursor: default;
}

.map-empty-cue__title {
    font-family: var(--md-font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.map-empty-cue__hint {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--map-muted);
}

.map-layer-chip {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: min(11.5rem, calc(100vw - 48px));
    overflow: hidden;
    flex-shrink: 0;
    transition:
        max-width var(--map-dur) var(--map-ease),
        box-shadow var(--map-dur-fast) var(--map-ease),
        transform var(--map-dur-fast) var(--map-ease-snap);
    animation: map-chip-enter var(--map-dur) var(--map-ease) both;
}

.map-layer-chip:nth-child(1) { animation-delay: 0.14s; }
.map-layer-chip:nth-child(2) { animation-delay: 0.18s; }
.map-layer-chip:nth-child(3) { animation-delay: 0.22s; }
.map-layer-chip:nth-child(4) { animation-delay: 0.26s; }
.map-layer-chip:nth-child(5) { animation-delay: 0.3s; }
.map-layer-chip:nth-child(n + 6) { animation-delay: 0.34s; }

.map-layer-chip:hover,
.map-layer-chip:focus-within {
    max-width: min(calc(240px + var(--map-glass-control) * var(--chip-action-count, 2)), calc(100vw - 48px));
}

.map-layer-chip--pending:hover,
.map-layer-chip--pending:focus-within {
    max-width: min(calc(120px + var(--map-glass-control) * var(--chip-action-count, 1)), calc(100vw - 48px));
}

.map-layer-chip--selected {
    box-shadow: inset 0 0 0 1px var(--map-border);
}

.map-layer-chip__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--map-glass-control);
    height: var(--map-glass-control);
    padding: 0;
    border: 0;
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: var(--map-glass-fg);
    cursor: pointer;
    transition: opacity var(--md-dur-base) var(--map-ease);
}

.map-layer-chip--selected .map-layer-chip__icon {
    color: var(--map-fg);
}

.map-layer-chip--hidden .map-layer-chip__icon {
    opacity: 0.55;
}

.map-layer-chip--pending .map-layer-chip__icon {
    opacity: 0.88;
}

.map-layer-chip__dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--map-fg);
    box-shadow: 0 0 0 1px var(--map-glass-bg);
}

.map-load-error,
.map-offline-banner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    min-width: min(16rem, calc(100vw - 1.5rem));
    max-width: min(22rem, calc(100vw - 1.5rem));
    pointer-events: auto;
    background: var(--md-surface-raised);
    border: 1px solid var(--md-border-strong);
    border-radius: var(--md-radius-card);
    box-shadow: var(--md-shadow-subtle);
    color: var(--md-ink);
}

.map-load-error {
    top: 50%;
    transform: translate(-50%, -50%);
    animation: none;
}

.map-offline-banner--offset {
    top: calc(
        var(--map-chrome-inset-top)
        + var(--map-top-banner-height)
        + var(--map-space-2)
    );
}

.map-load-error__title,
.map-offline-banner__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--map-fg, var(--md-ink));
    overflow-wrap: break-word;
}

.map-load-error__hint,
.map-offline-banner__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--map-muted, var(--md-muted));
    overflow-wrap: break-word;
}

.map-load-error__retry {
    align-self: flex-start;
    margin-top: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--map-border, var(--md-border-strong));
    border-radius: var(--md-radius-tag);
    background: var(--map-btn-primary, var(--md-btn-primary-bg));
    color: var(--map-btn-primary-fg, var(--md-btn-primary-fg));
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.map-load-error__retry:hover {
    filter: brightness(1.05);
}

.map-layer-chip__name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 12rem;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--map-glass-fg);
    padding: 0 2px 0 4px;
    transition: max-width var(--md-dur-base) var(--map-ease), opacity var(--md-dur-base) var(--map-ease), padding var(--md-dur-base) var(--map-ease);
}

.map-layer-chip--hidden .map-layer-chip__name {
    opacity: 0.55;
    text-decoration: line-through;
    color: var(--map-glass-muted);
}

.map-layer-chip__badges {
    display: flex;
    align-items: center;
    gap: var(--map-space-1);
    flex-shrink: 0;
    max-width: 7.5rem;
    opacity: 1;
    overflow: hidden;
    transition: max-width var(--md-dur-base) var(--map-ease), opacity var(--md-dur-base) var(--map-ease);
}

.map-layer-chip__badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--map-glass-divider);
    background: color-mix(in srgb, var(--map-glass-fg) 6%, transparent);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--map-glass-muted);
    white-space: nowrap;
}

.map-layer-chip__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width var(--md-dur-base) var(--map-ease), opacity var(--md-dur-base) var(--map-ease);
}

.map-layer-chip:hover .map-layer-chip__actions,
.map-layer-chip:focus-within .map-layer-chip__actions,
.map-layer-chip--analytics.map-layer-chip--selected .map-layer-chip__actions {
    max-width: calc(var(--map-glass-control) * var(--chip-action-count, 2));
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .map-layer-chip {
        max-width: min(16rem, calc(100vw - 48px));
    }

    .map-layer-chip--hidden .map-layer-chip__name {
        opacity: 0.7;
    }

    .map-layer-chip__actions,
    .map-layer-chip--analytics .map-layer-chip__actions {
        max-width: calc(var(--map-glass-control) * var(--chip-action-count, 2));
        opacity: 1;
        pointer-events: auto;
    }
}

.map-layer-chip__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--map-glass-control);
    height: var(--map-glass-control);
    padding: 0;
    border: 0;
    border-radius: var(--md-radius-tag);
    background: transparent;
    color: var(--map-glass-fg);
    cursor: pointer;
    transition: background-color var(--md-dur-base) var(--map-ease), color var(--md-dur-base) var(--map-ease);
}

.map-layer-chip__icon:focus-visible,
.map-layer-chip__action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: -2px;
}

.map-layer-chip__action:hover {
    background: color-mix(in srgb, var(--map-glass-fg) 8%, transparent);
}

.map-layer-chip__action:focus-visible {
    background: color-mix(in srgb, var(--map-glass-fg) 8%, transparent);
}

.map-layer-chip__action--off {
    color: var(--map-glass-muted);
}

.map-layer-chip__action--active {
    background: color-mix(in srgb, var(--md-blue) 16%, transparent);
    color: var(--md-blue);
}

.map-add-layer-menu .mud-list,
.map-layer-actions-menu .mud-list {
    padding: 4px 0;
}

.map-add-layer-menu .mud-menu-item,
.map-layer-actions-menu .mud-menu-item {
    min-height: 34px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.8125rem;
}

.map-add-layer-menu .mud-menu-item .mud-icon-root,
.map-layer-actions-menu .mud-menu-item .mud-icon-root {
    font-size: 1.125rem;
}

.map-toolbar__avatar {
    cursor: pointer;
    border: 1px solid var(--map-glass-divider);
    background: var(--map-glass-btn-hover);
    color: var(--map-glass-fg);
    font-size: 0.8125rem;
    font-weight: 400;
}

.map-toolbar__avatar.mud-avatar {
    width: var(--map-toolbar-control);
    height: var(--map-toolbar-control);
}

.layer-settings-panel {
    position: absolute;
    top: var(--map-chrome-inset);
    right: var(--map-chrome-inset);
    bottom: var(--map-chrome-inset);
    width: min(var(--map-panel-settings-w), calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    color: var(--map-fg);
    overflow: visible;
    pointer-events: none;
    animation: map-panel-enter var(--map-dur-slow) var(--map-ease) both;
}

.map-panel-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: inherit;
    padding: var(--map-panel-pad);
    border: 1px solid color-mix(in srgb, var(--md-border-strong) 60%, transparent);
    border-radius: var(--map-panel-radius);
    background: var(--md-stone);
    box-shadow: var(--md-shadow-subtle);
    pointer-events: auto;
}

.map-panel-shell__core {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--map-panel-radius) - 0.28rem);
    background: var(--md-surface-raised);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 35%, transparent);
    color: var(--map-fg);
    animation: map-panel-content var(--map-dur) var(--map-ease) 0.08s both;
}

@keyframes map-chrome-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes map-chrome-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes map-chrome-rise-left {
    from {
        opacity: 0;
        transform: translateX(-12px) translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

@keyframes map-chip-enter {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes map-popover-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes map-timeline-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes map-banner-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes map-panel-enter {
    from {
        opacity: 0;
        transform: translateX(20px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes map-panel-content {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce),
html.map-tour-pending,
html.map-tour-running {
    .layer-settings-panel,
    .layer-analytics-panel,
    .map-left-panel,
    .map-toolbar,
    .map-bottom-dock,
    .map-dock-br,
    .map-legend,
    .map-layer-chip,
    .map-empty-cue,
    .map-timeline-bar,
    .map-compare-banner,
    .map-viewport-info__panel,
    .map-panel-shell__core {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-glass__btn.mud-icon-button:hover:not(:disabled),
    .map-glass__btn.mud-icon-button:focus-visible:not(:disabled),
    .map-glass__text-btn:hover,
    .map-glass__text-btn:focus-visible {
        transform: none;
    }
}

.layer-settings-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 1rem 1rem 0.75rem;
    flex-shrink: 0;
}

.layer-settings-panel__heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.layer-settings-panel__eyebrow {
    margin: 0;
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.layer-settings-panel__title {
    margin: 0;
    font-family: var(--md-font-display);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}

.layer-settings-panel__status {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--map-muted);
}

.layer-settings-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.layer-settings-panel__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-tag);
    background: var(--md-stone);
    color: var(--map-muted);
    cursor: pointer;
    transition:
        background-color var(--md-dur-base) var(--map-ease),
        color var(--md-dur-base) var(--map-ease),
        border-color var(--md-dur-base) var(--map-ease),
        transform var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__icon-btn:hover {
    background: var(--md-highlight);
    border-color: var(--md-border-strong);
    color: var(--map-fg);
}

.layer-settings-panel__icon-btn:active {
    transform: scale(0.96);
}

.layer-settings-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.layer-settings-panel__row--incomplete {
    outline: 1px solid color-mix(in srgb, var(--md-warning, #f1b467) 55%, transparent);
    outline-offset: 2px;
    border-radius: var(--md-radius-sm);
}

.vegetation-season-year {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.vegetation-season-year__select {
    width: 100%;
    margin: 0;
}

.vegetation-season-year__hint {
    margin: 0;
    padding: 0 2px;
    color: var(--map-muted, var(--md-muted));
    font-size: 0.75rem;
    line-height: 1.35;
}

.layer-settings-panel__hint {
    margin: 0 2px 4px;
    color: var(--map-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.layer-settings-panel__alert {
    padding: 8px 10px;
    border-radius: var(--md-radius-card);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--md-warning, #c4862e) 72%, var(--md-ink));
    background: color-mix(in srgb, var(--md-warning, #c4862e) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-warning, #c4862e) 35%, transparent);
}

.map-overlay--dark .layer-settings-panel__alert {
    color: var(--md-warning, #d4a84e);
    background: color-mix(in srgb, var(--md-warning, #d4a84e) 12%, transparent);
    border-color: color-mix(in srgb, var(--md-warning, #d4a84e) 28%, transparent);
}

.layer-settings-panel__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--map-divider);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--md-stone) 70%, var(--md-surface-raised));
}

.layer-settings-panel__delete-prompt {
    flex: 1 1 100%;
    margin: 0 0 2px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--map-fg);
}

.layer-settings-panel__secondary-btn {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--md-radius-card);
    background: transparent;
    color: var(--map-danger);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__secondary-btn:hover {
    background: color-mix(in srgb, var(--map-danger) 10%, transparent);
}

.layer-settings-panel__danger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--map-moss);
    border-radius: var(--md-radius-pill);
    background: transparent;
    color: var(--map-moss);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__danger-btn:hover {
    background: var(--map-hover);
}

.layer-settings-panel__primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 2.35rem;
    padding: 0 14px;
    border: 0;
    border-radius: var(--md-radius-pill);
    background: var(--map-btn-primary);
    color: var(--map-btn-primary-fg);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background-color var(--md-dur-base) var(--map-ease),
        opacity var(--md-dur-base) var(--map-ease),
        transform var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__primary-btn:hover:not(:disabled) {
    background: var(--md-blue-hover);
}

.layer-settings-panel__primary-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.layer-settings-panel__primary-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.layer-settings-panel__primary-btn--incomplete {
    opacity: 0.72;
}

.layer-analytics-panel {
    position: absolute;
    top: var(--map-chrome-inset);
    right: var(--map-chrome-inset);
    bottom: var(--map-chrome-inset);
    width: min(var(--map-panel-analytics-w), calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    color: var(--map-fg);
    overflow: visible;
    z-index: 3;
    pointer-events: none;
    --analytics-chart-height: 248px;
    animation: map-panel-enter var(--map-dur-slow) var(--map-ease) both;
}

.layer-analytics-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 1.05rem 1.05rem 0.9rem;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--map-border) 85%, transparent);
}

.layer-analytics-panel__heading {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.layer-analytics-panel__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}

.layer-analytics-panel__eyebrow {
    margin: 0;
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.layer-analytics-panel__back-btn {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.layer-analytics-panel__title {
    margin: 0;
    font-family: var(--md-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}

.layer-analytics-panel__subtitle {
    margin: 0;
    color: var(--map-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.layer-analytics-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.layer-analytics-panel__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-tag);
    background: var(--md-stone);
    color: var(--map-muted);
    cursor: pointer;
    transition:
        background-color var(--md-dur-base) var(--map-ease),
        color var(--md-dur-base) var(--map-ease),
        border-color var(--md-dur-base) var(--map-ease),
        transform var(--md-dur-base) var(--map-ease);
}

.layer-analytics-panel__icon-btn:hover {
    background: var(--md-highlight);
    border-color: var(--md-border-strong);
    color: var(--map-fg);
}

.layer-analytics-panel__icon-btn:active {
    transform: scale(0.96);
}

.layer-analytics-panel__icon-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 55%, transparent);
    outline-offset: 2px;
}

.layer-analytics-panel__icon-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.layer-analytics-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.85rem 1rem 1rem;
}

.layer-analytics-panel__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    flex-shrink: 0;
    border-top: 1px solid var(--map-border);
}

.layer-analytics-panel__secondary-btn,
.layer-analytics-panel__primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: var(--md-radius-pill);
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
}

.layer-analytics-panel__secondary-btn {
    border: 1px solid var(--map-border);
    background: transparent;
    color: var(--map-fg);
}

.layer-analytics-panel__secondary-btn:hover:not(:disabled) {
    background: var(--map-glass-btn-hover);
}

.layer-analytics-panel__secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.layer-analytics-panel__primary-btn {
    border: 0;
    background: var(--map-btn-primary);
    color: var(--map-btn-primary-fg);
}

.layer-analytics-panel__primary-btn:hover {
    background: var(--md-blue-hover);
}

.layer-analytics-panel .analytics-panel__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layer-analytics-panel .analytics-panel__summary--comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layer-analytics-panel .analytics-panel__charts,
.layer-analytics-panel .analytics-panel__charts--comparison,
.layer-analytics-panel .analytics-panel__rankings {
    grid-template-columns: minmax(0, 1fr);
}

.layer-analytics-panel .analytics-panel__metric {
    min-height: 0;
}

.layer-analytics-panel .analytics-panel__metric-label {
    white-space: normal;
    line-height: 1.25;
}

.layer-analytics-panel .analytics-panel__metric-value {
    font-size: 1.125rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.layer-analytics-panel .analytics-parameter-chart {
    padding: 12px;
}

.layer-analytics-panel .analytics-parameter-chart__canvas {
    min-height: var(--analytics-chart-height);
}

.layer-analytics-panel .analytics-parameter-chart__canvas .mud-chart,
.layer-analytics-panel .analytics-parameter-chart__canvas canvas {
    height: var(--analytics-chart-height) !important;
    max-height: none;
}

.layer-analytics-panel .mud-tabs {
    margin-top: 4px;
}

.layer-analytics-panel .mud-tabs-panels {
    padding-top: 14px;
}

.layer-analytics-panel .mud-tabs-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    min-height: 40px;
    border-bottom: 1px solid var(--map-border);
    background: transparent;
}

.layer-analytics-panel .mud-tabs-toolbar-wrapper {
    background: transparent;
}

.layer-analytics-panel .mud-tabs-toolbar .mud-tab {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 40px;
    padding-inline: 12px;
    color: var(--map-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    transition: color var(--md-transition);
}

.layer-analytics-panel .mud-tabs-toolbar .mud-tab:hover {
    background: transparent;
    color: var(--map-fg);
}

.layer-analytics-panel .mud-tabs-toolbar .mud-tab.mud-tab-active {
    color: var(--map-fg);
}

.layer-analytics-panel .mud-tabs .mud-tab-slider {
    height: 2px;
    background: var(--map-fg);
    border-radius: 0;
}

.layer-analytics-panel .analytics-panel__table {
    font-size: 0.8125rem;
}

.layer-analytics-panel .mud-table,
.layer-analytics-panel .mud-simple-table {
    background: transparent;
}

.layer-analytics-panel .mud-table th,
.layer-analytics-panel .mud-simple-table th {
    color: var(--map-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-bottom-color: var(--map-border) !important;
}

.layer-analytics-panel .mud-table td,
.layer-analytics-panel .mud-simple-table td {
    border-bottom-color: var(--map-subtle-border, var(--md-border)) !important;
    font-variant-numeric: tabular-nums;
}

.layer-settings-panel__card {
    border-radius: calc(var(--map-panel-radius) - 0.55rem);
    background: var(--md-stone);
    box-shadow: inset 0 0 0 1px var(--md-border);
}

.layer-settings-panel__grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 2px 10px 6px;
}

.layer-settings-panel__chips {
    display: flex;
    gap: 6px;
    padding: 2px 10px 6px;
}

.layer-settings-panel__chip {
    flex: 1;
    min-height: 28px;
    padding: 0 8px;
    border-radius: var(--md-radius-sm);
    border: 1px solid var(--map-border);
    background: transparent;
    color: var(--map-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color var(--md-dur-base) var(--map-ease), color var(--md-dur-base) var(--map-ease), border-color var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__chip--active {
    background: var(--md-highlight);
    border-color: var(--map-fg);
    color: var(--map-fg);
}

.layer-settings-panel__section-label {
    padding: 6px 10px 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--map-muted);
}

.layer-settings-panel__row {
    padding: 6px 10px;
}

.layer-settings-panel__row--field {
    padding-top: 2px;
    padding-bottom: 2px;
}

.layer-settings-panel__row--switch {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 32px;
}

.layer-settings-panel__radio-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 8px;
}

.layer-settings-panel__radio-group .mud-radio {
    margin-inline-end: 0;
}

.layer-settings-panel__value {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--map-fg);
}

.layer-settings-panel__caption {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--map-muted);
}

.layer-settings-panel__divider {
    height: 1px;
    margin: 0 12px;
    background: var(--map-divider);
}

.layer-settings-panel__date-range-input {
    width: 100%;
}

/* MudBlazor copies picker Class onto adornment — don't stretch the calendar button */
.layer-settings-panel__date-range-input.mud-input-adornment,
.layer-settings-panel__date-range-input.mud-input-adornment-end {
    width: auto;
    flex: 0 0 auto;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.layer-settings-panel__date-range-input .mud-input-root,
.layer-settings-panel__select .mud-input-root {
    color: var(--map-fg);
    font-size: 0.875rem;
}

.layer-settings-panel .mud-input-label {
    color: var(--map-muted) !important;
    font-size: 0.8125rem !important;
}

.layer-settings-panel .mud-input-control-input-container {
    margin-top: 0 !important;
}

.layer-settings-panel .mud-switch {
    margin: 0;
}

.layer-settings-panel .mud-input-slot {
    font-size: 0.875rem;
}

.layer-settings-panel__field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    color: var(--map-muted);
}

.layer-settings-panel__region-select {
    width: 100%;
}

.layer-settings-panel__file-upload {
    width: 100%;
}

.layer-settings-panel__file-upload .mud-file-upload {
    width: 100%;
}

.layer-settings-panel__file-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 16px 12px;
    border: 1px dashed var(--map-border);
    border-radius: var(--md-radius-card);
    background: var(--map-surface-card);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--md-dur-base) var(--map-ease), background var(--md-dur-base) var(--map-ease);
}

.map-overlay--dark .layer-settings-panel__file-dropzone {
    border-color: var(--map-border);
    background: var(--map-subtle-bg);
}

.layer-settings-panel__file-dropzone--active {
    border-color: var(--map-fg);
    background: var(--md-highlight);
}

.layer-settings-panel__file-dropzone-icon {
    opacity: 0.72;
}

.layer-settings-panel__file-dropzone-text {
    margin: 0;
}

.layer-settings-panel__file-link {
    border: 0;
    padding: 0;
    background: none;
    color: var(--mud-palette-primary);
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}

.layer-settings-panel__file-name {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--map-fg);
    word-break: break-word;
}

.map-legend {
    position: absolute;
    bottom: var(--map-chrome-inset);
    left: var(--map-chrome-inset);
    z-index: 3;
    max-width: min(440px, calc(100vw - 24px));
    pointer-events: auto;
    transition: bottom var(--map-dur) var(--map-ease);
    animation: map-chrome-rise var(--map-dur-slow) var(--map-ease) 0.16s both;
}

.map-legend__scales {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
}

.map-legend__scale {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: max-content;
    max-width: min(360px, calc(100vw - 24px));
}

.map-legend__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: min(360px, calc(100vw - 24px));
}

.map-legend__pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 6px 0 8px;
    border-radius: var(--md-radius-pill);
    overflow: visible;
    background: var(--map-glass-bg);
    border: 1px solid var(--map-glass-border);
    color: var(--map-glass-fg);
    box-shadow: var(--map-glass-shadow);
    width: max-content;
    max-width: 100%;
}

.map-legend__pill--gradient {
    flex: 1 1 auto;
    width: min(360px, calc(100vw - 56px));
    min-width: 180px;
    max-width: min(360px, calc(100vw - 56px));
    padding: 0;
    gap: 0;
    overflow: visible;
    background: transparent;
    border-color: color-mix(in srgb, var(--map-glass-fg) 22%, transparent);
}

.map-legend__pill--gradient.map-glass {
    background: transparent;
}

.map-legend__pill--unit {
    flex: 0 0 auto;
    width: auto;
    padding: 0 8px;
}

.map-legend__pill--chips {
    height: 22px;
    width: max-content;
    max-width: 100%;
    padding: 0 8px 0 8px;
    gap: 6px;
}

.map-legend__pill--classes {
    height: auto;
    min-height: 22px;
    align-items: center;
    border-radius: var(--md-radius-pill);
    padding: 3px 8px 3px 8px;
    overflow: visible;
}

.map-legend__chips {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.map-legend__chips::-webkit-scrollbar {
    display: none;
}

.map-legend__chip {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 0;
    border-radius: var(--md-radius-2xs);
    border: 1px solid color-mix(in srgb, var(--map-glass-fg) 28%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 12%, transparent);
    cursor: help;
}

.map-legend__chip--icon {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.map-legend__chip-icon {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.map-legend__chip:hover {
    outline: 1px solid color-mix(in srgb, var(--map-accent) 55%, transparent);
    outline-offset: 1px;
}

.map-legend__unit {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    margin: 0;
    padding: 0 4px;
    min-width: 2rem;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--map-glass-fg);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    cursor: default;
}

.map-legend__unit--on-bar {
    padding: 0 8px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.55);
}

.map-legend__unit--cycle {
    cursor: pointer;
}

.map-legend__unit--cycle:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.map-legend__unit:disabled {
    opacity: 0.95;
    cursor: default;
}

.map-legend__rail {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.map-legend__bar {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--md-radius-pill);
    border: 0;
    box-shadow: none;
    pointer-events: none;
}

.map-legend__bands {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.map-legend__band {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: crosshair;
}

.map-legend__ticks {
    position: absolute;
    inset: 0 6px 0 2px;
    z-index: 1;
    pointer-events: none;
}

.map-legend__tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
}

.map-legend__tick--start {
    transform: translate(0, -50%);
}

.map-legend__tick--end {
    transform: translate(-100%, -50%);
}

.map-legend__marker {
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #fff;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.map-legend__swatch-box {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border-radius: var(--md-radius-tag);
    border: 1px solid var(--map-glass-border);
    background: var(--map-glass-bg);
    box-shadow: var(--map-glass-shadow);
    color: var(--map-glass-fg);
    cursor: help;
}

.map-legend__swatch-box-fill {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: var(--md-radius-2xs);
    background: var(--map-legend-swatch, #8b5cf6);
    border: 1px solid color-mix(in srgb, var(--map-glass-fg) 28%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
}

.map-legend__swatch-box:hover {
    outline: 1px solid color-mix(in srgb, var(--map-accent) 55%, transparent);
    outline-offset: 1px;
}

.map-legend__tip {
    position: absolute;
    bottom: calc(100% + 6px);
    top: auto;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 72px;
    max-width: 220px;
    padding: 5px 7px;
    border-radius: var(--md-radius-tag);
    background: var(--map-glass-bg);
    border: 1px solid var(--map-glass-border);
    box-shadow: var(--map-glass-shadow);
    color: var(--map-glass-fg);
    font-size: 0.6875rem;
    line-height: 1.25;
    pointer-events: none;
    transform: translateX(-50%);
    animation: map-popover-enter var(--map-dur-fast) var(--map-ease) both;
}

.map-legend__tip strong {
    font-weight: 600;
}

.map-legend__tip span {
    color: var(--map-glass-muted);
}

.map-legend__tip--classes,
.map-legend__tip--swatch {
    left: 50%;
    bottom: calc(100% + 4px);
    top: auto;
}

.map-legend__classes {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.map-legend__extras {
    margin: 0;
    padding: 3px 8px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    border-radius: var(--md-radius-md);
    max-width: 100%;
}

.map-legend__class {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 16px;
    padding: 1px 2px;
    border-radius: var(--md-radius-2xs);
    cursor: default;
}

.map-legend__class:hover {
    background: var(--map-glass-btn-hover);
}

.map-legend__class-swatch {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--map-glass-fg) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}

.map-legend__class-swatch--square {
    border-radius: var(--md-radius-hairline);
}

.map-legend__class-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.map-legend__class-label {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--map-glass-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

@media (max-width: 720px) {
    .layer-settings-panel,
    .layer-analytics-panel {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 78dvh;
        animation-name: map-panel-enter-sheet;
    }

    .layer-settings-panel .map-panel-shell,
    .layer-analytics-panel .map-panel-shell {
        border-radius: 1.35rem 1.35rem 0 0;
        padding-bottom: calc(var(--map-panel-pad) + env(safe-area-inset-bottom, 0));
    }

    .layer-settings-panel .map-panel-shell__core,
    .layer-analytics-panel .map-panel-shell__core {
        border-radius: calc(1.35rem - 0.28rem) calc(1.35rem - 0.28rem) 0 0;
        animation: map-panel-content var(--map-dur) var(--map-ease) 0.1s both;
    }

    .layer-settings-panel .map-panel-shell::before,
    .layer-analytics-panel .map-panel-shell::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 0.25rem;
        margin: 0.45rem auto 0.15rem;
        border-radius: var(--md-radius-tag);
        background: var(--md-border-strong);
        flex-shrink: 0;
    }

    @keyframes map-panel-enter-sheet {
        from {
            opacity: 0;
            transform: translateY(28px) scale(0.985);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .map-legend {
        left: var(--map-chrome-inset);
        max-width: calc(100vw - 24px);
    }

    .map-left-toolbar {
        padding-left: 4px;
    }

    .map-timeline-bar,
    .map-overlay--layer-panel-open .map-timeline-bar,
    .map-overlay--analytics-panel-open .map-timeline-bar {
        left: var(--map-chrome-inset);
        right: var(--map-chrome-inset);
    }

    /* Keep map chrome out of the way while a bottom sheet is open. */
    .map-overlay--sheet-open .map-toolbar.map-overlay__right-dock {
        z-index: 6;
    }

    .map-overlay--sheet-open .map-bottom-dock,
    .map-overlay--sheet-open .map-dock-br {
        display: none;
    }
}

.map-page {
    --map-space-1: 4px;
    --map-space-2: 8px;
    --map-space-3: 12px;
    --map-chrome-inset: var(--map-space-3);
    --map-chrome-inset-top: calc(var(--map-chrome-inset) + env(safe-area-inset-top, 0px));
    --map-glass-control: 28px;
    --map-toolbar-height: calc(var(--map-glass-control) + var(--map-space-2));
    --map-top-stack: calc(var(--map-chrome-inset-top) + var(--map-toolbar-height) + var(--map-space-2));
    --map-top-banner-height: 7rem;
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--md-canvas);
    color: var(--md-ink);
}

html:has(.map-page),
html:has(.map-page) body,
html:has(.map-page) #app {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.map-page,
.map-page #app {
    overflow: hidden;
}

.map-page__map {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    background: var(--md-canvas, #f1ebe1);
}

.map-page__map .comparison-container,
.map-page__map .comparison-container .maplibregl-map {
    background: transparent;
}

.map-page__map .comparison-container.maplibre-starfield-host {
    background-color: #0a192f;
}

.map-page--dark .map-page__map {
    background: var(--md-canvas, #0b0d0e);
}

.map-add-layer-menu {
    width: min(340px, calc(100vw - 24px));
    max-width: min(340px, calc(100vw - 24px));
}

/* The popover list is the scroll container; pin the search to its top. */
.map-add-layer-menu .mud-menu-list {
    padding: 0 8px 8px;
}

.map-add-layer-menu__search {
    position: sticky;
    top: 0;
    z-index: 2;
    min-width: 200px;
    margin: 0 0 2px;
    padding: 8px 0 6px;
    background: var(--md-surface-raised);
}

/* Shrink the outlined search field below MudBlazor's default dense height. */
.map-add-layer-menu__search .mud-input .mud-input-root-outlined {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

.map-add-layer-menu__search .mud-input-control.mud-input-control-margin-dense {
    margin: 0;
}

.map-add-layer-menu__groups {
    gap: 0;
    padding: 0;
    border-radius: 0;
}

/* Scientific group headers must span the whole menu width, not shrink to
   the title text. MudExpansionPanels/panels default to content width here. */
.map-add-layer-menu__groups,
.map-add-layer-menu__groups .mud-expand-panel,
.map-add-layer-menu__group-panel .mud-expand-panel-header {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.map-add-layer-menu__groups .mud-expand-panel {
    background: transparent;
    border-radius: 0;
    margin: 0 !important;
}

/* !important needed: MudBlazor.min.css loads after this file and sets
   .mud-expand-panel .mud-expand-panel-header to a 48px min-height. */
.map-add-layer-menu__group-panel .mud-expand-panel-header {
    min-height: 28px !important;
    padding: 4px 6px !important;
    border-radius: var(--md-radius-tag);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--map-muted);
}

.map-add-layer-menu__group-panel .mud-expand-panel-icon {
    font-size: 1.125rem !important;
}

.map-add-layer-menu__group-panel .mud-expand-panel-content {
    padding: 0 0 2px !important;
}

/* Nested indicator menus: the MudMenu root is display:inline-flex by default and
   only stretches when it is a direct child of .mud-menu-list. Force full width
   so rows (and the flat, group-less entries) do not shrink to their label. */
.map-add-layer-menu__group-panel .mud-menu,
.map-add-layer-menu__flat-entry,
.map-add-layer-menu__flat-entry > .mud-menu {
    display: block;
    width: 100%;
    max-width: none;
    align-self: stretch;
}

/* When a nested level menu falls back to a button activator, keep it row-like. */
.map-add-layer-menu__group-panel .mud-menu-button-activator,
.map-add-layer-menu__flat-entry .mud-menu-button-activator {
    width: 100%;
    justify-content: flex-start;
}

/* Entries shown without a scientific group match the in-group entries. */
.map-add-layer-menu__group-panel .mud-menu-item,
.map-add-layer-menu__flat-entry .mud-menu-item {
    min-height: 32px;
    padding: 3px 6px 3px 10px;
}

.map-add-layer-menu__group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.map-add-layer-menu__group-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Named subsection inside an umbrella section (e.g. «Погода → Термический режим»). */
.map-add-layer-menu__subgroup-title {
    padding: 6px 10px 2px;
    color: var(--map-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.8;
}

.map-add-layer-menu__beta {
    flex: 0 0 auto;
    margin-right: auto;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: var(--md-radius-tag);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    opacity: 0.7;
}

.layer-settings-panel__link-btn {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--map-fg);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition: color var(--md-dur-base) var(--map-ease), text-decoration-color var(--md-dur-base) var(--map-ease);
}

.layer-settings-panel__link-btn:hover {
    color: var(--map-link);
    text-decoration-color: var(--map-link);
}

.layer-settings-panel__range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.map-place-search.mud-dialog {
    max-width: 360px;
}

/* Doubled .mud-dialog keeps these ahead of MudBlazor's later defaults. */
.map-place-search.mud-dialog .mud-dialog-content {
    padding: 10px 14px 4px;
}

.map-place-search.mud-dialog .mud-dialog-actions {
    padding: 4px 10px 10px;
    gap: 6px;
}

.map-place-search__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-place-search__modes {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    margin: -4px 0 0;
}

.map-place-search__mode {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--md-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.1;
    padding: 4px 2px 8px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--md-dur-base) var(--map-ease);
}

.map-place-search__mode::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    border-radius: var(--md-radius-2xs);
    background: transparent;
    transform: scaleX(0.4);
    transform-origin: left center;
    transition: background-color var(--md-dur-base) var(--map-ease), transform var(--md-dur-base) var(--map-ease);
}

.map-place-search__mode:hover {
    color: var(--md-ink);
}

.map-place-search__mode--active {
    color: var(--md-ink);
}

.map-place-search__mode--active::after {
    background: var(--md-mint);
    transform: scaleX(1);
}

.map-place-search__coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.map-place-search__field {
    margin: 0;
}

.map-place-search__field .mud-input {
    font-size: 0.875rem;
}

.map-place-search__field .mud-input-slot {
    font-variant-numeric: tabular-nums;
}

.map-place-search__field .mud-input-label-inputlabel {
    font-size: 0.75rem;
}

.map-place-search__option {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 2px 0;
    line-height: 1.25;
}

.map-place-search__option--disabled {
    opacity: 0.55;
}

.map-place-search__option-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--md-ink);
}

.map-place-search__option-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--md-muted);
}

.map-place-search__empty {
    margin: 0;
    padding: 8px 4px;
    font-size: 0.8rem;
    color: var(--md-muted);
}

.map-place-search__error {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--md-danger);
}

.map-place-search__go {
    min-width: 88px;
}

@media (max-width: 360px) {
    .map-place-search__coords {
        grid-template-columns: 1fr;
    }
}

.map-sessions-dialog.mud-dialog {
    max-width: 480px;
}

.map-sessions-dialog.mud-dialog .mud-dialog-content {
    padding: 0 12px 8px;
}

.map-sessions-dialog.mud-dialog .mud-dialog-actions {
    padding: 8px 12px 12px;
    justify-content: stretch;
}

.map-sessions-dialog__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.map-sessions-dialog__subtitle {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.map-sessions-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.map-sessions-dialog__alert {
    margin: 0;
}

.map-sessions-dialog__list {
    display: flex;
    flex-direction: column;
    min-height: min(40vh, 280px);
    max-height: min(52vh, 420px);
    overflow-y: auto;
    border: 1px solid var(--map-border);
    border-radius: var(--md-radius-sm);
    background: var(--map-surface);
}

.map-sessions-dialog__empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--map-muted);
    font-size: 0.8125rem;
}

.map-sessions-dialog__folder {
    border-top: 1px solid var(--map-border);
}

.map-sessions-dialog__folder:first-child,
.map-sessions-dialog__folder--root {
    border-top: 0;
}

.map-sessions-dialog__folder--root + .map-sessions-dialog__folder {
    border-top: 1px solid var(--map-border);
}

.map-sessions-dialog__folder-head {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    background: var(--map-subtle-bg);
}

.map-sessions-dialog__folder-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    background: transparent;
    color: var(--map-fg);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.map-sessions-dialog__folder-toggle:hover:not(:disabled) {
    background: var(--map-hover);
}

.map-sessions-dialog__folder-toggle:disabled {
    opacity: 0.5;
    cursor: default;
}

.map-sessions-dialog__folder-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-sessions-dialog__folder-count {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--map-muted);
}

.map-sessions-dialog__folder-menu {
    flex-shrink: 0;
    margin-right: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .map-sessions-dialog__folder-menu {
        opacity: 0;
    }

    .map-sessions-dialog__folder-head:hover .map-sessions-dialog__folder-menu,
    .map-sessions-dialog__folder-head:focus-within .map-sessions-dialog__folder-menu {
        opacity: 1;
    }
}

.map-sessions-dialog__folder-body {
    display: flex;
    flex-direction: column;
}

.map-sessions-dialog__folder-body .map-sessions-dialog__item {
    padding-left: 28px;
}

.map-sessions-dialog__folder-empty {
    padding: 8px 12px 10px 28px;
    color: var(--map-muted);
    font-size: 0.75rem;
}

.map-sessions-dialog__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) minmax(96px, 38%) 32px;
    gap: 4px;
    align-items: center;
    min-height: 34px;
    padding: 2px 8px;
    border: 0;
    cursor: default;
    user-select: none;
}

.map-sessions-dialog__item:hover {
    background: var(--map-hover);
}

.map-sessions-dialog__item--selected,
.map-sessions-dialog__item--selected:hover {
    background: color-mix(in srgb, var(--map-fg) 12%, transparent);
}

.map-sessions-dialog__item--active .map-sessions-dialog__item-title {
    font-weight: 600;
}

.map-sessions-dialog__item-icon {
    justify-self: center;
    color: var(--map-muted);
}

.map-sessions-dialog__item-main {
    min-width: 0;
}

.map-sessions-dialog__item-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.map-sessions-dialog__item-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--map-muted);
    text-align: right;
}

.map-sessions-dialog__badge {
    display: inline;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: var(--md-radius-xs);
    background: var(--map-hover);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}

.map-sessions-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (hover: hover) and (pointer: fine) {
    .map-sessions-dialog__actions {
        opacity: 0;
    }

    .map-sessions-dialog__item:hover .map-sessions-dialog__actions,
    .map-sessions-dialog__item:focus-within .map-sessions-dialog__actions,
    .map-sessions-dialog__item--selected .map-sessions-dialog__actions {
        opacity: 1;
    }
}

.map-sessions-dialog__rename-field {
    margin: 0;
}

.map-sessions-dialog__new-folder {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-top: 1px solid var(--map-border);
}

.map-sessions-dialog__folder-field {
    flex: 1;
    min-width: 0;
}

.map-sessions-dialog__new-folder-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: 0;
    border-top: 1px solid var(--map-border);
    background: transparent;
    color: var(--map-muted);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.map-sessions-dialog__new-folder-btn:hover:not(:disabled) {
    background: var(--map-hover);
    color: var(--map-fg);
}

.map-sessions-dialog__new-folder-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.map-sessions-dialog__save-hint {
    margin: 0;
    padding: 0 2px;
    font-size: 0.75rem;
    color: var(--map-muted);
}

.map-sessions-dialog__save-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.map-sessions-dialog__save-name {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.map-overlay--dark .map-sessions-dialog__folder-head {
    background: color-mix(in srgb, var(--map-fg) 4%, var(--map-surface));
}

@media (max-width: 520px) {
    .map-sessions-dialog__item {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
    }

    .map-sessions-dialog__item-date {
        display: none;
    }

    .map-sessions-dialog__save-bar {
        flex-wrap: wrap;
    }

    .map-sessions-dialog__save-name {
        flex: 1 1 100%;
    }
}

.map-page__map .comparison-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-page__map .comparison-container .maplibregl-map {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Globe atmosphere raises the map surfaces to z-index 3, so the compare handle must stay above them. */
.map-page__map .comparison-container .maplibregl-compare {
    z-index: 4;
}

.map-compare-banner {
    position: absolute;
    top: var(--map-chrome-inset-top);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    min-width: min(280px, calc(100vw - 24px));
    max-width: min(420px, calc(100vw - 24px));
    pointer-events: auto;
    animation: map-banner-enter var(--map-dur-slow) var(--map-ease) both;
}

.map-compare-banner__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.map-compare-banner__title {
    font-size: 12px;
    font-weight: 500;
    color: var(--map-glass-muted);
    line-height: 1.2;
    text-align: center;
}

.map-compare-banner__sides {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.map-compare-banner__side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 46%;
    padding: 4px 8px;
    border-radius: var(--md-radius-tag);
    border: 1px solid var(--map-glass-divider);
    background: var(--map-glass-btn-hover);
    font-size: 13px;
    line-height: 1.2;
    color: var(--map-glass-fg);
}

.map-compare-banner__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--md-radius-tag);
    background: color-mix(in srgb, var(--map-glass-fg) 10%, transparent);
    color: var(--map-glass-fg);
    font-size: 0.8125rem;
    font-weight: 400;
    flex-shrink: 0;
}

.map-compare-banner__mark--b {
    background: color-mix(in srgb, var(--md-blue) 16%, transparent);
    color: var(--md-blue);
}

.map-compare-banner__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.map-compare-banner__swap {
    flex-shrink: 0;
    opacity: 0.55;
    color: var(--map-glass-muted);
}

.map-compare-banner__exit {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 16px;
    border: 1px solid var(--map-glass-divider);
    border-radius: var(--md-radius-tag);
    background: transparent;
    color: var(--map-glass-fg);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--md-transition), border-color var(--md-transition);
}

.map-compare-banner__exit:hover {
    background: var(--map-glass-btn-hover);
    border-color: color-mix(in srgb, var(--map-glass-fg) 22%, var(--map-glass-divider));
}

.map-compare-banner__exit:focus-visible {
    background: var(--map-glass-btn-hover);
    border-color: color-mix(in srgb, var(--map-glass-fg) 22%, var(--map-glass-divider));
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
}

.map-overlay--dark .map-compare-banner__mark--b {
    background: color-mix(in srgb, var(--md-blue) 24%, transparent);
    color: var(--md-blue);
}

@media (max-width: 960px) {
    .map-overlay {
        --map-timeline-dock-gutter: 12px;
    }

    .map-bottom-dock {
        flex-direction: column;
        align-items: stretch;
        gap: var(--map-space-1);
    }

    .map-bottom-dock__pills {
        flex-direction: column;
        align-items: stretch;
        min-width: 188px;
        gap: var(--map-space-1);
    }

    .map-bottom-dock__pill.map-glass {
        width: 100%;
        justify-content: space-evenly;
    }

    .map-timeline-bar,
    .map-legend {
        bottom: calc(var(--map-chrome-inset) + var(--map-bottom-dock-height) + env(safe-area-inset-bottom, 0px));
    }

    .map-overlay--timeline-open {
        --map-dock-br-bottom: calc(
            var(--map-chrome-inset)
            + var(--map-bottom-dock-height)
            + var(--map-timeline-height)
            + var(--map-dock-stack-gap)
            + env(safe-area-inset-bottom, 0px)
        );
    }

    .map-overlay--timeline-open .map-legend {
        bottom: calc(var(--map-chrome-inset) + var(--map-bottom-dock-height) + var(--map-timeline-height) + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 900px) {
    .map-left-toolbar__title {
        display: none;
    }
}

@media (max-width: 720px) {
    .map-compare-banner {
        max-width: calc(100vw - 16px);
        left: 50%;
        right: auto;
        width: calc(100vw - 16px);
    }

    .map-compare-banner__side {
        max-width: 42%;
    }

    .map-zoom-hud {
        display: none !important;
    }

    .map-overlay--has-legend {
        --map-legend-gutter: 0px;
    }

    .map-timeline-bar {
        left: var(--map-chrome-inset);
        width: auto;
    }

    .map-legend {
        max-width: calc(100vw - 24px);
    }

    .map-bottom-dock {
        left: auto;
        right: var(--map-chrome-inset);
        align-items: stretch;
    }

    .map-bottom-dock__pills {
        align-items: stretch;
    }

    .map-dock-br {
        left: auto;
        right: var(--map-chrome-inset);
        align-items: flex-end;
    }

    .map-overlay--sheet-open .map-toolbar.map-overlay__right-dock {
        top: var(--map-chrome-inset-top);
        right: var(--map-chrome-inset);
        left: auto;
        bottom: auto;
        transform: none;
        z-index: 6;
    }

    .map-overlay--sheet-open .map-bottom-dock,
    .map-overlay--sheet-open .map-dock-br {
        display: none;
    }

    .map-overlay--sheet-open .map-legend {
        bottom: var(--map-chrome-inset);
    }
}

.map-overlay--compare-active .map-left-panel {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--map-dur) var(--map-ease);
}

.map-overlay--compare-active .map-overlay__right-dock {
    right: var(--map-chrome-inset);
}

.map-overlay--compare-active .map-zoom-hud {
    left: 50%;
}

.map-overlay--compare-active .map-zoom-hud--visible {
    transform: translateX(-50%) translateY(0);
}

.map-overlay--compare-active .map-toolbar .map-glass__btn:not(.map-glass__btn--active) {
    opacity: 0.65;
}

.map-overlay--compare-active.map-overlay--analytics-panel-open .layer-analytics-panel {
    z-index: 4;
}

.maplibregl-terradraw-toolbar,
.maplibre-gl-terradraw .maplibregl-ctrl-group {
    border-radius: var(--md-radius-card) !important;
    border: 1px solid var(--map-border) !important;
    background: var(--md-surface-raised) !important;
    box-shadow: var(--md-shadow-subtle);
}

.maplibregl-terradraw-toolbar button,
.maplibre-gl-terradraw .maplibregl-ctrl-group button {
    color: var(--map-fg) !important;
}

.maplibregl-terradraw-toolbar button:hover,
.maplibre-gl-terradraw .maplibregl-ctrl-group button:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

.map-overlay--dark .maplibregl-terradraw-toolbar button:hover,
.map-overlay--dark .maplibre-gl-terradraw .maplibregl-ctrl-group button:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.meteo-forecast {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    color: var(--map-fg);
}

.meteo-forecast__now {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: center;
}

.meteo-forecast__now-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.meteo-forecast__now-icon {
    width: 2.6rem !important;
    height: 2.6rem !important;
    color: var(--map-accent);
}

.meteo-forecast__now-temp {
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.meteo-forecast__now-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.meteo-forecast__condition {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.25;
}

.meteo-forecast__meta-line,
.meteo-forecast__about-text,
.meteo-forecast__day-pop,
.meteo-forecast__block-hint {
    color: var(--map-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.meteo-forecast__sun {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meteo-forecast__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.meteo-forecast__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 10px 9px;
    background: var(--map-subtle-bg);
    border: 1px solid var(--map-subtle-border);
    border-radius: var(--md-radius-card);
}

.meteo-forecast__stat-label {
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.meteo-forecast__stat-value {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.meteo-forecast__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.meteo-forecast__block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.meteo-forecast__block-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meteo-forecast__daily {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.meteo-forecast__day {
    flex: 1 0 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 52px;
    padding: 8px 4px 7px;
    background: var(--map-subtle-bg);
    border: 1px solid var(--map-subtle-border);
    border-radius: var(--md-radius-card);
    text-align: center;
}

.meteo-forecast__day-name {
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
}

.meteo-forecast__day-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: var(--map-accent);
}

.meteo-forecast__day-temps {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.meteo-forecast__day-temps strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.meteo-forecast__day-temps span {
    color: var(--map-muted);
    font-size: 0.78rem;
}

.meteo-forecast__hourly-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -4px;
    padding-bottom: 4px;
}

.meteo-forecast__hourly {
    --meteo-hour-cols: 1;
    display: grid;
    grid-template-columns: 4.4rem repeat(var(--meteo-hour-cols), minmax(2.35rem, 1fr));
    align-items: center;
    min-width: max-content;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.meteo-forecast__hourly-corner,
.meteo-forecast__hourly-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--map-glass-bg);
    color: var(--map-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 8px 4px 0;
}

.meteo-forecast__hourly-day {
    color: var(--map-muted);
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0 4px 6px;
    white-space: nowrap;
}

.meteo-forecast__hourly-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    padding: 2px;
    text-align: center;
}

.meteo-forecast__hourly-cell--time {
    color: var(--map-muted);
    font-weight: 500;
}

.meteo-forecast__hourly-cell--dir {
    flex-direction: column;
    gap: 0;
    font-size: 0.62rem;
    line-height: 1.1;
}

.meteo-forecast__hourly-icon {
    width: 0.95rem !important;
    height: 0.95rem !important;
    color: var(--map-accent);
}

.meteo-forecast__chip {
    border-radius: var(--md-radius-xs);
    min-width: 1.7rem;
}

.meteo-forecast__chip--calm {
    background: color-mix(in srgb, var(--md-success, #3b9450) 22%, transparent);
}

.meteo-forecast__chip--breeze {
    background: color-mix(in srgb, var(--md-warning, #c4862e) 22%, transparent);
}

.meteo-forecast__chip--windy {
    background: color-mix(in srgb, var(--map-accent) 26%, transparent);
}

.meteo-forecast__arrow {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 1;
    transform-origin: center;
}

.meteo-forecast__about {
    padding-top: 2px;
    border-top: 1px solid var(--map-divider);
}

.meteo-forecast__about .meteo-forecast__block-title {
    margin-bottom: 6px;
}

@media (max-width: 560px) {
    .meteo-forecast__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meteo-forecast__now {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Basemap switcher (dedicated control) ── */

.map-basemap-switcher {
    display: inline-flex;
    align-items: center;
}

.map-basemap-panel {
    --map-glass-btn-hover: var(--md-highlight);
    width: min(308px, calc(100vw - 24px));
    padding: 10px 12px 12px;
    background: var(--md-surface-raised);
    border: 1px solid var(--map-border);
    border-radius: var(--map-panel-radius);
    box-shadow: var(--map-shadow);
    color: var(--map-fg);
}

.map-basemap-panel .mud-list {
    padding: 0;
    background: transparent;
}

.map-basemap-panel__title {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--map-fg);
}

.map-basemap-panel__group {
    margin: 10px 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--map-muted);
}

.map-basemap-panel__group:first-of-type {
    margin-top: 0;
}

.map-basemap-panel__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.map-basemap-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: var(--md-radius-tag);
    background: transparent;
    color: var(--map-fg);
    font-family: var(--md-font);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--map-dur-fast) var(--map-ease),
        border-color var(--map-dur-fast) var(--map-ease);
}

.map-basemap-tile:hover:not(:disabled),
.map-basemap-tile:focus-visible:not(:disabled) {
    background: var(--md-highlight);
}

.map-basemap-tile--active {
    border-color: color-mix(in srgb, var(--map-accent) 55%, transparent);
    background: color-mix(in srgb, var(--map-accent) 10%, transparent);
}

.map-basemap-tile:disabled {
    opacity: 0.5;
    cursor: default;
}

.map-basemap-tile__preview {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: var(--md-radius-tag);
    background: var(--md-stone);
    color: var(--md-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map-fg) 12%, transparent);
}

.map-basemap-tile__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.map-basemap-tile__name {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.15;
}

.map-basemap-tile__brand {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--map-muted);
}

.map-basemap-tile__check {
    flex: 0 0 auto;
    color: var(--map-accent);
}

@media (prefers-reduced-motion: reduce) {
    .map-basemap-tile {
        transition: none;
    }
}

/* ── Mobile compactness & overlap fixes ───────────────────────────────
   The map chrome is a set of absolutely-positioned blocks. On narrow
   viewports they used to fight for the same edges: the left panel reached
   down into the legend / timeline / bottom dock, and the compare & measure
   banners covered the two top toolbars. Keep everything compact and
   vertically stacked here. */

@media (max-width: 960px) {
    /* The legend sits above the timeline on these widths, so it no longer
       needs to reserve a horizontal gutter — let the timeline use full width. */
    .map-overlay--has-legend {
        --map-legend-gutter: 0px;
    }

    .map-left-panel {
        gap: var(--map-space-3);
    }

    .map-left-toolbar {
        padding-left: 4px;
    }
}

@media (max-width: 720px) {
    /* The icon already reads as "layers" — drop the label so the left and
       right toolbars can never collide on a narrow screen. */
    .map-left-toolbar .map-glass__text-btn {
        padding: 0 4px;
    }

    .map-left-toolbar .map-glass__text-btn > span {
        display: none;
    }

    /* Cap the chip column so it always stops above the legend / timeline. */
    .map-layer-stack {
        max-height: min(360px, 50dvh);
    }

    /* Compare / measure own the top edge: drop the banner just below the
       toolbar row and let the layer chips step aside instead of overlapping. */
    .map-compare-banner {
        top: var(--map-top-stack);
    }

    .map-page:has(.map-compare-banner) .map-layer-stack {
        display: none;
    }

    /* The floating assistant toggle would sit on top of the banner. */
    .map-page:has(.map-compare-banner) .assistant-root--map[data-open="false"] {
        display: none;
    }

    /* Keep the offline notice clear of the compare / measure banner. */
    .map-offline-banner--offset {
        top: calc(
            var(--map-top-stack)
            + var(--map-top-banner-height)
            + var(--map-space-2)
        );
    }
}

/* ── Phones: scale the whole chrome down ─────────────────────────────
   At ~360px the two top toolbars used to sit edge-to-edge and read as one
   giant pill, while the bottom dock stacked into two full-width strips.
   Shrink the controls, tighten the group gaps and lay the action dock out
   as a single compact row. */

@media (max-width: 720px) {
    .map-glass__group {
        gap: 2px;
        padding: 3px;
    }

    .map-left-toolbar {
        padding-left: 2px;
    }

    .map-left-toolbar__brand {
        gap: 4px;
        padding-right: 0;
    }

    .map-left-toolbar__logo,
    .map-left-toolbar__logo-spin {
        width: 16px;
        height: 16px;
    }

    .map-glass__separator {
        height: calc(var(--map-toolbar-control) - 8px);
        margin: 0 1px;
    }

    /* Action dock: one compact row instead of two stacked pills. Wrap is a
       safety net for very narrow viewports (see the 350px breakpoint). */
    .map-bottom-dock {
        max-width: calc(100vw - var(--map-chrome-inset) * 2);
    }

    .map-bottom-dock__pills {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        min-width: 0;
        gap: var(--map-space-1);
    }

    .map-bottom-dock__pill.map-glass {
        width: auto;
        justify-content: center;
        padding: 3px;
    }

    /* The empty-state cue should not dominate the viewport. */
    .map-empty-cue {
        max-width: min(210px, calc(100vw - 48px));
        padding: 10px 12px;
    }

    .map-empty-cue__title {
        font-size: 0.875rem;
    }

    .map-empty-cue__hint {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .map-viewport-info__panel {
        width: min(260px, calc(100vw - 24px));
    }
}

@media (max-width: 360px) {
    .map-page {
        --map-glass-control: 32px;
        --map-toolbar-height: 40px;
    }

    /* The dock wraps to two rows here; reserve both so the legend and
       timeline still clear it. */
    .map-overlay {
        --map-dock-rows: 2;
    }
}

/* ── Depth: lift the chrome off light basemaps ────────────────────────
   Light parchment basemaps made the near-white plaques melt into the map.
   A soft second shadow gives every floating surface a legible edge in both
   themes without changing the palette. */

.map-overlay .map-glass {
    box-shadow:
        var(--map-glass-shadow),
        0 8px 24px -16px color-mix(in srgb, #000000 32%, transparent);
}

/* Empty-state cue: read as a deliberate drop-zone card, not a big slab. */
.map-empty-cue {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--map-glass-border) 70%, transparent);
    background: color-mix(in srgb, var(--map-glass-bg) 92%, transparent);
}

/* ── Unified command bar (desktop + mobile) ───────────────────────────
   The dock used to be two separate glass plaques (navigation / tools) that
   stacked on narrow screens. It is now one floating bar with the same
   chrome on every viewport, and a hairline divider between the two logical
   groups. */

.map-bottom-dock {
    flex-direction: row;
    align-items: flex-end;
    max-width: calc(100vw - var(--map-chrome-inset) * 2);
}

.map-bottom-dock__pills {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
    /* 2px shell padding + 1px border + 1px pill padding on each side keeps the
       one-row bar exactly as tall as --map-toolbar-height. */
    padding: 2px;
    border: 1px solid var(--map-glass-border);
    border-radius: var(--map-chrome-radius);
    background: var(--map-glass-bg);
    box-shadow:
        var(--map-glass-shadow),
        0 8px 24px -16px color-mix(in srgb, #000000 32%, transparent);
}

.map-bottom-dock__pill.map-glass {
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    justify-content: center;
    padding: 1px 4px;
    border: 0;
    border-radius: var(--map-chrome-radius);
    background: transparent;
    box-shadow: none;
}

.map-bottom-dock__pill + .map-bottom-dock__pill {
    position: relative;
    margin-left: 6px;
    padding-left: 11px;
}

.map-bottom-dock__pill + .map-bottom-dock__pill::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--map-glass-divider);
}

/* ── Mobile command bar: content-sized, never stretched ───────────────
   The bar used to be stretched across the viewport with its buttons pushed
   to the right, which left a huge empty capsule. Now it is only as wide as
   its buttons and wraps only when the screen is genuinely too narrow. */

@media (max-width: 720px) {
    .map-page,
    .map-overlay {
        --map-glass-control: 32px;
        --map-toolbar-height: 40px;
    }

    .map-bottom-dock,
    .map-bottom-dock__pills {
        width: fit-content;
        max-width: calc(100vw - var(--map-chrome-inset) * 2);
    }

    .map-bottom-dock {
        align-items: flex-end;
    }

    .map-bottom-dock__pills {
        justify-content: flex-start;
        gap: 0;
        padding: 3px;
    }

    .map-bottom-dock__pill.map-glass {
        gap: 2px;
        padding: 1px 3px;
    }

    .map-bottom-dock__pill + .map-bottom-dock__pill {
        margin-left: 4px;
        padding-left: 8px;
    }
}

/* ── Layers card: compact list with quick actions ─────────────────────
   Variant 1. A single glass card holding the added layers as compact rows:
   consistent width, name + period meta, always-visible visibility /
   analytics actions and an overflow menu for reorder / compare. */

.map-layer-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(280px, calc(100vw - 24px));
    max-height: min(440px, calc(100dvh - 180px));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.map-layer-stack__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 6px 7px 12px;
    border-bottom: 1px solid var(--map-glass-divider);
}

.map-layer-stack__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--map-glass-muted);
}

.map-layer-stack__count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 6px;
    border-radius: var(--md-radius-pill);
    background: color-mix(in srgb, var(--map-fg) 8%, transparent);
    color: var(--map-glass-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.map-layer-stack__add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--map-glass-divider);
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: var(--map-fg);
    cursor: pointer;
    transition:
        background-color var(--map-dur-fast) var(--map-ease),
        color var(--map-dur-fast) var(--map-ease),
        transform var(--map-dur-fast) var(--map-ease-snap);
}

.map-layer-stack__add:hover:not(:disabled),
.map-layer-stack__add:focus-visible:not(:disabled) {
    background: var(--map-glass-btn-hover);
    transform: translateY(-1px);
}

.map-layer-stack__add:disabled {
    opacity: 0.45;
    cursor: default;
}

.map-layer-stack__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.map-layer-row {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    padding: 2px 2px 2px 4px;
    border: 1px solid transparent;
    border-radius: var(--md-radius-md);
    transition:
        background-color var(--map-dur-fast) var(--map-ease),
        border-color var(--map-dur-fast) var(--map-ease);
}

.map-layer-row:hover {
    background: var(--map-glass-btn-hover);
}

.map-layer-row--selected {
    background: var(--md-highlight);
    border-color: color-mix(in srgb, var(--md-blue) 38%, transparent);
}

.map-layer-row__main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 2px;
    border: 0;
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.map-layer-row__main:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 1px;
}

.map-layer-row__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--md-radius-sm);
    background: color-mix(in srgb, var(--map-fg) 6%, transparent);
    color: var(--map-fg);
}

.map-layer-row--hidden .map-layer-row__icon {
    opacity: 0.6;
}

.map-layer-row__dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--map-fg);
    box-shadow: 0 0 0 1px var(--map-glass-bg);
}

.map-layer-row__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.map-layer-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--map-fg);
}

.map-layer-row--hidden .map-layer-row__name {
    color: var(--map-glass-muted);
    text-decoration: line-through;
}

.map-layer-row--pending .map-layer-row__name {
    opacity: 0.8;
}

.map-layer-row__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--map-muted);
    font-variant-numeric: tabular-nums;
}

.map-layer-row__actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.map-layer-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: var(--map-glass-fg);
    cursor: pointer;
    transition: background-color var(--map-dur-fast) var(--map-ease), color var(--map-dur-fast) var(--map-ease);
}

.map-layer-row__action:hover,
.map-layer-row__action:focus-visible {
    background: color-mix(in srgb, var(--map-fg) 8%, transparent);
}

.map-layer-row__action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: -2px;
}

.map-layer-row__action--off {
    color: var(--map-glass-muted);
}

.map-layer-row__action--active {
    background: color-mix(in srgb, var(--md-blue) 16%, transparent);
    color: var(--md-blue);
}

@media (max-width: 720px) {
    .map-layer-stack {
        width: min(300px, calc(100vw - 24px));
        max-height: min(340px, 42dvh);
    }

    .map-layer-row {
        min-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-layer-row,
    .map-layer-row__action,
    .map-layer-stack__add {
        transition: none;
    }

    .map-layer-stack__add:hover:not(:disabled),
    .map-layer-stack__add:focus-visible:not(:disabled) {
        transform: none;
    }
}

/* ── Layers card: tighter, content-sized ──────────────────────────────
   The card now wraps a plain list (adding a layer lives in the toolbar),
   sizes itself to the widest row and keeps every row on a single line. */

.map-layer-stack {
    width: max-content;
    max-width: min(264px, calc(100vw - 24px));
    gap: 1px;
    padding: 3px;
    overflow-y: auto;
    overflow-x: hidden;
}

.map-layer-row {
    min-height: 34px;
    padding: 1px 1px 1px 3px;
    border-radius: var(--md-radius-sm);
}

.map-layer-row__main {
    gap: 7px;
    padding: 2px;
}

.map-layer-row__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--md-radius-sm);
}

.map-layer-row__name {
    flex: 0 1 auto;
    min-width: 0;
}

.map-layer-row__meta {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--md-radius-pill);
    background: color-mix(in srgb, var(--map-fg) 7%, transparent);
    font-size: 0.625rem;
    line-height: 1.4;
    color: var(--map-glass-muted);
}

.map-layer-row__action {
    width: 26px;
    height: 26px;
    border-radius: var(--md-radius-sm);
}

@media (max-width: 720px) {
    .map-layer-stack {
        max-width: min(280px, calc(100vw - 24px));
        max-height: min(320px, 42dvh);
    }

    .map-layer-row {
        min-height: 36px;
    }
}

/* ── Chrome scale: compact but comfortable, responsive ────────────────
   The controls scale with the viewport (bigger on touch-sized screens),
   every plaque keeps a quiet 10–14px radius, and the timeline stays low. */

.map-page,
.map-overlay {
    --map-glass-control: 30px;
    --map-toolbar-height: calc(var(--map-glass-control) + 4px);
    --map-chrome-radius: 10px;
    --map-panel-radius: 12px;
    --map-plaque-radius: 12px;
    --map-timeline-bar-height: 60px;
}

@media (max-width: 960px) {
    .map-page,
    .map-overlay {
        --map-glass-control: 32px;
        --map-chrome-radius: 12px;
        --map-panel-radius: 14px;
        --map-plaque-radius: 14px;
        --map-timeline-bar-height: 60px;
    }
}

/* Phones: fluid control size so the command bar always fits one row. */
@media (max-width: 600px) {
    .map-page,
    .map-overlay {
        --map-glass-control: clamp(28px, 8.4vw, 34px);
        --map-timeline-bar-height: clamp(54px, 14vw, 64px);
    }

    .map-bottom-dock__pill.map-glass {
        padding: 0 3px;
    }

    .map-bottom-dock__pill + .map-bottom-dock__pill {
        margin-left: 3px;
        padding-left: 6px;
    }
}

.map-overlay .map-glass {
    border-radius: var(--map-plaque-radius);
}

.map-overlay .map-legend__pill {
    border-radius: var(--map-plaque-radius);
}

.map-glass__group {
    gap: 2px;
    padding: 2px;
}

.map-glass__separator {
    height: calc(var(--map-toolbar-control) - 10px);
    margin: 0 2px;
}

.map-glass__btn.mud-icon-button .mud-icon-root,
.map-glass__text-btn .mud-icon-root,
.map-layer-row .mud-icon-root,
.map-timeline-bar .mud-icon-root,
.map-bottom-dock .mud-icon-root,
.map-viewport-info .mud-icon-root {
    width: calc(var(--map-toolbar-control) * 0.58);
    height: calc(var(--map-toolbar-control) * 0.58);
    font-size: calc(var(--map-toolbar-control) * 0.58);
}

.map-left-toolbar__logo,
.map-left-toolbar__logo-spin {
    width: calc(var(--map-toolbar-control) * 0.6);
    height: calc(var(--map-toolbar-control) * 0.6);
}

/* Bottom command bar: 1px shell padding + 1px border + control = toolbar height. */
.map-bottom-dock__pills {
    padding: 1px;
    border-radius: var(--map-plaque-radius);
}

.map-bottom-dock__pill.map-glass {
    padding: 0 4px;
    border-radius: var(--map-plaque-radius);
}

.map-bottom-dock__pill + .map-bottom-dock__pill {
    margin-left: 5px;
    padding-left: 10px;
}

/* Layers list rows scale with the control size. */
.map-layer-stack {
    max-width: min(280px, calc(100vw - 24px));
    gap: 2px;
    padding: 3px;
}

.map-layer-row {
    min-height: calc(var(--map-glass-control) + 2px);
    padding: 0 2px 0 4px;
    border-radius: var(--md-radius-sm);
}

.map-layer-row__main {
    gap: 8px;
    padding: 2px;
}

.map-layer-row__icon {
    width: calc(var(--map-glass-control) - 6px);
    height: calc(var(--map-glass-control) - 6px);
    border-radius: var(--md-radius-tag);
}

.map-layer-row__name {
    font-size: 0.8125rem;
}

.map-layer-row__meta {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.6875rem;
}

.map-layer-row__action {
    width: calc(var(--map-glass-control) - 2px);
    height: calc(var(--map-glass-control) - 2px);
    border-radius: var(--md-radius-tag);
}

/* Timeline: low bar, internals scale with it. */
.map-timeline-bar {
    height: var(--map-timeline-bar-height);
    gap: 6px;
}

.map-timeline-bar__day-name {
    font-size: 0.75rem;
}

.map-timeline-bar__day-date {
    font-size: 0.625rem;
}

/* Empty-state cue: compact card, not a slab. */
.map-empty-cue {
    max-width: min(230px, calc(100vw - 40px));
    gap: 4px;
    padding: 9px 11px;
}

.map-empty-cue__title {
    font-size: 0.875rem;
}

.map-empty-cue__hint {
    font-size: 0.75rem;
    line-height: 1.35;
}

/* Compare / measure banner: compact so it does not dominate the top. */
.map-compare-banner {
    gap: 6px;
    padding: 8px 10px;
}

.map-compare-banner__top {
    gap: 4px;
}

.map-compare-banner__title {
    font-size: 11px;
}

.map-compare-banner__side {
    padding: 3px 7px;
    font-size: 12px;
}

.map-compare-banner__exit {
    min-height: 26px;
    padding: 0 12px;
    font-size: 0.75rem;
}

.map-measure-banner__mode {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.75rem;
}

.map-measure-banner__hint {
    font-size: 11px;
}

@media (max-width: 720px) {
    .map-layer-stack {
        max-height: min(320px, 42dvh);
    }
}

.map-projection-switcher__sep {
    height: 1px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.12);
}

.map-projection-switcher__choose {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: var(--md-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--md-dur-fast) ease, border-color var(--md-dur-fast) ease;
}

.map-projection-switcher__choose:hover {
    background: rgba(0, 0, 0, 0.05);
}

.map-projection-switcher__choose--open {
    border-color: color-mix(in srgb, var(--md-blue) 60%, transparent);
}

.map-projection-switcher__choose:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.map-projection-switcher__choose-label {
    flex: 1 1 auto;
    font-size: .85rem;
}

.map-projection-switcher__betta {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: var(--md-radius-pill);
    background: color-mix(in srgb, var(--md-warning, #c4862e) 16%, transparent);
    color: color-mix(in srgb, var(--md-warning, #c4862e) 75%, var(--md-ink));
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.6;
}

.map-projection-switcher__search {
    margin-top: 8px;
}

.map-projection-switcher__list {
    max-height: 320px;
    margin-top: 4px;
    overflow-y: auto;
}

.map-projection-switcher__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--md-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.map-projection-switcher__item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.map-projection-switcher__item--active {
    background: color-mix(in srgb, var(--md-blue) 12%, transparent);
}

.map-projection-switcher__item-name {
    flex: 1 1 auto;
    font-size: .82rem;
}

.map-projection-switcher__item-code {
    font-size: .72rem;
    opacity: .6;
    white-space: nowrap;
}

.map-projection-switcher__empty {
    margin: 6px 0;
    font-size: .8rem;
    text-align: center;
    opacity: .6;
}

/* ── Basemap / projection fallback for narrow phones ─────────────────
   On a narrow phone the left and right toolbars would meet edge-to-edge,
   so the two pickers step into the dock's "more" menu instead. */
.map-dock-menu__switchers {
    display: none;
    align-items: center;
    gap: var(--map-space-1);
    padding: 2px 4px 6px;
}

@media (max-width: 480px) {
    .map-toolbar .map-basemap-switcher,
    .map-toolbar .map-projection-switcher {
        display: none;
    }

    .map-dock-menu__switchers {
        display: flex;
    }
}

/* ── Collapsible legend on phones ─────────────────────────────────────
   The legend, timeline and dock together fill the bottom of a phone, so
   the legend starts folded into a single pill and expands on demand. */
.map-legend__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--map-toolbar-control);
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--map-glass-fg);
}

.map-legend__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.map-legend__toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.map-legend__toggle-input:focus-visible + .map-legend__toggle-label {
    outline: 2px solid color-mix(in srgb, var(--md-blue) 70%, transparent);
    outline-offset: 2px;
    border-radius: var(--map-plaque-radius);
}

.map-legend__toggle-chevron {
    transition: transform var(--map-dur-fast) var(--map-ease);
}

@media (max-width: 720px) {
    .map-legend__toggle {
        display: inline-flex;
    }

    .map-legend:not(:has(.map-legend__toggle-input:checked)) .map-legend__scales {
        display: none;
    }

    .map-legend__toggle-input:checked + .map-legend__toggle-label .map-legend__toggle-chevron {
        transform: rotate(180deg);
    }
}

/* ── Touch targets ────────────────────────────────────────────────────
   Declared last on purpose. The fluid phone scaling above shrinks the
   controls below the touch minimum, and equal specificity means the later
   rule wins; a coarse pointer gets the enlarged controls back. */
@media (pointer: coarse) {
    .map-page,
    .map-overlay {
        --map-glass-control: 36px;
        --map-toolbar-height: calc(var(--map-glass-control) + var(--map-space-2));
        --map-timeline-dock-gutter: 360px;
    }
}

@media (pointer: coarse) and (max-width: 960px) {
    .map-page,
    .map-overlay {
        --map-glass-control: 40px;
        --map-toolbar-height: calc(var(--map-glass-control) + var(--map-space-2));
        --map-timeline-dock-gutter: 12px;
    }
}

/* ── Phone / tablet composition ───────────────────────────────────────
   On narrow viewports the weather chip and the layer list fought for the
   same row. The weather chip now sits on the second row at the left edge
   (mirroring the assistant launcher on the right) and the layer list drops
   into its own full-width row underneath. */

.map-dock-menu__export-item {
    display: none;
}

.mud-list-item.map-dock-menu__export-item {
    display: none;
}

@media (max-width: 900px) {
    .map-left-panel {
        width: calc(100% - var(--map-chrome-inset) * 2);
        max-width: none;
    }

    .map-layer-stack {
        width: 100%;
        max-width: min(420px, 100%);
        margin-top: calc(var(--map-toolbar-height) + var(--map-space-2));
    }
}

@media (max-width: 720px) {
    /* Phones read as one dense command surface: smaller controls, tighter
       insets and shorter rows instead of the chunky tablet-scale chrome. */
    .map-page,
    .map-overlay {
        --map-glass-control: 30px;
        --map-toolbar-height: 38px;
        --map-chrome-inset: 8px;
        --map-space-2: 6px;
        --map-space-3: 8px;
        --map-space-4: 10px;
    }

    .map-glass__group {
        gap: 1px;
        padding: 2px;
    }

    /* Label is hidden here, so every top-bar action becomes the same square
       and the glyphs cannot drift apart. */
    .map-left-toolbar .map-glass__text-btn {
        width: var(--map-toolbar-control);
        min-width: var(--map-toolbar-control);
        padding: 0;
    }

    /* The assistant launcher is a hand-rolled SVG; match the toolbar glyphs. */
    .map-page .assistant-root--map .assistant-mark svg {
        width: calc(var(--map-toolbar-height, 38px) * 0.46);
        height: calc(var(--map-toolbar-height, 38px) * 0.46);
    }

    /* Export moves into the "more" menu so the command bar stays one row. */
    .map-bottom-dock__export {
        display: none;
    }

    .mud-list-item.map-dock-menu__export-item {
        display: flex;
    }

    .map-layer-row {
        min-height: calc(var(--map-glass-control) - 2px);
        padding: 0 2px 0 3px;
    }

    .map-layer-row__name {
        font-size: 0.75rem;
    }

    .map-layer-row__meta {
        font-size: 0.625rem;
        margin-left: 5px;
        padding: 1px 5px;
    }
}

@media (max-width: 360px) {
    .map-page,
    .map-overlay {
        --map-glass-control: 28px;
        --map-toolbar-height: 36px;
        --map-dock-rows: 1;
    }
}