/* ==========================================================================
   Ande job board theme for Ashby
   File: ande-ashby-job-board-v2.css
   Revised 2026-09-18

   HOW TO INSTALL (simplest path)
   Ashby admin > Job Boards > Theme (Job Board) > Custom CSS > upload this file.
   Ashby re-serves it from app.ashbyhq.com, so nothing needs hosting on ande.ai
   and no allow list entry is needed. The allow list only applies if you pass a
   customCssUrl on the embed script instead of uploading.

   TWO THINGS TO SETTLE BEFORE LAUNCH
   1. Fonts. Verified 2026-09-18: all five files return 200 from ande.ai/fonts/
      but send no Access-Control-Allow-Origin header and a content type of
      binary/octet-stream. @font-face always fetches in CORS mode, so inside the
      Ashby iframe these are blocked and the board falls back to the system
      stack. Fix on the ande.ai side: send Access-Control-Allow-Origin: * and
      Content-Type: font/woff2 for /fonts/*. Also confirm the Matter webfont
      licence covers serving it to a third-party origin.
   2. Ashby admin theme settings also set --colorPrimary900 and --colorPrimary600.
      Set them there to the same hex values as below or one will fight the other.

   SELECTOR SOURCE
   Every class below comes from Ashby's published reference:
   https://www.ashbyhq.com/job_board_example_css/full-job-board.css
   State hooks (aria-pressed, aria-selected, data-checked, data-option,
   data-highlight) were confirmed against a live Ashby application form on
   2026-09-18, not inferred.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONT LOADING (blocked until the CORS header above is added)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Ande";
  src: url("https://ande.ai/fonts/Ande-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("https://ande.ai/fonts/Matter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("https://ande.ai/fonts/Matter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("https://ande.ai/fonts/Matter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Matter";
  src: url("https://ande.ai/fonts/Matter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. TOKENS

   --color*, --width*, --borderRadius* and --fontFamily are Ashby's own names
   and the only variables Ashby reads. --ande* are ours.

   Values marked (token) match packages/config/src/colors.ts exactly. The rest
   are derived neutrals with no brand token behind them.
   -------------------------------------------------------------------------- */

:root {
  /* --- Ashby's variables --- */

  --colorAppBackground: #f9f5ef;          /* (token) ande-surface-100 */

  /* Darker primary. Also the colour used for interactive TEXT, because the
     lighter primary only reaches 4.34:1 on the cream background and fails
     WCAG AA. This one is 5.69:1 on cream and 6.18:1 on white.
     Mirror in Ashby admin > theme settings. */
  --colorPrimary900: #4f6845;

  /* Lighter primary. Fills and borders only, never text on cream.
     4.71:1 against white, so white text on this fill passes AA.
     Mirror in Ashby admin > theme settings. */
  --colorPrimary600: #607b54;             /* (token) ande-olive-500 */

  --widthMaxContent: 860px;
  --widthMaxJobBoard: 860px;
  --widthMaxSubscriptionPreferences: 600px;

  --borderRadiusContainer: 12px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 9999px;           /* matches the pill buttons in the app */

  --fontFamily: "Matter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Ande's own variables --- */

  --andeSerif: "Ande", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --andeInk: #262626;                     /* (token) ande-black */
  --andeBody: #484747;                    /* (token) ande-gray-400 */
  --andeCream: #f4efdf;                   /* (token) ande-surface-200 */
  --andeBorder: #ece5cf;                  /* (token) ande-surface-300 */
  --andeMint: #85fe9d;                    /* (token) ande-mint */
  --andeSurface: #ffffff;

  /* Derived, no token. 4.59:1 or better on every surface used below. */
  --andeMuted: #6f6b67;
  --andeBorderStrong: #cfc8b8;

  /* Error family, keyed off ande-error-dark. 5.02:1 text on fill. */
  --andeErrorText: #c70e18;               /* (token) ande-error-dark */
  --andeErrorFill: #ffe5e5;               /* (token) ande-error-lighter */
  --andeErrorBorder: #ffb3b3;

  --andeFocus: rgba(96, 123, 84, 0.35);
  --andeShadow: 0 1px 2px rgba(38, 38, 38, 0.04),
    0 8px 24px rgba(38, 38, 38, 0.06);
}


/* --------------------------------------------------------------------------
   3. JOB BOARD: heading and filters
   -------------------------------------------------------------------------- */

.ashby-job-board-heading {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--andeInk);
  margin-bottom: 8px;
}

.ashby-job-board-heading-count {
  font-family: var(--fontFamily);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--andeMuted);
  letter-spacing: 0.02em;
}

.ashby-job-board-filters-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--andeMuted);
  margin-bottom: 6px;
}

.ashby-job-board-filter {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  color: var(--andeBody);
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusControl);
  padding: 8px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ashby-job-board-filter:hover {
  border-color: var(--andeBorderStrong);
}

.ashby-job-board-filter:focus-visible,
.ashby-job-board-filter[aria-expanded="true"] {
  outline: none;
  border-color: var(--colorPrimary600);
  box-shadow: 0 0 0 3px var(--andeFocus);
}

.ashby-job-board-reset-filters-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colorPrimary900);
  cursor: pointer;
  text-underline-offset: 3px;
}

.ashby-job-board-reset-filters-label:hover {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   4. JOB BOARD: department groups and job rows
   -------------------------------------------------------------------------- */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--andeInk);
  margin-top: 32px;
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--andeBorder);
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--andeMuted);
}

.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

/* margin-bottom here is the one rule Ashby ships by default. Kept so nothing
   collapses if that default is ever dropped. */
.ashby-job-posting-brief {
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 18px 20px;
  margin-bottom: 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease,
    transform 140ms ease;
}

.ashby-job-posting-brief:hover {
  border-color: var(--colorPrimary600);
  box-shadow: var(--andeShadow);
  transform: translateY(-1px);
}

.ashby-job-posting-brief:focus-within {
  border-color: var(--colorPrimary600);
  box-shadow: 0 0 0 3px var(--andeFocus);
}

.ashby-job-posting-brief-title {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--andeInk);
  margin-bottom: 6px;
}

.ashby-job-posting-brief-details {
  font-size: 0.875rem;
  color: var(--andeMuted);
  letter-spacing: 0.01em;
}


/* --------------------------------------------------------------------------
   5. JOB POSTING PAGE
   -------------------------------------------------------------------------- */

.ashby-job-board-back-to-all-jobs-button {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--andeBody);
  background: transparent;
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusButton);
  padding: 6px 16px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  background: var(--andeCream);
  border-color: var(--andeBorderStrong);
}

.ashby-job-posting-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--andeBorder);
}

.ashby-job-posting-heading {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--andeInk);
}

.ashby-job-posting-description-container {
  background: transparent;
}

.ashby-job-posting-description {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--andeBody);
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  font-family: var(--andeSerif);
  font-weight: 400;
  color: var(--andeInk);
  margin-top: 28px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.ashby-job-posting-description h1 { font-size: 1.5rem; }
.ashby-job-posting-description h2 { font-size: 1.25rem; }
.ashby-job-posting-description h3 { font-size: 1.0625rem; }

.ashby-job-posting-description ul,
.ashby-job-posting-description ol {
  padding-left: 1.25em;
  margin: 12px 0;
}

.ashby-job-posting-description li {
  margin-bottom: 6px;
}

