/* Sign-in forms: link-or-code choice, and the code page. Colours come from
   the theme's tokens where it has them. */

.magic-login-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
}

.magic-login-methods .button,
.magic-login-methods input[type="submit"] {
  margin: 0;
}

.magic-login-methods__help {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
  color: var(--ds-ink-muted, #6B5647);
  font-size: 0.875rem;
  line-height: 1.5;
}

.magic-login-code-form__lead {
  font-size: 1.05rem;
}

.magic-login-code-form__hint {
  color: var(--ds-ink-muted, #6B5647);
  font-size: 0.9rem;
}

/* Secondary choices ("Email me a 6-digit code", "Send a new code"...): the
   theme's ghost buttons match the card behind them until hovered, so they
   read as plain text; a visible outline makes them look clickable. */
.debtsunset-layout :is(.magic-login-methods__code, .magic-login-code-form__other input[type="submit"]) {
  --btn-border: color-mix(in srgb, var(--ds-btn-ghost-ink, #0A1A33) 28%, transparent);
  --btn-border-hover: var(--ds-btn-ghost-border-hover, #0A1A33);
}

/* The code: big, spaced digits, easy to read back against the email. (The
   doubled class outranks the theme's input rule, which loads later.) */
.debtsunset-layout input.magic-login-code-form__code.magic-login-code-form__code {
  width: 100%;
  max-width: 14rem;
  padding: 0.6rem 0.8rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  text-align: center;
}

.debtsunset-layout input.magic-login-code-form__code.magic-login-code-form__code::placeholder {
  letter-spacing: 0.25em;
  opacity: 0.35;
}

.magic-login-code-form__other {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  font-size: 0.9rem;
}

.magic-login-code-form__other p {
  margin: 0 0 0.6rem;
  color: var(--ds-ink-muted, #6B5647);
}

.magic-login-code-form__other input[type="submit"] {
  margin: 0 0.4rem 0.5rem 0;
}

.magic-login-code-form__change {
  display: inline-block;
  margin-top: 0.4rem;
}