/* =============================================================================
   Youth Careers Canada — EMPLOYER / CONSULTANT PORTAL
   Owns: views/portal/** (landings + app screens).
   Loaded last, after kds tokens/components + css/ycc.css (+ ycc-shared.css on
   the landings, ycc-maps.css in the app).

   v2 editorial poster direction (docs/CONTRACT.md §2):
     flat navy / orange blocks · 12px cards, 8px fields · obvious type hierarchy
     no gradients · no nested cards · no identical 3-card grids · no eyebrow pills
     150ms hover, 160ms press, ease-out, never bounce.
   Tokens only — no raw hex, no raw duration.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   0. Small shared atoms (namespaced — never touch global .small/.muted, which
      belong to the shared landing partials in ycc-shared.css).
   -------------------------------------------------------------------------- */
.pf-sm    { font-size: var(--kds-text-sm); }
.pf-xs    { font-size: var(--kds-text-xs); }
.pf-dim   { color: var(--kds-fg-muted); }
.pf-faint { color: var(--kds-fg-faint); }
.pf-b     { font-weight: 700; }
.pf-mono  { font-variant-numeric: tabular-nums; }

/* One dotted line of facts: "Toronto, ON · 35 hrs/week · 12 applicants". */
.pf-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--kds-sp-2); margin: 0; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.pf-facts > * { display: inline-flex; align-items: baseline; gap: var(--kds-sp-2); }
.pf-facts > *:not(:last-child)::after { content: "·"; margin-inline-start: var(--kds-sp-2); color: var(--kds-fg-faint); }

.pf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-2); }
.pf-cluster--tight { gap: var(--kds-sp-1) var(--kds-sp-2); }
.pf-stack { display: grid; gap: var(--kds-sp-4); }
.pf-inline { display: inline; margin: 0; }

.pf-link { color: var(--kds-fg); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--kds-fg) 35%, transparent); font-weight: 600; }
.pf-link:hover { text-decoration-color: var(--ycc-orange); }

.pf-rule { height: 1px; border: 0; margin: var(--kds-sp-6) 0; background: var(--kds-border); }

/* Posting ID — a real identifier, so it gets a monospaced, boxed treatment. */
.pf-pid { display: inline-flex; align-items: center; padding: 0.1rem 0.4rem; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-xs); background: var(--kds-surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82em; letter-spacing: 0.02em; color: var(--kds-fg); }

/* =============================================================================
   1. APP SHELL  (body.portal)
   ========================================================================== */
.pf-shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3.25rem); padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(3rem, 6vw, 5rem); align-items: start; }
.pf-main { min-width: 0; }

/* ---- side nav ------------------------------------------------------------ */
.pf-side { position: sticky; top: calc(var(--kds-sp-6) + 3.5rem); display: grid; gap: 2px; }
.pf-side__link {
  position: relative; display: flex; align-items: center; min-height: 44px;
  padding: 0 var(--kds-sp-3); border-radius: var(--kds-radius-md);
  color: var(--kds-fg-muted); text-decoration: none;
  font-size: var(--kds-text-sm); font-weight: 600; white-space: nowrap;
  transition: color var(--kds-dur-fast) var(--kds-ease-standard), background var(--kds-dur-fast) var(--kds-ease-standard);
}
.pf-side__link:hover { color: var(--kds-fg); background: var(--kds-surface-3); }
.pf-side__link.is-active { color: var(--kds-fg); background: var(--kds-surface-3); }
.pf-side__link.is-active::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--ycc-orange); }
.pf-side__sep { margin: var(--kds-sp-3) var(--kds-sp-3) var(--kds-sp-2); height: 1px; background: var(--kds-border); }

@media (max-width: 900px) {
  .pf-shell { grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-5); }
  .pf-side {
    position: static; grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--kds-sp-1);
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--ycc-gutter) * -1); padding-inline: var(--ycc-gutter);
    border-bottom: 1px solid var(--kds-border);
  }
  .pf-side::-webkit-scrollbar { display: none; }
  .pf-side__link { border-radius: 0; padding-inline: var(--kds-sp-3); }
  .pf-side__link.is-active { background: transparent; }
  .pf-side__link.is-active::before { inset-inline: var(--kds-sp-2); top: auto; bottom: 0; width: auto; height: 3px; }
  .pf-side__sep { display: none; }
}

/* ---- page head ----------------------------------------------------------- */
.pf-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); }
.pf-head__body { min-width: 0; max-width: 62ch; }
.pf-head__h { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-3xl); font-weight: 800; line-height: var(--kds-leading-tight); letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.pf-head__where { margin: 0 0 var(--kds-sp-2); font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--kds-fg-muted); }
.pf-head__meta { margin: var(--kds-sp-3) 0 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.55; }
.pf-head__meta a { color: var(--kds-fg); }
.pf-head__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); }
@media (max-width: 560px) { .pf-head__actions { width: 100%; } .pf-head__actions > * { flex: 1 1 auto; } }

/* Section heading inside a page. */
.pf-h2 { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.pf-h3 { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; }
.pf-secbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-4); margin-bottom: var(--kds-sp-3); }
.pf-secbar a { font-size: var(--kds-text-sm); }
.pf-block { margin-top: clamp(2rem, 4vw, 3rem); }
.pf-block--tight { margin-top: var(--kds-sp-6); }

