/* ── Herald Icon System (§08) ── */

/* Shared wrapper for both real SVG <img> tags and placeholder <svg> elements */
.herald-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
  /* Ensure pixel-perfect rendering at standard sizes (16/20/24/32px) */
  image-rendering: crisp-edges;
}

/* ── Real SVG icons (served as <img>) ── */
/* When real single-path SVGs are dropped in, they are coloured via CSS filter
   or by authoring the SVG with currentColor strokes.  No explicit colour rules
   here — inherit from the parent element via currentColor. */
img.herald-icon {
  /* Suppress the alt-text rect that some browsers draw while the image loads */
  background: transparent;
}

/* ── Placeholder SVGs ── */
/* Visually obvious as unfinished — dashed border, muted accent colour.
   Disappears automatically when a real SVG is present (the macro switches
   from <svg> to <img> once icon_exists() returns true). */
svg.herald-icon--placeholder {
  opacity: 0.65;
  color: var(--accent);
}

svg.herald-icon--placeholder text {
  font-family: 'Special Elite', 'Courier New', monospace;
}

/* ── Size helpers (opt-in via class) ── */
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 20px; height: 20px; }
.icon-lg  { width: 24px; height: 24px; } /* default */
.icon-xl  { width: 32px; height: 32px; }