/* POPNIX Flood: หน้าเบาที่ server เรนเดอร์ (/lite/ /health/ /embed/ /api/) ไม่ใช้ Bootstrap ไม่มี JS นอกจาก track.js
   สีคัดลอกจาก :root ของ water.css (กลางวัน/กลางคืนตาม prefers-color-scheme) + สี --ink-* ที่เข้มขึ้นสำหรับตัวหนังสือบนพื้นสว่าง:
   warn/ok/fall ของ water.css ได้ราว 3.8:1 บนพื้นขาว ไม่ถึง 4.5:1 ที่ตัวหนังสือต้องการ (สีเดิมใช้กับจุดสถานะและเส้นขอบ)
   ขนาดเป็น rem/em ตามขนาดตัวอักษรที่ผู้ใช้ตั้งในเบราว์เซอร์; เบราว์เซอร์เก่าที่ไม่รู้จัก var() ได้ตัวดำบนพื้นขาวซึ่งยังอ่านได้ */
:root {
    color-scheme: light dark;
    --font: 'fc-vision', system-ui, -apple-system, "Segoe UI", "Sarabun", "Leelawadee UI", Thonburi, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --bg: #eef3f5; --bg-2: #e3ecf0; --core: #fbfdfe; --line-2: rgba(18, 52, 70, .17);
    --text: #20394a; --strong: #0b1c27; --muted: #5a7384;
    --accent: #1f6f99; --accent-ink: #ffffff; --accent-soft: rgba(31, 111, 153, .11);
    --rise: #c4523a; --fall: #1b8a67; --warn: #b07418; --crit: #cc3d3b; --ok: #268f83; --off: #a3b3bb;
    --shadow: 0 1px 1px rgba(22, 66, 88, .04), 0 14px 34px -18px rgba(22, 66, 88, .32);
    --edge: #c3d2d9;
    --ink-muted: #3f5766; --ink-link: #155a7e; --ink-crit: #a52a28; --ink-warn: #7a4f00; --ink-ok: #17695f; --ink-rise: #8a3a26; --ink-fall: #146b50;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #071219; --bg-2: #0a1822; --core: #0c1c26; --line-2: rgba(150, 205, 232, .17);
        --text: #c9dae3; --strong: #f0f6f9; --muted: #7f98a6;
        --accent: #7cc4e8; --accent-ink: #06202c; --accent-soft: rgba(124, 196, 232, .13);
        --rise: #f08f79; --fall: #58c79d; --warn: #e3b55a; --crit: #f06a66; --ok: #4dbfad; --off: #46606d;
        --shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 20px 44px -22px rgba(0, 10, 18, .9);
        --edge: #213946;
        --ink-muted: #a9bfcb; --ink-link: #8fd0f0; --ink-crit: #f58a86; --ink-warn: #e8c070; --ink-ok: #62cbb9; --ink-rise: #f39d89; --ink-fall: #6fd0aa;
    }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pg { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
    font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.pg h1, .pg h2, .pg h3 { color: var(--strong); font-weight: 700; line-height: 1.25; margin: 0 0 .45em; text-wrap: balance; }
.pg h1 { font-size: 1.9em; letter-spacing: -.01em; }
.pg h2 { font-size: 1.35em; }
.pg h3 { font-size: 1.1em; }
.pg p { margin: 0 0 .8em; }
.pg a { color: var(--ink-link); text-underline-offset: .2em; }
.pg a:hover { text-decoration-thickness: 2px; }
.pg :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pg strong { color: var(--strong); }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 18px; border-radius: 999px; background: var(--accent);
    color: var(--accent-ink) !important; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 16px; }

/* ---------- หัวและท้ายหน้า ---------- */
.top { background: var(--core); border-bottom: 1px solid var(--edge); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 4em; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--strong) !important; font-weight: 700; text-decoration: none; }
.brand img { border-radius: 8px; flex: none; }
.brand b { color: var(--accent); font-weight: 700; }
.brand small { font-size: .8em; font-weight: 600; color: var(--ink-muted); border-left: 1px solid var(--edge); padding-left: 10px; }
.top .lang { font-weight: 700; padding: .15em .8em; border: 2px solid var(--edge); border-radius: 999px; text-decoration: none; }
.top .lang:hover { border-color: var(--accent); }
main { display: block; padding: 28px 0 44px; }
.foot { background: var(--core); border-top: 1px solid var(--edge); padding: 26px 0 34px; color: var(--ink-muted); font-size: .9em; }
.foot p { margin: 0 0 .8em; }
.foot .src { margin: 0 0 1em; padding-left: 1.2em; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.foot .links a { font-weight: 600; }

/* ---------- ส่วนประกอบ ---------- */
.lead { font-size: 1.15em; color: var(--strong); text-wrap: pretty; }
.meta { color: var(--ink-muted); font-size: .92em; }
.card { background: var(--core); border: 1px solid var(--edge); border-radius: 20px; padding: 20px; margin: 0 0 20px; box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.card h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.card h2 small { font-size: .62em; font-weight: 600; color: var(--ink-muted); }
.notice { background: var(--core); color: var(--strong); border: 2px solid var(--warn); border-radius: 14px; padding: 12px 16px; margin: 0 0 20px; }
.notice p:last-child { margin: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 3em; padding: .3em 1.2em; border: 0; border-radius: 14px;
    background: var(--accent); color: var(--accent-ink) !important; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn-line { background: var(--core); color: var(--ink-link) !important; box-shadow: inset 0 0 0 2px var(--accent); }

/* สถานะ: สีช่วยเท่านั้น รูปทรงต่างกัน (วิกฤต = สี่เหลี่ยม, เฝ้าระวัง = ข้าวหลามตัด, ปกติ = วงกลม, ไม่มีค่า = วงกลมกลวง) และมีคำกำกับเสมอ */
.mk { display: inline-block; flex: none; width: .72em; height: .72em; border-radius: 50%; background: var(--ok); vertical-align: -.02em; margin-right: .45em; }
.mk.crit, .mk.flood, .mk.fail { background: var(--crit); border-radius: 2px; }
.mk.warn, .mk.slight, .mk.late { background: var(--warn); border-radius: 1px; transform: rotate(45deg) scale(.86); }
.mk.off, .mk.none, .mk.unk { background: transparent; box-shadow: inset 0 0 0 2px var(--off); }
.pill { display: inline-flex; align-items: center; padding: .3em .95em; margin: 0 0 .9em; border-radius: 999px; border: 2px solid var(--off);
    background: var(--core); color: var(--strong); font-weight: 700; }
.pill.lv-crit { border-color: var(--crit); } .pill.lv-warn { border-color: var(--warn); } .pill.lv-ok { border-color: var(--ok); }
.ar { display: inline-block; width: 1.17em; font-weight: 700; color: var(--ink-muted); }
.tr { display: block; font-size: .88em; font-weight: 600; white-space: normal; color: var(--ink-muted); }
.tr-up { color: var(--ink-rise); } .tr-down { color: var(--ink-fall); }

/* ตาราง: caption + scope ให้โปรแกรมอ่านหน้าจอ; จอแคบเลื่อนแนวนอนได้ (กล่องเลื่อนรับโฟกัสจากคีย์บอร์ด) */
.tbl-wrap { overflow-x: auto; margin: 0 0 .7em; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl caption { caption-side: top; text-align: left; padding: 0 0 .5em; color: var(--strong); font-weight: 700; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .55em .5em; border-bottom: 1px solid var(--edge); }
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl thead th { padding-top: 0; font-size: .8em; font-weight: 700; color: var(--ink-muted); border-bottom: 2px solid var(--edge); }
.tbl tbody th { font-weight: 600; color: var(--strong); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl thead .num { white-space: normal; }
.tbl .st { white-space: nowrap; }
.tbl small { display: block; color: var(--ink-muted); font-size: .8em; font-weight: 400; }
.fine { font-size: .85em; color: var(--ink-muted); }
.nw { white-space: nowrap; }

/* เลือกเขต: ปุ่มใหญ่ + select ธรรมดา (ใช้ได้โดยไม่มี JS) */
.big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0 0 1.1em; padding: 0; }
.big a { display: flex; align-items: center; justify-content: center; min-height: 3.1em; padding: .35em .6em; border-radius: 16px; border: 2px solid var(--accent);
    background: var(--core); color: var(--strong) !important; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; }
.big a:hover { background: var(--accent-soft); }
.big a[aria-current] { background: var(--accent); color: var(--accent-ink) !important; }
@media (min-width: 40em) { .big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.pick label { flex: 1 0 100%; color: var(--strong); font-weight: 700; }
.pick select { flex: 1 1 11em; min-width: 0; min-height: 3em; padding: .3em .8em; border: 2px solid var(--ink-muted); border-radius: 14px;
    background: var(--core); color: var(--strong); font: inherit; }

/* ---------- /lite/ ตัวใหญ่ ตัดกันชัด ---------- */
body.lite { font-size: 1.25rem; line-height: 1.65; color: var(--strong); }
.lite .meta, .lite .fine, .lite .foot { color: var(--ink-muted); }
.lite .top .wrap { font-size: .85em; }
.lite .tbl { font-size: .95em; }
/* มือถือจอแคบ: ตารางต้องพอดีกรอบ (ตัวใหญ่ 20px) ให้คำสถานะตัดบรรทัดได้ ลดช่องไฟ */
@media (max-width: 26em) { .lite .top .wrap { font-size: .72em; } }
@media (max-width: 30em) {
    .card { padding: 16px 14px; border-radius: 16px; }
    .tbl th, .tbl td { padding: .5em .3em; }
    .lite .tbl { font-size: .9em; }
}

/* ---------- /health/ ---------- */
.srcs { display: grid; gap: 12px; list-style: none; margin: 0 0 24px; padding: 0; }
.srcs > li { background: var(--core); border: 1px solid var(--edge); border-radius: 16px; padding: 14px 18px; }
.srcs h3 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; margin: 0 0 .15em; }
.srcs .who { margin: 0 0 .5em; color: var(--ink-muted); font-size: .9em; }
.srcs dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 2px 14px; margin: 0; font-size: .95em; }
.srcs dt { color: var(--ink-muted); } .srcs dd { margin: 0; color: var(--strong); }
.srcs .why { margin: .5em 0 0; font-size: .92em; }
.sw { display: inline-flex; align-items: center; font-size: .95rem; font-weight: 700; white-space: nowrap; }
.sw.ok { color: var(--ink-ok); } .sw.late { color: var(--ink-warn); } .sw.fail { color: var(--ink-crit); }
.overall { display: flex; align-items: center; gap: 4px; }
.overall .mk { width: .9em; height: .9em; }
.legend { list-style: none; padding: 0; margin: 0 0 1em; }
.legend li { margin: 0 0 .35em; }
@media (max-width: 30em) { .srcs dl { grid-template-columns: 1fr; } .srcs dd { margin-bottom: .3em; } }

/* ---------- /embed/ การ์ดเล็กในเว็บอื่น (iframe 320x420 ขึ้นไป กว้างเต็มกรอบ) ---------- */
html:has(body.embed) { height: 100%; }
body.embed { height: 100%; margin: 0; font-size: 15px; line-height: 1.45; background: var(--bg); color: var(--strong); }
.e-card { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 12px 14px 10px; }
.e-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: .88em; }
.e-top .brand { gap: 8px; }
.e-top .brand img { border-radius: 6px; }
.e-card h1 { font-size: 1.45em; margin: 0; }
.e-card .pill { margin: 0; align-self: flex-start; font-size: .9em; padding: .15em .75em; }
.e-line { margin: 0; color: var(--text); font-size: .95em; line-height: 1.4; }
.e-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.e-nums div { display: flex; flex-direction: column; background: var(--core); border: 1px solid var(--edge); border-radius: 12px; padding: 6px 8px 7px; }
.e-nums dt { font-size: .76em; font-weight: 600; color: var(--ink-muted); line-height: 1.25; }
.e-nums dd { margin: 0; font-size: 1.5em; font-weight: 700; line-height: 1.15; }
.e-nums dd small { display: block; font-size: .48em; font-weight: 500; color: var(--ink-muted); line-height: 1.3; }
.e-time { margin: 0; font-size: .84em; color: var(--ink-muted); }
.e-stale { margin: 0; font-size: .84em; font-weight: 600; color: var(--ink-warn); }
.e-card .btn { min-height: 2.5em; border-radius: 12px; margin-top: auto; }
.e-src { margin: 0; font-size: .72em; line-height: 1.35; color: var(--ink-muted); }

/* ---------- /api/ เอกสาร ---------- */
.doc .wrap { max-width: 62rem; }
.doc h2 { margin-top: 1.4em; padding-top: .2em; }
.doc h2 small, .doc h3 small { display: block; font-size: .62em; font-weight: 600; color: var(--ink-muted); margin-top: .15em; }
.doc h3 { margin-top: 1.2em; }
.doc ul { padding-left: 1.3em; }
.doc li { margin: 0 0 .35em; }
.doc code { font-family: var(--mono); font-size: .88em; background: var(--bg-2); border-radius: 6px; padding: .08em .35em; color: var(--strong); }
.doc pre { margin: 0 0 1em; padding: 14px 16px; overflow-x: auto; background: var(--bg-2); border: 1px solid var(--edge); border-radius: 14px;
    font-family: var(--mono); font-size: .8em; line-height: 1.55; color: var(--strong); tab-size: 2; }
.doc pre code { background: none; padding: 0; font-size: inherit; }
.doc .toc { columns: 2 14em; column-gap: 24px; padding-left: 1.2em; }
.doc .ep { font-family: var(--mono); font-size: .92em; word-break: break-all; }
.doc .ex { margin: .2em 0 .3em; font-size: .82em; font-weight: 700; color: var(--ink-muted); }
.badge { display: inline-block; padding: .05em .6em; border-radius: 999px; background: var(--accent-soft); color: var(--ink-link); font-size: .72em; font-weight: 700;
    vertical-align: .15em; font-family: var(--font); }
.badge.soon { background: var(--bg-2); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--edge); }
.doc details { margin: 0 0 1em; }
.doc summary { cursor: pointer; font-weight: 700; color: var(--ink-link); }