/* Одна продажа в истории клиента и заработок в форме.

   Карточка читается сверху вниз, как её и рассказывают вслух: что
   продали и когда, потом три числа — за сколько продали, во что оно
   обошлось, сколько осталось.

   Заработок выделен цветом, а не размером: он последний в списке,
   и глаз находит его по цвету, не пересчитывая строки. Зелёный тот же,
   что у надёжного пароля и подтверждённой почты, — «хорошо» в продукте
   одного цвета. */

.sales {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sale {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* В истории карточка — дорога в правку: нажимается целиком, шеврон
   в углу говорит, что за ней есть продолжение. В блоке на карточке
   клиента дороги нет, и тогда карточка ничем не отзывается
   на нажатие — обещать несуществующее хуже, чем молчать. */
.sale--go {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.sale--go:active { background: var(--surface-2); }

@media (hover: hover) {
  .sale--go:hover { border-color: var(--accent-dim); }
}

/* Название и дата в одной строке: слева что это было, справа когда.
   Дата мельче и приглушена — она уточняет, а не называет. */
.sale__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

/* Шеврон стоит по верхней строке, рядом с датой, а не по центру
   карточки: та в три строки высотой, и знак посередине читался бы
   как относящийся к сумме. */
.sale__go {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  margin-right: calc(var(--sp-2) * -1);
}

.sale__go .icon {
  width: var(--fs-md);
  height: var(--fs-md);
}

.sale__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-md);
  font-weight: 650;
}

.sale__date {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.sale__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sale__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.sale__name {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* Числа в столбик и одной шириной цифры: три суммы одна под другой
   должны сравниваться взглядом, а не чтением. */
.sale__value {
  font-size: var(--fs-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sale__row--gain .sale__value { color: var(--ok); }

/* Заработок в форме продажи. Не поле: рамки нет, курсора нет,
   нажать не на что — это ответ формы на два соседних числа.
   Стоит между ценой и датой, там же, где его считают в уме. */
.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);
}