/* =============================================================================
   PERCH COMPONENT LIBRARY
   -----------------------------------------------------------------------------
   Single source of truth for reusable UI elements. Loaded AFTER perch.css so
   component rules win on conflict. When you need to change how a topic pill,
   sentiment badge, or toggle tab looks, edit it here once.

   Each component documents all states it supports:
     default · :hover · :focus · .active · :disabled / .is-disabled · .is-loading
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOPIC PILLS — clickable scaled-by-count tags ('Medicaid · 12')
   -------------------------------------------------------------------------- */

.perch-topic-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--exec-cream);
  border: 1px solid var(--exec-line);
  color: var(--exec-ink);
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.perch-topic-pill:hover {
  background: var(--exec-gold-soft);
  border-color: var(--exec-gold);
  color: var(--exec-navy);
  text-decoration: none;
}
.perch-topic-pill:focus-visible {
  outline: 2px solid var(--exec-gold);
  outline-offset: 2px;
}
.perch-topic-pill.is-disabled,
.perch-topic-pill[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.perch-topic-pill-xs { font-size: 0.78rem; opacity: 0.65; padding: 3px 9px; }
.perch-topic-pill-sm { font-size: 0.92rem; opacity: 0.80; }
.perch-topic-pill-md { font-size: 1.05rem; opacity: 0.92; }
.perch-topic-pill-lg { font-size: 1.22rem; opacity: 1.00; padding: 5px 13px; }
.perch-topic-pill-xl { font-size: 1.45rem; opacity: 1.00; padding: 6px 15px; font-weight: 600; }
.perch-topic-pill-gold {
  background: var(--exec-gold-soft);
  border-color: var(--exec-gold);
  color: var(--exec-navy);
}
.perch-topic-pill-gold:hover {
  background: var(--exec-gold);
  color: var(--exec-navy);
}


/* -----------------------------------------------------------------------------
   2. SIGNAL STRENGTH DOTS — 4 dots, filled count = strength
   -------------------------------------------------------------------------- */

.perch-signal-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.perch-signal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b8b1a0;
  border: 1px solid #8c8474;
  box-sizing: border-box;
}
.perch-signal-do .perch-signal-dot.filled {
  background: var(--exec-gold);
  border-color: var(--exec-gold);
}
.perch-signal-dont .perch-signal-dot.filled {
  background: #9b2c2c;
  border-color: #9b2c2c;
}


/* -----------------------------------------------------------------------------
   3. SENTIMENT BADGES — color-coded position indicators
   -------------------------------------------------------------------------- */

.perch-witness-pos,
.perch-sentiment-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 2px;
  background: var(--exec-line);
  color: var(--exec-navy);
}
.perch-witness-pos.sent-support,     .perch-sentiment-badge.sent-support     { background: #d4ebd6; color: #1f5a2a; }
.perch-witness-pos.sent-oppose,      .perch-sentiment-badge.sent-oppose      { background: #f5d4d4; color: #872929; }
.perch-witness-pos.sent-neutral,     .perch-sentiment-badge.sent-neutral     { background: #e8e6dd; color: #5a5a5a; }
.perch-witness-pos.sent-questioning, .perch-sentiment-badge.sent-questioning { background: #e1ecfb; color: #1f4ea1; }


/* -----------------------------------------------------------------------------
   3-1. FILED LEGISLATION — in-page search bar
   -------------------------------------------------------------------------- */

.perch-filed-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 14px;
}
.perch-filed-search-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--exec-line);
  border-radius: 3px;
  background: #fff;
}
.perch-filed-search-input:focus {
  outline: none;
  border-color: var(--exec-navy);
}
.perch-filed-search-meta {
  font-size: 11px;
  white-space: nowrap;
}
.perch-filed-empty,
.perch-filed-helper {
  padding: 10px 0;
  font-size: 13px;
}
.perch-filed-helper {
  font-style: italic;
}


/* -----------------------------------------------------------------------------
   3-2. LEGISLATOR BRIEFING — top-of-Briefing tailored briefing search
   -------------------------------------------------------------------------- */

.perch-leg-briefing-search-panel {
  margin-bottom: 22px;
}
.perch-leg-briefing-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.perch-leg-briefing-search-row input[type="search"] {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--exec-line);
  border-radius: 3px;
}
.perch-leg-briefing-search-row input[type="search"]:focus {
  outline: none;
  border-color: var(--exec-navy);
}
.perch-leg-briefing-tailored {
  margin-top: 18px;
}


