/* ════════════════════════════════════════════════════════════════════════
   winner-panel.css — universal "Winner Intelligence Panel" component.
   One component, mounted on many surfaces (Game Plan, standalone winner
   article, later dashboard / SEO / grant-page rebuild). Prefix: gc-wp

   Visual language deliberately mirrors recipient-stats.css (the /grants/*
   "who actually receives this" block): same --gp-* tokens with literal
   fallbacks, so it inherits the host page's theme when present and still
   looks intentional standalone. Self-contained; no external deps.

   Interactivity (2026-07-10 rebuild): ONE shared tooltip primitive
   (gc-wp__info → gc-wp__bubble), hover-lift stat tiles, an interactive range
   bar, expandable winner cards with an award-history timeline, real stacking
   links, and a purpose-built mobile winner card. Every control is obvious;
   nothing is a dead click.

   Locked-state a11y (repo has a live trap): teaser rows use the modifier
   "--blur", NEVER any "*--locked" class — a dynamically-loaded
   blur-click-upsell.js wildcard [class$="--locked"] would wrap blurred,
   aria-hidden rows into focusable upsell buttons (focusable-not-tabbable).
   ════════════════════════════════════════════════════════════════════════ */

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

  display: block;
  margin: 24px 0;
  font-family: var(--wp-body);
  box-sizing: border-box;
}
.gc-wp *, .gc-wp *::before, .gc-wp *::after { box-sizing: border-box; }

.gc-wp__inner {
  position: relative;
  background: var(--wp-paper);
  border: 1px solid var(--wp-line);
  border-left: 3px solid var(--wp-forest);
  border-radius: var(--wp-r);
  padding: clamp(16px, 4vw, 26px);
  box-shadow: var(--gp-sh-sm, 0 1px 3px rgba(28, 25, 23, 0.04));
  overflow: visible;   /* tooltips escape the card */
}

/* the bare mount when nothing renders */
.gc-wp-empty { display: none !important; min-height: 0 !important; }

/* ── Heading + scope ─────────────────────────────────────────────────────── */
.gc-wp__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(--wp-forest);
  margin: 0 0 8px;
}
.gc-wp__eyebrow svg { width: 14px; height: 14px; flex: 0 0 auto; }

.gc-wp__h {
  font-family: var(--wp-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wp-ink);
  margin: 0 0 6px;
}
/* scope: decluttered — smaller + quieter than v1, with a data-source tooltip */
.gc-wp__scope {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--wp-ink-3);
  margin: 0 0 15px;
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED TOOLTIP PRIMITIVE — gc-wp__info (trigger) + gc-wp__bubble (bubble).
   Opens on hover / focus / tap-toggle; JS flips above↔below by viewport fit
   and clamps horizontally. role="tooltip" + aria-describedby wired in JS.
   ════════════════════════════════════════════════════════════════════════ */
.gc-wp__tipwrap { position: relative; display: inline-flex; vertical-align: middle; }
.gc-wp__info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin: 0 0 0 3px; padding: 0;
  border: 0; background: transparent; color: var(--wp-ink-3);
  border-radius: 50%; cursor: help; flex: 0 0 auto;
  vertical-align: -4px; line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
/* invisible 44px touch target without disturbing layout */
.gc-wp__info::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.gc-wp__info svg { width: 15px; height: 15px; display: block; position: relative; }
.gc-wp__info:hover { color: var(--wp-forest); background: var(--wp-forest-08); }
.gc-wp__info:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 2px; color: var(--wp-forest); }
.gc-wp__tipwrap--open .gc-wp__info { color: var(--wp-forest); background: var(--wp-forest-08); }

