/* ao-modal-semantic-sql.css - the Easy Answers "View Semantic SQL" modal
* (2026-08-25, Wave A of the UI modernisation)
*
* WHAT THIS STYLES - AND HOW THE SCOPE WAS PINNED
* ----------------------------------------------
* The Easy Answers more-menu (the searchbar's, and the agentic chat item's ⋮ -
* both are AgenticChatBotUtil.getMoreMenuOptions) carries an item
* `id: 'viewMSOQueryId'`, label "View Semantic SQL". It dispatches to
*
* window['smartSearchUtils'].openSearchBarContextMenuPopup.call(this, id)
* -> smartSearchUtils.getAppId('viewMSOQueryId') === 'editqueryapp'
* -> AppUtil.openApplication({ id: 'com::apporchid::system::editqueryapp', css: ... })
*
* That ONE function also serves 'queryOntologyId' (queryontologyapp) and
* 'manageHistoryId' (searchhistoryapp), and it hands ALL THREE the identical css
* string, so the window class list is NOT on its own a discriminator:
*
* webix_view webix_window vux-popup ao-vux-searchqueryandhistoryapp
* ao-vux-editors-popup ao-vux-manage-history-app vux-cirrus-default-window ao-vux-app
*
* Verified in the running app (localhost:8092, Exchange Traded Funds solution):
* opening "View Ontology" produces a window with that exact same class string and
* `title: "Ontology"`. So `.ao-vux-editors-popup` alone WOULD have restyled two
* apps this file was never asked to touch.
*
* The discriminator that does hold is the SQL editor itself: `editqueryapp` is the
* only one of the three that mounts an ACE instance. Hence every selector below is
* prefixed with
*
* .ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor)
*
* Measured: View Ontology -> ace:false, tagger:false. View Semantic SQL -> ace:true.
* If :has() is ever unsupported the whole sheet simply does not apply, which is a
* graceful no-op rather than a half-applied restyle.
*
* SIBLING SAFETY
* --------------
* Two neighbouring modals ("Explain Query Reasoning", "View Sourcing Information")
* are being restyled in parallel. They share ONLY `vux-cirrus-default-window` with
* this one and additionally carry `ao-vux-appdescription-app
* ao-vux-ea-summary-info-app`, which this window does not. There is not one bare
* `.vux-cirrus-default-window` / `.webix_win_head` / `.webix_window` rule in this
* file - grep it: every selector starts with `.ao-vux-editors-popup`.
*
* WHY THE PREFIX NAMES THREE CLASSES AND NOT ONE
* ---------------------------------------------
* Same reason ao-cuecards.css stacks classes: this sheet is a static in
* , and themes/css/index.css is appended to at RUNTIME by loadCss().
* We are therefore always earlier in source order and lose every specificity tie.
* The rules we have to beat, measured in index.css:
*
* 75525 .webix_window.webix_view.vux-cirrus-default-window .ace_editor (0,4,0)
* 56019 .ao-vux-editors-popup .ace_content div|span (0,2,1)
* 64095 ...ao-vux-editors-popup .webix_win_head {border-bottom: ... !important}
* 72230 .ao-vux-entity-tagger-editor-container .annotatate_switch
* .webix_el_box .webix_button (0,4,0)
* 43925 .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField
* .entity-container (0,3,0)
*
* The prefix scores (0,4,0) by itself (3 classes + :has(.ace_editor)), so
* `PREFIX .ace_editor` is (0,5,0) and clears 75525 outright. `!important` appears
* exactly FOUR times below. Two of them answer an index.css declaration that is
* itself `!important` - specificity alone cannot win those:
*
* 64095 ...ao-vux-editors-popup .webix_win_head { border-bottom: ... !important }
* ~75520 .webix_window.webix_view.vux-cirrus-default-window .ao-vux-app-footer
* { background: var(--vux-bg) !important }
*
* The other two are `top` / `left` on the window itself, and there the opponent is
* not a stylesheet at all - it is webix rewriting the node's INLINE style on every
* resize. Only `!important` outranks an inline style. See §1.
*
* TOKENS
* ------
* Consumes themes/css/ao-design-system.css only (--ao-*). Nothing is defined there;
* the --aosql-* properties below are local to this component and exist so the code
* palette can be re-pointed per theme in one place. Every --ao-* reference carries
* a literal fallback so the sheet degrades sanely if the token layer is absent.
*
* GEOMETRY IS NOT DONE HERE - IT IS DONE THROUGH WEBIX
* ----------------------------------------------------
* The first pass of this sheet left the box model alone entirely, and that is why
* the modal read as unfinished: the SQL pane - the only reason this window exists -
* sat at 176px and clipped mid-query inside a 586px window, with dead bands above
* and below it.
*
* The reason CSS cannot fix that is real: webix writes inline px heights/tops on
* every .webix_view here, and ACE caches its own viewport size, so forcing heights
* from a stylesheet desynchronises both (the classic "ACE renders half a viewport"
* bug). The answer is not to force them from CSS but to go through the framework:
* js/ao-modal-semantic-sql.js calls view.define('height') / win.resize() on the
* four views that own the vertical budget, then makes ACE re-measure. See the
* LAYOUT section of that file.
*
* So NO rule below sizes or moves a .webix_view, a .webix_win_head/-body or the ACE
* container. Box-model declarations here are confined to
* - LEAF nodes webix never measures (the annotation button, the tag chips, the
* injected copy control), and
* - the header's .webix_el_box, whose own height webix sets on the .webix_view
* ABOVE it; making that box a flex row with an icon changes nothing webix
* measures.
* The one thing that looks like typography but is really geometry - the ACE font -
* is not set here either; see the long note on `.ace_editor` in §5.
*/
/* ============================================================ *
* 0. LOCAL PALETTE
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) {
/* code surface + ink */
/* Read by js/ao-modal-semantic-sql.js and applied through ACE, never from here -
see the .ace_editor block in §5 for why a stylesheet must not touch this. */
--aosql-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
--aosql-code-size: 13.5px;
--aosql-paper: var(--ao-surface, #fff);
--aosql-ink: var(--ao-ink, #1e2429);
--aosql-gutter-bg: var(--ao-primary-40, #e8f2fc);
--aosql-gutter-ink: var(--ao-dim, #94a3b1);
/* Four token-derived hues: keyword / function / literal / punctuation.
*
* The obvious scheme - keyword=primary, string=--ao-ok (teal), number=--ao-warm -
* is WRONG on this platform, and the Exchange Traded Funds solution proves it:
* under purple-theme --vux-secondary-500 IS --vux-primary-500 (#8054CE), so
* --ao-ok collapses onto --ao-primary and every string literal would have been
* painted the same hue as every keyword. Nothing in the token contract promises
* those two stay apart.
*
* So literals are keyed to --ao-warm and functions to --ao-bad, the two tokens
* that ARE semantically pinned across AO's palettes (loader orange, error red),
* and the brand hue is spent on keywords alone. Three hues, always distinct,
* whatever palette the platform injects. */
--aosql-kw: var(--ao-primary-deep, #005bab);
--aosql-fn: var(--ao-bad, #d4437a);
--aosql-str: var(--ao-warm, #f57c00);
--aosql-num: var(--ao-warm, #f57c00);
--aosql-punct: var(--ao-mid, #5e7081);
/* editor state washes */
--aosql-active: var(--ao-primary-40, #e8f2fc);
--aosql-sel: var(--ao-primary-light, #7fb2e6);
/* THE INTERACTIVE FOREGROUND. Every bit of brand-coloured TEXT in this modal
(the annotation toggle, the close glyph on hover, the copy control) goes
through this one property rather than reaching for --ao-primary-deep
directly, because "deep" is only readable on a LIGHT surface. Measured in
the stock dark theme: --ao-primary-deep #0d6084 on --ao-surface #1c1c1c is
about 2.4:1 - under the 3:1 floor even for large text. The dark override
below swaps in --ao-primary-light (#43aad6, ~7:1). */
--aosql-accent: var(--ao-primary-deep, #005bab);
/* The question panel is CONTEXT, not the headline - it is here so you can see
which words the engine bound before you read what it wrote. So it gets a
tinted flat fill and no lift, while the SQL card keeps the paper + shadow.
Hierarchy is carried by weight and elevation, not by hue. */
--aosql-tagfill: var(--ao-primary-50, #f0f7fd);
--aosql-edge: var(--ao-hairline, #dde5ee);
/* TWO INK STEPS THAT DO NOT DEPEND ON THE PALETTE BEHAVING.
* The obvious way to make the question panel recede is to set it in --ao-mid and
* the eyebrows in --ao-dim, which is what the Sourcing sheet does. Measured on
* the Exchange Traded Funds solution (purple palette), that is not safe here:
* --ao-mid = --vux-text-400 = #818995 -> 3.5:1 on the panel (16px text)
* --ao-dim = --vux-text-300 -> 3.0:1 on the surface (9.5px caps)
* Both are under the 4.5:1 floor, and neither token promises a value across
* palettes. So both steps are mixed BACK TOWARD --ao-ink instead. Because
* --ao-ink inverts with the theme, the same two mixes darken on light and
* lighten on dark; measured after the change: 10:1 and 6:1 on light, higher on
* dark. The fallbacks below are the unmixed tokens, i.e. the Sourcing values. */
--aosql-body: var(--ao-ink, #1e2429);
--aosql-quiet: var(--ao-mid, #5e7081);
/* The header disc glyph. A mask, not a background-image, so the mark follows
--aosql-accent through every palette and both themes; SVG images used as CSS
masks are sampled by ALPHA, so the stroke colour inside is irrelevant. */
--aosql-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 7.4 3.8 12l4.6 4.6'/%3E%3Cpath d='M15.6 7.4 20.2 12l-4.6 4.6'/%3E%3Cpath d='M13.3 5.5 10.7 18.5'/%3E%3C/svg%3E");
}
/* Where color-mix is available, derive the washes and the literal hues from the
LIVE tokens instead of the ramp. Two reasons:
(a) the --vux-primary-50/-40 ramp is not monotonic across palettes (the purple
theme ships -50 darker than -40; see ao-design-system.css "ODDITY 1"), and
(b) --ao-warm at full strength sits near 2.4:1 on white, which is far too thin
for a code token, so it is pulled toward the ink. Strings go deeper than
numbers: the two then read as one "literal" family with a quiet split,
rather than as two competing colours. */
@supports (background: color-mix(in srgb, red, blue)) {
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) {
--aosql-paper: color-mix(in srgb, var(--ao-primary) 2.5%, var(--ao-surface));
--aosql-gutter-bg: color-mix(in srgb, var(--ao-primary) 5%, var(--ao-surface));
--aosql-str: color-mix(in srgb, var(--ao-warm) 58%, var(--ao-ink));
--aosql-num: color-mix(in srgb, var(--ao-warm) 78%, var(--ao-ink));
--aosql-active: color-mix(in srgb, var(--ao-primary) 7%, transparent);
--aosql-sel: color-mix(in srgb, var(--ao-primary) 20%, transparent);
--aosql-tagfill: color-mix(in srgb, var(--ao-primary) 5%, var(--ao-surface));
--aosql-edge: color-mix(in srgb, var(--ao-primary) 16%, var(--ao-surface));
--aosql-body: color-mix(in srgb, var(--ao-ink) 70%, var(--ao-mid));
--aosql-quiet: color-mix(in srgb, var(--ao-mid) 62%, var(--ao-ink));
}
}
/* Dark palette: the code hues have to flip direction, not just the surface.
--ao-surface/--ao-ink already invert on their own (they are declared on ,
which is where the theme class lands), so only the five hues are restated. */
body.dark-theme .ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) {
--aosql-kw: var(--ao-primary-light, #7fb2e6);
--aosql-gutter-ink: var(--ao-mid, #5e7081);
--aosql-accent: var(--ao-primary-light, #7fb2e6);
}
@supports (background: color-mix(in srgb, red, blue)) {
body.dark-theme .ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) {
--aosql-paper: color-mix(in srgb, var(--ao-primary) 6%, var(--ao-surface));
--aosql-gutter-bg: color-mix(in srgb, var(--ao-primary) 11%, var(--ao-surface));
--aosql-str: color-mix(in srgb, var(--ao-warm) 62%, #fff);
--aosql-num: color-mix(in srgb, var(--ao-warm) 88%, #fff);
--aosql-fn: color-mix(in srgb, var(--ao-bad) 74%, #fff);
--aosql-tagfill: color-mix(in srgb, var(--ao-primary) 9%, var(--ao-surface));
--aosql-edge: color-mix(in srgb, var(--ao-primary) 24%, var(--ao-surface));
}
}
/* ============================================================ *
* 1. THE WINDOW - a card floating on the constellation field
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) {
background: var(--ao-field, #fff);
border: 1px solid var(--ao-hairline, #dde5ee);
border-radius: 18px;
box-shadow:
0 28px 68px -24px rgba(16, 24, 40, .38),
var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
font-family: var(--ao-font, Inter, Roboto, sans-serif);
color: var(--ao-ink, #1e2429);
animation: aosqlWindowIn .3s var(--ao-ease-pop, cubic-bezier(.34, 1.32, .5, 1)) both;
}
/* THE RE-CENTRING PIN - see the POSITION note in js/ao-modal-semantic-sql.js.
The script publishes --aosql-top / --aosql-left and stamps [data-aosql-fit] on
this element once both exist; webix's window.resize() fires a GLOBAL onResize
whose app-level handler restores this popup's original left/top, so an inline
style cannot hold. A stylesheet !important outranks every inline style webix
writes, and needs no re-asserting. Gated on the stamp, so with no script (or a
relayout that bailed) webix positions the window exactly as it always did. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor)[data-aosql-fit] {
top: var(--aosql-top) !important;
left: var(--aosql-left) !important;
}
@keyframes aosqlWindowIn {
from {
opacity: 0;
transform: translateY(10px) scale(.988);
}
to {
opacity: 1;
transform: none;
}
}
/* the field must show through every wrapper between the window and the panels */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_content,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_body,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_body>.webix_layout_line,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_abslayout,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-microapp {
background: transparent;
}
/* ============================================================ *
* 2. HEADER - the house pattern: tinted disc | eyebrow over title
*
* Both sibling sheets lead with a soft tinted disc beside the title, and the
* Sourcing one sets a small-caps eyebrow over it. Matching that is the whole
* point of this section - the first draft here shipped the eyebrow with no disc
* and a 19px title, which is why the three sheets did not read as a set:
*
* ao-modal-reasoning.css 34px circle, --ao-primary-40 fill, 16.5px/600 title
* ao-modal-sourcing.css 38px squircle (r 11px), --ao-primary-40 fill,
* 9.5px/700/.16em eyebrow + 15px/600 title
*
* This window has no icon element to style - the bundle emits only a
* `span.webix_icon.vuxicon-info` that is display:none with an empty glyph - so
* the disc is drawn as a pair of pseudos on the title's own .webix_el_box.
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head {
/* the field bleeding down from the top, then a hairline - the same move
.vux-reasoning-popup .webix_win_head makes, so the two headers sit at the
same value against the same body */
background: linear-gradient(180deg,
var(--ao-primary-50, #f0f7fd) 0%,
var(--ao-surface, #fff) 100%);
/* index.css:64095 declares this border !important - so must we */
border-bottom: 1px solid var(--ao-hairline, #dde5ee) !important;
border-radius: 18px 18px 0 0;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .webix_toolbar,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .webix_scroll_cont,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .webix_el_box {
background: transparent;
}
/* THE DISC. `.webix_el_box` is already `display:flex` here and webix sizes the
.webix_view ABOVE it, never this box - so a gap, a left inset and two pseudos
are free. `position: relative` is required for the glyph and changes no
measurement. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .ao-vux-app-title-container .webix_el_box {
position: relative;
align-items: center;
gap: 14px;
padding: 3px 2px 3px 26px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .ao-vux-app-title-container .webix_el_box::before {
content: "";
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--ao-primary-40, #e8f2fc);
box-shadow: 0 0 0 1px var(--aosql-edge) inset;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .ao-vux-app-title-container .webix_el_box::after {
content: "";
position: absolute;
/* 26px inset + (38 - 20) / 2 */
left: 35px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
background-color: var(--aosql-accent);
-webkit-mask: var(--aosql-glyph) center / 20px 20px no-repeat;
mask: var(--aosql-glyph) center / 20px 20px no-repeat;
pointer-events: none;
}
/* The app title is "Edit Query"; the menu that opened it says "View Semantic SQL".
The eyebrow reconnects the two. Typeset to the Sourcing recipe (9.5/700/.16em,
dim rather than brand) so the eyebrow reads as a kicker and the disc carries the
colour - the previous 10.5px brand-coloured eyebrow competed with the title. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .ao-vux-app-main-title {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
width: auto;
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -.1px;
color: var(--ao-ink, #1e2429);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .ao-vux-app-main-title::before {
content: "Semantic SQL";
font-size: 9.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--aosql-quiet);
}
/* close affordance: ghost circle, no layout shift (the halo is a box-shadow) */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .action_icon .webix_icon {
color: var(--ao-mid, #5e7081);
border-radius: 50%;
transition:
color .2s ease,
box-shadow .2s ease,
background-color .2s ease,
transform .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .action_icon .webix_icon_button:hover .webix_icon {
color: var(--aosql-accent);
background: var(--ao-primary-40, #e8f2fc);
box-shadow: 0 0 0 7px var(--ao-primary-40, #e8f2fc);
transform: scale(1.06);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .action_icon .webix_icon_button:focus-visible {
outline: 2px solid var(--ao-primary, #0079e1);
outline-offset: 2px;
border-radius: 50%;
}
/* ============================================================ *
* 3. THE QUESTION PANEL - supporting context, deliberately quiet
*
* This panel used to be the loudest thing in the window: white paper inside a
* hairline box, carrying 20px semibold type, sitting directly above a 176px SQL
* pane. Your eye landed here first, on the thing you already knew, and the thing
* you opened the modal to read came second.
*
* The fix is entirely relative: the question panel goes FLAT (a 5%-primary wash,
* a softened edge, no lift, 16px type) and the SQL card keeps the paper and gains
* the only box-shadow in the body (§5). Neither is louder in isolation; the
* ORDER is what changed.
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor {
background: var(--aosql-tagfill);
border: 1px solid var(--aosql-edge);
border-radius: var(--ao-radius-card, 14px);
overflow: hidden;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor .webix_scroll_cont,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger .webix_template {
background: transparent;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField {
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: 16px;
font-weight: 600;
letter-spacing: -.1px;
color: var(--aosql-body);
/* THE 18px IS LOAD-BEARING - IT IS NOT A MARGIN, IT IS HEADROOM.
*
* The tag badges are absolutely positioned off the tagged span at FIXED px
* offsets (`.p-top .query-container { top: -44px }`, the below-line stack at
* `top: 22px`), while the room they hang in is the
's half-leading - and
* index.css sets that line-height in em, so it scales with the font size.
* Measured: at the stock 21px the leading is 105px, giving 40px above the span
* for a 36px badge stack - 4px of slack, and 1px below. Step the type down to
* 16px and the leading falls to 80px, the headroom to 28px, and the top row of
* captions is clipped by 9px.
*
* So the type reduction has to buy its own headroom back. 18px of padding-top
* restores 5px of top slack and leaves the bottom relationship exactly as the
* stock layout had it. The panel is content-sized by webix, so the card simply
* grows to suit and js/ao-modal-semantic-sql.js measures the result rather than
* assuming it. If this font-size is ever changed again, re-measure: the
* requirement is (line-height - span height) / 2 + padding-top >= 36. */
padding: 18px 0 0;
}
/* The tag hue is NOT ours to repaint: --tag-highlight-bgClr resolves to the
platform's --vux-highlight-mso-bg / -value-bg / -property-bg, the same three
colours the answer surface uses to echo the question. Keeping them is what makes
the modal legible as a continuation of the answer. What is ours is the WEIGHT:
the stock rule draws a 6px slab under every tagged span, which at this type size
reads as a redaction bar. 2px says the same thing quietly. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container {
/* index.css:43925 pins a 21px font-size ON THE SPAN, not on the
, so a
tagged word does not follow the panel's type size. At the stock 20px nobody
noticed; the moment this panel steps down to 16px the tagged words stay 21px
and the sentence reads as ransom-note type. `inherit` re-binds them. */
font-size: inherit;
text-decoration: underline solid var(--tag-highlight-bgClr) 2px;
border-radius: 3px;
transition: background-color .2s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container.p-top {
text-decoration: overline solid var(--tag-highlight-bgClr) 2px;
}
/* the token badge: a real pill instead of a 3px-radius rectangle */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container .query-container .query-word {
padding: 0 9px;
border-radius: var(--ao-radius-pill, 26px);
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: var(--ao-fs-micro, 10.5px);
font-weight: 600;
letter-spacing: .4px;
box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}
/* the human name under/over the badge: a caption, set as one */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container .query-container .query-word-type {
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: var(--ao-fs-micro, 10.5px);
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
opacity: .9;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container .query-container .delete-button {
color: var(--ao-dim, #94a3b1);
transition: color .2s ease, opacity .2s ease;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .vux-entity-tagger.vux-qna-tagger .vux-entity-tagger-textField .entity-container .query-container .delete-button:hover {
color: var(--ao-bad, #d4437a);
}
/* ============================================================ *
* 4. THE SECTION RULE - eyebrow left, Annotation Mode right
*
* The toggle ships alone in a 44px row: a webix_spacer, then the toggle. Right
* aligned against nothing, it read as a button that had floated loose in the
* dead band under the header. Labelling the row turns that band into a section
* rule - the eyebrow names the panel below it, and the toggle becomes an action
* ON that panel rather than an orphan.
*
* The row is identified STRUCTURALLY (the layout line that directly owns the
* toggle), never by :nth-child - the same discipline ao-modal-sourcing.css uses
* on its sections. The bundle does emit an `annotateLabelId` label into this row
* but it is display:none with no text, so it cannot carry this.
*
* `position: relative` + an absolutely positioned ::before is deliberate: webix
* lays this row out with inline margins on inline-block children, so an in-flow
* pseudo would displace them.
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .webix_layout_line:has(>.annotatate_switch) {
position: relative;
}
/* NOT in Annotation Mode. That mode adds the app's own `.annotate_label`
* ("Select the words you want to annotate.") to this very row, and the two then
* paint on top of each other - verified live, the two strings interleave into
* "Qelesti@n". The label is REMOVED from the DOM when the mode is off, not just
* hidden, so :not(:has()) is an exact test rather than a guess at how webix hides
* things. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .webix_layout_line:has(>.annotatate_switch):not(:has(.annotate_label))::before {
content: "Question";
position: absolute;
left: 2px;
top: 50%;
transform: translateY(-50%);
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: 9.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .16em;
text-transform: uppercase;
white-space: nowrap;
color: var(--aosql-quiet);
pointer-events: none;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box {
background: transparent;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box .webix_button {
height: 34px;
margin-top: 5px;
padding: 0 18px;
background: var(--ao-surface, #fff);
color: var(--aosql-accent);
border: 1px solid var(--ao-hairline, #dde5ee);
border-radius: var(--ao-radius-pill, 26px);
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .2px;
box-shadow: none;
transition:
background-color .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
transform .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box .webix_button:hover {
background: var(--ao-primary-40, #e8f2fc);
color: var(--aosql-accent);
border-color: var(--ao-primary-light, #7fb2e6);
box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
transform: translateY(-1px);
}
/* engaged state stays unmistakable - solid primary */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box.webix_pressed .webix_button,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box.webix_pressed .webix_button:hover {
background: var(--ao-primary, #0079e1);
color: var(--vux-btn-text-500, #fff);
border-color: transparent;
box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}
/* ============================================================ *
* 5. THE SQL - the point of the whole modal
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_editor {
background: var(--aosql-paper);
color: var(--aosql-ink);
border: 1px solid var(--ao-hairline, #dde5ee);
border-radius: var(--ao-radius-card, 14px);
/* The only lift in the body. --ao-shadow is a COMPLETE box-shadow value, so it
is used whole - composing it into a longer shadow list is invalid at
computed-value time and silently yields no shadow at all. Paired with the
flat question panel in §3, this is what puts the SQL first. */
box-shadow: var(--ao-shadow, 0 4px 14px rgba(0, 0, 0, .1));
overflow: hidden;
/* NOTE - THE CODE FONT IS DELIBERATELY NOT SET HERE, AND MUST NOT BE.
*
* The app mounts ACE with an inline style="... font-family: consolas,
* monospace; font-size: 12pt", so changing the face from CSS needs
* !important - and that is the trap, not the fix. ACE caches
* renderer.characterWidth / lineHeight and re-derives them only when
* something tells it to; its FontMetrics measuring node is appended to the
* editor CONTAINER, outside .ace_content. Measured live on :8092 while the
* first draft of this file was active:
*
* .ace_line font-family = ui-monospace (painted)
* $measureNode font-family = consolas (measured)
* renderer.characterWidth = 9.83px
* true painted advance = 8.33px
*
* and forcing the container to match did NOT make ACE re-measure: 1.5 s
* later characterWidth was still 9.83. A 1.5px-per-column error walks the
* caret, the selection markers and the fold widgets off the glyphs - the
* defect gets worse the further right you type.
*
* So the face is applied by js/ao-modal-semantic-sql.js, which sets it and
* then makes ACE re-derive its metrics, and verifies the result against a
* painted probe before keeping it. This sheet only publishes the VALUES
* (--aosql-mono / --aosql-code-size above). Without that script the modal
* keeps ACE's own font and stays perfectly consistent. */
}
/* index.css:56019 re-asserts `consolas, monospace` on the rendered spans, which
would beat the container font the script installs. Gated on the script's own
stamp so that if the script is absent this rule matches nothing: `inherit`
binds the lines to whatever the container ended up with, which is the single
value ACE also measured. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_editor[data-aosql-font] .ace_content div,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_editor[data-aosql-font] .ace_content span {
font-family: inherit;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_scroller {
background: transparent;
}
/* the gutter: a tinted rail, not a grey slab, and hairlined off the code */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_gutter {
background: var(--aosql-gutter-bg);
color: var(--aosql-gutter-ink);
border-right: 1px solid var(--ao-hairline, #dde5ee);
border-radius: var(--ao-radius-card, 14px) 0 0 var(--ao-radius-card, 14px);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_gutter-cell {
font-variant-numeric: tabular-nums;
}
/* The 80-column print margin is a code-authoring affordance. Nobody is authoring
80-column SQL in a read-out modal, and the 1px line at x=1025 read as the edge
of a second, empty pane. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_print-margin {
display: none;
}
/* --- syntax: five hues, restrained --- */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_keyword {
color: var(--aosql-kw);
font-weight: 600;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_identifier,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_variable {
color: var(--aosql-ink);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_support.ace_function,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_support.ace_storedprocedure {
color: var(--aosql-fn);
font-weight: 600;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_string {
color: var(--aosql-str);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_numeric,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_constant.ace_numeric,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_constant.ace_language {
color: var(--aosql-num);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_keyword.ace_operator,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_paren,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_lparen,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_rparen,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_punctuation {
color: var(--aosql-punct);
font-weight: 400;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_comment {
color: var(--ao-dim, #94a3b1);
font-style: italic;
}
/* --- editor state --- */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_cursor {
color: var(--ao-primary, #0079e1);
border-left-width: 2px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_marker-layer .ace_active-line,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_gutter-active-line {
background: var(--aosql-active);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_marker-layer .ace_selection {
background: var(--aosql-sel);
border-radius: 3px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace-sqlserver .ace_indent-guide {
background: none;
box-shadow: inset 1px 0 0 var(--ao-hairline, #dde5ee);
}
/* slim scrollbars - a long query should scroll without a grey slab appearing */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_scrollbar::-webkit-scrollbar-thumb {
background: var(--ao-hairline, #dde5ee);
background-clip: padding-box;
border: 3px solid transparent;
border-radius: 6px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ace_scrollbar::-webkit-scrollbar-thumb:hover {
background: var(--ao-dim, #94a3b1);
background-clip: padding-box;
}
/* ============================================================ *
* 6. COPY AFFORDANCE - host + button (js/ao-modal-semantic-sql.js)
*
* The button is the ONE thing in this overhaul CSS cannot do: the modal has no
* copy control at all, and a copy control is an element. It is injected at runtime
* by an AO-owned script; if that script is absent every rule below simply matches
* nothing and the rest of this sheet is unaffected.
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_view:has(>.ace_editor) {
position: relative;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy {
position: absolute;
top: 9px;
right: 26px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 11px 0 9px;
border: 1px solid var(--ao-hairline, #dde5ee);
border-radius: var(--ao-radius-pill, 26px);
background: var(--ao-glass, rgba(255, 255, 255, .86));
-webkit-backdrop-filter: blur(var(--ao-blur, 6px));
backdrop-filter: blur(var(--ao-blur, 6px));
color: var(--ao-mid, #5e7081);
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: var(--ao-fs-small, 11px);
font-weight: 600;
letter-spacing: .3px;
line-height: 1;
cursor: pointer;
opacity: 0;
transform: translateY(-3px);
transition:
opacity .22s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
transform .22s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
color .2s ease,
border-color .2s ease,
box-shadow .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}
/* rests hidden; appears on approach, and stays put once focused or just used */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_view:has(>.ace_editor):hover .aosql-copy,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy:focus-visible,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy.is-done {
opacity: 1;
transform: none;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy:hover {
color: var(--aosql-accent);
border-color: var(--ao-primary-light, #7fb2e6);
box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy:focus-visible {
outline: 2px solid var(--ao-primary, #0079e1);
outline-offset: 2px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy svg {
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy.is-done {
color: var(--ao-ok, #00a3a3);
border-color: var(--ao-ok, #00a3a3);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy.is-failed {
color: var(--ao-bad, #d4437a);
border-color: var(--ao-bad, #d4437a);
}
/* ============================================================ *
* 7. FOOTER - the header's mirror, one primary action
*
* Height is set through webix by js/ao-modal-semantic-sql.js (90 -> 74): the stock
* band put 23px of nothing above and below a 44px button row.
* ============================================================ */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer {
/* !important #2: index.css declares
`.webix_window.webix_view.vux-cirrus-default-window .ao-vux-app-footer
{ background: var(--vux-bg) !important }`
The gradient is the header's, mirrored - surface against the field, field
against the window edge - so the two shelves bracket the body. */
background: linear-gradient(0deg,
var(--ao-primary-50, #f0f7fd) 0%,
var(--ao-surface, #fff) 100%) !important;
border-top: 1px solid var(--ao-hairline, #dde5ee);
border-radius: 0 0 18px 18px;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_view,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_el_box {
background: transparent;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_el_button .webix_button {
border-radius: var(--ao-radius-pill, 26px);
font-family: var(--ao-font, Inter, Roboto, sans-serif);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .2px;
transition:
background-color .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1)),
transform .25s var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .vux-cancel .webix_button {
background: transparent;
color: var(--ao-mid, #5e7081);
border: 1px solid var(--ao-hairline, #dde5ee);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .vux-cancel .webix_button:hover {
color: var(--ao-ink, #1e2429);
border-color: var(--ao-primary-light, #7fb2e6);
background: var(--ao-primary-40, #e8f2fc);
transform: translateY(-1px);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .vux-submit .webix_button {
background: var(--ao-primary, #0079e1);
color: var(--vux-btn-text-500, #fff);
border: 1px solid transparent;
box-shadow: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .vux-submit .webix_button:hover {
background: var(--ao-primary-deep, #005bab);
color: var(--vux-btn-text-500, #fff);
transform: translateY(-1px);
box-shadow:
var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22)),
0 10px 24px -10px rgba(16, 24, 40, .35);
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_el_button .webix_button:focus-visible {
outline: 2px solid var(--ao-primary, #0079e1);
outline-offset: 2px;
}
/* Disabled Execute (the modal is opened on a non-latest answer:
keyValueMap.disableExecuteButtons) must read as unavailable, not as primary. */
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_disabled_view .webix_button,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_button[disabled] {
box-shadow: none;
transform: none;
}
/* ============================================================ *
* 8. MOTION OPT-OUT
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor),
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .aosql-copy,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .action_icon .webix_icon,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box .webix_button,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_el_button .webix_button {
animation: none;
transition: none;
}
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-app-footer .webix_el_button .webix_button:hover,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .ao-vux-entity-tagger-editor-container .annotatate_switch .webix_el_box .webix_button:hover,
.ao-vux-editors-popup.vux-cirrus-default-window.webix_window:has(.ace_editor) .webix_win_head .action_icon .webix_icon_button:hover .webix_icon {
transform: none;
}
}