/* thesis.css — หน้ารายงานการออกแบบและพัฒนาระบบ
 *
 * ลำดับในไฟล์นี้สำคัญ ห้ามสลับ
 *
 *   1. ชั้นพื้นฐาน   ตัวแปรสี ตัวอักษร โครงเอกสาร ตาราง
 *   2. ชั้นนำเสนอ    หน้าปก กราฟ ตัวเลขเด่น ซึ่งทับค่าบางอย่างของชั้นพื้นฐาน
 *   3. เครื่องมือลอย ปุ่มสลับธีมและปุ่มพิมพ์
 *
 * เคยวางชั้นนำเสนอไว้ก่อนแล้วเจอปัญหาจริงสองข้อ ทั้งคู่เงียบและหาสาเหตุยาก
 * เลขบทกลายเป็นสีน้ำเงินบนพื้นน้ำเงินจึงมองไม่เห็นเลย
 * และแถบสถิติบนหน้าปกกว้างไม่เท่าเนื้อหา
 * เพราะสองกฎมีน้ำหนักเท่ากัน กฎที่อยู่ทีหลังจึงชนะเสมอ
 */

/* ══ 1. ชั้นพื้นฐาน ══════════════════════════════════ */
  :root{
    --paper:#fafaf8; --raised:#ffffff; --sunken:#f2f1ee;
    --ink:#0f1419; --soft:#57534e; --mute:#78716c; --faint:#a8a29e;
    --rule:#e7e5e2; --rule-strong:#d6d3d0;
    --navy:#1e3a5f; --navy-soft:#ebf0f7;
    --teal:#0b7e7e; --teal-soft:#e6f6f6;
    --ok:#059669; --ok-soft:#eafaf2;
    --bad:#b91c1c; --bad-soft:#fdecec;
    --warn:#b26a05; --warn-soft:#fdf4e3;
      /* ฟอนต์ชุดเดียวทั้งเอกสาร ลอกมาจากธีมจริงของบ้าน (utils/theme/DefaultColors.tsx)
     *
     * บ้านเราเคยแยกหัวข้อเป็น Prompt แล้วเลิกไป เหลือชุดเดียวทั้งระบบ
     * ตัวละตินได้ Helvetica/Arial เพราะ Plus Jakarta Sans ไม่ได้ลงไว้บนเครื่อง
     * ตัวไทยไหลลงมาถึง Sarabun ทีละตัวอักษร ซึ่งเราลงไฟล์ไว้เองที่ web/fonts/
     * จึงได้หน้าตาเดียวกับคอนโซลโดยไม่ต้องพึ่งอินเทอร์เน็ต ซึ่งจำเป็นเพราะ
     * นโยบายความปลอดภัยของหน้านี้ยอมให้โหลดฟอนต์จากเครื่องตัวเองเท่านั้น */
    --sans:"Plus Jakarta Sans",Helvetica,Arial,"Sarabun","Noto Sans Thai",sans-serif;
    /* บ้านเขียน fontMono ว่ามี Sarabun ต่อท้าย แต่ในเอกสารนี้มีบล็อกโค้ดและตัวเลข
     * ที่ต้องเรียงตรงคอลัมน์ จึงต่อด้วยตัวพิมพ์ความกว้างเท่ากันแทน */
    --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

    /* รัศมีมุมของบ้าน ตรงกับ radii ใน tokens.ts ทุกค่า */
    --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px;
    /* ไล่สีหน้าปกของบ้าน คือ heroGradient ใน tokens.ts */
    --hero-wash:linear-gradient(120deg,#1E3A5F 0%,#1E3A5F 45%,#0EA5A5 130%);
    /* เงาของบ้านอมน้ำเงินเสมอ ไม่ใช่เทากลาง เป็นค่าที่ใช้ซ้ำกว่าสามสิบจุดในเว็บหลัก
     * เงาสีเทาบนพื้นผ้าลินินจะดูขุ่น แต่เงาอมน้ำเงินจะกลมกลืนไปกับสีประจำแบรนด์ */
    --lift:0 2px 10px rgba(30,58,95,.06);
    --lift-hi:0 6px 20px rgba(30,58,95,.1);

    --measure:66ch;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#1a1917; --raised:#232220; --sunken:#151412;
      --ink:#f5f4f2; --soft:#c6c2bd; --mute:#a8a29e; --faint:#78716c;
      --rule:#332f2c; --rule-strong:#463f3a;
      --navy:#8fb4dd; --navy-soft:#1c2733;
      --teal:#4bc6c6; --teal-soft:#14262a;
      --ok:#4ade9b; --ok-soft:#14261e;
      --bad:#f08a8a; --bad-soft:#2a1a1a;
      --warn:#e0a94b; --warn-soft:#2a2114;
      /* บนพื้นเข้ม เงาอมน้ำเงินจาง ๆ มองไม่เห็นเลย ต้องเข้มขึ้นมาก */
      --lift:0 2px 10px rgba(0,0,0,.4); --lift-hi:0 8px 24px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    --paper:#1a1917; --raised:#232220; --sunken:#151412;
    --ink:#f5f4f2; --soft:#c6c2bd; --mute:#a8a29e; --faint:#78716c;
    --rule:#332f2c; --rule-strong:#463f3a;
    --navy:#8fb4dd; --navy-soft:#1c2733;
    --teal:#4bc6c6; --teal-soft:#14262a;
    --ok:#4ade9b; --ok-soft:#14261e;
    --bad:#f08a8a; --bad-soft:#2a1a1a;
    --warn:#e0a94b; --warn-soft:#2a2114;
    --lift:0 2px 10px rgba(0,0,0,.4); --lift-hi:0 8px 24px rgba(0,0,0,.5);
  }
  :root[data-theme="light"]{
    --paper:#fafaf8; --raised:#ffffff; --sunken:#f2f1ee;
    --ink:#0f1419; --soft:#57534e; --mute:#78716c; --faint:#a8a29e;
    --rule:#e7e5e2; --rule-strong:#d6d3d0;
    --navy:#1e3a5f; --navy-soft:#ebf0f7;
    --teal:#0b7e7e; --teal-soft:#e6f6f6;
    --ok:#059669; --ok-soft:#eafaf2;
    --bad:#b91c1c; --bad-soft:#fdecec;
    --warn:#b26a05; --warn-soft:#fdf4e3;
    --lift:0 2px 10px rgba(30,58,95,.06); --lift-hi:0 6px 20px rgba(30,58,95,.1);
  }

  body{
    background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  .sheet{max-width:var(--measure); margin:0 auto; padding:0 24px 120px;}
  @media (max-width:640px){ body{font-size:16px} .sheet{padding:0 18px 80px} }

  p{margin:0 0 1.05em}
  a{color:var(--teal); text-underline-offset:3px; text-decoration-thickness:1px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:2px}
  strong{font-weight:700}
  code,.mono{font-family:var(--mono); font-size:.87em; word-break:break-word}
  .num{font-variant-numeric:tabular-nums}

  /* ── หน้าปก ───────────────────────────────── */
  .cover{
    padding:88px 0 56px; border-bottom:1px solid var(--rule);
    margin-bottom:56px;
  }
  .cover .kicker{
    font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--mute); margin:0 0 28px; font-weight:600;
  }
  .cover h1{
    font-size:clamp(30px,5.6vw,44px); line-height:1.22; font-weight:700;
    letter-spacing:-.015em; margin:0 0 20px; text-wrap:balance; color:var(--ink);
  }
  .cover .sub{
    font-size:clamp(17px,2.6vw,21px); line-height:1.5; color:var(--soft);
    font-weight:400; margin:0 0 40px; max-width:52ch;
  }
  .facts{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:2px; background:var(--rule); border:1px solid var(--rule);
    border-radius:var(--r-md); overflow:hidden;
  }
  .facts div{background:var(--paper); padding:14px 16px}
  .facts dt{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); font-weight:600}
  .facts dd{margin:5px 0 0; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--navy)}
  .facts dd small{font-size:12.5px; font-weight:500; color:var(--mute); display:block; margin-top:1px}

  /* ── โครงบท ───────────────────────────────── */
  .chapter{padding-top:72px; scroll-margin-top:16px}
  .chapter-head{
    display:flex; align-items:baseline; gap:18px;
    border-bottom:2px solid var(--navy); padding-bottom:10px; margin-bottom:32px;
  }
  .chapter-head .no{
    font-size:clamp(44px,9vw,68px); line-height:.8; font-weight:200;
    color:var(--navy); font-variant-numeric:lining-nums tabular-nums;
    letter-spacing:-.03em; flex:none;
  }
  .chapter-head h2{
    font-size:clamp(19px,3.2vw,24px); line-height:1.3; font-weight:700;
    margin:0; letter-spacing:-.01em; text-wrap:balance;
  }
  .chapter-head .lat{
    display:block; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--mute); font-weight:600; margin-bottom:5px;
  }
  h3{
    font-size:17.5px; font-weight:700; margin:38px 0 12px; line-height:1.4;
    padding-left:14px; border-left:3px solid var(--rule-strong); text-wrap:balance;
  }
  h4{font-size:16px; font-weight:700; margin:26px 0 8px; color:var(--soft)}

  /* ── ส่วนนำหน้า ────────────────────────────── */
  .front h2{
    font-size:15px; letter-spacing:.13em; text-transform:uppercase;
    font-weight:700; color:var(--mute); margin:0 0 18px;
    padding-bottom:8px; border-bottom:1px solid var(--rule);
  }
  .front{margin-bottom:56px}
  .abstract p:first-of-type::first-line{font-weight:600}

  /* สารบัญเป็นการ์ดยกพื้น ตามสำนวนของบ้าน คือขอบหนึ่งพิกเซล มุมสิบสอง เงาอมน้ำเงิน
   * เดิมเป็นรายการเส้นคั่นเปล่า ๆ ลอยอยู่บนพื้น ซึ่งไม่ต่างจากเนื้อความรอบข้างเลย
   * ทั้งที่สารบัญเป็นเครื่องมือให้กด ไม่ใช่ข้อความให้อ่าน จึงควรดูหยิบจับได้ */
  nav.toc ol{
    list-style:none; margin:0; padding:6px; counter-reset:ch;
    background:var(--raised); border:1px solid var(--rule);
    border-radius:var(--r-lg); box-shadow:var(--lift);
  }
  nav.toc li{counter-increment:ch}
  nav.toc li + li{border-top:1px solid var(--rule)}
  nav.toc a{
    display:flex; gap:14px; align-items:baseline; padding:11px 12px;
    text-decoration:none; color:var(--ink); border-radius:var(--r-sm);
    transition:background .12s ease,color .12s ease;
  }
  nav.toc a:hover{color:var(--teal); background:var(--teal-soft)}
  nav.toc a::before{
    content:counter(ch); font-variant-numeric:tabular-nums; color:var(--navy);
    font-weight:600; min-width:1.6em; font-size:15px;
  }
  nav.toc .t{flex:1; line-height:1.4}
  nav.toc .n{font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums}

  /* ── ตาราง ────────────────────────────────── */
  /* ตารางอยู่ในกรอบการ์ด ให้ขอบเขตของสิ่งที่เลื่อนได้ชัดว่าเริ่มและจบตรงไหน */
  .scroll{
    overflow-x:auto; margin:22px 0; -webkit-overflow-scrolling:touch;
    background:var(--raised); border:1px solid var(--rule);
    border-radius:var(--r-lg); box-shadow:var(--lift); padding:4px 16px 6px;
  }
  table{border-collapse:collapse; width:100%; font-size:15px; min-width:min(100%,460px)}
  /* ชื่อตารางถูกย้ายออกมานอกกรอบเลื่อนแล้ว จึงใช้ย่อหน้าธรรมดาแทนธาตุ caption
   *
   * ธาตุ caption อยู่ในตาราง จึงเลื่อนหายไปทางขวาพร้อมตารางบนจอแคบ
   * ชื่อถูกตัดท้ายโดยไม่มีอะไรบอกว่ายังไม่จบ และตอนซูมหายเกินครึ่งชื่อ */
  .tcap{
    text-align:left; font-size:13px; color:var(--mute); line-height:1.5;
    margin:22px 0 9px; font-weight:600; letter-spacing:.02em;
  }
  .tcap + .scroll{margin-top:0}
  caption{
    caption-side:top; text-align:left; font-size:13px; color:var(--mute);
    padding-bottom:9px; font-weight:600; letter-spacing:.02em;
  }
  /* ระยะห่างในตาราง
 *
 * ทุกช่องมีระยะห่างทั้งซ้ายและขวา ยกเว้นช่องริมซึ่งชิดขอบเนื้อหา
 * เคยตั้งเป็นขวาศูนย์ทั้งหมด แล้วคอลัมน์ตัวเลขที่ชิดขวาไปติดกับข้อความช่องถัดไป
 * อ่านออกมาเป็น "41,932119 ไฟล์" ซึ่งเข้าใจผิดได้ว่าเป็นเลขตัวเดียว */
th,td{padding:9px 16px; text-align:left; vertical-align:top}
th:first-child,td:first-child{padding-left:0}
th:last-child,td:last-child{padding-right:0}
  thead th{
    border-bottom:1.5px solid var(--ink); font-size:12.5px; font-weight:700;
    letter-spacing:.05em; text-transform:uppercase; color:var(--soft); white-space:nowrap;
  }
  tbody tr{border-bottom:1px solid var(--rule)}
  tbody tr:last-child{border-bottom:0}
  td.n,th.n{text-align:right; font-variant-numeric:tabular-nums}
  .tag{
    display:inline-block; font-size:12px; font-weight:700; padding:1px 7px;
    border-radius:var(--r-sm); white-space:nowrap; letter-spacing:.02em;
  }
  .t-ok{background:var(--ok-soft); color:var(--ok)}
  .t-bad{background:var(--bad-soft); color:var(--bad)}
  .t-warn{background:var(--warn-soft); color:var(--warn)}
  .t-navy{background:var(--navy-soft); color:var(--navy)}

  /* ── กล่องเน้น ────────────────────────────── */
  /* กล่องเน้นใช้สีพื้นอ่อนคู่กับสีความหมาย ตรงกับชุด navySoft/successSoft/amberSoft
   * ที่ธีมของบ้านเตรียมไว้ให้กล่องแจ้งเตือนโดยเฉพาะ
   * เดิมเป็นพื้นเทาเหมือนกันหมด ต่างกันแค่สีเส้นซ้ายสามพิกเซล
   * ซึ่งบางเกินกว่าจะบอกได้ว่ากล่องไหนคือข้อจำกัด กล่องไหนคือหลักฐาน */
  .note{
    background:var(--navy-soft); border:1px solid var(--rule);
    border-left:3px solid var(--navy);
    padding:16px 18px; margin:24px 0; font-size:15.5px;
    border-radius:var(--r-sm) var(--r-lg) var(--r-lg) var(--r-sm);
  }
  .note p:last-child{margin-bottom:0}
  .note .lbl{
    display:block; font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
    color:var(--mute); font-weight:700; margin-bottom:6px;
  }
  .note.limit{border-left-color:var(--warn); background:var(--warn-soft)}
  .note.proof{border-left-color:var(--ok);  background:var(--ok-soft)}

  pre{
    background:var(--sunken); border:1px solid var(--rule); border-radius:var(--r-md);
    padding:14px 16px; overflow-x:auto; font-family:var(--mono); font-size:13.5px;
    line-height:1.65; margin:20px 0;
  }
  pre code{font-size:inherit}

  figure{margin:32px 0}
  figure svg{max-width:100%; height:auto; display:block; margin:0 auto}
  figcaption{
    font-size:13.5px; color:var(--mute); margin-top:12px; line-height:1.6;
    padding-top:9px; border-top:1px solid var(--rule);
  }
  figcaption b{color:var(--soft); font-weight:700}

  ul,ol{margin:0 0 1.05em; padding-left:1.25em}
  li{margin-bottom:.45em}
  li::marker{color:var(--faint)}

  .refs{font-size:15px}
  .refs li{margin-bottom:.85em; line-height:1.6}

  .end{
    margin-top:72px; padding-top:22px; border-top:2px solid var(--navy);
    font-size:13.5px; color:var(--mute);
  }
  @media print{
    .chapter{page-break-before:always}
    a{color:#000; text-decoration:none}
  }

/* สีของคำอธิบายกราฟ ต้องเป็นคลาส ไม่ใช่แอตทริบิวต์ style
 * เพราะนโยบายความปลอดภัยของเนื้อหาบล็อกสไตล์ที่เขียนติดกับธาตุ */
.legend i.sw-bad{background:var(--bad)}
.legend i.sw-ok{background:var(--ok)}
.legend i.sw-s1{background:var(--s1)}
.legend i.sw-s2{background:var(--s2)}
.legend i.sw-s3{background:var(--s3)}
.legend i.sw-s4{background:var(--s4)}
.legend i.sw-s5{background:var(--s5)}

/* ══ 2. ชั้นนำเสนอ ═══════════════════════════════════ */

/* ── สีของแผงเข้ม ────────────────────────────────────────
 *
 * แยกจาก --navy โดยเจตนา เพราะสองอย่างนี้ทำหน้าที่คนละอย่าง
 *
 *   --navy        สีของ "หมึก" ใช้กับตัวอักษร เส้นขอบ และเส้นคั่น
 *                 จึงต้องพลิกเป็นสีอ่อนในธีมมืด ไม่อย่างนั้นอ่านไม่ออก
 *   --panel       สีของ "พื้นผิว" ของแผงเข้ม เช่นหน้าปกและป้ายเลขบท
 *                 ต้องเข้มเสมอทั้งสองธีม เพราะตัวอักษรบนแผงเป็นสีขาวตายตัว
 *
 * เคยใช้ --navy เป็นพื้นของหน้าปก ผลคือในธีมมืดพื้นกลายเป็นฟ้าอ่อน
 * แล้วตัวอักษรสีขาวและสีฟ้าจาง ๆ บนนั้นจมหายไปกับพื้นจนอ่านไม่ออกทั้งหน้าปก
 * ซึ่งเป็นสิ่งแรกที่ทุกคนเห็น
 */
:root{ --panel:#1e3a5f; --panel-ink:#ffffff; --panel-soft:#9db8d6; --panel-mid:#b9cde4; }
@media (prefers-color-scheme:dark){
  :root{ --panel:#16273a; --panel-soft:#8ba7c4; --panel-mid:#adc4dc; }
}
:root[data-theme="dark"]{ --panel:#16273a; --panel-soft:#8ba7c4; --panel-mid:#adc4dc; }
:root[data-theme="light"]{ --panel:#1e3a5f; --panel-soft:#9db8d6; --panel-mid:#b9cde4; }

/* ── ชั้นที่สอง: การนำเสนอ ──────────────────────────────────
 * ไฟล์แรกวางโครงตัวอักษรและตาราง ไฟล์นี้เพิ่มน้ำหนักทางสายตา
 * ชุดสีสำหรับกราฟผ่านการตรวจด้วยเครื่องมือแล้วทั้งธีมสว่างและมืด
 * ลำดับสีตายตัว ห้ามวนใช้ซ้ำ และห้ามเปลี่ยนสีตามอันดับของข้อมูล
 */
:root{
  --s1:#4a86c8;  /* น้ำเงิน */
  --s2:#c9821f;  /* เหลืองอำพัน */
  --s3:#0f9c9c;  /* เขียวน้ำทะเล */
  --s4:#8f6ad6;  /* ม่วง */
  --s5:#3a9b66;  /* เขียว */
  --grid:#e7e5e2;
  --plot:#ffffff;
}
@media (prefers-color-scheme:dark){ :root{ --grid:#332f2c; --plot:#232220; } }
:root[data-theme="dark"]{ --grid:#332f2c; --plot:#232220; }
:root[data-theme="light"]{ --grid:#e7e5e2; --plot:#ffffff; }

/* ── แถบความคืบหน้าการอ่าน ───────────────────────────── */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--navy); z-index:60; transition:width .1s linear;
}
@media print{ .progress{display:none} }

/* ── หน้าปกเต็มความกว้าง ─────────────────────────────── */
/* หน้าปกเป็นแผงเต็มความกว้าง
 *
 * ไม่ใช้เทคนิค calc(50% - 50vw) เพราะ 50vw นับรวมแถบเลื่อนของหน้าต่าง
 * ส่วน 50% ไม่นับ ผลต่างราวแปดพิกเซลต่อข้างทำให้แผงกว้างเกินตัวหน้า
 * แล้วหน้าเลื่อนแนวนอนได้ ซึ่งเป็นข้อบกพร่องที่เห็นชัดบนจอเล็กที่สุด
 *
 * ธาตุนี้เป็นลูกโดยตรงของ body ซึ่งกว้างเต็มอยู่แล้ว จึงไม่ต้องใช้เทคนิคใดเลย
 */
.hero{
  background:var(--panel); background-image:var(--hero-wash); color:var(--panel-ink);
  margin:0 0 56px; padding:0 24px;
  position:relative; overflow:hidden;
}
:root[data-theme="dark"] .hero,
.hero{ --on-navy:#f4f7fb; }
.hero-inner{
  max-width:var(--measure); margin:0 auto; padding:60px 0 8px;
  position:relative; z-index:2;
  display:grid; gap:8px 40px; align-items:center;
  grid-template-columns:minmax(0,1fr);
}
/* จอกว้างวางแผนภาพไว้ข้างชื่อเรื่อง จอแคบวางซ้อนลงมา
 * ที่ว่างใต้ชื่อเรื่องบนจอกว้างเป็นที่ว่างเปล่า ๆ ถ้าไม่ทำแบบนี้ */
@media (min-width:900px){
  /* หน้าปกกว้างกว่าความกว้างของเนื้อความได้ เพราะเป็นแผงเต็มหน้า ไม่ใช่ย่อหน้า
   * ถ้าบังคับให้แคบเท่าเนื้อความ ชื่อเรื่องจะตัดบรรทัดทุกสองสามคำ */
  .hero-inner{
    max-width:1060px;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    padding:66px 0 22px;
  }
  .hero .kicker,.hero h1,.hero .sub{grid-column:1}
  .hero-figure{grid-column:2; grid-row:1 / span 3}
}
.hero .kicker{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--panel-soft); margin:0 0 26px; font-weight:700;
}
.hero h1{
  font-size:clamp(31px,6vw,50px); line-height:1.18; font-weight:700;
  letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance; color:var(--panel-ink);
}
.hero .sub{
  font-size:clamp(16px,2.4vw,19px); line-height:1.6; color:var(--panel-mid);
  margin:0 0 24px; max-width:48ch; font-weight:400;
}
.hero-figure{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px}
.hero-figure svg{max-width:min(100%,330px); height:auto}
.hero-cap{
  font-size:12.5px; line-height:1.55; color:var(--panel-mid); margin:0;
  max-width:34ch; text-align:center;
}
.hero-cap b{color:var(--panel-ink); font-weight:600}

/* กำหนดจำนวนคอลัมน์ให้แน่นอน ไม่ใช้ auto-fit
 *
 * auto-fit ทำให้จำนวนคอลัมน์เปลี่ยนตามความกว้างโดยที่ CSS ไม่รู้ว่าตอนนี้กี่คอลัมน์
 * กฎเส้นคั่นที่เขียนด้วย nth-child จึงเดาผิดในบางช่วง
 * เช่นตั้งไว้ว่าคอลัมน์คู่ไม่มีเส้นขวา แต่พอกริดยุบเหลือคอลัมน์เดียว
 * ช่องที่หนึ่งกับสามจะมีเส้นขวาห้อยอยู่กลางอากาศ
 * และช่วง 460 ถึง 520 พิกเซลที่กริดขึ้นเป็นสามคอลัมน์ เส้นก็ผิดตำแหน่งอีกแบบ */
.statband{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.16);
  max-width:var(--measure); margin:0 auto; padding:0;
  background:transparent;
}
/* ต้องอยู่หลังกฎพื้นฐานเสมอ ไม่ใช่ก่อน
 * สองกฎนี้เจาะจงเท่ากัน กฎที่อยู่ทีหลังจึงชนะ
 * เคยวางไว้ข้างบนแล้วกฎพื้นฐานทับ แถบสถิติจึงกว้างไม่เท่าเนื้อหาบนจอกว้าง */
/* ต้องอยู่หลังกฎพื้นฐานเสมอ
 *
 * เคยวางไว้ก่อนแล้วไม่มีผลเลย เพราะสองกฎมีน้ำหนักเท่ากัน กฎที่อยู่ทีหลังจึงชนะ
 * ผลคือแถบสถิติกว้างเท่าความกว้างของเนื้อความ ไม่ตรงกับหน้าปกที่กว้างกว่า
 * ซึ่งเห็นเป็นขอบเหลื่อมกันชัดเจนบนจอกว้าง */
@media (min-width:900px){
  .statband{max-width:1060px}
}
.statband > div{padding:18px 18px 18px 0; border-right:1px solid rgba(255,255,255,.12)}
.statband > div:last-child{border-right:0}
.statband dt{
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--panel-soft); font-weight:700;
}
.statband dd{
  margin:6px 0 0; font-size:clamp(21px,3.4vw,27px); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--panel-ink); line-height:1.1;
}
.statband dd small{
  display:block; font-size:11.5px; font-weight:500; color:var(--panel-mid);
  margin-top:4px; letter-spacing:0;
}
/* สองคอลัมน์เป็นค่าตั้งต้น ช่องคู่จึงเป็นช่องริมขวาเสมอ */
.statband > div:nth-child(2n){border-right:0}
@media (max-width:359px){
  /* แคบมากจนสองคอลัมน์ก็ยังอึดอัด เหลือคอลัมน์เดียว ทุกช่องเป็นช่องริม */
  .statband{grid-template-columns:minmax(0,1fr)}
  .statband > div{border-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding:12px 0}
  .statband > div:last-child{border-bottom:0}
}
@media (max-width:520px){
  .statband > div{padding:14px 14px 14px 0}
}
@media (min-width:560px){
  /* กว้างพอให้สี่ช่องเรียงแถวเดียว ช่องที่สี่จึงเป็นช่องริมขวา */
  .statband{grid-template-columns:repeat(4,minmax(0,1fr))}
  .statband > div:nth-child(2n){border-right:1px solid rgba(255,255,255,.12)}
  .statband > div:nth-child(4n),.statband > div:last-child{border-right:0}
}

/* ── ป้ายเลขบท ───────────────────────────────────────── */
.chapter-head{align-items:center}
.chapter-head .no{
  display:flex; align-items:center; justify-content:center;
  width:clamp(52px,10vw,66px); height:clamp(52px,10vw,66px);
  background:var(--panel); color:var(--panel-ink); border-radius:var(--r-lg);
  font-size:clamp(25px,4.6vw,32px); font-weight:600; line-height:1;
  letter-spacing:-.02em; flex:none;
}
/* ตัวเลขบนป้ายเป็นสีขาวเสมอทั้งสองธีม
 *
 * ป้ายมีพื้นเป็นสีน้ำเงินของแบรนด์ตายตัว ไม่ได้เปลี่ยนตามธีม
 * เคยเขียนให้สลับเป็นสีเข้มในธีมมืด ผลคือเลขน้ำเงินบนพื้นน้ำเงิน มองไม่เห็นเลย */

/* ── ตัวเลขเด่น ──────────────────────────────────────── */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:10px; margin:26px 0;
}
.tile{
  background:var(--raised); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--lift);
  padding:15px 16px;
}
.tile .v{
  font-size:clamp(24px,4vw,30px); font-weight:700; line-height:1.08;
  font-variant-numeric:tabular-nums; color:var(--navy); letter-spacing:-.01em;
}
.tile .k{font-size:13px; color:var(--soft); margin-top:5px; line-height:1.45}
.tile.bad .v{color:var(--bad)}
.tile.ok .v{color:var(--ok)}

/* ── คำพูดเน้น ───────────────────────────────────────── */
.pull{
  margin:34px 0; padding:4px 0 4px 22px; border-left:4px solid var(--navy);
  font-size:clamp(18px,2.9vw,21px); line-height:1.5; font-weight:600;
  color:var(--ink); text-wrap:balance;
}
.pull span{display:block; font-size:14px; font-weight:500; color:var(--mute); margin-top:9px}

/* ── กราฟ ────────────────────────────────────────────── */
.chart{
  background:var(--raised); border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--lift);
  padding:20px 18px 16px; margin:28px 0;
}
.chart h4{margin:0 0 3px; font-size:15.5px; color:var(--ink); font-weight:700}
.chart .lede{font-size:13px; color:var(--mute); margin:0 0 16px; line-height:1.5}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart figcaption{border-top:1px solid var(--rule); margin-top:14px}
.legend{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin:14px 0 0;
  font-size:13px; color:var(--soft);
}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:11px; height:11px; border-radius:3px; flex:none}
.swatch{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:baseline; margin-right:5px}

