/* ============================================================
   ธาตุทอง GPAS | theme.css ระบบพื้นฐานของหน้าเว็บทุกหน้า (ไม่ใช้กับสไลด์) ผิวธีมอยู่ใน skin.css
   ค่าสีต้องตรงกับ deck.css เสมอ ถ้าแก้ที่นี่ต้องแก้ที่นั่นด้วย
   กติกา สีประจำขั้น GPAS ห้าสีล็อกไว้ ตัวอักษรใช้ได้เฉพาะคู่สี deep
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@500;600;700&family=Noto+Sans+Thai:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --paper: #f5efe3; --paper-2: #ece3d2; --card: #fffaf1; --ink: #0f2a3d; --ink-2: #173b53; --muted: #4b6070;
  --line: rgba(15, 42, 61, .18); --line-2: rgba(15, 42, 61, .1);
  --g: #0e8a8a; --g-d: #0a6363; --g-s: rgba(14, 138, 138, .10);
  --p: #1f63b5; --p-d: #184d8c; --p-s: rgba(31, 99, 181, .10);
  --a1: #d9642b; --a1-d: #9e4516; --a1-s: rgba(217, 100, 43, .10);
  --a2: #c99414; --a2-d: #7a5700; --a2-s: rgba(201, 148, 20, .14);
  --s: #3f8a4f; --s-d: #2e6a3b; --s-s: rgba(63, 138, 79, .12);
  --out: #c0304a; --out-d: #9b1c30; --out-s: rgba(192, 48, 74, .08);
  --sun: #d9642b;
  --f-head: 'Anuphan', 'Noto Sans Thai', system-ui, sans-serif;
  --f-body: 'Noto Sans Thai', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --r: 12px; --shadow: 6px 6px 0 rgba(15, 42, 61, .14); --tap: 44px; --nav-h: 64px;
  /* บันไดขนาด 6 ขั้น (02-DESIGN-SYSTEM ข้อ 3.2) ฐาน rem คือขนาดเนื้อความ 17px จอใหญ่ 16px จอแคบ */
  --t-xs: .82rem; --t-sm: .9rem; --t-base: 1rem; --t-md: 1.18rem;
  --t-h2: clamp(1.5rem, 3.2vw, 1.9rem); --t-h1: clamp(1.9rem, 5.2vw, 3rem);
  /* ระยะบรรทัด 3 ค่า หัวข้อ เนื้อความและตาราง ปุ่มป้ายชิป */
  --lh-head: 1.35; --lh-body: 1.7; --lh-ui: 1.5;
  /* ระยะเยื้องรายการ 2 ค่า รายการธรรมดา และรายการที่มีวงกลมตัวเลขหรือช่องติ๊ก */
  --ind: 1.4em; --ind-badge: 56px;
  /* ระยะห่าง 5 ระดับ */
  --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px; --sp-5: 34px;
}
* { box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-base); line-height: var(--lh-body);
  background-image:
    linear-gradient(rgba(15, 42, 61, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 42, 61, .07) 1px, transparent 1px),
    linear-gradient(rgba(15, 42, 61, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 42, 61, .035) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
h1, h2, h3, h4 { font-family: var(--f-head); line-height: var(--lh-head); margin: 0 0 .45em; }
h1 { font-size: var(--t-h1); letter-spacing: -.005em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); }
p { margin: .3em 0 .9em; }
/* รายการธรรมดาเยื้องค่าเดียวทั้งชุด รายการที่มีคลาสของตัวเองกำหนดเองได้ (:where ไม่เพิ่มน้ำหนักตัวเลือก) */
:where(ul:not([class]), ol:not([class]), ol.small, ol.plain, ul.small) { padding-left: var(--ind); }
:where(ul:not([class]), ol:not([class]), ol.small, ol.plain, ul.small) > :where(li + li) { margin-top: .25em; }
a { color: var(--p-d); text-underline-offset: 3px; }
code, .mono { font-family: var(--f-mono); font-size: .92em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }

/* แถบนำทาง */
.topnav { position: sticky; top: 0; z-index: 30; background: rgba(15, 42, 61, .96); color: var(--paper); }
.topnav .wrap { display: flex; align-items: center; gap: 14px; min-height: var(--nav-h); }
.brand { font-family: var(--f-head); font-weight: 700; color: var(--paper); text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(217, 100, 43, .3); }
.topnav nav { margin-left: auto; overflow-x: auto; }
.topnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.topnav ul > li { margin: 0; } /* ล้าง margin-top ของ li + li จากกฎรายการทั่วไปบรรทัด 51 ไม่ให้ปุ่มแรกลอยสูงกว่าปุ่มอื่น */
.topnav a.nl { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--paper); text-decoration: none; border-radius: 999px; font-weight: 500; white-space: nowrap; font-size: var(--t-sm); line-height: var(--lh-ui); }
.topnav a.nl:hover, .topnav a.nl[aria-current="page"] { background: rgba(245, 239, 227, .14); }

/* ส่วนหัว */
.hero { padding-top: 44px; padding-bottom: 26px; } /* ไม่ใช้ shorthand เพื่อคงระยะข้าง 16px ของ .wrap ให้ขอบซ้ายตรงกับส่วนอื่น */
/* จังหวะในส่วนหัว ป้ายนำถึงหัวข้อ 10 หัวข้อถึงข้อความนำ 10 ระหว่างบล็อก 16 */
.hero > * { margin-top: 0; margin-bottom: 0; }
.hero > * + * { margin-top: var(--sp-3); }
.hero > .eyebrow + *, .hero > h1 + * { margin-top: var(--sp-2); }
.lead { font-size: var(--t-md); max-width: 760px; }
.promise { display: inline-block; font-family: var(--f-head); font-weight: 600; font-size: var(--t-base); line-height: var(--lh-ui); background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 999px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.hero > .facts { margin-top: var(--sp-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); background: var(--card); border-radius: 999px; padding: 3px 12px; font-size: var(--t-sm); line-height: var(--lh-ui); }

/* ส่วนเนื้อหา */
section.blk { margin: var(--sp-5) auto; }
/* จังหวะแนวตั้งในส่วน ใกล้กันในกลุ่ม ห่างกันระหว่างกลุ่ม (02-DESIGN-SYSTEM ข้อ 9)
   ลูกโดยตรงของ section.blk ไม่มี margin ของตัวเอง ระยะมาจากกฎชุดนี้ชุดเดียว */
section.blk > * { margin-top: 0; margin-bottom: 0; }
section.blk > * + * { margin-top: var(--sp-3); }
section.blk > h3 { margin-top: var(--sp-4); }
section.blk > .blk-head + * { margin-top: 18px; }
section.blk > h3 + * { margin-top: var(--sp-2); }
/* คำอธิบายใต้ตาราง ตาข่าย หรือการ์ด อยู่ชิดกับสิ่งที่อธิบาย */
section.blk > * + p.small, .tbl + p.small, .grid + p.small { margin-top: var(--sp-2); }
/* กล่องที่ซ้อนในคอลัมน์ และเนื้อหาในกล่องข้อความ เว้นค่าเดียว */
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-2); }
:is(.soft, .note, .warn, .guard) > :is(p, ul, ol, div, table, .tbl) { margin-top: var(--sp-1); margin-bottom: 0; }
:is(.soft, .note, .warn, .guard) > :first-child { margin-top: 0; }
/* หัวข้อของส่วน ป้ายนำเป็นบรรทัดเล็กเหนือ h2 คำอธิบายรองอยู่ใต้ h2 (02-DESIGN-SYSTEM ข้อ 4) */
.blk-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 18px; }
.blk-head h2 { margin: 0; }
.blk-head .num,
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-body); font-weight: 600; font-size: var(--t-xs); line-height: var(--lh-ui);
  color: var(--g-d); letter-spacing: 0; text-transform: none;
}
.blk-head .num::before,
.eyebrow::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.blk-sub { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: var(--lh-body); max-width: 72ch; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.g5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.card { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.card p { margin: 0; }
.card .muted { color: var(--muted); }
.card .go { margin-top: auto; padding-top: 8px; }
.card.deck-extra { margin-top: 16px; }
.soft { background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.note { border-left: 6px solid var(--g); background: var(--card); padding: 12px 16px; border-radius: 0 var(--r) var(--r) 0; }
.warn { border: 2px dashed var(--out-d); background: var(--out-s); border-radius: var(--r); padding: 12px 16px; }
.warn strong { color: var(--out-d); }
.guard { border: 2px solid var(--g-d); background: var(--g-s); border-radius: var(--r); padding: 12px 16px; }
.guard .lbl { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; color: var(--g-d); }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }

/* ป้ายขั้น GPAS */
.st { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--f-body); font-weight: 600; font-size: var(--t-xs); line-height: var(--lh-ui); color: #fff; border-radius: 999px; padding: 2px 10px; min-width: 36px; width: max-content; }
.st-G { background: var(--g-d); } .st-P { background: var(--p-d); } .st-A1 { background: var(--a1-d); } .st-A2 { background: var(--a2-d); } .st-S { background: var(--s-d); } .st-ink { background: var(--ink); }
.bar-G { border-top: 8px solid var(--g); } .bar-P { border-top: 8px solid var(--p); } .bar-A1 { border-top: 8px solid var(--a1); } .bar-A2 { border-top: 8px solid var(--a2); } .bar-S { border-top: 8px solid var(--s); } .bar-ink { border-top: 8px solid var(--ink); }

/* ปุ่ม */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 8px 18px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; border-radius: 999px; cursor: pointer; text-decoration: none; line-height: var(--lh-ui); }
.btn:hover { background: var(--paper-2); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--ink-2); }
.btn.g { background: var(--g-d); border-color: var(--g-d); color: #fff; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .55; cursor: not-allowed; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.big-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--sp-3); }
.big-link { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); min-height: 110px; }
.big-link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(15, 42, 61, .18); }
.big-link strong { font-family: var(--f-head); font-size: var(--t-md); line-height: var(--lh-head); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .big-link:hover { transform: none; } }

