/*
 * Dodo — Ashby job board theme
 *
 * Mirrors dodo.ai (enterprise page): warm off-white canvas, near-black ink,
 * 1px hairline borders instead of shadows, 12px cards / 10px controls / 8px
 * buttons, medium-weight headings with tight tracking, uppercase eyebrow
 * labels, and the system sans stack the marketing site uses.
 *
 * Paste into Ashby → Admin → Job Boards → Theme → Custom CSS.
 * In the same Theme screen set the two primary colours to match the values
 * below (Primary dark #0f0c0a, Primary light #231d1a): Ashby injects those
 * from the admin, and this file re-declares them so both sources agree.
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                          */
/* ------------------------------------------------------------------ */

:root {
  /* Canvas and ink: hsl(40 33% 97%) / hsl(20 16% 12%) from dodo.ai */
  --colorAppBackground: #faf8f5;

  /* Primary is used for brief titles, links, the active tab, filter focus
     and the submit button. Dodo's CTA is ink-on-cream, so primary = ink. */
  --colorPrimary600: #231d1a;
  --colorPrimary900: #0f0c0a;
  --colorPrimary500A: #231d1a14;
  --colorShadowPrimaryXLight: #231d1a0f;
  --colorShadowPrimaryLight: #231d1a1f;

  /* Warm neutral scale (Ashby reads these for text, borders, surfaces) */
  --colorNeutral000: #fffefc;
  --colorNeutral100: #f5f3ef;
  --colorNeutral200: #ebe8e2;
  --colorNeutral300: #e5e2dc;
  --colorNeutral400: #cfcac2;
  --colorNeutral500: #a8a39a;
  --colorNeutral600: #7a746c;
  --colorNeutral700: #5c5650;
  --colorNeutral800: #231d1a;
  --colorNeutral900: #0f0c0a;

  /* Dodo is flat: hairlines, not drop shadows */
  --colorNeutralShadow: #231d1a0a;
  --colorPrimaryShadow: transparent;

  /* Shapes: --radius .75rem on dodo.ai; buttons are rounded-lg */
  --borderRadiusContainer: 12px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 8px;

  /* Widths: a single comfortable column like the marketing page */
  --widthMaxContent: 1040px;
  --widthMaxJobBoard: 760px;
  --widthMaxSubscriptionPreferences: 640px;

  /* Type */
  --fontFamily: "SF Pro Display", "SF Pro Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --lineHeightNormal: 1.6;
  --lineHeightTitle: 1.2;
  --letterSpacingTight: -0.02em;
  --letterSpacingWide: 0;
  --letterSpacingXwide: 0.1em;
  --fontWeightMediumBold: 500;
  --fontWeightHeavyBold: 600;
}

/* Ashby writes the two admin theme colours as an inline style on a wrapper
   element, which outranks :root. This keeps primary = ink even if the admin
   values drift (today they are the green #445837 / #1d1b3e). */
[style*="--colorPrimary600"] {
  --colorPrimary600: #231d1a !important;
  --colorPrimary900: #0f0c0a !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-underline-offset: 0.16em;
}

/* ------------------------------------------------------------------ */
/* 2. Job board (list page)                                           */
/* ------------------------------------------------------------------ */

