/* The pager every long list shares (shared/_pagination): "Showing 1–25 of
   80" on the left, First, Prev, nearby page numbers, Next and Last in the
   middle, and the 25 or 50 rows choice on the right. On a phone the numbers
   give way to a page box, and the three parts stack. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-base-300);
  font-size: 0.875rem;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}

.pager__showing { margin: 0; }

.pager__moves,
.pager__numbers,
.pager__sizes {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pager__move,
.pager__number,
.pager__size,
.pager__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--color-base-content);
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Plain text, not flex, so the space in "‹ Prev" stays put. */
.pager__move {
  display: inline-block;
  line-height: 2rem;
}

a.pager__move:hover,
a.pager__number:hover,
a.pager__size:hover,
.pager__go:hover {
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.pager__move[aria-disabled] {
  color: color-mix(in oklab, var(--color-base-content) 35%, transparent);
  cursor: default;
}

.pager__number--current,
.pager__size--current {
  color: var(--color-primary-content);
  background: var(--color-primary);
}

.pager__jump {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
}

.pager__box {
  width: 3.5rem;
  min-height: 2rem;
  padding: 0 0.25rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .pager {
    flex-direction: column;
    justify-content: center;
    padding-inline: 0;
  }

  .pager__numbers,
  .pager__word,
  .pager__go { display: none; }

  .pager__jump { display: flex; }

  .pager__move { padding: 0 0.375rem; }
}