/* People workspace */
.people-workspace { width: min(1280px, 100%); margin: 0 auto; padding: 4px 0 var(--space-8); }
.people-hero { padding: var(--space-4) 0 var(--space-6); }
.people-eyebrow { margin: 0 0 5px; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .08em; text-transform: uppercase; }
.people-hero h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.35rem); letter-spacing: -.035em; }
.people-hero > p:last-child { max-width: 680px; margin: var(--space-2) 0 0; color: var(--color-fg-muted); line-height: 1.55; }
/* 2026-08-02 — dropped the bespoke bordered-pill look, same fix as
   .requests-toolbar in requests.css: it fought the shared
   .workspace-hero__nav flush-divider design and left a disproportionate
   indent on mobile once polish.css's later padding override landed. */
.people-hub-tabs {
  display: flex;
  align-items: center;
  min-height: 58px;
  margin-bottom: var(--space-5);
}
.people-hub-tabs .lv-tabs { margin: 0; border: 0; }
.people-hub-tabs .lv-tab { min-width: 118px; }

/* Onboarding/Offboarding */
.onboard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.onboard-stat {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-fg);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.onboard-stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.onboard-stat.has-risk { border-color: color-mix(in srgb, var(--color-warning) 32%, var(--color-border)); }
.onboard-stat.has-risk .onboard-stat__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.onboard-stat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.onboard-stat--offboarding .onboard-stat__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.onboard-stat--probation .onboard-stat__icon { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); }
.onboard-stat__icon .icon { width: 20px; height: 20px; }
.onboard-stat__content { display: grid; min-width: 0; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-2); flex: 1; }
.onboard-stat__content strong { color: var(--color-fg); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.onboard-stat__content > span { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.onboard-stat__content small { grid-column: 1 / -1; margin-top: 2px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.onboard-stat__arrow { width: 16px; height: 16px; flex: 0 0 16px; color: var(--color-fg-subtle); }

/* Probation decision horizon: time is the primary visual dimension, so each
   row reads as an approaching decision rather than another HR data table. */
.probation-review { display: grid; gap: var(--space-4); }
.probation-lane { display: grid; gap: 8px; }
.probation-row {
  display: grid; grid-template-columns: minmax(210px, 1.1fr) minmax(175px, .9fr) minmax(210px, 1fr) minmax(160px, 210px);
  align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-surface);
  transition: opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.probation-row:hover { border-color: var(--color-border-strong); transform: translateY(-1px); }
.probation-row--overdue { border-left-color: var(--color-danger); }
.probation-row--due_soon { border-left-color: var(--color-warning); }
.probation-row--decided { border-left-color: var(--color-success); }
.probation-row--missing_data { border-left-color: var(--color-fg-subtle); }
.probation-row.is-busy { opacity: .55; pointer-events: none; }
.probation-row__person { display: flex; align-items: center; min-width: 0; gap: 10px; }
.probation-row__person > div, .probation-row__policy { display: grid; min-width: 0; gap: 2px; }
.probation-row__person a { overflow: hidden; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); text-overflow: ellipsis; white-space: nowrap; }
.probation-row__person span, .probation-row__policy small { overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.probation-row__policy > span { width: max-content; padding: 3px 7px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .03em; text-transform: uppercase; }
.probation-row--overdue .probation-row__policy > span { background: var(--color-danger-soft); color: var(--color-danger); }
.probation-row--due_soon .probation-row__policy > span { background: var(--color-warning-soft); color: var(--color-warning); }
.probation-row__policy strong { overflow: hidden; font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.probation-horizon { display: grid; gap: 6px; min-width: 0; }
.probation-horizon__track { position: relative; height: 6px; border-radius: 999px; background: var(--color-surface-hover); }
.probation-horizon__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-danger), var(--color-warning) 48%, var(--color-primary)); opacity: .8; }
.probation-horizon__track i { position: absolute; top: 50%; width: 11px; height: 11px; border: 2px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px var(--color-primary); }
.probation-horizon--overdue .probation-horizon__track i { background: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }
.probation-horizon--due_soon .probation-horizon__track i { background: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.probation-horizon > div:last-child { display: flex; justify-content: space-between; gap: 8px; color: var(--color-fg-muted); font-size: 11px; }
.probation-horizon strong { color: var(--color-fg); font-variant-numeric: tabular-nums; }
.probation-row__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.probation-negative { flex-basis: 100%; padding: 4px 2px; border: 0; background: none; color: var(--color-danger); font: inherit; font-size: 11px; text-align: right; cursor: pointer; }
.probation-remind { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; color: var(--color-primary); font: inherit; font-size: 11px; cursor: pointer; }
.probation-remind .icon { width: 13px; height: 13px; }
.probation-outcome { padding: 6px 10px; border-radius: 999px; background: var(--color-success-soft); color: var(--color-success); font-size: var(--text-xs); font-weight: var(--font-bold); }
.probation-outcome--failed { background: var(--color-danger-soft); color: var(--color-danger); }
.probation-extension { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: end; gap: 8px; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.probation-extension[hidden] { display: none; }
.probation-extension label { display: grid; gap: 4px; color: var(--color-fg-muted); font-size: var(--text-xs); }
.probation-extension input { min-height: 36px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font: inherit; }

.checklist-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60vh; overflow-y: auto; }
.checklist-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; }
.checklist-row:hover { background: var(--color-surface-hover); }
.checklist-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.checklist-row__name { font-weight: var(--font-medium); font-size: var(--text-sm); }
.checklist-row__pos { font-size: var(--text-xs); color: var(--color-fg-muted); }
.checklist-row__pct { font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-fg-muted); flex-shrink: 0; }

/* First-day readiness — the vertical rail is deliberately chronological:
   unlike generic dashboard tiles it makes start order and preparation gaps
   scannable in one pass. */
