/* Окно посреди экрана: короткое сообщение, которое нельзя пролистать.

   Живёт в .layout, как и шторка: шкала размеров объявлена там, снаружи
   её нет. Отличие от шторки — место и назначение. Шторка приходит снизу
   и продолжает экран; окно встаёт в середину и его останавливает. */

.dialog {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

.dialog__veil {
  position: absolute;
  inset: 0;
  background: var(--veil);
  animation: veil-in var(--base) var(--ease);
}

/* Карточка не во всю ширину: окно посреди экрана обязано читаться
   как предмет, лежащий поверх, а не как ещё один экран. */
.dialog__panel {
  position: relative;
  width: min(86cqw, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px var(--sheet-shadow);
  animation: dialog-in var(--base) var(--ease);
}

/* Знак крупный: ради него окно и открыли. Квадрат со скруглением —
   та же плитка, что в списке достижений, только больше: человек
   должен узнать значок, по которому нажал. */
.dialog__mark {
  display: grid;
  place-items: center;
  width: 25.6cqw;
  height: 25.6cqw;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--accent-text);
}

.dialog__mark .icon {
  width: 14.4cqw;
  height: 14.4cqw;
}

.dialog__mark--verified {
  background: var(--verified-soft);
  color: var(--verified);
}

.dialog__title {
  font-size: var(--fs-lg);
  font-weight: 750;
  letter-spacing: -.01em;
}

.dialog__text {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-dim);
}

.dialog .btn { width: 100%; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Кнопки внизу столбиком, а не в ряд: «Выйти» и «Отмена» разной
   тяжести, и в ряду они читаются равными. Сверху то, что сделает
   дело, снизу — отказ: палец идёт сверху вниз и последним встречает
   безопасное. */
.dialog__actions {
  width: 100%;
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dialog__actions .btn + .btn { margin-top: 0; }

/* Опасное действие в окне — обведённое, а не залитое: заливка тянет
   палец к себе, а здесь тянуть некуда. Цвет говорит достаточно. */
.dialog .btn--danger {
  min-height: var(--control);
  background: var(--surface);
  border-color: var(--danger);
  color: var(--danger);
}

.dialog .btn--danger:active { background: var(--surface-2); }

/* Знак опасного окна — тем же красным, что и действие под ним:
   человек видит, о чём речь, раньше, чем читает заголовок. */
.dialog__mark--danger {
  background: var(--surface-2);
  color: var(--danger);
}