/* ============================================================
   .uk-timeline — unified canonical timeline (loaded only on /docs/ui-kit)
   ============================================================
   Replaces two legacy declarations:
     .product-news-timeline + -entry + -timeline-dot + -entry-card
        (product-news.css; /product-news changelog)
     .incident-timeline + .incident-event + .event-dot + .event-content
        (docs.css; /docs/monitoring incident log)

   Slots (BEM-ish):
     .uk-timeline                    root container, owns the rail
       .uk-timeline-item             one event / entry
         .uk-timeline-marker         absolute dot pinned to the rail
         .uk-timeline-card           optional primary-tinted card body
         .uk-timeline-meta           inline row of meta chips
         .uk-timeline-time           timestamp / label (compact flavor)
         .uk-timeline-title          headline
         .uk-timeline-text           supporting paragraph

   Density:
     default      changelog flavor — 40px rail offset, 16px dots, gradient
                  rail, primary-tinted entry card with hover lift.
     --compact    incident-log flavor — narrower rail offset (~24px), 12px
                  dots, neutral rail, no card body, tighter spacing.

   Marker state modifiers (apply on .uk-timeline-item):
     --active     filled primary dot with a soft primary glow (latest /
                  current entry — replaces .product-news-entry:first-child).
     --primary | --info | --success | --warning | --error | --maintenance
                  filled tone-coloured dot. For status / incident timelines.
   ============================================================ */

.uk-timeline {
    position: relative;
    padding-left: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.uk-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        var(--color-primary) 0%,
        rgba(var(--color-primary-rgb), 0.15) 100%);
    border-radius: 1px;
}

.uk-timeline--compact {
    padding-left: var(--space-xl);
    max-width: none;
}

.uk-timeline--compact::before {
    left: 6px;
    top: 0;
    background: var(--color-border);
}

/* ---- Item ---- */
.uk-timeline-item {
    position: relative;
    margin-bottom: var(--space-2xl);
}

.uk-timeline--compact .uk-timeline-item {
    margin-bottom: 0;
    padding: var(--space-md) 0 var(--space-lg) var(--space-lg);
}

/* ---- Marker (absolute-positioned dot) ---- */
.uk-timeline-marker {
    position: absolute;
    left: -40px;
    top: 28px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 2px solid rgba(var(--color-primary-rgb), 0.4);
    z-index: 1;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.uk-timeline--compact .uk-timeline-marker {
    left: -22px;
    top: 20px;
    width: 12px;
    height: 12px;
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

/* Active = latest / current. Filled primary with soft glow. */
.uk-timeline-item--active > .uk-timeline-marker {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 12px var(--color-primary-glow, rgba(var(--color-primary-rgb), 0.4));
}

/* Tone variants — filled coloured dot. Apply on .uk-timeline-item. */
.uk-timeline-item--primary > .uk-timeline-marker     { background: var(--color-primary);     border-color: var(--color-primary); }
.uk-timeline-item--info > .uk-timeline-marker        { background: var(--color-info);        border-color: var(--color-info); }
.uk-timeline-item--success > .uk-timeline-marker     { background: var(--color-success);     border-color: var(--color-success); }
.uk-timeline-item--warning > .uk-timeline-marker     { background: var(--color-warning);     border-color: var(--color-warning); }
.uk-timeline-item--error > .uk-timeline-marker       { background: var(--color-error);       border-color: var(--color-error); }
.uk-timeline-item--maintenance > .uk-timeline-marker { background: var(--color-maintenance); border-color: var(--color-maintenance); }

/* ---- Card body (default density) ---- */
.uk-timeline-card {
    background: rgba(var(--color-primary-rgb), 0.05);
    border: 1px solid rgba(var(--color-primary-rgb), 0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.uk-timeline-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-primary-rgb), 0.4);
    box-shadow: var(--shadow-card-hover-md);
}

/* ---- Meta row + content ---- */
.uk-timeline-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.uk-timeline-time {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.uk-timeline-title {
    font-size: var(--font-2xl);
    font-weight: 700;
    line-height: var(--line-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
}

.uk-timeline-title a {
    color: inherit;
    text-decoration: none;
}

.uk-timeline-title a:hover {
    color: var(--color-primary-light);
}

.uk-timeline-text {
    font-size: var(--font-md);
    color: var(--color-text-secondary);
    line-height: var(--line-relaxed);
    margin: 0;
}

.uk-timeline--compact .uk-timeline-title {
    font-size: var(--font-md);
    margin-bottom: var(--space-xs);
}

.uk-timeline--compact .uk-timeline-text {
    font-size: var(--font-sm);
}