/* Open America — Explorer page (/demo/) */

.explorer-hero {
  background: linear-gradient(180deg, var(--ink-50) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--ink-200);
  padding: var(--sp-10) 0 var(--sp-6);
}

.tab-bar {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--ink-200);
  margin-top: var(--sp-6);
  overflow-x: auto;
}
.tablink {
  background: transparent;
  color: var(--ink-600);
  border: none;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
}
.tablink:hover { color: var(--ink-900); }
.tablink.active-tab {
  color: var(--civic-blue);
  border-bottom-color: var(--civic-blue);
}

.tabcontent {
  /* Was display: none with JS-driven visibility; tabs are now
     server-rendered (only the active partial is in the DOM at all)
     so the wrapper just needs to display normally. The classname is
     kept because nested rules (.tabcontent h2, .tabcontent h3, etc.)
     downstream still target it. */
  display: block;
  padding: var(--sp-6) 0;
}

/* ---------- Search-tab hero row (UX, 2026-06-12) ----------
   The q input is the explore page's primary control: full-width and
   visibly a SEARCH BOX (inline icon, large type), with the button
   beside it and the party/state/policy refinements demoted to a
   second row. Before this it was one of four equal boxes in the
   filter bar, below two chamber-composition charts — invisible. */
.search-hero-row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
  margin-bottom: var(--sp-2);
}
.search-hero-input {
  position: relative;
  flex: 1;
}
.search-hero-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400, #9CA3AF);
  pointer-events: none;
}
.search-hero-input input[type="search"] {
  width: 100%;
  border: 1px solid var(--ink-300);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink-900);
}
.search-hero-input input[type="search"]:focus {
  outline: none;
  border-color: var(--civic-blue);
  box-shadow: var(--shadow-glow-blue);
}
.search-hero-row .oa-search-btn {
  background: var(--civic-blue);
  color: var(--paper);
  border: none;
  border-radius: var(--r-md);
  padding: 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}
.search-hero-row .oa-search-btn:hover { background: var(--civic-blue-hover); }
.search-hero-filters {
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  margin-bottom: var(--sp-4);
}
.search-hero-filters select { flex: 0 1 auto; }
@media (max-width: 640px) {
  .search-hero-row { flex-direction: column; }
  .search-hero-row .oa-search-btn { padding: var(--sp-2) var(--sp-4); }
}

