/**
 * CSS Field Systems icon kit
 * Families: lucide (line), phosphor (regular), pixelart (8-bit)
 * Sources: demos/shared/icons/SOURCES.md
 */

.ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: -0.15em;
  color: inherit;
}
.ci svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}
/* Lucide/Phosphor outline prefer stroke; pixelart prefer fill */
.ci[data-family="lucide"] svg,
.ci[data-family="phosphor"] svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ci[data-family="pixelart"] svg {
  fill: currentColor;
  stroke: none;
  /* crisp pixels */
  shape-rendering: crispEdges;
  image-rendering: pixelated;
}

.ci--xs { width: 14px; height: 14px; }
.ci--sm { width: 16px; height: 16px; }
.ci--md { width: 20px; height: 20px; }
.ci--lg { width: 24px; height: 24px; }
.ci--xl { width: 32px; height: 32px; }
.ci--2xl { width: 40px; height: 40px; }

.ci--spin {
  animation: ci-spin 0.9s linear infinite;
}
@keyframes ci-spin {
  to { transform: rotate(360deg); }
}

/* Button / chip companions */
.ci-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.ci-inline .ci {
  flex-shrink: 0;
}

/* Mall / tool nav icon slot */
.mall-item .ci,
.bc-lens .ci,
.pro-btn .ci,
.bc-btn .ci {
  margin-inline-end: 0.15em;
}

/* Family switch helpers from theme data-icon-family */
html[data-icon-family="stamp"] .ci,
html[data-icon-family="pixel"] .ci {
  /* prefer pixel when stamp family */
}