/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * What the people of a pantry adds on top of styles.css, written with the tokens of design-system.css and never
 * with values of its own. The tests read this file with the others: a rule written twice anywhere,
 * a token used and not defined, a design system token written again, all fail.
 */

.members-box { display: flex; flex-direction: column; gap: var(--space-3); }

.members-section { display: flex; flex-direction: column; gap: var(--space-2); }

.members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.members-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.members-row--pending { background: var(--surface-2); }

.members-row__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.members-row__name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }

.members-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}

.members-row__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.members-ask { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.members-ask__buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.members-flag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: var(--fs-caption);
}

.members-pro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--state-expiring);
  border-radius: var(--radius-md);
  background: var(--state-expiring-soft);
}
.members-pro__title { margin: 0; font-weight: var(--fw-semibold); }