/* SCRUB VALLEY staff console: brand.css
 *
 * Tokens and every component class of the staff app (BRIEF.md 4.5). The page builder uses these classes as
 * DESIGN-SPEC.md names them and puts screen-only layout in app.css. app.css adds no colour: it uses the tokens.
 *
 * Colours: kit/palette.py only. Every hex appears once, in :root. Text pairs are chosen from measured WCAG
 * contrast (DESIGN-SPEC.md 2.3): muted text only on white or zebra, small green text in green-600, red only for
 * icons, borders and risk marks, amber only as a status with icon and label, inputs bordered in muted (4.83 to 1),
 * and on a tint only navy, ink or that tint's own dark shade (blue-600 on blue-100, green-600 on green-100 or mint;
 * DESIGN-SPEC.md 2.2).
 * Fonts: Montserrat 400/600/700/800 and Almarai 400/700, served by the app from /brand/fonts/ (no CDN).
 *
 * Contents
 *   1 fonts            2 tokens           3 base              4 layout            5 top bar
 *   6 type helpers     7 buttons          8 forms             9 Must or Nice      10 chips
 *   11 badges, tags    12 cards, alerts   13 progress, tasks  14 job head, stepper 15 dialog, toast, tip
 *   16 disclosure      17 tables          18 jobs list        19 step 1           20 step 2
 *   21 step 3          22 step 4          23 utilities        24 motion           25 smaller screens
 */

/* 1 fonts ------------------------------------------------------------------------------------------------- */
@font-face { font-family: 'Montserrat'; src: url('/brand/fonts/Montserrat-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/brand/fonts/Montserrat-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/brand/fonts/Montserrat-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/brand/fonts/Montserrat-800.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('/brand/fonts/Almarai-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Almarai'; src: url('/brand/fonts/Almarai-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

/* 2 tokens ------------------------------------------------------------------------------------------------ */
:root {
  /* palette.py roles, same names as kit css_vars() */
  --blue: #0D72B9; --green: #00A880; --navy: #063759; --teal: #3EC99A; --green-deep: #008A69; --green-600: #006B52;
  --bg: #F4F4F6; --mint: #EDF9F5; --white: #FFFFFF; --ink: #212529; --mut: #6B7280; --line: #DBDBDB;
  --line-2: #E5E7EB; --zebra: #FAFAFB; --red: #F62E2E; --amber: #B45309;
  --blue-100: #EAF2F9; --blue-200: #C5DCEE; --blue-300: #8FBBDD; --blue-400: #4F94C9; --blue-600: #0A5A92;
  --green-100: #DFF5EE; --green-200: #B3E8D8; --green-300: #7AD6BB; --red-100: #FDEDED; --amber-100: #FBEFE3;

  /* semantic roles (ratios measured, DESIGN-SPEC.md 2.3) */
  --c-page: var(--bg);
  --c-surface: var(--white);
  --c-surface-2: var(--zebra);
  --c-text: var(--ink);              /* 15.43 on white, 14.04 on page grey */
  --c-text-2: var(--mut);            /* 4.83 on white, 4.63 on zebra; never on page grey (4.40) or tints */
  --c-heading: var(--navy);
  --c-link: var(--blue);             /* 5.09 on white, 4.64 on page grey */
  --c-link-tint: var(--blue-600);    /* blue text on blue-100: 6.42 */
  --c-border-ui: var(--mut);         /* boundary of inputs and chips: 4.83 (3 to 1 needed) */
  --c-border: var(--line-2);         /* card and row hairlines, decorative */
  --c-ok: var(--green-600);          /* green text and small white-on-green: 6.51 */
  --c-ok-icon: var(--green-deep);    /* icons and fills only: 4.34 */
  --c-ok-bg: var(--green-100);
  --c-warn: var(--amber);            /* status only, icon plus label: 5.02 on white */
  --c-warn-bg: var(--amber-100);
  --c-risk: var(--red);              /* icons, borders, risk marks: 3.93, never small text */
  --c-risk-bg: var(--red-100);
  --c-info-bg: var(--blue-100);
  --c-focus: var(--blue);
  --gradient: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%);   /* blue left, green right; top bar strip only */

  --font: 'Montserrat', 'Almarai', sans-serif;   /* Montserrat has no Arabic letters: Arabic inside Latin text falls back to Almarai, not a Windows font */
  --font-ar: 'Almarai', sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-24: 24px;
  --lh: 1.5; --lh-tight: 1.25; --lh-ar: 1.8;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --r-xs: 8px; --r-s: 12px; --r: 16px; --r-l: 24px; --r-pill: 999px;
  --shadow: 0 1px 6px rgba(0, 0, 0, .06);
  --shadow-2: 0 2px 24px rgba(6, 55, 89, .14);
  --shadow-3: 0 2px 32px rgba(0, 0, 0, .16);
  --backdrop: rgba(6, 55, 89, .45);
  --on-navy-hover: rgba(255, 255, 255, .12);
  --on-navy-rule: rgba(255, 255, 255, .28);

  --hit: 36px;                       /* every control is at least this tall and wide */
  --topbar-h: 56px;
  --page-max: 1600px;
  --page-px: 32px;
  --nav-w: 248px;                    /* step 1 section list */
  --people-w: 320px;                 /* step 3 candidate list */
  /* ship W3: ONE row anatomy, database and LinkedIn alike: # | Candidate | Location | Fit | Must-haves | Source | Decision | chevron */
  --cand-cols: 40px minmax(0, 1fr) 140px 92px 128px 96px 116px var(--hit);

  --t-fast: .12s; --t: .2s;
  --z-sticky: 10; --z-topbar: 20; --z-tip: 30; --z-toast: 50;
}
@media (max-width: 1365px) {
  :root { --page-px: 24px; --nav-w: 224px; --people-w: 280px;
          --cand-cols: 32px minmax(0, 1fr) 120px 88px 124px 88px 112px var(--hit); }
}

/* 3 base -------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-width: 0;   /* O-10: responsive down to 390 px (section 25), no sideways scroll */
  font-family: var(--font); font-size: var(--fs-14); line-height: var(--lh); color: var(--c-text);
  background: var(--c-page); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--c-link); text-underline-offset: 2px; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
[lang="ar"] { font-family: var(--font-ar); line-height: var(--lh-ar); }
[hidden] { display: none !important; }
::selection { background: var(--blue-200); color: var(--navy); }

.ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic--s { width: 14px; height: 14px; }
.ic--l { width: 24px; height: 24px; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 100;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  background: var(--white); color: var(--navy); font-weight: 700; box-shadow: var(--shadow-2);
}
.skip-link:focus { top: var(--sp-3); }

