/* =============================================================================
   Youth Careers Canada — /jobs (search + listings).
   Owned by the job-search agent. Loaded last, after ycc.css.

   A serious search tool, read against Workopolis / Glassdoor / Indeed: calm,
   dense, professional. Specifically:
     · the masthead is a COMPACT navy strip — title, What/Where bar, stage tabs.
       Not a hero. The results begin immediately below it.
     · the only counts are functional ones ("Showing 1–9 of 9 jobs") sitting with
       the thing they describe. No headline statistic boasting about site size.
     · a sticky filter rail beside a dense, divided results list
     · the map is a sized, captioned panel below the results, not a hero canvas

   LIGHT THEME ONLY. The site is pinned to data-kds-theme="light" and the brand
   file ships no dark ramp (see tokens/brands/youth-careers.css). There are no
   theme rules in this file and none may be added.

   Tuned for the `verandah` philosophy (public surfaces): its --kds-sp-unit is
   0.3rem, so every --kds-sp-* step is 20% larger than the base scale, and its
   display scale is smaller than marquee's. Section rhythm and type sizes here
   are set against that. Never set --kds-text-display / --kds-tracking-tight /
   --kds-measure / --kds-control-h — that would flatten the preset.

   Tokens only. No gradients, no glows, no decorative backgrounds. Radius comes
   from the local --yjs-r-* block below: 14px cards, 10px fields, 20px for large
   media, pills for real chips only.
   ============================================================================= */

/* Local semantic tokens: the handful of values with no KDS equivalent. Every
   colour is derived from a brand token with color-mix, never a raw hex. */
.yjs {
  --yjs-on-navy:        var(--ycc-ivory);
  --yjs-on-navy-muted:  color-mix(in srgb, var(--ycc-ivory) 72%, var(--ycc-navy));   /* 7:1 on navy */
  --yjs-on-navy-line:   color-mix(in srgb, var(--ycc-ivory) 22%, var(--ycc-navy));
  --yjs-danger-fg:      var(--ycc-ivory);
  --yjs-bar-bg:         var(--kds-surface);   /* the What/Where bar must lift off the navy block */
  --yjs-rail-w:         252px;
  --yjs-sticky-top:     84px;
  --yjs-tap:            44px;   /* the one touch-target floor on this page */

  /* SHAPE (2026-09-28). The house geometry moved from 12/8 to 14 cards / 10 fields,
     plus a 20px step for photographs, maps and large colour blocks, so this page
     matches the homepage. Set locally, not on :root — the brand token file is
     orchestrator-owned and still ships 12/8 for everything else.
     Still nowhere near the pill-shaped look the contract bans; --kds-radius-full
     remains reserved for genuine chips. */
  --yjs-r-card:         14px;
  --yjs-r-field:        10px;
  --yjs-r-block:        20px;

  /* The result surface. White on the ivory ground with a navy-derived hairline —
     no raw colour, and it holds up at arm's length where --kds-border (#E2DACE on
     #FAF7F2) does not. */
  --yjs-card-line:      color-mix(in srgb, var(--ycc-navy) 16%, transparent);
}

/* No entrance animation on the results.
   The rows used to fade in with a CSS stagger (`animation: … both`, so they
   START at opacity 0). Two things were wrong with that. It is decoration on the
   one thing the page exists to show, which the client read as showy rather than
   professional; and a headless/slow first paint could capture the list with the
   later rows still invisible — it did, reproducibly, rows 6-9 of 9 blank. The
   results are now plain, always-painted markup with no opacity dependency at
   all, JavaScript or otherwise. Do not reintroduce a reveal here. */

/* Motion budget: 150ms hover, 160ms press (scale .985), ease-out, no bounce.
   Every transform on this page is off under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ybar__near:active, .ybar__go:active, .ytools__filters:active { transform: none; }
}

/* =============================================================================
   1. Masthead — a compact navy strip, not a hero
   ========================================================================== */
.yjs-mast {
  background: var(--ycc-navy);
  color: var(--yjs-on-navy);
  padding-block: var(--kds-sp-4) var(--kds-sp-4);
  border-bottom: 2px solid var(--ycc-orange);
}

/* One quiet line. The heading is real (it names the current filter set and
   carries the page for search engines) but it is a label, not a headline —
   roughly the size of a job title in the list below it. */
.yjs-mast__title {
  margin: 0 0 var(--kds-sp-3);
  font-family: var(--kds-font-display);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--yjs-on-navy);
  text-wrap: balance;
}

/* ---- the What / Where bar --------------------------------------------- */
.ybar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 1px;
  padding: var(--kds-sp-1);
  background: var(--yjs-bar-bg);
  border-radius: var(--yjs-r-card);
}
.ybar__field {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
  padding: var(--kds-sp-2) var(--kds-sp-3);
  background: var(--yjs-bar-bg);
  border-radius: var(--yjs-r-field);
}
.ybar__field + .ybar__field { box-shadow: -1px 0 0 var(--kds-border); }
.ybar__field--where { padding-right: var(--kds-sp-2); }
.ybar__label {
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--kds-fg-faint);
}
.ybar__input {
  width: 100%; min-width: 0;
  padding: 0; margin-top: 1px;
  border: 0; background: transparent;
  color: var(--kds-fg);
  font-family: var(--kds-font-sans);
  font-size: var(--kds-text-sm); font-weight: 500;
  line-height: 1.6;
}
.ybar__input::placeholder { color: var(--kds-fg-faint); font-weight: 400; }
.ybar__input:focus { outline: none; }
.ybar__field:focus-within { box-shadow: inset 0 0 0 2px var(--ycc-orange); }
.ybar__field--where:focus-within { box-shadow: inset 0 0 0 2px var(--ycc-orange); }

