/* Sugarbot UI kit: status (decisions S1, S2). Needs tokens.css and base.css.
   A dot or a chip never carries meaning on its own: it always sits beside text that names the
   state. That is why a Spearmint dot can be 1.9:1 on white without failing WCAG 1.4.11. */

/* S1 Status dot. "Off" is muted Plum, never red: off is the normal state of a working install. */
.sb-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sb-dot-off);
}
.sb-dot--on { background: var(--sb-color-spearmint); }
.sb-dot--attn { background: var(--sb-color-molasses); }
.sb-dot--busy { background: var(--sb-color-molasses); animation: sb-dot-pulse 1.4s ease-in-out infinite; }
.sb-dot--error { background: var(--sb-destructive); }
@keyframes sb-dot-pulse { 50% { opacity: .35; } }
.sb-on-dark .sb-dot:not([class*="sb-dot--"]) { background: var(--sb-on-dark-dot-off); }

.sb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; }

/* S2 Chips and pills. Brand fills carry Plum ink; the destructive red is not a status colour. */
.sb-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--sb-radius-pill);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background: var(--sb-success-fill);
  color: var(--sb-success-ink);
}
.sb-chip--muted { background: var(--sb-chip-muted); color: var(--sb-body-muted); }

/* Pills are the list-title style, smaller: a label on a row, not a headline. */
.sb-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--sb-radius-pill);
  font-family: var(--sb-list-title-font);
  font-weight: var(--sb-list-title-weight);
  font-style: var(--sb-list-title-style);
  letter-spacing: var(--sb-list-title-tracking);
  text-transform: var(--sb-list-title-case);
  font-size: 12px;
  line-height: 1.3;
  background: var(--sb-pill-fill);
  color: var(--sb-body-muted);
}
.sb-pill--success { background: var(--sb-success-fill); color: var(--sb-success-ink); }
.sb-pill--info { background: var(--sb-info-fill); color: var(--sb-info-ink); }
.sb-pill--warning { background: var(--sb-warning-wash); color: var(--sb-warning-text); }
.sb-pill--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--sb-pill-edge); }