/* auth.css - owned by P5b: AuthLayout (sign-in steps), login / logout confirmation, password change card.
   Linked from App.razor after public.css; P5a's security.css builds on .auth-card / .auth-form. */

/* ========== Auth shell (Layout/AuthLayout.razor) ========== */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.auth-header {
  display: flex;
  align-items: center;
  min-height: var(--kk-header-h);
  padding: 0 1rem;
  max-width: var(--kk-max);
  width: 100%;
  margin: 0 auto;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--kk-touch);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: var(--kk-ink);
  text-decoration: none;
}
.auth-brand-mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb4a8, var(--kk-accent));
}
.auth-main {
  flex: 1;
  width: 100%;
  padding: 0 1rem 2rem;
}

/* ========== Login / logout card ========== */
.login-page {
  min-height: calc(100vh - var(--kk-header-h) - 4rem);
  min-height: calc(100dvh - var(--kk-header-h) - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 2rem;
}
.login-card,
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--kk-surface);
  border: 1px solid var(--kk-line);
  border-radius: calc(var(--kk-radius) + 4px);
  padding: 2rem 1.75rem;
  box-shadow: var(--kk-shadow-hover);
}
@media (max-width: 400px) {
  .login-card,
  .auth-card {
    padding: 1.5rem 1.15rem;
    border-radius: var(--kk-radius);
  }
}
.login-card h1,
.auth-card h1 {
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
}
.login-card .sub,
.auth-card .sub {
  font-size: 0.9rem;
  color: var(--kk-text-secondary);
  margin-bottom: 1.5rem;
}
.auth-card .alert {
  font-size: 0.9rem;
}
.auth-card .auth-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--kk-text-secondary);
  margin: -0.75rem 0 1.25rem;
}
.auth-form .form-control {
  font-size: 1rem; /* >= 16px: no iOS zoom on focus */
}
.auth-form .form-check {
  margin-bottom: 0.25rem !important;
}
.auth-form .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
}
.auth-hint {
  font-size: 0.8rem;
  color: var(--kk-text-secondary);
  margin: 0 0 1.25rem;
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.auth-actions .btn {
  flex: 1 1 8rem;
}

/* ========== Password change (Account/ChangePassword.razor, inside AdminLayout) ========== */
.auth-form-card {
  max-width: 480px;
}
.auth-form-card .form-control {
  font-size: 1rem;
}
.auth-form-card .validation-message {
  color: var(--kk-danger-text);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}