/* =========================================================================
 * WHATTHIS.COM — "แฟ้มลับ" (THE DOSSIER)
 * -------------------------------------------------------------------------
 * แนวคิดออกแบบ (Design Direction)
 *   เว็บปริศนา = เว็บที่ "มีบางอย่างถูกปิดไว้"
 *   ของเดิมสื่อความลึกลับด้วย glassmorphism เบลอ ๆ + แสงม่วงเรือง ซึ่งเป็นลุคที่ซ้ำมาก
 *   รอบนี้เปลี่ยนไปใช้ภาษาภาพของ "แฟ้มเอกสารลับ" แทน:
 *
 *     - แถบดำปิดข้อความ (redaction bar) ที่ต้องชี้/กดเพื่อเปิดอ่าน  ← SIGNATURE
 *     - เลขแฟ้ม/เลขคดี เป็นโครงสร้างจริงของหน้า (ไม่ใช่เลขประดับ)
 *     - ตราประทับ พิมพ์ดีด เส้นบาง กระดาษถ่ายเอกสาร
 *
 *   ความลึกลับจึงมาจาก "สิ่งที่ถูกปิด" ไม่ใช่จาก "แสงเรืองสีม่วง"
 *
 *   สี  : พื้นมืดสนิท + ตัวอักษรสีกระดูก (bone) + ม่วงจุดเดียวสำหรับ "ปลดล็อกแล้ว"
 *   ห้าม: blur, glow, gradient หลายสี — แฟ้มเอกสารต้องคม ไม่ใช่ฟุ้ง
 *
 * TYPOGRAPHY
 *   Display : Chakra Petch — เหลี่ยมคม มีทั้งไทยและละติน ให้กลิ่นเอกสารราชการ/สายลับ
 *   Data    : Space Mono   — พิมพ์ดีด ใช้กับเลขแฟ้ม เวลา ตราประทับ
 *   Body    : Sarabun      — อ่านยาวสบายตาสำหรับเนื้อความไทย
 *
 * SCOPE: โหลดเฉพาะโมดูล whatthis (body.wht-mystery-mode) เท่านั้น
 * ========================================================================= */

/* =========================================================================
 * 1) DESIGN TOKENS
 * ========================================================================= */
body.wht-mystery-mode {
  /* --- พื้นมืด --- */
  --wh-void:    #0D0E11;   /* พื้นหลังราก — มืดสนิท */
  --wh-panel:   #15171C;   /* พื้นแผงเอกสาร */
  --wh-panel-2: #1D2027;   /* พื้นชั้นที่ 2 */
  --wh-rule:    #2A2E37;   /* เส้นบาง */
  --wh-rule-2:  #3A404B;   /* เส้นบางสว่างขึ้น */

  /* --- ตัวอักษร (ผ่าน WCAG AA ทุกค่าบนพื้น --wh-void) --- */
  --wh-bone:    #E8E3D8;   /* 15.1:1 — ตัวอักษรหลัก สีกระดูก ไม่ใช่ขาวจ้า */
  --wh-t2:      #B8B2A5;   /* ~9:1  — เนื้อความรอง */
  --wh-t3:      #A9A293;   /* 7.6:1 — meta / เลขแฟ้ม */

  /* --- ม่วง "ปลดล็อกแล้ว": ใช้เฉพาะสิ่งที่เพิ่งถูกเปิดเผย --- */
  --wh-key:     #C084FC;   /* 7.3:1 บนพื้นมืด */
  --wh-key-d:   #7E3FB8;   /* ม่วงเข้ม — ขอบ/พื้นอ่อน */
  --wh-key-s:   rgba(192,132,252,.10);

  /* --- แดงตราประทับ: ใช้ที่เดียวคือคำว่า CLASSIFIED --- */
  --wh-stamp:   #D9564B;

  /* --- แถบปิดข้อความ --- */
  --wh-redact:  #0A0B0D;

  --wh-display: "Chakra Petch", "Sarabun", Tahoma, sans-serif;
  --wh-body:    "Sarabun", "Chakra Petch", Tahoma, sans-serif;
  --wh-mono:    "Space Mono", "SFMono-Regular", Consolas, monospace;

  --wh-maxw: 1240px;
  --wh-r: 2px;
}

