/* PMS ATS — UX layer (claude-ux-rethink).
   Loaded after pms.css. New screens use the `u-` prefixed components below; the
   older stylesheet still supplies tokens and the few screens that were not redesigned. */

:root {
  --u-bg: #f7f6f4;
  --u-card: #ffffff;
  --u-ink: #1b1b22;
  --u-ink-2: #4a4a55;
  --u-ink-3: #666672;
  --u-line: #e6e3de;
  --u-line-2: #efede9;
  --u-brand: #e60000;
  --u-brand-dark: #bd0000;
  --u-brand-soft: #fdeceb;
  --u-navy: #11115f;
  --u-navy-soft: #eeeef8;
  --u-ok: #167a52;
  --u-ok-soft: #e4f4ec;
  --u-warn: #9a5b00;
  --u-warn-soft: #fff3da;
  --u-bad: #a41d3a;
  --u-bad-soft: #fdebef;
  --u-info: #1769aa;
  --u-info-soft: #e8f3fc;
  --u-radius: 14px;
  --u-radius-sm: 10px;
  --u-shadow: 0 1px 2px rgba(17, 17, 40, .04), 0 8px 24px rgba(17, 17, 40, .06);
  --u-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --u-focus-ring: 0 0 0 3px rgba(17, 17, 95, .32);

  /* Appearance tokens. Every surface, line and status ink is a token so the staff shell can
     re-theme (theme-dark.css) without touching component rules. These are the light values. */
  --u-canvas: #f6f5f3;
  --u-surface-2: #faf9f7;
  --u-surface-3: #efedf3;
  --u-line-strong: #d3d0ca;
  --u-line-violet: #cfcde0;
  --u-hover: rgba(17, 17, 40, .05);
  --u-selection: rgba(17, 17, 95, .18);
  --u-navy-faint: #f6f6fc;
  --u-violet-soft: #efeafb;
  --u-brand-faint: #fff8f6;
  --u-ok-faint: #f7fcf9;
  --u-warn-faint: #fffaf0;
  --u-accent-ink: #11115f;
  --u-brand-ink: #bd0000;
  --u-violet-ink: #5b3fb0;
  --u-ok-ink: #167a52;
  --u-warn-ink: #9a5b00;
  --u-bad-ink: #a41d3a;
  --u-info-ink: #1769aa;
  --u-ok-deep: #0f5a3c;
  --u-warn-deep: #5e3a00;
  --u-bad-deep: #7e1630;
  --u-info-deep: #0d4c7c;
  --u-ok-line: #bfe3cf;
  --u-warn-line: #f1d9a6;
  --u-bad-line: #efc3cd;
  --u-info-line: #c9e1f5;
  --ops-decision-soft: #e1f3f1;
  --ops-review-bar: #d49a2c;
  --u-font-ur: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
}

.u-public, .u-staff { font-family: var(--u-font); color: var(--u-ink); background: var(--u-bg); font-size: 16px; line-height: 1.55; }
.u-public h1, .u-public h2, .u-public h3, .u-staff h1, .u-staff h2, .u-staff h3 { font-family: var(--u-font); letter-spacing: -.02em; line-height: 1.2; color: var(--u-ink); }
.u-public p, .u-staff p { color: var(--u-ink-2); }
.u-wrap { width: min(1080px, calc(100% - 32px)); margin-inline: auto; }
[dir="rtl"], [lang="ur"] { font-family: var(--u-font-ur); line-height: 2; }

/* ---------- buttons ---------- */
.u-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid transparent; border-radius: 12px; font: 600 15px/1.2 var(--u-font); cursor: pointer; text-align: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.u-btn:disabled, .u-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.u-btn-primary { color: #fff; background: var(--u-brand); }
.u-btn-primary:hover:not(:disabled) { background: var(--u-brand-dark); }
.u-btn-secondary { color: var(--u-accent-ink); background: var(--u-card); border-color: var(--u-line-violet); }
.u-btn-secondary:hover:not(:disabled) { border-color: var(--u-navy); background: var(--u-navy-soft); }
.u-btn-ghost { color: var(--u-ink-2); background: transparent; }
.u-btn-ghost:hover:not(:disabled) { background: var(--u-hover); }
.u-btn-danger { color: var(--u-bad-ink); background: var(--u-card); border-color: var(--u-bad-line); }
.u-btn-danger:hover:not(:disabled) { background: var(--u-bad-soft); }
.u-btn-sm { min-height: 36px; padding: 6px 13px; font-size: 14px; border-radius: 10px; }
.u-btn-lg { min-height: 52px; padding: 13px 24px; font-size: 16px; }
.u-btn-block { width: 100%; }
.u-link { color: var(--u-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.u-link:hover { color: var(--u-brand-ink); }

/* ---------- alerts / pills ---------- */
.u-messages { margin-top: 14px; display: grid; gap: 8px; }
.u-alert { padding: 12px 16px; border-radius: var(--u-radius-sm); background: var(--u-info-soft); color: var(--u-info-deep); border: 1px solid var(--u-info-line); font-size: 15px; }
.u-alert-success { background: var(--u-ok-soft); color: var(--u-ok-deep); border-color: var(--u-ok-line); }
.u-alert-warning { background: var(--u-warn-soft); color: var(--u-warn-deep); border-color: var(--u-warn-line); }
.u-alert-error, .u-alert-danger { background: var(--u-bad-soft); color: var(--u-bad-deep); border-color: var(--u-bad-line); }
.u-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--u-navy-soft); color: var(--u-accent-ink); }
.u-pill-paused { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-pill-closed, .u-pill-draft { background: var(--u-surface-3); color: var(--u-ink-2); }

/* ---------- public header / footer ---------- */

/* ---------- home ---------- */

/* ---------- home: hero + campaigns (restored richness, simple flow) ---------- */


.u-campaign-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--u-navy); color: #fff; overflow: hidden; flex: none; }
.u-campaign-mark b { font-size: 20px; letter-spacing: .02em; }
.u-campaign-mark img { width: 100%; height: 100%; object-fit: contain; background: var(--u-card); padding: 6px; }
.u-campaign-mark-lg { width: 76px; height: 76px; border-radius: 18px; }
.u-empty { padding: 36px 24px; text-align: center; background: var(--u-card); border: 1px dashed var(--u-line-strong); border-radius: var(--u-radius); }
.u-empty h3 { margin: 0 0 6px; }
.u-empty p { margin: 0 0 14px; }


/* ---------- campaign / vacancy header bands ---------- */
.u-back, .u-crumbs a { color: var(--u-ink-3); font-size: 14px; font-weight: 600; }
.u-back:hover, .u-crumbs a:hover { color: var(--u-brand-ink); }
.u-crumbs { display: flex; gap: 8px; align-items: center; color: var(--u-ink-3); font-size: 14px; }



/* campaign page hero */

/* ---------- vacancy page ---------- */
.u-fact-note { color: var(--u-ink-3); font-size: 13px; font-weight: 600; }
.u-vacancy-head h1 { margin-top: 14px; }
.u-facts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.u-facts li { display: grid; gap: 2px; padding: 10px 16px; background: rgba(255, 255, 255, .8); border: 1px solid var(--u-line); border-radius: 12px; }
.u-facts small { color: var(--u-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.u-facts strong { font-size: 16px; }
.u-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; align-items: start; }
.u-prose-stack { display: grid; gap: 34px; }
.u-prose-stack h2 { margin: 0 0 10px; font-size: 22px; }
.u-prose-stack p { margin: 0 0 10px; font-size: 17px; }
.u-need-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.u-need { padding: 18px 20px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); }
.u-need h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.u-need ul, .u-tick-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.u-need li, .u-tick-list li { position: relative; padding-inline-start: 26px; font-size: 16px; color: var(--u-ink); }
.u-need li::before, .u-tick-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--u-ok-soft); color: var(--u-ok-ink); font-size: 11px; font-weight: 800; }
.u-urdu { border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); background: var(--u-card); padding: 12px 18px; }
.u-urdu summary { cursor: pointer; font-weight: 700; font-family: var(--u-font-ur); color: var(--u-accent-ink); }
.u-urdu ul { padding-inline-start: 22px; }
.u-urdu li { margin-bottom: 8px; }
.u-apply-card { position: sticky; top: 84px; padding: 24px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.u-apply-card h2 { margin: 0 0 6px; font-size: 22px; }
.u-apply-card p { margin: 0 0 16px; }
.u-fine { margin: 14px 0 0 !important; font-size: 13.5px; color: var(--u-ink-3) !important; }
.u-sticky-apply { display: none; }
.u-preview-banner { background: var(--u-navy); color: #fff; font-size: 14px; }
.u-preview-banner .u-wrap { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; }
.u-preview-banner a { color: #fff; font-weight: 700; text-decoration: underline; }

@media (max-width: 860px) {
  .u-two-col { grid-template-columns: 1fr; gap: 24px; }
  .u-apply-card { position: static; order: -1; }
  .u-vacancy-body { padding-bottom: 84px; }
  .u-sticky-apply { position: fixed; z-index: 30; inset: auto 0 0 0; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--u-line); }
  .u-apply-card form, .u-apply-card .u-fine { display: none; }
  .u-apply-card { padding: 18px 20px; }
  .u-apply-card p { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .u-campaign-mark-lg { width: 60px; height: 60px; }
}

/* =====================================================================
   Candidate application flow
   ===================================================================== */
.u-flow { padding: 18px 0 64px; }
.u-flow-wrap { max-width: 760px; }
.u-eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3) !important; }
.u-flow-head { margin: 14px 0 18px; }
.u-flow-head h1 { margin: 0; font-size: clamp(26px, 5vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.u-flow-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }

.u-progress { margin-bottom: 18px; }
.u-progress ol { display: flex; margin: 0; padding: 0; list-style: none; gap: 6px; }
.u-progress li { flex: 1 1 0; min-width: 0; }
.u-progress li > a, .u-progress-locked { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: var(--u-card); border: 1px solid var(--u-line); font-size: 14px; font-weight: 600; color: var(--u-ink-3); height: 100%; }
.u-progress li > a:hover { border-color: var(--u-line-violet); }
.u-progress b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--u-surface-3); color: var(--u-ink-3); font-size: 12px; }
.u-progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-progress li.is-done > a { color: var(--u-ink); }
.u-progress li.is-done b { background: var(--u-ok); color: #fff; }
.u-progress li.is-current > a, .u-progress li.is-current > .u-progress-locked { color: var(--u-ink); border-color: var(--u-navy); }
.u-progress li.is-current b { background: var(--u-navy); color: #fff; }
.u-progress li.is-viewing > a, .u-progress li.is-viewing > .u-progress-locked { box-shadow: 0 0 0 3px rgba(17, 17, 95, .1); }
.u-progress-mobile { display: none; margin: 10px 0 0; font-size: 14px; color: var(--u-ink-2); }

.u-card { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.u-step { padding: 26px 28px 24px; margin-bottom: 16px; }
.u-step-head h2 { margin: 0 0 6px; font-size: 24px; }
.u-step-head p { margin: 0 0 20px; }
.u-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.u-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.u-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.u-field-wide { grid-column: 1 / -1; }
.u-field > label, .u-q-label { font-weight: 600; font-size: 15px; color: var(--u-ink); }
.u-field > label small, .u-q-label small { font-weight: 500; color: var(--u-ink-3); }
.u-input { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--u-line-strong); border-radius: 12px; background: var(--u-card); color: var(--u-ink); font: 400 16px/1.3 var(--u-font); transition: border-color .15s, box-shadow .15s; }
textarea.u-input { min-height: 0; line-height: 1.5; resize: vertical; }
.u-input:focus { outline: 2px solid transparent; border-color: var(--u-navy); box-shadow: var(--u-focus-ring); }
.u-input-narrow { max-width: 260px; }
select.u-input { appearance: auto; }
.has-error > .u-input, .has-error .u-input { border-color: var(--u-bad); }
.u-hint { color: var(--u-ink-3); font-size: 14px; line-height: 1.4; }
.u-error { color: var(--u-bad-ink); font-size: 14px; font-weight: 600; }
.u-check { width: 22px; height: 22px; accent-color: var(--u-navy); flex: none; }
.u-checkline { display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.u-checkline-lg { margin: 18px 0 4px; font-size: 17px; }
.u-field-check { align-content: end; }
.u-block { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--u-line-2); }
.u-block h3 { margin: 0 0 12px; font-size: 18px; }
.u-verified { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 12px 14px; border-radius: 12px; background: var(--u-ok-soft); }
.u-verified > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--u-ok); color: #fff; font-weight: 800; flex: none; }
.u-verified div { display: grid; line-height: 1.3; }
.u-verified small { color: var(--u-ok-deep); }
.u-record-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.u-record-list li { display: grid; padding: 10px 14px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-surface-2); }
.u-record-list small { color: var(--u-ink-3); }
.u-choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.u-choice { flex: 1 1 200px; cursor: pointer; }
.u-choice input { position: absolute; opacity: 0; pointer-events: none; }
.u-choice span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 16px; border: 1.5px solid var(--u-line-strong); border-radius: 12px; font-weight: 600; text-align: center; background: var(--u-card); }
.u-choice input:checked + span { border-color: var(--u-navy); background: var(--u-navy-soft); color: var(--u-accent-ink); box-shadow: 0 0 0 3px rgba(17, 17, 95, .1); }
.u-choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(17, 17, 95, .25); }

/* questions + confirmations */
.u-questions { display: grid; gap: 22px; }
.u-q { display: grid; gap: 7px; }
.u-q[hidden] { display: none; }
.u-q-ur { margin: 0; color: var(--u-ink-2); }
.u-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.u-yesno label { cursor: pointer; }
.u-yesno input { position: absolute; opacity: 0; pointer-events: none; }
.u-yesno span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px solid var(--u-line-strong); border-radius: 12px; font-weight: 700; background: var(--u-card); font-size: 16px; }
.u-yesno i { font-style: normal; font-weight: 500; color: var(--u-ink-3); font-size: 14px; }
.u-yesno label:has(input[value="YES"]:checked) span, .u-yesno label:has(input[value="NO"]:checked) span { color: #fff; }
.u-yesno label:has(input[value="YES"]:checked) span { background: var(--u-ok); border-color: var(--u-ok); }
.u-yesno label:has(input[value="NO"]:checked) span { background: var(--u-ink-2); border-color: var(--u-ink-2); }
.u-yesno label:has(input:checked) i { color: rgba(255,255,255,.85); }
.u-yesno input:focus-visible + span { box-shadow: 0 0 0 4px rgba(17, 17, 95, .25); }
.u-options { display: grid; gap: 8px; }
.u-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--u-line-strong); border-radius: 12px; background: var(--u-card); cursor: pointer; font-weight: 500; }
.u-option input { width: 20px; height: 20px; accent-color: var(--u-navy); }
.u-option:has(input:checked) { border-color: var(--u-navy); background: var(--u-navy-soft); }
.u-confirm { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--u-line-2); display: grid; gap: 16px; }
.u-confirm h3 { margin: 0; font-size: 20px; }
.u-confirm > .u-hint { margin: -10px 0 0; }
.u-confirm-item { margin: 0; padding: 16px 18px; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface-2); display: grid; gap: 10px; min-width: 0; }
.u-confirm-item legend { padding: 0; font-weight: 600; font-size: 16px; line-height: 1.4; float: left; width: 100%; }
.u-confirm-item legend + * { clear: both; }
.u-confirm-ur { margin: 0; font-size: 15px; color: var(--u-ink-2); }

.u-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--u-line-2); }
.u-actions > .u-save { margin-inline-end: auto; font-size: 14px; color: var(--u-ink-3); }
.u-actions > .u-save.save-error { color: var(--u-bad-ink); font-weight: 600; }
.u-actions > .u-btn-ghost:first-child:not(:last-child) { margin-inline-end: auto; }
.u-btn.is-disabled { opacity: .55; pointer-events: none; }

/* blocked / sent / icons */
.u-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; font-size: 22px; font-weight: 800; }
.u-icon-bad { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-icon-ok { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-need-list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.u-need-list li { display: grid; gap: 4px; padding: 12px 16px; border-radius: 12px; background: var(--u-warn-soft); color: var(--u-warn-deep); font-weight: 600; }
.u-need-list small { font-weight: 500; }
.u-reassure { padding: 12px 16px; border-radius: 12px; background: var(--u-info-soft); color: #0d4c7c !important; }
.u-sent { text-align: center; }
.u-sent .u-icon { width: 56px; height: 56px; font-size: 28px; }
.u-sent h2 { margin: 0 0 8px; }

/* documents */
.u-docs { display: grid; gap: 14px; }
.u-doc { padding: 18px; border: 1.5px solid var(--u-line); border-radius: 14px; display: grid; gap: 10px; }
.u-doc.is-done { border-color: var(--u-ok-line); background: var(--u-ok-faint); }
.u-doc.has-error { border-color: var(--u-bad); }
.u-doc header { display: flex; align-items: center; gap: 12px; }
.u-doc header h3 { margin: 0 0 2px; font-size: 17px; }
.u-doc-state { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--u-surface-3); font-weight: 800; color: var(--u-ink-3); flex: none; }
.is-done .u-doc-state { background: var(--u-ok); color: #fff; }
.u-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--u-surface-3); color: var(--u-ink-3); font-size: 12px; font-weight: 700; }
.u-tag-req { background: var(--u-brand-soft); color: var(--u-brand-ink); }
.u-file-ok { display: grid; padding: 10px 14px; border-radius: 10px; background: var(--u-card); border: 1px solid var(--u-ok-line); word-break: break-all; }
.u-file-ok small { color: var(--u-ink-3); }
.u-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.u-picked { flex: 1 1 100%; order: 3; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--u-card); border: 1.5px solid var(--u-ok); min-width: 0; }
.u-picked[hidden] { display: none; }
.u-picked-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--u-ok); color: #fff; font-size: 13px; font-weight: 800; }
.u-picked-text { display: grid; min-width: 0; }
.u-picked-name { overflow-wrap: anywhere; word-break: break-word; }
.u-picked-text small { color: var(--u-ink-3); }
.u-upload.is-picked [data-pick-submit] { box-shadow: 0 0 0 3px var(--u-brand-soft); }
@media (max-width: 560px) { .u-upload.is-picked [data-pick-submit] { flex: 1 1 100%; min-height: 48px; } }
.u-filebtn { position: relative; overflow: hidden; }
.u-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.u-group-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--u-ink-3); }
.u-group-title:first-of-type { margin-top: 4px; }
.u-count { padding: 2px 10px; border-radius: 999px; background: var(--u-line-2); color: var(--u-ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.u-count.is-open { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-reuse { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--u-navy-soft); }
.u-reuse label { font-size: 14px; font-weight: 600; color: var(--u-accent-ink); }
.u-reuse > div { display: flex; flex-wrap: wrap; gap: 8px; }
.u-reuse select { flex: 1 1 220px; }
.u-or { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--u-ink-3); }
.u-or::before, .u-or::after { content: ""; flex: 1; height: 1px; background: var(--u-line); }
.u-saved { font-size: 15px; }
.u-saved summary { cursor: pointer; color: var(--u-accent-ink); font-weight: 600; }
.u-saved form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.u-saved select { flex: 1 1 220px; }
.u-link-danger { color: var(--u-bad-ink); }

/* review */
.u-todo { margin-bottom: 22px; padding: 16px 18px; border-radius: 12px; background: var(--u-warn-soft); border: 1px solid var(--u-warn-line); display: grid; gap: 8px; }
.u-todo h3 { margin: 0 0 4px; font-size: 17px; color: var(--u-warn-deep); }
.u-todo-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--u-card); color: var(--u-ink); font-weight: 500; }
.u-todo-item b { color: var(--u-brand-ink); white-space: nowrap; }
.u-review { display: grid; gap: 22px; }
.u-review section > header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.u-review h3 { margin: 0; font-size: 18px; }
.u-review h4 { margin: 16px 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.u-review dl { margin: 0; display: grid; }
.u-review dl > div { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--u-line-2); }
.u-review dt { color: var(--u-ink-3); font-size: 15px; }
.u-review dd { margin: 0; font-weight: 500; word-break: break-word; }
.u-review em { color: var(--u-bad-ink); font-style: normal; }
.u-confirmed { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.u-confirmed li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.u-confirmed li span { flex: none; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.u-confirmed .is-yes { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-confirmed .is-no { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-declaration h2 { margin: 0 0 12px; font-size: 22px; }
.u-declaration-text { padding: 14px 18px; border-radius: 12px; background: var(--u-surface-3); border-inline-start: 4px solid var(--u-navy); }
.u-declaration-text p { margin: 0 0 8px; }
.u-declaration-text p:last-child { margin: 0; }

/* list */
.u-app-list { display: grid; gap: 12px; }
.u-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); }
.u-app h2 { margin: 0 0 6px; font-size: 21px; }
.u-app-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.u-discard-row { margin: 20px 0 0; text-align: center; font-size: 14px; }
.u-app-meta { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--u-ink-3); }
.u-pill-ok { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-account-links { margin-top: 28px; display: flex; gap: 8px; align-items: center; color: var(--u-ink-3); }
.u-inline { display: inline; margin: 0; }

@media (max-width: 640px) {
  .u-flow { padding-top: 10px; }
  .u-progress ol { display: none; }
  .u-progress-mobile { display: block; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--u-card); border: 1px solid var(--u-line); }
  .u-step { padding: 20px 18px 18px; }
  .u-grid { grid-template-columns: 1fr; }
  .u-actions { position: sticky; bottom: 0; margin-inline: -18px; margin-bottom: -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--u-line); border-radius: 0 0 var(--u-radius) var(--u-radius); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 5; }
  .u-actions .u-btn { width: 100%; min-height: 44px; }
  .u-actions .u-btn-primary { grid-column: 1 / -1; grid-row: 1; min-height: 52px; }
  .u-actions > .u-save { display: none; }
  .u-actions > .u-btn-ghost:first-child:not(:last-child) { margin-inline-end: 0; }
  .u-actions > .u-btn-ghost { font-size: 14px; }
  .u-progress-mobile { background: linear-gradient(90deg, rgba(17,17,95,.14) var(--p, 0%), transparent var(--p, 0%)) bottom / 100% 4px no-repeat, var(--u-card); }
  .u-review dl > div { grid-template-columns: 1fr; gap: 2px; }
  .u-yesno { max-width: none; }
}

/* auth */
.u-auth-wrap { max-width: 520px; }
.u-auth h1 { margin: 0 0 8px; font-size: 28px; }
.u-auth > p { margin: 0 0 22px; }
.u-grid-1 { grid-template-columns: 1fr; }
.u-mt { margin-top: 20px; }
.u-auth .u-fine { margin-top: 14px !important; }
.u-auth-alt { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.u-auth-alt form { margin: 0; }
.u-actions-center { justify-content: center; border-top: 0; }
.u-input.otp-input { font-size: 28px; letter-spacing: .4em; text-align: center; min-height: 60px; }

/* legacy form widgets inside the new shell */
.u-public .form-control { width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--u-line-strong); border-radius: 12px; background: var(--u-card); color: var(--u-ink); font: 400 16px/1.3 var(--u-font); }
.u-public .form-control:focus { outline: 2px solid transparent; border-color: var(--u-navy); box-shadow: var(--u-focus-ring); }
.u-public textarea.form-control { line-height: 1.5; }

/* =====================================================================
   Staff workspace
   ===================================================================== */
