/* Заполнение — общий компонент Meter: сколько занято из лимита (страницы, файлы, место).
   Figma «Lidfly дизайн-система» → Поля и выбор → Meter (7442:707), копия стр. 00 (1184:5634).
   Подпись слева, значение «969 из 1 000» справа — числа, не проценты. Тон: обычный до 90 %,
   .lf-meter--near от 90 % (значение «… · осталось N»), .lf-meter--full — лимит («… · лимит»).
   Доля занятого — style="--lf-meter-value: 0.969". Разметка: role="meter" с aria-valuenow,
   aria-valuemax и aria-valuetext; цвет не единственный носитель смысла. См. docs/DESIGN-SYSTEM.md → «Заполнение». */

.lf-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lf-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 18px;
}

.lf-meter__label {
  color: var(--color-text);
  font-weight: 500;
}

.lf-meter__value {
  min-width: 0;
  color: var(--color-text-secondary);
  text-align: right;
  overflow-wrap: anywhere;
}

.lf-meter__track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-border);
}

.lf-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(clamp(0, var(--lf-meter-value, 0), 1) * 100%);
  min-width: 4px;
  border-radius: inherit;
  background: var(--color-forest-fill);
}

.lf-meter--near .lf-meter__fill {
  background: var(--status-warning-dot);
}

.lf-meter--near .lf-meter__value {
  color: var(--status-warning-fg);
}

.lf-meter--full .lf-meter__fill {
  background: var(--status-danger-dot);
}

.lf-meter--full .lf-meter__value {
  color: var(--status-danger-fg);
}