/*
 * States.module.css → the shared "state" part.
 *
 * Ported by scripts/port-css.mjs. Class names are prefixed to survive being
 * flattened out of CSS Modules; design tokens are rewritten to the custom
 * properties theme.json emits. Edit this file, not the original.
 */

.px-state {
  display: grid;
  place-items: center;
  gap: var(--wp--preset--spacing--md);
  min-height: 40svh;
  padding: var(--wp--preset--spacing--huge) var(--wp--custom--gutter);
  text-align: center;
}

.px-state__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg);
}

.px-state__body {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 300;
  color: var(--fg-muted);
  max-width: 46ch;
}

/* ---- Skeletons ---- */

.px-state__skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
}

.px-state__skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--line) 45%, transparent);
  animation: sweep 1.4s infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.px-state__skeleton-text {
  height: 0.8em;
  margin-bottom: 0.5em;
}

/* ---- Route-level loader ---- */

.px-state__route-loader {
  display: grid;
  place-items: center;
  min-height: 60svh;
  padding: var(--wp--preset--spacing--huge) var(--wp--custom--gutter);
}

.px-state__pulse {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  animation: fade 1.4s ease-in-out infinite;
}

@keyframes fade {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* ---- Pagination ----
 * Not from a module: the earliest WordPress pages paged with links, so this is
 * the one piece of archive furniture the port had no original for. Built from
 * the same tokens as the filter bar above it.
 */

.px-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--xs);
  margin-top: var(--wp--preset--spacing--xxxl);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--line);
}

.px-pagination a,
.px-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  transition:
    color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
    border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.px-pagination a:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}

.px-pagination .current {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
}

.px-pagination .dots {
  border-color: transparent;
}