/* ═══════════════════════════════════════════════════════════════════
   FABLE COMPONENTS — v1 (2026-07-12, เขียนโดย Fable 5)
   ต้องโหลด fable-tokens.css ก่อนเสมอ — ทุกค่าอ้าง var() ไม่ hardcode
   ทุกตัวผ่านกฎ BUILD-BIBLE §6: ฟอนต์ไทย / ปุ่ม ≥44px / ไม่มี alert()
   / fixed ไม่อยู่ใต้ backdrop-filter / mobile-safe 390px
   ═══════════════════════════════════════════════════════════════════ */

/* ── ปุ่ม .fb-btn — ครบ 8 สถานะ ─────────────────────────────────── */
.fb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: .6rem 1.35rem;
  font: 600 var(--fs-base)/1.2 var(--font-body);
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              background var(--dur-1);
}
.fb-btn:hover { box-shadow: var(--shadow-1); filter: brightness(1.06); }
.fb-btn:active { transform: translateY(1px); filter: brightness(.96); }
.fb-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.fb-btn[data-state="loading"] { pointer-events: none; opacity: .75; }
.fb-btn[data-state="loading"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: fb-spin .7s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(1turn); } }

.fb-btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.fb-btn--ghost:hover { background: var(--surface-2); filter: none; }
.fb-btn--danger { background: var(--bad); color: #fff; }
.fb-btn--sm { min-height: 36px; padding: .35rem .9rem; font-size: var(--fs-sm); }
/* บนมือถือ .fb-btn--sm ก็ยังต้องกดง่าย */
@media (max-width: 640px) { .fb-btn--sm { min-height: var(--tap-min); } }

/* ── การ์ด .fb-card ───────────────────────────────────────────────
   กติกา: ห้ามเรียงการ์ดหน้าตาเหมือนกันเกิน 3 ใบ (icon+หัว+ข้อความโคลนกัน
   = ลายเซ็น AI) — ให้สลับขนาด/ใส่รูป/ดึง 1 ใบเด่น หรือใช้ list/ตารางแทน */
.fb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.fb-card--flat { box-shadow: none; }
.fb-card--lift { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.fb-card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* ใบเด่น 1 ใบในกลุ่ม — พื้น accent อ่อน + กิน 2 คอลัมน์เมื่อจอกว้าง */
.fb-card--feature { background: var(--accent-soft); border-color: transparent; }
@media (min-width: 720px) { .fb-card--feature { grid-column: span 2; } }

/* ── ฟอร์ม .fb-field ──────────────────────────────────────────────── */
.fb-field { display: grid; gap: var(--sp-2); margin-block: var(--sp-4); }
.fb-field label { font-weight: 600; font-size: var(--fs-sm); }
.fb-field input, .fb-field select, .fb-field textarea {
  min-height: var(--tap-min);
  padding: .55rem .8rem;
  font: 400 var(--fs-base) var(--font-body);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  width: 100%;
}
.fb-field input:focus-visible, .fb-field select:focus-visible, .fb-field textarea:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.fb-field .hint { color: var(--muted); font-size: var(--fs-sm); }
.fb-field.is-error input, .fb-field.is-error textarea { border-color: var(--bad); }
.fb-field .error { color: var(--bad); font-size: var(--fs-sm); font-weight: 600; }
/* บอกวิธีแก้ ไม่ใช่แค่บอกว่าผิด: "เบอร์โทรต้องมี 10 หลัก เช่น 0812345678" */

/* ── Nav .fb-nav — sticky ปลอดภัย ─────────────────────────────────
   ⚠ ห้ามใส่ backdrop-filter/transform/filter บน container ที่มีลูกเป็น
   position:fixed — fixed จะหลุดไปยึด ancestor แทน viewport (บั๊กจริง
   portfolio 2026-07-04) → ใช้พื้นทึบ + เงา แทน glass */
.fb-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.fb-nav .brand { font-weight: 700; margin-right: auto; color: var(--ink); text-decoration: none; }
.fb-nav a:not(.brand) {
  color: var(--muted); text-decoration: none;
  padding: .4rem .7rem; border-radius: var(--radius-sm);
  min-height: var(--tap-min); display: inline-flex; align-items: center;
}
.fb-nav a:not(.brand):hover { background: var(--surface-2); color: var(--ink); }
.fb-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* ── Hero .fb-hero — typographic ก่อนเสมอ ─────────────────────────
   hero ที่แข็งแรงสุดคือ typography ดีๆ — ใส่รูป/กราฟิกเมื่อมีของจริงเท่านั้น */
.fb-hero { padding: var(--sp-8) var(--sp-5) var(--sp-7); }
.fb-hero h1 { font-size: var(--fs-display); letter-spacing: -.015em; margin: 0 0 var(--sp-4); }
.fb-hero .lede { font-size: var(--fs-lg); color: var(--muted); max-width: 46ch; margin: 0 0 var(--sp-5); }
.fb-hero .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── ตาราง .fb-table — หัวติดบน + zebra + wrapper กันล้นมือถือ ──── */
.fb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.fb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fb-table th {
  position: sticky; top: 0;
  background: var(--surface-2); color: var(--ink);
  text-align: left; font-weight: 600;
  padding: .65rem .9rem; border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.fb-table td { padding: .6rem .9rem; border-bottom: 1px solid var(--line); }
.fb-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.fb-table tbody tr:hover { background: var(--accent-soft); }
.fb-table td.num, .fb-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Toast .fb-toast — แทน alert() (กฎ BUILD-BIBLE) ──────────────
   ใช้คู่ JS: fbToast('บันทึกแล้ว','ok')  — ดู PLAYBOOK.md */
#fb-toasts {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  z-index: var(--z-toast);
  display: grid; gap: var(--sp-2); width: min(92vw, 380px);
}
.fb-toast {
  background: var(--ink); color: var(--bg);
  padding: .7rem 1rem; border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); font-size: var(--fs-sm);
  display: flex; gap: var(--sp-2); align-items: center;
  animation: fb-toast-in var(--dur-2) var(--ease-out);
}
.fb-toast.ok { box-shadow: inset 3px 0 0 var(--ok), var(--shadow-2); }
.fb-toast.bad { box-shadow: inset 3px 0 0 var(--bad), var(--shadow-2); }
@keyframes fb-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ── Dialog — <dialog> จริง แทน confirm() ────────────────────────── */
dialog.fb-dialog {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  padding: var(--sp-5); max-width: min(92vw, 420px);
  box-shadow: var(--shadow-2);
}
dialog.fb-dialog::backdrop { background: rgba(0,0,0,.45); }
dialog.fb-dialog h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
dialog.fb-dialog .actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-5); }

