/* stylelint-disable */
/*
 * Sondera — Ashby job board custom CSS
 *
 * Values mirror the Sondera design system, light theme. To change a colour,
 * radius or font, edit the --sd-* block and nothing else.
 *
 * Design rules:
 *  - flat surfaces; depth from the elevation shadow ring, never a hard 1px border
 *  - no coloured left-accent bars, no neumorphism
 *  - Overused Grotesk for words, Commit Mono tabular-nums for numbers
 *  - electric = action, coral = error, success = pass; colour encodes meaning
 *  - one focus recipe: 2px electric outline offset 2px; text fields get a glow
 *
 * How it hooks Ashby:
 *  1. Ashby's own theme variables (--colorNeutral*, --spacing*, --fontSize*, …)
 *     are remapped to Sondera tokens, so elements without an ashby-* class
 *     (date picker, popups, required marks) follow the brand too.
 *  2. The admin Theme colours are injected inline on <html>; the two
 *     --colorPrimary* values below use !important so this file wins.
 *  3. Where Ashby uses compound selectors, rules are prefixed with :root to
 *     out-rank them.
 */

/* ── Fonts (jsDelivr) ── */
@font-face {
  font-family: "Overused Grotesk";
  src: url("https://cdn.jsdelivr.net/gh/RandomMaerks/Overused-Grotesk@0.5-alpha.2/fonts/variable/OverusedGrotesk-VF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5.2.5/files/commit-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5.2.5/files/commit-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ── Sondera tokens (light) ─────────────────────────────── */
  --sd-electric: #127f59;      /* primary action; white-on-fill 4.99:1 */
  --sd-tactile: #0b6a49;       /* hover/pressed */
  --sd-deep: #d7efe4;          /* tinted brand background */
  --sd-glow: rgba(18, 127, 89, 0.32);
  --sd-glow-soft: rgba(18, 127, 89, 0.1);
  --sd-coral: #d1352c;         /* error / destructive */
  --sd-success: #26804a;       /* pass */

  --sd-elev-1: #eef1f5;        /* page canvas */
  --sd-elev-2: #f7f9fb;        /* panels */
  --sd-elev-3: #ffffff;        /* cards */
  --sd-elev-4: #ffffff;        /* popovers */
  --sd-well: #e7ebf1;          /* recessed */
  --sd-input: #ffffff;

  --sd-fg: #10131a;
  --sd-fg-muted: #4d5765;
  --sd-fg-subtle: #646d7b;
  --sd-fg-disabled: #a3acb9;
  --sd-fg-inverse: #ffffff;

  --sd-hairline: rgba(15, 23, 42, 0.07);
  --sd-border: rgba(15, 23, 42, 0.1);
  --sd-border-strong: rgba(15, 23, 42, 0.2);

  --sd-wash-hover: rgba(15, 23, 42, 0.05);
  --sd-wash-active: rgba(15, 23, 42, 0.09);

  --sd-elev-ring: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(15, 23, 42, 0.07);
  --sd-shadow-elev-2: var(--sd-elev-ring), 0 1px 1px -0.5px rgba(15, 23, 42, 0.06);
  --sd-shadow-elev-3: var(--sd-elev-ring), 0 1px 1px -0.5px rgba(15, 23, 42, 0.06),
    0 3px 3px -1.5px rgba(15, 23, 42, 0.06);
  --sd-shadow-elev-4: var(--sd-elev-ring), 0 1px 1px -0.5px rgba(15, 23, 42, 0.06),
    0 3px 3px -1.5px rgba(15, 23, 42, 0.06), 0 6px 6px -3px rgba(15, 23, 42, 0.08);
  --sd-shadow-control: inset 0 0 0 1px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08);
  --sd-shadow-control-hover: inset 0 0 0 1px rgba(15, 23, 42, 0.16), 0 2px 5px rgba(15, 23, 42, 0.12);
  --sd-shadow-control-inset: inset 0 1px 2px rgba(15, 23, 42, 0.1);
  --sd-btn-primary-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sd-electric), #000 10%),
    0 1px 2px rgba(15, 23, 42, 0.12);
  --sd-btn-primary-shadow-hover: inset 0 0 0 1px color-mix(in srgb, var(--sd-tactile), #000 6%),
    0 2px 5px rgba(15, 23, 42, 0.16);
  --sd-btn-primary-shadow-active: inset 0 1px 2px rgba(15, 23, 42, 0.14);

  --sd-radius-sm: 4px;
  --sd-radius-md: 8px;   /* inputs, buttons */
  --sd-radius-lg: 10px;  /* panels, cards */
  --sd-radius-pill: 9999px;

  --sd-font-sans: "Overused Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --sd-font-mono: "Commit Mono", ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Consolas, monospace;

  --sd-dur-fast: 120ms;
  --sd-dur-base: 180ms;
  --sd-dur-slow: 280ms;
  --sd-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Control height for form fields and the submit button. */
  --sd-control-h: 36px;
  /* Sticky header height (desktop). */
  --sd-nav-h: 64px;

  /* ── Ashby theme variables → Sondera tokens ─────────────── */
  /* Admin Theme injects these inline on <html>; !important wins over it. */
  --colorPrimary600: var(--sd-electric) !important;
  --colorPrimary900: var(--sd-tactile) !important;
  --colorPrimary500A: var(--sd-glow-soft);
  --colorPrimaryShadow: rgba(18, 127, 89, 0.25);
  --colorShadowPrimaryLight: var(--sd-glow);
  --colorShadowPrimaryXLight: var(--sd-glow-soft);

  --colorAppBackground: var(--sd-elev-1);
  --colorNeutral000: var(--sd-elev-3);
  --colorNeutral100: var(--sd-elev-2);
  --colorNeutral200: var(--sd-well);
  --colorNeutral300: color-mix(in srgb, #0f172a 12%, #fff);
  --colorNeutral400: color-mix(in srgb, #0f172a 20%, #fff);
  --colorNeutral500: var(--sd-fg-disabled);
  --colorNeutral600: var(--sd-fg-subtle);
  --colorNeutral700: var(--sd-fg-muted);
  --colorNeutral800: var(--sd-fg);
  --colorNeutralShadow: rgba(15, 23, 42, 0.08);

  --colorNegative200: color-mix(in srgb, var(--sd-coral) 10%, #fff);
  --colorNegative600: var(--sd-coral);
  --colorNegative800: color-mix(in srgb, var(--sd-coral), #000 30%);
  --colorPositive200: color-mix(in srgb, var(--sd-success) 10%, #fff);
  --colorPositive600: var(--sd-success);
  --colorPositive800: color-mix(in srgb, var(--sd-success), #000 30%);

  --fontFamily: var(--sd-font-sans);
  --fontSizeXxsmall: 10px;
  --fontSizeXsmall: 11px;
  --fontSizeSmall: 13px;
  --fontSizeNormal: 15px;
  --fontSizeLarge: 17px;
  --fontSizeXlarge: 19px;
  --fontSizeXxlarge: 22px;
  --fontSizeXxxlarge: 28px;
  --fontSizeXxxxlarge: 34px;
  --lineHeightNormal: 1.55;

  --borderRadiusContainer: var(--sd-radius-lg);
  --borderRadiusControl: var(--sd-radius-md);
  --borderRadiusButton: var(--sd-radius-md);

  --transitionDuration: var(--sd-dur-base);
  --transitionDurationFast: var(--sd-dur-fast);
  --transitionDurationSlow: var(--sd-dur-slow);
  --transitionFunction: var(--sd-ease);

  --navDesktopHeight: var(--sd-nav-h);
  --navMobileHeight: 56px;

  --widthMaxContent: 900px;
  --widthMaxJobBoard: 800px;
  --widthMaxSubscriptionPreferences: 600px;
}

/* ── Base ──────────────────────────────────────────────────── */
html,
body {
  background: var(--sd-elev-1);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "cv11" on, "ss01" on, "ss03" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(18, 127, 89, 0.25);
  color: var(--sd-fg);
}

a {
  color: var(--sd-electric);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--sd-tactile);
}

/* Keyboard focus. Never removed. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--sd-electric);
  outline-offset: 2px;
}

/* ── Header ────────────────────────────────────────────────── */
.ashby-job-posting-header {
  background: color-mix(in srgb, var(--sd-elev-1) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.ashby-job-posting-header img {
  height: 22px;
  width: auto;
}

.ashby-job-board-back-to-all-jobs-button {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sd-fg-muted);
  background: transparent;
  border: 0;
  border-radius: var(--sd-radius-md);
  transition: background-color var(--sd-dur-fast) var(--sd-ease), color var(--sd-dur-fast) var(--sd-ease);
}
.ashby-job-board-back-to-all-jobs-button svg {
  fill: currentColor;
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--sd-fg);
  background: var(--sd-wash-hover);
}

/* ── Job board: heading, filters ───────────────────────────── */
.ashby-job-board-heading {
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sd-fg);
}

.ashby-job-board-heading-count {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size-adjust: 0.52;
  font-weight: 500;
  color: var(--sd-fg-subtle);
}

/* Eyebrow: uppercase tracked micro-label */
.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-fg-muted);
}

.ashby-job-board-reset-filters-label {
  color: var(--sd-electric);
  cursor: pointer;
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--sd-tactile);
}

.ashby-job-board-filter {
  height: var(--sd-control-h);
  padding: 0 12px;
  background-color: var(--sd-input);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: 13px;
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-control);
  transition: box-shadow var(--sd-dur-fast) var(--sd-ease);
}
.ashby-job-board-filter:hover {
  box-shadow: var(--sd-shadow-control-hover);
}
.ashby-job-board-filter:focus-visible {
  outline: none;
  box-shadow: var(--sd-shadow-control), 0 0 0 2px var(--sd-glow);
}