/* ---- notices (never nested inside a card) -------------------------------- */
.pf-note { display: flex; gap: var(--kds-sp-3); align-items: flex-start; padding: var(--kds-sp-4); border: 1px solid var(--kds-border); border-inline-start: 3px solid var(--kds-fg-muted); border-radius: var(--kds-radius-md); background: var(--kds-surface); font-size: var(--kds-text-sm); line-height: 1.55; }
.pf-note + .pf-note { margin-top: var(--kds-sp-3); }
.pf-note--warn { border-inline-start-color: var(--ycc-orange); background: var(--kds-brand-soft); }
.pf-note--error { border-inline-start-color: var(--kds-danger); background: var(--kds-danger-soft); }
.pf-note svg { flex: none; margin-top: 2px; }

/* ---- empty states -------------------------------------------------------- */
.pf-empty { padding: clamp(1.75rem, 4vw, 2.75rem) var(--kds-sp-5); border: 1px dashed var(--kds-border-strong); border-radius: var(--kds-radius-lg); background: var(--kds-surface-2); }
.pf-empty__h { margin: 0 0 var(--kds-sp-2); font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; }
.pf-empty p { margin: 0; max-width: 54ch; color: var(--kds-fg-muted); font-size: var(--kds-text-sm); }
.pf-empty .kds-btn { margin-top: var(--kds-sp-4); }
.pf-empty--sm { padding: var(--kds-sp-4); }

/* =============================================================================
   2. FIGURES STRIP — five numbers on one flat panel, divided by hairlines.
      (Deliberately not five identical cards.)
   ========================================================================== */
.pf-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); background: var(--kds-surface); overflow: hidden; }
.pf-figure { padding: var(--kds-sp-4) var(--kds-sp-5); border-inline-start: 1px solid var(--kds-border); }
.pf-figure:first-child { border-inline-start: 0; }
.pf-figure__v { display: block; font-family: var(--kds-font-display); font-size: var(--kds-text-3xl); font-weight: 800; line-height: 1; letter-spacing: var(--kds-tracking-tight); font-variant-numeric: tabular-nums; }
.pf-figure__l { display: block; margin-top: var(--kds-sp-2); font-size: var(--kds-text-xs); color: var(--kds-fg-muted); line-height: 1.35; }
.pf-figure--act .pf-figure__v { color: var(--ycc-orange); }
[data-kds-theme="dark"] .pf-figure--act .pf-figure__v { color: var(--ycc-yellow); }
@media (prefers-color-scheme: dark) { :root:not([data-kds-theme="light"]) .pf-figure--act .pf-figure__v { color: var(--ycc-yellow); } }
@media (max-width: 1080px) { .pf-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-figure:nth-child(3n+1) { border-inline-start: 0; } .pf-figure:nth-child(n+4) { border-top: 1px solid var(--kds-border); } }
@media (max-width: 620px) { .pf-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-figure { border-inline-start: 1px solid var(--kds-border); border-top: 0; } .pf-figure:nth-child(odd) { border-inline-start: 0; } .pf-figure:nth-child(n+3) { border-top: 1px solid var(--kds-border); } .pf-figure__v { font-size: var(--kds-text-2xl); } }

/* =============================================================================
   3. "NEEDS YOUR ATTENTION" — one flat navy block, only when there is something.
   ========================================================================== */
.pf-todo { border-radius: var(--kds-radius-lg); padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); }
.pf-todo__h { margin: 0 0 var(--kds-sp-1); font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; }
.pf-todo__lead { margin: 0 0 var(--kds-sp-4); font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
.pf-todo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kds-sp-2); }
.pf-todo__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kds-sp-2) var(--kds-sp-3); padding-block: var(--kds-sp-2); border-top: 1px solid var(--kds-border); font-size: var(--kds-text-sm); }
.pf-todo__list li:first-child { border-top: 0; }
.pf-todo__n { font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 800; line-height: 1; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--ycc-yellow); }
.pf-todo a { color: var(--ycc-yellow); font-weight: 600; }

/* =============================================================================
   4. HAIRLINE ROW LIST — the alternative to a grid of cards.
   ========================================================================== */
.pf-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kds-border); }
.pf-rows > li { border-bottom: 1px solid var(--kds-border); }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kds-sp-2) var(--kds-sp-5); align-items: start; padding: var(--kds-sp-4) var(--kds-sp-2); transition: background var(--kds-dur-fast) var(--kds-ease-standard); }
.pf-rows > li:hover .pf-row { background: var(--kds-surface-3); }
.pf-row__main { min-width: 0; display: grid; gap: var(--kds-sp-1); }
.pf-row__title { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-md); font-weight: 700; line-height: 1.3; }
.pf-row__title a { color: var(--kds-fg); text-decoration: none; }
.pf-row__title a:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-color: var(--ycc-orange); }
.pf-row__side { display: grid; justify-items: end; gap: var(--kds-sp-2); text-align: end; }
.pf-row__actions { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); justify-content: flex-end; }
@media (max-width: 720px) {
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-row__side { justify-items: start; text-align: start; }
  .pf-row__actions { justify-content: flex-start; }
}

/* company cell (logo + name) */
.pf-co { display: flex; align-items: center; gap: var(--kds-sp-3); min-width: 0; }
.pf-logo { width: 40px; height: 40px; flex: none; object-fit: contain; background: var(--kds-surface-2); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); padding: 3px; }
.pf-logo--lg { width: 52px; height: 52px; }
.pf-logo--ph { display: grid; place-items: center; font-family: var(--kds-font-display); font-weight: 800; color: var(--kds-fg-muted); }

/* =============================================================================
   5. STATUS — legible WITHOUT colour: each status has its own mark and border.
   ========================================================================== */
.pf-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.18rem 0.55rem 0.18rem 0.45rem;
  border: 1px solid var(--kds-border-strong); border-radius: var(--kds-radius-sm);
  background: var(--kds-surface-2); color: var(--kds-fg);
  font-size: var(--kds-text-xs); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.pf-status svg { flex: none; }
.pf-status[data-status="active"]          { border-color: var(--kds-positive); background: var(--kds-positive-soft); }
.pf-status[data-status="pending_payment"] { border-color: var(--ycc-orange); background: var(--kds-brand-soft); }
.pf-status[data-status="draft"]           { border-style: dashed; background: transparent; color: var(--kds-fg-muted); }
.pf-status[data-status="inactive"]        { border-color: var(--kds-border-strong); background: var(--kds-surface-3); }
.pf-status[data-status="expired"],
.pf-status[data-status="cancelled"]       { border-color: var(--kds-danger); background: var(--kds-danger-soft); color: var(--kds-fg); }
/* A second, quieter note that rides beside a status (e.g. "Ends 4 Oct"). */
.pf-status--note { border-style: dotted; background: transparent; font-weight: 600; color: var(--kds-fg-muted); }
.pf-status--closed { border-color: var(--kds-danger); background: transparent; color: var(--kds-fg); }

/* Applicant status: same no-colour-only rule, different shape (pill). */
.pf-appstatus { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.6rem; border: 1px solid var(--kds-border-strong); border-radius: var(--kds-radius-full); background: var(--kds-surface-2); font-size: var(--kds-text-xs); font-weight: 700; white-space: nowrap; }
.pf-appstatus::before { content: ""; width: 7px; height: 7px; flex: none; background: currentColor; }
.pf-appstatus[data-s="submitted"]::before   { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.pf-appstatus[data-s="viewed"]::before      { border-radius: 50%; }
.pf-appstatus[data-s="shortlisted"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pf-appstatus[data-s="rejected"]::before    { clip-path: polygon(20% 0,50% 35%,80% 0,100% 20%,65% 50%,100% 80%,80% 100%,50% 65%,20% 100%,0 80%,35% 50%,0 20%); }
.pf-appstatus[data-s="hired"]::before       { clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); width: 9px; height: 9px; }
.pf-appstatus[data-s="shortlisted"], .pf-appstatus[data-s="hired"] { border-color: var(--kds-positive); background: var(--kds-positive-soft); }
.pf-appstatus[data-s="rejected"] { border-color: var(--kds-danger); background: var(--kds-danger-soft); }
.pf-appstatus[data-s="viewed"] { border-color: var(--ycc-orange); background: var(--kds-brand-soft); }

/* =============================================================================
   6. TAB STRIP (jobs by status) — hairline underline, not a row of chips.
   ========================================================================== */
.pf-tabs { display: flex; gap: var(--kds-sp-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--kds-border); }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { position: relative; display: inline-flex; align-items: center; gap: var(--kds-sp-2); min-height: 44px; padding-inline: var(--kds-sp-3); color: var(--kds-fg-muted); text-decoration: none; font-size: var(--kds-text-sm); font-weight: 600; white-space: nowrap; transition: color var(--kds-dur-fast) var(--kds-ease-standard); }
.pf-tab:hover { color: var(--kds-fg); }
.pf-tab.is-active { color: var(--kds-fg); }
.pf-tab.is-active::after { content: ""; position: absolute; inset-inline: var(--kds-sp-2); bottom: -1px; height: 3px; background: var(--ycc-orange); }
.pf-tab__n { font-variant-numeric: tabular-nums; font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }
.pf-tab.is-active .pf-tab__n { color: var(--kds-fg); }

/* company picker (consultant) */
.pf-picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-2); margin-bottom: var(--kds-sp-4); }
.pf-picker__l { font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kds-fg-muted); }
.pf-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--kds-sp-3); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-full); 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), border-color var(--kds-dur-fast) var(--kds-ease-standard); }
.pf-chip:hover { border-color: var(--kds-border-strong); background: var(--kds-surface-3); }
.pf-chip.is-active { background: var(--ycc-navy); border-color: var(--ycc-navy); color: var(--ycc-ivory); }
[data-kds-theme="dark"] .pf-chip.is-active { background: var(--ycc-orange); border-color: var(--ycc-orange); color: var(--ycc-navy); }
@media (prefers-color-scheme: dark) { :root:not([data-kds-theme="light"]) .pf-chip.is-active { background: var(--ycc-orange); border-color: var(--ycc-orange); color: var(--ycc-navy); } }

/* =============================================================================
   7. FORMS — long, high-stakes. Section label left, fields right.
   ========================================================================== */
.pf-form { margin-top: var(--kds-sp-5); }
.pf-sec { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--kds-sp-4) clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--kds-border); }
.pf-sec:first-of-type { border-top: 0; padding-top: var(--kds-sp-5); }
.pf-sec__head { min-width: 0; }
.pf-sec__h { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.pf-sec__note { margin: var(--kds-sp-2) 0 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.5; max-width: 34ch; }
.pf-sec__body { min-width: 0; display: grid; gap: var(--kds-sp-5); align-content: start; }
@media (max-width: 860px) { .pf-sec { grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-4); } }

/* `display: grid` on a field would beat the UA's [hidden] rule, and this form leans on
   [hidden] for every progressive-disclosure block — so [hidden] wins, always. */
[hidden] { display: none !important; }
.pf-field { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.pf-field > label, .pf-label { font-size: var(--kds-text-sm); font-weight: 600; color: var(--kds-fg); }
.pf-field .kds-input, .pf-field .kds-select, .pf-field .kds-textarea { border-radius: var(--kds-radius-md); }
.pf-opt { font-weight: 500; color: var(--kds-fg-muted); }
.pf-req { color: var(--kds-danger); font-weight: 700; }
.pf-hint { font-size: var(--kds-text-xs); line-height: 1.45; color: var(--kds-fg-muted); }
.pf-hint a { color: var(--kds-fg); }
.pf-hint--lead { font-size: var(--kds-text-sm); margin: 0; }
.pf-err { display: flex; align-items: flex-start; gap: 0.35rem; font-size: var(--kds-text-xs); font-weight: 600; color: var(--kds-danger); }
.pf-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 14px; height: 14px; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; }
.pf-err--block { padding: var(--kds-sp-3); border: 1px solid var(--kds-danger); border-radius: var(--kds-radius-md); background: var(--kds-danger-soft); font-size: var(--kds-text-sm); }
.pf-field [aria-invalid="true"], .pf-addr [aria-invalid="true"] { border-color: var(--kds-danger); }
.pf-field--sub { padding-inline-start: var(--kds-sp-4); border-inline-start: 2px solid var(--kds-border); }

.pf-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kds-sp-4); }
.pf-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kds-sp-4); }
@media (max-width: 720px) { .pf-2, .pf-3 { grid-template-columns: minmax(0, 1fr); } }

.pf-fieldset { display: grid; gap: var(--kds-sp-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-fieldset > legend { padding: 0; font-size: var(--kds-text-sm); font-weight: 600; }

/* checkbox row / tile */
.pf-checks { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3) var(--kds-sp-5); }
.pf-check { display: inline-flex; align-items: center; gap: var(--kds-sp-2); min-height: 44px; font-size: var(--kds-text-sm); cursor: pointer; }
.pf-check input { width: 20px; height: 20px; flex: none; accent-color: var(--ycc-orange); }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--kds-sp-3); }
.pf-tile { display: flex; align-items: flex-start; gap: var(--kds-sp-3); padding: var(--kds-sp-3) var(--kds-sp-4); border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); background: var(--kds-surface); cursor: pointer; transition: border-color var(--kds-dur-fast) var(--kds-ease-standard), background var(--kds-dur-fast) var(--kds-ease-standard); }
.pf-tile:hover { border-color: var(--kds-border-strong); }
.pf-tile input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--ycc-orange); }
.pf-tile:has(input:checked) { border-color: var(--ycc-orange); background: var(--kds-brand-soft); }
.pf-tile__b { display: grid; gap: 2px; min-width: 0; }
.pf-tile__t { font-size: var(--kds-text-sm); font-weight: 700; display: flex; align-items: center; gap: var(--kds-sp-2); flex-wrap: wrap; }
.pf-tile__s { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); line-height: 1.4; }

/* locked field (published postings) */
.pf-locked { display: flex; align-items: center; gap: var(--kds-sp-2); min-height: var(--kds-control-h); padding: var(--kds-sp-2) var(--kds-sp-3); border: 1px dashed var(--kds-border-strong); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); font-size: var(--kds-text-sm); font-weight: 600; }
.pf-locked--plain { border-style: solid; font-weight: 500; }
.pf-locked ul { margin: 0; padding-inline-start: 1.1rem; font-weight: 500; }
.pf-locked svg { flex: none; color: var(--kds-fg-muted); }

/* "add a new location" disclosure */
.pf-more { border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); }
.pf-more > summary { display: flex; align-items: center; gap: var(--kds-sp-2); min-height: 44px; padding-inline: var(--kds-sp-4); font-size: var(--kds-text-sm); font-weight: 700; cursor: pointer; list-style: none; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary::before { content: "+"; font-size: var(--kds-text-lg); line-height: 1; }
.pf-more[open] > summary::before { content: "–"; }
.pf-more__body { display: grid; gap: var(--kds-sp-4); padding: 0 var(--kds-sp-4) var(--kds-sp-4); }

/* address block */
.pf-addr { display: grid; gap: var(--kds-sp-4); }

/* sticky save bar */
.pf-bar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kds-sp-3); margin-top: var(--kds-sp-6); padding: var(--kds-sp-4) 0; background: var(--kds-bg); border-top: 2px solid var(--kds-fg); }
.pf-bar__spacer { margin-inline-start: auto; }
/* A floor, never a cap. This descendant selector (0,2,0) outranks .kds-btn--lg
   (0,1,0) on the same element, so writing a flat `min-height: 46px` here would
   quietly shrink any --lg button dropped into the bar. max() keeps it a floor. */
.pf-bar .kds-btn { min-height: max(46px, calc(var(--kds-control-h) + 8px)); }
.pf-bar__short { display: none; }
/* The bar floats over the form for as long as the form is on screen, so the
   form must end with room for it or it parks on the last field. Seen at 390px
   on /consultant/jobs/new: the bar sat across the "Pay to (CAD)" input. */
.pf-form { --pf-bar-h: 0px; --pf-bar-pad: 0px; }
.pf-form > .pf-sec:last-of-type { padding-bottom: var(--pf-bar-pad); }
.pf-form .pf-field { scroll-margin-block-end: calc(var(--pf-bar-h) + var(--kds-sp-4)); }
@media (max-width: 560px) {
  .pf-bar { margin-inline: calc(var(--ycc-gutter) * -1); padding-inline: var(--ycc-gutter); }
  .pf-bar > .kds-btn { flex: 1 1 auto; }
  .pf-bar__spacer { margin-inline-start: 0; }
  .pf-bar__long { display: none; }
  .pf-bar__short { display: inline; }
}

