/**
 * Front-end styling for generated posts: charts, comparison tables, references.
 *
 * Scoped to .aibp-* so it never leaks into the host theme. The chart colours
 * are a validated categorical palette; each slot's light hex is also baked into
 * the SVG as a var() fallback, so a chart still renders correctly if this file
 * never loads.
 *
 * ON DARK MODE — deliberately NOT prefers-color-scheme.
 * That media query reports the visitor's OS, which tells us nothing about the
 * theme this card was dropped into. Most WordPress themes are light-only, and
 * roughly half of visitors run a dark OS — so keying off it paints a dark panel
 * into a light blog for half the audience, and makes the same page look
 * different to different people. Instead we switch only when the page itself
 * says it is dark. A theme that goes dark without any of these markers gets a
 * light card, which is merely a light panel on a dark page — consistent for
 * everyone, and far better than the alternative.
 */

.aibp-viz,
.aibp-compare-wrap,
.aibp-references {
	color-scheme: light;

	--aibp-s1: #2a78d6;
	--aibp-s2: #1baf7a;
	--aibp-s3: #eda100;
	--aibp-s4: #008300;
	--aibp-s5: #4a3aa7;
	--aibp-s6: #e34948;
	--aibp-s7: #e87ba4;
	--aibp-s8: #eb6834;

	--aibp-surface: #fcfcfb;
	--aibp-grid: #e1e0d9;
	--aibp-axis: #c3c2b7;
	--aibp-ink: #0b0b0b;
	--aibp-ink-2: #52514e;
	--aibp-muted: #898781;
	--aibp-border: rgba( 11, 11, 11, 0.1 );
	--aibp-zebra: rgba( 11, 11, 11, 0.025 );
}

/* The dark steps are a selected set for the dark surface, not a flip of the
   light ones. Triggered only by an explicit page-level dark signal — these
   cover the markers WordPress themes and page builders actually use. */
:root[data-theme="dark"] .aibp-viz,
:root[data-theme="dark"] .aibp-compare-wrap,
:root[data-theme="dark"] .aibp-references,
[data-color-scheme="dark"] .aibp-viz,
[data-color-scheme="dark"] .aibp-compare-wrap,
[data-color-scheme="dark"] .aibp-references,
[data-bs-theme="dark"] .aibp-viz,
[data-bs-theme="dark"] .aibp-compare-wrap,
[data-bs-theme="dark"] .aibp-references,
.dark .aibp-viz,
.dark .aibp-compare-wrap,
.dark .aibp-references,
.dark-mode .aibp-viz,
.dark-mode .aibp-compare-wrap,
.dark-mode .aibp-references,
.is-dark-theme .aibp-viz,
.is-dark-theme .aibp-compare-wrap,
.is-dark-theme .aibp-references {
	color-scheme: dark;

	--aibp-s1: #3987e5;
	--aibp-s2: #199e70;
	--aibp-s3: #c98500;
	--aibp-s4: #008300;
	--aibp-s5: #9085e9;
	--aibp-s6: #e66767;
	--aibp-s7: #d55181;
	--aibp-s8: #d95926;

	--aibp-surface: #1a1a19;
	--aibp-grid: #2c2c2a;
	--aibp-axis: #383835;
	--aibp-ink: #ffffff;
	--aibp-ink-2: #c3c2b7;
	--aibp-muted: #898781;
	--aibp-border: rgba( 255, 255, 255, 0.1 );
	--aibp-zebra: rgba( 255, 255, 255, 0.04 );
}

/* ==========================================================================
   Charts
   ========================================================================== */

.aibp-viz {
	margin: 2em 0;
	padding: 1.25em;
	border: 1px solid var( --aibp-border );
	border-radius: 10px;
	background: var( --aibp-surface );
}

.aibp-viz-title {
	margin: 0 0 1em;
	padding: 0;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
	color: var( --aibp-ink );
	text-align: left;
}

.aibp-viz-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Text wears text tokens, never the series colour — a light categorical hue
   is illegible as text on the surface. */