.u-staff { background: var(--u-canvas); font-size: 15px; }
.s-top { position: sticky; top: 0; z-index: 40; background: var(--u-card); border-bottom: 1px solid var(--u-line); }
.s-top-row { display: flex; align-items: center; gap: 28px; width: min(1320px, calc(100% - 32px)); margin: 0 auto; min-height: 58px; }
.s-brand { display: inline-flex; align-items: center; gap: 10px; }
.s-brand img { width: 64px; height: auto; }
.s-brand span { padding-inline-start: 10px; border-inline-start: 1px solid var(--u-line); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-accent-ink); }
.s-nav { display: flex; gap: 4px; flex: 1; align-self: stretch; }
.s-nav a { display: flex; align-items: center; padding: 0 14px; font-weight: 600; color: var(--u-ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.s-nav a:hover { color: var(--u-ink); }
.s-nav a.is-on { color: var(--u-ink); border-bottom-color: var(--u-brand); }
.s-top-right { display: flex; align-items: center; gap: 12px; }
.s-top-right form { margin: 0; }
.s-icon-link { padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--u-ink-3); }
.s-icon-link:hover, .s-icon-link.is-on { background: var(--u-hover); color: var(--u-ink); }
.s-user b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--u-navy); color: #fff; font-size: 12px; }
.s-signout { background: none; border: 0; cursor: pointer; font: 600 14px var(--u-font); color: var(--u-ink-3); }
.s-signout:hover { color: var(--u-brand-ink); }
.s-main { width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 64px; }
.s-messages { display: grid; gap: 8px; margin-bottom: 16px; }
.s-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.s-head h1 { margin: 0; font-size: 28px; }
.s-head p { margin: 2px 0 0; }
.s-head-actions { display: flex; gap: 8px; }
.s-card { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); margin-bottom: 16px; overflow: hidden; }
.s-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--u-line-2); }
.s-card-head h2 { margin: 0; font-size: 18px; }
.s-pad { padding: 20px; }
.s-empty { padding: 40px 20px; text-align: center; color: var(--u-ink-3); }
.s-empty strong { display: block; color: var(--u-ink); font-size: 17px; }
.s-empty p { margin: 4px 0 14px; }
.s-note { padding: 12px 20px; background: var(--u-info-soft); color: var(--u-info-deep); font-size: 14px; }
.s-muted { color: var(--u-ink-3); }
.s-ok { color: var(--u-ok-ink); font-weight: 700; }
.s-warn { color: var(--u-warn-ink); font-weight: 700; }
.s-num { text-align: end; font-variant-numeric: tabular-nums; }
.s-right { text-align: end; }
.s-sub { display: block; color: var(--u-ink-3); font-size: 13px; line-height: 1.35; }
.s-strong { font-weight: 700; color: var(--u-ink); }
a.s-strong:hover { color: var(--u-brand-ink); }
.s-count { display: inline-block; min-width: 28px; padding: 1px 9px; border-radius: 999px; background: var(--u-brand); color: #fff; font-weight: 800; text-align: center; }

.s-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.s-kpi { display: grid; gap: 2px; padding: 18px 20px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); transition: border-color .15s; }
.s-kpi:hover { border-color: var(--u-line-violet); }
.s-kpi strong { font-size: 36px; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s-kpi span { font-weight: 700; }
.s-kpi small { color: var(--u-ink-3); }
.s-kpi.is-primary { background: var(--u-navy); border-color: var(--u-navy); }
.s-kpi.is-primary strong, .s-kpi.is-primary span { color: #fff; }
.s-kpi.is-primary small { color: rgba(255, 255, 255, .72); }

.s-table-wrap { overflow-x: auto; }
.s-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.s-table th { padding: 10px 16px; text-align: start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); background: var(--u-surface-2); border-bottom: 1px solid var(--u-line); white-space: nowrap; }
.s-table th.s-num { text-align: end; }
.s-table td { padding: 12px 16px; border-bottom: 1px solid var(--u-line-2); vertical-align: top; }
.s-table tbody tr:last-child td { border-bottom: 0; }
.s-table tbody tr:hover { background: var(--u-surface-2); }
.s-table tr.is-selected { background: var(--u-surface-3); }
.s-check { width: 36px; padding-inline-end: 0 !important; }
.s-check input { width: 17px; height: 17px; accent-color: var(--u-navy); }
.s-applicants td:nth-child(2) { min-width: 200px; }

.s-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--u-surface-3); color: var(--u-ink-2); white-space: nowrap; }
.s-status-open, .s-status-shortlisted { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-status-submitted { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-status-screening { background: var(--u-navy-soft); color: var(--u-accent-ink); }
.s-status-on_hold, .s-status-paused { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-status-rejected, .s-status-closed { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.s-status-withdrawn { background: var(--u-line-2); color: var(--u-ink-2); }
.s-status-interview, .s-status-iv-scheduled { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-status-selected, .s-status-iv-completed { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-status-iv-cancelled { background: var(--u-line-2); color: var(--u-ink-2); }
/* Final outcome chips (separate from the stage chip) */
.s-status-outcome-joined { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-status-outcome-candidate_declined, .s-status-outcome-did_not_report { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-status-outcome-failed_final_verification, .s-status-outcome-client_declined { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.s-status-outcome-other { background: var(--u-line-2); color: var(--u-ink-2); }
/* Offer status chips (PH-10 C2) */
.s-status-offer-draft, .s-status-offer-cancelled { background: var(--u-line-2); color: var(--u-ink-2); }
.s-status-offer-issued { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-status-offer-accepted { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-status-offer-declined { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-offers { display: grid; gap: 10px; }
.s-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--u-line-2); border-radius: 10px; }
.s-offer.is-cancelled, .s-offer.is-declined { opacity: .72; }
.s-offer-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.s-offer-side { display: flex; align-items: center; gap: 8px; }
.s-offer-letter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-top: 1px solid var(--u-line-2); }
.s-outcome-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.s-status-draft { background: var(--u-surface-3); color: var(--u-ink-2); }
.s-flag { padding: 1px 8px; border-radius: 6px; background: var(--u-warn-soft); color: var(--u-warn-ink); font-size: 12px; font-weight: 700; vertical-align: middle; }
.s-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--u-line-2); color: var(--u-ink-3); font-size: 14px; }

/* vacancy header + tabs */
.s-vhead { margin-bottom: 18px; }
.s-crumb { font-size: 14px; font-weight: 600; color: var(--u-ink-3); }
.s-crumb:hover { color: var(--u-brand-ink); }
.s-vtitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.s-vtitle h1 { margin: 0; font-size: 28px; }
.s-vsub { margin: 2px 0 14px; color: var(--u-ink-3) !important; }
.s-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.s-tabs a { padding: 8px 16px; border-radius: 10px; font-weight: 600; color: var(--u-ink-2); background: var(--u-card); border: 1px solid var(--u-line); }
.s-tabs a b { margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; background: var(--u-surface-3); font-size: 12.5px; }
.s-tabs a:hover { border-color: var(--u-line-violet); }
.s-tabs a.is-on { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }
.s-tabs a.is-on b { background: rgba(255, 255, 255, .22); }
.s-tabs a.s-tab-quiet { background: transparent; border-color: transparent; color: var(--u-ink-3); }
.s-tabs a.s-tab-quiet.is-on { background: var(--u-card); border-color: var(--u-navy); color: var(--u-accent-ink); }
.s-tabs a.s-tab-quiet.is-on b { background: var(--u-navy-soft); }
.s-tabs-line { gap: 0; border-bottom: 1px solid var(--u-line); margin-bottom: 18px; }
.s-tabs-line a { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; margin-bottom: -1px; padding: 10px 18px; }
.s-tabs-line a.is-on { background: none; color: var(--u-ink); border-bottom-color: var(--u-brand); }

/* applicant toolbar */
.s-toolbar-card { overflow: visible; }
.s-filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.s-stage-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.s-stage-pills a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--u-line); font-size: 14px; font-weight: 600; color: var(--u-ink-2); background: var(--u-card); }
.s-stage-pills a b { color: var(--u-ink-3); font-weight: 600; margin-inline-start: 2px; }
.s-stage-pills a:hover { border-color: var(--u-line-violet); }
.s-stage-pills a.is-on { background: var(--u-navy-soft); border-color: var(--u-navy); color: var(--u-accent-ink); }
.s-search { display: flex; gap: 8px; margin: 0; }
.s-search input { min-width: 220px; padding: 7px 12px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 15px var(--u-font); }
.s-search input:focus { outline: 2px solid transparent; border-color: var(--u-navy); box-shadow: var(--u-focus-ring); }
.s-more { border-top: 1px solid var(--u-line-2); }
.s-more > summary { padding: 10px 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--u-ink-2); list-style: none; }
.s-more > summary::before { content: "+ "; font-weight: 800; }
.s-more[open] > summary::before { content: "– "; font-weight: 800; }
.s-more summary b { margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: var(--u-brand); color: #fff; font-size: 12px; }
.s-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 4px 16px 16px; }
.s-filter-grid label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--u-ink-3); }
.s-filter-grid input, .s-filter-grid select { padding: 7px 10px; border: 1.5px solid var(--u-line-strong); border-radius: 8px; font: 14px var(--u-font); background: var(--u-card); }
.s-filter-actions { display: flex; align-items: flex-end; gap: 8px; }
.s-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 10px 16px; background: var(--u-navy-soft); border-bottom: 1px solid var(--u-line-violet); }
.s-bulk.is-idle { background: var(--u-surface-2); border-bottom-color: var(--u-line-2); }
.s-bulk.is-idle strong { color: var(--u-ink-3); font-weight: 600; }
.s-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.s-reason { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.s-reason[hidden] { display: none; }
.s-reason input { padding: 7px 10px; border: 1.5px solid var(--u-bad); border-radius: 8px; font: 14px var(--u-font); min-width: 220px; }
/* REASON-01 picker: catalogue dropdown + on-demand Other text. */
.s-reason-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.s-reason-pick select { min-width: 220px; }
.s-reason-pick [hidden], .s-field[hidden], .s-decide-form [hidden], .s-inline-form [hidden] { display: none !important; }
.s-reason .s-reason-pick select, .s-reason .s-reason-pick input { padding: 7px 10px; border: 1.5px solid var(--u-bad); border-radius: 8px; font: 14px var(--u-font); }

@media (max-width: 760px) {
  .s-top-row { gap: 12px; flex-wrap: wrap; padding: 8px 0 0; }
  .s-nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .s-top-right { margin-inline-start: auto; }
  .s-brand span { display: none; }
  .s-head h1, .s-vtitle h1 { font-size: 24px; }
  .s-search input { min-width: 0; flex: 1; }
  .s-search { flex: 1 1 100%; }
}

/* applicant detail */
.s-decide { padding: 12px 18px; }
.s-decide-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; }
.s-decide-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.s-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.s-detail-main, .s-detail-side { min-width: 0; }
.s-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0; }
.s-facts > div { padding: 14px 20px; border-inline-end: 1px solid var(--u-line-2); border-bottom: 1px solid var(--u-line-2); }
.s-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); margin-bottom: 2px; }
.s-facts dd { margin: 0; font-weight: 600; }
.s-list { margin: 0; }
.s-list > div { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--u-line-2); }
.s-list > div:last-child { border-bottom: 0; }
.s-list dt { color: var(--u-ink-3); font-size: 14px; }
.s-list dd { margin: 0; font-weight: 500; word-break: break-word; }
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 20px; }
.s-h3 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.s-item { margin: 0 0 12px; display: grid; }
.s-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--u-line-2); flex-wrap: wrap; }
.s-doc-row:last-child { border-bottom: 0; }
.s-small { font-size: 13px; }
.s-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.s-fold > summary h2 { margin: 0; font-size: 18px; }
.s-fold[open] > summary { border-bottom: 1px solid var(--u-line-2); }
.s-checks { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.s-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.s-checks li > span { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 800; }
.s-checks .is-pass > span { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-checks .is-fail > span { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-notes { display: grid; gap: 12px; }
.s-notes article { padding: 10px 12px; border-radius: 10px; background: var(--u-surface-2); }
.s-notes article p { margin: 0 0 4px; color: var(--u-ink); }
.s-notes article small { color: var(--u-ink-3); }
.s-notes form { display: grid; gap: 8px; justify-items: start; }
.s-notes textarea { min-height: 0; }
.s-timeline { margin: 0; padding: 14px 20px; list-style: none; display: grid; gap: 14px; }
.s-timeline li { display: flex; gap: 12px; }
.s-timeline li > b { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--u-navy); flex: none; }
.s-note-card { border-radius: var(--u-radius-sm); margin-bottom: 16px; }
@media (max-width: 980px) { .s-detail-grid { grid-template-columns: 1fr; } .s-two { grid-template-columns: 1fr; } .s-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* forms (staff) */
.s-form { display: block; }
.s-form-narrow { max-width: 640px; }
.s-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 20px; }
.s-form-grid.s-pad { padding: 20px; }
.s-form-1 { grid-template-columns: 1fr; }
.s-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.s-field-wide { grid-column: 1 / -1; }
.s-field > label { font-weight: 600; font-size: 14.5px; }
.s-field input:not([type=checkbox]):not([type=file]), .s-field select, .s-field textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 15px/1.4 var(--u-font); background: var(--u-card); color: var(--u-ink); }
.s-field input:focus, .s-field select:focus, .s-field textarea:focus { outline: 2px solid transparent; border-color: var(--u-navy); box-shadow: var(--u-focus-ring); }
.s-field.has-error input, .s-field.has-error select, .s-field.has-error textarea { border-color: var(--u-bad); }
.s-field .form-control { min-height: 0; }
.s-field-check { align-content: end; padding-bottom: 6px; }
.s-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 0; background: linear-gradient(0deg, var(--u-surface-3) 70%, rgba(246, 245, 243, 0)); margin-top: 4px; }
.s-lifecycle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 18px; border-radius: var(--u-radius); background: var(--u-card); border: 1px solid var(--u-line); }
.s-lifecycle-text { font-size: 15px; color: var(--u-ink-2); }
.s-lifecycle-text strong { color: var(--u-ink); }
.s-lifecycle form { margin: 0; }
.s-advanced { margin-top: 8px; }
.s-advanced > summary { cursor: pointer; padding: 10px 4px; font-weight: 700; color: var(--u-ink-3); list-style: none; }
.s-advanced > summary::before { content: "+ "; }
.s-advanced[open] > summary::before { content: "– "; }
.s-flush { margin: 2px 0 0 !important; }
.s-rows { margin: 0; padding: 0; list-style: none; }
.s-rows li { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--u-line-2); }
.s-rows li:last-child { border-bottom: 0; }
.s-rows-main { flex: 1; min-width: 0; display: grid; }
.s-mark { width: 40px; height: 40px; border-radius: 10px; }
.s-mark b { font-size: 12px; }
.s-logo-preview { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--u-line); border-radius: 12px; }
.s-logo-preview img { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 760px) { .s-form-grid { grid-template-columns: 1fr; } }

/* application setup */
.s-publish-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.s-publish-text { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s-publish-state form { margin: 0; }
.s-setup > summary { align-items: center; justify-content: flex-start; gap: 14px; }
.s-setup > summary > div { flex: 1; min-width: 0; }
.s-setup > summary h2 { margin: 0; }
.s-step-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--u-navy); color: #fff; font-weight: 800; flex: none; }
.s-count-chip { padding: 3px 12px; border-radius: 999px; background: var(--u-surface-3); color: var(--u-ink-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.s-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 8px; }
.s-level { text-align: start; padding: 14px 16px; border: 1.5px solid var(--u-line); border-radius: 12px; background: var(--u-card); cursor: pointer; display: grid; gap: 4px; font: inherit; color: var(--u-ink); }
.s-level small { color: var(--u-ink-3); font-size: 13px; line-height: 1.4; }
.s-level:hover { border-color: var(--u-line-violet); }
.s-level.is-on { border-color: var(--u-navy); background: var(--u-navy-soft); box-shadow: 0 0 0 3px rgba(17, 17, 95, .08); }
.s-hint-line { font-size: 14px; margin: 4px 0 8px; }
.s-sub-fold { margin-top: 10px; }
.s-sub-fold > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--u-accent-ink); padding: 6px 0; }
.s-pr-group { margin: 14px 0; }
.s-pr-group > strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); margin-bottom: 4px; }
.s-pr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--u-line-2); flex-wrap: wrap; }
.s-pr-row .requirement-choice ul { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.s-pr-row .requirement-choice label { display: flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.s-h3-gap { margin-top: 28px; }
.s-qlist { margin: 0 0 10px; padding: 0; list-style: none; border: 1px solid var(--u-line); border-radius: 12px; }
.s-qlist:empty { display: none; }
.s-qlist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--u-line-2); }
.s-qlist li:last-child { border-bottom: 0; }
.s-qmain { min-width: 0; display: grid; }
.s-qactions { display: flex; align-items: center; gap: 10px; flex: none; }
.s-qactions form { margin: 0; }
.s-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-card); cursor: pointer; color: var(--u-ink-2); font: 600 14px var(--u-font); }
.s-iconbtn:hover { border-color: var(--u-line-violet); background: var(--u-surface-2); }
.s-section-name { margin: 14px 0 6px; font-weight: 700; font-size: 14px; color: var(--u-ink-2); }
.s-inline-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.s-inline-actions.s-start { justify-content: flex-start; gap: 18px; }
.s-plain { margin: 0; padding-inline-start: 18px; }
.s-publish-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; flex-wrap: wrap; border-color: var(--u-line-violet); background: var(--u-navy-soft); }
.s-publish-card h2 { margin: 0 0 4px; font-size: 20px; }
.s-publish-card p { margin: 0; max-width: 560px; }
.s-publish-card form { margin: 0; }
.s-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.s-big { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -.03em; color: var(--u-ink) !important; }
.s-crit { padding: 16px; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface-2); display: grid; gap: 12px; margin-bottom: 10px; }
.s-crit-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s-crit-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--u-surface-3); font-weight: 800; font-size: 13px; }
.s-crit-type { flex: 1; min-width: 200px; }
.s-crit-type select { width: 100%; padding: 7px 10px; border: 1.5px solid var(--u-line-strong); border-radius: 8px; font: 14px var(--u-font); background: var(--u-card); }
.s-crit-tools { display: flex; align-items: center; gap: 8px; }
.s-crit-remove { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--u-bad-ink); cursor: pointer; }
.s-crit textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 15px/1.4 var(--u-font); background: var(--u-card); }
.s-crit .s-field { gap: 4px; }
.s-crit .s-field select, .s-crit .s-field textarea { background: var(--u-card); }
.s-crit:has(input[type=checkbox]:checked) { opacity: .5; }
.s-small { font-size: 13px; }

/* candidate account bits */
.u-subnav { display: flex; gap: 6px; margin-bottom: 16px; }
.u-subnav a { padding: 8px 16px; border-radius: 999px; background: var(--u-card); border: 1px solid var(--u-line); font-weight: 600; color: var(--u-ink-2); }
.u-subnav a.is-on { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }
.u-plain-list { margin: 6px 0 0; padding-inline-start: 20px; }
.u-linkrows { display: grid; }
.u-linkrows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--u-line-2); }
.u-linkrows a:hover strong { color: var(--u-brand-ink); }
.u-linkrows span { display: grid; }
.u-linkrows small { color: var(--u-ink-3); }
.u-linkrows i { font-style: normal; color: var(--u-ink-3); }
.u-field .form-control, .u-field select, .u-field textarea, .u-field input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.u-ready-links { display: flex; gap: 18px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

.s-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px 12px; font-size: 14px; }
.s-active > span:first-child { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.filter-chip { padding: 2px 10px; border-radius: 999px; background: var(--u-navy-soft); color: var(--u-accent-ink); }
.filter-chip b { font-weight: 700; }

/* =====================================================================
   Refinement pass — staff polish (keeps the simplified IA; adds finish)
   ===================================================================== */
.u-staff :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--u-navy); outline-offset: 2px; }
.u-staff .s-card { transition: border-color .15s; }
.s-card-head > div > h2 { margin: 0; }
.s-card-sub { margin: 1px 0 0; font-size: 13px; color: var(--u-ink-3) !important; }
.s-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--u-line-2); color: var(--u-ink-3); font-size: 20px; }
.s-empty-slim { padding: 20px; }
.s-chip { padding: 3px 12px; border-radius: 999px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.s-bad { color: var(--u-bad-ink); font-weight: 700; }
.s-late { color: var(--u-warn-ink); font-weight: 700; }
.s-tag { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 999px; background: var(--u-surface-3); color: var(--u-ink-3); font-size: 11.5px; font-weight: 700; vertical-align: middle; }
.s-tag-req { background: var(--u-navy-soft); color: var(--u-accent-ink); }
.s-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--u-surface-3); color: var(--u-ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-pill.is-ok { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-pill.is-warn { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* people */
.s-avatar { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.s-avatar-lg { width: 46px; height: 46px; font-size: 15px; }
.s-person { display: flex; align-items: center; gap: 12px; }
.s-person > div { min-width: 0; }

/* clickable rows */
.s-row[data-href] { cursor: pointer; }
.s-table tbody tr.s-row:hover { background: var(--u-surface-3); }
.s-table tbody tr.s-row:hover .s-rowlink { color: var(--u-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.s-table tbody tr.is-new > td:first-child { box-shadow: inset 3px 0 0 var(--u-info); }
.s-table tr.is-selected { background: var(--u-navy-soft); }
.s-table tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--u-navy); }
.s-open-col { width: 40px; text-align: end; padding-inline-start: 0 !important; }
.s-open { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--u-ink-3); font-size: 22px; line-height: 1; }
.s-row:hover .s-open { background: var(--u-navy); color: #fff; }
.s-applicants td:nth-child(2) { min-width: 250px; }
.s-applicants td:nth-child(4) { min-width: 200px; }
.s-table-roomy td { padding-top: 14px; padding-bottom: 14px; }

/* bulk bar: quiet until something is ticked */
.s-bulk .s-bulk-count, .s-bulk .s-bulk-actions { display: none; }
.s-bulk:not(.is-idle) .s-bulk-count, .s-bulk:not(.is-idle) .s-bulk-actions { display: flex; }
.s-bulk:not(.is-idle) .s-bulk-hint { display: none; }
.s-bulk-hint { font-size: 13.5px; color: var(--u-ink-3); }
.s-bulk-count { font-weight: 700; color: var(--u-accent-ink); }
.s-bulk:not(.is-idle) { position: relative; box-shadow: 0 1px 0 #dcdcf0; }

/* status pills with a dot */
.s-stage-pills a { display: inline-flex; align-items: center; gap: 6px; }
.s-stage-pills a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c9c6d4; }
.s-stage-pills a.s-pill-all::before { display: none; }
.s-stage-pills a.s-pill-submitted::before { background: var(--u-info); }
.s-stage-pills a.s-pill-screening::before { background: var(--u-navy); }
.s-stage-pills a.s-pill-shortlisted::before { background: var(--u-ok); }
.s-stage-pills a.s-pill-interview::before { background: var(--u-info); }
.s-stage-pills a.s-pill-selected::before { background: var(--u-ok); }
.s-stage-pills a.s-pill-on_hold::before { background: #d49a2c; }
.s-stage-pills a.s-pill-rejected::before { background: var(--u-bad); }
.s-status { position: relative; padding-inline-start: 20px; }
.s-status::before { content: ""; position: absolute; inset-inline-start: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; opacity: .75; }

/* overview */
.s-two-col { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.s-feed { margin: 0; padding: 4px 0; list-style: none; }
.s-feed a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; }
.s-feed a:hover { background: var(--u-surface-2); }
.s-feed-main { flex: 1; min-width: 0; display: grid; }
.s-feed-main strong { color: var(--u-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-feed-main small { color: var(--u-ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-feed-when { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12.5px; color: var(--u-ink-3); }
.s-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--u-info); }
.s-foot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--u-line-2); font-size: 13px; color: var(--u-ink-3) !important; }
.s-actions-list { margin: 0; padding: 0; list-style: none; }
.s-actions-list li { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--u-line-2); }
.s-actions-list li:last-child { border-bottom: 0; }
.s-actions-list li > div { flex: 1; min-width: 0; }
.s-actions-list .s-status { min-width: 70px; text-align: start; }
.s-kpi { position: relative; }
.s-kpi::after { content: "›"; position: absolute; inset-inline-end: 16px; top: 14px; font-size: 20px; color: var(--u-ink-3); opacity: 0; transition: opacity .15s, transform .15s; }
.s-kpi:hover::after { opacity: 1; transform: translateX(2px); }
.s-kpi.is-primary::after { color: #fff; }
@media (max-width: 980px) { .s-two-col { grid-template-columns: 1fr; } }

/* application dossier */
.s-vtitle .s-avatar-lg { margin-inline-end: -2px; }
.s-decide { position: sticky; top: 58px; z-index: 20; }
.s-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius); box-shadow: var(--u-shadow); overflow: hidden; }
.s-strip > div { display: grid; gap: 1px; padding: 14px 20px; border-inline-end: 1px solid var(--u-line-2); border-top: 3px solid transparent; }
.s-strip > div:last-child { border-inline-end: 0; }
.s-strip > div.is-ok { border-top-color: var(--u-ok-line); }
.s-strip > div.is-warn { border-top-color: var(--u-warn-line); background: var(--u-warn-faint); }
.s-strip span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.s-strip strong { font-size: 17px; letter-spacing: -.01em; }
.s-strip small { color: var(--u-ink-3); font-size: 13px; }
.s-flags { display: grid; gap: 6px; margin-bottom: 14px; }
.s-flags p { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 14px; border-radius: 10px; font-size: 14.5px; }
.s-flags p b { flex: none; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.s-flags .is-warn { background: var(--u-warn-soft); color: #5e3a00 !important; }
.s-flags .is-warn b { background: #f5d68e; color: var(--u-warn-deep); }
.s-flags .is-info { background: var(--u-surface-3); color: var(--u-ink-2) !important; }
.s-flags .is-info b { background: var(--u-navy-soft); color: var(--u-ink-2); }
.s-jump { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; scrollbar-width: none; }
.s-jump::-webkit-scrollbar { display: none; }
.s-jump a { flex: none; padding: 5px 13px; border-radius: 999px; background: var(--u-card); border: 1px solid var(--u-line); font-size: 13.5px; font-weight: 600; color: var(--u-ink-2); }
.s-jump a:hover { border-color: var(--u-navy); color: var(--u-accent-ink); }
.s-detail-main > .s-card, .s-detail-side > .s-card { scroll-margin-top: 130px; }
.s-facts dd { word-break: break-word; }
.s-facts dd .s-sub { font-weight: 400; }
.s-desc { white-space: pre-line; }
.s-doc-row.is-missing { background: var(--u-warn-faint); }
.s-doc-main { min-width: 0; }
.s-doc-main strong { margin-inline-end: 2px; }
.s-doc-main .s-sub { margin-top: 2px; }
.s-declaration p { margin: 0 0 8px; color: var(--u-ink-2); }
.s-declaration p:last-child { margin: 0; }
.s-item { gap: 1px; }
@media (max-width: 760px) {
  .s-decide { position: static; }
  .s-strip { grid-template-columns: 1fr 1fr; }
  .s-strip > div:nth-child(2) { border-inline-end: 0; }
  .s-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--u-line-2); }
  .s-vtitle .s-avatar-lg { display: none; }
}

/* applicant table → cards on phones */
@media (max-width: 760px) {
  .s-applicants thead { display: none; }
  .s-applicants, .s-applicants tbody { display: block; }
  .s-applicants tbody tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--u-line-2); position: relative; }
  .s-applicants tbody td { padding: 0; border: 0; min-width: 0 !important; }
  .s-applicants td.s-check { grid-row: 1 / span 2; grid-column: 1; padding-top: 8px; width: auto; }
  .s-applicants td[data-label="Candidate"] { grid-column: 2; grid-row: 1; }
  .s-applicants td[data-label="Status"] { grid-column: 3; grid-row: 1; text-align: end; }
  .s-applicants td[data-label="Where"], .s-applicants td[data-label="Background"], .s-applicants td[data-label="Documents"], .s-applicants td[data-label="Applied"] { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
  .s-applicants td[data-label="Where"] { grid-row: 2; }
  .s-applicants td[data-label="Background"] { grid-row: 3; }
  .s-applicants td[data-label="Documents"] { grid-row: 4; }
  .s-applicants td[data-label="Applied"] { grid-row: 5; }
  .s-applicants td[data-label]:not([data-label="Candidate"]):not([data-label="Status"])::before { content: attr(data-label); flex: none; width: 98px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
  .s-applicants td .s-sub { display: inline; }
  .s-applicants .s-open-col { display: none; }
  .s-applicants tbody tr.is-new { box-shadow: inset 3px 0 0 var(--u-info); }
  .s-applicants tbody tr.is-new > td:first-child { box-shadow: none; }
  .s-bulk { position: sticky; bottom: 0; top: auto; }
}

/* a lone campaign gets a wide, horizontal card instead of one narrow tile */

/* dossier: what the job asked for, beside what the candidate submitted */
.s-jobasks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 20px; padding: 12px 0; border-bottom: 1px solid var(--u-line-2); font-size: 13.5px; }
.s-jobasks b { margin-inline-end: 4px; color: var(--u-ink-3); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.s-jobasks span { padding: 3px 10px; border-radius: 999px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-weight: 600; }

/* =====================================================================
   Final pre-demo pass: vacancy page, onboarding/verification, alternative
   qualification routes, inline evidence, documents checklist.
   ===================================================================== */

/* ---------- vacancy page (richer, same information architecture) ---------- */
.u-vband { position: relative; overflow: hidden; padding: 22px 0 30px; background: linear-gradient(135deg, var(--u-card) 0%, var(--u-brand-soft) 55%, var(--u-navy-soft) 100%); border-bottom: 1px solid var(--u-line); }
.u-vband-orb { position: absolute; inset-inline-end: -130px; top: -170px; width: 440px; height: 440px; border-radius: 50%; border: 1px solid rgba(17, 17, 95, .09); box-shadow: inset 0 0 0 46px rgba(17, 17, 95, .025), inset 0 0 0 92px rgba(230, 0, 0, .02); pointer-events: none; }
.u-vband .u-wrap { position: relative; }
.u-vhead { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.u-vmark { display: grid; place-items: center; flex: none; width: 66px; height: 66px; overflow: hidden; border-radius: 18px; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .06em; background: radial-gradient(circle at 14% 0, rgba(230, 0, 0, .7), transparent 46%), linear-gradient(135deg, #1b1b78, #090939); box-shadow: 0 12px 26px rgba(17, 17, 95, .22); }
.u-vmark img { width: 100%; height: 100%; padding: 9px; object-fit: contain; background: var(--u-card); }
.u-vhead-main { min-width: 0; }
.u-public .u-vcampaign { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--u-brand-ink); }
.u-vcampaign span { color: var(--u-ink-3); letter-spacing: 0; text-transform: none; font-weight: 600; }
.u-vhead h1 { margin: 0; font-size: clamp(32px, 5vw, 50px); font-weight: 800; letter-spacing: -.04em; }
.u-vfacts { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.u-vfacts li { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 11px; background: rgba(255, 255, 255, .9); border: 1px solid var(--u-line); border-radius: 14px; }
.u-vfacts small { display: block; color: var(--u-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.u-vfacts strong { font-size: 15.5px; }
.u-vi { flex: none; width: 20px; height: 20px; color: var(--u-accent-ink); }
.u-vfacts .u-vi { box-sizing: content-box; padding: 8px; border-radius: 11px; background: var(--u-navy-soft); }
.u-vbody { padding: 30px 0 64px; }
.u-vstack { display: grid; gap: 18px; min-width: 0; }
.u-vcard { padding: 24px 26px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 18px; box-shadow: var(--u-shadow); }
.u-vcard > p { margin: 0 0 10px; font-size: 16.5px; }
.u-vcard > p:last-child { margin-bottom: 0; }
.u-vcard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.u-vcard-head h2 { margin: 0; font-size: 21px; }
.u-public .u-vcard-sub { margin: 2px 0 0; font-size: 15px; color: var(--u-ink-3); }
.u-vicon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--u-navy-soft); color: var(--u-accent-ink); }
.u-vicon svg { width: 22px; height: 22px; }
.u-vcard .u-need h3 { display: flex; align-items: center; gap: 8px; }
.u-vcard .u-need h3 .u-vi { width: 16px; height: 16px; }

/* Alternative qualification routes: cards that are clearly "either/or" */
.u-routes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.u-route { flex: 1 1 250px; min-width: 0; padding: 18px 20px 20px; border: 1.5px solid var(--u-line-violet); border-radius: 16px; background: linear-gradient(180deg, var(--u-surface-2), var(--u-card)); }
.u-route h3 { margin: 0 0 4px; font-size: 18px; color: var(--u-accent-ink); }
.u-public .u-route-detail { margin: 0 0 4px; font-size: 14.5px; color: var(--u-ink-3); }
.u-route ul { margin: 12px 0 0; padding: 12px 0 0; list-style: none; display: grid; gap: 9px; border-top: 1px dashed var(--u-line-violet); }
.u-route li { position: relative; padding-inline-start: 22px; font-size: 15.5px; color: var(--u-ink); }
.u-route li::before { content: ""; position: absolute; inset-inline-start: 3px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--u-navy); }
.u-route-or { display: grid; place-items: center; flex: 0 0 auto; }
.u-route-or i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--u-brand-soft); color: var(--u-brand-ink); font-size: 12.5px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.u-also { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--u-surface-3); border: 1px solid var(--u-line-violet); }
.u-also h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-accent-ink); }

.u-apply-rich { padding: 26px; border-radius: 18px; }
.u-public .u-apply-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--u-brand-ink); }
.u-apply-rich h2 { font-size: 24px; }
.u-apply-steps { list-style: none; display: grid; gap: 10px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--u-line-2); }
.u-apply-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--u-ink-2); }
.u-apply-steps b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 12px; }

