/* ==========================================================================
   02 STAT BAND — the one bold move, now a measuring rule rather than a slab.
   Ticks run along the top and bottom edges, every fifth long; the vertical
   dividers are gone because the ticks do that work. The four figures sit on
   the scale as readings. 0 images.
   ========================================================================== */

.statband {
  --chamfer: var(--chamfer-lg);
  position: relative;
  background: var(--surface-accent);
  color: var(--text-on-accent);
  clip-path: var(--chamfer-clip);
}

/* the graduations. The tick rule is composed per-element, so the band sets its
   own inks, pitch and mark lengths and --tick-rule follows. */
.statband {
  --tick-ink: var(--tick-ink-accent);
  --tick-ink-major: var(--tick-ink-accent-major);
  --tick-pitch: var(--tick-band-pitch);
  --tick-len: var(--tick-band-len);
  --tick-len-major: var(--tick-band-len-major);
}
.statband::before,
.statband::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--tick-rule-h);
  background: var(--tick-rule);
  pointer-events: none;
}
.statband::before { inset-block-start: 0; }
.statband::after { inset-block-end: 0; transform: scaleY(-1); }

.statband__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-band);
}

.statband__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
}

.statband__fig {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-stat);
  font-weight: var(--weight-bold);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-mono-tight);
}
/* the $ and M in $2M are fragments, not footnotes: at --text-h4 against a
   64px figure the value read as a lone "2". */
.statband__unit {
  font-size: var(--text-price);
  font-weight: var(--weight-medium);
  color: var(--text-on-accent-muted);
}
/* a trailing unit needs the space a flex item collapses away */
.statband__unit--sp { margin-inline-start: var(--space-3xs); }

.statband__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-accent-muted);
}

/* 4-up only once a cell can hold the longest reading in the shipped mono face:
   at 768 the cell is 178px and "2,400+" measures 175px before the label, which
   is a cell driven by its own figure. Measured, not estimated. */
@media (min-width: 1200px) {
  .statband__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}