@charset "UTF-8";
/* =============================================================
   ตู้ลำธาร — สไตล์กลางของทั้งเว็บ  (CONTRACT ข้อ 7)

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

:root {
  /* ── โทนหลัก: น้ำลำธารใส เขียวอมฟ้า ─────────────────────── */
  --lt-bg: #f4f7f8;
  --lt-surface: #ffffff;
  --lt-ink: #12312f;            /* บน --lt-bg = 12.9:1 */
  --lt-muted: #4f6d6b;          /* บน --lt-bg = 5.2:1  (ดู deviations ในรายงาน) */
  --lt-primary: #0f766e;        /* เขียวน้ำลำธาร — ตัวอักษรบน bg = 5.1:1, ขาวบนปุ่ม = 5.5:1 */
  --lt-primary-soft: #ccfbf1;
  --lt-accent: #0284c7;         /* ฟ้าน้ำใส — ใช้เป็นพื้น/เส้น ไม่ใช้เป็นสีตัวอักษรเล็ก */
  --lt-warn: #b45309;           /* บน --lt-bg = 4.7:1 */
  --lt-danger: #b91c1c;         /* บน --lt-bg = 6.0:1 */
  --lt-ok: #15803d;             /* บน --lt-bg = 4.7:1 */

  /* สีประจำประเภทงาน — ใช้กับจุดนำหน้าและแถบข้างการ์ดเท่านั้น */
  --lt-feeding: #0284c7;
  --lt-water_change: #0d9488;
  --lt-filter_clean: #7c3aed;
  --lt-water_test: #ca8a04;
  --lt-medication: #db2777;
  --lt-custom: #64748b;

  --lt-radius: 14px;
  --lt-tap: 48px;               /* ปุ่มหลักสูงอย่างน้อยเท่านี้ */

  /* ── ค่าประกอบที่โมดูลอื่นเรียกใช้ได้ ───────────────────── */
  --lt-surface-2: #eef3f4;      /* พื้นรองในการ์ด แถบหัวตาราง */
  --lt-border: #d7e3e4;
  --lt-border-strong: #b9cdcf;
  --lt-shadow: 0 1px 2px rgba(15, 42, 40, .06), 0 8px 24px rgba(15, 42, 40, .06);
  --lt-shadow-bar: 0 -1px 12px rgba(15, 42, 40, .08);
  --lt-ring: 0 0 0 3px rgba(2, 132, 199, .35);
  --lt-on-primary: #ffffff;
  --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-border-color: var(--lt-border);
  --bs-border-radius: 10px;
  --bs-link-color: var(--lt-primary);
  --bs-link-hover-color: #0b5a54;
  --bs-emphasis-color: var(--lt-ink);
  --bs-secondary-color: var(--lt-muted);
}

/* ── โหมดมืด: สลับเฉพาะค่าตัวแปร ────────────────────────────
   พื้นเข้มอมเขียวเหมือนน้ำลึก ไม่ใช่เทาดำแบบ dashboard
   ตัวอักษร #e6f2f1 บนพื้น #12312f = 12.2:1 · บนพื้น #0b1a1a = 15.6:1 */
@media (prefers-color-scheme: dark) {
  :root {
    --lt-bg: #0b1a1a;
    --lt-surface: #12312f;
    --lt-ink: #e6f2f1;
    --lt-muted: #a8c6c3;        /* บน --lt-surface = 7.7:1 */
    --lt-primary: #5eead4;      /* บน --lt-surface = 9.4:1 */
    --lt-primary-soft: #134e4a;
    --lt-accent: #7dd3fc;
    --lt-warn: #fbbf24;
    --lt-danger: #fca5a5;
    --lt-ok: #86efac;

    --lt-feeding: #7dd3fc;
    --lt-water_change: #5eead4;
    --lt-filter_clean: #c4b5fd;
    --lt-water_test: #fcd34d;
    --lt-medication: #f9a8d4;
    --lt-custom: #94a3b8;

    --lt-surface-2: #17403d;
    --lt-border: #1f4b48;
    --lt-border-strong: #2c635f;
    --lt-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --lt-shadow-bar: 0 -1px 12px rgba(0, 0, 0, .45);
    --lt-ring: 0 0 0 3px rgba(125, 211, 252, .45);
    --lt-on-primary: #04211f;   /* ตัวอักษรบนปุ่มหลักในโหมดมืดต้องเป็นสีเข้ม */

    color-scheme: dark;

    --bs-link-hover-color: #99f6e4;
    --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);
  }
}

/* ── ฐาน ────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--lt-bg);
  color: var(--lt-ink);
  /* Inter มาก่อนเพื่อให้ตัวเลข/ละตินคมกว่า ส่วนอักษรไทยตกไป Noto Sans Thai เองทีละตัวอักษร */
  font-family: "Inter", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;    /* ต่ำกว่า 16px ทำให้ Safari บน iOS ซูมเข้าเองตอนโฟกัสช่องกรอก */
  line-height: 1.7;   /* อักษรไทยมีสระบน-ล่าง ต้องการช่องไฟแนวตั้งมากกว่าละติน */
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--lt-primary); text-underline-offset: .18em; }
a:hover { color: var(--bs-link-hover-color); }

/* วงแหวนโฟกัสเห็นชัดทุกที่ — คนที่ใช้แป้นพิมพ์ล้วนต้องรู้ว่าตอนนี้อยู่ตรงไหน
   ใช้ :focus-visible ไม่ใช่ :focus จะได้ไม่ขึ้นวงตอนกดด้วยนิ้ว */
:focus-visible {
  outline: 2px solid var(--lt-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

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

::selection { background: var(--lt-primary-soft); color: #0b3b36; }

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว — ปิดทรานซิชันทั้งหมด */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.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: 10px;
  background: var(--lt-primary);
  color: var(--lt-on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s 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));
  background: color-mix(in srgb, var(--lt-surface) 92%, transparent);
  border-bottom: 1px solid var(--lt-border);
  backdrop-filter: saturate(1.4) blur(10px);
}

/* เบราว์เซอร์ที่ไม่รู้จัก color-mix ต้องได้พื้นทึบ ไม่ใช่พื้นใส */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lt-topbar { background: var(--lt-surface); }
}

