/* HNMMO canonical button-state contract.
   Geometry/layout stays in page CSS. Interaction state lives here. */

:root {
    --button-state-disabled-opacity: 0.5;
}

/* Contract participants. */
#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .password-toggle-btn,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .custom-spinner-btn,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .custom-select-trigger,
    .config-native-select-trigger,
    .settings-native-select-trigger,
    .items-per-page-custom-trigger,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
) {
    --button-state-bg: var(--button-normal-bg, transparent);
    --button-state-text: var(--button-normal-text, var(--control-text));
    --button-state-border: var(--button-normal-border, transparent);
    background-color: var(--button-state-bg) !important;
    color: var(--button-state-text) !important;
    border-color: var(--button-state-border) !important;
    box-shadow: none !important;
    outline: none !important;
    text-shadow: none !important;
    transition: none !important;
}

/* One state machine for every participant. */
#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .password-toggle-btn,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .custom-spinner-btn,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .custom-select-trigger,
    .config-native-select-trigger,
    .settings-native-select-trigger,
    .items-per-page-custom-trigger,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
):hover:not(:disabled) {
    --button-state-bg: var(--button-hover-bg, var(--button-normal-bg, transparent));
    --button-state-text: var(--button-hover-text, var(--button-normal-text, var(--control-text)));
    --button-state-border: var(--button-hover-border, var(--button-normal-border, transparent));
}

#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .password-toggle-btn,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .custom-spinner-btn,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .custom-select-trigger,
    .config-native-select-trigger,
    .settings-native-select-trigger,
    .items-per-page-custom-trigger,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
):focus-visible:not(:disabled) {
    --button-state-bg: var(--button-focus-bg, var(--button-hover-bg, var(--button-normal-bg, transparent)));
    --button-state-text: var(--button-focus-text, var(--button-hover-text, var(--button-normal-text, var(--control-text))));
    --button-state-border: var(--button-focus-border, var(--button-hover-border, var(--button-normal-border, transparent)));
}

#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .password-toggle-btn,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .custom-spinner-btn,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .custom-select-trigger,
    .config-native-select-trigger,
    .settings-native-select-trigger,
    .items-per-page-custom-trigger,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
):active:not(:disabled) {
    --button-state-bg: var(--button-active-bg, var(--button-hover-bg, var(--button-normal-bg, transparent)));
    --button-state-text: var(--button-active-text, var(--button-hover-text, var(--button-normal-text, var(--control-text))));
    --button-state-border: var(--button-active-border, var(--button-hover-border, var(--button-normal-border, transparent)));
    transform: none !important;
}

#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .password-toggle-btn,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .custom-spinner-btn,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .custom-select-trigger,
    .config-native-select-trigger,
    .settings-native-select-trigger,
    .items-per-page-custom-trigger,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
):disabled {
    opacity: var(--button-disabled-opacity, var(--button-state-disabled-opacity)) !important;
    cursor: var(--button-disabled-cursor, not-allowed) !important;
    transform: none !important;
}

/* Primary outline family. */
#hnmmoApp :where(
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .copy-custom-icon-button
) {
    border: var(--button-outline-border-width) solid var(--button-state-border) !important;
    --button-normal-bg: transparent;
    --button-normal-text: var(--primary);
    --button-normal-border: var(--primary);
    --button-hover-bg: var(--button-flat-hover-bg, var(--primary));
    --button-hover-text: var(--button-flat-hover-text, var(--action-on-primary));
    --button-hover-border: var(--button-flat-hover-border, var(--primary));
    --button-focus-bg: var(--button-hover-bg);
    --button-focus-text: var(--button-hover-text);
    --button-focus-border: var(--button-hover-border);
    --button-active-bg: var(--primary-active);
    --button-active-text: var(--button-hover-text);
    --button-active-border: var(--primary-active);
}

/* Open sidebar buttons keep the same filled-primary visual as hover/focus. */
#hnmmoApp :where(.header-icon.is-open, .header-color-picker.is-open) {
    --button-state-bg: var(--button-hover-bg) !important;
    --button-state-text: var(--button-hover-text) !important;
    --button-state-border: var(--button-hover-border) !important;
}