/* 4 layout ------------------------------------------------------------------------------------------------ */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.app__main { flex: 1 1 auto; outline: none; }
.page { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: var(--sp-8) var(--page-px) var(--sp-12); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.page-head__title { font-size: var(--fs-24); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); letter-spacing: -.2px; }
.page-head__sub { margin-top: var(--sp-1); font-size: var(--fs-14); color: var(--c-text); }   /* ink: the page is grey */
.page-head__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.step-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-4); }
.step-head__title { font-size: var(--fs-18); font-weight: 800; color: var(--c-heading); line-height: var(--lh-tight); }
.step-head__sub { margin-top: var(--sp-1); font-size: var(--fs-14); color: var(--c-text); }
.step-head__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack--s { gap: var(--sp-2); }
.stack--l { gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.spacer { flex: 1 1 auto; }
/* inside a stack the gap is the rhythm: blocks drop their own bottom margin, toggles keep their natural width */
.stack > .page-head, .stack > .step-head, .stack > .cand-toolbar, .stack > .jobs-toolbar { margin-bottom: 0; }
.stack > .seg, .dialog__body > .seg, .dialog__body > .btn { align-self: flex-start; }

/* 5 top bar ----------------------------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--sp-4);
  height: var(--topbar-h); padding: 0 var(--page-px);
  background: var(--navy); color: var(--white);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: var(--gradient); pointer-events: none; }
.topbar :focus-visible { outline-color: var(--white); }
.topbar__brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); padding-right: var(--sp-2); border-radius: var(--r-xs); color: var(--white); text-decoration: none; }
.topbar__logo { width: 28px; height: 28px; object-fit: contain; }
.topbar__wordmark { font-size: var(--fs-13); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.topbar__divider { width: 1px; height: 24px; background: var(--on-navy-rule); }
.topbar__product { font-size: var(--fs-14); font-weight: 600; color: var(--blue-200); }   /* 8.74 on navy */
.topbar__spacer { flex: 1 1 auto; }
.topbar__ai { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: 0 var(--sp-3); border: 1px solid var(--on-navy-rule); border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 600; color: var(--blue-200); }
.topbar__ai-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.topbar__ai[data-mode="offline"] .topbar__ai-dot { background: transparent; border: 2px solid var(--blue-200); }
.topbar__staff { display: flex; align-items: center; gap: var(--sp-2); }
.topbar__staff-label { font-size: var(--fs-12); font-weight: 600; color: var(--blue-200); }

/* 6 type helpers ------------------------------------------------------------------------------------------ */
.h-section { font-size: var(--fs-16); font-weight: 800; color: var(--c-heading); line-height: var(--lh-tight); }
.eyebrow { font-size: var(--fs-12); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-600); }
.text-mut { color: var(--c-text-2); }        /* white or zebra surfaces only */
.text-small { font-size: var(--fs-13); }
.text-strong { font-weight: 700; color: var(--c-heading); }
.num { font-variant-numeric: tabular-nums; }
.ar { direction: rtl; text-align: right; font-family: var(--font-ar); line-height: var(--lh-ar); }

/* 7 buttons ----------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--hit); padding: 0 var(--sp-4);
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  background: transparent; color: var(--navy);
  font-size: var(--fs-14); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn .ic { width: 16px; height: 16px; }
.btn--primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn--secondary { background: var(--white); border-color: var(--navy); color: var(--navy); }
.btn--secondary:hover { background: var(--blue-100); }
.btn--ghost { color: var(--blue-600); }
.btn--ghost:hover { background: var(--blue-100); }
.btn--ai { background: var(--white); border-color: var(--blue-600); color: var(--blue-600); }
.btn--ai:hover { background: var(--blue-100); }
.btn--danger { background: var(--white); border-color: var(--red); color: var(--ink); }
.btn--danger .ic { color: var(--red); }
.btn--danger:hover { background: var(--red-100); }
.btn--lg { min-height: 44px; padding: 0 var(--sp-6); font-size: var(--fs-15); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: var(--hit); height: var(--hit); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--mut);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn--danger:hover { background: var(--red-100); color: var(--red); }
.icon-btn--on-navy { color: var(--white); }
.icon-btn--on-navy:hover { background: var(--on-navy-hover); color: var(--white); }

.link-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--hit); padding: 0 var(--sp-1);
  border: 0; background: none; color: var(--navy); font-size: var(--fs-13); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--blue-600); }
.link-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 8 forms ------------------------------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-13); font-weight: 700; color: var(--navy); }
.field__hint { font-size: var(--fs-12); color: var(--c-text-2); }
.field__error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.field__error .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--red); }
.input, .textarea, .select > select {
  width: 100%; min-height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-s);
  background: var(--white); color: var(--ink); font-size: var(--fs-14);
  transition: border-color var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--mut); opacity: 1; }
.input:hover, .textarea:hover, .select > select:hover { border-color: var(--navy); }
.input:focus-visible, .textarea:focus-visible, .select > select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select > select[aria-invalid="true"] { border: 2px solid var(--red); }
.input:disabled, .textarea:disabled, .select > select:disabled { background: var(--zebra); cursor: not-allowed; }
.textarea { padding: var(--sp-3); min-height: 96px; line-height: var(--lh); resize: vertical; }
.textarea--jd { min-height: 280px; font-size: var(--fs-13); }
.textarea--note { min-height: 64px; }
.textarea--copy { min-height: 240px; font-size: var(--fs-13); }   /* dlg-copy: the WhatsApp message */
/* free text that may be Arabic carries dir="auto" (DESIGN-SPEC.md 2.4); each paragraph then takes its own direction */
.textarea--jd, .textarea--note, .textarea--copy { unicode-bidi: plaintext; }
.input--num { width: 132px; font-variant-numeric: tabular-nums; }
.select { position: relative; display: block; min-width: 0; }
.select > select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select > select option { color: var(--ink); background: var(--white); }
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select--on-navy > select { min-height: var(--hit); min-width: 190px; background: transparent; color: var(--white); border-color: var(--blue-300); font-weight: 600; }
.select--on-navy > select:hover { border-color: var(--white); }
.select--on-navy::after { border-color: var(--white); }
.input-affix { display: flex; align-items: center; gap: var(--sp-2); }
.input-affix__text { font-size: var(--fs-13); font-weight: 600; color: var(--c-text-2); white-space: nowrap; }
.add-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.add-row > .input, .add-row > .field { flex: 1 1 auto; }
.add-row__select { flex: 0 0 220px; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.search { position: relative; display: block; }
.search > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; }
.search > .input { width: 380px; padding-left: 40px; }

/* 9 Must or Nice toggle (the TestGorilla pill, navy) ------------------------------------------------------- */
.seg { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px; border: 1px solid var(--navy); border-radius: var(--r-pill); background: var(--white); }
.seg__opt {
  min-height: var(--hit); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font-size: var(--fs-13); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg__opt:hover { background: var(--blue-100); }
.seg__opt[aria-checked="true"] { background: var(--navy); color: var(--white); font-weight: 700; }
.seg__opt:focus-visible { outline-offset: 1px; }
.seg__opt:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }   /* the grade pill while "No grade" is picked (spec 8.3) */
.seg--wide .seg__opt { padding: 0 var(--sp-6); }
.must-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-pill); background: var(--line-2); color: var(--ink); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; }

