/* People planning: the table of people by bucket, the cell colours of R4.5 and the drill-down
   lines (PPL-1 – PPL-7). Colours are the design's load and compare tints. */

.people-page {
  gap: 14px;
}

.pp-switches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pp-sub {
  margin: 0;
  max-width: 640px;
}

.pp-legend-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}

.pp-range {
  font-weight: var(--w-semibold);
  color: oklch(var(--l350) calc(.02 * var(--c)) var(--h));
}

.pp-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.pp-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: calc(5px * var(--r));
}

.pp-hidden {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-row);
  background: var(--tint);
  font-size: 13px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ colours (R4.5) */

.pp-empty {
  background: transparent;
  color: oklch(var(--l800) calc(.01 * var(--c)) var(--h));
}

.pp-light {
  background: oklch(var(--l975) calc(.014 * var(--c)) 155);
  color: oklch(var(--l500) calc(.05 * var(--c)) 155);
}

.pp-comfortable,
.pp-on-track {
  background: oklch(var(--l940) calc(.045 * var(--c)) 155);
  color: oklch(var(--l420) calc(.09 * var(--c)) 155);
}

.pp-nearly-full {
  background: oklch(var(--l930) calc(.07 * var(--c)) 85);
  color: oklch(var(--l450) calc(.1 * var(--c)) 70);
}

.pp-over,
.pp-unplanned {
  background: oklch(var(--l880) calc(.08 * var(--c)) 25);
  color: oklch(var(--l420) calc(.14 * var(--c)) 25);
}

.pp-under {
  background: oklch(var(--l930) calc(.05 * var(--c)) 235);
  color: oklch(var(--l420) calc(.11 * var(--c)) 235);
}

/* the same colours as text only, for the lines under a person */
.pp-comfortable-text,
.pp-on-track-text {
  color: oklch(var(--l420) calc(.09 * var(--c)) 155);
}

.pp-over-text,
.pp-unplanned-text {
  color: oklch(var(--l420) calc(.14 * var(--c)) 25);
}

.pp-under-text {
  color: oklch(var(--l420) calc(.11 * var(--c)) 235);
}

.pp-nearly-full-text {
  color: oklch(var(--l450) calc(.1 * var(--c)) 70);
}

/* ------------------------------------------------------------------ the table */

.pp-card {
  overflow-x: auto;
}

.pp-table {
  min-width: 900px;
}

.pp-row {
  display: grid;
  align-items: center;
  padding: 0 12px;
}

.pp-row--head {
  align-items: end;
  font-size: 11.5px;
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pp-head__person {
  padding: 12px 8px;
}

.pp-head__label {
  padding: 12px 8px;
}

.pp-head__bucket {
  padding: 10px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.pp-head__bucket--now {
  color: var(--accent-ink);
}

.pp-head__sub {
  font-size: 10.5px;
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.pp-person {
  border-top: 1px solid var(--rule);
}

.pp-row--person:hover {
  background: oklch(var(--l985) calc(.008 * var(--c)) var(--h));
}

.pp-person__who {
  min-width: 0;
}

.pp-person__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  min-width: 0;
}

.pp-person__chevron {
  width: 12px;
  font-size: 10px;
  color: var(--muted);
}

.pp-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pp-person__name {
  font-weight: var(--w-semibold);
}

.pp-person__node {
  font-size: 11.5px;
  color: var(--muted);
}

.pp-total {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 8px;
}

.pp-total__value {
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pp-total__sub {
  font-size: 11.5px;
  font-weight: var(--w-semibold);
  white-space: nowrap;
  color: var(--muted);
}

.pp-total__sub--good {
  color: oklch(var(--l450) calc(.09 * var(--c)) 155);
}

.pp-total__sub--bad {
  color: oklch(var(--l450) calc(.15 * var(--c)) 25);
}

.pp-cell {
  margin: 6px 3px;
  padding: 8px 2px;
  min-height: 40px;
  border-radius: calc(12px * var(--r));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  transition: background .2s;
}

.pp-cell__sub {
  font-size: 10.5px;
  font-weight: var(--w-semibold);
}

.pp-lines {
  padding: 0 12px 10px;
  background: oklch(var(--l990) calc(.004 * var(--c)) var(--h));
}

.pp-line {
  display: grid;
  align-items: center;
}

.pp-line__name {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 62px;
  min-width: 0;
}

.pp-line__link {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-line__link:hover {
  color: var(--link);
  text-decoration: underline;
}

.pp-line__text {
  font-size: 13px;
  font-weight: var(--w-semibold);
  color: var(--muted);
}

.pp-line__tag {
  padding: 1px 7px;
  border-radius: var(--rp);
  background: var(--tint);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.pp-line__total {
  padding: 8px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pp-line__cell {
  text-align: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: oklch(var(--l450) calc(.02 * var(--c)) var(--h));
}