@import "https://assets.elements.dev/assets/app/shared/styles/page.b9b382b613ec836c.css";

/* /signin is a thin page on top of <AuthPage> + <FormField>. The
   layout flows from those templates; this stylesheet only owns the
   page-local pieces (the inline error banner, the Forgot-password
   label-row link, the submit button spacing). The "New to Elements?"
   alt link is now the page subtitle handled by AuthPage. */

.signin-page .signin-subtitle {
  /* Sub-link rendered via <AuthPage> alt-top slot to sit immediately
     under the H1 in the same column. Spacing aligns with the auth-
     shell-head margin so the form starts at the canonical offset. */
  margin: 0;
}

/* Server-side error message rendered immediately above the Sign in
   button (the same place inline FormField errors appear), so the
   user's eye lands on it without scrolling back up. Red foreground
   on a light-red banner — same color tokens as FormField errors. */
.signin-error {
  font-family: var(--font-sans);
  font-size: 0.78125rem;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  margin: 0 0 0.75rem 0;
}

.signin-forgot {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--ink-soft);
  /* The dotted underline is drawn with border-bottom; kill the anchor's
     default text-decoration underline so the two don't stack into a
     double line. */
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint);
  padding-bottom: 1px;
}
.signin-forgot:hover { color: var(--accent); border-color: var(--accent); }

.signin-submit {
  margin-top: 0.75rem;
  width: 100%;
}

/* In-flight state: keep the button visually "pressed" and stop pointer
   interaction while the sign-in rpc runs, so a slow round-trip reads as
   working rather than stuck. */
.signin-submit.is-submitting {
  opacity: 0.85;
  cursor: progress;
}

.signin-submit[disabled] {
  cursor: progress;
}

/* Spinner shown next to "Signing in…". Uses currentColor so it matches
   the button text in every theme. */
.signin-spinner {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: signin-spin 0.6s linear infinite;
}

@keyframes signin-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .signin-spinner { animation-duration: 1.4s; }
}