/* ═══════════════════════════════════════════════════════════════════════════════════════════
   wf-theme-arc.css — ธีม "Quiet Graphite" (ภาษาออกแบบเดียวกับ NVK ARC /arc/assets/arc.css) สำหรับแอปหลัก wi-fire.com
   NVK-ARCTHEME · LIVE 2026-10-08 · ต้นร่าง docs/wifire-redesign-2026-10/

   วิธีใช้: เป็น "ชั้นบน" ของ wf.css — ไม่แตะ HTML/JS ของแอปเลยสักบรรทัด
     <link rel="stylesheet" href="wf.css?v=…">
     <link rel="stylesheet" href="wf-theme-arc.css?v=…">     ← บรรทัดเดียวที่ต้องเพิ่มใน index.html (ต้องอยู่หลัง wf.css)
   ถอดออก = ลบบรรทัดนั้น (rollback ทันที ไม่มีอะไรค้าง)

   หลักของ ARC ที่ยกมา (arc.css บรรทัด 1–8):
     ① หน้าจอปกติเป็นสีกลาง ≥95% — สีมีไว้บอก "สถานะผิดปกติ/ต้องลงมือ" เท่านั้น (ok / warn / bad)
     ② สีเน้นของการโต้ตอบมีสีเดียวคือ "หมึก" — ปุ่มหลัก = แคปซูลดำตัวขาว (โหมดมืด = แคปซูลขาวตัวดำ) · focus ring หมึก 2px
     ③ สีแบรนด์ (ส้มแดง Wi-Fire) ใช้กับโลโก้เท่านั้น ไม่ใช่สีปุ่ม/สถานะ
     ④ เส้นเป็น "เส้นผม" โปร่งแสง (rgba) ไม่ใช่สีทึบ — จึงเข้ากับทั้งพื้นขาวและพื้นเทา
     ⑤ ตัวเลขเรียงหลัก (tabular-nums) ทุกที่ · Archivo + Noto Sans Thai + IBM Plex Mono
     ⑥ มุมโค้งชุดเดียว 4/8/12/16/999 · การเคลื่อนไหว 70–240ms เส้นโค้งเดียว

   ⚠️ กับดักที่ต้องรู้ก่อนแก้ไฟล์นี้
     • source order (memory css-source-order-trap): ไฟล์นี้โหลด "หลัง" wf.css จึงชนะกฎ specificity เท่ากันทุกตัว
       รวมถึงกฎมือถือ @media(max-width:820px) ของ wf.css → กฎที่ไม่มี @media ในไฟล์นี้ "ห้ามตั้งขนาด" (padding/height/font-size)
       ขนาดทั้งหมดอยู่ในบล็อก @media (min-width:821px) ข้อ 14 · บล็อกมือถือข้อ 15 ต้องอยู่ "ท้ายสุด" เสมอ
     • button.on แดงบนดำ (memory newcrm-tab-red-on-dark): ทุกสถานะ .on ในไฟล์นี้ตั้ง background เอง และไม่มีตัวแดงบนพื้นดำ
       แบบที่ Ricky รับ = ดำ/ขาว หรือ พื้นอ่อน+ตัวเข้ม
     • ARC ห้ามโหลด wf.css (คลาส .card/.btn ชน) — กลับกัน ไฟล์นี้ก็ "ห้ามโหลดในหน้า ARC" เช่นกัน
     • ไฟล์นี้ใช้ color-mix() (Chrome 111+/Safari 16.2+) ทุกจุดมีค่าสำรองบรรทัดก่อนหน้า
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0. ฟอนต์ — ชุดเดียวกับ ARC (research/08-design-language.md §4 คู่ A) ──
   เหตุผลที่เปลี่ยนจาก Sarabun + Bai Jamjuree: UI แอปเป็นภาษาอังกฤษแล้ว (DEC-0130 ข้อ 5) ตัวละตินจึงเป็นตัวหลัก
   Archivo มี tnum/zero/lnum ให้ตัวเลขเงินเรียงหลักตรง · Noto Sans Thai ไม่มีหัว เข้ากับ Archivo · Plex Mono คงเดิมสำหรับ SKU/เลขเอกสาร
   (ทางที่ดีกว่า @import: เพิ่ม family เหล่านี้ใน <link> Google Fonts เดิมของ index.html แล้วลบบรรทัดนี้ — ประหยัด 1 รอบโหลด) */