/* logo upload */
.pf-logofield { display: flex; align-items: center; gap: var(--kds-sp-4); }
.pf-logofield__prev { width: 64px; height: 64px; flex: none; object-fit: contain; border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); padding: 4px; }
.pf-logofield__c { display: grid; gap: var(--kds-sp-2); min-width: 0; flex: 1; }
input[type="file"].kds-input { padding-block: 0.55rem; height: auto; }

/* repeatable operating names */
.pf-names { display: grid; gap: var(--kds-sp-2); }
.pf-names__row { display: flex; align-items: center; gap: var(--kds-sp-2); }
.pf-names__row .kds-input { flex: 1; min-width: 0; }
.pf-names__note { font-size: var(--kds-text-xs); color: var(--kds-fg-muted); white-space: nowrap; }

/* =============================================================================
   8. PANELS — one level only. Never a card inside a card.
   ========================================================================== */
.pf-panel { border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); background: var(--kds-surface); padding: clamp(1.1rem, 2.5vw, 1.5rem); }
.pf-panel__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kds-sp-3); margin: 0 0 var(--kds-sp-4); }
.pf-panel__h h2, .pf-panel__h h3 { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; }
.pf-panel .pf-rows { margin-inline: calc(var(--kds-sp-2) * -1); }
.pf-panel > :last-child { margin-bottom: 0; }

/* definition list of facts */
.pf-dl { display: grid; margin: 0; border-top: 1px solid var(--kds-border); }
.pf-dl > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--kds-sp-2) var(--kds-sp-4); padding: var(--kds-sp-3) 0; border-bottom: 1px solid var(--kds-border); }
.pf-dl dt { margin: 0; font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kds-fg-muted); display: flex; align-items: center; gap: 0.3rem; }
.pf-dl dd { margin: 0; font-size: var(--kds-text-sm); min-width: 0; }
.pf-dl ul { margin: 0; padding-inline-start: 1.05rem; }
.pf-dl li + li { margin-top: 0.2rem; }
@media (max-width: 560px) { .pf-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: var(--kds-sp-3); } }

/* prose (description / requirements / cover letters) */
.pf-prose { font-size: var(--kds-text-md); line-height: 1.65; max-width: 68ch; }
.pf-prose p { margin: 0 0 1em; }
.pf-prose > :last-child { margin-bottom: 0; }
.pf-prose--clamp { max-height: 22rem; overflow: hidden; position: relative; }
.pf-prose--clamp.is-open { max-height: none; }
.pf-prose--clamp:not(.is-open)::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--kds-border); }

/* seeker-eye preview of a posting */
.pf-preview { border: 2px solid var(--kds-fg); border-radius: var(--kds-radius-lg); padding: clamp(1rem, 2.5vw, 1.4rem); background: var(--kds-surface); }
.pf-preview__tag { margin: 0 0 var(--kds-sp-3); font-size: var(--kds-text-xs); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--kds-fg-muted); }
.pf-preview__title { margin: var(--kds-sp-2) 0; font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 800; letter-spacing: var(--kds-tracking-tight); }
.pf-preview__pay { font-weight: 700; color: var(--kds-fg); }
.pf-preview__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--kds-sp-2) var(--kds-sp-4); margin-top: var(--kds-sp-4); padding-top: var(--kds-sp-3); border-top: 1px solid var(--kds-border); font-size: var(--kds-text-xs); color: var(--kds-fg-muted); }

/* timeline */
.pf-time { list-style: none; margin: 0; padding: 0; }
.pf-time li { position: relative; display: flex; justify-content: space-between; gap: var(--kds-sp-3); padding: var(--kds-sp-2) 0 var(--kds-sp-2) var(--kds-sp-5); font-size: var(--kds-text-sm); }
.pf-time li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 0.85rem; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--kds-border-strong); background: var(--kds-surface); }
.pf-time li::after { content: ""; position: absolute; inset-inline-start: 7px; top: 1.6rem; bottom: -0.35rem; width: 1px; background: var(--kds-border); }
.pf-time li:last-child::after { display: none; }
.pf-time li.is-done::before { background: var(--kds-fg); border-color: var(--kds-fg); }
.pf-time li.is-future::before { border-style: dashed; }
.pf-time li.is-bad::before { background: var(--kds-danger); border-color: var(--kds-danger); }
.pf-time__at { color: var(--kds-fg-muted); font-variant-numeric: tabular-nums; text-align: end; }

/* action stack on the job page */
.pf-actions { display: grid; gap: var(--kds-sp-2); }
.pf-actions form { margin: 0; display: grid; }
.pf-actions__row { display: flex; gap: var(--kds-sp-2); }
.pf-actions__row > * { flex: 1; display: grid; }
.pf-danger-text { color: var(--kds-danger); }

/* applicants */
.pf-app { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 17rem); gap: var(--kds-sp-4) var(--kds-sp-5); padding: var(--kds-sp-5) var(--kds-sp-2); align-items: start; }
.pf-app__who { min-width: 0; display: grid; gap: 0.3rem; }
.pf-app__name { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-lg); font-weight: 700; line-height: 1.2; }
.pf-app__contact { display: grid; gap: 2px; font-size: var(--kds-text-sm); }
.pf-app__contact a { color: var(--kds-fg); }
.pf-app__mid { min-width: 0; display: grid; gap: var(--kds-sp-3); }
.pf-app__form { display: grid; gap: var(--kds-sp-2); }
.pf-app__form .kds-textarea { min-height: 4.5rem; font-size: var(--kds-text-sm); }
.pf-docs { display: flex; flex-wrap: wrap; gap: var(--kds-sp-2); }
.pf-cover { border: 1px solid var(--kds-border); border-radius: var(--kds-radius-md); background: var(--kds-surface-2); }
.pf-cover > summary { min-height: 40px; display: flex; align-items: center; padding-inline: var(--kds-sp-3); font-size: var(--kds-text-sm); font-weight: 600; cursor: pointer; }
.pf-cover__b { padding: 0 var(--kds-sp-3) var(--kds-sp-3); font-size: var(--kds-text-sm); line-height: 1.6; }
@media (max-width: 1000px) { .pf-app { grid-template-columns: minmax(0, 1fr); } }

