/* module-progress-meter — current-module bar.
   One slot per workshop, peer dots layered on top.
   See /admin/component-preview for the stress test. */

.module-progress-meter {
	display: grid;
	gap: 0.5rem;

	h3 {
		margin: 0;
		color: var(--accent);
	}

	.teaser {
		margin-top: 0;
	}

	.meter {
		display: flex;
		gap: 2px;
		position: relative;
		height: 80px; /* room for above/below dots */
		align-items: center;
	}

	.slot {
		--color: var(--stroke-quiet, #e0e0e0);

		flex: 1 1 0;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 20px;

		&::before {
			content: '';
			position: absolute;
			inset: calc(50% - 4px) 0 calc(50% - 4px) 0;
			background: var(--color);
		}

		&.is-complete {
			&::before {
				--color: var(--ink-primary);
			}
		}

		&.is-current {
			&::before {
				--color: var(--accent);
			}
		}

		&.is-under-review {
			&::before {
				--color: orange;
			}
		}
	}

	.peer-dot {
		position: absolute;
		left: 50%;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: black;
		transform: translateX(-50%);
		z-index: 3;
	}

	.peer-dot-above { top: 8%; }
	.peer-dot-below { bottom: 8%; }



}