/* ============================================================================
   Departures v4 — the flat page. (2026-07-29)

   Option A from /static/departures-alternatives.html, with the globe promoted
   from a picture to a hole: the top band of the scroller is TRANSPARENT and
   pointer-transparent, so the live Mapbox canvas already behind this tab shows
   through and can be touched. Pull down at the top of the list and the band
   grows until the map owns the screen.

   Only two elements are opaque — the chrome and the body. That's what
   makes the band a real window instead of a picture of one: hit-testing inside
   it walks past us to the map. (Same trick as v3's globe page; here it scrolls
   away rather than sitting beside things.)

   Everything is scoped under body.dep-v4, set by js/departures-v4.js from the
   ?dep= flag. With the flag off this stylesheet is inert and v3 (the pager),
   v2 (the sheet) or v1 renders untouched — that's the fallback.
   ========================================================================== */

/* Retire the surfaces v4 replaces. Kept in the DOM (they're the fallback),
   just not shown. */
body.dep-v4 #dep-sheet,
body.dep-v4 #dep-cadence-rail { display: none !important; }

/* The whole surface is one fixed column between the app header and the tab
   bar: chrome on top, scroller filling the rest. A flex column rather than two
   independently-positioned layers, so the chrome can change height (a longer
   glance line wrapping, say) and the scroller just takes what's left — no
   measuring, no magic numbers. */
