/* Roadmap: what is live today (Now) and what is planned but not built (Next, Later). No dates, no promises.
   Uses the page tokens from style.css only, so it follows the light and dark themes. Green marks what is shipped;
   everything planned stays neutral and dashed. */
.band.roadmap { padding-bottom: clamp(24px, 4vw, 48px); }
.rm-lede { max-width: 60ch; margin-top: var(--s2); color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.55; text-wrap: pretty; }
.rm-board { display: grid; gap: var(--s2); margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 900px) {
  .rm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .rm-now { grid-column: 1 / -1; }
}

.rm-col {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow);
}
.rm-now { background: linear-gradient(var(--accent), var(--accent)) top / 100% 3px no-repeat, var(--surface); }
.rm-next, .rm-later { border-style: dashed; background: transparent; box-shadow: none; }

.rm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); }
.rm-h { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.rm-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
}
.rm-now .rm-tag { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.rm-now .rm-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.rm-list { display: grid; gap: 0; margin-top: var(--s2); }
.rm-list li { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 0 14px 32px; border-top: 1px solid var(--line); }
.rm-list b { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em; line-height: 1.35; }
.rm-list span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 44ch; }
/* The marker: a ringed check for shipped, a dashed empty ring for planned. */
.rm-list li::before {
  content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px dashed var(--conn);
}
.rm-now .rm-list li::before { border: 0; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rm-now .rm-list li::after {
  content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; background: var(--accent);
  -webkit-mask: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  mask: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
@media (min-width: 900px) {
  .rm-now .rm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .rm-now .rm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
}

/* The foot of each card: where to check Now, and the plain "not built" notice for the rest. */
.rm-note { margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
.rm-list { margin-bottom: var(--s2); }
.rm-note b { color: var(--ink); font-weight: 600; }
.rm-note a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-2); transition: text-decoration-color 0.2s; }
.rm-note a:hover { text-decoration-color: currentColor; }