/* ==========================================================================
   Stat strip  (.pf-stats)
   Two to four headline numbers for a case study, each with a "compared to what"
   line, so a scanner reads the outcome before the prose. Not a chart: when the
   data is a handful of numbers, the number IS the figure (dataviz: stat tile /
   KPI row). Every stat carries its comparison — a bare number is decoration.

   <ul class="pf-stats pf-stats--rule">
     <li class="pf-stats__item">
       <span class="pf-stats__value">8.4<span class="pf-stats__unit">/10</span></span>
       <span class="pf-stats__label">Beta cohort CSAT</span>
       <span class="pf-stats__compare">vs 2.5 for the legacy add-in</span>
     </li>
   </ul>

   The value sits in the DS display face (Open Sans Condensed — the system's sans;
   a serif hero number reads as decoration) with proportional figures, never
   tabular (equal-width digits look loose at display size). Label and comparison
   are serif text tokens: text never wears a data colour, and pink never touches
   text (R5). Columns come from auto-fit, so no breakpoint is needed (R12): four
   across in the reading column, two across on a phone.
   ========================================================================== */

.pf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--pf-space-3) var(--pf-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Framed by hairlines top + bottom, so the strip reads as a deliberate band
   between the intro and the prose rather than four loose numbers. */
.pf-stats--rule {
  padding-block: var(--pf-space-3);
  border-block: var(--pf-border) solid var(--pf-hairline);
}

/* Column caps: --2 / --3 / --4 pin the count on wide screens so a two-stat strip
   doesn't stretch each number across half the column. Still auto-fits narrower. */
.pf-stats--2 { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); max-width: 24rem; }
.pf-stats--3 { max-width: 36rem; }
.pf-stats--4 { max-width: none; }

.pf-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-1);
  min-width: 0;
}

.pf-stats__value {
  display: block;
  font-family: var(--pf-font-display);
  font-weight: var(--pf-weight-display);
  font-size: var(--pf-text-display);
  line-height: var(--pf-lh-display);
  letter-spacing: var(--pf-tracking-display);
  font-variant-numeric: proportional-nums;
  text-transform: none;                 /* digits + a unit; never forced caps */
  color: var(--pf-ink);
  /* v0.16.1: break-word, not anywhere. `anywhere` also lowers the value's min-content width, so a
     narrow tile shrank under the number and split "17,432" across lines (round-1 home prototype,
     2026-10-13). break-word keeps the number whole and breaks only one that can't fit at all. */
  overflow-wrap: break-word;
}

/* A unit or denominator ("/10", "%", "×") set smaller so the number leads. */
.pf-stats__unit {
  font-size: 0.5em;
  letter-spacing: var(--pf-tracking-label);
  margin-left: 0.05em;
}

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

/* The "compared to what" line — required. Secondary ink, small serif. */
.pf-stats__compare {
  display: block;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  line-height: 1.4;
  color: var(--pf-ink-secondary);
}

/* Tiles (v0.9.82) — each stat on its own surface tile, for the strip's slot inside the glance
   band (which sits on the gray stage). The white tiles ARE the division between the facts and
   the numbers, so the band's seam hairline goes (glance.css), and the small compare line lands
   on --pf-surface (5.3:1 light / 7.9:1 dark) instead of the panel (4.7:1 / 7.4:1); both pairs
   are in the manifest (R4). Reference: the results module of a customer story (Stripe) and the
   dataviz stat tile — tiles on a tinted stage. Text and surface tokens only; no pink (R5). */
.pf-stats--tiles {
  gap: var(--pf-space-2);
}
.pf-stats--tiles .pf-stats__item {
  padding: var(--pf-space-3);
  background: var(--pf-surface);
}

/* Wide item (v0.9.83) — a stat that needs two columns of the strip: the meter in its stat
   form (.pf-meter--stat), whose tracks need the length to show a gap in tenths. On a phone
   column (480) the strip is one column wide, and a spanning item in an auto-fit grid would
   force a second implicit track and overflow, so the span resets there (R12: a manifest
   breakpoint). */
.pf-stats__item--wide {
  grid-column: span 2;
}
@media (max-width: 480px) {
  .pf-stats__item--wide {
    grid-column: auto;
  }
}