body.dep-v4 #dep4 {
    --dep4-win: 190px;
    --dep4-radius: 18px;
    position: fixed;
    top: calc(var(--header-height, 72px) + var(--safe-top, 0px));
    bottom: calc(56px + var(--safe-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* ── the scroller ────────────────────────────────────────────────────────
   pointer-events: none here, auto on the body. That is the entire trick:
   touches inside the window land on the map underneath, touches on the cards
   scroll the page — and the browser still walks up to this element for the
   drag, so the list scrolls normally. */
body.dep-v4 #dep4-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: none;
    pointer-events: none;
    scrollbar-width: none;
}
body.dep-v4 #dep4-scroll::-webkit-scrollbar { display: none; }

/* ── the window ──────────────────────────────────────────────────────────
   A spacer, nothing more. Its height is the whole state machine: dock height
   at rest, full-stage height when the globe is open, and any value in between
   while a finger is on it. */
body.dep-v4 #dep4-window {
    position: relative;
    height: var(--dep4-win);
    flex: 0 0 auto;
    pointer-events: none;
    transition: height 340ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
body.dep-v4 #dep4.is-dragging #dep4-window { transition: none; }
@media (prefers-reduced-motion: reduce) {
    body.dep-v4 #dep4-window { transition: none; }
}

/* The grab tab straddles the seam between map and list, which is exactly what
   it moves. Tap it or pull it — same result, so there's one thing to learn. */
body.dep-v4 .dep4-grab {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 78px;
    height: 26px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
body.dep-v4 .dep4-grab-bar {
    width: 42px;
    height: 4px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    transition: background 200ms ease, width 200ms ease;
}
body.dep-v4 #dep4[data-state="full"] .dep4-grab-bar {
    width: 56px;
    background: var(--accent-gold, #FFD93D);
}

/* ── the head ────────────────────────────────────────────────────────────
   Fixed chrome, exactly as in the mock: the page's name and its three lists.
   It does NOT move when the globe opens — the globe takes the stage below it,
   and these tabs stay put as the way back to any list. */
body.dep-v4 #dep4-head {
    flex: 0 0 auto;
    pointer-events: auto;
    padding: 10px 14px 10px;
    background: linear-gradient(180deg, rgba(12, 16, 29, 0.96), rgba(12, 16, 29, 0.86));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.dep-v4 .dep4-title {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
body.dep-v4 .dep4-title h1 {
    margin: 0;
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 17px;
    letter-spacing: 0.05em;
    color: #fff;
}
body.dep-v4 #dep4-glance {
    margin: 0;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 16px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
body.dep-v4 #dep4-glance:empty { display: none; }

/* Segmented control — three peers, one of them on. The ink travels rather than
   switching on and off, so the control reads as one object with a position
   rather than three lights. */
body.dep-v4 .dep4-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 3px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
body.dep-v4 .dep4-seg-btn {
    position: relative;
    z-index: 1;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    height: 32px;
    border-radius: 100px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 180ms ease;
    -webkit-tap-highlight-color: transparent;
}
body.dep-v4 .dep4-seg-btn[aria-selected="true"] { color: #1a1a1a; }
body.dep-v4 .dep4-seg-ink {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    border-radius: 100px;
    background: var(--accent-gold, #FFD93D);
    box-shadow: 0 2px 10px rgba(255, 217, 61, 0.28);
    transition: transform 260ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* ── the body ────────────────────────────────────────────────────────────
   min-height: 100% is load-bearing, not decoration. It guarantees the list is
   always at least a full stage tall, which is what makes the globe scrollable
   out of the way even on a day with two cards on it — and it stops a short
   list showing a seam of map below the last card. */
body.dep-v4 #dep4-body {
    pointer-events: auto;
    min-height: 100%;
    padding: 12px 14px calc(24px + var(--safe-bottom, 0px));
    border-radius: var(--dep4-radius) var(--dep4-radius) 0 0;
    background: linear-gradient(180deg, rgba(14, 19, 33, 0.99), rgba(9, 12, 22, 1));
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.42);
}

/* The Pass is cream artwork on a paper canvas — a boarding pass is a paper
   object and reads as one. .bp-host (boarding-pass.css) carries the runway
   styles; this just gives it the right surface to sit on. */
body.dep-v4 #dep4[data-pane="pass"] #dep4-body {
    background: linear-gradient(180deg, #f7f5ef, #e6e2d6);
    color: var(--ink, #1a1a1a);
}
body.dep-v4 #dep4[data-pane="pass"] #dep4-body .bp-ticket {
    margin: 0 auto;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
}
body.dep-v4 #dep4[data-pane="pass"] #dep4-body .bp-loading,
body.dep-v4 #dep4[data-pane="pass"] #dep4-body .bp-empty { color: rgba(26, 26, 26, 0.6); }

/* The month stepper ships with the Pass pane rather than the head, so the head
   is the same three things on every pane. */
body.dep-v4 .dep-pass-monthnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 0 10px;
}
body.dep-v4 .dep-pass-monthnav button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(26, 26, 26, 0.16);
    background: rgba(255, 255, 255, 0.75);
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
body.dep-v4 .dep-pass-mlabel {
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 14px;
    letter-spacing: 0.04em;
    min-width: 120px;
    text-align: center;
}

/* The Stamps side is a REPARENTED live node (#dt-side-stamps), not markup this
   surface owns. Out of #dt-overlay it loses that stylesheet's `display: none`
   and its centring both — the first is why it appears at all, the second is
   why it needs this. Mirrors the .bp-host rule in boarding-pass.css. */
body.dep-v4 #dep4-body .dt-side-hosted {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 2px 24px;
}
body.dep-v4 #dep4-body .dt-side-hosted .dt-close-x { display: none; }

body.dep-v4 .dep4-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 24px;
    text-align: center;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}
body.dep-v4 #dep4[data-pane="pass"] .dep4-empty { color: rgba(26, 26, 26, 0.6); }

/* Anything that takes over the screen hides the page wholesale. */
body.dep-v4.dt-series-active #dep4,
body.dep-v4.dep-finding #dep4,
body.dep-v4.dep-challenge-focus #dep4 { display: none; }

/* The FIND bar and the landing notice sat above the v2 sheet; with a flat page
   there is no sheet to clear, so they return to the bottom of the screen. */
body.dep-v4 #dep-landing-notice { bottom: calc(74px + var(--safe-bottom, 0px)); }

/* ── one-time coach ──────────────────────────────────────────────────────
   A flat page teaches itself except for the one gesture that isn't ordinary
   scrolling. Shown once. */
body.dep-v4 .dep4-coach {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    background: rgba(6, 8, 16, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 240ms ease;
}
body.dep-v4 .dep4-coach.is-in { opacity: 1; }
body.dep-v4 .dep4-coach-card {
    width: 100%;
    max-width: 320px;
    padding: 22px 18px 14px;
    border-radius: 18px;
    text-align: center;
    background: linear-gradient(180deg, rgba(24, 30, 50, 0.98), rgba(12, 15, 28, 0.99));
    border: 1px solid rgba(255, 217, 61, 0.35);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
    transform: translateY(10px);
    transition: transform 240ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
body.dep-v4 .dep4-coach.is-in .dep4-coach-card { transform: translateY(0); }
body.dep-v4 .dep4-coach-hand {
    font-size: 30px;
    display: block;
    margin-bottom: 6px;
    animation: dep-v4-pull 1.8s ease-in-out infinite;
}
@keyframes dep-v4-pull {
    0%, 100% { transform: translateY(-8px); opacity: 0.5; }
    50%      { transform: translateY(10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-v4 .dep4-coach-hand { animation: none; }
}
body.dep-v4 .dep4-coach-card b {
    display: block;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}
body.dep-v4 .dep4-coach-card p {
    margin: 0 0 14px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.62);
}
body.dep-v4 .dep4-coach-ok {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 100px;
    background: var(--accent-gold, #FFD93D);
    color: #1a1a1a;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}