/* ── Meter ─────────────────────────────────────────────────────────────────
   A share of a known whole, as a bar. Used for «скільки прав із каталогу» on
   the role list and in the role editor; nothing about it is role-specific. */
.meter {
  height: 5px; border-radius: var(--radius-pill); overflow: hidden;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}
.meter-lg { height: 8px; }
.meter-fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent-2); transition: width .18s ease;
}
/* Nothing to be a share *of* yet — the import modal's file is still being read, or
   its upload has not reported a computable length. A stripe sliding through the whole
   track says «busy» where a bar sitting at 0% says «stuck», which is the reading that
   makes somebody close the window mid-run. */
.meter.is-waiting .meter-fill {
  width: 35%; transition: none;
  animation: meterWait 1.1s ease-in-out infinite;
}
@keyframes meterWait {
  from { transform: translateX(-100%); }
  to { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
  .meter.is-waiting .meter-fill { animation: none; width: 100%; opacity: .4; }
  .meter-fill { transition: none; }
}

.meter-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.meter-value { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-strong); }
.meter-total { color: var(--muted-2); font-weight: 500; }