/* ════════════════════════════════════════════════════════════════════════
   recipient-stats.css — "Who actually receives this funding" block (v2)
   Loads only on /grants/* pages. Prefix: gp-rs-
   Standalone; falls back to literal values if grant-page.css tokens absent.
   Spec: docs/superpowers/specs/2026-06-11-recipient-stats-block-surface.md
         (v2 REDESIGN — visual-first: tiles, range bar, pills, CSS tooltips)
   ════════════════════════════════════════════════════════════════════════ */

.gp-rs {
  --rs-cream:       var(--gp-cream, #FAF7F2);
  --rs-cream-warm:  var(--gp-cream-warm, #f5f0e8);
  --rs-paper:       var(--gp-paper, #ffffff);
  --rs-paper-warm:  var(--gp-paper-warm, #FFFDF9);
  --rs-ink:         var(--gp-ink, #1C1917);
  --rs-ink-2:       var(--gp-ink-2, #57534E);
  --rs-ink-3:       var(--gp-ink-3, #6B6560);
  --rs-line:        var(--gp-ink-5, #E7E5E4);
  --rs-line-soft:   var(--gp-ink-4, #D6D3D1);
  --rs-forest:      var(--gp-forest, #2d6a4f);
  --rs-forest-deep: var(--gp-forest-deep, #1B4332);
  --rs-forest-08:   var(--gp-forest-08, rgba(45, 106, 79, 0.08));
  --rs-forest-04:   var(--gp-forest-04, rgba(45, 106, 79, 0.04));
  --rs-sienna:      var(--gp-sienna, #C4532B);
  --rs-sienna-hover:var(--gp-sienna-hover, #A3401F);
  --rs-display:     var(--gp-display, 'Fraunces', Georgia, serif);
  --rs-body:        var(--gp-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --rs-r:           var(--gp-r-lg, 12px);
  --rs-r-sm:        var(--gp-r, 8px);
  --rs-r-pill:      var(--gp-r-pill, 20px);

  margin: var(--gp-sp-7, 32px) 0;
  font-family: var(--rs-body);
  box-sizing: border-box;
}
.gp-rs *, .gp-rs *::before, .gp-rs *::after { box-sizing: border-box; }

.gp-rs__inner {
  position: relative;
  background: var(--rs-paper);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r);
  padding: clamp(18px, 4vw, 28px);
  box-shadow: var(--gp-sh-sm, 0 1px 3px rgba(28, 25, 23, 0.04));
  /* forest accent rail = "data-backed / trustworthy" cue */
  border-left: 3px solid var(--rs-forest);
  /* clip absolutely-positioned bar internals so nothing spills the card */
  overflow: hidden;
}

/* sr-only crawler summary (v1 headline+typical sentences, invisible) */
.gp-rs__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Eyebrow + heading ── */
.gp-rs__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-forest);
  margin: 0 0 8px;
}
.gp-rs__eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }

.gp-rs__heading {
  font-family: var(--rs-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--rs-ink);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

/* ════════════════════════════════════════════════════════════════════════
   STAT TILES
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 0 22px;
}
.gp-rs__tiles[data-rs-count="3"] { grid-template-columns: repeat(3, 1fr); }
.gp-rs__tiles[data-rs-count="2"] { grid-template-columns: repeat(2, 1fr); }

.gp-rs__tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 14px 13px;
  background: linear-gradient(180deg, var(--rs-paper-warm), var(--rs-cream));
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-sm);
  min-width: 0;
}
.gp-rs__tile-val {
  font-family: var(--rs-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.4vw, 1.75rem);
  line-height: 1.05;
  color: var(--rs-forest-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.gp-rs__tile-label {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--rs-ink-2);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════
   AWARD-RANGE BAR  (replaces typical sentence + red reality line)
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs__bar {
  margin: 0 0 24px;
}

/* caption row: "Award sizes · middle 50%" (left) + advertised-max anno (right).
   Flex with wrap → on a narrow card the annotation drops to its own line, never
   overlapping the caption. This row is ABOVE the track. */
.gp-rs__bar-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.gp-rs__bar-caption-l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
}
.gp-rs__bar-sub {
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--rs-ink-3);
  font-size: 0.74rem;
}
.gp-rs__bar-anno {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--rs-ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gp-rs__bar-anno strong { font-weight: 700; color: var(--rs-ink-2); }

.gp-rs__bar-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--rs-cream-warm);
  /* faint tick gradient to read as a "scale" */
  background-image:
    linear-gradient(180deg, var(--rs-cream-warm), var(--rs-cream-warm)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), rgba(28,25,23,0.05) calc(20% - 1px), rgba(28,25,23,0.05) 20%);
  border: 1px solid var(--rs-line);
}

/* shaded p25→p75 band */
.gp-rs__bar-fill {
  position: absolute;
  top: -1px; bottom: -1px;
  background: linear-gradient(90deg, var(--rs-forest), var(--rs-forest-deep));
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(27, 67, 50, 0.25);
  /* one-time grow-in animation (transform-origin left) */
  transform: scaleX(0.001);
  transform-origin: left center;
}
.gp-rs--inview .gp-rs__bar-fill {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* median marker dot (sits ON the track; its LABEL is below in .bar-labels) */
.gp-rs__bar-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.gp-rs__bar-marker-dot {
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--rs-paper);
  border: 3px solid var(--rs-sienna);
  box-shadow: 0 1px 5px rgba(196, 83, 43, 0.35);
  /* grow-in to land with the fill */
  transform: scale(0);
}
.gp-rs--inview .gp-rs__bar-marker-dot {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
}

/* labels BELOW the track: median (primary) + p25/p75 endpoints. Because these
   live below and the annotation lives above, the median callout can never
   collide with the advertised-max annotation. */
.gp-rs__bar-labels {
  position: relative;
  height: 18px;
  margin-top: 9px;
}
.gp-rs__bar-end,
.gp-rs__bar-med {
  position: absolute;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}
.gp-rs__bar-end {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--rs-ink-2);
}
.gp-rs__bar-end--hi { color: var(--rs-forest-deep); }
.gp-rs__bar-med {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rs-sienna-hover);
  z-index: 2;
}
/* a small upward tick connecting the median label to its dot */
.gp-rs__bar-med::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  width: 1px; height: 7px;
  background: var(--rs-sienna);
  transform: translateX(-50%);
}
.gp-rs__bar-med--end { transform: none; }
.gp-rs__bar-med--end::before { left: auto; right: 3px; transform: none; }
.gp-rs__bar-med--start { transform: none; }
.gp-rs__bar-med--start::before { left: 3px; transform: none; }

/* ════════════════════════════════════════════════════════════════════════
   PILLS (sectors + provinces)
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs__pillblock {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 4px;
}
.gp-rs__pillrow {
  display: flex;
  align-items: baseline;
  gap: 10px 12px;
  flex-wrap: wrap;
}
.gp-rs__pilllabel {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  padding-top: 4px;
}
.gp-rs__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.gp-rs__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--rs-ink);
  background: var(--rs-forest-04);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-pill);
}
.gp-rs__pill--prov { font-variant-numeric: tabular-nums; }
.gp-rs__pill-code {
  font-weight: 700;
  color: var(--rs-forest-deep);
  letter-spacing: 0.02em;
}

/* fix 9: tiny muted caveat after the sector pills ("of classified recipients") */
.gp-rs__pillcaveat {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--rs-ink-3);
  white-space: nowrap;
}

/* fix 4: visible agency-umbrella one-liner under the pills */
.gp-rs__umbrella-note {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--rs-ink-3);
  font-style: italic;
}

/* count-only note */
.gp-rs__note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--rs-ink-3);
  font-style: italic;
  margin: 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   GATE ROW (conversion surface)
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs__gate {
  margin: 20px 0 0;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-sm);
  background: linear-gradient(180deg, var(--rs-cream-warm), var(--rs-cream));
  /* overflow VISIBLE (was hidden) so the recipient hover-card (.gp-rs__rcard,
     absolute, floats above the row) is never clipped by the gate's top edge.
     The rounded corners are kept by border-radius clipping the background; no
     child needs clipping (peek/matches content all sits inside the padding). */
  overflow: visible;
}
.gp-rs__gate-locked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.gp-rs__lock {
  flex: 0 0 auto;
  color: var(--rs-sienna);
}
.gp-rs__gate-text {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--rs-ink);
}
.gp-rs__gate-n {
  font-weight: 700;
  color: var(--rs-forest-deep);
}
.gp-rs__gate-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* fix 10: 44px touch target at ALL widths (was 40px) */
  padding: 9px 16px;
  background: var(--rs-sienna);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--rs-r-pill);
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}
.gp-rs__gate-cta:hover,
.gp-rs__gate-cta:focus-visible { background: var(--rs-sienna-hover); color: #fff; }
.gp-rs__gate-cta:active { transform: translateY(1px); }
.gp-rs__gate-cta:focus-visible { outline: 2px solid var(--rs-forest); outline-offset: 2px; }

/* ── Secondary $19 Playbook-Unlock link (muted, dual-CTA) ── */
.gp-rs__gate-altrow {
  padding: 0 16px 12px;
  margin-top: -4px;
}
.gp-rs__gate-alt.gp-unlock-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--rs-ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rs-line-soft);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.gp-rs__gate-alt.gp-unlock-link:hover,
.gp-rs__gate-alt.gp-unlock-link:focus-visible {
  color: var(--rs-sienna-hover);
  text-decoration-color: var(--rs-sienna-hover);
}
.gp-rs__gate-alt.gp-unlock-link:focus-visible {
  outline: 2px solid var(--rs-forest);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Unlocked matches list ── */
.gp-rs__matches { padding: 0; }
.gp-rs__matches[hidden] { display: none; }
.gp-rs__matches-head {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-forest);
  padding: 13px 16px 8px;
  margin: 0;
}
.gp-rs__match-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
}
.gp-rs__match {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  border-radius: var(--rs-r-sm);
}
.gp-rs__match + .gp-rs__match { border-top: 1px solid var(--rs-line); }
.gp-rs__match--top { background: var(--rs-forest-08); }
.gp-rs__match-name {
  font-weight: 600;
  color: var(--rs-ink);
}
.gp-rs__match-meta {
  color: var(--rs-ink-3);
  font-size: 0.8125rem;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.gp-rs__match-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--rs-forest-deep);
}
.gp-rs__match-flag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rs-forest);
  background: var(--rs-forest-08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ── Source (single muted line) ── */
.gp-rs__source {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--rs-ink-3);
  margin: 18px 0 0;
}

