/* redesign-feed-v1 — W-68-3 — Contributor feed list component layer. */
/*
 * Planning: .archon/queued-builds/WAVE-68-public-profile-redesign.md
 *
 * Targets the markup rendered by src/views/components/feed-list.ejs.
 * The list is the social-proof surface on a public child profile —
 * one row per recent contribution (newest first), with an avatar
 * bubble + name + amount + optional message + relative time.
 *
 * Class taxonomy (BEM-ish):
 *   .feed-list                     — outer <section>
 *   .feed-list__header             — heading + count badge wrapper
 *   .feed-list__heading            — h2 ("Recent contributors")
 *   .feed-list__count              — small chip showing item count
 *   .feed-list__empty              — empty-state wrapper
 *   .feed-list__empty-heading      — large empty-state headline
 *   .feed-list__empty-body         — supporting copy
 *   .feed-list__items              — <ul> of contribution rows
 *   .feed-list__item               — <li> for one contribution
 *   .feed-list__avatar             — initial-bubble next to each row
 *   .feed-list__avatar--anonymous  — modifier for anonymous rows
 *   .feed-list__body               — copy column of a row
 *   .feed-list__row                — name + amount baseline pair
 *   .feed-list__name               — contributor display name
 *   .feed-list__amount             — formatted Rands figure
 *   .feed-list__meta               — relative-time row
 *   .feed-list__when               — relative-time label
 *   .feed-list__message            — optional contribution message
 *
 * WHY a stand-alone stylesheet (not another override in the legacy
 * public-profile.css): Phase D of the redesign system carves the feed
 * into a reusable component. Keeping the rules in their own file means
 * a future drift (a dashboard "latest contributors" widget) attaches
 * to the same CSS without dragging the rest of the public-profile
 * cascade along.
 *
 * WHY a card-shaped section root (not a bare flush list): the feed
 * sits below the running-total panel on the profile; giving it the
 * same elevation as a .card keeps the page's visual rhythm consistent
 * with the rest of the surface. The .card primitive is NOT applied
 * directly because feed-list manages its own internal padding to
 * fit the avatar + body two-column rhythm.
 *
 * WHY mobile-first: 320–414px viewports are the load-bearing target.
 * The avatar + body rhythm reads as a one-column row from 320px
 * upwards; tablet+ adds a wider count chip + roomier padding.
 *
 * WHY a token-only palette: ANTI-RAW-VALUE proof-gate (W56) rejects
 * hex / rgba in any non-token file.
 *
 * FLOW: tokens.css → spacing.css → typography.css → radius-shadow.css →
 *       cards.css → feed-list.css (this file) → page-feature CSS.
 *
 * CONSTRAINT: WCAG 1.4.11 — the avatar bubble + initial pairing uses
 * --color-bg-subtle / --color-text-muted, which clears the 4.5:1
 * contrast floor by design. Do not push the initial colour to
 * --color-text-subtle (~3.3:1) or it will sink below AA.
 */

/* ---------- Outer section ---------- */
.feed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-bg-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Header (heading + count) ---------- */
.feed-list__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.feed-list__heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.feed-list__count {
  /* WHY a pill chip with brand-light fill: a quiet count badge that
     does not compete with the heading. Sits at body weight so the
     eye doesn't read it as a status badge. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-dark);
  background-color: var(--color-brand-light);
  border-radius: var(--radius-pill);
  line-height: 1;
}

/* ---------- Empty state ---------- */
.feed-list__empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.feed-list__empty-heading {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.feed-list__empty-body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* ---------- Items list ---------- */
.feed-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.feed-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  /* WHY a hairline divider via border-top + first-child reset: keeps
     the list visually separated without a heavy box outline per row.
     The :first-child reset is so the first row sits flush with the
     header below the heading rather than dangling a divider above. */
  border-top: 1px solid var(--color-border-subtle);
}

.feed-list__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.feed-list__item:last-child {
  padding-bottom: 0;
}

/* ---------- Avatar bubble ----------
   WHY a circular bubble with the contributor's initial: gives the list
   a quick visual scan; pairs with the hero portrait stylistically so
   the page reads as one design. */
.feed-list__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: var(--radius-circle);
  background-color: var(--color-brand-light);
  color: var(--color-brand-dark);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-transform: uppercase;
}

.feed-list__avatar--anonymous {
  /* WHY a neutral palette for the anonymous bubble: makes anonymous
     rows scannable as a category without singling them out
     visually — the parent/visitor sees "Anonymous" + a quieter
     avatar, not a coloured "anonymous" badge. */
  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
}

/* ---------- Body column ---------- */
.feed-list__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* WHY a baseline-aligned flex row for name + amount: the figure should
   line up with the bottom of the name text regardless of font weight.
   space-between pushes the amount to the row's trailing edge so it
   scans as a column when many rows stack. */
.feed-list__row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.feed-list__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  /* WHY word-break:break-word: contributor names can be arbitrarily
     long; allow break so a 30-char name on a 320px viewport wraps
     instead of overflowing the card. */
  word-break: break-word;
}

.feed-list__amount {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-dark);
  /* Pinning keep-all (and the non-breaking-space thousands separator
     from the formatter) guarantees "R3 450.00" never breaks mid-figure. */
  word-break: keep-all;
}

.feed-list__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-snug);
}

.feed-list__when {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.feed-list__message {
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-style: italic;
  line-height: var(--line-height-base);
}

/* ---------- Tablet + desktop overrides ---------- */
@media (min-width: 640px) {
  .feed-list {
    padding: var(--space-6);
  }

  .feed-list__heading {
    font-size: var(--font-size-2xl);
  }

  .feed-list__item {
    padding: var(--space-4) 0;
    gap: var(--space-4);
  }

  .feed-list__avatar {
    width: var(--space-8);
    height: var(--space-8);
    font-size: var(--font-size-lg);
  }
}