/*
 * Modelbook dialog (.mbd). Every length is in em off --mbd-k, which modelbookDialog.js sets from
 * the visual viewport, so text renders at device-normal size on fixed-width viewport pages too.
 * The site has no dark theme; color-scheme stays light so UA dark modes cannot half-invert it.
 */
dialog.mbd {
    color-scheme: light;
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: none;
    max-height: none;
    font-size: calc(16px * var(--mbd-k, 1));
    line-height: 1.5;
    color: #212529;
}

/* Bootstrap 4 reboot sets dialog to display: block, which would keep a closed dialog painted. */
dialog.mbd:not([open]) {
    display: none;
}

dialog.mbd[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    box-sizing: border-box;
}

dialog.mbd.mbd--sheet[open] {
    align-items: flex-end;
    padding: 0;
}

dialog.mbd::backdrop {
    background: rgb(0 0 0 / 50%);
}

body:has(dialog.mbd:modal) {
    overflow: hidden;
}

.mbd__panel {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(35em, 100%);
    max-height: 100%;
    background: #fff;
    color: #212529;
    border-radius: 0.75em;
    box-shadow: 0 0.5em 2em rgb(0 0 0 / 25%);
    animation: mbd-rise 0.18s ease-out;
}

.mbd--prompt .mbd__panel {
    width: min(27.5em, 100%);
}

.mbd--sheet .mbd__panel,
.mbd--sheet.mbd--prompt .mbd__panel {
    width: 100%;
    max-height: 90%;
    border-radius: 0.75em 0.75em 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: mbd-slide-up;
}

.mbd__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    padding: 1em 1.5em;
    border-bottom: 0.0625em solid #dee2e6;
}

.mbd__title {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.3;
}

/* A round 2.75em (44px at k 1) touch target; the glyph is sized on its span. */
dialog.mbd .mbd__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75em;
    height: 2.75em;
    margin: -0.4375em -0.65625em -0.4375em 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #333;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

dialog.mbd .mbd__close > span {
    font-size: 1.75em;
}

dialog.mbd:not(:has(.jax-attach-loader)) .mbd__close:hover {
    background: #f1f3f5;
    color: #c4848f;
}

.mbd__body {
    padding: 1.5em;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Bootstrap 4 parts inside a markup dialog, rescaled in em so --mbd-k reaches them. The theme sets
 * px line heights on p and headings and a 0.85rem .form-control, which would not follow --mbd-k. */
.mbd__body p {
    line-height: 1.5;
    color: inherit;
}

.mbd__panel :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.3;
}

dialog.mbd .mbd__panel .form-control,
dialog.mbd .mbd__panel .form-control-sm {
    height: auto;
    padding: 0.375em 0.75em;
    font-size: 1em;
    line-height: 1.5;
}

.mbd__panel label {
    font-size: 0.875em;
    margin-bottom: 0.25em;
}

/* Field help text; the theme's small is 70%, which falls under 12px. */
.mbd__panel .form-text {
    font-size: 0.875em;
}

.mbd__body h5 {
    font-size: 1.125em;
}

.mbd__panel .badge {
    font-size: 0.75em;
}

.mbd__message {
    margin: 0;
    color: #212529;
    font-size: 1em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.mbd__details {
    margin-top: 0.5em;
}

dialog.mbd .mbd__detail {
    margin: 0.25em 0 0;
    color: #212529;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mbd__detail-hint,
.mbd__detail-old {
    color: #6c757d;
}

/* Old and new values wrap as wholes, so the new one starts its own line when both do not fit. */
.mbd__detail-old,
.mbd__detail-old + .mbd__detail-value {
    display: inline-block;
}

.mbd__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5em;
    padding: 1em 1.5em;
    border-top: 0.0625em solid #dee2e6;
}

/* A short visible viewport (keyboard up, landscape) scrolls the whole panel, header and footer included. */
dialog.mbd.mbd--short .mbd__panel {
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

dialog.mbd.mbd--short .mbd__body {
    flex: none;
    padding: 1em;
    overflow: visible;
}

.mbd--sheet.mbd--prompt .mbd__footer .mbd__btn {
    flex: 1 1 0;
}

/* The dialog scope outranks the theme skin's .btn radius and link colours without !important. */
dialog.mbd .mbd__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    box-sizing: border-box;
    min-height: 2.75em;
    padding: 0.5em 1.1em;
    border: 0.0625em solid transparent;
    border-radius: 0.375em;
    font: inherit;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

/* The skin's btn-primary, as on the profile page. */
dialog.mbd .mbd__btn--affirm {
    background: #c4848f;
    border-color: #c4848f #c4848f #a0656f;
    color: #fff;
}

@media (hover: hover) {
    dialog.mbd:not(:has(.jax-attach-loader)) .mbd__btn--affirm:hover {
        background: #d19aa3;
        border-color: #d5a2aa #d5a2aa #c4848f;
    }
}

dialog.mbd .mbd__btn--danger {
    background: #c82333;
    border-color: #c82333;
    color: #fff;
}

dialog.mbd .mbd__btn--dismiss {
    background: #f1f3f5;
    border-color: #ced4da;
    color: #212529;
}

/* The framework attach loader slides out after the label. The resting margin cancels the flex gap
 * so labels stay centred. */
dialog.mbd .mbd__btn::after {
    content: '';
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 0;
    height: 1em;
    margin-left: -0.25em;
    border: 0 solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    transition: width 0.25s ease, margin-left 0.25s ease, border-width 0.25s ease, opacity 0.2s ease;
}

dialog.mbd .mbd__btn.jax-attach-loader::after {
    width: 1em;
    margin-left: 0.375em;
    border-width: 0.125em;
    opacity: 1;
    animation: mbd-spin 0.7s linear infinite;
}

dialog.mbd .mbd__btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

dialog.mbd .mbd__btn.jax-attach-loader {
    opacity: 0.85;
    cursor: progress;
}

/* While a request started in the dialog runs, its other controls take no input (modelbookDialog.js). */
dialog.mbd:has(.jax-attach-loader) :is(.mbd__close, .mbd__btn:not(.jax-attach-loader)) {
    opacity: 0.65;
    cursor: not-allowed;
}

dialog.mbd :is(.mbd__btn, .mbd__close):focus:not(:focus-visible) {
    outline: 0;
}

dialog.mbd :is(.mbd__btn, .mbd__close):focus-visible {
    outline: max(2px, 0.125em) solid #c4848f;
    outline-offset: 0.125em;
}

@keyframes mbd-rise {
    from {
        opacity: 0;
        transform: translateY(0.5em);
    }
}

@keyframes mbd-slide-up {
    from {
        transform: translateY(100%);
    }
}

@keyframes mbd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The theme forces touch-screen fields to 16px !important; a layered !important outranks it, so
 * fields follow --mbd-k and never drop under 16px, which keeps iOS from zooming on focus. */
@layer mbd-touch {
    @media (hover: none) and (pointer: coarse) {
        dialog.mbd .mbd__panel :is(input, textarea, select) {
            font-size: max(16px, 1em) !important;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .mbd__panel {
        animation: none;
    }

    dialog.mbd .mbd__btn::after {
        transition: none;
    }
}