/* The design system of the static web pages (the invite page and the legal
 * pages). Web My Plans is the Flutter web app at /app/ since 2026-09-25.
 *
 * Extracted from public/join/index.html so the pages cannot drift: two copies
 * of the same stylesheet is how a restyle silently loses a rule (the
 * .rsvp-error.active regression, 2026-09-09).
 *
 * Values come from lib/shared/ui/tokens.dart, so the web matches the app:
 * Tokens.chatBackground, the 0.16/0.28 frosted card, the white primary pill
 * with #5B3E8A text, and the four avatar palettes.
 */

        /* Mirrors the app's invite screen (lib/screens/invitation/
           plan_join_content.dart) so tapping a link feels like the app, not a
           different product. Values are lifted from lib/shared/ui/tokens.dart
           rather than eyeballed: chatBackground, the 0.16/0.28 frosted card,
           and the white primary pill with #5B3E8A text. Mobile-first — this is
           opened from a text message, on a phone, ~100% of the time. */
        :root {
            --brand:        #667eea;
            --brand-2:      #764ba2;
            --brand-deep:   #5B3E8A;
            --ink:          #ffffff;
            --ink-soft:     rgba(255,255,255,0.90);
            --ink-muted:    rgba(255,255,255,0.70);
            --ink-faint:    rgba(255,255,255,0.62);
            --card:         rgba(255,255,255,0.16);
            --card-border:  rgba(255,255,255,0.28);
            --pill-2:       rgba(255,255,255,0.14);
            --pill-2-brd:   rgba(255,255,255,0.30);
            --radius-card:  16px;
            --radius-stop:  14px;
            --radius-pill:  27px;
        }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body { margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                         'Segoe UI', Roboto, system-ui, sans-serif;
            color: var(--ink);
            /* topLeft → bottomRight, matching Tokens.chatBackground. */
            background: linear-gradient(160deg,
                        var(--brand) 0%, var(--brand-2) 50%, var(--brand-deep) 100%);
            background-attachment: fixed;
            min-height: 100vh;
            min-height: 100dvh;
            -webkit-font-smoothing: antialiased;
        }
        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 14px 20px calc(28px + env(safe-area-inset-bottom));
        }

        /* ── Header ───────────────────────────────────────────────────── */
        .topbar {
            display: flex; align-items: center; gap: 12px;
            padding: 6px 0 18px;
        }
        .topbar-title {
            flex: 1; text-align: center;
            font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px;
            color: var(--ink-soft); text-transform: uppercase;
            /* optically centred against the single left-hand button */
            margin-right: 40px;
        }
        .circle-btn {
            width: 40px; height: 40px; flex: 0 0 40px;
            border-radius: 50%; border: none;
            background: var(--pill-2); color: var(--ink);
            font-size: 18px; line-height: 1; cursor: pointer;
        }

        /* ── Inviter ──────────────────────────────────────────────────── */
        .inviter { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
        .avatar {
            width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 17px; font-weight: 800; letter-spacing: 0.3px;
            color: #fff; background: linear-gradient(135deg, #F6A44F, #E24C8B);
        }
        .inviter-name { font-size: 21px; font-weight: 800; letter-spacing: -0.3px; }
        .inviter-sub  { font-size: 15px; color: var(--ink-muted); margin-top: 2px; }

        /* ── Frosted plan card ────────────────────────────────────────── */
        .plan-card {
            background: var(--card);
            border: 1px solid var(--card-border);
            border-radius: var(--radius-card);
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            padding: 20px; margin-bottom: 26px;
        }
        .plan-title {
            font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
            line-height: 1.15; margin: 0 0 14px;
        }
        .meta-row {
            display: flex; align-items: flex-start; gap: 10px;
            font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
            margin-top: 8px;
        }
        .meta-row svg { flex: 0 0 17px; margin-top: 1px; opacity: 0.85; }

        /* ── Stops ────────────────────────────────────────────────────── */
        .section-label {
            font-size: 12px; font-weight: 700; letter-spacing: 0.9px;
            color: var(--ink-faint); text-transform: uppercase; margin-bottom: 12px;
        }
        .stops-list { position: relative; margin: 0 0 24px; }
        .stop {
            display: flex; gap: 14px; align-items: flex-start;
            position: relative; padding-bottom: 14px;
        }
        .stop:last-child { padding-bottom: 0; }
        /* The timeline rail, drawn between dots rather than under the last. */
        .stop:not(:last-child)::before {
            content: ''; position: absolute; left: 5px; top: 18px; bottom: 2px;
            width: 2px; background: rgba(255,255,255,0.22);
        }
        .stop-dot {
            width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%;
            background: #fff; margin-top: 6px; position: relative; z-index: 1;
        }
        .stop-card {
            flex: 1; min-width: 0;
            background: var(--card); border: 1px solid var(--card-border);
            border-radius: var(--radius-stop); padding: 14px 16px;
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        }
        .stop-time { font-size: 14px; font-weight: 700; color: #D9D2F5; margin-bottom: 4px; }
        .stop-name { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
        .stop-sub  { font-size: 13.5px; color: var(--ink-muted); margin-top: 4px; line-height: 1.35; }
        .stop-photo {
            width: 100%; border-radius: 10px; margin-top: 10px; display: block;
        }
        .stop-link {
            display: inline-block; margin-top: 10px; font-size: 13.5px;
            font-weight: 700; color: #fff; text-decoration: underline;
        }

        /* ── Who's going ──────────────────────────────────────────────── */
        .going { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
        .going-avatars { display: flex; }
        .going-avatars .avatar {
            width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px;
            border: 2px solid rgba(255,255,255,0.35);
        }
        .going-avatars .avatar + .avatar { margin-left: -12px; }
        .going-text { font-size: 15px; font-weight: 600; color: var(--ink-soft); }

        /* ── Actions ──────────────────────────────────────────────────── */
        .actions { display: grid; gap: 10px; }
        .btn {
            width: 100%; border: none; border-radius: var(--radius-pill);
            padding: 17px 20px; font-size: 16.5px; font-weight: 800;
            font-family: inherit; cursor: pointer; display: flex;
            align-items: center; justify-content: center; gap: 9px;
        }
        .btn-primary { background: #fff; color: var(--brand-deep); }
        .btn-primary:disabled { opacity: 0.65; }
        .btn-secondary {
            background: var(--pill-2); color: var(--ink);
            border: 1px solid var(--pill-2-brd);
            font-size: 14.5px; font-weight: 700; padding: 15px 12px;
            border-radius: 23px;
        }
        .btn-link {
            display: block; width: 100%; background: none; border: none;
            color: #fff; opacity: 0.85; font-family: inherit;
            font-size: 14px; font-weight: 700; padding: 12px; cursor: pointer;
            text-decoration: underline;
        }

        /* ── RSVP forms ───────────────────────────────────────────────── */
        .rsvp-prompt {
            font-size: 15px; font-weight: 600; color: var(--ink-soft);
            text-align: center; margin: 0 0 14px;
        }
        .rsvp-input {
            width: 100%; padding: 15px 16px; font-size: 16px; /* ≥16px: iOS
                zooms the whole page on focus for anything smaller */
            font-family: inherit; color: var(--ink);
            background: var(--pill-2); border: 1px solid var(--pill-2-brd);
            border-radius: 14px; margin-bottom: 10px; outline: none;
        }
        .rsvp-input::placeholder { color: rgba(255,255,255,0.55); }
        .rsvp-input:focus { border-color: rgba(255,255,255,0.65); }
        .phone-row { display: flex; gap: 10px; }
        .otp-phone {
            display: inline-block; margin-top: 4px; white-space: nowrap;
            font-size: 17px; font-weight: 700; color: #fff;
        }
        .code-help {
            margin-top: 2px; font-size: 13.5px; line-height: 1.4;
            color: var(--ink-muted);
        }
        .code-help summary {
            cursor: pointer; text-align: center; padding: 10px;
            color: #fff; font-weight: 700; opacity: 0.85;
        }
        .code-help ul { margin: 0 0 8px; padding-left: 20px; }
        .code-help li { margin-bottom: 6px; }
        .phone-cc { flex: 0 0 108px; }
        .phone-national { flex: 1; }
        select.rsvp-input { -webkit-appearance: none; appearance: none; }
        select.rsvp-input option { color: #1E293B; }
        .rsvp-identity {
            text-align: center; font-size: 13.5px; color: var(--ink-muted);
            margin: 0 0 14px; word-break: break-word;
        }
        .rsvp-identity span { font-weight: 700; color: #fff; }
        .rsvp-error {
            display: none; margin-top: 12px; padding: 12px 14px;
            border-radius: 12px; font-size: 14px; line-height: 1.4;
            background: rgba(244,119,107,0.22);
            border: 1px solid rgba(255,255,255,0.30); color: #fff;
        }
        /* rsvpError() toggles .active — without this the message is SET but
           never shown, so a failed RSVP looks like the button did nothing.
           Every element the script toggles .active on needs its own rule:
           .loading, .error and this one. */
        .rsvp-error.active { display: block; }

        /* ── States ───────────────────────────────────────────────────── */
        .loading { display: none; text-align: center; padding: 60px 0; }
        .loading.active { display: block; }
        .spinner {
            width: 34px; height: 34px; margin: 0 auto 14px;
            border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff;
            border-radius: 50%; animation: spin 0.9s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .spinner { animation-duration: 3s; }
        }
        .loading-text { font-size: 15px; color: var(--ink-muted); }
        /* Shown under the spinner when a load stalls (stall_guard.js). No
           `display` here: that would override the element's `hidden`. */
        .slow-load { margin-top: 22px; }
        .slow-load-text { margin: 0; font-size: 14px; color: var(--ink-muted); }
        .responded {
            text-align: center; padding: 30px 22px;
            background: var(--card); border: 1px solid var(--card-border);
            border-radius: var(--radius-card);
        }
        .responded-icon { font-size: 42px; margin-bottom: 10px; }
        .responded-text { font-size: 17px; font-weight: 700; line-height: 1.35; }
        .error {
            display: none; text-align: center; padding: 40px 20px;
            font-size: 16px; line-height: 1.5; color: var(--ink-soft);
        }
        .error.active { display: block; }

        /* ── Get the app ──────────────────────────────────────────────── */
        .download {
            margin-top: 30px; padding-top: 24px;
            border-top: 1px solid rgba(255,255,255,0.18); text-align: center;
        }
        .download-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
        .download-sub {
            font-size: 14px; color: var(--ink-muted); line-height: 1.45;
            margin: 0 0 16px;
        }
        .download img { height: 44px; }
        .open-app-hint {
            text-align: center; font-size: 14px; color: var(--ink-muted);
            margin: 16px 0 0;
        }
        .open-app-hint a { color: #fff; font-weight: 700; }
        /* Which get-the-app part shows (2026-10-07): the join page sets
           <html data-device> from JoinStep.deviceFor. The iPhone app is on
           the App Store and the Android app is not out yet, so Android gets
           neither the badge nor "open in the app", and a computer gets the
           badge with a note for Android owners. */
        .download-android,
        .download-android-note { display: none; }
        .download-android-note {
            font-size: 13px; color: var(--ink-muted); margin: 12px 0 0;
        }
        html[data-device="android"] .download-ios,
        html[data-device="android"] .open-app-hint { display: none; }
        html[data-device="android"] .download-android { display: block; }
        html[data-device="other"] .download-android-note { display: block; }
        .legal-footer {
            text-align: center; margin: 22px 0 0; font-size: 12.5px;
        }
        .legal-footer a { color: rgba(255,255,255,0.75); }

/* ── Join page branding (BUG-163) ────────────────────────────────────────────
   The invite page is the first Next Weekend surface most people ever see —
   they arrive from an SMS link with no app installed — and it carried no
   wordmark at all while web My Plans did. Static (not absolutely
   positioned) because there is nothing to centre it against here. */
/* The wordmark + eyebrow stack. .topbar-title used to be the flex child that
   optically centred itself against the single left-hand button; that job moves
   here now that the title is a column child, and the title's own flex/margin
   are neutralised so they don't fight it. */
.topbar-brand {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
    margin-right: 40px;
}
.topbar-brand .topbar-title {
    flex: initial;
    margin-right: 0;
}
.join-wordmark {
    height: 42px;
    width: auto;
    display: block;
}