* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f7f7f5;
  color: #202124;
}
header {
  background: #fff;
  border-bottom: 1px solid #e8eaed;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
header h1 { font-size: 18px; }
header .tagline { color: #5f6368; font-size: 12.5px; }
header .brand { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.logo-icon { width: 20px; height: 20px; align-self: center; flex-shrink: 0; }
.main-nav { display: flex; gap: 22px; flex-shrink: 0; }
.main-nav a {
  color: #5f6368; font-size: 13.5px; text-decoration: none; font-weight: 500;
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.main-nav a.active { color: #202124; font-weight: 700; border-bottom-color: #1a73e8; }
.main-nav a:hover { color: #202124; }
@media (max-width: 860px) { .main-nav { display: none; } }
#search-box {
  width: 280px;
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 20px;
  font-size: 13.5px;
  outline: none;
}
#search-box:focus { border-color: #1a73e8; }
#search-results {
  position: absolute;
  top: 52px;
  right: 32px;
  width: 280px;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 340px;
  overflow-y: auto;
  display: none;
  z-index: 30;
}
#search-results .result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13.5px;
}
#search-results .result:hover { background: #f1f3f4; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 32px 60px; }
/* Reserves enough scroll room below the last section so it can always be
   scrolled up to the same position as any other section -- without this,
   jumping to the last stat category stops at the bottom of the page with
   its title still hidden under the sticky header, since there's nothing
   left to scroll past. */
#sections { padding-bottom: 85vh; }

/* One continuous card: gradient hero section on top, white stats bar
   directly below, sharing a single outer border/radius instead of two
   separate boxes with a gap -- matches the reference exactly. */
.issue-card {
  border: 1px solid #d2e3fc;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 28px;
}
.issue-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg,#eef4fb,#f3f7fc);
  padding: 16px 24px;
  min-height: 130px;
  display: flex; align-items: center;
}
.issue-banner-text { position: relative; z-index: 2; min-width: 0; max-width: 56%; }
.issue-banner h2 { font-size: 20px; margin-bottom: 4px; }
.issue-banner p { color: #444; font-size: 13.5px; }
/* Top-aligned and bled off the right edge (cropped by the banner's own
   overflow:hidden) so it sits flush against the top of the banner instead
   of centered with visible empty gradient space above it. */
.issue-banner-art {
  position: absolute; z-index: 1;
  right: -30px; top: -10px;
  height: 125%; width: auto;
}
@media (max-width: 720px) { .issue-banner-art { display: none; } .issue-banner-text { max-width: 100%; } }

.stats-row {
  display: flex; background: #fff; border-top: 1px solid #e8eaed;
}
.stat-card {
  flex: 1; min-width: 150px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; cursor: pointer;
  border-right: 1px solid #eee;
  white-space: nowrap;
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: #fafbfc; }
.stat-card .icon { font-size: 22px; flex-shrink: 0; }
.stat-card .n { font-size: 21px; font-weight: 800; line-height: 1.1; }
.stat-card .l { font-size: 12px; color: #5f6368; white-space: nowrap; }

/* Matches the sticky header's real height + breathing room, so clicking a
   stat card and jumping here via scrollIntoView doesn't land with the
   section title hidden behind the sticky header. */
section[id^="sec-"] { scroll-margin-top: 76px; }

.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 30px 0 14px;
}
.section-header .title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-header a { color: #1a73e8; font-size: 13px; text-decoration: none; cursor: pointer; }
.section-header a:hover { text-decoration: underline; }

/* Homepage top-picks: fixed 5 columns so 5 cards always fill exactly one
   row -- an auto-fill grid would compute a different column count per
   screen width and leave a mostly-empty trailing row. */
.people-grid-fixed5 {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* Category "View all" page: variable count, so responsive auto-fill is fine. */
.people-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Generic circular avatar -- used by the search dropdown and the detail
   panel. Overridden to a large rectangular photo specifically inside
   .person-card (see below), where it's the dominant visual element. */
.avatar {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
}
.person-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8eaed; border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s;
}
.person-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); transform: translateY(-2px); }
.person-card .avatar {
  width: 100%; height: 144px; border-radius: 0;
  font-size: 30px;
}
.person-card .card-body { padding: 12px 14px 14px; }
.person-card .name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.person-card .handle { font-size: 12px; color: #5f6368; margin-top: 2px; }
.person-card .followers { font-size: 12px; color: #5f6368; margin-top: 3px; }
.verified { color: #1a73e8; }

.empty-msg { color: #5f6368; font-size: 13px; padding: 20px 0; }

/* Category (view all) page */
#category-view { display: none; }
.breadcrumb { font-size: 12.5px; color: #5f6368; margin-bottom: 14px; }
.breadcrumb a { color: #1a73e8; cursor: pointer; text-decoration: none; }
.category-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid #eee; margin-bottom: 22px;
}
.category-header .title { font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.category-header .right { display: flex; align-items: center; gap: 16px; }
.close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: #5f6368;
}
.close-btn:hover { background: #f1f3f4; }
.scroll-hint { text-align: center; color: #9aa0a6; font-size: 12.5px; padding: 18px 0; }

/* Person modal */
#overlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,32,0.4); z-index: 40;
}
#panel {
  display: none; position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw; background: #fff; z-index: 50;
  box-shadow: -8px 0 30px rgba(0,0,0,0.15); overflow-y: auto;
}
#panel .panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 0;
}
#panel .avatar-lg { width: 131px; height: 131px; font-size: 36px; margin-bottom: 10px; }
#panel .p-name { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 5px; }
#panel .p-handle { font-size: 13px; color: #5f6368; margin: 2px 0 10px; }
.stance-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 14px;
  margin-bottom: 12px;
}
.panel-body { padding: 0 20px 24px; }
.summary-box { font-size: 13.5px; line-height: 1.5; color: #333; margin-bottom: 14px; }
.confidence-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #5f6368; margin-bottom: 20px; }
.confidence-bar { flex: 1; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.confidence-bar .fill { height: 100%; background: #34a853; }
.tweet-item { border-left: 2px solid #e8eaed; padding: 0 0 16px 14px; margin-left: 4px; position: relative; }
.tweet-item::before {
  content: ""; position: absolute; left: -5px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #1a73e8;
}
.tweet-item .meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #5f6368; margin-bottom: 4px; }
.tweet-item .mini-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.tweet-item .text { font-size: 13px; line-height: 1.45; color: #333; margin-bottom: 4px; }
.tweet-item a { font-size: 12px; color: #1a73e8; text-decoration: none; }
.tweet-item a:hover { text-decoration: underline; }
.timeline-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }