/* app.css — โครงหน้าแอปเลขาเล็ก บน Design System "Lek Chiang Wang" (vendor/ds/*.css)
 * iPhone: แถบล่าง 5 ปุ่ม + ระยะขอบ 16px + safe area · Mac (กว้าง ≥ 900px): แถบข้าง 280px (ข้อ 11.2)
 * ขนาดตัวอักษร 3 ระดับ: ขยายเนื้อหาทั้งหน้าด้วย zoom (คอมโพเนนต์ของ DS กำหนดขนาดเป็น px)
 * ไม่มีอีโมจิ · ไม่มีสไตล์ในบรรทัดของ HTML (CSP style-src 'self') */

:root {
  --lk-zoom: 1;
  --lk-tabbar-h: 64px;
  --lk-sidebar-w: 280px;
  --lk-status-h: 40px;
  --lk-ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-text-size="large"] { --lk-zoom: 1.12; }
html[data-text-size="xlarge"] { --lk-zoom: 1.25; }

html, body { height: 100%; }
body { background: var(--bg-app); overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
#root { min-height: 100%; }

.lk-boot { display: grid; place-items: center; min-height: 100vh; font: var(--text-body-font); color: var(--text-muted); }
.lk-boot-body { display: grid; gap: 8px; max-width: 34em; padding: 24px 16px; text-align: center; }
.lk-boot-body p { margin: 0; }
.lk-boot-about { font-size: 14px; line-height: 1.6; }
.lk-boot-about a { display: inline-block; padding: 12px 8px; color: var(--brand-ink); text-decoration: underline; }

/* ---------- โครงหลัก ---------- */
.lk-app { min-height: 100vh; min-height: 100dvh; }
.lk-main {
  padding: calc(env(safe-area-inset-top) + 8px) 16px calc(var(--lk-tabbar-h) + env(safe-area-inset-bottom) + 24px);
  max-width: 760px; margin: 0 auto;
}
.lk-zoom { zoom: var(--lk-zoom); }
@media (min-width: 900px) {
  .lk-app.lk-wide { display: grid; grid-template-columns: var(--lk-sidebar-w) 1fr; }
  /* width: 100% — ช่องนี้เป็น grid item ที่มี margin auto จึงหดตามเนื้อหา หน้าที่เนื้อหาสั้นเคยแคบและหัวหน้าเลื่อนไปมา */
  .lk-app.lk-wide .lk-main { padding: 24px 32px 48px; width: 100%; max-width: 960px; }
  .lk-sidebar-slot { position: sticky; top: 0; height: 100vh; }
}

/* ---------- แถบสถานะ (ทุกหน้า) ---------- */
.lk-status {
  display: flex; align-items: center; gap: 8px; min-height: var(--lk-status-h);
  padding: 6px 12px; margin: 0 0 12px; border-radius: 12px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  font: var(--text-small-font); color: var(--text-muted);
}
.lk-status[data-tone="warning"] { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
.lk-status[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
.lk-status[data-tone="info"] { background: var(--info-soft); color: var(--info-ink); border-color: transparent; }
.lk-status .lk-grow { flex: 1; }
.lk-status button { flex: none; }

/* ---------- หัวหน้า / ส่วน ---------- */
.lk-page-title { font: var(--text-h1); color: var(--text-strong); margin: 4px 0 12px; }
.lk-section { margin: 20px 0 8px; }
.lk-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: var(--text-h3); color: var(--text-strong); }
.lk-section-head .lk-count { font: var(--text-caption-font); color: var(--text-muted); }
.lk-stack { display: grid; gap: 12px; }
.lk-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lk-muted { color: var(--text-muted); }
.lk-small { font: var(--text-small-font); }
.lk-caption { font: var(--text-caption-font); color: var(--text-muted); }
.lk-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .lk-kpis { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ---------- การ์ด ---------- */
.lk-card {
  background: var(--surface-card); border-radius: 16px; border: 1px solid var(--border-subtle);
  padding: 16px; box-shadow: var(--shadow-card);
}
.lk-card.lk-tap { cursor: pointer; transition: box-shadow var(--dur) var(--lk-ease), transform var(--dur) var(--lk-ease); }
.lk-card.lk-tap:active { transform: scale(.995); }
/* วงโฟกัสแป้นพิมพ์ (Mac): การ์ดมีเงาของตัวเองทับ box-shadow ของ :focus-visible ใน DS · การ์ดตัวเลขของ DS ใส่เงาในบรรทัด
   → สองแบบนี้เดิมไม่มีวงโฟกัสเลย ใช้ outline สีเดียวกับ --focus-ring แทน */
.lk-card.lk-tap:focus-visible, .cw-card-link:focus-visible { outline: 3px solid rgba(34, 184, 207, .55); outline-offset: 2px; }
.lk-card-title { font: 600 17px/1.5 var(--font-ui); color: var(--text-strong); margin: 0; }
.lk-row + .lk-card-title { margin-top: 6px; }
.lk-card-meta { font: var(--text-small-font); color: var(--text-muted); margin-top: 4px; }
/* ข้อมูลกำกับ (ui.js Meta): ชิ้นหนึ่งไม่ถูกตัดกลางบรรทัด · จุดคั่นติดท้ายชิ้นก่อนหน้า ไม่ขึ้นต้นบรรทัดใหม่ */
.lk-nb { display: inline-block; max-width: 100%; }
.lk-nb:not(:last-child)::after { content: " ·"; white-space: pre; }
/* เนื้อหาในการ์ด (สิ่งที่ต้องทำของงาน) — เนื้อหา ≥ 16px ตามกฎ DS · lk-card-meta ใช้กับข้อมูลกำกับเท่านั้น */
.lk-card-note { font: var(--text-body-font); color: var(--text-body); margin: 4px 0 0; overflow-wrap: anywhere; }
.lk-card-note + .lk-row, .lk-card-title + .lk-row { margin-top: 10px; }
.lk-read { font: var(--text-read-font); color: var(--text-body); margin: 0; white-space: pre-wrap; max-width: 42em; }
.lk-draft-label { display: inline-flex; gap: 6px; align-items: center; font: var(--text-caption-font); color: var(--warning-ink);
  background: var(--warning-soft); border-radius: 999px; padding: 2px 10px; margin: 0 0 10px; }

/* รายการในการ์ด */
.lk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lk-list li { display: flex; gap: 10px; align-items: flex-start; }
.lk-list li > .lk-grow { flex: 1 1 180px; min-width: 0; }
/* ตัวอักษรใหญ่: ชิป "หน้า X" ลงบรรทัดใหม่ชิดขวา แทนการบีบข้อความเหลือคอลัมน์แคบ */
.lk-list li { flex-wrap: wrap; }
.lk-list li > .cw-chip-btn, .lk-points li > .cw-chip-btn { margin-left: auto; }
.lk-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font: var(--text-small-font); }
.lk-kv dt { color: var(--text-muted); }
.lk-kv dd { margin: 0; color: var(--text-strong); font-weight: 500; }

/* ป้ายเล็ก */
.lk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  font: var(--text-caption-font); background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap; }
.lk-tag[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-ink); }
.lk-tag[data-tone="warning"] { background: var(--warning-soft); color: var(--warning-ink); }
.lk-tag[data-tone="orange"] { background: var(--orange-soft); color: var(--orange-ink); }
.lk-tag[data-tone="success"] { background: var(--success-soft); color: var(--success-ink); }
.lk-tag[data-tone="info"] { background: var(--info-soft); color: var(--info-ink); }
.lk-tag[data-tone="purple"] { background: var(--purple-soft); color: var(--purple-ink); }
.lk-tag[data-tone="brand"] { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- ปุ่มและช่องกรอก (ส่วนที่ DS ไม่มี) ---------- */
.lk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--text-strong);
  font: 600 15px/1 var(--font-ui); cursor: pointer;
}
.lk-btn[data-kind="primary"] { background: var(--btn-primary-gradient); color: #fff; border: 0; }
.lk-btn[data-kind="danger"] { background: var(--danger-soft); color: var(--danger-ink); border: 0; }
.lk-btn[data-kind="ghost"] { background: transparent; border: 0; color: var(--brand-ink); }
.lk-btn:disabled { opacity: .5; cursor: not-allowed; }
/* ปุ่มเล็ก/ชิป: ตัวปุ่มสูง 40px แต่พื้นที่แตะ 44px (::after ยื่นบนล่าง 2px) */
.lk-btn.lk-small-btn { min-height: 40px; padding: 0 14px; font-size: 15px; position: relative; }
.lk-btn.lk-small-btn::after, .lk-chip::after { content: ""; position: absolute; inset: -2px 0; }
.lk-input {
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-strong); font: var(--text-body-font);
}
/* ตัวอย่างในช่องกรอก: สีเริ่มต้นของ Safari จางเกินไปสำหรับข้อความที่ต้องอ่าน */
.lk-input::placeholder { color: var(--text-muted); opacity: .85; }
.lk-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.lk-chips::-webkit-scrollbar { display: none; }
.lk-chip {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-subtle); position: relative;
  background: var(--surface-card); color: var(--text-body); font: 500 15px/1 var(--font-ui); cursor: pointer;
}
.lk-chip[aria-pressed="true"] { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.lk-chip:disabled { opacity: .5; cursor: not-allowed; }
/* ตัวกรองแบบตัวเลือกของระบบ (ui.js FacetSelect · docs.js): กำลังกรองอยู่ = กรอบและพื้นสีอ่อน ให้เห็นว่ารายการถูกกรอง */
/* Safari บน iPhone วาดตัวเลือกของระบบเตี้ยกว่า min-height (วัดบน Simulator ได้ ~31pt) → กำหนดความสูงตรง ๆ ให้พื้นที่แตะครบ 44px */
.lk-filter { width: auto; max-width: 100%; margin-bottom: 8px; height: 44px; }
.lk-filter[data-active="true"] { border-color: var(--brand-ink); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
/* min-width: 0 — ไม่งั้นแถวนี้ไม่ยอมหดต่ำกว่าความกว้างตามข้อความของตัวเลือก (ตัวอักษรใหญ่มากล้นขอบขวา) */
.lk-filters { display: flex; gap: 8px; flex: 0 1 340px; min-width: 0; }
.lk-filters .lk-filter { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
/* ชิปคำถาม (คำถามแนะนำ ถามต่อ): เป็นประโยคยาว ต้องตัดบรรทัดได้ ไม่ล้นการ์ด */
.lk-chip.lk-chip-q { flex: 0 1 auto; max-width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 16px;
  line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.lk-chip.lk-chip-q::after { content: none; }

/* สวิตช์และตัวเลือก */
.lk-setting { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.lk-setting:last-child { border-bottom: 0; }
.lk-setting .lk-grow { flex: 1; }
.lk-seg { display: inline-flex; border: 1.5px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.lk-seg { max-width: 100%; }
.lk-seg button { min-height: 44px; min-width: 44px; padding: 4px 12px; border: 0; background: var(--surface-card); font: 500 14px/1.3 var(--font-ui); cursor: pointer; }
.lk-seg button[aria-pressed="true"] { background: var(--brand-800); color: #fff; }
/* โหมดมืด: brand-800 กลืนกับพื้นการ์ด ตัวเลือกที่เลือกอยู่ดูไม่ออก */
[data-theme="dark"] .lk-seg button[aria-pressed="true"],
[data-theme="dark"] .lk-chip[aria-pressed="true"] { background: var(--brand-600); border-color: var(--brand-600); }
/* กรอบ overflow: hidden ตัดวงโฟกัสของปุ่มข้างใน → วาดวงด้านใน */
.lk-seg button:focus-visible { box-shadow: inset var(--focus-ring); }
.lk-toggle { width: 52px; height: 32px; border-radius: 999px; border: 0; background: var(--border-strong); position: relative; cursor: pointer; flex: none; }
.lk-toggle::before { content: ""; position: absolute; inset: -6px -4px; }  /* พื้นที่แตะ 44px */
.lk-toggle:disabled { opacity: .5; cursor: not-allowed; }
.lk-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--dur) var(--lk-ease); }
.lk-toggle[aria-checked="true"] { background: var(--success-500); }
.lk-toggle[aria-checked="true"]::after { transform: translateX(20px); }

/* ---------- แผ่นล่าง (เลือกวิธี ยืนยันลบ) ---------- */
.lk-scrim { position: fixed; inset: 0; background: rgba(6, 30, 32, .45); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.lk-sheet {
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: var(--surface-card);
  border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-pop);
}
@media (min-width: 900px) { .lk-scrim { align-items: center; } .lk-sheet { border-radius: 20px; } }
.lk-sheet h2 { font: var(--text-h2); margin: 0 0 4px; color: var(--text-strong); }
/* แผ่นรับโฟกัสตอนเปิด (ui.js Sheet) — ไม่ต้องมีวงโฟกัสรอบทั้งแผ่น */
.lk-sheet:focus { outline: none; }
/* หัวแผ่นยาว (ดูต้นฉบับ · ดูสิ่งที่ส่งออก): ติดบนตลอดการเลื่อน ปุ่มปิดและปุ่มเปลี่ยนหน้าไม่เลื่อนหายตามเนื้อหา
   แผ่นที่มีหัวไม่มีระยะขอบบน (หัวมีของตัวเอง) — sticky วัดจากขอบเนื้อหาของกล่องที่เลื่อน ถ้าแผ่นมีระยะขอบบน เนื้อหาจะโผล่เหนือหัว */
.lk-sheet.lk-sheet-headed { padding-top: 0; }
.lk-sheet-head { position: sticky; top: 0; z-index: 1; margin: 0 -16px 12px; padding: 16px 16px 8px;
  background: var(--surface-card); border-bottom: 1px solid var(--border-subtle); }
.lk-sheet-head h2 { margin: 0; }
.lk-sheet-head .lk-row + .lk-row { margin-top: 4px; }
/* แถวเครื่องมือในหัวแผ่น (ภาพ/ข้อความ · ขยาย · หน้าก่อน/ถัดไป) ต้องอยู่บรรทัดเดียวบนจอ 440pt — Safari เคยดันปุ่ม "หน้าถัดไป" ลงไปอยู่บรรทัดใหม่ตัวเดียว */
.lk-sheet-head .lk-row { flex-wrap: nowrap; gap: 4px; }
.lk-sheet-head .lk-seg { flex: 0 1 auto; min-width: 0; }
.lk-sheet-head .lk-seg button { padding: 4px 10px; white-space: nowrap; }
.lk-sheet-head .lk-iconbtn { flex: none; }
.lk-option {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; width: 100%; text-align: left;
  padding: 16px; margin-top: 12px; border-radius: 16px; border: 1.5px solid var(--border-strong); background: var(--surface-card); cursor: pointer;
}
/* ตัวเลือกที่ปิดอยู่: เหตุผลที่ปิดต้องอ่านออก จึงไม่ทำให้จางทั้งปุ่ม */
.lk-option:disabled { cursor: not-allowed; background: var(--surface-sunken); border-style: dashed; }
.lk-option:disabled strong { color: var(--text-muted); }
.lk-option strong { display: block; font: 600 17px/1.4 var(--font-ui); color: var(--text-strong); }
.lk-option span { display: block; font: var(--text-small-font); color: var(--text-muted); margin-top: 2px; }
.lk-option .lk-eta { color: var(--brand-ink); font-weight: 600; }

/* ---------- ส่งเอกสาร (ลากไฟล์วาง) ---------- */
.lk-drop {
  display: grid; place-items: center; gap: 8px; min-height: 200px; padding: 24px; text-align: center; border-radius: 20px;
  border: 2px dashed var(--border-strong); background: var(--surface-card); color: var(--text-muted); cursor: pointer;
}
.lk-drop[data-over="true"] { border-color: var(--brand-400); background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- ปฏิทิน ---------- */
.lk-day { margin-top: 16px; }
.lk-day-head { font: 600 15px/1.4 var(--font-ui); color: var(--text-muted); margin: 0 0 8px; }
.lk-day-head[data-today="true"] { color: var(--brand-ink); }

/* ---------- แถบล่าง iPhone ---------- */
.lk-tabbar-slot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
@media (min-width: 900px) { .lk-app.lk-wide .lk-tabbar-slot { display: none; } }

/* ตัวอักษรเล็กที่สุดตามกฎ DS: เนื้อหา ≥ 16px */
.lk-empty { text-align: center; padding: 32px 16px; color: var(--text-muted); }
[hidden] { display: none !important; }

/* ---------- ส่วนเพิ่มของหน้าจอ P4 ---------- */
.lk-grow { flex: 1; min-width: 0; }
.lk-mt { margin-top: 16px; }
.lk-mt-sm { margin-top: 8px; }
.lk-center { justify-content: center; }
.lk-danger { color: var(--danger-ink); }
.lk-ok { color: var(--success-ink); }
.lk-break { overflow-wrap: anywhere; }
.lk-lead { margin: 0 0 8px; }
.lk-link { font: 500 15px/1.4 var(--font-ui); color: var(--brand-ink); text-decoration: none; position: relative; }
.lk-link::after { content: ""; position: absolute; inset: -12px -8px; }  /* พื้นที่แตะ 44px */
.lk-link:hover { text-decoration: underline; }
.lk-empty-line { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-sunken); color: var(--text-muted); font: var(--text-small-font); }
.lk-code { font: 500 13px/1.4 ui-monospace, Menlo, monospace; background: var(--surface-sunken); padding: 2px 6px; border-radius: 6px; }
body.lk-noscroll { overflow: hidden; }

/* หัวหน้า */
.lk-header { display: flex; align-items: center; gap: 4px; min-height: 52px; margin: 0 0 8px; }
.lk-header .lk-page-title { font: 600 26px/1.3 var(--font-display); margin: 0; }
.lk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--text-strong); cursor: pointer; flex: none;
}
.lk-iconbtn:hover { background: var(--surface-sunken); }
.lk-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.lk-iconbtn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.lk-textsize { font: 700 22px/1 var(--font-display); position: relative; }
.lk-textsize span { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.lk-textsize span::before, .lk-textsize span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.lk-textsize span[data-size="large"]::before, .lk-textsize span[data-size="xlarge"]::before,
.lk-textsize span[data-size="xlarge"]::after { background: var(--brand-ink); }
.lk-status-at { color: inherit; opacity: .8; }
/* ตัวบอกงานในคิว (หัวหน้า): ระบบปกติและกำลังประมวลผล — เล็ก ไม่กินแถว */
.lk-busy { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 10px; border-radius: 999px;
  background: var(--info-soft); color: var(--info-ink); font: 600 14px/1 var(--font-num); }

/* หน้ายังไม่เชื่อมต่อ */
.lk-gate { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; gap: 12px; padding: 24px 16px;
  text-align: center; font: var(--text-body-font); color: var(--text-body); }
.lk-gate img { margin: 0 auto; border-radius: 24px; box-shadow: var(--shadow-card); }
.lk-gate h1 { font: 700 30px/1.3 var(--font-display); margin: 0; color: var(--text-strong); }
.lk-gate p { margin: 0; }

/* วันนี้ */
.lk-hero-btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }
.lk-group { margin-top: 12px; }
.lk-group-head { display: flex; align-items: center; gap: 6px; font: 600 16px/1.4 var(--font-ui); margin: 0 0 8px; color: var(--text-muted); }
.lk-group-head[data-tone="danger"] { color: var(--danger-ink); }
.lk-group-head[data-tone="warning"] { color: var(--warning-ink); }
.lk-group-head[data-tone="brand"] { color: var(--brand-ink); }

/* รายการเอกสาร */
.lk-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.lk-search { flex: 1; position: relative; display: flex; align-items: center; }
.lk-search > span:first-child { position: absolute; left: 12px; color: var(--text-muted); pointer-events: none; }
.lk-search .lk-input { padding-left: 40px; }
a.lk-btn { text-decoration: none; }
/* มือถือ: ช่องค้นเต็มแถว ปุ่มอยู่แถวถัดไป (เดิมช่องค้นเหลือ ~190px ตัวอย่างถูกตัด · ตัวอักษรใหญ่มากเหลือ ~100px) */
@media (max-width: 899px) {
  .lk-toolbar { flex-wrap: wrap; }
  .lk-toolbar .lk-search, .lk-toolbar .lk-filters { flex: 1 1 100%; }
  .lk-toolbar > .lk-btn { flex: 1; }
}

/* รายละเอียดเอกสาร */
.lk-ref { font: 600 14px/1.4 var(--font-num); color: var(--text-muted); letter-spacing: .02em; }
.lk-doc-title { font: 600 22px/1.45 var(--font-display); color: var(--text-strong); margin: 8px 0 12px; }
.lk-doc-title:last-child { margin-bottom: 0; }  /* หัวเอกสารไม่มีแถวใต้ชื่อเรื่อง (แถวข้อมูลอยู่ในการ์ด "รายละเอียดหนังสือ") */
.lk-callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); color: var(--text-body); }
.lk-callout strong { font: 600 17px/1.4 var(--font-ui); color: var(--text-strong); }
.lk-callout p { margin: 4px 0 0; font: var(--text-small-font); }
.lk-callout[data-tone="danger"] { background: var(--danger-soft); border-color: transparent; }
.lk-callout[data-tone="danger"] > span:first-child { color: var(--danger-ink); }
.lk-callout[data-tone="warning"] { background: var(--warning-soft); border-color: transparent; }
.lk-callout[data-tone="warning"] > span:first-child { color: var(--warning-ink); }
.lk-callout[data-tone="info"] { background: var(--info-soft); border-color: transparent; }
.lk-callout[data-tone="info"] > span:first-child { color: var(--info-ink); }
.lk-callout[data-tone="brand"] > span:first-child { color: var(--brand-ink); }
.lk-callout-inline { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-sunken); color: var(--text-muted); font: var(--text-small-font); }
.lk-callout-inline[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-ink); }
.lk-steps { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 8px 0 0; padding: 0; font: var(--text-caption-font); color: var(--text-muted); }
.lk-steps li { display: flex; align-items: center; gap: 6px; }
.lk-steps li:not(:last-child)::after { content: ""; width: 16px; height: 2px; background: var(--border-strong); margin: 0 6px; }
.lk-steps li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface-card); }
.lk-steps li[data-state="done"]::before { background: var(--success-500); border-color: var(--success-500); }
.lk-steps li[data-state="now"] { color: var(--brand-ink); font-weight: 600; }
.lk-steps li[data-state="now"]::before { border-color: var(--brand-400); background: var(--brand-soft); }
.lk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lk-points li { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; padding-left: 16px; position: relative; }
.lk-points li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400); }
.lk-points .lk-read { flex: 1 1 240px; }
.lk-read + .lk-points { margin-top: 12px; }
.lk-read + .lk-callout-inline, .lk-points + .lk-callout-inline { margin: 12px 0 0; }
.lk-deadline[data-done="true"] strong { text-decoration: line-through; color: var(--text-muted); }
.lk-list p { margin: 2px 0 0; }
.lk-check { color: var(--success-ink); display: inline-flex; flex: none; padding-top: 2px; }
.lk-check-bad { color: var(--warning-ink); }
.lk-amount { display: block; font: 700 20px/1.4 var(--font-num); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lk-warn-text { color: var(--warning-ink); }
.lk-issue { padding: 12px; border-radius: 14px; border: 1px solid var(--border-subtle); display: grid; gap: 6px; }
.lk-issue p { margin: 0; }
.lk-issue[data-dismissed="true"] { opacity: .6; background: var(--surface-sunken); }
.lk-callout-inline + .lk-card { margin-top: 0; }
.lk-details summary { cursor: pointer; font: var(--text-small-font); color: var(--text-muted); padding: 11px 0; }
.lk-details .lk-list { margin-top: 8px; }
.lk-pagechips { display: flex; flex-wrap: wrap; gap: 0 8px; }
.lk-actions { justify-content: flex-end; margin-top: 8px; }
/* ข้อความที่ติ๊กยืนยัน (เอกสารลับ · ส่ง AI ภายนอก · เก็บบันทึกตอนลบ) = สิ่งที่ต้องอ่านก่อนตัดสินใจ → 16px ไม่ใช่ตัวเล็ก */
.lk-check-row { display: flex; gap: 10px; align-items: flex-start; font: var(--text-body-font); color: var(--text-body); cursor: pointer; }
.lk-check-row input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand-500); flex: none; }

