dialog {
    /* MD3 modal size specs */
    max-width: min(560px, 98%); /* MD3 standard width */
    min-height: 160px; /* MD3 minimum height */
    max-height: calc(
        100vh - 96px
    ); /* MD3 recommends margin from screen edges */

    height: fit-content;
    width: fit-content;

    /* MD3 surface and spacing */
    padding: var(--size-4);
    border: none;
    border-radius: var(--radius-x-large);
    background: var(--layer-surface);
    color: var(--on-surface);
    box-shadow: var(--elevation-3); /* MD3 spec for modals */

    /* Positioning */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: var(--layer-modal);

    /* Layout */
    &[open] {
        display: flex;
        flex-direction: column;
        gap: var(--size-3);
    }

    /* Modal header - MD3 specs */
    .modal_header {
        display: flex;
        align-items: center;
        gap: var(--size-3);
        padding-block-end: var(--size-3);

        h2 {
            flex: 1;
            margin: 0;
            padding: 0;
            font-size: var(--font-size-headline-small); /* MD3 typography */
            line-height: var(--font-lineheight-2);
            font-weight: var(--font-weight-6);
            color: var(--on-surface);
        }
    }

    /* Modal body - MD3 specs */
    .modal_body {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        padding-block: var(--size-2);
        color: var(--on-surface-variant);
        font-size: var(--font-size-body-large);
        line-height: var(--font-lineheight-3);
    }

    /* Form specific styles */
    form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 300px;
        gap: var(--size-3);
    }

    /* Actions container - MD3 specs */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--size-2);
        margin-top: auto;
        padding-block-start: var(--size-3);
        border-top: 1px solid var(--outline-variant);
    }
}

/* Scrim/Backdrop - MD3 specs */
dialog::backdrop {
    background: rgba(0, 0, 0, 0.32); /* MD3 scrim opacity */
    position: fixed;
    inset: 0;
    z-index: var(--layer-scrim);
}

/* Alternative scrim for browsers not supporting dialog */
.scrim {
    background: rgba(0, 0, 0, 0.32); /* MD3 scrim opacity */
    position: fixed;
    inset: 0;
    z-index: var(--layer-scrim);
    display: none;

    &.active {
        display: block;
    }
}