@charset "UTF-8";
/* =============================================================
   Red Bee — สไตล์กลางของทั้งเว็บ (ยกจาก tulamtharn · SPEC 4.4.2)

   กติกาที่ยึดทั้งไฟล์
   1) mobile-first จริง ๆ: ทุกกฎในไฟล์นี้เขียนสำหรับจอ 360px ก่อน
      แล้วค่อยขยายด้วย @media (min-width:768px) / (min-width:1100px) ท้ายไฟล์
   2) สีทุกจุดอ้างตัวแปรเท่านั้น โหมดมืดจึงสลับที่ :root ที่เดียว ไม่ต้องไล่แก้รายจุด
   3) contrast ผ่าน WCAG AA (≥4.5:1) ทั้งสองโหมด — คู่สีที่ใช้จริงถูกคำนวณไว้แล้ว
      ตัวเลขที่กำกับไว้คือค่าที่วัดได้ ห้ามเปลี่ยนสีโดยไม่คำนวณใหม่
   4) ป้ายสีประเภทงาน/สถานะ ใช้สีเป็น "จุดกลม + เส้นขอบ" ไม่ใช่สีตัวอักษร
      เพราะตัวอักษรสีบนพื้นสีอ่อนมักตกเกณฑ์ 4.5:1 และคนตาบอดสีอ่านไม่ออกถ้าสีคือข้อมูลเดียว
   5) การเคลื่อนไหวใช้ --lt-dur / --lt-ease / --lt-lift / --lt-press เท่านั้น (150–250ms)
      กฎ prefers-reduced-motion ของส่วน 1 ปิดทุกอย่างที่เดียว — ห้ามเขียน translateY(-3px) หรือ .3s ตรง ๆ

   ── แผนที่ไฟล์ (Red Bee · แดง/ขาว/เทาหิน · 16 ต.ค. 2569) — แก้เฉพาะส่วนของตัวเอง จะได้ไม่ชนกัน ──
   ส่วน 0  ตัวแปร :root + โหมดมืด ........................................ เจ้าของ: ฐาน
   ส่วน 1  ฐาน: ตัวพิมพ์ ลิงก์ วงโฟกัส การเคลื่อนไหว ........................ เจ้าของ: ฐาน
   ส่วน 2  ชิ้นส่วนกลาง: โครงหน้า แถบบน แถบล่าง เมนูข้าง การ์ด การ์ดงาน ปุ่ม ป้าย
           สถานะว่าง flash ฟอร์ม select ตาราง เมนูย่อย ตัวสลับภาษา ท้ายหน้า ....... เจ้าของ: ฐาน
   ส่วน 3  โครงหน้าร่วม: หัวหน้า โซน note แท็บ pill ตัวแปรผัน ปุ่มเพิ่มเติม
           หน้าเข้าสู่ระบบ ฟอร์มกลุ่มช่อง ชิป รูปย่อ ............................ เจ้าของ: ฐาน
   ส่วน 4  หน้าเฉพาะ (ป้าย "ส่วน 4x" ที่หัวแต่ละโซน) ........................ เจ้าของ: คนที่รับหน้านั้น
   ส่วน 9  @media print ท้ายไฟล์ ........................................... เจ้าของ: ฐาน
   กติกาข้ามส่วน: โซนหน้าเฉพาะห้ามเขียนทับชิ้นส่วนกลางแบบทั้งเว็บ (เช่น .lt-btn { … } เปล่า ๆ)
   ให้ทับใต้คลาสของหน้าตัวเองเท่านั้น (.lt-shop-card .lt-btn) · ต้องการค่าใหม่ที่ใช้ร่วมหลายหน้า → ขอเพิ่มตัวแปรในส่วน 0
   ห้ามประกาศ --lt-* เองในโซนหน้า · ตารางตัวแปรทุกตัวพร้อม contrast ที่วัดได้อยู่ใน docs/DESIGN.md
   ============================================================= */

/* [hidden] ต้องซ่อนเสมอ แม้ Bootstrap จาก CDN โหลดไม่ขึ้น (ตรวจทานแชตส่วนตัว 14 ก.ย. 2569)
   กฎของเบราว์เซอร์เองแพ้ทุกกฎที่ตั้ง display ของคลาส (.lt-note flex · .lt-chat__composer grid · .lt-btn inline-flex)
   ตอน CDN ล่มหน้าแชตเคยขึ้น "แชตนี้ถูกทีมงานล็อกไว้" กับช่องพิมพ์ที่ควรซ่อน — คนอ่านเข้าใจผิดว่าถูกล็อก */
[hidden] { display: none !important; }

/* ══ ส่วน 0 · ตัวแปร ══════════════════════════════════════════ (เจ้าของ: ฐาน) ══
   ตัวแปรทุกตัว ค่าสว่าง/มืด ใช้ทำอะไร และ contrast ที่วัดด้วยเครื่อง → docs/DESIGN.md
   body.lt-home (หน้าแรก) ได้ค่าสว่างชุดนี้เสมอ ไม่ตามบล็อกโหมดมืดข้างล่าง — โหมดกลางคืนของหน้าแรกเป็นชุดกรมท่าของตัวเอง
   อยู่ใน layout/home.css (ตามเครื่อง + ปุ่มสลับ · 16 ต.ค. 2569) */

:root,
body.lt-home {
  /* ── Red Bee · แดงเลือดนก / ขาว / เทาหิน (SPEC 4.4.2) ─────────
     พื้นเทาหินอุ่น · หมึกเกือบดำอมแดง · แดงเรดบีเป็นสีหลักและ accent (ปุ่มหลัก ลิงก์ วงโฟกัส)
     danger เป็นสนิมส้ม (ไม่ใช่แดงตัวเดียวกับสีหลัก) จะได้แยก "ปุ่มหลัก" กับ "อันตราย" ออก — ป้ายเตือนมีไอคอน/คำกำกับเสมอ
     ตัวเลขกำกับคือ contrast WCAG ที่วัดด้วยสคริปต์ (16 ต.ค. 2569) — ห้ามเปลี่ยนสีโดยไม่วัดใหม่ */
  --lt-bg: #f5f2f1;
  --lt-surface: #fdfbfa;
  --lt-surface-2: #ece7e5;      /* พื้นรองในการ์ด แถบหัวตาราง */
  --lt-ink: #231a1a;            /* บน bg 15.3:1 · surface 16.5:1 · surface-2 13.9:1 */
  --lt-muted: #625756;          /* บน bg 6.2:1 · surface 6.7:1 · surface-2 5.7:1 · primary-soft 5.6:1 */
  --lt-primary: #a51f29;        /* แดงเรดบี — ตัวอักษร/ลิงก์บน bg 6.7:1 · surface 7.2:1 · surface-2 6.1:1 */
  --lt-primary-hover: #82161e;  /* ปุ่มหลักและลิงก์ตอนชี้ */
  --lt-primary-soft: #f7e1e2;   /* พื้นแดงอ่อน: เมนูที่เลือกอยู่ ปุ่มนุ่ม ชิปที่เลือก */
  --lt-on-soft: #5a0f15;        /* ตัวอักษรบน primary-soft 11.1:1 */
  --lt-on-primary: #ffffff;     /* ตัวอักษรบนปุ่มหลัก 7.4:1 */
  --lt-accent: #a51f29;         /* วงโฟกัส ข้อมูล — แดงเดียวกับสีหลัก · บน surface 7.2:1 */
  --lt-brass: #a07c4a;          /* ทองหม่น: เส้น/จุดตกแต่งเท่านั้น ห้ามเป็นสีตัวอักษร */
  --lt-brass-ink: #7a5a2a;      /* ทองที่ต้องอ่านเป็นตัวอักษร · บน bg 5.7:1 · surface 6.1:1 */
  --lt-ok: #2b6b55;             /* บน bg 5.6:1 · surface 6.1:1 */
  --lt-warn: #875f10;           /* บน bg 5.1:1 · surface 5.5:1 · surface-2 4.7:1 */
  --lt-danger: #9c3a10;         /* สนิมส้ม — บน bg 6.2:1 · surface 6.7:1 */
  --lt-on-danger: #fdfbfa;      /* ตัวอักษรบนพื้น danger 6.7:1 */

  --lt-border: #e3dcda;         /* เส้นตกแต่ง บางและเงียบ — ไม่ใช่ขอบช่องกรอก */
  --lt-border-strong: #cbc1bf;  /* ขอบปุ่มเส้น ป้าย ชิป */
  --lt-input-border: #857876;   /* ขอบช่องกรอก ≥ 3:1 (WCAG 1.4.11): surface 4.1:1 */

  /* สีประจำประเภทงาน (R7 · ชุดเดียวกับ c_task_types()) — ใช้กับจุดนำหน้าและแถบข้างการ์ดเท่านั้น ไม่ใช่สีตัวอักษร
     ทุกสีบน surface ≥ 3.9:1 */
  --lt-task-feeding: #2786b9;       /* 3.9:1 */
  --lt-task-water-change: #2b6767;  /* 6.3:1 */
  --lt-task-water-test: #9b712a;    /* 4.3:1 */
  --lt-task-bacteria: #6d4c9a;      /* 6.5:1 */
  --lt-task-fertilizer: #3d7a32;    /* 5.1:1 */
  --lt-task-mineral: #7a5c48;       /* 5.9:1 */
  --lt-task-filter-clean: #463c88;  /* 9.0:1 */
  --lt-task-medication: #8c1d3a;    /* 8.7:1 */
  --lt-task-count: #b4562a;         /* 4.7:1 */
  --lt-task-custom: #7b7372;        /* 4.5:1 */

  /* ── รูปทรง ── */
  --lt-radius: 16px;            /* การ์ด กล่อง ตาราง */
  --lt-radius-sm: 12px;         /* ปุ่ม ช่องกรอก flash note ป้ายเหลี่ยม */
  --lt-tap: 48px;               /* ปุ่มหลักสูงอย่างน้อยเท่านี้ */

  /* ── เงานุ่มหลายชั้น สีหมึกเขียว (ไม่ใช่ดำ) ── sm = ของที่วางบนพื้น · ปกติ = การ์ด · lg = ลอย/ตอนชี้ */
  --lt-shadow-sm: 0 1px 1px rgba(35, 26, 26, .05), 0 1px 3px rgba(35, 26, 26, .05);
  --lt-shadow: 0 1px 1px rgba(35, 26, 26, .04), 0 2px 6px rgba(35, 26, 26, .04), 0 12px 32px -8px rgba(35, 26, 26, .10);
  --lt-shadow-lg: 0 1px 2px rgba(35, 26, 26, .05), 0 8px 18px -6px rgba(35, 26, 26, .10), 0 24px 48px -12px rgba(35, 26, 26, .16);
  --lt-shadow-bar: 0 -1px 0 rgba(35, 26, 26, .04), 0 -8px 24px rgba(35, 26, 26, .06);
  /* วงโฟกัส 3px แดงเรดบี 75% — ≥ 3:1 กับพื้นทุกแบบ */
  --lt-ring: 0 0 0 3px rgba(165, 31, 41, .75);
  /* สีเดียวกับ --lt-ring แยกไว้ให้วงแบบมีช่องคั่น (ปุ่มพื้นทึบ: ปุ่มหลัก ปุ่มส่งแชต) — วงที่ติดปุ่มมอสได้แค่ 1.34:1 กับตัวปุ่ม
     (มืด 1.11) ดูเหมือนปุ่มแค่ขอบหนาขึ้น · ช่องคั่นสีพื้น 2px ทำให้วงแยกออกจากปุ่ม — ใช้คู่กับ --lt-ring-gap ในกฎของปุ่ม */
  --lt-ring-color: rgba(165, 31, 41, .75);

  /* ── ตัวพิมพ์ (โหลดใน layout/layout.php) ── */
  --lt-font-body: "IBM Plex Sans Thai", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --lt-font-display: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;   /* ชื่อหน้า หัวข้อส่วน ราคาในร้าน (Red Bee ใช้ฟอนต์เดียว) */
  --lt-font-num: var(--lt-font-body);   /* ตัวเลข (เวลา วันที่ เปอร์เซ็นต์ จำนวน) คู่กับ tabular-nums + ตัวหนา — ห้ามตัวมีหัว */

  /* ── การเคลื่อนไหว: 150–250ms · กฎ prefers-reduced-motion ในส่วน 1 ตั้งทุกตัวเป็นศูนย์ ── */
  --lt-ease: cubic-bezier(.2, .7, .2, 1);
  --lt-dur: .2s;
  --lt-dur-fast: .15s;
  --lt-lift: -2px;              /* การ์ดที่กดได้ยกขึ้นตอนชี้ */
  --lt-press: 1px;              /* ปุ่มยุบลงตอนกด */

  /* ── ขนาดโครง ── */
  --lt-topbar-h: 56px;
  --lt-bottomnav-h: 60px;
  --lt-safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;

  /* Bootstrap 5.3 อ่านตัวแปรพวกนี้ — ตั้งให้ตรงกับธีมเราตั้งแต่โหมดสว่าง
     จะได้ไม่ต้องเขียนทับ .btn/.dropdown ทีละคลาส */
  --bs-body-bg: var(--lt-bg);
  --bs-body-color: var(--lt-ink);
  --bs-body-font-family: var(--lt-font-body);
  --bs-border-color: var(--lt-border);
  --bs-border-radius: 10px;
  --bs-link-color: var(--lt-primary);
  --bs-link-hover-color: var(--lt-primary-hover);
  --bs-emphasis-color: var(--lt-ink);
  --bs-secondary-color: var(--lt-muted);
  /* <code> ทั้งเว็บ (เนื้อหาผู้ใช้ .lt-usertext ตารางหลังบ้าน) — ชมพูของ Bootstrap #d63384 บน surface-2 ได้ 3.69:1 (มืด 3.49)
     และเป็นสีนอกชุดแนว A สีเดียวที่ยังเห็นในหน้าจริง (รอบตรวจอิสระ 26 ก.ย. 2569) · accent สลับค่าเองในโหมดมืด:
     บน surface-2 4.9:1 · มืด 7.3:1 */
  --bs-code-color: var(--lt-accent);
}

/* ── โหมดมืด: สลับเฉพาะค่าตัวแปร ────────────────────────────
   หินกลางคืนอุ่น · แดงซีดเป็นสีหลัก (ตัวอักษรบนปุ่มหลักเป็นสีเข้ม) · ตัวอักษร #ede7e6 บน bg 15.5:1 · surface 14.5:1 */
@media (prefers-color-scheme: dark) {
  :root {
    --lt-bg: #131010;
    --lt-surface: #1b1717;
    --lt-surface-2: #241f1f;
    --lt-ink: #ede7e6;
    --lt-muted: #b1a7a5;        /* บน bg 8.1:1 · surface 7.6:1 · surface-2 6.9:1 · primary-soft 6.2:1 */
    --lt-primary: #f39398;      /* แดงซีด — บน bg 8.5:1 · surface 8.0:1 */
    --lt-primary-hover: #f8b3b6;
    --lt-primary-soft: #3a2224;
    --lt-on-soft: #f7dcde;      /* บน primary-soft 11.1:1 */
    --lt-on-primary: #1d0b0d;   /* ตัวอักษรบนปุ่มหลักในโหมดมืดต้องเป็นสีเข้ม 9.7:1 · ตอนชี้ 12.2:1 */
    --lt-accent: #f39398;       /* บน surface 8.1:1 */
    --lt-brass: #c9a879;        /* บน surface 7.5:1 */
    --lt-brass-ink: #d6b98d;    /* บน surface 8.9:1 */
    --lt-ok: #98d6bf;           /* 10.5:1 */
    --lt-warn: #f0c463;         /* 10.6:1 */
    --lt-danger: #f6a777;       /* บน surface 6.7:1 · bg 7.2:1 */
    --lt-on-danger: #131010;    /* ตัวอักษรบนพื้น danger 7.2:1 (พื้นแดงโหมดมืดสว่าง ตัวอักษรต้องเข้ม) */

    --lt-border: #2f2828;
    --lt-border-strong: #433a3a;
    --lt-input-border: #7c7170; /* ≥ 3:1: surface 3.7 · bg 4.0 · surface-2 3.4 */


    --lt-task-feeding: #aed6f7;
    --lt-task-water-change: #51b4b4;
    --lt-task-water-test: #f5ba5f;
    --lt-task-bacteria: #b9a0e3;
    --lt-task-fertilizer: #8fd17f;
    --lt-task-mineral: #d3b39c;
    --lt-task-filter-clean: #8a8dda;
    --lt-task-medication: #e0798a;
    --lt-task-count: #f2a271;
    --lt-task-custom: #cbc3c2;

    --lt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --lt-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25), 0 12px 32px -8px rgba(0, 0, 0, .5);
    --lt-shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 18px -6px rgba(0, 0, 0, .5), 0 24px 48px -12px rgba(0, 0, 0, .6);
    --lt-shadow-bar: 0 -1px 0 rgba(255, 255, 255, .03), 0 -8px 24px rgba(0, 0, 0, .45);
    --lt-ring: 0 0 0 3px rgba(243, 147, 152, .7);   /* bg 4.3 · surface 4.2 · surface-2 3.9 */
    --lt-ring-color: rgba(243, 147, 152, .7);

    color-scheme: dark;

    --bs-link-hover-color: var(--lt-primary-hover);
    --bs-tertiary-bg: var(--lt-surface-2);
    --bs-secondary-bg: var(--lt-surface-2);

    /* คอมโพเนนต์ของ Bootstrap ที่พ่นพื้นหลังของตัวเอง */
    --bs-dropdown-bg: var(--lt-surface);
    --bs-dropdown-color: var(--lt-ink);
    --bs-dropdown-border-color: var(--lt-border);
    --bs-dropdown-divider-bg: var(--lt-border);
    --bs-dropdown-link-color: var(--lt-ink);
    --bs-dropdown-link-hover-bg: var(--lt-surface-2);
    --bs-dropdown-link-hover-color: var(--lt-ink);
    --bs-dropdown-link-active-bg: var(--lt-primary-soft);
    --bs-dropdown-link-active-color: var(--lt-ink);
    --bs-table-bg: transparent;
    --bs-table-color: var(--lt-ink);
    --bs-table-border-color: var(--lt-border);
  }
}

/* ══ ส่วน 1 · ฐาน: ตัวพิมพ์ ลิงก์ วงโฟกัส การเคลื่อนไหว ═══════════ (เจ้าของ: ฐาน) ══ */

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

/* scroll-padding: ชิ้นที่โฟกัสด้วยแป้นพิมพ์และเป้าของลิงก์ #anchor ต้องไม่จมใต้แถบบน (sticky 56px) หรือแถบล่างของมือถือ
   (fixed 60px) — รอบตรวจอิสระ 26 ก.ย. 2569 กด Tab ทีละครั้งบนมือถือ: ปุ่ม "ทำแล้ว" อยู่ใต้แถบล่างทั้งปุ่ม (/app 3 จาก 5 จุด)
   และ Shift+Tab บนจอกว้างจมใต้แถบบน (WCAG 2.4.11) · หน้าสาธารณะไม่มีแถบล่าง ระยะล่างที่เผื่อไว้แค่เลื่อนเกินนิดเดียว ไม่มีผลเสีย
   จอกว้างไม่มีแถบล่าง: ค่าล่าง 12px อยู่บรรทัดแรกของบล็อกจอกว้าง (min-width: 768px) ในส่วน 2 "จอใหญ่ขึ้น" — ห้ามเปิดบล็อก 768px
   ใหม่ก่อนบล็อกนั้น เพราะ tests/test_nav_admin_links.php ถือว่าบล็อก 768px แรกของไฟล์คือบล็อกที่ซ่อน .lt-topbar__admin (27 ก.ย. 2569) */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--lt-topbar-h) + 12px);
  scroll-padding-bottom: calc(var(--lt-bottomnav-h) + var(--lt-safe-b) + 12px);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--lt-bg);
  color: var(--lt-ink);
  /* IBM Plex Sans Thai มีทั้งไทยและละตินในชุดเดียว ตัวเลขคมและกว้างเท่ากันเมื่อเปิด tabular-nums — ไม่ต้องพึ่ง Inter อีกตัว */
  font-family: var(--lt-font-body);
  font-size: 16px;    /* ต่ำกว่า 16px ทำให้ Safari บน iOS ซูมเข้าเองตอนโฟกัสช่องกรอก */
  line-height: 1.7;   /* อักษรไทยมีสระบน-ล่าง ต้องการช่องไฟแนวตั้งมากกว่าละติน */
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.45; font-weight: 600; }

/* ย่อหน้าไม่ทิ้งคำเดียวไว้บรรทัดท้าย — IBM Plex Sans Thai กว้างกว่าฟอนต์ชุดเดิม ย่อหน้าหลายจุดจึงเหลือ "ตัว" หรือ "ได้"
   คำเดียวบรรทัดสุดท้าย (รอบตรวจอิสระ 26 ก.ย. 2569: ป้ายยอมรับนโยบายในหน้าสมัครกลายเป็น "นโยบายความเป็นส่วน / ตัว")
   เบราว์เซอร์ที่ไม่รู้จัก text-wrap: pretty ตัดบรรทัดแบบเดิม ไม่มีผลเสีย · หน้าแรกตั้งของตัวเองใน home.css อยู่แล้ว */
p, li, label, dd, dt, blockquote, figcaption, summary, .lt-help { text-wrap: pretty; }

/* ตัวมีหัว (Noto Serif Thai) เก็บไว้เฉพาะชื่อหน้า หัวข้อส่วน และราคาในร้าน — h1 คือชื่อหน้าเสมอ
   h2 ลงไปคงตัวเนื้อความตัวหนา (หัวการ์ด หัวกลุ่ม ไม่ใช่ "ชื่อหน้า") */
h1 { font-family: var(--lt-font-display); font-weight: 600; letter-spacing: 0; }

/* ตัวเลขที่ต้องเทียบกันเป็นแถว (เวลา 07:30 วันที่ เปอร์เซ็นต์ จำนวน) — ตัวธรรมดาตัวหนา กว้างเท่ากัน ห้ามตัวมีหัว
   ใช้ได้ทั้งเป็นคลาส (.lt-num) และคัดสามบรรทัดนี้ไปใส่ในคลาสของหน้าเอง */
.lt-num {
  font-family: var(--lt-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
}

/* ลิงก์ในเนื้อความ: เส้นใต้บางจาง ๆ เข้มขึ้นตอนชี้ — ยังเป็นเส้นใต้เสมอ คนจึงดูออกว่ากดได้
   เบราว์เซอร์ที่ไม่รู้จัก color-mix ทิ้งบรรทัดสีเส้นใต้ไป แล้วได้เส้นสีเดียวกับตัวอักษรแทน */
a {
  color: var(--lt-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--lt-dur) var(--lt-ease), text-decoration-color var(--lt-dur) var(--lt-ease);
}
a:hover { color: var(--bs-link-hover-color); text-decoration-color: currentColor; }

/* วงแหวนโฟกัสเห็นชัดทุกที่ — คนที่ใช้แป้นพิมพ์ล้วนต้องรู้ว่าตอนนี้อยู่ตรงไหน
   ใช้ :focus-visible ไม่ใช่ :focus จะได้ไม่ขึ้นวงตอนกดด้วยนิ้ว
   ชิ้นส่วนกลางหลายตัวเปลี่ยนเป็นวงนุ่ม box-shadow: var(--lt-ring) (3px หินชนวนอมฟ้า ≥ 3:1) */
:focus-visible {
  outline: 2px solid var(--lt-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* โหมดสีบังคับของ Windows (High Contrast) ไม่วาด box-shadow — จุดที่ใช้วงโฟกัสแบบ box-shadow
   (outline: none) จะไม่เหลือวงเลย จึงคืน outline สีระบบให้ทุกจุด (!important เพราะต้องชนะ outline: none ของคอมโพเนนต์) */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px; }
}

hr { border: 0; border-top: 1px solid var(--lt-border); opacity: 1; margin: 1.25rem 0; }

::selection { background: var(--lt-primary-soft); color: var(--lt-on-soft); }

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว — ปิดทุกอย่างที่ขยับ ที่เดียวจบ
   · ตัวแปรการเคลื่อนไหวเป็นศูนย์: การ์ดไม่ยก ปุ่มไม่ยุบ (transform ที่ใช้ --lt-lift/--lt-press กลายเป็น 0)
   · ทรานซิชันและแอนิเมชันทุกตัวจบทันที แม้กฎในโซนหน้าเขียนเวลาตรง ๆ ไว้
   JS ที่ขยับเอง (สไลด์รูป) ต้องเช็ค matchMedia เอง — CSS หยุด setInterval ไม่ได้ */
@media (prefers-reduced-motion: reduce) {
  :root,
  body.lt-home {
    --lt-dur: 0s;
    --lt-dur-fast: 0s;
    --lt-lift: 0px;
    --lt-press: 0px;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ ส่วน 2 · ชิ้นส่วนกลาง ══════════════════════════════════════ (เจ้าของ: ฐาน) ══
   ทุกชิ้นใช้ตัวแปรของส่วน 0 ล้วน ไม่มีสีดิบ ไม่มีบล็อก prefers-color-scheme ของตัวเอง */

/* ── โครงหน้า ───────────────────────────────────────────── */

.lt-shell { display: flex; flex-direction: column; min-height: 100svh; }

/* คอลัมน์ขวาของหน้าในระบบ (แถบบน + เนื้อหา) — min-width:0 ที่นี่จำเป็น
   ไม่งั้นตารางกว้าง ๆ ข้างในจะดันคอลัมน์จนเมนูข้างหด (ไม่เกี่ยวกับกฎห้าม min-width:0 ของ "ตาราง") */
.lt-col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.lt-main {
  flex: 1 1 auto;
  width: 100%;
  padding: 16px 16px 24px;
  /* กันแถบล่างมือถือทับเนื้อหาบรรทัดสุดท้าย + เผื่อขอบล่างของ iPhone */
  padding-bottom: calc(var(--lt-bottomnav-h) + var(--lt-safe-b) + 24px);
}

.lt-main--bare { padding-bottom: calc(var(--lt-safe-b) + 24px); }

.lt-wrap { width: 100%; max-width: 720px; margin-inline: auto; }
.lt-wrap--wide { max-width: 1140px; }

/* ลิงก์ข้ามไปเนื้อหา — ซ่อนจนกว่าจะโฟกัสด้วย Tab (a11y) */
.lt-skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 1200;
  padding: 12px 18px;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-primary);
  color: var(--lt-on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--lt-dur-fast) var(--lt-ease);
}
.lt-skip:focus { top: 8px; color: var(--lt-on-primary); }

/* ── แถบบน ──────────────────────────────────────────────── */

.lt-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--lt-topbar-h);
  padding: 4px 8px;
  padding-top: calc(4px + env(safe-area-inset-top, 0px));
  /* แนว A: พื้นทึบ + เส้นล่างบาง — เลิกกระจกฝ้า (backdrop-filter) ตามกติกา "หรูแบบเงียบ" ของเจ้าของ
     พื้นทึบยังได้ผลดีอีกข้อ: ไม่ต้องมีทางสำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก color-mix */
  background: var(--lt-surface);
  border-bottom: 1px solid var(--lt-border);
}

.lt-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--lt-font-display);   /* ชื่อหน้า = ตัวมีหัว */
  font-size: 1.0625rem;
  font-weight: 600;
  /* 1.6 ไม่ใช่ 1.3: overflow: hidden ข้างล่างตัดทุกอย่างที่ล้นกล่องบรรทัด และตัวอักษร Noto Serif Thai สูง 1.59em
     (วัดจริง 9 ต.ค. 2569: ที่ 17px ตัวอักษรสูง 27px แต่กล่อง 22px — ไม้โทของ "วันนี้" "คำสั่งซื้อ" ถูกเฉือนแบนทุกหน้าในระบบ)
     แถบบนสูงเท่าเดิม: ชื่อหน้าจัดกึ่งกลางในแถบ 56px ซึ่งมีที่ให้ 48px */
  line-height: 1.6;
  /* ชื่อหน้ายาว ๆ ต้องตัดบรรทัดเดียว ไม่งั้นแถบบนสูงขึ้นแล้วเนื้อหาเลื่อนลง */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lt-topbar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--lt-ink);
  text-decoration: none;
}
.lt-topbar__brand svg { flex: none; }

