/* --- ui/skeleton.css: БЛОК 3 — составные элементы ------------------------
   Скелет загрузки раздела.

   Файла нет в разделении файлов брифа: правило «панель не остаётся пустой ни
   одного кадра» дизайн-сессия добавила уже после того, как бриф был закрыт
   (report_designer.md, п.2а). Куратор подтвердил принадлежность файла моей
   зоне (dialog.md, 17.08.2026).

   Скелет повторяет ФОРМУ будущего содержимого: шапка, чипы, строка фильтров,
   строки таблицы. Спиннера по центру нет намеренно — он не показывает, что
   именно грузится, и на медленной сети читается как «зависло».

   --ui-color-skeleton / --ui-color-skeleton-hi — единственная пара, которой в
   tokens.css ещё нет (запрошена в dialog.md, Т1а): до ответа куратора работает
   запасное значение внутри var(), после — заменится само.
   ------------------------------------------------------------------------ */

.ui-skeleton { display: grid; gap: var(--ui-space-4); }

/* Накладка: скелет живёт ПОВЕРХ пустого тела панели, а не вместо него.
   Так фрагмент раздела успевает встать в разметку под скелетом, и снятие
   накладки не вызывает второго перерисовывания с пустым кадром между ними.
   Тело панели прокручиваемое, поэтому inset считается от него — накладка
   не наезжает на шапку панели и не перекрывает её кнопки. */
.ui-skeleton--overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    align-content: start;
    padding: var(--ui-space-5);
    background: var(--ui-color-surface);
    pointer-events: none;
}
.ui-skeleton__row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
}

.ui-sk {
    background: linear-gradient(90deg,
        var(--ui-color-skeleton, rgba(96, 112, 148, .10)) 25%,
        var(--ui-color-skeleton-hi, rgba(96, 112, 148, .18)) 37%,
        var(--ui-color-skeleton, rgba(96, 112, 148, .10)) 63%);
    background-size: 400% 100%;
    border-radius: var(--ui-radius-sm);
    animation: ui-sk-shimmer 1.4s ease infinite;
}
@keyframes ui-sk-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.ui-sk--title { height: var(--ui-space-6); width: 190px; }
.ui-sk--btn { height: var(--ui-control-h-sm); width: 120px; border-radius: var(--ui-radius-pill); margin-left: auto; }
.ui-sk--chip { height: 46px; width: 96px; border-radius: var(--ui-radius-md); }
.ui-sk--line { height: 38px; }
.ui-sk--cell { height: 14px; }

.ui-skeleton__note {
    padding-top: var(--ui-space-1);
    font-size: var(--ui-text-xs);
    color: var(--ui-color-ink-faint);
    text-align: center;
}

/* Бесконечная анимация — первое, что мешает при укачивании и на слабой машине.
   Форма скелета от этого не страдает. */
@media (prefers-reduced-motion: reduce) {
    .ui-sk { animation: none; }
}