/* =====================================================================
   ModernFi — Ashby job board theme
   Design system → portable CSS (pulled from ModernFi/marketing-website:
   app/globals.css, tailwind.config.ts, brand-kit/DESIGN_SYSTEM.md)
   =====================================================================

   Makes the Ashby-hosted board + role + application pages
   (jobs.ashbyhq.com/modernfi/…) look like modernfi.com: off-white
   canvas, near-black ink, ONE electric-teal accent used sparingly,
   refined hairlines and soft "settle" motion.

   The :root block below is the portable ModernFi token layer — the same
   --mf-* variables can be lifted into any other platform's custom CSS.
   Everything beneath it maps those tokens onto this surface.

   ---------------------------------------------------------------------
   HOW TO APPLY  (do BOTH steps)
   ---------------------------------------------------------------------
   1) Ashby admin → Job Board → Options. Set the native theme first so
      the brand color flows through Ashby's own components — including
      input/button focus states, which this file can't set directly
      (see VALIDATOR NOTE):
        • Brand Color .......... #14B8A6   (electric — links, buttons,
                                            active tab, focus rings)
        • Brand Color (Dark) ... #12A896   (hover — a deepened electric)
        • Show Job Filters ..... on
      ⚠ Your current settings are Brand Color #398392 and Dark #000000.
        Update both — #398392 is off-brand and a black hover clashes
        with the electric accent.

   2) Upload THIS file in the "Custom CSS" box ("Drag file here to
      upload…"). It sets the variables the admin doesn't expose (radii,
      font, max width, background) and adds brand polish on the
      documented .ashby-* classes.

   ---------------------------------------------------------------------
   VALIDATOR NOTE  (why this file looks the way it does)
   ---------------------------------------------------------------------
   Ashby validates custom CSS against an allowlist. Confirmed-rejected
   and therefore avoided here:
     • clamp() and other sizing functions → use static px + @media.
     • text-wrap → omitted.
     • :focus, :focus-visible, :focus-within, :disabled → Ashby owns
       these states. Focus color comes from Brand Color (step 1); the
       loading/disabled submit state is styled natively.
   Confirmed-allowed and used below: the .ashby-* classes, :root + custom
   properties, :hover, :active, :first-child, [data-state]/[data-highlight]/
   [aria-selected] attribute selectors, var(), rgba(), linear-gradient(),
   and the @font-face / @media at-rules.

   ---------------------------------------------------------------------
   FONTS  (no action needed — ships ready to use)
   ---------------------------------------------------------------------
   The board ships with Inter, a clean neo-grotesque close to ModernFi's
   licensed Messina Sans, loaded from a CORS-enabled CDN (see the @font-face
   below) so it just works on Ashby with nothing for you to host.
   For a true pixel-match to modernfi.com you can layer the real Messina
   Sans on top later — "Messina Sans" already leads the font stack, so it
   wins automatically once you host its woff2 (see the OPTIONAL block below).
   ===================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────
   Inter (variable, 100–900) is the shipped typeface — a clean neo-grotesque
   close to Messina Sans. It loads from jsDelivr's Fontsource build, which
   serves `Access-Control-Allow-Origin: *`, so it works cross-origin on the
   Ashby board with nothing to host. Defined via @font-face (validator-
   allowed) rather than @import. */
@font-face {
  font-family: "Inter";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/files/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* OPTIONAL pixel-match upgrade — the real brand font. "Messina Sans" already
   leads --mf-font-sans, so if you host MessinaSans-Variable.woff2 on a
   CORS-enabled origin (e.g. a public Cloudflare R2 bucket), fill in the URL
   and uncomment; it then wins over Inter automatically.
@font-face {
  font-family: "Messina Sans";
  src: url("https://REPLACE-WITH-YOUR-CORS-HOST/MessinaSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

/* ── ModernFi design tokens (portable) ─────────────────────────────── */
:root {
  /* Color — the palette is deliberately tiny. Accent = electric, used
     for ≤ ~10% of any surface (links, the one primary button, focus). */
  --mf-canvas: #fafafa;
  --mf-ink: #1a1a1a;
  --mf-ink-muted: #666666;
  --mf-ink-subtle: #737373;        /* lightest text allowed on canvas (AA) */
  --mf-electric: #14b8a6;          /* THE accent */
  --mf-electric-dark: #12a896;     /* accent hover — electric @ ~92% */
  --mf-brand-teal: #367d8b;        /* deeper supporting teal */
  --mf-brand-mist: #b7dce0;        /* pale teal wash */
  --mf-white: #ffffff;

  --mf-hairline: rgba(26, 26, 26, 0.1);
  --mf-hairline-strong: rgba(26, 26, 26, 0.16);
  --mf-field-border: rgba(26, 26, 26, 0.13);
  --mf-field-border-hover: rgba(26, 26, 26, 0.22);
  --mf-selection: rgba(20, 184, 166, 0.22);
  --mf-error: #b42318;
  --mf-error-bg: #fef3f2;

  /* Type */
  --mf-font-sans: "Messina Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mf-font-display: "HW Cigars", ui-serif, Georgia, serif;
  --mf-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mf-tracking-tightish: -0.018em;
  --mf-tracking-tighter: -0.028em;
  --mf-tracking-eyebrow: 0.14em;

  /* Shape */
  --mf-radius-card: 16px;
  --mf-radius-input: 8px;
  --mf-radius-btn: 6px;

  /* Motion — "starts fast, settles soft". One curve rules everything. */
  --mf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mf-dur-fast: 150ms;
  --mf-dur-base: 200ms;
  --mf-dur-slow: 320ms;

  /* Elevation — brand-tinted, never plain gray drop shadows. */
  --mf-shadow-cta: 0 1px 2px rgba(20, 184, 166, 0.18),
    0 4px 12px -2px rgba(20, 184, 166, 0.18);
  --mf-shadow-cta-hover: 0 2px 6px rgba(20, 184, 166, 0.22),
    0 10px 24px -4px rgba(20, 184, 166, 0.28);
  --mf-shadow-card-hover: 0 14px 32px -14px rgba(26, 26, 26, 0.16),
    0 3px 8px -3px rgba(26, 26, 26, 0.06);

  /* ── Map ModernFi tokens onto Ashby's own theme variables ──────────
     These are the variables Ashby's components consume (including focus
     states via --colorPrimary600), so this themes most of the board with
     no specificity fights. Keep the two colors in sync with the admin
     Brand Color fields (step 1) so admin + CSS agree. */
  --colorPrimary600: var(--mf-electric);       /* links, buttons, focus */
  --colorPrimary900: var(--mf-electric-dark);  /* hover */
  --colorAppBackground: var(--mf-canvas);
  --widthMaxJobBoard: 820px;                   /* ~brand headline measure */
  --borderRadiusContainer: var(--mf-radius-card);
  --borderRadiusControl: var(--mf-radius-input);
  --borderRadiusButton: var(--mf-radius-btn);
  --fontFamily: var(--mf-font-sans);
}

/* ── Base (element-level enhancement; critical theming is via :root) ── */
body {
  background: var(--mf-canvas);
  color: var(--mf-ink);
  font-family: var(--mf-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "kern";
}

::selection {
  background: var(--mf-selection);
  color: var(--mf-ink);
}

a {
  color: var(--mf-electric);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--mf-dur-base) var(--mf-ease);
}
a:hover {
  color: var(--mf-ink);
}

/* =====================================================================
   JOB BOARD — listing
   ===================================================================== */

/* Board heading + posting count. */
.ashby-job-board-heading {
  color: var(--mf-ink);
  font-family: var(--mf-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: 40px;
}
.ashby-job-board-heading-count {
  color: var(--mf-ink-subtle);
  font-weight: 500;
}

/* "Filters" label — quiet uppercase eyebrow (accent stays scarce). */
.ashby-job-board-filters-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mf-tracking-eyebrow);
  color: var(--mf-ink-muted);
}

/* Filter select boxes — same control language as form fields. */
.ashby-job-board-filter {
  background: var(--mf-canvas);
  color: var(--mf-ink);
  border: 1px solid var(--mf-field-border);
  border-radius: var(--mf-radius-input);
  font: inherit;
  font-size: 14.5px;
  transition: border-color var(--mf-dur-base) var(--mf-ease);
}
.ashby-job-board-filter:hover {
  border-color: var(--mf-field-border-hover);
}

/* "Reset filters" — inline text link. */
.ashby-job-board-reset-filters-label {
  color: var(--mf-electric);
  text-underline-offset: 2px;
  transition: color var(--mf-dur-fast) var(--mf-ease);
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--mf-ink);
}

/* Department (group) + team headings — the signature small-caps eyebrow. */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--mf-tracking-eyebrow);
  color: var(--mf-ink-muted);
}
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: var(--mf-tracking-tightish);
  color: var(--mf-ink);
  text-transform: none;
}

