/* iPhone で入力欄にカーソルを合わせたとき、読んでいた文が画面の外へ消えないための共通ルール。
   入力欄のあるページは、必ずこのファイルと /shared/keyboard-fit.js の両方を読み込む
   （src/mobile-input-invariant.test.ts がそれを確かめる）。 */

/* 見えている高さ。keyboard-fit.js が入れる。JS が動く前は 100dvh を使う */
:root {
  --seen: 100dvh;
  --seen-top: 0px;
  --kb: 0px;
}

/* iOS は 16px 未満の入力欄にカーソルを合わせると勝手にズームし、周りの文字が画面の外へ出る。
   CSS で何も指定していない入力欄はブラウザ既定の約 13.3px になるので、全ページで一律に 16px 以上にする。
   ページ側の class 指定（13px や 14px）に負けないよう !important にしてある。16px より大きくしている欄は無い */
textarea,
select,
input:not([type]),
input[type='text'],
input[type='email'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='password'] {
  font-size: max(16px, 1em) !important;
}

/* キーボードが出ている間は隠す。ただし自分の中の入力欄をいじっているときは隠さない */
html[data-keyboard='up'] [data-hide-when-keyboard]:not(:focus-within) {
  display: none !important;
}

/* キーボードが出ている間は張り付きをやめる。見えている高さが半分以下になるので、上に張り付いたバーが問いを隠す */
html[data-keyboard='up'] [data-unstick-when-keyboard] {
  position: static !important;
}

/* 画面下に固定したバーの中の入力欄をいじっている間は、バーをキーボードの上に乗せる。
   そのままだとバーごとキーボードの裏に入り、送信ボタンとエラー文が見えなくなる */
html[data-keyboard='up'] [data-ride-keyboard] {
  bottom: calc(var(--kb) + 4px) !important;
}