/* Account flows (sign in, create account, reset, confirm) and the error page.
   Each is a station: a black sign plate carries the page name, a short line under it shows where this step sits
   on the way in (the terminus is the Overview), and the form is set big and plain on the enamel panel. */

.auth-page { min-height: 0; display: grid; place-items: start center; padding: clamp(8px, 4vh, 40px) 0 8px; }
.auth-card { width: 100%; max-width: 480px; }
.auth-card .panel { border-top: 0; padding: 0; }

/* The station sign: the page's name in white on the black band with its thin white rule. */
.auth-sign { margin: 0 0 4px; padding: 22px 22px 16px; border-radius: var(--radius-m); }
.auth-sign h1 {
  margin: 0; color: var(--on-sign); font-size: clamp(1.875rem, 6vw, 2.5rem); font-weight: 750;
  letter-spacing: -0.025em; line-height: 1.05; text-transform: none; font-stretch: 100%;
}

/* The line in: stops for each step, the current one named in bold, the Overview as terminus. */
.auth-line { margin: 18px 0 22px; padding: 0 4px; }
.auth-line > .stop { font-size: .75rem; font-weight: 600; color: var(--ink-3); line-height: 1.25; padding-right: 8px; }
.auth-line > .stop.is-here { color: var(--ink); font-weight: 800; }
.auth-line > .stop.is-here::before { background: var(--line-2); }
.auth-line > .stop.terminus { flex: 0 0 auto; padding-right: 0; }
.auth-line > .stop:last-child::after { display: none; }

.auth-card .lede { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; margin-bottom: 24px; }
.auth-card .field { margin-bottom: 20px; gap: 7px; }
.auth-card .field label { font-size: 1rem; font-weight: 750; }
.auth-card .field input { min-height: 50px; font-size: 1.0625rem; padding: 10px 12px; }
.auth-card .field .hint { font-size: .875rem; }
.auth-card .field-row { align-items: center; }
.auth-card .field-aside { font-size: .875rem; font-weight: 600; }
.auth-card .btn.primary { width: 100%; min-height: 52px; font-size: 1.0625rem; border-radius: var(--radius-m); }
.auth-card form + .alt, .auth-card .alt { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); text-align: left; }
.auth-card .notice, .auth-card .error-box { line-height: 1.5; border-radius: var(--radius-s); }
.auth-card .notice { background: var(--paper-2); }
.auth-card > .panel > .btn, .auth-card > .panel > form > .btn { margin-top: 4px; }

@media (max-width: 560px) {
  .auth-page { padding: 0; }
  .auth-sign { padding: 18px 16px 12px; }
  .auth-line { margin: 16px 0 18px; }
}

/* ---------- Error: a service-suspended plate ---------- */
.error-page { max-width: 640px; margin: 8px 0 0; }
.error-plate { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 22px 22px 16px; border-radius: var(--radius-m); }
.error-plate .signal { width: 30px; height: 30px; border-radius: 8px; background: #2a2a2a; }
.error-plate .signal .dot { width: 13px; height: 13px; }
.error-plate-text { display: grid; gap: 2px; }
.error-plate-kind { font-size: .875rem; font-weight: 700; color: #cfcfca; }
.error-page h1 { margin: 0; color: var(--on-sign); font-size: clamp(1.75rem, 5.5vw, 2.5rem); font-weight: 750; letter-spacing: -0.025em; line-height: 1.08; }
.error-page p { color: var(--ink-2); font-size: 1.0625rem; max-width: 56ch; }
.error-page .error-line { margin: 0 0 24px; max-width: 420px; }
.error-page .error-line > .stop { font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.error-page .error-line > .stop.is-failed { color: var(--down); font-weight: 800; }
.error-page .error-line > .stop:last-child::after { display: none; }
.error-page .error-line > .stop.terminus { flex: 0 0 auto; }
.error-page p.muted { color: var(--ink-3); font-size: .875rem; }

/* Signed-out pages have no line of sections: give the panel room under the sign band. */
body:has(.auth-page) main, body:has(.error-page) main { padding-top: 24px; }