/* ==========================================================================================
   Al Hayat Jobs: the "crystal" look for the job search (/jobs/) and the job pages (/jobs/<slug>-<id>/, /jobs/w/<id>/).
   Careers v2. Loaded AFTER tokens.css, ui.css, division.css, cinema.css, jobs.css, match.css, page-careers.css and screens.css, so it
   repaints the older sheets without editing them (the same approach as css/portal-crystal.css).

   Owner design language: white page, pale sky-blue hero, warm light beige quiet surfaces, hairline borders and soft brown-tinted
   shadows, blue ONLY on primary buttons (plus the keyboard focus ring and plain text links), Source Sans 3 for body text and Source
   Serif 4 for headings (Noto Kufi Arabic for Arabic), no dark navy panels, no red (terracotta for "check carefully").
   Palette source: public/assets/site/kit/tokens.css. Rules kept: no text under 13px, AA contrast, logical properties (right-to-left),
   no inline styles, motion only under prefers-reduced-motion: no-preference.

   Changed on purpose (2026-10-11): the page is theme-capable. Every colour below the token blocks is a var(--...); the light values are in section 1,
   the dark values (the palette of public/assets/site/kit/tokens.css dark theme) in sections 1b and 1c. The page carries body.dk so the Theme button
   shows in the header (public/css/site/chrome.css). Contrast of the pairs used (text on its background): light >= 4.5:1 as before; dark: ink #EEF2FA,
   ink-2 #D2D9E8, muted #AEB8CC and link #9DB8FF on #1A2336 / #0F1522 are all above 7:1; white on the primary #3C66DE is 5.06:1; the warning, ok and danger inks
   on their dark fills are above 7:1.
   ========================================================================================== */

