/**
 * Stack Graphs — Frontend Styles
 *
 * Canvas designs (Chart.js):
 *   line-area, line-minimal, line-dark, line-stepped, line-dashed
 *   bar-rounded, bar-duotone, bar-horizontal
 *   pie-classic, pie-doughnut, pie-stat
 *   bubble-plot
 * CSS designs:
 *   pyramid-funnel, pyramid-population, venn-two, venn-three
 *
 * Legacy keys (line-1 … venn-25) are remapped in PHP by
 * wpstack_widget_gr::normalise_type(), so no styles are needed for them.
 */

/* ── Base ───────────────────────────────────────────────────── */
.stkgr-wrap {
	position: relative;
	box-sizing: border-box;
	padding: 24px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
	--stkgr-accent: #4f46e5;
}
.stkgr-wrap *,
.stkgr-wrap *::before,
.stkgr-wrap *::after {
	box-sizing: border-box;
}
.stkgr-title {
	margin: 0 0 16px;
	font-size: 1rem;
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
}
.stkgr-canvas-wrap {
	width: 100%;
}
.stkgr-canvas-wrap canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
}
.stkgr-empty {
	color: #9ca3af;
	font-size: .875rem;
	text-align: center;
	padding: 32px 0;
}

/* ── Line · Dark Panel wrapper ──────────────────────────────── */
/* Only this design gets dark axis colours, and only this design gets the dark
   card that makes them legible. */
.stkgr-line-dark {
	background: #0f172a;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.24);
}
.stkgr-line-dark .stkgr-title { color: #f1f5f9; }

/* ── Line · Minimal wrapper ─────────────────────────────────── */
.stkgr-line-minimal {
	background: transparent;
	box-shadow: none;
	border: 1px solid #e4e7ec;
}

/* ── Screen-reader data table ───────────────────────────────── */
.stkgr-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Doughnut · Centre Stat overlay ────────────────────────── */
.stkgr-dc-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}
.stkgr-dc-val {
	display: block;
	font-size: 1.9rem;
	font-weight: 800;
	color: #111827;
	line-height: 1;
}
.stkgr-dc-lbl {
	display: block;
	font-size: 0.72rem;
	color: #6b7280;
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Pyramid · Vertical Funnel ──────────────────────────────── */
.stkgr-pyramid-v {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.stkgr-pyr-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.stkgr-pyr-label {
	width: 90px;
	min-width: 90px;
	text-align: right;
	font-size: .82rem;
	color: #374151;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stkgr-pyr-track {
	flex: 1;
}
.stkgr-pyr-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 9px 12px;
	min-width: 32px;
	border-radius: 3px;
	transition: width .5s ease;
}
.stkgr-pyr-val {
	color: #ffffff;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ── Pyramid · Population (mirrored bars) ───────────────────── */
.stkgr-pyramid-pop {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.stkgr-pop-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.stkgr-pop-half {
	flex: 1;
	overflow: hidden;
}
.stkgr-pop-left-wrap  { display: flex; justify-content: flex-end; }
.stkgr-pop-right-wrap { display: flex; justify-content: flex-start; }
.stkgr-pop-label {
	width: 72px;
	min-width: 72px;
	text-align: center;
	font-size: .78rem;
	color: #374151;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}
.stkgr-pop-bar {
	display: flex;
	align-items: center;
	padding: 7px 10px;
	min-width: 24px;
	transition: width .5s ease;
}
.stkgr-pop-bar span {
	font-size: .72rem;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}
.stkgr-pop-left  { border-radius: 3px 0 0 3px; justify-content: flex-end; }
.stkgr-pop-right { border-radius: 0 3px 3px 0; justify-content: flex-start; }

/* ── Union · Two Circles ────────────────────────────────────── */
.stkgr-venn-2 {
	position: relative;
	height: 240px;
	isolation: isolate;
	overflow: hidden;
}
.stkgr-venn-2 .stkgr-venn-circle {
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	mix-blend-mode: multiply;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	top: 50%;
	transform: translateY(-50%);
}
.stkgr-venn-ca { left: calc(50% - 150px); }
.stkgr-venn-cb { left: calc(50% - 30px);  }

/* ── Union · Three Circles ──────────────────────────────────── */
.stkgr-venn-3 {
	position: relative;
	height: 290px;
	isolation: isolate;
	overflow: hidden;
}
.stkgr-venn-3 .stkgr-venn-circle {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	mix-blend-mode: multiply;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
/* Triangle arrangement: top-centre, bottom-left, bottom-right */
.stkgr-venn-c1 {
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
}
.stkgr-venn-c2 {
	bottom: 16px;
	left: 20%;
	transform: translateX(-50%);
}
.stkgr-venn-c3 {
	bottom: 16px;
	left: 80%;
	transform: translateX(-50%);
}

/* Shared Venn text */
.stkgr-venn-lbl {
	font-size: .78rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	text-align: center;
	padding: 0 12px;
}
.stkgr-venn-val {
	font-size: 1.2rem;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.stkgr-wrap *,
	.stkgr-wrap *::before,
	.stkgr-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
	.stkgr-pyr-label { width: 64px; min-width: 64px; }
	.stkgr-pop-label { width: 52px; min-width: 52px; }
	.stkgr-venn-2 .stkgr-venn-circle { width: 140px; height: 140px; }
	.stkgr-venn-ca { left: calc(50% - 120px); }
	.stkgr-venn-cb { left: calc(50% - 20px);  }
	.stkgr-venn-3 .stkgr-venn-circle { width: 130px; height: 130px; }
	.stkgr-venn-3 { height: 240px; }
}