/* public.css — หน้าอธิบายระบบของระบบสาธิต (worker/demo/overview_page.js · docs/DEMO_MODE.md §9)
   ใช้คู่ /styles.css (ฟอนต์ สี โหมดมืด) · หน้านี้ไม่มีสคริปต์ จึงจัดหน้าด้วย CSS ล้วน · อ่านได้บนมือถือ (ตารางเลื่อนแนวนอนในกรอบของตัวเอง) */

body.pub { display: block; }
.pub-in { max-width: 920px; margin: 0 auto; padding: 0 16px; }
.pub-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.pub-top .pub-in { display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.pub-name { display: flex; flex-direction: column; line-height: 1.35; flex: 1 1 260px; min-width: 0; }
.pub-name span { font-size: .875rem; color: var(--ink-2); }
.pub-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); background: var(--green); color: #fff; font-weight: 600; text-decoration: none; }
.pub-cta:hover { background: var(--green-hover); color: #fff; }
.pub-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 4px; color: var(--green-ink); font-weight: 600; }
.pub-banner { background: var(--amber-soft); color: var(--amber-ink); border-bottom: 1px solid var(--amber-line); font-size: .9rem; font-weight: 600; }
.pub-banner .pub-in { padding-top: 6px; padding-bottom: 6px; }
.pub-doc { max-width: 920px; margin: 0 auto; padding: 20px 16px 40px; }
.pub-doc h1 { font-size: 1.6rem; margin: 8px 0 12px; }
.pub-doc h2 { font-size: 1.25rem; margin: 32px 0 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.pub-doc h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.pub-doc blockquote { margin: 12px 0; padding: 8px 14px; border-left: 4px solid var(--green-line); background: var(--surface-2); border-radius: var(--r-xs); color: var(--ink-2); font-size: .95rem; }
.pub-doc blockquote p { margin: 4px 0; }
.pub-doc pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; font-size: .875rem; line-height: 1.55; }
.pub-doc code { font-family: var(--mono); font-size: .9em; }
.pub-doc .table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pub-doc table { border-collapse: collapse; width: 100%; font-size: .95rem; background: var(--surface); }
.pub-doc th, .pub-doc td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.pub-doc th { background: var(--surface-2); font-weight: 600; }
.pub-doc tr:last-child td { border-bottom: 0; }
.pub-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 18px; margin: 8px 0 16px; }
.pub-toc p { margin: 0 0 4px; }
.pub-toc ul { margin: 0; padding-left: 0; list-style: none; columns: 2 260px; }
.pub-toc li { margin: 2px 0; break-inside: avoid; }
.pub-foot { border-top: 1px solid var(--line); background: var(--surface); font-size: .875rem; color: var(--ink-2); }
.pub-foot .pub-in { padding-top: 10px; padding-bottom: 10px; }
@media print { .pub-cta, .pub-toc { display: none; } .pub-doc { padding: 0; } }