/* โลโก้จริง (assets/img/home/logo*.png) แทน favicon+ชื่อเว็บ — ขนาดตามความสูงแถบ ความกว้างตามสัดส่วนไฟล์ (3.27:1)
   สีของโลโก้สลับด้วย <picture> ใน nav_brand() ตาม prefers-color-scheme สีของหน้าไม่เปลี่ยน */
.lt-brand--logo picture { display: block; line-height: 0; }
.lt-brand--logo img { display: block; width: auto; height: 36px; }
/* ผู้ดูแลมีปุ่มคิวอนุมัติเพิ่มบนแถบบน จอแคบกว่า 400px ชื่อหน้าของแท็บหลักถูกตัดเหลือไม่กี่ตัวอักษร จึงซ่อนโลโก้แทน
   (วัดจริง 11 ก.ย. 2569: 360px เหลือที่ให้ชื่อหน้า 66px · 320px เหลือ 26px) · ไปภาพรวมได้จากแถบล่าง */
@media (max-width: 399px) {
  .lt-topbar--admin .lt-topbar__brand--app { display: none; }
}
/* โลโก้ของแถบบนในระบบ (มือถือเท่านั้น — จอ ≥768px ซ่อนตัวนี้) สูง 28px ไม่ใช่ 36px: ปุ่มเมนู "เพิ่มเติม" (.lt-appmore) กินที่บนแถบอีก 48px
   ย่อโลโก้ลง 26px ชื่อหน้าของแท็บหลักจึงยังไม่ถูกตัด (วัดจริง 9 ต.ค. 2569: ชื่อยาวสุด "ปลาของฉัน" 82px · "Calendar" 77px
   เหลือที่ให้ชื่อ 93px ที่จอ 360 · 108px ที่ 375 · ผู้ดูแลซึ่งมีปุ่มคิวอนุมัติอีกปุ่ม 85px ที่จอ 400)
   จอแคบกว่า 350px (ที่ 350 เหลือ 83px พอดี) จึงซ่อนโลโก้ของสมาชิกด้วย แบบเดียวกับของผู้ดูแลข้างบน — ไปหน้าแรกได้จากเมนู "เพิ่มเติม" */
.lt-topbar__brand--app.lt-brand--logo img { height: 28px; }
@media (max-width: 349px) {
  .lt-topbar__brand--app { display: none; }
}
/* iOS Smart Invert กลับสีพื้นแต่ไม่กลับรูป → โลโก้ครีมไปอยู่บนพื้นสว่าง กลับสีรูปตามไปด้วยให้ยังอ่านออก */
@media (inverted-colors: inverted) {
  .lt-brand--logo img { filter: invert(1) hue-rotate(180deg); }
}

/* ปุ่มไอคอนบนแถบบน — 44px คือขนาดต่ำสุดที่แนะนำให้กดด้วยนิ้ว */
.lt-iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--lt-radius-sm);
  background: transparent;
  color: var(--lt-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), transform var(--lt-dur-fast) var(--lt-ease);
}
.lt-iconbtn:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
.lt-iconbtn:active { transform: translateY(var(--lt-press)); }
/* จอมือถือและจอสัมผัส: สูงเต็ม --lt-tap 48px ตามกติกาปุ่ม (รอบตรวจอิสระ 26 ก.ย. 2569: กระดิ่ง ปุ่มภาษา คิวอนุมัติ 44px
   บน 30 หน้า — ปุ่มที่กดบ่อยที่สุดของเว็บ) · แถบบนสูง 56px วางปุ่ม 48px ได้พอดี · กว้างคง 44px
   เพราะผู้ดูแลมีสามปุ่มบนแถบ ถ้ากว้างขึ้นด้วยชื่อหน้าที่ 360px จะเหลือไม่ถึง 60px (เป้ากด 44×48 ยังเกิน 44×44 ของ WCAG 2.5.5) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-iconbtn { height: var(--lt-tap); }
}

/* ป้ายตัวเลขแจ้งเตือนบนไอคอน — เดิมโหมดมืดใช้แดงดิบ #dc2626 ตอนนี้ใช้คู่ danger/on-danger ทั้งสองโหมด
   (สว่าง 8.1:1 · มืด 7.2:1) · วงสีพื้นแถบ 2px รอบป้ายแยกป้ายออกจากเส้นของไอคอนกระดิ่ง */
.lt-badge-dot {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--lt-danger);
  color: var(--lt-on-danger);
  box-shadow: 0 0 0 2px var(--lt-surface);
  font-family: var(--lt-font-num);
  font-size: .6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
}

/* ── แถบล่าง (เฉพาะจอ < 768px) ──────────────────────────── */

.lt-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--lt-surface);
  border-top: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-bar);
  /* ขอบล่างของ iPhone รุ่นไร้ปุ่มโฮม — ถ้าไม่เผื่อ ปุ่มจะโดนแถบลากของระบบทับ */
  padding-bottom: var(--lt-safe-b);
}

.lt-bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;          /* ตามสเปก: กดง่ายด้วยนิ้วโป้ง */
  padding: 6px 2px;
  color: var(--lt-muted);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  position: relative;        /* ขีดของเมนูที่เลือกอยู่ (::before) วางชิดขอบบนของปุ่มนี้ */
  transition: color var(--lt-dur) var(--lt-ease);
}
.lt-bottomnav__item svg { width: 24px; height: 24px; flex: none; }
.lt-bottomnav__item:hover { color: var(--lt-ink); }
.lt-bottomnav__item[aria-current="page"] { color: var(--lt-primary); font-weight: 700; }

/* ขีดสั้น ๆ เหนือเมนูที่เลือกอยู่ — สีอย่างเดียวไม่พอสำหรับคนตาบอดสี
   ต้องมี top/left เอง: เดิมไม่มี inset ตำแหน่งจึงเป็นจุดกลางของปุ่ม (flex แนวตั้งจัดกลาง) ขีดทับครึ่งล่างของไอคอน
   บ้านดูมีแท่งพาดกลาง (ตรวจทานหน้าจอรอบสุดท้าย 14 ก.ย. 2569)
   แนว A: ขีดเป็นเส้นทองเหลืองบาง (บน surface 3.7:1 · มืด 7.5:1) — ตัวหนา + สีมอสของตัวอักษรยังบอกอยู่ด้วย */
.lt-bottomnav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--lt-brass);
}

/* ── เมนูข้าง (เฉพาะจอ ≥ 768px) ─────────────────────────── */

.lt-side { display: none; }

/* ── การ์ด ──────────────────────────────────────────────── */

.lt-card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  box-shadow: var(--lt-shadow);
  padding: 18px;
}
.lt-card + .lt-card { margin-top: 14px; }

/* การ์ดที่ทั้งใบกดได้ — <a class="lt-card …"> (การ์ดตู้ สินค้า ประกาศตลาด ห้องแชต กล่องข้อความ)
   หรือการ์ดอื่นที่เติมคลาส .lt-card--link · ยกขึ้นนิดเดียวตอนชี้ (--lt-lift) กดแล้ววางลง
   ยกเฉพาะอุปกรณ์ที่ชี้ได้จริง — จอสัมผัสไม่มี hover ที่แท้ การ์ดจะค้างลอยหลังแตะ */
a.lt-card,
.lt-card--link {
  transition: transform var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease),
              border-color var(--lt-dur) var(--lt-ease);
}
@media (hover: hover) and (pointer: fine) {
  a.lt-card:hover,
  .lt-card--link:hover {
    transform: translateY(var(--lt-lift));
    border-color: var(--lt-border-strong);
    box-shadow: var(--lt-shadow-lg);
  }
}
a.lt-card:active,
.lt-card--link:active { transform: none; box-shadow: var(--lt-shadow-sm); }

.lt-card__title { margin: 0 0 4px; font-size: 1rem; font-weight: 600; }
.lt-muted { color: var(--lt-muted); }
.lt-small { font-size: .875rem; }

/* ── การ์ดงาน — ตัวเอกของหน้าแดชบอร์ด ───────────────────── */

/* ไม่มี overflow: hidden แล้ว — เคยใช้ตัดแถบสีชนขอบของชุดเดิมให้โค้งตามมุมการ์ด แต่มันตัดแผงเมนู ⋮ (position: absolute)
   ทิ้งไป 137 จาก 198px ด้วย: "เลื่อนไป 1 ชม. / พรุ่งนี้ / ข้ามครั้งนี้" กดไม่ได้ในทุกการ์ดงานทุกหน้า (รอบตรวจอิสระ 26 ก.ย. 2569
   · มีมาตั้งแต่ก่อนรอบแต่ง) · แนว A แถบสีลอยในการ์ด (::before ข้างล่าง) จึงไม่มีอะไรต้องตัดอีก */
.lt-task {
  position: relative;
  padding-left: 26px;   /* เว้นที่ให้แถบสีประเภทงานด้านซ้าย */
}

/* แถบสีบอกประเภทงาน ตั้งค่าจริงผ่าน --lt-task-color ที่ตัวการ์ด
   แนว A: เส้นตั้งบาง 3px ลอยในการ์ด (ไม่ใช่แผ่นสีชนขอบ) — สีงานทุกสีบน surface ≥ 3.3:1 จึงยังเห็นชัด
   ประเภทงานมีป้ายชื่อ (.lt-pill) ในการ์ดอีกชั้น สีจึงไม่ใช่ข้อมูลเดียว */
.lt-task::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--lt-task-color, var(--lt-task-custom));
}

/* กด "ทำแล้ว" ด้วยแป้นพิมพ์: ปุ่มหายไปกับฟอร์ม สคริปต์ใน layout.php คืนโฟกัสให้ตัวการ์ด (tabindex="-1")
   วงโฟกัสนุ่มแบบเดียวกับชิ้นอื่น — กฎ :focus-visible ของส่วน 1 จะเปลี่ยนมุมการ์ดเป็น 6px จึงตั้งมุมคืนที่นี่ */
.lt-task:focus-visible { outline: none; border-radius: var(--lt-radius); box-shadow: var(--lt-ring), var(--lt-shadow-sm); }

.lt-task__head { display: flex; align-items: flex-start; gap: 10px; }
.lt-task__body { flex: 1 1 auto; min-width: 0; }

/* เวลา 07:30 — ตัวเลขตัวธรรมดาตัวหนา กว้างเท่ากัน (ผู้ตัดสินสั่ง: ห้ามตัวมีหัวกับตัวเลข) */
.lt-task__time {
  font-family: var(--lt-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.lt-task__title {
  margin: 2px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  overflow-wrap: anywhere;   /* ชื่อตู้ยาว ๆ ไม่มีช่องว่างต้องตัดได้ ไม่งั้นดันการ์ดล้น */
}

.lt-task__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--lt-muted);
  font-size: .875rem;
}

/* แถวปุ่ม: "ทำแล้ว" กินพื้นที่เกือบทั้งแถว ปุ่มเมนูรองเล็กอยู่ข้าง ๆ
   ตามสเปก 5.9 — ปุ่มหลักต้องเด่นและอยู่ในระยะนิ้วโป้ง */
.lt-task__actions {
  display: flex;
  flex-wrap: wrap;          /* แผงบันทึกรายละเอียดต้องลงบรรทัดใหม่ ไม่เบียดอยู่ข้างปุ่ม */
  gap: 8px;
  margin-top: 14px;
}
.lt-task__actions .lt-btn--done { flex: 1 1 auto; }

/* ── แผงบันทึกรายละเอียดตอนทำจริง ────────────────────────────
   อยู่ในฟอร์มเดียวกับปุ่ม "ทำแล้ว" กางด้วย <details> จึงทำงานได้แม้ JS ปิด
   ปิดอยู่เป็นค่าเริ่มต้น เพราะคนส่วนใหญ่กดทำแล้วเฉย ๆ ไม่ได้บันทึกรายละเอียดทุกครั้ง */
.lt-tasklog { flex: 1 0 100%; }

.lt-tasklog__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 4px;
  color: var(--lt-muted);
  font-size: .9375rem;
  cursor: pointer;
  list-style: none;                       /* ซ่อนสามเหลี่ยมประจำ <details> */
}
.lt-tasklog__toggle::-webkit-details-marker { display: none; }
.lt-tasklog__toggle::marker { content: ""; }
.lt-tasklog__toggle:hover { color: var(--lt-ink); }
.lt-tasklog__toggle:focus-visible { outline: none; border-radius: 10px; box-shadow: var(--lt-ring); }
.lt-tasklog[open] .lt-tasklog__toggle { color: var(--lt-ink); font-weight: 600; }
/* มือถือและจอสัมผัส: "บันทึกรายละเอียด" อยู่ในทุกการ์ดงาน เดิม 40px (รอบตรวจอิสระ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-tasklog__toggle { min-height: var(--lt-tap); }
}

.lt-tasklog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
}

.lt-tasklog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.lt-tasklog__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lt-tasklog__field > span {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;                        /* สระบน/ล่างของไทยต้องการช่องไฟ */
  color: var(--lt-muted);
}

.lt-tasklog__hint {
  margin: 0;
  color: var(--lt-muted);
  font-size: .8125rem;
  line-height: 1.65;
}

@media (min-width: 480px) {
  .lt-tasklog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-tasklog__field--wide { grid-column: 1 / -1; }
}

/* การ์ดที่ทำแล้ว — เดิมจางทั้งใบ 72% ชื่อตู้สีรองในการ์ดจึงเหลือ 3.32:1 (วัดแนว A 26 ก.ย. 2569)
   บอก "ทำแล้ว" ด้วยของที่ไม่ใช่ความจาง: เวลาและชื่องานเป็นสีรอง (6.2:1 · มืด 7.7:1) + ขีดฆ่าชื่อ + เส้นสีประเภทงานจางลง
   (ตกแต่ง ป้ายชื่อประเภทงานยังอยู่) + เงาบางลงเป็นของที่ "วางลงแล้ว" + ป้ายสถานะ "ทำแล้ว" ในการ์ด
   ย้ายมาจากโซน 4a (เดิมทับเฉพาะ [data-lt-task-card]) ให้การ์ดงานทุกใบได้แบบเดียวกัน · ทรานซิชันตอนกดยังอยู่ที่โซน 4a */
.lt-task--done { box-shadow: var(--lt-shadow-sm); }
.lt-task--done::before { opacity: .4; }
.lt-task--done .lt-task__time,
.lt-task--done .lt-task__title { color: var(--lt-muted); }
.lt-task--done .lt-task__title { text-decoration: line-through; }

/* ── ปุ่ม ───────────────────────────────────────────────── */

.lt-tap { min-height: var(--lt-tap); }

.lt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lt-tap);
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease),
              box-shadow var(--lt-dur) var(--lt-ease), color var(--lt-dur) var(--lt-ease),
              transform var(--lt-dur-fast) var(--lt-ease);
}
.lt-btn:hover { color: var(--lt-ink); background: var(--lt-border); }
/* กดแล้วยุบลง 1px (--lt-press) — ปุ่มที่กดไม่ได้ไม่ยุบ */
.lt-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(var(--lt-press)); }
.lt-btn:disabled, .lt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ปุ่มหลัก: มอสทึบ เงานุ่มชั้นเดียว ชี้แล้วเข้มขึ้นและเงาลึกขึ้นนิดหนึ่ง (ไม่มีเงาสี ไม่มีแสงเรือง) */
.lt-btn--primary { background: var(--lt-primary); color: var(--lt-on-primary); box-shadow: var(--lt-shadow-sm); }
.lt-btn--primary:hover { background: var(--lt-primary-hover); color: var(--lt-on-primary); box-shadow: var(--lt-shadow); }

/* ปุ่มเส้น: พื้นการ์ดทึบ (ไม่โปร่ง) ชี้แล้วขอบเข้มเท่าขอบช่องกรอก + เงาบาง */
.lt-btn--outline { background: var(--lt-surface); border-color: var(--lt-border-strong); }
.lt-btn--outline:hover { background: var(--lt-surface); border-color: var(--lt-input-border); box-shadow: var(--lt-shadow-sm); }

/* ปุ่มลบ: ชี้แล้วเป็นพื้นแดง ตัวอักษร on-danger (สว่าง 8.1:1 · มืด 7.2:1) — เดิมมีสีดิบแยกสองโหมด */
.lt-btn--danger { background: transparent; border-color: var(--lt-danger); color: var(--lt-danger); }
.lt-btn--danger:hover { background: var(--lt-danger); border-color: var(--lt-danger); color: var(--lt-on-danger); }

/* วงโฟกัสนุ่มของปุ่มทุกแบบ — ประกาศหลังสีของปุ่มหลักจึงชนะเงาเดิม (ปุ่มหลักต่อเงาบางไว้ข้างหลังวง) */
.lt-btn:focus-visible { outline: none; box-shadow: var(--lt-ring); }
/* ปุ่มหลักพื้นมอสทึบ: วงที่ติดตัวปุ่มกลืนเป็นขอบหนา (วงกับปุ่ม 1.34:1 · มืด 1.11 — รอบตรวจอิสระ 26 ก.ย. 2569)
   จึงเว้นช่องคั่นสีพื้น 2px ก่อนวง 3px · ช่องคั่นเป็นสีการ์ดโดยค่าเริ่มต้น ปุ่มที่วางบนพื้นหน้าตั้ง --lt-ring-gap: var(--lt-bg) ที่กล่องแม่ได้
   วงกับพื้นหน้ายังเท่าเดิม (bg 3.5 · surface 3.8 · มืด 4.3 / 4.2) */
.lt-btn--primary:focus-visible {
  box-shadow: 0 0 0 2px var(--lt-ring-gap, var(--lt-surface)), 0 0 0 5px var(--lt-ring-color), var(--lt-shadow-sm);
}

.lt-btn--block { width: 100%; }
.lt-btn--sm { min-height: 40px; padding: 6px 12px; font-size: .9375rem; }
/* ปุ่มเล็กที่ติดคลาส lt-tap มาด้วย = ตั้งใจให้แตะได้เต็มนิ้ว — .lt-btn--sm ประกาศทีหลัง .lt-tap จึงเคยทับจนเหลือ 40px
   (งานตามต่อ 20 ก.ย. 2569 · วัดจากภาพหน้าจอ /admin/orders และ /admin) — กฎรวมที่นี่ที่เดียวแทนการดันคืนทีละหน้า */
.lt-btn--sm.lt-tap { min-height: var(--lt-tap); }
/* จอมือถือและจอสัมผัส: ปุ่มเล็กต้องกดด้วยนิ้วได้เต็มนิ้วเหมือนกัน (กติกา ≥ 48px) — วัดแนว A 26 ก.ย. 2569 เจอ
   "ทำแล้วทั้งตู้" บนแดชบอร์ดและ "ใส่ค่านี้" ในฟอร์มตู้สูง 40px · จอกว้างที่ใช้เมาส์คงขนาด 40px ของ .lt-btn--sm ตามเดิม */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-btn--sm { min-height: var(--lt-tap); }
}

/* ปุ่มเมนูรองของการ์ดงาน — สี่เหลี่ยมจัตุรัสเท่าความสูงปุ่มหลัก ไม่แย่งสายตา */
.lt-btn--icon { width: var(--lt-tap); padding: 0; flex: none; }

/* ── ป้ายประเภทงานและป้ายสถานะ ──────────────────────────── */

/* แนว A: ป้ายพื้นการ์ด (surface) ขอบบาง ตัวอักษรน้ำหนักกลาง — เงียบกว่าป้ายพื้นเทาของชุดเดิม */
.lt-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 11px 2px 9px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  color: var(--lt-ink);          /* ตัวอักษรเป็นสี ink เสมอ = ผ่าน AA แน่นอน */
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.6;
  white-space: nowrap;
}

.lt-pill__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--lt-pill-color, var(--lt-task-custom));
}

.lt-pill--done { border-color: var(--lt-ok); }
.lt-pill--pending { border-color: var(--lt-border-strong); }
/* เลยกำหนด: ขอบแดง + พื้นเจือแดง 8% (ทั้งสองโหมดจากสูตรเดียว เดิมมี rgba ดิบแยกโหมด)
   บรรทัดแรกคือพื้นของเบราว์เซอร์ที่ไม่รู้จัก color-mix */
.lt-pill--missed {
  border-color: var(--lt-danger);
  background: var(--lt-surface);
  background: color-mix(in srgb, var(--lt-danger) 8%, var(--lt-surface));
}
.lt-pill--skipped { border-color: var(--lt-border-strong); opacity: .8; }

/* ── สถานะว่าง ──────────────────────────────────────────── */

.lt-empty {
  padding: 36px 22px;
  border: 1px dashed var(--lt-border-strong);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  text-align: center;
}
.lt-empty__icon { color: var(--lt-primary); opacity: .85; }
.lt-404-code {
  margin: 0;
  color: var(--lt-primary);
  font-family: var(--lt-font-num);   /* ตัวเลข = ตัวธรรมดาตัวหนา */
  font-variant-numeric: tabular-nums;
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.lt-empty__title { margin: 12px 0 4px; font-size: 1.0625rem; font-weight: 600; }
.lt-empty__body { margin: 0 auto; max-width: 34ch; color: var(--lt-muted); }
.lt-empty .lt-btn { margin-top: 18px; }

/* ── ข้อความ flash ──────────────────────────────────────── */

.lt-flashes { margin-bottom: 14px; }

/* แนว A: ขอบบาง + ขีดสีซ้าย 3px + เงาบาง — สีสถานะบน surface ≥ 5.2:1 ขีดบางยังเห็นชัด
   ความหมายอยู่ที่ข้อความเสมอ สีเป็นแค่ตัวช่วยกวาดตา */
.lt-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-left-width: 3px;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  color: var(--lt-ink);
  box-shadow: var(--lt-shadow-sm);
}
.lt-flash + .lt-flash { margin-top: 8px; }
.lt-flash__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lt-flash--success { border-left-color: var(--lt-ok); }
.lt-flash--error { border-left-color: var(--lt-danger); }
.lt-flash--warning { border-left-color: var(--lt-warn); }
.lt-flash--info { border-left-color: var(--lt-accent); }

.lt-flash__close {
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -6px -4px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lt-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), color var(--lt-dur) var(--lt-ease);
}
.lt-flash__close:hover { background: var(--lt-surface-2); color: var(--lt-ink); }

/* ── ฟอร์ม ──────────────────────────────────────────────── */

.lt-field { margin-bottom: 16px; }

.lt-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: .9375rem;
}
.lt-label__req { color: var(--lt-danger); margin-inline-start: 2px; }

/* ช่องกรอก: ขอบ --lt-input-border ≥ 3:1 กับพื้นทุกแบบ (WCAG 1.4.11 · ชุดเดิม border-strong ได้ 1.6:1)
   background-color ไม่ใช่ background — shorthand จะล้างลูกศรที่ .form-select ของ Bootstrap วาดด้วย background-image */
.lt-input,
.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: var(--lt-tap);
  padding: 10px 12px;
  border: 1px solid var(--lt-input-border);
  border-radius: var(--lt-radius-sm);
  background-color: var(--lt-surface);
  color: var(--lt-ink);
  font: inherit;
  font-size: 1rem;      /* 16px กัน iOS ซูมตอนโฟกัส */
  transition: border-color var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
/* ชี้แล้วขอบเข้มขึ้นเป็นสีตัวอักษรรอง — บอกว่า "ตรงนี้กรอกได้" ก่อนคลิก */
.lt-input:hover:not(:focus):not(:disabled),
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--lt-muted); }
.lt-input:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--lt-accent);
  box-shadow: var(--lt-ring);
  outline: none;
}
textarea.lt-input, textarea.form-control { min-height: 96px; line-height: 1.7; }

/* ตัวอย่างในช่องเป็นสีรองเต็ม (6.2:1) — เดิมจางลงอีก 80% เหลือราว 3.9:1 ต่ำกว่าเกณฑ์ */
.lt-input::placeholder { color: var(--lt-muted); opacity: 1; }

/* ปุ่มเลือกไฟล์ในช่องแนบรูป/สลิป — เดิมเป็นปุ่มเทามุมเหลี่ยมของเบราว์เซอร์ (มืด: พื้น #6b6b6b) ชิ้นเดียวในฟอร์มที่หลุดชุดสี
   (รอบตรวจอิสระ 26 ก.ย. 2569) · หน้าตาเดียวกับปุ่มนุ่ม: พื้นมอสอ่อน ตัวอักษร on-soft 10.1:1 · มืด 11.1:1 */
.lt-input[type="file"] { padding: 6px; }
.lt-input[type="file"]::file-selector-button {
  min-height: 40px;
  margin-inline-end: 12px;
  padding: 0 16px;
  border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-primary-soft);
  color: var(--lt-on-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease);
}
.lt-input[type="file"]:hover::file-selector-button { border-color: var(--lt-primary); }

.lt-input[aria-invalid="true"] { border-color: var(--lt-danger); }

.lt-help { margin-top: 6px; color: var(--lt-muted); font-size: .875rem; }
.lt-error { margin-top: 6px; color: var(--lt-danger); font-size: .875rem; font-weight: 500; }

/* ลูกศรของ select วาดเองเพื่อให้สีตามธีมทั้งสองโหมด */
.lt-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 36px;
}

.lt-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--lt-tap);   /* แถวติ๊กถูกต้องกดง่ายเท่าปุ่ม */
  cursor: pointer;
}
.lt-check input { width: 22px; height: 22px; flex: none; accent-color: var(--lt-primary); }

/* ── ตาราง ──────────────────────────────────────────────────
   บทเรียนจาก sophakhalek.com: การใส่ min-width:0 ให้ตารางในกรอบเลื่อน
   ทำให้เบราว์เซอร์บีบทุกคอลัมน์จนอ่านไม่ออก — ห้ามใส่เด็ดขาด
   ตารางต้องกว้างได้ตามเนื้อหา แล้วให้กรอบนอกเลื่อนแทน */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}

.table-responsive > table,
.lt-table {
  width: auto;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;   /* ตัวเลขในคอลัมน์กว้างเท่ากัน อ่านเทียบแถวได้ */
}

.lt-table th,
.lt-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--lt-border);
  text-align: start;
  vertical-align: top;
  white-space: nowrap;
}
.lt-table th { background: var(--lt-surface-2); font-weight: 600; letter-spacing: .01em; }
.lt-table tr:last-child td { border-bottom: 0; }
.lt-table td.lt-td-wrap { white-space: normal; min-width: 14rem; }
/* แถวที่ชี้อยู่เจือพื้นรองครึ่งหนึ่ง — ช่วยสายตาไล่แถวในตารางกว้าง (เบราว์เซอร์ที่ไม่รู้จัก color-mix ไม่มีผล) */
.lt-table tbody tr:hover > td { background: color-mix(in srgb, var(--lt-surface-2) 50%, var(--lt-surface)); }

/* ── เมนูย่อย (dropdown ของ Bootstrap) ───────────────────── */

.dropdown-menu {
  border-radius: var(--lt-radius-sm);
  border-color: var(--lt-border);
  box-shadow: var(--lt-shadow-lg);
}
.dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 8px; }

/* ── ตัวสลับภาษา ────────────────────────────────────────── */

.lt-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius-sm);
  color: var(--lt-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease);
}
.lt-lang:hover { background: var(--lt-surface-2); border-color: var(--lt-input-border); color: var(--lt-ink); }
/* มือถือและจอสัมผัส: สูง 48px เท่า .lt-iconbtn ข้าง ๆ (เดิม 44px — รอบตรวจอิสระ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-lang { height: var(--lt-tap); }
}

/* ── ท้ายหน้าสาธารณะ ────────────────────────────────────── */

