/* Postie · Avatar — the signed-in user's initials, on the chrome. Raised-brand fill, brand ink. */
.postie-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 36px; height: 36px; flex-shrink: 0;
  border: 0; border-radius: var(--postie-radius-pill);
  background: var(--postie-raised-brand); color: var(--postie-ink-brand);
  font-family: var(--postie-font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
}
.postie-avatar--lg { width: 44px; height: 44px; font-size: 13px; }
.postie-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.postie-avatar:focus-visible { outline: 2px solid var(--postie-ink-brand); outline-offset: 2px; }
/* on a working ground (settings page) it takes the first pebble step */
.postie-working .postie-avatar, [data-theme] > .postie-avatar--working, .postie-avatar--working { background: var(--postie-pebble-1); color: var(--postie-pebble-ink); }