/* Presence beside a shared board. Small, peripheral, and never alarming. */
.pr-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 8px 0;
  border: 1px solid var(--line, #DDE5E0); border-radius: 12px;
  background: #fff; font-size: 13px;
}
.pr-face {
  position: relative; width: 34px; height: 34px; flex: none;
  border-radius: 50%; overflow: hidden; background: #E4EDE8;
  display: grid; place-items: center;
  transition: opacity .6s ease, filter .6s ease;
}
.pr-initial { font-weight: 700; color: #2F5C4E; font-size: 14px; }
.pr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Gone quiet. Dimmed, and captioned nowhere. */
.pr-face.pr-quiet { opacity: .45; filter: grayscale(.5); }

.pr-text { min-width: 0; }
.pr-name { font-weight: 600; }
.pr-state { font-size: 12px; color: #7A8C84; }
.pr-state.pr-ok { color: #2F7D5E; }
.pr-state.pr-warn { color: #A5701A; }

/* A piece in someone's hand. Self-clearing. */
.pr-hold {
  margin-left: auto; font-size: 12px; color: #56675E;
  background: #F1F6F3; border-radius: 999px; padding: 4px 10px;
}