/* ==========================================================================
   Algoriddim – Ashby Job Board
   Custom CSS based on Algoriddim Brand Guidelines v1.0 (2026)
   "Dark first": Gray 900 stage, Gray 800 cards, monochrome text,
   Blue for primary CTAs, Yellow for small accent labels.
   ========================================================================== */

:root {
  /* --- Brand tokens --------------------------------------------------- */
  --ar-gray-900: #101112;
  --ar-gray-800: #1c1d1f;
  --ar-gray-700: #2e3033;
  --ar-gray-600: #45474d;
  --ar-gray-500: #737780;
  --ar-gray-400: #afafb3;
  --ar-gray-300: #d5d5d9;
  --ar-gray-200: #e8e8eb;
  --ar-gray-100: #f5f5f7;
  --ar-white: #ffffff;

  --ar-blue: #3399ff;        /* Main on Dark */
  --ar-blue-deep: #0079f2;   /* Main on Light, used for hover/pressed */
  --ar-yellow: #f2c40c;
  --ar-red: #ff3355;
  --ar-green: #4ed941;

  --ar-text: var(--ar-white);
  --ar-text-muted: var(--ar-gray-400);
  --ar-border: var(--ar-gray-700);
  --ar-border-strong: var(--ar-gray-600);
  --ar-surface: var(--ar-gray-800);
  --ar-surface-raised: var(--ar-gray-700);

  /* --- Ashby variables ------------------------------------------------ */
  --colorAppBackground: var(--ar-gray-900);

  /* Also set these two in Ashby admin > Theme settings, same values. */
  --colorPrimary900: #0079f2;
  --colorPrimary600: #3399ff;

  --widthMaxContent: 960px;
  --widthMaxJobBoard: 800px;
  --widthMaxSubscriptionPreferences: 600px;

  --borderRadiusContainer: 24px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 999px;   /* pill buttons, as in the brand guide */

  /* Same font stack as algoriddim.com */
  --fontFamily: "Avenir", sans-serif;

  /* Native controls (select menus, date pickers, scrollbars) render dark */
  color-scheme: dark;

  /* Base text styles, inherited by the whole job board.
     Ashby only accepts :root, its own ashby-* classes and at-rules,
     so element selectors like body, a or h2 are not possible here. */
  background-color: var(--ar-gray-900);
  color: var(--ar-text);
  font-family: var(--fontFamily);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Job board overview
   ========================================================================== */

.ashby-job-board-heading {
  color: var(--ar-text);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ashby-job-board-heading-count {
  color: var(--ar-yellow);
  font-weight: 600;
}

.ashby-job-board-filters-label {
  color: var(--ar-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ashby-job-board-reset-filters-label {
  color: var(--ar-blue);
  cursor: pointer;
}

.ashby-job-board-reset-filters-label:hover {
  color: var(--ar-white);
}

.ashby-job-board-filter {
  background-color: var(--ar-surface);
  border: 1px solid var(--ar-border);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text);
  font-family: var(--fontFamily);
}

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

/* Department = small yellow eyebrow label, like the section labels in the brand guide */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  color: var(--ar-yellow);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 40px;
}

/* Team = regular subheading */
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  color: var(--ar-text-muted);
  font-size: 16px;
  font-weight: 600;
}

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

/* Job card */
.ashby-job-posting-brief {
  background-color: var(--ar-surface);
  border: 1px solid transparent;
  border-radius: var(--borderRadiusContainer);
  padding: 24px 28px;
  margin-bottom: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
  background-color: #222326;
  border-color: var(--ar-border-strong);
}

.ashby-job-posting-brief-title {
  color: var(--ar-text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ashby-job-posting-brief-details {
  color: var(--ar-text-muted);
  font-size: 15px;
}

/* ==========================================================================
   Job posting page
   ========================================================================== */

.ashby-job-board-back-to-all-jobs-button {
  color: var(--ar-text-muted);
  font-weight: 600;
}

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

.ashby-job-posting-header {
  border-bottom: 1px solid var(--ar-border);
}

.ashby-job-posting-heading {
  color: var(--ar-text);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Left pane: location, employment type, compensation etc. */
.ashby-job-posting-left-pane {
  background-color: transparent;  /* Ashby sets white here by default */
  color: var(--ar-text);
}

/* Right pane: Ashby's default text color is a dark gray, so reset it */
.ashby-job-posting-right-pane {
  color: var(--ar-text);
}

/* Container around the description; Ashby sets white here by default */
.ashby-job-posting-description-container {
  background-color: transparent;
  color: var(--ar-text);
}

/* Tabs: Overview / Application */
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--ar-blue);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--ar-text-muted);
  font-weight: 600;
}

.ashby-job-posting-right-pane-overview-tab[aria-selected="true"],
.ashby-job-posting-right-pane-application-tab[aria-selected="true"] {
  color: var(--ar-text);
}

/* Rich-text job description */
.ashby-job-posting-description {
  color: var(--ar-gray-300);
  font-size: 17px;
  line-height: 1.65;
  padding-top: 0;
  margin-top: -26px;   /* offsets the first heading's top margin */
}

/* Readability: clear heading hierarchy and air between paragraphs.
   Ashby's defaults are 20px regular headings and only 8px between paragraphs. */
.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3 {
  color: var(--ar-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 40px 0 14px;
}

.ashby-job-posting-description p {
  color: var(--ar-gray-300);
  line-height: 1.65;
  margin: 0 0 14px;
}

.ashby-job-posting-description strong,
.ashby-job-posting-description b {
  color: var(--ar-text);
  font-weight: 600;
}

.ashby-job-posting-description ul,
.ashby-job-posting-description ol {
  margin: 4px 0 22px;
  padding-left: 22px;
}

.ashby-job-posting-description li {
  color: var(--ar-gray-300);
  line-height: 1.6;
  margin: 0 0 8px;
}

.ashby-job-posting-description a {
  color: var(--ar-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Labels in the left column (Location, Department ...) */
.ashby-job-posting-left-pane h2 {
  color: var(--ar-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Application form
   ========================================================================== */

.ashby-application-form-container,
.ashby-survey-form-container {
  background-color: transparent;  /* Ashby sets white here by default */
  color: var(--ar-text);
}

.ashby-application-form-section-container {
  background-color: var(--ar-surface);
  border-radius: var(--borderRadiusContainer);
  padding: 28px;
  margin-bottom: 16px;
}

.ashby-application-form-section-header-title {
  color: var(--ar-text);
  font-size: 24px;
  font-weight: 600;
}

.ashby-application-form-section-header-description {
  color: var(--ar-text-muted);
}

.ashby-application-form-question-title {
  color: var(--ar-text);
  font-weight: 600;
}

.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--ar-text-muted);
  font-size: 14px;
}

/* --- Text fields, textareas, dropdowns, dates --------------------------- */
.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,
.ashby-application-form-input-dropdown-select {
  background-color: var(--ar-gray-900);
  border: 1px solid var(--ar-border);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text);
  font-family: var(--fontFamily);
}

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

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

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus {
  border-color: var(--ar-blue);
  box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.25);
  outline: none;
}

/* The inner select sits inside the dropdown wrapper; avoid a double border */
.ashby-application-form-input-dropdown .ashby-application-form-input-dropdown-select {
  border: 0;
  background-color: transparent;
}

.ashby-application-form-input-dropdown[data-disabled] {
  opacity: 0.5;
}

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

/* Autocomplete popup */
.ashby-application-form-input-autocomplete-popup {
  background-color: var(--ar-surface-raised);
  border: 1px solid var(--ar-border-strong);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text);
}

.ashby-application-form-input-autocomplete-popup-result {
  color: var(--ar-text);
}

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

.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  color: var(--ar-text-muted);
}

