/* Winner Database — GrantCompass brand system (warm editorial, light only) */
:root {
  --cream: #faf6f0; --cream-dark: #f2ebe0; --paper: #fffcf7;
  --ink: #1a1714; --ink-2: #5c5549; --ink-3: #6f665a; --rule: #e6ddd0;
  --sienna: #a83f1a; --sienna-tint: rgba(168, 63, 26, 0.08);
  --forest: #2d6a4f; --forest-deep: #1a4731; --forest-tint: rgba(45, 106, 79, 0.09);
  --gold: #b8860b; --gold-ink: #7a5c10;
  --disp: 'Fraunces', Georgia, serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', monospace;
  --r: 10px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(26,23,20,.04); --sh-md: 0 4px 12px rgba(26,23,20,.06);
  --sh-lg: 0 12px 40px rgba(26,23,20,.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 700; }

/* nav */
.wdb-nav { display: flex; align-items: center; gap: 28px; padding: 0 32px; height: 58px;
  background: var(--cream); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.wdb-nav__logo { display: flex; align-items: center; gap: 8px; font: 600 17px var(--disp); color: var(--ink); }
.wdb-nav__links { display: flex; gap: 22px; margin-left: 8px; }
.wdb-nav__links a { color: var(--ink-2); font-weight: 500; font-size: 14px; }
.wdb-nav__links a.is-here { color: var(--ink); font-weight: 700; box-shadow: 0 2px 0 var(--sienna); padding-bottom: 2px; }
.wdb-nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.wdb-nav__signin { font-weight: 600; font-size: 14px; color: var(--forest); }
.wdb-nav__member { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--forest-deep);
  background: var(--forest-tint); border: 1px solid rgba(45,106,79,.25); padding: 4px 10px; border-radius: 100px; }

/* hero */
/* ★★ U1 + U2 (2026-08-11). TWO defects, one declaration.
   ① CLEARANCE. The fixed site nav is 56px tall and the hero's 58px of top padding put the eyebrow
      at y=58 — a 2px gap. Not "under the nav", so the B12 assertion (eyebrowTop > navBottom) passed;
      just visually welded to it. The phone breakpoint had already been given clearance in isolation,
      which is exactly why desktop never got any: a fix applied at ONE width teaches nobody that the
      base value is the thing that was wrong. The clearance now lives on the BASE rule, so every
      width inherits it and the two overrides below only tune the amount.
   ② ONE CONTENT COLUMN. The hero inner was 1080 wide and `.wdb-main` 1180, with 32px vs 24px
      gutters — so the eyebrow, the h1 and the search bar started at x=212 while the chips and the
      table card started at x=154. Two rails, 58px apart, on a page whose whole argument is that the
      numbers line up. Same max-width AND same horizontal padding is what makes one rail; matching
      only the max-width would have left an 8px offset that reads as a rendering bug.
   The `?v=` stamp moved with this file — a changed byte under an unchanged stamp is a no-op deploy. */
.wdb-hero { background: var(--forest-deep); color: #f2ede4; }
.wdb-hero__inner { max-width: 1180px; margin: 0 auto; padding: 80px 24px 46px; }
.wdb-hero__eyebrow { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9ec4ae; margin-bottom: 18px; }
.wdb-hero__h1 { font: 600 clamp(30px, 4.4vw, 46px)/1.12 var(--disp); letter-spacing: -.01em; color: #fdfaf4; }
.wdb-hero__h1 em { font-style: italic; font-weight: 500; color: #cfe4d5; }
.wdb-hero__sub { max-width: 640px; margin-top: 16px; font-size: 16px; color: #cdc4b4; }
.wdb-hero__ledger { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px;
  font: 500 12.5px var(--mono); color: #b9ceba; }
.wdb-hero__ledger b { color: #fdfaf4; font-weight: 600; }
.wdb-hero__ledger i { width: 4px; height: 4px; border-radius: 50%; background: #55725f; }
.wdb-search { display: flex; align-items: center; gap: 10px; margin-top: 30px; background: #fffcf7; border-radius: var(--r);
  padding: 6px 6px 6px 16px; max-width: 720px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.wdb-search__icon { color: var(--ink-3); flex: none; }
.wdb-search__input { flex: 1; border: 0; outline: 0; background: transparent; font: 500 15px var(--body); color: var(--ink); min-width: 0; }
.wdb-search__input::placeholder { color: #a39a8c; }
.wdb-search__chip { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px var(--mono);
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink); background: rgba(184,134,11,.10);
  border: 1px solid rgba(184,134,11,.35); padding: 4px 9px; border-radius: 100px; }
.wdb-search__btn { flex: none; font: 700 14px var(--body); color: #fff; background: var(--sienna); border: 0;
  border-radius: 8px; padding: 10px 20px; cursor: pointer; }
.wdb-search__btn:hover { background: #8f3413; }
/* ★ U3. The panel is the search bar's own output, so it has to look like it belongs to the bar and
   not like a second element that happens to be nearby: SAME max-width, SAME left edge, and a left
   padding equal to the bar's own content inset (16px), so the panel's first word starts directly
   under the bar's magnifier. `margin-left/right: 0` are stated rather than assumed — an `auto`
   inherited from anywhere would centre the narrower box inside the wider hero column and reopen the
   misalignment silently. Locked by an assertion (±2px on BOTH edges) with a control that proves it
   can fail. */
.wdb-search__demo { max-width: 720px; margin: 10px 0 0; background: rgba(255,252,247,.08); border: 1px solid rgba(255,252,247,.18);
  border-radius: var(--r); padding: 10px 16px; font-size: 13px; color: #d8d0c1; }
.wdb-search__demo-head { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9ec4ae; margin-bottom: 4px; }
.wdb-search__demo-row b { color: #fdfaf4; }

/* toolbar */
.wdb-main { max-width: 1180px; margin: 0 auto; padding: 26px 24px 60px; }
.wdb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.wdb-toolbar__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wdb-chip { font: 600 13px var(--body); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 100px; padding: 7px 14px; cursor: pointer; }
.wdb-chip:hover { border-color: #d5c9b8; }
.wdb-chip.is-active { background: var(--ink); color: #fdfaf4; border-color: var(--ink); }
.wdb-toolbar__meta { font-size: 12.5px; color: var(--ink-3); }
.wdb-toolbar__stamp { font-family: var(--mono); font-size: 11.5px; }

/* table */
.wdb-tablewrap { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.wdb-table { width: 100%; border-collapse: collapse; }
.wdb-table thead th { text-align: left; font: 600 10.5px var(--mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); padding: 13px 14px; border-bottom: 1px solid var(--rule); background: #fbf7f0; white-space: nowrap; }
.wdb-th-scale { display: block; font: 400 9.5px var(--mono); letter-spacing: .04em; text-transform: none; color: #a39a8c; margin-top: 2px; }
.wdb-row { cursor: pointer; }
.wdb-row td { padding: 13px 14px; border-bottom: 1px solid #efe8dc; vertical-align: middle; }
.wdb-row:hover td { background: #fdf9f1; }
.wdb-row--open td { background: var(--forest-tint); border-bottom-color: transparent; }
.wdb-row:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; }
.wdb-td-prog { min-width: 210px; }
.wdb-prog-name { display: block; font: 600 14.5px var(--body); color: var(--ink); }
.wdb-prog-src { display: block; font: 400 10.5px var(--mono); color: var(--ink-3); margin-top: 2px; letter-spacing: .03em; }
.wdb-num { font: 500 13.5px var(--mono); color: var(--ink); }
.wdb-td-med .wdb-num { font-weight: 600; }
.wdb-td-n, .wdb-td-rep { text-align: left; }
.wdb-sec-chip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--forest-deep); background: var(--forest-tint);
  border-radius: 6px; padding: 3px 8px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.wdb-sec-share { font: 500 11px var(--mono); color: var(--ink-3); margin-left: 6px; }
.wdb-td-caret { color: var(--ink-3); width: 30px; }
.wdb-row--open .wdb-td-caret svg { transform: rotate(180deg); }
.wdb-muted { color: var(--ink-3); }
.wdb-table__more { padding: 14px 18px; font-size: 13px; color: var(--ink-2); background: #fbf7f0; border-top: 1px solid var(--rule); }

/* range strip — the signature device */
.wdb-td-strip { min-width: 190px; }
.wdb-strip { position: relative; height: 14px; }
.wdb-strip__track { position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--cream-dark); border-radius: 2px; }
.wdb-strip__box { position: absolute; top: 3px; height: 8px; background: rgba(45,106,79,.28); border-radius: 3px; }
.wdb-strip__med { position: absolute; top: 1px; width: 5px; height: 12px; margin-left: -2px; background: var(--forest-deep); border-radius: 2px; }
.wdb-strip__p90 { position: absolute; top: 3px; width: 2px; height: 8px; background: rgba(26,71,49,.5); }
.wdb-strip__lab { display: flex; justify-content: space-between; font: 400 9.5px var(--mono); color: #a39a8c; margin-top: 3px; }
.wdb-strip__lab-med { color: var(--forest-deep); font-weight: 600; }

/* drawer */
.wdb-drawer-tr > td { padding: 0; border-bottom: 1px solid var(--rule); }
.wdb-drawer { background: linear-gradient(180deg, #fdfaf3, var(--paper)); border-top: 2px solid var(--forest); padding: 26px 28px 22px; }
.wdb-drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.wdb-drawer__eyebrow { font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--forest); }
.wdb-drawer__title { font: 600 24px/1.2 var(--disp); margin-top: 6px; }
.wdb-drawer__scope { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; max-width: 640px; }
.wdb-drawer__pagelink { flex: none; font-weight: 600; font-size: 13.5px; }

.wdb-statband { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
.wdb-stat { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh-sm); }
.wdb-stat__label { display: flex; align-items: center; gap: 5px; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.wdb-stat__num { display: block; font: 600 21px var(--disp); color: var(--ink); margin-top: 6px; }
.wdb-stat__sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.wdb-stat__redact { display: block; height: 14px; background: repeating-linear-gradient(90deg, var(--cream-dark) 0 14px, #ece3d5 14px 22px); border-radius: 4px; width: 70%; }
.wdb-stat--premium { border-color: rgba(184,134,11,.35); background: #fffdf6; }
.wdb-lock { color: var(--gold-ink); flex: none; }

/* winners ledger */
.wdb-winners { margin-top: 22px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.wdb-winners__cols, .wdb-w-main { display: grid; grid-template-columns: 34px minmax(220px, 2.2fr) minmax(130px, 1.2fr) 110px 92px 130px; gap: 12px; align-items: center; }
.wdb-winners__cols { padding: 10px 16px; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  background: #fbf7f0; border-bottom: 1px solid var(--rule); }
.wdb-winners__cols span:first-child { grid-column: 1 / 3; }
.wdb-winners__cols span:last-child { text-align: right; }
.wdb-w-row { border-bottom: 1px solid #f0e9dd; }
.wdb-w-row:last-child { border-bottom: 0; }
.wdb-w-main { padding: 11px 16px; }
.wdb-w-rank { font: 500 11.5px var(--mono); color: var(--ink-3); }
.wdb-w-name { font-weight: 700; font-size: 14px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.wdb-w-loc { display: block; font: 400 11px var(--body); font-weight: 500; color: var(--ink-3); margin-top: 1px; }
.wdb-w-sector { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wdb-w-awards { font: 500 12px var(--mono); color: var(--ink-2); }
.wdb-w-repeat { font: 600 9.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--forest-deep);
  background: var(--forest-tint); border-radius: 4px; padding: 2px 6px; margin-left: 7px; }
.wdb-w-years { font: 400 12px var(--mono); color: var(--ink-3); }
.wdb-w-total { font: 600 13.5px var(--mono); color: var(--ink); text-align: right; }
.wdb-w-detail { padding: 2px 16px 13px 62px; }
.wdb-w-award { display: flex; gap: 14px; align-items: baseline; padding: 4px 0; border-top: 1px dashed #eadfce; }
.wdb-w-award:first-child { border-top: 0; }
.wdb-w-fy { flex: none; font: 500 11px var(--mono); color: var(--forest); }
.wdb-w-amt { flex: none; width: 92px; font: 600 12px var(--mono); color: var(--ink); }
.wdb-w-title { font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.wdb-w-more { padding: 12px 16px; font-size: 12.5px; color: var(--ink-2); background: #fbf7f0; border-top: 1px solid var(--rule); }

/* withheld rows + gate (free) */
.wdb-gatewrap { position: relative; padding-bottom: 8px; }
.wdb-w-skel { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #f0e9dd; }
.wdb-w-skel span { display: block; height: 11px; border-radius: 4px; background: linear-gradient(90deg, #efe7d9, #f5efe4); }
.wdb-w-skel__rank { width: 18px; flex: none; }
.wdb-w-skel__bar { flex: none; }
.wdb-w-skel__amt { width: 74px; flex: none; margin-left: auto; }
.wdb-gate { position: relative; margin: -74px 40px 14px; background: var(--forest-deep); color: #ece5d8; border-radius: var(--r-lg);
  padding: 26px 30px 22px; box-shadow: var(--sh-lg); text-align: center; }
.wdb-gate__count { display: inline-block; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9ec4ae;
  border: 1px solid rgba(158,196,174,.4); border-radius: 100px; padding: 4px 12px; }
.wdb-gate__title { font: 600 22px/1.25 var(--disp); color: #fdfaf4; margin-top: 12px; }
.wdb-gate__body { max-width: 560px; margin: 8px auto 0; font-size: 13.5px; color: #cdc4b4; }
.wdb-gate__actions { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 16px; }
.wdb-gate__cta { display: inline-block; font: 700 15px var(--body); color: #fff; background: var(--sienna); border-radius: 9px; padding: 12px 24px; }
.wdb-gate__cta:hover { background: #8f3413; text-decoration: none; }
.wdb-gate__alt { font-weight: 600; font-size: 13.5px; color: #cfe4d5; }
.wdb-gate__trust { margin-top: 12px; font-size: 11.5px; color: #93a898; }

/* intel cards */
/* align-items:start — a grid row stretches its items to the tallest by default, so a 3-line card
   beside a 9-line one rendered ~120px of empty bordered cream that reads as content failing to
   load. Each card is now as tall as what it holds. */
.wdb-intel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; align-items: start; }
.wdb-intel__card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-sm); }
.wdb-intel__label { display: flex; align-items: center; gap: 6px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.wdb-intel__free-tease { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.wdb-likeyou { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wdb-likeyou__cell { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 1px dashed #eadfce; padding-top: 8px; }
.wdb-likeyou__cell:first-child { border-top: 0; padding-top: 0; }
.wdb-likeyou__who { font-weight: 600; font-size: 13px; }
.wdb-likeyou__nums { font: 400 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.wdb-stack { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.wdb-stack__row { display: flex; gap: 10px; align-items: baseline; }
.wdb-stack__share { flex: none; width: 44px; font: 600 14px var(--mono); color: var(--forest-deep); }
.wdb-stack__txt { font-size: 13px; color: var(--ink-2); }
/* a same-funding-family row is a caveat, not a finding — it keeps the column, not the emphasis */
.wdb-stack__share--family { color: var(--ink-3); font-weight: 400; }
.wdb-stack__row[data-wdb-stack-family] .wdb-stack__txt { color: var(--ink-3); }
.wdb-drawer__foot { margin-top: 16px; font-size: 11px; color: #a39a8c; }

/* status chip on a non-active program row (muted by intent — a caveat, not a feature) */
.wdb-status-chip { display: inline-block; margin-left: 8px; vertical-align: middle;
  font: 600 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--cream-dark); border: 1px solid var(--rule);
  border-radius: 4px; padding: 2px 6px; }
.wdb-toolbar__note { margin: 2px 0 12px; font-size: 12px; color: var(--ink-3); }

/* role label on the free sample (replaces a rank the data no longer supports) */
.wdb-w-role { font: 600 9.5px var(--mono); font-style: normal; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-ink); background: rgba(184,134,11,.10);
  border-radius: 4px; padding: 2px 6px; margin-left: 8px; white-space: nowrap; }

/* in-drawer ledger controls */
.wdb-ledgerbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 11px 16px; background: #fbf7f0; border-bottom: 1px solid var(--rule); }
.wdb-ledgerbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wdb-ledgerbar__label { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-right: 2px; }
.wdb-ledgerbar .wdb-chip { padding: 5px 10px; font-size: 12.5px; }
.wdb-ledgerbar__select { font: 500 12.5px var(--body); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 100px; padding: 5px 10px; max-width: 260px; cursor: pointer; }
.wdb-ledgerbar__select:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.wdb-ledgerbar__count { margin-left: auto; font: 500 11.5px var(--mono); color: var(--ink-3); }
.wdb-w-more .wdb-chip { font-size: 13px; }

/* distribution histogram — pure CSS bars (a replaced element sized by CSS is its own bug class) */
.wdb-histo { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wdb-histo__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.wdb-histo__label { font: 400 10.5px var(--mono); color: var(--ink-3); }
.wdb-histo__track { display: block; height: 10px; background: var(--cream-dark); border-radius: 3px; overflow: hidden; }
.wdb-histo__bar { display: block; height: 100%; background: rgba(45,106,79,.55); border-radius: 3px; }
.wdb-histo__n { font: 500 10.5px var(--mono); color: var(--ink-2); text-align: right; }

/* a one-card intel row must not leave half a grid of dead cream beside it */
.wdb-intel--single { grid-template-columns: 1fr; }

/* the search gate's CTA is the drawer gate's button, not an inline link (contrast) */
.wdb-search__demo-actions { margin-top: 10px; }
.wdb-search__demo .wdb-gate__cta { display: inline-block; }

/* footer */
.wdb-foot { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.wdb-foot p { font-size: 11.5px; color: #a39a8c; max-width: 880px; }
/* P2-2 link mesh. Muted by design: it is wayfinding and a compliance path, not a CTA, and it must
   not out-shout the OGL paragraph it sits above. Every state is repeated so the sitewide
   `a:hover { color: var(--sienna) }` rule cannot recolour it (0,0,2,0 beats the bare 0,0,1,1). */
.wdb-foot__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; padding-top: 18px; border-top: 1px solid #ece4d8; }
.wdb-foot__links a,
.wdb-foot__links a:focus,
.wdb-foot__links a:visited,
.wdb-foot__links a:active { font-size: 12.5px; color: #6f6858; text-decoration: none; }
.wdb-foot__links a:hover { font-size: 12.5px; color: #1a4731; text-decoration: underline; text-underline-offset: 3px; }
.wdb-foot__links a:focus-visible { outline: 2px solid #2d6a4f; outline-offset: 3px; border-radius: 3px; }

/* fetch states */
@keyframes wdb-skelpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.wdb-skelpulse {
  animation: wdb-skelpulse 1.5s ease-in-out infinite;
}

.wdb-drawer--loading .wdb-winners {
  opacity: 0.6;
}

.wdb-drawer--error {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px;
  text-align: center;
}

.wdb-drawer__retry {
  display: inline-block;
  font: 700 15px var(--body);
  color: #fff;
  background: var(--forest);
  border-radius: 9px;
  padding: 12px 24px;
  margin-top: 12px;
  cursor: pointer;
  border: 0;
}

.wdb-drawer__retry:hover {
  background: var(--forest-deep);
}

.wdb-drawer__retry:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.wdb-row:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -2px;
}

.wdb-chip:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.wdb-search__btn:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
}

.wdb-gate__cta:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 2px;
}

/* ★ U6 DESKTOP VERTICAL RHYTHM. The phone got this treatment (the C6 block below) and the desktop
   never did: measured at 1440x900 the first program row — the first DATA on a page whose entire
   claim is data — sat at y=680, so a laptop visitor saw a headline, a paragraph and a paywalled
   search box before a single number. This compresses the SPACE BETWEEN the hero's parts and nothing
   else: every element, every stat, every word and every tap target survives at full size. Applied
   at >=900px only, because the two narrower breakpoints already carry their own rhythm.
   Measured effect at 1440x900: first row 680 -> 637 (-43px) while the nav gap simultaneously went
   2px -> 24px, i.e. 65px of dead vertical removed, 22px of it given back as clearance. */
@media (min-width: 900px) {
  .wdb-hero__inner { padding-bottom: 32px; }
  .wdb-hero__eyebrow { margin-bottom: 12px; }
  .wdb-hero__sub { margin-top: 13px; }
  .wdb-hero__ledger { margin-top: 18px; }
  .wdb-search { margin-top: 20px; }
  .wdb-main { padding-top: 16px; }
  .wdb-toolbar { margin-bottom: 10px; }
  .wdb-toolbar__note { margin-bottom: 10px; }
}

/* ── U7 tooltip affordances ────────────────────────────────────────────────────────────────────
   A tooltip nobody knows is there is not an affordance. Every NON-INTERACTIVE tip host gets the
   cursor and the dotted rule that mean "there is more here"; interactive hosts (rows, links,
   buttons) keep their own cursor, because `help` on something that is actually clickable is a lie.
   ⚠ Scoped by :not() rather than by listing hosts — a producer list is unbounded, and the next tip
   added to this page would otherwise ship with no affordance and nobody would notice. */
[data-tip]:not(a):not(button):not(tr):not(.wdb-row) { cursor: help; }
/* ⚠ ...except inside a program row, which IS clickable: the strip and the status chip carry tips
   AND sit on a control, so `help` there would be a lie about what a click does. The row's own
   pointer wins back. */
.wdb-row [data-tip] { cursor: pointer; }
.wdb-table thead th[data-tip] { text-decoration: underline dotted rgba(111,102,90,.5); text-underline-offset: 3px; }
.wdb-stat[data-tip] .wdb-stat__label,
.wdb-intel__label[data-tip],
.wdb-search__chip[data-tip] { text-decoration: underline dotted currentColor; text-underline-offset: 2px; }
.wdb-stack__share[data-tip], .wdb-hero__ledger[data-tip] { text-decoration: none; }
/* focus-visible on a tip host must show a ring — the tooltip engine opens on focusin, and a ring is
   how a keyboard user knows which host they just opened. */
[data-tip]:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
.wdb-hero [data-tip]:focus-visible, .wdb-search__chip:focus-visible { outline-color: #9ec4ae; }

/* ── U8 drawer wayfinding ─────────────────────────────────────────────────────────────────────
   A drawer that can run to a thousand rows needs a way OUT that is not "scroll back up and find the
   row you clicked". Two controls, both real: a close button in the head, and a return link at the
   ledger's foot. Both are <button>s with handlers wired in the same change that renders them. */
.wdb-drawer__headright { display: flex; align-items: center; gap: 14px; flex: none; }
.wdb-drawer__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
  color: var(--ink-3); background: transparent; border: 1px solid transparent;
}
.wdb-drawer__close:hover { background: var(--cream-dark); color: var(--ink); border-color: var(--rule); }
.wdb-drawer__close:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
/* ★★ AND THE CONTROL LANDS THE READER SOMEWHERE THEY CAN READ. Measured: `scrollIntoView` put the
   drawer head at y=0 with the site nav fixed over it to y=56 — so "Back to top of program" delivered
   a program title hidden behind the navigation. That is the U1 defect exactly, reappearing inside
   the fix for a different one, and no assertion about the button would ever have seen it: it
   scrolled, it moved, it "worked". 80px = the 56px nav + the same 24px of clearance the hero now
   uses, so the two agree instead of each carrying its own number.
   ⚠ scroll-margin-top belongs on the TARGET, not the scroller — putting it on `.wdb-drawer` would
   do nothing, because `block:'start'` aligns the element that was asked to scroll into view. */
.wdb-drawer__head { scroll-margin-top: 80px; }
.wdb-drawer__backtop {
  font: 600 12.5px var(--body); color: var(--forest); background: transparent; border: 0;
  padding: 2px 4px; margin-left: 10px; cursor: pointer; border-radius: 5px;
}
.wdb-drawer__backtop:hover { text-decoration: underline; }
.wdb-drawer__backtop:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ── U9 the active sort chip states its DIRECTION ─────────────────────────────────────────────
   Every sort on this page is descending — there is no ascending mode to toggle into — so the arrow
   is a statement of fact, not a control. It renders on the ACTIVE chip only: an arrow on all three
   would read as three toggles, which is the opposite of what it means. */
.wdb-chip__dir { margin-left: 5px; font-size: 11px; opacity: .8; }

/* ── U10 polish ───────────────────────────────────────────────────────────────────────────────
   1. The program row is the page's primary control and its only hover cue was a background tint —
      the caret (the one "there is more here" symbol) stayed grey and the name stayed flat. */
.wdb-row:hover .wdb-td-caret, .wdb-row:focus-visible .wdb-td-caret { color: var(--forest); }
.wdb-row:hover .wdb-prog-name { text-decoration: underline; text-decoration-color: rgba(45,106,79,.45); text-underline-offset: 3px; }
/* 2. The search field sets `outline: 0` on the input, so tabbing to the page's signature control
      produced NO visible focus anywhere. The ring belongs on the bar, which is what a sighted
      keyboard user perceives as the control. */
.wdb-search:focus-within { outline: 2px solid #9ec4ae; outline-offset: 2px; }
/* 3. Chips changed state with no acknowledgement of the press. */
.wdb-chip:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
  .wdb-chip { transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
  .wdb-drawer__close, .wdb-search__btn, .wdb-gate__cta { transition: background 140ms ease, color 140ms ease; }
  /* 5. The drawer used to appear in one frame with no sense of having come from the row.
     ⚠ Scoped to `--enter`, which only an OPEN adds: `renderDrawer()` rebuilds this element on every
     ledger filter, page and auth change, so an unscoped animation would flash the whole panel each
     time a member ticked a province chip — polish on the open, a strobe on everything else. */
  .wdb-drawer--enter { animation: wdb-drawer-in 160ms ease-out both; }
}
@keyframes wdb-drawer-in { from { opacity: 0; } to { opacity: 1; } }

/* responsive */
@media (max-width: 960px) {
  .wdb-statband { grid-template-columns: repeat(2, 1fr); }
  .wdb-intel { grid-template-columns: 1fr; }
}

/* phone: the program table becomes cards (site convention); the winner ledger compacts */
@media (max-width: 700px) {
  .wdb-nav { padding: 0 16px; gap: 16px; }
  .wdb-nav__links { gap: 14px; }
  .wdb-nav__links a:not(.is-here) { display: none; }
  /* ★ The fixed site nav is 56px tall and the hero's 40px of padding put the eyebrow UNDER it —
     the page opened mid-phrase at "PUBLIC DISCLOSURE", cutting the provenance claim the whole
     page's authority rests on. Desktop cleared it by 2px, so this was invisible to desktop QA.
     ★ U1: 76px cleared the nav by exactly 20px — the assertion's floor, with nothing left over.
     80px gives the same 24px of breathing room the base rule now gives every other width, so the
     three breakpoints agree instead of each having its own idea of "clear". */
  .wdb-hero__inner { padding: 80px 16px 38px; }
  .wdb-hero__ledger { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wdb-hero__ledger i { display: none; }
  /* ★ U2 on a phone too. The hero sat at a 20px gutter and the program cards at 12px — an 8px
     stagger, which reads as a rendering slip rather than as the 16px of extra card width it bought.
     16px is the MEASURED meeting point, not a compromise picked by eye: at 390 the first program
     row lands at y=868, byte-identical to the staggered layout it replaces, and at 320 it lands 3px
     HIGHER (952 -> 949) — one rail for free. (12/16/20 were each measured at both widths; 20 cost
     40px of fold at 320.) No-overflow at 320/390 is asserted, because this is the edit that could
     produce it. */
  .wdb-main { padding: 20px 16px 48px; }
  .wdb-search { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .wdb-search__btn { width: 100%; order: 4; }

  .wdb-table, .wdb-table tbody, .wdb-drawer-tr, .wdb-drawer-tr > td { display: block; width: 100%; }
  .wdb-table thead { display: none; }
  /* ★ The card is a flex row so the range strip and the sector chip can be their own full-width
     lines AFTER the numbers, rather than interrupting them. Phone visitors were losing the page's
     signature distribution visual and the only per-row "is this for a business like mine?" cue. */
  .wdb-row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0;
    padding: 13px 40px 13px 16px; border-bottom: 1px solid #efe8dc; }
  .wdb-row td { display: inline; padding: 0; border: 0; background: none !important; }
  .wdb-row:hover, .wdb-row--open { background: var(--forest-tint); }
  .wdb-td-prog { display: block !important; flex: 0 0 100%; order: 1; margin-bottom: 7px; }
  .wdb-td-med { order: 2; } .wdb-td-n { order: 3; } .wdb-td-rep { order: 4; }
  .wdb-td-strip { display: block !important; flex: 0 0 100%; order: 5; min-width: 0; margin-top: 9px; }
  .wdb-td-sec { display: block !important; flex: 0 0 100%; order: 6; margin-top: 7px; }
  /* 55 of 81 programs have no top sector; on a phone that placeholder em-dash takes a whole line
     to say nothing. Progressive: where :has() is unsupported the row simply keeps the dash. */
  .wdb-td-sec:not(:has(.wdb-sec-chip)) { display: none !important; }
  .wdb-sec-chip { max-width: 100%; }
  .wdb-td-med::before { content: "typical "; font: 500 10.5px var(--mono); color: var(--ink-3); }
  .wdb-td-n::before { content: " · "; color: var(--ink-3); }
  .wdb-td-n::after { content: " awards"; font: 500 10.5px var(--mono); color: var(--ink-3); }
  .wdb-td-rep::before { content: " · "; color: var(--ink-3); }
  .wdb-td-rep::after { content: " repeat"; font: 500 10.5px var(--mono); color: var(--ink-3); }
  .wdb-td-caret { position: absolute; right: 12px; top: 50%; margin-top: -8px; width: auto; }

  .wdb-drawer { padding: 20px 14px 18px; }
  .wdb-drawer__head { flex-direction: column; gap: 8px; }
  .wdb-winners__cols { display: none; }
  .wdb-w-main { display: block; padding: 12px 14px; position: relative; }
  .wdb-w-rank { position: absolute; left: 14px; top: 13px; }
  .wdb-w-name { display: block; padding-left: 24px; padding-right: 4px; }
  .wdb-w-sector { display: none; }
  .wdb-w-awards, .wdb-w-years { display: inline-block; margin: 5px 10px 0 24px; }
  .wdb-w-years { margin-left: 0; }
  .wdb-w-total { display: block; text-align: left; margin: 3px 0 0 24px; font-size: 14.5px; }
  .wdb-w-detail { padding: 2px 14px 12px 38px; }
  .wdb-w-award { flex-wrap: wrap; gap: 8px; }
  .wdb-gate { margin: -74px 6px 12px; padding: 22px 16px 18px; }
  .wdb-gate__actions { flex-direction: column; gap: 10px; }
  /* ★ 21px of tap target on the money moment, next to 31px chips and a 36px search button. */
  .wdb-gate__alt { display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 16px; }
  .wdb-likeyou__cell { flex-direction: column; gap: 2px; }
  .wdb-likeyou__nums { white-space: normal; }
  .wdb-ledgerbar { padding: 10px 12px; }
  .wdb-ledgerbar__count { margin-left: 0; flex: 0 0 100%; }
  .wdb-ledgerbar__select { max-width: 100%; }
  .wdb-histo__row { grid-template-columns: 56px minmax(0, 1fr) 44px; }
}

/* ★ PHONE VERTICAL RHYTHM (C6). Measured at 390x844: the first program row — the first DATA on a
   page whose whole claim is data — sat at y=1000, so a phone visitor scrolled a full viewport and
   a fifth past the fold before seeing a single winner. This block compresses the SPACING between
   the hero's parts (and the type by one step where the block is long-form), never the parts
   themselves: every element, every stat and every word survives. Nothing here touches a tap
   target, and the eyebrow still clears the 56px fixed nav (asserted by the B12 check). */
@media (max-width: 414px) {
  /* ★ U1: was 66px — a 10px gap under a 56px fixed nav, i.e. the eyebrow visually welded to the nav
     rule. The C6 rhythm below buys the 14px back from the SPACING between the hero's parts, so the
     first program row does not move down. */
  .wdb-hero__inner { padding: 80px 16px 18px; }
  .wdb-hero__eyebrow { margin-bottom: 8px; }
  .wdb-hero__h1 { font-size: 28px; }
  .wdb-hero__sub { margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .wdb-hero__ledger { margin-top: 12px; gap: 5px; }
  .wdb-search { margin-top: 14px; }
  .wdb-main { padding-top: 12px; }
  .wdb-toolbar { margin-bottom: 8px; gap: 10px; }
  .wdb-toolbar__note { margin: 2px 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wdb-skelpulse {
    animation: none;
    opacity: 1;
  }
  .wdb-row td {
    transition: none;
  }
  .wdb-td-caret svg {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .wdb-row td { transition: background 160ms ease; }
  .wdb-td-caret svg { transition: transform 200ms ease; }
}