/* ฟอนต์โหลดจาก <link> Google Fonts ใน index.html แล้ว (NVK-ARCTHEME) — ไม่ @import ซ้ำ */

/* ═════════════ 1. TOKENS ═════════════
   ชื่อตัวแปรเดิมของ wf.css ทั้ง 19 ตัว "คงชื่อเดิม เปลี่ยนค่า" → กฎเดิม 457 จุดที่ใช้ var() ได้หน้าตาใหม่ทันที
   ตัวแปรใหม่ (--bg3 --line3 --hover ฯลฯ) ยกจาก arc.css บรรทัด 11–70 */
:root{
  /* พื้น / ผิว — ARC light (arc.css:47) */
  --bg:#F4F4F2;  --paper:#FFFFFF;  --bg3:#EDEDED;  --bg4:#E2E2E0;
  --card:var(--paper); --surface:var(--bg);            /* wf.css/index.html ใช้ 2 ตัวนี้แต่ไม่เคยประกาศ → ตกไปที่ #fff ในโหมดมืด */
  /* หมึก */
  --ink:#181818; --ink2:#5E5E5E; --ink3:#666666; --ink-inv:#FFFFFF;
  /* เส้นผม (rgba ของหมึก) */
  --line:rgba(24,24,24,.10); --line2:rgba(24,24,24,.18); --line3:rgba(24,24,24,.30);
  --line-field:#8A8A8A;                                 /* ขอบช่องกรอก 3.45:1 บนขาว (WCAG 1.4.11) — ของเดิม #C7CDC8 = 1.62:1 ไม่ผ่าน */
  /* การโต้ตอบ = หมึก */
  --acc:#181818; --acc-soft:#EDEDED;                    /* เดิม teal #0F6E63 — ARC ไม่มีสีเน้นที่ไม่ใช่สถานะ */
  --focus:#181818; --hover:rgba(24,24,24,.04); --press:rgba(24,24,24,.07); --sel:rgba(24,24,24,.14);
  --btn-pri-hover:#000000; --field-bg:#FAFAF9;
  /* แบรนด์ — คงค่าเดิม ใช้ได้กับโลโก้เท่านั้น */
  --brand:#CB4319; --brand-soft:#FBE8E1;
  /* สถานะ: --x = ตัวหนังสือ/ไอคอน (≥4.5:1 บนขาว) · --x-soft = พื้นป้าย · --x-solid = จุด/แถบ */
  --ok:#00704A;   --ok-soft:#E0F3EB;   --ok-solid:#00875A;
  --warn:#9A5B00; --warn-soft:#FDF3DC; --warn-solid:#A87000;   /* amber เป็นเส้น/จุดบนขาวต้องเข้ม (ARC trouble-mark) */
  --bad:#B42318;  --bad-soft:#FDE7E5;  --bad-solid:#D92D20;
  --sap:#0B5F9A;  --sap-soft:#E3F0FA;                  /* ฟ้า = ARC offline · ใช้เฉพาะคู่มือ (ตามเดิม) */
  --star:#B07A00;                                       /* ดาวติดตาม 3.7:1 (เดิม #E6A700 = 2.0:1) */
  /* แถบข้าง — มืดเสมอทั้งสองธีม (ARC rail dark · arc.css:12–15) */
  --side-bg:#0B0B0D; --side-ink:#F5F3F1; --side-ink2:#AAA49E; --side-ink3:#948E88;
  --side-line:rgba(245,243,241,.08); --side-line2:rgba(245,243,241,.16);
  --side-hover:rgba(245,243,241,.045); --side-on:#202026; --side-badge:#2A2A31;
  /* ลอย / กระจก / เงา */
  --scrim:rgba(24,24,24,.28); --glass:rgba(255,255,255,.78); --glass-strong:rgba(255,255,255,.92);
  --shadow-1:0 1px 2px rgba(0,0,0,.04);
  --shadow-float:0 1px 2px rgba(0,0,0,.06),0 8px 24px -8px rgba(0,0,0,.14);
  /* ตัวอักษร */
  --font-sans:'Archivo','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono','Noto Sans Thai',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* มุม / เวลา (arc.css:39–42) */
  --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-pill:999px;
  --dur-1:70ms; --dur-2:110ms; --dur-3:150ms; --dur-4:240ms;
  --ease:cubic-bezier(.2,0,.38,.9); --ease-in:cubic-bezier(0,0,.38,.9);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:light;
}
/* โหมดมืด = ARC dark (arc.css:11–20) · โครง 3 ทางเหมือน wf.css: ตามระบบ / บังคับมืด / บังคับสว่าง(ไม่ต้องเขียน) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B0B0D; --paper:#111114; --bg3:#202026; --bg4:#2A2A31;
  --ink:#F5F3F1; --ink2:#AAA49E; --ink3:#948E88; --ink-inv:#0B0B0D;
  --line:rgba(245,243,241,.08); --line2:rgba(245,243,241,.16); --line3:rgba(245,243,241,.26); --line-field:rgba(245,243,241,.36);
  --acc:#F5F3F1; --acc-soft:#202026; --focus:#F5F3F1;
  --hover:rgba(245,243,241,.045); --press:rgba(245,243,241,.08); --sel:rgba(245,243,241,.22);
  --btn-pri-hover:#FFFFFF; --field-bg:#18181C;
  --brand:#E8623A; --brand-soft:#3A241C;
  --ok:#4FD6A3; --ok-soft:#132722; --ok-solid:#22C58B;
  --warn:#FFC24A; --warn-soft:#2E261A; --warn-solid:#FFC24A;
  --bad:#FF6A5F; --bad-soft:#321718; --bad-solid:#FF3B2F;
  --sap:#7CC6EF; --sap-soft:#1A2630; --star:#FFC24A;
  --scrim:rgba(4,4,6,.62); --glass:rgba(11,11,13,.72); --glass-strong:rgba(17,17,20,.88);
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset; --shadow-float:0 18px 40px -12px rgba(0,0,0,.8);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23948e88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0B0B0D; --paper:#111114; --bg3:#202026; --bg4:#2A2A31;
  --ink:#F5F3F1; --ink2:#AAA49E; --ink3:#948E88; --ink-inv:#0B0B0D;
  --line:rgba(245,243,241,.08); --line2:rgba(245,243,241,.16); --line3:rgba(245,243,241,.26); --line-field:rgba(245,243,241,.36);
  --acc:#F5F3F1; --acc-soft:#202026; --focus:#F5F3F1;
  --hover:rgba(245,243,241,.045); --press:rgba(245,243,241,.08); --sel:rgba(245,243,241,.22);
  --btn-pri-hover:#FFFFFF; --field-bg:#18181C;
  --brand:#E8623A; --brand-soft:#3A241C;
  --ok:#4FD6A3; --ok-soft:#132722; --ok-solid:#22C58B;
  --warn:#FFC24A; --warn-soft:#2E261A; --warn-solid:#FFC24A;
  --bad:#FF6A5F; --bad-soft:#321718; --bad-solid:#FF3B2F;
  --sap:#7CC6EF; --sap-soft:#1A2630; --star:#FFC24A;
  --scrim:rgba(4,4,6,.62); --glass:rgba(11,11,13,.72); --glass-strong:rgba(17,17,20,.88);
  --shadow-1:0 1px 0 rgba(255,255,255,.03) inset; --shadow-float:0 18px 40px -12px rgba(0,0,0,.8);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23948e88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ═════════════ 2. BASE ═════════════ */
body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* ฟอนต์ที่ wf.css ฮาร์ดโค้ด "Bai Jamjuree"/"Sarabun" ไว้ 29 กฎ → ชี้กลับมาที่ตัวแปรเดียว (selector เดียวกัน มาทีหลัง = ชนะ) */
h1,h2,h3,.brand,label,.btn,.nav a,.chip,.tile .v,.tile .k,th,.stages button,.tabs button,.vtabs button,.steps span,
.loopbar b,.nvkline b,.fcode,.tw table[data-resp="1"] td::before,
.manpage .mband h1,.manpage .mtabs button,.manpage .mtopic>header h2,.manpage .mtopic h3,.manpage .mtw th,.manpage .mnote .mk,
.manpage .mcard h4,.manpage .mchip{font-family:var(--font-sans)}
.manpage .mfig svg text,.manpage .mfig svg .b,.manpage .mfig svg .lanel{font-family:var(--font-sans)}
/* mono 17 กฎเดิมคงไว้ — แค่ให้ไทยในช่อง mono ตกไป Noto ไม่ใช่ฟอนต์ระบบ */
.mono{font-family:var(--font-mono)}
h1,h2,h3{font-weight:600;letter-spacing:-.005em}
/* ตัวเลขเรียงหลักทุกที่ที่เป็นตัวเลข (Archivo มี tnum) */
.num,.mono,td.num,.tile .v,.nav a .k,.vtabs button .n,.chip{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
::selection{background:var(--sel);color:var(--ink)}
/* scrollbar เทาบาง (arc.css:97–103) */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line3);border:3px solid transparent;background-clip:padding-box}
/* focus ring หมึก 2px — selector ชุดเดียวกับ wf.css:167 */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,tr.click:focus-visible,.tile.click:focus-visible,.card-p:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* ลิงก์: สีหมึก + ขีดเส้นผม (ARC .link) — เดิมเป็น teal */
a{color:var(--ink)}
.main a:not([class]){text-decoration:underline;text-decoration-color:var(--line3);text-decoration-thickness:1px;text-underline-offset:3px}
.main a:not([class]):hover{text-decoration-color:currentColor}
.muted{color:var(--ink3)}
.err{color:var(--bad)} .info{color:var(--ink2)}

