/* Shared pager: home resource list, genre/spec hubs and TV ratings, one look and one
   behavior on all three (user decision 2026-09-30).
   Desktop:  « ‹ [numbered window] › »  with the page status on its own line below.
   Phones:   ‹ 上一页 | page status | 下一页 ›  (numbers and first/last hide).
   The page status opens a small form to jump to any page (assets-src/shared/pager.js).
   Paging is used rarely, so the controls are plain text in the footer-link style (muted,
   --weight-footer-link, no fill or border) and sit a level below the cards; they keep the
   header's small-control size as their tap box. The current page is the accent fill with
   dark text; controls that cannot act fade to --opacity-faint. No item count and no pager
   when there is only one page (user decisions 2026-09-30).

   nav.site-pager
     .site-pager__first / __prev / __next / __last     a | button | span[aria-disabled]
     .site-pager__nums > .site-pager__num              [aria-current="page"] = current
     details.site-pager__jump
       summary.site-pager__status                      第 x / y 页 跳页
       form.site-pager__jump-form                      跳到第 [input] 页 [前往] */
.site-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-gap-controls);
  margin-top: var(--space-gap-cards);
  color: var(--text-muted);
  font-family: var(--font-family-ui);
  font-size: var(--type-control);
  line-height: var(--leading-compact);
  -webkit-font-smoothing: var(--font-smoothing-ui);
  /* Equal-width digits: page buttons in one window stay the same width (1529…1538). */
  font-variant-numeric: tabular-nums;
}
.site-pager__nums {
  display: flex;
  gap: var(--space-gap-controls);
}
.site-pager__btn {
  position: relative;
  box-sizing: border-box;
  min-width: var(--size-header-control);
  height: var(--size-header-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-ui-1);
  margin: 0;
  padding: 0 var(--space-ui-2);
  border: 1px solid transparent;
  border-radius: var(--radius-header-control);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: var(--weight-footer-link);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-duration-base) var(--motion-ease-out),
    background-color var(--motion-duration-base) var(--motion-ease-out),
    border-color var(--motion-duration-base) var(--motion-ease-out);
}
/* Invisible hit area toward 44px tall on phones (the header controls do the same);
   it grows only vertically, so neighbouring buttons never steal each other's taps. */
.site-pager__btn::after {
  content: "";
  position: absolute;
  inset: min(calc(-1 * var(--size-scale-px-2)), calc((var(--size-header-control) - var(--size-tap-target-min)) / 2)) 0;
}
/* Mouse only: on touch screens :hover sticks to the last tapped control, and with no
   resting fill that would leave one box drawn after a tap. */
@media (hover: hover) and (pointer: fine) {
  .site-pager__btn:not([aria-current="page"], .site-pager__go):is(a[href], button:enabled, summary):hover {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
  }
}
.site-pager__btn[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-control);
  cursor: default;
}
.site-pager__btn:disabled,
.site-pager__btn[aria-disabled="true"] {
  opacity: var(--opacity-faint);
  cursor: default;
}
.site-pager__step-label { display: none; }

.site-pager__jump {
  position: relative;
  flex-basis: 100%;
  order: 1;
  text-align: center;
}
.site-pager__status { list-style: none; }
.site-pager__status::-webkit-details-marker { display: none; }
.site-pager__hint { color: var(--accent); }
/* Opens below the status so it never covers the page numbers; focusing its field
   (pager.js) scrolls it into view when the pager sits at the bottom of the screen. */
.site-pager__jump-form {
  position: absolute;
  top: calc(100% + var(--space-gap-controls));
  left: 50%;
  z-index: var(--layer-popover);
  display: flex;
  align-items: center;
  gap: var(--space-gap-controls);
  padding: var(--space-gap-controls);
  border: 1px solid var(--visual-border-medium);
  border-radius: var(--radius-ui-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-menu);
  color: var(--text-secondary);
  white-space: nowrap;
  transform: translateX(-50%);
}
.site-pager__jump-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-ui-1);
  padding-inline-start: var(--space-ui-1);
}
.site-pager__input {
  box-sizing: border-box;
  width: calc(var(--size-header-control) * 1.5);
  height: var(--size-header-control);
  margin: 0;
  padding: 0 var(--space-ui-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-header-control);
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  text-align: center;
  appearance: textfield;
}
.site-pager__input::-webkit-inner-spin-button,
.site-pager__input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.site-pager__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-search-active);
}
.site-pager__go {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--weight-control);
}

@media (max-width: 767px) {
  /* One row: previous at the left edge, next at the right edge, the status centered
     between them whatever the two labels' widths. */
  .site-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .site-pager__first,
  .site-pager__last,
  .site-pager__nums { display: none; }
  .site-pager__step-label { display: inline; }
  .site-pager__prev { grid-area: 1 / 1; justify-self: start; }
  .site-pager__jump { grid-area: 1 / 2; }
  .site-pager__next { grid-area: 1 / 3; justify-self: end; }
  /* iOS focus-zoom fix, see the shared explainer in ui-tokens.css: the field keeps a
     real 16px font, its box is enlarged by --zoom-k-control and scaled back down, and
     the negative margins return its layout footprint to the visual size. */
  .site-pager__input {
    width: calc(var(--size-header-control) * 1.5 * var(--zoom-k-control));
    height: calc(var(--size-header-control) * var(--zoom-k-control));
    padding: 0 calc(var(--space-ui-1) * var(--zoom-k-control));
    border-width: calc(var(--size-scale-px-1) * var(--zoom-k-control));
    border-radius: calc(var(--radius-header-control) * var(--zoom-k-control));
    font-size: var(--zoom-safe-font);
    transform: scale(var(--zoom-inv-control));
    transform-origin: top left;
    margin-right: calc(var(--size-header-control) * 1.5 * (1 - var(--zoom-k-control)));
    margin-bottom: calc(var(--size-header-control) * (1 - var(--zoom-k-control)));
  }
}