/**
 * @file
 * The careers wizard: the stepper rail, the step card and the "Your
 * application" panel.
 *
 * < 720px: one column — "Step N of 7 · <step name>" and the bar (no named
 *   steps: no room for them beside the card), the card, then the panel.
 * 720–1023px: two columns — the rail (status, bar, named steps) beside the
 *   card, the panel under the card.
 * 1024–1535px: two columns — the rail with the sticky panel under it, and
 *   the card spanning both rows.
 * >= 1536px: three columns — sticky rail, card, sticky panel.
 */

:where(.gdrfad-dds) .careers-wizard,
.gdrfad-dds-embedded .careers-wizard {
  display: grid;
  grid-template-areas:
    "rail"
    "card"
    "summary";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-gap-lg);
  align-items: start;
}

:where(.gdrfad-dds) .careers-wizard__rail,
.gdrfad-dds-embedded .careers-wizard__rail {
  grid-area: rail;
}

:where(.gdrfad-dds) .careers-wizard__card,
.gdrfad-dds-embedded .careers-wizard__card {
  grid-area: card;
}

:where(.gdrfad-dds) .careers-wizard__summary,
.gdrfad-dds-embedded .careers-wizard__summary {
  grid-area: summary;
}

@media (min-width: 720px) {
  :where(.gdrfad-dds) .careers-wizard {
    grid-template-areas:
      "rail card"
      "rail summary";
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--gap-gap-lg) var(--gap-gap-xl);
  }
}


@container gdrfad-dds (min-width: 720px) {
  .gdrfad-dds-embedded .careers-wizard {
    grid-template-areas:
      "rail card"
      "rail summary";
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--gap-gap-lg) var(--gap-gap-xl);
  }
}

@media (min-width: 1024px) {
  :where(.gdrfad-dds) .careers-wizard {
    grid-template-areas:
      "rail card"
      "summary card";
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--gap-gap-lg) var(--gap-gap-xl);
  }

  :where(.gdrfad-dds) .careers-wizard__summary {
    position: sticky;
    inset-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
  }
}


@container gdrfad-dds (min-width: 1024px) {
  .gdrfad-dds-embedded .careers-wizard {
    grid-template-areas:
      "rail card"
      "summary card";
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--gap-gap-lg) var(--gap-gap-xl);
  }

  .gdrfad-dds-embedded .careers-wizard__summary {
    position: sticky;
    inset-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
  }
}

@media (min-width: 1536px) {
  :where(.gdrfad-dds) .careers-wizard {
    grid-template-areas: "rail card summary";
    grid-template-columns: 260px minmax(0, 1fr) 340px;
    grid-template-rows: auto;
  }

  :where(.gdrfad-dds) .careers-wizard__rail {
    position: sticky;
    inset-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
  }
}


@container gdrfad-dds (min-width: 1536px) {
  .gdrfad-dds-embedded .careers-wizard {
    grid-template-areas: "rail card summary";
    grid-template-columns: 260px minmax(0, 1fr) 340px;
    grid-template-rows: auto;
  }

  .gdrfad-dds-embedded .careers-wizard__rail {
    position: sticky;
    inset-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
  }
}

:where(.gdrfad-dds) .careers-wizard__card,
.gdrfad-dds-embedded .careers-wizard__card {
  padding: var(--padding-padding-lg);
  border: 1px solid var(--surface-outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-surface);
  box-shadow: var(--elevation-1);
}

@media (min-width: 768px) {
  :where(.gdrfad-dds) .careers-wizard__card {
    padding: var(--padding-padding-xl);
  }
}


@container gdrfad-dds (min-width: 768px) {
  .gdrfad-dds-embedded .careers-wizard__card {
    padding: var(--padding-padding-xl);
  }
}

:where(.gdrfad-dds) .careers-wizard__card[data-careers-step-enter],
.gdrfad-dds-embedded .careers-wizard__card[data-careers-step-enter] {
  animation: careers-step-enter 180ms var(--ease-out) both;
}

