.channel-card { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.channel-head { display: flex; align-items: center; gap: var(--space-sm); }
.channel-head > div { min-width: 0; flex: 1; }
.channel-card > p,
.channel-card dd { color: var(--color-muted); font-size: var(--text-sm); }
.channel-data { display: grid; gap: var(--space-xs); padding-block: var(--space-sm); border-block: 1px solid var(--color-line); }
.channel-data div { display: flex; justify-content: space-between; gap: var(--space-md); }
.channel-data dt { font-size: var(--text-sm); font-weight: 600; }
.channel-data dd { text-align: end; }
.channel-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.roadmap-item { position: relative; }
.roadmap-number { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-brand-800); font-size: var(--text-xs); font-weight: 600; }

@media (max-width: 30rem) {
  .channel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .channel-head > .badge {
    grid-column: 2;
    justify-self: start;
  }
}