@import '_content/Vrolu.Components/Vrolu.Components.wl9pu8qeyq.bundle.scp.css';

/* /Components/Layout/AppLayout.razor.rz.scp.css */
.app[b-6orpx5wnq1] {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg-base);
}

.app__sidebar[b-6orpx5wnq1] {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-5);
    border-right: 1px solid var(--color-border);
    background: var(--color-bg-sunken);
    position: sticky;
    top: 0;
    height: 100vh;
}

.app__brand[b-6orpx5wnq1] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    padding: 0 var(--space-2);
    margin-bottom: var(--space-2);
}

/* .app__nav-link (base/hover/active) lives in global app.css — it
   styles elements rendered by the Blazor <NavLink> component (the
   <a> tag), and Blazor scoped CSS does not propagate to
   child-component-rendered elements. See app.css "AppLayout
   NavLink-target classes" block for the rules + rationale. */

.app__nav[b-6orpx5wnq1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

/* Rendered as ChildContent of NavLink (the <svg> inside <a>), which DOES
   inherit AppLayout's scope attribute — scoped CSS reaches it. */
.app__nav-icon[b-6orpx5wnq1] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.app__sidebar-footer[b-6orpx5wnq1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* .app__user (base/hover/active) moved to global app.css — same
   NavLink scoped-CSS reason as .app__nav-link. The inner spans
   (.app__user-avatar, .app__user-email) are rendered as ChildContent
   and DO get the scope, so they stay scoped below. */

.app__user-avatar[b-6orpx5wnq1] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--gradient-sunset);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.app__user-email[b-6orpx5wnq1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phase 1.x — sign-out trigger in the sidebar footer. Visual weight
   matches .app__user (same row height + padding shape) but quieter —
   transparent border, secondary text, no avatar slot. Hover state
   mirrors .app__user:hover so the two affordances feel like siblings. */
.app__signout-form[b-6orpx5wnq1] {
    margin: 0;
}

.app__signout-btn[b-6orpx5wnq1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.app__signout-btn:hover[b-6orpx5wnq1] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.app__signout-icon[b-6orpx5wnq1] {
    width: 28px;
    height: 28px;
    padding: 6px;
    flex-shrink: 0;
}

.app__main[b-6orpx5wnq1] {
    flex: 1;
    min-width: 0;
}

.app__content[b-6orpx5wnq1] {
    padding: var(--space-6) var(--space-8);
    max-width: 1080px;
}

/* Hamburger hidden on desktop — sidebar's full vertical nav is
   already reachable without a menu trigger. The mobile @media
   block below opts it back in via display:inline-flex. ORDER
   MATTERS: this base rule MUST come before the @media block so
   the media rule wins on mobile (same-specificity = later wins).
   Putting display:none AFTER the @media block silently broke
   the mobile hamburger on the trips page. */
.app__hamburger[b-6orpx5wnq1] { display: none; }

@media (max-width: 720px) {
    .app[b-6orpx5wnq1] { flex-direction: column; }

    .app__sidebar[b-6orpx5wnq1] {
        width: 100%;
        height: auto;
        /* Sticky at top:0 with a higher z-index than the trip-header
           sticky (which is at z-index:10) — the toolbar always wins
           the top of the viewport. Backdrop blur matches both the
           trip-header and MarketingLayout's sticky header so the
           three surfaces share one frozen-glass language. */
        position: sticky;
        top: 0;
        z-index: 11;
        background: color-mix(in srgb, var(--color-bg-sunken) 88%, transparent);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        flex-direction: row;
        align-items: center;
        padding: var(--space-2) var(--space-3);
        /* --space-3 (not -2) so the gap between sibling sections in
           the top bar (brand, nav, sidebar-footer) matches the gap
           between affordances inside the footer (theme/user/signout).
           One uniform rhythm across the whole bar. */
        gap: var(--space-3);
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    /* Drop the "vrolu" wordmark on mobile — the brand link keeps only the
       V mark to make room for the nav icons + avatar + sign-out (we were
       fighting for ~400px on small phones). The mark itself is small
       (30px) so pad the link to a 44px tap target. ::deep is needed
       because .vrolu-logo__wordmark lives in LogoLockup's scoped CSS. */
    .app__brand[b-6orpx5wnq1] {
        margin-bottom: 0;
        padding: var(--space-2);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .app__brand[b-6orpx5wnq1]  .vrolu-logo__wordmark { display: none; }

    /* Nav holds the suitcase (Dashboard) and book (Stories) icons. With
       the "+ New trip" pill removed from the top bar, every item in the
       toolbar (brand, nav links, sidebar footer affordances) breathes
       at the same --space-3 rhythm — no deliberate group breaks.
       flex: 0 0 auto so the nav sits adjacent to the brand; the
       sidebar-footer's margin-left: auto pushes theme/avatar/sign-out
       to the right edge. */
    .app__nav[b-6orpx5wnq1] {
        flex-direction: row;
        gap: var(--space-2);
        flex: 0 0 auto;
    }

    /* Mobile collapse — nav link, user link, and sign-out morph from
       icon+text rows into icon-only buttons sharing the global
       .icon-button geometry (44x44 pill, primary-soft hover). Avatar
       inner circle scales from 28 to 32 so its visual weight matches
       a 20px stroke icon. Active route still highlights via NavLink's
       .active class (rules below). See UI_STYLE_GUIDE.md "Top toolbar". */
    /* .app__nav-link, .app__user mobile-collapse overrides moved to
       global app.css alongside their base rules (NavLink-rendered
       elements; scoped CSS doesn't reach them). .app__signout-btn
       stays scoped because the <button> is rendered directly by
       AppLayout inside the <form>. */
    .app__signout-btn[b-6orpx5wnq1] {
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        border-radius: var(--radius-pill);
        border: 1px solid transparent;
        justify-content: center;
    }

    .app__user-email[b-6orpx5wnq1],
    .app__signout-btn > span[b-6orpx5wnq1] {
        display: none;
    }

    .app__signout-btn:hover[b-6orpx5wnq1] {
        background: var(--color-action-soft);
        color: var(--color-action);
    }

    .app__nav-icon[b-6orpx5wnq1] { width: 20px; height: 20px; }

    .app__user-avatar[b-6orpx5wnq1] {
        width: 32px;
        height: 32px;
        font-size: var(--text-sm);
    }

    .app__signout-icon[b-6orpx5wnq1] {
        width: 20px;
        height: 20px;
        padding: 0;
    }

    .app__sidebar-footer[b-6orpx5wnq1] {
        flex-direction: row;
        margin-left: auto;
        padding-top: 0;
        border-top: none;
    }

    .app__content[b-6orpx5wnq1] { padding: var(--space-5) var(--space-4); }

    /* Hamburger leftmost in the mobile toolbar — iOS / Material
       convention (see UI_STYLE_GUIDE.md "Mobile nav"). The shared
       .nav-drawer-toggle primitive (40x40, bordered) is slightly
       bigger than the icon-only toolbar buttons (44x44 pill, no
       border) so it visually distinguishes itself as a menu
       trigger rather than another destination. */
    .app__hamburger[b-6orpx5wnq1] { display: inline-flex; }

    /* Strip the inline shell destinations on mobile — the hamburger
       panel surfaces them all (Trips, Stories, Account, Sign out)
       and having both inline icons AND a hamburger covering the
       same destinations is the "two menu triggers" anti-pattern
       called out in UI_STYLE_GUIDE.md "Mobile nav".

       Desktop sidebar (>720px) keeps every destination — vertical
       sidebar has the room and there's no hamburger competing for
       attention. Only mobile collapses to hamburger-only. */
    .app__nav[b-6orpx5wnq1] { display: none; }
    .app__nav-section-label[b-6orpx5wnq1] { display: none; }
    .app__user[b-6orpx5wnq1] { display: none; }
    .app__signout-form[b-6orpx5wnq1] { display: none; }
}
/* /Components/Layout/MarketingLayout.razor.rz.scp.css */
[b-saer8po930] {
    --marketing-header-height: 72px;
}

.marketing[b-saer8po930] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.marketing__header[b-saer8po930] {
    position: sticky;
    top: 0;
    z-index: 50;
    /* The app's bar over its sky: translucent ink, blurred. */
    background: rgba(11, 10, 22, 0.62);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.marketing__header-inner[b-saer8po930] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: var(--space-5);
}

.marketing__brand[b-saer8po930] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.marketing__nav[b-saer8po930] {
    display: flex;
    gap: var(--space-6);
    flex: 1;
    justify-content: center;
}

.marketing__nav a[b-saer8po930] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
}

.marketing__nav a:hover[b-saer8po930] {
    color: var(--color-text-primary);
}

.marketing__actions[b-saer8po930] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* The airport pages' door in the phone bar; desktop has the nav. */
.marketing__quick[b-saer8po930] {
    display: none;
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-2);
}

.marketing__signin[b-saer8po930] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
}

.marketing__signin:hover[b-saer8po930] { color: var(--color-text-primary); }

.marketing__cta[b-saer8po930] {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-5);
}

/* The start-here door: the app's translucent capsule, its verb icon in
   the orchid (the page's one). White label, never an orchid fill. */
.marketing__door[b-saer8po930] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background var(--duration-fast) var(--ease-out);
}

