/* ---------------------------------------------------------------------------
   catalogue.css - a ROUTE stylesheet, not part of the always-loaded core.

   Browsing furniture: the search field and the browse surface. The facet panel,
   the facet groups and the applied-filter chips are in catalogue-filters.css,
   which only /search links - see that file's header for why.

   Loaded by: /search, /minifigs, /parts, /themes, /themes/{ThemeId} - and /dev/gallery.
   Linked from those pages' own markup (<RouteStylesheets Sheets="..." />), so
   it arrives AFTER tokens/reset/app/components: at equal specificity a rule
   here beats the same selector in the core sheet, which reverses the order
   these rules had inside components.css. Why the split exists, and what a page
   that links the wrong set breaks, is in
   docs/architecture/performance-budgets.md.
   --------------------------------------------------------------------------- */

/* =========================================================================
   SearchField (§5).
   ========================================================================= */

.bd-search-form {
  margin: var(--bd-space-4) 0;
}

.bd-search-field {
  display: flex;
  align-items: center;
  gap: var(--bd-space-2);
  min-height: 44px;
  padding-inline: var(--bd-space-3);
  border-radius: var(--bd-radius-md);
  background: var(--bd-color-surface-raised);
  border: 1px solid var(--bd-color-border);
}

.bd-search-field:focus-within {
  border-color: var(--bd-color-focus-ring);
}

.bd-search-field__icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--bd-color-muted);
}

.bd-search-field__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  border: none;
  background: transparent;
  font-family: var(--bd-font-body);
  font-size: var(--bd-type-body-size);
  line-height: var(--bd-type-body-line);
  color: var(--bd-color-on-surface);
}

.bd-search-field__input::placeholder {
  color: var(--bd-color-muted);
}

.bd-search-field__input:focus-visible {
  outline: 3px solid var(--bd-color-focus-ring);
  outline-offset: 2px;
}

.bd-search-field__filter {
  position: relative;
}

.bd-search-field__filter-count {
  position: absolute;
  inset: 0 0 auto auto;
  min-width: 16px;
  padding: 2px;
  border-radius: var(--bd-radius-pill);
  background: var(--bd-color-primary);
  color: var(--bd-color-on-primary);
  font-size: var(--bd-type-label-size);
  line-height: var(--bd-type-label-line);
}

/* =========================================================================
   The browse surface (ui-refresh components.md §4) — the region /search,
   /minifigs and a theme's set list lay their results out in.

   EVERY RULE BELOW IS WRITTEN FROM THE OUTSIDE IN, and that is the whole
   reason this section is in a route sheet at all. `.bd-catalogue
   .bd-card-grid` is a rule *about* the catalogue, so StylesheetMap's
   leftmost-block reducer assigns it here and `bd-card-grid` stays in the
   always-loaded core, where the collection and the home launcher go on
   reading the version they always did. Spelt the other way round — a
   `.bd-card-grid--browse` modifier, or these declarations pushed into
   components.css — the catalogue's density decisions would download on
   every page in the application, and ComponentBlockIsRenderedTests would
   start demanding that Home link this sheet. Guard:
   Design.CatalogueBrowseLayoutTests.
   ========================================================================= */

.bd-catalogue {
  display: flex;
  flex-direction: column;
  gap: var(--bd-space-4);
}

/* components.md §4.4: the count on the left, and (once the catalogue API can
   answer per-facet counts) the Filters button and the sort select on the
   right. It wraps rather than scrolling because German runs about 30% longer
   and a control scrolled out of view is a control nobody uses. */
.bd-catalogue__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bd-space-3);
  padding-bottom: var(--bd-space-3);
  border-bottom: 1px solid var(--bd-color-border);
}

.bd-catalogue__count {
  margin: 0;
  color: var(--bd-color-muted);
  font-variant-numeric: tabular-nums;
}

/* THE COLUMN COUNT IS ARITHMETIC, NOT A BREAKPOINT LADDER. A browse grid is
   read by scanning, so the phone wants two cards abreast rather than one
   tall one — but two 168px tracks plus the gap do not fit inside the shell's
   content box at the 360px viewport NoHorizontalScrollTests drives in
   German, and a `repeat(2, …)` there would fit them by overflowing. auto-fill
   answers both cases from the same declaration: one column below ~380px, two
   above, three and four as the space appears. `min(100%, 168px)` rather than
   a bare 168px because a track wider than its container is still a track
   wider than its container. components.md §3 specifies exactly this. */
.bd-catalogue .bd-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  gap: var(--bd-space-3);
}

@media (min-width: 905px) {
  .bd-catalogue .bd-card-grid {
    gap: var(--bd-space-4);
  }}

/* Browse density. The same card carries a collection row and a scan result at
   full width elsewhere; at 168px it needs less padding and a title one step
   down the scale. min-width on the card itself because a grid track floored
   at min(100%, 168px) is not floored at zero, so a long unbroken word inside
   a flex column could still push the track wider than its share. */
.bd-catalogue .bd-set-card {
  min-width: 0;
}

.bd-catalogue .bd-set-card__body {
  padding: var(--bd-space-3);
}

.bd-catalogue .bd-set-card__title {
  font-size: var(--bd-type-body-size);
  line-height: var(--bd-type-body-line);
}

.bd-catalogue .bd-set-card__meta {
  gap: var(--bd-space-2);
  font-size: var(--bd-type-caption-size);
  line-height: var(--bd-type-caption-line);
}

.bd-catalogue__results {
  min-width: 0;
}

.bd-catalogue__sort {
  flex-wrap: wrap;
  min-width: 0;
}

/* The core .bd-select is width: 100%, which in a toolbar row is the whole row. */
.bd-catalogue__sort-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
}


@media (min-width: 905px) {
  /* THE MODIFIER IS NOT DECORATION. .bd-catalogue is also /minifigs' and a theme
     page's browse surface, and neither renders a facet panel - unqualified, this
     puts their toolbar in a 15rem column of nothing. minmax(0, …) on both tracks,
     never a bare 1fr: a track that cannot shrink below its content is how a grid
     of long German names scrolls the page sideways. */
  .bd-catalogue--filtered {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--bd-space-5);
  }
}