/* ============================================================
   TUMBLEBUDDY — AUTH PAGES STYLESHEET                  v1.0
   Loaded via server.js route-matching (pageStylesheet) on all
   public auth routes: login, register, forgot/reset password,
   role selection, invite landing, logout, consent, and onboarding.

   Breakpoints: sm=480px | md=640px | lg=768px | xl=1024px

   Table of Contents:
     01. Auth Portal Token Overrides (body.auth-portal)
     02. Auth Navigation & Topbar
     03. Auth Form Shell  ← canonical layout standard for all auth form pages
         └─ Body Shell, Page Shell, Mascot, Speech Bubble, Auth Card,
            Form Controls, Password Toggle, Remember, Password Strength,
            Buttons, Links, Footer, Toasts, Responsive, Motion Safety
     04. Auth Typography
     05. Auth Utilities & Legacy Aliases
     06. Arcade Buttons (logout, invite, consent, forgot-password)
     07. Links & Footer Aliases (forgot-link legacy)
     08. Toasts (status-toast)
     09. Mascot Reactions (.pixar-input legacy)
     10. Role Selection Page
     11. Role Mission Selector
     12. Landing Pages (Director, Parent, Club Info)
     13. Landing — Main ("Choose Your Path")
     13b. Tumbles Chat Landing — Progressive Conversation
     14. TB Speech Wrap (tumblesBubble.ejs partial)
     15. Accessibility
     16. Legal Sheet (in-page TOS & Privacy tabbed bottom sheet)
   ============================================================ */

/* === 01. AUTH PORTAL TOKEN OVERRIDES === */
/* Auth pages share the premium dark aesthetic of the parent/coach/admin
   portals. Scoped to body.auth-portal so overrides never leak into other
   portals. Mirrors parents.css SEC 00 + SEC 01. Accent stays brand amber
   (pre-login neutral — the user hasn't picked a role yet). */
body.auth-portal {
    /* Accent — brand amber/gold */
    --portal-accent:      var(--tb-amber);
    --portal-accent-dark: var(--hq-amber-dark);

    /* Surface overrides — dark Pixar Pro theme */
    --surface-page:    var(--ink-900);          /* deep dark navy #07101f */
    --surface-card:    var(--dark-card);         /* dark glass #0b1524 */
    --surface-glass:   var(--dark-panel);        /* rgba(15,23,42,0.80) */
    --surface-border:  var(--dark-border);       /* rgba(255,255,255,0.08) */
    --surface-input:   var(--dark-input);        /* slate-800 #1e293b */
    --surface-shadow:  var(--black-40);          /* deeper shadow on dark */

    /* Text overrides — light on dark */
    --text-primary:    var(--dark-text);         /* slate-50 #f8fafc */
    --text-secondary:  var(--slate-300);         /* #cbd5e1 */
    --text-muted:      var(--dark-text-muted);   /* slate-400 #94a3b8 */

    /* Legacy --tb-* design-system tokens → dark values */
    --tb-card-bg:      var(--white-09);          /* dark glass card surface */
    --tb-card-border:  var(--white-12);          /* subtle white glass border */
    --tb-card-shadow:  0 8px 32px var(--black-40);
    --tb-card-radius:  var(--radius-lg);
    --tb-amber-soft:   var(--tb-amber-12);       /* amber tints — keep on dark */
    --tb-amber-border: var(--tb-amber-15);       /* amber borders — keep on dark */
    --tb-navy:         var(--slate-300);         /* was navy text → soft light text */
    --tb-navy-faint:   var(--white-05);          /* near-invisible white wash */

    /* Legacy primary-color used as text across auth → dark-text */
    --primary-color:   var(--dark-text);

    /* Body shell — background/color inherited from styles.css body {} */
    padding-bottom: var(--space-10);
}

/* === partial:authNav ===================================== */
.auth-topbar {
    /* PERFORMANCE UPGRADE: Removed Backdrop Blur for instant rendering — scrolling content passes behind a sticky bar, so the blur re-ran every frame. Near-opaque dark keeps the sticky bar solid without a re-blur. */
    background: color-mix(in srgb, var(--surface-page) 92%, transparent);
    border-bottom: var(--border-2) solid var(--tb-amber-25);
    padding: var(--space-2) var(--space-4);   /* base = compact (phones) */
    display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: var(--z-sticky);
    width: 100%; box-sizing: border-box;
    box-shadow: 0 4px 24px var(--black-40), 0 1px 0 var(--tb-amber-15);
    transition: background var(--duration-moderate) ease, border-bottom-color var(--duration-moderate) ease;
}
.auth-brand {
    display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none; flex-shrink: 0;
    transition: transform var(--duration-fast) cubic-bezier(0.34,1.56,0.64,1), filter 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.auth-brand:active {
    transform: scale(0.92) translateY(2px);
    filter: brightness(0.85);
}
.auth-brand:focus          { outline: none; text-decoration: none; }
.auth-brand:focus-visible  { outline: var(--border-2) solid var(--hq-amber-50); outline-offset: var(--space-1); border-radius: var(--radius-sm); }
.auth-brand-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.auth-brand-name {
    font-family: 'Poppins', sans-serif; font-weight: var(--font-weight-black); font-size: var(--fs-sm);
    color: var(--text-primary); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; line-height: var(--line-height-tight);
}
.auth-nav-pills { display: flex; align-items: center; gap: var(--space-2); }
.auth-nav-pill {
    background: var(--tb-amber-soft); border: var(--border-2) solid var(--tb-amber-border);
    color: var(--tb-navy); padding: var(--space-2) var(--space-4); border-radius: 50px;
    font-family: 'Poppins', sans-serif; font-weight: var(--font-weight-black); font-size: var(--fs-xs);
    text-decoration: none; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide);
    box-shadow: 0 4px 0 var(--surface-shadow); transition: transform var(--duration-xfast), box-shadow 0.1s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    white-space: nowrap; display: inline-block;
}
.auth-nav-pill:active         { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-shadow); }
.auth-nav-pill:focus          { outline: none; text-decoration: none; }
.auth-nav-pill:focus-visible  { outline: var(--border-2) solid var(--hq-amber-50); outline-offset: var(--space-1); }
/* Base = phones: hide brand text in compact topbar */
.auth-brand-name { display: none; }

