/* =========================================================================
   Ashby Custom CSS — TASTE careers embed  (HOSTED / URL ROUTE)
   Load via: Admin > Job Boards > Theme > "Allowed custom CSS URLs"
   ========================================================================= */

/* --- BRAND FONTS ----------------------------------------------------------
   MATTER: served from your own R2 bucket (r2.tastelabs.com) — licensed +
   stable. Matter ships static weights; the board's 600 requests are mapped
   to Matter Medium (the heaviest weight available) below.

   AZERET SemiMono: TEMPORARY — still pointing at the Webflow CDN *TRIAL*
   file (evaluation-license only, hash-based URL that breaks on re-upload).
   Swap this src to the licensed Azeret SemiMono on R2 when ready. The free
   Azeret Mono variable file already on R2 is a different (fully-monospaced)
   design, so it is intentionally NOT used here.                              */
@font-face {
  font-family: "Matter";
  font-weight: 400;
  font-display: swap;
  src: url("https://r2.tastelabs.com/assets/fonts/matter/Matter-Regular.woff2") format("woff2"),
       url("https://r2.tastelabs.com/assets/fonts/matter/Matter-Regular.woff") format("woff");
}
@font-face {
  font-family: "Matter";
  font-weight: 600;   /* maps the board's 600 requests to Matter Medium (heaviest available) */
  font-display: swap;
  src: url("https://r2.tastelabs.com/assets/fonts/matter/Matter-Medium.woff2") format("woff2"),
       url("https://r2.tastelabs.com/assets/fonts/matter/Matter-Medium.woff") format("woff");
}
@font-face {
  font-family: "Azeret SemiMono";
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6a1d5baf94efef5f7c435fc3/6a1d5c308a2571c8c23842ae_AzeretSemiMono-TRIAL-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Azeret SemiMono";
  font-weight: 600;   /* no heavier trial file exists -> use Regular for 600 requests */
  font-display: swap;
  src: url("https://cdn.prod.website-files.com/6a1d5baf94efef5f7c435fc3/6a1d5c308a2571c8c23842ae_AzeretSemiMono-TRIAL-Regular.ttf") format("truetype");
}

:root {
  --colorAppBackground: #212121;        /* was transparent -> showed Ashby's white page. This is the ONLY supported background lever. */
  /* NOTE: the board/posting width vars (--widthMaxJobBoard, --widthMaxContent,
     etc.) are intentionally NOT set here — they stay at Ashby's default capped/
     centered widths so the STANDALONE hosted board doesn't stretch across huge
     screens. They're forced to 100% ONLY in the embed, via the
     :root:has(footer[class*="embedded"]) rule right after this block. */
  --fontFamily: "Matter", "Helvetica Neue", Arial, sans-serif;
  --colorPrimary900: #F5F7F2;
  --colorPrimary600: #F5F7F2;
  /* Translucent accent ("primary 500 alpha"). Ashby's input focus ring is
     var(--colorPrimary500A); it defaulted to a blue (#0800ea21) that no
     selector override could beat because the value comes from this variable.
     Overriding the variable itself recolors the ring to a soft off-white. */
  --colorPrimary500A: rgba(245, 247, 242, 0.35);
  /* Accent "shadow" var. Ashby uses it for button hover glows; it defaulted to
     a purple (#18145740). Recolor to a faint off-white so hovers aren't purple. */
  --colorPrimaryShadow: rgba(245, 247, 242, 0.10);
  --borderRadiusContainer: 0;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 8px;
  --hairline: rgba(245, 247, 242, 0.16);
}

/* --- EMBED-ONLY: full-width, left-aligned board + posting ------------------
   When the board is embedded (the website loads it with ?embed=js), Ashby adds
   an "_embedded…" class to the <footer> — it's absent on the standalone hosted
   board. We use that as a real embed signal: :root:has(footer[class*=embedded])
   matches ONLY in the embed. There we force the width vars to 100% so the board
   + posting fill and left-align with the site's "Careers" heading; on the
   standalone hosted board the vars stay at Ashby's default centered cap, so it
   doesn't stretch across large screens. (True detection — not a width guess.) */
:root:has(footer[class*="embedded"]) {
  --widthMaxJobBoard: 100% !important;
  --widthMaxContent: 100% !important;
  --widthMaxJobPosting: 100% !important;
  --widthMaxApplication: 100% !important;
  --widthMaxJobPostingPage: 100% !important;
}

