@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-message, .pill.is-form, .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-message { background: var(--message-soft); }
  .pill.is-form { background: var(--form-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; }
  /* Which channel a flow answers on, read at a glance on the shelf and in the workspace. */
  .channel { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .8rem .2rem .6rem; border-radius: var(--r-control); font-size: 1.2rem; font-weight: 600; line-height: 1.6; white-space: nowrap; }
  .channel .icon { width: 1.4rem; height: 1.4rem; }
  .channel.is-ussd { background: var(--ussd-soft); color: var(--ussd-ink); }
  .channel.is-whatsapp { background: var(--whatsapp-soft); color: var(--whatsapp-ink); }
  .channel.is-sms { background: var(--menu-soft); color: var(--ink); }
  .channel.is-sms .icon { color: var(--menu); }
  /* WhatsApp's own mark keeps WhatsApp's own green, whatever the chip's words do. */
  .channel.is-whatsapp .icon { color: var(--whatsapp-brand); }

  /* A filter a page wears as chips: what is on is filled in, and what it holds says how many. */
  .serving-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 2.4rem 0 1.6rem; }
  .filter-set { display: inline-flex; gap: .6rem; }
  .filter-chip { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 1.3rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
  .filter-chip:hover { border-color: var(--line-strong); color: var(--ink); }
  .filter-chip .icon { width: 1.5rem; height: 1.5rem; }
  .filter-dot { width: .8rem; height: .8rem; border-radius: 999px; background: var(--router); opacity: .55; }
  .filter-chip.is-live .filter-dot { background: var(--danger); }
  .filter-chip.is-on { border-color: transparent; background: var(--ink); color: var(--surface); }
  .filter-chip.is-on .filter-dot { opacity: 1; }
  .filter-chip.is-whatsapp.is-on { background: var(--whatsapp); color: #fff; }
  .filter-clear { margin-left: .4rem; color: var(--ink-3); font-size: 1.3rem; }
  .filter-across { margin-left: auto; }
  .filter-count { opacity: .6; font-variant-numeric: tabular-nums; }

  .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); }
  .ok-mark { flex: none; width: 1.8rem; height: 1.8rem; color: var(--ok); vertical-align: -.35rem; }
}