/* Подтверждение деструктива (#confirm, src/ui/confirm.js) — эппловый action-sheet:
   затемнение-скрим + лист снизу с красной кнопкой действия и отдельной «Отмена».
   Материал/пружина — apple-design §12/§4; токены общие. Оба вьюпорта: на мобиле
   лист снизу под палец, на десктопе — по центру как модалка. */

.cfm {
  position: fixed; inset: 0; z-index: 58;   /* выше шторок(20)/онбординга(55-56), ниже тоста(60)/welcome(80) */
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 max(var(--gutter), var(--safe-r)) 0 max(var(--gutter), var(--safe-l));
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%);
  opacity: 0; transition: opacity 0.24s var(--ease);
}
.cfm--open { opacity: 1; }

/* Лист: приезжает снизу (transform), материализуется под скрим. */
.cfm__sheet {
  width: 100%; max-width: 440px;
  margin-bottom: calc(var(--safe-b) + 12px);
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(22px) scale(0.98);
  transition: transform 0.34s var(--ease-cine);
}
.cfm--open .cfm__sheet { transform: none; }

/* Шапка-карточка: заголовок + пояснение. Матовое стекло таб-бара — как у меню. */
.cfm__head {
  padding: 18px 18px 16px; border-radius: 20px; text-align: center;
  background: rgba(24, 25, 30, 0.64);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-2);
}
.cfm__title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.cfm__msg { margin-top: 7px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--t2); }

/* Кнопки — крупные стеклянные пилюли (тач-цель), тот же фрост. */
.cfm__actions { display: flex; flex-direction: column; gap: 8px; }
.cfm__btn {
  width: 100%; padding: 16px; border-radius: 16px;
  font-size: 16px; font-weight: 700; text-align: center;
  background: rgba(24, 25, 30, 0.64);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-2);
  color: var(--t1);
  transition: transform var(--dur-press) var(--ease), background var(--dur-press) var(--ease);
}
.cfm__btn:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.10); }
.cfm__btn--danger { color: var(--danger); }
.cfm__btn--cancel { color: var(--accent-soft); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .cfm { transition-duration: 0.01ms; }
  .cfm__sheet { transition: none; transform: none; }
}
/* Прозрачность отключена системно — плотный фон, блюр снят. */
@media (prefers-reduced-transparency: reduce) {
  .cfm { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cfm__head, .cfm__btn { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Десктоп: по центру как модалка (у нижней кромки на широком экране лист «плавал» бы). */
@media (min-width: 1024px) {
  .cfm { align-items: center; }
  .cfm__sheet { margin-bottom: 0; }
}