.callout {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  font-size: 12px;
  line-height: 1.5;
}

.amber {
  background: var(--amber-bg);
  border-left-color: var(--amber);
  color: var(--amber-deep);
}

.success {
  background: var(--success-bg);
  border-left-color: var(--success);
  color: var(--success);
}

.warning {
  background: var(--warning-bg);
  border-left-color: var(--warning);
  color: var(--warning);
}

.error {
  background: var(--error-bg);
  border-left-color: var(--error);
  color: var(--error);
}

.info {
  background: var(--running-bg);
  border-left-color: var(--running);
  color: var(--running);
}

.title {
  font-weight: 600;
  margin-bottom: 4px;
}

.body {
  color: var(--text-secondary);
}

.amber .body { color: var(--amber-deep); }
.success .body { color: var(--success); }
.warning .body { color: var(--warning); }
.error .body { color: var(--error); }
.info .body { color: var(--running); }
