/*
  Dark styling for the live HubSpot job-application embed
  (#hs-application-form, requires "Set as raw HTML form" in HubSpot form
  settings). Loaded (via <helmet>) by every careers-*.html job posting
  detail page — careers.html (the listing page) has no application form
  and doesn't load this file.

  This is the "pre-load skeleton" half only: it styles the placeholder div
  before HubSpot's forms.js has rendered anything into it, and continues to
  apply to whatever raw HTML HubSpot renders there afterward, since these
  are plain selectors against the main document. It does NOT cover the
  common case where HubSpot instead renders the form inside its own
  <iframe> — that's a separate cross-origin document this stylesheet can't
  reach, so a second, functionally parallel "post-load override" block is
  built as a JS string and injected into that iframe's own contentDocument
  at runtime, once per page, inside each posting's `<script data-dc-script>`
  (search for `s70-dark` in any careers-*.html). The two are kept in sync
  by hand — if you change one, change the other the same way.
*/

#hs-application-form .hs-form-field { margin-bottom: 16px; }

#hs-application-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tint-white-50);
  display: block;
  margin-bottom: 8px;
}

#hs-application-form .hs-error-msgs label {
  color: var(--tint-accent-soft);
  text-transform: none;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
}

#hs-application-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }

#hs-application-form input[type="text"],
#hs-application-form input[type="email"],
#hs-application-form input[type="tel"],
#hs-application-form input[type="url"],
#hs-application-form input[type="number"],
#hs-application-form textarea,
#hs-application-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  background: var(--tint-input-bg);
  border: 1px solid var(--tint-white-12);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-on-accent);
  outline: none;
  transition: border-color 140ms cubic-bezier(0.2,0.7,0.2,1);
}

#hs-application-form input:focus,
#hs-application-form textarea:focus,
#hs-application-form select:focus {
  border-color: var(--tint-orange-50);
}

#hs-application-form input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 15px;
  background: var(--tint-input-bg);
  border: 1px dashed var(--tint-white-20);
  border-radius: 8px;
  color: var(--tint-white-60);
  font-size: 13px;
}

#hs-application-form .hs-button {
  width: 100%;
  padding: 14px 26px;
  background: var(--s70-orange);
  color: var(--fg-on-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 24px var(--tint-orange-35);
  transition: background 120ms cubic-bezier(0.2,0.7,0.2,1);
}

#hs-application-form .hs-button:hover { background: var(--s70-orange-bright); }

#hs-application-form .hs-form-required { color: var(--tint-accent-soft); margin-left: 2px; }

#hs-application-form .submitted-message {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tint-white-75);
}

#hs-application-form .legal-consent-container,
#hs-application-form .legal-consent-container p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tint-white-40);
}