.lt-footer {
  padding: 24px 16px calc(24px + var(--lt-safe-b));
  border-top: 1px solid var(--lt-border);
  background: var(--lt-surface);
  color: var(--lt-muted);
  font-size: .875rem;
}
.lt-footer a { color: var(--lt-muted); }
.lt-footer a:hover { color: var(--lt-ink); }
.lt-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }

/* ── เมนูของหน้าสาธารณะ ─────────────────────────────────────
   จอเล็กเห็นเฉพาะปุ่มแฮมเบอร์เกอร์ · จอใหญ่เห็นเฉพาะแถวลิงก์ (สลับกันท้ายไฟล์) */

.lt-pubnav { display: none; }
.lt-pubtoggle { display: inline-block; }

.lt-pubnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--lt-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--lt-dur) var(--lt-ease), color var(--lt-dur) var(--lt-ease);
}
/* :not(.lt-btn) — ปุ่ม "สมัครสมาชิก" ต้องได้พื้นตอนชี้ของ .lt-btn--primary (มอสเข้ม) ไม่ใช่พื้นเทาของลิงก์
   เดิมกฎนี้ (0,2,1) ชนะ .lt-btn--primary:hover พื้นกลายเป็น surface-2 แต่ตัวอักษรยังเป็น on-primary: 1.15:1 (มืด 1.14)
   ตัวอักษรหายตอนชี้ทุกหน้าสาธารณะ และค้างหายบนแท็บเล็ตจอสัมผัสหลังแตะ (รอบตรวจอิสระ 26 ก.ย. 2569) · ตอนนี้ 10.8:1 · มืด 12.2:1 */
.lt-pubnav a:not(.lt-btn):hover { background: var(--lt-surface-2); color: var(--lt-ink); }
/* หน้าที่อยู่: ตัวหนาสีมอส + เส้นทองเหลืองบางใต้ลิงก์ (รูปทรงบอกด้วย ไม่ใช่สีอย่างเดียว) — ปุ่มสมัครไม่มีเส้น */
.lt-pubnav a[aria-current="page"] { color: var(--lt-primary); font-weight: 700; }
.lt-pubnav a[aria-current="page"]:not(.lt-btn) { box-shadow: inset 0 -2px 0 var(--lt-brass); }
.lt-pubnav a.lt-btn--primary { color: var(--lt-on-primary); margin-inline-start: 6px; }
.lt-pubnav a.lt-btn--primary:hover { color: var(--lt-on-primary); }

/* ── เมนูรอง <details> ──────────────────────────────────────
   ใช้ <details> แทน dropdown ของ Bootstrap ตรงจุดที่ต้องกดได้แม้ JS ถูกปิด
   (การ์ดงาน = ทางเดียวที่ผู้ใช้เลื่อน/ข้ามงานได้ ห้ามพึ่ง JS) */

.lt-menu { position: relative; flex: none; }

.lt-menu > summary {
  list-style: none;          /* ซ่อนสามเหลี่ยมประจำ <details> */
  cursor: pointer;
}
.lt-menu > summary::-webkit-details-marker { display: none; }
.lt-menu > summary::marker { content: ""; }

.lt-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 232px;
  padding: 6px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-lg);   /* ลอยเหนือการ์ด ต้องลึกกว่าเงาการ์ด */
}

.lt-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--lt-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease);
}
.lt-menu__item:hover { background: var(--lt-surface-2); }
.lt-menu__item svg { color: var(--lt-muted); flex: none; }
/* รายการเมนูที่เป็นลิงก์ไม่มีเส้นใต้ — เส้นใต้เป็นของลิงก์ในเนื้อความ (ส่วน 1) ในแผงเมนูทุกแถวกดได้อยู่แล้วและมีพื้นตอนชี้บอก
   เดิมเมนูมือถือของหน้าสาธารณะขีดเส้นใต้ทุกลิงก์ พอมีปุ่ม "ออกจากระบบ" (เป็น <button> ไม่มีเส้นใต้) อยู่ในแผงเดียวกันจึงลักลั่น (9 ต.ค. 2569) */
a.lt-menu__item { text-decoration: none; }
/* มือถือและจอสัมผัส: รายการในเมนู ⋮ สูงเต็ม --lt-tap (เดิม 46px) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-menu__item { min-height: var(--lt-tap); }
}

/* ── เมนู "เพิ่มเติม" บนแถบบนของหน้าในระบบ (เฉพาะจอ < 768px · layout/nav_app.php nav_app_more) ──
   ต่อยอดจาก .lt-menu ข้างบน: แผงเดียวกัน รายการเดียวกัน เพิ่มแค่สิ่งที่เมนูยาวต้องมี
   · แผงกว้างคงที่ ไม่ล้นจอ 320px · สูงไม่เกินช่องว่างระหว่างแถบบนกับแถบล่าง แล้วเลื่อนในตัว (เปิดครบทุกส่วนมีได้ถึง 18 แถว)
     บรรทัด 100vh เป็นทางสำรองของเบราว์เซอร์ที่ไม่รู้จัก svh — ไม่มีเพดานเลยแผงจะยาวเลยจอและแถบบนที่ติดอยู่กับที่พาเลื่อนไม่ได้
   · หน้าที่เปิดอยู่: พื้นมอสอ่อน + ตัวหนา คู่สีเดียวกับเมนูข้าง (10.1:1 · มืด 11.1:1)
   · ชื่อบัญชีกับปุ่มออกจากระบบแยกจากลิงก์ด้วยเส้นคั่น */
.lt-appmore[open] > summary { background: var(--lt-surface-2); }
.lt-appmore__panel {
  width: min(304px, calc(100vw - 16px));
  max-height: calc(100vh - var(--lt-topbar-h) - var(--lt-bottomnav-h) - 20px);
  max-height: calc(100svh - var(--lt-topbar-h) - var(--lt-bottomnav-h) - var(--lt-safe-b) - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* แถบเลื่อนบางสีเข้าชุดแบบเดียวกับเมนูข้าง (เห็นเมื่อใช้เมาส์กับหน้าต่างแคบ มือถือจริงซ้อนแถบเลื่อนเอง) */
  scrollbar-width: thin;
  scrollbar-color: var(--lt-border-strong) transparent;
}
/* ฟอร์มออกจากระบบในแผงเมนู (เมนูนี้และเมนูมือถือของหน้าสาธารณะ) ต้องไม่มีระยะขอบของตัวเอง ปุ่มจึงเรียงเท่ารายการอื่น */
.lt-menu__panel form { margin: 0; }
/* แผงเมนูที่ห้อยจากแถบบน (เมนูนี้และเมนูมือถือของหน้าสาธารณะ) เริ่มที่ 58px ใต้ขอบจอ — อยู่ในเขต scroll-padding-top ของ html (68px)
   สคริปต์กลางเรียก scrollIntoView ตอนเมนูกาง (กันแผงของการ์ดงานจมใต้แถบล่าง) จึงดันทั้งหน้าขึ้น 10px ทุกครั้งที่เปิดเมนูบนหน้าที่เลื่อนลงมาแล้ว
   (วัดจริง 9 ต.ค. 2569: scrollY 900 → 890) ทั้งที่แผงนี้ติดอยู่กับแถบบน เลื่อนหน้าไปก็ไม่ขยับ · ระยะขอบติดลบบอกเบราว์เซอร์ว่าแผงอยู่ในที่ที่เห็นครบแล้ว */
.lt-topbar .lt-menu__panel { scroll-margin-top: -12px; }
.lt-appmore__panel .lt-menu__item[aria-current="page"] {
  background: var(--lt-primary-soft);
  color: var(--lt-on-soft);
  font-weight: 700;
}
.lt-appmore__panel .lt-menu__item[aria-current="page"] svg { color: currentColor; }
/* ชื่อบัญชีกับปุ่มออกจากระบบติดขอบล่างของแผงเสมอ (10 ต.ค. 2569) — เปิดครบทุกส่วนแล้วแผงยาวเกินจอ เดิมปุ่มออกจากระบบจมอยู่ใต้ขอบ
   และไม่มีอะไรบอกว่าแผงเลื่อนได้ (แถบเลื่อนของมือถือซ่อนตัวเอง) · ลิงก์เลื่อนอยู่ใต้บล็อกนี้ แถวที่ถูกตัดครึ่งที่เส้นคั่นคือสิ่งที่บอกว่ายังมีต่อ
   พื้นทึบสีเดียวกับแผง (ไม่ใช่กระจกฝ้า) · แผงที่สั้นพอดีจอ sticky ไม่มีผล หน้าตาเหมือนเดิมทุกจุด
   scroll-padding-bottom ของแผง = ความสูงบล็อกนี้ — ไล่ Tab ลงมาแล้วลิงก์ที่ได้โฟกัสไม่จมอยู่ใต้บล็อก
   ติดเฉพาะจอที่สูงพอ (≥ 480px · รอบตรวจทาน 10 ต.ค. 2569): บล็อกนี้สูงราว 110px คงที่ มือถือแนวนอน (สูง ~360px) แผงเหลือที่ให้ลิงก์
   แค่สองแถวจากสิบกว่าแถว — จอเตี้ยกว่านั้นบล็อกอยู่ท้ายรายการตามปกติแบบเดิม เลื่อนลงไปเจอ */
.lt-appmore__account {
  /* margin-bottom ติดลบกับ padding ล่าง กลบ padding 6px ของ .lt-menu__panel — ตอนเลื่อนสุดระยะใต้ปุ่มจึงเท่าเดิมทั้งแบบติดและไม่ติด */
  margin: 6px 0 -6px;
  padding: 6px 0;
  border-top: 1px solid var(--lt-border);
  background: var(--lt-surface);
}
@media (min-height: 480px) {
  .lt-appmore__panel { scroll-padding-bottom: calc(2 * var(--lt-tap) + 14px); }
  .lt-appmore__account {
    position: sticky;
    /* ติดที่ขอบล่างจริงของแผง (-6px = ทับ padding ของแผง) — ติดที่ 0 แล้วลิงก์ที่เลื่อนอยู่ข้างใต้โผล่ในร่อง 6px ใต้ปุ่มออกจากระบบ
       (เห็นจริงในภาพหน้าจอโหมดมืด) */
    bottom: -6px;
  }
}

.lt-flash__icon { flex: none; color: var(--lt-muted); line-height: 0; padding-top: 3px; }

/* ── ตัวช่วยเล็ก ๆ ──────────────────────────────────────── */

.lt-stack > * + * { margin-top: 12px; }
.lt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lt-grow { flex: 1 1 auto; min-width: 0; }
.lt-nowrap { white-space: nowrap; }

/* ชื่อ/อีเมลผู้ใช้ในเมนูข้างยาวเกินกรอบได้เสมอ ตัดด้วย … แทนการดันเมนูกว้างออก */
.lt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ตัวเลขค้างในเมนูข้าง (คิวอนุมัติ ข้อความใหม่) — คู่ danger/on-danger แบบเดียวกับ .lt-badge-dot ไม่มีแดงดิบแล้ว */
.lt-count {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--lt-danger);
  color: var(--lt-on-danger);
  font-family: var(--lt-font-num);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 22px;
  text-align: center;
}

/* ซ่อนจากตาแต่ยังอ่านได้ด้วยโปรแกรมอ่านหน้าจอ */
.lt-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.lt-pagination__info { color: var(--lt-muted); font-size: .875rem; }

/* =============================================================
   จอใหญ่ขึ้น — จากตรงนี้ลงไปคือส่วนขยาย ไม่ใช่ค่าเริ่มต้น
   ============================================================= */

@media (min-width: 768px) {
  html { scroll-padding-bottom: 12px; }   /* จอกว้างไม่มีแถบล่าง — คู่กับ scroll-padding ของ html ในส่วน 1 (ต้องเป็นบรรทัดแรกของบล็อก เทสต์ตรึงไว้) */
  body { font-size: 16px; }

  /* แถบล่างเป็นของมือถือเท่านั้น จอใหญ่ใช้เมนูข้างแทน */
  .lt-bottomnav { display: none; }

  /* แถวลิงก์ **หักบรรทัดได้** (20 ก.ย. 2569) — เปิดห้องแชต ตลาดมือสอง และร้านพร้อมกันได้ 10 ลิงก์ (12 ถ้าเปิดแผน Pro ด้วย)
     วัดจริงก่อนแก้: ที่ขนาดเดิมแถวต้องการ 1,150px ขึ้นไป ทั้งหน้าจึงเลื่อนแนวนอนได้ตั้งแต่ 768 ถึง 1,200px
     nowrap อยู่ที่ตัวลิงก์ (คำไทยไม่ถูกหักกลางคำ) ส่วนแถวหักระหว่างลิงก์แทน — แถบสูงเป็นสองบรรทัดแทนที่ทั้งหน้าจะเลื่อน
     จำนวนลิงก์ขึ้นกับสวิตช์ (สามส่วน) และแผน Pro จึงตั้งจุดตัดตายตัวไม่ได้ ต้องให้แถวหักเองตามที่เหลือ */
  .lt-pubnav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
  .lt-pubtoggle { display: none; }
  /* โลโก้และปุ่มภาษาไม่ถูกบีบ — ที่ไม่พอต้องไปลงที่แถวลิงก์ซึ่งหักบรรทัดได้ */
  .lt-topbar > .lt-topbar__brand,
  .lt-topbar > .lt-brand,
  .lt-topbar > .lt-lang { flex: none; }
  /* ลิงก์ไทย 7 ตัวกว้าง ~630px ที่ padding 12px — ใช้ 8px เป็นค่าตั้งต้น (ย่อเหลือ 4px ถึง 1199px · โปร่ง 12px ตั้งแต่ 1200px ท้ายไฟล์) */
  .lt-pubnav a { white-space: nowrap; padding: 0 8px; }
  /* แถบบนของแอปบนจอกว้างมีโลโก้ในเมนูข้างแล้ว ไม่ต้องซ้ำ */
  .lt-topbar__brand--app { display: none; }
  /* ปุ่มคิวอนุมัติบนแถบบนเป็นของผู้ดูแลบนมือถือ จอกว้างมีลิงก์เดียวกันในเมนูข้างแล้ว (layout/nav_app.php) */
  .lt-topbar__admin { display: none; }
  /* เมนู "เพิ่มเติม" เป็นของมือถือเช่นกัน — จอกว้างมีลิงก์ชุดเดียวกันและปุ่มออกจากระบบในเมนูข้างแล้ว */
  .lt-appmore { display: none; }

  .lt-shell--app { flex-direction: row; }

  .lt-side {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
    width: 232px;
    padding: 12px 10px;
    border-inline-end: 1px solid var(--lt-border);
    background: var(--lt-surface);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100svh;
    overflow-y: auto;
    /* ลิงก์ 23 อันยาวเกินจอ 900px (สูง 1,246px) — แถบเลื่อนของ Windows หนา 15px พร้อมลูกศรเทา หลุดชุดสี
       (รอบตรวจอิสระ 26 ก.ย. 2569) · แถบบางสีขอบเข้มบนพื้นใส · stable = กันเมนูขยับซ้ายขวาตอนแถบโผล่/หาย */
    scrollbar-width: thin;
    scrollbar-color: var(--lt-border-strong) transparent;
    scrollbar-gutter: stable;
  }

  .lt-side__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 16px;
    color: var(--lt-ink);
    font-weight: 700;
    text-decoration: none;
  }
  .lt-side__brand.lt-brand--logo img { height: 44px; }

  .lt-side__item {
    position: relative;        /* เส้นทองเหลืองของเมนูที่เลือกอยู่ (::before) */
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--lt-tap);
    padding: 8px 12px;
    border-radius: var(--lt-radius-sm);
    color: var(--lt-ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--lt-dur) var(--lt-ease), color var(--lt-dur) var(--lt-ease);
  }
  .lt-side__item svg { width: 22px; height: 22px; flex: none; color: var(--lt-muted); }
  .lt-side__item:hover { background: var(--lt-surface-2); color: var(--lt-ink); }

  /* ปุ่มออกจากระบบเป็น <button> ในฟอร์ม POST ต้องหน้าตาเหมือนลิงก์เมนูตัวอื่น */
  .lt-side__item--btn {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
  }
  .lt-side form { margin: 0; }
  /* เมนูที่เลือกอยู่: พื้นมอสอ่อน + ตัวอักษร on-soft (สว่าง 10.1:1 · มืด 11.1:1 — คู่เดียวใช้ได้ทั้งสองโหมด
     เดิมมีสีดิบ #0b3b36 และบล็อกโหมดมืดแยก) + ตัวหนา + เส้นทองเหลืองบางด้านซ้าย (รูปทรงบอกด้วย ไม่ใช่สีอย่างเดียว) */
  .lt-side__item[aria-current="page"] {
    background: var(--lt-primary-soft);
    color: var(--lt-on-soft);
    font-weight: 700;
  }
  /* เส้นอยู่บนพื้นมอสอ่อน — --lt-brass ได้แค่ 2.97:1 ตรงนี้ จึงใช้ทองเหลืองเข้ม --lt-brass-ink (4.7:1 · มืด 7.2:1) */
  .lt-side__item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--lt-brass-ink);
  }
  .lt-side__item[aria-current="page"] svg { color: currentColor; }

  .lt-side__spacer { flex: 1 1 auto; }

  .lt-main {
    padding: 24px 24px 40px;
    padding-bottom: calc(var(--lt-safe-b) + 40px);
  }

  .lt-topbar__title { font-size: 1.25rem; }

  .lt-task { padding-left: 30px; }
  .lt-task::before { left: 13px; top: 18px; bottom: 18px; }
  .lt-task__actions .lt-btn--done { flex: 0 1 auto; min-width: 200px; }

  .lt-empty { padding: 48px 24px; }
}

/* แถบบนสาธารณะช่วงแคบ — ย่อ padding ของลิงก์เหลือ 4px และตัวอักษรเหลือ 14px ปุ่มสมัครคง padding 8px ความสูงที่กดได้ยัง 44px
   เดิมจบที่ 959px (ลิงก์ไทย 8 ตัวที่ padding 8px พอดีจอตั้งแต่ราว 865px)
   20 ก.ย. 2569 ขยายถึง 1199px: เปิดห้องแชต ตลาด และร้านพร้อมกันได้ 10 ลิงก์ ขนาดเดิมต้องการ 1,150px ขึ้นไป
   ช่วง 960–1150px จึงหักเป็นสองบรรทัด (แถบสูง 99px) ทั้งที่ย่อขนาดแล้วพอดีจอเดียว — วัดจริงทั้ง 320–1440px
   ตั้งแต่ 1200px กลับเป็นขนาดเดิม (ลิงก์ 10 ตัวที่ padding 8px พอดีจอตั้งแต่ราว 1,150px)
   ที่ไม่พอไม่ทำให้ทั้งหน้าเลื่อนแนวนอนอีกแล้วไม่ว่าจะกี่ลิงก์ — แถวลิงก์หักบรรทัดเอง (flex-wrap ข้างบน) */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .lt-pubnav a { font-size: .875rem; }
  .lt-pubnav a:not(.lt-btn) { padding: 0 4px; }
}

@media (min-width: 1100px) {
  .lt-side { width: 256px; }
  .lt-main { padding: 28px 32px 48px; }
}

/* ลิงก์แถบบนสาธารณะกลับมาโปร่งเมื่อจอกว้างพอจริง — เดิมอยู่ในบล็อก 1100px ซึ่งชนกับช่วงย่อขนาดข้างบน */
@media (min-width: 1200px) {
  .lt-pubnav a { padding: 0 12px; }
}


/* =============================================================
   สไตล์ของหน้าในระบบ ชุมชน และหลังบ้าน — เขียนรอบ 10 ก.ย. 2569

   ก่อนหน้านี้หน้าเหล่านี้ใช้คลาสที่ไม่เคยมีนิยามใน CSS เลย (280 คลาสที่ใช้จริง
   มีสไตล์แค่ 101) จึงแสดงเป็นข้อความเรียงลงมาไม่มีรูปทรง เจ้าของเจอบนโฮสต์จริง
   วันติดตั้ง: ปฏิทินกลายเป็นชื่อวันเรียงแนวตั้ง หน้าตู้เป็นลิงก์ขีดเส้นใต้ทั้งหน้า

   บล็อกนี้ต้องอยู่ "ท้ายสุดก่อน @media print" เท่านั้น เพราะบางกฎอาศัยลำดับ
   เพื่อชนะกฎฐานที่ specificity เท่ากัน (เช่น .lt-card + .lt-card)
   ทุกกฎยึดกติกาเดียวกับหัวไฟล์: mobile-first · สีจากตัวแปรล้วน · แตะได้ ≥44px
   ============================================================= */


/* ══ ส่วน 3 · โครงหน้าร่วม ฟอร์ม และหน้าเข้าสู่ระบบ ══════════════ (เจ้าของ: ฐาน) ══ */

/* =============================================================
   โซน: โครงหน้าร่วม · ฟอร์ม · หน้าเข้าสู่ระบบ
   ต่อท้าย app-theme.css — ใช้ตัวแปรสีของไฟล์นั้นล้วน ไม่มีค่าสีดิบ

   ข้อควรรู้ร่วมของทั้งบล็อก
   • Bootstrap reboot โหลดก่อนไฟล์นี้ จึงต้องล้างค่าที่มันตั้งไว้บางตัว
     ที่สำคัญคือ legend (ลอยซ้ายเต็มบรรทัด ตัวใหญ่) ทุกจุดที่ล้างมีคอมเมนต์กำกับ
   • กฎ [hidden] { display: none !important } อยู่หัวไฟล์นี้เอง (ไม่พึ่ง Bootstrap จาก CDN) การตั้ง display:flex/grid ที่นี่
     จึงไม่ทำให้กล่องที่ JS ซ่อนไว้ (fieldset ตามประเภทงาน, กล่องแนะนำสายพันธุ์) โผล่ขึ้นมา
   • ระยะภายในกล่องใช้ gap ทั้งหมด ส่วนระยะระหว่างพี่น้องใช้ตัวเลือก + ตัวเดียว
     ตามแบบที่ไฟล์เดิมทำกับ .lt-card + .lt-card
   ============================================================= */

/* ── หัวหน้า ────────────────────────────────────────────── */

.lt-page__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}
/* ระยะในกล่องนี้มาจาก gap ล้วน จึงล้าง margin ประจำตัวของ h1/p ที่อยู่ข้างใน */
.lt-page__head > * { margin: 0; }

/* ชื่อหน้า — ตัวมีหัว Noto Serif Thai 600 (มีแค่ 500/600 ในลิงก์ฟอนต์ ห้ามตั้ง 700 จะได้ตัวหนาปลอม) */
.lt-page__title {
  margin: 0 0 8px;
  font-family: var(--lt-font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.4;          /* ไทย: แน่นกว่านี้วรรณยุกต์ชนสระของบรรทัดบน */
  letter-spacing: 0;
  overflow-wrap: anywhere;   /* ชื่อตู้/ชื่อผู้ใช้ยาวไม่มีช่องว่างต้องตัดได้ */
}

.lt-page__lead {
  margin: 0 0 16px;
  max-width: 62ch;           /* บรรทัดยาวกว่านี้สายตาหาต้นบรรทัดถัดไปไม่เจอ */
  color: var(--lt-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ── โซนเนื้อหา ─────────────────────────────────────────── */

.lt-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lt-section + .lt-section { margin-top: 28px; }
/* การ์ดที่ขึ้นก่อนหัวหน้าหรือการ์ดต้อนรับ (เช่น การ์ดแชตส่วนตัวที่ยังไม่อ่านในแดชบอร์ด) ต้องไม่ชิดกัน — ตรวจทานเฟส 2 */
.lt-section + .lt-welcome,
.lt-section + .lt-page__head { margin-top: 28px; }
/* ในโซนมี gap 12px อยู่แล้ว ไม่ต้องบวก margin ของ .lt-card + .lt-card ซ้อนเข้าไปอีก */
.lt-section > .lt-card + .lt-card { margin-top: 0; }

/* โซนที่ต้องรีบอ่าน (งานที่พลาดไปแล้ว) — ขอบซ้ายหนา + พื้นอุ่นอ่อน ๆ
   สีไม่ใช่ข้อมูลเดียว เพราะหัวข้อในโซนบอกอยู่แล้วว่าเป็นงานที่พลาด
   บรรทัด background แรกคือค่าที่เบราว์เซอร์เก่าจะใช้เมื่อทิ้ง color-mix ไป */
.lt-section--alert {
  padding: 16px;
  border: 1px solid var(--lt-border);
  border-inline-start: 3px solid var(--lt-warn);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  background: color-mix(in srgb, var(--lt-warn) 5%, var(--lt-surface));
  box-shadow: var(--lt-shadow-sm);
}
.lt-section--alert > .lt-section__title::before { width: 3px; background: var(--lt-warn); }

/* หัวข้อโซน — ขีดสั้นนำหน้าทำให้กวาดตาหาหัวข้อถัดไปเจอเร็วบนหน้ายาว ๆ อย่างหน้านโยบาย
   แนว A: ตัวมีหัว (หัวข้อส่วน) + ขีดเป็นเส้นทองเหลืองบาง 2px — ทองเหลืองโผล่แค่ที่นี่ แถบล่าง เมนูข้าง ลิงก์หน้าที่อยู่ และป้ายพิเศษ */
.lt-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--lt-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.lt-section__title::before {
  content: "";
  flex: none;
  width: 2px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: 1px;
  background: var(--lt-brass);
}
.lt-section__title--sm { font-size: 1rem; }

/* บรรทัดปิดท้ายโซน: ลิงก์ "ดูทั้งหมด" หรือปุ่มรอง */
.lt-section__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 0 0;
  font-size: .9375rem;
}
/* มือถือและจอสัมผัส: ลิงก์ที่ยืนเดี่ยวท้ายโซน ("ดูตู้ทั้งหมด" "ดูปฏิทินเต็ม" "สมุดการดูแล") สูงแค่บรรทัดเดียว 25px
   และสองลิงก์ห่างกันแค่ 16px (รอบตรวจอิสระ 26 ก.ย. 2569) — ให้พื้นที่กดเต็ม --lt-tap แบบลิงก์ยืนเดี่ยวของหน้าแรก */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-section__foot a { display: inline-flex; align-items: center; min-height: var(--lt-tap); }
}

/* ── กล่องข้อความประกอบ (note) ───────────────────────────
   ใช้ได้ทั้งเป็น <div> ที่มีหัวข้อ+ย่อหน้า และเป็น <p> บรรทัดเดียว */

.lt-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-inline-start-width: 3px;
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  color: var(--lt-ink);      /* ตัวอักษรเป็น ink เสมอ = ผ่าน AA ทั้งสองโหมด */
  line-height: 1.7;
}
.lt-note:last-child { margin-bottom: 0; }
.lt-note > * { margin: 0; }
/* ในโซนที่มี gap ของตัวเองอยู่แล้ว ไม่ต้องเอา margin ของกล่องมาบวกซ้ำ */
.lt-section > .lt-note { margin-bottom: 0; }

.lt-note__title { font-weight: 600; line-height: 1.4; }

/* สีอยู่ที่ขอบซ้ายหนา ไม่ใช่ที่ตัวอักษร — ข้อความในกล่องบอกความหมายอยู่แล้ว
   พื้นผสมสีบาง ๆ เพื่อให้แยกกล่องออกจากการ์ดขาวที่อยู่ติดกัน
   (เบราว์เซอร์ที่ไม่รู้จัก color-mix ทิ้งบรรทัดนั้นไป แล้วเหลือพื้น surface ของกฎฐาน) */
.lt-note--error { border-inline-start-color: var(--lt-danger); background: color-mix(in srgb, var(--lt-danger) 8%, var(--lt-surface)); }
.lt-note--warn  { border-inline-start-color: var(--lt-warn);   background: color-mix(in srgb, var(--lt-warn) 8%, var(--lt-surface)); }
.lt-note--ok    { border-inline-start-color: var(--lt-ok);     background: color-mix(in srgb, var(--lt-ok) 8%, var(--lt-surface)); }
.lt-note--info  { border-inline-start-color: var(--lt-accent); background: color-mix(in srgb, var(--lt-accent) 8%, var(--lt-surface)); }

/* ── ตัวจัดวางเนื้อหา: กริด รายการ นิยาม แถวแนวนอน ────── */

.lt-grid { display: grid; gap: 12px; }
.lt-grid--2 { grid-template-columns: 1fr; }   /* จอ 360px หนึ่งคอลัมน์ก่อนเสมอ */

.lt-list {
  margin: 0;
  padding-inline-start: 1.4em;
  line-height: 1.7;
}
/* ห้ามใช้ flex/gap กับ <ul> เพราะ li จะเลิกเป็น list-item แล้วจุดนำหน้าหายทั้งรายการ */
.lt-list li + li { margin-top: 6px; }
.lt-list li::marker { color: var(--lt-muted); }

/* ขั้นตอน 1-2-3 (เช่นวิธีตั้งค่า ntfy) — เลขต้องเด่นกว่าจุดกลมธรรมดา */
.lt-list--steps { padding-inline-start: 1.7em; }
.lt-list--steps li { padding-inline-start: 2px; }
.lt-list--steps li::marker { color: var(--lt-primary); font-weight: 700; }

.lt-dl { margin: 0; }
.lt-dl dt {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
}
.lt-dl dd {
  margin: 0 0 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;   /* อีเมล/ชื่อไฟล์ยาวต้องไม่ดันกล่องล้นจอ */
}
.lt-dl dd:last-child { margin-bottom: 0; }
.lt-dl--tight dd { margin-bottom: 8px; }

/* แถวเดียวจบ: ป้ายกำกับ + ช่องตัวเลขสั้น + หน่วย (เช่น "ทุก [2] วัน") */
.lt-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.lt-inline > .lt-label {
  flex: 1 0 100%;   /* ป้ายกำกับอยู่บรรทัดของตัวเอง ช่องกับหน่วยจึงเรียงคู่กันได้พอดี */
  margin-bottom: 0;
}
.lt-inline__unit { color: var(--lt-muted); font-size: .9375rem; }

/* ── แถบแท็บ ─────────────────────────────────────────────
   จอ 360px มีได้ 3-7 แท็บ จึงให้เลื่อนแนวนอนแทนการหักบรรทัด
   (แท็บที่หักบรรทัดทำให้เนื้อหาข้างล่างขยับขึ้นลงเวลาเปลี่ยนหน้า) */

.lt-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 1px solid var(--lt-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lt-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;            /* กดด้วยนิ้วได้ทุกแท็บ */
  padding: 0 14px;
  /* ไม่ใช้ margin ติดลบมาทับเส้นของแถบ เพราะกรอบนี้ overflow-x: auto
     ของที่ล้นออกนอกกรอบจะโดนตัดหรือทำให้เกิดแถบเลื่อนแนวตั้งบาง ๆ */
  border-bottom: 2px solid transparent;
  color: var(--lt-muted);      /* แท็บที่ไม่ได้เลือกเป็นสีรอง (บน bg 5.6:1 · มืด 8.3:1) แท็บที่เลือกเด่นขึ้นมาเอง */
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;       /* ทำหน้าที่เป็นแท็บ ไม่ใช่ลิงก์ในเนื้อความ */
  cursor: pointer;
  transition: color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease);
}
.lt-tabs__item:hover { color: var(--lt-ink); border-bottom-color: var(--lt-border-strong); }

/* แท็บที่เลือกอยู่บอกด้วยขีดใต้สีมอส + ตัวหนา + ตัวอักษรเข้ม ไม่ใช่สีอย่างเดียว */
.lt-tabs__item.is-active,
.lt-tabs__item[aria-current="page"] {
  border-bottom-color: var(--lt-primary);
  color: var(--lt-ink);
  font-weight: 700;
}
.lt-tabs__item:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-tabs--sm .lt-tabs__item { padding: 0 10px; font-size: .875rem; }

/* ตัวเลขค้างในแท็บ (เช่นจำนวนรายงานที่ยังไม่ปิด) */
.lt-badge {
  display: inline-block;
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 10px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-family: var(--lt-font-num);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 18px;          /* กล่องตัวเลขสูงคงที่ เหมือน .lt-count/.lt-badge-dot ของไฟล์เดิม */
  text-align: center;
}

/* ── ป้าย pill ตัวแปรผัน ─────────────────────────────────
   .lt-pill ตัวหลักมีอยู่แล้วในไฟล์เดิม ตรงนี้เติมเฉพาะสี "ขอบ + จุดนำหน้า"
   ตัวแปรผันชุดนี้ถูกใช้โดยไม่มี <span class="lt-pill__dot"> จึงวาดจุดด้วย ::before
   (ชุด --done/--pending/--missed/--skipped ของ c_status_pill มีจุดจริงอยู่แล้ว ไม่แตะ) */

.lt-pill--best::before,
.lt-pill--expert::before,
.lt-pill--mood::before,
.lt-pill--new::before,
.lt-pill--ok::before,
.lt-pill--pin::before,
.lt-pill--staff::before,
.lt-pill--warn::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lt-pill-color, var(--lt-task-custom));
}

.lt-pill--best  { --lt-pill-color: var(--lt-ok);           border-color: var(--lt-ok); }
.lt-pill--ok    { --lt-pill-color: var(--lt-ok);           border-color: var(--lt-ok); }
.lt-pill--new   { --lt-pill-color: var(--lt-accent);       border-color: var(--lt-accent); }
.lt-pill--warn  { --lt-pill-color: var(--lt-warn);         border-color: var(--lt-warn); }
.lt-pill--pin   { --lt-pill-color: var(--lt-primary);      border-color: var(--lt-primary); }
.lt-pill--staff { --lt-pill-color: var(--lt-task-filter-clean); border-color: var(--lt-task-filter-clean); }
/* ผู้เชี่ยวชาญ — ใช้สีทองอุ่นแยกจากทีมงาน คนละเรื่องกัน ต้องดูออกในแวบเดียว
   แนว A: "ป้ายพิเศษ" ใช้ทองเหลือง (--lt-brass เป็นขอบและจุด ≥ 3:1 · ตัวอักษรยังเป็น ink) แยกจาก warn ที่แปลว่า "ควรระวัง" */
.lt-pill--expert { --lt-pill-color: var(--lt-brass);      border-color: var(--lt-brass); }
.lt-pill--mood  { --lt-pill-color: var(--lt-task-medication);   border-color: var(--lt-task-medication); }

/* ป้ายแท็กของคำถาม — ข้อความคือข้อมูลทั้งหมด ไม่มีสถานะให้สื่อ จึงไม่ใส่จุดสี */
.lt-pill--tag {
  border-color: var(--lt-border);
  background: var(--lt-surface-2);
  padding-inline: 10px;
  font-weight: 500;
}

/* ── ปุ่มเพิ่มเติม ───────────────────────────────────────
   .lt-btn ตัวหลักมีอยู่แล้ว ตรงนี้เติมเฉพาะรูปแบบที่หน้าเพจเรียกใช้ */

/* ปุ่มยืนยันท้ายฟอร์ม — เต็มความกว้างเพื่อให้เป็นเป้าใหญ่สุดของหน้า */
.lt-btn--wide { width: 100%; }

/* ปุ่มรองแบบนุ่ม ใช้ในแถวปุ่มของการ์ดที่ไม่อยากให้แย่งสายตาปุ่มหลัก */
/* พื้นมอสอ่อน ตัวอักษร on-soft (10.1:1 · มืด 11.1:1) ขอบเจือมอสบาง ๆ ให้ปุ่มมีขอบเขตบนพื้นการ์ด
   ตอนชี้เจือมอส 18% (ตัวอักษรยัง ≥ 9:1 ทั้งสองโหมด) · บรรทัดแรกของแต่ละคู่คือทางสำรองเมื่อไม่รู้จัก color-mix */
.lt-btn--soft {
  background: var(--lt-primary-soft);
  border-color: transparent;
  border-color: color-mix(in srgb, var(--lt-primary) 14%, transparent);
  color: var(--lt-on-soft);
}
.lt-btn--soft:hover {
  background: var(--lt-primary-soft);
  background: color-mix(in srgb, var(--lt-primary) 18%, var(--lt-surface));
  color: var(--lt-on-soft);
}

/* ปุ่ม "ทำแล้ว" ของหน้าลิงก์จากการแจ้งเตือน — ผู้ใช้กดด้วยมือเดียวขณะยืนอยู่หน้าตู้ */
.lt-btn--huge {
  min-height: 64px;
  padding: 12px 22px;
  border-radius: var(--lt-radius);
  font-size: 1.125rem;
  line-height: 1.4;
}

/* ปุ่มหน้าตาเหมือนลิงก์ (แก้ไข ปิด รายงาน) ใช้กับทั้ง <a>, <button> และ <summary>
   คงเส้นใต้ไว้เพราะมันอยู่ปนกับลิงก์ในเนื้อความ ต้องดูออกว่ากดได้ */
.lt-linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lt-primary);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), color var(--lt-dur) var(--lt-ease);
}
.lt-linkbtn:hover { color: var(--bs-link-hover-color); background: var(--lt-surface-2); }
.lt-linkbtn:focus-visible { outline: none; box-shadow: var(--lt-ring); }
/* มือถือและจอสัมผัส: สูงเต็ม --lt-tap (เดิม 44px — รอบแอปและรอบชุมชนรายงานค้างไว้ · แก้รอบแก้ผลตรวจ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-linkbtn { min-height: var(--lt-tap); }
}
.lt-linkbtn--danger { color: var(--lt-danger); }
.lt-linkbtn--danger:hover { color: var(--lt-danger); }

/* ใช้เป็น <summary> ด้วย — ซ่อนสามเหลี่ยมประจำ <details> ไม่ให้ซ้อนกับเส้นใต้ */
summary.lt-linkbtn { list-style: none; }
summary.lt-linkbtn::-webkit-details-marker { display: none; }
summary.lt-linkbtn::marker { content: ""; }

/* <form> ที่ห่อปุ่มผู้ดูแลใบเดียว ต้องยืนอยู่ในแถวเดียวกับลิงก์ตัวอื่น ไม่ขึ้นบรรทัดใหม่ */
.lt-modbtn { display: inline-flex; margin: 0; }

.lt-btn--wide:focus-visible,
.lt-btn--soft:focus-visible,
.lt-btn--huge:focus-visible { outline: none; box-shadow: var(--lt-ring); }

/* ── หน้าเข้าสู่ระบบ / สมัคร / ลืมรหัสผ่าน ───────────────
   กล่องเดียวกลางจอ กว้างไม่เกิน 420px เพื่อให้ตากวาดไม่เกินหนึ่งช่วงสายตา */

.lt-auth {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 20px 18px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow);
}
/* ระยะทั้งกล่องมาจาก gap — ล้าง margin ของลูกโดยตรงทุกตัวรวมถึง .lt-note */
.lt-auth > * { margin: 0; }

/* ชื่อหน้าของกล่องเข้าสู่ระบบ/สมัคร = ตัวมีหัว 600 (ฟอนต์ตัวมีหัวไม่มี 700) */
.lt-auth__title {
  font-family: var(--lt-font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
}

.lt-auth__subtitle { color: var(--lt-muted); line-height: 1.7; }

/* เส้นคั่น "หรือ" ก่อนปุ่ม Google */
.lt-auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--lt-muted);
  font-size: .875rem;
}
.lt-auth__or::before,
.lt-auth__or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--lt-border-strong);
}

/* ลิงก์ในสองบรรทัดนี้เป็นลิงก์ในเนื้อความ คงเส้นใต้ตามค่าเริ่มต้นของ <a> ไว้ */
.lt-auth__link,
.lt-auth__foot {
  font-size: .9375rem;
  line-height: 1.7;
  text-align: center;
}

/* ── ฟอร์ม: กลุ่มช่อง ตัวเลือก และแถวปุ่ม ───────────────── */

/* Bootstrap reboot ล้างขอบ fieldset ทิ้งและทำ legend ให้ลอยซ้ายเต็มบรรทัดตัวใหญ่
   จึงต้องตั้งใหม่ทั้งคู่ตรงนี้ ไม่ใช่แค่เติมของเรา */
.lt-fieldset {
  margin: 0 0 20px;
  padding: 16px 14px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-fieldset > legend {
  float: none;           /* ล้าง float: left ของ reboot ไม่งั้น legend ทับช่องแรก */
  width: auto;
  padding-inline: 6px;
  margin-bottom: 10px;
  color: var(--lt-ink);
  font-size: 1rem;       /* ล้าง font-size แบบ calc() ของ reboot ที่ใหญ่เท่า h4 */
  font-weight: 600;
  line-height: 1.4;
}
.lt-fieldset > .lt-field:last-child,
.lt-fieldset > .lt-note:last-child { margin-bottom: 0; }

/* หน้าที่มีหลายฟอร์มต่อกัน (ตั้งค่า) — ปุ่มบันทึกของฟอร์มบนต้องไม่ชิดกรอบของฟอร์มถัดไป */
form + form { margin-top: 28px; }

/* ชุดตัวเลือกวงกลม */
.lt-radioset { display: flex; flex-direction: column; gap: 8px; }

.lt-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--lt-tap);   /* แถวติ๊กกดง่ายเท่าปุ่ม เหมือน .lt-check */
  cursor: pointer;
  line-height: 1.7;
}
.lt-radio input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--lt-primary);
}
/* label โฟกัสเองไม่ได้ ต้องดูที่ input ข้างใน ไม่งั้นคนใช้แป้นพิมพ์ไม่เห็นว่าอยู่ตรงไหน */
.lt-radio:has(input:focus-visible) { outline: none; box-shadow: var(--lt-ring); border-radius: 12px; }

/* ตัวเลือกแบบกล่อง: หัวข้อ + คำอธิบายใต้หัวข้อ (ระดับการมองเห็นของไดอารี) */
.lt-radio--block {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  transition: border-color var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
.lt-radio--block:hover { border-color: var(--lt-input-border); }
.lt-radio--block input { margin-top: 3px; }
.lt-radio--block > span { display: flex; flex-direction: column; gap: 2px; }
.lt-radio--block strong { font-weight: 600; line-height: 1.6; }
.lt-radio--block small { color: var(--lt-muted); font-size: .875rem; line-height: 1.6; }
/* ตัวที่เลือกอยู่ทำขอบหนาขึ้นด้วยเส้นในแทนการเปลี่ยนพื้น
   เพราะพื้นสีอ่อนจะทำให้ <small> สีรองตกเกณฑ์ contrast */
.lt-radio--block:has(input:checked) {
  border-color: var(--lt-primary);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
}
/* ตัวเลือกที่ยังเลือกไม่ได้ (disabled) — จางลงทั้งกล่องและเคอร์เซอร์ไม่เป็นมือ ไม่ใช่หน้าตาเหมือนกดได้ (ตรวจทานเฟส 2 · /admin/flags) */
.lt-radio.is-disabled { cursor: not-allowed; }
.lt-radio.is-disabled > span { opacity: .6; }
.lt-radio__unready { font-weight: 500; }

/* ช่องตัวเลขสั้น ๆ ที่อยู่กลางประโยค */
.lt-input--tiny { flex: none; width: 7rem; }

/* แถวปุ่มท้ายฟอร์ม — จอแคบเรียงลงเป็นแนวตั้งให้กดเต็มความกว้าง */
.lt-formactions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.lt-formactions > .lt-btn { width: 100%; }
/* ปุ่มบันทึกที่มีโซนอื่นตามหลังฟอร์มทันที (/admin/flags ก่อน "ลิมิตของแต่ละแผน") — เดิมปุ่มชิดการ์ดข้างบนและหัวข้อข้างล่าง */
.lt-formactions--gap-after { margin-bottom: 28px; }

/* ค่าที่แก้ไม่ได้ (อีเมลของบัญชี) — หน้าตาต่างจากช่องกรอกชัดเจนด้วยเส้นประ
   ไม่ใช้ <input disabled> เพราะจะดูเหมือนช่องที่พังมากกว่าค่าที่ตั้งใจล็อกไว้ */
.lt-static {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--lt-border-strong);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* โซนอันตราย: ฟอร์มลบที่ต่อท้ายฟอร์มแก้ไข ต้องแยกออกจากปุ่มบันทึกให้ชัด */
.lt-danger {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--lt-border);
}
/* กล่องเตือนต่อท้ายรายการผลของการลบบัญชี (#delete-shop-orders) — .lt-list ไม่มี margin ล่าง กล่องเคยชิดบรรทัดสุดท้าย */
.lt-danger > .lt-list + .lt-note { margin-top: 12px; }
/* เมื่อเป็นการ์ดเต็มใบ (ระงับบัญชีในหน้าผู้ดูแล) ใช้ขอบแดงรอบใบแทนเส้นคั่นด้านบน
   padding มาจาก .lt-card อยู่แล้ว ตรงนี้แค่เปลี่ยนขอบและคงระยะห่างจากการ์ดก่อนหน้าไว้ */
.lt-card.lt-danger { border: 1px solid var(--lt-danger); }

/* ── ตัวช่วยเนื้อหาเบ็ดเตล็ด ─────────────────────────────── */

.lt-h3 {
  margin: 12px 0 2px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ข้อความที่ผู้ใช้พิมพ์มาพร้อมการขึ้นบรรทัดเอง */
.lt-prewrap {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* แถวชิปกรอง — /learn /species และหลังบ้าน (คิวอนุมัติ · ตรวจรายงาน · การแจ้งเตือน) ใช้ร่วมกัน
   จนถึง 12 ก.ย. 2569 มีกฎแค่กล่องนอก ตัวชิปไม่มีสักบรรทัด ชิปทุกหน้าจึงเป็นลิงก์ขีดเส้นใต้เรียงกัน
   เทสต์คลาสไม่เตือนเพราะนับชื่อจากคอมเมนต์ และมองไม่เห็นคลาสที่ติดกับแท็ก PHP (แก้แล้วใน tests/test_css_classes.php) */
.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
/* ชิปหนึ่งอัน — ทรงเม็ดยามีขอบ สูง ≥44px กดด้วยนิ้วได้ ทำหน้าที่เป็นปุ่มกรองจึงไม่ขีดเส้นใต้ */
.lt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease),
              box-shadow var(--lt-dur) var(--lt-ease), transform var(--lt-dur-fast) var(--lt-ease);
}
.lt-chip:hover { background: var(--lt-surface-2); border-color: var(--lt-input-border); color: var(--lt-ink); }
.lt-chip:active { transform: translateY(var(--lt-press)); }
/* ชิปที่เลือกอยู่บอกด้วยพื้น ขอบหนา และตัวหนา ไม่ใช่สีอย่างเดียว
   หน้าเดิมใส่ is-active · หน้ารวมปลาใส่ aria-current ด้วย ตัวอักษร on-soft บน primary-soft (10.1:1 · มืด 11.1:1) */
.lt-chip.is-active,
.lt-chip[aria-current="page"] {
  border-color: var(--lt-primary);
  background: var(--lt-primary-soft);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
  color: var(--lt-on-soft);
  font-weight: 700;
}
.lt-chip:focus-visible { outline: none; box-shadow: var(--lt-ring); }
/* ชิปที่เลือกอยู่มีเส้นขอบ inset ของตัวเอง ต้องต่อวงโฟกัสไว้ข้างหลัง ไม่ใช่เขียนทับ */
.lt-chip.is-active:focus-visible,
.lt-chip[aria-current="page"]:focus-visible { box-shadow: inset 0 0 0 1px var(--lt-primary), var(--lt-ring); }

.lt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

/* ── รูปย่อ ─────────────────────────────────────────────
   ทุกรูปมี width/height ใน HTML อยู่แล้ว (กันหน้ากระตุกตอนโหลด)
   จึงต้องคุม height: auto ทุกตัว ไม่งั้นรูปยืดผิดสัดส่วนเมื่อกว้างชนขอบจอ */

.lt-thumb {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
}

.lt-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lt-thumbs__img {
  width: 160px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
}

/* รูปพร้อมช่องติ๊กลบ — ทั้งใบเป็น <label> จึงต้องกดได้ทั้งกล่อง */
.lt-thumbs__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  cursor: pointer;
}
.lt-thumbs__item img {
  display: block;
  width: 120px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
/* ติ๊กไว้ว่าจะลบ = ขอบแดง + รูปจาง ข้อความ "ลบ" ในช่องติ๊กยังบอกความหมายอยู่ */
.lt-thumbs__item:has(input:checked) { border-color: var(--lt-danger); }
.lt-thumbs__item:has(input:checked) img { opacity: .55; }
.lt-thumbs__item:has(input:focus-visible) { outline: none; box-shadow: var(--lt-ring); }

/* =============================================================
   จอใหญ่ขึ้น — ส่วนขยายของบล็อกนี้เท่านั้น
   ============================================================= */

@media (min-width: 768px) {
  .lt-page__title { font-size: 1.875rem; }

  .lt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  /* จอกว้างพอให้หัวข้อกับค่าอยู่บรรทัดเดียวกัน อ่านเป็นตารางได้เร็วกว่าเรียงลงมา
     คอลัมน์หัวข้อกว้างตามข้อความจริง ไม่เกิน 40% ของกล่อง (fit-content) — เดิมจอง 15rem ทุกที่ ในการ์ดแคบ
     (หน้า admin_user · app_fish · app_settings_account) ค่าเหลือที่นิดเดียวจนวันที่ อีเมล และชื่อตัดบรรทัด
     ใช้กฎเดียวกับ .lt-shop-dl ของหน้าร้านที่พิสูจน์มาแล้ว (14 ก.ย. 2569) · ทำทั้งเว็บ 20 ก.ย. 2569
     minmax(0, 1fr) ให้คอลัมน์ค่าหดได้จริง — 1fr เปล่า ๆ ไม่หดต่ำกว่าเนื้อหา ข้อความยาวจะดันกล่องล้น */
  .lt-dl {
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    gap: 10px 16px;
    align-items: baseline;
  }
  .lt-dl dt,
  .lt-dl dd { margin: 0; }
  .lt-dl--tight { gap: 6px 16px; }

  .lt-auth { padding: 28px 26px; margin-top: 16px; }

  .lt-fieldset { padding: 18px 16px; }

  /* ปุ่มท้ายฟอร์มกลับมาอยู่แถวเดียว ปุ่มหลักชิดขวาตามลำดับการอ่าน */
  .lt-formactions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .lt-formactions > .lt-btn { width: auto; min-width: 160px; }

  .lt-section--alert { padding: 16px; }

  .lt-thumbs__img { width: 200px; }
}

@media (min-width: 1100px) {
  .lt-page__title { font-size: 2rem; }
  .lt-section + .lt-section { margin-top: 32px; }
}



/* ████████████████████████████████████████████████████████████████████████
   ส่วน 4 · หน้าเฉพาะ — จากตรงนี้ลงไปถึงก่อน @media print
   เจ้าของคือคนที่รับหน้านั้น (แนว A รอบถัดไป: ปฏิทิน · สมุด/รุ่นเพาะ · ร้าน/ตลาด/แชต · หน้าแรกอยู่ home.css)
   กติกา: ใช้ตัวแปรของส่วน 0 ล้วน (สี เงา มุมโค้ง ฟอนต์ เวลาทรานซิชัน) · ห้ามสีดิบ · ห้ามบล็อก prefers-color-scheme ของตัวเอง
          ทับชิ้นส่วนกลางได้เฉพาะใต้คลาสของหน้า · ตัวเลขใช้ --lt-font-num + tabular-nums (ห้าม --lt-font-display)
          ยก/ยุบใช้ translateY(var(--lt-lift)) / translateY(var(--lt-press)) จะได้ถูกปิดเองเมื่อ reduced motion
   ████████████████████████████████████████████████████████████████████████ */

/* ══ ส่วน 4a · หน้าเฉพาะ: หน้าตู้ ปลา และตารางงาน (แดชบอร์ด การ์ดตู้ รายการปลา ตารางงาน) ══════ */

/* =============================================================
   โซน: ตู้ · ปลา · ตารางงาน
   ทุกกฎในบล็อกนี้เขียนสำหรับจอ 360px ก่อน ส่วนขยายอยู่ท้ายบล็อก
   แนว A รอบหน้าแอป (26 ก.ย. 2569): ตัวเลข (อายุ ตัวเลขสรุป เวลา) ใช้ --lt-font-num · แถบสีตารางงานเป็นเส้นตั้ง 3px
   แบบเดียวกับการ์ดงาน · การ์ดตัวเลขที่เป็นลิงก์ (a.lt-stat) ยกตัวแบบการ์ดลิงก์ · รายละเอียดใน docs/DESIGN.md ข้อ 10
   ============================================================= */

/* ── การ์ดตู้ (app_tanks.php / app_dashboard.php) ─────────────
   ตัวการ์ดเป็น <a> ทั้งใบ จึงเข้าข่าย "ลิงก์ที่ทำหน้าที่เป็นการ์ด"
   ตัดเส้นใต้และคุมสีเองได้ ไม่ขัดกับกฎลิงก์ในเนื้อความ
   ยก padding ออกจาก .lt-card แล้วไปใส่ที่ลูกแทน เพื่อให้รูปปกชนขอบการ์ดพอดี
   overflow:hidden ทำให้มุมบนของรูปโค้งตามการ์ดโดยไม่ต้องคำนวณรัศมีซ้ำ */
.lt-tankcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 14px;
  overflow: hidden;
  color: var(--lt-ink);
  text-decoration: none;
}
/* การ์ดตู้ใช้ในกริดเสมอ ระยะระหว่างใบมาจาก gap ของกริด ไม่ใช่ margin ซ้อน */
.lt-tankcard + .lt-tankcard { margin-top: 0; }
.lt-tankcard:hover { color: var(--lt-ink); border-color: var(--lt-border-strong); }
.lt-tankcard:focus-visible { outline: none; box-shadow: var(--lt-ring); }

/* ลูกทุกตัวยกเว้นรูปปกได้ระยะขอบข้างเท่ากัน */
.lt-tankcard > :not(.lt-tankcard__cover) {
  margin: 0;
  padding-inline: 14px;
}

/* รูปปก: สัดส่วนคงที่ 16/9 ทุกใบ ไม่ว่าไฟล์จริงจะสัดส่วนไหน
   height:auto จำเป็นเพราะ <img> มี width/height attribute ติดมา (กัน layout shift)
   ถ้าไม่ล้าง อัตราส่วนจะถูก attribute ชนะ */
.lt-tankcard__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--lt-surface-2);
}

.lt-tankcard__name {
  padding-top: 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;   /* ชื่อตู้ยาวไม่มีช่องว่างต้องตัดได้ ไม่ดันการ์ดล้น */
}

.lt-tankcard__type,
.lt-tankcard__line {
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}

/* ป้ายสถานะงานค้าง — สีไม่ใช่ข้อมูลเดียว มีทั้งจุดกลมนำหน้าและข้อความเต็ม */
.lt-tankcard__state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  color: var(--lt-state-color, var(--lt-muted));
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
}
.lt-tankcard__state::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
}
.lt-tankcard__state.is-pending { --lt-state-color: var(--lt-warn); }
.lt-tankcard__state.is-clear   { --lt-state-color: var(--lt-ok); }

