/* 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;
}

/* The one listing being read right now.
 *
 * Every row still waiting used to wear a badge, which said nothing the list did
 * not already say: "année ?" where a year is unknown, criterion icons drawn
 * grey where nobody has looked. Sixteen badges to repeat that is noise. A
 * skeleton would have been worse still — the row is not empty, it carries a
 * photograph, a price and a town.
 *
 * What none of that could say is which single row the machine has in its hands
 * at this second, so that is the only thing marked. */
/* The row has to be a positioning context for the marks above, and for the
 * shimmer that sweeps it while it is being read. */
.listing-row {
  position: relative;
}

/* Being worked on, said the same way everywhere.
 *
 * The search card shimmers while its sweep runs; a row shimmers while that one
 * listing is being fetched and read. One idea, one language — it was a pinned
 * badge here and a moving band there, which made a reader learn the same thing
 * twice. See `search-card--busy`, whose keyframes these are. */
.listing-row--busy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%, transparent 40%,
    color-mix(in srgb, var(--accent) 7%, transparent) 50%,
    transparent 60%, transparent 100%
  );
  background-size: 200% 100%;
  animation: search-card-shimmer 3s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  .listing-row--busy::after { animation: none; }
}

/* The listing's number in this search, to the left of its photograph.
 *
 * Bare digits in the mono face the rest of the data uses. No box: a badge would
 * make it look like a status, and it is a reference — the thing you say out
 * loud to point at one house among ninety. */
.listing-row__number {
  flex: none;
  align-self: center;
  min-width: 1.5rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The listing's number in this search, to the left of its photograph.
 *
 * Bare digits in the mono face the rest of the data uses. No box: a badge would
 * make it look like a status, and it is a reference — the thing you say out
 * loud to point at one house among ninety. */
.listing-row__number {
  flex: none;
  align-self: center;
  min-width: 1.5rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* Why a listing was rejected, under its card and under its TEXT.
 *
 * Aligned on the summary rather than on the row's left edge: the reason
 * continues the two lines above it, and starting under the photograph made it
 * read as a caption to the picture.
 *
 * The offset is the gutter the row itself builds — its padding, the number, the
 * thumbnail, and the gaps between them — named once here so the two cannot
 * drift apart. */
.listing-row__reasons {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3)
           calc(var(--space-2) + 1.5rem + var(--space-4) + 4.75rem + var(--space-4));
  font-size: var(--text-xs);
  color: var(--inferred, var(--ink-muted));
}