/* =========================================================
   Auth pages — login.html / signup.html
   Split layout: brand panel with floating blobs + form panel.
   Also reused (auth-card, chips, etc.) by onboarding/profile.
   ========================================================= */

.auth-body { background: var(--bg-canvas); }

.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 73px);
}

.auth-shell__brand {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand-deep);
  display: flex; align-items: center;
  padding: var(--sp-16);
}
.auth-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.35; }
.auth-blob--1 { width: 340px; height: 340px; background: var(--brand-accent-400); top: -80px; right: -80px; animation: floatSlow 10s ease-in-out infinite; }
.auth-blob--2 { width: 260px; height: 260px; background: var(--brand-primary-400); bottom: -60px; left: -60px; animation: floatSlow 8s ease-in-out infinite reverse; }

.auth-shell__brand-content { position: relative; z-index: 1; color: #fff; max-width: 440px; }
.auth-shell__brand-content .eyebrow { background: rgba(255,255,255,0.12); color: #fff; }
.auth-shell__brand-content .eyebrow::before { background: var(--brand-accent); box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
.auth-shell__brand-content h2 { font-size: var(--fs-2xl); line-height: 1.15; margin: var(--sp-5) 0; }
.auth-shell__brand-content p { color: rgba(255,255,255,0.78); line-height: 1.7; margin-bottom: var(--sp-8); }
.auth-shell__points { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-shell__points li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; font-size: var(--fs-sm); }
.auth-shell__points svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--brand-accent); background: rgba(16,185,129,0.15); border-radius: 50%; padding: 3px; }

.auth-shell__form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-10) var(--sp-6);
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-shell__brand { display: none; }
  /* The two-column layout used centered content to balance against the
     brand panel's imagery. With that panel hidden below 900px there's
     nothing to balance against, and centering inside a forced-tall
     container is what could push the first field below the fold on a
     short tablet viewport — so the form now just starts near the top. */
  .auth-shell__form-panel { align-items: flex-start; padding-top: var(--sp-8); }
}

.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.auth-card__sub { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.auth-card__sub a { color: var(--accent-text); font-weight: 700; }


.auth-card form .field { margin-bottom: var(--sp-4); }
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-2) 0 var(--sp-5); flex-wrap: wrap; gap: var(--sp-2); }

.password-field { position: relative; }
.password-field .input { padding-right: 42px; }
.password-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--radius-sm); color: var(--text-tertiary);
}
.password-toggle::before {
  content: ''; display: block; width: 100%; height: 100%;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>') center/18px no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>') center/18px no-repeat;
}
.password-toggle.is-visible { color: var(--accent-text); }

.password-strength-meter { margin-top: 8px; }
.password-strength { display: flex; gap: 5px; }
.password-strength span { flex: 1; height: 3px; border-radius: var(--radius-full); background: var(--bg-subtle); transition: background var(--dur-fast) var(--ease-out); }
.password-strength span.weak { background: var(--color-danger); }
.password-strength span.fair { background: var(--color-warning); }
.password-strength span.strong { background: var(--brand-accent); }

/* Text equivalent for the strength bars above — same states, always visible. */
.password-strength__label { font-size: var(--fs-2xs); color: var(--text-tertiary); margin: 6px 0 0; min-height: 1em; font-weight: 600; }
.password-strength__label[data-state="weak"] { color: var(--color-danger); }
.password-strength__label[data-state="fair"] { color: var(--color-warning); }
.password-strength__label[data-state="strong"] { color: var(--tint-accent-text); }

/* Live checklist — mirrors the same per-tier checks passwordStrength() scores. */
.password-requirements { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.password-requirements li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); }
.password-requirements__icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--border-strong); }
.password-requirements__icon .check { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.password-requirements li.is-met { color: var(--tint-accent-text); font-weight: 600; }
.password-requirements li.is-met .password-requirements__icon { color: var(--tint-accent-text); }
.password-requirements li.is-met .password-requirements__icon .check { opacity: 1; }

.auth-forgot h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.auth-forgot p { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.auth-forgot .field { margin-bottom: var(--sp-5); }

/* ---- Chips (interests / work type / countries) — shared with onboarding + profile ---- */
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: 9px 16px; border-radius: var(--radius-full);
  background: var(--bg-subtle); border: 1.5px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--bg-hover); }
.chip.is-selected { background: var(--brand-primary-100); border-color: var(--accent-text); color: var(--accent-text); box-shadow: 0 4px 12px -4px rgba(30, 64, 175, 0.3); }

.btn-lg { padding: 14px 28px; font-size: var(--fs-base); }