/* ============================================================
   Open Grant — public portal styles  (v3 — "Warm Paper")
   Design system after kuse.ai: a warm paper canvas instead of white,
   white cards floating on it, hairline rules drawn from the brand hue at
   low alpha rather than from cold gray, diffuse low-contrast shadows, and
   one muted mocha-wine accent used sparingly. Poppins for the interface,
   Instrument Serif for display. WCAG-AA contrast, visible focus,
   reduced-motion aware.
   The grant component CSS (faceted search, results, detail, sources) is
   appended below and SCOPED to #panel-grants .grants-uswds; a
   "refinement layer" at the very end elevates those components to match.
   ============================================================ */

:root {
  /* Brand — warm ink (matches the OG monogram); gold is the only hue */
  --brand:        #2a2320;
  --brand-600:    #252019;
  --brand-dark:   #1c1c1a;
  --brand-darker: #141210;
  --brand-deep:   #1c1c1a;
  --brand-soft:   #f4efe7;   /* cream fill behind brand-tinted chips */
  --brand-100:    #faf9f5;
  --brand-line:   #e2ddd4;
  --clay:         #b8863a;   /* Gold accent, used sparingly */

  /* Neutrals — warm, tuned for AA contrast on paper */
  --ink:          #1c1c1a;   /* headings */
  --text:         #2a2724;   /* body */
  --muted:        #68685e;
  --faint:        #9a9a8f;
  --line:         #e8e5de;
  --line-2:       #f1efe9;
  --hairline:     rgba(42,35,32,.10);  /* the default rule — ink at 10% */
  --paper:        #faf9f5;   /* the page itself */
  --canvas:       #f4f3ef;   /* recessed bands, hover fills */
  --surface:      #ffffff;   /* cards */
  --surface-warm: #fdfcf8;

  /* Tokens consumed by the appended grant component CSS */
  --accent:       #2a2320;
  --accent-deep:  #1c1c1a;
  --accent-line:  #e2ddd4;
  --ink-4:        #68685e;
  --ok:           #5a9e72;   /* "open" stays green — it is a status, not the brand */
  --warn:         #a06a28;
  --rule-soft:    rgba(42,35,32,.06);
  --text-muted:   #68685e;

  /* Elevation — diffuse and shallow; depth comes from the paper, not the drop */
  --sh-1: 0 1px 2px rgba(32,32,32,.04);
  --sh-2: 0 1px 3px rgba(32,32,32,.04), 0 4px 12px rgba(32,32,32,.05);
  --sh-3: 0 2px 6px rgba(32,32,32,.05), 0 10px 24px rgba(32,32,32,.06);
  --sh-4: 0 4px 10px rgba(32,32,32,.06), 0 20px 44px rgba(32,32,32,.09);
  /* Visible on paper: a 12% halo read as no focus ring at all. */
  --ring: 0 0 0 2px rgba(42,35,32,.55);

  /* Radii — kuse scale */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-md: 6px;            /* grant components reference this */
  --r-pill: 999px;

  --focus: #3d63b8;       /* visible focus ring (AA) */

  --font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;  /* display headings only */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --page-max: 1020px;
}

/* The grants browser is a filter rail plus a five-column table — it needs the
   full measure, and so does the matches page, which is a profile rail beside
   the same table. Every other page reads better at the narrower 1020px. */
body[data-page="home"], body[data-page="matches"] { --page-max: 1200px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  /* Poppins ships loose; pull it in so paragraphs set as a block, not a row
     of separate letters. */
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--brand); }
h1, h2, h3, h4 { font-weight: 600; }
img, svg { vertical-align: middle; }

/* Accessibility — visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.usa-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--brand-dark);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 var(--r-1) var(--r-1);
  font-weight: 700;
  z-index: 1100;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ============================================================ Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================ Site header
   Transparent and flush with the page; a hairline and a light frost appear
   only once the page has scrolled, so the top of the site is paper, not a
   dark band. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}
.site-header.is-scrolled {
  background: rgba(250,249,245,.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hairline);
}
.site-header__bar {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
}
.site-brand__logo {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 7px;
}
.site-brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.site-brand__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: -0.005em;
}
.site-brand__name em, .site-footer__brand em { font-style: italic; color: var(--clay); }
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 0.1rem;
  flex-wrap: wrap;
}
.site-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.35;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-1);
  transition: background .15s ease, color .15s ease;
}
.site-nav a:hover { background: rgba(42,35,32,.05); color: var(--ink); }
.site-nav a.is-active {
  background: transparent;
  color: var(--brand);
  font-weight: 600;
}

/* ============================================================ Main / layout */
main { flex: 1 0 auto; width: 100%; }
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ============================================================ Landing hero
   No gradient wash, no dot texture, no highlighter underline — the paper is
   the background, and the only ornament is the serif display face. */
.hero {
  position: relative;
  background: transparent;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 4.5rem 1.25rem 2.75rem;
  text-align: center;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 0.9rem;
  color: var(--ink);
}
.hero__title .accent { color: var(--clay); font-style: italic; }   /* ink + gold, as the wordmark */
.hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--muted);
  max-width: 520px;
  margin: 0 auto 2.25rem;
}
.hero__search {
  display: flex;
  align-items: center;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  padding: 5px 6px 5px 18px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.hero__search:focus-within {
  border-color: rgba(42,35,32,.22);
  box-shadow: var(--sh-3), var(--ring);
}
.hero__search-icon { color: var(--faint); flex: 0 0 auto; display: flex; }
.hero__search-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.hero__search input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0.8rem 0.75rem;
  font-size: 0.98rem;
  font-family: inherit;
  color: var(--ink);
}
.hero__search input::placeholder { color: var(--faint); }
.hero__search input:focus { outline: none; }
.hero__search button {
  flex: 0 0 auto;
  border: none;
  background: var(--brand);
  color: #fff;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: background .15s ease, transform .1s ease;
}
.hero__search button:hover { background: var(--brand-dark); }
.hero__search button:active { transform: scale(.97); }
.hero__trust {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--faint);
}
.hero__trust strong { color: var(--muted); font-weight: 500; }

/* ============================================================ Stat tiles
   Four figures separated by hairlines rather than four boxed cards — the
   numbers are the content, the box was packaging. */
.stats {
  max-width: 880px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
  position: relative;
  z-index: 3;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.stat-card {
  background: transparent;
  border: none;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  padding: 1.25rem 1.1rem;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}
.stat-card:first-child { border-left: none; }
.stat-card:hover { transform: none; box-shadow: none; }
.stat-card__icon { display: none; }
.stat-card__body { display: flex; flex-direction: column; }
.stat-card__num {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-card__label {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--faint);
  font-weight: 400;
}

/* ============================================================ Section scaffolding */
.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 3.25rem 1.25rem;
}
.section__title {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  color: var(--brand-deep);
}
.section__lead {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 1.75rem;
  max-width: 720px;
}

/* ---------- Value props (bento) ---------- */
.valueprops {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.valueprop {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 1.6rem;
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.valueprop::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-line));
  opacity: 0; transition: opacity .18s ease;
}
.valueprop:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--brand-line); }
.valueprop:hover::before { opacity: 1; }
.valueprop__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.valueprop__title { font-weight: 800; margin: 0 0 0.4rem; font-size: 1.18rem; color: var(--ink); }
.valueprop__body { color: var(--muted); margin: 0; font-size: 0.97rem; }

/* ---------- Domain chips ---------- */
.domain-band { background: var(--brand-soft); border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--brand-line); }
.domain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.domain-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-dark);
  border-radius: var(--r-pill);
  padding: 0.5rem 1.05rem;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.domain-chip:hover { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.78rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--brand-darker); border-color: var(--brand-darker); box-shadow: var(--sh-3); }
.btn--ghost { background: #fff; color: var(--brand-dark); border-color: var(--brand-line); }
.btn--ghost:hover { background: var(--brand-soft); border-color: var(--brand); }
.cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cta-band {
  background:
    radial-gradient(700px 240px at 80% -20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, var(--brand-dark), var(--brand-darker));
  color: #fff;
  text-align: center;
}
.cta-band__inner { max-width: 760px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.cta-band__title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.cta-band__sub { color: #ded4c9; font-size: 1.08rem; margin: 0 0 1.75rem; }
.cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,0.14); border-color: #fff; }
.cta-band .btn--primary { background: #fff; color: var(--brand-dark); border-color: #fff; }
.cta-band .btn--primary:hover { background: #f4efe7; }

/* ============================================================ About / prose */
.prose {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.25rem 3.5rem;
}
.prose h1 { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--brand-deep); letter-spacing: -0.025em; margin: 0 0 0.6rem; }
.prose h2 {
  font-size: 1.4rem;
  color: var(--brand-deep);
  letter-spacing: -0.015em;
  margin: 2.25rem 0 0.7rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.prose p { color: var(--text); }
.prose ul { color: var(--text); padding-left: 1.2rem; }
.prose li { margin: 0.4rem 0; }
.prose .lead { font-size: 1.25rem; color: var(--muted); line-height: 1.55; }
.callout {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.75rem 0;
  box-shadow: var(--sh-1);
}
.tier-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.25rem 0;
  font-size: 0.96rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.tier-table th, .tier-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tier-table tr:last-child td { border-bottom: none; }
.tier-table th { background: var(--brand-100); color: var(--brand-deep); font-weight: 800; }

/* ============================================================ Page intro (Sources) */
.page-intro {
  background:
    radial-gradient(600px 200px at 90% -30%, rgba(42,35,32,.12), transparent 60%),
    linear-gradient(180deg, var(--brand-100), #fff);
  border-bottom: 1px solid var(--line);
}
.page-intro__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem;
}
.page-intro h1 { margin: 0 0 0.4rem; font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: -0.025em; color: var(--brand-deep); }
.page-intro p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 780px; }

/* ============================================================ Footer */
.site-footer {
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--brand-darker), var(--brand-deep));
  color: #c9beb2;
  margin-top: 3.5rem;
  border-top: 4px solid var(--brand);
}
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.75rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2rem;
}
.site-footer h4 { color: #fff; margin: 0 0 0.7rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; }
.site-footer a { color: #d8cec3; text-decoration: none; display: block; padding: 0.2rem 0; transition: color .12s ease; }
.site-footer a:hover { color: #fff; }
.site-footer__brand { font-weight: 800; color: #fff; font-size: 1.2rem; margin-bottom: .4rem; }
.site-footer__inner > div:first-child p { font-size: .95rem; max-width: 40ch; }
.site-footer__disclaimer {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.site-footer__disclaimer p {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  font-size: 0.8rem;
  color: #a39789;
}

/* ============================================================ Skeleton loaders */
@keyframes shimmer { 100% { background-position: -200% 0; } }
.skeleton {
  color: transparent !important;
  background: linear-gradient(90deg, #efece5 25%, #f8f6f1 37%, #efece5 63%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 6px;
}

/* ============================================================ Responsive */
@media (max-width: 900px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .valueprops { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 1.25rem; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .stats { margin-top: -1rem; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .stat-card { padding: 1rem; flex-direction: column; text-align: center; gap: .5rem; }
  .site-nav { width: 100%; margin-left: 0; justify-content: center; }
  .hero__search { flex-wrap: nowrap; }
  .hero__search button { padding: .7rem 1.1rem; }
}

/* ---------- Unified home layout helpers ---------- */
.hidden { display: none !important; }
/* `font: inherit` here, not font-family, meant the shorthand also reset the
   size and weight `.domain-chip` sets below — so every chip rendered at the
   body's 16px rather than the .85rem it was written for. Buttons only need the
   family inherited; the rest is the chip's own. */
button.domain-chip { font-family: inherit; cursor: pointer; }
.home-finder { background: var(--canvas); border-top: 1px solid var(--line); }
.home-finder__inner { padding-top: 1.75rem; padding-bottom: 3rem; }

/* ============================================================ */
/* Below this line: grant component CSS, scoped to               */
/* #panel-grants .grants-uswds — appended verbatim from workpal. */
/* ============================================================ */
/* ============================================================ Grants */
.grants-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.grants-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.grants-toolbar select {
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 10px;
}
.grants-toolbar select:focus {
  outline: none;
  border-color: var(--ink-4);
}

.grants-resultcount {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.grant-list {
  display: flex;
  flex-direction: column;
}

.grant-row {
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
}
.grant-row:first-child {
  border-top: none;
}

.grant-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.grant-row-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
  text-decoration: none;
}
a.grant-row-title:hover {
  color: var(--accent-deep);
}
span.grant-row-title {
  color: var(--ink);
}
button.grant-row-title {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}
button.grant-row-title:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}
button.grant-row-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grant-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.grant-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.grant-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-warm);
  color: var(--text-muted);
  border: 1px solid var(--line);
}

.grant-elig {
  margin-top: 6px;
  font-size: 0.82rem;
}
.grant-elig summary {
  cursor: pointer;
  color: var(--text-muted);
}
.grant-elig p {
  margin: 6px 0 0;
  color: var(--text);
  line-height: 1.5;
}

.grant-status {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Status colours — never red (red is reserved for "today"). */
.grant-status--open {
  color: var(--ok);
  background: rgba(42,35,32, 0.12);
}
.grant-status--forecasted {
  color: var(--warn);
  background: rgba(160, 106, 40, 0.14);
}
.grant-status--closed {
  color: var(--ink-4);
  background: rgba(104, 104, 94, 0.12);
}

.grant-empty {
  color: var(--text-muted);
  font-style: italic;
}

.grants-disclosure {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 0.84rem;
  color: var(--text-muted);
}
.grants-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.grants-disclosure p {
  margin: 10px 0 0;
  line-height: 1.55;
}

/* ---------- Per-grant detail / overview view ---------- */
.grant-detail {
  padding-top: 8px;
}
.grant-detail-back {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.grant-detail-back:hover {
  color: var(--accent-deep);
}
.grant-detail-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.grant-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 18px;
}
.grant-detail-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.grant-detail-agency {
  flex-basis: 100%;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.grant-keyfacts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  margin: 0 0 22px;
  font-size: 0.88rem;
}
.grant-keyfacts dt {
  font-weight: 700;
  color: var(--text-muted);
}
.grant-keyfacts dd {
  margin: 0;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.grant-detail h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 8px;
}
.grant-detail p {
  line-height: 1.55;
  color: var(--text);
}
.grant-cta {
  display: inline-block;
  margin: 18px 0 4px;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.grant-cta:hover {
  background: var(--accent-deep);
}
.grant-cta--disabled {
  background: var(--surface-warm);
  color: var(--text-muted);
  border: 1px solid var(--line);
  cursor: default;
}
.grant-detail-note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
@media (max-width: 520px) {
  .grant-keyfacts {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .grant-keyfacts dt {
    margin-top: 8px;
  }
}

/* ============================================================
   Grants — two-pane faceted search (grants.gov-style)
   ============================================================ */
/* One content width for the whole page. The browse block used to cap itself at
   1100px inside a 1160px container, which put the page intro, the browse block
   and the "About this data" disclosure on three different left edges. */
.grants-browse {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto 18px;
}
.grants-browse.hidden { display: none; }
.grants-cols {
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 40px;
  align-items: start;
}
/* Sources & Funded pages have no filter sidebar — results span the full width. */
body[data-page="sources"] .grants-cols,
body[data-page="funded"] .grants-cols { grid-template-columns: 1fr; gap: 0; }

/* Sidebar toggle — only visible on narrow screens. */
.grants-sidebar-toggle {
  display: none;
  align-self: flex-start;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 7px 14px;
  cursor: pointer;
}
.grants-sidebar-toggle:hover { border-color: var(--ink-4); }

.grants-sidebar {
  position: sticky;
  top: 16px;
  align-self: start;
}

.facet-search { margin-bottom: 12px; }
.facet-search label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.facet-search-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 10px;
}
.facet-search-input:focus { outline: none; border-color: var(--ink-4); }

.grants-clear-all {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: 5px 10px;
  cursor: pointer;
  margin-bottom: 14px;
}
.grants-clear-all:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.facet-sections { display: flex; flex-direction: column; }
.facet-section { border-top: 1px solid var(--rule-soft); }
.facet-section:first-child { border-top: none; }

.facet-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 11px 2px;
  cursor: pointer;
  text-align: left;
}
.facet-head:hover { color: var(--accent-deep); }
.facet-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-4);
  border-bottom: 2px solid var(--ink-4);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.facet-head[aria-expanded="true"] .facet-chevron { transform: rotate(45deg); }

.facet-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px 10px;
}
.facet-body[hidden] { display: none; }

.facet-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
}
.facet-option input { flex: 0 0 auto; accent-color: var(--ink); }
.facet-option span { color: var(--text-muted); }

/* Results column */
.grants-results { min-width: 0; }
.grants-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.grants-results-head .grants-resultcount { margin-bottom: 0; }
.grants-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.grants-sort select {
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 10px;
}
.grants-sort select:focus { outline: none; border-color: var(--ink-4); }

/* Opportunity number — monospace, muted */
.grant-opp-no {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.76rem;
  color: var(--ink-4);
}

/* Active filter chips */
.grants-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.grants-active-chips:empty { display: none; }
.active-chip {
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
}
.active-chip:hover { border-color: var(--ink-4); }
.active-chip--clear {
  color: var(--accent);
  border-color: var(--accent-line);
}
.active-chip--clear:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Pagination */
.grant-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}
.grant-pager:empty { display: none; }
.pager-showing {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-right: auto;
}
.grant-pager button {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 5px 10px;
  cursor: pointer;
  min-width: 34px;
}
.grant-pager button:hover:not([disabled]) { border-color: var(--ink-4); }
.grant-pager button[disabled] {
  opacity: 0.45;
  cursor: default;
}
/* Current page — red accent is fine here (not a status badge). */
.pager-num[aria-current="page"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.pager-gap {
  font-size: 0.8rem;
  color: var(--ink-4);
  padding: 0 2px;
}
/* Type-a-page jump — sits after Next, matches the pager buttons */
.pager-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.pager-jump-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.pager-jump-input {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  width: 56px;
  padding: 5px 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.pager-jump-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-jump-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }

/* Load error + retry */
.grant-load-error {
  padding: 24px 0;
  color: var(--text-muted);
}
.grant-retry {
  font: inherit;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px 14px;
  cursor: pointer;
  margin-top: 8px;
}
.grant-retry:hover { border-color: var(--ink-4); }

/* Collapse to single column on narrow screens. */
@media (max-width: 760px) {
  .grants-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .grants-sidebar-toggle { display: inline-flex; }
  .grants-sidebar {
    position: static;
    display: none;
  }
  .grants-sidebar.open { display: block; }
}

/* ============================================================
   Grants — USWDS reskin (simpler.grants.gov look). SCOPED to
   .grants-uswds only; never touches other tabs. No --accent here.
   ============================================================ */
.grants-uswds {
  --uswds-primary: #2a2320;
  --uswds-primary-dark: #1c1c1a;
  --uswds-primary-darker: #141210;
  --uswds-primary-vivid: #0050d8;
  --uswds-ink: #1c1c1a;
  --uswds-base: #9a9a8f;
  --uswds-base-light: #b8b4a8;
  --uswds-base-lighter: #e8e5de;
  --uswds-base-lightest: #f4f3ef;
  --uswds-white: #ffffff;
  --uswds-green: #5a9e72;
  --uswds-green-dark: #5A9E72;
  --uswds-amber: #e0a95a;
  --uswds-info: #00bde3;
  --uswds-focus: #3d63b8;
  --uswds-border: #68685e;
}

/* The interface face applied ONLY inside the reskinned panel. */
#panel-grants .grants-uswds,
#panel-grants .grants-uswds * {
  font-family: var(--font-sans);
}

/* ---- 2. Search bar (usa-search big) ---- */
#panel-grants .grants-uswds .facet-search { margin-bottom: 1rem; }
#panel-grants .grants-uswds .facet-search label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 700;
  font-size: .94rem;
  color: var(--uswds-ink);
}
#panel-grants .grants-uswds .facet-search-row {
  display: flex;
  align-items: stretch;
}
#panel-grants .grants-uswds .facet-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3rem;
  border: 1px solid #68685e;
  border-radius: 0;
  padding: 0 .75rem;
  font-size: 1.06rem;
  background: var(--uswds-white);
  color: var(--uswds-ink);
}
#panel-grants .grants-uswds .facet-search-input:focus {
  outline: none;
  border-color: #68685e;
}
#panel-grants .grants-uswds .facet-search-btn {
  flex: 0 0 auto;
  height: 3rem;
  padding: 0 1.25rem;
  margin-left: -1px;
  border: 1px solid #2a2320;
  border-radius: 0;
  background: #2a2320;
  color: var(--uswds-white);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
#panel-grants .grants-uswds .facet-search-btn:hover { background: #1c1c1a; border-color: #1c1c1a; }
#panel-grants .grants-uswds .facet-search-btn:active { background: #141210; border-color: #141210; }

/* Clear-all (sidebar) as a subtle USWDS link-button, no red. */
#panel-grants .grants-uswds .grants-clear-all {
  color: #2a2320;
  border-color: #e8e5de;
}
#panel-grants .grants-uswds .grants-clear-all:hover {
  background: #f4f3ef;
  color: #1c1c1a;
  border-color: #b8b4a8;
}

/* ---- 3. Accordion (usa-accordion--bordered) ---- */
#panel-grants .grants-uswds .facet-sections { display: flex; flex-direction: column; }
#panel-grants .grants-uswds .facet-section {
  border: 1px solid #e8e5de;
  border-bottom: none;
}
#panel-grants .grants-uswds .facet-section:last-child { border-bottom: 1px solid #e8e5de; }
#panel-grants .grants-uswds .facet-section:first-child { border-top: 1px solid #e8e5de; }
#panel-grants .grants-uswds .facet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #f4f3ef;
  color: #1c1c1a;
  font-weight: 700;
  font-size: .98rem;
  padding: .75rem 1rem;
  text-align: left;
  border: none;
  cursor: pointer;
}
#panel-grants .grants-uswds .facet-head:hover { background: #e6e6e6; color: #1c1c1a; }
#panel-grants .grants-uswds .facet-head .facet-chevron {
  border: none;
  transform: none;
  width: auto;
  height: auto;
}
#panel-grants .grants-uswds .facet-head .facet-chevron::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: #1c1c1a;
}
#panel-grants .grants-uswds .facet-head[aria-expanded="true"] .facet-chevron { transform: none; }
#panel-grants .grants-uswds .facet-head[aria-expanded="true"] .facet-chevron::after { content: '\2013'; }
#panel-grants .grants-uswds .facet-body {
  background: var(--uswds-white);
  padding: .75rem 1rem;
  border-top: 1px solid #e8e5de;
}

