/* ======================================================================
   apply.css — apply-professional-account.html
   ======================================================================

   Loaded after maison.css, scoped under .page-apply. The form itself is
   the shared .hm-form / .hm-field vocabulary — this is the third page to
   use it, after the appointment form and the sign-in. What is here is the
   two things that exist nowhere else on the site: a file drop zone and a
   pair of consent checkboxes.

   Every JavaScript hook in the markup is unchanged. initProfessionalApplicationForm()
   reads a lot of this page by name — [data-country-select],
   [data-registration-label], [data-application-upload] and its .has-file /
   .is-dragging states, [data-character-count] — and it also relies on the
   shape of a field: setFieldError() does field.closest("label") and then
   looks for a <small> inside it. So every field here is a <label> with a
   <small>, which is what .hm-field already is.
   ====================================================================== */

/* ----------------------------------------------------------------------
   1. Layout
   The form is a single wide column rather than a split: eleven fields, a
   long textarea, an upload and two consent lines do not have a companion
   column that could hold anything worth reading beside them.
   ---------------------------------------------------------------------- */
.page-apply .hm-form { max-width: 68rem; }

.page-apply .hm-form__section {
  margin-top: var(--a-s8);
  padding-top: var(--a-s5);
  border-top: 1px solid var(--a-hairline);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}
.page-apply .hm-form__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The status region. Same component as the sign-in page's, and the same
   two states — this one is only ever the failure, since a success
   navigates away to application-received.html. */
.page-apply .hm-alert {
  display: none;
  margin: var(--a-s4) 0 0;
  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-apply .hm-alert.is-visible { display: block; }

/* The honeypot. Off-screen rather than display:none, because a field that
   is not rendered is not filled in by the bots this is meant to catch. */
.page-apply .screen-reader-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The character counter sits in the field's own <small>, so it inherits
   from maison.css; only the running number is picked out. */
.page-apply .hm-field small b {
  font-weight: 500;
  color: var(--a-ink);
}

/* ----------------------------------------------------------------------
   2. Upload
   A dashed rectangle is the one shape on this site that has to look like
   a drop target, because that is the only way the affordance reads. It is
   a hairline dash rather than a heavy one, and it turns gold when a file
   is over it or in it.
   ---------------------------------------------------------------------- */
.page-apply .hm-upload {
  display: grid;
  place-items: center;
  gap: var(--a-s2);
  min-height: var(--a-s10);
  padding: var(--a-s5);
  border: 1px dashed var(--a-hairline-strong);
  border-radius: var(--a-r1);
  background: var(--a-shell);
  font-size: var(--a-small);
  line-height: var(--a-lh-body);
  text-align: center;
  color: var(--a-ink-soft);
  cursor: pointer;
  transition: border-color var(--a-d-fast) var(--a-ease-soft),
              background var(--a-d-fast) var(--a-ease-soft);
}
.page-apply .hm-upload:hover,
.page-apply .hm-upload:focus-visible { border-color: var(--a-ink-mute); }
.page-apply .hm-upload.is-dragging,
.page-apply .hm-upload.has-file {
  border-color: var(--a-gold);
  background: var(--a-gold-wash);
}
/* The real input. Kept in the accessibility tree and keyboard-reachable —
   the label around it is what is styled, and the drop zone also handles
   Enter and Space itself. */
.page-apply .hm-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.page-apply .hm-upload small {
  display: block;
  margin-top: var(--a-s1);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink-mute);
}

.page-apply .hm-upload__selected {
  margin: var(--a-s3) 0 0;
  font-size: var(--a-small);
  color: var(--a-ink);
}
.page-apply .hm-upload__selected small {
  color: var(--a-ink-mute);
}
.page-apply .hm-upload__selected button {
  margin-left: var(--a-s2);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--a-gold);
  background: none;
  font-family: var(--sans);
  font-size: var(--a-label);
  letter-spacing: var(--a-ls-label);
  text-transform: uppercase;
  color: var(--a-ink);
  cursor: pointer;
}

.page-apply .hm-upload__error {
  margin: var(--a-s2) 0 0;
  font-size: var(--a-label);
  line-height: 1.6;
  color: var(--a-alert);
}
.page-apply .hm-upload__error:empty { display: none; }

.page-apply .hm-upload__note {
  margin: var(--a-s2) 0 0;
  font-size: var(--a-label);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--a-ink-mute);
}

/* ----------------------------------------------------------------------
   3. Consent
   Two statements the applicant is agreeing to, so they are set as reading
   text at body size rather than as 11px small caps like the field labels.
   ---------------------------------------------------------------------- */
.page-apply .hm-consent {
  display: grid;
  gap: var(--a-s3);
  margin-top: var(--a-s6);
}
.page-apply .hm-consent label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--a-s3);
  align-items: start;
  max-width: var(--a-measure);
  font-size: var(--a-small);
  line-height: var(--a-lh-body);
  color: var(--a-ink-soft);
  cursor: pointer;
}
.page-apply .hm-consent input {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--a-gold-ink);
  cursor: pointer;
}
.page-apply .hm-consent a { color: var(--a-ink); }

.page-apply .hm-form__note { margin-top: var(--a-s3); }

/* ----------------------------------------------------------------------
   4. Breakpoints
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .page-apply .hm-upload { padding: var(--a-s4); }
}