/* Embed only: also remove Ashby's 12px side inset so the content sits flush with
   the iframe's left edge (= the site's "Careers" heading). That 12px lives as
   padding on a hashed "_content" wrapper, shared by BOTH the list and the
   posting. We reach that wrapper structurally: on the posting it directly holds
   .ashby-job-posting-left-pane; on the list it holds the departments group
   (a div whose child is .ashby-department-heading). On the hosted board this
   inset is left intact (gives breathing room from the browser edge). */
:root:has(footer[class*="embedded"]) div:has(> .ashby-job-posting-left-pane),
:root:has(footer[class*="embedded"]) div:has(> div > .ashby-department-heading) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The page/board headings sit in a SEPARATE "_titles" wrapper (margin-left:24px)
   that isn't inside _content, so the rule above doesn't move them. Their normal
   -12px fix lined them up with the 12px-inset body; with that inset gone in the
   embed, pull them the remaining 12px (to -24px total) so they stay aligned. */
:root:has(footer[class*="embedded"]) .ashby-job-posting-heading,
:root:has(footer[class*="embedded"]) .ashby-job-board-heading {
  margin-left: -24px !important;
}

/* --- (0) HOSTED PAGE BACKGROUND -------------------------------------------
   Ashby's validator only allows its own whitelisted .ashby-* classes, so the
   page background is controlled entirely via --colorAppBackground /
   --colorBackground in :root above (set to #212121).                        */

/* --- (1) LEFT ALIGNMENT ---------------------------------------------------
   The job rows sit at 12px (their wrapper uses padding-left:12px) but Ashby
   indents the whole header block 12px further: the heading is wrapped in an
   internal div (_titles, margin-left:24px) and the filters live in a separate
   locked grid (_filters, offset 24px). Those wrappers are hashed classes that
   are NOT on Ashby's allowed list, so we can't zero their offset directly.
   Instead we pull the whitelisted children back 12px to line them up with the
   rows. No padding is added anywhere.
   - Heading: negative margin works.
   - Filter label + dropdowns: Ashby forces margin:0 on these (beats even
     inline styles), so we nudge them with relative positioning instead.      */
