/* ==========================================================================
   NOVA Design System — tokens + primitives (CANONICAL · source of truth เดียว)
   ที่อยู่: /assets/nova.css (ราก repo) — ทุกรถลิงก์ไฟล์นี้ร่วม แก้ที่เดียวเห็นทุกคัน
   Source of truth เอกสาร: .claude/skills/nova-design-system/SKILL.md + preview.html
   กฎห้ามพลาด: สีจาก CSS var เสมอ (ห้าม hardcode hex ใน component) · Tabler เท่านั้น
   · even-pixel (เลขคู่) · custom form control (ห้าม native) · light + dark
   --------------------------------------------------------------------------
   ⚠️ เสิร์ฟจาก "ราก repo" เท่านั้น:  python3 -m http.server 8000
      แล้วเปิด  http://localhost:8000/products/<รถ>/   (path /assets/nova.css จึงชี้ถูก)
   component เฉพาะแอป = ไป css/app.css ของรถนั้น (app.css โหลดหลัง = override ไฟล์นี้ได้)
   --------------------------------------------------------------------------
   MERGE NOTE (รวม 3 สำเนาเดิม meday/meport/metang ที่ drift):
   · --cat-1..8 : ใส่ครบทั้ง light+dark (เดิม MeDay ขาด)
   · badge mute : ใช้ชื่อมาตรฐาน .b-mute ตัวเดียว (เดิม MeTang พิมพ์ตก .b-mut → alias ไว้ที่ metang/app.css)
   · textarea min-height: 72px (median · เดิม 80/72/64)
   · .sheet max-height: 86vh (majority 2/3 · เดิม 86/86/92)
   · toast gap: 8px (majority) · undo รองรับทั้ง .undo และ .toast-undo
   ========================================================================== */