/* Date picker popup */
.ashby-application-form-input-date-popup {
  background-color: var(--ar-surface-raised);
  border: 1px solid var(--ar-border-strong);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text);
}

.ashby-application-form-input-date-popup-title {
  color: var(--ar-text);
}

.ashby-application-form-input-date-popup-header-button {
  color: var(--ar-text-muted);
}

.ashby-application-form-input-date-popup-header-button:hover {
  color: var(--ar-text);
}

/* --- Radio, checkbox, yes/no --------------------------------------------- */
.ashby-application-form-input-radio-group-option-label,
.ashby-application-form-input-checkbox-group-option-label {
  color: var(--ar-text);
}

.ashby-application-form-input-radio-group-option-radio,
.ashby-application-form-input-checkbox-group-option-checkbox {
  accent-color: var(--ar-blue);
}

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

.ashby-application-form-input-yesno-option {
  background-color: var(--ar-gray-900);
  border: 1px solid var(--ar-border-strong);
  color: var(--ar-text);
  font-weight: 600;
}

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

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

/* --- File upload (CV, cover letter) -------------------------------------- */
.ashby-application-form-input-file {
  /* Ashby draws its own dashed frame here; keep only one frame (the dropzone) */
  border: 0;
  padding: 0;
  background-color: transparent;
}

