/* RentSpace — แยกออกมาจาก base.html ใน 2.1.29 เพื่อให้เบราว์เซอร์แคชไว้ข้ามหน้าได้
   ห้ามใส่ Jinja ({{ }} / {% %}) ในไฟล์นี้ ถ้าต้องใช้ค่าจากระบบ ให้ไปไว้ใน <style> ที่ base.html แทน */

  /* ---------- โหมดสอนใช้งาน ---------- */
  #helpModeBtn.hm-on {
    background: rgba(52,120,246,0.14);
    border-color: rgba(52,120,246,0.42);
    color: var(--accent);
  }

  /* จุดสังเกตบนของที่มีคำอธิบาย — ใช้ outline ไม่ใช่ border/padding
     เพราะ outline ไม่กินพื้นที่ layout จึงไม่ทำให้หน้าที่จัดไว้แล้วเลื่อน */
  body.help-mode [data-help] {
    outline: 1.5px dashed rgba(52,120,246,0.55);
    outline-offset: 2px;
    border-radius: 4px;
    cursor: help;
  }
  body.help-mode [data-help]:hover,
  body.help-mode [data-help]:focus-visible {
    outline-color: var(--accent);
    outline-style: solid;
    background: rgba(52,120,246,0.06);
  }

  /* กล่องคำอธิบาย — ตัวเดียวใช้ซ้ำทั้งหน้า ย้ายตำแหน่งเอาแทนการสร้างใหม่ทุกครั้ง */
  .hm-tip {
    position: fixed; z-index: 4000; max-width: 320px;
    background: var(--ink); color: #fff;
    border-radius: 10px; padding: 10px 13px;
    font-family: 'Sarabun', sans-serif; font-size: 13px; line-height: 1.62;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
  }
  .hm-tip.hm-show { opacity: 1; transform: translateY(0); }
  .hm-tip-title {
    font-family: 'Prompt', sans-serif; font-weight: 600; font-size: 12.5px;
    color: #9fc0ff; margin-bottom: 3px;
  }
  .hm-tip-arrow {
    position: absolute; width: 9px; height: 9px; background: var(--ink);
    transform: rotate(45deg);
  }

  /* แถบแจ้งตอนเปิดโหมด */
  .hm-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
    z-index: 4001; background: var(--ink); color: #fff;
    border-radius: 999px; padding: 10px 20px;
    font-family: 'Sarabun', sans-serif; font-size: 13px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.26);
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  }
  .hm-toast.hm-show { opacity: 1; transform: translate(-50%, 0); }

  @media print { .hm-tip, .hm-toast { display: none !important; } }
  @media (max-width: 640px) { .hm-tip { max-width: calc(100vw - 28px); } }