/* Polymarket job board (jobs.ashbyhq.com/polymarket). Upload it in
   Ashby → Admin → Job Boards → Theme → Custom CSS.
   Fonts are served from pmtalent.team/fonts (public brand assets,
   cross-origin allowed): the same files Talent OS uses.
   Selectors use Ashby's stable `ashby-*` classes, never its hashed
   `_foo_abc12` ones, which change when Ashby ships. */

@font-face { font-family: 'KMR Melange Grotesk'; src: url('https://pmtalent.team/fonts/KMRMelangeGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'KMR Melange Grotesk'; src: url('https://pmtalent.team/fonts/KMRMelangeGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'KMR Melange Grotesk'; src: url('https://pmtalent.team/fonts/KMRMelangeGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'KMR Melange Grotesk'; src: url('https://pmtalent.team/fonts/KMRMelangeGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'KMR Melange Grotesk'; src: url('https://pmtalent.team/fonts/KMRMelangeGrotesk-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --pm-blue: #1652F0;
  --pm-blue-dark: #0F3FC2;
  --pm-blue-tint: #EEF3FF;
  --pm-ink: #0B0F19;
  --pm-ink-2: #4B5263;
  --pm-ink-3: #8A90A0;
  --pm-line: #E7E9EF;
  --pm-ground: #F7F8FA;
  --pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Type ──────────────────────────────────────────────────────── */
html, body, button, input, select, textarea, label,
h1, h2, h3, h4, h5, h6, p, a, li, span, div {
  font-family: 'KMR Melange Grotesk', Inter, system-ui, -apple-system, sans-serif !important;
}
body {
  color: var(--pm-ink);
  -webkit-font-smoothing: antialiased;
  /* A soft brand-blue glow behind the logo. */
  background:
    radial-gradient(1100px 420px at 50% -120px, rgba(22, 82, 240, 0.10), transparent 70%),
    #fff !important;
}
::selection { background: var(--pm-blue); color: #fff; }

/* ── The grid ──────────────────────────────────────────────────── */
/* One invisible 12-column grid, Vignelli style: every page shares a
   1120px measure and ONE left edge (the 48px gutter). The logo, the
   headline, the filters, the department labels and the job titles
   all hang off that edge. Ashby's wrappers only carry hashed class
   names, so they're found through the stable ashby-* classes they
   contain. */
:root { --pm-measure: 1120px; --pm-gutter: 48px; --pm-gap: 24px; }

/* ── Top bar ─────────────────────────────────────────────────── */
/* A slim sticky bar; the wordmark sits on the left edge, the back
   arrow (job pages) just before it. */
div:has(> ul > li > a[href="https://polymarket.com/"]) {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pm-line);
}
ul:has(> li > a[href="https://polymarket.com/"]) {
  display: flex !important;
  align-items: center !important;
  gap: 20px;
  max-width: var(--pm-measure) !important;
  min-height: 68px !important;
  margin: 0 auto !important;
  padding: 0 var(--pm-gutter) !important;
}
/* The back arrow (job pages) hangs in the gutter, so the logo keeps
   the left edge on every page. */
ul:has(> li > a[href="https://polymarket.com/"]) > li:has(.ashby-job-board-back-to-all-jobs-button) {
  order: -1;
  margin-left: -40px;
  width: 20px;
}
a[href="https://polymarket.com/"] > img {
  height: 26px !important;
  width: auto !important;
}

/* ── Job list ──────────────────────────────────────────────────── */
div:has(> div > .ashby-job-board-heading) {
  max-width: var(--pm-measure) !important;
  margin: 0 auto !important;
  padding: 0 var(--pm-gutter) 96px !important;
}
div:has(> .ashby-job-board-heading) { margin: 0 !important; padding: 0 !important; max-width: none !important; }
div:has(> div > .ashby-department-heading) { padding: 0 !important; }

.ashby-job-board-heading {
  margin: 72px 0 0 !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--pm-ink) !important;
}
/* No "(37)" after the headline. */
.ashby-job-board-heading-count {
  display: none !important;
}

/* Filters: four across, one row, on the grid. */
.ashby-job-board-filters-label {
  margin-top: 40px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-ink-3) !important;
}
div:has(> div > div > .ashby-job-board-filter) {
  padding: 0 !important;
}
div:has(> div > .ashby-job-board-filter) {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--pm-gap) !important;
}
.ashby-job-board-filter {
  border-radius: 10px !important;
  border: 1px solid var(--pm-line) !important;
  background-color: #fff !important;
  padding-left: 14px !important;
  font-weight: 500 !important;
  transition: border-color 200ms var(--pm-ease), box-shadow 200ms var(--pm-ease);
}
.ashby-job-board-filter:hover { border-color: #C9D5FF !important; }
.ashby-job-board-filter:focus {
  outline: none !important;
  border-color: var(--pm-blue) !important;
  box-shadow: 0 0 0 4px rgba(22, 82, 240, 0.12) !important;
}

/* Departments: label in columns 1–3, jobs in columns 4–12. Each
   department starts on a full-width ink rule. */
div:has(> .ashby-department-heading) {
  display: grid !important;
  grid-template-columns: 3fr 9fr;
  column-gap: var(--pm-gap);
  margin-top: 64px !important;
}
.ashby-department-heading {
  grid-column: 1;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  border-top: 2px solid var(--pm-ink);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
  color: var(--pm-ink) !important;
}
/* A parent department (Engineering ›) with sub-departments under it:
   no rule of its own, so the label reads as part of the group below. */
.ashby-department-heading + .ashby-department-heading { border-top: 0; padding-top: 6px !important; }
.ashby-department-heading-level { color: inherit !important; }
.ashby-job-posting-brief-list {
  grid-column: 2;
  margin: 0 0 56px !important;
  border-top: 2px solid var(--pm-ink);
}

/* Main departments only. Ashby gives each sub-department its own
   heading ("Engineering" + "Engineering, Defi"); hide those headings
   so the sub-department's jobs run on under the main one as one list.
   Relies on the main department having at least one job of its own
   listed above its sub-departments (true for every department today);
   if one doesn't, its sub-department jobs would appear under the
   department before it. */
.ashby-department-heading:has(> .ashby-department-heading-level + .ashby-department-heading-level) {
  display: none !important;
}
.ashby-department-heading:has(> .ashby-department-heading-level + .ashby-department-heading-level) + .ashby-job-posting-brief-list {
  margin-top: -56px !important;
  border-top: 0 !important;
}

/* Each job is a row: the title across columns 4–12, a
   hairline under it, an arrow that slides in on hover. */
.ashby-job-posting-brief {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  column-gap: var(--pm-gap);
  align-items: baseline;
  margin: 0 !important;
  padding: 18px 40px 18px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pm-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: padding-left 260ms var(--pm-ease);
}
.ashby-job-posting-brief::after {
  content: "→";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translate(-8px, -50%);
  opacity: 0;
  color: var(--pm-blue);
  font-size: 18px;
  font-weight: 600;
  transition: transform 260ms var(--pm-ease), opacity 200ms var(--pm-ease);
}
a:has(> .ashby-job-posting-brief) { outline: none !important; }
a:hover > .ashby-job-posting-brief::after,
a:focus-visible > .ashby-job-posting-brief::after {
  transform: translate(0, -50%);
  opacity: 1;
}
.ashby-job-posting-brief-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
  line-height: 1.25 !important;
  color: var(--pm-ink) !important;
  transition: color 200ms var(--pm-ease);
}
a:hover .ashby-job-posting-brief-title,
a:focus-visible .ashby-job-posting-brief-title { color: var(--pm-blue) !important; }
/* The details line ("CX • Remote • Full time") repeats the
   department and adds little; the row is the title alone. Location
   is still one click away on the job page and in the filters. */