/* 10 chips ------------------------------------------------------------------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.chip { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--hit); padding-left: var(--sp-3); border-radius: var(--r-pill); background: var(--blue-100); color: var(--navy); font-size: var(--fs-13); font-weight: 600; }
.chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip__remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--hit); height: var(--hit); margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy); }
.chip__remove .ic { width: 14px; height: 14px; }
.chip__remove:hover { background: var(--blue-200); }
.chip-option {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--hit); padding: 0 var(--sp-4);
  border: 1px solid var(--c-border-ui); border-radius: var(--r-pill); background: var(--white);
  color: var(--ink); font-size: var(--fs-13); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip-option:hover { border-color: var(--navy); background: var(--zebra); }
.chip-option .ic { width: 14px; height: 14px; }
.chip-option[aria-pressed="true"], .chip-option[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip-option--add { border-style: dashed; color: var(--navy); }
.chip-option--add .ic { color: var(--blue-600); }
.chip-option:disabled { opacity: .45; cursor: not-allowed; }
.chip-option__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink); font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-option[aria-pressed="true"] .chip-option__count, .chip-option[aria-checked="true"] .chip-option__count { background: var(--white); color: var(--navy); }
.opt-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 112px; min-height: 52px; padding: 6px var(--sp-4);
  border: 1px solid var(--c-border-ui); border-radius: 14px; background: var(--white); color: var(--ink);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.opt-chip:hover { border-color: var(--navy); background: var(--zebra); }
.opt-chip__en { font-size: var(--fs-14); font-weight: 700; line-height: 1.2; }
.opt-chip__ar { font-family: var(--font-ar); font-size: var(--fs-14); font-weight: 400; line-height: 1.3; }
.opt-chip[aria-checked="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.opt-chip[aria-busy="true"] { cursor: progress; }

/* 11 badges and tags -------------------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 var(--sp-3) 0 var(--sp-2); border: 1.5px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.badge .ic { width: 14px; height: 14px; }
.badge--ksa { background: var(--blue); border-color: var(--blue); color: var(--white); }          /* 5.09 */
.badge--outside { background: var(--line-2); border-color: var(--line-2); color: var(--ink); }    /* 12.46 */
.badge--unknown, .badge--warn { background: var(--white); border-color: var(--amber); color: var(--amber); }   /* 5.02 */
.badge--ok { background: var(--green-100); border-color: var(--green-100); color: var(--green-600); }  /* own dark shade on its tint: 5.72 (spec 2.2) */
.badge--risk { background: var(--red-100); border-color: var(--red); color: var(--ink); }
.badge--risk .ic { color: var(--red); }
.badge--neutral { background: var(--line-2); border-color: var(--line-2); color: var(--ink); }
.badge--info { background: var(--blue-100); border-color: var(--blue-100); color: var(--blue-600); }  /* own dark shade on its tint: 6.42 (spec 2.2) */
.badge--done { background: var(--navy); border-color: var(--navy); color: var(--white); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--sp-2); border: 1px solid transparent; border-radius: var(--r-xs); font-size: var(--fs-12); font-weight: 700; line-height: 18px; white-space: nowrap; }
.tag .ic { width: 12px; height: 12px; }
.tag--must { background: var(--navy); color: var(--white); }
.tag--nice { background: var(--line-2); color: var(--ink); }
.tag--req { background: var(--blue-100); color: var(--navy); }
.tag--optional { background: var(--white); border-color: var(--line); color: var(--mut); }
.tag--ai { background: var(--mint); color: var(--green-600); }                                    /* own dark shade on mint: 6.04 (spec 2.2) */

/* 12 cards, alerts, empty, skeleton ----------------------------------------------------------------------- */
.card { background: var(--c-surface); border-radius: var(--r); box-shadow: var(--shadow); }
.card--pad { padding: var(--sp-6); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) 0; }
.card__title { font-size: var(--fs-16); font-weight: 800; color: var(--c-heading); line-height: var(--lh-tight); }
.card__sub { margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-2); }
.card__body { padding: var(--sp-5) var(--sp-6); }
.card__foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); }
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--blue); border-radius: var(--r-s); background: var(--blue-100); color: var(--ink); }
.alert > .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--blue-600); }
.alert__body { flex: 1 1 auto; min-width: 0; }
.alert__title { font-weight: 700; color: var(--navy); }
.alert__text { margin-top: 2px; font-size: var(--fs-13); color: var(--ink); }
.alert__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; align-self: center; }
.alert__list { margin-top: var(--sp-2); padding-left: var(--sp-5); list-style: disc; font-size: var(--fs-13); color: var(--ink); overflow-wrap: anywhere; }   /* e.g. the kit's fail_lines */
.alert__list li + li { margin-top: 2px; }
.alert__list .link-btn { margin-right: var(--sp-1); padding: 0; vertical-align: middle; }   /* "A4 page 3" in the warnings alert: navy on amber-100 10.93 */
.alert .btn--ghost, .alert .link-btn:hover { color: var(--navy); }   /* in every alert: no blue on the red, amber or green tints (spec 2.2); navy 10.85 or more on every alert fill */
.alert .btn--ghost:hover { background: var(--white); }             /* the blue-100 hover fill would not show on the info alert */
.alert--ok { border-left-color: var(--green-deep); background: var(--green-100); }
.alert--ok > .ic { color: var(--green-600); }
.alert--warn { border-left-color: var(--amber); background: var(--amber-100); }
.alert--warn > .ic { color: var(--amber); }
.alert--risk { border-left-color: var(--red); background: var(--red-100); }
.alert--risk > .ic { color: var(--red); }
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-6); text-align: center; }
.empty__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-100); color: var(--blue-600); }
.empty__icon .ic { width: 26px; height: 26px; }
.empty__logo { width: 56px; height: 56px; object-fit: contain; }   /* gradient mark on white (DESIGN.md 6) */
.empty__title { font-size: var(--fs-16); font-weight: 800; color: var(--c-heading); }
.empty__text { max-width: 460px; color: var(--c-text-2); }
.empty__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }
.skeleton { display: block; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--line-2) 0%, var(--zebra) 50%, var(--line-2) 100%); background-size: 200% 100%; animation: sv-shimmer 1.4s ease-in-out infinite; }
.skeleton--line { height: 12px; }
.skeleton--title { width: 40%; height: 18px; }
.skeleton--row { height: 56px; border-radius: var(--r-s); }

/* 13 progress and background tasks ------------------------------------------------------------------------ */
.task { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.task--inline { box-shadow: none; border: 1px solid var(--c-border); }
.task__head { display: flex; align-items: center; gap: var(--sp-3); }
.task__title { font-size: var(--fs-16); font-weight: 800; color: var(--c-heading); }
.task__stage { font-size: var(--fs-14); color: var(--ink); }
.task__meta { font-size: var(--fs-12); color: var(--c-text-2); }
.progress { position: relative; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--line-2); }
.progress__bar { height: 100%; width: var(--pct, 0%); border-radius: var(--r-pill); background: var(--blue); transition: width .4s ease; }
.progress--indeterminate .progress__bar { width: 35%; animation: sv-indeterminate 1.4s ease-in-out infinite; }
.progress--sm { height: 6px; }
.spinner { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sv-spin .8s linear infinite; }
.meter { display: inline-block; flex: 0 0 auto; width: 56px; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--line-2); vertical-align: middle; }
.meter__fill { display: block; height: 100%; width: var(--pct, 0%); background: var(--green-deep); }

/* 14 job head and stepper --------------------------------------------------------------------------------- */
.job-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); }
.job-head__back { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; margin-bottom: 2px; font-size: var(--fs-13); font-weight: 700; color: var(--blue-600); text-decoration: none; }
.job-head__back:hover { text-decoration: underline; }
.job-head__title { font-size: var(--fs-24); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); letter-spacing: -.2px; }
.job-head__meta { margin-top: var(--sp-1); font-size: var(--fs-14); color: var(--c-text); }
.job-head__actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.stepper { margin: var(--sp-4) 0 var(--sp-6); }
.stepper__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.stepper__link { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-4); border-bottom: 3px solid transparent; border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.stepper__link:hover { background: var(--zebra); }
.stepper__num { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border: 2px solid var(--mut); border-radius: 50%; color: var(--mut); font-size: var(--fs-13); font-weight: 800; }
.stepper__num .ic { width: 16px; height: 16px; stroke-width: 2.5; }
.stepper__text { min-width: 0; }
.stepper__label { display: block; font-size: var(--fs-14); font-weight: 700; color: var(--navy); }
.stepper__meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__meta .spinner { width: 12px; height: 12px; color: var(--blue); }
.stepper__step.is-done .stepper__num { background: var(--green-600); border-color: var(--green-600); color: var(--white); }
.stepper__link[aria-current="step"] { background: var(--blue-100); border-bottom-color: var(--blue); }
.stepper__link[aria-current="step"] .stepper__num { background: var(--blue); border-color: var(--blue); color: var(--white); }
.stepper__link[aria-current="step"] .stepper__meta { color: var(--navy); }   /* muted fails on blue-100 */

