/* ============================================================
   鹰牛官网 · /roadmap 开发路线图页（垂直时间轴版式）
   一条主线贯穿：已交付(绿) → 进行中(琥珀，脉冲) → 规划中(蓝)，
   节点卡片挂右侧，组间章标签。复用 hn-* 组件与 .adv-hero。
   ============================================================ */

/* ---------- 时间轴容器：左侧主轴线 ---------- */
.rm-tl {
    position: relative;
    max-width: 820px;
    margin: 10px auto 0;
    padding-left: 40px;
}
.rm-tl::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--hn-green) 0%,
        var(--hn-green) 55%,
        #f59e0b 72%,
        #3b82f6 100%);
    opacity: .45;
}

/* ---------- 分组章标签 ---------- */
.rm-tl-group { margin: 38px 0 18px; position: relative; }
.rm-tl-group:first-child { margin-top: 0; }

/* ---------- 状态徽章（章标签 / 节点小徽章共用配色） ---------- */
.rm-tl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    border: 1px solid;
    background: rgba(255, 255, 255, .85);
}
.rm-tl-chip--sm { padding: 2px 10px; font-size: 11.5px; letter-spacing: 1px; font-weight: 700; }
/* 浅底上的徽章文字用加深版（#34d399/#fbbf24/#7ab5ff 白底不可读） */
.rm-tl-chip--shipped { color: #0a8f74; border-color: rgba(14, 163, 113, .45); }
.rm-tl-chip--doing { color: #b45309; border-color: rgba(180, 83, 9, .4); }
.rm-tl-chip--plan { color: #2563eb; border-color: rgba(59, 130, 246, .45); }

/* ---------- 节点：轴上圆点 + 右侧卡片 ---------- */
.rm-tl-item { position: relative; margin: 0 0 14px; }
.rm-tl-item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hn-card-solid, #17253f);
    border: 2px solid;
}
.rm-tl-item.rm-tl--shipped::before { border-color: var(--hn-green); box-shadow: 0 0 10px rgba(52, 211, 153, .55); }
.rm-tl-item.rm-tl--doing::before {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, .6);
    animation: rm-pulse 1.8s ease-in-out infinite;
}
.rm-tl-item.rm-tl--plan::before { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59, 130, 246, .55); }
@keyframes rm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

/* ---------- 节点卡片 ---------- */
.rm-tl-card { padding: 18px 22px; }
.rm-tl-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rm-tl-when { color: var(--hn-muted); font-size: 12.5px; letter-spacing: .5px; }
.rm-tl-card h3 { margin: 0 0 6px; font-size: 16.5px; line-height: 1.4; }
.rm-tl-card p { margin: 0; color: var(--hn-muted); font-size: 13.5px; line-height: 1.7; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
    .rm-tl { padding-left: 28px; }
    .rm-tl::before { left: 6px; }
    .rm-tl-item::before { left: -28px; width: 10px; height: 10px; }
    .rm-tl-card { padding: 14px 16px; }
    .rm-tl-group { margin: 30px 0 14px; }
}