/* CampOS (ระบบบริหารปางช้าง) showcase — refined lean component layer
 * โทนขาวล้วน · hairline · ไม่ถมดำ · flat SaaS ที่ "เนียน" ขึ้น
 * ฟอนต์: Bai Jamjuree (display, มีคาแรกเตอร์) + Anuphan (body, สะอาด) — รองรับไทยเต็ม
 * สีเป็น channel "R G B" เพื่อให้ Tailwind alpha ทำงาน
 */
:root {
  --c-ink: 20 39 30;        /* near-black text (forest-tinted) */
  --c-muted: 90 102 96;     /* secondary text */
  --c-faint: 148 158 152;   /* tertiary */
  --c-line: 20 39 30;       /* hairline base (ใช้กับ alpha ต่ำ) */
  --c-surface: 249 250 248; /* page bg (warm off-white) */
  --c-card: 255 255 255;    /* card bg */
  --c-accent: 22 128 92;    /* forest green เส้นเดียว — ใช้น้อยมาก (active/link) */
  /* soft elevation — แทบมองไม่เห็น แต่ให้มิติ */
  --shadow-sm: 0 1px 2px rgb(20 39 30 / 0.04), 0 1px 1px rgb(20 39 30 / 0.03);
  --shadow-md: 0 4px 14px -4px rgb(20 39 30 / 0.08), 0 2px 6px -2px rgb(20 39 30 / 0.05);
}
html { scroll-behavior: smooth; }
body {
  font-family: "Anuphan", system-ui, sans-serif;
  /* บรรยากาศ: ไล่อุ่นจางที่มุมบน + จุด texture บางมาก — ไม่ใช่ gradient ฉูดฉาด */
  background-color: rgb(var(--c-surface));
  background-image:
    radial-gradient(1200px 480px at 88% -8%, rgb(22 128 92 / 0.05), transparent 60%),
    radial-gradient(900px 420px at -6% 4%, rgb(20 39 30 / 0.035), transparent 55%);
  background-attachment: fixed;
}
.font-display { font-family: "Bai Jamjuree", "Anuphan", system-ui, sans-serif; letter-spacing: -0.01em; }
input[type="color"] { -webkit-appearance: none; appearance: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* hairline helper — กรอบเส้นบางๆ (อ่อนลงนิดให้เนียน) */
.hair { border: 1px solid rgb(var(--c-line) / 0.10); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.10); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.10); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.10); }

/* card — ขาว กรอบบาง + เงานุ่มแทบมองไม่เห็น */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s, transform .2s; }
a.cf-card:hover, .cf-card-hover:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--c-line) / 0.18); }

/* stat card — การ์ดตัวเลขสรุป (แทนการเอา cf-zone มาชน) */
.cf-stat { position: relative; background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.10); border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; display: flex; flex-direction: column; gap: 0.15rem; overflow: hidden; }
a.cf-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: rgb(var(--c-line) / 0.18); }
.cf-stat-top { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgb(var(--c-muted)); }
.cf-stat-num { font-family: "Bai Jamjuree"; font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; margin-top: 0.35rem; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.cf-stat-num small { font-size: 0.9rem; font-weight: 500; color: rgb(var(--c-faint)); }
.cf-stat-foot { font-size: 0.72rem; margin-top: 0.3rem; }
/* แถบสีเน้นบางๆ ด้านบนการ์ด (ใช้บอกสถานะ) */
.cf-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: transparent; }
.cf-stat-safe::before { background: rgb(22 128 92 / 0.85); }
.cf-stat-warn::before { background: rgb(202 138 4 / 0.85); }
.cf-stat-bad::before  { background: rgb(220 70 60 / 0.85); }
.cf-stat-ink::before  { background: rgb(var(--c-ink) / 0.55); }

/* logo / icon box — outline ไม่ถม */
.cf-mark { border: 1.5px solid rgb(var(--c-ink)); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }
.cf-iconbox { border: 1px solid rgb(var(--c-line) / 0.16); border-radius: 0.7rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }

/* eyebrow */
.cf-eyebrow { font-family: "Bai Jamjuree"; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-accent)); font-weight: 600; }

/* chips — outline only */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.24rem 0.62rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.14); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); }
.cf-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.32); }

/* buttons */
.cf-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.52rem 1rem; border-radius: 0.7rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .15s; box-shadow: var(--shadow-sm); }
.cf-btn:hover { border-color: rgb(var(--c-ink) / 0.32); box-shadow: var(--shadow-md); }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }  /* CTA เดียว/หน้า */
.cf-btn-primary:hover { background: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); }

/* step list */
.cf-step { position: relative; padding-left: 3.2rem; }
.cf-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 1.5px; background: rgb(var(--c-line) / 0.12); }
.cf-step:last-child::before { display: none; }
.cf-step-num { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; display: grid; place-items: center; font-family: "Bai Jamjuree"; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-accent)); border: 1.5px solid rgb(var(--c-accent) / 0.4); background: rgb(22 128 92 / 0.05); }

