@layer components {
  /* CHOICE PILLS — pick one of a few options, drawn as a row of pills
     (METIS-pub#540). The room editor's *Use inherited* / *Custom*, the
     Report and Bugs & Ideas forms' type and priority.

       <div class="choice-pills" role="radiogroup" aria-label="Priority">
         <label class="choice-pills__option"><input type="radio" name="p" value="low"> Low</label>
         …
       </div>

     The radio stays in the page, clipped rather than display:none, so the
     keyboard reaches the group (Tab) and the arrow keys move the choice; its
     focus rings the pill. Graduated from the room editor's `.room-choice`,
     the one copy that was tokenised and keyboard-reachable; the two report
     forms hid the radio and typed their colours by hand.

     Modifiers on an option change only its chosen colours:
       --danger   a destructive or most urgent choice (Blocker)
       --caution  costly but not destructive (High)
       --muted    the least pressing choice (Low) */
  .choice-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .choice-pills__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-base);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }

  .choice-pills__option:hover {
    border-color: var(--color-accent);
  }

  .choice-pills__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .choice-pills__option:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-ring-solid);
    font-weight: 500;
  }

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

  .choice-pills__option--danger:has(input:checked) {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
    color: var(--color-danger-strong);
  }

  .choice-pills__option--caution:has(input:checked) {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning);
  }

  /* Quieter than the accent, but still plainly chosen: a muted border and
     tint, and full-strength text. */
  .choice-pills__option--muted:has(input:checked) {
    border-color: var(--color-text-muted);
    background: color-mix(in oklab, var(--color-text-muted) 12%, var(--color-surface));
    color: var(--color-text);
  }
}