/**
 * Всплывающее уведомление. Одно на страницу, содержимое подставляется из JS.
 */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s6);
  transform: translate(-50%, 20px);
  background: var(--surface3);
  border: 1px solid var(--line2);
  border-radius: var(--r-pill);
  padding: 10px 17px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Отказ — красная плашка и время на прочтение (см. ui.js).
   Цвет не единственный признак: у ошибки другой текст и роль alert,
   поэтому она различима и при дальтонизме. */
.toast[data-kind="error"] {
  background: var(--err);
  border-color: var(--err);
  color: #fff;
  font-weight: 500;
}