/* Pagination — Signals page (SIGNALS.md §8 / SIGNALS_SPEC §24).
 *
 * The page indicator + Prev / Next buttons on the left, a compact page-size
 * SegmentedControl on the right. Colour, type, spacing, radius and motion
 * come only from tokens.css custom properties: no literals here (transparent,
 * currentColor, inherit are allowed). The SegmentedControl component supplies
 * the actual row-size strip so this file is purely layout glue. */

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-small);
}

.pagination-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pagination-indicator {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pagination-prev,
.pagination-next {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-small);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.pagination-prev:hover,
.pagination-next:hover {
  color: var(--ink);
  border-color: var(--panel-border-strong);
  background: var(--panel-hover);
}

.pagination-prev:disabled,
.pagination-next:disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination-prev:disabled:hover,
.pagination-next:disabled:hover {
  color: var(--ink-2);
  border-color: var(--border);
  background: var(--surface-2);
}

.pagination-prev:focus-visible,
.pagination-next:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.pagination-page {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--fs-small);
}

.pagination-page-input {
  width: 3.5em;
  appearance: textfield;
  -moz-appearance: textfield;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

.pagination-page-input::-webkit-outer-spin-button,
.pagination-page-input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.pagination-page-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.pagination-of {
  color: var(--muted);
}

.pagination-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.pagination-size-label {
  color: var(--muted);
  font-size: var(--fs-small);
}

/* ---- phone (MOBILE_PLAN.md P6 / §3.5) -------------------------------------
   Two rows: `[‹ Prev]  Page 3 of 12 · 1,204  [Next ›]` on top (the whole
   .pagination-left cluster takes the first row) and the page-size strip
   below it. Every interactive target is the 44px --hit-min, and the page
   input is a 16px text control so iOS does not zoom the page on focus
   (§2.10 — there is no 16px type token; tokens.css is frozen after F1).
   The empty .pagination-right spacer is hidden; it only exists to push the
   size strip right on desktop. */

@media (max-width: 767.98px) {
  .pagination {
    gap: var(--space-2);
  }

  .pagination-left {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .pagination-right {
    display: none;
  }

  .pagination-size-label {
    flex: 0 1 auto;
    align-self: center;
  }

  .pagination-size {
    flex: 1 1 auto;
    min-width: 0;
  }

  .pagination-prev,
  .pagination-next {
    min-height: var(--hit-min);
    min-width: var(--hit-min);
  }

  .pagination-page-input {
    font-size: 16px;
    min-height: var(--hit-min);
  }
}