/* Body links sit on the cream app background, so they use the darker primary. */
.ashby-job-posting-description a {
  color: var(--colorPrimary900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-job-posting-description a:hover {
  color: var(--andeInk);
}

.ashby-job-posting-left-pane {
  padding-right: 32px;
}

.ashby-job-posting-right-pane {
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 20px;
}

/* Overview / Application tabs.

   Confirmed in the live DOM: the "tab slider" is a 2px, absolutely positioned
   underline that moves between tabs, NOT a segmented-control track. Giving it
   padding, a pill radius or a pale fill erases the active-tab indicator.
   Set its colour and nothing else.

   The tab labels are spans inside <a role="tab" aria-selected>. They carry no
   state attribute of their own, so the active label is reached through the
   parent anchor. */
.ashby-job-posting-right-pane-tab-slider {
  background: var(--colorPrimary600);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--andeMuted);
  transition: color 120ms ease;
}

[aria-selected="true"] > .ashby-job-posting-right-pane-overview-tab,
[aria-selected="true"] > .ashby-job-posting-right-pane-application-tab {
  color: var(--andeInk);
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   6. APPLICATION FORM: containers and section headers
   -------------------------------------------------------------------------- */

.ashby-application-form-container,
.ashby-survey-form-container {
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 28px;
}

/* Verify on a multi-section posting Tuesday. On a single-section form every
   section is :first-of-type, which is harmless (no divider is wanted there).
   On a multi-section form the sections are siblings and only the first matches. */
.ashby-application-form-section-container {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid var(--andeBorder);
}

.ashby-application-form-section-container:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.ashby-application-form-section-header {
  margin-bottom: 12px;
}

.ashby-application-form-section-header-title {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--andeInk);
  margin-bottom: 4px;
}

.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--andeMuted);
}

.ashby-application-form-field-entry {
  margin-bottom: 20px;
}

.ashby-application-form-question-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--andeInk);
  margin-bottom: 6px;
}

.ashby-application-form-question-description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--andeMuted);
  margin-bottom: 8px;
}


/* --------------------------------------------------------------------------
   7. APPLICATION FORM: inputs

   One shared look for every control. If Ashby adds a control type later it
   inherits nothing, so add its class to this group rather than restyling.
   -------------------------------------------------------------------------- */

.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-date,
.ashby-application-form-input-dropdown,
.ashby-application-form-input-autocomplete {
  width: 100%;
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  color: var(--andeInk);
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusControl);
  padding: 10px 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-date:hover,
.ashby-application-form-input-dropdown:hover,
.ashby-application-form-input-autocomplete:hover {
  border-color: var(--andeBorderStrong);
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-date:focus,
.ashby-application-form-input-dropdown:focus-within,
.ashby-application-form-input-autocomplete:focus {
  outline: none;
  border-color: var(--colorPrimary600);
  box-shadow: 0 0 0 3px var(--andeFocus);
}

/* -dropdown is the wrapper and -dropdown-select is the <select> inside it.
   Styling both with a border gives a box inside a box, so the inner select
   stays transparent and inherits the wrapper's chrome. Eyeball this Tuesday
   on a question that actually uses a dropdown. */
.ashby-application-form-input-dropdown-select {
  width: 100%;
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  color: var(--andeInk);
  background: transparent;
  border: none;
  padding: 0;
}

.ashby-application-form-input-dropdown-select:focus {
  outline: none;
}

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

.ashby-application-form-input-dropdown-icon {
  color: var(--andeMuted);
}

.ashby-application-form-input-dropdown[data-disabled],
.ashby-application-form-input-yesno[data-disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Autocomplete popup. The highlighted result is aria-selected, not a data
   attribute, so the keyboard highlight needs that selector to work at all. */
.ashby-application-form-input-autocomplete-popup {
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusControl);
  box-shadow: var(--andeShadow);
  overflow: hidden;
}

.ashby-application-form-input-autocomplete-popup-result {
  font-size: 0.9375rem;
  color: var(--andeBody);
  padding: 9px 12px;
  cursor: pointer;
}

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

.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  font-size: 0.875rem;
  color: var(--andeMuted);
  padding: 12px;
}

/* Date picker popup */
.ashby-application-form-input-date-popup {
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  box-shadow: var(--andeShadow);
  padding: 12px;
}

.ashby-application-form-input-date-popup-header {
  margin-bottom: 8px;
}

.ashby-application-form-input-date-popup-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--andeInk);
}