/* -----------------------------------------------------------------------------
   3-3a. COMMITTEE V3 — cream background + three-zone editorial layout.
   Matches the homepage (.perch-home-v3) treatment so the brand reads the
   same across landing → committee. Member profile keeps its own constraints.
   -------------------------------------------------------------------------- */

body:has(.perch-cmte-v3) {
  background: #F5F0E8;
}
body:has(.perch-cmte-v3) .perch-main {
  background: #F5F0E8;
}
.perch-cmte-v3 {
  font-family: var(--sans);
  color: var(--exec-navy);
}
.perch-cmte-v3 .perch-cmte-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--exec-line);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.perch-cmte-v3 .perch-cmte-header-main h1 {
  font-family: var(--display);
  font-size: 42px;
  letter-spacing: 1px;
  color: var(--exec-navy);
  margin: 0;
}
.perch-cmte-v3 .perch-cmte-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.perch-cmte-v3 .perch-cmte-meta > span { margin-right: 6px; }


/* -----------------------------------------------------------------------------
   3-3. ZONES — three-zone legislator profile
   -------------------------------------------------------------------------- */

.perch-zone-search {
  margin: 0 0 18px;
}
.perch-zone-record {
  margin-bottom: 14px;
}
.perch-zone-context {
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--exec-line);
}
.perch-zone-context > .perch-zone-context-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--exec-navy);
  user-select: none;
}
.perch-zone-context > .perch-zone-context-summary::-webkit-details-marker { display: none; }
.perch-zone-context > .perch-zone-context-summary::marker { content: ''; }
.perch-zone-context > .perch-zone-context-summary:hover { text-decoration: underline; }
.perch-zone-context[open] > .perch-zone-context-summary {
  margin-bottom: 8px;
}
.perch-zone-context[open] > .perch-zone-context-summary::after {
  content: ' ↓';
}
.perch-zone-context > *:not(.perch-zone-context-summary) {
  margin-bottom: 14px;
}


/* -----------------------------------------------------------------------------
   3a. WHO TESTIFIED — witness org rollups (legislator briefing + committee)
   -------------------------------------------------------------------------- */

.perch-testifiers {
  list-style: none;
  margin: 0;
  padding: 0;
}
.perch-testifier-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-auto-rows: auto;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--exec-line);
  font-size: 13px;
}
.perch-testifier-bills {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.4;
  word-break: break-word;
}
.perch-testifier-row:last-child { border-bottom: none; }
.perch-testifier-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perch-testifier-count {
  font-size: 11px;
  white-space: nowrap;
}
.perch-cmte-witnesses {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--exec-line);
}


/* -----------------------------------------------------------------------------
   4. SIGNAL / BRIEFING TOGGLE TABS
   -------------------------------------------------------------------------- */

.perch-view-toggle {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--exec-line);
}
.perch-view-toggle-tab {
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.perch-view-toggle-tab:hover { color: var(--exec-navy); }
.perch-view-toggle-tab.active {
  color: var(--exec-navy);
  border-bottom-color: var(--exec-gold);
  font-weight: 600;
}
.perch-view-toggle-tab[aria-disabled="true"],
.perch-view-toggle-tab.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Rich toggle = name + descriptor under each tab */
.perch-view-toggle-rich .perch-view-toggle-tab {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 22px 12px;
  min-height: 60px;
  gap: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.perch-view-toggle-rich .perch-view-toggle-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.perch-view-toggle-rich .perch-view-toggle-desc {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.2px;
  font-weight: 400;
}
.perch-view-toggle-rich .perch-view-toggle-tab.active .perch-view-toggle-desc {
  color: var(--exec-navy);
}


/* -----------------------------------------------------------------------------
   5. WATCH CLIP BUTTON — gold filled CTA for USLege deep-links
   -------------------------------------------------------------------------- */

.perch-watch-clip-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--exec-gold);
  color: var(--exec-navy) !important;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid var(--exec-gold);
  transition: background 0.12s, border-color 0.12s;
  cursor: pointer;
}
.perch-watch-clip-btn:hover {
  background: var(--exec-navy);
  color: var(--exec-gold) !important;
  border-color: var(--exec-navy);
  text-decoration: none;
}
.perch-watch-clip-btn:focus-visible {
  outline: 2px solid var(--exec-navy);
  outline-offset: 2px;
}
.perch-watch-clip-btn:disabled,
.perch-watch-clip-btn.is-disabled,
.perch-watch-clip-btn[aria-disabled="true"] {
  background: var(--exec-line);
  color: var(--muted) !important;
  border-color: var(--exec-line);
  cursor: not-allowed;
  pointer-events: none;
}
.perch-watch-clip-btn.is-loading {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}