.aibp-viz-tick {
	fill: var( --aibp-muted );
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.aibp-viz-cat {
	fill: var( --aibp-ink-2 );
	font-size: 13px;
}

.aibp-viz-val {
	fill: var( --aibp-ink-2 );
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.aibp-viz-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.25em;
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875em;
	color: var( --aibp-ink-2 );
}

.aibp-viz-legend li {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
}

.aibp-viz-key {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	flex: 0 0 auto;
}

.aibp-viz-foot {
	margin: 0.9em 0 0;
	font-size: 0.85em;
	line-height: 1.5;
	color: var( --aibp-muted );
}

.aibp-viz-source {
	font-style: italic;
}

/* The table twin. There is no tooltip on a server-rendered chart, so this is
   the exact-value channel — and what crawlers read. */
.aibp-viz-data {
	margin-top: 1em;
	font-size: 0.9em;
}

.aibp-viz-data > summary {
	cursor: pointer;
	color: var( --aibp-ink-2 );
	padding: 0.35em 0;
	user-select: none;
}

.aibp-viz-data > summary:hover {
	color: var( --aibp-ink );
}

/* ==========================================================================
   Tables (comparison + chart data)
   ========================================================================== */

.aibp-compare {
	margin: 2em 0;
}

.aibp-table-wrap,
.aibp-compare-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1em 0;
}

.aibp-table-wrap table,
.aibp-compare-wrap table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	color: var( --aibp-ink );
	background: var( --aibp-surface );
}

.aibp-compare-wrap {
	margin: 0;
	border: 1px solid var( --aibp-border );
	border-radius: 10px;
}

.aibp-table-wrap caption,
.aibp-compare-wrap caption {
	caption-side: top;
	text-align: left;
	padding: 0.9em 1em;
	font-weight: 600;
	color: var( --aibp-ink );
}

.aibp-table-wrap th,
.aibp-table-wrap td,
.aibp-compare-wrap th,
.aibp-compare-wrap td {
	padding: 0.7em 1em;
	text-align: left;
	border-bottom: 1px solid var( --aibp-border );
	vertical-align: top;
}

.aibp-table-wrap thead th,
.aibp-compare-wrap thead th {
	font-weight: 600;
	color: var( --aibp-ink );
	border-bottom: 2px solid var( --aibp-axis );
	white-space: nowrap;
}

.aibp-table-wrap tbody th,
.aibp-compare-wrap tbody th {
	font-weight: 600;
	color: var( --aibp-ink );
}

.aibp-table-wrap tbody tr:nth-child( even ),
.aibp-compare-wrap tbody tr:nth-child( even ) {
	background: var( --aibp-zebra );
}

.aibp-table-wrap tbody tr:last-child th,
.aibp-table-wrap tbody tr:last-child td,
.aibp-compare-wrap tbody tr:last-child th,
.aibp-compare-wrap tbody tr:last-child td {
	border-bottom: 0;
}

/* Numbers align vertically here, so tabular figures are correct. */
.aibp-table-wrap td,
.aibp-compare-wrap td {
	font-variant-numeric: tabular-nums;
}

.aibp-compare figcaption {
	margin-top: 0.9em;
	font-size: 0.85em;
	line-height: 1.5;
	color: var( --aibp-muted );
}

/* ==========================================================================
   References
   ========================================================================== */

.aibp-references {
	margin: 1.5em 0;
	padding-left: 1.4em;
	font-size: 0.95em;
	line-height: 1.8;
	color: var( --aibp-ink-2 );
}

.aibp-references li {
	margin-bottom: 0.4em;
}

.aibp-ref-host {
	color: var( --aibp-muted );
	font-size: 0.85em;
}

.aibp-ref-host::before {
	content: "— ";
}

/* ==========================================================================
   Print / forced colours
   ========================================================================== */

@media print {
	.aibp-viz-data > summary {
		display: none;
	}

	.aibp-viz-data > div {
		display: block !important;
	}
}

@media ( forced-colors: active ) {
	.aibp-viz,
	.aibp-compare-wrap {
		border: 1px solid CanvasText;
	}

	.aibp-viz-key {
		forced-color-adjust: none;
	}
}