/* ============================================================================
   CareerXchange design layer (docs/reference/ui-tokens.md) — loaded LAST on every public page.
   One place for the cross-page rules the 2026-10 responsive audit found missing:
     1. accessible brand buttons (AA contrast) and focus rings
     2. a compact, flex-laid-out header below 1281px (no absolutely-positioned icons)
     3. a phone-sized page hero
     4. readable body copy (no justified text on narrow columns)
     5. scrollable tab strips, card tables, form controls that never overflow
   Rules repeat legacy selectors where they must out-rank style.css; tokens come from components.css.
   Breakpoints: 576 / 768 / 992 / 1200 (+ 1281, the legacy desktop-header switch).
   ========================================================================== */

/* ---- 1. buttons + focus ----------------------------------------------------------------------- */
/* White on the brand orange (#ef801f) is 2.7:1; --cx-btn (#c2560a) is 4.5:1 and still reads as the brand.
   The bright orange stays for accents: progress, active markers, icons, highlights. */
.bg-primary, a.button, input.submit-button, .cx-btn-primary, .cxd-btn-primary,
#advertice div.right-box a.button, #job-sites div.left-box a.button,
#spotlight div.spotlight div.left div.search form div.container button,
#contactus div.banner.banner-jobs .job-search .top form button,
.cx-notice-banner .cx-btn,
div.header div.nav nav ul.main-tab li a.button {
  background-color: var(--cx-btn); color: #fff;
  box-shadow: none;
}
.bg-primary:hover, a.button:hover, input.submit-button:hover, .cx-btn-primary:hover, .cxd-btn-primary:hover,
#advertice div.right-box a.button:hover, #job-sites div.left-box a.button:hover,
#spotlight div.spotlight div.left div.search form div.container button:hover,
#contactus div.banner.banner-jobs .job-search .top form button:hover,
.cx-notice-banner .cx-btn:hover,
div.header div.nav nav ul.main-tab li a.button:hover {
  background-color: var(--cx-btn-hover); color: #fff; box-shadow: none; transform: none;
}
/* public.css paints the bare .cx-btn primary (with a blue glow); variants keep their own fill */
.cx-btn:not(.cx-btn-light):not(.cx-btn-danger):not(.cx-btn-ghost):not(.cx-btn-secondary) { background-color: var(--cx-btn); color: #fff; box-shadow: none; }
.cx-btn:not(.cx-btn-light):not(.cx-btn-danger):not(.cx-btn-ghost):not(.cx-btn-secondary):hover { background-color: var(--cx-btn-hover); color: #fff; transform: none; }
.cx-btn-secondary { background: #fff; color: var(--cx-navy); border: 1px solid currentColor; box-shadow: none; }
.cx-btn-secondary:hover { background: var(--cx-navy-tint); color: var(--cx-navy); }
.cx-btn-ghost { background: transparent; color: var(--cx-ink); box-shadow: none; }
.cx-btn-ghost:hover { background: var(--cx-bg); }
.cx-btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.cx-btn-block { display: flex; width: 100%; }
.cx-btn[disabled], .cx-btn.is-disabled, a.button[aria-disabled="true"] { opacity: .55; pointer-events: none; }

:focus-visible { outline: 3px solid var(--cx-focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0; } /* fields draw their own ring */
input.form-control:focus, select.form-control:focus, textarea.form-control:focus,
.cx-field input:focus, .cx-field select:focus, .cx-field textarea:focus,
.cx-filter-group select:focus, .cx-filter-group input:focus {
  border-color: var(--cx-primary); box-shadow: 0 0 0 4px var(--cx-primary-ring);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--cx-primary) !important; box-shadow: 0 0 0 4px var(--cx-primary-ring); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cx-primary-tint) !important; color: var(--cx-primary-text) !important; }

/* orange text on white needs the deeper shade too */
.cx-notice-banner a, a.cx-link, .cx-link { color: var(--cx-primary-text); }

/* ---- 2. header below the desktop switch ------------------------------------------------------- */
/* Legacy style.css positions the bell, account and menu icons absolutely at fixed offsets (right:42px,
   bottom:53px…) and colours them white for the old blue header. On the white pill that left the menu
   icon invisible on the about/legal pages and pushed it off the edge at 360px. Lay them out in a row. */
section.wrapper.cx-headbar div.header div.nav nav span.menu-icon,
section.wrapper.cx-headbar div.header div.nav nav span.sign-account .zmdi-account,
section.wrapper.cx-headbar div.header div.nav nav span.notify,
div.header div.nav nav span.menu-icon { color: var(--cx-ink) !important; }

@media (max-width: 1280px) {
  section.wrapper.cx-headbar div.header, div.header { padding: 8px 8px 8px 20px; gap: 8px; }
  div.header div.logo { flex: 0 1 auto; min-width: 0; }
  div.header div.logo h1 { width: auto; height: 48px; margin: 0; }
  div.header div.logo h1 a { display: block; height: 100%; }
  div.header div.logo h1 img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  div.header div.nav { width: auto; flex: 0 0 auto; }
  div.header div.nav nav { display: flex; align-items: center; justify-content: flex-end; gap: 2px; position: relative; }
  div.header div.nav nav > span.not-card,
  div.header div.nav nav > span.sign-account,
  div.header div.nav nav > span.menu-icon {
    position: static !important; display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer;
    color: var(--cx-ink) !important; transition: background .15s;
  }
  div.header div.nav nav > span.not-card:hover, div.header div.nav nav > span.sign-account:hover, div.header div.nav nav > span.menu-icon:hover { background: var(--cx-bg); }
  div.header div.nav nav > span.not-card > a, div.header div.nav nav > span.sign-account > a {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; }
  div.header div.nav nav > span.not-card small, div.header div.nav nav > span.sign-account small, div.header div.nav nav > span.menu-icon small {
    position: static !important; font-size: 24px; line-height: 1; color: inherit !important; }
  div.header div.nav nav > span.not-card sup {
    position: absolute; top: 4px; right: 2px; left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; background: #dc2626; color: #fff; border: 2px solid #fff; box-sizing: content-box; }
  div.header div.nav nav > span.close { display: none !important; }
  div.header div.nav nav > form.cx-lang { position: static; }
  /* the bell's dropdown hangs from the bar, full width on phones */
  div.header div.nav nav div.down-card.down-box2 { position: absolute; top: calc(100% + 14px); right: 0; bottom: auto; left: auto;
    width: min(360px, calc(100vw - 24px)); max-height: 70vh; border-radius: 16px; box-shadow: var(--cx-shadow-lg); z-index: 1150; }
}
@media (max-width: 767.98px) {
  section.wrapper.cx-headbar > section.top { padding-top: 8px; }
  body.cx-stickyhead section.wrapper.cx-headbar { width: calc(100% - 24px); }
  section.wrapper.cx-headbar div.header, div.header { padding: 6px 4px 6px 16px; }
  div.header div.logo h1 { height: 38px; }
  div.header div.nav nav > span.not-card, div.header div.nav nav > span.sign-account, div.header div.nav nav > span.menu-icon { width: 42px; height: 42px; font-size: 20px; }
}
@media (max-width: 359.98px) { div.header div.logo h1 { height: 32px; } }

/* ---- 3. page hero ----------------------------------------------------------------------------- */
.cx-page-banner { background-color: var(--cx-navy); }
.cx-page-chip { white-space: nowrap; }
@media (max-width: 767.98px) {
  .cx-hero-wrap { margin-top: 12px; }
  .cx-page-banner, #contactus div.banner { padding: 20px 18px; border-radius: 16px; min-height: 0; gap: 14px; }
  .cx-page-banner h2, #contactus div.banner h2, .cx-account .cx-page-banner h2 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
  .cx-page-banner p, #contactus div.banner p, .cx-account .cx-page-banner p { font-size: 14px; line-height: 1.5; }
  .cx-page-banner::after, #contactus div.banner::after { width: 260px; height: 260px; right: -90px; top: -110px; }
  .cx-page-banner-actions { width: 100%; gap: 8px; }
  .cx-page-banner-actions .cx-hero-btn, .cx-page-banner-actions .cx-account-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  #contactus div.banner.banner-jobs { padding: 20px 16px; }
  #contactus div.banner.banner-jobs .job-vector { display: none; }
}

/* ---- 4. reading ------------------------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* justified copy leaves rivers in a 328px column; legal/about pages read ragged-right on phones */
@media (max-width: 767.98px) {
  #spotlight section.top div.about div.inner-content div.left div.content p,
  #spotlight.about p, .cx-prose p, .about_pages p { text-align: left !important; hyphens: auto; }
}
.cx-prose { max-width: 72ch; color: var(--cx-body); line-height: 1.7; font-size: 16px; }
.cx-prose h2, .cx-prose h3 { color: var(--cx-ink); line-height: 1.25; margin: 1.6em 0 .5em; }
.cx-prose p, .cx-prose ul, .cx-prose ol { margin: 0 0 1em; }
.cx-prose ul { list-style: disc; padding-left: 1.3em; } .cx-prose ol { list-style: decimal; padding-left: 1.3em; }
a[href^="mailto:"], a[href^="http"]:not(.button):not(.cx-btn) { overflow-wrap: anywhere; }

/* ---- 5. tabs, tables, controls ---------------------------------------------------------------- */
/* tab strips scroll sideways on phones instead of clipping the last tab */
@media (max-width: 767.98px) {
  .cx-tabs, .cx-status-tabs, .cxd-tabs, .cx-company-tabs, ul.tablinks-wrap {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .cx-tabs::-webkit-scrollbar, .cx-status-tabs::-webkit-scrollbar, .cxd-tabs::-webkit-scrollbar, .cx-company-tabs::-webkit-scrollbar { display: none; }
  .cx-tabs > *, .cx-status-tabs > *, .cxd-tabs > *, .cx-company-tabs > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}
/* select2 keeps a 1px accessible <select>; the wizard's width:100%!important stretched it past the viewport */
select.select2-hidden-accessible, .cx-field select.select2-hidden-accessible { width: 1px !important; min-width: 0 !important; }
/* date / number inputs in filter rows shrink with their column */
input[type=date], input[type=datetime-local], input[type=month], input[type=time] { min-width: 0; max-width: 100%; }
/* any data table not already wrapped scrolls inside its card instead of widening the page */
.cx-table-wrap > table, .table-scroll > table { min-width: 100%; }

/* ---- 6. bottom-of-screen stack ---------------------------------------------------------------- */
/* privacy notice card: compact single row on phones so it does not cover a sixth of the screen */
@media (max-width: 767.98px) {
  .cx-notice-banner:not(.cx-notice-blocking) { left: 12px; right: 12px; bottom: calc(12px + var(--cx-safe-bottom, 0px)); padding: 10px 12px; font-size: 14px; }
  .cx-notice-banner:not(.cx-notice-blocking) .cx-notice-inner { flex-wrap: nowrap; gap: 10px; }
  .cx-notice-banner:not(.cx-notice-blocking) .cx-notice-inner .grow { min-width: 0; }
  .cx-notice-banner:not(.cx-notice-blocking) .cx-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
}
/* tiny carousel dots get a 32px hit area without growing the dot */
.cxd-ads-dot { position: relative; }
.cxd-ads-dot::after { content: ""; position: absolute; inset: -12px -6px; }
/* dashboard ad strip: banners are 1800x560 artwork (16:5) with the headline kept in the middle band. Desktop shows a
   220px strip (top and bottom trimmed); below 992px the strip takes the banner's own shape so nothing is cut off. */
@media (max-width: 991.98px) { .cxd-ads { height: auto; aspect-ratio: 16 / 5; border-radius: 14px; } }
@media (max-width: 575.98px) {
  .cxd-ad-cta { right: 10px; bottom: 10px; padding: 6px 12px; font-size: 12px; }
  .cxd-ad-tag { top: 8px; right: 10px; }
  .cxd-ads-dots { bottom: 8px; }
}

/* ---- 7. job search hero (phones): stacked search card instead of a squeezed pill ------------- */
@media (max-width: 767.98px) {
  #contactus div.banner.banner-jobs .job-search .job-head h2 { font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
  #contactus div.banner.banner-jobs .job-search .top form { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%;
    padding: 6px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
  #contactus div.banner.banner-jobs .job-search .top form div.left { display: flex; flex-direction: column; width: 100%; margin: 0; }
  #contactus div.banner.banner-jobs .job-search .top form p { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
    padding: 0 12px; border-radius: 0; box-sizing: border-box; }
  #contactus div.banner.banner-jobs .job-search .top form p + p { border-top: 1px solid var(--cx-line); }
  #contactus div.banner.banner-jobs .job-search .top form p i.icon { position: static; flex: none; font-size: 18px; color: var(--cx-muted); }
  #contactus div.banner.banner-jobs .job-search .top form p input { flex: 1; min-width: 0; width: auto; padding: 0; font-size: 16px; min-height: 48px; }
  #contactus div.banner.banner-jobs .job-search .top form button { width: 100%; margin-top: 6px; border-radius: 12px; min-height: 48px; }
}
/* job cards: the two CTAs share the row evenly and never wrap their label */
.cx-card-actions .cx-easy-apply, .cx-card-actions .cxj-view { white-space: nowrap; }
@media (max-width: 767.98px) {
  .cxj-cta > * { flex: 1 1 auto; min-width: fit-content; }  /* share the row; wrap to two rows when they cannot both fit */
  .cxj-cta .cx-easy-apply, .cxj-cta .cxj-view { width: 100%; padding-left: 12px; padding-right: 12px; font-size: 14px; }
}

/* iOS Safari zooms the page when a field under 16px takes focus; public.css and the legacy sheets set 14-15px */
@media (max-width: 767.98px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]), select, textarea,
  .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-search__field { font-size: 16px !important; }
}

/* ---- 8. ATS board (public shell) --------------------------------------------------------------- */
#cx-ats .cx-ats-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "filters filters"; gap: 12px 16px; align-items: center; padding: 12px 0 16px; }
#cx-ats .cx-ats-toolbar > .cx-ats-title { grid-area: title; min-width: 0; }
#cx-ats .cx-ats-toolbar > .cx-ats-actions { grid-area: actions; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#cx-ats .cx-ats-toolbar > .cx-ats-filters { grid-area: filters; display: grid; grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 8px; }
#cx-ats .cx-ats-title h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.25; }
#cx-ats .cx-ats-title h2 small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; }
#cx-ats #cx-job-switch { min-width: 200px; max-width: 320px; width: auto; }
#cx-ats .cx-cards:not(:has(*))::after { content: attr(data-empty); display: block; padding: 18px 8px; text-align: center; font-size: 14px; color: var(--cx-muted);
  border: 1.5px dashed var(--cx-line); border-radius: 10px; }