/* ── กรอบรูปสินค้า .fb-imgbox — pattern กันรูปทะลุ (บั๊กจริง 1wine) ── */
.fb-imgbox {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--surface-2);
  border-radius: var(--radius-md);
  /* ผู้ใช้กำหนด height เอง เช่น height:320px */
}
.fb-imgbox img { width: 100%; height: 100%; object-fit: contain; }
/* ห้าม max-height:100% เดี่ยวๆ ใน flex — รูปสูงจะทะลุกรอบ */

/* ── สถิติ .fb-stat — ตัวเลขจริงเท่านั้น ───────────────────────────
   ห้ามใส่ "+47%" ที่กุขึ้น — ไม่มีตัวเลขจริง = ไม่ใช้บล็อกนี้ */
.fb-stat { display: grid; gap: .15rem; }
.fb-stat .n { font-size: var(--fs-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-stat .l { color: var(--muted); font-size: var(--fs-sm); }

/* ── ไอคอน .fb-icon — SVG monoline เท่านั้น (ห้ามอีโมจิ) ──────────
   ใช้: <svg class="fb-icon"><use href="#i-check"/></svg>
   คลังไอคอนแบรนด์ 6,000+: /root/thesvg */
.fb-icon {
  width: 1.15em; height: 1.15em;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.18em;
}