/* ---- 4. Checkbox (usa-checkbox) ---- */
#panel-grants .grants-uswds .facet-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  font-size: .94rem;
  color: #1c1c1a;
}
#panel-grants .grants-uswds .facet-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 2px solid #68685e;
  border-radius: 2px;
  background: var(--uswds-white);
  position: relative;
  cursor: pointer;
}
#panel-grants .grants-uswds .facet-option input[type="checkbox"]:checked {
  background: #2a2320;
  border-color: #2a2320;
}
#panel-grants .grants-uswds .facet-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#panel-grants .grants-uswds .facet-option span { color: #1c1c1a; }
#panel-grants .grants-uswds .facet-option .facet-count { color: #9a9a8f; }

/* ---- 5. Results header ---- */
#panel-grants .grants-uswds .grants-results-head { align-items: baseline; }
#panel-grants .grants-uswds #grantResultCount,
#panel-grants .grants-uswds .grants-resultcount {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1c1c1a;
}
#panel-grants .grants-uswds .grants-sort { color: #9a9a8f; }
#panel-grants .grants-uswds .grants-sort select,
#panel-grants .grants-uswds #grantSort {
  height: 2.5rem;
  border: 1px solid #68685e;
  border-radius: 0;
  background: var(--uswds-white);
  color: #1c1c1a;
}
#panel-grants .grants-uswds #grantSort:focus { outline: none; border-color: #68685e; }

/* ---- 6. Result row ---- */
#panel-grants .grants-uswds .grant-list { gap: 1rem; }
#panel-grants .grants-uswds .grant-row {
  border: 1px solid #e8e5de;
  border-top: 1px solid #e8e5de;
  border-radius: 4px;
  background: var(--uswds-white);
  padding: 1.4rem 1.5rem;
  margin-bottom: 0;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#panel-grants .grants-uswds .grant-row:first-child { border-top: 1px solid #e8e5de; }
#panel-grants .grants-uswds .grant-row:hover {
  border-color: #2a2320;
  box-shadow: 0 1px 6px rgba(0, 94, 162, .12);
}
#panel-grants .grants-uswds .grant-row-main {
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}
#panel-grants .grants-uswds button.grant-row-title,
#panel-grants .grants-uswds .grant-row-title {
  color: #2a2320;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.3;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  white-space: normal;
}
#panel-grants .grants-uswds button.grant-row-title:hover,
#panel-grants .grants-uswds a.grant-row-title:hover {
  text-decoration: underline;
  color: #1c1c1a;
}
/* Sub-line: agency · opp# · source · link — small, muted, bullet-separated */
#panel-grants .grants-uswds .grant-row-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .9rem;
  color: #68685e;
  margin-bottom: .85rem;
}
#panel-grants .grants-uswds .grant-row-sub .grant-meta-item:not(:last-child)::after {
  content: '\2022';
  color: #b8b4a8;
  margin: 0 .6rem;
}
#panel-grants .grants-uswds .grant-row-sub .grant-row-src { color: #2a2320; text-decoration: none; }
#panel-grants .grants-uswds .grant-row-sub .grant-row-src:hover { text-decoration: underline; }
#panel-grants .grants-uswds .grant-opp-no {
  color: #68685e;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: .85rem;
}
/* Key facts: clean labeled grid (label above value), generous columns */
#panel-grants .grants-uswds .grant-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2.5rem;
  margin: 0 0 .9rem;
}
#panel-grants .grants-uswds .grant-row-facts .grant-fact { min-width: 0; }
#panel-grants .grants-uswds .grant-row-facts dt {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9a9a8f;
  margin-bottom: .15rem;
}
#panel-grants .grants-uswds .grant-row-facts dd {
  margin: 0;
  font-size: .98rem;
  color: #1c1c1a;
  font-weight: 400;
}

/* ---- 7. Status tag (usa-tag), no red ---- */
#panel-grants .grants-uswds .grant-status {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .12rem .5rem;
  border-radius: 2px;
}
#panel-grants .grants-uswds .grant-status--open {
  background: rgba(90, 158, 114, .12);
  color: #5A9E72;
  border: 1px solid rgba(90, 158, 114, .4);
}
#panel-grants .grants-uswds .grant-status--forecasted {
  background: rgba(224, 169, 90, .22);
  color: #8a6500;
  border: 1px solid rgba(224, 169, 90, .5);
}
#panel-grants .grants-uswds .grant-status--closed {
  background: #f4f3ef;
  color: #9a9a8f;
  border: 1px solid #e8e5de;
}

/* ---- 8. Chip ---- */
#panel-grants .grants-uswds .grant-chip {
  background: #f4f3ef;
  color: #1c1c1a;
  border: 1px solid #e8e5de;
  border-radius: 2px;
  font-size: .74rem;
  font-weight: 600;
  padding: .1rem .5rem;
  text-transform: none;
}

/* ---- 9. Pagination (usa-pagination) ---- */
#panel-grants .grants-uswds .grant-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  margin: 1.5rem 0;
}
#panel-grants .grants-uswds .grant-pager button {
  border: none;
  background: none;
  border-radius: 4px;
}
#panel-grants .grants-uswds .pager-num {
  min-width: 2.25rem;
  height: 2.25rem;
  border: none;
  background: none;
  color: #2a2320;
  border-radius: 4px;
}
#panel-grants .grants-uswds .pager-num:hover:not([disabled]) { background: #f4f3ef; border-color: transparent; }
#panel-grants .grants-uswds .pager-num[aria-current="page"] {
  background: #2a2320;
  color: var(--uswds-white);
  font-weight: 700;
}
#panel-grants .grants-uswds .pager-prev,
#panel-grants .grants-uswds .pager-next {
  color: #2a2320;
  font-weight: 600;
}
#panel-grants .grants-uswds .pager-prev:hover:not([disabled]),
#panel-grants .grants-uswds .pager-next:hover:not([disabled]) { background: #f4f3ef; border-color: transparent; }
#panel-grants .grants-uswds .grant-pager button[disabled],
#panel-grants .grants-uswds .pager-prev[disabled],
#panel-grants .grants-uswds .pager-next[disabled] {
  color: #b8b4a8;
}
#panel-grants .grants-uswds .pager-gap,
#panel-grants .grants-uswds .pager-showing { color: #9a9a8f; }

/* ---- 10. Overview / detail ---- */
#panel-grants .grants-uswds .grant-detail-title {
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 700;
  color: #1c1c1a;
}
#panel-grants .grants-uswds .grant-detail h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: #1c1c1a;
}
#panel-grants .grants-uswds .grant-keyfacts dt { font-weight: 700; color: #1c1c1a; }
#panel-grants .grants-uswds .grant-keyfacts dd {
  color: #1c1c1a;
  border-bottom: 1px solid #e8e5de;
  padding-bottom: .5rem;
}
#panel-grants .grants-uswds .grant-detail-agency { color: #9a9a8f; }
#panel-grants .grants-uswds .grant-detail-note { color: #9a9a8f; }
#panel-grants .grants-uswds .grant-detail-back {
  color: #2a2320;
  background: none;
  border: none;
}
#panel-grants .grants-uswds .grant-detail-back:hover { text-decoration: underline; color: #1c1c1a; }
#panel-grants .grants-uswds .grant-cta {
  display: inline-block;
  background: #2a2320;
  color: var(--uswds-white);
  font-weight: 600;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
}
#panel-grants .grants-uswds .grant-cta:hover { background: #1c1c1a; }
#panel-grants .grants-uswds .grant-cta:active { background: #141210; }
#panel-grants .grants-uswds .grant-cta--disabled {
  background: #f4f3ef;
  color: #9a9a8f;
  border: 1px solid #e8e5de;
  cursor: default;
}

/* ---- 11. Sidebar toggle (USWDS outline button) + focus ---- */
#panel-grants .grants-uswds .grants-sidebar-toggle {
  border: 2px solid #2a2320;
  color: #2a2320;
  background: var(--uswds-white);
  border-radius: 4px;
  padding: .5rem 1rem;
  font-weight: 600;
}
#panel-grants .grants-uswds .grants-sidebar-toggle:hover { border-color: #1c1c1a; color: #1c1c1a; }

#panel-grants .grants-uswds input:focus-visible,
#panel-grants .grants-uswds button:focus-visible,
#panel-grants .grants-uswds select:focus-visible,
#panel-grants .grants-uswds a:focus-visible,
#panel-grants .grants-uswds .facet-head:focus-visible,
#panel-grants .grants-uswds .grant-row-title:focus-visible,
#panel-grants .grants-uswds .pager-num:focus-visible {
  outline: .25rem solid #3d63b8;
  outline-offset: 0;
}

/* ===== Grants results TABLE — imitates simpler.grants.gov result table (scoped) ===== */
#panel-grants .grants-uswds .grant-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 1rem;
}
#panel-grants .grants-uswds .grant-table thead th {
  background: #f4f3ef;
  color: #1C1C1A;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  padding: 0;
  border-bottom: 1px solid #cac9c0;
  vertical-align: bottom;
}
#panel-grants .grants-uswds .grant-table thead th.gt-h-agency,
#panel-grants .grants-uswds .grant-table thead th.gt-h-awardmin,
#panel-grants .grants-uswds .grant-table thead th.gt-h-awardmax {
  padding: 16px 16px;
}
#panel-grants .grants-uswds .gt-sort {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: #1C1C1A;
  text-align: left;
  padding: 16px 16px;
  cursor: pointer;
}
#panel-grants .grants-uswds .gt-sort:hover { color: #5F3A3A; text-decoration: underline; }
#panel-grants .grants-uswds .gt-caret::after { content: '\2195'; color: #9a9a8f; font-size: .85em; }
#panel-grants .grants-uswds th.gt-sorted .gt-caret::after { content: '\25B2'; color: #5F3A3A; }
#panel-grants .grants-uswds th.gt-sorted .gt-sort { color: #5F3A3A; }
#panel-grants .grants-uswds .grant-table tbody td {
  padding: 16px 16px;
  border-bottom: 1px solid #d9dad2;
  vertical-align: top;
  color: #1c1c1a;
  line-height: 1.45;
}
#panel-grants .grants-uswds .grant-table tbody tr:hover { background: #f8f9fa; }
#panel-grants .grants-uswds .gt-deadline { white-space: nowrap; color: #1c1c1a; }
/* The title column carries the summary now, so it takes the room the award
   and track columns never used: two lines of a sentence are worth more than
   whitespace beside a dollar figure. */
#panel-grants .grants-uswds td.gt-title { width: 44%; }
#panel-grants .grants-uswds td.gt-agency { width: 22%; }
#panel-grants .grants-uswds td.gt-awardmin,
#panel-grants .grants-uswds td.gt-awardmax { white-space: nowrap; }
/* Title link — Grants.gov green, ~18px */
#panel-grants .grants-uswds .grant-table .grant-row-title {
  color: #5F3A3A;
  font-size: 1.13rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
#panel-grants .grants-uswds .grant-table .grant-row-title:hover { color: #141210; }
#panel-grants .grants-uswds .gt-oppno {
  font-size: .86rem;
  color: #4a4840;
  margin-top: .3rem;
}
#panel-grants .grants-uswds .gt-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
#panel-grants .grants-uswds .gt-agency-name { font-weight: 400; color: #1c1c1a; }
#panel-grants .grants-uswds .gt-sub { font-size: .86rem; color: #68685e; margin-top: .25rem; }
#panel-grants .grants-uswds .gt-src { color: #5F3A3A; text-decoration: none; }
#panel-grants .grants-uswds .gt-src:hover { text-decoration: underline; }
/* Status pills — solid gold (open), light-gold (forecasted), gray (closed); never red */
#panel-grants .grants-uswds .grant-table .grant-status {
  display: inline-block;
  font-size: .92rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: .25rem .75rem;
  border-radius: 2px;
}
#panel-grants .grants-uswds .grant-table .grant-status--open {
  background: #e0a95a; color: #1c1c1a; border: 1px solid #e0a95a;
}
#panel-grants .grants-uswds .grant-table .grant-status--forecasted {
  background: #fee685; color: #1c1c1a; border: 1px solid #e0a95a;
}
#panel-grants .grants-uswds .grant-table .grant-status--closed {
  background: #f4f3ef; color: #68685e; border: 1px solid #cac9c0;
}
#panel-grants .grants-uswds .gt-sort:focus-visible { outline: .25rem solid #3d63b8; outline-offset: -2px; }
/* Responsive: stack the table into labeled cards on narrow screens */
@media (max-width: 760px) {
  #panel-grants .grants-uswds .grant-table thead { display: none; }
  #panel-grants .grants-uswds .grant-table,
  #panel-grants .grants-uswds .grant-table tbody,
  #panel-grants .grants-uswds .grant-table tr,
  #panel-grants .grants-uswds .grant-table td { display: block; width: 100% !important; }
  #panel-grants .grants-uswds .grant-table tr {
    border: 1px solid #e8e5de; border-radius: 4px; margin-bottom: .75rem; padding: .25rem 0;
  }
  #panel-grants .grants-uswds .grant-table tbody td { border-bottom: none; padding: .35rem 1rem; }
  #panel-grants .grants-uswds .grant-table tbody td::before {
    content: attr(data-label); display: block; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: #9a9a8f; margin-bottom: .1rem;
  }
  #panel-grants .grants-uswds .grant-table td.gt-title::before { content: ''; margin: 0; }
}

/* ===== Grants — page design polish (hero, search bar, spacing) — scoped ===== */
#panel-grants .grants-uswds .usa-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#panel-grants .grants-uswds .grants-hero {
  border-bottom: 1px solid #e8e5de;
  padding-bottom: 1.5rem;
}
#panel-grants .grants-uswds .grants-hero-title {
  font-family: var(--font-sans);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1c1c1a;
  margin: 0 0 1.1rem;
}
#panel-grants .grants-uswds .grants-searchbar {
  display: flex;
  align-items: stretch;
  max-width: 680px;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-input {
  flex: 1 1 auto;
  height: 3rem;
  font-size: 1.06rem;
  border: 1px solid #68685e;
  border-right: none;
  border-radius: 0;
  padding: 0 .9rem;
  background: #fff;
  margin: 0;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-input:focus {
  outline: .25rem solid #3d63b8; outline-offset: 0;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-btn {
  flex: 0 0 auto;
  height: 3rem;
  padding: 0 2rem;
  font-size: 1.06rem;
  font-weight: 700;
  color: #fff;
  background: #2a2320;
  border: 1px solid #2a2320;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-btn:hover { background: #1c1c1a; border-color: #1c1c1a; }
/* Sidebar header */
#panel-grants .grants-uswds .grants-sidebar { position: sticky; top: 12px; }
#panel-grants .grants-uswds .grants-sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 2px solid #1c1c1a;
}
#panel-grants .grants-uswds .grants-sidebar-title {
  font-size: 1.18rem; font-weight: 700; color: #1c1c1a;
}
#panel-grants .grants-uswds .grants-clear-all {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #2a2320; font-weight: 600; font-size: .92rem; text-decoration: underline;
}
#panel-grants .grants-uswds .grants-clear-all:hover { color: #1c1c1a; }
/* Results header — bold count + sort, with a divider */
#panel-grants .grants-uswds .grants-results-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: .75rem; margin-bottom: 1rem;
  border-bottom: 1px solid #e8e5de;
}
#panel-grants .grants-uswds #grantResultCount,
#panel-grants .grants-uswds .grants-resultcount {
  font-size: 1.5rem; font-weight: 700; color: #1c1c1a; text-transform: lowercase;
}
#panel-grants .grants-uswds .grants-sort { color: #68685e; font-size: .95rem; white-space: nowrap; }
#panel-grants .grants-uswds .grants-sort select {
  margin-left: .4rem; height: 2.5rem; border: 1px solid #68685e; border-radius: 0;
  background: #fff; padding: 0 2rem 0 .6rem; font-size: .95rem; color: #1c1c1a;
}
/* Narrow screens: Filters toggle inline in the search bar */
#panel-grants .grants-uswds .grants-searchbar .grants-sidebar-toggle { margin-left: .5rem; align-self: center; }
@media (min-width: 761px) {
  #panel-grants .grants-uswds .grants-searchbar .grants-sidebar-toggle { display: none; }
}

/* ===== Grants table — design polish (no domain chips, cleaner rows) ===== */
#panel-grants .grants-uswds .gt-empty { color: #b8b4a8; }
#panel-grants .grants-uswds .grant-table thead th { border-top: 1px solid #cac9c0; }
#panel-grants .grants-uswds .grant-table tbody td { padding: 18px 16px; }
#panel-grants .grants-uswds .grant-table th.gt-h-awardmin,
#panel-grants .grants-uswds .grant-table th.gt-h-awardmax { white-space: nowrap; }
#panel-grants .grants-uswds td.gt-awardmin,
#panel-grants .grants-uswds td.gt-awardmax { width: 96px; }
#panel-grants .grants-uswds .gt-oppno { margin-top: .35rem; margin-bottom: 0; }
/* Flatter status pills (no heavy border) */
#panel-grants .grants-uswds .grant-table .grant-status--closed { border-color: transparent; }
#panel-grants .grants-uswds .grant-table .grant-status--forecasted { border-color: transparent; }
#panel-grants .grants-uswds .grant-table .grant-status { min-width: 4.5rem; text-align: center; }

/* Bold the "Number:" label, not the id value */
#panel-grants .grants-uswds .gt-oppno-label { font-weight: 700; color: #1c1c1a; }

/* ===== Grants — view toggle + "Funding sources by domain" view (scoped) ===== */
#panel-grants .grants-uswds .grants-viewtoggle {
  display: inline-flex; gap: 0; margin-bottom: 1rem;
  border: 1px solid #2a2320; border-radius: 4px; overflow: hidden;
}
#panel-grants .grants-uswds .gv-btn {
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  padding: .5rem 1.1rem; background: #fff; color: #2a2320; border: none;
}
#panel-grants .grants-uswds .gv-btn + .gv-btn { border-left: 1px solid #2a2320; }
#panel-grants .grants-uswds .gv-btn.is-active { background: #2a2320; color: #fff; }
#panel-grants .grants-uswds .gv-btn:focus-visible { outline: .25rem solid #3d63b8; outline-offset: -2px; }
#panel-grants .grants-uswds .src-domain { margin-bottom: 1.6rem; }
#panel-grants .grants-uswds .src-domain-title {
  font-size: 1.15rem; font-weight: 700; color: #1c1c1a;
  padding-bottom: .4rem; margin: 0 0 .6rem; border-bottom: 2px solid #2a2320;
}
#panel-grants .grants-uswds .src-domain-count { font-size: .85rem; font-weight: 400; color: #68685e; margin-left: .4rem; }
#panel-grants .grants-uswds .src-list { list-style: none; margin: 0; padding: 0; }
#panel-grants .grants-uswds .src-item {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid #ececec;
}
#panel-grants .grants-uswds .src-cat {
  flex: 0 0 auto; min-width: 5.5rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: .12rem .5rem;
  border-radius: 2px; text-align: center;
}
#panel-grants .grants-uswds .src-cat--federal { background: #e1f3f8; color: #07648d; }
#panel-grants .grants-uswds .src-cat--nonprofit { background: #ecf3ec; color: #2a2320; }
#panel-grants .grants-uswds .src-cat--aggregator { background: #f4f3ef; color: #68685e; }
#panel-grants .grants-uswds .src-link {
  color: #2a2320; font-size: 1.02rem; font-weight: 600; text-decoration: none;
}
#panel-grants .grants-uswds a.src-link:hover { color: #1c1c1a; text-decoration: underline; }
#panel-grants .grants-uswds .src-ext { font-size: .85em; }

/* ===================================================================
   Grants — aesthetic polish (depth, rhythm, refined components).
   Scoped to #panel-grants / .grants-uswds. Builds on the USWDS look.
   =================================================================== */
/* Cool, clean canvas so white content cards lift off the page */
#panel-grants { background: #f5f7f9; }
#panel-grants .grants-uswds { color: #1c1c1a; }

/* Hero: more presence + a quiet subtitle, softer search field */
#panel-grants .grants-uswds .grants-hero { border-bottom: 1px solid #e8e5de; padding-bottom: 1.75rem; }
#panel-grants .grants-uswds .grants-hero-title {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; color: #2a2320; margin-bottom: 1.25rem;
}
#panel-grants .grants-uswds .grants-searchbar { max-width: 720px; box-shadow: 0 1px 2px rgba(32,32,32,.06); border-radius: 6px; }
#panel-grants .grants-uswds .grants-searchbar .facet-search-input {
  border: 1px solid #d8d4c9; border-right: none; border-radius: 6px 0 0 6px; font-size: 1.05rem; height: 3.1rem;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-input:focus { outline: 3px solid rgba(42,35,32,.35); outline-offset: 0; border-color: #2a2320; }
#panel-grants .grants-uswds .grants-searchbar .facet-search-btn {
  border-radius: 0 6px 6px 0; height: 3.1rem; letter-spacing: .01em;
  transition: background .12s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* View toggle: pill segmented control */
#panel-grants .grants-uswds .grants-viewtoggle { border-radius: 999px; border-color: #c9d3cf; overflow: hidden; box-shadow: 0 1px 2px rgba(32,32,32,.05); }
#panel-grants .grants-uswds .gv-btn { padding: .55rem 1.3rem; transition: background .12s ease, color .12s ease; }
#panel-grants .grants-uswds .gv-btn.is-active { background: #2a2320; }

/* Sidebar: lighter, calmer */
#panel-grants .grants-uswds .grants-sidebar-head { border-bottom-color: #2a2320; }
#panel-grants .grants-uswds .grants-sidebar-title { letter-spacing: -0.01em; }
#panel-grants .grants-uswds .facet-section { border-color: #e8e5de; }
#panel-grants .grants-uswds .facet-head { background: #f4f3ef; font-size: .95rem; letter-spacing: .01em; transition: background .12s ease; }
#panel-grants .grants-uswds .facet-head:hover { background: #e6eaef; }
#panel-grants .grants-uswds .facet-option { padding: .4rem 0; }
#panel-grants .grants-uswds .facet-option input[type="checkbox"] { border-color: #8b97a3; transition: background .1s ease, border-color .1s ease; }

/* Results header */
#panel-grants .grants-uswds .grants-results-head { border-bottom-color: #e8e5de; margin-bottom: 1.25rem; }
#panel-grants .grants-uswds #grantResultCount { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: #2a2320; text-transform: none; }

/* Results table → a clean white card with soft elevation */
#panel-grants .grants-uswds #grantList {
  background: #ffffff; border: 1px solid #e8e5de; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(32,32,32,.06), 0 1px 2px rgba(32,32,32,.04);
}
#panel-grants .grants-uswds .grant-table thead th { background: #f7f9fb; border-bottom: 1px solid #e0e4ea; }
#panel-grants .grants-uswds .grant-table tbody td { border-bottom: 1px solid #f4f3ef; padding: 18px 18px; }
#panel-grants .grants-uswds .grant-table tbody tr:last-child td { border-bottom: none; }
#panel-grants .grants-uswds .grant-table tbody tr { transition: background .1s ease; }
#panel-grants .grants-uswds .grant-table tbody tr:hover { background: rgba(42,35,32,.045); }
#panel-grants .grants-uswds .grant-table .grant-row-title { font-weight: 700; text-decoration: none; transition: color .1s ease; }
#panel-grants .grants-uswds .grant-table .grant-row-title:hover { color: #2a2320; text-decoration: underline; }
#panel-grants .grants-uswds .gt-oppno { color: #68685e; }
#panel-grants .grants-uswds .gt-sub { color: #68685e; }
#panel-grants .grants-uswds .gt-empty { color: #d8d4c9; }

