/* MR/Claude 10/20/2026: the xm-4 look for jQuery QueryBuilder 2.5.1: every xm:formfield type="querybuilder" (the grid's
   Search Filters, trigger, assignment and workflow conditions, rule editors, Flex Studio) and the Workbench filter.
   It is styling only: QueryBuilder's markup and the rules JSON it saves are unchanged.

   Layout. Each group is ONE flex box. Its header and the header's two button groups are display:contents, so their
   pieces sit around the rules: the active condition is a pill on a rail left of the rules (the rail is drawn by each
   rule's ::before/::after), Add rule / Add group go under the rules, Not / Invert / Delete at the right of that row.
   Nested groups are cards. js/querybuilder.js makes the pill switch the condition and titles nested groups.

   Specificity. Every selector starts with :is(.query-builder,#xm4-qb). No element has that id: it only lifts these rules
   above the sheets that load later in the page and target the same elements (query-builder.default.css, the inline
   <style> in formfield.cfm, Flex Studio's rich-inputs.css, trigger-editor.css, the data explorer's main.css). The few
   !important flags here answer !important rules in those sheets. */

.xm4 :is(.query-builder,#xm4-qb) {
    --xmqb-rail: 50px;      /* the column the condition pill sits in */
    --xmqb-pill: 42px;      /* the pill's width; the rail line runs through its centre */
    --xmqb-gap: 8px;        /* space between rules */
    --xmqb-control: 34px;   /* height of selects and inputs */
    --xmqb-row: color-mix(in srgb, var(--xm4-soft) 55%, var(--xm4-surface));
    --xmqb-wire: color-mix(in srgb, var(--xm4-faint) 55%, var(--xm4-surface));
    --xmqb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    color: var(--xm4-text);
    font-size: 13px;
    line-height: 1.4;
}

