/* Sign-in and account pages (UX Phase 3, audit B-20): sign in, two-step code, forgot / reset password, invitation.
   Staff and clients share these pages, so they speak to neither group in the other's language and carry the
   agency's own mark (the BLACK wordmark), not the internal product name. Colours and type: src/ui/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px;
  background: var(--ds-bg); color: var(--ds-text); font: 14px/1.5 var(--ds-font-sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--ds-text); }
:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.auth { width: 100%; max-width: 400px; }
.auth__logo { display: block; height: 36px; width: auto; margin: 0 auto 28px; }
html[data-theme="light"] .auth__logo { filter: brightness(0) saturate(100%); }
.auth__card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 28px 24px; }
.auth__title { margin: 0; font-size: var(--ds-text-xl); line-height: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
.auth__subtitle { margin: 4px 0 20px; color: var(--ds-text-secondary); }
.auth__field { margin-bottom: 16px; }
.auth__label { display: block; margin-bottom: 6px; font-size: var(--ds-text-sm); font-weight: 500; color: var(--ds-text); }
.auth__input {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--ds-border-control); border-radius: var(--ds-radius);
  background: var(--ds-input-bg); color: var(--ds-text); font: inherit;
}
.auth__input:focus { outline: 2px solid var(--ds-focus); outline-offset: 1px; border-color: var(--ds-focus); }
.auth__input[readonly] { color: var(--ds-text-secondary); background: var(--ds-surface-subtle); }
.auth__input--code { letter-spacing: 0.2em; font-size: 1.125rem; font-family: var(--ds-font-mono); }
.auth__help { margin: 6px 0 0; font-size: var(--ds-text-xs); color: var(--ds-text-muted); }
.auth__button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 4px;
  border: 1px solid var(--ds-primary); border-radius: var(--ds-radius); background: var(--ds-primary); color: var(--ds-on-primary);
  font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.auth__button:hover { background: var(--ds-primary-hover); }
.auth__button[disabled] { opacity: 0.7; cursor: progress; }
.auth__alert { margin-bottom: 16px; padding: 10px 12px; border-radius: var(--ds-radius); font-size: var(--ds-text-sm); }
.auth__alert--danger { background: var(--ds-danger-bg); color: var(--ds-danger-fg); }
.auth__alert--warning { background: var(--ds-warning-bg); color: var(--ds-warning-fg); }
.auth__alert--success { background: var(--ds-success-bg); color: var(--ds-success-fg); }
.auth__text { margin: 0 0 16px; color: var(--ds-text-secondary); }
.auth__links { margin-top: 16px; text-align: center; font-size: var(--ds-text-sm); }
.auth__links a { color: var(--ds-text); text-underline-offset: 2px; }
.auth__footer { margin-top: 24px; text-align: center; font-size: var(--ds-text-xs); color: var(--ds-text-muted); }