.auth-page {
  min-height: 100vh;
  background: var(--foinse-color-paper);
}
.auth-main { min-height: calc(100vh - 190px); }
/* Item 1: one centered card on an empty page. The split layout, the
 * marketing intro, and the trust badges are gone; the page is the card.
 * Item 25: one type scale, one spacing scale — every size here reads a
 * tokens.css role. */
.auth-shell {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 74px);
  padding-block: var(--foinse-space-16);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  gap: 0;
  align-items: center;
}
.auth-card.account-state {
  width: 100%;
  max-width: 420px;
  padding: var(--foinse-space-8);
  background: var(--foinse-surface-card);
  border: var(--foinse-border);
  border-radius: var(--foinse-radius-card);
  box-shadow: var(--foinse-shadow-card);
}
.auth-card .account-form { gap: var(--foinse-space-5); }
.auth-card .account-form h1 {
  font-size: var(--foinse-font-size-title);
  line-height: var(--foinse-font-line-title);
  letter-spacing: -.02em;
}

/* Item 6: signup shares the login shell. The step is a card label, not a
 * progress rail; the rail and the split intro are gone from both pages. */
.auth-card .account-form h2 {
  font-size: var(--foinse-font-size-heading-2);
  line-height: var(--foinse-font-line-heading-2);
  letter-spacing: -.02em;
}
.auth-card-label {
  color: var(--foinse-color-accent);
  font-size: var(--foinse-font-size-label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.auth-card .foinse-label {
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  font-weight: 650;
}
.auth-card .foinse-input {
  min-height: var(--foinse-input-height);
  background: var(--foinse-surface-recessed);
  border: var(--foinse-border);
  border-radius: var(--foinse-radius-control);
}
.auth-card .foinse-input:hover { border-color: var(--foinse-color-ink-500); }
.auth-card .foinse-input:focus { border-color: var(--foinse-color-accent); }
.auth-card .foinse-btn {
  width: 100%;
  min-height: var(--foinse-input-height);
  margin-top: var(--foinse-space-1);
}
/* Item 5: OAuth doors. One button above the password form, one separator,
 * both on the card's own token scale. */
.auth-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--foinse-space-2);
  width: 100%;
  min-height: var(--foinse-input-height);
  padding: 0 var(--foinse-space-4);
  border: var(--foinse-border);
  border-radius: var(--foinse-radius-control);
  background: var(--foinse-surface-card);
  color: var(--foinse-text-primary);
  font-family: var(--foinse-font-family-ui);
  font-size: var(--foinse-font-size-body);
  font-weight: var(--foinse-font-weight-medium);
  line-height: var(--foinse-font-line-body);
  text-decoration: none;
}

.auth-oauth:hover { background: var(--foinse-surface-recessed); }

.auth-oauth:focus-visible {
  outline: var(--foinse-focus-ring);
  outline-offset: var(--foinse-focus-offset);
}

.auth-oauth svg { flex: 0 0 auto; }

.auth-oauth__sep {
  display: flex;
  align-items: center;
  gap: var(--foinse-space-3);
  margin: var(--foinse-space-4) 0 0;
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
}

.auth-oauth__sep::before,
.auth-oauth__sep::after {
  content: "";
  flex: 1 1 auto;
  height: var(--foinse-border-width);
  background: var(--foinse-surface-rule);
}

.auth-oauth__sep span { flex: 0 0 auto; }

/* Item 2: remember me on this device. The checkbox maps to the existing
 * sessionStorage/localStorage split in account.js; this is the control only. */
.auth-remember {
  display: flex;
  align-items: center;
  gap: var(--foinse-space-2);
  margin: calc(var(--foinse-space-1) * -1) 0 0;
  color: var(--foinse-color-ink-700);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
  cursor: pointer;
}
.auth-remember input {
  width: var(--foinse-icon-size-inline);
  height: var(--foinse-icon-size-inline);
  margin: 0;
  accent-color: var(--foinse-color-accent);
}
/* Item 3: forgot your password. One link on the password line, wired to
 * the existing verify.html reset path in account.js. */
/* Item 4: 2FA step after password. Six boxed digit inputs, one Continue,
 * one "sign in another way" link. Hidden until the password step passes. */
.auth-2fa {
  margin: var(--foinse-space-4) 0 0;
  padding: 0;
  border: 0;
}

.auth-2fa__digits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--foinse-space-2);
  margin: var(--foinse-space-2) 0 var(--foinse-space-4);
}

.auth-2fa__digit {
  width: 100%;
  min-height: var(--foinse-input-height);
  padding: 0;
  border: var(--foinse-border);
  border-radius: var(--foinse-radius-control);
  background: var(--foinse-surface-recessed);
  color: var(--foinse-text-primary);
  font-family: var(--foinse-font-family-mono);
  font-size: var(--foinse-font-size-title);
  line-height: var(--foinse-font-line-title);
  text-align: center;
}