@media (max-width: 860px) {
  .u-vbody { padding-bottom: 96px; }
  .u-apply-rich { padding: 18px 20px; }
  .u-apply-rich .u-apply-steps, .u-apply-rich .u-apply-kicker { display: none; }
  .u-apply-rich h2 { font-size: 20px; }
}
@media (max-width: 560px) {
  .u-vband { padding-bottom: 22px; }
  .u-vhead { gap: 14px; }
  .u-vmark { width: 54px; height: 54px; border-radius: 15px; font-size: 16px; }
  .u-vcard { padding: 20px 18px; border-radius: 16px; }
  .u-vfacts li { width: 100%; }
  .u-routes { flex-direction: column; }
  .u-route { flex-basis: auto; }
  .u-route-or i { width: 34px; height: 34px; }
}

/* ---------- onboarding / verification ---------- */
.u-authpage { padding: 28px 0 56px; background: radial-gradient(circle at 8% 0, rgba(230, 0, 0, .05), transparent 34%); }
.u-authgrid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 28px; align-items: stretch; }
.u-authintro { position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 38px 36px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 86% 8%, rgba(230, 0, 0, .4), transparent 38%), linear-gradient(150deg, #1d1d7c, #080838 74%); box-shadow: 0 24px 60px rgba(17, 17, 95, .22); }
.u-authintro::before, .u-authintro::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none; }
.u-authintro::before { inset-inline-end: -90px; bottom: -120px; width: 330px; height: 330px; }
.u-authintro::after { inset-inline-end: -150px; bottom: -180px; width: 450px; height: 450px; }
.u-authintro > * { position: relative; z-index: 1; }
.u-authplate { display: inline-grid; place-items: center; width: 132px; padding: 9px 12px; border-radius: 14px; background: var(--u-card); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.u-authplate img { width: 100%; height: auto; }
.u-public .u-authkicker { margin: 10px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffb4b4; }
.u-public .u-authintro h1 { margin: 0; color: #fff; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.u-public .u-authlead { margin: 0; max-width: 420px; color: rgba(255, 255, 255, .82); font-size: 16.5px; }
.u-public .u-authlead strong { color: #fff; }
.u-authpoints { display: grid; gap: 16px; margin: auto 0 0; padding: 22px 0 0; list-style: none; }
.u-authpoints li { display: flex; align-items: flex-start; gap: 14px; }
.u-authpoints i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .1); }
.u-authpoints svg { width: 20px; height: 20px; color: #fff; }
.u-authpoints strong { display: block; color: #fff; font-size: 15.5px; }
.u-public .u-authpoints span { display: block; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.45; }
.u-authcard { align-self: center; padding: 30px 32px 28px; }
.u-authcard h2 { margin: 0 0 6px; font-size: 26px; }
.u-authcard > p { margin: 0 0 18px; }
.u-authsteps { display: flex; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.u-authsteps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid var(--u-line); color: var(--u-ink-3); font-size: 13px; font-weight: 600; }
.u-authsteps li b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--u-surface-3); font-size: 11.5px; }
.u-authsteps li.is-on { border-color: var(--u-brand); color: var(--u-ink); }
.u-authsteps li.is-on b { background: var(--u-brand); color: #fff; }
.u-authsteps li.is-done { border-color: var(--u-ok); color: var(--u-ink-2); }
.u-authsteps li.is-done b { background: var(--u-ok); color: #fff; }
.u-authnote { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--u-navy-soft); color: var(--u-navy) !important; font-size: 13.5px; font-weight: 600; }
.u-authnote svg { flex: none; width: 17px; height: 17px; }
.u-authcard .u-auth-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--u-line-2); }
.u-authcard .u-auth-alt form { margin: 0; }
@media (max-width: 860px) {
  .u-authpage { padding-top: 14px; }
  .u-authgrid { grid-template-columns: 1fr; gap: 16px; }
  .u-authintro { padding: 24px 22px; border-radius: 22px; gap: 10px; }
  .u-authplate { width: 104px; }
  .u-public .u-authintro h1 { font-size: 28px; }
  .u-public .u-authlead { font-size: 15.5px; }
  .u-authpoints { gap: 12px; padding-top: 12px; }
  .u-authpoints li:nth-child(n+3) { display: none; }
  .u-authpoints span { display: none !important; }
  .u-authcard { align-self: stretch; padding: 22px 20px; }
  .u-authcard h2 { font-size: 22px; }
}

/* ---------- candidate flow: qualification route + inline evidence ---------- */
.u-route-notice { padding: 12px 15px; border: 1px solid var(--u-line-violet); border-radius: 12px; background: var(--u-navy-soft); }
.u-route-notice b { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--u-accent-ink); }
.u-route-notice ul { margin: 6px 0 0; padding-inline-start: 18px; color: var(--u-ink); font-size: 15px; }
.u-evidence { display: grid; gap: 10px; margin-top: 10px; padding: 16px; border: 1.5px dashed var(--u-line-violet); border-radius: 14px; background: var(--u-surface-2); }
.u-evidence.is-done { border-style: solid; border-color: var(--u-ok-line); background: var(--u-ok-faint); }
.u-evidence.has-error { border-color: var(--u-bad); }
.u-evidence-head { display: flex; align-items: center; gap: 12px; }
.u-evidence-head strong { margin-inline-end: 6px; font-size: 16px; }
.u-evidence-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-accent-ink); font-weight: 800; }
.is-done > .u-evidence-head .u-evidence-icon { background: var(--u-ok); color: #fff; }
.u-evidence .u-hint { margin: 0; }
.u-evidence[hidden], [data-evidence-when][hidden] { display: none; }
.u-evidence .u-reuse > div { display: flex; gap: 10px; flex-wrap: wrap; }
.u-evidence .u-reuse select { flex: 1 1 220px; }
.u-evidence .u-saved { font-size: 14.5px; }

/* ---------- documents: consolidated checklist ---------- */
.u-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.u-status-ok { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-status-missing { background: var(--u-brand-soft); color: var(--u-brand-ink); }
.u-status-skip { background: var(--u-surface-3); color: var(--u-ink-3); }
.u-checklist { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.u-checklist li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-card); font-weight: 600; }
.u-checklist li a { color: inherit; }
.u-checklist li.is-ok { border-color: var(--u-ok-line); background: var(--u-ok-faint); }
.u-checklist li small { display: block; color: var(--u-ink-3); font-weight: 500; }

/* ---------- staff: qualification used (alternative routes) ---------- */
.s-qual { margin: 0 0 6px; padding: 14px 18px 12px; border-bottom: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.s-qual.is-bad { background: var(--u-bad-soft); }
.s-qual-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.s-qual-head > span { color: var(--u-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.s-qual-head > strong { font-size: 15.5px; }
.s-qual-result { margin-inline-start: auto; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--u-ok-soft); color: var(--u-ok-ink); }
.is-bad .s-qual-result { background: var(--u-card); color: var(--u-bad-ink); }
.s-qual ul { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.s-qual li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.s-qual li > span { flex: 1; color: var(--u-ink-2); }
.s-qual li.is-fail strong { color: var(--u-bad-ink); }
.s-qual li small { color: var(--u-ink-3); min-width: 74px; text-align: end; }

/* ---------- staff: user access ---------- */
.s-subnav { display: flex; gap: 4px; margin: 0 0 14px; padding: 3px; width: fit-content; max-width: 100%; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-card); }
.s-subnav a { padding: 7px 16px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--u-ink-2); }
.s-subnav a:hover { background: var(--u-hover); }
.s-subnav a.is-on { background: var(--u-navy); color: #fff; }
.s-crumb { margin: 0 0 8px; font-size: 14px; }
.s-crumb a { color: var(--u-ink-3); font-weight: 600; }
.s-search { max-width: 320px; min-height: 40px; }
.s-check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--u-ink-2); }
.s-table-click tbody tr[data-href] { cursor: pointer; }
.s-table tr.is-inactive { opacity: .62; }
.s-person { display: flex; align-items: center; gap: 12px; color: inherit; }
.s-person b { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 13px; }
.s-person strong { display: block; }
.s-person small { display: block; color: var(--u-ink-3); font-size: 13px; }
.s-chip-custom { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-sub { display: block; color: var(--u-ink-3); font-size: 12.5px; }
.s-access-form { display: block; }
.s-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.s-preset, .s-radio, .s-cap { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--u-line); border-radius: 12px; background: var(--u-card); cursor: pointer; }
.s-preset input, .s-radio input, .s-cap input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--u-navy); }
.s-preset strong, .s-radio strong, .s-cap strong { display: block; font-size: 14.5px; }
.s-preset small, .s-radio small, .s-cap small { display: block; margin-top: 2px; color: var(--u-ink-3); font-size: 12.5px; line-height: 1.4; }
.s-preset.is-on, .s-radio:has(input:checked), .s-cap:has(input:checked) { border-color: var(--u-navy); background: var(--u-navy-soft); }
.s-cap.is-ungrantable { opacity: .55; cursor: not-allowed; }
.s-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 22px; }
.s-capgroup { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.s-capgroup legend { margin-bottom: 8px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.s-capgroup:disabled .s-cap, .s-scope:disabled .s-radio, .s-scope:disabled .s-cap { cursor: default; }
.s-tag-sens { background: var(--u-bad-soft); color: var(--u-bad-ink); margin-inline-start: 4px; }
.s-scope { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.s-clientpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 4px; padding: 14px; border: 1px dashed var(--u-line-violet); border-radius: 12px; background: var(--u-surface-2); }
.s-clientpick[hidden] { display: none; }
.s-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 18px; padding: 12px 0; background: linear-gradient(180deg, transparent, var(--u-bg) 30%); }
.s-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.s-grid-1 { display: grid; gap: 14px; }
.s-narrow { max-width: 560px; }
.s-inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.s-inline-form .u-input { flex: 1 1 240px; max-width: 360px; }
.s-timeline { margin: 0; padding: 6px 20px 14px; list-style: none; display: grid; gap: 0; }
.s-timeline li { display: grid; gap: 1px; padding: 10px 0; border-bottom: 1px solid var(--u-line-2); font-size: 14px; }
.s-timeline li:last-child { border-bottom: 0; }
.s-timeline span, .s-timeline small { color: var(--u-ink-3); }
.s-user { text-decoration: none; }
@media (max-width: 640px) {
  .s-caps, .s-presets { grid-template-columns: 1fr; }
  .s-savebar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
.u-saved-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; } .u-saved-pick label { flex: 1 0 100%; font-size: 14px; font-weight: 600; } .u-saved-pick select { flex: 1 1 220px; } .u-evidence details.u-saved { padding: 4px 0; } .u-evidence details.u-saved > summary { cursor: pointer; font-weight: 600; color: var(--u-accent-ink); } .u-evidence details.u-saved[open] > summary { margin-bottom: 10px; }

/* ---------- Production Milestone 1 additions ---------- */
.u-pill-warn { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-hint-list { margin: 0 0 18px; padding-inline-start: 20px; color: var(--u-ink-2); display: grid; gap: 6px; }
.u-form-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.u-record-list li .u-btn { margin-top: 8px; }
@media (max-width: 520px) { .u-form-actions .u-btn { width: 100%; } }

/* Talent */
.s-talent-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.s-talent-kpis > div { background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); padding: 10px 14px; }
.s-talent-kpis span { display: block; font-size: 12px; color: var(--u-ink-3); text-transform: uppercase; letter-spacing: .04em; }
.s-talent-kpis strong { font-size: 22px; letter-spacing: -.02em; }
.s-suit { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--u-line-2); color: var(--u-ink-2); }
.s-suit-qualified { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-suit-not_suitable { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.s-suit-unreviewed { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-docstate { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--u-line-2); color: var(--u-ink-2); }
.s-docstate-verified { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-docstate-rejected, .s-docstate-expired, .s-docstate-needs_attention { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.s-docstate-pending, .s-docstate-not_reviewed { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-review-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.s-review-form input[type="text"] { min-width: 180px; flex: 1; }
.s-export-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-top: 1px solid var(--u-line-2); }
.s-export-row label { font-size: 13px; color: var(--u-ink-2); display: inline-flex; gap: 6px; align-items: center; }

/* Talent pool table → cards on phones (same pattern as the applicant table) */
.s-talent td:nth-child(2) { min-width: 230px; }
.s-talent td:nth-child(4) { min-width: 180px; }
.s-talent-filters { padding-top: 14px; }
.s-talent-note { margin: 0; padding: 0 16px 14px; }
@media (max-width: 760px) {
  .s-talent thead { display: none; }
  .s-talent, .s-talent tbody { display: block; }
  .s-talent tbody tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--u-line-2); position: relative; }
  .s-talent tbody td { padding: 0; border: 0; min-width: 0 !important; }
  .s-talent td.s-check { grid-row: 1 / span 2; grid-column: 1; padding-top: 8px; width: auto; }
  .s-talent td[data-label="Candidate"] { grid-column: 2; grid-row: 1; }
  .s-talent td[data-label="Pool status"] { grid-column: 3; grid-row: 1; text-align: end; }
  .s-talent td[data-label="City"], .s-talent td[data-label="Background"], .s-talent td[data-label="Documents"], .s-talent td[data-label="Applied for"] { grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
  .s-talent td[data-label="City"] { grid-row: 2; }
  .s-talent td[data-label="Background"] { grid-row: 3; }
  .s-talent td[data-label="Documents"] { grid-row: 4; }
  .s-talent td[data-label="Applied for"] { grid-row: 5; }
  .s-talent td[data-label]:not([data-label="Candidate"]):not([data-label="Pool status"])::before { content: attr(data-label); flex: none; width: 98px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
  .s-talent td:not([data-label="Candidate"]) .s-sub { display: inline; }
  .s-talent .s-open-col { display: none; }
}
.s-doc-actions { margin-top: 8px; }
.s-doc-main .s-note { margin-top: 10px; }

/* OGDCL employment notice (modal + persistent compact notice) */
.u-modal-lock { overflow: hidden; }
.u-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--u-card); color: var(--u-ink); box-shadow: 0 30px 80px rgba(8, 8, 56, .45); overflow: auto; }
.u-modal::backdrop { background: rgba(8, 8, 56, .72); }
.u-modal-fallback { position: fixed; inset: 0; z-index: 1000; height: fit-content; }
.u-modal-card { padding: 26px 26px 22px; border-top: 5px solid var(--u-brand); }
.u-modal-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--u-brand); }
.u-public .u-modal h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: .01em; outline: none; }
.u-modal-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: var(--u-ink); }
.u-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.u-modal-count { margin: 0; flex: 1 1 200px; font-size: 14px; color: var(--u-ink-3); }
.u-modal-foot .u-btn { flex: 0 0 auto; min-width: 150px; }
.u-ogdcl-note { margin: 0 0 18px; padding: 12px 16px; border-radius: var(--u-radius-sm); background: var(--u-warn-soft); border: 1px solid var(--u-warn-line); color: var(--u-warn-deep); font-size: 14.5px; line-height: 1.5; }
.u-public .u-ogdcl-note p { margin: 0; color: inherit; }
@media (max-width: 560px) {
  .u-modal-card { padding: 20px 18px 18px; }
  .u-modal-foot { flex-direction: column; align-items: stretch; }
  .u-modal-foot .u-btn { width: 100%; }
}

/* =====================================================================
   Desktop refinement (additive). Everything below 1200px is unchanged: the 1080px
   container and fixed type scale were tuned for ~1100-1280px screens and looked like a
   tablet layout on larger monitors. The sign-in/verify grid keeps its own width.
   ===================================================================== */
@media (min-width: 1200px) {
  .u-wrap:not(.u-authgrid) { width: min(1200px, calc(100% - 48px)); }




  .u-vband { padding: 28px 0 38px; }
  .u-vmark { width: 76px; height: 76px; }
  .u-vfacts strong { font-size: 16.5px; }
  .u-vbody { padding: 36px 0 72px; }
  .u-two-col { grid-template-columns: minmax(0, 1fr) 370px; gap: 48px; }
  .u-vstack { gap: 22px; }
  .u-vcard { padding: 28px 32px; }
  .u-vcard > p { font-size: 17px; }
  .u-vcard-head h2 { font-size: 23px; }
  .u-apply-card { top: 92px; }
  .u-apply-rich { padding: 30px; }
  .u-apply-rich h2 { font-size: 26px; }
  .u-apply-card .u-btn-lg { min-height: 56px; font-size: 17px; }
  .u-apply-steps li { font-size: 15px; }
  .u-ogdcl-note { padding: 14px 18px; font-size: 15.5px; }
}

@media (min-width: 1600px) {
  .u-wrap:not(.u-authgrid) { width: min(1320px, calc(100% - 64px)); }



  .u-vhead h1 { font-size: 56px; }
  .u-two-col { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .u-vcard > p { max-width: 72ch; }
}

/* =====================================================================
   Public site, Pass 1: shell, homepage, campaign page, role listing.
   Navy/indigo carries the campaign language; PMS red is kept for CTAs, active
   states and small accents. Spacious, no gradients on large light surfaces.
   ===================================================================== */
:root { --u-navy-2: #1b1b78; --u-navy-ink: #080838; }
html { scroll-behavior: smooth; }
#campaigns, #roles { scroll-margin-top: 84px; }

/* ---------- header ---------- */
.u-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--u-line); }
.u-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.u-brand { display: inline-flex; align-items: center; gap: 14px; flex: none; }
.u-brand-logo { width: 88px; height: auto; }
.u-brand-tag { padding-inline-start: 14px; border-inline-start: 2px solid var(--u-line); font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--u-accent-ink); }
.u-header-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.u-header-nav .u-btn { white-space: nowrap; }
.u-navlink { padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--u-ink-2); white-space: nowrap; transition: background .15s, color .15s; }
.u-navlink:hover { background: var(--u-navy-soft); color: var(--u-accent-ink); }
.u-navlink-account { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 6px; padding: 5px 14px 5px 5px; border: 1px solid var(--u-line); border-radius: 999px; }
.u-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--u-navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.u-navlink-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- shared pieces ---------- */
.u-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--u-brand-dark) !important; }
.u-kicker i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--u-brand); box-shadow: 0 0 0 5px var(--u-brand-soft); }
.u-kicker-dark { margin-bottom: 10px; font-size: 12.5px; }
.u-kicker-light { color: #ffb4b4 !important; }
.u-kicker-light i { box-shadow: 0 0 0 5px rgba(230, 0, 0, .22); }
.u-lead { max-width: 580px; margin: 0 0 32px; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; }
.u-arrow { display: inline-block; transition: transform .18s; }
.u-btn:hover .u-arrow { transform: translateY(3px); }
.u-hero .u-btn-lg, .u-camp-hero .u-btn-lg { min-height: 54px; padding: 14px 28px; font-size: 16.5px; }

.u-section { padding: 72px 0 0; }
.u-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.u-section-head h2 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.035em; }
.u-section-head > div { flex: 1 1 520px; }
.u-section-sub { max-width: 560px; margin: 10px 0 0; font-size: 17px; }
.u-section-count { margin: 0; color: var(--u-ink-3); font-size: 16px; font-weight: 600; }
.u-section-tint { margin-top: 80px; padding: 72px 0 80px; background: var(--u-card); border-block: 1px solid var(--u-line); }
.u-section-tint .u-section-head { margin-bottom: 40px; }

/* ---------- homepage hero ---------- */
.u-hero { position: relative; overflow: hidden; padding: 72px 0 88px; background: linear-gradient(135deg, var(--u-brand-faint) 0%, var(--u-surface-2) 50%, var(--u-navy-soft) 100%); border-bottom: 1px solid var(--u-line); }
.u-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(17, 17, 95, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 95, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%); mask-image: linear-gradient(100deg, transparent 35%, #000 100%); pointer-events: none; }
.u-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.u-hero h1 { margin: 0 0 22px; font-size: clamp(38px, 5.4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; }
.u-hero h1 em { color: var(--u-brand); font-style: normal; }
.u-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.u-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--u-ink-2); font-size: 15.5px; font-weight: 600; }
.u-trust li { display: flex; align-items: center; gap: 8px; }
.u-trust i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--u-ok-soft); color: var(--u-ok-ink); font-size: 11px; font-style: normal; font-weight: 800; }
.u-hero-visual { position: relative; min-height: 440px; }
.u-hero-panel { position: absolute; inset: 0 12px 0 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; overflow: hidden; border-radius: 28px; color: rgba(255, 255, 255, .82); background:
    radial-gradient(circle at 86% 8%, rgba(230, 0, 0, .3), transparent 34%),
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(150deg, var(--u-navy-2), var(--u-navy-ink) 78%);
  box-shadow: 0 30px 70px rgba(17, 17, 95, .24); }
.u-hero-panel::before, .u-hero-panel::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.u-hero-panel::before { width: 300px; height: 300px; }
.u-hero-panel::after { width: 440px; height: 440px; }
.u-hero-plate { position: relative; z-index: 1; display: grid; place-items: center; width: 230px; min-height: 140px; padding: 16px; border-radius: 20px; background: var(--u-card); box-shadow: 0 18px 44px rgba(0, 0, 0, .26); }
.u-hero-plate img { width: 190px; height: auto; }
.u-hero-panel-tag { position: relative; z-index: 1; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.u-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--u-card); border: 1px solid rgba(17, 17, 95, .08); border-radius: 16px; box-shadow: 0 16px 38px rgba(17, 17, 95, .18); }
.u-float > b { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-float > b.u-float-num { width: auto; min-width: 46px; padding: 0 12px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 22px; font-weight: 800; }
.u-float strong { display: block; font-size: 15px; }
.u-float span { color: var(--u-ink-3); font-size: 13px; }
.u-float-top { top: 34px; inset-inline-start: -18px; }
.u-float-bottom { inset-inline-end: -8px; bottom: 30px; }

/* ---------- credibility strip ---------- */
.u-proof { background: var(--u-card); border-bottom: 1px solid var(--u-line); }
.u-proof-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.u-proof-list li { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 24px 12px; border-inline-start: 1px solid var(--u-line-2); }
.u-proof-list li:first-child { border-inline-start: 0; }
.u-proof-list strong { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--u-accent-ink); }
.u-proof-list span { font-size: 15.5px; font-weight: 600; color: var(--u-ink-2); }

/* ---------- campaign cards ---------- */
.u-campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; }
.u-campaign { display: flex; flex-direction: column; overflow: hidden; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 22px; box-shadow: var(--u-shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.u-campaign:hover { transform: translateY(-3px); border-color: var(--u-line-violet); box-shadow: 0 2px 4px rgba(17, 17, 40, .05), 0 20px 44px rgba(17, 17, 95, .14); }
.u-campaign:focus-visible { outline: 3px solid rgba(17, 17, 95, .35); outline-offset: 3px; }
.u-campaign-art { position: relative; display: grid; place-items: center; min-height: 170px; overflow: hidden; background:
    radial-gradient(circle at 12% 0, rgba(230, 0, 0, .55), transparent 40%),
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(135deg, var(--u-navy-2), var(--u-navy-ink)); }
.u-campaign-art::after { content: ""; position: absolute; inset-inline-end: -90px; bottom: -150px; width: 340px; height: 340px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; }
.u-campaign-initials { position: relative; z-index: 1; color: #fff; font-size: 48px; font-weight: 800; letter-spacing: .08em; }
.u-campaign-logo { position: relative; z-index: 1; display: grid; place-items: center; width: min(240px, 78%); height: 128px; padding: 14px; background: var(--u-card); border-radius: 18px; box-shadow: 0 14px 36px rgba(0, 0, 0, .28); }
.u-campaign-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.u-campaign-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; padding: 28px 30px 30px; min-width: 0; }
.u-campaign-eyebrow { margin-bottom: 4px; color: var(--u-brand-ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.u-campaign-name { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.u-campaign-legal { color: var(--u-ink-2); font-size: 17px; font-weight: 600; }
.u-campaign-title { margin-top: 14px; color: var(--u-accent-ink); font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.u-campaign-desc { margin-top: 6px; max-width: 60ch; color: var(--u-ink-2); font-size: 16.5px; line-height: 1.6; }
.u-campaign-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.u-campaign-meta > span { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 14.5px; font-weight: 700; }
.u-campaign-meta > .u-campaign-live { gap: 8px; background: var(--u-ok-soft); color: var(--u-ok-deep); }
.u-campaign-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--u-ok); }
.u-campaign-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border-radius: 12px; background: var(--u-brand); color: #fff; font-size: 16px; font-weight: 700; transition: background .15s; }
.u-campaign:hover .u-campaign-go { background: var(--u-brand-dark); }
.u-campaign-go i { font-style: normal; display: inline-block; transition: transform .18s; }
.u-campaign:hover .u-campaign-go i { transform: translateX(4px); }
/* a lone campaign gets a wide, horizontal card instead of one narrow tile */
.u-campaign-grid > .u-campaign:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); }
.u-campaign-grid > .u-campaign:only-child .u-campaign-art { min-height: 320px; }
.u-campaign-grid > .u-campaign:only-child .u-campaign-body { justify-content: center; padding: 40px 48px; }
.u-campaign-grid > .u-campaign:only-child .u-campaign-logo { width: min(280px, 78%); height: 150px; }
.u-campaign-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--u-navy); color: #fff; overflow: hidden; flex: none; }
.u-campaign-mark b { font-size: 20px; letter-spacing: .02em; }
.u-campaign-mark img { width: 100%; height: 100%; object-fit: contain; background: var(--u-card); padding: 6px; }
.u-campaign-mark-lg { width: 76px; height: 76px; border-radius: 18px; }

/* ---------- how applying works ---------- */
.u-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; }
.u-steps li { position: relative; display: block; }
.u-steps li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 50%; background: var(--u-navy); color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 6px var(--u-navy-soft); }
.u-steps li:not(:last-child)::after { content: ""; position: absolute; top: 26px; inset-inline-start: 76px; inset-inline-end: -20px; border-top: 2px dashed var(--u-line-violet); }
.u-steps strong { display: block; margin-bottom: 6px; font-size: 18px; letter-spacing: -.01em; }
.u-steps p { margin: 0; font-size: 16px; line-height: 1.55; }

