/*
  statCard — one card that calls attention to a number (component.json statCard, 13 tokens).
  Two slots: an optional media slot on top (full width, no padding) and the content slot (the card's padding).
  Fill depends on the ground it sits on: --lighter on a gray.300 section (e.g. the Overview),
  --darker on a gray.100 or gray.200 section. No border, no shadow: depth comes from the value shift.
  Text inside is always left-aligned.
*/

.stat-card {
  border-radius: var(--stat-card-radius-all);
  overflow: hidden; /* clips a media slot's top corners to the card's radius */
}
.stat-card--lighter { background-color: var(--stat-card-fill-lighter); }
.stat-card--darker  { background-color: var(--stat-card-fill-darker); }

.stat-card__content {
  padding: var(--stat-card-content-padding-all);
  display: flex;
  flex-direction: column;
}

/* optional: a date or cohort label above the number, only to tell sibling cards apart */
.stat-card__date {
  font-family: var(--stat-card-date-label-text-style-all-font-family);
  font-size: var(--stat-card-date-label-text-style-all-font-size);
  font-weight: var(--stat-card-date-label-text-style-all-font-weight);
  line-height: var(--stat-card-date-label-text-style-all-line-height);
  letter-spacing: var(--stat-card-date-label-text-style-all-letter-spacing);
  text-transform: uppercase;
  color: var(--stat-card-supporting-content-all);
  margin-block-end: var(--stat-card-date-label-gap-all);
}

/* the number, plus at most one change word ("growth") on the same line, same style */
.stat-card__number {
  font-family: var(--stat-card-number-text-style-all-font-family);
  font-size: var(--stat-card-number-text-style-all-font-size);
  font-weight: var(--stat-card-number-text-style-all-font-weight);
  line-height: var(--stat-card-number-text-style-all-line-height);
  color: var(--stat-card-number-content-all);
}

.stat-card__caption {
  font-family: var(--stat-card-caption-text-style-all-font-family);
  font-size: var(--stat-card-caption-text-style-all-font-size);
  font-weight: var(--stat-card-caption-text-style-all-font-weight);
  line-height: var(--stat-card-caption-text-style-all-line-height);
  color: var(--stat-card-supporting-content-all);
  margin-block-start: var(--stat-card-number-gap-all);
  text-wrap: balance; /* avoids two-word widows like "in use" */
}

/* optional: the workings zone showing the math (the cost card only, today) */
.stat-card__workings {
  font-family: var(--stat-card-workings-text-style-all-font-family);
  font-size: var(--stat-card-workings-text-style-all-font-size);
  font-weight: var(--stat-card-workings-text-style-all-font-weight);
  line-height: var(--stat-card-workings-text-style-all-line-height);
  color: var(--stat-card-supporting-content-all);
  margin-block-start: var(--stat-card-caption-gap-all);
}