/*
 * Verda — Ashby job board custom CSS
 *
 * Upload this standalone file in Ashby:
 * Admin > Job Boards > Theme (Job Board) > Job board options > Custom CSS.
 * Re-upload after editing; this file is not imported by the website.
 *
 * Use Ashby's supported classes, not its generated/hashed class names:
 * https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 *
 * Keep further Ashby form customizations in this file.
 * Ashby's upload validator rejects grouped :is() selectors and mask borders.
 * Start each selector with a documented class (or :root) and keep state rules
 * explicit, even when that means repeating the class list.
 */

/* Same normal-style variable fonts as astro.config.ts. Deploy these public
 * files and their CORS headers before uploading this CSS to Ashby.
 * Keep fallback text visible while fonts load or if a request fails.
 */
@font-face {
  font-family: 'Source Sans 3';
  src: url('https://verda.com/fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: 'Source Code Pro';
  src: url('https://verda.com/fonts/source-code-pro-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

/* 1. Remove decorative shadows from form panels, including the consent area.
 * Borders, spacing, colors, and the controls inside these panels stay intact.
 */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-root,
.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-application-form-section-header,
.ashby-application-form-input-checkbox-group,
.ashby-survey-form-container {
  box-shadow: none !important;
}

/* 2. Remove upload/submit button shadows, including hover and disabled states.
 * !important overrides Ashby's more specific state rules. Its keyboard-focus
 * outline is separate from box-shadow. Button focus is styled below.
 * Checkbox, popup, and third-party widget shadows are not reset.
 */
.ashby-application-form-autofill-input-root button,
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-yesno-option,
.ashby-application-form-submit-button {
  box-shadow: none !important;
}

/* 3. Control tokens copied from the website's tokens.css,
 * semantic-tokens.css, and Storybook components. This iframe cannot inherit
 * the website's CSS variables. Ashby's documented --fontFamily token sets
 * the board's default font; outlined and contained buttons use the site's mono.
 */
:root {
  --fontFamily: 'Source Sans 3', system-ui, sans-serif;
  --verda-font-mono: 'Source Code Pro', ui-monospace, monospace;
  --verda-accent: #195cc7;
  --verda-control-background: #fcfcfc;
  --verda-control-text: #020c22;
  --verda-control-border: #c3c7ce;
  --verda-control-focus: #335ca0;
  --verda-control-error: #b90044;
  --verda-focus-ring: #84b2fd;
}

/* Ashby supplies the asterisk via ::after only on required questions.
 * Change its color without adding markers to optional questions or changing
 * validation/error colors elsewhere in the form.
 */
.ashby-application-form-question-title::after {
  color: var(--verda-accent) !important;
}

/* 4. Shared button geometry from src/components/button/button.module.css.
 * Uploads and Yes/No choices use Outlined. The submit button overrides the
 * fill below to use Contained. Keep the earlier no-shadow treatment.
 * Use border-image instead of the repo's masked pseudo-element: Ashby's
 * upload validator rejects mask/-webkit-mask. Subtract the real 1px border
 * from padding to retain the component's overall dimensions.
 */
.ashby-application-form-autofill-input-root button,
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-yesno-option,
.ashby-application-form-submit-button {
  display: inline-flex !important;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  box-sizing: border-box;
  inline-size: fit-content !important;
  min-inline-size: 2rem;
  block-size: 2rem !important;
  padding: calc(0.125rem - 1px) calc(0.75rem - 1px) !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image-source: linear-gradient(111deg, #1d4587 0%, #051531 100%);
  border-image-slice: 1;
  border-radius: 1px !important;
  background: rgb(252 252 252 / 24%) !important;
  backdrop-filter: blur(6px);
  color: #0f2750 !important;
  font-family: var(--verda-font-mono) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.25rem !important;
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  outline: 1px solid transparent !important;
  outline-offset: 1px !important;
  -webkit-appearance: none;
  appearance: none;
}

.ashby-application-form-autofill-input-root button > svg,
.ashby-application-form-input-file-dropzone-upload > svg,
.ashby-application-form-submit-button > svg {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0 !important;
  color: inherit;
  fill: currentColor !important;
}

/* Compact icons, matching the 1rem size used by the CPU configurator button. */
.ashby-application-form-input-file-dropzone-upload > svg,
.ashby-application-form-submit-button > svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.ashby-application-form-autofill-input-root button:hover,
.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-autofill-input-root button:active,
.ashby-application-form-input-file-dropzone-upload:active,
.ashby-application-form-autofill-input-root button:focus-visible,
.ashby-application-form-input-file-dropzone-upload:focus-visible,
.ashby-application-form-input-yesno-option:hover,
.ashby-application-form-input-yesno-option:active,
.ashby-application-form-input-yesno-option:focus-visible {
  color: var(--verda-accent) !important;
  border-image-source: none;
  border-color: var(--verda-focus-ring) !important;
}

.ashby-application-form-autofill-input-root button:focus-visible,
.ashby-application-form-input-file-dropzone-upload:focus-visible,
.ashby-application-form-input-yesno-option:focus-visible,
.ashby-application-form-submit-button:focus-visible {
  outline-color: var(--verda-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Contained: same gradient, hover fill, and focus color as the site button.
 * Preserve Ashby's label, icon, loading state, and submission behavior.
 */
.ashby-application-form-submit-button {
  border-width: 0.5px !important;
  border-image-source: none;
  margin-inline: 1rem;
  padding: 0.125rem 0.75rem !important;
  padding-inline-end: 0.5rem !important;
  background: linear-gradient(90deg, transparent 50%, #0f2750 50%), linear-gradient(111deg, #1d4587 0%, #051531 100%) !important;
  background-size:
    200% 100%,
    100% 100% !important;
  background-position:
    0 0,
    0 0 !important;
  color: #fcfcfc !important;
}

.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:active {
  background-position:
    100% 0,
    0 0 !important;
}

.ashby-application-form-submit-button:hover > svg,
.ashby-application-form-submit-button:active > svg {
  color: var(--verda-accent);
}

.ashby-application-form-submit-button:focus-visible {
  background: #335ca0 !important;
}

/* Keep disabled rules after interaction states so hover cannot restyle them. */
.ashby-application-form-autofill-input-root button[disabled],
.ashby-application-form-input-file-dropzone-upload[disabled],
.ashby-application-form-autofill-input-root button[aria-disabled='true'],
.ashby-application-form-input-file-dropzone-upload[aria-disabled='true'],
.ashby-application-form-autofill-input-root button[data-disabled='true'],
.ashby-application-form-input-file-dropzone-upload[data-disabled='true'],
.ashby-application-form-input-yesno-option[disabled],
.ashby-application-form-input-yesno-option[aria-disabled='true'],
.ashby-application-form-input-yesno-option[data-disabled='true'],
.ashby-application-form-submit-button[disabled],
.ashby-application-form-submit-button[aria-disabled='true'],
.ashby-application-form-submit-button[data-disabled='true'] {
  background: #f2f2f2 !important;
  color: #6c6f74 !important;
  border-image-source: none;
  border-color: transparent !important;
  cursor: not-allowed;
}

/* Keep a disabled submit icon consistent with its disabled text. */
.ashby-application-form-submit-button[disabled] > svg,
.ashby-application-form-submit-button[aria-disabled='true'] > svg,
.ashby-application-form-submit-button[data-disabled='true'] > svg {
  color: inherit;
}

/* Yes/No: separate outlined choices; selection uses the same inverse text
 * and gradient as compute-toggle.module.css. Keep the chosen answer visible
 * even when Ashby disables the controls. Do not touch the backing input.
 */
.ashby-application-form-input-yesno {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: fit-content;
  gap: 0.5rem;
}

.ashby-application-form-input-yesno-option {
  inline-size: 100% !important;
  margin: 0 !important;
}

.ashby-application-form-input-yesno-option[aria-pressed='true'] {
  background: linear-gradient(111deg, #1d4587 0%, #051531 100%) !important;
  color: #fcfcfc !important;
  border-image-source: none;
  border-color: transparent !important;
}

/* 5. Text Input / Email and Textarea / Default share control.module.css.
 * Include Ashby's editable autocomplete fields (e.g. location), while leaving
 * their popup, selection behavior, hidden file inputs, and checkboxes alone.
 */
.ashby-application-form-input-text,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-textarea {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  background-color: var(--verda-control-background) !important;
  color: var(--verda-control-text) !important;
  border: 0.5px solid var(--verda-control-border) !important;
  border-radius: 2px !important;
  padding: 0.5rem 0.75rem !important;
  font-family: var(--fontFamily) !important;
  font-size: 1.125rem !important;
  font-weight: 350 !important;
  line-height: 1.3 !important;
  letter-spacing: normal;
  cursor: text;
  outline: none !important;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-autocomplete::placeholder,
.ashby-application-form-input-textarea::placeholder {
  color: var(--verda-control-border) !important;
  opacity: 1;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-textarea:hover {
  border-color: var(--verda-accent) !important;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-autocomplete:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-text:focus-visible,
.ashby-application-form-input-autocomplete:focus-visible,
.ashby-application-form-input-textarea:focus-visible {
  border-color: var(--verda-control-focus) !important;
}

.ashby-application-form-input-text[aria-invalid='true'],
.ashby-application-form-input-autocomplete[aria-invalid='true'],
.ashby-application-form-input-textarea[aria-invalid='true'] {
  border-color: var(--verda-control-error) !important;
}

.ashby-application-form-input-text[disabled],
.ashby-application-form-input-autocomplete[disabled],
.ashby-application-form-input-textarea[disabled],
.ashby-application-form-input-text[data-disabled='true'],
.ashby-application-form-input-autocomplete[data-disabled='true'],
.ashby-application-form-input-textarea[data-disabled='true'] {
  background-color: #f2f2f2 !important;
  border-color: #dadee5 !important;
  color: var(--verda-control-border) !important;
  cursor: not-allowed;
}

.ashby-application-form-input-textarea {
  min-block-size: 8.75rem;
  resize: vertical;
}

/* 6. Privacy spacing: the final field already has a 24px bottom margin,
 * matching the site's form gap. Remove the extra container padding at the
 * main-form/survey boundary and the submit button's additional top margin.
 * Keep horizontal padding, field spacing, notice text, and consent unchanged.
 */
.ashby-application-form-container {
  padding-block-end: 0 !important;
}

.ashby-survey-form-container > .ashby-application-form-container {
  padding-block-start: 0 !important;
}

.ashby-application-form-submit-button {
  margin-block-start: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .ashby-application-form-input-text,
  .ashby-application-form-input-autocomplete,
  .ashby-application-form-input-textarea,
  .ashby-application-form-autofill-input-root button,
  .ashby-application-form-input-file-dropzone-upload,
  .ashby-application-form-input-yesno-option,
  .ashby-application-form-submit-button {
    transition:
      color 200ms ease-out,
      background-color 200ms ease-out,
      border-color 200ms ease-out;
  }
}