/* ══ 3. เครื่องมือลอย ════════════════════════════════ */
/* เครื่องมือลอย ไม่ใช่ส่วนหนึ่งของเอกสาร จึงไม่ติดไปตอนพิมพ์ */
      /* ปุ่มลอยได้เฉพาะเมื่อจอกว้างพอจนไม่ทับอะไร
       *
       * แถบปุ่มเป็นแผ่นทึบกว้างราว 125 พิกเซล ถ้าลอยบนจอแคบจะกินความกว้าง
       * คอลัมน์เนื้อความไปราวหนึ่งในสาม แล้วบังปลายบรรทัดบนสุดทุกครั้งที่เลื่อนอ่าน
       * เกิดกับผู้ที่ซูมหน้าเว็บด้วย เพราะการซูมทำให้ช่องมองแคบลงเช่นกัน
       *
       * ปุ่มสองอันนี้กดครั้งเดียวตอนต้น ไม่จำเป็นต้องลอยตามตลอด
       * จอแคบจึงให้เลื่อนหายไปกับหน้ากระดาษ ซึ่งไม่เสียอะไรเลย */
      .tools{
        position:absolute; top:14px; right:14px; z-index:50; display:flex; gap:6px;
      }
      @media (min-width:940px){ .tools{position:fixed} }
      .tools button{
        font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
        background:var(--raised); color:var(--soft);
        border:1px solid var(--rule-strong); border-radius:var(--r-sm); padding:5px 11px;
        line-height:1.4;
      }
      .tools button:hover{color:var(--ink); border-color:var(--ink)}
      @media print{ .tools{display:none} }
      /* พื้นที่กดต้องพอสำหรับนิ้ว และห่างกันพอไม่ให้กดพลาดข้ามปุ่ม */
      @media (max-width:700px){ .tools{gap:10px} .tools button{padding:8px 13px} }