/* ช่องกรอกในแผ่น */
.lk-field { display: grid; gap: 6px; margin-top: 12px; }
.lk-field > span { font: 600 14px/1.4 var(--font-ui); color: var(--text-muted); }
.lk-textarea { min-height: 96px; padding: 10px 14px; resize: vertical; }
select.lk-input { appearance: auto; }
.lk-select-sm { width: auto; min-width: 140px; }
.lk-seg button:disabled { opacity: .45; cursor: not-allowed; }
.lk-seg button + button { border-left: 1px solid var(--border-subtle); }
/* ตัวเลือกแบ่งช่องในแผ่นแก้ไข: กรอบยืดเต็มช่องอยู่แล้ว ให้ปุ่มแบ่งเท่ากัน (เดิมปุ่มชิดซ้าย เหลือที่ว่างในกรอบ) */
.lk-field .lk-seg { display: flex; }
.lk-field .lk-seg button { flex: 1; }

/* ดูต้นฉบับ */
.lk-sheet { max-height: calc(90vh / var(--lk-zoom)); }
.lk-sheet-wide { max-width: 900px; }
.lk-page-view { margin-top: 12px; border-radius: 12px; background: var(--surface-sunken); padding: 8px; min-height: 200px; }
.lk-page-view img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; cursor: zoom-in; }
/* แตะภาพ/ปุ่มแว่นขยาย = ขยาย 2.2 เท่า เลื่อนดูในกรอบ (หน้า A4 กว้างเท่าจอมือถือ ตัวหนังสืออ่านไม่ออก) */
.lk-page-view { overflow: auto; }
.lk-page-view img[data-zoom="true"] { width: 220%; max-width: none; cursor: zoom-out; }
.lk-page-text { margin: 0; white-space: pre-wrap; font: var(--text-read-font); color: var(--text-body); padding: 8px; }

