/* ============================================================================
   Authentication Pages Styles
   Login, logout, and authentication-related pages
   ============================================================================ */

/* Login Form Container */
.login-container {
  max-width: 500px;
  margin: 4rem auto;
}

.login-article {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  background: var(--pico-card-background-color);
}

/* Login Header */
.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h1 {
  margin-bottom: 0.5rem;
}

.login-header p {
  /* --pico-color (not --pico-muted-color) is required so the prompt
     keeps WCAG 1.4.3 4.5:1 contrast against the card background; the
     muted token only reaches ~4.39:1 in pico-jade dark mode. */
  color: var(--pico-color);
  margin: 0;
}

/* Error Alert
   Pico's --pico-del-color is a dark red in light mode (white text passes
   AA easily) but a pale/medium red in dark mode (white text drops well
   below AA 4.5:1). Borrow the project's invalid-input red — designed to
   meet contrast against both schemes — and pair with --pico-contrast for
   the readable text token. */
.login-error {
  padding: 1rem;
  margin-bottom: 1.5rem;
  background-color: var(--pico-form-element-invalid-border-color, var(--pico-del-color));
  color: var(--pico-contrast, var(--pico-color));
  border-radius: var(--pico-border-radius);
}

/* Form Fields */
.login-field {
  margin-bottom: 1.5rem;
}

.login-field label {
  display: block;
}

.login-field input:focus {
  border-color: var(--pico-primary);
}

/* Submit Button */
.login-submit {
  width: 100%;
  font-weight: bold;
  margin-top: 0.5rem;
}

.login-submit:hover {
  opacity: 0.9;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--pico-muted-color);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--pico-muted-border-color);
}

.auth-secondary-action {
  width: 100%;
  margin-top: 0;
  text-align: center;
}

.field-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--pico-del-color);
}

/* Login Footer */
.login-footer {
  text-align: center;
  margin-top: 2rem;
  display: grid;
  gap: 0.5rem;
}

.login-footer small a {
  color: var(--pico-primary);
  text-decoration: none;
}

.login-footer small a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .login-container {
    margin: 2rem auto;
    padding: 0 1rem;
  }

  .login-article {
    padding: 1.5rem;
  }
}

@media (max-width: 576px) {
  .login-container {
    margin: 1rem auto;
  }

  .login-container .grid {
    grid-template-columns: 1fr;
  }

  .login-article {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}