/* agency-hub showcase — lean white component layer
 * โทนขาวล้วน · hairline borders · ไม่ถมดำ · flat SaaS · accent จุดเดียว
 * สีเป็น channel "R G B" เพื่อให้ Tailwind alpha (rgb(var(--x)/.5)) ทำงาน
 */
:root {
  --c-ink: 24 24 27;        /* near-black text/line base */
  --c-muted: 113 113 122;   /* secondary text */
  --c-faint: 161 161 170;   /* tertiary */
  --c-line: 24 24 27;       /* hairline base (ใช้กับ alpha ต่ำ) */
  --c-surface: 250 250 249; /* page bg */
  --c-card: 255 255 255;    /* card bg */
  --c-accent: 124 58 237;   /* เส้นเดียว — ใช้น้อยมาก (active/link/highlight) */
}
html { scroll-behavior: smooth; }
body { font-family: "Prompt", system-ui, sans-serif; }
.font-display { font-family: "Poppins", system-ui, sans-serif; }
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 helpers */
.hair   { border: 1px solid rgb(var(--c-line) / 0.12); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.12); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.12); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.12); }

/* card */
.ag-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 0.875rem; }

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

/* eyebrow */
.ag-eyebrow { font-family: "Poppins"; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--c-muted)); font-weight: 600; }

/* chips — outline only */
.ag-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.22rem 0.6rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.15); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); }
.ag-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.35); }
.ag-chip-accent { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / 0.4); background: rgb(var(--c-accent) / 0.05); }

/* buttons */
.ag-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.95rem; border-radius: 0.625rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .15s; cursor: pointer; }
.ag-btn:hover { border-color: rgb(var(--c-ink) / 0.35); }
.ag-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }  /* CTA เดียว/หน้า */
.ag-btn-primary:hover { opacity: .9; }