/* 15 dialog, toast, tooltip ------------------------------------------------------------------------------- */
.dialog { width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; overflow: auto; border: 0; border-radius: var(--r-l); background: var(--white); color: var(--ink); box-shadow: var(--shadow-3); }
.dialog::backdrop { background: var(--backdrop); }
.dialog--wide { width: min(880px, calc(100vw - 48px)); }
.dialog--preview { width: min(1040px, calc(100vw - 48px)); }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) var(--sp-6) 0; }
.dialog__title { font-size: var(--fs-18); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); padding-top: 6px; }
.dialog__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); }
.dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-2) var(--sp-6) var(--sp-6); }
.jd-text { max-height: 60vh; overflow: auto; padding: var(--sp-4); border-radius: var(--r-s); background: var(--zebra); font-size: var(--fs-13); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }   /* with dir="auto": Arabic paragraphs right to left */
.toasts { position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--sp-3); max-width: 460px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); min-height: 48px; border-radius: var(--r-s); background: var(--navy); color: var(--white); box-shadow: var(--shadow-3); font-size: var(--fs-14); font-weight: 600; pointer-events: auto; animation: sv-rise var(--t) ease-out; }
.toast > .ic { color: var(--teal); }                                                                /* 5.90 on navy */
.toast--risk { border-left: 4px solid var(--red); }
.toast--risk > .ic { color: var(--white); }
.toast__action { min-height: var(--hit); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--teal); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.toast__action:hover { background: var(--on-navy-hover); }
.toast :focus-visible { outline-color: var(--white); }
.has-tip { position: relative; }
.tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: var(--z-tip);
  width: max-content; max-width: min(560px, calc(100vw - 64px)); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-s); background: var(--navy); color: var(--white); box-shadow: var(--shadow-2);
  font-size: var(--fs-13); font-weight: 400; line-height: var(--lh);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast), visibility 0s linear var(--t-fast);
}
.tip--up { top: auto; bottom: calc(100% + 6px); }
.tip__label { display: block; margin-bottom: 2px; font-size: var(--fs-12); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); }
.tip__quote { display: block; }   /* the advert sentence, dir="auto" so an Arabic sentence runs right to left */
/* hover or KEYBOARD focus only: :focus-within would also match the focus a mouse click leaves on a pill or trash button.
   Two rules, so a browser without :has() still shows the tip on hover. */
.has-tip:hover > .tip { visibility: visible; opacity: 1; transition: opacity var(--t-fast) .25s, visibility 0s linear .25s; }
.has-tip:has(:focus-visible) > .tip { visibility: visible; opacity: 1; transition: opacity var(--t-fast) .25s, visibility 0s linear .25s; }

/* 16 disclosure (details and summary) --------------------------------------------------------------------- */
.disclosure { border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.disclosure__summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-4); list-style: none; cursor: pointer; border-radius: var(--r); font-weight: 800; color: var(--navy); }
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary:hover { background: var(--zebra); }
.disclosure__summary > .ic { transition: transform var(--t); }
.disclosure[open] > .disclosure__summary > .ic { transform: rotate(90deg); }
.disclosure[open] > .disclosure__summary { border-radius: var(--r) var(--r) 0 0; }
.disclosure__body { padding: 0 var(--sp-4) var(--sp-4); }
.disclosure__intro { padding: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-13); color: var(--c-text-2); }
.disclosure--plain { background: transparent; box-shadow: none; }
.disclosure--plain > .disclosure__summary { padding: 0; min-height: var(--hit); font-size: var(--fs-13); }
.disclosure--plain > .disclosure__summary:hover { background: transparent; text-decoration: underline; }
.disclosure--plain > .disclosure__body { padding: 0; }

/* 17 tables ----------------------------------------------------------------------------------------------- */
.table-wrap { overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: var(--sp-3) var(--sp-4); background: var(--navy); color: var(--white); text-align: left; font-size: var(--fs-12); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); font-size: var(--fs-14); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--zebra); }
.table--click tbody tr { cursor: pointer; }
.table .num { text-align: right; }
.table__primary { font-weight: 700; color: var(--navy); text-decoration: none; }
a.table__primary:hover { text-decoration: underline; }
.table__secondary { display: block; font-size: var(--fs-13); color: var(--c-text-2); }
.table td.table__empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink); cursor: default; }   /* one cell, colspan = all columns */
.table tbody tr:hover td.table__empty { background: transparent; }

/* 18 jobs list -------------------------------------------------------------------------------------------- */
.jobs-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); padding: 0 var(--sp-2); border-bottom: 1px solid var(--c-border); }
.jobs-tabs .tabs__tab { padding: var(--sp-3) var(--sp-5); white-space: normal; text-align: center; }
@media (max-width: 480px) {
  .jobs-tabs { gap: 0; padding: 0; }
  .jobs-tabs .tabs__tab { flex: 1; padding-inline: var(--sp-2); font-size: var(--fs-13); }
}
.jobs-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.jobs-pagination {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-6);
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.jobs-pagination .btn { min-height: 44px; min-width: 112px; padding: var(--sp-3) var(--sp-5); }
.jobs-pagination__page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; min-height: 44px; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-s); background: var(--blue-100); color: var(--navy);
  font-size: var(--fs-14); font-weight: 600; white-space: nowrap;
}
@media (max-width: 480px) {
  .jobs-pagination { gap: var(--sp-2); padding: var(--sp-3); }
  .jobs-pagination .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--sp-3); }
  .jobs-pagination__page { min-width: 64px; padding-inline: var(--sp-2); }
}
.mini-steps { display: inline-flex; gap: 3px; margin-right: var(--sp-2); vertical-align: middle; }
.mini-steps__seg { width: 18px; height: 6px; border-radius: var(--r-pill); background: var(--line-2); }
.mini-steps__seg.is-done { background: var(--green-deep); }
.mini-steps__seg.is-current { background: var(--blue); }

/* 19 step 1 requirements (Refine pattern) ----------------------------------------------------------------- */
/* ship W3 (M-04): the page scrolls, never a box inside it. The section list sticks under the top bar and the footer
   with Save and Save and match sticks to the bottom of the window, so both stay in reach on a long job. */
