/* stylelint-disable */
/* ============================================================================
   Zingage — Ashby Job Board custom theme  ·  "PRODUCT" variant (deck parity)
   Paste into: Ashby admin → Job Board → Theme → Custom CSS.

   Tuned to match the Zingage product UI (Oskar's agent-activity deck), with
   colors sampled directly from that render:
     surface #F8F8F8 · cards #FFFFFF · hairline #E8E8E8 · ink #181818
     secondary #383838 · muted #707070 · PRIMARY GREEN #285838
     orange #FF6B02 = BRAND ONLY (logo / status), not functional UI.
   All-sans Inter Tight. Calm, light, professional — orange is the jewel, green
   is the action.

   Ashby's validator only accepts: :root, the documented .ashby-* classes
   (optionally with :hover/:focus/:focus-within/:focus-visible and
   [data-state]/[data-highlight] states), and at-rules. No element selectors,
   no descendant combinators, no undocumented classes, no clamp() font-sizes.

   LOGO: the board logo is an admin-uploaded image (Job Board settings). Upload
   the orange Z mark — it can't be set/recolored from this file.

   FONTS: @import must stay the FIRST line. If your plan strips @import, delete
   it and add this <link> in the board header settings instead:
   <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700&display=swap');

:root {
  /* ── Ashby-controlled variables (also settable in admin theme settings) ── */
  --colorPrimary900: #20472D;   /* dark green — hover/active */
  --colorPrimary600: #285838;   /* green — primary action (matches deck) */
  --widthMaxJobBoard: 920px;
  --borderRadiusContainer: 12px;
  --borderRadiusControl: 10px;
  --borderRadiusButton: 10px;
  --fontFamily: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --colorAppBackground: #F8F8F8; /* deck surface */

  /* ── Zingage tokens (sampled from the deck) ── */
  --zg-green: #285838;          /* primary action */
  --zg-green-ink: #20472D;      /* primary hover */
  --zg-green-soft: #EAF1ED;     /* soft green wash (focus rings, autofill) */
  --zg-blaze: #FF6B02;          /* BRAND only (logo / status) */
  --zg-ink: #181818;            /* primary text */
  --zg-ink-2: #383838;          /* strong secondary text */
  --zg-ink-soft: #707070;       /* muted text */
  --zg-card: #FFFFFF;
  --zg-line: #E8E8E8;           /* hairline border */
  --zg-line-hover: #DADCE0;
  --zg-danger: #D63B3B;
  --zg-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --zg-shadow-hover: 0 10px 28px -14px rgba(16, 24, 40, 0.20);

  --zg-body: 'Inter Tight', -apple-system, sans-serif;
}

/* ── Board heading (all-sans, like the deck) ───────────────────────────── */
.ashby-job-board-heading {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--zg-ink);
  margin-bottom: 6px;
}
.ashby-job-board-heading-count {
  font-family: var(--zg-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--zg-ink-soft);
}

/* ── Filters ───────────────────────────────────────────────────────────── */
.ashby-job-board-filters-label {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zg-ink-soft);
}
.ashby-job-board-reset-filters-label {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--zg-green);
  cursor: pointer;
}
.ashby-job-board-filter {
  font-family: var(--zg-body);
  font-size: 14px;
  color: var(--zg-ink);
  background: var(--zg-card);
  border: 1px solid var(--zg-line);
  border-radius: var(--borderRadiusControl);
  padding: 9px 13px;
  box-shadow: var(--zg-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ashby-job-board-filter:hover { border-color: var(--zg-line-hover); }
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  outline: none;
  border-color: var(--zg-green);
  box-shadow: 0 0 0 3px var(--zg-green-soft);
}

/* ── Department / team headings (column-header style) ───────────────────── */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--zg-ink-soft);
  margin: 36px 0 12px;
}
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--zg-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--zg-ink-soft);
}

