/* =========================================== */
/* PHOSPHOR ICONS — RENDERING OVERRIDES        */
/* =========================================== */

/*
 * Phosphor's base .ph-duotone class doesn't set display:inline-block.
 * Without it the :after pseudo-element's margin-left:-1em (used to
 * overlap the two duotone glyphs) doesn't work reliably in all
 * layout contexts, causing icons to render as two separate characters
 * or show nothing at all. This is especially pronounced for icons inside
 * dynamically-created elements (e.g. login modals created via innerHTML)
 * where pseudo-elements may not receive layout until a repaint.
 */
.ph-duotone {
    display: inline-block !important;
    vertical-align: -0.125em;   /* aligns icon baseline with text, same as Font Awesome */
    line-height: 1;
    speak: never;
}

/* Force both pseudo-element layers to inline-block so the margin-left:-1em
   overlap trick works reliably, including in dynamically-inserted elements. */
.ph-duotone::before,
.ph-duotone::after {
    display: inline-block !important;
}

/* Duotone background layer — bump default 0.2 opacity to 0.35 so the
   fill is visible in both dark and light mode */
.ph-duotone::before {
    opacity: 0.35 !important;
}

/* Login modal / login button — boost duotone fill so lock & sign-in icons are clearly visible */
.global-login-modal .ph-duotone::before,
.global-login-btn .ph-duotone::before {
    opacity: 0.65 !important;
}

/* Spinner animation (replaces Font Awesome fa-spin) */
@keyframes ph-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ph-spin {
    animation: ph-spin 0.75s linear infinite;
}

/* =========================================== */
/* SIZE HELPERS                                */
/* =========================================== */

.ph-sm  { font-size: 0.875em; }
.ph-lg  { font-size: 1.33em;  vertical-align: -0.225em; }
.ph-xl  { font-size: 1.5em;   vertical-align: -0.25em;  }
.ph-2x  { font-size: 2em;     }
.ph-fw  { width: 1.25em; text-align: center; }