.onboarding-readiness-modal .modal__body { padding-top: var(--space-3); }
.onboarding-readiness { display: grid; gap: var(--space-4); }
.readiness-filters {
  display: flex; gap: 6px; overflow-x: auto; padding: 3px 2px 7px;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.readiness-filter {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 38px;
  padding: 7px 9px 7px 13px; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-fg-muted); font: inherit; font-size: var(--text-xs);
  font-weight: var(--font-semibold); cursor: pointer; scroll-snap-align: start;
}
.readiness-filter strong {
  display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px;
  border-radius: 999px; background: var(--color-surface-hover); color: var(--color-fg);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.readiness-filter:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.readiness-filter.is-active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast, #fff); }
.readiness-filter.is-active strong { background: rgb(255 255 255 / .18); color: inherit; }
.readiness-filter:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.readiness-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 190px 180px; gap: var(--space-2); }
.readiness-toolbar select,
.readiness-search {
  min-height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-fg); font: inherit; font-size: var(--text-sm);
}
.readiness-toolbar select { padding: 0 32px 0 12px; }
.readiness-search { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }
.readiness-search .icon { width: 17px; height: 17px; color: var(--color-fg-subtle); }
.readiness-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.readiness-search:focus-within,
.readiness-toolbar select:focus-visible { border-color: var(--color-primary); outline: 3px solid var(--color-primary-soft); }
.readiness-results { min-height: 180px; }
.readiness-runway { display: grid; }
.readiness-row {
  display: grid; grid-template-columns: 82px 20px minmax(180px, 1.05fr) minmax(210px, 1.3fr) 112px auto;
  align-items: center; min-width: 0; gap: var(--space-3); padding: 13px 0;
  border-bottom: 1px solid var(--color-border); color: var(--color-fg);
}
.readiness-row:last-child { border-bottom: 0; }
.readiness-row__date { display: grid; gap: 3px; text-align: right; }
.readiness-row__date strong { font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-transform: capitalize; }
.readiness-row__date span { color: var(--color-fg-muted); font-size: 11px; line-height: 1.25; }
.readiness-row__rail { position: relative; align-self: stretch; min-height: 60px; }
.readiness-row__rail::before { content: ''; position: absolute; top: -14px; bottom: -14px; left: 9px; width: 1px; background: var(--color-border); }
.readiness-row:first-child .readiness-row__rail::before { top: 50%; }
.readiness-row:last-child .readiness-row__rail::before { bottom: 50%; }
.readiness-row__rail span {
  position: absolute; z-index: 1; top: 50%; left: 4px; width: 11px; height: 11px; transform: translateY(-50%);
  border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary);
}
.readiness-row--at_risk .readiness-row__rail span { background: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.readiness-row--without_date .readiness-row__rail span { background: var(--color-fg-subtle); box-shadow: 0 0 0 1px var(--color-fg-subtle); }
.readiness-row--ready .readiness-row__rail span { background: var(--color-success); box-shadow: 0 0 0 1px var(--color-success); }
.readiness-row__person { display: flex; align-items: center; min-width: 0; gap: 10px; }
.readiness-row__person > div { display: grid; min-width: 0; gap: 3px; }
.readiness-row__person a { overflow: hidden; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.readiness-row__person a:hover { color: var(--color-primary); }
.readiness-row__person span { overflow: hidden; color: var(--color-fg-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.readiness-row__checkpoint { display: grid; min-width: 0; gap: 4px; }
.readiness-state { width: fit-content; color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .055em; text-transform: uppercase; }
.readiness-row--at_risk .readiness-state { color: var(--color-warning); }
.readiness-row--without_date .readiness-state { color: var(--color-fg-muted); }
.readiness-row--ready .readiness-state { color: var(--color-success); }
.readiness-row__checkpoint strong { overflow: hidden; font-size: var(--text-xs); font-weight: var(--font-semibold); text-overflow: ellipsis; white-space: nowrap; }
.readiness-row__checkpoint small { overflow: hidden; color: var(--color-fg-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.readiness-row__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 7px; }
.readiness-row__progress > div { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--color-surface-hover); }
.readiness-row__progress > div span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.readiness-row__progress strong { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.readiness-row__progress small { color: var(--color-fg-muted); font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.readiness-row__progress em { grid-column: 1 / -1; color: var(--color-warning); font-size: 10px; font-style: normal; font-weight: var(--font-semibold); }
.readiness-row__action { white-space: nowrap; }
.readiness-loading { display: flex; align-items: center; justify-content: center; min-height: 180px; gap: var(--space-2); color: var(--color-fg-muted); font-size: var(--text-sm); }
.readiness-empty { display: grid; justify-items: center; min-height: 190px; align-content: center; gap: var(--space-2); padding: var(--space-6); text-align: center; }
.readiness-empty .icon { width: 28px; height: 28px; color: var(--color-success); }
.readiness-empty strong { font-size: var(--text-base); }
.readiness-empty p { max-width: 42ch; margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); }

/* Exit clearance — a three-gate control lane. The gates are real operational
   invariants (account, company assets, checklist), not decorative steps. */
.offboarding-clearance { display: grid; gap: var(--space-4); }
.clearance-filters { display: flex; gap: 6px; overflow-x: auto; padding: 3px 2px 7px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.clearance-filter.is-active { border-color: var(--color-warning); background: var(--color-warning); color: #fff; }
.clearance-results { min-height: 180px; }
.clearance-lane { display: grid; }
.clearance-row {
  display: grid; grid-template-columns: 100px minmax(170px, .95fr) minmax(230px, 1.25fr) minmax(180px, 1fr) 88px auto;
  align-items: center; min-width: 0; gap: var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.clearance-row:last-child { border-bottom: 0; }
.clearance-row__date { display: grid; gap: 3px; }
.clearance-row__date strong { font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-transform: capitalize; }
.clearance-row__date span { color: var(--color-fg-muted); font-size: 11px; }
.clearance-row__person { display: flex; align-items: center; min-width: 0; gap: 10px; }
.clearance-row__person > div { display: grid; min-width: 0; gap: 2px; }
.clearance-row__person a { overflow: hidden; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.clearance-row__person a:hover { color: var(--color-primary); }
.clearance-row__person span,
.clearance-row__person small { overflow: hidden; color: var(--color-fg-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.clearance-row__gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.clearance-gate { display: flex; align-items: center; min-width: 0; gap: 6px; padding: 8px; border-right: 1px solid var(--color-border); color: var(--color-fg-muted); font-size: 10px; }
.clearance-gate:last-child { border-right: 0; }
.clearance-gate i { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: var(--font-bold); }
.clearance-gate > span { display: grid; min-width: 0; gap: 1px; font-weight: var(--font-semibold); }
.clearance-gate small { overflow: hidden; font-size: 8px; font-weight: var(--font-normal); text-overflow: ellipsis; white-space: nowrap; }
.clearance-gate.is-done i { background: var(--color-success-soft); color: var(--color-success); }
.clearance-gate.is-blocked { background: var(--color-warning-soft); color: var(--color-warning); }
.clearance-gate.is-blocked i { background: var(--color-warning); color: #fff; }
.clearance-row__next { display: grid; min-width: 0; gap: 3px; }
.clearance-row__next > span { width: fit-content; color: var(--color-warning); font-size: 9px; font-weight: var(--font-bold); letter-spacing: .055em; text-transform: uppercase; }
.clearance-row--cleared .clearance-row__next > span { color: var(--color-success); }
.clearance-row--in_progress .clearance-row__next > span { color: var(--color-primary); }
.clearance-row__next strong,
.clearance-row__next small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clearance-row__next strong { font-size: var(--text-xs); }
.clearance-row__next small { color: var(--color-fg-muted); font-size: 10px; }
.clearance-row__progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }
.clearance-row__progress > div { grid-column: 1 / -1; height: 5px; overflow: hidden; border-radius: 999px; background: var(--color-surface-hover); }
.clearance-row__progress > div span { display: block; height: 100%; border-radius: inherit; background: var(--color-warning); }
.clearance-row--cleared .clearance-row__progress > div span { background: var(--color-success); }
.clearance-row__progress strong { font-size: 10px; font-variant-numeric: tabular-nums; }
.clearance-row__progress em { grid-column: 1 / -1; color: var(--color-warning); font-size: 9px; font-style: normal; font-weight: var(--font-semibold); }
.clearance-row__action { white-space: nowrap; }

@media (max-width: 820px) {
  .readiness-toolbar { grid-template-columns: 1fr 1fr; }
  .readiness-search { grid-column: 1 / -1; }
  .readiness-row { grid-template-columns: 70px 18px minmax(0, 1fr) 86px; }
  .readiness-row__checkpoint { grid-column: 3 / -1; padding-bottom: 3px; }
  .readiness-row__progress { grid-column: 4; grid-row: 1; }
  .readiness-row__action { display: none; }
  .clearance-row { grid-template-columns: 82px minmax(0, 1fr) 88px; }
  .clearance-row__gates { grid-column: 2 / -1; grid-row: 2; }
  .clearance-row__next { grid-column: 2 / -1; grid-row: 3; }
  .clearance-row__progress { grid-column: 3; grid-row: 1; }
  .clearance-row__action { display: none; }
}

.people-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.people-kpi {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.people-kpi__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.people-kpi__icon .icon { width: 18px; height: 18px; }
.people-kpi--success .people-kpi__icon { background: var(--color-success-soft); color: var(--color-success); }
.people-kpi--warning .people-kpi__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.people-kpi--info .people-kpi__icon { background: var(--color-blue-soft, var(--color-primary-soft)); color: var(--color-blue, var(--color-primary)); }
.people-kpi > span:last-child { min-width: 0; }
.people-kpi strong { display: block; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.people-kpi small { display: block; margin-top: 5px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }

.people-page { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-5); align-items: start; }
.people-main { min-width: 0; }

/* Toolbar */
.people-toolbar {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.people-toolbar__filters,
.people-toolbar__actions,
.people-toolbar__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.people-toolbar__actions { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.people-toolbar__actions > .btn { min-height: 40px; }
.people-toolbar__actions > .btn:last-child { margin-left: auto; }
.people-toolbar__actions .btn .icon { width: 15px; height: 15px; }
/* Mobile-only "more actions" trigger (view toggle/columns/export/bulk-role
   assign) — collapsed behind #p-more-btn on ≤560px, see that block below.
   A plain inline no-op on every wider viewport. */
.people-toolbar__more { display: none; }
.people-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
.people-search .icon { position: absolute; left: var(--space-3); width: 18px; height: 18px; color: var(--color-fg-subtle); pointer-events: none; }
.people-search input {
  width: 100%; height: 42px; padding: 0 var(--space-3) 0 var(--space-10);
  font: inherit; font-size: var(--text-sm); color: var(--color-fg);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.people-search input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.people-filter {
  height: 42px; padding: 0 var(--space-3); font: inherit; font-size: var(--text-sm); line-height: normal;
  color: var(--color-fg); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer;
}
.people-viewtoggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.people-viewtoggle button { display: grid; place-items: center; width: 40px; height: 42px; background: var(--color-surface); color: var(--color-fg-muted); border: 0; }
.people-viewtoggle button.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.people-results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.people-results-head h2 { margin: 0; font-size: var(--text-lg); letter-spacing: -.015em; }
.people-results-head p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.people-results-head > span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }

/* Avatar (10 colors by letter) */
.employee-avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: var(--radius-full); color: #fff; font-weight: var(--font-bold);
  overflow: hidden; text-transform: uppercase; line-height: 1;
}

/* Status badge */
.status-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.status-badge--active { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--inactive { background: var(--color-surface-hover); color: var(--color-fg-muted); }

/* Directory grid */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
/* Swipe-to-reveal Call/Email (touch-only — setupSwipeReveal(), core/app-shared.js,
   same mechanism as the notifications inbox's own swipe rows). Each .people-card
   is wrapped in this so the action strip can sit behind it; flex:1 on the
   actions below means a single action (no phone on file) fills the whole
   revealed width instead of leaving a gap. */
.people-swipe { position: relative; overflow: hidden; border-radius: var(--radius-lg); animation: card-in var(--dur-base) var(--ease-out) both; }
.people-swipe__actions { position: absolute; inset: 0; display: flex; justify-content: flex-end; border-radius: var(--radius-lg); overflow: hidden; }
.people-swipe__action {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: none; color: #fff; font-size: var(--text-xs); font-weight: var(--font-semibold);
  text-decoration: none; cursor: pointer;
}
.people-swipe__action .icon { stroke: #fff; }
.people-swipe__action--call { background: var(--color-success); }
.people-swipe__action--email { background: var(--color-primary); }
/* .people-card's own card-in entrance animation fades opacity 0->1 — with the
   fully-opaque Call/Email panel sitting behind it in .people-swipe, that fade
   let the panel's solid color (often just blue "Написати", full-width, for
   anyone with no phone on file) show through for a frame. Not a stacking/
   paint-order issue, so the earlier translateZ(0) attempt never fixed it. The
   fade now runs on the .people-swipe wrapper instead, so the card and the
   actions behind it fade in together and nothing shows through. */
.people-swipe .people-card { position: relative; z-index: 1; touch-action: pan-y; animation: none; }
.people-card {
  position: relative; display: flex; min-width: 0; flex-direction: column;
  padding: var(--space-5); text-align: left; cursor: pointer;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-xs);
  animation: card-in var(--dur-base) var(--ease-out) both;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.people-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.people-card:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.people-card__top { display: flex; align-items: center; min-width: 0; gap: var(--space-3); }
.people-card__identity { flex: 1; min-width: 0; }
.people-card__name { overflow: hidden; font-weight: var(--font-bold); text-overflow: ellipsis; white-space: nowrap; }
.people-card__pos { margin-top: 3px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.people-card__email { margin: var(--space-4) 0; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.people-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.people-card__meta div { min-width: 0; }
.people-card__meta dt { color: var(--color-fg-muted); font-size: var(--text-xs); }
.people-card__meta dd { margin: 4px 0 0; overflow: hidden; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-semibold); text-overflow: ellipsis; white-space: nowrap; }
.people-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.people-card__footer > span:last-child { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.people-card__footer .icon { width: 14px; height: 14px; }
.people-role-chip { overflow: hidden; max-width: 52%; padding: 4px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-weight: var(--font-medium); text-overflow: ellipsis; white-space: nowrap; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Table */
.people-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.people-table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--color-surface); }
.people-table thead { background: var(--color-surface-2); }
.people-table th { text-align: left; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-fg-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.people-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.people-table tbody tr { cursor: pointer; animation: card-in var(--dur-base) var(--ease-out) both; }
.people-table tbody tr:hover { background: var(--color-surface-hover); }
.people-table tbody tr:last-child td { border-bottom: 0; }
.people-table__name { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--font-medium); }

/* Department filter */
.org-chart { position: sticky; top: var(--space-6); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.org-title-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.org-title-wrap > span { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; background: var(--color-primary-soft); color: var(--color-primary); }
.org-title-wrap .icon { width: 17px; height: 17px; }
.org-title-wrap > div { min-width: 0; }
.org-title { margin: 0; color: var(--color-fg); font-size: var(--text-sm); font-weight: var(--font-bold); }
.org-title-wrap p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: 11px; line-height: 1.35; }
.org-tree, .org-tree ul { list-style: none; margin: 0; padding: 0; }
.org-tree ul { margin-left: var(--space-4); border-left: 1px solid var(--color-border); padding-left: var(--space-2); }
.org-node { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3); margin-bottom: 3px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-fg); font-size: var(--text-sm); text-align: left; }
.org-node:hover { background: var(--color-surface-hover); }
.org-node.is-active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: var(--font-semibold); }
.org-count { min-width: 20px; text-align: center; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.org-empty, .org-node.is-active .org-count { color: var(--color-fg-muted); }

/* Profile */
/* 2026-07-13 — complete structural redesign per an explicit design brief
   (Rippling/Deel/HiBob-style): header and tabs are now full-width rows
   (previously the sidebar ran the full height alongside them as one tall
   column) — only the panel content and sidebar form the two-column split
   below. Max width bumped 1180px→1400px per the brief. */
.profile { max-width: 1400px; }
.profile-back { display: inline-block; margin-bottom: var(--space-4); color: var(--color-fg-muted); font-size: var(--text-sm); }
.profile-back:hover { color: var(--color-primary); }

/* 70/30 main/sidebar split (Phase 41 was a fixed 280px sidebar column;
   the brief asks for proportional ~70/30). Collapses to a single column
   under the same 901px breakpoint the sidebar/collapse mechanism in
   layout.css already uses, sidebar moving below main content. */
.profile-grid { display: grid; grid-template-columns: 7fr 3fr; gap: var(--space-6); align-items: start; }
.profile-main { min-width: 0; }
.profile-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.profile-side-card { padding: var(--space-5); min-width: 0; }
.profile-side-card__action { display: flex; justify-content: center; width: 100%; margin-top: var(--space-3); }

/* 2026-07-13 — icon-chip sidebar headers, mirroring dashboard.css's
   dash-card__icon pattern from the Dashboard redesign, so this page (opened
   right after Dashboard) reads as the same generation of UI instead of an
   older, flatter one. Tones are purely for visual differentiation between
   the 4 cards, not semantic status (unlike the KPI chips on Dashboard). */
.profile-side-card__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.profile-side-card__head h3 { margin: 0; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-fg-muted); }
.profile-side-card__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.profile-side-card__icon .icon { width: 15px; height: 15px; }
.profile-side-card--manager .profile-side-card__icon { background: var(--color-success-soft); color: var(--color-success); }
.profile-side-card--reports .profile-side-card__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.profile-side-card--team .profile-side-card__icon { background: var(--color-orange-soft); color: var(--color-orange); }
/* The card is only ~280px wide — the main profile panel's two-column
   180px+1fr info-grid (people.css:140) doesn't fit here, so labels stack
   above values instead, and both use the same font-size (only weight/color
   tell them apart) rather than the panel's larger dd/smaller dt split. */
.profile-side-card .info-grid { gap: var(--space-3); }
.profile-side-card .info-grid__row { grid-template-columns: 1fr; gap: 2px; }
.profile-side-card .info-grid dt { font-size: var(--text-sm); }
.profile-side-card .info-grid dd { font-size: var(--text-sm); overflow-wrap: break-word; }
.profile-side-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.profile-side-person__name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-fg); overflow-wrap: break-word; }
.profile-side-person:hover .profile-side-person__name { color: var(--color-primary); }
.profile-side-list { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-side-person--sm { gap: var(--space-2); font-size: var(--text-sm); }
.profile-side-person--sm span { overflow-wrap: break-word; }

/* Direct reports — overlapping avatar stack + "show all" toggle, same
   device teams.js's own .team-card__avatars already uses. The full name
   list (.profile-side-card__expandable) stays in the DOM but hidden until
   expanded — there's no separate "reports of X" page to link out to. */
.profile-side-card__stack { display: flex; align-items: center; margin-bottom: var(--space-3); }
.profile-side-card__stack > * { margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); }
.profile-side-card__stack > *:first-child { margin-left: 0; }
.profile-side-card__stack-more { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.profile-side-list.profile-side-card__expandable { display: none; margin-bottom: var(--space-3); }
.profile-side-card--reports.is-expanded .profile-side-card__stack { display: none; }
.profile-side-card--reports.is-expanded .profile-side-list.profile-side-card__expandable { display: flex; }
@media (max-width: 900px) {
  .onboard-stats { grid-template-columns: 1fr; }
  .probation-row { grid-template-columns: minmax(210px, 1fr) minmax(180px, .9fr); }
  .probation-horizon { grid-column: 1; }
  .probation-row__actions { grid-column: 2; grid-row: 2; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* 2026-07-13 — decorative gradient strip behind the avatar (a common
   Stripe/Linear profile-header device) so this card doesn't read as a bare
   flex row; purely cosmetic, `pointer-events: none` + z-index so it never
   intercepts clicks meant for the avatar/edit button. */
.profile-header { position: relative; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); margin-bottom: var(--space-5); }
/* 2026-08-03 — overflow:hidden used to live on .profile-header itself, to
   clip this banner's square top corners to the card's own rounded ones.
   That also clipped the "•••" dropdown (position:absolute, nested inside
   this same card) once it grew past a single item — the extra admin
   actions rendered into the DOM correctly but were invisibly cut off at
   the card's bottom edge. Rounding the banner itself instead removes the
   need to clip the whole card. */
.profile-header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 72px; pointer-events: none; z-index: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(120deg, var(--color-primary-soft), var(--color-orange-soft));
}
.profile-avatar-wrap, .profile-header__info, .profile-header__actions { position: relative; z-index: 1; }

/* Header actions — primary "Edit Profile" button + an optional "•••" menu
   (the brief's only genuinely wireable secondary action here is "View org
   chart", already in the sidebar — see people-profile.js's own note on why
   a fuller Quick Actions menu wasn't invented). */
.profile-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; align-self: flex-start; }
.profile-header__more { position: relative; }
.profile-header__menu {
  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 20; min-width: 200px;
  padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.profile-header__menu-item {
  display: block; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-fg); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer;
}
.profile-header__menu-item:hover { background: var(--color-surface-hover); }
.profile-header__menu-item--danger { color: var(--color-danger); }
.profile-header__menu-item--danger:hover { background: var(--color-danger-soft); }
.profile-header__menu-sep { margin: var(--space-2) calc(-1 * var(--space-2)); border-top: 1px solid var(--color-border); }

/* Avatar upload overlay (Priority 30) — camera button + optional remove button
   anchored to the bottom-right of the avatar circle; a soft spinner-style dim
   while a real R2 upload is in flight. */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-wrap.is-uploading { opacity: 0.5; pointer-events: none; }
.profile-avatar-wrap__edit {
  position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-full); border: 2px solid var(--color-surface);
  background: var(--color-primary); color: #fff; cursor: pointer;
}
.profile-avatar-wrap__edit:hover { background: var(--color-primary-hover); }
.profile-avatar-wrap__edit .icon { width: 16px; height: 16px; }
.profile-avatar-wrap__remove {
  position: absolute; left: -2px; bottom: -2px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid var(--color-surface);
  background: var(--color-danger); color: #fff; font-size: 11px; line-height: 1; cursor: pointer;
}
.profile-avatar-wrap__remove:hover { filter: brightness(0.9); }

.profile-header__info { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.profile-header__title-row { display: flex; align-items: center; gap: var(--space-3); }
.profile-header__info h1 { font-size: var(--text-2xl); font-weight: var(--font-extrabold); }
.profile-header__pos { color: var(--color-fg-muted); font-size: var(--text-sm); }
/* Meta row (email/location/tenure) — a Stripe/Linear-style detail summary
   directly under the name, so the header carries more than just a title;
   the sidebar's "Головна" card still has the full info-grid, this is just
   the at-a-glance version. */
.profile-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-1); }
.profile-header__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-fg-muted); }
.profile-header__meta-item .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-fg-subtle); }
.profile-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent; color: var(--color-fg-muted); font-size: var(--text-sm); font-weight: var(--font-medium);
  white-space: nowrap; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-bottom-color var(--dur-fast) var(--ease-out);
}
.profile-tab:hover { color: var(--color-fg); background: var(--color-surface-hover); }
.profile-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-semibold); }
.profile-tab.is-active:hover { background: transparent; }
.profile-panel { padding: var(--space-6); }

.info-grid { display: grid; gap: var(--space-4); margin: 0; }
.info-grid__row { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-4); }
.info-grid dt { color: var(--color-fg-muted); font-size: var(--text-sm); }
.info-grid dd { margin: 0; font-weight: var(--font-medium); font-size: var(--text-sm); }
.info-grid__empty { font-weight: var(--font-normal); color: var(--color-fg-subtle); font-style: italic; }

/* 2026-07-13 — grouped section cards (General/Contacts/Performance tabs
   etc.) instead of one giant table — each is its own bordered card with an
   icon-chip head, same device used across the app this pass. */
.profile-section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--space-5); align-items: start; }
.profile-section { padding: var(--space-6); }
.profile-section__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.profile-section__head > .btn { margin-left: auto; }
.profile-section__title { margin: 0; font-size: var(--text-xl); font-weight: var(--font-bold); }
.profile-section__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.profile-section__icon .icon { width: 17px; height: 17px; }
.profile-section .pr-subhead:first-child { margin-top: 0; }

