@layer components {
/* The extras-budget editor: a list of itemised rows on the project form and
   the employment modal alike. */
.extras-budgets {
  margin-block: var(--spacing-4);
  padding-block-start: var(--spacing-3);
  border-block-start: var(--border-width) solid var(--border);
}

.extras-budgets__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-2);
  margin: 0 0 var(--spacing-2);
}

.extras-budgets__total {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
}

.extras-budgets__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* What the extra is for takes the room; the amount stays narrow beside it, so
   the row still fits its remove button on one line. `.field-row > .field` gives
   every field a 12rem basis, and both live in @layer components now — hence the
   extra class, which out-specifies it whatever order the sheets load in. */
.field-row.extra-budget-row > .extra-budget-row__what {
  flex: 1 1 12rem;
}

.field-row.extra-budget-row > .extra-budget-row__amount {
  flex: 0 1 8rem;
}

.extras-budgets__add {
  align-self: flex-start;
  margin-block-start: var(--spacing-2);
}
}