/* OWNER: B1. Sign-in, starter, reset, verify and two-step pages. Builds on base.css tokens and never redefines them.
   Phone first: one column, 16px gutters from .wrap, 44px touch targets from --tap. */

.auth-card { max-width: 520px; margin-left: auto; margin-right: auto; }

/* base.css gives "button.btn" a surface background, which outranks ".btn-primary" and ".btn-danger" on <button>.
   Restate the colors for buttons on B1 pages (the root fix belongs in base.css). */
.auth-card button.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.auth-card button.btn-danger { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.auth-card h1 { font-size: 1.45rem; }
.auth-card .lead { font-size: var(--text-lg); }
.auth-form { margin-top: var(--space-4); }
.auth-form .btn-wide { width: 100%; justify-content: center; margin-top: var(--space-2); }
.auth-links { margin-top: var(--space-4); margin-bottom: 0; }
.auth-links a { display: inline-flex; min-height: var(--tap); align-items: center; }

.auth-group { border-top: 1px solid var(--line); padding-top: var(--space-4); margin-top: var(--space-4); }
.auth-group:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.auth-group > legend { font-size: var(--text-lg); margin-bottom: var(--space-3); padding: 0; }

.password-row { display: flex; gap: var(--space-2); align-items: stretch; }
.password-row input { flex: 1 1 auto; min-width: 0; }
.btn-toggle { flex: none; min-width: 72px; justify-content: center; }

.error-summary p { margin-bottom: var(--space-2); }
.error-summary ul { margin: 0; padding-left: var(--space-5); font-weight: 600; }
input[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }

.code-input { font-family: var(--mono); font-size: 1.4rem; letter-spacing: 0.25em; max-width: 12rem; }

.steps { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.steps > li { margin-bottom: var(--space-3); }
.secret-key {
  font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.06em; word-spacing: 0.3em;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: var(--space-3); margin: var(--space-2) 0; overflow-wrap: anywhere; user-select: all;
}

@media (min-width: 640px) {
  .auth-card { margin-top: var(--space-5); }
}