/* ==========================================================================
   Meter  (.pf-meter)
   A BOUNDED score (x out of N) drawn as N hairline segments: filled in ink up to the
   score, hairline after, the exact number in text at the end. For a score with a fixed
   ceiling (a CSAT out of 10, a rating out of 5), and especially two on the same scale
   (rebuilt vs legacy), so the gap reads at a glance instead of in two numbers. Not a
   chart and not a stat: a count or an open-ended figure has no ceiling and stays a
   .pf-stats value (EVIDENCE: the number is the figure).

   <ul class="pf-meter">
     <li class="pf-meter__row" style="--pf-meter-n: 10; --pf-meter-v: 8.4;">
       <span class="pf-meter__label">Beta cohort CSAT, rebuilt add-in</span>
       <span class="pf-meter__value">8.4<span class="pf-meter__unit">/10</span></span>
       <span class="pf-meter__track" aria-hidden="true"></span>
     </li>
     <li class="pf-meter__row pf-meter__row--context" style="--pf-meter-n: 10; --pf-meter-v: 2.5;">
       …
     </li>
   </ul>

   The track is CSS only: a two-stop gradient fills the score's share of the width, and a
   repeating mask cuts it into N segments with a --pf-space-1 gap, sized so the last
   segment ends exactly at the row's right edge under the value. A fractional score
   part-fills a segment (8.4 shows eight and a bit), which is the honest reading; the
   number beside it is exact. The track is aria-hidden: the label and value are the
   content a screen reader gets ("Beta cohort CSAT, rebuilt add-in 8.4/10").

   Colours are text and hairline tokens only; the reference pattern (a product spec
   rating) is black and gray too. Pink appears nowhere (R5). No motion, no JS.
   ========================================================================== */

.pf-meter {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-meter__row {
  --pf-meter-n: 10;                   /* the ceiling: how many segments */
  --pf-meter-v: 0;                    /* the score, in the same unit */
  --pf-meter-fill: var(--pf-ink);     /* the filled segments; the context row recedes */
  /* v0.9.83: the UNFILLED segments, the soft hairline (was --pf-hairline). On the white box or
     tile the meter now sits on, the plain hairline read as a second, lighter fill; the soft
     one reads as the empty ceiling (Louis: "a lighter grey or a white for the non-filled
     parts"). Decorative (the track is aria-hidden; the number is the value), so no pair. */
  --pf-meter-empty: var(--pf-hairline-soft);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--pf-space-3);
  row-gap: var(--pf-space-1);
  align-items: baseline;
}

/* The comparison row (the legacy score beside the rebuilt one): secondary ink, the
   chart's "context series" role, so the headline row leads. */
.pf-meter__row--context {
  --pf-meter-fill: var(--pf-ink-secondary);
}

.pf-meter__label {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-body);
  line-height: var(--pf-lh-tight);
  color: var(--pf-ink);
}

/* The number, in the display face like a stat value, one step smaller so a row stays a row. */
.pf-meter__value {
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-h3);
  line-height: var(--pf-lh-tight);
  letter-spacing: var(--pf-tracking-display);
  font-variant-numeric: proportional-nums;
  color: var(--pf-ink);
  white-space: nowrap;
}

/* The ceiling ("/10") set smaller and secondary so the score leads. */
.pf-meter__unit {
  font-size: 0.7em;
  letter-spacing: var(--pf-tracking-label);
  margin-left: 0.1em;
  color: var(--pf-ink-secondary);
}

.pf-meter__track {
  /* One segment's width: the row minus the N-1 gaps, split N ways. */
  --_seg: calc((100% - (var(--pf-meter-n) - 1) * var(--pf-space-1)) / var(--pf-meter-n));
  grid-column: 1 / -1;
  display: block;
  height: var(--pf-border-strong);
  background: linear-gradient(
    to right,
    var(--pf-meter-fill) 0 min(100%, calc(100% * var(--pf-meter-v) / var(--pf-meter-n))),
    var(--pf-meter-empty) 0
  );
  -webkit-mask: repeating-linear-gradient(
    to right,
    var(--pf-ink) 0 var(--_seg),
    transparent 0 calc(var(--_seg) + var(--pf-space-1))
  );
  mask: repeating-linear-gradient(
    to right,
    var(--pf-ink) 0 var(--_seg),
    transparent 0 calc(var(--_seg) + var(--pf-space-1))
  );
}

/* Stat form (v0.9.83) — the meter as ONE item of the glance band's stat row, in place of the
   stat tile that would otherwise carry the same score (a bounded score with a comparison on
   its own scale is the meter's case; showing it as a tile AND a meter repeats the number).
   The two rows stay STACKED on one shared axis: side by side, each score would get its own
   axis and the gap would be judged across a gutter, and aligned position is the strongest
   visual comparison there is (Cleveland & McGill, 1984). The host <li class="pf-stats__item
   pf-stats__item--wide"> is the white tile (stats.css) and spans two stat columns so the
   tracks get the length to show a gap in tenths; a .pf-stats__compare after the list carries
   the "vs what" line like any other stat. Tighter row gap; the value one step up from the
   figure form so it holds its own beside the display-size stat values without becoming one.

   <li class="pf-stats__item pf-stats__item--wide">
     <ul class="pf-meter pf-meter--stat">…two .pf-meter__row…</ul>
     <span class="pf-stats__compare">8-firm beta cohort, scored calls Jul to Aug 2026</span>
   </li> */
.pf-meter--stat {
  gap: var(--pf-space-2);
}
.pf-meter--stat .pf-meter__value {
  font-size: var(--pf-text-h2);
}