.ybar__field--where { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--kds-sp-2); }
.ybar__field--where .ybar__label { grid-column: 1; }
.ybar__field--where .ybar__input { grid-column: 1; grid-row: 2; }
.ybar__near {
  grid-column: 2; grid-row: 1 / span 2;
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  height: 34px; padding-inline: var(--kds-sp-3);
  border: 1px solid var(--kds-border); border-radius: var(--yjs-r-field);
  background: var(--kds-surface-3); color: var(--kds-fg);
  font-size: var(--kds-text-xs); font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ybar__near:hover { background: var(--kds-surface-3); border-color: var(--kds-border-strong); }
.ybar__near:active { transform: scale(0.985); transition-duration: 160ms; }
.ybar__near[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

.ybar__go {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 6.5rem; padding-inline: var(--kds-sp-5);
  border: 0; border-radius: var(--yjs-r-field);
  background: var(--ycc-orange); color: var(--ycc-navy);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-sm); font-weight: 700; letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ybar__go:hover { background: var(--ycc-yellow); }
.ybar__go:active { transform: scale(0.985); transition-duration: 160ms; }

.ybar__status {
  grid-column: 1 / -1;
  margin: 0; padding: 0 var(--kds-sp-3) var(--kds-sp-2);
  font-size: var(--kds-text-xs); color: var(--kds-fg-muted);
}
.ybar__status:empty { display: none; }
.ybar__status .is-error { color: var(--kds-danger); font-weight: 600; }

/* ---- career-stage tabs — the youth spine ------------------------------- */
.ystages {
  display: flex; flex-wrap: wrap; gap: var(--kds-sp-2);
  margin-top: var(--kds-sp-3);
  /* Keyboard: the tabs are real links, so Tab reaches them and the browser scrolls
     them into view. scroll-padding keeps a focused tab clear of the faded edge. */
  scroll-padding-inline: var(--ycc-gutter);
}
.ystage {
  scroll-margin-inline: var(--ycc-gutter);
  display: inline-flex; align-items: center; min-height: 36px;
  padding-inline: var(--kds-sp-3);
  border: 1px solid var(--yjs-on-navy-line);
  border-radius: var(--yjs-r-field);
  background: transparent;
  color: var(--yjs-on-navy);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xs); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              border-color var(--kds-dur-fast) var(--kds-ease-standard),
              transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ystage:hover { background: var(--ycc-navy-soft); border-color: var(--kds-border-strong); transform: translateY(-1px); }
.ystage:active { transform: scale(0.985); transition-duration: 160ms; }
.ystage.is-on {
  background: var(--ycc-orange);
  border-color: var(--ycc-orange);
  color: var(--ycc-navy);
  font-weight: 700;
}
.ystage.is-on:hover { background: var(--ycc-yellow); border-color: var(--ycc-yellow); }
@media (prefers-reduced-motion: reduce) { .ystage:hover, .ystage:active { transform: none; } }

/* =============================================================================
   2. Results shell
   ========================================================================== */
/* Results start immediately: a single small step down from the masthead. */
.yjs-body { padding-block: var(--kds-sp-4) clamp(1.5rem, 3vw, 2.25rem); }

.yjs-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 1040px) {
  .yjs-grid { grid-template-columns: var(--yjs-rail-w) minmax(0, 1fr); align-items: start; }
}
.yjs-main { min-width: 0; }

/* ---- active filter chips ------------------------------------------------ */
.ychips {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--kds-sp-2);
  margin: 0 0 var(--kds-sp-4); padding: 0;
}
.ychip {
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  min-height: 32px; padding: 0 var(--kds-sp-2) 0 var(--kds-sp-3);
  border: 1px solid var(--kds-border-strong); border-radius: var(--kds-radius-full);
  background: var(--kds-surface);
  color: var(--kds-fg); text-decoration: none;
  font-size: var(--kds-text-xs); font-weight: 600;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.ychip:hover { background: var(--kds-surface-3); border-color: var(--kds-fg); }
.ychip__x {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--kds-radius-full);
  background: var(--kds-surface-3); color: var(--kds-fg-muted);
  font-size: var(--kds-text-sm); line-height: 1;
}
.ychip:hover .ychip__x { background: var(--ycc-orange); color: var(--ycc-navy); }
.ychip--clear {
  padding-inline: var(--kds-sp-3);
  border-style: dashed; color: var(--kds-fg-muted); font-weight: 700;
}

/* =============================================================================
   3. Filter rail  (desktop: sticky column · phone: full-screen drawer)
   ========================================================================== */
.yrail {
  background: var(--kds-surface);
  border: 1px solid var(--kds-border);
  border-radius: var(--yjs-r-card);
}
@media (min-width: 1040px) {
  .yrail {
    position: sticky; top: var(--yjs-sticky-top);
    max-height: calc(100vh - var(--yjs-sticky-top) - 1.5rem);
    display: flex; flex-direction: column;
  }
  .yrail__body { overflow-y: auto; }
}

.yrail__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kds-sp-3);
  padding: var(--kds-sp-3) var(--kds-sp-4);
  border-bottom: 1px solid var(--kds-border);
}
.yrail__h {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-sm); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--kds-fg);
}
.yrail__close {
  display: none; width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--kds-border); border-radius: var(--yjs-r-field);
  background: transparent; color: var(--kds-fg); cursor: pointer;
}

.yrail__body { padding: var(--kds-sp-1) var(--kds-sp-4) var(--kds-sp-4); }

/* A <fieldset> renders its legend inside the border box, which eats any padding-top and
   collapses the rhythm. So the spacing and the hairline live on a plain wrapper div and the
   fieldset itself is fully reset — the legend stays for screen readers. */