.refine { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto auto auto; border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow); }
.refine__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.refine__title { font-size: var(--fs-18); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); }
.refine__count { flex: 0 0 auto; font-size: var(--fs-13); font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.refine__nav { grid-column: 1; grid-row: 2; padding: var(--sp-4) 0; border-right: 1px solid var(--c-border); }
.refine__nav > .sec-nav { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); }
.refine__panel { grid-column: 2; grid-row: 2; position: relative; min-width: 0; padding: 0 var(--sp-8) var(--sp-8); }
.refine__foot { grid-column: 1 / -1; grid-row: 3; position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-8); border-top: 1px solid var(--c-border); border-radius: 0 0 var(--r-l) var(--r-l); background: var(--white); box-shadow: 0 -2px 12px rgba(6, 55, 89, .06); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-6); font-size: var(--fs-13); color: var(--ink); }
.legend__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sec-nav { display: flex; flex-direction: column; }
.sec-nav__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-6); border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); font-size: var(--fs-14); font-weight: 600; text-align: left; }
.sec-nav__item:hover { background: var(--zebra); }
.sec-nav__item[aria-current="true"] { background: var(--bg); border-left-color: var(--blue); color: var(--navy); font-weight: 700; }
.sec-nav__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.sec-nav__count { margin-left: auto; font-size: var(--fs-12); font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; }
.sec-nav__item[aria-current="true"] .sec-nav__count { color: var(--ink); }   /* muted fails on page grey */
.sec { padding: var(--sp-6) 0; border-bottom: 1px solid var(--c-border); scroll-margin-top: var(--sp-2); }
.sec:last-child { border-bottom: 0; }
.sec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.sec__title { font-size: var(--fs-16); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); }
.sec__desc { margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-2); }
.sec__body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.sec__label { font-size: var(--fs-13); font-weight: 700; color: var(--navy); }
.sec__empty { padding: var(--sp-1) 0; font-size: var(--fs-13); color: var(--c-text-2); }
.sec__limit { font-size: var(--fs-12); font-weight: 700; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.req-list { display: flex; flex-direction: column; gap: 2px; }
.req-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto var(--hit); align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); border-radius: var(--r-s); }
.req-item:hover, .req-item:focus-within { background: var(--zebra); }
.req-item.is-new { animation: sv-flash 1.6s ease-out; }
.req-item__main { min-width: 0; }
.req-item__title { font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.req-item__desc { margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-2); }
.req-item--years { grid-template-columns: minmax(0, 1fr) 132px 132px auto var(--hit); align-items: end; }
.req-item--grade { margin-left: calc(var(--sp-4) * -1); }   /* Grade row (spec 8.3): its label lines up with Profession above, its pill with the item pills */
.req-item--grade .field { width: min(100%, 360px); }
.suggest { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--green-200); border-radius: var(--r); background: var(--mint); }
.suggest__head { display: flex; align-items: center; gap: var(--sp-2); }
.suggest__head > .ic { color: var(--green-600); }
.suggest__title { font-size: var(--fs-14); font-weight: 800; color: var(--navy); }
.suggest__status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink); }
.suggest__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.suggest-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-s); background: var(--white); }
.suggest-item__title { font-weight: 700; color: var(--ink); }
.suggest-item__desc { font-size: var(--fs-13); color: var(--c-text-2); }
.suggest-item__quote { margin-top: var(--sp-1); font-size: var(--fs-13); color: var(--ink); }
.save-state { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); font-weight: 600; color: var(--ink); }
.save-state__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.save-state .ic { width: 16px; height: 16px; }
.save-state[data-state="saved"] .ic { color: var(--green-600); }
.save-state[data-state="error"] .ic { color: var(--red); }
.save-state[data-state="saving"] .spinner { color: var(--blue); }

/* 20 step 2 candidates ------------------------------------------------------------------------------------ */
/* WP4 calm screens (owner, 5 Oct): one quiet anatomy per row, one quiet panel per open row, 8px rhythm */
.cand-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cand-table { overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.cand-cols, .cand-head { display: grid; grid-template-columns: var(--cand-cols); align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); }
.cand-cols { min-height: 40px; background: var(--navy); color: var(--white); font-size: var(--fs-12); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.cand { border-bottom: 1px solid var(--c-border); }
.cand:last-child { border-bottom: 0; }
.cand-head { min-height: 56px; cursor: pointer; }
.cand-head:hover { background: var(--zebra); }
.cand.is-open { box-shadow: inset 4px 0 0 var(--blue); }
.cand.is-open > .cand-head { background: var(--zebra); }
.cand__rank { font-weight: 800; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.cand__who { min-width: 0; }
.cand__name { display: block; overflow: hidden; font-weight: 700; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.cand__title { display: block; overflow: hidden; font-size: var(--fs-13); color: var(--c-text-2); white-space: nowrap; text-overflow: ellipsis; }
/* an Arabic name or title in the LTR list starts at the same edge as the others (ship UI integration) */
.cand__name[dir="auto"], .cand__title[dir="auto"], .person__title[dir="auto"], .qhead__title[dir="auto"] { text-align: left; }
/* the ONE Fit chip (Best / Good / Possible / Low): a tint and its own dark shade, nothing louder */
.fit { display: inline-flex; align-items: center; justify-self: start; min-height: 24px; padding: 0 var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; }
.fit--best { background: var(--green-100); color: var(--green-600); }
.fit--good { background: var(--blue-100); color: var(--blue-600); }
.fit--possible { background: var(--line-2); color: var(--ink); }
.fit--low { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-2); }
.cand__musts { font-size: var(--fs-13); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cand__musts b { font-weight: 800; color: var(--navy); }   /* only the found number is bold: the name stays the heaviest text */
.cand__musts--profile { color: var(--blue-600); }          /* LinkedIn: what the profile says, never proof (H-02) */
.cand__link { min-width: 0; font-size: var(--fs-13); font-weight: 700; }
.cand__link--none { font-weight: 600; color: var(--c-text-2); }
.cand__cv { display: inline-flex; align-items: center; gap: 4px; min-height: var(--hit); font-size: var(--fs-13); font-weight: 700; }
.cand__cv--none { font-size: var(--fs-13); font-weight: 600; color: var(--c-text-2); }
.cand__decision { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.cand-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 64px; padding: var(--sp-4); color: var(--ink); }   /* a filter with no rows */
.cand__toggle .ic { transition: transform var(--t); }
.cand__toggle[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* the open panel: three quiet sections down one column, hairlines between, 8px rhythm inside */
.cand-body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-6) var(--sp-6) calc(44px + var(--sp-4) + var(--sp-3)); }
.cand-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.cand-sec + .cand-sec { padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.cand-sec > .h-section { font-size: var(--fs-14); }
.quals { display: flex; flex-direction: column; gap: var(--sp-1); }
.req-check { display: flex; flex-direction: column; }
.req-check__item { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.req-check__item:last-child { border-bottom: 0; }
.req-check__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.req-check__label { font-weight: 600; color: var(--ink); }
/* the ONE state word carries the colour: Found green, Ask amber, Doesn't fit ink with a red
   risk mark (red never as small text, spec 2.3), Nice muted */
.req-check__word { font-size: var(--fs-13); font-weight: 700; }
.req-check__word--found { color: var(--green-600); }
.req-check__word--ask { color: var(--amber); }
.req-check__word--no { color: var(--ink); padding-bottom: 1px; border-bottom: 2px solid var(--red); }
.req-check__word--nice { color: var(--c-text-2); }
.req-check__word--profile { color: var(--blue-600); }   /* "On profile": a LinkedIn line, never Found (H-02); 6.42 on white */
.req-check__state { margin-top: 2px; font-size: var(--fs-13); color: var(--ink); }
.req-check__quote { margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-left: 3px solid var(--blue-300); border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--zebra); font-size: var(--fs-12); color: var(--c-text-2); overflow-wrap: anywhere; }
.req-check__src { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--c-text-2); }
.ai-note { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--green-200); border-radius: var(--r-s); background: var(--mint); }
.ai-note__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--green-600); }   /* own dark shade on mint: 6.04 (spec 2.2) */
.ai-note__label .ic { width: 14px; height: 14px; }
.ai-note__text { margin-top: 6px; font-size: var(--fs-13); color: var(--ink); }
.ai-note__text li + li { margin-top: 2px; }
.ai-note__foot { margin-top: 6px; font-size: var(--fs-12); font-weight: 600; color: var(--ink); }
.facts { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px var(--sp-3); font-size: var(--fs-13); }
.facts dt { font-weight: 600; color: var(--c-text-2); }
.facts dd { color: var(--ink); overflow-wrap: anywhere; }
.facts--wide { grid-template-columns: 160px minmax(0, 1fr); font-size: var(--fs-14); }
.decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.decide__btn[aria-pressed="true"].decide__btn--approve { background: var(--green-600); border-color: var(--green-600); color: var(--white); }   /* 6.51 */
.decide__btn[aria-pressed="true"].decide__btn--hold { background: var(--amber); border-color: var(--amber); color: var(--white); }                /* 5.02 */
.decide__btn[aria-pressed="true"].decide__btn--reject { background: var(--red-100); border-color: var(--red); color: var(--ink); }
.decide__btn--reject .ic { color: var(--red); }
.decide__meta { font-size: var(--fs-12); color: var(--c-text-2); }
.reason { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--red); border-radius: var(--r-s); background: var(--red-100); }
.reason__title { font-weight: 700; color: var(--navy); }
.reason__actions { display: flex; gap: var(--sp-2); }
.notfit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: start; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.notfit-row__reason { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--ink); }
.notfit-row__reason + .notfit-row__reason { margin-top: var(--sp-2); }
.notfit-row__reason .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--red); }
.notfit-row__quote { margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-left: 3px solid var(--blue-300); border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--zebra); font-size: var(--fs-13); color: var(--ink); overflow-wrap: anywhere; }   /* the CV line that proves the plain reason (spec 9.3, 9.5) */
.notfit-row__src { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--c-text-2); }   /* "CV page 2", "Answered to Khaled on 2 Oct": muted on zebra 4.63, on white 4.83 */
/* ship W3 (5 Oct): the one candidate list. A card with the filters on top, group heads between the tiers (the closed
   groups keep their head and count), quiet rows, and an open row in four short sections. */