/* ── Job board: department groups ─────────────────────────── */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  color: var(--sd-fg);
}

/* ── Job board: posting cards (elev-3 card, ring not border) ─ */
.ashby-job-posting-brief-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ashby-job-posting-brief {
  margin-bottom: 0; /* list gap owns spacing */
  padding: 16px 20px;
  background: var(--sd-elev-3);
  border: 0;
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-elev-2);
  transition:
    box-shadow var(--sd-dur-fast) var(--sd-ease),
    background-color var(--sd-dur-fast) var(--sd-ease);
}
a:hover > .ashby-job-posting-brief,
.ashby-job-posting-brief:hover {
  box-shadow: var(--sd-shadow-elev-4);
}

.ashby-job-posting-brief-title {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sd-fg);
}

.ashby-job-posting-brief-details {
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--sd-fg-muted);
}

/* ── Posting page ──────────────────────────────────────────── */
.ashby-job-posting-heading {
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sd-fg);
}

/* Facts card (location, type, department): fits its content and stays
   in view while the description scrolls. */
:root .ashby-job-posting-left-pane {
  align-self: start;
  position: sticky;
  top: calc(var(--sd-nav-h) + 16px);
  margin-top: var(--spacingLarge); /* level with the tab bar */
  margin-right: 16px;
  padding: 20px;
  background: var(--sd-elev-3);
  border: 0;
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-elev-2);
  font-size: 13px;
  line-height: 20px;
  color: var(--sd-fg-muted);
}
.ashby-job-posting-left-pane h2 {
  margin: 0 0 2px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-fg-subtle);
}
.ashby-job-posting-left-pane p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--sd-fg);
}

