/*
 * PairRail docs (/docs and /docs/*). Requires tokens.css, components.css and pages.css.
 * Doc pages also load legal.css for the contents-beside-the-text layout (.pr-legal).
 */

/* Hub: one plain card per page, grouped like the sidebar. */
.pr-docs-hub { display: grid; gap: var(--space-8); }
.pr-docs-hub__title {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
}
.pr-docs-hub__cards .pr-link-card p { margin: 0; }
@media (min-width: 1024px) {
  .pr-docs-hub__cards { grid-template-columns: repeat(3, 1fr); }
}

/* Sidebar page list: groups are labels, the current page is marked, not coloured. */
.pr-docs-nav ol ol { display: grid; gap: 2px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.pr-docs-nav__group {
  display: block;
  margin-top: var(--space-3);
  padding: 6px 0 2px;
  color: var(--color-ink-muted);
  font-size: var(--type-caption-size);
  font-weight: 500;
}
.pr-docs-nav a[aria-current="page"] { color: var(--color-ink); font-weight: 500; }
.pr-legal__nav .pr-docs-nav + .pr-legal__toc { margin-top: var(--space-5); }
@media (max-width: 1023.98px) {
  /* One column that never grows to fit a code panel or table: those scroll inside themselves. */
  .pr-legal { grid-template-columns: minmax(0, 1fr); }
  /* Narrow: the page list is one short block, not a grid of columns. */
  .pr-docs-nav ol { grid-template-columns: none; }
  .pr-legal__nav .pr-docs-nav + .pr-legal__toc { margin-top: 0; }
}

/* Doc pages are long: a jump (including an old /docs#id link landing here) is instant, not a
   smooth scroll through thousands of pixels. */
html:has(.pr-docs-nav) { scroll-behavior: auto; }