@import url('https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.2/dist/maplibre-gl.css');
.fpv-workspace { position: relative; height: calc(100dvh - var(--header-h) - var(--app-toolbar-h) - var(--sf-toolbar-h)); min-height: 0; overflow: hidden; }
.fpv-workspace { margin: 0; }
main:has(.fpv-workspace) { margin: 0; padding: 0; }
.fpv-map { width: 100%; height: 100%; }.fpv-geocoder { position: absolute; z-index: 2; top: var(--space-3, .75rem); left: var(--space-3, .75rem); }.fpv-geocoder__actions { display: flex; gap: var(--space-2, .5rem); }.fpv-geocoder__actions .icon-button { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-control); box-shadow: var(--shadow-card); }.fpv-geocoder__form { width: min(20rem, calc(100vw - 3rem)); margin-top: var(--space-2, .5rem); padding: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }.fpv-geocoder__form input { width: 100%; box-sizing: border-box; background: var(--bg-light); }.fpv-geocoder__form.has-results input { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }.fpv-geocoder__form input:focus { border-color: color-mix(in srgb, var(--primary) 62%, var(--border)); outline: 0; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }.fpv-geocoder__results { max-height: 15rem; margin-top: 0; overflow-y: auto; border-top: 1px solid var(--border); }.fpv-geocoder__results button { display: block; width: 100%; padding: var(--space-2, .5rem); color: var(--text); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: var(--radius-xs); }.fpv-geocoder__results button:hover { color: var(--primary); background: var(--bg-light); }.fpv-panel { position: absolute; z-index: 3; inset: 0 0 0 auto; width: min(34rem, 46vw); overflow-y: auto; padding: var(--space-6, 1.5rem); background: var(--color-surface, Canvas); border-inline-start: 1px solid var(--color-border, ButtonBorder); box-shadow: var(--shadow-card); }
.fpv-panel__handle { position: absolute; z-index: 4; top: 0; right: var(--space-3, .75rem); bottom: 0; width: 2rem !important; height: 2rem !important; margin-block: auto; box-shadow: var(--shadow-card); transition: right .2s ease; }
.fpv-panel__handle .icon { width: 1.125rem !important; height: 1.125rem !important; }
.fpv-workspace.is-panel-open .fpv-panel__handle { right: calc(min(34rem, 46vw) - 1rem); }
.fpv-panel h1, .fpv-panel h2 { margin-block: 0 var(--space-3, .75rem); }.fpv-place-heading { display: flex; align-items: center; gap: var(--space-3, .75rem); }.fpv-place-heading .icon { width: 1.5rem; height: 1.5rem; color: var(--primary); }.fpv-coordinates { display: inline-flex; align-items: center; gap: var(--space-2, .5rem); margin: 0 0 var(--space-4, 1rem); }.fpv-coordinates .icon { width: 1rem; height: 1rem; }.fpv-section-title { display: flex; align-items: center; color: var(--primary); font-size: 1rem; }.fpv-weather-section + .fpv-weather-section { margin-top: var(--space-6, 1.5rem); }.fpv-sun { display: inline-flex; margin: var(--space-3, .75rem) 0 0; }.fpv-spot-list { display: grid; gap: var(--space-2, .5rem); padding: 0; list-style: none; }
.fpv-spot-button { width: 100%; padding: var(--space-3, .75rem); text-align: start; color: inherit; background: transparent; border: 1px solid var(--color-border, ButtonBorder); border-radius: var(--radius-md, .5rem); cursor: pointer; }.fpv-spot-button small { display: block; margin-top: .25rem; color: var(--color-text-muted, GrayText); }
.fpv-spot-form label { display: grid; gap: var(--space-1, .25rem); }.fpv-spot-form input, .fpv-spot-form textarea { width: 100%; box-sizing: border-box; }.fpv-weather-section > .stats-grid { padding-top: .75rem; }.fpv-weather-card { --fpv-card-accent: var(--border); padding: .25rem; padding-top: .75rem; gap: 0; justify-content: center; }.fpv-weather-card .card__label { left: .25rem; max-inline-size: calc(100% - .5rem); overflow: hidden; border-color: color-mix(in srgb, var(--fpv-card-accent) 72%, var(--border)); background: color-mix(in srgb, var(--fpv-card-accent) 20%, var(--bg-light)); color: var(--text); white-space: nowrap; }.fpv-weather-card strong { display: flex; align-items: baseline; justify-content: center; min-width: 0; gap: .25rem; margin-top: 0; font-size: 1.25rem; text-align: center; }.fpv-weather-card strong small { flex: 0 0 auto; color: var(--text-muted); font-size: .7em; font-weight: 400; }.fpv-weather-card__icon { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }.fpv-weather-card__icon-glyph { position: absolute; right: -.5rem; bottom: 0; opacity: .12; font-size: 2rem; line-height: 1; }.fpv-weather-card strong { position: relative; z-index: 1; }.fpv-weather-card--temperature { --fpv-card-accent: var(--danger); }.fpv-weather-card--wind { --fpv-card-accent: var(--info); }.fpv-weather-card--moisture { --fpv-card-accent: var(--secondary); }.fpv-weather-card--sun { --fpv-card-accent: var(--warning); }.fpv-weather-card--neutral { --fpv-card-accent: var(--border); }
.fpv-wind-direction strong { display: grid; place-items: center; }.fpv-wind-arrow { display: block; width: 2rem; height: 2rem; color: var(--text); fill: currentColor; transform: rotate(var(--wind-bearing)); }
.fpv-hourly-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }.fpv-hourly { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }.fpv-hourly th, .fpv-hourly td { padding: .4rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--color-border, ButtonBorder); }.fpv-hourly th { position: sticky; top: 0; z-index: 1; background: var(--bg); box-shadow: 0 1px var(--color-border, ButtonBorder); }.fpv-hourly-sticky-test { height: 500px; }.fpv-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, .5rem); margin-top: var(--space-4, 1rem); }.fpv-marker { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--bg); background: var(--primary); border: 2px solid var(--bg); border-radius: 50%; box-shadow: var(--shadow-card); font-size: 1rem; font-weight: 700; }.fpv-marker--temporary { background: var(--primary); }.fpv-map .maplibregl-ctrl-top-right, .fpv-map .maplibregl-ctrl-bottom-right { transition: right .2s ease, bottom .2s ease; }.fpv-workspace.is-panel-open .maplibregl-ctrl-top-right, .fpv-workspace.is-panel-open .maplibregl-ctrl-bottom-right { right: min(34rem, 46vw); }.fpv-map .maplibregl-ctrl-group { overflow: hidden; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: var(--shadow-card); }.fpv-map .maplibregl-ctrl-group button + button { border-top-color: var(--border); }.fpv-map .maplibregl-ctrl button:not(:disabled):is(:hover, :active) { background: var(--bg-light); }.fpv-map .maplibregl-ctrl-group button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: none; }.fpv-map .maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { background-color: var(--text); background-image: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3C/svg%3E") center / 1.125rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3m0 14v3M2 12h3m14 0h3'/%3E%3C/svg%3E") center / 1.125rem no-repeat; }.fpv-map .maplibregl-ctrl-geolocate:is(.maplibregl-ctrl-geolocate-active, .maplibregl-ctrl-geolocate-background) .maplibregl-ctrl-icon { background-color: var(--primary); }.fpv-map .maplibregl-user-location-dot, .fpv-map .maplibregl-user-location-dot::before { background-color: var(--primary); }.fpv-map .maplibregl-user-location-dot::after { border-color: var(--bg); box-shadow: 0 0 0 1px var(--border), var(--shadow-card); }.fpv-map .maplibregl-user-location-accuracy-circle { background: color-mix(in srgb, var(--primary) 18%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); }.fpv-map .maplibregl-ctrl-attrib { color: var(--text-muted); background: color-mix(in srgb, var(--bg) 86%, transparent); }.fpv-map .maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none; }.fpv-map .fpv-map .maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button { display: block; }.fpv-map .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: block; }.fpv-map .maplibregl-ctrl-attrib a { color: inherit; }
@media (max-width: 48rem) {
    .fpv-workspace { --fpv-mobile-panel-height: min(34rem, 58%); }

    .fpv-geocoder { top: var(--space-2, .5rem); left: var(--space-2, .5rem); }
    .fpv-geocoder__form { width: min(20rem, calc(100vw - 1rem)); }

    .fpv-panel {
        box-sizing: border-box;
        inset: auto 0 0;
        width: auto;
        height: var(--fpv-mobile-panel-height);
        max-height: none;
        padding: .875rem .875rem calc(.875rem + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        border-inline-start: 0;
        border-top: 1px solid var(--color-border, ButtonBorder);
        border-radius: var(--radius-card) var(--radius-card) 0 0;
    }

    .fpv-panel__handle { top: auto; right: auto; bottom: var(--space-2, .5rem); left: 50%; margin-block: 0; transform: translateX(-50%); }
    .fpv-panel__handle .icon { transform: rotate(90deg); }
    .fpv-workspace.is-panel-open .fpv-panel__handle { right: auto; bottom: calc(var(--fpv-mobile-panel-height) - 1rem); left: 50%; }

    .fpv-panel h1, .fpv-panel h2 { margin-bottom: var(--space-2, .5rem); }
    .fpv-place-heading { gap: var(--space-2, .5rem); }
    .fpv-place-heading h1 { font-size: 1.25rem; }
    .fpv-coordinates { margin-bottom: var(--space-3, .75rem); }
    .fpv-weather-section > .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: .5rem;
        row-gap: 1rem;
        padding-top: .625rem;
    }
    .fpv-weather-card { min-height: 3.75rem; padding: .25rem; padding-top: .625rem; }
    .fpv-weather-card strong { font-size: 1.1rem; }
    .fpv-weather-card__icon-glyph { font-size: 1.75rem; }
    .fpv-weather-section + .fpv-weather-section { margin-top: var(--space-4, 1rem); }
    .fpv-hourly { font-size: .8125rem; }
    .fpv-hourly th, .fpv-hourly td { padding: .35rem; }

    .fpv-workspace.is-panel-open .maplibregl-ctrl-top-right { right: 0; }
    .fpv-workspace.is-panel-open .maplibregl-ctrl-bottom-right { right: 0; bottom: var(--fpv-mobile-panel-height); }
}

