:root{
  color-scheme: light;
  --page:#f9f9f7; --surface:#fcfcfb;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7; --border:rgba(11,11,11,0.10);
  --zone-need:#dcdbd3; --zone-goal:#efeee9;
  /* สีของแหล่งที่มา — ล็อก 18 ส.ค. 2569 · ตัวเลข contrast เต็มตารางอยู่ใน CLAUDE.md
     ⚠️ แถบวางบน --zone-need/--zone-goal ไม่ใช่ --page · วัดกับ --page จะได้เลขดีเกินจริง */
  --s1:#fcb621;       /* สวัสดิการบริษัท — เหลือง · 1.28 กับ zone-need = ตกเดี่ยวๆ */
  --s1-edge:#a35629;  /* ขอบ 1px ของสวัสดิการ — 3.86 · **นี่คือตัวที่ทำให้ผ่านเกณฑ์**
                         ข้อยกเว้นเดียวที่ใช้สีน้ำตาลได้ ดู CLAUDE.md */
  --s2:#D31145;       /* ซื้อกับผม — สีแบรนด์ AIA · 3.84 */
  --s3:#6a5acd;       /* ซื้อที่อื่น — external ทั้งสองก้อนใช้สีนี้ร่วมกัน · 3.82
                         **ห้ามเพิ่มสีที่ 4 เพื่อแยก externalAIA กับ externalNonAIA** */
  --hatch-a:#585651;  /* ยังไม่ทราบผู้ดูแล — ลายทแยงโทนเข้ม · 5.28 */
  --hatch-b:#7e7c77;  /* ลายทแยงโทนอ่อน · 3.00 พอดีเส้น ไม่มีระยะเผื่อ ห้ามทำให้จางลงอีก */
  --togo:#1c5cab;               /* ตัวเลข "อีก xxx ถึงเป้า" */
  --reached:#006300;            /* "ถึงเป้าหมายแล้ว" */
  --warn:#fab219; --crit:#d03b3b; --crit-soft:#b85555;
  --field:#f1f0ea;              /* พื้นหลังช่องที่กรอกได้ */
  --field-focus:#ffffff;
  --r:10px;

  /* ---- ปุ่มเครื่องมือข้อมูล — วัด contrast ด้วยสคริปต์แล้ว ไม่ได้เลือกด้วยสายตา ----
     เกณฑ์: ตัวอักษร 4.5:1 (WCAG 1.4.3) · ขอบเขตของ UI component 3:1 (WCAG 1.4.11)
     พื้นทั้งสองสีเดี่ยวๆ **ตก**เกณฑ์ขอบเขต (1.50 และ 2.10 กับ --page)
     จึงต้องมีขอบเข้มกำกับ ซึ่งคือตัวที่ทำให้ผ่าน — ห้ามเอาขอบออก */
  --tool-xlsx:#ADD8B6;        /* ดำบนพื้นนี้ 12.44 ผ่าน · ขาว 1.58 ตก → ห้ามใช้ตัวอักษรขาว */
  --tool-xlsx-edge:#739079;   /* 3.32 กับ --page — **นี่คือตัวที่ทำให้ขอบเขตปุ่มผ่าน** */
  --tool-bak:#9FB2B1;         /* ดำบนพื้นนี้ 8.88 ผ่าน · เทา --ink-2 3.58 ตก → ใช้ --ink เท่านั้น */
  --tool-bak-edge:#7D8C8B;    /* 3.32 กับ --page */
  --tool-pick:#ACD0E8;        /* ช่องเลือกลูกค้า — ดำ 12.13 ผ่าน · ขอบเขตเดี่ยวๆ 1.54 ตก */
  --tool-pick-edge:#748C9D;   /* 3.33 กับ --page */
  --tool-content:#E8D291;     /* เนื้อหานำเสนอ — ดำบนพื้นนี้ 13.18 ผ่าน · ขาว 1.49 ตก
                                 ขอบเขตเดี่ยวๆ 1.42 ตก → ต้องมีขอบเหมือนปุ่มกลุ่มอื่น */
  --tool-content-edge:#97885e;/* 3.32 กับ --page — เลือกให้เท่าขอบกลุ่มอื่น (3.32–3.33)
                                 ไม่ใช่แค่พอผ่านเส้น 3.0 จะได้ดูเป็นชุดเดียวกัน */
  --tool-content-hi:#D8C387;  /* hover — ดำ 11.32 ผ่าน */
  --tool-content-lo:#C8B57D;  /* active — ดำ 9.71 ผ่าน · ขอบไม่เปลี่ยน จึงยังผ่าน 3.32 */

  /* ---- สีตอน "กด" ของทุกกลุ่มปุ่ม — วัดด้วยสคริปต์ทั้งชุด 28 ส.ค. 2569 ----
     ของเดิมใช้ `.btn:active{opacity:.6}` ซึ่งทำให้พื้น ตัวอักษร และขอบ **จางพร้อมกัน**
     ผลคือทุกปุ่มสีตกเกณฑ์ตอนกด: ตัวอักษรเหลือ 3.36–4.19 (ต้อง ≥ 4.5)
     และขอบเขตเหลือ 1.92–1.94 (ต้อง ≥ 3.0)
     ตอนนี้กดแล้ว **พื้นเข้มขึ้น 12% ขอบไม่ถูกแตะ** → ตัวอักษร 6.95–14.62 · ขอบคงเดิม 3.32–3.33 */
  --btn-lo:#dededd;           /* ปุ่มพื้นฐาน — ดำบนพื้นนี้ 14.62 */
  --tool-pick-lo:#97b7cc;     /* picker — 9.34 */
  --tool-del-lo:#e09e9c;      /* ลบ — 8.94 */
  --tool-xlsx-lo:#98bea0;     /* Excel — 9.57 */
  --tool-bak-lo:#8c9d9c;      /* Backup — 6.95 */
  --tool-del:#FEB3B1;         /* ลบ — ดำ 11.53 ผ่าน · ขอบเขตเดี่ยวๆ 1.62 ตก */
  --tool-del-edge:#AF7C7A;    /* 3.33 กับ --page
     ⚠️ ปุ่มลบกับ picker ต่างกันแค่ 1.05 ในเชิงความสว่าง — แยกกันด้วย "สี" อย่างเดียวไม่พอ
        สิ่งที่ทำให้แยกออกจริงคือ **ข้อความบนปุ่ม** ห้ามเอาข้อความออกแล้วเหลือแต่ไอคอนสี */
  /* ฟอนต์ของ numeric visual token — ถ้า GSNum โหลดไม่ได้ ตกกลับฟอนต์ระบบเอง */
  --font-num:"GSNum",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- กฎกลางของ typography contract (docs/typography-contract.md ข้อ 6) ----
   สองคลาสนี้เป็นคนละเรื่องกัน **ห้ามรวมเป็นคลาสเดียว**
     .numeric-token  เนื้อหาชิ้นนี้เป็น numeric visual token → ใช้ GSNum
     .tabular        บริเวณนี้ต้องจัดแนวตัวเลข (สืบทอดลงไปหาลูก)

   ชื่อคลาสต้องบอก **หน้าที่** ไม่ใช่บอกว่า "นี่คืออะไร" (ข้อ 6a)
   ห้ามใช้ .num .text .value .label — กำกวมและเคยชนกันมาแล้วจริง (ข้อ 10)

   คลาสทั้งสองมาจาก format.js เท่านั้น — ui.js ไม่ได้เขียน numeric-token เอง */
.numeric-token{font-family:var(--font-num)}
.tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* override ระดับคอมโพเนนต์ — ประกาศไว้ตาม contract ข้อ 3a **ยังไม่มีใครใช้**
   ใช้เมื่อ audit ด่านที่ 3 รายงานว่าคอลัมน์ไหน texture แตกจนอ่านยาก */
[data-numeric="off"] .numeric-token{font-family:inherit}

/* ค่าที่ยังไม่รู้ — ต้องเห็นว่าเป็นสถานะ ไม่ใช่ช่องว่างที่ดูเหมือนข้อมูลหาย */
.unknown{color:var(--ink-muted);font-size:.92em}
/* ---- ไม่มีโหมดมืด — เป็น product requirement ไม่ใช่ "ยังไม่ได้ทำ" ----
   ล็อก 14 ส.ค. 2569 · เอาบล็อกโหมดมืดออก 15 ส.ค. 2569 (v3 UI ขั้นที่ 1)

   เหตุผล: แอพแสดงตัวเลขการเงินและความคุ้มครอง **สีต้องมีความหมายคงที่**
   ลูกค้าเห็นสีหนึ่งแล้วต้องรู้ว่าหมายถึงอะไร โดยไม่ต้องกังวลว่าพื้นหลังเปลี่ยนแล้ว
   contrast หรือความหมายจะเปลี่ยน · `color-scheme: light` ใน :root ข้างบน
   เป็นตัวบอกเบราว์เซอร์ให้วาด scrollbar และ form control เป็นโหมดสว่างด้วย

   **ห้ามเพิ่ม `prefers-color-scheme` หรือ `data-theme` กลับเข้ามา**
   ถ้าวันหนึ่งต้องการโหมดมืดจริง นั่นคือการตัดสินใจใหม่ที่ต้องผ่านการทดสอบ
   บนเครื่องจริงอีกรอบ ไม่ใช่การ "เปิดของเดิมกลับ"
   ดู docs/v3-ui-acceptance.md ข้อ 1 · CLAUDE.md หัวข้อ visual mode เดียว */

/* ============================================================
   GSNum — Google Sans Numeric
   สเปกเต็มอยู่ที่ docs/typography-contract.md · **อ่านก่อนแตะ**

   ⚠️ นี่ไม่ใช่ "Google Sans" ที่เป็นฟอนต์ทั่วไป — เป็น subset ที่มีแค่
   0-9 , . % - + และช่องว่าง (25.6 KB) มีไว้วาด **numeric visual token** เท่านั้น
   **ห้ามเอาไปใช้กับ heading · body · ปุ่ม · label ใดๆ** (contract ข้อ 1a)
   ต่อให้เผลอใช้ ก็ไม่มีอะไรเปลี่ยน เพราะในไฟล์ไม่มีตัวอักษรไทยหรือละตินเลย

   ใบอนุญาต SIL Open Font License 1.1 — ตัวบทเต็มอยู่ที่ public/OFL.txt
   Copyright 2025 The Google Sans Project Authors
   ============================================================ */
@font-face{
  font-family:"GSNum";
  src:url("../gs-num.woff2") format("woff2");
  font-weight:400 700;      /* variable — แอพใช้ 400/550/600/700 */
  font-style:normal;
  font-display:block;       /* ไฟล์อยู่ในเครื่องเดียวกัน โหลดเสร็จทันที
                               block ดีกว่า swap เพราะไม่มีตัวเลขกระโดดตอนสลับ */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5;
  padding:0 0 64px;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--page);
  border-bottom:1px solid var(--border);
}
.topbar .wrap{display:flex;align-items:center;gap:12px;height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:.2px;white-space:nowrap}
.brand img{height:38px;width:auto;display:block}
.brand .fallback{font-weight:650}          /* ใช้เมื่อไฟล์โลโก้ยังไม่มี */
/* ชื่อหน้าเป็นหัวเรื่องจริง ไม่ใช่ข้อความรอง — ต้องอ่านออกก่อนอย่างอื่นบนจอ iPad */
.brand span{color:var(--ink);font-weight:650;font-size:17px;letter-spacing:.1px}
.spacer{flex:1}
select,button,input{font:inherit;color:inherit}
select,.btn{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:9px 14px;min-height:44px;cursor:pointer;
}
.btn{font-weight:550}
/* กดแล้ว **เปลี่ยนสีพื้น ไม่ลด opacity** — เหตุผลเต็มอยู่ที่บล็อกสีด้านบน
   opacity ลดความทึบของทั้ง element พร้อมกัน ทำให้ตัวอักษรกับขอบจางตามไปด้วย
   ซึ่งพาทุกปุ่มตกเกณฑ์ contrast ในจังหวะที่ผู้ใช้กำลังแตะอยู่พอดี */
