/* Sign-in pages. Every value comes from the design system tokens. */
.sign-in {
  max-width: 420px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sign-in-wordmark {
  width: 120px;
  height: auto;
  display: block;
}

.sign-in h1 {
  margin: var(--space-3) 0 0;
  text-wrap: balance;
}

.sign-in .lead {
  margin: 0;
  color: var(--pencil);
}

.sign-in-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.sign-in .quiet {
  margin: 0;
  color: var(--pencil);
  font-size: calc(13rem / 17);
  text-align: center;
}


.flash {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-field);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  color: var(--warn);
}

.field-error {
  color: var(--warn) !important;
}

.sign-in-resend {
  margin: 0;
}

/* "Send a new code · Use another email", on one line */
.sign-in-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  color: var(--pencil);
}

/* Labels stand out from the hints beside them */
.sign-in .af-field label {
  font-weight: 600;
  color: var(--ink);
}

.label-aside {
  font-weight: 400;
  color: var(--pencil);
}

.label-aside::before {
  content: "· ";
}

/* Back to the front page, under the form when someone came from "Start a story" */
.sign-in-back { align-self: center; margin-top: var(--space-2); }
.sign-in-home { display: inline-block; align-self: flex-start; }
.sign-in-get-app { align-self: center; margin: 0; }

/* The code being sent ("Sending your code…", Turbo marks the form busy) or
   checked ("Signing in…", code_entry_controller): the button turns */
.sign-in-form [aria-busy="true"], .sign-in-form[aria-busy="true"] [type="submit"] { cursor: progress; }
.sign-in-form [aria-busy="true"]:disabled, .sign-in-form[aria-busy="true"] [type="submit"]:disabled { opacity: .8; }
.af-spinner { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .af-spinner { animation: af-spin .8s linear infinite; }
  @keyframes af-spin { to { transform: rotate(360deg); } }
}

/* On the web, the code page rises in (the design system's screen entrance);
   in the app, the push is the entrance */
@media (prefers-reduced-motion: no-preference) {
  html:not(.native-navigation) .sign-in-code-page { animation: sign-in-enter .3s cubic-bezier(.16, 1, .3, 1); }
  @keyframes sign-in-enter { from { opacity: 0; transform: translateY(12px); } }
}