@media (min-width: 480px) {
    /* sm+: full topbar with brand name */
    .auth-brand-name { display: revert; }
    .auth-topbar { padding: var(--space-3) var(--space-5); }
}

/* === 03. AUTH FORM SHELL === */
/* Single-source layout standard for all auth form pages.
   Change a rule here → every auth page updates.

   Standard page structure:
     body.auth-portal
       topBarAuth partial
       .auth-page  [.auth-page--wide | .auth-page--speech]
         .host-mascot
         [.tb-speech-bubble]          (optional — login page uses it)
         .auth-card  [.auth-card--below-speech]
           [.auth-toast .auth-toast--error | .auth-toast--success]
           form
             .form-group > .auth-label + .auth-input
             .auth-pw-wrapper > .auth-input + .auth-pw-toggle
             .auth-remember
             .auth-btn-primary
           .auth-link
           .auth-footer

   Breakpoints: sm=480px | md=640px  (auth is phone-primary)
   ────────────────────────────────────────────────────── */

/* ── Body Shell → folded into SEC 01 body.auth-portal token block ── */

/* ── Page Shell ───────────────────────────────────────────────── */
.auth-page {
    position: relative;
    width: 100%;
    max-width: var(--layout-max-xs);
    margin: calc(70px + env(safe-area-inset-top)) auto
            calc(var(--space-6) + env(safe-area-inset-bottom));
    padding: 0 var(--space-4) var(--space-6);
    box-sizing: border-box;
    animation: slideUpFadeScale 0.55s var(--ease-spring);
}

/* Role selection page */
.auth-page-role {
    max-width: var(--layout-max-auth);
    padding: var(--space-4) 16px var(--space-9);
    margin-top: calc(70px + env(safe-area-inset-top));
    margin-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* ── Mascot — decorative styles (size/position handled by .tb-mascot-header in styles.css) ── */
/* ── Mascot wrapper — notification badge anchor ── */
/* .host-mascot base styles live in styles.css (shared with portal pages) */
.host-mascot-wrap {
    position: relative;
}

/* Role selection mascot: soft edge + amber glow ring; border/glow react to role hover */
.auth-page-role .host-mascot {
    border-color: var(--white-12);
    box-shadow: 0 12px 32px var(--black-40), 0 0 0 6px var(--hq-amber-glow);
    transition: border-color var(--duration-moderate) ease, box-shadow var(--duration-moderate) ease;
}

/* ── Speech Bubble ────────────────────────────────────────────── */
/* .tb-speech-bubble, .tb-speech-text, .tb-speech-cursor → styles.css §20a */

/* ── Auth Card ────────────────────────────────────────────────── */
.auth-card {
    background: var(--tb-card-bg);
    border: var(--border-2) solid var(--tb-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-5) var(--space-4);
    box-shadow: var(--tb-card-shadow), 0 20px 50px var(--black-10), inset 0 4px 0 var(--white-85);
    position: relative;
    z-index: var(--z-base);
    text-align: center;
}

.auth-card--below-speech { padding-top: var(--space-3); }
/* Use when a speech bubble appears above the card —
   the mascot no longer overlaps the card edge. */

/* Role page card */
.auth-page-role .auth-card { padding: var(--space-15) var(--space-5) 26px; border-radius: var(--radius-lg); }

/* Mascot reacts to input focus — zero JS, pure CSS :has() */
.auth-page:has(.auth-input:focus) .host-mascot {
    transform: scale(1.07) rotate(-4deg);
}

/* Form spacing: flex column puts consistent gap between form-groups */
.auth-card form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Form Controls ────────────────────────────────────────────── */
.auth-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-black);
    color: var(--tb-navy);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-2);
    margin-left: var(--space-2);
    text-align: left;
}

.auth-input {
    width: 100%;
    padding: 11px var(--space-4);
    border-radius: var(--radius-md);
    border: var(--border-2) solid var(--surface-border);
    background: var(--surface-input);
    font-size: var(--fs-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    transition: border-color var(--duration-filter), box-shadow var(--duration-filter);
    outline: none;
    box-sizing: border-box;
    text-align: left;
}
.auth-input::placeholder  { color: var(--slate-400); font-weight: var(--font-weight-semibold); }
.auth-input:focus         { border-color: var(--tb-amber); background: var(--slate-800-70); box-shadow: 0 0 0 3px var(--tb-amber-soft); }
.auth-input:focus-visible { outline: none; }

/* ── Password Toggle ──────────────────────────────────────────── */
.auth-pw-wrapper { position: relative; }
.auth-pw-wrapper .auth-input,
.auth-pw-wrapper .pixar-input {
    padding-right: var(--space-13);
    /* Neutralise the legacy input margin so the wrapper hugs the input box and
       the absolutely-centred toggle (top:50%) lands on the input's true centre.
       Field spacing is owned by .auth-card .form-group (margin-bottom). */
    margin-bottom: 0;
}

.auth-pw-toggle {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-xl);
    padding: var(--space-1);
    line-height: var(--line-height-none);
    opacity: 0.45;
    transition: opacity var(--duration-filter);
    -webkit-tap-highlight-color: transparent;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-pw-toggle:hover  { opacity: 0.7; }
.auth-pw-toggle:active { opacity: 0.9; }
.auth-pw-toggle:focus  { outline: none; }
.auth-pw-toggle:focus-visible {
    outline: var(--border-2) solid var(--tb-amber);
    outline-offset: var(--space-1);
    border-radius: var(--radius-xs);
}

/* ── Remember Me ──────────────────────────────────────────────── */
.auth-remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-align: left;
    margin-top: calc(-1 * var(--space-1));
}
.auth-remember input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: var(--space-4);
    height: var(--space-4);
    accent-color: var(--tb-amber);
    cursor: pointer;
    flex-shrink: 0;
}
.auth-remember label { font-size: var(--fs-sm); font-weight: var(--font-weight-extrabold); color: var(--slate-500); cursor: pointer; }

/* ── Password Strength Bar ────────────────────────────────────── */
.auth-pw-strength {
    height: var(--border-4);
    border-radius: var(--radius-xs);
    margin-top: var(--space-2);
    background: var(--tb-navy-faint);
    overflow: hidden;
}
/* ── Primary Button ───────────────────────────────────────────── */
.auth-btn-primary {
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--tb-amber);
    border: none;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-base);
    font-weight: var(--font-weight-black);
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    min-height: 44px;
    box-shadow: 0 6px 0 var(--hq-amber-dark), 0 8px 20px var(--tb-amber-25);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.auth-btn-primary:hover         { transform: translateY(-2px); box-shadow: 0 8px 0 var(--hq-amber-dark), 0 12px 24px var(--hq-amber-glow); }
