/* public/shared/chrome.css — ฐาน CSS ทั้งเว็บ + ชิ้นส่วนที่อยู่ทุกหน้า (header/footer/แถบโทร)
   design/00-direction.md §3 (ตัวอักษร) §4 (ระยะห่าง/ขนาดแตะ) §4.3 (ชิ้นส่วนทุกหน้า)
   ต้องโหลดคู่กับ tokens.css เสมอ (ไฟล์นี้ใช้ var(--...) ล้วน ไม่มีค่าดิบ) */

*, *::before, *::after { box-sizing: border-box; }

/* บั๊กที่ถูกเจอจริงระหว่างเทส (P5 กล่อง "กำลังโหลดรายการบริการ…" ค้างอยู่ถาวรบนจอ): องค์ประกอบไหนก็ตามที่มี
   ทั้งแอตทริบิวต์ hidden และคลาสที่กำหนด display: grid/flex เอง (เช่น .service-skeleton, .turnstile-fallback,
   .submit-fail) — กฎ display ของคลาสนั้น (มาจาก author stylesheet) ชนะกฎ [hidden] { display: none } ของ
   เบราว์เซอร์เอง (UA stylesheet) เสมอไม่ว่า specificity จะเท่ากันหรือไม่ เพราะ origin ของ author สูงกว่า UA
   ในลำดับ cascade — ผลคือ JS ตั้ง .hidden = true ถูกต้องแล้ว แต่องค์ประกอบยังโชว์อยู่บนจอ
   แก้ที่นี่ที่เดียว (แทนไล่แก้ทีละคลาสในทุกหน้า) ให้ [hidden] ชนะเสมอไม่ว่าคลาสอื่นจะตั้ง display อะไรไว้ —
   เป็นแพตเทิร์นมาตรฐาน (normalize.css ก็ทำแบบนี้) ไม่ใช่การใช้ !important มั่ว */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0; /* §3.4.2 — ห้ามมีระยะห่างตัวอักษรกับข้อความไทยเด็ดขาด */
  text-align: left; /* §3.4.4 — ห้าม justify */
  word-break: normal;
  overflow-wrap: break-word; /* §3.4.6 */
  /* เผื่อพื้นที่แถบโทรติดขอบจอล่าง (§4.3 ①) — ทุกหน้าต้องมี ไม่งั้นแถบทับบรรทัดสุดท้าย */
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom));
}

h1, h2, h3 { font-weight: 800; margin: 0; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); line-height: 1.25; font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: 1.35; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.4; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

/* โฟกัสต้องเห็นชัดเสมอ (§4.2) — ห้าม outline: none ทุกกรณี */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- header (§4.3 ②) ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.site-header__name {
  font-size: var(--fs-h3);
  font-weight: 800;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: var(--sp-3); /* §4.2 — ระยะระหว่างของที่แตะได้สองอันติดกัน ≥ 12px (--sp-2 คือ 8px ไม่พอ) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1 1 100%;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--on-surface-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  flex: none;
}
.site-nav__link[aria-current="page"] {
  color: var(--on-surface);
  border-bottom-color: var(--accent); /* เส้นอำพัน 3px ใต้เมนูที่เปิดอยู่ — §4.3 ② */
  font-weight: 700;
}

/* ---------- แถบโทรติดขอบจอ (§4.3 ①, §5.1) — สำคัญที่สุดในเว็บ ห้ามซ่อน/หุบ/มีปุ่มปิด ---------- */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: var(--callbar-h);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 100%;
  color: var(--on-accent);
  text-decoration: none;
  font-size: var(--fs-btn-lg);
  font-weight: 800;
}

.call-bar__number {
  white-space: nowrap; /* §3.4.8 — เบอร์โทรห้ามขึ้นบรรทัดใหม่กลางเบอร์ */
  font-variant-numeric: tabular-nums;
}

