/* ============================================================================
   ATOMIC LAB — ALL-ELEMENTS LIST PAGE
   ========================================================================== */

.pg-list { --sect-y: clamp(2.5rem, 4vw, 4rem); }

.list-head { padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.25rem)); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.list-head .lede { margin-top: 0.7rem; }

.list-ctl { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: 1.5rem; }
.list-ctl .tbl-filter { flex: 1; min-width: 260px; max-width: 460px; }
.list-count { font-size: var(--t-2xs); letter-spacing: 0.06em; margin-left: auto; }
#listFams { margin-top: 0.75rem; max-width: 100%; }

.list-wrap {
  border: 1px solid var(--edge);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.015);
  max-height: 78vh;
  overflow: auto;
}

.list { min-width: 1080px; }
.list thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgba(9, 13, 22, 0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  user-select: none;
  padding: 0;
}
.list thead th button {
  width: 100%;
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.75rem 0.9rem;
  font: inherit; color: inherit; text-align: inherit;
  letter-spacing: inherit; text-transform: inherit;
  white-space: nowrap;
  transition: color var(--d-1);
}
.list thead th.num button { justify-content: flex-end; }
.list thead th button::after {
  content: '↕'; font-size: 0.85em; opacity: 0.3;
}
.list thead th.is-sorted button { color: var(--beam); }
.list thead th.is-sorted button::after { content: '↑'; opacity: 1; }
.list thead th.is-desc button::after { content: '↓'; }
.list thead th:hover button { color: var(--ink); }

.list tbody tr[hidden] { display: none; }
.list td { white-space: nowrap; }
.list__sym {
  display: inline-grid; place-items: center;
  min-width: 30px; padding: 0.15rem 0.35rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs);
  color: var(--fam, var(--beam));
  background: color-mix(in srgb, var(--fam, var(--beam)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--fam, var(--beam)) 32%, transparent);
  border-radius: var(--r-1);
  transition: all var(--d-1);
}
.list tr:hover .list__sym { background: color-mix(in srgb, var(--fam, var(--beam)) 26%, transparent); color: #fff; }
.list__name { color: var(--ink); font-weight: 500; }
.list__name:hover { color: var(--beam); }
.list__fam { font-size: var(--t-xs); color: var(--ink-3); }
.list__cfg { font-size: var(--t-3xs); color: var(--ink-2); }

.list-foot { font-size: var(--t-3xs); margin-top: 0.9rem; letter-spacing: 0.04em; }

@media (max-width: 700px) {
  .list-count { margin-left: 0; }
}