/* ======================================================================
   login.css — professional-login.html
   ======================================================================

   Loaded after maison.css and scoped under .page-login. The form itself is
   entirely the shared .hm-form / .hm-field vocabulary; what is here is the
   two-column portal frame, the password toggle, the status message, and
   the handful of class names script.js reaches for by name.

   Kept from the old markup because initProfessionalLoginForm() queries
   them: .login-submit, [data-auth-status] with its .is-visible toggle,
   [data-submit-label] and [data-password-toggle]. Only the first is a
   styling hook the old stylesheet also targets, so only that one needs
   overriding here.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. The frame
   Sign-in on the left, what an account is for on the right. The old page
   put a CSS-drawn still life in that second column — a flower, a slab of
   travertine, tweezers and a clip-path sapphire — which is decoration in
   the one place a visitor is deciding whether to bother applying. The
   column now answers that question instead.
   ---------------------------------------------------------------------- */
.page-login .hm-portal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 100svh;
}

.page-login .hm-portal__form,
.page-login .hm-portal__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Top padding clears the fixed masthead, as on every page hero. */
  padding: clamp(140px, 12vh + 60px, 200px) var(--a-gutter) var(--a-section-y);
}
.page-login .hm-portal__form > * {
  width: 100%;
  max-width: 32rem;
  /* Pushed toward the page's centre line rather than left against the
     gutter, so the two columns meet in the middle instead of the form
     drifting to the far edge on a wide screen. */
  margin-inline: auto 0;
}

/* Colour and background come from .hm-section--night on the element — see
   the note in the markup.

   The top margin is what keeps the dark block out from under the masthead.
   At rest the header is a scrim that fades to transparent; it only becomes
   an opaque bar once the page has been scrolled 60px, and setHeaderState()
   in script.js sets that as an inline style, which no stylesheet rule can
   override without !important. So three navigation links were sitting in
   dark ink on near-black. Held below the header instead — same clamp the
   form column uses to clear it — which needs no override and reads as a
   deliberate block rather than a bleed. */
.page-login .hm-portal__aside {
  margin-top: clamp(140px, 12vh + 60px, 200px);
  padding-top: var(--a-section-y);
}
.page-login .hm-portal__aside > * {
  width: 100%;
  max-width: 26rem;
  margin-inline: 0 auto;
}

/* The form panel is the whole column here, so its border and inset would
   only draw a box inside a box.

   Losing the padding also lost the only thing separating the first field
   label from the lead above it — they were touching at 0px, while the
   rhythm around them is 32px between copy blocks and 40px between fields.
   The gap is stated instead of inherited from a panel that no longer
   exists, and it is --a-s6 rather than --a-s4 because this is the seam
   between reading and doing: the same step .hm-actions puts between a
   paragraph and its buttons. */
.page-login .hm-form {
  margin-top: var(--a-s6);
  padding: 0;
  border: 0;
  background: none;
}
/* One field per row: an email and a password are not a pair to be scanned
   side by side, and the column is too narrow for it besides. */
.page-login .hm-form__grid { grid-template-columns: minmax(0, 1fr); }

/* ----------------------------------------------------------------------
   2. Password field
   The toggle was an eye drawn from a span with a border-radius, labelled
   only by aria-label — so a sighted user got a shape with no name and a
   screen-reader user got a name with no shape. It is a word now, which
   needs neither.
   ---------------------------------------------------------------------- */
/* The field itself is the positioning context — the toggle is a sibling of
   the input, not a wrapper around it (see the note in the markup). */
.page-login .hm-password { position: relative; }
/* Clears the toggle. Without it a long password runs under the word. */
.page-login .hm-password input { padding-right: var(--a-s7); }

.page-login .hm-password button {
  position: absolute;
  right: 0;
  bottom: var(--a-s1);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--sans);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
  cursor: pointer;
  transition: color var(--a-d-fast) var(--a-ease-soft),
              border-color var(--a-d-fast) var(--a-ease-soft);
}
.page-login .hm-password button:hover,
.page-login .hm-password button:focus-visible {
  color: var(--a-ink);
  border-bottom-color: var(--a-gold);
}

/* ----------------------------------------------------------------------
   3. Options row
   ---------------------------------------------------------------------- */
.page-login .hm-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-s3) var(--a-s4);
  margin-top: var(--a-s5);
}

.page-login .hm-check {
  display: flex;
  align-items: center;
  gap: var(--a-s2);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
  cursor: pointer;
}
/* The native control, recoloured. The old one was appearance:none with the
   tick built from two crossed linear-gradients; accent-color says the same
   thing in one line and keeps the platform's own focus and hit target. */
.page-login .hm-check input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--a-gold-ink);
  cursor: pointer;
}

/* ----------------------------------------------------------------------
   4. Status message
   Shown by initProfessionalLoginForm() adding .is-visible. The old rule
   hid it with display:none and revealed it the same way; that pair is
   restated here because the element no longer carries .auth-status-message.
   ---------------------------------------------------------------------- */
.page-login .hm-alert {
  display: none;
  margin: 0 0 var(--a-s5);
  padding: var(--a-s2) 0 var(--a-s2) var(--a-s3);
  border-left: 1px solid var(--a-alert);
  background: var(--a-alert-wash);
  font-size: var(--a-small);
  line-height: var(--a-lh-body);
  color: var(--a-alert);
}
.page-login .hm-alert.is-visible { display: block; }

/* Same region, opposite meaning — the reset page's "a link has been sent"
   is a confirmation, not a failure. */
.page-login .hm-alert--ok {
  border-left-color: var(--a-ok);
  background: var(--a-ok-wash);
  color: var(--a-ok);
}

/* ----------------------------------------------------------------------
   5. Submit and the application link
   ---------------------------------------------------------------------- */
/* styles.css gives .login-submit a 38px top margin and a 3px radius, both
   from the old bordered-button treatment. The margin would stack on top of
   .hm-form__actions' own; the radius is already beaten by .hm-cta on
   source order, and is restated only so the intent is not accidental. */
.page-login .login-submit {
  margin-top: 0;
  border-radius: var(--a-r0);
}
.page-login .hm-form__actions .hm-cta { min-width: 14rem; }

.page-login .hm-apply {
  margin-top: var(--a-s7);
  padding-top: var(--a-s4);
  border-top: 1px solid var(--a-hairline);
}
.page-login .hm-apply p {
  margin: 0 0 var(--a-s3);
  font-size: var(--a-small);
  color: var(--a-ink-soft);
}

/* ----------------------------------------------------------------------
   6. Breakpoints
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .page-login .hm-portal {
    grid-template-columns: minmax(0, 1fr);
    /* Stacked, the two columns are two screens' worth of height; forcing a
       viewport minimum on top of that leaves a band of empty ivory under
       the form on every phone. */
    min-height: 0;
  }
  .page-login .hm-portal__form,
  .page-login .hm-portal__aside {
    padding-block: var(--a-section-y);
  }
  /* Stacked, the dark block is nowhere near the header. */
  .page-login .hm-portal__aside { margin-top: 0; }
  /* Only the first column sits under the masthead. */
  .page-login .hm-portal__form { padding-top: clamp(140px, 12vh + 60px, 200px); }
  .page-login .hm-portal__form > *,
  .page-login .hm-portal__aside > * {
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 560px) {
  .page-login .hm-options {
    /* Two 11px lines of small caps do not share a row at this width
       without one of them wrapping mid-phrase. */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--a-s3);
  }
}