@keyframes careers-step-enter {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}

:where(.gdrfad-dds) :is([dir="rtl"] .careers-wizard__card[data-careers-step-enter]),
.gdrfad-dds-embedded :is([dir="rtl"] .careers-wizard__card[data-careers-step-enter]) {
  animation-name: careers-step-enter-rtl;
}

@keyframes careers-step-enter-rtl {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

:where(.gdrfad-dds) .careers-step__title,
.gdrfad-dds-embedded .careers-step__title {
  margin-block: 0 var(--gap-gap-sm);
  font-size: var(--font-size-h2);
  scroll-margin-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
}

:where(.gdrfad-dds) .careers-step__title:focus,
.gdrfad-dds-embedded .careers-step__title:focus {
  outline: none;
}

:where(.gdrfad-dds) .careers-step__title:focus-visible,
.gdrfad-dds-embedded .careers-step__title:focus-visible {
  outline: 2px solid var(--primary-primary);
  outline-offset: 2px;
}

:where(.gdrfad-dds) .careers-step__intro,
.gdrfad-dds-embedded .careers-step__intro {
  margin-block: 0 var(--gap-gap-lg);
  color: var(--surface-on-surface-variant);
}

:where(.gdrfad-dds) .careers-step__kept,
:where(.gdrfad-dds) .careers-step__note,
.gdrfad-dds-embedded .careers-step__kept,
.gdrfad-dds-embedded .careers-step__note {
  margin-block: var(--gap-gap-lg) 0;
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-small);
}

/* The questions of a step: Webform's page wrapper (no layout of its own) and
 * the groups in it, which FieldLayout marks .careers-fields. One column of
 * full-width questions; two related short ones share a row where the card has
 * room. Which ones is design, set in the form's definition: wrapper class
 * dds-field--half (patches.v9.yml). */
:where(.gdrfad-dds) .careers-wizard__card > [data-webform-key].form-wrapper,
:where(.gdrfad-dds) .careers-wizard__card .careers-fields,
.gdrfad-dds-embedded .careers-wizard__card > [data-webform-key].form-wrapper,
.gdrfad-dds-embedded .careers-wizard__card .careers-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-gap-lg);
}

:where(.gdrfad-dds) .careers-wizard__card > [data-webform-key].form-wrapper > *,
:where(.gdrfad-dds) .careers-wizard__card .careers-fields > *,
.gdrfad-dds-embedded .careers-wizard__card > [data-webform-key].form-wrapper > *,
.gdrfad-dds-embedded .careers-wizard__card .careers-fields > * {
  grid-column: 1 / -1;
}

/* From a 488px portal the card is about 440px inside: two 208px columns. A
 * paired field spans two grid rows as a subgrid, its label and its body
 * (form-element--dds.html.twig), so the two boxes of a pair line up when one
 * label wraps or one box has help or an error under it. */
@media (min-width: 488px) {
  :where(.gdrfad-dds) .careers-wizard__card .careers-fields > .dds-field--half {
    grid-column: auto;
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 6px;
  }
}

@container gdrfad-dds (min-width: 488px) {
  .gdrfad-dds-embedded .careers-wizard__card .careers-fields > .dds-field--half {
    grid-column: auto;
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 6px;
  }
}

/* A half question that follows up the one above it on the end side ("Enter
 * town number" under Town number) starts its row in the second column
 * (dds-field--end, patches.v10.yml). */
@media (min-width: 488px) {
  :where(.gdrfad-dds) .careers-wizard__card .careers-fields > .dds-field--half.dds-field--end {
    grid-column: 2;
  }
}

@container gdrfad-dds (min-width: 488px) {
  .gdrfad-dds-embedded .careers-wizard__card .careers-fields > .dds-field--half.dds-field--end {
    grid-column: 2;
  }
}

