/* recommendations/_results + the collapsed state of _card.
 *
 * A flat list (no panel, no borders) of recommendations. Each item is either a
 * collapsed flat row or — when .is-open — the full recommendation card. The two
 * states are mutually exclusive on the same element. */

.rec-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* State switch: collapsed row by default, card when open. */
.rec-item__card { display: none; }
.rec-item.is-open .rec-item__row { display: none; }
.rec-item.is-open .rec-item__card { display: block; }

/* ---- Collapsed flat row ---- */
.rec-item__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  width: 100%;
  padding-block: var(--spacing-12);
  padding-inline: var(--spacing-12);
  text-align: left;
  border-radius: var(--corner-radius-xs);
  color: var(--text-primary);
  cursor: pointer;
}
.rec-item__row:hover { background-color: var(--background-surface-1); }

.rec-item__row-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rec-item__row-category {
  flex-shrink: 0;
  width: 7rem; /* Note: bespoke column width to align the meta columns */
  text-align: right;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  letter-spacing: var(--font-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Fixed pill column so the significance pills line up down the list. */
.rec-item__row .status-pill {
  flex-shrink: 0;
  width: 9.5rem; /* Note: bespoke column width */
}

@media (max-width: 40rem) {
  .rec-item__row-category { display: none; }
  .rec-item__row .status-pill { width: auto; }
}