/* ==========================================================
   page-careers-jobs.css  v1.0
   Jobs listing + detail + apply modal
   Depends on: intone-design-system.css, intone-theme-tokens.css
   ========================================================== */


/* ── Page-level design tokens ─────────────────────────────
   Scoped to .intone-jobs-page so overrides stay isolated.
   ──────────────────────────────────────────────────────── */
.intone-jobs-page {
  --cj-dark:        #141414;
  --cj-navy:        #233963;
  --cj-gold:        var(--ds-gold, #f6b43f);
  --cj-gold-amber:  #8f600f;
  --cj-gold-light:  #ffca6e;
  --cj-badge-bg:    #eceef2;
  --cj-badge-text:  #141414;
  --cj-muted:       #818994;
  --cj-body:        #717182;
  --cj-card-bg:     #ffffff;
  --cj-section-bg:  #f4f6f9;
  --cj-hero-bg:     #ffffff;
  --cj-border:      rgba(0, 0, 0, 0.08);
  --cj-border-md:   rgba(0, 0, 0, 0.12);
}

/* ── Restore position:sticky for the job-detail sidebar ──
   .intone-page sets `overflow-x: hidden` (design-system.css, sitewide
   anti-bleed guard). Per spec, when only one axis is non-`visible`, the
   browser forces the OTHER axis to `overflow-y: auto` too — this silently
   turns .intone-page into the nearest scrolling ancestor, which breaks
   .job-detail__sidebar's `position: sticky` (it never actually stuck; it
   just scrolled away like `position: relative`). `overflow-x: clip` is the
   modern value that clips horizontally without ever triggering that
   auto-quirk, so sticky binds to the real viewport again. Verified: no
   horizontal scrollbar introduced. */
.intone-jobs-page {
  overflow-x: clip;
  overflow-y: visible;
}


/* ════════════════════════════════════════════════════════
   0. BREADCRUMB OVERRIDE — normal-flow positioning
   The jobs page uses a flat-color hero (not a full-bleed image
   behind the transparent header). The global --over-hero class
   positions the breadcrumb absolutely inside the hero, causing it
   to overlap both the header and the hero content. Override it to
   normal flow so the breadcrumb sits below the header as a proper
   content row, then reduce the hero's top padding accordingly.
════════════════════════════════════════════════════════ */
.intone-jobs-page .intone-breadcrumb--over-hero {
  position: absolute;
  top: 120px;
  left: 0px;
  right: 0px;
  z-index: 10;
  margin: 0px auto;
  background: transparent;
}

/* The DETAIL view (?job=REQ-xxx) renders no hero at all — breadcrumbs.php
   already special-cases this ($_bc_is_careers_job_detail) so it never gets
   --over-hero, keeping it in plain normal-flow `.intone-breadcrumb`. But
   .intone-jobs-page--detail had no padding-top of its own, so that plain
   breadcrumb (the view's first child) rendered starting at y=0 — directly
   behind the fixed 72px `.ihn` header. Same clamp() already used for this
   exact purpose on the other content-led (non-hero) templates —
   single-post.css's `.intone-single-post`, archive-case-study.css's
   `.intone-case-study-page` — for consistency. Scoped to --detail only so
   the listing view (which already clears the header via its own hero
   padding + the --over-hero absolute overlay above) is untouched. */
.intone-jobs-page--detail {
  padding-top: clamp(80px, 12vw, 120px);
}


/* ════════════════════════════════════════════════════════
   1. HERO
════════════════════════════════════════════════════════ */

.jobs-hero {
  padding: clamp(130px, 13vw, 140px) var(--gutter) clamp(40px, 5vw, 72px);;  
  background: var(--cj-hero-bg);
  border-bottom: 1px solid var(--cj-border);
}

.jobs-hero__inner {
  /* max-width: 1352px; */
  margin: 0 auto;
}
.jobs-hero__rule {
  display: block;
  height: 1px;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.jobs-hero__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(48px, 8.5vw, 120px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--cj-dark);
  margin: 0 0 28px;
}

.jobs-hero__sub {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(15px, 1.65vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  /* text-transform: uppercase; */
  color: var(--cj-muted);
  margin: 0;
  max-width: 840px;
}


/* ════════════════════════════════════════════════════════
   2. LISTING SECTION
════════════════════════════════════════════════════════ */

.jobs-listing {
  padding: 48px 44px 88px;
  background: var(--cj-section-bg);
}

.jobs-listing__inner {
  /* max-width: 1352px; */
  margin: 0 auto;
}

.jobs-listing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.jobs-listing__heading {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cj-dark);
  margin: 0;
}

.jobs-listing__count {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--cj-muted);
}

