/* ============ ROADMAP PAGE ============ */
.rm-legend { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.rm-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rm-legend .d { width: 11px; height: 11px; border-radius: 50%; }
.rm-legend .d.ship { background: #1e8f54; }
.rm-legend .d.build { background: var(--orange); }
.rm-legend .d.plan { background: var(--blue); }

.tl { max-width: 800px; margin: 56px auto 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 25px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-node { position: relative; padding-left: 74px; padding-bottom: 30px; }
.tl-node:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 13px; top: 2px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--line); z-index: 1; }
.tl-dot .material-icons { font-size: 15px; color: #fff; }
.tl-dot.ship { background: #1e8f54; box-shadow: 0 0 0 2px #bfe6cd; }
.tl-dot.build { background: var(--orange); box-shadow: 0 0 0 2px #f7cdb6; }
.tl-dot.plan { background: var(--blue); box-shadow: 0 0 0 2px #c4d6f7; }

.tl-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s; }
.tl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.tl-status { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; }
.tl-status.ship { color: #1e8f54; background: #e8f6ee; }
.tl-status.build { color: var(--orange); background: var(--orange-wash); }
.tl-status.plan { color: var(--blue); background: var(--blue-wash); }
.tl-card h3 { font-size: 21px; }
.tl-card .when { margin-left: auto; font-size: 12.5px; color: var(--faint); font-weight: 600; font-family: var(--font-display); }
.tl-card p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tl-chips .c { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--mist); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; }
.tl-chips .c .material-icons { font-size: 15px; color: var(--blue); }
.tl-chips.done .c .material-icons { color: #1e8f54; }

.rm-note { max-width: 720px; margin: 44px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }

@media (max-width: 560px) {
  .tl-node { padding-left: 60px; }
  .tl::before { left: 19px; }
  .tl-dot { left: 7px; }
  .tl-card { padding: 20px; }
  .tl-card .when { margin-left: 0; width: 100%; }
}