/* ==========================================================================
   fix-icons.css — Icon system normalization
   Loads LAST: site.css → fix-bugs → fix-consistency → fix-design → fix-icons
   so these rules win on equal specificity (no !important needed).

   AUDIT (2026-10-21, full-tree grep of site.css + all *.html):
   | Icon context              | Where used                    | OLD badge | OLD glyph | NEW badge | NEW glyph |
   |---------------------------|-------------------------------|-----------|-----------|-----------|-----------|
   | .ibadge (default)         | svc rows, bento tiles,        | 52px      | 26px      | 44px      | 22px      |
   |                           | service/portfolio/solution pg |           |           |           |           |
   | .vcard .ibadge            | visual mini-cards             | 44px      | 22px      | 44px      | 22px (=std)|
   | .tic                      | tool-card icons (32×)         | 48px      | 24px      | 44px      | 22px      |
   | mega-menu / footer        | no icons present (text links) | —         | —         | —         | —         |
   | tool-page diagram SVGs    | dropzone, dice, diagrams…     | —         | untouched (their own CSS) |

   One size language: 44px badge / 22px glyph everywhere.
   Stroke style, brand purple (#560591), no-gradients rule untouched — sizing only.
   Glyph contrast unchanged: #2a0447 on #f3eef9 (light), #a76be8 on dark
   band — both ≥4.5:1. No motion added; prefers-reduced-motion unaffected.
   ========================================================================== */

/* --- 1. Standard badge: 52px → 44px, 26px → 22px glyph ------------------ */
.ibadge{
  width:44px;
  height:44px;
  border-radius:12px;          /* 14px→12px keeps the same ~27% corner ratio */
  flex:none;                   /* badge never squashes inside flex rows */
  overflow:hidden;             /* defensive: clip any runaway svg */
}
.ibadge svg{
  width:22px;
  height:22px;
  display:block;
  max-width:100%;              /* defensive: glyph can never exceed badge */
  max-height:100%;
}
/* .vcard .ibadge already 44px/22px in site.css — now the site-wide standard;
   keep its rule harmless by restating the same values (no drift). */
.vcard .ibadge{width:44px;height:44px;border-radius:12px}
.vcard .ibadge svg{width:22px;height:22px}

/* --- 2. Tool-card icons: 48px → 44px box, 24px → 22px glyph ------------- */
.tic{
  width:44px;
  height:44px;
  border-radius:12px;
  flex:none;
  overflow:hidden;             /* defensive: clip any runaway svg */
}
.tic svg{
  width:22px;
  height:22px;
  display:block;
  max-width:100%;
  max-height:100%;
}

/* --- 3. DEFENSIVE GUARANTEE: an svg can never render container-width ---
   Failure mode (observed once): a bare viewBox-only <svg> with no sizing
   CSS applied defaults to 100% width → renders GIANT.
   Guarantee chain (no !important, specificity + last-in-cascade instead):
     a) badge svg rules above set explicit px width/height (0,1,1 spec —
        beats or ties every earlier rule and wins by cascade order);
     b) max-width/max-height:100% caps the svg to the badge box even if the
        px sizing is ever dropped or overridden;
     c) the badge itself is a fixed 44px box with flex:none +
        overflow:hidden, so in the absolute worst case the svg is clipped
        to the badge — never visible at container width.
   ----------------------------------------------------------------------- */