/* Map discovery, feedback and motion layer (map_ux.js).
   Loaded after the other map stylesheets so it can refine them. */

body.page-map {
    --mx-surface: rgba(255, 255, 255, 0.97);
    --mx-surface-solid: #ffffff;
    --mx-border: rgba(226, 232, 240, 0.95);
    --mx-text: #0f172a;
    --mx-muted: #64748b;
    --mx-soft: #f1f5f9;
    --mx-accent: #ea580c;
    --mx-accent-soft: #fff4ec;
    --mx-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
    --mx-shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.12);
    --mx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --mx-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] body.page-map {
    --mx-surface: rgba(17, 24, 39, 0.96);
    --mx-surface-solid: #111827;
    --mx-border: rgba(55, 65, 81, 0.9);
    --mx-text: #f8fafc;
    --mx-muted: #94a3b8;
    --mx-soft: #1f2937;
    --mx-accent-soft: rgba(234, 88, 12, 0.16);
    --mx-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --mx-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------------ */
/* Loading: a slim pill at the top instead of a centred banner.        */
/* ------------------------------------------------------------------ */
body.page-map #map-loading-text {
    align-items: flex-start !important;
    padding-top: calc(var(--map-safe-top, 96px) + 8px);
    transition: opacity 320ms var(--mx-ease);
}

body.page-map #map-loading-text > span {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mx-border);
    background: var(--mx-surface) !important;
    color: var(--mx-muted) !important;
    box-shadow: var(--mx-shadow-sm) !important;
    animation: none !important;
    letter-spacing: 0.14em;
}

body.page-map #map-loading-text > span::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mx-accent), transparent);
    transform: translateX(-100%);
    animation: mx-loading-sweep 1.2s var(--mx-ease) infinite;
}

body.page-map #map-loading-text.is-leaving {
    opacity: 0;
}

body.page-map #map-loading-text.map-loading-overlay--error {
    align-items: center !important;
    padding-top: 0;
}

.map-loading-retry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 14px;
    width: min(420px, calc(100vw - 32px));
    padding: 14px 44px 14px 16px;
    border: 1px solid var(--mx-border, #e2e8f0);
    border-radius: 18px;
    background: var(--mx-surface-solid, #fff);
    color: var(--mx-text, #0f172a);
    box-shadow: var(--mx-shadow, 0 18px 48px rgba(15, 23, 42, 0.16));
    pointer-events: auto;
    animation: mx-pop-in 360ms var(--mx-spring) both;
}

.map-loading-retry__text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.map-loading-retry__button {
    padding: 9px 16px;
    border: 0;
    border-radius: 12px;
    background: var(--mx-accent, #ea580c);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms var(--mx-ease), box-shadow 160ms var(--mx-ease);
}

.map-loading-retry__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.32);
}

.map-loading-retry__dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--mx-muted, #64748b);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.map-loading-retry__dismiss:hover {
    background: var(--mx-soft, #f1f5f9);
}

/* ------------------------------------------------------------------ */
/* Routes explorer.                                                   */
/* ------------------------------------------------------------------ */
.map-explorer {
    position: absolute;
    left: 16px;
    bottom: 18px;
    z-index: 57;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100vw - 32px);
    pointer-events: none;
    transition: opacity 260ms var(--mx-ease), transform 320ms var(--mx-ease);
}

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

.map-explorer__pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 14px 0 13px;
    border: 1px solid var(--mx-border);
    border-radius: 999px;
    background: var(--mx-surface);
    color: var(--mx-text);
    box-shadow: var(--mx-shadow-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.005em;
    cursor: pointer;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 200ms var(--mx-ease), box-shadow 200ms var(--mx-ease), background-color 200ms;
}

.map-explorer__pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--mx-shadow);
}

.map-explorer__pill:focus-visible,
.map-explorer__chip:focus-visible,
.map-explorer__route:focus-visible,
.map-explorer__close:focus-visible {
    outline: 3px solid rgba(234, 88, 12, 0.45);
    outline-offset: 2px;
}