.auth-2fa__digit:focus-visible {
  border-color: var(--foinse-color-accent);
  outline: var(--foinse-focus-ring);
  outline-offset: var(--foinse-focus-offset);
}

.auth-2fa .foinse-btn { width: 100%; }

.auth-2fa__alt {
  margin: var(--foinse-space-3) 0 0;
  text-align: center;
}

.auth-2fa__alt a {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
  text-decoration: none;
}

.auth-2fa__alt a:hover {
  color: var(--foinse-color-ink-700);
  text-decoration: underline;
}

.auth-2fa__alt a:focus-visible {
  outline: var(--foinse-focus-ring);
  outline-offset: var(--foinse-focus-offset);
  border-radius: var(--foinse-radius-control);
}

.auth-forgot {
  margin: calc(var(--foinse-space-1) * -1) 0 0;
  text-align: right;
}
.auth-forgot a {
  color: var(--foinse-color-ink-500);
  font-size: var(--foinse-font-size-label);
  line-height: var(--foinse-font-line-label);
  text-decoration: none;
}
.auth-forgot a:hover { color: var(--foinse-color-ink-700); text-decoration: underline; }
.auth-forgot a:focus-visible {
  outline: var(--foinse-focus-ring);
  outline-offset: var(--foinse-focus-offset);
  border-radius: var(--foinse-radius-control);
}
.auth-remember span { user-select: none; }
.auth-card form > p:last-child { margin: 2px 0 0; color: var(--foinse-color-ink-500); font-size: 14px; text-align: center; }
.auth-card small { display: block; margin-top: 7px; color: var(--foinse-color-ink-500); line-height: 1.45; }
.auth-progress { display: grid; gap: 0; max-width: 480px; margin: 42px 0 0; padding: 0; list-style: none; }
.auth-progress li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; min-height: 50px; color: var(--foinse-color-ink-500); }
.auth-progress li:not(:last-child)::after { position: absolute; top: 36px; bottom: -4px; left: 16px; width: 1px; content: ""; background: var(--foinse-color-rule-200); }
.auth-progress span { display: grid; place-items: center; width: 34px; height: 34px; font: 12px var(--foinse-font-family-mono); border: 1px solid var(--foinse-color-rule-200); border-radius: 50%; }
.auth-progress .is-current { color: var(--foinse-color-ink-900); }
.auth-progress .is-current span { color: var(--foinse-color-paper); background: var(--foinse-color-reserve); border-color: var(--foinse-color-reserve); }
.auth-card--verification { min-height: 350px; }
.auth-card--verification #verify-pending, .auth-card--verification #verify-success { display: grid; gap: 18px; }
.auth-card--verification #verify-pending[hidden], .auth-card--verification #verify-success[hidden] { display: none; }
.auth-spinner { width: 42px; height: 42px; border: 3px solid var(--foinse-color-rule-200); border-top-color: var(--foinse-color-reserve); border-radius: 50%; animation: auth-spin .9s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-page:not(.auth-page--explainer) > footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.auth-page:not(.auth-page--explainer) > footer .foot-brand, .auth-page:not(.auth-page--explainer) > footer .copyright { margin: 0; }
.auth-explainer-hero { padding-block: clamp(70px,9vw,120px); background: var(--foinse-color-surface-1); }
.auth-explainer-hero h1 { max-width: 800px; letter-spacing: -.055em; }
.auth-page--explainer .foinse-section > .wrap { max-width: 900px; }
.auth-page--explainer .foinse-section h2 { margin: 72px 0 16px; padding-top: 8px; font-size: clamp(28px,3vw,38px); letter-spacing: -.035em; }
.auth-page--explainer .foinse-section h2:first-child { margin-top: 0; }
.auth-page--explainer .foinse-section p, .auth-page--explainer .foinse-section li { color: var(--foinse-color-ink-700); font-size: 17px; line-height: 1.75; }
.auth-page--explainer .foinse-section ul { display: grid; gap: 10px; padding: 22px 26px 22px 44px; background: var(--foinse-color-surface-1); border: 1px solid var(--foinse-color-rule-200); border-radius: 12px; }
@media (max-width:900px) { .auth-layout { grid-template-columns:1fr; } .auth-progress { grid-template-columns:repeat(3,1fr); max-width:none; gap:12px; } .auth-progress li:not(:last-child)::after { display:none; } }
@media (max-width:640px) { .auth-shell { min-height:0; padding-block:50px 72px; } .auth-layout { gap:40px; } .auth-intro h1 { font-size:46px; } .auth-progress { grid-template-columns:1fr; } .auth-progress li:not(:last-child)::after { display:block; } .auth-card.account-state { padding:26px 20px; border-radius:14px; } .auth-page:not(.auth-page--explainer) > footer .wrap { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .auth-spinner { animation:none; } }