/* Posting rows — hairline-divided list; title turns electric on hover. */
.ashby-job-posting-brief-list {
  border-top: 1px solid var(--mf-hairline);
}
.ashby-job-posting-brief {
  margin-bottom: 0;            /* divider does the spacing work */
  padding: 16px 4px;
  border-bottom: 1px solid var(--mf-hairline);
  transition: background-color var(--mf-dur-base) var(--mf-ease);
}
.ashby-job-posting-brief:hover {
  background: rgba(20, 184, 166, 0.04);
}
.ashby-job-posting-brief-title {
  color: var(--mf-ink);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: var(--mf-tracking-tightish);
  transition: color var(--mf-dur-base) var(--mf-ease);
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--mf-electric);
}
.ashby-job-posting-brief-details {
  color: var(--mf-ink-muted);
  font-size: 14px;
}

/* =====================================================================
   JOB POSTING — individual role page
   ===================================================================== */

.ashby-job-posting-header {
  margin-bottom: 8px;
}

/* Role title — refined headline, not a heavy slab. Softer weight + easier
   tracking so it reads clean in the system fallback (and stays elegant once
   Messina loads), instead of the cramped, clunky look that was flagged. */
.ashby-job-posting-heading {
  color: var(--mf-ink);
  font-family: var(--mf-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-size: 30px;
}

/* Left pane — the job-posting detail/description column. It must sit FLAT
   on the page canvas (like the marketing site's prose), so force the
   background transparent to blend with --colorAppBackground instead of
   showing a stray panel fill. Prose set to a comfortable reading measure. */
.ashby-job-posting-left-pane {
  background: var(--mf-canvas) !important;
  color: rgba(26, 26, 26, 0.8);
  line-height: 1.65;
  font-size: 15.5px;
}
.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3 {
  color: var(--mf-ink);
  letter-spacing: var(--mf-tracking-tightish);
  line-height: 1.2;
  font-weight: 600;
}

/* Right pane — tabs + application form. Kept FLAT (canvas background, no
   border, no radius) so the role content sits on the page canvas like the
   header above it and the marketing site, instead of floating in an inset
   white box. The tab underline + field borders carry the structure. */
.ashby-job-posting-right-pane {
  background: var(--mf-canvas) !important;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--mf-font-sans);
}
/* Inner content card — Ashby wraps the tab content in a generic card with a
   solid white fill (and on some builds a border + shadow) that makes the role
   copy float in an inset box. Flatten it onto the page canvas so it sits flush
   like the marketing site. Targeted via the documented parent + child
   combinator because the card's own class is a build-hashed, unstable name. */
