/* =============================================================================
   Youth Careers Canada — JOB SEEKER area.
   Owned by the seeker agent. Loaded after /css/ycc.css on /jobseeker/*,
   /jobs/:slug/apply and the public /jobseeker landing page.

   Design language: editorial poster. Flat blocks of navy and orange doing
   structural work, high-contrast type, tight geometry (12px cards / 8px fields),
   spacing that groups rather than a grid of identical cards.
   NO gradients, no glows, no eyebrow pills above headlines, no nested cards.
   Tokens only — every colour, space, radius and duration comes from KDS.

   LIGHT THEME ONLY (2026-09-25): <html> is pinned to data-kds-theme="light", so the
   two [data-kds-theme="dark"] overrides that used to sit on .sk-nav__link.is-active
   and .sk-tag--match/--hired were deleted as dead code. Do not add theme rules.
   The /jobseeker landing (section 7) is tuned for the `verandah` scale: display caps
   at 3.75rem, leading 1.12. The app screens above it are deliberately untouched.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Local primitives
   -------------------------------------------------------------------------- */
.sk-ink   { font-family: var(--kds-font-display); font-weight: 800; letter-spacing: var(--kds-tracking-tight); line-height: var(--kds-leading-tight); }
.sk-muted { color: var(--kds-fg-muted); }
.sk-small { font-size: var(--kds-text-sm); }
.sk-nowrap { white-space: nowrap; }

/* A flat navy block. Re-points the local semantic tokens so anything nested
   inside (buttons, rules, muted text) stays legible without hardcoding. */
.sk-navy {
  background: var(--ycc-navy);
  color: var(--ycc-ivory);
  --kds-fg: var(--ycc-ivory);
  --kds-fg-muted: color-mix(in srgb, var(--ycc-ivory) 74%, var(--ycc-navy));
  --kds-fg-faint: color-mix(in srgb, var(--ycc-ivory) 58%, var(--ycc-navy));
  --kds-border: color-mix(in srgb, var(--ycc-ivory) 22%, var(--ycc-navy));
  --kds-border-strong: color-mix(in srgb, var(--ycc-ivory) 42%, var(--ycc-navy));
  --kds-surface: color-mix(in srgb, var(--ycc-ivory) 8%, var(--ycc-navy));
  --kds-surface-2: color-mix(in srgb, var(--ycc-ivory) 12%, var(--ycc-navy));
  --kds-accent: var(--ycc-yellow);
}
/* A flat orange block. Orange only ever carries NAVY ink (6.7:1). */
.sk-orange {
  background: var(--ycc-orange);
  color: var(--ycc-navy);
  --kds-fg: var(--ycc-navy);
  --kds-fg-muted: color-mix(in srgb, var(--ycc-navy) 82%, var(--ycc-orange));
  --kds-border: color-mix(in srgb, var(--ycc-navy) 26%, var(--ycc-orange));
  --kds-accent: var(--ycc-navy);
}

/* Press + hover motion, house standard: 150ms lift, 160ms press, never elastic. */
.sk-press { transition: transform var(--kds-dur-fast) var(--kds-ease-standard), background var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast) var(--kds-ease-standard); }
.sk-press:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .sk-press:active { transform: none; } }

/* =============================================================================
   1. APP SHELL — dashboard, profile, applications, saved, alerts, notifications
   ============================================================================= */
.sk {
  display: grid;
  gap: var(--kds-sp-6);
  padding-block: var(--kds-sp-6) var(--kds-sp-9);
  align-items: start;
}
@media (min-width: 1024px) {
  .sk { grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--kds-sp-8); padding-block: var(--kds-sp-7) var(--kds-sp-9); }
  .sk__side { position: sticky; top: 5.5rem; }
}
.sk__side, .sk__main { min-width: 0; }
.sk__main { display: grid; gap: var(--kds-sp-7); }
.sk > *, .sk-grid > *, .sk-cols > * { min-width: 0; }

