@layer components {
  /*
    人物の見出し。実測: BC2のMeのページの上部（basecamp2-official/bc2-tour-2014-12-me.jpg (321, 289, 1920, 254)。2倍）。
    - アバターは直径90pxの円で、枠も影も無い。シートの左の余白（30px）から置き、帯の上端から20px下げる。
    - 名前はアバターの右21pxから始まる太字の#000（24px）。下に「Last active…」の灰色（#979994）の補足を置く。
    - 帯の下に1px #ebebeb。
    名前は手本の24pxではなく、PageHeaderの見出しと同じ--rx-title（18px）にし、アバターも同じ比で64pxにする。
    アバターと名前の間は21pxを4pxの段に丸めた20px。
    補足の行の実測#979994は白地で4.5:1に届かないため、同じ色合いのまま#767773に濃くする（2.9 → 4.5）。
    帯の#f5f5f5の面は、シートの左右の縁まで広げる画面の側の配置なので、このコンポーネントは持たない。
    写真を先頭側に置き、その横に名前、補足、所属のバッジを積む。操作は末尾側の上に置く。
    この人への設定は、Meの帯の下の線と同じ1px #ebebebの罫線の後ろに、面を持たない操作として並べる。
  */
  .rx-profile-header {
    --rx-profile-header-rule: #ebebeb;
    --rx-profile-header-detail: #767773;
    container: rx-profile-header / inline-size;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "avatar name actions"
      "avatar detail actions"
      "avatar badge actions"
      "preferences preferences preferences";
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    column-gap: var(--rx-space-5);
    min-inline-size: 0;
    color: var(--rx-text);
    overflow-wrap: anywhere;
    /* アバターは手本と同じく枠も影も無い円（Avatarの形のまま）。 */
    & > .avatar {
      grid-area: avatar;
      display: flex;
      & > .rx-avatar {
        inline-size: 4rem;
        block-size: 4rem;
        font-size: 1.5rem;
      }
    }
    & > .name {
      grid-area: name;
      margin: 0;
      color: var(--rx-ink);
      font-size: var(--rx-title);
      font-weight: 700;
      line-height: 1.2;
    }
    & > .detail {
      grid-area: detail;
      margin: 0;
      margin-block-start: var(--rx-space-1);
      color: var(--rx-profile-header-detail);
      font-size: var(--rx-label);
      line-height: var(--rx-label-leading);
    }
    & > .badge {
      grid-area: badge;
      justify-self: start;
      margin-block-start: var(--rx-space-2);
    }
    & > .actions {
      grid-area: actions;
      display: flex;
      flex-wrap: wrap;
      justify-content: end;
      gap: var(--rx-space-2);
    }
    /* 設定の並び。罫線の下に、面と枠を持たない操作を並べ、ホバーした時だけ淡い面を出す。 */
    & > .preferences {
      grid-area: preferences;
      display: flex;
      flex-wrap: wrap;
      gap: var(--rx-space-1);
      max-inline-size: 100%;
      margin-block-start: var(--rx-space-3);
      padding-block-start: var(--rx-space-2);
      border-block-start: var(--rx-stroke-width) solid var(--rx-profile-header-rule);
      & > .rx-button,
      & > .rx-dropdown-menu > .rx-button {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        &:hover:not(:disabled) {
          border-color: transparent;
          background: var(--rx-gray-50);
          box-shadow: none;
        }
      }
    }
  }
  /* 狭い場所では写真を小さくし、名前の大きさも小見出しまで下げる。 */
  @container rx-profile-header (inline-size < 24rem) {
    .rx-profile-header {
      column-gap: var(--rx-space-3);
      & > .avatar > .rx-avatar {
        inline-size: 3rem;
        block-size: 3rem;
        font-size: 1.125rem;
      }
      & > .name {
        font-size: var(--rx-section-title);
      }
    }
  }
}