/* ==========================================================================================
   Careers v2 components shared by /jobs/, the job pages and /careers/: the scam chip, the private resume check, the WhatsApp alerts card,
   the My jobs panel, the "Report a job" dialog and the "Did you apply?" card. Palette: the kit (public/assets/site/kit/tokens.css) written as plain
   values so the same rules work on the older pages (Oasis tokens) and on the v5 pages (kit tokens). Blue only on the primary button and text links;
   no red (terracotta for "check carefully"); no text under 13px; logical properties; motion only under prefers-reduced-motion: no-preference.
   ========================================================================================== */

/* the kit has .btn-secondary where the older sheets have .btn-outline: both are the outlined button */
.btn-outline { background: var(--k-white, #FFFFFF); color: var(--k-ink, #2E2822); border-color: var(--k-border-strong, #D6C9B2); }
.btn-outline:hover { background: var(--k-card-2, #FBF7EF); border-color: var(--k-faint, #A79A86); }

/* the scam check chip and its first reason */
.scam-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.scam-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.scam-ok { background: var(--k-ok-bg, #E2ECE1); color: var(--k-ok-ink, #356645); }
.scam-check { background: var(--k-danger-bg, #F7E2DA); color: var(--k-danger-ink, #9E4030); }
.scam-why { font-size: 13.5px; color: var(--k-ink-2, #4A4238); }
.scam-more { color: var(--k-muted, #6E6253); }

/* "Checked by Al Hayat": drawn ONLY for a job that passed the automatic check (public/js/job-safety-html.js). A quiet warm chip, not blue,
   and a one-line plain explanation under it (never "safe", never "verified"). */
.vet-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--k-card-2, #F4EEDF); color: var(--k-ink-2, #4A4238); border: 1px solid var(--k-border, #E3D8C0); font-weight: 600; }
.vet-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.vet-line { display: block; margin-block-start: 4px; font-size: 13px; line-height: 1.4; color: var(--k-muted, #6E6253); }
.vet-note { margin: 8px 0 0; }
.vet-note .vet-line { margin: 0; font-size: 14px; color: var(--k-ink-2, #4A4238); }

/* the sponsorship block of a job page: what the employer's own words say, and where the employer is on a sponsor register */
.sp-panel { margin-block: 18px; padding: 14px 16px; border: 1px solid var(--k-border, #E3D8C0); border-radius: 14px; background: var(--k-card-2, #FBF7EF); }
.sp-panel h2 { margin: 0 0 8px; font-size: 17px; }
.sp-panel p { margin: 0 0 8px; font-size: 15px; color: var(--k-ink, #2E2822); }
.sp-panel p:last-child { margin-block-end: 0; }
.sp-panel .sp-register { font-size: 14px; color: var(--k-ink-2, #4A4238); }

/* resume check card */
.rc-lead { margin: 0 0 10px; color: var(--k-ink-2, #4A4238); font-size: 15px; }
.rc-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 8px 10px; border-radius: 12px; background: var(--k-ok-bg, #E2ECE1); color: var(--k-ok-ink, #356645); font-size: 14px; font-weight: 600; }
.rc-privacy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; margin-block-start: 1px; }
.rc-form[hidden], .rc-out[hidden] { display: none; }
.rc-file { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.rc-drop { display: grid; justify-items: center; gap: 4px; padding: 18px 14px; border: 1.5px dashed var(--k-border-strong, #D6C9B2); border-radius: 16px; background: var(--k-card-2, #FBF7EF); text-align: center; cursor: pointer; color: var(--k-ink, #2E2822); }
.rc-drop:hover, .rc-drop.is-over { background: var(--k-sky, #EAF3FD); border-color: #8FB0DD; }
.rc-file:focus-visible + .rc-drop { outline: 3px solid var(--k-primary, #2457D6); outline-offset: 2px; }
.rc-drop svg { width: 26px; height: 26px; fill: none; stroke: var(--k-ink-2, #4A4238); stroke-width: 1.6; }
.rc-drop-t { font-weight: 600; font-size: 16px; }
.rc-drop-h { color: var(--k-muted, #6E6253); font-size: 13.5px; }
.rc-pastebox { margin-block-start: 10px; }
.rc-pastebox summary { cursor: pointer; color: var(--k-primary-ink, #1F4FCC); font-weight: 600; font-size: 14.5px; }
.rc-paste { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 10px 12px; border: 1px solid var(--k-border-strong, #D6C9B2); border-radius: 12px; font: 400 15px/1.45 inherit; font-family: inherit; color: var(--k-ink, #2E2822); background: var(--k-white, #FFFFFF); }
.rc-status { margin: 10px 0 0; font-size: 14.5px; color: var(--k-ink-2, #4A4238); }
.rc-status:empty { display: none; }
.rc-status.is-error { color: var(--k-danger-ink, #9E4030); font-weight: 600; }
.rc-score { display: flex; align-items: center; gap: 16px; margin-block: 4px 12px; }
.rc-ring { width: 84px; height: 84px; flex: none; }
.rc-ring-bg { stroke: var(--k-border, #EBE2D1); stroke-width: 3.6; }
.rc-ring-fg { stroke-width: 3.6; stroke: var(--k-ok, #3E6B4B); }
.rc-ring.rc-band-fixes .rc-ring-fg { stroke: #B8781A; }
.rc-ring.rc-band-work .rc-ring-fg { stroke: var(--k-danger, #A8452E); }
.rc-score-l { margin: 0; color: var(--k-muted, #6E6253); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.rc-score-n { margin: 0; color: var(--k-muted, #6E6253); font-size: 14px; }
.rc-score-n strong { font: 600 38px/1 "Source Serif 4", Georgia, serif; color: var(--k-ink, #2E2822); }
.rc-band { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
p.rc-band-ready { color: var(--k-ok-ink, #356645); } p.rc-band-fixes { color: var(--k-warn-ink, #7F5410); } p.rc-band-work { color: var(--k-danger-ink, #9E4030); }
.rc-h { font-size: 16px; margin: 8px 0; font-family: inherit; font-weight: 700; }
.rc-fixes { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: fix; display: grid; gap: 8px; }
.rc-fixes li { counter-increment: fix; position: relative; padding-inline-start: 34px; font-size: 15px; color: var(--k-ink, #2E2822); }
.rc-fixes li::before { content: counter(fix); position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--k-sidebar, #F7F0E4); color: var(--k-ink-2, #4A4238); font-size: 13px; font-weight: 700; }
.rc-nofix { color: var(--k-ok-ink, #356645); font-weight: 600; }
.rc-all { margin-block: 6px; }
.rc-all summary { cursor: pointer; color: var(--k-primary-ink, #1F4FCC); font-weight: 600; font-size: 14.5px; }
.rc-checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.rc-chk { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--k-card-2, #FBF7EF); font-size: 14.5px; }
.rc-chk-s { font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.rc-chk-ok .rc-chk-s { background: var(--k-ok-bg, #E2ECE1); color: var(--k-ok-ink, #356645); }
.rc-chk-part .rc-chk-s { background: var(--k-warn-bg, #F8E8C6); color: var(--k-warn-ink, #7F5410); }
.rc-chk-miss .rc-chk-s { background: var(--k-danger-bg, #F7E2DA); color: var(--k-danger-ink, #9E4030); }
.rc-words { margin: 6px 0; color: var(--k-muted, #6E6253); font-size: 13.5px; }
.rc-match { display: grid; gap: 8px; justify-items: start; margin-block: 10px; }
.rc-match-note { margin: 0; font-size: 14px; color: var(--k-ink-2, #4A4238); }
.rc-match-note:empty { display: none; }
.rc-note { margin: 10px 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--k-card-2, #FBF7EF); color: var(--k-ink-2, #4A4238); font-size: 13.5px; }
.rc-links { margin: 10px 0 0; font-size: 14px; color: var(--k-ink-2, #4A4238); }
.rc-links a, .rc-link { color: var(--k-primary-ink, #1F4FCC); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer; }

/* the card's heading is a button on phones (folded by default) and plain text on a wide screen */
.rc-card h2 { margin: 0 0 8px; }
.rc-card.is-folded h2 { margin: 0; }
.rc-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.rc-toggle:disabled { cursor: default; color: inherit; }
.rc-toggle:not(:disabled)::after { content: ""; width: 9px; height: 9px; margin-inline-end: 4px; border: solid var(--k-muted, #6E6253); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); flex: none; }
.rc-toggle[aria-expanded="true"]:not(:disabled)::after { transform: rotate(225deg) translateY(-2px); }
#rc-root[hidden] { display: none; }
.rc-pastebox summary, .rc-all summary, .jobs-filter-box > summary { font-family: inherit; font-size: 14.5px; font-weight: 600; justify-content: flex-start; gap: 8px; }
.rc-pastebox summary::after, .rc-all summary::after { font-size: 18px; line-height: 1; }

/* WhatsApp alerts card */
.al-lead { margin: 0 0 12px; color: var(--k-ink-2, #4A4238); font-size: 15.5px; }
.al-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-block-end: 12px; }
.al-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--k-ink-2, #4A4238); }
.al-field label { font-size: 14px; font-weight: 600; color: var(--k-ink-2, #4A4238); }
.al-fields .select, .jobs-alerts select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--k-border-strong, #D6C9B2); border-radius: 12px; background: var(--k-white, #FFFFFF); font: 400 16px/1.2 inherit; font-family: inherit; color: var(--k-ink, #2E2822); }
.al-langs { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.al-langs legend { font-size: 14px; font-weight: 600; color: var(--k-ink-2, #4A4238); padding: 0; margin-block-end: 6px; }
.al-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }
.al-lang input { accent-color: var(--k-primary, #2457D6); width: 18px; height: 18px; }
.al-actions { margin-block: 4px 10px; }
.al-go { display: inline-flex; align-items: center; gap: 8px; }
.al-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.al-fine { margin: 4px 0 0; font-size: 13.5px; color: var(--k-ink-2, #4A4238); }

/* ---------- 5. dialogs and the "Did you apply?" card ---------- */
.mj-dialog, .rp-dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 32px); box-sizing: border-box; margin: auto; padding: 24px; border: 1px solid var(--k-border, #EBE2D1); border-radius: 22px; background: var(--k-white, #FFFFFF); color: var(--k-ink, #2E2822); box-shadow: var(--shadow-3); }
.mj-dialog::backdrop, .rp-dialog::backdrop { background: var(--k-scrim, rgba(46, 40, 34, .42)); }
.mj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 8px; }
.mj-head h2, .rp-dialog h2 { font-size: 24px; margin: 0; }
.mj-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--k-border, #EBE2D1); background: var(--k-white, #FFFFFF); color: var(--k-ink, #2E2822); cursor: pointer; }
.mj-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mj-note, .mj-acct, .rp-lead, .rp-privacy { margin: 0 0 10px; color: var(--k-ink-2, #4A4238); font-size: 14.5px; }
.mj-warn { padding: 8px 12px; border-radius: 12px; background: var(--k-warn-bg, #F8E8C6); color: var(--k-warn-ink, #7F5410); font-weight: 600; }
.mj-acct a { color: var(--k-primary-ink, #1F4FCC); font-weight: 600; }
.mj-empty { padding: 24px; text-align: center; border: 1px dashed var(--k-border-strong, #D6C9B2); border-radius: 16px; color: var(--k-ink-2, #4A4238); }
.mj-follow { display: grid; gap: 8px; justify-items: start; margin-block: 8px; padding: 12px 14px; border-radius: 14px; background: var(--k-warn-bg, #F8E8C6); color: var(--k-warn-ink, #5C3F0C); font-size: 14.5px; }
.mj-follow p { margin: 0; }
.mj-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.mj-item { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--k-border, #EBE2D1); border-radius: 16px; background: var(--k-white, #FFFFFF); }
.mj-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mj-title { font: 600 17px/1.3 "Source Serif 4", Georgia, serif; color: var(--k-ink, #2E2822); overflow-wrap: anywhere; }
a.mj-title { text-decoration: underline; text-decoration-color: var(--k-border-strong, #D6C9B2); text-underline-offset: 3px; }
.mj-src { padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.mj-src-direct { background: var(--k-sky-2, #D8E8F9); color: var(--k-primary-ink, #2E4A78); }
.mj-src-partner { background: var(--k-sidebar, #F7F0E4); color: var(--k-ink-2, #4A4238); }
.mj-meta { margin: 0; color: var(--k-ink-2, #4A4238); font-size: 14.5px; }
.mj-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mj-status { min-height: 40px; padding: 6px 10px; border: 1px solid var(--k-border-strong, #D6C9B2); border-radius: 12px; background: var(--k-white, #FFFFFF); font: 400 15px/1.2 inherit; font-family: inherit; color: var(--k-ink, #2E2822); }
.mj-when { color: var(--k-muted, #6E6253); font-size: 13.5px; }
.mj-remove { margin-inline-start: auto; background: none; border: 0; color: var(--k-danger-ink, #9E4030); font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
.mj-remove:hover { background: var(--k-danger-bg, #F7E2DA); }
.mj-notebox { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--k-border, #EBE2D1); border-radius: 12px; font: 400 15px/1.4 inherit; font-family: inherit; color: var(--k-ink, #2E2822); background: var(--k-card-2, #FBF7EF); }
.rp-form { display: grid; gap: 12px; }
.rp-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.rp-kinds legend { font-weight: 600; font-size: 15px; margin-block-end: 6px; padding: 0; }
.rp-kind { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--k-border, #EBE2D1); border-radius: 12px; cursor: pointer; font-size: 15px; }
.rp-kind input { accent-color: var(--k-primary, #2457D6); width: 18px; height: 18px; }
.rp-field { display: grid; gap: 4px; font-size: 14px; font-weight: 600; color: var(--k-ink-2, #4A4238); }
.rp-field input, .rp-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--k-border-strong, #D6C9B2); border-radius: 12px; font: 400 16px/1.4 inherit; font-family: inherit; color: var(--k-ink, #2E2822); background: var(--k-white, #FFFFFF); }
.rp-trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-status { margin: 0; font-size: 14.5px; color: var(--k-ink-2, #4A4238); }
.rp-status.is-error { color: var(--k-danger-ink, #9E4030); font-weight: 600; }
.rp-status:empty { display: none; }
.rp-done { margin: 0; padding: 14px; border-radius: 14px; background: var(--k-ok-bg, #E2ECE1); color: var(--k-ok-ink, #356645); font-weight: 600; }

.ap-did { position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 80; max-width: 460px; margin-inline: auto; padding: 18px 20px; border: 1px solid var(--k-line-sky, #D8E6F5); border-radius: 20px; background: var(--k-white, #FFFFFF); box-shadow: var(--shadow-3); color: var(--k-ink, #2E2822); }
@media (min-width: 761px) { .ap-did { inset-inline-start: 24px; inset-inline-end: auto; margin-inline: 0; } }
.ap-did h2 { font-size: 20px; margin: 0 0 6px; }
.ap-did-body { margin: 0 0 12px; color: var(--k-ink-2, #4A4238); font-size: 15.5px; overflow-wrap: anywhere; }
.ap-did-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-did-status { margin: 0; color: var(--k-ok-ink, #356645); font-weight: 600; font-size: 15px; }
.ap-did-status:empty { display: none; }

/* The apply offer (public/js/apply-offer.js): a bottom sheet on phones, a card on wide screens. Not a modal: no backdrop, the page stays usable. */
.ao-panel { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 79; max-block-size: 82vh; overflow-y: auto; padding: 18px 16px 20px; border: 1px solid var(--k-line-sky, #D8E6F5); border-block-end: 0; border-radius: 20px 20px 0 0; background: var(--k-white, #FFFFFF); box-shadow: var(--shadow-3); color: var(--k-ink, #2E2822); }
@media (min-width: 761px) { .ao-panel { inset-inline-start: auto; inset-inline-end: 24px; inset-block-end: 24px; inline-size: 440px; border-block-end: 1px solid var(--k-line-sky, #D8E6F5); border-radius: 20px; } }
.ao-panel h2 { font-size: 20px; margin: 0 0 6px; }
.ao-lead, .ao-only, .ao-note, .ao-status { margin: 0 0 10px; font-size: 15px; color: var(--k-ink-2, #4A4238); overflow-wrap: anywhere; }
.ao-note { font-size: 13.5px; }
.ao-status:empty { display: none; }
.ao-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.ao-actions .btn { flex: 1 1 200px; justify-content: center; text-align: center; }
.ao-buy { flex-direction: column; gap: 2px; }
.ao-from { font-size: 13.5px; font-weight: 600; color: var(--k-ink-2, #4A4238); }
.ao-from:empty { display: none; }
.ao-extras { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-block-end: 6px; }
.ao-doc { position: relative; margin-block: 8px; padding: 14px; border: 1px dashed var(--k-line-sky, #D8E6F5); border-radius: 14px; }
.ao-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.ao-tag { padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; font-weight: 700; }
.ao-tailored { color: var(--k-ink-2, #4A4238); }
.ao-name { margin: 0; font-size: 13.5px; color: var(--k-ink-2, #4A4238); }
.ao-headline { font-size: 17px; margin: 2px 0 6px; }
.ao-summary { margin: 0 0 8px; font-size: 15px; }
.ao-bullets { margin: 0 0 8px; padding-inline-start: 20px; font-size: 15px; }
.ao-fade { display: grid; gap: 7px; block-size: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }
.ao-line { display: block; block-size: 9px; border-radius: 5px; background: var(--k-line-sky, #D8E6F5); }
.ao-line-1 { inline-size: 92%; } .ao-line-2 { inline-size: 78%; } .ao-line-3 { inline-size: 85%; }
.ao-rest { margin: 4px 0 0; font-size: 13px; color: var(--k-ink-2, #4A4238); }
.ao-link { margin-inline-start: 12px; padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .ao-panel { animation: ao-in 0.18s ease-out; } @keyframes ao-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }


/* ---------- the /careers/ page: the search block, chips and the card that holds a mounted tool ---------- */
.cv2-searchbar { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; max-inline-size: 860px; }
.cv2-searchbar .btn { min-block-size: 44px; }
.cv2-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.cv2-chips-l { font-weight: 600; color: var(--k-ink-2, #4A4238); font-size: 14.5px; margin-inline-end: 4px; }
.cv2-chip { text-decoration: none; padding: 6px 13px; font-size: 14.5px; font-weight: 500; color: var(--k-ink, #2E2822); background: var(--k-white, #FFFFFF); border: 1px solid var(--k-border-strong, #D6C9B2); }
.cv2-chip:hover { background: var(--k-card-2, #FBF7EF); border-color: var(--k-faint, #A79A86); }
.cv2-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.cv2-policy { margin-block-start: 20px; max-inline-size: 860px; }
.cv2-policy p { margin: 0 0 8px; }
.cv2-policy-note { color: var(--k-muted, #6E6253); font-size: 14.5px; }
.cv2-card { max-inline-size: 860px; }
.jobs-my { display: inline-flex; align-items: center; gap: 8px; }
.jobs-my[hidden] { display: none; }
.jobs-my .mj-dot:empty { display: none; }
.jobs-my .mj-dot { padding: 2px 8px; border-radius: 999px; background: var(--k-warn-bg, #F8E8C6); color: var(--k-warn-ink, #7F5410); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) { .cv2-searchbar { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .al-fields { grid-template-columns: 1fr; }
  .mj-dialog, .rp-dialog { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-drop, .job-act, .jobs-my { transition: none; }
}