/* Preserve the legacy XM component vocabulary below the new design system. */
/* xm4-first is declared before xm-legacy on purpose: an !important declaration in an EARLIER layer beats one in a later
   layer, and no unlayered rule can beat the legacy sheet's !important declarations. Only !important overrides belong in
   it: for normal declarations a later layer wins, so those stay unlayered below. */
@layer xm4-first, xm-legacy;
@import url('/lib/theme/xm-3/css/main.css') layer(xm-legacy);

/* The classic designer's property list (#XMSidePanel, e.g. the Field page's "Type To Filter" list) sits beside the form
   from 1400px. xm-3's main.css capped #main:has(#XMSidePanel) at 1604px !important from 1620px; xm-4 centres the page with
   padding inside #main, so that cap ate the content and the form got NARROWER as the window got wider (2026-10-09: a
   Field page on a wide screen showed a ~400px form). From 1400px the form and the list now share the row. */
@layer xm4-first {
    @media (min-width: 1400px) {
        .xm4 #main:has(#XMSidePanel) {max-width:none !important; display:flex !important; justify-content:flex-start !important;}
    }
}
@media (min-width: 1400px) {
    .xm4 #main:has(#XMSidePanel) {gap:16px;}
    .xm4 #main:has(#XMSidePanel) > #xmMainContainer {flex:1 1 auto; min-width:0;}
    .xm4 #main > #XMSidePanel {flex:0 0 clamp(240px, 22vw, 360px); min-width:0; max-width:360px;}
}

/* Code editors (ACE) number their lines in a gutter with z-index 4; without a stacking context of their own the gutter
   painted over the designer's sticky section headers (a "1" on top of "Advanced Settings"). */
.xm4 .ace_editor {isolation:isolate;}