/* ao-modal-sourcing.css - "View Sourcing Information" modal (Easy Answers ⋮ more-menu)
 * ---------------------------------------------------------------------------------
 * WHAT THIS STYLES
 *   smartsearch-utils.ts -> smartSearchUtils.openShowMetadataPopup() opens the webix
 *   window whose css string is
 *       "ao-vux-appdescription-app ao-vux-ea-summary-info-app vux-cirrus-default-window"
 *   and fills it from smartSearchUtils.viewShowMetaDataInfoTemplate() ->
 *   smartSearchUtils.formatSourcingJSON().  Nothing else in the product emits that
 *   template, and nothing in this file may leak outside that window.
 *
 * SCOPING - WHY THE COMPOUND PREFIX, AND HOW IT WAS PROVEN
 *   Two sibling modals share base classes with this one:
 *       Semantic SQL   ...
 *       Reasoning      css: "vux-cirrus-default-window vux-reasoning-popup"
 *   `vux-cirrus-default-window` is therefore NOT ours, and a bare rule on it would
 *   restyle the siblings.  Counted over BOTH shipped bundles
 *   (node_modules/@apporchid/vulcanuxcontrols/vulcanuxcontrols.umd{,.min}.js):
 *       ao-vux-ea-summary-info-app   1 occurrence  <- only openShowMetadataPopup
 *       ao-vux-appdescription-app    4 occurrences
 *       vux-reasoning-popup          2 occurrences (both the reasoning popup)
 *   and `ao-vux-ea-summary-info-app` appears ZERO times in themes/css/index.css, so
 *   nothing existing depends on it.  EVERY rule below is prefixed with the compound
 *       .webix_window.webix_view.vux-cirrus-default-window
 *       .ao-vux-appdescription-app.ao-vux-ea-summary-info-app
 *   which the Reasoning window cannot match (it carries neither of the last two
 *   classes) and which is belt-and-braces even if a future build reuses one of the
 *   two AO names alone.
 *
 *   The three leading classes are NOT decoration - they are the specificity the
 *   sheet needs to exist at all.  themes/css/index.css owns this window at
 *       :75344  .webix_window.webix_view.vux-cirrus-default-window                  (0,3,0)
 *       :75377  ... .webix_win_head .webix_template   padding:24px 28px             (0,5,0)
 *       :75391  ... .webix_template > section .webix_icon                           (0,6,1)
 *       :75461  ... .webix_win_body   background:var(--vux-dashboard-popup-bg)      (0,4,0)
 *   and index.css is appended by loadCss() AFTER every static <link>, so it also
 *   wins the ordering tie.  Without the three-class lead this sheet's window radius,
 *   body field, header padding and header icon all measured byte-identical to an
 *   unstyled vux-cirrus-default-window - and the one declaration that did survive,
 *   `overflow:hidden` on the header template, then clipped the 38px icon plate
 *   against index.css's 28px content box.  ao-modal-reasoning.css:170/:251 leads
 *   with the same full chain for the same reason.
 *   Confirmed in the live DOM on :8092, where the window element reads
 *       webix_view webix_window vux-popup ao-vux-appdescription-app
 *       ao-vux-ea-summary-info-app vux-cirrus-default-window ao-vux-app
 *
 * DESIGN
 *   Sourcing is provenance: which datasources, which topics (MSOs), which columns,
 *   what the query did.  That is information design, not prose - so the flat
 *   indent-by-margin-left list the bundle emits is re-laid-out here as a stack of
 *   cards with an eyebrow rule per section, a label/value grid for attributes, and
 *   monospace chips wherever a real identifier appears.  Vocabulary is the thinking
 *   map's (js/ao-thinking-map.js, the `var CSS` block from line 248): teal for a
 *   resolved object, primary for a system/identifier, dim for narration.
 *
 * TOKENS
 *   Consumes themes/css/ao-design-system.css (--ao-*).  Defines nothing in that
 *   namespace; the few private values below are --aosrc-*.  Every --ao-* reference
 *   carries a literal fallback so the modal degrades sanely if that sheet is absent.
 *
 * :has()
 *   The three sections are told apart STRUCTURALLY with :has() rather than by
 *   :nth-child, because formatSourcingJSON() emits only the sections the payload
 *   actually carries and an order-based rule silently mis-paints when one is
 *   missing.  On an engine without :has() those rules are dropped and the panel
 *   degrades to cards + eyebrows + the bundle's own indentation - readable, just
 *   not tabular.  Nothing else in the file depends on :has().
 *
 * LOAD ORDER
 *   index.html carries this as a static <link> in <head>; themes/css/index.css is
 *   appended at runtime and therefore wins same-specificity ties.  Every selector
 *   here is >= 3 classes, so it outranks index.css's single-class .json-* rules
 *   without !important.  !important is used ONLY against the inline
 *   style="margin-left:Npx" the template writes, and against webix's inline
 *   float/margin on the dataview item.
 */