.lt-topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  /* ชื่อหน้ายาว ๆ ต้องตัดบรรทัดเดียว ไม่งั้นแถบบนสูงขึ้นแล้วเนื้อหาเลื่อนลง */
  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; }
/* 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: 12px;
  background: transparent;
  color: var(--lt-ink);
  text-decoration: none;
  cursor: pointer;
}
.lt-iconbtn:hover { background: var(--lt-surface-2); color: var(--lt-ink); }

.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: #fff;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .lt-badge-dot { background: #dc2626; color: #fff; }
}

/* ── แถบล่าง (เฉพาะจอ < 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;
}
.lt-bottomnav__item svg { width: 24px; height: 24px; flex: none; }
.lt-bottomnav__item[aria-current="page"] { color: var(--lt-primary); font-weight: 700; }

/* ขีดสั้น ๆ เหนือเมนูที่เลือกอยู่ — สีอย่างเดียวไม่พอสำหรับคนตาบอดสี */
.lt-bottomnav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  margin-top: -10px;
  width: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--lt-primary);
}

/* ── เมนูข้าง (เฉพาะจอ ≥ 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: 16px;
}
.lt-card + .lt-card { margin-top: 12px; }

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

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

.lt-task {
  position: relative;
  overflow: hidden;
  padding-left: 20px;   /* เว้นที่ให้แถบสีประเภทงานด้านซ้าย */
}

/* แถบสีบอกประเภทงาน ตั้งค่าจริงผ่าน --lt-task-color ที่ตัวการ์ด */
.lt-task::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--lt-task-color, var(--lt-custom));
}

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

.lt-task__time {
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.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; }

.lt-tasklog__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  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; }
}

.lt-task--done { opacity: .72; }
.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: 12px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.lt-btn:hover { color: var(--lt-ink); background: var(--lt-border); }
.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); }
.lt-btn--primary:hover { background: var(--bs-link-hover-color); color: var(--lt-on-primary); }

.lt-btn--outline { background: transparent; border-color: var(--lt-border-strong); }
.lt-btn--outline:hover { background: var(--lt-surface-2); }

.lt-btn--danger { background: transparent; border-color: var(--lt-danger); color: var(--lt-danger); }
.lt-btn--danger:hover { background: var(--lt-danger); color: #fff; }
@media (prefers-color-scheme: dark) {
  .lt-btn--danger:hover { color: #2b0a0a; }
}

.lt-btn--block { width: 100%; }
.lt-btn--sm { min-height: 40px; padding: 6px 12px; font-size: .9375rem; }

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

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

.lt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);          /* ตัวอักษรเป็นสี ink เสมอ = ผ่าน AA แน่นอน */
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

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

.lt-pill--done { border-color: var(--lt-ok); }
.lt-pill--pending { border-color: var(--lt-border-strong); }
.lt-pill--missed { border-color: var(--lt-danger); background: rgba(185, 28, 28, .10); }
.lt-pill--skipped { border-color: var(--lt-border-strong); opacity: .8; }
@media (prefers-color-scheme: dark) {
  .lt-pill--missed { background: rgba(252, 165, 165, .14); }
}

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

.lt-empty {
  padding: 32px 20px;
  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-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; }

.lt-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border-strong);
  border-left-width: 5px;
  border-radius: 12px;
  background: var(--lt-surface);
  color: var(--lt-ink);
}
.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;
}
.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,
.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: var(--lt-tap);
  padding: 10px 12px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 12px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font: inherit;
  font-size: 1rem;      /* 16px กัน iOS ซูมตอนโฟกัส */
}
.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; }

.lt-input::placeholder { color: var(--lt-muted); opacity: .8; }

.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);
}

.table-responsive > table,
.lt-table {
  width: auto;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  color: var(--lt-ink);
}

.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; }
.lt-table tr:last-child td { border-bottom: 0; }
.lt-table td.lt-td-wrap { white-space: normal; min-width: 14rem; }

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

.dropdown-menu {
  border-radius: 12px;
  border-color: var(--lt-border);
  box-shadow: var(--lt-shadow);
}
.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: 12px;
  color: var(--lt-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}
.lt-lang:hover { background: var(--lt-surface-2); color: var(--lt-ink); }

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

.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;
}
.lt-pubnav a: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.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: 14px;
  background: var(--lt-surface);
  box-shadow: var(--lt-shadow);
}

.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;
}
.lt-menu__item:hover { background: var(--lt-surface-2); }
.lt-menu__item svg { color: var(--lt-muted); flex: none; }

.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; }

.lt-count {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--lt-danger);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
@media (prefers-color-scheme: dark) { .lt-count { background: #dc2626; color: #fff; } }

/* ซ่อนจากตาแต่ยังอ่านได้ด้วยโปรแกรมอ่านหน้าจอ */
.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) {
  body { font-size: 16px; }

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

  .lt-pubnav { display: flex; align-items: center; gap: 2px; }
  .lt-pubtoggle { display: none; }
  /* ลิงก์ไทย 7 ตัวกว้าง ~630px ที่ padding 12px — ช่วง 768–832px เคยหักเป็นสองบรรทัดจนแถบสูงขึ้น ใช้ 8px จนถึง 1100px */
  .lt-pubnav a { white-space: nowrap; padding: 0 8px; }
  /* แถบบนของแอปบนจอกว้างมีโลโก้ในเมนูข้างแล้ว ไม่ต้องซ้ำ */
  .lt-topbar__brand--app { 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;
  }

  .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 {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--lt-tap);
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--lt-ink);
    font-weight: 500;
    text-decoration: none;
  }
  .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; }
  .lt-side__item[aria-current="page"] {
    background: var(--lt-primary-soft);
    color: #0b3b36;
    font-weight: 700;
  }
  .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__actions .lt-btn--done { flex: 0 1 auto; min-width: 200px; }

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

