/* ==========================================================================
   THE PILL — the site's small label chip, in ONE place (2026-09-14).

   A 40-tall off-white capsule with dark Satoshi Medium in it. The services
   page's "What you get" lists and the project pages' tags are the same object
   (node 386:87070 is a picture of the former), and they were two copies of the
   same eight declarations until the client asked for them to actually share a
   rule.

   ADDING A USE: put `rdk-pill` on the item and `rdk-pills` on its list. The two
   selectors beside them are the containers that PREDATE the class and are
   covered without churning ~50 list items of markup; do not add a third — use
   the class.

   A page may still override — this is linked BEFORE the page stylesheets — but
   the geometry and the face belong here.

   MATCHED TO WHAT SHIPPED, NOT TO THE NODE. The node sets Satoshi Bold at -1%
   tracking; the services page deliberately runs 500 with none, from the
   client's tuning pass of 2026-09-02.
   ========================================================================== */
.rdk-pills,
.rdk-svc__pills,
.rdk-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdk-pill,
.rdk-svc__pills li,
.rdk-project__tags li {
  display: inline-flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding: 0 calc(24 * var(--u));
  font-family: var(--rdk-font-body);
  font-weight: 500;
  font-size: calc(16 * var(--u));
  line-height: 1;
  white-space: nowrap;
  /* Literal: #04270c is not a token in this file and is NOT --rdk-dark
     (#002300). One colour, one place, now that the rule is shared. */
  color: #04270c;
  background: var(--rdk-off-white);
  border-radius: 999px;
}

@media (max-width: 767px) {
  /* THE GAP HAS TO BE RESTATED IN px. `6 * --u` is 1.5px at 390 — the
     collapsing-unit trap this project documents — so the pills all but touch.
     The services page had exactly that until this file existed. */
  .rdk-pills,
  .rdk-svc__pills,
  .rdk-project__tags {
    gap: 6px;
  }

  .rdk-pill,
  .rdk-svc__pills li,
  .rdk-project__tags li {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    letter-spacing: -0.13px;
    /* A long label may wrap on a phone rather than overflow the measure. */
    white-space: normal;
  }
}