/*
 * Dark theme for the Ashby job board embedded on /careers.
 *
 * Ashby injects this file into the board iframe when its URL is passed as the
 * customCssUrl setting AND that exact URL is allowlisted under
 * Ashby Admin > Job Boards > Theme. Without the allowlist entry Ashby ignores
 * the parameter and the board renders in its default light theme, so this file
 * failing to apply degrades gracefully.
 *
 * Allowlist this URL: https://www.prefect.io/ashby-job-board.css
 *
 * IMPORTANT — only target `ashby-*` classes. Ashby also puts CSS-module classes
 * on these elements (_jobPosting_1dvh9_378, _filter_1dvh9_135, ...) whose
 * hashes change on every Ashby deploy. The `ashby-*` classes are the stable
 * hooks. Selectors are prefixed with `body` to win specificity ties against
 * Ashby's own single-class rules.
 *
 * On !important: most properties below override cleanly, but Ashby's module
 * rules outrank a plain hook class for a few specific properties (the select
 * face, the posting card's border and radius, the footer link color). Those are
 * marked, and only those. Everything unmarked was verified to apply without it.
 *
 * Colors are hardcoded because this stylesheet loads inside Ashby's iframe and
 * has no access to the site's CSS variables. They mirror the dark values of the
 * site tokens; keep them in sync with @repo/tailwind-config.
 */

