/* =========================================================
   Auth pages (login / register) — built on the shared tokens
   in style.css (--ink, --paper, --accent, --font-display etc.)
   ========================================================= */

body.login-page,
body.register-page {
  min-height: 100vh;
}

#auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ===== Brand panel ===== */
#auth-brand-panel {
  background: var(--ink);
  color: var(--ink-text);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#auth-brand-panel #auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink-text);
}
#auth-brand-content { max-width: 420px; }
#auth-brand-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: 16px;
}
#auth-brand-subhead {
  color: var(--ink-text-muted);
  font-size: 1rem;
  margin-bottom: 32px;
}
#auth-trust-list { display: flex; flex-direction: column; gap: 12px; }
.auth-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-text);
}
#auth-brand-footer {
  font-size: 0.8rem;
  color: var(--ink-text-muted);
}

/* ===== Form panel ===== */
#auth-form-panel {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
#auth-form-card {
  width: 100%;
  max-width: 400px;
}
#auth-mobile-logo {
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--paper-text);
  margin-bottom: 32px;
}
#auth-form-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  margin-bottom: 8px;
}
#auth-form-subtitle {
  color: var(--paper-text-muted);
  font-size: 0.95rem;
  margin-bottom: 28px;
}

/* ===== Google button ===== */
.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-on-paper);
  border-radius: var(--radius-sm);
  color: #1F1F1F;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.google-btn:hover { background: #F7F7F7; }
.google-btn:active { background: #F0F0F0; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--paper-text-muted);
  font-size: 0.82rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-on-paper);
}

/* ===== Form ===== */
#login-form, #register-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field-hint {
  font-size: 0.78rem;
  color: var(--paper-text-muted);
}

.password-input-wrap { position: relative; }
.password-input-wrap input { width: 100%; padding-right: 44px; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--paper-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.password-toggle:hover { background: var(--paper-raised); color: var(--paper-text); }
.password-toggle .icon-eye { width: 19px; height: 19px; }

#login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
#login-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper-text-muted);
}
#login-forgot-password {
  color: var(--accent);
  font-weight: 600;
}
#login-forgot-password:hover { text-decoration: underline; }

#register-terms-row { font-size: 0.85rem; }
#register-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--paper-text-muted);
  line-height: 1.5;
}
#register-terms-label input { margin-top: 3px; flex-shrink: 0; }
#register-terms-label a { color: var(--accent); font-weight: 600; }
#register-terms-label a:hover { text-decoration: underline; }

#login-form .btn-primary,
#register-form .btn-primary {
  width: 100%;
  padding: 13px;
}

#login-error, #register-error {
  font-size: 0.85rem;
  color: #C4372B;
  min-height: 1.2em;
}
#login-error:empty, #register-error:empty { display: none; }

#auth-switch {
  text-align: center;
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--paper-text-muted);
}
#auth-switch a { color: var(--accent); font-weight: 600; }
#auth-switch a:hover { text-decoration: underline; }

/* ===== Responsive: brand panel drops below ~900px ===== */
@media (max-width: 900px) {
  #auth-layout { grid-template-columns: 1fr; }
  #auth-brand-panel { display: none; }
  #auth-mobile-logo { display: flex; }
  #auth-form-panel { padding: 32px 20px; min-height: 100vh; }
}