/* Choices: a radio group that reads as a row of options. */

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid var(--line-strong);
  border-radius: 2rem;
  cursor: pointer;
}

/* :has lets the selected pill be styled from the checked input it contains,
   with no JavaScript and no class to keep in sync from the server. */
.choice:has(input:checked) { border-color: var(--accent); color: var(--accent); }

.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }