/* ============================================================================
 * components.css — shared, site-wide utility components.
 * Loaded once from base.html, available on every public page.
 * Class prefix: jc-* (global). Page-specific CSS lives in landing.css etc.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * jc-tag — unified pill/badge for tags, statuses, and lifecycle markers.
 * Used in: Recent strip, Selected work paper-status, Projects.
 *
 * Default is neutral (muted gray). Variants:
 *   .is-accent   warm amber  — emphasis / live status / R&R / active project
 *   .is-info     cool blue   — informational / working-paper status
 *   .is-live     alias for .is-accent — toggled by events.js on lifecycle items
 * ---------------------------------------------------------------------------- */
.jc-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.jc-tag.is-accent,
.jc-tag.is-live {
  color: var(--accent-strong);
  background: var(--accent-alpha);
}
.jc-tag.is-info {
  color: var(--info-color);
  background: rgba(2, 132, 199, 0.10);
}