/* Error state */
.jobs-error {
  text-align: center;
  color: var(--cj-muted);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  padding: 56px 0;
  line-height: 1.6;
}
.jobs-error a { color: var(--cj-dark); text-decoration: underline; }


/* ════════════════════════════════════════════════════════
   2.5 FILTER BAR
════════════════════════════════════════════════════════ */

.jobs-filter {
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

/* Search-mode tabs (Keyword Search / AI Search) */
.jobs-search-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cj-border);
  margin-bottom: 2px;
}
.jobs-search-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 4px 10px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cj-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.jobs-search-tab + .jobs-search-tab { margin-left: 18px; }
.jobs-search-tab:hover { color: var(--cj-dark); }
.jobs-search-tab.is-active {
  color: var(--cj-dark);
  border-bottom-color: var(--cj-dark);
}

/* AI Search panel */
.jobs-ai-search {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.jobs-ai-search__input {
  flex: 1;
  min-height: 36px;
  padding: 8px 14px;
  background: var(--cj-section-bg);
  border: 1px solid var(--cj-border-md);
  border-radius: 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  color: var(--cj-dark);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, background 0.15s;
}
.jobs-ai-search__input::placeholder { color: var(--cj-muted); }
.jobs-ai-search__input:focus {
  border-color: var(--cj-dark);
  background: var(--cj-card-bg);
}
.jobs-ai-search__btn {
  height: 36px;
  padding: 0 22px;
  background: var(--cj-dark);
  border: 1px solid var(--cj-dark);
  color: var(--cj-card-bg);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
  transition: opacity 0.15s;
}
.jobs-ai-search__btn:hover { opacity: 0.85; }
.jobs-ai-search__btn:disabled { opacity: 0.6; cursor: default; }
.jobs-ai-search__status {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--cj-muted);
}
.jobs-ai-search__status .jobs-ai-search__fallback-link {
  color: var(--cj-dark);
  text-decoration: underline;
  font-weight: 500;
}
@media (max-width: 640px) {
  .jobs-ai-search { flex-direction: column; }
  .jobs-ai-search__btn { width: 100%; justify-content: center; }
}

/* Search row */
.jobs-filter__search-row {
  position: relative;
  display: flex;
  align-items: center;
}

.jobs-filter__search-icon {
  position: absolute;
  right: 12px;
  color: var(--cj-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.jobs-filter__search {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 14px;
  background: var(--cj-section-bg);
  border: 1px solid var(--cj-border-md);
  border-radius: 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  color: var(--cj-dark);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.jobs-filter__search::placeholder { color: var(--cj-muted); }
.jobs-filter__search:focus {
  border-color: var(--cj-dark);
  background: var(--cj-card-bg);
}

/* Dropdowns row */
.jobs-filter__row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Select wrapper */
.jobs-filter__select-wrap {
  flex: 1;
  min-width: 160px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--cj-section-bg);
  border: 1px solid var(--cj-border-md);
  height: 36px;
  padding: 0 10px;
  transition: border-color 0.15s;
}
.jobs-filter__select-wrap:focus-within {
  border-color: var(--cj-dark);
}

.jobs-filter__select-icon {
  flex-shrink: 0;
  color: var(--cj-muted);
}

.jobs-filter__select {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--cj-dark);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Space for chevron */
  padding-right: 20px;
}

.jobs-filter__select-chevron {
  position: absolute;
  right: 10px;
  color: var(--cj-muted);
  pointer-events: none;
  flex-shrink: 0;
}

/* Clear button */
.jobs-filter__clear {
  height: 36px;
  padding: 0 20px;
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cj-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 0;
}
.jobs-filter__clear:hover {
  border-color: var(--cj-dark);
  color: var(--cj-dark);
}

/* No-results message */
.jobs-noresults {
  text-align: center;
  color: var(--cj-muted);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 16px;
  padding: 56px 0;
  line-height: 1.6;
}
.jobs-noresults[hidden] { display: none; }

.jobs-noresults__clear {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--cj-dark);
  text-decoration: underline;
  cursor: pointer;
}
.jobs-noresults__clear:hover { text-decoration: none; }


