/* タップ領域（モバイル）— 2026-08-07
 *
 * ⚠️ 指で押す面は 44px 以上。スマホUIのスクリーニング（390×844）で、Meta 広告の1周
 *    7画面だけで **13px〜40px の押しにくい要素が 40 箇所以上**見つかった。
 *    最小は差し替え画面のチェックボックス 13px で、**その画面の主操作**だった。
 *
 * ここに置く理由: 対象が7画面に散っていて、各ページの <style> に同じ規則を書くと
 * 7重複になる。app.py の `_inject_design_tokens` が「23画面へ1箇所から配る」型を
 * 既に持っているので、それに乗せる。
 *
 * ⚠️ `(pointer: coarse)` で絞る。デスクトップで窓を狭めただけのときは効かせない
 *    （マウスなら小さい的でも押せるし、密度を落とすと一覧が見渡せなくなる）。
 *
 * ⚠️ ここでやらないこと: テキストリンクへの padding。本文中のインラインリンクにまで
 *    効いて行が重なるため。リンクは個別に見る（スクリーニングで 20px / 39px が残っている）。
 */

@media (max-width: 640px) and (pointer: coarse) {
  button,
  select,
  [role="button"] {
    min-height: 44px;
  }

  /* チェック・ラジオは min-height では大きくならない（描画箱そのものを指定する） */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
    /* ⚠️ **flex の行の中では、幅を指定しても縮む。** 2026-08-31 に Google/Meta の接続設定で
       踏んだ: `<label style="display:inline-flex">` の中で文字が入りきらず、22px と書いた
       チェックが **17.7px** に縮んでいた（`flex-shrink` の既定は 1）。
       縮んだ的は的ではないので、**押す面は縮ませない**。溢れるなら行を畳む側で直す
       （そちらは見て分かるが、じわっと縮むのは誰も気づかない）。 */
    flex-shrink: 0;
  }

  /* テキスト入力も指で押す面。上で箱を指定した checkbox/radio は除く */
  input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 44px;
  }

  /* リンク。**単独の操作リンクだけ**に効かせたい（本文中のインラインリンクに padding を
     足すと行が重なる）。分類は CSS の仕様がやってくれる——
     **min-height は非置換のインライン要素には効かない**ので、
       display:block / inline-block の単独リンク → 効く
       display:inline の本文中のリンク         → 無視される
     実測でも本文中の「入稿待ちを見る →」(p.muted の中・inline) は 39px のまま動かない。
     ⚠️ だから `display` を書き換えてはいけない。書き換えた瞬間に本文が壊れる。 */
  a {
    min-height: 44px;
    /* 伸ばした分の余白の中で文字を中央に置く。**display は変えない**
       （変えると本文中のリンクが壊れる）。align-content はブロック要素にも効き、
       インライン要素では無視されるので、上の min-height と同じ切り分けが働く。 */
    align-content: center;
  }
}