/* noord-digital-dialog: a window over its page (Modaal in the prototype), built on the native <dialog> shown with
   showModal(): the browser gives it the top layer, the focus trap and Escape. The window stands in the middle of the
   picture, never of the page, and is at most one picture high: the head and the foot stay, the body scrolls.
   Opened and closed by wwwroot/noord-digital/shell.js. */
.noord-digital-dialog {
    width: calc(100% - 48px);
    max-width: 42rem;
    max-height: calc(100dvh - 48px - var(--edge-top, 0px) - var(--edge-bottom, 0px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    background: var(--surface-muted-color);
    box-shadow: var(--overlay-shadow);
    color: var(--text-color);
}

.noord-digital-dialog[open] {
    display: flex;
    flex-direction: column;
    animation: noord-digital-dialog-in .24s cubic-bezier(.23, 1, .32, 1);
}

.noord-digital-dialog::backdrop {
    background: var(--overlay-color);
    animation: noord-digital-dialog-fade .16s ease-out;
}

.noord-digital-dialog--narrow {
    max-width: 32rem;
}

.noord-digital-dialog__head {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
}

.noord-digital-dialog__heading {
    min-width: 0;
}

.noord-digital-dialog__title {
    margin: 0;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.noord-digital-dialog__caption {
    margin: 2px 0 0;
    color: var(--muted-text-color);
    font-size: 12px;
    line-height: 1.5;
}

/* The cross: 40 points behind a mouse, 48 on a touch screen; the sign keeps its size. */
.noord-digital-dialog__close {
    display: flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--control-radius);
    background: transparent;
    color: var(--muted-text-color);
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

@media (pointer: coarse) {
    .noord-digital-dialog__close {
        width: 48px;
        height: 48px;
        margin: -4px -8px 0 0;
    }
}

.noord-digital-dialog__close:hover,
.noord-digital-dialog__close:focus-visible {
    background: var(--page-color);
    color: var(--text-color);
}

.noord-digital-dialog__close .icon {
    width: 16px;
    height: 16px;
}

.noord-digital-dialog__body {
    min-height: 0;
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.noord-digital-dialog__foot {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--page-color);
}

/* The fields of a window: a small capital label over a control on the page colour, gold when it has focus. */
.noord-digital-dialog__label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--muted-text-color);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.noord-digital-dialog__control {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--control-radius);
    background: var(--page-color);
    color: var(--text-color);
    font: inherit;
    font-size: 12px;
    line-height: 1.6;
    outline: none;
    transition: border-color .15s ease-out;
}

.noord-digital-dialog__control::placeholder {
    color: var(--muted-text-color);
}

.noord-digital-dialog__control:focus {
    border-color: var(--accent-color);
}

.noord-digital-dialog__control[aria-invalid="true"] {
    border-color: var(--danger-color);
}

.noord-digital-dialog__help {
    margin: 4px 0 0;
    color: var(--muted-text-color);
    font-size: 11px;
    line-height: 1.5;
}

.noord-digital-dialog__error {
    margin: 4px 0 0;
    color: var(--danger-color);
    font-size: 11px;
}

@keyframes noord-digital-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }
}

@keyframes noord-digital-dialog-fade {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .noord-digital-dialog[open],
    .noord-digital-dialog::backdrop {
        animation: none;
    }
}