.shortlist { overflow: hidden; }
.shortlist__bar { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.shortlist__bar > .cand-toolbar { margin: 0; }
.cand-toolbar--tools .search { flex: 1 1 260px; max-width: 380px; }
.cand-toolbar--tools .search > .input { width: 100%; }
.cand-toolbar--tools .select > select { min-width: 180px; }
.shortlist__note { font-size: var(--fs-13); color: var(--c-text-2); }
.shortlist__status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-13); color: var(--ink); }
.shortlist__status .spinner { width: 14px; height: 14px; color: var(--blue); }
.shortlist .cand-table { border-radius: 0; box-shadow: none; }
.cand-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-height: 40px; padding: var(--sp-1) var(--sp-4); border-bottom: 1px solid var(--c-border); background: var(--zebra); }
.cand-group__label { font-size: var(--fs-13); font-weight: 800; color: var(--navy); letter-spacing: .2px; }
.cand-group__count { font-size: var(--fs-13); font-weight: 700; color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.cand-group__note { flex: 1 1 auto; font-size: var(--fs-12); color: var(--c-text-2); }
.cand-group--best .cand-group__label::before, .cand-group--good .cand-group__label::before, .cand-group--possible .cand-group__label::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-2); border-radius: 50%; vertical-align: 1px; background: var(--mut); }
.cand-group--best .cand-group__label::before { background: var(--green-deep); }
.cand-group--good .cand-group__label::before { background: var(--blue); }
.cand-group__toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 var(--sp-2) 0 0; border: 0; background: transparent; color: var(--navy); font: inherit; text-align: left; }
.cand-group__toggle > .ic { width: 16px; height: 16px; transition: transform var(--t); }
.cand-group__toggle[aria-expanded="true"] > .ic { transform: rotate(90deg); }
.cand-group__state { font-size: var(--fs-13); font-weight: 700; color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; }
.cand-group__toggle:hover .cand-group__state { color: var(--navy); }
.cand__loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: var(--fs-13); color: var(--ink); }
.cand__loc .ic { color: var(--blue-600); }
.cand__loc-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cand__loc--none { color: var(--c-text-2); }
.cand__src { font-size: var(--fs-12); font-weight: 600; color: var(--c-text-2); white-space: nowrap; }
.cand__src--lead { color: var(--blue-600); }
.fit--none { display: none; }
.cand-sec__title { font-size: var(--fs-12); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--c-text-2); }
.cand-reasons { margin: 0; padding-left: var(--sp-5); list-style: disc; font-size: var(--fs-13); color: var(--ink); }
.cand-reasons li + li { margin-top: 2px; }
.cand-actions { margin-top: var(--sp-1); }
.cand-profile a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.msg-text { margin: 0; padding: var(--sp-3); border-radius: var(--r-xs); background: var(--zebra); font: inherit; font-size: var(--fs-13); white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-list { display: flex; flex-direction: column; }

/* 21 step 3 questions ------------------------------------------------------------------------------------- */
.qs { display: grid; grid-template-columns: var(--people-w) minmax(0, 1fr); align-items: start; gap: var(--sp-6); }
.people { position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.people__head { padding: var(--sp-3) var(--sp-4); background: var(--navy); color: var(--white); font-size: var(--fs-12); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.people__list { max-height: calc(100vh - var(--topbar-h) - 160px); overflow-y: auto; }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3) var(--sp-4); border: 0; border-bottom: 1px solid var(--c-border); border-left: 4px solid transparent; background: var(--white); text-align: left; }
.person:hover { background: var(--zebra); }
.person[aria-current="true"] { border-left-color: var(--blue); background: var(--zebra); }
.person__name { overflow: hidden; font-weight: 700; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.person__title { grid-column: 1; overflow: hidden; font-size: var(--fs-12); color: var(--c-text-2); white-space: nowrap; text-overflow: ellipsis; }
.person__progress { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--ink); font-variant-numeric: tabular-nums; }
.qpanel { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.qhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.qhead__name { font-size: var(--fs-18); font-weight: 800; line-height: var(--lh-tight); color: var(--c-heading); }
.qhead__title { margin-top: 2px; font-size: var(--fs-13); color: var(--c-text-2); }
.qhead__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.contact { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-3); font-size: var(--fs-13); }
.contact__item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.contact__label { font-weight: 600; color: var(--c-text-2); }
.contact__value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.qcard { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); border-left: 4px solid transparent; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow); }
.qcard.is-answered { border-left-color: var(--green-deep); }
.qcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.qcard__num { font-size: var(--fs-12); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--c-text-2); }
.qcard__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--sp-6); }
.qcard__en { font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.qcard__ar { font-family: var(--font-ar); font-size: var(--fs-17); font-weight: 700; line-height: var(--lh-ar); color: var(--blue); direction: rtl; text-align: right; }   /* Arabic heading blue, 5.09 */
.opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qcard__effect { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); background: var(--zebra); font-size: var(--fs-13); color: var(--ink); }
.qcard__effect .ic { width: 16px; height: 16px; margin-top: 2px; }
.qcard__effect[data-tone="ok"] .ic { color: var(--green-600); }
.qcard__effect[data-tone="warn"] .ic { color: var(--amber); }
.qcard__effect[data-tone="risk"] .ic { color: var(--red); }
.qcard__effect[data-tone="info"] .ic { color: var(--blue-600); }
.qcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.qcard__saved { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-12); color: var(--c-text-2); }
.qcard__saved .ic { width: 14px; height: 14px; color: var(--green-600); }
.qcard__saved[data-state="error"] { color: var(--ink); font-weight: 600; }
.qcard__saved[data-state="error"] .ic { color: var(--red); }

