/* Бейджи и статусы: .status (+ общие тона up/down/warn/info/off/done/failed/in_progress и статусы задач
   new/in_progress/review/done/cancelled/overdue), .chip, .chips, .chip-x, .approved.
   Цвет статуса несёт и форма: у каждого статуса своя точка (пустая, ромб, квадрат, пульс), у «Отменена» текст зачёркнут.
   Подписи и соответствие статусов идей/созвонов/предложений этим классам — ui.js:STATUS_FAMILY. */
.status {
  --status-fg: var(--fg-muted); --status-bg: var(--surface-2);
  display: inline-flex; align-items: center; gap: var(--s1h); padding: 2px var(--s2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap;
  border: var(--border-w) solid transparent; color: var(--status-fg); background: var(--status-bg);
}
.status::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.status.up, .status.done { --status-fg: var(--success); --status-bg: var(--success-soft); }
.status.down, .status.failed, .status.overdue { --status-fg: var(--danger); --status-bg: var(--danger-soft); }
.status.warn, .status.review { --status-fg: var(--warn); --status-bg: var(--warn-soft); }
.status.info, .status.in_progress { --status-fg: var(--info); --status-bg: var(--info-soft); }
.status.new { --status-fg: var(--accent); --status-bg: var(--accent-soft); }
.status.off, .status.cancelled { --status-fg: var(--fg-muted); --status-bg: var(--surface-2); }
/* второй сигнал — форма точки: не начато — кольцо, на проверке — ромб, ошибка/просрочка — квадрат */
.status.off::before, .status.cancelled::before, .status.new::before { background: transparent; border: 1.5px solid currentColor; }
.status.review::before { border-radius: 1px; transform: rotate(45deg) scale(.85); }
.status.failed::before, .status.down::before, .status.overdue::before { border-radius: 1px; }
.status.cancelled { text-decoration: line-through; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .status.in_progress::before { animation: pulse 1.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .35; } }
.approved { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--success); font-weight: var(--fw-medium); }
.approved .icon { width: 14px; height: 14px; flex: none; }

.chip { --chip-bg: var(--surface-2); --chip-fg: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--s2); border-radius: var(--r-sm);
  background: var(--chip-bg); color: var(--chip-fg); font: var(--fs-xs) var(--font-data); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip.tone-danger { --chip-fg: var(--danger); --chip-bg: var(--danger-soft); }   /* мягкий фон — контраст текста выше, чем на --surface-2 */
.chip.tone-accent { --chip-fg: var(--accent); --chip-bg: var(--accent-soft); }
a.chip { text-decoration: none; }
a.chip:hover { background: var(--surface-3); color: var(--fg); }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-muted); cursor: pointer; }
.chip-x:hover, .chip-x:focus-visible { background: var(--danger-soft); color: var(--danger); }
.chip-x:active:not(:disabled) { transform: translateY(1px); }
.chip-x .icon { width: 12px; height: 12px; }
.chip-x:disabled { color: var(--disabled-fg); cursor: not-allowed; }
@media (pointer: coarse) {   /* тач: крестик на чипе — с запасом под палец (видимый размер прежний) */
  .chip-x { position: relative; }
  .chip-x::after { content: ""; position: absolute; inset: -8px; }
}