/* История операций по карте клиента.

   Пока пустая: начислений ещё нет, но место у них уже своё. Раздел,
   увиденный однажды, потом ищут глазами там же, — поэтому он стоит
   на карточке с самого начала, а не появляется вместе с первой
   операцией.

   Заголовок и «Все» — в одной строке: слева что это, справа куда идти
   за полным списком. */

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

.log__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.log__title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* «Все» — словом и золотым: это единственная дорога из блока наружу,
   и выглядеть она должна дорогой, а не подписью. */
.log__all {
  flex: none;
  padding: var(--sp-1) var(--sp-2);
  margin-right: calc(var(--sp-2) * -1);
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

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

@media (hover: hover) {
  .log__all:hover { background: var(--surface-2); }
}

/* Пустое место внутри блока, а не на весь экран: поля скромнее,
   знак мельче — здесь оно часть карточки, а не сам экран. */
.empty--inside {
  padding: var(--sp-5) var(--sp-2) var(--sp-2);
  gap: var(--sp-2);
}

.empty--inside .empty__mark {
  width: 14cqw;
  height: 14cqw;
}

.empty--inside .empty__mark .icon {
  width: 6.5cqw;
  height: 6.5cqw;
}

.empty--inside .empty__note { max-width: 66cqw; }