/* event.css — หน้าบูธ ชุมพร 3 พ.ย. 2569
 * ไม่มีการตัดสินใจภาพใหม่: โทเคน/คอมโพเนนต์จาก app/assets/base18.css (RC 09af6a8)
 * กฎฟอร์มคัดลอกจาก app/birth.html (BIRTH-CI-1024) · ส่วนที่เหลือเป็นการจัดวางด้วยโทเคนเดิม — Liaison/Codex ขัดเกลาภายหลังได้ */
:root{--page:100%}

/* ── ฟอร์ม (จาก app/birth.html) ── */
.fld{display:flex;flex-direction:column;gap:5px}
.fld .cap{font-size:0.875rem;font-weight:600}
.fld .cap .opt{font-weight:400;color:var(--ink-2)}
.box{border-radius:14px;background:var(--card);border:1px solid var(--line);padding:0 12px;
  font-size:1rem;display:flex;align-items:center;gap:9px;min-height:50px}
.box select,.box input{flex-grow:1;min-width:0;border:0;background-color:transparent;font:inherit;font-size:1rem;color:var(--ink);
  min-height:48px;padding:0;appearance:none;-webkit-appearance:none}
.box select:focus,.box input:focus{outline:none}
.box select{padding-right:24px;background-position:right 2px center}
.box:focus-within{outline:3px solid var(--ink-purple);outline-offset:3px;box-shadow:none}
.box.bad{border-color:var(--seal);border-width:2px;box-shadow:0 0 0 2px rgba(168,42,34,.18)}
.box.off{opacity:.5}
.dmy{display:grid;grid-template-columns:minmax(72px,.8fr) minmax(0,1.6fr) minmax(100px,1.1fr);gap:7px}
.dmy>*,.dmy .box{min-width:0}
/* ให้ select รับคลิกเต็มกรอบ ไม่หัก padding จนพื้นที่วันที่เหลือ 43px */
.box:has(select){padding:0}
.box select{width:100%;min-width:44px;padding:0 32px 0 12px;background-position:right 12px center}
.unk{display:flex;gap:10px;align-items:center;min-height:44px;font-size:1rem;color:var(--ink);cursor:pointer}
.unk input{width:22px;height:22px;flex:0 0 auto;margin:0;accent-color:var(--ink-purple)}
.err{font-size:0.875rem;font-weight:600;color:var(--seal)}
.bpriv{font-size:0.875rem;color:var(--ink-2);text-align:center;margin:-4px 0 0;line-height:1.6}
button.btn{cursor:pointer;width:100%}
a.btn{width:100%}
a:focus-visible,button:focus-visible{outline:3px solid var(--ink-purple);outline-offset:3px}

/* ── หน้าและแบรนด์ ── */
.scr.ev{width:100%;max-width:560px;margin-inline:auto}
.ev{padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.ev-brand{display:flex;align-items:center;gap:10px;min-height:44px}
.ev-brand img{display:block;width:96px;height:auto}
.ev-brand-t{font-family:Mitr,sans-serif;font-weight:500;font-size:1rem;color:var(--ink)}
.ev-intro .h1{margin:8px 0 8px}
.ev-sub{color:var(--ink-2)}

/* ── ผลลัพธ์ ── */
.ev-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ev-list li{display:flex;align-items:flex-start;gap:10px}
.ev-list .dot{margin-top:calc((1.62em - 13px)/2)}
.ev-list b{font-family:Mitr,sans-serif;font-weight:500}
.dot.el-0{background:var(--el-wood)}.dot.el-1{background:var(--el-fire)}.dot.el-2{background:var(--el-earth)}
.dot.el-3{background:var(--el-metal)}.dot.el-4{background:var(--el-water)}
.ev-blank{color:var(--ink-2)}
.ev-cg{display:flex;flex-direction:column;gap:8px}
.ev-cg+.ev-cg{margin-top:14px}
.ev-cg .k{font-size:0.875rem;font-weight:600}
.ev-sw{display:flex;flex-wrap:wrap;gap:8px}
.ev-sw span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.72);font-size:1rem}
.ev-sw i{display:block;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink-2);flex:0 0 auto}   /* เส้นขอบเข้มทุกสวอตช์ (taste-adapter: ขาว = พื้นการ์ด) */
.ev-sw small{font-size:0.875rem;color:var(--ink-2)}
.ev-kv{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ev-kv .k{font-size:0.875rem;font-weight:600}
.ev-kv .v{font-family:Mitr,sans-serif;font-weight:500;font-size:1.125rem}
.ev-kv .v>span{display:block}
.ev-kv.col{flex-direction:column;align-items:flex-start;gap:2px}
.ev-tips{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
.ev-follow{align-items:center}
.ev-qr{display:block;width:216px;height:216px;max-width:100%;object-fit:contain;border-radius:12px;background:#fff;padding:18px}
.ev-center{text-align:center}
.ev-legal{padding:4px 6px}

@media(min-width:700px){
  .scr.ev{max-width:560px;padding-left:28px;padding-right:28px}
  .ev-qr{width:264px;height:264px;padding:24px}
}
@media print{.ev-follow .btn,#again,#form{display:none}}

/* v1 polish · ใช้หมึก/พื้น/สีปุ่มเดิมของ v5 · ไม่แตะค่าสีธาตุ */
.ev{line-height:var(--lh-text,1.6)}
.ev-brand{flex-wrap:wrap}
.ev .h1{line-height:1.4}
.ev .card{gap:12px;--g:12px}
.ev :is(p,h2){margin-block:0}
.ev .card>.lab:not(:last-child){margin-bottom:-4px}
.ev .card>.h2:not(:last-child){margin-bottom:-6px;line-height:1.5}
.ev :is(.fn,.sm,.bpriv){color:var(--ink-2);font-size:.875rem;line-height:var(--lh-text,1.6)}
.ev :is(.p,.ev-list,.ev-tips){font-size:1rem}
.ev :is(.card,.ev-kv,.ev-cg,.ev-list li,.ev-list li>span){min-width:0}
.ev :is(p,h1,h2,.ev-kv,.ev-sw span,.btn){overflow-wrap:anywhere}
.ev .btn{padding:10px 16px;white-space:normal;text-align:center;line-height:1.6}
.ev .btn.ghost{box-shadow:none}
.ev .ev-kv{flex-direction:column;align-items:flex-start;gap:4px}
.ev .ev-kv+.sm{margin-top:-6px}
.ev .ev-cg+.ev-cg{margin-top:16px}
.ev .ev-follow{gap:12px}