/* ============================================================================
   7 QC Tools — components.css
   ชิ้นส่วน UI ที่ใช้ซ้ำได้ทั้งแอป (ไม่ผูกกับตำแหน่งในโครงหน้า — โครงอยู่ app.css)

   ที่มา: .btn / .badge / .fld / .out-* / ตาราง ยกมาจาก
   ~/Claude/statistics/assets/css/style.css โดยตั้งใจให้หน้าตาตรงกับแอปแม่
   ส่วนที่เพิ่มคือ chip · toast · switch · empty-state · banner · segmented · tabs
   ============================================================================ */

/* ---------------------------------------------------------------------------
   ปุ่ม
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 12px;
  font-size: var(--fs-label); font-weight: 500;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.btn:hover { background: var(--surface-2); }
.btn:active { background: var(--surface-3); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: default; pointer-events: none; }
.btn svg { width: 14px; height: 14px; flex: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-primary:active { background: var(--primary-active); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }

.btn-danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.btn-danger:hover { background: #fde5e2; }

.btn-sm { padding: 3px 9px; font-size: var(--fs-cap); }
.btn-block { width: 100%; }

/* ปุ่มไอคอนล้วน — ขนาดคงที่ 26px กดโดนง่ายบนแท็บเล็ต */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--text-2); cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: 0.4; pointer-events: none; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn.is-on { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-line); }
.icon-btn.is-danger:hover { background: var(--danger-soft); color: var(--danger); }

/* ---------------------------------------------------------------------------
   badge — เหลี่ยม ~5px เท่านั้น ห้าม pill (§9)
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  font-size: var(--fs-badge); font-weight: 600; line-height: 1.5;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.badge-primary { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary); }
.badge-danger  { background: var(--danger-soft);  border-color: var(--danger-line);  color: var(--danger); }
.badge-ok      { background: var(--ok-soft);      border-color: var(--ok-line);      color: var(--ok); }
.badge-warn    { background: var(--warn-soft);    border-color: var(--warn-line);    color: var(--warn); }

/* ---------------------------------------------------------------------------
   chip — ใช้กับคอลัมน์ที่เลือกแล้ว / ตัวกรอง
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 2px 4px 2px 8px;
  font-size: var(--fs-badge);
  border: 1px solid var(--primary-line); border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary);
}
.chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x {
  cursor: pointer; color: inherit; line-height: 1;
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t), color var(--t);
}
.chip-x:hover { background: #fff; color: var(--danger); }

/* ---------------------------------------------------------------------------
   หัวกลุ่มตัวพิมพ์ใหญ่
   --------------------------------------------------------------------------- */
.kicker {
  font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3);
}
:root[lang='th'] .kicker { letter-spacing: 0.02em; text-transform: none; }

/* ---------------------------------------------------------------------------
   tab แบบขีดเส้นใต้ (§9 — ไม่ใช้ pill/segment แบบมีพื้น)
   --------------------------------------------------------------------------- */
.tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 7px 10px 5px;
  font-size: var(--fs-label); color: var(--text-2);
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--text); }
.tab[aria-selected='true'], .tab.is-active {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 500;
}