@media (prefers-color-scheme: dark) and (min-width: 768px) {
  /* พื้น primary-soft ในโหมดมืดเข้ม ตัวอักษรต้องสว่างกลับ */
  .lt-side__item[aria-current="page"] { color: var(--lt-ink); }
}

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


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

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

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


/* ══ โครงหน้าร่วม ฟอร์ม และหน้าเข้าสู่ระบบ ══════════════════════════ */

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

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

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

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

.lt-page__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;          /* ไทย: แน่นกว่านี้วรรณยุกต์ชนสระของบรรทัดบน */
  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; }
/* ในโซนมี gap 12px อยู่แล้ว ไม่ต้องบวก margin ของ .lt-card + .lt-card ซ้อนเข้าไปอีก */
.lt-section > .lt-card + .lt-card { margin-top: 0; }

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

/* หัวข้อโซน — ขีดสั้นนำหน้าทำให้กวาดตาหาหัวข้อถัดไปเจอเร็วบนหน้ายาว ๆ อย่างหน้านโยบาย */
.lt-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lt-section__title::before {
  content: "";
  flex: none;
  width: 4px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: 2px;
  background: var(--lt-primary);
}
.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;
}

/* ── กล่องข้อความประกอบ (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-strong);
  border-inline-start-width: 5px;
  border-radius: 12px;
  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: 3px solid transparent;
  color: var(--lt-ink);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;       /* ทำหน้าที่เป็นแท็บ ไม่ใช่ลิงก์ในเนื้อความ */
  cursor: pointer;
}
.lt-tabs__item:hover { color: var(--lt-ink); background: var(--lt-surface-2); }

/* แท็บที่เลือกอยู่บอกด้วยขีดหนาใต้ + ตัวหนา ไม่ใช่สีอย่างเดียว */
.lt-tabs__item.is-active,
.lt-tabs__item[aria-current="page"] {
  border-bottom-color: var(--lt-primary);
  color: var(--lt-primary);
  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-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-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-filter_clean); border-color: var(--lt-filter_clean); }
/* ผู้เชี่ยวชาญ — ใช้สีทองอุ่นแยกจากทีมงาน คนละเรื่องกัน ต้องดูออกในแวบเดียว */
.lt-pill--expert { --lt-pill-color: var(--lt-warn);       border-color: var(--lt-warn); }
.lt-pill--mood  { --lt-pill-color: var(--lt-medication);   border-color: var(--lt-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%; }

/* ปุ่มรองแบบนุ่ม ใช้ในแถวปุ่มของการ์ดที่ไม่อยากให้แย่งสายตาปุ่มหลัก */
.lt-btn--soft {
  background: var(--lt-primary-soft);
  border-color: transparent;
  color: var(--lt-ink);
}
.lt-btn--soft:hover {
  background: color-mix(in srgb, var(--lt-primary) 22%, var(--lt-surface));
  color: var(--lt-ink);
}

/* ปุ่ม "ทำแล้ว" ของหน้าลิงก์จากการแจ้งเตือน — ผู้ใช้กดด้วยมือเดียวขณะยืนอยู่หน้าตู้ */
.lt-btn--huge {
  min-height: 64px;
  padding: 12px 22px;
  border-radius: 14px;
  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-underline-offset: .18em;
  cursor: pointer;
}
.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-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; }

.lt-auth__title {
  font-size: 1.375rem;
  font-weight: 700;
  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: 12px;
  background: var(--lt-surface);
}
.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);
}

/* ช่องตัวเลขสั้น ๆ ที่อยู่กลางประโยค */
.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%; }

/* ค่าที่แก้ไม่ได้ (อีเมลของบัญชี) — หน้าตาต่างจากช่องกรอกชัดเจนด้วยเส้นประ
   ไม่ใช้ <input disabled> เพราะจะดูเหมือนช่องที่พังมากกว่าค่าที่ตั้งใจล็อกไว้ */
.lt-static {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--lt-border-strong);
  border-radius: 12px;
  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);
}
/* เมื่อเป็นการ์ดเต็มใบ (ระงับบัญชีในหน้าผู้ดูแล) ใช้ขอบแดงรอบใบแทนเส้นคั่นด้านบน
   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;
}

/* แถวชิปกรอง (ตัว .lt-chip อยู่ในโซนชุมชน ที่นี่จัดแต่กล่องนอก) */
.lt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.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: 12px;
}

.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: 12px;
}

/* รูปพร้อมช่องติ๊กลบ — ทั้งใบเป็น <label> จึงต้องกดได้ทั้งกล่อง */
.lt-thumbs__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  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.75rem; }

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

  /* จอกว้างพอให้หัวข้อกับค่าอยู่บรรทัดเดียวกัน อ่านเป็นตารางได้เร็วกว่าเรียงลงมา */
  .lt-dl {
    display: grid;
    grid-template-columns: minmax(7rem, 15rem) 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: 1.875rem; }
  .lt-section + .lt-section { margin-top: 32px; }
}



/* ══ หน้าตู้ ปลา และตารางงาน ══════════════════════════ */

/* =============================================================
   โซน: ตู้ · ปลา · ตารางงาน
   ทุกกฎในบล็อกนี้เขียนสำหรับจอ 360px ก่อน ส่วนขยายอยู่ท้ายบล็อก
   ============================================================= */

