/* ============================================================
   35 — Documentation index
   Scope: .docs-idx*
   ============================================================ */

.docs-idx__head { max-width: 40ch; }
.docs-idx__title { margin-block-start: var(--s-4); }

.docs-idx__grid {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-9);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.docs-idx__item[hidden] { display: none; }

.docs-idx__card {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  height: 100%;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  color: inherit;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.docs-idx__card:hover {
  transform: translateY(-2px);
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 36%, transparent),
              var(--sh-md);
}
.docs-idx__card:hover .docs-idx__glyph {
  color: var(--c-brand);
  background: var(--c-brand-tint);
}
.docs-idx__card:hover .docs-idx__t { color: var(--c-brand-press); }

.docs-idx__glyph {
  display: grid;
  place-items: center;
  width: var(--s-9);
  height: var(--s-9);
  margin-block-end: var(--s-1);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px var(--c-hairline-soft);
  color: var(--text-strong);
  transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.docs-idx__glyph svg { width: var(--s-6); height: var(--s-6); }

.docs-idx__t {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text-strong);
  transition: color var(--t-fast) var(--ease-out);
}

.docs-idx__d {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.docs-idx__tags {
  margin-block-start: var(--s-1);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--c-hairline-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* ---------------- Empty state ---------------- */

.docs-idx__empty {
  margin-block-start: var(--s-7);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.docs-idx__empty[hidden] { display: none; }
.docs-idx__term { color: var(--text-strong); font-weight: var(--fw-semi); }
.docs-idx__empty em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--c-brand-press);
}