.ashby-job-posting-brief-details {
  display: none !important;
}

/* Narrow screens: one column, labels above their jobs. */
@media (max-width: 760px) {
  :root { --pm-gutter: 20px; }
  .ashby-job-board-heading { margin-top: 40px !important; font-size: 40px !important; }
  div:has(> .ashby-department-heading) { display: block !important; margin-top: 40px !important; }
  .ashby-job-posting-brief-list { margin-bottom: 40px !important; border-top: 1px solid var(--pm-line); }
  .ashby-department-heading:has(> .ashby-department-heading-level + .ashby-department-heading-level) + .ashby-job-posting-brief-list { margin-top: -40px !important; }
  .ashby-job-posting-brief { grid-template-columns: 1fr; row-gap: 4px; }
  div:has(> div > .ashby-job-board-filter) { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}

/* ── A posting ─────────────────────────────────────────────────── */
.ashby-job-posting-heading {
  margin-top: 56px !important;
  font-size: 50px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
  color: var(--pm-ink) !important;
}
.ashby-job-board-back-to-all-jobs-button {
  border-radius: 999px;
  transition: background-color 200ms var(--pm-ease);
}
.ashby-job-board-back-to-all-jobs-button:hover { background: var(--pm-blue-tint); }

/* The job page sits on the same grid as the list: facts in columns
   1–3 under an ink rule (like the department labels), the
   description in columns 4–12. Desktop only; phones keep Ashby's
   stacked layout. */
div:has(> .ashby-job-posting-heading) { margin: 0 !important; }
@media (min-width: 761px) {
  div:has(> .ashby-job-posting-left-pane) {
    grid-template-columns: 3fr 9fr !important;
    column-gap: var(--pm-gap) !important;
    padding: 0 !important;
  }
  .ashby-job-posting-left-pane {
    align-self: start;
    position: sticky;
    top: 92px;
  }
}
.ashby-job-posting-left-pane {
  padding: 4px 0 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--pm-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.ashby-job-posting-left-pane h2 {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-ink-3) !important;
}
.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li span {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--pm-ink) !important;
}
/* The last section is compensation: give the number some weight. */
.ashby-job-posting-left-pane > div:last-child li span {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--pm-blue) !important;
}