/* Field-like buttons: no fill change; border carries the state. */
#hnmmoApp :where(
    .control-surface:not(.btn-toggle-file-config),
    .btn-column-settings
) {
    --button-normal-bg: var(--control-bg);
    --button-normal-text: var(--control-text);
    --button-normal-border: var(--control-border);
    --button-hover-bg: var(--control-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--control-hover-border);
    --button-focus-bg: var(--control-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: var(--control-bg);
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

#hnmmoApp :where(.btn-column-settings.active, .page-info.page-selector-open) {
    --button-state-bg: var(--control-bg) !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: var(--primary) !important;
}

/* Pagination buttons outside control-surface use one neutral -> primary pattern. */
#hnmmoApp :where(.btn-pagination, .page-info):not(.control-surface) {
    --button-normal-bg: var(--control-bg);
    --button-normal-text: var(--control-text);
    --button-normal-border: var(--control-border);
    --button-hover-bg: var(--button-flat-hover-bg, var(--primary));
    --button-hover-text: var(--button-flat-hover-text, var(--action-on-primary));
    --button-hover-border: var(--button-flat-hover-border, var(--primary));
    --button-focus-bg: var(--button-hover-bg);
    --button-focus-text: var(--button-hover-text);
    --button-focus-border: var(--button-hover-border);
    --button-active-bg: var(--primary-active);
    --button-active-text: var(--button-hover-text);
    --button-active-border: var(--primary-active);
}

/* Standard filled-primary buttons. */
#hnmmoApp :where(.studio-button-primary),
#hnmmoApp:not(.register-control-contract-page) :where(.btn-upload-inline):not(.btn-stop):not(.btn-stopping) {
    --button-normal-bg: var(--primary);
    --button-normal-text: var(--action-on-primary, #ffffff);
    --button-normal-border: var(--primary);
    --button-hover-bg: var(--primary-hover);
    --button-hover-text: var(--action-on-primary, #ffffff);
    --button-hover-border: var(--primary-hover);
    --button-focus-bg: var(--primary-hover);
    --button-focus-text: var(--action-on-primary, #ffffff);
    --button-focus-border: var(--primary-hover);
    --button-active-bg: var(--primary-active);
    --button-active-text: var(--action-on-primary, #ffffff);
    --button-active-border: var(--primary-active);
}

/* Register upload button remains part of the field composite. */
#hnmmoApp.register-control-contract-page :where(.file-upload-container .btn-upload-inline):not(.btn-stop):not(.btn-stopping) {
    --button-normal-bg: var(--control-bg);
    --button-normal-text: var(--control-state-accent, var(--control-border));
    --button-normal-border: var(--control-state-accent, var(--control-border));
    --button-hover-bg: var(--control-bg);
    --button-hover-text: var(--control-state-accent, var(--control-hover-border));
    --button-hover-border: var(--control-state-accent, var(--control-hover-border));
    --button-focus-bg: var(--control-bg);
    --button-focus-text: var(--control-state-accent, var(--primary));
    --button-focus-border: var(--control-state-accent, var(--primary));
    --button-active-bg: var(--control-bg);
    --button-active-text: var(--control-state-accent, var(--primary));
    --button-active-border: var(--control-state-accent, var(--primary));
}

/* Generic filled danger. Start/Stop and upload-stop use the outline variant below. */
#hnmmoApp :where(.btn-danger):not(.module-start-stop) {
    --button-normal-bg: var(--button-danger);
    --button-normal-text: #ffffff;
    --button-normal-border: var(--button-danger);
    --button-hover-bg: var(--button-danger-hover);
    --button-hover-text: #ffffff;
    --button-hover-border: var(--button-danger-hover);
    --button-focus-bg: var(--button-danger-hover);
    --button-focus-text: #ffffff;
    --button-focus-border: var(--button-danger-hover);
    --button-active-bg: var(--button-danger-active);
    --button-active-text: #ffffff;
    --button-active-border: var(--button-danger-active);
}

/* Danger outline state. */
#hnmmoApp :where(.module-start-stop.btn-danger, .btn-upload-inline.btn-stop) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--button-danger);
    --button-normal-border: var(--button-danger);
    --button-hover-bg: var(--button-danger);
    --button-hover-text: #ffffff;
    --button-hover-border: var(--button-danger);
    --button-focus-bg: var(--button-danger);
    --button-focus-text: #ffffff;
    --button-focus-border: var(--button-danger);
    --button-active-bg: var(--button-danger-active);
    --button-active-text: #ffffff;
    --button-active-border: var(--button-danger-active);
}

