.solia-tutorial-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99999;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    background: transparent; /* Dimming is handled by child box-shadow */
}
.tutorial-spotlight {
    position: fixed;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 99999px rgba(10, 10, 15, 0.7);
    pointer-events: none;
    transition: all 0.3s ease;
}

.solia-tutorial-overlay.active {
    opacity: 1;
    visibility: visible;
}

.tutorial-tooltip {
    position: fixed;
    z-index: 100000;
    background: var(--panel-bg, rgba(255, 255, 255, 0.65));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: var(--panel-shadow, 0 8px 32px 0 rgba(31, 38, 135, 0.2));
    color: var(--text-color, #ffffff);
    max-width: 18.75rem;
    pointer-events: auto; /* Allow clicking buttons inside tooltip */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
}

.tutorial-tooltip.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tutorial-tooltip h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--accent, #f27121);
    font-size: 1rem;
    font-weight: 700;
}

.tutorial-tooltip p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.tutorial-tooltip .tutorial-actions {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.tutorial-tooltip button {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.tutorial-tooltip button:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.tutorial-tooltip button.primary, .tutorial-modal-overlay button.start {
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    color: #ffffff !important;
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tutorial-tooltip button.primary:hover, .tutorial-modal-overlay button.start:hover {
    box-shadow: 0 0 20px color-mix(in srgb, var(--accent), transparent 40%) !important;
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* Modal styles for Step 1 */
.tutorial-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(10, 10, 15, 0.8);
    z-index: 100005; /* Renders above all panels, timers, and footers */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: auto; /* Block all background clicks */
}

.tutorial-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.tutorial-modal {
    background: var(--bg-deep, #1e1e1e);
    backdrop-filter: blur(20px);
    border: 1px solid var(--accent, #f27121);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 25rem;
    text-align: center;
    color: white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.tutorial-modal-overlay.active .tutorial-modal {
    transform: scale(1);
}

.tutorial-modal h2 {
    color: var(--accent, #f27121);
    margin-top: 0;
    margin-bottom: 1rem;
}

.tutorial-modal p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.tutorial-modal .modal-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.tutorial-modal button {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.875rem;
}

.tutorial-modal button.skip {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
}

.tutorial-modal button.skip:hover {
    background: rgba(255,255,255,0.1);
    color: white;
}

.tutorial-modal button.faint {
    opacity: 0.6;
    border-color: transparent;
}

.tutorial-modal button.start {
    background: var(--accent, #f27121);
    color: white;
}

.tutorial-modal button.start:hover {
    background: white;
    color: var(--accent, #f27121);
}

/* Desktop Tooltip Alignment Fix */
.tutorial-tooltip.desktop-center-bottom {
    position: fixed !important;
    left: 50% !important;
    top: 66vh !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 100000;
}

/* Legal Modals Checkbox Styling */
.tutorial-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: white;
    margin-bottom: 1.25rem;
}
.tutorial-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent, #f27121);
    cursor: pointer;
    margin: 0;
    width: 1rem;
    height: 1rem;
    display: block;
}

/* Carousel Selection Coloring */
.city-card.active {
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 60%) !important;
}

/* Input Styling */
.tutorial-input {
    width: 100%;
    padding: 0.625rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    color: white;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.tutorial-input:focus {
    border-color: var(--accent, #f27121);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 60%);
}

/* Carousel Enhancements */
.tutorial-tooltip.large-tooltip {
    max-width: 40.625rem !important;
    width: 90vw !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0.9375rem 0;
}

.carousel-container {
    display: flex;
    overflow-x: auto;
    gap: 0.9375rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 0.625rem 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

.nav-btn {
    position: absolute;
    z-index: 10;
    background: var(--bg-deep, #1e1e1e);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    font-size: 1.125rem;
}
.nav-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    background: var(--accent, #f27121);
    border-color: var(--accent, #f27121);
}
.nav-btn.prev {
    left: -1.25rem;
}
.nav-btn.next {
    right: -1.25rem;
}

.persona-btn.card-item {
    flex: 0 0 160px;
    height: 7.5rem;
    scroll-snap-align: center;
    padding: 0.9375rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #e2e8f0;
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    font-weight: bold;
    user-select: none;
    touch-action: pan-x;
}
.persona-btn.card-item span {
    pointer-events: none;
}
.persona-btn.card-item:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}
.persona-btn.card-item.active {
    background: color-mix(in srgb, var(--accent, #f27121) 20%, transparent) !important;
    color: white !important;
    border-color: var(--accent, #f27121) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent), transparent 50%) !important;
    transform: scale(1.05);
}

/* Neutralize interactive UI elements without ghosting the solid panels */
body.tutorial-map-only button:not(.tutorial-tooltip button):not(.tutorial-modal-overlay button),
body.tutorial-map-only input,
body.tutorial-map-only select,
body.tutorial-map-only a,
body.tutorial-map-only .time-dial-track-wrapper,
body.tutorial-map-only .phase-pill,
body.tutorial-map-only .persona-btn,
body.tutorial-map-only .mapboxgl-control-container button {
    pointer-events: none !important;
}

@media (max-width: 768px) {
    body.tutorial-active #trail-panel button,
    body.tutorial-active #trail-panel input,
    body.tutorial-active #trail-panel select,
    body.tutorial-active #trail-panel a {
        pointer-events: none;
    }

    /* Mobile tooltip position was previously force-pinned to a fixed bottom-right box here
       via !important, discarding tutorial.js's own getBoundingClientRect()-based
       positionTooltip() logic entirely. That coincidentally avoided collisions on a large
       device (Pixel 9 Pro XL) but guaranteed them on a shorter/narrower one (Galaxy S21 FE),
       where the fixed box collided with the Ask Solia button and the time dial — both of
       which are the tooltip's own step target, so the JS algorithm already avoids covering
       them by design once it's actually allowed to run. Only a max-width cap remains here;
       actual position is entirely JS-driven on mobile now, same as desktop.
    */
    .tutorial-tooltip {
        max-width: calc(100vw - 32px);
    }
}

.tutorial-tooltip, .tutorial-modal-overlay > div {
    background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%),
                radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

body.dark-theme .tutorial-tooltip {
    color: #f8fafc;
}

/* Spotlight Isolation mode: lock all input/clicks except on the target and tutorial controls */
body.tutorial-spotlight-active * {
    pointer-events: none !important;
}

body.tutorial-spotlight-active .tutorial-target-active,
body.tutorial-spotlight-active .tutorial-target-active *,
body.tutorial-spotlight-active .tutorial-tooltip,
body.tutorial-spotlight-active .tutorial-tooltip *,
body.tutorial-spotlight-active #solia-generic-confirm,
body.tutorial-spotlight-active #solia-generic-confirm *,
body.tutorial-spotlight-active #solia-generic-modal,
body.tutorial-spotlight-active #solia-generic-modal *,
body.tutorial-spotlight-active #credit-gate-modal,
body.tutorial-spotlight-active #credit-gate-modal * {
    pointer-events: auto !important;
}

/* Permit scrolling the trail panel ONLY during the clear-trail teaching step — the Clear Trail
   button sits below the fold there, and the JS overlay interceptor is bypassed for this step
   (see tutorial-step-clear-trail in tutorial.js) since it can't distinguish a scroll drag from a
   blocked tap at touchstart time. Deliberately NOT using a `*` descendant selector here — child
   buttons stay individually pointer-events:none (blocked) from the blanket rule above, except the
   Clear Trail button itself via its own .tutorial-target-active exemption; only the scrollable
   container itself needs pointer-events restored for drag-to-scroll to register. */
body.tutorial-spotlight-active.tutorial-step-clear-trail #trail-scroll-content {
    pointer-events: auto !important;
}

/* Same fix, same reason, for the Ask Solia / verdict steps — the spotlighted target
   (#analysis-ask-solia-section) is only part of #analysis-scroll-content's full scroll range, so
   once a drag starts outside it (e.g. scrolled past it toward the 360° View section below) the
   blanket pointer-events:none block swallowed the gesture entirely, leaving the user unable to
   scroll back up. See tutorial-step-analysis-drawer in tutorial.js. */
body.tutorial-spotlight-active.tutorial-step-analysis-drawer #analysis-scroll-content {
    pointer-events: auto !important;
}

/* Permit interactions on time dial component ONLY during the specific time-dial step */
body.tutorial-spotlight-active.tutorial-step-time-dial .time-dial-container,
body.tutorial-spotlight-active.tutorial-step-time-dial .time-dial-container *,
body.tutorial-spotlight-active.tutorial-step-time-dial #mobile-dial-spinner-container,
body.tutorial-spotlight-active.tutorial-step-time-dial #mobile-dial-spinner-container * {
    pointer-events: auto !important;
}

/* Soft pulsing glow on the dial/slider's outer edge during the 'time-dial' step, so it's
   obvious what to interact with on both the mobile spinner and desktop fader — both share
   .glass-dial as their outer visual edge. Toggled by a dedicated body class (tutorial-dial-
   highlight) rather than reusing tutorial-step-time-dial, since it needs to clear the instant
   enough of the dial has been explored (see checkProgress in tutorial.js), not only once the
   step actually ends. Layered onto .glass-dial's own inset shadow rather than replacing it. */
body.tutorial-dial-highlight .glass-dial {
    animation: tutorial-dial-glow-pulse 1.2s ease-in-out infinite alternate !important;
}
@keyframes tutorial-dial-glow-pulse {
    0% { box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 0 14px 2px rgba(255, 20, 147, 0.35); }
    100% { box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 0 32px 10px rgba(255, 20, 147, 0.7); }
}
/* #desktop-fader-container (and its track, .desktop-fader-track) each carry their own
   "box-shadow: ... !important" in style.css's desktop layout block — !important author rules
   always outrank animation-driven values for the same property, so the box-shadow pulse above
   is silently defeated there even though the container shares .glass-dial. Pulse `filter`
   instead: nothing else touches that property on this element, and a drop-shadow filter on the
   container still haloes its visible children (track + handle) much like the box-shadow does
   for the mobile spinner. More specific than the .glass-dial rule (ID vs class) so it wins the
   `animation` property outright rather than layering with it. */
body.tutorial-dial-highlight #desktop-fader-container {
    animation: tutorial-dial-glow-pulse-desktop 1.2s ease-in-out infinite alternate !important;
}
@keyframes tutorial-dial-glow-pulse-desktop {
    0% { filter: drop-shadow(0 0 6px rgba(255, 20, 147, 0.35)); }
    100% { filter: drop-shadow(0 0 16px rgba(255, 20, 147, 0.85)); }
}
/* Solia V3 Dual-Theme Architecture */

:root {
    /* Base Variables (Default to Light) */
    --accent: #ffffff;
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    --bg-deep: #0f1115;
    --bg-sidebar: #13151a;
    --text-main: #e0e0e0;
    --text-muted: var(--text-main);
    --glass: rgba(255, 255, 255, 0.05);
    --input-bg: rgba(255, 255, 255, 0.22);
    --input-border: rgba(255, 255, 255, 0.35);
    --success: #2ecc71;
    --error: #e74c3c;
    --tactical-height: 2.625rem;
    --text-btn: #ffffff;
    
    --bg-color: #f8f9fa;
    --text-color: #1e293b;
    --panel-bg: rgba(255, 255, 255, 0.9);
    --border-color: #e2e8f0;

    /* Safe floor for the mobile dial / map controls / side-panel offsets below.
       --header-height-floor/--footer-height-floor are never written to by JS — they're
       the permanent safe minimum ui.js's ResizeObserver clamps its measurements against
       (see ui.js), so a bad/transient offsetHeight reading (e.g. captured mid-layout
       during one of the native SystemBars insets passes at boot) can never stick as a
       too-small value. --header-height/--footer-height default to the floor and are what
       everything else actually reads; ui.js overwrites them (never below the floor) once
       it has a real measurement. var(--safe-area-inset-*, env(...)) prefers Capacitor's
       injected safe-area variable when present, falling back to the native env() — see
       the .auth-overlay rule for why: on some devices the injection throws and the
       variable never lands, so this must never be the only source of truth.
       Zero here on purpose — the real (10rem/8rem) floor is native-only (see html.is-native
       below): the async-safe-area-injection race it guards against can't happen in a browser,
       where env()/the CSS variable resolve synchronously. A non-zero floor here used to make
       max(realHeight, floor) always pick the oversized floor instead of the real, shorter
       header/footer on mobile web, pushing every panel/drawer/phase-card/dial/map-control
       anchored to these vars lower/higher than intended. Zero never binds, so
       max(realHeight, 0px) == realHeight — the exact pre-floor behavior. */
    --header-height-floor: 0px;
    --footer-height-floor: 0px;
    --header-height: var(--header-height-floor);
    --footer-height: var(--footer-height-floor);

    /* Single source of truth for how far #telemetry-header's content clears the status bar on
       native — used by its own padding-top AND both .solia-logo's and #telemetry-countdown's
       absolute-positioned `top` (all three html.is-native-scoped, see their own rules), so
       they can never drift apart from each other again. Change this ONE value to retune the
       gap; nothing else needs touching.
       Deliberately set to match the browser's own unscoped buffer (10px) exactly, not a larger
       value — an earlier round inflated this to compensate for the logo/countdown not tracking
       the header's padding-top at all (a separate bug, since fixed), which had nothing to do
       with the buffer's size. Now that they're correctly linked, native's total top padding is
       just the real safe-area-inset-top on top of the same margin the browser already uses. */
    --header-top-buffer: 0.625rem;
}

/* Native-app-only: restores the real header/footer safe-floor (see the :root comment above) —
   guards against a transient too-small offsetHeight reading racing Capacitor's async
   safe-area-inset injection at boot. Scoped here rather than at :root so the browser (desktop
   and mobile web) never has this floor compete with the real, shorter header/footer height.
   Header and footer are NOT symmetric here — confirmed on-device (Pixel 9 Pro XL, inset-top
   58px): the header's real height is ~151px (93px browser-base + 10px --header-top-buffer + 58px
   inset), but its flat round-number floor (10rem=160px) already overshoots the 93px base on its
   own, so dropping the "+ inset" term still safely covers the true 151px without double-counting
   it. The footer's floor (8rem=128px), by contrast, was already a *tight* match for its ~124px
   browser-base height with no slack — it never overshot the way the header's did. Dropping its
   "+ inset" term the same way removed real, needed coverage: --footer-height under-shot the true
   native footer height, sinking the mobile dial, the mapbox attribution/controls, and every
   panel's bottom edge down into where the footer actually renders. So: header floor stays flat,
   footer floor keeps adding the live inset. */
html.is-native {
    --header-height-floor: 10rem;
    --footer-height-floor: calc(8rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent !important;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Global custom scrollbar — app-styled everywhere, replaces the browser default */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}
*::-webkit-scrollbar { width: 0.375rem; height: 0.375rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 0.1875rem; box-shadow: 0 0 5px var(--accent); }

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#map-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100vw;
    background-image: url('https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/static/-73.5560,45.5045,15.5,-17.6,60/1280x800?access_token=pk.eyJ1IjoiZGFucGF1bGNyb3dkZXIiLCJhIjoiY21xdHlvb2NlMG9yYTJxcTA0NTd5aXhvdiJ9.QaJ7iJNypuSH2Es-gihw_A');
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 1;
}

/* UI Overlay & Time Scrubber */
.ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
}

.time-dial-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
}
.time-dial-track-wrapper {
    flex-grow: 1;
    height: 1.25rem;
    position: relative;
    overflow: hidden;
    cursor: grab;
    margin-right: 0.9375rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(30,30,35,0.4) 50%, rgba(0,0,0,0.8) 100%);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.05);
    border-radius: 0.25rem;
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 70%, transparent 100%);
}
.time-dial-track-wrapper:active {
    cursor: grabbing;
}
.time-dial-ticks {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image: repeating-linear-gradient(to right, 
        transparent 0px, transparent 6px, 
        color-mix(in srgb, var(--accent) 50%, transparent) 6px, color-mix(in srgb, var(--accent) 50%, transparent) 8px
    );
    background-size: 8px 100%;
    will-change: transform;
}
.time-dial-center-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.125rem;
    height: 100%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 2px #fff;
    z-index: 2;
    pointer-events: none;
}
/* Desktop Spring Faders */
.desktop-fader-track {
    overflow: visible !important;
    background: rgba(122, 122, 122, 0.242) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(82, 82, 82, 0.5) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
.desktop-fader-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 8px rgba(252, 80, 160, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    cursor: grab;
    z-index: 3;
    will-change: transform;
}
.desktop-fader-handle:active {
    cursor: grabbing;
}
.desktop-fader-handle.snapping {
    transition: transform 0.2s ease-out !important;
}
.desktop-tactical-btn {
    flex: 0 0 auto;
    width: 2.625rem;
    height: 2.625rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff;
    font-size: 1.125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-tactical-btn:hover {
    color: var(--accent);
}
.desktop-tactical-btn:active {
    transform: none;
}
.desktop-tactical-btn.active {
    color: var(--accent);
}

#btn-desktop-reorient .mapboxgl-ctrl-compass { 
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    position: static !important; 
    width: 100%; 
    height: 100%; 
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#btn-desktop-reorient .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
    display: block !important;
    width: 1.8125rem !important;
    height: 1.8125rem !important;
    background-image: none !important;
    background-color: #ffffff !important;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14.5L14.5 5l4 9.5-4-1.5-4 1.5z' fill='%23f30'/%3E%3Cpath d='M10.5 14.5L14.5 24l4-9.5-4 1.5-4-1.5z' fill='%23ccc'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14.5L14.5 5l4 9.5-4-1.5-4 1.5z' fill='%23f30'/%3E%3Cpath d='M10.5 14.5L14.5 24l4-9.5-4 1.5-4-1.5z' fill='%23ccc'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)) !important;
}

/* --- LEGACY V2 STYLES BELOW --- */
/* SOLIA style.css */

input, select, textarea {
    width: 100%; background: var(--input-bg) ; border: 1px solid var(--accent) ; backdrop-filter: blur(15px) ; -webkit-backdrop-filter: blur(15px) ;
    color: var(--accent) !important; opacity: 1 !important; padding: 0.75rem; border-radius: 0.375rem; margin-bottom: 0.625rem;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    font-family: inherit;
}
input::placeholder, textarea::placeholder {
    color: var(--accent) !important;
    opacity: 1 !important;
}
select option {
    background: var(--bg-sidebar);
    color: #ffffff;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset ;
    -webkit-text-fill-color: var(--text-main, white) ;
    transition: background-color 5000s ease-in-out 0s;
}

input:focus, select:focus { 
    outline: none; border-color: var(--accent); 
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 60%); 
}

#radius-value, #radius-value-mobile { color: var(--accent); font-weight: 800; font-size: 0.6875rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

#auth-wall, #signup-wall {
    position: fixed; top: 0; left: 0; width: 100%; height: 100dvh;
    background: var(--bg-deep) ;
    z-index: 100000;
    align-items: center; justify-content: center;
    pointer-events: auto ;
}

#auth-wall {
    display: flex;
}

.auth-card {
    background: var(--bg-sidebar); border: none; padding: 2.5rem; padding-top: 1.75rem;
    width: 20rem; border-radius: 0.25rem; box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); text-align: center;
    max-height: 90dvh; overflow-y: auto; box-sizing: border-box;
}

.auth-title { font-size: 1.125rem; font-weight: 800; letter-spacing: 0.1875rem; color: var(--accent); margin-top: 0; margin-bottom: 0.625rem; text-transform: uppercase; }
.auth-subtitle { font-size: 0.625rem; color: var(--text-muted); letter-spacing: 0.125rem; margin-top: 0.5rem; margin-bottom: 1.875rem; text-transform: uppercase; }

.btn-google {
    width: 100%; background: white; color: #1a1a1a; border: none; padding: 0.75rem;
    font-weight: 800; font-size: 0.75rem; border-radius: 0.25rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 0.625rem;
    transition: transform 0.1s;
}
.btn-google img, .btn-google svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.btn-google:active { transform: scale(0.98); }

.btn-facebook {
    width: 100%; background: #1877F2; color: white; border: none; padding: 0.75rem;
    font-weight: 800; font-size: 0.75rem; border-radius: 0.25rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.625rem; margin-bottom: 1.25rem;
    transition: transform 0.1s;
}
.btn-facebook svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn-facebook:active { transform: scale(0.98); }

.auth-divider { position: relative; margin: 1.25rem 0; text-align: center; }
.auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 0.0625rem; background: #222; z-index: 1; }
.auth-divider span { background: var(--bg-sidebar); padding: 0 0.625rem; color: var(--text-muted); font-size: 0.625rem; font-weight: 800; position: relative; z-index: 2; }

.consent-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin: 0.9375rem 0;
    cursor: pointer;
}
.consent-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent, #f27121);
    cursor: pointer;
    margin: 0.125rem 0 0 0;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}
.consent-checkbox-label a {
    color: var(--accent);
    text-decoration: underline;
}
.consent-checkbox-label.error {
    color: #ff4d4d;
}
.consent-checkbox-label.error input[type="checkbox"] {
    outline: 1px solid #ff4d4d;
    outline-offset: 2px;
}
.input-active { border-color: var(--accent) ; }

select {
    color: var(--text-main); padding-right: 2.5rem ;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
select option { background: var(--bg-deep); color: var(--text-main); }

/* Custom-styled dropdowns (front_v4/src/customSelect.js) — the real <select> stays in the DOM,
   invisible and click-through, purely as the source of truth for .value/change; these rules
   style the trigger + panel overlay that actually get seen and interacted with. */
.solia-select-native {
    opacity: 0 !important;
    pointer-events: none !important;
}
.solia-select-trigger {
    /* Always absolute, anchored to the select's own immediate parent (set inline by
       customSelect.js) — not fixed/viewport-relative, so it scrolls natively with the rest of
       the panel instead of needing JS to chase the scroll position every frame. */
    position: absolute;
    z-index: 999999;
    display: flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0 40px 0 12px;
    box-sizing: border-box;
    color: var(--text-main);
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.solia-select-trigger-label {
    /* Truncation lives on this child, not on .solia-select-trigger itself — a bare text node
       set directly on a flex container becomes an anonymous flex item with min-width:auto,
       which resists shrinking below its own content width and makes text-overflow:ellipsis a
       no-op. min-width:0 is what actually lets it shrink; flex:1 fills the row so the ellipsis
       lands at the trigger's own right edge (already clear of the chevron via its padding). */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.solia-select-trigger-focused, .solia-select-trigger-open {
    outline: none;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 60%);
}
.solia-select-panel {
    /* position (fixed vs absolute) is set inline per-instance by customSelect.js, matching
       whichever the trigger it belongs to uses. */
    z-index: 9999999;
    background: rgba(15, 17, 21, 0.95);
    border: 1px solid var(--accent);
    border-radius: 6px;
    max-height: 240px;
    overflow-y: auto;
    /* Prevents an at-the-limit overscroll from chaining into the page's own scroll, which would
       fire a page-level 'scroll' event mid-drag and close the panel via handleOuterScroll. */
    overscroll-behavior: contain;
    /* Windows-only, non-overlay scrollbars: reserves their width up front so a long list
       becoming tall enough to scroll can't shave a couple of px off the widest row's ellipsis
       point. No-op on platforms/browsers that don't support the property. */
    scrollbar-gutter: stable;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 4px;
    box-sizing: border-box;
}
.solia-select-option {
    padding: 10px 12px;
    border-radius: 4px;
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.solia-select-option:hover {
    background: color-mix(in srgb, var(--accent), transparent 80%);
}
.solia-select-option.is-selected {
    background: color-mix(in srgb, var(--accent), transparent 60%);
    color: var(--accent);
    font-weight: 700;
}
.solia-select-option.solia-select-option-highlighted {
    /* Keyboard-nav highlight — distinct from both plain :hover (lighter, no outline) and
       .is-selected (a different transparency, no outline): declared after .is-selected so its
       background wins on the common case of a row being both selected and highlighted right
       after opening, while .is-selected's color/font-weight still apply (different properties). */
    background: color-mix(in srgb, var(--accent), transparent 70%);
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.solia-tooltip {
    background: rgba(15, 17, 21, 0.95) ; border: 1px solid var(--accent) ;
    color: var(--text-main) ; padding: 12px; border-radius: 6px;
    font-size: 10px; font-family: 'Consolas', monospace; z-index: 7000 ;
    max-width: 200px; white-space: normal; word-break: break-word;
}

.accent-label,
#account-panel label,
#adventure-panel label,
#planning-panel label,
#trail-panel label,
#analysis-drawer label,
.account-section label { 
    display: block; font-size: 11px; font-weight: 800; color: var(--accent) ; 
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; 
}
.section-label { font-size: 10px ; color: var(--text-muted) ; letter-spacing: 2px ; margin-bottom: 30px ; text-transform: uppercase ; text-align: center ; width: 100% ; display: block ; }
.persona-badge { background: var(--input-bg); border: 1px solid var(--accent); color: var(--accent); padding: 0.75rem; border-radius: 0.375rem; font-weight: 800; text-transform: uppercase; font-size: 0.6875rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.control-group { margin-bottom: 1.5625rem; }

#planning-panel input[type="radio"] { display: none ; }

#planning-panel button[id^='sidebar-'] {
    width: 40px ;
    height: 40px ;
    padding: 0 ;
    background: transparent ;
    box-shadow: none ;
    border: none ;
}
#planning-panel button[id^='sidebar-']:hover {
    filter: drop-shadow(0 0 8px var(--accent)) ;
    transform: translateY(-2px) ;
}

.mobility-picker { display: flex; gap: 0.9375rem; margin-top: 0.3125rem; padding-bottom: 1.25rem; }

.mobility-btn {
    flex: 1; height: 3.75rem; background: transparent ; border: 2px solid var(--accent) ;
    color: var(--accent) ; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; align-items: center; justify-content: center; font-size: 1.75rem ; -webkit-tap-highlight-color: transparent ;
}

.mobility-btn i { color: var(--accent) ; transition: color 0.3s; font-size: 1.75rem ; }

.mobility-btn.active {
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) ; color: var(--text-btn) ;
    box-shadow: 0 0 20px var(--accent); border: none ;
}

.mobility-btn.active i { color: var(--text-btn) ; }

div#trail-panel button.mobility-btn:not(.active) { background: transparent ; color: var(--accent) ; border: 1px solid var(--input-border) ; box-shadow: none ; }
div#trail-panel button.mobility-btn.active { background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) ; color: var(--text-btn) ; border: 1px solid var(--accent) ; box-shadow: 0 0 15px color-mix(in srgb, var(--accent), transparent 50%) ; }
div#trail-panel button.mobility-btn:not(.active) i { color: var(--accent) ; }
div#trail-panel button.mobility-btn.active i { color: var(--text-btn) ; }

#trail-queue-list { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 0.375rem; min-height: 6.25rem; max-height: 18.75rem; overflow-y: auto; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; }

.collection-brief-box { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 0.375rem; max-height: 7.5rem; overflow-y: auto; padding: 0.625rem; box-sizing: border-box; color: var(--text-main); font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.trail-item { background: rgba(255, 255, 255, 0.03); border: 1px solid #222; padding: 0.625rem; border-radius: 0.25rem; display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; animation: slideIn 0.2s ease-out; }
.trail-item.dragging { opacity: 0.5; border: 1px dashed var(--accent); }

@keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* flex:1 + min-width:0 lets the title claim exactly the space left over after the handle and
   actions — so wrapped/long text always keeps clear of the remove button by construction,
   rather than a guessed max-width that could either overlap it or leave too much margin. */
.trail-item-info { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; }
.trail-item-title { font-size: 0.6875rem; font-weight: 800; color: var(--text-main); text-align: left; white-space: normal; word-break: break-word; }
.trail-item-meta { font-size: 0.5625rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.0625rem; text-align: left; }
.trail-item-actions { display: flex; gap: 0.625rem; }
.trail-item-handle { cursor: grab; color: var(--text-muted); padding: 0 0.625rem; font-size: 0.875rem; touch-action: none; }

.remove-from-trail { background: none; border: none; color: #e74c3c; cursor: pointer; padding: 0.3125rem; opacity: 0.6; transition: 0.2s; }
.remove-from-trail:hover { opacity: 1; transform: scale(1.1); }
.empty-queue-msg { color: var(--text-muted); font-size: 0.625rem; text-align: center; margin-top: 2.5rem; letter-spacing: 0.125rem; }

.pulsing-route { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; filter: drop-shadow(0 0 5px var(--accent)); stroke-dasharray: 10, 10; animation: flowLight 2s linear infinite; }
@keyframes flowLight { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }

.route-card { background: rgba(13, 15, 20, 0.9); backdrop-filter: blur(10px); border: 1px solid var(--accent); border-radius: 0.5rem; padding: 0.9375rem; box-shadow: 0 0 30px rgba(0,0,0,0.8); pointer-events: auto; animation: slideDown 0.4s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

.route-card-header { font-size: 0.625rem; font-weight: 900; color: var(--accent); letter-spacing: 0.125rem; margin-bottom: 0.75rem; text-align: center; border-bottom: 1px solid rgba(212, 175, 55, 0.2); padding-bottom: 0.5rem; }
.route-stops { display: flex; flex-direction: column; gap: 0.5rem; max-height: 12.5rem; overflow-y: auto; }
.route-stop { display: flex; align-items: center; gap: 0.625rem; font-size: 0.6875rem; }
.stop-idx { background: var(--accent); color: var(--bg-deep); width: 1rem; height: 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; font-weight: 900; }
.route-meta { margin-top: 0.75rem; font-size: 0.5625rem; color: var(--text-muted); text-align: right; letter-spacing: 0.0625rem; }

/* Fixed footprint so the drawer doesn't reflow when the Mapillary panorama swaps in for the
   "Loading 360° View..." placeholder — the placeholder text alone is much shorter than the
   200px-tall viewer that eventually replaces it, and everything below used to visibly jump down
   the moment it loaded. min-height (not height) lets the Mapillary viewer's own inline 200px
   still be the one actually driving the box in the normal case, while keeping placeholder/error/
   empty states pinned to the same size instead of shrink-wrapping to their short text. */
#drawer-images { min-height: 12.5rem; border-radius: 0.5rem; overflow: hidden; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; }
#debt-shield, #mission-suspended { display: none; font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif); }

.nav-arrow { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--accent); padding: 0.3125rem 0.625rem; font-size: 0.5625rem; font-weight: 800; cursor: pointer; border-radius: 0.25rem; transition: all 0.2s ease; }
.nav-arrow:hover { border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 70%); }
.nav-arrow:active { transform: scale(0.95); }

#btn-save-project, #btn-delete-project { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--accent); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 0.375rem; font-size: 1.125rem; transition: all 0.2s ease; }
#btn-save-project:hover, #btn-delete-project:hover { border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 70%); }
#cancel-purge-btn { flex: 1; background: none; border: 1px solid #444; color: #888; padding: 0.75rem; cursor: pointer; text-transform: uppercase; font-size: 0.75rem; }
#confirm-purge-btn { flex: 1; color: var(--text-btn) ; border: none; padding: 0.75rem; font-weight: 900; cursor: pointer; text-transform: uppercase; font-size: 0.75rem; }

#schedule-slider { cursor: grab; touch-action: none; }
#schedule-slider:active { cursor: grabbing; }
.schedule-slider-box { font-size: 0.625rem; padding: 0.1875rem 0.375rem; background: linear-gradient(135deg, #ff1493 0%, #f27121 100%); color: var(--text-btn); border-radius: 0.25rem; white-space: nowrap; font-weight: 700; letter-spacing: 0.03125rem; }
.schedule-slider-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #f27121; }
.schedule-slider-line { width: 0.125rem; height: 1.25rem; background: #ffffff; }

.onboarding-next-btn { width: 100%; background: var(--accent); color: var(--bg-deep); border: none; padding: 0.9375rem; font-weight: 900; cursor: pointer; letter-spacing: 0.0625rem; text-transform: uppercase; margin-top: 1.25rem; }
.tactical-btn-wide { width: 100%; background: var(--accent); color: var(--text-btn) ; border: none; padding: 0.9375rem; font-weight: 900; cursor: pointer; text-transform: uppercase; letter-spacing: 0.0625rem; border-radius: 0.25rem; }

.status-ready { color: #ffffff; }
.status-active { color: var(--accent); }
.status-success { color: var(--success); }
.status-error { color: var(--error); }
.target-crosshair { stroke: var(--accent) ; fill: var(--accent) ; }

.panel-header-sticky { position: relative ; top: 0 ; left: 0 ; width: 100% ; height: auto ; background: rgba(255, 255, 255, 0.16) ; z-index: 1000 ; pointer-events: none ; display: flex ; flex-direction: column ; align-items: center ; justify-content: flex-start ; padding: 2.5rem 1.5625rem 0.75rem 1.5625rem ; box-sizing: border-box ; }
.panel-header-sticky::after { content: '' ; position: absolute ; top: 100% ; left: 0 ; width: 100% ; height: 2.5rem ; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0%, transparent 100%) ; pointer-events: none ; }

.panel-scroll, #adventure-panel .panel-scroll, #planning-panel .panel-scroll, #trail-panel .panel-scroll, #analysis-drawer .panel-scroll { padding-top: 0.75rem ; padding-left: 1.5625rem ; padding-right: 1.5625rem ; padding-bottom: 1.5625rem ; overflow-y: auto ; flex: 1 ; box-sizing: border-box ; }
#account-panel .panel-scroll { padding-top: 0.75rem ; padding-left: 1.5625rem ; padding-right: 1.5625rem ; padding-bottom: 1.5625rem ; overflow-y: auto ; flex: 1 ; box-sizing: border-box ; }

.account-header { text-align: center ; margin-top: 0 ; margin-bottom: 35px ; height: auto ; display: flex ; flex-direction: column ; justify-content: center ; pointer-events: auto ; position: relative ; }
.panel-title { font-size: 1.25rem ; font-weight: 900 ; color: var(--accent) ; letter-spacing: 0.125rem ; text-transform: uppercase ; margin: 0 ; padding: 0 ; text-align: center ; line-height: 1 ; width: 100% ; display: block ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

#lock-address-btn { top: 50%; transform: translateY(-50%); position: absolute; right: 15px; cursor: pointer; color: var(--accent); }
#lock-address-btn.ready-to-lock { color: var(--accent) ; animation: solia-pulse 1.5s infinite; }
#lock-address-btn.locked { color: var(--success) ; text-shadow: 0 0 10px rgba(46, 204, 113, 0.6); }

@keyframes solia-pulse-green { 0% { stroke-width: 2; stroke-opacity: 1; fill-opacity: 0.6; box-shadow: 0 0 5px color-mix(in srgb, var(--accent), transparent 60%); } 50% { stroke-width: 15; stroke-opacity: 0.3; fill-opacity: 0.9; box-shadow: 0 0 20px color-mix(in srgb, var(--accent), transparent 20%); } 100% { stroke-width: 2; stroke-opacity: 1; fill-opacity: 0.6; box-shadow: 0 0 5px color-mix(in srgb, var(--accent), transparent 60%); } }
.pulsing-green-marker { animation: solia-pulse-green 2s infinite ease-in-out; stroke: var(--accent) ; position: relative ; }
@keyframes solia-pulse { 0% { transform: scale(1); opacity: 0.7; text-shadow: 0 0 0 color-mix(in srgb, var(--accent), transparent 100%); } 50% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 30%); } 100% { transform: scale(1); opacity: 0.7; text-shadow: 0 0 0 color-mix(in srgb, var(--accent), transparent 100%); } }

button#close-drawer, button#close-tools-menu, button#close-command-hub, button#close-account-panel, button#close-adventure-panel, button#close-mission-panel, button#close-planning-panel, button#close-trail-panel { position: absolute !important; top: 1.25rem !important; left: 1.25rem !important; transform: none !important; width: auto !important; height: auto !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 0 !important; z-index: 20000 !important; box-shadow: none !important; pointer-events: auto !important; color: var(--accent) !important; font-family: monospace !important; font-size: 0.6875rem !important; font-weight: 800 !important; letter-spacing: 0.09375rem !important; text-transform: uppercase !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; opacity: 0.8 !important; transition: opacity 0.3s ease !important; }
button#close-drawer::after, button#close-tools-menu::after, button#close-command-hub::after, button#close-account-panel::after, button#close-adventure-panel::after, button#close-mission-panel::after, button#close-planning-panel::after, button#close-trail-panel::after { display: none !important; }

.action-stack { margin-top: 1.875rem; text-align: center; }
.btn-description { font-size: 0.5625rem; color: var(--text-muted); line-height: 1.6; margin-top: 0.75rem; text-transform: uppercase; letter-spacing: 0.0625rem; }
.time-select-row { display: flex; gap: 0.625rem; margin-top: 0.3125rem; }
.time-select-group { flex: 1; }
.time-label { display: block; font-size: 0.5625rem; color: var(--text-muted); margin-bottom: 0.25rem; text-transform: uppercase; }

/* --- MAPBOX NAVIGATION COMPASS POSITIONING --- */
.mapboxgl-ctrl-group {
    z-index: 100000 !important; /* Keep under all UI panels (z-index 2000+) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgb(255, 255, 255) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.mapboxgl-ctrl button:not(.mapboxgl-ctrl-compass):not(.mapboxgl-ctrl-attrib-button) {
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(242, 113, 33, 0.5) !important;
}

/* Make the compass pop with the accent color, keeping the red tip visible! */
.mapboxgl-ctrl-compass {
    background: color-mix(in srgb, var(--bg-sidebar) 80%, transparent) !important;
    border-radius: 50% !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
    /* Mapbox arrow is dark grey with a red North tip. We invert it so the arrow is white and the North tip is glowing cyan! */
    filter: invert(1) drop-shadow(0 0 2px var(--accent));
}





/* --- GOLDEN CREDITS TIMER DRAWER --- */
/* Ensure Mapbox controls always stay on top of the timer */
.mapboxgl-ctrl-top-left { z-index: 10 !important; }

#golden-timer-drawer {
    display: none !important;
    position: absolute;
    width: 130px; /* Exactly matches the 130px width of the Mapbox control group */
    height: 80px; /* Short enough to completely hide behind the control group (which is ~97px tall) */
    margin: 10px 10px 0 10px; /* Matches the default Mapbox control margin so it perfectly aligns */
    background: linear-gradient(45deg, #e37682 15%, #5f4d93 85%); /* Exact gradient from timer_proposal.md */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 5; /* Safely behind Mapbox controls (z-index 10) but above map canvas */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Push content to the very bottom of the drawer */
    padding-bottom: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    transition: transform 0.7s cubic-bezier(0.17, 0.67, 0.22, 1);
    transform: translateY(10px); /* Hidden behind Mapbox controls, pushed down 10px to hide square corners behind the mapbox rounded corners */
    pointer-events: none;
}

/* When active, it slides down past the zoom buttons and date dial */
#golden-timer-drawer.drawer-open {
    /* Slides down 90px. Since the Mapbox group is ~97px tall, the top 10px of the drawer stays hidden! */
    transform: translateY(90px); 
    pointer-events: auto;
}

.golden-timer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.golden-timer-clock {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: white;
    /* Glowing white alarm clock letters exactly from timer_proposal.md */
    filter: drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 10px white);
    font-size: 22px;
    line-height: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.golden-timer-subtext {
    color: #ffdf00; /* Gold */
    font-size: 8px;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    margin-top: 6px;
    letter-spacing: 0.5px;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.8);
}





.tactical-slider { background: var(--input-bg) ; border: 1px solid var(--accent) ; border-radius: 6px; height: var(--tactical-height); padding: 0 10px; appearance: none; width: 100%; box-sizing: border-box; }
.tactical-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: var(--accent); cursor: pointer; border-radius: 2px; }
input[type=range].tactical-slider::-moz-range-thumb { background: var(--accent); border: none; border-radius: 2px; width: 14px; height: 14px; box-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 50%); cursor: pointer; }
.tactical-slider::-moz-range-track { background: transparent ; border: none; }

.field-wrap { position: relative; }


#account-panel, #adventure-panel, #planning-panel, #trail-panel, #analysis-drawer {
    background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ;
    backdrop-filter: blur(05px) ;
    -webkit-backdrop-filter: blur(05px) ;
    border: 1px solid rgba(255, 255, 255, 0.32) ;
    box-sizing: border-box ;
    overflow: hidden ;
    z-index: 20000 ;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), right 0.5s cubic-bezier(0.16, 1, 0.3, 1) ;
    box-shadow: inset 0 1px 1px rgba(128, 128, 128, 0.079), inset 0 -1px 1px rgba(114, 114, 114, 0.072), 0 10px 30px rgba(139, 139, 139, 0.079) ;
    text-shadow: 5 1px 3px rgba(0, 0, 0, 0.6) ;
}

#account-panel.open, #adventure-panel.open, #planning-panel.open, #trail-panel.open, #analysis-drawer.open {
    transform: translateY(0); right: 0; box-shadow: 0 0 50px rgba(0,0,0,0.9);
}

.close-panel-btn-arrow { position: absolute !important; top: 1.25rem !important; left: 1.25rem !important; transform: none !important; background: none !important; border: none !important; color: var(--accent) !important; font-family: monospace !important; font-size: 0.6875rem !important; font-weight: 800 !important; letter-spacing: 0.09375rem !important; text-transform: uppercase !important; cursor: pointer !important; pointer-events: auto !important; z-index: 20100 !important; opacity: 0.8 !important; transition: opacity 0.3s ease !important; display: flex !important; align-items: center !important; gap: 0.375rem !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; }
.close-panel-btn-arrow:hover { opacity: 1 !important; transform: none !important; }

.side-panel { position: fixed; top: 0; right: -21.875rem; width: 20rem; height: 100%; z-index: 1000; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); display: flex; flex-direction: column; }
.side-panel.open { transform: translateX(-350px); }

#account-panel button:not([id^='close-']), #adventure-panel button:not([id^='close-']):not(#btn-delete-project), #planning-panel button:not([id^='close-']):not([id^='sidebar-']), #trail-panel button:not([id^='close-']):not(.mobility-btn), .tactical-action-btn, #btn-init-mission, .btn-primary { appearance: none ; -webkit-appearance: none ; width: 100% ; min-height: 3.4375rem ; background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) ; color: var(--text-btn) ; font-weight: 900 ; font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) ; text-transform: uppercase ; letter-spacing: 0.125rem ; font-size: 0.6875rem ; padding: 0.9375rem ; border: none ; border-radius: 0.375rem ; cursor: pointer ; display: flex ; align-items: center ; justify-content: center ; text-align: center ; box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4), 0 2px 5px rgba(0, 0, 0, 0.4) ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) ; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ; margin-top: 0.625rem ; box-sizing: border-box ; outline: none ; }
#account-panel button:not([id^='close-']):hover, #adventure-panel button:not([id^='close-']):not(#btn-delete-project):hover, #planning-panel button:not([id^='close-']):not([id^='sidebar-']):hover, #trail-panel button:not([id^='close-']):not(.mobility-btn):hover, .tactical-action-btn:hover, #btn-init-mission:hover, .btn-primary:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--accent), transparent 40%) ; transform: translateY(-1px) ; filter: brightness(1.1); }
#account-panel button:not([id^='close-']):active, #adventure-panel button:not([id^='close-']):not(#btn-delete-project):active, #planning-panel button:not([id^='close-']):not([id^='sidebar-']):active, #trail-panel button:not([id^='close-']):not(.mobility-btn):active, .tactical-action-btn:active, #btn-init-mission:active, .btn-primary:active { transform: scale(0.98) ; }
.tactical-cancel-btn { background: transparent ; border: 1px solid var(--accent) ; color: var(--accent) ; }

#account-panel button#btn-close-account-burn { background: transparent ; border: 1px solid #ff4444 ; color: #ff4444 ; box-shadow: none ; height: 3.4375rem ; font-weight: normal !important; text-transform: uppercase ; letter-spacing: 0.125rem ; font-size: 0.6875rem ; border-radius: 0.375rem ; transition: all 0.2s ease-in-out ; display: flex ; align-items: center ; justify-content: center ; width: 100% ; margin-top: 0.625rem ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
#account-panel button#btn-close-account-burn:hover { box-shadow: 0 0 20px color-mix(in srgb, #ff4444, transparent 70%) ; background: color-mix(in srgb, #ff4444, transparent 95%) ; filter: brightness(1.1); }

#account-panel button#btn-signout { background: transparent ; border: 1px solid var(--accent) ; color: var(--accent) ; margin-top: 1.25rem ; box-shadow: none ; height: 3.4375rem ; font-weight: 900 ; text-transform: uppercase ; letter-spacing: 0.125rem ; font-size: 0.6875rem ; border-radius: 0.375rem ; transition: all 0.2s ease-in-out ; display: flex ; align-items: center ; justify-content: center ; width: 100% ; }
#account-panel button#btn-signout:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--accent), transparent 70%) ; background: color-mix(in srgb, var(--accent), transparent 95%) ; filter: brightness(1.1); }

.route-icon-svg { stroke: var(--accent); fill: none; stroke-width: 2.5; }
.auth-overlay, #purge-modal, #init-project-modal, #auth-gate { position: fixed ; top: 0 ; left: 0 ; width: 100vw ; height: 100dvh ; z-index: 30000 ; align-items: center ; justify-content: center ; backdrop-filter: blur(4px) ; background: rgba(0, 0, 0, 0.45) ; display: none; padding-top: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), 0.9375rem); padding-bottom: max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 0.9375rem); }
#purge-modal > div, #init-project-modal > div, #auth-gate > div, .modal-card-themed { background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; border: 1px solid rgba(255, 255, 255, 0.32) ; box-shadow: 0 0 30px rgba(0,0,0,0.5); border-radius: 0.75rem; padding: 2.5rem ; max-width: 25rem; width: 90%; box-sizing: border-box; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); max-height: 90dvh; overflow-y: auto; }
.modal-card-themed p:first-child:not(.logo):not(.solia-alert-message), .modal-card-themed #modal-title { font-size: 1rem ; text-align: center ; letter-spacing: 0.125rem ; margin-bottom: 1.5625rem ; width: 100% ; color: #ffffff ; font-weight: 900 ; text-transform: uppercase ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.modal-card-themed p, .modal-card-themed label, .modal-card-themed span { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; }
#purge-modal input, #purge-modal textarea, #init-project-modal input, #init-project-modal textarea, #auth-gate input, #auth-gate textarea { color: #ffffff !important; background: rgba(255, 255, 255, 0.22) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important; }
/* The static !important box-shadow above otherwise blocks the global input:focus accent glow
   (it has no :focus counterpart to compete with, so the constant shadow always wins) — these
   glass-themed modals use a white glow instead of the accent color to match their white-on-glass
   input styling, e.g. the Collection Name / City fields in #init-project-modal (TC 362). */
#init-project-modal input:focus, #init-project-modal textarea:focus { border-color: rgba(255, 255, 255, 0.7) !important; box-shadow: 0 0 10px rgba(255, 255, 255, 0.6) !important; outline: none; }
#purge-modal[style*="display: flex"], #init-project-modal[style*="display: flex"], #auth-gate[style*="display: flex"] { display: flex ; }
#telemetry-countdown { font-weight: 400; }
#account-callsign-display, .account-header > div { font-size: 24px ; font-weight: 800 ; letter-spacing: 5px ; text-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 50%) ; color: var(--accent) ; text-transform: uppercase ; text-align: center ; width: 100% ; word-wrap: break-word ; line-height: 1.1 ; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; }
.account-section { margin-bottom: 1.5625rem; }
.email-row { display: flex; justify-content: space-between; align-items: center; background: var(--input-bg); padding: 0.75rem; border-radius: 0.375rem; border: 1px solid var(--accent); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
#account-email-display { font-size: 13px; opacity: 1 !important; color: #ffffff !important; }
.email-verified-tag { font-weight: 400 !important; letter-spacing: normal !important; }
.email-verified-tag.is-verified { color: #4caf50; }
.email-verified-tag.is-unverified { color: #ff9800; }
#trigger-email-edit { color: var(--accent); cursor: pointer; transition: transform 0.2s ease; }
#trigger-email-edit:hover { transform: scale(1.2); }
#subscription-status-card { background: rgba(255,184,0,0.05); border: 1px solid rgba(255,184,0,0.2); padding: 0.9375rem; border-radius: 0.5rem; margin-bottom: 0.625rem; }
#sub-status-text { font-weight: 900; font-size: 0.8125rem; color: var(--accent); }
#sub-renewal-date { font-size: 0.6875rem; opacity: 0.6; }
#verification-shield { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 12, 16, 0.98); backdrop-filter: blur(25px); z-index: 100000; display: none; align-items: center; justify-content: center; text-align: center; }
.shield-content { max-width: 18.75rem; padding: 1.25rem; }
.shield-content h2 { color: var(--accent); font-weight: 900; font-size: 1.125rem; letter-spacing: 0.0625rem; margin: 1.25rem 0; }
.shield-content p { color: #ccc; font-size: 0.8125rem; line-height: 1.6; margin-bottom: 1.875rem; }
#deletion-banner { background: rgba(255, 68, 68, 0.1); border: 1px solid #ff4444; padding: 0.625rem; border-radius: 0.375rem; margin-bottom: 1.25rem; text-align: center; }
#email-edit-subwindow { margin-top: 15px; }

#footer-trail-btn, #footer-planning-btn, #footer-tools-btn, #footer-user-btn, .mobility-btn { -webkit-tap-highlight-color: transparent ; }

#sidebar-trail-btn .dossier-icon-container, #sidebar-mission-btn .dossier-icon-container, #sidebar-user-btn .dossier-icon-container, #footer-trail-btn .dossier-icon-container, #footer-tools-btn .dossier-icon-container, #footer-user-btn .dossier-icon-container { filter: none ; transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1) ; width: 40px; height: 40px; background: transparent ; border: none ; box-shadow: none ; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.dossier-icon-container svg { stroke: var(--accent); fill: var(--accent); }
#sidebar-trail-btn:hover .dossier-icon-container, #sidebar-mission-btn:hover .dossier-icon-container, #sidebar-user-btn:hover .dossier-icon-container, #footer-trail-btn:hover .dossier-icon-container, #footer-tools-btn:hover .dossier-icon-container, #footer-user-btn:hover .dossier-icon-container { filter: drop-shadow(0 0 8px var(--accent)) ; }
#sidebar-trail-btn:hover svg, #sidebar-mission-btn:hover svg, #sidebar-user-btn:hover svg, #footer-planning-btn:hover svg, #footer-tools-btn:hover svg, #footer-user-btn:hover svg { stroke: var(--accent) ; }

.mobile-only { display: none; }
#mobile-dial-spinner-container { position: fixed; bottom: calc(var(--footer-height, 8rem) + 1.875rem); left: 1.875rem; z-index: 9999; width: 10rem; height: 10rem; touch-action: none; }
.spinner-wheel { width: 100%; height: 100%; position: absolute; border-radius: 50%; }
.glass-dial { background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(20px) ; -webkit-backdrop-filter: blur(20px) ; border: 1px solid rgba(255, 255, 255, 0.32) ; box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 10px 30px rgba(0, 0, 0, 0.25) ; }
.menu-open .glass-dial { box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 10px 40px rgba(252, 80, 160, 0.411) ; }
.spinner-notch-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 1; transition: transform 0.1s linear; }
.spinner-notch-wrapper.dragging { transition: none !important; }
.spinner-notch { position: absolute; top: 0.5625rem; left: 50%; transform: translateX(-50%); width: 0.125rem; height: 0.75rem; background: var(--accent); border-radius: 0; box-shadow: 0 0 8px var(--accent); }
.spinner-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    cursor: pointer;
    z-index: 2;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4), 0 2px 5px rgba(0, 0, 0, 0.15) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.spinner-center-btn:hover {
    filter: brightness(1.1) !important;
}
.spinner-center-btn:active {
    transform: translate(-50%, -50%) scale(0.95) !important;
}
.radial-menu { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 0; }
.radial-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, filter 0.2s ease !important;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.radial-item:hover {
    filter: brightness(1.1) !important;
}
.radial-item:active {
    filter: brightness(0.9) !important;
}
.radial-item:active i {
    transform: scale(0.85) !important;
}
/* Small highlight marking which telemetry readout (date vs time-at-cursor) the
   mobile dial is currently scrubbing — same accent gradient as the active phase row. */
.dial-mode-highlight { padding: 0.0625rem 0.375rem; border-radius: 0.25rem; transition: background 0.3s ease, color 0.3s ease; }
.dial-mode-highlight.active { background-image: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important; color: var(--text-btn, #000) !important; }

.menu-open .radial-item { opacity: 1; pointer-events: auto; }
.menu-open #radial-close-btn { transform: translate(-78px, -78px) scale(1) !important; }
.menu-open #radial-planning-btn { transform: translate(0px, -110px) scale(1) !important; }
.menu-open #radial-trail-btn { transform: translate(78px, -78px) scale(1) !important; }
.menu-open #radial-tools-btn { transform: translate(110px, 0px) scale(1) !important; }
.menu-open #radial-user-btn { transform: translate(78px, 78px) scale(1) !important; }

#phase-table, .phase-table { width: 16.25rem; margin: 0 auto; border-collapse: separate; border-spacing: 0; font-size: 0.6875rem; color: var(--accent); }
#phase-table td, .phase-table td { padding: 0.5rem 0.5rem; }
#phase-table td:first-child, .phase-table td:first-child { text-align: left; }
#phase-table .time, .phase-table .time { text-align: right; }
#phase-table tr.inactive, .phase-table tr.inactive { opacity: 1; }
#phase-table tr.active, .phase-table tr.active { color: var(--text-btn); font-weight: 800; }
#phase-table tr.active td, .phase-table tr.active td { color: var(--text-btn) !important; background-image: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important; background-size: 200% 100% !important; }
#phase-table tr.active td:first-child, .phase-table tr.active td:first-child { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; background-position: left center !important; }
#phase-table tr.active td:last-child, .phase-table tr.active td:last-child { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; background-position: right center !important; }

.trail-label-icon { background: none; border: none; }

@keyframes nightGuardGlow { 0% { filter: drop-shadow(0 0 0px var(--accent)); transform: scale(1); } 50% { filter: drop-shadow(0 0 15px var(--accent)); transform: scale(1.2); } 100% { filter: drop-shadow(0 0 0px var(--accent)); transform: scale(1); } }
.night-guard-alert { animation: nightGuardGlow 0.5s ease-in-out 3 ; }

/* #########################################################################
   # SECTION: DESKTOP LAYOUT (PC Only)
   ######################################################################### */



/* #########################################################################
   MOBILE
   ######################################################################### */



.panel-header-sticky {
    padding-top: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), 2.5rem) ;
}

/* Native-app-only: max(safe-area, 2.5rem) alone gives ZERO clearance above the status bar
   once the real inset (commonly ~58px on notched/cutout phones) exceeds the 2.5rem floor —
   the same class of gap confirmed, on-device, to read as a visible overlap on #telemetry-header.
   The browser has no status bar to clear, so this only applies inside the Capacitor app
   (html.is-native, set in index.html before first paint). */
html.is-native .panel-header-sticky {
    padding-top: max(calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 1rem), 2.5rem) ;
}



#telemetry-header {
    padding-top: max(calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 0.625rem), 0.625rem);
    padding-bottom: 0.625rem;
}

#tactical-footer {
    padding-bottom: max(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)), 0.9375rem) ;
}

/* Brand wordmark (see /solia-wordmark-white.svg). width (not height) is the
   controlling dimension here, with max-width clamping it back down inside
   narrow containers (e.g. the 20rem auth-card) so it scales to fill
   whatever room is available instead of overflowing or distorting. */
.solia-logo {
  display: block;
  width: 368px; /* Base size */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}

/* Specific context scalers — these size by height instead (compact chrome,
   plenty of horizontal room), so width/margin from the base rule above are
   reset back to auto/0 to avoid stretching or fighting flex layout. */
#planning-panel .solia-logo {
  height: 30px;
  width: auto;
  margin: 0;
}
/* Exception to the rule: Telemetry Header needs to be smaller and centered because of inline styling */
#telemetry-header .solia-logo {
  height: 28px;
  width: auto;
  margin: 0;
  position: absolute !important;
  left: 50% !important;
  top: 25% !important;
  transform: translate(-50%, -50%) !important;
}

