/* ============================================================================
   Departures v2 — peek sheet, at-a-glance strip, section headers, card grammar,
   FIND bar. (2026-07-26, from /var/www/DEPARTURES-UI-REVIEW.md)

   TWO SCOPES (split 2026-07-28 when the v3 pager arrived):

     body.dep-v2       the pull-up SHEET itself — #dep-sheet, its grab strip,
                       its pane control, its coach. v2 only.
     body.dep-surface  the shared content grammar — cards, section heads, the
                       at-a-glance cells, the FIND bar, the flight coins. Set by
                       v2 AND v3, because the pager renders the same cards from
                       the same builders and would otherwise show them unstyled.

   With neither class set this stylesheet is inert and v1 renders untouched —
   that's the fallback. Adding a rule? If it describes the sheet, use dep-v2;
   if it describes something the board/pass/stamps content draws, dep-surface.
   ========================================================================== */

/* ── retire the old entry points ─────────────────────────────────────────
   The FAB cluster + rail are replaced by the sheet. Kept in the DOM (they're
   the fallback) — just not shown. */
body.dep-v2 #dep-cadence-rail { display: none !important; }

/* ── the peek sheet ──────────────────────────────────────────────────────
   Fixed above the tab bar, over the globe. Peek shows the handle, the glance
   strip and one card; half shows the whole board with the globe still visible
   behind. Height (not transform) is animated so the body's scroll area is
   always exactly the visible box — a translated sheet leaves content parked
   off-screen that the user can still scroll to by accident. */
body.dep-v2 #dep-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(64px + var(--safe-bottom, 0px));
    z-index: 9;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(20, 26, 44, 0.97), rgba(10, 13, 24, 0.99));
    border: 1px solid rgba(255, 217, 61, 0.22);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: height 280ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* Three heights on one ladder. `full` stops short of the very top so a strip
   of globe stays visible — the sheet must never stop reading as a sheet, or
   the way back down stops being obvious. */
/* Peek grew from 186px when the pane control moved in: the control is ~48px
   and is worth the globe it costs, but not at the price of the peek's three
   cards — those are the reason to look down here at all. */
body.dep-v2 #dep-sheet[data-snap="peek"] { height: 244px; }
body.dep-v2 #dep-sheet[data-snap="half"] { height: 62vh; }
body.dep-v2 #dep-sheet[data-snap="full"] {
    height: calc(100vh - 64px - var(--safe-bottom, 0px) - var(--safe-top, 0px) - 34px);
}
/* While the finger is down the height IS the finger, so the easing has to get
   out of the way; same when probing a snap's height off-screen. */
body.dep-v2 #dep-sheet.is-dragging,
body.dep-v2 #dep-sheet.is-measuring { transition: none; }
@media (prefers-reduced-motion: reduce) {
    body.dep-v2 #dep-sheet { transition: none; }
}

/* At full the sheet owns the screen — the globe's own floating controls would
   otherwise sit on top of it. */
body.dep-v2.dep-sheet-full #dep-globe-controls,
body.dep-v2.dep-sheet-full .mapboxgl-ctrl-group,
body.dep-v2.dep-sheet-full #dep-locate-btn { opacity: 0; pointer-events: none; }

/* Grab strip — the whole thing is the tap/drag target (44px+ tall). */
body.dep-v2 .dep-sheet-grab {
    flex-shrink: 0;
    padding: 8px 14px 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
body.dep-v2 .dep-sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 5px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.28);
}
/* The caption under the handle. A sheet whose whole value is that it moves has
   to say so — and saying what the NEXT drag does (rather than a static "drag
   me") is what makes the ladder legible from any rung. */
body.dep-v2 .dep-sheet-hint {
    display: block;
    text-align: center;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.34);
    margin-bottom: 6px;
}
/* One slow breath on the peek handle. Enough to catch the eye as something
   interactive; not enough to become a distraction while reading the card. */