.auth-btn-primary:active        { transform: translateY(var(--press-md)); box-shadow: 0 var(--border-2) 0 var(--hq-amber-dark); }
.auth-btn-primary:focus         { outline: none; }
.auth-btn-primary:focus-visible { outline: var(--border-2) solid var(--tb-amber-80); outline-offset: var(--space-1); }
.auth-btn-primary:disabled       { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: 0 var(--border-2) 0 var(--hq-amber-dark); }
.auth-btn-primary:disabled:hover { transform: none; box-shadow: 0 var(--border-2) 0 var(--hq-amber-dark); }
.auth-btn-primary.is-loading    { opacity: 0.8; pointer-events: none; position: relative; }
.auth-btn-primary.is-loading::after {
    content: '';
    display: inline-block;
    width: var(--space-4);
    height: var(--space-4);
    margin-left: var(--space-2);
    vertical-align: middle;
    border: var(--border-2) solid var(--white-30);
    border-top-color: var(--white);
    border-radius: var(--radius-pill);
    animation: btnSpin 0.65s linear infinite;
}

/* ── Links & Footer ───────────────────────────────────────────── */
.auth-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-extrabold);
    color: var(--tb-amber);
    text-decoration: none;
    margin-top: var(--space-2);
    min-height: 44px;
    transition: color var(--duration-filter);
}
.auth-link:hover         { color: var(--hq-amber-dark); }
.auth-link:active        { color: var(--hq-amber-dark); }
.auth-link:focus         { outline: none; }
.auth-link:focus-visible { outline: var(--border-2) solid var(--tb-amber); outline-offset: var(--space-1); border-radius: var(--radius-xs); }

.auth-footer {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-bold);
    color: var(--slate-500);
    text-align: center;
}
.auth-footer a              { color: var(--tb-amber); font-weight: var(--font-weight-black); text-decoration: none; }
.auth-footer a:hover        { color: var(--hq-amber-dark); }

/* ── Inline Notifications ─────────────────────────────────────── */
.auth-toast {
    padding: 13px var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-extrabold);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-5);
    text-align: center;
}
.auth-toast--error {
    background: var(--hq-crimson-95);
    color: white;
    box-shadow: 0 8px 22px var(--hq-crimson-glow);
    border: var(--border-2) solid var(--color-danger-light);
    animation: shakeError var(--duration-medium) cubic-bezier(.36,.07,.19,.97) both;
}
.auth-toast--success {
    background: var(--hq-emerald-500-95);
    color: white;
    box-shadow: 0 8px 22px var(--hq-emerald-500-30);
    border: var(--border-2) solid var(--hq-emerald-300);
}

/* ── Responsive — sm: 480px ───────────────────────────────────── */
@media (min-width: 480px) {
    body.auth-portal     { padding-bottom: var(--space-16); min-height: calc(100vh + var(--space-16)); }
    .auth-page {
        max-width: var(--layout-max-auth);
        margin: calc(75px + env(safe-area-inset-top)) auto
                calc(100px + env(safe-area-inset-bottom));
        padding: 0 var(--space-5) var(--space-16);
    }
    .auth-card           { padding: var(--space-14) var(--space-6) var(--space-6); }
    .auth-card--below-speech { padding-top: var(--space-3); }
    .auth-page-role      { padding: var(--space-5) 20px var(--space-10); }
    .auth-page-role .auth-card { padding: 62px var(--space-6) var(--space-8); }
}

/* ── Responsive — md: 640px ───────────────────────────────────── */
@media (min-width: 640px) {
    body.auth-portal     { padding-bottom: var(--space-16); }
}

/* ── Motion Safety ────────────────────────────────────────────── */
/* .tb-speech-cursor → styles.css §20b */
@media (prefers-reduced-motion: reduce) {
    .auth-page        { animation: none; }
    .host-mascot      { animation: none; }
    .auth-toast--error { animation: none; }
    .auth-page:has(.auth-input:focus)  .host-mascot { transform: none; }
    .auth-page:has(.pixar-input:focus) .host-mascot { transform: none; }
}

/* === Typography =========================================== */
.auth-title {
    font-family: 'Poppins', sans-serif; font-size: var(--fs-2xl2); font-weight: var(--font-weight-black);
    color: var(--tb-navy); margin: 0 0 var(--space-2) 0; line-height: var(--line-height-tight); letter-spacing: -0.8px;
}
.auth-subtitle {
    font-size: var(--fs-sm); font-weight: var(--font-weight-bold); color: var(--slate-500);
    margin: 0 0 var(--space-4) 0; line-height: var(--line-height-normal);
}
.auth-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--tb-amber-soft); border: var(--border-1) solid var(--tb-amber-border);
    border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4);
    font-size: var(--fs-xs); font-weight: var(--font-weight-extrabold); color: var(--hq-amber-dark);
    text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-5);
}

/* === Form Controls ======================================== */
/* .auth-label, .auth-input → styles.css §21
   Legacy aliases kept until register/forgotPassword/resetPassword migrate:
   .pixar-label → use .auth-label (styles.css §21)
   .pixar-input → use .auth-input  (styles.css §21)              */
.pixar-label {
    display: block; font-size: var(--fs-xs); font-weight: var(--font-weight-black); color: var(--tb-navy);
    opacity: 0.7; text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-2); margin-left: var(--space-2);
}
.pixar-input {
    width: 100%; padding: 11px var(--space-4); border-radius: var(--radius-md);
    border: var(--border-2) solid var(--surface-border);
    background: var(--surface-input); font-size: var(--fs-base); font-weight: var(--font-weight-bold); color: var(--text-primary);
    transition: border-color var(--duration-filter), box-shadow var(--duration-filter); outline: none; box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
.pixar-input::placeholder { color: var(--slate-400); font-weight: var(--font-weight-semibold); }
.pixar-input:focus {
    border-color: var(--tb-amber); background: var(--slate-800-70);
    box-shadow: 0 0 0 3px var(--tb-amber-soft);
}
/* Locked invite code — VIP auto-fill from ?code= URL param (register.ejs).
   Presentation only; the field stays readonly with the same value. */
.pixar-input--locked {
    background: var(--surface-input);
    border-color: var(--color-success);   /* emerald = valid linked code */
    color: var(--text-secondary);          /* slate-300, readable on dark */
    cursor: not-allowed;
}
/* Invite/club-code field forces uppercase entry */
.pixar-input--uppercase {
    text-transform: uppercase;
}

/* Auth card form-group spacing */
.auth-card .form-group { text-align: left; margin-bottom: var(--space-3); position: relative; }

/* === Password Utilities =================================== */
/* .auth-pw-wrapper, .auth-pw-toggle, .auth-remember → styles.css §21
   .auth-pw-strength, .auth-pw-strength__bar       → styles.css §21  */
.password-hint {
    font-size: var(--fs-xs); font-weight: var(--font-weight-bold); color: var(--slate-500); text-align: left;
    margin-bottom: var(--space-5);
}

/* === Buttons ============================================== */
/* .auth-btn-primary, .auth-btn-secondary → defined below; .btn-ghost-home is a secondary alias */

/* btn-arcade-login: logout, invite, consent confirmed pages */
.btn-arcade-login {
    width: 100%; padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--tb-amber); border: none; color: white;
    font-family: 'Poppins', sans-serif; font-size: var(--fs-base); font-weight: var(--font-weight-black);
    cursor: pointer; display: block; box-sizing: border-box; text-align: center;
    text-decoration: none; text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
    min-height: 44px;
    box-shadow: 0 6px 0 var(--hq-amber-dark), 0 8px 20px var(--tb-amber-25);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-arcade-login:hover  { transform: translateY(-2px); box-shadow: 0 8px 0 var(--hq-amber-dark), 0 12px 24px var(--hq-amber-glow); }
.btn-arcade-login:active { transform: translateY(var(--press-md)); box-shadow: 0 var(--border-2) 0 var(--hq-amber-dark); }
.btn-arcade-login:focus  { outline: none; }
.btn-arcade-login:focus-visible { outline: var(--border-2) solid var(--tb-amber-80); outline-offset: var(--space-1); }
.btn-arcade-login.is-loading {
    opacity: 0.80; pointer-events: none; position: relative;
}
.btn-arcade-login.is-loading::after {
    content: ''; display: inline-block;
    width: var(--space-4); height: var(--space-4); margin-left: var(--space-2); vertical-align: middle;
    border: var(--border-2) solid var(--white-30); border-top-color: var(--white);
    border-radius: var(--radius-pill); animation: btnSpin 0.65s linear infinite;
}

/* btn-back-login: forgot-password success state — dark secondary button */
.btn-back-login {
    display: inline-block; background: var(--slate-800); color: var(--white);
    padding: var(--space-4) var(--space-8); border-radius: var(--radius-md);
    font-size: var(--fs-base); font-weight: var(--font-weight-black); text-decoration: none; text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider); font-family: 'Poppins', sans-serif;
    box-shadow: 0 6px 0 color-mix(in srgb, var(--slate-900) 70%, transparent);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.btn-back-login:hover { transform: translateY(-2px); box-shadow: 0 8px 0 color-mix(in srgb, var(--slate-900) 70%, transparent); }

/* === Toasts =============================================== */
/* .auth-toast, .auth-toast--error, .auth-toast--success → styles.css §21
   Legacy aliases kept until other auth pages migrate:
   .error-toast   → use .auth-toast .auth-toast--error   (styles.css §21)
   .success-toast → use .auth-toast .auth-toast--success (styles.css §21) */
.status-toast { padding: 13px var(--space-4); border-radius: var(--radius-md); font-weight: var(--font-weight-extrabold); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.status-toast.error {
    background: var(--hq-crimson-95); color: white;
    box-shadow: 0 8px 22px var(--hq-crimson-glow); border: var(--border-2) solid var(--color-danger-light);
}
.status-toast.success {
    background: var(--hq-emerald-500-95); color: white;
    box-shadow: 0 8px 22px var(--hq-emerald-500-30); border: var(--border-2) solid var(--hq-emerald-300);
}
/* === Trust & Hint Text ==================================== */
.trust-note { font-size: 0.74rem; font-weight: var(--font-weight-bold); color: var(--slate-400); margin-top: var(--space-3); }
#invite-hint  { font-size: var(--fs-xs); color: var(--slate-500); margin: var(--space-1) 0 0 var(--space-2); font-weight: var(--font-weight-bold); }
#invite-linked { font-size: var(--fs-xs); color: var(--color-success); margin: var(--space-1) 0 0 var(--space-2); font-weight: var(--font-weight-extrabold); display: none; }

/* === Forgot Password Success State ======================== */
.success-panel { display: none; }
.success-icon {
    font-size: var(--fs-6xl); margin-bottom: var(--space-3); display: block;
    animation: authSuccessPop var(--duration-medium) cubic-bezier(0.34,1.56,0.64,1);
}
.success-title {
    font-family: 'Poppins', sans-serif; font-size: var(--fs-2xl); font-weight: var(--font-weight-black);
    color: var(--tb-navy); margin: 0 0 var(--space-2) 0; letter-spacing: var(--letter-spacing-tight);
}
.success-desc {
    font-size: var(--fs-sm); font-weight: var(--font-weight-bold); color: var(--slate-500); margin: 0 0 var(--space-7) 0; line-height: var(--line-height-normal);
}
/* === Terms & Checkbox ===================================== */
.auth-checkbox-row {
    display: flex; align-items: flex-start; gap: var(--space-2);
    margin-bottom: var(--space-5); text-align: left;
    font-size: var(--fs-xs); color: var(--slate-600); line-height: var(--line-height-normal); cursor: pointer;
}
.auth-checkbox {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: var(--space-4);
    height: var(--space-4);
    accent-color: var(--tb-amber);
    flex-shrink: 0;
    margin-top: var(--space-1);
    cursor: pointer;
}
.auth-terms-text { font-size: var(--fs-xs); color: var(--slate-600); line-height: var(--line-height-normal); }
.auth-terms-text .auth-link { display: inline; margin-top: 0; }

/* === Mascot Reactions (CSS :has() — zero JS) ============== */
/* .auth-page:has(.auth-input:focus) → above §03
   Legacy selector kept for pages still using .pixar-input: */
.auth-page:has(.pixar-input:focus) .host-mascot {
    transform: scale(1.07) rotate(-4deg);
}

/* === Role Selection ======================================= */
.role-name { display: block; font-size: var(--fs-base); font-weight: var(--font-weight-black); color: var(--white); line-height: var(--line-height-tight); margin-bottom: var(--space-05); letter-spacing: -0.3px; text-transform: uppercase; }
.btn-director   { background: linear-gradient(135deg, var(--hq-violet) 0%, var(--hq-violet-700) 100%); box-shadow: 0 7px 0 var(--hq-violet-dark), 0 12px 24px var(--hq-violet-700-28); }
.btn-coach      { background: linear-gradient(135deg, var(--hq-blue-500) 0%, var(--hq-blue-700) 100%); box-shadow: 0 7px 0 var(--hq-blue-800), 0 12px 24px var(--hq-blue-700-28); }

/* Avatar glow reacts to role hover (legacy list fallback) */
.auth-page-role:has(.btn-director:hover)   .host-mascot { border-color: var(--hq-violet); box-shadow: 0 10px 30px var(--hq-violet-35); }
.auth-page-role:has(.btn-coach:hover)      .host-mascot { border-color: var(--hq-blue-500); box-shadow: 0 10px 30px var(--hq-blue-500-35); }

/* ═══════════════════════════════════════════════════════════════
   ROLE MISSION SELECTOR  (roleSelection.ejs — new design)
   ═══════════════════════════════════════════════════════════════ */

/* Per-role card tints live below (.tcl-option[data-rs-role]); the base
   auth-portal dark theme (SEC 01) supplies the dark canvas. */

/* ── Role-selection tcl-option cards ───────────────────────────────────────── */

/* Info-row layout: icon-left / text-stack-right — matches tcl-info-panel__item */
.tcl-option--info-row {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
    min-height: 72px;
}
.tcl-option--info-row .tcl-option__icon {
    flex-shrink: 0;
    font-size: var(--fs-2xl);
    line-height: 1;
    margin-top: 2px;
}
.tcl-option--info-row .tcl-option__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.tcl-option--info-row .tcl-option__hint { text-align: left; }

/* Role selection always stacks vertically — override global md+ row flip */
@media (min-width: 640px) {
    #rs-roles-step .tcl-options { flex-direction: column; }
}

/* Subtle portal-color tints */
.tcl-option[data-rs-role="parent"]   { background: var(--hq-emerald-10); border-color: color-mix(in srgb, var(--hq-emerald) 30%, var(--surface-border)); }
.tcl-option[data-rs-role="coach"]    { background: var(--hq-sky-10);     border-color: color-mix(in srgb, var(--hq-sky)     30%, var(--surface-border)); }
.tcl-option[data-rs-role="director"] { background: var(--hq-violet-12);  border-color: color-mix(in srgb, var(--hq-violet)  30%, var(--surface-border)); }

.tcl-option[data-rs-role="parent"]:hover   { border-color: var(--hq-emerald); }
.tcl-option[data-rs-role="coach"]:hover    { border-color: var(--hq-sky);     }
.tcl-option[data-rs-role="director"]:hover { border-color: var(--hq-violet);  }

/* Tumble HQ — secret card */
.tcl-option[data-rs-role="super_admin"] {
    background: linear-gradient(135deg, var(--hq-ink-900) 0%, var(--hq-dark-red) 100%);
    border-color: var(--hq-crimson);
    box-shadow: 0 4px 16px var(--black-22),
                0 0 0 1px color-mix(in srgb, var(--hq-crimson) 40%, transparent),
                inset 0 2px 0 rgba(255, 255, 255, 0.04);
}
.tcl-option[data-rs-role="super_admin"] .tcl-option__label { color: var(--slate-50); }
.tcl-option[data-rs-role="super_admin"] .tcl-option__hint  { color: var(--slate-400); }
.tcl-option[data-rs-role="super_admin"]:hover {
    border-color: var(--hq-crimson);
    box-shadow: 0 8px 24px var(--black-30),
                0 0 20px var(--hq-crimson-glow),
                inset 0 2px 0 rgba(255, 255, 255, 0.07);
}

/* === Multi-Factor Auth (challenge / setup / backup codes) === */
/* Print-only recovery-sheet title — hidden on screen; shown via @media print in styles.css. */
.mfa-print-header { display: none; }

.mfa-code-input {
    text-align: center;
    letter-spacing: var(--letter-spacing-widest);
    font-size: var(--fs-2xl);
    font-weight: var(--font-weight-bold);
}

.mfa-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.mfa-help {
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-align: center;
}

.mfa-steps {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mfa-step {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--line-height-snug);
}

.mfa-qr {
    display: flex;
    justify-content: center;
    margin: 0 auto var(--space-4);
}

.mfa-qr__img {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-md);
    border: var(--border-2) solid var(--surface-border);
    /* INTENTIONAL LIGHT: QR must stay on a white field for reliable camera scanning. */
    background: var(--white);
    padding: var(--space-2);
}

.mfa-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    text-align: center;
}

