/**
 * Consecutive same-tag post runs (DotLinker).
 * Accents cycle Glimm palette: blue, green, red, then the rest.
 */

:root {
	--tag-run-accent: #2e70ff;
	--tag-run-dot: 8px;
	--tag-run-line: 2px;
	--tag-run-gap: 16px;
	--tag-run-border: 3px;
	--tag-run-rail-inset: calc(var(--tag-run-dot) + var(--tag-run-gap));
}

.wp-block-post-template > .wp-block-post.tag-run-set-0 {
	--tag-run-accent: #2e70ff;
}
.wp-block-post-template > .wp-block-post.tag-run-set-1 {
	--tag-run-accent: #c2ff3d;
}
.wp-block-post-template > .wp-block-post.tag-run-set-2 {
	--tag-run-accent: #ff3d7f;
}
.wp-block-post-template > .wp-block-post.tag-run-set-3 {
	--tag-run-accent: #1fc8ff;
}
.wp-block-post-template > .wp-block-post.tag-run-set-4 {
	--tag-run-accent: #ff7a1a;
}
.wp-block-post-template > .wp-block-post.tag-run-set-5 {
	--tag-run-accent: #ffd600;
}
.wp-block-post-template > .wp-block-post.tag-run-set-6 {
	--tag-run-accent: #00ffa8;
}
.wp-block-post-template > .wp-block-post.tag-run-set-7 {
	--tag-run-accent: #00e5d6;
}
.wp-block-post-template > .wp-block-post.tag-run-set-8 {
	--tag-run-accent: #7b4fff;
}
.wp-block-post-template > .wp-block-post.tag-run-set-9 {
	--tag-run-accent: #d33cff;
}
.wp-block-post-template > .wp-block-post.tag-run-set-10 {
	--tag-run-accent: #ff3dc0;
}

/* -------------------------------------------------------------------------
   Mobile: blue left border; grey separators flush to the border
   ------------------------------------------------------------------------- */

@media (max-width: 781px) {
	.wp-block-post-template > .wp-block-post.has-tag-run {
		border-left: var(--tag-run-border) solid var(--tag-run-accent);
		box-sizing: border-box;
	}

	/* Title/meta row keeps a little inset; separators stay flush to the border */
	.wp-block-post-template > .wp-block-post.has-tag-run > .wp-block-group > .wp-block-group {
		padding-left: 12px;
	}
}

/* -------------------------------------------------------------------------
   Desktop: rail sits left of content so all grey lines share one start edge
   ------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.wp-block-post-template > .wp-block-post.has-tag-run {
		position: relative;
	}

	/* Vertical connector, centered on the dots */
	.wp-block-post-template > .wp-block-post.has-tag-run::before {
		content: "";
		position: absolute;
		left: calc(
			-1 * var(--tag-run-rail-inset) + (var(--tag-run-dot) - var(--tag-run-line)) / 2
		);
		width: var(--tag-run-line);
		background: var(--tag-run-accent);
		top: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 1;
	}

	.wp-block-post-template > .wp-block-post.tag-run-start::before {
		top: 50%;
	}

	.wp-block-post-template > .wp-block-post.tag-run-end::before {
		bottom: 50%;
	}

	.wp-block-post-template > .wp-block-post.tag-run-start.tag-run-end::before,
	.wp-block-post-template > .wp-block-post.tag-run-solo::before {
		display: none;
	}

	/* Dot: gap to the left of the shared grey-line start */
	.wp-block-post-template > .wp-block-post.has-tag-run::after {
		content: "";
		position: absolute;
		left: calc(-1 * var(--tag-run-rail-inset));
		top: 50%;
		width: var(--tag-run-dot);
		height: var(--tag-run-dot);
		margin-top: calc(var(--tag-run-dot) / -2);
		border-radius: 50%;
		background: var(--tag-run-accent);
		pointer-events: none;
		z-index: 2;
	}
}