/* --- side navigation ------------------------------------------------------ */
.sk-nav { position: relative; min-width: 0; }
.sk-nav__list {
  display: flex; gap: var(--kds-sp-1);
  margin: 0; padding: 0 0 var(--kds-sp-2); list-style: none;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.sk-nav__list::-webkit-scrollbar { display: none; }
.sk-nav__link {
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  min-height: 44px; padding-inline: var(--kds-sp-4);
  border-radius: var(--kds-radius-md);
  font-size: var(--kds-text-sm); font-weight: 600;
  color: var(--kds-fg-muted); text-decoration: none; white-space: nowrap;
  transition: color var(--kds-dur-fast) var(--kds-ease-standard), background var(--kds-dur-fast) var(--kds-ease-standard);
}
.sk-nav__link:hover { color: var(--kds-fg); background: var(--kds-surface-3); }
.sk-nav__link.is-active { color: var(--ycc-navy); background: var(--ycc-orange); }
.sk-nav__badge {
  display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem;
  padding-inline: 0.35rem; border-radius: var(--kds-radius-full);
  background: var(--kds-danger); color: var(--ycc-ivory);
  font-size: var(--kds-text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.sk-nav__link.is-active .sk-nav__badge { background: var(--ycc-navy); color: var(--ycc-ivory); }
/* On phones/tablets the strip bleeds to the screen edge and carries the page
   gutter as its own padding, so a half-scrolled tab is cut at the true edge
   (which reads as "scroll me") instead of at an arbitrary inset. */
@media (max-width: 1023px) {
  .sk-nav { margin-inline: calc(var(--ycc-gutter) * -1); }
  .sk-nav__list { padding-inline: var(--ycc-gutter); scroll-padding-inline: var(--ycc-gutter); }
}
/* Edge fades. BOTH default to invisible: seeker.js turns one on only when the
   strip really does have more to scroll that way. If the script never runs the
   fades stay off, so a fade can never sit on top of the active tab and wash it
   out — which is exactly what the old "right fade on by default" rule did. */
.sk-nav::after, .sk-nav::before {
  content: ""; position: absolute; top: 0; bottom: var(--kds-sp-2); width: var(--ycc-gutter);
  pointer-events: none; opacity: 0; transition: opacity var(--kds-dur-fast) var(--kds-ease-standard);
}
.sk-nav::after { right: 0; background: linear-gradient(to left, var(--kds-bg), transparent); }
.sk-nav::before { left: 0; background: linear-gradient(to right, var(--kds-bg), transparent); }
.sk-nav.can-scroll-e::after { opacity: 1; }
.sk-nav.can-scroll-w::before { opacity: 1; }

@media (min-width: 1024px) {
  .sk-nav { margin-inline: 0; }
  .sk-nav__list { display: grid; gap: 2px; overflow: visible; padding-bottom: 0; padding-inline: 0; }
  .sk-nav__link { justify-content: space-between; border-radius: var(--kds-radius-md); }
  .sk-nav::after, .sk-nav::before { content: none; }
}

/* --- page head ------------------------------------------------------------ */
.sk-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--kds-sp-4) var(--kds-sp-6);
  padding-bottom: var(--kds-sp-5);
  border-bottom: 2px solid var(--kds-fg);
}
.sk-head__h {
  margin: 0;
  font-family: var(--kds-font-display); font-weight: 800;
  font-size: var(--kds-text-3xl); line-height: var(--kds-leading-tight);
  letter-spacing: var(--kds-tracking-tight); text-wrap: balance;
}
.sk-head__sub { margin: var(--kds-sp-3) 0 0; max-width: 56ch; color: var(--kds-fg-muted); font-size: var(--kds-text-md); }
.sk-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3); }

/* --- section / panel ------------------------------------------------------
   Structure comes from a rule and spacing, never from a card inside a card. */
.sk-section { display: grid; gap: var(--kds-sp-4); align-content: start; }
.sk-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--kds-sp-2) var(--kds-sp-4);
  padding-bottom: var(--kds-sp-3);
  border-bottom: 1px solid var(--kds-border);
}
.sk-section__h {
  margin: 0; font-family: var(--kds-font-display); font-weight: 700;
  font-size: var(--kds-text-xl); letter-spacing: var(--kds-tracking-tight);
}
.sk-section__meta { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-section__link { font-size: var(--kds-text-sm); font-weight: 600; }

.sk-cols { display: grid; gap: var(--kds-sp-7); align-items: start; }
@media (min-width: 900px) { .sk-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kds-sp-6); } }

/* --- card ----------------------------------------------------------------- */
.sk-card {
  background: var(--kds-surface);
  border: 1px solid var(--kds-border);
  border-radius: var(--kds-radius-lg);
  padding: var(--kds-sp-5);
}
.sk-card--lift { transition: transform var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast) var(--kds-ease-standard); }
.sk-card--lift:hover { transform: translateY(-2px); border-color: var(--kds-fg); }
@media (prefers-reduced-motion: reduce) { .sk-card--lift:hover { transform: none; } }

/* --- row lists (applications, notifications, saved-but-gone) -------------- */
.sk-rows { margin: 0; padding: 0; list-style: none; display: grid; }
.sk-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--kds-sp-3) var(--kds-sp-5);
  padding-block: var(--kds-sp-4);
  border-bottom: 1px solid var(--kds-border);
}
.sk-row:first-child { padding-top: var(--kds-sp-2); }
.sk-row__main { min-width: 0; display: grid; gap: var(--kds-sp-1); flex: 1 1 18rem; }
.sk-row__title { font-weight: 700; font-size: var(--kds-text-md); line-height: 1.3; }
.sk-row__title a { color: inherit; text-decoration: none; }
.sk-row__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-row__meta { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-row__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3); }
.sk-row__form { margin: 0; }