/* ── การ์ดงานกด "ทำแล้ว" แบบนุ่ม (แนว A 26 ก.ย. 2569) ─────────────────────────────
   การ์ดงานมีแค่ในหน้ากลุ่มนี้ (แดชบอร์ด ปฏิทิน หน้าตู้ หน้ารุ่นเพาะ) — ตัวเลือกผูกกับ data-lt-task-card ที่ c_task_card() วาด
   ไม่แตะกฎ .lt-task/.lt-task--done ของฐาน แค่เติมทรานซิชัน:
   · JS ใน layout.php เติม .lt-task--done ในที่หลังส่งสำเร็จ (ไม่โหลดหน้าใหม่) — สีเปลี่ยนตามเวลา --lt-dur และความสูงการ์ดยุบนุ่ม 200ms
     (Web Animations ในสคริปต์เดียวกัน — CSS ทำทรานซิชันความสูงจาก auto ไม่ได้)
   · ระหว่างรอผล ปุ่มถูก disabled → กฎฐานให้เคอร์เซอร์ "ห้าม" ซึ่งอ่านผิดว่ากดไม่ได้ เปลี่ยนเป็น "กำลังทำงาน" เฉพาะตอนฟอร์ม aria-busy
   ปิด JS = ฟอร์มส่งแบบเดิม หน้าโหลดใหม่พร้อมการ์ดที่ทำแล้ว (ไม่มีอะไรต้องขยับ) · ลดการเคลื่อนไหว = --lt-dur เป็นศูนย์
   หน้าตาการ์ดที่ทำแล้ว (สีรอง ขีดฆ่า เส้นสีจาง เงาบาง — ไม่จางทั้งใบ) ย้ายไปเป็นกฎฐานในส่วน 2 แล้ว (รอบแก้ผลตรวจ 26 ก.ย. 2569) */
.lt-task[data-lt-task-card] { transition: box-shadow var(--lt-dur) var(--lt-ease), opacity var(--lt-dur) var(--lt-ease); }
.lt-task[data-lt-task-card]::before { transition: opacity var(--lt-dur) var(--lt-ease); }
.lt-task[data-lt-task-card] .lt-task__time,
.lt-task[data-lt-task-card] .lt-task__title { transition: color var(--lt-dur) var(--lt-ease); }
[data-lt-task-form][aria-busy="true"] .lt-btn:disabled { cursor: progress; }

/* ── กลุ่มงานรายตู้บนแดชบอร์ด ────────────────────────────── */

/* การ์ดงานในกลุ่มห่างกัน 12px จาก gap ชั้นเดียว (เท่าการ์ดในโซนของฐาน) — เดิม gap 10 + margin ของ .lt-card + .lt-card 14
   ซ้อนเป็น 24px การ์ดงานของตู้เดียวกันดูหลุดเป็นคนละก้อน (ไล่วัดด้วยเครื่อง 26 ก.ย. 2569) */
.lt-tankgroup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lt-tankgroup > .lt-card + .lt-card { margin-top: 0; }
.lt-tankgroup > .lt-done-fold { margin-top: 0; }
/* แนว A: กลุ่มตู้ห่างกันมากขึ้น (18 → 26px) ให้แต่ละตู้อ่านเป็นก้อนของตัวเองบนหน้ายาว */
.lt-tankgroup + .lt-tankgroup { margin-top: 26px; }

.lt-tankgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lt-tankgroup__head form { margin: 0; }

.lt-tankgroup__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
/* ลิงก์ในหัวข้อ = ลิงก์ในเนื้อความ คงเส้นใต้ไว้ เปลี่ยนแค่สีให้กลืนกับหัวข้อ
   inline-flex + min-height เพื่อให้พื้นที่กดถึง 44px แม้ตัวอักษรบรรทัดเดียว
   เส้นใต้คงสูตรจางของลิงก์ฐาน (ไม่จางกว่านั้น — หัวข้อสีเดียวกับตัวอักษรรอบข้าง เส้นใต้คือสิ่งเดียวที่บอกว่ากดได้) */
.lt-tankgroup__name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lt-ink);
  overflow-wrap: anywhere;
}
.lt-tankgroup__name a:hover { color: var(--lt-primary); }
.lt-tankgroup__name a:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: var(--lt-ring);
}

/* ── รายการปลา (app_fish_list.php / แท็บปลาในหน้าตู้) ────────
   บนมือถือเป็นการ์ดต่อแถว ชื่อเด่นเต็มบรรทัด ข้อมูลรองไหลต่อท้าย */

.lt-fishlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* padding ย้ายไปอยู่ที่ลิงก์ข้างใน เพื่อให้ทั้งใบเป็นพื้นที่กด */
.lt-fishrow { padding: 0; }
.lt-fishrow + .lt-fishrow { margin-top: 0; }

.lt-fishrow__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: calc(var(--lt-radius) - 1px);
  color: var(--lt-ink);
  text-decoration: none;   /* ลิงก์ที่ทำหน้าที่เป็นการ์ด — ข้อยกเว้นของกฎเส้นใต้ */
  transition: background-color var(--lt-dur) var(--lt-ease);
}
/* ชี้แล้วพื้นเจือพื้นรองครึ่งหนึ่ง (สูตรเดียวกับแถวตารางที่ชี้อยู่) — บรรทัดแรกคือทางสำรองเมื่อไม่รู้จัก color-mix */
.lt-fishrow__link:hover {
  background: var(--lt-surface-2);
  background: color-mix(in srgb, var(--lt-surface-2) 60%, var(--lt-surface));
  color: var(--lt-ink);
}
.lt-fishrow__link:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-fishrow__name {
  flex: 1 1 100%;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lt-fishrow__species,
.lt-fishrow__age {
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-fishrow__species { min-width: 0; overflow-wrap: anywhere; }
.lt-fishrow__age { font-variant-numeric: tabular-nums; }

/* .lt-fishrow__qty อยู่ในบล็อกท้ายไฟล์ ไม่ใช่ตรงนี้ — ตามกฎลำดับใน CONTRACT ข้อ 7 */

/* ชื่อตู้ทำเป็นชิปมีเส้นขอบ เพื่อให้แยกออกจากชนิดปลาและอายุที่เป็นตัวหนังสือเปล่า
   ไม่ได้แยกด้วยสีอย่างเดียว */
.lt-fishrow__tank {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  color: var(--lt-muted);
  font-size: .8125rem;
  line-height: 1.6;
  white-space: nowrap;
}

/* ── การ์ดอายุปลา — พระเอกของหน้าโปรไฟล์ปลา ──────────────── */

.lt-agecard {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-agecard__label {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
}
/* ตัวเลขอายุตัวโต ถือเป็นข้อความระดับหัวเรื่อง จึงใช้ line-height 1.4 ได้
   ที่ 2rem ระยะจริง ~45px ยังเหลือที่ให้สระบน/วรรณยุกต์เต็ม ๆ */
/* แนว A: ตัวเลขอายุเป็นตัวธรรมดาตัวหนา (ผู้ตัดสินสั่ง: ตัวเลขห้ามตัวมีหัว) — 600 พอ ตัวใหญ่ 2rem ไม่ต้องหนาสุด */
.lt-agecard__value {
  margin: 0;
  color: var(--lt-primary);
  font-family: var(--lt-font-num);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.lt-agecard__source {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
/* โซนที่ตามการ์ดอายุ (รูป · การเติบโต · ไทม์ไลน์) เคยชิดการ์ดราว 8px เพราะไม่มีกฎ .lt-card + .lt-section
   (วัดจากภาพหน้าจอ 26 ก.ย. 2569) — เว้นเท่าระยะระหว่างโซนของหน้า */
.lt-agecard + .lt-section { margin-top: 28px; }

/* เส้นคั่นก่อนรายการวันที่ท้ายการ์ด — คุมเฉพาะ .lt-dl ที่อยู่ในการ์ดนี้ ไม่แตะคลาสกลาง */
.lt-agecard .lt-dl {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--lt-border);
}

/* ── ไทม์ไลน์เหตุการณ์ของปลา ─────────────────────────────────
   เส้นแนวตั้งวาดที่ ::before ของแต่ละรายการ (ยาวคร่อมช่อง gap ลงไปหาหมุดถัดไป)
   หมุดวาดที่ ::after ทับเส้นไว้ เพราะหมุดมีพื้นทึบสีเดียวกับพื้นหน้า */

.lt-timeline {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 4px 0 0 22px;
  list-style: none;
}

.lt-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-timeline__item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: -22px;          /* ลากผ่านช่อง gap ไปซ้อนใต้หมุดของรายการถัดไป */
  width: 2px;
  background: var(--lt-border);
}
.lt-timeline__item:last-child::before { display: none; }
.lt-timeline__item::after {
  content: "";
  position: absolute;
  left: -21px;
  top: 6px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--lt-tl-color, var(--lt-primary));
  border-radius: 50%;
  background: var(--lt-bg);
}

/* สีหมุดตามชนิดเหตุการณ์ — เป็นข้อมูลเสริมเท่านั้น ชื่อชนิดเป็นตัวหนังสืออยู่ข้าง ๆ แล้ว */
.lt-timeline__item--measure { --lt-tl-color: var(--lt-accent); }
.lt-timeline__item--health  { --lt-tl-color: var(--lt-task-medication); }
.lt-timeline__item--moved   { --lt-tl-color: var(--lt-task-water-change); }
.lt-timeline__item--spawned { --lt-tl-color: var(--lt-ok); }
.lt-timeline__item--died    { --lt-tl-color: var(--lt-danger); }
.lt-timeline__item--sold    { --lt-tl-color: var(--lt-task-custom); }
.lt-timeline__item--note    { --lt-tl-color: var(--lt-task-custom); }

.lt-timeline__when {
  color: var(--lt-muted);
  font-size: .8125rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.lt-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lt-timeline__body > p { margin: 0; }

.lt-timeline__type {
  font-weight: 600;
  line-height: 1.6;
}

.lt-timeline__nums {
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* ── การ์ดตารางงานในแท็บ "ตาราง" ของหน้าตู้ ────────────────
   ใช้แถบสีประเภทงานซ้ายการ์ดแบบเดียวกับ .lt-task (ค่ามาจาก --lt-task-color ที่ตัวการ์ด) */

/* แนว A: แถบสีเป็นเส้นตั้งบาง 3px ลอยในการ์ด ตำแหน่งเดียวกับ .lt-task::before ของฐาน (เดิมเป็นแผ่นสี 6px ชนขอบ)
   ตารางงานกับการ์ดงานเป็นของตระกูลเดียวกัน หน้าตาจึงต้องพูดภาษาเดียวกัน */
.lt-schedrow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-left: 26px;
}
.lt-schedrow::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--lt-task-color, var(--lt-task-custom));
}
/* ตารางที่หยุดชั่วคราว: แถบสีกลายเป็นสีขอบกลาง + ชื่อจางลง
   ไม่ใช้ opacity กับทั้งการ์ดเพราะจะดึง contrast ของตัวอักษรตกเกณฑ์
   ป้าย "หยุดชั่วคราว" เป็นตัวหนังสืออยู่แล้ว สีจึงไม่ใช่ข้อมูลเดียว */
/* เส้นบาง 3px สีขอบเข้มได้แค่ 1.6:1 จนแทบหาย (เดิมแผ่น 6px ยังพอเห็น) — ใช้สีรองที่เป็นกลาง ไม่ชนสีประเภทงานไหน (6.2:1 · มืด 7.7:1) */
.lt-schedrow.is-paused::before { background: var(--lt-muted); }
.lt-schedrow.is-paused .lt-schedrow__title { color: var(--lt-muted); }

.lt-schedrow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lt-schedrow__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lt-schedrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}

.lt-schedrow__times {
  margin: 0;
  font-family: var(--lt-font-num);
  font-weight: 600;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.lt-schedrow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lt-schedrow__actions form { margin: 0; }

/* ── ช่องเวลาในฟอร์มตารางงาน ─────────────────────────────────
   auto-fill ทำให้จอ 360px ได้ 2 ช่องต่อแถว จอกว้างเติมได้มากขึ้นเอง
   ไม่ต้องเขียน media query แยก */
.lt-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
}
.lt-times__row {
  display: flex;
  min-width: 0;   /* ช่อง <input type=time> มีความกว้างขั้นต่ำในตัว ต้องยอมให้หดตามกริด */
}
/* ปุ่ม "เพิ่มเวลา" (โผล่เมื่อ JS ทำงาน) และข้อความผิดพลาดที่ตามกริดเวลา เคยชิดช่องสุดท้าย 0px — เว้นเท่าระยะในกริด */
.lt-times ~ .lt-btn,
.lt-times + .lt-error { margin-top: 10px; }

/* ── กล่องอธิบายประเภทตู้ในฟอร์มตู้ ──────────────────────── */

.lt-typehelp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  list-style: none;
  color: var(--lt-muted);
  font-size: .9375rem;
  line-height: 1.7;
}
.lt-typehelp strong { color: var(--lt-ink); }

/* ── กล่องต้อนรับผู้ใช้ใหม่บนแดชบอร์ด ───────────────────────
   ผู้ใช้ใหม่ยังไม่มีตู้ หน้านี้จึงมีทางไปต่อทางเดียว จัดกึ่งกลางให้ปุ่มเป็นจุดสนใจ */
.lt-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px 36px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow);
  text-align: center;
}
.lt-welcome h1,
.lt-welcome p { margin: 0; }
.lt-welcome .lt-btn { width: 100%; max-width: 360px; }
/* โซนที่ตามหลังการ์ดต้อนรับ (การ์ดร้านในหน้าแรกของสมาชิกที่ยังไม่มีตู้) — .lt-welcome ไม่ใช่ .lt-section กฎ .lt-section + .lt-section จึงไม่ช่วย
   เดิมหัวข้อ "ร้านตู้ลำธาร" ติดใต้การ์ดราว 8px (ตรวจทานหน้าจอรอบสุดท้าย 14 ก.ย. 2569) */
.lt-welcome + .lt-section { margin-top: 28px; }

/* ── ตัวเลขสรุป (หน้าแอดมิน) ─────────────────────────────────
   มือถือ 2 คอลัมน์ · จอ ≥768px 4 คอลัมน์ (อยู่ท้ายบล็อก) */
.lt-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.lt-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
/* ตัวเลขล้วน ถือเป็นข้อความระดับหัวเรื่อง ใช้ line-height 1.4 — ตัวธรรมดาตัวหนา กว้างเท่ากัน (ห้ามตัวมีหัว) */
.lt-stat__value {
  margin: 0;
  font-family: var(--lt-font-num);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
/* การ์ดตัวเลขที่เป็นลิงก์ (/admin และ /admin/orders — กดแล้วกรองรายการตามสถานะนั้น)
   ยกตัวแบบเดียวกับการ์ดลิงก์ของฐาน เฉพาะอุปกรณ์ที่ชี้ได้จริง · ตัวที่กรองอยู่ (aria-current) = ขอบมอส + เส้นในอีกชั้น
   รูปทรงบอกด้วย ไม่ใช่สีอย่างเดียว · สีพื้นและตัวอักษรเหมือนการ์ดทั่วไปทุกอย่าง contrast จึงไม่เปลี่ยน */
a.lt-stat {
  color: var(--lt-ink);
  text-decoration: none;
  transition: transform var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease),
              border-color var(--lt-dur) var(--lt-ease);
}
@media (hover: hover) and (pointer: fine) {
  a.lt-stat:hover {
    transform: translateY(var(--lt-lift));
    border-color: var(--lt-border-strong);
    box-shadow: var(--lt-shadow);
  }
}
a.lt-stat:active { transform: none; box-shadow: none; }
a.lt-stat:focus-visible { outline: none; box-shadow: var(--lt-ring); }
a.lt-stat[aria-current="page"] {
  border-color: var(--lt-primary);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
}
.lt-stat__label {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}

/* ── กรอบกราฟการเติบโต ───────────────────────────────────────
   Chart.js ตั้ง maintainAspectRatio:false จึงต้องมีกรอบที่ความสูงแน่นอน
   ไม่งั้น canvas จะสูงเป็น 0 หรือยืดไม่รู้จบ
   ค่า width/height ของ canvas ที่นี่เป็นค่าตั้งต้นก่อน JS ทำงาน
   (Chart.js เขียน inline style ทับเองภายหลัง) */
.lt-chart {
  position: relative;
  height: 240px;
  padding: 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
.lt-chart canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── จอ ≥768px ───────────────────────────────────────────── */

@media (min-width: 768px) {
  .lt-tankcard__name { font-size: 1.125rem; }

  .lt-fishrow__link { padding: 14px 18px; }

  .lt-agecard__value { font-size: 2.5rem; }

  .lt-timeline { gap: 22px; }
  .lt-timeline__item::before { bottom: -26px; }

  /* ตำแหน่งเส้นสีตามการ์ดงานของฐานบนจอกว้าง (.lt-task padding 30px เส้นที่ 13px) */
  .lt-schedrow { padding-left: 30px; }
  .lt-schedrow::before { left: 13px; top: 18px; bottom: 18px; }

  .lt-times { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .lt-welcome { padding: 52px 32px 56px; }

  .lt-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .lt-stat { padding: 18px; }
  .lt-stat__value { font-size: 2rem; }

  .lt-chart { height: 320px; padding: 16px; }
}

/* ── จอ ≥1100px ──────────────────────────────────────────── */

@media (min-width: 1100px) {
  .lt-tankcard > :not(.lt-tankcard__cover) { padding-inline: 18px; }
  .lt-tankcard__name { padding-top: 14px; }

  .lt-timeline { padding-left: 28px; }

  .lt-statgrid { gap: 14px; }

  .lt-chart { height: 360px; }
}



/* ══ ส่วน 4b · หน้าเฉพาะ: ปฏิทินรายเดือน (รวมแถบตัวกรองและคำอธิบายสีที่หน้าอื่นยืมใช้) ══════ */

/* =============================================================
   ปฏิทินเดือน (pages/app_calendar.php) + ตัวเลือกวันของฟอร์มตารางเวลา
   เขียนสำหรับจอ 360px ก่อน ส่วนขยายจอใหญ่รวมอยู่ท้ายบล็อกนี้ที่เดียว
   สีอ้างตัวแปรทั้งหมด จึงไม่ต้องมีบล็อกโหมดมืดซ้ำ
   แนว A รอบหน้าแอป (26 ก.ย. 2569): ตัวเลขวัน/เปอร์เซ็นต์/เดือนปีเป็นตัวธรรมดาตัวหนา (--lt-font-num) ·
   ช่องวันมุม 12px เปลี่ยนสถานะนุ่ม ชี้แล้วขอบเข้ม+เงาบาง (เฉพาะเมาส์) · วันของเดือนอื่นเป็นแผ่นจางไม่มีขอบ ·
   จุดสีมีวงพื้นการ์ดคั่นจึงไม่หลอมกัน · แถบกรอง/คำอธิบายสีมีเงาบาง · ไม่มีวงแสงรอบ "วันนี้" (กติกาห้ามแสงเรือง)
   ============================================================= */

/* ── แถบเปลี่ยนเดือน ─────────────────────────────────────── */

.lt-calnav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* ชื่อเดือนมีปีเป็นตัวเลข — ตัวธรรมดาตัวหนาตามกติกาตัวเลข ไม่ใช่ตัวมีหัว (ตัวมีหัวของหน้านี้คือ h1 "ปฏิทิน" อยู่แล้ว) */
.lt-calnav__label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lt-font-num);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;      /* หัวเรื่องไทย ≥1.4 ไม่งั้นวรรณยุกต์ชนบรรทัดบน */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ปุ่มก่อนหน้า/ถัดไปมาเป็น .lt-btn--sm แต่เป็นปุ่มหลักของหน้านี้ — สูงเต็ม --lt-tap (48px) ทุกจอ
   (เดิมดันเป็น 44px ซึ่งตัวเลือกนี้ specificity สูงกว่ากฎ 48px ของฐานบนมือถือ จึงเคยกดปุ่มเหลือ 44px) */
.lt-calnav .lt-btn {
  flex: none;
  min-height: var(--lt-tap);
  padding-inline: 14px;
}

.lt-calnav__today {
  margin: 0 0 12px;
  text-align: center;
}

/* ลิงก์ "วันนี้" เป็นลิงก์ในเนื้อความ คงเส้นใต้ไว้ แค่ขยายพื้นที่กดให้เท่าปุ่มข้าง ๆ (--lt-tap) */
.lt-calnav__today a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--lt-tap);
  padding: 0 12px;
  line-height: 1.6;
}
.lt-calnav__today a:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: var(--lt-ring);
}

/* ── สรุปความคืบหน้าของเดือน (ซ้อนอยู่บน .lt-card) ───────── */

.lt-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
/* ย่อหน้าในการ์ดนี้จัดระยะด้วย gap ล้วน ไม่ให้ margin ของ <p> มาซ้อนอีกชั้น */
.lt-progress > p { margin: 0; }

/* "ทำสำเร็จ 43%" — ตัวเลขเปอร์เซ็นต์เป็นตัวธรรมดาตัวหนา กว้างเท่ากัน (ผู้ตัดสินสั่ง · รอบเสนอ A ใช้ตัวมีหัว ไม่ทำตาม) */
.lt-progress__value {
  font-family: var(--lt-font-num);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* แนว A: รางบางลง (12 → 8px) ไม่มีเส้นกรอบ เหลือเส้นในบาง ๆ สีขอบให้รางยังเห็นบนการ์ด
   ส่วนที่ทำแล้วเป็นมอสทึบ — ต่างจากรางพื้นรองชัด (สว่าง ~6.4:1 · มืด ~9:1 ≥ 3:1 ของที่ไม่ใช่ตัวอักษร) */
.lt-progress__bar {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--lt-surface-2);
  box-shadow: inset 0 0 0 1px var(--lt-border);
  overflow: hidden;
}

/* ความกว้างมาจาก style ในหน้า (หน่วย %) ที่นี่กำหนดแค่รูปทรง
   ตัวเลขเปอร์เซ็นต์อยู่บรรทัดเหนือแถบแล้ว สีจึงไม่ใช่ข้อมูลเดียว */
.lt-progress__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--lt-primary);
}

/* ── แถบตัวกรอง (ปฏิทิน ปลา คิวเอ และหน้าแอดมิน ใช้ร่วมกัน) ─ */

/* แนว A: ระยะในโปร่งขึ้น (12 → 16px) + เงาบางแบบของที่วางบนพื้น — แยกแถบกรองออกจากการ์ดเนื้อหาที่ตามมา */
.lt-filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
/* .lt-field มี margin-bottom:16px ติดมาอยู่แล้ว ในแถบนี้ใช้ gap แทนเพื่อไม่ให้ระยะซ้อนกัน
   (min-width:0 ที่นี่คือกันช่อง select ดันแถวให้ล้น ไม่ใช่กรณีตารางในกรอบเลื่อนที่ห้ามไว้) */
.lt-filters .lt-field {
  margin-bottom: 0;
  min-width: 0;
}
.lt-filters .lt-btn { align-self: stretch; }   /* จอเล็ก ปุ่มกรองเต็มความกว้าง กดง่ายด้วยนิ้วโป้ง */

/* ตัวกรองของปฏิทินพับไว้ใน <details> (pages/app_calendar.php) — เดิมฟอร์มกรอง 4 ช่อง (สูง 462px) กับการ์ดสรุปเดือน (310px)
   มาก่อนตาราง บนจอ 390px ตารางเดือนเริ่มที่ 1,123px ต้องเลื่อนเกินจอครึ่ง (รอบตรวจอิสระ 26 ก.ย. 2569)
   กางเองเมื่อมีตัวกรองค้างอยู่ (PHP ใส่ open) · ปิด JS ก็กางได้เพราะ <details> เป็นของเบราว์เซอร์
   ลูกศรหมุนนุ่มตาม --lt-dur แบบกล่องพับของตลาด */
.lt-filterfold { margin: 0 0 12px; }
.lt-filterfold > summary { list-style: none; }
.lt-filterfold > summary::-webkit-details-marker { display: none; }
.lt-filterfold > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--lt-dur) var(--lt-ease);
}
.lt-filterfold[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lt-filterfold[open] > summary { margin-bottom: 12px; }
.lt-filterfold__count { color: var(--lt-muted); font-weight: 500; }

/* ── ตารางเดือน ───────────────────────────────────────────
   หัวตารางกับตัวตารางเป็น grid 7 คอลัมน์คนละก้อน แต่ใช้ gap เท่ากัน คอลัมน์จึงตรงกัน
   ใช้ minmax(0,1fr) ไม่ใช่ 1fr เฉย ๆ เพราะแถวจุดสีที่ยาวกว่าช่องจะดันคอลัมน์จนตารางล้นจอ
   จอ 360px: เนื้อหากว้าง 328px − gap 2px×6 = ช่องละ ~45px ไม่ล้นแนวนอนแน่นอน */

.lt-calgrid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

/* แนว A: ช่องห่างกัน 3px (เดิม 2) ให้ช่องวันแยกเป็นแผ่นชัดขึ้นบนมือถือ — จอ 360px ยังได้ช่องละ ~44px ไม่ล้นแนวนอน */
.lt-calgrid__head,
.lt-calgrid__body {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

/* ชื่อวันย่อ: น้ำหนักกลาง ระยะห่างตัวอักษรนิดหนึ่ง — เงียบกว่าตัวเลขวันที่อยู่ข้างล่าง (สีรอง บน bg 5.6:1 · มืด 8.3:1) */
.lt-calgrid__dow {
  padding: 4px 0;
  color: var(--lt-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: center;
}

/* ช่องวันเป็นลิงก์ที่ทำหน้าที่เป็นการ์ด/ปุ่ม จึงตัดเส้นใต้และมีพื้นได้ (ข้อยกเว้นของกฎลิงก์ในเนื้อความ)
   min-height 62px ทำให้ช่องสูงพอใส่เลข + จุด และเกิน 44px ตามเกณฑ์พื้นที่กด
   บนจอกว้างขึ้น aspect-ratio จะเข้ามาคุมแทนเอง */
.lt-calgrid__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  aspect-ratio: 4 / 5;
  min-height: 62px;
  padding: 3px 2px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
  color: var(--lt-ink);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease),
              box-shadow var(--lt-dur) var(--lt-ease);
}
/* ชี้แล้ว: ขอบเข้มขึ้นเป็นเส้นขอบปุ่ม + เงาบาง (ไม่ยกตัว — ตารางทั้งแผ่นที่กระโดดทีละช่องดูวุ่น)
   เฉพาะอุปกรณ์ที่ชี้ได้จริง จอสัมผัสแตะแล้วไปหน้าวันนั้นทันที ไม่ต้องมีสถานะชี้ค้าง */
@media (hover: hover) and (pointer: fine) {
  .lt-calgrid__day:hover {
    border-color: var(--lt-border-strong);
    box-shadow: var(--lt-shadow-sm);
    color: var(--lt-ink);
  }
}
.lt-calgrid__day:focus-visible {
  outline: none;
  box-shadow: var(--lt-ring);
}

/* ตัวเลขวัน — ตัวธรรมดาตัวหนา กว้างเท่ากัน (ผู้ตัดสินสั่ง: ตัวเลขในปฏิทินห้ามตัวมีหัว) */
.lt-calgrid__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  font-family: var(--lt-font-num);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* จุดสีของงานอยู่ล่างช่องเสมอ — margin-top:auto คือการจัดวางในแนวแกน ไม่ใช่ระยะซ้อน
   ตัดบรรทัดได้ เพราะป้าย "+n" ต่อท้ายจุด 4 จุดอาจกว้างเกินช่องบนจอ 360px */
.lt-calgrid__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 3px;
  margin-top: auto;
  min-width: 0;
  max-width: 100%;
}

/* จุดสีงาน 7px (เดิม 6) — สีมาจาก style ในหน้า (var(--lt-<ประเภทงาน>)) ทุกสีบน surface ≥ 3.3:1 อยู่แล้ว
   แนว A: วงรอบเป็นสีพื้นการ์ด 1.5px (เดิมวงสีขอบ) จุดที่ชิดกันจึงไม่หลอมเป็นก้อนเดียว — วงสีพื้น ไม่ใช่วงแสง */
.lt-calgrid__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--lt-surface);
}

