.selectInput {
    height: 25px;
    min-height: 25px;
}

.error {
    color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
    display: flex;
    align-items: center;
    justify-content: center;
}

.mermaid {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* #146: the menu now follows the <pre> in the DOM (so the editable contentDOM is
   FIRST and click hit-testing is correct). Lift it back ABOVE the code visually
   with flex `order` — the .codeBlock wrapper is a flex column (see code.css) —
   so the menu still reads as a row above the code, exactly as before, without
   sitting in-flow before the contentDOM. */
.menuGroup {
    order: -1;

    @media print {
        display: none;
    }
}