/* Status tags: softer rounded pills */
#panel-grants .grants-uswds .grant-table .grant-status {
  border-radius: 999px; padding: .25rem .7rem; font-size: .76rem; letter-spacing: .03em;
  text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
#panel-grants .grants-uswds .grant-table .grant-status--open { background: #fbe6a2; color: #6b5300; border: none; }
#panel-grants .grants-uswds .grant-table .grant-status--forecasted { background: #d6ecf5; color: #0b5a78; border: none; }
#panel-grants .grants-uswds .grant-table .grant-status--closed { background: #eceff2; color: #68685e; border: none; }

/* Pagination: rounded, with hover */
#panel-grants .grants-uswds .grant-pager { margin-top: 1.5rem; }
#panel-grants .grants-uswds .pager-num { border-radius: 8px; transition: background .1s ease, color .1s ease; }
#panel-grants .grants-uswds .pager-num:hover:not([aria-current]) { background: rgba(42,35,32,.1); }

/* Funding-sources view → also card-framed sections */
#panel-grants .grants-uswds .src-domain { background: #fff; border: 1px solid #e8e5de; border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(32,32,32,.05); }
#panel-grants .grants-uswds .src-domain-title { border-bottom-color: #e8e5de; }
#panel-grants .grants-uswds .src-item { border-bottom-color: #f0f2f5; }

/* Overview/detail: lift the CTA + tidy headings */
#panel-grants .grants-uswds .grant-detail-title { letter-spacing: -0.02em; color: #2a2320; }
#panel-grants .grants-uswds .grant-cta { border-radius: 8px; box-shadow: 0 1px 2px rgba(32,32,32,.12); transition: background .12s ease, transform .05s ease; }
#panel-grants .grants-uswds .grant-cta:hover { background: #2a2320; }
#panel-grants .grants-uswds .grant-cta:active { transform: translateY(1px); }

/* Column rebalance: titles get room, empty award cols stay compact */
#panel-grants .grants-uswds td.gt-title,
#panel-grants .grants-uswds th.gt-h-title { width: 40%; }
#panel-grants .grants-uswds th.gt-h-agency { width: 22%; }
#panel-grants .grants-uswds th.gt-h-awardmin,
#panel-grants .grants-uswds th.gt-h-awardmax,
#panel-grants .grants-uswds td.gt-awardmin,
#panel-grants .grants-uswds td.gt-awardmax { width: 84px; }
#panel-grants .grants-uswds .gt-deadline { white-space: nowrap; }

/* Detail/overview → white card for consistency with the list */
#panel-grants .grants-uswds #grantDetail {
  background: #ffffff; border: 1px solid #e8e5de; border-radius: 12px;
  padding: 1.9rem 2.1rem; max-width: 940px;
  box-shadow: 0 1px 3px rgba(32,32,32,.06), 0 1px 2px rgba(32,32,32,.04);
}
#panel-grants .grants-uswds .grant-keyfacts dt { color: #2a2320; }
#panel-grants .grants-uswds .grant-detail-back { font-weight: 600; }

/* Fixed layout so column widths are honored (titles get real room) */
#panel-grants .grants-uswds .grant-table { table-layout: fixed; }
#panel-grants .grants-uswds th.gt-h-deadline { width: 104px; }
#panel-grants .grants-uswds th.gt-h-status { width: 104px; }
#panel-grants .grants-uswds th.gt-h-title { width: auto; }
#panel-grants .grants-uswds th.gt-h-agency { width: 210px; }
#panel-grants .grants-uswds th.gt-h-awardmin,
#panel-grants .grants-uswds th.gt-h-awardmax { width: 88px; }
#panel-grants .grants-uswds .grant-table .grant-row-title { overflow-wrap: anywhere; }

/* Keep column headers on one line */
#panel-grants .grants-uswds .grant-table thead th { white-space: nowrap; }
#panel-grants .grants-uswds th.gt-h-deadline { width: 118px; }
#panel-grants .grants-uswds .gt-sort { white-space: nowrap; }

/* Funding-sources view: honest per-source auto-update status */
#panel-grants .grants-uswds .src-item { gap: .6rem; flex-wrap: wrap; }
#panel-grants .grants-uswds .src-auto {
  margin-left: auto; flex: 0 0 auto; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; padding: .12rem .55rem; border-radius: 999px;
}
#panel-grants .grants-uswds .src-auto--on { background: #d8f0e4; color: #2a2320; }
#panel-grants .grants-uswds .src-auto--off { background: #f4f3ef; color: #68685e; }
#panel-grants .grants-uswds .src-legend {
  background: #fff; border: 1px solid #e8e5de; border-radius: 12px; padding: .9rem 1.1rem;
  margin-bottom: 1rem; font-size: .86rem; color: #4a5560; line-height: 1.7;
  box-shadow: 0 1px 2px rgba(32,32,32,.05);
}
#panel-grants .grants-uswds .src-legend .src-auto { margin: 0 .15rem; }

/* ============================================================ */
/* REFINEMENT LAYER — elevates the verbatim grant components to   */
/* the "Trusted & Clinical" system. Scoped to #panel-grants       */
/* .grants-uswds and placed last, so it wins on equal specificity.*/
/* ============================================================ */

#panel-grants { background: var(--canvas); }
/* Both classes sit on the same element, so this is `.a.b`, not `.a .b`. */
#panel-grants .grants-uswds.grants-browse { margin: 0 auto; }

/* ---- Sidebar as a card ---- */
#panel-grants .grants-uswds .grants-sidebar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0.75rem 1rem 1rem;
  box-shadow: var(--sh-1);
  top: 69px;
}
#panel-grants .grants-uswds .grants-sidebar-head { padding-top: .25rem; }
#panel-grants .grants-uswds .grants-sidebar-title { font-weight: 800; color: var(--brand-deep); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
#panel-grants .grants-uswds .grants-clear-all { color: var(--brand-dark); font-weight: 700; }
#panel-grants .grants-uswds .facet-head { color: var(--ink); font-weight: 800; border-radius: 6px; }
#panel-grants .grants-uswds .facet-count { color: var(--faint); font-weight: 600; }

/* ---- View toggle: segmented control ---- */
#panel-grants .grants-uswds .grants-viewtoggle {
  display: inline-flex;
  background: #f4f3ef;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: 1.1rem;
}
#panel-grants .grants-uswds .gv-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
#panel-grants .grants-uswds .gv-btn + .gv-btn { border-left: none; }
#panel-grants .grants-uswds .gv-btn:hover { color: var(--brand-dark); }
#panel-grants .grants-uswds .gv-btn.is-active { background: #fff; color: var(--brand-dark); box-shadow: var(--sh-1); }

/* ---- Results head + count ---- */
#panel-grants .grants-uswds #grantResultCount,
#panel-grants .grants-uswds .grants-resultcount { color: var(--brand-deep); font-weight: 800; font-size: 1.05rem; }

/* ---- Active filter chips ---- */
#panel-grants .grants-uswds .active-chip {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-dark);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: .35rem .8rem;
  transition: background .12s ease;
}
#panel-grants .grants-uswds .active-chip:hover { background: #efe7dd; }
#panel-grants .grants-uswds .active-chip--clear { background: transparent; border-style: dashed; }

/* ---- Results table ---- */
#panel-grants .grants-uswds .grant-table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--sh-2);
  border-collapse: separate;
  border-spacing: 0;
}
#panel-grants .grants-uswds .grant-table thead th {
  background: var(--brand-100);
  color: var(--brand-deep);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
  padding: .85rem 1rem;
}
#panel-grants .grants-uswds .grant-table .gt-sort { color: var(--brand-deep); font-weight: 800; }
#panel-grants .grants-uswds .grant-table tbody td { padding: 1rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
#panel-grants .grants-uswds .grant-table tbody tr:last-child td { border-bottom: none; }
#panel-grants .grants-uswds .grant-table tbody tr { transition: background .12s ease; }
#panel-grants .grants-uswds .grant-table tbody tr:hover { background: var(--brand-100); }
#panel-grants .grants-uswds .grant-row-title {
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  background: none; border: none; padding: 0;
}
#panel-grants .grants-uswds .grant-row-title:hover { color: var(--brand); text-decoration: underline; }
#panel-grants .grants-uswds .gt-oppno { color: var(--faint); font-size: .82rem; margin-top: .25rem; }
#panel-grants .grants-uswds .gt-oppno-label { font-weight: 700; color: var(--muted); }
#panel-grants .grants-uswds .gt-sub { color: var(--faint); font-size: .82rem; }
#panel-grants .grants-uswds .gt-src { color: var(--brand-dark); font-weight: 700; }
#panel-grants .grants-uswds .gt-empty { color: var(--faint); }

/* ---- Status badges (pills) ---- */
#panel-grants .grants-uswds .grant-status,
#panel-grants .grants-uswds .grant-table .grant-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 800; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
#panel-grants .grants-uswds .grant-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
#panel-grants .grants-uswds .grant-status--open,
#panel-grants .grants-uswds .grant-table .grant-status--open { background: #f4efe7; color: #2a2320; border-color: #dbe8d6; }
#panel-grants .grants-uswds .grant-status--forecasted,
#panel-grants .grants-uswds .grant-table .grant-status--forecasted { background: #fdf2dd; color: #9a6a00; border-color: #f1dca7; }
#panel-grants .grants-uswds .grant-status--closed,
#panel-grants .grants-uswds .grant-table .grant-status--closed { background: #f4f3ef; color: #68685e; border-color: #dde3e0; }

/* ---- Pager ---- */
#panel-grants .grants-uswds .grant-pager { gap: .35rem; margin-top: 1.5rem; align-items: center; }
#panel-grants .grants-uswds .pager-showing { color: var(--muted); margin-right: auto; font-size: .9rem; }
#panel-grants .grants-uswds .pager-num,
#panel-grants .grants-uswds .pager-prev,
#panel-grants .grants-uswds .pager-next {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  border-radius: 8px;
  padding: .45rem .7rem;
  min-width: 38px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
#panel-grants .grants-uswds .pager-num:hover:not([disabled]),
#panel-grants .grants-uswds .pager-prev:hover:not([disabled]),
#panel-grants .grants-uswds .pager-next:hover:not([disabled]) { background: var(--brand-100); border-color: var(--brand-line); }
#panel-grants .grants-uswds .pager-num[aria-current="page"] { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
#panel-grants .grants-uswds .pager-prev[disabled],
#panel-grants .grants-uswds .pager-next[disabled] { opacity: .45; cursor: default; }

/* ---- Empty / error / loading states ---- */
#panel-grants .grants-uswds .grant-empty,
#panel-grants .grants-uswds .grant-load-error {
  background: #fff; border: 1px dashed var(--brand-line); border-radius: var(--r-2);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); box-shadow: var(--sh-1);
}
#panel-grants .grants-uswds .grant-retry {
  margin-top: .75rem; background: var(--brand-dark); color: #fff; border: none;
  font-weight: 700; padding: .55rem 1.2rem; border-radius: var(--r-pill); cursor: pointer;
}

/* ============================================================ Detail view */
#panel-grants .grant-detail.grants-uswds {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  padding: 1.75rem 2rem 2.25rem;
  max-width: 880px;
  margin: 0 auto;
}
#panel-grants .grants-uswds .grant-detail-back {
  background: var(--brand-100);
  border: 1px solid var(--brand-line);
  color: var(--brand-dark);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: .45rem 1rem;
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: background .12s ease;
}
#panel-grants .grants-uswds .grant-detail-back:hover { background: var(--brand-soft); }
#panel-grants .grants-uswds .grant-detail-head { border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; margin-bottom: 1.4rem; }
#panel-grants .grants-uswds .grant-detail-title { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; color: var(--brand-deep); margin: 0 0 .6rem; line-height: 1.18; }
#panel-grants .grants-uswds .grant-detail-agency { color: var(--muted); font-weight: 600; margin-top: .6rem; }

/* key facts as a bento grid (renderGrantDetail emits .kf-grid > .fact) */
#panel-grants .grants-uswds .kf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin: 0 0 1.6rem;
}
#panel-grants .grants-uswds .fact {
  background: var(--brand-100);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: .8rem .9rem;
}
#panel-grants .grants-uswds .fact--wide { grid-column: 1 / -1; }
#panel-grants .grants-uswds .fact-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 800; margin-bottom: .25rem; }
#panel-grants .grants-uswds .fact-value { color: var(--ink); font-weight: 600; }
#panel-grants .grants-uswds .fact-sub { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 500; color: var(--faint); }
#panel-grants .grants-uswds .grant-chip {
  display: inline-block; background: #fff; border: 1px solid var(--brand-line);
  color: var(--brand-dark); border-radius: var(--r-pill); padding: .2rem .65rem;
  font-size: .82rem; font-weight: 700; margin: .15rem .3rem .15rem 0;
}
#panel-grants .grants-uswds .grant-detail h3 { color: var(--brand-deep); font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
#panel-grants .grants-uswds .grant-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--brand-dark); color: #fff; font-weight: 800; font-size: 1.02rem;
  padding: .85rem 1.6rem; border-radius: var(--r-pill); text-decoration: none;
  margin: 1rem 0 .5rem; box-shadow: var(--sh-2);
  transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
#panel-grants .grants-uswds .grant-cta:hover { background: var(--brand-darker); box-shadow: var(--sh-3); }
#panel-grants .grants-uswds .grant-cta:active { transform: scale(.99); }
#panel-grants .grants-uswds .grant-cta--disabled { background: #f4f3ef; color: var(--faint); box-shadow: none; }
#panel-grants .grants-uswds .grant-detail-note { color: var(--faint); font-size: .88rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }

/* ====================================== "Can I apply?" (applyCheckHtml) ====
   The first block of the detail page. It reads as a checklist, not a bento
   grid, because the reader is scanning down one column for the first line that
   disqualifies them. Each row carries a left rule whose colour encodes the
   answer — green for a stated yes, amber for a stated no, grey for "the source
   didn't say", which must never be mistaken for a yes. */
#panel-grants .grants-uswds .apply-check {
  background: var(--brand-100);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2);
  padding: 1.1rem 1.2rem 1rem;
  margin: 0 0 1.5rem;
}
#panel-grants .grants-uswds .apply-check__title {
  margin: 0 0 .85rem;
  font-size: 1.12rem;
  color: var(--brand-deep);
}
#panel-grants .grants-uswds .apply-check__grid {
  margin: 0;
  display: grid;
  gap: .5rem;
}
#panel-grants .grants-uswds .apply-row {
  display: grid;
  grid-template-columns: 13.5rem 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--r-1);
  padding: .6rem .85rem;
}
#panel-grants .grants-uswds .apply-row--yes { border-left-color: var(--ok); }
#panel-grants .grants-uswds .apply-row--no { border-left-color: var(--warn); }
#panel-grants .grants-uswds .apply-row--plain { border-left-color: var(--brand-line); }
#panel-grants .grants-uswds .apply-row--unknown { background: var(--surface-warm); }
#panel-grants .grants-uswds .apply-row__label {
  margin: 0;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
  color: var(--faint);
}
#panel-grants .grants-uswds .apply-row__value {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
#panel-grants .grants-uswds .apply-row--unknown .apply-row__value {
  color: var(--faint);
  font-weight: 500;
  font-style: italic;
}
/* Why we think so — shown only next to a value we inferred. */
#panel-grants .grants-uswds .apply-basis {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 500;
  font-style: normal;
  color: var(--faint);
}
/* The days-left hint inherits the row's verdict — a closed deadline must not
   read in the same confident green as an open one. */
#panel-grants .grants-uswds .apply-hint { font-weight: 700; color: var(--brand-dark); }
#panel-grants .grants-uswds .apply-row--no .apply-hint { color: var(--warn); }
#panel-grants .grants-uswds .apply-check__note {
  margin: .85rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}
#panel-grants .grants-uswds .apply-verbatim { margin: .6rem 0 0; }
#panel-grants .grants-uswds .apply-verbatim__label {
  display: block;
  margin-bottom: .3rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
  color: var(--faint);
}
/* Sidebar caveat under the two derived eligibility facets. */
#panel-grants .grants-uswds .facet-note {
  margin: .5rem 0 0;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--faint);
}
@media (max-width: 700px) {
  #panel-grants .grants-uswds .apply-row { grid-template-columns: 1fr; }
}

/* ============================================================ Sources view */
#panel-grants .grants-uswds .src-legend {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 1rem 1.2rem; color: var(--muted); font-size: .9rem; box-shadow: var(--sh-1);
  margin-bottom: 1.5rem;
}
#panel-grants .grants-uswds .src-domain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1.1rem; box-shadow: var(--sh-1);
}
#panel-grants .grants-uswds .src-domain-title {
  color: var(--brand-deep); font-weight: 800; font-size: 1.1rem;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin: 0 0 .6rem;
  display: flex; align-items: baseline; gap: .5rem;
}
#panel-grants .grants-uswds .src-domain-count { color: var(--faint); font-size: .82rem; font-weight: 700; }
#panel-grants .grants-uswds .src-list { list-style: none; margin: 0; padding: 0; }
#panel-grants .grants-uswds .src-item {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--line-2);
}
#panel-grants .grants-uswds .src-item:last-child { border-bottom: none; }
#panel-grants .grants-uswds .src-link { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
#panel-grants .grants-uswds .src-link:hover { text-decoration: underline; color: var(--brand); }
#panel-grants .grants-uswds .src-cat {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: .18rem .5rem; border-radius: var(--r-pill); flex: 0 0 auto;
}
#panel-grants .grants-uswds .src-cat--federal { background: #e6f0fb; color: #14507f; }
#panel-grants .grants-uswds .src-cat--nonprofit { background: var(--brand-soft); color: var(--brand-dark); }
#panel-grants .grants-uswds .src-cat--aggregator { background: #f3ecfb; color: #5b3a93; }
#panel-grants .grants-uswds .src-auto {
  font-size: .68rem; font-weight: 700; padding: .16rem .5rem; border-radius: var(--r-pill);
  margin-left: auto; flex: 0 0 auto;
}
#panel-grants .grants-uswds .src-auto--on { background: #f4efe7; color: #2a2320; }
#panel-grants .grants-uswds .src-auto--off { background: #f4f3ef; color: #68685e; }

/* ---- Disclosure ---- */
#panel-grants .grants-uswds + .grants-disclosure,
#panel-grants .grants-disclosure {
  max-width: var(--page-max); margin: 1.75rem auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-1);
  padding: 0 1.1rem;
}
#panel-grants .grants-disclosure summary { color: var(--brand-dark); font-weight: 700; padding: .9rem 0; cursor: pointer; }
#panel-grants .grants-disclosure p { color: var(--muted); font-size: .9rem; padding-bottom: 1rem; margin: 0; }

/* sticky sidebar offset under the sticky header */
@media (max-width: 900px) {
  #panel-grants .grants-uswds .kf-grid { grid-template-columns: 1fr; }
  #panel-grants .grant-detail.grants-uswds { padding: 1.25rem 1.1rem 1.5rem; }
}

/* ============================================================ */
/* OPEN GRANT v2 — usability & polish refresh (placed last).     */
/* Smart default sort, single award column, deadline urgency,    */
/* discoverable sort control, richer detail, skeleton loading.   */
/* ============================================================ */

/* ---- Results head: count + tools row ---- */
#panel-grants .grants-uswds .grants-results-tools {
  display: inline-flex; align-items: center; gap: .6rem; margin-left: auto;
}
#panel-grants .grants-uswds .grants-sort {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--muted);
}
#panel-grants .grants-uswds .grants-sort__label {
  text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--faint);
}
#panel-grants .grants-uswds .grants-sort__select {
  appearance: none; -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2351605a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right .6rem center;
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: .42rem 1.9rem .42rem .7rem; font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--ink); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
#panel-grants .grants-uswds .grants-sort__select:hover { border-color: var(--brand-line); }
#panel-grants .grants-uswds .grants-sort__select:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
#panel-grants .grants-uswds .grants-sort.hidden { display: none; }

/* ---- Table columns (table-layout: fixed) ---- */
#panel-grants .grants-uswds th.gt-h-status { width: 108px; }
#panel-grants .grants-uswds th.gt-h-title  { width: auto; }
#panel-grants .grants-uswds th.gt-h-deadline { width: 168px; white-space: nowrap; }
/* Width, alignment and the figure/qualifier type are set in one place, at the
   end of this file — see "Award cell: a figure over its qualifier". */
#panel-grants .grants-uswds td.gt-deadline { vertical-align: top; }

/* Opportunity cell: title, agency + domain chips, then sub-line */
#panel-grants .grants-uswds .gt-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .3rem;
}
#panel-grants .grants-uswds .gt-agency-name { font-size: .9rem; color: var(--text); font-weight: 600; }
#panel-grants .grants-uswds .gt-domains { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
#panel-grants .grants-uswds .gt-domain {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: var(--brand-soft); color: var(--brand-dark);
  padding: .1rem .5rem; border-radius: var(--r-pill); white-space: nowrap;
}
#panel-grants .grants-uswds .gt-src { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
#panel-grants .grants-uswds .gt-src:hover { text-decoration: underline; }

/* Deadline urgency hint */
#panel-grants .grants-uswds .gt-deadline-hint {
  margin-top: .28rem; font-size: .78rem; font-weight: 700; color: var(--muted);
}
#panel-grants .grants-uswds .gt-deadline-hint--soon { color: #b04a12; }
#panel-grants .grants-uswds .gt-deadline-hint--closed { color: var(--faint); font-weight: 600; }

/* ---- Status pills: Open = confident green, Forecasted = amber, Closed = grey ---- */
#panel-grants .grants-uswds .grant-table .grant-status--open {
  background: #d6efe1; color: #2a2320; box-shadow: inset 0 0 0 1px rgba(42,35,32,.14);
}
#panel-grants .grants-uswds .grant-table .grant-status--forecasted {
  background: #fbeecb; color: #7a5406; box-shadow: inset 0 0 0 1px rgba(122,84,6,.12);
}
#panel-grants .grants-uswds .grant-table .grant-status--closed {
  background: #eceef1; color: #737e88; box-shadow: none;
}

/* ---- Detail: muted applicant-type chips ---- */
#panel-grants .grants-uswds .grant-chip--muted {
  background: #f4f3ef; color: var(--muted); border: 1px solid var(--line); font-weight: 600;
}
#panel-grants .grants-uswds .fact-sub {
  display: block; margin-top: .2rem; font-size: .82rem; font-weight: 600; color: var(--muted);
}

