/* Team app ▸ who is here (26.10.2026, team/teamPraesenz.js): avatar stack at the top right of a shared Team tab.
   Tokens only; light and dark follow the tokens. */

/* Anchor: first child of the tab's <main>, zero height (margins still collapse through it), the stack absolutely at its
   top right. With .tp-zeile (something of the tab sits there) it becomes its own small row. */
.tp-anker { position: relative; height: 0; }
.tp-anker[hidden] { display: none; }
.tp-anker > .tp-stapel { position: absolute; top: 0; right: 0; z-index: 3; }
.tp-anker.tp-zeile { height: auto; display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.tp-anker.tp-zeile > .tp-stapel { position: static; }

.tp-stapel { display: inline-flex; align-items: center; flex-direction: row; flex: none; padding-left: 6px; min-width: 0; }
.tp-stapel[hidden] { display: none; }
/* In a tab's own slot (Bug Report button group): one more item of that row. */
.tp-stapel.tp-im-slot { margin-right: var(--space-1); }
/* Phones: the button group spans the row there. The stack goes last and to the right end, the buttons stay on the left
   (probe dep175: at 390 px the stack stood alone on the left under the filters). */
@media (max-width: 640px) {
  .tp-stapel.tp-im-slot { order: 99; margin-left: auto; margin-right: 0; }
}

.tp-av {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -6px;
  border-radius: 50%; overflow: hidden; cursor: default;
  background: var(--w3-fuellung-stark, var(--surface-3)); color: var(--text-1);
  box-shadow: 0 0 0 2px var(--w3-karte, var(--surface-1));
  font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .02em; line-height: 1;
  font-variant-numeric: tabular-nums; user-select: none;
}
.tp-av:hover { z-index: 1; }
/* Ring outside the 2 px separator (the shared --focus-ring has the same spread and would be covered). */
.tp-av:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; z-index: 2; }
.tp-mehr { background: var(--w3-fuellung, var(--surface-2)); color: var(--text-2); font-size: var(--fs-11); }

/* Phones: a bit smaller; the anchor turns into its own row by itself (something sits at the top right). */
@media (max-width: 640px) {
  .tp-av { width: 26px; height: 26px; }
}

/* A tab's slot draws no box of its own: the stack is one more item of the tab's row (no extra gap while empty). */
[data-team-praesenz-slot] { display: contents; }