.gc-wp__bubble {
  position: absolute; z-index: 40;
  bottom: calc(100% + 10px); left: 50%;
  width: max-content; max-width: 280px;
  padding: 10px 12px;
  background: var(--wp-ink); color: #fff;
  font-family: var(--wp-body); font-size: 0.78rem; font-weight: 400;
  line-height: 1.5; text-align: left; letter-spacing: 0; text-transform: none;
  border-radius: var(--wp-r-sm);
  box-shadow: 0 10px 30px rgba(28, 25, 23, 0.26);
  /* display:none while closed (toggled to block by JS on open) so an
     off-viewport closed bubble never extends the page scrollWidth on mobile. */
  display: none;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(4px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.gc-wp__tipwrap--below .gc-wp__bubble {
  bottom: auto; top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px) scale(0.97);
  transform-origin: top center;
}
.gc-wp__tipwrap--open .gc-wp__bubble {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.gc-wp__bubble-arr {
  position: absolute; left: 50%; top: 100%;
  width: 0; height: 0; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--wp-ink);
}
.gc-wp__tipwrap--below .gc-wp__bubble-arr {
  top: auto; bottom: 100%;
  border-top-color: transparent; border-bottom-color: var(--wp-ink);
}

/* ── Collapsed summary + toggle (embedded surfaces) ──────────────────────── */
.gc-wp__summary {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--wp-ink-2);
  margin: 0 0 12px;
}
.gc-wp__summary strong { color: var(--wp-forest-deep); font-weight: 700; font-variant-numeric: tabular-nums; }

.gc-wp__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--wp-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp-forest-deep);
  background: var(--wp-forest-04);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-pill);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gc-wp__toggle:hover,
.gc-wp__toggle:focus-visible { background: var(--wp-forest-08); border-color: rgba(45, 106, 79, 0.3); }
.gc-wp__toggle:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 2px; }
.gc-wp__toggle svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.gc-wp__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.gc-wp__body[hidden] { display: none; }

/* ── Free stat tiles (hover-lift + info tooltip) ─────────────────────────── */
.gc-wp__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 20px;
}
.gc-wp__tiles[data-wp-count="2"] { grid-template-columns: repeat(2, 1fr); }
.gc-wp__tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px 12px;
  background: linear-gradient(180deg, var(--wp-paper-warm), var(--wp-cream));
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-sm);
  min-width: 0;
  cursor: pointer;   /* whole tile toggles its own ⓘ tooltip (wired in JS) — hover lift now implies a real click */
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.gc-wp__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(28, 25, 23, 0.08);
  border-color: var(--wp-line-soft);
}
.gc-wp__tile-val {
  font-family: var(--wp-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 4.2vw, 1.65rem);
  line-height: 1.05;
  color: var(--wp-forest-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.gc-wp__tile-label {
  display: inline-flex; align-items: center; gap: 1px; flex-wrap: wrap;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--wp-ink-2);
  font-weight: 500;
}

/* ── Award-range bar (p25→p75 band, median tick, max ceiling, p90 reveal) ── */
.gc-wp__bar { margin: 0 0 20px; }
.gc-wp__bar-cap {
  display: flex; align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp-ink-2);
  margin: 0 0 12px;
}
.gc-wp__bar-cap-sub { color: var(--wp-ink-3); font-weight: 600; }
.gc-wp__bar-plot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;
  border-radius: var(--wp-r-sm); cursor: help;
  outline: none;
}
.gc-wp__bar-plot:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 4px; }
.gc-wp__bar-range { position: relative; flex: 1 1 60%; min-width: 200px; height: 56px; padding: 0 6px; }
.gc-wp__bar-track {
  position: absolute; left: 6px; right: 6px; top: 32px; height: 8px;
  border-radius: 999px;
  background: var(--wp-cream-warm);
  border: 1px solid var(--wp-line);
}
.gc-wp__bar-fill {
  position: absolute; top: -1px; bottom: -1px; left: 0; right: 0;
  background: linear-gradient(90deg, var(--wp-forest), var(--wp-forest-deep));
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(27, 67, 50, 0.25);
  transform: scaleX(0.001);
  transform-origin: left center;
}
.gc-wp--inview .gc-wp__bar-fill {
  transform: scaleX(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* median dot + callout */
.gc-wp__bar-med { position: absolute; top: 36px; transform: translate(-50%, -50%); z-index: 3; }
.gc-wp__bar-med-dot {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  background: var(--wp-sienna); border: 3px solid var(--wp-paper);
  box-shadow: 0 1px 5px rgba(196, 83, 43, 0.4);
  transition: box-shadow 0.18s ease;
}
.gc-wp__bar-plot--active .gc-wp__bar-med-dot {
  box-shadow: 0 0 0 5px rgba(196, 83, 43, 0.14), 0 1px 5px rgba(196, 83, 43, 0.45);
}
.gc-wp__bar-med-lbl {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.78rem; font-weight: 700;
  color: var(--wp-sienna-hover); font-variant-numeric: tabular-nums;
}
.gc-wp__bar-med-lbl::after {
  content: ""; position: absolute; top: calc(100% + 1px); left: 50%;
  transform: translateX(-50%); width: 1px; height: 7px; background: var(--wp-sienna);
}
.gc-wp__bar-med--start .gc-wp__bar-med-lbl { left: 0; transform: none; }
.gc-wp__bar-med--start .gc-wp__bar-med-lbl::after { left: 6px; transform: none; }
.gc-wp__bar-med--end .gc-wp__bar-med-lbl { left: auto; right: 0; transform: none; }
.gc-wp__bar-med--end .gc-wp__bar-med-lbl::after { left: auto; right: 6px; transform: none; }
/* p25 / p75 edge labels below the band (tag + value) */
.gc-wp__bar-edge {
  position: absolute; top: 44px; font-size: 0.74rem; font-weight: 600;
  color: var(--wp-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gc-wp__bar-edge-t {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--wp-ink-3); transition: color 0.15s ease;
}
.gc-wp__bar-plot--active .gc-wp__bar-edge-t { color: var(--wp-forest); }
.gc-wp__bar-edge--lo { left: 2px; }
.gc-wp__bar-edge--hi { right: 2px; color: var(--wp-forest-deep); }
/* the ceiling lane: dashed continuation → a revealed p90 line + "up to $X" */
.gc-wp__bar-ceil {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  height: 56px; padding-top: 6px; box-sizing: border-box;
}
.gc-wp__bar-ceil-line {
  flex: 0 0 30px; height: 0; margin-left: -3px;
  border-top: 2px dashed rgba(45, 106, 79, 0.45);
}
.gc-wp__bar-ceil-stack { display: flex; flex-direction: column; gap: 2px; }
.gc-wp__bar-ceil-lbl {
  font-size: 0.8rem; color: var(--wp-ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
}
.gc-wp__bar-ceil-lbl strong { color: var(--wp-sienna-hover); font-weight: 700; }
.gc-wp__bar-ceil-arrow { color: var(--wp-sienna); font-size: 1rem; font-weight: 700; line-height: 1; }
/* p90 marker — hidden until the plot is hovered / focused / tapped */
.gc-wp__bar-p90 {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.76rem; color: var(--wp-sienna-hover); font-variant-numeric: tabular-nums;
  white-space: nowrap; max-height: 0; opacity: 0; overflow: hidden;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, max-height 0.2s ease, transform 0.18s ease;
}
.gc-wp__bar-p90 strong { color: var(--wp-sienna-hover); font-weight: 700; }
.gc-wp__bar-p90-arrow { color: var(--wp-sienna); font-weight: 700; }
.gc-wp__bar-plot--active .gc-wp__bar-p90 { max-height: 2.4em; opacity: 1; transform: translateY(0); }

/* ── Pills (sectors + provinces) + concentration ─────────────────────────── */
.gc-wp__pillblock { display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; }
.gc-wp__pillrow { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.gc-wp__pilllabel {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 0;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wp-ink-2); padding-top: 3px;
}
.gc-wp__pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gc-wp__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  font-size: 0.8rem; font-weight: 500; line-height: 1.3;
  color: var(--wp-ink);
  background: var(--wp-forest-04);
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-pill);
  font-variant-numeric: tabular-nums;
  cursor: pointer;   /* clicking any pill opens the GROUP's tooltip (wired in JS) — hover bg now implies a real click */
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gc-wp__pill:hover { background: var(--wp-forest-08); border-color: var(--wp-line-soft); }
.gc-wp__pill-code { font-weight: 700; color: var(--wp-forest-deep); letter-spacing: 0.02em; }
.gc-wp__pill-share { color: var(--wp-ink-3); font-size: 0.75rem; }
.gc-wp__concentration {
  font-size: 0.84rem; line-height: 1.5; color: var(--wp-ink-2);
  margin: 14px 0 0;
}
.gc-wp__concentration strong { color: var(--wp-ink); font-weight: 700; }

/* count-only (aggregate) + slim tiers */
.gc-wp__aggline {
  font-size: 1rem; line-height: 1.55; color: var(--wp-ink-2);
  margin: 0 0 4px; max-width: 60ch;
}
.gc-wp__aggline strong { color: var(--wp-forest-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-wp--slim .gc-wp__inner { border-left-width: 3px; }
.gc-wp__slimline { font-size: 0.98rem; line-height: 1.5; color: var(--wp-ink-2); margin: 0; }
.gc-wp__slimline strong { color: var(--wp-forest-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-wp__slimlabel {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--wp-forest); margin: 0 0 8px;
}
.gc-wp__exlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gc-wp__exlist li {
  position: relative; padding-left: 18px;
  font-size: 0.9rem; line-height: 1.45; color: var(--wp-ink);
}
.gc-wp__exlist li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--wp-forest);
}

/* ════════════════════════════════════════════════════════════════════════
   PREMIUM SECTION
   ════════════════════════════════════════════════════════════════════════ */
.gc-wp__premium {
  margin: 22px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--wp-line);
}
.gc-wp__premium-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wp-forest-deep); margin: 0 0 14px;
}
.gc-wp__premium-h svg { flex: 0 0 auto; color: var(--wp-sienna); }
/* honest population caption under the winners heading (muni-heavy programs) */
.gc-wp__popnote {
  font-size: 0.82rem; line-height: 1.5; color: var(--wp-ink-2);
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--wp-cream-warm);
  border-left: 2px solid var(--wp-line-soft);
  border-radius: 0 var(--wp-r-sm) var(--wp-r-sm) 0;
}

