/* Identifier-first gate: one question per step, laid out with the tokens,
   type and components that styles.css already defines. Layout only. */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.25rem;
}

.auth-brand-mark {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}

.auth-brand .eyebrow {
  margin: 0;
}

.auth-card[data-flow-step]:not([data-flow-step="email"]) .lede {
  display: none;
}

.auth-flow,
.auth-step {
  grid-template-columns: minmax(0, 1fr);
}

.auth-step {
  display: grid;
  gap: 0.95rem;
}

.auth-step .consent {
  min-height: 44px;
}

.auth-step:not([hidden]) {
  animation: auth-enter 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.auth-switch-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.45rem;
  margin: 0;
  color: rgb(255 255 255 / 86%);
  font-size: 0.92rem;
}

.auth-link {
  min-height: 44px;
  padding: 0 0.15rem;
  border: 0;
  background: transparent;
  clip-path: none;
  color: var(--red);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.auth-link:hover:not(:disabled) {
  background: transparent;
  color: var(--red-high);
}

/* "Email me a sign-in link instead", under the password options. */
.auth-alt {
  margin: 0;
}

.auth-alt .auth-link {
  padding-left: 0;
  text-align: left;
}

.auth-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.1rem;
  padding: 0 0.6rem 0 0.95rem;
  background: rgb(0 0 0 / 42%);
  border: 1px solid rgb(255 255 255 / 16%);
}

.auth-identity-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-progress-text {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-progress-track {
  display: flex;
  gap: 0.3rem;
}

.auth-progress-track span {
  width: 1.6rem;
  height: 2px;
  background: var(--line);
}

.auth-progress-track span.is-on {
  background: var(--red);
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.auth-actions .auth-back {
  margin-right: auto;
}

.auth-actions .auth-cta {
  min-width: 10rem;
  padding-inline: 1.4rem;
}

.auth-card .auth-hint {
  margin: 0;
}

.auth-card .keep,
.auth-card .forgot {
  min-height: 44px;
}

.auth-card .forgot {
  display: inline-flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .auth-step:not([hidden]) { animation: none; }
}