/* Tabs + content read as one card: tab bar is the card's head. */
.ashby-job-posting-right-pane > nav[role="tablist"] {
  background: var(--sd-elev-3);
  border-radius: var(--sd-radius-lg) var(--sd-radius-lg) 0 0;
  box-shadow: 0 0 0 1px var(--sd-hairline);
}
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--sd-fg-muted);
  transition: color var(--sd-dur-fast) var(--sd-ease);
}
.ashby-job-posting-right-pane [role="tab"]:hover > span,
.ashby-job-posting-right-pane [role="tab"][aria-selected="true"] > span {
  color: var(--sd-fg);
}
.ashby-job-posting-right-pane-tab-slider {
  background: var(--sd-electric);
  height: 2px;
  border-radius: var(--sd-radius-pill);
}

/* Card body: description, autofill, form. Side-only edges so stacked
   pieces join without a seam; the last piece closes the card. */
:root .ashby-job-posting-description-container,
:root .ashby-application-form-autofill-pane,
:root .ashby-application-form-container {
  background: var(--sd-elev-3);
  border: 0;
  border-radius: 0;
  box-shadow: -1px 0 0 0 var(--sd-hairline), 1px 0 0 0 var(--sd-hairline);
  padding-left: 24px;
  padding-right: 24px;
}
:root .ashby-job-posting-description-container,
:root .ashby-application-form-container {
  padding-top: 24px;
  padding-bottom: 28px;
  border-radius: 0 0 var(--sd-radius-lg) var(--sd-radius-lg);
  box-shadow: -1px 0 0 0 var(--sd-hairline), 1px 0 0 0 var(--sd-hairline),
    0 1px 0 0 var(--sd-hairline), 0 3px 4px -2px rgba(15, 23, 42, 0.08);
}

