/* Состояния данных: бейджи, «≈», свежесть источников, тревоги. Значение каждого цвета закреплено (README дизайн-системы). */

/* ---------- Бейджи ---------- */
.mh-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted);
  font: 700 10.5px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.mh-badge--accent { background: var(--accent-soft); color: var(--accent); }
.mh-badge--cyan { background: var(--cyan-soft); color: var(--cyan); }
.mh-badge--magenta { background: var(--magenta-soft); color: var(--magenta); }
.mh-badge--gain { background: var(--gain-soft); color: var(--gain); }
.mh-badge--loss { background: var(--loss-soft); color: var(--loss); }
.mh-badge--warn { background: var(--warn-soft); color: var(--warn); }
.mh-badge--demo {
  height: 24px; padding: 0 10px; color: var(--warn); border: 1px solid var(--warn);
  background: repeating-linear-gradient(135deg, var(--warn-soft) 0 8px, var(--surface) 8px 16px);
}
/* Сумма дней из разных таймзон — приблизительная (CLAUDE.md, принцип 5). */
.mh-approx { color: var(--warn); font-family: var(--font-mono); margin-right: 2px; cursor: help; }

/* ---------- Свежесть источника: «дані на ЧЧ:ММ» (принцип 7) ---------- */
.mh-fresh-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mh-fresh {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink-muted);
  font: 600 12px/1 var(--font-sans); white-space: nowrap;
}
.mh-fresh__time { font-family: var(--font-mono); color: var(--ink); }
.mh-fresh__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); box-shadow: var(--shadow-glow-cyan); }
.mh-fresh--stale .mh-fresh__dot { background: var(--warn); box-shadow: none; }
.mh-fresh--stale .mh-fresh__time { color: var(--warn); }
.mh-fresh--fail { border-color: var(--loss); }
.mh-fresh--fail .mh-fresh__dot { background: var(--loss); box-shadow: none; }
.mh-fresh--fail .mh-fresh__time { color: var(--loss); }
.mh-fresh--ok .mh-fresh__dot { animation: mh-pulse 2.4s ease-in-out infinite; }
@keyframes mh-pulse { 50% { opacity: .45; } }

/* ---------- Тревоги о данных ---------- */
.mh-alert {
  display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
}
.mh-alert > svg { width: 20px; height: 20px; }
.mh-alert__title { margin: 0; font-weight: 700; }
.mh-alert__text { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.mh-alert--loss { border-color: var(--loss); background: var(--loss-soft); }
.mh-alert--loss > svg { color: var(--loss); }
.mh-alert--warn { border-color: var(--warn); background: var(--warn-soft); }
.mh-alert--warn > svg { color: var(--warn); }
.mh-alert--info > svg { color: var(--cyan); }

@media (max-width: 640px) {
  .mh-alert { grid-template-columns: 20px 1fr; }
  .mh-alert > :last-child:not(div) { grid-column: 2; justify-self: start; }
}