/* ---------- powered by PMS ---------- */
.u-pms { padding-top: 80px; }
.u-pms-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding: 56px 56px; border-radius: 28px; color: #fff; background:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(135deg, var(--u-navy-2), var(--u-navy-ink)); }
.u-public .u-pms-card h2 { margin: 0 0 16px; color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.u-public .u-pms-card p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.65; }
.u-public .u-pms-card .u-kicker { margin-bottom: 14px; }
.u-pms-services { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.u-pms-services li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: rgba(255, 255, 255, .06); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.u-pms-services svg { flex: none; width: 30px; height: 30px; fill: none; stroke: #ffb4b4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- campaign page ---------- */
.u-camp-hero .u-back { display: inline-block; padding: 6px 0; }
.u-camp-hero { position: relative; overflow: hidden; padding: 26px 0 72px; color: #fff; background:
    radial-gradient(circle at 88% 0, rgba(230, 0, 0, .3), transparent 34%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(125deg, var(--u-navy-ink), var(--u-navy-2)); }
.u-camp-hero .u-wrap { position: relative; z-index: 1; }
.u-camp-hero .u-back { color: rgba(255, 255, 255, .72); }
.u-camp-hero .u-back:hover { color: #fff; }
.u-camp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; margin-top: 28px; }
.u-camp-text { min-width: 0; }
.u-public .u-camp-hero h1 { margin: 0; color: #fff; font-size: clamp(48px, 7vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.u-public .u-camp-hero p { color: rgba(255, 255, 255, .8); }
.u-public .u-camp-hero .u-camp-legal { margin: 10px 0 0; color: #fff; font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; }
.u-public .u-camp-hero .u-camp-project { margin: 22px 0 0; color: #ffd0d0; font-size: clamp(17px, 2vw, 20px); font-weight: 700; letter-spacing: -.01em; }
.u-camp-desc { max-width: 600px; margin: 12px 0 0; font-size: 17.5px; line-height: 1.65; }
.u-camp-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.u-camp-facts li { display: grid; gap: 2px; padding: 12px 20px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; background: rgba(255, 255, 255, .08); }
.u-camp-facts strong { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.u-camp-facts span { color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.u-public .u-camp-hero .u-camp-managed { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .16); max-width: 600px; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.u-camp-visual { position: relative; min-height: 400px; }
.u-camp-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 28px; background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .1), transparent 40%),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 36px 36px,
    rgba(255, 255, 255, .05); }
.u-camp-panel::before, .u-camp-panel::after { content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.u-camp-panel::before { width: 320px; height: 320px; }
.u-camp-panel::after { width: 470px; height: 470px; }
.u-camp-mark { position: relative; z-index: 1; display: grid; place-items: center; width: min(280px, 72%); height: 168px; overflow: hidden; border-radius: 24px; background: var(--u-card); color: var(--u-accent-ink); box-shadow: 0 22px 54px rgba(0, 0, 0, .34); }
.u-camp-mark b { font-size: 44px; letter-spacing: .06em; }
.u-camp-mark img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.u-camp-panel-tag { position: relative; z-index: 1; color: rgba(255, 255, 255, .8); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* filters */
.u-roles { padding-top: 64px; }
.u-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.u-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--u-line); border-radius: 999px; background: var(--u-card); color: var(--u-ink-2); font-size: 15.5px; font-weight: 600; transition: border-color .15s, background .15s, color .15s; }
.u-chips a:hover { border-color: var(--u-navy); color: var(--u-accent-ink); }
.u-chips a.is-on { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }

/* role groups + cards */
.u-role-group { margin-top: 44px; }
.u-role-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--u-navy); }
.u-role-group-head h3 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.03em; color: var(--u-accent-ink); }
.u-role-group-head span { color: var(--u-ink-3); font-size: 15.5px; font-weight: 600; }
.u-job-list { display: grid; gap: 14px; }
.u-job { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px 32px; padding: 34px 40px 36px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(17, 17, 40, .04); transition: transform .18s, border-color .18s, box-shadow .18s; }
.u-job::before { content: ""; position: absolute; inset-inline-start: 0; top: 30px; bottom: 30px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; transition: background .18s; }
.u-job:hover { transform: translateY(-2px); border-color: var(--u-line-violet); box-shadow: 0 2px 4px rgba(17, 17, 40, .04), 0 14px 32px rgba(17, 17, 95, .11); }
.u-job:hover::before { background: var(--u-brand); }
.u-job:focus-visible { outline: 3px solid rgba(17, 17, 95, .35); outline-offset: 3px; }
.u-job-main { display: grid; gap: 10px; min-width: 0; }
.u-job-main > strong { font-size: 26px; font-weight: 800; letter-spacing: -.028em; line-height: 1.18; color: var(--u-navy-ink); }
.u-job-meta { display: flex; align-items: flex-start; gap: 8px; color: var(--u-ink-2); font-size: 16px; line-height: 1.45; }
.u-job-meta::before { content: ""; flex: none; width: 17px; height: 17px; margin-top: 3px; background: var(--u-brand); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 22s8-6.2 8-12a8 8 0 1 0-16 0c0 5.8 8 12 8 12zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 22s8-6.2 8-12a8 8 0 1 0-16 0c0 5.8 8 12 8 12zm0-9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>") center / contain no-repeat; }
.u-job-reqs { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; margin-top: 2px; }
.u-job-req { display: block; min-width: 0; padding: 18px 22px 20px; border: 1px solid var(--u-line-2); border-radius: 14px; background: var(--u-bg); color: var(--u-ink); font-size: 16.5px; line-height: 1.6; }
.u-job-req:only-child { grid-column: 1 / -1; }
.u-job-req-text { display: block; overflow-wrap: anywhere; }
.u-job-req small { display: block; margin-bottom: 7px; color: var(--u-accent-ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.u-job-go { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 12px; background: var(--u-brand-soft); color: var(--u-brand-ink); font-size: 15px; font-weight: 700; white-space: nowrap; transition: background .15s, color .15s; }
.u-job:hover .u-job-go { background: var(--u-brand); color: #fff; }
.u-job-go i { display: inline-block; font-style: normal; transition: transform .18s; }
.u-job:hover .u-job-go i { transform: translateX(4px); }

/* ---------- footer ---------- */
.u-footer { margin-top: 88px; background: var(--u-card); border-top: 1px solid var(--u-line); color: var(--u-ink-2); font-size: 15px; }
.u-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
.u-footer-logo { width: 96px; height: auto; margin-bottom: 14px; }
.u-public .u-footer-name { margin: 0; color: var(--u-ink); font-size: 17px; font-weight: 700; }
.u-public .u-footer-tagline { margin: 4px 0 0; color: var(--u-brand-ink); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.u-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.u-footer-col h2 { margin: 0 0 8px; color: var(--u-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.u-footer-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 16px; font-weight: 600; color: var(--u-accent-ink); }
.u-footer-col a:hover { color: var(--u-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.u-footer-base { border-top: 1px solid var(--u-line-2); color: var(--u-ink-3); font-size: 14px; }
.u-public .u-footer-base p { margin: 0; padding: 20px 0; color: var(--u-ink-3); }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .u-hero { padding: 52px 0 60px; }
  .u-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .u-hero-visual { display: none; }
  .u-camp-grid { grid-template-columns: 1fr; gap: 28px; }
  .u-camp-visual { min-height: 190px; }
  .u-camp-panel::before { width: 200px; height: 200px; }
  .u-camp-panel::after { width: 300px; height: 300px; }
  .u-camp-mark { width: 190px; height: 112px; border-radius: 18px; }
  .u-camp-panel { gap: 14px; }
  .u-camp-hero { padding-bottom: 52px; }
  .u-proof-list { grid-template-columns: repeat(2, 1fr); }
  .u-proof-list li { padding: 18px 12px; }
  .u-proof-list li:nth-child(3) { border-inline-start: 0; }
  .u-proof-list li:nth-child(n + 3) { border-top: 1px solid var(--u-line-2); }
  .u-steps { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .u-steps li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 18px; padding-bottom: 30px; }
  .u-steps li:last-child { padding-bottom: 0; }
  .u-steps li > span { grid-row: 1 / 3; margin-bottom: 0; }
  .u-steps li:not(:last-child)::after { top: 60px; bottom: 6px; inset-inline-start: 26px; inset-inline-end: auto; border-top: 0; border-inline-start: 2px dashed var(--u-line-violet); }
  .u-pms-card { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
  .u-campaign-grid > .u-campaign:only-child { display: flex; }
  .u-campaign-grid > .u-campaign:only-child .u-campaign-art { min-height: 190px; }
  .u-campaign-grid > .u-campaign:only-child .u-campaign-body { padding: 28px 30px 30px; }
  .u-campaign-grid > .u-campaign:only-child .u-campaign-logo { width: min(240px, 78%); height: 120px; }
  .u-footer-grid { grid-template-columns: 1fr 1fr; }
  .u-footer-brand { grid-column: 1 / -1; }
}

/* ---------- phone ---------- */
@media (max-width: 560px) {
  .u-header-row { min-height: 64px; gap: 8px; }
  .u-brand { gap: 10px; }
  .u-brand-logo { width: 62px; }
  .u-brand-tag { padding-inline-start: 10px; font-size: 11.5px; letter-spacing: .12em; }
  .u-header-nav { gap: 0; }
  .u-navlink { padding: 10px 9px; font-size: 14.5px; }
  .u-navlink-name { display: none; }
  .u-navlink-account { margin-inline-start: 2px; padding: 4px; }
  .u-header-nav .u-btn-sm { min-height: 40px; padding: 6px 14px; white-space: nowrap; }
  .u-header-nav:has(.u-navlink-account) .u-navlink-jobs { display: none; }
  /* A signed-in candidate has avatar, My applications and the language switch: drop the "Careers" tag so the header fits 390px. */
  .u-header-row:has(.u-navlink-account) .u-brand-tag { display: none; }
  /* A signed-out visitor has Explore jobs, Sign in and the language switch: same fix, same reason. */
  .u-header-row:has(.u-header-nav .u-btn) .u-brand-tag { display: none; }
  .u-hero { padding: 36px 0 44px; }
  .u-hero-actions .u-btn { width: 100%; }
  .u-trust { gap: 8px 18px; margin-top: 26px; font-size: 14.5px; }
  .u-proof-list strong { font-size: 24px; }
  .u-proof-list span { font-size: 14px; }
  .u-proof-list li { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .u-section { padding-top: 52px; }
  .u-section-tint { margin-top: 56px; padding: 52px 0 56px; }
  .u-campaign-grid { grid-template-columns: 1fr; gap: 20px; }
  .u-campaign-body, .u-campaign-grid > .u-campaign:only-child .u-campaign-body { padding: 24px 22px 26px; }
  .u-campaign-go { width: 100%; justify-content: center; }
  .u-pms { padding-top: 56px; }
  .u-pms-card { padding: 32px 22px; border-radius: 22px; }
  .u-pms-services { grid-template-columns: 1fr; }
  .u-camp-hero { padding: 18px 0 40px; }
  .u-camp-facts { gap: 10px; margin: 24px 0; }
  .u-camp-facts li { padding: 10px 16px; }
  .u-camp-hero .u-btn { width: 100%; }
  .u-roles { padding-top: 48px; }
  .u-chips a { padding: 8px 18px; }
  .u-role-group { margin-top: 36px; }
  .u-job { grid-template-columns: 1fr; padding: 26px 22px 22px; gap: 18px; border-radius: 18px; }
  .u-job::before { top: 24px; bottom: 24px; }
  .u-job-main { gap: 8px; }
  .u-job-main > strong { font-size: 22px; }
  .u-job-meta { font-size: 16px; }
  .u-job-reqs { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
  .u-job-req { padding: 16px 18px 18px; font-size: 16.5px; line-height: 1.6; }
  .u-job-go { grid-column: 1; grid-row: auto; width: 100%; min-height: 48px; font-size: 16px; }
  .u-footer { margin-top: 64px; }
  .u-footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 28px; }
}

@media (max-width: 380px) {
  .u-brand { gap: 8px; }
  .u-brand-logo { width: 54px; }
  .u-brand-tag { padding-inline-start: 8px; font-size: 11px; letter-spacing: .08em; }
  .u-navlink { padding: 10px 6px; font-size: 14px; }
  .u-header-nav .u-btn-sm { padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .u-campaign, .u-job, .u-btn, .u-navlink, .u-chips a, .u-arrow, .u-campaign-go i, .u-job-go i { transition: none; }
  .u-campaign:hover, .u-job:hover, .u-btn:hover .u-arrow, .u-campaign:hover .u-campaign-go i, .u-job:hover .u-job-go i { transform: none; }
}

/* =====================================================================
   Public site, Pass 2: vacancy page, My applications, application shell.
   Same tokens as Pass 1. Marketing surfaces keep the navy hero; candidate
   forms stay calm: white cards, soft borders, no gradients or glass.
   ===================================================================== */

/* ---------- shared pieces ---------- */
.u-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--u-ok); box-shadow: 0 0 0 4px var(--u-ok-soft); }
.u-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.u-badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.u-badge-ok { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.u-badge-ok::before { content: "✓"; width: auto; height: auto; background: none; font-size: 12px; font-weight: 800; }
.u-badge-neutral { background: var(--u-surface-3); color: var(--u-ink-2); }
.u-badge-warn { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.u-badge-warn::before { content: "!"; width: auto; height: auto; background: none; font-size: 12px; font-weight: 800; }

/* ---------- vacancy page ---------- */
.u-vhero { position: relative; overflow: hidden; padding: 18px 0 38px; color: #fff; background:
    radial-gradient(circle at 90% 0, rgba(230, 0, 0, .26), transparent 36%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(125deg, var(--u-navy-ink), var(--u-navy-2)); }
.u-vhero .u-wrap { position: relative; }
.u-vhero .u-crumbs a, .u-vhero .u-crumbs span { color: rgba(255, 255, 255, .72); }
.u-vhero .u-crumbs a:hover { color: #fff; }
.u-vhero .u-vhead { align-items: flex-start; gap: 22px; margin-top: 26px; }
.u-vhero .u-vmark { width: 72px; height: 72px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 26px rgba(0, 0, 0, .25); }
.u-vhero .u-kicker { margin: 0 0 12px; }
.u-public .u-vhero .u-vcampaign { margin: 0 0 8px; color: #fff; font-size: 14px; letter-spacing: .08em; }
.u-vhero .u-vcampaign span { color: rgba(255, 255, 255, .72); }
.u-public .u-vhero h1 { color: #fff; font-size: clamp(34px, 5.4vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; overflow-wrap: anywhere; }
.u-public .u-vhero .u-vcategory { margin: 14px 0 0; color: #ffd0d0; font-size: clamp(17px, 2.2vw, 20px); font-weight: 700; }
.u-vhero .u-pill { margin-top: 12px; }
.u-vhero .u-vfacts { margin-top: 28px; }
.u-vhero .u-vfacts li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.u-vhero .u-vfacts small { color: rgba(255, 255, 255, .72); }
.u-vhero .u-vfacts strong { color: #fff; }
.u-vhero .u-vfacts .u-vi { background: rgba(255, 255, 255, .12); color: #fff; }
.u-vnote { display: none; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--u-ok-soft); color: var(--u-ok-deep); font-size: 15px; }
.u-public .u-vnote { color: var(--u-ok-deep); }
.u-vbody .u-vcard { border-radius: 16px; }
.u-vcard .u-need h3 { font-size: 12.5px; }
.u-urdu div[lang="ur"] { font-family: var(--u-font-ur); font-size: 18px; line-height: 2.1; }
.u-urdu summary { padding: 4px 0; line-height: 2.1; }
.u-public .u-apply-rich .u-apply-kicker { color: var(--u-navy-2); }
.u-public .u-apply-open { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--u-ok-ink); font-size: 15px; font-weight: 700; }
.u-public .u-apply-check { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--u-ink-2); }
.u-apply-rich .u-btn-lg { min-height: 56px; font-size: 17px; }

@media (max-width: 860px) {
  .u-apply-rich:has(form) { display: none; }
  .u-vnote { display: flex; }
  .u-vbody { padding-top: 20px; }
  .u-sticky-apply { box-shadow: 0 -8px 24px rgba(17, 17, 40, .08); }
  body:has(.u-sticky-apply) .u-footer { padding-bottom: 84px; }
}
@media (max-width: 560px) {
  .u-vhero { padding-bottom: 30px; }
  .u-vhero .u-vhead { flex-direction: column; gap: 16px; margin-top: 20px; }
  .u-vhero .u-vmark { width: 58px; height: 58px; }
  .u-vhero .u-vfacts { margin-top: 22px; }
}

/* ---------- My applications ---------- */
.u-flow-wide .u-flow-wrap { max-width: 900px; }
.u-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 22px 0 26px; }
.u-dash-head h1 { margin: 0 0 6px; font-size: clamp(30px, 5vw, 42px); font-weight: 800; letter-spacing: -.035em; }
.u-public .u-dash-head p { margin: 0; max-width: 520px; font-size: 16.5px; }
.u-app-list { gap: 16px; }
.u-appcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; padding: 26px 30px; background: var(--u-card); border: 1px solid var(--u-line); border-inline-start: 5px solid var(--u-navy); border-radius: 18px; box-shadow: var(--u-shadow); }
.u-appcard.is-submitted { border-inline-start-color: var(--u-ok); }
.u-appcard.is-closed { border-inline-start-color: var(--u-line-violet); }
.u-appcard h2 { margin: 4px 0 14px; font-size: clamp(23px, 3.4vw, 30px); font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.u-public .u-appcard-campaign { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--u-ink-3); }
.u-appcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.u-public .u-appcard-date { font-size: 15px; color: var(--u-ink-2); }
.u-appcard-actions { display: grid; gap: 14px; min-width: 220px; justify-items: stretch; }
.u-appcard-actions .u-btn { min-height: 50px; }
.u-discard-link { justify-self: center; padding: 6px 4px; font-size: 14px; font-weight: 600; text-decoration-thickness: 1px; }
.u-account-links { margin-top: 32px; gap: 12px; }

@media (max-width: 640px) {
  .u-dash-head { margin: 16px 0 20px; }
  .u-dash-head .u-btn { width: 100%; }
  .u-appcard { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  .u-appcard-actions { min-width: 0; }
  .u-discard-link { padding: 12px 4px 2px; border-top: 1px solid var(--u-line-2); justify-self: stretch; text-align: center; }
}

/* ---------- application shell ---------- */
.u-flow { padding: 22px 0 72px; }
.u-flow-wrap { max-width: 840px; }
.u-flow-head { margin: 12px 0 24px; }
.u-flow-head h1 { font-size: clamp(30px, 5.5vw, 42px); }
.u-flow-head .u-eyebrow { margin-bottom: 4px; color: var(--u-navy-2) !important; }

/* stepper: marker + label, joined by a line */
.u-progress { margin-bottom: 24px; }
.u-progress ol { display: flex; align-items: center; gap: 0; }
.u-progress li { position: relative; display: flex; flex: 0 0 auto; align-items: center; min-width: 0; }
.u-progress li:not(:last-child) { flex: 1 1 auto; }
.u-progress li:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 16px; height: 2px; margin: 0 14px; border-radius: 2px; background: var(--u-line); }
.u-progress li.is-done:not(:last-child)::after { background: var(--u-ok); }
.u-progress li > a, .u-progress-locked { display: flex; align-items: center; gap: 10px; height: auto; padding: 4px 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none !important; color: var(--u-ink-3); font-size: 15px; font-weight: 600; }
.u-progress li > a { color: var(--u-ink-2); }
.u-progress li > a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.u-progress li > a:focus-visible { outline: 3px solid rgba(17, 17, 95, .35); outline-offset: 3px; }
.u-progress b { width: 30px; height: 30px; border: 2px solid var(--u-line-strong); background: var(--u-card); color: var(--u-ink-3); font-size: 13px; font-weight: 800; }
.u-progress li.is-done b { border-color: var(--u-ok); background: var(--u-ok); color: #fff; }
.u-progress li.is-current b { border-color: var(--u-navy); background: var(--u-card); color: var(--u-accent-ink); }
.u-progress li.is-viewing b { border-color: var(--u-navy); background: var(--u-navy); color: #fff; box-shadow: 0 0 0 4px rgba(17, 17, 95, .12); }
.u-progress li.is-viewing > a, .u-progress li.is-viewing > .u-progress-locked, .u-progress li.is-current > a, .u-progress li.is-current > .u-progress-locked { color: var(--u-ink); font-weight: 700; }

/* cards + type */
.u-step { padding: 32px 36px 28px; border-radius: 18px; }
.u-step-head h2 { font-size: clamp(24px, 3.6vw, 28px); letter-spacing: -.03em; }
.u-public .u-step-head p { max-width: 62ch; font-size: 16.5px; }
.u-field > label, .u-q-label { font-size: 15.5px; }
.u-q-label { font-size: 17px; line-height: 1.4; }
.u-input { min-height: 52px; font-size: 16.5px; }
.u-grid { gap: 18px 20px; }
.u-block { margin-top: 32px; padding-top: 26px; }
.u-block h3 { font-size: 20px; }
.u-verified { border: 1px solid var(--u-ok-line); }
.u-todo h3 { display: flex; align-items: center; gap: 10px; }
.u-todo h3 span { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #5e3a00; color: #fff; font-size: 13px; }

/* Yes / No question cards */
.u-confirm { gap: 16px; margin-top: 30px; padding-top: 28px; }
.u-confirm h3 { font-size: 22px; letter-spacing: -.02em; }
.u-questions:not(:has(.u-q)) { display: none; }
.u-fieldset > .u-confirm:first-child, .u-questions:not(:has(.u-q)) + .u-confirm { margin-top: 0; padding-top: 0; border-top: 0; }
.u-confirm-item { gap: 12px; padding: 22px 24px 24px; border: 1.5px solid var(--u-line); border-radius: 16px; background: var(--u-card); box-shadow: 0 1px 2px rgba(17, 17, 40, .03); }
.u-confirm-item:focus-within { border-color: var(--u-line-violet); }
.u-confirm-item legend { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--u-ink); }
.u-public .u-confirm-item .u-confirm-ur { margin: 0 0 4px; padding: 8px 14px; border-inline-start: 3px solid var(--u-line-violet); border-radius: 4px 10px 10px 4px; background: var(--u-surface-3); color: var(--u-ink); font-family: var(--u-font-ur); font-size: 19px; line-height: 2.1; text-align: end; }
.u-yesno { grid-template-columns: 1fr 1fr; gap: 12px; max-width: 480px; }
.u-yesno span { min-height: 58px; padding: 8px 14px; border: 2px solid var(--u-line-strong); border-radius: 14px; font-size: 17px; transition: border-color .15s, background .15s, box-shadow .15s; }
.u-yesno i { font-family: var(--u-font-ur); font-size: 15px; line-height: 1.6; }
.u-yesno label:hover span { border-color: var(--u-navy); background: var(--u-navy-soft); }
.u-yesno label:has(input:checked) span { box-shadow: 0 4px 12px rgba(17, 17, 40, .14); }
.u-yesno label:has(input:checked) span::before { content: "✓"; font-weight: 800; }
.u-yesno input:focus-visible + span { box-shadow: 0 0 0 3px var(--u-card), 0 0 0 6px var(--u-navy); }
.u-q-ur { font-family: var(--u-font-ur); font-size: 18px; line-height: 2; }
.u-option { padding: 14px 16px; }

/* autosave state */
.u-save { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--u-ink-2); }
.u-save[data-state="saved"]::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--u-ok-soft); color: var(--u-ok-ink); font-size: 12px; font-weight: 800; }
.u-save[data-state="saving"]::before { content: ""; width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; background: #bdbacb; }

/* footer actions: primary right, Back / Save & finish later quieter, Discard lives outside the card */
.u-actions { gap: 12px; margin-top: 34px; padding-top: 24px; }
.u-actions .u-btn-back { margin-inline-end: auto; }
.u-actions > .u-save { margin-inline-end: 0; }
.u-actions > .u-btn-secondary { min-height: 48px; }
.u-actions .u-btn-lg { min-height: 54px; padding-inline: 30px; }
.u-discard-row { margin: 26px 0 0; font-size: 14.5px; }
.u-public .u-discard-row span { color: var(--u-ink-3); }
.u-discard-row .u-link { margin-inline-start: 6px; font-weight: 600; text-decoration-thickness: 1px; }

/* documents */
.u-docs { gap: 16px; }
.u-doc { gap: 14px; padding: 22px 24px; border-radius: 16px; background: var(--u-card); }
.u-doc header { gap: 14px; }
.u-doc header h3 { font-size: 18.5px; letter-spacing: -.01em; }
.u-doc-state { width: 38px; height: 38px; font-size: 15px; }
.u-tag { padding: 2px 10px; font-size: 12.5px; }
.u-file-ok { padding: 12px 16px; border-color: var(--u-ok-line); border-radius: 12px; font-weight: 600; }
.u-picked { padding: 12px 16px; border-radius: 12px; }
.u-checklist li { padding: 13px 16px; }
.u-group-title { margin-top: 28px; }

/* review + submitted copy */
.u-review { gap: 16px; }
.u-rsec { padding: 22px 24px; border: 1px solid var(--u-line); border-radius: 16px; background: var(--u-surface-2); }
.u-review section > header { align-items: center; gap: 12px; margin-bottom: 12px; }
.u-review section > header h3 { flex: 1; font-size: 19px; }
.u-rsec-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--u-navy-soft); color: var(--u-accent-ink); }
.u-rsec-icon svg { width: 20px; height: 20px; }
.u-review .u-missing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--u-warn-soft); color: var(--u-warn-ink); font-size: 14px; font-weight: 700; }
.u-review .u-missing::before { content: "!"; font-weight: 800; }
.u-review .u-missing.is-optional { background: var(--u-surface-3); color: var(--u-ink-3); font-weight: 600; }
.u-review .u-missing.is-optional::before { content: none; }
.u-declaration-text [lang="ur"] { font-family: var(--u-font-ur); font-size: 18px; line-height: 2.1; }
.u-declaration h2 { display: flex; align-items: center; gap: 12px; }
.u-declaration-text { padding: 16px 20px; }
.u-declaration .u-checkline-lg { padding: 14px 16px; border: 1.5px solid var(--u-line-strong); border-radius: 14px; background: var(--u-card); }
.u-declaration .u-checkline-lg:has(input:checked) { border-color: var(--u-navy); background: var(--u-navy-soft); }
.u-declaration .u-actions { border-top: 0; margin-top: 18px; padding-top: 0; }
.u-sent-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 22px 0; text-align: start; }
.u-sent-facts > div { padding: 14px 16px; border: 1px solid var(--u-line); border-radius: 14px; background: var(--u-surface-2); }
.u-sent-facts dt { margin-bottom: 4px; color: var(--u-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.u-sent-facts dd { margin: 0; font-weight: 700; color: var(--u-ink); overflow-wrap: anywhere; }
.u-sent-withdraw { margin: 12px 0 0; font-size: 14.5px; }
.u-sent-facts .u-badge { overflow-wrap: normal; text-align: start; }

@media (max-width: 640px) {
  .u-flow { padding: 14px 0 56px; }
  .u-flow-head { margin: 8px 0 18px; }
  .u-step { padding: 22px 18px 18px; border-radius: 16px; }
  .u-rsec { padding: 18px 16px; }
  .u-confirm-item { padding: 18px 16px 20px; }
  .u-doc { padding: 18px 16px; }
  .u-yesno { max-width: none; }
  .u-yesno span { min-height: 60px; }

  .u-progress ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .u-progress li, .u-progress li:not(:last-child) { flex-direction: column; align-items: center; text-align: center; }
  .u-progress li:not(:last-child)::after { position: absolute; top: 16px; inset-inline-start: calc(50% + 24px); inset-inline-end: calc(-50% + 24px); min-width: 0; margin: 0; }
  .u-progress li > a, .u-progress-locked { flex-direction: column; gap: 6px; width: 100%; padding: 0 2px; font-size: 12.5px; }
  .u-progress li > a span, .u-progress-locked span { max-width: 100%; }
  .u-progress b { width: 32px; height: 32px; }

  .u-actions { row-gap: 0; }
  .u-actions { align-items: stretch; }
  .u-actions > .u-btn-secondary { margin-top: 8px; min-height: 46px; padding: 8px 10px; font-size: 14px; line-height: 1.2; }
  .u-declaration .u-actions { position: static; margin: 18px 0 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .u-sent-facts { grid-template-columns: 1fr 1fr; }
  .u-sent-facts > div:last-child { grid-column: 1 / -1; }
  .u-discard-row { margin-top: 20px; }
  .u-discard-row span { display: block; margin-bottom: 4px; }
  .u-discard-row .u-link { margin-inline-start: 0; }
}
@media (max-width: 380px) {
  .u-sent-facts { grid-template-columns: 1fr; }
  .u-progress li > a, .u-progress-locked { font-size: 12px; }
}

/* ---------- access page: first-time / returning explanation (copy only, not options) ---------- */
.u-authcases { display: grid; gap: 10px; margin: 0 0 20px; }
.u-authcases > div { padding: 12px 14px; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface-2); }
.u-authcases dt { margin: 0 0 2px; color: var(--u-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.u-authcases dd { margin: 0; color: var(--u-ink-2); font-size: 14.5px; line-height: 1.5; }
@media (min-width: 641px) { .u-authcases { grid-template-columns: 1fr 1fr; } }

/* ---------- Pass 2 micro-polish: step actions, documents summary ---------- */
.u-save.save-error { color: var(--u-bad-ink); font-weight: 700; }
/* Wrapper groups are layout-neutral on desktop; order keeps: Back (left) · Saved · Save & finish later · primary */
.u-actions-flow .u-actions-secondary, .u-actions-flow .u-actions-primary { display: contents; }
.u-actions-flow .u-btn-back { order: 0; margin-inline-end: auto; }
.u-actions-flow .u-save { order: 1; }
.u-actions-flow .u-actions-secondary .u-btn:not(.u-btn-back) { order: 2; }
.u-actions-flow .u-actions-primary .u-btn { order: 3; }

.u-checksum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 22px; padding: 11px 16px; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface-2); font-size: 14.5px; color: var(--u-ink-2); }
.u-public .u-checksum { color: var(--u-ink-2); }
.u-checksum b { color: var(--u-ink); font-weight: 700; }
.u-checksum span::before { content: "·"; margin: 0 9px; color: var(--u-ink-3); }
.u-checksum.is-complete { border-color: var(--u-ok-line); background: var(--u-ok-faint); }
.u-checksum.is-complete b::before { content: "✓ "; color: var(--u-ok-ink); }

@media (max-width: 640px) {
  /* Only the primary action (and the small Saved chip) stays fixed to the viewport. */
  .u-actions-flow { display: contents; }
  .u-actions-flow .u-actions-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--u-line-2); }
  .u-actions-flow .u-actions-secondary .u-btn { order: 0; width: 100%; min-height: 46px; margin: 0; padding: 8px 10px; font-size: 14px; line-height: 1.2; }
  .u-actions-flow .u-actions-secondary .u-btn-solo { grid-column: 1 / -1; }
  .u-actions-flow .u-actions-primary { position: sticky; bottom: 0; z-index: 5; display: block; margin: 14px -18px -18px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--u-line); border-radius: 0 0 16px 16px; background: rgba(255, 255, 255, .97); }
  .u-actions-flow .u-actions-primary .u-btn { order: 0; display: flex; width: 100%; min-height: 52px; }
  .u-actions-flow .u-save { position: absolute; inset-inline-end: 14px; top: -38px; margin: 0; padding: 5px 12px 5px 8px; border: 1px solid var(--u-line); border-radius: 999px; background: var(--u-card); box-shadow: 0 2px 8px rgba(17, 17, 40, .08); font-size: 13px; }
  .u-checksum { display: grid; gap: 2px; margin-bottom: 18px; }
  .u-checksum span::before { content: none; }
}

/* =====================================================================
   Staff Pass 3A — compact recruitment operations console.
   The shell (top bar) is global. Density rules are scoped to .is-ops, which
   only the Overview, Vacancies, Applicants and Application pages opt into;
   Talent, settings, form builder and access pages keep their current look.
   ===================================================================== */
:root { --s-top-h: 48px; }

/* ---------- shell ---------- */
.s-top-row { gap: 20px; min-height: var(--s-top-h); }
.s-brand img { width: 54px; }
.s-brand span { padding-inline-start: 9px; font-size: 11.5px; letter-spacing: .1em; }
.s-nav { gap: 2px; }
.s-nav a { padding: 0 13px; font-size: 14px; letter-spacing: -.005em; }
.s-nav a.is-on { font-weight: 700; }
.s-top-right { gap: 8px; }
.s-icon-link { padding: 5px 9px; font-size: 13.5px; }
.s-user b { width: 28px; height: 28px; font-size: 11px; }
.s-signout { padding: 5px 6px; font-size: 13.5px; }

/* Cleaner phone/tablet nav: every item stays reachable by swiping, a soft fade on
   the right edge says there is more, and the active item is scrolled into view. */
@media (max-width: 760px) {
  :root { --s-top-h: 74px; }
  .s-top-row { gap: 0 10px; min-height: 0; padding-top: 6px; }
  .s-brand img { width: 50px; }
  .s-top-right { gap: 4px; }
  .s-nav { gap: 0; padding-inline-end: 16px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent); }
  .s-nav::-webkit-scrollbar { display: none; }
  .s-nav a { flex: none; min-height: 38px; padding: 0 8px; font-size: 13.5px; scroll-snap-align: start; white-space: nowrap; }
}

/* ---------- shared compact pieces (Pass 3A pages) ---------- */
.s-main.is-ops { padding: 14px 0 40px; }
.is-ops .s-head { align-items: center; margin-bottom: 12px; }
.is-ops .s-head h1 { font-size: 21px; letter-spacing: -.015em; }
.is-ops .s-head p { margin: 1px 0 0; font-size: 13px; }
.is-ops .s-card { margin-bottom: 12px; border-radius: 10px; box-shadow: 0 1px 2px rgba(17, 17, 40, .04); }
.is-ops .s-card-head { padding: 9px 14px; }
.is-ops .s-card-head h2 { font-size: 15px; }
.is-ops .s-card-sub { font-size: 12px; }
.is-ops .s-pad { padding: 12px 14px; }
.is-ops .s-empty { padding: 28px 16px; }
.is-ops .s-empty strong { font-size: 15px; }
.is-ops .u-btn-sm { min-height: 30px; padding: 3px 11px; font-size: 13px; border-radius: 8px; }
.is-ops .s-count { min-width: 24px; padding: 0 8px; font-size: 12px; line-height: 20px; }
.is-ops .s-status { padding: 1px 9px 1px 18px; font-size: 11.5px; line-height: 18px; }
.is-ops .s-status::before { inset-inline-start: 8px; width: 5px; height: 5px; margin-top: -2.5px; }
.is-ops .s-flag { padding: 0 6px; font-size: 11px; }
.is-ops .s-sub { font-size: 12px; line-height: 1.3; }
.is-ops .s-pager { padding: 6px 12px; font-size: 13px; }
.is-ops .s-note { padding: 8px 14px; font-size: 13px; }

/* vacancy header + sub-tabs (shared by every vacancy sub-page) */
.s-vhead { margin-bottom: 10px; }
.s-crumb { font-size: 12.5px; }
.s-vtitle { gap: 4px 10px; margin-top: 1px; }
.s-vtitle h1 { font-size: 21px; letter-spacing: -.015em; }
.s-vmeta { margin: 0; font-size: 13px; color: var(--u-ink-3) !important; }
.s-vsub { margin: 0 0 8px; font-size: 13px; }
.s-vhead .s-tabs-line { margin: 8px 0 0; }
.s-vhead .s-tabs-line a { padding: 7px 14px; font-size: 14px; }

/* cohort tabs: Applied / Not eligible / Unfinished */
.is-ops .s-tabs { gap: 4px; margin-bottom: 8px; }
.is-ops .s-tabs a { padding: 4px 12px; border-radius: 8px; font-size: 13px; }
.is-ops .s-tabs a b { margin-inline-start: 5px; padding: 0 6px; font-size: 11.5px; }

/* ---------- working toolbar: one compact row ---------- */
.is-ops .s-toolbar-card { margin-bottom: 8px; }
.is-ops .s-filter-row { gap: 6px 12px; padding: 8px 12px; }
.is-ops .s-toolbar-card .s-filter-row { justify-content: flex-start; }
.is-ops .s-stage-pills { flex: 1 1 auto; gap: 4px; }
.is-ops .s-stage-pills a { gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 13px; line-height: 20px; }
.is-ops .s-stage-pills a::before { width: 6px; height: 6px; }
.is-ops .s-stage-pills a b { font-size: 12px; font-variant-numeric: tabular-nums; }
.is-ops .s-search { gap: 6px; min-height: 0; margin-inline-start: auto; }
.is-ops .s-search input { min-width: 190px; height: 30px; padding: 3px 10px; border-width: 1px; border-radius: 8px; font-size: 13.5px; }
.is-ops .s-toolbar-card .s-more { flex: none; border-top: 0; }
.is-ops :where(input:not([type=checkbox]):not([type=radio]), select, textarea) { box-sizing: border-box; }
.is-ops .s-more > summary { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-card); font-size: 13px; }
.is-ops .s-more > summary::before { content: "+"; }
.is-ops .s-more[open] > summary::before { content: "\2013"; }
.is-ops .s-more > summary:hover { border-color: var(--u-line-violet); }
.is-ops .s-more > summary::-webkit-details-marker { display: none; }
.is-ops .s-toolbar-card .s-more[open] { flex: 1 0 100%; order: 9; padding-top: 6px; border-top: 1px solid var(--u-line-2); }
.is-ops .s-toolbar-card .s-more[open] > summary { border-color: var(--u-navy); color: var(--u-accent-ink); }
.is-ops .s-filter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 10px; padding: 10px 0 4px; }
.is-ops .s-filter-grid label { gap: 3px; font-size: 12px; }
.is-ops .s-filter-grid input, .is-ops .s-filter-grid select { width: 100%; min-width: 0; height: 30px; padding: 3px 8px; border-width: 1px; font-size: 13px; }
.is-ops .s-toolbar-card .s-active { flex: 1 0 100%; order: 5; gap: 6px; padding: 0; font-size: 13px; }
.is-ops .filter-chip { padding: 1px 9px; font-size: 12.5px; }

/* ---------- selection + export bar (no layout shift when rows are ticked) ---------- */
.is-ops .s-card[data-bulk-form] { overflow: clip; }
.s-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 42px; padding: 5px 12px; background: var(--u-surface-2); border-bottom: 1px solid var(--u-line-2); }
.s-actionbar .s-bulk-hint { font-size: 12.5px; color: var(--u-ink-3); }
.s-actionbar .s-bulkset { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.s-actionbar[data-bulk-toolbar].is-idle .s-bulkset { display: none; }
.s-actionbar[data-bulk-toolbar]:not(.is-idle) .s-bulk-hint { display: none; }
.s-actionbar[data-bulk-toolbar]:not(.is-idle) { position: sticky; top: var(--s-top-h); z-index: 15; background: var(--u-navy-soft); border-bottom-color: var(--u-line-violet); box-shadow: 0 3px 8px rgba(17, 17, 95, .08); }
.s-actionbar .s-bulk-count { display: inline-block; font-size: 14px; font-weight: 700; color: var(--u-accent-ink); white-space: nowrap; }
.s-actionbar .s-bulk-actions { gap: 6px; }
.s-actionbar .s-bulk-actions .u-btn-danger { margin-inline-start: 8px; }
.s-actionbar .s-reason { gap: 6px; font-size: 13px; }
.s-actionbar .s-reason input, .s-actionbar .s-reason select { height: 30px; min-width: 190px; padding: 3px 9px; border-width: 1px; font-size: 13px; }
.s-export { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-inline-start: auto; }
.s-export > strong { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.s-export label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--u-ink-2); }
.s-menu { position: relative; }
.s-menu > summary { list-style: none; cursor: pointer; }
.s-menu > summary::-webkit-details-marker { display: none; }
.s-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; min-width: 250px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--u-card); border: 1px solid var(--u-line-2); border-radius: 8px; box-shadow: 0 8px 22px rgba(17, 17, 95, .14); }
.s-menu-group { display: flex; flex-direction: column; }
.s-menu-group + .s-menu-group { border-top: 1px solid var(--u-line-2); margin-top: 4px; padding-top: 4px; }
.s-menu-group > strong { padding: 4px 10px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.s-menu-item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 13px; text-align: start; color: var(--u-ink-1, inherit); cursor: pointer; }
.s-menu-item:hover:not(:disabled), .s-menu-item:focus-visible { background: var(--u-navy-soft); }
.s-menu-item:disabled { opacity: .5; cursor: not-allowed; }
.s-menu-check { display: flex; align-items: center; gap: 6px; padding: 7px 10px 4px; border-top: 1px solid var(--u-line-2); margin-top: 4px; font-size: 12.5px; color: var(--u-ink-2); }
.s-export-one { margin: 0 0 0 auto; }
/* The bulk card clips its overflow (to keep sticky bars); give an open menu room so a short list cannot clip it. */
.is-ops .s-card[data-bulk-form]:has(.s-menu[open]) { min-height: 270px; }

/* ---------- applicant table (desktop stays a real table) ---------- */
@media (min-width: 761px) {
  .is-ops .s-table { font-size: 13.5px; }
  .is-ops .s-table th { padding: 6px 12px; font-size: 11px; letter-spacing: .05em; background: var(--u-surface-2); }
  .is-ops .s-table td { padding: 7px 12px; vertical-align: middle; line-height: 1.3; }
  .is-ops .s-table-roomy td { padding-top: 8px; padding-bottom: 8px; }
  .is-ops .s-table td.s-check, .is-ops .s-table th.s-check { width: 40px; padding: 0 !important; }
  .s-applicants .s-person { gap: 10px; }
  .s-applicants .s-avatar { width: 30px; height: 30px; font-size: 11px; }
  .s-applicants .s-strong { font-size: 14px; }
  .s-applicants tr.is-new .s-strong { font-weight: 800; }
  .s-applicants td:nth-child(2) { min-width: 230px; }
  .s-applicants td:nth-child(4) { min-width: 180px; }
  .s-applicants td[data-label="Status"], .s-applicants td[data-label="Applied"] { white-space: nowrap; }
  .s-applicants .s-open { width: 24px; height: 24px; font-size: 20px; }
  .is-ops .s-open-col { width: 34px; padding-inline-end: 10px !important; }
}
/* The whole checkbox cell is the hit area, so a near-miss never opens the row. */
.s-check-hit { display: flex; align-items: center; justify-content: center; min-height: 46px; cursor: pointer; }
.s-check input { width: 16px; height: 16px; margin: 0; }
.s-docmini { font-size: 12.5px; color: var(--u-ink-3); white-space: nowrap; }
.s-docmini b { font-weight: 700; color: var(--u-ink-2); }

/* ---------- Overview ---------- */
.is-ops .s-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.is-ops .s-kpi { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n l" "n h"; column-gap: 12px; align-items: center; padding: 9px 14px; border-radius: 10px; box-shadow: none; }
.is-ops .s-kpi strong { grid-area: n; min-width: 36px; font-size: 28px; }
.is-ops .s-kpi span { grid-area: l; align-self: end; font-size: 13.5px; line-height: 1.2; }
.is-ops .s-kpi small { grid-area: h; align-self: start; font-size: 12px; line-height: 1.25; }
.is-ops .s-kpi::after { top: 8px; inset-inline-end: 12px; font-size: 18px; }
.is-ops .s-two-col { gap: 12px; }
.is-ops .s-feed { padding: 2px 0; }
.is-ops .s-feed a { gap: 10px; padding: 6px 14px; }
.is-ops .s-feed .s-avatar { width: 28px; height: 28px; font-size: 11px; }
.is-ops .s-feed-main strong { font-size: 13.5px; }
.is-ops .s-feed-main small { font-size: 12px; }
.is-ops .s-foot { padding: 8px 14px; font-size: 12px; }
.is-ops .s-actions-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-ops .s-actions-list li { gap: 10px; padding: 7px 14px; border-top: 1px solid var(--u-line-2); border-bottom: 0; }
.is-ops .s-actions-list li:nth-child(-n+2) { border-top: 0; }
.is-ops .s-actions-list li:nth-child(odd) { border-inline-end: 1px solid var(--u-line-2); }
.is-ops .s-actions-list .s-status { min-width: 60px; }
.is-ops .s-actions-list .s-strong { font-size: 13.5px; }

/* ---------- Application detail ---------- */
.is-ops .s-vhead .s-avatar-lg { width: 34px; height: 34px; font-size: 12.5px; }
.is-ops .s-decide { top: calc(var(--s-top-h) + 4px); margin-bottom: 10px; padding: 6px 12px; }
.is-ops .s-decide-form { gap: 6px 12px; }
.is-ops .s-decide-label { font-size: 11px; }
.is-ops .s-decide .s-bulk-actions { gap: 6px; }
.is-ops .s-decide .u-btn { min-height: 32px; }
/* Reject sits apart from the three non-destructive moves, behind a divider. */
.is-ops .s-decide .u-btn-danger { position: relative; margin-inline-start: 16px; }
.is-ops .s-decide .u-btn-danger::before { content: ""; position: absolute; inset-inline-start: -11px; top: 5px; bottom: 5px; width: 1px; background: var(--u-line); }
.is-ops .s-strip { margin-bottom: 10px; border-radius: 10px; box-shadow: none; }
.is-ops .s-strip > div { gap: 0; padding: 7px 14px; border-top-width: 2px; }
.is-ops .s-strip span { font-size: 11px; }
.is-ops .s-strip strong { font-size: 15px; }
.is-ops .s-strip small { font-size: 12px; line-height: 1.3; }
.is-ops .s-flags { gap: 4px; margin-bottom: 10px; }
.is-ops .s-flags p { padding: 6px 12px; font-size: 13.5px; }
.is-ops .s-jump { gap: 4px; margin-bottom: 10px; }
.is-ops .s-jump a { padding: 3px 11px; font-size: 12.5px; }
.is-ops .s-detail-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.is-ops .s-detail-main > .s-card, .is-ops .s-detail-side > .s-card { scroll-margin-top: 108px; }
/* The right rail (notes + history) grows with its content. It used to be sticky inside a
   viewport-height box, which hid later history events behind a nested scroll. */
.is-ops .s-detail-side { position: static; }
.is-ops .s-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.is-ops .s-facts > div { padding: 8px 14px; }
.is-ops .s-facts dt { margin-bottom: 1px; font-size: 11px; }
.is-ops .s-facts dd { font-size: 14px; }
.is-ops .s-list > div { grid-template-columns: minmax(140px, 30%) 1fr; gap: 12px; padding: 6px 14px; }
.is-ops .s-list dt { font-size: 13px; }
.is-ops .s-two { gap: 20px; padding: 10px 14px; }
.is-ops .s-h3 { margin-bottom: 6px; font-size: 11px; }
.is-ops .s-item { margin-bottom: 8px; }
.is-ops .s-jobasks { margin: 0 14px; padding: 8px 0; font-size: 12.5px; }
.is-ops .s-doc-row { padding: 8px 14px; }
.is-ops .s-doc-actions { margin-top: 6px; }
.is-ops .s-review-form { gap: 8px; margin-top: 6px; }
.is-ops .s-review-form input[type="text"] { height: 30px; padding: 3px 9px; border: 1px solid var(--u-line-strong); border-radius: 8px; font-size: 13px; }
.is-ops .s-review-form .u-btn-danger { margin-inline-start: 6px; }
.is-ops .s-checks { gap: 4px; margin: 0 0 8px; }
.is-ops .s-checks li { gap: 8px; font-size: 13.5px; }
.is-ops .s-checks li > span { width: 18px; height: 18px; font-size: 11px; }
.is-ops #declaration .s-card-head h2 { font-size: 13px; color: var(--u-ink-2); }
.is-ops .s-declaration p { font-size: 13px; color: var(--u-ink-3); }
.is-ops .s-notes { gap: 8px; }
.is-ops .s-notes article { padding: 7px 10px; }
.is-ops .s-notes article p { font-size: 13.5px; }
.is-ops .s-timeline { gap: 0; padding: 4px 14px 8px; }
.is-ops .s-timeline li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 10px; padding: 7px 0; font-size: 13.5px; }
.is-ops .s-timeline li > b { width: 8px; height: 8px; margin-top: 5px; }
.is-ops .s-doc-main { flex: 1 1 auto; }
.is-ops .u-link { font-size: 13px; }

/* Narrow desktops and tablets keep the real table: trim padding and the avatar so every
   column, including Applied, stays in view without sideways scrolling. */
@media (min-width: 761px) and (max-width: 1000px) {
  .is-ops .s-table th, .is-ops .s-table td { padding-inline-start: 8px; padding-inline-end: 8px; }
  .s-applicants .s-avatar { display: none; }
  .s-applicants td:nth-child(2) { min-width: 170px; }
  .s-applicants td:nth-child(4) { min-width: 140px; }
  .is-ops .s-open-col { width: 26px; padding-inline-end: 6px !important; }
}

/* ---------- tablet / phone ---------- */
@media (max-width: 980px) {
  .is-ops .s-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-ops .s-actions-list { grid-template-columns: 1fr; }
  .is-ops .s-actions-list li:nth-child(2) { border-top: 1px solid var(--u-line-2); }
  .is-ops .s-actions-list li:nth-child(odd) { border-inline-end: 0; }
  .is-ops .s-detail-grid { grid-template-columns: 1fr; }
  .is-ops .s-detail-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .s-main.is-ops { padding-top: 10px; }
  .is-ops .s-search { flex: 1 1 100%; max-width: none; margin-inline-start: 0; }
  .is-ops .s-search input { flex: 1; min-width: 0; height: 36px; }
  .is-ops .s-more > summary { height: 36px; }
  .is-ops .s-stage-pills a { padding: 5px 11px; }
  .s-check-hit { min-height: 36px; }
  /* Selection bar: the status part sticks under the header only while something is
     ticked; the hint and export stay in normal flow so the sticky part is two short rows. */
  .s-actionbar { display: contents; }
  .s-actionbar .s-bulk-hint { display: block; padding: 8px 10px 0; background: var(--u-surface-2); }
  .s-actionbar .s-bulkset { flex: none; padding: 6px 10px; background: var(--u-navy-soft); border-bottom: 1px solid var(--u-line-violet); }
  .s-actionbar[data-bulk-toolbar]:not(.is-idle) .s-bulkset { position: sticky; top: var(--s-top-h); z-index: 15; box-shadow: 0 3px 8px rgba(17, 17, 95, .1); }
  .s-actionbar .s-bulk-actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-actionbar .s-bulk-actions .u-btn { min-height: 34px; padding: 0 4px; font-size: 12.5px; }
  .s-actionbar .s-bulk-actions .u-btn-danger { margin-inline-start: 0; }
  .s-actionbar .s-reason { flex: 1 1 100%; }
  .s-actionbar .s-reason input { flex: 1; min-width: 0; }
  .s-export { padding: 6px 10px 8px; margin-inline-start: 0; background: var(--u-surface-2); border-bottom: 1px solid var(--u-line-2); }
  .s-export .u-btn { min-height: 32px; }
  .is-ops .s-decide .s-bulk-actions { display: grid; flex: 1 1 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .is-ops .s-decide .u-btn { min-height: 38px; padding: 0 4px; }
  .is-ops .s-decide .u-btn-danger { grid-column: 1 / -1; margin: 6px 0 0; }
  .is-ops .s-decide .u-btn-danger::before { content: none; }
  .is-ops .s-kpi { padding: 8px 10px; column-gap: 8px; }
  .is-ops .s-kpi strong { font-size: 24px; min-width: 28px; }
}

/* =====================================================================
   Staff Pass 3B — Talent, settings, user access, form builder, eligibility.
   Reuses the Pass 3A density (.is-ops) and tokens. Nothing here changes behaviour;
   legacy pms.css is still loaded for screens not migrated yet (candidate preview, login).
   ===================================================================== */
.is-ops [hidden] { display: none !important; }

/* ---------- shared: forms, checkboxes, empty states ---------- */
.s-req { margin-inline-start: 3px; color: var(--u-brand); font-weight: 700; }
.u-staff .u-checkline input[type="checkbox"] { position: static; flex: none; width: 16px; height: 16px; margin: 0; opacity: 1; accent-color: var(--u-navy); }
.is-ops .u-checkline { gap: 8px; font-size: 14px; }
.is-ops .u-alert { padding: 8px 12px; font-size: 13.5px; }
.is-ops .u-alert { margin-bottom: 10px; }
.is-ops .u-hint, .is-ops .u-error { font-size: 12.5px; }
.u-error::before { content: "! "; font-weight: 800; }
.is-ops .s-form-grid { gap: 12px 16px; padding: 14px 16px; }
.is-ops .s-form-grid.s-flat, .s-flat { padding: 0; }
.is-ops .s-field { gap: 4px; }
.is-ops .s-field > label { font-size: 13px; }
.is-ops .s-field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { box-sizing: border-box; padding: 6px 10px; border-width: 1px; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.is-ops .s-field :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 32px; }
.is-ops .s-field textarea { min-height: 0; }
.is-ops .s-field.has-error :where(input, select, textarea) { border-width: 1.5px; }
.is-ops .s-field-check { padding-bottom: 2px; }
.is-ops .s-form-narrow { max-width: 600px; }
.s-form-medium { max-width: 880px; }
.is-ops .s-savebar { padding: 8px 0; margin-bottom: 8px; }
.s-savebar-split { align-items: center; justify-content: space-between; }
.is-ops .s-empty-slim { padding: 14px 16px; }
.is-ops .s-empty .u-btn { margin-top: 2px; }
.s-zero { color: var(--u-ink-3); opacity: .65; }
.is-ops .s-card-head h2 .s-count-chip { margin-inline-start: 6px; padding: 1px 8px; font-size: 11.5px; vertical-align: middle; }
.is-ops .s-sub-fold { margin-top: 6px; }
.is-ops .s-sub-fold > summary { padding: 3px 0; font-size: 13.5px; }
.s-card-fold { margin: 0; border-top: 1px solid var(--u-line-2); }
.s-card-fold > summary { padding: 9px 16px; }
.s-card-fold > .s-form-grid { padding-top: 4px; }

/* ---------- Talent: pool index ---------- */
.s-pools .s-strong { font-size: 14.5px; }
.s-pools td.s-num { width: 1%; white-space: nowrap; }
.s-pools tr.is-inactive { opacity: .7; }
.s-pools tr.is-inactive .s-strong { font-weight: 600; color: var(--u-ink-2); }

/* ---------- Talent: pool detail ---------- */
.s-stage-pills a.s-pill-qualified::before { background: var(--u-ok); }
.s-stage-pills a.s-pill-unreviewed::before { background: var(--u-info); }
.s-stage-pills a.s-pill-not_suitable::before { background: var(--u-bad); }
.is-ops .s-talent-note { padding: 0 0 6px; font-size: 12px; }
.is-ops .s-talent td[data-label="Applied for"] { max-width: 260px; }
.is-ops .s-suit, .is-ops .s-docstate { padding: 1px 9px; font-size: 11.5px; line-height: 18px; white-space: nowrap; }
.s-actionbar-3 .s-bulk-actions .u-btn-danger { margin-inline-start: 8px; }
@media (max-width: 760px) {
  .s-actionbar.s-actionbar-3 .s-bulk-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-actionbar.s-actionbar-3 .s-bulk-actions .u-btn-danger { margin-inline-start: 0; }
}

/* ---------- Talent: member detail ---------- */
.s-member .s-detail-side { position: static; max-height: none; overflow: visible; }
.s-member .s-vtitle .s-suit { align-self: center; }
.s-member .s-doc-main .s-tag { margin-inline-start: 4px; }
.s-member .s-facts { grid-template-columns: 1fr 1fr; }
.s-member .s-facts > div { border-inline-end: 0; }

/* ---------- Settings / master data ---------- */
.s-settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: start; }
.s-settings-main { min-width: 0; }
.s-settings-main section[id] { scroll-margin-top: calc(var(--s-top-h) + 12px); }
.s-sidenav { position: sticky; top: calc(var(--s-top-h) + 12px); display: grid; gap: 1px; padding: 5px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); }
.s-sidenav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--u-ink-2); }
.s-sidenav a:hover { background: var(--u-hover); color: var(--u-ink); }
.s-sidenav a b { font-size: 11.5px; font-weight: 700; color: var(--u-ink-3); font-variant-numeric: tabular-nums; }
.s-sidenav .s-sidenav-quiet { margin-top: 3px; border-top: 1px solid var(--u-line-2); border-radius: 0 0 7px 7px; color: var(--u-ink-3); }
.is-ops .s-rows li { gap: 10px; padding: 7px 14px; }
.is-ops .s-rows li.is-inactive .s-rows-main { opacity: .62; }
.is-ops .s-mark { width: 32px; height: 32px; border-radius: 8px; }
.is-ops .s-mark b { font-size: 11px; }
.is-ops .s-advanced > summary { padding: 6px 2px; font-size: 13px; }
.is-ops .s-advanced > .s-card { margin-top: 8px; }
.is-ops .s-logo-preview { padding: 8px 10px; border-radius: 10px; }
@media (max-width: 860px) {
  .s-settings { grid-template-columns: 1fr; gap: 10px; }
  .s-sidenav { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
  .s-sidenav::-webkit-scrollbar { display: none; }
  .s-sidenav a { flex: none; gap: 6px; white-space: nowrap; }
  .s-sidenav .s-sidenav-quiet { margin-top: 0; border-top: 0; }
}

/* ---------- User access ---------- */
.is-ops .s-subnav { margin-bottom: 10px; padding: 2px; border-radius: 10px; }
.is-ops .s-subnav a { padding: 4px 13px; border-radius: 8px; font-size: 13.5px; }
.is-ops .s-crumb { margin: 0 0 4px; }
.is-ops .s-user-filter .s-search { flex: 1 1 240px; max-width: 360px; min-height: 30px; height: 30px; margin-inline-start: 0; padding: 3px 10px; border-width: 1px; border-radius: 8px; font-size: 13.5px; }
.s-user-count { margin-inline-start: auto; font-size: 13px; }
.is-ops .s-person b { width: 28px; height: 28px; font-size: 11px; }
.is-ops .s-users td { vertical-align: middle; }
.is-ops .s-users .s-chip { padding: 1px 9px; font-size: 12px; }
.s-users tr.is-inactive { opacity: .72; }
.is-ops .s-presets { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.is-ops :where(.s-preset, .s-radio, .s-cap) { gap: 9px; padding: 7px 10px; border-width: 1px; border-radius: 9px; }
.is-ops :where(.s-preset, .s-radio, .s-cap) input { width: 16px; height: 16px; }
.is-ops :where(.s-preset, .s-radio, .s-cap) strong { font-size: 13.5px; }
.is-ops :where(.s-preset, .s-radio, .s-cap) small { font-size: 12px; line-height: 1.35; }
.is-ops .s-caps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 16px; }
.is-ops .s-capgroup { gap: 5px; }
.is-ops .s-capgroup legend { margin-bottom: 5px; font-size: 11px; }
.is-ops .s-clientpick { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 10px; }
.is-ops .s-grid-2 { gap: 10px 14px; }
.is-ops .s-grid-1 { gap: 10px; }
.is-ops .s-tag-sens { padding: 0 7px; font-size: 11px; }
.s-account-actions .s-card-head { border-bottom: 0; }
.s-action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 10px 14px; border-top: 1px solid var(--u-line-2); }
.s-action-row > div:first-child { min-width: 220px; }
.s-action-row form { margin: 0; }
.s-action-danger { background: var(--u-brand-faint); }
.is-ops .s-inline-form .u-input { flex: 1 1 220px; max-width: 280px; }

/* ---------- Form builder ---------- */
.is-ops .s-publish-state { gap: 8px 20px; margin-bottom: 10px; padding: 8px 14px; }
.s-flow { margin: 0 0 10px; }
.s-flow a { display: inline-flex; align-items: center; gap: 6px; }
.s-flow a b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--u-navy); color: #fff; font-size: 11px; font-weight: 800; }
.s-flow a span { color: var(--u-ink-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.is-ops .s-fold > summary { gap: 10px; padding: 9px 14px; }
.is-ops .s-fold > summary h2 { font-size: 15px; }
.is-ops .s-fold > summary .s-muted { font-size: 12.5px; }
.is-ops .s-step-no { width: 24px; height: 24px; font-size: 12px; }
.s-step-sm { display: inline-grid; width: 22px; height: 22px; margin-inline-end: 6px; font-size: 11.5px; vertical-align: middle; }
.is-ops .s-count-chip { padding: 1px 10px; font-size: 12px; }
.is-ops .s-levels { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.is-ops .s-level { padding: 8px 12px; border-width: 1px; border-radius: 9px; }
.is-ops .s-level small { font-size: 12px; }
.is-ops .s-hint-line { margin: 2px 0 6px; font-size: 13px; }
.is-ops .s-pr-row { padding: 4px 0; }
.is-ops .s-h3-gap { margin-top: 18px; }
.is-ops .s-section-name { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.is-ops .s-qlist { border-radius: 9px; }
.is-ops .s-qlist li { justify-content: flex-start; gap: 10px; padding: 7px 12px; }
.is-ops .s-qlist .s-qmain { flex: 1 1 auto; }
.is-ops .s-qlist .s-qmain strong { font-size: 14px; }
.s-qno { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--u-surface-3); color: var(--u-ink-2); font-size: 11.5px; font-weight: 800; }
.s-qmain .s-sub { margin-top: 2px; }
.s-qmain .s-tag { margin: 0 6px 0 0; }
.s-tag-cond { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-qremove { margin-inline-start: 4px; padding-inline-start: 12px; border-inline-start: 1px solid var(--u-line); }
.s-qempty { justify-content: flex-start; padding: 10px 12px; font-size: 13.5px; color: var(--u-ink-3); }
.is-ops .s-publish-card { padding: 12px 16px; }
.is-ops .s-publish-card h2 { font-size: 16px; }
.is-ops .s-big { font-size: 28px; }
.s-more-options > summary h2 { margin: 0; font-size: 15px; }
.s-stack { display: grid; gap: 14px; }
.s-options-list { display: grid; gap: 0; }
.s-option-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--u-line-2); }
.s-option-row:first-child { padding-top: 0; }
.s-option-row:last-child { border-bottom: 0; padding-bottom: 0; }
.s-option-row .s-qno { margin-top: 5px; }
.s-option-row .s-crit-remove { padding-top: 6px; }
@media (max-width: 640px) {
  .is-ops .s-qlist li { flex-wrap: wrap; }
  .is-ops .s-qlist .s-qactions { flex: 1 1 100%; flex-wrap: wrap; padding-inline-start: 32px; }
  .s-publish-state, .s-publish-card { align-items: flex-start; }
  .s-option-row { grid-template-columns: 28px minmax(0, 1fr); }
  .s-option-row .s-crit-remove { grid-column: 2; padding-top: 0; }
}

/* ---------- Eligibility ---------- */
.s-rule { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.s-rule-hard { border: 1px solid var(--u-bad-line); background: var(--u-brand-soft); color: var(--u-brand-ink); }
.s-rule-flag { border: 1px dashed #e0b45c; background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-rule-live { display: none; }
.s-rule-legend { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 1px solid var(--u-line-2); }
.s-rule-legend > div { padding: 8px 14px; }
.s-rule-legend > div + div { border-inline-start: 1px solid var(--u-line-2); }
.s-rule-legend dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--u-ink-2); }
.is-ops .s-crit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; margin-bottom: 8px; padding: 10px 12px; border-inline-start: 4px solid var(--u-line); border-radius: 10px; }
.is-ops .s-crit > .s-crit-top, .is-ops .s-crit > .s-sub-fold, .is-ops .s-crit > .u-alert { grid-column: 1 / -1; }
.s-crit:has(option[value="HARD_BLOCK"]:checked) { border-inline-start-color: var(--u-brand); }
.s-crit:has(option[value="FLAG_ONLY"]:checked) { border-inline-start: 4px dashed #d49a2c; }
.s-crit:has(option[value="HARD_BLOCK"]:checked) .s-rule-hard, .s-crit:has(option[value="FLAG_ONLY"]:checked) .s-rule-flag { display: inline-flex; }
.is-ops .s-crit-top { gap: 8px 12px; }
.is-ops .s-crit-no { width: 24px; height: 24px; font-size: 12px; }
.is-ops .s-crit-type { flex: 0 1 270px; min-width: 190px; }
.is-ops .s-crit-type select { box-sizing: border-box; min-height: 32px; padding: 5px 10px; border-width: 1px; font-size: 13.5px; }
.s-crit-tools { margin-inline-start: auto; }
.is-ops .s-crit-remove { gap: 5px; padding-inline-start: 10px; border-inline-start: 1px solid var(--u-line); font-size: 13px; }
.s-crit-remove input { accent-color: var(--u-bad); }
.is-ops .s-crit textarea { box-sizing: border-box; padding: 6px 10px; border-width: 1px; border-radius: 8px; font-size: 14px; }
.is-ops .s-crit .s-field select, .is-ops .s-crit .s-field textarea { background: var(--u-card); }
.s-savebar-split .s-small { margin-inline-end: auto; }
@media (max-width: 760px) {
  .s-rule-legend { grid-template-columns: 1fr; }
  .s-rule-legend > div + div { border-inline-start: 0; border-top: 1px solid var(--u-line-2); }
  .is-ops .s-crit { grid-template-columns: 1fr; }
  .s-crit-tools { margin-inline-start: 0; }
  .s-savebar-split { justify-content: flex-end; }
  .s-savebar-split .s-small { display: none; }
}

/* ---------- phone: dense tables become readable rows ---------- */
@media (max-width: 760px) {
  .s-pools thead, .s-users thead { display: none; }
  .s-pools, .s-pools tbody, .s-users, .s-users tbody { display: block; }
  .s-pools tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid var(--u-line-2); }
  .s-pools tbody td, .s-users tbody td { padding: 0; border: 0; }
  .s-pools td[data-label="Talent pool"] { grid-column: 1 / 4; }
  .s-pools td[data-label="Status"] { grid-column: 4; text-align: end; }
  .s-pools td.s-num { width: auto; text-align: start; font-size: 14px; }
  .s-pools td.s-num::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
  .s-pools .s-open-col, .s-users .s-open-col { display: none; }
  .s-users tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px; border-bottom: 1px solid var(--u-line-2); }
  .s-users td[data-label="Staff user"] { grid-column: 1; grid-row: 1; }
  .s-users td[data-label="Status"] { grid-column: 2; grid-row: 1; text-align: end; }
  .s-users td[data-label="Access preset"], .s-users td[data-label="Data access"] { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; }
  .s-users td[data-label="Access preset"]::before, .s-users td[data-label="Data access"]::before { content: attr(data-label); flex: none; width: 98px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
  .s-users td .s-sub { display: inline; }
  .s-user-count { margin-inline-start: 0; }
  .s-member .s-facts { grid-template-columns: 1fr 1fr; }
}

/* Timelines without a leading dot marker (pool history, access activity) stay single-column. */
.is-ops .s-timeline.s-timeline-plain li { grid-template-columns: minmax(0, 1fr); row-gap: 1px; padding: 6px 0; }
.is-ops .s-timeline.s-timeline-plain { padding: 4px 14px 8px; }
.is-ops .s-rows li { padding-top: 5px; padding-bottom: 5px; }
.is-ops .s-rows-main strong { font-size: 14px; }
.is-ops .s-rows .s-sub { font-size: 12px; line-height: 1.25; }
.is-ops .s-publish-state { font-size: 13.5px; }
.is-ops .s-publish-text { gap: 8px 10px; }
.is-ops .eligibility-setup-form .s-form-grid textarea { height: 8.5em; }
@media (max-width: 760px) {
  .s-users td[data-label="Status"] .s-sub { display: block; }
  .s-users td[data-label="Access preset"]::before, .s-users td[data-label="Data access"]::before { width: 112px; white-space: nowrap; }
}

/* Candidate Database (staff). Reuses the Talent table/cards; only the pieces below are new. */
.s-cdb-table td[data-label="Candidate"] { min-width: 230px; }
.s-cdb-table td[data-label="Qualification"], .s-cdb-table td[data-label="Experience"] { min-width: 160px; }
.s-cdb-pool { display: block; margin-bottom: 2px; font-size: 13.5px; }
.s-cdb-pool .s-suit { margin-inline-start: 4px; }
.s-cdb-warn { flex-basis: 100%; margin: 0; }
.s-cdb-warn[hidden] { display: none; }
.s-cdb-x { margin-inline-start: 4px; color: inherit; font-weight: 700; text-decoration: none; }
.s-cdb-frame { margin-bottom: 14px; border-radius: var(--u-radius-sm); }
.s-cdb-app .s-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s-cdb-table .s-tag { margin-inline-start: 0; }
.s-table.s-cdb-table tr.is-inactive { opacity: 1; }
/* Single-column detail: lift the side rail's cards into the main flow so Documents/Talent precede Application history. */
@media (max-width: 980px) {
  .s-cdb .s-detail-main, .s-cdb .s-detail-side { display: contents; }
  .s-cdb .s-cdb-sec-current { order: 1; }
  .s-cdb .s-cdb-sec-education { order: 2; }
  .s-cdb .s-cdb-sec-employment { order: 3; }
  .s-cdb .s-cdb-sec-docs { order: 4; }
  .s-cdb .s-cdb-sec-pools { order: 5; }
  .s-cdb .s-cdb-sec-history { order: 6; }
}
@media (max-width: 760px) {
  .s-cdb-table thead { display: none; }
  .s-cdb-table, .s-cdb-table tbody { display: block; }
  .s-cdb-table tbody tr { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--u-line-2); }
  .s-cdb-table tbody td { padding: 0; border: 0; min-width: 0 !important; }
  .s-cdb-table td[data-label="Candidate"] { margin-bottom: 4px; }
  .s-cdb-table td[data-label]:not([data-label="Candidate"]) { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
  .s-cdb-table td[data-label]:not([data-label="Candidate"])::before { content: attr(data-label); flex: none; width: 98px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
  .s-cdb-table td:not([data-label="Candidate"]) .s-sub { display: inline; }
  .s-cdb-table .s-open-col { display: none; }
  .s-cdb .s-vtitle h1 { font-size: 20px; }
}

/* Overview -> Applicants stage filter: quiet filter line and the highlighted stage column. */
.is-ops .s-stage-filter { margin: -4px 0 10px; padding: 0; font-size: 13.5px; color: var(--u-ink-2); }
.is-ops .s-stage-filter > span:first-child { font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; }
.s-table th.is-hl, .s-table td.is-hl { background: var(--u-navy-soft); }
/* Not eligible list on a phone: the reason matters more than the (repeated) progress step. */
@media (max-width: 760px) { .s-drafts .s-col-progress { display: none; } }
@media (max-width: 560px) { .s-drafts .s-col-active { display: none; } }

/* PH-10 Slice B: interviews */
.s-interviews { display: grid; gap: 10px; }
.s-interview { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--u-line-2); border-radius: 10px; }
.s-interview.is-cancelled { opacity: .72; }
.s-interview-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 280px; }
.s-interview-side { display: flex; align-items: center; gap: 8px; }
.s-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.s-inline-form .u-input { min-width: 220px; flex: 1 1 220px; }
.s-decide-next { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--u-line-2); }
.s-evaluators { margin: 14px 0; }
.s-evaluators ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Staff-assisted applications (Assist application workspace) ---------- */
.s-assist-note { margin-bottom: 12px; }
.s-assist-alert { margin-bottom: 12px; }
.s-assist-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin-bottom: 12px; border-inline-start: 4px solid var(--u-navy); }
.s-assist-cta p { margin: 2px 0 0; font-size: 14px; max-width: 62ch; }
.s-assist-steps { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.s-assist-steps::-webkit-scrollbar { display: none; }
.s-assist-steps a { flex: 1 1 0; min-width: max-content; display: flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); color: var(--u-ink-2); font-weight: 600; font-size: 14px; }
.s-assist-steps a:hover { border-color: var(--u-navy); color: var(--u-accent-ink); }
.s-assist-steps a.is-current { border-color: var(--u-navy); background: var(--u-navy-soft); color: var(--u-accent-ink); box-shadow: inset 0 -3px 0 var(--u-navy); }
.s-assist-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--u-surface-3); color: var(--u-ink-2); font-size: 12.5px; font-weight: 800; }
.s-assist-steps .is-done .s-assist-dot { background: var(--u-ok); color: #fff; }
.s-assist-steps .is-blocked .s-assist-dot { background: var(--u-bad); color: #fff; }
.s-assist-steps .is-ready .s-assist-dot { background: var(--u-navy); color: #fff; }
.s-assist-steps .is-current .s-assist-dot { background: var(--u-navy); color: #fff; }
.s-assist-steps .is-done.is-current .s-assist-dot { background: var(--u-ok); }
.s-assist-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.s-assist-actions > .u-btn:only-child, .s-assist-actions > :last-child:not(:only-child) { margin-inline-start: auto; }
.s-assist-fields { padding: 16px 18px; }
.s-assist-lock { border-top: 1px solid var(--u-line-2); }
.s-assist-declare { gap: 8px; padding-top: 6px; border-top: 1px dashed var(--u-line); }
.s-assist-declare-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.s-assist-todo { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.s-assist-todo li { position: relative; padding-inline-start: 20px; font-size: 14px; line-height: 1.4; }
.s-assist-todo li::before { content: "!"; position: absolute; inset-inline-start: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--u-warn-soft); color: var(--u-warn-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.s-assist-todo a { color: var(--u-ink); }
.s-assist-todo a:hover { color: var(--u-accent-ink); text-decoration: underline; }
.s-assist-todo-lg { margin-top: 12px; }
.s-assist-elig { border-inline-start: 4px solid var(--u-line); }
.s-assist-elig.is-blocked { border-inline-start-color: var(--u-bad); }
.s-assist-elig.is-passed { border-inline-start-color: var(--u-ok); }
.s-assist-record { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--u-line-2); }
.s-assist-record .s-item { margin: 0; }
.s-assist-record-actions { display: flex; align-items: center; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.s-assist-remove > summary { list-style: none; cursor: pointer; padding: 4px 10px; font-size: 14px; color: var(--u-bad-ink); }
.s-assist-remove > summary::-webkit-details-marker { display: none; }
.s-assist-remove[open] { padding-bottom: 6px; }
.s-assist-mini { margin-top: 14px; border: 1px solid var(--u-line); border-radius: var(--u-radius-sm); background: var(--u-surface-2); }
.s-assist-mini h4 { margin: 0; padding: 10px 14px 0; font-size: 14px; }
.s-assist-mini .s-form-grid { padding: 10px 14px; gap: 10px 14px; }
.s-assist-mini .s-assist-actions { background: transparent; }
.s-assist-docs { margin: 0; padding: 0; list-style: none; }
.s-assist-docs > li { padding: 12px 18px; border-bottom: 1px solid var(--u-line-2); display: grid; gap: 8px; }
.s-assist-docs > li.is-missing { background: var(--u-warn-faint); }
.s-assist-docs > li.has-error { background: var(--u-bad-soft); }
.s-assist-doc-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.s-assist-doc-state { flex: none; }
.s-assist-upload { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.s-assist-file { max-width: 100%; font-size: 14px; }
.s-assist-expiry { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.s-assist-expiry .u-input { width: auto; }
.s-assist-remove-doc { margin: 0; font-size: 14px; }
.s-assist-declaration { display: grid; gap: 14px; }
.s-assist-confirm { padding: 12px 14px; border: 1.5px solid var(--u-navy); border-radius: var(--u-radius-sm); background: var(--u-navy-soft); align-items: flex-start; font-size: 15px; }
.s-assist-confirm input { margin-top: 3px; flex: none; }
.s-assist-submitted { border-bottom: 1px solid var(--u-line-2); }
/* compact the shared candidate question markup for dense staff screens */
.s-assist .u-input { min-height: 40px; font-size: 15px; padding: 8px 12px; border-radius: 10px; }
.s-assist .u-questions { gap: 16px; }
.s-assist .u-q-label { font-size: 15px; font-weight: 600; }
.s-assist .u-q-ur { font-size: 16px; line-height: 1.8; }
.s-assist .u-yesno { max-width: 300px; gap: 8px; }
.s-assist .u-yesno span { min-height: 40px; font-size: 15px; border-width: 1.5px; border-radius: 10px; }
.s-assist .u-option { padding: 9px 12px; }
.s-assist .u-confirm { margin-top: 18px; padding-top: 16px; gap: 12px; }
.s-assist .u-confirm h3 { font-size: 16px; }
.s-assist .u-confirm-item { padding: 12px 14px; border-radius: 10px; box-shadow: none; gap: 8px; }
.s-assist .u-confirm-item legend { font-size: 15px; }
.s-assist .s-field input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--u-navy); }
@media (max-width: 980px) {
  .s-assist-cta { flex-direction: column; align-items: stretch; }
  .s-assist-steps a { flex: none; }
  .s-assist-record { flex-direction: column; }
  .s-assist-record-actions { justify-content: flex-start; }
  .s-assist-actions { flex-direction: column; align-items: stretch; }
  .s-assist-actions > .u-btn { width: 100%; margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .s-assist .s-form-grid { grid-template-columns: 1fr; }
}
.s-drafts .s-row-actions { white-space: nowrap; }
.s-assist-file { padding: 0; }
.s-assist-file::file-selector-button { margin-inline-end: 10px; padding: 8px 14px; border: 1px solid var(--u-line-violet); border-radius: 10px; background: var(--u-card); color: var(--u-accent-ink); font: 600 14px/1.2 var(--u-font); cursor: pointer; }
.s-assist-file::file-selector-button:hover { border-color: var(--u-navy); background: var(--u-navy-soft); }

/* =====================================================================
   CV-01: CV + recent photograph warning. Strongly red and attention-grabbing,
   with one gentle pulse (a soft ring, never a strobe). Reduced motion keeps the
   same red, static.
   ===================================================================== */
.u-cv-warning { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; background: #c40018; color: #fff; border: 2px solid #8f0012; box-shadow: 0 0 0 0 rgba(196, 0, 24, .55); animation: u-cv-pulse 2.4s ease-in-out infinite; }
.u-cv-warning-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--u-card); color: var(--u-bad-deep); font: 800 20px/1 var(--u-font); }
.u-public .u-cv-warning p, .u-cv-warning p { margin: 0; color: #fff; }
.u-cv-warning-ur { font-family: var(--u-font-ur); font-size: 18px; font-weight: 700; line-height: 2.05; }
.u-cv-warning-en { margin-top: 2px; font-size: 14px; line-height: 1.45; opacity: .95; }
.u-cv-warning-btn { background: var(--u-card); color: var(--u-bad-deep); border-color: var(--u-card); white-space: nowrap; }
.u-cv-warning-btn:hover { background: var(--u-brand-soft); }
@keyframes u-cv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 0, 24, .5); }
  50% { box-shadow: 0 0 0 9px rgba(196, 0, 24, 0); }
}
@media (max-width: 640px) {
  .u-cv-warning { grid-template-columns: auto 1fr; padding: 14px; }
  .u-cv-warning-btn { grid-column: 1 / -1; width: 100%; }
  .u-cv-warning-ur { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .u-cv-warning { animation: none; box-shadow: none; }
}

.u-cvp-status { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.u-cvp-status li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--u-surface-2); border: 1px solid var(--u-line); font-weight: 600; }
.u-cvp-status li.is-ok { background: var(--u-ok-soft); border-color: var(--u-ok-line); color: var(--u-ok-deep); }
.u-cvp-status li small { display: block; font-weight: 500; color: var(--u-ink-3); }
.u-cvp-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--u-card); border: 1.5px solid var(--u-line-violet); font-size: 13px; }
.u-cvp-status li.is-ok .u-cvp-mark { background: var(--u-ok); border-color: var(--u-ok); color: #fff; }
.u-cvp-form { display: grid; gap: 12px; }
.u-cvp-or { margin: 4px 0; text-align: center; color: var(--u-ink-3); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* CV-01: staff assist card for the CV + recent photograph. */
.s-assist-cvphoto { padding: 12px 18px; border-bottom: 1px solid var(--u-line-2); display: grid; gap: 8px; background: var(--u-warn-faint); }
.s-assist-cvlist { margin: 0; padding-inline-start: 18px; }
.s-assist-cvphoto .s-assist-upload { flex-wrap: wrap; }

/* CV-01B: staff compliance screen. */
.s-cvc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--u-line-2); }
.s-cvc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.s-cvc-check { width: 36px; }
.s-cvc-counts { margin: 10px 0 16px; padding-inline-start: 18px; display: grid; gap: 4px; }
.s-cvc-send { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.s-cvc-mail p { margin: 0 0 8px; }
.s-cvc-body { max-width: 640px; }
.s-cvc-body[dir="rtl"] { font-family: var(--u-font-ur); line-height: 2; }
@media (max-width: 640px) { .s-cvc-actions .u-btn { width: 100%; } }
.s-cvc-frame { display: block; width: 100%; height: 1100px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-surface-3); }
.s-cvc-plain pre { white-space: pre-wrap; font: 13px/1.5 var(--u-font); padding: 12px; background: var(--u-surface-2); border: 1px solid var(--u-line); border-radius: 8px; }
@media (max-width: 640px) { .s-cvc-frame { height: 1500px; } }

/* SCREEN-01: Recruitment / Screening Mode. Logical properties only, so it mirrors in RTL. */
.sc-head { margin-bottom: 6px; }
.sc-bar { position: sticky; top: var(--s-top-h, 58px); z-index: 18; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 10px 16px; margin-bottom: 14px; }
.sc-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.sc-count { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sc-meter { flex: 0 1 180px; min-width: 90px; height: 8px; border-radius: 999px; background: var(--u-line-2); overflow: hidden; }
.sc-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--u-ok); }
.sc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sc-nav .s-inline-form { margin: 0; }
.sc-nav .is-disabled, .sc-nav .u-btn:disabled { opacity: .5; pointer-events: none; }
.sc-state-pending { background: var(--u-line-2); color: var(--u-ink-2); }
.sc-state-reviewed { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.sc-state-skipped { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.sc-decide { padding: 12px 18px; display: grid; gap: 12px; }
.sc-decide .s-decide-next { padding-block-start: 10px; border-block-start: 1px solid var(--u-line-2); }
.sc-schedule > summary { list-style: none; cursor: pointer; display: inline-block; }
.sc-schedule > summary::-webkit-details-marker { display: none; }
.sc-schedule[open] > summary { margin-block-end: 8px; }
.sc-request > summary { cursor: pointer; font-size: 13px; }
.sc-request .s-review-form { margin-block-start: 6px; }
.sc-note { margin: 0 0 12px; }
.sc-launch { border-bottom: 1px solid var(--u-line-2); gap: 6px 16px; }
.sc-launch .sc-all-link { margin-inline-start: auto; font-size: 13px; }
.sc-menu-panel { min-width: 280px; inset-inline-start: 0; inset-inline-end: auto; }
.sc-first-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; font-size: 13px; }
.sc-first-n input { width: 76px; height: 30px; padding: 3px 8px; }
@media (max-width: 760px) {
  .sc-bar { position: static; }
  .sc-nav { width: 100%; }
  .sc-nav .u-btn { flex: 1 1 auto; }
}

/* =====================================================================
   UX-02 — whole-ATS refinement layer (presentation only).
   Shared tokens and states for feedback, focus, touch, status and forced-colour use,
   applied to every screen through the existing components. No behaviour lives here.
   Logical properties only, so the layer mirrors under Urdu / RTL.
   ===================================================================== */

/* ---------- base polish shared by every screen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.u-staff { scrollbar-gutter: stable; }
.u-public, .u-staff { overflow-wrap: break-word; }
.u-public h1, .u-public h2, .u-public h3, .u-staff h1, .u-staff h2, .u-staff h3 { text-wrap: balance; }
.u-public p, .u-staff .u-hint, .u-staff .s-card-sub { text-wrap: pretty; }
:where(.u-public, .u-staff) :where(a, button, summary, label, select) { touch-action: manipulation; }
::selection { background: var(--u-selection); }
.u-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
/* Short pages (sign-in, empty states) keep the footer at the bottom of the viewport. */
body.u-public { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.u-public > main { flex: 1 0 auto; }

/* ---------- keyboard focus: one solid, high-contrast ring on the public + candidate shell ---------- */
.u-public :where(a, button, summary, [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"], input[type="file"]):focus-visible { outline: 3px solid var(--u-navy); outline-offset: 2px; }
.u-staff :where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--u-navy); outline-offset: 2px; }
.u-btn-primary:focus-visible, .u-cv-warning-btn:focus-visible { outline-color: var(--u-navy); box-shadow: 0 0 0 2px var(--u-card); }

/* ---------- feedback: alerts carry an icon and wording, never colour alone ---------- */
.u-alert { --u-alert-accent: #0d4c7c; position: relative; padding-inline-start: 44px; line-height: 1.45; }
.is-ops .u-alert { padding-inline-start: 38px; }
.u-alert-success { --u-alert-accent: #0f5a3c; }
.u-alert-warning { --u-alert-accent: #6e4100; }
.u-alert-error, .u-alert-danger { --u-alert-accent: #7e1630; }
.u-alert::before { content: "i"; content: "i" / ""; position: absolute; inset-inline-start: 12px; top: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--u-alert-accent); color: #fff; font: 700 12px/1 var(--u-font); }
.is-ops .u-alert::before { inset-inline-start: 10px; top: 9px; width: 18px; height: 18px; font-size: 11px; }
.u-alert-success::before { content: "\2713"; content: "\2713" / ""; }
.u-alert-warning::before { content: "!"; content: "!" / ""; }
.u-alert-error::before, .u-alert-danger::before { content: "\00d7"; content: "\00d7" / ""; font-size: 15px; }
.u-alert .errorlist { margin: 0; padding: 0; list-style: none; }
.u-alert .errorlist li + li { margin-top: 2px; }
.u-alert a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- loading: a submitted form shows progress and ignores repeat clicks (static/js/ui-feedback.js) ---------- */
@keyframes u-spin { to { transform: rotate(360deg); } }
button[aria-busy="true"], .u-btn[aria-busy="true"] { cursor: progress; opacity: .82; }
.u-btn[aria-busy="true"]::after { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: u-spin .7s linear infinite; }

/* ---------- tables: keyboard users see the row they are in; inactive rows stay legible ---------- */
.s-table tbody tr:focus-within { background: var(--u-surface-3); }
.s-table tr.is-inactive { opacity: .8; }
.s-table :where(td, th):where(.s-num, .s-right) { font-variant-numeric: tabular-nums; }
.s-table caption { text-align: start; }

/* ---------- forms: errors read as errors without colour; required marks and hints share one rhythm ---------- */
.has-error > label, .has-error > .u-q-label { color: var(--u-bad-ink); }
.u-field .u-hint, .s-field .u-hint { margin-top: -2px; }
.u-error { display: block; }
.u-input:disabled, .s-field :where(input, select, textarea):disabled { background: var(--u-surface-3); color: var(--u-ink-3); cursor: not-allowed; }

/* ---------- direction-aware details ---------- */
[dir="rtl"] .s-nav { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 16px), transparent); }
@media (min-width: 761px) { [dir="rtl"] .s-nav { -webkit-mask-image: none; mask-image: none; } }

/* ---------- touch: phones and tablets get 44px targets without changing desktop density ---------- */
@media (pointer: coarse) {
  .is-ops .u-btn-sm, .u-btn-sm { min-height: 44px; padding-block: 8px; }
  .s-nav a, .s-tabs a, .s-tabs-line a, .s-stage-pills a, .s-icon-link, .s-signout, .s-menu-item { min-height: 44px; }
  .s-stage-pills a, .s-tabs a, .s-tabs-line a { display: inline-flex; align-items: center; }
  .lang-switch button { min-height: 40px; }
  .s-check-hit { min-height: 48px; min-width: 44px; }
  .s-check input, .u-staff .u-checkline input[type="checkbox"] { width: 20px; height: 20px; }
}

/* ---------- forced-colours (Windows high contrast): status shapes and borders survive ---------- */
@media (forced-colors: active) {
  .u-alert, .u-pill, .s-status, .s-chip, .s-flag, .filter-chip { border: 1px solid CanvasText; }
  .u-alert::before { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  .s-status::before, .s-stage-pills a::before { background: CanvasText; forced-color-adjust: none; }
  .s-nav a.is-on, .s-tabs a.is-on, .s-tabs-line a.is-on { border-bottom: 3px solid Highlight; }
  .u-btn-primary { border-color: ButtonText; }
  .u-input:focus, .s-field :where(input, select, textarea):focus { outline: 2px solid Highlight; }
}

/* ---------- reduced motion: nothing animates for people who ask for that ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .u-btn[aria-busy="true"]::after { border-inline-end-color: currentColor; }
}

/* ---------- DASH-02 operational overview: attention queue (logical properties, RTL-safe) ---------- */
.s-attn { margin: 0; padding: 0; list-style: none; }
.s-attn li { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--u-line-2); }
.s-attn li:first-child { border-top: 0; }
.s-attn li > div { flex: 1; min-width: 0; }
.s-attn .s-count { flex: none; }
.s-actions-single { grid-template-columns: minmax(0, 1fr); }
.is-ops .s-actions-list.s-actions-single { display: block; }
.is-ops .s-actions-list.s-actions-single li { border-inline-end: 0; border-top: 1px solid var(--u-line-2); }
.is-ops .s-actions-list.s-actions-single li:first-child { border-top: 0; }
@media (max-width: 520px) {
  .is-ops .s-kpis { grid-template-columns: minmax(0, 1fr); }
  .s-attn li { flex-wrap: wrap; }
}

/* COMM-01 batch progress */
.s-comm-bar { height: 10px; border-radius: 999px; background: var(--u-line-2); overflow: hidden; margin-bottom: 12px; }
.s-comm-bar > span { display: block; height: 100%; background: var(--u-ok); transition: width .25s ease; }
.s-comm-counts { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-inline-start: 0; list-style: none; }
@media (prefers-reduced-motion: reduce) { .s-comm-bar > span { transition: none; } }

/* PH-09B S3: Candidate availability (current sourcing fact; not a stage or suitability). */
.s-avail { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; line-height: 18px; font-weight: 600; white-space: nowrap; background: var(--u-line-2); color: var(--u-ink-2); }
.s-avail-available { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.s-avail-not_available { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.s-avail-form { display: grid; gap: 10px; padding: 14px 20px; }
.s-avail-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.s-avail-form select, .s-avail-form input[type="date"] { width: 100%; min-height: 40px; }
.s-avail-form[data-avail-state="UNKNOWN"] [data-avail-date], .s-avail-form[data-avail-state="NOT_AVAILABLE"] [data-avail-date] { display: none; }
.s-avail-history { margin: 0; padding: 8px 20px 14px; list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--u-ink-2); }
.s-cnic-reveal { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }

/* Standard PMS requirement (CV & photograph) shown apart from vacancy-specific documents */
.u-cvp-standard { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--u-line); border-inline-start: 4px solid var(--u-brand, #c8001e); border-radius: 12px; background: var(--u-card); }
.u-cvp-standard .u-cvp-status { margin: 0; }
.u-cvp-standard .u-hint { margin: 0; }
.u-required-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--u-brand-soft); color: var(--u-bad-deep); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; }
.u-cvp-status li.is-ok .u-required-tag { background: var(--u-ok-soft); color: var(--u-ok-deep); }

/* Form builder: the standard PMS CV requirement, shown apart from vacancy documents */
.s-std-req { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--u-line); border-inline-start: 4px solid var(--u-navy); border-radius: 10px; background: var(--u-navy-soft); }
.s-std-req-head { display: flex; flex-wrap: wrap; gap: 6px; }
.s-tag-lock { background: var(--u-card); border: 1px solid var(--u-line); }
/* CV-02: the per-vacancy CV control (Required / Optional / Not requested) */
.s-cv-setting { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--u-line); border-inline-start: 4px solid var(--u-navy); border-radius: 10px; background: var(--u-navy-soft); }
.s-cv-setting-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s-cv-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-cv-choice { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--u-line); border-radius: 9px; background: var(--u-card); cursor: pointer; }
.s-cv-choice:has(input:checked) { border-color: var(--u-navy); box-shadow: 0 0 0 1px var(--u-navy) inset; }
.s-cv-choice span { display: grid; gap: 1px; }
.s-cv-choice small { color: var(--u-ink-3); font-size: 12px; }
@media (max-width: 720px) { .s-cv-choices { grid-template-columns: 1fr; } }
.s-std-sub { margin: 16px 0 2px; display: flex; align-items: center; gap: 8px; }

/* FINAL-V1: operational Overview (pipeline table, readiness tiles, activity) */
/* UX-03: open vacancies + the five buckets = six tiles: 3 x 2, never a ragged 4 + 2. Phones keep the 2-col / 1-col rules above. */
@media (min-width: 981px) { .is-ops .s-kpis-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-pipeline td.s-num a { font-weight: 600; text-decoration: none; color: var(--u-accent-ink); }
.s-pipeline td.s-num a:hover { text-decoration: underline; }
.s-pipeline td.s-zero { color: var(--u-ink-3); }
.s-ready { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 14px 16px; }
.s-ready a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--u-line); border-radius: 10px; text-decoration: none; color: inherit; background: var(--u-card); }
.s-ready a:hover { background: var(--u-surface-2); }
.s-ready strong { font-size: 22px; line-height: 1.1; color: var(--u-accent-ink); }
.s-ready span { font-weight: 600; font-size: 13px; }
.s-ready small { color: var(--u-ink-3); font-size: 12px; }
.s-attn-compact li { padding-block: 7px; }
.s-activity .s-feed-main strong { font-weight: 600; }
.s-two-col + .s-card, .s-card + .s-two-col { margin-top: 12px; }
.s-std-req .s-tag { background: var(--u-card); border: 1px solid var(--u-line); }
.s-std-req .s-tag-req { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }


/* CV-02 / CORR-01: PMS photograph verification, document requests, subsequent evidence */
.s-tag-submitted, .s-tag-later { margin-inline-start: 8px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.s-tag-later { background: var(--u-warn-soft); color: var(--u-warn-deep); }
.s-photo-verify { display: grid; gap: 10px; margin: 0; padding: 14px 16px; border-top: 1px solid var(--u-line); background: var(--u-surface-2); }
.s-photo-verify-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.s-photo-verify-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0; }
.s-photo-verify-facts > div { padding: 10px 12px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); }
.s-photo-verify-facts dt { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--u-ink-3); }
.s-photo-verify-facts dd { margin: 0; font-size: 13.5px; color: var(--u-ink); }
.s-photo-verify-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.s-photo-verify .s-note.is-warn { background: var(--u-warn-soft); border-color: var(--u-warn-line); color: var(--u-warn-deep); }
.s-request-form { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(160px, 1fr) auto; align-items: end; gap: 10px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--u-line); }
.s-request-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--u-ink-2); }
.s-request-form small { grid-column: 1 / -1; }
.s-restore { padding: 14px 16px; display: grid; gap: 12px; }
.s-restore-form { display: grid; gap: 8px; }
.s-restore-row { display: flex; flex-wrap: wrap; gap: 8px; }
.s-restore-row .u-input { flex: 1 1 320px; }
.s-attention a { margin-inline-start: 14px; }
@media (max-width: 720px) { .s-request-form { grid-template-columns: 1fr; } .s-photo-verify-form { align-items: stretch; } }