/* ── การ์ดตู้ (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); }

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

.lt-tankgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-tankgroup + .lt-tankgroup { margin-top: 18px; }

.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: 1rem;
  font-weight: 700;
  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;   /* ลิงก์ที่ทำหน้าที่เป็นการ์ด — ข้อยกเว้นของกฎเส้นใต้ */
}
.lt-fishrow__link:hover { background: var(--lt-surface-2); 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 ยังเหลือที่ให้สระบน/วรรณยุกต์เต็ม ๆ */
.lt-agecard__value {
  margin: 0;
  color: var(--lt-primary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.lt-agecard__source {
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
/* เส้นคั่นก่อนรายการวันที่ท้ายการ์ด — คุมเฉพาะ .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-medication); }
.lt-timeline__item--moved   { --lt-tl-color: var(--lt-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-custom); }
.lt-timeline__item--note    { --lt-tl-color: var(--lt-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 ที่ตัวการ์ด) */

.lt-schedrow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-left: 20px;
}
.lt-schedrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--lt-task-color, var(--lt-custom));
}
/* ตารางที่หยุดชั่วคราว: แถบสีกลายเป็นสีขอบกลาง + ชื่อจางลง
   ไม่ใช้ opacity กับทั้งการ์ดเพราะจะดึง contrast ของตัวอักษรตกเกณฑ์
   ป้าย "หยุดชั่วคราว" เป็นตัวหนังสืออยู่แล้ว สีจึงไม่ใช่ข้อมูลเดียว */
.lt-schedrow.is-paused::before { background: var(--lt-border-strong); }
.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-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> มีความกว้างขั้นต่ำในตัว ต้องยอมให้หดตามกริด */
}

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

.lt-typehelp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  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-testrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--lt-border);
}
.lt-testrow .lt-btn { flex: 1 1 auto; }

/* ── กล่องต้อนรับผู้ใช้ใหม่บนแดชบอร์ด ───────────────────────
   ผู้ใช้ใหม่ยังไม่มีตู้ หน้านี้จึงมีทางไปต่อทางเดียว จัดกึ่งกลางให้ปุ่มเป็นจุดสนใจ */
.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; }

/* ── ตัวเลขสรุป (หน้าแอดมิน) ─────────────────────────────────
   มือถือ 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: 12px;
  background: var(--lt-surface);
}
/* ตัวเลขล้วน ถือเป็นข้อความระดับหัวเรื่อง ใช้ line-height 1.4 */
.lt-stat__value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.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);
}
.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-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; }
}



/* ══ ปฏิทินรายเดือน ══════════════════════════ */

/* =============================================================
   ปฏิทินเดือน (pages/app_calendar.php) + ตัวเลือกวันของฟอร์มตารางเวลา
   เขียนสำหรับจอ 360px ก่อน ส่วนขยายจอใหญ่รวมอยู่ท้ายบล็อกนี้ที่เดียว
   สีอ้างตัวแปรทั้งหมด จึงไม่ต้องมีบล็อกโหมดมืดซ้ำ
   ============================================================= */

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

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

.lt-calnav__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;      /* หัวเรื่องไทย ≥1.4 ไม่งั้นวรรณยุกต์ชนบรรทัดบน */
  text-align: center;
}

/* ปุ่มก่อนหน้า/ถัดไปมาเป็น .lt-btn--sm (40px) แต่เป็นปุ่มหลักของหน้านี้ ดันให้ครบ 44px */
.lt-calnav .lt-btn {
  flex: none;
  min-height: 44px;
  padding-inline: 12px;
}

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

/* ลิงก์ "วันนี้" เป็นลิงก์ในเนื้อความ คงเส้นใต้ไว้ แค่ขยายพื้นที่กดให้ครบ 44px */
.lt-calnav__today a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  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; }

.lt-progress__value {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.lt-progress__bar {
  height: 12px;
  border: 1px solid var(--lt-border);
  border-radius: 999px;
  background: var(--lt-surface-2);
  overflow: hidden;
}

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

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

.lt-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
/* .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; }   /* จอเล็ก ปุ่มกรองเต็มความกว้าง กดง่ายด้วยนิ้วโป้ง */

/* ── ตารางเดือน ───────────────────────────────────────────
   หัวตารางกับตัวตารางเป็น 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;
}

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

.lt-calgrid__dow {
  padding: 4px 0;
  color: var(--lt-muted);
  font-size: .75rem;
  font-weight: 600;
  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: 10px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  text-decoration: none;
  overflow: hidden;
}
.lt-calgrid__day:hover {
  background: var(--lt-surface-2);
  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-size: .8125rem;
  font-weight: 600;
  line-height: 1.6;
  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%;
}

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

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

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

/* วันของเดือนอื่น: จางลงด้วยการถอดพื้นและใช้สีตัวอักษรรอง ไม่ใช้ opacity กับทั้งช่อง จุดสีจะได้ไม่ซีดตาม */
.lt-calgrid__day.is-outside {
  background: transparent;
  border-color: var(--lt-border);
}
.lt-calgrid__day.is-outside .lt-calgrid__num { color: var(--lt-muted); font-weight: 400; }

/* วันนี้: เส้นขอบหนา + เลขในวงกลมทึบ เป็นรูปทรงสองชั้น ไม่ได้พึ่งสีอย่างเดียว */
.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;
}

/* วันที่เลือกอยู่: พื้นทึบอ่อน + ขอบเข้ม แยกออกจาก "วันนี้" ที่เป็นวงกลมรอบตัวเลข */
.lt-calgrid__day.is-selected {
  background: var(--lt-primary-soft);
  border-color: var(--lt-primary);
}
.lt-calgrid__day.is-selected .lt-calgrid__num { font-weight: 700; }
.lt-calgrid__day.is-selected.is-outside .lt-calgrid__num { color: var(--lt-ink); }

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

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

.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 วันวางไม่พอในจอ 360px จึงให้เลื่อนแนวนอนพร้อม scroll-snap
   ส่วนแบบวันที่ของเดือน (31 ชิป) ให้ตัดบรรทัดแทน เลื่อนยาวจนหาวันไม่เจอ */

