svg.credits .credit.bg {
  fill: #E5E7EB;  /* gray-200 for unused spots */
}
svg.credits.credits-against .credit.foreground {
  fill: #DC2626;  /* red-600 for opposed */
}

svg.credits.credits-for .credit.foreground {
  fill: #2563EB;  /* blue-600 for remaining credits and in favor */
  transition: fill 0.2s ease-in-out;
}

.credits.credits-remaining .credit.bg {
  fill: #93C5FD;  /* blue-300 for used credits in the pool */
}

.credits.credits-remaining .credit.foreground {
  fill: #2563EB;  /* blue-600 for remaining credits */
}

.credits.credits-remaining .credit.foreground.used {
  display: none;
}

#voting [data-option-id] .vote-button .more,
#voting [data-option-id] .vote-button .fewer {
  display: none;
}

#voting [data-option-id] .vote-type-label-against,
#voting [data-option-id] .vote-type-label-for {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

#voting [data-option-id][data-state="for"] .vote-type-label-against,
#voting [data-option-id][data-state="against"] .vote-type-label-for {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#voting [data-option-id] .votes-count-label {
  display: none;
}

#voting [data-option-id] .votes-count-label .votes-suffix.plural {
  display: none;
}

#voting [data-option-id].votes-plural .votes-count-label .votes-suffix.singular {
  display: none;
}

#voting [data-option-id].votes-plural .votes-count-label .votes-suffix.plural {
  display: inline;
}

#voting [data-option-id][data-state="for"] .votes-count-label-for {
  display: inline;
}

#voting [data-option-id][data-state="against"] .votes-count-label-against {
  display: inline;
  color: red;
}

#voting [data-option-id][data-state="for"] .vote-button-for .vote {
  display: none;
}

#voting [data-option-id][data-state="for"] .vote-button-for .more {
  display: inline;
}

#voting [data-option-id][data-state="for"] .vote-button-against .vote {
  display: none;
}

#voting [data-option-id][data-state="for"] .vote-button-against .fewer {
  display: inline;
}

#voting [data-option-id][data-state="against"] .vote-button-against .vote {
  display: none;
}

#voting [data-option-id][data-state="against"] .vote-button-against .more {
  display: inline;
}

#voting [data-option-id][data-state="against"] .vote-button-for .vote {
  display: none;
}

#voting [data-option-id][data-state="against"] .vote-button-for .fewer {
  display: inline;
}

/* Button styling */
.vote-button {
  transition: all 0.2s ease-in-out;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  cursor: pointer;
}

.vote-button:hover {
  transform: scale(1.05);
}

/* Dismissable elements transitions */
#welcome-banner,
#quick-guide {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#welcome-banner.hiding,
#quick-guide.hiding {
  opacity: 0;
  transform: translateY(-10px);
}

/* Pulse animation for remaining credits */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

[data-credits="99"] {
  animation: pulse 2s infinite;
}
@font-face {
  font-family: "Aeonik";
  src: url(/fonts/landing/aeonik-medium.woff2) format("woff2"),
       url(/fonts/landing/aeonik-medium.woff) format("woff");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Aeonik";
  src: url(/fonts/landing/aeonik-black.woff2) format("woff2"),
       url(/fonts/landing/aeonik-black.woff) format("woff");
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}

body.c-questions {
  font-family: "Aeonik", system-ui, sans-serif;
  background-color: var(--color-questions-bg);
  color: var(--color-questions-ink);

  /* Aeonik Medium defaults: ss01 alternate 'a', 120% leading, no tracking */
  font-feature-settings: "ss01";
  line-height: 1.2;
  letter-spacing: 0;

  & h1 {
    /* Aeonik Black: ss01 + ss07 (alternate 'a' and 'j'), 100% leading, -1 tracking */
    font-weight: 900;
    font-feature-settings: "ss01", "ss07";
    line-height: 1;
    letter-spacing: -0.04em;
  }

  & textarea {
    border: none;
    box-shadow: none;
  }

  & textarea:focus {
    border: none;
    box-shadow: none;
  }

  & .rounded-card {
    border-radius: 28px;
  }

  & .rounded-pill {
    border-radius: 9999px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */