.com-databases-az { width: 100%; margin-left: auto; margin-right: auto; }

/* ── Filters ─────────────────────────────────────────────────────────────── */
.com-databases-az-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: end;
  padding: 18px;
  background: hsl(255 20% 96%);
  border: 1px solid hsl(255 15% 85%);
  border-radius: 6px;
}
.com-databases-az-filters[hidden] { display: none; }
.com-databases-az-field label { display: block; margin-bottom: 4px; font-weight: 600; }
.com-databases-az-field input,
.com-databases-az-field select {
  width: 100%;
  min-height: 44px;           /* WCAG 2.5.5 target size */
  padding: 8px 10px;
  font: inherit;
  border: 1px solid hsl(0 0% 55%);   /* 3:1+ against the panel, WCAG 1.4.11 */
  border-radius: 4px;
  background: #fff;
}
.com-databases-az-reset {
  min-height: 44px;
  padding: 8px 18px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary-deep-purple, #2d0f52);   /* white on it: 16.1:1 */
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.com-databases-az :focus-visible { outline: 3px solid var(--color-primary-deep-purple, #2d0f52); outline-offset: 2px; }

.com-databases-az-count { margin: 16px 0 8px; font-weight: 600; }

/* ── Letter bar ──────────────────────────────────────────────────────────── */
.com-databases-az-letters ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.com-databases-az-letters a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  font-weight: 700; text-decoration: none;
  border: 1px solid hsl(0 0% 80%); border-radius: 4px;
}
.com-databases-az-letters a:hover { background: hsl(255 20% 96%); }
/* Empty under the current filter: shown dimmed rather than removed, so the bar does not jump. */
.com-databases-az-letters a.is-empty { color: hsl(0 0% 45%); border-style: dashed; pointer-events: none; }

/* ── List ────────────────────────────────────────────────────────────────── */
.com-databases-az-group { margin-top: 2rem; scroll-margin-top: 120px; }   /* clear of the sticky menu */
.com-databases-az-group[hidden] { display: none; }
.com-databases-az-group > h2 { margin: 0 0 .5rem; font-size: 1.75rem; }
.com-databases-az-list { margin: 0; padding: 0; list-style: none; }
.com-databases-az-item { padding: .9rem 0; border-bottom: 1px solid hsl(0 0% 88%); }
.com-databases-az-item[hidden] { display: none; }
.com-databases-az-name { font-size: 1.1rem; font-weight: 700; }
.com-databases-az-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; background: var(--color-primary-deep-purple, #2d0f52); border-radius: 999px;
  vertical-align: middle;
}
.com-databases-az-alt { display: block; margin-top: .15rem; font-size: .9rem; color: hsl(0 0% 35%); }   /* 7.5:1 */
.com-databases-az-desc { margin: .35rem 0 0; }
.com-databases-az-meta { margin: .35rem 0 0; font-size: .875rem; color: hsl(0 0% 35%); }
.com-databases-az-vendor::before { content: " — "; }

.com-databases-az-none, .com-databases-az-note, .com-databases-az-fallback { margin-top: 2rem; }
.com-databases-az-none[hidden] { display: none; }
.com-databases-az-note { font-size: .875rem; color: hsl(0 0% 35%); }

@media (max-width: 800px) {
  .com-databases-az-filters { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .com-databases-az-letters a.is-empty { border-color: GrayText; color: GrayText; }
}