@import '_content/Vrolu.Components/Vrolu.Components.7nbdvx26c0.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-primary-soft);
        color: var(--color-primary);
    }

    .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;
    background: color-mix(in srgb, var(--color-bg-base) 92%, transparent);
    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);
}

.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);
}

/* Sign-out icon button shown when the visitor is already signed in.
   Uses the global .icon-button primitive — see app.css and
   UI_STYLE_GUIDE.md "Top toolbar". */
.marketing__signout-form[b-saer8po930] { margin: 0; }

.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-primary); }

/* ---------------------------------------------------------------
   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; }

    /* 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/PublicTripLayout.razor.rz.scp.css */
.public[b-cvxf311vvx] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public__header[b-cvxf311vvx] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg-base) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

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

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

.public__actions[b-cvxf311vvx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Phase 8 polish — sign-out icon for the (rare) case of an organizer
   pulling up their own public link while signed in. Travelers arriving
   from a group-chat tap never render this. Matches ThemeToggle weight. */
.public__signout-form[b-cvxf311vvx] { margin: 0; }

.public__signout-btn[b-cvxf311vvx] {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

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

.public__signout-btn svg[b-cvxf311vvx] {
    width: 18px;
    height: 18px;
}

.public__main[b-cvxf311vvx] {
    flex: 1;
    padding: var(--space-6) 0 var(--space-10);
}

.public__footer[b-cvxf311vvx] {
    border-top: 1px solid var(--color-border);
    padding: var(--space-5) 0;
}

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

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

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

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

.public__cta[b-cvxf311vvx] {
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
}

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

@media (max-width: 540px) {
    .public__footer-inner[b-cvxf311vvx] {
        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(--warning, #e0a106);
}

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

.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;
}

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

.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;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-hero[b-ldrntsnzoa] {
    padding: var(--space-10) 0 var(--space-12);
    position: relative;
    overflow: hidden;
}

.home-hero[b-ldrntsnzoa]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 80% 0%, var(--color-primary-soft), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.home-hero__inner[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-10);
    align-items: center;
    position: relative;
    z-index: 1;
}

.home-hero__eyebrow[b-ldrntsnzoa] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

.home-hero__title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-5);
    font-variation-settings: 'opsz' 144;
}

.home-hero__title-accent[b-ldrntsnzoa] {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    /* Italic right-side bearing rescue — see .segment-hero__title-accent
       in app.css for the long explanation. */
    padding-right: 0.08em;
}

.home-hero__lede[b-ldrntsnzoa] {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 56ch;
    margin: 0 0 var(--space-6);
    line-height: 1.55;
}

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

.home-hero__cta[b-ldrntsnzoa] {
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
}

/* Fraunces "+" prefix used inside the authed "+ New trip" CTA. Mirrors
   .app__new-trip-plus in AppLayout so the same glyph reads the same in
   both surfaces — see UI_STYLE_GUIDE.md "Top toolbar". */
.home-hero__cta-plus[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1;
    font-variation-settings: 'opsz' 36;
}

.home-hero__secondary[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    font-weight: 500;
    text-decoration: none;
}

.home-hero__secondary:hover[b-ldrntsnzoa] { color: var(--color-text-primary); }

.home-hero__audiences[b-ldrntsnzoa] {
    margin: var(--space-6) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.home-hero__audiences a[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border-strong);
}

.home-hero__audiences a:hover[b-ldrntsnzoa] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.home-hero__art[b-ldrntsnzoa] {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    filter: drop-shadow(0 24px 60px rgba(255, 107, 91, 0.20));
}

.home-pitch[b-ldrntsnzoa] {
    padding: var(--space-10) 0;
    border-top: 1px solid var(--color-border);
}

.home-pitch__grid[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
}

.home-pitch__card[b-ldrntsnzoa] {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.home-pitch__card:hover[b-ldrntsnzoa] {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

.home-pitch__eyebrow[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
    font-variation-settings: 'opsz' 36;
    line-height: 1.2;
}

.home-pitch__body[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .home-hero__inner[b-ldrntsnzoa] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .home-hero__art[b-ldrntsnzoa] { order: -1; }
    .home-hero__art[b-ldrntsnzoa]  .vrolu-logo__mark { width: 200px; height: 200px; }
}

/* "Who it's for" — segment funnel + internal linking. */

.home-segments[b-ldrntsnzoa] {
    padding: var(--space-10) 0 var(--space-12);
    border-top: 1px solid var(--color-border);
}

.home-segments__header[b-ldrntsnzoa] {
    max-width: 640px;
    margin: 0 0 var(--space-8);
}

.home-segments__eyebrow[b-ldrntsnzoa] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-3);
}

.home-segments__title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    margin: 0;
    line-height: 1.15;
    font-variation-settings: 'opsz' 96;
}

.home-segments__grid[b-ldrntsnzoa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}

.home-segments__card[b-ldrntsnzoa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    min-height: 44px;
}

.home-segments__card:hover[b-ldrntsnzoa] {
    border-color: var(--color-primary-soft);
    transform: translateY(-2px);
    color: inherit;
}

.home-segments__card-title[b-ldrntsnzoa] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin: 0;
    color: var(--color-text-primary);
    font-variation-settings: 'opsz' 36;
    line-height: 1.2;
}

.home-segments__card-body[b-ldrntsnzoa] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.55;
    flex: 1;
}

.home-segments__card-link[b-ldrntsnzoa] {
    margin-top: var(--space-2);
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--text-sm);
}

.home-segments__card:hover .home-segments__card-link[b-ldrntsnzoa] {
    color: var(--color-primary-strong);
}
/* /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-bg-elevated);
    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-primary);
    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-primary);
}

.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-primary);
}
/* /Components/Pages/Marketing/HowItWorks.razor.rz.scp.css */
.hiw-steps[b-j1ylul8vj7] {
    padding: var(--space-8) 0 var(--space-10);
}

.hiw-steps__list[b-j1ylul8vj7] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.hiw-step[b-j1ylul8vj7] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.hiw-step:hover[b-j1ylul8vj7] {
    border-color: var(--color-border-strong);
    transform: translateY(-2px);
}

.hiw-step__art[b-j1ylul8vj7] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 12px 32px rgba(255, 107, 91, 0.18));
}

.hiw-step__art svg[b-j1ylul8vj7] {
    width: 100%;
    height: 100%;
}

.hiw-step__body[b-j1ylul8vj7] {
    min-width: 0;
}

.hiw-step__count[b-j1ylul8vj7] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-2);
}

.hiw-step__title[b-j1ylul8vj7] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
    margin: 0 0 var(--space-3);
    font-variation-settings: 'opsz' 48;
    line-height: 1.2;
}

.hiw-step__copy[b-j1ylul8vj7] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 60ch;
}

@media (max-width: 640px) {
    .hiw-step[b-j1ylul8vj7] {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .hiw-step__art[b-j1ylul8vj7] {
        width: 88px;
        height: 88px;
    }
}
/* /Components/Pages/Marketing/Pricing.razor.rz.scp.css */
.pricing-card-section[b-tke09au4zl] {
    padding: var(--space-8) 0 var(--space-10);
}

.pricing-card-section__inner[b-tke09au4zl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    gap: var(--space-8);
    align-items: start;
}

.pricing-card[b-tke09au4zl] {
    padding: var(--space-8);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-bg-elevated);
    position: relative;
    overflow: hidden;
}

.pricing-card[b-tke09au4zl]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at 100% 0%, var(--color-primary-soft), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.pricing-card > *[b-tke09au4zl] {
    position: relative;
    z-index: 1;
}

.pricing-card__header[b-tke09au4zl] {
    margin-bottom: var(--space-6);
}

.pricing-card__eyebrow[b-tke09au4zl] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-3);
}

.pricing-card__price[b-tke09au4zl] {
    margin: 0 0 var(--space-3);
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    font-family: var(--font-display);
    color: var(--color-text-primary);
    font-variation-settings: 'opsz' 144;
}

.pricing-card__currency[b-tke09au4zl] {
    font-size: var(--text-3xl);
    color: var(--color-text-secondary);
}

.pricing-card__amount[b-tke09au4zl] {
    font-size: clamp(var(--text-5xl), 9vw, var(--text-6xl));
    line-height: 1;
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    /* Italic right-side bearing rescue — see .segment-hero__title-accent
       in app.css for the long explanation. */
    padding-right: 0.08em;
}

.pricing-card__cadence[b-tke09au4zl] {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}

.pricing-card__tagline[b-tke09au4zl] {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.5;
    max-width: 44ch;
}

.pricing-card__features[b-tke09au4zl] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pricing-card__features li[b-tke09au4zl] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: 1.5;
}

.pricing-card__features code[b-tke09au4zl] {
    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-secondary);
}

.pricing-card__check[b-tke09au4zl] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1;
}

.pricing-card__cta[b-tke09au4zl] {
    display: inline-block;
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-6);
}

.pricing-card__footnote[b-tke09au4zl] {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pricing-card__sidebar[b-tke09au4zl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pricing-note[b-tke09au4zl] {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
}

.pricing-note__eyebrow[b-tke09au4zl] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2);
}

.pricing-note__body[b-tke09au4zl] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.pricing-note__body a[b-tke09au4zl] {
    color: var(--color-primary);
}

.pricing-future[b-tke09au4zl] {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
}

.pricing-future__inner[b-tke09au4zl] {
    max-width: 720px;
}

.pricing-future__eyebrow[b-tke09au4zl] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-accent);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-3);
}

.pricing-future__title[b-tke09au4zl] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
    margin: 0 0 var(--space-4);
    font-variation-settings: 'opsz' 72;
}

.pricing-future__copy[b-tke09au4zl] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.6;
    max-width: 56ch;
}

@media (max-width: 840px) {
    .pricing-card-section__inner[b-tke09au4zl] {
        grid-template-columns: 1fr;
    }
    .pricing-card[b-tke09au4zl] {
        padding: var(--space-6);
    }
}
/* /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-primary);
    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-primary); }

.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-primary);
    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-primary);
}

.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/AddFlightForm.razor.rz.scp.css */
.add-flight-form[b-cv2feldf7f] {
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-3);
}

.add-flight-form__grid[b-cv2feldf7f] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.add-flight-form__grid > div[b-cv2feldf7f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.add-flight-form__actions[b-cv2feldf7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.add-flight-form__cancel[b-cv2feldf7f] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
}

.add-flight-form__cancel:hover[b-cv2feldf7f] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.add-flight-form__hint[b-cv2feldf7f] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    line-height: 1.5;
}

.add-flight-form__preview[b-cv2feldf7f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.add-flight-form__preview-label[b-cv2feldf7f] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.add-flight-form__preview-segment[b-cv2feldf7f] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
}

