/* The @opinions selection control. Compact, and consistent with the existing
   chip vocabulary — this is a small decision inside a long answer, not a form. */
.oc-opinion-choice {
  margin: 20px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--oc-hairline, rgba(0, 0, 0, 0.08));
}

.oc-opinion-choice__prompt {
  margin: 0 0 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--oc-text-secondary, #5b5b57);
}

.oc-opinion-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-opinion-choice__option {
  appearance: none;
  border: 1px solid var(--oc-hairline-strong, rgba(0, 0, 0, 0.16));
  background: transparent;
  color: var(--oc-text-primary, #1b1b19);
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.oc-opinion-choice__option:hover:not(:disabled) {
  border-color: var(--oc-text-primary, #1b1b19);
}

.oc-opinion-choice__option:disabled {
  cursor: default;
  opacity: 0.6;
}

.oc-opinion-choice__option.is-selected {
  background: var(--oc-text-primary, #1b1b19);
  border-color: var(--oc-text-primary, #1b1b19);
  color: var(--oc-surface, #fbfaf7);
}

/* Once answered, the unchosen options stay legible rather than vanishing: the
   reader can still see what they turned down, and can still change their mind. */
.oc-opinion-choice.is-answered .oc-opinion-choice__option:not(.is-selected) {
  opacity: 0.7;
}