@layer components {
  /*
    必要な時だけ追加する欄。追加した欄を上に積み、追加できる項目を下に並べる。
    手本はHighriseの人の編集（実測: screenshots/highrise/highrise-edit-person-form-green-2009.jpg、1倍）。
    値の無い項目は「Add another」「Add an instant message account」(205, 435, 195, 14) のような灰色の文字
    （実測 #8f918e。白地で4.5:1に届かないので、色合いを保って --rx-muted #666666 まで濃くする）で並べ、押すと欄が現れる。
    - inline: 項目を控えめなボタン（実測: controls.md 1。平らな白、1px #ccc、下に 1px #ddd、角丸5px、黒い文字）で横に並べる。
    - stack: 手本と同じく、枠も面も無い灰色の文字で縦に並べ、ホバーすると本文の黒にする。
    追加した欄の終わりには削除の操作を置き、入力の行の下端にそろえる。
  */
  .rx-optional-fields {
    display: grid;
    gap: var(--rx-space-3);
    min-inline-size: 0;
    & > .fields {
      display: grid;
      gap: var(--rx-space-3);
      min-inline-size: 0;
      &:not(:has(> .field:not([hidden]))) {
        display: none;
      }
      /* 隠れた欄をまとめて使えなくするfieldset。枠と余白は持たず、削除の操作を欄の終わりに置く。 */
      & > .field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: end;
        gap: var(--rx-space-2);
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: 0;
        &:has(> .remove:not([hidden])) {
          grid-template-columns: minmax(0, 1fr) auto;
        }
      }
    }
    & > .chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--rx-space-2);
    }
    &[data-layout="stack"] > .chips {
      flex-direction: column;
      align-items: start;
      gap: var(--rx-space-1);
      & > .rx-button.chip {
        /* 枠も面も無いので、文字の頭を上の欄の名前とそろえる。 */
        padding-inline: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--rx-muted);
        &:hover:not(:disabled) {
          background: transparent;
          box-shadow: none;
          color: var(--rx-text);
        }
      }
    }
  }
}