/* ── Footer cross-link to the Winner Database ── */
.gp-rs__footer-link {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 6px 0 0;
}
.gp-rs__footer-link a {
  color: var(--rs-ink-3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rs-line-soft);
  transition: color 0.15s ease;
}
.gp-rs__footer-link a:hover,
.gp-rs__footer-link a:focus-visible {
  color: var(--rs-sienna-hover);
  text-decoration-color: var(--rs-sienna-hover);
}
.gp-rs__footer-link a:focus-visible {
  outline: 2px solid var(--rs-forest);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   CSS-ONLY TOOLTIP  ([data-gp-tip] + ::after) — hover AND :focus-visible.
   No JS. Bubble is centered above the marker; --end variant right-anchors it
   so it never clips off the right viewport edge (e.g. the source line marker).
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs__tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  padding: 0;
  margin: 0 0 0 1px;
  vertical-align: -3px;
  border: 0;
  background: transparent;
  color: var(--rs-ink-3);
  cursor: help;
  border-radius: 50%;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.gp-rs__tip svg { width: 13px; height: 13px; display: block; }
.gp-rs__tip:hover { color: var(--rs-forest); }
.gp-rs__tip:focus-visible {
  outline: 2px solid var(--rs-forest);
  outline-offset: 1px;
  color: var(--rs-forest);
}

/* the bubble */
.gp-rs__tip::after {
  content: attr(data-gp-tip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(260px, 78vw);
  padding: 9px 12px;
  background: var(--rs-ink);
  color: #fff;
  font-family: var(--rs-body);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  border-radius: var(--rs-r-sm);
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 20;
}
/* little arrow */
.gp-rs__tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--rs-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 20;
}
.gp-rs__tip:hover::after,
.gp-rs__tip:focus-visible::after,
.gp-rs__tip:hover::before,
.gp-rs__tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
.gp-rs__tip:hover::after,
.gp-rs__tip:focus-visible::after { transform: translateX(-50%) translateY(0); }
.gp-rs__tip:hover::before,
.gp-rs__tip:focus-visible::before { transform: translateX(-50%) translateY(0); }

/* right-anchored variant: pin the bubble's right edge to the marker so a
   wide tooltip on a right-most marker stays on-screen at 320px */
.gp-rs__tip--end::after {
  left: auto;
  right: -4px;
  transform: translateY(4px);
}
.gp-rs__tip--end:hover::after,
.gp-rs__tip--end:focus-visible::after { transform: translateY(0); }

/* ── placement: --below flips the bubble BELOW the marker. It only changes
   top/bottom + the arrow direction (NOT transform), so it composes with both the
   centered and --end horizontal anchoring above. Use it where the default
   above-bubble would cover the value it describes — e.g. stat tiles, where the
   icon sits directly under the big number. ── */
.gp-rs__tip--below::after { top: calc(100% + 9px); bottom: auto; }
.gp-rs__tip--below::before {
  top: calc(100% + 3px); bottom: auto;
  border-top-color: transparent; border-bottom-color: var(--rs-ink);
}

/* ── bigger trigger: hovering anywhere on a stat tile reveals its tooltip, not
   just the 13px icon. The icon stays as the keyboard-focus target + visual
   affordance; the whole tile becomes the hover hit-area. ── */
.gp-rs__tile:hover .gp-rs__tip::after,
.gp-rs__tile:hover .gp-rs__tip::before { opacity: 1; visibility: visible; }

/* ── recipient hover/tap card — adds sector + how the award compares to the
   typical one, on the peek's revealed rows AND the premium match list. Reveals
   on row hover (desktop) or tap (mobile, JS toggles .gp-rs__row--open). ── */
.gp-rs__match--card, .gp-rs__peek-row--card { position: relative; cursor: help; }
.gp-rs__match--card:hover, .gp-rs__peek-row--card:hover, .gp-rs__row--open { background: var(--rs-forest-04); }
.gp-rs__rcard {
  position: absolute; bottom: calc(100% + 7px); left: 6px;
  width: max-content; max-width: min(300px, calc(100vw - 56px));
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 13px;
  background: var(--rs-ink); color: #fff;
  border-radius: var(--rs-r-sm);
  box-shadow: 0 10px 28px rgba(28, 25, 23, 0.26);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.14s ease;
  z-index: 25;
}
.gp-rs__match--card:hover .gp-rs__rcard,
.gp-rs__peek-row--card:hover .gp-rs__rcard,
.gp-rs__row--open .gp-rs__rcard { opacity: 1; visibility: visible; }
.gp-rs__rcard::after {
  content: ""; position: absolute; top: 100%; left: 26px;
  border: 6px solid transparent; border-top-color: var(--rs-ink);
}
/* the FIRST card row sits at the top of the list (no room above) → flip its card
   BELOW the row so it doesn't cover the heading/pills above the gate. Arrow flips
   to point up. The rest of the rows keep the default above placement. */
.gp-rs__peek-list > .gp-rs__peek-row--card:first-child .gp-rs__rcard,
.gp-rs__match-list > .gp-rs__match--card:first-child .gp-rs__rcard {
  bottom: auto; top: calc(100% + 7px);
}
.gp-rs__peek-list > .gp-rs__peek-row--card:first-child .gp-rs__rcard::after,
.gp-rs__match-list > .gp-rs__match--card:first-child .gp-rs__rcard::after {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--rs-ink);
}
.gp-rs__rcard-sector { font-size: 0.82rem; font-weight: 700; line-height: 1.3; }
.gp-rs__rcard-meta { font-size: 0.76rem; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }
.gp-rs__rcard-amt { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.gp-rs__rcard-amt em { font-style: normal; font-weight: 500; color: #f0c4ae; }

/* fix 8 (desktop 4-col grid, ≥561px): the right-most tile's tooltip is centered
   on a marker near the card's right edge → a wide bubble overflows right.
   End-anchor the LAST / 4th tile's tooltip on desktop so it stays inside the
   card. SCOPED to ≥561px — at mobile the 2-col column rules below own anchoring
   (a 3-tile layout's last tile can be in the LEFT column, where right-anchoring
   would push the bubble off-screen-left). */
@media (min-width: 561px) {
  .gp-rs__tile:last-child .gp-rs__tip::after,
  .gp-rs__tile:nth-child(4) .gp-rs__tip::after {
    left: auto;
    right: -4px;
    transform: translateY(4px);
  }
  .gp-rs__tile:last-child .gp-rs__tip:hover::after,
  .gp-rs__tile:last-child .gp-rs__tip:focus-visible::after,
  .gp-rs__tile:nth-child(4) .gp-rs__tip:hover::after,
  .gp-rs__tile:nth-child(4) .gp-rs__tip:focus-visible::after { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* tiles → 2×2 grid regardless of count (count-only stays 2 across) */
  .gp-rs__tiles,
  .gp-rs__tiles[data-rs-count="3"],
  .gp-rs__tiles[data-rs-count="4"] { grid-template-columns: repeat(2, 1fr); }

  .gp-rs__bar { padding-left: 4px; padding-right: 4px; }

  .gp-rs__pillrow { gap: 6px 10px; }

  .gp-rs__gate-locked { gap: 10px; }
  .gp-rs__gate-cta {
    flex: 1 1 100%;
    width: 100%;
    min-height: 44px; /* touch target on mobile */
  }
  .gp-rs__match { flex-wrap: wrap; }
  .gp-rs__match-meta { margin-left: 0; text-align: left; width: 100%; }

  /* slightly narrower tooltip so it can't overrun a 320px card */
  .gp-rs__tip::after { max-width: min(230px, 76vw); }

  /* fix 8: the right-anchored (--end) annotation/source tooltips pin their
     RIGHT edge to a marker that can sit mid-row (e.g. the "advertised: up to"
     marker in the bar caption). A wide bubble would push its LEFT edge into the
     card's left padding at 320px. Cap these narrower at mobile so the bubble
     stays within the readable card area even from a mid-row marker. */
  .gp-rs__tip--end::after { max-width: min(190px, 56vw); }

  /* fix 8: tile tooltips can clip at 320–390px because the tip marker sits
     mid-tile. In the 2-col mobile grid we pin each column's bubble to its
     SAFE outer side so it always stays inside the card (which is overflow:
     hidden): right-column (nth-child(even)) → right-anchored; left-column
     (nth-child(odd)) → left-anchored. The arrow stays under the marker. The
     bubble is also capped narrower so even a mid-tile marker's bubble fits. */
  .gp-rs__tile .gp-rs__tip::after { max-width: min(200px, 64vw); }
  .gp-rs__tile:nth-child(even) .gp-rs__tip::after {
    left: auto;
    right: -4px;
    transform: translateY(4px);
  }
  .gp-rs__tile:nth-child(even) .gp-rs__tip:hover::after,
  .gp-rs__tile:nth-child(even) .gp-rs__tip:focus-visible::after {
    transform: translateY(0);
  }
  .gp-rs__tile:nth-child(odd) .gp-rs__tip::after {
    left: -4px;
    right: auto;
    transform: translateY(4px);
  }
  .gp-rs__tile:nth-child(odd) .gp-rs__tip:hover::after,
  .gp-rs__tile:nth-child(odd) .gp-rs__tip:focus-visible::after {
    transform: translateY(0);
  }

  /* expand the tooltip hit area to ~44px on touch without growing the glyph
     (the icon stays 13px; a transparent overlay carries the tap target) */
  .gp-rs__tip {
    width: 44px; height: 44px;
    margin: -13px -13px -13px -2px; /* absorb the larger box so layout is unchanged */
    vertical-align: -16px;
  }
}

/* very narrow: single-tile-wide labels can still wrap a long $135.4M cleanly */
@media (max-width: 360px) {
  .gp-rs__tile { padding: 12px 11px; }
  .gp-rs__tile-val { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill the bar fill-in + marker pop; show end-state.
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gp-rs__gate-cta { transition: none; }
  .gp-rs__bar-fill,
  .gp-rs--inview .gp-rs__bar-fill { transform: scaleX(1); transition: none; }
  .gp-rs__bar-marker-dot,
  .gp-rs--inview .gp-rs__bar-marker-dot { transform: scale(1); transition: none; }
  .gp-rs__tip::after, .gp-rs__tip::before { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   v3 ADDITIONS (2026-06-25) — recipient-block enhancement sprint
   §2 answer-capsule · §3 "recipients near you" · §1 gate peek (A/B) · §4 gap bar
   All scoped under .gp-rs; reuse the --rs-* tokens declared at the top.
   ════════════════════════════════════════════════════════════════════════ */

/* ── §2 visible GEO answer-capsule ── */
.gp-rs__capsule {
  font-family: var(--rs-body);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--rs-ink-2);
  margin: -2px 0 20px;
  max-width: 62ch;
}
.gp-rs__capsule strong { color: var(--rs-forest-deep); font-weight: 700; }

/* ── §3 "recipients near you" personalization (client-injected) ── */
.gp-rs__near {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--rs-forest-04);
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-sm);
  padding: 11px 14px;
  margin: 0 0 20px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--rs-ink);
}
.gp-rs__near svg { flex: 0 0 auto; color: var(--rs-forest); margin-top: 1px; }
.gp-rs__near b { color: var(--rs-forest-deep); }
.gp-rs__near .you { font-weight: 700; color: var(--rs-sienna-hover); }
/* highlighted "your province" pill — (0,0,2,0) beats .gp-rs__pill / -code */
.gp-rs__pill--prov.gp-rs__pill--you { background: var(--rs-forest); border-color: var(--rs-forest); }
.gp-rs__pill--prov.gp-rs__pill--you,
.gp-rs__pill--prov.gp-rs__pill--you .gp-rs__pill-code { color: #fff; }

/* ── §1 gate PEEK variant (rendered client-side on the 'variant' A/B arm) ── */
.gp-rs__gate--v2 .gp-rs__gate-locked { display: block; padding: 0; }
.gp-rs__peek { padding: 15px 16px 4px; }
.gp-rs__peek-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--rs-forest-deep); margin: 0 0 11px;
}
.gp-rs__peek-head svg { color: var(--rs-sienna); flex: 0 0 auto; }
.gp-rs__peek-list { list-style: none; margin: 0; padding: 0; }
.gp-rs__peek-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px; font-size: 0.9rem; border-radius: var(--rs-r-sm);
}
.gp-rs__peek-row + .gp-rs__peek-row { border-top: 1px solid var(--rs-line); }
.gp-rs__peek-name { font-weight: 600; color: var(--rs-ink); }
.gp-rs__peek-loc { color: var(--rs-ink-3); font-size: 0.8125rem; }
.gp-rs__peek-val {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--rs-forest-deep); white-space: nowrap;
}
/* redacted teaser rows — transparent text + blur shadow (decorative; aria-hidden
   in JS). NOTE: the modifier is "--blur" not "--locked" ON PURPOSE — grant-page.js
   dynamically loads blur-click-upsell.js, whose [class$="--locked"] wildcard would
   otherwise wrap these aria-hidden rows as focusable upsell buttons (a
   focusable-not-tabbable a11y violation). The peek already has an explicit CTA. */