.yrail__group { padding-top: var(--kds-sp-4); }
.yrail__group + .yrail__group { margin-top: var(--kds-sp-4); border-top: 1px solid var(--kds-border); }
.yrail__fs { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.yrail__group--pair { display: grid; gap: var(--kds-sp-3); }
.yrail__legend {
  display: block; width: 100%;
  padding: 0; margin: 0 0 var(--kds-sp-2);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kds-fg-muted);
}
.yrail__group--pair .yrail__legend { margin-bottom: var(--kds-sp-1); }
.yrail__hint { margin: var(--kds-sp-2) 0 0; font-size: var(--kds-text-xs); color: var(--kds-fg-faint); }

/* Secondary filters fold away so the rail fits a laptop viewport. <details> keeps this
   keyboard-operable and needs no JS; a group whose filter is active renders open. */
.yrail__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kds-sp-2);
  min-height: 28px; margin: 0; cursor: pointer;
  list-style: none;
}
.yrail__summary::-webkit-details-marker { display: none; }
.yrail__summary::after {
  content: ""; flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.yrail__more[open] > .yrail__summary { margin-bottom: var(--kds-sp-3); }
.yrail__more[open] > .yrail__summary::after { transform: translateY(1px) rotate(-135deg); }
.yrail__summary:hover { color: var(--kds-fg); }

/* fields */
.yfield {
  width: 100%; min-height: 38px;
  padding: var(--kds-sp-1) var(--kds-sp-3);
  border: 1px solid var(--kds-border-strong);
  border-radius: var(--yjs-r-field);
  background: var(--kds-surface);
  color: var(--kds-fg);
  font-family: var(--kds-font-sans); font-size: var(--kds-text-sm);
}
.yfield:hover { border-color: var(--kds-fg-muted); }
.yfield--sm { min-height: 36px; width: auto; font-size: var(--kds-text-xs); }

/* radio / checkbox lists */
.yrail__checks { display: grid; gap: 2px; }
.ychk {
  display: flex; align-items: center; gap: var(--kds-sp-2);
  min-height: 32px; padding: 0 var(--kds-sp-2);
  margin-inline: calc(var(--kds-sp-2) * -1);
  border-radius: var(--yjs-r-field);
  font-size: var(--kds-text-sm); color: var(--kds-fg);
  cursor: pointer;
}
.ychk:hover { background: var(--kds-surface-3); }
.ychk input { width: 17px; height: 17px; flex: none; accent-color: var(--ycc-orange); margin: 0; }
.ychk input:checked + span { font-weight: 700; }

/* segmented control */
.yseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kds-sp-1); }
.yseg__opt { position: relative; }
.yseg__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.yseg__opt span {
  display: flex; align-items: center; justify-content: center; min-height: 34px;
  padding-inline: var(--kds-sp-3);
  border: 1px solid var(--kds-border-strong); border-radius: var(--yjs-r-field);
  font-size: var(--kds-text-xs); font-weight: 600; color: var(--kds-fg);
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.yseg__opt:hover span { background: var(--kds-surface-3); }
.yseg__opt input:checked + span {
  background: var(--kds-inverse); border-color: var(--kds-inverse);
  color: var(--kds-inverse-fg); font-weight: 700;
}
.yseg__opt input:focus-visible + span { outline: 3px solid var(--kds-focus-ring); outline-offset: 2px; }

.yrail__foot {
  display: flex; align-items: center; gap: var(--kds-sp-3);
  padding: var(--kds-sp-3) var(--kds-sp-4);
  border-top: 1px solid var(--kds-border);
  background: var(--kds-surface-2);
  border-radius: 0 0 var(--yjs-r-card) var(--yjs-r-card);
}
.yrail__reset {
  border: 0; background: transparent; padding: var(--kds-sp-2);
  color: var(--kds-fg-muted); font-size: var(--kds-text-sm); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.yrail__reset:hover { color: var(--kds-fg); }
.yrail__apply { margin-inline-start: auto; font-weight: 700; }
/* Reset is a data-drawer-reset <button type="button">: inert without script, at any
   width. A dead control is worse than no control — "Show N results" still submits,
   and /jobs with no query string is the real "clear everything". */
html:not(.js) .yrail__reset { display: none; }

/* ---- phone / tablet: the rail becomes a sheet --------------------------
   EVERY sheet rule is behind `html.js`. jobs.ejs sets that class inline before
   first paint, so there is no flash — but if the script never runs, or fails, the
   rail stays a plain block in the page flow with all of its fields and its own
   submit button. The filters are then still usable with the keyboard and still
   submit the same GET form. Filtering must never be something only JavaScript can
   reach; that has bitten this project before. The "Filters" button is the part
   that genuinely needs script, so that is what gets hidden without it. */
@media (max-width: 1039px) {
  html:not(.js) .ytools__filters { display: none; }
  html:not(.js) .yrail__close { display: none; }
  html:not(.js) .yrail { margin-bottom: var(--kds-sp-5); }
  html:not(.js) .yrail__apply { margin-inline-start: 0; }

  /* `visibility` is a STATE here, not something to animate. It used to be in the
     transition list, and a transitioning visibility is still computed `hidden` at
     the instant the class lands — so openSheet()'s `.focus()` was a silent no-op and
     the sheet opened with focus left on <body>: the trap had nothing to trap and Tab
     walked the page behind it. It now flips with no duration on open, and is delayed
     by the fade's own length on close so the sheet does not vanish mid-fade. */
  html.js .yrail {
    position: fixed; inset: 0; z-index: 160;
    display: flex; flex-direction: column;
    border: 0; border-radius: 0;
    visibility: hidden; opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity var(--kds-dur-base) var(--kds-ease-standard),
                transform var(--kds-dur-base) var(--kds-ease-standard),
                visibility 0s linear var(--kds-dur-base);
  }
  html.js .yrail.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--kds-dur-base) var(--kds-ease-standard),
                transform var(--kds-dur-base) var(--kds-ease-standard),
                visibility 0s linear 0s;
  }
  .yrail__body { overscroll-behavior: contain; }
  .yrail__head { padding-inline: var(--ycc-gutter); }
  html.js .yrail__close { display: grid; }
  .yrail__body { flex: 1; overflow-y: auto; padding-inline: var(--ycc-gutter); }
  .yrail__foot { padding-inline: var(--ycc-gutter); border-radius: 0; }
  .yrail__h { font-size: var(--kds-text-md); letter-spacing: 0; text-transform: none; }

  /* One-handed: the two things you actually press sit in the footer, at the bottom
     of the screen, clear of the home indicator. "Show N results" is the primary and
     takes the width it needs; Reset stays a quiet, but still 44px, text button. */
  .yrail__foot {
    gap: var(--kds-sp-2);
    padding-block: var(--kds-sp-3);
    padding-bottom: calc(var(--kds-sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .yrail__reset { min-height: var(--yjs-tap); padding-inline: var(--kds-sp-2); flex: none; }
  .yrail__apply { min-height: var(--yjs-tap); flex: 1; max-width: 18rem; }
  .yrail__close { width: var(--yjs-tap); height: var(--yjs-tap); }
  .yrail__body { padding-bottom: var(--kds-sp-6); }

  /* Finger-sized rows inside the sheet. */
  .ychk { min-height: var(--yjs-tap); padding-inline: var(--kds-sp-3); }
  .ychk input { width: 20px; height: 20px; }
  .yseg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kds-sp-2); }
  .yseg__opt span { min-height: var(--yjs-tap); font-size: var(--kds-text-sm); }
  .yrail__summary { min-height: var(--yjs-tap); }
  .yfield { min-height: var(--yjs-tap); font-size: var(--kds-text-md); }
  .yrail__legend { font-size: var(--kds-text-sm); }
  .yrail__hint { font-size: 0.8125rem; }
}
/* Must name the same `html.js .yrail` selectors the sheet uses. A bare `.yrail`
   here is (0,1,0) and silently loses to `html.js .yrail` (0,2,1), so scoping the
   sheet to html.js had quietly taken reduced-motion out of the equation. */
@media (prefers-reduced-motion: reduce) {
  .yrail, html.js .yrail, html.js .yrail.is-open { transition: none; }
}
html.jsearch-lock, html.jsearch-lock body { overflow: hidden; }

/* =============================================================================
   4. Toolbar above the results
   ========================================================================== */
.ytools {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--kds-sp-3);
  padding-bottom: var(--kds-sp-2);
  /* A single hairline in ink is the results rule: it is also the top edge of
     the list (.yjs-list has border-top: 0). 2px read as a shout. */
  border-bottom: 1px solid var(--kds-fg);
}
.ytools__count { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.ytools__count strong { color: var(--kds-fg); font-weight: 700; }
.ytools__right { display: flex; align-items: center; gap: var(--kds-sp-3); }
.ytools__sort { display: inline-flex; align-items: center; gap: var(--kds-sp-2); }
.ytools__sort > span { font-size: var(--kds-text-xs); font-weight: 600; color: var(--kds-fg-muted); }

.ytools__filters {
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  min-height: 44px; padding-inline: var(--kds-sp-4);
  border: 1px solid var(--kds-fg); border-radius: var(--yjs-r-field);
  background: var(--kds-surface); color: var(--kds-fg);
  font-size: var(--kds-text-sm); font-weight: 700; cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              transform var(--kds-dur-fast) var(--kds-ease-standard);
}
.ytools__filters:hover { background: var(--kds-surface-3); }
.ytools__filters:active { transform: scale(0.985); transition-duration: 160ms; }
.ytools__badge {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: var(--kds-radius-full);
  background: var(--ycc-orange); color: var(--ycc-navy);
  font-size: var(--kds-text-xs); font-weight: 800;
}
/* [hidden] must still win over the display above (UA display:none is less specific). */
.ytools__badge[hidden] { display: none; }
@media (min-width: 1040px) { .ytools__filters { display: none; } }

/* =============================================================================
   5. The results list — a divided editorial index
   ========================================================================== */
.yjs-list {
  border: 1px solid var(--kds-border);
  border-top: 0;
  border-radius: 0 0 var(--yjs-r-card) var(--yjs-r-card);
  background: var(--kds-surface);
  overflow: hidden;
}

.yjob {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(0.9rem, 1.6vw, 1.25rem);
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.yjob + .yjob { border-top: 1px solid var(--kds-border); }
.yjob:hover, .yjob.is-active { background: var(--kds-surface-3); }
.yjob.is-active { box-shadow: inset 3px 0 0 var(--ycc-orange); }
/* A closed row used to be the whole row at opacity .78. That is fine as a signal and
   wrong as type: .yjob__facts is --kds-fg-faint, which is 4.83:1 on white, and any
   row-level alpha drops it to about 3.3:1 — under the 4.5:1 gate, and more obvious
   now each row sits on its own white card. The signal moves to the ink instead: the
   title and pay step back to --kds-fg-muted (6.8:1), and the red "Applications
   closed" chip, which is the actual statement, stays at full strength. */
.yjob.is-closed .yjob__link,
.yjob.is-closed .yjob__pay { color: var(--kds-fg-muted); }
.yjob__main { min-width: 0; }

.yjob__title {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
  font-weight: 700; line-height: 1.25; letter-spacing: -0.012em;
}
.yjob__link {
  color: var(--kds-fg); text-decoration: none;
}
.yjob__link::after { content: ""; position: absolute; inset: 0; }
.yjob:hover .yjob__link { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 2px; }

.yjob__org {
  margin: var(--kds-sp-1) 0 0;
  font-size: var(--kds-text-sm); color: var(--kds-fg-muted);
  line-height: 1.5;
}
.yjob__org > span + span::before { content: "·"; margin-inline: 0.45em; color: var(--kds-fg-faint); }
.yjob__co { color: var(--kds-fg); font-weight: 600; }
.yjob__extra, .yjob__dist { color: var(--kds-fg-faint); }

.yjob__signals {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--kds-sp-1);
  margin: var(--kds-sp-2) 0 0; padding: 0;
}
.ysig {
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.45rem;
  border: 1px solid transparent; border-radius: var(--kds-radius-sm);
  font-size: var(--kds-text-xs); font-weight: 700; line-height: 1.45;
  letter-spacing: 0.01em; white-space: nowrap;
}
.ysig--key    { background: var(--ycc-orange); color: var(--ycc-navy); }
.ysig--train  { background: var(--kds-inverse); color: var(--kds-inverse-fg); }
.ysig--new    { background: var(--ycc-yellow); color: var(--ycc-navy); }
.ysig--line   { border-color: var(--kds-border-strong); color: var(--kds-fg-muted); font-weight: 600; }
.ysig--soon   { border-color: var(--kds-danger); color: var(--kds-danger); }
.ysig--closed { background: var(--kds-danger); color: var(--yjs-danger-fg); }
.ysig--quiet  { border-color: var(--kds-border); color: var(--kds-fg-faint); font-weight: 600; }

.yjob__facts {
  margin: var(--kds-sp-2) 0 0;
  font-size: var(--kds-text-xs); color: var(--kds-fg-faint);
  line-height: 1.5;
}
.yjob__facts > span + span::before { content: "·"; margin-inline: 0.45em; }

.yjob__aside {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; text-align: right; white-space: nowrap;
}
.yjob__pay {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-md); font-weight: 700; letter-spacing: -0.012em;
  color: var(--kds-fg);
}
.yjob__when { display: grid; gap: 2px; margin: var(--kds-sp-1) 0 0; justify-items: end; }
.yjob__posted { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }
.yjob__pid { font-size: var(--kds-text-xs); color: var(--kds-fg-faint); letter-spacing: 0.04em; }
.yjob__cta {
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  margin-top: auto; padding-top: var(--kds-sp-2);
  font-size: var(--kds-text-xs); font-weight: 700; color: var(--kds-fg);
}
.yjob__cta svg { transition: transform var(--kds-dur-fast) var(--kds-ease-standard); }
.yjob:hover .yjob__cta svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .yjob:hover .yjob__cta svg { transform: none; } }

