/* Soft Icon Tiles — suite-wide floating map chrome (Version 1.0)
   Scope: overlays ON the map only. Side menus / inspectors are out of scope.
   Search: collapsed icon tile on the LEFT until expanded. */

:root {
    --luma-tile-min: 52px;
    --luma-tile-radius: var(--luma-radius-md, 12px);
    --luma-tile-bg: rgba(21, 29, 40, 0.92);
    --luma-tile-border: #3d516d;
    /* Tile greys stay on the current hexes until the Chrome Lab A/B is accepted (Phase 12). */
    --luma-tile-fg: #9ca3af;
    --luma-tile-fg-on: #7dd3fc;
    --luma-tile-on-bg: rgba(0, 163, 224, 0.28);
    --luma-tile-on-border: #00a3e0;
    --luma-tile-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    --luma-tile-blur: blur(8px);
    --luma-tile-ease: var(--luma-ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

/* ——— Soft tile control ——— */
.luma-tile {
    box-sizing: border-box;
    min-width: var(--luma-tile-min);
    min-height: var(--luma-tile-min);
    padding: 6px 8px; /* token-oneoff: HUD geometry */
    border-radius: var(--luma-tile-radius);
    border: 1px solid var(--luma-tile-border);
    background: var(--luma-tile-bg);
    color: var(--luma-tile-fg);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px; /* token-oneoff: HUD geometry */
    cursor: pointer;
    box-shadow: var(--luma-tile-shadow);
    backdrop-filter: var(--luma-tile-blur);
    -webkit-backdrop-filter: var(--luma-tile-blur);
    flex-shrink: 0;
    font: inherit;
    line-height: 1.1; /* token-oneoff: compact HUD leading */
    transition:
        background-color 0.16s var(--luma-tile-ease),
        color 0.16s var(--luma-tile-ease),
        border-color 0.16s var(--luma-tile-ease),
        box-shadow 0.16s var(--luma-tile-ease),
        transform 0.15s var(--luma-tile-ease);
}
.luma-tile-icon,
.luma-tile > .hud-icon,
.luma-tile > svg,
.luma-tile > i {
    width: 18px;
    height: 18px;
    font-size: 15px; /* token-oneoff: off-scale HUD icon */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.luma-tile > svg.hud-icon {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
}
.luma-tile-label,
.luma-tile > em,
.luma-tile .map-view-label {
    font-style: normal;
    font-size: 9px; /* token-oneoff: off-scale HUD caption */
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1; /* token-oneoff: compact HUD leading */
    white-space: nowrap;
}
.luma-tile.is-on,
.luma-tile.active,
.luma-tile[aria-pressed="true"],
.luma-tile[aria-expanded="true"] {
    color: var(--luma-text-heading);
    background: var(--luma-tile-on-bg);
    border-color: var(--luma-tile-on-border);
}
.luma-tile.has-result {
    color: var(--luma-text-heading) !important;
    background: rgba(249, 115, 22, 0.9) !important; /* token-oneoff: search-hit tint */
    border-color: #fb923c !important; /* token-oneoff: search-hit tint */
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4); /* token-oneoff: search-hit glow */
}
.luma-tile:active {
    transform: scale(0.97);
    color: var(--luma-text-heading);
    background: var(--luma-surface-input);
}
.luma-tile:focus-visible {
    outline: 2px solid var(--luma-color-accent-2, #5ce1ff);
    outline-offset: 2px;
}
@media (hover: hover) {
    .luma-tile:hover {
        color: var(--luma-text-heading);
        background: var(--luma-surface-input);
    }
    .luma-tile.is-on:hover,
    .luma-tile.active:hover,
    .luma-tile[aria-pressed="true"]:hover {
        background: rgba(0, 163, 224, 0.38); /* token-oneoff: accent tint */
        color: var(--luma-text-heading);
    }
}

/* Plan / 3D (or similar) segmented control matching soft tiles */
.luma-tile-seg {
    display: inline-flex;
    align-items: stretch;
    min-height: var(--luma-tile-min);
    border-radius: var(--luma-tile-radius);
    overflow: hidden;
    border: 1px solid var(--luma-tile-border);
    background: var(--luma-tile-bg);
    box-shadow: var(--luma-tile-shadow);
    backdrop-filter: var(--luma-tile-blur);
    -webkit-backdrop-filter: var(--luma-tile-blur);
    flex-shrink: 0;
}
.luma-tile-seg button,
.luma-tile-seg .luma-tile-seg-btn {
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--luma-tile-fg);
    font-size: var(--luma-font-sm);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 14px; /* token-oneoff: off-scale spacing */
    min-width: 52px;
    min-height: var(--luma-tile-min);
    cursor: pointer;
    transition: background 0.15s var(--luma-tile-ease), color 0.15s var(--luma-tile-ease);
}
.luma-tile-seg button + button,
.luma-tile-seg .luma-tile-seg-btn + .luma-tile-seg-btn {
    border-left: 1px solid var(--luma-tile-border);
}
.luma-tile-seg button.is-on,
.luma-tile-seg .luma-tile-seg-btn.is-on,
.luma-tile-seg button[aria-pressed="true"] {
    background: rgba(0, 163, 224, 0.22); /* token-oneoff: accent tint */
    color: var(--luma-tile-fg-on);
}
.luma-tile-seg button:active {
    background: rgba(0, 163, 224, 0.32); /* token-oneoff: accent tint */
    color: var(--luma-text-heading);
}
.luma-tile-seg button:focus-visible {
    outline: 2px solid var(--luma-color-accent-2, #5ce1ff);
    outline-offset: -2px;
    z-index: 1;
}
.luma-tile-seg button.is-loading,
.luma-tile-seg button:disabled {
    opacity: 0.55;
    cursor: wait;
}
@media (hover: hover) {
    .luma-tile-seg button:hover {
        color: var(--luma-text-heading);
        background: rgba(31, 42, 56, 0.9); /* token-oneoff: glass hover */
    }
}

/* ——— Expandable map search (always starts LEFT) ——— */
.luma-map-search {
    position: relative;
    z-index: var(--luma-z-overlay);
    flex-shrink: 0;
}
.luma-map-search-toggle.luma-tile {
    /* collapsed: icon-only tile until expanded */
}
.luma-map-search.is-expanded .luma-map-search-toggle {
    display: none;
}
.luma-map-search-panel {
    display: none;
    align-items: center;
    gap: var(--luma-space-2);
    min-height: var(--luma-tile-min);
    width: min(280px, calc(100vw - 30px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    padding: 6px 10px 6px 12px; /* token-oneoff: off-scale spacing */
    border-radius: var(--luma-tile-radius);
    border: 1px solid var(--luma-tile-border);
    background: var(--luma-tile-bg);
    box-shadow: var(--luma-tile-shadow);
    backdrop-filter: var(--luma-tile-blur);
    -webkit-backdrop-filter: var(--luma-tile-blur);
    box-sizing: border-box;
}
.luma-map-search.is-expanded .luma-map-search-panel {
    display: flex;
}
.luma-map-search-panel > i,
.luma-map-search-panel > svg,
.luma-map-search-panel > .luma-map-search-glyph {
    color: var(--luma-tile-fg);
    font-size: 14px; /* token-oneoff: off-scale HUD glyph */
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
}
.luma-map-search-panel input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--luma-text-heading);
    font-size: var(--luma-font-lg);
    font-family: inherit;
    min-height: 36px;
}
.luma-map-search-panel input::placeholder {
    color: var(--luma-tile-fg);
}
.luma-map-search-panel input:focus-visible {
    outline: none;
}
.luma-map-search-clear,
.luma-map-search-collapse {
    background: none;
    border: none;
    color: var(--luma-tile-fg);
    cursor: pointer;
    min-width: var(--luma-touch-min, 44px);
    min-height: var(--luma-touch-min, 44px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--luma-radius-sm);
    flex-shrink: 0;
}
.luma-map-search-clear:active,
.luma-map-search-collapse:active {
    color: var(--luma-text-heading);
    background: rgba(255, 255, 255, 0.06); /* token-oneoff: press wash */
}
.luma-map-search-clear:focus-visible,
.luma-map-search-collapse:focus-visible {
    outline: 2px solid var(--luma-color-accent, #00a3e0);
    outline-offset: 2px;
}
@media (hover: hover) {
    .luma-map-search-clear:hover,
    .luma-map-search-collapse:hover {
        color: var(--luma-text-heading);
        background: rgba(255, 255, 255, 0.04); /* token-oneoff: hover wash */
    }
}
.luma-map-search-results {
    margin-top: 6px; /* token-oneoff: off-scale spacing */
    background: var(--luma-surface-card);
    border: 1px solid var(--luma-border-strong);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* token-oneoff: off-scale shadow */
    display: none;
    max-height: 240px;
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1300; /* token-oneoff: search results above overlay */
}
.luma-map-search-results.visible,
.luma-map-search-results.is-open {
    display: block;
}
.luma-map-search-results .map-search-result,
.luma-map-search-results .luma-map-search-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px; /* token-oneoff: off-scale spacing */
    min-height: 44px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--luma-border-soft);
    color: #e5e7eb; /* token-oneoff: public HUD grey held for Chrome Lab gate */
    font-size: var(--luma-font-md);
    line-height: 1.4; /* token-oneoff: HUD result leading */
    cursor: pointer;
    font-family: inherit;
}
.luma-map-search-results .map-search-result:last-child,
.luma-map-search-results .luma-map-search-result:last-child {
    border-bottom: none;
}
.luma-map-search-results .map-search-result:active,
.luma-map-search-results .luma-map-search-result:active {
    background: var(--luma-surface-input);
    color: var(--luma-text-heading);
}
.luma-map-search-results .map-search-result:focus-visible,
.luma-map-search-results .luma-map-search-result:focus-visible {
    outline: 2px solid var(--luma-color-accent);
    outline-offset: -2px;
}
@media (hover: hover) {
    .luma-map-search-results .map-search-result:hover,
    .luma-map-search-results .luma-map-search-result:hover {
        background: var(--luma-surface-input);
        color: var(--luma-text-heading);
    }
}
.luma-map-search-empty {
    padding: 10px 12px; /* token-oneoff: off-scale spacing */
    color: var(--luma-tile-fg);
    font-size: var(--luma-font-md);
}

/* Soft-tile north compass — rose rotates with camera bearing; click resets north.
 * Plan is always north-up; also hidden during pano fly/session (JS `.is-visible`).
 * Opacity/transform (not display) so Plan↔3D and pano suppress can animate. */
.luma-compass-tile {
    display: inline-flex;
    opacity: 0;
    transform: scale(0.88) translateY(-6px);
    max-width: 0;
    min-width: 0 !important;
    min-height: 0 !important;
    padding-left: 0 !important; /* token-oneoff: reset */
    padding-right: 0 !important; /* token-oneoff: reset */
    margin: 0 !important; /* token-oneoff: reset */
    border-width: 0 !important;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 0.22s var(--luma-tile-ease, ease),
        transform 0.22s var(--luma-tile-ease, ease),
        max-width 0.26s var(--luma-tile-ease, ease),
        min-width 0.26s var(--luma-tile-ease, ease),
        min-height 0.26s var(--luma-tile-ease, ease),
        padding 0.26s var(--luma-tile-ease, ease),
        border-width 0.26s var(--luma-tile-ease, ease),
        visibility 0.22s;
}
.luma-compass-tile.is-visible {
    opacity: 1;
    transform: none;
    max-width: 4.5rem;
    min-width: var(--luma-tile-min, 52px) !important;
    min-height: var(--luma-tile-min, 52px) !important;
    padding: 6px 8px !important; /* token-oneoff: HUD geometry */
    border-width: 1px !important;
    pointer-events: auto;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
    .luma-compass-tile {
        transition: none;
    }
}
.luma-compass-tile .luma-compass-rose {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor; /* token-oneoff: hairline rose ring */
    flex-shrink: 0;
    display: block;
    box-sizing: border-box;
    transition: transform 0.12s linear; /* token-oneoff: linear bearing tracking */
}
.luma-compass-tile .luma-compass-n {
    position: absolute;
    left: 50%;
    top: 1px;
    transform: translateX(-50%);
    font-size: 8px; /* token-oneoff: off-scale compass glyph */
    font-weight: var(--luma-weight-bold);
    line-height: 1;
    letter-spacing: 0;
    color: #f87171; /* token-oneoff: compass north red */
}
.luma-compass-tile .luma-compass-needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 10px;
    margin: -7px 0 0 -1px; /* token-oneoff: negative inset */
    border-radius: 1px; /* token-oneoff: off-scale radius */
    background: linear-gradient(to bottom, #f87171 0 50%, #e5e7eb 50% 100%); /* token-oneoff: needle gradient */
    pointer-events: none;
}
.luma-compass-tile.is-rotated {
    color: var(--luma-tile-fg-on, #7dd3fc);
}

/* Toolbar rows that host soft tiles */
.luma-map-hud-left,
.luma-map-hud-right {
    position: absolute;
    top: max(15px, env(safe-area-inset-top, 0px));
    z-index: var(--luma-z-toolbar);
    display: flex;
    gap: var(--luma-space-2);
    align-items: stretch;
    flex-wrap: wrap;
    max-width: calc(100% - 24px);
    pointer-events: none;
}
.luma-map-hud-left > *,
.luma-map-hud-right > * {
    pointer-events: auto;
}
.luma-map-hud-left {
    left: max(15px, env(safe-area-inset-left, 0px));
}
.luma-map-hud-right {
    right: max(15px, env(safe-area-inset-right, 0px));
    justify-content: flex-end;
}

/* Editor: soft-tile toolbar cluster on the map (not side panels) */
.luma-map-toolbar {
    position: absolute;
    top: max(15px, env(safe-area-inset-top, 0px));
    right: max(15px, env(safe-area-inset-right, 0px));
    z-index: var(--luma-z-toolbar);
    display: flex;
    align-items: stretch;
    gap: var(--luma-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(420px, calc(100% - 30px));
    pointer-events: none;
}
.luma-map-toolbar > * {
    pointer-events: auto;
}
.luma-map-toolbar .luma-tile-menu {
    position: relative;
}

/* Portrait rotate gate — map / tour / editor map surfaces */
.luma-rotate-gate {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20050; /* token-oneoff: rotate-gate above toast */
    background: rgba(7, 11, 18, 0.94); /* token-oneoff: gate scrim */
    color: #e5e7eb; /* token-oneoff: public HUD grey held for Chrome Lab gate */
    align-items: center;
    justify-content: center;
    padding: max(var(--luma-space-5), env(safe-area-inset-top)) max(var(--luma-space-5), env(safe-area-inset-right)) max(var(--luma-space-5), env(safe-area-inset-bottom)) max(var(--luma-space-5), env(safe-area-inset-left));
    text-align: center;
    box-sizing: border-box;
}
.luma-rotate-gate.is-visible {
    display: flex;
}
.luma-rotate-gate-inner {
    max-width: 22rem;
}
.luma-rotate-gate-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--luma-space-4);
    border-radius: 14px; /* token-oneoff: off-scale radius */
    border: 1px solid rgba(0, 163, 224, 0.45); /* token-oneoff: accent tint */
    background: rgba(0, 163, 224, 0.12); /* token-oneoff: accent wash */
    color: #7dd3fc; /* token-oneoff: sky glyph, not LUMA cyan */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px; /* token-oneoff: off-scale gate glyph */
}
.luma-rotate-gate h2 {
    margin: 0 0 var(--luma-space-2);
    font-size: 18px; /* token-oneoff: off-scale gate heading */
    font-weight: var(--luma-weight-bold);
    letter-spacing: -0.01em;
}
.luma-rotate-gate p {
    margin: 0;
    font-size: var(--luma-font-lg);
    color: var(--luma-text-muted);
    line-height: 1.5; /* token-oneoff: body leading */
}

html.luma-portrait-blocked,
html.luma-portrait-blocked body {
    overflow: hidden;
}

@media (max-width: 768px) {
    .luma-tile {
        min-width: 44px;
        min-height: 48px;
    }
    .luma-tile-seg,
    .luma-tile-seg button,
    .luma-tile-seg .luma-tile-seg-btn {
        min-height: 48px;
    }
    .luma-map-search-panel {
        min-height: 48px;
        width: min(260px, calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }
    .luma-map-search-clear,
    .luma-map-search-collapse {
        min-width: var(--luma-touch-min, 44px);
        min-height: var(--luma-touch-min, 44px);
    }
}

/* Phone landscape — short map band after tour header; keep ≥44px targets */
@media (max-height: 420px) and (orientation: landscape) {
    :root {
        --luma-tile-min: 44px;
    }
    .luma-tile {
        padding: 4px 6px; /* token-oneoff: off-scale spacing */
        gap: 2px; /* token-oneoff: hairline */
    }
    .luma-tile-label,
    .luma-tile > em,
    .luma-tile .map-view-label {
        font-size: 8px; /* token-oneoff: off-scale HUD caption */
        letter-spacing: 0.04em;
    }
    .luma-map-search-panel {
        min-height: 44px;
        width: min(240px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    }
}

@media (prefers-reduced-motion: reduce) {
    .luma-tile,
    .luma-tile-seg button,
    .luma-map-search-panel {
        transition: none !important; /* token-oneoff: motion */
    }
}

/* ——— Cluster markers (type icons around compact count) ——— */
.luma-cluster-marker {
    position: relative;
    width: 56px;
    height: 56px;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    --luma-cluster-ring: 24px;
    --luma-cluster-anim: 780ms cubic-bezier(0.22, 0.82, 0.28, 1);
    --luma-cluster-stagger: 70ms;
}
.luma-cluster-marker__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px; /* token-oneoff: negative inset */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--luma-weight-bold);
    font-size: var(--luma-font-sm);
    line-height: 1;
    color: var(--luma-text-heading);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); /* token-oneoff: marker shadow */
    z-index: 1;
    pointer-events: none;
    transform: scale(0.85);
    opacity: 0.75;
    transition:
        transform var(--luma-cluster-anim),
        opacity var(--luma-cluster-anim);
}
.luma-cluster-marker.is-expanded .luma-cluster-marker__core {
    transform: scale(1);
    opacity: 1;
}
.luma-cluster-marker--public .luma-cluster-marker__core {
    background: var(--luma-tile-bg);
    border: 2px solid var(--luma-color-accent);
}
.luma-cluster-marker--admin .luma-cluster-marker__core {
    background: rgba(0, 163, 224, 0.9); /* token-oneoff: accent tint */
    border: 2px solid #fff; /* token-oneoff: marker ring */
}
.luma-cluster-marker__type {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px; /* token-oneoff: negative inset */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px; /* token-oneoff: off-scale marker glyph */
    color: var(--luma-text-heading);
    background: transparent;
    border: none;
    box-shadow: none;
    /* Gathered at hub (visible) until .is-expanded fans them out on the ring */
    transform: rotate(calc((360deg * var(--i) / var(--n)) - 90deg))
        translate(0)
        rotate(calc(90deg - (360deg * var(--i) / var(--n))))
        scale(0.7);
    opacity: 1;
    pointer-events: none;
    z-index: 2; /* token-oneoff: local stacking */
    transition:
        transform var(--luma-cluster-anim),
        opacity 280ms ease;
    transition-delay: calc(var(--i) * var(--luma-cluster-stagger));
}
.luma-cluster-marker.is-expanded .luma-cluster-marker__type {
    transform: rotate(calc((360deg * var(--i) / var(--n)) - 90deg))
        translate(var(--luma-cluster-ring))
        rotate(calc(90deg - (360deg * var(--i) / var(--n))))
        scale(1);
    opacity: 1;
}
.luma-cluster-marker.is-collapsing .luma-cluster-marker__type {
    transition-delay: calc((var(--n) - var(--i) - 1) * var(--luma-cluster-stagger));
}
.luma-cluster-marker__type svg {
    display: block;
    width: 18px;
    height: 18px;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.luma-cluster-marker__type--panorama {
    color: #00a3e0; /* token-oneoff: pin type palette */
}
.luma-cluster-marker__type--comment {
    color: #ed1c24; /* token-oneoff: pin type palette */
}
.luma-cluster-marker__type--image {
    color: #38bdf8; /* token-oneoff: pin type palette */
}
.luma-cluster-marker__type--video {
    color: #f59e0b; /* token-oneoff: pin type palette */
}
.luma-cluster-marker__type--information {
    color: #93c5fd; /* token-oneoff: pin type palette */
}
@media (prefers-reduced-motion: reduce) {
    .luma-cluster-marker,
    .luma-cluster-marker__core,
    .luma-cluster-marker__type {
        transition: none !important; /* token-oneoff: motion */
        transition-delay: 0ms !important;
    }
    .luma-cluster-marker__core {
        transform: scale(1);
        opacity: 1;
    }
    .luma-cluster-marker__type {
        transform: rotate(calc((360deg * var(--i) / var(--n)) - 90deg))
            translate(var(--luma-cluster-ring))
            rotate(calc(90deg - (360deg * var(--i) / var(--n))))
            scale(1);
        opacity: 1;
    }
}

/* Public Site 3D: idle-fade Search + Site/Plan/North (Vista hide-on-enter). */
#mapStage .hud-left-container,
#mapStage .hud-right-nav {
    transition: opacity 0.45s ease; /* token-oneoff: browser ease held on public HUD */
}
body.hud-idle-faded #mapStage .hud-left-container,
body.hud-idle-faded #mapStage .hud-right-nav {
    opacity: 0.35;
}
body[data-toolbar-mode] #mapStage .hud-left-container,
body[data-toolbar-mode] #mapStage .hud-right-nav,
body.live-tour-following #mapStage .hud-left-container,
body.live-tour-following #mapStage .hud-right-nav,
body:has(#mapAddressSearch.is-expanded) #mapStage .hud-left-container,
body:has(#mapAddressSearch.is-expanded) #mapStage .hud-right-nav {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    #mapStage .hud-left-container,
    #mapStage .hud-right-nav {
        transition: none;
    }
    body.hud-idle-faded #mapStage .hud-left-container,
    body.hud-idle-faded #mapStage .hud-right-nav {
        opacity: 1;
    }
}