@layer components {
  /*
    一つの対象の属性。Highriseの案件の右の列の「Additional info」（項目名の下に値を置く一覧）を手本にする。
    実測: highrise/highrise-deal-page-custom-fields-2015.png (1540, 940, 370, 270)。2倍。
    - 項目名「Account Number」: #777777、通常の太さ。大文字の高さから12px前後。値「123456788」は#000000、14px前後。
    - 項目名のベースラインから値の大文字の上まで7.5px。値のベースラインから次の項目名の大文字の上まで21px。
    - 項目の間に罫線は引かない（罫線は列の見出しの下だけ）。
    補助: highrise-person-page-new-layout-2011.png の「Personal Info」（縮小）も、灰色の項目名の下に黒い値を置き、罫線なしで並べる。
    Retrixの文字の段に当てはめ、項目名は11px（--rx-small）、値は本文の13px（--rx-body）にする。
    項目名の灰色は白地で4.5:1に届かないので、実測 #777777 → #666666（--rx-muted）。
    項目の間は、値の行の下から次の項目名の行の上まで12px（手本の21pxから文字の上下の空きを引いて4pxの段に丸めた値）。
    幅が22rem以上では、項目名と値を横に並べる（手本に無い。推測）。並べた時も罫線は引かず、項目名を値の一行目のベースラインにそろえる。
    項目名の前には、小さなアイコンを面を付けずに添えられる（推測）。
  */
  .rx-value-list {
    container: rx-value-list / inline-size;
    min-inline-size: 0;
    color: var(--rx-text);
    font-size: var(--rx-body);
    line-height: var(--rx-leading);
    & > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      --rx-value-list-accent: var(--rx-muted);
      /* 外側の余白は置く側（カード・パネル・列）が持つ。一覧の上端と下端には余白を足さない。 */
      & + div {
        margin-block-start: var(--rx-space-3);
      }
      &[data-accent="green"] {
        --rx-value-list-accent: var(--rx-success);
      }
      &[data-accent="amber"] {
        --rx-value-list-accent: var(--rx-amber);
      }
      &[data-accent="coral"] {
        --rx-value-list-accent: var(--rx-coral-dark);
      }
      & > dt {
        display: flex;
        align-items: center;
        gap: var(--rx-space-2);
        color: var(--rx-muted);
        font-size: var(--rx-small);
        font-weight: 400;
        line-height: var(--rx-small-leading);
        /* アイコンは丸い面に入れず、項目名の前に小さく添える。色は利用側が指定した分類の色。 */
        & > .icon {
          display: grid;
          flex: none;
          place-items: center;
          color: var(--rx-value-list-accent);
          & > .rx-icon {
            font-size: 0.875rem;
          }
        }
      }
      & > dd {
        min-inline-size: 0;
        color: var(--rx-text);
        overflow-wrap: anywhere;
        &[data-empty="true"] {
          color: var(--rx-muted);
        }
        & > * + * {
          margin-block-start: var(--rx-space-2);
        }
        & > .description {
          margin-block-start: var(--rx-space-1);
          color: var(--rx-muted);
          font-size: var(--rx-small);
          line-height: var(--rx-small-leading);
        }
      }
    }
    @container rx-value-list (inline-size >= 22rem) {
      & > div {
        grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr);
        column-gap: var(--rx-space-4);
        align-items: baseline;
      }
    }
  }
}