/* ════════════════════════════════════════════════════════
   3. JOBS GRID
════════════════════════════════════════════════════════ */

.jobs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


/* ════════════════════════════════════════════════════════
   4. JOB CARD
════════════════════════════════════════════════════════ */

.job-card {
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s, border-color 0.22s;
}

.job-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.09);
  border-color: var(--cj-border-md);
}

/* Clickable area (navigates to detail) */
.job-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 0;
  text-decoration: none;
  color: inherit;
}
.job-card__link:hover,
.job-card__link:focus { text-decoration: none; color: inherit; outline: none; }
.job-card__link:focus-visible {
  outline: 2px solid var(--cj-dark);
  outline-offset: -2px;
}

/* Card header: title + badge */
.job-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
}

.job-card__title-group { flex: 1; min-width: 0; }

.job-card__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cj-dark);
  margin: 0 0 5px;
  /* Clamp long titles to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card__req {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 400;
  color: var(--cj-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
}

/* Card body: description + tags */
.job-card__body {
  flex: 1;
  padding-bottom: 14px;
}

.job-card__desc {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--cj-muted);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Card footer: meta row */
.job-card__footer {
  border-top: 1px solid var(--cj-border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.job-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cj-muted);
}
.job-card__meta svg { flex-shrink: 0; }

/* Card actions row */
.job-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 18px;
  gap: 12px;
}

.job-card__view-link {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--cj-muted);
  text-decoration: none;
  transition: color 0.18s;
}
.job-card__view-link:hover { color: var(--cj-dark); text-decoration: none; }

.job-card__apply-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  background: var(--cj-dark);
  color: #fff;
  border: none;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.job-card__apply-btn:hover { background: #2c2c2c; }


/* ════════════════════════════════════════════════════════
   5. SHARED COMPONENTS: badges + tags
════════════════════════════════════════════════════════ */

/* Employment-type badge (e.g. "Contract") */
.job-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 3px 9px;
  border-radius: 8px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.job-badge--type {
  background: var(--cj-badge-bg);
  color: var(--cj-badge-text);
}

/* Skill / duration tags (amber outline) */
.job-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--cj-gold-light);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: var(--cj-gold-amber);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ════════════════════════════════════════════════════════
   6. SKELETON CARDS (loading state)
════════════════════════════════════════════════════════ */

@keyframes cj-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

/* NOTE: the listing header count / filter bar / job-card grid /
   pagination skeletons now live in the site-wide dedicated skeleton
   system — template-parts/skeleton/sk-jobs-*.php + the "sk-bone"
   rules in skeleton.css (§11) — instead of the .skel-line/cj-shimmer
   ad-hoc classes that used to live here. .skel-line itself is kept
   below because the job-detail page's own title/body skeleton
   (.job-detail--skeleton further down) still uses it. */
.skel-line {
  border-radius: 3px;
  background: linear-gradient(90deg, #e4e7ec 25%, #edf0f4 50%, #e4e7ec 75%);
  background-size: 1200px 100%;
  animation: cj-shimmer 1.5s infinite linear;
  height: 13px;
  margin-bottom: 9px;
}
.skel-line--badge  { width: 64px; height: 20px; border-radius: 8px; margin-bottom: 0; }
.skel-line--body   { width: 92%; }
.skel-line--short  { width: 62%; margin-bottom: 0; }
.skel-line--meta   { width: 56%; height: 12px; margin-bottom: 0; }

/* Author-set `display` on .jobs-filter would otherwise beat the
   browser's default [hidden]{display:none} — same fix pattern as the
   job-detail loading/error states below. */
.jobs-filter[hidden] { display: none !important; }


/* ════════════════════════════════════════════════════════
   7. REVEAL ANIMATION  (for dynamically inserted cards)
      Base .reveal/.reveal.in live in intone-design-system.css;
      these rules use the same class so cards animate in.
════════════════════════════════════════════════════════ */

.job-card.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.42s ease, transform 0.42s ease;
}
.job-card.reveal.in {
  opacity: 1;
  transform: none;
}