/* ═════════════ 3. แถบข้าง (shell) — มืดแบบ ARC rail ทั้งสองธีม ═════════════
   เดิมฮาร์ดโค้ด #1E2622/#DDE3DF/#C7CFCA/rgba(255,255,255,…) 10 จุด → token --side-* */
.side{background:var(--side-bg);color:var(--side-ink2);border-right:1px solid var(--side-line)}
.side .brand{color:var(--side-ink)}
.nav a{position:relative;color:var(--side-ink3);font-weight:500;border-radius:var(--r-2);transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.nav a:hover{background:var(--side-hover);color:var(--side-ink)}
.nav a.on{background:var(--side-on);color:var(--side-ink)}
.nav a.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--side-ink)}  /* แถบหมึกซ้าย = ARC rail aria-current */
/* ตัวนับบนเมนู: ป้ายขาวตัวดำ (ไม่ใช่ส้ม/แดง) — เห็นชัด ไม่ตะโกน · ไม่มีแดงบนดำ */
.nav a .k{background:var(--side-ink);color:var(--side-bg);font-weight:700;font-size:11px;min-width:18px;height:18px;line-height:18px;padding:0 6px;text-align:center;border-radius:var(--r-pill)}
.side .me{border-top-color:var(--side-line);color:var(--side-ink3)}
.side .me b{color:var(--side-ink)}
.side .muted,.side .small{color:var(--side-ink3)}
.side .me .btn{background:transparent;color:var(--side-ink2);border-color:var(--side-line2)}
.side .me .btn:hover{background:var(--side-hover);color:var(--side-ink);border-color:var(--side-line2)}
.side .me a{color:var(--side-ink2)}
.mnav{border-color:var(--side-line2);color:var(--side-ink);border-radius:var(--r-2)}
.side.open .nav,.side.open .me{border-top-color:var(--side-line)}

