/* Postie · StateChip — word + 6px dot. State is never colour alone, and colourway 4 has no status hue:
   live = accent-as-text on the selected tint · catching-up = muted on raised with a hollow dot · off = muted, no dot. */
.postie-state {
  display: inline-flex; align-items: center; gap: 6px;
  box-sizing: border-box; height: 26px; padding: 0 10px;
  border-radius: var(--postie-radius-pill);
  font-family: var(--postie-font-ui); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.postie-state__dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; box-sizing: border-box; }
.postie-state--live { background: var(--postie-c-selected); color: var(--postie-c-accent-text); } /* context: selected tint on working; raised-brand + lifted face on the chrome */
.postie-state--catching-up { background: var(--postie-c-raised); color: var(--postie-c-muted); }
.postie-state--catching-up .postie-state__dot { background: transparent; border: 1.5px solid currentColor; }
.postie-state--off { background: var(--postie-c-raised); color: var(--postie-c-muted); }
.postie-state--off .postie-state__dot { display: none; }