/* ============================================================
   Crucibl — Ashby job board theme
   Source: Figma "Crucibl — Internal → Jobs Ashby", Section 1
   (01 Job listing · 02 Overview tab · 03 Application tab).
   Crimson Pro (text) + Nippo (labels, tabs, buttons), teal palette.
   Upload under: Admin → Job Board Options → Custom CSS.

   Selectors use only Ashby's stable `ashby-*` hooks, plus plain
   tags / ARIA attributes anchored inside them. Ashby's hashed
   classes (`_title_dea4p_33` etc.) are never targeted — they
   change between releases.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=nippo@400&display=swap');

/* ---- Tokens ---------------------------------------------- */
:root {
  /* Ashby injects the admin Brand Color inline on <html>, which beats a
     plain :root value. !important wins over that inline style. Also set
     Brand Color = #1A4248 in admin so both stay in sync. */
  --colorPrimary900: #1a4248 !important; /* buttons, links, active tab */
  --colorPrimary600: #477c85 !important; /* hover                      */

  --colorAppBackground: #f5f5f4;

  --fontFamily: "Crimson Pro", Georgia, "Times New Roman", serif;

  --borderRadiusContainer: 4px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 0px;   /* buttons are square in the design */

  --widthMaxJobBoard: 820px;

  /* Palette (Figma "Palette" frame) */
  --crucibl-bg: #f5f5f4;
  --crucibl-mist: #e6eef0;     /* button text on teal */
  --crucibl-sage: #a3bdc2;     /* card rule           */
  --crucibl-teal: #477c85;     /* labels, accents     */
  --crucibl-ink: #1a4248;      /* headings, buttons   */
  --crucibl-stone: #4f4d4d;    /* intro copy          */
  --crucibl-text: #343432;     /* body copy           */
  --crucibl-muted: #7b7a7a;    /* secondary copy      */
  --crucibl-line: #e5e6e8;     /* hairlines           */
  --crucibl-control: #d7dae0;  /* dashed / soft borders */

  --crucibl-label: "Nippo", "Helvetica Neue", Arial, sans-serif;
  --crucibl-shadow: 0 2px 3px rgba(28, 26, 51, 0.25);
}

body {
  background-color: var(--crucibl-bg);
}

/* ---- Shared: Nippo label style --------------------------- */
.ashby-job-board-heading,
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--crucibl-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ---- Shared: square teal buttons ------------------------- */
.ashby-job-posting-description-container > a button,
.ashby-application-form-submit-button,
.ashby-application-form-autofill-input-root button,
.ashby-application-form-input-file-dropzone-upload {
  font-family: var(--crucibl-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  border-radius: 0;
  border-color: var(--crucibl-ink);
  background-color: var(--crucibl-ink);
  color: #ffffff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ashby-job-posting-description-container > a button:hover,
.ashby-application-form-submit-button:hover,
.ashby-application-form-autofill-input-root button:hover,
.ashby-application-form-input-file-dropzone-upload:hover {
  border-color: var(--crucibl-teal);
  background-color: var(--crucibl-teal);
}

/* Primary CTAs carry a soft drop shadow */
.ashby-job-posting-description-container > a button,
.ashby-application-form-submit-button {
  font-size: 16px;
  box-shadow: var(--crucibl-shadow);
}

/* Secondary (upload) buttons use the mist tint for text */
.ashby-application-form-autofill-input-root button,
.ashby-application-form-input-file-dropzone-upload {
  color: var(--crucibl-mist);
}
.ashby-application-form-autofill-input-root button { font-size: 14px; }
.ashby-application-form-input-file-dropzone-upload { font-size: 16px; }

/* ============================================================
   01 — Job listing
   ============================================================ */

/* Board intro ("Strategy as a system…") — set in admin; no stable
   class, so it's reached as the element right before the heading. */

/* "OPEN POSITIONS (6)" */
.ashby-job-board-heading {
  font-size: 16px;
  line-height: 28px;
  color: var(--crucibl-ink);
}
.ashby-job-board-heading-count {
  font-family: inherit;
  font-weight: 400;
  color: var(--crucibl-teal);
}

/* Department labels — "ENGINEERING", "OUTCOMES" */
.ashby-department-heading,
.ashby-department-heading-level {
  font-size: 14px;
  line-height: 18px;
  color: var(--crucibl-teal);
}

/* Job rows → white cards with a sage rule */
.ashby-job-posting-brief {
  background-color: #ffffff;
  border: 0;
  border-bottom: 1px solid var(--crucibl-sage);
  border-radius: 4px;
  margin-bottom: 0;
}
.ashby-job-posting-brief-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--crucibl-ink);
  transition: color 0.15s ease;
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--crucibl-teal);
}
.ashby-job-posting-brief-details {
  font-size: 14px;
  line-height: 21px;
  color: var(--crucibl-muted);
}

