@layer components {
  /*
    コードは名前とコピーをLayerCardの層の見出しに置き、層の上のカードに書く（層とカードの見た目はLayerCardが持つ）。
    ここではコードの書き方だけを決める。コードはCampfireの貼り付け（実測: 37signals-others/campfire-internal-chat-coding-paste-2007.png
    (92, 114, 360, 50)。1倍）と同じく、灰色で塗らずに白い面へ等幅の11pxの文字で書く（手本は文字 #333333、行の間隔14px。
    手本は上下に1px #666666 の点線を引くが、ここではLayerCardの見出しの帯とカードの縁が区切りになるので引かない）。
    コードの書き始めは、層の見出しの題名の書き始め（LayerCardの左右の余白 --rx-layer-card-inline）にそろえる。上下の余白は16px。
    ハイライト行は37signalsの黄色のハイライト（#ffffcc。lists.md「黄色のハイライトの正確な色」）で塗り、
    行番号は余白に小さく書いてコピーには含めない。
  */
  .rx-code-block {
    --rx-code-block-paper: var(--rx-surface);
    min-inline-size: 0;
    margin: 0;
    color: var(--rx-text);
    /* カードにはコードだけを書き、コードの面が余白とスクロールを持つので、カードの余白を持たない。 */
    & > .rx-layer-card > .body {
      padding-block: 0;
      padding-inline: 0;
    }
    & > .rx-layer-card > .body > pre {
      /* 長い行は中でスクロールする。行の長さで外側の幅を押し広げないよう、横の大きさを内容から切り離す。 */
      contain: inline-size;
      max-inline-size: 100%;
      max-block-size: 28rem;
      overflow: auto;
      margin: 0;
      padding-block: var(--rx-space-4);
      padding-inline: var(--rx-layer-card-inline);
      /* カードの角丸の中でスクロールさせ、ハイライト行の背景を角からはみ出させない。 */
      border-radius: inherit;
      background: var(--rx-code-block-paper);
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: var(--rx-small);
      line-height: var(--rx-leading);
      tab-size: 2;
      /* コードは右から左に読むページでも、左から右に書く。 */
      direction: ltr;
      text-align: start;
      overscroll-behavior-inline: contain;
      &:focus-visible {
        outline-offset: -0.125rem;
      }
      & > code {
        display: block;
        inline-size: max-content;
        min-inline-size: 100%;
        font: inherit;
        counter-reset: rx-code-line;
        & > .line {
          display: block;
          &[data-highlighted="true"] {
            background: var(--rx-mark);
          }
        }
      }
    }
    /* 行番号は、左の余白に小さく書く。横にスクロールしても余白に残り、下のコードを隠す。 */
    &[data-line-numbers="true"] > .rx-layer-card > .body > pre > code > .line::before {
      content: counter(rx-code-line);
      counter-increment: rx-code-line;
      position: sticky;
      inset-inline-start: 0;
      display: inline-block;
      min-inline-size: 3ch;
      margin-inline-end: var(--rx-space-4);
      padding-inline-end: var(--rx-space-2);
      background: var(--rx-code-block-paper);
      color: var(--rx-muted);
      text-align: end;
      user-select: none;
    }
    &[data-line-numbers="true"]
      > .rx-layer-card
      > .body
      > pre
      > code
      > .line[data-highlighted="true"]::before {
      background: var(--rx-mark);
    }
  }
  @media (forced-colors: active) {
    .rx-code-block {
      & > .rx-layer-card > .body > pre {
        background: Canvas;
      }
      &[data-line-numbers="true"] > .rx-layer-card > .body > pre > code > .line::before {
        background: Canvas;
      }
      & > .rx-layer-card > .body > pre > code > .line[data-highlighted="true"],
      & > .rx-layer-card > .body > pre > code > .line[data-highlighted="true"]::before {
        background: Mark;
        color: MarkText;
      }
    }
  }
}