/* phantom:signup-a11y
   Signup layout only. Touch targets, focus and the auth scrollport while
   the signup panel is open. Does not change registration, invites or legal copy.
   /phantom:signup-a11y */

/* A tall signup card must start at the top of the scrollport. Auto margins
   on a flex child clip the top once the form is taller than the viewport. */
#auth-shell.auth-stage:has(#panel-signup:not(.hidden)) {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px;
}

#auth-shell:has(#panel-signup:not(.hidden)) .auth-layout {
  margin-block: 0;
  max-width: 100%;
}

#panel-signup {
  max-width: 100%;
}

#panel-signup :is(input, select, button, a),
#auth-shell .auth-tabs [data-auth-tab="signup"] {
  scroll-margin-block: 16px;
}

#panel-signup :is(input, select, button, a):focus-visible,
#auth-shell .auth-tabs [data-auth-tab="signup"]:focus-visible {
  outline: 3px solid var(--accent-bright, #b59bff);
  outline-offset: 2px;
}

/* Phone widths, including 390. Tablet and desktop keep the shared auth sizes. */
@media (max-width: 480px) {
  #auth-shell .auth-tabs [data-auth-tab="signup"] {
    min-width: 44px;
    min-height: 44px;
    height: auto;
  }

  #panel-signup input:not([type="checkbox"]),
  #panel-signup select {
    min-height: 44px;
    height: auto;
    max-width: 100%;
    font-size: 1rem;
  }

  /* button.primary locks height at 36px. The signup id wins. */
  #panel-signup #btn-signup {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }

  #panel-signup label.check {
    display: block;
    position: relative;
    min-height: 44px;
    margin: 8px 0;
    padding: 10px 0 10px 52px;
    line-height: 1.35;
  }

  #panel-signup label.check input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 8px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    accent-color: var(--accent, #8b5cf6);
  }

  #panel-signup label.check a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }

  #auth-shell:has(#panel-signup:not(.hidden)) .auth-legal-foot a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
  }
}

#panel-signup .signup-error-summary {
  margin: 12px 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--warning, #F59E0B);
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning, #F59E0B);
}

#panel-signup .signup-error-summary[hidden] {
  display: none !important;
}

#panel-signup .signup-error-summary-title {
  margin: 0 0 6px;
  font-weight: 600;
}

#panel-signup .signup-error-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

#panel-signup .signup-error-summary a {
  color: inherit;
  text-decoration: underline;
}

#panel-signup .signup-legal-retry {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0 4px;
}

#panel-signup .signup-legal-retry[hidden] {
  display: none !important;
}

#signup-account-creation-unavailable {
  margin: 8px 0 4px;
  color: var(--warning, #F59E0B);
}