/* Warning / stopping outline state. */
#hnmmoApp :where(.btn-orange, .btn-upload-inline.btn-stopping) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--button-warning);
    --button-normal-border: var(--button-warning);
    --button-hover-bg: var(--button-warning);
    --button-hover-text: #ffffff;
    --button-hover-border: var(--button-warning);
    --button-focus-bg: var(--button-warning);
    --button-focus-text: #ffffff;
    --button-focus-border: var(--button-warning);
    --button-active-bg: var(--button-warning-active);
    --button-active-text: #ffffff;
    --button-active-border: var(--button-warning-active);
    --button-disabled-opacity: 1;
    --button-disabled-cursor: wait;
}

/* Studio neutral buttons keep Studio's neutral visual but use the same state engine. */
#hnmmoApp :where(.studio-button-secondary, .studio-icon-button, .studio-icon-picker-trigger) {
    --button-normal-bg: var(--control-bg);
    --button-normal-text: var(--control-text);
    --button-normal-border: var(--surface-border);
    --button-hover-bg: var(--control-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--primary);
    --button-focus-bg: var(--control-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: var(--control-hover-bg);
    --button-active-text: var(--primary);
    --button-active-border: var(--primary);
    --button-disabled-opacity: 0.42;
}

#hnmmoApp :where(.studio-delete-button) {
    --button-normal-text: var(--button-danger);
    --button-hover-text: var(--button-danger-hover);
    --button-focus-text: var(--button-danger-hover);
    --button-active-text: var(--button-danger-active);
}

/* Studio preview tree buttons are surface rows rather than framed buttons. */
#hnmmoApp :where(.studio-preview-group-button) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-text);
    --button-normal-border: transparent;
    --button-hover-bg: var(--surface-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: transparent;
    --button-focus-bg: var(--surface-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: transparent;
    --button-active-bg: var(--surface-hover-bg);
    --button-active-text: var(--control-text);
    --button-active-border: transparent;
}

/* Standalone icon actions. */
#hnmmoApp :where(.server-url-copy-btn, .btn-column-settings-icon, .copy-custom-back-button) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-placeholder);
    --button-normal-border: transparent;
    --button-hover-bg: transparent;
    --button-hover-text: var(--primary);
    --button-hover-border: transparent;
    --button-focus-bg: transparent;
    --button-focus-text: var(--primary);
    --button-focus-border: transparent;
    --button-active-bg: transparent;
    --button-active-text: var(--primary-active);
    --button-active-border: transparent;
}

#hnmmoApp :where(.btn-column-settings-icon.active) {
    --button-state-bg: transparent !important;
    --button-state-text: var(--primary) !important;
    --button-state-border: transparent !important;
}

/* Embedded icons inherit the parent field state. */
#hnmmoApp :where(.password-toggle-btn, .server-url-copy-btn-trigger, .custom-spinner-btn) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-icon-color, var(--control-icon-normal, var(--control-placeholder)));
    --button-normal-border: transparent;
    --button-hover-bg: transparent;
    --button-hover-text: var(--control-icon-color, var(--control-hover-border));
    --button-hover-border: transparent;
    --button-focus-bg: transparent;
    --button-focus-text: var(--control-icon-color, var(--primary));
    --button-focus-border: transparent;
    --button-active-bg: transparent;
    --button-active-text: var(--control-icon-color, var(--primary));
    --button-active-border: transparent;
}

/* Dropdown/button triggers that visually behave like fields. */
#hnmmoApp :where(.custom-select-trigger, .config-native-select-trigger, .settings-native-select-trigger, .items-per-page-custom-trigger, .verify-multi-trigger, .studio-flag-picker-trigger) {
    --button-normal-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-normal-text: var(--control-text);
    --button-normal-border: var(--control-border);
    --button-hover-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--control-hover-border);
    --button-focus-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

#hnmmoApp :where(.custom-select.active > .custom-select-trigger, .config-native-select.open > .config-native-select-trigger, .settings-native-select.open > .settings-native-select-trigger, .items-per-page-custom.open > .items-per-page-custom-trigger, .verify-multi-select.is-open > .verify-multi-trigger) {
    --button-state-bg: var(--dropdown-control-surface, var(--control-bg)) !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: var(--primary) !important;
}

/* Log level trigger keeps its composite surface; the parent owns the outer border. */
#hnmmoApp :where(.log-level-trigger) {
    --button-normal-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-normal-text: var(--control-text);
    --button-normal-border: transparent;
    --button-hover-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-hover-text: var(--control-text);
    --button-hover-border: transparent;
    --button-focus-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-focus-text: var(--control-text);
    --button-focus-border: transparent;
    --button-active-bg: var(--dropdown-control-surface, var(--control-bg));
    --button-active-text: var(--control-text);
    --button-active-border: transparent;
}

