/* ═══════════════════════════════════════════════════════════════════════
   จริงใจ · ระบบดีไซน์ v5 — ไฟล์โทเคนและคอมโพเนนต์ (ฉบับใช้งานจริง)
   คู่กับ DESIGN-V5.md (กติกา) · spirits.css (วิญญาณธาตุ) · HANDOFF-V5.md (บัญชีหน้าจอ)

   โทเคน
     ตัวอักษรและเส้น   --ink --ink-2 --dark --line --hair
     พื้นและผิว        --pale --pale-2 --brand --card
     สีเน้นของ UI      --seal --seal-d --seal-t --ink-purple --lilac --peony --wasabi
     สีห้าธาตุ         --el-wood --el-fire --el-earth --el-metal --el-water (+ -t = พื้นอ่อน)

   คอมโพเนนต์
     โครงหน้า  .scr .col .row .gap4…  ·  กล่อง .card .slot
     ตัวอักษร  .h1 .h2 .h3 .p .sm .lab
     ปุ่มและป้าย .btn .btn.off .pill .badge .chip .seal .dot
     เส้นคั่น   .rule2 (เส้นคู่สีแดงตราประทับ)

   กติกาสามข้อที่พังง่ายที่สุด
     ① สีห้าธาตุใช้กับธาตุเท่านั้น — สถานะดี/เด่น/ระวัง ใช้ --seal --ink-purple --dark
     ② เงามีสองชนิด · เงานุ่ม = พื้นผิว · เงาแข็งเยื้อง = ของที่กดได้หรือมีสถานะ
     ③ สีไม่ใช่สัญญาณเดียว — ทุกจุดที่ใช้สีต้องมีคำไทยหรือรูปทรงกำกับในสายตาเดียว
   พื้นที่ขยับไม่ได้: เนื้อความ ≥16px · ป้าย ≥13px · คอนทราสต์ ≥4.5:1 · เป้ากด ≥44px · ช่องกรอก 16px

   ⚠️ ความกว้างหน้า: ไฟล์ตัวอย่างล็อก 390px ไว้เพื่อถ่ายภาพให้เท่ากันทุกหน้า
      ของจริงใช้ --page คุม — ตั้ง --page:100% แล้วหน้าจะยืดเองตามจอ
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --page:390px;  /* ของจริงตั้งเป็น 100% · ตัวอย่างล็อก 390px เพื่อถ่ายภาพ */
  --ink:#4A3524; --ink-2:#6B5340;
  --pale:#EBD3AC; --pale-2:#F4E6CC; --brand:#D9B88C; --line:#C9A678; --dark:#3C2B1A;
  /* ── สีเน้นของ UI (ไม่ใช่สีธาตุ) · ΔE ต่ำสุดจากห้าธาตุกำกับไว้ท้ายบรรทัด ── */
  --seal:#A82A22;      /* แดงตราประทับ · ΔE 31.1 จากธาตุไฟ · ขาวบนสี 6.96:1 */
  --seal-d:#7E1E18;    /* เงาของแดงตราประทับ */
  --seal-t:#FBE9E5;    /* พื้นอ่อนของแดง */
  --ink-purple:#6B4E9E;/* ม่วงหมึก · ΔE 45.6 · ขาวบนสี 6.54:1 */
  --lilac:#B9A5E3;     /* ม่วงอ่อน · ΔE 29.8 · ink บนสี 5.23:1 */
  --peony:#E0529B;     /* บานเย็น · ΔE 64.8 · ใช้เป็นพื้นกราฟิกเท่านั้น ห้ามรองข้อความ */
  --wasabi:#E9F056; --hair:rgba(74,53,36,.10); --card:rgba(255,255,255,.66);
  --green-eb:#426352;  /* เขียวหมึก eyebrow (prototype navigation-0610 ui.css) · 6.22:1 บน #FBF6EE */
  --green-ink:#24634D; /* เขียวหมึกลูกศรแถวลิงก์ (prototype --purple ใหม่) · 6.58:1 บน #FBF6EE · ไม่ใช่สีธาตุไม้ */
  --ci-sprout:#C4DB85; /* เขียวยอดอ่อน · ความหมายบวก/ก่อเกิด (folk 5 ต.ค. · design-refs/ci/CI-GREEN.md) · ในสายเนื้อหาทึบ 100% เท่านั้น · ตัวหมึกเข้มเท่านั้น (8.90:1 · ขาวตก) · ห้ามใช้กับชิปบทบาทธาตุ */
  --el-wood:#4FB07E;  --el-wood-t:#E4F4EB;
  --el-fire:#FF5C34;  --el-fire-t:#FFE8E1;
  --el-earth:#F0B33C; --el-earth-t:#FDF0DA;
  --el-metal:#9AA7B4; --el-metal-t:#ECEFF2;
  --el-water:#4BA3DD; --el-water-t:#E3F1FA;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* ═══ ระยะหัวข้อ (มติ folk 3 ต.ค.) ═══════════════════════════════
   หัวข้อเป็นของเนื้อหาที่อยู่ "ใต้" มัน ระยะบนจึงต้องมากกว่าระยะล่างชัดเจน
   ถ้าเท่ากัน สายตาจะจับคู่หัวข้อกับย่อหน้าที่จบไปแล้ว = อ่านผิดความหมาย
   ตัวแรกของกล่องตัดระยะบนทิ้ง ไม่งั้นเด้งห่างจากขอบการ์ด */
.h1{margin:36px 0 10px}
.h2{margin:28px 0 8px}
.h3{margin:22px 0 6px}
.lab{margin:24px 0 6px}
.h1:first-child,.h2:first-child,.h3:first-child,.lab:first-child,
.col>:first-child,.card>:first-child{margin-top:0}
/* ═══ กติกาจัดแนว (DESIGN-V5 §จัดแนว · 3 ต.ค.) ═══
   หัวข้อที่อยู่ในแถวแนวนอน (คำหัว + จุดสี + ชิป) ไม่เอาระยะหัวข้อ — margin บน 22–28px ดันคำหัวต่ำกว่าจุด/ชิป (ต้นเหตุที่ folk เจอบน fav) */
