/*
 * Backbone — Ashby job board custom CSS
 *
 * Ashby validates this file and rejects anything outside its own vocabulary.
 * Everything here stays inside what Ashby's published example file uses:
 *
 *   allowed:  :root, .ashby-* classes, and :hover / :focus / :focus-within
 *   rejected: element selectors (body, a, input), the universal selector *,
 *             and :focus-visible
 *
 * Avoided even though they might pass: :active and @media. Neither appears in
 * Ashby's example, and one unknown token fails the whole upload.
 *
 * `!important` on the role-card border is copied from Ashby's own example —
 * their default border wins without it.
 *
 * FONTS: not Suisse. Those files are trial-licensed and Ashby would need to
 * fetch them from a URL. This uses a neutral grotesk close to Suisse Intl.
 * Once the retail licence is bought and the woff2 files are served from
 * backbonesystems.ai, change --bb-font in one place.
 */

:root {
  /* Brand */
  --bb-orange: #ff7612;
  --bb-ink: #262522;
  --bb-ink-soft: #575767;
  --bb-paper: #f5f5f5;
  --bb-white: #ffffff;
  --bb-line: #e4e3e0;
  --bb-line-warm: #e8c9a8;

  /* Warm washes, taken from the "Request a demo" button's ramp */
  --bb-wash-soft: rgba(255, 118, 18, 0.05);
  --bb-wash: rgba(255, 118, 18, 0.1);

  --bb-radius: 0.5rem;
  --bb-radius-sm: 0.3rem;
  --bb-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* =========================================================
   Board header
   ========================================================= */

.ashby-job-board-heading {
  font-family: var(--bb-font);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--bb-ink);
  margin-bottom: 0.5rem;
}

.ashby-job-board-heading-count {
  font-family: var(--bb-font);
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--bb-ink-soft);
}

/* =========================================================
   Filters
   ========================================================= */

.ashby-job-board-filters-label {
  font-family: var(--bb-font);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--bb-ink-soft);
  margin-bottom: 0.4rem;
}

.ashby-job-board-filter {
  font-family: var(--bb-font);
  font-size: 0.9rem;
  color: var(--bb-ink);
  background-color: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  padding: 0.5rem 0.7rem;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--bb-orange);
  box-shadow: 0 0 0 3px var(--bb-wash);
  outline: none;
}

.ashby-job-board-reset-filters-label {
  font-family: var(--bb-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bb-orange);
  cursor: pointer;
  transition: color 180ms ease;
}

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

/* =========================================================
   Department groupings — air above each group, hairline beneath
   ========================================================= */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--bb-font);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--bb-ink);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--bb-line);
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--bb-font);
  font-weight: 400;
  color: var(--bb-ink-soft);
}

/* =========================================================
   Role cards
   ---------------------------------------------------------
   The previous version read as a stack of tight boxes. Three fixes: real
   separation between cards (0.6rem of gap, not 0.25rem), room inside them
   (1.15rem / 1.35rem), and a title/detail rhythm so those two lines are not
   crowded together.

   The colour is borrowed from the site's "Request a demo" button: a wide
   gradient whose POSITION animates, since gradient stops cannot be
   transitioned. At rest each card is white; on hover a warm wash sweeps in
   from the right and an inset rule lights the left edge. That accent is an
   inset shadow rather than a real border, so nothing shifts on hover.
   ========================================================= */

.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.ashby-job-posting-brief {
  font-family: var(--bb-font);
  padding: 1.15rem 1.35rem;
  margin-bottom: 0;
  border: 1px solid var(--bb-line) !important;
  border-radius: var(--bb-radius);
  background-color: var(--bb-white);
  background-image: linear-gradient(
    100deg,
    var(--bb-white) 0%,
    var(--bb-white) 52%,
    var(--bb-wash-soft) 84%,
    var(--bb-wash) 100%
  );
  background-size: 280% 100%;
  background-position: 0% 0;
  transition:
    background-position 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.ashby-job-posting-brief:hover {
  border-color: var(--bb-line-warm) !important;
  background-position: 100% 0;
  box-shadow:
    inset 3px 0 0 0 var(--bb-orange),
    0 1px 2px rgba(38, 37, 34, 0.05);
}

.ashby-job-posting-brief-title {
  font-family: var(--bb-font);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--bb-ink);
}