/* ---- the row on a phone -------------------------------------------------
   At 390px the desktop split (everything on the left, pay/date/ID stacked on the
   right) collapsed into a wall: a four-line grey meta paragraph, then pay, date,
   ID and "View job" across three more lines. Nothing led.

   So the row is re-ordered into one scan column with a fixed reading order:
       title → employer + place → PAY → youth signals → the quiet facts → footer.
   `display: contents` dissolves .yjob__main / .yjob__aside so all seven pieces
   become grid items of .yjob itself and `order` can lift the pay out of the aside
   without duplicating it in the markup. Where display:contents is unsupported the
   two blocks simply stack as they did before — the content is never hidden or
   moved by script, and nothing here starts at opacity 0.

   NOTE for future edits: .yjob keeps `position: relative` because .yjob__link::after
   is the full-row hit area. Do not add a positioned compound rule that also matches
   .yjob itself, or the overlay escapes the row (this is the bug that put the job
   map over the masthead on the detail page). */
@media (max-width: 719px) {
  /* THE LIST BECOMES CARDS.
     Divided rows are a desktop idiom: they rely on a hairline doing the separating,
     and #E2DACE on #FAF7F2 has almost no contrast at arm's length, so at 390px the
     results read as one unbroken block of text. Each result now gets its own white
     surface, a navy-derived border you can actually see, 14px corners and a real
     gap. The ivory page ground does most of the separating; the border finishes it. */
  .yjs-list {
    display: grid; gap: var(--kds-sp-3);
    border: 0; border-radius: 0; background: transparent; overflow: visible;
  }
  .yjob {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--kds-sp-3); row-gap: 0;
    padding: var(--kds-sp-3) var(--kds-sp-4);
    background: var(--kds-surface);
    border: 1px solid var(--yjs-card-line);
    border-radius: var(--yjs-r-card);
  }
  /* `.yjob + .yjob` (0,2,0) sets the divider hairline and outranks `.yjob` (0,1,0) —
     the same specificity trap that let `.jmap.cc-map` beat `.jmap` on the job page.
     Restate it here or every card but the first keeps a pale top edge. */
  .yjob + .yjob { border-top: 1px solid var(--yjs-card-line); }
  .yjob:hover, .yjob.is-active { background: var(--kds-surface); }
  .yjob.is-active { border-color: var(--ycc-orange); box-shadow: inset 3px 0 0 var(--ycc-orange); }

  /* display:contents removes the BOX, not the inheritance: the aside's
     `text-align: right` and `white-space: nowrap` still flow down to the pay and the
     dates, which left the pay floating against the right edge with nothing beside it. */
  .yjob__main, .yjob__aside { display: contents; }
  .yjob__aside { text-align: left; white-space: normal; }

  /* Pay and the row action share a line: it pairs the number with the next step and
     it is the one place the "View job" affordance costs no extra height. */
  .yjob__title    { order: 1; grid-column: 1 / -1; font-size: 1.0625rem; }
  .yjob__org      { order: 2; grid-column: 1 / -1; margin-top: var(--kds-sp-1); }
  .yjob__pay      { order: 3; grid-column: 1; margin-top: var(--kds-sp-2); font-size: var(--kds-text-lg); }
  .yjob__cta      { order: 4; grid-column: 2; }
  .yjob__signals  { order: 5; grid-column: 1 / -1; margin-top: var(--kds-sp-2); }
  .yjob__facts    { order: 6; grid-column: 1 / -1; margin-top: var(--kds-sp-2); font-size: var(--kds-text-sm); }
  .yjob__when     { order: 7; grid-column: 1 / -1; }

  /* Browse detail, not scan detail. Every one of these is shown in full on the job
     page, and dropping them takes the meta line from four lines to two. */
  .yjob__f--minor { display: none; }

  .yjob__when {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0 var(--kds-sp-3);
    margin: var(--kds-sp-2) 0 0; padding-top: var(--kds-sp-2);
    border-top: 1px solid var(--kds-border);
  }
  /* 13px, not 12: this is the last readable line of the row, not a micro-label. */
  .yjob__posted, .yjob__pid { font-size: 0.8125rem; }
  /* The youth signals are one of the four things that should dominate a row, so
     they do not get to be the smallest type on it. */
  .ysig { font-size: 0.8125rem; padding: 0.2rem 0.5rem; }
  .yjob__cta {
    align-self: baseline; justify-self: end;
    margin-top: var(--kds-sp-2); padding-top: 0;
    font-size: var(--kds-text-sm); white-space: nowrap;
  }
}
/* Under ~376px there is no longer room for the pay and "View job" on one line:
   measured, the widest pay ("$110,000 – $140,000/year") needs 214px and a 360px
   card leaves 190. Rather than shrink the pay or let it break across two lines —
   "$60,000 –" over "$72,000/year" reads as a fault — the pay takes the full width
   back and "View job" rejoins the footer line. Same height, nothing truncated. */