/* Filter/search row */
.filter-bar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.filter-bar input,
.filter-bar select {
  border: 1px solid var(--ink-300);
  border-radius: var(--r-md);
  padding: 8px var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: var(--paper);
  color: var(--ink-900);
  flex: 1;
  min-width: 160px;
}
.filter-bar input { min-width: 240px; }
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--civic-blue);
  box-shadow: var(--shadow-glow-blue);
}
.filter-bar button {
  background: var(--civic-blue);
  color: var(--paper);
  border: none;
  padding: 8px var(--sp-4);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.filter-bar button:hover { background: var(--civic-blue-hover); }

/* Quick filter chips */
.chip-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
/* Canonical filter-chip spec — shared by .chip / .list-chip / .mf-chip
   (4px 12px, weight 700, ink-300 border, --r-full). Kept in sync so the
   same control reads identically across the index, list, and vote pages.
   (.pill is the separate uppercase status badge, not a filter chip.) */
.chip {
  background: var(--paper);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { background: var(--ink-100); }
.chip.active { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }

/* Members grid */
.members-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.member-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
  transition: all var(--t-base) var(--ease);
  text-decoration: none;
  color: var(--ink-900);
  display: block;
}
.member-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
  text-decoration: none;
}
.member-card img,
.member-card .avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--sp-3);
  border: 3px solid var(--ink-100);
}
.member-card .avatar-placeholder {
  background: var(--ink-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
  font-size: 24px;
}
.member-card h4,
.member-card .member-card-name {
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-2);
  color: var(--ink-900);
  font-weight: 700;
}
.member-card .meta {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.member-card .bioguide {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin-bottom: var(--sp-3);
}
/* Card CTA — quiet teal arrow-link, matching .cmt-card-cta on committee
   cards so both card grids share one affordance (the whole card is the
   link; this span is just the cue). Was a heavy dark pill button. */
.member-card .btn {
  background: none;
  color: var(--civic-blue);
  border: none;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  transition: color var(--t-fast) var(--ease);
}
.member-card .btn:hover { color: var(--civic-blue-hover); }

/* Bills table */
.bills-table-wrap {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  /* overflow-x: auto (not hidden) so a wide table scrolls horizontally on
     a narrow viewport instead of clipping. This also unblocks theme.css's
     identical safety-net rule, which this declaration used to override
     because congress_index.css loads later at equal specificity. */
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

/* Pagination */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
}
.pagination-btn {
  background: var(--paper);
  color: var(--ink-700);
  border: 1px solid var(--ink-300);
  padding: 8px var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.pagination-btn:hover {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
.pagination-controls span { color: var(--ink-500); font-size: var(--fs-sm); }

/* Section headings inside tabs */
.tabcontent h2, .tabcontent h3 {
  color: var(--ink-900);
}

/* Feature-unavailable inside committees tab */
.feature-unavailable {
  background: var(--paper);
  border: 1px dashed var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
}
.feature-unavailable h1 {
  font-size: var(--fs-xl);
  color: var(--ink-700);
}
.feature-unavailable p { color: var(--ink-500); }

/* ---------- Committees tab ---------- */
.cmt-chamber { margin-bottom: var(--sp-6); }
.cmt-chamber-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--civic-blue);
}
.cmt-chamber-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink-900);
}
.cmt-chamber-title i { font-size: 1.2em; }
.cmt-icon-house  { color: #1d4ed8; }
.cmt-icon-senate { color: #b91c1c; }
.cmt-icon-joint  { color: #7c3aed; }
.cmt-chamber-count {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.cmt-grid {
  display: grid;
  /* min(100%, 320px): the 320px min track would otherwise exceed the
     ~328px content box on a 360px phone and force horizontal scroll. The
     min(100%, …) wrapper caps a single column at the container width. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-3);
}

.cmt-card {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--t-fast) var(--ease);
}
.cmt-card:hover {
  border-color: var(--civic-blue);
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.08);
}

/* Primary card area is a clickable link */
.cmt-card-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
}
.cmt-card-link:hover { text-decoration: none; color: inherit; }

.cmt-card-main { flex: 1; min-width: 0; }
.cmt-card-name {
  font-weight: 700;
  color: var(--ink-900);
  font-size: var(--fs-md);
  line-height: 1.3;
  margin-bottom: var(--sp-2);
}
.cmt-card-link:hover .cmt-card-name { color: var(--civic-blue); }
.cmt-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
}

.cmt-tag {
  display: inline-flex;
  align-items: center;
  background: var(--ink-100);
  color: var(--ink-700);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cmt-tag-blue  { background: rgba(29, 78, 216, 0.12); color: #1d4ed8; }
.cmt-tag-amber { background: rgba(245, 158, 11, 0.15); color: #92400e; }

/* Dark-mode tuning: the deep chamber/tag colors (royal blue, brick red,
   royal purple, dark amber) drop below AA against the dark card surface.
   Lift to lighter variants that pass on var(--paper) in dark mode. */
[data-theme="dark"] .cmt-icon-house  { color: #60A5FA; }
[data-theme="dark"] .cmt-icon-senate { color: #F87171; }
[data-theme="dark"] .cmt-icon-joint  { color: #A78BFA; }
[data-theme="dark"] .cmt-tag-blue   { color: #93C5FD; background: rgba(96, 165, 250, 0.16); }
[data-theme="dark"] .cmt-tag-amber  { color: #FCD34D; background: rgba(245, 158, 11, 0.18); }

.cmt-card-cta {
  color: var(--civic-blue);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmt-card-cta i {
  margin-left: 4px;
  transition: transform var(--t-fast) var(--ease);
}
.cmt-card-link:hover .cmt-card-cta i { transform: translateX(3px); }

/* Subcommittee drawer (separate from the main link so it doesn't break the click target) */
.cmt-subdrawer { border-top: 1px solid var(--ink-200); }
.cmt-subdrawer summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--civic-blue);
  background: var(--ink-50);
}
.cmt-subdrawer summary::-webkit-details-marker,
.cmt-subdrawer summary::marker { display: none; }
.cmt-subdrawer summary i {
  margin-left: auto;
  transition: transform var(--t-fast) var(--ease);
}
.cmt-subdrawer[open] summary i { transform: rotate(180deg); }
.cmt-card-toggle-hide { display: none; }
.cmt-subdrawer[open] .cmt-card-toggle-show { display: none; }
.cmt-subdrawer[open] .cmt-card-toggle-hide { display: inline; }

.cmt-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--ink-50);
}
.cmt-sublist li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  border-top: 1px solid var(--ink-100);
}
.cmt-sub-bullet { color: var(--civic-blue); font-weight: 700; }
.cmt-sub-name {
  flex: 1;
  color: var(--ink-800);
  text-decoration: none;
}
.cmt-sub-name:hover { color: var(--civic-blue); text-decoration: underline; }

/* Mobile */
@media (max-width: 768px) {
  .filter-bar input,
  .filter-bar select { min-width: 100%; flex: 1 1 100%; }
  .members-container { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ---------- Search loading state ---------- */
.oa-search-btn { position: relative; }
.oa-search-btn-spinner { display: none; }
.oa-search-form.is-loading .oa-search-btn-label { display: none; }
.oa-search-form.is-loading .oa-search-btn-spinner { display: inline-flex; align-items: center; gap: 6px; }
.oa-search-form.is-loading .oa-search-btn,
.oa-search-form.is-loading input,
.oa-search-form.is-loading select {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

/* The global navigation shimmer lives in theme.css now — see base.html.
   This file keeps only the search-form-specific button spinner styles above. */

/* ---------- Party balance card (explorer hero) ---------- */
.party-balance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.party-balance-chamber {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-900);
}
.party-balance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.party-balance-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--ink-100);
}
.party-balance-seg { display: block; height: 100%; }
.party-balance-seg.party-D { background: var(--party-D); }
.party-balance-seg.party-R { background: var(--party-R); }
.party-balance-seg.party-I { background: var(--party-I); }
.party-balance-seg.party-V { background: var(--ink-300, #D1D5DB); }
.party-balance-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.party-balance-counts .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.party-balance-counts .dot-D { background: var(--party-D); }
.party-balance-counts .dot-R { background: var(--party-R); }
.party-balance-counts .dot-I { background: var(--party-I); }
.party-balance-counts .dot-V { background: var(--ink-300, #D1D5DB); }
@media (max-width: 640px) {
  .party-balance { grid-template-columns: 1fr; }
}

/* ---------- Live now in Congress (explorer hero) ---------- */
.live-now {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.live-now-card {
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--ink-900);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.live-now-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.live-now-value {
  font-size: var(--fs-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.live-now-value .live-dot.is-live {
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
}
.live-now-sub {
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

/* Stale / unreachable indicator on the live-now card.
   Surfaces the diagnostic ChamberState (STALE_DATA / UNREACHABLE)
   without dragging the public-facing label out of its 4-state vocab.
   Yellow accent border + small warning chip — quiet enough that fresh
   cards don't look error-y, loud enough that an operator notices the
   chamber state is uncertain. */
.live-now-card.is-stale,
.live-now-card.is-unreachable {
  border-color: rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, var(--paper) 60%);
}
.live-now-card.is-unreachable {
  border-color: rgba(220, 38, 38, 0.35);
}
.live-now-staleness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: rgba(212, 175, 55, 0.16);
  color: #92400E;
  margin-left: 6px;
  vertical-align: middle;
}
.live-now-card.is-unreachable .live-now-staleness {
  background: rgba(220, 38, 38, 0.12);
  color: #991B1B;
}
[data-theme="dark"] .live-now-staleness { color: var(--civic-amber); }
[data-theme="dark"] .live-now-card.is-unreachable .live-now-staleness { color: #FCA5A5; }

/* ---- Live floor / chamber-active CTA buttons --------------------------
   Rendered above the chamber status cards when at least one chamber is
   in session and not pro forma. Red because "live action happening now"
   reads instantly. See the conditional render in congress/index.html. */
.live-chamber-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: var(--sp-4) 0 var(--sp-3);
}
.live-chamber-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.94rem;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.live-chamber-btn:hover,
.live-chamber-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
  color: #fff;
  text-decoration: none;
}
.live-chamber-btn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.95);
  animation: live-chamber-pulse 1.4s ease-in-out infinite;
}
.live-chamber-btn-ext {
  font-size: 0.78em;
  opacity: 0.85;
}
@keyframes live-chamber-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .live-chamber-btn-dot { animation: none; }
  .live-chamber-btn:hover,
  .live-chamber-btn:focus-visible { transform: none; }
}

.index-hero-title {
  margin: var(--sp-1) 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.index-hero-lead {
  font-size: var(--fs-md);
  max-width: 640px;
}
.index-link-inherit { color: inherit; }
.index-section-band {
  background: var(--ink-50);
  border-top: 1px solid var(--ink-200);
}
.index-bill-row {
  gap: var(--sp-3);
}
.index-bill-row-main {
  flex: 1;
  min-width: 0;
}
.index-bill-row-title {
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.search-tab-section-title { margin-bottom: var(--sp-3); }
.search-tab-section-title h3 { font-size: var(--fs-lg); }
.search-tab-empty {
  grid-column: 1 / -1;
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-500);
}
.search-tab-empty--center {
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-500);
}
.search-tab-hero {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  text-align: center;
}
.search-tab-hero .fa { color: var(--ink-300); }
.search-tab-hero-title {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--ink-700);
}

.tab-empty-padded {
  padding: var(--sp-12);
  text-align: center;
}
.tab-empty-padded--grid {
  grid-column: 1 / -1;
  padding: var(--sp-12);
  text-align: center;
}