/* Glossary page. Loaded after /styles.css. Colours and spacing come from the tokens in styles.css. No inline styles, no external assets. */

/* Search: the site's text input with a search icon, full width up to 28rem */
.gloss-search { display: grid; gap: var(--s-1-5); width: 100%; max-width: 28rem; }
.gloss-search label { font-size: var(--text-sm); font-weight: 600; }
.gloss-field { position: relative; }
.gloss-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; }
.gloss-field input[type=search] { padding-inline-start: calc(var(--s-3) + 18px + var(--s-2)); }
.gloss-search .meta { margin: 0; min-height: 1.2em; }

/* A to Z: a sticky pill bar under the sticky site header; letters with no terms are muted */
.gloss-bar { position: sticky; top: 3.5rem; z-index: 5; margin: 0; padding: var(--s-2) 0; background: hsl(var(--background) / 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid hsl(var(--border)); }
.az ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; }
.az a, .az .off { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; padding-inline: var(--s-2); border-radius: 99px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.az a { color: hsl(var(--foreground)); background: hsl(var(--secondary)); border: 1px solid hsl(var(--border)); }
.az a:hover, .az a:focus-visible { color: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.az .off { color: hsl(var(--muted-foreground) / 0.45); border: 1px solid transparent; }

/* Letter groups and term cards */
.gloss-groups { display: grid; gap: var(--s-8); }
.gloss-group { display: grid; gap: var(--s-3); }
.gloss-group[hidden] { display: none; }
.gloss-letter { margin: 0; scroll-margin-top: 8rem; font-size: var(--text-2xl); color: hsl(var(--primary)); border-bottom: 1px solid hsl(var(--border)); padding-bottom: var(--s-1); }
dl.glossary { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 48rem) { dl.glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gloss-card { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.gloss-card[hidden] { display: none; }
.glossary dt { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.35; color: hsl(var(--foreground)); scroll-margin-top: 8rem; }
.glossary dd { margin: 0; font-size: var(--text-base); line-height: 1.6; color: hsl(var(--foreground) / 0.88); }
.gloss-card:has(dt:target) { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2); }
.glossary dt:target { color: hsl(var(--primary)); }