@media (max-width: 991.98px) {
  #cx-ats .cx-ats-toolbar { grid-template-columns: 1fr; grid-template-areas: "title" "actions" "filters"; }
  #cx-ats .cx-ats-toolbar > .cx-ats-actions { justify-content: flex-start; }
  #cx-ats .cx-ats-toolbar > .cx-ats-filters { grid-template-columns: 1fr 1fr; }
  #cx-ats .cx-ats-toolbar > .cx-ats-filters input[type=search] { grid-column: 1 / -1; }
  #cx-ats .cx-ats-toolbar > .cx-ats-filters .form-control { width: 100%; min-width: 0; }
  #cx-ats .cx-ats-toolbar > .cx-ats-filters button[type=submit] { grid-column: 1 / -1; }
  #cx-ats #cx-job-switch { flex: 1 1 100%; max-width: none; }
}

#cx-ats .cx-board-tab.active { background: var(--cx-btn); border-color: var(--cx-btn); color: #fff; }
#cx-ats .cx-board-tab.active .cx-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* card tables (components.css .cx-card-list): the row's headline cell and its actions */
@media (max-width: 767.98px) {
  .cx-card-list td.cx-cl-title { font-size: 16px; font-weight: 700; color: var(--cx-ink); padding-bottom: 6px; }
  .cx-card-list td[data-label] { display: flex; gap: 8px; justify-content: space-between; text-align: right; }
  .cx-card-list td[data-label]::before { flex: none; text-align: left; }
  .cx-card-list td.cx-cl-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
  .cx-card-list td.cx-cl-actions .cx-btn { flex: 1 1 auto; justify-content: center; }
  .cx-card-list td[colspan] { text-align: center; }
}

