/* ao-cuecards.css - Easy Answers cue cards (2026-08-25, Wave A of the UI modernisation)
 *
 * WHAT THIS STYLES
 * ----------------
 * The markup emitted by js/vux/cuecardUtils.js - which is AO-owned, not bundle
 * code - for the cards that carry the answer on the Easy Answers surface:
 *
 *   questionSummaryCuecardTemplate      the answer summary        .ao-cc-summary
 *   clarificationMessageCuecardTemplate the "I read it as..." note .ao-cc-clarify
 *   _quickInsightHeaderTemp             insight card header        .ao-cc-ihead
 *   _quickInsightTitle                  insight card headline      .ao-cc-ititle
 *   _quickInsightFooterTemp             insight card footer        .ao-cc-ifoot
 *   _quickNoSignificantTemp             insight empty state        .ao-cc-inone
 *
 * Every `ao-cc-*` class was ADDED alongside the classes that were already there
 * (.ea-insight-cuecard, .quick-insight-temp, .quick-body-heading, ...). Nothing
 * was renamed or removed, so every existing rule in themes/css/index.css still
 * matches and every JS hook (webix `onClick` keys off `vuxicon-expand`, the
 * `.ao-vux-app-action-icons-show/-hide` visibility toggles) still fires.
 *
 * WHY THE SELECTORS LOOK REDUNDANT
 * --------------------------------
 * index.css already claims these elements (~87564-87941 for the summary card,
 * ~39344-39595 for the insight card) and it loads AFTER this file: index.html
 * carries ao-cuecards.css as a static <link> in <head>, while index.css is
 * appended to <head> at runtime by loadCss(). We are therefore always EARLIER in
 * source order and lose every tie. So every rule here has to win on specificity,
 * and the base selectors name more classes than they need to:
 *
 *   .ao-cc.ao-cc-summary.ea-insight-cuecard   (0,3,0)  beats
 *   .ao-vux-qna-summary-cuecard .ea-insight-cuecard   (0,2,0)
 *
 * That third class is not decoration. Measured in the running app before it was
 * added: `.ao-cc.ao-cc-summary` at (0,2,0) TIED index.css:87888 and lost the card
 * padding to it, and `.ao-cc.ao-cc-summary .ao-cc-expand` at (0,3,0) tied
 * index.css:87937 and lost the expand button's border-radius. `.ao-cc-clarify`
 * carries `.flex-vcenter` for the same reason.
 * `!important` appears once, on a background index.css declares !important twice.
 *
 * HOUSE STYLE
 * -----------
 * Deliberately the live thinking map's vocabulary (js/ao-thinking-map.js, the
 * `var CSS` block from line 248), the same source ao-ontology-graph.css drew on:
 *   - surface card + 1px cool hairline + soft elevation on a quiet field
 *                                              (.tm3-node .tm3-card, .tm3-card-pop)
 *   - 13px/600 name over 10.5px/500 detail over dim metadata
 *                                              (.tm3-name / .tm3-prop / .tm3-badge)
 *   - values the model recognised take the primary, figures stay ink
 *                                              (.tm3-q .tm3-qhit, .tm3-cp-i b)
 *   - translucent blurred chrome pills at radius 26px          (.tm3-chip)
 *   - section labels: 11px/600, .5px tracking, uppercase        (.tm3-cp-h)
 *   - restrained dividers                                      (.tm3-cp-sec)
 *   - cubic-bezier(.2,.7,.3,1) motion, cubic-bezier(.34,1.32,.5,1) entrances
 *
 * TOKENS
 * ------
 * Consumes themes/css/ao-design-system.css. Nothing here defines or redefines an
 * `--ao-*` token; the `--cc-*` names below are local aliases (the same pattern
 * ao-ontology-graph.css uses with `--ao-og-*`) so that a) the design system is
 * the single source of truth and b) this file still degrades sanely on its own,
 * because each alias falls back to the `--vux-*` token the design system itself
 * wraps and then to the thinking map's light literal.
 *
 * --ao-shadow and --ao-elevation are COMPLETE box-shadow values (checked against
 * ao-design-system.css, not guessed): --ao-shadow is the neutral resting lift,
 * --ao-elevation the primary-tinted one that means active/hovered. They are used
 * whole, never composed into a larger shadow, because a token substituted into a
 * shadow list it does not fit is invalid at computed-value time and would silently
 * drop the whole declaration.
 * --ao-field is a gradient and is used as a background value.
 *
 * THEMES
 * ------
 * .light-theme / .dark-theme / .purple-theme / .highcontrast-theme are set at
 * runtime on <body> AND, for cue cards specifically, on the .webix_template
 * inside each microapp (CueCardMicroApp.setTheme). Both are ancestors of this
 * markup, so theme-scoped rules below use a plain descendant combinator and work
 * either way. Everything else is token-driven and flips on its own; translucency
 * and shadow go through --vux-rgb-bg / --vux-rgb-bg-inverse, which every theme
 * defines.
 */

/* ------------------------------------------------------------------ *
 * Local aliases
 * ------------------------------------------------------------------ */
.ao-cc {
	--cc-p: var(--ao-primary, var(--vux-primary-500, #0079e1));
	--cc-pd: var(--ao-primary-deep, var(--vux-primary-700, #005bab));
	--cc-pl: var(--ao-primary-light, var(--vux-primary-300, #7fb2e6));
	--cc-p50: var(--ao-primary-50, var(--vux-primary-50, #f0f7fd));
	--cc-p40: var(--ao-primary-40, var(--vux-primary-40, #e8f2fc));

	--cc-ink: var(--ao-ink, var(--vux-text-500, #1e2429));
	--cc-mid: var(--ao-mid, var(--vux-text-400, #5e7081));
	--cc-dim: var(--ao-dim, var(--vux-text-300, #94a3b1));
	/* --ao-warm and --ao-ok are deliberately NOT aliased: nothing on a cue card
	   carries a warn or ok state today, and an alias no rule reads is a claim
	   about the design that is not true. --ao-bad is here for the favourite heart. */
	--cc-bad: var(--ao-bad, var(--vux-error-500, #d4437a));

	--cc-surface: var(--ao-surface, var(--vux-bg, #fff));
	--cc-line: var(--ao-hairline, var(--vux-border-500, #dde5ee));

	/* whole box-shadow values - see the note above */
	--cc-shadow: var(--ao-shadow, 0 4px 14px rgba(var(--vux-rgb-bg-inverse, 0, 0, 0), .10));
	--cc-elev: var(--ao-elevation, 0 4px 14px rgba(0, 121, 225, .22));

	--cc-glass: var(--ao-glass, rgba(var(--vux-rgb-bg, 255, 255, 255), .86));
	--cc-blur: var(--ao-blur, 6px);

	--cc-ease: var(--ao-ease, cubic-bezier(.2, .7, .3, 1));
	--cc-pop: var(--ao-ease-pop, cubic-bezier(.34, 1.32, .5, 1));
	--cc-r-pill: var(--ao-radius-pill, 26px);
	--cc-r-card: var(--ao-radius-card, 14px);
}

/* ================================================================== *
 * EA answer summary cue card
 * ================================================================== */

/* The microapp view stops painting a background of its own; the card below carries
   the surface. This is not a preference - index.css:87572 paints this view
   `linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important` in LITERAL HEX,
   so on the dark and high-contrast themes the answer sat in a white gutter. Seen
   in the harness on .dark-theme before this rule existed.
   Doubling the class gets us past both of index.css's !important declarations
   (77925 at (0,1,0) and 87572 at (0,1,0)). It does NOT get past
   `.panel_drag_view.ao-vux-apphover.ao-vux-no-background-app .webix_view` at
   (0,4,0)!important (index.css:58763) - and it does not need to, because that rule
   also resolves to transparent and qnaSummaryApp is flagged no-background
   (MSOSummaryDynamicAppsBuilder.isNoBackgroundApp). Both winners agree. */
.ao-vux-qna-summary-cuecard.ao-vux-qna-summary-cuecard {
	background: transparent !important;
}

/* ---- the card ---- */
.ao-cc.ao-cc-summary.ea-insight-cuecard {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	margin: 10px 12px 12px;
	/* Bottom padding, not a bottom margin, carries most of the space under the
	   closing line. cuecardUtils.onAfterSummaryAppLoad sizes the panel from
	   `.webix_template` scrollHeight MINUS a hard-coded 17, and padding is inside
	   scrollHeight where a trailing margin may not be. index.css:87889 documents
	   the same trap and reserves 24px; 22 + a 12px margin stays clear of it. */
	padding: 16px 20px 22px;
	background: var(--cc-surface);
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-card);
	box-shadow: var(--cc-shadow);
	color: var(--cc-mid);
	font-size: 13.5px;
	line-height: 1.62;
	font-variant-numeric: tabular-nums;
	/* Entrances are carried entirely by the keyframes + `both`. No opacity:0 base
	   rule: with animations disabled (OS setting, print, a throttled tab) a base
	   of 0 would leave the answer permanently invisible. */
	animation: ao-cc-rise .42s var(--cc-pop) both;
}

/* index.css reserves a 24px column for the expand icon; the chrome pill is 28. */
.ao-cc.ao-cc-summary.ea-insight-cuecard.expand-icon {
	grid-template-columns: minmax(0, 1fr) 28px;
	gap: 10px;
	width: auto;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body {
	min-width: 0;
}

/* ---- type hierarchy ---- */

/* The opening sentence is the answer; everything after it is support. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > p:first-child {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: -.15px;
	color: var(--cc-ink);
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > p {
	margin: 0 0 10px;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > p:last-child {
	margin-bottom: 0;
}

/* Section labels, in the thinking map's .tm3-cp-h idiom, with the hairline that
   makes them read as dividers rather than as another line of copy. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body h3,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body h4,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body h5,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body h6 {
	margin: 16px 0 8px;
	padding-top: 12px;
	border-top: 1px solid var(--cc-line);
	font-size: var(--ao-fs-small, 11px);
	font-weight: 600;
	letter-spacing: .5px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--cc-mid);
}

/* ...but not when the summary opens on one, which it often does. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > h3:first-child,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > h4:first-child,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > h5:first-child,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body > h6:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Figures and named entities are the payload: crisp ink at 600, tabular so
   columns of numbers in adjacent bullets line up. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body b,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body strong {
	font-weight: 600;
	color: var(--cc-ink);
}

/* The summary LLM italicises the values it took from the data. That is the same
   class of token the thinking map lights up in the question - but there it lights
   up two or three words, whereas a summary can carry a dozen per card. A chip on
   every one turns the paragraph into a ransom note, and because markdown emits no
   space between an emphasis close and a following comma, horizontal padding also
   strands the comma. So the recognition is carried by colour and weight alone:
   entity names go primary, figures stay ink, and the card reads two-tone.
   Painted both ways at 980px before settling on this. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body em,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body i {
	font-style: normal;
	font-weight: 500;
	color: var(--cc-pd);
	/* index.css:87923 gives these a chip fill, radius and 5px of side padding.
	   Dropping our own declaration is not enough - the old ones keep applying, and
	   the padding is what strands the comma after an entity name. Reset explicitly. */
	background: none;
	border-radius: 0;
	padding: 0;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body code {
	font-size: 12.5px;
	color: var(--cc-mid);
	background: var(--cc-p50);
	border: 1px solid var(--cc-line);
	border-radius: 5px;
	padding: .5px 5px;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body a {
	color: var(--cc-pd);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--cc-pl);
}

/* ---- lists: the bullet becomes the thinking map's dot ---- */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ul,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ol {
	margin: 0 0 10px;
	padding-left: 0;
	list-style: none;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ul:last-child,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ol:last-child {
	margin-bottom: 0;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body li {
	position: relative;
	margin: 0 0 7px;
	padding-left: 18px;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body li:last-child {
	margin-bottom: 0;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ul > li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: .68em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cc-pl);
}

/* markdown-it emits a LOOSE list (<li><p>) whenever the source separates items
   with blank lines, which the summary prompt always does. */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body li > p {
	margin: 0 0 4px;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body li > p:last-child {
	margin-bottom: 0;
}

/* ordered lists keep their numbers, in the dim metadata voice */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ol {
	counter-reset: ao-cc-ol;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ol > li {
	counter-increment: ao-cc-ol;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body ol > li::before {
	content: counter(ao-cc-ol);
	position: absolute;
	left: 0;
	top: 0;
	width: 14px;
	text-align: right;
	font-size: 11px;
	font-weight: 600;
	line-height: inherit;
	color: var(--cc-dim);
	font-variant-numeric: tabular-nums;
}

/* ---- the unrecognised-tokens aside, split off from the answer ---- */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-aside {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--cc-line);
	font-size: 12.5px;
	color: var(--cc-dim);
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-aside p {
	margin: 0 0 4px;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-aside p:last-child {
	margin-bottom: 0;
}

/* ---- expand: a chrome pill, not a bare glyph ---- */
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand {
	align-self: start;
	width: 28px;
	height: 28px;
	border-radius: var(--cc-r-pill);
	background: var(--cc-glass);
	border: 1px solid var(--cc-line);
	color: var(--cc-mid);
	font-size: 12px;
	-webkit-backdrop-filter: blur(var(--cc-blur));
	backdrop-filter: blur(var(--cc-blur));
	opacity: .5;
	transition: opacity .28s var(--cc-ease), color .28s var(--cc-ease),
		border-color .28s var(--cc-ease), box-shadow .28s var(--cc-ease),
		transform .28s var(--cc-ease);
}

.ao-cc.ao-cc-summary.ea-insight-cuecard:hover .ao-cc-expand,
.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand:focus-visible {
	opacity: 1;
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand:hover {
	color: var(--cc-pd);
	background: var(--cc-surface);
	border-color: var(--cc-pl);
	box-shadow: var(--cc-elev);
	transform: translateY(-1px);
}

.ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand:focus-visible {
	outline: 2px solid var(--cc-p);
	outline-offset: 2px;
}

/* ================================================================== *
 * Clarification cue card
 *
 * Distinct from the answer: it is the system telling you how it read the
 * question. Primary-tinted fill and an accent rail, so it never gets mistaken
 * for a result.
 *
 * It shares the microapp css class `ao-vux-qna-summary-cuecard` with the answer
 * card (both are built by MSOSummaryDynamicAppsBuilder) but has NO
 * .ea-insight-cuecard child - hence its own base class rather than a variant.
 * .ao-vux-qna-summary-cuecard .webix_template is display:flex, so it needs to
 * behave as a flex item.
 * ================================================================== */
.ao-cc.ao-cc-clarify.flex-vcenter {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	align-items: flex-start;
	margin: 10px 12px 12px;
	padding: 13px 16px 13px 14px;
	background: var(--cc-p50);
	border: 1px solid var(--cc-line);
	border-left: 3px solid var(--cc-p);
	border-radius: var(--cc-r-card);
	color: var(--cc-mid);
	font-size: 13px;
	line-height: 1.6;
	height: auto;
	animation: ao-cc-rise .42s var(--cc-pop) both;
}

.ao-cc.ao-cc-clarify .ao-cc-clarify-icon {
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: -1px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cc-p40);
	color: var(--cc-pd);
	font-size: 15px;
}

.ao-cc.ao-cc-clarify .ao-cc-body {
	min-width: 0;
}

.ao-cc.ao-cc-clarify .ao-cc-body p {
	margin: 0 0 6px;
}

.ao-cc.ao-cc-clarify .ao-cc-body p:last-child {
	margin-bottom: 0;
}

.ao-cc.ao-cc-clarify .ao-cc-body b,
.ao-cc.ao-cc-clarify .ao-cc-body strong {
	font-weight: 600;
	color: var(--cc-ink);
}

/* same two-tone as the answer card - and the same explicit reset, because the
   clarification card also lives under .ao-vux-qna-summary-cuecard */
.ao-cc.ao-cc-clarify .ao-cc-body em,
.ao-cc.ao-cc-clarify .ao-cc-body i {
	font-style: normal;
	font-weight: 500;
	color: var(--cc-pd);
	background: none;
	border-radius: 0;
	padding: 0;
}

/* ================================================================== *
 * Insight cue cards
 *
 * A restrained pass: the type hierarchy, the icon plate and the Full Story
 * affordance only. The 85px header grid, the 56px footer and the `+ main` body
 * geometry are index.css's and are deliberately left alone - they carry chart
 * layout that cannot be verified outside a live Insights Feed.
 * ================================================================== */

/* ---- header ---- */
.ao-cc.ao-cc-ihead {
	border-bottom: 1px solid var(--cc-line);
}

.ao-cc.ao-cc-ihead .header-icon > * {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--cc-p50);
	color: var(--cc-pd);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s var(--cc-ease), color .3s var(--cc-ease);
}

.ao-cc.ao-cc-ihead .ao-cc-ihead-name {
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.1px;
	text-transform: none;
	color: var(--cc-ink);
	margin: 0;
}

.ao-cc.ao-cc-ihead .ao-cc-ihead-sub {
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .2px;
	color: var(--cc-mid);
	margin: 1px 0 0;
}

.ao-cc.ao-cc-ihead .ao-cc-ihead-time {
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: .2px;
	color: var(--cc-dim);
	opacity: 1;
	margin: 1px 0 0;
}

.ao-cc.ao-cc-ihead .vuxicon-more-new {
	color: var(--cc-dim);
	border-radius: 50%;
	transition: background .25s var(--cc-ease), color .25s var(--cc-ease);
}

.ao-cc.ao-cc-ihead .vuxicon-more-new:hover {
	color: var(--cc-pd);
	background: var(--cc-p50);
}

/* ---- headline ---- */
.ao-cc.ao-cc-ititle .ao-cc-ititle-main {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.1px;
	color: var(--cc-ink);
}

.ao-cc.ao-cc-ititle .ao-cc-ititle-sub {
	margin-top: 4px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .2px;
	color: var(--cc-dim);
}

/* ---- footer ---- */
.ao-cc.ao-cc-ifoot {
	border-top: 1px solid var(--cc-line);
	color: var(--cc-dim);
}

.ao-cc.ao-cc-ifoot .indi-count {
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--cc-mid);
	font-variant-numeric: tabular-nums;
}

.ao-cc.ao-cc-ifoot .webix_icon {
	color: var(--cc-dim);
	font-size: 17px;
	transition: color .25s var(--cc-ease), background .25s var(--cc-ease);
}

.ao-cc.ao-cc-ifoot .webix_icon.active {
	color: var(--cc-p);
}

.ao-cc.ao-cc-ifoot .webix_icon.vuxicon-heart-filled {
	color: var(--cc-bad);
}

/* Full Story is the card's one real call to action: a chrome pill. */
.ao-cc.ao-cc-ifoot .ao-cc-fullstory {
	gap: 6px;
	padding: 5px 13px;
	border-radius: var(--cc-r-pill);
	background: var(--cc-glass);
	border: 1px solid var(--cc-line);
	-webkit-backdrop-filter: blur(var(--cc-blur));
	backdrop-filter: blur(var(--cc-blur));
	transition: color .3s var(--cc-ease), border-color .3s var(--cc-ease),
		background .3s var(--cc-ease), box-shadow .3s var(--cc-ease),
		transform .3s var(--cc-ease);
}

.ao-cc.ao-cc-ifoot .ao-cc-fullstory p {
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--cc-mid);
	margin: 0;
}

.ao-cc.ao-cc-ifoot .ao-cc-fullstory .webix_icon {
	font-size: 13px;
	width: auto;
	height: auto;
}

.ao-cc.ao-cc-ifoot .ao-cc-fullstory:hover {
	border-color: var(--cc-pl);
	background: var(--cc-surface);
	box-shadow: var(--cc-elev);
	transform: translateY(-1px);
}

.ao-cc.ao-cc-ifoot .ao-cc-fullstory:hover p,
.ao-cc.ao-cc-ifoot .ao-cc-fullstory:hover .webix_icon {
	color: var(--cc-pd);
}

/* ---- empty state ---- */
.ao-cc.ao-cc-inone {
	gap: 14px;
	border: 1px solid var(--cc-line);
	border-radius: var(--cc-r-card);
	background: var(--ao-field,
			radial-gradient(120% 90% at 50% 8%,
				var(--vux-bg, #fff) 0%,
				var(--vux-primary-50, #f0f7fd) 100%)) !important;
}

.ao-cc.ao-cc-inone .webix_icon-insight {
	font-size: 46px;
	color: var(--cc-pl);
	opacity: .7;
}

.ao-cc.ao-cc-inone h3 {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: .1px;
	color: var(--cc-mid);
	max-width: 30ch;
	text-align: center;
}

.ao-cc.ao-cc-inone h3:first-child {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .45px;
	text-transform: uppercase;
	color: var(--cc-dim);
}

/* ================================================================== *
 * Theme corrections
 *
 * Only where a rule above assumes a light ground. Everything else rides the
 * tokens and flips on its own.
 * ================================================================== */

/* Dark: the primary-40/50 washes are near-black in the dark palette, so the
   entity highlight has to come from the rule and the border rather than the
   fill, and the glass has to be lightened instead of darkened. */
.dark-theme .ao-cc {
	/* --ao-glass is repaired inside the design system's color-mix block; this is
	   the fallback path only, where --vux-rgb-bg is 0,0,0 in the stock dark theme
	   and glass keyed to it would paint darker than the panel behind it. */
	--cc-glass: var(--ao-glass, rgba(var(--vux-rgb-bg-inverse, 255, 255, 255), .07));
	--cc-shadow: var(--ao-shadow, 0 4px 14px rgba(0, 0, 0, .5));
}

/* primary-DEEP is #0d6084 on the dark palette - near-black on a dark card. The
   entity tone has to come off the light end of the ramp instead. */
.dark-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body em,
.dark-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body i,
.dark-theme .ao-cc.ao-cc-clarify .ao-cc-body em,
.dark-theme .ao-cc.ao-cc-clarify .ao-cc-body i {
	color: var(--cc-pl);
}

.dark-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body b,
.dark-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body strong,
.dark-theme .ao-cc.ao-cc-clarify .ao-cc-body b,
.dark-theme .ao-cc.ao-cc-clarify .ao-cc-body strong {
	color: var(--vux-text-500, #fff);
}

.dark-theme .ao-cc.ao-cc-clarify .ao-cc-clarify-icon {
	color: var(--cc-pl);
}

/* High contrast: no soft anything. Solid hairlines, no blur, no shadow, and the
   highlight has to survive a pure-black ground. */
.highcontrast-theme .ao-cc {
	--cc-glass: transparent;
	--cc-shadow: none;
	--cc-elev: none;
}

.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard,
.highcontrast-theme .ao-cc.ao-cc-clarify,
.highcontrast-theme .ao-cc.ao-cc-ifoot .ao-cc-fullstory,
.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand {
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: var(--vux-border-500, #fff);
}

.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body em,
.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body i,
.highcontrast-theme .ao-cc.ao-cc-clarify .ao-cc-body em,
.highcontrast-theme .ao-cc.ao-cc-clarify .ao-cc-body i {
	color: var(--vux-primary-500, #ff0);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body b,
.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-body strong,
.highcontrast-theme .ao-cc.ao-cc-clarify .ao-cc-body b,
.highcontrast-theme .ao-cc.ao-cc-clarify .ao-cc-body strong {
	color: var(--vux-text-500, #fff);
}

.highcontrast-theme .ao-cc.ao-cc-summary.ea-insight-cuecard .ao-cc-expand {
	color: var(--vux-text-500, #fff);
}

/* ================================================================== *
 * Motion
 * ================================================================== */
@keyframes ao-cc-rise {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

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

@media (prefers-reduced-motion: reduce) {

	.ao-cc,
	.ao-cc * {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}