/* ─── Icons ────────────────────────────────────────────────────────────────
   Icons are server-rendered as <span class="icon" style="width:..;height:..;">
   {{ "name" | inline_svg | safe }} </span>. The SVG inside uses
   stroke="currentColor", so the icon colour cascades from any CSS `color`
   on an ancestor — including theme tokens (--text-primary, --text-secondary,
   --danger) and per-button text colours — without any CSS hack.

   The wrapper span controls size; the SVG fills it.
   ─────────────────────────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
}

.icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}