/* ============================================================
 * components.css — shared UI chips for the portfolio site.
 * SINGLE SOURCE OF TRUTH. Linked by index.html and every case page.
 * Depends on tokens.css (must be linked first).
 * Do not redefine .case-meta span or .case-status anywhere else.
 * ============================================================ */

/* ── Category tag chip ───────────────────────────────────────
 * Used in .case-meta rows: homepage work cards + case-study hero banners. */
.case-meta span {
  font-size: .68rem;
  color: var(--copper-bright);
  letter-spacing: .03em;
  font-weight: 500;
  padding: .3rem .7rem;
  background: var(--copper-bright-a25);
}

/* ── Case status pill (protected / open) ─────────────────────
 * Filled pill, deliberately distinct from the tag chips above. */
.case-meta .case-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
}
.case-meta .case-status svg { width: .82rem; height: .82rem; flex: none; }
.case-meta .case-status.protected { color: #130608; background: #C26A79; }
.case-meta .case-status.open      { color: #1B2610; background: #9BBE6E; }