/* ==========================================================================
   Segmented control — pill radiogroup (K09 system states, K12 topic switch)

   <div class="segmented" role="radiogroup" aria-label="…">
     <button class="segmented__option" type="button" role="radio" aria-checked="true">A</button>
     <button class="segmented__option" type="button" role="radio" aria-checked="false">B</button>
   </div>

   Selection state is driven by aria-checked; the page script moves it.
   ========================================================================== */

.segmented {
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  border: 1px solid var(--ink-a16);
  border-radius: var(--radius-pill);
  background: var(--graphite-0);
}

.segmented__option {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--graphite-600);
  font: 500 13px/1 'Geist', sans-serif;
  cursor: pointer;
}
.segmented__option[aria-checked="true"] {
  background: var(--graphite-900);
  color: var(--graphite-50);
}