@layer components {

:root{
  /* Pagination tokens (override per page if needed) */
  --pg-size: 36px;
  --pg-radius: 12px;
  --pg-gap: 6px;
}

/*
  Pagination is treated as a UI control (global component), not a page skin.
  Keep selectors low-specificity so page CSS can adjust layout without re-skinning.
*/

:where(.board-pagination, .actors-pagination, .pagination){
  display:flex;
  justify-content:center;
  align-items:center;
  gap: var(--pg-gap);
  flex-wrap: wrap;
}

:where(.page-link){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--pg-size);
  height: var(--pg-size);
  border-radius: var(--pg-radius);
  border: 1px solid var(--bar-border, var(--line));
  background: var(--bar-bg, var(--surface));
  box-shadow: var(--shadow-xs);
  font-weight: 900;
  text-decoration:none;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

:where(.page-link:hover){
  border-color: color-mix(in oklab, var(--line) 70%, var(--text));
  transform: translateY(-1px);
}

:where(.page-link.active){
  border-color: color-mix(in oklab, var(--line) 55%, var(--text));
  background: color-mix(in oklab, var(--surface) 92%, black);
}

:where(.page-ellipsis){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: var(--pg-size);
  height: var(--pg-size);
  opacity: .6;
  font-weight: 900;
}

}