/* Базовые кнопки: меню, значковые, основная кнопка приложения.
   Часть components/buttons.css; порядок частей важен — см. static/README.md. */
/* Canonical action primitives:
 * - icon-only: .icon-button (+ runtime alias .info-trigger)
 * - text / icon+text: .app-button
 * - compact toggle/filter: .chip-button
 * - navigation rows: .menu-button
 */
.menu-button,
.icon-button,
.app-button,
.chip-button,
.info-trigger {
    /* Press scale token — each button type overrides this to match its visual weight */
    --btn-scale-press: 0.88;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: var(--border-width-base) solid transparent;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 400;
    letter-spacing: 0;
    line-height: var(--type-button-line);
    /* Release transition — transform springs back with overshoot, colors ease-out */
    transition:
        background-color var(--motion-dur-xs) var(--motion-ease),
        border-color var(--motion-dur-xs) var(--motion-ease),
        color var(--motion-dur-xs) var(--motion-ease),
        box-shadow var(--motion-dur-sm) var(--motion-ease),
        opacity var(--motion-dur-sm) var(--motion-ease),
        transform 220ms var(--motion-ease-spring);
}

.menu-button,
.icon-button,
.info-trigger {
    --button-chrome-bg: var(--theme-surface-base);
    --button-chrome-bg-hover: var(--theme-action-secondary-bg-hover);
    --button-chrome-bg-active: var(--theme-action-secondary-bg-active);
    --button-chrome-border: var(--emphasis-action-secondary-border);
    --button-chrome-border-hover: var(--emphasis-action-secondary-border-hover);
    --button-chrome-color: var(--emphasis-action-secondary-color);
    --button-chrome-color-hover: var(--emphasis-action-secondary-color-hover);
    min-height: var(--button-height-unified);
    border-color: var(--button-chrome-border);
    border-radius: var(--button-radius-unified);
    background: var(--button-chrome-bg);
    color: var(--button-chrome-color);
    --button-chrome-bg-selected: var(--control-selected-bg);
    --button-chrome-bg-selected-hover: var(--control-selected-bg-hover);
    --button-chrome-border-selected: var(--control-selected-border);
    --button-chrome-border-selected-hover: var(--control-selected-border-hover);
    --button-chrome-color-selected: var(--control-selected-color);
    --button-chrome-color-selected-hover: var(--control-selected-color-hover);
    --button-icon-filter: var(--icon-filter-adaptive);
    --button-icon-filter-hover: var(--icon-filter-adaptive-hover);
    --button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--button-icon-filter);
}

.menu-button {
    --btn-scale-press: 0.97; /* full-width rows compress very subtly */
    --button-chrome-bg: var(--menu-button-bg, var(--theme-surface-base));
    --button-chrome-bg-hover: var(--menu-button-bg-hover, var(--theme-action-secondary-bg-hover));
    --button-chrome-bg-active: var(--menu-button-bg-active, var(--theme-action-secondary-bg-active));
    --button-chrome-border: var(--menu-button-border, var(--emphasis-action-menu-border));
    --button-chrome-border-hover: var(--menu-button-border-hover, var(--emphasis-action-menu-border-hover));
    --button-chrome-color: var(--menu-button-color, var(--emphasis-action-menu-color));
    --button-chrome-color-hover: var(--menu-button-color-hover, var(--emphasis-action-menu-color-hover));
    width: var(--menu-button-width, 100%);
    min-height: var(--menu-button-min-height, var(--button-height-sm));
    padding: var(--menu-button-padding, var(--control-padding-y-compact) var(--control-padding-x-compact));
    border-radius: var(--menu-button-radius, var(--control-radius));
    justify-content: var(--menu-button-justify, flex-start);
    gap: var(--menu-button-gap, var(--control-gap-wide));
    font-size: var(--menu-button-font-size, inherit);
    font-weight: var(--menu-button-font-weight, inherit);
    line-height: var(--menu-button-line-height, 1.4);
    text-align: left;
}

.icon-button,
.info-trigger:not(.menu-button) {
    --button-icon-box-size: var(--control-icon-button-size-sm);
    --button-icon-size: 16px;
}

.app-button--icon {
    --button-icon-box-size: var(--control-app-icon-size);
    --button-icon-size: var(--control-icon-size-sm);
}

:is(.icon-button, .info-trigger:not(.menu-button), .app-button--icon) {
    width: var(--button-icon-box-size);
    min-width: var(--button-icon-box-size);
    height: var(--button-icon-box-size);
    min-height: var(--button-icon-box-size);
    padding: 0;
    gap: 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-round);
}

/* Override all action-icon sizing so --button-icon-size is the single source of
   truth inside icon-buttons. Without this, action-icon's own flex: 0 0 var(--action-icon-size)
   wins over width: var(--button-icon-size) in flex layout, making the size variable
   non-functional for icon-button callers.
   Systemic guard: --_safe-icon-size caps the icon at (box - 8px) so that if
   --button-icon-box-size is ever reduced without a matching --button-icon-size
   update, the icon shrinks automatically instead of overflowing. */
:is(.icon-button, .info-trigger:not(.menu-button), .app-button--icon) .action-icon {
    --_safe-icon-size: min(var(--button-icon-size), calc(var(--button-icon-box-size) - 8px));
    width: var(--_safe-icon-size);
    height: var(--_safe-icon-size);
    min-width: var(--_safe-icon-size);
    min-height: var(--_safe-icon-size);
    flex: 0 0 var(--_safe-icon-size);
}