/* ═════════════ 4. หัวหน้า (page head) ═════════════ */
.top h1{font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.top .sub{color:var(--ink2)}

/* ═════════════ 5. พื้นผิว: panel / tile / card ═════════════ */
.panel{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.panel h2{font-weight:600;letter-spacing:0;color:var(--ink)}
.panel h2 .muted{color:var(--ink3)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-4);box-shadow:var(--shadow-1)}
.card-p{background:var(--paper);border:1px solid var(--line);transition:border-color var(--dur-2) var(--ease)}
.card-p:hover{border-color:var(--line3)}
/* tile = ARC KPI: ป้ายชื่ออยู่บน ตัวเลขใหญ่ตรงกลาง คำอธิบายล่าง — สลับลำดับด้วย flex order ไม่ต้องแก้ HTML */
.tile{display:flex;flex-direction:column;position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0;transition:border-color var(--dur-2) var(--ease)}
.tile .k{order:-1;color:var(--ink2);font-weight:500;letter-spacing:0;margin:0 0 6px}
.tile .v{font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.tile .s{color:var(--ink3);margin-top:4px}
.tile.click:hover{border-color:var(--line3)}
.tile .v .bad,.tile .v.bad,td .bad{color:var(--bad)}
/* ช่องสุดท้ายของงบบริหาร (CFO): เดิมกรอบ teal+พื้นเขียว → ARC: แถบหมึกซ้าย 3px บนการ์ดเรียบ */
.tiles.mgmt .tile:last-child{border-color:var(--line);background:var(--paper)}
.tiles.mgmt .tile:last-child::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--ink)}
/* stage rail ของหน้าโครงการ: ขั้นที่เลือก = ขีดล่างหมึก (เดิมส้มแบรนด์) */
.stages button{background:var(--paper);border-color:var(--line);color:var(--ink2);font-weight:600;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.stages button:hover{border-color:var(--line3)}
.stages button .n{color:var(--ink3);font-weight:500}
.stages button.on{background:var(--paper);border-color:var(--ink);color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.stages button.now::after{color:var(--ok-solid)}
.selbar{background:var(--bg3);border-color:var(--line2);border-radius:var(--r-3)}
.empty{color:var(--ink3)}
.kv dt{color:var(--ink3)}

/* ═════════════ 6. ปุ่ม — แคปซูลแบบ ARC (arc.css:176–208) ═════════════ */
.btn{border-radius:var(--r-pill);background:var(--bg3);color:var(--ink);border:1px solid var(--line);font-weight:500;letter-spacing:0;justify-content:center;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.btn:hover{background:var(--bg4);border-color:var(--line2)}
.btn:active{transform:translateY(.5px)}
/* ปุ่มหลัก + ปุ่มเงิน (.acc) = แคปซูลหมึก — เดิมส้มแบรนด์ (#fff บน #E8623A ในโหมดมืด = 3.37:1 ไม่ผ่าน AA) */
.btn.primary,.btn.acc{background:var(--ink);border-color:transparent;color:var(--ink-inv);font-weight:600}
.btn.primary:hover,.btn.acc:hover{background:var(--btn-pri-hover);border-color:transparent}
/* ปุ่มลบ ≠ เหตุร้าย: แคปซูลกลาง ตัวแดง · พื้นแดงอ่อนเฉพาะตอนชี้ (ARC .btn-danger) */
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line2)}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.gbtn{border-radius:var(--r-pill);border-color:var(--line2);background:var(--paper);color:var(--ink)}
.gbtn:hover{background:var(--hover)}
.dd>.btn{letter-spacing:.06em}

/* ═════════════ 7. ช่องกรอก ═════════════ */
label{color:var(--ink2);font-weight:500;letter-spacing:0}
/* :where() = specificity 0 → กฎเฉพาะของ table.lines (เซลล์ Excel) ยังชนะเสมอ */
input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color])),select,textarea{
  background-color:var(--field-bg);color:var(--ink);border:1px solid var(--line-field);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
input:where(:not([type=checkbox],[type=radio],[type=file])):hover,select:hover,textarea:hover{border-color:var(--ink3)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--ink2)}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:1}
/* ลูกศร select แบบ ARC — ยกเว้นในตารางแก้ไข (ช่องแคบ 104px ลูกศรจะทับตัวหนังสือ) */
select:not([multiple]):not(table.lines select){appearance:none;-webkit-appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 9px center;background-size:15px;padding-right:30px}
select option{background:var(--paper);color:var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
/* ตารางแก้ไข (wf.css NVK-DENSE/BOMXL): ฮาร์ดโค้ด #fff/#FAFBFA/#F1F2F0 → token (โหมดมืดเคยเป็นกล่องขาว) */
table.lines td>input:hover,table.lines td>select:hover{background:var(--paper);border-color:var(--line2)}
table.lines td>input:focus,table.lines td>select:focus{background:var(--paper);border-color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px}
table.lines tbody tr:hover>td{background:var(--hover)}
table.lines.xl td{border-right-color:var(--line)}
table.lines.xl tbody tr:hover>td{background:var(--hover)}
table.lines.xl td>input:hover,table.lines.xl td>select:hover,table.lines.xl td>input:focus,table.lines.xl td>select:focus{background:var(--paper)}

/* ═════════════ 8. ป้าย (chip) — สี = สถานะเท่านั้น ═════════════
   เดิม: chip ทุกตัวพื้น teal (246 จุดในแอป) → หน้าจอเต็มไปด้วยสี · ใหม่ (ARC .pill arc.css:522–560):
     .chip         = กลาง (พื้นเทา ตัวหมึก)      — "สถานะปกติที่กำลังเดิน" เช่น Ordered (SAP)
     .chip.grey    = เงียบ (ขอบเส้นผม ตัวเทา)     — Draft / Closed / ไม่มีกำหนด
     .chip.brand   = ใหม่/เด่น (ขอบเข้ม ตัวหนา)   — หมุดหมาย · บทบาท
     .chip.ok/.warn/.bad = พื้นอ่อน + ตัวเข้ม + จุดสี (สี + รูปทรง + ข้อความ — ไม่พึ่งสีอย่างเดียว · ตาบอดสีอ่านได้) */
.chip{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;line-height:1.35;border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--bg3);color:var(--ink);font-weight:500;letter-spacing:0}
.chip.grey{background:transparent;color:var(--ink2);border-color:var(--line2)}
.chip.brand{background:transparent;color:var(--ink);border-color:var(--line3);font-weight:600}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft);border-color:color-mix(in srgb,var(--ok-solid) 30%,transparent)}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft);border-color:color-mix(in srgb,var(--warn-solid) 32%,transparent)}
.chip.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-soft);border-color:color-mix(in srgb,var(--bad-solid) 40%,transparent)}
.chip.ok::before,.chip.warn::before,.chip.bad::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.kchips .chip{border-color:transparent}
.kchips .chip.grey{border-color:var(--line2)}
.kchips .chip:hover{border-color:var(--line3)}
/* ป้ายบทบาทในแถบข้างมืด — ขอบบาง ตัวเทาอ่อน (ต้องอยู่หลัง .chip.brand) */
.side .chip,.side .chip.brand{background:transparent;color:var(--side-ink2);border-color:var(--side-line2);font-weight:500}
/* สัญญาณ / ขั้น / loop — เดิมพื้น #EEF0EE ฮาร์ดโค้ด (โหมดมืด: ตัวเทาอ่อนบนพื้นขาว 1.68:1) */
.sig{background:var(--bg3);color:var(--ink2)}
.sig.warn{background:var(--warn-soft);color:var(--warn)} .sig.bad{background:var(--bad-soft);color:var(--bad)} .sig.ok{background:var(--ok-soft);color:var(--ok)}
.steps span{background:var(--bg3);color:var(--ink3);font-weight:500}
.steps span.done{background:var(--ok-soft);color:var(--ok)}
.steps span.now{background:var(--ink);color:var(--ink-inv);font-weight:600}
.lstep{background:var(--bg3)}
.lstep.ok{background:var(--ok-soft);color:var(--ok)}
.lstep.now{background:var(--ink);color:var(--ink-inv)}
.loopbar u{color:var(--line3)}
.nfile{background:var(--bg3);color:var(--ink2)}
.fcode{background:var(--paper)}
.urole{background:var(--paper);border-color:var(--line2);border-radius:var(--r-pill)}
.urole.on{background:var(--bg3);border-color:var(--ink);color:var(--ink)}
/* ดาว */
.star{color:var(--ink3)} .star.on,.star:hover{color:var(--star)}
/* toggle ของหน้าเงิน: เดิม color:#fff บน var(--ink) → โหมดมืดเป็นขาวบนขาว */
.mv-tg button.on{background:var(--ink);color:var(--ink-inv)}
/* จุดสถานะ (SAP worker online/offline) = ARC .hdot มีวงรัศมี */
.dot{background:var(--ok-solid);box-shadow:0 0 0 3px var(--ok-soft);margin-right:8px}
.dot.off{background:var(--bad-solid);box-shadow:0 0 0 3px var(--bad-soft)}
/* แถบความคืบหน้า: ราง = เส้นผม · ปลายมน */
.prog{background:var(--line);border-radius:var(--r-pill)}
.prog i{border-radius:inherit}
.stk{background:var(--paper);border-color:var(--line)}
.stk.on{background:var(--bg3);border-color:var(--ink)}
.stk .bar{background:var(--line)}

