/* ============================================================
   Glossary page — page-specific polish.
   Foundation styles (.gloss, .term, .gloss-tools, .gloss-count)
   live in css/styles.css; this file only adds the A–Z jump bar
   that filters the dictionary to terms starting with a letter.
   ============================================================ */

/* The alphabet rail: a compact, wrappable row of letter buttons. */
.gloss-az{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  margin:2px 0 20px;
  padding:10px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.gloss-az-letter{
  appearance:none;
  cursor:pointer;
  min-width:30px;
  padding:5px 7px;
  font-family:var(--font-mono);
  font-size:.82rem;
  line-height:1;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}

.gloss-az-letter:hover:not(:disabled){
  color:var(--ink);
  background:var(--amber-glow);
}

.gloss-az-letter:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

/* Active letter (or "All"): the amber compass accent. */
.gloss-az-letter.is-active{
  color:#fff;
  background:var(--amber);
  border-color:var(--amber);
}

/* Letters with no terms are dimmed and inert. */
.gloss-az-letter:disabled{
  color:var(--ink-faint);
  opacity:.4;
  cursor:default;
}

/* "All" reads as a word, not a single glyph — give it a touch more room. */
.gloss-az-letter[data-letter=""]{
  padding-inline:11px;
  font-family:var(--font-label);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
}

@media (max-width:560px){
  .gloss-az{ gap:3px; padding:8px; }
  .gloss-az-letter{ min-width:26px; padding:5px 5px; font-size:.78rem; }
}