/* ── Compact search (airports loaded) ──────────────────────
   Empty state keeps the centered hero search. Once at least one
   airport is selected, the search shrinks and sticks under the
   top bar. Rollback: delete this file. */

/* The layer drops its top padding so sticky offsets are unambiguous
   across browsers; the section's own padding sits under the fixed nav.
   When the mobile nav shrinks, a negative top lifts the bar with it. */
.mode-aerodrome.has-route .mode-layer {
    padding-top: 0;
}

.has-route .search-section {
    position: sticky;
    top: calc(var(--nav-h, 72px) - var(--nav-max, 72px));
    z-index: 150;
    margin-top: 0;
    padding: calc(var(--nav-max, 72px) + 12px) 0 12px;
    background: var(--bg);
}

/* Airport header (‹ › nav) sticks right under the search section */
.mode-aerodrome.has-route .grid-cell-header {
    top: calc(var(--nav-h, 72px) - var(--nav-max, 72px) + var(--search-h, 0px));
}

.has-route .route-bar {
    min-height: 0;
    padding: 3px;
    flex-wrap: nowrap;
}

/* Many airports: chips stay on one row and scroll sideways.
   An edge fades only where more chips are hidden (JS sets fade-l / fade-r). */
.has-route .route-badges {
    --fade-l: 0px;
    --fade-r: 0px;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.has-route .route-badges.fade-l { --fade-l: 16px; }
.has-route .route-badges.fade-r { --fade-r: 16px; }

.has-route .route-badges::-webkit-scrollbar {
    display: none;
}

.has-route .route-badge {
    flex-shrink: 0;
}

.has-route .route-input-wrapper {
    min-width: 90px;
}

.has-route .route-input {
    padding: 4px 10px;
}

/* Magnifier only on the empty home search, not next to chips */
.has-route .route-search-icon {
    display: none;
}

.has-route .route-badge {
    font-size: 0.72rem;
    padding: 3px 7px;
}

.has-route .quick-airport {
    font-size: 0.65rem;
    padding: 4px 7px;
}

.has-route .route-clear {
    font-size: 1rem;
    padding: 2px 8px;
}

/* Typed text matches chip size. Touch keeps the input at 16px
   (iOS zooms smaller inputs on focus), so chips grow to match. */
@media (pointer: fine) {
    .has-route .route-input {
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 1px;
    }
    .has-route .route-badge {
        font-size: 0.8rem;
    }
}

@media (pointer: coarse) {
    .has-route .route-badge {
        font-size: 0.9rem;
    }
}

/* Breathing room between the bar and the briefing */
.has-route .results {
    margin-top: 8px;
}