/* ── design tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:          #0f172a;
  --surface:     #1e293b;
  --border:      #334155;
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-dim:    #64748b;
  --accent:      #38bdf8;   /* sky-400 — funded / primary CTA */
  --on-accent:   #06283d;   /* dark text on --accent */
  --secondary:   #7c3aed;   /* violet-600 — form CTA */
  --fulfilled:   #34d399;   /* emerald-400 — fulfilled state */
  --thumb-bg:    #ffffff;   /* white box behind product images */
}

/* ── reset ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ── page layout ─────────────────────────────────────────────────────────── */
body {
  margin: 0;
  font: 16px/1.5 system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── header text ─────────────────────────────────────────────────────────── */
h1 { font-size: 24px; margin: .2em 0; }

.legend { color: var(--text-muted); margin: .3em 0; font-size: 14px; }
.notice { color: var(--text-muted); margin: .3em 0; font-size: 14px; }

/* ── filter bar ──────────────────────────────────────────────────────────── */
.filters {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.filters button {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 4px 4px 0 0;
  cursor: pointer;
}

.filters button.on {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ── card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 14px;
  border-left: 3px solid transparent; /* space reserved for fulfilled accent */
}

/* fulfilled cards get a green left accent and are visually de-emphasised */
.card:has(.thanks) {
  border-left-color: var(--fulfilled);
  opacity: 0.75;
}

.card.hide { display: none; }

.thumb {
  background: var(--thumb-bg);
  border-radius: 8px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumb img { max-width: 100%; max-height: 100%; }

.noimg { color: var(--text-dim); font-size: 13px; }

.card h3 { margin: 10px 0 2px; font-size: 17px; }

.cat { color: var(--text-muted); margin: 0 0 8px; font-size: 13px; }

/* ── status count pills ──────────────────────────────────────────────────── */
.counts {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
}

.b-funded    { color: var(--accent); }
.b-donation  { color: var(--secondary); }
.b-fulfilled { color: var(--fulfilled); }
.b-total     { color: var(--text-muted); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.price { font-weight: 700; }
.usd   { color: var(--text-muted); font-weight: 400; }

/* ── notes ───────────────────────────────────────────────────────────────── */
.notes { white-space: pre-wrap; font-size: 14px; }

/* ── action buttons ──────────────────────────────────────────────────────── */
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border-radius: 8px;
  padding: 6px 12px;
  margin-top: 8px;
  font-weight: 600;
}

.cta.form {
  background: var(--secondary);
  color: #fff;
  margin-left: 6px;
}

.thanks { color: var(--fulfilled); font-weight: 700; }