.btn:active{background:var(--btn-lo)}
.btn:focus-visible{outline:2px solid var(--togo);outline-offset:2px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px;margin-top:16px;
}
h2{font-size:15px;font-weight:650;margin:0 0 4px}
.sub{font-size:13px;color:var(--ink-muted);margin:0 0 18px}

/* ---------- person ---------- */
.person .meta{font-size:13px;color:var(--ink-2);margin-top:12px}
.person .meta b{font-weight:550;color:var(--ink)}
.pfrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pf{
  background:var(--field);border:1px solid transparent;border-radius:var(--r);
  padding:9px 12px;min-height:44px;
}
.pf:focus{background:var(--field-focus);border-color:var(--s2);outline:none}
.pf-name{font-size:24px;font-weight:650;width:min(100%,420px);padding:8px 12px}
.pflab{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--ink-muted)}
.pflab .pf{width:158px}
.pflab .pf.wide{width:210px}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.tile{border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.tile .lb{font-size:12.5px;color:var(--ink-2);min-height:34px}
.tile .vl{font-size:27px;font-weight:650;margin-top:6px;letter-spacing:-.4px}
.tile .df{font-size:12px;color:var(--ink-muted);margin-top:2px}

/* ---------- chart ---------- */
.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.lgi{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.sw{width:11px;height:11px;border-radius:3px;flex:none}
.sw.overlay{background:var(--s1);border:1px dotted var(--s1-edge)}
.sw.unknown-custody{
  background:repeating-linear-gradient(45deg,
    var(--hatch-a) 0 3px, var(--hatch-b) 3px 6px);
}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 22px}
.chip{
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  padding:8px 15px;min-height:40px;font-size:13.5px;cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

.rows{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:180px 1fr 158px;align-items:start;gap:14px;padding:2px 0}
.row .rl{font-size:13.5px;color:var(--ink-2);text-align:right;line-height:1.3;padding-top:3px}
.row .rl small{display:block;color:var(--ink-muted);font-size:11.5px}

/* รางเต็ม = "เป้าหมาย" · โซนเข้ม = ช่วงที่ "จำเป็น" · แถบสี = ที่มีจริง · เส้นหนา = จุดจำเป็น */
.track{position:relative;height:48px}
.zone{position:absolute;top:2px;height:22px}
.zone-need{left:0;background:var(--zone-need)}
.zone-goal{right:0;background:var(--zone-goal);border-radius:0 4px 4px 0}
.needmark{position:absolute;top:-3px;height:32px;width:3px;background:var(--ink);border-radius:2px}
/* ป้ายเป็น element จริง ไม่ใช่ ::after — pseudo-element ครอบ <span class="numeric-token">
   ไม่ได้ จึงแยกคำว่า "จำเป็น" ออกจากตัวเลขไม่ได้ (typography-contract ข้อ 8) */
.needlb{
  position:absolute;top:30px;transform:translateX(-50%);
  font-size:10.5px;color:var(--ink);white-space:nowrap;font-weight:600;
}
/* ของเดิม ::after ใช้ right:5px เทียบกับเส้นกว้าง 3px ที่วางไว้ที่ (needPct% - 1.5px)
   ขอบขวาของป้ายจึงอยู่ที่ needPct% - 3.5px — ชดเชยให้ตรงตำแหน่งเดิมเป๊ะ */
.needlb.flip{transform:translateX(-100%);margin-left:-3.5px}
.goallb{position:absolute;top:30px;right:0;font-size:10.5px;color:var(--ink-muted);white-space:nowrap}
.bar{position:absolute;top:2px;height:22px;left:0;right:0}
.seg{
  position:absolute;top:0;height:22px;
  border-top-right-radius:4px;border-bottom-right-radius:4px;
}
.seg.mid{border-radius:0}

/* สวัสดิการ = overlay · ขอบประบอกว่า "ก้อนนี้ไม่ติดตัวไป" (v3 ข้อ 6)
   ห้ามใช้คำว่า "ไม่นับ" หรือ "ตัดออก" ที่ไหน — มันเป็นของจริงที่มีอยู่ แค่ไม่ portable */
.seg.overlay{background:var(--s1);border:1px dotted var(--s1-edge)}
/* ก้อนแคบกว่า 6px เส้นประจะเหลือจุดสองสามจุด อ่านไม่ออกว่าเป็นขอบ → สลับเป็นทึบ
   ติดคลาสนี้จาก JS เพราะต้องวัดความกว้างจริงเป็น px · % บอกไม่ได้ รางกว้างไม่คงที่ */
.seg.overlay.tight{border-style:solid}

/* ยังไม่ทราบผู้ดูแล — ลายทแยง ไม่ใช่ hue ของตัวเอง
   เพราะ "ไม่รู้" ไม่ใช่แหล่งที่มา จึงไม่ควรได้สีเทียบเท่าแหล่งที่มาจริง */
.seg.unknown-custody{
  background:repeating-linear-gradient(45deg,
    var(--hatch-a) 0 4px, var(--hatch-b) 4px 8px);
}

/* OPD — วงเงินต่อครั้ง บวกข้ามแหล่งไม่ได้ จึงวาดเส้นขนานไม่ซ้อนกัน (v3 ข้อ 3)
   ไม่มีแถบสะสม ไม่มียอดรวม · แต่ละแหล่งเริ่มจากศูนย์เท่ากันหมด */
.lane{position:absolute;left:0;height:4px;border-radius:2px}
.lane.overlay{border:1px dotted var(--s1-edge);height:6px;background:var(--s1)}
.lane.unknown-custody{
  background:repeating-linear-gradient(45deg,
    var(--hatch-a) 0 4px, var(--hatch-b) 4px 8px);
}

/* ป้ายกำกับที่ต้องเดินทางไปกับตัวเลขเสมอ — ยอด medical ไม่ใช่เงินที่จะได้จริง */
.rv .cap{display:block;font-size:10.5px;color:var(--ink-muted);font-weight:400;margin-top:-1px}
/* บรรทัดรายแหล่งของ OPD — แทนที่ยอดรวมที่ไม่มีอยู่จริง */
.rv .src{display:block;font-size:11.5px;font-weight:400;color:var(--ink-2)}
.rv .src i{font-style:normal;color:var(--ink-muted);font-size:10.5px}
.over{
  position:absolute;top:2px;left:calc(100% - 14px);height:22px;width:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink-muted);
}
/* ต้องเป็น block — `text-align` ไม่มีผลกับเนื้อความของ element ที่เป็น inline
   มันจัดแนวได้แค่ block ลูก · ของเดิมเป็น inline ตัวเลขจึงชิดซ้ายอยู่ตัวเดียว
   ขณะที่บรรทัดล่างชิดขวา ห่างกันถึง 120px บน iPad แนวนอน
   เห็นชัดตอนเพิ่มป้าย "ขึ้นกับเงื่อนไข" ในขั้น 3 แต่เป็นของเดิมตั้งแต่ก่อนขั้น 2
   (ตรวจย้อนกับ a285719 และ 5aa6c6a แล้ว โครงกับกฎเหมือนกันทุกตัวอักษร) */
.rv{display:block;font-size:14px;text-align:right;white-space:nowrap;font-weight:550}
.rv .st{display:block;font-size:11.5px;font-weight:600;margin-top:1px}
.rv .pc{display:block;font-size:11px;color:var(--ink-muted);font-weight:400}
.rv .st.togo{color:var(--togo)}
.rv .st.reached{color:var(--reached)}
.rv .st.no{color:var(--crit)}
.rv .st.no2{color:var(--crit-soft);font-weight:400}
.rv .st b{font-weight:700}
.gapnote{margin-top:18px;font-size:12.5px;color:var(--ink-muted);border-top:1px solid var(--grid);padding-top:12px}

/* ---------- table ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--grid);white-space:nowrap}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
thead th{color:var(--ink-muted);font-weight:550;font-size:12px}
tbody tr:last-child td{border-bottom:none}
tfoot td{font-weight:650;border-top:1px solid var(--baseline)}

#editWrap th,#editWrap td{padding:8px 7px}
#editWrap td:first-child,#editWrap th:first-child{padding-left:2px}
input.cell{
  width:102px;text-align:right;
  background:var(--field);border:1px solid transparent;border-radius:7px;
  padding:7px 8px;min-height:40px;
}
input.cell:hover{border-color:var(--baseline)}
input.cell:focus{border-color:var(--s2);outline:none;background:var(--field-focus)}
th.editable{color:var(--ink-2)}
th.editable::after{content:" ✎";font-size:10px;color:var(--ink-muted)}
td.calc{color:var(--ink-2)}

details{margin-top:16px}
summary{
  cursor:pointer;list-style:none;padding:15px 20px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;font-weight:550;font-size:14px;
  display:flex;align-items:center;gap:10px;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸";color:var(--ink-muted);font-size:12px}
details[open] summary{border-radius:14px 14px 0 0;border-bottom:none}
details[open] summary::before{content:"▾"}
details .card{margin-top:0;border-radius:0 0 14px 14px}

.exrow{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.exrow .pf{flex:1;min-width:0}
.exrow .pf.note{flex:0 0 260px}
.exdel{
  background:none;border:1px solid var(--border);border-radius:var(--r);
  min-height:44px;min-width:44px;cursor:pointer;color:var(--crit);font-size:16px;
}
.exempty{color:var(--ink-muted);font-size:13px;margin-bottom:14px}

.banner{
  background:color-mix(in srgb,var(--warn) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--warn) 40%,var(--border));
  border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--ink-2);
  margin-bottom:16px;
}
.hide{display:none !important}


/* แถวเพิ่มกรมธรรม์ระหว่างคุยกับลูกค้า — ทุกช่องเว้นว่างได้ (incomplete ≠ invalid) */
.addpol{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.editnote{font-size:13px;color:var(--ink-muted)}
/* ช่องกรอกในตารางกรมธรรม์ — ว่าง = ยังไม่ระบุ ไม่ใช่ 0 (placeholder บอกไว้) */
.polin{
  font:inherit;width:100%;min-width:120px;padding:6px 8px;
  border:1px solid var(--border);border-radius:8px;
  background:var(--field);color:var(--ink)}
.polin:focus{background:var(--field-focus)}


/* ---------- แถวเครื่องมือข้อมูล ----------
   แยกจากแถวบนเพราะเป็นคนละงาน: แถวบน = งานกับลูกค้า · แถวนี้ = เครื่องมือข้อมูล */
/* ชิดขวาให้ตรงกับชุด picker / + คนใหม่ / ลบ ในแถวบน — อ่านเป็นกลุ่มเดียวกัน */
.toolrow{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap;padding-bottom:10px}
.grp{display:flex;align-items:center;gap:6px;padding:5px 8px 5px 10px;border-radius:12px}
.grp-name{font-size:12px;font-weight:650;letter-spacing:.3px;color:var(--ink);opacity:.75}
.grp .btn.tool{min-height:38px;padding:6px 12px;font-size:14px;color:var(--ink)}
.grp-xlsx{background:color-mix(in srgb,var(--tool-xlsx) 34%,var(--page));
  border:1px solid var(--tool-xlsx-edge)}
.grp-xlsx .btn.tool{background:var(--tool-xlsx);border-color:var(--tool-xlsx-edge)}
.grp-xlsx .btn.tool:active{background:var(--tool-xlsx-lo)}
.grp-bak{background:color-mix(in srgb,var(--tool-bak) 34%,var(--page));
  border:1px solid var(--tool-bak-edge)}
.grp-bak .btn.tool{background:var(--tool-bak);border-color:var(--tool-bak-edge)}
.grp-bak .btn.tool:active{background:var(--tool-bak-lo)}


/* ปุ่มบนแถวหลัก — สีวัด contrast ด้วยสคริปต์แล้ว พื้นอย่างเดียวตกเกณฑ์ขอบเขต จึงต้องมีขอบ */
#picker{background:var(--tool-pick);border-color:var(--tool-pick-edge);color:var(--ink)}
#btnDel{background:var(--tool-del);border-color:var(--tool-del-edge);color:var(--ink)}
#btnDel:active{background:var(--tool-del-lo)}

/* ทางลัดข้ามไปโลกเนื้อหา — สีของมันเอง เพราะไม่ได้อยู่ในกลุ่ม Excel หรือ Backup
   ⚠️ **ไม่เกี่ยวกับกฎห้ามใช้สีน้ำตาลในกราฟ** กฎนั้นบังคับกับ "สีของแหล่งที่มา"
   บนแถบความคุ้มครองเท่านั้น ปุ่มบนแถบเครื่องมือมีขอบโทนอุ่นอยู่แล้วหลายตัว */
.btn.tool-content{background:var(--tool-content);border-color:var(--tool-content-edge);
  color:var(--ink);font-weight:600}
/* กดแล้วเปลี่ยน "สีพื้น" ไม่ใช่ลด opacity — opacity ทำให้ทั้งตัวอักษรและขอบจางลงพร้อมกัน
   วัดแล้วตกทั้งคู่ (ตัวอักษร 4.19 · ขอบ 1.94) ส่วนวิธีนี้ขอบไม่ถูกแตะ จึงผ่านทุกสถานะ */
.btn.tool-content:active{background:var(--tool-content-lo)}
@media (hover:hover){ .btn.tool-content:hover{background:var(--tool-content-hi)} }
.btn.tool-content:focus-visible{outline:2px solid var(--togo);outline-offset:2px}


/* ---------- รายชื่อลูกค้า ----------
   ออกแบบจาก iPad เป็นหลัก · แนวนอนเป็นแถว · แนวตั้งยุบเป็นการ์ด
   แตะที่ไหนก็ได้ในแถวเพื่อเปิด ไม่ต้องเล็งปุ่มเล็ก */
.listbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.listbar input[type=search]{
  flex:1 1 260px;min-width:200px;font:inherit;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--field);color:var(--ink)}
.listbar select{padding:7px 10px;min-height:38px}
.clrow{
  display:grid;align-items:center;gap:10px;
  grid-template-columns:58px minmax(150px,1.5fr) 46px 116px 92px 104px minmax(130px,1.3fr) 62px 86px;
  padding:10px 8px;border-top:1px solid var(--grid);cursor:pointer}
.clrow:first-child{border-top:0}
.clrow:active{background:var(--zone-goal)}
.clname b{font-weight:650}
.clname span{color:var(--ink-muted);font-size:13px;display:block}
/* ช่องเลขลำดับอยู่ซ้ายสุด · เว้นระยะจากชื่อให้ชัด ไม่ให้อ่านรวมเป็นก้อนเดียวกับชื่อ */
.clord{display:flex;align-items:center;padding-right:8px;border-right:1px solid var(--grid)}
.clmove{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.clmove button{
  min-height:34px;min-width:34px;padding:0;line-height:1;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer}
.clhead{
  border-top:0;padding-bottom:6px;cursor:default;
  font-size:12px;font-weight:650;color:var(--ink-2);letter-spacing:.2px}
.clhead:active{background:transparent}
/* ชื่อลูกค้าที่ติดกับแถบบน — อยู่ในแถบเดียวกับปุ่ม จึง sticky ไปด้วยเอง */
.whobar{margin-right:auto;display:flex;align-items:baseline;gap:8px;
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.whobar b{font-size:16px;font-weight:650}
.whobar span{color:var(--ink-muted);font-size:14px}
.clord button{
  min-height:32px;min-width:32px;padding:0;line-height:1;border-radius:8px;
  border:1px solid var(--border);background:var(--surface);cursor:pointer}
.clord input{width:46px;padding:5px 6px;text-align:center;font:inherit;
  border:1px solid var(--border);border-radius:8px;background:var(--field);color:var(--ink)}
.clnext input{width:100%;font:inherit;padding:7px 9px;
  border:1px solid var(--border);border-radius:8px;background:var(--field);color:var(--ink)}
.clstage{font-size:13px;padding:3px 8px;border-radius:999px;background:var(--zone-goal);
  border:1px solid var(--grid);white-space:nowrap;display:inline-block}
.clempty{padding:24px 8px;color:var(--ink-muted)}
/* จอแคบ (iPad แนวตั้ง) — เปลี่ยนจาก grid เป็น flex ให้ของไหลต่อกันในบรรทัดเดียวกัน
   ถ้าปล่อยเป็น grid มันจะวางของทีละชิ้นต่อแถว แล้วการ์ดสูงเกิน 250px ต่อคน */
@media (max-width:900px){
  .clrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:12px 8px}
  /* ⚠️ ต้องตั้ง order ให้ทุกชิ้น ไม่งั้นชิ้นที่ไม่ได้ตั้งจะเป็น 0 แล้วแซงขึ้นหน้าชื่อ */
  .clrow>*{order:5;font-size:14px}
  .clord{order:1;border-right:0;padding-right:4px}
  .clname{order:2;flex:1 1 55%}
  .clmove{order:8}
  .clnext{order:9;flex:1 1 100%}
  .clhead{display:none}          /* จอแคบเป็นการ์ด ไม่ใช่ตาราง หัวตารางจึงไม่มีความหมาย */
}

/* ============================================================
   CONTENT LIBRARY + PRESENTATION MODE  (27 ส.ค. 2569)
   ============================================================ */

.libhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.libhead>div{flex:1}
.libhead .sub{margin:4px 0 0}

.liblist{display:flex;flex-direction:column;gap:2px}

/* แถวหัวข้อ — เป็น <label> ทั้งแถว กดตรงไหนก็ติ๊กได้
   สำคัญบน iPad: เป้ากดต้องใหญ่กว่าตัว checkbox เอง */
.librow{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer}
.librow:hover{background:var(--zone-goal)}
.librow.on{background:var(--zone-goal);border-color:var(--baseline)}
.librow.off{cursor:default;opacity:.55}
.librow.off:hover{background:none}
.libck{width:20px;height:20px;flex:none;accent-color:var(--s2)}
.libt{flex:1;font-weight:550;line-height:1.35}
.libt small{display:block;font-weight:400;color:var(--ink-2);margin-top:2px}
.libn{flex:none;color:var(--ink-2);font-size:.9em}
.libn.none{color:var(--ink-muted);font-style:italic}

.libbar{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--grid)}
/* ปุ่มหลักของหน้านี้ — พื้นเดียวกับ picker ที่วัด contrast ไว้แล้ว (ดำบนพื้นนี้ 12.13)
   ไม่ได้สร้างสีใหม่ จึงไม่ต้องวัดรอบใหม่ */
.btn.primary{background:var(--tool-pick);border-color:var(--tool-pick-edge);font-weight:650}
.btn.primary:disabled{opacity:.45;cursor:default}

/* ---------- โหมดนำเสนอ ----------
   เต็มจอด้วย CSS ล้วน (position:fixed) **ไม่พึ่ง Fullscreen API**
   เพราะ Safari บน iPad ไม่รับประกันว่ามี API นั้นให้ · ปุ่ม "เต็มจอ" เป็นของแถม
   ที่ซ่อนตัวเองถ้าเบราว์เซอร์ไม่รองรับ ไม่ใช่เงื่อนไขให้โหมดนี้ทำงาน */
.present{position:fixed;inset:0;z-index:90;background:var(--page);
  display:flex;flex-direction:column}
.pstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:12px;padding-top:max(12px,env(safe-area-inset-top))}
/* `contain` — ห้าม crop เนื้อหาที่เจ้าของทำมา ต่อให้สัดส่วนไม่พอดีจอ */
.pstage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pbar{flex:none;display:flex;align-items:center;gap:10px;
  padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));
  border-top:1px solid var(--grid);background:var(--surface)}
