/* ═══════════════════════════════════════
   Кладовая (спек 2026-10-15-pantry-design.md)
   ═══════════════════════════════════════ */

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

/* Шапка — сеткой (решение 2026-10-23): заголовок и биомасса на первой
   строке, слово Смотрителя под ними во всю ширину; флекс с переносом ставил
   текст рядом с биомассой. На телефоне — колонкой в порядке разметки. */
.pantry__header {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto;
    column-gap: var(--space-md);
    align-items: start;
    margin-bottom: var(--space-lg);
}

.pantry__title {
    grid-column: 1;
    grid-row: 1;
}

.pantry__lead {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--space-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

.pantry__balance {
    grid-column: 2;
    grid-row: 1;
    color: var(--text-muted);
}

/* Вкладки «Генные образцы / Плоды» — общий .tabs; здесь только отступ до
   панели. Скрытая панель — атрибутом hidden. */
.pantry__tabs {
    margin-bottom: var(--space-lg);
}

.pantry__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
}

.pantry__filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

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

/* Плод — строкой: имя, действие и запас слева, редкость, справа действия. На
   телефоне действия уходят под текст столбиком во всю ширину. */
.pantry__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md) var(--space-lg);
}

.pantry__main {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.pantry__name {
    font-weight: 700;
    color: var(--text-primary);
}

.pantry__meta {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.pantry__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

/* Подпись продажи растёт со степпером («Продать за 15…» → «…за 180…»), и
   кнопка своей ширины раздвигалась на каждую цифру: степпер и бирка слева
   съезжали (найдено 2026-10-16). Поэтому подпись держит ширину самой
   длинной своей версии — выручки за весь запас, data-widest от pantry.js:
   невидимый образец нулевой высоты стоит над подписью в той же колонке.
   Цифры моноширинные (у Rubik есть tnum): иначе «111» уже «888», и ширина
   образца с другими цифрами не была бы потолком. */
.pantry__sell-label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

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

/* Окно «Использовать»: что делает плод, сколько скормить и список химер.
   Строка химеры — как плод в окне кормления вивария: пунктир тушью между
   строками, кнопка справа, на телефоне — под текстом. */
.use__effect {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.use__quantity {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
}

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

/* Отступ снизу — до ряда «Закрыть»: своего верхнего отступа у ряда действий
   модалки нет, и кнопка липла бы к пунктиру последней химеры. */
.use__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 60vh;
    margin-bottom: var(--space-lg);
    overflow-y: auto;
    list-style: none;
}

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

.use__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: var(--border-ink-thin) dashed var(--ink);
}

.use__avatar {
    width: 48px;
    height: 48px;
}

.use__main {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.use__name {
    font-weight: 700;
    color: var(--text-primary);
}

.use__facts {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .pantry {
        padding: var(--space-lg) var(--space-md);
    }

    /* Шапка колонкой в порядке разметки: заголовок, текст, биомасса. */
    .pantry__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .pantry__title,
    .pantry__lead,
    .pantry__balance {
        grid-column: 1;
        grid-row: auto;
    }

    .pantry__balance {
        margin-top: var(--space-md);
    }

    .pantry__filter {
        flex: 1 1 140px;
    }

    /* Действия — столбиком во всю ширину карточки: степпер, продажа,
       «Использовать». Своей ширины в ряд с переносом они вставали лесенкой у
       левого края (2026-10-16). Поле степпера растягивается, кнопки «−» и
       «+» остаются своего размера. */
    .pantry__actions {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .pantry__actions .stepper__input {
        flex: 1 1 auto;
    }

    /* В окне «Использовать» — то же: степпер «Сколько» и «Скормить» у каждой
       химеры во всю ширину строки, а не своей ширины у левого края. */
    .use__quantity {
        flex-wrap: wrap;
    }

    .use__quantity .stepper {
        flex: 1 1 100%;
    }

    .use__quantity .stepper__input {
        flex: 1 1 auto;
    }

    .use__row [data-feed-to] {
        flex: 1 1 100%;
    }
}