/* Canada Careers — /jobs (Find Jobs) page. UX standard §6 (docs/UX-STANDARDS.md, 2026-09-10). Tokens only, mobile first.
   Loaded AFTER public.css + maps.css. Every class here is prefixed jsearch / jrow / jchip / jpager / jseg / jview so the
   legacy .jobs-layout / .filters / .results rules in public.css + maps.css no longer apply to this page.

   Breakpoints: <768 phone (filters = full-screen drawer, List | Map switch) · 768–1023 tablet (bar + popover, map toggle
   above the list) · ≥1024 desktop (bar + popover, sticky map beside a single results column, "Hide map" toggle).
   <html> carries .jobs-map-on / .jobs-map-off (localStorage, set before first paint by an inline script in jobs.ejs). */

/* ---------- page skeleton ---------- */
.jsearch { padding-bottom: 48px; }
.jsearch__top { display: grid; gap: 14px; padding-top: 16px; }
.jsearch__total { margin: 0; }
.jsearch__total strong { color: var(--cc-navy); }

/* ---------- filter bar (the form) ---------- */
.jsearch__form { position: relative; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.jsearch__form .field { gap: 6px; }
.jsearch__kw { position: relative; min-width: 0; }
.jsearch__kw-input { padding-right: 52px; }
.jsearch__kw-go { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--cc-navy); display: grid; place-items: center; cursor: pointer; }
.jsearch__kw-go:hover { background: var(--cc-navy-50); }
.jsearch__kw-go:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: -2px; }
.jsearch__open { gap: 8px; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.jsearch__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cc-red); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1; }
.jsearch__go { display: none; }                          /* phone: the magnifier inside the keyword field submits */
.jsearch__near-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.jsearch__near-me { gap: 6px; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.jsearch__near-status { margin: 0; }
.jsearch__near-status:empty { display: none; }
.jsearch__near-status .is-error { color: var(--kds-danger); font-weight: 500; }
.jsearch__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.jsearch__fieldset legend { font-weight: 600; font-size: .9rem; color: var(--cc-ink); padding: 0; margin-bottom: 6px; }
.jsearch__more-btn { display: none; }                    /* phone: the "more" fields are simply part of the drawer */
.jsearch__more-grid { display: grid; gap: 16px; }
.jsearch__more-foot { display: none; }
.jsearch__chev { transition: transform .15s; }

/* phone drawer = the panel, full screen, above the sticky header (z 500) */
.jsearch__panel { display: none; }
.js .jsearch__panel.is-open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 700; background: #fff; }
html:not(.js) .jsearch__panel { display: grid; grid-column: 1 / -1; gap: 14px; }   /* no JS: every field inline, form still submits */
html:not(.js) .jsearch__open, html:not(.js) .jsearch__panel-head, html:not(.js) .jsearch__panel-foot { display: none; }
html:not(.js) .jsearch__panel-body { display: grid; gap: 14px; }
.jsearch__panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--kds-border); }
.jsearch__panel-head h2 { margin: 0; font-size: 1.15rem; }
.jsearch__close { width: 44px; height: 44px; border: 1px solid var(--kds-border); border-radius: 10px; background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--cc-navy); }
.jsearch__panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; display: grid; gap: 16px; align-content: start; }
.jsearch__panel-foot { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kds-border); background: rgba(255,255,255,.97); }
html.jsearch-lock, html.jsearch-lock body { overflow: hidden; }

