
/* Music FM V2 — clean icon replacement layer */
.mf-fa-emoji{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1.15em;
    min-width:1.15em;
    height:1.15em;
    line-height:1;
    font-size:.98em;
    vertical-align:-.12em;
    color:currentColor;
}
.mf-fa-emoji + .mf-fa-emoji{margin-inline-start:.16em}
.mf-icon-btn .mf-fa-emoji,
button .mf-fa-emoji,
a .mf-fa-emoji{pointer-events:none}
.mf-admin-nav a i.fa-solid,
.mf-admin-nav a i.fa-regular,
.mf-admin-nav a i.fa-brands,
.mf2-menu a i.fa-solid,
.mf2-menu a i.fa-regular,
.mf2-menu a i.fa-brands{
    font-family:"Font Awesome 6 Free","Font Awesome 6 Brands" !important;
    font-style:normal;
}

/* =========================================================
   Music FM — canonical icon/control geometry
   One centering contract for desktop, mobile, user area and admin.
   This layer changes geometry only; it never owns action animations.
========================================================= */
:where(
    .mf-icon-btn,
    .mf-action-exact,
    .mf-home-hero-arrow,
    .mf-new-song-play,
    .mf-dedication-close,
    .search-live-play,
    .search-2026-clear,
    .search-live-recent-remove,
    .mf-public-play-mini,
    .mf-profile-photo-viewer-close,
    .conversation-menu-toggle,
    .community-comment-more,
    .community-post-menu-wrap > button,
    .mf-playlist-song-play,
    .mf-home-chart-play,
    .mf-home-chart-row-play,
    .mf-paper-page-arrow,
    .mf-song-actions-close,
    .mf-unified-song-actions > button,
    .mf-songs-view-toggle button,
    .mf-article-reading-dock-actions button,
    .mf-article-report-close,
    .mf-toast__close,
    .modal-close,
    .mf-site-dialog-close,
    .mf-a11y-close,
    .mf-auth-password-toggle,
    .mf-player-icon-btn,
    .mf-now-playing-close,
    .mf-now-playing-control,
    .mf-now-playing-mode,
    .mf-now-playing-play,
    .mf-now-playing-song-action,
    .mf-now-playing-search-box button,
    .mf-radio-player-head button,
    .mf-radio-player-head-actions button,
    .mf-radio-track-more,
    .mf-radio-track-add,
    .mf-radio-controls button,
    .mf-radio-queue-item button,
    .mf-player-btn:not(.text),
    .mf-a11y-fab,
    .mf-edit-play,
    .mf-edit-remove,
    .mf-drag-handle,
    .dedications-share-close,
    .mf-song-more,
    .mf-song-more-trigger,
    .mf-song-play,
    .mf-song-play-float,
    .mfc-icon,
    .song-2026-cover-item-play,
    .song-2026-cover-play,
    .support-mobile-back,
    .support-new-chat,
    .admin-mobile-back,
    .admin-composer-attach,
    .admin-composer-send,
    .composer-send,
    .mf-recent-remove,
    .cm-icon-btn,
    .admin-chat-head-actions button,
    .chat-header-menu-wrap > button,
    .mf-admin-bell-heading-icon,
    .mf-admin-bell-type,
    .mf-admin-guide-icon,
    .mf-admin-save-dock-icon,
    .mfd-icon,
    .tool-icon
){
    display:inline-grid !important;
    place-items:center !important;
    padding:0 !important;
    text-align:center !important;
    line-height:1 !important;
}

/* Structural fallback for icon-only accessible controls not yet carrying a
   canonical class. It is deliberately limited to controls with one icon child. */
:where(button,a)[aria-label]:is(
    :has(> i:only-child),
    :has(> svg:only-child),
    :has(> .mf-fa-emoji:only-child)
){
    display:inline-grid;
    place-items:center;
}