/* ============================================================
   02 — Job post · Overview tab
   ============================================================ */

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

.ashby-job-posting-heading {
  font-weight: 500;
  font-size: 24px;
  line-height: 33.6px;
  letter-spacing: 0;
  color: var(--crucibl-ink);
}

/* Left pane — LOCATION / EMPLOYMENT TYPE … */
.ashby-job-posting-left-pane h2 {
  font-size: 11px;
  line-height: 18px;
  color: var(--crucibl-teal);
}
.ashby-job-posting-left-pane p {
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-text);
}

/* Tabs — OVERVIEW / APPLICATION */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-muted);
}
[aria-selected="true"] > .ashby-job-posting-right-pane-overview-tab,
[aria-selected="true"] > .ashby-job-posting-right-pane-application-tab {
  color: var(--crucibl-ink);
}
.ashby-job-posting-right-pane-tab-slider {
  background-color: var(--crucibl-ink);
}

/* Description copy */
.ashby-job-posting-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-text);
}
.ashby-job-posting-description strong {
  font-weight: 600;
  color: var(--crucibl-ink);
}

/* ============================================================
   03 — Job post · Application tab
   ============================================================ */

/* Autofill from resume */
.ashby-application-form-autofill-input-root {
  border: 1px solid var(--crucibl-control);
  border-radius: 4px;
}
.ashby-application-form-autofill-input-title {
  font-weight: 500;
  font-size: 16px;
  color: var(--crucibl-ink);
}
.ashby-application-form-autofill-input-description {
  font-size: 16px;
  color: var(--crucibl-muted);
}

/* Question titles (required "*" keeps Ashby's red) */
.ashby-application-form-question-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-ink);
}
.ashby-application-form-question-description {
  font-size: 14px;
  line-height: 21px;
  color: var(--crucibl-muted);
}

/* Text inputs + autocomplete */
.ashby-application-form-input-text,
.ashby-application-form-input-autocomplete {
  font-size: 16px;
  color: var(--crucibl-text);
  border-radius: 4px;
}
.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-autocomplete::placeholder {
  color: var(--crucibl-muted);
}
.ashby-application-form-input-text:focus,
.ashby-application-form-input-autocomplete:focus {
  border-color: var(--crucibl-ink);
  outline: none;
  box-shadow: 0 0 0 1px var(--crucibl-ink);
}

/* Resume dropzone */
.ashby-application-form-input-file {
  border: 2px dashed var(--crucibl-control);
  border-radius: 4px;
}
.ashby-application-form-input-file-dropzone-instructions {
  font-weight: 500;
  font-size: 16px;
  color: var(--crucibl-muted);
}

/* Radio options */
.ashby-application-form-input-radio-group-option-label {
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-text);
}

/* Yes / No toggles */
.ashby-application-form-input-yesno-option {
  font-family: var(--fontFamily);
  font-weight: 600;
  font-size: 16px;
  color: var(--crucibl-muted);
  border: 2px solid var(--crucibl-control);
}
.ashby-application-form-input-yesno-option:hover {
  color: var(--crucibl-ink);
}
.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  color: #ffffff;
  border-color: var(--crucibl-ink);
  background-color: var(--crucibl-ink);
}

/* EEO / veteran survey section intros */
.ashby-application-form-section-header {
  border-bottom: 1px solid var(--crucibl-line);
}
.ashby-application-form-section-header-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--crucibl-muted);
}
.ashby-application-form-section-header-description strong {
  font-weight: 600;
}

/* Submit */
.ashby-application-form-submit-button {
  line-height: 19.2px;
}