/*
 * 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 in a table is brick and in brackets, which
 * `format_number` prints; a price change carries a ▲ or ▼ and a sign
 * (`change_arrow_tag`, `negative: :sign`). Colour is never the only signal.
 *
 * The three standalone sizes — a stat-bar value, an index level, a company's
 * price — are set in the serif (tasks/redesign, D1).
 */
@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,
  .figure--display,
  .figure--hero {
    font-family: var(--font-prose);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
  }

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

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

  .figure--hero {
    font-size: var(--text-figure-xl);
    line-height: var(--leading-figure-xl);
    letter-spacing: -0.015em;
  }

  /* ▲ / ▼ before a change, a notch smaller than the figure it leads. */
  .figure__arrow {
    font-size: 0.8em;
    line-height: 1;
  }

  /*
   * 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;
    }
  }

  /*
   * A value withheld while a hard data anomaly is open on it
   * (DataQuality::SuppressedCells). A quiet em dash, set apart from an
   * ordinary blank only by the help cursor over it, whose title says why.
   */
  .figure--suppressed {
    color: var(--color-ink-subtle);
    cursor: help;
  }
}