/* ===================================================================
   Flow diagrams (.dg-diagram) — drawn by assets/js/diagram.js.
   Every colour is one of the theme's own tokens, so the diagram
   follows light/dark mode with the rest of the page. Tiles are the
   "soft card" style: the testimonial cards' grey fill and hairline
   border, a grey step marker, then a small label, a title and a
   detail line. Steps on an error path are tinted red the way coloured
   category pills are tinted.

   Each token has the light theme's value as its fallback, for the
   block editor, which doesn't load the theme's stylesheet.
   =================================================================== */
.dg-diagram {
	--dg-error: #E5484D;
	margin: 2.5em 0;
	font-family: var(--font-display, 'Aspekta', -apple-system, system-ui, sans-serif);
}
.dg-stage {
	position: relative;
}
/* Desktop & tablet: never drawn smaller than 80% (diagram.js sets a
   min-width) — narrower than that, it scrolls sideways instead of the
   text shrinking past readable. */
.dg-diagram:not(.dg-diagram--portrait) .dg-stage {
	overflow-x: auto;
	scrollbar-width: none;
	padding: 4px 0;
}
.dg-diagram:not(.dg-diagram--portrait) .dg-stage::-webkit-scrollbar { display: none; }
/* Top to bottom: drawn at its own size (diagram.js sets a max-width),
   centred in the column. */
.dg-diagram--vertical .dg {
	margin: 0 auto;
}
.dg-stage.has-more-right {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.dg-stage.has-more-left {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.dg-stage.has-more-left.has-more-right {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.dg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.dg text { font-family: var(--font-display, 'Aspekta', -apple-system, system-ui, sans-serif); }
.dg-diagram figcaption {
	margin-top: 14px;
	font-size: 0.875rem;
	line-height: var(--leading-snug, 1.35);
	color: var(--color-text-muted, #6B7475);
	text-align: center;
}
.dg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dg-tile__bg { fill: var(--card-bg, #F7F8F8); stroke: var(--glass-border, rgba(38, 50, 52, 0.09)); stroke-width: 1; }
.dg-eyebrow { font-size: 11px; fill: var(--color-text-muted, #6B7475); letter-spacing: 0.01em; }
.dg-title { font-size: 15px; font-weight: 500; fill: var(--color-text, #111110); }
.dg-detail { font-size: 12.5px; fill: var(--color-text-secondary, #5F6869); }
.dg-step__bg { fill: var(--chip-bg, #EEF1F1); }
.dg-step__num { font-size: 11px; font-weight: 600; fill: var(--chip-text, #535A5B); }
/* Solid colours mixed into the page background rather than see-
   through ones, so where two lines share a stretch the one on top
   hides the other completely. */
.dg-line {
	fill: none;
	stroke: color-mix(in srgb, var(--color-text-muted, #6B7475) 50%, var(--color-bg, #FFFFFF));
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dg-pulse { fill: var(--color-accent, #0265FD); opacity: 0; }
.dg-pulse.is-moving { opacity: 1; }

.dg-tile--error .dg-tile__bg {
	fill: color-mix(in srgb, var(--dg-error) 7%, var(--card-bg, #F7F8F8));
	stroke: color-mix(in srgb, var(--dg-error) 35%, transparent);
}
.dg-tile--error .dg-eyebrow { fill: color-mix(in srgb, var(--dg-error) 80%, var(--color-text, #111110)); }
.dg-tile--error .dg-step__bg { fill: color-mix(in srgb, var(--dg-error) 14%, var(--card-bg, #F7F8F8)); }
.dg-tile--error .dg-step__num { fill: color-mix(in srgb, var(--dg-error) 85%, var(--color-text, #111110)); }
.dg-line--error { stroke: color-mix(in srgb, var(--dg-error) 55%, var(--color-bg, #FFFFFF)); }
.dg-pulse--error { fill: var(--dg-error); }

/* Building in: each tile rises and fades in, and each connector draws
   itself out of the step before. Landscape plays it all at once,
   column by column (--d), once it scrolls into view; portrait plays
   each step as it's scrolled to (.is-in). */
.dg-tile { transform-box: fill-box; }
.dg.is-playing .dg-tile,
.dg.is-stepwise .dg-tile { opacity: 0; }
.dg.is-playing .dg-tile,
.dg.is-stepwise .dg-tile.is-in {
	animation: dg-in 1.1s var(--intro-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
	animation-delay: var(--d, 0s);
}
.dg:not(.is-playing):not(.is-stepwise):not(.is-still) .dg-tile { opacity: 0; }
.dg.is-playing .dg-line,
.dg.is-stepwise .dg-line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.dg.is-playing .dg-line,
.dg.is-stepwise .dg-line.is-in {
	animation: dg-draw 0.8s var(--ease-standard, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
	animation-delay: var(--d, 0s);
}
.dg:not(.is-playing):not(.is-stepwise):not(.is-still) .dg-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
@keyframes dg-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dg-draw {
	to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dg .dg-tile,
	.dg.is-playing .dg-tile,
	.dg.is-stepwise .dg-tile { opacity: 1; animation: none; }
	.dg .dg-line,
	.dg.is-playing .dg-line,
	.dg.is-stepwise .dg-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
	.dg-pulse { display: none; }
}