@layer components {
  /* Pills */
  .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 1.25rem; font-weight: 550; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
  button.pill { font-family: inherit; cursor: pointer; }
  button.pill:hover { border-color: var(--line-strong); }
  .pill.is-menu, .pill.is-input, .pill.is-router, .pill.is-end, .pill.is-ok, .pill.is-warned, .pill.is-warning, .pill.is-broken, .pill.is-error, .pill.is-unknown { border-color: transparent; color: var(--ink); }
  .pill.is-menu { background: var(--menu-soft); }
  .pill.is-input { background: var(--input-soft); }
  .pill.is-router { background: var(--router-soft); }
  .pill.is-end { background: var(--end-soft); }
  .pill.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
  .pill.is-warned, .pill.is-warning { background: var(--warning-soft); color: var(--warning); }
  .pill.is-broken, .pill.is-error, .pill.is-unknown { background: var(--error-soft); color: var(--error); }
  .pill.is-unchecked { border-style: dashed; }
  .pill.is-suggestion { font-family: var(--mono); font-size: 1.15rem; }
  .pill.is-ok::before, .pill.is-warned::before, .pill.is-warning::before, .pill.is-broken::before, .pill.is-error::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; }
  .status { flex: 0 0 auto; font-size: 1.25rem; font-weight: 550; color: var(--ink-3); }
  .count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .6rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--ink-2); }
  .count.is-error { background: var(--error-soft); border-color: transparent; color: var(--error); }
  .count.is-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
  .count.is-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
}