/* ── Winner cards (revealed) — expandable rows w/ award-history timeline ──── */
.gc-wp__winners { display: flex; flex-direction: column; gap: 8px; }
.gc-wp__winner {
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-sm);
  background: var(--wp-paper);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gc-wp__winner--extra { display: none; }
.gc-wp__winner-head {
  position: relative;
  display: flex; align-items: center; gap: 10px 14px;
  padding: 12px 14px; min-height: 44px;
  border-left: 3px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gc-wp__winner-head[data-wp-winrow] { cursor: pointer; }
.gc-wp__winner-head[data-wp-winrow]:hover {
  background: var(--wp-forest-04); border-left-color: var(--wp-forest);
}
.gc-wp__winner--open > .gc-wp__winner-head {
  background: var(--wp-forest-04); border-left-color: var(--wp-forest);
}
.gc-wp__winner-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-wp__winner-nl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gc-wp__winner-name { font-weight: 600; color: var(--wp-ink); font-size: 0.95rem; line-height: 1.3; overflow-wrap: anywhere; }
.gc-wp__winner-meta { font-size: 0.8rem; color: var(--wp-ink-3); line-height: 1.35; }
.gc-wp__winner-line3 { display: none; }   /* mobile-only compact line */
.gc-wp__winner-fig { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 1px; }
.gc-wp__winner-total {
  font-family: var(--wp-display); font-weight: 600; font-size: 1.05rem;
  color: var(--wp-forest-deep); font-variant-numeric: tabular-nums;
  line-height: 1.1; letter-spacing: -0.01em;
}
.gc-wp__winner-sub { font-size: 0.73rem; color: var(--wp-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-wp__winner-toggle {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -6px -6px -6px 0; padding: 0;
  border: 0; background: transparent; color: var(--wp-ink-3);
  border-radius: 50%; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gc-wp__winner-toggle:hover { background: var(--wp-forest-08); color: var(--wp-forest-deep); }
.gc-wp__winner-toggle:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 2px; }
.gc-wp__winner-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.gc-wp__winner--open .gc-wp__winner-toggle svg { transform: rotate(180deg); }

/* REPEAT badge = a tooltip trigger; overrides the round gc-wp__info base */
.gc-wp__repeat {
  width: auto; height: auto; margin: 0; padding: 1px 6px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--wp-forest); background: var(--wp-forest-08);
  border: 1px solid transparent; border-radius: 4px;
  line-height: 1.5; vertical-align: baseline; cursor: help;
}
.gc-wp__repeat:hover,
.gc-wp__tipwrap--open .gc-wp__repeat {
  background: var(--wp-forest-04); border-color: var(--wp-forest); color: var(--wp-forest-deep);
}
.gc-wp__repeat-i { display: inline-flex; opacity: 0.75; }
.gc-wp__repeat-i svg { width: 11px; height: 11px; display: block; }

/* award-history timeline (inside an expanded winner) */
.gc-wp__winner-detail {
  padding: 4px 14px 12px 17px;
  border-top: 1px solid var(--wp-line);
  background: var(--wp-paper-warm);
}
.gc-wp__winner-detail[hidden] { display: none; }
.gc-wp__winner-detail-h {
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--wp-ink-3); margin: 12px 0 9px;
}
.gc-wp__timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.gc-wp__timeline::before {
  content: ""; position: absolute; left: 3px; top: 5px; bottom: 8px;
  width: 2px; background: var(--wp-line);
}
.gc-wp__tl-item {
  position: relative; padding: 0 0 10px 18px;
  font-size: 0.84rem; line-height: 1.5; color: var(--wp-ink-2);
}
.gc-wp__tl-item:last-child { padding-bottom: 2px; }
.gc-wp__tl-item::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wp-forest); border: 2px solid var(--wp-paper-warm);
}
.gc-wp__tl-fy { font-weight: 700; color: var(--wp-ink); font-variant-numeric: tabular-nums; }
.gc-wp__tl-amt { font-weight: 700; color: var(--wp-forest-deep); font-variant-numeric: tabular-nums; }
.gc-wp__tl-dot { color: var(--wp-line-soft); }
.gc-wp__tl-title { color: var(--wp-ink-2); }
.gc-wp__tl-x {
  display: inline-block; font-size: 0.66rem; font-weight: 700;
  color: var(--wp-sienna-hover); background: rgba(196, 83, 43, 0.1);
  border-radius: 4px; padding: 0 5px; margin-left: 3px; vertical-align: 1px;
}
.gc-wp__tl-more {
  position: relative; padding-left: 18px;
  font-size: 0.8rem; font-style: italic; color: var(--wp-ink-3);
}
.gc-wp__tl-more::before {
  content: ""; position: absolute; left: 1px; top: 0.35em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--wp-line-soft);
}

/* "show all N winners" expander */
.gc-wp__showall {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 8px 16px; min-height: 40px;
  font-family: var(--wp-body); font-size: 0.85rem; font-weight: 600;
  color: var(--wp-forest-deep); background: var(--wp-forest-04);
  border: 1px solid var(--wp-line); border-radius: var(--wp-r-pill);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.gc-wp__showall:hover { background: var(--wp-forest-08); border-color: rgba(45, 106, 79, 0.3); }
.gc-wp__showall:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 2px; }
.gc-wp__showall svg { width: 14px; height: 14px; }

/* likeYou / stacking / firstAward blocks */
.gc-wp__block { margin: 20px 0 0; }
.gc-wp__block-h {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--wp-ink-2); margin: 0 0 10px;
}
.gc-wp__likeyou { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* Data rows, NOT controls: a faint static tint for readability, no hover lift/highlight, no cursor change.
   (The "--you" highlight is a data STATE applied at render, not a hover affordance.) */
.gc-wp__likeyou li {
  display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--wp-line); border-radius: var(--wp-r-sm);
  background: var(--wp-paper-warm); font-size: 0.875rem; line-height: 1.4;
}
.gc-wp__likeyou li.gc-wp__likeyou--you { border-color: var(--wp-forest); background: var(--wp-forest-04); }
.gc-wp__ly-id { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; flex: 1 1 auto; }
.gc-wp__ly-sector { font-weight: 600; color: var(--wp-ink); }
.gc-wp__ly-prov { color: var(--wp-ink-3); font-variant-numeric: tabular-nums; }
.gc-wp__ly-n { color: var(--wp-ink-3); font-size: 0.8rem; }
.gc-wp__ly-med { margin-left: auto; font-weight: 700; color: var(--wp-forest-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-wp__ly-med strong { font-weight: 700; color: var(--wp-forest-deep); }
.gc-wp__ly-p75 { color: var(--wp-ink-3); font-weight: 400; font-size: 0.82rem; }
.gc-wp__ly-you {
  display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff; background: var(--wp-forest);
  border-radius: 4px; padding: 1px 6px;
}
.gc-wp__firstaward { font-size: 0.9rem; line-height: 1.5; color: var(--wp-ink-2); margin: 16px 0 0; }
.gc-wp__firstaward strong { color: var(--wp-forest-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.gc-wp__stacking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gc-wp__stacking li {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 0.875rem; line-height: 1.4; color: var(--wp-ink);
}
.gc-wp__stack-plain { padding: 3px 0; }
/* stacking rows are real links to each grant page. Pin the colour across every
   link state to defeat the sitewide `a:hover { color: var(--sienna) }` rule. */
.gc-wp__stack-link,
.gc-wp__stack-link:link,
.gc-wp__stack-link:visited,
.gc-wp__stack-link:hover,
.gc-wp__stack-link:focus,
.gc-wp__stack-link:active { color: var(--wp-ink); text-decoration: none; }
.gc-wp__stack-link {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 3px 7px; margin: -3px -7px;
  border-radius: var(--wp-r-sm);
  transition: background 0.15s ease;
}
.gc-wp__stack-link:hover,
.gc-wp__stack-link:focus-visible { background: var(--wp-forest-04); }
.gc-wp__stack-link:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 1px; }
.gc-wp__stack-link:hover .gc-wp__stack-title,
.gc-wp__stack-link:focus-visible .gc-wp__stack-title { text-decoration: underline; color: var(--wp-forest-deep); }
.gc-wp__stack-share { font-weight: 700; color: var(--wp-forest-deep); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.gc-wp__stack-title { color: var(--wp-ink); }
.gc-wp__stack-arrow { flex: 0 0 auto; color: var(--wp-sienna); font-weight: 700; transition: transform 0.15s ease; }
.gc-wp__stack-link:hover .gc-wp__stack-arrow,
.gc-wp__stack-link:focus-visible .gc-wp__stack-arrow { transform: translateX(3px); }

/* ── LOCKED (gate) state ─────────────────────────────────────────────────── */
.gc-wp__gate {
  border: 1px solid var(--wp-line);
  border-radius: var(--wp-r-sm);
  background: linear-gradient(180deg, var(--wp-cream-warm), var(--wp-cream));
  overflow: hidden;
}
.gc-wp__gate-teaser { padding: 12px 14px 6px; position: relative; }
.gc-wp__gate-rows { list-style: none; margin: 0; padding: 0; }
.gc-wp__gate-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px; font-size: 0.9rem; border-radius: var(--wp-r-sm);
}
.gc-wp__gate-row + .gc-wp__gate-row { border-top: 1px solid var(--wp-line); }
.gc-wp__gate-row-name { font-weight: 600; color: var(--wp-ink); }
.gc-wp__gate-row-val { margin-left: auto; font-weight: 700; color: var(--wp-forest-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the blur: transparent text + soft shadow. NOT focusable, aria-hidden set in JS.
   Modifier is "--blur" (see file header) — never "*--locked". */
.gc-wp__row--blur span { color: transparent !important; text-shadow: 0 0 8px rgba(28, 25, 23, 0.5); }
.gc-wp__row--blur { filter: blur(0.5px); user-select: none; }
.gc-wp__gate-cta-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 14px 14px;
}
.gc-wp__gate-line { flex: 1 1 220px; min-width: 0; font-size: 0.92rem; line-height: 1.45; color: var(--wp-ink); }
.gc-wp__gate-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px;
  background: var(--wp-sienna); color: #fff;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border-radius: var(--wp-r-pill); white-space: nowrap; cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.gc-wp__gate-cta:hover,
.gc-wp__gate-cta:focus-visible { background: var(--wp-sienna-hover); color: #fff; }
.gc-wp__gate-cta:active { transform: translateY(1px); }
.gc-wp__gate-cta:focus-visible { outline: 2px solid var(--wp-forest); outline-offset: 2px; }

/* ── Attribution (quiet — the OGL licence line) ──────────────────────────── */
.gc-wp__attr {
  font-size: 0.7rem; line-height: 1.45; color: var(--wp-ink-3);
  margin: 18px 0 0; padding-top: 2px; opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE — purpose-built compact winner cards + tile reflow <=560px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .gc-wp__tiles,
  .gc-wp__tiles[data-wp-count="3"] { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .gc-wp__tile { padding: 11px 11px 10px; }

  .gc-wp__bar-range { flex: 1 1 100%; }
  .gc-wp__bar-ceil { flex: 1 1 100%; height: auto; padding-top: 2px; margin-top: 2px; }
  .gc-wp__bar-ceil-line { flex: 0 0 22px; }

  .gc-wp__gate-cta { flex: 1 1 100%; width: 100%; }

  /* winner rows → 3-line compact cards. Line 1 name (+ chip), line 2 city ·
     sector, line 3 "N awards · $TOTAL · years" (one JS-built string — the
     '$26M2020' / sector-glued-to-name bugs are impossible by construction). */
  .gc-wp__winner-head { display: block; padding: 12px 46px 12px 14px; }
  .gc-wp__winner-fig { display: none; }
  .gc-wp__winner-id { gap: 3px; }
  .gc-wp__winner-line3 {
    display: block; font-size: 0.8rem; font-weight: 600;
    color: var(--wp-forest-deep); font-variant-numeric: tabular-nums;
  }
  .gc-wp__winner-toggle {
    position: absolute; top: 50%; right: 8px; margin: 0;
    transform: translateY(-50%); width: 40px; height: 40px;
  }

  .gc-wp__likeyou li { gap: 4px 8px; }
  .gc-wp__ly-med { margin-left: 0; width: 100%; }

  .gc-wp__bubble { max-width: min(280px, calc(100vw - 24px)); }
}

/* very narrow: stat tiles fall back to a 1 + 2 grid so wide values
   (e.g. $1.75M) never overflow at 320px. */
@media (max-width: 360px) {
  .gc-wp__tiles[data-wp-count="3"] { grid-template-columns: 1fr 1fr; }
  .gc-wp__tiles[data-wp-count="3"] .gc-wp__tile:first-child { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT-ONLY BY DESIGN — no prefers-color-scheme: dark variant, matching
   recipient-stats.css (the established convention for these embeds). All host
   pages (gameplan, funding-intelligence, /grants/*) are always-light pages;
   a dark override here made the panel render near-black inside a light page
   (and mixed host --gp-* tokens produced dark-brown-on-near-black headings).
   If a genuinely dark host surface ever mounts this panel, give it a scoped
   token override on the host, not a media query here.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gc-wp__bar-fill,
  .gc-wp--inview .gc-wp__bar-fill { transform: scaleX(1); transition: none; }
  .gc-wp__toggle, .gc-wp__toggle svg, .gc-wp__gate-cta,
  .gc-wp__tile, .gc-wp__winner, .gc-wp__winner-head, .gc-wp__winner-toggle svg,
  .gc-wp__info, .gc-wp__bubble, .gc-wp__bar-p90, .gc-wp__pill, .gc-wp__likeyou li,
  .gc-wp__stack-link, .gc-wp__stack-arrow, .gc-wp__showall, .gc-wp__bar-med-dot { transition: none; }
  .gc-wp__tile:hover { transform: none; }
}