/* --- Status pill (Figma «Lidfly дизайн-система» → Основа → Status) ---
   A status is not a button: no shadow, no hover. S 24 in headings and lists, M 32 next to
   Button S in an action row so both edges line up.
   Markup: <span class="status status-ok"><span class="status-dot"></span>Подключено</span>
   Tones: .status-ok (Success), .status-missing (Warning), .status-error (Danger),
   .status-neutral / .status-trial (Neutral); size .status-m; no dot: omit .status-dot. */

.status {
  --status-fg: var(--status-neutral-fg);
  --status-bg: var(--status-neutral-bg);
  --status-border: var(--status-neutral-border);
  --status-dot: var(--status-neutral-dot);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--status-border);
  border-radius: var(--radius-pill);
  background: var(--status-bg);
  color: var(--status-fg);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.status-m {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.status-ok {
  --status-fg: var(--status-success-fg);
  --status-bg: var(--status-success-bg);
  --status-border: var(--status-success-border);
  --status-dot: var(--status-success-dot);
}

.status-missing {
  --status-fg: var(--status-warning-fg);
  --status-bg: var(--status-warning-bg);
  --status-border: var(--status-warning-border);
  --status-dot: var(--status-warning-dot);
}

.status-error {
  --status-fg: var(--status-danger-fg);
  --status-bg: var(--status-danger-bg);
  --status-border: var(--status-danger-border);
  --status-dot: var(--status-danger-dot);
}

.status-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--status-dot);
}