/* ---------- Module: lidkaart (infokaartje bij aanwijzen van een lid) ---------- */
.lidkaart { position: absolute; z-index: 80; width: 300px; max-width: calc(100vw - 16px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 28px rgb(0 0 0 / .18); padding: var(--space-sm); font-size: var(--text-sm); pointer-events: none; }
.lidkaart-inner { display: flex; gap: var(--space-sm); align-items: flex-start; }
.lidkaart .avatar { width: 72px; height: 72px; }
.lk-name { font-size: var(--text-base); margin-bottom: var(--space-3xs); }

/* Pijltje naar de naam (lidkaart.js zet --arrow) en een lichte markering op de naam zolang de kaart erbij hoort */
.lidkaart::before {
  content: ""; position: absolute; top: -6px; left: var(--arrow, 24px); width: 10px; height: 10px;
  background: var(--surface); border: solid var(--line); border-width: 1px 0 0 1px; transform: rotate(45deg);
}
.lidkaart.is-above::before { top: auto; bottom: -6px; border-width: 0 1px 1px 0; }
.user.is-card { background: color-mix(in srgb, currentColor 16%, transparent); border-radius: var(--radius-xs); }