/* Native-app-only: on the real device the status bar genuinely overlaps this logo at the
   default `top: 25%` (a percentage of the header's own auto height — never actually tracked
   the real status-bar inset, unlike the header's own padding-top, which is why the two drift
   apart as the header's height changes). The browser has no status bar to clear and this
   header is explicitly locked there, so this override only applies inside the Capacitor app
   (html.is-native, set in index.html before first paint). 0.875rem = half the logo's 28px
   height, since `transform: translate(-50%,-50%)` centers on `top`, not top-aligns. */
html.is-native #telemetry-header .solia-logo {
  top: calc(var(--header-top-buffer) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 0.875rem) !important;
}

/* --- DATE DIAL --- */
.date-dial-container-mobile {
    display: none; /* Hidden until injected into Mapbox controls */
    position: relative;
    background: transparent;
    border: none;
    z-index: 2000;
    box-sizing: border-box;
}

.vertical-readout {
    font-size: 10px !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}



/* Solia Pins */
.solia-pin-wrapper {
    width: 28px;
    height: 38px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
}

.solia-pin {
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, outline-color 0.3s ease;
    border: 2px solid #fff;
    outline: 4px solid transparent;
}

.solia-pin > * {
    transform: rotate(45deg);
}
.solia-pin-grey {
    background-color: #333;
    color: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    opacity: 1.0;
}
.solia-pin-lit {
    background-color: var(--accent);
    box-shadow: 0 0 15px var(--accent);
    opacity: 1.0;
}

/* Pin Color Locks */
.pin-border-m-blue { outline-color: #1a2a6c !important; }
.pin-border-m-golden { outline-color: #ffcc33 !important; }
.pin-border-day { outline-color: #87ceeb !important; }
.pin-border-e-golden { outline-color: #f27121 !important; }
.pin-border-e-blue { outline-color: #4a00e0 !important; }

/* Favorite Pin Badge */
.fav-star-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    color: var(--accent);
    background: #000;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    z-index: 10;
}

/* Persona Carousel */
.persona-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.persona-card {
    flex: 0 0 75%;
    scroll-snap-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80px;
}
.persona-card:hover {
    background: rgba(255,255,255,0.1);
}
.persona-card.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 20%, transparent);
}
.persona-card-title {
    color: #fff;
    font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}
.persona-card.active .persona-card-title {
    color: var(--accent);
}
.persona-card-desc {
    color: #ccc;
    font-size: 10px;
    line-height: 1.4;
}

/* AI Text Content */
.ai-analysis-text {
    text-align: left;
    padding: 0 16px;
    line-height: 1.5;
    color: #f1f5f9;
}



/* Trail Markers */
.solia-pin-wrapper.in-trail .solia-pin { outline: 2px solid var(--accent); box-shadow: 0 0 10px var(--accent); }
.solia-pin-wrapper[data-letter]::after {
    content: attr(data-letter);
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
    color: #ffffff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.4), 0 2px 4px rgba(0,0,0,0.5);
    z-index: 10;
    pointer-events: none;
}

/* Validation Engine Styles */
.input-invalid {
    border: 1px solid var(--accent) !important;
}
.input-invalid + .validation-message {
    display: block !important;
}
.validation-message {
    display: none;
    background: #2a2d35;
    color: var(--text-main);
    font-size: 0.6875rem;
    font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--accent);
    border-radius: 0.25rem;
    margin-bottom: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    width: fit-content;
}
/* Tooltip Arrow */
.validation-message::before {
    content: '';
    position: absolute;
    top: -0.375rem;
    left: 0.9375rem;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent var(--accent) transparent;
}
.validation-message::after {
    content: '';
    position: absolute;
    top: -0.25rem;
    left: 1rem;
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #2a2d35 transparent;
}

.mapbox-ctrl-snap-location.loading {
    opacity: 0.5;
    pointer-events: none;
    animation: pulse 1s infinite alternate;
}

#btn-snap-here.loading, #btn-desktop-snap-here.loading {
    opacity: 0.5;
    pointer-events: none;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.3; }
    to { opacity: 0.8; }
}

/* =========================================================================
   CONSOLIDATED RESPONSIVE BREAKPOINTS
   ========================================================================= */