.marketing__door-icon[b-saer8po930] {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--color-look-here);
}

@media (hover: hover) {
    .marketing__door:hover[b-saer8po930] {
        background: rgba(255, 255, 255, 0.16);
        color: #FFFFFF;
    }
}

.marketing__door:focus-visible[b-saer8po930] {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
}

.marketing__main[b-saer8po930] {
    flex: 1;
    padding: var(--space-8) 0 var(--space-12);
}

.marketing__footer[b-saer8po930] {
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) 0 var(--space-6);
    margin-top: var(--space-10);
}

.marketing__footer-inner[b-saer8po930] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.marketing__footer-brand[b-saer8po930] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 18rem;
}

.marketing__footer-tagline[b-saer8po930] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.marketing__footer-nav[b-saer8po930] {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.marketing__footer-col[b-saer8po930] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.marketing__footer-heading[b-saer8po930] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.marketing__footer-col a[b-saer8po930] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.marketing__footer-col a:hover[b-saer8po930] { color: var(--color-text-primary); }

.marketing__footer-bottom[b-saer8po930] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.marketing__legal[b-saer8po930] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.marketing__footer-contact[b-saer8po930] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.marketing__footer-contact:hover[b-saer8po930] { color: var(--color-accent); }

/* ---------------------------------------------------------------
   Mobile hamburger — layout-specific bits only. The shared drawer
   primitives (.nav-drawer-toggle, .nav-drawer-overlay,
   .nav-drawer-panel + child elements + open-state mechanics) live
   globally in app.css since AppLayout also uses them; only the
   marketing-layout overrides stay scoped here.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
    /* Inline nav + signin link collapse into the hamburger panel —
       they're not reachable any other way on mobile. */
    .marketing__nav[b-saer8po930] { display: none; }
    .marketing__signin[b-saer8po930] { display: none; }

    /* Hamburger leftmost, brand tight to its right, actions on the
       right edge — iOS / Material convention (see UI_STYLE_GUIDE.md
       "Mobile nav"). Without nav-as-flex-spacer in the middle, the
       inner's justify-content: space-between would float the brand
       toward center; margin-left:auto on the actions group restores
       the brand-tight-left + actions-pinned-right structure. */
    .marketing__header-inner[b-saer8po930] {
        gap: var(--space-3);
    }

    .marketing__actions[b-saer8po930] { margin-left: auto; }

    .marketing__quick[b-saer8po930] { display: inline-flex; }

    /* Keep the Get-started / Trips CTA visible — it's the primary
       conversion affordance. Compact padding so it doesn't push the
       brand off the visible area on 360px viewports. */
    .marketing__cta[b-saer8po930] {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }

    /* Show the hamburger via the shared primitive. */
    .marketing__hamburger[b-saer8po930] { display: inline-flex; }
}
/* /Components/Layout/PublicFlightLayout.razor.rz.scp.css */
/* Chrome for the public live-flight viewer (/f/{token}).

   These .public__* rules are RESTATED here rather than shared. They were
   only ever written in PublicTripLayout.razor.css, and Blazor scoped CSS
   means a rule written there matches nothing rendered here — so this layout
   was shipping its header, main and footer with no styles at all: the
   wordmark sat flush against the status bar with no bar height, no hairline,
   and no top padding under the notch (founder QA, Aug 28: "the header is
   scrunched up top"). Same class names, same vocabulary, one surface's copy.

   The two layouts are deliberately separate components (PublicTripLayout
   mounts an interactive ToastHost and would open a SignalR circuit; this
   page is static SSR), so the duplication is the price of that split. If a
   third public surface ever appears, promote these to app.css. */

.public[b-cww79tgz3k] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* THE QUIET ZONE (iOS VroluBackdrop, style: .quiet — founder ruling,
       Aug 12: "too much purple haze" on data screens). A flight page is a
       CONTENT screen: the data is the light there, so the ground goes
       near-black and the delays, the live cyan and the amber gates pop
       against space. The violet ink + full-strength glow is the .full
       atmosphere, for moment screens. The web had been wearing .full
       everywhere, which is why this page read purple next to the app. */
    background: var(--color-bg-ground);
}

/* The horizon: warm light rising from BELOW the bottom edge, the sky
   darkening upward into space. Painted on a viewport-fixed pseudo-element
   (not background-attachment: fixed, which is unreliable on iOS Safari —
   the phone browser most shared links open in) so the horizon stays
   anchored while the page scrolls, matching iOS .ignoresSafeArea(). */
.public[b-cww79tgz3k]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--horizon-glow-quiet);
    pointer-events: none;
    z-index: 0;
}

/* Keep the layout chrome above the glow layer. */
.public__header[b-cww79tgz3k],
.public__main[b-cww79tgz3k],
.public__footer[b-cww79tgz3k] {
    position: relative;
    z-index: 1;
}

.public__header[b-cww79tgz3k] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg-ground) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    /* Under the notch / Dynamic Island. This link opens full-screen in
       Safari more often than not, so the bar owes the status bar its
       height — without this the wordmark collides with the clock. */
    padding-top: env(safe-area-inset-top);
}

.public__header-inner[b-cww79tgz3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: var(--space-4);
}

.public__brand[b-cww79tgz3k] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* The App Store badge in the bar — Apple's black pill, sized to the 56px
   header. Fixed dark surface (not a token) so it reads as THE badge in
   both themes. */
.public__stores[b-cww79tgz3k] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* Two store pills share the bar with the lockup; on a narrow phone the
   icon alone names Vrolu. */
@media (max-width: 420px) {
    .public__brand[b-cww79tgz3k]  .vrolu-logo__wordmark {
        display: none;
    }
}

.public__store[b-cww79tgz3k] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 36px;
    padding: 0 11px 0 9px;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    text-decoration: none;
    transition: transform 120ms ease, opacity 120ms ease;
}

.public__store:hover[b-cww79tgz3k] {
    opacity: 0.9;
}

.public__store:active[b-cww79tgz3k] {
    transform: scale(0.98);
}

.public__store-apple[b-cww79tgz3k] {
    width: 20px;
    height: 20px;
    flex: none;
}

.public__store-text[b-cww79tgz3k] {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-align: left;
}

.public__store-small[b-cww79tgz3k] {
    font-size: 8px;
    letter-spacing: 0.02em;
}

.public__store-big[b-cww79tgz3k] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.public__main[b-cww79tgz3k] {
    flex: 1;
    padding: var(--space-5) 0 var(--space-8);
}

.public__footer[b-cww79tgz3k] {
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}

