/* Онбординг и Увольнение (#/onboarding, #/offboarding): карточка сотрудника с ходом процесса. Только токены. */
.hl-head__act { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.hl-card { display: grid; grid-template-columns: minmax(200px, 1.1fr) minmax(220px, 1.6fr) auto; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: 10px; }
.hl-card__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hl-card__name { min-width: 0; font-weight: 600; }
.hl-link { color: var(--color-text); text-decoration: none; }
.hl-link:hover, .hl-link:focus-visible { color: var(--color-primary); text-decoration: underline; }
.hl-prog__text { font-size: .8125rem; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.hl-prog { height: 6px; border-radius: 3px; background: var(--color-bg-muted); overflow: hidden; }
.hl-prog > span { display: block; height: 100%; background: var(--status-success); border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) { .hl-prog > span { transition: width .3s ease; } }
.hl-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 6px; }
.hl-card__act { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .hl-card { grid-template-columns: 1fr; }
  .hl-card__act { justify-content: flex-start; }
  .hl-card__act .btn { width: 100%; justify-content: center; }
}