/*
 * Fix vertical alignment for date/datetime inputs. .kt-input pins a fixed
 * height and no vertical padding, and Chrome then paints the
 * ::-webkit-datetime-edit block at the top of the box rather than centred —
 * so the value sits visibly higher than in the text field next to it. Making
 * the input a flex box centres it. Bare fields need this just as much as the
 * ones sitting in a kt-input-group.
 */
input.kt-input[type="date"],
input.kt-input[type="datetime-local"],
.kt-input-group input[type="date"],
.kt-input-group input[type="datetime-local"] {
    display: flex;
    align-items: center;
}

/* CKEditor5: larger default height + vertical resize */
.ck.ck-editor {
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
    min-height: 350px;
}

.ck.ck-editor__main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ck.ck-editor__editable_inline {
    flex: 1;
}

/*
 * The web debug toolbar is fixed to the bottom of the viewport and paints over
 * the last ~36px of it. The body does not scroll (`lg:overflow-hidden`), so on
 * any page long enough to scroll #scrollable_content the card footer sits
 * flush against the viewport bottom at every scroll offset and the toolbar
 * swallows the clicks on the submit button (e.g. /internal-post/create).
 * Reserving the strip on the body shrinks the whole layout instead, so nothing
 * is ever laid out underneath the toolbar. Only matches when the toolbar is
 * rendered, so prod keeps the original spacing.
 */
body:has(.sf-toolbar),
body:has(.sf-minitoolbar) {
    padding-bottom: 3rem;
}