.map-explorer__pill-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--mx-accent);
}

.map-explorer__pill-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--mx-accent);
    opacity: 0;
    animation: mx-ping 2.4s var(--mx-ease) infinite;
}

.map-explorer.is-empty .map-explorer__pill-dot {
    background: #94a3b8;
}

.map-explorer.is-empty .map-explorer__pill-dot::after {
    display: none;
}

.map-explorer.is-filtered .map-explorer__pill {
    border-color: rgba(234, 88, 12, 0.45);
}

.map-explorer__pill-chevron {
    width: 16px;
    height: 16px;
    color: var(--mx-muted);
    transition: transform 260ms var(--mx-ease);
}

.map-explorer.is-bumped .map-explorer__pill-label {
    animation: mx-count-bump 420ms var(--mx-ease);
}

.map-explorer__panel {
    display: none;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    max-height: min(62vh, 560px);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--mx-border);
    border-radius: 22px;
    background: var(--mx-surface);
    color: var(--mx-text);
    box-shadow: var(--mx-shadow);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transform-origin: bottom left;
}

.map-explorer[data-state="expanded"] {
    flex-direction: column-reverse;
}

.map-explorer[data-state="expanded"] .map-explorer__panel {
    display: flex;
    animation: mx-panel-in 340ms var(--mx-ease) both;
}

.map-explorer[data-state="expanded"] .map-explorer__pill {
    display: none;
}

.map-explorer__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px 8px 18px;
}

.map-explorer__handle {
    display: none;
}

.map-explorer__title {
    flex: 1;
    min-width: 0;
}

.map-explorer__title h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.map-explorer__count {
    margin: 2px 0 0;
    color: var(--mx-muted);
    font-size: 12px;
    font-weight: 600;
}

.map-explorer__close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: var(--mx-soft);
    color: var(--mx-muted);
    cursor: pointer;
    transition: background-color 160ms, color 160ms;
}

.map-explorer__close:hover {
    background: var(--mx-accent-soft);
    color: var(--mx-accent);
}

.map-explorer__close svg {
    width: 18px;
    height: 18px;
}

.map-explorer__chips {
    display: flex;
    gap: 6px;
    padding: 4px 18px;
    overflow-x: auto;
    scrollbar-width: none;
}

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

.map-explorer__chips--distance {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mx-border);
}

.map-explorer__chip {
    --chip-color: var(--mx-accent);
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid var(--mx-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mx-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 180ms, border-color 180ms, color 180ms, transform 180ms var(--mx-spring);
}

.map-explorer__chip:hover {
    border-color: var(--chip-color);
}

.map-explorer__chip:active {
    transform: scale(0.95);
}

.map-explorer__chip[aria-pressed="true"] {
    border-color: var(--chip-color);
    background: var(--chip-color);
    color: #fff;
}

.map-explorer__chips--distance .map-explorer__chip[aria-pressed="true"] {
    border-color: var(--mx-text);
    background: var(--mx-text);
    color: var(--mx-surface-solid);
}

.map-explorer__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.map-explorer__route {
    --route-color: var(--mx-accent);
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px 8px 8px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    animation: mx-item-in 380ms var(--mx-ease) both;
    animation-delay: calc(var(--item-index, 0) * 28ms);
    transition: background-color 160ms;
}

.map-explorer__route::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--route-color);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 180ms, transform 220ms var(--mx-ease);
}

.map-explorer__route:hover,
.map-explorer__route:focus-visible {
    background: var(--mx-soft);
}

.map-explorer__route:hover::before,
.map-explorer__route:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
}

.map-explorer__route-media {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--route-color) 22%, #fff), color-mix(in srgb, var(--route-color) 55%, #fff));
}

.map-explorer__route-media.is-empty::after {
    content: "";
    position: absolute;
    inset: 18px;
    background: url("../../img/icons/route.svg") center / contain no-repeat;
    opacity: 0.55;
}

