/* ==========================================================================
   Glossary  (/resources/glossary/)

   A reference page, not a sales page (the doc). Shared, from stylesheets
   already linked: the page banner, .pf-related (product-family.css).
   Page-local:
     .gls-search   the banner's term filter (after .tl-search)
     .gls-index    the A to Z bar, sticky under the header
     .gls-letter   one letter: its H2 and its terms
     .gls-term     one entry: name, definition, page link, related terms

     §1 banner white · §2 A to Z bar white, sticky at the top (the header
     scrolls away) · §3 terms white ·
     §4 related neutral-2-100
   ========================================================================== */

.gls-letter,.gls-term,#terms{scroll-margin-top:72px}

/* --------------------------------------------------------------------------
   §1 Banner: the term filter
   -------------------------------------------------------------------------- */
.gls-banner .page-banner__body p{margin:0}
.gls-search{margin-top:28px;max-width:560px}
.gls-search__field{
  position:relative;display:flex;align-items:center;
  background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:10px;
  padding:6px 14px 6px 40px;
  transition:border-color .2s ease-out,box-shadow .2s ease-out;
}
.gls-search__field:focus-within{
  border-color:var(--ps-color-brand-500);
  box-shadow:0 0 0 3px rgba(198,12,48,.12);
}
.gls-search__icon{position:absolute;left:14px;fill:var(--ps-color-neutral-2-900);pointer-events:none}
.gls-search__input{
  flex:1 1 auto;min-width:0;
  border:0;background:none;padding:10px 0;
  font:400 15px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
}
.gls-search__input:focus{outline:none}
.gls-search__bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:10px}
.gls-search__bar[hidden],.gls-search__clear[hidden]{display:none}
.gls-search__count{margin:0;font:500 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.gls-search__clear{
  background:none;border:0;padding:0;cursor:pointer;
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;
}
.gls-search__clear:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §2 The A to Z bar
   -------------------------------------------------------------------------- */
.gls-index{
  position:sticky;top:0;z-index:5;
  background:var(--sv-white);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
.gls-index__list{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:8px 0;
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
}
.gls-index__list::-webkit-scrollbar{display:none}
.gls-index__letter{
  display:flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;border-radius:8px;
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
  transition:background-color .2s ease-out,color .2s ease-out;
}
a.gls-index__letter:hover{background:var(--ps-color-neutral-2-100);color:var(--ps-color-brand-500)}
.gls-index__letter.is-empty,.gls-index__letter.is-filtered{color:var(--ps-color-neutral-2-500);pointer-events:none}

/* --------------------------------------------------------------------------
   §3 The entries
   -------------------------------------------------------------------------- */
.gls-terms{padding-block:40px 56px;background:var(--sv-white)}
.gls-terms__list,.gls-terms__empty{grid-column-end:span var(--ps-grid-columns)}
.gls-terms__list[hidden],.gls-letter[hidden],.gls-term[hidden],.gls-terms__empty[hidden]{display:none}
.gls-letter{padding-top:24px}
.gls-letter + .gls-letter{margin-top:16px}
.gls-letter__title{
  margin:0;padding-bottom:12px;
  color:var(--ps-color-brand-600);
  border-bottom:2px solid var(--ps-color-brand-500);
}
.gls-term{padding:24px 0;border-bottom:1px solid var(--ps-color-neutral-2-300)}
.gls-term__name{margin:0 0 10px;color:var(--ps-color-neutral-3-500)}
.gls-term__def{color:var(--ps-color-secondary-5-500);max-width:72ch}
.gls-term__def p{margin:0}
.gls-term__def p + p{margin-top:10px}
.gls-term__def a,.gls-term__page a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}
.gls-term__def a:hover,.gls-term__page a:hover{color:var(--ps-color-brand-500)}
.gls-term__page{margin:12px 0 0;font:500 14px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.gls-term__related{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
.gls-term__label{margin-right:4px;font:400 13px/19px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.gls-term__chip{
  display:inline-flex;align-items:center;
  padding:4px 12px;border-radius:999px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
  font:500 13px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);
  transition:border-color .2s ease-out,color .2s ease-out;
}
.gls-term__chip:hover{border-color:var(--ps-color-brand-500);color:var(--ps-color-brand-600)}
.gls-term:target .gls-term__name{color:var(--ps-color-brand-600)}
.gls-terms__empty p{margin:24px 0 0;color:var(--ps-color-secondary-5-500)}
.gls-terms__empty a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------------------
   §4 Related
   -------------------------------------------------------------------------- */
.gls-related{
  background:var(--ps-color-neutral-2-100);
  border-top:1px solid var(--ps-color-neutral-2-300);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .gls-terms{padding-block:48px 72px}
  .gls-index__letter{min-width:34px}
}
@media (min-width:1024px){
  .gls-terms{padding-block:56px 88px}
  .gls-term{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:40px}
  .gls-term__name{grid-row:1 / span 3;margin:0}
  .gls-term > :not(.gls-term__name){grid-column:2}
  .gls-index__list{justify-content:space-between}
}
@media (min-width:1350px){
  .gls-index__list,.gls-terms__list,.gls-terms__empty,.gls-related .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

@media (prefers-reduced-motion:reduce){
  .gls-search__field,.gls-index__letter,.gls-term__chip{transition:none}
}