/* Статус. Ни одно состояние не показывается одним цветом: значок, слово, заливка. */
.sc-badge{display:inline-flex;align-items:center;gap:var(--sc-space-4);
  padding:4px var(--sc-space-12);border-radius:var(--sc-radius-pill);
  font-size:var(--sc-text-caption);font-weight:var(--sc-fw-medium);line-height:1.4;white-space:normal}
.sc-badge--neutral{background:var(--sc-ink-100);color:var(--sc-ink-800)}
.sc-badge--ink{background:var(--sc-primary);color:var(--sc-primary-on)}
.sc-badge--success{background:var(--sc-success);color:var(--sc-success-on)}
.sc-badge--warning{background:var(--sc-warning);color:var(--sc-warning-on)}
.sc-badge--danger{background:var(--sc-danger);color:var(--sc-danger-on)}
.sc-badge--outline{background:var(--sc-surface);color:var(--sc-text);box-shadow:inset 0 0 0 1px var(--sc-border-strong)}

/* Строка сообщения. Подложка нейтральная, цвет живёт в значке: цветных тинтов в
   системе нет. */
.sc-note{display:flex;align-items:flex-start;gap:var(--sc-space-12);
  padding:var(--sc-space-16);border-radius:var(--sc-radius);background:var(--sc-status-surface);
  border:var(--sc-rule-w-hair) solid var(--sc-hairline);font-size:var(--sc-text-body-sm);line-height:1.55}
.sc-note__icon{margin-block-start:1px}
.sc-note--success .sc-note__icon{color:var(--sc-success)}
.sc-note--warning .sc-note__icon{color:var(--sc-warning)}
.sc-note--danger{border-color:var(--sc-danger);border-width:var(--sc-rule-w)}
.sc-note--danger .sc-note__icon{color:var(--sc-danger)}
.sc-note--info .sc-note__icon{color:var(--sc-acc-700)}
/* ПОЛЯ АБЗАЦЕВ ЗАДАЁТ ПЛАШКА, А НЕ БРАУЗЕР - и до 15.09.2026 их задавал браузер.
   Строки плашки печатаются тегом `p`, у которого умолчание `margin:1em 0`, то есть 16
   сверху и снизу; сброса в кабинете нет ни общего, ни здесь. Отсюда два следствия, и оба
   замерены на живом экране: значок вставал на 15 точек ВЫШЕ первой строки (владелец
   15.09.2026: «опустить иконку вниз, а то она не на одном уровне с текстом»), а объявленные
   ниже 2 точки между строками схлопывались с браузерными 16 и не значили ничего. То есть
   компонент всё это время работал не так, как написан, и касалось это ВСЕХ его мест -
   профиля, языков, карточки дела, Студии, тарифов. */
.sc-note__title{font-weight:var(--sc-fw-medium);margin-block:0}
.sc-note__body{color:var(--sc-text-muted);margin-block:2px 0}

/* Шаги сборки. Состояние шага несут значок и слово; линия связывает шаги. */
.sc-steps{display:flex;flex-direction:column;gap:var(--sc-space-16);margin:0;padding:0;list-style:none}
.sc-step{display:flex;align-items:flex-start;gap:var(--sc-space-12);font-size:var(--sc-text-body-sm)}
.sc-step__mark{flex:none;inline-size:24px;block-size:24px;border-radius:var(--sc-radius-pill);
  display:flex;align-items:center;justify-content:center;
  border:var(--sc-rule-w) solid var(--sc-ink-500);color:var(--sc-text-muted);font-size:var(--sc-text-caption)}
.sc-step--done .sc-step__mark{background:var(--sc-primary);border-color:var(--sc-primary);color:var(--sc-primary-on)}
.sc-step--active .sc-step__mark{border-color:var(--sc-accent);color:var(--sc-accent)}
.sc-step--queued{color:var(--sc-text-muted)}
.sc-step__label{font-weight:var(--sc-fw-medium)}
.sc-step__note{color:var(--sc-text-muted);font-size:var(--sc-text-caption);display:block}

/* Полоса выполнения: число рядом обязательно, длина полосы сама по себе не читается. */
.sc-progress{block-size:8px;border-radius:var(--sc-radius-pill);background:var(--sc-ink-100);overflow:hidden}
.sc-progress__fill{block-size:100%;background:var(--sc-accent);border-radius:var(--sc-radius-pill);
  transition:inline-size var(--sc-dur-slow) var(--sc-ease)}

.sc-skeleton{background:var(--sc-skeleton);border-radius:var(--sc-radius);block-size:1em}

/* Пусто. Пустой экран объясняет, что тут будет, и даёт одно действие. */
.sc-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sc-space-12);
  padding:var(--sc-space-48) var(--sc-space-24);text-align:center}
.sc-empty__icon{color:var(--sc-ink-500)}

/* Тост. Одна строка, одно действие, ничего красного с числом. */
.sc-toast{display:flex;align-items:center;gap:var(--sc-space-16);
  padding:var(--sc-space-12) var(--sc-space-16);border-radius:var(--sc-radius);
  background:var(--sc-toast-bg);color:var(--sc-toast-on);box-shadow:var(--sc-shadow-overlay);
  font-size:var(--sc-text-body-sm)}
.sc-toast__action{background:transparent;border:0;color:var(--sc-toast-on);font-weight:var(--sc-fw-medium);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-block-size:var(--sc-tap-min);
  padding-inline:var(--sc-space-8)}