.gp-rs__peek-row--blur span { color: transparent !important; text-shadow: 0 0 8px rgba(28, 25, 23, 0.5); user-select: none; }
.gp-rs__peek-more { text-align: center; font-size: 0.82rem; color: var(--rs-ink-2); font-style: italic; padding: 9px 0 2px; }
.gp-rs__gate-v2cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 16px 16px; }
.gp-rs__gate-v2line { flex: 1 1 100%; font-size: 0.92rem; color: var(--rs-ink-2); line-height: 1.45; margin: 0 0 2px; }
.gp-rs__gate-v2line b { color: var(--rs-ink); }
/* secondary $19 button — (0,0,3,0) beats the muted-underline .gp-rs__gate-alt.gp-unlock-link */
.gp-rs__gate--v2 .gp-rs__gate-alt.gp-rs__gate-v2alt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--rs-line-soft); border-radius: var(--rs-r-pill);
  background: var(--rs-paper); color: var(--rs-ink-2);
  font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.gp-rs__gate--v2 .gp-rs__gate-alt.gp-rs__gate-v2alt:hover,
.gp-rs__gate--v2 .gp-rs__gate-alt.gp-rs__gate-v2alt:focus-visible {
  border-color: var(--rs-sienna); color: var(--rs-sienna-hover); text-decoration: none;
}

