/* ==========================================================================
   Documentation  (/support/documentation/)

   The third Support child, built like Downloads (the .pf-cap blocks with an
   access tag) and Latest Release (the parts table and filter bar that
   js/collection-filter.js drives). Shared, from product-family.css: the page
   banner, .pf-cap, .pf-ptable, .pf-filter, .pf-empty, .pf-related.
   Page-local:
     .doc-tag        the access tag: "Open to everyone" / "Account needed"
     .doc-index      the band: head, filter bar, table, note
     .doc-table      column treatment for the index

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner          white          §5  boundaries  white
     §2  the five types  neutral-2-100  §6  FAQ         neutral-2-100
     §3  by product      white          §7  related     white
     §4  what needs a login neutral-2-100
   ========================================================================== */

#types,#by-product,#access,#boundaries,
#installation-guides,#user-manuals,#release-notes,#application-notes,#examples{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §2 The five types: three across from 1024; §4, §5 two across
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .doc-types .pf-cap__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .doc-access .pf-cap__grid,.doc-boundary .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.doc-tag{
  align-self:flex-start;display:inline-block;margin:-4px 0 12px;
  padding:2px 10px;border-radius:999px;
  background:var(--ps-color-neutral-2-100);
  font:500 12px/18px var(--ps-font);letter-spacing:.02em;
  color:var(--ps-color-secondary-5-500);
}
.doc-tag--account{background:var(--ps-color-neutral-2-300);color:var(--ps-color-neutral-3-500)}

/* --------------------------------------------------------------------------
   §3 Documentation by product
   -------------------------------------------------------------------------- */
.doc-index{padding-block:48px}
.doc-index__head,.doc-index__wrap{grid-column-end:span var(--ps-grid-columns)}
.doc-index__head{margin-bottom:28px}
.doc-index__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.doc-index__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
@media (min-width:640px){.doc-index{padding-block:64px}}
@media (min-width:1024px){.doc-index{padding-block:80px}}

/* one select: never the shared bar's three or five across */
@media (min-width:640px){.doc-filter__selects{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1024px){.doc-filter__selects{grid-template-columns:minmax(0,1fr);max-width:33%}}

/* a visually hidden caption or cell text inside the scroll box must be
   clipped by it, not by the page (the Careers gotcha) */
.doc-index .pf-ptable__scroll{position:relative}
.doc-table{min-width:880px}
.doc-table tbody th{font-weight:500;text-align:left;white-space:nowrap}
.doc-table tbody tr:last-of-type th{border-bottom:0}
.doc-table__ver{white-space:nowrap;font-variant-numeric:tabular-nums}
.doc-table__pkg{color:var(--ps-color-neutral-3-500);font-size:12px}
.doc-table__cell .doc-tag{margin:0 8px 0 0;padding:0 8px;font-size:11px;line-height:17px}
.doc-table__cell a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.doc-table__cell a:hover{color:var(--ps-color-brand-500)}
/* Documentation round 2026-09-29: "Account needed" alone keeps the portal link on the pill itself */
.doc-table__cell a.doc-table__tag-link{text-decoration:none}
.doc-table__cell a.doc-table__tag-link:hover .doc-tag,.doc-table__cell a.doc-table__tag-link:focus-visible .doc-tag{text-decoration:underline;text-underline-offset:2px}
.doc-table__none{color:var(--ps-color-neutral-3-500)}

.doc-index__note{margin:20px 0 0;max-width:80ch;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.doc-index__note a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   §7 Related: four tiles, two across from 640, four from 1024
   -------------------------------------------------------------------------- */
@media (min-width:640px){.pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.doc-related__up{margin-top:20px}

@media (min-width:1350px){
  .doc-types .pf-cap__head,.doc-types .pf-cap__grid,
  .doc-access .pf-cap__head,.doc-access .pf-cap__grid,
  .doc-boundary .pf-cap__head,.doc-boundary .pf-cap__grid,
  .doc-index__head,.doc-index__wrap,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large button can be wider than a 320px column; let it wrap */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.doc-types,.doc-access,.faq{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.doc-index,.doc-boundary,.pf-related{background:var(--sv-white)}
.doc-boundary .pf-cap-block,.pf-related__link{background:var(--ps-color-neutral-2-000)}
.doc-boundary .doc-tag{background:var(--sv-white)}