/* Learning journey: connectors follow each row's height, never its paragraph's end. */
.timeline { min-width: 0; }
.timeline-steps { margin: 0; padding: 0; list-style: none; }
.timeline .time-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; box-sizing: border-box; }
.timeline-steps > .time-row { position: relative; padding-bottom: 28px; }
.timeline-steps > .time-row:last-child { padding-bottom: 0; }
.timeline-steps > .time-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 52px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: var(--merak-warm-border);
    background: color-mix(in srgb, var(--merak-action-primary) 24%, var(--merak-warm-border));
    pointer-events: none;
}
.timeline .time-marker { width: 44px; height: 44px; display: grid; place-items: center; box-sizing: border-box; border-radius: 50%; background: var(--merak-cream); border: 1.5px solid var(--merak-warm-border); color: var(--merak-action-primary); font-weight: 800; line-height: 1; }
.timeline .time-marker.now { border: 3px solid var(--merak-action-primary); background: var(--merak-card-surface); }
.timeline .time-marker.now i { width: 10px; height: 10px; border-radius: 50%; background: var(--merak-action-primary); display: block; }
.timeline .time-marker.done { border-color: var(--merak-proof-gold, var(--merak-gold)); background: var(--merak-proof-gold, var(--merak-gold)); color: var(--merak-icon-ink, var(--merak-text-primary)); }
.timeline .time-marker.later::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--merak-text-secondary); }
.timeline .time-copy { min-width: 0; }
.timeline .time-copy b { display: block; font-family: Newsreader, Georgia, serif; font-weight: 500; font-optical-sizing: auto; font-size: 22px; letter-spacing: -.45px; line-height: 1.2; }
.timeline .time-copy p { margin: 4px 0 0; color: var(--merak-text-secondary); font-size: 15.5px; line-height: 1.5; }
.timeline .time-all { margin-top: 24px; padding-top: 18px; border-top: 1.5px solid var(--merak-warm-border); }
