:root {
    --font: "Josefin Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text: #202322;
    --accent-bright: #9525d1;
    --text-soft: #272c29;
    --text-muted: #727974;
    --surface: rgb(255 255 252 / 94%);
    --panel-surface: rgb(255 255 252 / 76%);
    --border: rgb(25 34 29 / 14%);
    --shadow: 0 0.35rem 1.4rem rgb(19 27 23 / 16%);

    --radius: 0;
    --blur: blur(0.45rem);
    --panel-blur: blur(0.8rem) saturate(115%);
    --motion-duration: 240ms;
    --motion-ease: cubic-bezier(.22, .61, .36, 1);

    --space-xs: 0.35rem;
    --space-sm: 0.55rem;
    --space-md: 0.9rem;
    --space-lg: 1.2rem;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.55rem;

    /* floating ui layout, the panel and zoom control position off these */
    --gutter: 1rem;
    --gutter-bottom: 2.5rem;
    --panel-width: min(24rem, calc(100vw - 2 * var(--gutter)));
}

@media (max-width: 600px) {
    :root {
        --gutter: 0.75rem;
        --gutter-bottom: 0;
        --panel-width: 100vw;
        --text-xl: 1.35rem;
    }
}

* {
    box-sizing: border-box;
}

html,
body,
.app,
#map {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family: var(--font);
    font-synthesis: none;
}

/* keep both translations together, the class on html decides which one shows */
html.lang-en .es,
html.lang-es .en {
    display: none !important;
}

.app {
    position: relative;
    overflow: hidden;
}

#map {
    position: absolute;
    inset: 0;
}

/* bottom-left column of floating tools, search on top of legend */
.panel {
    position: absolute;
    z-index: 2;
    bottom: var(--gutter-bottom);
    left: var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-sm);
    width: var(--panel-width);
    height: calc(100vh - var(--gutter) - var(--gutter-bottom));
    min-height: 0;
    pointer-events: none;
}

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

.panel:not(.has-open-side-panel) {
    justify-content: flex-start;
}

/* filters fill the open sidebar, legend stays in its own box below */
.panel > #side-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.panel > #legend {
    flex: 0 0 auto;
}

.panel :focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

/* floating box used for the legend and any future panels */
.hoverBox {
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-surface);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
}

/* make Mapbox controls match our floating boxes */
.mapboxgl-map {
    font-family: var(--font);
}

/* match Mapbox's :not(:empty) selector or its grey outline wins */
.mapboxgl-ctrl-group,
.mapboxgl-ctrl-group:not(:empty) {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: var(--blur);
}

.mapboxgl-ctrl-group button,
.mapboxgl-ctrl-group button:first-child,
.mapboxgl-ctrl-group button:last-child,
.mapboxgl-ctrl-group button:only-child {
    border-radius: var(--radius);
}

.mapboxgl-ctrl-group button + button {
    border-top: 1px solid var(--border);
}

.mapboxgl-ctrl-group button:focus,
.mapboxgl-ctrl-group button:focus:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent-bright);
}

.map-home-control i {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    font-size: 1.35rem;
}

.mapboxgl-ctrl.mapboxgl-ctrl-attrib,
.mapboxgl-ctrl-attrib.mapboxgl-compact,
.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.mapboxgl-ctrl-attrib a {
    color: var(--text-soft);
}

/* keep zoom and language beside the open sidebar */
.mapboxgl-ctrl-top-left {
    top: auto;
    right: auto;
    bottom: var(--gutter-bottom);
    left: calc(var(--gutter) + var(--panel-width) + var(--space-sm));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
}

@media (min-width: 601px) {
    .mapboxgl-ctrl-top-left {
        transition: left var(--motion-duration) var(--motion-ease);
    }

    .app.is-collapsing-side-panel .mapboxgl-ctrl-top-left {
        left: var(--gutter);
    }
}

/* when the sidebar hides, pull zoom and language to the left edge */
.app:not(.has-open-side-panel) .mapboxgl-ctrl-top-left {
    left: var(--gutter);
}

.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
    float: none;
    margin: 0;
}

/* one language button w/ both choices always visible */
.mapboxgl-ctrl-group .language-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 9.5rem;
    height: 2rem;
    padding: 0;
    overflow: hidden;
    color: var(--text);
    background: transparent;
    font: 600 var(--text-xs)/1 var(--font);
    cursor: pointer;
}

