/* A summary in numbers: tiles on the page's paper, the number large over its label, and a sheet of the same paper for what follows them. */
.ds-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: var(--ds-space-3);
  margin: 0;
}

.ds-stat,
.ds-stat-sheet {
  border-radius: var(--ds-radius-xl);
  background: var(--ds-bg-pure);
}

.ds-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--ds-space-1);
  min-inline-size: 0;
  padding: var(--ds-space-3) var(--ds-space-4);
}

/* 20 px in medium, in px at every width: the 2xl semibold read as a headline at the wide screen's 19 px root, the large type
   he turned down in the panel's numbers (item 25). The ticket's clock has the same size. */
.ds-stat__value {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 20px;
  font-weight: var(--ds-weight-medium);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--ds-text);
}

.ds-stat__label { font-size: 13px; line-height: 1.3; color: var(--ds-text-muted); }

.ds-stat-sheet { padding: var(--ds-space-1) var(--ds-space-4); }
.ds-stat-sheet > .ds-list { margin-inline: calc(-1 * var(--ds-space-2)); inline-size: auto; }

/* A tile that opens what it counts: the link covers the tile, the hover a step of the fill, the focus the ring. */
.ds-stat--link { position: relative; }
.ds-stat__link { color: inherit; text-decoration: none; }
.ds-stat__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ds-radius-xl); }
.ds-stat--link:has(.ds-stat__link:focus-visible) { outline: 2px solid var(--ds-focus-ring); outline-offset: 0; }
.ds-stat__link:focus-visible { outline: none; }
@media (any-hover: hover) {
  .ds-stat--link:hover { background: var(--ds-hover); }
}