.add-flight-form__preview-code[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.add-flight-form__preview-route[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.add-flight-form__preview-time[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-left: auto;
}

@media (max-width: 720px) {
    .add-flight-form__grid[b-cv2feldf7f] {
        grid-template-columns: 1fr;
    }

    .add-flight-form__preview-segment[b-cv2feldf7f] {
        flex-wrap: wrap;
    }

    .add-flight-form__preview-time[b-cv2feldf7f] {
        margin-left: 0;
    }
}

/* Compact mode — set by hosts where the form lives in a narrow container
   (the TripDetail "Add flight" drawer is min(480px, 90vw) on desktop).
   Forces single-column field layouts regardless of viewport width. */
.add-flight-form--compact .add-flight-form__grid[b-cv2feldf7f] {
    grid-template-columns: 1fr;
}

.add-flight-form--compact .add-flight-form__preview-segment[b-cv2feldf7f] {
    flex-wrap: wrap;
}

.add-flight-form--compact .add-flight-form__preview-time[b-cv2feldf7f] {
    margin-left: 0;
}

/* Route picker — origin + destination side-by-side with an arrow between.
   Compact (3-letter codes) and prominent because they're the most important
   inputs. Stacks vertically on narrow viewports. */
.add-flight-form__route[b-cv2feldf7f] {
    display: flex;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

/* Manual sub-form: single-field origin block (no destination here —
   that's learned from the looked-up flight number). Matches route
   block's bottom margin so the form rhythm stays consistent. */
.add-flight-form__manual-origin[b-cv2feldf7f] {
    margin-bottom: var(--space-3);
}

.add-flight-form__airport[b-cv2feldf7f] {
    flex: 1 1 0;
    min-width: 0;
}

.add-flight-form__route-arrow[b-cv2feldf7f] {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    padding-bottom: var(--space-2);
    flex-shrink: 0;
    user-select: none;
}

@media (max-width: 480px) {
    .add-flight-form__route[b-cv2feldf7f] {
        flex-direction: column;
        align-items: stretch;
    }
    .add-flight-form__route-arrow[b-cv2feldf7f] {
        text-align: center;
        padding: 0;
        transform: rotate(90deg);
    }
}

.add-flight-form--compact .add-flight-form__route[b-cv2feldf7f] {
    flex-direction: column;
    align-items: stretch;
}

.add-flight-form--compact .add-flight-form__route-arrow[b-cv2feldf7f] {
    text-align: center;
    padding: 0;
    transform: rotate(90deg);
}

/* Multi-leg preview — show layover hint between segments. */
.add-flight-form__preview-leg-num[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    margin-right: var(--space-2);
}

.add-flight-form__preview-layover[b-cv2feldf7f] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin: 0 0 var(--space-2) var(--space-4);
    padding: var(--space-1) 0;
}

.add-flight-form__preview-badge[b-cv2feldf7f] {
    display: inline-block;
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
}

/* Diagnostic line — when journey lookup picked among multiple candidates,
   tell the user what we picked so they can correct if needed. Below the
   preview, above the action buttons. Subtle, not alarming. */
.add-flight-form__diagnostic[b-cv2feldf7f] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    border-left: 3px solid var(--color-text-muted);
    padding: var(--space-2) var(--space-3);
    margin: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ─────────── First-leg flight-number dropdown ───────────
   Suggest UI for the "First flight #" input. When the user has filled
   in airline + origin + date and focuses the field, ListAirlineDepartures
   fires and the dropdown shows the matching scheduled flights for that
   carrier on that day. Click an item to populate the input — they still
   tap "Look up journey" to advance to the preview step, same flow as
   typing the code by hand.

   Position is absolute so the dropdown can overflow the form's column
   without pushing other fields down. Anchored to the wrapping
   .flight-number-suggest container which is position: relative. */
.flight-number-suggest[b-cv2feldf7f] {
    position: relative;
}

.flight-number-suggest__dropdown[b-cv2feldf7f] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    /* Stop iOS Safari momentum-scroll from bleeding into the page. */
    -webkit-overflow-scrolling: touch;
}

.flight-number-suggest__loading[b-cv2feldf7f],
.flight-number-suggest__empty[b-cv2feldf7f] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.flight-number-suggest__item[b-cv2feldf7f] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--space-3);
    align-items: baseline;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.flight-number-suggest__item:last-child[b-cv2feldf7f] {
    border-bottom: 0;
}

@media (hover: hover) {
    .flight-number-suggest__item:hover[b-cv2feldf7f] {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    }
}