/* ═════════════ 9. แท็บ ═════════════ */
/* แท็บเส้น (ARC .tab arc.css:257–263): ตัวเทา → เลือกแล้วตัวหมึก + ขีดล่างหมึก 2px (เดิมขีดส้มแบรนด์) · พื้นใสเสมอ */
.tabs{border-bottom-color:var(--line)}
.tabs .tsep{background:var(--line2)}
.tabs button{background:transparent;color:var(--ink3);font-weight:500;letter-spacing:0;transition:color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:transparent;color:var(--ink);border-bottom-color:var(--ink)}
.tabs button.sidetab{color:var(--ink3)}
/* แท็บมุมมอง (.vtabs) = ARC chip ตัวกรอง: เลือกแล้ว = แคปซูลดำตัวขาว (แบบที่ Ricky รับ) */
.vtabs button{background:transparent;border:1px solid var(--line2);color:var(--ink2);font-weight:500;letter-spacing:0}
.vtabs button:hover{background:var(--hover);color:var(--ink);border-color:var(--line3)}
.vtabs button.on{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}
.vtabs button .n{color:var(--ink3)}
.vtabs button.on .n{color:var(--ink-inv);opacity:.7}

/* ═════════════ 10. ตาราง (ARC .tbl arc.css:626–700) ═════════════ */
th{color:var(--ink3);font-weight:500;letter-spacing:0;border-bottom-color:var(--line2)}
th,td{border-bottom-color:var(--line)}
td{color:var(--ink)}
tr.click td{transition:background var(--dur-2) var(--ease)}
tr.click:hover td{background:var(--hover)}
tr.sel td{background:var(--bg3)}
tr.loop td{background:var(--bg)}
tfoot th{background:var(--bg);border-top-color:var(--line2);color:var(--ink)}
/* แถวเตือน: พื้นอำพันจาง 6–8% (ARC unacked wash) — เดิม #fff8e6/#FFFBF0/#FBF3E6 ฮาร์ดโค้ด */
tr.vwarn td,table.omt tr.omdiff>td,.cf-over td{background:var(--warn-soft);background:color-mix(in srgb,var(--warn-solid) 8%,transparent)}
.tl-row.now td{background:var(--bg3)}
.tw table[data-resp="1"] tr{background:var(--paper);border-color:var(--line)}
.tw table[data-resp="1"] td::before{color:var(--ink3);font-weight:500;letter-spacing:0}