#hnmmoApp :where(.log-level-select.is-open .log-level-trigger) {
    --button-state-bg: var(--dropdown-control-surface, var(--control-bg)) !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: transparent !important;
}

/* Popup option button. Only the left accent border is visible in its geometry. */
#hnmmoApp :where(.log-level-option) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--dropdown-option-text);
    --button-normal-border: transparent;
    --button-hover-bg: transparent;
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--primary);
    --button-focus-bg: transparent;
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: transparent;
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

#hnmmoApp :where(.log-level-option.is-selected) {
    --button-state-bg: transparent !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: var(--primary) !important;
}

/* Mobile sidebar launcher uses the standard primary outline language. */
#hnmmoApp :where(.left-menu-mobile-toggle) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--primary);
    --button-normal-border: var(--primary);
    --button-hover-bg: var(--primary);
    --button-hover-text: var(--left-sidebar-icon-on-primary, var(--action-on-primary));
    --button-hover-border: var(--primary);
    --button-focus-bg: var(--primary);
    --button-focus-text: var(--left-sidebar-icon-on-primary, var(--action-on-primary));
    --button-focus-border: var(--primary);
    --button-active-bg: var(--primary-active);
    --button-active-text: var(--left-sidebar-icon-on-primary, var(--action-on-primary));
    --button-active-border: var(--primary-active);
}

#hnmmoApp :where(.left-menu-mobile-toggle.is-open) {
    --button-state-bg: var(--primary) !important;
    --button-state-text: var(--left-sidebar-icon-on-primary, var(--action-on-primary)) !important;
    --button-state-border: var(--primary) !important;
}

/* Sidebar navigation buttons. */
#hnmmoApp :where(.left-menu-nav-item) {
    --button-normal-bg: transparent;
    --button-normal-text: rgba(var(--control-text-rgb), 0.62);
    --button-normal-border: transparent;
    --button-hover-bg: var(--dropdown-option-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--primary);
    --button-focus-bg: var(--dropdown-option-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: var(--dropdown-option-hover-bg);
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

#hnmmoApp :where(.left-menu-nav-parent) {
    --button-normal-bg: transparent;
    --button-normal-text: inherit;
    --button-normal-border: transparent;
    --button-hover-bg: transparent;
    --button-hover-text: inherit;
    --button-hover-border: transparent;
    --button-focus-bg: transparent;
    --button-focus-text: inherit;
    --button-focus-border: transparent;
    --button-active-bg: transparent;
    --button-active-text: inherit;
    --button-active-border: transparent;
}

#hnmmoApp :where(.left-menu-nav-item:not(.left-menu-nav-parent).active) {
    --button-state-bg: transparent !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: var(--primary) !important;
}

#hnmmoApp :where(.left-menu-nav-toggle) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--primary);
    --button-normal-border: transparent;
    --button-hover-bg: transparent;
    --button-hover-text: var(--primary);
    --button-hover-border: transparent;
    --button-focus-bg: transparent;
    --button-focus-text: var(--primary);
    --button-focus-border: transparent;
    --button-active-bg: transparent;
    --button-active-text: var(--primary-active);
    --button-active-border: transparent;
}

/* Studio segmented tabs. */
#hnmmoApp :where(.studio-mode-tab, .studio-asset-kind-tab) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-muted-text, #7e8a88);
    --button-normal-border: transparent;
    --button-hover-bg: var(--surface-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: transparent;
    --button-focus-bg: var(--surface-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: transparent;
    --button-active-bg: var(--surface-hover-bg);
    --button-active-text: var(--control-text);
    --button-active-border: transparent;
}

#hnmmoApp :where(.studio-mode-tab.is-active, .studio-asset-kind-tab.is-active) {
    --button-state-bg: var(--primary) !important;
    --button-state-text: #ffffff !important;
    --button-state-border: transparent !important;
}

/* Studio root tree button. */
#hnmmoApp :where(.studio-root-node, .studio-tree-group-row, .studio-tree-item-row) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-text);
    --button-normal-border: transparent;
    --button-hover-bg: var(--surface-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: transparent;
    --button-focus-bg: var(--surface-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: rgba(var(--primary-rgb), .10);
    --button-active-text: var(--control-text);
    --button-active-border: rgba(var(--primary-rgb), .52);
}

#hnmmoApp :where(.studio-root-node.is-selected, .studio-tree-group-row.is-selected, .studio-tree-item-row.is-selected) {
    --button-state-bg: rgba(var(--primary-rgb), .10) !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: rgba(var(--primary-rgb), .52) !important;
}

