@layer blocks {
  /* The tools checklist. Shipped items get a ticked box; the rest stay empty.
     Status uses .badge, so it inherits the same fill/outline scheme as task
     due-date chips. Vertical rhythm is .flow; the head is [ repel ] wrapping
     a [ cluster ] so the badge sits at the trailing edge. */
  .roadmap {
    list-style: none;
    max-inline-size: 42.5rem;
    --flow-space: 1.125rem; /* spec 18px */
    --repel-gap: 1.125rem;
    --cluster-space: 1.125rem;
  }

  .roadmap li {
    margin-inline-start: 0;
  }

  .roadmap-head h3 {
    font-size: 1.35rem;
    font-weight: var(--weight-bold);
  }

  .roadmap-box {
    position: relative;
    inline-size: var(--form-control-toggle-size);
    aspect-ratio: 1;
    border: var(--border-width) solid var(--color-text);
    border-radius: var(--radius-s);
  }

  .roadmap li[data-state="live"] .roadmap-box::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-hand);
    font-weight: var(--weight-bold);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--color-decorative);
  }

  .roadmap-desc {
    max-inline-size: 30rem;
    margin-block-start: var(--space-3xs);
    margin-inline-start: calc(var(--form-control-toggle-size) + var(--space-s));
    font-size: 0.98rem;
    color: var(--color-text-muted);
    --color-link: var(--color-accent);
  }
}