/* ชุดหน้าตากลางของหน้าเว็บ docs/site — ทุกหน้าใช้ไฟล์นี้ */
:root{--bg:#f4f6fa;--card:#fff;--ink:#1b2230;--mute:#5b6678;--line:#d9dee7;--acc:#266caa;--chip:#eef1f7;--code:#f0f3f8;
  --ok:#1a7f4b;--wip:#a35d00;--doc:#5b6678;--plan:#7d838a;--bad:#b3261e;--get:#1f8a52;--wr:#b86e00;--k:#7a3fd1;--s:#1f8a52;--n:#b86e00}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10141b;--card:#1a212b;--ink:#e6eaf1;--mute:#9aa6b7;--line:#2c3644;--acc:#7da2ff;--chip:#232c39;--code:#141a23;
  --ok:#4cc27f;--wip:#e0a03a;--doc:#9aa6b7;--plan:#8a919a;--bad:#f07167;--get:#4cc27f;--wr:#e0a03a;--k:#c79bff;--s:#6fd39b;--n:#f0a35e}}
:root[data-theme="dark"]{--bg:#10141b;--card:#1a212b;--ink:#e6eaf1;--mute:#9aa6b7;--line:#2c3644;--acc:#7da2ff;--chip:#232c39;--code:#141a23;
  --ok:#4cc27f;--wip:#e0a03a;--doc:#9aa6b7;--plan:#8a919a;--bad:#f07167;--get:#4cc27f;--wr:#e0a03a;--k:#c79bff;--s:#6fd39b;--n:#f0a35e}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Roboto,sans-serif}
a{color:var(--acc)}
code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{max-width:72rem;margin:0 auto;padding:0 16px}

/* แถบนำทางบนสุด — เหมือนกันทุกหน้า */
.topnav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topnav .wrap{display:flex;align-items:center;gap:6px;min-height:52px;flex-wrap:wrap}
.brand{white-space:nowrap;display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);text-decoration:none;margin-right:10px}
.brand img{width:22px;height:24px}
.topnav a.tab{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--mute);font-size:14px}
.topnav a.tab:hover{color:var(--ink);background:var(--chip)}
.topnav a.tab.on{color:var(--card);background:var(--acc)}
.topnav .asof{margin-left:auto;font-size:12px;color:var(--mute)}
.topnav a.docs{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:5px 12px 5px 9px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--card)}
.topnav a.docs:hover{border-color:var(--acc);color:var(--acc)}
.topnav a.docs svg{display:block}
@media(max-width:680px){.topnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.topnav .asof{display:none}.topnav a.docs{margin-left:auto;flex:none;position:sticky;right:0}.topnav a.tab{white-space:nowrap;padding:6px 10px}.brand{margin-right:4px}}

header.page{padding:28px 0 8px}
header.page h1{margin:0 0 4px;font-size:26px;letter-spacing:-.01em}
.sub{margin:0;color:var(--mute)}
.sec{margin:28px 0 12px;font-size:13px;letter-spacing:.06em;color:var(--mute);font-weight:600}
footer.page{color:var(--mute);font-size:13px;padding:28px 16px 40px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
@media(max-width:680px){.grid2{grid-template-columns:1fr}}

/* ป้ายสถานะ — ใช้ตรงกันทุกหน้า */
.stg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;border-radius:999px;padding:0 9px;background:var(--chip);white-space:nowrap;font-weight:600}
.stg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stg.live{color:var(--ok)}.stg.building{color:var(--wip)}.stg.docs{color:var(--doc)}.stg.planned{color:var(--plan)}

/* โลโก้/ไอคอนบ้าน */
.lg{flex:none;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px}
.lg img{max-width:100%;max-height:100%;object-fit:contain}
.lg.ic{background:var(--chip)}
.lg svg{width:24px;height:24px;color:var(--acc)}

/* ปุ่มลิงก์ */
.go{display:block;padding:11px 14px;margin:0 0 8px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);background:var(--chip)}
.go:hover{border-color:var(--acc)}
.go b{display:block;color:var(--acc)}
.go code{font-size:12px;color:var(--mute);word-break:break-all}
.go small{display:block;color:var(--mute);font-size:13px}
.pill{display:inline-block;font-size:11.5px;border-radius:999px;padding:0 9px;background:var(--chip);color:var(--mute);text-decoration:none;margin:2px 4px 2px 0}
a.pill:hover{color:var(--acc)}

/* ไอคอนในบรรทัด — ใช้แทน emoji ทุกที่ */
.ico{display:inline-flex;vertical-align:-2px;margin:0 2px}.ico svg{width:14px;height:14px}.ico.ok{color:var(--ok)}.ico.warn{color:var(--wip)}

/* ชุดหน้าเรียบ (2026-10-02 รอบ 2) — หัวข้อส่วน · กล่องลิงก์บรรทัดเดียว · ป้ายเล็ก */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:32px 0 10px}
.shead h2{margin:0;font-size:17px}
.shead a{font-size:13px;text-decoration:none;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tile{display:flex;gap:10px;align-items:center;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);min-width:0}
.tile:hover{border-color:var(--acc)}
.tile .lg{width:34px;height:34px;padding:4px;border-radius:9px}.tile .lg svg{width:20px;height:20px}
.tile b{display:block;font-size:14.5px;line-height:1.25}
.tile .stg{font-size:11px;padding:0 7px}
.tile.dim{border-style:dashed}
.lrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);min-width:0}
.lrow:first-child{border-top:0}
a.lrow:hover b{color:var(--acc)}
.lrow .t{flex:1;min-width:0}
.lrow b{display:block;font-weight:600;font-size:14.5px}
.lrow small{display:block;color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow code{flex:none;color:var(--mute);font-size:12px}
.tg{flex:none;font-size:11px;border-radius:999px;padding:0 8px;background:var(--chip);white-space:nowrap;font-weight:600}
.tg.t-ok{color:var(--ok)}.tg.t-lg{color:var(--wip)}.tg.t-in{color:var(--bad)}
@media(max-width:560px){.lrow code{display:none}}
@media(max-width:560px){.shead{flex-wrap:wrap}.shead h2{white-space:nowrap}.tiles{grid-template-columns:1fr 1fr;gap:8px}.tile{padding:8px 10px;gap:8px}.tile .lg{width:28px;height:28px}}

/* แถบความคืบหน้าของงานเบื้องหลัง (jobs.progress) */
.pbar{display:block;margin:4px 0 2px;font-size:12px;color:var(--mute)}
.pbar .pt b{color:var(--ink)}
.pbar i{display:block;height:6px;border-radius:99px;background:var(--chip);margin-top:2px;position:relative;overflow:hidden}
.pbar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--acc);border-radius:99px}