.lt-daypick {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-block: 4px;          /* เผื่อที่ให้วงโฟกัสไม่ถูก overflow ตัดหัวท้าย */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.lt-daypick--month {
  flex-wrap: wrap;
  overflow-x: visible;
  scroll-snap-type: none;
}

.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;
  scroll-snap-align: start;
  cursor: pointer;
}
.lt-daypick__item:hover { background: var(--lt-surface-2); }
.lt-daypick__item input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--lt-primary);
}
/* ช่องติ๊กยังเห็นอยู่ในชิปเสมอ พื้น/ขอบที่เปลี่ยนเป็นแค่ตัวช่วยอ่านเร็ว ไม่ใช่ข้อมูลเดียว */
.lt-daypick__item:has(input:checked) {
  border-color: var(--lt-primary);
  background: var(--lt-primary-soft);
}
.lt-daypick__item:has(input:focus-visible) {
  outline: none;
  box-shadow: 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); }
.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 .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;
  }
  .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-calnav__label { font-size: 1.25rem; }
}

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



/* ══ โซนชุมชน — ความรู้ ถาม-ตอบ ไดอารี่ โปรไฟล์ ══════════════════════════ */

/* =============================================================
   โซนชุมชน — ความรู้ · ถาม-ตอบ · ไดอารี่ · โปรไฟล์
   ต่อท้าย app-theme.css · ทุกกฎเขียนสำหรับจอ 360px ก่อน
   ส่วนขยายจอใหญ่รวมไว้ท้ายบล็อกนี้ที่เดียว
   ============================================================= */

/* ── ตัวช่วยร่วมของโซนนี้ ────────────────────────────────────
   แถวปุ่มท้ายชิ้นเนื้อหา (บทความ/คำถาม/คำตอบ/ตอนไดอารี่/ความเห็น)
   หน้าตาเหมือนกันหมด รวมไว้ที่เดียวจะได้ไม่เขียนซ้ำห้ารอบ
   ฟอร์มข้างในเป็นปุ่ม POST จริง ต้องล้าง margin ไม่งั้นแถวเบี้ยว */
.lt-article__actions,
.lt-question__actions,
.lt-answer__actions,
.lt-entry__actions,
.lt-diary__actions,
.lt-diarycard__actions,
.lt-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.lt-article__actions form,
.lt-question__actions form,
.lt-answer__actions form,
.lt-entry__actions form,
.lt-diary__actions form,
.lt-comment__actions form { margin: 0; }

/* แถวที่อยู่ท้ายชิ้นเนื้อหายาว ๆ ขีดเส้นคั่นให้รู้ว่าจบเนื้อหาแล้ว */
.lt-article__actions,
.lt-question__actions,
.lt-answer__actions,
.lt-entry__actions {
  padding-top: 12px;
  border-top: 1px solid var(--lt-border);
}

/* เนื้อหาที่ถูกผู้ดูแลซ่อน — ขอบประ ไม่ใช่แค่เปลี่ยนสี (กติกาข้อ 8)
   ตัวหน้าเว็บมีป้าย "ถูกซ่อน" กำกับอยู่แล้ว ขอบประคือสัญญาณเสริม */
.lt-qarow.is-hidden,
.lt-answer.is-hidden,
.lt-comment.is-hidden,
.lt-entry.is-hidden {
  border-style: dashed;
  border-color: var(--lt-warn);
}

/* ── บทความหนึ่งเรื่อง (/learn/{slug}) ───────────────────────
   68ch คือความกว้างที่อ่านย่อหน้ายาวได้สบายที่สุด กว้างกว่านี้สายตาหาบรรทัดถัดไปไม่เจอ */
.lt-article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 68ch;
  margin-inline: auto;
}
.lt-article > p,
.lt-article > h1 { margin: 0; }   /* ระยะมาจาก gap ไม่ใช่ margin ของ <p> */

.lt-article__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 15 / 7;           /* ตรงกับ width/height ในไฟล์ PHP (900×420) */
  object-fit: cover;
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
}

.lt-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: .875rem;
  line-height: 1.6;
}
/* ป้ายหมวดเป็นลิงก์ไปหน้ากรอง = ทำหน้าที่ปุ่ม จึงไม่ต้องมีเส้นใต้ (ข้อยกเว้นกติกาข้อ 9)
   ยืดให้สูง 44px เพื่อให้กดด้วยนิ้วได้จริง */
.lt-article__meta a.lt-pill {
  min-height: 44px;
  padding-inline: 14px 16px;
  text-decoration: none;
}

.lt-article__title {
  font-size: 1.5rem;
  line-height: 1.4;               /* หัวเรื่องไทยต่ำกว่านี้วรรณยุกต์ชนบรรทัดบน */
  overflow-wrap: anywhere;
}

/* ── การ์ดบทความในหน้ารายการ (/learn) ────────────────────── */
.lt-articlecard,
.lt-diarycard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* การ์ดพวกนี้อยู่ใน .lt-grid ซึ่งมี gap อยู่แล้ว
   ต้องล้าง .lt-card + .lt-card { margin-top: 12px } ของไฟล์เดิม ไม่งั้นระยะซ้อนกันสองชั้น */
.lt-articlecard + .lt-articlecard,
.lt-diarycard + .lt-diarycard { margin-top: 0; }

.lt-articlecard > p,
.lt-articlecard > h2,
.lt-diarycard > p,
.lt-diarycard > h2 { margin: 0; }

/* ลิงก์ที่ห่อรูปปก — line-height:0 กันช่องว่างใต้ <img> แบบ inline */
.lt-articlecard > a,
.lt-diarycard > a { display: block; line-height: 0; border-radius: 10px; }

.lt-articlecard__cover,
.lt-diarycard__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 11;          /* ตรงกับ 400×220 ในไฟล์ PHP รูปทุกใบจึงสูงเท่ากันทั้งกริด */
  object-fit: cover;
  border-radius: 10px;
  background: var(--lt-surface-2);
}

.lt-articlecard__meta,
.lt-diarycard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.lt-articlecard__title,
.lt-diarycard__title,
.lt-qarow__title {
  font-size: 1.0625rem;
  line-height: 1.45;
  overflow-wrap: anywhere;        /* ชื่อเรื่องยาวไม่มีเว้นวรรคต้องตัดได้ ไม่งั้นดันการ์ดล้น */
}
/* หัวการ์ดคือลิงก์ที่ "ทำหน้าที่เป็นการ์ด" จึงไม่ใส่เส้นใต้ (ข้อยกเว้นกติกาข้อ 9)
   display:flex + min-height ทำให้พื้นที่กดสูง 44px โดยไม่ต้องดันด้วย padding */