.mfa-key__label {
    width: 100%;
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.mfa-key__value {
    font-family: 'Courier New', monospace;
    font-size: var(--fs-base);
    letter-spacing: var(--letter-spacing-wider);
    color: var(--text-primary);
    background: var(--surface-input);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    word-break: break-all;
}

.mfa-key__copy {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

.mfa-warning {
    background: var(--tb-amber-soft);
    border: var(--border-1) solid var(--tb-amber-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    line-height: var(--line-height-snug);
}

.mfa-codes {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.mfa-code {
    font-family: 'Courier New', monospace;
    font-size: var(--fs-base);
    letter-spacing: var(--letter-spacing-wider);
    text-align: center;
    color: var(--text-primary);
    background: var(--surface-input);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.mfa-codes__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.mfa-ack {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-input);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    text-align: left;
    cursor: pointer;
}

/* === Invite Landing ======================================= */
.club-invite-logo {
    width: 88px; height: 88px; border-radius: var(--radius-pill); object-fit: cover;
    border: var(--border-4) solid var(--tb-amber); box-shadow: 0 8px 24px var(--hq-amber-glow);
    /* INTENTIONAL LIGHT: neutral chip behind the club logo art keeps logo colors true on dark. */
    background: var(--white); margin: 0 auto var(--space-4); display: block; position: relative; z-index: var(--z-base);
}
.vip-perks-container {
    background: var(--tb-amber-soft); border: var(--border-2) solid var(--tb-amber-border);
    border-radius: var(--radius-md); padding: var(--space-5) var(--space-5); margin-bottom: var(--space-7); text-align: left;
}
.vip-perk-item {
    display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4);
}
.vip-perk-item:last-child { margin-bottom: 0; }
.perk-icon {
    font-size: var(--fs-2xl2); filter: drop-shadow(0 4px 6px var(--black-10));
    animation: floatTumbles 3s infinite ease-in-out; flex-shrink: 0;
}
.perk-text { font-size: var(--fs-sm); font-weight: var(--font-weight-bold); color: var(--tb-navy); line-height: var(--line-height-normal); }
.perk-text strong { font-weight: var(--font-weight-black); }
.perk-icon__token { width: 1.4em; height: 1.4em; }

/* === Consent Confirmed ==================================== */
.check-badge {
    width: var(--size-sm); height: var(--size-sm); background: linear-gradient(135deg, var(--hq-emerald-500), var(--hq-green-600));
    border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-5); font-size: var(--fs-2xl2);
    box-shadow: 0 8px 20px var(--hq-emerald-500-35);
    animation: authSuccessPop var(--duration-medium) cubic-bezier(0.34,1.56,0.64,1);
}
.legal-note { margin-top: var(--space-5); font-size: var(--fs-xs); font-weight: var(--font-weight-semibold); color: var(--hq-emerald-300); line-height: var(--line-height-normal); }

/* === Logout =============================================== */
.countdown-line { margin-top: var(--space-6); font-size: var(--fs-xs); font-weight: var(--font-weight-bold); color: var(--slate-400); }



/* Mobile-first: stack duo options vertically on narrow auth card, row at sm+ */
.auth-card .tcl-options--duo {
    flex-direction: column;
}
@media (min-width: 480px) {
    .auth-card .tcl-options--duo {
        flex-direction: row;
    }
}


/* === 13. Landing — Trust Strip === */
        .trust-strip {
            font-size: var(--fs-xs); font-weight: var(--font-weight-bold); color: var(--slate-400);
            text-align: center; padding: var(--space-6) var(--space-5) var(--space-12);
            letter-spacing: var(--letter-spacing-wide); position: relative; z-index: var(--z-base);
            animation: slideUpFadeScale var(--duration-anim) var(--ease-spring) 0.4s both;
        }

/* === 13b. Tumbles Chat Landing — Progressive Conversation === */
/* Core tcl-* layout primitives → styles.css §20b (used across auth + parent routes) */
/* Breakpoints: sm=480px | md=640px | lg=768px | xl=1024px */

/* ── Speech bubble: landing-specific min-height override ── */
.tcl-bubble {
    min-height: var(--space-14);
}

/* ── Club code form ── */
.tcl-code-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.tcl-code-label {
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

.tcl-code-input-wrap {
    width: 100%;
}

.tcl-code-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    border: var(--border-2) solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-input);
    font-size: var(--fs-lg);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    text-align: center;
    letter-spacing: var(--letter-spacing-widest);
    font-family: var(--font-family);
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.tcl-code-input:focus {
    outline: none;
    border-color: var(--portal-accent);
    box-shadow: 0 0 0 3px var(--tb-amber-soft);
}

.tcl-code-input.tcl-input--shake {
    animation: tclShake 0.4s var(--ease-spring);
    border-color: var(--color-danger);
}

.tcl-code-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin: 0;
}

.tcl-code-error {
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-danger);
    text-align: center;
    margin: 0;
    animation: tclFadeIn var(--duration-fast);
}

