/* The approved brushed FLUX Phi: transparent cut-out (img/flux-phi-mark.png) of the canonical source
   img/flux-phi.png. Replaces the serif img/phi-logo.png everywhere it was shown.
   COLOUR  = currentColor, so every theme recolours it by setting `color` on the parent.
   GLOW    = drop-shadow on the OUTER span. A CSS filter runs before mask, so a glow placed on the masked
             element itself would be clipped to nothing. It is derived from currentColor (color-mix) and
             tuned per theme by the two variables below: stronger on dark, softer on light.
   SIZE    = flux-phi--NN modifier classes (no inline style, CSP-safe). */
.flux-phi {
    --flux-phi-glow-core: 60%;
    --flux-phi-glow-halo: 38%;
    display: inline-block;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor var(--flux-phi-glow-core), transparent))
            drop-shadow(0 0 10px color-mix(in srgb, currentColor var(--flux-phi-glow-halo), transparent));
}
.flux-phi > i {
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("../img/flux-phi-mark.png") center / contain no-repeat;
    mask: url("../img/flux-phi-mark.png") center / contain no-repeat;
}
[data-theme="light"] .flux-phi {
    --flux-phi-glow-core: 30%;
    --flux-phi-glow-halo: 16%;
}
.flux-phi--14 { width: 14px; height: 14px; }
.flux-phi--18 { width: 18px; height: 18px; }
.flux-phi--20 { width: 20px; height: 20px; }
.flux-phi--28 { width: 28px; height: 28px; }
.flux-phi--32 { width: 32px; height: 32px; }
.flux-phi--36 { width: 36px; height: 36px; }
.vi-summon .flux-phi { width: 32px; height: 32px; }
@media (prefers-reduced-motion: no-preference) { .flux-phi { transition: filter 0.2s ease; } }