/* Forge | auth.css — Welcome, Login, Signup, Forgot, Verify */

.auth-shell {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: var(--s-6) var(--s-5) var(--s-8);
  max-width: 440px; margin: 0 auto;
  animation: auth-in var(--t-normal) var(--ease-in);
}
@keyframes auth-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.brand-mark {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--gradient-forge);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-text); font-weight: 800; font-size: 24px;
  box-shadow: 0 8px 24px rgba(62, 207, 142, 0.28);
}

.auth-hero {
  margin-bottom: var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.auth-title {
  font-size: 28px; font-weight: 700;
  color: var(--text-strong); letter-spacing: -0.02em;
  line-height: 1.15;
}
.auth-sub {
  color: var(--muted); font-size: var(--fs-body); line-height: 1.5;
}

.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }

.check-row {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
}
.check-row input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--primary);
  margin-top: 2px;
}

.auth-footer {
  margin-top: var(--s-6); text-align: center;
  font-size: var(--fs-sm); color: var(--muted);
}
.auth-footer a { color: var(--primary); font-weight: 600; }

.auth-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: var(--s-6);
}
.back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--surface-2);
  transition: color var(--t-fast) var(--ease-in), background var(--t-fast) var(--ease-in);
}
.back-btn:hover { color: var(--text); background: var(--surface-3); }

.field-error {
  color: var(--error); font-size: var(--fs-sm);
  margin-top: var(--s-1);
}

.info-box {
  padding: var(--s-4);
  background: var(--primary-soft);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--primary);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.password-eye {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); border-radius: var(--r-sm);
}
.password-eye:hover { color: var(--text); }

.strength {
  display: flex; gap: 4px; margin-top: 6px;
}
.strength span {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--surface-3);
  transition: background var(--t-fast) var(--ease-in);
}
.strength span.on-1 { background: var(--error); }
.strength span.on-2 { background: var(--warning); }
.strength span.on-3 { background: var(--primary); }
.strength span.on-4 { background: var(--primary); }

/* ================================================================
   Start screen (right after sign-up) — Stage 4 addition
   ================================================================ */
.brand-hero {
  width: 88px; height: 88px;
  border-radius: 22px;
  animation: brand-pop 620ms var(--ease-in) both;
}
@keyframes brand-pop {
  0%   { opacity: 0; transform: scale(0.8) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.start-list {
  margin-top: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.start-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  animation: row-in 460ms var(--ease-in) both;
}
.start-row:nth-child(2) { animation-delay: 60ms; }
.start-row:nth-child(3) { animation-delay: 120ms; }
@keyframes row-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.start-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.start-text { display: flex; flex-direction: column; gap: 2px; }
.start-title { font-weight: 600; color: var(--text-strong); font-size: var(--fs-body); }
.start-sub { color: var(--muted); font-size: var(--fs-sm); }

/* ================================================================
   Welcome hero (real logo) + Start hero — Stage 4 addition 2
   ================================================================ */
.welcome-hero {
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}
.welcome-hero .wordmark { margin-top: var(--s-2); }

.start-hero {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-6);
}

.gradient-text {
  background: var(--gradient-forge);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Warning box — used on the signup screen for the password warning. */
.info-warn {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.info-warn b { color: #F59E0B; }