/* filter bar */
.pf-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kds-sp-3); margin-bottom: var(--kds-sp-5); }
.pf-filters .pf-field { min-width: 13rem; flex: 0 1 18rem; }

/* =============================================================================
   9. LANDING PAGES  (body.portal-landing)  — /employer and /consultant
   ========================================================================== */
.pl-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.pl-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.pl-hero__h { margin: 0; font-family: var(--kds-font-display); font-size: clamp(2.35rem, 6.2vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; }
.pl-hero__h em { font-style: normal; text-decoration: underline; text-decoration-color: var(--ycc-yellow); text-decoration-thickness: 0.085em; text-underline-offset: 0.16em; text-decoration-skip-ink: none; }
.pl-hero__lead { margin: clamp(1rem, 2vw, 1.5rem) 0 0; max-width: 46ch; font-size: var(--kds-text-lg); line-height: 1.55; color: var(--kds-fg-muted); }
.pl-hero__cta { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); margin-top: clamp(1.5rem, 3vw, 2rem); }
.pl-hero__cta .kds-btn { min-height: 50px; padding-inline: var(--kds-sp-6); font-size: var(--kds-text-md); }
.pl-hero__fine { margin: var(--kds-sp-3) 0 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); }
@media (max-width: 900px) { .pl-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pl-hero__cta { display: grid; } .pl-hero__cta .kds-btn { width: 100%; } }

/* the price block sitting beside the headline — flat orange, navy ink */
.pl-price { border-radius: var(--kds-radius-lg); padding: clamp(1.25rem, 3vw, 1.75rem); }
.pl-price__k { margin: 0; font-size: var(--kds-text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.pl-price__v { margin: var(--kds-sp-2) 0 0; font-family: var(--kds-font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.pl-price__v span { font-size: var(--kds-text-md); font-weight: 700; letter-spacing: 0; }
.pl-price__dl { display: grid; margin: var(--kds-sp-4) 0 0; }
.pl-price__dl > div { display: flex; justify-content: space-between; gap: var(--kds-sp-3); padding: 0.45rem 0; border-top: 1px solid color-mix(in srgb, var(--ycc-navy) 22%, transparent); font-size: var(--kds-text-sm); }
.pl-price__dl dt { margin: 0; font-weight: 600; }
.pl-price__dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-price__dl > div:last-child { font-size: var(--kds-text-md); }

/* a flat navy fact band */
.pl-band { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.pl-band__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kds-sp-4) clamp(1rem, 3vw, 2.5rem); }
.pl-band__i { display: grid; gap: 0.25rem; padding-inline-start: var(--kds-sp-4); border-inline-start: 2px solid var(--ycc-orange); }
.pl-band__v { font-family: var(--kds-font-display); font-size: var(--kds-text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--kds-tracking-tight); }
.pl-band__l { font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.4; }
@media (max-width: 760px) { .pl-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "what you get" — hairline list, two columns of text per row */
.pl-what { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.pl-what__h { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-4xl); font-weight: 800; line-height: 1.05; letter-spacing: var(--kds-tracking-tight); text-wrap: balance; }
.pl-what__lead { margin: var(--kds-sp-4) 0 0; font-size: var(--kds-text-md); color: var(--kds-fg-muted); line-height: 1.6; max-width: 38ch; }
.pl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--kds-border); }
.pl-list > li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--kds-sp-2) clamp(1rem, 3vw, 2.5rem); padding: var(--kds-sp-4) 0; border-bottom: 1px solid var(--kds-border); }
.pl-list__t { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-md); font-weight: 700; line-height: 1.3; }
.pl-list__d { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.6; }
@media (max-width: 860px) { .pl-what { grid-template-columns: minmax(0, 1fr); } .pl-list > li { grid-template-columns: minmax(0, 1fr); } }

/* a real, numbered sequence (the one place numbering is honest) */
.pl-steps { list-style: none; counter-reset: s; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--kds-border); }
.pl-steps > li { counter-increment: s; display: grid; grid-template-columns: 3.5rem minmax(0, 15rem) minmax(0, 1fr); gap: var(--kds-sp-2) clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding: clamp(1rem, 2.5vw, 1.5rem) 0; border-bottom: 1px solid var(--kds-border); }
.pl-steps > li::before { content: counter(s, decimal-leading-zero); font-family: var(--kds-font-display); font-size: var(--kds-text-2xl); font-weight: 800; color: var(--ycc-orange); font-variant-numeric: tabular-nums; }
.pl-steps__t { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-xl); font-weight: 700; letter-spacing: var(--kds-tracking-tight); }
.pl-steps__d { margin: 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.6; max-width: 62ch; }
@media (max-width: 860px) { .pl-steps > li { grid-template-columns: 2.75rem minmax(0, 1fr); } .pl-steps__d { grid-column: 2; } }

