/**
 * Authentication screens (log in, forgotten password, one-time login, MFA).
 *
 * These are the only routes with no node and no page-title block, so nothing
 * gave them a heading or a content column: the form floated on a bare page,
 * the fields on /user/password and /user/reset ran the full width of the
 * viewport, and the "Access denied" message went edge to edge.
 *
 * The structure comes from the shared page-template layer, not from here:
 * page.html.twig adds the route title as the page <h1> and runs the whole
 * content region through inc/qgds-content-layout.html.twig in its
 * single-column mode, so the heading, the status messages and the form share
 * one centred column at --qrida-content-measure. Controls come from QGDS
 * (.form-control on the inputs, .btn.btn-primary on the submit).
 *
 * What is left for this file is the small set of legacy rules in css/forms.css
 * that were compensating for the missing column and now fight it, plus the
 * vertical rhythm the layout partial cannot know about.
 */

/* Space before the footer. The content layout supplies the top margin
   (.mt-40 .mt-lg-64); nothing follows the form, so the bottom is ours. */
.qrida-auth {
  display: block;
  margin-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .qrida-auth {
    margin-bottom: 4rem;
  }
}

/* The page heading. Colour and scale are the design system's (#000053, 2rem
   rising to 2.5rem at lg); only the gap to the first control is set here, and
   it matches the gap QGDS puts under an h1 in body copy. */
.qrida-auth__title {
  margin-bottom: 1.5rem;
}

/* css/forms.css centres these two forms inside a bespoke 600px cap, because
   before the content column existed there was nothing else to constrain them.
   The column supplies the measure now, so release the cap and let the form
   share the column's left edge with the heading and the status messages. */
.qrida-auth form.user-login-form,
.qrida-auth form.tfa-entry-form {
  margin-inline: 0;
  max-width: none;
}

/* Nothing here styles the submit: it carries QGDS' .btn .btn-primary (see
   govcms_bartik_form_alter()), and .form-actions centres it, which is what
   every other form on the site does. The bespoke paint css/forms.css used to
   apply to the log-in and MFA verification submits was removed there rather
   than overridden here. */

/* Status messages are QGDS alerts (see templates/misc/status-messages.html.twig)
   and now inherit the column's width. Give the stack the same gap to the
   heading that the heading has to the form. */
.qrida-auth .messages__wrapper {
  margin-block: 0 1.5rem;
}

/* Help text under a control. Drupal emits .description where QGDS styles
   .form-text, so borrow the design system's help-text treatment rather than
   leaving the MFA field descriptions at full body size. */
.qrida-auth .description {
  color: var(--qld-secondary-color);
  font-size: 0.875em;
  margin-top: 0.25rem;
}

/* Standalone copy inside a form (the "Password reset instructions will be
   sent..." line on /user/password) sits directly between the field and the
   submit, so it needs the same rhythm as a form item. */
.qrida-auth form > p {
  margin-bottom: 1.5rem;
}