/* The wall.
 *
 * Deliberately unopinionated about colour: this prints inside whichever page
 * it is dropped into, and the pledge page has its own palette. Everything here
 * is either structure or inherited, apart from the hairlines, which are drawn
 * from currentColor so they land right on a dark page and a light one.
 */

.fdm-cmt { --fdm-cmt-rule: color-mix(in srgb, currentColor 16%, transparent); }
.fdm-cmt__heading { margin: 0 0 8px; }
/* The count is the block's headline, so it is set like one: the figure big
   enough to read at a glance and the words underneath it small enough to stay
   out of its way. A wall of names only argues anything if somebody can see how
   many there are without counting them. */
.fdm-cmt__count {
	display: flex; flex-direction: column; gap: 2px;
	margin: 0 0 24px;
}
.fdm-cmt__n {
	font-weight: 700; letter-spacing: -0.04em; line-height: 0.95;
	font-size: clamp(44px, 6vw, 72px);
	font-variant-numeric: tabular-nums;
}
.fdm-cmt__unit {
	font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
	opacity: 0.55;
}
.fdm-cmt__list {
	margin: 0; padding: 0;
	max-height: 60vh; overflow-y: auto; overscroll-behavior: contain;
}
/* Three stacked lines, not two columns.
   The problem used to sit right-aligned in a second column, which put "Human
   Trafficking" on the page as "HUMAN / TRAFFICKING", two right-aligned lines
   that read as two separate tags rather than one fund. There is no width in a
   sidebar where a name, a place and a fund name all fit across, so they do not
   try to. */
.fdm-cmt__item {
	display: flex; flex-direction: column; gap: 3px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fdm-cmt-rule);
}
.fdm-cmt__name { font-weight: 700; letter-spacing: -0.01em; }
.fdm-cmt__area { font-size: 14px; opacity: 0.55; }
.fdm-cmt__problem {
	margin-top: 2px;
	font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	opacity: 0.75;
}
.fdm-cmt__empty { opacity: 0.55; }
.fdm-cmt__more {
	margin-top: 20px; padding: 10px 20px;
	background: transparent; color: inherit;
	border: 1px solid var(--fdm-cmt-rule); border-radius: 999px;
	font: inherit; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
	cursor: pointer;
}
.fdm-cmt__more:hover { border-color: currentColor; }

/* A row that arrived while somebody was looking at the page says so, once. */
@keyframes fdm-cmt-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fdm-cmt__item.is-new { animation: fdm-cmt-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .fdm-cmt__item.is-new { animation: none; } }

/* The honeypot. Moved off the page rather than display:none, because a field
   that is not rendered is a field a form-filling bot can tell to skip. */
.fdm-cmt-guard {
	position: absolute !important;
	left: -9999px !important; top: auto !important;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════════
   layout="row"

   The same data as a full-width band rather than a column: the count set
   large on the left, what it reaches and what it chose beneath it, and the
   signers running across in a strip.

   The strip scrolls sideways rather than wrapping, and that is the point of
   the layout. A wrapping grid of forty names is a wall of text that pushes
   everything under it off the screen; a strip is a fixed height however many
   have signed, and the fact that it runs past the edge is itself the message.
   ══════════════════════════════════════════════════════════════════════ */

.fdm-cmt--row .fdm-cmt__head {
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 24px 56px; align-items: end;
	margin-bottom: 36px;
}
.fdm-cmt--row .fdm-cmt__count { margin: 0; }
.fdm-cmt--row .fdm-cmt__n { font-size: clamp(72px, 11vw, 168px); }
.fdm-cmt--row .fdm-cmt__unit { font-size: 14px; }

.fdm-cmt__stats { display: flex; flex-direction: column; gap: 14px; }
.fdm-cmt__reach {
	margin: 0;
	font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}
.fdm-cmt__tally { display: flex; flex-wrap: wrap; gap: 8px; }
.fdm-cmt__tally-item {
	display: inline-flex; align-items: baseline; gap: 8px;
	padding: 7px 14px;
	border: 1px solid var(--fdm-cmt-rule); border-radius: 999px;
}
.fdm-cmt__tally-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.fdm-cmt__tally-name {
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7;
}

/* A grid that wraps, capped at a few rows, with a button for the rest.
   It was a single row that scrolled sideways. Two things were wrong with that:
   a row that can scroll and does not say so is a row most people never scroll,
   so most of the wall was never seen; and the card at the right-hand edge is
   always cut in half, which reads as a rendering fault rather than an
   invitation.

   auto-fill rather than a fixed column count, so the number of columns is
   whatever the width can hold. The cap is counted in ROWS, not cards, and the
   script measures how many columns there actually are before applying it: four
   rows means four rows at every width, rather than sixteen cards that happen
   to be four rows on a laptop and sixteen on a phone. */
.fdm-cmt--row .fdm-cmt__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 16px;
	max-height: none;
	overflow: visible;
	padding-bottom: 0;
}
.fdm-cmt--row .fdm-cmt__item {
	gap: 6px;
	padding: 22px 24px;
	border: 1px solid var(--fdm-cmt-rule); border-radius: 14px;
}
.fdm-cmt--row .fdm-cmt__name { font-size: 20px; }
.fdm-cmt--row .fdm-cmt__problem { margin-top: 10px; }
.fdm-cmt--row .fdm-cmt__more { margin-top: 8px; }

@media (max-width: 780px) {
	.fdm-cmt--row .fdm-cmt__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
	/* One column on a phone, so four rows is four names rather than four
	   cards squeezed to the width of their own padding. */
	.fdm-cmt--row .fdm-cmt__list { grid-template-columns: minmax(0, 1fr); }
}