/* ══ 4. การอ่านบนจอแคบ ═══════════════════════════════
 *
 * แผนภาพและกราฟวาดด้วยพิกัดคงที่ ตัวอักษรข้างในจึงย่อตามภาพ
 * วัดจริงบนจอ 360 พิกเซล ตัวอักษรเหลือ 4.9 ถึง 6.4 พิกเซล ซึ่งอ่านไม่ออก
 * ต่ำกว่า 11 พิกเซลถือว่าอ่านไม่ออกสำหรับข้อความกำกับภาพ
 *
 * ทางแก้คือไม่ยอมให้ภาพเล็กกว่าขนาดที่ยังอ่านออก แล้วให้เลื่อนดูทางขวาแทน
 * เป็นวิธีเดียวกับที่ตารางใช้อยู่แล้ว ผู้อ่านจึงเจอพฤติกรรมเดียวกันทั้งเอกสาร
 * ดีกว่าการวาดใหม่ให้เรียงลงล่าง เพราะแผนภาพเหล่านี้สื่อ "ลำดับจากซ้ายไปขวา"
 * ซึ่งเป็นสาระของภาพเอง การหักเป็นแนวตั้งจะทำลายสิ่งที่ภาพต้องการบอก
 */
.figscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.figscroll svg{width:100%; height:auto; display:block}
.figscroll.fw600 svg{min-width:600px}
.figscroll.fw660 svg{min-width:660px}