/* ── Job posting brief (white product cards) ───────────────────────────── */
.ashby-job-posting-brief {
  background: var(--zg-card);
  border: 1px solid var(--zg-line);
  border-radius: var(--borderRadiusContainer);
  padding: 18px 20px;
  margin-bottom: 10px;
  box-shadow: var(--zg-shadow);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ashby-job-posting-brief:hover {
  border-color: var(--zg-line-hover);
  transform: translateY(-2px);
  box-shadow: var(--zg-shadow-hover);
}
.ashby-job-posting-brief-title {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--zg-ink);
}
.ashby-job-posting-brief-details {
  font-family: var(--zg-body);
  font-size: 13px;
  color: var(--zg-ink-soft);
  margin-top: 5px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Job posting page (detail view) ────────────────────────────────────── */
.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--zg-ink);
}
.ashby-job-posting-left-pane {
  font-family: var(--zg-body);
  line-height: 1.7;
  color: var(--zg-ink-2);
}
.ashby-job-board-back-to-all-jobs-button {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--zg-ink-soft);
  background: var(--zg-card);
  border: 1px solid var(--zg-line);
  border-radius: var(--borderRadiusButton);
  padding: 8px 14px;
  box-shadow: var(--zg-shadow);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--zg-green);
  border-color: var(--zg-line-hover);
}
.ashby-job-posting-right-pane-tab-slider {
  font-family: var(--zg-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--zg-ink);
}

/* ── Application form (white card, soft borders) ───────────────────────── */
.ashby-job-posting-right-pane {
  background: var(--zg-card);
  border: 1px solid var(--zg-line);
  border-radius: var(--borderRadiusContainer);
  box-shadow: var(--zg-shadow);
}
.ashby-application-form-container { font-family: var(--zg-body); color: var(--zg-ink); }
.ashby-application-form-section-header-title {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--zg-ink);
}
.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
  font-size: 13px;
  color: var(--zg-ink-soft);
}
.ashby-application-form-question-title {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--zg-ink);
}
.ashby-application-form-field-entry {
  border: 1px solid var(--zg-line);
  border-radius: var(--borderRadiusControl);
  background: var(--zg-card);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ashby-application-form-field-entry:focus-within {
  border-color: var(--zg-green);
  box-shadow: 0 0 0 3px var(--zg-green-soft);
}

/* Submit button — green primary, matching the deck */
.ashby-application-form-submit-button {
  font-family: var(--zg-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #fff;
  background: var(--zg-green);
  border: none;
  border-radius: var(--borderRadiusButton);
  padding: 13px 24px;
  box-shadow: 0 1px 2px rgba(40, 88, 56, 0.25);
  transition: background 0.18s ease, transform 0.12s ease;
}
.ashby-application-form-submit-button:hover {
  background: var(--zg-green-ink);
  transform: translateY(-1px);
}
.ashby-application-form-submit-button:focus-visible {
  outline: 3px solid var(--zg-green-soft);
  outline-offset: 2px;
}

/* ── Resume autofill ("magic") input ───────────────────────────────────── */
.ashby-application-form-autofill-input-root {
  background: var(--zg-green-soft);
  border: 1px dashed var(--zg-green);
  border-radius: var(--borderRadiusContainer);
}
.ashby-application-form-autofill-input-root[data-state="drag"] {
  border-style: solid;
  background: #DFEBE3;
}
.ashby-application-form-autofill-input-title {
  font-family: var(--zg-body);
  font-weight: 600;
  color: var(--zg-ink);
}
.ashby-application-form-autofill-input-description { color: var(--zg-ink-soft); font-size: 13px; }
.ashby-application-form-autofill-input-icon { color: var(--zg-green); }
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] { color: var(--zg-green); }
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] { color: var(--zg-danger); }

/* ── Status containers ─────────────────────────────────────────────────── */
.ashby-application-form-success-container {
  border-left: 3px solid var(--zg-green);
  background: var(--zg-green-soft);
  border-radius: var(--borderRadiusControl);
  padding: 16px 18px;
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  border-left: 3px solid var(--zg-danger);
  background: #FDEFEF;
  border-radius: var(--borderRadiusControl);
  padding: 16px 18px;
}
.ashby-application-form-texting-consent-description { font-size: 12px; color: var(--zg-ink-soft); }

/* ── Responsive: shrink the big headings on small screens ───────────────── */
@media (max-width: 600px) {
  .ashby-job-board-heading { font-size: 30px; }
  .ashby-job-posting-header,
  .ashby-job-posting-heading { font-size: 24px; }
}