/**
 * AM2027 — auth pages.
 * A centred card on the site's wash. Drupal's form markup is styled in place
 * rather than overridden in Twig, so the same rules cover any auth form the
 * card ends up wrapping.
 */

.auth{
  display:flex;justify-content:center;align-items:flex-start;
  background:var(--wash);
  padding:clamp(40px,7vw,84px) 20px clamp(56px,9vw,104px);
}
.auth-card{
  width:100%;max-width:432px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:clamp(28px,4vw,40px);
  box-shadow:0 18px 40px -28px rgba(12,46,78,.4);
}

/* Page title block, rendered inside the card by page--user--login. The
   `.page-title` variants are listed so these win over page.css's generic
   `.page-title h1` rules, which load later and would otherwise enlarge the
   heading and drop the 24px gap above the fields. */
.auth-card h1,
.auth-card .page-title h1{
  margin:0;font-size:calc((27px) * var(--fs,1));font-weight:700;letter-spacing:-.01em;color:var(--navy);
}
.auth-card h1::after,
.auth-card .page-title h1::after{
  content:"";display:block;width:56px;height:2px;
  background:var(--teal);margin:14px 0 24px;
}

/* ---------- form items ---------- */
.auth-card .form-item{margin:0 0 18px}
.auth-card label{
  display:block;margin:0 0 7px;
  font-size:calc((12.5px) * var(--fs,1));font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);
}
.auth-card label.form-required::after{content:" *";color:var(--orange)}

.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"]{
  width:100%;max-width:100%;
  padding:12px 14px;font:inherit;font-size:calc((15px) * var(--fs,1));color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  transition:border-color .18s,box-shadow .18s;
}
.auth-card input:focus{
  outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(23,121,139,.16);
}
.auth-card input::placeholder{color:#9AA9B5}

/* Drupal prints the size attribute, which otherwise fixes the field width. */
.auth-card input[size]{width:100%}

.auth-card .description{
  margin:6px 0 0;font-size:calc((12.5px) * var(--fs,1));line-height:1.45;color:var(--slate);
}

/* ---------- submit ---------- */
.auth-card .form-actions{margin:24px 0 0}
.auth-card .button,
.auth-card input[type="submit"]{
  display:block;width:100%;
  padding:13px 20px;border:1px solid var(--teal);border-radius:4px;
  background:var(--teal);color:#fff;cursor:pointer;
  font:inherit;font-size:calc((13px) * var(--fs,1));font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background .2s,border-color .2s;
}
.auth-card .button:hover,
.auth-card input[type="submit"]:hover{background:var(--teal-dark);border-color:var(--teal-dark)}

/* ---------- footnote link ---------- */
.auth-alt{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  text-align:center;font-size:calc((13.5px) * var(--fs,1));
}
.auth-alt a{color:var(--teal);font-weight:600}
.auth-alt a:hover{color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px}

/* Messages sit inside the card, so drop the page-grid gutters. */
.auth-messages .messages-list{max-width:none;margin:0 0 20px;padding:0}

/* The auth card owns its own width and padding; the page grid must not
   apply to the title inside it. */
.auth-card .page-title{max-width:none;margin:0;padding:0}