/* =========================================================================
 * 2) พื้นฐานหน้า + chrome ของ AdminLTE
 * ========================================================================= */
body.wht-mystery-mode {
  background: var(--wh-void);
  color: var(--wh-bone);
  font-family: var(--wh-body);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body.wht-mystery-mode .content-wrapper { background: var(--wh-void) !important; }
body.wht-mystery-mode .content-header   { display: none !important; }
body.wht-mystery-mode .content          { padding: 0 !important; }
body.wht-mystery-mode #content          { padding: 0; }

.wht-page { max-width: var(--wh-maxw); margin: 0 auto; padding: 0 24px 64px; }

body.wht-mystery-mode .main-header .navbar,
body.wht-mystery-mode .main-header .logo {
  background-color: #0A0B0E !important;
  border-bottom: 1px solid var(--wh-rule);
  box-shadow: none;
}
body.wht-mystery-mode .main-header .logo {
  font-family: var(--wh-mono);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--wh-bone) !important;
}
body.wht-mystery-mode .main-header .logo:hover { background-color: var(--wh-panel) !important; }
body.wht-mystery-mode .main-header .navbar .nav > li > a:hover,
body.wht-mystery-mode .main-header .navbar .nav > li > a:focus,
body.wht-mystery-mode .main-header .navbar .sidebar-toggle:hover { background-color: var(--wh-panel) !important; }
body.wht-mystery-mode .main-sidebar,
body.wht-mystery-mode .left-side { background-color: #0A0B0E !important; }
body.wht-mystery-mode .sidebar-menu > li > a {
  font-family: var(--wh-body);
  font-size: 14.5px;
  border-left: 3px solid transparent;
  transition: background-color .16s ease, border-color .16s ease;
}
body.wht-mystery-mode .sidebar-menu > li.active > a,
body.wht-mystery-mode .sidebar-menu > li:hover > a {
  background-color: var(--wh-panel) !important;
  border-left-color: var(--wh-key) !important;
  color: var(--wh-bone) !important;
}
body.wht-mystery-mode .main-footer {
  background: #0A0B0E;
  color: var(--wh-t3);
  border-top: 1px solid var(--wh-rule);
  font-family: var(--wh-mono);
  font-size: 12px;
}
body.wht-mystery-mode .main-footer a { color: var(--wh-key); }

/* =========================================================================
 * 3) แถบหัวแฟ้ม + ตราประทับ
 * ========================================================================= */
.wht-classified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 2px solid var(--wh-stamp);
  border-bottom: 1px solid var(--wh-rule);
  padding: 10px 0;
  font-family: var(--wh-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wh-t3);
}
.wht-classified b { color: var(--wh-stamp); font-weight: 700; letter-spacing: .28em; }

.wht-head { padding: 40px 0 26px; border-bottom: 1px solid var(--wh-rule); margin-bottom: 30px; }
.wht-fileno {
  font-family: var(--wh-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wh-t3);
  margin-bottom: 14px;
}
.wht-title {
  font-family: var(--wh-mono);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--wh-bone);
  margin: 0 0 4px;
}
.wht-title i { font-style: normal; color: var(--wh-key); }
/* เคอร์เซอร์กะพริบ — บอกว่าแฟ้มนี้ "ยังเขียนไม่จบ" */
.wht-caret {
  display: inline-block;
  width: .06em; height: .82em;
  background: var(--wh-key);
  margin-left: .06em;
  vertical-align: -.06em;
  animation: whtBlink 1.15s steps(1) infinite;
}
@keyframes whtBlink { 50% { opacity: 0; } }
.wht-lede {
  font-size: 16px;
  line-height: 1.85;
  color: var(--wh-t2);
  max-width: 680px;
  margin: 16px 0 0;
}

/* =========================================================================
 * 4) REDACTION BAR — แถบปิดข้อความ (SIGNATURE)
 *    ต้องชี้เมาส์ / กด / โฟกัสด้วยคีย์บอร์ด เพื่อ "ปลดชั้นความลับ"
 * ========================================================================= */
