/*

 */

:root {
  --color-forest: #2C4A3E;
  --color-sage:   #7B9E87;
  --color-amber:  #E8B86D;
  --color-cream:  #F8F6F1;
  --color-card:   #F2EDE4;
  --color-chestnut: #5C3D2E;
  --color-white:  #ffffff;
}

/* Typography */
.font-serif { font-family: 'Lora', serif; }
.font-sans  { font-family: 'Inter', sans-serif; }

/* Color utilities */
.bg-forest  { background-color: var(--color-forest); }
.bg-sage    { background-color: var(--color-sage); }
.bg-amber   { background-color: var(--color-amber); }
.bg-cream   { background-color: var(--color-cream); }
.bg-card    { background-color: var(--color-card); }
.text-forest    { color: var(--color-forest); }
.text-sage      { color: var(--color-sage); }
.text-amber     { color: var(--color-amber); }
.text-cream     { color: var(--color-cream); }
.text-chestnut  { color: var(--color-chestnut); }

/* Party avatar colors */
.avatar-dem { background-color: #ddeaf5; color: #185FA5; }
.avatar-rep { background-color: #fce8e8; color: #A32D2D; }
.avatar-ind { background-color: #e8e1f5; color: #4a3a8a; }
.avatar-grn { background-color: #e1f0e5; color: #2a6b3a; }
.avatar-lib { background-color: #fef3e2; color: #7a5a0a; }
.avatar-oth { background-color: #eeeeee; color: #555555; }

/* Card styles */
.card {
  background: var(--color-white);
  border: 0.5px solid #c5d3ce;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

/* Section label */
.section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-sage);
  margin-bottom: 0.6rem;
}

/* State pill grid */
.state-pill {
  background: white;
  border: 0.5px solid #c5d3ce;
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-forest);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
  display: block;
}
.state-pill:hover {
  background: var(--color-forest);
  color: var(--color-cream);
  border-color: var(--color-forest);
}

/* Candidate avatar */
.candidate-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lora', serif;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Vote pill (yes/no) */
.vote-pill {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}
.vote-pill-yes  { background: #e1ede8; color: #1a5c3a; }
.vote-pill-no   { background: #fce8e8; color: #8a2020; }
.vote-pill-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  opacity: 0.65;
}

/* ELI5 panel */
.eli5-panel {
  background: #fdf2df;
  border: 0.5px solid #f0d08a;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--color-chestnut);
  line-height: 1.65;
}
.eli5-eyebrow {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #b07a2a;
  margin-bottom: 5px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0.5px solid #c5d3ce;
  background: var(--color-card);
  color: var(--color-forest);
  cursor: pointer;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: background 0.12s;
}
.btn:hover { background: #e8e2d8; }
.btn-amber {
  background: var(--color-amber);
  color: var(--color-chestnut);
  border-color: var(--color-amber);
}
.btn-amber:hover { background: #d9a85a; }

/* Key dates & registration panel */
.key-dates {
  background: #fdf2df;
  border: 0.5px solid #f0d08a;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.key-dates-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #b07a2a;
  margin-bottom: 0.35rem;
}

/* Race badge */
.race-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  background: #e1ede8;
  color: var(--color-forest);
  white-space: nowrap;
}
.race-badge-measure {
  background: #fdf2df;
  color: #8a5e1a;
}

/* County button strip */
.county-btn {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 0.5px solid #c5d3ce;
  background: white;
  color: var(--color-forest);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.county-btn:hover,
.county-btn.active {
  background: var(--color-forest);
  color: var(--color-cream);
  border-color: var(--color-forest);
}

/* Incumbent badge */
.incumbent-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
  background: #fdf2df;
  color: #8a5e1a;
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #e8b86d;
  border-top-color: #5C3D2E;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }