@layer components {
  .rx-field {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-inline-size: 0;
    & > .heading {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--rx-space-2);
    }
    & > .heading > label,
    & > .label {
      font-size: var(--rx-label);
      font-weight: var(--rx-label-weight);
      line-height: var(--rx-label-leading);
    }
  }
  :is(.rx-field, .rx-date-picker, .rx-character-count) > .messages {
    & > * + * {
      margin-block-start: var(--rx-space-1);
    }
    & > .help {
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
    }
    /* 修正が必要な箇所は、欄のすぐ下に危険の色の文字とアイコンで示す。 */
    & > .error {
      display: grid;
      grid-template-columns: 1em minmax(0, 1fr);
      align-items: start;
      gap: 0.375em;
      color: var(--rx-danger);
      font-size: var(--rx-label);
      line-height: var(--rx-label-leading);
    }
    & > .error > .rx-icon {
      inline-size: 1em;
      block-size: 1em;
      margin-block-start: calc(3em / 14);
    }
  }
  .rx-password,
  .rx-combobox {
    position: relative;
    min-inline-size: 0;
    font-size: var(--rx-label);
    & > .rx-input {
      padding-inline-end: 2.5em;
    }
  }
  .rx-password {
    /* controllerが名前と操作を接続してから表示する。 */
    &:not([data-state]) > .toggle {
      display: none;
    }
    & > .toggle[data-state="hidden"] > .hide,
    & > .toggle[data-state="visible"] > .show {
      display: none;
    }
  }
  :is(.rx-password, .rx-combobox, .rx-date-picker > .control) > .toggle {
    appearance: none;
    position: absolute;
    inset-block-start: 0.0625rem;
    inset-inline-end: 0.0625rem;
    display: grid;
    place-items: center;
    inline-size: calc(var(--rx-button-size) - 0.125rem);
    block-size: calc(100% - 0.125rem);
    padding: 0;
    border: 0;
    border-radius: calc(var(--rx-radius-control) - var(--rx-stroke-width));
    background: transparent;
    color: var(--rx-muted);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    font-weight: 400;
    line-height: var(--rx-label-leading);
    cursor: pointer;
    & > span {
      display: grid;
      place-items: center;
    }
    &:focus-visible {
      outline-offset: -0.125rem;
    }
    &:hover:enabled {
      color: var(--rx-link);
      background: var(--rx-info-soft);
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  .rx-character-count {
    --character-count-value: 0;
    --character-count-max: 0;
    display: grid;
    gap: var(--rx-space-1);
    & > .messages > .count {
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
      text-align: end;
      counter-reset: rx-count var(--character-count-value) rx-count-max var(--character-count-max);
      &::before {
        content: counter(rx-count) " / " counter(rx-count-max);
      }
    }
    &:not([data-state="over"]) > .messages > .over-error {
      display: none;
    }
  }
  .rx-combobox > .options {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--rx-z-menu);
    max-block-size: 16rem;
    overflow: auto;
    overscroll-behavior: contain;
    /* BC2のラベルやジャンプの候補（overlays.md 1f）と同じく、入力欄のすぐ下に隙間なく続ける。 */
    margin: 0;
    padding-block: var(--rx-space-1);
    padding-inline: var(--rx-space-1);
    /*
      候補の一覧（PickerとSuggestionで共通）。BC2のポップオーバーと同じ1px #bbb の枠・角丸5px・柔らかい影（overlays.md「1」）。
      候補の行はBC2のジャンプの候補（1f）と同じく隙間なく並べ、ホバーと選んでいる候補を角の無い淡い青で塗る。
    */
    border: var(--rx-stroke-width) solid var(--rx-popover-edge);
    border-radius: var(--rx-popover-radius);
    background: var(--rx-surface);
    color: var(--rx-text);
    box-shadow: var(--rx-popover-shadow);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    list-style: none;
    & > li {
      padding-block: 0.25rem;
      padding-inline: var(--rx-space-2);
      cursor: pointer;
    }
    & > li:hover:not([data-state="disabled"]) {
      background: var(--rx-option-active);
      color: var(--rx-option-active-text);
    }
    /* キーボードで注目している候補は、メニューと同じ角の無い淡い青（--rx-option-active）。 */
    & > li[data-state="active"] {
      background: var(--rx-option-active);
      color: var(--rx-option-active-text);
    }
    /* 選び済みの候補は太字で示す。 */
    & > li[data-state="selected"] {
      font-weight: 700;
    }
    & > li[data-state="disabled"] {
      color: var(--rx-disabled-text);
      cursor: default;
    }
  }
  .rx-field-group,
  .rx-choice-group {
    display: grid;
    align-content: start;
    min-inline-size: 0;
    padding: 0;
    & > legend {
      max-inline-size: 100%;
      padding: 0;
    }
  }
  /* まとまりの見出しはSectionと同じく名前だけにし、見出しから線は伸ばさない。 */
  .rx-field-group {
    container: rx-field-group / inline-size;
    border: 0;
    & > legend {
      font-size: var(--rx-body);
      font-weight: 600;
      line-height: 1.5;
    }
    & > .layout {
      display: grid;
      align-items: start;
      gap: var(--rx-space-4);
      min-inline-size: 0;
      margin-block-start: var(--rx-space-4);
      & > .description {
        max-inline-size: 32em;
        color: var(--rx-muted);
        font-size: var(--rx-label);
        line-height: var(--rx-label-leading);
      }
      & > .fields {
        display: grid;
        align-content: start;
        gap: var(--rx-space-4);
        min-inline-size: 0;
      }
    }
    @container rx-field-group (inline-size >= 40rem) {
      & > .layout:has(> .description) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--rx-space-8);
      }
    }
  }
  /*
    選択肢のグループはFieldと同じく、名前のラベルの下に選択肢を並べる。枠で囲まない。
    行の間は文字の高さより広めに空ける。
  */
  .rx-choice-group {
    border: 0;
    & > legend {
      font-size: var(--rx-label);
      font-weight: var(--rx-label-weight);
      line-height: var(--rx-label-leading);
    }
    & > * + * {
      margin-block-start: var(--rx-space-2);
    }
    & > .list {
      display: grid;
      gap: var(--rx-space-3);
      min-inline-size: 0;
    }
  }
  @media (pointer: coarse) {
    .rx-choice {
      min-block-size: 2.75rem;
      padding-block: var(--rx-space-3);
    }
    .rx-combobox > .options > li {
      min-block-size: 2.75rem;
      padding-block: var(--rx-space-3);
    }
  }
  .rx-choice {
    display: grid;
    grid-template-columns: calc(10em / 7) minmax(0, 1fr);
    align-items: start;
    gap: 0.5em;
    font-size: var(--rx-label);
    line-height: calc(10 / 7);
    cursor: pointer;
    /*
      チェックボックスとラジオの見た目はbase.css（手本のMacの標準の部品を測って描いたもの）が持つ。
      ここでは名前の一行目と上下の中央をそろえるだけにする。
    */
    & > input {
      margin-block-start: calc((10em / 7 - 0.875rem) / 2);
      cursor: inherit;
    }
    & > span {
      min-inline-size: 0;
    }
    /* 選択肢そのものは通常の太さ。説明を伴う選択肢だけ、題名を太字のラベルにする。 */
    & > span > strong {
      display: block;
      font-weight: 400;
    }
    & > span > strong:has(+ small) {
      font-weight: var(--rx-label-weight);
    }
    & > span > small {
      display: block;
      color: var(--rx-muted);
      font-size: var(--rx-small);
      margin-block-start: var(--rx-space-1);
    }
    &:has(> input:disabled) {
      color: var(--rx-muted);
      cursor: not-allowed;
    }
    /*
      説明を伴う選択肢は、枠で囲んだ白い面。ホバーすると枠を濃くし、
      選んだ面は、選ぶ操作の共通の紺の縁（--rx-selected-edge）と、選んでいる項目の淡い青（--rx-option-active）にする。
      使えない選択肢は、面と枠をそのままにして文字だけを灰色にする。
    */
    &[data-kind="option"] {
      padding-block: var(--rx-space-3);
      padding-inline: var(--rx-space-4);
      border: var(--rx-stroke-width) solid var(--rx-border);
      border-radius: var(--rx-radius-field);
      background: var(--rx-surface);
      box-shadow: none;
    }
    &[data-kind="option"]:hover:not(:has(> input:disabled)) {
      border-color: var(--rx-control-border);
    }
    &[data-kind="option"]:has(> input:checked) {
      border-color: var(--rx-selected-edge);
      background: var(--rx-option-active);
    }
  }
  /*
    入力欄はBasecamp 2の日付の欄の実測（docs/visual-reference.md）に合わせる。
    1px #dedede の枠、角丸 2px、内側の影なし、高さ 24px、12px の黒い文字、左右の余白 6px。
  */
  .rx-input {
    /* 12px の文字で高さ 24px。枠の内側（22px）との差を偶数にし、文字の上下の余りを整数pxに保つ。 */
    --rx-input-size: calc(24em / 12);
    --rx-input-border-size: var(--rx-stroke-width);
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--rx-input-size);
    padding-block: calc((var(--rx-input-size) - 10em / 7 - 2 * var(--rx-input-border-size)) / 2);
    padding-inline: 0.5em;
    border: var(--rx-input-border-size) solid var(--rx-input-border);
    border-radius: var(--rx-radius-mark);
    background: var(--rx-surface);
    color: var(--rx-text);
    box-shadow: var(--rx-shadow-input);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    font-weight: 400;
    line-height: calc(10 / 7);
    /* フォーカスは、Safariの入力欄と同じ青い縁と、外側の淡い青の輪。 */
    &:focus-visible {
      outline: 0.125rem solid transparent;
      outline-offset: 0;
      border-color: var(--rx-focus-border);
      box-shadow: var(--rx-focus-glow);
    }
    &[data-size="short"] {
      max-inline-size: 8rem;
    }
    &::placeholder {
      color: var(--rx-placeholder);
      opacity: 1;
    }

    &[data-invalid="true"] {
      border-color: var(--rx-danger);
    }

    /* 読み取り専用は値を読めるので面の色だけ変える。使えない入力は斜線にする。 */
    &[readonly] {
      background: var(--rx-gray-20);
    }

    /* 使えない入力は、Buttonと同じく形と面をそのままにし、文字だけを灰色にする。 */
    &:disabled {
      color: var(--rx-disabled-text);
      box-shadow: none;
    }
    /* 大きな入力は14pxの文字で高さ32px（largeのButtonと同じ）。 */
    &:where([data-size="large"]) {
      --rx-input-size: calc(32em / 14);
      padding-block: calc((var(--rx-input-size) - 10em / 7 - 2 * var(--rx-input-border-size)) / 2);
      padding-inline: 0.5em;
      font-size: calc(var(--rx-label) * 7 / 6);
      line-height: var(--rx-control-leading);
    }
  }
  select.rx-input[data-variant="inline"] {
    inline-size: auto;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    &[data-invalid="true"] {
      border-color: var(--rx-danger);
    }
    &:hover:not(:disabled, [data-invalid="true"]) {
      border-color: var(--rx-border);
      background: var(--rx-background);
    }
    &:focus-visible {
      border-color: var(--rx-link);
      background: var(--rx-surface);
      box-shadow: 0 0 0 0.125rem var(--rx-focus-ring);
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  input.rx-input {
    block-size: var(--rx-input-size);
    overflow: clip;

    /* 一行入力は内寸を行高に使い、上下paddingとの二重配置をなくす。 */
    &:where(:not([type="file"])) {
      padding-block: 0;
      line-height: calc(var(--rx-input-size) - 2 * var(--rx-input-border-size));
    }
  }
  /* 複数行の入力は、BC2のコメント欄と同じく #c1c1c1 の枠と角丸 5px、本文と同じ大きさの文字。 */
  textarea.rx-input {
    padding-block: var(--rx-space-2);
    padding-inline: var(--rx-space-3);
    border-color: var(--rx-textarea-border);
    border-radius: var(--rx-radius-control);
    font-size: var(--rx-body);
    line-height: var(--rx-leading);
    resize: vertical;
  }
}
@layer components {
  /*
    一つを選ぶ欄。手本はBasecamp 2・Highriseが使っていた2012年前後のMacの標準のポップアップボタン（実測: controls.md 8章）。
    今のブラウザの標準の部品は形も色も違うので、測った枠と塗りで描く。
    - 1px #9c9c9c（上だけ #a6a6a6）の枠、角丸 約4px、#ffffff → #f5f5f5 → 中ほどで #ececec → #f2f2f2 の縦の塗り（手本で確かめた例外）、下に1px #f0f0f0
    - 末尾に上下の矢印。手本の高さ18pxは13pxの文字の時の値なので、Retrixでは控えめなボタンと同じ22pxにそろえる
  */
  select.rx-input:not([multiple], [size], [data-variant="inline"]) {
    appearance: none;
    justify-self: start;
    inline-size: auto;
    max-inline-size: 100%;
    min-block-size: var(--rx-button-size);
    padding-block: 0;
    padding-inline: var(--rx-space-2) calc(var(--rx-space-2) + 0.75rem + var(--rx-space-1));
    border: var(--rx-stroke-width) solid #9c9c9c;
    border-block-start-color: #a6a6a6;
    border-radius: 0.25rem;
    background:
      url("../assets/caret-up-down-bold.svg") right var(--rx-space-2) center / 0.75rem 0.75rem
        no-repeat,
      linear-gradient(#ffffff, #fdfdfd 20%, #f5f5f5 49%, #ececec 50%, #f2f2f2);
    box-shadow: 0 var(--rx-stroke-width) 0 #f0f0f0;
    color: var(--rx-ink);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    line-height: calc(17 / 12);
    cursor: pointer;
    &:dir(rtl) {
      background-position:
        left var(--rx-space-2) center,
        0 0;
    }
    &:disabled {
      color: var(--rx-disabled-text);
      cursor: default;
    }
    &:focus-visible {
      outline: 0.125rem solid var(--rx-focus-border);
      outline-offset: var(--rx-stroke-width);
      box-shadow: none;
    }
    &[data-invalid="true"] {
      border-color: var(--rx-danger);
    }
  }
  .rx-input[type="file"] {
    padding-block: var(--rx-space-2);
    font-size: var(--rx-small);
    &::file-selector-button {
      border: 0;
      border-inline-end: var(--rx-stroke-width) solid var(--rx-border);
      padding-block: var(--rx-space-1);
      padding-inline: var(--rx-space-2) var(--rx-space-3);
      margin-inline-end: var(--rx-space-3);
      background: transparent;
      color: var(--rx-link);
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }
  }
}

@layer components {
  @media (pointer: coarse) {
    .rx-input {
      --rx-input-size: 2.75rem;
    }
    .rx-input:not([type="file"]) {
      font-size: max(1rem, var(--rx-label));
    }
    :is(.rx-password, .rx-combobox, .rx-date-picker > .control) > .toggle {
      inline-size: calc(2.75rem - 0.125rem);
      block-size: calc(100% - 0.125rem);
    }
  }
}