/* ════════════════════════════════════════════════════════════════════
   PaidUp · meter.css  (the design system · the SIGNAL METER)
   The system's glanceable stat readout, vendored from the canonical
   Canvass build and re-pointed at PaidUp's numbers. A labeled 5-tick bar
   plus a solid-fill, dark-ink verdict pill (Best / Good / Fair / Low).
   Meaning is carried by the WORD and the lit-tick count, never by color
   alone, so it reads for colorblind operators and in sun glare. Token-only;
   the verdict hue arrives via --v / --ink from the data-verdict map. Dark
   ink on the fill is AA for all four verdicts (white-on-red/trust fails).

   Markup:
     <div class="meter" data-verdict="low" role="img"
          aria-label="Collections health: low, 2 of 5">
       <div class="meter__top">
         <span class="meter__label">Collections health</span>
         <span class="meter__verdict">Low</span>
       </div>
       <div class="meter__track" aria-hidden="true">
         <i class="meter__tick on"></i> ... 5 ticks, .on on the lit count
       </div>
       <div class="meter__note">26.6k overdue of 41.1k open</div>
     </div>
   ════════════════════════════════════════════════════════════════════ */

.meter { --v: var(--ember); --ink: var(--ember-ink); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meter[data-verdict="best"] { --v: var(--ember-hi); --ink: var(--ember-ink); }   /* gold is the top */
.meter[data-verdict="good"] { --v: var(--green);    --ink: var(--green-ink); }
.meter[data-verdict="fair"] { --v: var(--amber);    --ink: var(--amber-ink); }
.meter[data-verdict="low"]  { --v: var(--red);      --ink: var(--red-ink); }

.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.meter__label {
  font: 400 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the verdict: SOLID fill + dark ink, AA for all four verdicts */
.meter__verdict {
  font: 700 10px/1 var(--body); letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--v); color: var(--ink); flex-shrink: 0;
}

.meter__track { display: flex; gap: 3px; height: 9px; }
.meter__tick {
  flex: 1; border-radius: var(--r-inner); background: var(--line-hi);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.25);
  transition: background var(--m-base) var(--ease);
  animation: meterFill var(--m-pulse) var(--ease-spring) both;
}
.meter__tick.on {
  background: var(--v);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--v) 30%, transparent);
}
.meter__note { font-family: var(--mono); font-size: 11px; color: var(--plat-dim); }
@keyframes meterFill { from { transform: scaleX(.2); opacity: .4; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .meter__tick { animation: none; } }
@media (prefers-color-scheme: light) { .meter__tick { box-shadow: inset 0 1px 1px rgba(40,34,22,.08); } }