/*
 * .pagination — index-page pager. Style Pagy/Kaminari output or hand-render.
 * Structure: nav.pagination > a/span.pagination__item (+ --current / --gap / [aria-disabled])
 */
@layer components {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u-pad) / 4);
  }
  .pagination__item {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    padding-inline: calc(var(--u-pad) / 2);
    background: var(--canvas);
    color: var(--ink);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-ui);
    font-size: var(--font-size-0);
    text-decoration: none;
    cursor: pointer;
  }
  .pagination__item:hover { background: color-mix(in oklab, var(--canvas), var(--ink) 6%); }
  .pagination__item--current {
    background: var(--brand-strong);   /* teal-800 + white = AAA */
    border-color: var(--brand-strong);
    color: #fff;
    font-weight: var(--font-weight-8);
  }
  .pagination__item--gap { border: none; background: none; cursor: default; }
  .pagination__item[aria-disabled="true"],
  .pagination__item:disabled { opacity: 0.5; pointer-events: none; }
}