.flight-number-suggest__item:focus-visible[b-cv2feldf7f] {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.flight-number-suggest__code[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.flight-number-suggest__time[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    /* Time stays in the middle column; truncate gracefully on narrow
       form widths rather than wrapping into the route column. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flight-number-suggest__route[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ─────────── Multi-pathway chooser ───────────
   Renders between lookup and preview when JourneyLookupResult.Alternatives
   contains more than one valid connection. Each alternative is a full
   journey card the user can tap to commit. Hint copy above tells them
   which one to pick ("matches your booking"). Layover badge per option
   surfaces the time-on-ground between anchor and connection — the most
   useful single-glance disambiguator. */
.add-flight-form__chooser[b-cv2feldf7f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.add-flight-form__chooser-hint[b-cv2feldf7f] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.add-flight-form__chooser-option[b-cv2feldf7f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .add-flight-form__chooser-option:hover[b-cv2feldf7f] {
        background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-elevated));
        border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    }
}

.add-flight-form__chooser-option:focus-visible[b-cv2feldf7f] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.add-flight-form__chooser-headline[b-cv2feldf7f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.add-flight-form__chooser-layover[b-cv2feldf7f] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: 2px var(--space-2);
    background: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
/* /Components/Pages/Trips/Index.razor.rz.scp.css */
.dash-header[b-xlshjp4du9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.dash-header__eyebrow[b-xlshjp4du9] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    margin: 0 0 var(--space-2);
}

.dash-header__title[b-xlshjp4du9] {
    font-size: var(--text-3xl);
    margin: 0;
    font-variation-settings: 'opsz' 96;
}

.dash-header__name[b-xlshjp4du9] {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    /* Italic right-side bearing rescue — see .segment-hero__title-accent
       in app.css for the long explanation. */
    padding-right: 0.08em;
}

.dash-header__cta[b-xlshjp4du9] {
    flex-shrink: 0;
}

.dash-empty[b-xlshjp4du9] {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-bg-elevated);
}

.dash-empty__icon[b-xlshjp4du9] {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-3);
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dash-empty__title[b-xlshjp4du9] {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-3);
    font-variation-settings: 'opsz' 48;
}

.dash-empty__body[b-xlshjp4du9] {
    color: var(--color-text-secondary);
    max-width: 48ch;
    margin: 0 auto var(--space-6);
}

@media (max-width: 720px) {
    .dash-header[b-xlshjp4du9] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.dash-trips[b-xlshjp4du9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.dash-trip-card[b-xlshjp4du9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.dash-trip-card:hover[b-xlshjp4du9] {
    border-color: var(--color-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-primary);
}

.dash-trip-card__header[b-xlshjp4du9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.dash-trip-card__name[b-xlshjp4du9] {
    font-size: var(--text-xl);
    margin: 0;
    font-variation-settings: 'opsz' 36;
}

.dash-trip-card__status[b-xlshjp4du9] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.dash-trip-card__status--paid[b-xlshjp4du9],
.dash-trip-card__status--active[b-xlshjp4du9] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.dash-trip-card__meta[b-xlshjp4du9] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.dash-trip-card__count[b-xlshjp4du9] {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    margin: 0;
}

/* Filter strip — sits between the page header and the trip grid. Status-style
   so it reads as metadata, not as primary CTA. */
.dash-filters[b-xlshjp4du9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-2) 0;
}

.dash-filters__label[b-xlshjp4du9] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-filters__toggle[b-xlshjp4du9] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.dash-filters__toggle:hover[b-xlshjp4du9] {
    background: var(--color-bg-sunken);
    color: var(--color-text-primary);
    text-decoration: none;
}

.dash-filters__toggle--active[b-xlshjp4du9] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: var(--color-primary-soft);
}

/* Archived trip card variant — visually muted so it reads as background. */
.dash-trip-card--archived[b-xlshjp4du9] {
    opacity: 0.65;
}

.dash-trip-card--archived:hover[b-xlshjp4du9] {
    opacity: 1;
}

/* Status pill colors for the new states. */
.dash-trip-card__status--archived[b-xlshjp4du9] {
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
}

.dash-trip-card__status--completed[b-xlshjp4du9] {
    background: var(--color-bg-sunken);
    color: var(--color-text-secondary);
}

/* Smaller empty-state variant used when filter returns nothing. */
.dash-empty--small[b-xlshjp4du9] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
/* /Components/Pages/Trips/InviteFlight.razor.rz.scp.css */
/* Phase 3.6 — Traveler-side magic-link invite page (/i/{token}).

   Spacing strategy: every direct child of .invite-page after the header gets
   the same top-margin via the `> * + *` combinator. That keeps the vertical
   rhythm consistent regardless of which optional sections render (flash,
   flights, form, add-more button, view-trip line).

   Note on tokens: the project's space scale jumps from --space-6 to --space-8
   (no 7, 9, 11, …). Stick to the defined steps; an undefined var() silently
   resolves to 0 and collapses everything. */

.invite-page[b-2navyllntc] {
    max-width: 640px;
    margin-inline: auto;
    /* Asymmetric: more space below than above so the layout footer doesn't
       crowd the last body section. */
    padding-block: var(--space-8) var(--space-12);
    padding-inline: var(--space-4);
}

.invite-page > * + *[b-2navyllntc] {
    margin-top: var(--space-6);
}

/* The status-footer block sits a half-step further from the previous
   section than the standard rhythm — gives the surface a clear "you're
   done here" close. */
.invite-page > .invite-page__view-trip[b-2navyllntc] {
    margin-top: var(--space-8);
}

.invite-page__header[b-2navyllntc] {
    /* margin-bottom intentionally omitted — the > * + * rule handles the
       gap to whatever section follows. */
    margin-bottom: 0;
}

.invite-page__eyebrow[b-2navyllntc] {
    margin: 0 0 var(--space-2) 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invite-page__title[b-2navyllntc] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    line-height: 1.05;
    color: var(--color-text-primary);
}

.invite-page__meta[b-2navyllntc] {
    margin: var(--space-3) 0 0 0;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.invite-page__hello[b-2navyllntc] {
    margin: var(--space-5) 0 0 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* ---------- Turnstile gate ---------- */

.invite-page__challenge[b-2navyllntc] {
    background: var(--color-bg-sunken);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border-strong);
}

.invite-page__challenge .cf-turnstile[b-2navyllntc] {
    margin-top: var(--space-3);
    min-height: 65px;   /* widget renders ~65px tall; reserve space so the
                           layout doesn't shift when it finishes loading. */
}

/* ---------- Inline status message ---------- */

.invite-page__flash[b-2navyllntc] {
    /* .form-info supplies the look; only the layout participation matters here. */
}

/* ---------- Your flights ---------- */

.invite-page__flights-title[b-2navyllntc] {
    margin: 0 0 var(--space-4) 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.invite-page__flights-list[b-2navyllntc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.invite-page__flight-row[b-2navyllntc] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color 120ms ease;
}

.invite-page__flight-row:hover[b-2navyllntc] {
    border-color: var(--color-border-strong);
}

.invite-page__flight-leg[b-2navyllntc] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.invite-page__flight-route[b-2navyllntc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.invite-page__flight-times[b-2navyllntc] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.invite-page__flight-remove[b-2navyllntc] {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.invite-page__flight-remove:hover:not(:disabled)[b-2navyllntc] {
    background: var(--color-primary-soft);
    color: var(--color-danger);
    border-color: var(--color-primary-soft);
}

.invite-page__flight-remove:disabled[b-2navyllntc] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Add-flight form panel ---------- */

.invite-page__form[b-2navyllntc] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* ---------- Phase 6.6 — LocalFriend accept surface ----------
   Same elevated panel shape as the flight form, but contents are a single
   "Accept invite" CTA + body copy. No form fields. */

.invite-page__friend[b-2navyllntc] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

.invite-page__friend-copy[b-2navyllntc] {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.invite-page__friend-accept[b-2navyllntc] {
    align-self: flex-start;
}

/* ---------- Secondary "add another leg" CTA ----------

   When the traveler already has at least one flight, adding another is a
   secondary action — don't burn the bright coral on it. Soft tinted pill
   keeps the primary CTA reserved for high-intent flows (e.g. publish). */

.invite-page__add-more[b-2navyllntc] {
    align-self: flex-start;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.invite-page__add-more:hover[b-2navyllntc] {
    background: rgba(255, 107, 91, 0.24);
    border-color: var(--color-primary-soft);
}

/* ---------- Status footer (view trip / saved-but-unpublished) ----------

   Two variants with distinct treatment:
     - Published case is an action: clean one-line link, no card.
     - Muted case is a status note: soft card + leading check ringer so it
       reads as "you're done here, organizer's move next" instead of as a
       trailing body paragraph. */

.invite-page__view-trip[b-2navyllntc] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.invite-page__view-trip a[b-2navyllntc] {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.invite-page__view-trip a:hover[b-2navyllntc] {
    text-decoration: underline;
}

.invite-page__view-trip--muted[b-2navyllntc] {
    color: var(--color-text-muted);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-sunken);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.invite-page__view-trip--muted[b-2navyllntc]::before {
    content: "✓";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* ---------- Narrow viewports ---------- */

@media (max-width: 560px) {
    .invite-page__flight-row[b-2navyllntc] {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "leg route remove"
            "times times times";
        row-gap: var(--space-3);
        padding: var(--space-4);
        column-gap: var(--space-3);
    }
    .invite-page__flight-leg[b-2navyllntc] { grid-area: leg; }
    .invite-page__flight-route[b-2navyllntc] { grid-area: route; }
    .invite-page__flight-remove[b-2navyllntc] { grid-area: remove; }
    .invite-page__flight-times[b-2navyllntc] { grid-area: times; }
}
/* /Components/Pages/Trips/NewTrip.razor.rz.scp.css */
.trip-form__cancel[b-x40f7t5oyt] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-sm);
}

.trip-form__cancel:hover[b-x40f7t5oyt] { color: var(--color-text-primary); }
/* /Components/Pages/Trips/PublicTrip.razor.rz.scp.css */
/* Page-specific shell for /t/{slug}. The actual timeline rows are styled by
   the global .timeline-* primitives in app.css; this file owns the trip
   header, the subscribe-to-alerts callout, the traveler row, and the
   "missing / not published" panel. */

.public-trip__header[b-5nyt2b23xm] {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.public-trip__meta[b-5nyt2b23xm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.public-trip__title[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    line-height: 1.05;
    margin: 0;
    font-variation-settings: 'opsz' 144;
}

/* Subscribe-to-alerts callout (Phase 6 wires the actual subscription). */

/* Subscribe-to-alerts chip — Phase 9. Replaces the full-card callout
   that used to sit always-visible above the panels. One-line strip:
   bell icon · copy · Subscribe button · × dismiss. Lives just inside
   .trip-page (after TripTabsNav, before the Stay panel) so it always
   renders above whichever panel is active.

   Visibility states (driven by subscribe.js body classes):
     - default (no class)         → visible
     - body.vrolu-alerts-on       → hidden (sticky-header bell carries
                                    the subscribed indicator)
     - body.vrolu-alerts-dismissed → hidden except for .subscribe-modal
                                    (bell still opens the modal) */
.public-trip__alert-chip[b-5nyt2b23xm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    position: relative;
    overflow: visible; /* modal child needs to escape this box */
}

.public-trip__alert-chip-icon[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.public-trip__alert-chip-icon svg[b-5nyt2b23xm] {
    width: 18px;
    height: 18px;
}

.public-trip__alert-chip-copy[b-5nyt2b23xm] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.public-trip__alert-chip-cta[b-5nyt2b23xm] {
    flex-shrink: 0;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
}

.public-trip__alert-chip-dismiss[b-5nyt2b23xm] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .public-trip__alert-chip-dismiss:hover[b-5nyt2b23xm] {
        background: var(--color-bg-sunken);
        color: var(--color-text-primary);
    }
}

.public-trip__alert-chip-dismiss svg[b-5nyt2b23xm] {
    width: 14px;
    height: 14px;
}

@media (max-width: 480px) {
    /* Two-row layout: row 1 = icon · Subscribe · ×, row 2 = copy
       (full-width). Previous absolute-positioned × parked itself on top
       of the Subscribe button in the top-right corner — visually
       overlapping CTAs. Drop the absolute, push copy to its own row
       via order + flex-basis: 100%, let icon / cta / dismiss flow
       naturally on row 1 with the CTA auto-margined right. */
    .public-trip__alert-chip[b-5nyt2b23xm] {
        flex-wrap: wrap;
        border-radius: var(--radius-md);
        row-gap: var(--space-2);
    }
    .public-trip__alert-chip-copy[b-5nyt2b23xm] {
        order: 99;
        flex-basis: 100%;
    }
    .public-trip__alert-chip-cta[b-5nyt2b23xm] {
        margin-left: auto;
    }
}

/* Subscribed state — collapse the chip's own chrome (padding, border,
   margin) and hide all visible children EXCEPT the modal. The modal
   has to stay mountable because subscribe.js opens it via the
   sticky-header bell, which scopes its query to [data-subscribe-root]
   = this section. Setting display:none on the section itself would
   take the modal with it. */
body.vrolu-alerts-on .public-trip__alert-chip[b-5nyt2b23xm] {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    min-height: 0;
}
body.vrolu-alerts-on .public-trip__alert-chip > *:not(.subscribe-modal)[b-5nyt2b23xm] {
    display: none;
}

/* Traveler list — display names only, gradient avatars. No PII. */

.public-trip__travelers[b-5nyt2b23xm] {
    margin-bottom: var(--space-8);
}

.public-trip__section-title[b-5nyt2b23xm] {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-4);
    font-variation-settings: 'opsz' 48;
}

.public-trip__traveler-list[b-5nyt2b23xm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.public-trip__traveler[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
}

.public-trip__avatar[b-5nyt2b23xm] {
    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);
}

.public-trip__traveler-name[b-5nyt2b23xm] {
    color: var(--color-text-primary);
    font-weight: 500;
    font-size: var(--text-sm);
}

/* "Local" pill for LocalFriend travelers (Phase 6.6) and the
   "Organizer" pill overlay (privacy-model) on the public page.
   Same shape; --organizer modifier flips the palette to the brand
   coral so the organizer reads as a primary attribution rather than
   a secondary trait. */
.public-trip__traveler-pill[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.05));
    color: var(--color-text-secondary, #6b6473);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 10px;
    text-transform: uppercase;
    vertical-align: middle;
}

.public-trip__traveler-pill--organizer[b-5nyt2b23xm] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* "Watching" section — same elevated card shape as the main travelers
   section but with a slightly muted heading so the visual weight reads
   as secondary (watchers aren't on the trip; the dashboard is about
   the people who are). */
.public-trip__travelers--watching .public-trip__section-title[b-5nyt2b23xm] {
    color: var(--color-text-secondary);
}

/* Itinerary section (timeline rows themselves are styled globally). */

.public-trip__itinerary[b-5nyt2b23xm] { padding-top: var(--space-2); }

.public-trip__empty[b-5nyt2b23xm] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

/* "Trip not found" / "Not published yet" panels share the same layout. */

.public-trip__missing[b-5nyt2b23xm] {
    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-5nyt2b23xm] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.public-trip__missing-title[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-2);
    font-variation-settings: 'opsz' 96;
}

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

/* Privacy-gate sections — NotSignedIn and NotInvited render with the
   same elevated-card shape as the not-found / not-published panels
   above (one "wrong gate" visual language across all the failure modes
   of /t/{slug}). The eyebrow color shifts on intent: coral for
   sign-in (active CTA), accent for denial (informational). */
.public-trip__gate[b-5nyt2b23xm] {
    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__gate-eyebrow[b-5nyt2b23xm] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-primary);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.public-trip__gate-title[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    margin: 0 0 var(--space-2);
    font-variation-settings: 'opsz' 96;
    line-height: 1.2;
}

.public-trip__gate-body[b-5nyt2b23xm] {
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.55;
}

.public-trip__gate-body strong[b-5nyt2b23xm] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.public-trip__gate-signout[b-5nyt2b23xm] {
    margin: 0;
}

.public-trip__gate-signout .btn-link[b-5nyt2b23xm] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
}

/* Subscribe modal — opens from the alerts chip CTA on /t/{slug}, the
   sticky-header bell, or any element with [data-subscribe-open].
   Modal markup lives inside the .public-trip__alert-chip <section>
   so this file owns its styles, but the panel itself is positioned
   to the viewport. */

.subscribe-modal[b-5nyt2b23xm] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(26, 18, 40, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.subscribe-modal[hidden][b-5nyt2b23xm] { display: none; }

.subscribe-modal__panel[b-5nyt2b23xm] {
    width: min(440px, 100%);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.subscribe-modal__close[b-5nyt2b23xm] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-pill);
}
.subscribe-modal__close:hover[b-5nyt2b23xm] { background: var(--color-bg-base); color: var(--color-text-primary); }

.subscribe-modal__title[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-2);
    font-variation-settings: 'opsz' 48;
}

.subscribe-modal__lede[b-5nyt2b23xm] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 0 0 var(--space-5);
}

.subscribe-modal__form[b-5nyt2b23xm] { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.subscribe-modal__status[b-5nyt2b23xm] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    min-height: 1.25em;
}
.subscribe-modal__status[data-kind="success"][b-5nyt2b23xm] { color: var(--color-success, #4caf50); }
.subscribe-modal__status[data-kind="error"][b-5nyt2b23xm]   { color: var(--color-danger, var(--color-secondary)); }
.subscribe-modal__status[data-kind="muted"][b-5nyt2b23xm]   { color: var(--color-text-muted); }
.subscribe-modal__status[data-kind="pending"][b-5nyt2b23xm] { color: var(--color-text-secondary); }

.subscribe-modal__actions[b-5nyt2b23xm] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Channel cards (fresh form). Whole card is a label so clicking anywhere
   inside toggles the checkbox — friendlier than a tiny target. */

.subscribe-channel[b-5nyt2b23xm] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}
.subscribe-channel:hover[b-5nyt2b23xm] { border-color: var(--color-border-strong); }
.subscribe-channel:has(input:checked)[b-5nyt2b23xm] {
    border-color: var(--color-primary);
    background: var(--color-bg-elevated);
}
.subscribe-channel:has(input:disabled)[b-5nyt2b23xm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.subscribe-channel__check[b-5nyt2b23xm] {
    margin: 4px 0 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
}

.subscribe-channel__body[b-5nyt2b23xm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.subscribe-channel__title[b-5nyt2b23xm] {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.subscribe-channel__hint[b-5nyt2b23xm] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}
.subscribe-channel__hint--ios[b-5nyt2b23xm] {
    color: var(--color-primary);
    font-weight: 500;
}

.subscribe-channel__input[b-5nyt2b23xm] {
    width: 100%;
}

/* Active-state per-channel rows. */

.subscribe-active-row[b-5nyt2b23xm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
.subscribe-active-row--inactive[b-5nyt2b23xm] {
    background: var(--color-bg-base);
    border-style: dashed;
}

.subscribe-active-row__icon[b-5nyt2b23xm] {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--gradient-sunset);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.subscribe-active-row__body[b-5nyt2b23xm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.subscribe-active-row__title[b-5nyt2b23xm] {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.subscribe-active-row__detail[b-5nyt2b23xm] {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscribe-active-row__input[b-5nyt2b23xm] {
    margin-top: var(--space-2);
    width: 100%;
}

.subscribe-active-row__action[b-5nyt2b23xm] {
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-decoration: underline;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    flex-shrink: 0;
}
.subscribe-active-row__action:hover[b-5nyt2b23xm] { color: var(--color-secondary); }

.btn-sm[b-5nyt2b23xm] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .subscribe-active-row[b-5nyt2b23xm] {
        flex-wrap: wrap;
    }
    .subscribe-active-row__body[b-5nyt2b23xm] {
        width: 100%;
    }
}

/* ---------- View tabs ----------
   Same All / Arrivals / Itinerary / Departures filter the organizer's
   TripDetail uses (TripDetail.razor.css :311). Duplicated here rather
   than promoted to app.css because Blazor scoped CSS keeps each
   component's selectors namespace-clean — the cost of duplication is
   ~80 lines that change rarely; the cost of leaking the selectors
   globally is harder-to-debug bleed across unrelated pages. If a
   third page ever wants the same filter, promote then.

   Active pill uses the gold-accent border + subtle accent fill we
   standardized for "selected" everywhere (icon-button.active,
   app__nav-link.active). Horizontally scrollable on narrow mobile
   so the four pills don't wrap. */
.trip-tabs[b-5nyt2b23xm] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.trip-tabs[b-5nyt2b23xm]::-webkit-scrollbar { display: none; }

.trip-tabs__tab[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    /* transform in the transition list so the global "Tap feedback" rule
       in app.css animates scale-down smoothly on press. */
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.trip-tabs__tab:hover[b-5nyt2b23xm] {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    color: var(--color-text-primary);
}

.trip-tabs__tab--active[b-5nyt2b23xm] {
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-elevated));
    color: var(--color-text-primary);
}

.trip-tabs__count[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
}

.trip-tabs__tab--active .trip-tabs__count[b-5nyt2b23xm] {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-primary);
}

.trip-tabs__icon[b-5nyt2b23xm] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Arrivals + Departures use one shared paper-airplane silhouette
   (the base path naturally points UP). Rotating around center pairs the
   two icons: arrivals points down-and-right (landing), departures
   points up-and-right (taking off). Bumped to 18px so the rotation
   reads clearly. */
.trip-tabs__icon--arrivals[b-5nyt2b23xm],
.trip-tabs__icon--departures[b-5nyt2b23xm] {
    width: 18px;
    height: 18px;
    transform-origin: center;
}

.trip-tabs__icon--arrivals[b-5nyt2b23xm] { transform: rotate(135deg); }
.trip-tabs__icon--departures[b-5nyt2b23xm] { transform: rotate(45deg); }

/* Narrow-mobile: hide text labels, keep icons + count badges.
   aria-label on each button keeps the screen-reader name intact. */
@media (max-width: 480px) {
    .trip-tabs__label[b-5nyt2b23xm] { display: none; }
    .trip-tabs__tab[b-5nyt2b23xm] {
        padding: var(--space-2) var(--space-3);
        min-width: 44px;
        justify-content: center;
    }
}

/* ---------- View swap transition ----------
   Each @key'd .public-trip__view wrapper plays a quick fade + 4px lift
   on mount. Blazor re-mounts the wrapper when _currentView changes
   (the @key value flips), so the animation fires on every tab change.
   Same motion vocabulary as TripDetail's .trip-detail__view so both
   pages move alike. */
.public-trip__view[b-5nyt2b23xm] {
    animation: public-trip-view-fade-in-b-5nyt2b23xm var(--duration-base) var(--ease-out);
}

@keyframes public-trip-view-fade-in-b-5nyt2b23xm {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Sticky utility header ----------
   Quiet pinned bar that stays visible through long itineraries. At
   scroll=0 it sits above the hero with a subtle backdrop; once the
   user scrolls past, position:sticky pins it to top:0 of the viewport.
   Backdrop blur matches AppLayout's mobile top bar so all the sticky
   surfaces share one visual language. */
.public-trip__sticky[b-5nyt2b23xm] {
    position: sticky;
    /* top: 60px so this bar pins BELOW PublicTripLayout's own sticky
       chrome (.public__header is sticky top:0 z-index:50, 60px tall —
       see PublicTripLayout.razor.css). Originally top:0 here, but the
       layout chrome's higher z-index hid this bar underneath as the
       user scrolled past the hero. z-index:10 stays below the layout's
       50 so the two stack correctly: layout chrome on top, trip
       identity right below. */
    top: 60px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    margin: 0 calc(-1 * var(--space-5)) var(--space-4);
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.public-trip__sticky-name[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    font-variation-settings: 'opsz' 36;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.public-trip__sticky-meta[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .public-trip__sticky-meta[b-5nyt2b23xm] { display: none; }
}

/* ---------- Traveler row (Monarch inline-expand) ----------
   Same chip+panel pattern TripDetail uses (TripDetail.razor.css :485+).
   Scoped duplication rather than promotion to app.css: the public
   surface only needs read-only variants (chip + panel with flight
   list); the organizer surface has many more states (resend,
   edit, claim, refresh) that would bleed onto the public page if
   promoted to global. Keeping the selectors namespace-clean per
   scoped CSS is the simpler trade.

   Grid-template-rows 0fr → 1fr is the recipe for animating height:auto
   smoothly. The outer panel transitions the grid track; the inner
   div has overflow:hidden so children clip; opacity fades on a
   slight stagger for the Monarch "unfurl" feel. */
.traveler-row[b-5nyt2b23xm] {
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-elevated);
    transition: border-color var(--duration-base) var(--ease-out);
}

.traveler-row[data-expanded="true"][b-5nyt2b23xm] {
    border-color: var(--color-border-strong);
}

.traveler-row__chip[b-5nyt2b23xm] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: var(--color-text-primary);
    font-family: inherit;
    /* transform in the transition list so the global tap-feedback rule
       in app.css ("Tap feedback") animates scale-down smoothly. */
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.traveler-row__chip:hover[b-5nyt2b23xm] {
    background: color-mix(in srgb, var(--color-primary-soft) 35%, transparent);
}

.traveler-row__chip:focus-visible[b-5nyt2b23xm] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.traveler-row__avatar[b-5nyt2b23xm] {
    width: 32px;
    height: 32px;
    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;
}

.traveler-row__chip-body[b-5nyt2b23xm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.traveler-row__name[b-5nyt2b23xm] {
    font-weight: 500;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Neutral "Local" / "Watching" / etc badge baseline. Same shape as the
   flat-chip pill on the existing .public-trip__traveler-pill so the two
   chip variants render identical badges. */
.traveler-row__kind[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: normal;
    vertical-align: middle;
}

.traveler-row__kind--organizer[b-5nyt2b23xm] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.traveler-row__meta[b-5nyt2b23xm] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

.traveler-row__chevron[b-5nyt2b23xm] {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    transition: transform var(--duration-base) var(--ease-out);
}

.traveler-row[data-expanded="true"] .traveler-row__chevron[b-5nyt2b23xm] {
    transform: rotate(90deg);
}

/* grid-template-rows 0fr → 1fr is the "animate height:auto" trick.
   The outer panel transitions the row track; inner div has min-height:0
   + overflow:hidden so the content clips smoothly. */
.traveler-row__panel[b-5nyt2b23xm] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.traveler-row[data-expanded="true"] .traveler-row__panel[b-5nyt2b23xm] {
    grid-template-rows: 1fr;
}

.traveler-row__panel-inner[b-5nyt2b23xm] {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--duration-fast) 80ms var(--ease-out);
}

.traveler-row[data-expanded="true"] .traveler-row__panel-inner[b-5nyt2b23xm] {
    opacity: 1;
}

.traveler-row__panel-content[b-5nyt2b23xm] {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: -1px;
}

.traveler-row__empty[b-5nyt2b23xm] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.traveler-row__flights[b-5nyt2b23xm] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Per-flight row inside the traveler panel. Compact 4-column grid:
   airline code · route · times · status pill. Reads like a mini
   flight-strip; .timeline-row__pill class (global) handles status
   palette so delayed / cancelled / landed colors land consistently
   with the day-group timeline rows below. */
.public-trip__flight[b-5nyt2b23xm] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-base);
    font-size: var(--text-sm);
}

.public-trip__flight-code[b-5nyt2b23xm] {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.public-trip__flight-route[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-primary);
    font-weight: 500;
    font-family: var(--font-mono);
}

.public-trip__flight-times[b-5nyt2b23xm] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

@media (max-width: 480px) {
    .public-trip__flight[b-5nyt2b23xm] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "route status"
            "times status"
            "code  status";
        gap: var(--space-1) var(--space-3);
    }
    .public-trip__flight-code[b-5nyt2b23xm] { grid-area: code; }
    .public-trip__flight-route[b-5nyt2b23xm] { grid-area: route; }
    .public-trip__flight-times[b-5nyt2b23xm] { grid-area: times; }
    .public-trip__flight .timeline-row__pill[b-5nyt2b23xm] { grid-area: status; align-self: center; }
}

/* "On the trip" list shifts from inline-wrap chips to a vertical stack
   once we have full-width expand rows mixed in. The non-Flying flat
   chips stretch full-width and align left so the two variants share
   one vertical rhythm. */
.public-trip__travelers .public-trip__traveler-list[b-5nyt2b23xm] {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.public-trip__travelers .public-trip__traveler[b-5nyt2b23xm] {
    width: 100%;
    justify-content: flex-start;
}

/* Watching section keeps the original inline-wrap chip layout — the
   sibling .public-trip__travelers--watching modifier overrides the
   vertical stack above. */
.public-trip__travelers--watching .public-trip__traveler-list[b-5nyt2b23xm] {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ---------- Sticky-header bell + alerts dismiss ----------
   Two affordances that together replace the "always-in-your-face"
   alerts callout: a persistent bell in the sticky toolbar, and an
   × on the inline callout that hides it for the rest of the session
   (localStorage flag, per-trip, set by subscribe.js). The bell is
   the bell — same modal opens; the dismiss is the "yes I see it,
   later" signal. */

.public-trip__sticky-bell[b-5nyt2b23xm] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* transform in the transition list so the global tap-feedback rule
       in app.css animates scale-down smoothly. */
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

/* :hover scoped to actual pointer devices (mouse, trackpad). Touch
   devices skip this rule entirely — iOS Safari has a well-known
   quirk where :hover sticks on the tapped element until the user
   taps somewhere else, which makes the bell appear coral-filled
   after unsubscribe (the hover palette matches the subscribed-state
   palette). @media (hover: hover) is the standard fix — only
   evaluates for pointer-based input. */
@media (hover: hover) {
    .public-trip__sticky-bell:hover[b-5nyt2b23xm] {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    }
}

/* Subscribed state — coral-tinted fill so the bell visibly reflects
   the persisted NotificationSubscription on every visit, not just
   while the modal is open. Two selectors fire the same treatment:

     body.vrolu-alerts-on .bell           — descendant from body class
     .public-trip__sticky-bell.vrolu-alerts-bell--on — direct on bell

   The direct-on-bell selector is the one iOS Safari respects for
   immediate repaint on class REMOVAL — descendant-selector style
   changes can defer the GPU recomposite on iOS until next touch.
   Body class still set for parity with the banner's collapse rule
   (which uses descendant selector and works because the section
   has its own visual change to trigger repaint). */
body.vrolu-alerts-on .public-trip__sticky-bell[b-5nyt2b23xm],
.public-trip__sticky-bell.vrolu-alerts-bell--on[b-5nyt2b23xm] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
}

.public-trip__sticky-bell svg[b-5nyt2b23xm] {
    width: 18px;
    height: 18px;
}

/* Dismissed state — hide the chip's visible chrome but keep the
   .subscribe-modal child mountable so the sticky-header bell's
   open-modal path keeps working. Mirrors the body.vrolu-alerts-on
   collapse rule above for the same reason (subscribe.js scopes its
   modal lookup to [data-subscribe-root] = the chip section). The
   per-trip-slug localStorage flag keeps the dismiss sticky across
   revisits without affecting other trips. */
body.vrolu-alerts-dismissed .public-trip__alert-chip[b-5nyt2b23xm] {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    min-height: 0;
}
body.vrolu-alerts-dismissed .public-trip__alert-chip > *:not(.subscribe-modal)[b-5nyt2b23xm] {
    display: none;
}

/* ---------- Stay card (public, read-only) ----------
   Mirrors the .trip-stay treatment in TripDetail.razor.css but without
   the edit / add affordances — travelers see lodging, don't manage it.
   Duplicated here scoped rather than promoted to global app.css for the
   same reason .trip-tabs lives duplicated: keeps the public surface's
   selector namespace clean. ~50 LOC; promote if a third page needs the
   same shape later.

   Desktop: photo left (fixed 280px), body right — matches the trip
   hero's "photo as visual weight" treatment so the page reads as a
   cohesive column of cards. Mobile: stacks photo over body with a
   compacted 140px photo cap. */
.public-trip__stay[b-5nyt2b23xm] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    margin: 0 0 var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    overflow: hidden;
}

/* When there's no photo, body takes the full width. */
.public-trip__stay:not(:has(.public-trip__stay-photo))[b-5nyt2b23xm] {
    grid-template-columns: 1fr;
}

.public-trip__stay-photo[b-5nyt2b23xm] {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-sunken);
    min-height: 100%;
}

.public-trip__stay-photo img[b-5nyt2b23xm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom-up dark gradient — matches the .trip-hero__overlay treatment
   so the destination hero and stay card share the same photo
   vocabulary. Quieter than the hero because no text sits on top, but
   loud enough to actually read; previous 0.18 floor was invisible on
   bright daytime photos. */
.public-trip__stay-photo[b-5nyt2b23xm]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(0, 0, 0, 0) 100%
    );
}

.public-trip__stay-body[b-5nyt2b23xm] {
    padding: var(--space-5) var(--space-6) var(--space-6);
}

.public-trip__stay-eyebrow[b-5nyt2b23xm] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2);
}

.public-trip__stay-name[b-5nyt2b23xm] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-variation-settings: 'opsz' 48;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

.public-trip__stay-links[b-5nyt2b23xm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
}

.public-trip__stay-notes[b-5nyt2b23xm] {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    /* Stack photo over body on mobile and trim the photo so it
       doesn't eat the fold. */
    .public-trip__stay[b-5nyt2b23xm] {
        grid-template-columns: 1fr;
    }
    /* aspect-ratio + max-height was a trap — when the height cap
       kicked in, the browser shrank the WIDTH to preserve 16/9, so
       the photo ended up ~248px wide centered in a ~400px card.
       Use a fixed height instead so width: 100% on the img can
       actually fill the cell. object-fit: cover keeps the crop
       sensible. */
    .public-trip__stay-photo[b-5nyt2b23xm] {
        aspect-ratio: auto;
        height: 140px;
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .public-trip__stay-name[b-5nyt2b23xm] { font-size: var(--text-xl); }
    .public-trip__stay-body[b-5nyt2b23xm] { padding: var(--space-4) var(--space-4) var(--space-5); }
}
/* /Components/Pages/Trips/TripDetail.razor.rz.scp.css */
/* View-switch transition — wraps each filtered content section
   (travelers + itinerary). Blazor remounts the wrapper on _currentView
   change via @@key, which restarts the animation. Quick fade + 8px
   lift over --duration-base gives the swap a clearly perceptible
   handoff. Matches the duration of the traveler/day expand animations
   so the whole app moves in one motion vocabulary. */
.trip-detail__view[b-w7hav3cayn] {
    animation: trip-detail-view-fade-in-b-w7hav3cayn var(--duration-base) var(--ease-out);
}

@keyframes trip-detail-view-fade-in-b-w7hav3cayn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Itinerary section ---------- */

.trip-itinerary[b-w7hav3cayn] {
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.trip-itinerary__header[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.trip-itinerary__heading[b-w7hav3cayn] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.trip-itinerary__title[b-w7hav3cayn] {
    font-size: var(--text-2xl);
    margin: 0;
    font-variation-settings: 'opsz' 48;
}

.trip-itinerary__count[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.trip-itinerary__empty[b-w7hav3cayn] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

/* Timeline primitives (.timeline-day, .timeline-row, .timeline-row__*) live
   in global app.css — they're shared between this organizer view and the
   public /t/{slug} surface. See app.css "Timeline (per-day grouping)" block. */

.trip-missing[b-w7hav3cayn] {
    max-width: 480px;
    margin: var(--space-12) auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.trip-crumbs[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.trip-crumbs__path[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-crumbs a[b-w7hav3cayn] {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.trip-crumbs a:hover[b-w7hav3cayn] { color: var(--color-primary); }

.trip-crumbs__status[b-w7hav3cayn] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.trip-crumbs__status--paid[b-w7hav3cayn],
.trip-crumbs__status--active[b-w7hav3cayn] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: transparent;
}

.trip-header[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

/* Sticky utility bar — Airbnb pattern. Stays at top:0 once the user
   scrolls past the hero so the trip identity + actions remain reachable
   without scrolling back up. Same backdrop-blur recipe as
   MarketingLayout's sticky header so the two surfaces feel consistent.
   z-index:10 sits above page content but well below drawer/modal/toast. */
.trip-header--sticky[b-w7hav3cayn] {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-top: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-3) 0;
    background: color-mix(in srgb, var(--color-bg-base) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Hero-present variant — compact identity sits on the left (small status
   pill + small trip name), actions on the right. The big magazine-cover
   title/meta is in .trip-hero__overlay above; this row stays quiet at
   scroll=0 so the two don't compete, and becomes the persistent context
   cue once the hero scrolls off. */
.trip-header__identity[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.trip-header__identity-name[b-w7hav3cayn] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    font-variation-settings: 'opsz' 36;
    color: var(--color-text-primary);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mirrors .trip-hero__status--draft / --archived so the compact pill
   reads as the same status family as the hero overlay's larger pill,
   just sized down for the utility row. */
.trip-header__identity-status[b-w7hav3cayn] {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
}

.trip-header__identity-status--draft[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-accent) 78%, transparent);
    color: var(--color-text-primary);
}

.trip-header__identity-status--archived[b-w7hav3cayn] {
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
}

.trip-header__copy[b-w7hav3cayn] { min-width: 0; }

.trip-header__meta[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.trip-header__title[b-w7hav3cayn] {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    margin: 0;
    font-variation-settings: 'opsz' 144;
    line-height: 1.05;
}

.trip-header__actions[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: flex-end;
    /* Trip-header now uses align-items: center on the parent so the
       actions sit on the same baseline as the identity/copy row;
       previous margin-top vestige is dropped. */
    flex-shrink: 0;
}

.trip-header__publish[b-w7hav3cayn] {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-5);
    white-space: nowrap;
}

/* Soft-launch hint that appears below the disabled Publish button
   when Launch:PublishGate=AllowlistOnly and the current user isn't
   on the allowlist. Inline + small so it reads as a footnote, not
   a primary affordance. The mailto link is the only call-to-action. */
.trip-header__publish-hint[b-w7hav3cayn] {
    font-size: var(--text-xs);
    margin: var(--space-2) 0 0;
    max-width: 32ch;
}

.trip-header__publish-hint a[b-w7hav3cayn] {
    color: var(--color-primary);
    text-decoration: underline;
}

.trip-header__edit[b-w7hav3cayn],
.trip-header__unpublish[b-w7hav3cayn],
.trip-header__archive[b-w7hav3cayn],
.trip-header__menu[b-w7hav3cayn] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.trip-header__unpublish:hover:not(:disabled)[b-w7hav3cayn],
.trip-header__archive:hover:not(:disabled)[b-w7hav3cayn],
.trip-header__menu:hover:not(:disabled)[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.trip-header__unpublish:disabled[b-w7hav3cayn],
.trip-header__archive:disabled[b-w7hav3cayn],
.trip-header__menu:disabled[b-w7hav3cayn] { opacity: 0.6; cursor: not-allowed; }

/* Edit button (pencil + "Edit" label) lays out as icon + text — same
   recipe as .trip-header__copy-link below. The neutral pill chrome
   comes from the .trip-header__edit selector being included in the
   __unpublish / __archive base + hover + disabled rules above. */
.trip-header__edit[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.trip-header__edit svg[b-w7hav3cayn] { width: 16px; height: 16px; }

/* Phase 9 — kebab (three vertical dots) opening the Trip actions
   drawer. Same neutral pill chrome as the old Edit/Unpublish/Archive
   pills so the sticky's visual vocabulary doesn't change; just a
   tighter footprint since it's icon-only. Square-ish padding so the
   pill doesn't elongate horizontally for one glyph. */
.trip-header__menu[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    width: 36px;
    height: 36px;
}

.trip-header__menu svg[b-w7hav3cayn] { width: 18px; height: 18px; }

/* Trip actions drawer body — vertical list of full-width tap rows.
   Reads as an iOS settings menu: icon left, label + meta in the middle,
   row-wide hit area. No chevron — each tap closes the drawer and runs
   the action (most open a follow-up drawer or confirm dialog, so the
   chevron would imply "drills down" which is misleading). */
.trip-actions-menu[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0;
}

.trip-actions-menu__item[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-4);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .trip-actions-menu__item:hover:not(:disabled)[b-w7hav3cayn] {
        background: var(--color-bg-elevated);
        border-color: var(--color-border);
    }
}

.trip-actions-menu__item:disabled[b-w7hav3cayn] {
    opacity: 0.55;
    cursor: not-allowed;
}

.trip-actions-menu__icon[b-w7hav3cayn] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--color-text-secondary);
}

.trip-actions-menu__body[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.trip-actions-menu__label[b-w7hav3cayn] {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.2;
}

.trip-actions-menu__meta[b-w7hav3cayn] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}

/* Copy-link button — compact icon + label, replaces the old formation-link
   callout (which ate a huge chunk of mobile above-the-fold). Active state
   copies the URL + toasts; Draft state is disabled with a tooltip; Archived
   doesn't render the button at all. */
.trip-header__copy-link[b-w7hav3cayn] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.trip-header__copy-link svg[b-w7hav3cayn] { width: 16px; height: 16px; }

.trip-header__copy-link:hover:not(:disabled)[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.trip-header__copy-link:disabled[b-w7hav3cayn] { opacity: 0.5; cursor: not-allowed; }

/* "Copied!" flash state — primary-coral fill so it pops against the
   neutral pill row and the change is unmissable on mobile. */
.trip-header__copy-link--copied[b-w7hav3cayn],
.trip-header__copy-link--copied:hover:not(:disabled)[b-w7hav3cayn] {
    background: var(--color-primary-soft);
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border-strong));
    color: var(--color-primary);
}

/* ---------- Workflow tabs (Phase 8 polish) ----------
   All · Arrivals · Itinerary · Departures sits between the header and
   the Travelers section. Visual treatment is a quiet pill row so the
   tabs read as a filter/scope control, not a competing CTA bar. Active
   pill picks up the gold-accent border + primary text we standardized
   on for the open-panel chrome. Horizontally scrollable on narrow
   mobile (e.g. iPhone SE) so the four pills don't wrap. */
.trip-tabs[b-w7hav3cayn] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    /* iOS momentum scroll for the rare narrow-viewport case */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.trip-tabs[b-w7hav3cayn]::-webkit-scrollbar { display: none; }

.trip-tabs__tab[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    /* transform in the transition list so the tap-feedback :active rule
       (app.css "Tap feedback" block) animates scale-down smoothly. */
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.trip-tabs__tab:hover[b-w7hav3cayn] {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    color: var(--color-text-primary);
}

.trip-tabs__tab--active[b-w7hav3cayn] {
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-elevated));
    color: var(--color-text-primary);
}

.trip-tabs__count[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
}

.trip-tabs__tab--active .trip-tabs__count[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-primary);
}

.trip-tabs__icon[b-w7hav3cayn] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Icon color follows the tab's text color (currentColor) so the
       active-state primary tint applies to both label + icon together. */
}

/* Arrivals + Departures use one shared paper-airplane silhouette
   (the base path naturally points UP — see the SVG path in
   TripDetail.razor). Rotating around center pairs the two icons:
   arrivals points down-and-right (descending / landing), departures
   points up-and-right (climbing / taking off). Bumped up to 18px
   from the base 16px so the rotated angle reads clearly. */
.trip-tabs__icon--arrivals[b-w7hav3cayn],
.trip-tabs__icon--departures[b-w7hav3cayn] {
    width: 18px;
    height: 18px;
    transform-origin: center;
}

.trip-tabs__icon--arrivals[b-w7hav3cayn] {
    transform: rotate(135deg);
}

.trip-tabs__icon--departures[b-w7hav3cayn] {
    transform: rotate(45deg);
}

/* Narrow-mobile: hide the text label, keep the icon + count badge.
   480px so the iPhone SE / Mini / standard-width breakpoint catches it
   while iPads and landscape phones keep the labeled tabs. aria-label
   on each button provides the screen-reader name. */
@media (max-width: 480px) {
    .trip-tabs__label[b-w7hav3cayn] { display: none; }
    .trip-tabs__tab[b-w7hav3cayn] {
        padding: var(--space-2) var(--space-3);
        min-width: 44px;
        justify-content: center;
    }
}

/* ---------- Travelers ---------- */

.trip-travelers__header[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.trip-travelers__heading[b-w7hav3cayn] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.trip-travelers__title[b-w7hav3cayn] {
    font-size: var(--text-2xl);
    margin: 0;
    font-variation-settings: 'opsz' 48;
}

.trip-travelers__count[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.trip-travelers__empty[b-w7hav3cayn] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
}

.trip-travelers__list[b-w7hav3cayn] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ---------- Traveler row — Monarch-style inline expand ----------

   Resting state: compact chip (avatar + name + one-line meta + chevron).
   Tap chip -> row expands in place to reveal contact, invite status,
   flights, and actions. Tap again to collapse.

   The smooth height transition is the cornerstone — browsers can't
   animate `height: auto` directly, but they CAN interpolate grid track
   sizes. We set grid-template-rows: 0fr at rest and 1fr when expanded;
   the inner content uses min-height:0 + overflow:hidden so children
   clip cleanly during the sweep. Content opacity fades in offset 80ms
   behind the height animation so the unfurl reads as "space opens,
   then content settles in" — the Monarch / iOS-Settings feel.

   Same animation primitive used by app.css scroll-driven animations
   (transform / opacity only on the moving bits) — GPU-accelerated,
   works identically in MAUI BlazorWebView (iOS + Android). */

.traveler-row[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--duration-base) var(--ease-out);
}

.traveler-row[data-expanded="true"][b-w7hav3cayn] {
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
}

.traveler-row__chip[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    min-height: 60px;
    /* transform in the transition list so the tap-feedback :active rule
       (app.css "Tap feedback" block) animates scale-down smoothly. */
    transition: background-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.traveler-row__chip:hover[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
}

.traveler-row__chip:focus-visible[b-w7hav3cayn] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.traveler-row__avatar[b-w7hav3cayn] {
    width: 36px;
    height: 36px;
    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;
}

.traveler-row__chip-body[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.traveler-row__name[b-w7hav3cayn] {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.traveler-row__kind[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-text-muted);
    font-weight: normal;
}

.traveler-row__meta[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.traveler-row__chevron[b-w7hav3cayn] {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
    flex-shrink: 0;
}

.traveler-row[data-expanded="true"] .traveler-row__chevron[b-w7hav3cayn] {
    transform: rotate(90deg);
    color: var(--color-primary);
}

/* The actual height-animation primitive — see header comment above. */
.traveler-row__panel[b-w7hav3cayn] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.traveler-row[data-expanded="true"] .traveler-row__panel[b-w7hav3cayn] {
    grid-template-rows: 1fr;
}

.traveler-row__panel-inner[b-w7hav3cayn] {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--duration-fast) 80ms var(--ease-out);
}

.traveler-row[data-expanded="true"] .traveler-row__panel-inner[b-w7hav3cayn] {
    opacity: 1;
}

.traveler-row__panel-content[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-1);
}

.traveler-row__contact[b-w7hav3cayn] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.traveler-row__status[b-w7hav3cayn] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.traveler-row__status--claimed[b-w7hav3cayn] {
    color: var(--color-success);
}

.traveler-row__status-pill[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    color: var(--color-accent);
    font-weight: 500;
}

.traveler-row__status-resend[b-w7hav3cayn] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.traveler-row__status-resend:disabled[b-w7hav3cayn] {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: none;
}

/* Flights inside the expanded panel — clean panel-style layout, no
   nested toggle (the outer row collapse already handles density). */
.traveler-row__flights[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
    overflow: hidden;
}

.traveler-row__add-flight[b-w7hav3cayn] {
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: var(--space-3);
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-secondary);
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    /* transform for the tap-feedback :active rule. */
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.traveler-row__flights > .traveler-row__add-flight:first-child[b-w7hav3cayn] {
    /* No legs yet — drop the top divider since there's nothing above. */
    border-top: 0;
}

.traveler-row__add-flight:hover:not(:disabled)[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}

.traveler-row__add-flight:disabled[b-w7hav3cayn] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Actions row — labeled icon-button pills (vs cramped icon-only in
   the prior big card). The expanded panel has the room; labels make
   affordances obvious instead of relying on title= tooltips. */
.traveler-row__actions[b-w7hav3cayn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.traveler-row__action[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    /* transform for the tap-feedback :active rule. */
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.traveler-row__action:hover:not(:disabled)[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    border-color: var(--color-primary-soft);
}

.traveler-row__action:disabled[b-w7hav3cayn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.traveler-row__action svg[b-w7hav3cayn] {
    width: 16px;
    height: 16px;
}

.traveler-row__action--danger:hover:not(:disabled)[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* ---------- Flight row (renders inside .traveler-row__flights) ---------- */

.flight-row-wrap[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
}

.traveler-row__flights .flight-row-wrap + .flight-row-wrap[b-w7hav3cayn] {
    border-top: 1px solid var(--color-border);
}

.flight-row[b-w7hav3cayn] {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    /* No background/border/padding — the parent .traveler-row__flights
       provides the panel chrome, dividers between siblings handle the
       grouping. Keeps the rows visually connected. */
}

.flight-row__footer[b-w7hav3cayn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    flex-wrap: wrap;
}

.flight-row__age[b-w7hav3cayn] {
    color: var(--color-text-muted);
}

.flight-row__error[b-w7hav3cayn] {
    color: var(--color-secondary);
    background: rgba(232, 52, 78, 0.10);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.flight-row__actions[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    justify-self: end;
}

.flight-row__leg[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.flight-row__route[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
}

.flight-row__airport[b-w7hav3cayn] {
    color: var(--color-text-primary);
    font-weight: 500;
}

.flight-row__arrow[b-w7hav3cayn] { color: var(--color-text-muted); }

.flight-row__times[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    justify-self: end;
}

.flight-row__times-sep[b-w7hav3cayn] { color: var(--color-text-muted); opacity: 0.5; }

.flight-row__status[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.flight-row--scheduled .flight-row__status[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
}

.flight-row--boarding .flight-row__status[b-w7hav3cayn],
.flight-row--departed .flight-row__status[b-w7hav3cayn] {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: transparent;
}

.flight-row--delayed .flight-row__status[b-w7hav3cayn] {
    background: rgba(255, 179, 71, 0.16);
    color: var(--color-accent);
    border-color: transparent;
}

.flight-row--cancelled .flight-row__status[b-w7hav3cayn],
.flight-row--diverted .flight-row__status[b-w7hav3cayn] {
    background: rgba(232, 52, 78, 0.16);
    color: var(--color-secondary);
    border-color: transparent;
}

.flight-row--landed .flight-row__status[b-w7hav3cayn] {
    background: rgba(74, 222, 128, 0.16);
    color: var(--color-success);
    border-color: transparent;
}

.flight-row__icon-btn[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.flight-row__icon-btn:hover:not(:disabled)[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.flight-row__icon-btn--danger:hover:not(:disabled)[b-w7hav3cayn] {
    background: var(--color-primary-soft);
    color: var(--color-danger);
}

.flight-row__icon-btn:disabled[b-w7hav3cayn] { cursor: wait; }

.flight-row__icon-btn svg[b-w7hav3cayn] { width: 14px; height: 14px; }

.flight-row__refresh-icon--spin[b-w7hav3cayn] {
    animation: flight-row-spin-b-w7hav3cayn 1s linear infinite;
}

@keyframes flight-row-spin-b-w7hav3cayn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Wraps the two add/invite buttons in the travelers section header so they
   sit side-by-side and wrap on narrow screens. */
.trip-travelers__actions[b-w7hav3cayn] {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Secondary "Invite a friend" affordance — quiet text link below the
   traveler list. Used to live as a second pill in the section header,
   which read as visual clutter next to the primary "+ Add traveler"
   pill. The LocalFriend flow is rare enough (people already at the
   destination, no flight) that it earns a secondary slot, not a
   peer-CTA. Hover lifts to --color-primary; tap-feedback handled by
   the global :active rule in app.css. */
.trip-travelers__friend-link[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-2) 0;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.trip-travelers__friend-link:hover:not(:disabled)[b-w7hav3cayn] {
    color: var(--color-primary);
}

.trip-travelers__friend-link:disabled[b-w7hav3cayn] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .trip-header[b-w7hav3cayn] { flex-direction: column-reverse; align-items: flex-start; }

    /* column-reverse puts the identity row BELOW the actions row, so the
       trip name ends up just above the panel content with the hero
       overlay's title still visible from the scroll-up state — the two
       were reading as a duplication. Drop to body font + smaller size +
       quieter weight so it lands as a contextual label, not a competing
       title. The pinned-bar role (persistent identity once user scrolls
       past the hero) still works; it's just no longer shouting. */
    .trip-header__identity-name[b-w7hav3cayn] {
        font-family: var(--font-body);
        font-size: var(--text-sm);
        font-weight: 400;
        color: var(--color-text-secondary);
    }

    .flight-row[b-w7hav3cayn] {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--space-2) var(--space-3);
    }
    .flight-row__leg[b-w7hav3cayn] { grid-column: 1; grid-row: 1; }
    .flight-row__route[b-w7hav3cayn] { grid-column: 2; grid-row: 1; justify-self: start; }
    .flight-row__status[b-w7hav3cayn] { grid-column: 3; grid-row: 1; }
    .flight-row__times[b-w7hav3cayn] {
        grid-column: 1 / 3;
        grid-row: 2;
        justify-self: start;
    }
    .flight-row__actions[b-w7hav3cayn] { grid-column: 3; grid-row: 2; }
}

/* Phase 7 — Publish/Pay drawer content (canonical-pattern body, no form). */

/* Destination photo at the top of the drawer — same magazine-cover idiom
   as the main .trip-hero on the trip page, but proportionally smaller to
   fit the drawer's content area without dominating the copy below.
   Gold-accent border matches the trip-hero and open-day panel chrome so
   the publish moment reads as belonging to the same trip's surface. */
.publish-pay__hero[b-w7hav3cayn] {
    margin: 0 0 var(--space-5);
    aspect-ratio: 21 / 9;
    max-height: 180px;
    overflow: hidden;
    border-radius: var(--radius-md);
    /* Shimmer placeholder while the photo is still in flight. Animates a
       gradient sweep across the figure bg until the inline onload handler
       on the <img> adds .publish-pay__hero--loaded; from that point the bg
       goes solid and the image fades in (rule below). */
    background: linear-gradient(
        90deg,
        var(--color-bg-sunken) 0%,
        var(--color-bg-elevated) 50%,
        var(--color-bg-sunken) 100%
    );
    background-size: 200% 100%;
    animation: publish-pay-hero-shimmer-b-w7hav3cayn 1.5s ease-in-out infinite;
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border));
}

.publish-pay__hero--loaded[b-w7hav3cayn] {
    background: var(--color-bg-sunken);
    animation: none;
}

.publish-pay__hero-image[b-w7hav3cayn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Faded out until parent gets .publish-pay__hero--loaded — avoids
       the visible "pop" when the photo bytes land mid-animation. */
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
}

.publish-pay__hero--loaded .publish-pay__hero-image[b-w7hav3cayn] {
    opacity: 1;
}

@keyframes publish-pay-hero-shimmer-b-w7hav3cayn {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.publish-pay__list[b-w7hav3cayn] {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
    color: var(--text-secondary);
}
.publish-pay__list li + li[b-w7hav3cayn] { margin-top: var(--space-2); }
.publish-pay__list code[b-w7hav3cayn] {
    color: var(--text-primary);
    background: var(--surface-elev);
    padding: 0 4px;
    border-radius: 4px;
}
.publish-pay__price[b-w7hav3cayn] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
.publish-pay__amount[b-w7hav3cayn] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Mobile sticky trip-header offset — sits BELOW AppLayout's mobile top
   toolbar (.app__sidebar) so the two stack instead of overlapping. The
   toolbar runs ~60px tall (44px tap-target + --space-2 × 2 padding +
   1px border). If that geometry ever changes, update this value too.

   (The "Phase 8 polish" sticky bottom action bar — `+ Traveler` /
   `+ Event` — was removed in Phase 9: those CTAs now live at the top
   of the People and Itinerary tab panels respectively, and the new
   .trip-tabs-nav owns the bottom of the viewport.) */
@media (max-width: 720px) {
    .trip-header--sticky[b-w7hav3cayn] {
        top: 60px;
    }
}

/* ---------- Event Type picker (Phase 8 polish) ----------
   Pill row that replaces the free-text Title field for the common-case
   event types. Active pill picks up the gold-accent border vocabulary
   established by the open-panel chrome. Wraps cleanly on narrow widths
   (six pills fit in two rows of three on iPhone SE). */
.event-type-picker[b-w7hav3cayn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.event-type-pill[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    min-height: 44px;     /* iOS HIG tap-target floor */
}

.event-type-pill:hover[b-w7hav3cayn] {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    color: var(--color-text-primary);
}

.event-type-pill--active[b-w7hav3cayn] {
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-elevated));
    color: var(--color-text-primary);
}

.event-type-pill__icon[b-w7hav3cayn] {
    font-size: var(--text-base);
    line-height: 1;
}

.event-type-pill__label[b-w7hav3cayn] {
    /* Just inherits — kept as a hook for label-only-on-active styling later */
}

/* ---------- Stay card ----------
   Single-stay lodging — see Trip.cs Lodging* fields for the v1 / v1.5
   rationale on schema shape. Sits above the view tabs so the address
   is reachable from any filter view (the "where's the Airbnb?" text
   in the group chat happens AT ANY moment of the trip, not just on
   the All tab).

   Desktop: photo left (fixed 280px), body right — matches the trip
   hero's "photo as visual weight" treatment so the page reads as a
   cohesive column of cards instead of two mismatched photo widths.
   Mobile: stacks photo over body with a compacted 140px photo cap
   so the lodging never dominates above-the-fold. */
.trip-stay[b-w7hav3cayn] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    margin: 0 0 var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-elevated);
    overflow: hidden;
    position: relative;
}

/* When there's no photo, body takes the full width. */
.trip-stay:not(:has(.trip-stay__photo))[b-w7hav3cayn] {
    grid-template-columns: 1fr;
}

.trip-stay__photo[b-w7hav3cayn] {
    margin: 0;
    position: relative;
    overflow: hidden;
    background: var(--color-bg-sunken);
    min-height: 100%;
}

.trip-stay__photo img[b-w7hav3cayn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom-up dark gradient — matches the .trip-hero__overlay treatment
   so the two photos on the page (destination hero + stay) share the
   same visual vocabulary. Quieter than the hero because no text sits
   on top, but loud enough to actually read; previous 0.18 floor was
   invisible on bright daytime photos. */
.trip-stay__photo[b-w7hav3cayn]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(0, 0, 0, 0) 100%
    );
}

.trip-stay__body[b-w7hav3cayn] {
    padding: var(--space-5) var(--space-6) var(--space-6);
    position: relative;
}

.trip-stay__eyebrow[b-w7hav3cayn] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2);
}

.trip-stay__name[b-w7hav3cayn] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-variation-settings: 'opsz' 48;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
    /* Reserve space on the right for the absolute-positioned Edit
       button so the name doesn't underlap on narrow screens. */
    padding-right: 80px;
}

.trip-stay__links[b-w7hav3cayn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}

.trip-stay__notes[b-w7hav3cayn] {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
}

/* Edit pencil — top-right of the body area. Same quiet text-button
   vocabulary as .trip-header__edit / __archive / __unpublish. */
.trip-stay__edit[b-w7hav3cayn] {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.trip-stay__edit:hover[b-w7hav3cayn] {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

.trip-stay__edit svg[b-w7hav3cayn] {
    width: 12px;
    height: 12px;
}

/* Empty-state "Add the hotel or Airbnb" — card-shaped so it occupies
   the same visual slot the populated stay card will, signaling the
   slot exists rather than hiding behind a thin text link. Quieter
   than a primary CTA (no accent fill) but louder than a typical
   secondary affordance via the icon + meta line. */
.trip-stay--empty[b-w7hav3cayn] {
    display: grid;
    grid-template-columns: 56px 1fr 32px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.trip-stay--empty:hover[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-elevated));
    border-color: var(--color-accent);
    border-style: solid;
}

.trip-stay__add-icon[b-w7hav3cayn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}

.trip-stay__add-icon svg[b-w7hav3cayn] {
    width: 28px;
    height: 28px;
}

.trip-stay__add-body[b-w7hav3cayn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.trip-stay__add-title[b-w7hav3cayn] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-variation-settings: 'opsz' 32;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.trip-stay__add-meta[b-w7hav3cayn] {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.trip-stay__add-cue[b-w7hav3cayn] {
    font-size: var(--text-2xl);
    font-weight: 300;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1;
}

@media (max-width: 720px) {
    /* Stack photo over body on mobile and trim the photo so it doesn't
       eat the fold. 16/9 + 140px cap keeps it as a visual anchor without
       dominating. */
    .trip-stay[b-w7hav3cayn] {
        grid-template-columns: 1fr;
    }
    /* aspect-ratio + max-height was a trap — when the height cap
       kicked in, the browser shrank the WIDTH to preserve 16/9, so
       the photo ended up ~248px wide centered in a ~400px card.
       Use a fixed height instead so width: 100% on the img can
       actually fill the cell. object-fit: cover (set on the img
       above) keeps the crop sensible. */
    .trip-stay__photo[b-w7hav3cayn] {
        aspect-ratio: auto;
        height: 140px;
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .trip-stay__name[b-w7hav3cayn] {
        font-size: var(--text-xl);
        padding-right: 60px;
    }
    .trip-stay__body[b-w7hav3cayn] {
        padding: var(--space-4) var(--space-4) var(--space-5);
    }
    .trip-stay__edit[b-w7hav3cayn] {
        top: var(--space-4);
        right: var(--space-4);
        padding: var(--space-1) var(--space-2);
    }
    .trip-stay--empty[b-w7hav3cayn] {
        padding: var(--space-4) var(--space-5);
        grid-template-columns: 44px 1fr 24px;
        gap: var(--space-3);
    }
    .trip-stay__add-icon[b-w7hav3cayn] {
        width: 44px;
        height: 44px;
    }
    .trip-stay__add-icon svg[b-w7hav3cayn] {
        width: 22px;
        height: 22px;
    }
    .trip-stay__add-title[b-w7hav3cayn] {
        font-size: var(--text-base);
    }
}

/* Quiet text-button for in-drawer "delete" affordances (Remove stay,
   future Remove traveler, etc.). Visually distant from Save so an
   accidental tap reads as "destructive option" rather than "primary
   action." Lives at the bottom of the form, not in the drawer footer. */
.trip-form__remove[b-w7hav3cayn] {
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-danger);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    align-self: flex-start;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.trip-form__remove:hover:not(:disabled)[b-w7hav3cayn] {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.trip-form__remove:disabled[b-w7hav3cayn] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Shared/AirlineTypeahead.razor.rz.scp.css */
.airline-typeahead[b-qsdki7loit] {
    position: relative;
}

.airline-typeahead__menu[b-qsdki7loit] {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    z-index: 100;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 280px;
    overflow-y: auto;
}

.airline-typeahead__menu li[b-qsdki7loit] { margin: 0; padding: 0; }

.airline-typeahead__item[b-qsdki7loit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-align: start;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
}

.airline-typeahead__item:hover[b-qsdki7loit],
.airline-typeahead__item--active[b-qsdki7loit] {
    background: var(--color-primary-soft);
    color: var(--color-text-primary);
}

.airline-typeahead__name[b-qsdki7loit] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airline-typeahead__iata[b-qsdki7loit] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.airline-typeahead__item--active .airline-typeahead__iata[b-qsdki7loit] {
    color: var(--color-primary);
}
/* /Components/Shared/AirportTypeahead.razor.rz.scp.css */
.airport-typeahead[b-lipxunku9l] {
    position: relative;
}

.airport-typeahead__menu[b-lipxunku9l] {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: var(--space-1);
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    z-index: 100;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 320px;
    overflow-y: auto;
}

.airport-typeahead__menu li[b-lipxunku9l] { margin: 0; padding: 0; }

.airport-typeahead__item[b-lipxunku9l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-align: start;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    cursor: pointer;
}

.airport-typeahead__item:hover[b-lipxunku9l],
.airport-typeahead__item--active[b-lipxunku9l] {
    background: var(--color-primary-soft);
    color: var(--color-text-primary);
}

.airport-typeahead__main[b-lipxunku9l] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.airport-typeahead__city[b-lipxunku9l] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airport-typeahead__name[b-lipxunku9l] {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.airport-typeahead__iata[b-lipxunku9l] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.airport-typeahead__item--active .airport-typeahead__iata[b-lipxunku9l] {
    color: var(--color-primary);
}
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm[b-uu72dx3on1] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--color-bg-base) 70%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    animation: confirm-fade-in-b-uu72dx3on1 var(--duration-base) var(--ease-out);
}

.confirm__panel[b-uu72dx3on1] {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 420px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    animation: confirm-pop-in-b-uu72dx3on1 var(--duration-base) var(--ease-out);
}

.confirm__title[b-uu72dx3on1] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-3);
    font-variation-settings: 'opsz' 48;
}

.confirm__message[b-uu72dx3on1] {
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-6);
    line-height: 1.55;
}

.confirm__actions[b-uu72dx3on1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.confirm__cancel[b-uu72dx3on1] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.confirm__cancel:hover[b-uu72dx3on1] {
    background: var(--color-bg-sunken);
    color: var(--color-text-primary);
}

.confirm__confirm[b-uu72dx3on1] {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.confirm__confirm--primary[b-uu72dx3on1] {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.confirm__confirm--primary:hover[b-uu72dx3on1] {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

.confirm__confirm--danger[b-uu72dx3on1] {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    border-color: var(--color-secondary);
}

.confirm__confirm--danger:hover[b-uu72dx3on1] {
    background: var(--color-danger);
    border-color: var(--color-danger);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

@keyframes confirm-fade-in-b-uu72dx3on1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirm-pop-in-b-uu72dx3on1 {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .confirm__panel[b-uu72dx3on1] { padding: var(--space-5); }
    .confirm__actions[b-uu72dx3on1] { flex-direction: column-reverse; align-items: stretch; }
    .confirm__cancel[b-uu72dx3on1], .confirm__confirm[b-uu72dx3on1] { width: 100%; }
}
/* /Components/Shared/CopyButton.razor.rz.scp.css */
.copy-button[b-86i8yxairx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-primary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.copy-button:hover[b-86i8yxairx] {
    background: var(--color-primary-strong);
    border-color: var(--color-primary-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-glow);
}

.copy-button--copied[b-86i8yxairx],
.copy-button--copied:hover[b-86i8yxairx] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg-base);
    transform: none;
    box-shadow: none;
}

.copy-button__icon svg[b-86i8yxairx] {
    width: 16px;
    height: 16px;
    display: block;
}

.copy-button__label[b-86i8yxairx] {
    line-height: 1;
}
/* /Components/Shared/TripTabsNav.razor.rz.scp.css */
/* TripTabsNav — mobile bottom bar, desktop top bar.

   Mobile (≤720px): position:fixed bottom, safe-area-inset aware. The
   wrapping page needs `padding-bottom` to keep its last row above the
   bar — that rule lives in app.css under `.trip-page` (canonical, so
   both TripDetail and PublicTrip share one source of truth instead of
   each pinning the magic number).

   Desktop (≥721px): static under the sticky header, accent underline
   on active tab. */

.trip-tabs-nav[b-k3wp2j01bl] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom));
    /* Subtle floating elevation so the bar reads as above content. */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.trip-tabs-nav__tab[b-k3wp2j01bl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    min-height: 56px;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .trip-tabs-nav__tab:hover[b-k3wp2j01bl] {
        color: var(--color-text-primary);
    }
}

.trip-tabs-nav__tab--active[b-k3wp2j01bl] {
    color: var(--color-accent);
}

.trip-tabs-nav__icon[b-k3wp2j01bl] {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

.trip-tabs-nav__tab--active .trip-tabs-nav__icon[b-k3wp2j01bl] {
    stroke-width: 2.2;
}

.trip-tabs-nav__label[b-k3wp2j01bl] {
    font-size: var(--text-xs);
    letter-spacing: 0.01em;
}

/* Visible keyboard focus ring — matches existing focus styling. */
.trip-tabs-nav__tab:focus-visible[b-k3wp2j01bl] {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
    border-radius: var(--radius-sm);
}

@media (min-width: 721px) {
    .trip-tabs-nav[b-k3wp2j01bl] {
        position: static;
        display: flex;
        gap: var(--space-1);
        margin: 0 0 var(--space-6);
        padding: 0;
        background: transparent;
        border-top: 0;
        border-bottom: 1px solid var(--color-border);
        box-shadow: none;
    }

    .trip-tabs-nav__tab[b-k3wp2j01bl] {
        flex-direction: row;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        min-height: 0;
        border-bottom: 2px solid transparent;
        /* Overlap the nav's bottom border so the active tab's underline
           replaces (not stacks on) the separator. */
        margin-bottom: -1px;
        font-size: var(--text-sm);
    }

    .trip-tabs-nav__tab--active[b-k3wp2j01bl] {
        border-bottom-color: var(--color-accent);
    }

    .trip-tabs-nav__icon[b-k3wp2j01bl] {
        width: 18px;
        height: 18px;
    }
}