/* ============================================================
 * FASTUP · assets/mobile-std.css · มาตรฐานมือถือกลาง (FUP82 · 01/10/2569)
 *
 *   โค้ชสั่ง 13:55 + 15:48: หน้าที่ใช้บนมือถือต้อง "กดแล้วรู้สึก · บันทึกแล้วเห็นสถานะ ·
 *   ไม่เด้งกลับบน · แตะช่องกรอกแล้วจอไม่ซูมเอง" และห้ามแตะระบบ Zoom/ลงทะเบียน/ยืนยัน LINE
 *
 *   🔒 ไฟล์นี้โหลด "เฉพาะหน้าที่ใส่ลิงก์เอง" — ไม่ได้ผูกกับเปลือกกลาง (appshell/helpers)
 *      หน้า Zoom · ลงทะเบียน · ยืนยันเบอร์ · LINE login ไม่โหลดไฟล์นี้ → หน้าตาเดิม 100%
 *   🔑 แตะแค่ขนาด/ความรู้สึกกด ไม่แตะสีพื้นของหน้า · ไม่ใช้ !important
 * ========================================================== */

@media (max-width: 820px) {
  /* แตะช่องกรอกแล้ว iPhone ซูมเอง เพราะตัวหนังสือในช่องเล็กกว่า 16px → ยกเป็น 16px บนมือถือ
     (:not หลายชั้นทำให้น้ำหนักกฎสูงพอชนะกฎหน้าเดิมที่ตั้ง 13–15px ไว้ โดยไม่ต้องใช้ !important) */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
  body select:not([multiple]),
  body textarea {
    font-size: 16px;
  }

  /* รูป/วิดีโอไม่ล้นจอ — ใช้น้ำหนักกฎเป็นศูนย์ (:where) กฎเดิมของหน้าชนะเสมอ
     และไม่แตะรูปที่หน้ากำหนดความสูงไว้ (โลโก้กลม/รูปโปรไฟล์) จะได้ไม่เพี้ยนทรง (แก้ 16:25 ตามที่ตรวจแย้งเจอ) */
  :where(img:not([height]), video:not([height])) { max-width: 100%; }

  /* ลิงก์ยาว/คำยาวไม่ดันจอให้ต้องเลื่อนซ้ายขวา */
  body { overflow-wrap: break-word; }
}

/* ของที่กดได้ แต่ไม่ได้หน้าตาเป็นปุ่ม (การ์ด/แถวที่มี onclick, การ์ดลิงก์) → กดแล้วยวบ */
body [onclick]:not(input):not(select):not(textarea):not(option),
body a[href][class*="card"], body a[href][class*="tile"] {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(201,169,97,.28);
}
body [onclick]:not(input):not(select):not(textarea):not(option):not(button):active,
body a[href][class*="card"]:active, body a[href][class*="tile"]:active {
  transform: translateY(1px) scale(.992);
  filter: brightness(.96);
  transition: transform .08s ease, filter .08s ease;
}

/* ป้ายสถานะลอยล่างจอ (ใช้กับ assets/mobile-std.js) — น้ำเงินแบรนด์ ขอบทอง */
.ms-toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(8px);
  z-index: 2147483000;
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  border-radius: 12px;
  border-left: 4px solid #c9a961;
  background: #0d1f3c; color: #fff;
  font: 600 15px/1.5 Prompt, Sarabun, system-ui, sans-serif;
  box-shadow: 0 10px 28px rgba(13,31,60,.38);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ms-toast.err { border-left-color: #ef4444; }
.ms-toast.ok  { border-left-color: #22c55e; }

@media (prefers-reduced-motion: reduce) {
  body [onclick]:active, body a[href][class*="card"]:active, body a[href][class*="tile"]:active { transform: none !important; }
  .ms-toast { transition: none !important; }
}
