dialog.modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    padding: 0;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: inherit;
    z-index: 3600;
}

dialog.modal::backdrop {
    background-color: rgba(0, 0, 0, 0.55);
}

.modal__window {
    position: relative;
    padding: 4em 2em;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--color-background);
    overflow-y: auto;
}

/* A content element sized in vw (the detail views at min(860px, 96vw)) ignores the
   window's padding and clips off a phone-width card. Cap every direct child to the
   window's content box. (A nested .stdform form is handled in form.css, which is
   adopted into the element's shadow tree where this light-DOM selector can't reach.) */
.modal__window > * {
    max-width: 100%;
    box-sizing: border-box;
}
/* On a phone also drop a host's vw min-width floor (e.g. vat-return-view), which
   max-width alone can't beat, so it shrinks to fit. Kept above the card breakpoint. */
@media (max-width: 767px) {
    .modal__window > * {
        min-width: 0;
    }
}

.modal__window--question {
    width: auto;
    max-width: 480px;
    height: auto;
    padding: 2em 2.5em;
}

/* On a wide screen the default full-screen sheet leaves a form stranded top-left
   in a sea of whitespace. Hug the content as a centred card instead (the dialog
   already centres it): a narrow form shrinks to its own width, a wide table keeps
   the width it had on the old sheet — both bounded by 92vw so there is always a
   viewport margin. Mobile keeps the full-screen sheet. Question modals opt out —
   they are already sized cards. */
@media (min-width: 768px) {
    .modal__window:not(.modal__window--question) {
        width: fit-content;
        max-width: 92vw;
        height: auto;
        max-height: calc(100vh - 4em);
    }
}

/* On a phone the 2em side padding + a form sized to 90vw don't both fit, so the
   form clipped off the right edge. Trim the side padding to reclaim the room. */
@media (max-width: 767px) {
    .modal__window:not(.modal__window--question) {
        padding-inline: 1em;
    }
}

.modal__content {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1em;
}

/* A choice, not a confirmation: the options are full sentences ("Deliver it
   yourself (portal, PEPPOL, courier)"), which a single right-aligned row
   squeezes into unreadable slivers inside the 480px question card. */
.modal__actions--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6em;
}

.modal__actions--stacked button {
    width: 100%;
    text-align: center;
}

.modal__close {
    position: absolute;
    top: 24px;
    right: 32px;
    color: var(--color-primary);
}

.modal__close:focus,
.modal__close:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

dialog.modal:not(:target):not([open]) {
    visibility: hidden;
    opacity: 0;
}

/* The default 4em top padding plus a full letter pushed Send/Cancel below the
   fold, which is the one control that must never need scrolling to find. */
.modal__window--reminder-preview {
    padding: 2em 2.5em;
}

/* The reminder preview shows the letter itself, so the card is wider than a
   plain question and the letter gets a scroll box of its own — a dunning mail
   is a full page and must not push the Send button off-screen. The explicit
   width is load-bearing: the desktop window is `fit-content`, against which a
   100%-wide iframe would collapse to nothing. */
.reminder-preview__content {
    width: min(680px, 86vw);
    gap: 1em;
}

.reminder-preview__to {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.reminder-preview__notice {
    color: var(--color-error, #e74c3c);
    margin: 0;
}

.reminder-preview__subject {
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;
}

.reminder-preview__body {
    width: 100%;
    /* Bounded by the viewport, not a fixed height: the letter scrolls inside its
       own box so the Send button stays on screen on a laptop as well as a desk. */
    height: min(22em, 38vh);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    /* The letter is a light-background document whatever the app's theme is. */
    background: #fff;
}