/* ── §4 "Where awards land" range plot — the RANGE is the hero (a dumbbell line
      p25→p75), the median is a marker within it, and the ceiling is framed as
      upside in its own dashed lane. NOT a filled progress bar. ── */
.gp-rs__gapbar-head { display: flex; align-items: center; gap: 5px; margin: 0 0 4px; }
.gp-rs__gapbar-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rs-ink-2);
}
.gp-rs__gapbar-plot { display: flex; align-items: center; flex-wrap: wrap; }

/* the range (hero): a dumbbell line from p25 → p75 + a median marker */
.gp-rs__gapbar-range { position: relative; flex: 1 1 58%; min-width: 210px; height: 58px; padding: 0 8px; }
.gp-rs__gapbar-line {
  position: absolute; left: 8px; right: 8px; top: 34px; height: 6px;
  transform: scaleX(0.001); transform-origin: left center;
  background: linear-gradient(90deg, var(--rs-forest), var(--rs-forest-deep));
  border-radius: 999px;
}
.gp-rs--inview .gp-rs__gapbar-line { transform: scaleX(1); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.gp-rs__gapbar-knob {
  position: absolute; top: 37px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--rs-paper); border: 3px solid var(--rs-forest-deep);
  transform: translate(-50%, -50%); z-index: 2;
}
.gp-rs__gapbar-knob--lo { left: 8px; }
.gp-rs__gapbar-knob--hi { left: calc(100% - 8px); }
/* median: a sienna dot ON the line + a callout ABOVE it */
.gp-rs__gapbar-med { position: absolute; top: 37px; transform: translate(-50%, -50%); z-index: 3; }
.gp-rs__gapbar-med-dot {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--rs-sienna); border: 3px solid var(--rs-paper);
  box-shadow: 0 1px 5px rgba(196, 83, 43, 0.4); transition: transform 0.15s ease;
}
.gp-rs__gapbar-med:hover .gp-rs__gapbar-med-dot { transform: scale(1.18); }
.gp-rs__gapbar-med-lbl {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.78rem; font-weight: 600; color: var(--rs-ink-2);
  font-variant-numeric: tabular-nums;
}
.gp-rs__gapbar-med-lbl strong { color: var(--rs-sienna-hover); font-weight: 700; }
.gp-rs__gapbar-med-lbl::after {
  content: ""; position: absolute; top: calc(100% + 1px); left: 50%;
  transform: translateX(-50%); width: 1px; height: 8px; background: var(--rs-sienna);
}
.gp-rs__gapbar-med--start .gp-rs__gapbar-med-lbl { left: 0; transform: none; }
.gp-rs__gapbar-med--start .gp-rs__gapbar-med-lbl::after { left: 7px; transform: none; }
.gp-rs__gapbar-med--end .gp-rs__gapbar-med-lbl { left: auto; right: 0; transform: none; }
.gp-rs__gapbar-med--end .gp-rs__gapbar-med-lbl::after { left: auto; right: 7px; transform: none; }
/* $ labels BELOW the line ends */
.gp-rs__gapbar-edge {
  position: absolute; top: 44px; font-size: 0.75rem; font-weight: 600;
  color: var(--rs-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gp-rs__gapbar-edge--lo { left: 2px; }
.gp-rs__gapbar-edge--hi { right: 2px; color: var(--rs-forest-deep); display: inline-flex; align-items: center; }

/* the upside lane: a dashed connector that CONTINUES the range line → the ceiling.
   padding-top aligns its content onto the green line's level (center 37px), not
   the box center (29px) — otherwise the dash floats ~8px above the line and reads
   as broken. The dash is forest-tinted (it's the same axis, continued + faded). */
.gp-rs__gapbar-upside {
  position: relative; flex: 0 0 auto; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  height: 58px; padding-top: 16px; padding-left: 0;
}
.gp-rs__gapbar-upside-line {
  flex: 0 0 34px; height: 0; margin-left: -3px;
  border-top: 2px dashed rgba(45, 106, 79, 0.45);
}
.gp-rs__gapbar-ceil { display: inline-flex; align-items: center; gap: 5px; }
.gp-rs__gapbar-ceil-arrow { color: var(--rs-sienna); font-size: 1.05rem; font-weight: 700; line-height: 1; }
.gp-rs__gapbar-ceil-lbl { font-size: 0.82rem; color: var(--rs-ink-2); font-variant-numeric: tabular-nums; }
.gp-rs__gapbar-ceil-lbl strong { color: var(--rs-sienna-hover); font-weight: 700; }

.gp-rs__gapbar-note { font-size: 0.84rem; line-height: 1.5; color: var(--rs-ink-2); margin: 14px 0 0; }
.gp-rs__gapbar-note strong { color: var(--rs-ink); font-weight: 700; }

/* ── interactivity: tiles + pills feel explorable (each is tooltip-backed) ── */
.gp-rs__tile { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.gp-rs__tile:hover { border-color: rgba(45, 106, 79, 0.32); box-shadow: 0 2px 9px rgba(28, 25, 23, 0.06); }
.gp-rs__pill { transition: background 0.15s ease, border-color 0.15s ease; }
.gp-rs__pill:hover { background: var(--rs-forest-08); border-color: rgba(45, 106, 79, 0.3); }
/* tooltip info-markers get a faint hover halo so they read as interactive */
.gp-rs__tip { transition: color 0.12s ease, background 0.12s ease; }
.gp-rs__tip:hover { background: var(--rs-forest-08); }

@media (max-width: 560px) {
  /* peek rows wrap value to its own line (matches .gp-rs__match mobile) */
  .gp-rs__peek-row { flex-wrap: wrap; }
  .gp-rs__peek-val { margin-left: 0; width: 100%; }
  /* gate-v2 buttons go full-width like the control CTA */
  .gp-rs__gate-v2cta .gp-rs__gate-cta,
  .gp-rs__gate--v2 .gp-rs__gate-alt.gp-rs__gate-v2alt { flex: 1 1 100%; width: 100%; }
  /* range plot: the range goes full-width and the upside lane drops below it */
  .gp-rs__gapbar-range { flex: 1 1 100%; }
  .gp-rs__gapbar-upside { flex: 1 1 100%; height: auto; padding-left: 0; padding-top: 0; margin-top: 2px; }
  .gp-rs__gapbar-upside-line { flex: 0 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .gp-rs__gapbar-line,
  .gp-rs--inview .gp-rs__gapbar-line { transform: scaleX(1); transition: none; }
  .gp-rs__gate--v2 .gp-rs__gate-alt.gp-rs__gate-v2alt { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   gp-fp — "What winners did next" (funding paths), 2026-08-26
   Lives here, not in homepage-v7.css / main.css (both carry cascade debt).
   The section carries BOTH `gp-rs` and `gp-fp`, so every --rs-* token above
   is already defined for it and the two blocks sit as one visual family.
   Data + publish rules: docs/FUNDING-PATHS.md
   ════════════════════════════════════════════════════════════════════════ */

/* ⚠ No margin override here. .gp-rs already sets `margin: 32px 0`, and adjacent
   vertical margins COLLAPSE — a smaller margin-top on this block is measured as a
   no-op (the 32px bottom margin of #gp-recipients wins) while READING in the source
   like a deliberate tightening. 32px is the page's own section rhythm; leave it. */
.gp-fp__inner { overflow: visible; }

.gp-fp__capsule strong { font-weight: 700; color: var(--rs-ink); }

/* ── The glyph: source node → arrow (year gap) → most-common-next node ──
   Deliberately two nodes, never a chain: next[] is a fan of second wins,
   not a measured sequence (docs/FUNDING-PATHS.md, module header). */
.gp-fp__glyph {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin: 18px 0 4px;
}
.gp-fp__node {
  flex: 1 1 210px;
  min-width: 0;              /* a 1fr/flex text cell must be allowed to shrink */
  background: var(--rs-paper-warm);
  border: 1.5px solid var(--rs-line);
  border-radius: var(--rs-r);
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.05);
}
.gp-fp__node--here {
  border-color: var(--rs-forest);
  box-shadow: 0 0 0 3px var(--rs-forest-08);
}
.gp-fp__node-tag {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-forest);
  margin-bottom: 3px;
}
.gp-fp__node-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rs-ink);
  overflow-wrap: anywhere;   /* long program titles must not push the page wide */
}
.gp-fp__node-meta {
  display: block;
  margin-top: 2px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  color: var(--rs-ink-2);
  font-variant-numeric: tabular-nums;
}

.gp-fp__link {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-width: 84px;
}
.gp-fp__arrow { font-size: 1.05rem; line-height: 1; color: var(--rs-sienna); }
.gp-fp__gap {
  margin-top: 3px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  color: var(--rs-ink-3);
  white-space: nowrap;
}

/* ── Runners-up: explicitly parallel to the top destination ── */
.gp-fp__also { margin-top: 14px; }
.gp-fp__also-lead {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rs-ink-2);
}
.gp-fp__also-list { list-style: none; margin: 0; padding: 0; }
.gp-fp__also-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 0;
  border-top: 1px solid var(--rs-line);
  font-size: 0.88rem;
  line-height: 1.4;
}
.gp-fp__also-name { color: var(--rs-ink); font-weight: 600; overflow-wrap: anywhere; }
.gp-fp__also-num {
  color: var(--rs-ink-2);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
/* geography rides ON the row, so the block never states a program name twice */
.gp-fp__also-scope {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border: 1px solid var(--rs-line);
  border-radius: var(--rs-r-pill);
  background: var(--rs-cream-warm);
  font-size: 0.72rem;
  color: var(--rs-ink-3);
  white-space: nowrap;
}

/* ── Destination links ──
   ⚠ A sitewide `a:hover { color: var(--sienna) }` exists in main.css and has broken
   link-bearing components before, so the colour is restated across all five states at
   (0,0,2,0) rather than relying on inheritance. Underline stays: these sit inside
   sentences and rows where colour alone is not a link affordance. */
.gp-fp__a,
.gp-fp__a:link,
.gp-fp__a:visited,
.gp-fp__a:hover,
.gp-fp__a:focus,
.gp-fp__a:active {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rs-line);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  /* WCAG 2.5.8 (24x24) without a layout shift: padding-block on an INLINE box grows
     the hit area but not the line box, so the row height is unchanged. */
  padding-block: 3px;
}
.gp-fp__a:hover,
.gp-fp__a:focus {
  color: var(--rs-forest);
  text-decoration-color: var(--rs-forest);
}
.gp-fp__a:focus-visible {
  outline: 2px solid var(--rs-forest);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── "not open right now" marker ──
   Rendered on any destination whose programStatus is not `active`, everywhere that
   destination is named. Deliberately NOT the same pill as the geography tag: a
   geography tag narrows a live opportunity, this one says there is no opportunity. */
.gp-fp__status {
  display: inline-block;
  /* zero: on the runner-up row it is a FLEX item and .gp-fp__also-item's `gap`
     already spaces it on both sides. A margin here made that spacing asymmetric. */
  margin: 0;
  padding: 1px 8px;
  border: 1px solid var(--rs-sienna);
  border-radius: var(--rs-r-pill);
  background: var(--rs-cream-warm);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* the darker sienna, not --rs-sienna: at 0.7rem on cream the lighter one measures
     4.0:1, under the 4.5:1 floor for small text. This measures 5.6:1. */
  color: var(--rs-sienna-hover);
  white-space: nowrap;
  vertical-align: baseline;
}
/* In the glyph the node is a stacked card, so the chip gets its own line under the
   name rather than competing with it for the row. */
.gp-fp__node .gp-fp__status { margin: 4px 0 0; }

/* ── Geographic scope notes (a coherent regional destination is useful info;
      an incoherent one is a caveat the reader must see; a destination that is not
      running at all gets the same treatment, with the sharper sentence) ── */
.gp-fp__scope {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--rs-ink-2);
}
.gp-fp__scope li { margin-top: 3px; }
.gp-fp__scope strong { color: var(--rs-ink); font-weight: 600; }