/* ---- 9. notification preferences --------------------------------------------------------------- */
.cx-notif-prefs { max-width: 920px; }
.cx-prefs { padding: 0 !important; overflow: hidden; }
.cx-prefs-head, .cx-prefs-row { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(5, minmax(64px, 1fr)); align-items: center; }
.cx-prefs-head { padding: 12px 24px; background: var(--cx-bg); border-bottom: 1px solid var(--cx-line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cx-muted); }
.cx-prefs-head span:not(:first-child) { text-align: center; }
.cx-prefs-row { padding: 14px 24px; border-bottom: 1px solid var(--cx-line); }
.cx-prefs-row:last-child { border-bottom: 0; }
.cx-prefs-cat strong { display: block; font-size: 16px; color: var(--cx-ink); }
.cx-prefs-cat small { display: block; margin-top: 2px; font-size: 14px; color: var(--cx-muted); line-height: 1.4; }
.cx-prefs-cells { display: contents; }
.cx-prefs-cell { display: flex; justify-content: center; align-items: center; min-height: 44px; cursor: pointer; }
.cx-prefs-cell span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-prefs-cell input { width: 20px; height: 20px; margin: 0; accent-color: var(--cx-btn); cursor: pointer; }
.cx-prefs-cell.is-locked { cursor: not-allowed; opacity: .55; }
.cx-prefs-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.cx-prefs-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.cx-prefs-push[hidden] { display: none; }
.cx-prefs-push p { margin: 0; }
@media (max-width: 767.98px) {
  .cx-prefs-head { display: none; }
  .cx-prefs-row { display: block; padding: 16px; }
  .cx-prefs-cells { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .cx-prefs-cell { justify-content: flex-start; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--cx-line); border-radius: 999px; background: #fff; }
  .cx-prefs-cell:has(input:checked) { border-color: var(--cx-primary); background: var(--cx-primary-tint); }
  .cx-prefs-cell span { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 14px; color: var(--cx-ink); }
  .cx-prefs-cell input { width: 18px; height: 18px; }
  .cx-prefs-foot .cx-btn { width: 100%; }
}

/* list-page toolbars (.cx-row.cx-head): title grows, search + primary action sit on one line */
.cx-ats-public > .cx-row.cx-head, .cx-assess.cx-ats-public > .cx-row.cx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0; background: none; border: 0; }
.cx-ats-public > .cx-row.cx-head > h2.grow:empty { display: none; }
.cx-ats-public > .cx-row.cx-head .cx-inline { flex: 1 1 240px; margin: 0; }
.cx-ats-public > .cx-row.cx-head .cx-inline input { width: 100%; }
@media (max-width: 575.98px) { .cx-ats-public > .cx-row.cx-head > .cx-btn { flex: 1 1 100%; } }

