/**
 * Explorer styles — scoped entirely under .sc-aie, token-only colours (each
 * `var(--token, fallback)` so the page still themes correctly if a token is
 * ever renamed, same pattern as stack-model-registry.php's .sc-mdash block).
 * Loaded ONLY on a page that rendered [sc_ai_explorer] (render-explorer.php
 * enqueues it from inside the shortcode callback).
 */
.sc-aie, .sc-aie *, .sc-aie *::before, .sc-aie *::after { box-sizing: border-box; }
/* Clears the theme's sticky site header (.sk-header, 78px tall — see #sc-aie-results-primary
   below) for EVERY focusable/clickable target in the explorer: a keyboard user tabbing to a
   preset button or a view tab, or any scrollIntoView() call (native or from a test), would
   otherwise land the target right at the viewport top, i.e. underneath the header, which then
   swallows the click (round-3 fix — confirmed on live DEV, not a test artifact: SPEC §8 "no
   sticky element may obscure content"). scroll-margin only affects scroll-into-view behaviour,
   never layout. */
#sc-aie-root :is(button, [role="tab"], a, input, select, summary) { scroll-margin-top: 94px; }
.sc-aie { margin: 22px 0 40px; }
.sc-aie > * + * { margin-top: 30px; }
#sc-aie-root h2, .sc-aie h2 { font-size: 20px; margin: 0 0 14px; }
#sc-aie-root h3, .sc-aie h3 { font-size: 16px; margin: 0 0 8px; }
#sc-aie-root .sc-aie__muted, .sc-aie__muted { color: var(--muted, #65736f); font-size: 13px; }
.sc-aie__visually-hidden {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#sc-aie-root .sc-aie__lede, .sc-aie__lede { font-size: 17px; line-height: 1.5; margin: 0; }
#sc-aie-root .sc-aie__agent-note, .sc-aie__agent-note { font-size: 12px; color: var(--muted, #65736f); border-left: 3px solid var(--line, #dbd8cf); padding-left: 10px; margin-top: 14px; }

/* ---- question bar: "I used X / around Y / compare as of Z" directly under the lede and above
   the results (SPEC §6.1) — the ONLY place baseline/date controls live (the workload PRESETS
   moved into the configurator — ST-386 §1, they set the mix sliders, so they belong beside them).
   Explicit CSS grid, not flex-wrap: three plain flex children each stretched full-width by their
   own <select>/<input type="date">'s `width:100%` (percentage widths don't contribute a fixed
   min-content size during flex's own auto-sizing pass), so flex-wrap alone left every field on
   its own full-width row even with plenty of room to spare — confirmed only on the deployed page
   against the real theme, invisible in a bare harness (coordinator's round-2 finding). Grid
   columns give each field a real, bounded track instead. ---- */
.sc-aie__questionbar {
	/* Narrowest phones (<480px, ST-392 mobile fix): "I used" gets the FULL width on its own
	   row — a constrained half-width <select> is exactly what truncated a long model name to
	   "Claude Opus 4..." with no ellipsis affordance (native <select> rendering, not fixable
	   with text-overflow). "Compare as of" and "around" share the row below since both are short. */
	display: grid; grid-template-columns: 1fr; grid-template-areas: "baseline" "date" "compare";
	gap: 10px 16px; align-items: start;
	padding: 14px 16px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px);
	background: var(--panel, #fdfcf9);
}
@media (min-width: 480px) and (max-width: 699px) {
	.sc-aie__questionbar { grid-template-columns: 1fr 1fr; grid-template-areas: "baseline compare" "date date"; }
}
@media (min-width: 700px) {
	.sc-aie__questionbar { grid-template-columns: minmax(160px, 260px) minmax(160px, 280px) minmax(140px, 200px); grid-template-areas: "baseline date compare"; }
}
.sc-aie__questionbar .sc-aie__field { margin: 0; min-width: 0; }
.sc-aie__field--baseline { grid-area: baseline; }
.sc-aie__field--date { grid-area: date; }
.sc-aie__field--compare { grid-area: compare; }
.sc-aie__field--presets { display: flex; flex-direction: column; }
.sc-aie__field--presets .sc-aie__presets { margin: 0; }
#sc-aie-root .sc-aie__data-status, .sc-aie__data-status { font-size: 12px; color: var(--muted, #65736f); margin: 10px 0 0; }

/* ---- compact comparison workspace: workload controls beside the primary result on desktop
   (ST-386 §1/§2) — DOM order stays results-then-configurator (reading order, no-JS/no-CSS
   fallback, SEO); the grid only REORDERS them visually above the breakpoint. ---- */
.sc-aie__workspace { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 980px) {
	/* Row 1: hero beside the controls (both fully visible together — the 1440x900 acceptance
	   bar). Row 2: the supporting explanation/then-now/caveat/secondary detail spans the FULL
	   width underneath both — not confined to the results column — because the controls
	   column is naturally much taller than the hero alone (seven sliders + priorities +
	   advanced assumptions), and having row 2 try to sit "beside" only the leftover part of
	   that tall column is what produced a large empty gap under a short hero (design-review
	   fix, ST-386). On mobile (below this breakpoint) these are three plain stacked blocks in
	   DOM order — hero, THEN the "Adjust" control, then the supporting detail — so a phone
	   visitor reaches the workload-edit control right after a useful result instead of after
	   the whole results narrative. */
	.sc-aie__workspace { grid-template-columns: minmax(280px, 340px) 1fr; }
	/* top MUST clear the theme's own sticky site header (.sk-header: position:sticky, top:0,
	   78px tall, z-index:50) — round-3 fix. At top:16px this sticky element became "stuck" 16px
	   from the viewport top, i.e. physically inside the header's 0-78px band, so the header
	   (opaque, z-index:50, later in paint order) covered the top of it and silently ate its
	   clicks (SPEC §8 "no sticky element may obscure content" — confirmed on live DEV: Playwright
	   timed out clicking through the header, not a test artifact). z-index:1 keeps this in its
	   own low, contained stacking context — position:sticky already confines it to its own grid
	   cell (column 2), so it can never visually reach into the controls column (column 1). */
	#sc-aie-results-primary { grid-column: 2; grid-row: 1; position: sticky; top: 94px; z-index: 1; align-self: start; }
	/* Spans BOTH rows (round-2 fix): a single-row controls left a ~1,250px blank gap in column 2
	   under a now-much-shorter hero (round-2 compaction made the hero even shorter, so the
	   mismatch against the still-tall configurator got WORSE, not better, until this changed).
	   Spanning distributes the tall configurator's height across both rows instead of forcing
	   row 1 alone to match it. */
	.sc-aie__workspace-controls { grid-column: 1; grid-row: 1 / 3; }
	/* grid-column: 2, NOT 1/-1 (round-3 fix): the controls column now spans BOTH rows (directly
	   above), so a full-width row-2 section here would occupy the SAME cell (column 1, row 2) as
	   the spanning controls — an actual grid overlap, not just a visual layering quirk. That
	   overlap is exactly what made Playwright (and, for a sighted mouse user, real clicks) land
	   on this section's <p id="sc-aie-explain"> instead of whatever control sits underneath it in
	   the controls column — confirmed on live DEV as a genuine click-interception timeout, not a
	   test artifact. Confining this to column 2 (beside the controls, like the hero above it)
	   removes the overlap entirely. */
	#sc-aie-results-secondary { grid-column: 2; grid-row: 2; margin-top: 10px; }
}

/* ---- results / picks ---- */
.sc-aie__picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sc-aie__picks > * { min-width: 0; }
@media (max-width: 860px) { .sc-aie__picks { grid-template-columns: 1fr; } }
.sc-aie__pick { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 16px; background: var(--panel, #fdfcf9); }
#sc-aie-root .sc-aie__pick-name, .sc-aie__pick-name { margin: 10px 0 2px; font-size: 17px; }
#sc-aie-root .sc-aie__pick-provider, .sc-aie__pick-provider { margin: 0 0 8px; font-size: 12px; color: var(--muted, #65736f); }
#sc-aie-root .sc-aie__pick-cost, .sc-aie__pick-cost { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 0 0 4px; }
#sc-aie-root .sc-aie__pick-cost-unit, .sc-aie__pick-cost-unit { font-size: 12px; font-weight: 400; color: var(--muted, #65736f); }
#sc-aie-root .sc-aie__pick-savings, .sc-aie__pick-savings { font-size: 13px; font-weight: 700; color: var(--green-2, #0f5e49); margin: 0 0 8px; }
#sc-aie-root .sc-aie__pick-promo, .sc-aie__pick-promo { font-size: 12px; margin: 0 0 8px; }
.sc-aie__pick-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-aie__pick-chip-label { font-size: 12px; color: var(--muted, #65736f); }
#sc-aie-root .sc-aie__pick-why, .sc-aie__pick-why { font-size: 13px; margin: 0; }
#sc-aie-root .sc-aie__pick-empty, .sc-aie__pick-empty { color: var(--muted, #65736f); font-size: 14px; margin: 10px 0 0; }
#sc-aie-root .sc-aie__explain, .sc-aie__explain { font-size: 15px; line-height: 1.55; }

/* ---- results hierarchy (ST-386 §2): one hero (best value, else strongest, else the honest
   "no qualified alternative" state anchored on the baseline's own current cost), an optional
   smaller secondary card, and a compact caveat — never three equal-weight cards, never a
   qualification hidden to make an option look better. ---- */
.sc-aie__hero {
	border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 20px 22px;
	background: var(--panel, #fdfcf9); border-left: 4px solid var(--green, #157a5b);
}
.sc-aie__hero.is-unmatched { border-left-color: var(--yellow, #f4c452); }
.sc-aie__hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 18px; }
#sc-aie-root .sc-aie__hero-name, .sc-aie__hero-name { margin: 8px 0 2px; font-size: 24px; }
#sc-aie-root .sc-aie__hero-provider, .sc-aie__hero-provider { margin: 0 0 6px; font-size: 13px; color: var(--muted, #65736f); }
#sc-aie-root .sc-aie__hero-cost, .sc-aie__hero-cost { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; white-space: nowrap; margin: 0 0 4px; }
#sc-aie-root .sc-aie__hero-cost-unit, .sc-aie__hero-cost-unit { display: block; font-size: 12px; font-weight: 400; color: var(--muted, #65736f); text-align: right; }
#sc-aie-root .sc-aie__hero-context, .sc-aie__hero-context { font-size: 13px; color: var(--muted, #65736f); margin: 6px 0 12px; }
.sc-aie__hero-also { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--green-2, #0f5e49); font-weight: 700; }
.sc-aie__hero-savingsflow { display: flex; align-items: center; gap: 14px; background: var(--panel-2, #e9ece4); border-radius: var(--radius, 8px); padding: 12px 14px; margin: 14px 0; flex-wrap: wrap; }
.sc-aie__hero-savingsflow .old { font-size: 15px; font-weight: 700; color: var(--muted, #65736f); }
.sc-aie__hero-savingsflow .old small { display: block; font-size: 10px; font-weight: 400; }
.sc-aie__hero-savingsflow .arrow { font-size: 20px; color: var(--muted, #65736f); }
.sc-aie__hero-savingsflow .saving { font-size: 20px; font-weight: 800; color: var(--green-2, #0f5e49); }
.sc-aie__hero-coverage { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted, #65736f); margin: 0 0 10px; }
.sc-aie__hero-coverage .bar { height: 6px; width: 110px; flex: 0 0 auto; background: var(--panel-2, #e9ece4); border-radius: 6px; overflow: hidden; }
.sc-aie__hero-coverage .bar i { display: block; height: 100%; background: var(--green, #157a5b); }
.sc-aie__hero-chips { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
#sc-aie-root .sc-aie__hero-why, .sc-aie__hero-why { font-size: 13px; color: var(--ink, #17211d); margin: 0; }

.sc-aie__secondary-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
@media (min-width: 640px) { .sc-aie__secondary-row { grid-template-columns: 1fr 1fr; } }
.sc-aie__secondary-row > * { min-width: 0; }
.sc-aie__secondary { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 12px 14px; background: var(--panel, #fdfcf9); }
#sc-aie-root .sc-aie__secondary h3, .sc-aie__secondary h3 { font-size: 14px; margin: 6px 0 2px; }
.sc-aie__secondary .sc-aie__pick-cost { font-size: 17px; margin: 2px 0; }
#sc-aie-root .sc-aie__caveat, .sc-aie__caveat { border: 1px dashed var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 12px 14px; background: var(--panel-2, #e9ece4); font-size: 13px; }
.sc-aie__caveat .badge { margin-bottom: 6px; }
/* Bare <p> inside the caveat (no class of its own — see sc_ai_evo_render_hero_card() /
   renderCaveat()) needs its own ID-boosted rule: the theme's `.sk-page p` sets font-size on the
   <p> element directly, and a direct rule on an element always wins over inheriting font-size
   from its .sc-aie__caveat parent, no matter how that parent's own specificity compares. */
#sc-aie-root .sc-aie__caveat p { margin: 0; font-size: 13px; line-height: 1.4; color: inherit; }
.sc-aie__fullpicture { margin-top: 12px; font-size: 13px; }
.sc-aie__fullpicture summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sc-aie__fullpicture dl { margin: 8px 0 0; }
.sc-aie__fullpicture dt { font-weight: 700; margin-top: 8px; }
#sc-aie-root .sc-aie__fullpicture dd, .sc-aie__fullpicture dd { margin: 2px 0 0; color: var(--muted, #65736f); }
/* In the accessibility tree (aria-live="polite" on the element itself) but not on screen — the
   standard visually-hidden clip pattern, never display:none (which would drop it from the tree too). */
#sc-aie-root .sc-aie__summary-live, .sc-aie__summary-live {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.sc-aie__thennow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sc-aie__thennow > * { min-width: 0; }
@media (max-width: 700px) { .sc-aie__thennow { grid-template-columns: 1fr; } }
.sc-aie__thennow-col { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 12px 14px; }
#sc-aie-root .sc-aie__thennow-label, .sc-aie__thennow-label { display: block; font-size: 12px; color: var(--muted, #65736f); margin-bottom: 4px; }
.sc-aie__thennow-col strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* ---- configurator: a native <details> (ST-386 §1) — always open/visible with no JS or on
   desktop (>=980px, matches .sc-aie__workspace's breakpoint so the side-by-side layout never
   shows a closed drawer); JS closes it by default on narrow viewports only (main.js) so a phone
   visitor sees a useful result first and an obvious "Adjust workload" control, never a wall of
   sliders. Opening it never scrolls the page (native <details>, no scrollIntoView anywhere). ---- */
.sc-aie__configurator { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 0; background: var(--panel-2, #e9ece4); overflow: hidden; }
.sc-aie__configurator > summary { list-style: none; cursor: pointer; padding: 16px 20px; min-height: 44px; display: flex; flex-direction: column; gap: 2px; }
.sc-aie__configurator > summary::-webkit-details-marker { display: none; }
.sc-aie__configurator > summary::after { content: '▾ Adjust'; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--green-2, #0f5e49); margin-top: 4px; }
.sc-aie__configurator[open] > summary::after { content: '▴ Close'; }
.sc-aie__configurator-title { font-size: 16px; font-weight: 800; }
#sc-aie-root .sc-aie__configurator-subtitle, .sc-aie__configurator-subtitle { font-size: 12px; color: var(--muted, #65736f); }
.sc-aie__configurator-body { padding: 0 20px 20px; }
/* Pinned cost/result recap: sits right after <summary>, so opening the panel on a phone shows
   it immediately with no scroll — a compact result stays visible while sliders are edited
   (ST-386 acceptance evidence), without a position:sticky overlay that could obscure content. */
.sc-aie__pinned-summary {
	margin: 0 20px 14px; padding: 10px 14px; border-radius: var(--radius, 8px);
	background: var(--panel, #fdfcf9); border: 1px solid var(--line, #dbd8cf);
	font-size: 13px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px 16px; flex-wrap: wrap;
}
.sc-aie__pinned-summary strong { font-size: 15px; font-variant-numeric: tabular-nums; }
@media (min-width: 980px) { .sc-aie__pinned-summary { display: none; } } /* results already sit beside the controls */
.sc-aie__field { margin: 0 0 16px; }
.sc-aie__field label, .sc-aie__field span:first-child { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #65736f); margin-bottom: 6px; }
.sc-aie__field select, .sc-aie__field input[type="date"] { min-height: 44px; width: 100%; max-width: 320px; padding: 8px 10px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); background: var(--panel, #fdfcf9); color: var(--ink, #17211d); font: inherit; }
#sc-aie-root .sc-aie__field-note, .sc-aie__field-note { display: block; font-size: 12px; color: var(--muted, #65736f); margin-top: 4px; }
#sc-aie-root .sc-aie__mix-note, .sc-aie__mix-note { font-size: 12px; color: var(--muted, #65736f); margin: -4px 0 14px; }

.sc-aie__presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sc-aie__preset-btn {
	min-height: 44px; padding: 0 14px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px);
	background: var(--panel, #fdfcf9); color: var(--ink, #17211d); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sc-aie__preset-btn.is-active { background: var(--ink-dark, #163f35); border-color: var(--ink-dark, #163f35); color: #fff; }

.sc-aie__mix { display: grid; gap: 14px; margin: 0 0 18px; }
.sc-aie__slider-row { display: grid; grid-template-columns: minmax(0,220px) 1fr minmax(0,150px); align-items: center; gap: 10px; }
.sc-aie__slider-row > * { min-width: 0; }
@media (max-width: 620px) { .sc-aie__slider-row { grid-template-columns: 1fr; } }
.sc-aie__slider-row label { font-size: 13px; font-weight: 600; color: var(--ink, #17211d); text-transform: none; letter-spacing: 0; margin: 0; }
.sc-aie__slider-row output { font-size: 13px; font-weight: 700; color: var(--ink, #17211d); font-variant-numeric: tabular-nums; text-align: right; }
.sc-aie input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--green, #157a5b); }

/* ---- volume: a slider AND a directly-editable number field (ST-386 §3) ---- */
.sc-aie__volume-row { display: flex; align-items: center; gap: 12px; }
.sc-aie__volume-row input[type="range"] { flex: 1 1 auto; }
.sc-aie__volume-number {
	flex: 0 0 auto; width: 96px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--line, #dbd8cf);
	border-radius: var(--radius, 8px); background: var(--panel, #fdfcf9); color: var(--ink, #17211d); font: inherit; font-variant-numeric: tabular-nums;
}
#sc-aie-root .sc-aie__priorities-note, .sc-aie__priorities-note { font-size: 12px; color: var(--muted, #65736f); margin: -4px 0 12px; }

.sc-aie__seg { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-aie__seg-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); background: var(--panel, #fdfcf9); font: inherit; font-weight: 700; cursor: pointer; }
.sc-aie__seg-btn.is-active { background: var(--green, #157a5b); border-color: var(--green, #157a5b); color: #fff; }

.sc-aie__priorities { border: 0; padding: 0; margin: 0 0 18px; }
.sc-aie__priorities legend { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #65736f); padding: 0; margin-bottom: 10px; }
.sc-aie__priorities .sc-aie__slider-row { margin-bottom: 10px; }

.sc-aie__advanced { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 12px 14px; background: var(--panel, #fdfcf9); margin: 0 0 18px; }
.sc-aie__advanced summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sc-aie__toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; }

.sc-aie__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#sc-aie-root .sc-aie__copy-note, .sc-aie__copy-note { font-size: 13px; color: var(--green-2, #0f5e49); font-weight: 700; }

/* ---- tables (options / timeline / matrix) ---- */
#sc-aie-root .sc-aie__table, .sc-aie__table { width: 100%; border-collapse: collapse; font-size: 13px; }
#sc-aie-root .sc-aie__table th, #sc-aie-root .sc-aie__table td, .sc-aie__table th, .sc-aie__table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line, #dbd8cf); vertical-align: top; }
.sc-aie__table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #65736f); white-space: nowrap; }
.sc-aie__table .sc-aie__vend { display: block; font-size: 11px; color: var(--muted, #65736f); }
.sc-aie__table td .sc-aie__muted { display: block; font-size: 11px; margin-top: 2px; max-width: 220px; }
.sc-aie__matrix th.is-material, .sc-aie__matrix td.is-material { background: var(--mint, #d9f4e8); }
.sc-aie__matrix-cell { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: inherit; padding: 6px 4px; }
.sc-aie__evidence-row td { background: var(--panel-2, #e9ece4); }
.sc-aie__evidence-list { margin: 6px 0; padding-left: 20px; font-size: 13px; }
.sc-aie__evidence-list li { margin-bottom: 8px; }
#sc-aie-root .sc-aie__evidence-context-label, .sc-aie__evidence-context-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #65736f); margin: 12px 0 4px; }
.sc-aie__evidence-list--context { opacity: .75; }

/* ---- verdict chips: colour is never the only carrier — a glyph + the text label always ship with the colour ---- */
.sc-aie__chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sc-aie__chip.is-above { background: var(--mint, #d9f4e8); color: var(--green-2, #0f5e49); }
.sc-aie__chip.is-similar { background: var(--panel-2, #e9ece4); color: var(--ink, #17211d); }
.sc-aie__chip.is-below { background: #ffe3d8; color: #91412a; }
.sc-aie__chip.is-insufficient { background: #fff1d0; color: #765400; }
.sc-aie__chip-glyph { font-size: 10px; }

/* ---- timeline ---- */
.sc-aie__timeline .sc-aie__field { max-width: 520px; }

/* ---- scatter ---- */
.sc-aie__scatter-figure { margin: 0 0 16px; }
.sc-aie__scatter-figure svg { width: 100%; height: auto; display: block; }
.sc-aie__axis { stroke: var(--line, #dbd8cf); stroke-width: 1; }
.sc-aie__tick { fill: var(--muted, #65736f); font-size: 10px; }
.sc-aie__axis-title { fill: var(--ink, #17211d); font-size: 11px; font-weight: 700; }
.sc-aie__point-label { fill: var(--ink, #17211d); font-size: 11px; font-weight: 600; }
.sc-aie__crosshair { stroke: var(--coral, #e96f4a); stroke-width: 1; stroke-dasharray: 3 4; }
/* Point fill/shape colour comes from dataset.providers[].color, set as the fill attribute in JS — no colour hardcoded here, only the shared stroke/hover treatment. */
.sc-aie__point circle { stroke: var(--panel, #fdfcf9); stroke-width: 1.5; }
.sc-aie__point:focus circle, .sc-aie__point:hover circle { stroke: var(--ink, #17211d); stroke-width: 2.5; }
.sc-aie__point--square circle { clip-path: inset(15% 15% 15% 15%); }
.sc-aie__point--triangle circle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.sc-aie__point--diamond circle { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.sc-aie__point--cross circle { clip-path: polygon(20% 0,80% 0,80% 35%,100% 35%,100% 65%,80% 65%,80% 100%,20% 100%,20% 65%,0 65%,0 35%,20% 35%); }
.sc-aie__scatter-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; padding: 0; font-size: 12px; }
.sc-aie__scatter-legend li { display: inline-flex; align-items: center; gap: 5px; }
.sc-aie__scatter-nodata summary { cursor: pointer; font-size: 13px; color: var(--muted, #65736f); min-height: 44px; display: flex; align-items: center; }
.sc-aie__scatter-nodata ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; columns: 2; }

/* ---- catch-up ---- */
.sc-aie__catchup-list { margin: 0; padding-left: 20px; font-size: 14px; }
.sc-aie__catchup-list li { margin-bottom: 10px; }

/* ---- sources ---- */
.sc-aie__sources-section details { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 10px 14px; margin-bottom: 10px; background: var(--panel, #fdfcf9); }
.sc-aie__sources-section summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.sc-aie__sources-section ul { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.sc-aie__sources-section li { margin-bottom: 6px; }

/* ---- notice fallback (no dataset / missing files) ---- */
.sc-aie-notice { padding: 16px 18px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); background: var(--panel, #fdfcf9); }

/* ---- accessibility ---- */
.sc-aie a:focus-visible,
.sc-aie button:focus-visible,
.sc-aie input:focus-visible,
.sc-aie select:focus-visible,
.sc-aie summary:focus-visible { outline: 3px solid var(--cyan, #2b8ea3); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.sc-aie, .sc-aie * { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---- overflow safety (ST/1001 lesson: grid/flex children need min-width:0) ---- */
.sc-aie .sc-table-scroll { overflow-x: auto; }
.sc-aie .sc-table-scroll > table { min-width: 560px; }
.sc-aie section, .sc-aie div { min-width: 0; }

/* ---- ST-392: "Compare benchmark performance and cost" — the page's PRIMARY content, above
   the demoted whole-workload equivalence <details>. Reuses .sc-aie__table's base look; only
   what's specific to this view lives here. ---- */
.sc-aie__bmv-section { margin-top: 22px; }
.sc-aie__bmv-section .sc-aie__field--bmv-benchmark { max-width: 360px; margin-bottom: 16px; }
#sc-aie-root .sc-aie__bmv-desc, .sc-aie__bmv-desc { font-size: 14px; color: var(--muted, #65736f); margin: 0 0 14px; }
#sc-aie-root .sc-aie__bmv-qualify, .sc-aie__bmv-qualify {
	font-size: 14px; font-weight: 600; color: var(--ink, #17211d); margin: 0 0 12px;
	padding: 10px 14px; border-left: 3px solid var(--green, #157a5b); background: var(--panel-2, #e9ece4); border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}
#sc-aie-root .sc-aie__bmv-note, .sc-aie__bmv-note { margin-top: 8px; }
#sc-aie-root .sc-aie__bmv-omitted, .sc-aie__bmv-omitted { margin-top: 10px; }
.sc-aie__bmv-other { margin-top: 16px; border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); padding: 10px 14px; background: var(--panel, #fdfcf9); }
.sc-aie__bmv-other summary { cursor: pointer; font-weight: 700; font-size: 13px; min-height: 44px; display: flex; align-items: center; }
.sc-aie__bmv-other .sc-table-scroll { margin-top: 10px; }
.sc-aie__bmv-table--other td[data-col="cost"] { max-width: 200px; }

/* ---- ST-392: the demoted "Whole-workload equivalence analysis (optional)" wraps everything
   the explorer did before this ticket — same visual language as the configurator <details>
   (border/background), but its own class so the two can be styled independently if needed. ---- */
.sc-aie__equivalence { border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px); background: var(--panel, #fdfcf9); padding: 0; margin-top: 30px; overflow: hidden; }
.sc-aie__equivalence > summary { list-style: none; cursor: pointer; padding: 16px 20px; min-height: 44px; display: flex; flex-direction: column; gap: 4px; }
.sc-aie__equivalence > summary::-webkit-details-marker { display: none; }
.sc-aie__equivalence > summary::after { content: '\25be Open the whole-workload comparator'; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--green-2, #0f5e49); margin-top: 4px; }
.sc-aie__equivalence[open] > summary::after { content: '\25b4 Close'; }
.sc-aie__equivalence-body { padding: 4px 20px 20px; }

/* ---- ST-392 mobile: model / score / cost visible together with no horizontal scroll, same
   card-stack pattern the options table already uses — scoped to the benchmark table ids only.
   Desktop is completely untouched (this whole block is inside the max-width query). ---- */
@media (max-width: 700px) {
	#sc-aie-bmv-table, #sc-aie-bmv-other-table { min-width: 0; }
	#sc-aie-bmv-table, #sc-aie-bmv-table tbody,
	#sc-aie-bmv-other-table, #sc-aie-bmv-other-table tbody { display: block; width: 100%; }
	#sc-aie-bmv-table thead, #sc-aie-bmv-other-table thead {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
	}
	#sc-aie-bmv-table tr, #sc-aie-bmv-other-table tr {
		display: flex; flex-direction: column; gap: 3px;
		border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px);
		padding: 12px 14px; margin-bottom: 10px; background: var(--panel, #fdfcf9);
	}
	#sc-aie-bmv-table td, #sc-aie-bmv-other-table td { border: 0; padding: 1px 0; white-space: normal; }
	#sc-aie-bmv-table td[data-col="model"], #sc-aie-bmv-other-table td[data-col="model"] { font-size: 15px; font-weight: 800; order: -1; }
	#sc-aie-bmv-table td[data-col="model"] .sc-aie__vend, #sc-aie-bmv-other-table td[data-col="model"] .sc-aie__vend { font-size: 12px; font-weight: 400; white-space: normal; max-width: none; }
	#sc-aie-bmv-table td[data-col="score"], #sc-aie-bmv-other-table td[data-col="score"] { font-size: 15px; font-weight: 800; }
	#sc-aie-bmv-table td[data-col="cost_attempt"],
	#sc-aie-bmv-table td[data-col="cost_resolved"] { font-size: 13px; }
	#sc-aie-bmv-table td[data-col="cost_point"],
	#sc-aie-bmv-table td[data-col="price"],
	#sc-aie-bmv-table td[data-col="date"], #sc-aie-bmv-other-table td[data-col="date"] { font-size: 12px; color: var(--muted, #65736f); }
	/* data-col="cost" only appears when the "other reported results" table renders — either
	   inside the collapsed details (#sc-aie-bmv-other-table) or, when no comparable group
	   exists yet, AS the primary table (still id #sc-aie-bmv-table — see
	   sc_ai_evo_render_benchmark_compare()'s fallback branch). Both ids covered. */
	#sc-aie-bmv-table td[data-col="cost"], #sc-aie-bmv-other-table td[data-col="cost"] { font-size: 13px; }

	/* ⛔ ST-392 QA fix (coordinator, mobile screenshot): stacked into a block, "$0.754 / $0.982 /
	   $0.010" in a row is three unlabelled dollar amounts with no way to tell which is which —
	   exactly the attempt-vs-resolved-vs-point distinction this whole ticket exists to make
	   legible. Every ambiguous value cell already carries a `data-label` attribute (added for
	   this reason); this renders it as a visible text label ONLY at this breakpoint — the
	   desktop table (outside this query) is completely unaffected, unlabelled headers still
	   apply there via <th scope="col">. */
	#sc-aie-bmv-table td[data-col="cost_attempt"]::before,
	#sc-aie-bmv-table td[data-col="cost_resolved"]::before,
	#sc-aie-bmv-table td[data-col="cost_point"]::before,
	#sc-aie-bmv-table td[data-col="price"]::before,
	#sc-aie-bmv-table td[data-col="cost"]::before,
	#sc-aie-bmv-other-table td[data-col="cost"]::before {
		content: attr(data-label) ": ";
		font-weight: 700; color: var(--muted, #65736f);
	}
}

/* ---- deliberate views: Capability differences / Evolution / All models (ST-386 §4) — SSR
   renders every panel visible (no-JS fallback: all three just stack, same content as before);
   views.js hides the inactive ones and wires real ARIA tab semantics once it boots. ---- */
.sc-aie__viewtabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line, #dbd8cf); }
.sc-aie__viewtab {
	min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
	background: none; color: var(--muted, #65736f); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; margin-bottom: -1px;
}
.sc-aie__viewtab.is-active { color: var(--ink, #17211d); background: var(--panel, #fdfcf9); border-color: var(--line, #dbd8cf); }
.sc-aie__viewpanel { padding-top: 22px; }
.sc-aie__viewpanel > * + * { margin-top: 30px; }

/* ---- All models: search/filter/sort (ST-386 §4), a small progressive-enhancement bar above
   the full catalogue — with no JS the table still renders complete and unfiltered. ---- */
.sc-aie__allmodels-controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 14px; }
.sc-aie__allmodels-controls .sc-aie__field { margin: 0; min-width: 180px; flex: 1 1 200px; }
#sc-aie-root .sc-aie__allmodels-note, .sc-aie__allmodels-note { font-size: 12px; color: var(--muted, #65736f); margin: -4px 0 14px; }
.sc-aie__table th[aria-sort] { cursor: pointer; }
.sc-aie__table th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.sc-aie__table th[aria-sort="ascending"] button::after { content: '▲'; font-size: 9px; }
.sc-aie__table th[aria-sort="descending"] button::after { content: '▼'; font-size: 9px; }

/* ---- mobile price comparison: model / cost / meets-baseline / coverage first, no horizontal
   scroll (ST-386 §5) — the options table becomes a stack of cards; released/status/savings/
   speed collapse into a native <details> per row, expandable with no JS required. Scoped to the
   options table's id only so the timeline/matrix tables (different columns) are unaffected. ---- */
@media (max-width: 700px) {
	/* Overrides the sitewide `.sc-table-scroll > table { min-width: 560px }` overflow-safety
	   floor (further up this file) for THIS table only: once its rows are a vertical card stack
	   (below) it has no tabular width to protect, and the 560px floor would otherwise force the
	   .sc-table-scroll container to need its own internal horizontal scroll on a narrow screen —
	   exactly the "essential price comparison must not require horizontal scrolling" bug this
	   whole block exists to fix (caught by ai-evolution-qa.mjs's negative-tested assertion). */
	#sc-aie-options-table { min-width: 0; }
	#sc-aie-options-table, #sc-aie-options-table tbody { display: block; width: 100%; }
	#sc-aie-options-table thead {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
	}
	/* DOM order already leads with model/cost/meets/coverage (render-components.php +
	   results.js emit the <td>s in that order for every viewport — ST-386 §5, "the current
	   table leads with model/release/status and clips the cost" was the P1 finding), so mobile
	   only needs a plain block stack: no grid-area reordering required. */
	#sc-aie-options-table tr {
		display: flex; flex-direction: column; gap: 3px;
		border: 1px solid var(--line, #dbd8cf); border-radius: var(--radius, 8px);
		padding: 12px 14px; margin-bottom: 10px; background: var(--panel, #fdfcf9);
	}
	#sc-aie-options-table td { border: 0; padding: 1px 0; }
	#sc-aie-options-table td[data-col="model"] { font-size: 15px; font-weight: 800; order: -1; }
	#sc-aie-options-table td[data-col="cost"] { font-size: 16px; font-weight: 800; }
	#sc-aie-options-table td[data-col="coverage"] { font-size: 12px; color: var(--muted, #65736f); }
	#sc-aie-options-table td[data-col="released"],
	#sc-aie-options-table td[data-col="status"],
	#sc-aie-options-table td[data-col="savings"],
	#sc-aie-options-table td[data-col="speed"] { display: none; }
	#sc-aie-options-table td[data-col="more"] summary { cursor: pointer; font-size: 12px; color: var(--green-2, #0f5e49); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
	#sc-aie-options-table td[data-col="more"] dl { margin: 6px 0 0; font-size: 12px; color: var(--muted, #65736f); }
	#sc-aie-options-table td[data-col="more"] dt { font-weight: 700; color: var(--ink, #17211d); float: left; clear: left; margin-right: 6px; }
	#sc-aie-options-table td[data-col="more"] dd { margin: 0 0 4px; }
	/* Placed here (after the unconditional .sc-aie__hero/.sc-aie__caveat rules earlier in this
	   file) so this media query actually wins the cascade — an equal-specificity mobile override
	   placed EARLIER in source order than the rule it targets loses to it regardless of the
	   media condition matching, which is exactly what silently no-opped this the first time. */
	.sc-aie__hero { padding: 10px 12px; }
	#sc-aie-root .sc-aie__hero-cost, .sc-aie__hero-cost { font-size: 24px; }
	#sc-aie-root .sc-aie__hero-context, .sc-aie__hero-context { margin: 4px 0 8px; }
	#sc-aie-root .sc-aie__caveat, .sc-aie__caveat { padding: 6px 8px; }
}

/* ---- mobile compaction (ST-386 §1) — kept as ONE block at the END of the file so every
   override here reliably wins the cascade against the equal-specificity unconditional rules
   defined earlier (a same-specificity mobile override placed BEFORE the rule it targets loses
   to it regardless of the media query matching — this bit twice while building this section,
   see the CF-notes in the build report). Purely spacing: the acceptance bar is the hero AND the
   workload-edit control both inside the first 390x844 screen, so the fixed cost of the page
   intro + question bar before them has to shrink; nothing here removes content. ---- */
@media (max-width: 700px) {
	/* Clamped to 2 lines (coordinator round 2: "the intro paragraph runs seven lines before
	   anything useful... the H1 already says what the page is") — the full sentence stays in the
	   DOM/accessibility tree for a screen reader or a no-CSS reader, only the VISUAL rendering is
	   shortened. */
	#sc-aie-root .sc-aie__lede, .sc-aie__lede {
		font-size: 14px; line-height: 1.4;
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
	}
	.sc-aie__questionbar { padding: 8px 10px; gap: 4px 10px; }
	.sc-aie__questionbar .sc-aie__field label { margin-bottom: 2px; }
	/* #sc-aie-root REQUIRED here (round-3 fix): the base rule at the top of this file is already
	   `#sc-aie-root .sc-aie__field-note` (ID-boosted, specificity 1-1-0, per the round-2
	   specificity fix) — a two-CLASS override with no ID, like this one on its own, is only
	   0-2-0 and loses to that base rule regardless of the media query matching, which is exactly
	   why this clamp never took effect on the deployed page (it silently displayed `block` from
	   the base rule and wrapped to 3 lines instead of clamping to 1). */
	#sc-aie-root .sc-aie__questionbar .sc-aie__field-note, .sc-aie__questionbar .sc-aie__field-note {
		display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
	}
	.sc-aie > * + * { margin-top: 4px; }
	.sc-aie__hero { padding: 8px 10px; }
	.sc-aie__caveat { padding: 4px 6px; }
	.sc-aie__caveat .badge { margin-bottom: 3px; }
	.sc-aie__hero-why { margin: 0; }
	.sc-aie__configurator > summary { padding: 8px 12px; }
}