/* ============================================================================
   Departures v3 — the pager. (2026-07-28)

   Four full pages side by side: GLOBE · BOARD · PASS · STAMPS. One gesture
   (swipe), one rail that is both the map and the control, and exactly one
   place you can be at a time. Replaces the v2 pull-up sheet, which asked the
   user to hold a *state* — how far up is it, and does that matter?

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

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

/* ── the rail ────────────────────────────────────────────────────────────
   Fixed under the app header. Labels ARE the page map: you can always see the
   four destinations and which one you're on, so nothing has to be discovered.
   Sits over the globe, hence the dark translucent plate. */
body.dep-v3 #dep-rail {
    position: fixed;
    top: calc(var(--header-height, 56px) + var(--safe-top, 0px));
    left: 0;
    right: 0;
    z-index: 6;
    background: linear-gradient(180deg, rgba(9, 12, 22, 0.94), rgba(9, 12, 22, 0.78));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
body.dep-v3 .dep-rail-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 480px;
    margin: 0 auto;
}
body.dep-v3 .dep-rail-tab {
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 10px 2px 9px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.46);
    transition: color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
body.dep-v3 .dep-rail-tab[aria-selected="true"] { color: #fff; }

/* The underline travels rather than switching on and off, so a tap and a swipe
   produce the same movement — that's what makes the two feel like one control
   instead of two ways of doing something. */
body.dep-v3 .dep-rail-ink {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2.5px;
    width: 25%;
    border-radius: 3px 3px 0 0;
    background: var(--accent-gold, #FFD93D);
    box-shadow: 0 0 10px rgba(255, 217, 61, 0.45);
    /* transform is set inline from the live scroll position, so the underline
       tracks the finger mid-swipe instead of jumping on release. */
    will-change: transform;
}
body.dep-v3 #dep-rail.is-settling .dep-rail-ink {
    transition: transform 220ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* At-a-glance line: today's set · live boost · next departure. One line, three
   facts, on every page — it's app-wide context, not page chrome. */
body.dep-v3 #dep-rail-glance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 18px;
    padding: 0 14px 7px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
body.dep-v3 #dep-rail-glance:empty { display: none; }

/* ── the pager ───────────────────────────────────────────────────────────
   pointer-events: none on the SCROLLER, auto on each page. That's what lets
   the globe page pass touches through to the live Mapbox canvas underneath
   while the other three pages still scroll and swipe normally — hit-testing
   lands on the page, and the browser walks up to this scroller for the drag. */
body.dep-v3 #dep-pager {
    position: fixed;
    top: calc(var(--header-height, 56px) + var(--safe-top, 0px) + 62px);
    bottom: calc(56px + var(--safe-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    pointer-events: none;
    scrollbar-width: none;
}
body.dep-v3 #dep-pager::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
    body.dep-v3 #dep-pager { scroll-behavior: auto; }
}

body.dep-v3 .dep-pg {
    position: relative;   /* the globe page's "Board ›" pill anchors to this */
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* never fly past a page on a fast flick */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    pointer-events: auto;
    padding: 10px 14px calc(18px + var(--safe-bottom, 0px));
    background: linear-gradient(180deg, rgba(16, 21, 36, 0.97), rgba(9, 12, 22, 0.99));
}

/* The globe page is a WINDOW, not a surface: no background, no pointer events,
   so the map behind it is what you actually touch. The cost is that you can't
   swipe off this page — the map owns horizontal drag. You leave via the rail
   or the pill below, which is why both are always visible. */
body.dep-v3 .dep-pg--globe {
    background: none;
    pointer-events: none;
    padding: 0;
    overflow: hidden;
}
body.dep-v3 .dep-pg--globe > * { pointer-events: auto; }

body.dep-v3 .dep-globe-next {
    position: absolute;
    right: 14px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 217, 61, 0.45);
    border-radius: 100px;
    background: rgba(9, 12, 22, 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--accent-gold, #FFD93D);
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
body.dep-v3 .dep-globe-next .arw {
    font-size: 15px;
    line-height: 1;
    animation: dep-v3-nudge 1.9s ease-in-out infinite;
}
@keyframes dep-v3-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-v3 .dep-globe-next .arw { animation: none; }
}

/* The Pass page 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-v3 .dep-pg--pass {
    background: linear-gradient(180deg, #f7f5ef, #e6e2d6);
    color: var(--ink, #1a1a1a);
}
body.dep-v3 .dep-pg--pass .bp-ticket { margin: 0 auto; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); }
body.dep-v3 .dep-pg--pass .bp-loading,
body.dep-v3 .dep-pg--pass .bp-empty { color: rgba(26, 26, 26, 0.6); }

/* Month stepper travels with the Pass page rather than living in the rail, so
   the rail is the same four things everywhere. */
body.dep-v3 .dep-pass-monthnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 0 10px;
}
body.dep-v3 .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-v3 .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;
}

body.dep-v3 .dep-pane-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-v3 .dep-pg--pass .dep-pane-empty { color: rgba(26, 26, 26, 0.6); }

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

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

/* ── one-time coach ──────────────────────────────────────────────────────
   A pager only needs to teach ONE thing, which is the point of choosing it:
   swipe sideways. Shown once. */
body.dep-v3 .dep-coach3 {
    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-v3 .dep-coach3.is-in { opacity: 1; }
body.dep-v3 .dep-coach3-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-v3 .dep-coach3.is-in .dep-coach3-card { transform: translateY(0); }
body.dep-v3 .dep-coach3-hand {
    font-size: 30px;
    display: block;
    margin-bottom: 6px;
    animation: dep-v3-swipe 1.8s ease-in-out infinite;
}
@keyframes dep-v3-swipe {
    0%, 100% { transform: translateX(16px); opacity: 0.45; }
    50%      { transform: translateX(-16px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-v3 .dep-coach3-hand { animation: none; }
}
body.dep-v3 .dep-coach3-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-v3 .dep-coach3-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-v3 .dep-coach3-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;
}