/* Lagos Life segmented control. Owner 5c. Spec: buttons.html#segmented.
   One control for 2 to 4 options (auth tabs, flight class, Chats/Groups, Governor/Senator/President, map city).
   5 or more options use a chip row instead (Sim panel tabs).
   Markup: <div class="ll-segmented" role="tablist" aria-label="Account">
             <button class="ll-segmented__item ll-interactive ll-selectable" role="tab" aria-selected="true">Create account</button>
             <button class="ll-segmented__item ll-interactive ll-selectable" role="tab" aria-selected="false" tabindex="-1">Log in</button>
           </div>
   Track 44px (4px padding + 36px segments). Selected = ink fill, the one selected style. */

.ll-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--mist);
}

.ll-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
  min-width: 0;
  height: var(--control-sm);
  margin: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--ink-soft);
  font: var(--type-label);
  white-space: nowrap;
}
/* Long labels truncate inside the label span, so the item itself never clips its 44px hit area. */
.ll-segmented__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ll-segmented__icon { font-size: var(--icon-sm); line-height: 1; }