/* In-card empty state (icon + short line) — replaces every bare "—" or
   plain sentence this page used to fall back to. */
.profile-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-fg-subtle); }
.profile-empty .icon { width: 28px; height: 28px; opacity: 0.5; }
.profile-empty p { margin: 0; font-size: var(--text-sm); max-width: 32ch; }

/* Timeline — icon-chip per event instead of a bare dot (same "icon + tint"
   device used across the app this pass), plus a hover lift so the list
   doesn't feel static. Only 3 real event kinds exist today (hired/account/
   verified — src/routes/people.js) — see TIMELINE_ICON in
   people-profile.js; `i-info` is the fallback for any future kind. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-out); }
.timeline__item:hover { background: var(--color-surface-hover); }
.timeline__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-full); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.timeline__title { font-weight: var(--font-medium); font-size: var(--text-sm); }
.timeline__date { color: var(--color-fg-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Time Off "hero" balance card — number + progress ring for the primary
   leave type, same numbers the .balance-card grid below already shows, just
   a bigger presentation for the first/primary one. */
.balance-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-5); }
/* The ring and the number share one grid cell (grid-area: 1/1) so the
   number sits precisely centered inside the ring regardless of its text
   length, rather than an approximate negative-margin overlap. */
.balance-hero__ring-wrap { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.balance-ring { grid-area: 1 / 1; width: 120px; height: 120px; transform: rotate(-90deg); }
.balance-ring__track { fill: none; stroke: var(--color-surface-2); stroke-width: 10; }
.balance-ring__fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.balance-hero__num { grid-area: 1 / 1; font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--color-fg); font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance-hero__num span { font-size: var(--text-xs); font-weight: var(--font-normal); color: var(--color-fg-muted); display: block; }
.balance-hero__label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-fg-muted); margin-bottom: var(--space-3); }
.balance-hero__stats { display: flex; gap: var(--space-8); }
.balance-hero__stats b { display: block; font-size: var(--text-xl); font-weight: var(--font-bold); font-variant-numeric: tabular-nums; }
.balance-hero__stats span { font-size: var(--text-xs); color: var(--color-fg-muted); }