/* ---- Skeleton loading ---- */
#panel-grants .grants-uswds .grant-skel { padding: .5rem 0; }
#panel-grants .grants-uswds .grant-skel-row {
  display: grid; grid-template-columns: 110px 1fr 150px; gap: 1.2rem;
  padding: 18px; border-bottom: 1px solid #f4f3ef; align-items: center;
}
#panel-grants .grants-uswds .grant-skel-row:last-child { border-bottom: none; }
#panel-grants .grants-uswds .grant-skel-line {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #f4f3ef 25%, #e3e8ec 37%, #f4f3ef 63%);
  background-size: 400% 100%; animation: gsShimmer 1.3s ease infinite;
}
#panel-grants .grants-uswds .grant-skel-line--sm { width: 70%; }
#panel-grants .grants-uswds .grant-skel-line--md { width: 55%; }
#panel-grants .grants-uswds .grant-skel-line--lg { width: 90%; height: 16px; }
@keyframes gsShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  #panel-grants .grants-uswds .grant-skel-line { animation: none; }
}


/* ════════════════════════════════════════════════════════════ */
/*  Independent sidebar scroll — the filter rail is its own        */
/*  scroll container so it never drags the results list with it.   */
/* ════════════════════════════════════════════════════════════ */
@media (min-width: 761px) {
  #panel-grants .grants-uswds .grants-sidebar {
    position: sticky;
    top: 77px;
    max-height: calc(100vh - 93px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ddd8cd transparent;
  }
  #panel-grants .grants-uswds .grants-sidebar::-webkit-scrollbar { width: 9px; }
  #panel-grants .grants-uswds .grants-sidebar::-webkit-scrollbar-track { background: transparent; }
  #panel-grants .grants-uswds .grants-sidebar::-webkit-scrollbar-thumb {
    background: #ddd8cd; border-radius: 999px; border: 2px solid #fff; background-clip: padding-box;
  }
  #panel-grants .grants-uswds .grants-sidebar:hover::-webkit-scrollbar-thumb { background: #c9beb2; background-clip: padding-box; }
}

/* ════════════════════════════════════════════════════════════ */
/*  PHASE 1 — Funding intelligence (funded awards + insights)      */
/*  Appended verbatim; adds only NEW rules/tokens. Nothing above   */
/*  this banner is modified.                                       */
/* ════════════════════════════════════════════════════════════ */

:root {
  /* Chart theme tokens consumed by charts.js (light defaults). */
  --chart-ink:     #2A2724;
  --chart-muted:   #9a9a8f;
  --chart-grid:    #e8e5de;
  --chart-surface: #fdfcf8;
}

/* ---- Funded-awards view: rows, amount emphasis ----
   The refinement layer turns every .grant-row into a bordered card. An award
   list is long and uniform, so cards here only add a third left edge — the
   section heading, the row text and the prompt above it each started at a
   different x. These rows are flat instead: hairline-separated, flush with the
   heading that names them. */
/* #grantList is a white elevated card because on the grants page it wraps the
   results table. Here it wraps a whole panel — the prompt card, a section
   heading, a flat list and a note — so the card nested a card inside a card and
   clipped the rows' hover bleed with its overflow:hidden. */
body[data-page="funded"] #panel-grants .grants-uswds #grantList {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#panel-grants .grants-uswds .grant-list.funded-list { gap: 0; }
#panel-grants .grants-uswds .funded-row,
#panel-grants .grants-uswds .funded-row:hover {
  padding: 0;
  background: transparent;
  border: 0;
  /* rule-soft (5% ink) disappeared under the row's own text weight, so the list
     had no visible chunking at all. */
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
}
#panel-grants .grants-uswds .funded-row:first-child { border-top: 0; }
/* A row that cannot expand has no head to carry the inset. */
#panel-grants .grants-uswds .funded-row:not(.funded-row--expandable) { padding: 1rem 0; }

/* ---- The row grid ----
   Four areas: the mechanism code, the text, the money, the caret. The two id-
   scoped selectors are one rule: the plain one styles the similar-awards list
   wherever it is mounted, the scoped one outranks the flex `.grant-row-main`
   that #panel-grants sets for the opportunities table. */
.funded-row .funded-row-grid,
#panel-grants .grants-uswds .funded-row .funded-row-grid {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto auto;
  grid-template-areas: "code body money caret";
  align-items: start;
  column-gap: 1rem;
  margin-bottom: 0;
}
/* The code is the row's left anchor and the list's first scan column: a page
   of awards is mostly R01s, and the eye should be able to find the K99 in it
   without reading a word. */
.funded-row .funded-row-code {
  grid-area: code;
  justify-self: start;
  min-width: 3.1rem;
  margin-top: 0.12rem;
  padding: 0.16rem 0.4rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-1);
}
.funded-row .funded-row-body { grid-area: body; min-width: 0; }
/* A row that does not expand has no caret, so it does not reserve that column
   — otherwise the similar-awards list carries a 1rem gutter to nothing. */
.funded-row:not(.funded-row--expandable) .funded-row-grid,
#panel-grants .grants-uswds .funded-row:not(.funded-row--expandable) .funded-row-grid {
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  grid-template-areas: "code body money";
}

/* The title carries the row; the amount is the one thing allowed to compete
   with it, and it does that in the brand green rather than by matching its
   weight. Both used to be 1.02rem/800/brand-dark, which is why neither won. */
#panel-grants .grants-uswds .funded-row .funded-row-title,
.funded-row .funded-row-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
  cursor: inherit;
}
.funded-row-head:hover .funded-row-title { color: var(--brand-dark); }

/* Three facts, three roles: the institute leads, the PI is the person, the
   institution trails. Separated by a real bullet — 14px of whitespace was not
   enough to stop them reading as one sentence. */
#panel-grants .grants-uswds .funded-row .grant-row-meta,
.funded-row .grant-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45rem;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--faint);
}
.funded-row .grant-row-meta .grant-meta-item:not(:last-child)::after {
  content: '\2022';
  margin-left: 0.45rem;
  color: #d8d4c9;
}
.funded-row .funded-meta-agency { font-weight: 700; color: var(--muted); }
.funded-row .funded-meta-pi { color: var(--muted); }

/* Money and its fiscal year stack into one right-aligned block, so the amounts
   form a column instead of floating at the end of whatever length the title
   happened to be. */
.funded-row .funded-row-end {
  grid-area: money;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.funded-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.funded-amount--empty { color: var(--faint); font-weight: 600; }
.funded-row-fy {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Narrow: the money moves above the title rather than beside it, on one line
   with the code and the caret. Flex, not a two-row grid — the text cell has to
   span the full width there, and a spanning grid item hands its min-content
   width to the `auto` tracks either side of it, which pushed the caret off the
   screen. */
@media (max-width: 640px) {
  .funded-row .funded-row-grid,
  #panel-grants .grants-uswds .funded-row .funded-row-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.5rem;
  }
  .funded-row .funded-row-code { order: 1; margin-top: 0; }
  .funded-row .funded-row-end {
    order: 2;
    margin-left: auto;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
  }
  .funded-row .funded-caret { order: 3; margin-top: 0; }
  .funded-row .funded-row-body { order: 4; flex: 0 0 100%; }
  .funded-amount { font-size: 1.06rem; }
  .funded-row .funded-row-title { overflow-wrap: anywhere; }
}

/* ---- Trend strip ---- */
.funded-trend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  padding: 0.95rem 1.15rem;
  margin: 0 0 0.75rem;
  background: linear-gradient(180deg, var(--brand-100), #fff);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2);
}
.funded-trend-stat { display: flex; flex-direction: column; gap: 2px; }
.funded-trend-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--brand-dark);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.funded-trend-label { font-size: 0.78rem; color: var(--muted); }
.funded-trend-spark { margin-left: auto; display: flex; align-items: center; }

/* ---- Funded sort bar ---- */
.funded-sortbar { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; }
.funded-sortbar-label { font-size: 0.78rem; color: var(--muted); margin-right: 0.2rem; }
.funded-sortbtn {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.funded-sortbtn:hover { border-color: var(--brand-line); color: var(--brand-dark); }
.funded-sortbtn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-dark);
}

/* ---- Funded unavailable state ----
   The sibling ".funded-prompt" card is gone: it invited a search from below the
   results heading while the search box sat at the top of the page, and its copy
   repeated the page intro. Its example chips now live under the input. */
.funded-unavailable {
  padding: 1.5rem 1.6rem;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  color: var(--text);
}
/* Prose caps its own measure. Unbounded, this ran the full content width —
   about 125 characters a line, roughly double a readable line. */
.funded-unavailable p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 72ch;
}

/* ============================================================
   Funded awards — one topic, one page
   The search box asks the question; these three controls qualify it; the
   headline answers it in one number; the tabs are three ways of reading the
   answer. Everything below them describes the same slice.
   ============================================================ */

/* ---- Qualifiers, directly under the search box ---- */
.funded-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin-top: 0.75rem;
}
.funded-control { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.funded-control label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.funded-control input, .funded-control select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  min-width: 0;
}
.funded-control input { width: 9rem; }
.funded-control input:focus-visible, .funded-control select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* ---- The headline: the one exact number, above the tabs ---- */
.funded-headline-slot:empty { display: none; }
/* One count, then one sentence saying which way it is moving. This used to be a
   two-column row — the count on the left, a rank of bare percentages on the
   right — which asked the reader to pair each number with its label and then
   guess what quantity the label described. */
.fh-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  /* The browse column's own 28px gap spaces this; a margin on top of it just
     made the run of blocks space unevenly. */
  margin: 0;
  padding: 1.15rem 1.35rem;
  background: linear-gradient(180deg, var(--brand-soft), var(--surface));
  border: 1px solid var(--brand-line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}
.fh-headline-lead {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.fh-headline-lead strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  margin-right: 0.15rem;
}
.fh-headline-slice { display: inline; font-size: 0.95rem; color: var(--muted); }
/* The direction of the field, in a sentence. */
.fh-headline-answer {
  margin: 0;
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
}
.fh-headline-answer strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Direction is carried by the word as well as the colour, so it survives being
   read aloud, printed, or seen by a reader who cannot separate the two hues. */
.fh-dir--up { color: var(--brand-dark); }
.fh-dir--down { color: #9a6a2a; }
.fh-dir--flat { color: var(--muted); }
.fh-headline-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- Tabs ---- */
.funded-tabs {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
}
.funded-tab {
  flex-shrink: 0;
  padding: 0.6rem 1.05rem;
  margin-bottom: -2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
/* A live count on the tab. The radar's whole value is that there IS something
   there for this topic, so a reader who never opens it should still learn how
   many awards are coming up for renewal. */
.funded-tab-count {
  display: none;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.funded-tab-count.is-on { display: inline-block; }
.funded-expiring-prompt {
  margin: 0;
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.6;
}
.funded-tab:hover { color: var(--brand-dark); }
.funded-tab.is-active { color: var(--brand-deep); border-bottom-color: var(--brand); }
.funded-tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 3px 3px 0 0; }
/* A panel belongs to the tab above it, so it sits closer to the tab bar than
   the browse column's 28px gap between unrelated blocks. */
.funded-panel { padding-top: 0.5rem; }
.funded-panel:focus { outline: none; }

/* A section heading inside a panel — smaller than a card heading, bigger than
   the uppercase micro-labels. */
/* Was 1rem — smaller than the 1.0625rem body text it introduced, so the
   section it named read as weaker than the blurb above it. */
.funded-section-h {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-deep);
  letter-spacing: -0.01em;
}
.funded-bench-block { margin: 0 0 1.4rem; }

/* ---- Exact institution ranking ---- */
/* The name filters the whole page; "Profile" opens that institution's history.
   Two different things a reader wants from a ranking, and the old table only
   offered the second. */
.ls-rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ls-rank-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 8rem) auto auto;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.45rem 0.3rem;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.86rem;
}
.ls-rank-row.is-active { background: var(--brand-soft); }
.ls-rank-name {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ls-rank-name:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.ls-rank-name:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.ls-rank-row.is-active .ls-rank-name { color: var(--brand-deep); font-weight: 700; }
.ls-rank-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--line-2);
  overflow: hidden;
}
.ls-rank-fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.ls-rank-n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ls-rank-share { font-weight: 400; color: var(--muted); }
.ls-rank-profile { font-size: 0.78rem; white-space: nowrap; }

@media (max-width: 640px) {
  .ls-rank-row { grid-template-columns: 1.4rem minmax(0, 1fr) auto; }
  .ls-rank-bar { grid-column: 2 / -1; }
  .ls-rank-profile { grid-column: 2 / -1; justify-self: start; }
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .funded-control input { width: 100%; }
  .funded-control { flex: 1 1 8rem; }
}

/* ---- Zero-input landing snapshot ----
   Live NIH funding shown before anything is typed, so the page can demonstrate
   what it holds instead of describing it. Reuses the topic briefing's card and
   row styles — a reader who searches next sees the same shapes. */
/* A section break, so it has to read wider than the gaps inside either side —
   but only when there IS something above it to break from. Since the example
   chips moved up to the search box, this is usually the panel's first child. */
.funded-landing { margin-top: 2.5rem; }
.funded-landing:first-child { margin-top: 0; }
.funded-landing:empty { margin-top: 0; }
/* The landing card carries only the headline, so the rule that separates the
   headline from the facet blocks below it has nothing to separate. */
.funded-brief--landing .funded-brief-headline {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.funded-landing-h {
  margin: 0 0 0.25rem;
  color: var(--brand-deep);
  font-size: 1.05rem;
}
/* Same measure as every other block of prose on the page. At 62ch under a
   full-width heading it wrapped to a ragged half-width paragraph. */
.funded-landing-sub {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 72ch;
}
.funded-landing-note { max-width: 78ch; }

/* ---- Similar funded awards (grant detail) ---- */
.funded-similar { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.funded-similar-title { margin: 0 0 0.2rem; color: var(--brand-deep); font-size: 1.1rem; }
.funded-similar-sub { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.88rem; }
.funded-similar-note { color: var(--muted); font-style: italic; }
.funded-similar-list .funded-row { padding: 12px 0; }
.funded-similar-more {
  display: inline-block;
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
}
.funded-similar-more:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════ */
/*  Insights dashboard                                             */
/* ════════════════════════════════════════════════════════════ */
.insights-wrap { padding-top: 1.6rem; padding-bottom: 3rem; }
.insights-meta {
  margin: 0 0 1.1rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  /* Cards size to their own content. Stretched to match the tallest in the row,
     a compact chart sat in a card with a hand's width of empty white below it. */
  align-items: start;
}
.insight-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: 1.15rem 1.25rem 1.35rem;
  box-shadow: var(--sh-1);
  min-width: 0;
}
.insight-card--wide { grid-column: 1 / -1; }
.insight-card-head { margin-bottom: 0.6rem; }
.insight-card-head h2,
.insight-card-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--brand-deep);
  letter-spacing: -0.015em;
}
.insight-card-sub { margin: 0.15rem 0 0; font-size: 0.82rem; color: var(--muted); }
/* Charts are capped at their authored width (see charts.js svgOpen), so one
   narrower than its card has leftover room. Centred, that reads as deliberate;
   left-aligned it reads as a chart that failed to load the rest of itself. */
.insight-chart { width: 100%; overflow-x: auto; display: flex; justify-content: center; }
.insight-chart--center { display: flex; justify-content: center; }
.chart-svg { max-width: 100%; height: auto; display: block; }

.insight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.3rem 0 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.insight-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.insight-legend-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.insight-empty {
  margin: 0;
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}
.insight-skel { width: 100%; height: 160px; border-radius: var(--r-2); }

.insight-fundedform {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  max-width: 460px;
}
.insight-fundedform input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  color: var(--text);
}
.insight-fundedform input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.insight-fundedform button {
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--brand-dark);
  border-radius: var(--r-1);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}
.insight-fundedform button:hover { background: var(--brand-dark); }

@media (max-width: 760px) {
  .insights-grid { grid-template-columns: 1fr; }
  .insight-card--wide { grid-column: auto; }
  .funded-trend-spark { margin-left: 0; }
}

/* ---- Theme-aware chart tokens: honor OS dark preference ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --chart-ink:     #e6ede9;
    --chart-muted:   #b8b4a8;
    --chart-grid:    rgba(184, 180, 168, 0.28);
    --chart-surface: rgba(255, 255, 255, 0.04);
  }
}


/* ════════════════════════════════════════════════════════════ */
/*  Funded awards — polish pass (expandable rows, filter chips,   */
/*  benchmark strip, example topics). Appended; adds NEW rules.   */
/* ════════════════════════════════════════════════════════════ */

/* ---- Toolbar: sort + fiscal-year window ---- */
.funded-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  margin: 0 0 0.5rem;
}
.funded-toolbar .funded-sortbar { margin: 0; }
.funded-years {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.funded-years select {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: #fff;
  cursor: pointer;
}
.funded-years select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---- Benchmark strip additions ---- */
.funded-trend-spark { flex-direction: column; gap: 2px; align-items: flex-end; }
.funded-trend-years { font-size: 0.7rem; color: var(--muted); }

/* ---- Filter chips (award type / funder / state) ---- */
.funded-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1.4rem;
  padding: 0.6rem 0.85rem;
  margin: 0 0 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-warm);
}
.funded-filter-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.funded-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-right: 0.15rem;
}
.funded-filterchip {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.funded-filterchip:hover { border-color: var(--brand-line); color: var(--brand-dark); }
.funded-filterchip.is-active {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-dark);
}
.funded-filterchip:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.funded-filterchip-count { font-weight: 500; color: var(--muted); margin-left: 2px; }
.funded-filterchip.is-active .funded-filterchip-count { color: inherit; opacity: 0.75; }
.funded-filterclear {
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 3px 10px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--brand-dark);
  cursor: pointer;
  text-decoration: underline;
  margin-left: auto;
}
.funded-filterclear--inline { margin-left: 0.4rem; }

/* ---- Expandable award rows ----
   The card delegates its inset to the head, so the whole head is the hit
   target and its hover fill reaches the card edge. */
#panel-grants .grants-uswds .funded-row--expandable { padding: 0; }
/* Flush with the section's text, but the hover fill reaches past it on both
   sides so the target reads as a row rather than as the text inside one. */
.funded-row-head {
  position: relative;
  padding: 1.05rem 0.75rem;
  margin: 0 -0.75rem;
  cursor: pointer;
  border-radius: var(--r-1);
  transition: background .12s ease;
}
/* A brand bar in the bleed gutter. The rows are deliberately flat — no cards —
   so hover needed something with an edge to it: a wash alone on a warm page is
   nearly invisible, and it was the only sign a row did anything at all. */
.funded-row-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 999px;
  background: var(--brand);
  opacity: 0;
  transition: opacity .12s ease;
}
.funded-row-head:hover { background: var(--surface-warm); }
.funded-row-head:hover::before,
.funded-row.is-open .funded-row-head::before { opacity: 1; }
.funded-row.is-open .funded-row-head { background: var(--brand-100); }
.funded-row-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
#panel-grants .grants-uswds .funded-row--expandable .funded-row-title { cursor: pointer; }
/* The caret is a control, so it is shaped like one — a disc that fills and
   flips. As a bare glyph beside the amount it read as punctuation. */
