@layer components {
  /*
    判断を求める白いパネル。枠と影はポップオーバーと同じ（overlay.css）。
    実測: overlays.md「2a. ポップオーバーで確認する」「2b. 画面全体を覆うモーダル」。
    問いは#a52a2a（CSSのbrown）の太字で約15px、見出しと本文の間に罫線は引かない。操作は白いボタンを下に並べる。
    背後は#323136を約80%で覆う。2bの淡いピンクの箱（お客さん向けの注意）は専用の色なので使わない。
  */
  .rx-dialog > .panel {
    --rx-dialog-width: 32rem;
    --rx-dialog-question: #a52a2a;
    --rx-overlay-title-line: calc(var(--rx-body) * 1.25);
    inline-size: min(var(--rx-dialog-width), calc(100% - var(--rx-space-8)));
    max-inline-size: calc(100% - var(--rx-space-8));
    max-block-size: calc(100dvh - var(--rx-space-8));
    /* 角の閉じる操作をはみ出させるため、パネルは切り取らず本文だけをスクロールする。 */
    overflow: visible;
    padding: 0;
    font-family: var(--rx-control-font-family);
    /* 開閉のアニメーションはoverlay.cssの共通の定義。中央のパネルは中央を支点にする。背景の暗さだけここで一緒に変える。 */
    &[open] {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    &[data-size="compact"] {
      --rx-dialog-width: 26rem;
    }
    &[data-size="wide"] {
      --rx-dialog-width: 52rem;
    }
    /* 背後の画面は#323136で約80%覆う（2b。白いページの上の色からの換算は推測）。 */
    &::backdrop {
      background: rgb(50 49 54 / 80%);
    }
    &:not([open])::backdrop {
      background: rgb(50 49 54 / 0%);
    }
  }
  .rx-dialog > .panel > .heading {
    & > p {
      font-size: var(--rx-label);
    }
  }
  /* 問いは#a52a2aの太字で約15px、行の間隔18〜19px（2a）。 */
  .rx-dialog > .panel > .heading > .heading-row > h2 {
    color: var(--rx-dialog-question);
    font-size: var(--rx-body);
    font-weight: 700;
    &:focus-visible {
      outline-offset: 0.125rem;
    }
  }
  /* ダイアログは見出しと本文の間を一段広く取る（余白の決め方はoverlay.cssの共通の指定）。 */
  .rx-dialog > .panel {
    --rx-overlay-heading-gap: var(--rx-space-4);
  }
  .rx-dialog > .panel > .body {
    min-block-size: 0;
    overflow: auto;
    overscroll-behavior: contain;
    font-size: var(--rx-body);
    line-height: var(--rx-leading);
  }
  .rx-dialog > .panel > .actions {
    grid-row: 3;
  }
  /*
    狭い画面のタッチ操作では、画面の下に付くシートにする。
    上端のハンドルとその周りを下へドラッグすると閉じる（DialogControllerが--rx-dialog-sheetを見て有効にする）。
    閉じる操作は見出しの行の末尾に置き、題名を隠さない。下端は操作の後にホームバーの分も空ける。
  */
  @media (max-width: 40rem) and (pointer: coarse) {
    .rx-dialog > .panel {
      --rx-dialog-sheet: 1;
      inline-size: 100%;
      max-inline-size: 100%;
      max-block-size: 90dvh;
      margin: 0;
      margin-inline: auto;
      margin-block-start: auto;
      padding-block-end: calc(var(--rx-space-3) + env(safe-area-inset-bottom));
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      touch-action: none;
      /* 上端のハンドル。ドラッグして閉じられることを示す。 */
      &::before {
        content: "";
        position: absolute;
        inset-block-start: var(--rx-space-2);
        inset-inline-start: 50%;
        inline-size: 2.5rem;
        block-size: 0.3125rem;
        border-radius: var(--rx-radius-pill);
        background: color-mix(in srgb, var(--rx-ink) 18%, var(--rx-surface));
        translate: -50% 0;
      }
      /* 画面の下に付くパネルは、膨らませず下から滑り上げる。ドラッグしている間はポインターに合わせて動かす。 */
      &:not([open]) {
        translate: 0 100%;
      }
      & > .heading {
        padding-block-start: var(--rx-space-6);
        & > .heading-row {
          grid-template-columns: minmax(0, 1fr) auto;
          column-gap: var(--rx-space-3);
          padding-inline-end: 0;
          & > h2 {
            padding-block-start: calc(
              (var(--rx-overlay-close-size) - var(--rx-overlay-title-line)) / 2
            );
          }
          & > .close {
            position: static;
          }
        }
      }
    }
  }
}