/* เดสก์ท็อป: เลือก-คัดลอกได้ปกติ ไม่ใช่ลิงก์ tel: (D11.9) — ⚠️ 2026-07-31: พื้นเปลี่ยนจาก --accent เป็น
   --surface-3 ด้วย ไม่ใช่แค่สลับ element เฉยๆ เหตุผล: เดิมพื้นอำพันเต็มแถบ + ไอคอน 📞 + คำว่า "โทรหาร้าน"
   ทำให้แถบทั้งแถบยังหน้าตาเหมือน "ปุ่มโทร" อยู่ดีทั้งที่กดแล้วแค่คัดลอก (บั๊กที่เจ้าของโปรเจกต์เจอเอง) —
   เปลี่ยนพื้นเป็นสีรอง (ไม่ใช่อำพัน) ให้หน้าตาบอกตรงๆ ว่า "นี่คือแผงข้อมูล ไม่ใช่ปุ่มกระทำการ" ส่วนตัวเลข/
   ไอคอน/คำล็อก (D11.11) ยังอยู่ครบทุกตัวอักษรเหมือนเดิม แค่เปลี่ยนสีตัวหนังสือให้อ่านออกบนพื้นใหม่ */
.call-bar__static {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 100%;
  color: var(--on-surface);
  font-size: var(--fs-btn-lg);
  font-weight: 800;
  cursor: pointer;
}
.call-bar__static:active { background: var(--surface-2); }
/* เกณฑ์ "เดสก์ท็อปจริง" (ต้องผ่านครบ 3 ข้อ) — เหมือนกับ isDesktopPointer() ใน public/shared/device.js
   เป๊ะ ต้องแก้คู่กันเสมอถ้าจะปรับ ดูคำอธิบายเกณฑ์เต็มที่นั่น: เพดานความกว้าง + มีเมาส์/แทร็กแพดจริง (any-
   pointer: fine) + โฮเวอร์ได้จริง (hover: hover) กันจอสัมผัสล้วนที่บังเอิญกว้างพอ (แท็บเล็ต/จอพับ) ไม่ให้ถูก
   เข้าใจผิดว่าเป็นเดสก์ท็อปแล้วโดนปิดปุ่มโทร tel: — ถ้าไม่ผ่านครบ 3 ข้อ = เอียงไปทาง "โทรออกได้" เสมอ */
@media (min-width: 1024px) and (any-pointer: fine) and (hover: hover) {
  .call-bar { background: var(--surface-3); }
  .call-bar__link { display: none; }
  .call-bar__static { display: flex; }
}

/* เบอร์ยังไม่ผ่านรูปแบบ (ตัวอย่าง/ข้อมูลยังไม่ครบ) — ชี้ทางออกแทนลิงก์โทรที่ใช้งานไม่ได้จริง */
.call-bar__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--on-accent);
  font-size: var(--fs-btn);
  font-weight: 700;
  text-align: center;
  padding-inline: var(--sp-4);
}

/* ---------- footer (§4.3 ③) ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-6) var(--gutter);
  color: var(--on-surface-2);
  font-size: var(--fs-small);
}
.site-footer__inner {
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  gap: var(--sp-2);
}

/* ---------- เบอร์โทรในท้ายเว็บ (id="shop-phone" — จุดยึดที่ design/01-pages.md ผูกไว้) ----------
   มือถือ = ลิงก์ tel: ปกติ · เดสก์ท็อป = คัดลอกได้ (แก้บั๊กเดียวกับแถบโทร/ปุ่มโทร — เดิมเป็นลิงก์ tel: เสมอ
   ไม่ว่าอุปกรณ์ไหน ซึ่งบนเดสก์ท็อปกดแล้วไม่มีอะไรเกิดขึ้น) */
.footer-phone__link {
  color: var(--on-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-phone__static {
  display: none;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
@media (min-width: 1024px) and (any-pointer: fine) and (hover: hover) {
  .footer-phone__link { display: none; }
  .footer-phone__static { display: inline; }
}

/* ---------- ปุ่ม/การ์ด ใช้ร่วมกันหลายหน้า ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-h);
  padding: 0 var(--sp-5);
  border-radius: var(--radius);
  font-size: var(--fs-btn);
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:active { background: var(--accent-hot); }

.btn--secondary {
  background: var(--surface-2);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
}
.btn--secondary:active { background: var(--surface-3); }
.btn--secondary[aria-pressed="true"] {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: var(--sp-4);
  border: 1px solid var(--line);
}
@media (min-width: 768px) {
  .card { padding: var(--sp-5); }
}

.callout {
  background: var(--accent-dim);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.fine-print {
  font-size: var(--fs-fine);
  color: var(--on-surface-3);
  line-height: 1.6;
}
/* --on-surface-3 ผ่าน 7:1 เฉพาะบน --surface/--surface-2 (ดูคอมเมนต์ใน tokens.css) — บนพื้น
   --accent-dim (กล่อง .callout) วัดได้แค่ ~5.4:1 จึงต้องสลับไปใช้ --on-surface-2 (~7.7:1) แทนในบริบทนั้น */
.callout .fine-print {
  color: var(--on-surface-2);
}

/* ---------- ปุ่มโทรที่ไม่ใช่แถบล่าง (§1.2) — ใช้ซ้ำหลายหน้า ---------- */
.call-btn-wrap { width: 100%; }
.call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--btn-h);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-btn);
  font-weight: 700;
  text-decoration: none;
}
.call-btn--link:active { background: var(--accent-hot); }
/* เดสก์ท็อป: เหมือน .call-bar__static ข้างบน — พื้นสีรอง ไม่ใช่อำพัน (ไม่ใช่ปุ่ม "โทร" ปลอมอีกต่อไป) +
   คัดลอกได้จริงผ่าน makeCopyable() (public/shared/copy-phone.js) */
