/* =====================================================================
   tap-fix.css — 触れただけで勝手に拡大されるのを止める
   ---------------------------------------------------------------------
   【何が起きていたか】
   iPhone の Safari は、**文字が16px未満の入力欄に触れると、
   画面を勝手に拡大する**。しかも指を離しても元に戻らない。
   毎回、指で絞って戻すことになる。これはこのサイトの全ページで
   起きていた（色の入力欄・数値の入力欄・名前の入力欄など）。

   【なぜ viewport で塞がないか】
   `user-scalable=no` や `maximum-scale=1` は、iOS 10 以降**無視される**。
   加えて、それが効く端末では「拡大したい人が拡大できない」ことになる。
   目が悪い人からページを取り上げるのと同じで、やってはいけない。

   → 唯一の正しい直し方は「入力欄の文字を16px以上にする」。
     この1枚で全ページに効かせる。

   【どこに効かせるか】
   `@media (pointer: coarse)` ＝ 指で触る端末だけ。
   パソコンの見た目は1pxも変えない。

   ★このファイルは、他のCSSより**あとに**読み込むこと。
     先に読むと、ページ側の 13px などに上書きされて効かなくなる。
   ===================================================================== */

@media (pointer: coarse) {

  /* ---- 文字を打てるところは、すべて16px以上 -------------------------
     チェックボックスやスライダーなど、文字を打たないものは対象外。
     ここを広く取りすぎると、見た目だけが崩れて効き目が無い。
     ------------------------------------------------------------------ */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="hidden"]),
  textarea,
  select,
  [contenteditable="true"],
  [contenteditable="plaintext-only"] {
    /* ★!important を付ける。
         ここは「見た目を整える指定」ではなく、
         **端末の勝手な拡大を止めるための指定**。
         ページ側の .filter-select { font-size: 14px } のような
         クラス指定に負けると、その入力欄だけ症状が戻る。
         実際、select と .form-input が負けて 14px のままだった。
         見た目より、触れるかどうかを優先する。 */
    font-size: max(16px, 1em) !important;
    /* 文字が大きくなるぶん、狭い入れ物からあふれないようにする */
    min-width: 0;
  }

  /* ---- 16px にしたぶん、窮屈になる所を広げる -------------------------
     数値の入力欄は、もともと13pxで詰めて作ってある。
     文字だけ大きくすると桁が隠れるので、入れ物も一緒に広げる。
     ------------------------------------------------------------------ */
  .lcs-num { grid-template-columns: 1fr 84px; }
  .lcs-num-box { height: 40px; padding-right: 26px; }
  .lcs-field--num { min-height: 40px; height: 40px; }
  .lcs-num-unit { font-size: 11px; right: 7px; }

  /* 色の16進の入力欄（トップ画面）も、桁が隠れないように */
  .color-text { padding: 10px 10px; }

  /* ---- 分かっている入力欄は、名指しでも押さえる ----------------------
     要素名だけの指定は、クラス指定に負けることがある。
     いま 16px 未満だと分かっているものは、名前で直接おさえる。
     二重に書くのは冗長だが、ここは「効かないと症状が戻る」場所なので、
     冗長さより確実さを取る。
     ------------------------------------------------------------------ */
  .filter-select,
  .form-input,
  .form-textarea,
  .search-input,
  .color-text,
  .url-input,
  .lcs-num-box,
  .lcs-field--num,
  .lcs-field,
  .lcs-lrename,
  .lcs-top-titleinput {
    font-size: 16px !important;
  }
}

/* =====================================================================
   ダブルタップでの拡大を止める
   ---------------------------------------------------------------------
   ボタンやリンクを続けて2回押したときに拡大されるのも、同じ不快さになる。
   `manipulation` は「二本指の拡大は残したまま、
   ダブルタップの拡大だけを外す」指定。拡大したい人の手は奪わない。

   ★要素名だけで書く（クラスより弱い）。
     エディタ側で `.lcs-handle { touch-action: pan-y }` のように
     細かく決めている所を、こちらが上書きしないため。
   ===================================================================== */
a,
button,
label,
summary,
[role="button"],
[role="tab"],
input,
select,
textarea {
  touch-action: manipulation;
}

/* =====================================================================
   長おしで出る「青いマーカー」と吹き出しを止める
   ---------------------------------------------------------------------
   【何が起きていたか】
   スマホで少し長く押すと、端末が
     ・文字を青く反転させて、両端に丸いつまみを出す
     ・「コピー / 調べる / 共有」の吹き出しを出す
     ・画像なら「写真に追加 / コピー」の板を出す
   これは**指の操作を丸ごと横取りする**。
   出た瞬間、動かしていたものは指から離れる。
   編集画面のように「長おしで掴む」作りとは、真正面からぶつかる。

   【どこまで止めるか】
   押すためのもの（ボタン・つまみ・アイコン）からは、全部止める。
   読むための文章からは止めない。**読んだ文をコピーする自由は残す**。
   止めすぎると、住所や電話番号を写せないページになる。

   ★`-webkit-touch-callout` は iOS の吹き出し、
     `user-select` は青いマーカーの担当。片方だけでは消えない。
   ===================================================================== */
a,
button,
label,
summary,
[role="button"],
[role="tab"],
[role="switch"],
[role="menuitem"],
input[type="range"],
input[type="color"],
input[type="checkbox"],
input[type="radio"],
img,
svg,
.lcs-icon {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- 編集画面は、丸ごと止める ----------------------------------------
   ここは「読む場所」ではなく「作る場所」である。
   置いた文字をなぞって選べても、できることは何も増えない。
   むしろ、動かそうとした指が毎回マーカーに取られる。
   ★文字を打っている最中だけは、当然そのままにする。
     打った文字を選べないと、直すことも消すこともできなくなる。
   --------------------------------------------------------------------- */
.lcs-editor,
.lcs-editor * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.lcs-editor input,
.lcs-editor textarea,
.lcs-editor [contenteditable="true"],
.lcs-editor [contenteditable="plaintext-only"],
/* 打っている最中の中身（子要素）も忘れずに戻す。
   ここを落とすと、文字は打てるのに一文字も選べない箱になる */
.lcs-editor [contenteditable="true"] *,
.lcs-editor [contenteditable="plaintext-only"] * {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* 画像の「引きずって保存」も止める（編集中に画像が飛んでいく） */
.lcs-editor img,
.lcs-editor video { -webkit-user-drag: none; }