/* Listing pages (/games, /apps, categories, /search; the guides index
   reuses the head + description styles). App cards, category chips, the
   empty state and pagination all come from core — only the page head and
   the sort strip live here. */

.listing-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.listing-head h1 {
    font-size: 25px;
    letter-spacing: -0.02em;
}

.listing-count {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* Category description under a blog category heading (from the
   category's meta.json). */
.listing-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    max-width: 640px;
    margin: 2px 0 6px;
}

/* Sort strip: uppercase micro-label + quiet pill links; the active
   choice gets the soft accent treatment (same idiom as the header nav). */
.sort-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sort-label {
    margin-right: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sort-link {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 550;
    color: var(--text-muted);
    transition: background-color 120ms ease, color 120ms ease;
}

.sort-link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.sort-link.is-active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Facet strip: quick listing filters (free/paid, no-root, VIP, size band).
   Each chip toggles a query param; active ones get the accent treatment. */
.facet-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.facet-label {
    margin-right: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.facet-chip {
    padding: 4px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--text-muted);
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.facet-chip:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.facet-chip.is-active {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
    font-weight: 600;
}

.facet-clear {
    margin-left: 2px;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--accent);
}

.facet-clear:hover {
    text-decoration: underline;
}

/* Hand-written copy above the grid on a category or section landing
   (content/categories/…/content.html, page 1 only). The heading scale comes
   from the shared .prose module — this only places the block and marks where
   the editorial copy ends and the catalog begins. */
.listing-intro {
    margin: 14px 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.listing-intro > :last-child {
    margin-bottom: 0;
}