/* closing call to action, on navy */
.pl-close { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.pl-close__h { margin: 0; font-family: var(--kds-font-display); font-size: var(--kds-text-4xl); font-weight: 800; line-height: 1.05; letter-spacing: var(--kds-tracking-tight); }
.pl-close__p { margin: var(--kds-sp-3) 0 0; max-width: 56ch; color: var(--kds-fg-muted); font-size: var(--kds-text-md); line-height: 1.6; }
.pl-close__p a { color: var(--ycc-yellow); }
.pl-close__cta { display: flex; flex-wrap: wrap; gap: var(--kds-sp-3); }
.pl-close__cta .kds-btn { min-height: 50px; padding-inline: var(--kds-sp-6); }
@media (max-width: 860px) { .pl-close { grid-template-columns: minmax(0, 1fr); } }

/* a two-column explainer used on the consultant page */
.pl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .pl-split { grid-template-columns: minmax(0, 1fr); } }
.pl-frame { border: 1px solid var(--kds-border); border-radius: var(--kds-radius-lg); background: var(--kds-surface); padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.pl-frame__h { margin: 0 0 var(--kds-sp-3); font-family: var(--kds-font-display); font-size: var(--kds-text-md); font-weight: 700; }
.pl-tree { list-style: none; margin: 0; padding: 0; }
.pl-tree > li { position: relative; padding: 0 0 var(--kds-sp-3) var(--kds-sp-5); }
.pl-tree > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55rem; width: 10px; height: 2px; background: var(--ycc-orange); }
.pl-tree > li::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--kds-border); }
.pl-tree > li:last-child::after { bottom: auto; height: 0.55rem; }
.pl-tree__t { font-size: var(--kds-text-sm); font-weight: 700; }
.pl-tree__d { margin: 2px 0 0; font-size: var(--kds-text-sm); color: var(--kds-fg-muted); line-height: 1.5; }

/* =============================================================================
   10. Motion budget — settle quickly, never bounce, honour reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pf-side__link, .pf-row, .pf-tab, .pf-chip, .pf-tile { transition: none; }
}

/* -----------------------------------------------------------------------------
   11. A very small set of spacing utilities (used only by the portal views).
   -------------------------------------------------------------------------- */
.pf-mt-1 { margin-top: var(--kds-sp-1); }
.pf-mt-2 { margin-top: var(--kds-sp-2); }
.pf-mt-4 { margin-top: var(--kds-sp-4); }
.pf-mt-5 { margin-top: var(--kds-sp-5); }
.pf-f    { margin: 0; }

/* The profile location editor folds away behind "Add a location" (public/js/portal.js). */
#loc-editor.is-collapsed { display: none; }
/* Without JS the "Add a location" link is a plain in-page anchor, so :target reopens it. */
#loc-editor.is-collapsed:target { display: block; }

/* In the narrow side rail a two-column definition list squeezes the value, so stack it. */
.pf-panel .pf-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

/* The cover-letter disclosure needs a visible affordance. */
.pf-cover > summary { justify-content: space-between; gap: var(--kds-sp-3); list-style: none; }
.pf-cover > summary::-webkit-details-marker { display: none; }
.pf-cover > summary::after { content: "+"; font-size: var(--kds-text-lg); line-height: 1; color: var(--kds-fg-muted); }
.pf-cover[open] > summary::after { content: "–"; }

/* =============================================================================
   12. PHONES — the job posting form is the hardest screen in the product to
   fill in one-handed, so it sets the rules for the rest of the portal:
   every target ≥44px, nothing under 14px, labels and hints always on screen,
   no two-column collapse that squeezes an input, and the sticky save bar never
   sitting on the last field or the submit.
   ========================================================================== */
