/* Echo Distribution — единый лёгкий контурный стиль иконок. */
.app-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    color: inherit;
    vertical-align: -0.12em;
    transform: none;
    transform-origin: center;
    transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.app-icon--xs { width: 16px; height: 16px; }
.app-icon--sm { width: 18px; height: 18px; }
.app-icon--md { width: 20px; height: 20px; }
.app-icon--lg { width: 24px; height: 24px; }
.app-icon--xl { width: 28px; height: 28px; }

/* Product areas use the shared Echo accent.  Success, warning and error use
   semantic colours only in status components, never to decorate a feature. */
.icon-tile { color: var(--accent-primary, var(--color-accent)); }
.icon-tile[class*="tone-"] { color: var(--accent-primary, var(--color-accent)); }
.icon-tile > :is(.app-icon, svg, i) {
    display: block;
    color: inherit !important;
    stroke: currentColor;
}

/* В полях формы SVG заменяет исходный <i>, но сохраняет Tailwind-классы
   абсолютного позиционирования. Возвращаем вертикальное центрирование,
   которое базовый transform иконки иначе переопределяет. */
.app-icon.absolute.top-1\/2.-translate-y-1\/2 {
    transform: translateY(-50%);
}

/* Пункты навигации используют единый контейнер 28 × 28, а сам знак — 24 × 24. */
.sidebar .app-icon {
    width: 24px;
    height: 24px;
    margin: 0 2px;
    min-width: 24px;
    vertical-align: middle;
}

button:hover .app-icon,
a:hover .app-icon,
[role="button"]:hover .app-icon {
    transform: translateY(-0.5px);
}

button:active .app-icon,
a:active .app-icon,
[role="button"]:active .app-icon {
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .app-icon { transition: none; }
}