/*
 * design-system/components/stat.css
 * Editorial Calm — Stat (KPI). ТЗ 4.2.
 *
 * 4 канонических состояния:
 *   data    — число + лейбл + опциональная дельта
 *   loading — skeleton-полоска вместо числа, лейбл остаётся
 *   empty   — "—" + микрокопия "Данные ожидаются"
 *   error   — иконка + кнопка "Попробовать снова"
 *
 * Использование:
 *   <div class="ed-stat">
 *     <div class="ed-stat__value">12 408</div>
 *     <div class="ed-stat__label">фактов в БЗ</div>
 *     <div class="ed-stat__delta ed-stat__delta--up">+ 12% за неделю</div>
 *   </div>
 *
 * Loading:
 *   <div class="ed-stat" data-state="loading">
 *     <div class="ed-skel ed-skel--text" style="width: 60%; height: 32px;"></div>
 *     <div class="ed-stat__label">фактов в БЗ</div>
 *   </div>
 *
 * Empty:
 *   <div class="ed-stat" data-state="empty">
 *     <div class="ed-stat__value">—</div>
 *     <div class="ed-stat__label">фактов в БЗ</div>
 *     <div class="ed-stat__hint">Данные ожидаются</div>
 *   </div>
 *
 * Error:
 *   <div class="ed-stat" data-state="error">
 *     <div class="ed-stat__error">
 *       <svg>...</svg>
 *       <span>Не удалось загрузить</span>
 *       <button class="ed-btn ed-btn--ghost ed-btn--sm">Попробовать снова</button>
 *     </div>
 *     <div class="ed-stat__label">фактов в БЗ</div>
 *   </div>
 *
 * ЗАПРЕЩЕНО (ТЗ 4.2):
 *  • Использовать "—" как loading-индикатор. Это empty-state.
 *  • Лейбл ПЕРВЫМ, число вторым. Лейбл ВСЕГДА снизу.
 *  • Дельта без знака. Всегда "+ 12%" или "− 4%".
 */

[data-theme="editorial"] .ed-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) 0;
}

[data-theme="editorial"] .ed-stat__value {
  font-family: var(--font-sans);
  font-size: var(--t-kpi-size);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "tnum";
}

[data-theme="editorial"] .ed-stat__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-3);
}

[data-theme="editorial"] .ed-stat__delta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  font-weight: 500;
  margin-top: var(--s-1);
  color: var(--ink-3);
}
[data-theme="editorial"] .ed-stat__delta--up   { color: var(--good); }
[data-theme="editorial"] .ed-stat__delta--down { color: var(--bad);  }
[data-theme="editorial"] .ed-stat__delta--flat { color: var(--ink-3); }

/* Empty-state hint под лейблом */
[data-theme="editorial"] .ed-stat__hint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-4);  /* допустимо — это decorative-hint */
  margin-top: var(--s-1);
}

/* Error — компактный inline-блок с иконкой и кнопкой повтора */
[data-theme="editorial"] .ed-stat__error {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--t-caption-size);
  color: var(--bad);
}
[data-theme="editorial"] .ed-stat__error svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* XL-вариант — для главного KPI на странице (ТЗ 3.2 --t-kpi-xl) */
[data-theme="editorial"] .ed-stat--xl .ed-stat__value {
  font-size: var(--t-kpi-xl-size);
}

/* Inline-вариант: число и лейбл в одну строку, через тонкий разделитель */
[data-theme="editorial"] .ed-stat--inline {
  flex-direction: row;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0;
}
[data-theme="editorial"] .ed-stat--inline .ed-stat__label::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--rule);
  margin-right: var(--s-3);
  vertical-align: middle;
}