/* Lagos Life chip. Owner 5c. Spec: buttons.html#chip.
   Markup: <button class="ll-chip ll-interactive ll-selectable" aria-pressed="false">
             <span class="ll-chip__icon ll-emoji" aria-hidden="true">🔥</span>Flare stack
             <span class="ll-chip__count">12</span>
           </button>
   36px visible (sm), 44px hit area. Selected = the system ink fill (state.css .ll-selectable). */

.ll-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-1-5);
  height: var(--control-sm);
  margin: 0;
  padding: 0 calc(var(--space-3) + var(--space-0-5));
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--mist);
  color: var(--ink-soft);
  font: var(--type-label);
  white-space: nowrap;
}
.ll-chip__icon { font-size: var(--icon-sm); line-height: 1; }
.ll-chip__count {
  min-width: var(--icon-md);
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full);
  background-color: var(--paper);
  color: var(--ink);
  font: var(--type-micro);
  line-height: var(--icon-md);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ll-chip:is([aria-pressed="true"], [aria-selected="true"]) .ll-chip__count { background-color: var(--ink-on); color: var(--ink-fill); }