/* ── ของที่ทุกหน้าสาธารณะใช้ร่วมกัน ───────────────────────────────────────
   โหลดโดย landing.html · privacy.html · terms.html · request-access.html
   ต้องโหลด *หลัง* tokens.css เสมอ เพราะบล็อกแรกทับค่าบันไดตัวอักษร

   ── บันไดตัวอักษรของหน้าร้าน ─────────────────────────────────────────────
   `tokens.css` ตั้งบันไดไว้สำหรับ *แอป* ซึ่งเป็นหน้าจอความหนาแน่นสูง คนใช้ทั้งวัน
   และรู้อยู่แล้วว่าอะไรอยู่ตรงไหน — 13px ที่นั่นจึงเหมาะ

   หน้าร้านเป็นคนละงาน: คนอ่านครั้งเดียว ไม่รู้จักของ อ่านบนมือถือกลางโรงงาน
   และหลายคนอายุ 40+ ค่าเดิมทำให้เนื้อความการ์ดเกือบทั้งหน้าตกไปอยู่ 13px
   ซึ่งเล็กเกินไปสำหรับงานนี้

   จึงยกทั้งบันไดขึ้นเฉพาะหน้าสาธารณะ แทนที่จะไปไล่แก้ `font-size` ทีละจุด
   (มี 20+ จุด — แก้ทีละจุดคือรับประกันว่าจะหลุดและเพี้ยนกันเอง)
   ค่าที่ตั้งชื่อความหมายเดิมไว้ทั้งหมด โค้ดที่เขียนว่า `var(--fs-base)` จึงยัง
   อ่านรู้เรื่องเหมือนเดิม แค่ได้ขนาดที่เหมาะกับหน้านี้ */

/* ── แถบเลื่อน ────────────────────────────────────────────────────────────────
   ค่าเดียวกับ `parts/01-base.css` ของแอฟเป๊ะ ๆ (thin · หัวจับ --line-2 · ราง
   โปร่ง · 8px · มุมกลม · hover เป็น --faint) — หน้าหน้าประตูไม่ได้โหลดไฟล์นั้น
   เพราะมันอยู่หลังด่าน session แถบเลื่อนที่นี่จึงเป็นของ OS มาตลอด
   ซึ่งเห็นชัดที่สุดในเมนูเลือกโรงงานที่ต้องเลื่อน: แถบเทาหนาแบบ Windows
   ยืนอยู่ข้างเมนูที่ทุกอย่างเป็นเส้นบางกับมุมกลม

   `scrollbar-gutter: stable` ต้องมีด้วย — เคยตัดออกโดยคิดว่าหน้าประตูสูงเท่าจอ
   อยู่แล้วจึงไม่ต้องจองราง **ผิด**: หน้าแรกยาวจนมีแถบเลื่อน ส่วน /login /guest
   /request-access ไม่มี พื้นที่จริงจึงต่างกัน 10px แกนกลางเลยเลื่อน 5px
   วัดได้ว่าโลโก้อยู่ที่ 200 บนหน้าแรก แต่ 205 บนอีกสามหน้า — เปลี่ยนหน้าแล้วโลโก้
   ขยับ ซึ่งเป็นการกระตุกที่ตาเห็นแต่คนบอกไม่ถูกว่าอะไรขยับ
   จองรางไว้ตลอดทุกหน้า แกนจึงนิ่งทั้งชุด */
html { scrollbar-gutter: stable; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-full); }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); }