.ashby-application-form-input-file-dropzone {
  background-color: var(--ar-gray-900);
  border: 1px dashed var(--ar-border-strong);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text-muted);
}

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

.ashby-application-form-input-file-dropzone-instructions {
  color: var(--ar-text-muted);
}

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

.ashby-application-form-input-file-item {
  background-color: var(--ar-surface-raised);
  border-radius: var(--borderRadiusControl);
  color: var(--ar-text);
}

.ashby-application-form-input-file-item-name {
  color: var(--ar-text);
}

.ashby-application-form-input-file-item-delete {
  color: var(--ar-text-muted);
}

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

/* --- Education history --------------------------------------------------- */
.ashby-application-form-input-education-entry {
  background-color: var(--ar-gray-900);
  border: 1px solid var(--ar-border);
  border-radius: var(--borderRadiusControl);
}

.ashby-application-form-input-education-entry-header {
  color: var(--ar-text);
  font-weight: 600;
}

.ashby-application-form-input-education-entry-delete {
  color: var(--ar-text-muted);
}

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

.ashby-application-form-input-education-add {
  color: var(--ar-blue);
  font-weight: 600;
}

/* --- Resume autofill ----------------------------------------------------- */
.ashby-application-form-autofill-pane {
  /* Transparent wrapper, so the box below lines up with the form card */
  background-color: transparent;
  padding: 0;
  margin-bottom: 16px;
}

.ashby-application-form-autofill-input-root {
  background-color: var(--ar-surface);
  border: 1px dashed var(--ar-border-strong);
  border-radius: var(--borderRadiusContainer);
  overflow: hidden;
}

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

.ashby-application-form-autofill-input-base-layer {
  background-color: transparent;
  color: var(--ar-text);
}

/* Overlays shown while dragging a file or processing; need a solid fill */
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background-color: var(--ar-surface);
  color: var(--ar-text);
}

.ashby-application-form-autofill-input-title {
  color: var(--ar-text);
  font-weight: 600;
}

.ashby-application-form-autofill-input-description {
  color: var(--ar-text-muted);
}

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

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--ar-red);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--ar-green);
}

/* --- Submit button: brand CTA ------------------------------------------- */
.ashby-application-form-submit-button {
  background-color: var(--ar-blue);
  border: 0;
  border-radius: var(--borderRadiusButton);
  color: var(--ar-white);
  font-family: var(--fontFamily);
  font-size: 17px;
  font-weight: 600;
  padding: 14px 32px;
  transition: background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--ar-blue-deep);
}

.ashby-application-form-submit-button:disabled,
.ashby-application-form-submit-button[aria-disabled="true"] {
  background-color: var(--ar-gray-700);
  color: var(--ar-gray-400);
  cursor: not-allowed;
}

/* --- Status messages ----------------------------------------------------- */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container,
.ashby-application-blocking-disclosure {
  background-color: var(--ar-surface);
  border-radius: var(--borderRadiusContainer);
  color: var(--ar-text);
  padding: 28px;
}

.ashby-application-form-success-container {
  border-left: 4px solid var(--ar-green);
}

.ashby-application-form-failure-container {
  border-left: 4px solid var(--ar-red);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 640px) {
  .ashby-job-board-heading,
.ashby-job-posting-heading {
    font-size: 32px;
  }

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

  .ashby-job-posting-brief-title {
    font-size: 18px;
  }

  .ashby-application-form-section-container {
    padding: 20px;
  }

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