/* Page-scoped styles for /the-need (and /es/the-need).
   Owned by the page; site.css is NOT forked. Uses only design-system tokens.

   Scope: the "Requests we've sent, and where they stand" record — the public log of
   data requests sent to agencies for the evidence base. Two states only:
     .req--received  data is back (teal — a completed step, never a "partner" badge)
     .req--awaiting  request sent, no response yet (neutral ink, deliberately quiet)
   Never style this list like an endorsement/logo wall: no agency marks, no coral,
   no celebratory treatment. It records our action, not theirs. */

.req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 52rem) {
  .req-list { grid-template-columns: repeat(2, 1fr); }
}

.req {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.req--received { border-left-color: var(--teal); }

.req__status {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
  color: var(--ink-soft);
  background: var(--sand);
}
.req--received .req__status { color: var(--teal-deep); background: var(--mist); }

.req__entity {
  font-weight: 700;
  color: var(--navy);
  font-size: var(--step-0);
  margin: 0;
}
.req__role {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}
.req__what {
  font-size: var(--step--1);
  color: var(--ink);
  margin-top: var(--sp-3);
  line-height: 1.5;
}
.req__dates {
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-top: var(--sp-2);
  line-height: 1.5;
}
.req__dates time { font-variant-numeric: tabular-nums; }

/* Out-of-county source: must never be mistaken for Starr County data. */
.req__scope {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--coral-deep);
  margin-top: var(--sp-2);
}

@media (prefers-reduced-motion: no-preference) {
  .req { transition: border-color .15s var(--ease); }
}