/* A question or group that Webform hid on the server stays hidden. When a
 * condition reads only answers from another step (the track, the gender),
 * Webform decides it on the server and hides the element with
 * .js-webform-states-hidden (webform.form.css), which the field and grid rules
 * above are as specific as, and load after: other tracks' questions, and the
 * National Service question for women, showed again. Only until the browser's
 * #states touch the element (jQuery writes its style attribute), so a
 * condition the page itself changes still shows it in its own display. */
:where(.gdrfad-dds) .careers-wizard__card .js-form-item.js-webform-states-hidden:not([style]),
:where(.gdrfad-dds) .careers-wizard__card .js-form-wrapper.js-webform-states-hidden:not([style]),
.gdrfad-dds-embedded .careers-wizard__card .js-form-item.js-webform-states-hidden:not([style]),
.gdrfad-dds-embedded .careers-wizard__card .js-form-wrapper.js-webform-states-hidden:not([style]) {
  display: none;
}

/* Longer answers (National Service status, …): two cards to a row at most,
 * however wide the card, one below two 240px cards. A column is at least
 * half the row, so a third never fits. */
:where(.gdrfad-dds) .careers-wizard__card .dds-choices,
.gdrfad-dds-embedded .careers-wizard__card .dds-choices {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - var(--gap-gap-md)) / 2))), 1fr));
}

/* Short answers (Male / Female, Yes / No) share a row in a narrow card;
 * longer ones keep the rule above. */
:where(.gdrfad-dds) .careers-wizard__card .careers-choices--compact .dds-choices,
.gdrfad-dds-embedded .careers-wizard__card .careers-choices--compact .dds-choices {
 /* grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));*/
}

/* The last question's card never touches the actions' divider. */
:where(.gdrfad-dds) .careers-wizard__card .form-actions:not(.webform-wizard-pages-links),
.gdrfad-dds-embedded .careers-wizard__card .form-actions:not(.webform-wizard-pages-links) {
  margin-block-start: var(--gap-gap-lg);
}

/* Back and Continue (Submit on the last step): one row at every width, Back
 * at the start and the other at the end, both the same size whatever their
 * labels say (Waleed, 2026-10-07). They grow together up to a width that fits
 * the longer label and shrink together on a phone. A Webform button is an
 * <input>, whose label cannot wrap: on a phone "Submit application" keeps its
 * own width and Back takes the rest of the row. */
:where(.gdrfad-dds) .careers-wizard__card .form-actions .dds-button-wrap,
.gdrfad-dds-embedded .careers-wizard__card .form-actions .dds-button-wrap {
  flex: 1 1 0;
  max-inline-size: 9rem;
}

:where(.gdrfad-dds) .careers-wizard__card[data-careers-step="review"] .form-actions .dds-button-wrap,
.gdrfad-dds-embedded .careers-wizard__card[data-careers-step="review"] .form-actions .dds-button-wrap {
  max-inline-size: 13.5rem;
}

:where(.gdrfad-dds) .careers-wizard__card .form-actions .dds-button,
.gdrfad-dds-embedded .careers-wizard__card .form-actions .dds-button {
  inline-size: 100%;
}

/* button.css stacks narrow form actions; the wizard's stay in a row. */
@media (max-width: 767px) {
  :where(.gdrfad-dds) .careers-wizard__card .form-actions:not(.webform-wizard-pages-links) {
    flex-direction: row;
    align-items: center;
    column-gap: var(--gap-gap-md);
  }

  :where(.gdrfad-dds) .careers-wizard__card .form-actions .dds-button-wrap:has(> .webform-button--next),
  :where(.gdrfad-dds) .careers-wizard__card .form-actions .dds-button-wrap:has(> .webform-button--submit) {
    margin-inline-start: auto;
  }
}

@container gdrfad-dds (max-width: 767px) {
  .gdrfad-dds-embedded .careers-wizard__card .form-actions:not(.webform-wizard-pages-links) {
    flex-direction: row;
    align-items: center;
    column-gap: var(--gap-gap-md);
  }

  .gdrfad-dds-embedded .careers-wizard__card .form-actions .dds-button-wrap:has(> .webform-button--next),
  .gdrfad-dds-embedded .careers-wizard__card .form-actions .dds-button-wrap:has(> .webform-button--submit) {
    margin-inline-start: auto;
  }
}

