/* =============================================================================
 * pages/login/styles.css — styles unique to the sign-in screen.
 *
 * PURPOSE   The centered auth layout: viewport centring, brand block, card,
 *           form fields and the inline error state. No app shell here — login
 *           is a pre-auth page, so the body scrolls and centres its content.
 * REQUIRES  ../../shared/tokens.css + base.css (tokens, .btn, .input, .icon-badge, .card).
 * ============================================================================= */

/* Pre-auth page: body centres the card and scrolls if the viewport is short. */
body { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.auth { width: 100%; max-width: 23rem; }

.auth__brand { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; margin-bottom: 1.5rem; }
.auth__badge { width: 2.75rem; height: 2.75rem; }
.auth__badge svg { width: 1.6rem; height: 1.6rem; }
.auth__title { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.auth__sub { font-size: var(--fs-base); color: var(--muted); margin-top: .15rem; }

.auth__card { padding: 1.5rem; }

/* Form fields (taller than the default .input for touch comfort) */
.field-group { margin-bottom: 1rem; }
.field-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: .375rem; }
.input--lg { height: 2.5rem; }
.btn--block { width: 100%; height: 2.5rem; }

/* Inline validation error (toggled by script.js via data-show) */
.auth__error { display: none; align-items: center; gap: .4rem; margin-bottom: 1rem; padding: .5rem .7rem; font-size: var(--fs-sm); color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-md); }
.auth__error[data-show="true"] { display: flex; }
.auth__error .ti { font-size: 15px; flex: none; }
.input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px #fef2f2; }