/* ปฏิทิน */
.lk-weeknav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lk-weeknav strong { font: 600 17px/1.4 var(--font-ui); text-align: center; }
/* วันที่ไม่มีนัด: แถวเดียว ชื่อวันซ้าย "ไม่มีนัด" ขวา */
.lk-day-empty { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lk-day-empty .lk-day-head { margin: 0; }

/* ส่งเอกสาร */
.lk-uploads li { display: flex; gap: 12px; align-items: flex-start; }
.lk-uploads progress { width: 100%; height: 8px; accent-color: var(--brand-500); }
/* ไอคอนสถานะไฟล์: สีบอกผล (เดิมสีเดียวกันหมด ต้องอ่านข้อความจึงรู้ว่าไฟล์ไหนไม่ผ่าน) */
.lk-uploads .lk-check { color: var(--text-muted); }
.lk-uploads .lk-check[data-status="done"] { color: var(--success-ink); }
.lk-uploads .lk-check[data-status="error"] { color: var(--danger-ink); }
.lk-drop strong { font: 600 18px/1.4 var(--font-ui); color: var(--text-strong); }
/* แถวตั้งค่า: ตัวเลือกกว้าง (เช่น 3 ปุ่ม) ขึ้นบรรทัดใหม่แทนการบีบคำอธิบาย */
.lk-setting { flex-wrap: wrap; }
.lk-setting > .lk-grow { flex: 1 1 220px; }
.lk-setting > .lk-grow p { margin: 2px 0 0; }
/* มือถือ: ตัวเลือกแบ่งช่องทุกตัวอยู่บรรทัดของตัวเอง เต็มความกว้าง ช่องเท่ากัน
   (เดิมตัวสั้นอยู่ขวาของหัวข้อ ตัวยาวตกบรรทัดชิดซ้าย — สี่ตัวในหน้าเดียววางไม่เหมือนกัน) */
@media (max-width: 899px) {
  .lk-setting > .lk-seg { display: flex; flex: 1 1 100%; }
  .lk-setting > .lk-seg button { flex: 1; }
}

/* ---------- ถามเลขาเล็ก (K4) ---------- */
.lk-askbox { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface-card);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-card); }
.lk-question { font: 600 20px/1.45 var(--font-display); color: var(--text-strong); margin: 0; overflow-wrap: anywhere; }
/* คำถาม/คำตอบอาจมีข้อความยาวไม่มีจุดตัดคำ (เลขที่หนังสือ ลิงก์ คำที่วางมาผิดรหัส) — ห้ามล้นจอ */
.lk-answer, .lk-timeline, .lk-askitem { overflow-wrap: anywhere; }
.lk-answer p { margin: 0 0 10px; max-width: 760px; }
.lk-timeline { margin: 0; padding-left: 22px; display: grid; gap: 10px; max-width: 760px; }
.lk-cites { display: inline-flex; flex-wrap: wrap; gap: 8px 6px; margin-left: 6px; vertical-align: middle; }
/* ชิปอ้างอิง: ทางเดียวที่ใช้ตรวจคำตอบกับต้นฉบับ — สูง 36px พื้นที่แตะ 44px */
.lk-cite { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; position: relative;
  background: var(--brand-soft); color: var(--brand-ink); font: 600 14px/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.lk-cite::after { content: ""; position: absolute; inset: -4px 0; }
.lk-followups-head { margin: 14px 0 6px; }
/* วิธีตอบ: สองตัวเลือกเต็มความกว้างกล่อง (เดิมกรอบยืดเต็มแต่ปุ่มชิดซ้าย เหลือช่องว่างในกรอบ) */
.lk-askbox .lk-seg { display: flex; max-width: 480px; }
.lk-askbox .lk-seg button { flex: 1; }
.lk-asklist li { align-items: center; }
.lk-asklist li[data-current="true"] .lk-askitem { background: var(--brand-soft); }
.lk-askitem { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 0; border-radius: 12px;
  background: var(--surface-card); cursor: pointer; }

/* ดูสิ่งที่ส่งออก (P3): รหัสแทนชื่อเด่นให้เห็นว่าไม่มีชื่อจริงออกนอกเครื่อง */
.lk-export { max-height: 50vh; overflow: auto; overflow-wrap: anywhere; }
.lk-token { background: var(--brand-soft); color: var(--text-strong); border-radius: 4px; padding: 0 2px; font-weight: 600; }

/* ปุ่มฟังเสียงอ่าน: ไอคอนหมุนระหว่างเตรียมเสียง */
.lk-speech-icon { display: inline-flex; }
[data-speech="loading"] .lk-speech-icon { animation: lk-spin 1s linear infinite; }
@keyframes lk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { [data-speech="loading"] .lk-speech-icon { animation: none; } }

/* เปิดแอปไม่ขึ้น (boot.js): ทางออกให้กดเอง */
.lk-boot-fail { gap: 12px; padding: 24px 16px; text-align: center; place-content: center; }
.lk-boot-fail h1 { font: 700 24px/1.3 var(--font-display); margin: 0; color: var(--text-strong); }
.lk-boot-fail p { margin: 0; }

/* เอกสารที่เกี่ยวข้อง (doc.js Related) */
.lk-related { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; padding: 10px 0; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.lk-related > span:last-child { color: var(--text-muted); flex: none; display: inline-flex; }  /* ลูกศรบอกว่ากดเปิดได้ */
.lk-related-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-related-rel { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.lk-related-title { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; color: var(--text-strong); }
.lk-related-meta { font-size: 14px; color: var(--text-muted); }
.lk-related-list { gap: 0; }
.lk-related-list li + li { border-top: 1px solid var(--border-subtle); }
.lk-related-list li.lk-related-head { padding: 12px 0 4px; font: 600 14px/1.4 var(--font-ui); color: var(--text-muted); }

/* ถามเฉพาะฉบับ (ask.js scope · doc.js AskThis) */
.lk-scope { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); }
.lk-scope-text { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.lk-wrap { flex-wrap: wrap; }

/* ค่าใช้จ่าย AI ภายนอก (settings.js Usage) */
.lk-usage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lk-usage > div { display: flex; flex-direction: column; gap: 2px; }
.lk-usage strong { font-size: 22px; line-height: 1.3; color: var(--text-strong); font-family: var(--font-display); }
.lk-meter { height: 8px; border-radius: 999px; background: var(--surface-sunken); margin: 10px 0 6px; overflow: hidden; }
.lk-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--brand-ink); min-width: 2px; }
.lk-meter > span[data-over="true"] { background: var(--danger-ink); }
.lk-between { justify-content: space-between; }

/* ---------- คำสั่งการของนายก (orders.js) ---------- */
/* ตัวเลือกชนิดคำสั่งการในแผ่น: ชิปมีไอคอน ตัดบรรทัดได้ (ไม่เลื่อนแนวนอน — ต้องเห็นครบทุกชนิด) */
.lk-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-pick .lk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lk-pick .lk-chip::after { content: none; }
/* รายการคำสั่งการในหน้าเอกสาร: คั่นด้วยเส้น */
.lk-orders { gap: 0; }
.lk-orders li { padding: 12px 0; }
.lk-orders li:first-child { padding-top: 0; }
.lk-orders li + li { border-top: 1px solid var(--border-subtle); }
.lk-card-title + .lk-caption, .lk-card-note + .lk-caption { margin: 4px 0 0; }

/* ---------- ภาพรวมปัญหาชุมชน (issues.js) ---------- */
/* แถวหมู่: ชื่อหมู่ · จำนวน · แถบสัดส่วนเทียบหมู่ที่มากที่สุด · หมวดที่ร้อง — แตะเพื่อกรอง (ตัวที่เลือกสีอ่อน) */
.lk-moos { display: grid; gap: 8px; }
.lk-moo { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; width: 100%; min-height: 44px;
  padding: 10px 14px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-body); font: var(--text-body-font); text-align: left; cursor: pointer; }
.lk-moo[aria-pressed="true"] { border-color: var(--brand-ink); background: var(--brand-soft); }
.lk-moo-name { min-width: 0; overflow-wrap: anywhere; }
.lk-moo-n { font: 700 20px/1.2 var(--font-num); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.lk-moo .lk-meter, .lk-moo-cats { grid-column: 1 / -1; }
.lk-moo .lk-meter { height: 6px; margin: 4px 0 2px; }
.lk-moo[aria-pressed="true"] .lk-meter { background: var(--surface-card); }
/* ตารางนัดในแผ่นเตรียมก่อนนัด: ตัวอักษรเท่าเนื้อหา (เวลา สถานที่ แต่งกาย คือสิ่งที่ต้องอ่าน) */
.lk-prep-kv { font: var(--text-body-font); }
.lk-group-head.lk-prep-head { margin: 20px 0 8px; color: var(--text-strong); }
/* การ์ดทางเข้าไปอีกหน้า (หน้าวันนี้ → ภาพรวมปัญหาชุมชน) */
.lk-navcard { display: flex; align-items: center; gap: 12px; }
.lk-navcard > span:last-child { color: var(--text-muted); flex: none; display: inline-flex; }

/* ================= ภาษาภาพเดียวกับหน้าวันนี้ (ผู้ใช้ 30 ก.ย. 2569: หน้าที่เหลือมีแต่การ์ดขาวกับชิปแจ้งเตือน) =================
 * 1) หัวหน้าทุกหน้าเป็นแถบไล่สี (ui.js Banner) — เครื่องมือของหน้าอยู่ในแถบ ไม่เพิ่มแถว
 * 2) การ์ดรายการมีกล่องไอคอนสีนำหน้า: สีบอกความหมาย (กลุ่มประเภทเอกสาร · กำหนดส่ง) ไม่ใช่ของตกแต่ง
 * 3) การ์ดตัวเลขพื้นสีอ่อนแบบหน้าวันนี้ในหน้าที่มีตัวเลขสำคัญ
 * สีไล่เข้มกว่าการ์ดหัวของ DS เล็กน้อย: ตัวอักษรขาวต้องอ่านได้ตลอดแถบ (ปลายขวาของ --hero-gradient สว่างเกินสำหรับตัวหนังสือยาว) */
/* ตัวอักษรขาวบนสีปลายขวา (#0F7F97) มีความต่างสี 4.6:1 · กลาง 4.9:1 · ซ้าย 7.6:1 */
:root { --lk-banner: linear-gradient(135deg, #0E5A5C 0%, #0E7C86 60%, #0F7F97 100%); }
.lk-banner { position: relative; overflow: hidden; display: grid; gap: 8px; margin: 0 0 12px; padding: 4px 12px 12px 16px;
  border-radius: 20px; background: var(--lk-banner); box-shadow: var(--shadow-hero); color: #fff; }
.lk-banner::before { content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .07); pointer-events: none; }
.lk-banner > * { position: relative; min-width: 0; }
.lk-banner .lk-header { margin: 0; min-height: 44px; }
.lk-banner > .lk-header:last-child { margin-bottom: -8px; }  /* แถบที่มีแต่ชื่อหน้า: ไม่ต้องมีระยะล่างเท่าแถบที่มีเครื่องมือ */
.lk-banner .lk-page-title, .lk-banner .lk-iconbtn { color: #fff; }
.lk-banner .lk-iconbtn:hover { background: rgba(255, 255, 255, .14); }
.lk-banner .lk-iconbtn[aria-pressed="true"] { background: rgba(255, 255, 255, .24); color: #fff; }
.lk-banner .lk-iconbtn:disabled { opacity: .45; }
.lk-banner .lk-textsize span::before, .lk-banner .lk-textsize span::after { background: rgba(255, 255, 255, .4); }
.lk-banner .lk-textsize span[data-size="large"]::before, .lk-banner .lk-textsize span[data-size="xlarge"]::before,
.lk-banner .lk-textsize span[data-size="xlarge"]::after { background: #fff; }
.lk-banner .lk-busy { background: rgba(255, 255, 255, .2); color: #fff; }
.lk-banner :focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.lk-banner-sub { margin: -8px 0 0; font: var(--text-body-font); color: rgba(255, 255, 255, .92); }
/* เครื่องมือในแถบ: ช่องกรอก/ตัวเลือกพื้นทึบของธีม · ปุ่มรองโปร่ง · ปุ่มหลักพื้นขาว · ชิปที่เลือก = พื้นขาว */
.lk-banner .lk-toolbar, .lk-banner .lk-chips, .lk-banner .lk-weeknav { margin: 0; padding: 0; }
.lk-banner .lk-input { border-color: transparent; }
.lk-banner .lk-filter { margin-bottom: 0; }
.lk-banner .lk-filter[data-active="true"] { box-shadow: 0 0 0 2px #fff; }
.lk-banner .lk-btn { background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; }
.lk-banner .lk-btn[data-kind="primary"] { background: #fff; border-color: #fff; color: #0B5A5C; }
.lk-banner .lk-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); color: #fff; }
.lk-banner .lk-chip[aria-pressed="true"], [data-theme="dark"] .lk-banner .lk-chip[aria-pressed="true"] {
  background: #fff; border-color: #fff; color: #0B5A5C; }
.lk-banner .lk-weeknav strong { color: #fff; }
/* หัวเอกสารในแถบ: เลขอ้างอิง + ชื่อเรื่อง */
.lk-doc-head { display: grid; gap: 2px; padding-right: 4px; }
.lk-banner .lk-ref { color: rgba(255, 255, 255, .88); }
.lk-banner .lk-doc-title { color: #fff; margin: 0; }
.lk-doc-tags { margin: 0 0 12px; }
.lk-doc-secrecy { margin: 0 0 12px; }

/* กล่องไอคอนนำหน้าการ์ดรายการ (เอกสาร · งาน · งานที่สั่งการ) */
.lk-card.lk-lead { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.lk-lead-body { min-width: 0; }
/* ไอคอนหน้าหัวหมวดเป็นสีของแอป (เดิมสีเดียวกับตัวหนังสือ) */
.lk-section-head > span[aria-hidden="true"]:first-child { color: var(--brand-ink); }
/* การ์ดตัวเลขสามใบในแถวเดียว (หน้าปัญหาชุมชน) */
.lk-kpis.lk-kpis-3 { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 4px; }
/* หน้าเอกสาร: การ์ดใบแรกอยู่ที่ความสูงเดิม (ผู้ใช้ขอให้ส่วนบนเตี้ย — แถบหัวมีระยะขอบของตัวเองเพิ่ม 8px) */
.lk-banner + .lk-day { margin-top: 8px; }
/* ตัวอักษรใหญ่มาก: ไม่มีกล่องไอคอนนำหน้า — ความกว้างทั้งหมดให้ข้อความ (ชื่อประเภท/ชนิดงานยังอยู่ในชิป) */
html[data-text-size="xlarge"] .lk-card.lk-lead { display: block; }
html[data-text-size="xlarge"] .lk-card.lk-lead > span:first-child { display: none; }

/* ---------- บันทึกของนายก (screens/notes.js) ---------- */
.lk-note-box { min-height: 200px; font: var(--text-read-font); }
.lk-note-scope { margin-bottom: 8px; }
.lk-note-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* รายการในสรุปบันทึก: แก้ · ปัดทิ้ง (ยังเห็นแบบจาง เอาคืนได้) — docs/plan_notes.md N2 */
.lk-entry-tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.lk-entry-tools .lk-iconbtn { color: var(--text-muted); }
.lk-dismissed > :not(.lk-entry-tools) { opacity: .5; }
.lk-dismissed .lk-read, .lk-dismissed p, .lk-dismissed strong { text-decoration: line-through; }
.lk-outbox-del { margin-left: auto; color: var(--text-muted); }

/* ---------- วิธีใช้ (screens/help.js) ---------- */
/* ขั้นตอนเป็นเลขข้อในวงกลม — ลำดับที่ต้องทำตามจริง ตัวอักษรเท่าเนื้อหา */
.lk-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: lk-step; font: var(--text-body-font); color: var(--text-body); }
.lk-steps-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; counter-increment: lk-step; }
.lk-steps-list li::before { content: counter(lk-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink); font: 700 15px/1 var(--font-num); }
.lk-help-btn { color: var(--text-strong); font-weight: 600; }
.lk-help-tip { align-items: flex-start; margin: 14px 0 0; font: var(--text-small-font); }
.lk-help-tip > span:first-child { flex: none; padding-top: 2px; color: var(--warning-ink); }
.lk-help-title { margin: 0 0 14px; }
.lk-help-list { padding: 4px 16px; }
.lk-help-group .lk-group-head { gap: 8px; }
.lk-help-starters { border-top: 1px solid var(--border-subtle); padding-top: 10px; display: grid; gap: 6px; }
/* การ์ดเริ่มใช้งาน (หน้าวันนี้): แถวเดียว แตะเพื่อกาง */
.lk-intro { padding: 8px 8px 8px 12px; }
.lk-intro-toggle { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; border: 0; background: none;
  padding: 0; text-align: left; color: var(--text-body); cursor: pointer; font: var(--text-body-font); }
.lk-intro-toggle .lk-grow { display: grid; }
.lk-intro-toggle > span:last-child { color: var(--text-muted); flex: none; display: inline-flex; }
.lk-intro .lk-steps-list, .lk-intro .lk-help-tip, .lk-intro > .lk-row + .lk-steps-list ~ .lk-row { margin-left: 4px; margin-right: 4px; }

/* ---------- หน้าถาม: คำตอบจากข้อมูลในระบบ · ถามต่อ · ทำต่อจากคำตอบ ---------- */
.lk-draft-label.lk-sys-label { background: var(--info-soft); color: var(--info-ink); }
.lk-answer-lead { font: 600 18px/1.6 var(--font-read); color: var(--text-strong); margin: 0 0 10px; }
.lk-answer-list { max-width: 760px; }
.lk-answer-acts { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); display: grid; gap: 6px; }
.lk-followups { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--border-subtle); display: grid; gap: 8px; }
.lk-followups .lk-followups-head { margin: 8px 0 0; }
.lk-follow { display: flex; gap: 8px; }
.lk-follow .lk-input { flex: 1; min-width: 0; }
.lk-follow .lk-btn { flex: none; }
/* บรรทัด "ถามต่อจาก: …" ใต้คำถาม — แตะกลับไปคำถามก่อนหน้า */
.lk-follow-of { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 6px 0 4px; padding: 6px 12px; border: 0;
  border-radius: 12px; background: var(--surface-sunken); color: var(--text-muted); font: var(--text-small-font); text-align: left; cursor: pointer;
  overflow-wrap: anywhere; }
/* ป้ายจำนวนในชิปคำถามเริ่มต้น */
.lk-chip-n { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font: 700 13px/1.6 var(--font-num); }

/* คลังกฎหมาย (screens/law.js) — ตัวบทอ่านง่าย · เชิงอรรถตัวเล็ก */
.lk-law-src { margin: 0; font: 600 15px/1.45 var(--font-ui); color: var(--text-muted); }
.lk-law-body { padding: 8px 0; font: var(--text-read-font); line-height: 1.75; overflow-wrap: anywhere; }
.lk-law-notes { margin-top: 8px; }
.lk-law-notes ul { margin: 4px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-muted); }
.lk-related:disabled { cursor: default; opacity: .75; }
.lk-law-amended { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; padding: 8px 12px; border-radius: 12px;
  background: var(--warning-soft); color: var(--warning-ink); font-size: 15px; line-height: 1.5; }
.lk-law-amended .lk-link { margin-left: 4px; }
.lk-warn-ink { color: var(--warning-ink); }
button.lk-link { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lk-law-answer + .lk-law-answer { margin-top: 12px; }
.lk-law-quote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--border-strong, var(--border-subtle)); background: var(--surface-subtle, transparent);
  font: var(--text-read-font); color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.lk-law-answer .lk-cite { white-space: normal; text-align: left; height: auto; }
/* ช่องค้นตัวบท: ช่องพิมพ์กับปุ่ม "ค้น" อยู่แถวเดียวกันแม้จอแคบ (แถบเครื่องมือหน้าอื่นตัดบรรทัด) */
.lk-law-search { flex-wrap: nowrap; }
.lk-law-search .lk-search { flex: 1 1 auto; min-width: 0; }
.lk-law-search > .lk-btn { flex: 0 0 auto; }

/* คลังกฎหมาย รอบตรวจ UX (LekMate 6) */
/* รายการในการ์ด: เว้นขอบซ้ายขวา (เดิมตัวหนังสือชิดขอบการ์ด) */
.lk-law-list { padding: 2px 16px; }
/* แถวมาตรา: เลขตัวหนาต่อด้วยต้นตัวบทในบรรทัดเดียวกัน ไม่เกิน 2 บรรทัด — ฉบับยาว 280 มาตราเลื่อนสั้นลงราวหนึ่งในสาม */
.lk-law-peek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: 15px; line-height: 1.5; color: var(--text-body); overflow-wrap: anywhere; }
.lk-law-peek .lk-related-rel { font-size: 15px; margin-right: 6px; }
.lk-law-peek-open .lk-related-rel { font-size: 16px; }
.lk-law-open { flex: 1 0 100%; min-width: 0; padding: 0 0 12px; }
.lk-law-open .lk-law-body { padding: 0; }
.lk-law-open .lk-caption { margin: 6px 0 0; }
/* ผลค้น: ข้อความรอบคำที่ค้น ไม่เกิน 2 บรรทัด + ไฮไลต์ */
.lk-law-snip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5; overflow-wrap: anywhere; }
.lk-law-snip mark { background: var(--warning-soft); color: var(--text-strong); border-radius: 4px; padding: 0 2px; }
/* ฉบับแก้ไขอยู่ใต้ฉบับหลัก เยื้องเข้ามา */
.lk-law-list li.lk-law-child { padding-left: 16px; border-top-style: dashed; }
.lk-law-list li.lk-law-child .lk-related-title { font-size: 15px; }
.lk-law-facts { margin: 6px 0 0; color: var(--text-body); }
/* ที่มาของข้อความที่ยก (คำตอบกฎหมาย) */
.lk-law-cites { display: grid; gap: 6px; margin: 6px 0 0; max-width: 760px; }
.lk-law-cite { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-ink); font: inherit; text-align: left; cursor: pointer; }
.lk-law-cite > span:last-child { flex: none; display: inline-flex; }
.lk-law-cite-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lk-law-cite-body strong { font: 700 15px/1.35 var(--font-ui); }
.lk-law-cite-src { font: 400 14px/1.45 var(--font-ui); color: var(--text-body); overflow-wrap: anywhere; }
.lk-law-cite-flag { margin-left: 8px; font: 600 13px/1.35 var(--font-ui); color: var(--warning-ink); }
/* สารบัญของฉบับยาว (law.js outline): แถวละหมวด/ส่วน แตะกาง · หมวดที่กางต่อการ์ดรายการมาตราไว้ใต้แถว */
.lk-law-outline { display: grid; gap: 8px; }
.lk-law-outline > .lk-section-head { margin: 8px 0 0; }
.lk-law-chap { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; text-align: left;
  font: inherit; color: inherit; cursor: pointer; }
.lk-law-chap > span:last-child { flex: none; display: inline-flex; color: var(--text-muted); }
.lk-law-chap-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lk-law-chap-body strong { font: 700 16px/1.4 var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.lk-law-chap[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--brand-soft); }
.lk-law-chapter[data-open="true"] .lk-law-list { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
/* ความฉลาดของระบบ (health.js Quality): แถวละตัววัด — ชื่อบรรทัดบน ค่าในเครื่อง / AI ภายนอก / เทียบ ตัดบรรทัดได้บนมือถือ */
.lk-quality-note { margin: 0 0 8px; }
.lk-quality > li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.lk-quality > li:last-child { border-bottom: 0; }
.lk-quality-label { font: 600 15px/1.4 var(--font-ui); color: var(--text-strong); overflow-wrap: anywhere; }
.lk-quality-vals { display: flex; flex-wrap: wrap; gap: 2px 16px; font: 400 15px/1.45 var(--font-ui); }
.lk-quality-vals strong { font-weight: 700; }

/* ระบบคลาวด์ (LekMate 6): หน้าเข้าสู่ระบบ · อุปกรณ์ของคำสั่งลัด · ออกจากระบบ */
.lk-callout[data-tone="success"] { background: var(--success-soft); border-color: transparent; }
.lk-callout[data-tone="success"] > span:first-child { color: var(--success-ink); }
/* หน้าเข้าสู่ระบบ: แถบไล่สีแบบหัวหน้าอื่น (ชื่อแอป) + การ์ดเดียวที่มีปุ่มเดียว — ไม่มีแถบล่าง ไม่มีข้อมูลในเครื่อง */
.lk-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); font: var(--text-body-font); color: var(--text-body); }
.lk-login-inner { width: min(100%, 420px); display: grid; gap: 16px; }
.lk-login-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px;
  padding: 28px 20px 24px; border-radius: 24px; background: var(--lk-banner); box-shadow: var(--shadow-hero); color: #fff; text-align: center; }
.lk-login-hero::before { content: ""; position: absolute; top: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); }
.lk-login-hero > * { position: relative; }
.lk-login-hero img { border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.lk-login-hero h1 { margin: 6px 0 0; font: 700 30px/1.3 var(--font-display); }
.lk-login-hero p { margin: 0; color: rgba(255, 255, 255, .9); }
.lk-login-card { display: grid; gap: 14px; }
.lk-login-card .lk-callout { margin: 0; }
.lk-login-lead { margin: 0; text-align: center; color: var(--text-strong); }
.lk-login-card > .lk-caption { margin: 0; text-align: center; }
/* ลิงก์นโยบายความเป็นส่วนตัว: ตัวเล็ก ไม่แย่งปุ่มหลัก แต่พื้นที่แตะสูง 44px */
.lk-login-policy { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-top: -8px;
  font: var(--text-small-font); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.lk-login-policy:hover { color: var(--brand-ink); }
.lk-login-policy:focus-visible { outline: 3px solid rgba(34, 184, 207, .55); outline-offset: 2px; border-radius: 8px; }
/* ปุ่มของ Google: สี เส้นขอบ และโลโก้ตามแนวทางแบรนด์ (สว่าง: พื้นขาว ขอบ #747775 · มืด: พื้น #131314 ขอบ #8E918F) */
.lk-google-btn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 20px;
  border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1F1F1F; font: 600 16px/1.2 var(--font-ui);
  text-decoration: none; cursor: pointer; }
.lk-google-btn:hover { background: #F8FAFA; }
.lk-google-btn:focus-visible { outline: 3px solid rgba(34, 184, 207, .55); outline-offset: 2px; }
[data-theme="dark"] .lk-google-btn { background: #131314; border-color: #8E918F; color: #E3E3E3; }
[data-theme="dark"] .lk-google-btn:hover { background: #1E1F20; }
.lk-google-g { flex: none; }
/* รหัสอุปกรณ์: ตัวอักษรความกว้างเท่ากัน อ่านทีละตัวได้ · ตัดบรรทัดกลางรหัส */
.lk-token-box { margin-top: 8px; font: 500 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; resize: none; }
.lk-devices { gap: 0; margin: 8px 0 0; }
.lk-devices li { align-items: center; padding: 10px 0; }
.lk-devices li + li { border-top: 1px solid var(--border-subtle); }