/* Keep every record on the same columns, including non-personnel costs. */
.cost-record-list > article {
  grid-template-columns: minmax(170px, 1fr) minmax(400px, 2fr) 110px 230px;
  gap: 16px;
}
.cost-record-list > article > div:first-child { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.cost-record-list > article > .employee-acquisition-metrics { grid-column: 2; grid-row: 1; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cost-record-list > article > strong { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-record-list > article > div:last-child {
  grid-column: 4; grid-row: 1; display: grid; grid-template-columns: 100px 58px 58px;
  gap: 7px; align-items: start; min-width: 0;
}
.cost-record-list > article > div:last-child > .salary-rest-control { display: contents; }
.cost-record-list > article > div:last-child > .salary-rest-control > button { grid-column: 1; grid-row: 1; }
.cost-record-list > article > div:last-child > button.secondary-button { grid-column: 2; grid-row: 1; }
.cost-record-list > article > div:last-child > button.reject-button { grid-column: 3; grid-row: 1; }
.cost-record-list > article > div:last-child > button,
.cost-record-list > article > div:last-child > .salary-rest-control > button { width: 100%; padding-inline: 8px; min-width: 0; white-space: nowrap; }
.cost-record-list .salary-rest-card-summary { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
.cost-record-list .employee-acquisition-metrics strong { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .cost-record-list > article { grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; }
  .cost-record-list > article > strong { grid-column: 2; grid-row: 1; }
  .cost-record-list > article > .employee-acquisition-metrics { grid-column: 1 / -1; grid-row: 2; }
  .cost-record-list > article > div:last-child { grid-column: 1 / -1; grid-row: 3; justify-content: end; }
}
@media (max-width: 560px) {
  .cost-record-list > article > .employee-acquisition-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-record-list > article > div:last-child { grid-template-columns: minmax(100px, 1fr) 58px 58px; justify-content: stretch; }
}