.wht-redact {
  position: relative;
  display: inline;
  background: var(--wh-redact);
  box-shadow: 0 0 0 2px var(--wh-redact);   /* ให้แถบทึบคลุมเลยขอบตัวอักษรเล็กน้อย */
  color: transparent;
  cursor: pointer;
  border-radius: 1px;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
  -webkit-user-select: none; user-select: none;
}
.wht-redact:hover,
.wht-redact:focus-visible,
.wht-redact.is-open {
  background: var(--wh-key-s);
  box-shadow: 0 0 0 2px var(--wh-key-s);
  color: var(--wh-key);
  -webkit-user-select: auto; user-select: auto;
}
.wht-redact:focus-visible { outline: 2px solid var(--wh-key); outline-offset: 2px; }

/* =========================================================================
 * 5) แถวตัวเลขสรุป
 * ========================================================================= */
.wht-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--wh-rule);
  margin-bottom: 34px;
}
.wht-stat { padding: 18px 20px; border-right: 1px solid var(--wh-rule); }
.wht-stat:last-child { border-right: 0; }
.wht-stat-v {
  font-family: var(--wh-mono);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--wh-bone);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.wht-stat-l {
  font-family: var(--wh-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wh-t3);
  margin-top: 6px;
}
.wht-stat-f { font-size: 12px; color: var(--wh-t3); margin-top: 3px; }

/* =========================================================================
 * 6) LAYOUT + แผงเอกสาร
 * ========================================================================= */
.wht-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}
.wht-panel {
  background: var(--wh-panel);
  border: 1px solid var(--wh-rule);
  border-radius: var(--wh-r);
  margin-bottom: 28px;
}
.wht-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--wh-rule);
  font-family: var(--wh-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wh-t3);
}
.wht-panel-h b { color: var(--wh-bone); font-weight: 700; }

/* --- แถวแฟ้มคดี --- */
.wht-case {
  display: grid;
  grid-template-columns: 54px 92px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--wh-rule);
  transition: background-color .18s ease;
}
.wht-case:last-child { border-bottom: 0; }
.wht-case:hover { background: var(--wh-panel-2); }
.wht-case-n {
  font-family: var(--wh-mono);
  font-size: 12px;
  color: var(--wh-t3);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.wht-case-thumb {
  aspect-ratio: 1 / 1;
  background: var(--wh-panel-2) center/cover no-repeat;
  border: 1px solid var(--wh-rule-2);
  border-radius: var(--wh-r);
  filter: grayscale(1) contrast(1.15);        /* ภาพในแฟ้ม = ภาพถ่ายขาวดำ */
  transition: filter .3s ease;
}
.wht-case:hover .wht-case-thumb { filter: grayscale(.15) contrast(1.02); }
.wht-case-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.wht-tag {
  font-family: var(--wh-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wht-c, var(--wh-t3));
  border-left: 2px solid var(--wht-c, var(--wh-rule-2));
  padding-left: 7px;
}
.wht-tag-alert { color: var(--wh-stamp); border-left-color: var(--wh-stamp); }
.wht-case-t {
  font-family: var(--wh-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--wh-bone);
  margin: 0 0 6px;
  transition: color .18s ease;
}
.wht-case:hover .wht-case-t { color: var(--wh-key); }
.wht-case-s {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--wh-t2);
  margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wht-case-m {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-family: var(--wh-mono);
  font-size: 10.5px;
  color: var(--wh-t3);
  letter-spacing: .04em;
}

/* --- แผงปริศนา --- */
.wht-riddle { padding: 20px; }
.wht-riddle-lines {
  font-family: var(--wh-display);
  font-size: 15.5px;
  line-height: 2;
  color: var(--wh-bone);
  margin: 0 0 18px;
}
.wht-riddle-q { color: var(--wh-key); font-weight: 700; }
.wht-answer {
  border-top: 1px solid var(--wh-rule);
  padding-top: 14px;
  font-family: var(--wh-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wh-t3);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.wht-answer .wht-redact { font-size: 15px; letter-spacing: 0; text-transform: none; }

/* --- รายการยอดนิยม --- */
.wht-top {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--wh-rule);
  cursor: pointer;
  transition: background-color .18s ease;
}
.wht-top:last-child { border-bottom: 0; }
.wht-top:hover { background: var(--wh-panel-2); }
.wht-top-n {
  font-family: var(--wh-mono);
  font-size: 15px;
  color: var(--wh-key);
  font-variant-numeric: tabular-nums;
}
.wht-top-t {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wh-t2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .18s ease;
}
.wht-top:hover .wht-top-t { color: var(--wh-bone); }

/* --- ท้ายหน้า --- */
.wht-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--wh-rule);
  font-family: var(--wh-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--wh-t3);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================================================================
 * 7) MOTION — เอกสารถูกวางลงบนโต๊ะทีละแผ่น
 * ========================================================================= */
