/* roadmap-v1 component styles. Tokens: cf-tokens + cf-tokens-roadmap. Motion owns motion. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cf-roadmap { padding-block: 0 var(--cf-section-y); }

.cf-roadmap__trail {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--cf-trail-measure);
  display: grid;
  gap: var(--cf-trail-gap);
}

.cf-bubble {
  position: relative;
  display: grid;
  grid-template-columns: var(--cf-bubble-index-size) 1fr;
  column-gap: var(--cf-bubble-col-gap);
  align-items: start;
}

.cf-bubble__index {
  position: relative;
  z-index: 1;
  width: var(--cf-bubble-index-size);
  height: var(--cf-bubble-index-size);
  display: grid;
  place-items: center;
  background: var(--cf-bubble-index-bg);
  border: 1px solid var(--cf-bubble-index-border);
  border-radius: var(--cf-radius);
  font: 500 0.8125rem/1 var(--cf-font-mono);
  color: var(--cf-bubble-index-color);
}

.cf-bubble__content {
  background: var(--cf-bubble-bg);
  border: 1px solid var(--cf-bubble-border);
  border-radius: var(--cf-bubble-radius);
  padding: var(--cf-bubble-pad);
}

.cf-bubble__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-space-2) var(--cf-space-3);
  margin-bottom: var(--cf-space-2);
}

.cf-bubble__title {
  margin: 0;
  font-family: var(--cf-font-display);
  font-size: var(--cf-fs-h3);
  font-weight: var(--cf-fw-heading);
  line-height: var(--cf-lh-h3);
  color: var(--cf-text-strong);
}

.cf-bubble__status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cf-space-2); }

.cf-bubble__body {
  margin: 0;
  max-width: var(--cf-measure-read);
  font-size: var(--cf-fs-body-read);
  line-height: var(--cf-lh-read);
  color: var(--cf-text);
}

.cf-bubble__note {
  margin: var(--cf-space-3) 0 0;
  padding-top: var(--cf-space-3);
  border-top: 1px solid var(--cf-line);
  max-width: var(--cf-measure-read);
  font-size: var(--cf-fs-small);
  line-height: var(--cf-lh-body);
  color: var(--cf-text-muted);
}

.cf-status {
  display: inline-flex;
  align-items: center;
  height: var(--cf-status-h);
  padding-inline: var(--cf-status-pad-x);
  border: 1px solid transparent;
  border-radius: var(--cf-radius-pill);
  font: 500 var(--cf-status-fs)/1 var(--cf-font-mono);
  letter-spacing: var(--cf-status-ls);
  text-transform: uppercase;
  white-space: nowrap;
}
.cf-status--done        { background: var(--cf-status-done-bg);     border-color: var(--cf-status-done-border);     color: var(--cf-status-done-text); }
.cf-status--in-progress { background: var(--cf-status-progress-bg); border-color: var(--cf-status-progress-border); color: var(--cf-status-progress-text); }
.cf-status--ongoing     { background: var(--cf-status-ongoing-bg);  border-color: var(--cf-status-ongoing-border);  color: var(--cf-status-ongoing-text); }
.cf-status--soft        { background: var(--cf-status-soft-bg);     border-color: var(--cf-status-soft-border);     color: var(--cf-status-soft-text); border-style: dashed; }

.cf-bubble:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--cf-bubble-index-size) / 2);
  top: var(--cf-bubble-index-size);
  bottom: calc(-1 * var(--cf-trail-gap));
  width: var(--cf-trail-line-width);
  transform: translateX(-50%);
  background: var(--cf-trail-line);
  opacity: var(--cf-trail-line-opacity);
  pointer-events: none;
}

.follow-micro {
  margin-top: 8px;
  font-size: var(--cf-fs-micro);
  font-weight: var(--cf-fw-light);
  line-height: 1.6;
  color: var(--cf-text-micro);
}

.page-header--roadmap {
  padding-top: var(--cf-hero-top);
  padding-bottom: var(--cf-space-12);
  background-image:
    radial-gradient(circle, var(--cf-grid) 1px, transparent 1.5px);
  background-size: var(--cf-grid-cell) var(--cf-grid-cell);
  background-color: var(--cf-bg);
}
@media (min-width: 768px) {
  .page-header--roadmap { padding-top: var(--cf-hero-top-md); }
  .cf-roadmap__trail { gap: var(--cf-trail-gap-md); }
  .cf-bubble { column-gap: var(--cf-bubble-col-gap-md); }
  .cf-bubble__content { padding: var(--cf-bubble-pad-md); }
  .cf-bubble:not(:last-child)::before { bottom: calc(-1 * var(--cf-trail-gap-md)); }
}

@media (forced-colors: active) {
  .cf-status { border-color: CanvasText; }
  .cf-bubble:not(:last-child)::before { background: CanvasText; }
}

/* 2026-10-27 founder unlock + philanthropic amend */
/* Achievement beats (layout spec sec 2.1): quieter than status pills, reveal with their bubble */
.cf-bubble__beats {
  list-style: none; margin: var(--cf-space-3) 0 0; padding: 0;
  display: grid; gap: var(--cf-space-2);
  max-width: var(--cf-measure-read);
}
.cf-bubble__beats li {
  position: relative; padding-left: var(--cf-space-4);
  font-size: var(--cf-fs-small); line-height: var(--cf-lh-body);
  color: var(--cf-text-soft);
}
.cf-bubble__beats li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cf-accent-dim);
}

/* Tracks row 05 model tracks: chip + label rows, override .cf-index-list li grid */
.cf-model-tracks { list-style: none; margin: var(--cf-space-3) 0 0; padding: 0; display: grid; gap: var(--cf-space-2); }
.cf-index-list .cf-model-tracks li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--cf-space-2) var(--cf-space-3);
  padding-block: 0; border-top: 0;
  font-size: var(--cf-fs-small); color: var(--cf-text-soft);
}