/* 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;}
/* GM/Claude 10/21/2026: an empty group still hides its And/Or pill, but :has() now sits on the element it styles and hands the label a
   custom property. As "container:has(...) > header > conditions > label", Chrome re-checked it on every DOM change in the page: each
   style recalc cost ~31 ms instead of 4.4 ms on the SAMIS Contracts grid (1,300-row Columns list) and typing in its filter froze
   the page (ticket 571499). Only label.active is visible here (the other labels are hidden above), so that is the one it sets */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-container:has(> .rules-group-body > .rules-list:empty) {--xmqb-empty-cond: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-conditions > label.active {display: var(--xmqb-empty-cond, inline-block) !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;}

/* ===================== Words view ===================== */
/* MR/Claude 10/24/2026: the Words / Builder switch above each builder and the rules in plain sentences (js/querybuilder.js,
   lib/com/querybuilder/qb-words.js). It sits outside .query-builder, so none of the builder rules above reach it, and it uses
   only xm-4 tokens, so dark mode follows them. Selectors go through :is(.xmqbw,#xm4-qbw) for the same reason the builder's go
   through #xm4-qb: an id-level weight above the pages' own sheets (no element has that id). */
.xm4 :is(.xmqbw,#xm4-qbw) {margin: 0 0 10px; color: var(--xm4-text); font-size: 13px; line-height: 1.5;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-bar {display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 2px; background: var(--xm4-soft); border: 1px solid var(--xm4-line); border-radius: 16px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-tab {display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; color: var(--xm4-muted); background: transparent; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-tab:hover {color: var(--xm4-text);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-tab[aria-pressed="true"] {color: var(--xm4-text); background: var(--xm4-surface); box-shadow: 0 1px 2px rgba(15,23,42,.08);}
.xm4 :is(.xmqbw,#xm4-qbw) :is(.xmqbw-tab,.xmqbw-jump):focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-words {margin: 10px 0 0; padding: 12px 16px; background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 14px;}
.xm4 :is(.xmqbw,#xm4-qbw).xmqbw-v-builder .xmqbw-words {display: none;}
.xm4 :is(.query-builder,#xm4-qb).xmqbw-off {display: none !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-lead {margin: 0; font-size: 13.5px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-list {margin: 6px 0 0; padding: 0 0 0 20px; list-style: disc;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-list .xmqbw-list {margin-top: 2px; list-style: circle;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-li {display: list-item; margin: 3px 0; padding: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-li::marker {color: var(--xm4-faint);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-jump {display: inline; margin: 0; padding: 0; font: inherit; line-height: inherit; text-align: left; color: inherit; background: none; border: 0; border-radius: 4px; box-shadow: none; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-jump:hover .xmqbw-f, .xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-g > .xmqbw-jump:hover {text-decoration: underline;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-g > .xmqbw-jump {font-weight: 600; color: var(--xm4-ink-2);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-f {font-weight: 600; color: var(--xm4-ink-2);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-v {display: inline-block; max-width: 100%; margin: 1px; padding: 0 7px; line-height: 1.55; color: var(--xm4-ink-2); background: var(--xm4-tint); border-radius: 6px; overflow-wrap: anywhere;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-code {font-family: var(--bs-font-monospace, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; background: var(--xm4-soft);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-lock {color: var(--xm4-muted); background: var(--xm4-soft); border: 1px dashed var(--xm4-line);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-m {color: var(--xm4-muted); font-style: italic;}
/* the condition a Words line opened, outlined for a moment in the builder */
.xm4 :is(.query-builder,#xm4-qb) .xmqbw-flash {box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm4-accent) 35%, transparent) !important; transition: box-shadow .2s;}

/* ===================== Words view: changing conditions ===================== */
/* MR/Claude 10/24/2026: phase 2, the editor a Words line opens right under itself (field, comparison, value and the sentence
   it will make), the group editor, "Add a condition" and Undo. Same scope and tokens as the Words view above. The select2
   rules repeat the builder's (they are scoped to .query-builder, which the editor is not inside). */
.xm4 :is(.xmqbw,#xm4-qbw) {--xmqbw-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");}
.xm4 :is(.xmqbw,#xm4-qbw) [hidden] {display: none !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-undo {display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 0 0 8px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1; vertical-align: top; color: var(--xm4-muted); background: transparent; border: 1px solid var(--xm4-line); border-radius: 16px; box-shadow: none; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-undo:hover {color: var(--xm4-text); background: var(--xm4-soft);}
.xm4 :is(.xmqbw,#xm4-qbw).xmqbw-v-builder .xmqbw-undo {display: none;}
/* a line that opens its editor: a soft background on hover, drawn with a shadow so the sentence does not move */
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-jump:is(.xmqbw-edit,[data-group]):hover {background: var(--xm4-soft); box-shadow: 0 0 0 3px var(--xm4-soft); -webkit-box-decoration-break: clone; box-decoration-break: clone;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-lead > .xmqbw-jump[data-group]:hover {text-decoration: underline dotted;}
.xm4 :is(.xmqbw,#xm4-qbw) :is(.xmqbw-undo,.xmqbw-add,.xmqbw-btn):focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-add {display: flex; align-items: center; gap: 7px; height: 30px; margin: 10px 0 0; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--xm4-accent); background: transparent; border: 1px dashed var(--xm4-line); border-radius: 9px; box-shadow: none; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-add:hover {background: var(--xm4-tint); border-color: color-mix(in srgb, var(--xm4-accent) 40%, var(--xm4-line));}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed {display: grid; gap: 10px; margin: 8px 0; padding: 12px; font-size: 13px; font-style: normal; font-weight: 400; color: var(--xm4-text); background: color-mix(in srgb, var(--xm4-soft) 55%, var(--xm4-surface)); border: 1px solid var(--xm4-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-row {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; align-items: start;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-c {display: grid; gap: 4px; min-width: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-lbl {display: block; margin: 0; padding: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed :where(select,input:not([type=radio]):not([type=checkbox])) {display: block; width: 100%; max-width: 100%; height: 34px; 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); transition: border-color .15s, box-shadow .15s;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed select:not([multiple]) {appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--xmqbw-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed select[multiple] {height: auto; min-height: 72px; padding: 4px 6px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed :is(select,input):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed :is(select,input):disabled {color: var(--xm4-muted); background-color: var(--xm4-soft); cursor: default;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-vals {display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-vals > :is(input,select,.select2-container) {flex: 1 1 120px; width: auto; min-width: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-vals > input.xmqbw-ed-n {flex: 0 0 96px;}
.xm4 :is(.xmqbw,#xm4-qbw) :is(.xmqbw-ed-and,.xmqbw-ed-unit) {color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-container {max-width: 100%; vertical-align: middle;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-container .select2-selection {min-height: 34px; 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(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection--single {display: flex; align-items: center; height: 34px !important; padding: 0 30px 0 10px !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .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(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection__placeholder {color: var(--xm4-muted) !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection__arrow {top: 0 !important; right: 10px !important; width: 12px !important; height: 100% !important; margin: 0 !important; background: var(--xmqbw-chevron) no-repeat center / 12px 12px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection__arrow b {display: none !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed :is(.select2-container--open,.select2-container--focus) .select2-selection {border-color: var(--xm4-accent) !important; box-shadow: 0 0 0 3px var(--xm4-tint) !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection--multiple {display: flex; align-items: center; padding: 3px 28px 3px 4px !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .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(.xmqbw,#xm4-qbw) .xmqbw-ed .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-soft) !important; border: 1px solid var(--xm4-line) !important; border-radius: 8px !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .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(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection__choice__remove:hover {color: var(--xm4-danger) !important;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .select2-selection--multiple .select2-search--inline {flex: 1 1 60px; min-width: 60px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed .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(.xmqbw,#xm4-qbw) .xmqbw-ed .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(.xmqbw,#xm4-qbw) .xmqbw-ed-preview {padding: 8px 10px; font-size: 13px; color: var(--xm4-ink-2); background: var(--xm4-surface); border: 1px dashed var(--xm4-line); border-radius: 8px; overflow-wrap: anywhere;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-err {font-size: 12.5px; font-weight: 600; color: var(--xm4-danger);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-note {margin: 0; color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn {display: inline-flex; align-items: center; justify-content: center; height: 32px; margin: 0; padding: 0 12px; font: 600 13px/1 inherit; font-family: inherit; text-transform: none; text-shadow: none; white-space: nowrap; color: var(--xm4-text); background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 9px; box-shadow: 0 1px 1px rgba(15,23,42,.04); cursor: pointer; transition: background-color .15s, border-color .15s;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn:hover {background: var(--xm4-soft);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn-primary {color: var(--xm4-surface); background: var(--xm4-accent); border-color: var(--xm4-accent);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn-primary:hover {background: var(--xm4-accent-dark, var(--xm4-accent)); border-color: var(--xm4-accent-dark, var(--xm4-accent));}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn-quiet {color: var(--xm4-muted); background: transparent; border-color: transparent; box-shadow: none;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-btn-quiet:hover {color: var(--xm4-text); background: var(--xm4-soft);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-modes {display: flex; flex-wrap: wrap; gap: 6px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-mode {display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--xm4-text); background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 9px; cursor: pointer;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-mode:has(input:checked) {background: var(--xm4-tint); border-color: color-mix(in srgb, var(--xm4-accent) 55%, var(--xm4-line));}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-mode:has(input:focus-visible) {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ed-mode input {width: 15px; height: 15px; margin: 0; accent-color: var(--xm4-accent);}

/* ===================== Words view: Describe it ===================== */
/* MR/Claude 10/24/2026: phase 3, the box that turns a sentence into changes, and the change list shown before Apply. Same scope and
   tokens as the Words view above. The input sits outside .query-builder and has no name, so no builder rule or form posts it. */
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask {margin: 10px 0 0;}
.xm4 :is(.xmqbw,#xm4-qbw).xmqbw-v-builder .xmqbw-ask {display: none;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-row {display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 12px; transition: border-color .15s, box-shadow .15s;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-row:focus-within {border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-row > i {flex: 0 0 auto; color: var(--xm4-accent);}
.xm4 :is(.xmqbw,#xm4-qbw) input.xmqbw-ask-in {flex: 1 1 auto; width: auto; min-width: 0; height: 32px; min-height: 0; margin: 0; padding: 0; font: inherit; font-size: 13px; color: var(--xm4-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) input.xmqbw-ask-in::placeholder {color: var(--xm4-muted); opacity: 1;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-go {flex: 0 0 auto;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-go:disabled {opacity: .6; cursor: default;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-status {display: flex; align-items: center; gap: 7px; margin: 6px 2px 0; font-size: 12.5px; color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-status.is-error {color: var(--xm4-danger); font-weight: 600;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-plan {display: grid; gap: 8px; margin: 8px 0 0; padding: 12px; color: var(--xm4-text); background: color-mix(in srgb, var(--xm4-soft) 55%, var(--xm4-surface)); border: 1px solid var(--xm4-line); border-radius: 12px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-lead {margin: 0; font-weight: 600;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-list {display: grid; gap: 6px; margin: 0; padding: 0; list-style: none;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-item {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 0;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-item.is-sub {padding-left: 22px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-tag {flex: 0 0 auto; padding: 1px 8px; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--xm4-accent); background: var(--xm4-tint); border-radius: 999px;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-item.is-add .xmqbw-ask-tag {color: color-mix(in srgb, var(--xm4-success) 70%, var(--xm4-text)); background: color-mix(in srgb, var(--xm4-success) 14%, var(--xm4-surface));}
.xm4 :is(.xmqbw,#xm4-qbw) :is(.xmqbw-ask-item.is-remove,.xmqbw-ask-item.is-remove_group) .xmqbw-ask-tag {color: var(--xm4-danger); background: color-mix(in srgb, var(--xm4-danger) 12%, var(--xm4-surface));}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-what {min-width: 0; overflow-wrap: anywhere;}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-was {font-size: 12px; color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-note {display: flex; align-items: baseline; gap: 7px; margin: 0; font-size: 12.5px; color: var(--xm4-muted);}
.xm4 :is(.xmqbw,#xm4-qbw) .xmqbw-ask-note > i {flex: 0 0 auto;}