/* stylelint-disable */
/* =============================================================================
   Teleskope — Ashby Job Board custom CSS
   -----------------------------------------------------------------------------
   Paste this into Ashby admin → Job Board → Theme → custom CSS.
   Themes BOTH the hosted board (jobs.ashbyhq.com/teleskope) and the embed on
   https://www.teleskope.ai/company/careers so it matches the live site.

   Design tokens mirror the Webflow site bundle
   (teleskope2026.webflow…opt.css, site 69c711f9c9f708055209f980):
     - Light section: white bg, #272727 text, #f5f4f1 cards, 12px radius
     - Brand font  : "BDO Grotesk"  (+ "Google Sans Code" for badges)
     - Accent       : #6d4dff  (text-accent on light: #583bbf)
     - Buttons      : pill (200px), 48px tall, 24px x-padding
   ============================================================================ */

/* -----------------------------------------------------------------------------
   1. Brand fonts (Webflow CDN variable TTFs — served with CORS `*`)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "BDO Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/69c711f9c9f708055209f980/69c711f9c9f708055209f986_BDOGrotesk-VF.ttf")
    format("truetype-variations");
}

@font-face {
  font-family: "Google Sans Code";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/69c711f9c9f708055209f980/69c711f9c9f708055209f985_GoogleSansCode-VariableFont_wght.ttf")
    format("truetype-variations");
}

/* -----------------------------------------------------------------------------
   2. Theme variables
   These drive values throughout the Ashby job board.
   -------------------------------------------------------------------------- */
:root {
  /* --- Teleskope brand tokens (used by the rules below) --- */
  --tele-text: #272727;                 /* primary text */
  --tele-text-muted: rgba(39, 39, 39, 0.64); /* secondary text */
  --tele-text-faint: rgba(39, 39, 39, 0.5);  /* location / de-emphasised */
  --tele-card: #f5f4f1;                 /* off-white card surface */
  --tele-card-hover: #efeeea;           /* slightly darker on hover */
  --tele-border: rgba(39, 39, 39, 0.1); /* 10% black hairline */
  --tele-accent: #6d4dff;               /* brand purple */
  --tele-accent-strong: #583bbf;        /* darker purple (hover / text-on-light) */
  --tele-radius-card: 12px;
  --tele-font: "BDO Grotesk", "-apple-system", "BlinkMacSystemFont", "Segoe UI",
    "Helvetica", "Arial", sans-serif;

  /* --- Ashby theme variables --- */
  /* Max width of the job board container */
  --widthMaxJobBoard: 848px;

  /* Border radii */
  --borderRadiusContainer: 12px;
  --borderRadiusControl: 6px;
  --borderRadiusButton: 200px;

  /* Font families */
  --fontFamily: var(--tele-font);

  /* Let the white Webflow section show through behind the board */
  --colorAppBackground: transparent;

  /* Ashby neutral scale, flipped to the LIGHT palette.
     (000 = surface base, 800 = primary text, 600/700/900 = muted text.) */
  --colorNeutral000: #ffffff;
  --colorNeutral100: var(--tele-card);
  --colorNeutral600: var(--tele-text-muted);
  --colorNeutral700: var(--tele-text-muted);
  --colorNeutral800: var(--tele-text);
  --colorNeutral900: var(--tele-text-muted);

  /* Brand accent (links, active filter, focus) */
  --colorPrimary: var(--tele-accent);

  /* Flat design — no drop shadow */
  --colorNeutralShadow: transparent;
}

/* -----------------------------------------------------------------------------
   3. Job board — headings & chrome
   The page already shows a "Current openings" heading above the embed, so the
   board's built-in heading + count are hidden to avoid duplication.
   -------------------------------------------------------------------------- */

/* The heading of the entire job board. */
.ashby-job-board-heading {
  display: none;
}

/* The count of job postings on the job board. */
.ashby-job-board-heading-count {
  display: none;
}