body.dep-v2 #dep-sheet[data-snap="peek"] .dep-sheet-handle {
    animation: dep-handle-breathe 2.8s ease-in-out infinite;
}
@keyframes dep-handle-breathe {
    0%, 100% { transform: scaleX(1);    background: rgba(255, 255, 255, 0.28); }
    50%      { transform: scaleX(1.25); background: rgba(255, 217, 61, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-v2 #dep-sheet[data-snap="peek"] .dep-sheet-handle { animation: none; }
}

/* ── at-a-glance strip ───────────────────────────────────────────────────
   One line, three facts: today's set · live boost · next departure. Mounted
   both here and in the Boarding Pass overlay (#bp-glance). */
body.dep-v2 .dep-sheet-glance,
body.dep-v2 #bp-glance {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 20px;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.66);
    letter-spacing: 0.01em;
}
body.dep-v2 #bp-glance { margin: 0 auto 10px; padding: 0 14px; }
/* In the sheet it's a direct flex child of the column now (it used to sit
   inside the grab strip alongside the old chips), so it needs its own gutters
   and must not be squeezed by the scrolling body below it. */
body.dep-v2 #dep-sheet-glance {
    flex-shrink: 0;
    padding: 0 14px 6px;
}
body.dep-surface .dep-gl-cell { white-space: nowrap; }
body.dep-surface .dep-gl-cell b { color: #fff; font-weight: 800; }
body.dep-surface .dep-gl-cell.is-done b { color: var(--accent-green, #27ae60); }
body.dep-surface .dep-gl-cell.is-boost { color: var(--accent-gold, #FFD93D); }
body.dep-surface .dep-gl-cell.is-boost b { color: var(--accent-gold, #FFD93D); }
body.dep-surface .dep-gl-cell.is-urgent b { color: #ff8a5c; }
body.dep-surface .dep-gl-cell.is-muted { opacity: 0.55; }
body.dep-surface .dep-gl-sep {
    width: 1px;
    height: 11px;
    margin: 0 9px;
    background: rgba(255, 255, 255, 0.18);
}

/* Sheet body — the peek card or the full board. */
body.dep-v2 .dep-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 14px 8px;
}
body.dep-v2 #dep-sheet[data-snap="peek"] .dep-sheet-body { overflow: hidden; }
body.dep-v2 .dep-sheet-body .bp-board-wrap { padding: 0; }

/* "All done" / empty peek. */
body.dep-surface .dep-peek-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border-radius: 12px;
    background: rgba(39, 174, 96, 0.14);
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: #9ae6b8;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 700;
    font-size: 13px;
}
body.dep-surface .dep-peek-clear--empty {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

/* ── the pane control ────────────────────────────────────────────────────
   Pass · Board · Stamps, in the sheet, at every height. This replaces two
   different navigation systems for the same three destinations: chips here
   that hard-cut to a full-screen overlay, and a differently-worded segmented
   control inside that overlay. One control, one surface, always visible — so
   there is nothing to discover and nothing to flick between. */
body.dep-v2 .dep-sheet-nav {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 0 14px 8px;
    padding: 3px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.dep-v2 .dep-sheet-tab {
    position: relative;
    z-index: 1;
    appearance: none;
    border: 0;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 38px keeps the row inside a comfortable thumb target without eating the
       peek's one card. */
    height: 32px;
    padding: 0 4px;
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    transition: color 200ms ease;
    -webkit-tap-highlight-color: transparent;
}
body.dep-v2 .dep-sheet-tab[aria-selected="true"] { color: #12131c; }
body.dep-surface .dep-tab-glyph {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
}
body.dep-surface .dep-tab-glyph svg { width: 13px; height: 13px; display: block; }

/* The travelling pill. Sliding one element between three slots (rather than
   toggling a background on each) is what makes tapping and swiping read as
   the same movement — the indicator goes the same way either way. */
body.dep-v2 .dep-sheet-nav-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.3);
    transition: transform 260ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
body.dep-v2 #dep-sheet[data-pane="pass"]   .dep-sheet-nav-ink { transform: translateX(0); }
body.dep-v2 #dep-sheet[data-pane="board"]  .dep-sheet-nav-ink { transform: translateX(100%); }
body.dep-v2 #dep-sheet[data-pane="stamps"] .dep-sheet-nav-ink { transform: translateX(200%); }
@media (prefers-reduced-motion: reduce) {
    body.dep-v2 .dep-sheet-nav-ink { transition: none; }
}

/* Pane change: the incoming pane slides in from the side the swipe headed, so
   the content confirms the direction the ink pill just travelled. */
@keyframes dep-slide-l {
    from { transform: translateX(26px); opacity: 0.35; }
}
@keyframes dep-slide-r {
    from { transform: translateX(-26px); opacity: 0.35; }
}
body.dep-surface .dep-slide-l { animation: dep-slide-l 200ms ease-out; }
body.dep-surface .dep-slide-r { animation: dep-slide-r 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
    body.dep-surface .dep-slide-l,
    body.dep-surface .dep-slide-r { animation: none; }
}

/* ── peek stack: the whole current set as slim rows ──────────────────────
   Up to three one-line rows in the same height the old single full-size card
   used — a 3-item daily set is fully visible at rest, not 1-of-3. */
body.dep-surface .dep-peek-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.dep-surface .dep-peek-row,
body.dep-surface .dt-cadence-card.dep-peek-row {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    background: var(--paper, #F4F1EA);
    border: 1px solid rgba(26, 26, 26, 0.12);
    border-radius: 10px;
    padding: 7px 10px;
    min-height: 36px;
    color: var(--ink, #1a1a1a);
    cursor: pointer;
    text-align: left;
    box-shadow: none;
}
body.dep-surface .dep-peek-row .dt-coin {
    min-width: 20px;
    height: 20px;
    font-size: 8.5px;
}
body.dep-surface .dep-peek-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dep-surface .dep-peek-slot {
    flex: 0 0 auto;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-weight: 800;
    font-size: 11px;
    color: rgba(26, 26, 26, 0.45);
}
body.dep-surface .dep-peek-slot.is-find {
    background: var(--accent-gold, #FFD93D);
    color: var(--ink, #1a1a1a);
    padding: 4px 11px;
    border-radius: 100px;
}
body.dep-surface .dep-peek-slot.is-claim {
    background: var(--accent-green, #27ae60);
    color: #fff;
    padding: 4px 11px;
    border-radius: 100px;
}
body.dep-surface .dep-peek-slot.is-done { color: #1f8a4a; }
body.dep-surface .dep-peek-slot.is-urgent { color: #d35400; }
body.dep-surface .dep-peek-flight.is-urgent { box-shadow: inset 3px 0 0 #ff8a5c; }
body.dep-surface .dep-peek-art {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.08);
    font-size: 14px;
}
body.dep-surface .dep-peek-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── the real coin: GLB-baked filmstrip on every chip ────────────────────
   dpad-coin-3d.js bakes each tier GLB into a 20-frame rotation strip and sets
   --coin-sprite-{bronze,silver,gold} + body.coin3d. Frame 0 (face-on) is the
   rest pose; claimable cards spin theirs; 2000% background-size = 20 frames.
   Without body.coin3d — bake failed, offline first run — the gradient coins
   above keep rendering untouched. */
body.dep-surface.coin3d .dt-cadence-card-reward .dt-coin {
    background: var(--coin-sprite-bronze) 0 0 / 2000% 100% no-repeat;
    box-shadow: none;
}
body.dep-surface.coin3d .dt-cadence-card-reward[data-rarity="rare"] .dt-coin {
    background-image: var(--coin-sprite-silver);
}
body.dep-surface.coin3d .dt-cadence-card-reward[data-rarity="epic"] .dt-coin,
body.dep-surface.coin3d .dt-cadence-card-reward[data-rarity="legendary"] .dt-coin {
    background-image: var(--coin-sprite-gold);
}
body.dep-surface.coin3d .dt-cadence-card-reward[data-rarity="legendary"] .dt-coin {
    filter: drop-shadow(0 0 5px rgba(255, 217, 61, 0.55));
}
body.dep-surface.coin3d .dt-cadence-card.is-claimable .dt-coin {
    animation: dep-coin-spin 1.6s steps(20) infinite;
}
/* 20 frames: frame i sits at i·(100/19)% in background-position space, so a
   full pass over all 20 needs to END one frame-step past 100% (20·100/19) —
   steps(20) then lands each interval exactly on a frame, wrapping seamlessly. */
@keyframes dep-coin-spin {
    from { background-position-x: 0%; }
    to { background-position-x: 105.2632%; }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-surface.coin3d .dt-cadence-card.is-claimable .dt-coin { animation: none; }
}

/* The landing notice + FIND bar have to clear the sheet's peek height. */
body.dep-surface #dep-landing-notice { bottom: calc(324px + var(--safe-bottom, 0px)); }

/* Hide the sheet wherever a full surface owns the screen. */
body.dep-v2.dt-sheet-open #dep-sheet,
body.dep-v2.dt-series-active #dep-sheet,
body.dep-v2.bp-open #dep-sheet,
body.dep-v2.dep-finding #dep-sheet,
body.dep-v2.dep-challenge-focus #dep-sheet { display: none; }

/* ── section headers: plain first, flavour second ────────────────────── */
body.dep-surface .dep-sec-v2 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 0 8px;
}
body.dep-surface .dep-sec-plain {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: #fff;
}
body.dep-surface .dep-sec-flavour {
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
}
body.dep-surface .dep-flight-sec--final_call .dep-sec-plain { color: #ff8a5c; }
body.dep-surface .dep-sec-count {
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.62);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 2px 8px;
}
body.dep-surface .dep-sec-count.is-done {
    color: #9ae6b8;
    background: rgba(39, 174, 96, 0.18);
}

/* ── one coin everywhere ─────────────────────────────────────────────────
   The flight card now emits the cadence card's coin markup; this just sizes it
   for the tighter row. */
body.dep-surface .dep-flight-coin-v2 .dt-coin { min-width: 24px; height: 24px; font-size: 11px; }

/* ── one card grammar ────────────────────────────────────────────────────
   title on top, chips beneath, ONE action/state slot pinned right. */
body.dep-surface .dt-cadence-card.dt-cc-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}
body.dep-surface .dt-cc-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.dep-surface .dt-cc-v2 .dt-cadence-card-title {
    white-space: normal;
    overflow-wrap: anywhere;
}
body.dep-surface .dt-cc-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
}
body.dep-surface .dt-cc-chips:empty { display: none; }
body.dep-surface .dt-cc-action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 62px;
}
/* FIND is the only card action that goes somewhere — give it the affordance
   and let progress/done read as the information they are. */
body.dep-surface .dt-cc-action--find .dt-cadence-card-meta {
    background: var(--accent-gold, #FFD93D);
    color: var(--ink, #1a1a1a);
    font-weight: 800;
    border-radius: 100px;
    padding: 6px 12px;
}
body.dep-surface .dt-cc-action--progress .dt-cadence-card-meta,
body.dep-surface .dt-cc-action--done .dt-cadence-card-meta {
    background: transparent;
    color: rgba(26, 26, 26, 0.5);
    font-weight: 700;
}
body.dep-surface .dt-cc-action--done .dt-cadence-card-meta { color: #1f8a4a; }

/* ── Boarding Pass overlay: one chrome row ───────────────────────────────
   Was two stacked rows (a lone ✕, then the toggle) pushing the first card a
   third of the way down the screen. */
body.dep-v2 #boarding-pass-overlay.bp-merged .bp-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px 6px;
}
body.dep-v2 #boarding-pass-overlay.bp-merged .bp-topbar .bp-merge-toggle {
    margin: 0 auto;
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.28);
    padding: 4px;
    border-radius: 100px;
}
body.dep-v2 #boarding-pass-overlay .bp-merge-toggle button {
    padding: 7px 13px;
    font-size: 12.5px;
}
/* Month nav only means anything on the Pass view. */
body.dep-v2 #boarding-pass-overlay.bp-merged .bp-monthnav { display: none; }
body.dep-v2 #boarding-pass-overlay.bp-merged:not(.bp-board):not(.bp-stamps) .bp-monthnav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto 8px;
}

/* Runway direction hint — the month runs future-at-top, so scrolling DOWN
   moves backwards in time. One line removes the double-take. */
body.dep-v2 #boarding-pass-overlay .bp-runway::before {
    content: '↑ later this month';
    display: block;
    text-align: center;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(26, 26, 26, 0.38);
    padding-bottom: 6px;
}

/* ── FIND bar ────────────────────────────────────────────────────────────
   Replaces the "Finding <thing> ✕" chip: adds where, how far, how long, and a
   real way to say you've arrived. */
body.dep-surface .dep-find-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--safe-bottom, 0px) + 84px);
    z-index: 150;
    max-width: 456px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    background: rgba(15, 15, 35, 0.94);
    border: 1px solid rgba(255, 217, 61, 0.45);
    border-radius: 14px;
    padding: 10px 10px 10px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-ui, 'Figtree', sans-serif);
}
/* The old chip is replaced wholesale when the bar is up. */
body.dep-surface #challenge-map-card { display: none !important; }
body.dep-surface .dep-find-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.dep-surface .dep-find-task {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-gold, #FFD93D);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dep-surface .dep-find-where {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.66);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.dep-surface .dep-find-go {
    flex-shrink: 0;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 800;
    font-size: 12.5px;
    padding: 9px 14px;
    border-radius: 100px;
    cursor: pointer;
}
/* Within check-in range the button becomes the obvious next move. */
body.dep-surface .dep-find-go.is-close {
    background: var(--accent-gold, #FFD93D);
    border-color: transparent;
    color: var(--ink, #1a1a1a);
    box-shadow: 0 0 14px rgba(255, 217, 61, 0.35);
}
body.dep-surface .dep-find-go:disabled { opacity: 0.6; }
body.dep-surface .dep-find-x {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

/* ── map controls: the only un-branded pixels on the screen ─────────── */
body.dep-surface .mapboxgl-ctrl-group {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 217, 61, 0.3);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ══ panes ══════════════════════════════════════════════════════════════
   Pass · Board · Stamps are three panes of the one sheet (2026-07-28). They
   used to be split across the sheet and a separate full-screen overlay, which
   is what made moving between them a hard cut rather than a movement.

   The Pass runway is cream artwork — a boarding pass is a paper object and
   reads as one. So the SHEET takes the pane's palette rather than the runway
   being forced onto navy. The tint transitions with the slide, which also
   does a second job: it makes it unmistakable that you changed pane, not
   just scrolled. */
body.dep-v2 #dep-sheet {
    transition: height 280ms cubic-bezier(0.22, 0.9, 0.3, 1),
                background 260ms ease,
                border-color 260ms ease;
}
body.dep-v2 #dep-sheet[data-pane="pass"] {
    background: linear-gradient(180deg, #f7f5ef, #e9e5d9);
    border-color: rgba(191, 149, 63, 0.5);
}
/* On cream, the chrome has to invert or it disappears. */
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-handle { background: rgba(26, 26, 26, 0.3); }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-hint   { color: rgba(26, 26, 26, 0.42); }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-nav {
    background: rgba(26, 26, 26, 0.07);
    border-color: rgba(26, 26, 26, 0.12);
}
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-tab { color: rgba(26, 26, 26, 0.55); }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-tab[aria-selected="true"] { color: #1a1a1a; }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-glance { color: rgba(26, 26, 26, 0.62); }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-gl-cell b { color: #1a1a1a; }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-gl-sep { background: rgba(26, 26, 26, 0.2); }
body.dep-v2 #dep-sheet[data-pane="pass"] .dep-sheet-handle {
    animation: none;   /* the breathe is tuned for the dark sheet */
}

/* Month stepper — travels with the Pass pane rather than living in fixed
   chrome, so the grab row is the same three things on every pane. */
body.dep-surface .dep-pass-monthnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 2px 0 10px;
}
body.dep-surface .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.7);
    color: #1a1a1a;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
body.dep-surface .dep-pass-mlabel {
    font-family: var(--font-display, 'Archivo Black', sans-serif);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    min-width: 120px;
    text-align: center;
}

/* The Pass runway was built for a full-screen overlay; inside the sheet it
   just needs its outer chrome to stand down. */
body.dep-v2 .dep-sheet-body .bp-ticket { margin: 0; box-shadow: none; }
body.dep-v2 .dep-sheet-body .bp-loading,
body.dep-v2 .dep-sheet-body .bp-empty { color: rgba(26, 26, 26, 0.6); }

body.dep-surface .dep-pane-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    text-align: center;
    font-family: var(--font-ui, 'Figtree', sans-serif);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* ══ first-run coach ════════════════════════════════════════════════════
   Shown once. Two gestures, named, with the direction drawn. After this the
   handle caption and the visible control carry it — repeating would nag. */
body.dep-v2 .dep-coach {
    position: fixed;
    inset: 0;
    /* Above the sheet (z:9), below toasts. */
    z-index: 1200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Sits just above the peeking sheet, so the thing being described stays
       visible underneath the card. 64 tab bar + 244 peek + 12 gap. */
    padding: 0 18px calc(320px + var(--safe-bottom, 0px));
    background: rgba(6, 8, 16, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 240ms ease;
}
body.dep-v2 .dep-coach.is-in { opacity: 1; }
body.dep-v2 .dep-coach.is-out { opacity: 0; }
body.dep-v2 .dep-coach-card {
    width: 100%;
    max-width: 330px;
    padding: 16px 16px 12px;
    border-radius: 16px;
    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 12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(10px);
    transition: transform 240ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
body.dep-v2 .dep-coach.is-in .dep-coach-card { transform: translateY(0); }
body.dep-v2 .dep-coach-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    font-family: var(--font-ui, 'Figtree', sans-serif);
}
body.dep-v2 .dep-coach-row b {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: #fff;
}
body.dep-v2 .dep-coach-row span:not(.dep-coach-ico) {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}
body.dep-v2 .dep-coach-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 217, 61, 0.14);
    border: 1px solid rgba(255, 217, 61, 0.4);
    color: var(--accent-gold, #FFD93D);
    font-size: 17px;
    font-weight: 700;
}
/* The icons animate along their own axis — the motion is the instruction. */
body.dep-v2 .dep-coach-ico--up { animation: dep-coach-up 1.6s ease-in-out infinite; }
body.dep-v2 .dep-coach-ico--lr { animation: dep-coach-lr 1.6s ease-in-out infinite; }
@keyframes dep-coach-up {
    0%, 100% { transform: translateY(3px); }
    50%      { transform: translateY(-3px); }
}
@keyframes dep-coach-lr {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    body.dep-v2 .dep-coach-ico--up,
    body.dep-v2 .dep-coach-ico--lr { animation: none; }
}
body.dep-v2 .dep-coach-ok {
    width: 100%;
    margin-top: 8px;
    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;
}