@layer components {
  /*
    Wingは作業面の後ろへ差し込む固定幅のパネル。手本に同じコンポーネントは無いので、作業面の後ろに重ねる物として
    BC2の背後に重ねた親のシートと同じ見た目にする。実測: basecamp2-official/bc2-tour-2014-06-to-do-lists.jpg
    (24, 26, 1923, 200)。2倍。塗り #f9f9f9（--rx-sheet-behind）、枠 1px #e5e5e5（--rx-sheet-behind-edge）、影なし。
    見出しの下の罫線は、Highriseの右の列の見出しの下の罫線（highrise-case-page-redesign-2011.jpg (880, 215, 184, 1)）と同じく
    列の幅いっぱいに引く。色はパネルの枠と同じにする。
    広い配置では開閉に関わらず作業面に合わせた全長の高さを持ち、閉じている間は作業面の縁からハンドルの幅だけを出す。
    閉じたハンドルはアイコンと開閉のマークだけを載せ、名前はツールチップで示す。開くと幅が伸び、上端に横書きの見出しが並ぶ。
  */
  .rx-wing {
    /* ハンドルの行の高さ。24pxのボタンを上下4pxで挟む。 */
    --rx-wing-handle: calc(var(--rx-control-size) + 2 * var(--rx-space-1));
    --rx-wing-panel: 14rem;
    --rx-wing-tuck: var(--rx-radius-surface);
    --rx-wing-inset: var(--rx-space-6);
    /* 見出しは帯の塗りを持たず、下に罫線だけを引く。 */
    --rx-wing-band: transparent;
    --rx-wing-band-rule: var(--rx-sheet-behind-edge);
    /* 開閉はその場で切り替える（アニメーションは使わない）。 */
    container: rx-wing / inline-size;
    min-inline-size: 0;
    /* 狭い配置では、閉じると高さ0、開くと内容の高さ（auto）になる。 */
    & > .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--rx-space-3);
      min-inline-size: 0;
      & > .main {
        position: relative;
        z-index: 1;
        min-inline-size: 0;
      }
      /* 狭い配置の既定。見出しの行を持つパネルとして、作業面の上下へ積む。 */
      & > :is(.start, .end) {
        position: relative;
        min-inline-size: 0;
        overflow: hidden;
        /* ツールチップの基準を、Wingごとのハンドルに限る。 */
        anchor-scope: --rx-wing-tab;
        border: var(--rx-stroke-width) solid var(--rx-sheet-behind-edge);
        border-radius: var(--rx-radius-surface);
        background: var(--rx-sheet-behind);
        color: var(--rx-text);
        & > summary {
          display: flex;
          align-items: center;
          gap: var(--rx-space-3);
          /* 24pxのボタンを上下4pxで挟み、32pxの行にする。 */
          padding-block: var(--rx-space-1);
          padding-inline: var(--rx-space-1) var(--rx-space-4);
          color: var(--rx-muted);
          font-family: var(--rx-control-font-family);
          /* 見出しは、カードや右の列の中の見出しと同じ13pxの太字。 */
          font-size: var(--rx-body);
          font-weight: 700;
          /* 文字の大きさが変わっても32pxの計算を崩さないよう、行は20pxに固定する。 */
          line-height: 1.25rem;
          list-style: none;
          overflow-wrap: anywhere;
          cursor: pointer;
          anchor-name: --rx-wing-tab;
          /* 背景の層をハンドルの中に収め、ボタンと名前の後ろに敷く。 */
          position: relative;
          isolation: isolate;
          /*
            見出しの下の罫線。開いている間だけ見せる。
            角丸は上の角だけで、罫線は角丸の無い下の辺に引くので、線の端は欠けない。
          */
          &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: inherit;
            background: var(--rx-wing-band);
            box-shadow: inset 0 calc(var(--rx-stroke-width) * -1) var(--rx-wing-band-rule);
            opacity: 0;
          }
          /* 名前のツールチップは、広い配置で閉じている時だけ出す。 */
          & > .tip {
            display: none;
          }
          &::-webkit-details-marker {
            display: none;
          }
          &:hover {
            color: var(--rx-ink);
          }
          &:focus-visible {
            outline-offset: -0.125rem;
          }
          /*
            ハンドルは共通Buttonのアイコンだけの形。閉じている間は控えめな白いボタン、開いている間は選んだ状態と同じ
            淡い青の縦の塗り（--rx-selected-*）にする。
            Buttonの主操作の印を持つので、塗りの変数ごと置き換え、ホバーと押した時の濃さもButtonの規則のまま効かせる。
            アイコンがない時は開閉のマークで、向きで開閉を示す。
          */
          & > .handle {
            --rx-button-color: var(--rx-surface);
            --rx-button-fill: var(--rx-fill-control);
            flex: none;
            border-color: var(--rx-control-border);
            background: var(--rx-surface);
            background-image: var(--rx-fill-control);
            color: var(--rx-text);
            box-shadow: var(--rx-shadow-control);
          }
          & > .label {
            flex: 1 1 auto;
            min-inline-size: 0;
          }
        }
        & > .body {
          display: grid;
          align-content: start;
          gap: var(--rx-space-2);
          min-inline-size: 0;
          padding-block: var(--rx-space-4);
          padding-inline: var(--rx-space-4);
          font-size: var(--rx-body);
          line-height: var(--rx-leading);
          overflow-wrap: anywhere;
        }
        /* 閉じると中身を隠し、高さを0にする。 */
        &::details-content {
          block-size: 0;
          overflow: clip;
        }
        &:not([open]) > .body {
          opacity: 0;
        }
      }
      & > :is(.start, .end)[open] {
        &::details-content {
          block-size: auto;
        }
        /* 開いている間は見出しの背景を見せる。 */
        & > summary {
          color: var(--rx-ink);
          &::before {
            opacity: 1;
          }
          /* 開いている間のハンドルは、選ぶ操作の共通の見た目（--rx-selected-*）。 */
          & > .handle {
            --rx-button-color: var(--rx-selected-text);
            --rx-button-fill: var(--rx-selected-fill);
            border-color: var(--rx-selected-edge);
            border-block-end-color: var(--rx-selected-edge-end);
            background: var(--rx-selected-fill);
            color: var(--rx-selected-text);
            box-shadow: none;
          }
          & > .handle[data-fallback="caret"] > .rx-icon {
            rotate: 180deg;
          }
        }
      }
    }
    /*
      作業面の後ろへ差し込む配置。左右の列は開閉に関わらずハンドル＋パネルの幅を確保し、作業面を動かさない。
      Wingは作業面の上端から一段下げ、内側の縁を作業面の角丸の分だけ作業面の下に入れる。
    */
    @container rx-wing (inline-size >= 56rem) {
      & > .layout {
        grid-template-columns:
          calc(var(--rx-wing-handle) + var(--rx-wing-panel))
          minmax(0, var(--rx-page))
          calc(var(--rx-wing-handle) + var(--rx-wing-panel));
        justify-content: center;
        align-items: start;
        gap: 0;
        & > :is(.start, .main, .end) {
          grid-row: 1;
        }
        & > .main {
          grid-column: 2;
          align-self: stretch;
        }
        & > :is(.start, .end) {
          /* 内容で行を伸ばさず、開閉に関わらず作業面の高さから上下のinsetを引いた高さに合わせる。 */
          block-size: 0;
          min-block-size: calc(100% - var(--rx-wing-inset) * 2);
          margin-block-start: var(--rx-wing-inset);
          /*
            閉じている間は、パネルを作業面の縁から10pxだけのぞかせ、ハンドルのボタンをパネルの外側の縁にまたがせて半分はみ出させる。
            ホバーするかハンドルへ移ると、のぞく幅が少し広がる。はみ出た中身や名前は作業面の側へ伸びて作業面に隠れるので、
            この配置ではパネルで切らない。
          */
          overflow: visible;
          inline-size: calc(0.625rem + var(--rx-wing-tuck));
          &:not([open]):has(> summary:is(:hover, :focus-visible)) {
            inline-size: calc(1.125rem + var(--rx-wing-tuck));
          }
          /*
            ハンドルは開閉に関わらず、開き切った時の幅の横並びのまま外側の縁に付け、ボタンは常に外側の縁に置く。
            閉じている間、名前はパネルの作業面の下に入った部分に隠れ、パネルの伸び縮みと一緒に現れ・隠れる。組み替えないのでちらつかない。
            フォーカスの輪は、閉じても隠れないようボタンの周りに出す。
          */
          & > summary {
            position: absolute;
            inset-block-start: 0;
            inline-size: calc(var(--rx-wing-handle) + var(--rx-wing-panel));
            &:focus-visible {
              outline: none;
              & > .handle {
                outline: 0.125rem solid var(--rx-blue);
                outline-offset: 0.125rem;
              }
            }
          }
          /*
            中身は開き切った時の幅に固定し、外側の縁に付けて置く。パネルが作業面の後ろから出てくるのに合わせて
            中身も縁と一緒に出てくるので、途中で折り返し直さない。はみ出た分はパネルの内側の縁で切れる。
          */
          & > .body {
            position: absolute;
            inset-block: var(--rx-wing-handle) 0;
            inline-size: calc(var(--rx-wing-handle) + var(--rx-wing-panel) + var(--rx-wing-tuck));
            overflow-y: auto;
            padding-block: var(--rx-space-4);
          }
          /* 横の配置では高さを縮めず、パネルの幅と中身の表示だけで開閉する。 */
          &::details-content {
            block-size: auto;
            overflow: visible;
          }
        }
        /*
          閉じたハンドルの名前のツールチップ。共通Tooltipと同じ面で、ハンドルの外側に出す。
          detailsはoverflowで切るが、固定配置の要素は切られない。
        */
        @supports (inset-block-start: anchor(start)) {
          & > :is(.start, .end) > summary > .tip {
            display: block;
            position: fixed;
            position-anchor: --rx-wing-tab;
            inset-block-start: anchor(start);
            inline-size: max-content;
            max-inline-size: min(16rem, calc(100vw - 1rem));
            padding-block: var(--rx-space-2);
            padding-inline: var(--rx-space-3);
            color: var(--rx-text);
            font-size: var(--rx-small);
            font-weight: 400;
            line-height: var(--rx-small-leading);
            white-space: normal;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            position-try-fallbacks: flip-inline;
          }
          & > .start > summary > .tip {
            inset-inline-end: calc(anchor(start) + var(--rx-space-2));
          }
          & > .end > summary > .tip {
            inset-inline-start: calc(anchor(end) + var(--rx-space-2));
          }
          & > :is(.start, .end):not([open]) > summary:is(:hover, :focus-visible) > .tip {
            opacity: 1;
            visibility: visible;
          }
        }
        /* 開いたパネルは幅が伸び、隠れていた名前と中身が出てくる。 */
        & > :is(.start, .end)[open] {
          inline-size: calc(var(--rx-wing-handle) + var(--rx-wing-panel) + var(--rx-wing-tuck));
        }
        & > .start {
          grid-column: 1;
          justify-self: end;
          margin-inline-end: calc(var(--rx-wing-tuck) * -1);
          /* ボタンの中心（外側の縁から4px＋半径12px）をパネルの外側の縁に合わせる。 */
          &:not([open]) > summary {
            inset-inline-start: calc((var(--rx-space-1) + var(--rx-control-size) / 2) * -1);
          }
          /* パネルで切らない配置なので、見出しの背景の外側の上の角をパネルの角丸に合わせる。 */
          & > summary {
            inset-inline-start: 0;
            border-start-start-radius: calc(var(--rx-radius-surface) - var(--rx-stroke-width));
            & > .handle[data-fallback="caret"] > .rx-icon {
              rotate: 90deg;
            }
            &:dir(rtl) > .handle[data-fallback="caret"] > .rx-icon {
              rotate: -90deg;
            }
          }
          & > .body {
            inset-inline-start: 0;
            padding-inline: var(--rx-space-4) calc(var(--rx-wing-tuck) + var(--rx-space-4));
          }
          &[open] > summary {
            & > .handle[data-fallback="caret"] > .rx-icon {
              rotate: -90deg;
            }
            &:dir(rtl) > .handle[data-fallback="caret"] > .rx-icon {
              rotate: 90deg;
            }
          }
        }
        & > .end {
          grid-column: 3;
          justify-self: start;
          margin-inline-start: calc(var(--rx-wing-tuck) * -1);
          &:not([open]) > summary {
            inset-inline-end: calc((var(--rx-space-1) + var(--rx-control-size) / 2) * -1);
          }
          & > summary {
            inset-inline-end: 0;
            border-start-end-radius: calc(var(--rx-radius-surface) - var(--rx-stroke-width));
            flex-direction: row-reverse;
            padding-inline: var(--rx-space-4) var(--rx-space-1);
            & > .label {
              text-align: end;
            }
            & > .handle[data-fallback="caret"] > .rx-icon {
              rotate: -90deg;
            }
            &:dir(rtl) > .handle[data-fallback="caret"] > .rx-icon {
              rotate: 90deg;
            }
          }
          & > .body {
            inset-inline-end: 0;
            padding-inline: calc(var(--rx-wing-tuck) + var(--rx-space-4)) var(--rx-space-4);
          }
          &[open] > summary {
            & > .handle[data-fallback="caret"] > .rx-icon {
              rotate: 90deg;
            }
            &:dir(rtl) > .handle[data-fallback="caret"] > .rx-icon {
              rotate: -90deg;
            }
          }
        }
      }
    }
  }
  @media (forced-colors: active) {
    .rx-wing > .layout > :is(.start, .end) {
      border-color: CanvasText;
      box-shadow: none;
      & > summary > .tip {
        border: var(--rx-stroke-width) solid CanvasText;
      }
    }
  }
}