/* Shared paginator. Layout only: every button reuses .vbtn/.vb-set/.vb-group/
   .vb-count/.view-bar from app.css, so a paged list looks exactly like the
   existing view bars already on the wire and the video grid. No new colors,
   radii or type sizes are introduced here. */

.pg-host { margin-top: 4px; }
.pg-host[hidden] { display: none; }
.pg-bar { margin-bottom: 0; }

.pg-nums { flex-wrap: wrap; }
.pg-nums .vbtn[disabled] { opacity: .4; cursor: not-allowed; }
.pg-nums .vbtn[disabled]:hover { background: transparent; }
.vb-ellip { display: inline-flex; align-items: center; padding: 0 6px; color: var(--fg-3); font-size: 12.5px; }

/* Touch target size, fixed 26 September 2026: app.css's shared .vbtn rule
   is 36px tall by default and 40px from 1000px up (app.css), both under the
   44px CSS px a pointer target needs. .vbtn is shared by every view bar on
   the site (search filters, the video grid, the markets bar, ...), so its
   rule in app.css stays untouched; this scopes the bump to pagination's own
   two button groups only, both living inside .pg-bar -- the page number/
   prev/next set (.pg-nums) and the per-page picker (.pg-bar's other
   .vb-set, holding the size buttons) -- every one of which is a .vbtn.
   Applied at every width, not only up to 640px: app.css's own desktop
   (1000px+) row was also under 44px (40px), and four more pixels on an
   already comfortably padded button does not change the pager's look, only
   its target size, so there is no reason to carve out a width range that
   stays under 44px. */
.pg-bar .vbtn { min-height: 44px; }

/* Narrow widths: keep every control tappable and drop the button words
   "Previous" / "Next" to their arrows so the row never wraps to three
   lines at 390px. Page number buttons already wrap via .pg-nums above. */
@media (max-width: 480px) {
  .pg-word { display: none; }
  .pg-bar .vb-count { flex: 1 0 100%; margin-left: 0; text-align: left; }
}