/* ═══ order2 — "ปลูกเรือน" 4 จังหวะ ═══
   ต่อยอด style.css เดิม (token สี/ฟอนต์ชุดเดียวกัน) — ไฟล์นี้เพิ่มเฉพาะ component ใหม่
   กติกา typography ไทย: ห้าม letter-spacing กับข้อความไทย (สระ ำ จะหลุดจากพยัญชนะ) */

/* ── แถบ 4 จังหวะ ── */
.beats{display:flex;gap:6px;margin:14px 0 4px;padding:0;list-style:none}
.beat{flex:1;text-align:center;font-size:.74rem;color:var(--muted);position:relative;padding-top:22px;line-height:1.35}
.beat::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:#fff;border:1.5px solid var(--line);transition:.2s}
.beat::after{content:"";position:absolute;top:11px;left:calc(50% + 10px);right:calc(-50% + 10px);height:1.5px;background:var(--line)}
.beat:last-child::after{display:none}
.beat.now{color:var(--gold-d);font-weight:600}
.beat.now::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3.5px rgba(201,162,92,.22)}
.beat.done::before{background:var(--ok);border-color:var(--ok)}
.beat.done::after{background:var(--ok)}

/* ── จังหวะ ๑ — การ์ดเลือกจำนวน ── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.pgrid.pets{grid-template-columns:repeat(5,1fr);gap:7px}
.pcard{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 6px 11px;text-align:center;cursor:pointer;transition:.16s;min-height:112px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.pcard .figs{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:34px}
.pcard .figs .frow{display:flex;justify-content:center;gap:4px}
.pcard .figs svg{flex:none}
.pcard .figs .dash{color:var(--muted);font-size:1.1rem;line-height:1}
.pcard .n{font-family:'Trirong',serif;font-weight:600;color:var(--navy);font-size:.95rem;line-height:1.2}
.pcard .pr{font-size:.74rem;color:var(--muted);line-height:1.3}
.pcard .pr s{opacity:.72}
.pcard .pr .promo{color:var(--gold-d);font-weight:600;margin-left:4px}
.pcard[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,#F8EFDC);
  box-shadow:0 0 0 3.5px rgba(201,162,92,.18)}
.pcard[aria-pressed="true"]::after{content:"✓";position:absolute;top:5px;right:8px;color:var(--gold-d);font-weight:700;font-size:.86rem}
.pcard .tagfree{position:absolute;top:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--warn);color:#fff;font-size:.64rem;padding:1px 7px;border-radius:999px}
.pcard.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.pgrid.pets .pcard{min-height:74px;padding:9px 3px 8px}
.pgrid.pets .pcard .n{font-size:.82rem}

.bigprice{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;
  background:linear-gradient(135deg,#fff,#F8F3E7);border:1.5px solid var(--gold);border-radius:14px;padding:13px 18px}
.bigprice .lb{font-size:.86rem;color:var(--muted)}
.bigprice .amt{font-family:'Trirong',serif;font-size:1.7rem;font-weight:600;color:var(--navy);transition:transform .18s}
.bigprice .amt s{font-family:'Sarabun',sans-serif;font-size:.82rem;font-weight:400;color:var(--muted);margin-right:7px}
.bigprice .amt.pop{transform:scale(1.06)}
.bigprice .dt{font-size:.76rem;color:var(--muted);flex:1;text-align:right}

/* ── จังหวะ ๒ — แถวสมาชิก ── */
.mrow{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;margin-top:9px;transition:border-color .16s}
.mrow.main{border-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,#fff)}
.mrow.petrow{background:#FDFAF1}
.mrow.error{border-color:var(--warn)}
/* ชี้จุดที่ยังไม่ได้เลือก: กรอบแดงประ + ป้ายลอย "เหนือ" กล่องแล้วชี้ลง (เจ้าของสั่ง 31/07)
   ป้ายเคยอยู่ใต้กล่องแล้วไปทับข้อความบรรทัดถัดไป — ต้องกันที่ให้ป้ายด้วย margin-top ตอนโชว์ */
.needpick{position:relative;outline:2px dashed var(--warn);outline-offset:3px;border-radius:12px;
  animation:needflash 1.1s ease-in-out 2}
.needpick::after{content:"ยังไม่ได้เลือก ▼";position:absolute;left:50%;transform:translateX(-50%);
  top:-28px;background:var(--warn);color:#fff;font-size:.75rem;font-weight:600;line-height:1.5;
  padding:2px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;z-index:4;
  box-shadow:0 3px 10px rgba(176,106,79,.28)}
/* กันที่ให้ป้ายโดย "ดันทั้งแถว" ไม่ใช่ดันเฉพาะกล่องที่ถูกชี้ — ไม่งั้นชิปในแถวเดียวกันเหลื่อมกันดูเบี้ยว
   (เจ้าของเจอเอง 31/07: ชิป «ชนิด: สุนัข» ค้างอยู่บน ส่วนกลุ่มเพศถูกดันลง) */
.rolepick.needpick{margin-top:34px}
.mchips:has(.gwrap.needpick){margin-top:38px}
.mtop:has(.inwrap.needpick){margin-top:38px}
@keyframes needflash{0%,100%{outline-color:var(--warn)}50%{outline-color:transparent}}
@media(prefers-reduced-motion:reduce){.needpick{animation:none}}
.mtop{display:flex;align-items:center;gap:9px}
.mav{width:38px;height:38px;border-radius:50%;background:#F5EFE2;border:1.5px solid var(--line);
  display:grid;place-items:center;flex:none;position:relative}
.mrow.main .mav{border-color:var(--gold);background:#FBF3E2}
.mav svg{width:21px;height:21px}
.mav .ok{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--ok);
  color:#fff;font-size:.6rem;display:none;place-items:center;border:1.5px solid #fff}
.mrow.named .mav .ok{display:grid}
.mtop input[type=text]{flex:1;min-width:0;min-height:44px;border:1.5px solid var(--line);border-radius:10px;
  padding:0 12px;font-family:'Sarabun',sans-serif;font-size:.98rem;color:var(--ink);background:#fff;outline:none}
.mtop input[type=text]:focus{border-color:var(--gold);box-shadow:var(--ring)}
.mtag{font-size:.72rem;color:var(--gold-d);white-space:nowrap;flex:none}
.mchips{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:8px}
/* กลุ่มเพศต้องแยกตัวจากชิปความสัมพันธ์ให้เห็นว่าเป็นคนละคำถาม */
.gwrap{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:5px}
/* ชิป (ความสัมพันธ์/เพศ) กับช่องชื่อเคยติดกันจนอ่านเป็นก้อนเดียว — เว้นหายใจให้ชัด */
.mchips + .mtop, .rolepick + .mtop, .mhelp + .mtop{margin-top:12px}
/* "อยู่บ้านเดียวกัน" — ชิดขวาสุดของแถว กล่องติ๊กอยู่หน้าข้อความ กวาดตาทีเดียวรู้ */
.homechk{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);
  font-family:'Sarabun',sans-serif;font-size:.82rem;cursor:pointer;transition:.14s}
.homechk:hover{border-color:var(--gold)}
.homechk .bx{width:16px;height:16px;border:1.5px solid var(--line);border-radius:4px;display:flex;
  align-items:center;justify-content:center;font-size:.62rem;color:transparent;flex:none;transition:.14s}
.homechk.on{border-color:var(--ok);color:var(--ok);background:#F6FAF7}
.homechk.on .bx{background:var(--ok);border-color:var(--ok);color:#fff}
.morehint{text-align:center;font-size:.8rem;color:var(--muted);margin-top:10px}
/* ชิปต้องสูงพอให้สระบน/ล่างของไทยไม่โดนตัด (คำว่า «คู่» สระอูโดนบังตอน 34px — เจ้าของเจอเอง 31/07) */
.chip{min-height:42px;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);
  background:#fff;border-radius:999px;padding:4px 14px;font-size:.82rem;line-height:1.55;color:var(--ink);
  cursor:pointer;font-family:'Sarabun',sans-serif;transition:.14s;max-width:100%}
.chip:hover{border-color:var(--gold)}
.chip .cv{color:var(--gold-d);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.away{border-color:var(--warn);color:var(--warn)}
.chip.on{border-color:var(--gold);background:#FBF3E2}
/* ยังไม่ได้เลือกชนิดสัตว์ = ชิปเตือนเบา ๆ (ตารางกางรออยู่ข้างล่างแล้ว) */
.chip.need{border-color:var(--gold);color:var(--gold-d);background:#FDFAF1}
/* คำอธิบายใต้ช่องชื่อของคนหลัก (คนละตัวกับ .mnote ที่เป็นกล่องกรอก «อื่น ๆ») */
.mhelp{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.6}
/* หัวแถว «คนที่ N» — บอกลำดับให้ชัดตั้งแต่แรก */
/* หัวแถว «คนที่ ๑ · ดวงชะตาหลัก» / «น้องตัวที่ ๑» — ต้องอ่านออกทันทีว่าเป็นคนละคน
   ของเดิม .82rem สีเทาจาง อ่านเป็นคำอธิบายประกอบ ไม่ใช่หัวข้อของบล็อก (เจ้าของทัก 3 ส.ค. 69) */
/* เต็มความกว้างการ์ด: margin ลบเท่ากับ padding ของ .mrow (11px 12px) พอดี
   ⚠ ห้าม letter-spacing กับข้อความไทย (สระ ำ หลุดจากพยัญชนะ — กติกาหัวไฟล์) */
.mhead{display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Trirong',serif;font-size:1.02rem;font-weight:600;color:var(--navy);
  margin:-11px -12px 12px;padding:9px 12px;border-radius:12px 12px 0 0;
  background:linear-gradient(135deg,#F7EFDD,#FDFAF3);border-bottom:1px solid #E7D8B4}
/* ฟองมัน «๏» — ตัวขวากลับด้านให้ชี้เข้าหากัน · line-height 1 กันมันดันความสูงแถบ */
.mhead .orn{font-size:1.05rem;line-height:1;color:var(--gold-d);opacity:.9;flex:none}
.mhead .orn.flip{transform:scaleX(-1)}
.mrow.main .mhead{color:var(--gold-d);background:linear-gradient(135deg,#F2E4C6,#FCF6E9);
  border-bottom-color:var(--gold)}
.mrow.petrow .mhead{color:#8a6d3b;background:linear-gradient(135deg,#F4ECDC,#FDFBF4);
  border-bottom-color:#E2D3B2}
/* «อื่น ๆ (กรอกเอง)» กดแล้วพิมพ์ในที่ — ปุ่มตกลง/ยกเลิกอยู่ทางขวา */
/* ช่องพิมพ์ «อื่น ๆ» + ปุ่ม — บรรทัดเดียวกับช่อง ปุ่มอยู่ขวา ให้หน้าตาเหมือนช่องอื่น ๆ
   (เจ้าของสั่ง 31/07) · ช่องต้องหดได้จริง (flex:1 1 0 + min-width:0) ไม่งั้นปุ่มล้นออกนอกการ์ด */
.otherbox{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:nowrap}
.otherbox input{flex:1 1 0;min-width:0;min-height:44px;border:1.5px solid var(--gold);border-radius:12px;
  padding:0 12px;font-family:'Sarabun',sans-serif;font-size:.92rem;outline:none;background:#fff}
.otherbox .btn{flex:none;min-height:44px;height:44px;padding:0 14px;width:auto;font-size:.86rem}
/* ปุ่มยืนยันของแต่ละขั้น — วางข้างช่อง (นอกกรอบ) แล้วหดช่องให้พอดี
   เคยลองวางลอย "ในช่อง" ด้วย position:absolute + translateY(-50%) แต่ปุ่มทองมี hover
   ที่ขยับ transform อยู่แล้ว → hover ทีไรปุ่มเด้งหลุดตำแหน่งทุกที (เจ้าของเจอเอง 31/07) */
.inwrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.inwrap input{flex:1;min-width:0;width:auto}
.stepok{min-height:46px;height:46px;padding:0 20px;width:auto;flex:none;margin:0;font-size:.9rem}
.mhelp .mtag{margin-right:5px}
/* คำในช่องของคนหลักยาวกว่าช่องนิดเดียวบนจอ 375 — ย่อเฉพาะ placeholder ให้พอดี
   (ค่าจริงที่ผู้ใช้พิมพ์ยังขนาดปกติ) */
.mrow.main .mtop input::placeholder{font-size:.86rem}
/* ตารางความสัมพันธ์: ๓ แถว × ๓ ปุ่ม กางรออยู่ + แถวย่อยแยกเพศเมื่อกดกลุ่ม (ลูก/พี่/น้อง/ปู่ย่า) */
.rolepick{display:none;margin-top:8px;background:#FBF7EC;border:1px solid var(--line);border-radius:12px;padding:9px}
.rolepick.open{display:block}
.rolegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rolepick button{min-height:42px;width:100%;border:1.5px solid var(--line);background:#fff;border-radius:9px;
  font-family:'Sarabun',sans-serif;font-size:.86rem;color:var(--ink);cursor:pointer;padding:0 4px}
.rolepick button.sel{border-color:var(--gold);background:#FBF3E2;color:var(--gold-d);font-weight:600}
.rolegrid .grp .cr{color:var(--muted);font-size:.7em;margin-left:3px}
.rolegrid .grp.open{border-color:var(--gold);background:#FDF8EE}
.rolegrid .grp.open .cr{color:var(--gold-d)}
/* ปุ่มหนีทาง — ทำให้เบากว่าตัวเลือกจริง จะได้ไม่ดึงสายตาไปจากเก้าปุ่มบน */
.roleother{margin-top:6px;border-style:dashed!important;color:var(--muted)!important;font-size:.79rem!important;min-height:36px!important}
/* ตัวเลือกย่อยของความสัมพันธ์ย้ายไปอยู่ในกล่องเด้ง (choiceBox) แล้ว — ปุ่มเรียงเต็มความกว้าง */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.choices .btn{width:100%;min-height:52px;padding:0 10px}
@media(max-width:340px){.choices{grid-template-columns:1fr}}   /* 375px ยังวางสองคอลัมน์ได้สบาย (ปู่/ย่า/ตา/ยาย = ๒×๒) */
.mnote{margin-top:8px}
.mnote input{width:100%;min-height:42px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;
  font-family:'Sarabun',sans-serif;font-size:.92rem;outline:none}
.mnote input:focus{border-color:var(--gold);box-shadow:var(--ring)}
.mwarn{font-size:.78rem;color:var(--warn);margin-top:6px;display:none}
.mrow.error .mwarn{display:block}

/* ── จังหวะ ๓ — ผังเรือน ── */
.mapwrap{background:linear-gradient(180deg,#FFFDF7,#FBF7EC);border:1.5px solid var(--line);
  border-radius:16px;padding:10px;overflow:hidden}
.mapwrap svg{display:block;width:100%;height:auto}
.hnode{cursor:pointer}
.hnode .hit{fill:transparent}
.hnode .av{fill:#fff;stroke:var(--line);stroke-width:1.5}
/* SVG <g> รับ focus หลังปิด dialog; วาด ring บน child ที่มองเห็นเพราะ
   browser บางตัวไม่แสดง outline บน group element โดยตรง */
.hnode:focus-visible{outline:none}
.hnode:focus-visible .av{stroke:var(--gold-d);stroke-width:3.5;filter:drop-shadow(0 0 4px rgba(201,162,92,.75))}
/* ยังไม่กรอก = แดง · กรอกครบ = เขียว · ที่กำลังกรอก = กระพริบทองชัด ๆ */
.hnode.todo .av{stroke:var(--warn);stroke-width:2}
.hnode.todo .sb{fill:var(--warn)}
.hnode.done .av{stroke:var(--ok);stroke-width:2.4}
.hnode.done .sb{fill:var(--ok)}
.hnode.done .ring-bg{stroke:rgba(65,119,92,.28)}
.hnode.sel .av{stroke:var(--gold);stroke-width:3}
.hnode.sel .nm{fill:var(--gold-d)}
.hnode.sel{animation:nodepulse 1.6s ease-in-out infinite}
@keyframes nodepulse{0%,100%{opacity:1}50%{opacity:.58}}
/* คนที่ยังไม่ครบต้อง "เรียก" ให้กด — แต่กระพริบทั้งก้อน (ชื่อ+คำบรรยาย) กวนตามาก
   จึงขยับเฉพาะวงแหวนแดง ช้า ๆ · ตัวหนังสือนิ่งสนิท · คนที่กำลังกรอกอยู่ (.sel) ใช้จังหวะทองแทน
   ไม่ต้องซ้อนสองจังหวะ · เครื่องที่ตั้งลดการเคลื่อนไหวไว้ = หยุดทั้งหมด */
.hnode.todo .av{animation:todoring 2.6s ease-in-out infinite}
.hnode.sel .av{animation:none}
@keyframes todoring{0%,100%{stroke-opacity:1}50%{stroke-opacity:.45}}
@media (prefers-reduced-motion:reduce){.hnode.sel,.hnode.todo .av{animation:none}}
.hnode.main .av{stroke-width:2.6}
.hnode .nm{font-family:'Trirong',serif;font-weight:600;font-size:13px;fill:var(--navy);text-anchor:middle}
.hnode .sb{font-family:'Sarabun',sans-serif;font-size:10.5px;fill:var(--muted);text-anchor:middle}
.hnode.done .sb{fill:var(--ok)}
.hnode.later .sb{fill:var(--gold-d)}
.ring-bg{fill:none;stroke:#EAE0CB;stroke-width:3}
.ring-seg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .35s ease}
.hnode.done .ring-seg{stroke:var(--ok)}
.walls{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linejoin:round}
.link{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.75}

.housetag{cursor:pointer}
.housetag rect{fill:#fff;stroke:var(--line);stroke-width:1.2}
.housetag:focus-visible{outline:none}
.housetag:focus-visible rect{stroke:var(--gold-d);stroke-width:3;filter:drop-shadow(0 0 3px rgba(201,162,92,.7))}
.housetag text{font-family:'Sarabun',sans-serif;font-size:10.5px;fill:var(--muted);text-anchor:middle}
.housetag.filled rect{stroke:var(--gold)}
.housetag.filled text{fill:var(--gold-d)}
.mapwrap.allset{box-shadow:0 0 0 2px var(--gold),0 10px 40px rgba(201,162,92,.35);transition:box-shadow 1.1s ease}
.mapnote{text-align:center;font-size:.84rem;color:var(--muted);margin-top:8px}

/* ── popup กรอกรายคน (ช่องข้อมูลเกิดอยู่ใน form-core.css) ── */
body.modal-open{overflow:hidden}
.sheetback{position:fixed;inset:auto 0;top:var(--sheet-vv-top,0px);z-index:120;display:grid;place-items:center;
  width:100%;height:var(--sheet-vv-height,100vh);height:var(--sheet-vv-height,100dvh);
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  background:rgba(14,26,43,.55);backdrop-filter:blur(2px);overflow:hidden}
.sheetback.hidden{display:none}
.sheet{position:relative;background:#fff;border:1.5px solid var(--gold);border-radius:18px;padding:16px;
  width:min(520px,100%);max-height:calc(var(--sheet-vv-height,100dvh) - 28px);overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:16px 96px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  animation:sheetin .22s ease}
.sheetback.keyboard-open{place-items:start center;padding:8px 14px}
.sheetback.keyboard-open .sheet{max-height:calc(var(--sheet-vv-height,100dvh) - 16px);border-radius:14px}
@keyframes sheetin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.shx{position:absolute;top:9px;right:11px;width:34px;height:34px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--muted);font-size:1rem;cursor:pointer;line-height:1}
.shx:hover{border-color:var(--gold);color:var(--gold-d)}
.sheet .sh{display:flex;align-items:center;gap:10px;padding:0 40px 10px 0;border-bottom:1px solid var(--line)}
.sheet .sh .who{font-family:'Trirong',serif;font-weight:600;color:var(--navy);font-size:1.05rem}
.sheet .sh .rl{font-size:.78rem;color:var(--muted)}
.foldbtn{width:100%;text-align:left;background:none;border:none;color:var(--gold-d);font-size:.86rem;
  font-family:'Sarabun',sans-serif;cursor:pointer;padding:10px 0 4px}
.fold{display:none}
.fold.open{display:block}
.sheetbtns{display:flex;gap:10px;margin-top:14px}
.sheetbtns .btn{flex:1}
.tipcard{display:flex;gap:11px;align-items:flex-start;background:linear-gradient(135deg,#fff,#F8F3E7);
  border:1px solid var(--gold);border-radius:13px;padding:11px 13px;margin-top:11px;animation:fade .3s ease}
.tipcard .ic{width:26px;height:26px;flex:none;color:var(--gold-d)}
.tipcard .tt{font-family:'Trirong',serif;font-weight:600;color:var(--gold-d);font-size:.88rem}
.tipcard .tb{font-size:.84rem;color:var(--ink);line-height:1.6;margin-top:1px}

@media(max-width:560px){
  .pgrid{grid-template-columns:repeat(3,1fr);gap:8px}
  /* 5 คอลัมน์บนจอ 360px = ใบ «ไม่มี» เหลือ 34px แตะไม่โดน และ «1 ตัว ฟรี!» ล้นกรอบ
     (1fr = minmax(auto,1fr) ใบที่ข้อความยาวจึงแย่งที่จากใบสั้น) → 3 คอลัมน์เท่าจอคน */
  .pgrid.pets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rolepick{grid-template-columns:repeat(2,1fr)}
  .bigprice{padding:11px 14px}
  .bigprice .amt{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  .pcard,.mrow,.bigprice .amt,.ring-seg,.mapwrap.allset{transition:none;animation:none}
}

/* ── แผงถาม "จำวันเกิดไม่ได้?" ในตัว popup (toast จะโผล่หลัง popup อ่านไม่ออก) ── */
.askbox{margin-top:12px;border:1.5px solid var(--warn);border-radius:14px;padding:13px 14px;background:#FDF6F3}
.askbox .at{font-family:'Trirong',serif;font-weight:600;color:var(--warn);font-size:.98rem}
.askbox .ab{font-size:.85rem;color:var(--ink);line-height:1.65;margin-top:4px}
.askbox .abtns{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.askbox .abtns .btn{flex:1;min-width:150px}
.askbox .anote{font-size:.78rem;color:var(--muted);margin-top:8px;text-align:center}
.btn.btn-warn{background:var(--warn);color:#fff;border:1.5px solid var(--warn)}
.btn.btn-warn:hover{filter:brightness(1.07)}
/* «บันทึกไว้ก่อน» กับ «ล้างข้อมูล เริ่มใหม่» อยู่แถวเดียวกัน — ปุ่มล้างทำให้จืดกว่า
   เพราะเป็นทางที่ย้อนไม่ได้ ไม่ควรเด่นเท่าปุ่มบันทึก (แต่ยังหาเจอเมื่ออยากใช้) */
/* .btn เป็น width:100% บนจอ ≤560px (style.css) — แถวนี้ต้องอยู่บรรทัดเดียวกัน จึงต้องปลดตรงนี้
   เหตุผลที่ไม่ปล่อยให้ซ้อนกันเต็มบรรทัด: ปุ่มล้างที่ใหญ่เท่าปุ่มบันทึกและอยู่ติดกัน = กดพลาดง่าย */
/* สองปุ่มนี้ต้อง "หน้าตาเดียวกัน" และปุ่มล้างอยู่ซ้าย (เจ้าของสั่ง 31/07)
   ความต่างอยู่ที่กล่องยืนยันตอนกด ไม่ใช่ที่ปุ่ม — ปุ่มจางกว่าทำให้ดูเหมือนคนละระดับกัน */
.twobtn{display:flex;gap:9px;justify-content:center;align-items:center;flex-wrap:wrap}
.twobtn .btn{width:auto;min-width:150px;padding:0 16px;gap:7px}
.twobtn .btn svg{width:15px;height:15px;flex:none}
/* ทรง/ขนาดเท่ากัน ต่างกันแค่โทนสีกับไอคอน — ล้าง = โทนอิฐ · บันทึก = โทนทอง */
.btn-clear{color:var(--warn);border-color:#e2c6b9}
.btn-clear:hover{background:#FDF6F3;border-color:var(--warn)}
.btn-save{color:var(--gold-d);border-color:var(--gold)}
.btn-save:hover{background:#FDF8EE}

/* หน้าติดต่อไม่มี action ล้างข้อมูล แม้ browser จะกู้ DOM/routing เก่าที่เคยมีปุ่มนี้ขึ้นมา */
body:has(#bc.active) [data-resetall]{display:none!important}
#p3 #paidStrip{display:none!important}

/* ═══ โครง «จ่ายก่อน กรอกทีหลัง» (เจ้าของสั่ง 3 ส.ค. 69) ═══
   ⚠ ห้ามย้ายบล็อกนี้ไป style.css: มีสำเนาที่ annual/assets/style.css ที่ต้องไม่ drift
   (order2-flow.test.mjs เทียบสองไฟล์ทุกไบต์) และของพวกนี้เป็นของเล่มครอบครัวล้วน */

/* ๕ จังหวะบนจอ 375px = จุดละ ~63px — ที่ .74rem คำอย่าง «ชำระเงิน» จะตกบรรทัด
   และเบราว์เซอร์ตัดคำไทยกลางคำได้เพราะไม่มีพจนานุกรม (กฎเหล็กข้อ ๑) */
.beats.b5 .beat{font-size:.70rem}
.beats.b6{gap:2px}
.beats.b6 .beat{font-size:.64rem}
@media(max-width:380px){.beats.b6 .beat{font-size:.59rem}}

/* ปุ่มนำทางเรียงลงล่างแทนที่จะเรียงข้าง — ใช้ gap เดิม 12px จึงได้ช่องไฟเท่ากันทุกคู่
   ⚠ flex:1 ของ .navbtns .btn ในโหมดคอลัมน์จะไปยืด "ความสูง" ไม่ใช่ความกว้าง ต้องล้างทิ้ง
   ⚠ ปุ่มที่ถูกซ่อน (display:none) หลุดออกจาก flex เอง gap จึงยุบตามไม่มีช่องว่างค้าง */
.navbtns.stack{flex-direction:column}
.navbtns.stack .btn{flex:none;width:100%}
.navbtns.stack + .twobtn{margin-top:12px}

/* เลขออเดอร์ที่ติดตัวไปทุกจอ — เป็น "ป้ายกำกับ" ไม่ใช่เนื้อหา จึงต้องเบากว่าหัวข้อของจอ
   แต่เลขต้องคัดลอกด้วยตาได้ง่าย → ตัวเลขใช้ฟอนต์ระบบ + เว้นระยะตัวอักษร ไม่ใช่ฟอนต์ไทย */
/* ระยะบน 16px ไม่ใช่ 2px — .beats มี margin ล่างแค่ 4px รวมแล้วเดิมห่างจากแถบจังหวะ
   แค่ 6px แต่ห่างจากหัวข้อข้างล่าง 26px (10 + h1.title margin-top 16) เอียงข้างจนอ่านเป็น
   "ป้ายที่ติดอยู่กับแถบจังหวะ" แทนที่จะเป็นบรรทัดของตัวเอง (เจ้าของทัก 3 ส.ค. 69) */
.orderchip{text-align:center;margin:16px 0 10px;font-size:.78rem;color:var(--muted)}
.orderchip b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;
  color:var(--gold-d);background:#FBF4E6;border:1px solid #EADFC4;border-radius:999px;
  padding:2px 9px;margin-left:3px;user-select:all}

/* บรรทัดติดต่อทีมงานท้ายจอชำระเงิน — ต้องอ่านเป็น "ทางออกเมื่อติดปัญหา"
   ไม่ใช่ notice อีกกล่องที่สายตากวาดผ่าน จึงใช้แถบขอบซ้าย + ไอคอนสีแบรนด์ LINE */
.supportline{border-left:4px solid var(--gold);
  background:linear-gradient(135deg,#fff,#FBF7EC);border-radius:0 12px 12px 0;
  padding:13px 16px;margin-top:16px;font-size:.9rem;color:var(--ink);line-height:1.75}
/* ปุ่ม LINE ตัวจริง — ทรงเดียวกับแถบช่องทางท้ายหน้าแรก (.social) แต่กลับสีให้อยู่บนพื้นครีมได้
   ต้องเป็น <a> จริง ไม่ใช่ไอคอนปลอม: บนมือถือแตะแล้วเปิดแอป LINE ทันที ไม่ต้องจดชื่อไปหาเอง */
.supportline .linebtn{display:inline-flex;align-items:center;gap:8px;margin-top:9px;
  padding:9px 15px;border:1px solid #06C755;border-radius:999px;background:#06C755;color:#fff;
  text-decoration:none;font-size:.86rem;line-height:1;font-weight:600;
  transition:filter .15s}
.supportline .linebtn:hover{filter:brightness(1.08)}
.supportline .linebtn svg{width:17px;height:17px;flex:none;fill:currentColor}
.supportline .linebtn .lb{white-space:nowrap}
@media(max-width:560px){.supportline{padding:12px 13px;font-size:.86rem}
  .supportline .linebtn{font-size:.82rem;padding:9px 13px}}

/* การ์ดติดต่อกลับต้องอ่านเป็น "ของช่วยคุณ" ไม่ใช่ด่านเพิ่มก่อนกดจ่าย
   → ขอบประจนกว่าจะกรอก แล้วค่อยกลายเป็นทึบ+ทอง เพื่อให้รู้ว่าระบบรับไปแล้ว */
#contactCard{border-style:dashed;background:#FFFDF9}
#contactCard.filled{border-style:solid;border-color:var(--gold);background:#fff}

/* แถบ "ชำระเรียบร้อยแล้ว" บนจอยืนยันข้อมูล — ขั้นนี้อยู่หลังการจ่ายเงิน
   ลูกค้าต้องเห็นทันทีว่าไม่โดนเก็บซ้ำ ไม่งั้นจะกลัวจนไม่กดปุ่มสุดท้าย */

/* จอส่งเลขออเดอร์เข้า LINE: มือถือให้ปุ่มตรงเป็นพระเอก ส่วน QR เป็นทางเลือกของ desktop */
body:has(#p6.active) main{max-width:900px}
body:has(#p6.active) #orderChip{display:none!important}
#p6 .done-box{padding:4px 0 12px;text-align:left}
.done-summary{display:flex;align-items:center;gap:13px;padding:12px 15px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(42,42,51,.05)}
.done-summary #doneIcon{width:48px;height:48px;flex:none}
.done-summary-body{min-width:0;flex:1}
.done-summary h1{margin:0;font-family:'Trirong',serif;color:var(--navy);font-size:1.12rem;
  font-weight:600;line-height:1.4}
.done-ref-row{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:.77rem;line-height:1.4}
#p6 .done-ref-row .ref{font-family:'Trirong',serif;color:var(--gold-d);
  font-size:1rem;font-weight:600;line-height:1.4;letter-spacing:.03em;white-space:nowrap;user-select:all}
.done-ref-copy{appearance:none;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--gold-d);
  padding:1px 0;font:inherit;font-weight:600;line-height:1.25;cursor:pointer;white-space:nowrap}
.done-ref-copy:focus-visible,.done-links a:focus-visible,.done-links button:focus-visible,.line-qr-mobile summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}
.done-message{margin:7px 4px 0;color:var(--muted);font-size:.78rem;line-height:1.55;text-align:center}
.done-message:empty{display:none}

.line-handoff-card{margin-top:11px;padding:17px;border:1.5px solid var(--gold);border-radius:18px;
  font-family:'Sarabun',sans-serif;background:linear-gradient(145deg,#fff,var(--paper));
  box-shadow:0 10px 28px rgba(154,118,46,.10)}
.line-handoff-grid{display:grid;grid-template-columns:1fr;gap:16px}
.line-action-column{text-align:left}
.line-handoff-card h2{margin:0 0 9px;text-align:center;font-family:'Trirong',serif;color:var(--navy);
  font-size:1.24rem;font-weight:600;line-height:1.4}
.line-steps{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.line-steps li{display:flex;align-items:flex-start;gap:10px;min-width:0}
.line-step-index{display:flex;align-items:center;justify-content:center;width:27px;height:27px;flex:none;
  border-radius:50%;background:var(--gold);color:#fff;font-weight:600;font-size:.78rem;line-height:1}
.line-steps li>span:last-child{display:block;min-width:0;padding-top:1px;line-height:1.35}
.line-steps b{display:block;color:var(--navy);font-size:.9rem;font-weight:600}
.line-steps small{display:block;margin-top:1px;color:var(--muted);font-size:.77rem;line-height:1.45}
.btn.line-add-btn{display:flex;width:100%;min-height:54px;margin-top:12px;background:#06C755;color:#fff;
  border:1.5px solid #06C755;box-shadow:0 7px 18px rgba(6,199,85,.20);font-weight:600}
.btn.line-add-btn:hover{filter:brightness(.95);transform:translateY(-1px)}
.line-message-box{margin:12px 0 8px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:#fff;text-align:left}
.line-message-box span{display:block;color:var(--muted);font-size:.76rem;line-height:1.45;margin-bottom:4px}
.line-message-box strong{display:block;color:var(--navy);font-family:'Sarabun',sans-serif;font-weight:600;
  font-size:.84rem;line-height:1.5;overflow-wrap:anywhere;user-select:all}
.btn.line-copy-message{display:inline-flex;width:auto;min-height:38px;padding:0 17px;font-size:.78rem;box-shadow:none}
.line-help{display:inline;margin-left:7px;color:var(--muted);font-size:.72rem;line-height:1.5}

.line-qr-desktop{display:none;text-align:center;align-self:start}
.line-qr-frame{width:min(250px,100%);margin:0 auto;padding:7px;background:#fff;
  border:1px solid var(--line);border-radius:15px;box-shadow:0 6px 18px rgba(42,42,51,.07)}
.line-qr-image{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.line-qr-desktop p{margin-top:5px;color:var(--muted);font-size:.74rem}
.line-qr-mobile{margin-top:13px;border-top:1px solid var(--line);padding-top:11px;text-align:center}
.line-qr-mobile summary{color:var(--gold-d);font-size:.78rem;font-weight:600;cursor:pointer;line-height:1.45}
.line-qr-mobile[open] summary{margin-bottom:10px}
.line-qr-mobile .line-qr-frame{width:min(230px,78vw)}

.line-after{margin-top:14px;padding:11px 13px;border-left:3px solid var(--gold);border-radius:0 11px 11px 0;
  background:var(--paper);text-align:left}
.line-after h3{font-family:'Trirong',serif;color:var(--navy);font-size:.91rem;font-weight:600;line-height:1.4}
.line-after ul{display:grid;gap:1px;margin:3px 0 0;padding:0;list-style:none;color:var(--muted);
  font-size:.76rem;line-height:1.5}
.line-after li::before{content:"•";color:var(--gold-d);margin-right:7px}

.done-links{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:13px;color:var(--muted);
  font-size:clamp(.68rem,2.7vw,.78rem);line-height:1.45;white-space:nowrap}
.done-links #orderAgainWrap,.done-links #otherProductWrap{display:inline-flex;margin:0}
.done-links a,.done-links button{appearance:none;border:0;background:transparent;padding:0;color:var(--gold-d);
  font:inherit;line-height:inherit;text-decoration:underline;cursor:pointer;white-space:nowrap}

/* ชื่อเอกสารยินยอมต้องอยู่ติดกัน ไม่ทิ้งคำสุดท้ายโดดเดี่ยวคนละบรรทัด */
#pdpaWrap a,#termsWrap a{white-space:nowrap}

@media(min-width:768px){
  .line-handoff-card{padding:22px}
  .line-handoff-grid{grid-template-columns:minmax(0,1fr) 255px;gap:24px;align-items:center}
  .line-action-column{grid-column:1}
  .line-qr-desktop{display:block;grid-column:2;grid-row:1}
  .line-qr-mobile{display:none}
  .line-handoff-card h2{text-align:left;font-size:1.34rem}
  .line-after{margin-top:18px}
}
@media(max-width:560px){
  body:has(#p6.active) .beats{margin:8px 0 9px}
  body:has(#p6.active) .beat.now{color:var(--navy);font-size:.78rem}
  #p6 .done-box{padding-top:0}
  .done-summary{padding:10px 12px;gap:10px}
  .done-summary #doneIcon{width:42px;height:42px}
  .done-summary h1{font-size:1rem}
  .done-ref-row{gap:6px;font-size:.7rem}
  #p6 .done-ref-row .ref{font-size:.88rem}
  .done-ref-copy{font-size:.68rem}
  .line-handoff-card{padding:13px 12px;border-radius:15px}
  .line-handoff-card h2{font-size:1.08rem;margin-bottom:7px}
  .line-steps{gap:5px}
  .line-step-index{width:24px;height:24px;font-size:.72rem}
  .line-steps b{font-size:.84rem}
  .line-steps small{font-size:.71rem}
  .btn.line-add-btn{min-height:50px;margin-top:9px;font-size:.91rem}
  .line-message-box{margin-top:10px;padding:9px 11px}
  .line-message-box span{font-size:.7rem}
  .line-message-box strong{font-size:.75rem}
  .btn.line-copy-message{min-height:36px;padding:0 14px;font-size:.73rem}
  .line-help{font-size:.67rem}
  .line-after{margin-top:11px;padding:9px 11px}
  .line-after h3{font-size:.84rem}
  .line-after ul{font-size:.7rem}
  .done-links{margin-top:11px;gap:4px}
}

/* จำนวนถูกล็อกเพราะจ่ายเงินไปแล้ว — ต้องดูเป็น "ตัดสินไปแล้ว" ไม่ใช่ "กดไม่ติด" */
.pcard.locked{cursor:not-allowed;opacity:.55}
.pcard.locked[aria-pressed="true"]{opacity:1;cursor:default}

/* ── กรอบ Thai QR Payment ของธนาคาร (assets/qr-frame.png) ─────────────────
   วาง QR + ชื่อร้านทับด้วย CSS แทนการฝังลงรูป เพราะ:
     · QR วาดสดตามยอดจริงทุกครั้ง ฝังไว้ล่วงหน้าไม่ได้
     · ข้อความไทยต้องให้เบราว์เซอร์เรนเดอร์ — วาดด้วย Pillow วรรณยุกต์หายเงียบ ๆ (กฎเหล็กข้อ 1)
   ตัวเลข % วัดจากภาพต้นฉบับของธนาคาร (869×1208): QR อยู่ x 90–780, y 275–970 */
.qr-frame{position:relative;width:300px;max-width:78vw;margin:0 auto;
  aspect-ratio:869/1208;background:url(qr-frame.png) center/100% 100% no-repeat}
.qr-frame canvas{position:absolute;left:10.4%;top:22.8%;border-radius:0}
.qr-brand{position:absolute;left:5%;right:5%;top:83%;text-align:center;line-height:1.3}
.qr-brand b{display:block;font-family:'Sarabun',sans-serif;font-weight:600;
  color:#1a1a1a;font-size:1.05rem;letter-spacing:-.01em}   /* letter-spacing ปลอดภัย — อังกฤษล้วน */
.qr-brand span{display:block;font-family:'Sarabun',sans-serif;font-weight:400;
  color:#6b6152;font-size:.8rem;margin-top:2px}
@media(max-width:400px){.qr-brand b{font-size:.95rem}.qr-brand span{font-size:.74rem}}

/* ปุ่มอัพโหลดสลิปต้องอ่านออกทันทีว่า "ยังกดไม่ได้"
   .btn:disabled ของเดิมแค่ opacity .45 ซึ่งทองยังดูเป็นทองอยู่ คนอ่านว่ากดได้ */
#uploadSlipBtn:disabled{background:#EAE3D3;color:#9a8f78;box-shadow:none;opacity:1}