@layer components {
  /*
    目次。行は Navigation と同じく structure.md「Highrise 2011 の構成 / 左の列」に合わせる
    （highrise-case-page-redesign-2011.jpg (12, 90, 220, 200)。1倍。13px・#51504c、行の間隔28px、
    今いる行は highrise-contacts-index-redesign-2011.jpg (10, 113, 177, 24) の面 #e6e3de と太字の黒）。
  */
  .rx-table-of-contents {
    --rx-table-of-contents-text: #51504c;
    --rx-table-of-contents-current: #e6e3de;
    display: grid;
    gap: var(--rx-space-8);
    min-inline-size: 0;
  }

  .rx-table-of-contents > nav {
    display: grid;
    align-content: start;
    gap: var(--rx-space-1);
    /* 目次の幅は中身に合わせ、今いる項目の面を名前の長さ程度にとどめる。 */
    inline-size: fit-content;
    max-inline-size: min(100%, 24rem);
    min-inline-size: 0;
    /*
      目次の見出しは、Highriseの「RECENTLY VIEWED」と同じ字間を空けた小さな大文字。線は伸ばさない。
      実測の#91908cは白地で4.5:1に届かないため、同じ暖かい灰色の--rx-quietに濃くする。
    */
    & > .heading {
      display: flex;
      align-items: center;
      gap: var(--rx-space-2);
      margin: 0;
      padding-block-end: var(--rx-space-1);
      padding-inline: var(--rx-space-2);
      color: var(--rx-quiet);
      font-size: var(--rx-small);
      font-weight: 400;
      line-height: var(--rx-small-leading);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    & > ol {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    /*
      行はNavigationと同じ作り。背景のパネルを持たず、ホバーすると名前に下線を引く（推測）。
      今いる項目もNavigationと同じく、面 #e6e3de と黒い太字。番号は茶色の小さな数字（structure.md「日付」の茶色を濃くした--rx-meta）。
    */
    & > ol > li > a {
      display: grid;
      /* 番号の列は数字の幅に合わせる。一段目は1.25em、二段目（2.1など）は2em。 */
      grid-template-columns: 1.25em minmax(0, 1fr);
      align-items: baseline;
      gap: var(--rx-space-2);
      min-inline-size: 0;
      /* 13pxの文字の行（18px）を上下5pxで挟み、実測の行の間隔28pxにする。 */
      min-block-size: 1.75rem;
      padding-block: 0.3125rem;
      padding-inline: var(--rx-space-2);
      /* Navigationと同じく、今いる行の面は角丸の無い四角。 */
      border-radius: 0;
      color: var(--rx-table-of-contents-text);
      font-size: var(--rx-body);
      line-height: var(--rx-leading);
      text-decoration: none;
      overflow-wrap: anywhere;
      & > .number {
        color: var(--rx-meta);
        font-size: var(--rx-small);
        font-weight: 400;
        font-variant-numeric: tabular-nums;
      }
      &:hover {
        color: var(--rx-ink);
        & > .title {
          text-decoration-line: underline;
          text-decoration-thickness: var(--rx-stroke-width);
          text-underline-offset: 0.15em;
        }
      }
      &[data-state="current"] {
        background: var(--rx-table-of-contents-current);
        color: var(--rx-ink);
        font-weight: 700;
        & > .title {
          text-decoration-line: none;
        }
      }
      &:focus-visible {
        outline: 0.125rem solid var(--rx-blue);
        outline-offset: 0.125rem;
      }
    }
    & > ol > li[data-level="3"] > a {
      grid-template-columns: 2em minmax(0, 1fr);
      /* 二段目の番号を、一段目の題名の書き始めに揃える（一段目の文字の大きさで計算する）。 */
      padding-inline-start: calc(var(--rx-space-2) + var(--rx-body) * 1.25 + var(--rx-space-2));
      font-size: var(--rx-label);
      line-height: var(--rx-label-leading);
    }
  }

  .rx-table-of-contents > .body {
    display: grid;
    gap: var(--rx-space-8);
    max-inline-size: var(--rx-measure);
    min-inline-size: 0;
  }

  .rx-table-of-contents > .body > section {
    min-inline-size: 0;
    & > :is(h2, h3) {
      margin: 0;
      scroll-margin-block-start: 5rem;
      line-height: 1.5;
    }
    /* 節の見出しはSectionと同じ赤茶の通常の太さ、その下の小見出しは黒い小さな太字。 */
    & > h2 {
      color: var(--rx-heading);
      font-size: var(--rx-section-title);
      font-weight: 400;
      line-height: 1.3;
    }
    & > h3 {
      color: var(--rx-ink);
      font-size: var(--rx-body);
      font-weight: 600;
    }
    & > .content {
      margin-block-start: var(--rx-space-2);
      font-size: var(--rx-body);
      line-height: var(--rx-leading);
      overflow-wrap: anywhere;
      & > * + * {
        margin-block-start: var(--rx-space-3);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-table-of-contents > nav > ol > li > a[data-state="current"] {
      outline: var(--rx-stroke-width) solid CanvasText;
    }
  }
}