/* 22 step 4 client file ----------------------------------------------------------------------------------- */
.build-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr); align-items: start; gap: var(--sp-6); }
.check-cell { display: inline-flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--ink); }
.check-cell .ic { width: 16px; height: 16px; margin-top: 2px; }
.check-cell[data-tone="ok"] .ic { color: var(--green-600); }
.check-cell[data-tone="warn"] .ic { color: var(--amber); }
.check-cell[data-tone="risk"] .ic { color: var(--red); }
.check-cell[data-tone="neutral"] .ic { color: var(--mut); }
.check-cell[data-tone="info"] .ic { color: var(--blue-600); }   /* "Needs SCFHS": shown, never blocks Ready (spec 11.2) */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--c-border); }
.tabs__tab { min-height: 44px; margin-bottom: -1px; padding: 0 var(--sp-4); border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink); font-weight: 600; }
.tabs__tab:hover { background: var(--zebra); color: var(--navy); }
.tabs__tab[aria-selected="true"] { border-bottom-color: var(--blue); color: var(--navy); font-weight: 800; }
.tabs__panel { padding-top: var(--sp-4); }
.tabs--sub .tabs__tab { min-height: var(--hit); padding: 0 var(--sp-3); font-size: var(--fs-13); }   /* A4 or Phone, under each edition (spec 11.4) */
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.previews--phone { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.previews--phone .preview__img { aspect-ratio: 480 / 854; }   /* kit mobile page, render.py PAGE["mobile"] */
.preview { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent; text-align: left; }
.preview__img { width: 100%; aspect-ratio: 794 / 1123; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--white); box-shadow: var(--shadow); transition: box-shadow var(--t-fast), transform var(--t-fast); }
.preview:hover .preview__img { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.preview__label { font-size: var(--fs-12); font-weight: 600; color: var(--c-text-2); }
.lightbox__img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-xs); }
.lightbox__img--phone { display: block; width: min(100%, 420px); margin: 0 auto; }   /* a phone page, never stretched to the dialog */
.lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.downloads { display: flex; flex-direction: column; }
.download { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); color: var(--ink); text-decoration: none; }
.download:hover { background: var(--zebra); }
.download > .ic { color: var(--blue-600); }
.download__name { display: block; font-weight: 700; color: var(--navy); }
.download__meta { display: block; font-size: var(--fs-12); color: var(--c-text-2); }
.result-line { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); background: var(--zebra); font-size: var(--fs-12); color: var(--ink); overflow-wrap: anywhere; }
.approval { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* 23 utilities -------------------------------------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.divider { height: 1px; margin: var(--sp-4) 0; border: 0; background: var(--c-border); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--mut); border-bottom-width: 2px; border-radius: 6px; background: var(--white); color: var(--ink); font-size: var(--fs-12); font-weight: 700; }
.shortcuts { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: center; font-size: var(--fs-13); }

/* 24 motion ----------------------------------------------------------------------------------------------- */
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@keyframes sv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes sv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sv-flash { from { background-color: var(--blue-100); } to { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .progress--indeterminate .progress__bar { width: 100%; transform: none; }
}
/* Windows high contrast: chosen and current things keep a visible mark when colours are forced */
@media (forced-colors: active) {
  .seg__opt[aria-checked="true"], .chip-option[aria-pressed="true"], .chip-option[aria-checked="true"],
  .opt-chip[aria-checked="true"], .decide__btn[aria-pressed="true"], .stepper__link[aria-current="step"],
  .sec-nav__item[aria-current="true"], .person[aria-current="true"], .tabs__tab[aria-selected="true"] {
    outline: 2px solid CanvasText; outline-offset: -2px;
  }
}

/* 25 smaller screens (owner decision O-10, 5 Oct 2026) ---------------------------------------------------------- */
/* Laptops and tablets: the wide grids fold to one column before they squeeze. Phones (under 768 px): one column
   everywhere, every decision button in reach, and no sideways scroll at 390 px. Tables that need their columns
   scroll inside their own card, never the page. */
@media (max-width: 1100px) {
  :root { --cand-cols: 32px minmax(0, 1fr) 112px 84px 120px 112px var(--hit); }
  .cand-cols > span:nth-child(6), .cand__src { display: none; }
  .build-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .qs { grid-template-columns: minmax(0, 1fr); }
  .people { position: static; }
  .people__list { max-height: 280px; }
  .refine { grid-template-columns: minmax(0, 1fr); }
  .refine__nav { display: none; }
  .refine__panel { grid-column: 1; padding: 0 var(--sp-5) var(--sp-6); }
}
@media (max-width: 767px) {
  :root { --page-px: 16px; --topbar-h: 56px; }
  .page { padding: var(--sp-5) var(--page-px) var(--sp-10); }
  .topbar { gap: var(--sp-2); }
  .topbar__wordmark, .topbar__divider, .topbar__product, .topbar__staff-label, .topbar__ai { display: none; }
  .select--on-navy > select { min-width: 0; width: 160px; font-size: var(--fs-13); }
  .page-head, .step-head, .job-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-head__actions, .step-head__actions, .job-head__actions { flex-wrap: wrap; }
  .job-head__title, .page-head__title { font-size: 20px; }
  .search, .search > .input { width: 100%; }
  .jobs-toolbar { display: block; }
  /* Jobs list: each row becomes a small card */
  .table-wrap .table thead { display: none; }
  .table-wrap .table, .table-wrap .table tbody, .table-wrap .table tr, .table-wrap .table td { display: block; width: 100%; }
  .table-wrap .table tr { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
  .table-wrap .table td { padding: 2px 0; border: 0; }
  .table-wrap .table td.num { text-align: left; }
  .page[data-view="jobs"] .table th, .page[data-view="jobs"] .table td { width: auto; }
  /* other tables (Step 4) keep their columns and scroll inside the card */
  .card .table, .disclosure .table { display: block; overflow-x: auto; white-space: nowrap; }
  .stepper__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper__link { min-height: 48px; padding: var(--sp-2); gap: var(--sp-2); }
  .stepper__meta { white-space: normal; }
  .form-grid, .form-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .add-row { flex-wrap: wrap; }
  .add-row__select { flex: 1 1 100%; }
  .facts, .facts--wide { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: var(--sp-2); }
  .shortcuts { grid-template-columns: minmax(0, 1fr); }
  .dialog, .dialog--wide, .dialog--preview { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .dialog__head, .dialog__body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .dialog__foot { flex-wrap: wrap; padding: var(--sp-2) var(--sp-4) var(--sp-4); }
  .toasts { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); align-items: stretch; }
  .toast { max-width: none; }
  .tip { display: none; }                         /* no hover on a phone: the advert sentence is in Step 1's advert panel */
  .alert { flex-wrap: wrap; }
  .alert__body { flex: 1 1 calc(100% - 40px); }
  .alert__actions { flex: 1 1 100%; flex-wrap: wrap; padding-left: 32px; }
  /* Step 1 */
  .refine__head { flex-direction: column; align-items: flex-start; padding: var(--sp-4); }
  .refine__panel { padding: 0 var(--sp-4) var(--sp-5); }
  .refine__foot { padding: var(--sp-3) var(--sp-4); }
  .req-item, .req-item--years { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-2); }
  .req-item__main { flex: 1 1 100%; }
  .req-item > .icon-btn { margin-left: auto; }
  .req-item--grade { margin-left: 0; }
  .seg__opt { padding: 0 var(--sp-3); }
  .suggest-item { grid-template-columns: minmax(0, 1fr) auto; }
  /* Step 2: a row is three short lines: who, then where and how well, then the decision */
  .shortlist__bar { padding: var(--sp-3) var(--sp-4); }
  .cand-cols { display: none; }
  .cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3); }
  .cand__rank { flex: 0 0 24px; order: 0; }
  .cand__who { flex: 1 1 calc(100% - 24px - var(--hit) - 2 * var(--sp-2)); order: 1; }
  .cand__toggle { order: 2; }
  .cand__loc, .cand-head > .fit, .cand__musts, .cand__src { order: 3; }
  .cand__loc { margin-left: calc(24px + var(--sp-2)); max-width: 46%; }
  .cand__src { display: inline; flex: 1 1 100%; margin-left: calc(24px + var(--sp-2)); }   /* its own line, under the name */
  .cand__decision { order: 4; flex: 1 1 100%; margin-left: calc(24px + var(--sp-2)); gap: var(--sp-2); }
  .cand__decision .quick-decide { width: var(--hit); height: var(--hit); border: 1px solid var(--c-border-ui); }
  .stepper__label { overflow-wrap: anywhere; }
  /* the circle already shows the number: the label keeps it for screen readers only, so it does not wrap alone */
  .stepper__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cand-body { padding: var(--sp-2) var(--sp-3) var(--sp-4); }
  .notfit-row { grid-template-columns: minmax(0, 1fr); }
  #s2-sourcing .src-layer { grid-template-columns: minmax(0, 1fr); }
  #s2-sourcing .src-layer > .cluster { justify-content: flex-start; }
  /* Step 3 */
  .qhead { grid-template-columns: minmax(0, 1fr); padding: var(--sp-4); }
  .qhead__actions { align-items: flex-start; }
  .qcard { padding: var(--sp-4); }
  .qcard__text { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .opt-chip { min-width: 0; flex: 1 1 calc(50% - var(--sp-2)); }
  /* Step 4 */
  .previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox__nav { flex-wrap: wrap; }
}