/* role badge */
.ag-role { font-size: 0.7rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 9999px; border: 1px solid; font-family: "Poppins"; }
.ag-role-owner  { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / 0.4); background: rgb(var(--c-accent) / 0.06); }
.ag-role-staff  { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.25); background: rgb(var(--c-ink) / 0.03); }
.ag-role-client { color: #1d4ed8; border-color: rgb(59 130 246 / 0.4); background: rgb(59 130 246 / 0.05); }

/* status pill (work_items / client status) */
.ag-status { display:inline-flex; align-items:center; gap:0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 9999px; border: 1px solid; }
.ag-status::before { content:""; width:0.4rem; height:0.4rem; border-radius:9999px; background: currentColor; }
.ag-st-todo     { color: rgb(var(--c-faint)); border-color: rgb(var(--c-line) / 0.18); background: rgb(var(--c-ink) / 0.02); }
.ag-st-progress { color: #1d4ed8; border-color: rgb(59 130 246 / 0.35); background: rgb(59 130 246 / 0.05); }
.ag-st-submitted{ color: #92660b; border-color: rgb(234 179 8 / 0.4); background: rgb(234 179 8 / 0.06); }
.ag-st-approved { color: #0f766e; border-color: rgb(16 185 129 / 0.4); background: rgb(16 185 129 / 0.05); }
.ag-st-done     { color: #15803d; border-color: rgb(34 197 94 / 0.4); background: rgb(34 197 94 / 0.06); }
.ag-st-paused   { color: #b1453a; border-color: rgb(239 68 68 / 0.3); background: rgb(239 68 68 / 0.04); }

/* avatar (initials) */
.ag-avatar { width: 2.1rem; height: 2.1rem; border-radius: 9999px; display: grid; place-items: center; font-family: "Poppins"; font-weight: 600; font-size: 0.75rem; color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line) / 0.18); background: rgb(var(--c-ink) / 0.03); }

/* step / timeline list */
.ag-step { position: relative; padding-left: 3.1rem; }
.ag-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 1px; background: rgb(var(--c-line) / 0.14); }
.ag-step:last-child::before { display: none; }
.ag-step-num { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; display: grid; place-items: center; font-family: "Poppins"; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-ink)); border: 1.5px solid rgb(var(--c-ink) / 0.85); background: rgb(var(--c-card)); }
.ag-step-num.done { color: #fff; background: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); }

/* callouts — tint บางมาก + เส้นบาง */
.ag-good, .ag-warn, .ag-bad, .ag-info { border-radius: 0.7rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; }
.ag-good { background: rgb(16 185 129 / 0.05); border-color: rgb(16 185 129 / 0.28); color: #0f766e; }
.ag-warn { background: rgb(234 179 8 / 0.06);  border-color: rgb(234 179 8 / 0.35); color: #92660b; }
.ag-bad  { background: rgb(239 68 68 / 0.045); border-color: rgb(239 68 68 / 0.28); color: #b1453a; }
.ag-info { background: rgb(var(--c-accent) / 0.04); border-color: rgb(var(--c-accent) / 0.22); color: rgb(var(--c-ink)); }

/* phone / screen mock */
.ag-screen { border: 1px solid rgb(var(--c-line) / 0.14); border-radius: 0.875rem; overflow: hidden; background: rgb(var(--c-card)); }
.ag-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.12); background: rgb(var(--c-surface)); }
.ag-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.25); }
.ag-phone { width: 320px; max-width: 100%; border: 1px solid rgb(var(--c-line) / 0.16); border-radius: 1.8rem; background: #fff; box-shadow: 0 18px 48px rgb(0 0 0 / 0.10); overflow: hidden; }
.ag-phone-notch { height: 2.4rem; display:flex; align-items:center; justify-content:center; gap:.4rem; border-bottom: 1px solid rgb(var(--c-line) / 0.1); background: rgb(var(--c-surface)); font-size:.72rem; color: rgb(var(--c-muted)); }

/* LINE bubble */
.ag-bubble { background: #fff; border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 0 0.9rem 0.9rem 0.9rem; padding: 0.7rem 0.85rem; font-size: 0.82rem; line-height: 1.5; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }

/* form inputs — lean, hairline, white */
.ag-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.ag-input { width:100%; border:1px solid rgb(var(--c-line) / 0.18); border-radius:0.625rem; padding:0.5rem 0.7rem; font-size:0.875rem; background:#fff; color:rgb(var(--c-ink)); transition:.15s; }
.ag-input::placeholder { color:rgb(var(--c-faint)); }
.ag-input:focus { outline:none; border-color:rgb(var(--c-accent)); box-shadow:0 0 0 3px rgb(var(--c-accent) / 0.12); }
textarea.ag-input { resize: vertical; min-height: 4.5rem; }
select.ag-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='%2371717a' 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; }
.ag-input-affix { position:relative; }
.ag-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; }

/* toggle (เปิด/ปิด rule) */
.ag-toggle { position: relative; width: 2.4rem; height: 1.35rem; border-radius: 9999px; background: rgb(var(--c-ink) / 0.12); transition: .18s; cursor: pointer; flex: none; }
.ag-toggle::after { content:""; position:absolute; top:0.16rem; left:0.16rem; width:1.03rem; height:1.03rem; border-radius:9999px; background:#fff; box-shadow:0 1px 2px rgb(0 0 0 /.2); transition:.18s; }
.ag-toggle.on { background: rgb(var(--c-accent)); }
.ag-toggle.on::after { transform: translateX(1.05rem); }

/* toast */
.ag-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.65rem 1.1rem; border-radius:0.7rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 8px 24px rgb(0 0 0 / 0.18); }
.ag-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* data table */
.ag-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.ag-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.55rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.12); font-size: 0.75rem; }
.ag-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.08); color: rgb(var(--c-ink)); }
.ag-table tr:last-child td { border-bottom: none; }
.ag-table tbody tr:hover td { background: rgb(var(--c-ink) / 0.015); }
.num { font-variant-numeric: tabular-nums; }

/* kanban column */
.ag-kcol { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / 0.1); border-radius: 0.8rem; }