/* บอกให้รู้ว่ายังมีของอยู่ทางขวา ไม่ใช่ปล่อยให้เดาเอง
 * ป้ายนี้ขึ้นเฉพาะตอนที่เลื่อนได้จริง ซึ่งสคริปต์เป็นคนตัดสิน */
/* เขียนเป็น "ไม่ใช่ศูนย์" แทน "เท่ากับหนึ่ง"
 *
 * ถ้าเขียนว่าเท่ากับหนึ่ง ป้ายจะหายทั้งหมดเมื่อปิดจาวาสคริปต์
 * เพราะไม่มีใครมาตั้งค่าให้ ผู้อ่านจะไม่รู้เลยว่ายังมีของอยู่ทางขวา
 * เขียนแบบนี้แล้วไม่มีสคริปต์จะเห็นป้ายเสมอ ซึ่งเกินจำเป็นบ้างแต่ไม่เสียหาย
 * ดีกว่าไม่เห็นเลยในกรณีที่ต้องเลื่อนจริง */
.scroll:not([data-over="0"])::after,
.figscroll:not([data-over="0"])::after{
  content:"เลื่อนดูทางขวา →";
  display:block; font-size:12px; color:var(--mute);
  padding:6px 0 0; text-align:right;
}
@media print{
  .scroll::after,.figscroll::after{display:none}
  .figscroll{overflow:visible}
  .figscroll svg{min-width:0 !important}
}

