/* widgets/ui/tabs — v1.1.5.883. Лише токени. */
.kp-tabs {
    display: flex;
    min-width: 0;

    /*
     * v1.1.5.992: БАЗОВИЙ ВАРІАНТ ПРОКРУЧУЄТЬСЯ, А НЕ СТИСКАЄТЬСЯ.
     *
     * Було лише `display: flex` — без переносу і без прокрутки. На вузькому екрані flex
     * стискає елементи НИЖЧЕ їхнього вмісту, і підписи вкладок налягають один на одний до
     * повної нечитабельності (скріншот центру керування: «Огляд Особисті Публічний
     * профіль Приватність…» однією кашею).
     *
     * `--pill` мав `flex-wrap: wrap` і тому вцілів; базовий варіант лишався пасткою для
     * будь-кого, хто його вжив без модифікатора.
     *
     * Обрано прокрутку, а не перенос: у горизонтальній стрічці вкладок перенос на другий
     * рядок ламає зв'язок «одна смуга — один рівень навігації», а прокрутка зберігає його
     * і на телефоні, і на десктопі.
     */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.kp-tabs::-webkit-scrollbar { display: none; }

/* Елемент не стискається нижче власного тексту — саме це й давало накладання. */
.kp-tabs > .kp-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* pill — типовий патерн: капсули в рамці */
.kp-tabs--pill {
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--n-line);
    border-radius: var(--n-r-pill);
    background: var(--n-surface-2);
}
.kp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--n-text-dim);
    text-decoration: none;
    font-size: 14px;
    line-height: var(--n-lh-tight);
    transition: background var(--n-dur-fast, .15s) var(--n-ease, ease), color var(--n-dur-fast, .15s) var(--n-ease, ease);
}
.kp-tabs--pill .kp-tab { padding: 7px 14px; border-radius: var(--n-r-pill); }
.kp-tabs--pill.kp-tabs--sm .kp-tab { padding: 5px 11px; font-size: 13px; }
.kp-tab:hover { color: var(--n-text); }
.kp-tabs--pill .kp-tab:hover { background: var(--n-bg-hover); }
.kp-tabs--pill .kp-tab.is-active {
    background: var(--n-accent-soft);
    color: var(--n-text-strong);
    border: 1px solid var(--n-accent-border);
}

/* underline — ряд із підкресленням активної (профіль). Прокрутка й «липкість» лишаються
   за екраном: це його розкладка, а не оформлення вкладки. */
.kp-tabs--underline {
    gap: 26px;
    align-items: stretch;
    border-bottom: 1px solid var(--n-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.kp-tabs--underline::-webkit-scrollbar { display: none; }
.kp-tabs--underline .kp-tab {
    position: relative;
    padding: 15px 0;
    font-weight: var(--n-w-med);
    white-space: nowrap;
}
.kp-tabs--underline .kp-tab.is-active { color: var(--n-text-strong); }
.kp-tabs--underline .kp-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--n-accent);
}
.kp-tab:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 3px; }
.kp-tab__count { color: var(--n-text-dim); font-size: .9em; }
.kp-tab.is-active .kp-tab__count { color: var(--n-text-soft); }