/* Logo tile (company logos) and avatar (people). Fixed sizes reserve space, so no CLS.
   Fallback initials: <span class="c-logo c-logo--initials" aria-hidden="true">AB</span> */
.c-logo { display: inline-grid; place-items: center; flex: none; width: var(--logo, 3rem); height: var(--logo, 3rem); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: calc(var(--logo, 3rem) * 0.34); font-weight: var(--fw-bold); line-height: 1; color: var(--pn-brand-700); }
.c-logo img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
.c-logo--initials { background: var(--pn-brand-50); border-color: var(--pn-brand-100); }
.c-logo--sm { --logo: 2.5rem; border-radius: var(--radius-sm); }
.c-logo--lg { --logo: 4rem; border-radius: var(--radius-lg); }
.c-logo--xl { --logo: 5rem; border-radius: var(--radius-lg); }
.c-avatar { display: inline-grid; place-items: center; flex: none; width: var(--avatar, 2.5rem); height: var(--avatar, 2.5rem); overflow: hidden; border-radius: 50%; background: var(--pn-brand-100); color: var(--pn-brand-800); font-size: calc(var(--avatar, 2.5rem) * 0.4); font-weight: var(--fw-semibold); line-height: 1; }
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-avatar--sm { --avatar: 2rem; }
.c-avatar--lg { --avatar: 4rem; }