/* "Open Positions (N)" — same voice as the h2s on dodo.ai */
.ashby-job-board-heading {
  color: var(--colorNeutral800);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.ashby-job-board-heading-count {
  color: var(--colorNeutral600);
  font-weight: 400;
}

/* "Filters:" rendered as an eyebrow label (THE PROBLEM, PRODUCT, …) */
.ashby-job-board-filters-label {
  color: var(--colorNeutral600);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ashby-job-board-reset-filters-label {
  color: var(--colorNeutral800);
  font-size: 13px;
  font-weight: 500;
}

/* Filter selects: 1px hairline, 10px radius, ink focus ring */
.ashby-job-board-filter {
  background-color: var(--colorNeutral000);
  background-image: none;
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusControl);
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 400;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.ashby-job-board-filter:focus-visible {
  border-color: var(--colorNeutral800);
  box-shadow: 0 0 0 1px var(--colorNeutral800);
  outline: none;
}

/* Department › Team heading above each group. Ashby's validator rejects
   structural pseudo-classes, so the parent/child levels cannot be styled
   separately; the base stylesheet already renders the parent level smaller
   and in --colorNeutral600, which the token remap turns warm grey. */
.ashby-department-heading {
  color: var(--colorNeutral800);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 40px;
  margin-bottom: 12px;
}

.ashby-department-heading-level {
  letter-spacing: -0.01em;
}

/* Each posting becomes a bordered card like the Network / Region / Clinic
   tiles on the enterprise page. The base stylesheet styles these with
   two-class selectors, so these rules are written at three classes to win
   regardless of load order. */
.ashby-job-posting-brief-list .ashby-job-posting-brief[data-highlight] {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
  margin: 0 0 10px 0;
  padding: 18px 20px;
  transition: border-color 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease;
}

.ashby-job-posting-brief-list .ashby-job-posting-brief[data-highlight]:hover,
.ashby-job-posting-brief-list .ashby-job-posting-brief[data-highlight]:active {
  background-color: var(--colorNeutral100);
  border-color: var(--colorNeutral400);
}

.ashby-job-posting-brief-title {
  color: var(--colorNeutral800);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ashby-job-posting-brief-details {
  color: var(--colorNeutral600);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
}

.ashby-job-posting-brief-details p + p {
  color: var(--colorNeutral500);
  font-size: 12px;
  margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* 3. Job posting (detail page)                                       */
/* ------------------------------------------------------------------ */

.ashby-job-posting-header {
  background-color: var(--colorAppBackground);
}

.ashby-job-board-back-to-all-jobs-button {
  color: var(--colorNeutral600);
  font-size: 14px;
  font-weight: 500;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--colorNeutral800);
}

.ashby-job-board-back-to-all-jobs-button svg {
  fill: currentColor;
}

/* Role title — the hero voice: medium weight, -0.02em, tight leading */
.ashby-job-posting-heading {
  color: var(--colorNeutral800);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Left pane: the facts card (Location, Employment type, Department, Comp) */
.ashby-job-posting-left-pane {
  align-self: flex-start;
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
  padding: 20px 22px;
}

.ashby-job-posting-left-pane h2 {
  color: var(--colorNeutral600);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.ashby-job-posting-left-pane p {
  color: var(--colorNeutral800);
  font-size: 14px;
  line-height: 1.5;
}

.ashby-job-posting-brief-department-heading {
  font-size: 14px;
}

.ashby-job-posting-brief-department-heading-level {
  letter-spacing: -0.01em;
}

/* Tabs: Overview / Application. The tab links carry no Ashby hook, so they
   are addressed through their ARIA roles, which are stable. */
[role="tablist"] [role="tab"] {
  color: var(--colorNeutral600);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  transition: color 0.2s ease;
}

[role="tablist"] [role="tab"]:hover,
[role="tablist"] [role="tab"][aria-selected="true"] {
  color: var(--colorNeutral800);
}

.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--colorNeutral800);
}

/* Description: long-form reading */
.ashby-job-posting-description-container {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.ashby-job-posting-description {
  color: var(--colorNeutral700);
  font-size: 16px;
  line-height: 1.65;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  color: var(--colorNeutral800);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.ashby-job-posting-description h1 {
  font-size: 24px;
  margin-top: 36px;
}

.ashby-job-posting-description h2 {
  font-size: 20px;
  margin-top: 32px;
}

.ashby-job-posting-description h3 {
  font-size: 16px;
  margin-top: 24px;
}

.ashby-job-posting-description p + p {
  margin-top: 12px;
}

.ashby-job-posting-description li {
  margin-top: 8px;
}

.ashby-job-posting-description strong {
  color: var(--colorNeutral800);
  font-weight: 500;
}

.ashby-job-posting-description a {
  color: var(--colorNeutral800);
  text-decoration: underline;
  text-decoration-color: var(--colorNeutral400);
}

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

.ashby-job-posting-description blockquote {
  border-left: 2px solid var(--colorNeutral300);
  color: var(--colorNeutral600);
  padding-left: 16px;
}

/* ------------------------------------------------------------------ */
/* 4. Buttons                                                         */
/* ------------------------------------------------------------------ */

/* The "Apply for this Job" button has no stable hook; it inherits
   primary = ink and the 8px radius from the tokens. These rules remove the
   remaining Ashby decoration (letter-spacing, drop shadow) on any button in
   the posting panes, and style the submit button explicitly. */
.ashby-job-posting-description-container button,
.ashby-job-posting-right-pane button,
.ashby-application-form-submit-button {
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.ashby-application-form-submit-button {
  background-color: var(--colorNeutral800);
  border: 1px solid var(--colorNeutral800);
  border-radius: var(--borderRadiusButton);
  color: var(--colorAppBackground);
  padding: 14px 32px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ashby-job-posting-description-container button:hover,
.ashby-job-posting-right-pane button:hover,
.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:active {
  background-color: #3a332e;
  border-color: #3a332e;
  box-shadow: none;
  color: var(--colorAppBackground);
}

.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--colorNeutral800);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 5. Application form                                                */
/* ------------------------------------------------------------------ */

.ashby-application-form-container {
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.ashby-application-form-section-container {
  margin-top: 32px;
}

.ashby-application-form-section-header-title {
  color: var(--colorNeutral800);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.ashby-application-form-section-header-description {
  color: var(--colorNeutral600);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
}

.ashby-application-form-field-entry {
  margin-top: 22px;
}

.ashby-application-form-question-title {
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--colorNeutral600);
  font-size: 13px;
  line-height: 1.55;
}

/* Text-like inputs */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-date,
.ashby-application-form-input-dropdown-select {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusControl);
  box-shadow: none;
  color: var(--colorNeutral800);
  font-size: 15px;
  padding: 11px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-autocomplete:focus,
.ashby-application-form-input-autocomplete[aria-expanded="true"],
.ashby-application-form-input-date:focus,
.ashby-application-form-input-dropdown-select:focus {
  border-color: var(--colorNeutral800);
  box-shadow: 0 0 0 1px var(--colorNeutral800);
  outline: none;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder {
  color: var(--colorNeutral500);
}

.ashby-application-form-input-dropdown {
  border: 0;
}

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

/* Autocomplete popup and date picker: 12px cards with a hairline */
.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: 0 12px 32px #231d1a14;
  overflow: hidden;
}

.ashby-application-form-input-autocomplete-popup-result {
  color: var(--colorNeutral800);
  font-size: 14px;
}

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

.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  color: var(--colorNeutral600);
  font-size: 13px;
}

/* Checkbox / radio groups */
.ashby-application-form-input-checkbox-group-option,
.ashby-application-form-input-radio-group-option {
  border-radius: var(--borderRadiusControl);
  padding: 6px 0;
}

.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  color: var(--colorNeutral800);
  font-size: 14px;
}

.ashby-application-form-input-checkbox-group-option[data-disabled] .ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option[data-disabled] .ashby-application-form-input-radio-group-option-label {
  color: var(--colorNeutral500);
}

/* Yes / No toggle: a segmented control, ink when pressed */
.ashby-application-form-input-yesno-option {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusButton);
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

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

/* File upload */
.ashby-application-form-input-file-dropzone {
  background-color: var(--colorNeutral100);
  border: 1px dashed var(--colorNeutral400);
  border-radius: var(--borderRadiusContainer);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

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

.ashby-application-form-input-file-dropzone-instructions {
  color: var(--colorNeutral600);
  font-size: 13px;
}

.ashby-application-form-input-file-dropzone-upload {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusButton);
  box-shadow: none;
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
}

.ashby-application-form-input-file-dropzone-upload:hover {
  background-color: var(--colorNeutral100);
  border-color: var(--colorNeutral400);
  box-shadow: none;
  color: var(--colorNeutral800);
}

.ashby-application-form-input-file-item {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-input-file-item-name {
  color: var(--colorNeutral800);
  font-size: 14px;
}

/* Resume autofill pane */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root {
  background-color: var(--colorNeutral100);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
}

.ashby-application-form-autofill-input-root[data-state="drag"] {
  border-color: var(--colorNeutral800);
}

.ashby-application-form-autofill-input-title {
  color: var(--colorNeutral800);
  font-size: 15px;
  font-weight: 500;
}

.ashby-application-form-autofill-input-description {
  color: var(--colorNeutral600);
  font-size: 13px;
}

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

.ashby-application-form-autofill-input-form-alert {
  border-radius: var(--borderRadiusControl);
  font-size: 13px;
}

/* Education history */
.ashby-application-form-input-education-entry {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
}

.ashby-application-form-input-education-entry-header {
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 500;
}

.ashby-application-form-input-education-add {
  color: var(--colorNeutral800);
  font-size: 14px;
  font-weight: 500;
}

/* Outcome messages */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container,
.ashby-application-blocking-disclosure {
  background-color: var(--colorNeutral000);
  border: 1px solid var(--colorNeutral300);
  border-radius: var(--borderRadiusContainer);
  box-shadow: none;
  color: var(--colorNeutral800);
}

/* ------------------------------------------------------------------ */
/* 6. Small screens                                                   */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  .ashby-job-board-heading {
    font-size: 28px;
  }

  .ashby-job-posting-heading {
    font-size: 30px;
  }

  .ashby-job-posting-brief-list .ashby-job-posting-brief[data-highlight] {
    padding: 16px;
  }

  .ashby-job-posting-left-pane {
    padding: 16px 18px;
  }
}