/* ============================================================
   ระบบข้อมูลการอบรมพนักงาน — ชุดงานออกแบบ

   คอนเซ็ปต์: แบบฟอร์มกระดาษ หมึกน้ำเงิน
   — กระดาษไม่ลอย จึงไม่มีเงา ไม่มีการ์ดซ้อนการ์ด
   — คั่นด้วยเส้นบาง ไม่ใช่กล่อง
   — สีมีหน้าที่: น้ำเงิน=สิ่งที่กดได้ แดงอิฐ=เกินกำหนด นอกนั้นดำบนกระดาษ
   — ตัวหนังสือใหญ่ เพราะคนใช้คือช่างโรงงานอายุ 40+
   — หน้านี้ต้องพิมพ์ออกมาเข้าแฟ้ม ISO/GMP ได้สวย

   เรื่องตัวอักษร: ทดลองเซริฟไทย (Trirong) แล้วตัดทิ้ง — ตัวไทย
   ต่างจาก sans น้อยมากจนคนอ่านไม่รู้สึก ไม่คุ้มกับน้ำหนักอีกหนึ่งไฟล์
   ลำดับชั้นมาจากขนาด/น้ำหนัก/ระยะ/เส้น ส่วน mono ใช้กับ
   เลขที่เอกสาร/ปี/รหัส เพื่อให้กลิ่นเอกสาร

   ⚠ ลำดับ family ใน URL ข้างบนต้องเรียงตามตัวอักษร ไม่งั้น Google Fonts ไม่ส่งมา
   ============================================================ */

:root{
  /* กระดาษ — ขาวอมอุ่นนิดๆ ไม่ใช่ขาวจอ */
  --paper:      oklch(0.991 0.003 85);
  --paper-2:    oklch(0.972 0.005 85);
  --paper-3:    oklch(0.951 0.007 85);

  /* หมึก */
  --ink:        oklch(0.255 0.030 262);
  --ink-2:      oklch(0.470 0.024 262);
  --ink-3:      oklch(0.620 0.018 262);

  /* เส้น */
  --rule:       oklch(0.878 0.010 262);
  --rule-soft:  oklch(0.930 0.007 262);
  --rule-ink:   oklch(0.400 0.055 262);

  /* น้ำเงิน = การกระทำ */
  --blue:       oklch(0.435 0.140 262);
  --blue-deep:  oklch(0.290 0.090 262);
  --blue-wash:  oklch(0.960 0.022 262);

  /* สถานะ */
  --pass:       oklch(0.455 0.075 155);
  --due:        oklch(0.520 0.105 62);
  --due-wash:   oklch(0.965 0.032 75);
  --over:       oklch(0.475 0.150 28);
  --over-wash:  oklch(0.962 0.030 28);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper-3);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

a{color:var(--blue);text-decoration:none;border-bottom:1px solid oklch(0.435 0.14 262 / 0.3)}
a:hover{color:var(--blue-deep);border-bottom-color:currentColor}

.mono{font-family:'IBM Plex Mono', ui-monospace, monospace}
.num{font-variant-numeric:tabular-nums}

/* ---------- ตัวช่วยจัดเลย์เอาต์ (นิยามเองทั้งหมด) ---------- */
.fx{display:flex}
.col{flex-direction:column}
.ac{align-items:center}
.ab{align-items:baseline}
.jc{justify-content:center}
.jb{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap4{gap:4px}   .gap6{gap:6px}   .gap8{gap:8px}   .gap10{gap:10px}
.gap12{gap:12px} .gap14{gap:14px} .gap16{gap:16px} .gap20{gap:20px}
.gap24{gap:24px} .gap28{gap:28px} .gap32{gap:32px} .gap40{gap:40px}

/* ---------- โครงหน้าจริง ---------- */
.screen{
  min-height:100vh;
  background:var(--paper);
  display:flex;flex-direction:column;
}
.screen.narrow{max-width:560px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}

/* ---------- หัวกระดาษ ---------- */
.masthead{
  flex:none;background:var(--paper);
  border-top:3px solid var(--blue-deep);
  border-bottom:1px solid var(--rule);
  padding:13px 34px;
  display:flex;align-items:center;justify-content:space-between;
}
.masthead .org{display:flex;align-items:baseline;gap:12px}
.masthead .org b{font-size:15px;font-weight:600;letter-spacing:-0.005em}
.masthead .org span{font-size:12.5px;color:var(--ink-3)}
.masthead .me{display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--ink-2)}
.masthead .me b{font-weight:600;color:var(--ink)}
.masthead .me em{font-style:normal;color:var(--ink-3)}
.masthead .acts{display:flex;gap:10px}

