/* Apex CyberHub — 2D icon system (replaces emoji).
   Icons inherit the surrounding text colour and size. */
.apx-ic{
    width:1em;
    height:1em;
    display:inline-block;
    vertical-align:-0.14em;
    flex:0 0 auto;
    color:inherit;
    stroke:currentColor;
    fill:none;
    overflow:visible;
}
.apx-ic-wrap{ display:inline; }

/* <i class=apx-ic data-ic=name></i> placeholders written straight into markup:
   hold their space before the script swaps in the SVG, so nothing jumps. */
i.apx-ic{
    line-height:0;
    font-style:normal;
    stroke:none;
}
i.apx-ic > svg{ width:1em; height:1em; }

/* an icon written next to a label keeps a small gap */
i.apx-ic + *{ margin-left:.1em; }

/* a touch larger where an icon stands alone in a button or tile */
button > .apx-ic-wrap > .apx-ic,
.btn > .apx-ic-wrap > .apx-ic,
.tile-label > .apx-ic-wrap > .apx-ic{ width:1.15em; height:1.15em; }

/* keep a small gap when an icon is followed by text */
.apx-ic-wrap + *{ margin-left:.1em; }