/* Key/value detail line inside a row (what you sent with an application) */
.sk-kv { margin: var(--kds-sp-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--kds-sp-1) var(--kds-sp-5); font-size: var(--kds-text-sm); }
.sk-kv div { display: flex; gap: var(--kds-sp-2); min-width: 0; }
.sk-kv dt { color: var(--kds-fg-faint); }
.sk-kv dd { margin: 0; color: var(--kds-fg-muted); overflow-wrap: anywhere; }

/* --- status tag — a flat block of colour, not a glossy pill --------------- */
.sk-tag {
  display: inline-flex; align-items: center; gap: var(--kds-sp-2);
  padding: 0.28rem 0.6rem;
  border-radius: var(--kds-radius-sm);
  border: 1px solid currentColor;
  font-size: var(--kds-text-xs); font-weight: 700;
  letter-spacing: var(--kds-tracking-wide); text-transform: uppercase;
  white-space: nowrap;
}
.sk-tag--live      { color: var(--kds-fg); border-color: var(--kds-border-strong); background: var(--kds-surface-2); }
.sk-tag--viewed    { color: var(--kds-info); background: var(--kds-info-soft); }
.sk-tag--good      { color: var(--kds-positive); background: var(--kds-positive-soft); }
.sk-tag--hired     { color: var(--ycc-navy); background: var(--ycc-orange); border-color: var(--ycc-orange); }
.sk-tag--closed    { color: var(--kds-danger); background: var(--kds-danger-soft); }
.sk-tag--match     { color: var(--ycc-navy); background: var(--ycc-yellow); border-color: var(--ycc-yellow); }

/* =============================================================================
   2. DASHBOARD
   ============================================================================= */
.sk-hello {
  min-width: 0;
  padding: var(--kds-sp-6) var(--kds-sp-6) var(--kds-sp-6);
  border-radius: var(--kds-radius-lg);
  display: grid; gap: var(--kds-sp-5);
}
@media (min-width: 860px) {
  .sk-hello { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; padding: var(--kds-sp-7); gap: var(--kds-sp-7); }
}
.sk-hello__h { margin: 0; font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-3xl); line-height: 1.05; letter-spacing: var(--kds-tracking-tight); }
.sk-hello__line { margin: var(--kds-sp-3) 0 0; font-size: var(--kds-text-lg); color: var(--kds-fg-muted); max-width: 44ch; text-wrap: pretty; }
.sk-hello__actions { margin-top: var(--kds-sp-5); display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); }
/* Counts as a scannable index, not decorative hero metrics: every line is a link
   that takes you to the thing it counts. */
.sk-index { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--kds-border); border-radius: var(--kds-radius-md); overflow: hidden; }
.sk-index a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-4);
  padding: var(--kds-sp-3) var(--kds-sp-4);
  background: var(--kds-surface);
  color: var(--kds-fg); text-decoration: none; font-size: var(--kds-text-sm); font-weight: 600;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.sk-index a:hover { background: var(--kds-surface-2); }
.sk-index b { font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-variant-numeric: tabular-nums; line-height: 1; }

/* --- next steps / completeness ------------------------------------------- */
.sk-next { display: grid; gap: var(--kds-sp-4); }
.sk-meter { display: flex; align-items: center; gap: var(--kds-sp-4); }
.sk-meter__track { flex: 1; height: 10px; background: var(--kds-surface-3); border-radius: var(--kds-radius-full); overflow: hidden; }
.sk-meter__fill { display: block; height: 100%; background: var(--ycc-orange); border-radius: inherit; transition: width var(--kds-dur-slow) var(--kds-ease-standard); }
.sk-meter__pct { font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-lg); font-variant-numeric: tabular-nums; }

.sk-tasks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kds-sp-1); }
.sk-task { display: flex; align-items: center; gap: var(--kds-sp-3); padding-block: var(--kds-sp-2); font-size: var(--kds-text-md); }
.sk-task__tick {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--kds-border-strong); border-radius: var(--kds-radius-sm);
  color: var(--ycc-navy);
}
.sk-task.is-done .sk-task__tick { background: var(--ycc-orange); border-color: var(--ycc-orange); }
.sk-task.is-done { color: var(--kds-fg-muted); }
.sk-task a { font-weight: 600; }

/* =============================================================================
   3. JOB CARD (dashboard matches + saved jobs)
   ============================================================================= */
