Template:Scrollable Math/styles.css

/* ============================================================
   CORE SCROLLABLE MATH CONTAINER
   ============================================================ */
.scrollable-math {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    padding: 2px 0 !important; /* tighter */
    margin: 0 !important;

    /* remove any default styling */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   REMOVE CITIZEN BLOCK/BACKGROUND
   ============================================================ */
.mw-parser-output > .scrollable-math {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================
   REMOVE BACKGROUNDS/BORDERS INSIDE THE MATH BLOCK
   ============================================================ */
.scrollable-math *,
.scrollable-math *::before,
.scrollable-math *::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   MULTILINE MATH FORMATTING
   ============================================================ */
.scrollable-math math,
.scrollable-math .mwe-math-element {
    display: block;
    white-space: normal; /* clean line wrapping */
}

/* Wide formulas scroll instead of shrinking */
.scrollable-math .mwe-math-element {
    min-width: max-content;
}

/* ============================================================
   *** REDUCE VERTICAL SPACING (COMPACT MODE) ***
   ============================================================ */
.scrollable-math .mwe-math-element,
.scrollable-math math {
    margin-top: 0.25em !important;
    margin-bottom: 0.25em !important;
    line-height: 1.1 !important;
}

/* ============================================================
   SPECIAL FIX: <pre> INSIDE THE MATH BLOCK
   (this is where your unwanted margins come from)
   ============================================================ */
.scrollable-math pre {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    background: transparent !important;
    border: none !important;
}

/* If Citizen adds whitespace blocks inside pre, kill them */
.scrollable-math pre * {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
   COLLAPSE EMPTY PARAGRAPHS BEFORE / AFTER TEMPLATE
   ============================================================ */
p + .scrollable-math,
.scrollable-math + p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* restore normal text inside scrollable-math */
.scrollable-math,
.scrollable-math * {
    font-size: inherit !important;
    line-height: normal !important;
}