/* ShardKeep — roadmap.css
   Vertical timeline with status-colored nodes. */

.timeline {
    position: relative;
    max-width: 820px;
    margin-inline: auto;
    padding-left: 2.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(34, 197, 94, 0.35) 0%,
        rgba(244, 63, 94, 0.4) 40%,
        rgba(139, 92, 246, 0.3) 75%,
        rgba(139, 92, 246, 0.1) 100%);
    border-radius: 2px;
}

.tl-group {
    position: relative;
    margin-bottom: var(--sp-8);
}
.tl-group__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    margin-left: -2.5rem;
    padding-left: 2.5rem;
    position: relative;
}
.tl-group__head::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 50%;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--ink-1);
    border: 3px solid;
    transform: translateY(-50%);
    z-index: 2;
    box-shadow: 0 0 14px currentColor;
}
.tl-group--shipped .tl-group__head { color: #22c55e; }
.tl-group--shipped .tl-group__head::before { border-color: #22c55e; }
.tl-group--active .tl-group__head { color: var(--rose); }
.tl-group--active .tl-group__head::before { border-color: var(--rose); background: var(--rose); }
.tl-group--planned .tl-group__head { color: var(--violet); }
.tl-group--planned .tl-group__head::before { border-color: var(--violet); }
.tl-group--future .tl-group__head { color: var(--cyan); }
.tl-group--future .tl-group__head::before { border-color: var(--cyan); }

.tl-group__head h2 {
    font-size: var(--fs-h3);
    color: var(--text-1);
    margin: 0;
}
.tl-badge {
    padding: 0.3em 0.8em;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: currentColor;
    border: 1px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.tl-items { display: grid; gap: var(--sp-4); }
.tl-item {
    position: relative;
    padding: var(--sp-5);
    background: rgba(14, 12, 36, 0.55);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    transition: border-color var(--dur-2), transform var(--dur-2);
}
.tl-item:hover { border-color: var(--line-strong); transform: translateX(4px); }
.tl-item::before {
    content: '';
    position: absolute;
    left: -2.15rem; top: 1.4rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 8px currentColor;
}
.tl-group--shipped .tl-item::before { background: #22c55e; color: #22c55e; }
.tl-group--active  .tl-item::before { background: var(--rose); color: var(--rose); animation: pulse 2s infinite; }
.tl-group--planned .tl-item::before { background: var(--violet); color: var(--violet); }
.tl-group--future  .tl-item::before { background: var(--cyan); color: var(--cyan); }

.tl-item h3 {
    font-size: var(--fs-h4);
    margin-bottom: var(--sp-2);
    color: var(--text-1);
}
.tl-item p {
    color: var(--text-3);
    font-size: var(--fs-sm);
    margin: 0;
    max-width: none;
}
.tl-item__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: var(--sp-3);
    letter-spacing: 0.05em;
}