/* Design-system foundation — поверх app.css + glass.css.
   Новые экраны: эти классы. Не копировать одноразовые варианты кнопок/пустых состояний.
   Пилот: /cabinet/trader/tips (data-ds-pilot). Документ: docs/ux-audit/06-design-system.md */

/* —— Empty —— */
.ui-empty {
  margin: 0;
  padding: var(--ui-empty-pad) var(--space-4);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading);
  text-align: center;
}

html[data-ui="glass"] .ui-empty {
  background: var(--glass-bg-subtle);
  border-color: var(--glass-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* —— Status chip (product-domain) —— */
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 12%, var(--surface));
  color: var(--ui-status-info);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.ui-status--pending { color: var(--ui-status-pending); }
.ui-status--waiting { color: var(--ui-status-waiting); }
.ui-status--ok { color: var(--ui-status-ok); }
.ui-status--bad { color: var(--ui-status-bad); }
.ui-status--info { color: var(--ui-status-info); }

/* —— Alerts (theme-aware; предпочтительнее хардкода .alert-*) —— */
.ui-alert {
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading);
  white-space: pre-wrap;
  margin: 0 0 var(--space-3);
}
.ui-alert--info {
  border-color: color-mix(in srgb, var(--ui-status-info) 28%, transparent);
  background: color-mix(in srgb, var(--ui-status-info) 12%, var(--surface));
  color: var(--ui-status-info);
}
.ui-alert--ok {
  border-color: color-mix(in srgb, var(--ui-status-ok) 28%, transparent);
  background: color-mix(in srgb, var(--ui-status-ok) 14%, var(--surface));
  color: var(--tone-good-text);
}
.ui-alert--error {
  border-color: color-mix(in srgb, var(--ui-status-bad) 28%, transparent);
  background: color-mix(in srgb, var(--ui-status-bad) 14%, var(--surface));
  color: var(--tone-bad-text);
}
.ui-alert[hidden] { display: none !important; }

/* Совместимость: .ack на пилоте может нести ui-alert-* */
.ack.ui-alert { margin-bottom: var(--space-3); }

/* —— Skeleton —— */
.ui-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ui-skeleton .skel-row,
.ui-skeleton__row {
  height: 3rem;
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text) 4%, transparent),
    color-mix(in srgb, var(--text) 10%, transparent),
    color-mix(in srgb, var(--text) 4%, transparent)
  );
  background-size: 200% 100%;
  animation: skel 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ui-skeleton .skel-row,
  .ui-skeleton__row { animation: none; }
}

/* —— Control pending (кнопка ждёт job) —— */
.btn-primary.is-pending,
.btn-secondary.is-pending {
  position: relative;
  cursor: wait;
}
.btn-primary[aria-busy="true"],
.btn-secondary[aria-busy="true"] {
  cursor: wait;
}

/* —— As-of / stale line —— */
.ui-asof {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.ui-asof.is-stale { color: var(--ui-status-waiting); }