/* 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 */
}

/* ---- 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 italic ---- */
h1, h2, h3,
.ashby-job-posting-heading,
.ashby-application-form-section-header-title {
  font-family: "Sentient", Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  letter-spacing: -0.015em !important;
  color: var(--heading) !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: "Inter", sans-serif !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: recessed dark field, hairline border, no shadow ----
   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 dark 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(--field-bg) !important;
  color: var(--text) !important;
  font-family: "Inter", sans-serif !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: "IBM Plex Mono", monospace !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: "Inter", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

/* ---- 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;
}

/* ---- 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: #1F1D17 !important; /* neutral8 */
}

/* ---- 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;
}