/* ==========================================================================
   Catalogue pages — /apps/, /games/ and both term pages (DESIGN.md §A6.3)
   ==========================================================================
   The four surfaces that list cards. They share three partials — the filter panel, the
   results list, the result card — so they share one stylesheet; a term page differs
   from a kind index only in carrying no taxonomy-discovery block and one filter field
   fewer, both of which these rules tolerate.

   site.css is the frozen approved baseline: it already carries every shared primitive
   used here (.field, .btn, .result-cards, .filters__chip, the empty state). What lives
   in this file is only what the approved mockup draws differently from that baseline,
   or draws at all for the first time.

   Selectors are bare. The file is its own scope: only the four catalogue templates load
   it, through `page_styles`, so nothing it declares can reach another page and a wrapper
   class to hang the rules on would buy nothing. That is why a rule here may legitimately
   match nothing on one of the four — `.taxonomy-discovery*` has no term-page markup —
   while still being live for the family.

   Both families' wrapper rules still standing in site.css (`.kind-index*`, `.term-page*`)
   belong to divs these pages no longer carry and are unreachable; site.css is frozen, so
   they are recorded as debt rather than deleted. The ones that were doing visible work —
   the interface-heading size on the filter panel's title, and the term page's own filter
   column count — are re-declared below.

   Token map from the mockup: --apk-shell-line → --border, --apk-shell-paper → --sheet,
   --apk-shell-soft → --soft, --apk-shell-brand → --link, --apk-shell-muted → --muted,
   --apk-shell-ink → --text. Spacing goes through the --sN scale, never raw px.
   -------------------------------------------------------------------------- */

/* ---- Page head ----------------------------------------------------------
 * No wrapper around the h1 and its lede: the approved page has none, and the gap under
 * the lede is the lede's own bottom margin (24px there against site.css's global 18px).
 */
.lede{margin-bottom:var(--s5)}

/* ---- Filter panel -------------------------------------------------------
 * The mockup draws the fields as one bordered card on the shared radius, not as bare
 * cells between the panel's hairlines. Two columns, not site.css's four: with four
 * fields both arrangements avoid the stranded-last-field problem that comment warns
 * about, and two is what the approved page shows. Collapses to one column at the same
 * 600px the mockup's container query uses.
 */
/* site.css rules the panel top and bottom, from when the fields sat bare between those
   two hairlines. The bordered card below now delimits the panel, so the panel's own
   rules are redundant — and the bottom one landed a second hairline 32px above the one
   that opens "Explore by interest", reading as an empty strip between two lines. The
   approved page has no border here at all. Spacing to the next block comes from that
   block's own margin-top, so the gap is declared once, not added from both sides. */
.filters{border-block:0;padding-block:0;margin-bottom:0}
/* Chips sit outside the form, so they lose the panel's margin with it. */
.filters__applied{margin-top:var(--s4)}
/* Panel title at interface-heading size, as site.css sized it through the wrapper. */
.filters__title{font:var(--t-h2-interface)}
.filters__grid{grid-template-columns:repeat(2,minmax(0,1fr));
  padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius);
  background:var(--sheet)}
/* Actions and the dirty-state note span the full card rather than sitting in a cell. */
.filters__actions{grid-column:1/-1}

/* ---- Explore by interest ------------------------------------------------
 * One block, two roles drawn differently: a PRIMARY category is a bare inline label
 * carrying its count, a curated TAG is a tile carrying the term's own intro. The
 * difference is geometry and content, never colour alone.
 *
 * site.css's .taxonomy-discovery rules a hairline above AND below; the mockup rules
 * only above, so the block reads as a continuation of the results column rather than a
 * boxed aside.
 */
.taxonomy-discovery{border-block:0;border-block-start:1px solid var(--border);
  margin-block:var(--s5) var(--s6);padding-block-start:var(--s5);gap:var(--s4)}
.taxonomy-discovery__title{margin:0;font:var(--t-h2-interface);color:var(--text)}

/* Categories: a wrapping row of links, each 44px tall for touch. The count is a plain
 * fact about the catalogue — how many published cards of this kind the term holds — so
 * it is drawn as quiet metadata, not as a badge or a ranking. */
.taxonomy-discovery__categories{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5)}
.taxonomy-discovery__categories a{display:inline-flex;align-items:center;
  gap:var(--s2);min-height:44px;font:var(--t-meta);color:var(--link);
  text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.taxonomy-discovery__count{color:var(--muted);font:var(--t-meta)}

/* Collections: two tiles per row, each a whole-tile link. `height:100%` on the anchor
 * keeps neighbouring tiles equal-height when one intro runs longer. */
.taxonomy-discovery__collections{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.taxonomy-collection{display:flex;height:100%;justify-content:space-between;
  gap:var(--s4);padding:var(--s4);border:1px solid var(--border);
  border-radius:var(--radius);background:var(--soft);color:var(--text);
  text-decoration:none;overflow-wrap:anywhere}
.taxonomy-collection:hover{border-color:var(--link)}
.taxonomy-collection__title{display:block;font:var(--t-strong)}
.taxonomy-collection__copy{display:block;margin-top:var(--s1);
  font:var(--t-meta);color:var(--muted)}
.taxonomy-collection__count{display:block;margin-top:var(--s2);
  font:var(--t-meta);color:var(--muted)}
.taxonomy-collection__arrow{flex:0 0 auto;color:var(--muted)}

/* ---- Results ------------------------------------------------------------
 * The head is a two-end row: heading and status on the left, the way back up to the
 * field on the right. site.css lays the row out but leaves the two ends adjacent; the
 * mockup pushes them apart, which is what makes "Edit search ↑" read as a return
 * control rather than as a third line of the heading.
 */
.catalog-results{margin-top:var(--s6)}
.catalog-results__head{justify-content:space-between}
.catalog-results__edit{display:inline-flex;align-items:center;
  min-height:44px;font:var(--t-meta);color:var(--link);
  text-decoration:underline;text-underline-offset:4px}

/* ---- Narrow ------------------------------------------------------------
 * Single column for both grids at the width the mockup uses. The filter card keeps its
 * border and padding; only the column count changes.
 */
@media (max-width:600px){
  .filters__grid,
  .taxonomy-discovery__collections{grid-template-columns:minmax(0,1fr)}
}