@layer components {
  /*
    二つの面はBC2のプロジェクトのカードと同じ一枚の白いカード（枠なし、四方へ4〜5pxのぼかし影）に並べ、境目には細い罫線を一本だけ引く。
    実測: highrise/highrise-case-page-redesign-2011.jpg（1倍）の本文の列と右の列。
    - 境目は縦の線 1px #eeeeee（x=849）。右の列の地は本文と同じ白。
    - 右の列の幅は862pxのシートの245px（約28%）。16rem（256px）を最小にする。
    - 手本は両方の列とも上下左右に約30pxの余白を持つ。カードの中なので、Cardと同じ上下左右16pxにそろえる。
    狭い幅では上下に積み、罫線は横になる。
  */
  .rx-split-view {
    --splitter-value: 50;
    --rx-split-view-rule: #eeeeee;
    container: rx-split-view / inline-size;
    min-inline-size: 0;
    & > .panes {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      min-inline-size: 0;
      overflow: hidden;
      border-radius: var(--rx-radius-surface);
      background: var(--rx-surface) var(--rx-fill-paper);
      box-shadow: var(--rx-shadow-paper);
      & > :is(.primary, .secondary) {
        min-inline-size: 0;
        padding-block: var(--rx-space-4);
        padding-inline: var(--rx-space-4);
        overflow-wrap: anywhere;
      }
      & > .secondary {
        border-block-start: var(--rx-stroke-width) solid var(--rx-split-view-rule);
      }
    }
    @container rx-split-view (inline-size >= 52rem) {
      & > .panes {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.5fr);
        & > .secondary {
          border-block-start: 0;
          border-inline-start: var(--rx-stroke-width) solid var(--rx-split-view-rule);
        }
      }
      &[data-layout="reader"] > .panes {
        grid-template-columns: minmax(18rem, 0.6fr) minmax(0, 1fr);
      }
      /* 幅を変えられる時は、境目の罫線の上にハンドルを重ねる。 */
      &[data-resizable="true"][data-state] > .panes {
        position: relative;
        grid-template-columns:
          minmax(0, calc(100% * var(--splitter-value) / 100))
          minmax(0, 1fr);
        & > .handle {
          display: block;
        }
      }
    }
    /*
      ハンドルは、境目の罫線の中ほどに置いた、ボタンと同じ平らな白・1px #ccc・下に1px #ddd の影の細いつまみ（推測。手本に無い）。
      境目全体をつかめるように、ハンドルは面の上下いっぱいに重ねる。
    */
    & > .panes > .handle {
      display: none;
      position: absolute;
      z-index: 1;
      inset-block: 0;
      inset-inline-start: calc(100% * var(--splitter-value) / 100 - 0.75rem);
      inline-size: 1.5rem;
      cursor: col-resize;
      touch-action: none;
      &:focus-visible {
        outline: none;
      }
      &::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: calc(50% - var(--rx-stroke-width) / 2);
        inline-size: var(--rx-stroke-width);
        background: transparent;
      }
      & > .grip {
        position: absolute;
        inset-block-start: calc(50% - 1.25rem);
        inset-inline-start: calc(50% - 0.25rem);
        inline-size: 0.5rem;
        block-size: 2.5rem;
        border: var(--rx-stroke-width) solid var(--rx-control-border);
        border-radius: var(--rx-radius-mark);
        background: var(--rx-surface) var(--rx-fill-control);
        box-shadow: var(--rx-shadow-control);
      }
      &:hover > .grip {
        box-shadow: var(--rx-shadow-control-hover);
      }
      &:hover::before,
      &[data-state="dragging"]::before,
      &:focus-visible::before {
        background: var(--rx-link);
      }
      /* つかんでいる間は、押したボタンと同じく影が内側へ移る。 */
      &[data-state="dragging"] > .grip {
        box-shadow: var(--rx-shadow-control-pressed);
      }
      &:focus-visible > .grip {
        outline: var(--rx-frame-width) solid var(--rx-link);
        outline-offset: var(--rx-stroke-width);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-split-view > .panes {
      border: var(--rx-stroke-width) solid CanvasText;
      box-shadow: none;
    }
    .rx-split-view > .panes > .handle > .grip {
      border: var(--rx-stroke-width) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}