/* ---------- 1. tokens: the kit palette under the old names the older sheets read (light) ---------- */
body.jobs-page {
  color-scheme: light;
  --canvas: #FFFFFF; --paper: #FBF7EF; --surface: #FFFFFF; --surface-2: #FBF7EF; --white: #FFFFFF;
  --border: #EBE2D1; --line: #EBE2D1; --border-strong: #D6C9B2; --line-strong: #D6C9B2; --line-hover: #A79A86;
  --heading: #2E2822; --navy: #2E2822; --navy-deep: #2E2822; --body: #2E2822; --ink: #2E2822; --ink-2: #4A4238; --ink-3: #6E6253; --muted: #6E6253;
  --placeholder: #756858;
  --blue: #1F4FCC; --blue-hover: #1E4BC2; --teal: #1F4FCC; --teal-ink: #1F4FCC; --teal-tint: #EAF3FD;
  --sky: #EAF3FD; --sky-2: #D8E8F9; --sky-deep: #C9DDF3; --sky-bar: #F0F7FE; --sky-line: #D8E6F5; --sky-edge: #8FB0DD;
  --sky-gradient: linear-gradient(135deg, #E4F0FC 0%, #F2F8FE 52%, #FBF5EA 100%);
  --feat-start: #F3F8FE; --chip-ink: #2E4A78;
  --beige: #F7F0E4; --beige-2: #FBF7EF;
  --primary: #2457D6; --primary-hover: #1E4BC2; --primary-ink: #1F4FCC; --on-primary: #FFFFFF; --pressed: #1F4FCC; --focus: #2457D6;
  --ok: #3E6B4B; --ok-ink: #356645; --ok-bg: #E2ECE1; --ok-line: #BFD3C2; --ok-soft: #F1F6F0;
  --warn-ink: #7F5410; --warn-bg: #F8E8C6; --warn-line: #E8CF98;
  --danger: #A8452E; --danger-ink: #9E4030; --danger-bg: #F7E2DA; --danger-line: #E7BFB1; --danger-soft: #FBF0EB;
  --slate-ink: #3F5578;
  --gold: #8A5E10; --brand-gold: #8A5E10;
  --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-text: #2E2822; --c-heading: #2E2822; --c-muted: #6E6253; --c-link: #1F4FCC; --c-focus: #2457D6;
  --c-line: #EBE2D1; --c-line-strong: #D6C9B2;
  --c-action-bg: #2457D6; --c-action-bg-hover: #1E4BC2; --c-action-ink: #FFFFFF; --c-secondary-line: #D6C9B2;
  /* the "mood" variables of jobs.css */
  --m-anchor: #EAF3FD; --m-shade: 234, 243, 253; --m-accent: #2457D6; --m-ink: #1F4FCC; --m-panel: #F7F0E4; --m-btn: #2457D6; --m-btn-ink: #FFFFFF; --m-btn-hover: #1E4BC2;
  --shadow-1: 0 1px 2px rgba(74, 56, 32, .06);
  --shadow-2: 0 2px 6px rgba(74, 56, 32, .08), 0 12px 28px -16px rgba(74, 56, 32, .22);
  --shadow-3: 0 10px 30px -10px rgba(74, 56, 32, .28), 0 30px 60px -30px rgba(74, 56, 32, .3);
}

/* ---------- 1b. dark (the Theme button: Dark) ---------- */
:root[data-theme="dark"] body.jobs-page {
  color-scheme: dark;
  --canvas: #0F1522; --paper: #151D2D; --surface: #1A2336; --surface-2: #151D2D; --white: #1A2336;
  --border: #2C3853; --line: #2C3853; --border-strong: #4A5A7D; --line-strong: #4A5A7D; --line-hover: #7D8AA6;
  --heading: #EEF2FA; --navy: #EEF2FA; --navy-deep: #0B1220; --body: #EEF2FA; --ink: #EEF2FA; --ink-2: #D2D9E8; --ink-3: #AEB8CC; --muted: #AEB8CC;
  --placeholder: #9AA6BF;
  --blue: #9DB8FF; --blue-hover: #B7CBFF; --teal: #9DB8FF; --teal-ink: #9DB8FF; --teal-tint: #18243D;
  --sky: #18243D; --sky-2: #223357; --sky-deep: #2A3F6B; --sky-bar: #151D2D; --sky-line: #2A3550; --sky-edge: #3A4F7E;
  --sky-gradient: linear-gradient(135deg, #18243D 0%, #151D2D 52%, #1A2336 100%);
  --feat-start: #1C2A4A; --chip-ink: #C5D3F5;
  --beige: #202B41; --beige-2: #151D2D;
  --primary: #3C66DE; --primary-hover: #2B4FB5; --primary-ink: #9DB8FF; --on-primary: #FFFFFF; --pressed: #3C66DE; --focus: #9DB8FF;
  --ok: #7FCB98; --ok-ink: #7FCB98; --ok-bg: #16291F; --ok-line: #2E5A41; --ok-soft: #12211A;
  --warn-ink: #F0C46E; --warn-bg: #2E2512; --warn-line: #5A4A22;
  --danger: #F0A090; --danger-ink: #F0A090; --danger-bg: #34201B; --danger-line: #6A3A30; --danger-soft: #2B1A16;
  --slate-ink: #AEB8CC;
  --gold: #E8BE68; --brand-gold: #E8BE68;
  --c-bg: #0F1522; --c-surface: #1A2336; --c-text: #EEF2FA; --c-heading: #EEF2FA; --c-muted: #AEB8CC; --c-link: #9DB8FF; --c-focus: #9DB8FF;
  --c-line: #2C3853; --c-line-strong: #4A5A7D;
  --c-action-bg: #3C66DE; --c-action-bg-hover: #2B4FB5; --c-action-ink: #FFFFFF; --c-secondary-line: #4A5A7D;
  --m-anchor: #18243D; --m-shade: 24, 36, 61; --m-accent: #3C66DE; --m-ink: #9DB8FF; --m-panel: #202B41; --m-btn: #3C66DE; --m-btn-ink: #FFFFFF; --m-btn-hover: #2B4FB5;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .6);
  --shadow-3: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 30px 60px -30px rgba(0, 0, 0, .7);
}

/* ---------- 1c. dark (the Theme button: System, and the device is dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) body.jobs-page {
    color-scheme: dark;
    --canvas: #0F1522; --paper: #151D2D; --surface: #1A2336; --surface-2: #151D2D; --white: #1A2336;
    --border: #2C3853; --line: #2C3853; --border-strong: #4A5A7D; --line-strong: #4A5A7D; --line-hover: #7D8AA6;
    --heading: #EEF2FA; --navy: #EEF2FA; --navy-deep: #0B1220; --body: #EEF2FA; --ink: #EEF2FA; --ink-2: #D2D9E8; --ink-3: #AEB8CC; --muted: #AEB8CC;
    --placeholder: #9AA6BF;
    --blue: #9DB8FF; --blue-hover: #B7CBFF; --teal: #9DB8FF; --teal-ink: #9DB8FF; --teal-tint: #18243D;
    --sky: #18243D; --sky-2: #223357; --sky-deep: #2A3F6B; --sky-bar: #151D2D; --sky-line: #2A3550; --sky-edge: #3A4F7E;
    --sky-gradient: linear-gradient(135deg, #18243D 0%, #151D2D 52%, #1A2336 100%);
    --feat-start: #1C2A4A; --chip-ink: #C5D3F5;
    --beige: #202B41; --beige-2: #151D2D;
    --primary: #3C66DE; --primary-hover: #2B4FB5; --primary-ink: #9DB8FF; --on-primary: #FFFFFF; --pressed: #3C66DE; --focus: #9DB8FF;
    --ok: #7FCB98; --ok-ink: #7FCB98; --ok-bg: #16291F; --ok-line: #2E5A41; --ok-soft: #12211A;
    --warn-ink: #F0C46E; --warn-bg: #2E2512; --warn-line: #5A4A22;
    --danger: #F0A090; --danger-ink: #F0A090; --danger-bg: #34201B; --danger-line: #6A3A30; --danger-soft: #2B1A16;
    --slate-ink: #AEB8CC;
    --gold: #E8BE68; --brand-gold: #E8BE68;
    --c-bg: #0F1522; --c-surface: #1A2336; --c-text: #EEF2FA; --c-heading: #EEF2FA; --c-muted: #AEB8CC; --c-link: #9DB8FF; --c-focus: #9DB8FF;
    --c-line: #2C3853; --c-line-strong: #4A5A7D;
    --c-action-bg: #3C66DE; --c-action-bg-hover: #2B4FB5; --c-action-ink: #FFFFFF; --c-secondary-line: #4A5A7D;
    --m-anchor: #18243D; --m-shade: 24, 36, 61; --m-accent: #3C66DE; --m-ink: #9DB8FF; --m-panel: #202B41; --m-btn: #3C66DE; --m-btn-ink: #FFFFFF; --m-btn-hover: #2B4FB5;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .6);
    --shadow-3: 0 10px 30px -10px rgba(0, 0, 0, .6), 0 30px 60px -30px rgba(0, 0, 0, .7);
  }
}

/* ---------- 1d. the kit names careers-v2.css reads (public/assets/site/kit/tokens.css is not loaded here), mapped to the tokens above ---------- */
body.jobs-page {
  --k-white: var(--surface); --k-ink: var(--ink); --k-ink-2: var(--ink-2); --k-muted: var(--muted);
  --k-border: var(--line); --k-border-strong: var(--line-strong); --k-faint: var(--line-hover); --k-line-sky: var(--sky-line);
  --k-card-2: var(--paper); --k-sidebar: var(--beige); --k-sky: var(--sky); --k-sky-2: var(--sky-2);
  --k-primary: var(--primary); --k-primary-ink: var(--blue);
  --k-ok: var(--ok); --k-ok-ink: var(--ok-ink); --k-ok-bg: var(--ok-bg);
  --k-warn-ink: var(--warn-ink); --k-warn-bg: var(--warn-bg);
  --k-danger: var(--danger); --k-danger-ink: var(--danger-ink); --k-danger-bg: var(--danger-bg);
  background: var(--canvas);
  color: var(--ink);
  font-family: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}
body.jobs-page:lang(ar) { font-family: "Noto Kufi Arabic", "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
body.jobs-page:lang(bn) { font-family: "Noto Sans Bengali", "Source Sans 3", "Segoe UI", system-ui, sans-serif; }
.jobs-page h1, .jobs-page h2, .jobs-page h3 { font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif; color: var(--ink); font-weight: 600; }
.jobs-page:lang(ar) h1, .jobs-page:lang(ar) h2, .jobs-page:lang(ar) h3 { font-family: "Noto Kufi Arabic", "Source Serif 4", serif; font-weight: 700; }
.jobs-page :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.jobs-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* buttons: primary = the one blue thing; outline = white with a hairline */
.jobs-page .btn { border-radius: 999px; font-weight: 600; font-family: inherit; text-decoration: none; }
.jobs-page .btn-primary, .jobs-page .btn-gold { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.jobs-page .btn-primary:hover, .jobs-page .btn-gold:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.jobs-page .btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.jobs-page .btn-outline:hover { background: var(--paper); border-color: var(--line-hover); }
.jobs-page .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.jobs-page .btn-ghost:hover { background: var(--paper); }
.jobs-page .btn-sm { padding: 8px 16px; font-size: 14.5px; }
.jobs-page .btn[disabled] { opacity: .6; cursor: default; }
.jobs-page .link, .jobs-page a.link { color: var(--blue); }
.jobs-page .eyebrow { color: var(--muted); letter-spacing: .12em; font-size: 13px; }

/* ---------- 2. the search header: a pale sky hero ---------- */
.jobs-hero { background: var(--sky-gradient); color: var(--ink); border-block-end: 1px solid var(--sky-line); overflow: visible; isolation: auto; }
.jobs-hero::after { content: none; }
.jobs-hero-inner { padding-block: 40px 22px; }
.jobs-hero .eyebrow { color: var(--muted); display: block; }
.jobs-hero h1 { color: var(--ink); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; margin: 6px 0 18px; max-width: 900px; }

.jobs-search { background: var(--surface); border: 1px solid var(--sky-line); border-radius: 20px; padding: 8px; box-shadow: var(--shadow-2); color: var(--ink); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.jobs-search label { color: var(--muted); font-size: 13px; letter-spacing: .06em; padding: 8px 14px; border-radius: 14px; }
.jobs-search label:focus-within { background: var(--sky); }
.jobs-search input, .jobs-search select { color: var(--ink); font-family: inherit; }
.jobs-search input::placeholder { color: var(--placeholder); opacity: 1; }
.jobs-search .btn { border-radius: 14px; }
.jobs-filter-box { border-block-start: 1px solid var(--line); }
.jobs-filter-box > summary { color: var(--blue); font-weight: 600; }
.jobs-filters .jobs-check { color: var(--ink); }
.jobs-check input { accent-color: var(--primary); }
.badge-filters { margin-block-start: 10px; }
.jobs-search .badge-toggle, .badge-toggle { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font-size: 14px; }
.jobs-search .badge-toggle:hover, .badge-toggle:hover { background: var(--paper); border-color: var(--line-hover); }
.jobs-search .badge-toggle[aria-pressed="true"], .badge-toggle[aria-pressed="true"] { background: var(--sky-2); border-color: var(--sky-edge); color: var(--ink); font-weight: 600; }
.badge-toggle:focus-visible { outline: 3px solid var(--focus); }
/* every control on the board is at least 44px tall: filters, selects and the pills that turn a filter on */
.jobs-search input:not([type="checkbox"]):not([type="radio"]), .jobs-search select, .badge-toggle, .jobs-filter-box > summary, .jobs-quick button { min-block-size: 44px; }

.jobs-quick { color: var(--ink-2); font-size: 14px; margin-block-start: 12px; }
.jobs-quick > span { color: var(--muted); font-weight: 600; }
.jobs-quick button { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-family: inherit; font-weight: 500; }
.jobs-quick button:hover { background: var(--paper); border-color: var(--line-hover); }
.jobs-quick button:focus-visible { outline: 3px solid var(--focus); }
.jobs-trades { margin-block-start: 14px; }

/* ---------- 3. results ---------- */
.jobs-page .jobs-results { padding-block: 24px 40px; background: var(--canvas); }
.jobs-layout { grid-template-columns: minmax(0, 1fr) 344px; gap: 32px; }
.jobs-page .jobs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-block-end: 14px; }
.jobs-page .jobs-count { color: var(--ink); font-weight: 600; font-size: 17px; }
.jobs-geo { color: var(--ink-2); }
.jobs-geo svg { stroke: var(--muted); }
.jobs-geo-change { color: var(--blue); }
.jobs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jobs-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.jobs-sort input { accent-color: var(--primary); }
.jobs-my { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 14.5px/1.2 inherit; font-family: inherit; cursor: pointer; }
.jobs-my[hidden] { display: none; }
.jobs-my:hover { background: var(--paper); border-color: var(--line-hover); }
.jobs-my svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.jobs-my .mj-dot:empty { display: none; }
.jobs-my .mj-dot { padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; font-weight: 600; }
.jobs-hidden { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--beige); color: var(--ink-2); font-size: 14.5px; }
.jobs-hidden[hidden] { display: none; }

.job-list { gap: 14px; }
.job-item { border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: border-color .2s, box-shadow .2s; }
.job-item:hover, .job-item:focus-within { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.job-item .job-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; height: auto; padding: 20px 20px 10px; border: 0; border-radius: 18px 18px 0 0; background: transparent; color: inherit; box-shadow: none; transform: none; }
.job-item .job-link:hover, .job-item .job-link:focus-visible { border: 0; box-shadow: none; transform: none; }
.job-item .job-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.job-item.is-featured { border-color: var(--sky-edge); background: linear-gradient(180deg, var(--feat-start), var(--surface) 70%); }
.job-item.is-featured .job-link { background: transparent; border: 0; }
.job-item h3 { font-size: 20px; line-height: 1.25; font-weight: 600; margin: 2px 0 4px; color: var(--ink); }
.job-item .job-meta { color: var(--ink-2); font-size: 15px; }
.job-item .job-excerpt { color: var(--ink-2); font-size: 15px; }
.job-logo { background: var(--beige); border: 1px solid var(--line); border-radius: 14px; width: 56px; height: 56px; }
.job-logo-initial, .job-logo-world { background: var(--beige); color: var(--ink-2); border: 1px solid var(--line); font-family: "Source Serif 4", Georgia, serif; font-size: 24px; font-weight: 600; }
.job-chips { gap: 6px; margin-block-start: 10px; }
.job-sponsor-note { display: block; margin-block-start: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.job-chip { background: var(--beige); color: var(--ink-2); border: 1px solid transparent; font-size: 13px; font-weight: 600; padding: 3px 10px; }
.job-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.job-chip-own, .job-chip-feat { background: var(--sky-2); color: var(--chip-ink); }
.job-chip-src { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.job-chip-visa { background: var(--warn-bg); color: var(--warn-ink); }
.job-chip-badge { background: var(--ok-bg); color: var(--ok-ink); }
.job-src-direct { background: var(--sky-2); color: var(--chip-ink); }
.job-src-partner { background: var(--beige); color: var(--ink-2); border-color: var(--line); }

/* the scam check chip and its first reason */
.job-scam { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block-start: 8px; }
.job-scam .scam-chip, .job-scam .vet-chip { box-sizing: border-box; min-block-size: 28px; padding-block: 0; align-items: center; line-height: 1.3; }
.job-fit { display: block; margin-block-start: 8px; padding: 6px 10px; border-radius: 10px; background: var(--sky); color: var(--chip-ink); font-size: 14px; }

/* card foot: Save, Report, date, Adzuna credit (buttons live outside the link) */
.job-item.has-credit .job-link { padding-block-end: 10px; }
.job-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 20px 14px calc(20px + 56px + 16px); }
.job-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-inline-start: -10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; }
.job-act:hover { background: var(--beige); color: var(--ink); }
.job-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.job-act.is-saved svg, .mj-save.is-saved svg { fill: var(--ink); }
.job-foot .job-ago { margin: 0; margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.job-item .adzuna-label { position: static; color: var(--blue); font-size: 13px; }
.job-foot .adzuna-label { margin-inline-start: 0; }

.jobs-empty { background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 18px; color: var(--ink-2); }
.jobs-empty strong { color: var(--ink); }
.skeleton-card { background: linear-gradient(90deg, var(--beige), var(--paper), var(--beige)); background-size: 200% 100%; border-radius: 18px; }
.jobs-sources { color: var(--muted); max-width: 760px; }
.jobs-sources a { color: var(--blue); }

/* ---------- 4. the side column and the notes under the list ---------- */
.jobs-aside { gap: 16px; }
.jobs-aside .match-panel, .rc-card, .match-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-1); padding: 20px; color: var(--ink); }
.match-panel { grid-template-columns: 1fr; }
.match-panel h2, .rc-card h2 { font-size: 19px; margin: 0 0 6px; }
.match-panel-lead { color: var(--ink-2); }
.jobs-match-slot { display: grid; gap: 14px; margin-block-end: 14px; }
.jobs-match-slot:empty { display: none; }
.standout-card { background: var(--sky); border: 1px solid var(--sky-line); color: var(--ink); border-radius: 18px; }
.standout-card .eyebrow { color: var(--ink-2); }
.standout-card h3 { color: var(--ink); }
.standout-card p { color: var(--ink-2); }
.standout-card .link { color: var(--blue); }
.jobs-policy-note, .jobs-alerts { margin-block-start: 24px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.jobs-policy-note[hidden], .jobs-alerts[hidden], .rc-card[hidden] { display: none; }
.jobs-policy-note h2, .jobs-alerts h2 { font-size: 21px; margin: 0 0 8px; }
.jobs-policy-note p { margin: 0 0 10px; color: var(--ink-2); font-size: 15.5px; }
.jobs-policy-note .vp-note { color: var(--muted); font-size: 14.5px; }
.jobs-alerts { background: var(--sky); border-color: var(--sky-line); }

/* ---------- 6. job pages: sky hero, trust row, scam panel, actions ---------- */
.job-hero { background: var(--sky-gradient); color: var(--ink); border-block-end: 1px solid var(--sky-line); padding-block: 28px 30px; }
.job-hero .back { color: var(--blue); font-weight: 600; }
.job-hero .eyebrow { color: var(--muted); }
.job-hero h1 { color: var(--ink); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.12; }
.job-company { color: var(--ink-2); font-size: 18px; }
.job-featured { color: var(--chip-ink); }
.job-hero .job-logo { background: var(--surface); border: 1px solid var(--sky-line); }
.job-hero .job-logo-initial { background: var(--surface); color: var(--ink-2); }
.job-hero .adzuna-label { color: var(--blue); }
.job-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.job-trust .job-chip { font-size: 14px; padding: 5px 12px; }
.job-trust .scam-chip { font-size: 14px; padding: 5px 12px 5px 10px; }
.job-badges { margin-block-start: 12px; }
.job-badge { background: var(--surface); border: 1px solid var(--sky-line); color: var(--ink); font-size: 14px; }
.job-badge-visa { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.job-body { padding-block: 36px 24px; }
.job-text h2 { font-size: 24px; }
.job-text p, .job-text li { color: var(--ink); }
.job-as-posted { background: var(--paper); color: var(--ink-2); }
.job-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: 20px; }
.job-facts svg { background: var(--beige); stroke: var(--ink-2); }
.job-facts small { color: var(--muted); }
.job-facts b { color: var(--ink); }
.job-acts { display: grid; gap: 8px; }
.job-acts .btn { width: 100%; justify-content: center; }
.job-acts .mj-open[hidden], .job-acts [hidden] { display: none; }
.job-report-long { justify-content: center; margin-inline-start: 0; width: 100%; padding: 10px; color: var(--ink-2); font-weight: 600; }
.job-card .mj-save-long { display: inline-flex; align-items: center; gap: 8px; }
.mj-save-long svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mj-save-long.is-saved svg { fill: var(--ink); }
.mj-save-long[hidden] { display: none; }
.world-redirect { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.world-redirect-lead svg { stroke: var(--ink-2); }
.world-redirect-more { color: var(--ink-2); font-size: 14px; }
.world-save-status { color: var(--ok-ink); }
.world-credit a, .ga-account a, .ga-consent a { color: var(--blue); }

.scam-panel { margin-block: 28px 8px; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); }
.scam-panel-check { background: var(--danger-soft); border-color: var(--danger-line); }
.scam-panel-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.scam-head { display: flex; align-items: center; gap: 10px; }
.scam-head svg { width: 26px; height: 26px; flex: none; fill: none; stroke-width: 1.7; }
.scam-panel-check .scam-head svg { stroke: var(--danger-ink); }
.scam-panel-ok .scam-head svg { stroke: var(--ok-ink); }
.scam-panel h2 { font-size: 22px; margin: 0; }
.scam-panel p { font-size: 16px; margin: 8px 0; color: var(--ink); }
.scam-level { margin-block: 10px 4px; }
.scam-panel .scam-chip { font-size: 14.5px; padding: 5px 14px; }
.scam-list { margin: 8px 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.scam-list li { font-size: 16px; color: var(--ink); }
.scam-notes-t { font-weight: 700; margin-block-end: 0; }
.scam-tip { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.scam-limit { color: var(--muted); font-size: 14px; }

/* ---------- 7. the older sections further down /jobs/ (tools, screens, packs, FAQ, reviews, employer strip) ---------- */
.jobs-page .ways-section, .jobs-page .section, .jobs-page .screens, .jobs-page .details-section, .jobs-page .packs-section { background: var(--canvas); color: var(--ink); }
.jobs-page .tools-section, .jobs-page .screens, .jobs-page .jobs-section-alt { background: var(--paper); }
.jobs-page .ways-head h2, .jobs-page .section-head h2, .jobs-page .screens-head h2, .jobs-page .details-intro h2 { color: var(--ink); }
.jobs-page .way, .jobs-page .pack, .jobs-page .screen-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); box-shadow: var(--shadow-1); }
.jobs-page .way-tag, .jobs-page .pack-badge { background: var(--sky-2); color: var(--chip-ink); }
.jobs-page .pack.is-best { border-color: var(--sky-edge); box-shadow: 0 0 0 2px var(--sky-2); }
.jobs-page .pack-price { color: var(--ink); }
.jobs-page .acc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.jobs-page .acc summary h2 { color: var(--ink); }
.jobs-page .expect-part, .jobs-page .price-tag { background: var(--paper); border-color: var(--line); color: var(--ink); }
.jobs-page .policy-note { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.jobs-page .policy-note svg { stroke: var(--ink-2); }
.jobs-page .employer-strip { color: var(--ink); background: var(--sky); border: 1px solid var(--sky-line); border-radius: 22px; }
.jobs-page .employer-strip > img { display: none; }
.jobs-page .employer-strip::after { content: none; }
.jobs-page .employer-strip h2 { color: var(--ink); }
.jobs-page .employer-strip p { color: var(--ink-2); }
.jobs-page .employer-strip .eyebrow { color: var(--muted); }
.jobs-page .reviews-section { background: var(--canvas); }

/* ---------- 8. phones, right-to-left, motion ---------- */
@media (max-width: 1080px) {
  .jobs-layout { grid-template-columns: minmax(0, 1fr); }
  .job-foot { padding-inline-start: 20px; }
}
@media (max-width: 760px) {
  .jobs-hero-inner { padding-block: 24px 16px; }
  .jobs-search { grid-template-columns: 1fr; }
  .job-item .job-link { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 16px 8px; }
  .job-logo { width: 44px; height: 44px; }
  .job-foot { padding: 0 16px 12px; }
  .job-item h3 { font-size: 18.5px; }
  .al-fields { grid-template-columns: 1fr; }
  .mj-dialog, .rp-dialog { padding: 18px 16px; }
  .jobs-page .jobs-results { padding-block: 16px 24px; }
  .jobs-policy-note, .jobs-alerts { padding: 18px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .job-item { transition: border-color .2s ease, box-shadow .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .job-item, .job-item .job-link, .skeleton-card { transition: none; animation: none; }
}

/* the plain "Apply here" line above the button of an Al Hayat post */
.job-apply-choice { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.job-apply-choice b { color: var(--ink); }

/* Search first (final audit B): nothing is listed, and no count is shown, until there is a search or a quick search */
.jobs-prompt { display: none; margin: 0; padding: 26px 16px; text-align: center; color: var(--ink-2); font-size: 17px; background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 18px; }
.jobs-idle .jobs-prompt { display: block; }
.jobs-idle .jobs-status, .jobs-idle .jobs-sort, .jobs-idle .jobs-aside, .jobs-idle .jobs-sources,
.jobs-idle .jobs-policy-note, .jobs-idle .jobs-pager, .jobs-idle .jobs-vet-note, .jobs-idle .jobs-hidden { display: none; }
.jobs-idle .jobs-layout { grid-template-columns: minmax(0, 1fr); }
.jobs-vet-note { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.jobs-vet-note[hidden] { display: none; }
.jobs-quick button[aria-pressed="true"] { background: var(--pressed); border-color: var(--pressed); color: var(--on-primary); }
.jobs-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }
.jobs-active[hidden] { display: none; }
.jobs-active-chip, .jobs-clear { display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 4px 13px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer; }
.jobs-active-chip { background: var(--surface); border: 1px solid var(--blue); color: var(--blue); font-weight: 600; }
.jobs-active-chip span:last-child { font-size: 18px; line-height: 1; }
.jobs-clear { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: underline; }
.jobs-active-chip:focus-visible, .jobs-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }