/* Shared pill/chip/badge shape — the "extract pill component" issue,
   resolved as shared CSS rather than a JS component. `.hive-pill` and
   `.hive-pill-sm` are the ONLY two classnames this file names — every
   inline status/count chip across the dashboard + per-agent UI carries
   one of them (added alongside its own semantic colour modifier class,
   e.g. `class="hive-pill-sm badge-ok"`) instead of this file having to
   enumerate every call site's own base classname. Per mara's review on
   the first cut of this: naming every use here just relocates the
   duplication rather than removing it — the fix is unifying the
   classnames themselves, not fanning shared CSS out across old names.

   Two size tiers, matching what was already organically in use:
     .hive-pill    — primary state chips (agent status/state chips)
     .hive-pill-sm — secondary meta chips (agent model/effort/ctx chips,
                     the dashboard's whole badge family)

   `display: inline-block` is the default here since that covers every
   plain-text chip; the one exception (the agent header's icon+label+
   count flyout pills) overrides `display` locally to `inline-flex` —
   layout mode isn't part of the shape these two classes exist to
   share, so a single site overriding it is expected, not a gap. */

.hive-pill,
.hive-pill-sm {
  display: inline-block;
  border: 1px solid;
  border-radius: 999px;
}

.hive-pill {
  padding: 0.25em 0.8em;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

.hive-pill-sm {
  padding: 0.1em 0.6em;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}