/*
 * Modal window.
 *
 * Built on the native dialog element: focus trapping, Escape and inertness of the page behind
 * come from the browser instead of from hand-written script.
 *
 * Every irreversible action, deletion included, passes through the confirmation dialog. A
 * toast is the outcome of an action and can never be the only guard before it.
 */

/*
 * Two widths, and only two.
 *
 * The narrow one is the form of a single column — a name, a couple of fields, a confirmation.
 * It is capped rather than sized to its content so that two forms of different length do not
 * open at two different widths.
 *
 * The wide one is for a form that is genuinely two columns: two halves inside four hundred
 * pixels leave each field about a hundred and eighty, and fields that narrow are read with
 * effort. Wide still means a window, not a page — core.md §8.3 keeps a form off the full width.
 */
.app-dialog {
    width: min(520px, calc(100vw - 2 * var(--space-4)));
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-modal);
}

.app-dialog--wide {
    width: min(780px, calc(100vw - 2 * var(--space-4)));
}

.app-dialog::backdrop {
    background: var(--scrim);
}

/*
 * A form filling a window is bounded by the window, not by its own cap: the cap exists to keep
 * a form off the full width of a page, and inside a dialog that job is already done.
 *
 * The step between fields is one notch tighter than on a page. A page form sits beside its
 * explanations and can breathe; a dialog form has to fit the window whole, because a form the
 * owner scrolls inside a modal is the complaint this exists to answer. One notch, not a special value: the rhythm stays on the spacing scale.
 */
.app-dialog__body.app-form {
    gap: var(--space-3);
    max-width: none;
}

/*
 * A comment box in a dialog starts at two lines, not five.
 *
 * The page default of 96px suits a form standing beside its explanations; in a window it is
 * the tallest thing on screen for a field that is optional on every form that has it. It still
 * grows — the resize handle stays — but it no longer decides whether the form fits.
 */
.app-dialog textarea.app-field__control {
    min-height: 64px;
}

.app-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) 0 var(--space-5);
    font-size: var(--fs-card);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
}

.app-dialog__body {
    padding: var(--space-3) var(--space-5) var(--space-5);
    color: var(--text-2);
}

.app-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

@media (max-width: 480px) {
    .app-dialog__actions .app-btn {
        flex: 1;
    }
}