/**
 * Stack Graphs — Frontend Styles
 * Chart.js types: line-1/2/3, bar-1/2/3, pie-1/2/3, bubble-1/2
 * CSS types: pyramid-1/2, venn-1/2
 */

/* ── 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 · Neon Dark wrapper ───────────────────────────────── */
.stkgr-line-2 {
	background: #0f172a;
	border-radius: 12px;
}
.stkgr-line-2 .stkgr-title { color: #f1f5f9; }

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

/* ── 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);
}

/* ── 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; }
}

/* ─────────────────────────────────────────────────────────────
   WPStack Graph Studio — Premium global design controls
   ───────────────────────────────────────────────────────────── */
.stkgr-wrap{
  --stkgr-surface:#ffffff;
  --stkgr-text:#111827;
  --stkgr-muted:#64748b;
  --stkgr-line:rgba(15,23,42,.10);
  --stkgr-radius:24px;
  --stkgr-gap-ui:18px;
  --stkgr-anim-duration:850ms;
  --stkgr-stagger-delay:70ms;
  overflow:hidden;
  background:var(--stkgr-surface);
  color:var(--stkgr-text);
  border-radius:var(--stkgr-radius);
  border:1px solid var(--stkgr-line);
  box-shadow:0 18px 55px rgba(15,23,42,.10);
  padding:clamp(18px,3vw,34px);
  isolation:isolate;
}
.stkgr-title{
  margin:0 0 var(--stkgr-gap-ui);
  color:var(--stkgr-text);
  font-size:clamp(1.05rem,1.5vw,1.55rem);
  line-height:1.08;
  font-weight:850;
  letter-spacing:-.035em;
}
.stkgr-canvas-wrap{
  padding:12px;
  border-radius:calc(var(--stkgr-radius) - 8px);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,252,.72));
  border:1px solid rgba(15,23,42,.06);
}
.stkgr-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 8% 0%, color-mix(in srgb,var(--stkgr-accent) 18%, transparent), transparent 32%), linear-gradient(135deg, rgba(255,255,255,.48), transparent 45%);
  z-index:-1;
}
.stkgr-wrap::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--stkgr-accent),color-mix(in srgb,var(--stkgr-accent) 35%, #fff),transparent);
  opacity:.85;
}

