/* ============================================================================
   Sign-in page.

   This page has to work with no JavaScript at all — it is the gate to every
   other page — so it is a plain form POST with no progressive enhancement.
   ========================================================================== */

.login-page { min-height: 100vh; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.login-card { width: min(430px, 100%); padding: 2rem; position: relative; }
.login-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.login-brand .mark { width: 2.5rem; color: var(--accent); flex: 0 0 auto; }
.login-brand h1 { margin: .3rem 0 0; font: 600 2rem/1 var(--display); }
.login-form { display: grid; gap: 1rem; }
.login-form label { display: grid; gap: .45rem; color: var(--dim); font: 600 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.login-form input { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #0a0c10; color: var(--ink); padding: .82rem .9rem; font: 500 .92rem/1.2 var(--ui); }
.login-form input:focus { outline: 2px solid rgba(61,220,151,.45); border-color: var(--accent); }
.login-form button { margin-top: .25rem; min-height: 2.75rem; }
.login-notice, .login-error { border-radius: 9px; padding: .75rem .85rem; margin: 0 0 1rem; font-size: .78rem; line-height: 1.45; }
.login-notice { color: #dbbd7a; background: rgba(108,75,18,.12); border: 1px solid rgba(175,125,44,.34); }
.login-error { color: #ffaaa0; background: rgba(124,41,31,.15); border: 1px solid rgba(228,93,77,.34); }
.login-notice code { color: inherit; }
.login-foot { color: var(--faint); font-size: .7rem; line-height: 1.5; margin: 1.3rem 0 0; }