/* @doxallia/design — Marketing timeline
 * Horizontal (desktop) / stacked (mobile) timeline for DGFIP calendar milestones.
 * Distinct from timeline.css (vertical documentation timeline).
 * Class prefix: .mk-timeline*
 */

.mk-timeline {
	display: flex;
	gap: 0;
	position: relative;
	align-items: flex-start;
}

/* Connecting line behind the steps */
.mk-timeline::before {
	content: "";
	position: absolute;
	top: 1.25rem; /* vertically centered on the dot */
	left: calc(var(--s-6) + 0.75rem);
	right: calc(var(--s-6) + 0.75rem);
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}

.mk-timeline__step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 var(--s-4);
	position: relative;
	z-index: 1;
}

/* Dot / milestone marker */
.mk-timeline__step::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background: var(--color-brand);
	border: 3px solid var(--color-surface);
	border-radius: 50%;
	display: block;
	margin-bottom: var(--s-4);
	flex-shrink: 0;
	box-shadow: 0 0 0 2px var(--color-brand);
}

/* Future / pending step */
.mk-timeline__step--pending::before {
	background: var(--color-surface-muted);
	box-shadow: 0 0 0 2px var(--color-border);
}

.mk-timeline__date {
	font-size: var(--text-sm);
	font-weight: var(--fw-bold, 700);
	color: var(--color-brand);
	letter-spacing: 0.02em;
	margin: 0 0 var(--s-2) 0;
}

.mk-timeline__step--pending .mk-timeline__date {
	color: var(--color-text-muted);
}

.mk-timeline__title {
	font-size: var(--text-base);
	font-weight: var(--fw-semibold, 600);
	color: var(--color-text);
	margin: 0 0 var(--s-2) 0;
	line-height: 1.3;
}

.mk-timeline__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ── Responsive — stacked on mobile ─────────────────────── */

@media (max-width: 640px) {
	.mk-timeline {
		flex-direction: column;
		gap: var(--s-6);
	}

	/* Vertical connecting line */
	.mk-timeline::before {
		top: calc(var(--s-6) + 0.75rem);
		bottom: calc(var(--s-6) + 0.75rem);
		left: 0.625rem; /* centered on the dot */
		right: auto;
		width: 2px;
		height: auto;
	}

	.mk-timeline__step {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
		gap: var(--s-4);
		padding: 0;
	}

	.mk-timeline__step::before {
		margin-bottom: 0;
		margin-top: 2px; /* align with first line of text */
		flex-shrink: 0;
	}

	.mk-timeline__content {
		flex: 1;
	}
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-timeline__step::before {
		background: var(--color-brand-text);
		box-shadow: 0 0 0 2px var(--color-brand-text);
		border-color: var(--color-bg);
	}

	.mk-timeline__date {
		color: var(--color-brand-text);
	}

	.mk-timeline__step--pending::before {
		background: var(--color-surface-muted);
		box-shadow: 0 0 0 2px var(--color-border);
	}

	.mk-timeline__step--pending .mk-timeline__date {
		color: var(--color-text-muted);
	}
}

/* ── Obligation blocks (split card) ─────────────────────── */

.mk-timeline__obligations {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-3);
}

.mk-timeline__obligation {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.mk-obligation__label {
	font-size: 0.6875rem; /* 11px */
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

.mk-obligation--reception .mk-obligation__label {
	color: var(--color-brand);
}

.mk-obligation--emission .mk-obligation__label {
	color: var(--color-warning); /* #d97706 — token existant */
}

.mk-timeline__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}

.mk-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	line-height: 1;
	background: var(--color-brand-active); /* #eae9ef */
	color: var(--color-brand);
	border: 1px solid transparent;
}

.mk-chip--filled {
	background: var(--color-brand);
	color: var(--color-on-brand);
}

.mk-chip--muted {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
}

.mk-timeline__obligation-note {
	font-size: var(--text-xs, 0.75rem);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* Step futur (2027) : chips muted */
.mk-timeline__step--last .mk-chip--filled {
	background: var(--color-surface-muted);
	color: var(--color-text-muted);
	border-color: var(--color-border);
}

/* ── Dark mode (chips) ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-chip {
		background: color-mix(in srgb, var(--color-brand) 15%, transparent);
		color: var(--color-brand-text);
	}

	.mk-chip--filled {
		background: var(--color-brand);
		color: var(--color-on-brand);
	}

	.mk-obligation--emission .mk-obligation__label {
		color: #fbbf24; /* amber-400 — ratio suffisant sur dark bg */
	}
}