/* screens/login.css — login screen styles (Stage 9 retrofit owner: this file).
 * Centered sign-in card on the layout background; all chrome comes from
 * the shared component vocabulary (.card, .field, .admin-input, .btn,
 * .admin-error) — this file only frames the card and tunes the head. */

/* Center the card in the remaining viewport (100vh minus the app shell
 * header/footer chrome rendered around the view). */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px); /* shell-aware floor — raw value */
  padding: var(--brand-size);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
  width: 100%;
  max-width: 380px; /* single-column card measure — raw value */
}

.login-form h1 {
  margin: 0;
  font-size: var(--brand-font-size-heading-3);
  color: var(--brand-color-text);
}

.login-form__hint {
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-text-secondary);
  margin: 0;
}

/* A little air between the identity fields and the hint above them. */
.login-form .field {
  margin-top: var(--brand-size-xxs);
}

.login-form__submit {
  margin-top: var(--brand-size-xs);
}