/* Заработок в форме продажи.

   Вынесен из sale.css, когда тот перерос двести строк: там заказ,
   каким он стоит в списке, а здесь — ответ формы на два соседних
   числа, цену и себестоимость.

   Не поле: рамки нет, курсора нет, нажать не на что. Стоит между
   ценой и датой — там же, где его считают в уме. */
.gain {
  display: flex;
  flex-direction: column;
  gap: 0.4cqw;
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.gain__name {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* Того же размера, что значения в полях рядом, но обычным шрифтом,
   а не моноширинным: у моноширинного пробел перед знаком валюты
   вдвое шире обычного, и «800 ₽» разъезжалось на два слова. Моно
   стоит там, где человек набирает цифру за цифрой, а здесь сумма
   приходит готовой — вместе со знаком. */
.gain__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
}