/**
 * @file
 * Layout for the user account forms this theme renders.
 *
 * Four forms reach the front end: log in (which is also the site's front
 * page - see `system.site: page.front`), request a new password, the
 * one-time-login form a reset link lands on, and the logout confirmation.
 * Everything else under /user is an administration route and is drawn by
 * the admin theme.
 *
 * The fields themselves are NOT restyled here. Core's `input` elements
 * already route through the `text-input` SDC, their titles through `label`
 * and their descriptions and validation errors through `helper`
 * (templates/form/input.html.twig and its two neighbours), and their submit
 * buttons are painted in button.css. What is left is the column those parts
 * sit in, which no Drupal template expresses: the design's "Login form"
 * (Figma 22284:4178) is a 24px-spaced column inside a card, holding the
 * heading, a 16px-spaced pair of "Input form" components (439:64015), the
 * link, and a full-width primary button.
 *
 * Written as a stylesheet rather than as Tailwind utilities on a template:
 * the parts being spaced are core's own `form-item`, `form-actions` and
 * region wrappers, emitted by templates shared with every other page, so
 * the classes would have to be added by an alter that reaches only these
 * forms - a longer way round to the same rule, and one more thing to keep
 * in step with core's markup.
 *
 * Scoped by the card and by the class Drupal derives from each form's id,
 * so nothing here can reach another form. That is also why it rides in the
 * always-loaded `base` library rather than in the `user` one:
 * `user/drupal.user` is attached by the account edit form, which these are
 * not.
 *
 * @see web/themes/custom/dkg_theme/templates/layout/page--user-auth.html.twig
 */

/*
 * The card's own column: the 24px the design puts between the heading, the
 * form and anything else the content region holds - a status message, above
 * all, which is why the gap is on the region and not on the card.
 *
 * The region's <div> carries no utilities of its own, so a plain rule wins
 * here without help. A rule on the elements inside it would not: the
 * heading's size and spacing are Tailwind utilities from css/style.css,
 * which loads after this file - which is why the heading is a template of
 * its own (page-title--user-auth.html.twig) rather than an override below.
 */
.user-auth-card .region-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/*
 * The form's column. `gap-4` is the "Input & Button" gap the design's
 * Stacked variant (15517:148079) sets, and the same gap it puts between the
 * two fields of the login form.
 *
 * No `max-width`: the card is the cap now. Its 448px minus the 32px of
 * padding on each side is exactly the 384px the "Input form" component is
 * drawn at.
 */
.user-login-form,
.user-pass,
.user-pass-reset {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*
 * The label / field / helper column. `form-element.html.twig` prints the
 * label, the field and then the error and description helpers as siblings,
 * in that order, so one gap on the flex container spaces all of them at
 * once. The margins form.css gives every `form-item` are dropped: the
 * column's own gap above is what separates the fields here.
 */
.user-login-form .form-item,
.user-pass .form-item,
.user-pass-reset .form-item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0;
}

/*
 * The column's gap is already the 10px the design draws under a label
 * (`spacing/2.5`), so the label's own bottom margin - the `mb-2.5` that
 * form-element-label.html.twig puts on every visible label in the theme -
 * lands on top of it and makes the gap 20px.
 *
 * Dropped here rather than in the template because outside these forms
 * that margin is the only thing spacing a label off its control: the form
 * item is a plain block there, with no gap of its own to fall back on.
 * This is the one place in the theme where both mechanisms meet.
 */
.user-login-form .form-item > label,
.user-pass .form-item > label,
.user-pass-reset .form-item > label {
  margin-bottom: 0;
}

/*
 * The design's 24px, as the 16px the column already gives plus 8px. The
 * fields are 16px apart and everything after them is 24px apart, which one
 * gap cannot say on its own - the alternative is a wrapper around the pair
 * of fields, and that means restructuring core's form to change its
 * spacing.
 */
.user-login-form .user-auth-link,
.user-pass .user-auth-link {
  margin-top: 0.5rem;
}

/*
 * The same 24px above the button, and nothing below it - the card's own
 * padding is what ends the column. `margin` in full rather than
 * `margin-top`, because form.css gives every `form-actions` a bottom margin
 * for the paragraph that usually follows it, and here nothing does.
 */
.user-login-form .form-actions,
.user-pass .form-actions,
.user-pass-reset .form-actions {
  margin: 0.5rem 0 0;
}

/*
 * The logout confirmation is the one account form whose actions are all it
 * has - no fields, so no column of its own to add 8px to. The region's 24px
 * is the whole of the spacing above them, and form.css's margins would add
 * to it at the top and leave 16px of nothing against the card's padding at
 * the bottom.
 */
.user-logout-confirm .form-actions {
  margin: 0;
}

/*
 * "Forgot password?" (22284:3470) and its counterpart on the password form.
 * `align-self` because the column stretches its items and a stretched
 * anchor is a click target the width of the card.
 *
 * Underlined on hover only. The design draws the resting state without one,
 * and this is a lone link in a column of controls rather than a link inside
 * a run of text - what it is is not in question the way an inline link's is.
 */
.user-auth-link {
  align-self: flex-start;
  color: var(--color-fg-brand);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  text-decoration-line: none;
}
.user-auth-link:hover,
.user-auth-link:focus-visible {
  color: var(--color-fg-brand-strong);
  text-decoration-line: underline;
}

/*
 * Full width, as the Stacked variant draws it. The margins button.css keeps
 * for a row of adjacent buttons have nothing to sit between here - the
 * actions container holds one control - and would push the button off the
 * column's edge.
 *
 * The logout confirmation is not in this list: it has two actions, Log out
 * and Cancel, and they keep the row button.css draws them in.
 */
.user-login-form .form-actions .button,
.user-pass .form-actions .button,
.user-pass-reset .form-actions .button {
  width: 100%;
  margin: 0;
}

/*
 * Core's explanatory paragraphs - where the reset mail will go, and what a
 * one-time login is. Both arrive as `#markup` with their own <p> wrapper,
 * so they are flex items of the form's column and take its gap; what is
 * left is the type, which is the design's body text at the size the fields
 * are labelled.
 */
.user-pass p,
.user-pass-reset p {
  margin: 0;
  color: var(--color-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
}