/* callouts — tint บางมาก + เส้นบาง */
.cf-good, .cf-warn, .cf-bad, .cf-info { border-radius: 0.8rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; align-items: flex-start; }
.cf-good { background: rgb(16 185 129 / 0.05); border-color: rgb(16 185 129 / 0.26); color: #0f766e; }
.cf-warn { background: rgb(234 179 8 / 0.06);  border-color: rgb(234 179 8 / 0.32); color: #92660b; }
.cf-bad  { background: rgb(239 68 68 / 0.045); border-color: rgb(239 68 68 / 0.26); color: #b1453a; }
.cf-info { background: rgb(20 39 30 / 0.025);  border-color: rgb(20 39 30 / 0.12); color: rgb(var(--c-ink)); }

/* screen mock */
.cf-screen { border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 1rem; overflow: hidden; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-screen-bar { height: 2.2rem; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.8rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); background: rgb(var(--c-surface)); }
.cf-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.22); }

/* phone frame — สำหรับ LIFF mock */
.cf-phone { width: 100%; max-width: 320px; border: 1px solid rgb(var(--c-line) / 0.14); border-radius: 1.9rem; padding: 0.55rem; background: rgb(var(--c-card)); box-shadow: var(--shadow-md); }
.cf-phone-screen { border-radius: 1.4rem; overflow: hidden; border: 1px solid rgb(var(--c-line) / 0.08); background: rgb(var(--c-surface)); }

/* zone / status pills */
.cf-zone { font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 9999px; border: 1px solid; display: inline-flex; align-items: center; gap: 0.3rem; }
.cf-zone-danger  { color: #b1453a; border-color: rgb(239 68 68 / 0.38);  background: rgb(239 68 68 / 0.05); }
.cf-zone-caution { color: #92660b; border-color: rgb(234 179 8 / 0.42); background: rgb(234 179 8 / 0.06); }
.cf-zone-safe    { color: #0f766e; border-color: rgb(16 185 129 / 0.38); background: rgb(16 185 129 / 0.05); }
.cf-zone-free    { color: #1d4ed8; border-color: rgb(59 130 246 / 0.38); background: rgb(59 130 246 / 0.05); }
.cf-zone-mute    { color: rgb(var(--c-muted)); border-color: rgb(var(--c-line) / 0.18); background: rgb(var(--c-line) / 0.03); }

/* traffic light dot */
.cf-light { width: 0.7rem; height: 0.7rem; border-radius: 9999px; display: inline-block; }
.cf-light-green  { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / 0.14); }
.cf-light-yellow { background: #eab308; box-shadow: 0 0 0 3px rgb(234 179 8 / 0.14); }
.cf-light-red    { background: #ef4444; box-shadow: 0 0 0 3px rgb(239 68 68 / 0.14); }

/* form inputs — lean, hairline, white */
.cf-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.cf-input { width:100%; border:1px solid rgb(var(--c-line) / 0.16); border-radius:0.7rem; padding:0.55rem 0.75rem; font-size:0.875rem; background:#fff; color:rgb(var(--c-ink)); transition:.15s; font-family:inherit; }
.cf-input::placeholder { color:rgb(var(--c-faint)); }
.cf-input:focus { outline:none; border-color:rgb(var(--c-accent)); box-shadow:0 0 0 3px rgb(var(--c-accent) / 0.12); }
select.cf-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6660' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; padding-right:1.8rem; cursor:pointer; }
.cf-input-affix { position:relative; }
.cf-input-affix > .suffix { position:absolute; right:0.7rem; top:50%; transform:translateY(-50%); font-size:0.8rem; color:rgb(var(--c-faint)); pointer-events:none; }

/* code chip (pairing code) */
.cf-code { font-family:"Bai Jamjuree"; font-weight:700; letter-spacing:0.26em; font-size:1.5rem; color:rgb(var(--c-ink)); }

/* toast */
.cf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:rgb(var(--c-ink)); color:#fff; font-size:0.85rem; padding:0.7rem 1.15rem; border-radius:0.8rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 10px 30px rgb(20 39 30 / 0.22); }
.cf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* data table */
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cf-table td { padding: 0.7rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.07); color: rgb(var(--c-ink)); }
.cf-table tbody tr { transition: background .12s; }
.cf-table tbody tr:hover { background: rgb(var(--c-accent) / 0.025); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }

/* avatar */
.cf-ava { width:2.25rem; height:2.25rem; border-radius:9999px; display:grid; place-items:center; font-family:"Bai Jamjuree"; font-weight:600; font-size:0.8rem; background:rgb(22 128 92 / 0.08); border:1px solid rgb(22 128 92 / 0.16); color:rgb(var(--c-accent)); }

/* divider helper ที่ "บาง" จริง (เลี่ยงใช้ c-faint ที่เข้มเกิน) */
.cf-divide > * + * { border-top: 1px solid rgb(var(--c-line) / 0.08); }

/* page-load reveal — เผยทีละชั้นแบบนุ่ม */
@keyframes camp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: camp-rise .55s cubic-bezier(.22,.61,.36,1) both; }
  main > *:nth-child(1){ animation-delay:.02s } main > *:nth-child(2){ animation-delay:.08s }
  main > *:nth-child(3){ animation-delay:.14s } main > *:nth-child(4){ animation-delay:.20s }
  main > *:nth-child(5){ animation-delay:.26s } main > *:nth-child(6){ animation-delay:.32s }
  main > *:nth-child(7){ animation-delay:.38s } main > *:nth-child(n+8){ animation-delay:.42s }
}