.wht-in { opacity: 0; transform: translateY(12px); animation: whtIn .55s cubic-bezier(.2,.7,.3,1) forwards; }
.wht-in.d1 { animation-delay: .04s; }
.wht-in.d2 { animation-delay: .12s; }
.wht-in.d3 { animation-delay: .20s; }
.wht-in.d4 { animation-delay: .28s; }
@keyframes whtIn { to { opacity: 1; transform: none; } }

/* =========================================================================
 * 8) RESPONSIVE
 * ========================================================================= */
@media (max-width: 1000px) {
  .wht-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 700px) {
  .wht-page { padding: 0 14px 44px; }
  .wht-stats { grid-template-columns: repeat(2, 1fr); }
  .wht-stat:nth-child(2) { border-right: 0; }
  .wht-stat:nth-child(-n+2) { border-bottom: 1px solid var(--wh-rule); }
  .wht-head { padding: 26px 0 20px; }
  .wht-case { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 15px; }
  .wht-case-thumb { display: none; }     /* จอเล็ก: หัวข้อสำคัญกว่าภาพถ่ายในแฟ้ม */
  .wht-case-s { -webkit-line-clamp: 3; }
  .wht-panel-h, .wht-top { padding-left: 15px; padding-right: 15px; }
  .wht-riddle { padding: 16px 15px; }
}

/* =========================================================================
 * 9) ACCESSIBILITY
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.wht-mystery-mode *,
  body.wht-mystery-mode *::before,
  body.wht-mystery-mode *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wht-in { opacity: 1; transform: none; }
  .wht-caret { animation: none; }
}
body.wht-mystery-mode a:focus-visible,
body.wht-mystery-mode button:focus-visible {
  outline: 2px solid var(--wh-key);
  outline-offset: 2px;
}

/* พิมพ์ออกกระดาษ: เปิดเผยทุกอย่างที่ถูกปิดไว้ (ไม่งั้นได้กระดาษที่มีแถบดำ) */
@media print {
  .wht-redact { background: none !important; box-shadow: none !important; color: #000 !important; }
}

/* =========================================================================
 * 10) แถบประกาศ "ข้อมูลทดสอบ"
 *     ใช้ภาษาภาพแบบตราประทับบนแฟ้ม: พื้นหมึกเข้ม เส้นแดงตราประทับ ตัวอักษรกระดูก
 *     ตั้งใจ "ไม่" ใช้แถบดำปิดข้อความ เพราะประกาศนี้ต้องอ่านได้ทันที ห้ามซ่อน
 * ========================================================================= */
.ds-demo.wht-demo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--wh-maxw);
  margin: 0 auto;
  padding: 16px 24px;
  background: #241A18;                       /* หมึกอมแดง — ต่างจากพื้นดำของหน้า */
  border-bottom: 3px solid var(--wh-stamp);
  font-family: var(--wh-body);
}
.ds-demo.wht-demo .ds-demo-tag {
  flex: 0 0 auto;
  font-family: var(--wh-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--wh-stamp);
  padding: 5px 12px;
  border-radius: var(--wh-r);
  white-space: nowrap;
}
.ds-demo.wht-demo .ds-demo-msg { min-width: 0; }
.ds-demo.wht-demo .ds-demo-head {
  display: block;
  font-family: var(--wh-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #FFB4A8;                            /* ชมพูอมแดงสว่าง 8.3:1 บนพื้นหมึกอมแดง */
  margin-bottom: 2px;
}
.ds-demo.wht-demo .ds-demo-body {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--wh-bone);
}

@media (max-width: 700px) {
  .ds-demo.wht-demo { flex-direction: column; gap: 10px; padding: 14px; }
  .ds-demo.wht-demo .ds-demo-head { font-size: 15px; }
  .ds-demo.wht-demo .ds-demo-body { font-size: 13.5px; }
}