/* ============================================================
   LiveLocalVibes — sign up on a phone (Oct 2026)
   signup.html only. Loaded LAST in <head>, after css/llv.css.
   Steps live in signuphandler.js. Desktop never changes: every visible
   rule is inside the 768px phone breakpoint and the phone-only pieces
   are hidden above it.
   Colors: background #1C1C2E, cards #2B2B3C, purple #A259FF,
   lime #DAFF8C main action (dark text), pink only for errors.
   ============================================================ */
@media (min-width: 769px) {
  .su-phone-only { display: none !important; }
}

@media (max-width: 768px) {
  :root { --su-bg: #1C1C2E; --su-card: #2B2B3C; --su-card-2: #34344A; --su-line: #3B3B52; --su-lime: #DAFF8C; --su-text: #F1F0F6; --su-muted: #A9A6BC; }
  body.su-app { background: var(--su-bg); }
  body.su-app .site-header { position: sticky; top: 0; z-index: 50; background: rgba(28, 28, 46, .97); padding-top: env(safe-area-inset-top, 0px); }
  body.su-app .site-header .nav { height: 56px; }
  body.su-app .site-header .brand img { height: 36px; }
  body.su-app .site-header .brand .brand-wordmark-img { height: 34px; }
  body.su-app .nav-links a:not(.btn) { display: none; }
  body.su-app .benefit-panel, body.su-app .site-footer { display: none; }

  body.su-app .signup-layout { display: block; min-height: 0; padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.su-app .signup-center { max-width: none; padding: 18px 16px 22px; border-radius: 18px; background: var(--su-card); border-color: var(--su-line); }
  body.su-app .auth-title { font-size: 2rem; text-align: left; }
  body.su-app .auth-sub { text-align: left; margin-bottom: 14px; }

  /* Progress (3 steps) + Skip for now */
  .su-progress { margin-bottom: 16px; }
  .su-progress-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: .8rem; font-weight: 600; color: var(--su-muted); }
  .su-progress-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 6px; }
  .su-progress-bar span { display: block; height: 100%; width: 33%; background: var(--purple); border-radius: 999px; transition: width .3s ease; }
  .su-skip { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--purple); font: 700 .88rem 'Inter', sans-serif; cursor: pointer; }
  body.su-app.su-role-fan .su-progress { display: none; }

  /* Role choices: big tappable rows */
  body.su-app .role-picker { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
  body.su-app .role-option { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; min-height: 76px; padding: 12px 14px; border-radius: 16px; background: var(--su-card-2); }
  body.su-app .role-option .role-icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(162, 89, 255, .14); color: var(--purple); }
  body.su-app .role-option .role-icon llv-icon { width: 26px; height: 26px; }
  body.su-app .role-option .role-name { font-weight: 700; font-size: 1.02rem; color: var(--su-text); }
  body.su-app .role-option .role-desc { font-size: .84rem; color: var(--su-muted); line-height: 1.35; }
  body.su-app .role-option.selected { border-color: var(--purple); background: rgba(162, 89, 255, .16); }

  /* Step 1 visibility, driven by the role picked */
  body.su-app #socialDivider { display: none !important; }
  body.su-app #socialAuthRow { display: none !important; }
  body.su-app.su-role-band #socialAuthRow, body.su-app.su-role-venue.su-venue-new #socialAuthRow { display: flex !important; }
  body.su-app.su-social-finish #socialAuthRow { display: none !important; }
  body.su-app #signupForm { display: none; }
  body.su-app.su-email-open #signupForm, body.su-app.su-social-finish #signupForm { display: flex; }
  #suUseEmail, #suVenueFind, #suFan, #suFounding { display: none; }
  body.su-app.su-role-band:not(.su-email-open):not(.su-social-finish) #suUseEmail,
  body.su-app.su-role-venue.su-venue-new:not(.su-email-open):not(.su-social-finish) #suUseEmail { display: flex; }
  body.su-app.su-role-venue:not(.su-venue-new) #suVenueFind { display: block; }
  body.su-app.su-role-fan #suFan { display: block; }
  body.su-app.su-role-band #suFounding, body.su-app.su-role-venue #suFounding { display: flex; }
  /* Fans and venues still searching don't need the account form yet */
  body.su-app.su-role-fan #signupForm, body.su-app.su-role-venue:not(.su-venue-new):not(.su-social-finish) #signupForm { display: none !important; }

  /* Big social buttons, small "Use email instead" */
  body.su-app .social-auth { gap: 10px; margin-bottom: 6px; }
  body.su-app .btn-social { min-height: 54px; font-size: 1rem; border-radius: 14px; }
  .su-link { align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 2px 0 6px; background: none; border: 0; color: var(--purple); font: 600 .92rem 'Inter', sans-serif; cursor: pointer; }
  #suVenueNotListed { display: flex; }

  /* Inputs: 16px so iPhones don't zoom; 48px tall */
  body.su-app input:not([type=file]), body.su-app select { font-size: 16px !important; min-height: 48px; }
  body.su-app .field-row { flex-direction: column; gap: 0; }
  body.su-app .btn-primary { min-height: 52px; background: var(--su-lime); border-color: var(--su-lime); color: #1C1C2E; font-weight: 700; }

  .su-founding { align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(218, 255, 140, .07); border: 1px solid rgba(218, 255, 140, .25); color: var(--su-text); font-size: .84rem; line-height: 1.4; }
  .su-founding llv-icon { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
  body.su-app .auth-alt { margin-top: 14px; }

  /* Panels (fan, find your venue) */
  .su-panel { margin-bottom: 14px; }
  .su-label { display: block; font-weight: 700; color: var(--su-text); margin-bottom: 8px; }
  .su-sub { color: var(--su-muted); font-size: .9rem; margin-bottom: 14px; }
  .su-search { position: relative; }
  .su-search llv-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
  .su-search input { width: 100%; padding-left: 44px !important; }
  .su-results { margin-top: 8px; }
  .su-result { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 12px; border: 1px solid var(--su-line); border-radius: 12px; background: var(--su-card-2); margin-bottom: 8px; }
  .su-result-main { flex: 1; min-width: 0; }
  .su-result-main b { display: block; color: var(--su-text); }
  .su-result-main span { display: block; color: var(--su-muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .su-result-act { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: .82rem; font-weight: 700; color: var(--su-muted); border: 1px solid var(--su-line); }
  .su-result-act.is-claim { background: var(--su-lime); border-color: var(--su-lime); color: #1C1C2E; }
  .su-hint { color: var(--su-muted); font-size: .82rem; margin-top: 6px; }
  .su-hint-inline { color: var(--su-muted); font-weight: 500; font-size: .8rem; margin-left: 4px; }

  /* Main action (lime) */
  .su-main { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin-top: 8px; border-radius: 14px; border: 0; background: var(--su-lime); color: #1C1C2E; font: 700 1rem 'Inter', sans-serif; cursor: pointer; text-decoration: none; }
  .su-main llv-icon { width: 20px; height: 20px; }
  .su-main:disabled { opacity: .6; cursor: wait; }

  /* Steps 2 and 3: only the step shows */
  body.su-app[data-su-step="2"] .signup-center > :not(.su-keep),
  body.su-app[data-su-step="3"] .signup-center > :not(.su-keep) { display: none !important; }
  .su-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.9rem; letter-spacing: .02em; color: var(--su-text); margin-bottom: 4px; }
  .su-step .field { margin-bottom: 16px; }
  .su-step .field > label:not(.su-add-photos) { display: block; }
  .su-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .su-photo { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 10px 12px; margin-bottom: 16px; border: 1px dashed var(--su-line); border-radius: 16px; cursor: pointer; }
  .su-photo-preview { width: 64px; height: 64px; flex-shrink: 0; border-radius: 16px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: rgba(162, 89, 255, .14); }
  .su-photo-preview llv-icon { width: 28px; height: 28px; }
  .su-photo-preview img, .su-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .su-photo-text { flex: 1; min-width: 0; }
  .su-photo-text b { display: block; color: var(--su-text); }
  .su-photo-text span { display: block; color: var(--su-muted); font-size: .84rem; }
  .su-city-row { display: flex; gap: 8px; }
  .su-city-row select { flex: 1; min-width: 0; }
  .su-locate { flex-shrink: 0; width: 48px; min-height: 48px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .su-locate llv-icon { width: 22px; height: 22px; }
  .su-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .su-chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--su-line); background: var(--su-card-2); color: var(--su-muted); font: 600 .9rem 'Inter', sans-serif; cursor: pointer; }
  .su-chip.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }
  .field .su-add-photos { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1px dashed var(--su-line); border-radius: 14px; color: var(--su-text); font-weight: 600; cursor: pointer; }
  .su-add-photos llv-icon { width: 22px; height: 22px; }
  .su-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .su-thumb { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--su-card-2); }
  body.su-app .su-step .auth-status { text-align: left; }
  body.su-app #socialSignupStatus:empty { min-height: 0; margin: 0; }

  /* Once the account exists (steps 2 and 3), none of step 1 shows — these have
     their own display rules above, so they're named here with the same weight, last */
  body.su-app.su-setup #socialAuthRow, body.su-app.su-setup #signupForm, body.su-app.su-setup #suUseEmail,
  body.su-app.su-setup #suVenueFind, body.su-app.su-setup #suFan, body.su-app.su-setup #suFounding { display: none !important; }
}