/* ============================================================================
   person.css — the ONE stylesheet for the canonical Person renderer (personPill).
   ============================================================================
   Shared UI-component styles for shared/people.js → personPill(). Linked in
   app.html alongside the other reusable-component stylesheets (easy-button.css,
   calm-breath.css), so every consumer inherits these through the normal styling
   pipeline — personPill() itself injects NO CSS.

   Deliberately GLOBAL (unscoped): personPill renders inside views, the People
   drawer, AND body-level popovers (the universal picker appends to document.body),
   so the rules must apply everywhere, not under one app scope.

   SIZE: the avatar circle is sized by --mb-av (default 24px) set on the host
   surface — the picker uses the fixed default, the drawer header sets 56, a card
   46, a dense strip 21 — while identity (photo/initial + ring) stays identical.

   RING: always present. --ring carries the chosen palette color, or the calm
   sage fallback (--avatar) the renderer supplies until Mama chooses one. The ring
   is on the circle, never the pill background.
   ============================================================================ */

.mb-person{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  vertical-align:middle;
}

.mb-person-av{
  width:var(--mb-av,24px);
  height:var(--mb-av,24px);
  flex:none;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-weight:700;
  font-size:calc(var(--mb-av,24px) * 0.44);
  color:#10140f;
  background:var(--avatar);
  background-size:cover;
  background-position:center;
  /* the identity RING — chosen color, or sage fallback. Fixed thickness. */
  box-shadow:0 0 0 2px var(--ring, var(--avatar));
}

/* a photo fills the circle; the initial underneath is hidden (kept for a11y fill) */
.mb-person-av.has-photo{ color:transparent; }

.mb-person-name{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--cream);
  font-size:14px;
}

/* peopleStack() — the ONE layered multi-person avatar stack (shared/people.js).
   N canonical avatars overlap left-to-right; each carries a thin --ink separation
   ring OUTSIDE its identity color ring so the overlapping circles stay legible.
   The host sizes the circles via --mb-av exactly as a lone avatar (a person looks
   identical alone or stacked); the stack owns ONLY the overlap + separation. */
.mb-person-stack{ display:inline-flex; align-items:center; }
.mb-person-stack .mb-person--avatar{ margin-left:-6px; }
.mb-person-stack .mb-person--avatar:first-child{ margin-left:0; }
.mb-person-stack .mb-person-av{ box-shadow:0 0 0 2px var(--ring,var(--avatar)), 0 0 0 4px var(--ink,#10140f); }