/* ==========================================================================
   Authentication screens
   ========================================================================== */

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

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  min-height: 100vh;
}

.auth-form-col {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) clamp(var(--space-6), 6vw, var(--space-16));
}
.auth-form-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.auth-form-col__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-10);
}
.auth-form-col__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.auth-form-col__foot a { color: var(--text-muted); }
.auth-form-col__foot a:hover { color: var(--text-brand); }

.auth-card { width: 100%; max-width: 420px; }
.auth-card--wide { max-width: 560px; }
.auth-card h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.auth-card__sub { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.auth-card form { display: grid; gap: var(--space-1); }
.auth-card .btn { margin-top: var(--space-3); }
.auth-card__alt {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 520px) { .auth-row { grid-template-columns: 1fr; } }

.auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.auth-meta a { font-size: var(--text-xs); }

/* Password strength */
.pw-meter { display: flex; gap: 4px; margin-top: var(--space-2); }
.pw-meter span {
  flex: 1;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--border);
  transition: background var(--duration) var(--ease-out);
}
.pw-meter[data-score="1"] span:nth-child(1) { background: var(--danger-500); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--warning-500); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: var(--info-500); }
.pw-meter[data-score="4"] span { background: var(--success-500); }

/* --- Proof column -------------------------------------------------------- */

.auth-proof-col {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-12);
  background: linear-gradient(160deg, var(--brand-900), var(--brand-700) 52%, var(--brand-800));
  color: #fff;
}
.auth-proof-col::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(42rem 42rem at 60% 40%, #000, transparent 76%);
}
.auth-proof-col__inner { position: relative; z-index: 1; max-width: 420px; }
.auth-proof-col h2 { color: #fff; font-size: var(--text-2xl); margin-block: var(--space-4) var(--space-4); }
.auth-proof-col p { color: rgba(255,255,255,0.78); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.auth-proof-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
}
.auth-proof-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.9);
}
.auth-proof-list svg { flex: none; color: var(--accent-400); margin-top: 1px; }

.auth-proof-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.auth-proof-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #fff;
}
.auth-proof-stats span { font-size: var(--text-xs); color: rgba(255,255,255,0.66); }

@media (max-width: 940px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-proof-col { display: none; }
  .auth-form-col__body { justify-content: flex-start; padding-top: var(--space-8); }
}