.sk-grid { display: grid; gap: var(--kds-sp-4); }
@media (min-width: 720px) { .sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sk-job { display: grid; gap: var(--kds-sp-3); align-content: start; }
.sk-job__title { margin: 0; font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-lg); line-height: 1.25; letter-spacing: var(--kds-tracking-tight); }
.sk-job__title a { color: inherit; text-decoration: none; }
.sk-job__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-job__who { font-size: var(--kds-text-sm); font-weight: 600; }
.sk-job__where, .sk-job__legal { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-job__facts { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2) var(--kds-sp-3); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-job__facts span { display: inline-flex; align-items: center; }
.sk-job__facts { column-gap: var(--kds-sp-4); }
.sk-job__pay { color: var(--kds-fg); font-weight: 700; }
.sk-job__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kds-sp-2); font-size: var(--kds-text-xs); color: var(--kds-fg-faint); }
.sk-job__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3); margin-top: var(--kds-sp-1); padding-top: var(--kds-sp-4); border-top: 1px solid var(--kds-border); }
.sk-job__actions form { margin: 0; }

/* =============================================================================
   4. FORMS — the long profile, alerts, apply. Calm, grouped, generous.
   ============================================================================= */
.sk-form { display: grid; gap: var(--kds-sp-8); }
.sk-form > .sk-group:first-child { margin-top: calc(var(--kds-sp-4) * -1); }
.sk-form > * { min-width: 0; }

/* A form group: heading + helper on the left, fields on the right at ≥960px. */
.sk-group { display: grid; gap: var(--kds-sp-5); padding-top: var(--kds-sp-5); border-top: 2px solid var(--kds-fg); }
@media (min-width: 960px) { .sk-group { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--kds-sp-7); } }
.sk-group__intro { display: grid; gap: var(--kds-sp-2); align-content: start; }
.sk-group__h { margin: 0; font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-xl); letter-spacing: var(--kds-tracking-tight); }
.sk-group__note { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-group__body { display: grid; gap: var(--kds-sp-5); align-content: start; }

.sk-field { display: grid; gap: var(--kds-sp-2); }
/* grid/flex display must not defeat the hidden attribute (the apply form toggles it) */
.sk-field[hidden], .sk-checks[hidden], [hidden] { display: none !important; }
.sk-field > label, .sk-field legend, .sk-legend {
  font-size: var(--kds-text-sm); font-weight: 700; color: var(--kds-fg); padding: 0;
}
.sk-field .kds-input, .sk-field .kds-select, .sk-field .kds-textarea { border-radius: var(--kds-radius-md); font-size: var(--kds-text-md); }
.sk-field .kds-input:focus, .sk-field .kds-select:focus, .sk-field .kds-textarea:focus { border-color: var(--kds-fg); }
.sk-hint { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-error { font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-danger); }
.sk-field [aria-invalid="true"] { border-color: var(--kds-danger); }
.sk-req { color: var(--kds-danger); }
.sk-pair { display: grid; gap: var(--kds-sp-5); }
@media (min-width: 620px) { .sk-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

fieldset.sk-field { border: 0; margin: 0; }

/* Checkbox / radio sets */
.sk-checks { display: grid; gap: var(--kds-sp-2); }
.sk-checks--multi { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--kds-sp-2) var(--kds-sp-4); }
.sk-check {
  display: flex; align-items: flex-start; gap: var(--kds-sp-3);
  min-height: 44px; padding: var(--kds-sp-2) var(--kds-sp-3);
  border-radius: var(--kds-radius-md);
  font-size: var(--kds-text-sm); line-height: 1.4; cursor: pointer;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard);
}
.sk-check:hover { background: var(--kds-surface-3); }
.sk-check input { margin-top: 0.15rem; }
.sk-check__text { display: grid; gap: 0.15rem; }
.sk-check__text strong { font-weight: 700; }
.sk-check--card { border: 1px solid var(--kds-border); background: var(--kds-surface); padding: var(--kds-sp-4); }
.sk-check--card:has(input:checked) { border-color: var(--ycc-orange); box-shadow: inset 3px 0 0 var(--ycc-orange); }

/* File input */
.sk-file {
  width: 100%; padding: var(--kds-sp-4);
  border: 2px dashed var(--kds-border-strong); border-radius: var(--kds-radius-md);
  background: var(--kds-surface-2); font-size: var(--kds-text-sm); color: var(--kds-fg);
}
.sk-file::file-selector-button {
  margin-inline-end: var(--kds-sp-4); padding: 0.5rem var(--kds-sp-4);
  border: 1px solid var(--kds-fg); border-radius: var(--kds-radius-md);
  background: transparent; color: var(--kds-fg); font: inherit; font-weight: 700; cursor: pointer;
}
.sk-file::file-selector-button:hover { background: var(--ycc-orange); border-color: var(--ycc-orange); color: var(--ycc-navy); }