.u-action-card { border-inline-start: 4px solid #d98200; }
.u-action-item { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--u-line); }
.u-action-item:first-of-type { border-top: 0; }
.u-request-form { display: grid; gap: 8px; margin: 0; }
.u-request-form fieldset { display: grid; gap: 10px; margin: 0; padding: 12px 14px; min-width: 0; border: 1px solid var(--u-line); border-radius: 12px; background: var(--u-surface-2); }
.u-request-form legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--u-ink-2); }
.u-request-form .u-radioline { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-card); }
.u-request-form .u-radioline input { margin-top: 3px; accent-color: var(--u-navy); }
.u-request-form .u-radioline small { display: block; color: var(--u-ink-3); }
.u-request-form .u-field-inline { display: grid; gap: 4px; font-size: 13px; }
.u-request-form .u-btn { justify-self: start; }

/* ---------- INT-02: interview scorecards, evaluations, marks sheet ---------- */
.s-spacer { flex: 1 1 auto; }
.s-label-like { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.sc-h { margin: 22px 0 10px; }
.sc-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sc-check input { width: 18px; height: 18px; }
.sc-criteria { list-style: decimal inside; margin: 0; padding: 0; font-size: 13.5px; color: var(--u-ink-2); }
.sc-criteria li { padding: 1px 0; }
.sc-criteria b { margin-inline-start: 6px; color: var(--u-ink); }
.sc-criteria-lg { font-size: 15px; margin-bottom: 8px; }
.sc-table .sc-n { width: 44px; color: var(--u-ink-3); font-weight: 700; }
.sc-table .sc-max { max-width: 110px; }
.sc-table tfoot th { text-align: end; }
.sc-total { font-size: 20px; font-weight: 800; }
.sc-total.is-bad { color: var(--u-bad-ink); }
.sc-actions-cell { width: 1%; white-space: nowrap; }
.sc-row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.sc-row-actions form { margin: 0; }
.sc-actions-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.s-table tr.is-inactive td { color: var(--u-ink-3); }

.ev-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.ev-table th, .ev-table td { padding: 8px 10px; border-bottom: 1px solid var(--u-line-2); text-align: start; vertical-align: middle; }
.ev-table thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.ev-table tbody th { font-weight: 600; }
.ev-table .s-num { text-align: end; }
.ev-table input[data-marks] { max-width: 110px; text-align: end; margin-inline-start: auto; }
.ev-table input.is-bad { border-color: var(--u-bad); background: var(--u-bad-soft); }
.ev-table tr.has-error th .u-error { display: block; font-weight: 500; }
.ev-table tfoot th, .ev-table tfoot td { border-bottom: 0; font-weight: 800; }
.ev-total { font-size: 20px; font-weight: 800; }
.ev-max { color: var(--u-ink-3); white-space: nowrap; }
.ev-card { padding: 16px 20px; border-bottom: 1px solid var(--u-line-2); }
.ev-card:last-child { border-bottom: 0; }
.ev-card.is-mine { background: var(--u-surface-2); }
.ev-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ev-readonly { max-width: 560px; table-layout: fixed; }
.ev-readonly td { width: 96px; }
.ev-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.ev-text dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.ev-text dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.ev-form .ev-table input[data-marks] { min-width: 84px; }
@media (max-width: 620px) {
  .ev-table th, .ev-table td { padding: 8px 4px; }
  .ev-table .ev-max { font-size: 13px; }
}

.ms-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 14px; }
.ms-filter { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--u-ink-2); }
.ms-filter .u-input { min-width: 160px; }
.ms-printonly { display: none; }
.ms-sheet { margin-bottom: 20px; }
.ms-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid var(--u-line-2); }
.ms-title h2 { margin: 0; font-size: 18px; }
.ms-title p { margin: 2px 0 0; color: var(--u-ink-3); }
.ms-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.ms-meta dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.ms-meta dd { margin: 1px 0 0; font-weight: 600; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ms-table th, .ms-table td { padding: 8px 8px; border: 1px solid var(--u-line); vertical-align: top; text-align: start; }
.ms-table thead th { white-space: normal; background: var(--u-surface-2); font-size: 12px; font-weight: 700; color: var(--u-ink-2); vertical-align: bottom; }
.ms-table thead th small { display: block; font-weight: 500; color: var(--u-ink-3); }
.ms-table .ms-serial { width: 56px; text-align: center; }
.ms-table .ms-mark { text-align: center; min-width: 56px; }
.ms-table td.ms-mark { white-space: nowrap; }
.ms-table .ms-total { font-weight: 800; }
.ms-table .ms-text { min-width: 150px; overflow-wrap: anywhere; }
.ms-table .ms-cnic { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-table .ms-name { font-weight: 600; }
.ms-note { display: block; font-weight: 600; color: var(--u-warn-ink); }

@page { size: A4 landscape; margin: 10mm; }
@media print {
  body.u-staff { background: var(--u-card); font-size: 11px; }
  body.u-staff > *:not(main) { display: none !important; }
  .ms-noprint, .skip-link, .s-messages { display: none !important; }
  .ms-printonly { display: block !important; }
  .s-main.ms-page { padding: 0; margin: 0; max-width: none; }
  .ms-sheet.s-card { border: 0; box-shadow: none; border-radius: 0; margin: 0 0 8mm; break-after: page; }
  .ms-sheet:last-of-type { break-after: auto; }
  .ms-head { padding: 0 0 6px; border-bottom: 2px solid #000; }
  .ms-table { font-size: 11px; table-layout: auto; width: 100%; }
  .ms-table .ms-text { min-width: 105px; }
  .ms-table .ms-mark { min-width: 38px; }
  .ms-table th, .ms-table td { border-color: #000; padding: 4px 6px; }
  .ms-table thead { display: table-header-group; }
  .ms-table tr { break-inside: avoid; }
  .ms-table thead th { background: var(--u-surface-3); color: #000; }
  .ms-foot { margin-top: 6px; font-size: 11px; color: var(--u-ink-2); }
  .s-table-wrap { overflow: visible; }
}

/* =====================================================================================
   OPS-01 / OPS-02 - recruitment operations (derived buckets, filters, interview workspace)
   Logical properties throughout (RTL-safe); colour is never the only signal.
   ===================================================================================== */
:root {
  --ops-new: var(--u-info);
  --ops-review: #8a5a00;
  --ops-interview: #5b3fb0;
  --ops-decision: #0f6b6b;
  --ops-closed: var(--u-ink-3);
}
.ops-pills a.s-pill-new::before { background: var(--ops-new); }
.ops-pills a.s-pill-review::before { background: #d49a2c; }
.ops-pills a.s-pill-interview::before { background: var(--ops-interview); }
.ops-pills a.s-pill-decision::before { background: var(--ops-decision); }
.ops-pills a.s-pill-closed::before { background: #9a98a8; }

.ops-filterbar { border-top: 1px solid var(--u-line-2); }
.ops-filterbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 16px; }
.ops-filterbar .s-search { flex: 1 1 220px; margin: 0; }
.ops-filterbar .s-search input { width: 100%; min-width: 0; }
.ops-select { display: grid; gap: 3px; margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--u-ink-3); }
.ops-select select { min-width: 150px; padding: 7px 10px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 14px var(--u-font); text-transform: none; letter-spacing: 0; color: var(--u-ink); background: var(--u-card); }
.ops-select select:focus { outline: 2px solid transparent; border-color: var(--u-navy); box-shadow: var(--u-focus-ring); }
.ops-filter-actions { display: flex; gap: 8px; padding: 0 16px 14px; }

.s-bucket { font-weight: 800; letter-spacing: .02em; }
.s-bucket-new { background: var(--u-info-soft); color: var(--ops-new); }
.s-bucket-review { background: var(--u-warn-soft); color: var(--ops-review); }
.s-bucket-interview { background: var(--u-violet-soft); color: var(--ops-interview); }
.s-bucket-decision { background: var(--u-info-soft); color: var(--ops-decision); }
.s-bucket-closed { background: var(--u-line-2); color: var(--ops-closed); }
.ops-cell { min-width: 170px; }
.ops-cell .s-bucket { margin-block-end: 3px; }
.ops-detail { display: block; font-size: 14.5px; line-height: 1.3; }
.ops-next { color: var(--u-ink-2); }
.ops-source { display: inline-block; margin-block-start: 3px; margin-inline-end: 4px; padding: 1px 8px; border-radius: 6px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 12px; font-weight: 700; }
.ops-result { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; background: var(--u-line-2); color: var(--u-ink-2); white-space: nowrap; }
.ops-result::before { margin-inline-end: 5px; font-weight: 800; }
.ops-result-recommended, .ops-result-client_selected { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.ops-result-recommended::before, .ops-result-client_selected::before { content: "✓"; }
.ops-result-not_recommended, .ops-result-client_rejected { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.ops-result-not_recommended::before, .ops-result-client_rejected::before { content: "✕"; }
.ops-result-on_hold, .ops-result-no_show { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.ops-result-on_hold::before { content: "Ⅱ"; }
.ops-result-no_show::before { content: "∅"; }
.ops-result-pending { background: var(--u-violet-soft); color: var(--ops-interview); }
@media (max-width: 760px) {
  .ops-filterbar-row { gap: 8px; }
  .ops-select { flex: 1 1 calc(50% - 8px); }
  .ops-select select { width: 100%; min-width: 0; }
}

/* ---- dossier / interview "where · last · next" strip ---- */
.ops-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-block-start: 10px; padding: 10px 14px; border: 1px solid var(--u-line); border-inline-start: 4px solid var(--ops-closed); border-radius: var(--u-radius-sm); background: var(--u-card); }
.ops-strip[data-bucket="new"] { border-inline-start-color: var(--ops-new); }
.ops-strip[data-bucket="review"] { border-inline-start-color: #d49a2c; }
.ops-strip[data-bucket="interview"] { border-inline-start-color: var(--ops-interview); }
.ops-strip[data-bucket="decision"] { border-inline-start-color: var(--ops-decision); }
.ops-strip-detail { font-size: 15.5px; }
.ops-strip-item { font-size: 14px; color: var(--u-ink-2); }
.ops-strip-k { margin-inline-end: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-ink-3); }
.ops-strip-next { font-weight: 600; color: var(--u-ink); }

/* ---- OPS-02 interview workspace ---- */
.iv-flow { display: grid; gap: 16px; }
.iv-flow > .s-card { margin: 0; }
.iv-when { font-size: 16px; font-weight: 700; color: var(--u-accent-ink); }
.iv-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.iv-facts .iv-wide { grid-column: 1 / -1; }
.iv-primary { border-color: var(--u-navy); box-shadow: 0 0 0 1px var(--u-navy), var(--u-shadow); }
.iv-primary > .s-card-head { background: var(--u-navy-soft); }
.iv-lead { margin: 0 0 8px; font-size: 15.5px; }
.iv-primary > .iv-empty, .iv-primary > div > .iv-lead { padding-inline: 20px; }
.iv-primary > div > .iv-lead { padding-block-start: 14px; }
.iv-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-end: 4px; border-radius: 50%; background: var(--u-ok-soft); color: var(--u-ok-ink); font-weight: 800; }
.iv-fold > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--u-accent-ink); padding: 6px 0; }
.iv-fold[open] > summary { margin-block-end: 6px; }
.iv-progress-state { padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--u-line-2); color: var(--u-ink-2); }
.iv-progress-complete { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.iv-progress-incomplete, .iv-progress-assigned { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.iv-evaluators { margin: 0; padding: 4px 20px; list-style: none; }
.iv-evaluators li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--u-line-2); }
.iv-evaluators li:last-child { border-bottom: 0; }
.iv-state { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font-weight: 800; background: var(--u-line-2); color: var(--u-ink-3); }
.is-done > .iv-state { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.iv-evaluator { flex: 1; min-width: 0; }
.iv-tag { padding: 1px 8px; border-radius: 6px; background: var(--u-line-2); color: var(--u-ink-3); font-size: 12px; font-weight: 600; }
.iv-score { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.iv-score small { font-size: 13px; font-weight: 600; color: var(--u-ink-3); }
.iv-finalize .iv-gate { margin-block-end: 12px; }
.iv-finalize .iv-gate small { margin-block-start: 4px; }
.iv-manage { overflow: hidden; }
.iv-manage > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 20px; cursor: pointer; list-style: none; font-weight: 700; }
.iv-manage > summary::-webkit-details-marker { display: none; }
.iv-manage > summary::before { content: "▸"; color: var(--u-ink-3); }
.iv-manage[open] > summary::before { content: "▾"; }
.iv-manage > summary small { font-weight: 400; color: var(--u-ink-3); font-size: 13.5px; }
.iv-manage[open] > summary { border-bottom: 1px solid var(--u-line-2); }
.iv-manage-body > form + form { border-top: 1px solid var(--u-line-2); }
.iv-manage-body .s-h3 { margin: 0 0 8px; font-size: 15px; }
.iv-result-block { display: grid; gap: 8px; }
.iv-result-lg { justify-self: start; padding: 6px 16px; font-size: 18px; border-radius: 10px; }
.iv-result-notes { margin: 0; color: var(--u-ink); }
.iv-late { border-top: 1px solid var(--u-line-2); }
@media (max-width: 640px) {
  .iv-when { font-size: 14.5px; }
  .iv-evaluators { padding-inline: 16px; }
  .ops-strip { padding: 10px 12px; gap: 6px 12px; }
}

/* OPS fixes found in visual UAT: headers wrap instead of clipping; filter bar fits one row on desktop */
.iv-flow > .s-card > .s-card-head { flex-wrap: wrap; row-gap: 6px; }
.iv-flow .s-card-head .s-chip { white-space: normal; text-align: start; }
.ops-select select { min-width: 0; width: 148px; }
.ops-filterbar .s-search { flex: 1 1 180px; }
.ops-filterbar-row > .u-btn { align-self: flex-end; }
@media (max-width: 760px) { .ops-select select { width: 100%; } }

/* OPS-01 mobile: the Pipeline / Interview cells join the applicant card (they replaced the old Status cell) */
@media (max-width: 760px) {
  .s-applicants td[data-label="Pipeline"], .s-applicants td[data-label="Interview"] { grid-column: 2 / -1; display: block; font-size: 13.5px; }
  .s-applicants td[data-label="Pipeline"] { grid-row: 2; }
  .s-applicants td[data-label="Interview"] { grid-row: 3; }
  .s-applicants td[data-label="Where"] { grid-row: 4; }
  .s-applicants td[data-label="Background"] { grid-row: 5; }
  .s-applicants td[data-label="Documents"] { grid-row: 6; }
  .s-applicants td[data-label="Applied"] { grid-row: 7; }
  .s-applicants td.s-check { grid-row: 1 / span 2; }
  .s-applicants td.ops-cell::before { display: block; width: auto; margin-block-end: 2px; }
  .s-applicants td.ops-cell .s-sub { display: block; }
  .s-applicants td.ops-cell .ops-detail { display: inline; margin-inline-start: 4px; }
}

/* =====================================================================================
   OPS-03 - Candidate Intake (add one person, import client roster)
   Logical properties throughout (RTL-safe); colour is never the only signal (badges carry text).
   ===================================================================================== */
.in-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.in-mode { display: grid; align-content: start; gap: 10px; padding: 24px; margin: 0; }
.in-mode h2 { margin: 0; font-size: 21px; }
.in-mode p { margin: 0; }
.in-mode .u-btn { justify-self: start; margin-block-start: 6px; }
.in-mode-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--u-navy); color: #fff; font-weight: 800; }
.in-mode-points { margin: 0; padding-inline-start: 18px; color: var(--u-ink-2); font-size: 14.5px; display: grid; gap: 2px; }
.in-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.in-recent { list-style: none; margin: 0; padding: 0; }
.in-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--u-line-2); }
.in-recent li:last-child { border-bottom: 0; }
.in-recent-meta { text-align: end; display: grid; gap: 2px; justify-items: end; }

.in-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--u-line-2); color: var(--u-ink-2); white-space: nowrap; }
.in-badge-ok, .in-badge-committed { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.in-badge-info, .in-badge-preview { background: var(--u-info-soft); color: var(--u-info-ink); }
.in-badge-warn, .in-badge-committing, .in-badge-uploaded { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.in-badge-bad, .in-badge-cancelled { background: var(--u-bad-soft); color: var(--u-bad-ink); }
.in-badge-muted { background: var(--u-line-2); color: var(--u-ink-2); }

.in-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px; font-size: 14px; color: var(--u-ink-3); }
.in-steps span { display: inline-flex; align-items: center; gap: 8px; }
.in-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--u-line-2); font-size: 12.5px; }
.in-steps .is-current { color: var(--u-ink); font-weight: 700; }
.in-steps .is-current b { background: var(--u-navy); color: #fff; }
.in-steps .is-done b { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.in-steps .is-done b::after { content: ""; }

.in-form-card { max-width: 860px; }
.in-group { margin: 0; padding: 18px 20px 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--u-ink-3); }
.in-lead { margin: 0; font-size: 15.5px; }
.in-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.in-note { margin: 0 20px 20px; padding: 14px 16px; border-radius: var(--u-radius-sm); background: var(--u-navy-soft); font-size: 14.5px; }
.in-note ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 3px; }
.in-found { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--u-line-2); }
.in-found h2 { margin: 0 0 2px; font-size: 18px; }
.in-found p { margin: 0 0 4px; }
.in-found-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; }
.in-found-new .in-found-icon { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.in-found-info .in-found-icon { background: var(--u-info-soft); color: var(--u-info-ink); }
.in-found-warn { color: var(--u-warn-ink); font-weight: 600; }

.in-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--u-line-2); }
.in-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--u-line); border-radius: 999px; background: var(--u-card); font-size: 13.5px; font-weight: 600; color: var(--u-ink-2); }
.in-chip b { padding: 0 7px; border-radius: 999px; background: var(--u-surface-3); font-size: 12px; }
.in-chip:hover { border-color: var(--u-line-violet); }
.in-chip.is-on { background: var(--u-navy); border-color: var(--u-navy); color: #fff; }
.in-chip.is-on b { background: rgba(255, 255, 255, .22); }
.in-chip-ok::before, .in-chip-info::before, .in-chip-warn::before, .in-chip-bad::before, .in-chip-muted::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--u-ink-3); }
.in-chip-ok::before { background: var(--u-ok); }
.in-chip-info::before { background: var(--u-info); }
.in-chip-warn::before { background: #d49a2c; }
.in-chip-bad::before { background: var(--u-bad); }
.in-chip-attention { margin-inline-start: auto; border-color: var(--u-warn-line); background: var(--u-warn-soft); color: var(--u-warn-ink); }
.in-bulk { padding: 10px 16px; border-bottom: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.in-bulk form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.in-bulk-label { font-size: 13px; font-weight: 700; color: var(--u-ink-3); }

.in-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.in-side { position: sticky; top: 76px; }
.in-plan-list { margin: 0; padding: 6px 20px; display: grid; }
.in-plan-list div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--u-line-2); font-size: 14.5px; }
.in-plan-list dt { color: var(--u-ink-2); }
.in-plan-list dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.in-plan-list .in-plan-sep { margin-block-start: 8px; border-top: 1px solid var(--u-line); }
.in-plan-warn { margin: 12px 20px 0; padding: 10px 12px; border-radius: var(--u-radius-sm); background: var(--u-warn-soft); color: var(--u-warn-deep); font-size: 13.5px; }
.in-plan-foot { margin: 12px 20px 0; font-size: 13.5px; color: var(--u-ink-3); }
.in-commit { display: grid; gap: 10px; padding: 14px 20px 8px; }
.in-confirm { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.in-confirm input { margin-block-start: 3px; }
.in-cancel, .in-remap { display: block; padding: 4px 20px 14px; font-size: 14px; }
.in-alert { margin-block-end: 14px; }

.in-rows th.in-check, .in-rows td.in-check { width: 36px; padding-inline-end: 0; }
.in-row-bad { background: var(--u-brand-faint); }
.in-row-warn { background: var(--u-surface-2); }
.in-note-line { display: block; font-size: 13.5px; line-height: 1.35; color: var(--u-ink-2); }
.in-note-soft { color: var(--u-ink-3); }
.in-open { font-size: 13.5px; }
.in-kpis { margin-block-end: 14px; }
.in-kpi-warn { border-color: var(--u-warn-line); background: var(--u-warn-soft); }
.in-head { flex-wrap: wrap; }
.in-foot-note { margin: 0; font-size: 13.5px; color: var(--u-ink-3); }
.in-progress { width: 100%; height: 14px; margin-block-start: 8px; }
.in-map-label { width: 220px; text-align: start; font-weight: 700; }
.in-map select { width: 100%; max-width: 360px; padding: 8px 10px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 15px var(--u-font); background: var(--u-card); }
.in-map-sample { color: var(--u-ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.s-signout { white-space: nowrap; }
.in-main, .in-side { min-width: 0; }
@media (min-width: 901px) { .s-top-right { flex: none; } .s-search-btn { min-width: 200px; } }
@media (max-width: 640px) { .s-top-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; } }

@media (max-width: 900px) {
  .in-modes, .in-two, .in-layout { grid-template-columns: 1fr; }
  .in-side { position: static; }
}
@media (max-width: 640px) {
  .in-mode { padding: 18px; }
  .in-actions { flex-direction: column-reverse; }
  .in-actions .u-btn { width: 100%; }
  .in-steps { gap: 6px 14px; font-size: 13px; }
  .in-map-label { width: auto; }
  .in-map-sample { display: none; }
  .in-rows th:nth-child(5), .in-rows td:nth-child(5) { min-width: 180px; }
}

/* =====================================================================================
   OPS-04 - Audit history (a searchable, read-only operational history)
   ===================================================================================== */
.au-card { overflow: visible; }
.au-filters { border-bottom: 1px solid var(--u-line-2); }
.au-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 16px 0; }
.au-row:last-child { padding-bottom: 12px; }
.au-row .ops-select { flex: 1 1 170px; }
.au-row .ops-select input { padding: 7px 10px; border: 1.5px solid var(--u-line-strong); border-radius: 10px; font: 14px var(--u-font); text-transform: none; letter-spacing: 0; color: var(--u-ink); background: var(--u-card); min-width: 0; width: 100%; }
.au-row .ops-select select { width: 100%; min-width: 0; }
.au-actions { display: flex; gap: 8px; flex: none; }
.au-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--u-line-2); background: var(--u-surface-2); }
.au-chip { display: inline-flex; gap: 5px; align-items: center; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--u-line); background: var(--u-card); font-size: 13px; font-weight: 600; color: var(--u-ink); }
.au-chip span { color: var(--u-ink-3); font-weight: 700; }
.au-chip b { color: var(--u-ink-3); }
.au-chip:hover { border-color: var(--u-bad); }
.au-table td, .au-table th { vertical-align: top; }
.au-table .au-when { width: 110px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--u-ink-2); font-weight: 600; }
.au-table .au-by { width: 190px; }
.au-table .au-cat { width: 150px; }
.au-day th { padding: 8px 16px; background: var(--u-surface-3); color: var(--u-ink-2); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; text-align: start; }
.au-ev { border-inline-start: 3px solid transparent; }
.au-tone-ok { border-inline-start-color: var(--u-ok); }
.au-tone-warn { border-inline-start-color: #d49a2c; }
.au-tone-bad { border-inline-start-color: var(--u-bad); }
.au-what { display: grid; gap: 1px; }
.au-title { font-size: 15px; }
.au-subject { font-size: 14px; color: var(--u-ink-2); }
.au-outcome { display: inline-block; justify-self: start; margin-block-start: 2px; padding: 1px 8px; border-radius: 6px; background: var(--u-line-2); font-size: 12.5px; font-weight: 700; color: var(--u-ink-2); }
.au-actor { font-size: 14px; }
.au-actor-candidate::before, .au-actor-system::before { margin-inline-end: 4px; color: var(--u-ink-3); }
.au-actor-candidate::before { content: "◔"; }
.au-actor-system::before { content: "⚙"; }
.au-cat-chip { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--u-navy-soft); color: var(--u-accent-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.au-cat-security, .au-cat-user_access { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.au-cat-exports { background: var(--u-violet-soft); color: var(--ops-interview, #5b3fb0); }
.au-cat-documents { background: var(--u-info-soft); color: var(--u-info-ink); }
.au-cat-offers, .au-cat-recommendations { background: var(--u-ok-soft); color: var(--u-ok-ink); }
.au-cat-configuration { background: var(--u-line-2); color: var(--u-ink-2); }
.au-related { display: grid; gap: 10px; }
@media (max-width: 760px) {
  .au-table thead { display: none; }
  .au-table, .au-table tbody { display: block; }
  .au-table tr.au-ev { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-bottom: 1px solid var(--u-line-2); }
  .au-table tr.au-day, .au-table tr.au-day th { display: block; }
  .au-table td { display: block; padding: 0; border: 0; width: auto !important; }
  .au-table td.au-when { grid-column: 2; grid-row: 1; text-align: end; font-size: 13px; }
  .au-table td.au-what { grid-column: 1; grid-row: 1 / span 2; }
  .au-table td.au-by { grid-column: 1; grid-row: 3; color: var(--u-ink-3); }
  .au-table td.au-cat { grid-column: 2; grid-row: 3; text-align: end; }
  .au-row .ops-select { flex: 1 1 calc(50% - 8px); }
  .au-pager { flex-wrap: wrap; justify-content: center; }
}


/* UX-03: shared state words + "this person's other applications" strip. Logical properties only. */
.s-status-new { background: var(--u-info-soft); color: var(--u-info-ink); }
.s-status-unfinished { background: var(--u-surface-3); color: var(--u-ink-2); }
.s-status-not-eligible { background: var(--u-warn-soft); color: var(--u-warn-ink); }
.s-status-discarded { background: var(--u-line-2); color: var(--u-ink-2); }
.s-others { margin-block-end: 12px; }
.s-others-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; }
.s-others-item { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border: 1px solid var(--u-line); border-radius: 999px; color: var(--u-ink); text-decoration: none; font-size: 13px; }
.s-others-item:hover { border-color: var(--u-navy); }
.s-others-item .s-sub { display: inline; margin-inline-start: 4px; }
.s-others-profile { margin-inline-start: auto; font-size: 13px; font-weight: 700; }
.s-note-scope { margin: 6px 0 0; font-size: 12px; color: var(--u-ink-3); }

/* =====================================================================================
   UX-04: staff appearance menu (avatar) - Light / Dark / System. Logical properties only.
   ===================================================================================== */
.s-usermenu { position: relative; }
button.s-user { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
button.s-user:focus-visible { outline: 2px solid var(--u-navy); outline-offset: 2px; }
.s-umenu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; width: 260px; padding: 12px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: 12px; box-shadow: 0 14px 40px rgba(17, 17, 40, .18); }
.s-umenu[hidden] { display: none; }
.s-umenu-id { display: grid; gap: 1px; padding: 2px 4px 10px; border-bottom: 1px solid var(--u-line-2); }
.s-umenu-id strong { font-size: 14px; color: var(--u-ink); overflow-wrap: anywhere; }
.s-umenu-id span { font-size: 12.5px; color: var(--u-ink-3); }
.s-umenu-label { margin: 10px 4px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--u-ink-3); }
.s-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: var(--u-surface-3); border-radius: 10px; }
.s-theme button { display: grid; justify-items: center; gap: 3px; padding: 7px 4px 6px; border: 0; border-radius: 8px; background: none; font: 600 12px var(--u-font); color: var(--u-ink-3); cursor: pointer; }
.s-theme button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-theme button:hover { color: var(--u-ink); }
.s-theme button[aria-pressed="true"] { background: var(--u-card); color: var(--u-accent-ink); box-shadow: 0 1px 2px rgba(17, 17, 40, .14); }
.s-theme button:focus-visible { outline: 2px solid var(--u-navy); outline-offset: 1px; }
.s-umenu-link { display: block; margin-top: 10px; padding: 8px 4px 2px; border-top: 1px solid var(--u-line-2); font-size: 14px; font-weight: 600; color: var(--u-ink-2); }
.s-umenu-link:hover { color: var(--u-ink); }
@media (max-width: 760px) { .s-umenu { position: fixed; inset-inline: 12px; top: 56px; width: auto; } }

/* =====================================================================================
   UX-04: operational Overview. Hierarchy: needs attention (primary, brand-accented) >
   workload (secondary) > vacancy pipeline > upcoming interviews > sourcing > recent activity.
   Colours are tokens only, so the same rules serve the light and dark themes.
   ===================================================================================== */
.ov-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; align-items: start; }
.ov-main, .ov-side { display: grid; gap: 12px; min-width: 0; align-content: start; }
.ov-main > .s-card, .ov-side > .s-card { margin: 0; }
.is-ops .s-head-actions .u-btn-primary { white-space: nowrap; }

/* primary: needs attention now */
.ov-attn { border-top: 3px solid var(--u-line-strong); }
.ov-attn.has-items { border-top-color: var(--u-brand); }
.ov-attn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 12px; }
.ov-attn-head h2 { margin: 0; font-size: 18px; }
.ov-attn-total { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 11px; border-radius: 999px; background: var(--u-brand-soft); color: var(--u-brand-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ov-attn-total b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ov-queue { margin: 0; padding: 0; list-style: none; }
.ov-q { --tone: var(--u-accent-ink); --tone-soft: var(--u-navy-soft); border-top: 1px solid var(--u-line-2); }
.ov-tone-new { --tone: var(--ops-new); --tone-soft: var(--u-info-soft); }
.ov-tone-interview { --tone: var(--ops-interview); --tone-soft: var(--u-violet-soft); }
.ov-tone-decision { --tone: var(--ops-decision); --tone-soft: var(--ops-decision-soft); }
.ov-tone-documents { --tone: var(--u-warn-ink); --tone-soft: var(--u-warn-soft); }
.ov-tone-intake { --tone: var(--u-accent-ink); --tone-soft: var(--u-navy-soft); }
.ov-tone-alert { --tone: var(--u-bad-ink); --tone-soft: var(--u-bad-soft); }
.ov-q-link { display: grid; grid-template-columns: 38px 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 18px; border-inline-start: 3px solid transparent; color: inherit; text-decoration: none; }
.ov-q-link:hover { background: var(--u-surface-2); }
.ov-q-link:focus-visible { outline-offset: -2px; }
.ov-q-icon { display: grid; place-items: center; justify-self: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tone-soft); color: var(--tone); }
.ov-q-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ov-q-count { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; text-align: end; font-variant-numeric: tabular-nums; color: var(--u-ink); }
.ov-q-text { display: grid; min-width: 0; }
.ov-q-text strong { font-size: 14.5px; color: var(--u-ink); }
.ov-q-text small { font-size: 12.5px; line-height: 1.35; color: var(--u-ink-3); }
.ov-q-go { font-size: 12.5px; font-weight: 600; color: var(--u-ink-3); white-space: nowrap; }
.ov-q-go i { font-style: normal; }
.ov-q-link:hover .ov-q-go { color: var(--u-accent-ink); }
/* the first three queues carry the weight: bigger figure, a coloured rail */
.ov-q.is-lead .ov-q-link { grid-template-columns: 38px 56px minmax(0, 1fr) auto; padding-block: 14px; border-inline-start-color: var(--tone); }
.ov-q.is-lead .ov-q-icon { width: 38px; height: 38px; border-radius: 10px; }
.ov-q.is-lead .ov-q-icon svg { width: 20px; height: 20px; }
.ov-q.is-lead .ov-q-count { font-size: 30px; }
.ov-q.is-lead .ov-q-text strong { font-size: 15.5px; }
.ov-more { border-top: 1px solid var(--u-line-2); }
.ov-more summary { padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--u-accent-ink); cursor: pointer; list-style: none; }
.ov-more summary::-webkit-details-marker { display: none; }
.ov-more summary::before { content: "+"; display: inline-block; width: 16px; font-weight: 800; }
.ov-more[open] summary::before { content: "–"; }
.ov-more summary:hover { background: var(--u-surface-2); }