.lt-calgrid__plus {
  flex: none;
  color: var(--lt-muted);
  font-family: var(--lt-font-num);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* สถานะของช่องวัน — ชื่อคลาสตามที่หน้าใส่จริง: is-outside / is-today / is-overdue / is-selected */

/* วันของเดือนอื่น: จางลงด้วยการถอดพื้นและใช้สีตัวอักษรรอง ไม่ใช้ opacity กับทั้งช่อง จุดสีจะได้ไม่ซีดตาม
   แนว A: เป็นแผ่นพื้นรองจาง ๆ ไม่มีเส้นขอบ (เดิมกรอบเส้นบนพื้นหน้า) — ตารางอ่านเป็น "เดือนนี้" ก้อนเดียวชัดขึ้น
   ตัวเลขสีรองบนแผ่นนี้ ≥ 5.2:1 ทั้งสองโหมด (แผ่นจางกว่า surface-2 เต็ม) · บรรทัดแรกคือทางสำรองเมื่อไม่รู้จัก color-mix */
.lt-calgrid__day.is-outside {
  background: transparent;
  background: color-mix(in srgb, var(--lt-surface-2) 55%, transparent);
  border-color: transparent;
}
.lt-calgrid__day.is-outside .lt-calgrid__num { color: var(--lt-muted); font-weight: 500; }

/* วันนี้: เส้นขอบหนา + เลขในวงกลมทึบ เป็นรูปทรงสองชั้น ไม่ได้พึ่งสีอย่างเดียว
   (รอบเสนอ A มีวงแสงมอสจางรอบช่อง — ไม่ทำ ในโหมดมืดกลายเป็นแสงเขียวเรือง ขัดกติกาของเจ้าของ) */
.lt-calgrid__day.is-today {
  border-width: 2px;
  border-color: var(--lt-primary);
}
.lt-calgrid__day.is-today .lt-calgrid__num {
  background: var(--lt-primary);
  color: var(--lt-on-primary);
  font-weight: 700;
}

/* มีงานเลยกำหนด: เส้นขอบสีเตือน + เครื่องหมาย ! มุมขวาบน (สัญลักษณ์ ไม่ใช่แค่สี) */
.lt-calgrid__day.is-overdue { border-color: var(--lt-danger); }
.lt-calgrid__day.is-overdue::after {
  content: "!";
  position: absolute;
  top: 1px;
  right: 4px;
  color: var(--lt-danger);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.6;
}

/* วันที่เลือกอยู่: พื้นทึบอ่อน + ขอบเข้ม แยกออกจาก "วันนี้" ที่เป็นวงกลมรอบตัวเลข
   แนว A: ตัวเลขเป็น on-soft (บน primary-soft 10.1:1 · มืด 11.1:1) + เงาบางให้ช่องที่เลือกนูนจากแผ่นเดียวกันนิดหนึ่ง
   ช่องที่เลือกไว้เป็นสถานะค้าง (ไม่ใช่ตอนชี้) จึงใช้ได้ทั้งจอสัมผัสและเมาส์ */
.lt-calgrid__day.is-selected {
  background: var(--lt-primary-soft);
  border-color: var(--lt-primary);
  box-shadow: var(--lt-shadow-sm);
  color: var(--lt-on-soft);
}
.lt-calgrid__day.is-selected .lt-calgrid__num { font-weight: 700; }
.lt-calgrid__day.is-selected.is-outside .lt-calgrid__num { color: var(--lt-on-soft); }
/* กฎชี้ (ขอบเข้ม+เงาบาง) ประกาศก่อนสถานะวันนี้/เลยกำหนด/ที่เลือกไว้ซึ่ง specificity เท่ากัน — ขอบของสถานะจึงชนะเสมอ
   ช่องสถานะพิเศษไม่เปลี่ยนสีขอบตอนชี้ (ความหมายของขอบต้องคงอยู่)
   แต่เงาของช่องที่เลือกไว้ก็ชนะวงโฟกัสด้วยเหตุผลเดียวกัน — ต่อวงโฟกัสไว้หน้าเงาอีกครั้ง ไม่งั้นกด Tab มาช่องนี้แล้วไม่เห็นวง */
.lt-calgrid__day.is-selected:focus-visible { box-shadow: var(--lt-ring), var(--lt-shadow-sm); }

/* ── สิ่งที่ "ลงเองว่าทำไปแล้ว" บนปฏิทิน (สมุดการดูแล · 25 ก.ย. 2569) ──────
   ต้องแยกจากงานที่ตั้งเตือนตั้งแต่แรกเห็น เพราะมันคือเรื่องที่จบแล้ว ไม่ใช่งานค้าง:
     งานที่ตั้งเตือน  จุดกลมในช่องวัน · การ์ดเต็มใบที่มีปุ่ม "ทำแล้ว"
     ที่ลงเองแล้ว     เครื่องหมายถูกในช่องวัน · แถวแบนเส้นประที่ไม่มีปุ่มสักปุ่ม
   ตัวแยกหลักคือ "รูปทรง" ไม่ใช่สี — คนตาบอดสีจึงยังแยกสองอย่างนี้ออกจากกันได้ */

.lt-calgrid__ticks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 3px;
  margin-top: auto;   /* วันที่มีแต่ของที่ลงเอง เครื่องหมายถูกก็ยังอยู่ล่างช่องเหมือนแถวจุดสี */
  min-width: 0;
  max-width: 100%;
  line-height: 1;
}
/* มีทั้งสองแถว: แถวจุดสีเป็นตัวถูกดันลงล่าง ส่วนแถวถูกเกาะต่อท้ายทันที ไม่แย่งที่ว่างกัน */
.lt-calgrid__dots + .lt-calgrid__ticks { margin-top: 0; }

.lt-calgrid__tick {
  flex: none;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  /* สีมาจาก style ในหน้า (var(--lt-<ประเภทงาน>)) เหมือนจุดสีของงาน */
}

/* ช่องวันสูง 62px บนมือถือ พอดีกับเนื้อในแถวเดียว (เลข + แถวจุดสี) เพราะเดิมมีได้แค่แถวเดียว
   พอมีแถวเครื่องหมายถูกเพิ่มมาอีกแถว และแต่ละแถวขึ้นบรรทัดใหม่ได้เมื่อมี "+n" ต่อท้าย
   เนื้อในสูงได้ถึง 87px แล้ว overflow:hidden ก็ตัดทิ้งเงียบ ๆ — เห็นแค่ขอบบนของถูกแถวแรก และ "+n" หายสนิท
   เพิ่มความสูงเฉพาะเดือนที่มีสิ่งที่ลงเองไว้จริง (หน้าใส่คลาสนี้ให้เมื่อ $careByDay ไม่ว่าง)
   สวิตช์ปิด = ไม่มีคลาสนี้ ตารางจึงสูงเท่าเดิมทุกพิกเซล

   ต้องถอด aspect-ratio ทิ้งพร้อมกันเสมอ ไม่งั้นความสูงจะ "ส่งต่อ" กลับไปเป็นความกว้าง (88 × 4/5 = 70px)
   ช่องกว้างเกินคอลัมน์ของตัวเองแล้วดันทั้งหน้าเลื่อนแนวนอน · จอใหญ่คืนอัตราส่วนจัตุรัสให้ท้ายไฟล์ */
.lt-calgrid--done .lt-calgrid__day { aspect-ratio: auto; min-height: 88px; }

/* รายการของวันที่เลือก — แถวเตี้ยกดได้ทั้งแถว (≥44px) พาไปหน้าแก้บันทึกนั้น */
.lt-caldone {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

/* แนว A: เส้นสีด้านหน้า 3px (เดิม 4) มุม 12px — ยังเป็น "แถวแบนเส้นประ ไม่มีเงา" ต่างจากการ์ดงานที่มีเงาเสมอ
   (รูปทรงคือตัวแยกของที่ลงเองออกจากงานที่ตั้งเตือน ห้ามใส่เงาให้แถวนี้) */
.lt-caldone__item {
  border: 1px dashed var(--lt-border-strong);
  border-inline-start: 3px solid var(--lt-task-color, var(--lt-task-custom));
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
}

.lt-caldone__link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: var(--lt-tap);
  padding: 10px 12px;
  border-radius: calc(var(--lt-radius-sm) - 2px);
  color: var(--lt-ink);
  text-decoration: none;   /* ทั้งแถวทำหน้าที่เป็นการ์ด/ปุ่ม เหมือนช่องวันในตาราง */
  transition: background-color var(--lt-dur) var(--lt-ease);
}
.lt-caldone__link:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
.lt-caldone__link:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-caldone__tick {
  flex: none;
  color: var(--lt-ok);
  font-weight: 700;
  line-height: 1.6;
}

.lt-caldone__body { flex: 1 1 auto; min-width: 0; }

.lt-caldone__time {
  margin-inline-end: 6px;
  color: var(--lt-muted);
  font-family: var(--lt-font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ชื่อบันทึกแบบ "อื่น ๆ" เป็นข้อความที่ผู้ใช้พิมพ์เอง ยาวได้ 160 ตัวอักษรและอาจไม่มีช่องว่างเลย
   (care_log_clean ตัดที่ 160 ไม่ได้บังคับให้มีช่องว่าง) — ข้อความละตินยาวติดกันจะดันหน้าล้นแนวนอนทั้งหน้า
   ภาษาไทยไม่มีอาการนี้เพราะเบราว์เซอร์ตัดคำไทยให้ กติกาเดียวกับทุกช่องที่รับข้อความผู้ใช้ในไฟล์นี้ */
.lt-caldone__name { font-weight: 600; overflow-wrap: anywhere; }

.lt-caldone__meta {
  display: block;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* บรรทัด "ทำเมื่อ …" ใต้การ์ดงานที่ถูกปิดคนละวันกับวันของงาน (เจ้าของเลือก "วันที่ลงมือจริง" 25 ก.ย. 2569)
   เครื่องหมายถูกของบันทึกไปอยู่ที่วันที่ลงมือแล้ว การ์ดของวันเดิมจึงต้องบอกว่าไปทำวันไหน

   ระยะขอบเขียนเองทั้งคู่ ห้ามปล่อยให้เป็นค่าของเบราว์เซอร์: บรรทัดนี้แทรกอยู่ "ระหว่างการ์ดสองใบ"
   กฎ .lt-card + .lt-card ที่เว้น 12px จึงใช้ไม่ได้อีกต่อไป (มี <p> คั่นกลาง) บรรทัดนี้ต้องเว้นให้แทน
   บนชิดการ์ดที่มันพูดถึง (4px) ล่างเท่าระยะห่างระหว่างการ์ด (12px) การ์ดใบถัดไปจึงไม่ติดกัน */
.lt-caldone__moved {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 4px 0 12px;
  padding-inline-start: 12px;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-caldone__moved .lt-caldone__tick { line-height: inherit; }

/* ป้ายบนแถวของสิ่งที่ลงเอง เมื่อแถวนั้นไปปิดงานที่ตั้งเตือนของ "วันอื่น"
   ความเชื่อมโยงต้องอ่านออกจากทั้งสองฝั่ง: การ์ดของวันเดิมบอก "ทำเมื่อ …" ส่วนแถวนี้บอกว่าปิดงานของวันไหน
   เป็นของประกอบ ไม่ใช่ชื่อของแถว จึงเบากว่าป้ายรุ่นเพาะที่อยู่ข้าง ๆ (เส้นประชุดเดียวกับกรอบของแถวเอง) */
.lt-caldone__from {
  border-style: dashed;
  background: transparent;
  color: var(--lt-muted);
  font-weight: 500;
}

/* บรรทัด "ลงเองอีก n ครั้งในเดือนนี้" ในกล่องสรุปหัวปฏิทิน — อยู่คนละบรรทัดกับเปอร์เซ็นต์เสมอ */
.lt-caldone__count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-weight: 600;
}
.lt-caldone__count .lt-caldone__tick { line-height: inherit; }

/* ── คำอธิบายสีประเภทงาน ─────────────────────────────────── */

/* กล่องคำอธิบายสีของปฏิทิน — เป็น .lt-section อยู่แล้ว เพิ่มแค่กรอบให้แยกจากตาราง (แนว A: + เงาบาง ระยะในโปร่งขึ้น) */
.lt-legend {
  padding: 14px 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}

.lt-legend__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  line-height: 1.6;
}

.lt-legend__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--lt-border-strong);
}

/* ── ตัวเลือกวัน (ฟอร์มตารางเวลา) ─────────────────────────
   โครงจริงคือ <label class="lt-daypick__item"> ครอบ <input type="checkbox"> ไม่ใช่แถบวันของปฏิทิน
   ชิป 7 วันวางไม่พอในจอมือถือ — **ตัดบรรทัด** (สองแถว) ให้เห็นครบทุกวัน
   เดิมเลื่อนแนวนอน (วัดจริง 9 ต.ค. 2569 ที่จอ 375px: เห็น 4 วันครึ่ง ศ. กับ ส. อยู่นอกจอ มือถือจริงไม่โชว์แถบเลื่อน
   ทั้งที่งานที่คนตั้งบ่อยสุดคือเปลี่ยนน้ำวันเสาร์-อาทิตย์) · แบบวันที่ของเดือน (.lt-daypick--month · 31 ชิป) ตัดบรรทัดอยู่แล้วตั้งแต่ต้น
   จึงใช้กฎชุดเดียวกัน ไม่มี overflow แล้ว วงโฟกัสจึงไม่ถูกตัด */

.lt-daypick,
.lt-daypick--month {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.lt-daypick__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: 56px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease),
              box-shadow var(--lt-dur) var(--lt-ease), transform var(--lt-dur-fast) var(--lt-ease);
}
.lt-daypick__item:hover { background: var(--lt-surface-2); border-color: var(--lt-input-border); }
/* แตะแล้วยุบ 1px แบบชิปกรองของฐาน (--lt-press เป็นศูนย์เมื่อผู้ใช้ขอลดการเคลื่อนไหว) */
.lt-daypick__item:active { transform: translateY(var(--lt-press)); }
.lt-daypick__item input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--lt-primary);
}
/* ช่องติ๊กยังเห็นอยู่ในชิปเสมอ พื้น/ขอบที่เปลี่ยนเป็นแค่ตัวช่วยอ่านเร็ว ไม่ใช่ข้อมูลเดียว
   แนว A: ตัวอักษร on-soft (10.1:1 · มืด 11.1:1) + เส้นในอีกชั้นแบบชิปที่เลือกของฐาน */
.lt-daypick__item:has(input:checked) {
  border-color: var(--lt-primary);
  background: var(--lt-primary-soft);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
  color: var(--lt-on-soft);
}
.lt-daypick__item:has(input:focus-visible) {
  outline: none;
  box-shadow: var(--lt-ring);
}
/* ชิปที่ติ๊กอยู่มีเส้นในของตัวเอง ต้องต่อวงโฟกัสไว้ข้างหลัง ไม่ใช่เขียนทับ (แบบเดียวกับ .lt-chip ของฐาน) */
.lt-daypick__item:has(input:checked):has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--lt-primary), var(--lt-ring); }

/* ── กล่องพับ "งานที่ทำแล้ว" ในหน้าแดชบอร์ด ────────────────
   ห้ามเปลี่ยน display ของ <details> เป็น flex/grid — Chrome จะเลิกซ่อนเนื้อหาตอนพับ
   ระยะภายในจึงใช้ margin ชั้นเดียวที่ summary ไม่ได้ซ้อนกับ margin อื่น */

.lt-done-fold { margin-top: 12px; }

.lt-done-fold > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--lt-muted);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;            /* ซ่อนสามเหลี่ยมประจำ <details> */
}
.lt-done-fold > summary::-webkit-details-marker { display: none; }
.lt-done-fold > summary::marker { content: ""; }
.lt-done-fold > summary:hover { color: var(--lt-ink); }
/* มือถือและจอสัมผัส: "ที่ทำไปแล้ววันนี้ (n)" สูงเต็ม --lt-tap (เดิม 44px · วัดรอบแก้ผลตรวจ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-done-fold > summary { min-height: var(--lt-tap); }
}
.lt-done-fold > summary:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: var(--lt-ring);
}

/* ลูกศรวาดเอง หมุนลงเมื่อกาง — บอกสถานะพับ/กางด้วยรูปทรง ไม่ใช่สี */
.lt-done-fold > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--lt-dur-fast) var(--lt-ease);   /* เดิม .12s ease ตรง ๆ — ใช้ตัวแปรกลาง ถูกปิดเองเมื่อลดการเคลื่อนไหว */
}
.lt-done-fold[open] > summary::before { transform: rotate(45deg); }
.lt-done-fold[open] > summary {
  margin-bottom: 12px;
  color: var(--lt-ink);
}

/* =============================================================
   จอใหญ่ขึ้น — ส่วนขยายของบล็อกปฏิทิน
   ============================================================= */

@media (min-width: 768px) {
  /* ตัวกรองเรียงเป็นแถวเดียว ปุ่มเสมอขอบล่างของช่องกรอก (ป้ายกำกับอยู่เหนือช่อง) */
  .lt-filters {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .lt-filters .lt-field { flex: 1 1 180px; }
  .lt-filters .lt-btn { flex: none; align-self: auto; }

  /* จอกว้างพอให้ตารางมีกรอบการ์ดของตัวเอง และช่องวันเป็นจัตุรัสเต็มตัว */
  .lt-calgrid {
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--lt-border);
    border-radius: var(--lt-radius);
    background: var(--lt-surface);
    box-shadow: var(--lt-shadow);
  }
  .lt-calgrid__head,
  .lt-calgrid__body { gap: 6px; }
  .lt-calgrid__dow { font-size: .8125rem; }

  .lt-calgrid__day {
    aspect-ratio: 1 / 1;
    align-items: flex-start;   /* จอใหญ่วางเลขชิดซ้ายบนแบบปฏิทินตั้งโต๊ะ */
    gap: 4px;
    padding: 8px;
  }
  /* จอใหญ่ช่องวันใหญ่พออยู่แล้ว (จัตุรัสราว 150px) คืนอัตราส่วนเดิมให้เดือนที่มีสิ่งที่ลงเองด้วย
     — ความสูงพิเศษของมือถือไม่มีเหตุผลที่นี่ และต้องเหมือนกันทุกเดือนไม่ว่าจะมีบันทึกหรือไม่ */
  .lt-calgrid--done .lt-calgrid__day { aspect-ratio: 1 / 1; min-height: 62px; }

  .lt-calgrid__num { font-size: .9375rem; min-width: 26px; height: 26px; }
  .lt-calgrid__dots { justify-content: flex-start; gap: 3px 4px; }
  .lt-calgrid__dot { width: 8px; height: 8px; }
  .lt-calgrid__ticks { justify-content: flex-start; gap: 0 4px; }

  .lt-calnav__label { font-size: 1.25rem; }
}

@media (min-width: 1100px) {
  .lt-calgrid__day { padding: 10px; }
  .lt-calgrid__dot { width: 9px; height: 9px; }
}



/* ══ ส่วน 4d · หน้าเฉพาะ: หลังบ้าน แจ้งเตือน และตั้งค่าช่องทาง ══════════════════════════ */

/* =============================================================
   โซนหลังบ้าน · แจ้งเตือน · ตั้งค่าช่องทาง
   ต่อท้าย app-theme.css — ใช้ตัวแปรสีชุดเดิมล้วน ไม่มีค่าสีดิบสักจุด
   จึงไม่ต้องเขียน @media (prefers-color-scheme: dark) ในบล็อกนี้เลย
   ทุกกฎด้านล่างเขียนสำหรับจอ 360px ก่อน ส่วนขยายจอใหญ่รวมไว้ท้ายบล็อก
   ============================================================= */

/* ── แถบเมนูหลังบ้าน ─────────────────────────────────────────
   .lt-tabs / .lt-tabs__item ฐานเป็นของอีกโซนหนึ่ง ตรงนี้เขียนเฉพาะ "ส่วนต่าง"
   ของหลังบ้าน: เมนูมี 9 รายการ ถ้าเป็นแถบเลื่อนแนวนอนแบบเมนูปกติ (3 รายการ)
   คนจะไม่รู้เลยว่ามีเมนูอีกครึ่งหนึ่งซ่อนอยู่พ้นขอบจอ จึงให้ตัดขึ้นบรรทัดใหม่แทน */
.lt-tabs--admin {
  flex-wrap: wrap;
  row-gap: 4px;
  overflow-x: visible;   /* ยกเลิกแถบเลื่อนของ .lt-tabs ฐาน เพราะตรงนี้ใช้การตัดบรรทัด */
}

/* ย่อระยะในปุ่มลงเล็กน้อยให้ลงได้ ~3 แถวบนจอ 360px แต่คงความสูง 44px ไว้เท่าเดิม */
.lt-tabs--admin .lt-tabs__item {
  min-height: 44px;      /* กดด้วยนิ้วได้ — ระบุซ้ำเพราะที่นี่แก้ padding/ขนาดตัวอักษร */
  padding-inline: 12px;
  font-size: .9375rem;
}

/* จำนวนรายงานที่ยังไม่จัดการ ติดท้ายเมนู "จัดการรายงาน"
   ใช้ขอบสีแดง + ตัวเลข ไม่ใช่พื้นแดงทึบ เพราะ --lt-danger สลับเป็นแดงอ่อนในโหมดมืด
   พื้นทึบจะต้องฝังสีตัวอักษรดิบเพื่อให้ contrast ผ่านทั้งสองโหมด ซึ่งห้ามทำในไฟล์นี้
   ชื่อเมนูอยู่ติดกันอยู่แล้ว ตัวเลขจึงไม่ได้สื่อความหมายด้วยสีลำพัง */
.lt-tabs--admin .lt-badge {
  display: inline-block;
  min-width: 22px;
  margin-inline-start: 6px;
  padding: 0 6px;
  border: 1px solid var(--lt-danger);
  border-radius: 11px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-family: var(--lt-font-num);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 20px;     /* 20/12 = 1.67 เท่ากับกติกาอักษรไทย ≥1.6 */
  text-align: center;
}

/* ── การ์ดรายงานจากผู้ใช้ (หลังบ้าน › จัดการรายงาน) ──────────
   โครงจริง: article.lt-card > p.__head · p.__target · blockquote.__excerpt · form.__actions
   จัดระยะด้วย gap ชั้นเดียว แล้วปิด margin ของ <p>/<blockquote> ที่เบราว์เซอร์ให้มา */
.lt-report-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-report-item > * { margin-block: 0; }

/* แถวบน: ป้ายสถานะ + ป้ายเหตุผล + ใครรายงานเมื่อไร */
.lt-report-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .875rem;
  line-height: 1.6;
}
.lt-report-item__head .lt-muted {
  flex: 1 1 12rem;
  min-width: 0;          /* ให้ข้อความยาวหดและตัดบรรทัดได้ (เป็นกล่อง flex ไม่ใช่ตาราง) */
}

/* บรรทัดเป้าหมาย: "เป้าหมาย: qa_answer #12 [ซ่อนอยู่]" — ป้ายต้องอยู่ระดับเดียวกับข้อความ */
.lt-report-item__target {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* ข้อความที่ถูกรายงาน (ตัดมา 140 ตัวอักษรจากฝั่ง PHP แล้ว)
   ทำให้เห็นชัดว่าเป็นคำพูดของคนอื่น ไม่ใช่ข้อความของระบบ — ไม่ใช้ line-clamp
   เพราะแอดมินต้องอ่านครบเพื่อตัดสินใจ และข้อความสั้นอยู่แล้ว */
.lt-report-item__excerpt {
  padding: 10px 12px;
  border-inline-start: 3px solid var(--lt-border-strong);
  border-radius: 0 var(--lt-radius-sm) var(--lt-radius-sm) 0;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* ฟอร์มตัดสิน: ช่องหมายเหตุ + ปุ่มรับเรื่อง/ปัดตก
   จอแคบเรียงลงเป็นแถว ๆ · ช่องหมายเหตุกินพื้นที่ที่เหลือเมื่อกว้างพอ */
.lt-report-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--lt-border);
}
.lt-report-item__actions .lt-input { flex: 1 1 14rem; }
/* .lt-btn--sm ฐานสูง 40px บนจอกว้าง — ในแผงตัดสินนี้ดันเป็น --lt-tap (48px) ทุกจอ
   (เดิม 44px ซึ่งตัวเลือกนี้ specificity สูงกว่ากฎ 48px ของฐานบนมือถือ จึงเคยทับให้เตี้ยลง · แนว A 26 ก.ย. 2569) */
.lt-report-item__actions .lt-btn {
  flex: 1 1 auto;
  min-height: var(--lt-tap);
}

/* คิวอนุมัติ ประกาศขาย (ตรวจทานภาพหน้าจอ 19 ก.ย. 2569): ไม่อนุมัติ + เหตุผลสำเร็จรูป + ช่องเหตุผล พับในกล่องเดียวใต้ปุ่มอนุมัติ
   กางแล้วกินเต็มแถว · summary เป็นปุ่มสูง 48px · ชนิดห้ามขายมีคำอธิบายแทนปุ่มอนุมัติ */
.lt-review-reject { flex: 1 1 100%; margin: 0; }
.lt-review-reject > summary { width: 100%; list-style: none; cursor: pointer; }
.lt-review-reject > summary::-webkit-details-marker { display: none; }
.lt-review-reject > summary::marker { content: ""; }
.lt-review-reject__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.lt-review-reject__body .lt-fieldset { margin: 0; }
/* กฎ flex ของแถวตัดสิน (.lt-report-item__actions .lt-input/.lt-btn) ใช้ในกล่องแนวตั้งนี้ไม่ได้ — flex-basis จะกลายเป็นความสูง */
.lt-report-item__actions .lt-review-reject__body .lt-input,
.lt-report-item__actions .lt-review-reject__body .lt-btn { flex: none; }
.lt-review-reject__err { flex: 1 1 100%; margin: 0; }
.lt-review-blocked { flex: 1 1 100%; margin: 0; }
.lt-review-links { margin: 0; }
/* ลิงก์ "ดูข้อมูลผู้ขาย" "เปิดหน้าประกาศ" เป็น .lt-btn--sm (40px) ซึ่งประกาศทีหลัง .lt-tap จึงทับ — ดันกลับเป็น --lt-tap (48px)
   (เดิม 44px ต่ำกว่ากติกา 48px บนมือถือ — รอบฐานรากแนว A ทักไว้ · แก้รอบหน้าแอป 26 ก.ย. 2569) */
.lt-review-links .lt-btn { min-height: var(--lt-tap); }

/* ── รายการแจ้งเตือนในแอป (กระดิ่ง) ─────────────────────────
   โครงจริง: ul.lt-notiflist > li.lt-card.lt-notif[.is-unread] > a|div.lt-notif__body
   ที่ยังไม่อ่านมี 3 สัญญาณพร้อมกัน: แถบสีซ้าย + ป้ายข้อความ "ยังไม่อ่าน" + ตัวหนากว่า
   (สีอย่างเดียวไม่พอตามกติกาข้อ 8) */
.lt-notiflist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

/* ยก padding จากการ์ดไปไว้ที่ __body เพื่อให้พื้นที่กดของลิงก์เต็มทั้งใบ */
.lt-notiflist .lt-notif { padding: 0; }
/* ยกเลิก .lt-card + .lt-card เพราะรายการนี้จัดระยะด้วย gap แล้ว ไม่ซ้อน margin */
.lt-notiflist .lt-notif + .lt-notif { margin-top: 0; }

/* แนว A: เส้นซ้าย 3px ตามภาษาเดียวกับ flash/note (เดิม 4px) — ยังมีป้าย "ยังไม่อ่าน" กับตัวหนาอีกสองสัญญาณ */
.lt-notiflist .is-unread { border-inline-start: 3px solid var(--lt-accent); }
.lt-notiflist .is-unread .lt-notif__title { font-weight: 700; }
/* ป้าย "ยังไม่อ่าน" ใช้ขอบสีฟ้าประกอบข้อความ ตัวอักษรยังเป็น ink ตามฐาน .lt-pill */
.lt-notiflist .lt-pill--new { border-color: var(--lt-accent); }

/* __body เป็น <a> เมื่อการแจ้งเตือนมีปลายทาง และเป็น <div> เมื่อไม่มี
   ตัดเส้นใต้ได้ตามข้อยกเว้นของกติกาข้อ 9 เพราะลิงก์นี้ทำหน้าที่เป็น "การ์ดทั้งใบ" ไม่ใช่ลิงก์ในเนื้อความ */
