/* /docs · page scoped CSS (prefix pg-docs-). Spacing between shared blocks, the guide filter row and the four column guide grid. */

/* the hero meta line sits one step under the install group; the aside's link sits under its list */
.pg-docs-meta{margin-top:28px}
.pg-docs-start__go{margin-top:20px}
.pg-docs-start__go .cy-link{min-height:44px;display:inline-flex;align-items:center}

/* the filter row: the search field and a live count, then the grid */
.pg-docs-find{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:32px}
.pg-docs-find[hidden]{display:none}
.pg-docs-find .cy-filter{background:var(--s-bg)}
.pg-docs-find__count{font-family:var(--font-mono);font-size:13px;line-height:1.5;color:var(--s-ink-3)}

/* eight guides, four by two on wide screens (the shared grid drops to two, then one) */
@media (min-width:1020px){.pg-docs-grid{--cy-cols:4}}
.pg-docs-grid .cy-related__item{min-height:184px}
/* the hairlines move from the grid to the items, so a filtered grid draws only the cells it shows */
.pg-docs-grid{border-top:0;border-left:0}
.pg-docs-grid .cy-related__item{box-shadow:-1px -1px 0 0 var(--pg-rule)}
.pg-docs-grid .cy-related__item:focus-visible{box-shadow:none}
.pg-docs-grid [hidden]{display:none}
@media (max-width:599px){.pg-docs-grid .cy-related__item{min-height:0}}
.pg-docs-none{margin-top:4px;font-size:17px;line-height:1.55;color:var(--s-ink-2)}
.pg-docs-none[hidden]{display:none}

/* the help callout closes the section, one step under the cells */
.pg-docs-help{margin-top:48px}
@media (min-width:900px){.pg-docs-help{width:fit-content;max-width:100%}}