.lt-articlecard__title a,
.lt-diarycard__title a,
.lt-qarow__title a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--lt-ink);
  text-decoration: none;
}
.lt-articlecard__title a:hover,
.lt-diarycard__title a:hover,
.lt-qarow__title a:hover { color: var(--lt-primary); text-decoration: underline; }

/* คำโปรย/เกริ่นนำ — ตัดสามบรรทัด
   padding-block:2px บังคับ เพราะ overflow:hidden ของ line-clamp ตัดวรรณยุกต์บรรทัดแรกทิ้ง */
.lt-articlecard__excerpt,
.lt-diarycard__desc,
.lt-qarow__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding-block: 2px;
  color: var(--lt-muted);
  font-size: .9375rem;
  line-height: 1.7;
}
.lt-qarow__excerpt { -webkit-line-clamp: 2; }

/* ── การ์ดไดอารี่ (/diary และ /app/diary) ───────────────────── */
.lt-diarycard__line {
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
/* ดันแถวปุ่มลงก้นการ์ดเสมอ การ์ดในกริดที่เนื้อหาสั้น-ยาวไม่เท่ากันจะได้ปุ่มตรงแนวเดียวกัน */
.lt-diarycard__actions { margin-top: auto; padding-top: 4px; }

/* ── หน้าอ่านไดอารี่ทั้งเล่ม (/diary/{slug}) ─────────────────── */
.lt-diary__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 15 / 7;
  object-fit: cover;
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
}

/* อยู่ใน .lt-page__head ซึ่งไม่ใช่คลาสของโซนนี้ จึงเว้นระยะด้วย margin เดี่ยว ๆ ตัวเดียว */
.lt-diary__actions { margin-top: 14px; }

/* ตัวสลับลำดับตอน เก่า↔ใหม่ — เป็นตัวควบคุม ไม่ใช่ลิงก์ในเนื้อความ จึงทำเป็นชิปกดได้ */
.lt-diary__order { margin: 20px 0 12px; text-align: end; }
.lt-diary__order a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  color: var(--lt-ink);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}
.lt-diary__order a:hover { background: var(--lt-surface-2); color: var(--lt-ink); }

/* ── ตอนของไดอารี่ ──────────────────────────────────────────
   .lt-entry ใช้ทั้งเป็น <li> ในหน้าอ่านทั้งเล่ม (ไม่มี .lt-card)
   และเป็น <article class="lt-card lt-entry lt-entry--single"> ในหน้าตอนเดียว
   ค่าพื้น/ขอบ/มุมจึงตั้งให้ตรงกับ .lt-card เป๊ะ ซ้อนกันแล้วไม่เพี้ยน */
.lt-entries {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lt-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-entry > p,
.lt-entry > h1,
.lt-entry > h2 { margin: 0; }

/* หน้าตอนเดียว: แคบลงให้อ่านสบาย ~68ch คือความยาวบรรทัดที่ตาไม่หลง */
.lt-entry--single { max-width: 68ch; margin-inline: auto; }

.lt-entry__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--lt-muted);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
}
/* วันที่คือลิงก์ถาวรไปยังตอนนั้น ทำหน้าที่เหมือนหัวการ์ด จึงไม่ใส่เส้นใต้ */
.lt-entry__date a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lt-ink);
  text-decoration: none;
}
.lt-entry__date a:hover { color: var(--lt-primary); text-decoration: underline; }

.lt-entry__title {
  font-size: 1.1875rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ลิงก์กลับไปชื่อเล่ม — ลิงก์ในเนื้อความ คงเส้นใต้ไว้ตามกติกาข้อ 9 */
.lt-entry__breadcrumb {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}

/* ── รายการคำถาม (/qa) ──────────────────────────────────────
   คอลัมน์ตัวเลขซ้าย + เนื้อหาขวา ใช้โครงเดียวกันทุกขนาดจอ
   ที่ 360px: การ์ดกว้าง ~328px − คอลัมน์ 54px − gap 10px = เหลือ ~264px ให้ข้อความ ยังอ่านออกสบาย */
.lt-qalist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ล้าง .lt-card + .lt-card ของไฟล์เดิม ไม่งั้นได้ระยะ 12px + 12px */
.lt-qalist .lt-card + .lt-card { margin-top: 0; }

.lt-qarow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lt-qarow__stats {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 6px;
  min-width: 54px;
}

.lt-qarow__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--lt-muted);
  font-size: .75rem;
  line-height: 1.6;
  text-align: center;
}
.lt-qarow__stat strong {
  color: var(--lt-ink);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
/* "มีคำตอบแล้ว" — ขอบ + พื้นรอง ไม่ใช่แค่สี และยังมีคำว่า "คำตอบ" กำกับ (กติกาข้อ 8) */
.lt-qarow__stat.is-answered {
  border-color: var(--lt-ok);
  background: var(--lt-surface-2);
}

.lt-qarow__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  min-width: 0;      /* จำเป็นกับคอลัมน์ flex ที่มีข้อความยาว ไม่เกี่ยวกับกฎห้าม min-width:0 ของ "ตาราง" */
}
.lt-qarow__main > p,
.lt-qarow__main > h2 { margin: 0; }

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