:where(.gdrfad-dds) .careers-wizard [data-gdrfad-error-summary],
.gdrfad-dds-embedded .careers-wizard [data-gdrfad-error-summary] {
  scroll-margin-block-start: calc(var(--site-header-height, 72px) + var(--gap-gap-lg));
}

/* The stepper. */
:where(.gdrfad-dds) .careers-stepper,
.gdrfad-dds-embedded .careers-stepper {
  display: grid;
  gap: var(--gap-gap-sm);
}

:where(.gdrfad-dds) .careers-stepper__status,
.gdrfad-dds-embedded .careers-stepper__status {
  margin: 0;
  font-weight: 700;
}

/* Without room for the rail the named steps hide (below) and the status line
 * names the current step instead: "Step 2 of 7 | About you". The divider is a
 * border, not a character: a dot beside the 7 read as an Arabic zero (٠). */
:where(.gdrfad-dds) .careers-stepper__current,
.gdrfad-dds-embedded .careers-stepper__current {
  margin-inline-start: 0.2em;
  padding-inline-start: 0.6em;
  border-inline-start: 1px solid var(--field-outline);
  font-weight: 400;
}

:where(.gdrfad-dds) .careers-stepper__bar,
.gdrfad-dds-embedded .careers-stepper__bar {
  display: flex;
  gap: 4px;
  block-size: 6px;
}

:where(.gdrfad-dds) .careers-stepper__segment,
.gdrfad-dds-embedded .careers-stepper__segment {
  flex: 1 1 0;
  border-radius: var(--radius-pill);
  background: var(--surface-surface-container-highest);
}

:where(.gdrfad-dds) .careers-stepper__segment--done,
.gdrfad-dds-embedded .careers-stepper__segment--done {
  background: var(--success-success);
}

:where(.gdrfad-dds) .careers-stepper__segment--current,
.gdrfad-dds-embedded .careers-stepper__segment--current {
  background: var(--primary-primary);
}

/* The named steps: only in the rail beside the card (below), one column so
 * the line joining the markers reads in step order. The marker size and the
 * row gap are shared with that line. */
:where(.gdrfad-dds) .careers-stepper__list,
.gdrfad-dds-embedded .careers-stepper__list {
  --careers-stepper-marker: 28px;
  --careers-stepper-gap: var(--gap-gap-xs);
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--careers-stepper-gap);
  margin: var(--gap-gap-sm) 0 0;
  padding: 0;
  list-style: none;
}

/* Room for the rail: the named steps show, and the status line drops the
 * step name they already show. */
@media (min-width: 720px) {
  :where(.gdrfad-dds) .careers-stepper__list {
    display: grid;
  }

  :where(.gdrfad-dds) .careers-stepper__current {
    display: none;
  }
}

@container gdrfad-dds (min-width: 720px) {
  .gdrfad-dds-embedded .careers-stepper__list {
    display: grid;
  }

  .gdrfad-dds-embedded .careers-stepper__current {
    display: none;
  }
}

:where(.gdrfad-dds) .careers-stepper__item,
.gdrfad-dds-embedded .careers-stepper__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-gap-sm);
  min-block-size: 44px;
  color: var(--surface-on-surface-variant);
  font-size: var(--font-size-help);
}

:where(.gdrfad-dds) :is(:lang(ar) .careers-stepper__item),
.gdrfad-dds-embedded :is(:lang(ar) .careers-stepper__item) {
  font-size: 14px;
}

:where(.gdrfad-dds) .careers-stepper__item--current,
.gdrfad-dds-embedded .careers-stepper__item--current {
  color: var(--surface-on-surface);
  font-weight: 700;
}

