/* Login page. Uses the same tokens and fonts as the app. */
body { min-height: 100vh; }
.login { max-width: 360px; margin: 0 auto; padding: 14vh 20px 40px; display: flex; flex-direction: column; gap: 28px; }
.brand-big { margin: 0; }
.brand-big b { font-style: italic; font-weight: 900; font-size: 34px; letter-spacing: 0.02em; text-transform: uppercase; }
.brand-big b span { color: var(--f1-red); }
.login-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field input {
  width: 100%; background: var(--raised); border: 1px solid var(--hair); border-radius: 2px; color: var(--text);
  padding: 10px 12px; font-size: 16px; min-height: 44px;
}
.field input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.btn--primary { background: var(--f1-red); border-color: var(--f1-red); color: #fff; min-height: 44px; padding: 10px 28px; font-size: 13px; }
.btn--primary:hover { background: #f01a14; }
.btn--primary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.login-error { margin: 0; color: var(--loss); font-weight: 600; font-size: 14px; }
.login-error::before { content: "! "; font-weight: 900; }