.pbar .spacer{flex:1}
.ptopic{color:var(--ink-2);font-weight:550;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:38vw}
.pcount{color:var(--ink-2);font-variant-numeric:tabular-nums}
.pbar .btn:disabled{opacity:.35;cursor:default}

/* iPad แนวตั้ง — แถบล่างขึ้นบรรทัดใหม่แทนที่จะบีบปุ่มจนกดไม่โดน */
@media (max-width:820px){
  .ptopic{max-width:100%;order:5;flex-basis:100%}
  .pbar{flex-wrap:wrap}
}


/* ============================================================
   หน้าแรก — ตอบคำถามเดียวว่า "วันนี้จะเข้ามาทำอะไร"
   สองทาง ไม่มีอย่างที่สาม · ไม่มีเครื่องมือ ไม่มีการตั้งค่า
   ============================================================ */
/* จัดกลางแนวตั้งในพื้นที่ที่เหลือ — ถ้าปล่อยชิดบน สองใบจะลอยอยู่หัวจอที่ว่างทั้งหน้า
   แล้วอ่านเป็น "หน้าที่ยังทำไม่เสร็จ" มากกว่า "ประตูสองบาน"
   `dvh` เผื่อ Safari ที่แถบเครื่องมือยืดหดได้ · ตกกลับ `vh` ถ้าเบราว์เซอร์ไม่รู้จัก */
