/* 澄观嘉名 · 文章分页（重设计）
   覆盖 article.css 里的旧实现：那版是「一页一个按钮」，47 页铺成四行，
   页码与上一页/下一页混在一排、没有总数也没有跳页，视觉上和列表抢戏。

   基线 article.css 属冻结清单（tests/fixtures/baseline-manifest.txt），不能改，
   所以这份独立成文，由 LegacyStyles 的 extras 在基线之后追加，靠后者胜。
   见 README.md「基线与哈希清单」与 almanac.css / brand.css 的同一做法。 */

.paging{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 16px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line);
}
.paging-info{
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-muted);
  letter-spacing:.02em;white-space:nowrap;
}
.paging-info b{color:var(--chengqing);font-weight:700;font-variant-numeric:tabular-nums}

/* 跳页：窄输入 + 确定，页面很宽时才有意义，移动端整块藏掉 */
.paging-jump{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-muted);
}
.paging-jump input{
  width:54px;height:30px;padding:0 6px;text-align:center;
  border:1px solid var(--line);border-radius:7px;background:var(--paper);
  font-family:var(--font-sans);font-size:13px;color:var(--moxuan);
  font-variant-numeric:tabular-nums;
  transition:border-color .18s ease;
  -moz-appearance:textfield;
}
.paging-jump input::-webkit-outer-spin-button,
.paging-jump input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.paging-jump input::placeholder{color:var(--ink-muted);opacity:.5}
.paging-jump input:focus{border-color:var(--gutongjin);outline:none}
.paging-jump-total{opacity:.7}
.paging-jump button{
  height:30px;padding:0 12px;border-radius:7px;
  border:1px solid var(--line-strong);background:transparent;
  font-family:var(--font-sans);font-size:12.5px;color:var(--chengqing);
  cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.paging-jump button:hover{background:var(--chengqing);border-color:var(--chengqing);color:var(--xuanbai)}

/* 数字行独占一行并居中，上一页/下一页分居两端 */
.paging-pages{
  flex:1 0 100%;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:6px;
}
.page-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:9px;
  font-family:var(--font-sans);font-size:13.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-muted);background:var(--paper);
  border:1px solid var(--line);cursor:pointer;
  transition:transform .18s var(--ease-out),border-color .18s ease,
             color .18s ease,background .18s ease,box-shadow .18s ease;
}
.page-btn:hover:not(:disabled):not(.is-current){
  border-color:var(--gutongjin);color:var(--chengqing);
  transform:translateY(-1px);box-shadow:var(--shadow-sm);
}
.page-btn.is-current{
  background:linear-gradient(160deg,var(--chengqing-light),var(--chengqing));
  color:var(--xuanbai);border-color:transparent;
  font-weight:700;box-shadow:0 4px 14px rgba(43,74,79,.22);
}
.page-btn:disabled{opacity:.38;cursor:not-allowed;background:transparent}
.page-prev,.page-next{
  padding:0 14px;font-size:13px;color:var(--chengqing);
  background:transparent;border-color:var(--line-strong);gap:4px;
}
.page-prev:hover:not(:disabled),.page-next:hover:not(:disabled){color:var(--chengqing)}
.page-gap{
  min-width:20px;text-align:center;user-select:none;
  font-family:var(--font-sans);font-size:13px;color:var(--ink-muted);opacity:.5;
}

@media (max-width:900px){
  .paging{justify-content:center}
}
@media (max-width:640px){
  .paging{gap:10px;margin-top:20px;padding-top:16px}
  .paging-jump{display:none}
  .page-btn{min-width:34px;height:34px;border-radius:8px;font-size:13px}
  .page-prev,.page-next{padding:0 11px;font-size:12.5px}
  .page-gap{min-width:16px}
}