/**
 * User account forms — login, password reset, register.
 *
 * These pages have no hero, so the form would otherwise render in the top-left
 * corner of .reciklart-main, directly under the absolutely-positioned hamburger
 * nav (see components/nav.css: position: absolute; top: 0; left: 0).
 *
 * Center the form both axes in the viewport. `position: fixed; inset: 0` with
 * `margin: auto` + an intrinsic size is the classic dead-center technique and
 * needs no body/route class to target. z-index 1 keeps it above the background
 * layers (z-index 0) but below the hamburger nav (z-index 99), so the menu
 * stays clickable in the corner.
 */
.user-login-form,
.user-pass,
.user-register-form {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 1;

  /* Intrinsic box so margin:auto can center it on both axes. */
  width: min(24rem, 100% - 4rem);
  height: max-content;
  /* Never taller than the viewport; scroll inside if it would be. */
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-sizing: border-box;
}

/* Inputs fill the column width so the fields line up under the labels. */
.user-login-form :where(input:not([type="checkbox"]):not([type="radio"])),
.user-pass :where(input:not([type="checkbox"]):not([type="radio"])),
.user-register-form :where(input:not([type="checkbox"]):not([type="radio"])) {
  width: 100%;
  box-sizing: border-box;
}