@layer components {
  .rx-command-menu {
    display: inline-grid;
    min-inline-size: 0;
    max-inline-size: 100%;
    /*
      開く操作は、Basecamp 2のヘッダーの検索欄（「Jump to a project, person, label, or search…」）の実測に合わせる。
      枠線は無く、シートと同じぼかした影で浮かせた白い欄（幅326px・高さ33px・角丸3px）。
      先頭に濃い灰色の虫めがね、続けて淡い灰色の文言を置く。欄に見せるので、開くことを示す下向きの矢印は出さない。
    */
    & > .rx-button {
      justify-content: start;
      gap: var(--rx-space-2);
      min-inline-size: min(20.375rem, 100%);
      padding-inline: 0.625rem;
      border-color: transparent;
      border-radius: var(--rx-radius-sheet);
      background: var(--rx-surface);
      color: var(--rx-gray-500);
      box-shadow: var(--rx-shadow-sheet);
      & > .rx-icon:first-child {
        color: var(--rx-muted);
      }
      &:hover:not(:disabled) {
        border-color: transparent;
        background: var(--rx-surface);
        color: var(--rx-muted);
        box-shadow: var(--rx-shadow-sheet);
      }
      &:active:not(:disabled) {
        background: var(--rx-surface);
        box-shadow: var(--rx-shadow-sheet);
      }
      & > .rx-icon:last-child:not(:first-child) {
        display: none;
      }
    }
    /* パネルを開いている間は、入力欄のフォーカスと同じ青い縁と淡い青の輪を付ける。 */
    &:has(> .panel:popover-open) > .rx-button {
      border-color: var(--rx-focus-border);
      box-shadow: var(--rx-focus-glow);
    }
    & > .panel {
      container: rx-command-panel / inline-size;
      position: fixed;
      /* 開閉のアニメーションはoverlay.cssの共通の定義。上部中央を支点にする。 */
      inset-block: var(--rx-space-4) auto;
      inset-inline: 0;
      inline-size: min(30rem, calc(100% - var(--rx-space-4)));
      max-inline-size: calc(100% - var(--rx-space-4));
      max-block-size: calc(100dvh - var(--rx-space-8));
      overflow: auto;
      overscroll-behavior: contain;
      margin: 0;
      margin-inline: auto;
      padding: 0;
      /*
        実測: overlays.md「1f. ジャンプ（検索）の候補」。濃い枠は無く、縁が#c0bdb6になる約10pxの影で机から浮かせる。
        角丸はポップオーバーと同じ（overlay.css）。
      */
      --rx-command-rule: #f5f5f5;
      --rx-command-active: var(--rx-option-active);
      --rx-command-group: #767676;
      border: 0;
      border-radius: var(--rx-popover-radius);
      background: var(--rx-surface);
      color: var(--rx-text);
      font-family: var(--rx-control-font-family);
      /* メニューの文字は操作と同じ大きさの段階。 */
      font-size: var(--rx-label);
      line-height: 1.5;
      letter-spacing: normal;
      box-shadow: 0 0 0.625rem rgb(0 0 0 / 30%);
      &:popover-open {
        display: block;
      }
      &::backdrop {
        background: transparent;
      }
      & > .heading {
        display: flex;
        align-items: center;
        gap: var(--rx-space-2);
        min-inline-size: 0;
        /* パネルの内側の余白は上下左右とも12px。中のまとまりの間はそれより狭くする。 */
        padding-block: var(--rx-space-3) 0;
        padding-inline: var(--rx-space-3);
        & > .name {
          flex: 1;
          min-inline-size: 0;
          font-weight: 600;
          overflow-wrap: anywhere;
        }
      }
      & > .shortcuts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--rx-space-2);
        padding-block-start: var(--rx-space-2);
        padding-inline: var(--rx-space-3);
        /* ショートカットの見た目はActionTile（action-tile.css）が持つ。ここではグリッドに並べるだけ。 */
        & > .shortcut {
          display: grid;
          min-inline-size: 0;
        }
        &[data-columns="3"] {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
      }
      & > .search {
        padding-block: var(--rx-space-2) 0;
        padding-inline: var(--rx-space-3);
      }
      /*
        候補の一覧。実測: basecamp2-official/bc2-help-searching-in-07.png (43, 58, 320, 113)。1倍。
        - まとまりの名前は左の列（幅72px）に右寄せで置き、名前の右端から列の境まで13px。#888888の通常の太さ。
        - 列の境は1px #f5f5f5。候補は右の列に高さ25pxで隙間なく並べ、文字は左の境から13px。
        - 選んでいる候補は右の列だけを #ddeefe で塗る。パネルの左右の縁まで余白を空けない。
        - まとまりの間と、最後の行（help）の上は1px #f5f5f5。
        13pxの余白は12px（--rx-space-3）に丸める。和文のまとまりの名前は英字より長いので、左の列は72pxを112pxに広げ、
        名前は文節の切れ目で折り返す。
      */
      & > .results {
        min-inline-size: 0;
        margin-block-start: var(--rx-space-3);
        border-block-start: var(--rx-stroke-width) solid var(--rx-command-rule);
        & > .group {
          display: grid;
          grid-template-columns: 7rem minmax(0, 1fr);
          align-items: start;
          & + .group {
            border-block-start: var(--rx-stroke-width) solid var(--rx-command-rule);
          }
          /*
            まとまりの名前。実測の#888888は白地で4.5:1に届かないため、同じ灰色のまま#767676に濃くする（3.5 → 4.5）。
            候補の1行目と同じ高さの行に置き、文字の上下の位置をそろえる。
          */
          & > h2 {
            display: flex;
            justify-content: end;
            align-items: center;
            min-block-size: 1.5625rem;
            padding-inline: var(--rx-space-2) var(--rx-space-3);
            color: var(--rx-command-group);
            font-size: var(--rx-label);
            font-weight: 400;
            line-height: calc(10 / 7);
            text-align: end;
            word-break: auto-phrase;
            overflow-wrap: anywhere;
          }
          /* 候補の行は高さ25pxで隙間なく並べる。左の列との境に1px #f5f5f5 を引く。 */
          & > .list {
            display: grid;
            gap: 0;
            align-self: stretch;
            padding: 0;
            border-inline-start: var(--rx-stroke-width) solid var(--rx-command-rule);
            list-style: none;
            & > .entry {
              --rx-command-accent: var(--rx-muted);
              min-inline-size: 0;
              &[data-accent="blue"] {
                --rx-command-accent: var(--rx-blue);
              }
              &[data-accent="green"] {
                --rx-command-accent: var(--rx-green);
              }
              &[data-accent="amber"] {
                --rx-command-accent: var(--rx-amber);
              }
              &[data-accent="coral"] {
                --rx-command-accent: var(--rx-coral);
              }
              /* 使えない候補は文字とアイコンだけを灰色にする。 */
              &[data-disabled="true"] > :is(.link, .command) {
                color: var(--rx-disabled-text);
                & > :is(.icon, .context, .current) {
                  color: inherit;
                }
              }
              & > .link {
                display: flex;
                align-items: center;
                gap: var(--rx-space-2);
                min-inline-size: 0;
                min-block-size: 1.5625rem;
                padding-block: 0.1875rem;
                padding-inline: var(--rx-space-3);
                color: var(--rx-text);
                font-size: var(--rx-label);
                /* 手本の候補の名前は通常の太さ。アイコンは塗りつぶし版。 */
                font-weight: 400;
                line-height: calc(10 / 7);
                text-decoration: none;
                & > .icon {
                  display: flex;
                  flex: none;
                  color: var(--rx-command-accent);
                }
                & > .name {
                  min-inline-size: 0;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                & > .context {
                  flex: 1;
                  min-inline-size: 0;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  color: var(--rx-muted);
                  font-size: var(--rx-small);
                  font-weight: 400;
                }
                & > .current {
                  display: flex;
                  flex: none;
                  margin-inline-start: auto;
                  color: var(--rx-link);
                }

                &:focus-visible {
                  outline-offset: -0.125rem;
                }
              }
              & > .command {
                inline-size: 100%;
                justify-content: start;
                gap: var(--rx-space-2);
                padding-inline: var(--rx-space-3);
                border-color: transparent;
                border-radius: 0;
                background: transparent;
                color: var(--rx-text);
                text-decoration: none;
                box-shadow: none;
              }
              /*
                ホバーした候補と矢印キーで選んでいる候補は、1fの選んだ候補と同じ角の無い淡い青（#ddeefe）で塗る。
                文字は黒のまま、アイコンと補足の色も変えない。
              */
              &:not([data-disabled="true"]) > :is(a.link, .command):hover,
              &[data-active="true"] > :is(.link, .command) {
                border-color: transparent;
                background: var(--rx-command-active);
                color: var(--rx-text);
                box-shadow: none;
              }
            }
          }
        }
        & > .empty {
          padding-block: var(--rx-space-3);
          padding-inline: var(--rx-space-3);
          color: var(--rx-muted);
          font-size: var(--rx-label);
        }
      }
      & > .help {
        display: flex;
        flex-wrap: wrap;
        gap: var(--rx-space-2) var(--rx-space-4);
        padding-block: var(--rx-space-3);
        padding-inline: var(--rx-space-3);
        border-block-start: var(--rx-stroke-width) solid var(--rx-command-rule);
        color: var(--rx-muted);
        font-size: var(--rx-small);
        line-height: var(--rx-small-leading);
        & > .hint {
          display: inline-flex;
          flex-wrap: wrap;
          align-items: center;
          gap: var(--rx-space-1);
        }
      }
      @container rx-command-panel (inline-size < 26rem) {
        & > .shortcuts {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      /* とても狭いパネルでは、まとまりの名前を候補の上に積み、左の列の境を引かない。 */
      @container rx-command-panel (inline-size < 20rem) {
        & > .results > .group {
          grid-template-columns: minmax(0, 1fr);
          & > h2 {
            justify-content: start;
            min-block-size: 0;
            padding-block-start: var(--rx-space-2);
            padding-inline: var(--rx-space-3);
            text-align: start;
          }
          & > .list {
            border-inline-start: 0;
          }
        }
      }
    }
  }
}