:is(.row,.eh,summary,.qhd-r1)>:is(.h1,.h2,.h3,.lab){margin-top:0;margin-bottom:0}
/* หัวการ์ดแถวเดียว (จุด + คำหัว + ชิป): คำหัว line-height 1 → กล่องข้อความเท่าตัวอักษร ศูนย์กลางไม่ขึ้นกับ ascent/descent ของฟอนต์ไทยที่ต่างกันระหว่าง Chrome/WebKit
   (folk เห็นเบี้ยวบนมือถือจริงหลัง 81cf81e) · จุด/ชิปไม่มี margin แนวตั้ง · ชิปสถานะ line-height 1 เหมือนกัน */
.eh>:is(.h1,.h2,.h3){line-height:1}
.eh>*{margin-top:0;margin-bottom:0}
.eh>.st,.eh>.kind{line-height:1}
/* จัดกลาง "ตัวพยัญชนะ" ไม่ใช่กล่องตัวอักษร: ภาษาไทยมีวรรณยุกต์/สระบน คำที่ไม่มีเครื่องหมาย (ทอง) จึงดูต่ำ
   วัดจริง: ก่อนแก้ตัวพยัญชนะต่ำกว่าจุด 2.1px ทุกคำ · text-box ตัดกล่องเหลือ x-height→เส้นฐาน แล้ว flex จัดกลางให้ = −0.6px
   รองรับ Safari 18.2+ / Chrome 133+ · เบราว์เซอร์เก่า (LINE in-app บน iOS เก่า) เลื่อน 0.1em ตามขนาดฟอนต์แทน */
:is(.eh,summary)>:is(.h1,.h2,.h3){text-box:trim-both ex alphabetic}
@supports not (text-box:trim-both ex alphabetic){:is(.eh,summary)>:is(.h1,.h2,.h3){transform:translateY(-.1em)}}
/* ป้ายหมวด (.lab) ที่ตามด้วยหัวข้อทันที = คู่เดียวกัน → หัวข้อไม่เอาระยะบนซ้ำ (เดิม lab→h2 ในการ์ดห่าง ~48px) */
.lab+:is(.h1,.h2,.h3){margin-top:0}

/* ═══ หัวหน้า QZ.head() — prototype navigation-0610 (ui.css .top/.brand/.seal/.page-title/.eyebrow) ═══
   แถวแรก 44 = ปุ่มกลับ/ตรา · ชื่อส่วน 14px กลางแถว · ⋮ · ห่างก้อนชื่อหน้า 22 (prototype .top margin-bottom)
   ก้อนชื่อหน้า: eyebrow 14/600 เขียวหมึก #426352 (6.22:1 บนพื้นครีม) ห่าง H1 6 · H1 → บรรทัดรอง 6 */
