/*
 * An indicator's definition card (shared/_definition_card, M09-D6): its
 * meaning, the formula stockrow computes it with and the caveats that go
 * with it, then its facts as a list of labelled lines. The formula is set in
 * the data face, like every figure; the inputs in it are links to their own
 * cards.
 */
@layer components {
  .definition-card {
    display: grid;
    gap: var(--space-md);

    & p {
      margin: 0;
    }
  }

  .definition-card__meaning {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-prose);
    line-height: var(--leading-prose);
  }

  .definition-card__formula {
    display: grid;
    gap: var(--space-xs);
  }

  .definition-card__expression {
    font-family: var(--font-data);
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  /* "TTM" over a formula when the periods are worked out differently. */
  .definition-card__periods {
    display: block;
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-meta);
  }

  .definition-card__caveat {
    color: var(--color-ink-soft);
    font-size: var(--text-ui-sm);
  }

  .definition-card__facts {
    display: grid;
    margin: 0;
  }

  .definition-card__fact {
    display: grid;
    gap: var(--space-2xs) var(--space-md);
    padding-block: var(--space-xs);
    border-block-start: var(--rule-width) solid var(--color-surface-sunken);
    font-size: var(--text-ui-sm);

    @media (width >= 640px) {
      grid-template-columns: 8rem 1fr;
    }

    & dt {
      color: var(--color-ink-muted);
    }

    & dd {
      margin: 0;
    }
  }
}