/* Shared auth modal — used by /js/auth.js on both dashboard + landing.
   Keep class names in sync with auth.js's ensureModal() innerHTML. */

.auth-modal {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center; z-index: 2000;
}
.auth-modal.auth-modal-open { display: flex; }

.auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 12, 0.78);
  backdrop-filter: blur(2px);
}

.auth-modal-card {
  position: relative;
  background: #16161c;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 28px 28px 24px;
  width: min(380px, calc(100vw - 32px));
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.auth-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; color: var(--text-muted);
  font-size: 24px; line-height: 1; cursor: pointer;
}

.auth-modal-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.auth-modal-sub   { margin: 0 0 18px; font-size: 13px; color: var(--text-secondary); }

.auth-google-btn {
  width: 100%; padding: 10px 14px;
  background: #fff; color: #1f1f1f;
  border: none; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.auth-google-btn:hover { filter: brightness(0.96); }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0; color: var(--text-muted); font-size: 11px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(255,255,255,0.10);
}

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-form input {
  background: #0c0c10;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.auth-form input:focus { outline: 1px solid var(--accent-amber); }
.auth-form button {
  padding: 10px 14px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.auth-form button[data-action="signin"] { background: var(--accent-amber); color: #0c0c10; }
.auth-form button[data-action="signup"] { background: transparent; color: var(--text-primary); border: 1px solid rgba(255,255,255,0.18); }

.auth-error {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent-red, #ef4444);
  font-family: var(--font-mono);
}

/* Forgot password — quiet text-button style, sits below the form. */
.auth-forgot {
  margin-top: 10px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.18);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
.auth-forgot:hover {
  color: var(--accent-amber);
  text-decoration-color: var(--accent-amber);
}

/* Info message (e.g., reset email sent / email verification notice). */
.auth-info {
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent-amber);
  font-family: var(--font-mono);
  line-height: 1.5;
  background: rgba(232,168,23,0.08);
  border: 1px solid rgba(232,168,23,0.25);
  padding: 8px 10px;
  border-radius: 6px;
}

/* WCAG touch targets: form controls reach 44px regardless of padding */
.auth-form input,
.auth-form button,
.auth-google-btn,
.auth-forgot {
  min-height: 44px;
}