/* Page-specific styles: auth (Register groups, Mfa setup, incomplete-link states).
   Everything else on the six auth pages comes from the shared design system (shell-auth.css, components.css). */

/* Model-level errors (wrong credentials, API refusals): render like the alert component (icon + text, no bullet).
   The shared .validation-summary-errors keeps its colours; only the inner layout changes. */
.auth-form .validation-summary-errors { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1.25rem; }
.auth-form .validation-summary-errors::before {
  content: '\f332'; font-family: bootstrap-icons; font-size: 1.05rem; line-height: 1.45; color: var(--danger); flex: none;
}
.auth-form .validation-summary-errors ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }

/* "Required field" key at the top of a long form */
.req-note { margin: 0 0 1.25rem; font-size: var(--fs-xs); color: var(--muted); }
.req-note span { color: var(--danger); font-weight: 700; }

/* password rules: the shared bullet icon is tiny at 12px, scale it so the list reads as a list */
.auth-form .rules-list i { font-size: 1.15rem; line-height: 1; margin: 0 -.1rem 0 -.2rem; color: var(--navy-500); }
.auth-form .rules-list li { align-items: center; }

/* Register: grouped fields (About you / Sign-in security) */
.auth-group + .auth-group { margin-top: 1.5rem; }
.auth-group > .form-section-title { font-size: var(--fs-md); }
.consent-line { margin: .9rem 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.5; }
.consent-line a { display: inline-block; padding: .3rem 0; }

/* Mfa enrolment: numbered setup steps + copy-friendly key */
.setup { margin-bottom: 1.25rem; }
.setup .auth-form-title { margin-bottom: .85rem; }
.setup-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .8rem; counter-reset: none; }
.setup-steps li { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.setup-steps li > span:last-child { padding-top: .22rem; }
.setup-n {
  flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--navy-700); color: #fff; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.setup-key-box { display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--gold-500); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.setup-key-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); }
.setup-key {
  display: block; padding: .6rem .75rem; background: var(--navy-50); border: 1px solid var(--navy-200); border-radius: var(--r-sm);
  color: var(--navy-900); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 600;
  letter-spacing: .08em; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; user-select: all; cursor: text;
}
.setup-key-hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.setup + .auth-form { margin-top: 0; }

/* the one-time code field sits centred under its label */
.auth-form .input-code { width: 100%; }

/* incomplete-link status block inside a card */
.auth-form > .auth-status { padding-top: .25rem; }
.auth-form > .auth-status > .text-muted { display: block; max-width: 24rem; margin: .25rem auto 0; line-height: 1.5; }
.auth-form > .auth-status + .d-grid { margin-top: .75rem; }