/* ── คำถามหนึ่งข้อ (/qa/{id}) ───────────────────────────────── */
.lt-question,
.lt-answer,
.lt-comment {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lt-question > p,
.lt-question > h1,
.lt-answer > p,
.lt-comment > p { margin: 0; }

.lt-question__title {
  font-size: 1.375rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lt-question__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: .875rem;
  line-height: 1.6;
}

/* ── คำตอบ ───────────────────────────────────────────────── */
/* คำตอบที่ถูกเลือกว่าดีที่สุด: ขอบเขียวทั้งใบ + แถบซ้ายหนา + ป้ายกำกับที่มีทั้งไอคอนและข้อความ */
.lt-answer.is-best {
  border-color: var(--lt-ok);
  border-inline-start-width: 4px;
}

.lt-answer__best {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--lt-ok);
  border-radius: 999px;
  background: var(--lt-surface-2);
  color: var(--lt-ink);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.6;
}
.lt-answer__best svg { flex: none; color: var(--lt-ok); }

/* ── ฟอร์มตอบคำถาม / ฟอร์มความเห็น ─────────────────────────── */
.lt-answerform,
.lt-comments__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
}
.lt-answerform { margin-top: 16px; }
.lt-answerform > p,
.lt-answerform > h3,
.lt-comments__form > p { margin: 0; }
/* .lt-label มี margin-bottom 6px ของตัวเอง ในกล่อง gap แล้วจะกลายเป็น 14px */
.lt-answerform .lt-label,
.lt-comments__form .lt-label { margin-bottom: 0; }
/* จอแคบ: ปุ่มส่งเต็มความกว้าง กดด้วยนิ้วโป้งง่ายกว่าปุ่มเล็กชิดซ้าย */
.lt-answerform .lt-btn,
.lt-comments__form .lt-btn { align-self: stretch; margin-top: 4px; }

/* ── ความเห็น ──────────────────────────────────────────────── */
.lt-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.lt-comments > p { margin: 0; }
.lt-comments > h2 { margin-block: 0; }

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

.lt-comment {
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  background: var(--lt-surface);
}
/* ความเห็นที่ตอบความเห็นอื่น — เยื้องเข้า + เส้นซ้ายบอกลำดับชั้น */
.lt-comment--reply {
  margin-inline-start: 16px;
  border-inline-start: 3px solid var(--lt-border-strong);
}

/* ── ชื่อผู้เขียน + เวลา ─────────────────────────────────────
   ตัวเล็กสีรอง ใช้ซ้ำในทุกหน้าของโซนนี้
   (cc_author() ไม่ได้พ่นรูป avatar จึงไม่มีกฎของรูปในบล็อกนี้) */
.lt-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}
.lt-byline__name { font-weight: 600; color: var(--lt-ink); }
/* ชื่อที่เป็นลิงก์ไปโปรไฟล์ — คงเส้นใต้ตามค่าเริ่มต้น ยืดให้กดได้ 44px */
a.lt-byline__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lt-primary);
}
.lt-byline__when { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── ปุ่มถูกใจ / โหวตขึ้น-ลง ─────────────────────────────────
   เป็น <form> POST จริง ปุ่มข้างในคือ <button> */
.lt-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.lt-react__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--lt-border-strong);
  border-radius: 12px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
}
.lt-react__btn:hover { background: var(--lt-surface-2); }

/* สถานะกดแล้ว (คลาส is-on + aria-pressed="true" จาก cc_reactions())
   ใช้ box-shadow inset ทำขอบหนาแทนการเพิ่ม border-width จะได้ไม่ขยับ layout ตอนกด
   ปุ่มถูกใจเปลี่ยนข้อความเป็น "ถูกใจแล้ว" อยู่แล้ว สีจึงไม่ใช่ข้อมูลเดียว (กติกาข้อ 8) */
.lt-react__btn.is-on {
  border-color: var(--lt-primary);
  box-shadow: inset 0 0 0 1px var(--lt-primary);
  background: var(--lt-primary-soft);
  color: var(--lt-ink);          /* primary-soft สลับสว่าง/เข้มตามโหมดอยู่แล้ว ink จึงอ่านออกทั้งสองโหมด */
}

.lt-react__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0 4px;
  color: var(--lt-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1.6;
}
.lt-react__btn .lt-react__score { min-width: 0; color: inherit; }

/* ── ปุ่มรายงานเนื้อหา (<details>) ───────────────────────────── */
.lt-report { flex: none; }
.lt-report > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;                 /* ซ่อนสามเหลี่ยมประจำ <details> */
}
.lt-report > summary::-webkit-details-marker { display: none; }
.lt-report > summary::marker { content: ""; }
/* กางแล้วขอเต็มความกว้างของแถวปุ่ม ฟอร์มจะได้ไม่ถูกบีบอยู่ข้างปุ่มอื่น */
.lt-report[open] { flex: 1 0 100%; }

.lt-report__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 14px;
  border: 1px solid var(--lt-border);
  border-radius: 12px;
  background: var(--lt-surface-2);
}
.lt-report__form .lt-label { margin-bottom: 0; }
.lt-report__form .lt-btn { align-self: flex-start; }

/* ── โปรไฟล์สาธารณะ (/u/{username}) ─────────────────────────── */
.lt-profile__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.lt-profile__head > p { margin: 0; }

.lt-profile__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;               /* รูปไม่จัตุรัสจะถูกครอบตรงกลาง ไม่ยืดเบี้ยว */
  border: 1px solid var(--lt-border);
  background: var(--lt-surface-2);
}

.lt-profile__bio {
  max-width: 68ch;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* ── การ์ดตารางงานที่ระบบแนะนำ (ขั้นตอนสร้างตู้) ──────────────── */
.lt-suggest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lt-suggest > p { margin: 0; }
.lt-suggest__title { font-weight: 600; font-size: 1rem; line-height: 1.6; }
.lt-suggest__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--lt-muted);
  font-size: .875rem;
  line-height: 1.6;
}

/* ── วงโฟกัสของทุกจุดที่กดได้ในโซนนี้ (กติกาข้อ 6) ─────────────
   :focus-visible ไม่ใช่ :focus จะได้ไม่ขึ้นวงตอนแตะด้วยนิ้ว */