/* ── Submit button ── */
.tcl-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-8);
    background: var(--portal-accent, var(--tb-amber));
    color: var(--ink-950);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: var(--font-weight-black);
    font-family: var(--font-family);
    cursor: pointer;
    box-shadow: 0 6px 0 var(--black-15);
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast);
}

.tcl-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--black-15); }
.tcl-submit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--black-15); }
.tcl-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.tcl-submit-btn:focus { outline: none; }
.tcl-submit-btn:focus-visible { outline: var(--border-2) solid var(--ink-950); outline-offset: var(--space-1); }

.tcl-submit-btn__spinner {
    width: 18px;
    height: 18px;
    border: 3px solid var(--black-20);
    border-top-color: var(--ink-950);
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
}

/* ── Club preview ── */
.tcl-club-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-success);
    border-radius: var(--radius-lg);
    animation: tclFadeIn var(--duration-fast);
    color: var(--white);
    text-align: center;
}

.tcl-club-preview__check { font-size: var(--fs-2xl); }
.tcl-club-preview__name  { font-size: var(--fs-base); font-weight: var(--font-weight-black); }
.tcl-club-preview__sub   { font-size: var(--fs-xs); opacity: 0.85; }

/* ── Info panel (Learn More inline) ── */
.tcl-info-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.tcl-info-panel__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-card);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-lg);
    animation: tclSlideUp var(--duration-base) var(--ease-spring) both;
}

.tcl-info-panel__item:nth-child(1) { animation-delay: 0ms; }
.tcl-info-panel__item:nth-child(2) { animation-delay: 80ms; }
.tcl-info-panel__item:nth-child(3) { animation-delay: 160ms; }

.tcl-info-panel__emoji {
    font-size: var(--fs-2xl);
    line-height: 1;
    flex-shrink: 0;
}

.tcl-info-panel__token-img {
    width: var(--fs-2xl);
    height: var(--fs-2xl);
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.tcl-info-panel__title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.tcl-info-panel__desc {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ── Centered info card (no-code message) ── */
.tcl-info-card--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    background: var(--surface-card);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.tcl-info-card__icon { font-size: var(--fs-3xl); }
.tcl-info-card__body {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── Deep-link CTA ── */
.tcl-deeplink-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-5);
    min-height: 48px;
    background: var(--tb-amber);
    border: var(--border-2) solid var(--tb-amber);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-black);
    color: var(--ink-950);
    text-decoration: none;
    box-shadow: 0 4px 16px var(--tb-amber-25);
    cursor: pointer;
    transition: filter var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.tcl-deeplink-btn:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 6px 24px var(--tb-amber-25); }