.ashby-job-posting-right-pane > div {
  background: var(--mf-canvas) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Description prose (Overview tab) — comfortable reading measure + brand
   section headings, so the role copy reads like the marketing site. */
.ashby-job-posting-right-pane-overview-tab p,
.ashby-job-posting-right-pane-overview-tab li {
  color: rgba(26, 26, 26, 0.78);
  line-height: 1.65;
}
.ashby-job-posting-right-pane-overview-tab h1,
.ashby-job-posting-right-pane-overview-tab h2,
.ashby-job-posting-right-pane-overview-tab h3 {
  color: var(--mf-ink);
  font-family: var(--mf-font-sans);
  letter-spacing: var(--mf-tracking-tightish);
  font-weight: 600;
  line-height: 1.25;
}

/* Tabs (Overview / Application). */
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  color: var(--mf-ink-muted);
  font-weight: 500;
  letter-spacing: var(--mf-tracking-tightish);
  transition: color var(--mf-dur-base) var(--mf-ease);
}
.ashby-job-posting-right-pane-overview-tab:hover,
.ashby-job-posting-right-pane-application-tab:hover,
.ashby-job-posting-right-pane-overview-tab[aria-selected="true"],
.ashby-job-posting-right-pane-application-tab[aria-selected="true"] {
  color: var(--mf-ink);
}
/* The sliding active-tab indicator. */
.ashby-job-posting-right-pane-tab-slider {
  background: var(--mf-electric) !important;
  border-radius: 9999px;
}

/* "Back to all jobs" — secondary/ghost control. */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--mf-ink);
  background: transparent;
  border: 1px solid var(--mf-hairline);
  border-radius: var(--mf-radius-btn);
  font-family: var(--mf-font-sans);
  font-weight: 500;
  transition: color var(--mf-dur-base) var(--mf-ease),
    border-color var(--mf-dur-base) var(--mf-ease);
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--mf-electric);
  border-color: var(--mf-field-border-hover);
}

/* =====================================================================
   APPLICATION FORM
   ===================================================================== */

.ashby-application-form-container {
  background: var(--mf-canvas) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--mf-font-sans);
}

/* Sections — hairline-separated, with breathing room. */
.ashby-application-form-section-container {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--mf-hairline);
}
.ashby-application-form-section-container:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.ashby-application-form-section-header-title {
  color: var(--mf-ink);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: var(--mf-tracking-tightish);
  line-height: 1.2;
}
.ashby-application-form-section-header-description {
  color: var(--mf-ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Per-question label + description. */
.ashby-application-form-field-entry {
  margin-bottom: 18px;
}
.ashby-application-form-question-title {
  color: var(--mf-ink);
  font-weight: 500;
  font-size: 14.5px;
}
.ashby-application-form-question-description {
  color: var(--mf-ink-subtle);
  font-size: 13px;
  line-height: 1.5;
}

/* Inputs — ModernFi .field look: canvas fill, hairline border, brand
   radius. Border radius also comes from --borderRadiusControl; the focus
   ring is supplied by the native theme (Brand Color = electric), since
   Ashby's validator disallows author :focus rules. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: var(--mf-canvas);
  color: var(--mf-ink);
  border: 1px solid var(--mf-field-border);
  border-radius: var(--mf-radius-input);
  padding: 10px 14px;
  font: inherit;
  font-size: 14.5px;
  transition: border-color var(--mf-dur-base) var(--mf-ease);
}
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--mf-field-border-hover);
}
::placeholder {
  color: rgba(26, 26, 26, 0.38);
}

/* Submit — the one primary action: electric fill, tinted shadow, press.
   The loading/disabled state is left to Ashby's native styling. */
.ashby-application-form-submit-button {
  background: var(--mf-electric) !important;
  color: var(--mf-canvas) !important;
  border: none !important;
  border-radius: var(--mf-radius-btn) !important;
  font-family: var(--mf-font-sans) !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  box-shadow: var(--mf-shadow-cta);
  transition: background-color var(--mf-dur-base) var(--mf-ease),
    box-shadow var(--mf-dur-base) var(--mf-ease),
    transform var(--mf-dur-base) var(--mf-ease);
}
.ashby-application-form-submit-button:hover {
  background: var(--mf-electric-dark) !important;
  box-shadow: var(--mf-shadow-cta-hover);
}
.ashby-application-form-submit-button:active {
  transform: scale(0.985);
}

/* SMS consent fine print. */
.ashby-application-form-texting-consent-description {
  color: var(--mf-ink-subtle);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Outcome panels. */
.ashby-application-form-success-container {
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-left: 3px solid var(--mf-electric);
  border-radius: var(--mf-radius-card);
  padding: 20px;
  color: var(--mf-ink);
}
.ashby-application-form-failure-container {
  background: var(--mf-error-bg);
  border: 1px solid rgba(180, 35, 24, 0.3);
  border-left: 3px solid var(--mf-error);
  border-radius: var(--mf-radius-card);
  padding: 20px;
  color: var(--mf-error);
}
.ashby-application-form-blocked-application-container {
  background: linear-gradient(180deg, var(--mf-white) 0%, var(--mf-canvas) 100%);
  border: 1px solid var(--mf-hairline);
  border-radius: var(--mf-radius-card);
  padding: 20px;
  color: var(--mf-ink-muted);
}

/* ── Resume autofill pane (the "magic" uploader) ───────────────────── */
.ashby-application-form-autofill-pane {
  background: var(--mf-canvas) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 20px;
}
/* Dropzone shell — state lives on [data-state]: default | drag | pending. */
.ashby-application-form-autofill-input-root {
  background: var(--mf-canvas);
  border: 1.5px dashed var(--mf-hairline-strong);
  border-radius: var(--mf-radius-card);
  padding: 20px;
  transition: border-color var(--mf-dur-base) var(--mf-ease),
    background-color var(--mf-dur-base) var(--mf-ease);
}
.ashby-application-form-autofill-input-root[data-state="drag"],
.ashby-application-form-autofill-input-drag-layer[data-state="active"] {
  border-color: var(--mf-electric);
  background: rgba(20, 184, 166, 0.06);
}
.ashby-application-form-autofill-input-root[data-state="pending"],
.ashby-application-form-autofill-input-pending-layer[data-state="active"] {
  opacity: 0.7;
  cursor: progress;
}
.ashby-application-form-autofill-input-icon {
  color: var(--mf-electric);
}
.ashby-application-form-autofill-input-title {
  color: var(--mf-ink);
  font-weight: 600;
  letter-spacing: var(--mf-tracking-tightish);
}
.ashby-application-form-autofill-input-description {
  color: var(--mf-ink-subtle);
  font-size: 13px;
}
/* Inline validation — highlight: negative | positive. */
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--mf-error);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--mf-electric);
}

