@layer components {
  .dialog {
    width: min(calc(100% - 32px), 420px);
    max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; border: 0;
    border-radius: var(--r-xl);
    background: var(--surface); color: var(--text);
    box-shadow: var(--sh-2);
    overflow: auto;
  }
  .dialog[open] { animation: pop-in .3s var(--spring); }
  .dialog::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  .dialog__content { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-6); text-align: center; }
  .dialog__icon {
    width: 56px; height: 56px; margin-bottom: 6px; display: grid; place-items: center;
    border-radius: 20px; background: var(--danger-soft); color: var(--danger-ink);
  }
  .dialog__title { font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -.02em; }
  .dialog__desc { color: var(--text-2); overflow-wrap: anywhere; }
  .dialog__desc:empty { display: none; }
  .dialog__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; margin-top: var(--sp-4); }
  .dialog__actions > .btn { flex: 1 1 120px; }

  /* Окна календаря (.cal-modal) — нативные <dialog>: скримом служит само окно
     на весь экран, карточка центрируется, клик мимо карточки ловит
     staff_calendar.js (e.target === dialog), закрытие с проверкой незаполненной
     формы остаётся за скриптом, поэтому класс .sheet окнам не назначается.
     Селектор по [open] обязателен: авторское display перебивает UA-скрытие
     закрытого <dialog>, иначе окно было бы видно всегда. */
  dialog.cal-modal {
    position: fixed; inset: 0; z-index: 1000;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: var(--sp-4); border: 0;
    /* transform: none обязателен: legacy центрировал старый div-оверлей через
       translate(-50%, -50%), у <dialog> это уводит окно за левый верхний угол */
    transform: none;
    display: grid; place-items: center;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: none;
    overflow: auto; overscroll-behavior: contain;
  }
  dialog.cal-modal:not([open]) { display: none; }
  /* Скрим рисует само окно, иначе ::backdrop удваит затемнение */
  dialog.cal-modal::backdrop { background: transparent; }

  .cal-modal > .cal-modal-card {
    width: min(100%, 440px);
    max-height: calc(100dvh - 2 * var(--sp-4));
    padding: var(--sp-5);
    border-radius: var(--r-xl);
    background: var(--surface); color: var(--text);
    box-shadow: var(--sh-2);
    overflow: auto;
  }
  @media (max-width: 639px) {
    dialog.cal-modal { padding: var(--sp-3); }
    .cal-modal > .cal-modal-card {
      max-height: calc(100dvh - 2 * var(--sp-3));
      padding: var(--sp-4);
      border-radius: var(--r-l);
    }
  }
}