/* ═══════════════════════════════════════
   Коллекция: карточки видов с состоянием каждого слота
   ═══════════════════════════════════════ */

/*
 * Своих цветов и отступов файл не заводит — только переменные из global.css,
 * поэтому переключатель темы работает без правок здесь. Карточка вида —
 * .paper-card, редкость — общая бирка .tag--rarity-*: один и тот же вид
 * обязан выглядеть одинаково в коллекции и в магазине.
 */
.collection {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
}

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

.collection__title {
    margin-bottom: var(--space-sm);
}

.collection__hint {
    max-width: 560px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.collection__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: end;
}

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

.collection__filter--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
}

.collection__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl);
}

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

.species-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Геометрия квадрата с контуром — в .chimera-avatar из global.css, здесь
   только размер: тот же, что у аватара в карточке вивария. */
.species-card__avatar {
    width: 72px;
    height: 72px;
}

/* Название и бирка — колонкой справа от картинки. В одну строку с ними на
   самой узкой карточке (две колонки сетки, шапка ~250px) названию оставалось
   ~60px при слове «Тасманийский» в ~120px, и слово рвалось посреди; колонкой
   ему достаётся всё место за картинкой. */
.species-card__heading {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    min-width: 0;
}

/* Разрыв посреди слова — только крайний случай: слово длиннее всей колонки.
   Обычный перенос идёт между словами. */
.species-card__name {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: var(--font-lg);
}

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

/* Заголовок списка частей — <summary>: на телефоне список свёрнут
   (open ставит collection.js по ширине экрана), в заголовке число частей и
   купленных. display: list-item держит маркер раскрытия. */
.species-card__parts-summary {
    display: list-item;
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.species-card__slots {
    display: flex;
    flex-direction: column;
    list-style: none;
}

/* Слот — строка внутри карточки с пунктирным разделителем. */
.species-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: var(--border-ink-thin) dashed var(--ink-muted);
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

.species-slot:last-child {
    border-bottom: none;
}

/* Три состояния запаса вместо прежних двух «открыто / закрыто». */

/* Есть свободный экземпляр: часть можно поставить в новую химеру. */
.species-slot--free {
    color: var(--success);
}

/* Куплена, но все экземпляры стоят в химерах: ни надеть, ни разобрать. */
.species-slot--busy {
    color: var(--text-secondary);
}

/* Не куплена вовсе — по умолчанию, отличается только отсутствием подсветки. */
.species-slot--missing {
    color: var(--text-secondary);
}

/* Запас и держатели занимают всю ширину строки: слот стал многострочным. */
.species-slot {
    flex-wrap: wrap;
}

.species-slot__stock {
    font-variant-numeric: tabular-nums;
}

.species-slot__genes {
    flex-basis: 100%;
    font-size: var(--font-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.species-slot__holders {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.species-slot__salvage {
    border: none;
    background: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.species-slot__salvage:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
    text-decoration: none;
}

/* Слот, в котором вид не даёт генов, покупать бессмысленно — он приглушён. */
.species-slot--unavailable {
    opacity: 0.5;
}

.species-slot__price {
    border: none;
    background: none;
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.species-slot__price:hover {
    color: var(--accent-hover);
}

/* ═══════════════════════════════════════
   Адаптивность
   ═══════════════════════════════════════ */
@media (max-width: 600px) {
    .collection__grid {
        grid-template-columns: 1fr;
    }

    .collection__filters {
        width: 100%;
    }

    /* Как в магазине: каждый селект тянется от 140px, и лишние переносятся
       целиком. Без этого селект вставал шириной своих вариантов, и три
       селекта шли столбиком с рваным краем. Сторож — e2e `chimeras.spec`,
       фильтры коллекции на телефоне. */
    .collection__filter {
        flex: 1 1 140px;
    }

    /* Флажок — своей строкой во всю ширину под селектами. */
    .collection__filter--checkbox {
        flex: 1 1 100%;
    }
}