/* ===================== Groups ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-container {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
    width: auto; height: auto; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > .rules-group-container {
    padding: 12px;
    background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header,
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-actions,
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-conditions {display: contents; float: none; margin: 0;}

/* "Group · 3 conditions" (added by js/querybuilder.js to nested groups) */
.xm4 :is(.query-builder,#xm4-qb) .xmqb-title {order: 1; flex: 1 1 100%; display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .xmqb-title b {font-weight: 600; color: var(--xm4-ink-2);}

/* The rules, beside the rail */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-body {order: 5; flex: 1 1 calc(100% - var(--xmqb-rail)); min-width: 0; margin: 0; padding: 0; display: block;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list {display: flex; flex-direction: column; gap: var(--xmqb-gap); width: auto; height: auto; margin: 0; padding: 0; list-style: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-body:has(> .rules-list:empty) {display: none;}

/* ===================== Condition pill (And / Or) ===================== */
/* Only the active condition shows; the others stay in the DOM because QueryBuilder reads and writes their radios. */
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active {
    order: 4; flex: 0 0 auto; align-self: center; position: relative; z-index: 1;
    display: inline-block !important; width: var(--xmqb-pill); height: 26px;
    margin: 0 calc(var(--xmqb-rail) - var(--xmqb-pill)) 0 0 !important; padding: 0 4px;
    font-size: 12px; font-weight: 500; line-height: 24px; text-align: center; text-transform: lowercase; letter-spacing: 0; white-space: nowrap;
    color: var(--xm4-ink-2) !important; background: var(--xm4-surface) !important; border: 1px solid var(--xmqb-wire) !important;
    border-radius: 999px !important; box-shadow: 0 1px 1px rgba(15,23,42,.05) !important; opacity: 1;
    cursor: pointer; user-select: none; pointer-events: auto; transition: color .15s, border-color .15s, background-color .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active::first-letter {text-transform: uppercase;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:hover {color: var(--xm4-accent) !important; border-color: var(--xm4-accent) !important; background: var(--xm4-tint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:has(input:focus-visible) {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
/* QueryBuilder disables the condition while a group has one rule, and for condition_readonly groups */
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:is(.disabled,.readonly) {cursor: default; color: var(--xm4-faint) !important; background: var(--xm4-surface) !important; border-color: var(--xmqb-wire) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-container:has(> .rules-group-body > .rules-list:empty) > .rules-group-header > .group-conditions > label {display: none !important;}

/* ===================== Rail ===================== */
/* Each rule draws its own piece of the rail: ::before from the gap above down to its middle (with the tick across to
   the rule), ::after from its middle down through the gap below. The first and last rule round the corners. */
.xm4 :is(.query-builder,#xm4-qb) .rules-list > * {position: relative; margin: 0 !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::before,
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::after {
    content: ""; display: block; position: absolute;
    left: calc(var(--xmqb-pill) / 2 - var(--xmqb-rail)); width: calc(var(--xmqb-rail) - var(--xmqb-pill) / 2 - 1px);
    border: 0 solid var(--xmqb-wire); border-radius: 0; pointer-events: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::before {top: calc(var(--xmqb-gap) / -2 - 1px); height: calc(50% + var(--xmqb-gap) / 2 + 1px); border-left-width: 1px; border-bottom-width: 1px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::after {top: 50%; height: calc(50% + var(--xmqb-gap) / 2 + 1px); border-left-width: 1px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :first-child::before {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :first-child::after {border-top-width: 1px; border-top-left-radius: 10px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :last-child::before {display: block; border-bottom-left-radius: 10px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :last-child::after {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :only-child::before {top: 50%; height: 0; border-left-width: 0; border-radius: 0;}

/* ===================== Add rule / Add group, Not / Invert / Delete ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header::after {content: ""; order: 7; flex: 1 1 0; height: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; float: none; position: relative;
    height: 32px; margin: 0 8px 0 0 !important; padding: 0 12px 0 11px;
    font: 600 13px/1 inherit; font-family: inherit; letter-spacing: 0; text-transform: none; text-shadow: none; white-space: nowrap;
    color: var(--xm4-text) !important; background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important;
    border-radius: 10px !important; box-shadow: 0 1px 1px rgba(15,23,42,.04) !important; opacity: 1;
    transition: color .15s, border-color .15s, background-color .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn:hover {background: var(--xm4-soft) !important; border-color: color-mix(in srgb, var(--xm4-faint) 60%, var(--xm4-line)) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn > i {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn::before {font: 400 13px/1 "Font Awesome 6 Pro"; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add] {order: 6;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add=rule]::before {content: "\2b";}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add=group]::before {content: "\f65e";}
/* the group's own tools: smaller, quieter */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not],[data-invert],[data-delete=group]) {order: 8; height: 28px; margin: 0 0 0 6px !important; padding: 0 9px; font-size: 12px; font-weight: 500; color: var(--xm4-muted) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not],[data-invert]):hover {color: var(--xm4-text) !important; background: var(--xm4-soft) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not]:not(.active),[data-invert]) {width: 30px; padding: 0; gap: 0; font-size: 0 !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not]::before {content: "\f05e"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-invert]::before {content: "\f362"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not].active {color: var(--xm4-danger) !important; background: color-mix(in srgb, var(--xm4-danger) 10%, var(--xm4-surface)) !important; border-color: color-mix(in srgb, var(--xm4-danger) 35%, var(--xm4-surface)) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not].active::before {color: inherit;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .error-container {order: 8; margin-left: 6px;}

/* Delete: an icon button; its text stays in the DOM (font-size 0) for screen readers and the tooltip */
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete] {width: 30px; height: 30px; padding: 0; gap: 0; font-size: 0 !important; color: var(--xm4-faint) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete] > i {display: none;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete]::before {font: 400 14px/1 "Font Awesome 6 Pro"; color: inherit; content: "\f00d";}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-delete] {order: 9;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-delete]::before {content: "\f2ed"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete]:hover {color: var(--xm4-danger) !important; background: color-mix(in srgb, var(--xm4-danger) 10%, transparent) !important;}
.xm4 :is(.query-builder,#xm4-qb) .btn:focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
.xm4 :is(.query-builder,#xm4-qb) .btn:is([disabled],.disabled):not(label) {opacity: .55; pointer-events: none;}

/* ===================== Rules ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rule-container {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-height: 50px; margin: 0; padding: 7px 8px 7px 10px;
    background: var(--xmqb-row); border: 1px solid var(--xm4-line); border-radius: 12px; box-shadow: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .rule-header {display: contents; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-actions {order: 9; display: flex; margin: 0 0 0 auto; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-actions > .btn {margin: 0 !important; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .error-container {order: 8;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .drag-handle {order: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(.rule-filter-container,.rule-operator-container,.rule-value-container) {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-filter-container {order: 1; flex: 0 1 auto;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-operator-container {order: 2; flex: 0 1 auto;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container {order: 3; flex: 0 1 auto; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container:has(textarea) {flex: 1 1 260px;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container:empty {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-operator-container .hide {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .rule-operator-container > span {padding: 0 4px; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rule-value-container label {display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 0 0; font-weight: 400; color: var(--xm4-text);}

/* Native selects and inputs: white pills */
/* :where() keeps this rule at the weight of its scope, so the select and textarea rules below can refine it */
.xm4 :is(.query-builder,#xm4-qb) .rule-container :where(select,input:not([type=radio]):not([type=checkbox]),textarea) {
    display: inline-block; width: auto; max-width: 100%; height: var(--xmqb-control); min-height: 0; margin: 0;
    padding: 0 10px; font: 400 13px/1.3 inherit; font-family: inherit; color: var(--xm4-text);
    background-color: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 9px;
    box-shadow: 0 1px 1px rgba(15,23,42,.03); vertical-align: middle; transition: border-color .15s, box-shadow .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .rule-container select:not([multiple]) {appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--xmqb-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; cursor: pointer;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container select[multiple] {height: auto; padding: 4px 6px;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container textarea {width: 100%; height: auto; min-height: 64px; padding: 8px 10px; resize: vertical;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(select,input,textarea):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(select,input,textarea):disabled {color: var(--xm4-muted); background-color: var(--xm4-soft); cursor: default;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container input:is([type=radio],[type=checkbox]) {width: 15px; height: 15px; margin: 0; accent-color: var(--xm4-accent);}

/* select2 (the field list, and choice values as chips) */
.xm4 :is(.query-builder,#xm4-qb) .select2-container {max-width: 100%; vertical-align: middle;}
.xm4 :is(.query-builder,#xm4-qb) .rule-filter-container .select2-container {min-width: min(170px, 100%); max-width: min(260px, 100%);}
.xm4 :is(.query-builder,#xm4-qb) .rule-value-container .select2-container {min-width: min(170px, 100%); max-width: min(420px, 100%);}
.xm4 :is(.query-builder,#xm4-qb) .select2-container .select2-selection {
    min-height: var(--xmqb-control); margin: 0 !important; font-size: 13px;
    background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important; border-radius: 9px !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03) !important; transition: border-color .15s, box-shadow .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .select2-container :is(.select2-selection--single) {display: flex; align-items: center; height: var(--xmqb-control) !important; padding: 0 30px 0 10px !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--single .select2-selection__rendered {flex: 1 1 auto; min-width: 0; padding: 0 !important; line-height: 1.3 !important; color: var(--xm4-text) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--single .select2-selection__placeholder {color: var(--xm4-muted) !important;} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__arrow {top: 0 !important; right: 10px !important; width: 12px !important; height: 100% !important; margin: 0 !important; background: var(--xmqb-chevron) no-repeat center / 12px 12px;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__arrow b {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-container--open .select2-selection,
.xm4 :is(.query-builder,#xm4-qb) .select2-container--focus .select2-selection {border-color: var(--xm4-accent) !important; box-shadow: 0 0 0 3px var(--xm4-tint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple {display: flex; align-items: center; padding: 3px 28px 3px 4px !important; background: var(--xmqb-row) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-selection__rendered {display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important; flex-direction: row-reverse; align-items: center; gap: 6px; float: none;
    max-width: 100%; height: 26px; margin: 0 !important; padding: 0 7px 0 10px !important;
    font-size: 12.5px; line-height: 24px; color: var(--xm4-text) !important;
    background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important; border-radius: 8px !important;
}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__choice__remove {float: none; margin: 0 !important; font-size: 15px; font-weight: 400; line-height: 1; color: var(--xm4-faint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__choice__remove:hover {color: var(--xm4-danger) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-search--inline {flex: 1 1 60px; min-width: 60px;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-search__field {width: 100% !important; height: 26px !important; margin: 0 !important; padding: 0 6px !important; color: var(--xm4-text); background: transparent !important; border: 0 !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__clear {position: absolute !important; top: 50% !important; right: 8px !important; margin: -9px 0 0 !important; width: 18px; height: 18px; line-height: 17px; text-align: center; font-size: 15px; color: var(--xm4-faint) !important; float: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__clear:hover {color: var(--xm4-danger) !important;}

/* ===================== Errors, dragging, read-only ===================== */
.xm4 :is(.query-builder,#xm4-qb) .error-container {display: none; color: var(--xm4-danger); cursor: help;}
.xm4 :is(.query-builder,#xm4-qb) .has-error > .error-container,
.xm4 :is(.query-builder,#xm4-qb) .has-error > .rules-group-header > .error-container {display: inline-flex !important; align-items: center;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container.has-error {background: color-mix(in srgb, var(--xm4-danger) 6%, var(--xm4-surface)); border-color: color-mix(in srgb, var(--xm4-danger) 45%, var(--xm4-surface));}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > .rules-group-container.has-error {border-color: color-mix(in srgb, var(--xm4-danger) 45%, var(--xm4-surface));}
.xm4 :is(.query-builder,#xm4-qb) .drag-handle {display: inline-flex; align-items: center; margin: 0; padding: 0 2px; color: var(--xm4-faint); cursor: grab;}
.xm4 :is(.query-builder,#xm4-qb) .rule-placeholder {min-height: 50px; background: transparent; border: 1px dashed var(--xmqb-wire); border-radius: 12px; opacity: 1;}
.xm4 :is(.query-builder,#xm4-qb) .dragging {opacity: .6;}
.xm4 :is(.query-builder,#xm4-qb) p.filter-description {flex: 1 1 100%; order: 10; margin: 0; padding: 6px 10px; font-size: 12px; color: var(--xm4-ink-2); background: var(--xm4-tint); border: 0; border-radius: 8px;}