:root {
  /* ── ความกว้าง — ประกาศที่เดียวใช้ทุกหน้า ────────────────────────────────
     `--page-max` เคยถูกเขียนเป็นเลข 1080 ไว้สามที่ (หน้าแรก · แถบหัวเอกสาร ·
     ท้ายหน้า) ซึ่งคือรูปแบบเดียวกับที่เคยทำให้ท้ายหน้าสองชุดเพี้ยนกัน

     ระยะอ่านไม่ตั้งเอง — ผูกกับ `--content-max` (720) ของแอป ซึ่ง tokens.css
     ระบุว่าเป็น "ระยะอ่าน: แชท + ลิสต์ = กว้างเท่า composer"
     ตัวอย่างแชทบนหน้าร้านจึงกว้างเท่ากับแชทจริงเป๊ะ ๆ */
  --page-max: 1080px;
  --read-max: var(--content-max);

  --fs-2xs: 13px;   /* app 10 — ไม่มีอะไรบนหน้าร้านเล็กกว่านี้ */
  --fs-xs:  13px;   /* app 11 — เวลา/ตัวเลขกำกับ/ท้ายหน้า */
  --fs-sm:  13px;   /* app 12 — ชิป แท็ก */
  --fs-base: 15px;  /* app 13 — เนื้อความในการ์ด ← จุดที่เจ็บที่สุด */
  --fs-md:  15px;   /* app 14 */
  --fs-lg:  17px;   /* app 15 — หัวการ์ด */
  --fs-xl:  17px;   /* app 16 — หัวข้อย่อย */
  --fs-2xl: 19px;   /* app 18 — หัวการ์ด */
}

/* ── lockup แบรนด์ — ใช้ร่วมทุกหน้าสาธารณะ ─────────────────────────────────
   เหตุที่ต้องอยู่ที่เดียว: ก่อนหน้านี้มันถูกนิยามสองที่ (inline ในหน้าแรก กับ
   .pub-* ใน public.css) พอแก้ที่หนึ่งอีกที่ค้างของเก่า — เส้นคั่นที่ถอดออกจาก
   หน้าแรกแล้วยังโผล่อยู่ทุกหน้าเอกสาร เป็นความเพี้ยนที่ไม่มีใครสังเกตจนผู้ใช้เห็น

   สิ่งที่ *ต่างกันจริง* ระหว่างหน้าแรกกับหน้าเอกสารคือ "แถบหัว" (หน้าแรก sticky
   และเปลี่ยนพื้นตอนเลื่อน · หน้าเอกสารนิ่ง) ไม่ใช่ตัว lockup — จึงแยกกันแค่ตรงนั้น

   ไม่มีเส้นคั่นและไม่มีการหรี่ opacity: โลโก้ที่ถูกหรี่ไว้อ่านว่า "ไม่มั่นใจ"
   ลำดับความสำคัญมาจากขนาดกับระยะเท่านั้น
     ปันปัญ  มาร์ค 26 · เวิร์ดมาร์ค 21
     opX     20 (ล็อกอัปสองบรรทัด จึงดูใหญ่กว่าค่าจริง) เว้นห่าง 16
   ระยะ 16 = ห่างกว่าช่องไฟภายใน lockup ปันปัญ (8) หนึ่งขั้น พอให้อ่านเป็น
   สองก้อน แต่ยังเป็นชุดเดียวกัน · 24 ที่ลองก่อนหน้าทำให้ดูเหมือนคนละของ */
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; min-width: 0;
  /* สูงเท่า --h-pill เพื่อให้แถบหัวสูง 12 + 36 + 12 = 60 = --topbar-h พอดี
     ซึ่งเป็นค่าที่ tokens.css อธิบายไว้ว่าทำให้แกนกลางตรงกับหัว sidebar ที่ 42 */
  height: var(--h-pill);
}
.brand-mark { height: 26px; width: auto; display: block; flex: none; }
.brand-name {
  font-family: var(--font-brand); font-size: 21px; line-height: 28px;
  letter-spacing: .01em; color: var(--text);
}
.brand-opx {
  height: 20px; width: auto; display: block; flex: none; margin-left: var(--sp-4);
  /* เลื่อนลง 3px ให้ "opX" อยู่ระดับเดียวกับ "ปันปัญ" ตามที่ตาเห็น
     ไม่ใช่ตามที่กล่องภาพบอก — ที่มาของตัวเลขอยู่ในคอมเมนต์ข้างบน */
  position: relative; top: 3px;
}
/* สลับ "ไฟล์" ตามธีม ไม่ใช่ฟอกสีด้วย filter ซึ่งจะกินไล่เฉดฟ้าของตัว X ทิ้งทั้งชุด */
.brand-opx-white { display: none; }
[data-theme="dark"] .brand-opx-ink { display: none; }
[data-theme="dark"] .brand-opx-white { display: block; }