/* Asset cards (profile "Assets" tab) — a photo thumbnail when the asset has
   one (imageUrl, a real configurable field — Phase 39), warranty pill when
   set, scoped to .profile-panel so the main Assets module page (a data
   table) is unaffected. Base row layout, mirroring documents.css's
   .doc-item/.doc-item__main/.doc-icon-chip (a different class name, so none
   of those rules apply here) — without it the icon, name/meta text and the
   unassign "✕" button have no flex row to sit in and stack unaligned. */
.asset-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.asset-item__main { flex: 1; min-width: 0; }
.asset-item__name { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.asset-icon-chip { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--color-primary-soft); }
.asset-icon-chip .icon { width: 15px; height: 15px; color: var(--color-primary); }
.asset-item__photo { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.asset-item__warranty { font-size: var(--text-xs); color: var(--color-fg-subtle); margin-top: 2px; }

/* Document/asset cards read as a proper grid only inside the profile page —
   the shared .doc-list/.asset-list classes stay a single-column list
   everywhere else (Dashboard, Knowledge Base, candidate CVs, main Assets
   page) since those weren't part of this redesign. */
.profile-panel .doc-list, .profile-panel .asset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--space-3); }
.profile-panel .doc-item, .profile-panel .asset-item { align-items: flex-start; }

