.dl-unit-grid {
  display: grid;
  gap: var(--dl-space-3);
}

.dl-unit-grid__dots {
  display: grid;
  grid-template-columns: repeat(var(--unit-cols, 25), minmax(0, 1fr));
  gap: 4px;
  max-inline-size: 36rem;
}

.dl-unit-grid__dot {
  display: block;
  aspect-ratio: 1;
  min-inline-size: 6px;
  border-radius: 50%;
}

.dl-unit-grid__legend .dl-unit-grid__dot {
  display: inline-block;
  inline-size: 0.625rem;
  vertical-align: -1px;
}

.dl-unit-grid__dot.is-g1 {
  background: var(--dl-data-1);
}

.dl-unit-grid__dot.is-g2 {
  box-shadow: inset 0 0 0 1.5px var(--dl-ink-faint);
}

.dl-unit-grid__dot.is-g3 {
  background: var(--dl-data-4);
}

/* A dot not reached yet by a story entry: a faint placeholder, so the whole grid's size is seen from the start. */
.dl-unit-grid__dot.is-off {
  background: var(--dl-surface-sunken);
  box-shadow: none;
}

.dl-unit-grid__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-space-1) var(--dl-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dl-ink-muted);
  font-size: var(--dl-text-xs);
}

.dl-unit-grid__legend strong {
  color: var(--dl-ink);
  font-variant-numeric: tabular-nums;
}

.dl-unit-grid__per {
  color: var(--dl-ink-faint);
}

.dl-demo .dl-unit-grid-demo {
  inline-size: 100%;
  box-sizing: border-box;
  max-width: var(--dl-content-max);
  margin: 0 auto;
  padding: var(--dl-space-7) var(--dl-space-5);
  display: grid;
  gap: var(--dl-space-2);
}

.dl-unit-grid-demo__title {
  margin: 0;
  font: var(--dl-weight-strong) var(--dl-text-md) / 1.3 var(--dl-font-head);
  color: var(--dl-ink);
}

@media (prefers-reduced-motion: reduce) {
  .dl-unit-grid * { transition: none; }
}