atomicuilibrary 0.0.1

package/dist/collection/components/timeline/timeline.css

@@ -0,0 +1,1850 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.timeline-container {
+  display: flex;
+  position: relative;
+  font-family: inherit;
+}
+
+/* Vertical Mode */
+.timeline-vertical {
+  flex-direction: column;
+  padding: 20px 0;
+}
+
+.timeline-vertical .timeline-item {
+  display: flex;
+  position: relative;
+  padding-bottom: 24px;
+  align-items: center;
+}
+
+.timeline-vertical .timeline-item-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--bg-primary, #e5e7eb);
+}
+
+.timeline-vertical .timeline-item:last-child .timeline-item-line {
+  display: none;
+}
+
+.timeline-vertical .timeline-item-dot {
+  position: relative;
+  z-index: 10;
+  width: 12px;
+  height: 12px;
+  background: var(--bg-primary, #ffffff);
+  border: 2px solid var(--color-primary, #10b981);
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 0;
+  /* Centered by flex */
+}
+
+/* Obsolete: handled by item-details padding */
+.timeline-vertical .timeline-item-content {
+  flex: 1;
+}
+
+/* Vertical Alignment: Left (Standard) */
+.timeline-align-left.timeline-vertical .timeline-item-line {
+  left: 5px;
+}
+
+/* Icon Position specific alignments */
+.timeline-icon-top .timeline-item {
+  align-items: flex-start;
+}
+
+.timeline-icon-center .timeline-item {
+  align-items: center;
+}
+
+.timeline-icon-bottom .timeline-item {
+  align-items: flex-end;
+}
+
+.timeline-align-left.timeline-vertical .timeline-item-dot {
+  left: 0;
+  /* top: 4px; -- Removed fixed offset to allow flex centering */
+}
+
+.timeline-align-left.timeline-vertical .timeline-item-details {
+  padding-left: 48px;
+  /* Increased to 48px to absolutely guarantee gap */
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* Vertical Alignment: Right */
+/* Vertical Alignment: Right */
+.timeline-align-right.timeline-vertical .timeline-item {
+  flex-direction: row-reverse;
+  /* Flip the flex order so dot is on right */
+}
+
+.timeline-align-right.timeline-vertical .timeline-item-line {
+  left: auto;
+  /* Unset left default */
+  right: 5px;
+  /* Position relative to right edge */
+}
+
+.timeline-align-right.timeline-vertical .timeline-item-dot {
+  left: auto;
+  /* Unset left default */
+  right: 0;
+  top: 4px;
+}
+
+.timeline-align-right.timeline-vertical .timeline-item-details {
+  padding-left: 0;
+  padding-right: 48px;
+  /* High clearance */
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+  /* Ensure it fills space */
+}
+
+/* Vertical Alignment: Alternate */
+.timeline-align-alternate.timeline-vertical .timeline-item {
+  width: 100%;
+}
+
+.timeline-align-alternate.timeline-vertical .timeline-item-line {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.timeline-align-alternate.timeline-vertical .timeline-item-dot {
+  left: 50%;
+  transform: translateX(-50%);
+  top: 4px;
+}
+
+.timeline-align-alternate.timeline-vertical .side-left .timeline-item-details {
+  width: 50%;
+  padding-right: 48px;
+  /* High clearance */
+  padding-left: 0;
+  text-align: right;
+  box-sizing: border-box;
+  /* Ensure padding is included in width */
+  margin-left: 0;
+  /* Explicit reset */
+}
+
+.timeline-align-alternate.timeline-vertical .side-right .timeline-item-details {
+  width: 50%;
+  margin-left: 50%;
+  padding-left: 48px;
+  /* High clearance */
+  text-align: left;
+  box-sizing: border-box;
+}
+
+/* Horizontal Mode */
+.timeline-horizontal {
+  flex-direction: row;
+  padding: 80px 0;
+  overflow-x: auto;
+  min-height: 250px;
+  /* Increased for split content */
+  align-items: center;
+}
+
+.timeline-horizontal .timeline-item {
+  flex: 1;
+  min-width: 200px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin: auto;
+}
+
+/* Horizontal Layout: Consolidated Block */
+.timeline-horizontal .timeline-item-details {
+  position: absolute;
+  width: 240px;
+  /* Fixed width for stability */
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 12px;
+  /* Increased from 8px for more breathing room */
+  /* background: rgba(255,255,255,0.8); Optional background for readability */
+}
+
+/* Multi-Line (Snake) Mode */
+.timeline-horizontal.timeline-multiline {
+  flex-direction: column;
+  /* Rows stack vertically */
+  flex-wrap: nowrap;
+  gap: 0;
+  padding: 40px 80px;
+  /* Increased to 80px to safely clear the 60px connectors */
+  display: flex;
+  /* Side padding for connectors */
+  align-items: stretch;
+  overflow: visible;
+  /* Allow connectors to show */
+}
+
+.timeline-row {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  /* Center lines if total items < width, or flex-start? */
+  justify-content: flex-start;
+  /* Standard flow */
+  position: relative;
+  padding: 40px 0;
+  /* Vertical gap between rows */
+}
+
+/* Alternate Row Direction for Snake Effect */
+.timeline-row.timeline-row-odd {
+  flex-direction: row-reverse;
+}
+
+.timeline-horizontal.timeline-multiline .timeline-item {
+  flex: 1;
+  /* Stretch to fill column width */
+  margin: 0;
+  min-width: 0;
+}
+
+/* Connecting lines in Snake Mode */
+.timeline-horizontal.timeline-multiline .timeline-item-line {
+  display: block;
+  left: 50%;
+  right: -50%;
+  top: 50%;
+  border-radius: 0;
+}
+
+/* Fix line direction for reversed rows logic? 
+   In row-reverse, the visual "next" is to the Left.
+   DOM order is reversed visual.
+   Item 1 (Rightmost) -> Item 2 (Left of 1).
+   Line needs to go from Center to Left (-50%).
+   But standard CSS LTR line goes Right.
+
+   If row is reversed, the "Right" of the element is visually Left.
+   So standard line style might just work?
+   Let's check:
+   Standard line: left: 50%, right: -50%. (Draws from Center to Right Edge).
+   In RTL context? No, flex-row-reverse doesn't change CSS 'right' property meaning.
+   It just changes placement.
+   We need line to go towards the "Next" item.
+
+   Items are 0..N.
+   Row Even (LTR): Item 0 -> Item 1. Line goes Right. OK.
+   Row Odd (RTL): Item 4 (Rightmost) -> Item 5 (Left of 4). 
+     Line needs to go Left.
+*/
+.timeline-row.timeline-row-odd .timeline-item-line {
+  left: -50%;
+  /* Go to left edge */
+  right: 50%;
+  /* From Center */
+}
+
+/* Hide line for last item IN ROW? 
+   NO. User wants "Line to Line".
+   So we MUST show the line going from Dot -> Edge.
+*/
+.timeline-item.is-last-in-row .timeline-item-line {
+  display: block;
+  /* Specific styling for last item line: go from Center to Edge */
+  left: 50%;
+  right: 0;
+  width: auto;
+  /* Fill remaining space? Flex item? */
+  /* In absolute positioning: left 50%, right 0 means fill right half. */
+}
+
+/* For Odd rows (Reverse), line goes Center -> Left Edge */
+.timeline-row-odd .timeline-item.is-last-in-row .timeline-item-line {
+  left: 0;
+  right: 50%;
+}
+
+/* U-Curve Connectors (Snake) - Restored */
+/* Revised Right Connector (Even Row) */
+/* Starts at RIGHT EDGE of item, connects to line end */
+/* Revised Right Connector (Even Row) */
+/* Starts at RIGHT EDGE of item, connects to line end */
+.timeline-row-even .timeline-item.is-last-in-row::after {
+  content: "";
+  position: absolute;
+  right: -60px;
+  /* Shift OUTSIDE by width of curve */
+  width: 60px;
+  /* Vertical Alignment: Match line position */
+  top: 50%;
+  /* We want the TOP border of this box to align with the line.
+     The box is 250px high (row height).
+     If line is at 50% of container...
+     We want the top edge of this connector to be at 50%.
+     So top: 50%.
+  */
+  height: 250px;
+  /* Full row height distance */
+  border-right: 2px solid var(--border-default, #e5e7eb);
+  border-top: 2px solid var(--border-default, #e5e7eb);
+  border-bottom: 2px solid var(--border-default, #e5e7eb);
+  border-top-right-radius: 60px;
+  border-bottom-right-radius: 60px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  z-index: 0;
+  left: auto;
+  pointer-events: none;
+  /* Fine-tune vertical alignment. 
+     The line is 2px thick, centered at 50%.
+     Our top border is 2px thick.
+     If top: 50%, top border starts at center.
+     Since line is transform: translateY(-50%) (centered), it starts at (50% - 1px).
+     So we might need top: calc(50% - 1px).
+  */
+  top: calc(50% - 1px);
+}
+
+/* Revised Left Connector (Odd Row) */
+/* Starts at LEFT EDGE of item */
+.timeline-row-odd .timeline-item.is-last-in-row::after {
+  content: "";
+  position: absolute;
+  left: -60px;
+  /* Shift OUTSIDE left */
+  right: auto;
+  width: 60px;
+  top: calc(50% - 1px);
+  /* Match line center */
+  height: 250px;
+  border-left: 2px solid var(--border-default, #e5e7eb);
+  border-top: 2px solid var(--border-default, #e5e7eb);
+  border-bottom: 2px solid var(--border-default, #e5e7eb);
+  border-top-left-radius: 60px;
+  border-bottom-left-radius: 60px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+  transform: none;
+  pointer-events: none;
+}
+
+/* Hide connector on the absolute last item */
+.timeline-row:last-child .timeline-item.is-last-in-row::after {
+  display: none;
+}
+
+/* Ensure horizontal items center vertically in the fixed row */
+.timeline-row .timeline-item {
+  justify-content: flex-start;
+  /* Reset align */
+}
+
+.timeline-row .timeline-item-dot {
+  margin-top: 119px;
+  /* (250/2) - 6px */
+}
+
+.timeline-row .timeline-item-line {
+  top: 125px;
+  transform: translateY(-50%);
+}
+
+.timeline-row .timeline-item-details {
+  top: 125px;
+  /* Re-anchor */
+}
+
+/* Base styles for parts */
+.timeline-horizontal .timeline-item-content,
+.timeline-horizontal .timeline-item-time {
+  position: static;
+  width: auto;
+  max-width: 100%;
+  transform: none;
+  left: auto;
+  text-align: center;
+  padding: 2px 0;
+}
+
+.timeline-horizontal .timeline-item-line {
+  position: absolute;
+  left: 50%;
+  right: -50%;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 2px;
+  background-color: var(--bg-primary, #e5e7eb);
+}
+
+.timeline-horizontal .timeline-item:last-child .timeline-item-line {
+  display: none;
+}
+
+.timeline-horizontal .timeline-item-dot {
+  width: 12px;
+  height: 12px;
+  background: var(--bg-primary, #ffffff);
+  border: 2px solid var(--color-primary, #10b981);
+  border-radius: 50%;
+  z-index: 10;
+  position: relative;
+}
+
+/* Horizontal Alignment: Top (Block Above Line) */
+.timeline-horizontal.timeline-align-top .timeline-item-details,
+.timeline-horizontal .side-top .timeline-item-details {
+  bottom: 50%;
+  top: auto;
+  margin-bottom: 32px;
+  /* Increased to 32px */
+  flex-direction: column-reverse;
+  /* Time closest to dot? Or Label? usually Time is close */
+}
+
+/* Let's keep Label at top, Time at bottom (closest to dot) for Top Align */
+.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-content,
+.timeline-horizontal .side-top .timeline-item-details .timeline-item-content {
+  order: 1;
+  /* Visual Top */
+}
+
+.timeline-horizontal.timeline-align-top .timeline-item-details .timeline-item-time,
+.timeline-horizontal .side-top .timeline-item-details .timeline-item-time {
+  order: 2;
+  /* Visual Bottom (closest to line) */
+}
+
+/* Horizontal Alignment: Bottom (Block Below Line) */
+.timeline-horizontal.timeline-align-bottom .timeline-item-details,
+.timeline-horizontal.timeline-align-left .timeline-item-details,
+.timeline-horizontal .side-bottom .timeline-item-details {
+  top: 50%;
+  bottom: auto;
+  margin-top: 32px;
+  /* Increased to 32px */
+  flex-direction: column;
+  /* Time at Top (closest to dot), Content Below */
+}
+
+/* Connecting Vertical Leaders (Optional polish) */
+.timeline-horizontal .timeline-item-details::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 2px;
+  background: var(--bg-primary, #e5e7eb);
+  height: 32px;
+  /* Match new margin */
+  transform: translateX(-50%);
+}
+
+.timeline-horizontal.timeline-align-top .timeline-item-details::before,
+.timeline-horizontal .side-top .timeline-item-details::before {
+  bottom: -32px;
+  /* Connects down to dot */
+}
+
+.timeline-horizontal.timeline-align-bottom .timeline-item-details::before,
+.timeline-horizontal.timeline-align-left .timeline-item-details::before,
+.timeline-horizontal .side-bottom .timeline-item-details::before {
+  top: -32px;
+  /* Connects up to dot */
+}
+
+/* Reset Alternate inheritance logic */
+.timeline-horizontal.timeline-align-alternate .timeline-item {
+  height: 100%;
+}
+
+.timeline-horizontal.timeline-align-alternate .timeline-item-dot {
+  margin: 0;
+}
+
+/* Status Colors */
+.timeline-item-success .timeline-item-dot {
+  border-color: var(--color-success, #10b981);
+}
+
+.timeline-item-danger .timeline-item-dot {
+  border-color: var(--color-danger, #ef4444);
+}
+
+.timeline-item-warning .timeline-item-dot {
+  border-color: var(--color-warning, #f59e0b);
+}
+
+.timeline-item-active .timeline-item-dot {
+  border-color: var(--color-primary, #10b981);
+  background-color: var(--bg-primary, #eff6ff);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+}
+
+.timeline-item-active .timeline-item-dot::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid var(--color-primary, #10b981);
+  animation: timeline-pulse 2s infinite;
+}
+
+.timeline-item-active .timeline-item-title {
+  color: var(--color-primary, #10b981);
+}
+
+@keyframes timeline-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+/* Icon and Dot Internals */
+.timeline-item-dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.timeline-item-icon {
+  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  /* Prevent line-height offset */
+  width: 100%;
+  height: 100%;
+}
+
+/* If item has icon, make the dot a bit lgr to fit it (2x base size) */
+/* If item has icon, make the dot a bit lgr to fit it (2x base size) */
+.timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  width: 24px;
+  height: 24px;
+  background: var(--bg-primary, #f8fafc);
+  display: flex !important;
+  /* Force flex to center content */
+  align-items: center;
+  justify-content: center;
+}
+
+/* Adjustment for lgr dots in vertical mode */
+.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  left: -6px;
+  /* Center 24px dot matches center of 12px dot (offset by 6px difference) */
+  top: 0;
+}
+
+.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  right: -6px;
+  left: auto;
+}
+
+.dot-inner {
+  width: 4px;
+  height: 4px;
+  background: var(--color-primary, #10b981);
+  border-radius: 50%;
+}
+
+.timeline-item-success .dot-inner {
+  background: var(--color-success, #10b981);
+}
+
+.timeline-item-danger .dot-inner {
+  background: var(--color-danger, #ef4444);
+}
+
+.timeline-item-warning .dot-inner {
+  background: var(--color-warning, #f59e0b);
+}
+
+/* Item interactivity */
+.timeline-item {
+  transition: opacity 0.2s ease;
+}
+
+.timeline-item:hover .timeline-item-dot {
+  transform: scale(1.2);
+}
+
+/* Panel Variant */
+.timeline-variant-panel .timeline-item-content {
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-default, #e5e7eb);
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  position: relative;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.timeline-variant-panel .timeline-item-content::before {
+  /* Optional arrow pointing to dot? */
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--bg-primary, #ffffff);
+  border-left: 1px solid var(--border-default, #e5e7eb);
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+  transform: rotate(45deg);
+  display: none;
+  /* Hide by default, too complex to position for all variants */
+}
+
+/* Hover effect for panel */
+.timeline-variant-panel .timeline-item:hover .timeline-item-content {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+}
+
+/* Marker: Number */
+.timeline-item-number {
+  color: var(--color-primary, #10b981);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.timeline-marker-number .timeline-item-dot,
+.timeline-item:has(.timeline-item-number) .timeline-item-dot {
+  width: 32px;
+  height: 32px;
+  background: var(--bg-primary, #ffffff);
+  border: 2px solid var(--color-primary, #10b981);
+}
+
+.timeline-item-active .timeline-item-number {
+  color: var(--text-standard, #ffffff);
+}
+
+.timeline-item-active.timeline-marker-number .timeline-item-dot {
+  background: var(--color-primary, #10b981);
+}
+
+/* Marker: Image */
+.timeline-item-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  display: block;
+}
+
+.timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 50%;
+  /* Strictly enforce circle */
+  position: relative;
+  /* Fix for overflow clipping in some browsers */
+  border: 2px solid var(--color-primary, #10b981);
+  /* Match default connector color or theme? Default dot is blue border. */
+  border-color: var(--color-primary, #cbd5e1);
+  /* Use a neutral border for images by default */
+  box-shadow: none;
+  /* Remove the extra shadow that made it look lgr */
+  background: var(--bg-primary, #ffffff);
+}
+
+.timeline-item-active:has(.timeline-item-image) .timeline-item-dot {
+  border-color: var(--color-primary, #10b981);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+  /* Standard active shadow */
+}
+
+/* Adjustment for lgr dots */
+/* Vertical mode shifts */
+.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  left: -6px;
+}
+
+.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  right: -6px;
+  left: auto;
+}
+
+/* Snake Fixes for lgr dots */
+/* Re-center for 24px dot (125 - 12 = 113) */
+.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,
+.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  margin-top: 113px;
+}
+
+/* If item has icon, make the dot a bit lgr to fit it (2x base size) */
+.timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  width: 24px;
+  height: 24px;
+  background: var(--bg-primary, #f8fafc);
+}
+
+/* Adjustment for lgr dots in vertical mode */
+.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  left: -6px;
+  /* Center 24px dot matches center of 12px dot (offset by 6px difference) */
+  top: 0;
+}
+
+.timeline-align-alternate.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  right: -6px;
+  left: auto;
+}
+
+.dot-inner {
+  width: 4px;
+  height: 4px;
+  background: var(--color-primary, #10b981);
+  border-radius: 50%;
+}
+
+.timeline-item-success .dot-inner {
+  background: var(--color-success, #10b981);
+}
+
+.timeline-item-danger .dot-inner {
+  background: var(--color-danger, #ef4444);
+}
+
+.timeline-item-warning .dot-inner {
+  background: var(--color-warning, #f59e0b);
+}
+
+/* Item interactivity */
+.timeline-item {
+  transition: opacity 0.2s ease;
+}
+
+.timeline-item:hover .timeline-item-dot {
+  transform: scale(1.2);
+}
+
+/* Panel Variant */
+.timeline-variant-panel .timeline-item-content {
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-default, #e5e7eb);
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  position: relative;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.timeline-variant-panel .timeline-item-content::before {
+  /* Optional arrow pointing to dot? */
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--bg-primary, #ffffff);
+  border-left: 1px solid var(--border-default, #e5e7eb);
+  border-bottom: 1px solid var(--border-default, #e5e7eb);
+  transform: rotate(45deg);
+  display: none;
+  /* Hide by default, too complex to position for all variants */
+}
+
+/* Hover effect for panel */
+.timeline-variant-panel .timeline-item:hover .timeline-item-content {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+}
+
+/* Marker: Number */
+.timeline-item-number {
+  color: var(--color-primary, #10b981);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.timeline-marker-number .timeline-item-dot,
+.timeline-item:has(.timeline-item-number) .timeline-item-dot {
+  width: 32px;
+  height: 32px;
+  background: var(--bg-primary, #ffffff);
+  border: 2px solid var(--color-primary, #10b981);
+}
+
+.timeline-item-active .timeline-item-number {
+  color: var(--text-standard, #ffffff);
+}
+
+.timeline-item-active.timeline-marker-number .timeline-item-dot {
+  background: var(--color-primary, #10b981);
+}
+
+/* Marker: Image */
+.timeline-item-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+  display: block;
+}
+
+.timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 50%;
+  /* Strictly enforce circle */
+  position: relative;
+  /* Fix for overflow clipping in some browsers */
+  border: 2px solid var(--color-primary, #10b981);
+  /* Match default connector color or theme? Default dot is blue border. */
+  border-color: var(--color-primary, #cbd5e1);
+  /* Use a neutral border for images by default */
+  box-shadow: none;
+  /* Remove the extra shadow that made it look lgr */
+  background: var(--bg-primary, #ffffff);
+}
+
+.timeline-item-active:has(.timeline-item-image) .timeline-item-dot {
+  border-color: var(--color-primary, #10b981);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+  /* Standard active shadow */
+}
+
+/* Adjustment for lgr dots */
+/* Vertical mode shifts */
+.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  left: 0;
+}
+
+.timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-image) .timeline-item-dot {
+  right: -6px;
+  left: auto;
+}
+
+/* Snake Fixes for lgr dots */
+/* Re-center for 24px dot (125 - 12 = 113) */
+.timeline-row .timeline-item:has(.timeline-item-image) .timeline-item-dot,
+.timeline-row .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  margin-top: 113px;
+}
+
+.timeline-row .timeline-item:has(.timeline-item-number) .timeline-item-dot {
+  margin-top: 117px;
+  /* Re-center: 125 - 16 (half 32) */
+}
+
+/* Item Styling */
+.timeline-item-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text-primary, #1f2937);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.timeline-item-time {
+  font-size: 12px;
+  color: var(--text-muted, #6b7280);
+  margin-bottom: 2px;
+  font-family: monospace;
+  font-weight: 500;
+}
+
+.timeline-item-content {
+  min-width: 0;
+  /* CRITICAL for flex child truncation */
+}
+
+.timeline-item-desc {
+  font-size: 13px;
+  color: var(--text-secondary, #4b5563);
+  margin-top: 4px;
+  line-height: 1.5;
+  /* Eclipse Mode */
+  display: -webkit-box !important;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: help;
+  /* Indicate hover capability */
+  transition: all 0.2s;
+  /* Smooth transition if possible (max-height would be better but line-clamp doesn't transition well) */
+}
+
+/* Hover Expansion */
+.timeline-item-title:hover {
+  white-space: normal;
+  overflow: visible;
+  z-index: 50;
+  position: relative;
+  background: rgba(255, 255, 255, 0.9);
+  /* legibility */
+}
+
+.timeline-item-desc:hover {
+  -webkit-line-clamp: unset !important;
+  line-clamp: unset !important;
+  overflow: visible;
+  z-index: 50;
+  position: relative;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  .timeline-item-title {
+    color: var(--text-standard, #f3f4f6);
+  }
+  .timeline-item-desc {
+    color: var(--text-muted, #9ca3af);
+  }
+  .timeline-item-line {
+    background-color: var(--text-secondary, #374151);
+  }
+  .timeline-item-dot {
+    background: var(--bg-primary, #1f2937);
+    border-color: var(--color-primary, #10b981);
+    /* Ensure dot border is visible in dark mode */
+  }
+  /* Fix Dark Mode Dot Backgrounds */
+  .timeline-vertical .timeline-item-dot {
+    background: var(--bg-primary, #1f2937);
+  }
+  .timeline-variant-panel .timeline-item-content {
+    background: var(--bg-primary, #1f2937);
+    border-color: var(--border-default, #374151);
+  }
+  .timeline-variant-panel .timeline-item-content::before {
+    background: var(--bg-primary, #1f2937);
+    border-color: var(--border-default, #374151);
+  }
+  .timeline-marker-number .timeline-item-dot,
+  .timeline-item:has(.timeline-item-number) .timeline-item-dot {
+    background: var(--bg-primary, #1f2937);
+    border-color: var(--color-primary, #10b981);
+  }
+}
+/* Premium Features */
+.timeline-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.timeline-search-header {
+  margin-bottom: 24px;
+  padding: 0 4px;
+}
+
+.timeline-search-input {
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid var(--border-default, #e5e7eb);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.2s ease;
+  background: var(--bg-primary, #f9fafb);
+}
+
+.timeline-search-input:focus {
+  border-color: var(--color-primary, #10b981);
+  background: var(--bg-primary, #ffffff);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+}
+
+.timeline-item-clickable {
+  cursor: pointer;
+}
+
+.timeline-item-clickable:hover {
+  opacity: 0.8;
+}
+
+.timeline-item-clickable:hover .timeline-item-dot {
+  transform: scale(1.3);
+  box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
+}
+
+.timeline-item-pending .timeline-item-line {
+  border-left: 2px dashed var(--color-primary, #cbd5e1);
+  background-color: transparent;
+}
+
+.timeline-item-pending .dot-inner {
+  background: var(--color-primary, #cbd5e1);
+  animation: timeline-pulse-inner 1.5s infinite ease-in-out;
+}
+
+@keyframes timeline-pulse-inner {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.5);
+    opacity: 0.5;
+  }
+}
+.timeline-item.is-active .timeline-item-dot::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  animation: timeline-pulse 2s infinite;
+}
+
+/* Horizontal pending line */
+.timeline-horizontal .timeline-item-pending .timeline-item-line {
+  border-top: 2px dashed var(--color-primary, #cbd5e1);
+  background-color: transparent;
+  height: 0;
+}
+
+/* Fix for centered alternate horizontal */
+.timeline-horizontal.timeline-align-alternate .timeline-item-pending .timeline-item-line {
+  top: 50%;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  --timeline-line-color: var(--color-primary, #10b981);
+  --timeline-line-width: 2px;
+  --timeline-dot-size: 12px;
+  --timeline-dot-color: var(--color-primary, #10b981);
+}
+
+.timeline-container {
+  position: relative;
+  padding: 20px 0;
+  width: 100%;
+}
+
+.timeline-vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.timeline-vertical .timeline-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 80px;
+  padding: 0;
+}
+.timeline-vertical .timeline-item .timeline-dot {
+  position: relative;
+  flex-shrink: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 3px solid var(--timeline-dot-color);
+  background: var(--bg-primary, #ffffff);
+  transition: all 0.3s ease;
+}
+.timeline-vertical .timeline-item .timeline-dot i {
+  font-size: calc(var(--timeline-dot-size) * 0.8);
+}
+.timeline-vertical .timeline-item .timeline-line {
+  position: absolute;
+  left: calc(var(--timeline-dot-size));
+  top: calc(var(--timeline-dot-size) + 3px);
+  bottom: calc(-1 * var(--timeline-dot-size) - 3px);
+  width: var(--timeline-line-width);
+  background: var(--timeline-line-color);
+  z-index: 1;
+}
+.timeline-vertical .timeline-item .timeline-content {
+  flex: 1;
+  padding: 0 24px;
+  margin-top: 4px;
+}
+.timeline-vertical.timeline-align-left .timeline-item {
+  flex-direction: row;
+}
+.timeline-vertical.timeline-align-left .timeline-item .timeline-dot {
+  margin-right: 0;
+}
+.timeline-vertical.timeline-align-left .timeline-item .timeline-line {
+  left: calc(var(--timeline-dot-size));
+  right: auto;
+}
+.timeline-vertical.timeline-align-left .timeline-item .timeline-content {
+  text-align: left;
+  padding-left: 24px;
+  padding-right: 0;
+}
+.timeline-vertical.timeline-align-right .timeline-item {
+  flex-direction: row-reverse;
+}
+.timeline-vertical.timeline-align-right .timeline-item .timeline-dot {
+  margin-left: 0;
+  margin-right: 0;
+}
+.timeline-vertical.timeline-align-right .timeline-item .timeline-line {
+  left: auto;
+  right: calc(var(--timeline-dot-size));
+}
+.timeline-vertical.timeline-align-right .timeline-item .timeline-content {
+  text-align: right;
+  padding-right: 24px;
+  padding-left: 0;
+}
+.timeline-vertical.timeline-align-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.timeline-vertical.timeline-align-center .timeline-item {
+  width: 50%;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.timeline-vertical.timeline-align-center .timeline-item .timeline-dot {
+  position: absolute;
+  left: -12px;
+  margin-right: 0;
+}
+.timeline-vertical.timeline-align-center .timeline-item .timeline-line {
+  position: absolute;
+  left: -2px;
+  right: auto;
+}
+.timeline-vertical.timeline-align-center .timeline-item .timeline-content {
+  text-align: left;
+  padding-left: 24px;
+  padding-right: 0;
+  margin-left: 12px;
+}
+.timeline-vertical.timeline-align-alternate {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item {
+  width: 50%;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item .timeline-dot {
+  position: absolute;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item .timeline-line {
+  position: absolute;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left {
+  flex-direction: row-reverse;
+  align-self: flex-start;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-dot {
+  right: -12px;
+  left: auto;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-content {
+  text-align: right;
+  padding-right: 24px;
+  padding-left: 0;
+  margin-right: 12px;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-left .timeline-line {
+  right: -2px;
+  left: auto;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right {
+  flex-direction: row;
+  align-self: flex-end;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-dot {
+  left: -12px;
+  right: auto;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-content {
+  text-align: left;
+  padding-left: 24px;
+  padding-right: 0;
+  margin-left: 12px;
+}
+.timeline-vertical.timeline-align-alternate .timeline-item.timeline-item-right .timeline-line {
+  left: -2px;
+  right: auto;
+}
+
+.timeline-horizontal {
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 40px 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--timeline-line-color) transparent;
+}
+.timeline-horizontal::-webkit-scrollbar {
+  height: 6px;
+}
+.timeline-horizontal::-webkit-scrollbar-track {
+  background: transparent;
+}
+.timeline-horizontal::-webkit-scrollbar-thumb {
+  background-color: var(--timeline-line-color);
+  border-radius: 20px;
+}
+.timeline-horizontal {
+  scroll-snap-type: x mandatory;
+}
+.timeline-horizontal .timeline-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 150px;
+  padding: 0;
+  flex-shrink: 0;
+  scroll-snap-align: center;
+}
+.timeline-horizontal .timeline-item .timeline-dot {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 3px solid var(--timeline-dot-color);
+  background: var(--bg-primary, #ffffff);
+  transition: all 0.3s ease;
+}
+.timeline-horizontal .timeline-item .timeline-dot i {
+  font-size: calc(var(--timeline-dot-size) * 0.8);
+}
+.timeline-horizontal .timeline-item .timeline-line {
+  position: absolute;
+  left: calc(var(--timeline-dot-size) * 2);
+  right: calc(-100% + var(--timeline-dot-size) * 2);
+  top: calc(var(--timeline-dot-size));
+  height: var(--timeline-line-width);
+  width: auto;
+  background: var(--timeline-line-color);
+  z-index: 1;
+}
+.timeline-horizontal .timeline-item .timeline-content {
+  padding: 16px 12px;
+  max-width: 200px;
+}
+.timeline-horizontal.timeline-align-left .timeline-item, .timeline-horizontal.timeline-align-top .timeline-item {
+  flex-direction: column-reverse;
+}
+.timeline-horizontal.timeline-align-left .timeline-item .timeline-content, .timeline-horizontal.timeline-align-top .timeline-item .timeline-content {
+  text-align: center;
+}
+.timeline-horizontal.timeline-align-right .timeline-item .timeline-content, .timeline-horizontal.timeline-align-bottom .timeline-item .timeline-content {
+  text-align: center;
+}
+.timeline-horizontal.timeline-align-alternate .timeline-item.timeline-item-top {
+  flex-direction: column-reverse;
+}
+.timeline-horizontal.timeline-align-alternate .timeline-item .timeline-content {
+  text-align: center;
+}
+
+.timeline-content {
+  background: var(--bg-primary, #ffffff);
+  border-radius: 8px;
+  border: 1px solid var(--border-default, #e5e7eb);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.timeline-date {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+.timeline-date .timeline-date-text {
+  color: var(--primary-color);
+}
+.timeline-date .timeline-time-text {
+  color: var(--text-secondary);
+}
+
+.timeline-image {
+  margin: -1px -1px 12px -1px;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+}
+.timeline-image img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.timeline-header {
+  margin-bottom: 8px;
+}
+
+.timeline-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #111827);
+  line-height: 1.4;
+}
+
+.timeline-description {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.timeline-custom {
+  margin-top: 12px;
+}
+
+.timeline-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  background: var(--color-danger, #ef4444);
+  color: var(--text-standard, #ffffff);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 10px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.timeline-variant-outlined .timeline-content {
+  background: transparent;
+  border: 2px solid var(--border-default, #e5e7eb);
+  box-shadow: none;
+}
+
+.timeline-variant-filled .timeline-content {
+  background: var(--bg-secondary, #f3f4f6);
+  border: none;
+  box-shadow: none;
+}
+
+.timeline-variant-minimal .timeline-content {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 8px 12px;
+}
+.timeline-variant-minimal .timeline-dot {
+  border-width: 2px !important;
+}
+
+.timeline-variant-dots-only .timeline-content {
+  display: none;
+}
+.timeline-variant-dots-only .timeline-dot {
+  cursor: pointer;
+}
+.timeline-variant-dots-only .timeline-dot:hover {
+  transform: scale(1.2);
+}
+
+.timeline-compact.timeline-vertical .timeline-item {
+  min-height: 50px;
+}
+.timeline-compact.timeline-vertical .timeline-item .timeline-content {
+  padding: 0 16px;
+}
+.timeline-compact.timeline-horizontal .timeline-item {
+  min-width: 100px;
+}
+.timeline-compact.timeline-horizontal .timeline-item .timeline-content {
+  padding: 8px;
+  max-width: 150px;
+}
+.timeline-compact .timeline-content {
+  padding: 8px 12px;
+}
+.timeline-compact .timeline-title {
+  font-size: 14px;
+}
+.timeline-compact .timeline-description {
+  font-size: 12px;
+}
+
+.timeline-item-clickable {
+  cursor: pointer;
+}
+.timeline-item-clickable .timeline-content:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+  border-color: var(--timeline-dot-color);
+}
+.timeline-item-clickable.timeline-item-active .timeline-content {
+  border-color: var(--timeline-dot-color);
+  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
+}
+.timeline-item-clickable.timeline-item-active .timeline-dot {
+  transform: scale(1.2);
+  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
+}
+
+.timeline-animated .timeline-item {
+  opacity: 0;
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+.timeline-animated .timeline-item.timeline-item-visible {
+  opacity: 1;
+}
+.timeline-animated.timeline-vertical .timeline-item {
+  transform: translateX(-30px);
+}
+.timeline-animated.timeline-vertical .timeline-item.timeline-item-right {
+  transform: translateX(30px);
+}
+.timeline-animated.timeline-vertical .timeline-item.timeline-item-visible {
+  transform: translateX(0);
+}
+.timeline-animated.timeline-horizontal .timeline-item {
+  transform: translateY(30px);
+}
+.timeline-animated.timeline-horizontal .timeline-item.timeline-item-top {
+  transform: translateY(-30px);
+}
+.timeline-animated.timeline-horizontal .timeline-item.timeline-item-visible {
+  transform: translateY(0);
+}
+
+.timeline-icon-top.timeline-vertical .timeline-item {
+  align-items: flex-start;
+}
+.timeline-icon-top.timeline-vertical .timeline-item .timeline-dot {
+  margin-top: 0;
+}
+.timeline-icon-top.timeline-vertical .timeline-item .timeline-line {
+  top: calc(var(--timeline-dot-size) + 3px);
+}
+.timeline-icon-top.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot {
+  align-self: flex-start;
+}
+.timeline-icon-top.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot {
+  align-self: flex-start;
+}
+
+.timeline-icon-center.timeline-vertical .timeline-item {
+  align-items: center;
+}
+.timeline-icon-center.timeline-vertical .timeline-item .timeline-dot {
+  margin-top: 0;
+}
+.timeline-icon-center.timeline-vertical .timeline-item .timeline-line {
+  top: 50%;
+  transform: translateY(calc(var(--timeline-dot-size) / 2 + 3px));
+  bottom: calc(-50% - var(--timeline-dot-size) / 2 - 3px);
+}
+.timeline-icon-center.timeline-horizontal .timeline-item .timeline-dot {
+  align-self: center;
+}
+
+.timeline-icon-bottom.timeline-vertical .timeline-item {
+  align-items: flex-start;
+}
+.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-dot {
+  margin-top: auto;
+  align-self: flex-end;
+}
+.timeline-icon-bottom.timeline-vertical .timeline-item .timeline-line {
+  top: auto;
+  bottom: calc(-1 * var(--timeline-dot-size) - 3px);
+  height: calc(100% - var(--timeline-dot-size) - 3px);
+  transform: none;
+}
+.timeline-icon-bottom.timeline-vertical.timeline-align-center .timeline-item .timeline-line {
+  left: -2px;
+  right: auto;
+}
+.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-left .timeline-line {
+  right: -2px;
+  left: auto;
+}
+.timeline-icon-bottom.timeline-vertical.timeline-align-alternate .timeline-item-right .timeline-line {
+  left: -2px;
+  right: auto;
+}
+.timeline-icon-bottom.timeline-horizontal.timeline-align-top .timeline-item .timeline-dot {
+  align-self: flex-end;
+}
+.timeline-icon-bottom.timeline-horizontal.timeline-align-bottom .timeline-item .timeline-dot {
+  align-self: flex-end;
+}
+
+@media (max-width: 768px) {
+  .timeline-horizontal {
+    flex-direction: column;
+    overflow-x: visible;
+  }
+  .timeline-horizontal .timeline-item {
+    min-width: 100%;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .timeline-horizontal .timeline-item .timeline-line {
+    left: calc(var(--timeline-dot-size));
+    top: calc(var(--timeline-dot-size) * 2);
+    bottom: calc(-100% + var(--timeline-dot-size) * 2);
+    right: auto;
+    width: var(--timeline-line-width);
+    height: auto;
+  }
+  .timeline-horizontal .timeline-item .timeline-content {
+    padding: 0 24px;
+    max-width: none;
+    text-align: left !important;
+  }
+  .timeline-vertical.timeline-align-alternate,
+  .timeline-vertical.timeline-align-center {
+    padding-left: 0;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item,
+  .timeline-vertical.timeline-align-center .timeline-item {
+    flex-direction: row !important;
+    transform: none !important;
+    padding-right: 0 !important;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-content,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-content {
+    text-align: left !important;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-line,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-line {
+    left: calc(var(--timeline-dot-size)) !important;
+    right: auto !important;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 24px;
+    align-items: flex-start;
+    min-height: 80px;
+    width: 100%;
+    position: relative;
+  }
+}
+@media (max-width: 768px) and (max-width: 768px) {
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item {
+    display: flex;
+    flex-direction: column;
+    padding-left: 30px;
+  }
+}
+@media (max-width: 768px) {
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-left {
+    align-items: flex-end;
+    text-align: right;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-side.timeline-side-right {
+    align-items: flex-start;
+    text-align: left;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    height: 100%;
+    min-width: 24px;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-line-vertical {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: var(--timeline-line-width);
+    background-color: var(--timeline-line-color);
+    z-index: 0;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-separator .timeline-marker {
+    position: relative;
+    z-index: 1;
+    margin-top: 4px;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    padding: 6px 16px;
+    border-radius: 20px;
+    background: rgba(0, 0, 0, 0.03);
+    margin: 10px 0;
+    display: inline-block;
+    transition: all 0.3s ease;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-balanced-item .timeline-opposite-date:hover,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-balanced-item .timeline-opposite-date:hover {
+    background: rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item {
+    align-items: center;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-icon-center .timeline-balanced-item .timeline-separator .timeline-marker {
+    margin-top: 0;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item {
+    align-items: flex-end;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-icon-bottom .timeline-balanced-item .timeline-separator .timeline-marker {
+    margin-top: auto;
+    margin-bottom: 4px;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator {
+    opacity: 0;
+    transition: all 0.6s ease;
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-left {
+    transform: translateX(-20px);
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-side-right {
+    transform: translateX(20px);
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item .timeline-separator {
+    transform: scale(0.5);
+  }
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,
+  .timeline-vertical.timeline-align-alternate .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-left,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-side-right,
+  .timeline-vertical.timeline-align-center .timeline-item .timeline-animated .timeline-balanced-item.timeline-item-visible .timeline-separator {
+    opacity: 1;
+    transform: none;
+  }
+}
+.timeline-snake-container {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  width: 100%;
+}
+
+.timeline-snake-row {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+.timeline-snake-row.timeline-snake-row-odd {
+  flex-direction: row-reverse;
+}
+.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn {
+  right: auto;
+  left: 0;
+  border-right: none;
+  border-left: 2px solid var(--timeline-line-color);
+  border-radius: 0 0 0 16px;
+}
+
+.timeline-snake-item {
+  flex: 0 0 10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  min-width: 0;
+  padding: 0 10px;
+}
+.timeline-snake-item .timeline-content {
+  margin-top: 12px;
+  text-align: center;
+  font-size: 0.85rem;
+  padding: 8px;
+  width: 100%;
+}
+.timeline-snake-item .timeline-dot {
+  z-index: 2;
+}
+.timeline-snake-item .timeline-line-horizontal {
+  position: absolute;
+  top: calc(var(--timeline-dot-size) + 1px);
+  top: calc(var(--timeline-dot-size));
+  left: 50%;
+  width: 100%;
+  height: var(--timeline-line-width);
+  background-color: var(--timeline-line-color);
+  z-index: 1;
+}
+.timeline-snake-item .timeline-snake-turn {
+  position: absolute;
+  top: calc(var(--timeline-dot-size));
+  right: 0;
+  width: 50%;
+  height: calc(100% + 40px);
+  border-top: var(--timeline-line-width) solid var(--timeline-line-color);
+  border-right: var(--timeline-line-width) solid var(--timeline-line-color);
+  border-radius: 0 50px 50px 0;
+  z-index: 1;
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+.timeline-snake-row.timeline-snake-row-odd .timeline-item .timeline-snake-turn {
+  border-radius: 0 0 0 50px;
+}
+
+:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line,
+:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-line {
+  left: auto;
+  right: 5px;
+}
+:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot,
+:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-dot {
+  left: auto;
+  right: 0;
+}
+:host-context([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details,
+:host([dir=rtl]) .timeline-align-left.timeline-vertical .timeline-item-details {
+  padding-left: 0;
+  padding-right: 48px;
+  text-align: right;
+  align-items: flex-end;
+}
+:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item,
+:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item {
+  flex-direction: row;
+}
+:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line,
+:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-line {
+  right: auto;
+  left: 5px;
+}
+:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot,
+:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-dot {
+  right: auto;
+  left: 0;
+}
+:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details,
+:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item-details {
+  padding-right: 0;
+  padding-left: 48px;
+  text-align: left;
+  align-items: flex-start;
+}
+:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details,
+:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-left .timeline-item-details {
+  padding-right: 0;
+  padding-left: 48px;
+  text-align: left;
+  align-items: flex-start;
+  margin-left: 50%;
+  margin-right: 0;
+}
+:host-context([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details,
+:host([dir=rtl]) .timeline-align-alternate.timeline-vertical .side-right .timeline-item-details {
+  padding-left: 0;
+  padding-right: 48px;
+  text-align: right;
+  align-items: flex-end;
+  margin-left: 0;
+  margin-right: 0;
+  width: 50%;
+}
+:host-context([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot,
+:host([dir=rtl]) .timeline-align-right.timeline-vertical .timeline-item:has(.timeline-item-icon) .timeline-item-dot {
+  right: auto;
+  left: -6px;
+}