/* แท็บเป็นช่องมีกรอบ กดง่ายเหมือนปุ่ม (ลูกค้าขอ) ช่องที่เปิดอยู่ทึบสีน้ำเงิน */
.tabs{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px 34px;border-bottom:1px solid var(--rule);background:var(--paper)}
.tabs i{
  font-style:normal;padding:8px 16px;font-size:14.5px;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;
}
.tabs i.on{color:var(--paper);background:var(--blue);border-color:var(--blue);font-weight:600}

.sheet{flex:1;padding:28px 34px 40px;display:flex;flex-direction:column;gap:24px;background:var(--paper)}
@media (max-width:640px){
  .masthead,.tabs{padding-left:18px;padding-right:18px}
  .sheet{padding:20px 18px 32px;gap:18px}
  .tabs{gap:6px;padding-top:10px;padding-bottom:10px}
  .tabs i{padding:7px 12px;font-size:14px}
  .title{font-size:25px}
}
/* ตารางกว้างต้องเลื่อนในกรอบตัวเอง ไม่ใช่ดันทั้งหน้า */
.scrollx{overflow-x:auto}

/* ---------- ตัวหนังสือ ----------
   ไทยไม่มีเซริฟที่ใช้ได้จริง — ใช้ขนาด+น้ำหนัก+tracking สร้างลำดับแทน */
.title{font-size:31px;font-weight:600;line-height:1.28;margin:0;letter-spacing:-0.018em}
.title-sm{font-size:21px;font-weight:600;line-height:1.35;margin:0;letter-spacing:-0.012em}
.deck{font-size:14.5px;color:var(--ink-2);margin:0}

/* หัวกำกับส่วนแบบฟอร์มราชการ — mono กระจายตัว คู่เส้นคั่น */
.section{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:7px;border-bottom:1px solid var(--rule);margin:0;
}

