/* ============================================================
   LUMICHESS SIDEBAR NAVIGATION
   Vertical left sidebar for all authenticated pages.
   ============================================================ */

.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 186px;
    height: 100vh;
    background: var(--lumi-bg-nav);
    border-right: 1px solid var(--lumi-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    padding: 0;
}

/* ── Logo ─────────────────────────────────────────────────── */

.nav-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Left padding matches the nav-link icon column (.nav-links padding 2 +
       .nav-link padding 12 = 14px) — wood-tile mark sits in the same column
       as the link icons. */
    padding: 24px 8px 20px 14px;
    font-family: 'Satoshi', sans-serif;
    font-weight: 900;
    font-size: 27px;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

/* Wood-tile mark — Lumichess primary brand icon (matches /home hero) */
.nav-logo__mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin-right: 6px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.nav-logo__mark svg { display: block; width: 100%; height: 100%; }

.nav-logo .logo-amber,
.site-footer__logo .logo-amber { color: #D4A44B; }
.nav-logo .logo-cream,
.site-footer__logo .logo-cream { color: #E8E4DF; }
.nav-logo .logo-i,
.site-footer__logo .logo-i {
    position: relative;
    color: #D4A44B;
}
.nav-logo .logo-diamond,
.site-footer__logo .logo-diamond {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    filter: none;
    width: 27px;
    height: 27px;
    top: 2px;
    left: calc(50% + 1px);
    transform: translate(-50%, -50%);
}

/* ── Nav Links ─────────────────────────────────────────────── */

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* Left padding 2 + .nav-link padding-left 12 = 14px — aligns link icons
       with the nav-logo's wood-tile mark (same 14px left offset). */
    padding: 6px 10px 8px 2px;
    flex: 1;
}

.nav-link {
    --nav-icon-color: rgba(245,239,227,0.82);
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(245,239,227,0.84);
    text-decoration: none;
    font-family: var(--lumi-font);
    font-size: 16px;
    font-weight: 560;
    padding: 8px 10px 8px 8px;
    border-radius: 12px;
    white-space: nowrap;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,0.045);
}

.nav-link.active,
.nav-link--active {
    color: #fff;
    background: rgba(255,255,255,0.065);
}

.nav-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0;
    color: var(--nav-icon-color);
    background: transparent;
    flex-shrink: 0;
    box-shadow: none;
    opacity: 0.96;
    transition: color 150ms ease, opacity 150ms ease, filter 150ms ease, transform 150ms ease;
}

.nav-link__icon svg {
    display: block;
    width: 23px;
    height: 23px;
    fill: currentColor;
    stroke-width: 2.25;
}

.nav-link:hover .nav-link__icon {
    color: var(--nav-icon-color);
    opacity: 1;
    transform: translateY(-1px);
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
}

.nav-link.active .nav-link__icon,
.nav-link--active .nav-link__icon {
    color: var(--nav-icon-color);
    opacity: 1;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.22));
}

.nav-link:hover,
.nav-link.active,
.nav-link--active {
    --nav-icon-color: #fff;
}

.nav-link[style*="margin-top:auto"],
.nav-link[style*="margin-top: auto"],
.nav-link--bottom {
    margin-top: auto !important;
    margin-bottom: 8px;
}

/* "soon" variant — coming-soon nav items rendered with a small amber badge,
   muted text colour, and no pointer interaction. */
.nav-link--soon {
    color: var(--lumi-text-muted, rgba(245, 230, 200, 0.55));
    cursor: default;
}
.nav-link--soon:hover,
.nav-link--soon:focus {
    background: transparent;
    color: var(--lumi-text-muted, rgba(245, 230, 200, 0.55));
}
.nav-link__soon {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(212, 164, 75, 0.14);
    color: #D4A44B;
    line-height: 1;
}

/* Hide Learn nav link until Learn module ships. Remove this rule to re-enable. */
.nav-link[href="/learn.html"],
.nav-link[href="/learn"],
.nav-tab[data-nav="lessons"] {
    display: none !important;
}

/* ── User Section (bottom) ────────────────────────────────── */

.nav-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 16px 2px;
    border-top: 1px solid var(--lumi-border);
}

/* Unified pill: Profile (signed-in) + Sign in (guest) */
.nav-user__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 6px 10px 6px 8px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--lumi-text-primary);
    font-family: var(--lumi-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--lumi-ease), border-color var(--lumi-ease), color var(--lumi-ease);
}
.nav-user__pill:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: transparent;
}