.ashby-job-board-heading {
  margin-left: -12px !important;
  padding-left: 0 !important;
}
.ashby-job-board-filters-label,
.ashby-job-board-filter {
  position: relative !important;
  left: -12px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.ashby-job-board-heading-count,
.ashby-job-posting-brief-list {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* --- (2) CATEGORY LABEL + BULLET ON ONE LINE ------------------------------ */
/* Double class = enough specificity to beat Ashby's own display rule */
.ashby-department-heading.ashby-department-heading,
.ashby-job-posting-brief-department-heading.ashby-job-posting-brief-department-heading {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.6rem !important;
  color: #F5F7F2 !important;
  font-family: "Azeret SemiMono", monospace !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 0.8125rem !important;
  text-align: left !important;
  margin: 3rem 0 1.75rem 0 !important;
  padding: 2rem 0 0 0 !important;
  border-top: 1px solid var(--hairline) !important;
}
/* keep the inner text element from forcing its own line */
.ashby-department-heading > *,
.ashby-job-posting-brief-department-heading > * {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ashby-department-heading::before,
.ashby-job-posting-brief-department-heading::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

/* --- FILTER / CTA LABELS -------------------------------------------------- */
.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label,
.ashby-job-board-back-to-all-jobs-button {
  color: #F5F7F2 !important;
  font-family: "Azeret SemiMono", monospace !important;
  font-weight: 600 !important;
  text-align: left !important;
}
/* "All Jobs" back button (shows above a posting, esp. in the website embed):
   its back-arrow icon shipped with a near-black fill (#1E1E1E) so it was
   invisible until hover, and it had an ugly box-shadow on hover. Recolor the
   icon to off-white and kill the shadow. */
.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg * {
  fill: #F5F7F2 !important;
}
.ashby-job-board-back-to-all-jobs-button,
.ashby-job-board-back-to-all-jobs-button:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- TITLES --------------------------------------------------------------- */
.ashby-job-board-heading,
.ashby-job-board-heading-count,
.ashby-job-posting-heading,
.ashby-job-posting-brief-title {
  color: #F5F7F2 !important;
  font-family: "Matter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  text-align: left !important;
}

/* --- DETAIL + SALARY LINES ------------------------------------------------ */
.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details * {
  color: #F5F7F2 !important;
  opacity: 1 !important;
  font-family: "Matter", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  text-align: left !important;
}
.ashby-job-posting-brief-details {
  margin: 0.4rem 0 0 0 !important;
  padding-left: 0 !important;
}

/* --- (3) JOB ROW: line ABOVE each role + "Open position" aligned to title - */
.ashby-job-posting-brief {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 2rem 0 !important;
  text-align: left !important;
}
.ashby-job-posting-brief-title::after {
  content: "Open position" !important;
  position: absolute !important;
  top: 2rem !important;
  right: 0 !important;
  font-family: "Azeret SemiMono", monospace !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.02em !important;
  color: #F5F7F2 !important;
}

/* --- LIST ----------------------------------------------------------------- */
.ashby-job-posting-brief-list {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* --- Filter controls ------------------------------------------------------ */
.ashby-job-board-filter {
  background: transparent !important;
  color: #F5F7F2 !important;
  border: 1px solid #444 !important;
  border-radius: 8px !important;
  text-align: left !important;
}
/* Inset the dropdown label off the left border. Ashby locks padding on these
   selects (beats !important), so we use text-indent with the double-class
   specificity trick instead. */
.ashby-job-board-filter.ashby-job-board-filter {
  text-indent: 14px !important;
}
/* Recolor + reposition the dropdown chevron. The icon lives in an Ashby
   internal sibling div (absolutely positioned, not on the allowed class list)
   and its <path> fills with currentColor, so we reach it as a following
   sibling of the select:
   - color #F5F7F2: its hard-coded dark slate (#373E4D) was nearly invisible.
   - right 28px: pulling the select left by 12px (alignment fix above) moved
     the select's right border inward so the chevron sat flush against it;
     this restores a ~16px gap from the border.                              */
.ashby-job-board-filter ~ * {
  color: #F5F7F2 !important;
  right: 28px !important;
}

/* --- MOBILE: collapsed filters --------------------------------------------- */
/* On narrow screens Ashby collapses the filters into a "Filter Open Positions…"
   trigger that opens a panel. Both shipped off-brand: the trigger text was dark
   (#1E1E1E, invisible on the dark board) and the panel/bar had a near-white
   background (so the white filter text + close icon were white-on-white).
   These use hashed classes, reached via [class*=…] (attribute selectors, which
   your validator accepts). */
button[class*="filtersOpen"] {                 /* the trigger text */
  color: #F5F7F2 !important;
  justify-content: flex-start !important;      /* was centered -> left-align it */
  text-align: left !important;
  padding-left: 0 !important;                  /* had 6px -> nudge flush with the rows */
}
[class*="filtersContainer"] {                  /* the collapsed bar + open panel */
  background: #212121 !important;
}
[class*="filtersVisible"] {                    /* open panel */
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;               /* was square */
}
/* The dropdowns + "Filters:" label carry the desktop `left:-12px` alignment
   shift, which inside this padded panel cancelled the panel's left padding
   (content sat flush against the border). Reset it here so the panel's 12px
   padding is respected. (Double class on the select beats Ashby's own rule.) */
[class*="filtersVisible"] .ashby-job-board-filters-label,
[class*="filtersVisible"] .ashby-job-board-filter.ashby-job-board-filter {
  left: 0 !important;
}
[class*="filtersVisible"] .ashby-job-board-filter ~ * {
  right: 16px !important;                       /* chevron gap, normal (no -12 shift here) */
}
/* the close/reset (×) button shipped a light-grey fill that hid its off-white
   icon — drop the fill (and any border box) so just the × shows on the panel. */
.ashby-job-board-reset-filters-label {
  background: transparent !important;
  border: none !important;
}

/* On mobile the title wraps and the absolute "Open position" tag we add to each
   row (.ashby-job-posting-brief-title::after) overlaps it. Hide that tag on
   narrow screens — it's redundant there (the page header already says
   "Open Positions"). Shown again on wider screens incl. the embed iframe. */
@media (max-width: 768px) {
  .ashby-job-posting-brief-title::after {
    display: none !important;
  }
}

/* NB: the sticky-header / tab-bar SOLID BACKGROUND lives further down, AFTER
   the "JOB POSTING DETAIL PAGE" block — it has to, because that block paints
   .ashby-job-posting-header and the tab bar `transparent`, and we need to win
   on source order. See "STICKY HEADER / TABS: solid background" below. */

/* Posting-page header: Ashby renders a tall (~100px) nav with a big ~45px
   wordmark, eating a lot of room when pinned. Shrink the logo and collapse the
   nav. The inner <ul> carries an explicit height:100px, so override it to auto
   and let the trimmed padding set the bar height (~56px). */
.ashby-job-posting-header img {
  height: 22px !important;
  max-height: 22px !important;
  width: auto !important;
}
.ashby-job-posting-header ul {
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* --- JOB POSTING DETAIL PAGE: same design as the list --------------------- */
/* The "*" rules remove Ashby's white description/overview panel and make the
   text (which was light-on-white = invisible) readable in #F5F7F2.            */
.ashby-job-posting-header,
.ashby-job-posting-heading,
.ashby-job-posting-left-pane,
.ashby-job-posting-left-pane *,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane *,
.ashby-application-form-container,
.ashby-application-form-container * {
  background: transparent !important;
  color: #F5F7F2 !important;
  text-align: left !important;
  font-family: "Matter", "Helvetica Neue", Arial, sans-serif !important;
}

/* --- STICKY HEADER / TABS: solid background ------------------------------- */
/* Two elements on the posting page are position:sticky and pin to the top of
   the viewport as you scroll: the top nav (.ashby-job-posting-header — the
   back-arrow + logo) and the Overview / Application tab bar (a <nav>, the only
   one inside .ashby-job-posting-right-pane). With no background, content
   scrolling under them was an unreadable overlap, and a backdrop blur left a
   seam at the junction — so both get a flat, opaque fill in the board colour.
   Matching the page background means the bars are invisible at rest (the title
   isn't dimmed); they simply mask content once pinned.

   This block MUST sit after the transparent block above. That block paints
   .ashby-job-posting-header and `.ashby-job-posting-right-pane *` (which the tab
   bar matches) to transparent. We can only use whitelisted .ashby-* classes and
   bare element selectors (the validator drops [class*="…"] and doubled
   selectors), so:
   - .ashby-job-posting-header — same specificity as the transparent rule, wins
     on source order by being later.
   - .ashby-job-posting-right-pane nav — (0,1,1) beats `.right-pane *` (0,1,0),
     and is the only <nav> in the pane, so it targets the tab bar exactly.

   The tab bar also pins at top:75px (tuned to Ashby's original ~100px header);
   the nav is now ~54px, which left a ~21px gap between the two pinned bars.
   Pin the tabs flush under the header — 50px is a hair under the header height
   so they overlap a couple px (both #212121, so invisible) rather than risk a
   sub-pixel gap. On desktop the tab bar isn't sticky, so `top` is a no-op. */
.ashby-job-posting-header {
  background: #212121 !important;
}
.ashby-job-posting-right-pane nav {
  background: #212121 !important;
  top: 50px !important;
}

/* Job title */
.ashby-job-posting-heading {
  font-weight: 600 !important;
}

/* Overview / Application tabs -> Azeret SemiMono, with a light active indicator */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-family: "Azeret SemiMono", monospace !important;
  font-weight: 600 !important;
  color: #F5F7F2 !important;
}
.ashby-job-posting-right-pane-tab-slider {
  background: #F5F7F2 !important;
}

/* "Apply for this Job" on the Overview tab. It's an <a> WRAPPER that contains
   the real <button> inside it. We target it by :has(button) — it's the only
   right-pane link that wraps a button, so this cleanly excludes the Overview/
   Application tabs (their whitelisted class sits on an inner <span>, NOT the
   tab <a>, so a :not(.…tab) approach wrongly matched and broke the tabs).
   Make the <a> a plain passthrough (otherwise its own box double-borders the
   inner button) and style the inner <button>; full-width to fill the column.
   The doubled .ashby-job-posting-right-pane class beats Ashby's high-specificity
   rule that pins this _primary button's border-color. */
.ashby-job-posting-right-pane a:has(button) {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.ashby-job-posting-right-pane a:has(button) button {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  color: #F5F7F2 !important;
  border: 1px solid rgba(245, 247, 242, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.ashby-job-posting-right-pane.ashby-job-posting-right-pane a:has(button) button {
  border-color: rgba(245, 247, 242, 0.4) !important;
}
.ashby-job-posting-right-pane.ashby-job-posting-right-pane a:has(button) button:hover {
  background: rgba(245, 247, 242, 0.08) !important;
  border-color: #F5F7F2 !important;
}

/* (Submit button is styled together with all other buttons in the
   "UNIFIED BUTTONS" block below, so every button matches.) */

/* --- AUTOFILL-FROM-RESUME CALLOUT ----------------------------------------- */
/* Fill the form column and use the SAME 16px side inset as the inputs/sections
   so the bordered box lines up flush with the fields (see the equal-width
   section near the end for why the form is inset 16px each side). */
.ashby-application-form-autofill-pane {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Soften the box border to the same hairline used elsewhere on the board. */
.ashby-application-form-autofill-input-root {
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
}
/* The autofill (sparkles) icon shipped a near-black fill (#1E1E1E) that was
   invisible on the dark board — recolor it to the off-white. */
.ashby-application-form-autofill-input-icon,
.ashby-application-form-autofill-input-icon * {
  fill: #F5F7F2 !important;
  color: #F5F7F2 !important;
}

/* --- UNIFIED BUTTONS ------------------------------------------------------ */
/* One outline style for EVERY button in the application (submit, both upload
   buttons, the Yes/No work-authorization options). They previously differed in
   border, size, padding and alignment, and showed a purple hover glow.
   Same padding + font + centered text makes them all match; box-shadow:none
   kills the glow (also neutralized via --colorPrimaryShadow). */
.ashby-application-form-container button,
.ashby-application-form-submit-button {
  background: transparent !important;
  color: #F5F7F2 !important;
  border: 1px solid rgba(245, 247, 242, 0.4) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;        /* submit text was left-aligned */
  justify-content: center !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
/* Consistent hover on every button (was a purple glow / nothing at all). */
.ashby-application-form-container button:hover,
.ashby-application-form-submit-button:hover {
  background: rgba(245, 247, 242, 0.08) !important;
  border-color: #F5F7F2 !important;
}
/* SELECTED state (e.g. the Yes/No work-authorization options). Ashby marks the
   chosen option with an "_active…" class, but our transparent-background rule
   above hid its fill, so nothing changed visibly on click. Give the selected
   option a clear fill + solid border. The class is hashed, so we match the
   "active" substring; the tripled container class is needed to beat Ashby's
   own high-specificity styling of these option buttons. */
.ashby-application-form-container.ashby-application-form-container.ashby-application-form-container button[class*="active"] {
  background: rgba(245, 247, 242, 0.18) !important;
  border-color: #F5F7F2 !important;
  color: #F5F7F2 !important;
}
/* Radius: every button is rounded by default. For the Yes/No segmented pair we
   square ONLY the corners on their shared edge (Yes's right, No's left) so the
   outer corners stay rounded; the -1px overlap collapses the doubled border
   into one clean shared line.
   NOTE: Ashby's CSS validator rejects :first-of-type / :last-of-type, so we
   identify the segments structurally instead: the LEFT segment is a button
   that is immediately followed by another button (:has(+ button)); the RIGHT
   segment is a button immediately preceded by another (button + button).
   Standalone buttons match neither, so they keep the full 8px radius. */
.ashby-application-form-container button { border-radius: 8px !important; }
.ashby-application-form-submit-button.ashby-application-form-submit-button { border-radius: 8px !important; }
.ashby-application-form-container button:has(+ button) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ashby-application-form-container button + button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: -1px !important;
}
/* Button icons (e.g. the resume paperclip) shipped dark and only showed on
   hover — force them to the off-white so they're always visible. */
.ashby-application-form-container button svg,
.ashby-application-form-container button svg * {
  fill: #F5F7F2 !important;
  color: #F5F7F2 !important;
}

/* The callout "Upload file" button lives in the autofill pane, which sits
   OUTSIDE .ashby-application-form-container, so none of the rules above reach
   it. Re-apply the same look here. Ashby also pins its border via a high-
   specificity _ctaButton rule, so the doubled base-layer class is needed to
   beat that border color. */
.ashby-application-form-autofill-pane button {
  background: transparent !important;
  color: #F5F7F2 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  justify-content: center !important;
  /* The button sits in a flex CTA cell and was centered, leaving a ~24px gap
     to the box's right edge. margin-left:auto pushes it flush-right so its
     right inset matches the content's left inset (symmetric). */
  margin-left: auto !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}
.ashby-application-form-autofill-input-base-layer.ashby-application-form-autofill-input-base-layer button {
  border: 1px solid rgba(245, 247, 242, 0.4) !important;
}
.ashby-application-form-autofill-input-base-layer.ashby-application-form-autofill-input-base-layer button:hover {
  background: rgba(245, 247, 242, 0.08) !important;
  border-color: #F5F7F2 !important;
}

/* Input/textarea placeholders were an off-brand blue-grey (#7D8699). */
.ashby-application-form-container input::placeholder,
.ashby-application-form-container textarea::placeholder {
  color: rgba(245, 247, 242, 0.4) !important;
}

/* The LinkedIn question has an EMPTY description configured in Ashby (it
   renders an empty <p></p>), which still reserved ~37px and pushed the input
   far below its label. Collapse only descriptions whose paragraph is empty, so
   real descriptions on other questions are untouched.
   (Cleanest long-term fix is to clear that description in the Ashby question
   settings; this rule patches it from CSS in the meantime.) */
.ashby-application-form-question-description:has(p:empty) {
  display: none !important;
}

/* --- STANDARDIZED BORDERS (all use the brand hairline) -------------------- */
/* Left-column detail dividers (Location / Employment Type / …) were a light
   grey; match them to the hairline used on the autofill box + job rows. */
.ashby-job-posting-left-pane * {
  border-color: var(--hairline) !important;
}
/* Form inputs + textareas: were an off-brand blue-grey (#7D8699). */
.ashby-application-form-container input,
.ashby-application-form-container textarea {
  border-color: var(--hairline) !important;
  border-radius: 8px !important;
}
/* Resume dropzone: was a square light-grey dashed box -> hairline + rounded.
   (Targets the bordered div inside the Resume field; borderless wrappers are
   unaffected since they have no visible border.) */
.ashby-application-form-field-entry div {
  border-color: var(--hairline) !important;
  border-radius: 8px !important;
}

/* --- FOOTER --------------------------------------------------------------- */
/* The "Powered by Ashby" footer had an all-white top separator and purplish
   link text (#545B6D). Bring both onto the brand: hairline rule, muted
   off-white text. (Reached via plain element selectors, which Ashby allows.) */
footer {
  border-top-color: var(--hairline) !important;
  color: rgba(245, 247, 242, 0.5) !important;
}
footer a,
footer p {
  color: rgba(245, 247, 242, 0.55) !important;
}

/* --- Left-align the whole posting (remove Ashby's centering) -------------- */
.ashby-job-posting-header,
.ashby-job-posting-heading,
.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-application-form-container {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  max-width: none !important;
  align-self: flex-start !important;   /* if parent is a flex column centering items */
  justify-self: start !important;      /* if parent is a grid centering items */
}
/* Top-level full-width pieces can safely span the grid */
.ashby-job-posting-header,
.ashby-job-posting-heading {
  width: 100% !important;
}
/* The job title ("Growth Lead") sits in a _titles wrapper with margin-left:24px
   while the left detail column sits 12px further left, so the title looked
   indented past its own column. Same wrapper/fix as the job-board heading:
   pull it back 12px to line it up with Location / Employment Type / etc.
   (declared after the rule above so it wins the margin-left.) */
.ashby-job-posting-heading {
  margin-left: -12px !important;
}

/* --- EQUAL CONTENT WIDTH ACROSS TABS -------------------------------------- */
/* Ashby sized the right pane differently per tab: ~700px on Overview, but on
   Application it shrank to the form's intrinsic ~500px, so the content column
   visibly jumped when switching tabs. Pin the right pane to one width on both
   tabs, make the form fill it, and give the form the same 16px side inset the
   Overview content/tabs use — so the fields, autofill box and description all
   share the exact same 798–1466 box. (Declared after the left-align block so
   it wins the form's padding-left, which that block had zeroed.) */
.ashby-job-posting-right-pane {
  width: 44rem !important;
  max-width: 100% !important;
}
.ashby-application-form-container {
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* The submit button's wrapper sits at the form's border-box edges (it ignores
   the form padding) and Ashby forces the button to width:100% of it, so it
   overflowed 16px past the fields on each side. Inset it by the same 16px so it
   lines up exactly with the fields (798–1466) instead of overflowing. */
.ashby-application-form-submit-button {
  width: calc(100% - 32px) !important;
  margin-left: 16px !important;
  margin-right: 16px !important;
}