.funded-caret {
  grid-area: caret;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 0.1rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform .15s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.funded-row-head:hover .funded-caret {
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-color: var(--brand-line);
}
.funded-row.is-open .funded-caret {
  transform: rotate(180deg);
  color: #fff;
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* ---- Inline award detail ---- */
.funded-detail {
  margin: 0 0 14px;
  padding: 0.85rem 1rem;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.funded-detail-abstract {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
}
.funded-detail-abstract--empty { color: var(--muted); font-style: italic; }
.funded-detail-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
  color: var(--text);
}
.funded-detail-item { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.funded-detail-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.funded-reporter-link {
  display: inline-block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
}
.funded-reporter-link:hover { text-decoration: underline; }

/* ---- Similar-awards title links ---- */
.funded-row-title--link { text-decoration: none; }
.funded-row-title--link:hover { text-decoration: underline; }

/* ---- Example topics in the empty prompt ---- */
.funded-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.funded-examples-label { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-right: 0.15rem; }
.funded-example {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--brand-line);
  background: #fff;
  color: var(--brand-dark);
  cursor: pointer;
}
.funded-example:hover { background: var(--brand-soft); }
.funded-example:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

@media (max-width: 760px) {
  .funded-trend { gap: 0.9rem 1.4rem; }
  .funded-trend-spark { align-items: flex-start; }
  .funded-filterclear { margin-left: 0; }
  .funded-row-head { padding-right: 1.3rem; }
}

/* ---- Funded ease-of-use pass ---- */
/* Soft refresh: keep results visible, dimmed, while a filter/sort/page fetch
   is in flight (no skeleton flash). */
#grantList.is-refreshing { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }

/* Deep-paging note when RePORTER's 9,000-offset cap clamps the pager. */
.pager-note {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* ============================================================ */
/* Personal grant hub — avatar entry (header) + dropdown panel,  */
/* and the Draft / Save action buttons on grant rows & detail.   */
/* Client-side only (localStorage); see public/hub.js.           */
/* ============================================================ */

/* ---- Avatar entry, top-right of the header ---- */
.hub-account { position: relative; flex: 0 0 auto; margin-left: .35rem; }
.hub-avatar {
  position: relative;
  width: 35px; height: 35px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #f4efe7;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hub-avatar:hover,
.hub-avatar[aria-expanded="true"] { background: #fff; color: var(--brand-dark); border-color: #fff; }
.hub-badge {
  position: absolute;
  top: -5px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--brand-dark);
}

/* ---- Dropdown panel ---- */
.hub-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  /* Generously wide so two-line items + actions never feel cramped. */
  width: min(480px, calc(100vw - 24px));
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-4);
  z-index: 1200;
  overflow: hidden;
}
.hub-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.15rem .35rem;
}
.hub-panel-title { font-weight: 800; color: var(--ink); font-size: 1.02rem; letter-spacing: -0.01em; }
.hub-panel-note { font-size: .72rem; color: var(--faint); font-weight: 600; }
.hub-tabs {
  display: flex; gap: 4px;
  margin: .55rem 1.15rem .35rem;
  background: #f4f3ef;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px;
}
.hub-tab {
  flex: 1 1 0;
  border: none; background: transparent;
  color: var(--muted);
  font: inherit; font-weight: 700; font-size: .88rem;
  padding: .42rem .6rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.hub-tab:hover { color: var(--brand-dark); }
.hub-tab.is-active { background: #fff; color: var(--brand-dark); box-shadow: var(--sh-1); }
.hub-tab-count {
  display: inline-block;
  min-width: 1.35em;
  margin-left: .25rem;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .72rem; font-weight: 800;
}
.hub-tab.is-active .hub-tab-count { background: var(--brand-dark); color: #fff; }

/* ---- Panel list ---- */
.hub-list {
  list-style: none;
  margin: .35rem 0 0; padding: 0 .5rem .4rem;
  max-height: min(52vh, 460px);
  overflow-y: auto;
}
.hub-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem .65rem;
  border-radius: var(--r-2);
  transition: background .12s ease;
}
.hub-item:hover { background: var(--brand-100); }
.hub-item + .hub-item { border-top: 1px solid var(--line-2); }
.hub-item-main { flex: 1 1 auto; min-width: 0; }
.hub-item-title {
  display: block;
  font-weight: 700; font-size: .92rem; line-height: 1.35;
  color: var(--brand-dark);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.hub-item-title:hover { text-decoration: underline; }
.hub-item-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem;
  margin-top: .2rem;
  font-size: .78rem; color: var(--muted);
}
.hub-dot { color: var(--faint); }
.hub-item-deadline { font-weight: 700; color: var(--warn); }
.hub-item-deadline.is-closed { color: var(--faint); font-weight: 600; }
/* One chip on one line: a sponsor who writes a whole budget paragraph into the
   award field gets ellipsised here, with the full text on the title. */
.hub-item-award {
  font-weight: 700; color: var(--brand-dark);
  max-width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-item-agency { color: var(--faint); }
.hub-item-apply {
  display: inline-block;
  margin-top: .3rem;
  font-size: .78rem; font-weight: 700;
  color: var(--brand-dark);
}
.hub-item-actions {
  display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
  flex: 0 0 auto;
  padding-top: .1rem;
}
.hub-mini {
  border: 1px solid var(--brand-line);
  background: #fff;
  color: var(--brand-dark);
  font: inherit; font-size: .74rem; font-weight: 700;
  padding: .25rem .55rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.hub-mini:hover { background: var(--brand-soft); }
.hub-mini--x { color: var(--faint); border-color: var(--line); text-align: center; }
.hub-mini--x:hover { background: #fbf1ee; color: #a8534a; border-color: #eedcd6; }
.hub-empty {
  padding: 1.6rem 1.4rem 1.9rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem; line-height: 1.65;
}
.hub-panel-foot {
  display: flex; justify-content: flex-end;
  padding: .5rem 1.15rem .85rem;
  border-top: 1px solid var(--line-2);
}

/* ---- Application progress (In-progress items) ---- */
.hub-progress { display: flex; align-items: center; gap: .55rem; margin-top: .45rem; }
.hub-progress-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.hub-progress-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition: width .25s ease;
}
.hub-progress-select {
  flex: 0 0 auto;
  font: inherit; font-size: .74rem; font-weight: 700;
  color: var(--brand-dark);
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  background: #fff;
  padding: .18rem .3rem;
  cursor: pointer;
}

/* ---- Draft / Save buttons on grant rows & the detail page ---- */
.hub-actions { display: inline-flex; gap: .4rem; }
.hub-btn {
  display: inline-flex; align-items: center; gap: .32rem;
  border: 1px solid var(--brand-line);
  background: #fff;
  color: var(--brand-dark);
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .32rem .68rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.hub-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.hub-btn.is-on { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.hub-btn.is-on:hover { background: var(--brand-600); border-color: var(--brand-600); }
.hub-btn--save.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.hub-btn--save.is-on:hover { background: #efe7dd; }

/* Header labels: sortable columns wrap their label in a <button> (.gt-sort),
   which the UA styles with text-transform:none and which carried its own 16px
   padding on top of the th's — so Status/Opportunity/Deadline rendered
   mixed-case and 16px higher than the plain Award/Track labels. Zero the
   button's box and inherit the th's casing so all five read identically. */
#panel-grants .grants-uswds .gt-sort {
  padding: 0;
  text-transform: inherit;
  letter-spacing: inherit;
}
/* Header labels ~10% larger (were 11.84px effective → ~13.1px). */
#panel-grants .grants-uswds .grant-table thead th { font-size: .82rem; }

/* Results table: the Track column stacks the two buttons (Pursue over Save),
   keeping the column narrow so titles get the space. Award gets a fixed width
   too (set at the end of this file) so the (auto) title column absorbs all
   remaining space — otherwise fixed table layout splits the leftover evenly
   between the two. */
#panel-grants .grants-uswds th.gt-h-actions { width: 126px; }
#panel-grants .grants-uswds td.gt-actions { padding-left: .6rem; padding-right: .6rem; }
#panel-grants .grants-uswds td.gt-actions .hub-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
}
#panel-grants .grants-uswds td.gt-actions .hub-btn {
  font-size: .74rem;
  padding: .3rem .55rem;
  justify-content: center;
}
#panel-grants .grants-uswds td.gt-actions { white-space: nowrap; }
#panel-grants .grants-uswds td.gt-actions .hub-actions { flex-wrap: nowrap; }

/* Detail page: same two buttons, slightly larger, under the title block. */
.hub-detail-actions { margin-top: .8rem; }
.hub-detail-actions .hub-btn { font-size: .86rem; padding: .45rem .95rem; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  /* Stacked-card rows: buttons go back to side by side, full row width. */
  #panel-grants .grants-uswds .grant-table td.gt-actions::before { content: ''; margin: 0; }
  #panel-grants .grants-uswds td.gt-actions { white-space: normal; padding-bottom: .9rem; }
  #panel-grants .grants-uswds td.gt-actions .hub-actions { flex-direction: row; }
  #panel-grants .grants-uswds td.gt-actions .hub-btn { flex: 1 1 0; }
}
@media (max-width: 620px) {
  /* The nav wraps to its own row; pin the avatar to the top-right corner. */
  .site-header__bar { position: relative; }
  .hub-account { position: absolute; top: .85rem; right: 1.1rem; margin-left: 0; }
  .hub-panel {
    position: fixed;
    left: 12px; right: 12px; top: 118px;
    width: auto;
  }
}

/* ============================================================
   Funded-awards topic briefing
   The intelligence layer that opens every search: a plain-language headline
   with dollars + trend, then facet blocks that are BOTH analysis and filters
   (budget-by-mechanism, lead funders, top institutions, geography).
   Supersedes the old .funded-trend strip + .funded-filters chip row.
   ============================================================ */
.funded-brief {
  margin: 0 0 1rem;
  padding: 1.05rem 1.2rem 1.15rem;
  background: linear-gradient(180deg, var(--brand-soft), var(--surface));
  border: 1px solid var(--brand-line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}
.funded-brief-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.4rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--brand-line);
}
.funded-brief-lead {
  margin: 0;
  max-width: 42ch;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.5;
}
.funded-brief-lead strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand-dark);
}
.funded-brief-figures { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.funded-brief-fig {
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}
.funded-brief-fig b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.funded-brief-spark { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.funded-brief-years { font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.funded-brief-trend { font-weight: 700; font-size: 0.72rem; }
.funded-brief-trend--up { color: var(--brand-dark); }
.funded-brief-trend--down { color: #9a6a2a; }
.funded-brief-trend--flat { color: var(--muted); }

/* Facet grid — analysis blocks that double as filters */
.funded-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem 1.4rem;
}
.funded-brief-block { min-width: 0; }
.funded-brief-h {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.funded-brief-note { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

/* Budget-by-mechanism chips — the headline number a grant-writer needs */
.funded-bench-list { display: flex; flex-direction: column; gap: 5px; }
.funded-bench {
  display: grid;
  /* code · median · bar · sample size. The bar takes the slack so the medians
     are comparable at a glance instead of only being readable one at a time. */
  grid-template-columns: 3.2rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.funded-bench:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.funded-bench.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.funded-bench:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.funded-bench-code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--brand-deep);
  letter-spacing: 0.01em;
}
.funded-bench-med {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.funded-bench-med--na { color: var(--muted); font-weight: 600; }
.funded-bench-n { font-size: 0.72rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Label+count facet chips (funders, institutions, geography) */
.funded-facet-list { display: flex; flex-wrap: wrap; gap: 5px; }
.funded-facet {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  max-width: 100%;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.funded-facet:hover { border-color: var(--brand-line); color: var(--brand-dark); background: var(--brand-soft); }
.funded-facet.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.funded-facet:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.funded-facet-label {
  /* Wrap long institution names rather than truncating — "…SAN FRANCISCO" vs
     "…SAN DIEGO" must stay distinguishable. Short labels (NIA, CA) are
     unaffected. */
  overflow-wrap: anywhere;
  max-width: 100%;
  text-transform: capitalize;
}
.funded-facet-n { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.funded-facet.is-active .funded-facet-n { color: inherit; opacity: 0.8; }

/* "More from this institution / award type" pivots inside an expanded award */
.funded-detail-pivots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.2rem; }
.funded-detail-pivot {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.funded-detail-pivot:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.funded-detail-pivot:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

@media (max-width: 640px) {
  .funded-brief { padding: 0.95rem 1rem 1.05rem; }
  .funded-brief-headline { align-items: flex-start; }
  .funded-brief-figures { width: 100%; justify-content: space-between; gap: 0.6rem; }
  .funded-brief-spark { align-items: flex-start; }
  .funded-brief-years { justify-content: flex-start; }
}

/* ============================================================
   Funding intelligence — sample provenance, review/portfolio blocks,
   the recompete radar, and an opportunity's award history.
   ============================================================ */

/* How the briefing's numbers were measured. Sits on its own line under the
   headline (the headline row already wraps). */
.funded-brief-provenance {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Read-only blocks (study sections, program officers). Separated from the
   facet grid above by a rule so nothing here reads as clickable. */
.funded-brief-grid--people {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--brand-line);
}
.funded-insight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.funded-insight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text);
}
.funded-insight-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funded-insight-n { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---- Recompete radar ---- */
.funded-recompete {
  margin: 0 0 1rem;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: var(--r-3);
}
.funded-recompete-lead {
  margin: 0 0 0.75rem;
  max-width: 68ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text);
}
.funded-recompete-lead strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.funded-recompete-list { list-style: none; margin: 0; padding: 0; }
.funded-recompete-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line-2);
}
.funded-recompete-row:first-child { border-top: 0; }
.funded-recompete-main { min-width: 0; }
.funded-recompete-main a { color: var(--brand-dark); font-weight: 600; }
.funded-recompete-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funded-recompete-side { text-align: right; flex-shrink: 0; }
.funded-recompete-when { display: block; font-size: 0.75rem; color: var(--warn); font-weight: 600; }
.funded-recompete-amt { display: block; font-size: 0.82rem; color: var(--text); font-variant-numeric: tabular-nums; }
.funded-recompete-na { color: var(--faint); font-style: italic; }
.funded-recompete-feed { display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; }

/* ---- An opportunity's award history (grant detail) ---- */
.funding-history { border-left: 3px solid var(--brand); padding-left: 1rem; }
.fh-figures { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0.9rem 0 1.1rem; }
.fh-figure { min-width: 0; }
.fh-figure-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.fh-figure-label { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); }
.fh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.6rem;
}
.fh-block { min-width: 0; }
.fh-h {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fh-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.81rem;
  color: var(--text);
}
.fh-list li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh-list li b { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fh-note { margin: 0.35rem 0 0; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
/* The derivation, always visible: these are topically similar awards, not
   awards made under this announcement. */
.fh-basis {
  margin: 1.1rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 620px) {
  .funded-recompete-row { flex-direction: column; gap: 0.25rem; }
  .funded-recompete-side { text-align: left; }
  .fh-figures { gap: 1.1rem; }
}

/* The keywords a funding-history benchmark was actually matched on — the note
   next to them refers to them, so they must be visible. */
.fh-keywords { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-right: 8px; vertical-align: middle; }
.fh-kw {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-warm);
  font-size: 0.72rem;
  color: var(--text);
  white-space: nowrap;
}

/* The example awards inside the funding-history block. They come from the same
   sample as the statistics above, so they sit under the same rule rather than
   reading as a separate module. */
.fh-h--examples {
  margin: 1.3rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-2);
}

/* ---- "How much can this pay?" (grant detail) ----
   Two money figures side by side that must never be read as interchangeable:
   what THIS announcement will pay, and what NIH has paid for similar work. The
   whole visual job of this block is to make the second one look subordinate to
   the first — so the official column gets the brand rule, the solid surface and
   the larger figure, and the historical column is set on the page's own
   background in muted ink. Same grid, deliberately unequal weight. */
.pay-compare {
  margin: 1.2rem 0 1.6rem;
  padding: 1rem 1.1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-warm);
}
.pay-compare[hidden] { display: none; }
.pc-title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand-deep);
}
.pc-cols {
  display: grid;
  /* Two equal columns down to the point where a dollar figure and its
     qualifiers stop fitting side by side, then stacked — official first, which
     is already the DOM order. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  align-items: start;
}
.pc-col {
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-1);
}
.pc-col--official {
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand);
}
.pc-col--history {
  border: 1px dashed var(--line);
}
.pc-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pc-col--official .pc-kicker { color: var(--brand-dark); }
/* The tag carries the entire distinction, so it is a chip rather than a
   parenthetical someone can skim past. */
.pc-tag {
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--faint);
}
.pc-col--official .pc-tag {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.pc-value {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pc-col--history .pc-value { font-size: 1.2rem; color: var(--muted); }
.pc-unit { display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--muted); }
.pc-facts {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}
/* A stated absence is information — it is set as prose rather than as a figure
   so it can never be scanned as a number. */
.pc-none { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); }
.pc-source {
  margin: 0.6rem 0 0;
  font-size: 0.7rem;
  color: var(--faint);
  overflow-wrap: anywhere;
}
/* The rule the whole block exists to enforce. It sits under both columns
   because it governs the relationship between them, not either one. */
.pc-warn {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--warn);
}

/* ============================================================
   NIH landscape — aggregate views over the whole NIH corpus.
   The page's rule: an exact number and a sampled number must never
   look alike, so `.ls-sampled` marks every estimate.
   ============================================================ */

.ls-wrap { padding: 1.6rem 0 3rem; }

.ls-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem 1rem;
  padding: 1rem 1.2rem;
  margin: 0 0 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}
.ls-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ls-field--grow { flex: 1 1 260px; }
.ls-field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ls-field input, .ls-field select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  min-width: 0;
}
.ls-field input:focus-visible, .ls-field select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}
.ls-years { display: flex; align-items: center; gap: 6px; }
.ls-years input { width: 5.2rem; }
.ls-go {
  padding: 0.55rem 1.3rem;
  border: 0;
  border-radius: var(--r-2);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ls-go:hover { background: var(--brand-600); }
.ls-go:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.ls-scope-note {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Headline figures */
.ls-stats { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin: 0 0 1rem; }
.ls-stats--tight { gap: 1rem 1.8rem; }
.ls-stat { min-width: 0; }
.ls-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.ls-stat--lead .ls-stat-value { font-size: 2rem; }
.ls-stat-value--up { color: var(--brand-dark); }
.ls-stat-value--down { color: #9a6a2a; }
.ls-stat-value--flat { color: var(--muted); }
.ls-stat-label { display: block; margin-top: 2px; font-size: 0.75rem; color: var(--muted); }

/* Centred for the same reason as .insight-chart: a chart capped at its authored
   width leaves room in a wider card, and centred that reads as deliberate. */
.ls-chart { margin: 0 0 0.9rem; overflow-x: auto; display: flex; justify-content: center; }

/* Tables */
.ls-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.ls-table th, .ls-table td { padding: 0.4rem 0.5rem; text-align: left; }
.ls-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.ls-table tbody tr { border-bottom: 1px solid var(--line-2); }
.ls-table tbody th { font-weight: 500; color: var(--text); }
.ls-table td { font-variant-numeric: tabular-nums; color: var(--text); }
.ls-table--years { max-width: 22rem; }
.ls-table--rank th[scope="row"] { display: flex; align-items: baseline; gap: 0.5rem; }
.ls-rank {
  flex-shrink: 0;
  width: 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ls-partial { font-size: 0.7rem; color: var(--warn); font-weight: 600; }
.ls-na { color: var(--faint); font-style: italic; }

/* Mechanism bars */
.ls-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ls-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; }
.ls-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.ls-bar-value { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.ls-bar-share { color: var(--muted); font-weight: 400; }
.ls-bar-track { height: 7px; margin-top: 3px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.ls-bar-fill { height: 100%; border-radius: 4px; background: var(--brand); }
.ls-bar-fill--center { background: var(--brand-600); }
.ls-bar-fill--career { background: #a1876a; }
.ls-bar-fill--training { background: #c9beb2; }
.ls-bar-fill--contract { background: var(--clay); }
/* Intramural and unclassified read as "not for you" / "not counted here". */
.ls-bar-fill--intramural, .ls-bar-fill--other { background: var(--faint); }

/* Drill-down links */
.ls-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  color: var(--brand-dark);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ls-link:hover { color: var(--brand-darker); }
.ls-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.ls-note { margin: 0.7rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--muted); }
.ls-footnote {
  margin: 1.6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The marker that keeps an estimate from reading as a measurement. */
.ls-sampled {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px solid var(--clay);
  border-radius: 999px;
  background: rgba(184, 134, 58, 0.1);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6414;
  vertical-align: middle;
  cursor: help;
}

/* Investigator lookup */
.ls-pi-form { display: flex; gap: 0.6rem; margin: 0 0 0.9rem; flex-wrap: wrap; }
.ls-pi-form input {
  flex: 1 1 240px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font: inherit;
  font-size: 0.9rem;
  min-width: 0;
}
.ls-pi-form button {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-2);
  background: var(--brand-soft);
  font: inherit;
  font-weight: 600;
  color: var(--brand-dark);
  cursor: pointer;
}
.ls-people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ls-people-list li { padding-bottom: 0.5rem; border-bottom: 1px solid var(--line-2); }
.ls-people-meta { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--muted); }

/* Profile panel */
.ls-profile {
  margin: 1.4rem 0 0;
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
}
.ls-profile-title { margin: 0.6rem 0 0.2rem; font-size: 1.35rem; color: var(--ink); }
.ls-profile-sub { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.9rem; }
.ls-profile-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.4rem 2rem; }

@media (max-width: 700px) {
  .ls-controls { flex-direction: column; align-items: stretch; }
  .ls-field--years .ls-years input { flex: 1; width: auto; }
  .ls-stats { gap: 1rem 1.4rem; }
  .ls-stat--lead .ls-stat-value { font-size: 1.6rem; }
}

/* ---- Live data status panel (data-status.js) ----
   Provenance the reader can check. It is deliberately quiet — a status panel
   that shouts is a status panel people learn to ignore — but the badge is the
   one thing allowed to be loud, because "you are looking at a snapshot from
   last month" has to survive being skimmed. */
.dstat {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.dstat-block { min-width: 0; }
.dstat-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}
.dstat-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
}
.dstat-badge {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.dstat-badge--ok   { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-line); }
.dstat-badge--warn { background: #f8f1e4; color: #7d5f28; border-color: #e5d6ba; }
.dstat-badge--idle { background: #f4f3ef; color: var(--muted); border-color: var(--line); }
.dstat-line {
  margin: 0 0 0.2rem;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text);
}
.dstat-facts {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
/* The label is a column, not a prefix: two facts under a heading are read by
   running down the labels first. */
.dstat-facts li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.5rem; }
.dstat-fact-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.12rem;
}
.dstat-convs { margin: 0.5rem 0 0; }
.dstat-conv {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.5rem 0.9rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line-2);
}
.dstat-conv:first-child { border-top: 0; }
.dstat-conv dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.dstat-conv dd { margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--text); }
.dstat-foot {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-2);
  font-size: 0.78rem;
  color: var(--faint);
}
.dstat-foot a { color: var(--brand-dark); }
.dstat-down {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.87rem;
  color: #7d5f28;
  background: #f8f1e4;
  border: 1px solid #e5d6ba;
  border-radius: var(--r-2);
}

@media (max-width: 640px) {
  .dstat-facts li,
  .dstat-conv { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* ════════════════════════════════════════════════════════════ */
/*  Award cell: a figure over its qualifier                       */
/*  ------------------------------------------------------------  */
/*  The column was 108px wide with 1rem of padding either side —   */
/*  a 76px content box. A figure fits that; the budget paragraph   */
/*  some sponsors write into `awardAmount` does not, and it set    */
/*  one word per line down the whole cell. Three changes: the     */
/*  string is split into a figure and a qualifier (award-text.js), */
/*  the column gets room for the longest real figure ("Up to      */
/*  $100,000 per year"), and the qualifier is clamped so no single */
/*  record can set the height of every row.                       */
/* ════════════════════════════════════════════════════════════ */
#panel-grants .grants-uswds th.gt-h-award { width: 172px; text-align: left; }
#panel-grants .grants-uswds td.gt-award {
  text-align: left;
  padding-left: .8rem; padding-right: .8rem;
  white-space: normal;
  /* Break between words only. Whatever the column width, a dollar figure is
     never split down the middle. */
  overflow-wrap: normal; word-break: normal;
}
#panel-grants .grants-uswds .gt-award-fig {
  display: block;
  font-size: .95rem; font-weight: 800; line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
}
#panel-grants .grants-uswds .gt-award-terms {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: .3rem;
  font-size: .78rem; font-weight: 500; line-height: 1.4;
  color: var(--faint);
}
/* No figure could be lifted out of the sponsor's text honestly, so the text
   itself is the answer to "how much?" — one step darker, one line longer. */
#panel-grants .grants-uswds .gt-award-terms--only {
  -webkit-line-clamp: 4;
  margin-top: 0;
  font-size: .84rem; font-weight: 600;
  color: var(--muted);
}

/* Stacked-card rows: the cell is full-width, so nothing needs clamping. */
@media (max-width: 760px) {
  #panel-grants .grants-uswds .gt-award-fig { display: inline; }
  #panel-grants .grants-uswds .gt-award-terms,
  #panel-grants .grants-uswds .gt-award-terms--only {
    display: block; -webkit-line-clamp: none; overflow: visible;
    margin-top: .15rem;
  }
}

/* ════════════════════════════════════════════════════════════ */
/*  Eligibility band: where the stated matches end                */
/*  ------------------------------------------------------------  */
/*  A career-stage or applicant filter no longer drops the grants  */
/*  whose announcement says nothing — it ranks them after the      */
/*  stated matches, behind this band. It is a full-width row of    */
/*  the table so the columns run straight through the list, and it */
/*  is warm rather than red: what follows is an opportunity the    */
/*  sponsor never ruled out, not an error.                        */
/* ════════════════════════════════════════════════════════════ */
#panel-grants .grants-uswds .grant-table td.gt-band {
  padding: .85rem 1rem;
  background: var(--clay-soft);
  border-top: 1px solid var(--clay-line);
  border-bottom: 1px solid var(--clay-line);
}
/* The flex row is an inner div — `display: flex` on the <td> itself would take
   the cell out of the table model and void its colspan, collapsing the band
   into the width of the Status column. */