@media (max-width: 1023px) {
  .mapboxgl-ctrl-top-left {
          left: 0.625rem !important;
          right: auto !important;
          top: calc(8.75rem + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; /* Always below the telemetry header */
      }
      .mapboxgl-ctrl-bottom-left {
          left: 11.875rem !important;
      }
      .mapboxgl-ctrl-group, .time-dial-container, #zoom-readout-text, #date-readout-mobile, .mapboxgl-ctrl-compass {
          display: none !important;
      }
      #btn-reorient .mapboxgl-ctrl-compass {
          display: block !important;
          position: static !important;
          width: 100%;
          height: 100%;
          border: none !important;
          box-shadow: none !important;
          background: transparent !important;
      }
  
    #golden-timer-drawer { left: 0.625rem; top: calc(8.75rem + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); }
  
    .mobile-only { display: block; }
  
    .mapboxgl-ctrl-bottom-left {
          left: 0px !important;
          bottom: var(--footer-height, 8rem) !important;
          position: absolute !important;
      }
      .mapboxgl-ctrl-bottom-right {
          bottom: var(--footer-height, 8rem) !important;
          position: absolute !important;
      }
  
    .desktop-only { display: none !important; }
      .pc-only, #planning-panel #btn-scout.pc-only, #planning-panel #btn-explore.pc-only { display: none !important; }
  
      #telemetry-header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: auto !important;
          background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
          backdrop-filter: blur(20px) !important;
          -webkit-backdrop-filter: blur(20px) !important;
          border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
          z-index: 25000;
          transform: translateZ(0);
          pointer-events: auto;
          padding: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 0.9375rem 1.5rem 0.9375rem !important;
          box-sizing: border-box;
          text-shadow: 0 1px 2px rgba(0,0,0,0.6);
          box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.45), inset 0 1px 1px rgba(0, 0, 0, 0.15) !important;
      }
      /* Native-app-only: the default 10px buffer above is a razor-thin margin measured
         on-device as visibly overlapping the Android status bar (the WebView renders truly
         edge-to-edge there — Capacitor's SystemBars core plugin forces this on Android 15+,
         and @capacitor/status-bar's overlaysWebView is documented as unsupported on Android
         15+ without an edge-to-edge opt-out this app doesn't have — so this padding is the
         ONLY thing protecting content from the status bar). The browser has no status bar to
         clear and this header is explicitly locked there, so the extra buffer only applies
         inside the Capacitor app (html.is-native, set in index.html before first paint). */
      html.is-native #telemetry-header {
          padding-top: calc(var(--header-top-buffer) + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important;
      }
      #telemetry-header > div:not(#header-expand-indicator) {
          display: grid !important;
          grid-template-columns: max-content 1fr !important;
          grid-template-rows: 28px 14px 12px !important;
          gap: 0.125rem 0.75rem !important;
          padding: 0 !important;
          align-items: start !important;
          width: 100% !important;
      }
      #telemetry-header > div:not(#header-expand-indicator) > div {
          display: contents !important;
      }
      /* Hide empty spacer elements from grid */
      #telemetry-header > div:not(#header-expand-indicator) div:empty:not(.neon-ring-wrapper) {
          display: none !important;
      }
      /* Left Readout Card Background */
      #telemetry-header > div:not(#header-expand-indicator)::before {
          content: '' !important;
          grid-area: 1 / 1 / 4 / 2 !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border-radius: 0.625rem !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06) !important;
          z-index: 0 !important;
          height: calc(100% + 4px) !important;
          width: 100% !important;
          justify-self: start !important;
          pointer-events: none !important;
      }
      /* Right Weather Card Background (Mirrors Left Card exactly) */
      #telemetry-header > div:not(#header-expand-indicator)::after {
          content: '' !important;
          grid-area: 1 / 2 / 4 / 3 !important;
          background: rgba(255, 255, 255, 0.05) !important;
          border-radius: 0.625rem !important;
          border: 1px solid rgba(255, 255, 255, 0.12) !important;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.06) !important;
          z-index: 0 !important;
          height: calc(100% + 4px) !important;
          width: 5.5rem !important;
          justify-self: end !important;
          pointer-events: none !important;
      }
      /* Left Column (Modern Readout Style) */
      /* Grid positioning only — text styling lives on the two real children below (was
         previously a single #telemetry-date::before pseudo-element for the "Exploring:"
         caption, sharing this element's own box). A pseudo-element can't be reached by the
         i18n DOM-sweep translator (it isn't a DOM node), so it silently never translated to
         FR no matter what the dictionary said — and because the DATE-mode gradient badge
         (.dial-mode-highlight.active) was applied to this same box, the badge covered the
         caption too, making the DATE badge visibly taller than the single-line TIME one.
         Splitting the caption and the value into real sibling elements, with the badge class
         moved onto #telemetry-date-value only, fixes both at once. */
      #telemetry-date {
          grid-area: 1 / 1;
          justify-self: stretch;
          width: 100%;
          box-sizing: border-box;
          /* Vertical only — horizontal padding moved onto #telemetry-date-caption and
             #telemetry-date-value individually below. #telemetry-time-cursor-label has no
             separate wrapper: it IS the padded, badge-bearing element, so its background
             (painted on its own padding-box) spans the true full column width. Padding living
             here instead ate 24px (12px each side) off #telemetry-date-value's available width,
             since a child's width:100% resolves against ITS PARENT's content-box — already
             narrowed by this padding — not the actual column width. Moving the padding onto the
             children themselves removes that narrowing and matches the TIME element's structure
             exactly: one box, its own padding, background spans the full width regardless. */
          padding: 0.5rem 0 0.0625rem 0;
          z-index: 1;
      }
      #telemetry-date-caption {
          display: block;
          font-family: var(--font-family, sans-serif);
          font-size: 0.5rem;
          font-weight: 800;
          color: #fff;
          text-transform: uppercase;
          letter-spacing: 0.09375rem;
          margin-bottom: 0.125rem;
          text-shadow: none;
          padding: 0 0.75rem;
          box-sizing: border-box;
      }
      /* No !important needed anywhere in this rule — an ID selector already beats
         .dial-mode-highlight (a class) on specificity alone. */
      #telemetry-date-value {
          display: block;
          width: 100%;
          box-sizing: border-box;
          font-family: monospace;
          font-size: 0.75rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.03125rem;
          color: #fff;
          text-shadow: none;
          line-height: 1.1;
          /* Horizontal only, matching #telemetry-time-cursor-label's own 12px left/right inset —
             same reasoning as moving padding here from #telemetry-date above: this needs to be
             its OWN horizontal padding, on the same box the badge background paints on, not
             inherited spacing from a non-badge wrapper, for the two badges to match in width.
             Vertical stays 0 (unchanged from before) — no reason to touch row height again. */
          padding: 0 0.75rem;
          /* Margin, not padding/height — insets the visible gradient box by 1px top/bottom
             (shorter badge) and 1px on the left (closes the gap between the badge's left edge
             and the card border, matching the ~1px gap that was already there on the right).
             Margin doesn't affect the fixed row-track heights or the width:100% mechanism above,
             so this can't reintroduce either of the last two regressions. */
          margin: 0.0625rem 0 0.0625rem 0.0625rem;
      }
      #telemetry-header > div:not(#header-expand-indicator) span:has(#telemetry-time-cursor-mobile) {
          grid-area: 2 / 1 !important;
          /* stretch, not start — fills the full column-1 track width (same as #telemetry-date
             above) instead of shrink-wrapping to just this row's own text. */
          justify-self: stretch !important;
          font-size: 0 !important;
          color: transparent !important;
          padding: 0.0625rem 0.75rem !important;
          /* Matches #telemetry-date-value's margin exactly, same reasoning: 1px shorter
             top/bottom, 1px gap added on the left to match the existing gap on the right. */
          margin: 0.0625rem 0 0.0625rem 0.0625rem !important;
          z-index: 1 !important;
      }
      #telemetry-time-cursor-mobile, #telemetry-timezone-cursor-mobile {
          font-family: monospace !important;
          font-size: 0.75rem !important;
          font-weight: 700 !important;
          color: #fff !important;
          text-shadow: none !important;
          line-height: 1.1 !important;
      }
      #telemetry-timezone-cursor-mobile {
          margin-left: 0.35em !important;
      }
      #telemetry-header > div:not(#header-expand-indicator) span:has(#telemetry-time-local-mobile) {
          grid-area: 3 / 1 !important;
          justify-self: start !important;
          font-size: 0 !important;
          color: transparent !important;
          padding: 0.0625rem 0.75rem 0.5rem 0.75rem !important;
          z-index: 1 !important;
      }
      #telemetry-time-local-mobile, #telemetry-timezone-local-mobile {
          font-family: monospace !important;
          font-size: 0.625rem !important;
          font-weight: 600 !important;
          color: #888 !important;
          text-shadow: none !important;
          line-height: 1.1 !important;
      }
      #telemetry-timezone-local-mobile {
          margin-left: 0.35em !important;
      }
      /* Center Column */
      .solia-logo-container {
          position: absolute !important;
          left: 50% !important;
          top: 1.75rem !important;
          transform: translate(-50%, -50%) !important;
          font-size: 1.75rem !important;
          z-index: 100000 !important;
          margin: 0 !important;
      }
      .solia-logo-container .neon-ring-wrapper {
          transform: translateY(-0.05em) !important;
      }
      #header-expand-indicator {
          position: absolute !important;
          left: 0 !important;
          right: 0 !important;
          bottom: 0.125rem !important;
          top: auto !important;
          transform: none !important;
          z-index: 100000 !important;
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;
          text-align: center !important;
          display: block !important;
          color: var(--accent) !important;
      }
      #header-expand-indicator.open {
          transform: rotate(180deg) !important;
      }
      /* Right Column */
      #telemetry-header > div:not(#header-expand-indicator) > div:first-child > div {
          grid-area: 1 / 2 !important;
          justify-self: end !important;
          display: flex !important;
          align-items: center !important;
          z-index: 1 !important;
      }
      #mobile-weather-readout {
          grid-area: 1 / 2 / 4 / 3 !important;
          align-self: stretch !important;
          justify-self: end !important;
          width: 5.5rem !important;
          height: 100% !important;
          font-family: monospace !important;
          font-size: 0.625rem !important;
          font-weight: 700 !important;
          line-height: 1.1 !important;
          color: #fff !important;
          text-transform: uppercase !important;
          white-space: normal !important;
          word-break: break-word !important;
          display: grid !important;
          grid-template-columns: auto auto !important;
          grid-template-rows: auto auto !important;
          gap: 0 0.5rem !important;
          align-items: center !important;
          padding: 0.375rem 0.75rem !important;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
      }
      #mobile-weather-readout i {
          grid-column: 1 !important;
          grid-row: 1 / 3 !important;
          font-size: 1.25rem !important;
          color: #fff !important;
          margin: 0 !important;
          align-self: center !important;
          text-shadow: none !important;
          filter: none !important;
      }
      #mobile-weather-readout .temp-c {
          grid-column: 2 !important;
          grid-row: 1 !important;
          font-family: monospace !important;
          font-size: 0.75rem !important;
          font-weight: 700 !important;
          letter-spacing: 0 !important;
          color: #fff !important;
          line-height: 1.1 !important;
          text-align: right !important;
          justify-self: end !important;
          font-variant-numeric: tabular-nums !important;
          text-shadow: none !important;
      }
      #mobile-weather-readout .temp-f {
          grid-column: 2 !important;
          grid-row: 2 !important;
          font-family: monospace !important;
          font-size: 0.75rem !important;
          font-weight: 700 !important;
          letter-spacing: 0 !important;
          color: #fff !important;
          line-height: 1.1 !important;
          text-align: right !important;
          justify-self: end !important;
          font-variant-numeric: tabular-nums !important;
          text-shadow: none !important;
      }
      #telemetry-phase-name {
          display: none !important;
      }
      #telemetry-countdown {
          position: absolute !important;
          left: 50% !important;
          top: 3rem !important;
          transform: translateX(-50%) !important;
          text-align: center !important;
          font-family: monospace !important;
          font-size: 0.6875rem !important;
          font-weight: 700 !important;
          color: #fff !important;
          z-index: 1 !important;
          padding-top: 0.75rem !important;
          width: calc(100% - 190px) !important;
      }
      /* Native-app-only: same bug class as .solia-logo above — `top: 3rem` is a fixed offset
         tuned for the browser's small (10px) header padding-top, with no relation to the
         header's real padding-top or the safe-area inset. On native, the header's padding-top
         grows to clear the status bar (see html.is-native #telemetry-header) but this stayed
         fixed, landing the countdown ABOVE the logo instead of below it. References
         --header-top-buffer directly (rather than a precomputed constant) so retuning that one
         value keeps the header padding, the logo, and this in sync automatically. */
      html.is-native #telemetry-countdown {
          top: calc(3rem + var(--header-top-buffer) - 10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important;
      }
      /* Sun Timeline Track — fixed 20px insets (not width:100%) so the track keeps its original
         "230px-buffer" width/centering exactly, independent of #telemetry-countdown's own width
         (widened to a 190px buffer for the text — see the rule above). The parent grew 40px
         wider than it used to be; a 20px inset on each side removes exactly that 40px back out
         of the track without needing to know the header's actual pixel width. */
      #telemetry-countdown::before {
          content: '' !important;
          position: absolute !important;
          top: 0 !important;
          left: 1.25rem !important;
          right: 1.25rem !important;
          width: auto !important;
          height: 0.25rem !important;
          background: linear-gradient(90deg, transparent 0%, rgba(255, 20, 147, 0.4) 10%, #ff1493 25%, #f27121 35%, #f27121 65%, #ff1493 75%, rgba(255, 20, 147, 0.4) 90%, transparent 100%) !important;
          border-radius: 0.25rem !important;
          opacity: 0.8 !important;
      }
      /* Traveling Sun Dot — travel range confined to the same 20px-inset track above (20px to
         100%-20px, minus the dot's own 8px width so it never overhangs the track's right edge):
         20px + 40px(the two insets) + 8px(dot width) = 48px subtracted from the travel span. */
      #telemetry-countdown::after {
          content: "\f186" !important;
          font-family: "Font Awesome 6 Free" !important;
          font-weight: 900 !important;
          font-size: 0.625rem !important;
          color: #fef9c3 !important;
          text-shadow: 0 0 5px rgba(254, 249, 195, 0.6) !important;
          position: absolute !important;
          top: -0.3125rem !important;
          z-index: 2 !important;
          transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
          left: calc(1.25rem + var(--sun-position-percent, 0%) * (100% - 3rem) / 100) !important;
          background: transparent !important;
          box-shadow: none !important;
      }
      #telemetry-countdown.sun-is-circle::after {
          content: "" !important;
          width: 0.5rem !important;
          height: 0.5rem !important;
          border-radius: 50% !important;
          background: var(--sun-color, #fff) !important;
          box-shadow: 0 0 6px var(--sun-glow-color, #f59e0b), 0 0 12px var(--sun-glow-color, #f59e0b) !important;
          top: -0.125rem !important;
      }
      #tactical-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: auto; background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(20px) ; -webkit-backdrop-filter: blur(20px) ; padding: 0.9375rem 0.9375rem calc(0.9375rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); box-sizing: border-box; pointer-events: auto; z-index: 25000; border-top: 1px solid rgba(255, 255, 255, 0.32) ; display: block; text-shadow: 0 1px 2px rgba(0,0,0,0.6); box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15) ; } .footer-row-1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3125rem; }
      .footer-row-1 button { flex: 0 0 auto; width: 2.625rem; height: 2.625rem; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.125rem; }
      #btn-explore-mobile {
          margin-top: 0 !important;
          /* The icon buttons are fixed 2.625rem boxes with their icon flex-centered inside, so
             each one contributes ~0.75rem of empty space on either side of its glyph — that's
             the entire "gap" seen between adjacent icons, there's no actual margin/gap between
             the buttons themselves (.footer-row-1's `justify-content: space-between` has no
             leftover space to distribute once this button's own flex-grow:1 below absorbs it
             all). This button has no such built-in breathing room on its left edge, so it sat
             flush against the icon before it — matching that same ~0.75rem here reproduces the
             identical visual gap this row already has between every other pair of buttons. */
          margin-left: 0.75rem !important;
          height: 2.625rem !important;
          flex: 1;
          flex-grow: 1;
          font-size: 0.6875rem !important;
          font-weight: 900 !important;
          font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) !important;
          text-transform: uppercase !important;
          letter-spacing: 0.125rem !important;
          border-radius: 0.375rem !important;
          background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) !important;
          color: var(--text-btn) !important;
          box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4), 0 2px 5px rgba(0, 0, 0, 0.2) !important;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
          border: none !important;
          outline: none !important;
      }
  .menu-open .radial-item:nth-child(3) { transform: translate(0, -80px) scale(1); }
  .menu-open .radial-item:nth-child(4) { transform: translate(56px, -56px) scale(1); }
  .menu-open .radial-item:nth-child(5) { transform: translate(80px, 0) scale(1); }
  #time-dial-mobile, #date-dial-mobile { display: none !important; }
  
      #system-log { font-family: 'Consolas', monospace ; font-size: 0.75rem ; color: #ffffff ; background: rgba(0,0,0,0.25) ; margin-top: 0.5rem ; padding: 0.5rem 0.75rem ; border-radius: 0.25rem ; width: 100% ; box-sizing: border-box ; white-space: nowrap ; overflow-x: auto ; overflow-y: hidden ; -webkit-overflow-scrolling: touch ; }
  
      /* bottom mirrors top's own formula (real footer height + the same 1rem gap) instead of a
         flat 8.125rem-plus-inset constant, so the panel sits the same visual distance from the
         footer as it does from the header instead of an independently-tuned, slightly larger gap.
         --footer-height already bakes in safe-area-inset-bottom itself (#tactical-footer's own
         padding-bottom does that universally, not just on native), so no separate inset term is
         needed here — adding one would double-count it the same way the header floor just did. */
      #account-panel, #adventure-panel, #planning-panel, #trail-panel, #analysis-drawer { position: fixed; top: calc(var(--header-height, 10rem) + 1rem); bottom: calc(var(--footer-height, 8rem) + 1rem); left: 1rem; right: 1rem; width: calc(100vw - 2rem); height: auto; background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(02px) ; -webkit-backdrop-filter: blur(02px) ; z-index: 20000; border: 1px solid rgba(255, 255, 255, 0.32); padding: 0; box-sizing: border-box; transform: translateY(150vh); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; opacity: 1; visibility: visible; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
      #mobile-phases-tray { display: block ; position: fixed ; top: calc(var(--header-height, 10rem) + 0.625rem) ; left: 1rem ; right: 1rem ; width: calc(100vw - 2rem) ; background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(20px) ; -webkit-backdrop-filter: blur(20px) ; z-index: 10000 ; padding: 0.9375rem ; border: 1px solid rgba(255, 255, 255, 0.32) ; border-radius: 1rem ; box-sizing: border-box ; transform: translateY(-200%) ; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) ; box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 10px 30px rgba(0, 0, 0, 0.25) ; text-shadow: 0 1px 2px rgba(0,0,0,0.6) ; }
      #mobile-phases-tray.open { transform: translateY(0) ; }
  
      #planning-panel #project-select, .input-with-icon-mobile #project-select { display: none ; }
  
      #planning-panel .mobile-drawer-header { display: flex ; }
      #planning-panel .input-with-icon { display: flex; align-items: center; position: relative; width: 100%; height: 3.4375rem; }

      #address-search { width: 100% ; height: 100%; margin-bottom: 0 ; padding-right: 2.8125rem ; }
      #light-pool-lat { flex: 0 0 calc(50% - 2.5px) ; width: calc(50% - 2.5px) ; height: 3.4375rem ; margin-bottom: 0 ; box-sizing: border-box ; }
      #planning-panel .control-group div[style*="display: flex"] .input-with-icon { flex: 0 0 calc(50% - 2.5px) ; width: calc(50% - 2.5px) ; height: 3.4375rem ; margin-bottom: 0 ; box-sizing: border-box ; }
      #light-pool-lon { width: 100% ; height: 100% ; margin-bottom: 0 ; padding-right: 2.8125rem ; box-sizing: border-box ; }

      #snap-to-address-btn, #lock-address-btn, #lock-gps-btn { position: absolute; right: 0.9375rem; top: 0; bottom: 0; margin: auto; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--accent); pointer-events: auto; font-size: 1.125rem; transform: none; z-index: 5; cursor: pointer; }
      
      #map-container { height: 100dvh !important; }
  
      /* Make the reorient compass slot transparent, borderless, and centered */
      .mapboxgl-ctrl-group, .time-dial-container, #zoom-readout-text, #date-readout-mobile, .mapboxgl-ctrl-compass {
          display: none !important;
      }
      #btn-reorient .mapboxgl-ctrl-compass { 
          display: flex !important; 
          align-items: center !important;
          justify-content: center !important;
          position: static !important; 
          width: 100%; 
          height: 100%; 
          border-radius: 50% !important;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
      }
      #btn-reorient .mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
          display: block !important;
          width: 1.8125rem !important;
          height: 1.8125rem !important;
          background-image: none !important;
          background-color: var(--accent) !important;
          -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14.5L14.5 5l4 9.5-4-1.5-4 1.5z' fill='%23f30'/%3E%3Cpath d='M10.5 14.5L14.5 24l4-9.5-4 1.5-4-1.5z' fill='%23ccc'/%3E%3C/svg%3E") !important;
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10.5 14.5L14.5 5l4 9.5-4-1.5-4 1.5z' fill='%23f30'/%3E%3Cpath d='M10.5 14.5L14.5 24l4-9.5-4 1.5-4-1.5z' fill='%23ccc'/%3E%3C/svg%3E") !important;
          -webkit-mask-repeat: no-repeat !important;
          mask-repeat: no-repeat !important;
          -webkit-mask-position: center !important;
          mask-position: center !important;
          -webkit-mask-size: 100% 100% !important;
          mask-size: 100% 100% !important;
          filter: drop-shadow(0 0 3px rgba(242, 113, 33, 0.8)) drop-shadow(0 1px 1px rgba(0,0,0,0.5)) !important;
      }
      #map-dimmer {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 10;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
}

