/* ════════════════════════════════════════════════════════════════════
   CANVASS PRO · meter.css
   The SIGNAL METER: a compact, glanceable score-factor mini-gauge, the
   Section 8 Pro "Financial / Repair / Location / Demand" bar-readout
   translated to the dark instrument. Each DataGrid score factor renders as
   a labeled row: a discrete 5-tick bar + a solid-fill ink-on-pill verdict
   (Best / Good / Fair / Low). Meaning is carried by the WORD and the lit
   tick count, never by color alone, so it reads for colorblind and
   sun-glare reps. TOKEN-ONLY; the verdict hue arrives via --v from the
   data-verdict map below.

   Markup per factor:
     <div class="meter" data-verdict="best" role="img"
          aria-label="Buyer intent: best, 5 of 5">
       <div class="meter__top">
         <span class="meter__label">Buyer intent</span>
         <span class="meter__verdict">Best</span>
       </div>
       <div class="meter__track" aria-hidden="true">
         <i class="meter__tick on"></i> ... 5 ticks, .on on the lit count
       </div>
     </div>
   ════════════════════════════════════════════════════════════════════ */

.meter { --v: var(--ember); --ink: var(--ember-ink); display: flex; flex-direction: column; gap: 5px; 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(--body); color: var(--plat-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the verdict: SOLID fill + dark ink, AA for all five verdicts */
.meter__verdict {
  font: 700 10px/1 var(--body); letter-spacing: .04em;
  padding: 2px 7px; 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);
}
@keyframes meterFill { from { transform: scaleX(.2); opacity: .4; } to { transform: none; opacity: 1; } }

/* a tidy two-up grid of meters that drops to one column when the surface is
   tight (the narrow desktop door sheet), so labels never truncate awkwardly */
.meter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: var(--s-3) var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  .meter__tick { animation: none; }
}
@media (prefers-color-scheme: light) {
  .meter__tick { box-shadow: inset 0 1px 1px var(--hairline); }
}