/* ---- 10. sign-in / sign-up / OTP --------------------------------------------------------------- */
#welcome .right .button input, #register .right .button input.submit, #Otp-Verification .right form div.submit input { background: var(--cx-btn); box-shadow: none; }
#welcome .right .button input:hover, #register .right .button input.submit:hover, #Otp-Verification .right form div.submit input:hover { background: var(--cx-btn-hover); transform: none; }
#welcome .right .inputs:focus-within, #register .right .inputs:focus-within,
#Otp-Verification .right .otp-inputs input:focus { border-color: var(--cx-primary); box-shadow: 0 0 0 4px var(--cx-primary-ring); }
#welcome .right .radio > div:has(input:checked) label, #register .right .select a.active { color: var(--cx-primary-text); }
#welcome .right .radio > div:has(input:focus-visible) label { outline: 3px solid var(--cx-focus); outline-offset: 1px; }
#register .right .input a#verify_phone, #register .right .cx-consent-box a, #Otp-Verification .right form p a, #welcome .right p a { color: var(--cx-primary-text) !important; }
#register .right .cx-consent-box input[type=checkbox] { accent-color: var(--cx-btn); }
@media (max-width: 767.98px) {
  #welcome .wrapper, #register .wrapper, #Otp-Verification .wrapper { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; gap: 16px; margin-top: 16px; padding-bottom: 32px; }
  #welcome .wrapper div.page-content, #register .wrapper div.page-content, #Otp-Verification .wrapper div.page-content { flex: none; }
  #welcome div.logo, #register div.logo, #Otp-Verification .wrapper div.page-content .logo { text-align: center; }
  #welcome div.logo img, #register div.logo img, #Otp-Verification .wrapper div.page-content .logo img { width: 150px; }
  /* the illustration and the duplicate headline pushed the form below the fold */
  #welcome .page-content .left, #register .page-content .left, #Otp-Verification .page-content .left { display: none; }
  #welcome .right, #register .right, #Otp-Verification .right { width: 100%; padding: 24px 20px; border-radius: 16px; box-shadow: 0 8px 28px rgba(17, 24, 39, .08); }
  #welcome .right h1, #register .right h1, #Otp-Verification .right h3 { font-size: 24px; }
  #Otp-Verification .right .otp-inputs { gap: 6px; }
}

/* ---- 11. analytics range bar: preset tabs as a segmented control, custom dates wrap to their own row */
.cx-range-bar .cx-custom[hidden] { display: none; }
@media (max-width: 767.98px) {
  .cx-range-bar { gap: 6px; }
  .cx-range-bar .cx-custom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; width: 100%; order: 5; }
  .cx-range-bar .cx-custom input[type=date] { width: 100%; min-width: 0; }
  .cx-range-bar .cx-custom .cx-btn { grid-column: 1 / -1; }
  .cx-range-label { margin-left: 0; width: 100%; order: 6; font-size: 14px; }
}

