/* Экран «Расходы». Полоски месяцев и предупреждение о неполном справочнике. */

.card.warn {
  background: var(--warn-soft);
  color: var(--warn);
  padding: var(--s4, 16px);
  font-size: var(--t-subhead);
  line-height: 1.4;
}

/* Полоска месяца. Ширина — доля от САМОГО БОЛЬШОГО месяца, а не от суммы за
 * год: доли от года на двенадцати строках все одинаково короткие, и картинка
 * перестаёт что-либо показывать. */
.bar-row .row-main { gap: 6px; }

.bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  min-width: 2px;
  transition: width .2s ease;
}