/* Resume on file */
.sk-resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3) var(--kds-sp-5);
  padding: var(--kds-sp-4);
  border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg);
  background: var(--kds-surface);
}
.sk-resume__icon { flex: none; width: 34px; height: 42px; display: grid; place-items: center; border: 2px solid var(--kds-fg); border-radius: var(--kds-radius-sm); }
.sk-resume__meta { flex: 1 1 12rem; min-width: 0; display: grid; gap: 0.15rem; }
.sk-resume__meta strong { overflow-wrap: anywhere; }
.sk-resume__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); }
.sk-resume__actions form { margin: 0; }

/* Sticky action bar */
.sk-actions {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3) var(--kds-sp-4);
  margin-top: var(--kds-sp-2);
  padding: var(--kds-sp-4) var(--kds-sp-4);
  background: color-mix(in srgb, var(--kds-bg) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid var(--kds-fg);
}
.sk-actions__note { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
/* The bar floats over the form for as long as the form is on screen, so two
   things have to be true on a phone. `--sk-bar` is how tall the bar gets there:
   `--sk-pad` keeps a little real space at the end of the form so a field that
   the on-screen keyboard pushes up can still be scrolled clear of the bar, and
   scroll-margin tells the browser how far to scroll when it focuses one. */
.sk-form { --sk-bar: 0px; --sk-pad: 0px; }
.sk-form > .sk-group:last-of-type { padding-bottom: var(--sk-pad); }
.sk-form .sk-field, .sk-form fieldset.sk-field { scroll-margin-block-end: calc(var(--sk-bar) + var(--kds-sp-4)); }

/* Alerts switch row */
.sk-switch { display: flex; align-items: flex-start; gap: var(--kds-sp-4); padding: var(--kds-sp-4) 0; cursor: pointer; }
.sk-switch .kds-switch { margin-top: 0.1rem; }
/* When email is switched off the frequency choice is still live and still
   submits, so it is de-emphasised with a token colour rather than opacity:
   .55 opacity on body text drops it under 4.5:1 and it is real, usable content. */
.sk-freq { transition: color var(--kds-dur-base) var(--kds-ease-standard); }
.sk-freq.is-off { color: var(--kds-fg-muted); }
.sk-freq.is-off .sk-check--card { border-style: dashed; }

/* Criteria summary */
.sk-crit { margin: 0; display: grid; gap: 1px; background: var(--kds-border); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); overflow: hidden; }
.sk-crit > div { display: grid; gap: var(--kds-sp-1); padding: var(--kds-sp-3) var(--kds-sp-4); background: var(--kds-surface); }
@media (min-width: 620px) { .sk-crit > div { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; gap: var(--kds-sp-4); } }
.sk-crit dt { font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: var(--kds-tracking-wide); text-transform: uppercase; color: var(--kds-fg-muted); }
.sk-crit dd { margin: 0; font-size: var(--kds-text-sm); overflow-wrap: anywhere; }

/* =============================================================================
   5. NOTIFICATIONS
   ============================================================================= */
.sk-note { position: relative; padding-left: var(--kds-sp-4); }
.sk-note.is-unread { border-left: 3px solid var(--ycc-orange); padding-left: calc(var(--kds-sp-4) - 3px); }
.sk-note__unread { color: var(--kds-fg); font-weight: 700; }

/* =============================================================================
   6. APPLY
   ============================================================================= */
.sk-apply { padding-block: var(--kds-sp-6) var(--kds-sp-9); display: grid; gap: var(--kds-sp-6); }
@media (min-width: 1024px) {
  .sk-apply__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--kds-sp-8); align-items: start; }
  .sk-apply__aside { position: sticky; top: 5.5rem; }
}
.sk-apply__grid { display: grid; gap: var(--kds-sp-6); }
.sk-apply--narrow { max-width: 56rem; }
.sk-apply--narrow .sk-apply__grid { grid-template-columns: minmax(0, 1fr); }

/* small utilities used by the seeker views (tokens only, no inline styles) */
.sk-mt { margin-top: var(--kds-sp-4); }
.sk-kicker { margin: 0 0 var(--kds-sp-2); }
.sk-group--first, .sk-form > .sk-group:first-child { border-top: 0; padding-top: 0; }