/* secondary: workload by operational bucket */
.ov-work-body { padding: 14px 18px 18px; }
.ov-vac { display: inline-flex; align-items: baseline; gap: 5px; font-size: 13px; font-weight: 600; color: var(--u-ink-2); text-decoration: none; white-space: nowrap; }
.ov-vac b { font-size: 17px; color: var(--u-ink); font-variant-numeric: tabular-nums; }
.ov-vac small { font-size: 12px; font-weight: 500; color: var(--u-ink-3); }
.ov-vac:hover { color: var(--u-accent-ink); }
.ov-bar { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: 7px; background: var(--u-surface-3); }
.ov-seg { flex: 1 1 0; min-width: 7px; }
.ov-seg-new { background: var(--ops-new); }
.ov-seg-review { background: var(--ops-review-bar); }
.ov-seg-interview { background: var(--ops-interview); }
.ov-seg-decision { background: var(--ops-decision); }
.ov-bar a.ov-seg:hover, .ov-bar a.ov-seg:focus-visible { filter: brightness(1.12); }
.ov-bar-note { margin: 8px 0 14px; font-size: 13px; color: var(--u-ink-3); }
.ov-bar-note b { color: var(--u-ink); font-size: 14px; }
.ov-buckets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .8fr); gap: 10px; }
.ov-buckets .s-kpi { --b: var(--u-line-strong); gap: 1px; padding: 12px 14px 12px; border-radius: 10px; border-top: 3px solid var(--b); box-shadow: none; background: var(--u-card); }
.ov-buckets .s-kpi:hover { border-color: var(--u-line-violet); border-top-color: var(--b); background: var(--u-surface-2); }
.ov-buckets .s-kpi strong { font-size: 30px; font-weight: 800; color: var(--u-ink); }
.ov-buckets .s-kpi span { font-size: 13px; color: var(--u-ink-2); }
.ov-buckets .s-kpi small { font-size: 12px; line-height: 1.35; }
.ov-buckets .s-kpi[data-kpi="new"] { --b: var(--ops-new); background: var(--u-info-soft); border-color: var(--u-info-line); border-top-color: var(--ops-new); }
.ov-buckets .s-kpi[data-kpi="new"] strong { color: var(--u-info-ink); }
.ov-buckets .s-kpi[data-kpi="new"]:hover { background: var(--u-info-soft); }
.ov-buckets .s-kpi.is-primary span, .ov-buckets .s-kpi.is-primary strong { color: inherit; }
.ov-buckets .s-kpi.is-primary strong { color: var(--u-info-ink); }
.ov-buckets .s-kpi.is-primary small { color: var(--u-ink-3); }
.ov-buckets .s-kpi[data-kpi="review"] { --b: var(--ops-review-bar); }
.ov-buckets .s-kpi[data-kpi="interview"] { --b: var(--ops-interview); }
.ov-buckets .s-kpi[data-kpi="decision"] { --b: var(--ops-decision); }
.ov-buckets .s-kpi[data-kpi="closed"] { background: none; }
.ov-buckets .s-kpi[data-kpi="closed"] strong { font-size: 24px; color: var(--u-ink-3); }