/* Rich-text description: a readable measure and clear rhythm */
.ashby-job-posting-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sd-fg);
}
.ashby-job-posting-description p,
.ashby-job-posting-description li {
  color: var(--sd-fg);
}
:root .ashby-job-posting-description > p + p {
  margin-top: 12px;
}
/* Blank lines from the editor; headings carry the rhythm instead */
:root .ashby-job-posting-description > p:empty,
:root .ashby-job-posting-description > :is(h1, h2, h3):empty {
  display: none;
}
:root .ashby-job-posting-description h1,
:root .ashby-job-posting-description h2,
:root .ashby-job-posting-description h3 {
  margin: 36px 0 10px;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--sd-fg);
}
:root .ashby-job-posting-description h1::before,
:root .ashby-job-posting-description h2::before {
  content: none;
}
:root .ashby-job-posting-description > :first-child {
  margin-top: 0;
}
/* A paragraph that is only bold text is used as a sub-heading in the editor */
:root .ashby-job-posting-description > p:has(> strong:only-child) {
  margin-top: 28px;
  margin-bottom: 4px;
  font-size: 17px;
  line-height: 24px;
}
:root .ashby-job-posting-description > p:has(> strong:only-child) > strong {
  font-weight: 600;
}
:root .ashby-job-posting-description ul,
:root .ashby-job-posting-description ol {
  margin: 4px 0 12px;
  padding-left: 22px;
}
:root .ashby-job-posting-description li {
  margin-top: 8px;
  padding-left: 4px;
}
.ashby-job-posting-description li::marker {
  color: var(--sd-electric);
}
.ashby-job-posting-description strong {
  font-weight: 600;
}
.ashby-job-posting-description code {
  font-family: var(--sd-font-mono);
  font-size-adjust: 0.52;
  padding: 1px 4px;
  background: var(--sd-well);
  border-radius: var(--sd-radius-sm);
}
.ashby-job-posting-description hr {
  border: 0;
  border-top: 1px solid var(--sd-hairline);
  margin: 24px 0;
}

/* "Apply for this Job" at the foot of the overview */
.ashby-job-posting-description-container > a button {
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-fg-inverse);
  background: var(--sd-electric);
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-btn-primary-shadow);
  transition:
    background-color var(--sd-dur-fast) var(--sd-ease),
    box-shadow var(--sd-dur-fast) var(--sd-ease);
}
.ashby-job-posting-description-container > a:hover button {
  background: var(--sd-tactile);
  box-shadow: var(--sd-btn-primary-shadow-hover);
}

/* ── Application form ──────────────────────────────────────── */
:root .ashby-application-form-autofill-pane {
  margin: 0;
  padding-top: 24px;
  padding-bottom: 0;
}

.ashby-application-form-section-container + .ashby-application-form-section-container {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--sd-hairline);
}

.ashby-application-form-section-header-title {
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  color: var(--sd-fg);
}
.ashby-application-form-section-header-description {
  font-size: 13px;
  line-height: 20px;
  color: var(--sd-fg-muted);
}

.ashby-application-form-field-entry {
  margin-bottom: 20px;
}

.ashby-application-form-question-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--sd-fg);
}
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  font-size: 13px;
  line-height: 20px;
  color: var(--sd-fg-muted);
}

/* Text fields: white field, control ring; focus = attached glow, not an outline */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-date,
.ashby-application-form-input-dropdown-select {
  min-height: var(--sd-control-h);
  padding: 0 12px;
  background-color: var(--sd-input);
  color: var(--sd-fg);
  font-family: var(--sd-font-sans);
  font-size: 15px;
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-control);
  transition: box-shadow var(--sd-dur-fast) var(--sd-ease);
}
.ashby-application-form-input-textarea {
  padding: 8px 12px;
  line-height: 1.55;
}
.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-date:hover,
.ashby-application-form-input-dropdown-select:hover {
  box-shadow: var(--sd-shadow-control-hover);
}
.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-autocomplete:focus,
.ashby-application-form-input-date:focus,
.ashby-application-form-input-dropdown-select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--sd-electric), 0 0 0 3px var(--sd-glow);
}
.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder {
  color: var(--sd-fg-subtle);
}
/* Numbers, phone, dates read as data */
.ashby-application-form-input-text[type="tel"],
.ashby-application-form-input-text[type="number"] {
  font-family: var(--sd-font-mono);
  font-variant-numeric: tabular-nums;
  font-size-adjust: 0.52;
}
.ashby-application-form-input-dropdown[data-disabled] .ashby-application-form-input-dropdown-select,
.ashby-application-form-input-text:disabled,
.ashby-application-form-input-textarea:disabled {
  background: var(--sd-well);
  color: var(--sd-fg-disabled);
  box-shadow: var(--sd-shadow-control-inset);
  cursor: not-allowed;
}
.ashby-application-form-input-dropdown-icon {
  color: var(--sd-fg-subtle);
}

