/* 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 {
  display: none;
  padding: var(--sp-6) 0;
}

/* 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); }
.chip {
  background: var(--paper);
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
  padding: 6px var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  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 {
  font-size: var(--fs-md);
  margin: 0 0 var(--sp-2);
  color: var(--ink-900);
}
.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);
}
.member-card .btn {
  background: var(--ink-900);
  color: var(--paper);
  border: none;
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
  display: inline-block;
  transition: background var(--t-fast) var(--ease);
}
.member-card .btn:hover { background: var(--civic-blue); color: var(--paper); }

/* Bills table */
.bills-table-wrap {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  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;
  grid-template-columns: repeat(auto-fill, minmax(360px, 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-pill);
  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; }

.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);
}

/* ---- 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; }
}