:where(.gdrfad-dds) .careers-stepper__marker,
.gdrfad-dds-embedded .careers-stepper__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--careers-stepper-marker);
  block-size: var(--careers-stepper-marker);
  border: 2px solid var(--surface-outline-variant);
  border-radius: 50%;
  font-weight: 700;
}

/* The line joining the markers. Each step draws the piece above its marker
 * and the piece below it (through the row gap), so the pieces meet however
 * tall a wrapped title makes a step. A border, not a background, so forced
 * colours keep it. Green from a done step to the next. */
:where(.gdrfad-dds) .careers-stepper__item::before,
:where(.gdrfad-dds) .careers-stepper__item::after,
.gdrfad-dds-embedded .careers-stepper__item::before,
.gdrfad-dds-embedded .careers-stepper__item::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--careers-stepper-marker) / 2 - 1px);
  border-inline-start: 2px solid var(--surface-outline-variant);
}

:where(.gdrfad-dds) .careers-stepper__item::before,
.gdrfad-dds-embedded .careers-stepper__item::before {
  inset-block-start: 0;
  block-size: calc(50% - var(--careers-stepper-marker) / 2);
}

:where(.gdrfad-dds) .careers-stepper__item::after,
.gdrfad-dds-embedded .careers-stepper__item::after {
  inset-block-start: calc(50% + var(--careers-stepper-marker) / 2);
  block-size: calc(50% - var(--careers-stepper-marker) / 2 + var(--careers-stepper-gap));
}

:where(.gdrfad-dds) .careers-stepper__item:first-child::before,
:where(.gdrfad-dds) .careers-stepper__item:last-child::after,
.gdrfad-dds-embedded .careers-stepper__item:first-child::before,
.gdrfad-dds-embedded .careers-stepper__item:last-child::after {
  content: none;
}

:where(.gdrfad-dds) .careers-stepper__item--done::after,
:where(.gdrfad-dds) .careers-stepper__item--done + .careers-stepper__item::before,
.gdrfad-dds-embedded .careers-stepper__item--done::after,
.gdrfad-dds-embedded .careers-stepper__item--done + .careers-stepper__item::before {
  border-color: var(--success-success);
}

:where(.gdrfad-dds) .careers-stepper__item--current .careers-stepper__marker,
.gdrfad-dds-embedded .careers-stepper__item--current .careers-stepper__marker {
  border-color: var(--primary-primary);
  background: var(--primary-primary);
  color: var(--primary-on-primary);
}

:where(.gdrfad-dds) .careers-stepper__item--done .careers-stepper__marker,
.gdrfad-dds-embedded .careers-stepper__item--done .careers-stepper__marker {
  border-color: var(--success-success);
  background: var(--success-success);
  color: var(--success-on-success);
}

:where(.gdrfad-dds) .careers-stepper__marker .dds-icon,
.gdrfad-dds-embedded .careers-stepper__marker .dds-icon {
  inline-size: 16px;
  block-size: 16px;
}

/* Webform's page links on done steps: one tab stop per step. */
:where(.gdrfad-dds) .careers-stepper__item--done .webform-progress-bar__page-title[role="link"],
.gdrfad-dds-embedded .careers-stepper__item--done .webform-progress-bar__page-title[role="link"] {
  color: var(--primary-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

:where(.gdrfad-dds) .careers-stepper__item .webform-progress-bar__page-title:focus-visible,
.gdrfad-dds-embedded .careers-stepper__item .webform-progress-bar__page-title:focus-visible {
  outline: 2px solid var(--primary-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.gdrfad-dds) .careers-wizard__card[data-careers-step-enter],
  .gdrfad-dds-embedded .careers-wizard__card[data-careers-step-enter] {
    animation: none;
  }
}

@media (forced-colors: active) {
  :where(.gdrfad-dds) .careers-stepper__segment--done,
  :where(.gdrfad-dds) .careers-stepper__segment--current,
  .gdrfad-dds-embedded .careers-stepper__segment--done,
  .gdrfad-dds-embedded .careers-stepper__segment--current {
    background: Highlight;
  }
}