/* =============================================================================
   EE Design Tokens
   These CSS custom properties are shared across EE Widgets and EE Benefits.
   ============================================================================= */
:root {
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-7: 1.75rem;
	--space-8: 2rem;

	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;
	--white:    #ffffff;
	--ee-blue:      #1795D4;
	--primary:      #1795D4;
	--primary-dark: #22567C;
	--success:      #16a34a;

	--font-size-sm:  0.875rem;
	--font-semibold: 600;
	--radius-full:   9999px;
}

/* =============================================================================
   Timeline Widget
   ============================================================================= */
.timeline {
	position: relative;
	padding-left: var(--space-8);
}

.timeline::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--gray-200);
}

.timeline-item {
	position: relative;
	padding-bottom: var(--space-6);
}

.timeline-item:last-child {
	padding-bottom: 0;
}

.timeline-dot {
	position: absolute;
	left: calc(-1 * var(--space-8) + 4px);
	width: 16px;
	height: 16px;
	background: var(--white);
	border: 2px solid var(--ee-blue);
	border-radius: var(--radius-full);
}

.timeline-date {
	font-size: var(--font-size-sm);
	color: var(--gray-500);
	margin-bottom: var(--space-1);
}

.timeline-title {
	font-weight: var(--font-semibold);
	color: var(--gray-800);
	margin-bottom: var(--space-2);
}

.timeline-content {
	color: var(--gray-600);
	font-size: var(--font-size-sm);
}