/**
 * EcoStat token aliases → Design System (Stage 7)
 * Loaded before cabinet-eco; values resolve to public/css/ds tokens via ecostat-ds.css
 * (ecostat-ds.css is linked last in layout_top — :root vars still cascade globally).
 *
 * ONE source of truth: --ds-* from ecostat-ds.css / public/css/ds/tokens.css
 * This file only keeps --e-* / --lp-* names for existing eco selectors.
 */

:root {
    /* Spacing → DS */
    --e-space-1: var(--ds-space-1, 4px);
    --e-space-2: var(--ds-space-2, 8px);
    --e-space-3: var(--ds-space-3, 12px);
    --e-space-4: var(--ds-space-4, 16px);
    --e-space-5: var(--ds-space-5, 20px);
    --e-space-6: var(--ds-space-6, 24px);
    --e-space-7: var(--ds-space-7, 32px);
    --e-space-8: var(--ds-space-8, 40px);
    --e-space-9: var(--ds-space-9, 48px);
    --e-space-10: var(--ds-space-10, 64px);

    --e-1: var(--e-space-1);
    --e-2: var(--e-space-2);
    --e-3: var(--e-space-3);
    --e-4: var(--e-space-4);
    --e-5: var(--e-space-5);
    --e-6: var(--e-space-6);

    /* Radius → DS */
    --e-radius-xs: var(--ds-radius-sm, 8px);
    --e-radius-sm: var(--ds-radius-sm, 8px);
    --e-radius-md: var(--ds-radius-md, 12px);
    --e-radius-lg: var(--ds-radius-lg, 16px);
    --e-radius-xl: var(--ds-radius-xl, 16px);
    --e-radius-pill: var(--ds-radius-pill, 999px);

    /* Control heights → DS */
    --e-control-h: var(--ds-control-h-md, 36px);
    --e-control-h-lg: var(--ds-control-h-lg, 40px);

    --e-gap: var(--ds-space-grid, 16px);
    --e-stack: var(--ds-space-3, 12px);
    --e-pad-card: var(--ds-space-card, 16px);

    --e-fs-min: var(--ds-fs-caption, 12px);
    --e-fs-xs: var(--ds-fs-caption, 12px);
    --e-fs-sm: var(--ds-fs-caption, 12px);
    --e-fs-md: var(--ds-fs-body, 14px);
    --e-fs-lg: var(--ds-fs-section, 16px);
    --e-fs-xl: var(--ds-fs-page-title, 20px);
    --e-fw-min: 300;
    --e-fw-ui: var(--ds-fw-regular, 400);
    --e-fw-strong: var(--ds-fw-semibold, 600);
    --e-fw-max: var(--ds-fw-semibold, 600);

    --e-shadow-xs: var(--ds-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
    --e-shadow-sm: var(--ds-shadow-sm, 0 1px 1px rgba(15, 23, 42, 0.03), 0 8px 24px -12px rgba(15, 23, 42, 0.14));
    --e-shadow-md: var(--ds-shadow-md, 0 1px 1px rgba(15, 23, 42, 0.04), 0 24px 64px -20px rgba(15, 23, 42, 0.22));
    --e-shadow-1: var(--e-shadow-sm);
    --e-shadow-2: var(--e-shadow-md);
    --e-shadow-accent: var(--ds-shadow-brand, 0 10px 24px rgba(22, 152, 115, 0.18));

    --e-ease: var(--ds-ease, cubic-bezier(0.22, 1, 0.36, 1));
    --e-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --e-hairline: var(--ds-color-border, rgba(15, 23, 42, 0.08));
    --e-border: var(--e-hairline);
    --e-border-strong: var(--ds-color-border-strong, rgba(15, 23, 42, 0.14));
    --e-border-accent: var(--ds-color-border-focus, rgba(22, 152, 115, 0.35));
    --e-glass-bg: rgba(255, 255, 255, 0.66);
    --e-glass-border: rgba(255, 255, 255, 0.55);
    --e-data-bg: var(--ds-color-surface, #fff);
    --e-soft: rgba(15, 23, 42, 0.02);

    --e-info: var(--ds-color-info, #0e7490);
    --e-info-rgb: 14, 116, 144;
    --e-info-soft: var(--ds-color-info-bg, rgba(14, 116, 144, 0.08));
    --e-info-border: rgba(var(--e-info-rgb), 0.22);
    --e-info-strong: rgba(var(--e-info-rgb), 0.14);

    --e-pad: clamp(1rem, 3vw, 2rem);

    /* Landing aliases (guest/landing still may load this file indirectly — keep) */
    --lp-ease: var(--e-ease);
    --lp-ease-soft: var(--e-ease-soft);
    --lp-ease-spring: var(--e-spring);
    --lp-radius-xl: var(--e-radius-xl);
    --lp-radius-lg: var(--e-radius-lg);
    --lp-radius-md: var(--e-radius-md);
    --lp-radius-sm: var(--e-radius-sm);
    --lp-shadow-1: var(--e-shadow-1);
    --lp-shadow-2: var(--e-shadow-2);
    --lp-shadow-accent: var(--e-shadow-accent);
    --lp-glass-bg: var(--e-glass-bg);
    --lp-glass-border: var(--e-glass-border);
    --lp-hairline: var(--e-hairline);
}

/* Layout primitives (not component chrome) */
.controls-row {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--e-space-2);
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    min-width: 0;
    max-width: 100%;
}
.controls-row > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.controls-row::-webkit-scrollbar {
    height: 6px;
}
.controls-row::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: var(--e-radius-pill);
}

.kpi-grid {
    display: grid;
    gap: var(--e-gap);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* KPI-полоса: flex-ряд, карточки min-width + grow; при переполнении — скролл */
.conv-kpi-bar.kpi-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}