/* States */
.people-loading, .empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-fg-muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.empty-state p { margin: 0; max-width: 40ch; }

@media (max-width: 900px) {
  .people-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-page { grid-template-columns: 1fr; }
  .org-chart { position: static; order: -1; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid__row { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (max-width: 560px) {
  .people-workspace { padding-top: 0; }
  /* overflow-x:auto alone gave no hint that "Організаційна структура" (the
     3rd tab) was clipped, not just narrow — a right-edge fade signals
     there's more to scroll to, the same affordance native tab bars use. */
  .people-hub-tabs {
    min-height: 54px; overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
  }
  .people-hub-tabs .lv-tabs { min-width: max-content; }
  .people-hub-tabs .lv-tab { min-width: 100px; }
  .onboard-stats { grid-template-columns: 1fr; gap: var(--space-2); }
  .people-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .onboard-stat,
  .people-kpi { min-height: 76px; padding: 10px; gap: 9px; }
  .onboard-stat { align-items: flex-start; min-height: 100px; padding: var(--space-3); }
  .onboard-stat__icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .onboard-stat__content { grid-template-columns: 1fr; gap: 2px; }
  .onboard-stat__content strong { font-size: var(--text-lg); }
  .onboard-stat__content small { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .onboard-stat__arrow { display: none; }
  .onboarding-readiness-modal .modal__body { padding-inline: var(--space-3); }
  .readiness-toolbar { grid-template-columns: 1fr; }
  .readiness-search { grid-column: auto; }
  .readiness-row { grid-template-columns: 63px 16px minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .readiness-row__date strong { font-size: var(--text-xs); }
  .readiness-row__person { gap: 8px; }
  .readiness-row__person .employee-avatar { width: 36px !important; height: 36px !important; }
  .readiness-row__checkpoint { grid-column: 3; }
  .readiness-row__progress { grid-column: 3; grid-row: auto; grid-template-columns: minmax(80px, 1fr) auto auto; }
  .readiness-row__progress > div { grid-column: auto; }
  .readiness-row__progress em { grid-column: 1 / -1; }
  .clearance-row { grid-template-columns: 72px minmax(0, 1fr); gap: 9px; padding: 13px 0; }
  .clearance-row__person .employee-avatar { width: 36px !important; height: 36px !important; }
  .clearance-row__gates { grid-column: 1 / -1; grid-row: auto; }
  .clearance-row__next { grid-column: 2; grid-row: auto; }
  .clearance-row__progress { grid-column: 2; grid-row: auto; grid-template-columns: minmax(80px, 1fr) auto; }
  .clearance-row__progress > div { grid-column: auto; }
  .clearance-row__progress em { grid-column: 1 / -1; }
  .probation-row { grid-template-columns: 1fr; gap: 11px; }
  .probation-row__person, .probation-row__policy, .probation-horizon, .probation-row__actions { grid-column: 1; grid-row: auto; }
  .probation-row__actions { justify-content: flex-start; }
  .probation-negative { text-align: left; }
  .probation-extension { grid-column: 1; align-items: stretch; flex-direction: column; }
  .people-kpi__icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  .people-kpi strong { font-size: 1.15rem; }
  .people-kpi small { white-space: normal; line-height: 1.2; }
  .people-toolbar { padding: var(--space-3); }
  .people-toolbar__filters { align-items: stretch; flex-direction: column; }
  .people-search { flex-basis: auto; width: 100%; }
  .people-filter { width: 100%; min-width: 0; }
  /* Only two things stay on the visible row: the "⋯" overflow trigger
     and the primary "Запросити" CTA — everything else
     (view toggle, columns, export, bulk-assign) used to be four separate
     full-width rows/buttons stacked above the fold, before a single
     employee card was visible. Now it's one collapsed panel. */
  .people-toolbar__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); }
  .people-toolbar__more { display: flex; order: 1; margin-left: 0; }
  .people-toolbar__more > .btn { width: 44px; min-height: 40px; padding: 0; justify-content: center; }
  .people-toolbar__actions > .btn:last-child { order: 2; flex: 1; margin-left: 0; }
  .people-toolbar__secondary {
    order: 3; display: none; flex-direction: column; align-items: stretch;
    flex-basis: 100%; width: 100%; gap: var(--space-2);
    margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border);
  }
  .people-toolbar__secondary.is-open { display: flex; }
  .people-toolbar__secondary > .btn,
  .people-toolbar__secondary .hdr-dropdown,
  .people-toolbar__secondary .hdr-dropdown > .btn { width: 100%; min-width: 0; white-space: normal; }
  .people-viewtoggle { align-self: stretch; }
  .people-viewtoggle button { width: 50%; }
  .people-results-head { align-items: flex-start; }
  .people-grid { grid-template-columns: 1fr; }
  /* Compact single-row card — was a full detail card (avatar+name+role,
     email, a 4-field dept/location/manager/joined grid half-full of "—"
     placeholders, then a footer chip+label) at roughly one full screen's
     height per person; browsing 9 people took 9+ screens of scrolling.
     Email/meta/footer only ever repeated what "Відкрити профіль" already
     shows, so they're dropped here rather than shrunk — a CSS-only arrow
     replaces the footer's "Відкрити профіль" label + chevron icon as the
     row's only affordance that it's tappable. */
  .people-card { min-height: 0; padding: var(--space-3) var(--space-4); }
  .people-card__top { align-items: center; position: relative; padding-right: 22px; }
  .people-card__email,
  .people-card__meta,
  .people-card__footer { display: none; }
  .people-card__identity { padding-right: 0; }
  .people-card__top::after {
    content: ''; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--color-fg-subtle); border-bottom: 2px solid var(--color-fg-subtle);
    transform: translateY(-50%) rotate(-45deg);
  }
  /* Profile header is a desktop flex row (avatar · info · actions) that gets
     cramped on phones — the Edit button stops fitting. Stack it: avatar on top,
     name/role/meta below, and the action button full-width at the bottom. */
  .profile-header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .profile-header__info { width: 100%; }
  .profile-header__actions { align-self: stretch; width: 100%; }
  .profile-header__actions > .btn { flex: 1; }
  /* The panel wraps tab content in space-6 padding, so section cards sat
     inset (narrower) while the sidebar cards ran full width — they looked
     mismatched once stacked. Drop the panel's own padding on phones so every
     card (section + sidebar) shares the same full width; cards carry their
     own padding already. */
  .profile-panel { padding: 0; }
  .profile-grid > * { min-width: 0; }
}

/* Onboarding/Offboarding checklist profile tab (Phase 10 data, added Phase 13) */
.chk-progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.chk-progress .balance-bar { flex: 1; }
.chk-progress__label { flex-shrink: 0; font-size: var(--text-sm); color: var(--color-fg-muted); white-space: nowrap; }
.chk-table { display: flex; flex-direction: column; }
.chk-row { display: grid; grid-template-columns: 28px 1fr 120px 120px 32px; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.chk-row:last-child { border-bottom: 0; }
.chk-row--head { color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.chk-row__title { font-size: var(--text-sm); }
.chk-row.is-done .chk-row__title { color: var(--color-fg-muted); text-decoration: line-through; }
.chk-row__date { font-size: var(--text-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
/* Phase badge (Phase 82) — replaces the raw createdAt date in the "start"
   column whenever a per-item dueDate could be computed from the template's
   dueOffsetDays; same pill shape as .status-badge, neutral tone throughout
   (the phase itself, not done/overdue state, is the information here). */
.chk-phase {
  display: inline-flex; align-items: center; padding: 2px var(--space-2);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold);
  background: var(--color-surface-2); color: var(--color-fg-muted);
}
.chk-phase--day1 { background: var(--color-primary-soft); color: var(--color-primary); }
@media (max-width: 640px) {
  .chk-row { grid-template-columns: 28px 1fr 32px; }
  .chk-row__date { display: none; }
}

/* Onboarding buddy chip (Phase 82) — read-only, shown above the checklist. */
.chk-buddy { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-fg-muted); }
.chk-buddy strong { color: var(--color-fg); font-weight: var(--font-semibold); }

/* Teams (Phase 13) */
.teams-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.teams-eyebrow { margin: 0 0 4px; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: .07em; text-transform: uppercase; }
.teams-header h2 { margin: 0; font-size: var(--text-2xl); letter-spacing: -.025em; }
.teams-header > div > span { display: block; max-width: 660px; margin-top: var(--space-2); color: var(--color-fg-muted); font-size: var(--text-sm); line-height: 1.5; }
.teams-header > .btn { min-height: 42px; white-space: nowrap; }
.teams-header > .btn .icon { width: 16px; height: 16px; }
.teams-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.teams-stat { display: flex; align-items: center; min-width: 0; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.teams-stat > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-primary); }
.teams-stat > span .icon { width: 18px; height: 18px; }
.teams-stat--success > span { background: var(--color-success-soft); color: var(--color-success); }
.teams-stat--warning > span { background: var(--color-warning-soft); color: var(--color-warning); }
.teams-stat--info > span { background: var(--color-blue-soft, var(--color-primary-soft)); color: var(--color-blue, var(--color-primary)); }
.teams-stat div { min-width: 0; }
.teams-stat strong { display: block; font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.teams-stat small { display: block; margin-top: 5px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.teams-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.teams-toolbar h3 { margin: 0; font-size: var(--text-lg); }
.teams-toolbar p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.teams-search { position: relative; display: flex; align-items: center; width: min(280px, 100%); }
.teams-search .icon { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--color-fg-subtle); }
.teams-search input { width: 100%; min-height: 40px; padding: 0 var(--space-3) 0 var(--space-9); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); font: inherit; font-size: var(--text-sm); }
.teams-search input:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.team-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); box-shadow: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.team-card:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 2px; }
.team-card__head { display: flex; align-items: center; min-width: 0; gap: var(--space-3); }
.team-card__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.team-card--1 .team-card__icon { background: var(--color-success-soft); color: var(--color-success); }
.team-card--2 .team-card__icon { background: var(--color-warning-soft); color: var(--color-warning); }
.team-card--3 .team-card__icon { background: var(--color-orange-soft); color: var(--color-orange); }
.team-card__icon .icon { width: 20px; height: 20px; }
.team-card__head > div { flex: 1; min-width: 0; }
.team-card__head p { margin: 0 0 3px; color: var(--color-fg-muted); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.team-card__head h3 { margin: 0; overflow: hidden; font-size: var(--text-lg); font-weight: var(--font-bold); text-overflow: ellipsis; white-space: nowrap; }
.team-card__member-badge { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-sm); font-weight: var(--font-bold); }
.team-card__manager { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.team-card__label { display: block; margin-bottom: var(--space-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-medium); }
.team-card__managerrow { display: flex; align-items: center; gap: var(--space-2); }
.team-card__managername { font-size: var(--text-sm); font-weight: var(--font-medium); }
.team-card__managerpos { font-size: var(--text-xs); color: var(--color-fg-muted); }
.team-card__nomanager { display: grid; min-height: 66px; place-items: center; padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-fg-subtle); font-size: var(--text-sm); }
.team-card__members { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.team-card__members > div { min-width: 0; }
.team-card__avatars { display: flex; }
.team-card__avatars > * { margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); }
.team-card__avatars > *:first-child { margin-left: 0; }
.team-card__more { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--color-surface); border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-fg-muted); font-size: 10px; font-weight: var(--font-semibold); }
.team-card__empty { color: var(--color-fg-subtle); font-size: var(--text-xs); }
.team-card__open { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.team-card__open .icon { width: 14px; height: 14px; }
.teams-filter-empty { padding: var(--space-8); color: var(--color-fg-muted); text-align: center; }

.team-member-row { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
/* 2026-07-29 — was a blanket `span` selector, which also matched the row's
   own avatarHTML() <span class="employee-avatar"> (both teams.js and
   reports.js render exactly avatar-span + label-span here): flex:1 stretched
   the fixed-height avatar to the row's full width, and border-radius:50%
   then clipped that wide-short box into a thin crescent. Scoped to the
   label span only. */
.team-member-row span:not(.employee-avatar) { display: flex; min-width: 0; flex: 1; flex-direction: column; font-size: var(--text-sm); }
.team-member-row span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-member-row span small { margin-top: 2px; overflow: hidden; color: var(--color-fg-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.team-modal-intro,
.team-detail-summary { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.team-modal-intro > span,
.team-detail-summary__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.team-modal-intro .icon,
.team-detail-summary__icon .icon { width: 20px; height: 20px; }
.team-modal-intro strong { font-size: var(--text-sm); }
.team-modal-intro p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.45; }
.team-detail-summary { margin-bottom: var(--space-4); }
.team-detail-summary > div { min-width: 0; }
.team-detail-summary small { color: var(--color-primary); font-size: 10px; font-weight: var(--font-bold); letter-spacing: .06em; text-transform: uppercase; }
.team-detail-summary strong { display: block; margin-top: 2px; font-size: var(--text-lg); }
.team-detail-summary p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); }
.team-detail-section { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.team-detail-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.team-detail-section__head h3 { margin: 0; font-size: var(--text-base); }
.team-detail-section__head span { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-bold); }
.team-detail-manager { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.team-detail-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.team-detail-member { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.team-detail-danger { display: flex; justify-content: flex-end; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.team-detail-danger .btn { color: var(--color-danger); }

@media (max-width: 900px) {
  .teams-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .teams-header,
  .teams-toolbar { align-items: stretch; flex-direction: column; }
  .teams-header > .btn,
  .teams-search { width: 100%; }
  .teams-stats { grid-template-columns: 1fr; gap: var(--space-2); }
  .teams-stat { padding: var(--space-3); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: var(--space-4); }
  .team-detail-members { grid-template-columns: 1fr; }
}

/* View-settings column checkboxes (Phase 18) */
.people-col-check { display: flex !important; align-items: center; gap: var(--space-2); cursor: pointer; }
.people-col-check input { margin: 0; }

/* ═══ Invite Employee modal redesign (2026-07-13) — grouped sections
   instead of one flat form, per an explicit design brief. Reuses the
   shared .modal-form/.modal-label/.modal-input primitives throughout —
   only the section grouping/hints/success screen are new. ═══ */
.invite-form { gap: var(--space-6); }
.invite-section__title {
  font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
/* The email field is the primary one — a taller input than the rest, per
   the brief's "visually emphasized" ask. */
.modal-input--lg { height: 48px; font-size: var(--text-base); }
.invite-field-hint { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-fg-subtle); min-height: 1.2em; }
.invite-field-hint.is-valid { color: var(--color-success); }
.invite-field-hint.is-invalid { color: var(--color-danger); }
/* "Organization" fields grouped inside one visually distinct block. */
.invite-group { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-lg); }

/* Success screen replacing the old instant-close + toast. */
.invite-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) 0; }
.invite-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-success-soft); color: var(--color-success); margin-bottom: var(--space-2); }
.invite-success__icon .icon { width: 28px; height: 28px; }
.invite-success h3 { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 0; }
.invite-success p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); max-width: 40ch; }
.invite-link-row { display: flex; gap: var(--space-2); width: 100%; margin-top: var(--space-3); }
.invite-link-row .modal-input { flex: 1; font-size: var(--text-xs); color: var(--color-fg-muted); }
.invite-success__actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

