/* Freelancer application, /careers/apply (components/careers/ApplicationForm).

   Linked last, on that route only (app/layout.tsx). The form is a
   .career-form, so it inherits the site's form system - the card, inputs and
   labels from forms.css and editorial.css, the black .career-submit and the
   .sx-btn--ghost - and this file only lays the steps out around them.

   No new colours or fonts. Everything is a token from fuel.css,
   design-system.css or editorial.css, except the error red, #A63F20, which is
   the value design-system.css already uses for invalid fields and form errors
   in the light theme (it has no token of its own).

   editorial.css guards its form rules with three IDs and !important, so the
   scope below carries four. Same convention as the rest of the codebase; it
   should move with them when forms move into a components layer. */

html body[data-page='careers']:not(#cap-a):not(#cap-b):not(#cap-c):not(#cap-d) {
  --cap-error: #A63F20;

  & .cap-form {
    display: grid !important;
    gap: var(--space-group) !important;
    width: 100% !important;
    max-width: 880px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* ---- Progress ---------------------------------------------------------- */
  & .cap-progress { display: grid; gap: var(--space-tight); }
  & .cap-progress__label {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-tight);
    margin: 0 !important; font-size: 14px !important; line-height: 1.4 !important;
  }
  & .cap-progress__label span { font-weight: 500; }
  & .cap-progress__track {
    height: 4px; overflow: hidden;
    background: var(--ed-line-strong); border-radius: var(--ed-radius-pill);
  }
  & .cap-progress__fill { width: 100%; height: 100%; background: var(--brand-leaf); transform-origin: left center; }

  /* ---- Steps ------------------------------------------------------------- */
  & .cap-step { min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  & .cap-step[hidden] { display: none !important; }
  /* A legend will not take part in layout; floated full width it behaves as
     an ordinary block, and the grid after it clears it. */
  & .cap-step__legend { float: left; width: 100%; margin: 0 0 var(--space-group); padding: 0; }
  & .cap-step__title {
    margin: 0 !important; scroll-margin-top: 120px;
    font-size: var(--fs-heading) !important; font-weight: var(--fw-display) !important;
    line-height: 1.15 !important; letter-spacing: var(--ls-tight) !important;
  }
  /* Focus is moved here on every step change so a screen reader announces
     where it is; it is not a control, so it does not draw a focus ring. */
  & .cap-step__title:focus, & .cap-step__title:focus-visible { outline: none !important; }

  & .cap-grid {
    clear: both;
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--space-group) var(--space-group);
  }

  /* ---- Fields ------------------------------------------------------------ */
  & .cap-field {
    display: grid; gap: 6px; align-content: start;
    min-width: 0; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; scroll-margin-top: 120px;
  }
  /* forms.css rings the whole .field on focus; here the control carries its
     own ring, and two nested rings read as a glitch. */
  & .cap-field:focus-within { box-shadow: none !important; }
  & .cap-field--spacer { display: none; }
  & .cap-field label:not(.cap-option), & .cap-group__legend {
    display: block; margin: 0 !important; padding: 0;
    font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important;
  }
  & .cap-hint, & .cap-count {
    margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important;
  }
  & .cap-count { text-align: right; }

  & .cap-field :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']), select, textarea) {
    width: 100% !important; max-width: 100% !important; min-height: 48px !important;
    box-sizing: border-box !important; padding: 10px 12px !important;
    /* 16px stops iOS zooming the page into a focused field. */
    font: inherit !important; font-size: 16px !important; line-height: 1.4 !important;
    scroll-margin-top: 120px;
  }
  & .cap-field textarea { height: auto !important; min-height: 96px !important; resize: vertical; }
  & .cap-field .phone-input-group { width: 100%; min-width: 0; }

  & .cap-field [aria-invalid='true']:not([type='checkbox']):not([type='radio']) {
    border-color: var(--cap-error) !important; box-shadow: inset 0 0 0 1px var(--cap-error) !important;
  }
  & :is(.cap-error, .cap-problem .field-note) {
    margin: 0 !important; color: var(--cap-error) !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.4 !important;
  }

  /* ---- Radio and checkbox groups ---------------------------------------- */
  & .cap-group { border: 0 !important; }
  & .cap-group > .cap-group__legend { float: left; width: 100%; margin-bottom: 6px !important; }
  & .cap-group > :not(legend) { clear: both; }
  & .cap-options { display: flex; flex-wrap: wrap; gap: var(--space-tight); }
  & .cap-group--columns .cap-options { display: grid; grid-template-columns: minmax(0, 1fr); }
  & .cap-option {
    display: flex !important; align-items: center; gap: 10px;
    min-height: 44px; margin: 0 !important; padding: 8px 14px !important; box-sizing: border-box;
    background: var(--ed-card); border: 1px solid var(--ed-line-strong); border-radius: var(--ed-radius-card);
    font-size: 15px !important; font-weight: 400 !important; line-height: 1.35 !important;
    cursor: pointer;
  }
  & .cap-option:has(input:checked) { background: var(--c-accent); border-color: var(--ed-ink); }
  & .cap-option:focus-within { outline: 2px solid var(--ed-ink); outline-offset: 2px; }
  & .cap-option input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--ed-ink); }
  & .cap-option input:focus-visible { outline: none; }
  & .cap-option[data-invalid], & [data-invalid] .cap-option { border-color: var(--cap-error); }
  & .cap-option--consent { align-items: flex-start; padding-block: 12px !important; }
  & .cap-option--consent input { margin-top: 1px; }

  /* ---- Actions and messages --------------------------------------------- */
  & .cap-actions {
    display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between;
    gap: var(--space-label);
  }
  & .cap-actions .cap-next { margin-left: auto !important; }
  & .cap-actions :is(button) { min-height: 48px !important; }
  & .cap-actions button:disabled { opacity: .6 !important; cursor: progress !important; }

  & .cap-problem {
    display: grid; gap: var(--space-label); justify-items: start;
    padding: var(--space-item); border: 1px solid var(--cap-error); border-radius: var(--ed-radius-card);
  }

  /* The honeypot: off-screen, not display:none, out of the tab order and
     hidden from assistive technology by the markup. */
  & .cap-hp {
    position: absolute !important; left: -10000px !important; top: auto !important;
    width: 1px !important; height: 1px !important; overflow: hidden !important;
  }
  & .cap-sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    margin: -1px !important; padding: 0 !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  }

  /* ---- Success ----------------------------------------------------------- */
  & .cap-done {
    display: grid; gap: var(--space-item);
    max-width: 720px; margin-inline: auto; box-sizing: border-box;
    padding: var(--ed-space-card);
    background: var(--ed-card); border: 1px solid var(--ed-line); border-radius: var(--ed-radius-card);
    color: var(--ed-ink);
  }
  & .cap-done__title {
    margin: 0 !important; color: var(--ed-ink) !important;
    font-size: var(--fs-heading) !important; font-weight: var(--fw-display) !important;
    line-height: 1.15 !important; letter-spacing: var(--ls-tight) !important;
  }
  & .cap-done__title:focus, & .cap-done__title:focus-visible { outline: none !important; }
  & .cap-done__subtitle {
    margin: var(--space-tight) 0 0 !important; color: var(--ed-ink) !important;
    font-size: 16px !important; font-weight: var(--fw-strong) !important; line-height: 1.4 !important;
  }
  & .cap-done__text { margin: 0 !important; color: var(--ed-muted) !important; font-size: 16px !important; line-height: 1.55 !important; }
  & .cap-done__text a { color: var(--ed-ink) !important; text-decoration: underline; }
  & .cap-done__actions { margin: var(--space-tight) 0 0 !important; }

  @media (min-width: 720px) {
    & .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .cap-field--wide { grid-column: 1 / -1; }
    & .cap-field--spacer { display: block; }
    & .cap-group--columns .cap-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* On a phone the actions stack full width, primary on top. */
  @media (max-width: 479px) {
    & .cap-actions > * { flex: 1 1 100%; width: 100% !important; justify-content: center !important; }
    & .cap-actions .cap-next { margin-left: 0 !important; }
  }

  /* Motion only for those who have not asked for less: the step eases in and
     the bar fills. With reduced motion both simply change state. */
  @media (prefers-reduced-motion: no-preference) {
    & .cap-step:not([hidden]) { animation: cap-step-in 280ms ease-out both; }
    & .cap-progress__fill { transition: transform 320ms ease; }
  }
}

@keyframes cap-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}