.public__footer-inner[b-cww79tgz3k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.public__legal[b-cww79tgz3k] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.public__legal a[b-cww79tgz3k] {
    color: var(--color-text-secondary);
}

.public__legal a:hover[b-cww79tgz3k] {
    color: var(--color-accent);
}

/* A link is a "tap here" — azure, not amber (v2.0 grammar). */
.public__cta[b-cww79tgz3k] {
    color: var(--color-action);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
}

.public__cta:hover[b-cww79tgz3k] {
    color: var(--color-action-strong);
}

@media (max-width: 540px) {
    .public__footer-inner[b-cww79tgz3k] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yzezmc09ra],
.components-reconnect-repeated-attempt-visible[b-yzezmc09ra],
.components-reconnect-failed-visible[b-yzezmc09ra],
.components-pause-visible[b-yzezmc09ra],
.components-resume-failed-visible[b-yzezmc09ra],
.components-rejoining-animation[b-yzezmc09ra] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-retrying[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-failed[b-yzezmc09ra],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yzezmc09ra] {
    display: block;
}


#components-reconnect-modal[b-yzezmc09ra] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yzezmc09ra 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yzezmc09ra 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yzezmc09ra 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yzezmc09ra]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yzezmc09ra 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yzezmc09ra {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yzezmc09ra {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yzezmc09ra {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yzezmc09ra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yzezmc09ra] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yzezmc09ra] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yzezmc09ra] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yzezmc09ra] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yzezmc09ra] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yzezmc09ra] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yzezmc09ra 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yzezmc09ra] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yzezmc09ra {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
.admin-notfound[b-xmmi5u9mwc] {
    max-width: 32rem;
    margin: 4rem auto;
    text-align: center;
}

.admin-notfound h1[b-xmmi5u9mwc] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.admin-notfound .btn[b-xmmi5u9mwc] {
    margin-top: 1.5rem;
}

.admin-metrics[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.admin-card[b-xmmi5u9mwc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: 0.85rem;
    background: var(--surface-raised, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.admin-card__num[b-xmmi5u9mwc] {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
}

.admin-card__label[b-xmmi5u9mwc] {
    font-size: 0.8rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-card--warn[b-xmmi5u9mwc] {
    border-color: var(--color-warning, #FF9500);
}

.admin-card--error[b-xmmi5u9mwc] {
    border-color: var(--color-danger, #FF7373);
}

.admin-metrics--minor[b-xmmi5u9mwc] {
    margin-top: 0.75rem;
}

/* Clickable bucket cards — same chrome as the static cards, plus an
   affordance border so "drillable" is discoverable without hover. */
.admin-card--click[b-xmmi5u9mwc] {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    border-style: dashed;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease-out),
                background var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

@media (hover: hover) {
    .admin-card--click:hover[b-xmmi5u9mwc] {
        border-color: var(--color-action, #338CFF);
    }
}

.admin-card--click:focus-visible[b-xmmi5u9mwc] {
    outline: 2px solid var(--color-action, #338CFF);
    outline-offset: 2px;
}

.admin-card--active[b-xmmi5u9mwc] {
    border-style: solid;
    border-color: var(--color-action, #338CFF);
    background: var(--color-action-soft, rgba(51, 140, 255, 0.12));
}

.admin-card__sub[b-xmmi5u9mwc] {
    font-size: 0.72rem;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
}

.admin-section[b-xmmi5u9mwc] {
    margin-bottom: 2rem;
}

.admin-section__title[b-xmmi5u9mwc] {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.admin-section__desc[b-xmmi5u9mwc] {
    max-width: 44rem;
    margin-bottom: 1rem;
}

/* A sub-block inside a section (Accounts → Returning, Sep 4). */
.admin-section__subtitle[b-xmmi5u9mwc] {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.35rem;
    color: var(--text-secondary);
}

.admin-warn-text[b-xmmi5u9mwc] {
    color: var(--color-warning, #FF9500);
}

.admin-pills[b-xmmi5u9mwc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-pill[b-xmmi5u9mwc] {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--surface-raised, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    font-size: 0.85rem;
}

.admin-log[b-xmmi5u9mwc] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    max-height: 18rem;
    overflow-y: auto;
}

.admin-log__line[b-xmmi5u9mwc] {
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-pill--warn[b-xmmi5u9mwc] {
    border-color: var(--color-warning, #FF9500);
}

/* --- Drill-in account list ------------------------------------------- */

.admin-drill__head[b-xmmi5u9mwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-drill__close[b-xmmi5u9mwc] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    font-size: 1rem;
}

@media (hover: hover) {
    .admin-drill__close:hover[b-xmmi5u9mwc] {
        background: var(--color-bg-elevated, rgba(255, 255, 255, 0.06));
    }
}

.admin-drill__bar[b-xmmi5u9mwc] {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    max-width: 28rem;
}

.admin-input[b-xmmi5u9mwc] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    background: var(--color-bg-sunken, rgba(0, 0, 0, 0.25));
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
}

.admin-input:focus-visible[b-xmmi5u9mwc] {
    outline: 2px solid var(--color-action, #338CFF);
    outline-offset: 1px;
}

.admin-table-scroll[b-xmmi5u9mwc] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-users[b-xmmi5u9mwc] {
    min-width: 58rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 0.85rem;
}

.admin-users__row[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: 2.4fr 2.2fr 1fr 1fr 0.5fr 0.6fr 1.4fr;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    align-items: center;
}

.admin-users__row:first-child[b-xmmi5u9mwc] {
    border-top: none;
}

.admin-users__row--head[b-xmmi5u9mwc] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: rgba(0, 0, 0, 0.25);
}

.admin-users__identity[b-xmmi5u9mwc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.admin-users__email[b-xmmi5u9mwc] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

.admin-users__name[b-xmmi5u9mwc] {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.78rem;
}

.admin-users__badges[b-xmmi5u9mwc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* "Came from" — the account's device story, stacked: source line, then
   the install date + build, then the device's mint / sign-in history. */
.admin-users__origin[b-xmmi5u9mwc] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.admin-users__origin small[b-xmmi5u9mwc] {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
}

/* Journey rungs under each account row — the funnel read per person. */
.admin-users__journey[b-xmmi5u9mwc] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.35rem;
}

.admin-chip[b-xmmi5u9mwc] {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    font-size: 0.7rem;
    white-space: nowrap;
}

.admin-chip--on[b-xmmi5u9mwc] {
    border-color: var(--color-primary, #FF6B5C);
    background: var(--color-primary-soft, rgba(255, 107, 92, 0.16));
}

.admin-chip--off[b-xmmi5u9mwc] {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
    border-style: dashed;
}

.admin-users__timeline-toggle[b-xmmi5u9mwc] {
    margin-left: auto;
    font: inherit;
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: none;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-pill, 999px);
    padding: 0.1rem 0.6rem;
    cursor: pointer;
}

.admin-users__timeline-toggle:hover[b-xmmi5u9mwc] {
    border-color: var(--color-primary, #FF6B5C);
}

.admin-users__timeline[b-xmmi5u9mwc] {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--surface-raised, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    font-size: 0.78rem;
}

.admin-timeline__row[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: 11rem 11rem 1fr;
    gap: 0.6rem;
    padding: 0.2rem 0;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
}

.admin-timeline__row:first-child[b-xmmi5u9mwc] {
    border-top: none;
}

.admin-timeline__at[b-xmmi5u9mwc] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    white-space: nowrap;
}

.admin-timeline__label[b-xmmi5u9mwc] {
    font-weight: 600;
}

.admin-timeline__detail[b-xmmi5u9mwc] {
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-users__expiry[b-xmmi5u9mwc] {
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.78rem;
    margin-left: 0.35rem;
}

.admin-badge[b-xmmi5u9mwc] {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-pill, 999px);
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.admin-badge--guest[b-xmmi5u9mwc] {
    border-color: var(--color-warning, #FF9500);
    color: var(--color-warning, #FF9500);
}

.admin-badge--ios[b-xmmi5u9mwc] {
    border-color: var(--color-border-strong, rgba(255, 255, 255, 0.25));
    color: var(--color-text-primary, #fff);
}

/* Pro wears the live cyan (iOS ProBadge) — cyan is the whole Pro
   family's mark; azure stays "tap here". */
.admin-badge--pro[b-xmmi5u9mwc] {
    border-color: var(--color-live, #29D6FF);
    color: var(--color-live, #29D6FF);
}

.admin-badge--test[b-xmmi5u9mwc] {
    border-color: var(--color-warning, #FF9500);
    color: var(--color-warning, #FF9500);
}

.admin-badge--sandbox[b-xmmi5u9mwc] {
    border-color: var(--color-warning, #FF9500);
    color: var(--color-warning, #FF9500);
    margin-left: 0.25rem;
}

.admin-drill__pager[b-xmmi5u9mwc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

/* --- Acquisition funnel ---------------------------------------------- */

.admin-funnel[b-xmmi5u9mwc] {
    min-width: 26rem;
    max-width: 36rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 0.85rem;
}

.admin-funnel__row[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: 2fr 0.7fr 0.7fr 0.9fr;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.admin-funnel__row:first-child[b-xmmi5u9mwc] {
    border-top: none;
}

.admin-funnel__row--head[b-xmmi5u9mwc] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: rgba(0, 0, 0, 0.25);
}

/* Stage table variant with the 24h release-watch column; the Growth
   attribution table keeps the 4-column base grid. */
.admin-funnel--windows[b-xmmi5u9mwc] {
    max-width: 40rem;
}

.admin-funnel--windows .admin-funnel__row[b-xmmi5u9mwc] {
    grid-template-columns: 2fr 0.6fr 0.6fr 0.6fr 0.9fr;
}

/* Distinct devices under a 24h / 7d event count — the figure that tells a
   test loop (twenty events, two devices) from twenty people. */
.admin-funnel__devices[b-xmmi5u9mwc] {
    display: block;
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.45));
}

/* --- Pro hooks (v2.1 #14 telemetry) ----------------------------------- */

.admin-hooks[b-xmmi5u9mwc] {
    min-width: 42rem;
    max-width: 52rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 0.85rem;
}

.admin-hooks__row[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: 2.2fr repeat(6, 0.7fr);
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    align-items: center;
}

.admin-hooks__row:first-child[b-xmmi5u9mwc] {
    border-top: none;
}

.admin-hooks__row--head[b-xmmi5u9mwc] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: rgba(0, 0, 0, 0.25);
}

.admin-hooks__feature[b-xmmi5u9mwc] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.admin-hooks__slug[b-xmmi5u9mwc] {
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    word-break: break-all;
}

.admin-pills--spaced[b-xmmi5u9mwc] {
    margin-top: 1rem;
}

.admin-alerts[b-xmmi5u9mwc] {
    margin-top: 1rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 0.85rem;
}

.admin-alerts__row[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 0.9fr 0.9fr 0.5fr 1.1fr;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    align-items: center;
}

.admin-alerts__row:first-child[b-xmmi5u9mwc] {
    border-top: none;
}

.admin-alerts__row--head[b-xmmi5u9mwc] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    background: rgba(0, 0, 0, 0.25);
}

.admin-alerts__row--warn[b-xmmi5u9mwc] {
    background: rgba(220, 150, 30, 0.12);
}

.admin-alerts__id[b-xmmi5u9mwc] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    word-break: break-all;
}

/* Landing fixture download (Sep 7 2026) */
.admin-fixture[b-xmmi5u9mwc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-fixture .form-control[b-xmmi5u9mwc] { max-width: 12rem; }
.admin-fixture a[aria-disabled="true"][b-xmmi5u9mwc] { pointer-events: none; opacity: 0.5; }

/* Oct 5 2026 audit: section jump bar — the page is a dozen sections long.
   Sticky so it stays reachable; wraps on a phone, never scrolls sideways. */
.admin-jump[b-xmmi5u9mwc] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    padding: 0.6rem 0;
    margin-bottom: 1.5rem;
    background: var(--color-bg-base);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.admin-jump a[b-xmmi5u9mwc] {
    color: var(--color-text-secondary);
    text-decoration: none;
}

@media (hover: hover) {
    .admin-jump a:hover[b-xmmi5u9mwc] {
        color: var(--color-text-primary);
    }
}

.admin-section[id][b-xmmi5u9mwc] {
    scroll-margin-top: 4rem;
}

/* Week-over-week change under a pulse card. */
.admin-delta[b-xmmi5u9mwc] {
    font-weight: 600;
}

.admin-delta--up[b-xmmi5u9mwc] {
    color: var(--color-success);
}

.admin-delta--down[b-xmmi5u9mwc] {
    color: var(--color-danger);
}

/* Label/count breakdowns side by side (add-flight detail). */
.admin-breakdowns[b-xmmi5u9mwc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem 1.5rem;
}

.admin-breakdown__rows[b-xmmi5u9mwc] {
    display: flex;
    flex-direction: column;
}

.admin-breakdown__row[b-xmmi5u9mwc] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.admin-breakdown__row span[b-xmmi5u9mwc] {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The front door, Oct 3 2026 — the app's look on the web: the dusk sky
   (the app's WorldBackdrop render, fixed behind the page — .app-sky),
   Plex display, and the real product on real phones. Tokens only
   (css/tokens.css); the one new value is the sky's own gradient. */

/* ── shared ─────────────────────────────────────────────────────────── */

.hp-eyebrow[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-live);
    margin: 0 0 var(--space-3);
}

/* The accent punctuation — the live cyan, the brand's "this is live". */
.hp-dot[b-ldrntsnzoa] {
    color: var(--color-live);
}

.hp-section-title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.6vw, var(--text-4xl));
    line-height: 1.08;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-4);
}

.hp-phone[b-ldrntsnzoa] {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

.hp-shot[b-ldrntsnzoa] {
    display: block;
    width: 100%;
    max-width: 30rem;
    height: auto;
    border-radius: 24px;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

.hp-badge[b-ldrntsnzoa] {
    display: inline-block;
    line-height: 0;
    border-radius: 12px;
    transition: transform 0.15s ease;
}

.hp-badge img[b-ldrntsnzoa] {
    height: 56px;
    width: auto;
}

.hp-badge:focus-visible[b-ldrntsnzoa] {
    outline: 2px solid var(--color-action);
    outline-offset: 4px;
}

@media (hover: hover) {
    .hp-badge:hover[b-ldrntsnzoa] { transform: translateY(-1px); }
}

.hp-link[b-ldrntsnzoa] {
    color: rgba(255, 255, 255, 0.74);
    font-weight: 600;
    text-decoration: none;
}

@media (hover: hover) {
    .hp-link:hover[b-ldrntsnzoa] { color: #FFFFFF; }
}

/* ── hero ───────────────────────────────────────────────────────────── */

.hp-hero[b-ldrntsnzoa] {
    /* Flush under the header and full-bleed: the marketing main pads its
       top for text pages; the sky starts at the header's edge. */
    margin-top: calc(-1 * var(--space-8));
    position: relative;
    /* The hero is a picture of dusk, not a surface: it stays dark in the
       light theme too, so its text is set here, not from the tokens. */
    color: #FFFFFF;
    padding: var(--space-12) 0 0;
    /* No fill of its own: the app's sky (.app-sky, app.css) is the
       ground, fixed behind the page the way the app's backdrop is. */
}

.hp-hero__inner[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: end;
}

.hp-hero__copy[b-ldrntsnzoa] {
    padding-bottom: var(--space-12);
}

.hp-hero__title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
}

.hp-hero__lede[b-ldrntsnzoa] {
    font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.74);
    max-width: 34rem;
    margin: 0 0 var(--space-6);
}

.hp-hero__ctas[b-ldrntsnzoa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
}

.hp-hero__fine[b-ldrntsnzoa] {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* Two phones: the flight intel in front, the Lock Screen behind it —
   the product's two faces, cropped at the horizon like the App Store
   screenshots. */
.hp-hero__art[b-ldrntsnzoa] {
    position: relative;
    height: clamp(26rem, 46vw, 40rem);
    /* Crop the phones at the horizon only — clipping the sides too would
       cut the drop shadow into a visible box. */
    clip-path: inset(-10rem -10rem 0 -10rem);
}

.hp-hero__art .hp-phone[b-ldrntsnzoa] {
    position: absolute;
    width: clamp(14rem, 22vw, 20rem);
}

.hp-phone--front[b-ldrntsnzoa] {
    left: 8%;
    top: 0;
    z-index: 2;
}

.hp-phone--back[b-ldrntsnzoa] {
    right: 2%;
    top: 3.5rem;
    z-index: 1;
    opacity: 0.92;
}

/* ── features ───────────────────────────────────────────────────────── */

.hp-features[b-ldrntsnzoa] {
    padding: var(--space-12) 0;
}

.hp-feature[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-8) 0;
}

.hp-feature + .hp-feature[b-ldrntsnzoa] {
    border-top: 1px solid var(--color-border);
}

.hp-feature--flip .hp-feature__art[b-ldrntsnzoa] {
    order: 2;
}

.hp-feature__art[b-ldrntsnzoa] {
    display: flex;
    justify-content: center;
}

.hp-feature__art .hp-phone[b-ldrntsnzoa] {
    max-width: 18rem;
}

.hp-feature__title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(var(--text-3xl), 3.8vw, var(--text-5xl));
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-3);
}

.hp-feature__pitch[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

.hp-feature__body[b-ldrntsnzoa] {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 32rem;
    margin: 0;
}

/* ── airport delays ─────────────────────────────────────────────────── */

.hp-airports[b-ldrntsnzoa] {
    padding: var(--space-8) 0 var(--space-6);
}

.hp-airports__lede[b-ldrntsnzoa] {
    max-width: 40rem;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
}

.hp-airports__map[b-ldrntsnzoa] {
    margin: var(--space-5) 0;
}

.hp-airports__label[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-6) 0 var(--space-3);
}

.hp-airports__clear[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    margin: var(--space-5) 0 0;
}

.hp-airports__lit[b-ldrntsnzoa] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.hp-airport[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: 2px;
    padding: var(--space-4);
    border-radius: 16px;
    border: 1px solid rgba(255, 179, 71, 0.35);
    background: rgba(255, 179, 71, 0.08);
    color: var(--color-text-primary);
    text-decoration: none;
}

.hp-airport__code[b-ldrntsnzoa] {
    grid-row: span 2;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    line-height: 1;
    align-self: center;
}

.hp-airport__city[b-ldrntsnzoa] {
    font-weight: 600;
}

.hp-airport__line[b-ldrntsnzoa] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.hp-airports__chips[b-ldrntsnzoa] {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.hp-chip[b-ldrntsnzoa] {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-strong);
    background: var(--color-card);
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
}

.hp-chip--all[b-ldrntsnzoa] {
    color: var(--color-action);
}

@media (hover: hover) {
    .hp-airport:hover[b-ldrntsnzoa] { background: rgba(255, 179, 71, 0.14); }
    .hp-chip:hover[b-ldrntsnzoa] { border-color: var(--color-text-secondary); }
}

/* ── people ─────────────────────────────────────────────────────────── */

.hp-people[b-ldrntsnzoa] {
    padding: var(--space-12) 0;
}

.hp-people__header[b-ldrntsnzoa] {
    max-width: 44rem;
    margin-bottom: var(--space-8);
}

.hp-people__lede[b-ldrntsnzoa] {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
}

.hp-people__grid[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.hp-card[b-ldrntsnzoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: 20px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
    .hp-card:hover[b-ldrntsnzoa] {
        border-color: var(--color-border-strong);
        transform: translateY(-2px);
    }
}

.hp-card:focus-visible[b-ldrntsnzoa] {
    outline: 2px solid var(--color-action);
    outline-offset: 3px;
}

.hp-card__title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-2xl);
    margin: 0;
}

.hp-card__body[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.hp-card__link[b-ldrntsnzoa] {
    color: var(--color-action-strong);
    font-weight: 600;
}

/* ── voices ─────────────────────────────────────────────────────────── */

.hp-voices[b-ldrntsnzoa] {
    padding: var(--space-10) 0;
}

.hp-voices__grid[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.hp-voice[b-ldrntsnzoa] {
    margin: 0;
    padding: var(--space-6);
    border-radius: 20px;
    background: var(--color-card-quiet);
    border: 1px solid var(--color-border);
}

.hp-voice__quote[b-ldrntsnzoa] {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
    line-height: 1.5;
}

.hp-voice__by[b-ldrntsnzoa] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── close ──────────────────────────────────────────────────────────── */

.hp-close[b-ldrntsnzoa] {
    /* Runs to the footer: the marketing main pads its bottom for text pages. */
    margin-bottom: calc(-1 * var(--space-12));
    padding: var(--space-12) 0 calc(var(--space-12) + var(--space-6));
}

.hp-close__inner[b-ldrntsnzoa] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hp-close__lede[b-ldrntsnzoa] {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 34rem;
    margin: 0 0 var(--space-6);
}

/* ── phone width ────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .hp-hero[b-ldrntsnzoa] {
        padding-top: var(--space-10);
    }

    .hp-hero__inner[b-ldrntsnzoa] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .hp-hero__copy[b-ldrntsnzoa] {
        padding-bottom: 0;
    }

    .hp-hero__art[b-ldrntsnzoa] {
        height: 24rem;
    }

    .hp-hero__art .hp-phone[b-ldrntsnzoa] {
        width: 12.5rem;
    }

    .hp-phone--front[b-ldrntsnzoa] { left: 6%; }
    .hp-phone--back[b-ldrntsnzoa] { right: 6%; top: 2.5rem; }

    .hp-feature[b-ldrntsnzoa],
    .hp-feature--flip[b-ldrntsnzoa] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding: var(--space-8) 0;
    }

    .hp-feature--flip .hp-feature__art[b-ldrntsnzoa] {
        order: 0;
    }

    .hp-feature__art .hp-phone[b-ldrntsnzoa] {
        max-width: 14rem;
    }

    .hp-people__grid[b-ldrntsnzoa],
    .hp-voices__grid[b-ldrntsnzoa] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Marketing/Faq.razor.rz.scp.css */
.faq-list[b-3ba926aj8x] {
    padding: var(--space-8) 0 var(--space-10);
}

.faq-list__inner[b-3ba926aj8x] {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.faq-item[b-3ba926aj8x] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color var(--duration-base) var(--ease-out);
    overflow: hidden;
}

.faq-item[open][b-3ba926aj8x] {
    border-color: var(--color-border-strong);
}

.faq-item__q[b-3ba926aj8x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    list-style: none;
    padding: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'opsz' 36;
    color: var(--color-text-primary);
    line-height: 1.35;
    /* iOS HIG-friendly minimum tap target. */
    min-height: 44px;
}

.faq-item__q[b-3ba926aj8x]::-webkit-details-marker {
    display: none;
}

.faq-item__q[b-3ba926aj8x]::after {
    content: "+";
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1;
    transition: transform var(--duration-fast) var(--ease-out);
}

.faq-item[open] .faq-item__q[b-3ba926aj8x]::after {
    content: "−";
    transform: rotate(180deg);
}

.faq-item__q:hover[b-3ba926aj8x] {
    color: var(--color-accent);
}

.faq-item__a[b-3ba926aj8x] {
    padding: 0 var(--space-5) var(--space-5);
}

.faq-item__a p[b-3ba926aj8x] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
}

.faq-item__a code[b-3ba926aj8x] {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--color-bg-sunken);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

.faq-item__a a[b-3ba926aj8x] {
    color: var(--color-accent);
}
/* /Components/Pages/Marketing/HowItWorks.razor.rz.scp.css */
/* How it works, web rework (Oct 3 2026): four steps, each a claim beside
   what the phone shows. Same rhythm as the home page's feature rows. */

.hiw-badge[b-j1ylul8vj7] {
    display: inline-block;
    line-height: 0;
}

.hiw-badge img[b-j1ylul8vj7] { height: 56px; width: auto; }

.hiw[b-j1ylul8vj7] {
    padding: var(--space-10) 0 var(--space-8);
}

.hiw__list[b-j1ylul8vj7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hiw-step[b-j1ylul8vj7] {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
    padding: var(--space-8) 0;
}

.hiw-step + .hiw-step[b-j1ylul8vj7] { border-top: 1px solid var(--color-border); }

.hiw-step--flip .hiw-step__art[b-j1ylul8vj7] { order: 2; }

.hiw-step__art[b-j1ylul8vj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.hiw-phone[b-j1ylul8vj7] {
    width: 100%;
    max-width: 17rem;
    height: auto;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}

.hiw-shot[b-j1ylul8vj7] {
    width: 100%;
    max-width: 30rem;
    height: auto;
    border-radius: 24px;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
}

/* Step 1's art: the app's search field and its three doors, as type. */
.hiw-step__art--field[b-j1ylul8vj7] {
    align-items: stretch;
    max-width: 26rem;
    width: 100%;
    justify-self: center;
}

.hiw-field[b-j1ylul8vj7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: 18px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-card);
    color: var(--color-text-muted);
    font-size: var(--text-lg);
}

.hiw-doors[b-j1ylul8vj7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hiw-doors span[b-j1ylul8vj7] {
    padding: var(--space-3) var(--space-5);
    border-radius: 14px;
    background: var(--color-card-quiet);
    border: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-weight: 600;
}

.hiw-step__count[b-j1ylul8vj7] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-live);
    margin: 0 0 var(--space-3);
}

.hiw-step__title[b-j1ylul8vj7] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(var(--text-3xl), 3.6vw, var(--text-5xl));
    line-height: 1.05;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-4);
}

.hiw-step__copy[b-j1ylul8vj7] {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 32rem;
    margin: 0;
}

@media (max-width: 860px) {
    .hiw-step[b-j1ylul8vj7],
    .hiw-step--flip[b-j1ylul8vj7] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .hiw-step--flip .hiw-step__art[b-j1ylul8vj7] { order: 0; }
    .hiw-phone[b-j1ylul8vj7] { max-width: 14rem; }
}
/* /Components/Pages/Marketing/Pricing.razor.rz.scp.css */
/* Pricing, web rework (Oct 3 2026): three plans in the app's own terms,
   then the app's Free vs Pro table. Pro wears the Pro gradient's light
   (the paywall's cyan-to-indigo); tokens only. */

.pr-plans[b-tke09au4zl] {
    padding: var(--space-10) 0 var(--space-8);
}

.pr-plans__grid[b-tke09au4zl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

.pr-plan[b-tke09au4zl] {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    border-radius: 24px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
}

.pr-plan--pro[b-tke09au4zl] {
    border-color: rgba(41, 214, 255, 0.45);
    background:
        linear-gradient(160deg, rgba(41, 214, 255, 0.14), rgba(94, 107, 255, 0.10) 55%, rgba(255, 255, 255, 0.03));
}

.pr-plan--group[b-tke09au4zl] {
    border-color: rgba(176, 138, 255, 0.40);
    background: linear-gradient(160deg, rgba(176, 138, 255, 0.12), rgba(255, 255, 255, 0.03) 60%);
}

.pr-plan__name[b-tke09au4zl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

.pr-plan--pro .pr-plan__name[b-tke09au4zl] { color: var(--color-live); }
.pr-plan--group .pr-plan__name[b-tke09au4zl] { color: var(--color-groups); }

.pr-plan__price[b-tke09au4zl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1;
    margin: 0 0 var(--space-2);
}

.pr-plan__per[b-tke09au4zl] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.pr-plan__alt[b-tke09au4zl] {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.pr-plan__lede[b-tke09au4zl] {
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
    flex: 1;
}

.pr-plan__badge[b-tke09au4zl] {
    display: inline-block;
    line-height: 0;
    align-self: flex-start;
}

.pr-plan__badge img[b-tke09au4zl] { height: 50px; width: auto; }

.segment-cta .pr-plan__badge[b-tke09au4zl] { align-self: center; }
.segment-cta .pr-plan__badge img[b-tke09au4zl] { height: 56px; }

.pr-compare[b-tke09au4zl] {
    padding: var(--space-6) 0 var(--space-12);
}

.pr-compare__title[b-tke09au4zl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
    margin: 0 0 var(--space-5);
}

.pr-table[b-tke09au4zl] {
    max-width: 52rem;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.pr-table__row[b-tke09au4zl] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}

.pr-table__row:first-child[b-tke09au4zl] { border-top: 0; }

.pr-table__row--head[b-tke09au4zl] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-card-quiet);
}

.pr-table__row > span:not(.pr-table__feature)[b-tke09au4zl] {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* The Pro column reads as a stripe of light, like the paywall's table. */
.pr-table__pro[b-tke09au4zl] {
    color: var(--color-live) !important;
    font-weight: 600;
}

.pr-table__row--head .pr-table__pro[b-tke09au4zl] { color: var(--color-live) !important; }

.pr-table__feature[b-tke09au4zl] {
    font-weight: 600;
}

.pr-table__check[b-tke09au4zl] { font-weight: 700; }
.pr-table__check--pro[b-tke09au4zl] { color: var(--color-live); }
.pr-table__dash[b-tke09au4zl] { color: var(--color-text-muted); }

.pr-compare__note[b-tke09au4zl] {
    max-width: 52rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: var(--space-4) 0 0;
}

@media (max-width: 860px) {
    .pr-plans__grid[b-tke09au4zl] { grid-template-columns: 1fr; }
    .pr-table__row[b-tke09au4zl] {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-2);
        padding: var(--space-3);
    }
}

.pr-table__row--head > span:first-child[b-tke09au4zl] { text-align: left; }
/* /Components/Pages/Marketing/Stories/Index.razor.rz.scp.css */
/* Stories index — card grid of posts. Single column on mobile, two
   wide on tablet/desktop. Each card mirrors the elevated-surface
   vocabulary used by .faq-item (same border, same hover-strengthen
   border) so Stories doesn't introduce a new card shape. */

.stories-list[b-ha1garzjic] {
    padding: var(--space-8) 0 var(--space-10);
}

.stories-list__inner[b-ha1garzjic] {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 760px) {
    .stories-list__inner[b-ha1garzjic] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
}

.story-card[b-ha1garzjic] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.story-card:hover[b-ha1garzjic] {
    border-color: var(--color-border-strong);
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

.story-card__meta[b-ha1garzjic] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.story-card__dot[b-ha1garzjic] { color: var(--color-text-muted); }

.story-card__title[b-ha1garzjic] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-variation-settings: 'opsz' 36;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.story-card__excerpt[b-ha1garzjic] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}

.story-card__more[b-ha1garzjic] {
    margin-top: auto;
    color: var(--color-accent);
    font-weight: 500;
    font-size: var(--text-sm);
}
/* /Components/Pages/Marketing/Stories/LaunchingVrolu.razor.rz.scp.css */
/* Per-post body — quiet, reader-comfortable column. Constrained max-width
   matches FAQ's reading column (~720px) so long-form copy doesn't run to
   1000+ px on big monitors. Headings inherit the display-font + variable
   opsz axis the rest of the marketing surface uses. */

.story-hero__back[b-orh9iakpbb] {
    align-self: flex-start;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
    margin-bottom: var(--space-3);
    transition: color var(--duration-fast) var(--ease-out);
}

.story-hero__back:hover[b-orh9iakpbb] { color: var(--color-accent); }

.story-body[b-orh9iakpbb] {
    padding: var(--space-6) 0 var(--space-10);
}

.story-body__inner[b-orh9iakpbb] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.story-body__inner p[b-orh9iakpbb] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    line-height: 1.65;
}

.story-body__inner p em[b-orh9iakpbb] {
    color: var(--color-accent);
    font-style: italic;
}

.story-body__inner h2[b-orh9iakpbb] {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-variation-settings: 'opsz' 36;
    line-height: 1.25;
    color: var(--color-text-primary);
}

.story-body__inner a[b-orh9iakpbb] {
    color: var(--color-accent);
}

.story-body__signoff[b-orh9iakpbb] {
    margin-top: var(--space-4) !important;
    color: var(--color-text-secondary) !important;
    font-style: italic;
    font-size: var(--text-base) !important;
}
/* /Components/Pages/Trips/PublicFlight.razor.rz.scp.css */
/* Scoped styles for the public live-flight viewer (/f/{token}).

   PHONE FIRST. This link arrives in a text message; the desktop layout is
   the adaptation, not the base — so every rule here is the phone rule and
   the media queries only widen things. The one exception is the map, which
   is sized against the viewport at both ends because it is the hero.

   The "link's gone quiet" panel reuses the SAME .public-trip__missing* class
   names PublicTrip uses, but those rules are scoped to PublicTrip.razor — so
   we restate them here (one elevated "wrong gate" card vocabulary across both
   public surfaces). Status pills reuse the GLOBAL .timeline-row__pill* rules
   in app.css, so they're not duplicated. */

.public-trip__missing[b-km3ir7exl8] {
    max-width: 520px;
    margin: var(--space-12) auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.public-trip__missing-eyebrow[b-km3ir7exl8] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.public-trip__missing-title[b-km3ir7exl8] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-2);
}

.public-trip__missing-body[b-km3ir7exl8] {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
    line-height: 1.55;
}

/* ── Flight shell ─────────────────────────────────────────────────────── */
.flight-share[b-km3ir7exl8] {
    max-width: 720px;
    margin: var(--space-5) auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Header — iOS header(_:): the carrier mark, the code, the pill on the
   code's baseline; the day on a second row. ────────────────────────────── */
.flight-share__header[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.flight-share__header-row[b-km3ir7exl8] {
    display: flex;
    /* Row 1: mark and pill seat on the code's baseline (bottom edges align)
       — mirrors the iOS HStack(alignment: .bottom). */
    align-items: flex-end;
    gap: var(--space-3);
    min-width: 0;
}

/* Row 2: the day line. */
.flight-share__header-row--meta[b-km3ir7exl8] {
    align-items: baseline;
    justify-content: space-between;
}

/* The carrier mark (iOS AirlineLogoView, size 44): chip-scale, an
   identifier and never a banner. The monogram is the floor — it renders
   underneath, and a proxied logo simply paints over it. */
.flight-share__mark[b-km3ir7exl8] {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 2px;
}

.flight-share__mark-code[b-km3ir7exl8] {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
}

.flight-share__mark-logo[b-km3ir7exl8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--color-bg-elevated);
    padding: 4px;
}

/* iOS: .largeTitle, weight .bold. Takes the row's slack so the pill is
   pushed to the right edge. */
.flight-share__code[b-km3ir7exl8] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-text-primary);
}

/* iOS: .subheadline, .monospaced, white-opacity-0.5. */
.flight-share__day[b-km3ir7exl8] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* The zone we could NOT resolve, said out loud. Deliberately visible: a
   clock that isn't the traveler's wall clock has to announce itself
   (CLAUDE.md flight-pipeline rule 1). */
.flight-share__tz-note[b-km3ir7exl8] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--color-warning);
    margin-left: 0.3em;
}

/* iOS statusPill: caption bold, fg = status color, bg = status color @ .18,
   Capsule. The .timeline-row__pill--* rules in app.css already carry the
   per-state color/bg pairs; we just align the shape + weight to iOS here. */
.flight-share__status[b-km3ir7exl8] {
    flex: none;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ── Map ──────────────────────────────────────────────────────────────────
   The frame holds the map and the telemetry chip over it — the chip can't
   live inside the map element, which the script empties to mount the map.
   Height comes from the ROUTE, not the viewport: the server sets
   --flight-map-height from RouteMapMetrics (iOS FlightDetailView.cardHeight),
   which is 230 for anything domestic and grows only for the long-haul routes
   that physically can't fit at a map's maximum zoom-out.

   This replaced a clamp(320px, 52vh, 440px). A viewport-relative map ate half
   the phone and pushed the countdown and the times — the things someone taps
   this link for — under the fold, while ALSO looking emptier, because fitting
   a wide short route into a tall box leaves the slack as dead ocean. The
   iOS comment had already named the failure: the cap exists "so the page
   never becomes a map with a flight attached." */
.flight-share__map-frame[b-km3ir7exl8] {
    position: relative;
}

.flight-share__map[b-km3ir7exl8] {
    position: relative;
    width: 100%;
    height: var(--flight-map-height, 230px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg-sunken);
}

/* SSR fallback panel — also the permanent state when the Maps key is unset
   or live tracking is paused. The JS clears the container (.innerHTML = '')
   when it successfully swaps in a real map, so this only shows pre-map. */
.flight-share__map-fallback[b-km3ir7exl8] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
}

.flight-share__map-summary[b-km3ir7exl8] {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    margin: 0;
}

.flight-share__map-note[b-km3ir7exl8] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ── Route hero — iOS routeHero(_:): translucent card, radius 20, hairline,
   the two codes flanking the bar. ─────────────────────────────────────── */
.flight-share__hero[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}

.flight-share__hero-row[b-km3ir7exl8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* iOS: .system(size: 36, weight: .bold, design: .rounded). Plex is the
   display face and brings tabular figures with it. */
.flight-share__hero-iata[b-km3ir7exl8] {
    flex: none;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

/* The progress bar fills the middle, between the two codes. */
.flight-share__progress[b-km3ir7exl8] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* iOS FlightProgressBar: a 3pt track, white@.16. */
.flight-share__progress-track[b-km3ir7exl8] {
    position: relative;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
}

/* The fill's colour is the phase's colour — cyan while the journey is live,
   settling into the arrived blue once it's done, mint through a taxi. Same
   grammar as the pill directly above it (iOS colour call, July 16: the
   sunset gradient literally ENDS IN RED, so the bar got more alarming as
   the flight went better). */
.flight-share__progress-fill[b-km3ir7exl8] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: var(--radius-pill);
    background: var(--color-live);
    transition: width var(--duration-slow) var(--ease-out);
}

/* Terminal + taxi states repaint the fill. No head marker (iOS, July 18):
   the fill edge IS the position. */
.flight-share__progress[data-phase="landed"] .flight-share__progress-fill[b-km3ir7exl8] {
    background: var(--color-landed);
}

.flight-share__progress[data-phase="taxiing"] .flight-share__progress-fill[b-km3ir7exl8],
.flight-share__progress[data-phase="taxiingOut"] .flight-share__progress-fill[b-km3ir7exl8] {
    background: var(--color-taxi);
}

/* The taxi is genuinely indeterminate, so it gets the indeterminate
   treatment (iOS TaxiShimmer): a soft WHITE band about a third of the
   track, feathered at both ends, sweeping left to right every 2.2 s so it
   reads as light moving over the bar. White, not the bar's tint: a taxi-in
   pins the bar full mint, and a mint band over a mint fill was invisible. */
.flight-share__progress-shimmer[b-km3ir7exl8] {
    display: none;
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    min-width: 28px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: flight-share-taxi-shimmer-b-km3ir7exl8 2.2s linear infinite;
}

.flight-share__progress[data-phase="taxiing"] .flight-share__progress-shimmer[b-km3ir7exl8],
.flight-share__progress[data-phase="taxiingOut"] .flight-share__progress-shimmer[b-km3ir7exl8] {
    display: block;
}

@keyframes flight-share-taxi-shimmer-b-km3ir7exl8 {
    from { transform: translateX(-100%); }
    to   { transform: translateX(300%); }
}

/* The countdown line. Bigger than the iOS caption2 because on this page it
   is the sentence the viewer came for — "lands in 3h 12m" is the answer to
   the question that made them tap the link. */
.flight-share__progress-label[b-km3ir7exl8] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Missing / meaningless times — collapse the bar rather than show a bare
   track with nothing to say. */
.flight-share__progress[hidden][b-km3ir7exl8] {
    display: none;
}

/* The two glances under the codes (iOS routeHero's two VStacks): the city,
   the effective clock, the conditions, the gate sign — leading on the left,
   trailing on the right. */
.flight-share__hero-meta[b-km3ir7exl8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.flight-share__hero-end[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.flight-share__hero-end--trailing[b-km3ir7exl8] {
    align-items: flex-end;
    text-align: right;
}

.flight-share__hero-city[b-km3ir7exl8] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* The hero column's time, telling the truth: the EFFECTIVE instant in
   orange when slipped (original struck beside it), plain white when on
   schedule — the same math the Departure card runs, one screen sooner. */
.flight-share__hero-time[b-km3ir7exl8] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.flight-share__hero-time-now[b-km3ir7exl8] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.flight-share__hero-time-now--late[b-km3ir7exl8] {
    color: var(--color-warning);
}

.flight-share__hero-time-was[b-km3ir7exl8] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.flight-share__hero-weather[b-km3ir7exl8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The gate as a mini SIGN (iOS heroGate): amber capsule, ink text, the
   tense glyph beside the number — "↗ C21 · T1", one line, the same grammar
   as the big board below and the Lock Screen sign. */
.flight-share__hero-gate[b-km3ir7exl8] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.flight-share__hero-gate .flight-share__gate-glyph[b-km3ir7exl8] {
    width: 11px;
    height: 11px;
}

/* ── Status history, inside the journey card ─────────────────────────────
   Collapsed: the latest transition as a one-line teaser under a hairline.
   Open: the whole timeline. Same tap-target / rotating-chevron grammar as
   the app's journey card. */
.flight-share__history[b-km3ir7exl8] {
    margin-top: 2px;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
}

.flight-share__history-summary[b-km3ir7exl8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    font-size: var(--text-xs);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}

.flight-share__history-summary[b-km3ir7exl8]::-webkit-details-marker {
    display: none;
}

.flight-share__history-teaser[b-km3ir7exl8] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 auto;
}

/* The teaser hides when open (the newest row isn't shown twice); the
   heading takes its place. */
.flight-share__history-title[b-km3ir7exl8] {
    display: none;
    flex: 1 1 auto;
    color: var(--color-text-muted);
}

.flight-share__history[open] .flight-share__history-teaser[b-km3ir7exl8] {
    display: none;
}

.flight-share__history[open] .flight-share__history-title[b-km3ir7exl8] {
    display: block;
}

.flight-share__history-clock[b-km3ir7exl8] {
    font-weight: 400;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.flight-share__history-chevron[b-km3ir7exl8] {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--color-text-muted);
    transition: transform 180ms ease-in-out;
}

.flight-share__history[open] .flight-share__history-chevron[b-km3ir7exl8] {
    transform: rotate(90deg);
}

/* The headline's tint: white by default, the sunset amber when something
   moved, the live cyan for good news (iOS historyChange). */
.flight-share__history-label--plain[b-km3ir7exl8] { color: var(--color-text-primary); }
.flight-share__history-label--attention[b-km3ir7exl8] { color: var(--color-accent); }
.flight-share__history-label--live[b-km3ir7exl8] { color: var(--color-live); }

.flight-share__history-list[b-km3ir7exl8] {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.flight-share__history-row[b-km3ir7exl8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.flight-share__history-dot[b-km3ir7exl8] {
    flex: none;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: rgba(255, 179, 71, 0.8);
}

.flight-share__history-body[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.flight-share__history-row .flight-share__history-label[b-km3ir7exl8] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.flight-share__history-when[b-km3ir7exl8] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.flight-share__history-chips[b-km3ir7exl8] {
    display: flex;
    gap: var(--space-2);
    margin-top: 2px;
}

/* iOS chip(_:): caption medium on a white-8% capsule. */
.flight-share__chip[b-km3ir7exl8] {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* ── The two ends ─────────────────────────────────────────────────────────
   Stacked on the phone, side by side once there's room. Each card owns its
   end's whole story; nothing here is repeated from the hero above. */
.flight-share__ends[b-km3ir7exl8] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.flight-share__end[b-km3ir7exl8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.flight-share__end-times[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.flight-share__end-label[b-km3ir7exl8] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.flight-share__end-day[b-km3ir7exl8] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.flight-share__end-clock[b-km3ir7exl8] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* The live instant, leading (iOS #52: the effective time is the answer;
   the planned one is history). */
.flight-share__end-clock-now[b-km3ir7exl8] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Slipped: the new time takes the warning orange (amber is airborne;
   orange is trouble — the July 16 colour grammar). */
.flight-share__end-clock-now--late[b-km3ir7exl8] {
    color: var(--color-warning);
}

/* The original, struck, beside it. A small figure, not a headline — a
   14-minute slip must read as a nudge, not an alarm. */
.flight-share__end-clock-was[b-km3ir7exl8] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.flight-share__end-delay[b-km3ir7exl8] {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-warning);
}

.flight-share__end-weather[b-km3ir7exl8] {
    margin: 2px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The board column: the gate sign, with terminal and baggage as the fine
   print beneath it. Centred on the sign's width, iOS-style. */
.flight-share__end-board[b-km3ir7exl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: none;
}

/* The gate as a SIGN — amber board, ink text (iOS gateBoard). The amber
   already says "gate" by shape, so the word never appears; the aria-label
   says it for screen readers. */
.flight-share__gate[b-km3ir7exl8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 52px;
    justify-content: center;
    padding: 5px 10px;
    border-radius: var(--radius-sm);   /* a tile, like the app's 10pt board */
    background: var(--color-accent);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.flight-share__gate .flight-share__gate-glyph[b-km3ir7exl8] {
    width: 12px;
    height: 12px;
    opacity: 0.9;
}

/* No gate yet: the quiet dark board with dashes (iOS gateBoard's
   honest-empty state). */
.flight-share__gate--empty[b-km3ir7exl8] {
    background: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.3);
}

.flight-share__gate--empty .flight-share__gate-glyph[b-km3ir7exl8] {
    color: rgba(255, 255, 255, 0.5);
}

.flight-share__end-sub[b-km3ir7exl8] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Apple's WeatherKit attribution requirement — shown exactly where their
   data is on screen. Fine print, not a feature (same treatment as the app's
   weatherAttribution). */
.flight-share__wx-attribution[b-km3ir7exl8] {
    margin: calc(var(--space-2) * -1) 0 0;
    text-align: right;
    font-size: var(--text-xs);
}

.flight-share__wx-attribution a[b-km3ir7exl8] {
    color: var(--color-text-muted);
    text-decoration: none;
}

.flight-share__wx-attribution a:hover[b-km3ir7exl8] {
    text-decoration: underline;
}

/* The freshness stamp (iOS: caption2, white at 40%, centred). */
.flight-share__updated[b-km3ir7exl8] {
    margin: 0;
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.4);
}

/* Live telemetry over the map (iOS liveTelemetryChip): thin material
   capsule, top-centre, the speedometer in the live cyan. */
.flight-share__telemetry[b-km3ir7exl8] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(11, 10, 22, 0.55);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    pointer-events: none;
}

.flight-share__telemetry[hidden][b-km3ir7exl8] {
    display: none;
}

.flight-share__telemetry svg[b-km3ir7exl8] {
    width: 14px;
    height: 14px;
    color: var(--color-live);
    flex: none;
}

/* The words under the map (iOS LiveMapCaptionLine): caption weight, the
   radio glyph in the Pro cyan, no spinner — only one of these sentences
   describes waiting, and spinning at "Live tracking starts at takeoff"
   promises an arrival that isn't coming. */
.flight-share__caption[b-km3ir7exl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: calc(var(--space-2) * -1) 0 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.flight-share__caption[hidden][b-km3ir7exl8] {
    display: none;
}

.flight-share__caption svg[b-km3ir7exl8] {
    width: 14px;
    height: 14px;
    color: var(--color-live);
    flex: none;
}

/* ── Live map marker (the iOS LivePlaneMarker halo) lives in GLOBAL app.css,
   NOT here. The JS mounts <div class="flight-share__live-dot"> into a Google
   Maps pane, which is OUTSIDE this component's scoped-CSS subtree — Blazor's
   scoped selectors would never match it, so the dot would render unstyled
   (invisible). Keep those rules global. ──────────────────────────────────── */

/* ── Wider than a phone ─────────────────────────────────────────────────── */
@media (min-width: 34rem) {
    .flight-share[b-km3ir7exl8] {
        margin-top: var(--space-6);
        gap: var(--space-5);
    }

    .flight-share__code[b-km3ir7exl8] {
        font-size: var(--text-4xl);
    }

    .flight-share__hero-iata[b-km3ir7exl8] {
        font-size: 36px;
    }

    .flight-share__hero[b-km3ir7exl8],
    .flight-share__end[b-km3ir7exl8] {
        padding: 18px;
    }

    .flight-share__ends[b-km3ir7exl8] {
        grid-template-columns: 1fr 1fr;
    }

    .flight-share__progress-label[b-km3ir7exl8] {
        font-size: var(--text-base);
    }
}

/* A desktop card is twice as wide as a phone's, so the same height reads as
   a letterbox slot. A fixed bump keeps the route-driven rule intact while
   restoring a sane aspect on a wide window. */
@media (min-width: 60rem) {
    .flight-share__map[b-km3ir7exl8] {
        height: calc(var(--flight-map-height, 230px) + 80px);
    }
}

/* Honour reduced-motion: the bar still moves, it just doesn't animate. */
@media (prefers-reduced-motion: reduce) {
    .flight-share__progress-fill[b-km3ir7exl8] {
        transition: none;
    }

    .flight-share__progress-shimmer[b-km3ir7exl8] {
        animation: none;
        opacity: 0.35;
        transform: translateX(100%);
    }
}
/* /Components/Shared/GetTheAppBanner.razor.rz.scp.css */
/* "Get the app" funnel banner — scoped styles. Calm card that reads as an
   invitation, not an interstitial: sits at the bottom of the public trip /
   flight surfaces, uses the same token vocabulary as the rest of the app. */

.get-app[b-2ilhh7h7lg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-8) 0 var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.get-app__body[b-2ilhh7h7lg] {
    min-width: 0;
}

.get-app__headline[b-2ilhh7h7lg] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.get-app__sub[b-2ilhh7h7lg] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* The door column — the badge and, when a surface passes one, the exact
   price line under it. Its own element so the badge keeps its intrinsic
   width while the price can wrap under it. */
.get-app__door[b-2ilhh7h7lg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Apple black-pill badge convention. Fixed dark surface (not a token) so it
   reads as the App Store badge in both light and dark themes. */
.get-app__badge[b-2ilhh7h7lg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    background: #000;
    color: #fff;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: transform 120ms ease, opacity 120ms ease;
}

.get-app__badge:hover[b-2ilhh7h7lg] {
    opacity: 0.9;
}

.get-app__badge:active[b-2ilhh7h7lg] {
    transform: scale(0.98);
}

.get-app__apple[b-2ilhh7h7lg] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.get-app__badge-text[b-2ilhh7h7lg] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: left;
}

.get-app__badge-small[b-2ilhh7h7lg] {
    font-size: 10px;
    letter-spacing: 0.02em;
}

.get-app__badge-big[b-2ilhh7h7lg] {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Stack on narrow phones so the badge never crowds the copy. */
@media (max-width: 30rem) {
    .get-app[b-2ilhh7h7lg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .get-app__door[b-2ilhh7h7lg] {
        align-self: stretch;
        align-items: stretch;
    }

    .get-app__badge[b-2ilhh7h7lg] {
        align-self: stretch;
        justify-content: center;
    }

    .get-app__price[b-2ilhh7h7lg] {
        text-align: center;
    }
}

/* ── The card-sized upgrade door (UI_STYLE_GUIDE, "The Selling Law") ────
   Only when a surface passes Proof and/or PriceLine. The invitation
   version above is unchanged — /t/{slug} still renders the two-line
   banner byte for byte. */
.get-app--door[b-2ilhh7h7lg] {
    align-items: flex-start;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
}

/* One true capability per line, each with its check. The tick takes the
   live cyan — this list IS the Pro family's promise, and cyan is that
   family's colour everywhere else in the product. */
.get-app__proof[b-2ilhh7h7lg] {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.get-app__proof li[b-2ilhh7h7lg] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.45;
}

.get-app__proof svg[b-2ilhh7h7lg] {
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 0.18em;
    color: var(--color-live);
}

/* The exact figures, under the badge. Mono because they are data — the
   "this is a real number" signal the type split reserves it for. */
.get-app__price[b-2ilhh7h7lg] {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: right;
}
/* /Components/Shared/WeatherGlyphIcon.razor.rz.scp.css */
/* The weather glyph sizes itself off the text it sits beside, so a chip's
   font-size is the only knob — and inherits `currentColor`, so the glyph and
   the temperature are always one object. */
.wx-glyph[b-je4z23abej] {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    display: block;
    overflow: visible;
}