/* ตารางสามคอลัมน์ขึ้นไปต้องไม่ถูกบีบบนจอแคบ
 *
 * min-width แบบ min(100%,460px) ทำให้ตารางกว้างเท่าคอนเทนเนอร์เสมอ
 * บนจอ 390 พิกเซล คอลัมน์จึงเหลือคอลัมน์ละราวร้อยพิกเซล
 * ข้อความไทยตัดบรรทัดเป็นคำละบรรทัดจนอ่านไม่รู้เรื่อง
 * ตั้งพื้นเป็นความกว้างคงที่แทน แล้วให้เลื่อนดูทางขวา ซึ่งอ่านง่ายกว่ามาก */
table.wide{min-width:480px}
@media print{ table.wide{min-width:0} }

/* กรอบการ์ดของตารางกินความกว้างข้างละสิบหกพิกเซล บนจอคอมไม่รู้สึกอะไร
 * แต่บนจอ 390 พิกเซลที่หน้ากระดาษเหลือกว้างสามร้อยห้าสิบสี่ นั่นคือเกือบหนึ่งในสิบ
 * ซึ่งกลายเป็นระยะที่ต้องเลื่อนเพิ่มโดยไม่ได้อะไรกลับมา จึงบีบระยะขอบลงบนจอแคบ */
@media (max-width:640px){
  .scroll{padding-left:10px; padding-right:10px}
  nav.toc a{padding-left:10px; padding-right:10px}
  nav.toc .toc-part{padding-left:10px; padding-right:10px}
}

/* บนจอที่กว้างพอ ให้รูปและกราฟกว้างกว่าคอลัมน์ข้อความได้
 *
 * คอลัมน์ข้อความกว้างราว 66 ตัวอักษรเพื่อให้อ่านสบาย ซึ่งแคบกว่าภาพที่วาดไว้
 * ถ้าบังคับให้ภาพอยู่ในคอลัมน์เดียวกัน ภาพจะต้องเลื่อนแม้บนจอคอมที่กว้างเหลือเฟือ
 * ซึ่งไร้เหตุผล การให้ภาพล้นออกมาเล็กน้อยเป็นธรรมเนียมของสิ่งพิมพ์อยู่แล้ว
 * และทำให้ภาพได้ความกว้างเต็มขนาดที่วาดไว้โดยไม่ต้องย่อ */
