/*
 * Every number on the site, from `formatted_number_tag`: tabular lining
 * figures, so a column of them aligns on the decimal, at the data size unless
 * the caller asks for another with `size:`.
 *
 * Sign is colour AND form: a loss is red and in parentheses, which
 * `format_number` prints. Colour is never the only signal.
 */
@layer components {
  .figure {
    font-family: var(--font-data);
    font-size: var(--text-data);
    line-height: var(--leading-data);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
  }

  .figure--gain { color: var(--color-gain); }
  .figure--loss { color: var(--color-loss); }

  .figure--ui {
    font-size: var(--text-ui);
    line-height: var(--leading-ui);
  }

  .figure--stat {
    font-size: var(--text-stat);
    line-height: var(--leading-stat);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.005em;
  }

  .figure--display {
    font-size: var(--text-figure-lg);
    line-height: var(--leading-figure-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
  }

  /*
   * A value a free reader does not get. It recedes as data — a flat bar of
   * fixed width, the same in every cell, so the real numbers beside it stay
   * the focus — and it is named for assistive technology by the aria-label
   * the helper puts on it. The ‡ stays in the DOM, because that is the value
   * the page printed; it is just not drawn.
   */
  .figure--masked {
    display: inline-block;
    inline-size: 3rem;
    block-size: 0.75rem;
    border: var(--rule-width) solid var(--color-mask-line);
    border-radius: var(--radius-xs);
    background-color: var(--color-mask);
    vertical-align: middle;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    user-select: none;

    @media (width >= 768px) {
      inline-size: 2.75rem;
      block-size: 0.6875rem;
    }
  }
}