/* The scrolling column of results. One concern: spacing and width, nothing else. */

.listing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-5);
  width: 100%;
  /* Capped so a card never stretches past the width where its price and its
     details stop reading as one unit — including on a narrow viewport where the
     grid collapses and the column would otherwise take the full page. */
  max-width: 30.375rem;
  margin-inline: auto;
}

.listing-list__header {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.listing-list__header h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.listing-list__filtered {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The wrapper a running sweep replaces whole. It has to carry the column's flex
 * behaviour, not just wrap the markup: left as a plain block it did not
 * constrain its child, the scroller grew to its full content, and the page
 * itself scrolled — one bar on the far right dragging all three columns at
 * once instead of each column moving on its own. */
.listings {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Rows share one surface, so the column reads as a single object and the marks
 * on its right edge line up as a column of their own. */
.listing-list {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.listing-list__group {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* The three slices of the funnel. Always all three, empty ones included: a
 * heading reading "Recalés 0" says something a missing heading does not. */
.listing-list__slice {
  padding: 0 var(--space-1) var(--space-1);
}

.listing-list__slice-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--label-weight);
}

.listing-list__slice-label b {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}