/*
 * 「事故対応・ロードサービス利用後の評価」の円グラフ。
 * トップページ（top/service-rating.css）の .rating-chart と同じ見た目を、このページ専用に定義する。
 */
.rating-chart {
  --ui-rating-chart-size: 320px;

  position: relative;
  inline-size: min(var(--ui-rating-chart-size), 100%);
  margin-inline: auto;

  > svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  /* トップページでは grid だが、BasicDivision の .basic-division :where(p) に
     grid-column-start/end（division-start 等の名前付きライン）が指定されており、
     grid のままだと p が暗黙のカラムに配置されて右にずれるため flex にしている */
  .chart-text {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-2);
    color: var(--semantic-text-on-accent);
    text-align: center;
  }

  .chart-caption {
    max-inline-size: 270px;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  .chart-rate {
    --ui-rating-chart-rate-font-size: 56px;

    font-size: var(--ui-rating-chart-rate-font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1;

    > span {
      font-size: var(--font-size-32);
    }
  }
}