/* ==========================================================================
   Authentication screens — mobile-first, split panel from 900px up.
   ========================================================================== */

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

.auth-shell {
  min-height: 100dvh;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

/* --- Marketing panel (hidden on mobile) --------------------------------- */

.auth-aside { display: none; }

@media (min-width: 900px) {
  .auth-shell { grid-template-columns: minmax(360px, 44%) 1fr; }

  .auth-aside {
    display: block;
    position: relative;
    background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 62%,
                color-mix(in srgb, var(--secondary) 55%, var(--primary-dark)) 100%);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
  }

  /* Soft light bloom, no busy gradients. */
  .auth-aside::after {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    right: -180px; top: -140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
  }

  .auth-aside-inner {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column;
    padding: var(--s-10) var(--s-8);
  }
}

.auth-brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: inherit; font-weight: 700; font-size: var(--t-lg);
  letter-spacing: -.015em;
}
.auth-brand:hover { text-decoration: none; }
.auth-brand-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .18);
}
.auth-aside .auth-brand-name { color: #fff; }

.auth-aside-copy { margin-top: auto; padding-top: var(--s-10); }
.auth-aside-copy h2 {
  color: #fff; font-size: 2.1rem; line-height: 1.18;
  letter-spacing: -.025em; margin: 0 0 var(--s-3);
}
.auth-aside-copy p { color: rgba(255, 255, 255, .82); font-size: var(--t-md);
                     max-width: 34ch; margin: 0; }

.auth-points {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.auth-points li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  color: rgba(255, 255, 255, .9); font-size: var(--t-base);
}
.auth-points svg { margin-top: 3px; opacity: .85; flex: 0 0 auto; }

/* --- Form panel --------------------------------------------------------- */

.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--s-8) + var(--safe-top)) var(--s-5)
           calc(var(--s-8) + var(--safe-bottom));
  background: var(--background);
}
@media (min-width: 900px) { .auth-main { background: var(--surface); padding-inline: var(--s-10); } }

.auth-card-wrap { width: 100%; max-width: 400px; }

.auth-brand-mobile {
  color: var(--text-primary);
  margin-bottom: var(--s-8);
  justify-content: center;
  display: flex;
}
.auth-brand-mobile .auth-brand-mark { background: var(--primary-soft); color: var(--primary-ink); }
@media (min-width: 900px) { .auth-brand-mobile { display: none; } }

.auth-head { margin-bottom: var(--s-6); }
.auth-head h1 { font-size: var(--t-2xl); letter-spacing: -.022em; margin: 0 0 var(--s-2); }
.auth-head p  { color: var(--text-secondary); margin: 0; font-size: var(--t-base); }

.auth-form { margin: 0; }
.auth-form .btn-block { margin-top: var(--s-5); }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: calc(var(--s-2) * -1);
}
.auth-row .check { font-size: var(--t-sm); }
.auth-row a { font-size: var(--t-sm); font-weight: 600; }

.auth-alt {
  margin-top: var(--s-6);
  text-align: center;
  font-size: var(--t-base);
  color: var(--text-secondary);
}
.auth-alt a { font-weight: 650; }

.auth-legal {
  margin: var(--s-8) 0 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--text-tertiary);
}
.auth-legal a { color: var(--text-secondary); }
.auth-legal span { margin: 0 var(--s-2); }

/* --- Outcome screens: verify sent, verified, reset done ----------------- */

.auth-outcome { text-align: center; }
.auth-outcome-icon {
  display: grid; place-items: center;
  width: 66px; height: 66px; margin: 0 auto var(--s-5);
  border-radius: var(--r-xl);
  background: var(--primary-soft); color: var(--primary-ink);
}
.auth-outcome-icon svg { width: 30px; height: 30px; }
.auth-outcome-icon.is-success { background: var(--success-soft); color: var(--success-ink); }
.auth-outcome-icon.is-danger  { background: var(--danger-soft);  color: var(--danger-ink); }
.auth-outcome-icon.is-warning { background: var(--warning-soft); color: var(--warning-ink); }

.auth-outcome h1 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.auth-outcome p  { color: var(--text-secondary); margin-bottom: var(--s-5); }
.auth-outcome .email-pill {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: var(--surface-alt);
  font-weight: 600; font-size: var(--t-sm);
  color: var(--text-primary);
  margin-bottom: var(--s-5);
  word-break: break-all;
}
.auth-outcome .btn + .btn { margin-top: var(--s-2); }

/* Password strength bar — feedback, not a gate. */
.pw-meter { display: flex; gap: 4px; margin-top: var(--s-2); }
.pw-meter span {
  flex: 1 1 0; height: 4px; border-radius: var(--r-full);
  background: var(--surface-sunk); transition: background .25s var(--ease);
}
.pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--warning); }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: var(--info); }
.pw-meter[data-score="4"] span { background: var(--success); }
.pw-hint { margin-top: 6px; font-size: var(--t-xs); color: var(--text-secondary); }

/* --- Error / bare pages ------------------------------------------------- */

/* .bare-page and .bare-main moved to base.css — the bare shell is used by
   pages that never load this file. */

.error-screen { text-align: center; max-width: 400px; }
.error-code {
  font-size: 3.4rem; font-weight: 750; letter-spacing: -.04em;
  color: var(--text-tertiary); line-height: 1; margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.error-screen h1 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.error-screen p { color: var(--text-secondary); margin-bottom: var(--s-6); }
.error-detail {
  margin-top: var(--s-6); padding: var(--s-3);
  background: var(--surface-alt); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-secondary); text-align: left;
  word-break: break-word;
}