/* ==================================================================================================
 * posting.css — Candidate B ("the living board") for the job posting page (views/public/job.ejs) and the
 * company page (views/public/company.ejs). Owner: FIND agent, 2026-10-16.
 *
 * SCREEN ONLY, ON PURPOSE. The posting's printout is the employer's proof of advertisement and is frozen
 * ("the Canada Careers printout page is perfect" — Ankit). It is computed from theme.css + public.css +
 * print.css. This file is linked with media="screen" AND every rule is inside @media screen, so the paper
 * render sees exactly the rules it saw before this file existed. Do not add a rule outside the block.
 *
 * Tokens come from /css/b-foundation.css. The posting's one dark object is the apply card — the posting's
 * own board: the action, the employer's email and the details table set like a departure board. On the
 * company page it is the list of open jobs. Red on the posting: the band's "Apply now" (≥1024) / the sticky
 * apply bar's (<1024) — never both on screen — and the "New" marker on related rows. Nothing else.
 * ================================================================================================= */
@media screen {

/* ---------------------------------------------------------------- shared head (posting + company) */
.job-head.page-head,
.co-head.page-head { background: var(--b-bg); border-bottom: var(--b-hair); }
.job-head .breadcrumb,
.co-head .breadcrumb { font-size: var(--b-t-md); color: var(--b-ink-3); }
.job-head h1,
.co-head h1 { font-size: var(--b-t-h1); line-height: 1.08; letter-spacing: -.02em; color: var(--b-ink); }
.job-head .page-head__actions .kds-btn,
.co-head .page-head__actions .kds-btn { min-height: var(--b-tap); border-radius: var(--b-r-md); }
.co-head .page-head__actions .kds-btn--ghost { border: var(--b-hair-2); background: #fff; color: var(--b-navy); }
.co-head .page-head__actions .kds-btn--ghost:hover { border-color: var(--b-navy); background: var(--b-navy-50); }

/* ---------------------------------------------------------------- posting: head */
.job-head__company { color: var(--b-ink-2); font-size: var(--b-t-lead); }
.job-head__company a { color: var(--b-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--b-line-2); }
.job-head__company a:hover { border-bottom-color: var(--b-navy); }
.job-head__dot { color: var(--b-ink-3); }
.job-head__more { color: var(--b-ink-3); }
.job-head__legal { color: var(--b-ink-3); }
/* the wage is the decision field: large, tabular, ink — the way the board sets it */
.job-head__salary { font-size: clamp(1.375rem, 3.2vw, 1.75rem); font-weight: 700; letter-spacing: -.012em; color: var(--b-ink); font-variant-numeric: tabular-nums; margin: 14px 0 10px; }
.job-head__salary--none { font-size: var(--b-t-body); font-weight: 500; color: var(--b-ink-3); }
/* key facts: a ledger line, not a row of pills */
/* Every item carries its dot in FRONT; the list is pulled left by one dot-width and clip-path cuts that strip, so the dot that would
   start a wrapped line is cut away — no orphaned "·" at a line start on a phone. */
.job-head__meta { gap: 4px 0; margin: 0 0 10px -13px; clip-path: inset(-4px -4px -4px 13px); }
.job-head__meta li { display: inline-flex; align-items: center; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--b-t-ui); font-weight: 500; color: var(--b-ink); }
.job-head__meta li::before { content: ""; display: inline-block; flex: none; width: 3px; height: 3px; border-radius: 50%; background: var(--b-ink-3); margin: 0 10px 0 0; }
.job-head__meta li { padding-left: 0; margin-right: 10px; }
.job-head__hours { background: none !important; }
.job-head__dates { color: var(--b-ink-3); font-variant-numeric: tabular-nums; font-size: var(--b-t-md); }
.job-head__dates strong { color: var(--b-ink); }
.job-head__aud { gap: 6px 8px; }
.job-head__aud .muted { color: var(--b-ink-3); }

/* ---------------------------------------------------------------- posting: main column */
.job-main { gap: 36px; }
.job-section h2 { font: 700 var(--b-t-h3)/1.3 var(--b-disp); color: var(--b-ink); letter-spacing: -.008em; padding-bottom: 10px; margin-bottom: 14px; border-bottom: var(--b-hair); }
/* §4: the job description keeps its visible emphasis — the heavier rule and the bigger step */
.job-section--lead > h2 { font-size: 1.3rem; border-bottom: 2px solid var(--b-navy); }
.job-main .prose { color: var(--b-ink); }
.locations__item { border-top: var(--b-hair); }
.locations__item svg { color: var(--b-navy); }
.locations__addr { color: var(--b-ink); }
.locations__map-link { min-height: var(--b-tap); border: var(--b-hair-2); border-radius: var(--b-r-md); background: #fff; color: var(--b-navy); }
.locations__map-link:hover { border-color: var(--b-navy); background: var(--b-navy-50); }
.locations__note { color: var(--b-ink-3); }
/* the map is a hairline frame, not a card around a card */
.job-main .map-block.card { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.job-main .map-block.card .cc-map { border: var(--b-hair); border-radius: var(--b-r); }
.map-block__note { color: var(--b-ink-3); }
.job-main .tag { background: #fff; border: var(--b-hair-2); border-radius: var(--b-r-sm); color: var(--b-ink-2); padding: 6px 10px; }
.job-main .job-about-co.card { background: none; border: 0; border-top: var(--b-hair); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
.job-about-co h2 { border: 0; padding: 0; }
.job-about-co__meta { color: var(--b-ink-3); }
.job-about-co a { color: var(--b-navy); font-weight: 600; }
.contact-list dt { color: var(--b-ink-3); }
.contact-list dd { color: var(--b-ink); }

/* ---------------------------------------------------------------- posting: the apply card IS the board */
.job-side .apply-card {
  background: var(--b-bd); color: var(--b-bd-fg);
  border: 1px solid rgba(14,29,49,.9); border-radius: var(--b-r);
  box-shadow: var(--b-shadow);
  padding: 20px; gap: 12px;
}
.apply-card :focus-visible { outline: var(--b-ring-on); outline-offset: 2px; }
/* the card's own Apply is NOT red (the band/applybar carries the one red): inverse — white on the board */
.apply-card .apply-card__primary { min-height: 48px; border-radius: var(--b-r-md); background: #fff; border-color: #fff; color: var(--b-navy); font-weight: 700; }
.apply-card .apply-card__primary:hover { background: var(--b-navy-50); border-color: var(--b-navy-50); color: var(--b-navy-700); }
.apply-card__email { padding: 2px 0 4px; }
.apply-card__email-label.small.muted { color: var(--b-bd-fg-3); }
.apply-card__email a { color: var(--b-bd-fg); text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.apply-card__email a:hover { color: #fff; text-decoration-color: #fff; }
.apply-card .kds-btn--ghost { min-height: var(--b-tap); border-radius: var(--b-r-md); background: transparent; border: 1px solid var(--b-bd-line-2); color: var(--b-bd-fg); }
.apply-card .kds-btn--ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.4); color: #fff; }
.apply-card__closed { background: rgba(255,255,255,.05); border: 1px solid var(--b-bd-line-2); color: var(--b-bd-fg); border-radius: var(--b-r-md); }
.apply-card__closed .small { color: var(--b-bd-fg-2); opacity: 1; }
.apply-card .apply-card__note,
.apply-card .muted { color: var(--b-bd-fg-3); }
.apply-card__note strong { color: var(--b-bd-fg); }
.apply-card__note a { color: var(--b-bd-fg-2); text-underline-offset: 3px; }
.apply-card__note a:hover { color: #fff; }
/* the details table, set like the board: muted labels, bright values, hairlines between rows, tabular */
.apply-card .facts { gap: 0; padding-top: 4px; border-top: 1px solid var(--b-bd-line-2); }
.apply-card .facts > div { padding: 9px 0; border-bottom: 1px solid var(--b-bd-line); font-size: var(--b-t-base); grid-template-columns: 116px 1fr; }
.apply-card .facts > div:last-child { border-bottom: 0; }
.apply-card .facts dt { color: var(--b-bd-fg-3); font-weight: 500; }
.apply-card .facts dd { color: var(--b-bd-fg); font-variant-numeric: tabular-nums; }
.apply-card .facts dd a { color: var(--b-bd-fg); text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.apply-card .facts dd a:hover { color: #fff; text-decoration-color: #fff; }
.apply-card .facts__pid { color: #fff; font-size: var(--b-t-body); }
.apply-card .share { border-top: 1px solid var(--b-bd-line-2); }
.apply-card .share .muted { color: var(--b-bd-fg-3); }
.apply-card .share__btn { background: transparent; border: 1px solid var(--b-bd-line-2); color: var(--b-bd-fg); border-radius: var(--b-r-md); }
.apply-card .share__btn:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.07); color: #fff; }
.apply-card .share__status { color: #A8DB8A; }

/* ---------------------------------------------------------------- posting: sticky apply bar (<1024) */
.applybar { background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-top: var(--b-hair); box-shadow: none; }
.applybar__text strong { color: var(--b-ink); font-variant-numeric: tabular-nums; }
.applybar .kds-btn { min-height: var(--b-tap); border-radius: var(--b-r-md); }
.applybar__save.kds-btn--ghost { border: var(--b-hair-2); background: #fff; color: var(--b-navy); }

/* ---------------------------------------------------------------- posting: related rows */
.related.section--alt { background: var(--b-bg); border-top: var(--b-hair); }
.related h2 { font-size: var(--b-t-h2); letter-spacing: -.015em; color: var(--b-ink); }
.related .section__head--split a { color: var(--b-navy); font-weight: 600; text-decoration: none; }
.related .section__head--split a:hover { text-decoration: underline; }
.jb-audkey { margin-top: 24px; border-top: 0; padding-top: 0; }
.co-stack > .card:first-child { border-top: 0; padding-top: 0; }
.jb-rows { display: block; border: var(--b-hair); border-radius: var(--b-r); overflow: hidden; background: #fff; }

/* ---------------------------------------------------------------- company */
.co-logo { border-radius: var(--b-r-md); }
.co-logo--mark { background: var(--b-bd); font-family: var(--b-disp); }
.co-logo--img { border: var(--b-hair); }
.co-head__legal { color: var(--b-ink-3); }
.co-head__meta { color: var(--b-ink-2); font-size: var(--b-t-lead); }
.co-head__summary { color: var(--b-ink-3); font-variant-numeric: tabular-nums; }
/* about + locations: ruled sections, not boxes */
.co-stack > .card { background: none; border: 0; border-top: var(--b-hair); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
.co-about h2, .co-map h2, .co-jobs h2 { font: 700 var(--b-t-h3)/1.3 var(--b-disp); color: var(--b-ink); }
.co-about .facts { border-top: var(--b-hair); }
.co-about .facts dt { color: var(--b-ink-3); }
.co-about .facts dd { color: var(--b-ink); }
.co-map .cc-map { border: var(--b-hair); border-radius: var(--b-r); }
.co-locations li { padding: 8px 0; border-top: var(--b-hair); gap: 4px 12px; }
.co-locations li:first-child { border-top: 0; }
.co-locations a { color: var(--b-navy); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.co-jobs .section__head { margin-bottom: 14px; }
.co-board .jobs-stack { display: block; gap: 0; }
.co-audkey { margin-top: 18px; border-top: 0; padding-top: 0; }
.co-jobs .empty { border: var(--b-hair); border-radius: var(--b-r); background: var(--b-bg-2); padding: 32px 20px; }
.co-jobs .empty .kds-btn--ghost { min-height: var(--b-tap); border: var(--b-hair-2); border-radius: var(--b-r-md); background: #fff; color: var(--b-navy); }

/* row meta in a wide row: the company gives, the other parts keep their width (no one-word-per-line "Full-time") */
.co-board .b-jobrow__meta > .b-bit,
.jb-rows .b-jobrow__meta > .b-bit { flex-shrink: 0; white-space: nowrap; }
.co-board .b-jobrow__co,
.jb-rows .b-jobrow__co { flex-shrink: 1; min-width: 0; }

} /* @media screen */