@layer ed-utilities {
  /* A key figure and its label on one line: <div class="ed-kpi"><span class="ed-kpi-value">137</span>
     <span>open</span></div>. The label keeps the body text it inherits. */
  .ed-kpi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--ed-space-2);
  }

  /* The display above beats the user-agent [hidden] rule. until-found hides by content-visibility
     and keeps its box. */
  .ed-kpi[hidden]:not([hidden='until-found' i]) {
    display: none;
  }

  .ed-kpi-value {
    font-family: var(--ed-font-family-body);
    font-size: var(--ed-font-size-3xl);
    font-weight: var(--ed-font-weight-bold);
    line-height: var(--ed-line-height-normal);
    color: var(--ed-color-text);
  }
}