.tcl-deeplink-btn:active { filter: brightness(0.96); transform: translateY(var(--press-sm)); box-shadow: none; }
.tcl-deeplink-btn:focus { outline: none; }
.tcl-deeplink-btn:focus-visible { outline: var(--border-2) solid var(--tb-amber); outline-offset: var(--space-1); }

/* ── Step action row: back-left + CTA-right ── */
.tcl-step-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.tcl-step-actions .tcl-back-btn,
.tcl-step-actions .tcl-deeplink-btn { margin-top: 0; }

/* ── Share-with-club nudge button ── */
.tcl-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-5);
    min-height: 44px;
    width: 100%;
    background: var(--tb-amber-soft);
    border: var(--border-2) solid var(--tb-amber-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--portal-accent, var(--tb-amber));
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.tcl-share-btn:hover {
    background: var(--tb-amber-12);
    border-color: var(--portal-accent, var(--tb-amber));
}

.tcl-share-btn:active { transform: translateY(var(--press-sm)); }
.tcl-share-btn:focus { outline: none; }
.tcl-share-btn:focus-visible {
    outline: var(--border-2) solid var(--portal-accent, var(--tb-amber));
    outline-offset: var(--space-1);
}

/* ── Email share drawer ── */
.tcl-email-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    /* PERFORMANCE UPGRADE: Removed Backdrop Blur for instant rendering — the sheet slides in behind this scrim, forcing a re-blur every frame. Darker scrim reads as a dim backdrop without the blur. */
    background: var(--black-90);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-smooth);
}

.tcl-email-drawer.open {
    opacity: 1;
    pointer-events: auto;
}

.tcl-email-drawer__card {
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-top: var(--border-4) solid var(--tb-amber);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-3) var(--space-5) 0;
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-sheet);
}

.tcl-email-drawer.open .tcl-email-drawer__card {
    transform: translateY(0);
}

.tcl-email-drawer__handle {
    width: 40px;
    height: 5px;
    background: var(--surface-border);
    border-radius: var(--radius-pill);
    margin: 0 auto var(--space-4);
    flex-shrink: 0;
}

.tcl-email-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-shrink: 0;
}

.tcl-email-drawer__title {
    font-family: var(--font-family);
    font-size: var(--fs-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.tcl-email-drawer__close {
    background: var(--black-10);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xl);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.tcl-email-drawer__close:hover { background: var(--black-20); color: var(--text-primary); }
.tcl-email-drawer__close:active { background: var(--black-25); transform: scale(0.92); }
.tcl-email-drawer__close:focus { outline: none; }
.tcl-email-drawer__close:focus-visible {
    outline: var(--border-2) solid var(--tb-amber);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}

.tcl-email-drawer__body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--space-4);
}

.tcl-email-preview {
    background: var(--surface-card);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.tcl-email-preview__field {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.tcl-email-preview__label {
    font-size: var(--fs-xs);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.tcl-email-preview__value {
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.tcl-email-preview__divider {
    height: 1px;
    background: var(--surface-border);
    margin: var(--space-3) 0;
}

.tcl-email-preview__text {
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
    margin: 0;
}

.tcl-email-drawer__footer {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) 0 var(--space-8);
    flex-shrink: 0;
}

.tcl-email-copy-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
    background: var(--surface-card);
    border: var(--border-2) solid var(--surface-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.tcl-email-copy-btn:hover { background: var(--black-05); color: var(--text-primary); border-color: var(--text-secondary); }
.tcl-email-copy-btn:active { transform: translateY(var(--press-sm)); }
.tcl-email-copy-btn:focus { outline: none; }
.tcl-email-copy-btn:focus-visible { outline: var(--border-2) solid var(--tb-amber); outline-offset: 3px; }

.tcl-email-send-btn {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
    background: var(--tb-amber);
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-black);
    color: var(--ink-950);
    cursor: pointer;
    box-shadow: 0 4px 16px var(--tb-amber-25);
    transition: filter var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.tcl-email-send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 24px var(--tb-amber-25); }
.tcl-email-send-btn:active { filter: brightness(0.96); transform: translateY(var(--press-sm)); box-shadow: none; }
.tcl-email-send-btn:focus { outline: none; }
.tcl-email-send-btn:focus-visible { outline: var(--border-2) solid var(--tb-amber); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .tcl-email-drawer { transition: opacity var(--duration-fast); }
    .tcl-email-drawer__card,
    .tcl-email-drawer__close,
    .tcl-email-copy-btn,
    .tcl-email-send-btn { transition: none; }
}

/* ── Club contact card ── */
.tcl-contact-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
}

.tcl-contact-card__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-card);
    border: var(--border-1) solid var(--surface-border);
    border-radius: var(--radius-lg);
    animation: tclSlideUp var(--duration-base) var(--ease-spring) both;
}

.tcl-contact-card__step:nth-child(1) { animation-delay: 0ms; }
.tcl-contact-card__step:nth-child(2) { animation-delay: 80ms; }
.tcl-contact-card__step:nth-child(3) { animation-delay: 160ms; }

.tcl-contact-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-8);
    height: var(--space-8);
    background: var(--tb-amber);
    color: var(--ink-950);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-black);
    line-height: 1;
}

.tcl-contact-card__title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-black);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.tcl-contact-card__desc {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.tcl-contact-link {
    color: var(--portal-accent, var(--tb-amber));
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.tcl-contact-link:hover { text-decoration: underline; }

.tcl-email-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-6);
    min-height: 48px;
    background: var(--tb-amber);
    color: var(--ink-950);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    font-weight: var(--font-weight-black);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-spring);
    animation: tclSlideUp var(--duration-base) var(--ease-spring) 240ms both;
}

.tcl-email-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--black-15);
}

.tcl-email-cta:active { transform: translateY(var(--press-sm)); }
.tcl-email-cta:focus { outline: none; }
.tcl-email-cta:focus-visible {
    outline: var(--border-2) solid var(--tb-amber);
    outline-offset: var(--space-1);
}

/* ── Mascot loading state ── */
.tcl-mascot.is-loading {
    animation: btnSpin 1s linear infinite;
    filter: brightness(0.9);
}

