/*
 * wallet-history.css — журнал операций кошелька (assets/js/wallet-history.js).
 * Направление «Полночный архив», бриф — /DESIGN.md. Только роли из tokens.css.
 *
 * Пара к collection.css: там экспонаты собрания, здесь — движение денег. Операция
 * показана как строка музейной этикетки (.label в components.css): слева что было,
 * справа сколько и каким стал баланс. Своей кнопки, своей поверхности и своих
 * красок тут нет — кнопка .btn--ghost из набора, разделитель волосяной.
 */

.ops {
    width: 100%;
    max-width: var(--container);
    padding: 0 var(--gutter);
    margin-top: var(--space-6);
}

/* Метка раздела, а не заголовок экрана: экран уже назван выше («Твой кошелёк»).
   Тот же приём, что у заголовка дня в собрании. */
.ops__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-ui);
    color: var(--mark);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--hair);
}

/* Счётчик операций и он же — пустое состояние и сообщение об ошибке. */
.ops__hint {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--body);
    margin: 0 0 var(--space-4);
}

.ops__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Две колонки: слева название и время, справа сумма и баланс. Название переносится,
   сумма — никогда: она короткая и её сканируют глазом сверху вниз. */
.ops__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-5);
    row-gap: 2px;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--hair);
}

.ops__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-ui);
    line-height: var(--lh-normal);
    color: var(--ink);
    /* Длинное название («Совместимость с ребёнком») переносится по словам и
       не выдавливает сумму за край. */
    overflow-wrap: anywhere;
}

/* Сумма — то, ради чего человек сюда пришёл. Приход и расход различает знак и тон:
   пришедшее набрано цветом текста, ушедшее — тоном тела. Второго акцентного цвета
   в направлении нет, поэтому зелёного и красного здесь не будет. */
.ops__sum {
    font-family: var(--font-body);
    font-size: var(--fs-ui);
    font-weight: 600;
    line-height: var(--lh-normal);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ops__sum--in  { color: var(--ink); }
.ops__sum--out { color: var(--body); font-weight: 500; }

.ops__meta,
.ops__balance {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--mark);
}

.ops__balance {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ops__more { margin-top: var(--space-5); }