:where(
    .mf-icon-btn,
    .mf-action-exact,
    .mf-home-hero-arrow,
    .mf-new-song-play,
    .mf-dedication-close,
    .search-live-play,
    .search-2026-clear,
    .search-live-recent-remove,
    .mf-public-play-mini,
    .mf-profile-photo-viewer-close,
    .conversation-menu-toggle,
    .community-comment-more,
    .community-post-menu-wrap > button,
    .mf-playlist-song-play,
    .mf-home-chart-play,
    .mf-home-chart-row-play,
    .mf-paper-page-arrow,
    .mf-song-actions-close,
    .mf-unified-song-actions > button,
    .mf-songs-view-toggle button,
    .mf-article-reading-dock-actions button,
    .mf-article-report-close,
    .mf-toast__close,
    .modal-close,
    .mf-site-dialog-close,
    .mf-a11y-close,
    .mf-auth-password-toggle,
    .mf-player-icon-btn,
    .mf-now-playing-close,
    .mf-now-playing-control,
    .mf-now-playing-mode,
    .mf-now-playing-play,
    .mf-now-playing-song-action,
    .mf-now-playing-search-box button,
    .mf-radio-player-head button,
    .mf-radio-player-head-actions button,
    .mf-radio-track-more,
    .mf-radio-track-add,
    .mf-radio-controls button,
    .mf-radio-queue-item button,
    .mf-player-btn:not(.text),
    .mf-a11y-fab,
    .mf-edit-play,
    .mf-edit-remove,
    .mf-drag-handle,
    .dedications-share-close,
    .mf-song-more,
    .mf-song-more-trigger,
    .mf-song-play,
    .mf-song-play-float,
    .mfc-icon,
    .song-2026-cover-item-play,
    .song-2026-cover-play,
    .support-mobile-back,
    .support-new-chat,
    .admin-mobile-back,
    .admin-composer-attach,
    .admin-composer-send,
    .composer-send,
    .mf-recent-remove,
    .cm-icon-btn,
    .admin-chat-head-actions button,
    .chat-header-menu-wrap > button
) > :where(i,svg,.mf-fa-emoji){
    display:block;
    margin:0 !important;
    line-height:1 !important;
    align-self:center;
    justify-self:center;
}

/* Square icon containers follow the same geometric center. */
:where(
    .mf-menu-icon,
    .mf-live-notification-icon,
    .mf-user-notif-type-icon,
    .mf-user-notif-head-icon,
    .mf-mobile-action-icon,
    .mf-mobile-section-heading-icon,
    .mf-mobile-support-icon,
    .mf-user-logout-icon,
    .mf-breaking-icon,
    .mf-toast__icon,
    .notification-icon,
    .mf-site-dialog-icon,
    .mf-article-feedback-icon,
    .mf-article-feedback-choice-icon,
    .mf-task-card-icon,
    .mf-achievement-icon,
    .mf-help-q-icon,
    .mf-join-platform-icon,
    .mf-join-platform-arrow,
    .mf-join-app-icon,
    .mf-settings-mobile-icon,
    .community-achievement-icon,
    .community-mission-icon,
    .conversation-confirm-icon,
    .cm-empty-icon,
    .mf-admin-bell-heading-icon,
    .mf-admin-bell-type,
    .mf-admin-guide-icon,
    .mf-admin-save-dock-icon,
    .mfd-icon,
    .tool-icon
){
    display:grid !important;
    place-items:center !important;
    line-height:1 !important;
}

:where(
    .mf-menu-icon,
    .mf-live-notification-icon,
    .mf-user-notif-type-icon,
    .mf-user-notif-head-icon,
    .mf-mobile-action-icon,
    .mf-mobile-section-heading-icon,
    .mf-mobile-support-icon,
    .mf-user-logout-icon,
    .mf-breaking-icon,
    .mf-toast__icon,
    .notification-icon,
    .mf-site-dialog-icon,
    .mf-article-feedback-icon,
    .mf-article-feedback-choice-icon,
    .mf-task-card-icon,
    .mf-achievement-icon,
    .mf-help-q-icon,
    .mf-join-platform-icon,
    .mf-join-platform-arrow,
    .mf-join-app-icon,
    .mf-settings-mobile-icon,
    .community-achievement-icon,
    .community-mission-icon,
    .conversation-confirm-icon,
    .cm-empty-icon,
    .mf-admin-bell-heading-icon,
    .mf-admin-bell-type,
    .mf-admin-guide-icon,
    .mf-admin-save-dock-icon,
    .mfd-icon,
    .tool-icon
) > :where(i,svg,.mf-fa-emoji){
    margin:0 !important;
    line-height:1 !important;
}

