/* Glossary: compact hero with the search inside it, sticky A-Z bar, quiet cards.
   Palette: black, white, violet (and mixes) only. */
.gl-hero { position: relative; overflow: hidden; background: var(--sa-grad-hero); color: #fff; padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.75rem, 4vw, 2.75rem); }
.gl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 0%, rgba(191,176,255,.18), transparent 50%); pointer-events: none; }
.gl-hero__inner { position: relative; z-index: 1; text-align: center; }
.gl-hero .sa-eyebrow { justify-content: center; margin-bottom: .8rem; }
.gl-hero__title { margin: 0; font: 800 clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem)/1.1 var(--sa-font-display); letter-spacing: -.03em; color: #fff; }
.gl-hero__lede { margin: .75rem auto 0; max-width: 36rem; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.78); }

.gl-search { position: relative; max-width: 560px; margin: 1.6rem auto 0; }
.gl-search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); stroke: var(--sa-gray-500); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.gl-search input { width: 100%; padding: 15px 46px 15px 50px; border: 2px solid transparent; border-radius: 999px; background: #fff; color: #000; font: 500 1rem var(--sa-font-ui); box-shadow: 0 10px 30px rgba(0,0,0,.25); outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; }
.gl-search input::placeholder { color: var(--sa-gray-500); }
.gl-search input:focus { border-color: var(--sa-violet-400); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 4px rgba(148,123,255,.35); }
.gl-search button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--sa-gray-100); color: #000; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.gl-search button[hidden] { display: none; }
.gl-popular { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin-top: 1rem; }
.gl-popular[hidden] { display: none; }
.gl-popular span { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-right: .25rem; }
.gl-popular button { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; padding: .4rem .85rem; border-radius: 999px; font: 600 .82rem var(--sa-font-display); cursor: pointer; transition: background .15s; }
.gl-popular button:hover { background: rgba(255,255,255,.18); }

/* sticky A-Z bar */
.gl-letters { position: sticky; top: var(--global-header-height, 68px); z-index: 30; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .7rem 1rem; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
html[data-color-scheme="dark"] .gl-letters { background: rgba(10,10,10,.92); }
.glossary-letter { min-width: 32px; padding: 6px 9px; text-align: center; border-radius: 8px; font: 700 .85rem var(--sa-font-display); color: var(--color-text-acc); text-decoration: none; cursor: pointer; transition: background .15s, color .15s; user-select: none; }
.glossary-letter:hover { background: var(--sa-violet-50); color: var(--sa-violet-600); }
.glossary-letter.active { background: var(--sa-violet-500); color: #fff; }
html[data-color-scheme="dark"] .glossary-letter:hover { background: rgba(102,67,255,.2); color: var(--sa-violet-300); }

.gl-main { max-width: 1180px; padding-top: 2.25rem; padding-bottom: 2rem; }
.gl-raw { font-family: var(--sa-font-ui); }
.gl-ready .gl-raw { display: none; }

.glossary-section { margin-bottom: 2.75rem; scroll-margin-top: 150px; }
.glossary-letter-heading { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; padding: 0; border: 0; font: 800 1.9rem/1 var(--sa-font-display); letter-spacing: -.03em; color: var(--sa-violet-500); text-transform: uppercase; }
.glossary-letter-heading::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.gl-main h2.glossary-letter-heading { border-top: 0; padding-top: 0; margin-top: 0; }

.glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.glossary-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem 1.3rem 1.2rem; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--sa-r-md); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.glossary-card:hover { transform: translateY(-3px); box-shadow: var(--sa-shadow-2); border-color: var(--sa-violet-300); }
.glossary-card.is-target { border-color: var(--sa-violet-500); box-shadow: 0 0 0 4px rgba(102,67,255,.18); }
.glossary-card h3 { margin: 0 1.6rem .55rem 0; font: 700 1.05rem/1.3 var(--sa-font-display); letter-spacing: -.015em; color: var(--color-text); }
.glossary-def, .glossary-def p { margin: 0; font: 400 .93rem/1.65 var(--sa-font-ui); color: var(--color-text-acc); }
.glossary-def p + p { margin-top: .6rem; }
.glossary-link { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--sa-gray-500); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.glossary-link svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glossary-card:hover .glossary-link, .glossary-link:focus-visible { opacity: 1; }
.glossary-link:hover { background: var(--sa-violet-50); color: var(--sa-violet-600); }
.glossary-card.is-copied::after { content: "Link copied"; position: absolute; top: 12px; right: 44px; padding: 3px 9px; border-radius: 6px; background: #000; color: #fff; font: 600 .72rem var(--sa-font-ui); }

.glossary-empty { text-align: center; padding: 4rem 1rem; color: var(--color-text-acc); }
.glossary-empty h3 { margin: 0 0 .4rem; font: 800 1.3rem var(--sa-font-display); color: var(--color-text); }

@media (max-width: 992px) { .glossary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .glossary-grid { grid-template-columns: 1fr; } .gl-letters { position: static; } .glossary-link { opacity: 1; } }
#glossary-top-btn { font-family: var(--sa-font-display); }
/* Mobile/tablet: one swipeable row of letters that sticks under the top edge (the header is not sticky below 992px).
   Its height is reserved before glossary.js fills it, so the page no longer jumps (CLS 0.15 -> 0). */
.gl-letters { min-height: 3.2rem; }
@media (max-width: 991px) {
  .gl-letters, .gl-letters[class] { position: sticky; top: 0; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .55rem 16px; scroll-padding-inline: 16px; }
  .gl-letters::-webkit-scrollbar { display: none; }
  .gl-letters > * { flex: 0 0 auto; }
}
@media (max-width: 991px) { .glossary-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } }
/* The "Popular" chips are filled by glossary.js: keep their row's space while hidden (no jump), and on phones show them
   as one swipeable row instead of three wrapped lines. Without JavaScript the empty row is just a small gap. */
.gl-popular[hidden] { display: flex; visibility: hidden; min-height: 2.1rem; }
@media (max-width: 991px) {
  .gl-popular { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .gl-popular::-webkit-scrollbar { display: none; }
  .gl-popular > * { flex: 0 0 auto; }
}