/* vacancy pipeline: mini workload bar + the five bucket counts */
.ov-pipe .s-table th, .ov-pipe .s-table td { padding-inline: 12px; }
.ov-col-bar { width: 26%; min-width: 110px; }
.ov-mini { display: flex; gap: 1px; height: 8px; overflow: hidden; border-radius: 4px; background: var(--u-surface-3); }
.ov-mini i { flex: 1 1 0; min-width: 3px; }
.s-pipeline td.ov-hot a { display: inline-block; min-width: 28px; padding: 1px 8px; border-radius: 999px; background: var(--u-info-soft); color: var(--u-info-ink); text-align: center; }
.s-pipeline td.ov-hot a:hover { text-decoration: none; filter: brightness(1.1); }
.s-pipeline td.s-zero { font-weight: 400; opacity: .7; }
.s-pipeline td.ov-col-closed { color: var(--u-ink-3); }

/* upcoming interviews */
.ov-iv { margin: 0; padding: 4px 0; list-style: none; }
.ov-iv a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; color: inherit; }
.ov-iv a:hover { background: var(--u-surface-2); }
.ov-date { display: grid; place-items: center; flex: none; width: 44px; height: 46px; border-radius: 10px; background: var(--u-surface-3); color: var(--u-ink-2); line-height: 1; }
.ov-date b { font-size: 18px; font-weight: 800; }
.ov-date small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ov-date.is-soon { background: var(--u-violet-soft); color: var(--u-violet-ink); }
.ov-iv-main { display: grid; min-width: 0; }
.ov-iv-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--u-ink); }
.ov-iv-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--u-ink-3); }
.ov-when em { font-style: normal; font-weight: 700; color: var(--u-violet-ink); }

/* sourcing readiness (side): two across, the third spans */
.ov-ready .s-ready { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
.ov-ready .s-ready a:nth-child(3):last-child { grid-column: 1 / -1; }

/* recent activity: useful, quiet */
.ov-activity .s-card-head { padding-block: 9px; }
.ov-activity .s-card-head h2 { font-size: 14px; color: var(--u-ink-2); }
.ov-activity .s-feed a { padding-block: 5px; }
.ov-activity .s-avatar { width: 24px; height: 24px; font-size: 11px; }
.ov-activity .s-feed-main strong { font-size: 13px; color: var(--u-ink-2); }
.ov-activity .s-feed-main small { font-size: 11.5px; }

@media (max-width: 1180px) { .ov-grid { grid-template-columns: minmax(0, 1fr) 320px; } .ov-buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  /* one column, in reading order: attention, workload, interviews, pipeline, sourcing, activity */
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-main, .ov-side { display: contents; }
  .ov-attn { order: 1; } .ov-work { order: 2; } .ov-upcoming { order: 3; }
  .ov-pipe { order: 4; } .ov-ready { order: 5; } .ov-activity { order: 6; }
  .ov-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ov-attn-head { padding-inline: 14px; }
  .ov-q-link, .ov-q.is-lead .ov-q-link { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding-inline: 14px; }
  .ov-q-icon { display: none; }
  .ov-q.is-lead .ov-q-count { font-size: 28px; }
  .ov-q-go { font-size: 0; }
  .ov-q-go i { font-size: 16px; }
  .ov-work-body { padding-inline: 14px; }
  .ov-col-bar, .ov-col-closed { display: none; }
  .ov-pipe .s-table th, .ov-pipe .s-table td { padding-inline: 8px; }
}

.ov-side .s-card-head .u-link { white-space: nowrap; }

/* Wide-menu accounts (Audit + Settings + Help + tour): the search box and nav give way before anything overlaps.
   The full menu needs ~1,400px even compact, more than the 1,320px content width, so this applies at every desktop
   width (not only <=1520px), the header row may use a little more width, and search shrinks in steps below
   (staff-guide.css). The nav scrolls rather than sliding under its neighbours if a long label ever overflows. */
.s-brand { flex: none; }
.s-brand span { white-space: nowrap; }
.s-nav { min-width: 0; }
@media (min-width: 761px) {
  .s-top-row { gap: 12px; width: min(1480px, calc(100% - 32px)); }
  .s-nav { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .s-nav::-webkit-scrollbar { display: none; }
  .s-nav a { flex: none; padding: 0 8px; white-space: nowrap; }
  .s-top-right { gap: 4px; }
  .s-top-right .s-icon-link { padding-inline: 7px; }
  .s-search-btn { min-width: 0; width: 176px; }
  .s-top-right .s-tour-label { display: none; }
  .s-top-right .s-tour-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--u-line); border-radius: 50%; }
  .s-top-right .s-tour-q { display: block; font-size: 14px; font-weight: 700; color: var(--u-ink-2); }
}
/* Tablet widths: not enough room for the full menu beside search, so the nav takes its own full-width row, as it does
   on a phone (the nav also scrolls there if a label overflows). */
@media (min-width: 761px) and (max-width: 1279px) {
  :root { --s-top-h: 88px; }
  .s-top-row { flex-wrap: wrap; row-gap: 0; padding-top: 4px; }
  .s-top-right { margin-inline-start: auto; }
  .s-nav { order: 3; flex: 1 1 100%; min-height: 40px; }
}

/* UX-04: Candidate restore of a withdrawn application */
.u-sent-restore { display: grid; justify-items: center; gap: 10px; margin-top: 14px; }
.u-sent-restore .u-hint { margin: 0; }

/* HELP-01: contextual "Need help with this?" links (Help pages themselves use static/css/help.css) */
.hp-ctx { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--u-accent-ink, var(--u-navy)); text-decoration: none; }
.hp-ctx:hover { text-decoration: underline; }
.hp-ctx:focus-visible { outline: 0; box-shadow: var(--u-focus-ring); border-radius: 6px; }
.hp-ctx svg { flex: none; }
.hp-ctx-row { margin: 6px 0 12px; }

/* inside the Candidate application header */
.u-help-row { margin: 6px 0 0; }
.u-help-row .hp-ctx { font-size: 13.5px; }

/* HELP-01: the header row is already full below ~720px with real phone fonts, so on a phone or small tablet Help
   lives in the footer, beside "My details" on My applications, and in the contextual "Need help with this?" links. */
@media (max-width: 720px) { .u-navlink-help { display: none; } }

/* HELP-01 follow-up: the candidate support line. Subtle on ordinary pages; the number is a WhatsApp link (never tel:). */
.u-support { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--u-ink-2); }
.u-support-link { font-weight: 700; color: var(--u-accent-ink, var(--u-navy)); white-space: nowrap; text-decoration: none; }
.u-support-link:hover { text-decoration: underline; }
.u-support-card { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--u-line-2, var(--u-line)); font-size: 14px; }
.u-footer-col .u-footer-support { margin: 4px 0 0; font-size: 14px; color: var(--u-ink-2); }
.u-footer-col .u-footer-support a { display: inline; min-height: 0; font-size: 14px; font-weight: 700; }