.map-explorer__route-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms var(--mx-ease);
}

.map-explorer__route:hover .map-explorer__route-media img {
    transform: scale(1.07);
}

.map-explorer__route-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.map-explorer__route-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.map-explorer__route-meta {
    color: var(--mx-muted);
    font-size: 12px;
    font-weight: 600;
}

.map-explorer__route-meta::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--route-color);
    vertical-align: 0;
}

.map-explorer__difficulty {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.map-explorer__difficulty.is-easy { background: #e6f6ec; color: #1b7a43; }
.map-explorer__difficulty.is-medium { background: #fff3d6; color: #9a5b00; }
.map-explorer__difficulty.is-hard { background: #fde4e4; color: #b42318; }

html[data-theme="dark"] .map-explorer__difficulty.is-easy { background: rgba(34, 197, 94, 0.18); color: #86efac; }
html[data-theme="dark"] .map-explorer__difficulty.is-medium { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
html[data-theme="dark"] .map-explorer__difficulty.is-hard { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

.map-explorer__empty {
    padding: 22px 14px;
    color: var(--mx-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.map-explorer__empty p {
    margin: 0 0 12px;
}

.map-explorer__empty button {
    padding: 8px 14px;
    border: 1px solid var(--mx-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mx-text);
    font-weight: 700;
    cursor: pointer;
}

/* Out of the way whenever another left panel or mode owns the screen. */
body.map-route-open .map-explorer,
body.map-workspace-planner .map-explorer,
body.mobile-map-search-open .map-explorer,
body.ai-assistant-open .map-explorer,
body.page-map:has(#search-wrapper.is-expanded) .map-explorer,
body.page-map:has(#search-wrapper:focus-within) .map-explorer,
body.page-map:has(.map-feature-info-panel.is-open) .map-explorer,
body.page-map:has(#planner-modal:not(.hidden)) .map-explorer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
}

body.page-map:has(.map-explorer[data-state="expanded"]) .map-seo-intro {
    display: none;
}

/* Phone: a centred pill that opens a bottom sheet. */
@media (max-width: 767px) {
    .map-explorer {
        left: 50%;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
        align-items: center;
        transform: translateX(-50%);
    }

    body.map-route-open .map-explorer,
    body.map-workspace-planner .map-explorer,
    body.mobile-map-search-open .map-explorer,
    body.ai-assistant-open .map-explorer,
    body.page-map:has(.map-feature-info-panel.is-open) .map-explorer {
        transform: translate(-50%, 16px);
    }

    .map-explorer__pill {
        min-height: 42px;
        max-width: calc(100vw - 150px);
        font-size: 12.5px;
    }

    .map-explorer__pill-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .map-explorer[data-state="expanded"] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10050;
        pointer-events: auto;
        transform: none;
        max-width: none;
    }

    .map-explorer__panel {
        width: 100vw;
        max-height: 70dvh;
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 24px 24px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform-origin: bottom center;
    }

    .map-explorer[data-state="expanded"] .map-explorer__panel {
        animation: mx-sheet-in 380ms var(--mx-ease) both;
    }

    .map-explorer__head {
        position: relative;
        padding-top: 22px;
    }

    .map-explorer__handle {
        position: absolute;
        top: 8px;
        left: 50%;
        display: block;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: var(--mx-border);
        transform: translateX(-50%);
        cursor: pointer;
    }

    /* Backdrop lives inside the explorer's own stacking context, so it can
       never cover the sheet itself. */
    .map-explorer[data-state="expanded"]::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(15, 23, 42, 0.28);
        animation: mx-fade-in 240ms var(--mx-ease) both;
    }
}

/* ------------------------------------------------------------------ */
/* Route hover tooltip.                                               */
/* ------------------------------------------------------------------ */
.map-route-tooltip {
    --route-color: var(--mx-accent);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 70;
    display: flex;
    width: 260px;
    overflow: hidden;
    border: 1px solid var(--mx-border);
    border-radius: 16px;
    background: var(--mx-surface-solid);
    color: var(--mx-text);
    box-shadow: var(--mx-shadow);
    pointer-events: none;
    opacity: 0;
    transition: opacity 140ms var(--mx-ease);
    will-change: transform;
}

.map-route-tooltip.is-visible {
    opacity: 1;
}

.map-route-tooltip[hidden] {
    display: none;
}

.map-route-tooltip img {
    width: 76px;
    flex-shrink: 0;
    object-fit: cover;
}

.map-route-tooltip__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px 10px 12px;
    border-left: 3px solid var(--route-color);
}

.map-route-tooltip__body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.map-route-tooltip__body span {
    color: var(--mx-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Busy state for lazily loaded controls.                             */
/* ------------------------------------------------------------------ */
.is-busy {
    position: relative;
    cursor: progress !important;
}

.is-busy > svg,
#btn-mode-planner.is-busy > * {
    opacity: 0.35;
}

.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2.5px solid rgba(234, 88, 12, 0.25);
    border-top-color: var(--mx-accent, #ea580c);
    border-radius: 999px;
    animation: mx-spin 700ms linear infinite;
}

/* ------------------------------------------------------------------ */
/* Right tool column.                                                 */
/* ------------------------------------------------------------------ */
/* Compass only when the map is rotated or tilted. */
body.page-map #map-right-controls button[onclick*="resetMapNorth"] {
    transition: max-height 260ms var(--mx-ease), opacity 200ms, border-color 200ms;
    max-height: 64px;
    overflow: hidden;
}

body.page-map:not(.map-is-rotated) #map-right-controls button[onclick*="resetMapNorth"] {
    max-height: 0;
    opacity: 0;
    border-width: 0;
    pointer-events: none;
}

/* Phones zoom with gestures; the +/− pair only takes space there. */
@media (max-width: 767px) and (pointer: coarse) {
    body.page-map #map-right-controls button[onclick*="zoomMapIn"],
    body.page-map #map-right-controls button[onclick*="zoomMapOut"] {
        display: none !important;
    }
}

#map-right-controls .map-right-control,
#map-right-controls button {
    transition: background-color 160ms, color 160ms, transform 160ms var(--mx-spring);
}

#map-right-controls button:active {
    transform: scale(0.92);
}

/* The layers badge only matters when something beyond the defaults is on. */
#layers-active-count:not(.hidden) {
    animation: mx-pop-in 320ms var(--mx-spring) both;
}

/* The assistant button must not cover the planner toolbar. */
body.map-workspace-planner .trailtrack-ai__toggle > span:not(.trailtrack-ai__glyph) {
    display: none;
}

body.map-workspace-planner .trailtrack-ai__toggle {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ------------------------------------------------------------------ */
/* Top chips: caret for the hidden settings popover, livelier switch.  */
/* ------------------------------------------------------------------ */
#map-profile-chips .map-profile-chip {
    position: relative;
}

#map-profile-chips .map-profile-chip::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    opacity: 0.45;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 220ms var(--mx-ease), opacity 160ms;
}

#map-profile-chips .map-profile-chip[aria-expanded="true"]::after {
    opacity: 0.9;
    transform: translateY(1px) rotate(-135deg);
}

#map-profile-chips .map-profile-chip__switch span,
#map-profile-chips .map-profile-chip__switch span::before,
#map-profile-chips .map-profile-chip__switch span::after {
    transition-timing-function: var(--mx-spring) !important;
    transition-duration: 260ms !important;
}

