/* Numbered pages. Shared by the feed, Companies and the contacts directory.
 *
 * Sized for a thumb first: every target is 40px, which is the smallest thing
 * worth asking somebody to hit on a phone, and the row wraps rather than
 * scrolls sideways when the numbers run out of room. */

.pg-wrap { margin-top: var(--space-5); }

.pg {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.pg-nums {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.pg-num,
.pg-step {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--stage-border);
  border-radius: var(--r-sm);
  background: var(--surface-solid);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.pg-num:hover:not(.is-current),
.pg-step:hover:not(:disabled) {
  border-color: var(--ebid-accent);
  color: var(--text-primary);
}

.pg-num.is-current {
  border-color: var(--ebid-primary);
  background: var(--ebid-primary);
  color: #ffffff;
  cursor: default;
}

.pg-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The arrows carry the meaning on a phone; the words are for everyone else.
   Both stay in the DOM either way, so the accessible name never depends on
   the viewport. */
@media (max-width: 560px) {
  .pg-step-text { display: none; }
  .pg-step { min-width: 40px; padding: 0; }
}

.pg-gap {
  padding: 0 2px;
  color: var(--text-tertiary);
  font-weight: 700;
  user-select: none;
}

/* Said in words as well as drawn, because "page 3 of 29" answers a question
   the buttons only imply — how much is left. */
.pg-of {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
}

@media print {
  .pg-wrap { display: none; }
}