/* Shared overlay and card foundations. */
.viewport-cover-grayed-out {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100%;
    height: 100dvh;
    padding: 0;
    margin: 0;
    background: rgb(255 255 255 / 70%);
    text-align: center;
}
.centred-box-with-borders {
    display: inline-block;
    padding: 12px;
    border: 8px solid var(--dark_colour);
    border-radius: 10%;
    background: white;
}
.modal-header {
    padding: 2px 16px;
    background: var(--dark_colour);
    color: var(--light_colour);
    border-radius: 20px;
}
#modalConfirm { z-index: 2100; }
.general-modal {
    top: var(--modal-visible-top, 0px);
    bottom: auto;
    height: var(--modal-visible-height, 100dvh);
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.general-modal-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 540px;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    overflow-wrap: anywhere;
}
.general-modal-card .modal-header { flex: 0 0 auto; border-radius: 6px; }
.general-modal-card h2 { font-size: 22px; }
.general-modal-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 10px 0;
    text-align: left;
    font: 16px/1.35 Arial, sans-serif;
}
.general-modal-body img, .general-modal-body table { max-width: 100%; }
.general-modal-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.general-modal-body label { display: block; }
.general-modal-body input { width: 100%; min-width: 0; font-size: 16px; padding: 4px; }
.general-modal-actions { display: flex; flex: 0 0 auto; justify-content: center; gap: 8px; }
.general-modal-actions .btn { margin: 0; }