/* สลับภาษา: ขีดเส้นใต้เหมือนกัน ไม่ใช่ toggle แบบสวิตช์ เพื่อให้เห็นทั้งสองตัวเลือกพร้อมกัน */
.lang-switch { display: inline-flex; align-items: stretch; }
.lang-opt {
  padding: 5px 7px 3px;
  font-size: var(--fs-cap); color: var(--text-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.lang-opt:hover { color: var(--text); }
.lang-opt[aria-pressed='true'] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* ---------------------------------------------------------------------------
   dropdown / popover  (เงาใช้ได้ที่นี่ — ของที่ลอยจริง)
   --------------------------------------------------------------------------- */
.pop-wrap { position: relative; }
.pop {
  position: absolute; top: calc(100% + 5px); left: 0;
  min-width: 220px; max-width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 5px; z-index: var(--z-pop);
}
.pop[hidden] { display: none; }
.pop-right { left: auto; right: 0; }
/* รายการชุดเดียวกันแต่วางนิ่งอยู่ใน sheet (ไม่ได้ลอยใต้ปุ่ม) — ใช้ตอนเลือกโปรเจกต์บนจอแคบ */
.pop-static {
  position: static; min-width: 0; max-width: none; max-height: none;
  border: 0; box-shadow: none; padding: 0; background: none;
}
.pop-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: start;
  padding: 6px 9px;
  font-size: var(--fs-label); color: var(--text);
  border-radius: var(--r-md); cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.pop-item:hover { background: var(--primary-soft); }
.pop-item svg { width: 15px; height: 15px; flex: none; color: var(--text-3); }
.pop-item[aria-checked='true'] { color: var(--primary); font-weight: 500; }
.pop-item-name { overflow: hidden; text-overflow: ellipsis; }
.pop-item-meta { margin-inline-start: auto; font-size: var(--fs-num-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pop-sep { height: 1px; background: var(--border); margin: 5px 4px; }
.pop-cap { padding: 6px 9px 3px; }
.pop-empty { padding: 9px; font-size: var(--fs-cap); color: var(--text-3); }

/* ปุ่มที่เปิด dropdown (ตัวสลับโปรเจกต์/ชุดข้อมูล) */
.combo {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  padding: 4px 8px;
  font-size: var(--fs-label);
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent; color: var(--text); cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.combo:hover { background: var(--surface-2); border-color: var(--border); }
.combo[aria-expanded='true'] { background: var(--surface-2); border-color: var(--border-strong); }
.combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.combo-cap { color: var(--text-3); font-size: var(--fs-cap); flex: none; }
.combo svg { width: 12px; height: 12px; color: var(--text-3); flex: none; }

/* ---------------------------------------------------------------------------
   การ์ด (โครงกลาง ๆ ใช้ได้ทั้ง preview และ results)
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  flex: 1; min-width: 0;
  font-size: var(--fs-body); font-weight: 600; letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.card-body { padding: 10px 12px; }
.card-foot {
  padding: 7px 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-cap); color: var(--text-3);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   บล็อกผลลัพธ์ตามสัญญา ARCHITECTURE §3
   engine/card.js เป็นคนสร้าง DOM — ที่นี่ให้แค่หน้าตา
   --------------------------------------------------------------------------- */
.blk-note { font-size: var(--fs-cap); color: var(--text-2); margin: 3px 0 8px; }
.blk-heading { font-size: var(--fs-label); font-weight: 600; margin: 12px 0 6px; }
.blk-heading:first-child { margin-top: 2px; }

.blk-error {
  border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger);
  border-radius: var(--r-md); padding: 8px 12px; font-size: var(--fs-body); margin: 6px 0;
}

/* คำอ่านผล (.qc-interp) — จุดขายของผลิตภัณฑ์ (§5) จึงต้องเด่นกว่า note ธรรมดา
   ⛔ ห้ามแถบสีข้าง → ใช้ "จุดสี + กรอบบางสี่ด้าน" ตามกติกาออกแบบของเว็บ
   สีจุดคือ *ความหมายทางสถิติ* (ปกติ/เฝ้าระวัง/หลุด) ไม่ใช่การตกแต่ง ห้ามไล่เป็นสีเดียว

   ⚠️ ชื่อคลาสมาจาก engine/card.js (BASE_CSS ที่นั่นเป็นของผู้ที่ฝังการ์ดไปใช้ที่อื่น
   — แอปนี้ไม่เคยเรียก injectStyles) ⇒ แก้ทรงที่นี่แล้วต้องแก้ที่นั่นให้ตรงกันด้วย */
.qc-interp {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 12px; margin: 8px 0;
  font-size: var(--fs-body); color: var(--text);
  background: var(--surface-2);
}
.qc-interp::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: .45em;
  background: var(--text-3);
}
.qc-interp--info::before { background: var(--primary); }
.qc-interp--good::before { background: var(--ok); }
.qc-interp--warn::before { background: var(--warn); }
.qc-interp--bad::before  { background: var(--danger); }

.blk-table { overflow-x: auto; margin: 4px 0 10px; }
.qc-table {
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.qc-table th {
  text-align: end; font-weight: 600; color: var(--text);
  padding: 4px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.qc-table td { padding: 3.5px 12px; border-bottom: 1px solid var(--border); text-align: end; }
.qc-table tr:last-child td { border-bottom: 0; }
.qc-table th.al, .qc-table td.al { text-align: start; }
.qc-table th.ac, .qc-table td.ac { text-align: center; }
.qc-table tbody tr:hover td { background: var(--surface-2); }

.blk-chart { margin: 8px 0; overflow-x: auto; }
.blk-chart svg { display: block; max-width: 100%; height: auto; }

.qc-pre {
  font-family: var(--mono); font-size: var(--fs-cap);
  white-space: pre; overflow-x: auto; line-height: 1.35;
  margin: 4px 0 10px; color: var(--text);
}

/* stat grid — ตัวเลขสรุปแบบไพ่ */
.blk-statgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin: 6px 0 10px;
}
.sg-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; }
.sg-label { font-size: var(--fs-cap); color: var(--text-2); margin-bottom: 1px; }
.sg-value { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* แถวที่ถูกตัดออก — §3 ห้ามทิ้งแถวเงียบ ๆ ต้องมีที่ให้แสดงเสมอ */
.blk-excluded {
  margin: 6px 0; padding: 7px 10px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-cap); color: var(--text-2);
}

/* ---------------------------------------------------------------------------
   ฟิลด์ (พาเนลพารามิเตอร์ — เรนเดอร์ inline ไม่ใช่ modal)
   --------------------------------------------------------------------------- */
.fld { margin-bottom: 11px; }
.fld:last-child { margin-bottom: 2px; }
.fld-label {
  display: flex; align-items: baseline; gap: 5px;
  font-size: var(--fs-label); font-weight: 500; color: var(--text); margin-bottom: 4px;
}
.fld-label .req { color: var(--danger); font-weight: 400; }
.fld-hint { font-size: var(--fs-cap); color: var(--text-3); margin-top: 3px; }

.fld input[type='text'],
.fld input[type='number'],
.fld select,
.fld textarea {
  width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 5px 8px;
  font-size: var(--fs-label);
  background: var(--surface); color: var(--text);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--primary); box-shadow: var(--focus-ring);
}
.fld input.fld-num { font-variant-numeric: tabular-nums; }
.fld input.invalid, .fld select.invalid, .col-list.invalid { border-color: var(--danger); }
.fld-err { color: var(--danger); font-size: var(--fs-cap); margin-top: 3px; }
.fld.is-disabled { opacity: 0.42; pointer-events: none; }

.fld-check, .fld-radio-opt {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-label); cursor: pointer;
  padding: 2px 0;
}
.fld-check input, .fld-radio-opt input { accent-color: var(--primary); flex: none; }

.fld-group {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 9px 11px 3px; margin-bottom: 11px;
}
.fld-group > legend { font-size: var(--fs-cap); font-weight: 600; color: var(--text-2); padding: 0 4px; }
.fld-row { display: flex; gap: 10px; }
.fld-row > .fld { flex: 1; min-width: 0; }

/* number + slider: ลากแล้วกราฟขยับทันที — เหตุผลหลักที่พาเนลนี้ไม่ใช่ modal */
.fld-slider { display: flex; align-items: center; gap: 9px; }
.fld-slider input[type='range'] { flex: 1; min-width: 0; accent-color: var(--primary); }
.fld-slider .fld-num { width: 68px; flex: none; text-align: end; }

/* ตัวเลือกคอลัมน์แบบ inline — แทน two-listbox picker ของแอปแม่
   เหตุผล: ในพาเนลข้างกราฟไม่มีที่พอสำหรับสองกล่อง และการ "ย้ายไปย้ายมา" เป็นสำนวน
   ของโปรแกรมเดสก์ท็อป ไม่ใช่ของเว็บที่ต้องกดด้วยนิ้วบนแท็บเล็ต */
.col-list {
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface);
  max-height: 190px; overflow-y: auto;
}
.col-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  font-size: var(--fs-label);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}
.col-item:last-child { border-bottom: 0; }
.col-item:hover { background: var(--surface-2); }
.col-item.is-sel { background: var(--primary-soft); }
.col-item input { accent-color: var(--primary); flex: none; }
.col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-tag {
  flex: none; width: 18px; height: 18px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.col-tag.is-num  { background: var(--primary-soft); color: var(--primary); }
.col-tag.is-text { background: var(--surface-3); color: var(--text-2); }
.col-tag.is-date { background: var(--warn-soft); color: var(--warn); }
.col-unit { font-size: var(--fs-num-xs); color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }
.col-empty { padding: 9px; font-size: var(--fs-cap); color: var(--text-3); }

/* ---------------------------------------------------------------------------
   สถานะว่าง
   --------------------------------------------------------------------------- */
.empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px 22px; text-align: center;
}
.empty-ic { color: var(--text-3); }
.empty-ic svg { width: 34px; height: 34px; }
.empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.empty-body { font-size: var(--fs-body); color: var(--text-2); max-width: 44ch; line-height: var(--lh-body); }
.empty-sm { padding: 18px 14px; gap: 7px; }
.empty-sm .empty-ic svg { width: 24px; height: 24px; }
.empty-sm .empty-title { font-size: var(--fs-body); }
.empty-sm .empty-body { font-size: var(--fs-cap); }

/* ปุ่มทางเข้าข้อมูลในสถานะว่าง — สถานะว่างที่บอกปัญหาแต่ไม่มีทางออกให้กด
   ทำให้ผู้ใช้ต้องไปไล่หาเองบนแถบบน */
.empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.empty-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.fld-hint-act { margin-left: 6px; padding: 1px 6px; height: auto; font-size: inherit; vertical-align: -1px; }
.fld-hint-act svg { width: 12px; height: 12px; }

/* ---------------------------------------------------------------------------
   banner (แถบแจ้งเตือนเต็มความกว้าง)
   --------------------------------------------------------------------------- */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  font-size: var(--fs-cap);
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 1px solid var(--warn-line);
  flex: none;
}
.banner-msg { flex: 1; min-width: 0; }
.banner-ic { flex: none; display: inline-flex; }
.banner-ic svg { width: 15px; height: 15px; }
.banner code { font-family: var(--mono); font-size: var(--fs-num-xs); }

/* ---------------------------------------------------------------------------
   toast
   --------------------------------------------------------------------------- */
.toast-host {
  position: fixed; inset-block-end: 16px; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  z-index: var(--z-toast); pointer-events: none;
}
.toast {
  padding: 7px 14px;
  font-size: var(--fs-body);
  background: var(--text); color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  animation: toast-in var(--t-slow) ease;
}
.toast.is-bad { background: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   ตัวบอกว่ากำลังคำนวณ — จุดเล็ก ๆ ไม่ใช่ spinner เต็มจอ เพราะการคำนวณควรจบใน ~100ms
   --------------------------------------------------------------------------- */
.busy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); flex: none;
  animation: busy-pulse 900ms ease-in-out infinite;
}
@keyframes busy-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* เส้นคั่นแนวตั้งใน toolbar */
.v-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; flex: none; }

/* ซ่อนแต่ยังอ่านด้วย screen reader ได้ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   เส้นคั่นในเมนู + แผงซ้อน (modal)
   แผงซ้อนใช้ที่เดียวตอนนี้คือ "วางข้อมูลจาก Excel" จึงทำเท่าที่จำเป็นจริง
   ยึดกติกา §9: ขอบ hairline เป็นโครงสร้าง เงาแบน มุมแน่น ไม่มี frosted glass
   --------------------------------------------------------------------------- */
.pop-sep {
  height: 1px;
  margin: var(--sp-2, 6px) calc(var(--sp-3, 8px) * -1);
  background: var(--border);
}

.sheet-back {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7, 18px);
  background: rgba(17, 20, 24, 0.28);
}

.sheet {
  width: min(660px, 100%);
  max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 10px);
  box-shadow: 0 8px 28px rgba(17, 20, 24, 0.14);
  animation: sheet-in 140ms ease;
}

@keyframes sheet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

.sheet-head {
  display: flex; align-items: center; gap: var(--sp-4, 10px);
  padding: var(--sp-5, 12px) var(--sp-6, 14px);
  border-bottom: 1px solid var(--border);
}
.sheet-title { font-size: var(--fs-xl, 15px); font-weight: 600; }
.sheet-x {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-md, 6px);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.sheet-x:hover { background: var(--surface-2); color: var(--text); }
.sheet-x svg { width: 15px; height: 15px; }

