/* ================================================================
   auth.css — Registration / Login page styles
   Extends the main design system; no external dependencies.
   ================================================================ */

/* ── Page layout ─────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg);
  /* Subtle radial gradient behind the card */
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139,92,246,.08) 0%, transparent 70%);
}

/* ── Auth card ───────────────────────────────────────────────── */
.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-8) var(--space-8);
  animation: auth-card-in 0.35s cubic-bezier(.16,1,.3,1) both;
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ── Header ──────────────────────────────────────────────────── */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.auth-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-1);
}

.auth-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-bottom: var(--space-6);
}

/* ── Google Sign-In ──────────────────────────────────────────── */
.google-signin-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* ── GitHub Sign-In ──────────────────────────────────────────── */
.btn-github-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 400px;
  margin: 0 auto var(--space-4);
  padding: 10px 16px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-github-signin:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
}

.btn-github-signin svg {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.auth-divider-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ── Form groups ─────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

.form-input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.form-input.input-error {
  border-color: var(--color-error, #ef4444);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.form-input.input-success {
  border-color: var(--color-success, #22c55e);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error, #ef4444);
  min-height: 1.2em;
}

.form-error[hidden] { display: none; }

/* ── Input with eye-toggle ───────────────────────────────────── */
.input-with-toggle {
  position: relative;
}

.input-with-toggle .form-input {
  padding-inline-end: 2.8rem;
}

.input-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.input-toggle-btn:hover { color: var(--color-text-secondary); }

/* ── Password strength meter ─────────────────────────────────── */
.password-strength {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  min-height: 1.4em;
}

.strength-track {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-label {
  font-size: var(--text-xs);
  font-weight: 500;
  min-width: 4rem;
  text-align: end;
  color: var(--color-text-muted);
  transition: color 0.3s;
}

/* strength severity colours */
.strength-fill.strength-weak     { background: #ef4444; }
.strength-fill.strength-fair     { background: #f97316; }
.strength-fill.strength-good     { background: #eab308; }
.strength-fill.strength-strong   { background: #22c55e; }

.strength-label.strength-weak    { color: #ef4444; }
.strength-label.strength-fair    { color: #f97316; }
.strength-label.strength-good    { color: #eab308; }
.strength-label.strength-strong  { color: #22c55e; }

/* ── Spinner on submit button ────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spin { animation: spin 0.8s linear infinite; }

/* ── Footer link ─────────────────────────────────────────────── */
.auth-footer-text {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
}

.auth-footer-text .link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.auth-footer-text .link:hover { text-decoration: underline; }

/* .alert lays its children out in a row, which put "Invalid email or password"
   and the way out of it side by side in two narrow columns. The error box is the
   one place that holds two separate sentences: stack them. */
.alert--stack {
  flex-direction: column;
  gap: var(--sp-2);
}

/* Same link, moved above the form: someone sent here by a "get an API key"
   button is signing up, not signing back in, and must not have to read past
   the password fields to find that out. */
.auth-footer-text--lead {
  margin-top: 0;
  margin-bottom: var(--space-5);
}

/* ── Legal consent text above submit ─────────────────────────── */
.auth-legal-text {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: 1.5;
}
.auth-legal-text .link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.auth-legal-text .link:hover { text-decoration: underline; }

/* ── Alert override inside card ─────────────────────────────── */
.auth-card .alert {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card {
    padding: var(--space-6) var(--space-5);
  }
  .auth-title { font-size: var(--text-xl); }
}

/* cache-bust 2026-06-16: force new content-hash after the redeploy unstyle window (issue #1) */