/* ═════════════ 11. ลอย: modal / dropdown / suggest / toast ═════════════ */
@keyframes wf-fade{from{opacity:0}to{opacity:1}}
@keyframes wf-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes wf-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal{background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:wf-fade var(--dur-4) var(--ease-in)}
.modal .card{background:var(--paper);border-color:var(--line2);box-shadow:var(--shadow-float);animation:wf-pop var(--dur-4) var(--ease-in)}
.ddm{background:var(--paper);border-color:var(--line2);border-radius:var(--r-3);box-shadow:var(--shadow-float);padding:6px}
.ddm button,.ddm a{border-radius:var(--r-2);color:var(--ink)}
.ddm button:hover,.ddm a:hover{background:var(--hover)}
.ddm .sep{background:var(--line)}
.ddm .hd{color:var(--ink3);letter-spacing:.08em}
.ddm .danger{color:var(--bad)}
.sug{background:var(--paper);border-color:var(--line2);border-radius:var(--r-3);box-shadow:var(--shadow-float)}
.sug div:hover{background:var(--hover)}
.sug small{color:var(--ink3)}
/* toast = การ์ดลอย + แถบสีซ้าย 3px (ARC .toast arc.css:782–797) — เดิมกล่องดำ #1E2622
   ต่างจาก ARC 1 จุด: ใช้พื้นทึบ var(--paper) ไม่ใช่กระจก — ทดสอบ 375px แล้วตัวหนังสือในตารางข้างใต้ทะลุขึ้นมาอ่านยาก */
.toast{background:var(--paper);color:var(--ink);border:1px solid var(--line2);
  box-shadow:var(--shadow-float);overflow:hidden;animation:wf-toast-in var(--dur-4) var(--ease-in)}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink)}
.toast.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-soft);border-color:color-mix(in srgb,var(--bad-solid) 40%,transparent)}
.toast.bad::before{background:var(--bad-solid)}