/* Popups: autocomplete + date picker (elev-4) */
.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background: var(--sd-elev-4);
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-elev-4);
  padding: 4px;
}
.ashby-application-form-input-autocomplete-popup-result {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: var(--sd-radius-sm);
  color: var(--sd-fg);
}
.ashby-application-form-input-autocomplete-popup-result:hover {
  background: var(--sd-wash-hover);
}
.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] {
  background: var(--sd-glow-soft);
}
.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  padding: 8px;
  font-size: 13px;
  color: var(--sd-fg-subtle);
}
.ashby-application-form-input-date-popup-title {
  font-size: 13px;
  font-weight: 600;
}
.ashby-application-form-input-date-popup-header-button {
  border-radius: var(--sd-radius-sm);
  color: var(--sd-fg-muted);
}
.ashby-application-form-input-date-popup-header-button:hover {
  background: var(--sd-wash-hover);
  color: var(--sd-fg);
}

/* Checkbox / radio: native controls tinted electric */
.ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-input-radio-group-option-radio {
  accent-color: var(--sd-electric);
}
.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  font-size: 15px;
  color: var(--sd-fg);
}
.ashby-application-form-input-checkbox-group-option[data-disabled] .ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option[data-disabled] .ashby-application-form-input-radio-group-option-label {
  color: var(--sd-fg-disabled);
}

/* Yes / No: segmented, flat */
.ashby-application-form-input-yesno {
  gap: 0;
}
.ashby-application-form-input-yesno-option {
  height: var(--sd-control-h);
  min-width: 72px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sd-fg-muted);
  background: var(--sd-input);
  border: 0;
  box-shadow: var(--sd-shadow-control);
  transition: background-color var(--sd-dur-fast) var(--sd-ease), color var(--sd-dur-fast) var(--sd-ease);
}
.ashby-application-form-input-yesno-option[data-option="yes"] {
  border-radius: var(--sd-radius-md) 0 0 var(--sd-radius-md);
}
.ashby-application-form-input-yesno-option[data-option="no"] {
  border-radius: 0 var(--sd-radius-md) var(--sd-radius-md) 0;
}
.ashby-application-form-input-yesno-option:hover {
  color: var(--sd-fg);
  background: color-mix(in srgb, var(--sd-input), #0f172a 4%);
}
.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  color: var(--sd-fg);
  background: var(--sd-deep);
  box-shadow: inset 0 0 0 1px var(--sd-electric);
}

/* File upload: one recessed dropzone (the outer box), the inner strip is flat */
:root .ashby-application-form-input-file {
  padding: 20px;
  background: var(--sd-elev-2);
  border: 1px dashed var(--sd-border-strong);
  border-radius: var(--sd-radius-lg);
  transition: border-color var(--sd-dur-fast) var(--sd-ease), background-color var(--sd-dur-fast) var(--sd-ease);
}
:root .ashby-application-form-input-file:hover {
  border-color: var(--sd-electric);
  background: color-mix(in srgb, var(--sd-electric) 4%, var(--sd-elev-2));
}
:root .ashby-application-form-input-file-dropzone {
  gap: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.ashby-application-form-input-file-dropzone-instructions {
  font-size: 13px;
  color: var(--sd-fg-muted);
}
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-education-add,
:root .ashby-application-form-autofill-input-base-layer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sd-fg);
  background: var(--sd-elev-3);
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-control);
  transition: box-shadow var(--sd-dur-fast) var(--sd-ease);
}
.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-input-education-add:hover,
:root .ashby-application-form-autofill-input-base-layer button:hover {
  color: var(--sd-fg);
  background: var(--sd-elev-3);
  box-shadow: var(--sd-shadow-control-hover);
}
.ashby-application-form-input-file-dropzone-upload svg {
  fill: var(--sd-electric);
}
.ashby-application-form-input-file-item {
  padding: 6px 8px;
  background: var(--sd-elev-3);
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-shadow-elev-2);
}
.ashby-application-form-input-file-item-name {
  font-family: var(--sd-font-mono);
  font-size: 13px;
  font-size-adjust: 0.52;
  color: var(--sd-fg);
}
.ashby-application-form-input-file-item-delete,
.ashby-application-form-input-education-entry-delete {
  color: var(--sd-fg-subtle);
  border-radius: var(--sd-radius-sm);
}
.ashby-application-form-input-file-item-delete:hover,
.ashby-application-form-input-education-entry-delete:hover {
  color: var(--sd-coral);
  background: rgba(209, 53, 44, 0.08);
}