/* ---- 12. plans: tier colour marks the card (badge, top rule, price); the Pay action is the one primary button */
.cx-plan .button, .cx-plan a.button { background: var(--cx-btn) !important; color: #fff; box-shadow: none; filter: none; }
.cx-plan .button:hover, .cx-plan a.button:hover { background: var(--cx-btn-hover) !important; transform: none; filter: none; }

/* ---- 13. legacy content pages on phones -------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* the stretched blue blob sat behind the headings and copy (Products & Services, About…) */
  #spotlight.about { background-image: none !important; }
  #spotlight section.top div.about { margin-top: 24px; }
  #spotlight section.top-box div.head { margin-top: 24px; padding: 24px 0 8px; height: auto; min-height: 0; }
  #spotlight section.top-box div.head h3 { font-size: 30px; line-height: 1.2; }
  #spotlight section.top-box div.head p { font-size: 16px; }
  /* justified copy in a 328px column leaves rivers of white */
  #conditions .wrapper .static-sections .policy-wrapper, #conditions .wrapper .static-sections .policy-wrapper p,
  #spotlight section.top div.about div.inner-content div.left div.content p,
  #registration div.register p.content, #employers div.main div#Company div.basic p, #employers div.main div#Company div.about,
  #spotlight section.top-box p { text-align: left !important; hyphens: auto; }
  #conditions .wrapper .static-sections .policy-wrapper { line-height: 1.7; }
  /* training tabs: one scrollable row */
  #training-programs #programs div.headings { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #training-programs #programs div.headings::-webkit-scrollbar { display: none; }
  #training-programs #programs div.headings ul { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; gap: 6px; }
  #training-programs #programs div.headings ul li { flex: 0 0 auto; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---- 14. legacy profile page --------------------------------------------------------------------- */
/* one primary action, the rest secondary on the blue band, the destructive one last and quiet */
div.banner div.ban-right.cx-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
div.banner div.ban-right.cx-profile-actions a.button { margin: 0; min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 999px;
  background: #fff; color: var(--cx-ink); box-shadow: none; }
div.banner div.ban-right.cx-profile-actions a.button:hover { background: var(--cx-navy-tint); color: var(--cx-ink); }
div.banner div.ban-right.cx-profile-actions a.button.cx-pa-primary { background: var(--cx-btn); color: #fff; }
div.banner div.ban-right.cx-profile-actions a.button.cx-pa-primary:hover { background: var(--cx-btn-hover); }
div.banner div.ban-right.cx-profile-actions a.button.cx-pa-danger { background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; padding: 8px 10px; }
div.banner div.ban-right.cx-profile-actions a.button.cx-pa-danger:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 767.98px) {
  div.banner { padding: 16px; }
  div.banner div.ban-right.cx-profile-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  div.banner div.ban-right.cx-profile-actions a.button { width: 100%; justify-content: center; text-align: center; padding: 8px 10px; }
  div.banner div.ban-right.cx-profile-actions a.button.cx-pa-primary,
  div.banner div.ban-right.cx-profile-actions a.button.cx-pa-danger { grid-column: 1 / -1; }
}
/* grid items default to min-width:auto - one long line widened the 1-col grid past the phone */
.cx-profile-extras { min-width: 0; max-width: 100%; }
.cx-profile-extras > * { min-width: 0; }
.cx-profile-extras .cx-list li > * { min-width: 0; overflow-wrap: anywhere; }

/* ---- 15. bottom-right stack: the assistant button never covers a sticky action bar or the notice card */
.cx-assist-fab { bottom: calc(18px + var(--cx-safe-bottom, 0px)); transition: bottom .2s ease, transform .15s, box-shadow .15s; }
body:has(.cx-wizard .cx-actions) .cx-assist-fab,
body:has(.cx-action-bar) .cx-assist-fab { bottom: calc(88px + var(--cx-safe-bottom, 0px)); }
@media (max-width: 767.98px) {
  body:has(#cx-notice-banner:not(.cx-notice-blocking)) .cx-assist-fab { bottom: calc(84px + var(--cx-safe-bottom, 0px)); }
  body:has(#cx-notice-banner:not(.cx-notice-blocking)):has(.cx-wizard .cx-actions) .cx-assist-fab { bottom: calc(150px + var(--cx-safe-bottom, 0px)); }
}
/* while the (non-blocking) privacy notice is up, sticky action bars sit above it rather than under it */
body:has(#cx-notice-banner:not(.cx-notice-blocking)) .cx-wizard .cx-actions { bottom: calc(84px + var(--cx-safe-bottom, 0px)); }

/* ---- 16. job filters sheet (phones): above the fixed header, sticky title + close, sticky apply row */
@media (max-width: 767.98px) {
  .cx-search .right { z-index: 1095; padding-bottom: var(--cx-safe-bottom, 0px); }
  .cx-search .right .cx-filters { padding: 0 16px 16px; }
  .cx-search .right .cx-filters-head { position: sticky; top: 0; z-index: 2; margin: 0 -16px 16px; padding: 12px 8px 12px 16px; background: #fff; }
  .cx-search .right .cx-close { min-width: 44px; min-height: 44px; font-size: 30px; line-height: 1; background: none; border: 0; border-radius: 50%; }
  .cx-search .right .cx-filter-actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; margin: 16px -16px 0; padding: 12px 16px calc(12px + var(--cx-safe-bottom, 0px));
    background: #fff; border-top: 1px solid var(--cx-line); }
  .cx-search .right .cx-filter-actions > * { flex: 1 1 0; justify-content: center; }
}

/* scrollable tables show a soft edge shadow on the side that has more content (pure CSS scroll shadows) */
.cx-table-wrap, .table-scroll {
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(17, 24, 39, .14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, .14), transparent) right / 12px 100% no-repeat scroll;
}
@media (max-width: 767.98px) { .cx-card-list.cx-table-wrap { background: none; } } /* rows are cards there */

/* resume builder: brand (AA) active tab and selected-template ring instead of the leftover bright orange / blue */
.cx-builder-tabs .cx-tab.active { background: var(--cx-btn); border-color: var(--cx-btn); color: #fff; }
.cx-template:has(input:checked) { border-color: var(--cx-primary); box-shadow: 0 0 0 3px var(--cx-primary-ring); }
.cx-template input:checked { accent-color: var(--cx-btn); }
.cx-template:has(input:checked) .cx-radio { border-color: var(--cx-btn); }
.cx-template:has(input:checked) .cx-radio:after { background: var(--cx-btn); }

/* ---- 17. one letter spacing everywhere ----------------------------------------------------------- */
/* DM Sans is spaced for reading at its default tracking. The audit (2026-10-04) found 137 different letter-spacing
   rules across the legacy sheets, feature CSS and inline styles (-1px on headings up to +2px on uppercase labels),
   which made spacing look uneven from one block to the next. Everything uses the font's own spacing now; the only
   exception is the star ratings, where letter-spacing spaces the ★ glyphs apart. New CSS: don't set letter-spacing. */
body, body *:not(.cx-stars):not(.cx-star-input):not(.cx-star-input *) { letter-spacing: normal !important; word-spacing: normal !important; }

/* ---- 18. typography system ---------------------------------------------------------------------------
   Scale  12 · 14 · 16 · 18 · 20 · 24 · 30 · 36 · 48 px (tokens --cx-text-*; base 16, ~1.25 major-third ratio rounded
          to whole pixels). Every px size in the site CSS/templates was snapped to it on 2026-10-05; 12px is the floor.
   Weight three only - 400 regular (descriptions, body, meta), 600 semibold (labels, small headings), 700 bold (titles).
          fonts.css declares the face 400-700, so any stray 300/800/900 renders as 400/700.
   Line   body 1.5 (WCAG 1.4.12), headings 1.2-1.4 - big type needs less leading. */
body { font-size: var(--cx-text-base); line-height: 1.5; font-weight: 400; }
h1, h2, h3, h4 { font-weight: 700 !important; }
h5, h6, label, legend, dt, th { font-weight: 600; }
strong, b { font-weight: 700; }
:where(h1, h2) { line-height: 1.2; }
:where(h3, h4) { line-height: 1.3; }
:where(h5, h6) { line-height: 1.4; }
:where(p, li, dd, blockquote, td) { font-weight: 400; }
:where(p) { line-height: 1.5; }
small, .cx-muted { font-weight: 400; }
small { font-size: var(--cx-text-xs); }  /* the UA default (smaller = 13.33 / 11.67 px) sat off the scale */

/* ---- 19. proximity rule fixes (spacing audit 2026-10-05: gap inside a box < its padding <= gap between boxes) */
.cx-charts, .cx-analytics .cx-cols { gap: var(--sp-5, 24px); }      /* chart/benchmark cards were 12px apart with 24px padding */
.cx-profile-extras .cx-card { padding: var(--sp-5, 24px); }         /* was 16px padding around 16-21px inner gaps */
@media (max-width: 767.98px) {
  .cxd-card { padding: 20px; }                                      /* 18px padding around 20-24px inner gaps */
  .cx-analytics .cx-card { padding: 20px; }                         /* 16px padding around 23px inner gaps */
  .cxd-card.cxd-ai > p { margin-bottom: 12px; }
  .cxd-card.cxd-ai .cxd-prompts { margin-bottom: 16px; }
}
:where(h5) { font-size: var(--cx-text-sm); }  /* UA default .83em = 13.3px, off the scale */
:where(h6) { font-size: var(--cx-text-xs); }
/* a link inside a title keeps the title's weight - a legacy a{} rule made linked titles render regular
   (application cards: <strong><a>job</a></strong>, headings whose text is a link) */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, strong a, b a { font-weight: inherit; }

/* ---- 20. fit rules: nothing spills out of its parent, no button label ever wraps (2026-10-05) ----------------
   Rule 1  a button label is always one line. The row it sits in wraps instead, and a label too long for a phone
           row takes the full width (still one line, ellipsis only as a last resort).
   Rule 2  every child stays inside its parent: grids use minmax(min(X,100%),1fr), flex rows wrap, media shrink. */
button, a.button, .button, input[type=submit], input[type=button], [role=button],
.cx-btn, .cxd-btn, .btn, .cxjd-btn, .cx-hero-btn, .cx-account-btn, .cxj-view, .cxd-save, .cx-board-tab, .cx-tab,
.cx-assist-fab, .cx-chip, .cxd-pill, .cx-badge, .cx-stage-pill, .cxd-more {
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.cke button, .cke a, .cke span { max-width: none; overflow: visible; text-overflow: clip; } /* the editor sizes its own controls */
:is(.cxd-hero-actions, .cx-actions, .cx-card-actions, .cxj-cta, .cx-page-banner-actions, .cx-builder-actions, .cx-builder-foot-actions,
    .cx-mobile-bar, .cx-ats-actions, .cxd-res-acts, .cxjd-actions, .cx-row-actions, .cx-filter-actions, .cxd-head,
    .cxd-iv-top, .cxd-job-top-r, .cx-search-tools, .cx-builder-top-left) { flex-wrap: wrap; }
@media (max-width: 575.98px) {
  /* side-by-side pairs that cannot fit at 320-360px: each takes its own full-width row */
  .cxd-hero-actions .cxd-btn, .cx-mobile-bar .cx-btn, .cxjd-btn-ghost, #cx-save-search, #cx-alert-search,
  .cx-page-banner-actions .cx-hero-btn, .cx-page-banner-actions .cx-account-btn { flex: 1 1 auto; justify-content: center; }
}

/* the legacy sheet gives every field margin-left:2px on top of width:100% - each one stuck 2px out of its column */
input, textarea, select { margin-left: 0; }
/* chart cards needed 320px minimum and spilled out of a 288px column at 320px */
.cx-charts { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
input[type=file] { max-width: 100%; }
/* header: the logo shrinks with its box instead of overflowing it (an old width rule kept the nav box wide) */
@media (max-width: 1280px) {
  div.header div.nav { width: auto !important; }
  div.header div.logo { flex: 1 1 auto; min-width: 0; }
  div.header div.logo h1 { max-width: 100%; }
  div.header div.logo h1 img { max-width: 100%; height: auto; max-height: 100%; }
  /* style.css sizes the logo inside #spotlight as a share of the box (img width:80%, h1 253px), which outranks the
     rules above: between 992 and 1280px the image stretched across the header and its whitespace pushed the mark
     to the middle. Keep the logo at its natural size, at the start of the bar, with the menu at the end. */
  #spotlight div.header div.logo h1, div.header div.logo h1 { width: auto; max-width: 100%; height: 48px; }
  #spotlight div.header div.logo h1 img, div.header div.logo h1 img { width: auto; height: 100%; max-height: 100%; }
  div.header { justify-content: space-between; }
}
@media (max-width: 767.98px) { #spotlight div.header div.logo h1, div.header div.logo h1 { height: 38px; } }
@media (max-width: 359.98px) { #spotlight div.header div.logo h1, div.header div.logo h1 { height: 32px; } }

/* ---- dashboard pieces (candidate + employer) ---- */
/* stage tiles: six tiles always split evenly - 6 across, 3 + 3 on tablets, 2 per row on phones (never 5 + 1) */
.cxd-stages { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .cxd-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cxd-stage span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .cxd-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* recent applications (candidate + employer dashboards): li = [main: logo + title/company/applied]
   then, on its own row aligned to the card's end, [side: View · status pill(s)] */
.cxd-list li { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.cxd-list .cxd-li-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }  /* logo top-aligned with the title */
.cxd-list .cxd-li-main .cxd-logo { flex: none; }
.cxd-list .cxd-li-main .cxd-grow { flex: 1 1 auto; min-width: 0; }
.cxd-list .cxd-li-main .cxd-grow > :last-child { margin-bottom: 0; }
/* row-reverse keeps the DOM order (pill, View) but shows "View  Applied" packed against the right edge */
.cxd-list .cxd-li-side { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 12px; }
.cxd-list .cxd-jt { display: block; overflow-wrap: anywhere; }

/* interview card: the status and mode tags wrap - the second one sits under the first instead of spilling */
.cxd-iv-top { justify-content: flex-start; align-items: flex-start; }

/* recommended job footer: salary over location, then a full-width button */
.cxd-job-foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.cxd-job-foot .cxd-job-pay { width: 100%; }
.cxd-job-foot .cxd-job-pay small { white-space: normal; overflow: visible; }
.cxd-job-foot .cxd-btn { width: 100%; justify-content: center; }

/* OTP: six equal columns that always fill the card (the old flex row + legacy margins pushed the 6th box out at 320px) */
#Otp-Verification .right .otp-inputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; margin: 0 0 20px; }
#Otp-Verification .right .otp-inputs input.single { width: 100% !important; min-width: 0; height: 52px; margin: 0 !important; padding: 0; text-align: center; }
#Otp-Verification .right form p { overflow-wrap: anywhere; }
#resend_otp, a.sign-b { white-space: nowrap; }

/* buttons never shrink below their label (overflow:hidden would otherwise let flex squeeze them into "…"):
   a row that cannot fit its buttons side by side puts each on its own line instead */
:is(button, a.button, .button, .cx-btn, .cxd-btn, .btn, .cxjd-btn, .cx-hero-btn, .cx-account-btn, .cxj-view, .cxd-save, input[type=submit]) { min-width: fit-content; }
.cke :is(button, a) { min-width: 0; }
@media (max-width: 360px) {
  /* the smallest phones: one step down the scale for button labels, a little less side padding */
  :is(.cx-btn, .cxd-btn, .cxjd-btn, a.button, .button, .cxj-view, .cx-hero-btn, .cx-account-btn) { font-size: var(--cx-text-sm) !important; padding-left: 14px !important; padding-right: 14px !important; }
}

/* remaining spills from the fit audit */
/* job description editor: toolbar groups wrap onto more rows instead of running past a 288px editor */
.cke .cke_top, .cke .cke_toolbox { white-space: normal !important; }
.cke .cke_toolbox { display: flex; flex-wrap: wrap; gap: 2px 0; }
.cke .cke_toolbar { float: none; }
/* legacy profile "Overview": 2-up cards were 105px wide at 320 - two columns only where they fit */
div.over-view div.flex-view div.card { min-width: 0; }
div.over-view div.flex-view div.card div.offer { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { div.over-view div.flex-view div.card { flex: 1 1 100%; width: 100%; } }
/* profile actions: one column on small phones so "Complete Profile (100%)" keeps its one line */
@media (max-width: 420px) { div.banner div.ban-right.cx-profile-actions { grid-template-columns: 1fr; } }
div.grow .cx-badge { margin-right: 0; }
/* sign-in role switch: three options fit a 248px card at 320 */
#welcome .right .radio > div label { padding: 9px 4px; }
/* plans row: no negative side margin poking past the page */
.cx-plans__row { margin-left: 0; margin-right: 0; }
.cke { box-sizing: border-box; max-width: 100%; }
.cx-badge { display: inline-block; vertical-align: middle; }
/* auth pages 768-1100px: the form card keeps its 420px width beside the illustration (an old rule made it 100% and
   pushed it out of the row) */
@media (min-width: 768px) {
  #welcome .wrapper div.page-content, #register .wrapper div.page-content, #Otp-Verification .wrapper div.page-content { min-width: 0; }
  #welcome .right, #register .right, #Otp-Verification .right { flex: 0 0 auto; width: min(420px, 50%); min-width: 340px; }
}
.cx-save-search .cx-btn { flex: 1 1 auto; justify-content: center; }

/* ---- home pop-ups (#modal_overlay on index.html) ------------------------------------------------------
   style.css forced every pop-up to height:600px !important below 640px, so the "Find your dream job" box
   ended mid-card and the cards spilled out of it; its three cards also stayed 32% wide. On phones and
   tablets: the box grows with its content, the overlay scrolls, and the cards stack as full-width rows. */
@media (max-width: 991.98px) {
  #modal_overlay, #modal_overlay_2 { align-items: flex-start; padding: 16px; box-sizing: border-box; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #modal_overlay div.pop-up-box { height: auto !important; width: 100% !important; max-width: 560px; margin: 0 auto !important;
    padding: 28px 20px 20px !important; box-sizing: border-box; border-radius: 18px; }
  div.request div.r-top h3 { font-size: 24px !important; line-height: 1.25; margin: 0 36px 16px 0 !important; }
  div.request div.r-top div.search form div.cont-r { gap: 10px; align-items: center; padding: 8px 8px 8px 14px; }
  div.request div.r-top div.search form div.cont-r input { min-width: 0; }
  div.request div.r-top div.search form div.cont-r button.button { flex: 0 0 auto; margin: 0; white-space: nowrap; }
  div.request div.r-middle p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 18px; font-size: 14px; }
  div.request div.r-middle p span { padding: 3px 12px; border-radius: 999px; background: #fff; border: 1px solid #e3e7ef; color: #374151; font-size: 13px; }
  div.request div.r-bottom div.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  div.request div.r-bottom div.cards div.card, div.request div.r-bottom div.cards div.card-x,
  div.request div.r-bottom div.cards div.card-y, div.request div.r-bottom div.cards div.card-z { width: 100% !important; margin: 0 !important; padding: 0; }
  div.request div.r-bottom div.cards div.card > a { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; }
  div.request div.r-bottom div.cards div.card div.c-top { flex: 1 1 auto; min-width: 0; }
  div.request div.r-bottom div.cards div.card div.c-top h5 { margin: 0 0 2px; font-size: 13px; }
  div.request div.r-bottom div.cards div.card div.c-top h4 { margin: 0 0 4px !important; font-size: 18px; letter-spacing: 0; }
  div.request div.r-bottom div.cards div.card div.c-top p { margin: 0; font-size: 14px !important; line-height: 1.45; }
  div.request div.r-bottom div.cards div.card div.c-bottom { flex: 0 0 64px; width: 64px !important; margin: 0; }
  div.request div.r-bottom div.cards div.card .thumb { width: 64px !important; }
  div.request div.r-bottom div.cards div.card .thumb img { width: 100%; height: auto; display: block; }
  .pop-close { top: 14px; right: 14px; z-index: 2; }
  .pop-close span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; font-size: 18px; }
}
/* OTP page: the "We have sent a code to …" line read at about 2:1 contrast; use the body-copy grey (7.5:1) */
#Otp-Verification .right p.mobile-number { color: #4b5563; }

/* Buttons always centre their label: a stretched button (flex:1, width:100%) kept its text on the left
   because .cx-btn was inline-block with start-aligned text. Centre the label whatever the button's display
   (text-align for block/inline-block, justify-content for flex) without changing how wide any button is. */
.cx-btn, .cxd-btn, a.button, button.button, .cx-account-btn, .cx-hero-btn { text-align: center; justify-content: center; }
input[type=submit], input[type=button], button { text-align: center; }

/* ==== 2026-10-13 responsive pass ======================================================================= */
/* Action rows on phones: buttons share the row evenly (a lone button fills it) with centred labels, instead of
   left-packed buttons of mixed widths (interviews, salary insights, company page, settings forms). */
@media (max-width: 575.98px) {
  .cx-actions { gap: 10px; }
  .cx-actions > .cx-btn, .cx-actions > form { flex: 1 1 auto; }
  .cx-actions > form { display: flex; }
  .cx-actions > form > .cx-btn { flex: 1 1 auto; }
}

/* File inputs: the bare browser "Choose file" grey box becomes a site-styled button beside the file name. */
input[type=file] { max-width: 100%; font-size: 13px; color: #6b7280; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid #d6dae4; border-radius: 8px; background: #fff;
  color: #111827; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; }
input[type=file]::file-selector-button:hover { border-color: var(--cx-primary, #ef801f); color: var(--cx-primary-dark, #d86f14); }

/* Training programmes tabs: three short labels fit as equal tabs on a phone, so no part of "Completed" hides
   behind a sideways scroll. */
@media (max-width: 575.98px) {
  #training-programs #programs div.headings, #training-programs #wrapper div.headings { overflow: visible; }
  #training-programs #wrapper div.headings ul { display: flex; width: 100%; min-width: 0; box-sizing: border-box; gap: 4px; }
  #training-programs #wrapper div.headings ul li { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 6px; font-size: 14px; text-align: center; }
}

/* Employer "My jobs" rows on phones: checkbox beside the title, status under it, Edit | Pipeline | ⋮ on one
   line (the ⋮ used to sit alone on its own row), and the six counters as a 3 x 2 grid instead of 5 + 1. */
@media (max-width: 720px) {
  .cxe-jobtop:has(> .cxe-select) { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
  .cxe-jobtop:has(> .cxe-select) > .cxe-select { grid-column: 1; grid-row: 1; align-self: start; margin: 2px 0 0; }
  .cxe-jobtop:has(> .cxe-select) > .cxd-grow { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
  .cxe-jobtop:has(> .cxe-select) > .cxe-st { grid-column: 2 / -1; justify-self: start; }
  .cxe-jobtop:has(> .cxe-select) > a.cxd-btn:nth-of-type(1) { grid-column: 2; }
  .cxe-jobtop:has(> .cxe-select) > a.cxd-btn:nth-of-type(2) { grid-column: 3; }
  .cxe-jobtop:has(> .cxe-select) > a.cxd-btn:only-of-type { grid-column: 2 / 4; }
  .cxe-jobtop:has(> .cxe-select) > .cxe-more-btn { grid-column: 4; width: 40px; height: 40px; }
  .cxe-jobtop:has(> .cxe-select) > a.cxd-btn { margin: 0; width: 100%; }
  .cxe-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}