.ashby-job-posting-brief-details {
  font-family: var(--bb-font);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bb-ink-soft);
  margin-top: 0.3rem;
}

/* =========================================================
   Posting page
   ========================================================= */

.ashby-job-posting-heading,
.ashby-job-posting-header {
  font-family: var(--bb-font);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--bb-ink);
}

.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane {
  font-family: var(--bb-font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bb-ink);
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: var(--bb-font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bb-ink-soft);
  transition: color 180ms ease;
}

.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover {
  color: var(--bb-ink);
}

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

/* Same sweep as the cards, so the board behaves consistently throughout. */
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--bb-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bb-ink-soft);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  padding: 0.45rem 0.85rem;
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 52%,
    var(--bb-wash-soft) 84%,
    var(--bb-wash) 100%
  );
  background-size: 280% 100%;
  background-position: 0% 0;
  transition:
    background-position 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    color 200ms ease,
    border-color 200ms ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--bb-ink);
  border-color: var(--bb-line-warm);
  background-position: 100% 0;
}

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

.ashby-application-form-container,
.ashby-survey-form-container {
  font-family: var(--bb-font);
  color: var(--bb-ink);
}

.ashby-application-form-section-container {
  background-color: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  padding: 1.35rem 1.35rem 1.5rem;
  margin-bottom: 0.9rem;
}

.ashby-application-form-section-header {
  font-family: var(--bb-font);
  margin-bottom: 1rem;
}

.ashby-application-form-section-header-title {
  font-family: var(--bb-font);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--bb-ink);
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  font-family: var(--bb-font);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--bb-ink-soft);
}

.ashby-application-form-question-title {
  font-family: var(--bb-font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bb-ink);
  margin-bottom: 0.35rem;
}

.ashby-application-form-field-entry {
  font-family: var(--bb-font);
  color: var(--bb-ink);
  margin-bottom: 1rem;
}

/*
 * The button this palette is borrowed from: ink at rest, sweeping to the brand
 * orange. Hover rather than :active, since :active is not in Ashby's validated
 * vocabulary.
 */
.ashby-application-form-submit-button {
  font-family: var(--bb-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bb-white);
  border: 1px solid var(--bb-ink);
  border-radius: var(--bb-radius-sm);
  padding: 0.8rem 1.4rem;
  background-image: linear-gradient(
    100deg,
    var(--bb-ink) 0%,
    var(--bb-ink) 42%,
    var(--bb-orange) 88%,
    var(--bb-orange) 100%
  );
  background-size: 260% 100%;
  background-position: 0% 0;
  transition:
    background-position 560ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 300ms ease;
}

.ashby-application-form-submit-button:hover {
  background-position: 100% 0;
  border-color: var(--bb-orange);
}

/* =========================================================
   Resume upload / autofill
   ========================================================= */

.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-input-root {
  font-family: var(--bb-font);
  background-color: var(--bb-white);
  border: 1px dashed var(--bb-line);
  border-radius: var(--bb-radius);
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.ashby-application-form-autofill-input-root:focus-within {
  border-color: var(--bb-orange);
  box-shadow: 0 0 0 3px var(--bb-wash);
}

.ashby-application-form-autofill-input-title {
  font-family: var(--bb-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bb-ink);
}

.ashby-application-form-autofill-input-description {
  font-family: var(--bb-font);
  font-size: 0.85rem;
  color: var(--bb-ink-soft);
}

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

.ashby-application-form-autofill-input-drag-layer {
  background-color: var(--bb-wash-soft);
  border-color: var(--bb-orange);
  border-radius: var(--bb-radius);
}

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

/* =========================================================
   Result states
   ========================================================= */

.ashby-application-form-success-container {
  font-family: var(--bb-font);
  color: var(--bb-ink);
  background-color: var(--bb-white);
  border: 1px solid var(--bb-line);
  border-left: 3px solid var(--bb-orange);
  border-radius: var(--bb-radius);
  padding: 1.15rem 1.35rem;
}

.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container,
.ashby-application-form-autofill-input-form-alert {
  font-family: var(--bb-font);
  border-radius: var(--bb-radius-sm);
  padding: 0.9rem 1.1rem;
}