@media (max-width: 23rem) {
    .fpv-panel { padding-inline: .625rem; }
    .fpv-weather-section > .stats-grid { gap: .375rem; }
    .fpv-weather-card strong { font-size: 1rem; }
}

/* The weather container is a grid item. Allow it to shrink below the table's
   intrinsic width, so horizontal scrolling remains limited to this element. */
.fpv-panel { overflow-x: hidden; }
.fpv-panel [data-weather], .fpv-weather-section, .fpv-hourly-scroll { min-width: 0; }
.fpv-hourly-scroll { width: 100%; max-width: 100%; }
.fpv-map .maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-button { display: block; }
.fpv-hourly-area { position: relative; width: 100%; min-width: 0; overflow: clip; }
.fpv-hourly-sticky-header { position: sticky; top: 0; z-index: 3; height: 0; pointer-events: none; }
.fpv-hourly--sticky { position: relative; z-index: 1; background: var(--bg); transform: translateX(0); }
.fpv-hourly:not(.fpv-hourly--sticky) th { position: static; }
.fpv-hourly--sticky th { position: static; background: var(--bg); }

/* Keep the clone flush with the panel edge; the mobile panel has tighter padding. */
.fpv-panel { --fpv-sticky-header-offset: var(--space-6, 1.5rem); }
.fpv-hourly-area { overflow: visible; }
.fpv-hourly-sticky-header { top: calc(-1 * var(--fpv-sticky-header-offset)); }

@media (max-width: 48rem) {
    .fpv-panel { --fpv-sticky-header-offset: .875rem; }
}

/* Keep the horizontally synced clone inside the same viewport as the table. */
.fpv-hourly-sticky-header { height: 2rem; margin-bottom: -2rem; overflow: hidden; }