/* ============================================================ *
 * 0. PRIVATE VALUES  (--aosrc-*, scoped to this window)
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app {
	--aosrc-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, "Roboto Mono", monospace;
	--aosrc-font: var(--ao-font, Inter, Roboto, "Helvetica Neue", Arial, sans-serif);
	--aosrc-ink: var(--ao-ink, #1e2429);
	--aosrc-mid: var(--ao-mid, #5e7081);
	--aosrc-dim: var(--ao-dim, #94a3b1);
	--aosrc-line: var(--ao-hairline, #dde5ee);
	--aosrc-surface: var(--ao-surface, #fff);
	--aosrc-p: var(--ao-primary, #0079e1);
	--aosrc-pd: var(--ao-primary-deep, #005bab);
	--aosrc-pl: var(--ao-primary-light, #7fb2e6);
	--aosrc-p50: var(--ao-primary-50, #f0f7fd);
	--aosrc-p40: var(--ao-primary-40, #e8f2fc);
	--aosrc-ok: var(--ao-ok, #00a3a3);
	--aosrc-warm: var(--ao-warm, #f57c00);
	--aosrc-ease: var(--ao-ease, cubic-bezier(.2, .7, .3, 1));

	/* tinted row fill: a hair off the card so a ledger row reads as a row.
	   Recomputed from the live surface where color-mix exists (dark themes). */
	--aosrc-row: var(--ao-primary-50, #f0f7fd);
	--aosrc-rowline: var(--ao-primary-light, #7fb2e6);
	--aosrc-mark: var(--ao-primary-light, #7fb2e6);
}

@supports (background: color-mix(in srgb, red, blue)) {
	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app {
		--aosrc-row: color-mix(in srgb, var(--aosrc-p) 5%, var(--aosrc-surface));
		--aosrc-rowline: color-mix(in srgb, var(--aosrc-p) 40%, var(--aosrc-surface));
		--aosrc-mark: color-mix(in srgb, var(--aosrc-p) 58%, var(--aosrc-surface));
	}
}

/* ============================================================ *
 * 1. WINDOW CHROME
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app {
	border-radius: 18px;
	border: 1px solid var(--aosrc-line);
	box-shadow: 0 26px 70px rgba(15, 23, 32, .22), 0 2px 8px rgba(15, 23, 32, .06);
	overflow: hidden;
	font-family: var(--aosrc-font);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_content {
	border-radius: inherit;
	overflow: hidden;
}

/* ---- header ------------------------------------------------ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head {
	background: var(--aosrc-surface);
	border-bottom: 1px solid var(--aosrc-line);
	position: relative;
}

/* the one piece of brand in the chrome: a hairline rail across the top */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--aosrc-p) 0%, var(--aosrc-ok) 100%);
	opacity: .9;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .webix_view,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .webix_toolbar,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .webix_template {
	background: transparent;
	border: 0;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .webix_template {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px 0 22px;
	overflow: hidden;
}

/* icon | title */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head section.flex {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
	gap: 14px;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head section.flex>i.webix_icon {
	width: 38px;
	height: 38px;
	min-width: 38px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: var(--aosrc-p40);
	color: var(--aosrc-pd);
	font-size: 17px;
	line-height: 1;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .ao-vux-line-clamp-3 {
	font-family: var(--aosrc-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.1px;
	color: var(--aosrc-ink);
	min-width: 0;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .vux-app-close {
	flex: none;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--aosrc-mid);
	font-size: 15px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .25s var(--aosrc-ease);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .vux-app-close:hover {
	background: var(--aosrc-p50);
	color: var(--aosrc-pd);
	transform: scale(1.06);
}

/* ---- body surface ------------------------------------------ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body {
	background: var(--ao-field, radial-gradient(120% 90% at 50% 8%, #fff 0%, #f4f8fd 42%, #eaf1fa 100%));
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body>.webix_view,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body .webix_layout_line,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body .webix_abslayout,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body .ao-vux-microapp,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body .ao-vux-dataview,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_body .webix_scroll_cont {
	background: transparent;
	border: 0;
}

/* ============================================================ *
 * 2. THE CONTENT COLUMN
 * webix writes float/margin/overflow inline on the item, hence !important.
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item {
	float: none !important;
	width: 100% !important;
	max-width: 960px;
	margin: 0 auto !important;
	padding: 24px 30px 34px !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	box-sizing: border-box;
	font-family: var(--aosrc-font);
	font-size: 12.5px;
	color: var(--aosrc-ink);
	cursor: default;
	animation: aosrcRise .38s var(--aosrc-ease) both;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item:hover,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item.webix_selected {
	background: transparent !important;
}

@keyframes aosrcRise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================ *
 * 3. SECTION CARDS
 * Three sections come out of viewShowMetaDataInfoTemplate(), in this order but
 * identified STRUCTURALLY (never by :nth-child, which breaks when one is absent):
 *   .json-section:has(> .json-overview)              -> Sourcing System Information
 *   .json-section:has(.json-key.json-overview-normol)-> Topics (MSOs) and Properties
 *   .json-section:has(.ao-vux-json-value-over-view)  -> Query Overview
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section {
	background: var(--aosrc-surface);
	border: 1px solid var(--aosrc-line);
	border-radius: var(--ao-radius-card, 14px);
	padding: 15px 18px 16px;
	margin: 0 0 14px;
	font-family: var(--aosrc-font);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--aosrc-ink);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:last-child {
	margin-bottom: 0;
}

/* the whattab variant of this template adds a left pad we do not want here */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section.whattab-sourcing-indentation {
	padding-left: 18px;
}

/* ---- eyebrow title ----------------------------------------- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 13px;
	font-family: var(--aosrc-font);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aosrc-mid);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section-title::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--aosrc-p);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--aosrc-line);
}

/* teal pip = a resolved semantic object; dim pip = narration */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-key.json-overview-normol) .json-section-title::before {
	background: var(--aosrc-ok);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.ao-vux-json-value-over-view) .json-section-title::before {
	background: var(--aosrc-dim);
}

/* ============================================================ *
 * 4. SOURCING SYSTEM INFORMATION
 *    lead sentence + one label/description row per datasource
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-overview {
	margin: 0 0 6px !important;
	font-family: var(--aosrc-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--aosrc-ink);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(>.json-overview)>.json-item {
	margin: 0 !important;
	display: grid;
	grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
	align-items: baseline;
	gap: 0 14px;
	padding: 9px 0;
	border-top: 1px solid var(--aosrc-line);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(>.json-overview)>.json-item .json-key {
	font-family: var(--aosrc-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1px;
	color: var(--aosrc-pd);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(>.json-overview)>.json-item .json-value {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--aosrc-mid);
	white-space: normal;
}

/* ============================================================ *
 * 5. TOPICS (MSOs) AND PROPERTIES - the provenance ledger
 *
 *    .json-item[ml:16] > .json-key.json-overview-normol   MSO name
 *    .json-item[ml:32] > .json-key + .json-value          datasource / table
 *    .json-item[ml:32] > .json-key (no value)             "columns:" sub-eyebrow
 *    .json-array-item[ml:48] > .json-value                one column lineage line
 * ============================================================ */

/* --- MSO block header --- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:has(>.json-overview-normol) {
	margin: 0 !important;
	padding: 17px 0 9px;
	border-top: 1px solid var(--aosrc-line);
}

/* the first MSO sits directly under the eyebrow - no repeated rule */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section-title+.json-item:has(>.json-overview-normol) {
	border-top: 0;
	padding-top: 1px;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-key.json-overview-normol {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-family: var(--aosrc-font);
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: -.1px;
	line-height: 1.3;
	color: var(--aosrc-ink);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-key.json-overview-normol::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background: var(--aosrc-ok);
	box-shadow: 0 0 0 3px rgba(0, 163, 163, .14);
}

/* --- attribute rows: datasource / table --- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)) {
	margin: 0 0 0 17px !important;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	align-items: baseline;
	gap: 0 10px;
	padding: 3px 0;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)) .json-key {
	font-family: var(--aosrc-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2px;
	color: var(--aosrc-dim);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)) .json-value {
	justify-self: start;
	max-width: 100%;
	font-family: var(--aosrc-mono);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--aosrc-pd);
	background: var(--aosrc-p50);
	border: 1px solid var(--aosrc-rowline);
	border-radius: 6px;
	padding: 1px 7px;
	word-break: break-word;
}

/* --- the bare "columns:" label becomes a sub-eyebrow --- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)):not(:has(.json-value)) {
	display: block;
	padding: 12px 0 5px;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)):not(:has(.json-value)) .json-key {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aosrc-dim);
}

/* --- one lineage line per column --- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-array-item {
	margin: 0 0 5px 17px !important;
	padding: 7px 12px;
	border: 1px solid var(--aosrc-line);
	border-left: 3px solid var(--aosrc-rowline);
	border-radius: 9px;
	background: var(--aosrc-row);
	font-family: var(--aosrc-font);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--aosrc-mid);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-array-item:last-child {
	margin-bottom: 0 !important;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-array-item .json-value {
	color: inherit;
	font-size: inherit;
	white-space: normal;
	word-break: break-word;
}

/* ============================================================ *
 * 6. QUERY OVERVIEW - narration, so it reads as prose
 * ============================================================ */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.ao-vux-json-value-over-view)>.json-item {
	margin: 0 !important;
	padding: 0;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-json-value-over-view {
	display: block;
	font-family: var(--aosrc-font);
	font-size: 13px;
	line-height: 1.65;
	color: var(--aosrc-mid);
	white-space: normal;
}

/* ============================================================ *
 * 7. NOT-YET-AVAILABLE / EMPTY
 *
 *    viewShowMetaDataInfoTemplate() returns '' when the reply carries no
 *    metadataSummary - the ⋮ item is tooltipped "The Sourcing information is not yet
 *    available. Check back when full response is available." for exactly that case,
 *    and the modal is still reachable on an older thread or a failed execution.
 *    An empty body is a dead end, so it explains itself instead.
 *
 *    Two shapes are covered because webix may render an empty item or no item:
 *      (a) an item exists but is empty
 *      (b) no item at all - the scroll container is empty
 *    js/ao-modal-sourcing.js additionally stamps .aosrc-empty for the case where the
 *    template renders whitespace only (which defeats :empty); the CSS below stands
 *    on its own if that script is not loaded.
 * ============================================================ */
/* let the empty state centre in the panel rather than in its own content box:
   the dataview has a real height, so give the scroll container one too - but ONLY
   while it is empty, so the populated layout is untouched. */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:empty,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:has(> .webix_dataview_item:empty),
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:has(> .webix_dataview_item.aosrc-empty) {
	height: 100%;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item:empty,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item.aosrc-empty,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:empty {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 280px;
	padding: 24px !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
	box-sizing: border-box;
	animation: aosrcRise .38s var(--aosrc-ease) both;
}

/* The mark is drawn, not iconified, so it needs no font and follows the palette:
   three record rows, the last one short and dim - the row that has not landed. */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item:empty::before,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item.aosrc-empty::before,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:empty::before {
	content: "Sourcing information is not ready yet";
	display: block;
	padding-top: 52px;
	font-family: var(--aosrc-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.1px;
	color: var(--aosrc-ink);
	background-image:
		linear-gradient(var(--aosrc-mark), var(--aosrc-mark)),
		linear-gradient(var(--aosrc-mark), var(--aosrc-mark)),
		linear-gradient(var(--aosrc-dim), var(--aosrc-dim));
	background-repeat: no-repeat;
	background-size: 48px 5px, 48px 5px, 24px 5px;
	background-position: center 2px, center 14px, center 26px;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item:empty::after,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item.aosrc-empty::after,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_scroll_cont:empty::after {
	content: "This answer has not recorded which topics, columns and datasources it drew on. That happens once the full response lands - reopen this panel then.";
	display: block;
	max-width: 400px;
	margin: 10px auto 0;
	font-family: var(--aosrc-font);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--aosrc-dim);
}

/* the platform's own "no data" / loading treatments, kept on-theme */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-info-message,
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-loading-text {
	background: transparent;
	font-family: var(--aosrc-font);
	color: var(--aosrc-mid);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-loading-text h4 {
	font-size: 13px;
	letter-spacing: .1em;
}

/* ============================================================ *
 * 8. MOTION OPT-OUT
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item {
		animation: none;
	}

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .vux-app-close {
		transition: none;
	}

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .webix_win_head .vux-app-close:hover {
		transform: none;
	}
}

/* ============================================================ *
 * 9. NARROW WINDOWS
 *    The window is opened at 60% x 70% of the SCREEN, so on a small laptop the
 *    label column has to give way before the values do.
 * ============================================================ */
@media (max-width: 900px) {

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .ao-vux-dataview .webix_dataview_item {
		padding: 18px 16px 26px !important;
	}

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(.json-overview-normol)>.json-item:not(:has(>.json-overview-normol)) {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-section:has(>.json-overview)>.json-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 3px 0;
	}
}

/* ============================================================ *
 * 10. SHAPES THAT ONLY EXIST WHEN js/ao-modal-sourcing.js RAN
 *
 *     That script is a progressive enhancement: it rewrites the three text-level
 *     things CSS cannot reach (the "- key:" labels, the "Sourcing Information- Q"
 *     title, and the per-column provenance SENTENCE).  It stamps `aosrc-on` on the
 *     window, so everything below is inert without it and the sections above stand
 *     alone.  See the header of that file for why it exists at all.
 * ============================================================ */

/* ---- header: eyebrow over the question --------------------- */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app.aosrc-on .webix_win_head .ao-vux-line-clamp-3 {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-eyebrow {
	font-family: var(--aosrc-font);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aosrc-dim);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-q {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--aosrc-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.1px;
	color: var(--aosrc-ink);
}

/* ---- one parsed provenance row per column ------------------ *
 *  property  <-  COLUMN            table · datasource (only when it differs)
 *  A wildcard / absent column is the honest exception: warm, and named as such.   */
.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-array-item.aosrc-lineage {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 9px;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-prop {
	font-family: var(--aosrc-font);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--aosrc-ink);
	word-break: break-word;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-map {
	font-size: 11px;
	line-height: 1.5;
	color: var(--aosrc-dim);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-col {
	font-family: var(--aosrc-mono);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--aosrc-pd);
	background: var(--aosrc-p50);
	border: 1px solid var(--aosrc-rowline);
	border-radius: 6px;
	padding: 1px 7px;
	word-break: break-word;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-note {
	margin-left: auto;
	font-family: var(--aosrc-mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: .2px;
	color: var(--aosrc-dim);
	word-break: break-word;
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .json-array-item.aosrc-wild {
	border-left-color: var(--aosrc-warm);
}

.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-wild .aosrc-col {
	font-family: var(--aosrc-font);
	font-size: 11.5px;
	font-style: italic;
	color: var(--aosrc-warm);
	background: transparent;
	border-color: var(--aosrc-warm);
}

@supports (background: color-mix(in srgb, red, blue)) {
	.webix_window.webix_view.vux-cirrus-default-window.ao-vux-appdescription-app.ao-vux-ea-summary-info-app .aosrc-wild .aosrc-col {
		background: color-mix(in srgb, var(--aosrc-warm) 8%, var(--aosrc-surface));
		border-color: color-mix(in srgb, var(--aosrc-warm) 34%, var(--aosrc-surface));
	}
}