.call-btn--static {
  display: none;
  background: var(--surface-2);
  color: var(--on-surface);
  border: 1px solid var(--line-strong);
  user-select: text;
  cursor: pointer;
}
.call-btn--static:active { background: var(--surface-3); }
@media (min-width: 1024px) and (any-pointer: fine) and (hover: hover) {
  .call-btn--link { display: none; }
  .call-btn--static { display: flex; }
}
.call-btn__number {
  white-space: nowrap; /* เบอร์โทรห้ามขึ้นบรรทัดใหม่กลางเบอร์ (§3.4.8) */
  font-variant-numeric: tabular-nums;
}

/* ---------- ข้อความเสริม/ผลลัพธ์ของตัวคัดลอกเบอร์ (public/shared/copy-phone.js) ---------- */
.call-bar__hint,
.call-btn__hint,
.footer-phone__hint {
  font-size: var(--fs-small);
  font-weight: 500;
  opacity: 0.85;
}
.copy-feedback {
  font-size: var(--fs-small);
  font-weight: 700;
  margin-left: var(--sp-2);
}
/* .is-copyable ใส่โดย makeCopyable() เสมอ — โฟกัสต้องเห็นชัดเหมือนของกดได้ทุกชิ้น (§4.2) แม้ element ต้นทาง
   จะไม่ใช่ <button>/<a> ก็ตาม (:focus-visible ส่วนกลางของไฟล์นี้ครอบคลุมอยู่แล้วเพราะใช้ selector ทั่วไป) */
.is-copyable {
  touch-action: manipulation;
}

/* ---------- ป้ายสถานะเปิด/ปิด (design/01-pages.md §1.1) ----------
   "มีที่เดียว ใช้ 3 ที่" — ตรรกะคำนวณอยู่ที่ computeShopStatus() ใน public/shared/shop-hours.js
   (ใช้จริงที่ P1 รอบนี้ · วางสไตล์ไว้ในไฟล์ร่วมนี้ตั้งแต่ตอนนี้เพื่อให้ P6/ท้ายเว็บเรียกใช้ซ้ำได้ทันทีทีหลัง
   โดยไม่ต้องเขียนสไตล์ใหม่) ค่าเริ่มต้นในไฟล์ .html ทุกหน้าต้องเป็นสถานะ "ไม่ยืนยัน" เสมอ (§1.1) */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
}
.status-badge__time { font-variant-numeric: tabular-nums; }
.status-badge__dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.status-badge--unconfirmed {
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  color: var(--on-surface);
}
.status-badge--open,
.status-badge--closed {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--on-surface);
}
.status-badge--closing-soon {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  color: var(--on-surface);
}
.status-badge--open .status-badge__dot,
.status-badge--closing-soon .status-badge__dot {
  display: inline-block;
  background: var(--open);
}
.status-badge--closed .status-badge__dot {
  display: inline-block;
  background: var(--closed);
}
/* design/05-no-wasted-trip.md §6: ป้ายนี้ถูกซ่อนตอน closed-all-day แล้ว (แถบ .closed-banner พูดแทน)
   แต่ยังใส่กฎสีไว้เป็นเกราะสำรอง (defensive) เผื่อโค้ดอนาคตพลาดไม่ซ่อนป้าย — ไม่ปล่อยให้ไม่มี CSS เลย
   (ค้นแล้ว: ไม่มีจุดอื่นในโปรเจกต์ที่ render class นี้โดยไม่ผ่าน updateStatusBadge() ที่ตอนนี้ซ่อนมันไว้) */
.status-badge--closed-all-day {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--on-surface);
}