#home{display:flex;align-items:center;min-height:calc(100vh - 170px);min-height:calc(100dvh - 170px)}
.homegrid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);width:100%}
/* จอแคบ (iPad แนวตั้ง / มือถือ) เรียงลงแนวตั้ง — ไม่บีบให้เหลือครึ่งจนแตะยาก */
@media (max-width:760px){ .homegrid{grid-template-columns:1fr} }

/* เป็น <button> ทั้งใบ ไม่ใช่การ์ดที่มีปุ่มอยู่ข้างใน — ทั้งใบคือเป้าแตะ */
.homecard{
  display:flex;flex-direction:column;gap:8px;text-align:left;
  min-height:180px;padding:26px;font:inherit;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:16px}
.homecard b{font-size:22px;font-weight:700;line-height:1.25}
.homecard small{font-size:15px;font-weight:400;color:var(--ink-2);line-height:1.5}
.homecard:active{background:var(--zone-goal)}
.homecard:focus-visible{outline:2px solid var(--togo);outline-offset:2px}
@media (hover:hover){ .homecard:hover{border-color:var(--baseline)} }

/* ใบเนื้อหาใช้สีเดียวกับปุ่มทางลัด เพื่อให้จำได้ว่า "สีนี้คือโลกเนื้อหา" */
.homecard.hc-content{background:color-mix(in srgb,var(--tool-content) 34%,var(--page));
  border-color:var(--tool-content-edge)}
.homecard.hc-content:active{background:var(--tool-content-hi)}
@media (hover:hover){ .homecard.hc-content:hover{background:color-mix(in srgb,var(--tool-content) 50%,var(--page))} }

/* แถบแจ้งรุ่นใหม่ — เล็ก ไม่ขวางทาง ปิดตัวเองเมื่อไม่มีอะไรให้แจ้ง */
.swbar{position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(14px,env(safe-area-inset-bottom));z-index:120;
  display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--baseline);
  box-shadow:0 6px 20px rgba(11,11,11,.14)}
.swbar span{font-weight:550}