/* СЕМЕЙСТВО ЗАГРУЗЧИКОВ. Одно на весь продукт: экран сборки и кабинет берут его
   отсюда, второго в системе нет - так сказано в спеке обоих экранов.

   Жило оно в `build.css`, и кабинет ради четырёх классов тянул двадцать четыре
   килобайта раскладки верстака: сетку плиток, фазу облика, финал и все его
   контейнерные ветки. Ровно тот случай, который этот же проект описывает про значки:
   «получить их на мастере можно было только одним способом - подключить туда полторы
   тысячи строк лендинговой раскладки».

   Каждый загрузчик занят своим: дуга - у одной вещи на подходе, проблеск - у
   заготовки известной формы, точки - у слова, пилюля - у всего экрана. Мягкий край
   проблеска даёт РАЗМЫТИЕ сплошной полосы: градиентов в системе нет.

   РАЗМЕР ЗАДАЁТСЯ ПЕРЕМЕННЫМИ `--sz`, `--w`, `--h`, а не классом-вариантом: у
   заготовок кабинета размеров два десятка (256x26, 173x50, 46%x12), и класс под
   каждый значил бы держать этот список в двух местах. Правило «части не объявляют
   переменных» они не нарушают: оно про семейство `--sc-`, то есть про токены
   системы. Эти три - параметры одной детали, у них есть запасные значения, и снаружи
   их видит только та разметка, которая их же и печатает. */

/* Дуга: тонкое кольцо и вращающийся сегмент. Стоит там, где потом встанет галочка, -
   место не прыгает. */
.sc-b-arc{flex:none;inline-size:var(--sz,26px);block-size:var(--sz,26px);border-radius:var(--sc-radius-pill);
  box-sizing:border-box;box-shadow:inset 0 0 0 2px var(--sc-ink-100);
  border-block-start:2px solid var(--sc-ink-600);animation:sc-b-spin 900ms linear infinite}
@keyframes sc-b-spin{to{rotate:360deg}}

/* `display:block` тут обязателен, хотя на экране сборки заготовка жила и без него:
   там она всегда флекс-элемент, а флекс-элементы блокируются сами. В кабинете
   заготовка стоит и внутри обычного span - у строчного элемента `block-size` не
   применяется вовсе, и голова панели выходила на 22 точки ниже настоящей. */
.sc-b-bar{position:relative;display:block;flex:none;block-size:var(--h,12px);inline-size:var(--w,70%);
  border-radius:var(--sc-radius-pill);background:var(--sc-skeleton);overflow:hidden}
.sc-b-bar::after{content:"";position:absolute;inset-block:-8px;inline-size:32%;
  background:var(--sc-plane);opacity:.7;filter:blur(8px);animation:sc-b-run 1700ms linear infinite}
@keyframes sc-b-run{0%{inset-inline-start:-40%}100%{inset-inline-start:100%}}
/* Крупная заготовка - панель, а не строка: у неё скругление панели. */
.sc-b-bar[data-block]{border-radius:var(--sc-radius)}
/* Заготовка ВО ВСЮ КОРОБКУ. Свойство принадлежит самой заготовке, а не списку
   родителей: иначе каждая новая коробка молча получает полосу в 12 точек, и место
   под превью или картинку остаётся незакрытым. Скругление берётся у коробки. */
.sc-b-bar[data-block="fill"]{position:absolute;inset:0;inline-size:auto;block-size:auto;
  border-radius:inherit}

/* Точки берут цвет строки, поэтому годятся на любой плоскости. */
.sc-b-dots{display:inline-flex;align-items:center;gap:4px}
.sc-b-dots i{inline-size:5px;block-size:5px;border-radius:var(--sc-radius-pill);background:currentColor;
  opacity:.28;animation:sc-b-dot 1200ms var(--sc-ease) infinite}
.sc-b-dots i:nth-child(2){animation-delay:150ms}
.sc-b-dots i:nth-child(3){animation-delay:300ms}
@keyframes sc-b-dot{0%,62%,100%{opacity:.28;translate:0 0}30%{opacity:1;translate:0 -3px}}

/* ПИЛЮЛЯ СОСТОЯНИЯ. Одна на весь экран, внизу. Не появляется в конце, а живёт все
   фазы подряд: это единственная строка, которая всё время говорит, что происходит.
   Куда её сдвинуть по инлайну, решает экран - у кабинета слева боковая полоса. */
.sc-b-pill{position:absolute;inset-block-end:32px;inset-inline:0;z-index:8;margin-inline:auto;
  inline-size:max-content;max-inline-size:calc(100% - 48px);display:flex;align-items:center;gap:10px;
  min-block-size:44px;padding-inline:var(--sc-space-24);border-radius:var(--sc-radius-pill);
  background:var(--sc-plane);color:var(--sc-text);border:var(--sc-rule-w-hair) solid var(--sc-hairline);
  box-shadow:var(--sc-shadow-overlay);font-size:var(--sc-text-body-sm);font-weight:var(--sc-fw-medium)}
/* Готово - пара цветов целиком, а не белый текст на заливке. Второй признак -
   галочка: цвет никогда не единственный признак. */
.sc-b-pill[data-done]{background:var(--sc-success);color:var(--sc-success-on);border-color:transparent}
.sc-b-pill .sc-icon{font-size:20px}
.sc-b-pill__t{display:block;animation:sc-b-rise 380ms var(--sc-ease) both}
@keyframes sc-b-rise{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* Меньше анимаций: ничего не бежит и не вращается. Незаконченность остаётся видна
   вторым признаком - её несут дуга без вращения и форма заготовки. Уровень AA. */
@media (prefers-reduced-motion:reduce){
  .sc-b-bar::after,.sc-b-dots i,.sc-b-arc,.sc-b-pill__t{animation:none}
  .sc-b-arc{border-block-start-color:var(--sc-ink-300)}
}