/* The decklist of the deck page as text or as card images, the main deck grouped by type or by role
   (partials/analysis-tabs-decklist.blade.php). */

.dl-switches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dl-switch { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: #171220; border: 1px solid rgba(255, 255, 255, 0.1); }
.dl-switch__button {
    min-height: 2.25rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted, #9aa7bb);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}
.dl-switch__button.is-on { background: #2a1c52; color: #fff; }
.dl-switch__button:focus-visible { outline: 2px solid var(--accent-secondary, #d998ff); outline-offset: 1px; }

.dl-pane[hidden] { display: none; }

/* as text: two columns of groups, each card is its copies, its name and its cost */
.dl-columns { column-count: 2; column-gap: 1.75rem; }
.dl-group { break-inside: avoid; margin-bottom: 1rem; }
.dl-row { display: flex; align-items: center; gap: 0.6rem; min-height: 1.9rem; font-size: 0.9rem; }
.dl-row__qty { flex: none; width: 1.3rem; color: var(--accent-secondary, #d998ff); }
.dl-row__name { flex: 1; min-width: 0; }
.dl-row__cost { flex: none; font-size: 0.75rem; white-space: nowrap; }

@media (max-width: 767.98px) {
    .dl-columns { column-count: 1; }
    .dl-switch__button { min-height: 2.75rem; }
    .dl-row { min-height: 2.4rem; }
}