/* Explain: Component styles for timeline items and status badges. - */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    padding-bottom: 2.5rem;
    border-left: 2px solid var(--border-color);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -0.425rem;
    top: 0.25rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 0 4px var(--background-color);
}

.timeline-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.status-success {
    background: rgba(13, 148, 136, 0.1);
    color: var(--accent-hover);
}

.status-error {
    background: rgba(180, 35, 24, 0.1);
    color: #b42318;
}