#panel-grants .grants-uswds .gt-band-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
}
#panel-grants .grants-uswds .gt-band-main { flex: 1 1 22rem; min-width: 0; }
#panel-grants .grants-uswds .gt-band-count {
  display: block;
  font-size: .88rem; font-weight: 800; color: #6d5320;
}
#panel-grants .grants-uswds .gt-band-note {
  display: block; margin-top: .15rem;
  font-size: .8rem; line-height: 1.45; color: #7d5f28;
}
.gt-band-btn {
  flex: 0 0 auto;
  border: 1px solid var(--brand-line); background: #fff;
  color: var(--brand-dark);
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.gt-band-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.gt-band-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* The same fact from the other side: the group is hidden, and here it is. */
.gt-hidden-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: .9rem; padding: .8rem 1rem;
  background: var(--clay-soft);
  border: 1px solid var(--clay-line);
  border-radius: var(--r-2);
  font-size: .84rem; line-height: 1.5; color: #7d5f28;
}
.gt-hidden-note > span { flex: 1 1 22rem; min-width: 0; }

/* Stacked-card rows: the band is a card-width strip between two cards. */
@media (max-width: 760px) {
  #panel-grants .grants-uswds .grant-table tr.gt-band-row { display: block; }
  #panel-grants .grants-uswds .grant-table td.gt-band::before { content: ''; margin: 0; }
  #panel-grants .grants-uswds .grant-table td.gt-band { border-radius: var(--r-2); }
}

/* ============================================================
   Personal hub — matching
   ============================================================ */

/* The panel's way into the matching page. It sits above the two list tabs
   because it is the only thing in this panel that finds new grants; the tabs
   only hold grants the reader already found. */
.hub-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 .6rem;
  margin: 0 .9rem .55rem;
  padding: .6rem .8rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-1);
  background: linear-gradient(180deg, var(--brand-100), var(--surface-warm));
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.hub-cta:hover { border-color: var(--brand); background: var(--brand-soft); }
.hub-cta:focus-visible { outline: none; box-shadow: var(--ring); }
.hub-cta-main { grid-area: 1 / 1; font-size: .88rem; font-weight: 800; color: var(--brand-dark); }
.hub-cta-sub {
  grid-area: 2 / 1;
  font-size: .74rem; line-height: 1.4; color: var(--muted);
}
.hub-cta-go { grid-area: 1 / 2 / span 2 / auto; align-self: center; font-size: 1.05rem; font-weight: 800; color: var(--brand); }
.hub-cta--setup { border-color: var(--clay-line); background: var(--clay-soft); }
.hub-cta--setup:hover { border-color: var(--clay); background: #f2e8d6; }
.hub-cta--setup .hub-cta-main { color: #7d5f28; }
.hub-cta--setup .hub-cta-sub { color: #97764a; }
.hub-cta--setup .hub-cta-go { color: var(--clay); }

/* ---- Page layout: profile rail beside the ranked results ---- */
.matches-wrap {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: start;
  gap: 1.6rem;
  padding-top: 2rem;
}
@media (max-width: 900px) {
  .matches-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* On one column the profile editor is a screen and a half of form, and the
   ranked list — the whole point of the page — begins below it.
   Flipping the two with `order` was the first fix and the wrong one: it leaves
   the document order untouched, so the tab key and a screen reader would still
   walk the entire form while the eye is on the list. A link out of the top of
   the form costs one line, moves focus with it (hence tabindex="-1" on the
   list), and is the same answer the skip-link at the top of every page gives.
   Declared here, before the media query that reveals it — the first attempt put
   the reveal in the 900px block ABOVE this rule, where `display:none` simply
   won on source order and the link never appeared at any width. */
.matches-jump {
  display: none;
  justify-self: start;
  margin-bottom: -.4rem;
  font-size: .8rem; font-weight: 500; color: var(--brand-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-line);
  padding-bottom: .1rem;
}
.matches-jump:hover { border-bottom-color: var(--brand); }
.matches-jump:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }
.match-results:focus { outline: none; }
@media (max-width: 900px) { .matches-jump { display: block; } }

/* ---- Profile editor ----
   Quieted deliberately once the ranked list stopped being a deck of cards.
   As a white card with a shadow, holding sixteen bordered field pills, this
   column was the loudest thing on a page whose subject is the list beside
   it — the input for the answer outshouting the answer. It keeps its own
   surface, at a hairline and no shadow, and everything inside it steps back
   a weight. */
.match-profile {
  position: sticky; top: 1rem;
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--surface-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 1.25rem 1.2rem 1.1rem;
}
@media (max-width: 900px) { .match-profile { position: static; max-height: none; overflow: visible; } }
.mp-head { margin-bottom: 1rem; }
.mp-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ink); }
.mp-note { margin: .2rem 0 0; font-size: .74rem; font-weight: 600; color: var(--faint); }
.mp-hint { margin: .3rem 0 .55rem; font-size: .78rem; line-height: 1.5; color: var(--muted); }
/* ---- The profile form, as a stack of cards ----
   Six sections, one card each, collapsed except the first. The pattern is
   lifted from the import panel in MedResPal — chevron, header button carrying
   aria-expanded, body hidden — but drawn in this site's tokens rather than
   that one's ink scale, so it reads as this page and not as a transplant.
   The point of the header is that it works CLOSED: title on the left, what
   you have put in on the right, so the whole profile is a three-second read
   instead of a screen and a half of form to scroll past. */
.mp-secs { display: flex; flex-direction: column; gap: .5rem; }
.mp-sec {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease;
}
.mp-sec.is-open { border-color: var(--brand-line); }
/* …except this one. `overflow: hidden` keeps an edge-to-edge child inside the
   card's rounded corners, and it also cropped the keyword completion list to
   a card barely taller than the input it hangs from — one and a half rows of
   seven, which is why nobody could see what the directory was offering. The
   keywords card has no edge-to-edge child to clip. */
.mp-sec[data-mp-section="keywords"] { overflow: visible; }

.mp-sec-head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .7rem .8rem;
  background: none; border: none; border-radius: 0;
  font: inherit; text-align: left; cursor: pointer;
}
.mp-sec-head:hover .mp-sec-title { color: var(--brand-dark); }
.mp-sec-head:focus-visible { outline: none; box-shadow: var(--ring); }
.mp-sec-chevron {
  flex: none; font-size: .9rem; line-height: 1; color: var(--faint);
  transition: transform .18s ease, color .15s ease;
}
.mp-sec.is-open .mp-sec-chevron { transform: rotate(90deg); color: var(--brand); }
.mp-sec-title {
  flex: 1;
  font-size: .875rem; font-weight: 600; color: var(--muted);
  transition: color .15s ease;
}
.mp-sec.is-open .mp-sec-title { color: var(--ink); }
/* What is already in there, so a closed card still answers "do I need this?" */
.mp-sec-summary { flex: none; font-size: .74rem; color: var(--faint); }
.mp-sec.is-open .mp-sec-summary { opacity: 0; }

.mp-sec-body { padding: 0 .8rem .8rem; }
.mp-sec-body > .mp-hint:first-child { margin-top: 0; }

.mp-textarea {
  display: block; width: 100%; box-sizing: border-box;
  /* Height comes from growDescribe() in matches.js — the box is as tall as
     what is in it. `resize: none` because a handle would fight that; overflow
     hidden because a grown box never needs its own scrollbar. */
  min-height: 10.5rem; resize: none; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: .7rem .75rem;
  font: inherit; font-size: .86rem; line-height: 1.55;
  color: var(--text); background: #fff;
}
.mp-textarea::placeholder { color: var(--faint); }
.mp-textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.mp-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mp-btn--go {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff;
  padding: .45rem 1rem; font-size: .8rem;
}
.mp-btn--go:hover { background: var(--brand); border-color: var(--brand); }
.mp-btn--go[disabled] { opacity: .5; cursor: progress; }
.mp-btn--go[disabled]:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.mp-notice {
  margin: .55rem 0 0; padding: .45rem .6rem;
  background: var(--brand-soft); border-left: 2px solid var(--brand-line); border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: .78rem; line-height: 1.5; color: var(--brand-dark);
}

.mp-domains { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Sixteen fields, of which a reader picks two or three. Drawn as sixteen
   outlined pills they read as sixteen equally urgent buttons; drawn as plain
   labels on the panel's own ground, the two that are ON are the only things
   the eye stops on — which is the actual state being shown. */
.mp-domain {
  border: 1px solid transparent; background: rgba(42,35,32,.045);
  color: var(--muted);
  font: inherit; font-size: .755rem; font-weight: 500;
  padding: .28rem .58rem;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mp-domain:hover { background: rgba(42,35,32,.09); color: var(--brand-dark); }
.mp-domain:focus-visible { outline: none; box-shadow: var(--ring); }
.mp-domain.is-on {
  background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; font-weight: 500;
}
.mp-domain.is-on:hover { background: var(--brand-600); border-color: var(--brand-600); }

.mp-kw-add { position: relative; display: flex; gap: .4rem; margin-bottom: .6rem; }
.mp-kw-add input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: .55rem .7rem;
  font: inherit; font-size: .88rem; color: var(--text); background: #fff;
}
.mp-kw-add input::placeholder { color: var(--faint); }
.mp-kw-add input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* Completion list, anchored under the input it completes. */
.mp-ac {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1);
  box-shadow: var(--sh-2, 0 6px 20px rgba(32,32,32,.10));
  max-height: 15rem; overflow-y: auto;
  padding: .2rem;
}
.mp-ac[hidden] { display: none; }
/* …or over it, when the room under the input has run out. */
.mp-ac--up { top: auto; bottom: calc(100% + .25rem); }
.mp-ac-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--text);
  padding: .38rem .5rem; border-radius: var(--r-1);
}
.mp-ac-item:hover, .mp-ac-item.is-active { background: var(--brand-soft); color: var(--brand-dark); }
/* The tint alone is about 1.07:1 on this page. The bar is the signal; the tint
   is decoration. `box-shadow` rather than a border so no row changes width. */
.mp-ac-item.is-active { box-shadow: inset 2px 0 0 var(--ink); }
.mp-reach { font-size: .68rem; font-weight: 700; color: var(--faint); white-space: nowrap; }
.mp-ac-item.is-active .mp-reach { color: var(--brand); }

/* A sentence's own verb, where the fix is one click rather than a page. */
.mp-link {
  border: 0; background: none; padding: 0;
  font: inherit; color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.mp-link:hover { color: var(--brand-dark); }

/* The rescue line under a keyword that reaches nothing. */
.mp-dead-help {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-top: .45rem; padding: .45rem .55rem;
  background: #fdfaf4; border-left: 2px solid var(--warn);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-size: .76rem; line-height: 1.5; color: var(--muted);
}
.mp-dead-kw { flex: 1 1 100%; font-weight: 700; color: #7d5f28; }
.mp-dead-lead { color: var(--muted); }

/* Terms the directory uses inside the fields you picked. */
.mp-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .55rem; }
.mp-suggest-label {
  flex: 1 1 100%;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
}
.mp-sug {
  display: inline-flex; align-items: baseline; gap: .3rem;
  border: 1px dashed var(--brand-line); background: var(--brand-100); color: var(--brand-dark);
  font: inherit; font-size: .74rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: var(--r-pill); cursor: pointer;
}
.mp-sug:hover { background: var(--brand-soft); border-style: solid; border-color: var(--brand-line); }
.mp-sug:focus-visible { outline: none; box-shadow: var(--ring); }
.mp-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
/* The reader's own keywords, in the page's one accent rather than in the gold.
   Gold is reserved for a deadline you can still act on; a keyword chip wearing
   it made the profile panel — an input — the loudest thing on a page whose
   subject is the ranked answer beside it. */
.mp-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(42,35,32,.06); border: 1px solid transparent;
  color: var(--brand-dark);
  font-size: .755rem; font-weight: 500;
  padding: .22rem .3rem .22rem .55rem;
  border-radius: var(--r-1);
}
.mp-chip-x {
  border: 0; background: none; cursor: pointer;
  color: var(--faint); font: inherit; font-size: .7rem; line-height: 1;
  padding: .15rem .25rem; border-radius: 3px;
}
.mp-chip .mp-reach { color: var(--faint); font-weight: 500; }
/* A keyword that reaches nothing is the profile's one silent failure mode. */
.mp-chip.is-dead { background: var(--line-2); border-color: var(--line); color: var(--muted); }
.mp-chip.is-dead .mp-reach { color: var(--warn); }
.mp-chip-x:hover { background: rgba(42,35,32,.12); color: var(--brand-dark); }
.mp-chip-x:focus-visible { outline: none; box-shadow: var(--ring); }

.mp-btn {
  border: 1px solid var(--brand-line); background: #fff; color: var(--brand-dark);
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .34rem .75rem; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.mp-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.mp-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.mp-btn--quiet { border-color: var(--line); color: var(--muted); }
.mp-btn--quiet:hover { background: #fbf1ee; color: #a8534a; border-color: #eedcd6; }

.mp-selects { display: grid; gap: .5rem; }
.mp-select { display: grid; gap: .2rem; }
.mp-select-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.mp-select select {
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-1);
  padding: .45rem .6rem;
  font: inherit; font-size: .84rem; color: var(--text); background: #fff;
}
.mp-select select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* Still worn by the "Dismissed" disclosure in the results column. */
.mp-count {
  display: inline-block; min-width: 1.1rem; padding: 0 .3rem;
  background: var(--brand-soft); color: var(--brand-dark);
  border-radius: var(--r-pill);
  font-size: .68rem; text-align: center; letter-spacing: 0;
}
.mp-count:empty { display: none; }


.mp-foot { margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--line-2); }

/* ---- Ranked results ---- */
.mc-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1rem;
  margin-bottom: .7rem;
}
.mc-count {
  font-size: .84rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mc-controls { display: flex; align-items: center; gap: .8rem; }
.mc-sort { display: inline-flex; background: rgba(42,35,32,.05); border-radius: var(--r-1); padding: .16rem; }
.mc-sort-btn {
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: .755rem; font-weight: 500;
  padding: .28rem .68rem; border-radius: 4px; cursor: pointer;
}
.mc-sort-btn:hover { color: var(--brand-dark); }
.mc-sort-btn.is-on { background: #fff; color: var(--brand-dark); font-weight: 600; box-shadow: var(--sh-1); }
.mc-sort-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.mc-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer;
}

.mc-coverage {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem;
  margin: 0 0 .25rem;
}
.mc-cov {
  display: inline-flex; align-items: baseline; gap: .3rem;
  color: var(--muted);
  font-size: .715rem; font-weight: 500;
  padding: .1rem 0;
}
.mc-cov + .mc-cov::before { content: '·'; color: var(--brand-line); margin-right: .35rem; }
.mc-cov-n { font-size: .69rem; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.mc-cov.is-empty { color: var(--faint); }
.mc-cov.is-empty .mc-cov-n { color: var(--warn); }
.mc-cov-note { flex: 1 1 100%; font-size: .74rem; color: var(--muted); }

/* ------------------------------------------------------------------
   The ranked list.

   It began as cards, and the card was doing too much: a score pill, an
   award pill, a "closing soon" pill, a field chip, a keyword chip and
   three buttons, every one of them a 1px border around a tinted fill at
   the same radius. Nothing receded, so the eye had no path through a row
   and no way to compare two. Match strength was encoded three times over
   — the left border, the score, and a three-segment meter — which reads
   as insecurity rather than emphasis.

   What replaced it is a list, not a deck. Rows are separated by a
   hairline and lifted onto a surface only under the pointer; the rank
   carries the ordering, the title carries the grant, the sentence
   carries the reasoning, and everything else is set quietly beneath.
   One accent (gold) survives, and only on a deadline you can still act
   on. ------------------------------------------------------------- */

/* ---- The ranked list ----
   Drawn as the directory's own table (see #panel-grants .grants-uswds in
   matches.html), so the card that used to live here is gone along with its
   grid, its title, its meta line and its footer. What remains is the handful
   of things matching adds to a directory row. */

/* The table is the Grants page's; only its COLUMN WIDTHS differ, because this
   is the narrower half of a two-column page rather than a full-width
   directory. Same specificity idiom as the widths it overrides (they are set
   on th.gt-h-* under the same two ancestors), so the table stays fixed-layout
   and the title keeps the room that is left. */
.mc-table { width: 100%; }
/* The directory's own 104px. FORECASTED is the longest status there is and it
   needs every pixel of it; narrower, the pill overran the title beside it. */
#panel-grants .grants-uswds .mc-table th.gt-h-status { width: 104px; }
/* 84px each clipped "Sep 18, 2026" (83px of nowrap text inside 32px of
   padding) and let Dismiss hang off the table's edge. These are the least
   that hold them; the title still gets more than it had at 84. */
#panel-grants .grants-uswds .mc-table th.gt-h-deadline { width: 118px; }
#panel-grants .grants-uswds .mc-table th.gt-h-actions { width: 100px; }
#panel-grants .grants-uswds .mc-table th.gt-h-title { width: auto; }

/* The rank, under the status pill. Display serif and tabular so 09 and 10 sit
   on the same axis — the one typographic thread tying the list to the
   masthead above it. */
.mc-rank {
  display: block; margin-top: .35rem;
  font-family: var(--font-serif);
  font-size: 1.15rem; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--brand); opacity: .42;
  user-select: none;
}
.mc-row--strong .mc-rank { opacity: .75; }
.mc-row--good   .mc-rank { opacity: .55; }

/* The award, in the meta line rather than a column of its own — see the note
   in matches.js. Bold and tabular, as it is in the directory's Award cell. */
.mc-money { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The tier, in the meta line beside the sponsor — the directory row has no
   column for "how well does this suit me", and it does not need one. No raw
   number any more: see the note in matches.js. */
.mc-fit { font-weight: 600; color: var(--brand-dark); }

.mc-empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r-2);
  padding: 2rem 1.4rem; text-align: center;
}
.mc-empty h2 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--ink); }
.mc-empty p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--muted); max-width: 34rem; margin-inline: auto; }