/* Design presets */
.stkgr-design-editorial-light{--stkgr-surface:#fff;--stkgr-text:#111827;--stkgr-muted:#64748b;--stkgr-line:rgba(17,24,39,.10)}
.stkgr-design-editorial-light .stkgr-title{font-family:Georgia,'Times New Roman',serif;font-weight:800;letter-spacing:-.04em}
.stkgr-design-financial-terminal{--stkgr-surface:#07111f;--stkgr-text:#e5f6ff;--stkgr-muted:#83a1bd;--stkgr-line:rgba(148,163,184,.18)}
.stkgr-design-financial-terminal{background:linear-gradient(145deg,#07111f,#0f172a 58%,#111827)}
.stkgr-design-financial-terminal .stkgr-canvas-wrap{background:rgba(2,6,23,.42);border-color:rgba(148,163,184,.14)}
.stkgr-design-financial-terminal .stkgr-title,.stkgr-design-neon-intel .stkgr-title{color:var(--stkgr-text)}
.stkgr-design-executive-glass{--stkgr-surface:rgba(255,255,255,.68);--stkgr-text:#111827;--stkgr-muted:#475569;--stkgr-line:rgba(255,255,255,.58);backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(15,23,42,.14)}
.stkgr-design-soft-saas{--stkgr-surface:#f8fbff;--stkgr-text:#172033;--stkgr-muted:#64748b;--stkgr-line:rgba(37,99,235,.10);box-shadow:0 16px 50px rgba(37,99,235,.10)}
.stkgr-design-ink-report{--stkgr-surface:#fbfaf7;--stkgr-text:#171717;--stkgr-muted:#57534e;--stkgr-line:rgba(28,25,23,.18);border-radius:10px;box-shadow:none;border-top:5px solid var(--stkgr-accent)}
.stkgr-design-ink-report::after{display:none}.stkgr-design-ink-report .stkgr-canvas-wrap{background:rgba(255,255,255,.42);border-style:dashed}
.stkgr-design-neon-intel{--stkgr-surface:#050816;--stkgr-text:#eef2ff;--stkgr-muted:#a5b4fc;--stkgr-line:rgba(129,140,248,.22);box-shadow:0 0 0 1px rgba(129,140,248,.12),0 24px 80px rgba(79,70,229,.22)}
.stkgr-design-neon-intel .stkgr-canvas-wrap{background:radial-gradient(circle at 50% 0%,rgba(79,70,229,.22),rgba(2,6,23,.22));border-color:rgba(129,140,248,.16)}

/* Per-layout treatments */
.stkgr-treatment-card{box-shadow:0 22px 70px rgba(15,23,42,.14)}
.stkgr-treatment-dashboard{border-radius:18px;background:linear-gradient(180deg,var(--stkgr-surface),color-mix(in srgb,var(--stkgr-surface) 82%,#e2e8f0));}
.stkgr-treatment-dashboard .stkgr-title{padding-bottom:12px;border-bottom:1px solid var(--stkgr-line);font-family:Inter,system-ui,sans-serif;text-transform:uppercase;font-size:.86rem;letter-spacing:.12em}
.stkgr-treatment-newspaper{border-radius:4px;box-shadow:none;border:1px solid #1f2937;background:#fffdf8;color:#111827}
.stkgr-treatment-newspaper .stkgr-title{font-family:Georgia,'Times New Roman',serif;font-size:1.55rem;border-bottom:3px double #111827;padding-bottom:10px}
.stkgr-treatment-glass{background:color-mix(in srgb,var(--stkgr-surface) 72%,transparent);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.42)}
.stkgr-treatment-borderless{border-color:transparent;box-shadow:none;background:transparent;padding:0}.stkgr-treatment-borderless::after,.stkgr-treatment-borderless::before{display:none}
.stkgr-treatment-compact{padding:16px;border-radius:16px}.stkgr-treatment-compact .stkgr-title{font-size:.95rem;margin-bottom:10px}.stkgr-treatment-compact .stkgr-canvas-wrap{padding:6px}

/* Stronger styles for CSS-rendered graphs */
.stkgr-pyr-label,.stkgr-pop-label{color:var(--stkgr-muted);font-weight:750;letter-spacing:-.015em}
.stkgr-pyr-track{background:color-mix(in srgb,var(--stkgr-muted) 13%,transparent);border-radius:999px;overflow:hidden;padding:3px}
.stkgr-pyr-bar,.stkgr-pop-bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 18px color-mix(in srgb,var(--stkgr-accent) 18%,transparent)}
.stkgr-pop-half{background:color-mix(in srgb,var(--stkgr-muted) 11%,transparent);border-radius:999px;padding:3px}
.stkgr-venn-circle{box-shadow:inset 0 1px 14px rgba(255,255,255,.24),0 16px 34px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.42)}
.stkgr-venn-lbl{font-weight:850;letter-spacing:-.02em}.stkgr-venn-val{font-size:1.45rem}

/* Animation presets */
.stkgr-anim-rise{animation:stkgrRise var(--stkgr-anim-duration) cubic-bezier(.16,1,.3,1) both}
.stkgr-anim-fade{animation:stkgrFade var(--stkgr-anim-duration) ease both}
.stkgr-anim-scale{animation:stkgrScale var(--stkgr-anim-duration) cubic-bezier(.16,1,.3,1) both}
.stkgr-anim-slide-left{animation:stkgrSlideLeft var(--stkgr-anim-duration) cubic-bezier(.16,1,.3,1) both}
.stkgr-anim-zoom-glow{animation:stkgrZoomGlow var(--stkgr-anim-duration) cubic-bezier(.16,1,.3,1) both}
.stkgr-anim-stagger .stkgr-title,.stkgr-anim-stagger .stkgr-canvas-wrap,.stkgr-anim-stagger .stkgr-pyr-row,.stkgr-anim-stagger .stkgr-pop-row,.stkgr-anim-stagger .stkgr-venn-circle{animation:stkgrRise var(--stkgr-anim-duration) cubic-bezier(.16,1,.3,1) both}
.stkgr-anim-stagger .stkgr-title{animation-delay:0ms}.stkgr-anim-stagger .stkgr-canvas-wrap{animation-delay:var(--stkgr-stagger-delay)}
.stkgr-anim-stagger .stkgr-pyr-row:nth-child(1),.stkgr-anim-stagger .stkgr-pop-row:nth-child(1),.stkgr-anim-stagger .stkgr-venn-circle:nth-child(1){animation-delay:calc(var(--stkgr-stagger-delay) * 1)}
.stkgr-anim-stagger .stkgr-pyr-row:nth-child(2),.stkgr-anim-stagger .stkgr-pop-row:nth-child(2),.stkgr-anim-stagger .stkgr-venn-circle:nth-child(2){animation-delay:calc(var(--stkgr-stagger-delay) * 2)}
.stkgr-anim-stagger .stkgr-pyr-row:nth-child(3),.stkgr-anim-stagger .stkgr-pop-row:nth-child(3),.stkgr-anim-stagger .stkgr-venn-circle:nth-child(3){animation-delay:calc(var(--stkgr-stagger-delay) * 3)}
.stkgr-anim-stagger .stkgr-pyr-row:nth-child(4),.stkgr-anim-stagger .stkgr-pop-row:nth-child(4){animation-delay:calc(var(--stkgr-stagger-delay) * 4)}
.stkgr-anim-stagger .stkgr-pyr-row:nth-child(5),.stkgr-anim-stagger .stkgr-pop-row:nth-child(5){animation-delay:calc(var(--stkgr-stagger-delay) * 5)}
.stkgr-pause-yes:hover,.stkgr-pause-yes:hover *{animation-play-state:paused!important;transition-duration:0ms!important}
@keyframes stkgrRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes stkgrFade{from{opacity:0}to{opacity:1}}
@keyframes stkgrScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes stkgrSlideLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes stkgrZoomGlow{0%{opacity:0;transform:scale(.92);box-shadow:0 0 0 rgba(79,70,229,0)}65%{opacity:1;box-shadow:0 0 42px color-mix(in srgb,var(--stkgr-accent) 26%,transparent)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.stkgr-wrap,.stkgr-wrap *{animation:none!important;transition:none!important}}