/* Dialog / modal on native <dialog class="c-dialog">. Open with showModal() (focus trap + Esc for free).
   The Cariera Magnific shim (compat track) should render into this. Close button: .c-dialog__close. */
.c-dialog { width: min(100% - 2 * var(--space-4), 32rem); max-height: min(90vh, 48rem); padding: 0; color: var(--color-text); background: var(--color-surface); border: 0; border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); overflow: auto; }
.c-dialog--wide { width: min(100% - 2 * var(--space-4), 48rem); }
.c-dialog::backdrop { background: rgb(29 28 42 / 0.55); }
.c-dialog[open] { animation: pn-dialog-in var(--dur-slow) var(--ease-out); }
.c-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6) var(--space-3); background: var(--color-surface); }
.c-dialog__title { font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-semibold); }
.c-dialog__body { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }
.c-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); background: var(--pn-gray-50); }
@media (max-width: 639.98px) {
	.c-dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}
@keyframes pn-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }