/* ═══════════ คู่มือพนักงาน ═══════════
   ใช้โทเคนของแอปทั้งหมด ไม่มีสีดิบสักค่า — คู่มือต้องเปลี่ยนตามธีมสว่าง/มืด
   เหมือนทุกหน้า ไม่งั้นคนที่เปิดตอนตีสองในโหมดมืดจะโดนหน้าขาวเต็มจอ */

.mn { padding-bottom: 3rem; }
.mn-head h1 { margin: 0; font-size: 22px; font-weight: 600; }
.mn-head p { margin: 4px 0 0; color: var(--ink-mute); font-size: 13px; }

/* แถบสลับภาษา — สามปุ่มเท่ากัน ต้องเขียนทับ .seg ซึ่งเป็นกริดสองคอลัมน์
   และต้องอยู่หลัง .seg ในลำดับการโหลด (manual.css ถูกโหลดหลัง app.css) */
.seg.mn-langs { grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0 18px; }
.seg.mn-langs button { font-size: 13px; padding-inline: 4px; }

/* ── สารบัญ ── */
.mn-toc h2 { font-size: 12px; font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 10px; }
.mn-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: mn; }
.mn-toc li { counter-increment: mn; margin-bottom: 8px; }
.mn-toc button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap); padding: 0 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px); color: var(--ink); font-size: 15px;
}
.mn-toc button::before {
  content: counter(mn, decimal-leading-zero);
  font-variant-numeric: tabular-nums; color: var(--accent-text); font-size: 13px; flex: none;
}
/* หัวกลุ่มในสารบัญ (20 บท แบ่งตามงาน) — ไม่นับเลข เลขบทต้องตรงกับ "บทที่ N" ในเนื้อหา */
.mn-toc li.mn-grp { counter-increment: none; margin: 18px 0 8px; font-size: 12px; font-weight: 600;
  letter-spacing: var(--track); color: var(--ink-mute); }
.mn-toc li.mn-grp:first-child { margin-top: 0; }

.mn-back { margin-bottom: 4px; }

/* ── หัวบท ── */
.mn-ch > header { border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 4px; }
.mn-no { margin: 0; font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent-text); }
.mn-ch > header h2 { margin: 4px 0 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
.mn-who { margin: 6px 0 0; font-size: 12px; color: var(--ink-mute); }

/* ── หัวข้อย่อย ── */
.mn-sec { margin-top: 22px; }
.mn-sec > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.mn-n { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-mute); font-weight: 400; }
.mn-sec p { margin: 8px 0 0; line-height: 1.75; }
.mn-dim { color: var(--ink-mute); font-size: 13px; }

.mn ul, .mn ol { margin: 8px 0 0; padding-left: 20px; }
.mn li { margin: 4px 0; line-height: 1.7; }
.mn-ticks { list-style: disc; }
/* เช็กลิสต์ — ช่องว่างให้ติ๊กด้วยตา ไม่ใช่ช่องกรอกจริง คู่มือไม่เก็บสถานะของใคร */
.mn-check { list-style: none; padding-left: 0; }
.mn-check li { position: relative; padding-left: 26px; }
.mn-check li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 15px; height: 15px;
  border: 1.5px solid var(--line); border-radius: 3px; background: var(--surface);
}

/* ── ขั้นตอน ── */
.mn-step { background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px); padding: 12px 14px; margin-top: 10px; }
.mn-step h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.mn-tag { font-size: 10px; letter-spacing: .06em; background: var(--accent-wash);
  color: var(--sel-text); padding: 2px 6px; border-radius: 3px; font-weight: 500; flex: none; }
.mn-step p { font-size: 14px; color: var(--ink-dim); }
.mn-step ol li, .mn-step ul li { font-size: 14px; }

/* ── ปัญหา ── */
.mn-prob { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.mn-prob:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mn-prob h4 { margin: 0; font-size: 14px; font-weight: 600; }
.mn-prob p { font-size: 14px; }

/* ── กล่องหมายเหตุ ── */
.mn-box { border-left: 3px solid; padding: 10px 12px; border-radius: 0 6px 6px 0;
  margin-top: 10px; font-size: 14px; line-height: 1.7; }
.mn-box .mn-k { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.mn-box--note { border-color: var(--accent-text); background: var(--accent-wash-faint); }
.mn-box--note .mn-k { color: var(--accent-text); }
.mn-box--tip { border-color: var(--ok); background: var(--accent-wash-faint); }
.mn-box--tip .mn-k { color: var(--ok); }
.mn-box--perm { border-color: var(--ink-mute); background: var(--surface-2); }
.mn-box--perm .mn-k { color: var(--ink-mute); }
.mn-box--warn { border-color: var(--bronze); background: var(--accent-wash-soft); }
.mn-box--warn .mn-k { color: var(--accent-text); }
.mn-box--stop { border-color: var(--danger); background: var(--danger-wash); }
.mn-box--stop .mn-k { color: var(--danger-text); }

/* ── ตาราง ── */
.mn-tw { overflow-x: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; }
.mn-tw table { border-collapse: collapse; width: 100%; font-size: 13px; background: var(--surface); min-width: 26rem; }
.mn-tw th, .mn-tw td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.mn-tw thead th { background: var(--surface-2); font-weight: 600; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
.mn-tw tbody tr:last-child td { border-bottom: 0; }
.mn-req { white-space: nowrap; font-weight: 600; color: var(--danger-text); }
.mn-opt { white-space: nowrap; color: var(--ink-mute); }

/* ── ภาพหน้าจอ ──
   รูปอยู่ที่ /manual/img/ ซึ่งไม่ได้อยู่ในแคชของ service worker (ดู ui/manual/data.js)
   เครื่องที่ไม่เคยเปิดตอนมีเน็ตจะเห็นเป็นช่องว่าง ไม่ใช่ไอคอนรูปแตก — จึงตั้งพื้นไว้ */
.mn-fig { margin: 12px 0 0; }
/* รูปทั้งรูปเป็นปุ่มขยาย (zoom.js) — ปุ่มต้องไม่มีหน้าตาของปุ่ม เหลือแค่รูป */
.mn-zoom { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
  width: 100%; max-width: 300px; text-align: left; border-radius: 10px; }
.mn-zoom:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.mn-fig img { display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
/* จอกว้าง (iPad · คอม) — รูปมือถือที่ 300px ดูเล็กเกินไปในคอลัมน์ 760px */
@media (min-width: 700px) { .mn-zoom { max-width: 360px; } }

/* ── ขยายรูปเต็มจอ ── */
.mn-zoom-open, .mn-zoom-open body { overflow: hidden; }
.mn-zoomer { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 9, 8, .96);
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: max(52px, calc(env(safe-area-inset-top) + 44px)) 8px max(16px, env(safe-area-inset-bottom)); }
.mn-zoomer-body { min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* มือถือ: เต็มความกว้าง แล้วเลื่อนลงอ่าน · จอกว้าง: ทั้งรูปพอดีความสูงจอ */
.mn-zoomer img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px; cursor: default; }
@media (min-width: 700px) {
  .mn-zoomer img { width: auto; max-width: 100%; max-height: calc(100dvh - 120px); }
}
.mn-zoomer p { margin: 0; max-width: 520px; color: #EDE8E1; font-size: 13px; text-align: center; }
.mn-zoomer-x { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.mn-zoomer-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mn-fig figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-mute); }

/* ── สรุปสั้น ── */
.mn-quick { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.mn-quick ol { margin: 0; padding-left: 20px; }
.mn-quick li { font-size: 14px; }

.mn code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

/* ── หน้าคู่มือเดี่ยว /manual/ (11 ต.ค.) — ไม่มีโครงแอป จึงต้องมีขอบและความกว้างของตัวเอง ── */
.mnp { max-width: 760px; margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.mnp .mn-toc a {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap); padding: 0 14px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md, 12px); color: var(--ink); font-size: 15px;
}
.mnp .mn-toc a::before {
  content: counter(mn, decimal-leading-zero);
  font-variant-numeric: tabular-nums; color: var(--accent-text); font-size: 13px; flex: none;
}
.mnp .mn-toc a:focus-visible, .mnp-next a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.mnp a.mn-back { display: inline-flex; text-decoration: none; }
.mnp-next { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.mnp-next a { color: var(--accent-text); text-decoration: none; }

/* ═══════════ เล่ม iPad (15 ต.ค.) — ภาพแนวนอน + วงกลมตัวเลข ═══════════ */
.seg.mn-device { grid-template-columns: 1fr 1fr; gap: 4px; margin: 14px 0 0; }
.seg.mn-device button { font-size: 13px; }
.seg.mn-langs.mn-langs--2 { grid-template-columns: 1fr 1fr; }
/* หน้าเดี่ยวบนจอกว้าง: คอลัมน์กว้างขึ้นให้ภาพ iPad ใหญ่พอให้อ่านตัวหนังสือในภาพได้ */
.mnp.is-ipad { max-width: 1040px; }
.mi-intro { font-size: 15px; }
.mi-step { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.mi-step h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.45; }
.mi-n { flex: none; font-size: 12px; font-weight: 600; letter-spacing: var(--track); color: var(--accent-text); white-space: nowrap; }
.mi-fig { margin: 12px 0 0; }
/* กรอบภาพเป็นตัวอ้างอิงของวงกลม — วงกลมวางด้วย % ของกรอบนี้ (placeMarks · zoom.js) */
.mi-shot { position: relative; width: 100%; }
.mi-zoom { max-width: none; width: 100%; }
/* รูปต้องกว้างเท่ากรอบพอดี — ไม่งั้นวงกลมที่วางด้วย % ของกรอบจะไม่ตรงกับปุ่มในรูป */
.mi-shot img { display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); }
.mi-mk {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: #C0392B; color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
/* วงกลมในรายการอธิบายใต้ภาพ — หน้าตาเดียวกัน แต่อยู่ในบรรทัด */
.mi-mk.mi-mk--in { position: static; transform: none; flex: none; margin-top: 1px; box-shadow: none; }
.mi-points { margin: 10px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: var(--track); color: var(--ink-mute); }
.mi-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mi-legend li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; }
@media (min-width: 760px) { .mi-legend { grid-template-columns: 1fr 1fr; column-gap: 22px; } }
/* ชั้นขยายรูป: วงกลมต้องอยู่บนรูปที่ขยายด้วย */
.mn-zoomer-shot { position: relative; display: inline-block; max-width: 100%; }
@media (max-width: 699px) { .mn-zoomer-shot { width: 100%; max-width: 520px; } }
.mn-zoomer-shot img { display: block; }

/* คู่มือเดี่ยว (/manual/) — ให้ตัวเอกสารเลื่อน ไม่ใช่ <body>
   app.css ตั้ง html, body { height:100% } ไว้ให้แอป (ผังเต็มจอ) ซึ่งทำให้ <body> กลายเป็นกล่องเลื่อน
   บน iPhone: แตะแถบสถานะแล้วไม่กลับขึ้นบน แถบของ Safari ไม่หด และ scrollTo() ไม่มีผล (16 ต.ค.)
   หน้านี้ไม่มีผังเต็มจอ จึงคืนความสูงให้เป็นไปตามเนื้อหา · แอปที่โหลดไฟล์นี้ไม่มี .mn-doc จึงไม่โดน */
html:has(> body.mn-doc), body.mn-doc { height: auto; }