/*
 * Sign-in, account and password pages on the state layout.
 * Brand tokens only (no hex); scripts/check_brand.py enforces it.
 */
.auth { max-width: 480px; margin: 0 auto; }
.auth-title { margin-bottom: 4px; }
.auth-intro { color: var(--text-muted); margin: 0 0 24px; }
.auth-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 32px);
  background: var(--surface);
}

/* sign in / create account tabs */
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin: -8px 0 24px; }
.auth-tab {
  flex: 1; cursor: pointer;
  font: bold var(--fs-body)/1 var(--font);
  color: var(--text-muted); background: transparent;
  border: 0; border-bottom: 3px solid transparent;
  padding: 12px 8px; margin-bottom: -1px;
}
.auth-tab[aria-selected="true"] { color: var(--link); border-bottom-color: var(--link); }
.auth-panel[hidden] { display: none; }

/* fields */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: bold; margin-bottom: 6px; }
.auth-card input:not([type="checkbox"]) {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--link);
  border-radius: 4px;
  padding: 10px 12px;
  min-height: 44px;
}
.help { font-size: var(--fs-small); color: var(--text-muted); margin: 6px 0 0; }
.field-error {
  display: block; margin-top: 6px; padding-left: 8px;
  font-size: var(--fs-small);
  border-left: 3px solid var(--ui-error);
}
.form-errors {
  border: 1px solid var(--border); border-left: 4px solid var(--ui-error);
  border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 18px;
}
.form-errors p { margin: 0; }
.form-errors ul { margin: 0; padding-left: 20px; }
.auth-card .btn { width: 100%; margin-top: 8px; }

/* notes and links */
.notice {
  border: 1px solid var(--border); border-left: 4px solid var(--link);
  border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 20px;
  font-size: var(--fs-small);
}
.notice p, .notice ul { margin: 0; }
.notice ul { padding-left: 20px; }
.notice strong { display: block; margin-bottom: 4px; }
.notice .requirements { columns: 2; column-gap: 24px; }
.notice .requirements li { break-inside: avoid; }
@media (max-width: 480px) { .notice .requirements { columns: 1; } }
.auth-links { margin: 20px 0 0; text-align: center; font-size: var(--fs-small); }
.auth-links p { margin: 6px 0; }
.auth-status { text-align: center; }
.auth-status .btn { width: auto; }