/* ---------------------------------------------------------------------------
   Vind — layout for a map-first, mobile-first tool.

   The primary device is a phone, standing outside, deciding whether to drive
   out. So the map fills the screen, the verdict is readable without zooming,
   and the time slider sits where a thumb reaches.
   --------------------------------------------------------------------------- */

:root {
    --vind-panel-width: 21rem;
    --vind-slider-height: 6.5rem;
    --vind-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.vind-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

.vind-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    position: relative;
}

/* --- Location panel ------------------------------------------------------ */

.vind-panel {
    width: var(--vind-panel-width);
    flex: 0 0 var(--vind-panel-width);
    border-right: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.vind-panel-backdrop { display: none; }

/* --- Map ----------------------------------------------------------------- */

.vind-map-wrap {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

.vind-map {
    position: absolute;
    inset: 0;
    background: var(--tblr-bg-surface-secondary);
}

/* Leaflet defaults to a light attribution box that looks broken on a dark map. */
.leaflet-container {
    background: #20252b;
    font: inherit;
}

/* OSM only ships light tiles, and a glaring white map is the wrong thing to hand someone
   sitting in a car at night. Dimming rather than inverting keeps forest green and water blue,
   which matters when you are reading terrain. The plume is drawn in the overlay pane, so it
   is unaffected and reads more clearly against the darker ground. */
.leaflet-tile-pane {
    filter: brightness(.62) saturate(.85) contrast(1.08);
}

/* Aerial imagery is already dark and needs its detail intact — dimming it would defeat the
   point of using 12.5 cm orthophoto to read stand edges. */
.vind-map-aerial .leaflet-tile-pane {
    filter: none;
}

/* --- Address search ------------------------------------------------------ */

.vind-search {
    position: relative;
}

.vind-search-clear {
    left: auto;
    right: 0;
    pointer-events: auto;
    cursor: pointer;
}

.vind-search-results {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 60dvh;
    overflow-y: auto;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .5);
}

.vind-marker-search {
    background: #3b2f52;
    border-color: rgba(229, 153, 247, .9);
}

/* Controls sit bottom-right, above the time slider. */
.leaflet-bottom.leaflet-right {
    margin-bottom: .25rem;
}

.leaflet-control-zoom a,
.leaflet-control-layers-toggle {
    background-color: #2b3138 !important;
    color: #e6e9ec !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

.leaflet-control-zoom a:hover { background-color: #3a424b !important; }

.leaflet-control-layers-expanded {
    background: #2b3138 !important;
    color: #e6e9ec !important;
    border-color: rgba(255, 255, 255, .14) !important;
}

/* Bigger zoom targets: this is operated with a thumb, sometimes in a glove. */
.leaflet-touch .leaflet-control-zoom a {
    width: 2.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
}

.leaflet-control-attribution {
    background: rgba(24, 28, 33, .82) !important;
    color: var(--tblr-secondary) !important;
    font-size: .625rem;
    max-width: 60vw;
}

.leaflet-control-attribution a { color: var(--tblr-primary) !important; }

/* Markers: a plain emoji-in-a-ring reads instantly and needs no sprite sheet. */
.vind-marker {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: 1.05rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    background: #2b3138;
}

.vind-marker-tower { background: #1f3a52; }
.vind-marker-bait { background: #4a3520; }

/* The animated wind field. Sits above the tiles, below the plume — see windmap.js.
   Drawn normally rather than with mix-blend-mode: screen, because screen blending cancels the
   dark glow the streaks need to stay visible over bright satellite imagery. */
.vind-wind-canvas {
    opacity: .9;
    transition: opacity .12s linear;
}

@media (prefers-reduced-motion: reduce) {
    .vind-wind-canvas { display: none; }
}

/* --- Verdict badge ------------------------------------------------------- */

/* Constrained rather than full-width: an info bar stretched across a 1440 px map is both
   hard to read and in the way of the map itself. */
.vind-verdict {
    position: absolute;
    top: .5rem;
    left: .5rem;
    right: .5rem;
    max-width: 42rem;
    z-index: 500;
    pointer-events: none;
}

.vind-verdict > .card {
    pointer-events: auto;
    background: rgba(24, 28, 33, .93);
    backdrop-filter: blur(6px);
    border-width: 0;
    border-left: 4px solid var(--tblr-border-color);
}

.vind-verdict-headline {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
}

.vind-reading {
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}

.vind-reading-unit {
    font-size: .8rem;
    font-weight: 400;
    color: var(--tblr-secondary);
}

/* --- Time slider -------------------------------------------------------- */

.vind-slider {
    flex: 0 0 auto;
    border-top: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface);
    padding: .6rem .75rem calc(.6rem + var(--vind-safe-bottom));
}

/* --- Time slider track, with day/night guides ---------------------------- */

/* The guides sit behind a transparent range input so the thumb still works
   normally. Everything is positioned by sample index, not by clock time,
   because the forecast steps are deliberately uneven. */
.vind-track {
    position: relative;
    height: 2.75rem;
}

.vind-track > .vind-range {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 2.75rem;
    margin: 0;
    background: transparent;
    accent-color: var(--tblr-primary);
}

/* Hours after dark: the window this app is actually for.

   Deliberately NOT blue. The browser paints the filled part of a range input in the accent
   colour, and the "now" marker is the accent colour too, so a blue night band made three
   different things the same colour and none of them legible. Indigo with an outline reads as
   its own thing. */
.vind-night-band {
    position: absolute;
    top: 50%;
    height: 1.15rem;
    transform: translateY(-50%);
    background: rgba(92, 79, 168, .38);
    border-top: 1px solid rgba(150, 138, 220, .55);
    border-bottom: 1px solid rgba(150, 138, 220, .55);
    border-radius: .15rem;
    pointer-events: none;
    z-index: 1;
}

/* --- Slider legend ------------------------------------------------------- */

.vind-legend {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: .68rem;
    color: var(--tblr-secondary);
}

.vind-legend-night,
.vind-legend-now,
.vind-legend-day {
    display: inline-block;
    vertical-align: -2px;
    margin-right: .25rem;
}

.vind-legend-night {
    width: .9rem;
    height: .7rem;
    background: rgba(92, 79, 168, .38);
    border-top: 1px solid rgba(150, 138, 220, .55);
    border-bottom: 1px solid rgba(150, 138, 220, .55);
    border-radius: .15rem;
}

.vind-legend-now {
    width: 2px;
    height: .8rem;
    background: var(--tblr-primary);
    box-shadow: 0 0 4px var(--tblr-primary);
}

.vind-legend-day {
    width: 2px;
    height: .8rem;
    background: var(--tblr-secondary);
    opacity: .65;
}

.vind-tick {
    position: absolute;
    top: 50%;
    width: 1px;
    height: .55rem;
    transform: translateY(-50%);
    background: var(--tblr-border-color);
    pointer-events: none;
    z-index: 2;
}

/* Midnight gets a full-height tick so days are countable at a glance. */
.vind-tick.is-day {
    height: 1.5rem;
    width: 2px;
    background: var(--tblr-secondary);
    opacity: .65;
}

.vind-now {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 1.7rem;
    transform: translateY(-50%);
    background: var(--tblr-primary);
    box-shadow: 0 0 4px var(--tblr-primary);
    pointer-events: none;
    z-index: 2;
}

.vind-tick-labels {
    position: relative;
    height: .9rem;
}

.vind-tick-label {
    position: absolute;
    transform: translateX(-50%);
    font-size: .65rem;
    color: var(--tblr-secondary);
    white-space: nowrap;
}

.vind-step-btn {
    min-width: 3.25rem;
    min-height: 2.75rem;
}

.vind-legend-swatch {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    border-radius: .2rem;
    vertical-align: -1px;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .vind-panel {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        width: min(88vw, var(--vind-panel-width));
        flex-basis: auto;
        box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
    }

    .vind-panel.is-open { transform: translateX(0); }

    .vind-panel-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1030;
        background: rgba(0, 0, 0, .5);
    }

    .vind-verdict-headline { font-size: 1.5rem; }

    /* The card must not eat the map. Warnings and the full explanation are one tap away. */
    .vind-verdict > .card {
        max-height: 58dvh;
        overflow-y: auto;
    }

    .vind-warnings:not(.is-open) { display: none !important; }

    .vind-explanation:not(.is-open) {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (min-width: 576px) {
    /* Never clamped or hidden on a larger screen — there is room for the whole thing.
       Warnings keep flex so the column gap still applies. */
    .vind-warnings { display: flex !important; }
    .vind-explanation { display: block !important; }
}

@media (min-width: 768px) {
    .vind-panel-toggle { display: none; }
}

/* Google's logo, mandatory while Google tiles are displayed. Kept clear of other logos, as
   the Map Tiles API Policies require. */
.vind-google-logo {
    margin: 0 0 .25rem .5rem;
    padding: 2px 5px;
    background: rgba(0, 0, 0, .45);
    border-radius: .2rem;
    line-height: 0;
    pointer-events: none;
}