@layer components {
  /*
    まとまりの見出し。実測: structure.md「セクションの見出し（Discussions / To-do lists / Files）」
    （basecamp2-official/bc2-tour-2014-05-project-view.jpg (384, 587, 181, 25)。2倍）。
    手本の見出しは18px・太さ400・#990000。Retrixの文字の段に当てて15px（--rx-section-title）にする。
    右に控えめなボタン（「Post a new message」）を約17px空けて並べる（controls.md 1章「見出しとの間」）。
    見出しのベースラインから最初の行まで約16px。
  */
  .rx-section {
    --rx-section-accent: var(--rx-heading);
    display: grid;
    gap: var(--rx-space-3);
    min-inline-size: 0;
    &[data-tone="info"] {
      --rx-section-accent: var(--rx-info);
    }
    &[data-tone="warning"] {
      --rx-section-accent: var(--rx-warning);
    }
    &[data-tone="success"] {
      --rx-section-accent: var(--rx-success);
    }
    &[data-tone="danger"] {
      --rx-section-accent: var(--rx-danger);
    }
    /*
      見出しの名前に、件数と小さな操作を続けて並べる（「Discussions　［Post a new message］」）。
      線は伸ばさない。続く一覧や表が罫線を持つので、線を重ねない。
      見出しと操作の間は手本の約17pxを4pxの段に丸めた16px。
    */
    & > .heading {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      column-gap: var(--rx-space-4);
      row-gap: var(--rx-space-2);
      & > h2 {
        color: var(--rx-section-accent);
        font-size: var(--rx-section-title);
        font-weight: 400;
        /* 15pxの文字で行の高さ20px。行の高さを整数pxにする。 */
        line-height: calc(20 / 15);
      }
      /*
        件数はBC2の議論の件数のピル（lists.md「BC2 議論の一覧」、bc2-tour-2014-05-project-view.jpg (2083, 769, 42, 36)。2倍）。
        高さ18px・角丸9px・通常の太さで、淡い青（#e1e8f8）に青緑（#1c5c77）の数字。2桁で幅21pxになるよう左右の余白を小さくする。
        Boardの列の件数と同じ形。
      */
      & > .count {
        display: inline-grid;
        place-items: center;
        min-inline-size: 1.3125rem;
        block-size: 1.125rem;
        padding-inline: 0.3125rem;
        border-radius: var(--rx-radius-pill);
        background: var(--rx-pill-count);
        color: var(--rx-pill-count-text);
        font-size: var(--rx-small);
        font-weight: 400;
        line-height: 1;
        font-variant-numeric: tabular-nums;
      }
      & > .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--rx-space-2);
      }
    }
    & > h2 {
      font-size: var(--rx-section-title);
      font-weight: 700;
    }
  }
  /*
    カード・分割した面・右の列・入れ子のSectionの中の見出し。BC2で18pxの赤を使うのはシートの最上位のまとまりだけで、
    中の見出しはリスト名（15pxの太字）やHighriseの右の列の見出しのように、小さな太字の黒にする（structure.md・lists.md）。
  */
  :where(.rx-split-view, .rx-card, .rx-layer-card, .rx-section, .rx-workspace > :nth-child(2))
    .rx-section
    > .heading
    > h2 {
    color: var(--rx-ink);
    font-size: var(--rx-body);
    font-weight: 700;
  }
}