/* ── Fine print: denominator note, then claim basis + OGL attribution ── */
.gp-fp__note,
.gp-fp__source {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--rs-ink-3);
  margin: 12px 0 0;
}
.gp-fp__source { margin-top: 8px; }

@media (max-width: 640px) {
  .gp-fp__glyph { flex-direction: column; align-items: stretch; }
  /* ⚠ flex-basis follows the MAIN axis. Once the container turns column, the
     `flex: 1 1 210px` above stops meaning "at least 210px wide" and starts meaning
     "210px TALL" — which shipped two nodes with ~120px of empty space each on a
     phone, looking exactly like a deliberate (and awful) design choice. */
  .gp-fp__node { flex: 0 0 auto; }
  .gp-fp__link {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    padding: 8px 0 8px 16px;
    min-width: 0;
  }
  /* A rotated horizontal arrow reads as a stray vertical tick at this size; swap
     the glyph rather than spinning it. */
  .gp-fp__arrow { font-size: 0; transform: none; }
  .gp-fp__arrow::before { content: '\2193'; font-size: 1.3rem; line-height: 1; }
  .gp-fp__gap { margin-top: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   NAMED RECIPIENTS (2026-10-04) — names are free, crawlable text
   Static list baked by recipient-stats-block.js: 10 rows visible, the rest in a
   native <details>. Amounts are NOT here for free visitors; the member path
   (grant-page.js _renderRecipientMatches) adds .gp-rs__recips--amounts and one
   .gp-rs__r-amt per row. Selectors are .gp-rs-compounded so page-level h3/ol/li
   rules in grant-page.css cannot reach in.
   ════════════════════════════════════════════════════════════════════════ */
.gp-rs .gp-rs__recips {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rs-line);
  container-type: inline-size;
}
.gp-rs .gp-rs__recips-h {
  font-family: var(--rs-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rs-ink-2);
  line-height: 1.3;
  margin: 0 0 6px;
}
.gp-rs .gp-rs__recips-lead {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rs-ink-2);
  margin: 0 0 12px;
  max-width: 68ch;
  overflow-wrap: break-word;
}
.gp-rs .gp-rs__rlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 28px;
}
.gp-rs .gp-rs__r {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-areas: "yr name" "yr meta";
  column-gap: 10px;
  row-gap: 1px;
  align-content: start;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--rs-line);
  min-width: 0;
}
.gp-rs .gp-rs__r-yr {
  grid-area: yr;
  padding-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rs-ink-3);
  font-variant-numeric: tabular-nums;
}
.gp-rs .gp-rs__r-name {
  grid-area: name;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rs-ink);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.gp-rs .gp-rs__r-meta {
  grid-area: meta;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--rs-ink-3);
  overflow-wrap: anywhere;
}
/* Two columns once the block itself is wide enough for ~34ch names per column. */
@container (min-width: 620px) {
  .gp-rs .gp-rs__rlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* "Show N more recipients" — a native disclosure, styled as a quiet text control
   with a 44px target. The list inside is in the DOM (and crawlable) when closed. */
.gp-rs .gp-rs__more { margin: 0; }
.gp-rs .gp-rs__more-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rs-forest-deep);
  cursor: pointer;
  list-style: none;
  border-radius: 4px;
}
.gp-rs .gp-rs__more-sum::-webkit-details-marker { display: none; }
.gp-rs .gp-rs__more-sum::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.gp-rs .gp-rs__more[open] > .gp-rs__more-sum::after { transform: translateY(1px) rotate(-135deg); }
.gp-rs .gp-rs__more-sum:hover { color: var(--rs-forest); text-decoration: underline; text-underline-offset: 3px; }
.gp-rs .gp-rs__more-sum:focus-visible { outline: 2px solid var(--rs-forest); outline-offset: 2px; }
.gp-rs .gp-rs__more[open] > .gp-rs__more-sum { margin-bottom: 0; }
.gp-rs .gp-rs__rlist--more { margin-top: 0; }

/* The gate now sits under the list it qualifies, so it needs less air. */
.gp-rs .gp-rs__recips + .gp-rs__gate { margin-top: 16px; }

/* ── Member view: each row gains its award amount (right column) ── */
.gp-rs .gp-rs__recips--amounts .gp-rs__r {
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  grid-template-areas: "yr name amt" "yr meta amt";
}
.gp-rs .gp-rs__r-amt {
  grid-area: amt;
  align-self: start;
  padding-top: 1px;
  text-align: right;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--rs-forest-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gp-rs .gp-rs__r-amt small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--rs-ink-3);
}
.gp-rs .gp-rs__r-flag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rs-forest);
  background: var(--rs-forest-08);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}
.gp-rs .gp-rs__matches-note {
  margin: 0;
  padding: 12px 16px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--rs-ink-2);
}
@media (prefers-reduced-motion: reduce) {
  .gp-rs .gp-rs__more-sum::after { transition: none; }
}