.app-button {
    --btn-scale-press: 0.96; /* text buttons — moderate compression */
    --app-button-height: var(--button-height-md);
    --app-button-padding-x: var(--button-padding-x-md);
    --app-button-padding-y: 0;
    --app-button-radius: var(--button-radius-unified);
    --app-button-bg: var(--theme-surface-base);
    --app-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --app-button-bg-active: var(--theme-action-secondary-bg-active);
    --app-button-border: var(--emphasis-action-app-border);
    --app-button-border-hover: var(--emphasis-action-app-border-hover);
    --app-button-color: var(--emphasis-action-app-color);
    --app-button-color-hover: var(--emphasis-action-app-color-hover);
    min-height: var(--app-button-height);
    padding: var(--app-button-padding-y) var(--app-button-padding-x);
    border-color: var(--app-button-border);
    border-radius: var(--app-button-radius);
    background: var(--app-button-bg);
    color: var(--app-button-color);
    --app-button-bg-selected: var(--control-selected-bg);
    --app-button-bg-selected-hover: var(--control-selected-bg-hover);
    --app-button-border-selected: var(--control-selected-border);
    --app-button-border-selected-hover: var(--control-selected-border-hover);
    --app-button-color-selected: var(--control-selected-color);
    --app-button-color-selected-hover: var(--control-selected-color-hover);
    --app-button-icon-filter: var(--icon-filter-adaptive);
    --app-button-icon-filter-hover: var(--icon-filter-adaptive-hover);
    --app-button-icon-filter-selected: var(--icon-filter-brand);
    --icon-filter: var(--app-button-icon-filter);
}

.app-button--icon {
    --btn-scale-press: 0.88; /* icon-only app-button — same spring as icon-button */
    --app-button-icon-size: var(--control-app-icon-size);
    --app-button-height: var(--app-button-icon-size);
    --app-button-padding-x: 0;
    --app-button-padding-y: 0;
    --app-button-radius: var(--radius-round);
    width: var(--app-button-icon-size);
    min-width: var(--app-button-icon-size);
    height: var(--app-button-icon-size);
    min-height: var(--app-button-icon-size);
    padding: 0;
    aspect-ratio: 1 / 1;
}

.app-button--quiet {
    --app-button-bg: var(--theme-surface-base);
    --app-button-bg-hover: var(--theme-action-secondary-bg-hover);
    --app-button-bg-active: var(--theme-action-secondary-bg-active);
    --app-button-border: var(--theme-border-control);
    --app-button-border-hover: var(--theme-border-control-hover);
    --app-button-color: var(--emphasis-action-quiet-color);
    --app-button-color-hover: var(--emphasis-action-quiet-color-hover);
}

.app-button--primary {
    --app-button-bg: var(--emphasis-action-cta-bg);
    --app-button-bg-hover: var(--emphasis-action-cta-bg-hover);
    --app-button-bg-active: var(--emphasis-action-cta-bg-active);
    --app-button-border: var(--emphasis-action-cta-border);
    --app-button-border-hover: var(--emphasis-action-cta-border-hover);
    --app-button-color: var(--emphasis-action-cta-color);
    --app-button-color-hover: var(--emphasis-action-cta-color);
}

.app-button--secondary {
    --app-button-bg: var(--theme-surface-subsection);
    --app-button-bg-hover: var(--theme-surface-subtle);
    --app-button-bg-active: var(--theme-action-secondary-bg-hover);
    --app-button-border: var(--theme-border-control);
    --app-button-border-hover: var(--theme-border-control-hover);
    --app-button-color: var(--theme-text-strong);
    --app-button-color-hover: var(--theme-text-strong);
}

.app-button--danger {
    --app-button-bg: var(--emphasis-action-chip-danger-bg);
    --app-button-bg-hover: var(--emphasis-action-chip-danger-bg-hover);
    --app-button-bg-active: var(--emphasis-action-chip-danger-bg-hover);
    --app-button-border: var(--emphasis-action-chip-danger-border);
    --app-button-border-hover: var(--emphasis-action-chip-danger-border-hover);
    --app-button-color: var(--emphasis-action-chip-danger-color);
    --app-button-color-hover: var(--emphasis-action-chip-danger-color-hover);
}

/* Залитый вариант — для подтверждения необратимого действия, где контурной
   кнопки мало. Отдельным модификатором, а не инлайновым стилем в шаблоне. */
.app-button--danger-solid {
    --app-button-bg: var(--theme-action-danger-bg);
    --app-button-bg-hover: var(--theme-action-danger-bg-hover);
    --app-button-bg-active: var(--theme-action-danger-bg-active);
    --app-button-border: var(--theme-action-danger-bg);
    --app-button-border-hover: var(--theme-action-danger-bg-hover);
    --app-button-color: var(--theme-action-danger-fg);
    --app-button-color-hover: var(--theme-action-danger-fg);
}

.icon-button--quiet {
    --button-chrome-bg: var(--theme-surface-base);
    --button-chrome-bg-hover: var(--theme-action-secondary-bg-hover);
    --button-chrome-bg-active: var(--theme-action-secondary-bg-active);
    --button-chrome-border: var(--theme-border-control);
    --button-chrome-border-hover: var(--theme-border-control-hover);
    --button-chrome-color: var(--emphasis-action-quiet-color);
    --button-chrome-color-hover: var(--emphasis-action-quiet-color-hover);
}

.icon-button--drag-handle {
    cursor: grab;
    touch-action: none;
}

.app-button,
.menu-button,
.chip-button {
    white-space: nowrap;
}