/* ==========================================================================
   .tp-pagination — P1.F2.T3
   ©2026 Vexstorm Studios – All Rights Reserved

   The explorer, the audit viewer, and every listing use this. It is a <nav>
   with an aria-label in the template, and the current page carries
   aria-current="page".

   Variants   --compact
   Elements   __list  __item  __link  __ellipsis  __status  __page-size
   States     :hover  :active  :focus-visible  :disabled  aria-current

   ACC-006 is the constraint that shapes it: page links are the classic place
   where targets end up 18px square and 2px apart. Every link here is at least
   --tp-space-target-min in both axes and separated by a real gap, and the
   whole strip wraps rather than overflowing at 320px.
   ========================================================================== */

.tp-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tp-space-4);
  padding-block: var(--tp-space-4);
}

/* "Showing 21–40 of 312 observations." Always present: a pager without a total
   makes the user guess how much data exists, and guessing about how much
   evidence there is, is exactly what this product exists to prevent. */
.tp-pagination__status {
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
  font-variant-numeric: tabular-nums;
}

.tp-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-1);
}

.tp-pagination__item {
  display: flex;
}

.tp-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-space-1);
  min-width: var(--tp-space-8);
  min-height: var(--tp-space-8);
  padding: var(--tp-space-1) var(--tp-space-3);
  border: var(--tp-border-width-hairline) solid transparent;
  border-radius: var(--tp-radius-md);
  color: var(--tp-color-text-secondary);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tp-motion-duration-fast)
    var(--tp-motion-ease-standard);
}

.tp-pagination__link:hover {
  background-color: var(--tp-color-surface-sunken);
  color: var(--tp-color-text-primary);
}

.tp-pagination__link:active {
  background-color: var(--tp-color-accent-subtle);
}

/* The first and last pages disable their previous/next control rather than
   removing it, so the strip does not change width as the user pages through
   and the controls do not move under the cursor. */
.tp-pagination__link:disabled,
.tp-pagination__link[aria-disabled="true"] {
  opacity: var(--tp-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
  color: var(--tp-color-text-muted);
}

.tp-pagination__link[aria-current="page"] {
  background-color: var(--tp-color-accent-default);
  border-color: var(--tp-color-accent-default);
  color: var(--tp-color-text-on-accent);
  font-weight: var(--tp-weight-bold);
}

.tp-pagination__link:focus-visible {
  position: relative;
  z-index: var(--tp-z-dropdown);
}

.tp-pagination__link-icon {
  width: var(--tp-space-icon);
  height: var(--tp-space-icon);
  flex: none;
}

/* The gap in a long page range. Presentational only, and marked aria-hidden in
   the template so it is not announced as a page. */
.tp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tp-space-target-min);
  min-height: var(--tp-space-8);
  padding-inline: var(--tp-space-1);
  color: var(--tp-color-text-muted);
}

/* The rows-per-page control, a labelled <select> from select.css. */
.tp-pagination__page-size {
  display: flex;
  align-items: center;
  gap: var(--tp-space-2);
  color: var(--tp-color-text-muted);
  font-size: var(--tp-text-sm);
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.tp-pagination--compact .tp-pagination__link {
  min-width: var(--tp-space-7);
  min-height: var(--tp-space-7);
  padding-inline: var(--tp-space-2);
}

/* At the narrowest width the status line goes above the controls rather than
   beside them, and both stay full width. */
@media (max-width: 30rem) {
  .tp-pagination {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tp-space-3);
  }

  .tp-pagination__list {
    justify-content: center;
  }
}