/* ---------- ตารางทะเบียน ---------- */
.ledger{width:100%;border-collapse:collapse;font-size:14.5px}
.ledger th{
  text-align:left;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;
  color:var(--ink-3);
  padding:0 14px 8px;border-bottom:1.5px solid var(--rule-ink);white-space:nowrap;
}
.ledger td{padding:13px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.ledger tr:last-child td{border-bottom:none}
.ledger .c{text-align:center}
.ledger td.num,.ledger td.c,.nm{white-space:nowrap}
.ledger .r{text-align:right}
.ledger tr.flag td{background:var(--due-wash)}
.ledger tr.flag-over td{background:var(--over-wash)}

.ledger tr.year td{
  padding:16px 14px 6px;border-bottom:none;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.08em;color:var(--ink-3);
}
.ledger tr.year:first-child td{padding-top:8px}

/* ---------- สถานะ — ตัวหนังสือ ไม่ใช่เม็ดสี ---------- */
.pass{color:var(--pass);font-weight:600}
.pass small{font-weight:400;color:var(--ink-3);font-size:13px;margin-left:5px}
.due{color:var(--due);font-weight:600}
.over{color:var(--over);font-weight:600}
.none{color:var(--ink-3)}

.stamp{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:3px 10px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;
}
.stamp.due{background:var(--due-wash)}
.stamp.over{background:var(--over-wash)}
.stamp.ok{color:var(--pass);background:transparent}
.stamp.quiet{color:var(--ink-3);border-color:var(--rule);font-weight:400}

/* ---------- ปุ่ม ---------- */
.btn{
  height:44px;padding:0 18px;border:1px solid transparent;border-radius:3px;
  font-family:inherit;font-size:14.5px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;white-space:nowrap;
}
.btn.go{background:var(--blue);color:var(--paper)}
.btn.go:hover{background:var(--blue-deep)}
.btn.line{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.line:hover{border-color:var(--ink-3)}
/* a:hover ใส่เส้นใต้ให้ลิงก์ทุกตัว ปุ่มที่เป็น <a> ไม่เอา (ปุ่มทึบจะมีเส้นขาวโผล่ที่ขอบล่าง) */
a.btn:hover{border-bottom-color:transparent}
.btn.big{height:52px;font-size:16.5px;padding:0 26px}
.btn.sm{height:32px;font-size:13.5px;padding:0 13px}
.btn.block{width:100%}

/* ---------- ช่องกรอก ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.wide{grid-column:span 2}
@media (max-width:640px){ .wide{grid-column:1 / -1} }
.field > span{font-size:13.5px;color:var(--ink-2)}
.box{
  height:44px;border:1px solid var(--rule);border-radius:3px;padding:0 13px;
  font-family:inherit;font-size:15px;background:var(--paper);color:var(--ink);width:100%;
  display:flex;align-items:center;
}
.box.dim{color:var(--ink-3)}
.box.big{height:52px;font-size:16.5px}
.box.area{height:auto;padding:12px 13px;line-height:1.65;display:block}
.box.pick{justify-content:space-between}
.caret{color:var(--ink-3);font-size:11px}

.tick{width:19px;height:19px;border:1.5px solid var(--ink-3);border-radius:2px;background:var(--paper);flex:none;cursor:pointer}
.tick.on{background:var(--blue);border-color:var(--blue);position:relative}
.tick.on::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(43deg)}
.dot{width:19px;height:19px;border:1.5px solid var(--ink-3);border-radius:50%;background:var(--paper);flex:none;cursor:pointer}
.dot.on{border:6px solid var(--blue)}

/* ---------- แถบสัดส่วน ---------- */
.meter{height:8px;background:var(--paper-3);overflow:hidden;flex:none}
.meter > i{display:block;height:100%;background:var(--blue)}
.meter.thin{height:5px}

/* ---------- แถบแจ้งเตือน ----------
   เดิมเป็นกล่องพื้นครีมมีแถบสีคาดซ้าย ซึ่งเป็นหน้าตาที่เครื่องมือ AI ชอบทำ
   กระดาษจริงไม่ระบายพื้น มันคั่นด้วยเส้นแล้วให้ตัวเลขพูดแทน
   สีเหลือง/แดงเหลือไว้ที่ตัวเลขกับคำสถานะเท่านั้น */
.call{
  display:flex;align-items:baseline;gap:20px;
  padding:15px 2px;background:transparent;
  border-top:1.5px solid var(--rule-ink);
  border-bottom:1px solid var(--rule);
}
.call + .call{border-top:none}
.call .n{
  font-size:31px;font-weight:600;line-height:1;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;flex:none;
}
.call .n small{font-size:14px;font-weight:400;margin-left:5px;color:var(--ink-3)}
.call .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.call .body b{font-size:16px;font-weight:600}
.call .body span{font-size:13.5px;color:var(--ink-2)}
.call .side{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.02em;
  color:var(--ink-3);text-align:right;flex:none;
}
.call .btn{align-self:center}
.call.due .n{color:var(--due)}
.call.over .n{color:var(--over)}
.call.info .n{color:var(--blue)}

/* ---------- อื่นๆ ---------- */
.rule{height:1px;background:var(--rule);border:none;margin:0}
.rule.ink{height:1.5px;background:var(--rule-ink)}
.pair{display:flex;flex-direction:column;gap:2px}
.pair > span{font-size:12.5px;color:var(--ink-3)}
.pair > b{font-size:15px;font-weight:500}
.slot{
  background:repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--paper) 6px 12px);
  border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-3);text-align:center;
}
.foot{
  flex:none;padding:11px 34px;border-top:1px solid var(--rule);background:var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);
}

