/* ExperimentTimeline Component Styles */

.mint-timeline {
  display: flex;
  flex-direction: column;
}

.mint-timeline--horizontal {
  flex-direction: row;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

/* Step item. The status rail runs through the icon centres (3d); the card
   padding and icon size per size variant place it. */
.mint-timeline__step {
  position: relative;
  --_tl-pad: 0.75rem;
  --_tl-icon: 2rem;
}

.mint-timeline__step:has(> .mint-timeline__card--sm) {
  --_tl-pad: 0.5rem;
  --_tl-icon: 1.5rem;
}

.mint-timeline__step:has(> .mint-timeline__card--lg) {
  --_tl-pad: 1rem;
  --_tl-icon: 2.5rem;
}

.mint-timeline--horizontal .mint-timeline__step {
  flex-shrink: 0;
}

/* Connector line: 1px, primary once the step is done. */
.mint-timeline__connector {
  position: absolute;
  background-color: var(--border-color);
}

.mint-timeline__step:has(> .mint-timeline__card--completed) > .mint-timeline__connector {
  background-color: var(--color-primary);
}

.mint-timeline--vertical .mint-timeline__connector {
  left: calc(var(--_tl-pad) + 1px + var(--_tl-icon) / 2);
  top: calc(var(--_tl-pad) + 1px + var(--_tl-icon));
  bottom: calc(-1 * (var(--_tl-pad) + 1px));
  width: 1px;
  transform: translateX(-50%);
}

.mint-timeline--horizontal .mint-timeline__connector {
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2rem;
  transform: translateY(-50%);
}

/* Step card */
.mint-timeline__card {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.mint-timeline--horizontal .mint-timeline__card {
  min-width: 180px;
}

.mint-timeline--vertical .mint-timeline__card {
  width: 100%;
}

.mint-timeline__card--sm {
  padding: 0.5rem;
}

.mint-timeline__card--md {
  padding: 0.75rem;
}

.mint-timeline__card--lg {
  padding: 1rem;
}

.mint-timeline__card--dragging {
  opacity: 0.5;
}

.mint-timeline__card--drag-over {
  box-shadow: var(--focus-ring);
}

.mint-timeline__card--editable {
  cursor: grab;
}

.mint-timeline__card--editable:active {
  cursor: grabbing;
}

/* Status lives on the rail icon; only the running step is a card (3d). */
.mint-timeline__card--in-progress {
  background-color: var(--bg-card);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
}

/* Vertical: the running step's rail icon stays on the rail, outside its card.
   The box is painted by ::before starting one gap past the icon, so the icon
   (and the connector math above) keep their place (3d). */
.mint-timeline--vertical .mint-timeline__card--in-progress {
  background-color: transparent;
  border-color: transparent;
  isolation: isolate;
}

.mint-timeline--vertical .mint-timeline__card--in-progress::before {
  content: '';
  position: absolute;
  inset: -1px -1px -1px calc(var(--_tl-pad) * 2 + var(--_tl-icon));
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--border-color));
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
}

.mint-timeline--vertical .mint-timeline__card--in-progress > .mint-timeline__header {
  gap: calc(var(--_tl-pad) * 2);
}

.mint-timeline--vertical .mint-timeline__card--in-progress > .mint-timeline__expanded {
  margin-left: calc(var(--_tl-pad) * 2 + var(--_tl-icon));
}

/* Header */
.mint-timeline__header {
  display: flex;
  align-items: center;
}

.mint-timeline__header--sm {
  gap: 0.5rem;
}

.mint-timeline__header--md {
  gap: 0.75rem;
}

.mint-timeline__header--lg {
  gap: 1rem;
}

/* Icon */
.mint-timeline__icon {
  box-sizing: border-box;
  flex-shrink: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-timeline__icon--sm {
  width: 1.5rem;
  height: 1.5rem;
}

.mint-timeline__icon--md {
  width: 2rem;
  height: 2rem;
}

.mint-timeline__icon--lg {
  width: 2.5rem;
  height: 2.5rem;
}

.mint-timeline__icon svg {
  stroke: currentColor;
}

.mint-timeline__icon--sm svg {
  width: 0.75rem;
  height: 0.75rem;
}

.mint-timeline__icon--md svg {
  width: 1rem;
  height: 1rem;
}

.mint-timeline__icon--lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Rail icon by status: upcoming = strong ring, running = primary ring,
   done = primary fill, failed = error ring, skipped = dashed ring. */
.mint-timeline__icon--pending,
.mint-timeline__icon--skipped {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--_control-border-strong);
  color: var(--text-secondary);
}

.mint-timeline__icon--skipped {
  box-shadow: none;
  border: 1.5px dashed var(--_control-border-strong);
}

.mint-timeline__icon--in-progress {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  color: var(--color-primary);
}

.mint-timeline__icon--completed {
  background-color: var(--color-primary);
  color: white;
}