.mc-dismissed { margin-top: 1.1rem; }
.mc-dismissed > summary {
  cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; color: var(--muted);
}
.mc-dismissed > summary::-webkit-details-marker { display: none; }
.mc-dismissed > summary::before { content: '▸ '; color: var(--faint); }
.mc-dismissed[open] > summary::before { content: '▾ '; }
.mc-dismissed-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.mc-dismissed-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .4rem .6rem;
  background: var(--surface-warm); border: 1px solid var(--line-2); border-radius: var(--r-1);
}
.mc-dismissed-title {
  flex: 1 1 auto; min-width: 0;
  font-size: .8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
   Personal hub — deadline watch
   ============================================================ */

/* The one part of the hub that speaks without being opened. Amber, not red:
   a deadline a week out is a thing to plan around, not an emergency. */
.hub-alert {
  background: var(--clay-soft);
  border-bottom: 1px solid var(--clay-line);
}
.hub-alert__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .55rem 1.25rem;
}
.hub-alert__icon { display: inline-flex; color: var(--clay); flex: 0 0 auto; }
.hub-alert__text {
  flex: 1 1 18rem; min-width: 0;
  font-size: .85rem; line-height: 1.45; color: #6d5320;
}
.hub-alert__text strong { color: #5e4110; font-weight: 800; }
.hub-alert__btn {
  flex: 0 0 auto;
  border: 1px solid var(--clay-line); background: #fff; color: #7d5f28;
  font: inherit; font-size: .78rem; font-weight: 700;
  padding: .28rem .75rem; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.hub-alert__btn:hover { background: #f2e8d6; border-color: var(--clay); }
.hub-alert__btn:focus-visible { outline: none; box-shadow: var(--ring); }
.hub-alert__x {
  flex: 0 0 auto;
  border: 0; background: none; color: #a1876a;
  font: inherit; font-size: .82rem; line-height: 1;
  padding: .3rem .35rem; border-radius: var(--r-1); cursor: pointer;
}
.hub-alert__x:hover { background: #e8dcc4; color: #6d5320; }
.hub-alert__x:focus-visible { outline: none; box-shadow: var(--ring); }

/* The avatar carries the same warning, so it survives a dismissed bar. */
.hub-avatar.is-urgent { box-shadow: 0 0 0 2px var(--clay-bright); }
.hub-avatar.is-urgent .hub-badge { background: var(--clay); color: #3a2f1c; }
.hub-tab-count.is-urgent { background: var(--clay-soft); color: #7d5f28; }
.hub-tab.is-active .hub-tab-count.is-urgent { background: var(--clay); color: #3a2f1c; }

/* ---- Calendar tab ---- */
.hub-cal { padding: .35rem 1.15rem 1rem; }
.hub-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: .3rem 0 .55rem;
}
.hub-cal-month { font-size: .92rem; font-weight: 800; color: var(--ink); }
.hub-cal-arrow {
  border: 1px solid var(--line); background: #fff; color: var(--brand-dark);
  font: inherit; font-size: 1rem; line-height: 1;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--r-pill); cursor: pointer;
}
.hub-cal-arrow:hover { background: var(--brand-soft); border-color: var(--brand); }
.hub-cal-arrow:focus-visible { outline: none; box-shadow: var(--ring); }

.hub-cal-wds, .hub-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hub-cal-wd {
  text-align: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: var(--faint); padding-bottom: .25rem;
}
.hub-cal-day {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid transparent; background: none;
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--text);
  border-radius: var(--r-1);
}
/* Days with nothing due are spans, not buttons — nothing to click. */
span.hub-cal-day { cursor: default; }
button.hub-cal-day { cursor: pointer; font-weight: 800; }
button.hub-cal-day:hover { background: var(--brand-100); border-color: var(--brand-line); }
button.hub-cal-day:focus-visible { outline: none; box-shadow: var(--ring); }
.hub-cal-day.is-out { color: var(--faint); opacity: .5; }
.hub-cal-day.is-past { color: var(--faint); }
.hub-cal-day.is-today { border-color: var(--brand); color: var(--brand-dark); font-weight: 800; }
.hub-cal-day.has-due { background: var(--brand-soft); color: var(--brand-dark); }
.hub-cal-day.is-urgent { background: var(--clay-soft); color: #7d5f28; border-color: var(--clay-line); }
.hub-cal-day.is-selected { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.hub-cal-dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand);
}
.hub-cal-day.is-urgent .hub-cal-dot { background: var(--clay); }
.hub-cal-day.is-past .hub-cal-dot { background: var(--faint); }
.hub-cal-day.is-selected .hub-cal-dot { background: #fff; }

.hub-cal-sub {
  margin: .85rem 0 .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-dark);
}
.hub-cal-list {
  list-style: none; margin: 0; padding: 0;
  /* minmax(0, 1fr), not the default auto: a grid item's automatic minimum size
     is its min-content width, which lets a long title push the date out past
     the panel's clipped edge instead of ellipsising. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem;
  max-height: min(28vh, 240px); overflow-y: auto;
}
.hub-cal-row {
  min-width: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: .7rem;
  padding: .4rem .55rem;
  background: var(--surface-warm); border: 1px solid var(--line-2);
  border-radius: var(--r-1);
}
.hub-cal-row-title {
  flex: 1 1 auto; min-width: 0;
  font-size: .82rem; font-weight: 700; color: var(--brand-dark); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-cal-row-title:hover { text-decoration: underline; }
.hub-cal-row-when { flex: 0 0 auto; white-space: nowrap; font-size: .72rem; font-weight: 700; color: var(--muted); }
.hub-cal-row-when.is-urgent { color: #7d5f28; }
.hub-cal-row-when.is-closed { color: var(--faint); font-weight: 600; }
.hub-cal-none {
  padding: .9rem .6rem; text-align: center;
  font-size: .8rem; color: var(--muted);
}

@media (max-width: 620px) {
  .hub-alert__inner { padding: .5rem 1rem; }
  .hub-alert__text { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════ */
/*  WARM PAPER — cohesive visual redesign (final layer).          */
/*  Paper canvas, white cards, brand-tinted hairlines, one muted   */
/*  mocha accent. Placed last so it wins on equal specificity;     */
/*  re-skins without touching markup or the responsive/interaction */
/*  logic above.                                                   */
/* ════════════════════════════════════════════════════════════ */

:root {
  --clay-bright:  #d8a962;
  --clay-soft:    #f7f0e2;
  --clay-line:    #e8dcc4;
}

html, body { background: var(--paper); color: var(--text); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Section titles ---- */
.section__title { color: var(--ink); font-weight: 600; letter-spacing: -0.025em; }
.section__lead { color: var(--muted); font-size: 1rem; }

/* The finder sits on the same paper as everything else; the rule above it is
   all the separation it needs. */
.home-finder { background: transparent; border-top: 1px solid var(--hairline); }

/* ---- Domain chips ---- */
.domain-chip {
  border-color: var(--hairline);
  color: var(--muted);
  background: var(--surface);
  font-weight: 500;
  font-size: .85rem;
  /* Sixteen of these sit in one block, so their height is the block's height.
     Thinner: the horizontal padding is what makes a pill read as a pill, the
     vertical padding was only making the row tall. */
  padding: .22rem .8rem;
  box-shadow: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.domain-chip:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: none;
  box-shadow: none;
}

/* ---- Value props ---- */
.valueprop {
  border-radius: var(--r-2);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: none;
  padding: 1.5rem;
}
.valueprop::before { display: none; }
.valueprop:hover { transform: none; border-color: rgba(42,35,32,.18); box-shadow: var(--sh-2); }
.valueprop__icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1rem;
  margin-bottom: .9rem;
}
.valueprop__icon svg { width: 17px; height: 17px; }
.valueprop__title { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.valueprop__body { color: var(--muted); font-size: .92rem; }

/* ---- Buttons ---- */
.btn { font-weight: 500; font-size: .92rem; border-width: 1px; padding: .62rem 1.25rem; border-radius: var(--r-1); }
.btn--primary { background: var(--brand); border-color: var(--brand); box-shadow: none; }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: none; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--canvas); border-color: rgba(42,35,32,.18); }

/* ---- Panel canvas ---- */
#panel-grants { background: transparent; }

/* ---- Sidebar: a quiet rail, not a floating card ---- */
#panel-grants .grants-uswds .grants-sidebar {
  background: transparent;
  border: none;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  padding: .25rem 1.35rem 1.1rem 0;
  top: 72px;
}
#panel-grants .grants-uswds .grants-sidebar-head { border-bottom: 1px solid var(--hairline); padding-bottom: .6rem; }
#panel-grants .grants-uswds .grants-sidebar-title { color: var(--ink); font-weight: 600; }
#panel-grants .grants-uswds .grants-clear-all { color: var(--brand); font-weight: 500; }
#panel-grants .grants-uswds .facet-section { border-top-color: var(--hairline); }
#panel-grants .grants-uswds .facet-head { color: var(--ink); font-weight: 500; }
#panel-grants .grants-uswds .facet-head:hover { color: var(--brand); }
#panel-grants .grants-uswds .facet-option:hover span { color: var(--ink); }
#panel-grants .grants-uswds .facet-option input { accent-color: var(--brand); }
#panel-grants .grants-uswds .facet-count { color: var(--faint); }

/* ---- View toggle segmented control ---- */
#panel-grants .grants-uswds .grants-viewtoggle { background: var(--canvas); border-color: var(--hairline); }
#panel-grants .grants-uswds .gv-btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
#panel-grants .grants-uswds .gv-btn:hover { color: var(--ink); }

/* ---- Results head ---- */
#panel-grants .grants-uswds .grants-results-head { border-bottom-color: var(--hairline); }
/* The count reconciles itself against the headline, so it is now two lines: the
   number, and why it is not the number above it. The shared rule sets 1.5rem
   bold lowercase — right for the count, wrong for a sentence naming NIH. */
body[data-page="funded"] #panel-grants .grants-uswds #grantResultCount {
  display: block;
  text-transform: none;
}
body[data-page="funded"] #panel-grants .grants-uswds #grantResultCount .rc-n {
  display: block;
  text-transform: lowercase;
}
body[data-page="funded"] #panel-grants .grants-uswds #grantResultCount .rc-sub {
  display: block;
  margin-top: 0.2rem;
  max-width: 72ch;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
body[data-page="funded"] #panel-grants .grants-uswds #grantResultCount .rc-sub strong {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Before a search there is no count to show, but the head still drew its rule
   and reserved its padding and margin — a stray line under the tabs with ~45px
   of dead space around it. */
#panel-grants .grants-uswds .grants-results-head:has(> .grants-resultcount:only-child:empty) {
  display: none;
}
#panel-grants .grants-uswds #grantResultCount,
#panel-grants .grants-uswds .grants-resultcount { color: var(--ink); font-weight: 500; }
#panel-grants .grants-uswds .grants-sort__select:focus-visible { border-color: var(--brand); box-shadow: var(--ring); }

/* ---- Active filter chips ---- */
#panel-grants .grants-uswds .active-chip { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
#panel-grants .grants-uswds .active-chip:hover { background: #ebe2d6; }

/* ---- Results table: hairline rows on paper, no card frame ---- */
#panel-grants .grants-uswds #grantList {
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  box-shadow: none;
  background: var(--surface);
}
#panel-grants .grants-uswds .grant-table thead th {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  color: var(--faint);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .06em;
}
#panel-grants .grants-uswds .grant-table tbody td { border-bottom: 1px solid var(--line-2); }
#panel-grants .grants-uswds .grant-table tbody tr:last-child td { border-bottom: none; }
#panel-grants .grants-uswds .grant-table tbody tr:hover { background: rgba(42,35,32,.025); }
#panel-grants .grants-uswds .grant-table .grant-row-title { color: var(--ink); font-weight: 500; }
#panel-grants .grants-uswds .grant-table .grant-row-title:hover { color: var(--brand); }
#panel-grants .grants-uswds .gt-domain { background: var(--canvas); color: var(--muted); font-weight: 400; }
#panel-grants .grants-uswds .gt-src { color: var(--brand); }
#panel-grants .grants-uswds .gt-deadline-hint--soon { color: #a06a28; }

/* Status pills — a coloured dot carries the state; the pill itself stays quiet */
#panel-grants .grants-uswds .grant-table .grant-status--open { background: #eef4ea; color: #3f6b4c; box-shadow: none; }
#panel-grants .grants-uswds .grant-table .grant-status--forecasted { background: var(--clay-soft); color: #7d5f28; box-shadow: none; }
#panel-grants .grants-uswds .grant-table .grant-status--closed { background: var(--canvas); color: var(--faint); box-shadow: none; }

/* ---- Pager ---- */
#panel-grants .grants-uswds .pager-num[aria-current] { background: var(--brand); border-color: var(--brand); color: #fff; }
#panel-grants .grants-uswds .pager-num:hover:not([aria-current]) { background: var(--canvas); }

/* ---- Detail card ---- */
#panel-grants .grants-uswds #grantDetail {
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  background: var(--surface);
}
#panel-grants .grants-uswds .grant-detail-title { color: var(--ink); font-weight: 600; letter-spacing: -0.025em; }
#panel-grants .grants-uswds .fact { background: var(--surface-warm); border: 1px solid var(--hairline); border-radius: var(--r-2); }
#panel-grants .grants-uswds .fact-label { color: var(--faint); letter-spacing: .05em; font-weight: 500; }
#panel-grants .grants-uswds .grant-chip { background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line); font-weight: 500; }
#panel-grants .grants-uswds .grant-chip--muted { background: var(--canvas); color: var(--muted); border-color: var(--hairline); }
#panel-grants .grants-uswds .grant-cta { background: var(--brand); box-shadow: none; font-weight: 500; }
#panel-grants .grants-uswds .grant-cta:hover { background: var(--brand-dark); }

/* ---- Sources view ---- */
#panel-grants .grants-uswds .src-domain { border: 1px solid var(--hairline); border-radius: var(--r-2); box-shadow: none; background: var(--surface); }
#panel-grants .grants-uswds .src-domain-title { color: var(--ink); font-weight: 600; }
#panel-grants .grants-uswds .src-auto--on { background: var(--brand-soft); color: var(--brand); }

/* ---- Disclosure ---- */
#panel-grants .grants-disclosure { border: 1px solid var(--hairline); border-radius: var(--r-2); background: var(--surface); }
#panel-grants .grants-disclosure summary { color: var(--muted); font-weight: 500; }

/* ---- Footer: paper, separated by a rule rather than a dark slab ---- */
.site-footer {
  background: transparent;
  color: var(--muted);
  border-top: 1px solid var(--hairline);
  margin-top: 4rem;
}
.site-footer::before { display: none; }
.site-footer h4 { color: var(--faint); font-weight: 500; font-size: .72rem; letter-spacing: .08em; }
.site-footer a { color: var(--muted); font-size: .88rem; }
.site-footer a:hover { color: var(--brand); }
.site-footer__brand { color: var(--ink); font-family: var(--font-serif); font-weight: 400; font-size: 1.25rem; }
.site-footer__inner > div:first-child p { color: var(--faint); font-size: .88rem; }
.site-footer__disclaimer { border-top: 1px solid var(--hairline); }
.site-footer__disclaimer p { color: var(--faint); font-size: .78rem; }
.site-footer__disclaimer strong { color: var(--muted); font-weight: 500; }

/* ---- Page intro (Sources / Insights / About headers) ---- */
.page-intro { background: transparent; border-bottom: 1px solid var(--hairline); }
.page-intro h1 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); letter-spacing: -0.015em; font-size: clamp(2rem, 3.6vw, 2.7rem); }
.page-intro p { color: var(--muted); font-size: 1rem; }

/* A two-step lede. The matches page had one 90-word paragraph carrying both
   what the page does and how it handles your data, set at one size — so the
   sentence a first-time reader needs was the same weight as the retention
   note, and together they pushed the ranked list most of a screen down. The
   promise is stated once, plainly; the mechanism sits under it in fine print,
   where a reader who cares will still find it. */
.page-intro__lede { max-width: 46rem; font-size: 1.06rem; line-height: 1.55; color: var(--text); }

.prose h1 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); letter-spacing: -0.015em; }
.prose h2 { color: var(--ink); font-weight: 600; border-top-color: var(--hairline); }
.prose .lead { font-size: 1.12rem; color: var(--muted); }
.callout { background: var(--brand-soft); border: 1px solid var(--brand-line); border-left: 2px solid var(--brand); border-radius: var(--r-1); box-shadow: none; }
.tier-table { border-color: var(--hairline); box-shadow: none; }
.tier-table th { background: var(--canvas); color: var(--ink); font-weight: 500; }
.tier-table th, .tier-table td { border-bottom-color: var(--line-2); }

/* ---- CTA band: cream, not a dark slab ---- */
.cta-band { background: var(--canvas); color: var(--ink); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.cta-band__title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; }
.cta-band__sub { color: var(--muted); }
.cta-band .btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.cta-band .btn--ghost:hover { background: var(--surface); border-color: rgba(42,35,32,.18); }
.cta-band .btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.cta-band .btn--primary:hover { background: var(--brand-dark); }

/* ---- Filter rail: flat headings on paper, not stacked gray accordion bars ---- */
#panel-grants .grants-uswds .facet-section {
  /* The base layer boxes each group with `border: 1px` on all four sides plus
     a rule under the head; on paper that reads as a stack of gray cards. */
  border: none;
  border-top: 1px solid var(--hairline);
}
#panel-grants .grants-uswds .facet-body {
  background: transparent;
  border-top: none;
  padding: 0 0 .85rem;
}
#panel-grants .grants-uswds .facet-section:first-child { border-top: none; }
#panel-grants .grants-uswds .facet-section:last-child { border-bottom: none; }
#panel-grants .grants-uswds .facet-head {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: .8rem 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
#panel-grants .grants-uswds .facet-head:hover { background: transparent; color: var(--brand); }
#panel-grants .grants-uswds .facet-head .facet-chevron { color: var(--faint); }
#panel-grants .grants-uswds .facet-body { padding: 0 0 .85rem; }
#panel-grants .grants-uswds .facet-option { padding: .3rem 0; font-size: .85rem; }
#panel-grants .grants-uswds .facet-option span { color: var(--muted); }
#panel-grants .grants-uswds .facet-option input[type="checkbox"] {
  border-color: rgba(42,35,32,.28);
  border-radius: 3px;
}
#panel-grants .grants-uswds .facet-option input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand);
}
#panel-grants .grants-uswds .grants-sidebar-title {
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--faint);
  font-weight: 500;
}
#panel-grants .grants-uswds .grants-clear-all { font-size: .78rem; text-decoration: none; }
#panel-grants .grants-uswds .grants-clear-all:hover { text-decoration: underline; }

/* ---- Sort: a label with a select, not a boxed control ---- */
#panel-grants .grants-uswds .grants-sort__label { color: var(--faint); font-size: .72rem; letter-spacing: .08em; }
/* Two ids in the base selector (`#panel-grants … #grantSort`) beat a class
   here, so the id has to be named to undo the square black-bordered box. */
#panel-grants .grants-uswds .grants-sort__select,
#panel-grants .grants-uswds #grantSort {
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
  font-size: .85rem;
  padding: .38rem 1.9rem .38rem .7rem;
  box-shadow: none;
}
#panel-grants .grants-uswds .grants-sort__select:hover,
#panel-grants .grants-uswds #grantSort:hover { border-color: rgba(42,35,32,.2); }

/* ---- Row action buttons ---- */
#panel-grants .grants-uswds .gt-track button,
#panel-grants .grants-uswds .track-btn {
  border-color: var(--hairline);
  background: var(--surface);
  color: var(--muted);
  font-weight: 400;
  border-radius: var(--r-1);
  box-shadow: none;
}
#panel-grants .grants-uswds .gt-track button:hover,
#panel-grants .grants-uswds .track-btn:hover { border-color: rgba(42,35,32,.22); color: var(--brand); background: var(--surface); }

/* ---- In-panel search: the same pill as the landing hero ---- */
#panel-grants .grants-uswds .grants-hero { border-bottom: none; padding-bottom: 1.25rem; }
#panel-grants .grants-uswds .grants-hero-title {
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
#panel-grants .grants-uswds .grants-searchbar {
  max-width: 620px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-2);
  padding: 4px 5px 4px 4px;
  overflow: hidden;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-input {
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  padding: .68rem 1rem;
  font-size: .95rem;
  color: var(--ink);
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
#panel-grants .grants-uswds .grants-searchbar:focus-within {
  border-color: rgba(42,35,32,.22);
  box-shadow: var(--sh-3), var(--ring);
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-btn {
  border: none;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: .88rem;
  padding: .6rem 1.4rem;
  box-shadow: none;
}
#panel-grants .grants-uswds .grants-searchbar .facet-search-btn:hover { background: var(--brand-dark); }

/* Example-topic chips under the search box */
#panel-grants .grants-uswds .grants-hero .grant-chip,
#panel-grants .grants-uswds .funded-try button,
#panel-grants .grants-uswds .funded-example {
  font-weight: 400;
  border-radius: var(--r-pill);
}

/* The three funder/counting/year controls */
#panel-grants .grants-uswds .funded-control label {
  color: var(--faint);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .08em;
}
#panel-grants .grants-uswds .funded-control input,
#panel-grants .grants-uswds .funded-control select {
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: var(--surface);
  font-size: .85rem;
  font-weight: 400;
  color: var(--ink);
  box-shadow: none;
}

/* ---- Award rows: Poppins reads a full step heavier than Public Sans did at
       the same weight, so the row titles came out shouting ---- */
/* The base rule is `… .funded-row .funded-row-title` — one class deeper than
   this was, so it kept winning at 700. */
#panel-grants .grants-uswds .funded-row .funded-row-title,
.funded-row .funded-row-title,
#panel-grants .grants-uswds .grant-row-title { font-weight: 500; letter-spacing: -0.012em; }
#panel-grants .grants-uswds .funded-row-code { font-weight: 500; background: var(--brand-soft); color: var(--brand); border: none; }
#panel-grants .grants-uswds .funded-row-fy { color: var(--faint); font-weight: 400; }

/* ---- Prose ---- */
.prose h2 { font-weight: 500; font-size: 1.28rem; letter-spacing: -0.02em; }
.prose h3 { font-weight: 500; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose p, .prose li { font-size: .97rem; }

/* Poppins carries more weight per step than the old grotesque, so the blanket
   700/800 headings inherited from the USWDS layer now read as bold. */
#panel-grants .grants-uswds h2,
#panel-grants .grants-uswds h3,
#panel-grants .grants-uswds h4 { font-weight: 500; letter-spacing: -0.015em; }
#panel-grants .grants-uswds strong { font-weight: 500; }

/* ---- Source rows: one quiet badge family instead of blue/cream/purple ---- */
#panel-grants .grants-uswds .src-link { font-weight: 500; color: var(--ink); }
#panel-grants .grants-uswds a.src-link:hover { color: var(--brand); }
#panel-grants .grants-uswds .src-ext { color: var(--faint); }
#panel-grants .grants-uswds .src-cat { font-weight: 500; border: none; }
#panel-grants .grants-uswds .src-cat--federal    { background: #eef1f7; color: #4a5f8a; }
#panel-grants .grants-uswds .src-cat--nonprofit  { background: #eef4ea; color: #4f6b52; }
#panel-grants .grants-uswds .src-cat--aggregator { background: var(--canvas); color: var(--muted); }
#panel-grants .grants-uswds .src-auto { font-weight: 500; border: none; }
#panel-grants .grants-uswds .src-auto--off { background: var(--canvas); color: var(--faint); }
#panel-grants .grants-uswds .src-domain-count { color: var(--faint); font-weight: 400; }

/* ---- Narrow screens ---- */
.site-brand__name { white-space: nowrap; }
@media (max-width: 620px) {
  /* .site-nav is width:100% below this breakpoint, but the bar never allowed a
     second row, so the nav squeezed in beside the brand and broke the wordmark
     onto three lines. */
  .site-header__bar { flex-wrap: wrap; gap: .5rem 1rem; padding-right: 3.5rem; }
  .site-nav { justify-content: flex-start; margin-left: -0.75rem; }
  .hero__inner { padding: 2.75rem 1.25rem 2rem; }
  .stats { padding-top: 1rem; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .stat-card { align-items: flex-start; text-align: left; flex-direction: column; padding: 1rem .9rem; }
  .stat-card:nth-child(odd) { border-left: none; }
  .stat-card:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}

/* ---- Account button: it was drawn for a dark header ----
   White-at-12%-on-white-at-35% was legible on the emerald bar and is invisible
   on paper — the control only appeared on hover, which read as flicker. It is
   the one persistent entry point to the personal hub, so it is now solid at
   rest and the hover state deepens rather than reveals. */
.hub-avatar {
  width: 34px; height: 34px;
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-1);
}
.hub-avatar svg { width: 17px; height: 17px; }
/* Signed in the button holds a face, so it stops being a filled brand circle
   and becomes a ring around the picture — the photo IS the affordance. */
.hub-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.hub-avatar.has-photo { background: var(--brand-soft); padding: 0; overflow: hidden; }
.hub-avatar.has-photo:hover,
.hub-avatar.has-photo[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); }
.hub-avatar-initials { font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.hub-avatar:hover,
.hub-avatar[aria-expanded="true"] {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
}
.hub-avatar:hover { box-shadow: var(--sh-2); }
/* The badge separated itself from the header with a dark ring; on paper the
   ring has to be the paper. */
.hub-badge {
  background: var(--clay);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--paper);
}
.hub-avatar.is-urgent { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--clay); }
.hub-avatar.is-urgent .hub-badge { background: var(--clay); color: #fff; }
/* Scrolled, the header frosts over; keep the badge ring matching what is
   actually behind it. */
.site-header.is-scrolled .hub-badge { box-shadow: 0 0 0 2px #f7f5f0; }

/* ---- Skeletons on paper ---- */
.skeleton { background: linear-gradient(90deg, var(--canvas) 25%, #faf9f5 37%, var(--canvas) 63%); background-size: 200% 100%; }

/* ============================================================ */
/* Accounts — header control, sign-in card, /signin page.       */
/* See public/auth.js. Everything here is drawn on paper, in    */
/* the same ink and brand as the rest of the chrome; the only   */
/* colour that is not ours belongs to the provider marks, which */
/* Google and Microsoft both require be shown unaltered.        */
/* ============================================================ */

/* ---- Account block ----
   Was a dropdown of its own behind a second avatar; now it is the last
   section of the hub panel, so it needs a rule off the top and nothing else —
   the head/links/toggle styles below are unchanged and still carry it. */
.hub-account-block { border-top: 1px solid var(--line); margin-top: .1rem; }

.auth-menu-head { padding: .9rem 1.05rem .75rem; border-bottom: 1px solid var(--line-2); }
.auth-menu-name { font-weight: 700; color: var(--ink); font-size: .94rem; }
.auth-menu-email { font-size: .8rem; color: var(--muted); word-break: break-all; margin-top: .1rem; }
.auth-menu-sync { font-size: .72rem; color: var(--faint); margin-top: .45rem; line-height: 1.4; }
.auth-menu-links { display: flex; flex-direction: column; padding: .3rem 0; }
.auth-menu-links > * {
  display: block; width: 100%;
  padding: .5rem 1.05rem;
  border: 0; background: none;
  font: inherit; font-size: .85rem; text-align: left;
  color: var(--text); text-decoration: none;
  cursor: pointer;
}
.auth-menu-links > *:hover { background: var(--canvas); color: var(--ink); }
.auth-menu-danger { color: #9d4040; }

/* ---- The sign-in card (modal over any page, or the /signin body) ---- */
.auth-overlay {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(28,28,26,.42);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
body.auth-modal-open { overflow: hidden; }

.auth-card {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 1.6rem 1.5rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-4);
}
.auth-close {
  position: absolute; top: .5rem; right: .65rem;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: none; color: var(--faint);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.auth-close:hover { background: var(--canvas); color: var(--ink); }

.auth-card-head { text-align: center; margin-bottom: 1.25rem; }
.auth-card-logo { border-radius: 9px; margin-bottom: .6rem; }
.auth-card-title {
  /* No margin of its own: the head is usually just a logo and this line, and
     the subtitle (only the signed-in card still has one) brings its own gap. */
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.auth-card-sub {
  margin: .35rem auto 0;
  max-width: 34ch;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Provider buttons. White, bordered, full width — the shape both providers'
   brand guidelines specify, and the shape users have learned to look for. */
.auth-provider {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%;
  padding: .68rem 1rem;
  margin-bottom: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: #fff;
  color: var(--ink);
  font-size: .9rem; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-provider:hover { border-color: var(--ink-4); box-shadow: var(--sh-2); }
.auth-provider:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.auth-divider {
  display: flex; align-items: center; gap: .7rem;
  margin: .95rem 0;
  color: var(--faint);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.auth-form { display: block; }
.auth-label {
  display: block;
  margin-bottom: .3rem;
  font-size: .78rem; font-weight: 600; color: var(--muted);
}
.auth-input {
  width: 100%;
  padding: .62rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-warm);
  color: var(--ink);
  font: inherit; font-size: .92rem;
}
.auth-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* The code is six digits read off a phone — spaced out so a transposition is
   visible, and wide enough that the caret never sits under a fingertip. */
.auth-input--code {
  text-align: center;
  font-size: 1.5rem; font-weight: 600; letter-spacing: .32em;
  padding: .55rem .5rem;
  text-indent: .32em;
}
.auth-submit {
  display: block; width: 100%;
  margin-top: .65rem;
  padding: .68rem 1rem;
  border: 1px solid var(--brand);
  border-radius: var(--r-2);
  background: var(--brand);
  color: #fff;
  font: inherit; font-size: .9rem; font-weight: 600;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.auth-submit:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.auth-submit[disabled] { opacity: .65; cursor: default; }
.auth-submit--link { display: block; }

.auth-altrow { display: flex; justify-content: space-between; gap: .75rem; margin-top: .7rem; }
.auth-link {
  border: 0; background: none; padding: 0;
  font: inherit; font-size: .8rem; font-weight: 500;
  color: var(--brand); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.auth-link:hover { color: var(--brand-dark); }

.auth-sent { margin: 0 0 .8rem; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.auth-error {
  margin: 0 0 .85rem;
  padding: .55rem .7rem;
  border: 1px solid #e8d3d3;
  border-left: 3px solid #9d4040;
  border-radius: var(--r-1);
  background: #fdf6f5;
  color: #7a3535;
  font-size: .82rem; line-height: 1.45;
}
.auth-note {
  margin: 1rem 0 0;
  /* Legal text at .73rem in --faint was 11.7px at 2.6:1. If it is worth
     saying before someone signs up, it is worth being able to read. */
  font-size: .8rem; line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.auth-note--warn { color: var(--warn); }

/* ---- /signin.html ---- */
/* The modal has to fit over a page; this one IS the page, so it takes the room
   the modal cannot — a wider card, wider gutters inside it, and a subtitle
   that gets to be one line instead of three. */
.signin-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}
.signin-page__card {
  width: 100%; max-height: none;
  padding: 2.1rem 2.4rem 1.6rem;
}

@media (max-width: 800px) {
  .signin-page { padding-top: 1.5rem; }
}
/* On a phone the wide gutters are just less room for the fields. */
@media (max-width: 640px) {
  .signin-page__card { padding: 1.6rem 1.25rem 1.25rem; }
}

/* ============================================================
   The Weekly Funding Brief — /newsletter.html
   ------------------------------------------------------------
   Two cards over one wide frame: the ask on the left, what you are
   agreeing to on the right, and the actual issue underneath at its
   real width. The issue block arrives from the server carrying the
   EMAIL's own inline styles (Georgia/Helvetica, hex colours), so
   nothing here may restyle its inside — the point of showing it is
   that it is the thing itself. This file only draws the frame.
   ============================================================ */

.nl-wrap { padding: 2.2rem 0 4rem; }

.nl-top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) { .nl-top { grid-template-columns: 1fr; } }

.nl-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--sh-2);
}
.nl-card h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nl-sub { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.92rem; }

/* ---- The form ---- */
.nl-label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nl-input {
  width: 100%;
  margin: 0 0 1.05rem;
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nl-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.nl-input:disabled { background: var(--canvas); color: var(--faint); }
select.nl-input {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2368685e' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.nl-submit { width: 100%; justify-content: center; }
.nl-note { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--muted); }
.nl-note.is-ok { color: #3f7d57; }
.nl-note.is-warn { color: var(--warn); }
.nl-form.is-done .nl-input { opacity: 0.7; }

.nl-promises {
  margin: 1.4rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}
.nl-promises li {
  position: relative;
  margin: 0 0 0.62rem;
  padding-left: 1.05rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.nl-promises li:last-child { margin-bottom: 0; }
.nl-promises li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--clay);
}
.nl-promises strong { color: var(--text); font-weight: 600; }

/* ---- What is in every issue ---- */
.nl-toc { counter-reset: nl; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.nl-toc li {
  position: relative;
  margin: 0 0 0.8rem;
  padding: 0 0 0.8rem 2.15rem;
  border-bottom: 1px solid var(--line-2);
}
.nl-toc li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.nl-toc li::before {
  counter-increment: nl;
  content: counter(nl);
  position: absolute; left: 0; top: 0.05rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
}
.nl-toc__k { display: block; font-size: 0.93rem; font-weight: 600; color: var(--ink); }
.nl-toc__v { display: block; margin-top: 0.18rem; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.nl-fine { margin: 1.15rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--faint); }

/* ---- The issue itself ---- */
.nl-issue-wrap { margin-top: 3rem; }
.nl-issue-head { margin: 0 0 1rem; }
.nl-issue-head h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
}
.nl-issue-head p { margin: 0; font-size: 0.88rem; color: var(--muted); }
.nl-subject { color: var(--faint); }
.nl-issue {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  padding: 2.2rem 1.6rem 2.6rem;
  overflow-x: auto;
}
.nl-skeleton { height: 440px; border-radius: var(--r-2); }

/* ---- "Get this weekly" band (insights.html) ----
   One band, at the end of a page a reader finished — not a modal, not a
   sticky bar. It is the only place on the site that asks for anything. */
.nl-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.7rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-3);
}
.nl-cta h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--brand-deep);
}
.nl-cta p { margin: 0; max-width: 62ch; font-size: 0.9rem; line-height: 1.6; color: var(--text); }
.nl-cta .btn { flex: none; }
@media (max-width: 700px) {
  .nl-cta { flex-direction: column; align-items: flex-start; }
}

/* ---- The weekly-brief opt-in, on the sign-in card ----
   A checkbox with room to say what the thing actually is. It sits directly
   above the button that commits, because that is the last moment a considered
   answer is possible, and it is never pre-ticked (see public/auth.js). */
.auth-optin {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: .85rem 0 0;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-warm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.auth-optin:hover { border-color: var(--brand-line); }
.auth-optin.is-on { border-color: var(--brand-line); background: var(--brand-soft); }
.auth-optin input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: .12rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.auth-optin-body { display: block; }
.auth-optin-title {
  display: block;
  font-size: .855rem; font-weight: 600; color: var(--ink);
}
.auth-optin-note {
  display: block;
  margin-top: .18rem;
  font-size: .765rem; line-height: 1.5; color: var(--muted);
}
/* The agreement. Not a card like the opt-in: the opt-in is an offer and has to
   sell itself, this is a condition and only has to be legible. */
.auth-terms {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: .85rem 0 0;
  /* Vertical padding so the row a reader has to hit is ~26px tall, not 16. */
  padding: .3rem 0;
  font-size: .78rem; line-height: 1.5; color: var(--muted);
  cursor: pointer;
}
/* The form refused because this was not ticked; say so where the box is, not
   only in the error at the top of the card. */
.auth-terms.is-invalid,
.auth-terms.is-invalid a { color: #7a3535; }
.auth-terms input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: .1rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.auth-terms a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.auth-terms a:hover { color: var(--brand-dark); }
.auth-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-note a:hover { color: var(--ink); }

/* On the code step the choice is already made; it is echoed, not re-asked. */
.auth-optin-echo {
  margin: .8rem 0 0;
  font-size: .78rem; line-height: 1.5; color: var(--muted);
}
.auth-optin-echo .auth-link { margin-left: .3rem; }

/* ---- The same choice in the account menu ---- */
.auth-menu-toggle {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem 1.05rem;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
.auth-menu-toggle:hover { background: var(--canvas); }
.auth-menu-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin: .1rem 0 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.auth-menu-toggle-title { display: block; font-size: .845rem; font-weight: 600; color: var(--ink); }
.auth-menu-toggle-note { display: block; margin-top: .1rem; font-size: .74rem; line-height: 1.45; color: var(--faint); }

/* ============================================================
   MATCHED FOR YOU — the ivory edition
   ------------------------------------------------------------
   Scoped to this one page on purpose, so it can be judged beside the rest of
   the site before anything spreads.

   The page had already been rebuilt as a list rather than a deck of cards
   (devlog/2026-09-08) and still did not read as composed. The remaining cause
   was the palette, not the layout: warm paper and mocha wine are a friendly
   system, and friendly is not the same register as considered. Nearly every
   surface carried a brown cast, so every element was tinted and none of them
   could recede.

   What replaces it is achromatic — ivory, ink, and the greys between them —
   with the hierarchy carried entirely by size, weight, leading and white space.
   No fill, no tint, no accent hue anywhere: urgency and caveats are set in
   italic and marked with a rule, which is how print has always done it and is
   also the accessible way round, since nothing here depends on colour alone.

   Tokens are overridden rather than rules, so the whole page — panel, controls,
   header and footer included — moves together and no component has to be
   restyled twice.
   ============================================================ */
body[data-page="matches"] {
  /* Grounds. Ivory rather than white: a true white makes serif text glare and
     the shadowless surfaces below would have nothing to sit on. */
  --paper:        #f8f7f4;
  --canvas:       #f2f1ed;
  --surface:      #ffffff;
  --surface-warm: #fbfaf8;

  /* Ink. Neutral all the way down — a brown-cast grey is what made the old
     muted text read as beige rather than as quiet. */
  --ink:        #17171a;
  --text:       #2c2c30;
  --muted:      #6a6a70;
  --faint:      #9b9ba1;
  --text-muted: #6a6a70;
  --ink-4:      #6a6a70;

  /* Rules, at the threshold of visible. The list is held together by alignment
     and space; the hairlines only confirm it. */
  --line:      #e4e3df;
  --line-2:    #eeedea;
  --hairline:  rgba(20,20,24,.09);
  --rule-soft: rgba(20,20,24,.05);

  /* The brand ramp collapses onto the ink ramp. Everything drawn "in brand" —
     the selected field, a keyword chip, a primary button — becomes ink on
     ivory, which is the only contrast this page now has to spend. */
  --brand:        #1f1f23;
  --brand-600:    #2c2c30;
  --brand-dark:   #17171a;
  --brand-darker: #0f0f12;
  --brand-deep:   #17171a;
  --brand-soft:   #f0efec;
  --brand-100:    #f8f7f4;
  --brand-line:   #dedcd7;
  --accent:       #1f1f23;
  --accent-deep:  #17171a;
  --accent-line:  #dedcd7;

  /* No hue survives, including the two status colours. "Open" and "closing
     soon" are said in words and in weight instead. */
  --clay:       #6a6a70;
  --clay-soft:  #f0efec;
  --clay-line:  #dedcd7;
  --clay-bright:#6a6a70;
  --ok:         #4a4a50;
  --warn:       #4a4a50;

  /* Shadows near zero: a shadowed card is a card, and this is a page of type. */
  --sh-1: 0 1px 1px rgba(20,20,24,.03);
  --sh-2: 0 1px 2px rgba(20,20,24,.04), 0 8px 22px rgba(20,20,24,.05);
  --sh-3: 0 1px 2px rgba(20,20,24,.04), 0 10px 26px rgba(20,20,24,.05);
  --sh-4: 0 2px 6px rgba(20,20,24,.05), 0 20px 44px rgba(20,20,24,.07);
  --ring: 0 0 0 2px rgba(20,20,24,.6);

  /* Corners all but square. A radius is a soft, contemporary, app-shaped
     signal, and this page is asking to read as a document. */
  --r-1: 2px;
  --r-2: 3px;
  --r-3: 4px;
  --r-md: 2px;

  /* One substitution turns the page serif. --font-serif is deliberately left
     alone so the H1 keeps Instrument Serif and the site keeps its voice. */
  --font-sans:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  /* Optical sizing and a hair of extra letter-spacing: Source Serif tightens up
     at small optical sizes, and a long list of titles reads better slightly
     opened out. */
  font-optical-sizing: auto;
}

/* ---------- the page's own frame ---------- */
body[data-page="matches"] .page-intro { border-bottom-color: var(--hairline); }
/* One serif, not two. Instrument Serif is a high-contrast modern and Source
   Serif a transitional; side by side at the top of the page they read as two
   different documents. The page keeps the text serif and takes the size up
   instead — a display face is not the only way to make a title carry. */
body[data-page="matches"] .page-intro h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  letter-spacing: -0.018em;
  color: var(--ink);
}
body[data-page="matches"] .page-intro__lede {
  font-size: 1.14rem; line-height: 1.62; color: var(--text);
}
/* The editor narrows and the list widens. Serif titles set at 1.28rem want
   more line than the sans did — at the old column width the longest NIH names
   broke to three lines and the ranked column read as a narrow gutter beside a
   wide form. Widened again from 21rem: the describe box is the one field this
   page is built on, and at 21rem a pasted abstract came back as a column of
   four-word lines you could not reread. The list still gets the larger half.
   At 23rem inside the old 1020px page the box was still ~19rem of text, and
   the table beside it clipped its own deadline column. The page is 1200px
   now and the rail scales from 23rem to 28rem with it, so a mid-width window
   doesn't take that space out of the list. */
body[data-page="matches"] .matches-wrap {
  grid-template-columns: minmax(0, clamp(23rem, 39%, 28rem)) minmax(0, 1fr);
  gap: 2.6rem;
  padding-top: 2.6rem;
}
@media (max-width: 900px) {
  body[data-page="matches"] .matches-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the list ---------- */
body[data-page="matches"] .mc-head { margin-bottom: .8rem; }
body[data-page="matches"] .mc-count { font-size: .95rem; font-weight: 400; }
body[data-page="matches"] .mc-sort { background: none; padding: 0; gap: .1rem; }
body[data-page="matches"] .mc-sort-btn { font-size: .85rem; font-weight: 400; padding: .2rem .5rem; }
/* The chosen sort is underlined, not boxed. */
body[data-page="matches"] .mc-sort-btn.is-on {
  background: none; box-shadow: none; color: var(--ink); font-weight: 600;
  border-bottom: 1px solid var(--ink); border-radius: 0;
}
body[data-page="matches"] .mc-toggle { font-size: .85rem; font-weight: 400; }
body[data-page="matches"] .mc-cov { font-size: .8rem; font-weight: 400; }
body[data-page="matches"] .mc-cov-n { font-weight: 600; color: var(--ink); }

/* The rank sits under the status pill now, in the same sans the rest of this
   page's chrome uses — a folio number, not a badge. */
body[data-page="matches"] .mc-rank {
  font-family: var(--font-sans);
  font-size: .95rem; font-weight: 300;
  letter-spacing: .05em;
  font-variant-numeric: oldstyle-nums tabular-nums;
  color: var(--muted); opacity: 1;
}
body[data-page="matches"] .mc-row--strong .mc-rank { color: var(--ink); }

/* ---------- the profile column ---------- */
body[data-page="matches"] .match-profile {
  background: none; border: 0; border-right: 1px solid var(--hairline);
  border-radius: 0;
  padding: .15rem 2rem .15rem 0;
}
@media (max-width: 900px) {
  body[data-page="matches"] .match-profile {
    border-right: 0; border-top: 1px solid var(--hairline);
    padding: 1.6rem 0 0;
  }
}
body[data-page="matches"] .mp-head h2 { font-size: 1.22rem; font-weight: 400; }
body[data-page="matches"] .mp-note { font-size: .8rem; font-weight: 400; }
body[data-page="matches"] .mp-hint { font-size: .875rem; line-height: 1.6; }
body[data-page="matches"] .mp-textarea, body[data-page="matches"] .mp-kw-add input {
  background: var(--surface); border-color: var(--line); border-radius: 2px;
  font-size: .95rem;
}
/* The describe card and its textarea were two frames around one field, each
   with its own inset. The card is the frame now: the textarea runs edge to
   edge between two rules, and the card takes the focus. */
body[data-page="matches"] .mp-sec-body > .mp-textarea {
  width: calc(100% + 1.6rem); margin: 0 -.8rem;
  border-width: 1px 0; border-radius: 0;
  padding: .75rem .8rem;
  background: var(--surface-warm);
}
body[data-page="matches"] .mp-sec-body > .mp-textarea:focus { border-color: var(--line); box-shadow: none; }
body[data-page="matches"] .mp-sec:has(> .mp-sec-body > .mp-textarea:focus) {
  border-color: var(--brand); box-shadow: var(--ring);
}
body[data-page="matches"] .mp-domain {
  background: none; border: 1px solid var(--line-2); color: var(--muted);
  font-size: .875rem; font-weight: 400; padding: .26rem .55rem; border-radius: 2px;
}
body[data-page="matches"] .mp-domain:hover { background: var(--surface); color: var(--ink); border-color: var(--line); }
body[data-page="matches"] .mp-domain.is-on {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 400;
}
body[data-page="matches"] .mp-chip {
  background: none; border: 1px solid var(--line); color: var(--text);
  font-size: .875rem; font-weight: 400; border-radius: 2px;
}
body[data-page="matches"] .mp-chip .mp-reach { font-size: .78rem; }
body[data-page="matches"] .mp-sug, body[data-page="matches"] .mp-btn,
body[data-page="matches"] .mp-btn--go {
  font-size: .875rem; font-weight: 400; border-radius: 2px;
}
/* `color` as well as `background`, because .mp-btn is declared AFTER
   .mp-btn--go at the same specificity and has been quietly winning both ever
   since: the "primary" button has never rendered as primary anywhere. Setting
   only the background here turned it black-on-black, which is how the older bug
   finally became visible. */
body[data-page="matches"] .mp-btn--go {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
body[data-page="matches"] .mp-btn--go:hover { background: var(--brand-600); border-color: var(--brand-600); }
body[data-page="matches"] .mp-suggest-label {
  font-size: .705rem; font-weight: 400; letter-spacing: .16em;
}
body[data-page="matches"] .matches-jump { font-size: .9rem; font-weight: 400; }

/* ---------- header and footer follow the page ---------- */
body[data-page="matches"] .site-header { background: var(--paper); border-bottom-color: var(--hairline); }
body[data-page="matches"] .site-footer { background: var(--paper); border-top-color: var(--hairline); }


/* ============================================================
   Descriptions — the sponsor's own words, in the list and on the detail page
   ============================================================ */
/* One or two lines under a title saying what the award is for. Clamped, so a
   long sentence never changes the rhythm of the table; the full text is one
   click away on the detail page. */
#panel-grants .grants-uswds .gt-summary {
  margin: .4rem 0 0;
  max-width: 64ch;
  font-size: .93rem;
  line-height: 1.45;
  color: #3a3a35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#panel-grants .grants-uswds .gt-summary--none {
  color: #8a877c;
  font-style: italic;
}
@media (max-width: 720px) {
  #panel-grants .grants-uswds .gt-summary { -webkit-line-clamp: 4; }
}

/* The detail page: the description sits directly under the title, before
   "Can I apply?", because what an award is for is the question everything
   else on the page qualifies. Long texts open collapsed behind a fade. */
.grant-desc { margin: 4px 0 20px; }
.grant-desc__body { position: relative; max-width: 74ch; }
.grant-desc__body p { margin: 0 0 .75em; }
.grant-desc__body p:last-child { margin-bottom: 0; }
.grant-desc__body--collapsed {
  max-height: 10.2em;
  overflow: hidden;
}
.grant-desc__body--collapsed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.2em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface, #fff));
  pointer-events: none;
}
.grant-desc__toggle {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.grant-desc__toggle:hover { color: var(--accent-deep); }
.grant-desc__toggle:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 3px; }
.grant-desc__src {
  margin: 8px 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}
.grant-desc__src a { color: var(--accent); }
.grant-desc__none { color: var(--text-muted); font-style: italic; }

/* Matches: the same line under each card's title, so a reader can judge a
   ranked grant without leaving the list. */
.mc-summary {
  margin: .45rem 0 0;
  max-width: 64ch;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-page="matches"] .mc-summary { font-size: .95rem; color: var(--text); }

/* ---- Profile center (profile.html) ---- */
.profile-center { padding-top: 1.75rem; padding-bottom: 3rem; }
.pc-loading { color: var(--faint); font-size: .9rem; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1.25rem; align-items: start; }
.pc-card {
  background: var(--surface-warm);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: 1.25rem 1.2rem 1.1rem;
}
.pc-card--signin { max-width: 520px; }
.pc-card--signin h2 { margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ink); }
.pc-status { margin: 0 0 .9rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.pc-status.is-error { color: #a8534a; }
.pc-list { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.pc-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem .8rem;
  padding: .6rem .75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1);
}
.pc-row.is-active { border-color: var(--brand-line); background: var(--brand-soft); }
.pc-row-main { flex: 1 1 14rem; min-width: 0; }
.pc-name {
  width: 100%; border: 1px solid transparent; border-radius: var(--r-1); background: transparent;
  padding: .15rem .3rem; margin-left: -.3rem;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.pc-name:hover { border-color: var(--line); background: var(--surface); }
.pc-name:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: var(--ring); }
.pc-file { font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.pc-file:hover { color: var(--brand-dark); text-decoration: underline; }
.pc-meta { margin-top: .15rem; font-size: .74rem; color: var(--muted); }
.pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.pc-badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--brand-dark); padding: .3rem .1rem;
}
.pc-unsaved {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .6rem 0; padding: .6rem .75rem;
  font-size: .82rem; color: var(--text);
  background: var(--surface); border: 1px dashed var(--brand-line); border-radius: var(--r-1);
}
.pc-upload { position: relative; overflow: hidden; }
.pc-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pc-upload:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.pc-actions .mp-btn, .pc-unsaved .mp-btn { display: inline-flex; align-items: center; text-decoration: none; line-height: 1.2; }