/* ═══════════════════════════════════════
   Раздел «Эссенция» (спек 2026-10-20-essence-payments-design.md, 9.1;
   макет v10). Полоса валют — общий .wallet-bar из global.css; вкладки,
   карточки, бирки, степпер и кнопки — общие компоненты, здесь только
   раскладка раздела. Цвета — токены global.css.
   ═══════════════════════════════════════ */

.essence {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

.essence__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.essence__intro {
    flex: 1 1 24rem;
    min-width: 0;
}

.essence__hint {
    margin-top: var(--space-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.essence__tabs {
    margin-bottom: var(--space-xl);
}

.essence__error {
    margin-bottom: var(--space-lg);
}

.essence__from-cart {
    margin-bottom: var(--space-lg);
    line-height: 1.6;
    color: var(--text-secondary);
}

.essence__more {
    align-self: center;
    margin-top: var(--space-lg);
}

/* ── Пакеты пополнения ───────────────────────────────────────── */

/* Все пакеты одного размера: ряды по самому высокому, карточка — во всю
   ячейку. */
.packs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    list-style: none;
}

.packs__item {
    display: flex;
}

.pack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    width: 100%;
    height: 100%;
    font: inherit;
    text-align: left;
    text-align-last: auto;
}

.pack__amount {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.1;
}

.pack__amount .currency-icon {
    width: 22px;
    height: 22px;
}

.pack__unit {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.pack__price {
    margin-top: var(--space-xs);
    font-size: var(--font-lg);
    font-weight: 700;
}

/* Бирка выгоды — во всю ширину карточки, прижата к низу. Заливка —
   подсветка, как у бирки способности в строке: выгода — пометка, а не
   редкость. */
.pack__tags {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-xs);
    min-height: 22px;
    margin-top: auto;
    padding-top: var(--space-xs);
}

.pack__saving {
    justify-content: center;
    padding: 0 var(--space-xs);
    line-height: 1.25;
    background: var(--highlight);
    white-space: normal;
    text-align: center;
    text-align-last: center;
}

/* ── Оплата: итог, кнопка, мелкий шрифт ──────────────────────── */

.pay {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pay__summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-lg);
    align-items: baseline;
}

.pay__total {
    font-family: var(--font-display);
    font-size: var(--font-title);
}

.pay__get {
    color: var(--text-secondary);
}

.pay__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    align-items: center;
}

/* Подпись «Оплатить N ₽» держит ширину самой длинной своей версии — цены
   самого дорогого пакета (data-widest от essence.js): кнопка своей ширины
   росла с ценой, и логотип рядом съезжал при выборе пакета (2026-10-22).
   Образец — на подписи, а не на кнопке: ::before общих кнопок занят
   припуском нажатия. Цифры моноширинные (tnum у Rubik): иначе образец с
   другими цифрами не был бы потолком. */
.pay__label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.pay__label::before {
    content: attr(data-widest);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Логотип платёжного сервиса со ссылкой на его сайт (п. 4.3.4 оферты):
   картинка своего цвета, в карточке светлой в обеих темах. */
.pay__provider {
    display: inline-flex;
    align-items: center;
}

.pay__provider-logo {
    display: block;
    width: auto;
    height: 20px;
}

.pay__closed {
    font-weight: 700;
}

/* Мелкий шрифт и ссылки — общий .fine-print (global.css), здесь — отступ
   маркеров списка. */
.pay__fine {
    padding-left: var(--space-lg);
}

/* Почта чека — одно слово без мест переноса: длинная вылезала за карточку на
   320 px (e2e pages.spec, «узкий телефон», Firefox). */
.pay__email {
    overflow-wrap: anywhere;
}

.pay__closed a {
    color: var(--accent);
}

/* ── Обмен ───────────────────────────────────────────────────── */

.exchange {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.exchange-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.exchange-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--font-section);
}

.exchange-card__rate,
.exchange-card__limit {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.exchange-card__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.exchange-card__label {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Степпер и кнопка — во всю ширину карточки: растёт поле. */
.exchange-card__field .stepper {
    display: flex;
    align-self: stretch;
}

.exchange-card__field .stepper__input {
    flex: 1 1 auto;
}

.exchange-card__result {
    font-size: var(--font-lg);
}

.exchange-card__result b {
    font-family: var(--font-display);
    font-weight: 400;
}

.exchange-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.exchange-card__actions > * {
    flex: 1 1 auto;
}

/* ── История ─────────────────────────────────────────────────── */

.essence__panel[data-panel="history"] {
    display: flex;
    flex-direction: column;
}

.ledger {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    list-style: none;
}

.ledger-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
}

.ledger-row__main {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ledger-row__kind {
    font-weight: 700;
}

.ledger-row__date {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

/* Сумма и бирка — одна группа: на десктопе у правого края карточки, сумма
   вплотную к бирке, а у обмена бирки нет — сумма у самого края (решение
   2026-10-22). На телефоне группа уходит строкой ниже — см. медиазапрос. */
.ledger-row__tail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm) var(--space-md);
    min-width: 0;
    margin-left: auto;
}

/* Сумма переносится между частями, а не внутри них: части пишет сценарий,
   « · » — с неразрывным пробелом перед точкой, строка с неё не начинается.
   Со значками вместо слов обмен крупного пакета («−18 750 · +187 500») в
   строку помещается и на 320 px — перенос остаётся страховкой. */
.ledger-row__sum {
    min-width: 0;
    font-family: var(--font-display);
    text-align: right;
    text-align-last: auto;
}

.ledger-row__part {
    white-space: nowrap;
}

/* Валюта суммы — значком из полосы валют (решение 2026-10-22), слово
   остаётся в строке для чтения с экрана и скрыто только от глаз. */
.ledger-row__noun {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ledger-row__icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    vertical-align: -2px;
}

/* Бирки статуса одной ширины — по самой длинной подписи: невидимый образец
   нулевой высоты (data-widest от essence.js) стоит над подписью, как у
   кнопки продажи в Кладовой. Иначе «Списано» уже «Зачислено», и суммы
   соседних строк кончались бы в разных местах. */
.ledger-row__status {
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.ledger-row__status::before {
    content: attr(data-widest);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Бирки статусов: «Зачислено» и «Ждём оплату» у пополнения, «Списано» у
   возврата пополнения. */
.tag--status-ok {
    background: var(--success);
    color: var(--text-on-accent);
}

.tag--status-wait {
    background: var(--card);
}

.tag--status-back {
    background: var(--ink-muted);
    color: var(--text-on-accent);
}

@media (max-width: 600px) {
    .packs {
        grid-template-columns: 1fr 1fr;
    }

    .pay__actions {
        width: 100%;
    }

    .pay__actions > .btn--primary {
        flex: 1 1 100%;
    }

    /* Телефон: сумма — строкой под датой, с того же края, что заголовок;
       бирка — у правого края, и бирки строк стоят одним столбцом. */
    .ledger-row__tail {
        flex-basis: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .ledger-row__sum {
        text-align: left;
        text-align-last: auto;
    }
}