/* What happens when you send — the calm bit of the highest-stakes screen. */
.sk-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kds-sp-3); counter-reset: skstep; }
.sk-steps li { display: flex; gap: var(--kds-sp-3); align-items: flex-start; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.sk-steps li::before {
  counter-increment: skstep; content: counter(skstep);
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: var(--kds-radius-full); background: var(--kds-surface-3); color: var(--kds-fg);
  font-size: var(--kds-text-xs); font-weight: 700;
}

.sk-summary { display: grid; gap: var(--kds-sp-4); }
.sk-summary__h { margin: 0; font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-xl); letter-spacing: var(--kds-tracking-tight); }
.sk-facts { margin: 0; display: grid; gap: var(--kds-sp-3); }
.sk-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--kds-sp-3); align-items: baseline; font-size: var(--kds-text-sm); }
.sk-facts dt { color: var(--kds-fg-faint); }
.sk-facts dd { margin: 0; }
.sk-summary__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kds-sp-2); padding-top: var(--kds-sp-4); border-top: 1px solid var(--kds-border); font-size: var(--kds-text-sm); }

.sk-or { display: flex; align-items: center; gap: var(--kds-sp-4); color: var(--kds-fg-faint); font-size: var(--kds-text-sm); text-transform: uppercase; letter-spacing: var(--kds-tracking-wide); }
.sk-or::before, .sk-or::after { content: ""; flex: 1; height: 1px; background: var(--kds-border); }

.sk-points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kds-sp-2); font-size: var(--kds-text-sm); }
.sk-points li { display: flex; gap: var(--kds-sp-3); }
.sk-job__actions + .sk-points { margin-top: var(--kds-sp-6); }
.sk-points li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.45em; background: var(--ycc-orange); }

.sk-you { display: grid; gap: var(--kds-sp-1); margin: 0; }
.sk-you strong { font-size: var(--kds-text-lg); }

/* =============================================================================
   7. PUBLIC LANDING — /jobseeker
   ============================================================================= */
/* The two .ycc-section bands on this landing page. ycc.css still carries the
   marquee-era clamp(3.5rem, 8vw, 7rem); halved here, scoped by id so only the
   /jobseeker landing moves. */
#starting-point.ycc-section,

.skl-hero { padding-block: clamp(2.5rem, 5.5vw, 4.5rem); }
.skl-hero__grid { display: grid; gap: var(--kds-sp-6); align-items: center; }
@media (min-width: 960px) { .skl-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: var(--kds-sp-7); } }
.skl-hero__h {
  margin: 0;
  font-family: var(--kds-font-display); font-weight: 800;
  font-size: var(--kds-text-display); line-height: var(--kds-leading-display);
  letter-spacing: var(--kds-tracking-tight); text-wrap: balance;
}
.skl-hero__h em { font-style: normal; color: var(--ycc-yellow); }
.skl-hero__lead { margin: var(--kds-sp-5) 0 0; max-width: 46ch; font-size: var(--kds-text-lg); line-height: 1.55; color: var(--kds-fg-muted); text-wrap: pretty; }
.skl-hero__cta { margin-top: var(--kds-sp-6); display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); }
.skl-hero__note { margin: var(--kds-sp-4) 0 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.skl-hero__note a { color: var(--ycc-yellow); }

/* Stage index inside the hero — real counts from the route, as a plain index. */
.skl-stages { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kds-border); }
.skl-stages a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-4);
  padding: var(--kds-sp-4) 0;
  border-bottom: 1px solid var(--kds-border);
  color: inherit; text-decoration: none;
  transition: padding-inline var(--kds-dur-fast) var(--kds-ease-standard), background var(--kds-dur-fast) var(--kds-ease-standard);
}
.skl-stages a:hover { background: color-mix(in srgb, var(--kds-fg) 8%, transparent); padding-inline: var(--kds-sp-3); }
@media (prefers-reduced-motion: reduce) { .skl-stages a:hover { padding-inline: 0; } }
.skl-stages__name { font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-lg); letter-spacing: var(--kds-tracking-tight); }
.skl-stages__n { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); font-variant-numeric: tabular-nums; }

/* Flat orange fact block beside the hero */
.skl-facts {
  margin: 0; padding: var(--kds-sp-6); list-style: none;
  border-radius: var(--kds-radius-lg);
  display: grid; gap: var(--kds-sp-5);
}
.skl-facts li { display: grid; gap: var(--kds-sp-1); }
.skl-facts li + li { padding-top: var(--kds-sp-5); border-top: 1px solid var(--kds-border); }
.skl-facts__k { font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-xl); letter-spacing: var(--kds-tracking-tight); }
.skl-facts__v { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }

/* Stage detail section */
.skl-path { margin: 0; padding: 0; list-style: none; display: grid; }
.skl-path__item { border-top: 1px solid var(--kds-border); }
.skl-path__item:last-child { border-bottom: 1px solid var(--kds-border); }
.skl-path__link {
  display: grid; gap: var(--kds-sp-2) var(--kds-sp-6); align-items: baseline;
  padding: var(--kds-sp-5) 0;
  color: inherit; text-decoration: none;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard), padding-inline var(--kds-dur-fast) var(--kds-ease-standard);
}
@media (min-width: 760px) { .skl-path__link { grid-template-columns: 17rem minmax(0, 1fr) 8rem; } }
.skl-path__all { margin: var(--kds-sp-5) 0 0; font-size: var(--kds-text-sm); }
.skl-path__link:hover { background: color-mix(in srgb, var(--kds-fg) 6%, transparent); padding-inline: var(--kds-sp-4); }
@media (prefers-reduced-motion: reduce) { .skl-path__link:hover { padding-inline: 0; } }
.skl-path__name { font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-xl); letter-spacing: var(--kds-tracking-tight); line-height: 1.2; }
.skl-path__desc { color: var(--kds-fg-muted); max-width: 52ch; }
.skl-path__n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skl-path__n span { display: block; font-size: var(--kds-text-sm); font-weight: 400; color: var(--kds-fg-muted); }

/* Two-column editorial block (heading left, prose right) */
.skl-split { display: grid; gap: var(--kds-sp-6); }
@media (min-width: 900px) { .skl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--kds-sp-7); } }
.skl-split--head { align-items: start; margin-bottom: var(--kds-sp-6); }
.skl-split--head .skl-split__lead { margin-top: 0; }
/* 3rem (--kds-text-4xl) sat almost on top of verandah's 3.75rem display cap and
   flattened the hierarchy. One clear step down from the h1, leading to match. */
.skl-split__h { margin: 0; font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-3xl); line-height: 1.14; letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.skl-split__lead { margin: var(--kds-sp-5) 0 0; max-width: 46ch; font-size: var(--kds-text-lg); color: var(--kds-fg-muted); }

.skl-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kds-sp-5); }
.skl-steps li { padding-top: var(--kds-sp-4); border-top: 2px solid var(--kds-fg); }
.skl-steps h3 { margin: 0 0 var(--kds-sp-2); font-family: var(--kds-font-display); font-weight: 700; font-size: var(--kds-text-lg); letter-spacing: var(--kds-tracking-tight); }
.skl-steps p { margin: 0; color: var(--kds-fg-muted); }

/* Entry-point chips (internships, apprenticeships, will-train) */
.skl-chips { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); margin-top: var(--kds-sp-5); }
.skl-chip {
  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(--kds-radius-full);
  font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-fg); text-decoration: none;
  transition: background var(--kds-dur-fast) var(--kds-ease-standard), border-color var(--kds-dur-fast) var(--kds-ease-standard);
}
.skl-chip:hover { background: var(--ycc-orange); border-color: var(--ycc-orange); color: var(--ycc-navy); }

/* Closing block */
.skl-end { padding-block: clamp(2.25rem, 5vw, 4rem); }
.skl-end__grid { display: grid; gap: var(--kds-sp-6); align-items: center; }
@media (min-width: 860px) { .skl-end__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--kds-sp-7); } }
.skl-end__h { margin: 0; font-family: var(--kds-font-display); font-weight: 800; font-size: var(--kds-text-3xl); line-height: 1.14; letter-spacing: var(--kds-tracking-tight); }
.skl-end__p { margin: var(--kds-sp-3) 0 0; color: var(--kds-fg-muted); max-width: 50ch; }
.skl-end__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); }

/* =============================================================================
   8. Empty states — reuse .ycc-empty, tune the button spacing
   ============================================================================= */
.ycc-empty .kds-btn { margin-top: var(--kds-sp-5); }
.ycc-empty p + p { margin-top: var(--kds-sp-2); }

/* =============================================================================
   9. Motion — reveals: ~380ms, ~70ms stagger, ease-out. Never bounce.
   ============================================================================= */
[data-ycc-reveal] { transition-duration: var(--kds-dur-slow); transition-timing-function: var(--kds-ease-standard); }

/* =============================================================================
   10. Small screens — the phone pass.
   Rules of the pass: every tap target ≥44px, no text under 14px, labels and
   hints always visible, no two-column collapse that squeezes an input, and the
   sticky save bar never parked on top of the last field or the submit.
   ============================================================================= */