.sheet-body {
  display: flex; flex-direction: column; gap: var(--sp-4, 10px);
  padding: var(--sp-6, 14px);
  overflow: auto;
}
.sheet-hint { font-size: var(--fs-cap, 12px); color: var(--text-2); line-height: var(--lh-body); }
.sheet-ta {
  width: 100%; resize: vertical;
  padding: var(--sp-4, 10px);
  font-family: var(--mono); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg, 8px);
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.sheet-ta:focus { outline: 2px solid var(--primary); outline-offset: -1px; background: var(--surface); }
.sheet-foot { display: flex; justify-content: flex-end; gap: var(--sp-3, 8px); }

/* ---------------------------------------------------------------------------
   คู่มือการใช้งาน + แผงเกี่ยวกับ
   สองคอลัมน์: สารบัญคงที่ · เนื้อหาเลื่อนเอง · จอแคบซ้อนเป็นแนวตั้ง
   ยึดกติกา §9: ขอบ hairline เป็นโครงสร้าง ไม่พึ่งเงา · badge/ปุ่มมุมแน่น · ไม่มี frosted glass
   --------------------------------------------------------------------------- */
.sheet-lg { width: min(1080px, 100%); max-height: min(88vh, 900px); }
.man-body { padding: 0; overflow: hidden; }

.man-layout { display: grid; grid-template-columns: 248px 1fr; min-height: 0; flex: 1; }

