/*
 * Outcomes dashboard. Typography, tables, buttons and layout come from the
 * site's own styles; this file only covers the outcome colours, the card
 * treatment (matching the /video-gallery cards) and the chart layouts.
 */

.abs-outcomes {
	--abs-good: #369f93;
	--abs-good-bg: #e4f4f1;
	--abs-minor: #d9a441;
	--abs-minor-ink: #a97c2c;
	--abs-minor-bg: #fbf1dd;
	--abs-redo: #bd7355;
	--abs-redo-bg: #f5e7de;
	color: #465d6a; /* the site's paragraph colour, for the chart labels */
}

/* Cards: pictogram block and the "Outcomes card" Group style -------------- */

.abs-card.abs-outcomes-pictogram,
.wp-block-group.is-style-outcomes-card {
	background: #fff;
	padding: 30px;
	margin-bottom: 30px;
}

.wp-block-group.is-style-outcomes-callout {
	background: #f2fcfb;
	border-left: 3px solid #96e1d6;
	padding: 20px 24px;
	margin: 30px 0;
}

.wp-block-group.is-style-outcomes-card p:last-child,
.wp-block-group.is-style-outcomes-callout p:last-child {
	margin-bottom: 0;
}

/* Pictogram -------------------------------------------------------------- */

/* Fixed-size dots; the number of columns follows the available width. */
.abs-dots {
	--abs-dot-size: 32px;
	display: grid;
	grid-template-columns: repeat(auto-fill, var(--abs-dot-size));
	justify-content: center;
	gap: 6px;
	margin: 20px 0;
}

@media (max-width: 520px) {
	.abs-dots {
		--abs-dot-size: 26px;
		gap: 5px;
	}
}

.abs-dot,
.abs-swatch {
	display: inline-block;
	border-radius: 50%;
}

.abs-dot {
	aspect-ratio: 1;
}

.abs-swatch {
	width: 12px;
	height: 12px;
	margin-right: 8px;
	vertical-align: -1px;
}

.abs-dot.good,
.abs-swatch.good {
	background: var(--abs-good);
}
.abs-dot.minor,
.abs-swatch.minor {
	background: var(--abs-minor);
}
.abs-dot.redo,
.abs-swatch.redo {
	background: var(--abs-redo);
}

.abs-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}

/* Stat cards ------------------------------------------------------------- */

.abs-outcomes-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 30px;
}

@media (max-width: 520px) {
	.abs-outcomes-stats {
		grid-template-columns: 1fr;
	}
}

.abs-stat {
	border: 1px solid #196d83;
	border-radius: 20px;
	padding: 20px 16px;
}

.abs-stat-num {
	font-size: 2.2rem;
	line-height: 1.2;
}

.abs-stat.good {
	background: var(--abs-good-bg);
}
.abs-stat.minor {
	background: var(--abs-minor-bg);
}
.abs-stat.redo {
	background: var(--abs-redo-bg);
}
.abs-stat.good .abs-stat-num {
	color: var(--abs-good);
}
.abs-stat.minor .abs-stat-num {
	color: var(--abs-minor-ink);
}
.abs-stat.redo .abs-stat-num {
	color: var(--abs-redo);
}

/* Trend ------------------------------------------------------------------ */

.abs-trend-bars {
	display: flex;
	gap: 28px;
	align-items: flex-end;
	margin: 18px 0;
}

.abs-trend-bar {
	flex: 1;
}

.abs-trend-track {
	position: relative;
	max-width: 110px;
	height: 100px;
	margin: 0 auto;
	background: var(--abs-minor-bg);
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.abs-trend-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--abs-redo);
}

.abs-trend-value {
	font-size: 1.4rem;
	color: var(--abs-redo);
}

/* Benchmark table: the theme's table styles, stacked into one block per row
   on phones, with each cell's data-label standing in for the header row. */

@media (max-width: 600px) {
	.abs-outcomes-benchmarks thead {
		display: none;
	}

	.abs-outcomes-benchmarks table,
	.abs-outcomes-benchmarks tbody {
		display: block;
	}

	.abs-outcomes-benchmarks tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px 16px;
		padding: 14px 12px;
		border-top: 1px solid rgba(0, 0, 0, 0.12);
	}

	.abs-outcomes-benchmarks tr:first-child {
		border-top: 0;
	}

	.abs-outcomes-benchmarks td {
		padding: 0;
		border: 0;
	}

	.abs-outcomes-benchmarks td:first-child {
		grid-column: 1 / -1;
	}

	.abs-outcomes-benchmarks td:last-child {
		text-align: right;
	}

	.abs-outcomes-benchmarks td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		opacity: 0.7;
	}
}

/* Editor-only refresh row ------------------------------------------------ */

.abs-refresh-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.abs-refresh-row .btn {
	white-space: nowrap;
}

.abs-refresh-row p {
	margin: 0;
}