.qhd{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.qhd-r1{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:16px}   /* wrap: ซูม 200% (กว้าง 195) ปุ่มกลับ + โลโก้/เมนู ไม่ดันหน้าล้น · EVIDENCE-BROWSER-1013 F3 · จอปกติพอดีบรรทัดเดียวเหมือนเดิม */
.qhd-bar{flex:1;min-width:0;text-align:center;font-size:0.875rem;line-height:1.65;color:var(--ink)}
.qhd-sp{width:44px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:7px;font-size:1.3125rem;font-weight:600;line-height:1.65;color:var(--ink);text-decoration:none;flex-shrink:0;min-height:44px}
.seal{background:var(--seal);color:#FFF;border-radius:6px;padding:0 6px;font-size:1rem;transform:rotate(-6deg)}
.qhd-ebr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.qhd-eb{font-size:0.875rem;font-weight:600;line-height:1.65;color:var(--green-eb)}
.qhd>.h1{margin:0;overflow-wrap:anywhere}
.qhd>*:not(.qhd-r1):not(.h1){margin:0}
.qhd .badge{line-height:1.2;white-space:normal}
.qhd-sub{color:var(--ink-2)}   /* prototype .page-title p (muted) */
/* ภูติคู่หัวเรื่อง (prototype .minihero · หน้าเชิงลึก/แชต) */
.minihero{display:flex;align-items:center;gap:15px}
.minihero img{width:92px;height:110px;object-fit:contain;flex-shrink:0}
.minihero .h1{margin:0}   /* มีปุ่ม ⋮ + จอแคบ → ป้ายขึ้นบรรทัดใหม่ ไม่ดันปุ่มหลุดจอ · ป้ายสถานะตัดทิ้งไม่ได้ (DESIGN-V5 'ป้ายสถานะ ตัดคำไม่ได้' · Designer 5 ต.ค.) */
/* เมนูตั้งค่า ⋮ (สเปก v18 ข้อ 3) — พื้นผิวลอย เงานุ่ม · ปุ่ม/แถว ≥44 จุด · ตัวอักษร ≥14 จุด · หมึกเท่านั้น ไม่ใช้สีธาตุ */
.qmenu{position:relative;flex-shrink:0;margin:0 -8px 0 -8px}   /* ไอคอน 22 ในกล่อง 44 มีที่ว่างในตัวข้างละ 11 → ดึงเข้าสองข้าง ป้ายสถานะได้ที่เต็มบรรทัดที่ 375 */
.qmenu-b{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:22px;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.qmenu-b[aria-expanded="true"]{background:var(--pale-2)}
.qmenu-p{position:absolute;right:8px;top:calc(100% + 6px);z-index:60;width:min(320px,calc(100vw - 32px));overflow-y:auto;
  max-height:min(730px,calc(100vh - 88px));max-height:min(730px,calc(100dvh - 88px));   /* ผูกกับจอ (Designer ตรวจ 320×568) · dvh ตามแถบที่อยู่มือถือ · vh สำรอง */
 overscroll-behavior:contain;
  background:#FFF;border:1px solid var(--hair);border-radius:16px;padding:6px;box-shadow:0 14px 34px -12px rgba(60,43,26,.38),0 2px 6px rgba(60,43,26,.08)}
.qmenu-p[hidden]{display:none}
.qmi,.qmn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:11px;background:none;
  font:inherit;font-size:1rem;line-height:1.3;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.qmi:hover,.qmi:focus-visible{background:var(--pale-2);outline:none}
.qmi:focus-visible{box-shadow:inset 0 0 0 2px var(--ink-2)}
.qmn{font-size:0.875rem;color:var(--ink-2);cursor:default}
.qmi.danger{color:var(--seal)}
.qmsep{height:1px;background:var(--hair);margin:6px 4px}
.qmg{padding:6px 6px 4px}
.qml{font-size:0.875rem;font-weight:600;color:var(--ink-2);margin:0 4px 6px}
.qmr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.qmr .qmi{flex-direction:column;justify-content:center;gap:2px;padding:6px 4px;text-align:center;border:2px solid var(--hair);border-radius:12px;font-weight:600}
.qmr .qmi .s{line-height:1.1}
.qmr .qmi[aria-checked="true"]{border-color:var(--dark);background:var(--pale-2)}
.qmc{align-items:flex-start}
.qmt{display:flex;flex-direction:column;gap:2px;min-width:0}
.qms{font-size:0.875rem;color:var(--ink-2)}
.qmc .box{width:20px;height:20px;flex-shrink:0;border:2px solid var(--ink-2);border-radius:5px;margin-top:calc((1.3em - 20px)/2);box-sizing:border-box}
.qmc[aria-checked="true"] .box{background:var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--dark)}
/* ปุ่มกลับแบบมีคำ "← กลับ" (prototype .textbtn · Designer เคาะ D 6 ต.ค.) — ขีดเส้นใต้ = ลิงก์ · พื้นที่กด 44 · เขียวหมึก (prototype --purple ใหม่) */
.back{min-width:44px;min-height:44px;padding:8px;margin-left:-8px;flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  color:var(--green-ink);font-size:0.875rem;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.back:focus-visible{outline:3px solid var(--seal);outline-offset:3px}

/* ═══ ช่องรอโลโก้ (มติ folk 3 ต.ค.) ═══════════════════════════════
   โลโก้จริงต้องอ่านออกที่ 24px ซึ่งเป็นขนาดรูปโปรไฟล์ในรายการแชท LINE */
.logoslot{display:inline-flex;align-items:center;justify-content:center;
  width:104px;height:44px;border-radius:7px;border:1px dashed var(--line);   /* เป็นลิงก์กลับหน้าแรก → พื้นที่กด 44 (สเปก v17 ข้อ 5) */
  font-size:0.875rem;color:var(--ink-2);letter-spacing:.04em;flex-shrink:0}

/* ═══ ช่องสี่เสาแปดช่อง (มติ folk 3 ต.ค. · ทาง ก) ═══════════════
   พื้นอ่อน + หมึก ได้คอนทราสต์ 9.8–10.2:1 ทุกธาตุ
   สีเต็มไปอยู่ที่แถบขอบซ้าย สีจึงยังอ่านออกครบโดยตัวอักษรไม่ต้องสู้กับพื้น
   (วัดแล้ว: พื้นสีเต็มไม่ผ่าน 4.5:1 ทั้งกับหมึกและกับขาว ทั้งห้าธาตุ) */
.cell8{display:flex;align-items:center;gap:8px;border-radius:12px;
  padding:7px 10px 7px 0;overflow:hidden;position:relative}
.cell8>.eb{width:5px;align-self:stretch;flex-shrink:0;border-radius:0 3px 3px 0}
.cell8.el-wood{background:var(--el-wood-t)}  .cell8.el-wood>.eb{background:var(--el-wood)}
.cell8.el-fire{background:var(--el-fire-t)}  .cell8.el-fire>.eb{background:var(--el-fire)}
.cell8.el-earth{background:var(--el-earth-t)}.cell8.el-earth>.eb{background:var(--el-earth)}
.cell8.el-metal{background:var(--el-metal-t)}.cell8.el-metal>.eb{background:var(--el-metal)}
.cell8.el-water{background:var(--el-water-t)}.cell8.el-water>.eb{background:var(--el-water)}

html,body{margin:0}
/* ขนาดตัวอักษร 3 ระดับ (ผู้ทดสอบ 4 ต.ค. 2569 · แท็บฉัน) — ทุก font-size ในแอปเป็น rem จึงขยายตามกันทั้งหมด
   ปกติ = ค่าตั้งของเบราว์เซอร์ (มักเป็น 16px) · เคารพการตั้งขนาดตัวอักษรของเครื่องผู้ใช้ด้วย */
html[data-fs="l"]{font-size:112.5%}
html[data-fs="xl"]{font-size:125%}
/* หน้ารอโหลด (สเปก Designer v17 ข้อ 9): โลโก้ + บอกว่ากำลังทำอะไร · ไม่มีแถบความคืบหน้าปลอม
   โผล่หลัง 300ms เท่านั้น (เสร็จเร็วกว่า = ไม่เห็นเลย ไม่กะพริบ) · ตั้งคลาสในสคริปต์ <head> ทุกหน้า · shell.js ถอดเมื่อหน้าพร้อม
   คำ "กำลังตั้งเสาจากวันเวลาเกิดของคุณ" = IA ล็อก §เฟส C */
/* One atomic composition; assets-ready gates both images before display. */
.qz-loading-screen{position:fixed;inset:0;z-index:100;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:32px 24px;background:#FBF6EE;color:var(--ink-2);font-family:'IBM Plex Sans Thai',sans-serif;opacity:0;pointer-events:none;animation:qzload 1ms linear 300ms forwards}
.qz-loading-screen:not(.assets-ready){visibility:hidden}
.qz-loading-content{width:100%;max-width:342px;display:flex;flex-direction:column;align-items:center;text-align:center}
.qz-loading-art{display:block;width:100%;max-width:min(342px,52svh);height:auto;object-fit:contain}
.qz-loading-logo{display:block;width:136px;max-width:50%;height:auto;margin-top:28px}
.qz-loading-content p{margin:24px 0 0;font-size:1rem;font-weight:400;line-height:1.75;text-wrap:balance}
@media(prefers-reduced-motion:reduce){.qz-loading-screen{animation-timing-function:steps(1,end)}}
@keyframes qzload{to{opacity:1}}
/* แถบดูแบบเวลานาฬิกา (QZ.clockToggle · WI27 ก) — ตำแหน่งรอง ตัวเล็ก · โหมดนาฬิกา = กรอบประแดง (ข้อควรระวัง) */
.clocktg{font-size:0.875rem;color:var(--ink-2);line-height:1.5}
.clocktg a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;vertical-align:middle}
.clocktg.on{border:1.5px dashed var(--seal);background:var(--seal-t);border-radius:12px;padding:8px 11px;color:var(--ink)}
/* ย่อหน้าไม่มีระยะเบราว์เซอร์ (16px บนล่าง) — ระยะมาจาก gap ของกล่องเท่านั้น (DESIGN-V5 §จัดแนว 5) · เดิม 4 หน้าไม่ได้ล้างเอง จึงห่างไม่เท่าหน้าอื่น */
p{margin:0}
/* ระยะ (สเปก v17 ข้อ 11): ย่อหน้าในเนื้อเดียวกัน 12 · ระหว่างกล่อง 14 (.scr gap) · ระหว่างหมวด 24 — ย่อหน้าติดกันในกล่องที่ไม่ใช้ flex gap */
:not(.col):not(.row):not(.scr)>p+p{margin-top:12px}
/* พื้น: ก้อนสีใหญ่ขึ้น จางลง เบลอเข้าหากัน — ไม่มีขอบก้อนให้เห็น */
body{width:var(--page);max-width:100%;color:var(--ink);line-height:1.62;
  font-family:'IBM Plex Sans Thai',system-ui,sans-serif;font-size:1rem;
  background:
    radial-gradient(150% 30% at 50% -6%,  rgba(168,176,186,.30) 0%, rgba(168,176,186,0) 70%),
    radial-gradient(70% 16% at 18% 6%,    rgba(120,130,142,.22) 0%, rgba(120,130,142,0) 72%),
    radial-gradient(60% 13% at 82% 11%,   rgba(120,130,142,.17) 0%, rgba(120,130,142,0) 74%),
    radial-gradient(135% 48% at -14% -4%, #DCEBFF 0%, rgba(220,235,255,0) 72%),
    radial-gradient(118% 38% at 110% 2%,  #FFE1E9 0%, rgba(255,225,233,0) 74%),
    radial-gradient(150% 54% at -16% 104%,#FBDCC4 0%, rgba(251,220,196,0) 76%),
    radial-gradient(132% 46% at 116% 92%, #E7DEFB 0%, rgba(231,222,251,0) 76%),
    radial-gradient(96% 30% at 50% 58%,   #FFF8EE 0%, rgba(255,248,238,0) 70%),
    #FBF6EE;
  background-attachment:fixed}
.scr{display:flex;flex-direction:column;padding:22px 18px 26px;gap:14px;
  max-width:560px;margin:0 auto}  /* เกิน 560px อ่านยาก บรรทัดยาวเกินไป */

/* กล่อง: กระจกขุ่น ขอบละลาย ไม่มีเส้นคม — ความลึกมาจากเงานุ่มกับแสงขอบบน */
.card{background:rgba(255,255,255,.60);backdrop-filter:blur(30px) saturate(1.35);
  -webkit-backdrop-filter:blur(30px) saturate(1.35);
  border:0;border-radius:28px;
  box-shadow:0 1px 1px rgba(74,53,36,.04), 0 10px 20px -16px rgba(74,53,36,.30),
             0 34px 60px -40px rgba(74,53,36,.38), inset 0 1px 0 rgba(255,255,255,.85);
  padding:18px}
.card.pale{background:rgba(242,226,198,.60)}
.card.solid{background:rgba(255,255,255,.84)}
.card.dark{background:var(--dark);color:#F6ECDC;
  box-shadow:0 22px 46px -28px rgba(60,43,26,.65)}

/* ตัวอักษร: ชัดด้วยขนาดกับระยะ ไม่ใช่ความหนา */
.lab{font-size:0.875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.h1{font-family:Mitr,sans-serif;font-weight:300;font-size:2rem;line-height:1.2;letter-spacing:-.002em}
.h2{font-family:Mitr,sans-serif;font-weight:500;font-size:1.25rem;line-height:1.34}
.h3{font-family:Mitr,sans-serif;font-weight:500;font-size:1rem}
.p{font-size:1rem}
.sm{font-size:0.875rem;color:var(--ink-2)}
b{font-weight:600}
.row{display:flex;align-items:center;gap:10px}
.col{display:flex;flex-direction:column}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}
.grow{flex-grow:1}.push{margin-top:auto}
.pill{border-radius:999px;padding:7px 14px;font-size:0.875rem;font-weight:500;
  background:rgba(255,255,255,.72);border:0;box-shadow:0 1px 1px rgba(74,53,36,.05), inset 0 1px 0 rgba(255,255,255,.9)}
.badge{border-radius:999px;padding:7px 14px;font-size:0.875rem;font-weight:600;
  background:var(--pale);border:1px solid var(--line);color:var(--ink)}
.dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
/* ── ช่องข้อความที่ยังรอฝั่งตำรา/IA (วิธีช่วงเปลี่ยนผ่านที่ PO อนุมัติ) ── */
.slot{display:flex;flex-direction:column;gap:7px;padding:11px 12px;border-radius:13px;
  background:rgba(74,53,36,.05);border:1px dashed rgba(74,53,36,.2)}
.slot i{display:block;height:11px;border-radius:6px;background:rgba(74,53,36,.14)}
.slot .id{font-size:0.875rem;color:var(--ink-2);font-family:ui-monospace,monospace}

/* ปุ่ม: สีทึบ + เส้นขอบเข้ม + เงาแข็งเยื้อง (ลูกเล่นตามรูปที่ 2)
   สีปุ่มห้ามเป็นสีห้าธาตุ — ใช้น้ำตาลเข้ม/พาสเทลของแอปเท่านั้น */
.btn{min-height:54px;border-radius:27px;display:flex;align-items:center;justify-content:center;
  gap:10px;text-decoration:none;font-family:Mitr,sans-serif;font-weight:500;font-size:1.0625rem;
  border:1.5px solid var(--seal-d);background:var(--seal);color:#FFF6F2;
  box-shadow:3px 4px 0 var(--seal-d);transition:none}
.btn.ink{background:var(--dark);border-color:var(--dark);color:#F8EFE1;box-shadow:3px 4px 0 rgba(60,43,26,.3)}
.btn.purple{background:var(--ink-purple);border-color:#4C356F;color:#FBF8FF;box-shadow:3px 4px 0 #4C356F}
.btn.accent{background:var(--pale);color:var(--ink);border-color:var(--dark);box-shadow:3px 4px 0 var(--dark)}
.btn.ghost{background:rgba(255,255,255,.6);color:var(--ink);
  border-color:var(--line);box-shadow:3px 4px 0 rgba(201,166,120,.5)}
.btn.dark{background:var(--dark);color:#F8EFE1;border-color:var(--dark)}
.btn.flat{box-shadow:none}
/* ปุ่มที่ยังกดไม่ได้ — ใช้กับหน้าที่ต้องติ๊กให้ครบก่อน (PDPA: ห้ามติ๊กไว้ล่วงหน้า) */
.btn.off{background:rgba(255,255,255,.52);color:var(--ink-2);border-color:rgba(201,166,120,.5);
  box-shadow:none;cursor:not-allowed}
.btn.off:active{transform:none;box-shadow:none}
.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 rgba(60,43,26,.2)}

/* ── ตราประทับ: สี่เหลี่ยมแดงมุมมน ข้อความไทยข้างใน ไม่ใช้อักษรจีน ── */
.seal{display:inline-flex;align-items:center;justify-content:center;background:var(--seal);
  color:#FFF6F2;border-radius:9px;font-family:Mitr,sans-serif;font-weight:500;
  padding:7px 11px;font-size:1rem;line-height:1.1;box-shadow:2px 3px 0 var(--seal-d)}
/* ── เส้นคู่แบบลายกรอบจีน ใช้คั่นหมวด ── */
.rule2{height:5px;border-top:1.5px solid var(--seal);border-bottom:1.5px solid var(--seal);opacity:.55}

/* วิญญาณธาตุ — ลอยบนพื้น ไม่มีกล่อง เงานวลใต้ตัวทำด้วย CSS */
.sp{display:block;flex-shrink:0;object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(74,53,36,.20))}
.sp-wrap{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sp-wrap::after{content:"";position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:52%;height:9%;border-radius:50%;background:var(--glow,rgba(74,53,36,.16));filter:blur(6px)}
.sp-wrap img{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(74,53,36,.18))}

/* ═══ แถวชิปหัวข้อ (หน้าหัวข้อ) + แถบล่าง 4 แท็บ (หน้าระดับบน) — PAT-Today · UX audit P0 ═══
   ชิปเป็นลิงก์ = กดได้ → ขอบ + เงาแข็ง · ชิปหน้าปัจจุบัน = พื้นเข้ม ไม่มีเงา (สถานะ) */
.tchips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 6px}
.tchips::-webkit-scrollbar{display:none}
.tchip{flex-shrink:0;display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;font-size:0.875rem;font-weight:600;
  color:var(--ink);text-decoration:none;background:#FFF;border:1.5px solid var(--dark);box-shadow:2px 3px 0 rgba(60,43,26,.26);white-space:nowrap}
.tchip.here{background:var(--dark);color:#F8EFE1;box-shadow:none}
/* ── แถบล่างลอย (สเปก Designer v17 ข้อ 1 · 5 ต.ค. 2569) ──
   ลอยจากขอบ 14 · ขอบโค้ง 21 · ทึบ 85% ตอนนิ่ง → โปร่ง 50% ตอนเลื่อน (.moving · 180ms)
   brightness(1.12) กันพื้นมืดเกินตอนลอยทับปุ่มหมึกเข้ม — ไม่ใช่ของตกแต่ง
   ทุกแท็บใช้หมึกเต็ม (หมึกจาง/แดงตราตกเกณฑ์ที่ 50%) · แท็บที่ไม่ได้อยู่ opacity .72 · แท็บที่อยู่ = 600 + ขีดใต้ 16×3 ไม่ใช่สีแดง */
.tabbar{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;margin:0 auto;width:calc(100% - 28px);max-width:362px;
  display:grid;grid-template-columns:repeat(4,1fr);padding:8px 4px;border-radius:25px;background:rgba(255,252,244,.93);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #E2D8CA;box-shadow:0 8px 24px rgba(74,53,36,.15);transition:background-color 180ms ease}
/* แถบลอยตาม prototype navigation-0610 (ui.css #tabs) · ป้าย 0.875rem (พื้นตัวอักษร 14 · prototype 12) · แท็บที่อยู่ = พื้นเขียวยอดอ่อนทึบ (Designer: ไม่ใช้ #E8EFE6 ที่ชนพื้นธาตุไม้) */
.tabbar.moving{background:rgba(255,252,244,.6)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;border-radius:18px;
  font-size:0.875rem;line-height:1.2;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tab svg{width:21px;height:21px}
.tab.on{color:var(--ink);font-weight:600;background:var(--ci-sprout)}
.tab.on svg{stroke-width:2.2}
body.has-tabbar{padding-bottom:calc(190px + env(safe-area-inset-bottom))}   /* prototype #screen padding-bottom 190 */
a.logoslot{text-decoration:none}
/* โดมวิญญาณธาตุ (สเปก v17 ข้อ 8) — เต็มขอบจอ (ชดเชย padding .scr) · ขอบล่างจางเข้าพื้น */
.dome{position:relative;height:296px;margin:-22px -18px 0;overflow:hidden;
  background:radial-gradient(120% 86% at 50% 18%,#FFFDF8 0%,rgba(255,253,248,0) 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent);mask-image:linear-gradient(to bottom,#000 74%,transparent)}
.dome.low{height:186px}
.dome .dsp{position:absolute;transform:translate(-50%,-50%)}
.dome .domelogo{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:2;background:rgba(255,255,255,.7)}
.dome.low .domelogo{bottom:22px}
/* แถวทางลัดเต็มความกว้าง สูง ≥48 มีขอบ + เงาแข็ง (กดได้) — สเปก v17 ข้อ 5/7 (.shortcut ในต้นแบบ) */
.shortcut{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:10px 14px;border:1.5px solid var(--dark);
  border-radius:14px;background:#FFF;box-shadow:2px 3px 0 rgba(60,43,26,.16);color:var(--ink);text-decoration:none;font-size:0.875rem;line-height:1.4}
.shortcut:active{transform:translate(2px,3px);box-shadow:none}
.shortcut.noarr::after{content:none}   /* คำ IA ที่มีลูกศรในคำแล้ว */
.shortcut::after{content:"›";font-size:1.0625rem;color:var(--ink-2);flex:0 0 auto}
/* ปุ่มกลับขึ้นบน (ซ้าย · โผล่เมื่อเลื่อนพ้น 1.5 จอ) · ปุ่มที่ปรึกษา AI (ขวา · เขียวยอดอ่อน #C4DB85 โปร่ง 60% ไอคอนทึบ)
   ขยับด้วย transform/opacity เท่านั้น (ลื่น) · ลอยเหนือแถบ: 14 + 58 + 12 = 84 */
.qz-up,.qz-ai{position:fixed;z-index:41;bottom:calc(104px + env(safe-area-inset-bottom))}   /* เหนือแถบลอย 14 + 80 + 10 (prototype .floating-ai) */
.qz-up{left:max(16px,calc(50% - 179px));min-height:44px;display:inline-flex;align-items:center;gap:5px;padding:0 15px 0 12px;border-radius:999px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(74,53,36,.22);
  box-shadow:0 7px 16px -9px rgba(60,43,26,.5);font:inherit;font-size:0.875rem;color:var(--ink);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 180ms ease,transform 180ms ease}
.qz-up.show{opacity:1;transform:none;pointer-events:auto}
.qz-ai.consult-orb{left:auto;right:max(16px,calc((100vw - 390px)/2 + 16px));width:68px;height:68px;border-radius:50%;overflow:hidden;border:1px solid #d7c5ae;background:#f6ead9;box-shadow:0 5px 16px #4a352422;display:block;text-decoration:none;color:#382d21;isolation:isolate;z-index:39}
.consult-orb-face{position:absolute;inset:0;background:url(sinse-8-views.png) -118px 0 / 384px 256px no-repeat}
.consult-orb-label{position:absolute;bottom:0;left:0;right:0;z-index:1;padding:2px 0 4px;text-align:center;font:600 .875rem/1.2 'IBM Plex Sans Thai',sans-serif;color:#382d21;background:#fff4e6;text-shadow:0 1px 0 #fff}
.consult-orb:focus-visible{outline:3px solid #176447;outline-offset:4px}.consult-orb:hover{box-shadow:0 6px 20px #4a352435}
/* หลบบล็อก data-noai (สี่เสา · ป้ายสถานะ) = ซ่อนจริง ไม่ใช่แค่จาง (Designer 6 ต.ค.: จางแล้วยังบังชิปคอลัมน์ปี) · fade สั้น · ลดการเคลื่อนไหว = ตัดทันที */
.qz-ai{transition:opacity 150ms ease,visibility 0s linear 0s}
.qz-ai.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease,visibility 0s linear 150ms}
@media (prefers-reduced-motion:reduce){.qz-ai,.qz-ai.off{transition:none}}
@media (prefers-reduced-motion:reduce){.tabbar,.qz-up{transition:none}}
/* แตะดูความหมาย (สเปก v20 · PAT-Terms) — คำในประโยคเส้นประจุด (dotted ไม่ใช่ dashed = ยังไม่เปิด/ระวัง) กดไม่ได้ · แถวใต้ย่อหน้าเป็นปุ่มจริง สูง 46 · เงานุ่ม/ไม่มีเงา */
.tm{border-bottom:1.5px dotted var(--ink-2);padding-bottom:1px}
.terms{border-top:1px solid var(--hair);overflow:hidden}   /* เชิงอรรถของย่อหน้า — เบากว่าแถว "ดูวิธีคิด" (Designer ตรวจ 21deba3) */
.terms>button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:7px 0;cursor:pointer;font-size:0.875rem;color:var(--ink-2);line-height:1.4}
.terms>button:focus-visible{outline:2px solid var(--ink-purple);outline-offset:-3px}
.terms>button .k{font-weight:600;color:var(--ink);flex:1;min-width:0}
.terms>button svg{flex-shrink:0;transition:transform .18s ease}
.terms[data-open="1"]>button svg{transform:rotate(180deg)}
.terms>.body{display:none;padding:2px 0 12px;flex-direction:column;gap:9px}
.terms[data-open="1"]>.body{display:flex}
.terms .d{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:baseline;font-size:1rem;line-height:1.5;margin:0}
.terms .d b{font-weight:600;white-space:nowrap}
.terms .d span{min-width:0;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.terms>button svg{transition:none}}
/* ข้อความสำหรับเครื่องอ่านหน้าจอเท่านั้น */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ตัวเลือกหมวดแบบแถวลิงก์ (prototype .linkrow) */
.topics{display:flex;flex-direction:column}
.linkrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #E4D8CA;color:var(--ink);text-decoration:none;min-height:56px}
.linkrow:last-child{border-bottom:0}
.linkrow b{font-weight:600;display:block}
.linkrow small{display:block;color:#77634F;font-weight:400;font-size:0.875rem}
.linkrow .arrow{color:var(--green-ink);font-size:1.375rem;line-height:1}
.linkrow.here b{color:var(--ink-2)}
/* แถวล็อก (QZ.lockRow · Designer 6 ต.ค.): component เดียวทั้งแอป · สูง ≥56 · ขอบบาง ไม่มีเงาแข็ง (กดไปหน้าเดียวกันเสมอ ไม่ใช่ปุ่มหลัก) · หมึกล้วน ไม่ใช้สีธาตุ/เขียวสถานะ (ถูกล็อกไม่ใช่สถานะบวก) */
.lockrow{display:flex;align-items:center;gap:11px;min-height:56px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:#FFF;color:var(--ink);text-decoration:none}
.lockrow>svg{flex-shrink:0;color:var(--ink-2)}
.lockrow .lrt{flex:1;min-width:0;display:flex;flex-direction:column}
.lockrow b{font-weight:600}
.lockrow small{font-size:0.875rem;color:var(--ink-2)}
.lockrow .arrow{color:var(--ink-2);font-size:1.375rem;line-height:1}
.lockrow:focus-visible{outline:3px solid var(--seal);outline-offset:3px}

/* Approved Header A/B, master-review 1007; keep navigation and existing tokens. */
.qhd-a>.h1{font-size:1.75rem;line-height:1.35;font-weight:500}
.qhd-a .qhd-r1{margin-bottom:8px}
.qhd-b .qhd-r1{margin-bottom:8px;align-items:flex-start}
.qhd-b .qhd-r1>.h1{flex:1;min-width:0;font-size:1.4375rem;line-height:1.4;font-weight:500;margin:4px 0 0}
.qhd-b .back,.qhd-b .qmenu{flex-shrink:0}
.birth-compact{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;font-size:.875rem;color:var(--ink-2)}
.birth-compact a{display:inline-flex;align-items:center;min-height:44px;color:var(--green-ink)}
.scr>.section{margin-top:28px;margin-bottom:-4px}
.sinse-listen{display:block;width:80px;height:88px;flex-shrink:0;border-radius:22px;background:#eee8dd url(sinse-8-views.png) -182px -2px / 553px 369px no-repeat;border:2px solid #fff9}
.consult-link{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,#fff2da,#f3dfd1);color:#234d43;border:1px solid #dfc9ac;box-shadow:0 4px 0 #e4d7c7;border-radius:20px;padding:16px;text-decoration:none;min-height:44px}
.consult-link b,.consult-link small{display:block}.consult-link small{font-size:.875rem;color:#625343;margin-top:5px}

/* Explicit context scenario selector shared by wealth and pair views. */
.scenario-select{width:100%;min-height:44px;margin-top:12px;padding:10px 40px 10px 10px;border:1px solid var(--hair);border-radius:10px;background-color:var(--paper,#fff);color:var(--ink);font:inherit;font-size:1rem}

/* Shared account header1008 · โลโก้ขวา / สิทธิ์อยู่เฉพาะเมนู */
.qhd-r1{justify-content:space-between;margin-bottom:12px}.qhd-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.qhd-logo{display:flex;align-items:center;min-height:44px}.qhd-logo img{display:block;width:82px;height:auto}
.qsettings{border:1px solid var(--line);border-radius:16px;background:#fffdf9;color:var(--ink);padding:20px;max-width:340px;width:calc(100% - 48px);box-sizing:border-box;max-height:85dvh;overflow:auto}.qsettings::backdrop{background:#3c2b1a66}.qsettings .p{margin:12px 0}.qsettings-link{display:flex;align-items:center;min-height:44px;width:100%;box-sizing:border-box;padding:10px 0;border:0;border-top:1px solid var(--hair);background:none;text-align:left;color:var(--ink);font:inherit;text-decoration:none;cursor:pointer}.qsettings-link.danger{color:#A82A22}.qsettings-link:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}

.qhd-tools .qmenu{margin:0}.qhd-tools .qmenu-p{right:0}
.qaccount-label{font-size:0.875rem;line-height:1.3;font-weight:600;padding:2px 8px;border:0;border-radius:6px;box-shadow:none;background:#EEE8DF;color:#6B5340}.qaccount-label[data-tier=test]{background:#F4E6CC;color:#79603D}.qaccount-label[data-tier=pro]{background:#E8EDDA;color:#426352}.qaccount-label[data-tier=member]{background:#E3EAF0;color:#38576C}
/* ลูกศรช่องเลือก (select) ชุดเดียวทั้งแอป (folk 13 ต.ค. 2569: ลูกศรเดิมของเบราว์เซอร์เบี้ยว) — ปิดลูกศรของเครื่อง แล้ววาดเองกึ่งกลางแนวตั้งเสมอ
   ⚠️ กฎอื่นของ select ใช้ background-color เท่านั้น ห้ามใช้ background: (ล้างลูกศรนี้ทิ้ง) · เทสคุม */
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b5340' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:40px}
select::-ms-expand{display:none}

/* ── Plan A (17 ต.ค. 2569 · UI v10 · CI-v10.md): ยอดธูปบน header ทุกหน้า + การ์ดถามต่ออายุ ── */
.qhd-bal{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;padding:4px 10px;border-radius:24px;background:var(--seal-t,#FBE9E5);border:1px solid var(--seal,#A82A22);color:var(--seal,#A82A22);font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap}
.qhd-bal-n{font-size:1.125rem;line-height:1.3}
.qhd-bal:focus-visible,.pa-btn:focus-visible{outline:3px solid var(--seal,#A82A22);outline-offset:3px}
.pa-renew{margin:12px 0 4px;padding:16px;background:rgba(255,255,255,.72);border-top:6px solid #B3B3B3;border-radius:0 0 20px 20px;display:flex;flex-direction:column;gap:8px}
.pa-renew h2{font-family:Mitr,sans-serif;font-weight:500;font-size:1.125rem;line-height:1.4;margin:0}
.pa-renew p{margin:0;font-size:1rem;line-height:1.7}.pa-renew .sm{font-size:.875rem}
.pa-renew-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:6px}
.pa-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;border-radius:14px;border:1px solid #c9ad8f;background:#fffaf3;color:var(--ink);font:600 1rem 'IBM Plex Sans Thai',sans-serif;text-decoration:none;cursor:pointer;text-align:center}
.pa-btn.pa-primary{background:var(--seal,#A82A22);border-color:var(--seal-d,#7E1E18);color:#fff}
.pa-btn:disabled{background:var(--pale-2,#F4E6CC);color:var(--ink-2);border-color:var(--line);cursor:default}


/* เชิงอรรถเล็ก (folk 17 ต.ค.): หมายเหตุทุกจุดเป็นบรรทัดเล็กมี * สีเทาอ่อนแบบเดียวทั้งแอป · 14px · #6D675F = เทาอ่อนที่สุดที่ยังผ่าน 4.5:1
   วัดจริง (WCAG sRGB): ขาว 5.59 · ครีม #FBF6EE 5.20 · การ์ดเขียวอ่อน #F3F6E9 5.10 · #FFF8EE 5.30 · พื้นเข้มสุด #F4E6CC 4.54 (บันทึกใน DESIGN-V5.md) */
.fn,.rel-note:not([role]){font-size:.875rem;line-height:1.6;color:#6D675F}
.fn{margin:10px 0 0}
.rel-note:not([role])::before,.pa p.sm:not(.fn)::before,.ss-info p.sm::before{content:"*"}
.pa p.sm:not(.fn),.ss-info p.sm{color:#6D675F}

/* Wallet balance: approved package gold darkened with ink for readable text. */
.qz-incense-balance[data-balance-tone="ok"]{color:color-mix(in srgb,#C99850 55%,var(--dark));border-color:#C99850}
.qhd-bal.qz-incense-balance[data-balance-tone="ok"]{background:var(--pale-2)}
.qz-incense-balance[data-balance-tone="low"]{color:var(--seal);border-color:var(--seal)}
.qhd-bal.qz-incense-balance[data-balance-tone="low"]{background:var(--seal-t)}

/* ── จุดดึง v2 (HANDOFF-DEV-HOOKS-v2 · folk 13 ต.ค. 2569) · app/hooks.js · token CI เดิมเท่านั้น ไม่มีสีธาตุ/สีเตือน ──
   ชิ้นที่แพ้ในจอ (.hk-quiet) = จางจนมองไม่เห็นแต่คงที่ไว้ (เนื้อหาไม่กระโดด) และยังโฟกัสได้ · ได้โฟกัส = ชนะทันที (V2-D8) */
.hk-ask-slot{min-height:48px}
.hk-ask{display:flex;align-items:center;min-height:48px;padding:2px 0;font-size:0.875rem;line-height:1.65;color:var(--green-ink);text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.hk-ask:focus-visible,.hk-path:focus-visible,.hk-dismiss:focus-visible,.hk-shortcut a:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}
.hk-quiet.hk-ask,.hk-quiet>.hk-extra,.hk-quiet.hk-solo{opacity:0;pointer-events:none}
.hk-quiet.hk-ask:focus,.hk-quiet.hk-solo:focus,.hk-quiet>.hk-extra:focus-within{opacity:1;pointer-events:auto}
.hk-sale{display:flex;flex-direction:column;gap:12px}
.hk-sale .hk-extra{display:flex;flex-direction:column;gap:10px}
.hk-sale.hk-on .hk-first{font-weight:600}
.hk-sale .hk-cta{min-height:48px;font-size:1rem}
.hk-need{display:flex;flex-direction:column;gap:10px}
.hk-title{font-weight:600}
.hk-path{display:flex;align-items:center;min-height:48px;color:var(--green-ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.hk-dismiss{align-self:flex-start;min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:0.875rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.hk-next{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.hk-eyebrow{font-size:0.875rem;color:var(--ink-2);letter-spacing:.04em}
.hk-next>.card{display:flex;flex-direction:column;gap:10px}
.hk-fold{color:var(--ink-2);white-space:normal;overflow-wrap:normal}   /* ตัดบรรทัดได้ระหว่างคำ (ซูม 200% ไม่ล้น · รอบ 2) · ███ ไม่ถูกหั่นเพราะไม่มีจุดตัดในตัว */
.hk-shortcut{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:6px;border:1px solid var(--line);border-radius:18px;padding:0 10px;align-self:flex-start;max-width:100%}
.hk-shortcut a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 6px;font-size:0.875rem;color:var(--green-ink);text-decoration:none}
.hk-shortcut .hk-sep{color:var(--ink-2)}

/* ปุ่มลอย "ถามเรื่องหน้านี้" (handoff v2): ทางนำทางถาวร · อยู่เหนือแถบล่างเสมอ (ไม่บังแถบ · V2-D9) · ย่อเป็นวงกลมไอคอนเมื่อซูม 200%/ตัวอักษรใหญ่ (PO B5 · ≤8% ของจอ) */
.qz-ai.consult-pill{left:auto;right:max(16px,calc((100vw - 390px)/2 + 16px));display:flex;align-items:center;gap:10px;min-height:64px;max-width:min(270px,calc(100vw - 116px));
  padding:8px 16px 8px 8px;border-radius:18px;background:var(--pale-2);border:1px solid var(--line);box-shadow:0 6px 20px var(--hair);color:var(--ink);text-decoration:none;z-index:39;box-sizing:border-box}
.consult-pill .consult-orb-face{position:relative;inset:auto;flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:#f6ead9 url(sinse-8-views.png) -80px 0 / 260px 173px no-repeat;border:1px solid var(--line)}
.consult-pill .cp-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.consult-pill .cp-text b{font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.consult-pill .cp-text small{font-size:0.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.consult-pill:focus-visible{outline:3px solid var(--green-ink);outline-offset:4px}
.qz-ai.consult-pill.cp-mini{width:56px;height:56px;min-height:0;max-width:none;padding:4px;border-radius:50%;justify-content:center}
.consult-pill.cp-mini .consult-orb-face{flex-basis:46px}
.consult-pill.cp-mini .cp-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:259.98px){.qz-ai.consult-pill{width:56px;height:56px;min-height:0;max-width:none;padding:4px;border-radius:50%;justify-content:center;right:12px}
  .consult-pill .cp-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* แถบล่างตอนซูม 200% (กว้าง < 260px): สี่ช่องกว้างเท่ากัน (ป้ายยาวไม่เบียดช่องอื่น) · ขอบข้างแคบลง → ช่องละ ≥44px ที่ 390@200% (195px) · LIAISON D1 */
@media (max-width:259.98px){.tabbar{width:calc(100% - 8px);padding:6px 2px;grid-template-columns:repeat(4,minmax(0,1fr))}.tab span{white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.15}}
/* DEV-FLOAT-INCENSE-1018: standalone avatar outside the navigation; reserve its width so Deep stays uncovered. */
.tabbar.has-consult{width:calc(100% - 80px);max-width:310px;left:0;right:52px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.tabbar.has-consult .tab{min-width:44px;white-space:normal;text-align:center;overflow-wrap:anywhere}
.qz-ai.consult-avatar{position:fixed;left:auto;right:max(14px,calc((100vw - 390px)/2 + 14px));bottom:calc(33px + env(safe-area-inset-bottom));width:44px;height:44px;min-width:44px;min-height:44px;display:block;border-radius:50%;overflow:visible;opacity:1;transition:opacity 150ms ease;visibility:visible;background:var(--paper);border:1px solid var(--line);z-index:41}
.consult-avatar .consult-orb-face{inset:0;background:url(plan-a/sinse-avatar-round-cream-512.png) center/cover no-repeat}
.qz-ai.consult-avatar.scrolling{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms ease,visibility 0s linear 150ms}
.qz-ai.consult-avatar:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hk-ask-cost{display:block;font-size:.875rem;line-height:1.6}
@media(prefers-reduced-motion:reduce){.qz-ai.consult-avatar,.qz-ai.consult-avatar.scrolling{transition:none}}
.hk-ask{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.hrow>.hk-ask-slot{grid-column:1/-1}
@media(max-width:259.98px){.tabbar.has-consult{grid-template-columns:repeat(4,minmax(44px,1fr));overflow-x:auto}}

.consult-avatar .consult-orb-face{border-radius:50%}
.consult-label{position:absolute;bottom:calc(100% + 6px);right:0;width:max-content;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:.875rem;line-height:1.4;pointer-events:none}

/* DEV-FIX-1018B: allow the final controls to scroll clear of nav + standalone 44px avatar. */
body.has-tabbar.has-consult-floater{padding-bottom:calc(190px + 44px + env(safe-area-inset-bottom))}
html:has(body.has-consult-floater){scroll-padding-bottom:calc(190px + 44px + env(safe-area-inset-bottom))}
body.has-consult-floater #app :is(a,button,input,select,textarea,summary){scroll-margin-bottom:calc(190px + 44px + env(safe-area-inset-bottom))}

/* Freemium lock CTA · Folk 19 Oct: soft green using the approved CI sprout token. */
.btn.freemium-cta{background:var(--ci-sprout);color:var(--dark);border-color:transparent;box-shadow:none}
.btn.freemium-cta:active{transform:none;box-shadow:none}
.btn.freemium-cta:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}