/* ============================================================
 * ส่วนประกอบ UI ที่ใช้ร่วมกัน — select ค้นหาได้ + กรอบลากไฟล์
 * ใช้ตัวแปรสีชุดเดียวกับ app.css (แต่ละ app ประกาศ :root ของตัวเอง)
 * ============================================================ */

/* แต่ละ app ตั้ง body{user-select:none} เพื่อกันการลากเลือกข้อความในฉาก
   แต่บน Safari/WebKit ค่านั้นตกทอดไปที่ช่องกรอก ทำให้ "พิมพ์ตัวเลขไม่ได้"
   จึงต้องปลด user-select เฉพาะช่องกรอกข้อความทุกที่ */
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}

/* ---------- select ค้นหาได้ ---------- */
.pgss{position:relative;display:inline-flex;flex-direction:column;min-width:0}
.pgss-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.pgss-btn{
  display:flex;align-items:center;gap:6px;width:100%;
  font-family:inherit;font-size:inherit;color:inherit;
  background:#fff;border:1px solid var(--line,#e6e3dc);border-radius:999px;
  padding:5px 10px;cursor:pointer;text-align:left;min-height:30px;
}
.pgss-btn:hover{border-color:var(--brand,#2e7d88)}
.pgss-label{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;font-size:.76rem;color:#191a24;
}
.pgss-caret{font-size:.9rem;line-height:1;opacity:.55;flex:none;color:#191a24}
.pgss-panel{
  /* ตำแหน่งจริงคำนวณเป็น position:fixed ตอนเปิด (ดู place() ใน ui.js)
     เพื่อไม่ให้กล่องแม่ที่มี overflow ตัดแผงตัวเลือกทิ้ง */
  position:fixed;z-index:900;
  min-width:min(280px,86vw);max-width:340px;
  background:#fff;border:1px solid var(--line,#e6e3dc);border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(25,26,36,.35);
  padding:6px;display:flex;flex-direction:column;gap:5px;
}
/* ต้องประกาศเอง — display:flex ด้านบนมี specificity สูงกว่ากฎ [hidden] ของเบราว์เซอร์
   ถ้าไม่ใส่ แผงจะกางค้างตลอดเวลาแม้ตั้ง hidden ไว้แล้ว */
.pgss-panel[hidden]{display:none}
.pgss-search{
  font-family:inherit;font-size:.82rem;padding:7px 10px;
  border:1px solid var(--line,#e6e3dc);border-radius:8px;background:#f7f6f2;color:#191a24;
}
.pgss-search:focus{outline:2px solid var(--brand-soft,#dcecee);border-color:var(--brand,#2e7d88)}
.pgss-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.pgss-item{
  padding:7px 10px;border-radius:8px;font-size:.82rem;cursor:pointer;
  color:#191a24;white-space:normal;line-height:1.35;
}
.pgss-item:hover,.pgss-item.is-active{background:var(--brand-soft,#dcecee)}
.pgss-item.is-selected{font-weight:700;color:var(--brand-ink,#4b3fc4)}
.pgss-item.is-selected::after{content:' ✓'}
.pgss-empty{padding:10px;font-size:.8rem;color:#6b6c7e;text-align:center}

/* ---------- กรอบลากไฟล์ ---------- */
/* ใช้ label.pgdz เพื่อให้ specificity สูงกว่ากฎ .field label ของ app.css
   ไม่งั้นกรอบจะกลายเป็น display:block แล้วไอคอน/ข้อความไหลไปอยู่บรรทัดเดียวกัน */
label.pgdz{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:9px;
  border:1.5px dashed var(--line,#e6e3dc);border-radius:12px;
  padding:12px 14px;background:var(--bg,#f5f4ef);cursor:pointer;
  transition:border-color .15s,background .15s;text-align:center;min-height:56px;
}
label.pgdz:hover,label.pgdz:focus-visible{border-color:var(--brand,#2e7d88);background:var(--brand-soft,#dcecee)}
label.pgdz.is-over{border-color:var(--brand,#2e7d88);background:var(--brand-soft,#dcecee);transform:scale(1.01)}
.pgdz-input{position:absolute;opacity:0;width:0;height:0}
.pgdz-icon{font-size:1.15rem;line-height:1;color:var(--brand,#2e7d88)}
.pgdz-text{font-size:.84rem;font-weight:600;word-break:break-all}
.pgdz-note{font-size:.73rem;color:var(--muted,#6b6c7e)}
.pgdz-preview{max-width:80px;max-height:80px;object-fit:contain;border-radius:8px;background:#fff}
video.pgdz-preview{object-fit:cover;background:#111}

/* ---------- ตัวเลื่อนค่าแบบมีปุ่ม − / + ---------- */
.pgknob{display:flex;flex-direction:column;gap:5px}
.pgknob-head{display:flex;align-items:center;gap:8px}
.pgknob-label{font-size:.76rem;color:var(--muted,#6b6c7e);flex:1;min-width:0}
.pgknob-val{
  font-family:ui-monospace,monospace;font-size:.82rem;font-weight:700;
  background:var(--bg,#f5f4ef);border:1px solid var(--line,#e6e3dc);border-radius:8px;
  padding:3px 10px;cursor:text;color:inherit;min-width:74px;text-align:right;
}
.pgknob-val:hover{border-color:var(--brand,#2e7d88)}
.pgknob-input{
  font-family:ui-monospace,monospace;font-size:.82rem;font-weight:700;width:92px;
  padding:3px 8px;border:1px solid var(--brand,#2e7d88);border-radius:8px;text-align:right;
}
.pgknob-row{display:flex;align-items:center;gap:8px}
.pgknob-btn{
  width:38px;height:38px;flex:none;border-radius:12px;
  border:1px solid var(--line,#e6e3dc);background:#fff;color:inherit;
  font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer;
  display:grid;place-items:center;user-select:none;touch-action:none;
}
.pgknob-btn:hover{border-color:var(--brand,#2e7d88);background:var(--brand-soft,#dcecee)}
.pgknob-btn:active{transform:translateY(1px)}

/* แถบเลื่อนหนาขึ้นและหัวจับใหญ่ขึ้น — ของเดิมบางจนจิ้มยากบนแท็บเล็ต */
.pgknob-range{
  flex:1;min-width:0;height:26px;background:transparent;
  -webkit-appearance:none;appearance:none;cursor:pointer;touch-action:none;
}
.pgknob-range::-webkit-slider-runnable-track{
  height:10px;border-radius:999px;background:#e2dfd6;
}
.pgknob-range::-moz-range-track{height:10px;border-radius:999px;background:#e2dfd6}
.pgknob-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-8px;
  border-radius:50%;background:var(--brand,#2e7d88);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(25,26,36,.28);
}
.pgknob-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--brand,#2e7d88);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(25,26,36,.28);
}
.pgknob-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brand-ink,#4b3fc4);outline-offset:2px}

/* ============================================================
 * ปุ่มสลับภาษาในแอปย่อย (i18n.js → langToggle)
 * ============================================================ */
.pg-lang{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid var(--line,#e6e3dc);
  box-shadow:0 2px 8px rgba(25,26,36,.1);
}
.pg-lang-btn{
  font-family:inherit;font-size:.72rem;font-weight:700;color:var(--muted,#6b6c7e);
  border:none;background:none;cursor:pointer;padding:4px 10px;border-radius:999px;line-height:1.2;min-height:28px;
}
.pg-lang-btn.is-active{background:var(--brand,#2e7d88);color:#fff}
/* วางลอยมุมขวาบนของเวที (ค่าเริ่มต้น — แอปเลือกวางที่อื่นได้) */
.pg-lang.pin-tr{position:absolute;top:12px;right:12px;z-index:20}

/* ============================================================
 * กล่องอ่านค่า (.res) — ใช้ร่วมกันหลายแล็บ
 * วางไว้ที่ ui.css ที่ทุกแล็บโหลดอยู่แล้ว จะได้ไม่ต้องก๊อปซ้ำทีละไฟล์
 * ============================================================ */
.res{border:1px solid var(--line,#d9dee5);border-radius:12px;padding:10px 12px;margin:8px 0;
  background:var(--card,#fff)}
.res-top{font-size:1.25rem;font-weight:700;letter-spacing:.01em;margin-bottom:6px;
  font-variant-numeric:tabular-nums}
/* ค่าที่ยาว (เช่นรายการยอดความถี่ของ signal-lab) ต้องตกลงบรรทัดใหม่ ไม่ใช่ล้นออกนอกกล่อง
 * ลำดับคือ: อยู่บรรทัดเดียวกันก่อน → ถ้าไม่พอ ค่าตกลงมาชิดขวาบรรทัดล่าง → ถ้ายังไม่พอค่อยตัดคำ */
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;
  padding:3px 0;font-size:.85rem;line-height:1.5}
.res-k{opacity:.7;flex:1 1 auto;min-width:0}
.res-v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
  flex:0 1 auto;min-width:0;margin-left:auto;overflow-wrap:anywhere}
.res-v.good{color:#2e7d4f}
.res-v.bad{color:#c0392b}
.res-v.blue{color:#2f6fa8}
.res-v.orange{color:#c56d21}