/* 26 ship polish (fix-ui, 6 Oct 2026: design review) -------------------------------------------------------- */
/* Step 2: a rejected row steps back (its decision buttons stay at full strength, so Undo is in reach) */
.cand[data-decision="reject"] > .cand-head > :not(.cand__decision):not(.cand__toggle) { opacity: .55; }
/* Step 2: under "Best fit first" the group head already names the tier; the chip keeps its column but is not drawn
   (the closed Other area / Other professions groups mix tiers, so their rows keep the chip) */
.cand-list--grouped > .cand[data-group="best"] .cand-head > .fit,
.cand-list--grouped > .cand[data-group="good"] .cand-head > .fit,
.cand-list--grouped > .cand[data-group="possible"] .cand-head > .fit,
.cand-list--grouped > .cand[data-group="low"] .cand-head > .fit { visibility: hidden; }
/* Step 1: the section list marks a section with a must-have by a small "Must" tag (was an unexplained dot) */
.sec-nav__dot { width: auto; height: auto; padding: 0 6px; border-radius: var(--r-xs); background: var(--navy); color: var(--white); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: .2px; }
/* New job dialog: "(optional)" on the one optional field; the box keeps its top edge when the tab changes */
.field__opt { font-weight: 600; color: var(--c-text-2); }
#dlg-new-job { margin-top: 10vh; margin-bottom: auto; max-height: calc(90vh - 24px); }
/* Step 3: the salary box fits its placeholder; a note opens from a link */
.qcard .input--num { width: 176px; }
.qnote-open { align-self: flex-start; }
/* Jobs list: the city joins the employer line on a phone */
.table__city-inline { display: none; }
@media (max-width: 767px) {
  /* Step 2: the filter chips are one row that swipes sideways, not four rows above the list */
  .shortlist__bar > .cand-toolbar:first-child { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--sp-4) * -1); padding: 2px var(--sp-4); }
  .shortlist__bar > .cand-toolbar:first-child::-webkit-scrollbar { display: none; }
  .shortlist__bar > .cand-toolbar:first-child > .chip-row { flex-wrap: nowrap; }
  .shortlist__bar > .cand-toolbar:first-child .chip-option { flex: 0 0 auto; white-space: nowrap; }
  .cand-list--grouped > .cand .cand-head > .fit { display: none; }
  .cand-list--grouped > .cand[data-group="other_area"] .cand-head > .fit,
  .cand-list--grouped > .cand[data-group="other_profession"] .cand-head > .fit { display: inline-flex; }
  /* Jobs list: title; employer and city; step and status on one line; date and staff on one muted line */
  .page[data-view="jobs"] .table td:nth-child(2) { display: none; }
  .table__city-inline { display: inline; }
  .page[data-view="jobs"] .table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
  .page[data-view="jobs"] .table td { width: auto; }
  .page[data-view="jobs"] .table td:nth-child(1), .page[data-view="jobs"] .table td:nth-child(5) { flex: 1 1 100%; }
  .page[data-view="jobs"] .table td:nth-child(3) { font-size: var(--fs-13); }
  .page[data-view="jobs"] .table td.num { font-size: var(--fs-12); color: var(--c-text-2); }
  .page[data-view="jobs"] .table td.num .table__secondary { display: inline; margin-left: 4px; font-size: var(--fs-12); }
  .page[data-view="jobs"] .table td.table__empty { flex: 1 1 100%; }
  /* Step 4: "Ready to send?" becomes one card a person: the name, the Ready badge, then each check with its label */
  .s4-ready .table { display: block; overflow: visible; white-space: normal; }
  .s4-ready .table thead { display: none; }
  .s4-ready .table tbody { display: block; }
  .s4-ready .table tr { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); }
  .s4-ready .table tbody tr:last-child { border-bottom: 0; }
  .s4-ready .table td { display: block; padding: 0; border: 0; white-space: normal; }
  .s4-ready .table tbody tr:hover td { background: transparent; }
  .s4-ready .table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-12); font-weight: 600; color: var(--c-text-2); }
  .s4-ready .table td.s4-ready__name { order: -2; }
  .s4-ready .table td.s4-ready__state { order: -1; }
  #dlg-new-job { margin-top: var(--sp-3); max-height: calc(100vh - 24px); }
}
.notfit-row__reason--claim .ic { color: var(--blue-600); }   /* a profile line is information, not a risk */

/* Platform job assessment: approval is distinct from submitted answers. */
.assessment-person-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.assessment-person-head .h-section { margin: 0; }
.assessment-question--done { border: 1px solid var(--green-300); background: var(--mint); }
.assessment-person--done .person__name { color: var(--green-600); }
.assessment-choices { display: grid; gap: var(--sp-2); padding: 0; margin: 0; list-style: none; }
.assessment-choice { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-xs); background: var(--white); }
.assessment-choice--selected { border-color: var(--blue-300); background: var(--blue-100); }

.assessment-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.assessment-question-head .link-btn { flex-shrink: 0; }
.assessment-answer-option { display: flex; align-items: center; gap: var(--sp-3); width: 100%; cursor: pointer; min-height: 28px; }
.assessment-answer-option input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--blue-600); }
.assessment-question-editor { width: 100%; resize: vertical; min-height: 110px; }