.mint-timeline__icon--failed {
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1.5px var(--mint-error);
  color: var(--_ink-error);
}

.mint-timeline__card--completed .mint-timeline__title,
.mint-timeline__card--skipped .mint-timeline__title {
  color: var(--text-secondary-strong);
  font-weight: 400;
}

.mint-timeline__card--in-progress .mint-timeline__title {
  font-weight: 600;
}

/* Title and meta */
.mint-timeline__content {
  flex: 1;
  min-width: 0;
}

.mint-timeline__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mint-timeline__title {
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mint-timeline__title--sm {
  font-size: 0.75rem;
}

.mint-timeline__title--md {
  font-size: 0.875rem;
}

.mint-timeline__title--lg {
  font-size: 1rem;
}

.mint-timeline__duration {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

.mint-timeline__duration--sm {
  font-size: 0.6875rem;
}

.mint-timeline__type {
  color: var(--text-secondary);
  text-transform: capitalize;
}

.mint-timeline__type--sm {
  font-size: 0.6875rem;
}

.mint-timeline__type--md {
  font-size: 0.75rem;
}

.mint-timeline__type--lg {
  font-size: 0.75rem;
}

/* Running-step progress: 2px primary bar + mono percent (3d). */
.mint-timeline__progress-value {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.mint-timeline__progress {
  height: 2px;
  margin-top: 0.375rem;
  border-radius: 9999px;
  background-color: var(--bg-tertiary);
  overflow: hidden;
}

.mint-timeline__progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mint-timeline__progress-fill {
    transition: none;
  }
}

/* Expand indicator */
.mint-timeline__expand-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.mint-timeline__expand-icon--expanded {
  transform: rotate(180deg);
}

/* Remove button */
.mint-timeline__remove-btn {
  padding: 0.25rem;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s ease;
}

.mint-timeline__remove-btn:hover {
  color: var(--mint-error);
}

.mint-timeline__remove-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Expanded content */
.mint-timeline__expanded {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.mint-timeline__description {
  color: var(--text-secondary);
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

.mint-timeline__description--sm {
  font-size: 0.75rem;
}

.mint-timeline__description--md {
  font-size: 0.875rem;
}

.mint-timeline__parameters {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mint-timeline__param {
  display: flex;
  justify-content: space-between;
}

.mint-timeline__param--sm {
  font-size: 0.6875rem;
}

.mint-timeline__param--md {
  font-size: 0.75rem;
}

.mint-timeline__param-key {
  color: var(--text-muted);
}

.mint-timeline__param-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Status controls */
.mint-timeline__status-controls {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.mint-timeline__status-btn {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  color: var(--text-muted);
}

.mint-timeline__status-btn:hover {
  background-color: var(--bg-tertiary);
}

.mint-timeline__status-btn--active {
  font-weight: 500;
}

.mint-timeline__status-btn--pending.mint-timeline__status-btn--active {
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
}

.mint-timeline__status-btn--in_progress.mint-timeline__status-btn--active,
.mint-timeline__status-btn--completed.mint-timeline__status-btn--active {
  background-color: var(--color-primary-soft);
  color: var(--_ink-primary);
}

.mint-timeline__status-btn--failed.mint-timeline__status-btn--active {
  background-color: var(--mint-error-bg);
  color: var(--_ink-error);
}

.mint-timeline__status-btn--skipped.mint-timeline__status-btn--active {
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

/* Add step button (inline) */
.mint-timeline__add-inline {
  position: absolute;
  left: calc(var(--_tl-pad) + 1px + var(--_tl-icon) / 2);
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 10;
}

.mint-timeline__step:hover .mint-timeline__add-inline,
.mint-timeline__add-inline:focus-visible {
  opacity: 1;
}

.mint-timeline__add-inline:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.mint-timeline__add-inline svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Spacer */
.mint-timeline__spacer--vertical {
  height: 1rem;
}

.mint-timeline__spacer--horizontal {
  width: 2rem;
}

/* Empty / loading / error placeholder host (content comes from EmptyState) */
.mint-timeline__state {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
}

/* Add step button (end) */
.mint-timeline__add-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.mint-timeline__add-end--sm {
  padding: 0.5rem;
}

.mint-timeline__add-end--md {
  padding: 0.75rem;
}

.mint-timeline__add-end--lg {
  padding: 1rem;
}

.mint-timeline--horizontal .mint-timeline__add-end {
  min-width: 120px;
  flex-shrink: 0;
}

.mint-timeline--vertical .mint-timeline__add-end {
  width: 100%;
  margin-top: 1rem;
}

.mint-timeline__add-end:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.mint-timeline__add-end svg {
  width: 1rem;
  height: 1rem;
}

.mint-timeline__add-end-text--sm {
  font-size: 0.75rem;
}

.mint-timeline__add-end-text--md {
  font-size: 0.875rem;
}

.mint-timeline__add-end-text--lg {
  font-size: 1rem;
}