/* ---------- ช่องกรอกจริง (input/select/textarea ไม่ใช่ div) ---------- */
input.box, select.box, textarea.box{display:block;appearance:none;outline:none}
input.box:focus, select.box:focus, textarea.box:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
select.box{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
textarea.box{min-height:96px;resize:vertical}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
button{font-family:inherit}
label.pickrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
label.pickrow:last-child{border-bottom:none}
label.pickrow input{position:absolute;opacity:0;pointer-events:none}
input:focus-visible + .tick,
input:focus-visible + .dot{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- แถบข้อความระบบ ---------- */
.flash{border-left:3px solid var(--blue);background:var(--blue-wash);padding:13px 18px;font-size:14.5px}
.flash.bad{border-color:var(--over);background:var(--over-wash)}
.flash.good{border-color:var(--pass);background:transparent;border:1px solid var(--rule);border-left:3px solid var(--pass)}

/* ---------- หน้าว่าง ---------- */
.empty{padding:42px 0;text-align:center;color:var(--ink-3);font-size:14.5px}

/* ---------- แบบประเมินบนมือถือ: หนึ่งคำถามหนึ่งหน้า ---------- */
.qwrap{flex:1;display:flex;flex-direction:column;gap:22px;justify-content:center}
.qtext{font-size:22px;font-weight:600;line-height:1.45;letter-spacing:-0.012em;margin:0}
.qnum{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.scale{display:flex;gap:8px}
.scale label{flex:1}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale span{display:flex;align-items:center;justify-content:center;height:56px;border:1px solid var(--rule);border-radius:3px;
  font-size:19px;font-variant-numeric:tabular-nums;cursor:pointer;background:var(--paper)}
.scale input:checked + span{background:var(--blue);border-color:var(--blue);color:var(--paper);font-weight:600}
.scale input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- พิมพ์ลงกระดาษเข้าแฟ้ม ISO ---------- */
@media print{
  .tabs,.btn,.noprint{display:none !important}
  body{background:#fff}
  .screen{min-height:0;border:none}
  .ledger{font-size:12px}
  a{border-bottom:none;color:inherit}
}

/* ---------- ภาษาไทยไม่มีช่องว่างระหว่างคำ ----------
   ข้อความไทยยาวๆ ทำให้ min-content ของ flex item เท่ากับความยาวทั้งประโยค
   ถ้าไม่สั่ง min-width:0 หน้าจอมือถือจะกว้างเกินจอ */
.masthead .org{min-width:0;flex-wrap:wrap}
.masthead .org b{min-width:0;overflow-wrap:anywhere}
.masthead .me{min-width:0;flex-wrap:wrap;justify-content:flex-end}
.qtext,.title,.title-sm,.deck{overflow-wrap:anywhere}
.scale label{min-width:0}
.call > div{min-width:0}
.screen{overflow-x:hidden}

/* ---------- ลิงก์ในตาราง ----------
   ชื่อคนในทะเบียนเป็นลิงก์ แต่ขีดเส้นใต้ทุกบรรทัดทำให้ตารางลายพร้อย
   ใช้สีน้ำเงินบอกว่ากดได้พอ เส้นใต้โผล่ตอนชี้ */
.ledger a:not(.btn):not(.tool){border-bottom:none}
.ledger a:not(.btn):not(.tool):hover{border-bottom:1px solid currentColor}
/* ปุ่มที่เป็น <a> ต้องไม่โดนกฎเส้นใต้ลิงก์ เคยทำให้ขอบล่างปุ่มในตารางหาย */

/* ---------- แท็บ ----------
   ลิงก์ทั้งเว็บมีเส้นใต้ แท็บเป็นช่องแล้วไม่ต้องมี */
.tabs a{border-bottom:none}
.tabs a:hover{border-bottom:none}
.tabs a:hover i:not(.on){color:var(--ink);border-color:var(--ink-3)}
.tabs i{transition:color .12s,border-color .12s}

/* ---------- รายการกติกา — เลขข้อแบบเอกสาร ไม่ใช่จุดกลม ---------- */
.rules{margin:0;padding:0;list-style:none;counter-reset:r;display:flex;flex-direction:column}
.rules li{
  counter-increment:r;position:relative;
  padding:11px 0 11px 38px;font-size:14.5px;
  border-bottom:1px solid var(--rule-soft);
}
.rules li:last-child{border-bottom:none}
.rules li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;left:0;top:12px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--ink-3);
}

/* ---------- แถวที่ต้องสนใจ ----------
   เดิมระบายพื้นทั้งแถวเป็นสีครีม กลืนไปกับกล่องแจ้งเตือนแบบเก่า
   ทะเบียนกระดาษเขาทำเครื่องหมายไว้ริมแถว ไม่ได้ระบายทั้งบรรทัด */
.ledger tr.flag td{background:transparent}
.ledger tr.flag-over td{background:transparent}
.ledger tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--due)}
.ledger tr.flag-over td:first-child{box-shadow:inset 3px 0 0 var(--over)}

