/* Строка заказа в блоке истории на карточке клиента.

   Вынесена из log.css, когда тот перерос двести строк: там сам блок
   с заголовком и сводкой, здесь — одна его строка.

   Короче, чем карточка в самом разделе: здесь их три и они часть
   чужого блока. */

.log__sale {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

/* Значок в кружке — тот же приём, что у строк ленты событий:
   он говорит «это заказ» раньше, чем прочитан номер. */
.log__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--r-md);
  /* Та же тёплая подложка, что у строки заказа в самом разделе:
     одна и та же запись не может выглядеть в двух местах по-разному. */
  background: var(--plate-warm);
  color: var(--accent);
}

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

.log__what {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3cqw;
}

.log__number {
  font-size: var(--fs-sm);
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log__when {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.log__money {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3cqw;
}

.log__sum {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.log__gain {
  font-size: var(--fs-xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ok);
}

/* Подпись у числа: чем оно является. Мелкая и приглушённая — число
   остаётся главным, а слово снимает вопрос «которое из двух». Та же,
   что у строки заказа в самом разделе (components/sale.css). */
.log__tag {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
}