@layer components {
  /*
    図と数値の表。HighriseのStatisticsのグラフに合わせる
    （実測: highrise/highrise-statistics-notes-chart-2016.png。2倍。2016年の画面だが、37signalsのグラフの手本はこれだけ）。
    - 図は枠も面も持たず、シートの上に直接描く。題名「Notes: Created」は黒い太字（約16px → 本文の13px）。
    - 図の中の線は利用側が描く。手本の値は、目盛りの横線1px #e6e6e6、0の線1px #c0c0c0、系列は平らな #018eec の2pxの線。
      目盛りの文字は #cccccc だが白地で4.5:1に届かないので、見本では抜粋と同じ #666666 にする。
    - 手本は題名の下に1px #cccccc の線を引くが、Retrixは見出しから線を伸ばさない（docs/principles.md「まとまりの見出し」）ので引かない。
    系列の色は平らな塗りにする（グラデーションを使わない）。説明と出典は灰色の小さな文字。数値の表はDisclosureに収める。
  */
  .rx-chart-frame {
    display: grid;
    gap: var(--rx-space-2);
    min-inline-size: 0;
    max-inline-size: 36rem;
    margin: 0;
    &[data-size="wide"] {
      max-inline-size: none;
    }
  }

  .rx-chart-frame > figcaption {
    display: grid;
    gap: var(--rx-space-1);
    overflow-wrap: anywhere;
    & > strong {
      font-size: var(--rx-body);
      line-height: var(--rx-label-leading);
      font-weight: 600;
    }
    & > span {
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
    }
  }

  /* 図は枠を持たずシートの上に置く。はみ出す図は、この中で横にスクロールする。 */
  .rx-chart-frame > .graphic {
    min-inline-size: 0;
    overflow: auto;
    & > svg {
      display: block;
      max-inline-size: 100%;
      block-size: auto;
    }
  }

  .rx-chart-frame > .legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rx-muted);
    font-size: var(--rx-small);
    line-height: var(--rx-small-leading);
    & > li {
      display: inline-flex;
      align-items: center;
      gap: var(--rx-space-1);
    }
    /* 凡例のマークは系列と同じ色の、平らな小さな四角にする。 */
    & > li > .mark {
      inline-size: 0.625rem;
      block-size: 0.625rem;
      border-radius: var(--rx-radius-mark);
      background: var(--rx-link);
    }
    & > li[data-tone="green"] > .mark {
      background: var(--rx-success);
    }
    & > li[data-tone="amber"] > .mark {
      background: var(--rx-warning);
    }
    & > li[data-tone="coral"] > .mark {
      background: var(--rx-coral);
    }
  }

  /* 開閉の見た目はDisclosureが持つ。罫線を足さず余白だけで区切る。 */
  .rx-chart-frame > .data {
    min-inline-size: 0;
  }

  .rx-chart-frame > .source {
    margin: 0;
    color: var(--rx-muted);
    font-size: var(--rx-small);
    line-height: var(--rx-small-leading);
  }
}