/* Tabs */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-size: 16px !important;
  font-weight: 700 !important;
}
.ashby-job-posting-right-pane-tab-slider {
  height: 3px !important;
  border-radius: 3px;
  background: var(--pm-blue) !important;
}

/* Description: readable measure, real headings, blue links. */
.ashby-job-posting-description {
  max-width: 700px;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--pm-ink-2) !important;
}
.ashby-job-posting-description p,
.ashby-job-posting-description li { color: var(--pm-ink-2) !important; }

/* One rhythm for every JD. Writers separate sections with blank
   paragraphs (one, two or none), which made the gaps uneven; those
   are hidden and the spacing below sets every gap instead. */
.ashby-job-posting-description p:empty,
.ashby-job-posting-description h1:empty,
.ashby-job-posting-description h2:empty,
.ashby-job-posting-description h3:empty,
.ashby-job-posting-description h4:empty {
  display: none !important;
}
.ashby-job-posting-description p {
  min-height: 0 !important;
  margin: 0 0 14px !important;
}
.ashby-job-posting-description ul,
.ashby-job-posting-description ol {
  margin: 0 0 14px !important;
}
.ashby-job-posting-description li {
  margin: 0 0 8px !important;
}
.ashby-job-posting-description li p {
  margin: 0 !important;
}
/* Every heading level looks the same, so a JD written with h3 (or
   h1, h4) matches one written with h2. The inner strong/span some
   JDs carry is flattened too. */
.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description h4 {
  margin: 48px 0 14px !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--pm-ink) !important;
}
.ashby-job-posting-description h1:first-child,
.ashby-job-posting-description h2:first-child,
.ashby-job-posting-description h3:first-child,
.ashby-job-posting-description h4:first-child { margin-top: 8px !important; }
.ashby-job-posting-description h1 strong,
.ashby-job-posting-description h1 b,
.ashby-job-posting-description h1 span,
.ashby-job-posting-description h1 em,
.ashby-job-posting-description h2 strong,
.ashby-job-posting-description h2 b,
.ashby-job-posting-description h2 span,
.ashby-job-posting-description h2 em,
.ashby-job-posting-description h3 strong,
.ashby-job-posting-description h3 b,
.ashby-job-posting-description h3 span,
.ashby-job-posting-description h3 em,
.ashby-job-posting-description h4 strong,
.ashby-job-posting-description h4 b,
.ashby-job-posting-description h4 span,
.ashby-job-posting-description h4 em {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: normal !important;
  color: inherit !important;
}
.ashby-job-posting-description strong { color: var(--pm-ink); font-weight: 700; }
.ashby-job-posting-description a {
  color: var(--pm-blue) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.ashby-job-posting-description ul { padding-left: 1.2em; }
.ashby-job-posting-description li::marker { color: var(--pm-blue); }

/* ── Buttons (Apply, Submit) ───────────────────────────────────── */
.ashby-job-posting-description-container button,
.ashby-application-form-submit-button {
  border-radius: 999px !important;
  min-height: 52px;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  background: var(--pm-blue) !important;
  border-color: var(--pm-blue) !important;
  transition: transform 200ms var(--pm-ease), background-color 200ms var(--pm-ease), box-shadow 200ms var(--pm-ease);
}
.ashby-job-posting-description-container button:hover,
.ashby-application-form-submit-button:hover {
  background: var(--pm-blue-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(22, 82, 240, 0.6);
}

/* ── Application form ──────────────────────────────────────────── */
.ashby-application-form-autofill-input-root {
  border-radius: 16px !important;
  border: 1px solid #C9D5FF !important;
  background: var(--pm-blue-tint) !important;
}
.ashby-application-form-autofill-input-title { font-weight: 700 !important; color: var(--pm-ink) !important; }
.ashby-application-form-question-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--pm-ink) !important;
}
.ashby-application-form-input-text,
.ashby-application-form-input-autocomplete,
.ashby-application-form-container textarea {
  border-radius: 12px !important;
  border: 1px solid var(--pm-line) !important;
  background: #fff !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
  transition: border-color 200ms var(--pm-ease), box-shadow 200ms var(--pm-ease);
}
.ashby-application-form-input-text:focus,
.ashby-application-form-input-autocomplete:focus,
.ashby-application-form-container textarea:focus {
  outline: none !important;
  border-color: var(--pm-blue) !important;
  box-shadow: 0 0 0 4px rgba(22, 82, 240, 0.12) !important;
}
.ashby-application-form-input-file {
  border-radius: 16px !important;
  border: 1.5px dashed #C9D5FF !important;
  background: var(--pm-ground) !important;
  transition: background-color 200ms var(--pm-ease), border-color 200ms var(--pm-ease);
}
.ashby-application-form-input-file:hover {
  border-color: var(--pm-blue) !important;
  background: var(--pm-blue-tint) !important;
}
.ashby-application-form-input-yesno-option {
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Phones: the headlines step down. */
@media (max-width: 640px) {
  .ashby-job-board-heading { font-size: 36px !important; }
  .ashby-job-posting-heading { font-size: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