/* ---- สารบัญ ---- */
.man-side {
  display: flex; flex-direction: column; gap: var(--sp-3, 8px);
  padding: var(--sp-5, 12px);
  border-inline-end: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden; min-height: 0;
}
.man-search {
  width: 100%; padding: 7px 9px;
  font: inherit; font-size: var(--fs-body); color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md, 6px);
}
.man-search:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.man-index { overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.man-group {
  margin-top: var(--sp-4, 10px); padding: 0 2px 4px;
  font-size: var(--fs-kicker, 11px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.man-group:first-child { margin-top: 0; }
.man-item {
  display: block; width: 100%; text-align: start;
  padding: 6px 9px; font: inherit; font-size: var(--fs-body);
  color: var(--text-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-md, 6px);
  cursor: pointer;
}
.man-item:hover { background: var(--surface); color: var(--text); }
.man-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -1px; }
.man-item.is-on {
  background: var(--surface); color: var(--primary);
  font-weight: 500; border-color: var(--border);
}
.man-item.is-empty { color: var(--text-3); cursor: default; opacity: .55; }

/* ---- เนื้อหา ---- */
.man-content { overflow: auto; min-height: 0; padding: var(--sp-6, 14px) var(--sp-7, 18px) var(--sp-8, 24px); }
.man-content > * { max-width: 70ch; }        /* บรรทัดยาวเกิน ~70 ตัวอักษรอ่านเหนื่อย */

.man-head { padding-bottom: var(--sp-5, 12px); border-bottom: 1px solid var(--border); }
.man-title { font-size: var(--fs-2xl, 18px); font-weight: 600; line-height: var(--lh-tight); }
.man-tagline { margin-top: 4px; font-size: var(--fs-lg, 14px); color: var(--text-2); line-height: var(--lh-body); }
.man-open { margin-top: var(--sp-4, 10px); }

.man-sec { margin-top: var(--sp-7, 18px); }
.man-sec-h {
  margin-bottom: var(--sp-4, 10px);
  font-size: var(--fs-kicker, 11px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.man-sec.is-warn .man-sec-h { color: var(--warn, #c2680a); }
.man-sec.is-bad  .man-sec-h { color: var(--bad, #c0392b); }

.man-sub { margin-top: var(--sp-5, 12px); font-size: var(--fs-lg, 14px); font-weight: 600; }
.man-sub:first-of-type { margin-top: 0; }
.man-p { margin-top: 5px; line-height: 1.6; color: var(--text-2); }

.man-list { margin: 0; padding-inline-start: 1.15em; }
.man-list li { margin-top: 5px; line-height: 1.6; color: var(--text-2); }
.man-sec.is-warn .man-list li::marker { color: var(--warn, #c2680a); }

.man-steps { margin: 0; padding-inline-start: 1.35em; }
.man-steps li { margin-top: var(--sp-4, 10px); }
.man-steps li::marker { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 600; }
.man-step-do { line-height: 1.55; }
.man-step-why { margin-top: 2px; font-size: var(--fs-cap, 12px); color: var(--text-3); line-height: 1.5; }

.man-pairs { margin: 0; display: grid; grid-template-columns: minmax(9em, 15em) 1fr; gap: 4px var(--sp-5, 12px); }
.man-pairs dt { font-weight: 500; line-height: 1.5; }
.man-pairs dd { margin: 0; color: var(--text-2); line-height: 1.55; }
.man-sec.is-bad .man-pairs dt { color: var(--bad, #c0392b); }

.man-formulas { display: flex; flex-direction: column; gap: var(--sp-4, 10px); }
.man-formula { padding: var(--sp-4, 10px); border: 1px solid var(--border); border-radius: var(--r-lg, 8px); background: var(--surface-2); }
.man-formula-name { font-size: var(--fs-cap, 12px); font-weight: 600; color: var(--text-3); }
.man-formula-expr {
  margin-top: 3px; padding: 4px 0;
  font-family: var(--mono); font-size: var(--fs-lg, 14px);
  font-variant-numeric: tabular-nums;
  overflow-x: auto; white-space: nowrap;      /* สูตรยาวเลื่อนในกรอบตัวเอง ไม่ดันทั้งหน้า */
}
.man-formula-note { margin-top: 3px; font-size: var(--fs-cap, 12px); color: var(--text-2); line-height: 1.5; }

.man-also-row { display: flex; flex-wrap: wrap; gap: var(--sp-3, 8px); }
.man-also-btn { font-size: var(--fs-body); }
.man-empty { padding: var(--sp-6, 14px) 0; color: var(--text-3); }

/* ---- แผงเกี่ยวกับ ---- */
.about-lead { font-size: var(--fs-lg, 14px); color: var(--text); line-height: var(--lh-body); }
.about-h {
  margin-top: var(--sp-5, 12px);
  font-size: var(--fs-kicker, 11px); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
.about-meta {
  margin-top: var(--sp-4, 10px); padding-top: var(--sp-4, 10px);
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: minmax(6em, auto) 1fr; gap: 4px var(--sp-5, 12px);
  font-size: var(--fs-cap, 12px);
}
.about-meta dt { color: var(--text-3); }
.about-meta dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---- จอแคบ: สารบัญขึ้นบน เนื้อหาอยู่ล่าง ---- */
@media (max-width: 720px) {
  .man-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .man-side { border-inline-end: 0; border-bottom: 1px solid var(--border); max-height: 38vh; }
  .man-content { padding: var(--sp-5, 12px); }
  .man-pairs { grid-template-columns: 1fr; gap: 2px; }
  .man-pairs dd { margin-bottom: var(--sp-3, 8px); }
}