/* ОТСЕЧКА ДЛИННОГО СПИСКА — ОДНА НА ВЕСЬ САЙТ.
   Пара к js/kslt-otsechka.js. Скрытие — одно правило; раскрытие снимает
   класс, поэтому строка возвращается к своему display сама и файл не знает,
   таблица там или карточки. */

/* !important здесь не уступка, а правило жанра: класс-утилита видимости
   должен перебивать display компонента (.pp-match — grid, .td-row — 
   table-row), иначе отсечка зависит от порядка подключения файлов.
   Так же сделано в Bootstrap (.d-none) и в утилитах Tailwind. */
.kslt-skryta { display: none !important; }

.kslt-more {
    display: block;
    width: 100%;
    /* 44 — ступень шкалы кнопок и нижняя граница цели нажатия */
    height: 44px;
    margin-top: var(--space-2);
    background: transparent;
    border: var(--bw-hair) solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    /* 1 — ступень лестницы межстрочных. У кнопки фиксированной высоты
       строка одна, и normal оставляет значение, которого нет в шкале */
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    /* ПЕРЕЧИСЛЯЕМ, А НЕ «ALL» (07.11). Прогон страницы игрока на en и kg
       замерил здесь то же, что 09.10 замерили на кнопке H2H:
       `:focus-visible` — да, цвет лаймовый, стиль solid, а ШИРИНА 0px.
       `transition: var(--transition-fast)` — это переход по ВСЕМ
       свойствам, включая `outline-width`: контур у клавиатурного
       пользователя не появлялся мгновенно, а наезжал от нуля, и прибор
       честно ловил ноль. Переход нужен, но контур фокуса под него не
       попадает.
       На русской странице проба этого не видела: там список короче, и
       кнопки «Показать все» на экране не бывает. ПРОБА ВИДИТ ТОЛЬКО ТО,
       ЧТО ЕСТЬ В ДАННЫХ. */
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.kslt-more:hover { border-color: var(--accent); color: var(--accent); }
.kslt-more:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 2px; }