/* Authentication surfaces — sign in, forced change, reset.
   Everything colour- or space-related comes from tokens.css, so these screens
   follow the theme and density axes without knowing anything about either. */

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--ui-space-5) var(--ui-space-4);
}

.auth-card {
  width: 100%;
  max-width: 27rem;
  background: var(--ui-surface);
  border: var(--ui-border-w) solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-1);
  padding: var(--ui-space-6);
}

/* The accent rule is the one piece of Dispatch's character on an otherwise
   plain card: a control-room header bar, not a decorative flourish. */
.auth-card::before {
  content: '';
  display: block;
  height: 3px;
  width: var(--ui-space-7);
  background: var(--ui-accent);
  border-radius: var(--ui-radius-pill);
  margin-bottom: var(--ui-space-5);
}

.auth-brand {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
}
.auth-brand strong { font-size: var(--ui-text-lg); letter-spacing: -0.01em; }

.auth-lede {
  color: var(--ui-text-muted);
  font-size: var(--ui-text-sm);
  margin-bottom: var(--ui-space-5);
}

.auth-field { margin-bottom: var(--ui-space-4); }
.auth-field label {
  display: block;
  font-size: var(--ui-text-sm);
  font-weight: 600;
  margin-bottom: var(--ui-space-1);
}
.auth-field input {
  width: 100%;
  height: max(44px, var(--ui-control-h));
  padding: 0 var(--ui-space-3);
  font: inherit;
  font-size: var(--ui-text-base);
  color: var(--ui-text);
  background: var(--ui-surface);
  border: var(--ui-border-w) solid var(--ui-line-strong);
  border-radius: var(--ui-radius-md);
}
.auth-field input:disabled { background: var(--ui-surface-sunk); color: var(--ui-text-muted); }
.auth-hint {
  display: block;
  margin-top: var(--ui-space-1);
  font-size: var(--ui-text-xs);
  color: var(--ui-text-muted);
}

.auth-code { font-family: var(--ui-font-mono); letter-spacing: 0.4em; text-align: center; }

.auth-btn {
  width: 100%;
  height: max(44px, var(--ui-control-h));
  font: inherit;
  font-size: var(--ui-text-base);
  font-weight: 600;
  color: var(--ui-text-on-accent);
  background: var(--ui-accent);
  border: var(--ui-border-w) solid transparent;
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: background var(--ui-dur-fast) var(--ui-ease);
}
.auth-btn:hover:not(:disabled) { background: var(--ui-accent-hover); }
.auth-btn:disabled { opacity: 0.6; cursor: progress; }

.auth-link {
  display: inline-block;
  margin-top: var(--ui-space-4);
  font-size: var(--ui-text-sm);
  color: var(--ui-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* §21: this control IS disabled while its request is in flight, and a disabled
   state nobody can see is the defect it was added to close. Not colour alone:
   the cursor and the dropped underline carry it too (WCAG 1.4.1). */
.auth-link:disabled {
  color: var(--ui-text-muted);
  cursor: default;
  text-decoration: none;
}

/* §21, and the review finding inside §21's own fix. A live region must stay in
   the accessibility tree to announce, so this one is never `hidden` and never
   `display: none` — either would drop it out of the tree and the announcement
   with it. It collapses its own box instead, taking no space while empty. */
.auth-msg--live:empty {
  margin: 0;
  padding: 0;
  border-width: 0;
}

/* Messages carry an icon-free border plus text colour: colour is never the only
   channel, which is WCAG 1.4.1 and also just how you read a form at a glance. */
.auth-msg {
  margin-bottom: var(--ui-space-4);
  padding: var(--ui-space-3);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-w) solid transparent;
}
.auth-msg[hidden] { display: none; }
.auth-msg--error { color: var(--ui-crit); background: var(--ui-crit-soft); border-color: var(--ui-crit); }
.auth-msg--ok    { color: var(--ui-ok);   background: var(--ui-ok-soft);   border-color: var(--ui-ok); }
.auth-msg--note  { color: var(--ui-text); background: var(--ui-attn-soft); border-color: var(--ui-attn); }

.auth-msg ul { margin: var(--ui-space-2) 0 0; padding-left: var(--ui-space-4); }

.auth-panel[hidden] { display: none; }

.auth-foot {
  margin-top: var(--ui-space-5);
  padding-top: var(--ui-space-4);
  border-top: var(--ui-border-w) solid var(--ui-line);
  font-size: var(--ui-text-xs);
  color: var(--ui-text-faint);
}