/* manual.css — สไตล์เฉพาะของคู่มือใช้งาน
 *
 * ต่อยอดจาก thesis.css ซึ่งถือโครงตัวอักษร สี ตาราง และการพิมพ์ไว้แล้ว
 * ไฟล์นี้เพิ่มเฉพาะสิ่งที่คู่มือต้องใช้แต่รายงานไม่ต้อง คือภาพจำลองหน้าจอ
 *
 * ต้องโหลดหลัง thesis.css เสมอ เพราะกฎบางข้อทับค่าของไฟล์นั้น
 */

/* ── ภาพจำลองหน้าจอ ─────────────────────────────────────────
 *
 * วาดด้วย SVG ที่ฝังในหน้า ไม่ใช่รูปถ่ายหน้าจอ ด้วยเหตุผลสามข้อ
 *
 *   หนึ่ง รูปถ่ายหน้าจอล้าสมัยทันทีที่แก้หน้าเว็บ แล้วไม่มีใครกลับมาถ่ายใหม่
 *   คู่มือที่มีรูปเก่ากว่าระบบ อันตรายกว่าคู่มือที่ไม่มีรูปเลย
 *
 *   สอง ภาพวาดเลือกเน้นเฉพาะสิ่งที่กำลังอธิบายได้ ตัดส่วนที่ไม่เกี่ยวออก
 *   ขณะที่รูปถ่ายพาทุกอย่างบนจอมาด้วยรวมถึงสิ่งที่ทำให้ไขว้เขว
 *
 *   สาม ภาพวาดเปลี่ยนสีตามธีมของผู้อ่านได้ และพิมพ์ลงกระดาษขาวดำแล้วยังอ่านออก
 *   ต่างจากรูปถ่ายที่ธีมมืดจะกลายเป็นสี่เหลี่ยมดำเต็มหน้ากระดาษ
 */
figure.mock {
  margin: 26px 0;
  padding: 0;
}
figure.mock svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift);
  background: var(--raised);
}
figure.mock figcaption,
figure.figscroll figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mute);
  text-align: center;
}

/* สีของภาพจำลอง อ้างโทเคนของธีมทั้งหมด ไม่ฝังค่าสีตายตัว
 * เพื่อให้ธีมมืดกับการพิมพ์ลงกระดาษได้ผลถูกต้องโดยไม่ต้องเขียนกฎซ้ำ */
.m-bg { fill: var(--sunken); }
.m-card, .m-tile, .m-panel { fill: var(--raised); stroke: var(--rule); stroke-width: 1; }
.m-bar { fill: var(--panel); }
.m-bar2 { fill: var(--sunken); stroke: var(--rule); stroke-width: 1; }
.m-side { fill: var(--sunken); stroke: var(--rule); stroke-width: 1; }
.m-mark { fill: var(--navy); }
.m-in { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1; }
.m-btn { fill: var(--navy); }
.m-go { fill: var(--ok); }
.m-stop { fill: var(--bad); }
.m-chip { fill: var(--sunken); stroke: var(--rule); stroke-width: 1; }
.m-chip-on { stroke: var(--navy); stroke-width: 1.5; }
.m-navon { fill: var(--navy-soft); }
.m-pill { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; }
.m-count { fill: var(--panel); }
.m-adv { fill: var(--bad-soft); stroke: var(--bad); stroke-width: 1; }
.m-div { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 3; }
.m-axis { stroke: var(--rule-strong); stroke-width: 1; }

/* ข้อความในภาพ ขนาดต่ำสุด 11 พิกเซลตามเกณฑ์ที่ระบบใช้อยู่
 * เคยวัดจริงแล้วต่ำกว่านั้นอ่านไม่ออกบนจอมือถือ */
.m-t { fill: var(--ink); font-size: 11px; }
.m-b { font-weight: 700; }
.m-s { fill: var(--soft); font-size: 11px; }
.m-l { fill: var(--soft); font-size: 11px; font-weight: 600; }
.m-cap { fill: var(--mute); font-size: 11px; }
.m-h { fill: var(--ink); font-size: 12px; font-weight: 700; }
.m-mono { fill: var(--soft); font-size: 11px; font-family: var(--mono); }
.m-num { fill: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-big { fill: var(--ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-btn-t { fill: #ffffff; font-size: 11px; font-weight: 600; text-anchor: middle; }
.m-count-t { fill: var(--panel-ink); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-step { fill: var(--navy); font-size: 13px; font-weight: 700; text-anchor: middle; }
.m-tag-t { fill: var(--ink); font-size: 10px; }

/* สถานะ ใช้สีความหมายชุดเดียวกับหน้าจอจริง ไม่คิดสีใหม่ */
.m-danger { fill: var(--bad); }
.m-danger-edge { stroke: var(--bad); stroke-width: 1.5; }
.m-warn-edge { stroke: var(--warn); stroke-width: 1.5; }
.m-tag { stroke-width: 0; }
.m-ok { fill: var(--ok-soft); }
.m-warn { fill: var(--warn-soft); }
.m-led-ok { fill: var(--ok); }
.m-led-bad { fill: var(--bad); }

/* สีประจำทีม ชุดเดียวกับที่หน้าจอจริงใช้ ผู้อ่านจะได้จำสีทีมได้ตรงกัน */
.m-c1 { fill: var(--s1); }
.m-c2 { fill: var(--s3); }
.m-c3 { fill: var(--s2); }
.m-c4 { fill: var(--s5); }

/* เส้นกราฟในภาพจำลอง ไม่ทึบเพราะเป็นภาพประกอบ ไม่ใช่ข้อมูลจริง */
.m-l1, .m-l2, .m-l3 { fill: none; stroke-width: 1.5; }
.m-l1 { stroke: var(--s1); }
.m-l2 { stroke: var(--s3); }
.m-l3 { stroke: var(--s2); }
.m-area { fill: none; stroke: var(--s1); stroke-width: 2; }

/* ลำดับเวลาของคาบเรียน */
.m-node { fill: var(--raised); stroke: var(--navy); stroke-width: 2; }
.m-node-on { fill: var(--navy); }
.m-loop { fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ── การพิมพ์ลงกระดาษ ────────────────────────────────────
 *
 * ภาพจำลองต้องไม่ถูกตัดครึ่งหน้า เพราะครึ่งบนกับครึ่งล่างคนละหน้า
 * ทำให้ผู้อ่านเทียบภาพกับคำอธิบายไม่ได้เลย
 */
@media print {
  figure.mock { break-inside: avoid; page-break-inside: avoid; }
  figure.mock svg { box-shadow: none; border-color: #c9c6c2; }
  /* พื้นของภาพไม่ถูกพิมพ์อยู่แล้ว จึงต้องมีเส้นขอบให้เห็นขอบเขตของแต่ละกล่อง */
  .m-tile, .m-panel, .m-card { stroke: #c9c6c2; }
  .m-bar, .m-count { fill: none; stroke: #767676; }
  .m-btn-t, .m-count-t { fill: #111; }
}