/* ════════════════════════════════════════════════════════
   8. JOB DETAIL PAGE
════════════════════════════════════════════════════════ */

.job-detail {
  padding: clamp(40px, 4vw, 60px) var(--gutter) clamp(40px, 5vw, 72px);
  background: var(--cj-section-bg);
  min-height: 60vh;
}

.job-detail__inner {
  /* max-width: 1352px; */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 36px;
  align-items: start;
}

/* ── Main column ────────────────────────────────────── */
.job-detail__main {
  background: var(--cj-card-bg);
  padding: 40px 44px;
  min-height: stretch;
}

.job-detail__header { margin-bottom: 32px; }

.job-detail__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.job-detail__title-block { flex: 1; min-width: 0; }

.job-detail__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--cj-dark);
  margin: 0 0 8px;
}

.job-detail__req {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--cj-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.job-detail__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.job-detail__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--cj-body);
}

.job-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Body content */
.job-detail__body { padding-top: 4px; }

.jd-section-heading {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--cj-dark);
  margin: 32px 0 12px;
}
.jd-section-heading:first-child { margin-top: 0; }

.jd-para {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cj-body);
  margin: 0 0 14px;
}

.jd-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.jd-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--cj-body);
  margin-bottom: 7px;
}
.jd-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cj-dark);
  font-weight: 700;
}

/* Rendered HTML remarks */
.jd-remarks-html p    { font-size: 15px; line-height: 1.7; color: var(--cj-body); margin: 0 0 14px; font-family: var(--ds-font-heading, 'Public Sans', sans-serif); }
.jd-remarks-html ul,
.jd-remarks-html ol   { padding-left: 20px; margin: 0 0 16px; font-family: var(--ds-font-heading, 'Public Sans', sans-serif); }
.jd-remarks-html li   { font-size: 15px; line-height: 1.7; color: var(--cj-body); margin-bottom: 6px; }
.jd-remarks-html strong { color: var(--cj-dark); font-weight: 600; }
.jd-remarks-html h2,
.jd-remarks-html h3,
.jd-remarks-html h4   { font-family: var(--ds-font-heading, 'Public Sans', sans-serif); font-weight: 600; color: var(--cj-dark); margin: 24px 0 10px; }
.jd-remarks-html h2   { font-size: 20px; }
.jd-remarks-html h3   { font-size: 17px; }
.jd-remarks-html h4   { font-size: 15px; }

/* ── Sidebar ─────────────────────────────────────────── */
.job-detail__sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-detail__apply-card {
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border);
  padding: 28px 24px 24px;
}

.job-detail__apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: var(--cj-dark);
  color: #fff;
  border: none;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 24px;
}
.job-detail__apply-btn:hover { background: #2c2c2c; }

.job-detail__summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--cj-border);
}

.job-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  color: var(--cj-body);
}

.job-detail__all-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cj-muted);
  text-decoration: none;
  transition: color 0.18s;
  padding: 12px 0;
}
.job-detail__all-link:hover { color: var(--cj-dark); text-decoration: none; }

/* Save + Share buttons (Figma: sidebar "Inline content" row) */
.job-detail__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.job-detail__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--cj-dark);
  color: var(--cj-dark);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.job-detail__action-btn:hover { background: var(--cj-dark); color: #fff; }

/* Saved state — filled bookmark, gold accent (persists via localStorage) */
.job-detail__action-btn.js-save[aria-pressed="true"] {
  background: var(--cj-dark);
  color: #fff;
}
.job-detail__action-btn.js-save[aria-pressed="true"] svg path { fill: currentColor; }

.job-detail__share-wrap { position: relative; flex: 1; }
.job-detail__share-wrap .job-detail__action-btn { width: 100%; }

.job-detail__share-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 200px;
  background: #fff;
  border: 1px solid var(--cj-border-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.job-detail__share-menu[hidden] { display: none; }

.job-detail__share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: none;
  color: var(--cj-dark);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.job-detail__share-item:hover { background: var(--cj-section-bg); text-decoration: none; }
.job-detail__share-item svg { flex-shrink: 0; }

/* Loading state — skeleton (mirrors .job-detail__inner exactly so
   there's no layout shift when the real content swaps in) */
.job-detail-loading[hidden],
.job-detail-error[hidden],
.job-detail[hidden]          { display: none !important; }

.job-detail--skeleton .job-detail__title-row,
.job-detail--skeleton .job-detail__meta { pointer-events: none; }

.skel-line--jd-title  { width: 70%; height: 32px; margin-bottom: 10px; }
.skel-line--jd-req    { width: 30%; height: 14px; margin-bottom: 0; }
.skel-line--jd-meta   { width: 120px; height: 15px; margin-bottom: 0; flex-shrink: 0; }
.skel-line--jd-heading{ width: 40%; height: 18px; margin: 32px 0 12px; }
.skel-line--jd-btn     { width: 100%; height: 52px; margin-bottom: 24px; }
.skel-line--jd-btn-half{ height: 36px; margin-top: -12px; }

/* Error state */
.job-detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 120px 44px;
  text-align: center;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  color: var(--cj-muted);
  font-size: 16px;
  background: var(--cj-section-bg);
}

.job-detail-error__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cj-dark);
  text-decoration: underline;
}