.map-profile-chip-popover:not([hidden]) {
    animation: mx-pop-in 260ms var(--mx-ease) both;
    transform-origin: top left;
}

/* ------------------------------------------------------------------ */
/* Header on the map page between tablet and laptop widths: the centred */
/* section tabs slid under the map mode switch. There is no room for    */
/* both, and the mode switch is the map's own navigation, so the site   */
/* sections step aside exactly as they already do on phones.            */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1280px) {
    body.page-map .site-topbar .site-primary-tabs {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Search: full-height results with richer route rows.                */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
    body.page-map .map-page-wrapper #search-wrapper #search-suggestions {
        max-height: none !important;
    }
}

.map-search-result-item {
    animation: mx-item-in 280ms var(--mx-ease) both;
    animation-delay: calc(var(--result-index, 0) * 22ms);
}

.map-search-result-item__marker.is-route {
    background-color: var(--route-activity-color, var(--mx-accent, #ea580c)) !important;
}

.map-search-result-item__marker.has-cover {
    position: relative;
    width: 44px !important;
    height: 44px !important;
    overflow: hidden;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 2px var(--route-activity-color, transparent);
}

.map-search-result-item__marker.has-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.map-search-result-item:has(.map-search-result-item__marker.has-cover) {
    grid-template-columns: 44px minmax(0, 1fr) !important;
}

.map-search-result-item__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--mx-accent-soft, #fff4ec);
    color: var(--mx-accent, #ea580c);
    font-size: 9.5px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.04em;
    vertical-align: 2px;
}

.map-search-panel__history.is-examples .map-search-panel__history-item {
    border-style: dashed;
}

/* ------------------------------------------------------------------ */
/* Route card: key facts first, sections ease in.                      */
/* ------------------------------------------------------------------ */
#route-info-card .route-stats-top {
    margin: 4px 0 16px;
}

#route-info-card .route-stats-top:empty {
    display: none;
}

