/* ashby-form.css
 * Injected INTO the Ashby application-form iframe via __Ashby.settings.customCssUrl.
 * Lives in /public so Vite serves it un-hashed at a stable, fetchable URL:
 *   https://ent.ai/ashby-form.css
 * Do NOT import this through the bundler — it must stay a static asset, and the
 * exact URL must be added to the embed CSS allow-list in the Ashby admin.
 *
 * Every color below is an exact Ent design token from
 * src/components/home/tokens.ts (the iframe is cross-origin and can't read the
 * SPA's tokens, so they're mirrored here as literals with their token name).
 * The form is a DARK surface matching the site's page background (neutral8
 * #1F1D17), so it follows the on-dark idiom: light text, mint CTA, warm-brown
 * hairlines. Because Ashby's defaults assume a light board, text colors are set
 * explicitly to avoid dark-on-dark.
 *
 * Colors, radii, and base font are driven through Ashby's OFFICIAL theming
 * variables (the :root block) — the documented, upgrade-safe path. The element
 * rules that follow are editorial touches and use Ashby's documented class
 * names; anything marked best-effort should be confirmed against the live iframe.
 *
 * NOTE: --colorPrimary600/900 can ALSO be set in Ashby admin ‚Üí theme settings.
 * Keep the admin values in sync with green1/green2 below or they may override.
 *
 * Fonts load from public CDNs rather than the site's self-hosted woff2 files:
 * this stylesheet runs inside Ashby's cross-origin iframe, where the
 * self-hosted fonts at ent.ai/fonts would require CORS headers we don't control
 * on that host. The CDN families match the Ent design system 1:1.
 */

@import url("https://api.fontshare.com/v2/css?f[]=sentient@300,301&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap");

:root {
  /* ---- Ashby's documented theming variables, set to Ent tokens ---- */
  /* Primary accent = the site's mint CTA. WARNING: also settable in Ashby
     admin theme settings; keep them in sync. */
  --colorPrimary600: #BAFFD5; /* green1 — primary mint accent (CTAs, links) */
  --colorPrimary900: #67CF91; /* green2 — saturated mint, hover/active state */
  --colorAppBackground: #1F1D17; /* neutral8 — dark surface, matches site page bg */
  /* All box corners key off one --radius token (defined below) so it's a
     single-line change to match the HubSpot form on /contact. */
  --borderRadiusContainer: var(--radius);
  --borderRadiusControl: var(--radius);
  --borderRadiusButton: var(--radius);
  /* Inter as the board-wide base font */
  --fontFamily: "Inter", system-ui, sans-serif;

  /* ---- Ent design tokens (src/components/home/tokens.ts) ---- */
  --surface:     #1F1D17; /* neutral8 — form background (matches site page bg) */
  --field-bg:    #181512; /* neutral9 — recessed input fill */
  --panel:       #181512; /* neutral9 — secondary panel (e.g. upload area) */
  --text:        #FEFEFE; /* neutral1 — near-white body/input text */
  --heading:     #F8F6F2; /* neutral2 — warm cream display headings */
  --muted:       #C1BAAF; /* neutral5 — labels, secondary text, placeholder, input strokes */
  --rule:        #4A4338; /* neutral7 — dark warm-brown hairline (dividers, panels) */
  --accent-line: #E1DBD2; /* neutral3 — thin accents (focus ring, asterisk) */
  --green-deep:  #07361C; /* green3 — deep-green label on the mint button */
  --error:       #FFE599; /* warm gold — validation errors (not a token; see note) */
  --radius:      6px; /* corner rounding — matches the HubSpot form on /contact */

  /* ---- Font stacks (CDN families, matching the Ent design system 1:1) ----
     Referenced everywhere below so a family swap is a single-line change, the
     same way colors key off the tokens above. */
  --font-heading: "Sentient", Georgia, serif;  /* display headings */
  --font-body:    "Inter", sans-serif;          /* body, labels, inputs, buttons */
  --font-mono:    "IBM Plex Mono", monospace;   /* numeric / phone fields (data) */
}

/* ---- Base type + text color ---- */
body,
.ashby-application-form-container,
.ashby-job-posting-right-pane {
  background: var(--surface) !important;
  color: var(--text) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.003em !important;
  font-feature-settings: "ss01", "ss03", "cv11" !important;
}

/* ---- Headings: Sentient 300 ---- */
h1, h2, h3,
.ashby-job-posting-heading,
.ashby-application-form-section-header-title {
  font-family: var(--font-heading) !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: -0.015em !important;
  color: var(--heading) !important;
}

/* ================================================================
   JOB BOARD LIST (the /joinus board view)
   This stylesheet began as the application-FORM theme; the rules below extend
   it to the job-BOARD list. Ashby renders the list with its LIGHT defaults
   (white cards, a #F7F8FA filter bar, slate "Powered by" text). Combined with
   the board-wide light heading color above, that left cream titles on white
   cards, dark-on-dark meta, and mint/gray labels on near-white — the contrast
   bugs. Hashed CSS-module classes (_filtersContainer_<hash>) change on Ashby
   rebuilds, so match the stable name part with [class*="..." i], as with the
   floating combobox below. Verified against the live iframe: 0 WCAG-AA fails.
   ================================================================ */