/* segmented radio group (work arrangement) */
.jseg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.jseg__opt { position: relative; }
.jseg__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.jseg__opt span { display: grid; place-items: center; min-height: 44px; padding: 6px 6px; white-space: nowrap; border: 1px solid var(--kds-border); border-radius: 10px; font-size: .9rem; font-weight: 500; background: #fff; text-align: center; }
.jseg__opt input:checked + span { background: var(--cc-navy); color: #fff; border-color: var(--cc-navy); }
.jseg__opt input:focus-visible + span { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }
@media (min-width: 480px) { .jseg { grid-template-columns: repeat(4, 1fr); } }

/* ---------- toolbar: chips · view switch / map toggle · sort ---------- */
.jsearch__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; min-width: 0; }
.jchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: 999px; background: var(--cc-navy-100); color: var(--cc-navy-700); font-size: .875rem; font-weight: 600; text-decoration: none; }
.jchip:hover { background: var(--cc-red-100); color: var(--cc-red-700); }
.jchip__x { font-size: 1.1rem; line-height: 1; }
.jchip--clear { background: transparent; border: 1px solid var(--kds-border); color: var(--kds-fg-muted); }
.jchip:focus-visible, .jsearch__map-toggle:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }
.jsearch__hint { margin: 0; flex: 1 1 100%; }
/* phone: List | Map and Sort share one line — a wrapped Sort row pushed the map a row further down the screen */
.jsearch__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 1 1 100%; flex-wrap: nowrap; }
.jsearch__sort .small { flex: none; }
.jview { display: inline-flex; border: 1px solid var(--kds-border); border-radius: 10px; overflow: hidden; background: #fff; }
.jview button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--kds-fg-muted); cursor: pointer; }
.jview button[aria-pressed="true"] { background: var(--cc-navy); color: #fff; }
.jview button:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: -2px; }
.jsearch__map-toggle { display: none; gap: 6px; white-space: nowrap; font-size: .875rem; min-height: 40px; }
.jsearch__sort { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.jsearch__sort .input { width: auto; min-width: 0; max-width: 100%; }
@media (min-width: 420px) { .jsearch__sort .input { min-width: 150px; } }
html:not(.js) .jview, html:not(.js) .jsearch__map-toggle { display: none !important; }

/* ---------- results + map ---------- */
.jsearch__body { padding-top: 16px; display: grid; gap: 16px; align-items: start; }
.jsearch__results { min-width: 0; }
.jsearch__list { display: grid; gap: 10px; }
.jsearch__map { min-width: 0; display: none; }
.jsearch__canvas { height: 320px; }
.jsearch__map-note { margin: 8px 0 0; font-size: .875rem; }
/* phone Map mode (?view=map): list hidden, map fills the viewport under the header and stays put while the page scrolls */
@media (max-width: 767px) {
  .js .jsearch.is-map .jsearch__map { display: block; position: sticky; top: var(--cc-header-h); }
  .js .jsearch.is-map .jsearch__canvas { height: calc(100dvh - var(--cc-header-h)); min-height: 360px; border-radius: 0; margin: 0 -16px; width: auto; }
  .js .jsearch.is-map .jsearch__results, .js .jsearch.is-map .jsearch__map-note { display: none; }
}

/* result row */
.jrow { position: relative; display: grid; gap: 10px; background: #fff; border: 1px solid var(--kds-border); border-radius: 14px; padding: 16px; transition: border-color .15s, box-shadow .15s; }
.jrow:hover { border-color: var(--cc-line-strong); box-shadow: var(--kds-shadow-2); }
.jrow.is-active { border-color: var(--cc-navy); box-shadow: 0 0 0 3px var(--cc-navy-100); }
.jrow--ref { border-left: 4px solid var(--cc-teal); }
.jrow__main { min-width: 0; display: grid; gap: 6px; }
.jrow__title { margin: 0; font: 700 1.0625rem/1.3 var(--cc-font-display); }
.jrow__title a { color: var(--cc-navy); text-decoration: none; }
.jrow__title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }   /* whole row is the link target */
.jrow__title a:hover { color: var(--cc-red); }
.jrow__co { margin: 0; color: var(--kds-fg-muted); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.jrow__company { color: var(--cc-ink); font-weight: 500; }
.jrow__sep { color: var(--kds-fg-faint); }
.jrow__more { font-size: .8125rem; white-space: nowrap; }
.jrow__dist { color: var(--cc-navy); font-weight: 700; font-size: .875rem; white-space: nowrap; }
.jrow__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jrow__chips .badge { background: var(--cc-surface); color: var(--kds-fg-muted); border: 1px solid var(--kds-border); font-weight: 500; }
.jrow__chips .jrow__ref { background: var(--cc-teal-100); color: #16606a; border-color: transparent; font-weight: 600; }
.jrow__side { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.jrow__salary { margin: 0; font-weight: 700; color: var(--cc-ink); }
.jrow__meta { margin: 0; font-size: .8125rem; color: var(--kds-fg-faint); display: flex; flex-wrap: wrap; gap: 2px 6px; }
@media (min-width: 640px) {
  .jrow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 20px; }
  .jrow__side { flex-direction: column; align-items: flex-end; text-align: right; gap: 6px; max-width: 240px; }
  .jrow__meta { justify-content: flex-end; }
}

/* pagination + empty state
   Phone: numbers first (centred, first / … / window / … / last), then Previous | Next, then "Page n of m".
   ≥640: Previous | numbers | Next on one line with the status line under it. The ±2 numbers are dropped below 480
   so the row never wraps into a ragged block. */
.jpager { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 24px; flex-wrap: wrap; }
.jpager__pages { order: -1; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.jpager__num { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--cc-navy); }
.jpager__num:hover { background: var(--cc-navy-50); }
.jpager__num:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }
.jpager__num.is-current { background: var(--cc-navy); color: #fff; }
.jpager__gap { display: inline-grid; place-items: center; min-width: 20px; height: 44px; color: var(--kds-fg-faint); }
.jpager__status { order: 1; flex: 1 1 100%; margin: 0; text-align: center; font-size: .875rem; color: var(--kds-fg-muted); }
.jpager [aria-disabled="true"] { opacity: .45; pointer-events: none; }
@media (max-width: 479px) { .jpager__num--far { display: none; } }
@media (min-width: 640px) { .jpager__pages { order: 0; flex: 0 1 auto; } }
/* Clicking a map pin highlights its row (jobs-search.js toggles .is-active on [data-job-row]). Keyed on the data
   attribute, not on a row class, so the highlight survives whichever card component renders the row. */
[data-job-row].is-active { border-color: var(--cc-navy); box-shadow: 0 0 0 3px var(--cc-navy-100); }
.jsearch__empty h3 { margin-bottom: 6px; }
.jsearch__empty p { max-width: 48ch; margin: 0 auto 16px; }

/* ---------- tablet and up: bar mode ---------- */
@media (min-width: 768px) {
  .jsearch__top { padding-top: 24px; gap: 16px; }
  .jsearch__open, .jsearch__kw-go { display: none; }
  .jsearch__kw-input { padding-right: 12px; }
  .jsearch__go { display: inline-flex; }
  /* the panel dissolves: its fields become grid items of the bar */
  .js .jsearch__panel, .js .jsearch__panel.is-open, .jsearch__panel, .jsearch__panel-body { display: contents; }
  .jsearch__panel-head, .jsearch__panel-foot { display: none !important; }
  .jsearch__form { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; grid-template-areas: "kw kw kw near near near go" "radius radius cat cat prov prov more"; }
  .jsearch__kw { grid-area: kw; }
  .jsearch__near { grid-area: near; }
  .jsearch__radius { grid-area: radius; }
  .jsearch__cat { grid-area: cat; }
  .jsearch__prov { grid-area: prov; }
  .jsearch__go { grid-area: go; }
  .jsearch__more-btn { grid-area: more; display: inline-flex; gap: 8px; white-space: nowrap; justify-self: stretch; }
  .jsearch__more-btn[aria-expanded="true"] { background: var(--cc-navy-50); border-color: var(--cc-navy); }
  .jsearch__more-btn[aria-expanded="true"] .jsearch__chev { transform: rotate(180deg); }
  .jsearch__near-status { grid-column: 1 / -1; }
  /* "More filters" popover, anchored to the bar's right edge */
  .jsearch__more { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 650; width: min(640px, 100%); background: #fff; border: 1px solid var(--kds-border); border-radius: 16px; box-shadow: 0 16px 48px rgba(22, 28, 38, .16); padding: 20px; }
  .jsearch__more.is-open { display: block; }
  html:not(.js) .jsearch__more { display: block; position: static; box-shadow: none; grid-column: 1 / -1; width: auto; }
  .jsearch__more-grid { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .jsearch__community { grid-column: 1 / -1; }
  .jsearch__more-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kds-border); }
  .jsearch__more-foot .kds-btn { min-height: 44px; font-size: .875rem; }   /* real controls, not table-row buttons */
  /* toolbar */
  .jchips, .jsearch__hint { flex: 1 1 260px; }
  .jchip { min-height: 36px; padding: 4px 12px; }
  .jsearch__tools { flex: 0 0 auto; margin-left: auto; justify-content: flex-end; flex-wrap: wrap; }
  .jview { display: none; }
  .jsearch__map-toggle { display: inline-flex; }
  /* map above the list, off by default on tablets (toggle) */
  .jsearch__body { padding-top: 20px; gap: 20px; }
  .jsearch__map { order: -1; }
  .js.jobs-map-on .jsearch__map { display: block; }
  .jsearch__canvas { height: 400px; }
}

/* ---------- desktop: single results column + sticky map ---------- */
@media (min-width: 1024px) {
  .jsearch__form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; grid-template-areas: "kw near radius cat prov more go"; }
  .jsearch__more-btn { justify-self: auto; }
  .jsearch__body { grid-template-columns: minmax(0, 1fr) minmax(360px, 42%); gap: 24px; padding-top: 24px; }
  .jsearch__map { order: 0; display: block; position: sticky; top: calc(var(--cc-header-h) + 16px); }
  .js.jobs-map-off .jsearch__map { display: none; }
  .jsearch__canvas { height: calc(100vh - var(--cc-header-h) - 60px); min-height: 420px; max-height: 820px; }
  /* map hidden: one centred column, 760px max */
  .js.jobs-map-off .jsearch__body { grid-template-columns: minmax(0, 760px); justify-content: center; }
  html:not(.js) .jsearch__body { grid-template-columns: minmax(0, 760px); justify-content: center; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .jsearch__near-me span { display: none; }               /* icon-only "Near me" keeps the place field usable */
  .jsearch__near-me { width: 44px; padding: 0; justify-content: center; }
}

/* ---------- print ---------- */
@media print { .jsearch__form, .jsearch__toolbar, .jsearch__map, .jpager { display: none !important; } .jsearch__body { display: block; } }

/* ---------- round 3 (2026-09-14) additions ---------- */
/* Posting ID (client item 6): small, quotable, never competes with the salary */
.jrow__pid { margin: 0; font-size: .75rem; color: var(--kds-fg-faint); letter-spacing: .01em; }
.jrow__pid span { font-family: var(--kds-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 600; color: var(--kds-fg-muted); }
/* With the map open at ≥1024 the SEARCH AREA uses the one permitted wider measure (UX standard §1: .container--wide,
   /jobs only): the filter bar and the results + map grid it sits on top of. The .page-head band is deliberately NOT in
   this list — it stays at the 1200px .container measure, so the h1 sits on the same left edge as every other page
   (it used to jump 80px when you navigated to /jobs, the widest cross-page inconsistency on the site). */
@media (min-width: 1024px) {
  .jobs-map-on .page-jobs .jsearch__top, .jobs-map-on .page-jobs .jsearch__body { max-width: 1360px; }
}

/* ---------- landing pages (2026-09-25, SEO/AEO round) ----------
   /jobs?category=…&province=… is a real landing page: heading + intro from lib/landing.js, a visible FAQ that the
   FAQPage JSON-LD mirrors word for word, and the related-search network. All of it sits BELOW the results + map
   grid, so the filter bar, the 390px drawer and the sticky map keep every rule above this block.
   Primitives only (.section, .container, .card, .kds-btn, .eyebrow) — no page-specific font sizes (UX standard §4). */
.jsearch--landing { padding-bottom: 8px; }
.jlanding__intro { margin: 0 0 6px; }

/* FAQ — same accordion shape as /about (views/about/_faq.ejs), scoped to this page's own class names */
.jfaq { display: grid; gap: 10px; max-width: 80ch; }
.jfaq__item { padding: 0; background: #fff; }
.jfaq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 14px 20px; font: 700 1rem/1.35 var(--cc-font-display); color: var(--cc-navy); }
.jfaq__item summary::-webkit-details-marker { display: none; }
.jfaq__item summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cc-navy-50); color: var(--cc-navy); font: 700 1.1rem/1 var(--kds-font-sans); }
.jfaq__item summary:hover { color: var(--cc-red); }
.jfaq__item summary:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: -2px; border-radius: 16px; }
.jfaq__item[open] { border-color: var(--cc-line-strong); }
.jfaq__item[open] summary::after { content: "–"; background: var(--cc-navy); color: #fff; }
.jfaq__body { padding: 0 20px 16px; }
.jfaq__body p { margin: 0; max-width: 72ch; }

/* Related searches — sibling landings, one column on phones, up to four across on desktop */
.jrel { display: grid; gap: 24px; }
.jrel__group { min-width: 0; }
.jrel__title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--kds-border); }
.jrel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jrel__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--cc-navy); font-weight: 500; }
.jrel__link:hover { background: var(--cc-navy-50); color: var(--cc-red); }
.jrel__link:focus-visible { outline: 2px solid var(--kds-focus-ring); outline-offset: 2px; }
.jrel__n { flex: none; min-width: 28px; padding: 0 8px; border-radius: 999px; background: var(--cc-surface); border: 1px solid var(--kds-border); color: var(--kds-fg-muted); font-size: .8125rem; font-weight: 600; text-align: center; }
.jrel__cta { margin: 28px 0 0; }
@media (min-width: 640px) { .jrel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
@media (min-width: 1024px) { .jrel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media print { .jlanding { display: none !important; } }
/* Phone Map mode (?view=map): the map fills the viewport and the list is hidden — the landing copy would sit in a
   dead zone under a 100dvh map, so it goes with the list. The list view (and every crawler) still has it. */
@media (max-width: 767px) { .js .jsearch.is-map ~ .jlanding { display: none; } }

/* ==================================================================================================
   Candidate B — "the living board" (2026-10-16, redesign-b). A layer over the rules above: tokens from
   /css/b-foundation.css only. The page is light and quiet; the results are THE board (the one dark object).
   Red on this view, exactly three: the board's live pulse, the "New" marker on fresh rows, and the one
   primary action (the related-searches "Create a free job seeker profile"). Everything else is navy/ink.
   ================================================================================================= */

/* ---- head: white, a hairline, no band gradient ---- */
.jsearch-head.page-head { background: var(--b-bg); border-bottom: 0; padding-bottom: 8px; }
.jsearch-head h1 { font-size: var(--b-t-h1); letter-spacing: -.02em; line-height: 1.08; color: var(--b-ink); }
.jsearch-head .breadcrumb { font-size: var(--b-t-md); color: var(--b-ink-3); }
.jsearch__total { color: var(--b-ink-2); }
.jsearch__total strong { color: var(--b-navy); font-weight: 700; }
.jlanding__intro { color: var(--b-ink-2); max-width: 70ch; }

/* ---- the filter bar: hairline inputs, 44px targets, navy actions ---- */
.jsearch__top { border-bottom: var(--b-hair); padding-bottom: 16px; }
.jsearch__form .input { min-height: var(--b-tap); border: var(--b-hair-2); border-radius: var(--b-r-md); background: var(--b-bg); color: var(--b-ink); }
.jsearch__form .input:hover { border-color: var(--b-ink-3); }
.jsearch__form .input:focus { border-color: var(--b-navy); box-shadow: 0 0 0 3px var(--b-navy-50); }
.jsearch__form .kds-btn--ghost, .jsearch__map-toggle { border: var(--b-hair-2); border-radius: var(--b-r-md); color: var(--b-navy); background: var(--b-bg); min-height: var(--b-tap); }
.jsearch__form .kds-btn--ghost:hover, .jsearch__map-toggle:hover { border-color: var(--b-navy); background: var(--b-navy-50); }
.jsearch__form .kds-btn--brand { background: var(--b-navy); border-color: var(--b-navy); border-radius: var(--b-r-md); min-height: var(--b-tap); }
.jsearch__form .kds-btn--brand:hover { background: var(--b-navy-700); }
/* the active-filter count was a 4th red: it is a count, so it is navy and tabular */
.jsearch__count { background: var(--b-navy); font-variant-numeric: tabular-nums; }
.jsearch__more { border: var(--b-hair); border-radius: var(--b-r); }
.jsearch__more-foot { border-top: var(--b-hair); }
.jsearch__panel-head, .jsearch__panel-foot { border-color: var(--b-line); }
.jsearch__fieldset legend { color: var(--b-ink); font-size: var(--b-t-base); }
.jseg__opt span { border: var(--b-hair-2); border-radius: var(--b-r-md); font-size: var(--b-t-base); color: var(--b-ink-2); }
.jseg__opt input:checked + span { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }

/* ---- toolbar: chips are quiet ledger tags; hover is navy, never red ---- */
.jchip { background: var(--b-navy-50); color: var(--b-navy); border: 1px solid var(--cc-navy-100); font-size: var(--b-t-base); min-height: var(--b-tap); }
.jchip:hover { background: #fff; border-color: var(--b-navy); color: var(--b-navy); }
.jchip--clear { background: transparent; border: var(--b-hair-2); color: var(--b-ink-2); }
.jsearch__hint { color: var(--b-ink-3); font-size: var(--b-t-base); }
.jsearch__sort .small { color: var(--b-ink-3); }
.jview { border: var(--b-hair-2); border-radius: var(--b-r-md); }
.jview button { color: var(--b-ink-2); }
.jview button[aria-pressed="true"] { background: var(--b-navy); color: #fff; }
@media (min-width: 768px) { .jchip { min-height: 40px; } }

/* ---- THE board ---- */
.jsearch__list { display: block; gap: 0; }
.jsearch__board .b-board__bar { flex-wrap: wrap; row-gap: 6px; }
.jsearch__board .b-board__note { white-space: nowrap; }
/* A pin click highlights its row: on the board that is the row's own hover surface plus a lit leading edge. */
.b-board [data-job-row].is-active { background: var(--b-bd-2); border-color: var(--b-bd-line); box-shadow: none; }
.b-board [data-job-row].is-active::before { transform: scaleY(1); opacity: 1; background: #fff; }
.jsearch__audkey { margin-top: 18px; border-top: 0; padding-top: 0; }

/* empty: the board carries the way out */
.jsearch__board--empty .jsearch__empty { background: none; border: 0; padding: 40px 20px 44px; text-align: center; color: var(--b-bd-fg-2); }
.jsearch__board--empty .jsearch__empty h3 { color: var(--b-bd-fg); font-size: var(--b-t-h3); }
.jsearch__board--empty .jsearch__empty p { color: var(--b-bd-fg-2); }

/* ---- pagination: tabular numbers, navy current, hairline Prev/Next ---- */
.jpager__num { font-variant-numeric: tabular-nums; color: var(--b-ink-2); border-radius: var(--b-r-md); }
.jpager__num:hover { background: var(--b-navy-50); color: var(--b-navy); }
.jpager__num.is-current { background: var(--b-bd); color: var(--b-bd-fg); }
.jpager .kds-btn--ghost { border: var(--b-hair-2); border-radius: var(--b-r-md); color: var(--b-navy); background: #fff; min-height: var(--b-tap); }
.jpager .kds-btn--ghost:hover { border-color: var(--b-navy); background: var(--b-navy-50); }
.jpager__status { color: var(--b-ink-3); font-variant-numeric: tabular-nums; font-size: var(--b-t-md); }
.jpager__gap { color: var(--b-ink-3); }

/* ---- map pane: a hairline frame, not a card ---- */
.jsearch__canvas.cc-map { border: var(--b-hair); border-radius: var(--b-r); }
.jsearch__map-note { color: var(--b-ink-3); font-size: var(--b-t-md); }

/* ---- landing copy: FAQ as a ruled list, related searches as a ledger ---- */
.jlanding.section--alt { background: var(--b-bg); }
.jlanding { border-top: var(--b-hair); }
.jlanding .eyebrow { color: var(--b-ink-3); font-size: var(--b-t-xs); letter-spacing: var(--b-track-caps); font-weight: 600; }
.jlanding h2 { color: var(--b-ink); font-size: var(--b-t-h2); letter-spacing: -.015em; }
.jlanding .lead { color: var(--b-ink-2); font-size: var(--b-t-body); }
.jfaq { gap: 0; border-top: var(--b-hair); }
.jfaq__item { background: none; border: 0; border-bottom: var(--b-hair); border-radius: 0; box-shadow: none; }
.jfaq__item[open] { border-color: var(--b-line); }
.jfaq__item summary { padding: 14px 4px; font: 600 var(--b-t-body)/1.4 var(--b-sans); color: var(--b-ink); }
.jfaq__item summary:hover { color: var(--b-navy); }
.jfaq__item summary::after { width: 28px; height: 28px; background: none; border: var(--b-hair-2); color: var(--b-navy); }
.jfaq__item[open] summary::after { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }
.jfaq__item summary:focus-visible { border-radius: var(--b-r-sm); outline-offset: 2px; }
.jfaq__body { padding: 0 4px 18px; color: var(--b-ink-2); }

.jrel__title { font: 600 var(--b-t-xs)/1.3 var(--b-sans); letter-spacing: var(--b-track-caps); text-transform: uppercase; color: var(--b-ink-3); border-bottom: var(--b-hair); }
.jrel__list { gap: 0; }
.jrel__list li + li { border-top: var(--b-hair); }
.jrel__link { min-height: var(--b-tap); padding: 8px 4px; border-radius: 0; color: var(--b-ink); font-size: var(--b-t-ui); }
.jrel__link:hover { background: var(--b-bg-2); color: var(--b-navy); }
.jrel__n { background: none; border: 0; padding: 0; min-width: 0; color: var(--b-ink-3); font-size: var(--b-t-md); font-variant-numeric: tabular-nums; text-align: right; }
.jrel__cta .kds-btn--accent { min-height: var(--b-tap); border-radius: var(--b-r-md); }
/* Row meta at the wide (nowrap) breakpoint: a long company name squeezed the job-type bit until "Full-time" wrapped
   one word per line. The parts keep their width and the company (already ellipsised) is the one that gives. */
.jsearch__board .b-jobrow__meta > .b-bit { flex-shrink: 0; white-space: nowrap; }
.jsearch__board .b-jobrow__co { flex-shrink: 1; min-width: 0; }