/* Profile pill: avatar + name + gear */
.nav-user__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0B35A, #A67B2B);
    color: #1a1a17;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.nav-user__name {
    flex: 1;
    min-width: 0;
    font-family: var(--lumi-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--lumi-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-user__gear {
    width: 14px;
    height: 14px;
    color: var(--lumi-text-muted);
    flex-shrink: 0;
    transition: color var(--lumi-ease);
}
.nav-user__pill--profile:hover .nav-user__gear {
    color: var(--lumi-accent, #D4A44B);
}

/* Auth-pill visibility is controlled by an `html.lumi-auth-{guest,user}`
   class set synchronously by a pre-paint script in each hosting page
   (reads the Supabase session from localStorage before paint).

   Defensive default: guest "Sign in" pill is visible BY DEFAULT, with the
   profile pill hidden. If auth-prepaint.js doesn't run (stale cache,
   service-worker race, blocked script), the footer still shows the Sign
   in pill instead of going empty. lumi-auth-user flips both pills. */
.js-nav-auth-user  { display: none !important; }
.js-nav-auth-guest { display: flex; }
html.lumi-auth-user .js-nav-auth-guest { display: none !important; }
html.lumi-auth-user .js-nav-auth-user  { display: flex !important; }

/* Sign in pill: filled amber */
.nav-user__pill--signin {
    justify-content: flex-start;
    background: var(--lumi-accent, #D4A44B);
    border-color: var(--lumi-accent, #D4A44B);
    color: #1a1a17;
}
.nav-user__pill--signin:hover {
    background: #E0B35A;
    border-color: #E0B35A;
}

/* ── Main Content Offset ──────────────────────────────────── */

.app-main {
    margin-left: 186px;
    min-height: 100vh;
}

/* ── Mobile ────────────────────────────────────────────────── */

/* ── Mobile: sidebar becomes bottom tab bar ──────────────── */
@media (max-width: 768px) {
    /* Safety net: prevent any stray overflowing element from
       producing a horizontal scrollbar that eats bottom viewport
       space and shifts the fixed nav up. */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .side-nav {
        /* !important on every positioning prop so no page CSS can
           clobber it. Some React pages (insights, profile-report)
           were breaking the fix; defensive declarations eliminate
           specificity / source-order ambiguity. */
        position: fixed !important;
        box-sizing: border-box !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        flex-direction: row !important;
        border-right: none;
        border-top: 1px solid var(--lumi-border);
        padding: 0 !important;
        /* iOS safe-area inset so the bar clears the home indicator.
           box-sizing: border-box ensures the padding counts INSIDE
           the declared height, otherwise content-box adds padding
           outside and the nav renders 34px taller than intended. */
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        height: calc(68px + env(safe-area-inset-bottom, 0)) !important;
        /* Force a new stacking context so the nav isolates from
           any ancestor's transform/filter/contain side effects. */
        isolation: isolate;
    }
    .nav-logo {
        display: none;
    }
    .nav-links {
        flex: 1;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        padding: 0;
        gap: 0;
    }
    .nav-link {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        padding: 10px 2px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 0;
        color: var(--lumi-text-muted, #8a8a85);
        text-align: center;
        line-height: 1.1;
    }
    .nav-link.active {
        background: transparent;
        color: var(--lumi-amber, #E0B35A);
    }
    .nav-link:hover {
        background: transparent;
    }
    .nav-link__icon {
        width: 28px;
        height: 28px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
    }
    .nav-link__icon svg {
        width: 26px;
        height: 26px;
    }
    .nav-link:hover .nav-link__icon {
        transform: none;
        box-shadow: none;
    }
    .nav-user {
        display: none;
    }
    /* Content gets the full viewport width; reserve space for bottom bar.
       Use padding-bottom instead of margin-bottom so the space is
       reserved INSIDE the element — necessary for pages like
       puzzles.html (.puzzle-hub) that are their own scroll
       containers with min-height: 100vh. margin-bottom would push
       a sibling down but wouldn't clear a fixed-nav overlay on an
       internal scroller. !important because page-specific CSS
       (e.g. .hp-dash padding shorthand in homepage.css, or
       .ins-page / .pr-page 100vh + 64px padding) loads after
       nav.css and wins on equal specificity otherwise. */
    .app-main,
    .db-layout,
    .monitor-setup,
    .monitor-loading,
    .monitor-main,
    .ins-page,
    .pr-page {
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
        box-sizing: border-box;
    }
    /* React pages (.ins-page / .pr-page) lock themselves to 100vh
       which forces the element to be viewport-tall and content
       below sits behind the fixed bar. Release the lock so the
       element grows with its content and the page scrolls cleanly. */
    .ins-page,
    .pr-page {
        min-height: auto !important;
    }

    /* Release internal scroll containers on mobile so the whole
       page flows as one document — no nested scroll contexts,
       no hidden content hiding behind internal scrollbars. */
    .ins-fide-results,
    .pr-game-list,
    .pr-moments {
        max-height: none !important;
        overflow-y: visible !important;
    }
    /* Pages that lock themselves to 100vh and have their own internal
       overflow need the same bottom clearance, otherwise content sits
       behind the fixed tab bar. Release the 100vh lock and let the
       window scroll handle layout. */
    .puzzle-hub {
        min-height: auto !important;
        overflow-y: visible !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Pages not in launch scope (blocked at URL level via vercel.json
       redirects) also hidden from the mobile tab bar as a belt-and-
       suspenders measure. */
    .nav-link[href="/monitor.html"],
    .nav-link[href="/monitor"],
    .nav-link[href="/database.html"],
    .nav-link[href="/database"],
    .nav-link[href="/analysis.html"],
    .nav-link[href="/analysis"],
    .nav-link[href="/game-report.html"],
    .nav-link[href="/game-report"],
    .nav-link--soon {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .nav-link {
        font-size: 11px;
        padding: 8px 1px;
    }
    .nav-link__icon svg {
        width: 24px;
        height: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE APP SHELL — Build Bible v2 §2.4 + §2.8. Scoped to html.lumi-native so
   the website is untouched. Reuses the existing .side-nav markup; restyles it
   into a real native tab-bar (safe-area-correct, blurred, native selected state).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Warm radial glow on every native screen (no flat grey). */
html.lumi-native body {
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(212,164,75,0.10), transparent 60%),
        var(--lumi-bg-body);
    background-attachment: local;
}

@media (max-width: 768px) {
    /* Native tab-bar: fixed 64px visual rail + home-indicator inset. */
    html.lumi-native .side-nav {
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        background: rgba(48, 46, 43, 0.92) !important;
        border-top: 1px solid var(--lumi-border-hover) !important;
        -webkit-backdrop-filter: saturate(140%) blur(20px);
        backdrop-filter: saturate(140%) blur(20px);
    }
    html.lumi-native .side-nav .nav-links > .nav-link {
        display: none !important;
    }
    html.lumi-native .side-nav .nav-links > .nav-link[href="/home"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/home.html"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/play/online"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/play/online/"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/profile-report"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/profile-report.html"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/puzzles"],
    html.lumi-native .side-nav .nav-links > .nav-link[href="/puzzles.html"],
    html.lumi-native .side-nav .nav-links > .lumi-tab-more {
        display: flex !important;
    }
    /* Bigger, tappable tabs (icon over label) */
    html.lumi-native .side-nav .nav-link {
        position: relative;
        flex-direction: column; gap: 3px;
        color: var(--lumi-text-dim) !important;
        font-size: 11px; font-weight: 600;
        height: 64px;
        padding: 7px 4px;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        background: transparent;
        touch-action: manipulation;
    }
    html.lumi-native .side-nav .nav-link:link,
    html.lumi-native .side-nav .nav-link:visited,
    html.lumi-native .side-nav .nav-link:hover,
    html.lumi-native .side-nav .nav-link:active {
        color: var(--lumi-text-dim) !important;
        background: transparent !important;
        text-decoration: none !important;
    }
    html.lumi-native .side-nav .nav-link .nav-link__icon { opacity: 0.92; width: 27px; height: 27px; }
    html.lumi-native .side-nav .nav-link .nav-link__icon svg { width: 26px; height: 26px; }
    /* Active tab — the inline router adds `nav-link--active` (BEM), so match BOTH forms. */
    html.lumi-native .side-nav .nav-link.active,
    html.lumi-native .side-nav .nav-link--active {
        color: #ffffff !important;
        background: transparent;
    }
    html.lumi-native .side-nav .nav-link.active:link,
    html.lumi-native .side-nav .nav-link.active:visited,
    html.lumi-native .side-nav .nav-link--active:link,
    html.lumi-native .side-nav .nav-link--active:visited,
    html.lumi-native .side-nav .nav-link--active:hover,
    html.lumi-native .side-nav .nav-link--active:active {
        color: #ffffff !important;
    }
    html.lumi-native .side-nav .nav-link.active .nav-link__icon,
    html.lumi-native .side-nav .nav-link--active .nav-link__icon {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.16));
    }
    /* No separate active line; selected state is brighter white only. */
    html.lumi-native .side-nav .nav-link.active::before,
    html.lumi-native .side-nav .nav-link--active::before {
        content: none !important;
    }
}

@media (max-width: 768px) {
    /* ── ONE LOGO LAW (Build Bible v2 §2.3): exactly one Lumıchess lockup, in the
       app-bar. Kill every per-page duplicate mark + the floating profile pill. ── */
    /* The floating profile pill is gone on every native screen (founder ask). */
    html.lumi-native .nav-user { display: none !important; }
    /* Per-page duplicate logos/headers are hidden ONLY where the app-bar is
       actually injected (has-appbar) — so screens without it (home onboarding)
       keep their own header instead of losing all branding. */
    html.lumi-native.has-appbar .hp-logo,
    html.lumi-native.has-appbar .prs-logomark,
    html.lumi-native.has-appbar .hp-header__mobile-auth-btn,
    html.lumi-native.has-appbar .hp-header__mobile-menu-wrap,
    html.lumi-native.has-appbar .hp-empty-hero__header { display: none !important; }

    /* ── The single fixed app-bar (injected by app-shell.js on tab-root screens) ── */
    html.lumi-native .lumi-appbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 999;
        /* 3-column grid → brand centered like an iOS nav-bar title, action right */
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        min-height: 52px;
        padding: max(calc(env(safe-area-inset-top) - 12px), 0px) 10px 0 10px;
        box-sizing: content-box;
        /* Edge-to-edge (ios contentInset:never): the page scrolls UNDER this bar.
           Tinted to the PAGE body colour (not a separate band) so the brand reads
           as floating on the page; opaque enough to mask scrolling content, with a
           soft frost so the warm glow still shows + a hairline to subtly define it. */
        background: rgba(48, 46, 43, 0.9);
        -webkit-backdrop-filter: saturate(140%) blur(18px);
        backdrop-filter: saturate(140%) blur(18px);
        border-bottom: 1px solid transparent;
        transition: border-color 140ms ease, background-color 140ms ease;
    }
    html.lumi-native.lumi-appbar-scrolled .lumi-appbar {
        border-bottom-color: var(--lumi-border);
    }
    html.lumi-native .lumi-appbar__brand { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 7px; height: 52px; text-decoration: none; }
    html.lumi-native .lumi-appbar__mark { width: 24px; height: 24px; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
    html.lumi-native .lumi-appbar__mark svg { display: block; width: 100%; height: 100%; }
    html.lumi-native .lumi-appbar__word { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; white-space: nowrap; flex-shrink: 0; }
    html.lumi-native .lumi-ab-a { color: #D4A44B; }
    html.lumi-native .lumi-ab-c { color: #E8E4DF; }
    html.lumi-native .lumi-ab-i { color: #D4A44B; position: relative; display: inline-block; }
    /* The diamond glyph over the dotless ı — the brand signature, sized to the
       22px wordmark (mirroring the canonical .logo-diamond proportions). */
    html.lumi-native .lumi-ab-diamond {
        position: absolute; pointer-events: none; overflow: visible;
        width: 20px; height: 20px; top: 1px; left: 50%;
        transform: translate(-50%, -50%);
    }
    html.lumi-native .lumi-appbar__action {
        grid-column: 3;
        justify-self: end;
        width: 38px;
        height: 38px;
        display: inline-grid;
        place-items: center;
        border-radius: 19px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.055);
        color: rgba(245,239,227,0.86);
        padding: 0;
        text-decoration: none;
        box-sizing: border-box;
    }
    html.lumi-native .lumi-appbar__action svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    html.lumi-native .lumi-appbar__login {
        width: auto;
        min-width: 62px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 750;
        white-space: nowrap;
        color: var(--lumi-amber-300, #E0B35A);
        border-color: rgba(224,179,90,0.24);
        background: rgba(224,179,90,0.08);
    }
    html.lumi-native .lumi-appbar__profile {
        color: rgba(245,239,227,0.86);
    }
    /* Left slot: streak — flame + "N days" on one line, centred to the flame. */
    html.lumi-native .lumi-appbar__streak { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 2px; }
    /* class display beats the [hidden] attribute → force-hide when no streak. */
    html.lumi-native .lumi-appbar__streak[hidden] { display: none !important; }
    html.lumi-native .lumi-ab-fire { width: 26px; height: 26px; display: block; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(216,24,16,0.4)); }
    html.lumi-native .lumi-ab-fire-val { display: inline-flex; align-items: baseline; gap: 3px; }
    html.lumi-native .lumi-ab-fire-n { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--lumi-amber-300, #E0B35A); }
    html.lumi-native .lumi-ab-fire-u { font-size: 12px; font-weight: 700; color: var(--lumi-amber-300, #E0B35A); }
    /* Content clears the fixed app-bar */
    html.lumi-native.has-appbar .app-main {
        padding-top: calc(52px + max(calc(env(safe-area-inset-top) - 12px), 0px)) !important;
    }
}

/* ── Native tab-bar: few primary tabs + a "More" sheet (tabbar.js) ── */
html.lumi-native .side-nav .nav-links .lumi-tab-overflow { display: none !important; }
html.lumi-native .side-nav .nav-links .lumi-tab-more {
    background: transparent; border: none; cursor: pointer; font: inherit;
}
/* Bottom sheet for the overflow links */
html.lumi-native .lumi-more-sheet { position: fixed; inset: 0; z-index: 4000; display: none; }
html.lumi-native .lumi-more-sheet.open { display: block; }
html.lumi-native .lumi-more-sheet__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
html.lumi-native .lumi-more-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--lumi-bg-elevated, #232320);
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
}
html.lumi-native .lumi-more-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin: 2px auto 12px; }
html.lumi-native .lumi-more-sheet__panel .nav-link {
    display: flex !important; align-items: center; gap: 14px;
    flex-direction: row !important; width: 100%; box-sizing: border-box;
    /* the mobile tab-bar styles center .nav-link content — sheet rows are a
       list, so pin everything to a consistent left icon column */
    justify-content: flex-start !important;
    padding: 16px 10px; font-size: 17px; font-weight: 600;
    color: var(--lumi-text-primary); text-decoration: none; border-radius: 10px;
}
html.lumi-native .lumi-more-sheet__panel .nav-link__icon { width: 24px; height: 24px; }
html.lumi-native .lumi-more-sheet__panel .nav-link svg { width: 24px; height: 24px; }
html.lumi-native .lumi-more-sheet__panel .nav-link:active { background: rgba(255,255,255,0.06); }
html.lumi-native .lumi-more-sheet__panel .nav-link__soon { margin-left: auto; font-size: 11px; opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   NATIVE KIT — shared Context bar + button system (one language, every feature)
   Values extracted from the approved puzzle SOLVE screen (the reference standard)
   so migrated surfaces match it. Feature shells fill these with their own actions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Context bar — drill-down screens: ‹ back · centered title · optional action. */
html.lumi-native .lumi-topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 12px;
    margin-top: max(env(safe-area-inset-top, 0px), 6px);
}
html.lumi-native .lumi-topbar__title {
    flex: 1 1 auto; min-width: 0; text-align: center;
    font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.lumi-native .lumi-topbar__spacer { width: 38px; height: 38px; flex: 0 0 auto; }

/* Icon button — back / close / share: 38px rounded, subtle fill. */
html.lumi-native .lumi-btn--icon {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: grid; place-items: center; border-radius: 11px; cursor: pointer;
    background: rgba(255,255,255,0.06); border: none;
    color: var(--lumi-text-secondary); text-decoration: none;
}
html.lumi-native .lumi-btn--icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html.lumi-native .lumi-btn--icon:active { background: rgba(255,255,255,0.1); }

/* Primary action — solid amber pill. The single most-important action on a screen. */
html.lumi-native .lumi-btn--primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 56px; padding: 0 28px; border-radius: 28px; border: none; cursor: pointer;
    background: var(--lumi-amber-400, #D4A44B); color: #1c1813;
    font-size: 16px; font-weight: 800; text-decoration: none;
    box-shadow: 0 6px 18px rgba(212,164,75,0.35);
}
html.lumi-native .lumi-btn--primary svg { width: 20px; height: 20px; }
html.lumi-native .lumi-btn--primary:active { filter: brightness(0.95); transform: translateY(1px); }
html.lumi-native .lumi-btn--primary:disabled { opacity: 0.4; box-shadow: none; }

/* Ghost action — flat icon-over-label, secondary (Prev / Next, etc.). */
html.lumi-native .lumi-btn--ghost {
    flex: 0 0 auto; min-width: 84px; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: transparent; border: none; box-shadow: none; cursor: pointer;
    color: var(--lumi-text-secondary, #B8B2A8); font-size: 12px; font-weight: 600; border-radius: 12px;
}
html.lumi-native .lumi-btn--ghost svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.lumi-native .lumi-btn--ghost:disabled { opacity: 0.3; }
html.lumi-native .lumi-btn--ghost:active { background: rgba(255,255,255,0.06); }

/* Bottom action bar — feature-specific dock; one layout, varied contents. */
html.lumi-native .lumi-actionbar {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border-top: 1px solid var(--lumi-border, rgba(255,255,255,0.07));
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   NATIVE FEEL LAYER — screen-to-screen transition discipline
   (Chess.com teardown §5.1: dark frame-1 paint, content cross-
   fade on every document load, instant touch feedback.)
   ============================================================ */
/* Frame-1 paint uses the agreed native app background. */
html.lumi-native { background-color: #302e2b; }
html.lumi-native body { background-color: #302e2b; }
html.lumi-native.lumi-launch-pending,
html.lumi-native.lumi-launch-pending body {
    background: #302e2b !important;
}
html.lumi-native.lumi-launch-pending body > :not(#lumi-launch-gate):not(#lumi-native-splash) {
    visibility: hidden !important;
}

/* The ~130ms page cross-dissolve lives in tokens.css (it must override the
   lumiReveal-killer there). */

/* Kill the 300ms double-tap-zoom wait + the grey iOS/Android tap flash. */
html.lumi-native {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html.lumi-native body {
    touch-action: manipulation;
    overscroll-behavior: none;
}
html.lumi-native * { -webkit-tap-highlight-color: transparent; }

/* Instant pressed state on every tappable that lacks a bespoke one.
   ~80ms in, no transition out — touch must answer within a frame. */
html.lumi-native :is(button, [role="button"], a):active {
    filter: brightness(1.12);
}
html.lumi-native :is(.gcard, .lumi-coach__mw-row, .lumi-coach__plat, .lumi-coach__cta):active {
    transform: translateY(1px);
}

/* Native: SEO/marketing prose is for search engines, not the app. */
html.lumi-native .prs-about { display: none !important; }

/* Designed empty state (native) — replaces silent /home redirects. */
html.lumi-native .lumi-empty {
    min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 36px; gap: 0;
}
html.lumi-native .lumi-empty__icon {
    width: 64px; height: 64px; border-radius: 18px; background: rgba(212,164,75,0.10);
    color: var(--lumi-amber-300, #E0B35A); display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
html.lumi-native .lumi-empty__icon svg { width: 30px; height: 30px; }
html.lumi-native .lumi-empty__title { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; color: #fff; margin-bottom: 7px; }
html.lumi-native .lumi-empty__sub { font-size: 13.5px; line-height: 1.5; color: var(--lumi-text-muted, #8a857c); margin-bottom: 22px; max-width: 30ch; }
html.lumi-native .lumi-empty__cta {
    display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px;
    border-radius: 12px; background: var(--lumi-amber-300, #E0B35A); color: #1a1a17;
    font-size: 14.5px; font-weight: 800; text-decoration: none;
}
html.lumi-native .lumi-empty__cta:active { transform: translateY(1px); }
/* Native: the marketing site footer never belongs in the app. */
html.lumi-native .site-footer { display: none !important; }

/* First native app open: account choice gate. */
html.lumi-native.has-launch-gate,
html.lumi-native.has-launch-gate body {
    overflow: hidden !important;
}
html.lumi-native.has-launch-gate .side-nav,
html.lumi-native.has-launch-gate .lumi-appbar,
html.lumi-native body:has(.lumi-launch-gate) .side-nav,
html.lumi-native body:has(.lumi-launch-gate) .lumi-appbar {
    display: none !important;
}
html.lumi-native .lumi-launch-gate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(calc(env(safe-area-inset-top, 0px) - 4px), 12px) 22px max(env(safe-area-inset-bottom, 0px), 18px);
    box-sizing: border-box;
    overflow: hidden;
    background: #302e2b;
    color: #f5efe3;
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    transition:
        opacity 260ms cubic-bezier(.2,.7,.18,1),
        transform 260ms cubic-bezier(.2,.7,.18,1),
        filter 260ms cubic-bezier(.2,.7,.18,1);
    will-change: opacity, transform, filter;
}
html.lumi-native .lumi-launch-gate__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
html.lumi-native .lumi-launch-gate__bg-tile {
    position: absolute;
    top: -180px;
    right: -200px;
    width: 640px;
    height: 640px;
    opacity: 0.045;
    transform: rotate(-12deg);
    filter: blur(0.5px);
    animation: lumiLaunchBgSettle 900ms cubic-bezier(.2,.7,.18,1) both;
}
html.lumi-native .lumi-launch-gate.is-leaving {
    opacity: 0;
    transform: scale(0.992) translateY(6px);
    filter: blur(2px);
    pointer-events: none;
}
html.lumi-native .lumi-launch-gate__inner {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 2px 0 8px;
    text-align: center;
    position: relative;
    z-index: 1;
}
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__inner {
    padding-top: 0;
}
html.lumi-native .lumi-launch-gate__top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 34px;
}
html.lumi-native .lumi-launch-gate__back {
    border: 0;
    background: transparent;
    color: rgba(232,228,223,0.78);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    padding: 6px 8px 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}
html.lumi-native .lumi-launch-gate__back[hidden] {
    display: none;
}
html.lumi-native .lumi-launch-gate__back svg {
    width: 18px;
    height: 18px;
}
html.lumi-native .lumi-launch-gate__back:active {
    color: #E8E4DF;
}
html.lumi-native .lumi-launch-gate__tagline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    color: rgba(245,239,227,0.9);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
    animation: lumiLaunchTaglineIn 520ms ease both;
}
html.lumi-native .lumi-launch-gate__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Satoshi', var(--lumi-font, system-ui, sans-serif);
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
    width: max-content;
}
html.lumi-native .lumi-launch-gate__brand-mark {
    width: 27px;
    height: 27px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
html.lumi-native .lumi-launch-gate__brand-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}
html.lumi-native .lumi-launch-gate__brand .logo-amber { color: #D4A44B; }
html.lumi-native .lumi-launch-gate__brand .logo-cream { color: #E8E4DF; }
html.lumi-native .lumi-launch-gate__brand .logo-i {
    position: relative;
    display: inline-block;
    color: #D4A44B;
}
html.lumi-native .lumi-launch-gate__brand-name {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}
html.lumi-native .lumi-launch-gate__brand .logo-diamond {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    filter: none;
    width: 24px;
    height: 24px;
    top: 2px;
    left: calc(50% + 1px);
    transform: translate(-50%, -50%);
}
html.lumi-native .lumi-launch-gate__login {
    position: relative;
    z-index: 2;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: rgba(232,228,223,0.78);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    min-width: 64px;
    min-height: 44px;
    padding: 0 0 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}
html.lumi-native .lumi-launch-gate__login:active {
    color: #E8E4DF;
}
html.lumi-native .lumi-launch-gate__hero-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 26px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(0,0,0,0.28);
}
html.lumi-native .lumi-launch-gate__hero-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
html.lumi-native .lumi-launch-gate__copy {
    margin: auto 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    font-size: 38px;
    margin-bottom: 17px;
    animation: lumiLaunchBrandIn 680ms cubic-bezier(.2,.7,.18,1) 130ms both;
}
html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 96px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(212,164,75,0.08), rgba(212,164,75,0.62), rgba(212,164,75,0.08));
    box-shadow: 0 0 8px rgba(212,164,75,0.12);
    transform: translateX(-50%);
    transform-origin: center;
    animation: lumiLaunchLineIn 520ms ease 560ms both;
}
html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    margin-right: 7px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.26);
    animation: lumiLaunchMarkPop 620ms cubic-bezier(.2,.8,.2,1) 180ms both;
}
html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand .logo-diamond {
    width: 34px;
    height: 34px;
    top: 3px;
}
html.lumi-native .lumi-launch-gate__copy h1 {
    margin: 0 auto;
    max-width: calc(100vw - 44px);
    color: #fff;
    font-size: 17px;
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 800;
    white-space: nowrap;
    animation: lumiLaunchTitleIn 560ms ease 470ms both;
}
html.lumi-native .lumi-launch-gate__copy p {
    margin: 0 auto;
    max-width: 30ch;
    color: rgba(232,228,223,0.72);
    font-size: 16px;
    line-height: 1.45;
}
html.lumi-native .lumi-launch-gate__actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: lumiLaunchActionsIn 560ms ease 660ms both;
}
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__actions,
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__copy,
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__login,
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__tagline,
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__top {
    display: none;
}
html.lumi-native .lumi-launch-gate__or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: rgba(232,228,223,0.44);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    margin: 2px 0;
}
html.lumi-native .lumi-launch-gate__or span {
    height: 1px;
    background: rgba(232,228,223,0.12);
}
html.lumi-native .lumi-launch-gate__or em {
    font-style: normal;
}
html.lumi-native .lumi-launch-gate__oauth {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255,255,255,0.07);
    color: #F2EDE4;
}
html.lumi-native .lumi-launch-gate__oauth-icon {
    width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html.lumi-native .lumi-launch-gate__oauth-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}
html.lumi-native .lumi-launch-gate__oauth--apple .lumi-launch-gate__oauth-icon {
    width: 17px;
    height: 22px;
}
html.lumi-native .lumi-launch-gate__oauth--email .lumi-launch-gate__oauth-icon {
    color: #F2EDE4;
}
html.lumi-native .lumi-launch-gate__oauth:disabled {
    opacity: 0.58;
    cursor: default;
}
html.lumi-native .lumi-launch-gate__oauth:active {
    transform: translateY(1px);
}
html.lumi-native .lumi-launch-gate__error {
    min-height: 18px;
    margin: 2px 0 0;
    color: #ffb4a8;
    font-size: 12px;
    line-height: 1.35;
}
html.lumi-native .lumi-launch-gate__guest {
    align-self: center;
    border: 0;
    background: transparent;
    color: rgba(232,228,223,0.72);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding: 4px 8px;
    margin-top: 2px;
    cursor: pointer;
}
html.lumi-native .lumi-launch-gate__guest:active {
    color: #E8E4DF;
}
html.lumi-native .lumi-launch-gate__email-form {
    width: min(100%, 378px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    margin: 0 auto auto;
    text-align: left;
    animation: lumiLaunchActionsIn 280ms ease both;
}
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__email-form {
    display: flex;
}
html.lumi-native .lumi-launch-gate.is-email .lumi-launch-gate__bg-tile {
    opacity: 0.025;
    top: -220px;
    right: -230px;
}
html.lumi-native .lumi-launch-gate__email-top {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    align-items: center;
    min-height: 34px;
    margin-top: 0;
    margin-bottom: 48px;
}
html.lumi-native .lumi-launch-gate__email-back {
    position: relative;
    z-index: 2;
    justify-self: start;
    border: 0;
    background: transparent;
    color: rgba(232,228,223,0.72);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    min-height: 44px;
    padding: 0 8px 0 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
html.lumi-native .lumi-launch-gate__email-back svg {
    width: 19px;
    height: 19px;
}
html.lumi-native .lumi-launch-gate__email-back:active {
    color: #E8E4DF;
}
html.lumi-native .lumi-launch-gate__email-login {
    position: relative;
    z-index: 2;
    justify-self: end;
    border: 0;
    background: transparent;
    color: rgba(232,228,223,0.78);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 14px;
    font-weight: 850;
    line-height: 1;
    min-width: 64px;
    min-height: 44px;
    padding: 0 0 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
}
html.lumi-native .lumi-launch-gate__email-login:active {
    color: #E8E4DF;
}
html.lumi-native .lumi-launch-gate__email-brand {
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}
html.lumi-native .lumi-launch-gate__email-brand .lumi-launch-gate__brand {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    font-size: 20px;
}
html.lumi-native .lumi-launch-gate__email-brand .lumi-launch-gate__brand-mark {
    width: 21px;
    height: 21px;
    border-radius: 5px;
}
html.lumi-native .lumi-launch-gate__email-brand .logo-diamond {
    width: 18px;
    height: 18px;
    top: 1px;
}
html.lumi-native .lumi-launch-gate__email-head {
    text-align: center;
    margin-bottom: 12px;
}
html.lumi-native .lumi-launch-gate__email-head h2 {
    margin: 0;
    color: #fff;
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 19px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: 0;
}
html.lumi-native .lumi-launch-gate__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: rgba(232,228,223,0.74);
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
}
html.lumi-native .lumi-launch-gate__field input {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.075);
    color: #F5EFE3;
    font: 780 15px/1.2 var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    padding: 0 14px;
    outline: none;
    -webkit-appearance: none;
}
html.lumi-native .lumi-launch-gate__field input::placeholder {
    color: rgba(232,228,223,0.28);
    font-weight: 720;
}
html.lumi-native .lumi-launch-gate__field input:focus {
    border-color: rgba(212,164,75,0.48);
    box-shadow: 0 0 0 2px rgba(212,164,75,0.08);
}
html.lumi-native .lumi-launch-gate__email-submit {
    width: 100%;
    min-height: 50px;
    margin-top: 5px;
    border: 1px solid rgba(224,179,90,0.38);
    border-radius: 14px;
    background: linear-gradient(180deg, #D4A44B, #B98531);
    color: #211915;
    font-family: var(--lumi-font, 'Satoshi', system-ui, sans-serif);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
html.lumi-native .lumi-launch-gate__email-submit:disabled {
    opacity: 0.58;
    cursor: default;
}
html.lumi-native .lumi-launch-gate__email-submit:active:not(:disabled) {
    transform: translateY(1px);
}
html.lumi-native .lumi-launch-gate__email-error {
    min-height: 18px;
    margin: -3px 0 0;
    color: #ffb4a8;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}
@keyframes lumiLaunchBgSettle {
    from { opacity: 0; transform: rotate(-16deg) scale(1.06); }
    to { opacity: 0.045; transform: rotate(-12deg) scale(1); }
}
@keyframes lumiLaunchTaglineIn {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes lumiLaunchFadeDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lumiLaunchBrandIn {
    from { opacity: 0; transform: translateY(9px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lumiLaunchMarkPop {
    0% { opacity: 0; transform: scale(.86); }
    70% { opacity: 1; transform: scale(1.035); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes lumiLaunchLineIn {
    from { opacity: 0; transform: translateX(-50%) scaleX(.25); }
    to { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes lumiLaunchTitleIn {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lumiLaunchActionsIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    html.lumi-native .lumi-launch-gate__bg-tile,
    html.lumi-native .lumi-launch-gate__tagline,
    html.lumi-native .lumi-launch-gate__login,
    html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand,
    html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand::after,
    html.lumi-native .lumi-launch-gate__copy .lumi-launch-gate__brand-mark,
    html.lumi-native .lumi-launch-gate__copy h1,
    html.lumi-native .lumi-launch-gate__actions,
    html.lumi-native .lumi-launch-gate__email-form {
        animation: none;
    }
}