/* ── Auth surface (Login / Register / RegisterInvite / ForgotPassword / ResetPassword) ──
   The five auth views used to carry byte-identical copies of these rules in
   their scoped blocks (2026-08 shape audit). Loaded per view with
   <style src="@/assets/auth-shared.css" />, like editor-shared.css; the form
   rules are scoped under .auth-card so nothing leaks into the app's other
   .field/.input usages. Per-view one-offs (Login's .divider/.forgot-link)
   stay in the view. */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--fs-surface-raised);
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-lg);
  padding: 2rem;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.auth-card h1 {
  margin: 0;
  text-align: center;
}
.auth-hint {
  text-align: center;
  font-size: 0.9rem;
  color: var(--fs-text-secondary);
  margin-bottom: 1rem;
}
.auth-hint a {
  color: var(--fs-accent);
}
/* A centred status paragraph block: registration closed, invalid/expired
   token, "check your inbox". One rule — the views used to name it
   .closed-msg / .error-block / .success-msg with identical bodies. */
.auth-note {
  text-align: center;
  color: var(--fs-text-secondary);
  font-size: 0.95rem;
  padding: 0.5rem 0;
}
.auth-note p {
  margin: 0.5rem 0;
}
.auth-loading {
  text-align: center;
  color: var(--fs-text-tertiary);
  font-size: 0.95rem;
  padding: 1rem 0;
}
.auth-card .field {
  margin-bottom: 1rem;
}
.auth-card .field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.auth-card .input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fs-border-color);
  border-radius: var(--fs-radius-sm);
  font-size: 0.95rem;
  background: var(--fs-surface-page);
  color: var(--fs-text-primary);
  box-sizing: border-box;
}
.auth-card .input:focus {
  outline: none;
  border-color: var(--fs-accent);
}
.auth-card .input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-card .input-error,
.auth-card .input-error:focus {
  border-color: var(--fs-error);
}
.auth-card .field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--fs-text-tertiary);
}
.auth-card .error-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--fs-error);
}
.auth-card .error-msg {
  color: var(--fs-error);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.auth-footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--fs-text-secondary);
  margin: 1rem 0 0;
}
.auth-footer a {
  color: var(--fs-accent);
}