:root{
  --bg:#F6F8F8; --surface:#FFFFFF; --surface-2:#EEF2F2; --border:#E4EAEA; --border-strong:#889492;
  --text:#14201F; --text-2:#5E6B6A; --alert-bg:#FEECEC; --alert:#E5484D;
  --primary:linear-gradient(135deg,#0D8276,#0A665D); --primary-solid:#0C7A6F; --primary-light:#22C3B6;
  --link:#0B7A70;
  --secondary:linear-gradient(135deg,#6366F1,#8B5CF6); --secondary-start:#6366F1; --secondary-end:#8B5CF6;
  --green:#16B364; --warm:#F5A524; --cold:#5B8DEF;
  /* categorical (กราฟ/หมวดหลายชั้น — NOVA §5.1) — semantic/decorative แยกกัน · ห้าม hardcode hex */
  --cat-1:#22379F; --cat-2:#D95818; --cat-3:#9C4BDD; --cat-4:#E3D160;
  --cat-5:#80DBE5; --cat-6:#D071AE; --cat-7:#744E29; --cat-8:#6B6F76;
  --r:12px;
}
:root[data-theme="dark"]{
  --bg:#0E1413; --surface:#171E1D; --surface-2:#1F2827; --border:#28312F; --border-strong:#647070;
  --text:#F2F5F4; --text-2:#8E9B99; --alert-bg:#361A1A;
  --cat-1:#5C6CCC; --cat-2:#E6611C; --cat-3:#BC88ED; --cat-4:#F2E885;
  --cat-5:#B8EDF0; --cat-6:#D882B1; --cat-7:#CBB17B; --cat-8:#7A7F85;
}
*{box-sizing:border-box}
i.ti{display:inline-flex;align-items:center;line-height:1}
html,body{margin:0;padding:0}
body{
  font-family:'Mitr',sans-serif;background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
/* ไทยติดกัน browser ตัดบรรทัดไม่ได้ → ล้น (NOVA §0.6) */
body,.card,p,h1,h2,h3,label,textarea,input{overflow-wrap:anywhere;word-break:break-word}
button{font-family:inherit}
/* ตัวเลขการเงินเรียงตรง (NOVA §3) */
.tnum{font-variant-numeric:tabular-nums}

/* ---- Typography ---- */
h1{font-size:24px;font-weight:600;margin:0}
h2{font-size:18px;font-weight:600;margin:0}
h3{font-size:15px;font-weight:600;margin:0}
.lead{color:var(--text-2);margin:0}
.micro{font-size:11px;color:var(--text-2)}
.cap{font-size:12px;font-weight:500;color:var(--text-2)}

/* ---- Card ---- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
:root[data-theme="dark"] .card{box-shadow:none}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  padding:12px 24px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  border:1px solid transparent;transition:opacity .15s,transform .05s;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:default}
.btn-p{background:var(--primary);color:#fff}
.btn-g{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-g.btn-google{color:var(--text)}
.btn-ghosttext{background:transparent;border-color:transparent;color:var(--text-2);font-weight:500}
.btn-danger{background:var(--alert);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:8px 16px;font-size:13px;min-height:44px}   /* WCAG 2.5.8 touch target ≥44 (คง font ไม่ลด) */
.gicon{width:18px;height:18px;flex-shrink:0}

/* ---- Badge / chip ---- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500}
.b-green{background:rgba(22,179,100,.14);color:var(--green)}
.b-warm{background:rgba(245,165,36,.16);color:#8A5A0E}
.b-cold{background:rgba(91,141,239,.14);color:#3E68C4}
.b-tint{background:rgba(14,148,136,.12);color:var(--primary-solid)}
.b-mute{background:var(--surface-2);color:var(--text-2)}
:root[data-theme="dark"] .b-warm{color:#F5A524}
:root[data-theme="dark"] .b-cold{color:#7FA4F2}

/* ---- Inputs ---- */
label.fl{font-size:12px;font-weight:500;color:var(--text-2);display:block;margin-bottom:6px}
.inp{
  width:100%;height:44px;border:1px solid var(--border);border-radius:10px;padding:0 14px;
  font:inherit;font-size:14px;background:var(--surface);color:var(--text);
}
textarea.inp{height:auto;min-height:72px;padding:12px 14px;resize:vertical;line-height:1.5}
.inp::placeholder{color:var(--text-2);opacity:.7}
.inp:focus,textarea.inp:focus{
  outline:none;border-color:var(--primary-solid);box-shadow:0 0 0 3px rgba(14,148,136,.12);
}
/* custom dropdown trigger (ห้าม native select) */
.ddtrig{
  display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;width:100%;
  border:1px solid var(--border);border-radius:10px;padding:0 14px;
  background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-size:14px;
}
.ddtrig i,.ddtrig i.chev{color:var(--text-2)}
.ddtrig .dd-val,.ddtrig>span{
  display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ddtrig .dd-val.ph{color:var(--text-2);opacity:.8}
/* compact variant — คง min-height 44px (WCAG 2.5.8) ห้ามลด font ชดเชย */
.ddtrig.compact{height:44px;border-radius:999px;padding:0 16px;font-size:13px}

/* ---- Alert ---- */
.alert{
  background:var(--alert-bg);color:var(--alert);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:10px;font-weight:500;font-size:13px;
}
.alert .btn{margin-left:auto;padding:6px 14px}
.alert.warn{background:rgba(245,165,36,.14);color:#8A5A0E}
:root[data-theme="dark"] .alert.warn{color:#F5A524}

/* ---- Avatar / logo mark ---- */
.av{
  width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:14px;flex-shrink:0;aspect-ratio:1/1;
}
.av.lg{width:48px;height:48px;font-size:20px}
.av.p{background:var(--primary)} .av.s{background:var(--secondary)}
.logo{
  border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center;
  aspect-ratio:1/1;flex-shrink:0;font-weight:600;
}

/* ---- Custom checkbox / switch (ห้าม native) ---- */
.chk{
  position:relative;
  width:24px;height:24px;border-radius:8px;border:2px solid var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  color:transparent;font-size:14px;transition:background .15s,border-color .15s,transform .1s;background:var(--surface);
}
/* hit-area โปร่งใส 44×44 (WCAG 2.5.8) — กล่องภาพคง 24px ไม่กระทบ layout */
.chk::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px}
.chk:active{transform:scale(.9)}
.chk.on{background:var(--primary);border-color:transparent;color:#fff}
.switch{width:46px;height:28px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);
  position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
/* hit-area โปร่งใส 44×44 (WCAG 2.5.8) — pill ภาพคง 46×28 ไม่กระทบ layout */
.switch::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:44px}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.switch.on{background:var(--primary)}
.switch.on::after{transform:translateX(18px)}

/* ---- Data-viz bar (Secondary — aggregate · รองรับ single fill + multi-segment) ---- */
.pbar-track{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden;display:flex}
.pbar-fill{height:100%;background:var(--secondary);border-radius:999px;transition:width .5s ease}

/* ---- Icon box ---- */
.icon-box{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;flex-shrink:0}

/* ---- Bottom Sheet (มาตรฐานเดียว) ---- */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s;
}
.sheet-backdrop.on{opacity:1}
.sheet{
  background:var(--surface);width:100%;max-width:460px;border-radius:16px 16px 0 0;
  max-height:86vh;overflow:hidden;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .25s;z-index:4000;
}
.sheet-backdrop.on .sheet{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;border-radius:999px;background:var(--border);margin:10px auto 6px;flex-shrink:0}
.sheet-head{display:flex;align-items:center;gap:10px;padding:4px 20px 12px;flex-shrink:0}
.sheet-head h2{flex:1;min-width:0}
.sheet-body{overflow-y:auto;flex:1;min-height:0;padding:0 20px 24px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.sheet-x{width:44px;height:44px;border-radius:50%;background:var(--surface-2);border:none;color:var(--text-2);cursor:pointer;display:grid;place-items:center;font-size:16px;flex-shrink:0}

/* ---- Full-screen modal (ritual · overlay family พี่น้อง .sheet) ---- */
.fs{
  position:fixed;inset:0;background:var(--bg);z-index:2500;display:flex;flex-direction:column;
  opacity:0;transition:opacity .2s;
}
.fs.on{opacity:1}
.fs-head{display:flex;align-items:center;gap:12px;padding:16px 20px;flex-shrink:0;
  padding-top:calc(16px + env(safe-area-inset-top))}
.fs-head h2{flex:1;min-width:0;text-align:center}
.fs-body{flex:1;overflow-y:auto;padding:0 20px 24px}
.fs-foot{padding:16px 20px;flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);
  padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* ---- Toast ---- */
#toast-root{position:fixed;left:0;right:0;bottom:96px;z-index:5000;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{
  background:var(--text);color:var(--surface);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;
  box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:8px;max-width:88vw;pointer-events:auto;
}
.toast.on{opacity:1;transform:translateY(0)}
.toast .undo,.toast .toast-undo{color:var(--primary-light);font-weight:600;cursor:pointer;white-space:nowrap;margin-left:4px}

/* ---- Skeleton ---- */
.sk{background:var(--surface-2);border-radius:8px;animation:skp 1.2s ease-in-out infinite}
@keyframes skp{0%,100%{opacity:1}50%{opacity:.5}}

/* ---- Segmented control ---- */
.seg{display:flex;gap:4px;background:var(--surface-2);border-radius:999px;padding:4px}
.seg button{
  flex:1;border:none;background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:500;
  min-height:44px;padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.seg button.on{background:var(--surface);color:var(--primary-solid);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* ---- link ---- */
a,.link{color:var(--link);font-weight:500;text-decoration:none;cursor:pointer}

/* ---- option row (dropdown sheet) ---- */
.opt-row{display:flex;align-items:center;gap:10px;padding:14px 10px;border-radius:8px;cursor:pointer}
.opt-row:hover{background:var(--surface-2)}
.opt-row.sel{background:rgba(14,148,136,.10);font-weight:500}
.opt-row .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}

/* ---- calendar (date picker) ---- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:11px;color:var(--text-2);padding:4px 0}
.cal-cell{aspect-ratio:1/1;border:none;background:transparent;border-radius:8px;font:inherit;font-size:13px;
  color:var(--text);cursor:pointer;display:grid;place-items:center}
.cal-cell:hover{background:var(--surface-2)}
.cal-cell.sel{background:var(--primary);color:#fff}
.cal-cell.today{border:1px solid var(--primary-solid)}
.cal-cell.empty{cursor:default}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-nav button{width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:8px;
  cursor:pointer;color:var(--text);display:grid;place-items:center}

/* ---- helpers ---- */
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.two-btn{display:flex;gap:12px;margin-top:16px}
.two-btn .btn{flex:1}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack8{display:flex;flex-direction:column;gap:8px}
.stack12{display:flex;flex-direction:column;gap:12px}