@media (min-width: 1024px) {
  .mapboxgl-ctrl-top-left {
          display: none !important;
      }
  
    #golden-timer-drawer { left: 20rem; top: 1.125rem; }
      #golden-timer-drawer.drawer-open { transform: translateY(86px); }
      #golden-timer-drawer .golden-timer-clock { font-size: 1rem; }
      #golden-timer-drawer .golden-timer-subtext { font-size: 0.5rem; margin-top: 0.125rem; line-height: 1.1; }
  
    .mobile-only { display: none !important; }
      #planning-panel { position: absolute; left: 0; top: 0; width: 18.75rem; height: 100%; background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(05px) ; -webkit-backdrop-filter: blur(05px) ; z-index: 2000; border-right: 1px solid rgba(255, 255, 255, 0.32) ; box-shadow: inset 0 1px 1px rgba(128, 128, 128, 0.079), inset 0 -1px 1px rgba(114, 114, 114, 0.072), 5px 0 20px rgba(139, 139, 139, 0.079); text-shadow: 5 1px 3px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; }
      #planning-panel .mobile-drawer-header { display: none ; }
      #planning-panel input, #planning-panel select { padding: 0.5rem 0.75rem; font-size: 0.75rem; margin-bottom: 0; }
      #planning-panel .control-group { display: block; margin-bottom: 0.625rem; }
      #planning-panel input[type="radio"] { display: none ; }
      #planning-panel .input-header { margin-bottom: 0.1875rem; }
      #planning-panel .input-with-icon { height: 2.25rem; position: relative; display: flex; align-items: center; width: 100%; }
      #lock-address-btn, #lock-gps-btn { position: absolute; right: 0.9375rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; color: var(--accent); z-index: 5; pointer-events: auto; }
  
      #address-search, #light-pool-lon { flex: 1; height: 100%; padding: 0.5rem 2.5rem 0.5rem 0.75rem ; font-size: 0.75rem ; padding-right: 2.5rem; box-sizing: border-box ; margin-bottom: 0 ; }
      #light-pool-lat { flex: 0 0 calc(50% - 2.5px) ; width: calc(50% - 2.5px) ; height: 2.25rem ; box-sizing: border-box ; }
      #planning-panel .control-group div[style*="display: flex"] .input-with-icon { flex: 0 0 calc(50% - 2.5px) ; width: calc(50% - 2.5px) ; height: 2.25rem ; box-sizing: border-box ; }

      #planning-panel .panel-scroll { padding-bottom: 2.5rem ; }
      #status-console { margin-bottom: 1.25rem ; }
      #status-console { background: rgba(0,0,0,0.2); border: 1px solid var(--glass); color: rgb(255, 255, 255); text-shadow: 0 1px 2px rgba(0,0,0,0.6); padding: 0.625rem; height: 5.9375rem; overflow-y: auto; box-sizing: border-box; font-family: 'Consolas', monospace; font-size: 0.625rem; border-radius: 0.375rem; }
      #hud-integrated-display { background: radial-gradient(circle at top right, rgba(255, 20, 147, 0.2) 0%, transparent 50%), radial-gradient(circle at bottom left, rgba(242, 113, 33, 0.16) 0%, transparent 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) ; backdrop-filter: blur(20px) ; -webkit-backdrop-filter: blur(20px) ; border-radius: 0.75rem; padding: 0.75rem 1.125rem 1.125rem; min-width: 17.5rem; border: 1px solid rgba(255, 255, 255, 0.32) ; box-sizing: border-box; box-shadow: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.25) ; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
      #hud-weather-header { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 16.25rem !important; margin: 0.625rem auto 0.625rem auto !important; border-bottom: none; padding-bottom: 0.625rem; color: var(--accent); box-sizing: border-box; }
      #weather-text {
          font-family: monospace !important;
          font-size: 0.625rem !important;
          font-weight: 700 !important;
          line-height: 1.1 !important;
          color: #fff !important;
          text-transform: uppercase !important;
          display: grid !important;
          grid-template-columns: auto auto !important;
          grid-template-rows: auto auto !important;
          gap: 0 0.5rem !important;
          align-items: center !important;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
      }
      #weather-text i {
          grid-column: 1 !important;
          grid-row: 1 / 3 !important;
          font-size: 1.25rem !important;
          color: #fff !important;
          margin: 0 !important;
          align-self: center !important;
          text-shadow: none !important;
          filter: none !important;
      }
      #weather-text .temp-c {
          grid-column: 2 !important;
          grid-row: 1 !important;
          font-family: monospace !important;
          font-size: 0.75rem !important;
          font-weight: 700 !important;
          letter-spacing: 0 !important;
          color: #fff !important;
          line-height: 1.1 !important;
          text-align: right !important;
          justify-self: end !important;
          font-variant-numeric: tabular-nums !important;
          text-shadow: none !important;
      }
      #weather-text .temp-f {
          grid-column: 2 !important;
          grid-row: 2 !important;
          font-family: monospace !important;
          font-size: 0.75rem !important;
          font-weight: 700 !important;
          letter-spacing: 0 !important;
          color: #fff !important;
          line-height: 1.1 !important;
          text-align: right !important;
          justify-self: end !important;
          font-variant-numeric: tabular-nums !important;
          text-shadow: none !important;
      }
      #desktop-telemetry-countdown {
          position: relative !important;
          font-size: 0.6875rem !important;
          font-weight: 700 !important;
          color: #fff !important;
          z-index: 1 !important;
          padding-top: 0.75rem !important;
          width: 100% !important;
          text-align: center !important;
          margin-top: 0.9375rem;
          margin-bottom: 0.75rem;
          box-sizing: border-box;
      }
      #desktop-telemetry-countdown::before {
          content: '' !important;
          position: absolute !important;
          top: 0 !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 100% !important;
          height: 0.25rem !important;
          background: linear-gradient(90deg, transparent 0%, rgba(255, 20, 147, 0.4) 10%, #ff1493 25%, #f27121 35%, #f27121 65%, #ff1493 75%, rgba(255, 20, 147, 0.4) 90%, transparent 100%) !important;
          border-radius: 0.25rem !important;
          opacity: 0.8 !important;
      }
      #desktop-telemetry-countdown::after {
          content: "\f186" !important;
          font-family: "Font Awesome 6 Free" !important;
          font-weight: 900 !important;
          font-size: 0.625rem !important;
          color: #fef9c3 !important;
          text-shadow: 0 0 5px rgba(254, 249, 195, 0.6) !important;
          position: absolute !important;
          top: -0.3125rem !important;
          z-index: 2 !important;
          transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease !important;
          left: calc(var(--sun-position-percent, 0%) * (100% - 8px) / 100) !important;
          background: transparent !important;
          box-shadow: none !important;
      }
      #desktop-telemetry-countdown.sun-is-circle::after {
          content: "" !important;
          width: 8px !important;
          height: 8px !important;
          border-radius: 50% !important;
          background: var(--sun-color, #fff) !important;
          box-shadow: 0 0 6px var(--sun-glow-color, #f59e0b), 0 0 12px var(--sun-glow-color, #f59e0b) !important;
          top: -0.125rem !important;
      }
      #phase-table-container { margin-bottom: 0.75rem; }
      #desktop-fader-container { width: 16.25rem !important; margin: 0 auto !important; border: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; }
      #hud-weather-header .fa-hourglass-half { display: none; }
      #telemetry-header, #mobile-phases-tray, #tactical-footer, #mobile-tools-menu { display: none ; }
      #map-dimmer { display: none !important; }
      #hud-container { position: absolute; top: 1.5625rem; right: 1.5625rem; z-index: 1500; display: flex; gap: 0.9375rem; align-items: flex-start; }
      #hud-integrated-display { transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease; }
      #hud-integrated-display.slide-off { transform: translateX(calc(100% + 50px)); opacity: 0; pointer-events: none; }
      #desktop-account-btn { display: flex ; }
      #account-panel, #adventure-panel, #trail-panel, #analysis-drawer { position: fixed; top: 0; right: -21.875rem; width: 21.875rem; height: 100%; border-left: 1px solid var(--glass); border-radius: 0; z-index: 2000; display: flex; flex-direction: column; }
      #analysis-drawer { right: -25rem; }
      #account-panel input, #account-panel select, #adventure-panel input, #adventure-panel select, #planning-panel input, #planning-panel select, #trail-panel input, #trail-panel select, #analysis-drawer input, #analysis-drawer select, .email-row { height: 2.25rem ; padding: 0 0.75rem ; font-size: 0.75rem ; box-sizing: border-box ; display: flex ; align-items: center ; line-height: normal ; }
      #account-panel .control-group, #adventure-panel .control-group, #planning-panel .control-group, #trail-panel .control-group, #analysis-drawer .control-group, .account-section { margin-bottom: 0.75rem ; }
      #btn-save-project, #btn-delete-project { width: 2.25rem ; height: 2.25rem ; }
      .accent-label, #account-panel label, #adventure-panel label, #planning-panel label, #trail-panel label, #analysis-drawer label, .account-section label { font-size: 0.6875rem ; margin-bottom: 0.375rem ; text-transform: uppercase ; letter-spacing: 0.09375rem ; font-weight: 800 ; color: #ffffff ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) ; display: block ; opacity: 1 ; }
      #account-panel button:not([id^='close-']), #adventure-panel button:not([id^='close-']):not(#btn-delete-project), #planning-panel button:not([id^='close-']):not([id^='sidebar-']), #trail-panel button:not([id^='close-']):not(.mobility-btn), #analysis-drawer button:not([id^='close-']):not(#btn-favorite-pin):not(#btn-migrate-explore), #btn-save-email, #btn-cancel-email { height: 2.25rem ; padding: 0 0.9375rem ; font-size: 0.6875rem ; margin-top: 0.5rem ; margin-bottom: 0 ; appearance: none ; -webkit-appearance: none ; width: 100% ; background: linear-gradient(135deg, #ff1493 0%, #f27121 100%) ; color: var(--text-btn) ; font-weight: 900 ; font-family: var(--font-family, 'Plus Jakarta Sans', sans-serif) ; text-transform: uppercase ; letter-spacing: 0.09375rem ; border: none ; border-radius: 0.375rem ; cursor: pointer ; display: flex ; align-items: center ; justify-content: center ; box-shadow: 0 4px 15px rgba(255, 20, 147, 0.4), 0 2px 5px rgba(0, 0, 0, 0.4) ; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) ; box-sizing: border-box ; }
      #account-panel button#btn-signout, #account-panel button#btn-close-account-burn { height: 2.25rem ; margin-top: 0.75rem ; background: transparent ; box-shadow: none ; position: relative ; }
      #account-panel button#btn-signout { border: 1px solid var(--accent) ; color: var(--accent) ; }
      #account-panel button#btn-signout:hover { background: color-mix(in srgb, var(--accent), transparent 95%) ; box-shadow: 0 0 20px color-mix(in srgb, var(--accent), transparent 70%) ; }
      .account-header { position: sticky ; top: -1.25rem ; background: var(--bg-sidebar) ; z-index: 10 ; text-align: center ; margin: -1.25rem -1.25rem 1.0625rem -1.25rem ; padding: 1.875rem 1.25rem 0.625rem 1.25rem ; display: flex ; flex-direction: column ; align-items: center ; width: calc(100% + 40px) ; box-sizing: border-box ; }
      #account-callsign-display, .account-header > div { font-size: 1.625rem ; font-weight: 800 ; letter-spacing: 0.3125rem ; text-shadow: 0 0 10px color-mix(in srgb, var(--accent), transparent 50%) ; color: var(--accent) ; text-transform: uppercase ; text-align: center ; width: 100% ; word-wrap: break-word ; line-height: 1.1 ; }
      #btn-save-email { flex: 1; background: var(--accent); color: var(--bg-deep); border: none; padding: 0.9375rem; font-weight: 900; cursor: pointer; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.0625rem; border-radius: 0.375rem; transition: all 0.3s ease; }
      #btn-save-email:hover { box-shadow: 0 0 15px color-mix(in srgb, var(--accent), transparent 50%); }
      #btn-cancel-email { flex: 1; background: transparent; color: var(--text-muted); border: 1px solid #444; padding: 0.9375rem; font-weight: 900; cursor: pointer; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.0625rem; border-radius: 0.375rem; transition: all 0.3s ease; }
      #btn-cancel-email:hover { border-color: var(--text-main); color: var(--text-main); }
      #btn-cancel-deletion:hover { text-shadow: 0 0 10px rgba(255, 68, 68, 0.4); }
      button#close-account-panel, button#close-mission-panel, button#close-planning-panel { display: block ; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 2.1875rem; background: transparent; border: none; cursor: pointer; z-index: 15001; }
    #planning-panel .panel-scroll { padding-top: 1.5625rem; }
      /* Shunted Mapbox logo to the right of the desktop sidebar */
      .mapboxgl-ctrl-bottom-left {
          left: 19.375rem !important;
          bottom: 1.875rem !important;
          position: absolute !important;
          margin: 0 !important;
      }
      .mapboxgl-ctrl-bottom-right {
          left: 18.75rem !important;
          right: auto !important;
          bottom: 0 !important;
          position: absolute !important;
      }
      .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
      .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
          margin: 0 !important;
      }
}
/* Container anchored to the map coordinate */
.aesthetic-beam-marker {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  pointer-events: none;
}
/* 1. Soft Floor Halo */
.soft-floor-glow {
  position: absolute;
  bottom: -0.375rem;
  left: 50%;
  transform: translateX(-50%);
  width: 3.125rem;
  height: 1.125rem;
  background: radial-gradient(ellipse at center, rgba(255, 165, 0, 0.85) 0%, rgba(255, 215, 0, 0.2) 60%, transparent 80%);
  border-radius: 50%;
  animation: pulse-floor 3s ease-in-out infinite alternate;
  z-index: 1;
}
/* 2. Pearlescent Core Dot */
.core-dot {
  position: absolute;
  bottom: -0.125rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background: #ffffff;
  border: 2px solid #ff9f00;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 165, 0, 0.9), 0 0 24px rgba(255, 215, 0, 0.6);
  z-index: 3;
}
/* 3. The Diffused Light Column */
.light-column {
  position: absolute;
  bottom: 0.375rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 6.875rem;
  background: linear-gradient(to top, rgba(255, 140, 0, 0.65) 0%, rgba(255, 215, 0, 0.25) 50%, transparent 100%);
  border-radius: 50% 50% 0 0 / 20% 20% 0 0;
  filter: blur(3px);
  animation: gentle-pulse 3s ease-in-out infinite alternate;
  z-index: 2;
  mix-blend-mode: screen;
}
/* 4. Floating Particles (Dust Motes) inside the beam */
.particle {
  --x-offset: 0px;
  position: absolute;
  bottom: 0.625rem;
  left: 50%;
  width: 0.1875rem;
  height: 0.1875rem;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffaa00;
  animation: float-up 2.5s ease-in-out infinite;
  opacity: 0;
  z-index: 4;
}
/* Staggered positions, sizes, speeds and timings */
.particle:nth-child(4) { --x-offset: 3px; animation-delay: 0.4s; width: 0.09375rem; height: 0.09375rem; animation-duration: 3s; }
.particle:nth-child(5) { --x-offset: -7px; animation-delay: 1.2s; width: 0.125rem; height: 0.125rem; animation-duration: 2.3s; }
.particle:nth-child(6) { --x-offset: 8px; animation-delay: 2s; width: 0.09375rem; height: 0.09375rem; animation-duration: 2.8s; }
/* Keyframe Animations */
@keyframes gentle-pulse {
  0% { transform: translateX(-50%) scaleY(0.95); opacity: 0.6; }
  100% { transform: translateX(-50%) scaleY(1.05); opacity: 0.95; }
}
@keyframes pulse-floor {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
  100% { transform: translateX(-50%) scale(1.15); opacity: 0.9; }
}
@keyframes float-up {
  0% { transform: translate(calc(-50% + var(--x-offset)), 0) scale(0.5); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x-offset)), -85px) scale(1.2); opacity: 0; }
}
[data-theme='dark'] #account-panel,
[data-theme='dark'] #adventure-panel,
[data-theme='dark'] #planning-panel,
[data-theme='dark'] #trail-panel,
[data-theme='dark'] #analysis-drawer,
[data-theme='dark'] #hud-integrated-display,
[data-theme='dark'] #telemetry-header,
[data-theme='dark'] #tactical-footer,
[data-theme='dark'] #mobile-phases-tray {
    background: rgba(15, 17, 21, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}