/* Education history */
.ashby-application-form-input-education-entry {
  padding: 16px;
  background: var(--sd-elev-2);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-elev-2);
}
.ashby-application-form-input-education-entry-header {
  font-size: 13px;
  font-weight: 600;
}

/* Resume autofill: an electric-tinted callout, no left bar */
:root .ashby-application-form-autofill-input-root {
  padding: 16px;
  background: color-mix(in srgb, var(--sd-electric) 6%, var(--sd-elev-3));
  border: 0;
  border-radius: var(--sd-radius-lg);
  box-shadow: inset 0 0 0 1px rgba(18, 127, 89, 0.2);
  color: var(--sd-fg-muted);
}
.ashby-application-form-autofill-input-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-fg);
}
.ashby-application-form-autofill-input-description {
  font-size: 13px;
  color: var(--sd-fg-muted);
}
.ashby-application-form-autofill-input-icon {
  color: var(--sd-electric);
}
:root .ashby-application-form-autofill-input-root[data-state="drag"],
:root .ashby-application-form-autofill-input-root[data-state="pending"] {
  box-shadow: inset 0 0 0 1px var(--sd-electric), 0 0 0 3px var(--sd-glow);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--sd-coral);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--sd-success);
}

/* ── Primary button: submit (flat electric fill) ───────────── */
:root .ashby-application-form-submit-button {
  height: 40px;
  margin-top: 16px;
  padding: 0 20px;
  font-family: var(--sd-font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-fg-inverse);
  background: var(--sd-electric);
  border: 0;
  border-radius: var(--sd-radius-md);
  box-shadow: var(--sd-btn-primary-shadow);
  transition:
    background-color var(--sd-dur-fast) var(--sd-ease),
    box-shadow var(--sd-dur-fast) var(--sd-ease);
}
:root .ashby-application-form-submit-button:hover {
  background: var(--sd-tactile);
  box-shadow: var(--sd-btn-primary-shadow-hover);
}
:root .ashby-application-form-submit-button:active {
  box-shadow: var(--sd-btn-primary-shadow-active);
  filter: brightness(0.97) saturate(1.03);
}
:root .ashby-application-form-submit-button:disabled,
:root .ashby-application-form-submit-button[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Outcome states: tinted surface + text, never a coloured bar ─ */
.ashby-application-form-success-container {
  padding: 20px;
  background: rgba(38, 128, 74, 0.08);
  border-radius: var(--sd-radius-lg);
  color: var(--sd-fg);
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  padding: 20px;
  background: rgba(209, 53, 44, 0.08);
  border-radius: var(--sd-radius-lg);
  color: var(--sd-fg);
}
.ashby-application-blocking-disclosure {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--sd-fg-muted);
  background: var(--sd-elev-2);
  border-radius: var(--sd-radius-md);
}

.ashby-survey-form-container {
  background: var(--sd-elev-3);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-elev-2);
}

/* ── Small screens: single column, facts card no longer sticky ─ */
@media (max-width: 720px) {
  /* Facts become a compact 2-column grid so the description starts higher */
  :root .ashby-job-posting-left-pane {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-right: 0;
    margin-bottom: 16px;
    padding: 16px;
  }
  :root .ashby-job-posting-left-pane > div {
    padding: 0;
    border: 0;
  }
  .ashby-job-posting-heading {
    font-size: 28px;
    line-height: 34px;
  }
  :root .ashby-job-posting-description-container,
  :root .ashby-application-form-autofill-pane,
  :root .ashby-application-form-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0ms !important;
  }
}