@layer components {
  /*
    開閉の見出しは、37signalsの「続きを開くリンク」と同じく、青緑の文字に1pxの下線を引いた12pxのリンクの形にする。
    実測: highrise-help-note-show-options-2007.png (18, 210, 240, 20)。1倍。「Show options (files, cases, permissions)」は
    約12pxの通常の太さで下線付き、矢印や枠は無い（文字 #444446）。BC2の「1 completed to-do」（lists.md「BC2 の To-do」）は
    #1c5c77に下線、backpack-list-completed-collapsed-2009.png の「View all 9 completed items」も小さな下線付きの文字。
    色はRetrixのリンク（--rx-link、ホバーで赤）にそろえる。
    手本は開閉で文言を変える（Show → Hide）が、Retrixの見出しは文言を変えないので、開閉の状態を示す小さな矢印を見出しと同じ色で前に置く。
    白い紙の上にそのまま置き、枠や中身の縦線は引かない。中身は見出しの書き始めに揃え、入れ子は字下げだけで示す（Treeと同じ）。
    開閉はその場で切り替える。
  */
  .rx-disclosure {
    min-inline-size: 0;
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: calc(11 / 7);
    & > summary {
      --rx-disclosure-marker: 0.875rem;
      display: grid;
      grid-template-columns: var(--rx-disclosure-marker) minmax(0, 1fr);
      align-items: start;
      gap: var(--rx-space-1);
      padding-block: var(--rx-space-2);
      padding-inline: 0;
      border-radius: var(--rx-radius-control);
      color: var(--rx-link);
      font-family: var(--rx-control-font-family);
      font-size: var(--rx-label);
      font-weight: 400;
      line-height: var(--rx-label-leading);
      list-style: none;
      cursor: pointer;
      &:focus-visible {
        outline-offset: 0.125rem;
      }
      &::-webkit-details-marker {
        display: none;
      }
      & > .marker {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        place-items: center;
        inline-size: var(--rx-disclosure-marker);
        block-size: 1lh;
        & > .rx-icon {
          inline-size: 0.75rem;
          block-size: 0.75rem;
          rotate: -90deg;
        }
      }
      &:dir(rtl) > .marker > .rx-icon {
        rotate: 90deg;
      }
      & > .label > .title {
        text-decoration-line: underline;
        text-decoration-thickness: var(--rx-stroke-width);
        text-underline-offset: 0.15em;
      }
      &:hover {
        color: var(--rx-link-hover);
      }
      & > .label {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        gap: 0.125rem;
        min-inline-size: 0;
        overflow-wrap: anywhere;
        & > .description {
          color: var(--rx-muted);
          font-size: var(--rx-small);
          font-weight: 400;
          line-height: var(--rx-small-leading);
        }
      }
    }
    &[open] > summary > .marker > .rx-icon {
      rotate: 0deg;
    }
    /* 閉じると高さを0にして隠す。切り取りの余白（中の操作の影の分）からはみ出さないよう、閉じている間は透明にする。 */
    &::details-content {
      block-size: 0;
      overflow: clip;
      overflow-clip-margin: var(--rx-space-3);
      opacity: 0;
    }
    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
    /* 列は本文の幅に収め、長い語や横に広いコンポーネントでも本文を押し広げない。 */
    & > div {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--rx-space-2);
      min-inline-size: 0;
      /* 中身の下は見出しの上と同じ余白にし、罫線で囲まれても上下の空きをそろえる。 */
      padding-block: 0 var(--rx-space-2);
      padding-inline: calc(0.875rem + var(--rx-space-1)) 0;
      overflow-wrap: anywhere;
      & > p {
        max-inline-size: 44em;
      }
    }
  }
  @media (pointer: coarse) {
    .rx-disclosure > summary {
      padding-block: 0.625rem;
    }
  }
  @media (forced-colors: active) {
    .rx-disclosure > summary > .marker {
      color: CanvasText;
    }
  }
}