/* ════════════════════════════════════════════════════════
   9. APPLY MODAL
════════════════════════════════════════════════════════ */

.apply-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* IMPORTANT: CSS display: flex above overrides the browser UA stylesheet's
   [hidden] { display: none }. This rule restores correct hidden behaviour. */
.apply-modal-overlay[hidden] { display: none !important; }

.apply-modal {
  background: #fff;
  width: 100%;
  max-width: 680px;   /* overridden to 880px at ≥720px in responsive block */
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.22);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Sticky dark header */
.apply-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 22px;
  background: var(--cj-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}

.apply-modal__label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 5px;
}

.apply-modal__title {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.2;
}

.apply-modal__req {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.apply-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.09);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.18s;
}
.apply-modal__close svg             { display: block; }
.apply-modal__close svg path        { stroke: #fff; fill: none; }
.apply-modal__close:hover           { background: rgba(255, 255, 255, 0.18); }
.apply-modal__close:hover svg path  { stroke: #fff; }


/* ── Form ─────────────────────────────────────────────── */
.apply-form {
  padding: 0;   /* cols + footer handle their own padding */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Brief intro strip directly below header */
.apply-form__intro-strip {
  padding: 14px 28px 16px;
  background: #f8f9fb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.apply-form__intro-text {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
  margin: 0;
}

.apply-form__intro-text strong {
  color: var(--cj-dark, #141414);
  font-weight: 600;
}

/* Section separator with label */
.apply-form__section {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9aa3af;
  margin: 26px 0 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}

.apply-form__section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
}

/* First section: no top border / extra margin */
.apply-form__section:first-child,
.apply-form__section--first {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

/* Tooltip "i" icon inside label */
.apply-form__tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
}

.apply-form__tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: help;
  color: #b0b8c4;
  line-height: 1;
  transition: color 0.15s;
}
.apply-form__tip-btn:hover,
.apply-form__tip-btn:focus { color: #5a6072; outline: none; }

.apply-form__tip-text {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 8px 12px;
  background: #141414;
  color: #f0f2f5;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 200;
  white-space: normal;
}
/* Arrow pointing down toward the input */
.apply-form__tip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #141414;
}
.apply-form__tip-wrap:hover .apply-form__tip-text,
.apply-form__tip-wrap:focus-within .apply-form__tip-text {
  opacity: 1;
}

/* Honeypot — visually hidden, not interactive */
.apply-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.apply-form__row { margin-bottom: 18px; }
.apply-form__row--grow { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }

.apply-form__row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ── Two-column body: Contact Details | Your Application ─────── */
.apply-form__cols {
  display: flex;
  flex-direction: column; /* stacked on mobile */
  padding-top: 24px;
  padding-bottom: 8px;
}

.apply-form__col {
  padding: 0 28px;
  min-width: 0;
}

/* ── Grow: textarea fills remaining column height ─ */
.apply-form__field--grow {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.apply-form__textarea--grow { flex: 1; resize: none; min-height: 120px; }

.apply-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apply-form__label {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a6072;
}

.apply-form__required { color: var(--cj-gold, #f6b43f); }

.apply-form__optional {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #b0b8c4;
  margin-left: 4px;
}

.apply-form__input {
  height: 46px;
  padding: 0 14px;
  background: #f4f6f9;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  color: var(--cj-dark);
  outline: none;
  transition: border-bottom-color 0.15s, background 0.15s;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.apply-form__input::placeholder { color: #aab0be; }
.apply-form__input:focus {
  border-bottom-color: var(--cj-dark);
  background: #fff;
}
.apply-form__input.is-error {
  border-bottom-color: #c0392b;
  background: #fff9f9;
}

.apply-form__textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 96px;
}

/* File upload */
.apply-form__file-wrap { position: relative; }

.apply-form__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.apply-form__file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  background: #f4f6f9;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  color: #7b88a1;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  width: 100%;
}
.apply-form__file-label:hover,
.apply-form__file-input:focus + .apply-form__file-label {
  border-color: var(--cj-dark);
  background: #fff;
  color: var(--cj-dark);
}
.apply-form__file-input.is-error + .apply-form__file-label { border-color: #c0392b; }

/* Form footer: spans full width below both columns */
.apply-form__footer {
  margin-top: 8px;
  padding: 18px 28px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Privacy note */
.apply-form__privacy {
  display: flex;
  align-items: flex-start;
  flex: auto;
  gap: 7px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 11px;
  line-height: 1.5;
  color: #b0b8c4;
  margin: 0;
}
.apply-form__privacy svg { flex-shrink: 0; margin-top: 1px; color: #b0b8c4; }

/* Status + submit stacked */
.apply-form__submit-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.apply-form__status {
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 16px;
  margin: 0;
  width: 100%;
  border-radius: 4px;
}
.apply-form__status--success {
  color: #1a6e2e;
  background: #edf7f1;
  border: 1px solid rgba(26, 110, 46, 0.18);
}
.apply-form__status--error {
  color: #b42a1a;
  background: #fdf2f0;
  border: 1px solid rgba(180, 42, 26, 0.18);
}
.apply-form__status a { color: inherit; text-decoration: underline; }

.apply-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  background: var(--cj-dark);
  color: #fff;
  border: none;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.apply-form__submit:hover    { background: #2c2c2c; }
.apply-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Reset / Clear button */
.apply-form__reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 50px;
  padding: 0 20px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.13);
  color: #8a94a4;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.18s;
  flex-shrink: 0;
  white-space: nowrap;
}
.apply-form__reset-btn:hover {
  background: #f4f6f9;
  color: #141414;
  border-color: rgba(0, 0, 0, 0.25);
}


/* ════════════════════════════════════════════════════════
   10. PAGINATION
════════════════════════════════════════════════════════ */

.jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--cj-border);
}

.jobs-pagination__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cj-card-bg);
  border: 1px solid var(--cj-border-md);
  color: var(--cj-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.jobs-pagination__arrow:hover:not([disabled]) {
  background: var(--cj-section-bg);
  color: var(--cj-dark);
}
.jobs-pagination__arrow[disabled] { opacity: 0.35; cursor: not-allowed; }

.jobs-pagination__pages {
  display: flex;
  align-items: center;
  gap: 3px;
}

.jobs-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  background: none;
  border: 1px solid transparent;
  color: var(--cj-muted);
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.jobs-pagination__page:hover {
  background: var(--cj-card-bg);
  color: var(--cj-dark);
  border-color: var(--cj-border-md);
}
.jobs-pagination__page.is-active {
  background: var(--cj-navy, #233963);
  color: #fff;
  border-color: transparent;
  cursor: default;
}

.jobs-pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 40px;
  color: var(--cj-muted);
  font-size: 14px;
  pointer-events: none;
  user-select: none;
}


/* ════════════════════════════════════════════════════════
   11. RESPONSIVE
════════════════════════════════════════════════════════ */

@media (max-width: 1160px) {
  .job-detail__inner {
    grid-template-columns: 1fr 320px;
    gap: 28px;
  }
}

@media (max-width: 960px) {
  /* .jobs-hero           { padding: 36px 32px 60px; } */
  .jobs-listing        { padding: 36px 32px 64px; }
  .jobs-filter__row    { flex-wrap: wrap; }
  .jobs-filter__select-wrap { min-width: calc(50% - 7px); flex: none; }
  .jobs-filter__clear  { width: 100%; justify-content: center; }
  .jobs-grid           { grid-template-columns: minmax(200px, 1fr); }
  /* .job-detail         { padding: 36px 32px 72px; } */
  .job-detail__inner  { grid-template-columns: 1fr; }
  .job-detail__sidebar {
    position: static;
    /* Sidebar (Apply card / Save+Share / summary) now follows main content
       instead of preceding it — DOM order already puts .job-detail__main
       first, so this rule is intentionally absent (removed 2026-07-13; it
       was pushing Apply/Save/Share and duplicate meta above the job title
       and description on screens ≤960px). */
  }
  .job-detail__main   { padding: 32px 32px; }
}

/* ── Desktop 2-col modal layout ─────────────────────────────── */
@media (min-width: 720px) {
  .apply-modal            { max-width: 880px; }

  .apply-form__cols {
    flex-direction: row;
    align-items: stretch;
  }

  .apply-form__col {
    flex: 1;
    min-width: 0;
    padding: 0 28px;
    display: flex;
    flex-direction: column;
  }

  .apply-form__col--right {
    border-left: 1px solid rgba(0, 0, 0, 0.07);
  }

  /* Make the application column grow its textarea to fill height */
  .apply-form__col--right .apply-form__row--grow {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 719px) {
  /* Columns stack — first column gets top padding, right col gets divider */
  .apply-form__col        { padding: 0 18px; }
  .apply-form__col--right { border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: 4px; padding-top: 4px; }
  .apply-form__cols       { padding-top: 0; }
}

@media (max-width: 640px) {
  /* .jobs-hero              { padding: 28px 20px 44px; } */
  .jobs-listing           { padding: 28px 20px 56px; }
  .jobs-filter            { padding: 14px 12px; }
  .jobs-filter__select-wrap { min-width: 100%; flex: none; }
  /* .job-detail             { padding: 24px 20px 60px; } */
  .job-detail__main       { padding: 24px 20px; }
  .job-detail__apply-card { padding: 20px; }
  .job-detail__title-row  { flex-direction: column; gap: 10px; }

  .apply-form__intro-strip { padding: 12px 18px; }
  .apply-modal__header     { padding: 18px 20px 16px; }
  .apply-form__footer      { padding: 16px 18px 24px; }
  .apply-form__submit-wrap { flex-direction: column; align-items: stretch; }
  .apply-form__submit      { width: 100%; justify-content: center; }
  .apply-form__reset-btn   { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════════
   12. DARK MODE
════════════════════════════════════════════════════════ */

[data-theme="dark"] .intone-jobs-page {
  --cj-dark:        #f0f2f5;
  --cj-muted:       #8a94a4;
  --cj-body:        #8a94a4;
  --cj-card-bg:     #1c1f22;
  --cj-section-bg:  #14161a;
  --cj-hero-bg:     #111315;
  --cj-border:      rgba(255, 255, 255, 0.07);
  --cj-border-md:   rgba(255, 255, 255, 0.12);
  --cj-badge-bg:    #282c31;
  --cj-badge-text:  #c8ced8;
  --cj-gold-amber:  #f6b43f;
  --cj-gold-light:  rgba(246, 180, 63, 0.35);
}

/* Filter bar dark mode */
[data-theme="dark"] .jobs-filter__search {
  color: #f0f2f5;
}
[data-theme="dark"] .jobs-filter__search::placeholder { color: #4c555f; }
[data-theme="dark"] .jobs-filter__search:focus {
  background: #1c1f22;
}

[data-theme="dark"] .jobs-filter__select {
  color: #f0f2f5;
}

[data-theme="dark"] .jobs-filter__select option {
  background: #1c1f22;
  color: #f0f2f5;
}

/* Muted text tracked by CSS variable — no extra rules needed */

[data-theme="dark"] .jobs-hero__title           { color: #f0f2f5; }
[data-theme="dark"] .jobs-listing__heading      { color: #f0f2f5; }

[data-theme="dark"] .job-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.36);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .job-card__title            { color: #f0f2f5; }
[data-theme="dark"] .job-card__apply-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #f0f2f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .job-card__apply-btn:hover  { background: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .job-card__view-link        { color: #8a94a4; }
[data-theme="dark"] .job-card__view-link:hover  { color: #f0f2f5; }

[data-theme="dark"] .skel-line {
  background: linear-gradient(90deg, #22262b 25%, #2a2f36 50%, #22262b 75%);
  background-size: 1200px 100%;
}

[data-theme="dark"] .job-detail__title          { color: #f0f2f5; }
[data-theme="dark"] .jd-section-heading         { color: #f0f2f5; }
[data-theme="dark"] .jd-list li::before         { color: #f0f2f5; }
[data-theme="dark"] .jd-remarks-html strong,
[data-theme="dark"] .jd-remarks-html h2,
[data-theme="dark"] .jd-remarks-html h3,
[data-theme="dark"] .jd-remarks-html h4         { color: #f0f2f5; }

[data-theme="dark"] .job-detail__apply-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #f0f2f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .job-detail__apply-btn:hover { background: rgba(255, 255, 255, 0.13); }

[data-theme="dark"] .job-detail__all-link       { color: #8a94a4; }
[data-theme="dark"] .job-detail__all-link:hover { color: #f0f2f5; }

[data-theme="dark"] .job-detail__action-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #f0f2f5;
}
[data-theme="dark"] .job-detail__action-btn:hover,
[data-theme="dark"] .job-detail__action-btn.js-save[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.13);
}
[data-theme="dark"] .job-detail__share-menu {
  background: #1c1f22;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .job-detail__share-item { color: #f0f2f5; }
[data-theme="dark"] .job-detail__share-item:hover { background: rgba(255, 255, 255, 0.06); }

[data-theme="dark"] .apply-modal                 { background: #1c1f22; }
[data-theme="dark"] .apply-form__intro-strip     { background: #22262b; border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .apply-form__intro-text      { color: #8a94a4; }
[data-theme="dark"] .apply-form__intro-text strong { color: #f0f2f5; }
[data-theme="dark"] .apply-form__section         { color: #5a6472; border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .apply-form__section::after  { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .apply-form__input {
  background: #22262b;
  border-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  color: #f0f2f5;
}
[data-theme="dark"] .apply-form__input::placeholder { color: #4c555f; }
[data-theme="dark"] .apply-form__input:focus {
  border-bottom-color: #f0f2f5;
  background: #272b30;
}
[data-theme="dark"] .apply-form__file-label {
  background: #22262b;
  border-color: rgba(255, 255, 255, 0.12);
  color: #8a94a4;
}
[data-theme="dark"] .apply-form__file-label:hover,
[data-theme="dark"] .apply-form__file-input:focus + .apply-form__file-label {
  background: #272b30;
  color: #f0f2f5;
}
[data-theme="dark"] .apply-form__label     { color: #8a94a4; }
[data-theme="dark"] .apply-form__footer   { border-top-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .apply-form__optional { color: #4c555f; }
[data-theme="dark"] .apply-form__privacy  { color: #4c555f; }
[data-theme="dark"] .apply-form__privacy svg { color: #4c555f; }

/* Fix: modal header bg uses --cj-dark which flips to #f0f2f5 in dark mode
   → white text on near-white bg: invisible. Force #141414. */
[data-theme="dark"] .apply-modal__header { background: #141414; }

/* Fix: submit button same issue */
[data-theme="dark"] .apply-form__submit       { background: #141414; }
[data-theme="dark"] .apply-form__submit:hover { background: #2c2c2c; }

/* 2-col divider in dark mode */
[data-theme="dark"] .apply-form__col--right {
  border-left-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .apply-form__col--right { border-top-color: rgba(255, 255, 255, 0.06); }

/* Tooltip dark mode */
[data-theme="dark"] .apply-form__tip-btn { color: #4c555f; }
[data-theme="dark"] .apply-form__tip-btn:hover,
[data-theme="dark"] .apply-form__tip-btn:focus { color: #8a94a4; }

/* Reset button dark mode */
[data-theme="dark"] .apply-form__reset-btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: #5a6472;
}
[data-theme="dark"] .apply-form__reset-btn:hover {
  background: #22262b;
  color: #f0f2f5;
  border-color: rgba(255, 255, 255, 0.22);
}

/* Pagination dark mode */
[data-theme="dark"] .jobs-pagination__page.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #f0f2f5;
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .apply-form__status--success {
  color: #6fc98a;
  background: rgba(111, 201, 138, 0.1);
}
[data-theme="dark"] .apply-form__status--error {
  color: #e07070;
  background: rgba(224, 112, 112, 0.1);
}