/* Backgrounds page (/demographics/) — was 1,490 inline style attrs
   from 12 unique strings rendered hundreds of times. Lifted into
   classes here so the rendered HTML stays clean and the surface is
   themeable (dark mode etc.). */

.bg-hero-h1     { margin: var(--sp-2) 0 var(--sp-1); }
.bg-hero-lead   { margin: 0 0 var(--sp-3); }

.bg-index-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.bg-index-pill {
  font-size: var(--fs-xs);
  text-decoration: none;
}

.bg-section {
  margin-bottom: var(--sp-5);
  scroll-margin-top: 80px;
}
.bg-section h2 {
  border-bottom: 1px solid var(--ink-200);
  padding-bottom: 6px;
  margin-bottom: var(--sp-3);
}
.bg-section-count {
  font-weight: normal;
  font-size: var(--fs-base);
}

.bg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin: 0;
}
.bg-member-card {
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--ink-300);
  border-radius: 6px;
}
.bg-member-card.party-border-R { border-left-color: var(--party-R, var(--ink-300)); }
.bg-member-card.party-border-D { border-left-color: var(--party-D, var(--ink-300)); }
.bg-member-card.party-border-I { border-left-color: var(--party-I, var(--ink-300)); }

.bg-member-meta { font-size: var(--fs-xs); }

/* Sections past 12 cards fold behind 'Show all N'; each ends with a way
   back to the category strip. */
.bg-index-strip { scroll-margin-top: 80px; }
.bg-more { margin-top: 8px; }
.bg-more > summary { list-style: none; }
.bg-more > summary::-webkit-details-marker { display: none; }
.bg-more[open] > summary { display: none; }
.bg-back { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }

/* ---- Dark-mode tuning ------------------------------------------------
   Cards use the ink/paper scale + party-token border colors that flip
   automatically with theme. The party-border default fallback
   (var(--ink-300)) reads correctly in both modes. No overrides today. */