/* ========================================
   ALL CARDS (set-header handoff Phase 5, mock 6e, 2026-09-30; moved from
   css/pokemon/ in Phase 7, the same day)
   Every game's All Cards page (/cards): templates/pokemon/cards.php and,
   from Phase 7, the One Piece and Palworld cards views. The header,
   toolbar and sticky bar are the shared stack (shared/tcg/set-detail.css);
   this file holds what the All Cards frame adds: the search width the 6e
   mock asks for, the toolbar row-break rule for the right group, the
   bottom pagination (templates/shared/tcg/all-cards-pagination.php: a
   segmented 70 / 140 per page, the status line, the numbered window, the
   ghost Previous / Next) and its empty line. The page-flow and toolbar
   rules are scoped to the page wrapper (<div class="page-content
   cards-page all-cards">), the rest to the partial's own classes.
   Loaded after set-detail.css and cards.css, which it overrides where it
   must. No new colours: every value is a style.css token. Nothing here is
   Pokemon-only, but the widths were measured on the Pokemon page (two
   listboxes, five-digit chip counts): a page with more listboxes should
   check the row-break range at its own widths.
   ======================================== */

/* The set page's flow (block, the shared margins) applies here. cards.css
   made .cards-page a flex column with a 32px gap and a 40px top margin until
   2026-10-04, which this rule overrode: the gap would open around the sticky
   bar's 1px sentinel and defeat its negative margin. The One Piece and
   Palworld sets indexes, the last flex users, moved to the Pokémon index's
   block wrapper that day, and the flex rule went. */
.all-cards.cards-page {
    display: block;
    margin: 0 0 var(--space-40);
}

/* The mock's search is 280px at 1440 (README 6e); the shared rule flexes
   it from 320 down to 240. Start at 280 and keep the same floor. */
@media (min-width: 1420px) {
    .all-cards .set-toolbar__search {
        flex-basis: 280px;
        width: 280px;
    }
}

/* DECISIONS.md, "6e toolbar at 1440": with the Rarity and Type listboxes
   the right group does not fit beside the search and four chips with
   five-digit counts below about 1520px, so it takes its own row,
   right-aligned, 16px under the left group, instead of squeezing the chip
   text (never shrink chip text). Measured 2026-09-30 in the Phase 5 harness
   at 1440 and 1280. */
@media (min-width: 1024px) and (max-width: 1519px) {
    .all-cards .set-toolbar__left--chips {
        flex: 1 1 100%;
    }

    .all-cards .set-toolbar__left--chips ~ .set-toolbar__right {
        flex: 0 0 100%;
        justify-content: flex-end;
    }
}

/* Under 1024px the shared rule keeps the right group on one nowrap row for
   Sort and the View menu; All Cards adds its listboxes (Rarity and Type
   on Pokemon), so the controls go two by two at 44px (Rarity · Type, then
   Sort · View). */
@media (max-width: 1023px) {
    .all-cards .set-toolbar__right {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .all-cards .set-toolbar__right .tb-menu {
        min-width: 0;
    }

    .all-cards .set-toolbar__right .tb-menu__button {
        width: 100%;
        justify-content: space-between;
    }

    .all-cards .set-toolbar__right .tb-menu__value {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: right;
    }

    /* The shared rule puts the four chips in a quarter-column grid, which
       a set page's three-digit counts fit; Pokemon's five-digit counts
       ("Missing 18,796") overflow an 83px cell at 390 and run into the
       chip beside them. Two by two at 44px instead. Scoped to the toolbar:
       the sticky bar's chips carry no counts and stay four across. */
    .all-cards .set-toolbar .filter-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Empty state ── */
.all-cards__empty {
    max-width: 1600px;
    margin: 0 auto var(--space-32);
    font-family: var(--font-paragraph);
    font-size: var(--text-sm);
    color: var(--colour-text-muted);
}

/* ── Bottom pagination (mock 6e; DECISIONS 4 adds page numbers) ── */
.all-cards-pagination {
    --sh-hairline: color-mix(in srgb, var(--colour-text) 8%, transparent);
    --sh-hover: color-mix(in srgb, var(--colour-text) 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    max-width: 1600px;
    margin: var(--space-32) auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--sh-hairline);
}

.all-cards-pagination__lead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* The segmented per-page switch: the toolbar's .seg-switch look, on links
   (aria-current marks the active one; the shared rule keys on aria-checked,
   which a link may not carry). */
.all-cards-pagination__size {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--sh-hairline);
}

.all-cards-pagination__size a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--font-header);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--colour-text);
    text-decoration: none;
    white-space: nowrap;
}

.all-cards-pagination__size a:hover {
    background: var(--sh-hover);
}

.all-cards-pagination__size a[aria-current="true"] {
    background: var(--colour-primary);
    color: #FAFAFA;
}

.all-cards-pagination__size a:focus-visible {
    outline: 3px solid var(--colour-focus-ring);
    outline-offset: 2px;
}

.all-cards-pagination__status {
    margin: 0;
    font-family: var(--font-paragraph);
    font-size: 14px;
    color: var(--colour-text-muted);
}

/* The numbered window: first, last, the current page and its two
   neighbours, with a gap mark between runs. */
.all-cards-pagination__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.all-cards-pagination__pages a,
.all-cards-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: var(--radius-xs);
    font-family: var(--font-header);
    font-size: 13px;
    font-weight: 600;
    color: var(--colour-text);
    text-decoration: none;
}

.all-cards-pagination__pages a:hover {
    background: var(--sh-hover);
}

.all-cards-pagination__pages a[aria-current="page"] {
    background: var(--colour-primary);
    color: #FAFAFA;
}

.all-cards-pagination__pages a:focus-visible {
    outline: 3px solid var(--colour-focus-ring);
    outline-offset: 2px;
}

.all-cards-pagination__gap {
    color: var(--colour-text-muted);
}

.all-cards-pagination__nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The ghost Previous / Next (set-states.css .btn--ghost) at the mock's
   weight; a disabled end keeps its place at reduced opacity. */
.all-cards-pagination__nav .btn--ghost {
    min-height: 44px;
    padding: 0 16px;
    font-family: var(--font-header);
    font-size: var(--text-sm);
    font-weight: 600;
}

.all-cards-pagination__nav .btn--ghost[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 1023px) {
    .all-cards-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .all-cards-pagination__lead {
        flex-direction: column;
        align-items: stretch;
    }

    .all-cards-pagination__size {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .all-cards-pagination__size a {
        justify-content: center;
        min-height: 44px;
    }

    .all-cards-pagination__status {
        text-align: center;
    }

    .all-cards-pagination__pages {
        justify-content: center;
    }

    .all-cards-pagination__pages a,
    .all-cards-pagination__gap {
        min-width: 44px;
        min-height: 44px;
    }

    .all-cards-pagination__nav {
        justify-content: space-between;
    }

    .all-cards-pagination__nav .btn--ghost {
        flex: 1 1 0;
        justify-content: center;
    }
}