/* ═════════════ 12. ของเฉพาะหน้า ที่ฮาร์ดโค้ดสีอ่อน (โหมดมืดเคยพัง) ═════════════ */
.ffront>div{background:var(--card)}
.planbox{background:#fff}          /* ตั้งใจคงขาว: แบบแปลนเป็น "เกาะกระดาษ" เหมือนหน้ารายงานของ ARC (arc.css:1321) */
/* คู่มือ (.manpage) ประกาศ --sap ของตัวเองไว้แล้วใน wf.css:91–98 — ไม่ต้องแตะ */

/* ═════════════ 13. การเคลื่อนไหว ═════════════
   ARC: 70ms กด · 110ms hover · 240ms เปิด/ปิดของลอย · เส้นโค้งเดียว · ไม่มีอะไรเด้ง
   wf.css:169 ปิดทุกอย่างให้แล้วเมื่อ prefers-reduced-motion — คงไว้ */
@media (prefers-reduced-motion:reduce){.modal,.modal .card,.toast{animation:none!important}}

/* ═════════════ 14. ขนาด / ความหนาแน่น — เดสก์ท็อปเท่านั้น (≥821px) ═════════════
   ⚠️ ขนาดทุกตัวต้องอยู่ในบล็อกนี้ (ดูหัวไฟล์) · ต่อจาก NVK-DENSE ของ wf.css: ยังแน่นแบบ Excel แต่จัดเข้าสเกล ARC
   สเกล: ตัวหนังสือ 13.5 · ตาราง 13 · หัวตาราง 12 · แถว ~30px (ARC .tbl.dense) · ปุ่ม 30 / เล็ก 26 · ช่องกรอก 30 · มุม 8/12/16 */
@media (min-width:821px){
  body{font-size:13.5px;line-height:1.5}
  label{font-size:12.5px;margin:8px 0 4px}
  input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color])),select{height:30px;padding-top:0;padding-bottom:0;padding-left:10px;border-radius:var(--r-2)}
  input:where(:not([type=checkbox],[type=radio],[type=file],[type=range],[type=color])){padding-right:10px}
  textarea{padding:6px 10px;border-radius:var(--r-2)}
  .btn{height:30px;padding:0 14px;font-size:13px;gap:6px}
  .btn.sm{height:26px;padding:0 10px;font-size:12.5px;gap:5px}
  .gbtn{height:40px;padding:0 16px}
  /* แถบข้าง */
  .side{padding:14px 10px}
  .nav a{height:34px;padding:0 10px;font-size:13.5px}
  /* หัวหน้า */
  .main{padding:18px 24px 48px}
  .top{margin-bottom:16px}
  .top h1{font-size:22px;line-height:1.3}
  .top .sub{font-size:13.5px}
  /* พื้นผิว */
  .panel{padding:14px 16px;border-radius:var(--r-3);margin-bottom:12px}
  .panel h2{font-size:14px;margin-bottom:10px}
  /* หัว panel = ARC card-head: เส้นผมคั่นหัวกับเนื้อ (ข้าม panel ที่ตั้ง padding เองแบบ inline) */
  .panel:not([style*="padding"])>h2:first-child{margin:-14px -16px 12px;padding:10px 16px;min-height:44px;border-bottom:1px solid var(--line)}
  .tiles{gap:12px}
  .tile{padding:14px 16px;border-radius:var(--r-3);min-height:104px}
  .tile .k{font-size:12.5px}
  .tile .v{font-size:26px}
  .tile .s{font-size:12.5px;margin-top:auto;padding-top:6px}
  .card-p{padding:10px 12px;border-radius:var(--r-3)}
  .stages button{border-radius:var(--r-3)}
  .chip{font-size:12px;padding:1px 9px}
  .sig{font-size:12px;border-radius:var(--r-pill)}
  .vtabs button{height:28px;padding:0 12px;font-size:12.5px}
  .tabs{gap:18px}
  .tabs button{padding:8px 2px;font-size:13.5px}
  /* ตาราง */
  table{font-size:13px}
  th{font-size:12px;padding:7px 10px}
  td{padding:5px 10px}
  .kv{font-size:13px;gap:4px 16px}
  .empty{font-size:13px;padding:20px}
  /* ลอย */
  .modal .card{border-radius:var(--r-4);padding:20px 24px}
  .toast{border-radius:var(--r-3);padding:10px 14px 10px 16px;font-size:13.5px}
  .ddm button,.ddm a{padding:7px 10px;font-size:13px}
  .sug div{padding:6px 10px;font-size:13px}
}

/* ═════════════ 15. มือถือ (≤820px) — ⚠️ ต้องอยู่ท้ายสุดของไฟล์เสมอ (ห้ามแทรกกฎใด ๆ หลังบล็อกนี้) ═════════════
   wf.css คุมขนาดเป้ากด (≥40/44px · input 16px กัน iOS ซูม) ไว้แล้ว — ไฟล์นี้ไม่ตั้งขนาดนอกบล็อก 14 จึงไม่ทับ
   ที่ต้องเติมคือรูปทรง/สีของสิ่งที่มือถือจัดวางต่างจากเดสก์ท็อป */
@media (max-width:820px){
  .side{border-right:0;border-bottom:1px solid var(--side-line)}
  .nav a.on::before{left:-12px}
  .btn{padding-left:16px;padding-right:16px;justify-content:center}
  .modal .card{border-radius:16px 16px 0 0}
  .tile .v{letter-spacing:-.01em}
  .tw table[data-resp="1"] tr{border-radius:var(--r-3)}
}