/* Sign in (templates/login.html) and the error page (templates/error.html): the signed-out card on .ds-auth
   (portal-base.css) and the signed-in error state under the navbar. Tokens only (plan.md 1.9 R2). */

.auth-wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; }
.auth-card { padding: var(--space-8) var(--space-8) var(--space-6); box-shadow: var(--shadow-md); }
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.auth-logo { width: 44px; height: 44px; display: block; flex: none; } /* no radius: the artwork runs into its corners */
.auth-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--clr-text-heading); }
.auth-desc { margin: var(--space-1) 0 var(--space-5); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--clr-text-muted); }
.auth-feedback:not(:empty) { margin-bottom: var(--space-4); }
.auth-submit { width: 100%; margin-top: var(--space-1); }
.auth-alt { align-self: center; }
.auth-code { font-family: var(--font-mono); letter-spacing: 0.3em; }
.auth-foot { margin: var(--space-4) 0 0; text-align: center; font-size: var(--fs-xs); color: var(--clr-text-muted); }

/* The error state: the code, what happened, and the way out. Signed out it sits in the auth card; signed in it
   is centered in the page area under the navbar. */
.err-state { display: flex; flex-direction: column; align-items: center; text-align: center; }
.err-page { min-height: calc(100dvh - var(--topbar-h) - var(--space-10)); display: grid; place-items: center; padding: var(--space-8) 0; }
.err-page .err-state { max-width: 520px; }
.err-ic { width: 44px; height: 44px; margin-bottom: var(--space-3); border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--t-bg); color: var(--t-ink); }
.err-ic svg.ds-i { width: var(--icon-2xl); height: var(--icon-2xl); }
.err-num { margin: 0; font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--clr-text-heading); font-variant-numeric: tabular-nums; }
.err-title { margin: var(--space-1) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--clr-text-heading); }
.err-msg { margin: var(--space-2) 0 0; font-size: var(--fs-md); line-height: var(--lh-base); color: var(--clr-text-muted); max-width: 46ch; overflow-wrap: anywhere; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.auth-card .err-actions { width: 100%; }
.auth-card .err-actions > * { flex: 1 1 auto; }

@media (max-width: 600px) {
    .auth-card { padding: var(--space-6) var(--space-5) var(--space-5); }
    .err-page { min-height: 0; padding: var(--space-10) 0 var(--space-6); }
    .err-actions { width: 100%; }
    .err-actions > * { flex: 1 1 auto; }   /* 44 px tall on touch screens: the kit's button rule */
}