@media (max-width: 720px) {

  /* --- controls ---------------------------------------------------------- */
  /* KDS controls are 40px tall at 14px type — a desktop density. 40px is under
     the touch floor, and iOS Safari zooms the page on focus for anything under
     16px, which leaves a long form scrolled sideways for the rest of the session. */
  .pf-field .kds-input,
  .pf-field .kds-select,
  .pf-addr .kds-input,
  .pf-addr .kds-select,
  .pf-names__row .kds-input { min-height: 48px; font-size: var(--kds-text-md); }
  .pf-field .kds-textarea { min-height: 9rem; font-size: var(--kds-text-md); line-height: 1.55; padding-block: var(--kds-sp-3); }
  .pf-field .kds-select { padding-inline-end: 2.6rem; background-position: right var(--kds-sp-4) center; }
  input[type="file"].kds-input { min-height: 48px; padding-block: var(--kds-sp-2); }

  /* On a phone the --sm buttons are the row actions — View, Edit, Repost,
     Download resume, Withdraw. They are the whole point of the row. */
  .pf-main .kds-btn--sm,
  .pf-row__actions .kds-btn { min-height: 44px; padding-inline: var(--kds-sp-4); font-size: var(--kds-text-sm); }

  /* --- form rhythm and legibility ---------------------------------------- */
  .pf-sec { padding-block: var(--kds-sp-6); gap: var(--kds-sp-4); }
  .pf-sec__body { gap: var(--kds-sp-6); }
  .pf-sec__note { max-width: none; font-size: var(--kds-text-sm); }
  .pf-field { gap: var(--kds-sp-2); }
  .pf-field > label, .pf-label, .pf-fieldset > legend { font-size: var(--kds-text-md); }
  /* 12px hints under a 16px label read as fine print people skip. These hints
     carry the rules the form validates on, so they go up to 14px. */
  .pf-hint, .pf-err, .pf-tile__s, .pf-locked, .pf-names__note { font-size: var(--kds-text-sm); line-height: 1.5; }
  /* And an inline error has to be unmistakable next to five grey hints. */
  .pf-err { padding: var(--kds-sp-2) var(--kds-sp-3); border-inline-start: 3px solid var(--kds-danger); background: var(--kds-danger-soft); border-radius: var(--kds-radius-sm); }
  .pf-err::before { margin-top: 2px; }
  .pf-2, .pf-3 { gap: var(--kds-sp-6); }
  .pf-field--sub { padding-inline-start: var(--kds-sp-3); }

  /* Tick lists and tiles: one per line, full width, 48px tall. */
  .pf-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kds-sp-1); }
  .pf-check { min-height: 48px; font-size: var(--kds-text-md); }
  .pf-check input, .pf-tile input { width: 24px; height: 24px; }
  .pf-tiles { grid-template-columns: minmax(0, 1fr); }
  /* Top-aligned: a location tile is a title, a "Default" chip and a wrapped
     address, so a centred box floats opposite nothing. */
  .pf-tile { padding: var(--kds-sp-4); align-items: flex-start; }
  .pf-tile input { margin-top: 0.15rem; }
  .pf-tile__t { font-size: var(--kds-text-md); }
  .pf-more > summary { min-height: 52px; font-size: var(--kds-text-md); }
  .pf-cover > summary { min-height: 48px; font-size: var(--kds-text-sm); }

  /* The operating-name row: input, "Default" note and Remove on one flex line
     runs out of room fast. Let it wrap instead of squeezing the input. */
  .pf-names__row { flex-wrap: wrap; }
  .pf-names__row .kds-input { flex: 1 1 100%; }
  .pf-names__note { white-space: normal; }

  /* --- sticky save bar ---------------------------------------------------- */
  .pf-form { --pf-bar-h: 8.5rem; --pf-bar-pad: 3rem; }
  .pf-bar { gap: var(--kds-sp-2) var(--kds-sp-3); padding-bottom: calc(var(--kds-sp-4) + env(safe-area-inset-bottom, 0px)); }
  .pf-bar .kds-btn { min-height: 50px; font-size: var(--kds-text-sm); }
  /* Publish is the decision; draft and cancel are the escapes. Give the
     decision its own full-width row so it is never a half-width guess. */
  .pf-bar > .kds-btn--brand { flex: 1 1 100%; order: -1; }

  /* --- shell, tabs, rows -------------------------------------------------- */
  /* Bleed the tab strip so a half-shown tab is cut at the real screen edge,
     which reads as "there is more", not as a broken layout inside a gutter. */
  .pf-tabs {
    margin-inline: calc(var(--ycc-gutter) * -1);
    padding-inline: var(--ycc-gutter);
    scroll-padding-inline: var(--ycc-gutter);
  }
  .pf-tab { min-height: 48px; font-size: var(--kds-text-md); }
  .pf-tab__n { font-size: var(--kds-text-sm); }

  .pf-head__h { font-size: var(--kds-text-2xl); }
  .pf-head__actions { width: 100%; }
  .pf-head__actions > .kds-btn { flex: 1 1 auto; min-height: 46px; }

  /* Filters: full-width selects. A 288px select in a 358px column leaves a
     dead strip and makes the control look disabled. */
  .pf-filters { gap: var(--kds-sp-4); }
  .pf-filters .pf-field { flex: 1 1 100%; min-width: 0; }
  .pf-filters .kds-btn { width: 100%; min-height: 48px; }

  /* Row actions get their own full-width line under the row. */
  .pf-row { padding-inline: 0; gap: var(--kds-sp-3); }
  .pf-row__actions { width: 100%; }
  .pf-row__actions > .kds-btn { flex: 1 1 7rem; }
  .pf-panel .pf-rows { margin-inline: 0; }

  /* Applicants: one applicant per screenful, so the blocks need real air
     between them and the decision control needs to stand clear of the status. */
  .pf-app { padding-inline: 0; gap: var(--kds-sp-5); padding-block: var(--kds-sp-6); }
  .pf-app__mid, .pf-app__form { gap: var(--kds-sp-4); }
  .pf-app__form .kds-select { min-height: 48px; font-size: var(--kds-text-md); }
  .pf-app__form .kds-textarea { min-height: 6rem; font-size: var(--kds-text-md); }
  .pf-app__form .kds-btn { min-height: 48px; }
  .pf-docs .kds-btn { flex: 1 1 auto; }

  .pf-status, .pf-appstatus { font-size: var(--kds-text-sm); padding-block: 0.25rem; }
  /* The company picker is how a consultant switches client — a real control,
     so it gets a real target, not a 34px desktop chip. */
  .pf-picker { gap: var(--kds-sp-2) var(--kds-sp-3); }
  .pf-chip { min-height: 44px; padding-inline: var(--kds-sp-4); font-size: var(--kds-text-md); }
  .pf-picker__l { font-size: var(--kds-text-sm); flex: 1 1 100%; }
  /* Small-caps labels that title real data, and the posting ID people read out
     over the phone: none of them belong at 12px on a handset. */
  .pf-dl dt, .pf-head__where, .pf-preview__tag { font-size: var(--kds-text-sm); }
  .pf-pid { font-size: 0.92em; }
  .pf-facts { font-size: var(--kds-text-sm); }
  .pf-figure { padding: var(--kds-sp-4); }
  .pf-figure__l { font-size: var(--kds-text-sm); }
  .pf-empty p, .pf-note { font-size: var(--kds-text-sm); }
  .pf-logofield { flex-wrap: wrap; }
  .pf-logofield__c { flex: 1 1 100%; }
}

/* Five figures over two columns leaves the fifth stranded beside a hole. */
@media (max-width: 620px) {
  .pf-figures > .pf-figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .pf-dl > div { grid-template-columns: minmax(0, 1fr); }
  .pf-row__actions > .kds-btn { flex: 1 1 6rem; }
}