/**
 * Behavioral CSS bones for long index discovery. Prototype themes own all color,
 * type, border, and motif choices; this file only preserves access while scrolling.
 */

:where([data-stoa-index]) {
  --stoa-index-sticky-top: 0px;
  --stoa-index-controls-max: 25vh;
  --stoa-index-controls-layer: 20;
}

:where([data-stoa-index-controls]) {
  position: sticky;
  inset-block-start: var(--stoa-index-sticky-top);
  z-index: var(--stoa-index-controls-layer);
  max-block-size: var(--stoa-index-controls-max);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

:where([data-stoa-index-controls] input[type="search"], [data-stoa-index-controls] button) {
  min-block-size: 44px;
}

:where([data-stoa-index-results]) {
  scroll-margin-block-start: calc(var(--stoa-index-sticky-top) + var(--stoa-index-controls-max) + 1rem);
}

:where([data-stoa-index-pagination] ul) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

:where([data-stoa-index-pagination] a, [data-stoa-index-pagination] [aria-current="page"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
}

@media (max-width: 640px) {
  :where([data-stoa-index]) {
    --stoa-index-controls-max: 30svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(html, [data-stoa-index], [data-stoa-index-results]) {
    scroll-behavior: auto !important;
  }
}