/* Role cards: hairline on the dark surface, not white boxes (matches the
   "dividers as hairlines" idiom used for the form sections). */
.ashby-job-posting-brief {
  background: transparent !important;
  border: 1px solid var(--rule) !important; /* neutral7 hairline */
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.ashby-job-posting-brief:hover {
  border-color: var(--accent-line) !important; /* neutral3 — thin accent */
  background: var(--panel) !important;
}
/* Card text: everything muted-light by default (the meta line —
   team | location | type — has no stable class), then re-assert the cream
   heading color on the title. Scoping the title to the card gives it
   specificity (0,2,0) vs the `*` rule's (0,1,0), so it wins regardless of
   source order — no reliance on rule ordering. */
.ashby-job-posting-brief * {
  color: var(--muted) !important;
}
.ashby-job-posting-brief .ashby-job-posting-brief-title {
  color: var(--heading) !important;
}

/* Filter bar: Ashby's container is a light #F7F8FA block, which left the mint
   toggle label and the "Filters:" label on near-white. Drop the container to
   the dark surface; the label goes muted-light. */
[class*="filtersContainer" i] {
  background: transparent !important;
}
.ashby-job-board-filters-label,
[class*="filtersLabel" i] {
  color: var(--muted) !important;
}

/* Reset-filters link + department section titles — Ashby renders these dark
   (#373E4D reset label, #7D8699 parent-level department label), which is
   unreadable on the dark surface. Make them the mint accent. */
.ashby-job-board-reset-filters-label,
.ashby-department-heading,
.ashby-department-heading-level {
  color: var(--colorPrimary600) !important; /* green1 — mint accent */
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--colorPrimary900) !important; /* green2 — hover/active mint */
}

/* Board footer: "Powered by Ashby" + legal links (Privacy Policy, Security,
   Vulnerability Disclosure) all render in Ashby's slate (#545B6D), which fails
   on the dark surface. Lift footer text, links, and the wordmark SVG to the
   mint accent (green1). The [class*="powered"] fallback covers the "Powered by"
   mark in case the embed renders it outside the <footer>. */
footer,
footer *,
[class*="powered" i],
[class*="powered" i] * {
  color: var(--colorPrimary600) !important; /* green1 — mint accent */
  fill: var(--colorPrimary600) !important;
}
footer a:hover,
[class*="powered" i]:hover * {
  color: var(--colorPrimary900) !important; /* green2 — hover/active mint */
  fill: var(--colorPrimary900) !important;
}

/* ================================================================
   JOB POSTING DETAIL (a single posting: header + description + apply)
   Ashby themes only the right/form pane; the LEFT content pane and the
   rich-text description body render on a WHITE surface, so the whole posting
   read as near-white text on white. Match the dark surface; text inherits the
   light body color, description links go mint. Hashed module classes
   (_description_/_container_) change on Ashby rebuilds — match the stable name
   parts. Verified against the live posting iframe: 0 WCAG-AA fails. */
.ashby-job-posting-left-pane,
[class*="description" i][class*="container" i] {
  background: var(--surface) !important;
  color: var(--text) !important;
}
/* Links inside the description → mint accent (match the site link idiom). */
[class*="description" i][class*="container" i] a {
  color: var(--colorPrimary600) !important; /* green1 */
}
[class*="description" i][class*="container" i] a:hover {
  color: var(--colorPrimary900) !important; /* green2 */
}

/* Department block: the posting uses DIFFERENT class names than the board
   (…-job-posting-brief-department-heading…) and doesn't inherit the board's
   Sentient serif, so "G&A / Finance & Accounting" rendered as Inter slate/white
   instead of the board's mint serif. Give it the board's exact treatment —
   mint, Sentient — so the two views match. (The board's own
   .ashby-department-heading-level inherits Sentient from its <h2> parent; here
   the levels aren't under that heading, so set the family explicitly.) */
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
  color: var(--colorPrimary600) !important; /* green1 — mint, matches board */
  font-family: var(--font-heading) !important;
  font-style: normal !important;
}

/* ---- Field labels: Inter uppercase eyebrow (~11px, 0.18em) ----
   `.ashby-application-form-question-title` is the per-field label. */
.ashby-application-form-question-title {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--muted) !important;
}

/* Secondary/helper copy — keep readable on dark, not dark-on-dark. */
.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-texting-consent-description {
  color: var(--muted) !important;
}

/* ---- Inputs: fill matches the page surface, hairline border, no shadow ----
   The field fill is --surface (neutral8), the same as the page background, so
   fields sit flush with the page and are delineated only by their hairline
   border. Radius comes from --borderRadiusControl above. Catch-all over
   text-entry inputs (not checkbox/radio/file/buttons) so widget-driven fields
   like the predictive location autocomplete get the surface + light text too —
   their inputs aren't always type="text". */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
textarea,
select,
[role="combobox"],
.ashby-application-form-field-entry input {
  background: var(--surface) !important; /* neutral8 — matches the page background */
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  border: 1px solid var(--muted) !important; /* neutral5 — input stroke */
  box-shadow: none !important;
}