.language-option {
    display: grid;
    height: 100%;
    padding: 0 .55rem;
    place-items: center;
    background: transparent;
    transition: color var(--motion-duration) var(--motion-ease), background var(--motion-duration) var(--motion-ease);
}

/* clicks can animate state changes, but pointer feedback should stay immediate */
.mapboxgl-ctrl-group button,
.mapboxgl-popup-close-button {
    transition: none;
}

.language-option + .language-option {
    border-left: 1px solid var(--border);
}

html.lang-en .language-option-en,
html.lang-es .language-option-es {
    color: white;
    background: var(--accent-bright);
}

@media (max-width: 600px) {
    .app {
        --mobile-viewport-height: 100dvh;
        --mobile-viewport-bottom-offset: 0px;
        --mobile-sheet-height: min(max(calc(var(--mobile-viewport-height) * .5), 20rem), calc(var(--mobile-viewport-height) - 7rem));
    }

    .app:has(.panel[data-mobile-sheet-state="peek"]) {
        --mobile-sheet-height: min(calc(4.5rem + env(safe-area-inset-bottom)), calc(var(--mobile-viewport-height) - 3.5rem));
    }

    .app:has(.panel[data-mobile-sheet-state="expanded"]) {
        --mobile-sheet-height: min(calc(var(--mobile-viewport-height) * .88), calc(var(--mobile-viewport-height) - 7rem));
    }

    .panel,
    .panel:not(.has-open-side-panel) {
        position: absolute;
        z-index: 3;
        inset: auto 0 var(--mobile-viewport-bottom-offset);
        justify-content: flex-end;
        gap: 0;
        width: 100%;
        height: var(--mobile-sheet-height);
        min-height: 0;
        max-height: none;
        padding: 0;
        transition: height var(--motion-duration) var(--motion-ease);
    }

    .panel > #side-panel {
        flex: 1 1 auto;
        min-height: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 1.125rem 1.125rem 0 0;
        background: rgb(255 255 252 / 84%);
        box-shadow: 0 -.4rem 1.5rem rgb(19 27 23 / 15%);
    }

    .panel.is-dragging {
        height: var(--mobile-sheet-drag-height) !important;
        transition: none;
    }

    .panel > #legend,
    .panel > #side-panel-toggle {
        display: none !important;
    }

    .mapboxgl-ctrl-top-left,
    .app:not(.has-open-side-panel) .mapboxgl-ctrl-top-left {
        top: calc(var(--gutter) + env(safe-area-inset-top));
        right: calc(var(--gutter) + env(safe-area-inset-right));
        bottom: auto;
        left: auto;
        align-items: flex-end;
    }

    .language-control {
        display: none !important;
    }

    .app:has(.panel[data-mobile-sheet-state="expanded"]) .mapboxgl-ctrl-top-left,
    #map:has(.mapboxgl-popup) .mapboxgl-ctrl-top-left {
        display: none;
    }

    .mapboxgl-ctrl-bottom-left,
    .mapboxgl-ctrl-bottom-right {
        bottom: calc(var(--mobile-viewport-bottom-offset) + var(--mobile-sheet-live-height, var(--mobile-sheet-height)) + .45rem);
        transition: bottom var(--motion-duration) var(--motion-ease);
    }

    .mapboxgl-ctrl-bottom-left {
        left: calc(var(--gutter) + env(safe-area-inset-left));
    }

    .mapboxgl-ctrl-bottom-right {
        right: calc(var(--gutter) + env(safe-area-inset-right));
    }

    .app:has(.panel.is-dragging) .mapboxgl-ctrl-bottom-left,
    .app:has(.panel.is-dragging) .mapboxgl-ctrl-bottom-right {
        transition: none;
    }
}

@media (max-width: 600px) {
    .app.is-short-visual-viewport:has(.panel[data-mobile-sheet-state="expanded"]) {
        --mobile-sheet-height: calc(var(--mobile-viewport-height) - 2.25rem);
    }
}

@media (min-width: 601px) and (max-height: 500px) {
    .panel {
        height: calc(100vh - var(--gutter) - var(--gutter-bottom));
        max-height: calc(100vh - var(--gutter) - var(--gutter-bottom));
    }

    /* limit legend height on short screens so filters still have room */
    .panel > #legend {
        max-height: clamp(8rem, calc(100vh - 21rem), 16rem);
        overflow: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration: 0ms;
        --motion-ease: linear;
    }

    .panel-toggle,
    .mapboxgl-popup-content {
        animation: none !important;
    }
}