.ashby-application-form-input-date-popup-header-button {
  color: var(--andeBody);
  border-radius: var(--borderRadiusControl);
  cursor: pointer;
}

.ashby-application-form-input-date-popup-header-button:hover {
  background: var(--andeCream);
}


/* --------------------------------------------------------------------------
   8. APPLICATION FORM: checkbox, radio, yes/no

   State hooks confirmed in the live DOM on 2026-09-18:
   - option wrapper (checkbox and radio): data-checked
   - the checkbox itself: a <span> that also carries data-checked, with a
     visually hidden native input behind it, so it can be filled with CSS
   - the radio itself: a real <input type="radio"> with no data attribute and
     appearance: auto, so it is coloured with accent-color rather than a fill
   - yes/no option: a <button> with aria-pressed and data-option
   -------------------------------------------------------------------------- */

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

.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusControl);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ashby-application-form-input-checkbox-group-option:hover,
.ashby-application-form-input-radio-group-option:hover {
  border-color: var(--andeBorderStrong);
  background: var(--andeCream);
}

.ashby-application-form-input-checkbox-group-option[data-checked],
.ashby-application-form-input-radio-group-option[data-checked] {
  border-color: var(--colorPrimary600);
  background: var(--andeSurface);
}

.ashby-application-form-input-checkbox-group-option[data-disabled],
.ashby-application-form-input-radio-group-option[data-disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ashby-application-form-input-checkbox-group-option-checkbox {
  border: 1px solid var(--andeBorderStrong);
  border-radius: 4px;
  color: var(--andeSurface);
}

.ashby-application-form-input-checkbox-group-option-checkbox[data-checked] {
  background: var(--colorPrimary600);
  border-color: var(--colorPrimary600);
}

.ashby-application-form-input-radio-group-option-radio {
  accent-color: var(--colorPrimary600);
}

.ashby-application-form-input-checkbox-group-option-checkbox:focus-visible,
.ashby-application-form-input-radio-group-option-radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--andeFocus);
}

.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--andeBody);
}

.ashby-application-form-input-yesno {
  display: flex;
  gap: 8px;
}

.ashby-application-form-input-yesno-option {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  color: var(--andeBody);
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusButton);
  padding: 8px 20px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ashby-application-form-input-yesno-option:hover {
  background: var(--andeCream);
  border-color: var(--andeBorderStrong);
}

.ashby-application-form-input-yesno-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--andeFocus);
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background: var(--colorPrimary600);
  border-color: var(--colorPrimary600);
  color: #ffffff;
}


/* --------------------------------------------------------------------------
   9. APPLICATION FORM: file upload and resume autofill
   -------------------------------------------------------------------------- */

.ashby-application-form-input-file {
  margin-top: 4px;
}

.ashby-application-form-input-file-dropzone {
  background: var(--andeCream);
  border: 1px dashed var(--andeBorderStrong);
  border-radius: var(--borderRadiusContainer);
  padding: 24px;
  text-align: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.ashby-application-form-input-file-dropzone:hover {
  border-color: var(--colorPrimary600);
}

.ashby-application-form-input-file-dropzone-instructions {
  font-size: 0.875rem;
  color: var(--andeMuted);
}

.ashby-application-form-input-file-dropzone-upload {
  font-weight: 600;
  color: var(--colorPrimary900);
  cursor: pointer;
}

.ashby-application-form-input-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--andeSurface);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusControl);
  padding: 10px 12px;
  margin-top: 8px;
}

.ashby-application-form-input-file-item-name {
  font-size: 0.875rem;
  color: var(--andeInk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ashby-application-form-input-file-item-delete {
  color: var(--andeMuted);
  cursor: pointer;
}

.ashby-application-form-input-file-item-delete:hover {
  color: var(--andeErrorText);
}

.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-root {
  background: var(--andeCream);
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 20px;
}

.ashby-application-form-autofill-input-base-layer,
.ashby-application-form-autofill-input-pending-layer {
  border-radius: var(--borderRadiusContainer);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--andeSerif);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--andeInk);
  margin-bottom: 4px;
}

