/**
 * @file
 * The careers wizard pieces: track cards, terms panels, the searchable
 * list, the email check, callouts and the leave dialog.
 *
 * Module CSS: every token has a fallback, none is redefined, and there is
 * no prefers-color-scheme here (the theme owns light and dark). Each :has()
 * rule stands alone.
 */

/* Step 1: the track cards, a grid of rich cards.
 *
 * Every selector carries .dds-choice / the fieldset element on top of the
 * careers class: the theme's choice.css loads after this file, and at equal
 * weight its two-column .dds-choice grid won (memory note
 * drupal-theme-css-beats-module-css). */
/* Two to a row at most, however wide the card (on a big screen all five
 * fitted in one row and read as a strip), one when the card is narrower than
 * two 280px cards. A column is at least half the row, so a third never fits. */
:where(.gdrfad-dds) fieldset.careers-track-choices .dds-choices,
.gdrfad-dds-embedded fieldset.careers-track-choices .dds-choices {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, calc((100% - var(--gap-gap-md, 12px)) / 2))), 1fr));
  gap: var(--gap-gap-md, 12px);
}

/* The fifth card, alone on its row, takes the whole row. */
:where(.gdrfad-dds) fieldset.careers-track-choices .dds-choice:last-child:nth-child(odd),
.gdrfad-dds-embedded fieldset.careers-track-choices .dds-choice:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice,
.gdrfad-dds-embedded .dds-choice.careers-track-choice {
  grid-template-areas:
    "icon label mark"
    "summary summary summary"
    "chips chips chips";
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  align-content: start;
  align-items: center;
  gap: var(--gap-gap-sm, 8px) var(--gap-gap-md, 12px);
  padding: var(--padding-padding-lg, 16px);
  border-color: var(--surface-outline-variant, #cec4c4);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-surface, #fff);
  transition: border-color var(--motion-fast, 150ms) var(--ease-out, ease-out), box-shadow var(--motion-fast, 150ms) var(--ease-out, ease-out), background-color var(--motion-fast, 150ms) var(--ease-out, ease-out);
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice:hover,
.gdrfad-dds-embedded .dds-choice.careers-track-choice:hover {
  border-color: var(--surface-on-surface-variant, #4b4545);
  box-shadow: var(--elevation-1, 0 1px 3px rgb(0 0 0 / 12%));
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice > .careers-track-choice__icon,
.gdrfad-dds-embedded .dds-choice.careers-track-choice > .careers-track-choice__icon {
  grid-area: icon;
  inline-size: 44px;
  block-size: 44px;
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice > label,
.gdrfad-dds-embedded .dds-choice.careers-track-choice > label {
  grid-area: label;
  font-size: var(--font-size-body, 16px);
  font-weight: 700;
  line-height: var(--line-height-small, 22px);
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice > .careers-track-choice__summary,
.gdrfad-dds-embedded .dds-choice.careers-track-choice > .careers-track-choice__summary {
  grid-area: summary;
  margin: var(--gap-gap-xs, 4px) 0 0;
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice > .careers-track-choice__chips,
.gdrfad-dds-embedded .dds-choice.careers-track-choice > .careers-track-choice__chips {
  display: flex;
  flex-wrap: wrap;
  grid-area: chips;
  gap: var(--gap-gap-xs, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice > .dds-field__error,
.gdrfad-dds-embedded .dds-choice.careers-track-choice > .dds-field__error {
  grid-column: 1 / -1;
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice:has(input:checked),
.gdrfad-dds-embedded .dds-choice.careers-track-choice:has(input:checked) {
  border-color: var(--primary-primary, #9d3f49);
  background: var(--primary-primary-variant, #fbe9ea);
  box-shadow: inset 0 0 0 1px var(--primary-primary, #9d3f49);
}

/* Chips keep their pill on the tinted chosen card. */
:where(.gdrfad-dds) .dds-choice.careers-track-choice:has(input:checked) .dds-chip,
.gdrfad-dds-embedded .dds-choice.careers-track-choice:has(input:checked) .dds-chip {
  background: var(--surface-surface, #fff);
}

:where(.gdrfad-dds) .careers-summary__track[hidden],
.gdrfad-dds-embedded .careers-summary__track[hidden] {
  display: none;
}

:where(.gdrfad-dds) .dds-choice.careers-track-choice:has(:focus-visible),
.gdrfad-dds-embedded .dds-choice.careers-track-choice:has(:focus-visible) {
  outline: 2px solid var(--primary-primary, #9d3f49);
  outline-offset: 2px;
}

/* The summary panel beside the step ("Your application"). */
:where(.gdrfad-dds) .careers-summary,
.gdrfad-dds-embedded .careers-summary {
  display: grid;
  gap: var(--gap-gap-md, 12px);
  padding: var(--padding-padding-lg, 16px);
  border: 1px solid var(--surface-outline-variant, #cec4c4);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-surface, #fff);
}

:where(.gdrfad-dds) .careers-summary__title,
.gdrfad-dds-embedded .careers-summary__title {
  margin: 0;
  font-size: var(--font-size-h6, 18px);
  line-height: var(--line-height-h6, 26px);
}

:where(.gdrfad-dds) .careers-summary__track,
.gdrfad-dds-embedded .careers-summary__track {
  display: flex;
  align-items: center;
  gap: var(--gap-gap-md, 12px);
  padding-block-end: var(--gap-gap-md, 12px);
  border-block-end: 1px solid var(--surface-outline-variant, #cec4c4);
}

:where(.gdrfad-dds) .careers-summary__track-icon.dds-tone-tile,
.gdrfad-dds-embedded .careers-summary__track-icon.dds-tone-tile {
  inline-size: 40px;
  block-size: 40px;
}

:where(.gdrfad-dds) .careers-summary__track-text,
.gdrfad-dds-embedded .careers-summary__track-text {
  display: grid;
  margin: 0;
}

:where(.gdrfad-dds) .careers-summary__label,
.gdrfad-dds-embedded .careers-summary__label {
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-small, 14px);
}

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

:where(.gdrfad-dds) .careers-summary__value--empty,
.gdrfad-dds-embedded .careers-summary__value--empty {
  color: var(--surface-on-surface-variant, #4b4545);
  font-weight: 400;
}

:where(.gdrfad-dds) .careers-summary__heading,
.gdrfad-dds-embedded .careers-summary__heading {
  margin: 0;
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

:where(.gdrfad-dds) .careers-summary__list,
.gdrfad-dds-embedded .careers-summary__list {
  display: grid;
  gap: var(--gap-gap-sm, 8px);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.gdrfad-dds) .careers-summary__item,
.gdrfad-dds-embedded .careers-summary__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-gap-sm, 8px);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

:where(.gdrfad-dds) .careers-summary__icon,
.gdrfad-dds-embedded .careers-summary__icon {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  color: var(--primary-primary, #9d3f49);
}

:where(.gdrfad-dds) .careers-summary__ready-icon.dds-tone-tile,
.gdrfad-dds-embedded .careers-summary__ready-icon.dds-tone-tile {
  inline-size: 32px;
  block-size: 32px;
}

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

:where(.gdrfad-dds) .careers-summary__name,
.gdrfad-dds-embedded .careers-summary__name {
  display: grid;
  flex: 1;
  min-inline-size: 0;
}

:where(.gdrfad-dds) .careers-summary__condition,
.gdrfad-dds-embedded .careers-summary__condition {
  color: var(--surface-on-surface-variant, #4b4545);
  font-size: var(--font-size-body, 16px);
  line-height: var(--line-height-body, 24px);
}

:where(.gdrfad-dds) .careers-summary__req,
.gdrfad-dds-embedded .careers-summary__req {
  flex: none;
  font-size: var(--font-size-help, 12px);
  font-weight: 700;
  line-height: var(--line-height-small, 22px);
}

:where(.gdrfad-dds) .careers-summary__req--required,
.gdrfad-dds-embedded .careers-summary__req--required {
  color: var(--primary-primary, #9d3f49);
}

:where(.gdrfad-dds) .careers-summary__req--optional,
.gdrfad-dds-embedded .careers-summary__req--optional {
  color: var(--surface-on-surface-variant, #4b4545);
}

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

/* Beside the card, a tall list scrolls inside the panel, never off-screen. */
@media (min-width: 1024px) {
  :where(.gdrfad-dds) .careers-summary {
    max-block-size: calc(100dvh - var(--site-header-height, 72px) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@container gdrfad-dds (min-width: 1024px) {
  .gdrfad-dds-embedded .careers-summary {
    max-block-size: calc(100dvh - var(--site-header-height, 72px) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* The terms panel of the chosen track, under the card grid. */
:where(.gdrfad-dds) .careers-terms-panel,
.gdrfad-dds-embedded .careers-terms-panel {
  padding: var(--padding-padding-lg, 16px) var(--padding-padding-xl, 24px);
  border: 1px solid var(--surface-outline-variant, #cec4c4);
  border-inline-start: 4px solid var(--primary-primary, #9d3f49);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-surface, #fff);
}

/* The acceptance box reads as a sentence, not a heading. */
:where(.gdrfad-dds) .dds-choice.careers-agree > label,
.gdrfad-dds-embedded .dds-choice.careers-agree > label {
  font-weight: 400;
}

/* Callouts inside the step card. */
:where(.gdrfad-dds) .careers-wizard .careers-callout,
.gdrfad-dds-embedded .careers-wizard .careers-callout {
  margin-block-end: var(--gap-gap-lg, 24px);
}

:where(.gdrfad-dds) .careers-idle[hidden],
.gdrfad-dds-embedded .careers-idle[hidden] {
  display: none;
}

:where(.gdrfad-dds) .careers-idle:not([hidden]),
.gdrfad-dds-embedded .careers-idle:not([hidden]) {
  display: grid;
  gap: var(--gap-gap-sm, 8px);
  margin-block-end: var(--gap-gap-lg, 24px);
}

/* "Save and return to review" leads; Continue steps back. */
:where(.gdrfad-dds) .careers-continue--secondary,
.gdrfad-dds-embedded .careers-continue--secondary {
  order: 2;
}

/* The searchable list. */
:where(.gdrfad-dds) .careers-ss,
.gdrfad-dds-embedded .careers-ss {
  position: relative;
}

:where(.gdrfad-dds) .careers-ss__control,
.gdrfad-dds-embedded .careers-ss__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-gap-sm, 8px);
  inline-size: 100%;
  min-block-size: 56px;
  padding-inline: var(--padding-padding-lg, 16px);
  border: 1px solid var(--field-outline, #8a8a8a);
  border-radius: var(--radius-xs, 4px);
  background: var(--surface-surface, #fff);
  color: var(--surface-on-surface, #1f1f1f);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

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

:where(.gdrfad-dds) .careers-ss__label,
.gdrfad-dds-embedded .careers-ss__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.gdrfad-dds) .careers-ss__label--empty,
.gdrfad-dds-embedded .careers-ss__label--empty {
  color: var(--surface-on-surface-variant, #545454);
}

:where(.gdrfad-dds) .careers-ss__icon,
.gdrfad-dds-embedded .careers-ss__icon {
  display: inline-flex;
  flex: none;
}

:where(.gdrfad-dds) .careers-ss--error .careers-ss__control,
.gdrfad-dds-embedded .careers-ss--error .careers-ss__control {
  border: 2px solid var(--error-error, #b3261e);
}

:where(.gdrfad-dds) .careers-ss:has(select:disabled) .careers-ss__control,
.gdrfad-dds-embedded .careers-ss:has(select:disabled) .careers-ss__control {
  opacity: 0.6;
  cursor: not-allowed;
}

:where(.gdrfad-dds) .careers-ss__native,
.gdrfad-dds-embedded .careers-ss__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The email check, tucked under the email field (the step's 24px gap less
 * 16px). Before a code is sent it is a hint and a button, no box. */
:where(.gdrfad-dds) .careers-email,
.gdrfad-dds-embedded .careers-email {
  display: grid;
  gap: var(--gap-gap-sm, 8px);
  margin-block-start: calc(var(--gap-gap-sm, 8px) - var(--gap-gap-lg, 24px));
  padding: var(--padding-padding-md, 12px) var(--padding-padding-lg, 16px);
  border: 1px solid var(--surface-outline-variant, #d6d6d6);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-surface-container-low, #f7f7f7);
}

:where(.gdrfad-dds) .careers-email--unverified,
.gdrfad-dds-embedded .careers-email--unverified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-gap-sm, 8px) var(--gap-gap-md, 12px);
  padding: 0;
  border: 0;
  background: none;
}

:where(.gdrfad-dds) .careers-email p,
.gdrfad-dds-embedded .careers-email p {
  margin: 0;
}

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

:where(.gdrfad-dds) .careers-email__hint,
.gdrfad-dds-embedded .careers-email__hint {
  color: var(--surface-on-surface-variant, #545454);
  font-size: var(--font-size-small, 14px);
}

:where(.gdrfad-dds) .careers-email__code,
.gdrfad-dds-embedded .careers-email__code {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--gap-gap-sm, 8px);
}

:where(.gdrfad-dds) .careers-email__code .form-item,
.gdrfad-dds-embedded .careers-email__code .form-item {
  flex: 1 1 180px;
  margin: 0;
}

:where(.gdrfad-dds) .careers-email__verified,
.gdrfad-dds-embedded .careers-email__verified {
  justify-self: start;
}

:where(.gdrfad-dds) .careers-email__verified[hidden],
:where(.gdrfad-dds) .careers-email__changed[hidden],
:where(.gdrfad-dds) .careers-email [hidden],
.gdrfad-dds-embedded .careers-email__verified[hidden],
.gdrfad-dds-embedded .careers-email__changed[hidden],
.gdrfad-dds-embedded .careers-email [hidden] {
  display: none;
}

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

/* The language-switch dialog. */
:where(.gdrfad-dds) .careers-leave-dialog,
.gdrfad-dds-embedded .careers-leave-dialog {
  max-inline-size: min(480px, calc(100vw - 32px));
}

:where(.gdrfad-dds) .careers-leave-dialog__header,
.gdrfad-dds-embedded .careers-leave-dialog__header {
  justify-content: flex-start;
  padding-block-start: var(--padding-padding-xl, 24px);
}

:where(.gdrfad-dds) .careers-leave-dialog__icon.dds-tone-tile,
.gdrfad-dds-embedded .careers-leave-dialog__icon.dds-tone-tile {
  inline-size: 40px;
  block-size: 40px;
}

:where(.gdrfad-dds) .careers-leave-dialog__title,
.gdrfad-dds-embedded .careers-leave-dialog__title {
  margin: 0;
}

:where(.gdrfad-dds) .careers-leave-dialog__body,
.gdrfad-dds-embedded .careers-leave-dialog__body {
  margin: 0;
  color: var(--surface-on-surface-variant, #4b4545);
}

@media (forced-colors: active) {
  :where(.gdrfad-dds) .careers-track-choice:has(input:checked),
  .gdrfad-dds-embedded .careers-track-choice:has(input:checked) {
    outline: 2px solid Highlight;
  }
}