/* =========================================================================
   universal-supports-chip — v1.3 (2026-04-21). NEW in v1.3.
   Shared chip vocabulary used by mechanism-card AND patent-card to render
   the "Universal supports" / "Supports" field. Sourced from webshield-navy.

   Design decision (see README.md §v1.3):
     The brief asks whether to semantic-color chips by Universal. The
     locked palette has exactly ONE accent hue (gold) plus navy inks —
     insufficient to paint distinct Universals without minting new
     tokens (forbidden). Therefore: ONE shape for foundation chips, muted-
     outlined style, Universal name as the label. Reading order is
     reinforced by a mono ordinal (01/04 … 04/04) inside the chip.

   Per QPN Context Primer v2.0.3 §3, the row contains four Universal
   Foundations (Access, Exchange, Ownership, Liquidity). Universal AI
   is a capability category enabled by the foundations, not a row peer —
   rendered via the .ws-chip--capability modifier (dashed border + italic
   name + lighter surface) with ord text "Capability" instead of a number.

   Shape: pill-ish hairline-bordered capsule. Bone-tinted inset surface.
   Mono ordinal (gold, micro) + body-sm Universal name (navy, weight 500).

   Usage:
     <ul class="ws-supports-chips">
       <li class="ws-chip">
         <span class="ws-chip__ord">01/04</span>
         <span class="ws-chip__name">Access</span>
       </li>
       …
       <li class="ws-chip ws-chip--capability">
         <span class="ws-chip__ord">Capability</span>
         <span class="ws-chip__name">AI</span>
       </li>
     </ul>

   The <ul> resets list markers; the <li> is the chip.
   ========================================================================= */

.ws-supports-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  background: var(--ws-surface-2);
  border: 1px solid var(--ws-rule);
  border-radius: 2px;               /* very slight — not rounded */
  font-family: var(--ws-font-body);
  line-height: 1.2;
  white-space: nowrap;
}

.ws-chip__ord {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  color: var(--ws-accent);
  font-weight: 500;
  letter-spacing: var(--ws-tracking-mono);
}

.ws-chip__name {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body-sm);
  font-weight: 500;
  color: var(--ws-ink);
  letter-spacing: -0.005em;
}

/* Hover — for when the chip is an anchor <a> to /#universals */
a.ws-chip,
.ws-chip > a {
  text-decoration: none;
  color: inherit;
}

a.ws-chip:hover,
a.ws-chip:focus-visible {
  background: var(--ws-surface);
  border-color: var(--ws-ink-faint);
  outline: none;
}

/* Capability modifier — Universal AI is a capability category enabled
   by the foundations, not a foundation peer (Primer §3). Visually
   distinguished from foundation chips via dashed border, italic name,
   and lighter surface. Ord text reads "Capability" instead of a fraction. */
.ws-chip--capability {
  background: var(--ws-page);
  border-style: dashed;
}
.ws-chip--capability .ws-chip__name {
  font-style: italic;
}