/* -----------------------------------------------------------------------------
   6. SEARCH BARS — base input + gold CTA pattern
   -------------------------------------------------------------------------- */

.perch-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--exec-line);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 14px;
  background: #fff;
  color: var(--exec-navy);
  -webkit-appearance: none;
}
.perch-input:focus {
  outline: none;
  border-color: var(--exec-gold);
  box-shadow: 0 0 0 2px var(--exec-gold-soft);
}
.perch-input:disabled,
.perch-input[aria-disabled="true"] {
  background: #f5f3ee;
  color: var(--muted);
  cursor: not-allowed;
}
.perch-input.is-loading {
  background-image: linear-gradient(90deg, transparent 50%, var(--exec-gold-soft) 75%, transparent 100%);
  background-size: 200% 100%;
  animation: perch-input-loading 1.5s linear infinite;
}
@keyframes perch-input-loading {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* Form-level loading state — applied to any form that opts in by carrying
   the .perch-search-form class. Drops a spinner inside the submit button
   and dims the input while the page transitions. Auto-applied via the
   small base.html script below. */
.perch-search-form.is-loading button[type="submit"] {
  pointer-events: none;
  cursor: progress;
}
.perch-search-form.is-loading input[type="search"],
.perch-search-form.is-loading input[type="text"] {
  background-color: #f8f6ef;
}
/* The visible spinner now lives in the .perch-search-spinner element
   injected by base.html's loader script directly after the submit button
   (so it appears "next to" the button, not inside it). The CSS that
   shows it is in perch.css under "LOADING INDICATORS". */
@keyframes perch-spin {
  to { transform: rotate(360deg); }
}


/* -----------------------------------------------------------------------------
   7. MEMBER CARDS — consistent legislator tile across grid + directory
   -------------------------------------------------------------------------- */

.perch-leg-card {}
.perch-leg-card-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--exec-line);
  border-left: 3px solid var(--exec-navy);
  border-radius: 4px;
  text-decoration: none;
  color: var(--exec-navy);
}
.perch-leg-card-link:hover {
  background: var(--exec-gold-soft);
  border-left-color: var(--exec-gold);
}
.perch-leg-card-name { font-family: var(--sans); font-weight: 600; font-size: 18px; line-height: 1.2; }
.perch-leg-card-meta { font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--exec-navy); font-weight: 500; }
.perch-leg-card-count { font-size: 11px; letter-spacing: 0.5px; margin-top: 2px; color: var(--muted); font-weight: 400; }

/* Directory variant — used on /app/legislators */
.perch-leg-dir-link {
  display: block;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--exec-line);
  border-top: 3px solid var(--exec-navy);
  border-radius: 4px;
  text-decoration: none;
  color: var(--exec-navy);
}
.perch-leg-dir-link:hover {
  background: var(--exec-gold-soft);
  border-top-color: var(--exec-gold);
}
.perch-leg-dir-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.perch-leg-dir-chamber {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.perch-leg-dir-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: var(--exec-navy);
}
.perch-leg-dir-card .perch-leg-dir-district {
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-top: 4px;
  color: var(--exec-navy);
  font-weight: 500;
}


/* -----------------------------------------------------------------------------
   8. SESSION / CHAMBER PILL TABS
   -------------------------------------------------------------------------- */

.perch-chamber-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
}
.perch-chamber-tab {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--exec-line);
  border-radius: 3px;
}
.perch-chamber-tab:hover {
  color: var(--exec-navy);
  border-color: var(--exec-navy);
}
.perch-chamber-tab.active {
  background: var(--exec-navy);
  color: #fff;
  border-color: var(--exec-navy);
}
.perch-chamber-tab[aria-disabled="true"],
.perch-chamber-tab.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.perch-chamber-tabs-large { gap: 6px; margin-bottom: 18px; }
.perch-chamber-tabs-large .perch-chamber-tab {
  padding: 10px 22px;
  font-size: 14px;
  letter-spacing: 1.4px;
}
.perch-chamber-tab-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  background: rgba(255,255,255,0.18);
  border-radius: 9px;
}
.perch-chamber-tab:not(.active) .perch-chamber-tab-count {
  background: var(--exec-line);
  color: var(--muted);
}