/* Pagination for long lists (exchange: 12 per page, quests, news archive).
   Build it with pager() in js/lib/ui.js: <nav class="pager" aria-label="Pages"> with Previous,
   page numbers (current one has aria-current="page"), Next. Under 480px only Previous, "3 of 9", Next. */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.pager-btn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-3);
  font-family: var(--font-control);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.pager-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent-hi); }
/* The current page is the raised tile of the segmented track (tabs.css). */
.pager-btn[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--accent) 14%, var(--ink-3)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); font-weight: 600; }
.pager-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.pager-btn .icon { width: 18px; height: 18px; }
.pager-gap { color: var(--text-3); padding: 0 var(--s-1); }
.pager-count { display: none; color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; padding: 0 var(--s-2); }
@media (max-width: 479px) {
  .pager-num, .pager-gap { display: none; }
  .pager-count { display: inline; }
}