.ashby-application-form-autofill-input-description {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--andeMuted);
}

.ashby-application-form-autofill-input-icon {
  color: var(--colorPrimary600);
}

/* Scoped to the active drag state. The unscoped version paints the overlay
   even when Ashby has it hidden. */
.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  border: 2px dashed var(--colorPrimary600);
  border-radius: var(--borderRadiusContainer);
  background: rgba(133, 254, 157, 0.18); /* brand mint, used only as a wash */
}

/* This alert is positive as well as negative, so the red case is scoped. */
.ashby-application-form-autofill-input-form-alert {
  font-size: 0.875rem;
  border-radius: var(--borderRadiusControl);
  padding: 10px 12px;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--andeErrorText);
  background: var(--andeErrorFill);
  border: 1px solid var(--andeErrorBorder);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--colorPrimary900);
  background: #e3f3dd;                    /* (token) ande-olive-100 */
  border: 1px solid #bfe0b1;              /* (token) ande-olive-200 */
}


/* --------------------------------------------------------------------------
   10. APPLICATION FORM: education history
   -------------------------------------------------------------------------- */

.ashby-application-form-input-education-entry {
  border: 1px solid var(--andeBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 16px;
  margin-bottom: 12px;
}

.ashby-application-form-input-education-entry-header {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--andeInk);
  margin-bottom: 12px;
}

.ashby-application-form-input-education-entry-delete {
  color: var(--andeMuted);
  cursor: pointer;
}

.ashby-application-form-input-education-entry-delete:hover {
  color: var(--andeErrorText);
}

.ashby-application-form-input-education-add {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colorPrimary900);
  cursor: pointer;
}

.ashby-application-form-input-education-add:hover {
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   11. SUBMIT BUTTON AND END STATES
   -------------------------------------------------------------------------- */

.ashby-application-form-submit-button {
  font-family: var(--fontFamily);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--colorPrimary600);
  border: 1px solid transparent;
  border-radius: var(--borderRadiusButton);
  padding: 12px 28px;
  cursor: pointer;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.ashby-application-form-submit-button:hover {
  background: var(--colorPrimary900);
}

.ashby-application-form-submit-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--andeFocus);
}

/* Pale fill with dark text, 7.35:1. White on a pale fill was 1.67:1 and
   unreadable. */
.ashby-application-form-submit-button:disabled {
  background: var(--andeBorder);
  color: var(--andeBody);
  border-color: var(--andeBorderStrong);
  cursor: not-allowed;
}

.ashby-application-form-success-container {
  background: var(--andeSurface);
  border: 1px solid var(--colorPrimary600);
  border-radius: var(--borderRadiusContainer);
  padding: 28px;
  text-align: center;
  font-size: 1rem;
  color: var(--andeInk);
}

.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container,
.ashby-application-blocking-disclosure {
  background: var(--andeErrorFill);
  border: 1px solid var(--andeErrorBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--andeErrorText);
}


/* --------------------------------------------------------------------------
   12. RESPONSIVE

   Confirmed: the Ashby embed is a real iframe (width 100%, height driven by a
   ResizeObserver postMessage). These widths are the iframe's width, which
   tracks the container on the careers page. Test by narrowing the browser on
   the real careers page, not in the Ashby preview alone.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .ashby-job-board-heading {
    font-size: 1.75rem;
  }

  .ashby-job-posting-heading {
    font-size: 1.5rem;
  }

  .ashby-job-posting-left-pane {
    padding-right: 0;
  }

  .ashby-job-posting-right-pane,
  .ashby-application-form-container,
  .ashby-survey-form-container {
    padding: 18px;
  }

  .ashby-job-posting-brief {
    padding: 16px;
  }

  .ashby-application-form-submit-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ashby-job-posting-brief,
  .ashby-job-posting-brief:hover {
    transform: none;
    transition: none;
  }
}