/* Место, которое ждёт сервера: строка вместо содержимого.

   Не крутящееся колесо: оно говорит «что-то происходит», но не
   говорит что. Строка словами понятнее и не прыгает. */

.waiting {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-faint);
  animation: waiting-in var(--base) var(--ease);
}

.waiting--bad { color: var(--danger); }

.waiting + .btn { margin-inline: auto; display: flex; max-width: 60cqw; }

@keyframes waiting-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Кнопка, ждущая ответа: гасим, но не прячем — место под ней
   не должно схлопываться. */
.btn.is-busy {
  opacity: .7;
  cursor: progress;
}