/* ═══ Edit Employee modal redesign (2026-07-13) — grouped sections (icon +
   title + short description), same device as the Invite modal but richer
   (per the brief) since this form is considerably longer. Reuses the
   shared .modal-form/.modal-label/.modal-input/.modal-row primitives
   throughout — only the section chrome + discard-guard/loading bits are
   new. ═══ */
.edit-form { gap: var(--space-8); }
.edit-section__head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.edit-section__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); }
.edit-section__icon .icon { width: 18px; height: 18px; }
.edit-section__title { margin: 0; font-size: var(--text-base); font-weight: var(--font-bold); }
.edit-section__desc { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-fg-muted); }
.edit-section__body { display: flex; flex-direction: column; gap: var(--space-4); }
/* "Employment" sits in a visually distinct tinted block, matching the
   Invite modal's .invite-group — this is the information HR changes most
   often, per the brief. */
.edit-section--employment .edit-section__body { padding: var(--space-4); background: var(--color-surface-2); border-radius: var(--radius-lg); }
.edit-section + .edit-section { padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* Profile documents: let a single card use the row and wrap its controls. */
.profile-panel .doc-list {
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.profile-panel .doc-item {
  align-items: center;
  flex-wrap: wrap;
}
.profile-panel .doc-item__main { flex: 1 1 180px; }

/* Compensation profile tab (Phase 67) */
.comp-current__label { display: block; margin-bottom: 4px; color: var(--color-fg-muted); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.02em; }
.comp-modal-intro { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.comp-modal-intro > span { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); }
.comp-modal-intro .icon { width: 20px; height: 20px; }
.comp-modal-intro strong { font-size: var(--text-sm); }
.comp-modal-intro p { margin: 3px 0 0; color: var(--color-fg-muted); font-size: var(--text-xs); line-height: 1.45; }