@media (min-width:800px){
  figure,.chart{margin-left:-56px; margin-right:-56px}
  /* ระยะขอบในการ์ดต้องไม่กินความกว้างที่เพิ่งได้มาคืนไป */
  .chart{padding-left:24px; padding-right:24px}
  figure figcaption,.chart figcaption{margin-left:0; margin-right:0}
}

/* ══ 5. การพิมพ์ลงกระดาษ ═════════════════════════════
 *
 * ต้องอยู่ท้ายไฟล์ เพราะต้องชนะกฎของชั้นก่อนหน้าที่มีน้ำหนักเท่ากัน
 *
 * หลักที่ยึด: ห้ามพึ่งพื้นหลังสี
 *
 *   เบราว์เซอร์ทุกตัวไม่พิมพ์สีพื้นหลังตามค่าตั้งต้น ผู้อ่านต้องไปติ๊กเปิดเอง
 *   ตัวอักษรสีขาวที่วางบนพื้นสีจึงกลายเป็นขาวบนขาว คือหายไปทั้งหมด
 *   วัดจริงแล้วพบว่าหน้าปกออกมาเกือบเปล่า ชื่อเรื่องหาย ตัวเลขสถิติสี่ตัวหาย
 *   เลข 19 ในแผนภาพหน้าปกซึ่งเป็นสาระทั้งหมดของรูปก็หาย และเลขบททั้งเจ็ดหาย
 *
 * และห้ามพึ่งธีมที่ผู้อ่านเลือกไว้
 *
 *   ธีมถูกจำไว้ในเครื่อง ถ้าผู้อ่านเคยสลับเป็นมืดไว้ครั้งเดียว
 *   การพิมพ์ทุกครั้งหลังจากนั้นจะได้หัวตารางสีเทาอ่อนบนกระดาษขาว
 *   ค่าความต่างสีราว 1.7 ต่อ 1 คืออ่านไม่ออกทั้งสิบตาราง
 */
