@layer components {
  /*
    集計の値。実測: highrise/highrise-deals-list-sidebar-2016.png（2倍）。
    - 集計の行「Pending deals — 1,537 worth $2,838,288」(533, 425, 460, 25): 名前は黒 #000000 の太字、値は #222222 の通常の太さ。
    - 案件の金額「$1,000,000」(682, 610, 135, 30): 黒の太字。補足「Lynette Kontny is responsible」は #888888。
    名前は手本の集計の行と同じ黒の太字（Retrixの段の --rx-label）にする。数字だけを大きく書く形は手本に無いので、
    BC2のプロジェクトのカードのタイトル（20pxの黒い太字。structure.md）を段に当てはめた18pxの太字にする（推測）。
    単位と補足は、手本の補足の #888888 を4.5:1まで暗くした --rx-muted（#666666）の通常の太さ。
  */
  .rx-statistic {
    min-inline-size: 0;
    max-inline-size: 100%;
    color: var(--rx-text);
    & > dt {
      color: var(--rx-ink);
      font-size: var(--rx-label);
      font-weight: 700;
      line-height: var(--rx-label-leading);
    }
    & > .value {
      margin-block-start: var(--rx-space-1);
      color: var(--rx-ink);
      font-family: var(--rx-control-font-family);
      font-size: var(--rx-title);
      font-weight: 700;
      line-height: calc(8 / 7);
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
      & > small {
        margin-inline-start: 0.35em;
        color: var(--rx-muted);
        font-size: var(--rx-label);
        font-weight: 400;
      }
    }
    & > .note {
      margin-block-start: var(--rx-space-1);
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
    }
  }
}