/* ── ท้ายหน้าของผิวสาธารณะ — ใช้ร่วมกันทุกหน้า ────────────────────────────
   โหลดโดย landing.html · privacy.html · terms.html · request-access.html

   ทำไมแยกเป็นไฟล์ของตัวเอง: ก่อนหน้านี้ท้ายหน้าถูกเขียนสองรอบ — ชุดหนึ่งอยู่
   ใน <style> ของหน้าแรก อีกชุดอยู่ใน public.css ผลคือมันเพี้ยนกันจริงโดยไม่มี
   ใครสังเกต: บรรทัดแบรนด์เป็น --muted ที่หน้าหนึ่งและ --faint ที่อีกหน้า ·
   ความกว้างเขียนเป็น var(--col) กับ 1080px ทั้งที่ตั้งใจให้เท่ากัน
   ท้ายหน้าเป็นของชิ้นเดียวกันทุกหน้า มันจึงควรมีนิยามเดียว

   หน้าแรกมี <style> ของตัวเองอยู่ก่อน จึงต้องระวังไม่ให้ชื่อคลาสชนกัน —
   ที่นี่ใช้คำนำหน้า `site-` ซึ่งไม่มีใครใช้อยู่เดิม

   กฎเดียวกับทั้งโปรเจกต์: ห้าม literal สี · เส้น 1px เป็น box-shadow inset */

.site-foot {
  box-shadow: inset 0 1px 0 var(--line);
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  color: var(--muted); font-size: var(--fs-xs); line-height: 24px;
}
.site-foot-in {
  /* 1080 = ความกว้างเดียวกับเนื้อหาหน้าแรก ประกาศไว้ที่นี่ที่เดียว
     หน้าเอกสารคอลัมน์แคบกว่า แต่ท้ายหน้าใช้ความกว้างเต็มเหมือนกันหมด
     เพื่อให้เส้นคั่นด้านบนยาวเท่ากันทุกหน้า */
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3) var(--sp-6);
}
.site-foot-brand {
  color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease-ui);
}
.site-foot-brand:hover { color: var(--text); }
.site-foot-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.site-foot-nav a {
  color: var(--muted); text-decoration: none;
  transition: color .2s var(--ease-ui);
}
.site-foot-nav a:hover { color: var(--text); }
/* หน้าปัจจุบันยังอยู่ในรายการ ไม่ถูกตัดออก — รายการที่เปลี่ยนไปทุกหน้าทำให้คน
   จำไม่ได้ว่ามีอะไรบ้าง · แสดงเป็นข้อความจาง กดไม่ได้ แทนการหายไป */
.site-foot-nav [aria-current="page"] {
  /* แยกหน้าปัจจุบันด้วยน้ำหนักตัวอักษร ไม่ใช่ความจาง — --faint วัดได้ 3.11
     ซึ่งตกเกณฑ์ AA (4.5) และการหรี่ข้อความคือการแลกการอ่านออกไปกับสถานะ */
  color: var(--text); font-weight: var(--fw-semibold); pointer-events: none;
}
/* หมายเหตุเฉพาะหน้า (เช่น คำชี้แจงตัวอย่างบนหน้าแรก) — แถวที่สอง เต็มความกว้าง
   จึงไม่ไปดันแถวบนให้ห่อเมื่อจอแคบ */
.site-foot-note {
  flex-basis: 100%; margin: var(--sp-2) 0 0;
  color: var(--faint);
}

@media print { .site-foot { display: none; } }