/* =========================================================
   Zeal Portal — Chips
   Status · Category · Completion. Tokens keep the palettes
   intentionally separate (see colors_and_type.css note on the
   green/cat-ops + amber/cat-culture hex overlap).
   ========================================================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-pill);
  font-family: var(--font-cd);
  font-size: var(--t-micro, 11px);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-wide, 0.08em);
  text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  background: transparent;
  white-space: nowrap;
  line-height: 1.2;
}
.chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex: 0 0 auto;
}
.chip__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* =========================================================
   Status chip — live / watching / risk / shipped / done
   Soft-tint background + full-weight foreground.
   ========================================================= */

.chip--status[data-status="live"] {
  color: var(--green, #1F7A4A);
  background: var(--green-soft, #E8F3EC);
  border-color: transparent;
}
.chip--status[data-status="watching"] {
  color: var(--amber, #A66F0F);
  background: var(--amber-soft, #FBF1DC);
  border-color: transparent;
}
.chip--status[data-status="risk"] {
  color: var(--red-status, #C62828);
  background: var(--red-soft, #FDECEC);
  border-color: transparent;
}
.chip--status[data-status="shipped"],
.chip--status[data-status="done"] {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: var(--warm, #f2ede2);
  border-color: transparent;
}
.chip--status[data-status="draft"],
.chip--status[data-status="pending"] {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: transparent;
  border-color: var(--rule-2, rgba(0, 0, 0, 0.14));
}

/* Lifecycle states — User Admin and any people / record list.
   A separate semantic register from the roadmap-flavoured states
   above (live / watching / risk). */
.chip--status[data-status="active"] {
  color: var(--green, #1F7A4A);
  background: var(--green-soft, #E8F3EC);
  border-color: transparent;
}
.chip--status[data-status="suspended"] {
  color: var(--red-status, #C62828);
  background: var(--red-soft, #FDECEC);
  border-color: transparent;
}
.chip--status[data-status="archived"] {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: var(--warm, #f2ede2);
  border-color: transparent;
}

/* Pulsing dot — a single shared animation for "needs attention"
   states (User Admin pending, Studio Manager unconfirmed
   hardware). Tokenised — works on any chip dot regardless of
   category. The current colour bleeds via box-shadow off
   currentColor inside the chip context. */
.chip__dot--pulse {
  position: relative;
  animation: chip-pulse 1.6s var(--ease-std, ease-in-out) infinite;
}
@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent, #FF5800); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =========================================================
   Category chip — portal / ops / brand / sped / culture / brand-comms
   Small dot + label. Never a background flood.
   ========================================================= */

.chip--category {
  border-color: var(--rule-2, rgba(0, 0, 0, 0.14));
  background: transparent;
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
}
.chip--category[data-category="portal"]      .chip__dot { background: var(--cat-portal, #2C5A8F); }
.chip--category[data-category="ops"]          .chip__dot { background: var(--cat-ops, #1F7A4A); }
.chip--category[data-category="brand"]        .chip__dot { background: var(--cat-brand, #FF5800); }
.chip--category[data-category="sped"]         .chip__dot { background: var(--cat-sped, #5B2D7A); }
.chip--category[data-category="culture"]      .chip__dot { background: var(--cat-culture, #A66F0F); }
.chip--category[data-category="brand-comms"]  .chip__dot { background: var(--cat-brand-comms, #7A4A2C); }

/* Role variants — portal-wide identity colours (see
   colors_and_type.css → --role-* tokens). */
.chip--category[data-category="role-admin"]      .chip__dot { background: var(--role-admin, #6A3FA5); }
.chip--category[data-category="role-staff"]      .chip__dot { background: var(--role-staff, #2C5A8F); }
.chip--category[data-category="role-freelancer"] .chip__dot { background: var(--role-freelancer, #A89A5E); }
.chip--category[data-category="role-supplier"]   .chip__dot { background: var(--role-supplier, #8A8A8A); }
.chip--category[data-category="role-readonly"]   .chip__dot { background: var(--role-readonly, #C2C2C2); }

/* =========================================================
   Completion chip — form sections / tabs
   "✓ complete" in green / "N left" in amber.
   ========================================================= */

.chip--completion[data-completion="complete"] {
  color: var(--green, #1F7A4A);
  background: var(--green-soft, #E8F3EC);
  border-color: transparent;
}
.chip--completion[data-completion="incomplete"] {
  color: var(--amber, #A66F0F);
  background: var(--amber-soft, #FBF1DC);
  border-color: transparent;
}
.chip--completion .chip__icon {
  display: inline-flex;
  width: 10px;
  height: 10px;
}
.chip--completion .chip__icon svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Primary (orange) chip — used sparingly for the active filter tag.
   Base class alone for hairline variant. */
.chip--primary {
  background: var(--accent, #FF5800);
  color: var(--paper, #fff);
  border-color: var(--accent, #FF5800);
}

/* Selected state for filter chips (audit time-range, list-screen
   filter pills). Ink flood with paper foreground — single contrast
   step from the hairline default. Pairs with <button class="chip">. */
.chip.is-on {
  background: var(--ink, #000);
  color: var(--paper, #fff);
  border-color: var(--ink, #000);
}
.chip.is-on .chip__count { opacity: 1; }

/* Dismiss affordance inside a chip (e.g. removable filter tag) */
.chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.5;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  transition: opacity var(--dur-fast) var(--ease-std);
}
.chip__x:hover { opacity: 1; }

/* =========================================================
   Pills
   Rectangular micro-label — a separate register from .chip.

   .chip is rounded + uppercase; .pill is square + uppercase.
   Used for service tags (Production / Design / Visuals) on
   project rows today; reusable anywhere a compact rectangular
   metadata tag fits. Pairs naturally with `.row-card__pills`
   or any flex container with a small gap.

   Example markup:
     <span class="pill">Production</span>
     <span class="pill pill--filled">Delivery</span>
   ========================================================= */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--rule-3, rgba(0, 0, 0, 0.25));
  border-radius: 0;
  background: transparent;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  font-family: var(--font-cd);
  font-size: 10px;
  font-weight: var(--w-medium, 500);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}

/* Filled variant — ink on paper flips to paper on ink. Used
   sparingly; the default hairline is the workhorse. */
.pill--filled {
  background: var(--ink, #000);
  color: var(--paper, #fff);
  border-color: var(--ink, #000);
}

/* Accent variant — orange-flooded. Reserved for pulling the
   eye to a single high-priority tag. */
.pill--accent {
  background: var(--accent, #FF5800);
  color: var(--paper, #fff);
  border-color: var(--accent, #FF5800);
}