.lt-articlecard__title a:focus-visible,
.lt-diarycard__title a:focus-visible,
.lt-qarow__title a:focus-visible,
.lt-articlecard > a:focus-visible,
.lt-diarycard > a:focus-visible,
.lt-entry__date a:focus-visible,
.lt-diary__order a:focus-visible,
a.lt-byline__name:focus-visible,
.lt-react__btn:focus-visible,
.lt-report > summary:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: var(--lt-ring);
}
/* ปุ่มที่กดค้างอยู่มี inset shadow ของตัวเอง ต้องต่อวงโฟกัสไว้ข้างหลัง ไม่ใช่เขียนทับ */
.lt-react__btn.is-on:focus-visible {
  box-shadow: inset 0 0 0 1px var(--lt-primary), var(--lt-ring);
}

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

@media (min-width: 768px) {
  .lt-article__title { font-size: 1.75rem; }
  .lt-question__title { font-size: 1.5rem; }
  .lt-entry__title { font-size: 1.3125rem; }

  .lt-entry { padding: 20px; }

  /* คอลัมน์ตัวเลขกว้างขึ้นเล็กน้อย เลข 3-4 หลักจะได้ไม่ตกบรรทัด */
  .lt-qarow { gap: 16px; }
  .lt-qarow__stats { min-width: 64px; }

  /* พื้นที่พอแล้ว ปุ่มส่งกลับมาเป็นขนาดตามเนื้อหาชิดซ้าย */
  .lt-answerform .lt-btn,
  .lt-comments__form .lt-btn { align-self: flex-start; }

  .lt-answerform,
  .lt-comments__form { padding: 20px; }

  .lt-comment--reply { margin-inline-start: 32px; }

  /* โปรไฟล์: รูปกับชื่อเรียงแถวเดียวกัน */
  .lt-profile__head { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; }
  .lt-profile__avatar { grid-row: 1 / span 4; align-self: start; width: 112px; height: 112px; }
}

@media (min-width: 1100px) {
  .lt-article__title { font-size: 2rem; }
  .lt-articlecard__cover,
  .lt-diarycard__cover { aspect-ratio: 16 / 9; }
}



/* ══ หลังบ้าน แจ้งเตือน และตั้งค่าช่องทาง ══════════════════════════ */

/* =============================================================
   โซนหลังบ้าน · แจ้งเตือน · ตั้งค่าช่องทาง
   ต่อท้าย 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-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 10px 10px 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 ซึ่งต่ำกว่าเกณฑ์นิ้ว — ในแผงตัดสินนี้ดันกลับเป็น 44px */
.lt-report-item__actions .lt-btn {
  flex: 1 1 auto;
  min-height: 44px;
}

/* ── รายการแจ้งเตือนในแอป (กระดิ่ง) ─────────────────────────
   โครงจริง: 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; }

.lt-notiflist .is-unread { border-inline-start: 4px 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;
}
a.lt-notif__body:hover { background: var(--lt-surface-2); color: var(--lt-ink); }
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: 12px;
  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); }

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

@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; }
}


/* ── จำนวนตัวต่อหนึ่งรายการปลา ──────────────────────────────
   ปลาฝูง (ซิว 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-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-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);
}


/* ── สไลด์รูปตู้จากไดอารี่สาธารณะ "ตู้ของเพื่อน ๆ" ─────────────────────
   ใช้ได้โดยไม่มี JS — รางเลื่อนแนวนอนด้วย scroll-snap ปัดนิ้วได้ทันที
   ปุ่มควบคุมซ่อนด้วย hidden จนกว่า JS จะทำงาน (layout/community_ui.php cc_photo_slider)
   คำบรรยายวางทับรูปด้วย position:absolute และ pointer-events:none เพื่อให้แตะรูปแล้วลิงก์ทำงาน
   (figcaption ต้องเป็นลูกของ figure โดยตรง จะซ้อนไว้ใน <a> ไม่ได้) */
.lt-slider {
  margin: 0 0 24px;
}

.lt-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lt-slider__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lt-ink);
}

.lt-slider__ctrl {
  display: flex;
  flex: none;
  gap: 6px;
}

.lt-slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--lt-border-strong);
  border-radius: 999px;
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.lt-slider__btn:hover { border-color: var(--lt-primary); color: var(--lt-primary); }
.lt-slider__btn:focus-visible { outline: none; box-shadow: var(--lt-ring); }

.lt-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 420px);
  gap: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.lt-slider__track::-webkit-scrollbar { display: none; }
.lt-slider__track:focus-visible {
  outline: none;
  box-shadow: var(--lt-ring);
  border-radius: var(--lt-radius);
}

.lt-slider__slide {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--lt-radius);
  background: var(--lt-surface-2);
  scroll-snap-align: start;
}

.lt-slider__link {
  display: block;
}
/* วงโฟกัสวาดด้านในด้วย ::after ที่อยู่เหนือคำบรรยาย — outline ปกติอยู่นอกกล่อง แล้วถูก overflow:hidden ของ figure ตัดหายหมด
   (WCAG 2.4.7 · ตรวจทาน 11 ก.ย. 2569) สองสีเพื่อให้เห็นทั้งบนรูปสว่างและรูปมืด */
.lt-slider__link:focus-visible { outline: none; }
.lt-slider__link:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--lt-radius);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--lt-accent);
}

.lt-slider__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lt-slider__cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 28px 14px 12px;
  /* ไล่เฉดเฉพาะใน padding บน 28px — หลังตัวอักษรเข้มอย่างน้อย .6 ตัวขาวบนรูปพื้นขาวยังได้ ≥ 5.7:1
     (เดิมไล่ทั้งกล่อง หัวข้อบนรูปสว่างวัดได้ 1.8–3.2:1 · ตรวจทาน 11 ก.ย. 2569) */
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .6) calc(100% - 28px), rgba(0, 0, 0, 0));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.4;
  pointer-events: none;
}
.lt-slider__cap strong {
  font-size: .9375rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .lt-slider__track { grid-auto-columns: min(46%, 420px); }
}


/* พิมพ์ออกกระดาษ: ตัดแถบนำทางทิ้ง เหลือแต่เนื้อหา */
@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; }
}