/* ═══ NIO Tables — горизонтальный скролл широких таблиц + индикатор-прогресс ═══
   Применяется к таблицам внутри виджетов Text Editor (SEO-текст) и к .table-scroll.
   Скролл появляется только когда таблица шире контейнера (мобильные). Индикатор —
   тонкий трек с «бегунком» акцентного цвета под таблицей; виден только при переполнении. */

.table-scroll, .nio-tw{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* touch-action по умолчанию (auto): вертикальная прокрутка страницы работает
       даже пальцем по таблице; горизонтально — чётким боковым свайпом или бегунком */
    scrollbar-width: none;           /* прячем нативный скроллбар — рисуем свой */
    max-width: 100%;
}
.table-scroll::-webkit-scrollbar, .nio-tw::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* таблица держит свою «естественную» ширину и скроллится, а не ужимается */
.nio-tw > table{ min-width: max-content; margin: 0; }

/* ── Индикатор под таблицей: бегунок (можно тащить) ── */
.nio-tw__bar{
    position: relative;
    height: 3px;
    margin: 12px 2px 18px;            /* больше отступ снизу — текст не липнет к бегунку */
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    display: none;                    /* показывается JS-классом is-on только при переполнении */
    touch-action: none;
    cursor: pointer;
}
.nio-tw__bar.is-on{ display: block; }
.nio-tw__thumb{
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 40px;                      /* стартовое, реальную ширину ставит JS */
    border-radius: 999px;
    background: #000;
    cursor: grab;
    will-change: transform;
}
.nio-tw__thumb:active{ cursor: grabbing; }

/* тёмная тема — трек чуть светлее, бегунок белый */
@media (prefers-color-scheme: dark){
    .nio-tw__bar{ background: rgba(255,255,255,.14); }
    .nio-tw__thumb{ background: #fff; }
}