/**
 * views/components/icon.cfm — shared icon library
 * Line Awesome glyphs rendered via #view('components/icon', …)# use .app-icon.
 *
 * !important: Bootstrap .text-muted (and similar utilities) set color !important on
 * parent rows (.cli-meta-row); inherited color beats a non-important rule on the icon.
 */

.app-icon {
  color: var(--color-icon, var(--color-neutral-500)) !important;
  line-height: 1;
  vertical-align: middle;
  transition: color 0.15s ease;
  /* Em-box: prevents icons from collapsing in flex/inline-flex rows and ensures
     consistent optical alignment regardless of the glyph's natural advance width. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  min-width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Size scale (set by icon.cfm when size='xs'|'sm'|'md').
   Floor raised to 12px minimum — icon fonts (Line Awesome) render blurry below ~12px. */
.icon--size-xs { font-size: 12px; }
.icon--size-sm { font-size: 13px; }
.icon--size-md { font-size: 15px; }