:root {
  --prefect-background: #0a0a0a; /* --background */
  --prefect-foreground: #fafafa; /* --foreground */
  --prefect-card: #171717; /* --card */
  --prefect-muted: #262626; /* --muted */
  --prefect-muted-foreground: #a1a1a1; /* --muted-foreground */
  --prefect-primary: #e5e5e5; /* --primary */
  --prefect-primary-foreground: #171717; /* --primary-foreground */
  /* the site's Button is `hover:bg-primary/90` — it darkens on hover, and the
     alpha composites the same way here as it does there */
  --prefect-primary-hover: rgba(229, 229, 229, 0.9);
  /* the blog sets body copy at 80% of the foreground, which is where its light
     grey comes from; prose in the board should read the same way */
  --prefect-prose: rgba(250, 250, 250, 0.8);
  --prefect-border: rgba(255, 255, 255, 0.1); /* --border */
  --prefect-input: rgba(255, 255, 255, 0.15); /* --input */
  /* --destructive, which the site's dark theme sets in oklch — converted here
     because this file cannot reach the site's tokens, same as the greys above.
     The surface and edge are the `bg-destructive/10` and `border-destructive/50`
     pairing the site already uses for its own error blocks, spelled out as alpha
     because there is no colour-mix support to lean on inside the iframe. */
  --prefect-destructive: #ff6467;
  --prefect-destructive-surface: rgba(255, 100, 103, 0.1);
  --prefect-destructive-border: rgba(255, 100, 103, 0.5);
  --prefect-radius: 0.625rem; /* --radius, for cards */
  /* the site's buttons and inputs are rounded-md, tighter than its cards */
  --prefect-radius-control: 6px;
  --prefect-font:
    "Geist", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* The same Geist cut the site serves, self-hosted at a stable path because
   next/font's own copies are content-hashed and change on every build. Ashby's
   iframe allows this: its CSP is `font-src https://cdn.ashbyprd.com https:`.
   Latin subset only — anything outside it falls through to the stack above,
   which is what Ashby already renders in today. */
@font-face {
  font-family: "Geist";
  src: url("https://www.prefect.io/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* color-scheme flips the native select popup, scrollbars and form controls to
   their dark variants — without it the open option list stays light on every OS */
html,
body {
  background: var(--prefect-background);
  color: var(--prefect-foreground);
  color-scheme: dark;
  font-family: var(--prefect-font) !important;
  line-height: 1.5;
}

/* Ashby sets its own stack on individual elements, so inheriting from body is
   not enough to carry Geist through the whole board. */
body * {
  font-family: inherit !important;
}

/* ---------------------------------------------------------------- headings */

/* The site sets headings in 600 with negative tracking that tightens as they
   get larger, and leaves body copy at 400. Ashby's own scale is flatter, so
   the sizes below step it out to match. */

/* "Open Positions (5)". The intro block above it ("Join us.") carries only
   hashed classes, so it inherits the body color set above instead. */
body .ashby-job-board-heading {
  color: var(--prefect-foreground);
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

body .ashby-job-board-heading-count {
  color: var(--prefect-muted-foreground);
  font-weight: 400 !important;
}

body .ashby-department-heading,
body .ashby-department-heading-level {
  color: var(--prefect-foreground);
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------- filters */

body .ashby-job-board-filters-label {
  color: var(--prefect-muted-foreground);
  font-size: 0.875rem !important;
}

body .ashby-job-board-reset-filters-label {
  color: var(--prefect-muted-foreground);
  background: transparent;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: color 0.15s ease;
}

body .ashby-job-board-reset-filters-label:hover {
  color: var(--prefect-foreground);
}

/* Ashby paints these selects with a white linear-gradient background-image over
   a white background-color, so background-color alone leaves the face white —
   the shorthand plus an explicit background-image reset is what clears it.
   Sized like the site's own inputs: 40px tall, 14px text, rounded-md, and the
   page background rather than a fill, so only the border draws the field. */
body .ashby-job-board-filter {
  background: var(--prefect-background) !important;
  background-image: none !important;
  border: 1px solid var(--prefect-input) !important;
  border-radius: var(--prefect-radius-control) !important;
  color: var(--prefect-foreground) !important;
  font-size: 0.875rem !important;
  height: 2.5rem !important;
  transition: border-color 0.15s ease;
}

body .ashby-job-board-filter:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Below Ashby's own breakpoint the selects collapse behind a single
   "Filter Open Positions..." button wrapped in a light pill. Neither the button
   (_filtersOpen_*) nor the pill (_filtersContainer_*) carries an ashby-* class,
   so the pill is reached through the button it contains. [class*="ashby-"] keys
   off the stable prefix rather than a hash, and excluding it leaves the reset
   button (which does have a hook) to the rule above.

   The `:has(.ashby-job-board-filter)` is what keeps this to the filter pill.
   Without it the selector is just "a div containing a button", which also
   matched the resume upload button's wrapper on the application form and drew
   a second border around it; the same over-broad button rule was underlining
   that button on hover. Only the pill wraps the filter selects, so requiring
   one is the discriminator.

   :has() is the only way to reach a parent in CSS. Browsers without it just
   keep Ashby's light pill — the board stays legible either way. */
body div:has(> button:not([class*="ashby-"])):has(.ashby-job-board-filter) {
  background: var(--prefect-card) !important;
  border: 1px solid var(--prefect-border) !important;
  border-radius: var(--prefect-radius) !important;
}

body
  div:has(.ashby-job-board-filter)
  > button:not([class*="ashby-"]) {
  color: var(--prefect-foreground) !important;
  text-decoration: none !important;
}

body
  div:has(.ashby-job-board-filter)
  > button:not([class*="ashby-"]):hover {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------ job postings */

/* Cards within a department stack flush: Ashby leaves no space between them at
   desktop widths, so two bordered cards meet on what looks like one shared
   line and a department reads as a single segmented block rather than as
   separate roles. A column gap separates them — 8px, against the 32px that
   precedes the next department heading, so the cards still group under their
   heading rather than floating between two of them.

   Ashby does space these on mobile, but through a margin-top on the card under
   its own breakpoint, which the gap would stack on top of (16px + 8px). The
   margin is cleared so the gap is the only source of spacing at every width.
   Only the top is reset: the card also carries a -4px left margin that hangs it
   slightly past the list, and that alignment is Ashby's to make.

   Neither rule needs !important. Ashby lays the list out and spaces the card
   with a single module class each, which `body` plus a hook already outranks —
   a media query adds no specificity of its own. */
body .ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body .ashby-job-posting-brief-list .ashby-job-posting-brief {
  margin-top: 0;
}

body .ashby-job-posting-brief {
  background-color: var(--prefect-card);
  /* border and radius lose to Ashby's module rule without these */
  border: 1px solid var(--prefect-border) !important;
  border-radius: var(--prefect-radius) !important;
  color: var(--prefect-foreground);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

body .ashby-job-posting-brief-list a:hover .ashby-job-posting-brief {
  background-color: var(--prefect-muted);
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* Ashby's default is a saturated blue (#0225ac) that fights the dark surface;
   the site treats links as foreground text that underlines on hover */
body .ashby-job-posting-brief-title {
  color: var(--prefect-foreground);
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none;
}

body .ashby-job-posting-brief-list a:hover .ashby-job-posting-brief-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body .ashby-job-posting-brief-details {
  color: var(--prefect-muted-foreground);
  font-size: 0.875rem !important;
}

/* ------------------------------------------------ a single job posting */

/* Everything above styles the board's list view. Opening a posting swaps in a
   different view — reached at /careers?ashby_jid=… — that the list rules do not
   touch, which left it half-themed: the body colour applied, but Ashby's own
   white panes did not, so near-white text sat on white.

   Both panes are painted white by Ashby. On dark they should recede into the
   page the same way they recede into a white one in Ashby's own theme, so they
   go transparent rather than becoming cards. */
body .ashby-job-posting-left-pane,
body .ashby-job-posting-right-pane > div {
  background: transparent !important;
}

/* the posting title is the largest thing on the detail view, so it takes the
   tighter tracking the site uses as headings scale up */
body .ashby-job-posting-heading {
  color: var(--prefect-foreground) !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em;
}

body .ashby-job-board-back-to-all-jobs-button {
  color: var(--prefect-muted-foreground) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

body .ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--prefect-foreground) !important;
}

/* Overview / Application tabs.

   Neither tab carries a selected-state attribute or class — only its stable
   hook — so CSS cannot tell which one is active, and colouring the active label
   differently is not available. What was missing instead was the track: a lone
   2px line under one of two identically-styled labels reads as a stray rule,
   not as a selected tab. Giving the strip a baseline for the indicator to sit
   on is what makes it legible as a tab bar, and the labels drop to the 14px
   medium the site uses for navigation so they stop competing with the posting
   title above them. */
body .ashby-job-posting-right-pane > nav {
  border-bottom: 1px solid var(--prefect-border) !important;
}

body .ashby-job-posting-right-pane-overview-tab,
body .ashby-job-posting-right-pane-application-tab {
  color: var(--prefect-foreground) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* the indicator sits on the baseline above, so it needs to be brighter and
   thicker than the track to read as sitting on top of it */
body .ashby-job-posting-right-pane-tab-slider {
  background: var(--prefect-foreground) !important;
  height: 2px !important;
}

/* In the left pane the field labels and the compensation headings carry their
   own slate colours; the values under them inherit and are already right. */
body .ashby-job-posting-left-pane h2 {
  color: var(--prefect-muted-foreground) !important;
}

body .ashby-job-posting-left-pane span {
  color: var(--prefect-foreground) !important;
}

/* The description, set to the blog's prose scale rather than Ashby's.

   Every rule in this group is scoped away from the application form, because
   both tabs render into the same `right-pane > div` wrapper — the form is not
   in a container of its own. Without the exclusion these rules reach the form
   and outrank the form-specific rules further down on element count: the
   resume helper text and "(optional)" markers inflate to 16px prose, and worse,
   all three of the form's section headers are `h2:first-child`, so the intro
   rule below turns "Personal Information", "Application" and "Optional Links"
   into body copy and they stop reading as headings at all.

   The form container is the discriminator: it exists on the Application tab and
   not on Overview. Browsers without :has() drop these rules and the description
   falls back to Ashby's own typography, which is legible — the previous
   behaviour, not a broken one.

   The link rule at the end is deliberately left unscoped: the form has no links
   today, and if Ashby adds legal or captcha links there they should be legible
   rather than left in Ashby's blue.

   Ashby renders this at 16px on a 24px leading in full-strength foreground, and
   opens with a paragraph whose bold runs are 18px — which is why the section
   read as shouting. The blog sets body copy at 16px on 28px at 80% of the
   foreground, so that is what prose here follows: the size is unchanged, the
   leading opens up, and the light grey stops it competing with the headings.

   Emphasis and section headings step back up to full strength, so the hierarchy
   is heading, then bold, then prose, rather than three things all at white. */
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  p,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  li {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--prefect-prose) !important;
}

body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  strong,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  b {
  /* Size is deliberately not set: bold text inherits whatever it sits in, so a
     section heading whose text is wrapped in <strong> keeps the heading size
     instead of being pulled down to prose. What this rule is actually for is
     the colour — emphasis needs full strength to read against prose set at 80%.
     The lede's own bold runs are handled by the rule below, which is more
     specific and takes them down with it. */
  font-weight: 600 !important;
  color: var(--prefect-foreground) !important;
}

body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  h1,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  h2,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  h3 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: var(--prefect-foreground) !important;
  letter-spacing: -0.01em;
}

/* Ashby wraps the description's opening paragraph in an <h2> — the same tag it
   uses for the real section headings below it ("Role Summary:", "What You'll
   Do:") — so the rule above was styling the lede as a heading, giving it a size
   and weight of its own against the prose it introduces. It is set as body copy
   instead, matching the leading and weight of everything around it.

   Its own bold runs come down with it: they are 600 inside the h2 and would
   otherwise keep the intro looking emphasised. Links are left alone, so they
   keep the prose link treatment.

   The chain is all direct children on purpose. `h2:first-child` as a descendant
   would mean "any h2 that starts its own parent", which catches a heading at the
   top of any nested block a description happens to contain — author-written HTML,
   so that is not hypothetical. Requiring the first heading of the first block
   pins it to the lede: the real headings are later siblings, and a wrapped
   section further down cannot match. Verified across three postings that this
   still selects the lede and nothing else. */
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  > div:first-child
  > h2:first-child,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  > div:first-child
  > h2:first-child
  strong,
body
  .ashby-job-posting-right-pane
  > div:not(:has(.ashby-application-form-container))
  > div:first-child
  > h2:first-child
  b {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  letter-spacing: normal !important;
  color: var(--prefect-prose) !important;
}

/* Description links. The blog renders prose links at the primary tone in medium
   weight, underlined, so these match. Only colour and weight are set: Ashby
   already underlines prose links, and declaring it here would also underline the
   Apply button below, which is a button wrapped in a link — an ancestor's
   underline cannot be cancelled by the child. */
body .ashby-job-posting-right-pane > div a,
body .ashby-job-posting-right-pane > div a strong,
body .ashby-job-posting-right-pane > div a b {
  color: var(--prefect-primary) !important;
  font-weight: 500 !important;
  text-underline-offset: 4px;
}

/* "Apply for this Job" closes the description. It is a button wrapped in a
   link — the only such pairing on the view, and outside the form, so none of
   the form rules below reach it. Ashby ships it as a blue pill whose hover
   drops the background to near-black, which against this page makes the button
   disappear on hover. Styling the base with !important settles that on its own,
   since Ashby's hover rule is not itself !important, but the hover is stated
   anyway so the button brightens on the way rather than doing nothing. */
body .ashby-job-posting-right-pane a button[class] {
  background: var(--prefect-primary) !important;
  color: var(--prefect-primary-foreground) !important;
  border-color: var(--prefect-primary) !important;
  border-radius: var(--prefect-radius-control) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  min-height: 2.5rem;
}

body .ashby-job-posting-right-pane a button[class]:hover {
  background: var(--prefect-foreground) !important;
  border-color: var(--prefect-foreground) !important;
}

/* --------------------------------------------------- the application form */

/* the autofill pane is a sibling of the form container, not a descendant, so
   both are named wherever the form is addressed as a whole */
body .ashby-application-form-container,
body .ashby-application-form-autofill-pane,
body .ashby-application-form-autofill-input-root,
body .ashby-application-form-autofill-input-drag-layer,
body .ashby-application-form-autofill-input-pending-layer {
  background: transparent !important;
}

body .ashby-application-form-section-header-title,
body .ashby-application-form-question-title,
body .ashby-application-form-autofill-input-title {
  color: var(--prefect-foreground) !important;
}

body .ashby-application-form-question-description,
body .ashby-application-form-autofill-input-description {
  color: var(--prefect-muted-foreground) !important;
}

/* Helper copy in the form that carries no ashby-* hook — the drop zone's "or
   drag and drop here" and the like. Ashby leaves it in a dark slate (#545b6d)
   that is close to unreadable here. It was previously being recoloured by
   accident, when the description's prose rules still reached the form; now that
   they are scoped out, it needs its own rule. Sizes are left to Ashby, which
   already keeps this copy compact. */
body .ashby-application-form-container p,
body .ashby-application-form-autofill-pane p {
  color: var(--prefect-muted-foreground) !important;
}

/* Ashby leaves these dark-on-transparent, which is invisible here. Sized like
   the site's inputs, same as the board's filter selects above. */
body .ashby-application-form-container input,
body .ashby-application-form-container textarea,
body .ashby-application-form-container select {
  background: var(--prefect-background) !important;
  background-image: none !important;
  border: 1px solid var(--prefect-input) !important;
  border-radius: var(--prefect-radius-control) !important;
  color: var(--prefect-foreground) !important;
  font-size: 0.875rem !important;
}

/* The upload and yes/no buttons have no ashby-* hook, so they are reached
   through their containers. [class] is there purely for specificity: Ashby
   styles them through two hashed classes at once, which outranks a single hook
   class, and matching on the attribute beats that without naming a hash.
   Excluding the submit button by class keeps the two rules from competing.

   `_errorFieldLink_` is excluded because this rule was reaching the field names
   inside the validation panel and drawing a bordered box around each one — they
   are buttons that scroll to the field, not controls to outline. They are styled
   as links in the validation section below. Matching the module's local name is
   the same tactic the yes/no selected state uses further down, for the same
   reason: Ashby gives these no hook of their own. */
body
  .ashby-application-form-container
  button[class]:not(.ashby-application-form-submit-button):not([class*="_active_"]):not([class*="_errorFieldLink_"]),
body .ashby-application-form-autofill-pane button[class] {
  /* Ashby outlines these at 2px, which reads as a heavy frame around the
     button; the site's outline buttons are 1px, like its inputs */
  border: 1px solid var(--prefect-input) !important;
  color: var(--prefect-foreground) !important;
  border-radius: var(--prefect-radius-control) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* The chosen answer in a yes/no pair. Ashby marks it by filling the button
   #070e10, which against this page is a 1.02:1 difference — the selection is
   invisible, on required fields, which is a correctness problem rather than a
   cosmetic one. It is filled with the site's primary instead.

   This is the one place the stylesheet reaches for a hashed class, because
   Ashby exposes the state no other way: no aria-pressed, no data attribute,
   only `_active_<hash>`. Matching the module's local name rather than the hash
   survives Ashby's rebuilds; if they rename it the rule stops matching and the
   selection goes back to being hard to see, which is where it is today.

   The rule above excludes this state explicitly rather than relying on
   specificity or order, so the two can never fight over the label colour —
   white on the near-white fill measured 1.21:1 when they did. */
body .ashby-application-form-container button[class*="_active_"] {
  background: var(--prefect-primary) !important;
  color: var(--prefect-primary-foreground) !important;
  border-color: var(--prefect-primary) !important;
  border-radius: var(--prefect-radius-control) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

body .ashby-application-form-container
  button[class]:not(.ashby-application-form-submit-button):not([class*="_errorFieldLink_"]):hover,
body .ashby-application-form-autofill-pane button[class]:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Icons inside these buttons carry their own fill, independent of the text
   colour: blue on the back link and the upload buttons, and hardcoded white on
   the submit button — which was invisible once that button became near-white.
   The submit button is not inside the form container, so it has to be named. */
body .ashby-job-board-back-to-all-jobs-button svg path,
body .ashby-application-form-container button svg path,
body .ashby-application-form-autofill-pane button svg path,
body .ashby-application-form-submit-button svg,
body .ashby-application-form-submit-button svg path {
  fill: currentColor !important;
}

/* Ashby ships this as a blue pill. The site's primary button is a near-white
   rounded-md block, 40px tall with 14px medium text, bordered in its own fill
   colour — the border is matched so the geometry lines up with the site's. */
body .ashby-application-form-submit-button {
  background: var(--prefect-primary) !important;
  color: var(--prefect-primary-foreground) !important;
  border-color: var(--prefect-primary) !important;
  border-radius: var(--prefect-radius-control) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  min-height: 2.5rem;
}

/* The site's Button darkens on hover. This previously brightened to the
   foreground instead, a step of #e5e5e5 to #fafafa that was hard to see at all;
   darkening matches the site and is the more legible direction. */
body .ashby-application-form-submit-button:hover {
  background: var(--prefect-primary-hover) !important;
  border-color: var(--prefect-primary-hover) !important;
}

/* --------------------------------------------- validation and failure */

/* Submitting an incomplete application puts a panel above the form listing what
   is missing, and a failed submit puts the same component in the failure
   container. Ashby paints both as a solid #891b1b block with white text — a red
   billboard, which is louder than anything else on this page and reads as
   breakage rather than as a form that needs a few more answers. The site states
   its own error blocks as a tinted surface with a destructive edge and keeps the
   copy at the ordinary text colours, so that is what these become.

   Neither panel carries an ashby-* class — the hooks stop at the two containers
   — so the panel itself is reached by the role Ashby sets on it. `role="alert"`
   is a stable hook of a different kind: it is the accessibility contract for
   this element, so it cannot be dropped without breaking announcement, and both
   panels declare it. The heading is an <h2> and the reasons are an <li> each,
   both plain tags inside a container that holds nothing else, so tag selectors
   are enough below the panel and no hash is named.

   The scheduling flow uses this same component for its own warnings, but that is
   a different page than the embedded board, and both selectors are scoped to a
   form container regardless. */
body .ashby-application-form-container [role="alert"],
body .ashby-application-form-failure-container [role="alert"] {
  background: var(--prefect-destructive-surface) !important;
  border: 1px solid var(--prefect-destructive-border) !important;
  border-radius: var(--prefect-radius) !important;
  /* Ashby lifts the panel off the page with a shadow tuned for a white
     background; on this one it only muddies the edge */
  box-shadow: none !important;
  padding: 1rem !important;
}

/* Ashby sets this at 12px — smaller than the reasons underneath it, so the
   heading reads as a caption on top of the list rather than as its label. The
   site's equivalent is `text-sm font-medium text-destructive`: same size as the
   copy it introduces, separated by weight and colour instead. */
body .ashby-application-form-container [role="alert"] h2,
body .ashby-application-form-failure-container [role="alert"] h2 {
  color: var(--prefect-destructive) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
}

/* The reasons, and the failure panel's single line of copy. Muted rather than
   the white Ashby uses, so the panel carries one emphasis — its heading — and
   the tinted surface is what marks the whole thing as an error. */
body .ashby-application-form-container [role="alert"] li,
body .ashby-application-form-container [role="alert"] p,
body .ashby-application-form-failure-container [role="alert"] p {
  color: var(--prefect-muted-foreground) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

body .ashby-application-form-container [role="alert"] ul {
  padding-left: 1.25rem !important;
}

/* 12px between reasons is loose enough that a long list stops reading as one
   block; the site's tight list spacing suits it better */
body .ashby-application-form-container [role="alert"] li {
  margin-top: 0.5rem !important;
}

/* Each reason names its field, as a button that scrolls the form to it. The site
   renders in-text links as foreground text underlined at a 4px offset, which is
   also what the board's fallback link uses, so these follow it — and against the
   muted copy around them the field name is what stands out, which is the point
   of it being a link. Padding and border are cleared because the generic form
   button rule above was outlining them; that rule now skips these, and this
   states the treatment rather than relying on what Ashby happens to leave. */
body .ashby-application-form-container [role="alert"] button[class] {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--prefect-foreground) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

body .ashby-application-form-container [role="alert"] button[class]:hover {
  color: var(--prefect-primary) !important;
}

/* ------------------------------------------------------- chrome and a11y */

/* "Powered by Ashby". Its default slate (#545b6d) is close to unreadable on
   #0a0a0a. The [href] bumps specificity above Ashby's hashed class, which
   plain `body footer a` loses to even with !important. */
body footer a[href] {
  color: var(--prefect-muted-foreground) !important;
}

body footer a[href]:hover {
  color: var(--prefect-foreground) !important;
}

/* the default focus ring is tuned for a white page and nearly vanishes here */
body a:focus-visible,
body button:focus-visible,
body select:focus-visible {
  outline: 2px solid var(--prefect-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body .ashby-job-board-filter,
  body .ashby-job-posting-brief,
  body .ashby-job-board-reset-filters-label {
    transition: none;
  }
}