@layer components {
  /*
    作業面（シート）。白い面・角丸・影は、AppShellの作業面と共通の定義（layout.css）が持つ。
    ここでは中の余白だけを決める。実測: structure.md「シート」の内側の余白は左右30px。
    「余白の段」の表のとおり4pxの段に寄せて左右32pxにし、上下は左右より狭い24pxにする（check-cssの規則）。
    上下は行の高さの余りと合わせ、上端から題名の大文字の上までが手本の35.5pxに近くなる。
  */
  .rx-surface {
    --rx-surface-gutter: var(--rx-space-8);
    container: rx-surface / inline-size;
    min-inline-size: 0;
    /* 寸法を保つため枠の幅は残し、線は見せない。輪郭は影が描く。 */
    border: var(--rx-stroke-width) solid transparent;
    /* パンくずの行は区切り線を持たず、面の上端から本文と同じだけ離し、本文と同じ左右の位置に揃える。 */
    & > .rx-context-bar {
      min-block-size: calc(var(--rx-control-size) + var(--rx-space-6) + var(--rx-space-2));
      padding-block-start: var(--rx-space-6);
      padding-inline: var(--rx-surface-gutter);
      border-block-end: 0;
      @container rx-surface (inline-size < 40rem) {
        min-block-size: calc(var(--rx-control-size) + var(--rx-space-5) + var(--rx-space-2));
        padding-block-start: var(--rx-space-5);
        padding-inline: var(--rx-space-4);
      }
    }
    & > .body {
      display: grid;
      align-content: start;
      gap: var(--rx-space-4);
      min-inline-size: 0;
      /*
        左右は上下より広く取り、狭い面では詰める。
        上下は同じ余白にそろえ、中の段の間（16px）より面の余白をはっきり広くする。
      */
      padding-block: var(--rx-space-6) var(--rx-space-6);
      padding-inline: var(--rx-space-8);
      overflow-wrap: anywhere;
      &:empty {
        display: none;
      }
      /* 狭い面でも、段の間（16px）より上下の余白を広くする。 */
      @container rx-surface (inline-size < 40rem) {
        padding-block: var(--rx-space-5);
        padding-inline: var(--rx-space-4);
      }
    }
    /* パンくずがある時は、本文をパンくずの行のすぐ下から始める。行の下の8pxと見出しの行の余りで離れる。 */
    & > .rx-context-bar + .body {
      padding-block-start: 0;
    }
    /* 文書の配置では、パンくずも本文と同じ行長の書き始めにそろえる。 */
    &[data-layout="document"] > .rx-context-bar {
      padding-inline: max(var(--rx-surface-gutter), calc((100% - 42rem) / 2));
      @container rx-surface (inline-size < 40rem) {
        padding-inline: var(--rx-space-4);
      }
    }
    &[data-layout="document"] > .body {
      padding-inline: max(var(--rx-surface-gutter), calc((100% - 42rem) / 2));
      @container rx-surface (inline-size < 40rem) {
        padding-inline: var(--rx-space-4);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-surface {
      border: var(--rx-stroke-width) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}