@media (max-width: 23.5rem) {
  .yjob__pay  { grid-column: 1 / -1; }
  .yjob__when { grid-column: 1; }
  .yjob__cta  { order: 7; grid-column: 2; align-self: center; margin-top: var(--kds-sp-2); }
}

/* A tapped row must not keep the hover state on a touch screen. */
@media (hover: none) {
  .yjob:hover:not(.is-active) { background: var(--kds-surface); }
  .yjob:hover .yjob__link { text-decoration: none; }
  .yjob:hover .yjob__cta svg { transform: none; }
  .ystage:hover { transform: none; background: transparent; }
  .ystage.is-on:hover { background: var(--ycc-orange); }
}

/* =============================================================================
   6. Empty state + pagination
   ========================================================================== */
.yjs-empty { margin-top: var(--kds-sp-5); }
.yjs-empty h2 {
  margin-top: 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: -0.015em;
}
.yjs-empty__acts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--kds-sp-3); margin-top: var(--kds-sp-4);
}
.yjs-empty__drop {
  margin: var(--kds-sp-5) 0 var(--kds-sp-3);
  font-size: var(--kds-text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--kds-fg-muted);
}
.ychips--empty { justify-content: center; margin-bottom: 0; }

.ypager {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--kds-sp-2);
  margin-top: var(--kds-sp-5);
}
.ypager__step {
  display: inline-flex; align-items: center; min-height: 40px;
  padding-inline: var(--kds-sp-4);
  border: 1px solid var(--kds-border-strong); border-radius: var(--yjs-r-field);
  background: var(--kds-surface); color: var(--kds-fg);
  font-size: var(--kds-text-sm); font-weight: 600; text-decoration: none;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.ypager__step:hover { background: var(--kds-surface-3); }
.ypager__step.is-off { opacity: 0.4; pointer-events: none; }
.ypager__nums { display: flex; gap: var(--kds-sp-1); }
.ypager__n {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding-inline: var(--kds-sp-2);
  border-radius: var(--yjs-r-field);
  color: var(--kds-fg); text-decoration: none;
  font-size: var(--kds-text-sm); font-weight: 600;
}
.ypager__n:hover { background: var(--kds-surface-3); }
.ypager__n.is-on { background: var(--kds-inverse); color: var(--kds-inverse-fg); font-weight: 800; }
.ypager__of { margin-inline-start: auto; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }

/* =============================================================================
   7. Explore Canada — the map panel
   ========================================================================== */
/* Verandah halves the section rhythm of the old marquee scale; these bands are
   sized to match it, so the map reads as one more panel on the page and not as
   a second hero. */
.yjs-map {
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--kds-surface-2);
  border-top: 1px solid var(--kds-border);
}
.yjs-map__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--kds-sp-3);
  margin-bottom: var(--kds-sp-4);
}
.yjs-map__h {
  margin: 0;
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: -0.015em;
  color: var(--kds-fg);
}
.yjs-map__sub { margin: var(--kds-sp-1) 0 0; max-width: 54ch; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.yjs-map__tools { display: flex; align-items: center; gap: var(--kds-sp-2); }

.yview { display: inline-flex; border: 1px solid var(--kds-border-strong); border-radius: var(--yjs-r-field); overflow: hidden; }
.yview button {
  min-height: 38px; padding-inline: var(--kds-sp-4);
  border: 0; background: var(--kds-surface); color: var(--kds-fg);
  font-size: var(--kds-text-xs); font-weight: 700; cursor: pointer;
}
.yview button + button { border-left: 1px solid var(--kds-border-strong); }
.yview button[aria-pressed="true"] { background: var(--kds-inverse); color: var(--kds-inverse-fg); }

.yjs-map__toggle {
  min-height: 38px; padding-inline: var(--kds-sp-4);
  border: 1px solid var(--kds-border-strong); border-radius: var(--yjs-r-field);
  background: var(--kds-surface); color: var(--kds-fg);
  font-size: var(--kds-text-xs); font-weight: 700; cursor: pointer;
}
.yjs-map__toggle:hover { background: var(--kds-surface-3); }

.yjs-map__pane { display: block; }
.yjs-map__canvas {
  height: clamp(260px, 30vh, 360px);
  border: 1px solid var(--kds-border);
  /* large media takes the 20px step, same as the homepage's photographs */
  border-radius: var(--yjs-r-block);
  background: var(--kds-surface-3);
  overflow: hidden;
}
.yjs-map__canvas .leaflet-container { height: 100%; width: 100%; background: var(--kds-surface-3); }
.yjs-map__note { margin: var(--kds-sp-3) 0 0; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }

/* the map toggle: html.jobs-map-off hides the panel (class set before first paint) */
html.jobs-map-off .jobs-map-section { display: none; }
html.jobs-map-off .yjs-map__head { margin-bottom: 0; }

/* Without JavaScript neither jobs-map-on nor jobs-map-off is ever set, so the panel
   rendered as an empty grey box under a caption, above three buttons that could not
   do anything. A map IS the script; with no script there is nothing to show, so the
   whole section goes. Nothing is lost: every location is on its job's own page. */
html:not(.js) .yjs-map { display: none; }

/* phone "Map" view: the panel gets the viewport, the list steps aside.
   dvh, not vh: on a phone `100vh` is the viewport with the browser chrome hidden,
   so a vh-sized pane runs under the address bar and the note below it is unreachable. */
@media (max-width: 1039px) {
  .yjs.is-map .yjs-map__canvas { height: calc(100vh - 220px); height: calc(100dvh - 220px); }
}

/* =============================================================================
   8. Browse by career area
   ========================================================================== */
.yareas { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); border-top: 1px solid var(--kds-border); }
.yareas__h {
  margin: 0 0 var(--kds-sp-4);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: -0.015em;
}
.yareas__box {
  border: 1px solid var(--kds-border); border-radius: var(--yjs-r-card);
  background: var(--kds-surface); overflow: hidden;
}
.yareas__tabs {
  display: flex; flex-wrap: wrap; gap: var(--kds-sp-1);
  padding: var(--kds-sp-2) var(--kds-sp-3);
  background: var(--kds-surface-2);
  border-bottom: 1px solid var(--kds-border);
}
.yareas__tab {
  min-height: 36px; padding-inline: var(--kds-sp-4);
  border: 0; border-radius: var(--yjs-r-field);
  background: transparent; color: var(--kds-fg-muted);
  font-family: var(--kds-font-display);
  font-size: var(--kds-text-sm); font-weight: 600; cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard),
              color var(--kds-dur-fast) var(--kds-ease-standard);
}
.yareas__tab:hover { background: var(--kds-surface-3); color: var(--kds-fg); }
.yareas__tab.is-active { background: var(--kds-inverse); color: var(--kds-inverse-fg); font-weight: 700; }