/* ---------- แท็บ (ต่อ) ----------
   i เป็น inline ทำให้ padding แนวตั้งไม่นับ กรอบช่องจะเตี้ยทับกัน ต้อง inline-block */
.tabs i{display:inline-block}
.tabs a{display:flex}
.tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* ---------- ช่องข้อมูลมีป้ายกำกับ ----------
   ใบงานจริงเขียนหัวข้อกำกับทุกช่อง ไม่ได้เอาค่ามาต่อกันเป็นบรรทัดเดียว
   คนอ่านหาค่าที่ต้องการเจอทันที ไม่ต้องไล่อ่านทั้งแถบ */
.specs{
  margin:0;display:grid;gap:0 32px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1.5px solid var(--rule-ink);
}
.specs > div{padding:12px 0;border-bottom:1px solid var(--rule-soft);min-width:0}
.specs dt{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:3px;
}
.specs dd{margin:0;font-size:14.5px;overflow-wrap:anywhere}

/* ============================================================
   แก้เรื่องฟอนต์กับป้ายกำกับภาษาไทย

   IBM Plex Mono ไม่มีตัวอักษรไทย พอเอามาใช้กับหัวตาราง/หัวข้อที่เป็นไทย
   เบราว์เซอร์จะไปหยิบฟอนต์ monospace อะไรก็ได้ของเครื่องมาแทน ทำให้
   หน้าเดียวกันมีตัวไทยสองแบบปนกัน

   หนักกว่านั้นคือ letter-spacing — ตัวไทยวางสระกับวรรณยุกต์ซ้อนบนล่าง
   การถ่างช่องไฟจะดันมันออกจากพยัญชนะเจ้าของ "ชื่อ" กลายเป็น "ช ื อ"
   ตัวเลขไทยที่ผ่านมาจึงดูเหมือนฟอนต์เสีย ทั้งที่เป็นค่า tracking ล้วนๆ

   กติกาใหม่: mono ใช้กับเลขและอักษรโรมันเท่านั้น (เลขที่เอกสาร รหัส วันที่)
   ป้ายกำกับที่เป็นไทยใช้ Sans Thai ตัวเล็ก น้ำหนักหนา ไม่ถ่างช่องไฟ
   ============================================================ */

.ledger th{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:13px;font-weight:600;
  letter-spacing:normal;text-transform:none;
  color:var(--ink-3);
}

.section{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:13px;font-weight:600;
  letter-spacing:normal;text-transform:none;
  color:var(--ink-3);
}

.ledger tr.year td{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:12.5px;font-weight:600;letter-spacing:normal;
  font-variant-numeric:tabular-nums;
}

.specs dt{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:12.5px;font-weight:600;
  letter-spacing:normal;text-transform:none;
}

.qnum{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:13px;font-weight:600;letter-spacing:normal;
  font-variant-numeric:tabular-nums;
}

.call .side{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
  font-size:12.5px;letter-spacing:normal;
}

.slot{letter-spacing:normal}

/* ---------- เครื่องมือประจำแถว ----------
   เดิมเป็นลิงก์สีน้ำเงินคำเดียวซ้ำทุกแถว 11 บรรทัด กลายเป็นแถบสีพาดขวาทั้งตาราง
   ดึงสายตาไปจากข้อมูลที่ควรอ่านจริง

   ปุ่มจึงเงียบไว้ก่อน เป็นสีหมึกจาง ๆ ติดสีเมื่อชี้เท่านั้น
   สีแดงอิฐสงวนไว้ให้ปุ่มที่เปลี่ยนสถานะคน และขึ้นตอนชี้เท่านั้น */
