/* Public identity marks fit the existing layout; a badge never replaces board position. */
.pp-avatar-host { position: relative; isolation: isolate; overflow: hidden; }
.pp-avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pp-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; font: inherit; }
html body.ph .tb-btn.me #me.pp-avatar-host { display: grid; width: 100%; height: 100%; border-radius: inherit; }
html body.ph .pod .disc.pp-avatar-host { overflow: visible; }
html body.ph .pod .disc.pp-avatar-host > .pp-avatar-image { border-radius: 50%; }
html body.ph .pod .disc.pp-avatar-host .rk { z-index: 2; }
.pp-rank { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 18px; padding: 2px 5px; border-radius: 5px; background: #e7eee7; color: #3c5748; font: 600 9px/1.2 var(--body, system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.pp-rank[data-rank="explorer"] { background: #d3f0df; color: #0b5b3d; }
.pp-rank[data-rank="builder"] { background: #c7ead9; color: #074d34; }
.pp-rank[data-rank="trailblazer"] { background: #fff0c2; color: #684900; }
.pp-rank[data-rank="panda-legend"] { background: #ffe08a; color: #4f3700; }
.acct .pp-rank { background: #b6e2cf; color: #07382b; }
html body.ph .pp-person-title { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 4px; min-width: 0; white-space: normal; }
html body.ph .pp-person-title > .pp-person-name { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.ph .pod .who.pp-person-title { justify-content: center; }
html body.ph .item.pp-person-row { grid-template-columns: 20px 30px minmax(0, 1fr) auto; gap: 9px; }
.pp-person-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d3f8e8; }
@media (max-width: 359px) {
  html body.ph .item.pp-person-row { grid-template-columns: 16px 26px minmax(0, 1fr) auto; gap: 7px; padding-left: 11px; padding-right: 11px; }
  .pp-person-avatar { width: 26px; height: 26px; }
  .pp-rank { font-size: 8.5px; padding-left: 4px; padding-right: 4px; }
}
@media (forced-colors: active) { .pp-rank, .pp-avatar-host { outline: 1px solid CanvasText; } }