/* Native <dialog> shells: centred modal and right-hand drawer. */
dialog { padding: 0; border: 0; background: transparent; color: var(--color-text); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(15, 18, 26, .55); backdrop-filter: blur(2px); }

.modal {
  width: min(1120px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal[open] { animation: scale-in .28s var(--ease); }
.modal[open]::backdrop { animation: fade-in .28s; }
.modal--wide { width: min(1160px, calc(100% - 32px)); }
.modal__inner { position: relative; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 40px; overscroll-behavior: contain; }
.modal__close { position: absolute; top: 20px; right: 20px; z-index: 3; }

.drawer {
  margin: 0 0 0 auto; width: min(460px, 100%);
  height: 100dvh; max-height: 100dvh;
  background: #fff; box-shadow: var(--shadow-lg);
}
.drawer[open] { animation: slide-in-right .32s var(--ease); }

@media (max-width: 600px) {
  .modal, .modal--wide { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal__inner { max-height: 100dvh; padding: 24px 16px 32px; }
  .modal__close { top: 12px; right: 12px; }
}