.tools{display:flex;gap:4px;justify-content:flex-end}
.tool{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:13px;line-height:1;
  padding:6px 9px;border:1px solid var(--rule);border-radius:3px;
  background:transparent;color:var(--ink-3);cursor:pointer;white-space:nowrap;
}
.tool:hover{color:var(--blue);border-color:var(--ink-3);background:var(--paper)}
.tool.warn:hover{color:var(--over);border-color:oklch(0.475 0.15 28 / 0.35)}
.tool:focus-visible,.tool:focus-within{outline:2px solid var(--blue);outline-offset:1px}
/* ป้ายซ่อนกับช่องเลือกไฟล์ต้องอยู่ในปุ่ม ไม่งั้นลอยไปขอบหน้าแล้วดันจอมือถือให้เลื่อนข้างได้ */
.tool{position:relative}
.tool svg{flex:none}
a.tool{border-bottom:1px solid var(--rule)}   /* ลิงก์ทั่วเว็บมีเส้นใต้สีฟ้า ปุ่มนี้ใช้กรอบเทาเท่ากันทุกด้าน */
a.tool:hover{border-bottom-color:var(--ink-3)}
@media (max-width:900px){
  .tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tool{padding:7px}
}

/* ---------- การกระทำที่ต้องยืนยันก่อน ----------
   เปลี่ยนสถานะคนไม่ควรกดพลาดได้ในคลิกเดียว
   ปุ่มจึงอยู่ในกรอบของตัวเอง คู่กับช่องติ๊กที่บังคับกรอก
   ไม่มีกล่องสีแดงตูมตาม เพราะการกระทำนี้ย้อนกลับได้ ไม่ใช่การลบทิ้ง */
.guard{
  border:1px solid var(--rule);border-radius:3px;
  padding:16px 18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  background:var(--paper);
}
.guard-why{margin:0;font-size:13.5px;color:var(--ink-2);max-width:66ch}
.btn.danger{
  background:transparent;border-color:oklch(0.475 0.15 28 / 0.4);color:var(--over);
}
.btn.danger:hover{background:var(--over);border-color:var(--over);color:var(--paper)}
.btn svg{flex:none}

/* ============================================================
   จอมือถือ

   ชื่อแท็บภาษาไทยไม่มีช่องว่างระหว่างคำ พอที่ว่างไม่พอ เบราว์เซอร์
   จะหักคำมั่วเป็นหลายบรรทัด "หน้าของฉัน" กลายเป็น "หน้า/ของ/ฉัน"
   ห้ามตัดคำในช่อง ให้ขึ้นบรรทัดใหม่ทีละช่องแทน
   ============================================================ */
.tabs i{white-space:nowrap}
.tabs a{flex:0 0 auto}

@media (max-width:640px){
  /* หัวกระดาษวางเป็นแถวเดียวไม่พอ แยกบรรทัดชิดซ้ายทั้งคู่ */
  .masthead{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 18px}
  .masthead .org{flex-direction:column;align-items:flex-start;gap:1px}
  .masthead .org b{font-size:14.5px;line-height:1.35}
  .masthead .org span{font-size:12px}
  .masthead .me{
    width:100%;justify-content:flex-start;align-items:baseline;
    gap:10px;font-size:13px;padding-top:6px;border-top:1px solid var(--rule-soft);
  }
  .masthead .acts{width:100%}
  .masthead .acts a{flex:1}
  /* กล่องแจ้งเตือน ปุ่มลงไปอยู่บรรทัดของตัวเอง ไม่บีบชื่อหลักสูตรจนเหลือคำละบรรทัด */
  .call{flex-wrap:wrap;gap:8px 16px}
  .call .body{flex:1 1 60%}
  .call .btn,.call .side{margin-left:auto}


  .foot{padding:10px 18px;font-size:12px;gap:12px}
  .guard{padding:14px}
  .specs{gap:0 20px}
}