.lt-notif__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: calc(var(--lt-radius) - 1px);
  color: var(--lt-ink);
  text-decoration: none;
  transition: background-color var(--lt-dur) var(--lt-ease);
}
a.lt-notif__body:hover {
  background: var(--lt-surface-2);
  background: color-mix(in srgb, var(--lt-surface-2) 60%, var(--lt-surface));
  color: var(--lt-ink);
}
/* หัวข้อ ข้อความ เวลา เป็น <p> — margin ล่าง 1rem ของ Bootstrap reboot เคยบวกกับ gap จนเวลาห่างหัวข้อ ~20px
   และการ์ดมีที่ว่างท้ายอีก 16px (วัดจากภาพ 26 ก.ย. 2569) · ระยะในการ์ดมาจาก gap ชั้นเดียว */
.lt-notif__body > p { margin: 0; }
a.lt-notif__body:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-notif__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lt-notif__text {
  color: var(--lt-muted);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

/* เวลาเป็นข้อมูลรอง ตัวเล็กสีรอง และไม่ตัดบรรทัดกลางคำว่า "2 ชั่วโมงที่แล้ว" */
.lt-notif__when {
  color: var(--lt-muted);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* ── กล่องตั้งค่าช่องทางแจ้งเตือน (หน้าตั้งค่า › การแจ้งเตือน) ──
   แต่ละช่องทางเป็น section.lt-card.lt-channel หนึ่งใบ ข้างในมี <p> <ol> .lt-field
   .lt-topicbox .lt-check ซึ่งต่างคนต่างมี margin ของตัวเอง — ปิดทิ้งแล้วคุมด้วย gap ชั้นเดียว */
.lt-channel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lt-channel > * { margin-block: 0; }

/* หัวข้อช่องทาง มีเส้นคั่นใต้เพื่อให้กวาดตาหาช่องทางที่ต้องการได้เร็วเมื่อการ์ดเรียงกัน 5 ใบ */
.lt-channel__title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--lt-border);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ช่องทางที่ยังไม่เปิดใช้ (LINE) — ขอบประบอกว่ายังไม่พร้อม
   ไม่ลด opacity เพราะจะดึงตัวอักษรตกเกณฑ์ contrast และคำว่า "เร็ว ๆ นี้" ในกล่องบอกอยู่แล้ว */
.lt-channel.is-soon {
  border-style: dashed;
  background: var(--lt-surface-2);
  box-shadow: none;
}

/* ── หน้ากด "ทำแล้ว" จากลิงก์ในข้อความแจ้งเตือน ──────────────
   บริบท: ยืนอยู่หน้าตู้ ถือมือถือมือเดียว — ทุกอย่างกลางจอ ตัวใหญ่ จบใน 1 หน้าจอ
   .lt-auth (กรอบกลางจอของหน้าเข้าสู่ระบบ) เป็นของอีกโซน ตรงนี้เขียนเฉพาะส่วนต่าง */
.lt-magic {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.lt-magic > * { margin-block: 0; }

/* ฟอร์มปุ่มเดียว — ปุ่มยืดเต็มความกว้างเองเพราะเป็น flex item ในคอลัมน์ */
.lt-magic form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* ชื่อตู้อยู่เหนือชื่องาน เป็นบริบทว่า "งานนี้ของตู้ไหน" จึงเล็กกว่าและเป็นสีรอง */
.lt-magic__tank {
  color: var(--lt-muted);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* แถวป้ายประเภทงาน + วันเวลา จัดกลางให้ตรงกับหัวเรื่อง */
.lt-magic__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  line-height: 1.6;
}

/* รายละเอียดงาน เช่น "เปลี่ยนน้ำ 30%" — เป็นกล่องอ่านง่ายเพราะเป็นสิ่งที่ต้องทำจริง */
.lt-magic__detail {
  padding: 10px 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  line-height: 1.7;
}

/* ── ตารางเทียบแผน free/pro ─────────────────────────────────
   อยู่ใน .table-responsive ซึ่งเลื่อนแนวนอนได้อยู่แล้ว
   จึงไม่ใส่ min-width:0 ให้ตาราง — ปล่อยให้กว้างตามเนื้อหาแล้วให้กรอบนอกเลื่อน */
.lt-table--plans thead th { text-align: center; }
.lt-table--plans thead th:first-child { text-align: start; }

/* ชื่อคุณสมบัติภาษาไทยยาว ให้ตัดบรรทัดได้ แต่ต้องมีความกว้างขั้นต่ำไม่ให้ถูกบีบเป็นคอลัมน์ผอม */
.lt-table--plans th[scope="row"] {
  min-width: 15rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: normal;
}

.lt-table--plans td {
  min-width: 8rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}

/* เส้นคั่นแนวตั้งช่วยให้สายตาไล่ลงในคอลัมน์แผนเดียวกันได้โดยไม่หลุดแถว */
.lt-table--plans thead th + th,
.lt-table--plans td { border-inline-start: 1px solid var(--lt-border); }

/* ── การ์ดสถานะบนหน้าภาพรวมหลังบ้าน (/admin: migration ค้าง · งานเบื้องหลัง · GD) — แนว A 26 ก.ย. 2569 ──
   เป็น .lt-card ที่ยืมสีพื้น/สีเส้นของ .lt-note--* มา แต่เส้นซ้ายเคยหนา 1px เท่าขอบการ์ด (เห็นเป็นเส้นโค้งจาง ๆ ที่มุม)
   ทำเป็น 3px ตามภาษาเดียวกับ note/flash/โซนเตือน · โซนที่ตามมาเคยชิดการ์ด (ไม่มีกฎ .lt-card + .lt-section) จึงเว้นให้ที่นี่ */
.lt-admstatus { border-inline-start-width: 3px; }
.lt-admstatus + .lt-note { margin-top: 14px; }
.lt-admstatus + .lt-section,
.lt-admstatus + .lt-note + .lt-section { margin-top: 28px; }

/* ── ระยะที่ขาดในหน้าหลังบ้าน (ไล่วัดทุกหน้าด้วยเครื่อง 26 ก.ย. 2569 — ของสองชิ้นที่มีกรอบ/พื้นชิดกัน 0px) ──
   เขียนเป็นคู่ "ชิ้นนี้ตามด้วยชิ้นนั้น" เท่านั้น ไม่แตะกฎของชิ้นส่วนกลางเอง */
.lt-section__foot + .table-responsive { margin-top: 16px; }            /* /admin/species /admin/articles: ปุ่มเพิ่ม → ตาราง */
.lt-card > .lt-section__title + .table-responsive { margin-top: 4px; } /* /admin/notifications: หัวการ์ดสรุป → ตาราง (การ์ดมี gap ไม่ได้ เป็น block) */
.lt-card + .lt-chips { margin-top: 20px; }                             /* /admin/notifications: การ์ดสรุป → ชิปกรอง */
.lt-fieldset > .lt-card + .lt-field { margin-top: 16px; }             /* /admin/shop/settings: การ์ดวิธีส่งใบสุดท้าย → ช่องส่งฟรี */
/* /admin/flags: ตัวเลือกแบบกล่องสามอันของแต่ละส่วน (ปิด/ทีมงาน/เปิด) เป็นลูกตรงของ fieldset ไม่ได้อยู่ใน .lt-radioset จึงชนกันสนิท */
.lt-fieldset > .lt-radio--block + .lt-radio--block { margin-top: 8px; }
.lt-fieldset > .lt-radio--block + .lt-note { margin-top: 12px; }
/* ตัวเลือกที่ยังเลือกไม่ได้ (.is-disabled · ใช้ที่ /admin/flags ที่เดียว): กฎฐานจางทั้งข้อความ 60% — วัดได้ 2.61:1 (มืด 3.61)
   แต่ข้อความนั้นคือ "ทำไมยังเลือกไม่ได้ ดูรายการข้างล่าง" ที่ผู้ดูแลต้องอ่าน จึงเลิกจาง แล้วบอกว่ากดไม่ได้ด้วยรูปทรงแทน:
   กรอบเส้นประ + พื้นรอง + หัวข้อสีรอง (สีรองบนพื้นรอง 5.2:1 · มืด 7.0:1) · ช่องวงกลม disabled ยังจางตามเบราว์เซอร์ + เคอร์เซอร์ห้าม */
.lt-radio--block.is-disabled {
  border-style: dashed;
  background: var(--lt-surface-2);
}
.lt-radio--block.is-disabled > span { opacity: 1; }
.lt-radio--block.is-disabled strong { color: var(--lt-muted); }

/* <code> ในตารางหลังบ้าน (/admin/audit ชื่อการกระทำ · /admin/species กลุ่มดิบ) และการ์ดสถานะ (/admin ชื่อไฟล์ migration)
   เคยทับสีตรงนี้เพราะชมพูของ Bootstrap ได้แค่ 4.37:1 — ตอนนี้ส่วน 0 ตั้ง --bs-code-color: var(--lt-accent) ทั้งเว็บแล้ว
   (รอบแก้ผลตรวจ 26 ก.ย. 2569 · เนื้อหาผู้ใช้ .lt-usertext ก็ได้ด้วย) จึงไม่ต้องทับอีก */

/* ── การ์ดสวิตช์ของ /admin/flags (แนว A 26 ก.ย. 2569) ─────────────────────
   .lt-switch   <label class="lt-check lt-switch"> ครอบ <input type="checkbox" role="switch"> ตัวเดิมของฟอร์ม
                วาดรางและปุ่มกลมด้วยพื้นหลังของ input เอง (ไม่พึ่ง ::before ซึ่งบางเบราว์เซอร์ไม่วาดบน input) ใช้ได้แม้ปิด JS
                ปิด: รางพื้นรอง ขอบช่องกรอก (surface 3.8:1) ปุ่มกลมสีรอง (5.2:1) ชิดซ้าย
                เปิด: รางมอสทึบ (surface 8.4:1 · มืด 9.5:1) ปุ่มกลม on-primary (8.1:1 · มืด 9.7:1) ชิดขวา
                สถานะบอกด้วยตำแหน่งปุ่มกลม + สี + บรรทัด "ค่าปัจจุบัน" ข้างล่าง ไม่ใช่สีอย่างเดียว
                ปุ่มกลมเลื่อนด้วย background-position ตามเวลา --lt-dur (ลดการเคลื่อนไหว = ย้ายทันที)
   .lt-flagcard การ์ดของสวิตช์ตัวเดียว — เส้นซ้าย 3px เป็นสีขอบเข้มตอนปิด เป็นมอสตอนติ๊กเปิด เปลี่ยนแบบนุ่มทันทีที่กด
                (บอกค่าที่ "จะบันทึก" ก่อนกดบันทึก — ค่าที่ใช้อยู่จริงยังอยู่ในบรรทัด "ค่าปัจจุบัน") */
.lt-switch input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--lt-input-border);
  border-radius: 999px;
  background-color: var(--lt-surface-2);
  background-image: radial-gradient(circle, var(--lt-muted) 0 9px, transparent 9.5px);
  background-size: 26px 26px;
  background-position: left center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color var(--lt-dur) var(--lt-ease), border-color var(--lt-dur) var(--lt-ease),
              background-position var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
.lt-switch input[type="checkbox"]:checked {
  border-color: var(--lt-primary);
  background-color: var(--lt-primary);
  background-image: radial-gradient(circle, var(--lt-on-primary) 0 9px, transparent 9.5px);
  background-position: right center;
}
.lt-switch:hover input[type="checkbox"]:not(:checked) { border-color: var(--lt-muted); }
.lt-switch input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--lt-ring); }
/* โหมดสีบังคับของ Windows ล้างพื้นหลังทิ้ง — รางกับปุ่มกลมจะหายหมด จึงคืนช่องติ๊กของระบบให้แทน */
@media (forced-colors: active) {
  .lt-switch input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 22px;
    height: 22px;
    background-image: none;
  }
}

.lt-flagcard {
  border-inline-start: 3px solid var(--lt-border-strong);
  transition: border-color var(--lt-dur) var(--lt-ease);
}
.lt-flagcard:has(.lt-switch input:checked) { border-inline-start-color: var(--lt-primary); }
.lt-flagcard .lt-switch strong { font-size: 1.0625rem; }

/* =============================================================
   จอใหญ่ขึ้น — ส่วนขยายของบล็อกนี้เท่านั้น
   ============================================================= */

@media (min-width: 768px) {
  .lt-tabs--admin .lt-tabs__item { padding-inline: 14px; font-size: 1rem; }

  /* พื้นที่พอแล้ว: ช่องหมายเหตุยาวขึ้น ปุ่มกลับไปเป็นขนาดตามเนื้อหา ไม่ยืดเต็มแถว */
  .lt-report-item { gap: 12px; }
  .lt-report-item__actions .lt-input { flex: 1 1 20rem; }
  .lt-report-item__actions .lt-btn { flex: 0 0 auto; }

  /* เวลาย้ายไปอยู่ขวาสุดแถวเดียวกับหัวข้อ อ่านรายการยาว ๆ ได้เร็วขึ้น */
  .lt-notif__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    padding: 14px 16px;
  }
  .lt-notif__title,
  .lt-notif__text { grid-column: 1; }
  .lt-notif__when {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
    text-align: end;
  }

  .lt-channel { gap: 14px; }
  .lt-magic { gap: 18px; }
  .lt-table--plans td { min-width: 10rem; }
}

@media (min-width: 1100px) {
  /* จอกว้างมากปล่อยให้ชื่อคุณสมบัติไม่ต้องตัดบรรทัดถ้าไม่จำเป็น */
  .lt-table--plans th[scope="row"] { min-width: 20rem; }
}


/* ══ ส่วน 4e · หน้าเฉพาะ: ชิ้นที่เติมภายหลัง (จำนวนปลา usertext pill ตอนรัน ntfy ช่องติดต่อ
   คำนวณลิตร สไลด์รูปตู้ หลังบ้านร้าน) — แต่ละชิ้นมีหัวข้อบอกหน้าของมันเอง ══════════════ */

/* ── จำนวนตัวต่อหนึ่งรายการปลา ──────────────────────────────
   ปลาฝูง (ซิว 10 ตัว) บันทึกเป็นรายการเดียว จำนวนจึงต้องอ่านออกทันทีข้างชื่อ
   ใช้ตัวเลขกำกับเสมอ ไม่ได้สื่อด้วยสีหรือขนาดอย่างเดียว */
.lt-fishrow__qty {
  flex: none;
  align-self: center;
  padding: 1px 8px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-family: var(--lt-font-num);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  white-space: nowrap;
}

/* ป้ายจำนวนบนหน้ารายละเอียดปลา — เป็น <p> จึงต้องล้าง margin ของย่อหน้าออก */
.lt-pill--qty {
  align-self: flex-start;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ── lt-usertext — ข้อความที่ผู้ใช้เขียนเอง ────────────────────────────
   ตัวนี้ห่อ "ทุกชิ้น" ที่ผู้ใช้พิมพ์เข้ามา: คำถาม คำตอบ ความเห็น ตอนไดอารี่ เนื้อบทความ
   หลังผ่าน community_render() แล้ว

   ทำไมมันหลุดจากรอบเก็บกวาดคลาสที่ขาด: มันไม่เคยปรากฏใน class="..." เลยสักที่
   เพราะถูกส่งเป็นค่าตั้งต้นของพารามิเตอร์ PHP —
       function cc_body(string $raw, string $class = 'lt-usertext'): void
   คำสั่งตรวจใน CONTRACT ข้อ 7 ที่ grep เฉพาะ class="..." จึงมองไม่เห็น และรายงานว่าครบแล้ว

   community_render() พ่นได้เฉพาะ 11 แท็กใน allowlist (inc/community.php) — ครอบไว้ครบทุกตัวข้างล่าง
   นอกเหนือจากนี้ถูก h() แปลงเป็นข้อความไปแล้วตั้งแต่ต้นทาง */

.lt-usertext {
  max-width: 68ch;              /* ยาวกว่านี้สายตาหาบรรทัดถัดไปไม่เจอ */
  color: var(--lt-ink);
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: break-word;    /* คำยาวไม่มีช่องว่าง (URL ที่ไม่ถูก autolink) ต้องไม่ดันการ์ดกว้างเกิน */
}

.lt-usertext > :first-child { margin-top: 0; }
.lt-usertext > :last-child { margin-bottom: 0; }

.lt-usertext p { margin: 0 0 .9em; }

.lt-usertext strong { font-weight: 700; }
.lt-usertext em { font-style: italic; }

.lt-usertext a {
  color: var(--lt-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;       /* ลิงก์ที่ autolink จับมามักยาวกว่าความกว้างการ์ดบนมือถือ */
}
.lt-usertext a:hover { text-decoration-thickness: 2px; }

.lt-usertext ul,
.lt-usertext ol { margin: 0 0 .9em; padding-inline-start: 1.5em; }
.lt-usertext li { margin-bottom: .35em; }

.lt-usertext blockquote {
  margin: 0 0 .9em;
  padding: .2em 0 .2em 1em;
  border-inline-start: 3px solid var(--lt-border-strong);
  color: var(--lt-muted);
}

.lt-usertext code {
  padding: .1em .4em;
  border-radius: 4px;
  background: var(--lt-surface-2);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .92em;
}

/* บล็อกโค้ดต้องเลื่อนในตัวเอง ไม่งั้นบรรทัดยาวดันทั้งหน้าให้เลื่อนแนวนอนบนมือถือ
   (กฎเดียวกับตารางใน CONTRACT ข้อ 7) */
.lt-usertext pre {
  margin: 0 0 .9em;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  overflow-x: auto;
  line-height: 1.55;
}
.lt-usertext pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  white-space: pre;
}

/* ตัวแปรผันสามตัว — ทั้งหมดส่งผ่านอาร์กิวเมนต์ PHP เหมือนกัน ไม่มีใน class="..." */
.lt-usertext--sm { font-size: .9375rem; line-height: 1.65; }
.lt-usertext--sm p,
.lt-usertext--sm ul,
.lt-usertext--sm ol,
.lt-usertext--sm blockquote,
.lt-usertext--sm pre { margin-bottom: .6em; }

.lt-usertext--article { font-size: 1.0625rem; line-height: 1.8; }
.lt-usertext--article p { margin-bottom: 1.05em; }

/* คำโปรยหัวไดอารี่ — เป็นคำนำ ไม่ใช่เนื้อหลัก จึงจางกว่าและไม่จำกัดความกว้างซ้ำ
   (กล่องนอกจำกัดให้แล้ว ถ้าจำกัดอีกชั้นจะแคบซ้อนแคบ) */
.lt-usertext--lead {
  max-width: none;
  font-size: 1.0625rem;
  color: var(--lt-muted);
}


/* ── pill ที่ประกอบชื่อคลาสตอนรัน ─────────────────────────────────
   โค้ดเขียนว่า class="lt-pill lt-pill--<?= $row['status'] ?>" ค่าจึงมาจาก ENUM ใน migration ตรง ๆ
   ตัวสแกนคลาสมองเห็นแค่ "lt-pill--" ที่ห้อยท้าย จึงต้องไล่จาก ENUM เอง

   qa_questions.status   open · answered · closed · hidden
   articles.status       draft · published · hidden
   diaries.visibility    private · unlisted · public

   ตัวที่ไม่ได้เขียนไว้จะตกไปใช้ .lt-pill พื้นฐาน ซึ่งอ่านออกแต่แยกสถานะด้วยตาไม่ได้ */

.lt-pill--open::before,
.lt-pill--answered::before,
.lt-pill--closed::before,
.lt-pill--hidden::before,
.lt-pill--draft::before,
.lt-pill--published::before,
.lt-pill--private::before,
.lt-pill--unlisted::before,
.lt-pill--public::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lt-pill-color, var(--lt-task-custom));
}

/* คำถาม: "ตอบแล้ว" ต้องเขียวเพื่อให้กวาดตาหาคำถามที่ยังไม่มีคนตอบได้เร็ว */
.lt-pill--open      { --lt-pill-color: var(--lt-accent);        border-color: var(--lt-accent); }
.lt-pill--answered  { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }
.lt-pill--closed    { --lt-pill-color: var(--lt-border-strong); border-color: var(--lt-border-strong); }

/* ถูกซ่อนโดยผู้ดูแล — เห็นเฉพาะเจ้าของกับแอดมิน ต้องอ่านออกทันทีว่าไม่ปกติ */
.lt-pill--hidden    { --lt-pill-color: var(--lt-danger);        border-color: var(--lt-danger); }

.lt-pill--draft     { --lt-pill-color: var(--lt-warn);          border-color: var(--lt-warn); }
.lt-pill--published { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }

/* การเปิดเผยไดอารี่: ไล่จากปิดสนิท → ลิงก์เท่านั้น → เปิดสาธารณะ
   สีต้องบอกได้ว่า "ใครเห็นได้บ้าง" เพราะกดพลาดแล้วย้อนไม่ได้ (COMMUNITY.md) */
.lt-pill--private   { --lt-pill-color: var(--lt-border-strong); border-color: var(--lt-border-strong); }
.lt-pill--unlisted  { --lt-pill-color: var(--lt-warn);          border-color: var(--lt-warn); }
.lt-pill--public    { --lt-pill-color: var(--lt-ok);            border-color: var(--lt-ok); }



/* ── กล่องหัวข้อ ntfy ประจำตัว ───────────────────────────────────────
   ผู้ใช้ต้องอ่านชื่อนี้จากจอมือถือแล้วพิมพ์/คัดลอกไปใส่อีกแอปหนึ่ง
   จึงให้เป็นตัวใหญ่ ระยะห่างตัวอักษรกว้าง และ monospace เพื่อให้แยก
   ตัวที่หน้าตาใกล้กันออก (ชุดตัวอักษรตัด l 1 0 o ไปแล้ว แต่ยังมี m/n, u/v)
   break-all เพราะชื่อยาว 23 ตัวและห้ามล้นขอบจอแคบ */
.lt-topicbox {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--lt-border-strong);
  border-radius: var(--lt-radius);
  background: var(--lt-primary-soft);
}
.lt-topicbox__label {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--lt-muted);
}
.lt-topicbox__value {
  margin: 0 0 12px;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lt-ink);
  word-break: break-all;
  user-select: all;   /* แตะครั้งเดียวเลือกได้ทั้งชื่อ เผื่อปุ่มคัดลอกใช้ไม่ได้ */
}
.lt-topicbox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* ปุ่มถูกใจ — ใช้หน้าตาเดียวกับปุ่มปฏิกิริยาอื่น ประกาศไว้ให้ครบตามที่หน้าเรียกใช้ */
.lt-react__btn--like { gap: 6px; }

/* ── ช่องทางติดต่อบนหน้าโปรไฟล์ ─────────────────────────────────
   เป็นลิงก์ออกนอกเว็บที่คนแปลกหน้ากด จึงทำเป็นชิปให้เห็นชัดว่าเป็นปุ่ม
   ไม่ใช่ข้อความธรรมดา และแตะได้จริงบนมือถือ (สูง 36px กว้างพอ)
   ไม่ใช้ไอคอนแบรนด์ — ระบบไม่มี และวาดเองสุ่มเสี่ยงเรื่องเครื่องหมายการค้า */
.lt-profile__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.lt-profile__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.lt-profile__social-link:hover {
  border-color: var(--lt-primary);
  color: var(--lt-primary);
}
.lt-profile__social-link:focus-visible {
  outline: none;
  box-shadow: var(--lt-ring);
}


/* ── ตัวช่วยคำนวณลิตรจากขนาดตู้ ─────────────────────────────────
   เป็น <details> ที่พับไว้ ไม่ให้ไปแย่งความสนใจจากช่องกรอกหลัก
   ทั้งบล็อกมี hidden จนกว่า JS จะทำงาน (ดู pages/app_tank_form.php) */
.lt-volcalc {
  margin: -4px 0 16px;
  padding: 0;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
}

.lt-volcalc__toggle {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--lt-primary);
}
.lt-volcalc__toggle:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-volcalc > *:not(summary) { margin-inline: 14px; }
.lt-volcalc > *:last-child { margin-bottom: 12px; }

/* แถวหนึ่ง = กว้าง × ลึก × ระดับน้ำ · ห่อบรรทัดได้บนจอแคบ ไม่ให้ล้นขอบ */
.lt-volcalc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.lt-volcalc__label {
  flex: 1 0 100%;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--lt-muted);
}

.lt-volcalc__unit {
  font-size: .8125rem;
  color: var(--lt-muted);
}

.lt-volcalc__out {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: 1.125rem;
}
.lt-volcalc__out strong {
  font-variant-numeric: tabular-nums;
  color: var(--lt-ink);
}


/* ══ ส่วน 4f · หน้าเฉพาะ: สมุดเพาะพันธุ์และสมุดค่าน้ำ (21 ก.ย. 2569 · ส่วน BREEDING) ══════════════
   หน้าเหล่านี้ถูกเปิดตอนยืนอยู่หน้าตู้จริง มือเปียก แสงน้อย — ทุกอย่างจึงเรียงเป็นแถวเดียวบนมือถือ
   ตัวเลขทุกจุดตั้ง tabular-nums เพราะคนอ่านเทียบ "รอด 120 / รอด 96" ระหว่างบันทึกสองวันติดกัน
   ตัวเลขความกว้างไม่เท่ากันทำให้ตาไล่ไม่ตรงหลัก
   .lt-waterrow* กับ .lt-sg เขียนไว้ให้หน้าสมุดค่าน้ำ (/app/water) ใช้ร่วมได้ ไม่ใช่ของหน้ารุ่นเพาะอย่างเดียว */

/* ── รายการรุ่นเพาะ (/app/breeding) ───────────────────────────── */

/* จำนวนรุ่นท้ายหัวข้อ "ยังเดินอยู่ 1" / "ปิดแล้ว 3" — หัวข้อเป็นตัวมีหัว แต่ตัวเลขใช้ตัวธรรมดาเสมอ (ผู้ตัดสินสั่ง)
   ใช้ได้ที่เดียวตอนนี้ (app_breeding_list.php) · หน้าอื่นที่ใส่จำนวนในหัวข้อส่วนแบบเดียวกันได้ผลเดียวกัน */