.yareas__chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--kds-sp-2);
  margin: 0; padding: var(--kds-sp-3);
}
.career-nav__chips--hidden { display: none; }
/* The area tabs are <button>s that only script can act on, and without it four of
   the five chip groups were unreachable. So drop the tabs and show every group —
   each chip is already a real /jobs?category= link. */
html:not(.js) .yareas__tabs { display: none; }
html:not(.js) .career-nav__chips--hidden { display: flex; }
html:not(.js) .yareas__chips + .yareas__chips { border-top: 1px solid var(--kds-border); }
.yareas__chip {
  display: inline-flex; align-items: center; min-height: 34px;
  padding-inline: var(--kds-sp-3);
  border: 1px solid var(--kds-border-strong); border-radius: var(--yjs-r-field);
  color: var(--kds-fg); text-decoration: none;
  font-size: var(--kds-text-sm); font-weight: 500;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.yareas__chip:hover { background: var(--kds-surface-3); border-color: var(--kds-fg); }
.yareas__chip.is-current { background: var(--ycc-orange); border-color: var(--ycc-orange); color: var(--ycc-navy); font-weight: 700; }

/* =============================================================================
   9. Narrow screens
   ========================================================================== */
@media (max-width: 860px) {
  .ybar { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .ybar__field + .ybar__field { box-shadow: 0 -1px 0 var(--kds-border); }
  /* The input's own box was 26px tall: the field looked finger-sized because of its
     padding, but only the 26px strip actually focused. The padding moves onto the
     input so the whole visible field is the target, at the same overall height. */
  .ybar__field { padding-block: var(--kds-sp-1); }
  .ybar__input { min-height: var(--yjs-tap); padding-block: var(--kds-sp-1); margin-top: 0; }
  .ybar__go { min-height: 48px; }
  /* Control labels: 13px rather than 12 on a phone. */
  .ybar__near, .ytools__sort > span { font-size: 0.8125rem; }
  /* Touch targets grow back to 44px where a finger is doing the pointing. */
  .ystage { min-height: var(--yjs-tap); padding-inline: var(--kds-sp-4); font-size: var(--kds-text-sm); }
  .ybar__near { height: var(--yjs-tap); }
  .ybar__input { font-size: var(--kds-text-md); }   /* 16px: anything smaller makes iOS zoom the page on focus */

  /* The stage strip scrolls sideways. Before, it was clipped dead flush at the
     viewport edge — "Internships & Co-" with nothing to say there was more, which
     reads as a layout fault rather than an invitation. The strip now fades out at
     whichever edge still has tabs behind it.
     The two custom properties are MASK ALPHA, not paint: `mask-image` only reads the
     alpha channel, so rgb(0 0 0) means "keep" and rgb(0 0 0 / 0) means "fade away".
     No colour is introduced and the navy block shows through unchanged.
     The end fade is ON by default, so the affordance survives with JavaScript off
     (on a phone the strip always overflows). jobs-search.js only refines it: it
     clears the fade on an edge once you have actually scrolled to it. */
  .ystages {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: var(--kds-sp-1);
    margin-inline: calc(var(--ycc-gutter) * -1);
    padding-inline: var(--ycc-gutter);
    --yjs-edge-start: rgb(0 0 0);
    --yjs-edge-end: rgb(0 0 0 / 0);
    -webkit-mask-image: linear-gradient(90deg, var(--yjs-edge-start) 0, rgb(0 0 0) 1.25rem, rgb(0 0 0) calc(100% - 2.5rem), var(--yjs-edge-end) 100%);
    mask-image: linear-gradient(90deg, var(--yjs-edge-start) 0, rgb(0 0 0) 1.25rem, rgb(0 0 0) calc(100% - 2.5rem), var(--yjs-edge-end) 100%);
  }
  .ystages.is-at-end { --yjs-edge-end: rgb(0 0 0); }
  .ystages.is-off-start { --yjs-edge-start: rgb(0 0 0 / 0); }
  /* A mask clips to the border box, so it would also clip a focus ring. Drop the mask
     outright while focus is inside the strip — the ring must always be whole. */
  .ystages:focus-within { -webkit-mask-image: none; mask-image: none; }
  .ystages::-webkit-scrollbar { display: none; }
  /* The last tab needs room to clear the fade when it is scrolled fully into view. */
  .ystages .ystage:last-child { margin-inline-end: var(--kds-sp-2); }

  /* ---- vertical density (2026-09-28) ------------------------------------
     Measured at 390px before cutting, because "it scrolls too much" is usually
     one block, not the whole page. The results were 2525px of a 4785px page
     (9 rows x ~280px) and the chrome around them about 940px. Nothing here hides
     a result: the cuts are padding, doubled margins and the browse detail that
     the job page repeats in full a tap away. */
  .yjs-mast { padding-block: var(--kds-sp-3); }
  .yjs-mast__title { margin-bottom: var(--kds-sp-2); }
  .ystages { margin-top: var(--kds-sp-2); }
  .yjs-body { padding-block: var(--kds-sp-3) var(--kds-sp-5); }
  .ychips { margin-bottom: var(--kds-sp-3); }
  .yjs-map, .yareas { padding-block: var(--kds-sp-4); }
  /* The five career-area tabs wrapped onto three 44px rows. Same treatment as the
     stage strip: one row that scrolls, faded at whichever edge still has tabs. */
  .yareas__tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    --yjs-edge-start: rgb(0 0 0);
    --yjs-edge-end: rgb(0 0 0 / 0);
    -webkit-mask-image: linear-gradient(90deg, var(--yjs-edge-start) 0, rgb(0 0 0) 1.25rem, rgb(0 0 0) calc(100% - 2.5rem), var(--yjs-edge-end) 100%);
    mask-image: linear-gradient(90deg, var(--yjs-edge-start) 0, rgb(0 0 0) 1.25rem, rgb(0 0 0) calc(100% - 2.5rem), var(--yjs-edge-end) 100%);
  }
  .yareas__tabs.is-at-end { --yjs-edge-end: rgb(0 0 0); }
  .yareas__tabs.is-off-start { --yjs-edge-start: rgb(0 0 0 / 0); }
  .yareas__tabs:focus-within { -webkit-mask-image: none; mask-image: none; }
  .yareas__tabs::-webkit-scrollbar { display: none; }
  .yareas__tab { flex: none; }
  /* The mask fades everything the strip paints, including its own ivory fill and
     its bottom rule — which looked like the strip had been torn off at the right.
     So on a phone the strip carries no fill of its own and the rule moves to the
     chip list below it; only the tabs fade. */
  .yareas__tabs { background: transparent; border-bottom: 0; }
  .yareas__chips { border-top: 1px solid var(--kds-border); }
  .yjs-map__head { flex-direction: column; align-items: flex-start; margin-bottom: var(--kds-sp-3); }
  .yjs-map__sub { font-size: 0.8125rem; }
  .yareas__h, .yjs-map__h { font-size: var(--kds-text-lg); }
  .yareas__h { margin-bottom: var(--kds-sp-3); }
  .yjs-map__tools { flex-wrap: wrap; }
  .yview button, .yjs-map__toggle { min-height: var(--yjs-tap); font-size: var(--kds-text-sm); }
  .yareas__tab { min-height: var(--yjs-tap); }
  .yareas__chip { min-height: var(--yjs-tap); font-size: var(--kds-text-sm); }
  .ychip { min-height: 40px; font-size: var(--kds-text-sm); }
  .ypager__step, .ypager__n { min-height: var(--yjs-tap); }
  .ypager__n { min-width: var(--yjs-tap); }
}
@media (max-width: 520px) {
  .ytools { align-items: flex-start; }
  .ytools__right { width: 100%; justify-content: space-between; gap: var(--kds-sp-2); }
  /* The sort control is a real control on a phone, so it gets a real target. */
  .ytools__sort { flex: 1; justify-content: flex-end; min-width: 0; }
  /* 16px, not 14: iOS zooms the whole page in when a focused control is under 16px. */
  .ytools__sort .yfield--sm { min-height: var(--yjs-tap); font-size: var(--kds-text-md); min-width: 0; }
  .ytools__filters { flex: none; }
  .ypager__of { width: 100%; margin: var(--kds-sp-2) 0 0; }
}

/* =============================================================================
   10. Print — the listings, nothing else
   ========================================================================== */
@media print {
  .ybar, .ystages, .yrail, .ytools__right, .yjs-map, .yareas, .ychip--clear { display: none !important; }
  .yjs-mast { background: none; color: var(--ycc-navy); border-bottom: 2px solid var(--ycc-navy); }
  .yjs-mast__title { color: var(--ycc-navy); }
  .yjs-list { border: 0; }
  .yjob { break-inside: avoid; }
}