.rule-editor { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rule-editor .rule-editor-fields { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
.rule-editor-fields .connected-field { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 20rem; min-width: 0; margin-left: 0; }
.rule-editor-fields :is(.rz-dropdown, .rz-datepicker) { width: 100%; min-height: 44px; }
.rule-editor-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.rule-editor-actions .rz-button { min-height: 44px; }
.rule-editor :is(h1,h2,h3,p) { overflow-wrap: anywhere; }
@media (max-width: 599.98px) {
    .rule-editor .dialog-card { padding: .75rem; }
    .rule-editor-actions .rz-button { width: 100%; white-space: normal; }
}

.rule-editor .connected-form { width: 100%; flex-direction: column; }
.rule-editor .connected-row { display: flex; flex-wrap: wrap; width: 100%; }
.rule-editor .connected-row > .connected-field { flex: 1 1 calc(50% - 1rem); }
.rule-editor fieldset { min-width: 0; }
.rule-editor .dialog-footer { display: flex; flex-wrap: wrap; gap: .75rem; }
.rule-editor summary { cursor: pointer; padding: .75rem; }
.rule-editor :is(.rz-dropdown, .rz-datepicker, .rz-textarea) { width: 100%; }
@media (max-width: 599.98px) {
    .rule-editor .connected-row { flex-direction: column; }
    .rule-editor .connected-row > .connected-field { flex-basis: auto; width: 100%; }
}

.rule-editor > .dialog-body { min-height: 0; overflow-y: auto; }
.rule-editor > .dialog-body > fieldset { margin: 0; }

/* Reuse the standard dialog body/footer structure with a bounded, scrollable work area. */
.rz-dialog:has(> .rz-dialog-content > .rule-editor) { max-width: calc(100vw - 2rem); }
.rz-dialog-content > .rule-editor { min-height: 0; max-height: calc(100dvh - 8rem); }
.rule-editor :is(h2, h3, p) { margin: 0; }
.rule-editor .dialog-card { border: 1px solid #e2e8f0; border-radius: 14px; padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: 1rem; }
.rule-editor details.dialog-card:not([open]) { display: block; }
.rule-editor .dialog-footer { flex-shrink: 0; margin: 0; padding-block: .75rem; }
.rule-editor fieldset legend { font-size: .95rem; font-weight: 600; }
.rule-editor fieldset label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
@media (max-width: 599.98px) {
    .rz-dialog:has(> .rz-dialog-content > .rule-editor) { max-width: calc(100vw - 1rem); }
    .rz-dialog-content > .rule-editor { max-height: calc(100dvh - 7rem); }
}