#route-info-card .route-stats-top .route-overview-shell {
    animation: mx-item-in 420ms var(--mx-ease) 80ms both;
}

#route-info-card .route-overview-value {
    font-variant-numeric: tabular-nums;
}

#route-info-card[style*="opacity: 1"] #route-tab-info > * {
    animation: mx-item-in 420ms var(--mx-ease) both;
}

#route-info-card[style*="opacity: 1"] #route-tab-info > *:nth-child(2) { animation-delay: 40ms; }
#route-info-card[style*="opacity: 1"] #route-tab-info > *:nth-child(3) { animation-delay: 80ms; }
#route-info-card[style*="opacity: 1"] #route-tab-info > *:nth-child(4) { animation-delay: 120ms; }
#route-info-card[style*="opacity: 1"] #route-tab-info > *:nth-child(5) { animation-delay: 160ms; }
#route-info-card[style*="opacity: 1"] #route-tab-info > *:nth-child(n+6) { animation-delay: 200ms; }

/* Feature (park, place) card slides in. */
.map-feature-info-panel.is-open {
    animation: mx-panel-in 340ms var(--mx-ease) both;
}

/* ------------------------------------------------------------------ */
/* Keyframes.                                                          */
/* ------------------------------------------------------------------ */
@keyframes mx-loading-sweep {
    to { transform: translateX(100%); }
}

@keyframes mx-ping {
    0% { opacity: 0.7; transform: scale(0.6); }
    80%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes mx-count-bump {
    0% { opacity: 0.2; transform: translateY(6px); }
    100% { opacity: 1; transform: none; }
}

@keyframes mx-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes mx-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes mx-item-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes mx-pop-in {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: none; }
}

@keyframes mx-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mx-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .map-explorer,
    .map-explorer *,
    .map-route-tooltip,
    .map-loading-retry,
    .map-search-result-item,
    #route-info-card #route-tab-info > *,
    #route-info-card .route-overview-shell,
    .map-feature-info-panel.is-open,
    .map-profile-chip-popover,
    body.page-map #map-loading-text > span::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Guests have no personal route library: the "Мои" chip is not rendered. */
#map-profile-chips .map-profile-chip-root.hidden {
    display: none !important;
}

/* The scrolling list is the only part of the explorer that may shrink. */
.map-explorer__head,
.map-explorer__chips {
    flex-shrink: 0;
}

.map-explorer__list {
    flex: 1 1 auto;
    min-height: 0;
}

.map-explorer__route {
    flex-shrink: 0;
}