/*
 * Ambient sync badge (P5-T02). Fixed above the shell so the cashier sees the
 * queue state on every screen; colours come only from design tokens.
 */
.sync-status {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  color: var(--chalk-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-card);
}

.sync-status__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--status-success);
}

.sync-status__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.sync-status[data-state='offline'] {
  border-color: var(--status-warning);
  background: var(--warning-faint);
  color: var(--status-warning);
}

.sync-status[data-state='offline'] .sync-status__dot,
.sync-status[data-state='pending'] .sync-status__dot,
.sync-status[data-state='saved'] .sync-status__dot {
  background: var(--status-warning);
}

.sync-status[data-state='pending'],
.sync-status[data-state='saved'] {
  border-color: var(--status-warning);
  color: var(--status-warning);
}

.sync-status[data-state='synced'] {
  border-color: var(--status-success);
  color: var(--status-success);
}