/* Numbers / phone read as data — IBM Plex Mono */
input[type="tel"],
input[type="number"] {
  font-family: var(--font-mono) !important;
  letter-spacing: 0 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--accent-line) !important; /* neutral3 — thin accent */
  box-shadow: 0 0 0 1px var(--accent-line) !important; /* focus ring, not a drop shadow */
}

::placeholder { color: var(--muted) !important; } /* neutral5 */

/* ---- Submit button: mint fill (via --colorPrimary), deep-green label ----
   Matches the site's solid CtaButton (green1 fill + green3 text). Fill/hover
   come from --colorPrimary600/900; this sets the label color + typography. */
.ashby-application-form-submit-button {
  color: var(--green-deep) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

/* "Apply for this Job" primary CTA (posting detail) uses Ashby's primary button
   variant — a mint fill that ships with WHITE (unreadable) text. Force the
   deep-green label on any primary button so it matches the submit button.
   Hashed class (_primary_<hash>) changes on rebuilds; match the stable part. */
[class*="_primary_" i] {
  color: var(--green-deep) !important; /* green3 on mint fill */
}

/* ---- Tabs + Yes/No option toggles: rest state → near-white ----
   Ashby renders the inactive tab (#7D8699) and unselected option buttons
   (#A8AEBD) in a blue-gray. Lift the REST state to the Ent near-white
   (neutral1). The active tab (aria-selected) keeps its mint; a SELECTED option
   sits on a mint fill, so it takes the deep-green label like the submit button
   (near-white there would be ~1.9:1). Tabs use stable classes; the option
   button only has hashed module classes, so match the stable name part. */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab,
button[class*="_option_" i] {
  color: var(--text) !important; /* neutral1 — near-white rest state */
}
[aria-selected="true"] .ashby-job-posting-right-pane-overview-tab,
[aria-selected="true"] .ashby-job-posting-right-pane-application-tab {
  color: var(--colorPrimary600) !important; /* green1 — active tab */
}
button[class*="_option_" i][class*="_active_" i] {
  color: var(--green-deep) !important; /* green3 — dark label on mint selected fill */
}

/* ---- Section dividers: hairlines, not boxes ---- */
.ashby-application-form-section-container {
  border: none !important;
  border-top: 1px solid var(--rule) !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* No divider above the very first field group. */
.ashby-application-form-section-container:first-of-type {
  border-top: none !important;
}
/* Ashby underlines each section header with a light-gray (#E5E6E8) border-
   bottom, which reads as a bright, out-of-place line on the dark surface — and
   double-lines the heading against the section-container divider above it.
   Remove it; the container's top border is the single divider between sections. */
.ashby-application-form-section-header {
  border-bottom: none !important;
}

/* ---- Resume-autofill pane (the card at the top of the form) ----
   Ashby renders this with a light/white background by default; repaint the
   whole stack to the dark surface so it doesn't read as a white block. */
.ashby-application-form-autofill-pane {
  background: var(--panel) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
/* Inner layers stay borderless/transparent so there's a single outer hairline,
   not a second stroke wrapping the text. */
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer,
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.ashby-application-form-autofill-input-title {
  color: var(--text) !important;
}
.ashby-application-form-autofill-input-description {
  color: var(--muted) !important;
}
/* "Upload file" CTA inside the pane: on hover its background goes mint, so the
   label must be dark (neutral8) to stay legible — not light. */
.ashby-application-form-autofill-pane button:hover {
  color: var(--surface) !important; /* neutral8 — dark label on the mint hover fill */
}

/* ---- Best-effort (confirm against the live iframe) ----
   These target Ashby markup that the reference does not give a stable class
   for. Inspect the rendered form and correct the selectors if they don't bite.
   - Required-field asterisk in neutral3 (thin accent).
   - Resume / autofill uploader surface.
   - Validation error text in warm gold (#FFE599). Ashby marks alerts with
     [data-highlight="negative"]. */
abbr[title="required"] {
  color: var(--accent-line) !important; /* neutral3 — thin accent */
}
.ashby-application-form-autofill-uploader {
  border: 1px dashed var(--rule) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  color: var(--muted) !important;
}
[data-highlight="negative"] {
  color: var(--error) !important;
}
/* Predictive location autocomplete menu. Ashby's combobox renders a floating
   listbox whose inner result container has a white background that painted over
   the listbox — hence white-on-white. We match the listbox plus the CSS-module
   class by its STABLE name part (`_floatingContainer_<hash>`, the hash changes
   on Ashby rebuilds), give the menu the dark surface, and force every descendant
   transparent so the dark shows through with the inherited light text. */
[role="listbox"],
[class*="floatingContainer" i] {
  background: var(--field-bg) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
[role="listbox"] *,
[class*="floatingContainer" i] * {
  background-color: transparent !important;
  color: var(--text) !important;
}
/* Highlighted / selected suggestion row. */
[role="option"]:hover,
[role="option"][aria-selected="true"] {
  background-color: var(--panel) !important;
}