/* ═══════════════════════════════════════════════════════════════════════════
   ui-controls.css — สำเนาบล็อกปุ่ม·ชิป·แท็บมาตรฐาน (.ui-*) จาก styles.css
   สำหรับหน้าที่ไม่โหลด styles.css (หน้า RAY · หน้าคนนอกชุด 4) — มติโอบ 10-05 "ก"
   🔴 ห้ามแก้ไฟล์นี้ตรง ๆ — แก้ใน styles.css แล้วรัน `node tests/ui_controls_sync_guard.mjs --write`
      ยามเทียบกฎทุกบรรทัด (ไม่นับคอมเมนต์) · หน้าที่โหลดไฟล์นี้ต้องประกาศ token ที่บล็อกใช้เอง
      (เช่น ray.css แปลง --green/--panel/--line… เป็นพาเลต RAY) — ยามเช็คให้ด้วย
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   🧱 มาตรฐานปุ่ม · ชิป · แท็บ ทั้งเว็บ (โอบเคาะ 10-04 · อิง shadcn/ui new-york-v4)
   สเปก/เหตุผล/ข้อยกเว้น → skill ui-design-system §1.5 · อย่าแต่งค่านอกสเกลนี้ในหน้าใดหน้าหนึ่ง
   ใช้ token เดิมทั้งหมด (โหมดมืดตามเอง) · เพิ่มใหม่แค่ความสูง 3 ค่า + สีตัวหนังสือบนปุ่มเขียว
   class หน้าเดิม (เช่น .edit-btn) คงไว้เป็นที่เกาะของ JS — หน้าตามาจาก .ui-* เท่านั้น
   🪤 บล็อกนี้ต้องอยู่เหนือบล็อก embed (W3-31) — ท้ายไฟล์เป็นเขตของ html.is-embed เท่านั้น (tests/embed_mode_guard.mjs)
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --ctl-sm: 32px; --ctl: 36px; --ctl-lg: 44px; --on-green: #fff; }
[data-theme="dark"] { --on-green: #0f1012; }   /* ขาวบนเขียวโหมดมืด = 2.4:1 อ่านยาก → ตัวเข้ม 7.8:1 */

/* ── ปุ่ม: 5 แบบ × 3 ขนาด (reset กฎ button{min-height:48px;background:var(--green)} ข้างบนในตัว) ── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl); min-height: 0; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ui-btn svg { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.ui-btn--sm { height: var(--ctl-sm); padding: 0 12px; gap: 6px; font-size: .8125rem; }
.ui-btn--sm svg { width: 14px; height: 14px; }
.ui-btn--lg { height: var(--ctl-lg); padding: 0 20px; font-size: .9375rem; }
.ui-btn--icon { width: var(--ctl); padding: 0; }
.ui-btn--icon.ui-btn--sm { width: var(--ctl-sm); }
.ui-btn--icon.ui-btn--lg { width: var(--ctl-lg); }
.ui-btn--block { width: 100%; }

.ui-btn--primary   { background: var(--green); color: var(--on-green); }
.ui-btn--secondary { background: var(--paper); color: var(--ink); }
.ui-btn--outline   { background: var(--panel); border-color: var(--line); color: var(--ink); }
.ui-btn--ghost     { background: transparent; color: var(--muted); }
.ui-btn--danger    { background: var(--panel); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); }
.ui-btn--link      { height: auto; padding: 0; border: 0; background: none; color: var(--green); }
@media (hover: hover) {   /* ชี้เมาส์ = ขอบ/ตัวหนังสือเขียว ไม่เติมพื้น (§2) · ประกาศครบทุกแบบ กัน button:hover เขียวทึบทับ */
  .ui-btn--primary:hover   { background: var(--green-mid); }
  .ui-btn--secondary:hover { background: var(--line); }
  .ui-btn--outline:hover   { background: var(--panel); border-color: var(--green); color: var(--green); }
  .ui-btn--ghost:hover     { background: transparent; color: var(--green); }
  .ui-btn--danger:hover    { background: color-mix(in srgb, var(--red) 8%, var(--panel)); border-color: var(--red); }
  .ui-btn--link:hover      { background: none; text-decoration: underline; }
}
.ui-btn:focus-visible, .ui-chip:focus-visible, .ui-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"], .ui-chip:disabled { opacity: .5; cursor: not-allowed; }

/* ── ชิป (ตัวกรอง / สลับมุมมอง): เม็ดยา 32 · ที่เลือกอยู่ = พื้นเขียวอ่อน (กฎเหล็ก §2) ── */
.ui-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-sm); min-height: 0; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font-family: inherit; font-size: .8125rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.ui-chip svg { width: 14px; height: 14px; flex: none; stroke-width: 2; }
.ui-chip.active, .ui-chip.is-active, .ui-chip[aria-pressed="true"], .ui-chip[aria-selected="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
@media (hover: hover) { .ui-chip:not(.active):not(.is-active):hover { background: transparent; border-color: var(--green); color: var(--green); } }

/* ── แท็บ: เม็ดยา 36 ไม่มีขอบ (แถบ §2.4) ── */
.ui-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl); min-height: 0; padding: 0 14px;
  border: 0; border-radius: 999px; background: none; color: var(--muted);
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1; letter-spacing: 0;
  white-space: nowrap; cursor: pointer; text-decoration: none; box-shadow: none;
  transition: background-color .15s, color .15s;
}
.ui-tab svg { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.ui-tab.active, .ui-tab.is-active, .ui-tab[aria-selected="true"] { background: var(--green-soft); color: var(--green); }
@media (hover: hover) { .ui-tab:not(.active):not(.is-active):not([aria-selected="true"]):hover { background: none; color: var(--ink); } }
@media (max-width: 600px) { .ui-tab { padding: 0 12px; font-size: .8125rem; } }   /* มือถือไม่ต่ำกว่า 13px */

/* ── ป้าย: ตัวเลข/สถานะเท่านั้น (ไม่มีป้าย PRO / ใหม่ บนปุ่ม-แท็บ-หัวข้อ — มติ 10-04) ── */
.ui-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.ui-badge--count { border: 1px solid var(--line); color: var(--muted); }
.ui-badge--up    { background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); }
.ui-badge--down  { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }

/* ── ช่องกรอก 44 (คู่ปุ่มใหญ่ 44 · 16px กัน iPhone ซูมตอนแตะ · background-color ไม่ใช่ shorthand = ลูกศร select กลางยังอยู่) ── */
.ui-input { height: var(--ctl-lg); min-height: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background-color: var(--panel); color: var(--ink); font-family: inherit; font-size: 1rem; }
.ui-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* ── แถวเดียวกัน = สูงเท่ากัน ── */
.ui-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* author CSS ตั้ง display เอง ⇒ [hidden] ของ UA แพ้ — ต้องประกาศคู่เสมอ (§7 ข้อ 4) */
.ui-btn[hidden], .ui-chip[hidden], .ui-tab[hidden], .ui-badge[hidden], .ui-row[hidden] { display: none !important; }

/* ── มือถือ: หน้าตา 32/36 แต่พื้นที่กดล่องหนถึง 44 (§9) ── */
@media (pointer: coarse) {   /* :where = specificity 0 → ชิ้นที่ตั้ง position/::after ของตัวเอง (ปุ่มลอย/ปุ่มปิดมุมการ์ด) ชนะเสมอ */
  :where(.ui-btn, .ui-chip, .ui-tab) { position: relative; }
  :where(.ui-btn, .ui-chip, .ui-tab)::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
  }
}