@media print{
  /* บังคับค่าสีของธีมสว่างเสมอ ไม่ว่าผู้อ่านจะเลือกธีมไหนไว้
   * เขียนคู่กับตัวเลือกทั้งสามเพื่อให้ชนะกฎที่ตั้งตาม data-theme */
  :root,:root[data-theme="dark"],:root[data-theme="light"]{
    --paper:#fff; --raised:#fff; --sunken:#f4f3f1;
    --ink:#111; --soft:#3f3b37; --mute:#4b4642; --faint:#6b645e;
    --rule:#c9c6c2; --rule-strong:#a9a5a1;
    --navy:#1e3a5f; --teal:#0b5f5f; --ok:#046a4a; --bad:#8f1414; --warn:#7a4703;
    --panel:#fff; --panel-ink:#111; --panel-soft:#3f3b37; --panel-mid:#3f3b37;
  }
  body{font-size:11.5pt; background:#fff; color:#111}

  /* หน้าปก พลิกเป็นหมึกเข้มบนกระดาษขาว แทนการหวังให้พิมพ์พื้นหลัง
   * ได้ผลพลอยได้คือไม่กินหมึกทั้งแผ่น */
  .hero{background:none; color:#111; padding:0; margin:0 0 28px;
        border-bottom:2px solid var(--navy)}
  .hero h1{color:#111}
  .hero .kicker,.hero .sub,.hero-cap{color:#3f3b37}
  .hero-cap b{color:#111}
  .statband{background:none}
  .statband dt,.statband dd small{color:#3f3b37}
  .statband dd{color:#111}
  .statband,.statband > div{border-color:#c9c6c2}
  /* ตัวอักษรในแผนภาพหน้าปกกำหนดสีไว้ตายตัวในไฟล์ HTML ต้องคุมทับตรงนี้ */
  .hero svg text{fill:#111}
  .hero svg [stroke="#3b5f8a"],.hero svg [stroke="#2c4b70"]{stroke:#9a9a9a}
  .hero svg [stroke="#7fa6cf"]{stroke:#4a6f9c}
  .hero svg [stroke="#5ec7c7"]{stroke:#0b5f5f}

  /* ป้ายเลขบท เปลี่ยนเป็นกรอบเส้น ตัวเลขจึงไม่หายไปกับพื้น */
  .chapter-head .no{background:none; color:var(--navy);
    border:1.5px solid var(--navy); width:auto; min-width:46px; padding:2px 10px}

  /* สัญลักษณ์สีของกราฟคือกุญแจอ่านภาพ ไม่ใช่ของประดับ จึงต้องบังคับให้พิมพ์สี
   * ใส่เฉพาะจุดนี้จุดเดียว ไม่ใส่ที่หน้าปก ไม่อย่างนั้นได้กระดาษน้ำเงินเต็มแผ่น */
  .legend i{-webkit-print-color-adjust:exact; print-color-adjust:exact;
    border:.5pt solid #767676}
  .chart svg rect{-webkit-print-color-adjust:exact; print-color-adjust:exact}

  /* การ์ดกราฟไม่ต้องมีพื้นและเงาบนกระดาษ */
  .chart{background:none; border:1px solid #c9c6c2}
  .tile{border:1px solid #c9c6c2}
  .note,.note.limit,.note.proof{background:#f4f3f1; border-color:#c9c6c2}

  /* เงาบนกระดาษไม่มีความหมาย เครื่องพิมพ์แปลงเป็นจุดเทา ๆ รอบกล่องเท่านั้น
   * ซึ่งทำให้ขอบดูสกปรกโดยไม่ได้บอกอะไรเพิ่ม */
  .chart,.tile,.scroll,nav.toc ol,.note{box-shadow:none}

  /* ตารางบนจอถูกครอบด้วยการ์ดเพื่อบอกขอบเขตของการเลื่อน
   * บนกระดาษไม่มีการเลื่อน การ์ดจึงเป็นกรอบซ้อนกรอบเปล่า ๆ ถอดทิ้ง
   * แล้วคืนเส้นปิดท้ายตารางแบบเอกสารวิชาการกลับมาแทน */
  .scroll{background:none; border:0; border-radius:0; padding:0}
  tbody tr:last-child{border-bottom:1.5px solid #111}
  figure,.chart{break-inside:avoid}
  tr{break-inside:avoid}
  thead{display:table-header-group}
}

/* ── ช่องว่างรอบขอบจอ ────────────────────────────────
 * ไม่มีการรีเซ็ต margin ของ body แผงหน้าปกที่ตั้งใจให้ชิดขอบจอ
 * จึงมีกรอบสีกระดาษ 8 พิกเซลล้อมอยู่ และเสียความกว้างไป 16 พิกเซล
 * ซึ่งบนจอ 320 พิกเซลคิดเป็น 5% ของทั้งจอ */
body{margin:0}

/* ── กรอบที่ต้องเลื่อน ต้องเลื่อนด้วยแป้นพิมพ์ได้ ──────────
 * ผู้ที่ใช้แป้นพิมพ์อย่างเดียวเลื่อนกรอบด้วยลูกศรไม่ได้ถ้ากรอบรับโฟกัสไม่ได้
 * สคริปต์เป็นผู้ใส่ tabindex ให้เฉพาะกรอบที่เลื่อนได้จริง */
.scroll:focus-visible,.figscroll:focus-visible{
  outline:2px solid var(--teal); outline-offset:3px; border-radius:4px;
}

/* ══ 6. กรอบการเรียนรู้และประเมินผล ═════════════════
 * ส่วนที่ภาคแรกของเอกสารต้องใช้เพิ่ม รายชื่อผู้จัดทำ ป้ายสถานะ และหัวภาค
 */

/* ── รายชื่อผู้จัดทำ ─────────────────────────────────── */
.authors{
  list-style:none; margin:0; padding:0; counter-reset:au;
  display:grid; gap:2px;
}
.authors li{
  counter-increment:au; padding:11px 0; border-bottom:1px solid var(--rule);
  display:flex; gap:14px; align-items:baseline; font-size:16.5px;
}
.authors li:last-child{border-bottom:0}
.authors li::before{
  content:counter(au) "."; color:var(--navy); font-weight:600;
  font-variant-numeric:tabular-nums; min-width:1.6em;
}
/* ช่องเว้นไว้ให้เขียนชื่อด้วยมือ ทั้งบนจอและบนกระดาษ */
.authors li.blank .fill{
  flex:1; border-bottom:1px dotted var(--rule-strong);
  min-width:12ch; transform:translateY(-.2em);
}

/* ── ป้ายสถานะข้างหัวข้อ ──────────────────────────────
 * หัวข้อยาวได้ ป้ายจึงต้องไม่ดันบรรทัดจนหัวข้อตัดคำแปลก ๆ
 * และต้องไม่ถูกขีดเส้นข้างของ h3 กลืนไป */
h3 .tag{
  vertical-align:middle; margin-left:8px; font-size:11.5px;
  position:relative; top:-1px; white-space:nowrap;
}
@media (max-width:520px){
  h3 .tag{display:inline-block; margin-left:0; margin-top:6px}
}

/* ── การพิมพ์ ────────────────────────────────────────
 * ป้ายสถานะเป็นสาระ ไม่ใช่ของประดับ ผู้สอนใช้ดูว่าหัวข้อไหนให้ผู้เรียนลงมือได้
 * จึงต้องบังคับให้พิมพ์สีออกมา เหมือนที่ทำกับสัญลักษณ์สีของกราฟ */
@media print{
  .tag{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    border:.5pt solid #767676;
  }
  .authors li{border-bottom-color:#c9c6c2}
  .authors li.blank .fill{border-bottom-color:#767676}
}

/* ── หัวคั่นภาค ──────────────────────────────────────
 * เอกสารนี้มีสองภาคที่อ่านคนละแบบ ภาคแรกคือกรอบการเรียนรู้ ภาคสองคือระบบ
 * ต้องมีเส้นคั่นที่หนักพอให้รู้ว่ากำลังข้ามไปอีกเรื่อง ไม่ใช่แค่ขึ้นบทใหม่ */
.part-rule{
  margin:76px 0 0; padding:10px 0; text-align:center;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--navy);
  border-top:2px solid var(--navy); border-bottom:1px solid var(--rule);
}
.part-rule + .chapter{padding-top:40px}
nav.toc .toc-part{padding-left:12px; padding-right:12px;
  margin:22px 0 8px; font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--navy);
}
nav.toc .toc-part:first-of-type{margin-top:4px}
nav.toc ol.toc-list{list-style:none; margin:0; padding:0; counter-reset:none}
nav.toc ol.toc-list li{counter-increment:none}
nav.toc ol.toc-list a::before{content:none}
@media print{ .part-rule{break-before:page} }

/* ══ 7. น้ำหนักตัวอักษรตามมาตรฐานบ้าน ═════════════════
 *
 * ธีมของบ้านกำหนดน้ำหนักไว้ชัดเจน หัวข้อใหญ่สองระดับแรกหนา 700
 * ระดับรองลงมา 600 ส่วนเนื้อความ 400 · ปุ่มหนา 600 และไม่แปลงเป็นตัวพิมพ์ใหญ่
 *
 * ขนาดตัวอักษรของเอกสารนี้ไม่ได้ลอกจากธีมทั้งดุ้น เพราะธีมนั้นตั้งไว้
 * สำหรับหน้าจอที่คนกวาดสายตาหาตัวเลข ไม่ใช่เอกสารที่คนนั่งอ่านยาว ๆ
 * เอกสารจึงคงตัวเนื้อความไว้ที่สิบเจ็ดพิกเซล ระยะบรรทัด 1.75 ตามเดิม
 */
h3,h4,.front h2,nav.toc .toc-part{font-weight:600}
.hero h1,.chapter-head h2{font-weight:700}
button,.btn{font-weight:600; text-transform:none}

/* ตัวเลขที่ต้องเรียงตรงคอลัมน์ ต้องกว้างเท่ากันทุกหลัก */
td.n,th.n,.num,.tile .v,.statband dd{font-variant-numeric:tabular-nums}