/*
 * Gigs styles for the Ashby application form embed (careers pages).
 * Based on Ashby's template: https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 * Ashby serves an uploaded copy: re-upload in Ashby (Job board > Theme > Custom CSS) after changes.
 *
 * Constraints that shape the selectors below:
 * - Ashby's validator rejects parent selectors (:has), so state and position come from
 *   sibling selectors (+, :last-child, :empty) and attributes ([data-checked], [aria-*]).
 * - Ashby's own rules often outrank a single class, hence the .ashby-application-form-container
 *   (or popup class) prefix on many rules.
 * - Autocomplete popups render outside the form container, so they are scoped by their own class.
 */

@font-face {
  font-family: "Gigs Inter";
  src: url("https://gigs.com/fonts/InterVariable-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Gigs tokens (tailwind.config.js) and Ashby's layout variables */
:root {
  --gigs-ink: #122027; /* gray-900 */
  --gigs-ink-hover: #414c52; /* gray-700 */
  --gigs-muted: #565f63; /* gray-600 */
  --gigs-border: #d5d9db; /* gray-300 */
  --gigs-control-border: rgba(18, 32, 39, 0.6); /* border-gray-900/60, as in FormFields/Input */
  --gigs-hover: #f3f9f7; /* sage-75 */
  --gigs-sage-light: #e8f0ed; /* sage-150 */
  --gigs-sage-selected: #e0eae7; /* sage-200 */
  --gigs-sage: #34454b; /* sage-700 */
  --gigs-sage-dark: #1b2c30; /* sage-800 */
  --gigs-error: #a32d2d;
  --gigs-white: #fff;

  --colorAppBackground: transparent;
  --widthMaxContent: 800px;
  --widthMaxJobBoard: 800px;
  --borderRadiusContainer: 8px;
  --borderRadiusControl: 6px;
  --borderRadiusButton: 8px;
  --fontFamily: "Gigs Inter", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------------------------- */

/* Ashby puts its theme colors inline on <html>, which beats :root; redeclare them below it.
 * Side padding keeps focus outlines (3px + 2px offset) from being clipped at the iframe edges. */
body {
  --colorPrimary900: var(--gigs-ink);
  --colorPrimary600: var(--gigs-ink);
  padding-right: 6px;
  padding-left: 6px;
}

/* No side padding (Ashby: 16px), so fields line up with the autofill box and submit button. */
.ashby-application-form-container {
  --colorPrimary900: var(--gigs-ink);
  --colorPrimary600: var(--gigs-ink);
  padding-right: 0;
  padding-left: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gigs-ink);
  color-scheme: light;
  font-family: var(--fontFamily);
  font-size: 16px;
  line-height: 1.5;
}

.ashby-application-form-autofill-pane {
  --colorPrimary900: var(--gigs-ink);
  --colorPrimary600: var(--gigs-ink);
}

.ashby-application-form-container,
.ashby-application-form-container * {
  box-sizing: border-box;
}

.ashby-application-form-container a {
  color: var(--gigs-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-application-form-container a:hover {
  color: var(--gigs-sage);
}

/* Space between questions (Ashby: 24px); radio and checkbox groups are fieldsets carrying it themselves. */
.ashby-application-form-container .ashby-application-form-field-entry,
.ashby-application-form-container .ashby-application-form-input-radio-group,
.ashby-application-form-container .ashby-application-form-input-checkbox-group {
  margin-bottom: 32px;
}

/* ---------------------------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-question-title {
  color: var(--gigs-ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* Questions without a title (e.g. data consent) render an empty label. */
.ashby-application-form-question-title:empty {
  display: none;
}

.ashby-application-form-section-header-title,
.ashby-application-form-autofill-input-title {
  color: var(--gigs-ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ashby-application-form-autofill-input-icon,
.ashby-application-form-input-dropdown-icon {
  color: var(--gigs-ink);
}

.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description,
.ashby-application-form-input-file-dropzone-instructions,
.ashby-application-form-autofill-input-description {
  color: var(--gigs-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Education history: each entry's "Education" label is a muted subheading, its field labels 14px
 * (School keeps the regular question size). */
.ashby-application-form-input-education-entry-header > span {
  color: var(--gigs-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.ashby-application-form-container .ashby-application-form-input-education-entry .ashby-application-form-question-title {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.ashby-application-form-container .ashby-application-form-input-education-entry .ashby-application-form-question-title[for$="-school"] {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------------------------
 * Text inputs
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-date,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-dropdown-select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--gigs-control-border);
  border-radius: var(--borderRadiusControl);
  background: var(--gigs-white);
  color: var(--gigs-ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.5; /* Ashby's wrappers have line-height 0, which pins textarea text to the top */
}

.ashby-application-form-input-textarea {
  min-height: 120px;
  resize: vertical;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder,
.ashby-application-form-input-date::placeholder,
.ashby-application-form-input-autocomplete::placeholder {
  color: var(--gigs-muted);
  opacity: 1;
}

/* Focus ring is inset: fields touch the iframe edges. */
.ashby-application-form-container .ashby-application-form-input-text:focus-within,
.ashby-application-form-container .ashby-application-form-input-textarea:focus-within,
.ashby-application-form-container .ashby-application-form-input-date:focus-within,
.ashby-application-form-container .ashby-application-form-input-autocomplete:focus-within,
.ashby-application-form-container .ashby-application-form-input-dropdown-select:focus-within {
  border-color: var(--gigs-ink);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--gigs-ink);
}

.ashby-application-form-container .ashby-application-form-input-text[aria-invalid="true"],
.ashby-application-form-container .ashby-application-form-input-textarea[aria-invalid="true"],
.ashby-application-form-container .ashby-application-form-input-date[aria-invalid="true"],
.ashby-application-form-container .ashby-application-form-input-autocomplete[aria-invalid="true"],
.ashby-application-form-container .ashby-application-form-input-dropdown-select[aria-invalid="true"] {
  border-color: var(--gigs-error);
}

.ashby-application-form-container .ashby-application-form-input-text[aria-invalid="true"]:focus-within,
.ashby-application-form-container .ashby-application-form-input-textarea[aria-invalid="true"]:focus-within,
.ashby-application-form-container .ashby-application-form-input-date[aria-invalid="true"]:focus-within,
.ashby-application-form-container .ashby-application-form-input-autocomplete[aria-invalid="true"]:focus-within,
.ashby-application-form-container .ashby-application-form-input-dropdown-select[aria-invalid="true"]:focus-within {
  box-shadow: inset 0 0 0 1px var(--gigs-error);
}

/* ---------------------------------------------------------------------------------------------
 * Radio and checkbox groups: options merged into one block with light dividers.
 * Options are always the group's last children: each drops its bottom border except the last,
 * and options after the first get a light top divider instead.
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-input-radio-group,
.ashby-application-form-input-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ashby-application-form-container .ashby-application-form-input-radio-group > .ashby-application-form-question-description,
.ashby-application-form-container .ashby-application-form-input-checkbox-group > .ashby-application-form-question-description {
  margin: -4px 0 12px;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option {
  position: relative;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0 0 0 14px;
  border: 2px solid var(--gigs-control-border);
  border-bottom-width: 0;
  border-radius: var(--borderRadiusControl) var(--borderRadiusControl) 0 0;
  background: var(--gigs-white);
  box-shadow: none;
  color: var(--gigs-ink);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option + .ashby-application-form-input-radio-group-option,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option + .ashby-application-form-input-checkbox-group-option {
  border-top: 1px solid var(--gigs-border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option:last-child,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option:last-child {
  border-bottom-width: 2px;
  border-bottom-left-radius: var(--borderRadiusControl);
  border-bottom-right-radius: var(--borderRadiusControl);
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option:hover,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option:hover {
  background: var(--gigs-hover);
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option[data-checked],
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option[data-checked] {
  background: var(--gigs-sage-selected);
}

/* The label fills the row so the whole option is clickable. */
.ashby-application-form-container .ashby-application-form-input-radio-group-option-label,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-label {
  display: flex;
  flex: 1;
  align-self: stretch;
  align-items: center;
  margin: 0;
  padding: 11px 14px 11px 12px;
  color: var(--gigs-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

/* Radio and checkbox marks. The dot or check icon and the invisible native input share one
 * centered grid cell. "Still Student?" in education entries is the only span there with
 * data-disabled, and gets data-checked when ticked. */
.ashby-application-form-container .ashby-application-form-input-radio-group-option > span:first-child,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-disabled] {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--gigs-control-border);
  border-radius: 4px;
  background: var(--gigs-white);
  box-shadow: none;
  color: var(--gigs-white);
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option > span:first-child {
  border-radius: 50%;
  color: inherit;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option > span:first-child > *,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox > *,
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-disabled] > * {
  grid-area: 1 / 1;
  margin: 0;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option-radio,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox input,
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-disabled] > input {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option > span:first-child > span {
  width: 10px;
  height: 10px;
  background: transparent;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option[data-checked] > span:first-child {
  border-color: var(--gigs-ink);
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option[data-checked] > span:first-child > span,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option[data-checked] .ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox[data-checked],
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-checked] {
  border-color: var(--gigs-ink);
  background: var(--gigs-ink);
}

/* White checkmark (Ashby fills it with the theme color, ink here). */
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option[data-checked] .ashby-application-form-input-checkbox-group-option-checkbox svg path,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox[data-checked] svg path,
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-checked] svg path {
  fill: var(--gigs-white);
}

/* The native input is invisible, so the mark that wraps it carries the focus ring. */
.ashby-application-form-container .ashby-application-form-input-radio-group-option > span:first-child:focus-within,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option-checkbox:focus-within,
.ashby-application-form-container .ashby-application-form-input-education-entry span[data-disabled]:focus-within {
  outline: 2px solid var(--gigs-ink);
  outline-offset: 2px;
}

.ashby-application-form-container .ashby-application-form-input-radio-group-option *:focus-visible,
.ashby-application-form-container .ashby-application-form-input-checkbox-group-option *:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Consent questions (no title, text in the description, one checkbox): description and option
 * become one white bordered block. Titled checkbox questions are not affected. */
.ashby-application-form-container .ashby-application-form-question-title:empty + .ashby-application-form-question-description {
  margin: 0;
  padding: 14px 14px 4px;
  border: 2px solid var(--gigs-control-border);
  border-bottom: 0;
  border-radius: var(--borderRadiusControl) var(--borderRadiusControl) 0 0;
  background: var(--gigs-white);
  color: var(--gigs-ink);
  font-size: 16px;
}

.ashby-application-form-container .ashby-application-form-question-title:empty + .ashby-application-form-question-description p {
  margin: 0 0 4px;
}

.ashby-application-form-container .ashby-application-form-question-title:empty + .ashby-application-form-question-description + .ashby-application-form-input-checkbox-group-option {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ashby-application-form-container .ashby-application-form-question-title:empty + .ashby-application-form-question-description + .ashby-application-form-input-checkbox-group-option[data-checked] {
  background: var(--gigs-white);
}

/* ---------------------------------------------------------------------------------------------
 * Yes / No: a compact two-option segmented control
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-input-yesno {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  gap: 0;
}

.ashby-application-form-container .ashby-application-form-input-yesno-option {
  position: relative;
  display: flex;
  flex: none;
  min-width: 96px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid var(--gigs-control-border);
  border-radius: var(--borderRadiusControl) 0 0 var(--borderRadiusControl);
  background: var(--gigs-white);
  box-shadow: none;
  color: var(--gigs-ink);
  font: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.ashby-application-form-container .ashby-application-form-input-yesno-option[data-option="no"] {
  margin-left: -2px;
  border-radius: 0 var(--borderRadiusControl) var(--borderRadiusControl) 0;
}

.ashby-application-form-container .ashby-application-form-input-yesno-option:hover {
  background: var(--gigs-hover);
}

.ashby-application-form-container .ashby-application-form-input-yesno-option[aria-pressed="true"] {
  z-index: 1;
  border-color: var(--gigs-ink);
  background: var(--gigs-ink);
  color: var(--gigs-white);
}

.ashby-application-form-container .ashby-application-form-input-yesno-option:focus-visible {
  z-index: 2;
}

/* ---------------------------------------------------------------------------------------------
 * Disabled
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-input-checkbox-group-option[data-disabled],
.ashby-application-form-input-radio-group-option[data-disabled],
.ashby-application-form-input-yesno[data-disabled] .ashby-application-form-input-yesno-option,
.ashby-application-form-input-checkbox-group-option[disabled],
.ashby-application-form-input-radio-group-option[disabled],
.ashby-application-form-input-yesno-option[disabled],
.ashby-application-form-input-text[disabled],
.ashby-application-form-input-textarea[disabled],
.ashby-application-form-input-date[disabled],
.ashby-application-form-input-autocomplete[disabled],
.ashby-application-form-input-dropdown-select[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------------------------
 * Popups (autocomplete, date picker): same 2px border as the inputs
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  border: 2px solid var(--gigs-control-border);
  border-radius: var(--borderRadiusControl);
  background: var(--gigs-white);
  box-shadow: 0 4px 16px rgba(18, 32, 39, 0.08);
  color: var(--gigs-ink);
  font-family: var(--fontFamily);
}

/* Ashby's floating container overlaps the input; leave a small gap below the field. */
.ashby-application-form-input-autocomplete-popup {
  margin-top: 10px;
  padding: 4px;
}

.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result {
  padding: 10px 12px;
  border-radius: 4px;
  background: transparent;
  color: var(--gigs-ink);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result[aria-selected="true"],
.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result:hover {
  background: var(--gigs-hover);
  color: var(--gigs-ink);
}

/* School results: name, country pill and domain have no Ashby classes; targeted by structure.
 * Ashby lightens the domain on the highlighted row, so it is pinned there too. */
.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result span {
  font-size: 16px;
}

.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result > div > div > span + span {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gigs-sage-light);
  color: var(--gigs-sage-dark);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result > div > span,
.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] > div > span,
.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result:hover > div > span {
  color: var(--gigs-muted);
  font-size: 14px;
}

/* ---------------------------------------------------------------------------------------------
 * Autofill pane, file inputs, privacy notice
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-base-layer {
  border-color: var(--gigs-border);
  border-radius: var(--borderRadiusContainer);
  background-color: var(--gigs-white);
  box-shadow: none;
  color: var(--gigs-ink);
}

/* Ashby's dashed drop area stays; its border color and background are left alone so Ashby's
 * dragging state (ink border, tinted background) still shows. Below 768px Ashby hides the border
 * and drag hint, so the padding goes too. */
.ashby-application-form-container .ashby-application-form-input-file {
  padding: 24px;
  border-radius: var(--borderRadiusControl);
}

@media (max-width: 767px) {
  .ashby-application-form-container .ashby-application-form-input-file {
    padding: 0;
  }
}

.ashby-application-form-container .ashby-application-form-input-file-dropzone {
  min-height: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: var(--borderRadiusContainer);
  background: transparent;
}

/* Uploaded file: one field like a text input (icon, truncated name, delete button inside).
 * In the drop area the Replace button sits below it; below 768px, beside it. */
.ashby-application-form-container .ashby-application-form-input-file-item {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  margin: 0 0 12px;
  padding: 0;
  border: 2px solid var(--gigs-control-border);
  border-radius: var(--borderRadiusControl);
  background: var(--gigs-white);
}

@media (max-width: 767px) {
  .ashby-application-form-container .ashby-application-form-input-file-item {
    margin: 0 8px 0 0;
  }
}

.ashby-application-form-container .ashby-application-form-input-file-item-name {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gigs-ink);
  font-size: 16px;
  font-weight: 500;
}

.ashby-application-form-container .ashby-application-form-input-file-item-name svg {
  flex: none;
  margin: 0;
}

.ashby-application-form-container .ashby-application-form-input-file-item-name span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ashby-application-form-container .ashby-application-form-input-file-item .ashby-application-form-input-file-item-delete {
  flex: none;
  margin-right: 4px;
}

/* Recruiting privacy notice above the submit button: no Ashby class, but it always follows the
 * survey container. Flattened from a shadowed card into plain text on the sage panel. */
.ashby-survey-form-container + div {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--gigs-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.ashby-survey-form-container + div a {
  color: var(--gigs-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-survey-form-container + div a:hover {
  color: var(--gigs-ink);
}

/* ---------------------------------------------------------------------------------------------
 * Buttons. Primary matches .button-cta-s, secondary .button-ghost-s (src/assets/css/files/legacy.css).
 * ------------------------------------------------------------------------------------------- */

/* Secondary (ghost) */
.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-base-layer button,
.ashby-application-form-container .ashby-application-form-input-education-add,
.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--gigs-muted);
  border-radius: var(--borderRadiusButton);
  background: transparent;
  box-shadow: none;
  color: var(--gigs-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.25;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-base-layer button:hover,
.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-base-layer button:active,
.ashby-application-form-container .ashby-application-form-input-education-add:hover,
.ashby-application-form-container .ashby-application-form-input-education-add:active,
.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button:hover,
.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button:active {
  border-color: var(--gigs-ink);
  background: var(--gigs-ink);
  box-shadow: none;
  color: var(--gigs-white);
}

/* Date picker month arrows: smaller, and without Ashby's -12px pull on the next arrow, which
 * pushed it past the popover edge. */
.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button {
  min-height: 36px;
  padding: 6px 10px;
}

.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button[data-direction="previous"] {
  margin: 0;
}

.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button[data-direction="next"] {
  margin: 0 0 0 8px;
}

/* File upload: the text inputs' border, since it sits where the answer goes. The dropzone class
 * outranks Ashby's mobile rule that stretches the button to full width. */
.ashby-application-form-container .ashby-application-form-input-file-dropzone .ashby-application-form-input-file-dropzone-upload {
  display: inline-flex;
  flex: none;
  width: auto;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--gigs-control-border);
  border-radius: var(--borderRadiusControl);
  background: var(--gigs-white);
  box-shadow: none;
  color: var(--gigs-ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  line-height: inherit;
  transition: background-color 120ms ease;
}

.ashby-application-form-container .ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-container .ashby-application-form-input-file-dropzone-upload:active {
  background: var(--gigs-hover);
  box-shadow: none;
  color: var(--gigs-ink);
}

/* Quiet text buttons: remove an uploaded file or an education entry. The education delete needs
 * the header class to outrank Ashby's hover. */
.ashby-application-form-container .ashby-application-form-input-file-item-delete,
.ashby-application-form-container .ashby-application-form-input-education-entry-delete {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--borderRadiusButton);
  background: transparent;
  box-shadow: none;
  color: var(--gigs-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  transition: background-color 120ms ease, color 120ms ease;
}

.ashby-application-form-container .ashby-application-form-input-file-item-delete:hover,
.ashby-application-form-container .ashby-application-form-input-education-entry-header .ashby-application-form-input-education-entry-delete:hover,
.ashby-application-form-container .ashby-application-form-input-education-entry-header .ashby-application-form-input-education-entry-delete:active {
  background: rgba(163, 45, 45, 0.08);
  box-shadow: none;
  color: var(--gigs-error);
}

/* Primary (CTA). The submit button sits outside the form container; :root adds specificity. */
:root .ashby-application-form-submit-button {
  min-height: 48px;
  padding: 10px 20px;
  border: 1px solid var(--gigs-ink);
  border-radius: var(--borderRadiusButton);
  background: var(--gigs-ink);
  box-shadow: none;
  color: var(--gigs-white);
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  transition: background-color 120ms ease, border-color 120ms ease;
}

:root .ashby-application-form-submit-button:hover,
:root .ashby-application-form-submit-button:active {
  border-color: var(--gigs-ink-hover);
  background: var(--gigs-ink-hover);
  box-shadow: none;
}

:root .ashby-application-form-submit-button[disabled] {
  border-color: var(--gigs-ink);
  background: var(--gigs-ink);
  cursor: not-allowed;
  opacity: 0.55;
}

/* Icons inside buttons follow the text color. */
.ashby-application-form-autofill-input-base-layer button svg path,
.ashby-application-form-container button svg path {
  fill: currentColor;
}

/* Keyboard focus */
.ashby-application-form-container .ashby-application-form-input-file-dropzone-upload:focus-visible,
:root .ashby-application-form-submit-button:focus-visible,
.ashby-application-form-container .ashby-application-form-input-file-item-delete:focus-visible,
.ashby-application-form-container .ashby-application-form-input-education-add:focus-visible,
.ashby-application-form-container .ashby-application-form-input-education-entry-delete:focus-visible,
.ashby-application-form-input-date-popup .ashby-application-form-input-date-popup-header-button:focus-visible,
.ashby-application-form-input-autocomplete-popup .ashby-application-form-input-autocomplete-popup-result:focus-visible,
.ashby-application-form-container .ashby-application-form-input-yesno-option:focus-visible,
.ashby-application-form-autofill-input-root *:focus-visible {
  outline: 3px solid var(--gigs-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------------------------
 * Status messages
 * ------------------------------------------------------------------------------------------- */

.ashby-application-form-failure-container {
  color: #8b2525;
}

.ashby-application-form-success-container {
  color: var(--gigs-sage-dark);
}

/* Autofill result notice (an h2 title and a p message): a soft tinted box with ink text, instead of
 * Ashby's saturated fill. Sage when autofill worked, light red when it failed. */
.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-form-alert {
  padding: 12px 14px;
  border: 0;
  border-radius: var(--borderRadiusControl);
  background: var(--gigs-sage-light);
  box-shadow: none;
  color: var(--gigs-ink);
}

.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  background: #fbeceb;
}

.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-form-alert > h2 {
  margin: 0 0 2px;
  color: var(--gigs-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-form-alert[data-highlight="negative"] > h2 {
  color: #8b2525;
}

.ashby-application-form-autofill-input-root .ashby-application-form-autofill-input-form-alert > p {
  margin: 0;
  color: var(--gigs-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* "Your form needs corrections" block at the top of the form after a failed submit. It has no Ashby
 * class; it is the container's direct child with role="alert". Same soft red as a failed autofill,
 * with the missing fields as an ink list and their names as quiet links that jump to the field. */
.ashby-application-form-container > [role="alert"][data-highlight="negative"] {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--borderRadiusControl);
  background: #fbeceb;
  box-shadow: none;
  color: var(--gigs-ink);
  line-height: 1.5;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] h2 {
  margin: 0 0 6px;
  color: #8b2525;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] li {
  margin: 2px 0 0;
  color: var(--gigs-ink);
  font-size: 14px;
  line-height: 1.5;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] p {
  margin: 0;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gigs-ink);
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ashby-application-form-container > [role="alert"][data-highlight="negative"] button:hover {
  color: #8b2525;
}