/* ── Motion safety (landing-specific components) ── */
@media (prefers-reduced-motion: reduce) {
    .tcl-info-panel__item,
    .tcl-contact-card__step,
    .tcl-email-cta { animation: none; opacity: 1; transform: none; }
    .tcl-code-input.tcl-input--shake { animation: none; }
    .tcl-mascot.is-loading { animation: none; }
    .tcl-submit-btn__spinner { animation: none; border-top-color: var(--ink-950); }
}

/* ══════════════════════════════════════════════════════════════════ */
/* ▶ AUTH WRAPPER — Glass plaque login/signup container              */
/* ══════════════════════════════════════════════════════════════════ */

.auth-wrapper {
    margin: 160px auto var(--space-12) auto;
    width: 100%;
    max-width: var(--size-400);
    padding: 0 var(--space-5);
    position: relative;
    animation: slideUpFadeScale var(--duration-slow) var(--ease-spring);
}

/* .tb-speech-wrap / .tb-speech-avatar / .tb-avatar-wrap / .tb-notify-badge → styles.css §20b */
/* .tb-speech-bubble / .tb-speech-text / .tb-speech-cursor → styles.css §20a */
/* .tb-mascot-badge / .tb-mascot-badge--active / .tb-speech-collapsed → styles.css §20a */


/* === 17. ACCESSIBILITY ===================================== */

/* --- :focus-visible states for interactive elements --- */
.pixar-input:focus { outline: none; }
.pixar-input:focus-visible {
    outline: var(--border-2) solid var(--tb-amber);
    outline-offset: var(--space-05);
}

/* --- prefers-reduced-motion: collapse spatial animations --- */
/* .auth-page, .host-mascot, .auth-btn-primary → styles.css §20a/§21 */
@media (prefers-reduced-motion: reduce) {
    .btn-arcade-login:hover { transform: none; }

    .auth-page:has(.pixar-input:focus) .host-mascot {
        transform: none;
    }

    /* .tb-speech-collapsed, .tb-mascot-badge--active → styles.css §20a prefers-reduced-motion */
}

/* === Legal Pages (Terms of Service & Privacy Policy) === */
.legal-wrapper {
    width: 100%;
    max-width: var(--layout-max-auth);
    margin: var(--space-8) auto var(--space-10);
    padding: 0 var(--space-4);
    box-sizing: border-box;
}
.back-link {
    display: inline-block;
    margin-bottom: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-bold);
    color: var(--slate-500);
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}
.back-link:hover         { color: var(--tb-navy); }
.back-link:focus         { outline: none; }
.back-link:focus-visible { outline: var(--border-2) solid var(--tb-amber-80); outline-offset: var(--space-1); border-radius: var(--radius-xs); }
.legal-card {
    background: var(--tb-card-bg);
    border: var(--border-2) solid var(--tb-card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-5) var(--space-10);
    box-shadow: var(--tb-card-shadow);
}
.legal-title {
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-2xl);
    font-weight: var(--font-weight-black);
    color: var(--tb-navy);
    margin: 0 0 var(--space-2);
    line-height: var(--line-height-tight);
}
.legal-subtitle {
    font-size: var(--fs-sm);
    color: var(--slate-500);
    margin: 0 0 var(--space-8);
}
.highlight-box {
    background: var(--tb-amber-soft);
    border: var(--border-2) solid var(--tb-amber-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    font-size: var(--fs-sm);
    color: var(--tb-navy);
    line-height: var(--line-height-normal);
}

@media (min-width: 480px) {
    .legal-card { padding: var(--space-10) var(--space-8) var(--space-12); }
}

/* === 16. LEGAL SHEET === */

/* Overlay — fixed scrim, slides sheet up from bottom */
.legal-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    /* PERFORMANCE UPGRADE: Removed Backdrop Blur for instant rendering — the sheet slides up behind this scrim, forcing a re-blur every frame. Darker scrim reads as a dim backdrop without the blur. */
    background: var(--black-90);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-smooth);
}

.legal-sheet-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* Sheet card */
.legal-sheet-card {
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    border-top: var(--border-4) solid var(--theme-glow);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-3) var(--space-5) 0;
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-sheet);
}

.legal-sheet-overlay.open .legal-sheet-card {
    transform: translateY(0);
}

/* Drag handle */
.legal-sheet-handle {
    width: 40px;
    height: 5px;
    background: var(--surface-border);
    border-radius: var(--radius-pill);
    margin: 0 auto var(--space-4);
    flex-shrink: 0;
}

/* Header row: tabs + close button */
.legal-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Segmented tab control */
.legal-sheet-tabs {
    display: flex;
    flex: 1;
    background: var(--white-05);
    border-radius: var(--radius-pill);
    padding: var(--space-1);
    gap: var(--space-1);
}

.legal-sheet-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    border-radius: var(--radius-pill);
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-sm);
    font-weight: var(--font-weight-extrabold);
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: background var(--duration-base) var(--ease-smooth),
                color var(--duration-base) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.legal-sheet-tab:focus {
    outline: none;
}

.legal-sheet-tab:focus-visible {
    outline: var(--border-2) solid var(--theme-glow);
    outline-offset: 2px;
}

.legal-sheet-tab.active {
    background: var(--theme-glow);
    color: var(--ink-950);   /* dark text on amber — AA-safe (white failed at ~1.9:1) */
    box-shadow: 0 2px 8px var(--black-15);
}

/* Close button */
.legal-sheet-close {
    background: var(--white-05);
    border: none;
    border-radius: var(--radius-pill);
    font-size: var(--fs-2xl);
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-2);
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
    -webkit-tap-highlight-color: transparent;
}

.legal-sheet-close:hover {
    background: var(--white-09);
    color: var(--text-primary);
}

.legal-sheet-close:active {
    background: var(--white-12);
    color: var(--text-primary);
    transform: scale(0.92);
}

.legal-sheet-close:focus {
    outline: none;
}

.legal-sheet-close:focus-visible {
    outline: var(--border-2) solid var(--theme-glow);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}

/* Content body */
.legal-sheet-body {
    font-size: var(--fs-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    text-align: left;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--space-10);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
    .legal-sheet-overlay { transition: opacity var(--duration-fast); }
    .legal-sheet-card { transition: none; }
    .legal-sheet-tab { transition: none; }
    .legal-sheet-close { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/*  ACCESSIBILITY: PREFERS-REDUCED-MOTION (UNIVERSAL)                  */
/*  Accessibility: Reduced Motion — universal kill-switch             */
/* ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}