/* ---------- แถบ "วันนี้ร้านปิด" (design/05-no-wasted-trip.md §6.2/§6.3) ----------
   ⚠️ ข้อยกเว้นสัดส่วนสีอำพัน (§6.2): ใช้ได้เฉพาะสถานะ closed-all-day เท่านั้น — ห้ามใช้ที่อื่น (§6.5) */
.closed-banner {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.closed-banner__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--on-accent);
}
.closed-banner__sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--on-accent);
}
.closed-banner__call {
  margin-top: var(--sp-4);
}
/* ปุ่มในแถบเป็นพื้น --surface ไม่ใช่อำพัน (อำพันบนอำพันมองไม่ออก) — .call-btn/.call-btn--link/--static
   ของ site-chrome.js ตั้งพื้นหลังจาก token กลางอยู่แล้ว override เฉพาะสีตรงนี้ */
.closed-banner__call .call-btn {
  background: var(--surface);
  color: var(--on-surface);
}

.closed-banner--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 56px;
}
.closed-banner__compact-text {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--on-accent);
}
.closed-banner__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--on-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- ป้องกันรหัส/คำสั้นๆ ที่ "ห้ามตัดกลาง" ขึ้นบรรทัดใหม่กลางคำที่ 320px ----------
   ⚠️ แก้ 2026-07-31 หลังพบจริงบนมือถือ Android: เดิมคอมเมนต์นี้เขียนว่า "ล้นออกนอกกรอบเป็นก้อนเดียว ดีกว่าตัด
   คำแหว่ง" — ผิด "ล้นออกนอกกรอบ" คือบั๊กที่พบจริง (services-prices — ประโยคยาวที่ใส่ .text-nowrap ดันล้นขอบ
   การ์ด) ไม่ใช่ผลลัพธ์ที่ยอมรับได้ ห้ามใช้ 2 คลาสนี้เป็นข้ออ้างให้ของล้นขอบจอ

   ทั่วทั้งหน้า overflow-wrap: break-word (บรรทัดบน) ยอมตัดกลางคำได้เสมอเมื่อของยาวเกินที่ว่าง — นี่คือค่าเริ่มต้น
   ที่ถูกต้องสำหรับ "ประโยค/วลีอธิบาย" ทุกชนิด (รวมข้อความที่มาจากไฟล์ข้อมูล เพราะความยาวไม่จำกัด/แก้ได้ทีหลัง)
   ปล่อยให้ตกบรรทัดตามช่องว่างที่มีอยู่แล้วเสมอ **ห้ามใส่ .text-nowrap ให้ประโยคเต็ม**

   .text-nowrap / .num-nowrap มีไว้เฉพาะ "โทเคนเดี่ยวที่แปลความหมายผิดถ้าตัดกลาง" เท่านั้น — คำเดี่ยวไม่มี
   ช่องว่างภายในตัวมันเอง (เช่น "สอบถามหน้าร้าน" คำเดียว, เบอร์โทร, เบอร์ยาง 265/65R17) และความยาวของมัน
   คงที่/สั้นพอที่จะพิสูจน์ได้ว่าพอดีกับกล่องแคบสุดจริง (320px) ไม่ใช่แค่ "ดูสั้น" เฉยๆ:
     .text-nowrap — วลี/คำเดี่ยวสั้นคงที่ (ไม่ใช่ข้อความจากไฟล์ข้อมูลที่ยาวไม่จำกัดได้)
     .num-nowrap  — ตัวเลข/รหัส (เบอร์โทร เบอร์ยาง ราคา) เพิ่ม tabular-nums ให้เลขความกว้างเท่ากันด้วย
   ถ้าโทเคนเดี่ยวฝังอยู่กลางประโยคยาว (เช่น "เบอร์ยาง 265/65R17") ให้แยกเป็น text node คำนำหน้า (ปล่อยตกบรรทัด
   ปกติ) + span ของโทเคนเดี่ยวเท่านั้นที่ใส่คลาสนี้ — ห้ามใส่คลาสนี้ให้ทั้งประโยค
   ตรวจล้นจริงด้วย tools/check-overflow-320.js ที่ 320/360/390px ไม่ใช่แค่อ่านโค้ดแล้วเดา */
.text-nowrap { white-space: nowrap; }
.num-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* แอนิเมชันจำกัดเฉพาะ opacity/transform ยาวไม่เกิน 200ms (§5.2) และเคารพ reduced-motion เสมอ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}