[data-theme='dark'] #purge-modal > div,
[data-theme='dark'] #init-project-modal > div,
[data-theme='dark'] #auth-gate > div,
[data-theme='dark'] .modal-card-themed {
    background: var(--bg-sidebar) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 0 30px rgba(0,0,0,0.7) !important;
}.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.mapboxgl-canvas{position:absolute;left:0;top:0}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom,.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-left,.mapboxgl-ctrl-right,.mapboxgl-ctrl-top,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.mapboxgl-ctrl-top-left{top:0;left:0}.mapboxgl-ctrl-top{top:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-top-right{top:0;right:0}.mapboxgl-ctrl-right{top:50%;transform:translateY(-50%);right:0}.mapboxgl-ctrl-bottom-right{right:0;bottom:0}.mapboxgl-ctrl-bottom{bottom:0;left:50%;transform:translateX(-50%)}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-left{top:50%;transform:translateY(-50%);left:0}.mapboxgl-ctrl{clear:both;pointer-events:auto}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}.mapboxgl-ctrl-top .mapboxgl-ctrl{margin:10px 0;float:left}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,.mapboxgl-ctrl-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}.mapboxgl-ctrl-bottom .mapboxgl-ctrl{margin:10px 0;float:left}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,.mapboxgl-ctrl-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}.mapboxgl-ctrl-group{border-radius:4px;background:#fff}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px #0000001a}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{width:32px;height:32px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:initial;cursor:pointer;overflow:hidden}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:initial}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl-group button:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:only-child{border-radius:inherit}.mapboxgl-ctrl button:not(:disabled):hover{background-color:#eee}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10%2013c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h9c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-9z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M14.5%208.5c-.75%200-1.5.75-1.5%201.5v3h-3c-.75%200-1.5.75-1.5%201.5S9.25%2016%2010%2016h3v3c0%20.75.75%201.5%201.5%201.5S16%2019.75%2016%2019v-3h3c.75%200%201.5-.75%201.5-1.5S19.75%2013%2019%2013h-3v-3c0-.75-.75-1.5-1.5-1.5z%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M24%2016v5.5c0%201.75-.75%202.5-2.5%202.5H16v-1l3-1.5-4-5.5%201-1%205.5%204%201.5-3h1zM6%2016l1.5%203%205.5-4%201%201-4%205.5%203%201.5v1H7.5C5.75%2024%205%2023.25%205%2021.5V16h1zm7-11v1l-3%201.5%204%205.5-1%201-5.5-4L6%2013H5V7.5C5%205.75%205.75%205%207.5%205H13zm11%202.5c0-1.75-.75-2.5-2.5-2.5H16v1l3%201.5-4%205.5%201%201%205.5-4%201.5%203h1V7.5z%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M18.5%2016c-1.75%200-2.5.75-2.5%202.5V24h1l1.5-3%205.5%204%201-1-4-5.5%203-1.5v-1h-5.5zM13%2018.5c0-1.75-.75-2.5-2.5-2.5H5v1l3%201.5L4%2024l1%201%205.5-4%201.5%203h1v-5.5zm3-8c0%201.75.75%202.5%202.5%202.5H24v-1l-3-1.5L25%205l-1-1-5.5%204L17%205h-1v5.5zM10.5%2013c1.75%200%202.5-.75%202.5-2.5V5h-1l-1.5%203L5%204%204%205l4%205.5L5%2012v1h5.5z%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2029%2029%22%3E%3Cpath%20d%3D%22M10.5%2014l4-8%204%208h-8z%22%2F%3E%3Cpath%20id%3D%22south%22%20d%3D%22M10.5%2016l4%208%204-8h-8z%22%20fill%3D%22%23ccc%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-up .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.29289%2011.7071C4.68342%2012.0976%205.31658%2012.0976%205.70711%2011.7071L9%208.41421L12.2929%2011.7071C12.6834%2012.0976%2013.3166%2012.0976%2013.7071%2011.7071C14.0976%2011.3166%2014.0976%2010.6834%2013.7071%2010.2929L9.70711%206.29289C9.31658%205.90237%208.68342%205.90237%208.29289%206.29289L4.29289%2010.2929C3.90237%2010.6834%203.90237%2011.3166%204.29289%2011.7071Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-arrow-down .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.29289%206.29289C4.68342%205.90237%205.31658%205.90237%205.70711%206.29289L9%209.58579L12.2929%206.29289C12.6834%205.90237%2013.3166%205.90237%2013.7071%206.29289C14.0976%206.68342%2014.0976%207.31658%2013.7071%207.70711L9.70711%2011.7071C9.31658%2012.0976%208.68342%2012.0976%208.29289%2011.7071L4.29289%207.70711C3.90237%207.31658%203.90237%206.68342%204.29289%206.29289Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23333%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E");background-size:18px 18px}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-indoor-toggle .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M4.0017%203.0017L4.0017%2015.0017L10.0017%2015.0017V12.0017H12.0017V15.0017H14.0017L14.0017%203.0017C14.0097%202.86829%2013.9894%202.73469%2013.9419%202.60973C13.8945%202.48477%2013.8211%202.37129%2013.7266%202.27678C13.6321%202.18228%2013.5186%202.10889%2013.3937%202.06147C13.2687%202.01405%2013.1351%201.99368%2013.0017%202.0017L5.0017%202.0017C4.86829%201.99368%204.73469%202.01405%204.60973%202.06147C4.48477%202.10889%204.37129%202.18228%204.27678%202.27678C4.18228%202.37129%204.10889%202.48477%204.06147%202.60973C4.01405%202.73469%203.99368%202.86829%204.0017%203.0017ZM8.0017%2014.0017H6.0017V12.0017H8.0017V14.0017ZM8.0017%2010.0017H6.0017L6.0017%208.0017H8.0017V10.0017ZM8.0017%206.0017L6.0017%206.0017V4.0017H8.0017V6.0017ZM12.0017%2010.0017H10.0017V8.0017H12.0017V10.0017ZM12.0017%206.0017H10.0017V4.0017L12.0017%204.0017V6.0017Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23aaa%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e58978%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e54e33%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23999%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e58978%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%2333b5e5%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23e54e33%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%20display%3D%22none%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20display%3D%22none%22%2F%3E%3C%2Fsvg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23666%22%3E%3Cpath%20d%3D%22M10%204C9%204%209%205%209%205v.1A5%205%200%200%200%205.1%209H5s-1%200-1%201%201%201%201%201h.1A5%205%200%200%200%209%2014.9v.1s0%201%201%201%201-1%201-1v-.1a5%205%200%200%200%203.9-3.9h.1s1%200%201-1-1-1-1-1h-.1A5%205%200%200%200%2011%205.1V5s0-1-1-1zm0%202.5a3.5%203.5%200%201%201%200%207%203.5%203.5%200%201%201%200-7z%22%2F%3E%3Ccircle%20id%3D%22dot%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20id%3D%22stroke%22%20d%3D%22M14%205l1%201-9%209-1-1%209-9z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%220.3%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%220.9%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:initial;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%221%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%221%22%20fill%3D%22%23fff%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20fill-rule%3D%22evenodd%22%20viewBox%3D%220%200%2088%2023%22%3E%3Cdefs%3E%3Cpath%20id%3D%22logo%22%20d%3D%22M11.5%202.25c5.105%200%209.25%204.145%209.25%209.25s-4.145%209.25-9.25%209.25-9.25-4.145-9.25-9.25%204.145-9.25%209.25-9.25zM6.997%2015.983c-.051-.338-.828-5.802%202.233-8.873a4.395%204.395%200%20013.13-1.28c1.27%200%202.49.51%203.39%201.42.91.9%201.42%202.12%201.42%203.39%200%201.18-.449%202.301-1.28%203.13C12.72%2016.93%207%2016%207%2016l-.003-.017zM15.3%2010.5l-2%20.8-.8%202-.8-2-2-.8%202-.8.8-2%20.8%202%202%20.8z%22%2F%3E%3Cpath%20id%3D%22text%22%20d%3D%22M50.63%208c.13%200%20.23.1.23.23V9c.7-.76%201.7-1.18%202.73-1.18%202.17%200%203.95%201.85%203.95%204.17s-1.77%204.19-3.94%204.19c-1.04%200-2.03-.43-2.74-1.18v3.77c0%20.13-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01%200%20.01%200%20.01-.01.13%200%20.22.1.22.22v7.55c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V15c-.7.76-1.69%201.19-2.73%201.19-2.17%200-3.94-1.87-3.94-4.19%200-2.32%201.77-4.19%203.94-4.19%201.03%200%202.02.43%202.73%201.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24%204.24%200%2000-4.16%203.29c-.13.59-.13%201.19%200%201.77a4.233%204.233%200%20004.17%203.3c2.35%200%204.26-1.87%204.26-4.19%200-2.32-1.9-4.17-4.27-4.17zM60.63%205c.13%200%20.23.1.23.23v3.76c.7-.76%201.7-1.18%202.73-1.18%201.88%200%203.45%201.4%203.84%203.28.13.59.13%201.2%200%201.8-.39%201.88-1.96%203.29-3.84%203.29-1.03%200-2.02-.43-2.73-1.18v.77c0%20.12-.1.23-.23.23h-1.4c-.13%200-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34%2011h-1.4c-.13%200-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13%200%20.22.11.23.22v.68c.5-.68%201.3-1.09%202.16-1.1h.03c1.09%200%202.09.6%202.6%201.55.45-.95%201.4-1.55%202.44-1.56%201.62%200%202.93%201.25%202.9%202.78l.03%205.2c0%20.13-.1.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8%200-1.46.7-1.59%201.62l.01%204.68c0%20.13-.11.23-.23.23h-1.41c-.13%200-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85%200-1.54.79-1.6%201.8v4.5c0%20.13-.1.23-.23.23zm53.615%200h-1.61c-.04%200-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213%200%2001-.03-.12c0-.12.09-.21.21-.21h1.61c.13%200%20.24.06.3.17l1.41%202.37%201.4-2.37a.34.34%200%2001.3-.17h1.6c.04%200%20.08.01.12.03.09.06.13.19.06.28l-2.37%203.65%202.43%203.7c0%20.05.01.09.01.13%200%20.12-.09.21-.21.21h-1.61c-.13%200-.24-.06-.3-.17l-1.44-2.42-1.44%202.42a.34.34%200%2001-.3.17zm-7.12-1.49c-1.33%200-2.42-1.12-2.42-2.51%200-1.39%201.08-2.52%202.42-2.52%201.33%200%202.42%201.12%202.42%202.51%200%201.39-1.08%202.51-2.42%202.52zm-19.865%200c-1.32%200-2.39-1.11-2.42-2.48v-.07c.02-1.38%201.09-2.49%202.4-2.49%201.32%200%202.41%201.12%202.41%202.51%200%201.39-1.07%202.52-2.39%202.53zm-8.11-2.48c-.01%201.37-1.09%202.47-2.41%202.47s-2.42-1.12-2.42-2.51c0-1.39%201.08-2.52%202.4-2.52%201.33%200%202.39%201.11%202.41%202.48l.02.08zm18.12%202.47c-1.32%200-2.39-1.11-2.41-2.48v-.06c.02-1.38%201.09-2.48%202.41-2.48s2.42%201.12%202.42%202.51c0%201.39-1.09%202.51-2.42%202.51z%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22clip%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22white%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fmask%3E%3Cg%20id%3D%22outline%22%20opacity%3D%221%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20fill%3D%22%23fff%22%3E%3Ccircle%20mask%3D%22url(%23clip)%22%20cx%3D%2211.5%22%20cy%3D%2211.5%22%20r%3D%229.25%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%20mask%3D%22url(%23clip)%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22fill%22%20opacity%3D%221%22%20fill%3D%22%23000%22%3E%3Cuse%20xlink%3Ahref%3D%22%23logo%22%2F%3E%3Cuse%20xlink%3Ahref%3D%22%23text%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:#ffffff80;margin:0}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px;box-sizing:initial}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left)>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E");background-color:#ffffff80;width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}:is(.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-left,.mapboxgl-ctrl-top-left) .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:#0000000d}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}.mapboxgl-ctrl-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%20fill%3D%22%23fff%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4%2010a6%206%200%201%200%2012%200%206%206%200%201%200-12%200m5-3a1%201%200%201%200%202%200%201%201%200%201%200-2%200m0%203a1%201%200%201%201%202%200v3a1%201%200%201%201-2%200%22%2F%3E%3C%2Fsvg%3E")}}.mapboxgl-ctrl-attrib a{color:#000000bf;text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:#ffffffbf;font-size:10px;border-color:#333;border-style:none solid solid;border-width:medium 2px 2px;padding:0 5px;color:#333;box-sizing:border-box;white-space:nowrap}.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{width:0;height:0;border:10px solid #0000;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:initial}.mapboxgl-popup-close-button:hover{background-color:#eee}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px #0000001a;padding:10px 10px 15px;pointer-events:auto}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform;opacity:1;transition:opacity .2s}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.mapboxgl-user-location-dot:before{content:"";position:absolute;animation:mapboxgl-user-location-dot-pulse 2s infinite}.mapboxgl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px #00000059}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading{width:0;height:0}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after,.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{content:"";border-bottom:7.5px solid #4aa1eb;position:absolute}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:before{border-left:7.5px solid #0000;transform:translateY(-28px) skewY(-20deg)}.mapboxgl-user-location-show-heading .mapboxgl-user-location-heading:after{border-right:7.5px solid #0000;transform:translate(7.5px,-28px) skewY(20deg)}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:#1da1f233;width:1px;height:1px;border-radius:100%}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}@media print{.mapbox-improve-map{display:none}}.mapboxgl-scroll-zoom-blocker,.mapboxgl-touch-pan-blocker{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;justify-content:center;text-align:center;position:absolute;display:flex;align-items:center;top:0;left:0;width:100%;height:100%;background:#000000b3;opacity:0;pointer-events:none;transition:opacity .75s ease-in-out;transition-delay:1s}.mapboxgl-scroll-zoom-blocker-show,.mapboxgl-touch-pan-blocker-show{opacity:1;transition:opacity .1s ease-in-out}.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page,.mapboxgl-canvas-container.mapboxgl-touch-pan-blocker-override.mapboxgl-scrollable-page .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button{font-weight:600;font-size:14px;text-align:center}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected{background-color:#bccbd7;color:#000}.mapboxgl-ctrl button.mapboxgl-ctrl-level-button-selected:hover{background-color:#ccc}