/* ════════════════════════════════════════════════════════════════════════
   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: hidden;
}
.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;
}

/* ════════════════════════════════════════════════════════════════════════
   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); }

/* 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; }
}