/* Studio icon picker option. */
#hnmmoApp :where(.studio-icon-option) {
    --button-normal-bg: var(--control-bg);
    --button-normal-text: var(--control-text);
    --button-normal-border: var(--surface-border);
    --button-hover-bg: rgba(var(--primary-rgb), .10);
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--primary);
    --button-focus-bg: rgba(var(--primary-rgb), .10);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: rgba(var(--primary-rgb), .14);
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

#hnmmoApp :where(.studio-icon-option.is-selected) {
    --button-state-bg: rgba(var(--primary-rgb), .10) !important;
    --button-state-text: var(--control-text) !important;
    --button-state-border: var(--primary) !important;
}

/* Studio flag choices. */
#hnmmoApp :where(.studio-flag-option) {
    --button-normal-bg: transparent;
    --button-normal-text: var(--control-text);
    --button-normal-border: transparent;
    --button-hover-bg: var(--surface-hover-bg);
    --button-hover-text: var(--control-text);
    --button-hover-border: var(--primary);
    --button-focus-bg: var(--surface-hover-bg);
    --button-focus-text: var(--control-text);
    --button-focus-border: var(--primary);
    --button-active-bg: var(--surface-hover-bg);
    --button-active-text: var(--control-text);
    --button-active-border: var(--primary);
}

/* Preserve icon inheritance inside ordinary buttons.
   Dedicated form-control icons (eye, dropdown chevrons, NumberUpDown arrows)
   are intentionally excluded: shared-control-state.css owns their muted/hover/Primary colors. */
#hnmmoApp :where(
    .btn,
    .btn-toggle-file-config,
    .header-icon,
    .theme-color-reset-button,
    .btn-upload-inline,
    .btn-column-settings,
    .btn-column-settings-icon,
    .copy-custom-back-button,
    .copy-custom-icon-button,
    .server-url-copy-btn,
    .server-url-copy-btn-trigger,
    .studio-button,
    .studio-icon-button,
    .studio-icon-picker-trigger,
    .studio-preview-group-button,
    .studio-mode-tab,
    .studio-asset-kind-tab,
    .studio-flag-picker-trigger,
    .studio-root-node,
    .studio-tree-group-row,
    .studio-tree-item-row,
    .studio-icon-option,
    .studio-flag-option,
    .verify-multi-trigger,
    .log-level-trigger,
    .log-level-option,
    .left-menu-mobile-toggle,
    .left-menu-nav-item,
    .left-menu-nav-toggle,
    .page-info
) :where(svg, path, circle, rect, span) {
    color: inherit !important;
}

/* Color preview is a swatch, not a semantic action color. Only normalize states. */
#hnmmoApp .theme-color-preview-button,
#hnmmoApp .theme-color-preview-button:is(:hover, :focus-visible, :active) {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}


/* Final popup-title contract. Loaded last so Language and Theme Color render identically. */
#hnmmoApp :is(.language-menu-title, .theme-color-menu-title),
#hnmmoApp :is(.language-menu-title, .theme-color-menu-title) :where(span, .language-menu-title-text) {
    color: rgb(var(--control-text-rgb)) !important;
    -webkit-text-fill-color: rgb(var(--control-text-rgb)) !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
    font-family: inherit !important;
    font-size: var(--form-label-font-size) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Absolute embedded icon buttons keep their vertical centering stable on every pointer state.
   The generic button :active rule clears transform; these controls need translateY(-50%) for layout. */
#hnmmoApp :is(.server-url-copy-btn-trigger, .password-toggle-btn),
#hnmmoApp :is(.server-url-copy-btn-trigger, .password-toggle-btn):is(:hover, :focus, :focus-visible, :active) {
    transform: translateY(-50%) !important;
    transition: none !important;
    animation: none !important;
}


/* Sidebar module icons stay Primary in every state.
   Text keeps the normal navigation state; only the leading module icon is theme-colored. */
#hnmmoApp .left-menu-nav-icon,
#hnmmoApp .left-menu-nav-item:is(:hover, :focus-visible, :active) .left-menu-nav-icon,
#hnmmoApp .left-menu-nav-item.active .left-menu-nav-icon {
    color: var(--primary) !important;
    stroke: currentColor !important;
    background-color: var(--primary) !important;
}