/* กำหนดการ */
.agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agenda li { display: grid; grid-template-columns: 200px 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: var(--r); padding: 12px 16px; }
.agenda li.break { background: transparent; border-style: dashed; }
.agenda .tm { font-family: var(--f-mono); font-size: var(--t-sm); }
.agenda h3 { margin: 0; font-size: var(--t-base); }
.agenda p { margin: 2px 0 0; color: var(--muted); font-size: var(--t-sm); }
@media (max-width: 640px) { .agenda li { grid-template-columns: 1fr; gap: 4px; } }

/* ตาราง */
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--card); font-size: var(--t-sm); }
th, td { border: 1.5px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
th { background: var(--paper-2); font-family: var(--f-head); }

/* ฟอร์มและคำสั่ง */
/* ช่องกรอก ป้ายบรรทัดเดียว ช่อง และคำอธิบายใต้ช่อง ของทุกคอลัมน์ในแถวเดียวกันตรงแนวกัน (02-DESIGN-SYSTEM ข้อ 5) */
.fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  column-gap: 16px; row-gap: 18px;
  align-items: start;
}
label.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f-lab { font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-ui); }
.f-help { font-weight: 400; font-size: var(--t-xs); line-height: var(--lh-ui); color: var(--muted); }
.fields textarea { min-height: 112px; resize: vertical; }
/* subgrid ป้าย ช่อง และคำอธิบาย ใช้แถว grid ร่วมกันทั้งแถว ใช้เฉพาะช่องใน .fields (ช่อง #qrIn ในหน้าสตูดิโอไม่อยู่ใน .fields) */
@supports (grid-template-rows: subgrid) {
  .fields { row-gap: 0; }
  .fields > label.f {
    display: grid; grid-row: span 3; grid-template-rows: subgrid;
    row-gap: 6px; align-content: start; padding-bottom: 18px;
  }
  .fields > label.f > input, .fields > label.f > select, .fields > label.f > .f-help { align-self: start; }
}
input[type=text], input[type=url], textarea, select { width: 100%; max-width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 9px 12px; min-height: var(--tap); }
textarea { min-height: 90px; resize: vertical; }
.prompt { background: #fff; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.prompt-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--paper-2); border-bottom: 2px solid var(--ink); }
.prompt-head h4 { margin: 0; font-size: var(--t-base); }
.prompt pre { margin: 0; padding: 14px; white-space: pre-wrap; word-break: break-word; font-family: var(--f-body); font-size: var(--t-sm); line-height: var(--lh-body); max-height: 360px; overflow: auto; }
.prompt pre .fill { background: var(--a2-s); border-bottom: 2px solid var(--a2); }
.prompt pre .todo { background: var(--out-s); border-bottom: 2px dashed var(--out-d); }
.verify { padding: 10px 14px; border-top: 2px dashed var(--line); background: var(--g-s); font-size: var(--t-sm); }
.verify strong { color: var(--g-d); }
details.acc { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); margin: 0; }
details.acc + details.acc { margin-top: var(--sp-2); }
details.acc > summary { cursor: pointer; list-style: none; padding: 14px 18px; display: flex; gap: 12px; align-items: center; min-height: var(--tap); font-family: var(--f-head); font-weight: 600; font-size: var(--t-base); line-height: var(--lh-head); }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after { content: '+'; margin-left: auto; font-family: var(--f-mono); font-size: 1.3rem; }
details.acc[open] > summary::after { content: '−'; }
details.acc > .in { padding: 0 18px 18px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist label { display: flex; gap: 16px; align-items: flex-start; background: var(--card); border: 2px solid var(--line); border-radius: 8px; padding: 10px 12px 10px 18px; cursor: pointer; }
.checklist input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--g-d); flex: none; }
.steps-ol { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps-ol > li { counter-increment: s; position: relative; padding: 12px 14px 12px var(--ind-badge); background: var(--card); border: 2px solid var(--line); border-radius: var(--r); }
.steps-ol > li::before { content: counter(s); position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-weight: 600; }
.kh { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.kh .k { border: 2px solid var(--ink); border-radius: 10px; padding: 10px; background: var(--card); min-width: 120px; }
.kh .k.ai { background: var(--paper-2); border-style: dashed; }
.kh .k .n { font-family: var(--f-body); font-size: var(--t-xs); color: var(--muted); }
.kh .k .who { font-size: var(--t-xs); font-weight: 600; margin-top: 4px; }

/* QR */
.qrbox { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.qrbox .qr-in { flex: 1 1 320px; }
.qrbox .qr-in > * + * { margin-top: var(--sp-2); }
.qrbox canvas, .qrbox img { background: #fff; padding: 10px; border: 2px solid var(--ink); border-radius: 10px; }

footer.site { margin-top: 50px; background: var(--ink); color: var(--paper); padding: 28px 0 36px; }
footer.site a { color: #f2c45a; }
footer.site .muted { color: rgba(245, 239, 227, .72); }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; }
.toast.on { opacity: 1; }
[hidden] { display: none !important; }
details.acc > summary .st { flex: none; }
.navbtn, .m-only { display: none; }

/* ---------- จอแคบ (03-MOBILE-SPEC) เรียงจากกว้างไปแคบ ---------- */
/* 760px ลงไป ข้อความที่ใช้เฉพาะมือถือ */
@media (max-width: 760px) {
  :root { --nav-h: 56px; }
  .m-only { display: block; }
}
/* 1000px ลงไป ปุ่มเมนูแทนแถบลิงก์ (ลิงก์ 7 รายการกับป้ายแทร็กเกินความกว้างของแถบตั้งแต่ราว 960px) */
@media (max-width: 1000px) {
  .js-nav .topnav .navbtn {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: var(--tap); min-width: 76px; padding: 0 16px;
    border: 2px solid rgba(245, 239, 227, .6); border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-weight: 600; cursor: pointer;
  }
  .js-nav .topnav .navbtn[aria-expanded="true"] { background: rgba(245, 239, 227, .16); }
  .js-nav .topnav nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--ink);
    border-top: 1px solid rgba(245, 239, 227, .18); box-shadow: 0 12px 24px rgba(15, 42, 61, .28); max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .js-nav .topnav.nav-open nav { display: block; }
  .js-nav .topnav ul { flex-direction: column; gap: 0; padding: 6px 0 10px; }
  .js-nav .topnav a.nl { min-height: 48px; padding: 0 20px; border-radius: 0; border-left: 4px solid transparent; font-size: var(--t-base); }
  .js-nav .topnav a.nl[aria-current="page"] { background: rgba(245, 239, 227, .1); border-left-color: var(--sun); }
  /* ถ้าไม่มี JavaScript แถบลิงก์เป็นแถวที่สอง เลื่อนแนวนอนได้ */
  html:not(.js-nav) .topnav .wrap { flex-wrap: wrap; }
  html:not(.js-nav) .topnav nav { order: 3; width: 100%; margin-left: 0; padding-bottom: 6px; }
}
/* 640px ลงไป ตารางเป็นการ์ด วงรอบ 7 ขั้นเป็นรายการ ลิงก์ใหญ่ 2 คอลัมน์ */
@media (max-width: 640px) {
  .tbl table.stack, .tbl table.stack tbody, .tbl table.stack tr, .tbl table.stack td { display: block; width: 100%; }
  .tbl table.stack { background: transparent; }
  .tbl table.stack thead, .tbl table.stack tr.head-row { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl table.stack tr { border: 2px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 10px; padding: 6px 12px; }
  .tbl table.stack td { border: 0; border-bottom: 1px dashed var(--line); padding: 8px 0; }
  .tbl table.stack td:last-child { border-bottom: 0; }
  .tbl table.stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--f-body); font-weight: 600; font-size: var(--t-xs); color: var(--g-d); }
  .tbl table.stack td:first-child { font-family: var(--f-head); font-weight: 600; }
  .kh { grid-template-columns: 1fr; overflow: visible; }
  .kh .k { min-width: 0; display: grid; grid-template-columns: 5.2em 1fr; column-gap: 12px; align-items: baseline; }
  .kh .k > * { grid-column: 2; }
  .kh .k > :first-child { grid-column: 1; grid-row: 1 / span 3; }
  .big-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .big-link { padding: 12px 14px; min-height: 0; }
  .prompt pre { max-height: 50vh; }
  .qrbox { flex-direction: column; align-items: stretch; }
  .qrbox .qr-in { flex: none; }
  .qrbox svg { max-width: 240px; height: auto; }
}
@media (max-width: 560px) { html { font-size: 16px; } .hero { padding-top: 30px; } .card { padding: 15px; } section.blk { margin: var(--sp-4) auto; } }
/* 480px ลงไป ปุ่มหลักในแถวปุ่มกว้างเต็มแถว */
@media (max-width: 480px) { .btnrow > .btn.primary { flex: 1 1 100%; } }
@media print { .topnav, .btn, .toast, footer.site { display: none !important; } body { background: #fff; } .card, .prompt { box-shadow: none; } .prompt pre { max-height: none; } }
#refs, .tree + p, .prompt pre, .mono { overflow-wrap: anywhere; }

/* ---------- แทร็กช่วงบ่าย (assets/track.js) ---------- */
.card.is-now { box-shadow: 0 0 0 3px var(--g-d), var(--shadow); }
.trackline { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

/* ---------- เอกสารพิมพ์ A4 (plan.html) ---------- */
.doc { background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 28px 32px; margin: 18px auto 34px; max-width: 900px; }
.doc h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 4px 0 10px; }
.doc h2 { font-size: var(--t-md); margin: 24px 0 10px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); }
.doc h3 { font-size: var(--t-base); margin: 14px 0 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: #fff; }
.doc th, .doc td { border: 1.5px solid rgba(15, 42, 61, .35); padding: 7px 9px; vertical-align: top; text-align: left; }
.doc th { background: var(--paper-2); font-family: var(--f-head); }
.doc ul, .doc ol { margin: .3em 0 .8em; padding: 0 0 0 var(--ind); }
.doc li { margin: .15em 0; }
.doc .meta-t td:first-child { width: 28%; font-weight: 600; background: #fbf8f1; }
.doc .step-t td:first-child { width: 17%; }
.doc .step-t .st { margin-bottom: 4px; }
.doc .fill { color: var(--out-d); font-weight: 600; }
.doc .lines { border: 1.5px solid rgba(15, 42, 61, .35); border-radius: 6px; min-height: 7.5rem; background: repeating-linear-gradient(#fff 0 2.05rem, rgba(15, 42, 61, .18) 2.05rem calc(2.05rem + 1px)); }
.doc .docfoot { margin-top: 26px; padding-top: 8px; border-top: 1.5px solid var(--line); font-size: var(--t-xs); color: var(--muted); }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-tabs .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 640px) { .doc { padding: 18px 14px; } .doc .step-t td:first-child { width: auto; } }
@page { size: A4 portrait; margin: 14mm; }
@media print {
  .noprint, .trackbtn, .skip { display: none !important; }
  body { background: #fff !important; font-size: 11.5pt; line-height: 1.5; }
  .doc { border: 0; padding: 0; margin: 0; max-width: none; }
  .doc h2 { break-after: avoid; }
  .doc tr, .doc .keep { break-inside: avoid; }
  .doc a { color: inherit; text-decoration: none; }
  .st { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}