/* Оповещение поверх экрана. Появляется по центру колонки, живёт пару
   секунд и уходит само.

   Полупрозрачное с размытием: под ним видно тот самый экран, где
   человек нажал, — плашка сообщает, а не перекрывает. Ничего не
   спрашивает и ничего не требует закрывать, поэтому кнопки в ней нет:
   пропала сама — значит, дело закрыто.

   Цвет один на обе темы. Это не часть экрана, а сообщение поверх него,
   и оно должно читаться одинаково в светлом кабинете и в тёмном. */

.toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 84%;
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
  background: var(--toast-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  /* Не круглая пилюля: у неё края съедают вторую строку, и фраза
     из трёх слов выглядит зажатой. Скругление как у карточки —
     форма держит и одну строку, и две. */
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px var(--sheet-shadow);
  color: var(--toast-text);
  transform: translate(-50%, -50%);
  animation: toast-in var(--base) var(--ease);
  pointer-events: none;
}

.toast.is-going { animation: toast-out var(--base) var(--ease) forwards; }

.toast__mark {
  flex: none;
  width: var(--sp-10);
  height: var(--sp-10);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--toast-mark);
  color: var(--accent-text);
}

.toast__mark .icon {
  width: var(--fs-lg);
  height: var(--fs-lg);
}

/* Строка не переносится по одному слову: короткая фраза должна
   ложиться в одну строку, длинная — в две ровные, а не в три
   с сиротой на конце. */
.toast__text {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -52%) scale(.98); }
}