/* Surveys reuse the application form language. */
.ashby-survey-form-container {
  font-family: var(--mf-font-sans);
  color: var(--mf-ink);
}

/* =====================================================================
   AT-RULES — accessibility & responsive
   ===================================================================== */

/* Honor reduced-motion: drop transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
  a,
  .ashby-job-posting-brief,
  .ashby-job-posting-brief-title,
  .ashby-job-board-filter,
  .ashby-job-board-back-to-all-jobs-button,
  .ashby-job-posting-right-pane-overview-tab,
  .ashby-job-posting-right-pane-application-tab,
  .ashby-application-form-submit-button,
  .ashby-application-form-autofill-input-root,
  input,
  textarea,
  select {
    transition: none !important;
  }
  .ashby-application-form-submit-button:active {
    transform: none;
  }
}

/* Smaller headings + tighter padding on small screens. */
@media (max-width: 640px) {
  .ashby-job-board-heading {
    font-size: 28px;
  }
  .ashby-job-posting-heading {
    font-size: 26px;
  }
  .ashby-application-form-success-container,
  .ashby-application-form-failure-container,
  .ashby-application-form-blocked-application-container,
  .ashby-application-form-autofill-input-root {
    padding: 16px;
  }
}

/* ── OPTIONAL: dark surface ────────────────────────────────────────────
   ModernFi's dark surface is ink (#1A1A1A) with canvas/white type. Leave
   this commented unless you've confirmed the rest of the Ashby board
   renders correctly on dark. Uncomment to remap the core tokens:

@media (prefers-color-scheme: dark) {
  :root {
    --mf-canvas: #1a1a1a;
    --mf-ink: #fafafa;
    --mf-ink-muted: rgba(250, 250, 250, 0.75);
    --mf-ink-subtle: rgba(250, 250, 250, 0.6);
    --mf-hairline: rgba(250, 250, 250, 0.12);
    --mf-field-border: rgba(250, 250, 250, 0.18);
    --mf-field-border-hover: rgba(250, 250, 250, 0.3);
    --colorAppBackground: #1a1a1a;
  }
}
*/