@media (max-width:640px){
  /* ตารางกว้างต้องเลื่อนทั้งตาราง ไม่ใช่ให้เบราว์เซอร์บีบคอลัมน์
     จนชื่อคนหักเป็นสามบรรทัด ทะเบียนบุคคลอ่านง่ายกว่าเมื่อหนึ่งคนอยู่หนึ่งบรรทัด */
  /* หนึ่งคนหนึ่งบรรทัดเสมอ ตารางจะกว้างเกินจอก็เลื่อนเอา
     ดีกว่าปล่อยให้ชื่อคนหักเป็นสองสามบรรทัดจนอ่านยาก */
  .scrollx .ledger td,.scrollx .ledger th{white-space:nowrap;padding-left:11px;padding-right:11px}
  .face.sm{width:24px;height:24px}

  /* ปุ่มบนหัวเรื่องเรียงลงบรรทัดใหม่ได้ ไม่ล้นขอบจอ */
  .title + .deck,.deck{max-width:none}
  .btn.sm{height:34px}
}

/* ---------- รูปถ่ายพนักงาน ---------- */
.face{
  width:96px;height:96px;object-fit:cover;border-radius:2px;
  border:1px solid var(--rule);background:var(--paper-2);flex:none;display:block;
}
.face.sm{width:28px;height:28px}
.who{display:inline-flex;align-items:center;gap:9px;min-width:0}
.who a{min-width:0}

/* ---------- แบ่งหน้า ---------- */
.pager{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2);
}
.pager a:not(.btn){border-bottom:none}

/* ── แผนภูมิแท่งแนวตั้ง ────────────────────────────────────────────────
   ลูกค้าขอ "ดูภาพรวมโดยไม่ต้องอ่านรายละเอียด" จึงตัดเหลือ 10 แท่งแรก
   ป้ายชื่อวางใต้แท่งแบบไม่หมุน เพราะหมุนแล้ววรรณยุกต์ไทยหลุดจากพยัญชนะ
   แท่งกับป้ายอยู่ในกล่องเลื่อนเดียวกัน เลื่อนพร้อมกันบนจอแคบ */
.chartbox{overflow-x:auto;padding-bottom:2px}
.chart{display:flex;align-items:flex-end;gap:14px;height:180px;min-width:520px;
       border-bottom:1.5px solid var(--rule-ink)}
.chart .col{flex:1 1 0;min-width:52px;height:100%;display:flex;flex-direction:column;
            justify-content:flex-end;align-items:center;gap:5px}
.chart .col > b{font-size:13px;font-weight:600;color:var(--ink);
                font-variant-numeric:tabular-nums}
.chart .col > i{display:block;width:100%;max-width:58px;min-height:2px;background:var(--blue)}
.chart .col.z > b{color:var(--ink-3)}
.chart .col.z > i{background:var(--paper-3)}
.labels{display:flex;gap:14px;min-width:520px;padding-top:8px}
.labels span{flex:1 1 0;min-width:52px;text-align:center;font-size:11.5px;
             line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
@media print{.chartbox{overflow:visible}}

/* ---------- หน้าดูวิดีโออบรม (/w/{token}) ----------
   กว้างกว่าหน้าแบบประเมิน เพราะวิดีโอต้องใหญ่พอจะอ่านสไลด์ในคลิปได้ */
.screen.watch{max-width:980px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.player{position:relative;aspect-ratio:16/9;background:#111;border-radius:3px;overflow:hidden}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ปุ่มเริ่มของ Drive วางทับกลางวิดีโอ กดแล้วหายไป แล้วค่อยกดเล่นในตัวเล่นของ Drive */
.player #start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgb(0 0 0 / .35)}
dialog#ask{border:1px solid var(--rule);border-radius:4px;padding:28px;width:min(420px,calc(100vw - 32px));color:var(--ink);background:var(--paper)}
dialog#ask::backdrop{background:rgb(15 20 35 / .55)}

/* ---------- เลือกไฟล์ ----------
   ช่อง input จริงซ่อนแบบยังโฟกัสได้ กด Tab แล้ว Space ก็เปิดได้ และเบราว์เซอร์ยังเตือนเมื่อยังไม่เลือกไฟล์ */
.filepick{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer}
.filepick input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.filepick input:focus-visible + .btn{outline:2px solid var(--blue);outline-offset:2px}
.filepick .fname{font-size:14px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}