/* Atlas on top of a4q-signin.css (the shared A4Q sign-in look, kept byte for
   byte the same as in the other a4qapps.com applications, so never edited
   here). Bootstrap is not loaded on the sign-in pages, but ui.field
   (templates/_macros.html) writes Bootstrap's form classes; without these
   rules the labels, errors and hints would fall back to the browser's
   defaults inside the dark card. */

/* A page's own heading under the app name (two-factor, reset, invitation). */
.signin-heading { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #fff; }
/* A long email address must wrap rather than widen the card on a phone. */
.a4q-lede strong { font-weight: 600; color: #fff; overflow-wrap: anywhere; }

/* ui.field: the wrapper, label, error and hint of one field. */
.a4q-form .mb-3 { display: grid; gap: 6px; }
.a4q-form .form-label { font-size: .84rem; font-weight: 600; color: var(--s-soft); }
.a4q-form .invalid-feedback { font-size: .82rem; color: #ffb3bd; }
.a4q-form .form-text { font-size: .8rem; color: var(--s-muted); }

/* "Go to sign in" on the link-not-valid page is a link drawn as the button. */
a.a4q-btn { text-decoration: none; }