@media (max-width: 720px) {

  /* --- controls ---------------------------------------------------------- */
  /* KDS ships 40px controls at 14px type. 40px is under the touch floor and
     anything under 16px makes iOS Safari zoom the page the moment you focus it,
     which then leaves the form scrolled sideways. Both fixed here. */
  .sk-field .kds-input,
  .sk-field .kds-select,
  .sk-field .kds-textarea,
  .sk-form .kds-input,
  .sk-form .kds-select { min-height: 48px; font-size: var(--kds-text-md); }
  .sk-form .kds-textarea { font-size: var(--kds-text-md); line-height: 1.55; padding-block: var(--kds-sp-3); }
  .sk-field .kds-select { padding-inline-end: 2.6rem; background-position: right var(--kds-sp-4) center; }

  /* Small buttons are a desktop density. On a phone they are the primary way
     to withdraw, save, remove or download — give them the full 44px. */
  .sk__main .kds-btn--sm,
  .sk-apply .kds-btn--sm,
  .sk-resume__actions .kds-btn { min-height: 44px; padding-inline: var(--kds-sp-4); font-size: var(--kds-text-sm); }

  /* --- form rhythm -------------------------------------------------------- */
  /* Groups sit far apart, the fields inside them sit close: the hierarchy has
     to survive being read a screenful at a time. */
  .sk-form { gap: var(--kds-sp-7); }
  .sk-group { gap: var(--kds-sp-5); padding-top: var(--kds-sp-5); }
  .sk-group__body { gap: var(--kds-sp-6); }
  .sk-field { gap: var(--kds-sp-2); }
  .sk-pair { gap: var(--kds-sp-6); }
  .sk-hint, .sk-error { font-size: var(--kds-text-sm); line-height: 1.5; }
  .sk-field > label, .sk-field legend, .sk-legend { font-size: var(--kds-text-md); }
  /* An inline error must not read as one more grey hint. */
  .sk-error { display: block; padding-inline-start: var(--kds-sp-3); border-inline-start: 3px solid var(--kds-danger); }

  /* Tick lists: one per line, a full-width 48px target, 16px label. Never two
     narrow columns — a 20px box next to wrapped 14px text is a mis-tap factory. */
  .sk-checks, .sk-checks--multi { grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-1); }
  .sk-check { min-height: 48px; align-items: center; padding: var(--kds-sp-2) var(--kds-sp-3); font-size: var(--kds-text-md); }
  .sk-check input { width: 22px; height: 22px; flex: none; margin-top: 0; }
  .sk-check--card { align-items: flex-start; padding: var(--kds-sp-4); }
  .sk-check--card input { margin-top: 0.15rem; }
  .sk-switch { padding-block: var(--kds-sp-3); min-height: 48px; align-items: center; }

  .sk-file { padding: var(--kds-sp-4) var(--kds-sp-3); font-size: var(--kds-text-sm); }
  .sk-file::file-selector-button { display: block; margin: 0 0 var(--kds-sp-3); min-height: 44px; padding-inline: var(--kds-sp-4); }

  /* --- sticky save bar ---------------------------------------------------- */
  /* Opaque, not translucent: over a checkbox list a blurred bar reads as a
     second list. It bleeds to the screen edge so the buttons get the full width,
     and --sk-bar reserves the room it will cover at the end of the form. */
  .sk-form { --sk-bar: 6rem; --sk-pad: 3rem; }
  .sk-actions {
    margin-inline: calc(var(--ycc-gutter) * -1);
    padding: var(--kds-sp-4) var(--ycc-gutter) calc(var(--kds-sp-4) + env(safe-area-inset-bottom, 0px));
    background: var(--kds-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    gap: var(--kds-sp-3);
  }
  .sk-actions > .kds-btn { flex: 1 1 8rem; min-height: 50px; }
  .sk-actions__note { flex: 1 1 100%; }

  /* --- page head / rows --------------------------------------------------- */
  .sk-head { align-items: flex-start; }
  .sk-head__actions { width: 100%; }
  .sk-head__actions .kds-btn { flex: 1 1 auto; }
  /* 14px so it is readable, but deliberately shorter than the 44px button it
     sits beside — a status badge that is button-sized reads as a button. */
  .sk-tag { font-size: var(--kds-text-sm); padding: 0.1rem 0.5rem; line-height: 1.5; }

  /* A row's actions are the reason the row exists on a phone; give them their
     own line at full width rather than squeezing beside the status tag. */
  .sk-row { gap: var(--kds-sp-3); }
  .sk-row__side { width: 100%; gap: var(--kds-sp-3); }
  .sk-row__side .kds-btn { flex: 1 1 auto; }
  .sk-kv { gap: var(--kds-sp-1) var(--kds-sp-4); font-size: var(--kds-text-sm); }
  /* Small-caps labels over real data: 12px is too small to scan on a handset. */
  .sk-crit dt { font-size: var(--kds-text-sm); }
  .sk-job__actions .kds-btn { flex: 1 1 8rem; }

  .sk-hello { padding: var(--kds-sp-5) var(--kds-sp-5); }
  .sk-hello__actions .kds-btn { flex: 1 1 auto; }
  .sk-index a { padding: var(--kds-sp-4); min-height: 48px; }
  .sk-task { min-height: 44px; }
}

@media (max-width: 480px) {
  .sk-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sk-crit > div { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .sk__side, .sk-actions, .sk-job__actions { display: none !important; }
}