/* /pathways/ work results in detail (2026-10-11): what the visitor chose, the key numbers, the vacancies in that kind of work, the top routes. Prefix pwd-.
   Tokens only, logical properties only (right-to-left safe), text 13px or more, targets 44px or more. Motion only inside prefers-reduced-motion:no-preference. */

.pwd-card{gap:var(--s-4)}

/* what the visitor chose and the key numbers: chips; a number that is 0 is drawn quieter, never hidden */
.pwd-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.pwd-chip{display:inline-flex;align-items:center;gap:6px;max-inline-size:100%;min-block-size:32px;padding:4px 12px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--card-2);color:var(--ink);font-size:var(--fs-14);font-weight:var(--fw-semibold);line-height:1.3;overflow-wrap:anywhere}
.pwd-chip .icon{color:var(--muted)}
.pwd-chip.is-kind{background:var(--sky);border-color:var(--info-line);color:var(--primary-ink)}
.pwd-chip.is-kind .icon{color:inherit}
.pwd-chip.is-zero{border-style:dashed;background:transparent;color:var(--muted)}

/* the blocks: vacancies, routes */
.pwd-block{display:grid;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--card-2)}
.pwd-h{margin:0;font-family:var(--font-sans);font-size:var(--fs-16);font-weight:var(--fw-bold);color:var(--ink)}
.pwd-count{margin:0;font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--ink)}
.pwd-note{margin:0;font-size:var(--fs-14);color:var(--muted)}
.pwd-block .source{margin:0;font-size:var(--fs-13);color:var(--muted)}

/* one vacancy: the left edge (the start edge in right-to-left) is coloured by what the record supports */
.pwd-jobs{display:grid;gap:var(--s-3)}
.pwd-job{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid var(--border);border-inline-start:4px solid var(--border-strong);border-radius:var(--r-sm);background:var(--card)}
.pwd-job.is-ok{border-inline-start-color:var(--ok)}
.pwd-job.is-info{border-inline-start-color:var(--info)}
.pwd-job.is-warn{border-inline-start-color:var(--warn)}
.pwd-job-main{display:grid;gap:2px;min-inline-size:0}
.pwd-job-main strong{font-size:var(--fs-16);line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.pwd-job-where{font-size:var(--fs-14);color:var(--ink-2);overflow-wrap:anywhere}
.pwd-job-facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
/* a longer sentence in another language wraps inside the card instead of running past its edge */
.pwd-job .badge{max-inline-size:100%;block-size:auto;min-block-size:24px;padding-block:2px;white-space:normal;line-height:1.3}
.pwd-fact{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-14);color:var(--ink-2)}
.pwd-fact .icon{color:var(--muted)}
.pwd-fact.is-soon{color:var(--warn-ink);font-weight:var(--fw-semibold)}
.pwd-fact.is-soon .icon{color:inherit}
.pwd-job-foot{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-4)}
.pwd-link{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px}
.pwd-link:focus-visible,.pwd-more:focus-visible{outline:3px solid var(--focus,var(--primary));outline-offset:2px}
/* the source line inside a vacancy keeps its links 44px tall */
.pwd-job-foot .rec-src{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2)}
.pwd-job-foot .rec-src a{display:inline-flex;align-items:center;min-block-size:44px}
.pwd-more{justify-self:start;min-block-size:44px;gap:var(--s-2)}
.pwd-more .icon{flex:none}

/* the top routes with the salary rule on file */
.pwd-route-list{display:grid;gap:var(--s-3)}
.pwd-route{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s-3)}
.pwd-route>.icon{margin-block-start:2px;color:var(--primary-ink)}
.pwd-route-main{display:grid;justify-items:start;gap:4px;min-inline-size:0}
.pwd-route-main strong{font-size:var(--fs-15);color:var(--ink);overflow-wrap:anywhere}
.pwd-sal{font-size:var(--fs-14);color:var(--ink-2);overflow-wrap:anywhere}

/* Save and Share on a work card are full-size targets */
.pwd-card .pwp-actions .btn{min-block-size:44px}

@media (max-width:480px){
  .pwd-block{padding:var(--s-3)}
  .pwd-job{padding:var(--s-3)}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes pwd-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .pwd-chip{animation:pwd-in .3s var(--ease) both}
  .pwd-chip:nth-child(2){animation-delay:.05s}
  .pwd-chip:nth-child(3){animation-delay:.1s}
  .pwd-chip:nth-child(4){animation-delay:.15s}
  .pwd-job{animation:pwd-in .35s var(--ease) both}
  .pwd-job:nth-child(2){animation-delay:.08s}
  .pwd-job:nth-child(3){animation-delay:.16s}
  .pwd-more .icon{transition:transform var(--dur-fast) var(--ease)}
  .pwd-more:hover .icon{transform:translateY(3px)}
}
@media (prefers-reduced-motion:reduce){
  .pwd-chip,.pwd-job{animation:none}
  .pwd-more .icon{transition:none}
}