/* The heading of a department, which can have many teams under it. */
.ashby-department-heading {
  color: var(--tele-text);
  font-family: var(--tele-font);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The heading of a single team. */
.ashby-department-heading-level {
  color: var(--tele-text);
  font-family: var(--tele-font);
  font-weight: 500;
}

/* A select box element for filtering the job board. */
.ashby-job-board-filter {
  color: var(--tele-text);
  font-family: var(--tele-font);
  background-color: #ffffff;
  border: 1px solid var(--tele-border);
  border-radius: var(--borderRadiusControl);
}

.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--tele-text);
  outline: none;
}

/* -----------------------------------------------------------------------------
   4. Job postings — match the site's native .career-link-box cards
   -------------------------------------------------------------------------- */

/* The container of a single job posting (the card). */
.ashby-job-posting-brief {
  background-color: var(--tele-card);
  border: 1px solid transparent;
  border-radius: var(--tele-radius-card);
  padding: 18px;
  margin-bottom: 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.ashby-job-posting-brief:hover {
  background-color: var(--tele-card-hover);
  border-color: var(--tele-border);
  transform: translateY(-1px);
}

/* The container for the list of job post briefings. */
.ashby-job-posting-brief-list {
  font-family: var(--tele-font);
}

/* The title of the job posting in the list/details pane. */
.ashby-job-posting-brief-title {
  color: var(--tele-text);
  font-family: var(--tele-font);
  font-size: 1.375rem; /* ~22px — site .heading---h5 */
  line-height: 1.4em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The heading of a job post (details page). */
.ashby-job-posting-heading {
  color: var(--tele-text);
  font-family: var(--tele-font);
  letter-spacing: -0.01em;
}

/* The per-posting department label. */
.ashby-job-posting-brief-department-heading {
  color: var(--tele-text-faint);
  font-family: var(--tele-font);
}

/* The heading of a single team within a posting brief. */
.ashby-job-posting-brief-department-heading-level {
  color: var(--tele-text-faint);
  font-family: var(--tele-font);
}

/* The container for the details of the job posting (e.g. location), in the
   details pane — rendered like the muted .career-location on the site. */
.ashby-job-posting-brief-details {
  color: var(--tele-text-faint);
  font-family: var(--tele-font);
}

/* -----------------------------------------------------------------------------
   5. Application form
   The same custom CSS applies to the embedded application form.
   -------------------------------------------------------------------------- */

/* A container for the application form. */
.ashby-application-form-container {
  font-family: var(--tele-font);
  color: var(--tele-text);
}

/* Section + question titles. */
.ashby-application-form-section-header-title,
.ashby-application-form-question-title {
  color: var(--tele-text);
  font-family: var(--tele-font);
  font-weight: 500;
}

/* Section + question descriptions. */
.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
  color: var(--tele-text-muted);
  font-family: var(--tele-font);
}

/* Success / failure messages. */
.ashby-application-form-success-container,
.ashby-application-form-failure-container {
  font-family: var(--tele-font);
  color: var(--tele-text);
}

/* The application submission button — brand purple pill. */
.ashby-application-form-submit-button {
  background-color: var(--tele-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--borderRadiusButton);
  min-height: 48px;
  padding: 0 24px;
  font-family: var(--tele-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.ashby-application-form-submit-button:hover {
  background-color: var(--tele-accent-strong);
}

.ashby-application-form-submit-button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* A container for any surveys on the application form. */
.ashby-survey-form-container {
  font-family: var(--tele-font);
  color: var(--tele-text);
}

/* -----------------------------------------------------------------------------
   NOTE: The embed footer is hidden by a parent-page rule that already lives on
   the Webflow careers page:
       #ashby_embed_iframe footer { display: none !important; }
   It must stay on the Webflow page (Ashby's custom-CSS validator only allows
   the documented `.ashby-*` classes + at-rules, so ID selectors are rejected).
   -------------------------------------------------------------------------- */