/* ============================================
   Data figure — survey shares inside case-study text
   Static bars on one 0–100% scale. The number and
   what it counts sit above the bar; nothing moves.
   ============================================ */

.data-figure {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  background-color: var(--color-surface-primary);
  border-radius: 0;
  font-family: var(--font-body);
  letter-spacing: var(--tracking-snug);
}

.data-figure__caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-softer);
}

.data-figure__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.data-figure__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
}

.data-figure__value {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.data-figure__label {
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  color: var(--color-text-body);
  text-wrap: pretty;
}

.data-figure__bar {
  grid-column: 1 / -1;
  position: relative;
  height: var(--space-1);
  background-color: var(--color-border);
}

.data-figure__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 0%);
  background-color: var(--color-text-primary);
}

/* Comparison without a scale: value and meaning only */
.data-figure--plain .data-figure__row {
  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
}