/* 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. */
.listing-row__working {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* The same slow beat the search card uses: busy, and nothing more. */
.listing-row__beat {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  animation: search-card-beat 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .listing-row__beat {
    animation: none;
    opacity: 0.6;
  }
}

/* The row has to be a positioning context for the marks above. */
.listing-row {
  position: relative;
}

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