/* The home page's roadmap (28.10): one line to scroll sideways - started,
   launched, now, next - opening on "now" (web/roadmap.js). Without script it
   is still a list that scrolls. */

.rm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rm-head h2 { max-width: 640px; }
.rm-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rm-nav [data-go] { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-3); font: 500 13.5px/1 var(--sans); cursor: pointer;
  transition: color .25s, border-color .25s, background .25s; }
.rm-nav [data-go][aria-selected="true"] { color: var(--ink); border-color: #45454e; background: rgba(255, 255, 255, .05); }
.rm-arrows { display: inline-flex; gap: 6px; margin-left: 8px; }
.rm-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent;
  color: var(--ink-2); font-size: 15px; cursor: pointer; }
.rm-arrow:hover, .rm-nav [data-go]:hover { border-color: #4a4a54; color: var(--ink); }

.rm-track { --rm-inset: max(72px, calc((100vw - 1180px) / 2 + 24px));
  position: relative; margin-top: 40px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rm-inset);
  scrollbar-width: none; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.rm-track::-webkit-scrollbar { display: none; }
.rm-track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rm-track.is-drag * { user-select: none; }
.rm-list { list-style: none; display: flex; align-items: stretch; gap: 14px; margin: 0;
  padding: 34px max(24px, calc((100vw - 1180px) / 2)) 8px; position: relative; width: max-content; }
/* the line the dots sit on */
.rm-list::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px;
  background: linear-gradient(90deg, var(--line-2), #3a3a42 60%, transparent); }

.rm-card, .rm-ch { position: relative; scroll-snap-align: start; flex: none; }
.rm-card { width: 250px; padding: 18px 18px 20px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg-2); transition: border-color .3s, transform .3s; }
.rm-card:hover { border-color: #34343c; transform: translateY(-2px); }
.rm-card::before { content: ""; position: absolute; left: 22px; top: -25px; width: 9px; height: 9px; border-radius: 50%;
  background: #4a4a52; }
.rm-card time { display: block; font: 12px/1 var(--mono); color: var(--ink-4); margin-bottom: 12px; }
.rm-card b { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.rm-card p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.rm-card.now { border-color: rgba(182, 217, 106, .35); background: linear-gradient(180deg, rgba(182, 217, 106, .07), var(--bg-2) 60%); }
.rm-card.now::before { background: var(--green); box-shadow: 0 0 0 4px rgba(182, 217, 106, .18); }
.rm-card.now time { color: var(--green); }
.rm-card.next { border-style: dashed; border-color: var(--line-2); background: transparent; }
.rm-card.next::before { background: transparent; border: 1px solid #55555e; }

.rm-ch { width: 150px; padding: 18px 4px 0 0; }
.rm-ch::before { content: ""; position: absolute; left: 0; top: -27px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid #5a5a64; }
.rm-ch span { display: block; font-weight: 650; font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.rm-ch small { display: block; margin-top: 6px; font: 12px/1.3 var(--mono); color: var(--ink-4); }
.rm-ch.now::before { border-color: var(--green); }
.rm-ch.now span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 860px) {
  .rm-card { width: 230px; }
  .rm-arrows { display: none; }
  .rm-track { --rm-inset: 20px; -webkit-mask-image: none; mask-image: none; }
}