.lt-section__title > .lt-muted {
  font-family: var(--lt-font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lt-breedlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-breedrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-breedrow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.lt-breedrow__title {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;      /* ชื่อรุ่นที่คนตั้งเองยาวได้ 160 ตัวอักษรและอาจไม่มีช่องว่างเลย */
}
/* ชื่อรุ่นคือทางเข้าเดียวของการ์ด — ทำเป็นลิงก์ไม่มีเส้นใต้แบบเดียวกับ .lt-fishrow__link */
.lt-breedrow__title a { color: var(--lt-ink); text-decoration: none; }
.lt-breedrow__title a:hover { text-decoration: underline; }

.lt-breedrow__meta,
.lt-breedrow__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-breedrow__alive { font-variant-numeric: tabular-nums; }
.lt-breedrow__dates { font-variant-numeric: tabular-nums; }
.lt-breedrow__dates strong { color: var(--lt-ink); font-weight: 600; }

/* ── ปุ่มกดเร็วในหน้ารุ่นเพาะ ──────────────────────────────────
   บนมือถือเป็นปุ่มเต็มความกว้างเรียงลงมา ไม่ใช่ปุ่มเล็กเรียงข้างกัน
   คนกดตอนยืนหน้าตู้มือเดียว ปุ่มที่กว้างเต็มจอพลาดยากที่สุด */
.lt-quick {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.lt-quick__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lt-quick__item form { margin: 0; }
.lt-quick__done {
  margin: 0;
  color: var(--lt-muted);
  font-size: .8125rem;
  line-height: 1.6;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* หมุดที่ลงวันที่แล้ว ("คลอดแล้ว" ลง 4 ก.ย.) ต้องดูออกทันทีว่าทำแล้ว — เดิมเป็นปุ่มมอสอ่อนเต็มกว้างเหมือนหมุดที่ยังไม่ลง
   แตะพลาดครั้งเดียววันที่เดิมถูกทับด้วยวันนี้ (รอบตรวจอิสระ 26 ก.ย. 2569) · กลายเป็นปุ่มเส้นบาง ตัวอักษรสีรอง นำด้วย ✓ สี ok
   ยังกดได้ (ตั้งใจให้แก้วันที่ได้) และหน้าเพจถามยืนยันก่อนทับวันเดิม (data-lt-confirm) · สีรองบนพื้นหน้า 5.6:1 · มืด 8.3:1 */
.lt-quick__item:has(.lt-quick__done) .lt-btn {
  border-color: var(--lt-border-strong);
  background-color: transparent;
  color: var(--lt-muted);
  font-weight: 500;
}
.lt-quick__item:has(.lt-quick__done) .lt-btn:hover { border-color: var(--lt-input-border); color: var(--lt-ink); }
.lt-quick__item:has(.lt-quick__done) .lt-btn::before {
  content: "\2713";
  color: var(--lt-ok);
  font-weight: 700;
}

/* หมุดของรุ่นเพาะในไทม์ไลน์ (--spawned มีอยู่แล้วในบล็อกไทม์ไลน์ของปลา) */
.lt-timeline__item--started      { --lt-tl-color: var(--lt-task-custom); }
.lt-timeline__item--hatched      { --lt-tl-color: var(--lt-task-feeding); }
.lt-timeline__item--metamorphose { --lt-tl-color: var(--lt-task-water-test); }
.lt-timeline__item--freshwater   { --lt-tl-color: var(--lt-task-water-change); }
.lt-timeline__item--closed       { --lt-tl-color: var(--lt-primary); }

/* ── กล่องแนะนำการเพาะกุ้งยามาโต๊ะ (โชว์เมื่อรุ่นนั้นเป็นกุ้ง) ──
   เป็นคำแนะนำ ไม่ใช่ข้อมูลของผู้ใช้ จึงทำเส้นข้างแทนการ์ด — ไม่ให้ดูเหมือนแถวข้อมูลของรุ่น */
.lt-shrimptips {
  border-inline-start: 3px solid var(--lt-accent);
  padding-inline-start: 12px;
}
.lt-shrimptips__lead { margin: 0 0 8px; line-height: 1.7; }
.lt-shrimptips__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-inline-start: 20px;
  line-height: 1.7;
}
.lt-shrimptips__note {
  margin: 10px 0 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.7;
}

/* ── บันทึกการเลี้ยง และค่าน้ำหนึ่งครั้ง ─────────────────────── */
.lt-loglist,
.lt-waterlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-logrow,
.lt-waterrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-logrow__head,
.lt-waterrow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}
.lt-logrow__head form { margin: 0; }

.lt-logrow__when {
  margin: 0;
  font-family: var(--lt-font-num);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.lt-logrow__food {
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lt-logrow__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.lt-waterrow__when { font-family: var(--lt-font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.lt-waterrow__vals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-waterrow__val {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
/* ตัวเลขเข้มกว่าป้ายชื่อค่า — ค่าที่วัดได้คือสิ่งที่คนกวาดตาหา ไม่ใช่คำว่า "ไนไตรท์" */
.lt-waterrow__val strong { color: var(--lt-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── การ์ดค่าน้ำหนึ่งครั้งในสมุดค่าน้ำ (/app/water · dl.lt-waterdl) — แนว A 26 ก.ย. 2569 ──
   ภาษาเดียวกับแผงสภาพน้ำหน้ารุ่นเพาะ: แถวละค่า "ชื่อค่า ··· ตัวเลข" คั่นเส้นบาง ตัวเลขชิดขวาแนวเดียว กว้างเท่ากัน
   ใช้ทุกขนาดจอ (เดิมบนมือถือชื่อกับค่าเรียงลงคนละบรรทัด การ์ดยาวเกือบสองจอ) · ค่าที่ไม่ได้วัดเป็นขีด — เหมือนเดิม
   ประกาศหลัง .lt-dl/.lt-dl--tight ของส่วน 3 (specificity เท่ากัน) จึงชนะกริดสองคอลัมน์แบบ fit-content ของจอกว้าง */
/* ไม่มีช่องระหว่างคอลัมน์ (gap 0) เส้นคั่นจึงยาวต่อกันทั้งแถว — ระยะระหว่างชื่อกับค่ามาจาก padding ของ dd แทน
   align-items: stretch (ค่าเริ่มต้น) ให้สองช่องในแถวสูงเท่ากัน เส้นคั่นซ้ายขวาจึงอยู่ระดับเดียวกัน */
.lt-waterdl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  margin-top: 2px;
}
.lt-waterdl dt,
.lt-waterdl dd {
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--lt-border);
  line-height: 1.6;
}
.lt-waterdl dd { padding-inline-start: 12px; }
.lt-waterdl dt:last-of-type,
.lt-waterdl dd:last-of-type { border-bottom: 0; }
.lt-waterdl dt { font-size: .9375rem; font-weight: 500; }
.lt-waterdl dd {
  font-family: var(--lt-font-num);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow-wrap: normal;
}
.lt-waterdl dd .lt-muted { display: block; font-size: .8125rem; font-weight: 400; }

/* ความถ่วงจำเพาะที่คำนวณจาก ppt (ใต้ช่องความเค็มในฟอร์ม และท้ายแถวค่าน้ำ) */
.lt-sg {
  margin: 0;
  color: var(--lt-muted);
  font-size: .9375rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* ── ปุ่ม "ลงเองว่าทำอะไรไปแล้ว" (care_quick_buttons · inc/care.php) ──
   ตัวช่วยตัวเดียวที่ทุกหน้าเรียกใช้ หน้าตาจึงต้องเหมือนกันทุกที่ที่โผล่
   (หน้ารุ่นเพาะ หน้าตู้ แดชบอร์ด สมุดการดูแล) จัดเป็นปุ่มเต็มความกว้างบนมือถือ
   ด้วยเหตุผลเดียวกับ .lt-quick — คนกดตอนยืนหน้าตู้มือเดียว */
/* แนว A (ยืมจากแนว B ตามที่ผู้ตัดสินเห็นชอบ): ปุ่มลงเองทั้งชุดอยู่ในแผงการ์ดของตัวเอง อ่านเป็นก้อนเดียว
   ไม่ปนกับการ์ดงานที่อยู่ข้างบน · ที่อยู่ในการ์ดอยู่แล้ว (หน้าตู้) ไม่ซ้อนการ์ดอีกชั้น */
.lt-carequick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;               /* สมุดการดูแล: แผงนี้ตามด้วยแถบกรองทันที — ไม่งั้นการ์ดสองใบชนกัน */
  padding: 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
}
.lt-section > .lt-carequick { margin-bottom: 0; }   /* ในโซนมี gap ของตัวเองแล้ว (หน้ารุ่นเพาะ) */
/* คำอธิบายใต้หัวแผงเป็น <p class="lt-help"> — margin ล่าง 1rem ของ reboot เคยซ้อนกับ gap เป็น 26px (ไล่วัดด้วยเครื่อง 26 ก.ย. 2569) */
.lt-carequick > p { margin-bottom: 0; }
.lt-card .lt-carequick { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.lt-carequick__title { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.lt-carequick__form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lt-carequick__buttons { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lt-carequick__percent {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lt-muted);
  font-size: .9375rem;
}
/* ช่องเปอร์เซ็นต์ — ช่องกรอกตัวจริงที่ไม่ได้ใช้ .lt-input จึงต้องตามกติกาช่องกรอกของฐานเอง:
   ขอบ --lt-input-border ≥ 3:1 (เดิม --lt-border ได้แค่ ~1.3:1 มองแทบไม่เห็นว่าเป็นช่อง) · ชี้แล้วขอบสีรอง ·
   โฟกัสขอบ accent + วง --lt-ring · สูงเท่าปุ่ม (--lt-tap) · ตัวเลขกว้างเท่ากัน */
.lt-carequick__percent input {
  width: 6.5rem;
  min-height: var(--lt-tap);
  padding: 6px 12px;
  border: 1px solid var(--lt-input-border);
  border-radius: var(--lt-radius-sm);
  background-color: var(--lt-surface);
  color: var(--lt-ink);
  font: inherit;
  font-family: var(--lt-font-num);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--lt-dur) var(--lt-ease), box-shadow var(--lt-dur) var(--lt-ease);
}
.lt-carequick__percent input:hover:not(:focus) { border-color: var(--lt-muted); }
.lt-carequick__percent input:focus { border-color: var(--lt-accent); box-shadow: var(--lt-ring); outline: none; }
.lt-carequick__more { margin: 0; font-size: .9375rem; }
/* มือถือและจอสัมผัส: "ลงแบบละเอียด" ลิงก์ยืนเดี่ยว 25px → เต็ม --lt-tap (รอบตรวจอิสระ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-carequick__more a { display: inline-flex; align-items: center; min-height: var(--lt-tap); }
}

/* ── หน้ารุ่นเพาะ: ส่วนที่มากับสมุดการดูแล (pages/app_breeding.php) ──
   ทุกบล็อกข้างล่างนี้ถูกวาดเฉพาะตอนสวิตช์ CARE_LOG เปิดให้คนนั้นดู
   การซ่อนอยู่ในเงื่อนไขของ PHP ไม่ใช่ display:none ที่นี่ — สวิตช์ปิดแล้ว element ไม่เกิดขึ้นเลย */

/* กล่อง "วันนี้ต้องทำอะไร" — การ์ดงานชุดเดียวกับปฏิทิน วางเรียงลงล่างเหมือนหน้าปฏิทินทุกประการ
   ระยะระหว่างการ์ดมาจาก gap ชั้นเดียว 12px (เท่าการ์ดในโซนของฐาน) — เดิม .lt-card + .lt-card อีก 14px ซ้อนเป็น 24px */
.lt-breedtasks { display: flex; flex-direction: column; gap: 12px; }
.lt-breedtasks > .lt-card + .lt-card { margin-top: 0; }

/* ── สภาพน้ำล่าสุด ──
   สีของไฟมาจากตัวแปร --lt-flag-color ที่ตั้งในแอตทริบิวต์ style ของแต่ละแถว (ค่ามาจาก care_water_status)
   สีเป็น "ตัวช่วยอ่าน" เท่านั้น ทุกแถวที่มีไฟมีคำกำกับเป็นตัวหนังสือคู่กันเสมอ (ปกติ / ควรดู / ต้องแก้)
   ช่องที่ไม่ได้วัดไม่ถูกวาดเป็นแถว จึงไม่มีทางกลายเป็นไฟเขียวโดยบังเอิญ */
/* ทั้งกล่องอยู่ชิดกว่าหัวข้ออื่นของหน้า — ป้ายระดับ ค่าแต่ละช่อง เวลาที่วัด และคำกำกับ อ่านเป็นก้อนเดียวกัน
   แผงสภาพน้ำแบบแนว B (ผู้ตัดสินสั่งยืม · 26 ก.ย. 2569): รายการทั้งหมดอยู่ในแผงการ์ดใบเดียว แต่ละค่าคั่นด้วยเส้นบาง
   คำกำกับ "ปกติ / ควรดู / ต้องแก้" ชิดขวาเป็นแนวเดียวกันทุกแถว — กวาดตาลงแนวขวาแนวเดียวก็รู้ว่าค่าไหนผิด
   ไม่ยืมวงแสงรอบไฟของแนว B (กติกาห้ามแสงเรือง) · ไฟยังเป็นจุดทึบ 10px + คำกำกับทุกแถวเหมือนเดิม */
.lt-carewater { gap: 8px; }
.lt-carewater__head { margin: 0; }
/* บรรทัด "วัดเมื่อ …" "ความเค็มเป้าหมาย …" ใต้แผง — ระยะมาจาก gap ของโซนชั้นเดียว (เดิม margin ของ <p> ซ้อนเป็น 24px) */
.lt-carewater > p { margin: 0; }
.lt-carewater__items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 2px 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow-sm);
  list-style: none;
}
.lt-carewater__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lt-border);
  color: var(--lt-muted);
  font-size: .9375rem;
  line-height: 1.6;
}
.lt-carewater__item:last-child { border-bottom: 0; }
.lt-carewater__item strong {
  color: var(--lt-ink);
  font-family: var(--lt-font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lt-carewater__dot {
  width: 10px;
  height: 10px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--lt-flag-color, var(--lt-muted));
}
/* คำกำกับชิดขวา (margin-inline-start: auto) — แถวที่ชื่อค่ายาวจนต้องขึ้นบรรทัดใหม่ คำกำกับยังไปชิดขวาของบรรทัดล่าง
   สีตัวอักษรคือสีสถานะบน surface: ok 5.7 · warn 5.2 · danger 8.1 (มืด 10.5 · 10.6 · 6.7) ≥ 4.5 ทุกตัว */
.lt-carewater__flag {
  margin-inline-start: auto;
  color: var(--lt-flag-color, var(--lt-muted));
  font-weight: 600;
  white-space: nowrap;
}

/* ── แผนดูแลสำเร็จรูป: รายการที่ติ๊กเลือกทีละอันก่อนสร้าง ── */
.lt-careplan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}
.lt-careplan__row { margin: 0; }
/* .lt-check จัดกึ่งกลางแนวตั้งเพราะทำไว้สำหรับบรรทัดเดียว — แถวนี้มีสามบรรทัด ช่องติ๊กจึงต้องชิดบนให้ตรงกับชื่องาน */
.lt-careplan__item { align-items: flex-start; padding: 8px 0; }
.lt-careplan__item input { margin-top: 3px; }
.lt-careplan__text { display: flex; flex-direction: column; gap: 2px; }
.lt-careplan__name { font-weight: 600; line-height: 1.5; }
.lt-careplan__when {
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* ── ลงตัวตายเร็ว ── */
.lt-diedquick { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.lt-diedquick > p { margin: 0; }   /* ระยะจาก gap ชั้นเดียว — margin ของ <p> เคยซ้อนเป็น 26px */
.lt-diedquick__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lt-diedquick__field { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; }

/* ── รูปเรียงตามวัน (เก่าไปใหม่ เพื่อให้เห็นลูกกุ้งโตขึ้นตามลำดับ) ── */
.lt-photodays {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lt-photoday { display: flex; flex-direction: column; gap: 6px; }
.lt-photoday__when {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ท้ายแถวบันทึกการดูแล — ป้าย "ปิดงานที่ตั้งเตือนไว้ให้แล้ว" หรือลิงก์ "ตั้งเตือนงานนี้" */
.lt-logrow__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  font-size: .9375rem;
}
/* มือถือและจอสัมผัส: ลิงก์ "ตั้งเตือนงานนี้…" ยืนเดี่ยว 25px → เต็ม --lt-tap (รอบตรวจอิสระ 26 ก.ย. 2569) */
@media (max-width: 767.98px), (pointer: coarse) {
  .lt-logrow__foot a { display: inline-flex; align-items: center; min-height: var(--lt-tap); }
}

@media (min-width: 768px) {
  /* จอกว้างวางปุ่มกดเร็วเรียงข้างกันได้ แต่ยังกว้างพอให้กดด้วยนิ้วโป้ง */
  .lt-quick { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .lt-carequick__buttons { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .lt-diedquick__grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

/* ══ ส่วน 9 · พิมพ์ ═══════════════════════════════════════════ (เจ้าของ: ฐาน) ══
   พิมพ์ออกกระดาษ: ตัดแถบนำทางทิ้ง เหลือแต่เนื้อหา · สีเทาตายตัวของขอบการ์ดตั้งใจ (กระดาษขาวเสมอ ไม่ขึ้นกับโหมดจอ) */
@media print {
  .lt-topbar, .lt-bottomnav, .lt-side, .lt-skip, .lt-footer { display: none !important; }
  .lt-main { padding: 0; }
  .lt-card { box-shadow: none; border-color: #999; }
}

/* ══ ส่วน 4g · หน้าเฉพาะ: หลังบ้าน Red Bee ══ (เจ้าของ: หน้า /admin* · SPEC 5.12)
   การ์ดสุขภาพระบบของ /admin (เรียงแดง→เหลือง→เขียว) · รายการความพร้อม · บรรทัด cron ให้คัดลอก
   หมวดพับของ /admin/settings · ช่องติ๊กวันส่ง · แถววิธีส่ง — ใช้ตัวแปรสีชุดเดิมล้วน (โหมดมืดตามเอง) */
.lt-admcards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.lt-admcards > .lt-card + .lt-card { margin-top: 0; }
.lt-admcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.lt-admcard__head > .lt-section__title { margin: 0; }
.lt-admcard__checked { margin: 2px 0 12px; color: var(--lt-muted); font-size: .8125rem; line-height: 1.6; }
.lt-admstatus > .lt-dl,
.lt-admstatus > .table-responsive { margin-bottom: 12px; }
.lt-admstatus > .lt-formactions,
.lt-admstatus > form.lt-row { margin-top: 12px; }

/* ป้าย "ต้องแก้" — ขอบและจุดสีอันตราย + พื้นเจืออ่อน (คำในป้ายบอกความหมาย สีไม่ใช่ข้อมูลเดียว) */
.lt-pill--bad {
  border-color: var(--lt-danger);
  background: var(--lt-surface);
  background: color-mix(in srgb, var(--lt-danger) 8%, var(--lt-surface));
}
.lt-pill--bad::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lt-danger);
}

/* บรรทัดคำสั่ง cron — แตะครั้งเดียวเลือกได้ทั้งบรรทัด ตัดคำได้ทุกตัวอักษร (พาธยาวห้ามล้นจอ 360px) */
.lt-admcode {
  margin: 4px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.6;
  word-break: break-all;
  user-select: all;
}

/* รายการความพร้อม ✓/✗ — ไอคอนบอกสถานะคู่กับข้อความ (ผู้อ่านหน้าจอได้คำจาก .lt-sr) */
.lt-admready { margin: 0; padding: 0; list-style: none; }
.lt-admready__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--lt-border);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.lt-admready__item:first-child { border-top: 0; padding-top: 0; }
.lt-admready__item > svg { flex: none; margin-top: 3px; }
.lt-admready__item--ok > svg { color: var(--lt-ok); }
.lt-admready__item--warn > svg { color: var(--lt-warn); }
.lt-admready__item--fail > svg { color: var(--lt-danger); }
.lt-admready + form { margin-top: 14px; }
.lt-admcard__head + .lt-admready { margin-top: 12px; }

/* ท้าย log ข้อผิดพลาด — ข้อความยาวตัดบรรทัดได้ ไม่ดันการ์ดล้น */
.lt-admlog { margin: 0 0 12px; }
.lt-admlog code { white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; }

/* /admin/settings — หมวดพับ <details> หัวหมวดเป็นเป้ากดเต็มแถว (≥48px) */
.lt-setgroup > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--lt-tap);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.5;
}
.lt-setgroup > summary::-webkit-details-marker { display: none; }
.lt-setgroup > summary > span { display: flex; flex-direction: column; gap: 2px; }
.lt-setgroup > summary small { font-weight: 400; font-size: .875rem; }
.lt-setgroup > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--lt-dur) var(--lt-ease);
}
.lt-setgroup[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.lt-setgroup[open] > summary { margin-bottom: 14px; }
.lt-setgroup > .lt-note + form,
.lt-setgroup > form + .lt-note,
.lt-setgroup > form + .lt-dl,
.lt-setgroup > .lt-dl + .lt-help { margin-top: 14px; }
.lt-card + .lt-setgroup,
.lt-tabs--admin + .lt-card { margin-top: 14px; }
.lt-setgroup + .lt-section { margin-top: 28px; }

/* ช่องติ๊ก 7 วันของวันส่ง — เรียงต่อกันตัดบรรทัดเองบนจอแคบ */
.lt-daychecks { display: flex; flex-wrap: wrap; gap: 0 16px; }
.lt-setgroup fieldset.lt-field { margin-inline: 0; padding: 0; border: 0; min-width: 0; }
.lt-setgroup fieldset.lt-field > legend { float: none; width: auto; margin-bottom: 6px; padding: 0; font-size: inherit; }

/* แถววิธีส่ง (เพิ่ม/ลบได้ ไม่ให้พิมพ์ JSON) */
.lt-carrier {
  padding: 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius-sm);
  background: var(--lt-surface);
}
.lt-carrier + .lt-carrier { margin-top: 10px; }

/* ══ ส่วน 4h · หน้าเฉพาะ: ตู้ โคโลนี ครอก ค่าน้ำ รูป ของ Red Bee ══ (เจ้าของ: หน้า /app/tanks* /app/colonies* /app/broods* /app/water* · SPEC 5.1–5.6 5.11)
   ทุกสีผ่านตัวแปรส่วน 0 (กฎ 19) · มือถือก่อน · ไม่มีความกว้างตายตัวที่ทำให้จอ 360px เลื่อนข้าง */

/* หัวหน้าตู้/โคโลนี/สาย — รหัสตัวโตเหนือชื่อ (รหัสคือสิ่งที่คนเลี้ยงเรียกกันจริง) */
.lt-tankhead,
.lt-colhead { display: flex; flex-direction: column; gap: 4px; }
.lt-tankhead__code,
.lt-colhead__code {
  margin: 0;
  color: var(--lt-primary);
  font-family: var(--lt-font-num);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

/* รายการตู้ — การ์ดเรียงกริด 1 คอลัมน์บนมือถือ 2 คอลัมน์ตั้งแต่ 720px */
.lt-tanklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .lt-tanklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lt-tankcard.is-retired { opacity: .72; }
.lt-tankcard__code {
  display: inline-block;
  margin-right: 8px;
  color: var(--lt-primary);
  font-family: var(--lt-font-num);
  font-weight: 700;
}
.lt-tankcard__order {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
}

/* ยอดคงเหลือของโคโลนี */
.lt-balance {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--lt-font-num);
}
.lt-balance--big .lt-num { font-size: 1.75rem; line-height: 1.2; }

/* การ์ดโคโลนี (shrimp_colony_card) */
.lt-colcard { display: flex; flex-direction: column; gap: 8px; }
.lt-colcard__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--lt-ink);
  text-decoration: none;
  min-width: 0;
}
.lt-colcard__link:hover { color: var(--lt-primary); }
.lt-colcard__link:focus-visible { outline: none; box-shadow: var(--lt-ring); border-radius: var(--lt-radius-sm); }
.lt-colcard__code {
  color: var(--lt-primary);
  font-family: var(--lt-font-num);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.lt-colcard__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .9375rem;
}

/* ปุ่มด่วนของโคโลนี: ตาย / +อุ้มไข่ / นับยอด — แถวเดียวตัดบรรทัดเองบนจอแคบ */
.lt-colquick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lt-colquick__item { margin: 0; }
.lt-colquick__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(280px, calc(100vw - 48px));
}

/* ปุ่มลัดดูแลตู้: บรรทัด "ล่าสุด …" ใต้ชื่อปุ่ม */
.lt-quick__last {
  display: block;
  color: var(--lt-muted);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.4;
}

/* ไฟค่าน้ำสามระดับ — สีผ่าน --lt-pill-color ที่ shrimp_level_pill() ใส่ · มีข้อความเสมอ ไม่ใช่สีอย่างเดียว */
.lt-wlevel { font-weight: 600; }
.lt-wlevel--ok   { border-color: var(--lt-ok); }
.lt-wlevel--warn { border-color: var(--lt-warn); }
.lt-wlevel--crit { border-color: var(--lt-danger); color: var(--lt-danger); }
.lt-waterline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

/* ฟอร์มค่าน้ำ: ไฟข้างช่อง (JS ใส่ data-level ตามกติกาเดียวกับ water_flag) */
.lt-wfield { position: relative; }
.lt-wfield__flag {
  display: inline-block;
  min-height: 1.4em;
  margin-top: 4px;
  font-size: .875rem;
  font-weight: 600;
}
.lt-wfield[data-level="ok"]   .lt-wfield__flag { color: var(--lt-ok); }
.lt-wfield[data-level="warn"] .lt-wfield__flag { color: var(--lt-warn); }
.lt-wfield[data-level="crit"] .lt-wfield__flag { color: var(--lt-danger); }
.lt-wfield[data-level="crit"] .lt-input { border-color: var(--lt-danger); }

/* ตารางเป้าหมายค่าน้ำในฟอร์มตู้ — เลื่อนในตัวเองบนจอแคบ ไม่ดันหน้าให้เลื่อนข้าง */
.lt-targets { overflow-x: auto; }
.lt-targets__table { min-width: 520px; }
.lt-targets__table .lt-input { width: 5.5em; min-width: 0; padding-inline: 8px; }
.lt-targets__table td,
.lt-targets__table th { white-space: nowrap; }

/* ตารางที่กว้างกว่าจอ — ห่อแล้วเลื่อนแนวนอนในกรอบ */
.lt-table-stack {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lt-table-stack > .lt-table { min-width: 560px; }

/* ครอก: นับถอยหลังวันฟัก */
.lt-brood-countdown {
  margin: 4px 0;
  font-family: var(--lt-font-num);
  font-size: 1.125rem;
}
.lt-brood-countdown.is-late,
.lt-warn-text { color: var(--lt-warn); font-weight: 600; }
.lt-text-danger { color: var(--lt-danger); }

/* ปฏิทิน: ไอคอนไข่ในช่องวัน (หมุดครอก) และการ์ดครอกของวันที่เลือก */
.lt-calgrid__egg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lt-task-count);
  line-height: 0;
}
.lt-calgrid__egg.is-expected { color: var(--lt-warn); }
.lt-broodpin {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lt-ink);
  text-decoration: none;
}
.lt-broodpin svg { flex: none; color: var(--lt-task-count); }

/* ป้ายเล็ก (รูปปก แสดงในร้าน) และป้ายเกรด */
.lt-pill--sm { padding: 1px 8px; font-size: .75rem; }
.lt-pill--grade {
  --lt-pill-color: var(--lt-brass);
  border-color: var(--lt-brass);
  color: var(--lt-brass-ink);
  font-weight: 700;
}

/* กริดรูป (cc_photo_grid) — 2 คอลัมน์บนมือถือ 3 ตั้งแต่ 560px 4 ตั้งแต่ 900px */
.lt-photogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .lt-photogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .lt-photogrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lt-photogrid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lt-photogrid__link {
  display: block;
  border-radius: var(--lt-radius-sm);
  overflow: hidden;
  background: var(--lt-surface-2);
}
.lt-photogrid__link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.lt-photogrid__link:focus-visible { outline: none; box-shadow: var(--lt-ring); }
.lt-photogrid__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: .8125rem;
  color: var(--lt-muted);
}
.lt-photogrid__caption {
  flex-basis: 100%;
  color: var(--lt-ink);
  overflow-wrap: anywhere;
}
.lt-photogrid__menu { position: absolute; top: 6px; right: 6px; }
.lt-photogrid__menu > summary { background: var(--lt-surface); }
.lt-photogrid__panel {
  right: 0;
  left: auto;
  min-width: min(260px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lt-stack-sm { display: flex; flex-direction: column; gap: 6px; }

/* QR ของหัวข้อ ntfy — สแกนจากมือถืออีกเครื่อง */
.lt-qr { margin: 12px 0 0; }
.lt-qr svg {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  border-radius: var(--lt-radius-sm);   /* qr_svg() วาดพื้นขาวในตัวเอง — โหมดมืดก็สแกนได้ */
}

/* รายการลิงก์แบบเมนูในหน้ารวม "เพิ่มเติม" (/app/settings) — ไม่มีจุดนำหน้า แถวละลิงก์เต็มความกว้าง แตะง่าย */
.lt-list--menu {
  padding-inline-start: 0;
  list-style: none;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  overflow: hidden;
}
.lt-list--menu li + li { margin-top: 0; border-top: 1px solid var(--lt-border); }
.lt-list--menu .lt-menu__item { min-height: var(--lt-tap); border-radius: 0; }