/* Wing2 Safety — AWG Editorial (ข้อตกลงอยู่ใน docs/DECISIONS.md หัวข้อ "หน้าตาแอป")
   พื้นเรียบ ไม่มีแสงเรือง ไม่มีแถบสีข้างการ์ด สีมีความหมายเท่านั้น:
   ทอง = ปุ่มหลัก (หน้าละปุ่มเดียว) · ฟ้า = ลิงก์และเลขลำดับ · แดง = อุบัติเหตุ
   ส้ม = อุบัติการณ์/ปัจจัย · เขียว = ทำแล้ว · ที่เลือกแล้ว = พื้นทึบ + ✓ */

/* ฟอนต์ฝังในแอป (OFL — ดู fonts/OFL-*.txt) เฉพาะช่วงอักษรไทยกับละติน อักษรอื่นใช้ฟอนต์ของเครื่อง */
@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/baijamjuree-600-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Bai Jamjuree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/baijamjuree-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexmono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexsansthai-400-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/plexsansthai-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexsansthai-500-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/plexsansthai-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexsansthai-600-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/plexsansthai-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* หัวเรื่องแบบนิตยสาร: Noto Serif Thai 600 (OFL ดู fonts/OFL-NotoSerifThai.txt) */
@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/notoserifthai-600-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/notoserifthai-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ชุดสีตาม mockup review/dash_options (ตรวจคอนทราสต์ ≥4.5:1 แล้วทั้งสองธีม)
   กลางคืน = ห้องนักบินยามฟ้าสีคราม · กระดาษ = แผนที่การบินพิมพ์บนกระดาษครีม */
:root,
:root[data-theme="night"] {
  --bg: #0b1120;
  --bg2: #111a2c;
  --surface: #121b2e;
  --surface2: #172238;
  --line: rgb(160 185 230 / .14);
  --line2: rgb(160 185 230 / .3);
  --text: #eef2f8;
  --text2: #b9c4d8;
  --muted: #8d9ab3;
  --node: #dfe6f2;
  --hero: url("img/hero-night.webp");
  --hero-s: url("img/hero-night-s.webp");
  --air-img: url("img/air-night.webp");
  --air-img-s: url("img/air-night-s.webp");
  --air-scrim: linear-gradient(180deg, rgb(11 17 32 / .78) 0%, rgb(11 17 32 / .55) 48%, rgb(11 17 32 / .08) 78%, transparent 100%);
  --air-scrim-x: linear-gradient(90deg, rgb(11 17 32 / .92) 0%, rgb(11 17 32 / .7) 38%, rgb(11 17 32 / .1) 70%, transparent 100%);
  --scrim: linear-gradient(90deg, rgb(11 17 32 / .94) 0%, rgb(11 17 32 / .78) 42%, rgb(11 17 32 / .1) 78%), linear-gradient(0deg, var(--bg) 0%, transparent 38%);
  --sky: #6cc9ff;
  --gold: #f2c66d;
  --ok: #5fd39a;
  --warn: #f4a259;
  --bad: #ff7a85;
  --gold-d: rgb(242 198 109 / .15);
  --ok-d: rgb(95 211 154 / .14);
  --sky-d: rgb(108 201 255 / .12);
  --warn-d: rgb(244 162 89 / .14);
  --on-pri: #1b1300;
  /* ประวัติเหตุ: แหล่งของเรื่อง m/e/r/f · ตัวเลขบนช่องสีเข้มของตารางหัวข้อ */
  --seg-m: #6cc9ff; --seg-e: #f2c66d; --seg-r: #b48cff; --seg-f: #5f6b82; --hm-hi: #0b1120;
  /* หน้าภาพรวม (overview.css) */
  --ov-panel: rgb(13 23 42 / .62); --ov-solid: #0c1628; --ov-card-sh: none; --ov-sh: 1;
  --ov-hf0: #c3cede; --ov-acc: #ff5a5f; --ov-inc: #ffb547; --ov-jp: #9085e9; --ov-oth: #199e70;
  /* 02B แอลลูเวียล: ไล่ระดับฟ้าทางเดียวตามชั้น HFACS (O→A สว่างขึ้น ผ่าน validate_palette --ordinal บน #0c1628) */
  --sk-O: #1c5cab; --sk-S: #2a78d6; --sk-P: #5598e7; --sk-A: #9ec5f4; --sk-N: #66728a; --sk-op: .55;
  --ov-off: rgb(195 206 222 / .18); --ov-hole: #03070f; --ov-hero-o: .36; --ov-on-sky: #04121f;
  --ov-flap-a: #1a2740; --ov-flap-b: #131e33; --ov-flap-t: #f2f5fa;
  --ov-heat: #6cc9ff; --ov-on-heat: #04121f;
  --ov-fb: rgb(6 12 24 / .84); --ov-tip: rgb(8 14 26 / .96); --ov-scrim: rgb(2 6 14 / .62);
  /* เงา 3 ระดับ: 1 ชิดพื้น · 2 การ์ดลอย · 3 กล่องเด่น/หน้าต่าง */
  --sh-1: 0 1px 2px rgb(0 0 0 / .3); --sh-2: 0 6px 16px rgb(0 0 0 / .25); --sh-3: 0 18px 40px -12px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* กระดาษครีม (ชื่อธีมยังเป็น day เพื่อไม่ให้ค่าที่ผู้ใช้บันทึกไว้หาย) */
:root[data-theme="day"] {
  --bg: #f4efe4;
  --bg2: #ebe4d5;
  --surface: #faf6ec;
  --surface2: #efe8d9;
  --line: rgb(40 35 25 / .14);
  --line2: rgb(40 35 25 / .32);
  --text: #1b1f27;
  --text2: #3b4250;
  --muted: #5a606e;
  --node: #2a2f39;
  --hero: url("img/hero-day.webp");
  --hero-s: url("img/hero-day-s.webp");
  --air-img: url("img/air-day.webp");
  --air-img-s: url("img/air-day-s.webp");
  --air-scrim: linear-gradient(180deg, rgb(244 239 228 / .86) 0%, rgb(244 239 228 / .62) 48%, rgb(244 239 228 / .1) 78%, transparent 100%);
  --air-scrim-x: linear-gradient(90deg, rgb(244 239 228 / .94) 0%, rgb(244 239 228 / .72) 38%, rgb(244 239 228 / .08) 70%, transparent 100%);
  --scrim: linear-gradient(90deg, rgb(244 239 228 / .96) 0%, rgb(244 239 228 / .82) 42%, rgb(244 239 228 / .08) 78%), linear-gradient(0deg, var(--bg) 0%, transparent 38%);
  --sky: #0d64a6;
  --gold: #8a5d00;
  --ok: #17744b;
  --warn: #8a470d;
  --bad: #b3311c;
  --gold-d: rgb(138 93 0 / .12);
  --ok-d: rgb(23 116 75 / .11);
  --sky-d: rgb(13 100 166 / .09);
  --warn-d: rgb(138 71 13 / .1);
  --on-pri: #ffffff;
  --seg-m: #0d64a6; --seg-e: #a8720c; --seg-r: #6d5bd0; --seg-f: #7d8594; --hm-hi: #faf6ec;
  --ov-panel: rgb(250 246 236 / .86); --ov-solid: #faf6ec; --ov-card-sh: 0 1px 2px rgb(40 35 25 / .06); --ov-sh: .3;
  --ov-hf0: #7a808c; --ov-acc: #b3311c; --ov-inc: #a8640e; --ov-jp: #6d5bd0; --ov-oth: #17744b;
  /* 02B แอลลูเวียล กลางวัน: O→A เข้มขึ้น ผ่าน validate_palette --ordinal บน #f8f4ea */
  --sk-O: #6da7ec; --sk-S: #3987e5; --sk-P: #1c5cab; --sk-A: #0d366b; --sk-N: #b3ab9c; --sk-op: .5;
  --ov-off: rgb(40 35 25 / .12); --ov-hole: #ebe4d5; --ov-hero-o: .5; --ov-on-sky: #ffffff;
  --ov-flap-a: #1a2740; --ov-flap-b: #131e33; --ov-flap-t: #f2f5fa;
  --ov-heat: #3a7fbf; --ov-on-heat: var(--text); /* ฟ้าอ่อนกว่า --sky ให้ตัวเลขสีเข้มอ่านได้ทุกช่อง */
  --ov-fb: rgb(244 239 228 / .92); --ov-tip: rgb(250 246 236 / .98); --ov-scrim: rgb(27 31 39 / .42);
  --sh-1: 0 1px 2px rgb(40 35 25 / .06); --sh-2: 0 6px 16px -6px rgb(40 35 25 / .14); --sh-3: 0 18px 40px -14px rgb(40 35 25 / .22);
  color-scheme: light;
}

:root {
  --f-d: "Bai Jamjuree", "IBM Plex Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  --f-b: "IBM Plex Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
  --f-m: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-s: "Noto Serif Thai", "IBM Plex Sans Thai", "Leelawadee UI", serif;
  /* โทเคนดีไซน์ (22 ต.ค. 2569) · ขนาดตัวอักษร px ตามกฎตัวอักษร ข้อ 2 */
  --fs-2xs: 12px; --fs-xs: 12.5px; --fs-sm: 13px; --fs-md: 14px; --fs-ui: 15px; --fs-body: 16px; --fs-lg: 17px; --fs-xl: 20px;
  --fs-kpi-s: 22px; --fs-kpi-m: 28px; --fs-kpi-l: 38px; --fs-kpi-xl: 44px;
  /* ตัวเลข KPI ทุกแบบ: น้ำหนัก · ระยะบรรทัดตัวเลขล้วน · ระยะบรรทัดป้ายไทย */
  --kpi-w: 600; --kpi-lh: 1.1; --kpi-lab-lh: 1.45;
  --r-s: 4px;
  --r: 8px;
  --r-l: 12px;
  --r-xl: 18px;
  --r-pill: 999px;
  --t-fast: .15s; --t-med: .2s; --t-slow: .25s;
  --head-h: 52px;
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--f-b);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--f-m); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: var(--r-s); }
/* main / หัวแผงรับโฟกัสจากโค้ดตอนเปลี่ยนหน้า — ไม่ต้องตีกรอบทั้งหน้า */
[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--gold); color: var(--on-pri); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }

/* จุดสีบอกประเภท/สถานะ ใช้คู่กับคำเสมอ */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.dot.bad { background: var(--bad); }
.dot.warn { background: var(--warn); }
.dot.ok { background: var(--ok); }
.dot.sky { background: var(--sky); }
.dot.ring { background: none; box-shadow: inset 0 0 0 1.5px var(--warn); }
.dot.hollow { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* ── หัวแอป ───────────────────────────────────────────────── */
.annun {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; min-width: 0; }
.brand b { font: 600 16px/1 var(--f-d); white-space: nowrap; }
/* จอแคบใช้ตรา บน.2 แบบเดียวกับแถบเมนูซ้ายจอคอมฯ (.logo เดิมเก็บไว้เผื่อ แต่ไม่แสดง) */
.logo { display: none; }
.annun .emblem { display: block; flex: none; width: 30px; height: auto; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .35)); }
.net { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); white-space: nowrap; }
.net .lamp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line2); border-radius: var(--r-s); }
.net .ver { color: var(--muted); }
/* ส่วนของแถบเมนูซ้ายจอคอมฯ (desk.css) ซ่อนบนจอแคบ */
.d-only, .d-ic, .d-badge, .tabbar .d-only { display: none; }
.brand b em { font-style: normal; }
.b-t { display: contents; }
/* หัวเรื่อง + ย้อนกลับ ของหน้าที่ไม่มีในแถบล่าง (จอแคบเท่านั้น desk.css ซ่อน) */
.m-sub { display: none; align-items: center; gap: 2px; min-width: 0; }
.m-sub .back { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.m-sub-t { font: 600 16px/1.3 var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sub .m-sub { display: flex; }
body.sub .annun .brand, body.sub .tabbar { display: none; }

/* ── Layout ───────────────────────────────────────────────── */
main {
  max-width: 760px; margin: 0 auto;
  padding: 20px 16px calc(var(--tab-h) + var(--safe-b) + 100px);
  outline: none;
}
.view { animation: enter .22s var(--ease) both; }
.view.still { animation: none; } /* วาดหน้าเดิมใหม่หลังกดตัวกรอง ไม่ต้องเลื่อนเข้าอีกรอบ */
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }

.eyebrow { font-size: 12.5px; line-height: 1.4; color: var(--muted); margin-bottom: 8px; }
.page-h { margin: 0 0 18px; font: 600 28px/1.3 var(--f-d); }
.page-h em { font-style: normal; color: var(--gold); }
.page-h em.nw, .th-hero-desc .nw { white-space: nowrap; } /* "123 ครั้ง" ไม่แยกบรรทัด */
.lede { color: var(--text2); margin: -8px 0 20px; }

/* ── ขั้นที่เลือก (แตะเพื่อกลับไปแก้) ─────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 26px; }
.steps button {
  width: 100%; min-height: 56px; display: block; text-align: left;
  padding: 8px 2px 4px; border: 0; border-top: 2px solid var(--line2); border-radius: 0; background: none;
}
.steps .done button { border-top-color: var(--text); }
.steps .now button { border-top-color: var(--gold); }
.steps span { display: block; font-size: 12px; line-height: 1.4; color: var(--muted); }
.steps b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
}
.steps b.unset { color: var(--muted); font-weight: 400; }

/* ── ขั้นเลือก ────────────────────────────────────────────── */
.step { margin-bottom: 28px; scroll-margin-top: calc(var(--head-h) + 16px); border-radius: var(--r-s); }
.step-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.step-h .num { font: 500 12px/1 var(--f-m); color: var(--sky); }
.step-h h2 { font: 600 18px/1.3 var(--f-d); }
.step-h h2 .note { font-family: var(--f-b); font-weight: 400; margin-left: 4px; }
.step-h .hint { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.step.done .hint { color: var(--text2); }
.step.need .hint { color: var(--warn); font-weight: 600; }
.step.flash { animation: flash 1.1s var(--ease); }
@keyframes flash { 0%, 55% { background: var(--warn-d); box-shadow: 0 0 0 8px var(--warn-d); } }

.sqn { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 10px; }
.sqn-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line2); text-align: center;
}
.sqn-badge .sqn-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.sqn-badge b { font: 600 14px/1.2 var(--f-m); color: var(--text); }
.sqn-l { font-size: 12px; line-height: 1.4; color: var(--muted); }
.sqn-l b { display: block; font: 500 13px/1.3 var(--f-m); color: var(--text2); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.tile, .chip {
  position: relative; text-align: left;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--surface);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform .1s;
}
.tile:active, .chip:active { transform: scale(.98); }
.tile { min-height: 58px; padding: 8px 34px 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.tile .code { font: 600 16px/1.3 var(--f-d); }
.tile .lab { font-size: 12px; line-height: 1.35; color: var(--muted); }

/* การ์ดเลือก ฮ. พร้อมพิมพ์เขียว Blueprint SVG */
.tile.tile-ac {
  min-height: 68px; padding: 8px 8px 8px 12px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
  overflow: hidden;
}
.tile.tile-ac .ac-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; z-index: 1; }
.tile.tile-ac .ac-info .code { font-weight: 600; font-size: 15px; line-height: 1.3; }
.tile.tile-ac .ac-info .lab { font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: break-word; }
.tile.tile-ac .ac-photo {
  position: relative; flex: none; width: 68px; height: 40px; border-radius: var(--r);
  overflow: hidden; background: #090e17; border: 1px solid rgba(255, 255, 255, 0.12);
  margin-left: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tile.tile-ac .ac-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transition: transform var(--t-slow) ease;
}
.tile.tile-ac:hover .ac-photo img { transform: scale(1.06); }
.tile.tile-ac[aria-pressed="true"] .ac-photo { border-color: var(--gold); box-shadow: 0 0 10px rgba(234, 179, 8, 0.3); }
.tile.tile-ac .ac-blueprint {
  flex: none; width: 54px; height: 22px; opacity: .78;
  display: flex; align-items: center; justify-content: flex-end;
  transition: opacity var(--t-med), transform var(--t-med);
}
.tile.tile-ac .ac-bp { width: 100%; height: 100%; stroke: currentColor; fill: currentColor; }
.tile.tile-ac:hover .ac-blueprint { opacity: 1; transform: translateX(-2px) scale(1.05); }
.tile.tile-ac[aria-pressed="true"] .ac-blueprint { opacity: 1; }
.tile.tile-ac .ck { position: absolute; right: 6px; top: 6px; margin-top: 0; width: 16px; height: 16px; z-index: 2; }

.tile[aria-pressed="true"], .chip[aria-pressed="true"], .seg button[aria-pressed="true"] {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
.tile[aria-pressed="true"] .lab { color: inherit; opacity: .72; }
.ck { display: none; }
[aria-pressed="true"] > .ck { display: block; }
.tile .ck { position: absolute; right: 10px; top: 50%; margin-top: -9px; width: 18px; height: 18px; stroke-width: 2.6; }
.tile[disabled] { opacity: .45; cursor: not-allowed; }

/* ขั้น "ข้อมูลจาก": มือถือเรียงลง · จอกว้างเรียง 3 ช่อง */
.tiles.src-tiles { grid-template-columns: minmax(0, 1fr); }
.src-t { min-height: 64px; }
.src-t .n { margin-top: 3px; font: 500 12px/1.4 var(--f-m); color: var(--sky); }
.src-t[aria-pressed="true"] .n { color: inherit; opacity: .72; }
.src-t.locked { border-style: dashed; }
.src-t.locked .lab { display: flex; align-items: center; gap: 5px; color: var(--warn); }
.src-t.locked .lab .ic { width: 14px; height: 14px; flex: none; }
@media (min-width: 560px) {
  .tiles.src-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .src-t { justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; }
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 48px; padding: 6px 14px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-ui); line-height: 1.4; }
.chip .ck { width: 16px; height: 16px; stroke-width: 2.6; }
.chip[aria-pressed="true"] { font-weight: 600; }
.chip small { font: 500 var(--fs-2xs)/1 var(--f-m); color: var(--muted); }
.chip[aria-pressed="true"] small { color: inherit; opacity: .7; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }

/* ขั้นสภาพอากาศ: ปุ่มติ๊กเลือกทุกสภาพ (ครบ = ติ๊ก · บางข้อ = ขีด) */
.sel-all {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: -2px 0 10px; padding: 6px 14px 6px 10px;
  border: 1px dashed var(--line2); border-radius: var(--r); background: transparent; color: var(--text2); font-size: var(--fs-ui); line-height: 1.4;
  transition: border-color var(--t-fast), color var(--t-fast), transform .1s;
}
.sel-all:hover { border-color: var(--sky); color: var(--text); }
.sel-all:active { transform: scale(.98); }
.sel-all .box {
  position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--muted); border-radius: 6px; color: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sel-all .box .ic { width: 14px; height: 14px; stroke-width: 3; }
.sel-all[aria-pressed="mixed"] .box::after { content: ''; position: absolute; width: 10px; height: 2.5px; border-radius: 2px; background: var(--text2); }
.sel-all[aria-pressed="true"] { border-style: solid; color: var(--text); font-weight: 600; }
.sel-all[aria-pressed="true"] .box { background: var(--text); border-color: var(--text); color: var(--bg); }
.sel-all .cn { font: 600 var(--fs-2xs)/1 var(--f-m); color: var(--muted); font-variant-numeric: tabular-nums; }

details.opt { border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); }
details.opt > summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 12px 16px; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
details.opt > summary::-webkit-details-marker { display: none; }
details.opt > summary .ic { color: var(--text2); transition: transform var(--t-med) var(--ease); }
details.opt[open] > summary .ic { transform: rotate(180deg); }
details.opt .body { padding: 4px 16px 18px; display: grid; gap: 22px; }
.sub-h { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text2); margin-bottom: 10px; }
.tier-h { font-size: 12.5px; color: var(--muted); margin: 12px 0 8px; }
.note { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── แถบปุ่มล่าง ──────────────────────────────────────────── */
.actbar {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tab-h) + var(--safe-b));
  padding: 12px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.actbar-in { max-width: 728px; margin: 0 auto; display: flex; gap: 8px; }
.btn {
  min-height: 48px; padding: 0 18px; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line2); background: var(--surface); color: var(--text);
  font-size: var(--fs-ui); font-weight: 600; text-decoration: none;
  transition: background-color var(--t-fast), transform .1s, filter var(--t-fast);
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; transform: none; }
.btn-primary { flex: 1; min-height: 56px; background: var(--gold); border-color: var(--gold); color: var(--on-pri); font: 600 var(--fs-lg)/1.3 var(--f-d); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-primary .count { font: 600 var(--fs-ui)/1 var(--f-m); padding: 4px 8px; border-radius: var(--r-s); background: rgb(0 0 0 / .14); }
.btn-primary .near { font: 500 var(--fs-sm)/1.4 var(--f-b); opacity: .8; }
.btn-primary.pending { background: var(--surface2); border-color: var(--line2); color: var(--text); }
.btn-primary:disabled { background: var(--surface2); border-color: var(--line2); color: var(--muted); opacity: 1; }
.btn-icon { width: 48px; padding: 0; flex: none; }

.back {
  min-width: 48px; min-height: 48px; margin-left: -12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2); border-radius: var(--r); text-decoration: none;
}
.back:hover { color: var(--text); }

/* ── ป้ายเคส: จุดสี + คำ ──────────────────────────────────── */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 1px 8px;
  border: 1px solid var(--line2); border-radius: var(--r-s);
  font-size: 12px; line-height: 1.4; color: var(--text2); white-space: nowrap;
}
.tag.src { font-size: 12px; font-weight: 500; }
.tag.src.W2 { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }
.tag.draft { border-style: dashed; color: var(--muted); }
.tag.rep { min-height: 22px; margin-left: 4px; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); vertical-align: middle; }
.yr { font: 500 13px/1.4 var(--f-m); color: var(--text2); padding: 0 2px; }

/* ── หน้ารายการบทเรียน ────────────────────────────────────── */
.filt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.filt > span { min-height: 30px; padding: 3px 10px; display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: var(--r-s); font-size: 13px; font-weight: 500; line-height: 1.3; }
.filt .edit { margin-left: auto; min-height: 48px; padding: 0 2px 0 12px; display: inline-flex; align-items: center; color: var(--sky); font-size: 14px; font-weight: 600; text-decoration: none; }

.hero { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hero .big { font: 600 68px/.86 var(--f-m); color: var(--gold); font-variant-numeric: tabular-nums; }
.hero h1 { font: 600 17px/1.4 var(--f-d); }
.hero p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.hero.near .big { color: var(--text2); } /* ไม่มีกลุ่ม ก — ตัวเลขเป็นเคสใกล้เคียง ไม่ใช้สีทอง */
/* แท็บบทเรียน / MOR/HR บน.2 ในหน้ารายการ */
.r-tabs { display: flex; gap: 6px; margin: -6px 0 18px; border-bottom: 1px solid var(--line); }
.r-tabs button { min-height: 48px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font: 600 15px/1.2 var(--f-d); cursor: pointer; }
@media (max-width: 480px) { .r-tabs { gap: 0; } .r-tabs button { flex: 1 1 0; justify-content: center; padding: 0 6px; gap: 6px; font-size: 14px; } .r-tabs .ic { display: none; } }
.r-tabs button { white-space: nowrap; }
.r-tabs button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--gold); }
.r-tabs .n { padding: 1px 7px; border-radius: 10px; background: var(--line); color: var(--text2); font-size: 12px; font-variant-numeric: tabular-nums; }
.r-tabs button[aria-pressed="true"] .n { background: var(--gold-d); color: var(--gold); }
.morsum { margin: 4px 0 24px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.morsum .sec-h { justify-content: flex-start; align-items: center; margin-bottom: 4px; }
.morsum .sec-h .ic { color: var(--sky); }
.morsum .note { margin: 2px 0 12px; }
.morsum-n { margin: 0 0 20px; }
.ms-y { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ms-y li { display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 4px 10px; font-size: 14px; }
.ms-y .yr { color: var(--text2); font-variant-numeric: tabular-nums; }
.ms-y .bar { height: 8px; border-radius: var(--r-s); background: var(--line); overflow: hidden; }
.ms-y .bar i { display: block; height: 100%; border-radius: var(--r-s); background: var(--sky); }
.ms-y b { text-align: right; font-variant-numeric: tabular-nums; }
.ms-y .by { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.ms-y .by span { display: inline-flex; align-items: center; gap: 5px; }
.ms-tp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.ms-tp .k { font-size: 12px; color: var(--muted); margin-right: 2px; }
.ms-tp a { min-height: 36px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); border-radius: var(--r-s); color: var(--text); font-size: 13px; text-decoration: none; }
.ms-tp a b { color: var(--sky); font-variant-numeric: tabular-nums; }
.morsum .evs { margin: 0 0 12px; padding: 0; }

/* กลุ่มผลลัพธ์ ก/ข/ค (DECISIONS.md "การจัดกลุ่มผลลัพธ์") */
.g-a { --gc: var(--gold); --gcd: var(--gold-d); }
.g-b { --gc: var(--warn); --gcd: var(--warn-d); }
.g-c { --gc: var(--sky); --gcd: var(--sky-d); }
.gl {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px;
  background: var(--gcd); color: var(--gc); font: 600 14px/1 var(--f-d);
}
.gsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px 0 16px; border-bottom: 1px solid var(--line); }
.gsum li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "gl n" "gt gt"; gap: 6px 8px; align-items: center;
  padding: 9px 10px; border: 1px solid var(--line); border-top: 2px solid var(--gc); border-radius: var(--r); background: var(--surface);
}
.gsum .gl { grid-area: gl; }
.gsum b { grid-area: n; justify-self: end; font: 600 22px/1 var(--f-d); font-variant-numeric: tabular-nums; }
.gsum .gt { grid-area: gt; font-size: 12px; line-height: 1.4; color: var(--text2); }
.gsum .gt > span { white-space: nowrap; } /* ตัดบรรทัดตรงช่องว่างเท่านั้น ไม่ตัดกลางคำไทย */
.gsum .zero { border-top-color: var(--line2); }
.gsum .zero b, .gsum .zero .gt { color: var(--muted); }

.grp { margin-top: 26px; }
.grp-h { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 6px; }
.grp-h .gl { margin-top: 1px; }
.grp-h h2 { font: 600 16px/1.4 var(--f-d); }
.grp-h .gn { margin-left: 2px; font: 500 13px/1 var(--f-m); color: var(--gc); }
.grp-h p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.grp .rows { border-top: 1px solid var(--line2); }

.sec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 22px 0 2px; }
.sec-row h2 { font: 600 16px/1.3 var(--f-d); }
.sec-row span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rows .yr { display: block; padding-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rows .rt { display: block; min-height: 48px; padding: 2px 0; text-decoration: none; border-radius: var(--r-s); }
.rows .rt b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.rows .rt:hover b { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.ml { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ml .miss { color: var(--warn); }
.ml .opt { color: var(--sky); }
.ml .oth { color: var(--sky); }

.pick {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); color: var(--text2);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform .1s;
}
.pick:active { transform: scale(.95); }
.pick .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.pick .on { display: none; }
.pick[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.pick[aria-pressed="true"] .on { display: block; }
.pick[aria-pressed="true"] .off { display: none; }

.more { width: 100%; margin-top: 12px; color: var(--text2); font-weight: 500; }
.group-h { margin: 30px 0 2px; }
.group-h h2 { font: 600 16px/1.3 var(--f-d); }
.group-h p { margin-top: 2px; font-size: 13px; color: var(--muted); }

/* การ์ดเคส (รายการในหน้าภาพรวม) */
.list { display: grid; gap: 8px; }
.card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); text-decoration: none; transition: border-color var(--t-fast), transform .1s;
}
.card:hover { border-color: var(--line2); }
.card:active { transform: scale(.99); }
.card .meta, .card h3, .card .ml { grid-column: 1; }
.card h3 { font-size: 15px; font-weight: 600; line-height: 1.5; }
.card .ml { margin: 0; }
.card .go { grid-column: 2; grid-row: 1 / 4; color: var(--muted); }

.empty { text-align: center; padding: 36px 20px; border: 1px dashed var(--line2); border-radius: var(--r-l); color: var(--text2); }
.empty .ic { width: 32px; height: 32px; color: var(--muted); margin-bottom: 10px; }
.empty h2 { margin-bottom: 6px; font: 600 18px/1.4 var(--f-d); color: var(--text); }
.empty p { max-width: 38ch; margin: 0 auto; font-size: 14px; line-height: 1.65; }
.empty p + p { margin-top: 8px; }
.empty .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* ── หน้าเคส ──────────────────────────────────────────────── */
.case-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.case-top .meta { flex: 1; min-width: 0; }
.case-top .pos { font: 500 13px/1 var(--f-m); color: var(--muted); white-space: nowrap; }
.case h1 { margin-bottom: 12px; font: 600 23px/1.38 var(--f-d); }
.summary { margin-bottom: 18px; color: var(--text2); line-height: 1.72; }

/* เนื้อเรื่องเคส (app.js storyHtml) — ย่อหน้าเปิด → หมวดตามรายงาน ICAO · สาเหตุเป็นกล่อง · ป้ายระดับความแน่นอน */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 24px;
  margin: 0 0 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts dt { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.story { max-width: 46em; margin-bottom: 22px; color: var(--text2); line-height: 1.78; }
.story p + p { margin-top: .9em; }
/* ย่อหน้าเปิดทุกย่อหน้าขนาดเดียวกับเนื้อความ (เดิม lede 17px / ย่อหน้าถัดไป 16px ดูไม่เท่ากัน) เน้นด้วยสีแทน */
.st-open p { color: var(--text); }
/* การ์ดรวมหลายเหตุ: รายการเลขลำดับ + เส้นไทม์ไลน์ซ้าย ให้เห็นว่าแต่ละย่อหน้าคือคนละเหตุ/คนละรายงาน */
.st-reps-h { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font: 600 12.5px/1.4 var(--f-d); letter-spacing: .02em; color: var(--muted); }
.st-reps-h b { color: var(--sky); font-size: 14px; }
.st-reps { counter-reset: rep; }
.st-rep { position: relative; padding-left: 40px; counter-increment: rep; }
.st-rep + .st-rep { margin-top: 18px; }
.st-rep::before {
  content: counter(rep); position: absolute; left: 0; top: .22em; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font: 600 13px/1 var(--f-d); color: var(--bg); background: var(--sky);
  box-shadow: 0 0 0 3px var(--bg);
}
.st-rep::after { content: ""; position: absolute; left: 12.5px; top: calc(.22em + 26px); bottom: -18px; width: 1px; background: var(--line2); }
.st-rep:last-child::after { display: none; }
.st-src { display: inline-block; margin-left: .15em; padding: 0 .55em .05em; border: 1px solid var(--line2); border-radius: var(--r-pill); font: 500 12px/1.6 var(--f-d); color: var(--muted); vertical-align: .1em; white-space: nowrap; }
.st-g { margin-top: 24px; }
.st-h { margin-bottom: 10px; font: 600 16px/1.4 var(--f-d); color: var(--sky); padding-bottom: 7px; background: linear-gradient(currentColor, currentColor) left bottom / 40px 2.5px no-repeat, linear-gradient(var(--line2), var(--line2)) left bottom / 100% 1px no-repeat; }
.st-cause { padding: 14px 16px 16px; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface2); }
.st-cause .st-h { color: var(--warn); }
.st-cause p { color: var(--text); }
.cf {
  display: inline-block; margin: 0 .1em; padding: .02em .5em .08em; border: 1px solid var(--line2); border-radius: var(--r-s);
  font-size: .8em; font-weight: 600; line-height: 1.45; color: var(--text2); white-space: nowrap;
}
.cf-m { width: 1.15em; height: .78em; margin-right: .4em; vertical-align: -.03em; fill: currentColor; }
.cf-m .off { opacity: .28; }
.cf-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.cf-key .k { margin-right: 2px; }
.cf-key .cf { margin: 0; font-size: 12.5px; }

/* ภาพจำลองเหตุการณ์ (scene.js) — ตัวภาพใช้จานสีสว่างของตัวเองทั้งสองธีม อยู่ในการ์ดมุมมน */
.scn {
  max-width: 560px; margin: 0 0 22px; padding: 14px 14px 12px; border: 1.5px solid color-mix(in srgb, var(--sky) 50%, transparent);
  border-radius: calc(var(--r-l) + 4px); background: var(--sky-d);
}
.scn-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--sky) 30%, transparent); }
.scn-t { font: 600 16px/1.4 var(--f-d); color: var(--sky); }
.scn-tag { margin-left: auto; padding: 0 9px; border: 1px dashed color-mix(in srgb, var(--sky) 55%, transparent); border-radius: 999px; font-size: 12px; line-height: 22px; color: var(--sky); }
.scn-sh { margin: 14px 0 0; font: 600 14.5px/1.4 var(--f-d); color: var(--sky); }
.scn-pn + .scn-pn { margin-top: 12px; }
.scn-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.scn-cap .vw { font-weight: 600; color: var(--sky); }
.scn-svg { display: block; width: 100%; height: auto; border: 1px solid var(--line2); border-radius: var(--r-l); background: #F7FAFD; }
.scn-svg.night { background: #1A2436; }
.scn-svg text { font-family: var(--f-b); font-weight: 500; }
.scn-svg text.mono { font-family: var(--f-m); font-weight: 600; }
.scn-svg text.hl { stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; }
.scn-steps { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.scn-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--text); }
.scn-steps .n {
  flex: none; width: 24px; height: 24px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #444441; color: #FFFFFF; font: 600 12.5px/1 var(--f-m);
}
.scn-steps .n.ph-warn { background: #EF9F27; color: #2C2C2A; }
.scn-steps .n.ph-danger { background: #E24B4A; }
.scn-steps .n.ph-info { background: #185FA5; }
.scn figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.fac-t {
  width: 100%; min-height: 52px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none;
  font-size: 15px; font-weight: 600; text-align: left;
}
.fac-t .n { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.fac-t .ic { width: 18px; height: 18px; transition: transform var(--t-med) var(--ease); }
.fac-t[aria-expanded="true"] { border-bottom-color: transparent; }
.fac-t[aria-expanded="true"] .ic { transform: rotate(180deg); }
.factors { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.factors[hidden] { display: none; }
.factors li { position: relative; padding: 8px 0 8px 18px; font-size: 15px; line-height: 1.6; }
.factors li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

.sec { margin: 24px 0; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 600 17px/1.3 var(--f-d); }
.sec-h .prog { font: 500 13px/1 var(--f-m); color: var(--ok); }

/* เช็กลิสต์ "ทำวันนี้" — แถวสูง 56px ขึ้นไป แตะได้ทั้งแถว */
.todo { display: grid; gap: 8px; }
.todo button {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 30px; gap: 10px; align-items: start;
  padding: 13px 12px 13px 14px; text-align: left;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface);
  font-size: 15.5px; line-height: 1.6; transition: background-color var(--t-fast), border-color var(--t-fast);
}
.todo .n { font: 600 13px/1.9 var(--f-m); color: var(--sky); }
.todo .box {
  width: 30px; height: 30px; margin-top: -2px; display: grid; place-items: center;
  border: 2px solid var(--muted); border-radius: 7px; color: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.todo .box .ic { width: 18px; height: 18px; stroke-width: 3; }
.todo button[aria-pressed="true"] { background: var(--ok-d); border-color: transparent; }
.todo button[aria-pressed="true"] .box { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.todo button[aria-pressed="true"] .t { color: var(--text2); }

.ask { margin: 24px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface2); }
.ask-l { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--gold); }
.ask .q { font: 600 17px/1.6 var(--f-d); }

.sec.hf .sec-h { font-size: 15px; color: var(--text2); }
.hf-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-list span { padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--r-s); font-size: 13px; line-height: 1.4; color: var(--text2); }
.hf-list b { margin-right: 6px; font: 600 11.5px/1 var(--f-m); color: var(--text); }

.ref { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--sky); font-size: 15px; font-weight: 600; text-decoration: none; }
.ref small { display: block; font: 500 12px/1.4 var(--f-m); color: var(--muted); }
.ref .ic { width: 18px; height: 18px; }
.ref-note { font-size: 13px; line-height: 1.6; color: var(--text2); }
.ref-note .k { margin-right: 8px; font-weight: 600; color: var(--muted); }

/* เลื่อนเคส: มือถืออยู่แถบล่าง (.case-nav) · จอคอมฯ อยู่ท้ายแผงขวา (.side-nav) */
.case-nav .actbar-in, .side-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.case-nav .btn, .side-nav .btn { min-height: 56px; }
.side-nav { display: none; }

/* ── แผงด้านขวา (จอคอมฯ ≥1024px เท่านั้น — มือถือเห็นแค่ปุ่มในแถบล่าง) ── */
.side-sum { display: none; }
.side-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 600 16px/1.3 var(--f-d); }
.side-h span { font: 500 13px/1 var(--f-m); color: var(--muted); }
.side-sel { border-top: 1px solid var(--line); }
.side-sel button {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 8px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left;
}
.side-sel button:hover { background: var(--surface2); }
.side-sel span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.side-sel b { font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.side-sel b.unset { color: var(--muted); font-weight: 400; }
.side-sum .note { margin-top: 14px; }
.side-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 16px; font-size: 14px; color: var(--text2); }
.side-n b { font: 600 34px/1 var(--f-m); color: var(--gold); font-variant-numeric: tabular-nums; }
.side-n span { font-size: 13px; color: var(--muted); }
.side-g { display: grid; gap: 6px; margin-top: 10px; }
.side-g li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.side-g i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gc); }
.side-g b { margin-left: auto; font: 600 14px/1 var(--f-m); color: var(--text2); font-variant-numeric: tabular-nums; }
.side-picks { border-top: 1px solid var(--line); }
.side-picks li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 48px; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.side-picks .n { font: 600 13px/1 var(--f-m); color: var(--sky); }
.side-picks a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 4px 0; font-size: 14px; font-weight: 500; line-height: 1.45; text-decoration: none; }
.side-picks a:hover { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.side-picks .yr { margin-bottom: 2px; padding: 0; font-size: 12px; color: var(--muted); }
.pick.unpick { border-color: transparent; background: none; color: var(--muted); }
.pick.unpick:hover { border-color: var(--line2); color: var(--text); }

/* ── โหมดบรีฟ ─────────────────────────────────────────────── */
body.briefing .annun, body.briefing .tabbar, body.briefing .actbar,
body.lesson .annun, body.lesson .tabbar { display: none; }
body.briefing main, body.lesson main { max-width: none; padding: 0; }
.brief {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 3vh, 28px);
  padding: max(clamp(14px, 4vh, 40px), env(safe-area-inset-top)) max(clamp(16px, 4.6vw, 72px), env(safe-area-inset-right))
    max(clamp(10px, 3vh, 30px), env(safe-area-inset-bottom)) max(clamp(16px, 4.6vw, 72px), env(safe-area-inset-left));
}
.brief-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brief-top .meta { flex: 1 1 auto; min-width: 0; gap: 8px; }
.brief .tag { height: clamp(26px, 3.6vh, 36px); padding: 0 .8em; gap: .55em; font-size: clamp(12px, min(1.2vw, 2.1vh), 18px); }
.brief .tag .dot { width: .6em; height: .6em; }
.brief .tag.draft { height: 22px; padding: 0 8px; font-size: 12px; }
.brief .yr { font-size: clamp(13px, min(1.35vw, 2.4vh), 20px); }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tools .btn { min-height: 48px; font-size: 13px; padding: 0 12px; }
.tools .btn-icon { width: 48px; padding: 0; }
.seg.mini { display: inline-grid; grid-template-columns: 1fr 1fr; }
.seg.mini button { min-height: 48px; padding: 0 12px; font-size: 13px; }

/* แบบ A: ทั้งการ์ด */
.brief-body {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(20px, 4.4vw, 64px);
  /* safe: การ์ดยาวกว่าจอ (โน้ตบุ๊ก 768px) ต้องชิดบนแล้วเลื่อนได้ ไม่ใช่ล้นขึ้นบนจนหัวเรื่องหาย — เบราว์เซอร์เก่าใช้ start */
  align-items: start; align-content: start; align-content: safe center; min-height: 0; overflow: auto;
}
.brief h1 { margin-bottom: .5em; font: 600 clamp(24px, min(3.3vw, 5.6vh), 64px)/1.3 var(--f-d); }
.brief .summary { margin: 0; font-size: clamp(16px, min(1.65vw, 2.9vh), 32px); line-height: 1.7; }
.brief .story { max-width: none; margin: 0; line-height: inherit; }
.brief .story .lede { font-size: inherit; line-height: inherit; }
.brief .st-rep { padding-left: 1.7em; }
.brief .st-rep + .st-rep { margin-top: .75em; }
.brief .st-rep::before { top: .3em; width: 1.25em; height: 1.25em; font-size: .6em; box-shadow: none; }
.brief .st-rep::after { left: .37em; top: calc(.3em + .75em); bottom: -.75em; }
.brief .st-src { padding: 0 .5em .05em; font-size: .62em; vertical-align: .25em; }
.brief .st-g { margin-top: .9em; }
.brief .st-h { margin-bottom: .35em; font-size: .82em; }
.brief .st-cause { padding: .7em .9em .8em; }
.brief .ask { margin: 0 0 clamp(16px, 2.6vh, 32px); padding: clamp(16px, 2vw, 32px) clamp(18px, 2.4vw, 40px); border-radius: 16px; }
.brief .ask-l { margin-bottom: .5em; font-size: clamp(13px, min(1.35vw, 2.4vh), 24px); }
.brief .ask .q { font-size: clamp(19px, min(2.2vw, 3.9vh), 44px); line-height: 1.45; }
.brief h3 { margin-bottom: .6em; font: 600 clamp(15px, min(1.5vw, 2.6vh), 26px)/1.3 var(--f-d); color: var(--text2); }
.pdo { display: grid; gap: .5em; }
/* "ทำวันนี้" ในบรีฟ: แตะติ๊กได้ทั้งแถว ใช้ที่เก็บเดียวกับหน้าเคส */
.pdo li { font-size: clamp(15px, min(1.5vw, 2.7vh), 30px); line-height: 1.5; }
.pdo button {
  display: grid; grid-template-columns: 2.1em minmax(0, 1fr) 1.6em; gap: .4em; align-items: start;
  margin: -.3em -.5em; padding: .3em .5em; width: calc(100% + 1em);
  border-radius: 10px; text-align: left; font: inherit; color: inherit; transition: background-color var(--t-fast);
}
.pdo .n { font: 600 .9em/1.67 var(--f-m); color: var(--sky); }
/* รายการมีเลขข้อ (บรีฟ/สรุปท้ายบทเรียน): เลขแยกคอลัมน์ ข้อความยาวไม่ไหลใต้เลข */
.pdo-n li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: .3em; }
.pdo .box {
  width: 1.3em; height: 1.3em; margin-top: .1em; display: grid; place-items: center; justify-self: end;
  border: 2px solid var(--muted); border-radius: .3em; color: transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pdo .box .ic { width: .8em; height: .8em; stroke-width: 3; }
.pdo button[aria-pressed="true"] { background: var(--ok-d); }
.pdo button[aria-pressed="true"] .box { background: var(--ok); border-color: var(--ok); color: var(--bg); }
.pdo button[aria-pressed="true"] .t { color: var(--text2); }
@media (hover: hover) { .pdo button:hover { background: var(--surface2); } .pdo button[aria-pressed="true"]:hover { background: var(--ok-d); } }

.brief-foot { display: flex; align-items: center; gap: 16px; padding-top: clamp(10px, 2vh, 18px); border-top: 1px solid var(--line); color: var(--muted); }
.brief-foot .btn-icon { width: 56px; min-height: 56px; }
.bars { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bars i { width: clamp(16px, 3.6vw, 46px); height: 4px; border-radius: 2px; background: var(--line2); }
.bars i.on { background: var(--gold); }
/* แถบไต่ระดับของบทเรียน (theory.js climb) */
.lroute { position: relative; flex: 1; min-width: 0; height: 34px; margin: 0 10px; }
.lroute > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lroute polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lroute .cl-done { stroke: var(--text); }
.lroute .cl-fut { stroke: var(--muted); stroke-dasharray: 2 6; }
.cl-pt { position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%) rotate(45deg); border: 1.5px solid var(--muted); background: var(--bg); }
.cl-pt.on { border-color: var(--text); background: var(--text); }
.cl-ac { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); overflow: visible; }
.cl-ac path { fill: var(--sky); stroke: var(--bg); stroke-width: 1.5; }
.brief-foot .pos { min-width: 52px; text-align: center; font: 500 clamp(13px, 1.2vw, 17px)/1 var(--f-m); letter-spacing: .08em; color: var(--muted); }
.pft { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: clamp(13px, min(1.4vw, 2.5vh), 20px); }
.pft .dot { width: .6em; height: .6em; }
.pft .y { font-family: var(--f-m); }
.pft .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* แบบ B: ทีละประเด็น */
.psteps { flex: 1 1 360px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(6px, 1vw, 12px); }
.psteps li {
  padding-top: .5em; border-top: 5px solid var(--line2);
  font-size: clamp(13px, min(1.45vw, 2.6vh), 24px); font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psteps li.done { border-color: var(--text2); color: var(--text2); }
.psteps li.now { border-color: var(--gold); color: var(--text); }
.pmain { align-self: center; min-height: 0; max-height: 100%; overflow: auto; max-width: 1500px; }
.plab { margin-bottom: .7em; font-size: clamp(15px, min(1.8vw, 3.2vh), 32px); font-weight: 600; color: var(--gold); }
.pq { font: 600 clamp(26px, min(4.2vw, 7.4vh), 84px)/1.4 var(--f-d); }
.ptitle { margin-bottom: .55em; font: 600 clamp(24px, min(3.4vw, 6vh), 64px)/1.3 var(--f-d); }
.ptext { font-size: clamp(16px, min(1.9vw, 3.3vh), 36px); line-height: 1.65; color: var(--text2); }
.pmain .pdo { gap: .6em; }
.pmain .pdo li, .pfac li { font-size: clamp(18px, min(2.4vw, 4.2vh), 46px); }
.pfac li { position: relative; margin-bottom: .5em; padding-left: 1.1em; line-height: 1.5; }
.pfac li::before { content: ""; position: absolute; left: 0; top: .58em; width: .4em; height: .4em; border-radius: 50%; background: var(--warn); }

.edge { position: fixed; top: 110px; bottom: 110px; width: 16vw; z-index: 51; border: 0; background: none; }
.edge.l { left: 0; }
.edge.r { right: 0; }

/* หน้าเปิด / หน้าปิด */
.b-eyebrow { flex: 1 1 auto; min-width: 0; font-size: clamp(13px, min(1.35vw, 2.4vh), 20px); color: var(--muted); }
.cover, .endq { align-self: center; width: 100%; max-width: 1500px; min-height: 0; max-height: 100%; overflow: auto; }
.brief .cover h1, .brief .endq h1 { margin-bottom: .4em; font: 600 clamp(30px, min(4.4vw, 7.8vh), 84px)/1.2 var(--f-d); }
.cover h1 em, .endq h1 em { font-style: normal; color: var(--gold); }
.cond { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 4vh, 44px); }
.cond span { padding: .3em .8em; border: 1px solid var(--line2); border-radius: var(--r-s); font-size: clamp(13px, min(1.4vw, 2.5vh), 22px); font-weight: 500; line-height: 1.4; color: var(--text2); }
.cover-list { border-top: 1px solid var(--line); }
.cover-list a {
  min-height: 48px; display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 1em; align-items: baseline;
  padding: .6em .2em; border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: clamp(16px, min(1.9vw, 3.3vh), 34px);
}
.cover-list a:hover { background: var(--surface); }
.cover-list .n { font: 600 .85em/1.4 var(--f-m); color: var(--sky); }
.cover-list .t { font-weight: 600; line-height: 1.4; }
.cover-list .m { display: inline-flex; align-items: center; gap: .5em; font-size: .7em; color: var(--muted); white-space: nowrap; }
.cover-list .m .dot { width: .6em; height: .6em; }
.endq ol { border-top: 1px solid var(--line); }
.endq li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 1em; align-items: baseline; padding: clamp(12px, 2.4vh, 28px) .2em; border-bottom: 1px solid var(--line); font-size: clamp(19px, min(2.3vw, 4vh), 46px); }
.endq .n { font: 600 .7em/1.4 var(--f-m); color: var(--gold); }
.endq .q { font: 600 1em/1.45 var(--f-d); }
.endq .t { margin-top: .35em; font-size: .55em; line-height: 1.4; color: var(--muted); }
.brief-foot .btn-primary { flex: none; margin-left: auto; padding: 0 clamp(20px, 2.4vw, 40px); min-height: clamp(56px, 7vh, 80px); font-size: clamp(17px, min(1.6vw, 2.8vh), 26px); }
.keys { min-width: 0; font-size: clamp(12px, min(1.1vw, 2vh), 16px); line-height: 2; color: var(--muted); }
.keys kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .4em;
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: var(--r-s); font: 500 .9em/1 var(--f-m); color: var(--text2);
}
/* จอสัมผัสไม่มีคีย์บอร์ด — ไม่ต้องบอกปุ่มลัด */
@media (hover: none) and (pointer: coarse) { .keys { display: none; } }

@media (orientation: portrait) and (max-width: 760px) {
  .brief-body { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .edge { display: none; }
  /* มือถือแนวตั้ง: ปุ่มเต็มจอไม่จำเป็น เอาที่ให้ป้ายปุ่มอยู่บรรทัดเดียว (จอ 320px ก็ยังพอ) */
  .tools { gap: 6px; }
  .tools #full { display: none; }
  .tools .btn, .seg.mini button { padding: 0 10px; white-space: nowrap; }
  .cover-list a { grid-template-columns: 1.6em minmax(0, 1fr); }
  .cover-list .m { grid-column: 2; }
}

/* ── ข้อมูล / พื้นที่ ─────────────────────────────────────── */
.panel { margin-bottom: 16px; padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.panel h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 600 17px/1.35 var(--f-d); }
.panel h2 .ic { width: 18px; height: 18px; color: var(--text2); }
.panel > p { margin-bottom: 14px; font-size: 14px; line-height: 1.65; color: var(--text2); }
.team-photo { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.team-photo img { display: block; width: 100%; height: auto; }
.team-photo figcaption { padding: 10px 16px; font-size: 13px; line-height: 1.5; color: var(--text2); }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.field .row { display: flex; gap: 8px; }
.field input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: var(--r);
  border: 1px solid var(--line2); background: var(--bg); font: 500 16px var(--f-m);
}
.field input:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px var(--sky-d); }
.field .btn-primary { flex: none; min-height: 48px; font-size: 15px; }
.msg { min-height: 1.6em; margin-top: 10px; font-size: 14px; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--bad); }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.status-line .tag { flex: none; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; }
.seg button {
  min-height: 48px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 500; color: var(--text2);
}
.seg button + button { border-left: 1px solid var(--line2); }
.seg button[aria-pressed="true"] { font-weight: 600; }
.seg .ck { width: 15px; height: 15px; stroke-width: 2.6; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stats > * { padding: 12px; background: var(--surface); }
.stats b { display: block; font: var(--kpi-w) var(--fs-kpi-m)/var(--kpi-lh) var(--f-m); font-variant-numeric: tabular-nums; }
.stats span { font-size: var(--fs-xs); line-height: var(--kpi-lab-lh); color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-top: 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* ── หน้าภาพรวม ───────────────────────────────────────────── */
/* ตัวหน้าอยู่ใน shadow root ของ overview.js (สไตล์ใน overview.css) — ที่นี่แค่ปล่อยให้กว้างเต็มจอ
   และล็อกการเลื่อนตอนเปิดแผงเคส */
body.ov main { max-width: none; padding: 0 0 calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 24px); }
@media (min-width: 1024px) { body.ov main { padding-bottom: 0; } }
html.ov-lock { overflow: hidden; }

/* ── แถบแท็บ ──────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: flex; justify-content: center;
  background: var(--bg2); border-top: 1px solid var(--line);
}
.tabbar a {
  flex: 1; max-width: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; font-size: 12px; color: var(--muted);
}
.tabbar .pill { display: grid; place-items: center; width: 54px; height: 28px; border-radius: var(--r-pill); transition: background-color var(--t-fast); }
.tabbar a[aria-current="page"] { color: var(--text); font-weight: 600; }
.tabbar a[aria-current="page"] .pill { background: var(--surface2); color: var(--gold); }
:root[data-theme="day"] .tabbar a[aria-current="page"] .pill { background: var(--surface); }

/* ── หน้าหลัก: ไอคอนแอปแบบหน้าจอโทรศัพท์ ──────────────────────
   21 ต.ค. 2569 ผู้ใช้สั่งให้ไอคอนทางลัดเป็นโทนเดียว: พื้นกรมท่า + เส้นทอง ทั้งสองธีม (DECISIONS.md หัวข้อ "หน้าหลัก")
   --tile-* เก็บไว้ให้ lessons.js/APPS อ้างถึงได้ แต่ .app-ic ไม่ใช้แล้ว */
:root {
  --tile-gold: #a8720c;
  --tile-blue: #2f7fc1;
  --tile-green: #23885f;
  --tile-violet: #6d5bd0;
  --tile-grey: #5f6b82;
  --tile-orange: #c4561c;
  --tile-rose: #c23b5a;
  --tile-teal: #1f7f8f;
  --tile-indigo: #3d55b8;
}
/* ปกหน้าหลัก: ภาพท้องฟ้า + ฮ. เล็กทางขวา (img/hero-*.webp สร้างด้วย Higgsfield ไม่มีเครื่องหมายหน่วย)
   --scrim ไล่จากสีพื้นทางซ้าย ตัวอักษรจึงอยู่บนพื้นทึบเสมอ ไม่พึ่งภาพเรื่องคอนทราสต์ */
.home .widget {
  position: relative; margin-bottom: 16px; padding: 20px 18px 16px; min-height: 248px;
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--scrim), var(--hero-s) 78% center / cover no-repeat, var(--bg2);
}
.home .widget::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--line); pointer-events: none; }
.w-eyebrow { font: 500 12.5px/1.4 var(--f-b); color: var(--text2); }
.w-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 8px; vertical-align: middle; background: var(--gold); }
.w-h { max-width: 15em; margin: 8px 0 auto; padding-bottom: 16px; font: 600 28px/1.3 var(--f-d); }
.w-h em { display: block; font-style: normal; color: var(--gold); }
.w-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 12px; max-width: 420px; border-top: 1px solid var(--line2); }
.w-stats > div { padding: 10px 2px 0; }
.w-stats > div + div { padding-left: 14px; border-left: 1px solid var(--line); }
@media (min-width: 720px) {
  .home .widget { min-height: 320px; padding: 30px 32px 22px; background: var(--scrim), var(--hero) 80% center / cover no-repeat, var(--bg2); }
  .w-h { font-size: 38px; }
}
.w-stats b { display: block; font: var(--kpi-w) var(--fs-kpi-m)/var(--kpi-lh) var(--f-m); font-variant-numeric: tabular-nums; }
.w-stats span { font-size: var(--fs-xs); line-height: var(--kpi-lab-lh); color: var(--text2); }
.w-unit { display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text2); }

.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
.app {
  display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0;
  padding: 0; border: 0; background: none; text-decoration: none; color: var(--text);
}
.app-ic {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, #1d2c4a, #0d1528); color: #f2c66d;
  border: 1px solid rgb(242 198 109 / .32);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 4px 10px rgb(0 0 0 / .18);
  transition: transform .12s var(--ease);
}
.app-ic .ic { width: 30px; height: 30px; stroke-width: 1.9; }
.app:active .app-ic { transform: scale(.92); }
.app:hover .app-ic { filter: brightness(1.08); }
.app:focus-visible { outline: none; }
.app:focus-visible .app-ic { outline: 2px solid var(--sky); outline-offset: 3px; }
.app-l { max-width: 100%; font-size: 12.5px; line-height: 1.35; text-align: center; color: var(--text2); overflow-wrap: break-word; }

.home-sec { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.sec-h { margin-bottom: 16px; font: 600 16px/1.35 var(--f-d); }
.sec-h span { margin-left: 6px; font: 400 13px/1.4 var(--f-b); color: var(--muted); }
.sec-empty { grid-column: 1 / -1; font-size: 14px; color: var(--text2); }
.tip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  margin-top: 22px; padding: 14px 16px; min-height: 56px; border: 1px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); text-decoration: none;
}
.tip-l { grid-column: 1; font-size: 12.5px; color: var(--gold); font-weight: 600; }
.tip-t { grid-column: 1; font-size: 15px; line-height: 1.55; }
.tip .ic { grid-column: 2; grid-row: 1 / 3; color: var(--muted); }
.home-sec .tip { margin: 0 0 18px; }
.home-h { margin-bottom: 14px; }

/* การ์ดคลิปเด่น — ผู้ใช้ขอให้เมนูคลิปบทเรียนเด่นกว่าไอคอนอื่นชัดเจน (4 พ.ย. 2569)
   ภาพปกตอนถัดไปที่ยังไม่ได้ดู + ปุ่มเล่นวงกลม · หน้าหลักจอคอมฯ (viewHomeDesk) ไม่ใช้ */
.fclip {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) 48px; align-items: center; gap: 14px;
  margin-bottom: 28px; padding: 12px 14px 12px 12px;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface);
  text-decoration: none; color: var(--text); transition: transform .12s var(--ease);
}
.fclip:active { transform: scale(.985); }
.fclip:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.fc-pv {
  display: grid; place-items: center; width: 60px; height: 92px; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(160deg, #1d2c4a, #0d1528); color: #f2c66d; border: 1px solid rgb(242 198 109 / .32);
}
.fc-pv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; }
.fc-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fc-k { font: 500 12.5px/1.4 var(--f-b); color: var(--gold); font-variant-numeric: tabular-nums; }
.fc-t { font: 600 17px/1.35 var(--f-d); overflow-wrap: anywhere; }
.fc-s { font: 400 13px/1.45 var(--f-b); color: var(--text2); font-variant-numeric: tabular-nums; }
.fc-go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #f2c66d; color: #0d1528; }
.fc-go .ic { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; stroke: none; }
:root[data-theme="day"] .fc-go { background: #0d1528; color: #f2c66d; }
/* ไอคอนคลิปในแถวเมนู: กลับสี (พื้นทอง เส้นกรมท่า) — ยังอยู่ในชุดสีกรมท่า/ทองของ .app-ic */
.app.is-hl .app-ic { background: #f2c66d; color: #0d1528; border-color: #f2c66d; }
.app.is-hl .app-l { color: var(--text); font-weight: 600; }
:root[data-theme="day"] .app.is-hl .app-ic { border-color: #a8720c; }
/* แถวบทเรียนทฤษฎี: จอแคบเลื่อนแนวนอน แทนตาราง 3 แถว (เห็นขอบไอคอนถัดไปเป็นสัญญาณว่าเลื่อนได้) */
.lsn-row { margin-top: 2px; }
@media (max-width: 559px) {
  .lsn-row {
    display: flex; gap: 4px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto;
    scroll-snap-type: x proximity; scroll-padding-left: 16px; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .lsn-row::-webkit-scrollbar { display: none; }
  .lsn-row .app { flex: 0 0 80px; scroll-snap-align: start; }
  .lsn-row .app-ic { width: 56px; height: 56px; border-radius: 14px; }
  .lsn-row .app-ic .ic { width: 26px; height: 26px; }
}
@media (min-width: 560px) { .apps { grid-template-columns: repeat(auto-fill, 96px); justify-content: start; gap: 24px 12px; } }

/* หน้าหลักแบบโซน (DECISIONS 4 พ.ย. 2569 แบบ B) — แผงละด้าน แต่ละแผงมีตาราง 4 คอลัมน์ของตัวเอง
   การบิน = กรมท่า/ทอง (.app-ic เดิม) · ภาคพื้น = ถ่านเข้ม/เหลือง + แถบเตือนภัยเหลืองดำ · ใช้ร่วมกัน = เทา */
.zone { position: relative; margin-bottom: 16px; padding: 16px 12px 20px; overflow: hidden;
  border: 1px solid var(--line); border-top: 3px solid var(--zc, var(--line2)); border-radius: var(--r-l); background: var(--surface); }
.zone-h { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 0 4px; font: 600 15px/1.35 var(--f-d); }
.zone-h i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--zc); }
.zone-h small { margin-left: auto; font: 500 var(--fs-2xs)/1 var(--f-m); color: var(--muted); font-variant-numeric: tabular-nums; }
.z-flight { --zc: #f2c66d; }
:root[data-theme="day"] .z-flight { --zc: #a8720c; }
.z-common { --zc: #8a93a3; }
.z-ground { --zc: #EF9F27; border-top: 0; padding-top: 24px; }
.z-ground::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(-45deg, #EF9F27 0 8px, #2C2C2A 8px 16px); }
.z-ground .zone-h i { background: repeating-linear-gradient(-45deg, #EF9F27 0 3px, #2C2C2A 3px 6px); }
.z-ground .app-ic { position: relative; overflow: hidden; background: #2C2C2A; color: #FAC775; border-color: rgb(239 159 39 / .55); }
.z-ground .app-ic::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: repeating-linear-gradient(-45deg, #EF9F27 0 5px, #2C2C2A 5px 10px); }
.z-ground .app-ic .ic { margin-bottom: 4px; }
.z-common .app-ic { background: linear-gradient(160deg, #5f6878, #3b4250); color: #eef1f5; border-color: rgb(255 255 255 / .16); }
:root[data-theme="day"] .z-ground .app-ic { border-color: #2C2C2A; }
:root[data-theme="day"] .z-common .app-ic { border-color: #3b4250; }

/* ศูนย์นิรภัยภาคพื้น #/ground (ground.js) — แท็บ 5 อันเลื่อนข้างได้บนมือถือ · แถบเตือนภัยใต้หัวเรื่อง */
.gd .page-h { position: relative; padding-bottom: 14px; }
.gd .page-h::after { content: ''; position: absolute; left: 0; bottom: 0; width: 96px; height: 6px; border-radius: 2px; background: repeating-linear-gradient(-45deg, #EF9F27 0 6px, #2C2C2A 6px 12px); }
.gd-tabs { overflow-x: auto; scrollbar-width: none; }
.gd-tabs::-webkit-scrollbar { display: none; }
.gd-tabs a { flex: 1 0 auto; padding: 0 12px; white-space: nowrap; }
.gd-tabs a[aria-current="page"] .ic { color: #EF9F27; }
.gd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.gd-kpis a { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; }
.gd-kpis small { font-size: var(--fs-2xs); color: var(--muted); }
.gd-kpis b { font: 600 26px/1.1 var(--f-d); font-variant-numeric: tabular-nums; }
.gd-kpis b.gd-wip { font-size: 14px; line-height: 1.9; }
.gd-kpis span { font-size: var(--fs-2xs); color: var(--text2); }
.gd-note { display: flex; align-items: center; gap: 6px; margin: 0 0 22px; font-size: var(--fs-xs); color: var(--muted); }
.gd-note .ic { flex: none; width: 15px; height: 15px; }
.gd-wip { color: #b86e0c; font-weight: 600; }
:root:not([data-theme="day"]) .gd-wip { color: #FAC775; }
.gd-br { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.gd-br > li { padding: 14px 14px 12px; border: 1px solid var(--line); border-left: 4px solid #EF9F27; border-radius: var(--r-l); background: var(--surface); }
.gd-br h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 600 16px/1.4 var(--f-d); }
.gd-br h3 small { margin-left: auto; font: 500 var(--fs-2xs)/1 var(--f-m); color: var(--muted); }
.gd-br p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text2); }
.gd-br p.gd-wip { margin-top: 6px; font-size: var(--fs-2xs); }
.gd-bl { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.gd-bl a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.gd-bl .ic { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #2C2C2A; color: #FAC775; }
.gd-clips { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gd-clip { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); color: var(--text); text-decoration: none; }
.gd-pv { position: relative; flex: none; width: 72px; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: #2C2C2A; }
.gd-pv::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(-45deg, #EF9F27 0 5px, #2C2C2A 5px 10px); }
.gd-pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-play { position: absolute; inset: 0; display: grid; place-items: center; }
.gd-play .ic { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; fill: currentColor; }
.gd-cb { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-cb small { font-size: var(--fs-2xs); color: var(--muted); }
.gd-cb b { font: 600 16px/1.4 var(--f-d); }
.gd-cb span { font-size: var(--fs-sm); line-height: 1.5; color: var(--text2); }
.gd-more { margin: 16px 0 0; }
.gd-more .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
@media (min-width: 720px) { .gd-br { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-clips { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }

/* ── ทฤษฎีนิรภัย (theory.js) ─────────────────────────────────
   DECISIONS.md หัวข้อ "ทฤษฎีนิรภัย": ใช้โครงจอเต็มของโหมดบรีฟ (.brief) แต่ไม่มีแถบแตะขอบจอ
   เพราะจะบังปุ่มของภาพโต้ตอบ · ระดับความเสี่ยงบอกด้วยคำเสมอ สีเป็นแค่ตัวเสริม */
:root, :root[data-theme="night"] { --bad-d: rgb(255 122 133 / .14); }
:root[data-theme="day"] { --bad-d: rgb(179 49 28 / .1); }

/* รายการบท = แผนที่เส้นทางบิน · เรียนแล้ว = เส้นทึบสีตัวอักษร · ถัดไป = ฟ้า · ยังไม่เรียน = เส้นประจาง
   ทองใช้แค่วงที่เลือกกับปุ่มหลักปุ่มเดียว · จอแคบ (<700px) ซ่อนแผนที่ ใช้รายการแนวตั้งแทน */
.th-meta { margin: -8px 0 18px; font-size: 15px; color: var(--text2); }
.th-meta b { font-family: var(--f-m); font-weight: 600; color: var(--text); }
.dm { display: block; flex: none; width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid var(--muted); border-radius: 2px; background: var(--bg); }
.done > .dm, .done .dm { background: var(--text); border-color: var(--text); }
.next > .dm, .next .dm { background: var(--sky); border-color: var(--sky); }

.rt { display: grid; gap: 20px; }

/* ── กรอบยุทธวิธี Tactical Cockpit HUD / MFD สำหรับแผนที่เส้นทาง ── */
.rmap-hud-wrap {
  display: none; position: relative; border-radius: var(--r-xl);
  background: #090e18; border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.rmap-hud-wrap::before, .rmap-hud-wrap::after,
.hud-bracket-bl, .hud-bracket-br {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 5;
  border-color: var(--sky); border-style: solid; opacity: .75;
}
.rmap-hud-wrap::before { top: 40px; left: 8px; border-width: 2px 0 0 2px; }
.rmap-hud-wrap::after { top: 40px; right: 8px; border-width: 2px 2px 0 0; }
.hud-bracket-bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.hud-bracket-br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.hud-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px;
  background: rgba(15, 23, 42, 0.88); border-bottom: 1px solid rgba(56, 189, 248, 0.16);
  font: 500 12px/1.4 var(--f-b); color: var(--muted);
}
.hud-code { font: 500 12px/1.4 var(--f-m); }
.hud-tag { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hud-tag:first-child { flex: 0 1 auto; min-width: 0; }
.hud-tag:first-child > span { overflow: hidden; text-overflow: ellipsis; }
.hud-tag:not(:first-child) { flex: none; }
.hud-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 8px var(--sky); }
.hud-dot.pulse { animation: hudPulse 1.6s ease-in-out infinite; }
@keyframes hudPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
.hud-active { color: var(--gold) !important; font-weight: 600; }

.rmap {
  display: block; position: relative; width: 100%; aspect-ratio: 820 / 400;
  background: radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
              #070b14;
}
.rsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rsvg .band { fill: transparent; }
.rsvg .band.alt { fill: rgba(255, 255, 255, 0.015); }
.rsvg .band-div { stroke: rgba(56, 189, 248, 0.14); stroke-width: 1; stroke-dasharray: 4 6; }
/* ป้ายช่วงเป็น HTML ขนาดคงที่ในแถวหัวตารางเหนือแผนที่ ไม่ย่อตาม SVG (กฎตัวอักษร ข้อ 2) */
.band-row { container-type: inline-size; }
.band-in { position: relative; height: 44px; }
.band-tag { position: absolute; top: 6px; margin-left: 10px; display: flex; flex-direction: column; pointer-events: none; }
.band-tag:first-child { margin-left: 26px; }
.band-tag b { font: 600 12px/1.4 var(--f-b); color: var(--text2); white-space: nowrap; }
.band-tag small { font: 400 12px/1.4 var(--f-b); color: var(--muted); white-space: nowrap; }
/* แถวแคบกว่า 700px คำอังกฤษใต้ชื่อช่วงไม่พอที่ จึงซ่อน */
@container (max-width: 700px) {
  .band-in { height: 26px; }
  .band-tag small { display: none; }
}
@container (max-width: 560px) {
  .band-tag .bt-k { display: none; }
  .band-tag { margin-left: 6px; }
}


/* เส้นระดับการบิน (Flight Levels) */
.rsvg .fl-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; stroke-dasharray: 2 6; }
.rsvg .rwy { stroke: #64748b; stroke-width: 3.5; stroke-linecap: round; }

/* ขาการบินเรืองแสงและแอนิเมชัน */
.rsvg .leg-glow { stroke-width: 7; stroke-linecap: round; fill: none; opacity: 0; }
.rsvg .leg-glow.done { stroke: var(--sky); opacity: 0.22; }
.rsvg .leg-glow.next { stroke: var(--gold); opacity: 0.35; animation: legGlowBreath 2s infinite ease-in-out; }
@keyframes legGlowBreath { 0%, 100% { opacity: 0.2; stroke-width: 6; } 50% { opacity: 0.45; stroke-width: 9; } }

.rsvg .leg { stroke-width: 2.8; stroke-linecap: round; fill: none; }
.rsvg .leg.done { stroke: var(--text); }
.rsvg .leg.next { stroke: var(--gold); stroke-dasharray: 6 6; animation: legDash 1.2s linear infinite; }
@keyframes legDash { to { stroke-dashoffset: -24; } }
.rsvg .leg.fut { stroke: rgba(148, 163, 184, 0.35); stroke-dasharray: 3 7; }

/* สัญลักษณ์เฮลิคอปเตอร์ ทอ. บน.2 */
.rsvg .heli-node { transition: transform .4s ease; }
.rsvg .heli-ping { fill: none; stroke: var(--sky); stroke-width: 1.2; opacity: 0.4; animation: pingPulse 2s ease-out infinite; }
@keyframes pingPulse { 0% { r: 12; opacity: 0.8; } 100% { r: 26; opacity: 0; } }
.rsvg .heli-beam { stroke: var(--sky); stroke-width: 1.6; stroke-dasharray: 3 3; animation: beamPulse 1s linear infinite; }
@keyframes beamPulse { to { stroke-dashoffset: -12; } }
.rsvg .heli-disc { fill: rgba(56, 189, 248, 0.1); stroke: var(--sky); stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 2 4; }
.rsvg .heli-rotor { stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; }
.rsvg .heli-body { fill: #0f172a; stroke: var(--sky); stroke-width: 1.5; }
.rsvg .heli-glass { fill: var(--sky); fill-opacity: 0.9; }
.rsvg .heli-fin { stroke: var(--sky); stroke-width: 1.5; }
.rsvg .heli-tailrot { stroke: #ffffff; stroke-width: 1.5; stroke-linecap: round; }

/* หมุด Waypoint สไตล์จุด FIX และเป้าหมายเรดาร์ */
.wp {
  position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; z-index: 2;
}
.wp-target { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.wp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(148, 163, 184, 0.4); transition: all var(--t-slow) ease;
}
.wp.done .wp-ring { border-color: rgba(56, 189, 248, 0.45); }
.wp.done .dm { background: #f8fafc; border-color: #f8fafc; box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

.wp.next .wp-ring {
  border-color: var(--gold); box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
  animation: targetPulse 1.8s ease-in-out infinite;
}
@keyframes targetPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.3); opacity: 1; } }
.wp.next .dm { background: var(--sky); border-color: var(--sky); box-shadow: 0 0 14px rgba(56, 189, 248, 0.8); }

.wp.sel::before {
  content: ""; position: absolute; inset: 2px; border: 2px solid var(--gold); border-radius: 50%;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.7);
}
.wp:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.wp:hover .dm { transform: rotate(45deg) scale(1.25); }

/* ป้ายชื่อ Waypoint แบบ Glassmorphic Chip */
.wl {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: var(--r-xl);
  background: rgba(11, 17, 32, 0.88); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  white-space: nowrap; font-size: 12px; line-height: 1.4; transition: all var(--t-slow) ease;
  pointer-events: none; z-index: 3;
}
.wl.up { bottom: calc(100% - 4px); }
.wl.dn { top: calc(100% - 4px); }
.wl-num { font: 600 12px/1.4 var(--f-m); color: #94a3b8; }
.wl-ic { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; color: var(--sky); }
.wl-ic .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.wl-name { color: #cbd5e1; font-weight: 500; }

.wp.done .wl-num { color: var(--sky); }
.wp.done .wl-name { color: #f1f5f9; }
.wp.next .wl {
  background: rgba(15, 23, 42, 0.95); border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.wp.next .wl-num { color: var(--gold); }
.wp.next .wl-name { color: #ffffff; font-weight: 600; }
.wp:hover .wl { border-color: rgba(56, 189, 248, 0.5); transform: translateX(-50%) translateY(-2px); }
/* ป้ายจุดแรกและจุดสุดท้ายยึดขอบด้านใน ไม่ให้ล้นกรอบเมื่อแผนที่แคบ */
.wp:first-of-type .wl { left: -8px; transform: none; }
.wp:last-of-type .wl { left: auto; right: -8px; transform: none; }
.wp:first-of-type:hover .wl, .wp:last-of-type:hover .wl { transform: translateY(-2px); }

/* โหมดกระดาษ / สว่าง (Paper Day Mode) */
:root[data-theme="day"] .rmap-hud-wrap {
  background: #f1f5f9; border-color: rgba(13, 100, 166, 0.25); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
:root[data-theme="day"] .hud-strip {
  background: rgba(241, 245, 249, 0.92); border-bottom-color: rgba(13, 100, 166, 0.18); color: #475569;
}
:root[data-theme="day"] .rmap { background: #f8fafc; }
:root[data-theme="day"] .wl {
  background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
:root[data-theme="day"] .wl-name { color: #1e293b; }
:root[data-theme="day"] .wp:not(.done):not(.next) .wl-num { color: #64748b; }
:root[data-theme="day"] .heli-body { fill: #f8fafc; stroke: var(--sky); }

.rpanel { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.rp-leg { font-size: 13px; color: var(--muted); }
.rp-h { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 10px; }
.rp-h .app-ic { width: 56px; height: 56px; border-radius: 14px; }
.rp-h .app-ic .ic { width: 26px; height: 26px; }
.rp-h h2 { font: 600 20px/1.35 var(--f-d); }
.rp-st { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--muted); }
.rp-st.done { color: var(--text2); }
.rp-st.next { color: var(--sky); }
.rp-tip { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--text2); }
.rp-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }
.rp-go { width: 100%; min-height: 56px; margin-top: 16px; justify-content: center; }
.rp-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text2); }
.rp-key li { display: inline-flex; align-items: center; gap: 8px; }
.rp-key .dm { width: 11px; height: 11px; }
.th-src { margin-top: 12px; font-size: 12px; line-height: 1.6; }

/* ── ทฤษฎีนิรภัย: ส่วนหัวระดับผู้บังคับบัญชา (Command Hero) & โมเดลจำลอง ───────── */
.th-command-hero {
  position: relative;
  border-radius: var(--r-l);
  border: 1px solid var(--line2);
  background: #090e1a;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.th-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* ภาพจริง ฮ. S-70i ฝูงบิน 201 (สนธยา/กลางวัน ตามธีม) ชิดขวา ขอบซ้ายจางเข้าพื้น — ตัวอักษรอยู่บนพื้นทึบทางซ้าย */
.th-hero-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 60%;
  opacity: 0.38;
  transition: transform 1.2s ease, opacity 0.5s ease;
}
:root[data-theme="day"] .th-n, :root:not([data-theme="day"]) .th-d { display: none; }
.th-command-hero:hover .th-hero-img {
  transform: scale(1.02);
}
.th-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #070d19 0%, rgba(7, 13, 25, 0.9) 45%, rgba(7, 13, 25, 0.5) 85%, rgba(7, 13, 25, 0.3) 100%);
}
@media (min-width: 720px) {
  .th-hero-img {
    width: 64%;
    opacity: 0.95;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
    mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  }
  .th-hero-overlay {
    background: linear-gradient(90deg, #070d19 0%, rgba(7, 13, 25, 0.92) 40%, rgba(7, 13, 25, 0.35) 66%, rgba(7, 13, 25, 0) 100%);
  }
}
.th-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(56, 189, 248, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center center;
  mask-image: radial-gradient(circle at 60% 40%, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 60% 40%, black 15%, transparent 75%);
}
.th-hero-content {
  position: relative;
  z-index: 2;
  padding: 30px 32px 26px;
  max-width: 820px;
}
/* ข้อความไม่เกินช่วงพื้นทึบ ไม่งั้นที่ ~768px คำบรรยายวิ่งทับลำ ฮ. */
@media (min-width: 720px) {
  .th-hero-content { max-width: min(820px, 62%); }
}
.th-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 14px;
}
.th-badge-sec, .th-badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font: 500 12px/1.4 var(--f-b);
}
.th-badge-sec {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: var(--sky);
}
.th-badge-gold {
  background: rgba(242, 198, 109, 0.12);
  border: 1px solid rgba(242, 198, 109, 0.32);
  color: var(--gold);
}
.th-hero-title {
  font: 600 clamp(24px, 3.2vw, 36px)/1.3 var(--f-d);
  color: #fff;
  margin: 0 0 12px;
}
.th-hero-hl {
  display: block;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--gold);
  margin-top: 4px;
}
.th-hero-desc {
  font-size: clamp(14px, 1.3vw, 15.5px);
  line-height: 1.65;
  color: #cbd5e1;
  max-width: 700px;
  margin: 0 0 20px;
}
.th-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.th-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.th-stat-val {
  font: var(--kpi-w) var(--fs-kpi-s)/1.4 var(--f-b);
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
}
.th-stat-lbl {
  font-size: var(--fs-2xs);
  line-height: var(--kpi-lab-lh);
  color: #94a3b8;
}

:root[data-theme="day"] .th-command-hero {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.15);
}
:root[data-theme="day"] .th-hero-overlay {
  background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.92) 45%, rgba(248, 250, 252, 0.55) 85%, rgba(248, 250, 252, 0.35) 100%);
}
@media (min-width: 720px) {
  :root[data-theme="day"] .th-hero-overlay {
    background: linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.92) 40%, rgba(248, 250, 252, 0.3) 66%, rgba(248, 250, 252, 0) 100%);
  }
}
:root[data-theme="day"] .th-hero-title {
  color: #0f172a;
}
:root[data-theme="day"] .th-hero-desc {
  color: #334155;
}
:root[data-theme="day"] .th-hero-stats {
  border-top-color: rgba(0, 0, 0, 0.1);
}
:root[data-theme="day"] .th-stat-val {
  color: #0f172a;
}
:root[data-theme="day"] .th-stat-lbl {
  color: #64748b;
}

.th-body-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.th-body-head .page-h {
  margin: 0;
}

/* แผงโมเดลใน rpanel */
.rp-diag-card {
  margin: 14px 0 16px;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  background: rgba(11, 17, 32, 0.6);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
:root[data-theme="day"] .rp-diag-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.rp-diag-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="day"] .rp-diag-bar {
  background: #e2e8f0;
}
.rp-diag-tag {
  font: 500 12px/1.4 var(--f-b);
  color: var(--muted);
}
.rp-diag-code {
  font: 600 12px/1.4 var(--f-m);
  color: var(--gold);
}
.rp-diag-body {
  position: relative;
  width: 100%;
  padding: 10px 12px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}
/* ภาพย่อไม่มีตัวอักษร (เล็กเกินกฎ ข้อ 2) ดูตัวอักษรได้ในแผนภาพเต็ม */
.rp-diag-body .td-svg text { display: none; }
.rp-diag-open {
  position: absolute; right: 10px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1.4 var(--f-b); color: var(--text2);
}
.rp-diag-open svg { width: 14px; height: 14px; }
.rp-diag-body:hover .rp-diag-open { color: var(--text); }
.rp-diag-body:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }

/* แผนภาพเต็ม: กว้างอย่างน้อย 640px ให้ตัวอักษรเล็กสุดในแผนภาพได้ ≥12px จอแคบกว่านั้นเลื่อนแนวนอน */
.diag-dlg {
  width: min(92vw, 760px); max-height: 90vh; padding: 0;
  border: 1px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); color: var(--text);
}
.diag-dlg::backdrop { background: rgba(2, 6, 23, .7); }
.dd-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.dd-bar h2 { margin: 0; font: 600 16px/1.3 var(--f-d); }
.dd-body { padding: 16px 32px; overflow-x: auto; }
.dd-body .td-svg { min-width: 640px; max-height: none; overflow: visible; }

/* สไลด์หน้าแรก (Executive Title Slide) */
.ls-title-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: 12px 0;
}
.ls-title-copy {
  display: flex;
  flex-direction: column;
}
.ls-title-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ls.is-title .ptitle {
  margin-bottom: 0.25em;
}
.ls.is-title .ptext {
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.6;
}
.ls.is-title .ls-stat {
  margin-top: 1em;
  padding-top: 0.8em;
}
.ls.is-title .ls-stat b {
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.15;
}
.ls-title-vis {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.ls-vis-box {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--line2);
  border-radius: var(--r-l);
  background: rgba(11, 17, 32, 0.85);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
:root[data-theme="day"] .ls-vis-box {
  background: #ffffff;
  border-color: #cbd5e1;
}
.ls-vis-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--line2);
}
:root[data-theme="day"] .ls-vis-bar {
  background: #f1f5f9;
}
.ls-vis-tag {
  font: 600 12px/1.4 var(--f-m);
  color: var(--sky);
}
.ls-vis-ref {
  font: 600 12px/1.4 var(--f-m);
  color: var(--gold);
}
.ls-vis-svg {
  padding: 18px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}
.ls-vis-caption {
  padding: 8px 16px 12px;
  font: 500 12px/1.4 var(--f-b);
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--line);
}

/* กราฟิกโมเดล SVG ทั่วไป */
.td-svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
  font-family: var(--f-b);
  /* สีพื้นกล่องในแผนภาพ (ค่า HSL ยกเว้น sunk) อยู่ที่นี่ ไม่อยู่ใน desk.css ที่โหลดเฉพาะจอ ≥1024px */
  --td-glow: 40 84% 69%;
  --td-accent: 201 100% 71%;
  --td-sunk: hsl(222 49% 8% / .55);
}
:root[data-theme="day"] .td-svg { --td-glow: 37 70% 45%; --td-accent: 206 85% 35%; --td-sunk: rgb(255 255 255 / .55); }
.td-svg text {
  user-select: none;
}
@media (max-width: 900px) {
  .ls-title-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ls-vis-box {
    max-width: 100%;
  }
  .th-hero-content {
    padding: 22px 20px 20px;
  }
}

.legs { display: grid; gap: 18px; margin-top: 22px; }
.ph-h { margin-bottom: 4px; font: 600 13px/1.4 var(--f-b); color: var(--muted); }
.legs li { position: relative; }
.legs li::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; border-left: 2px dashed var(--muted); }
.legs li.done::before { border-left: 2px solid var(--text); }
.legs li.next::before { border-left: 2px solid var(--sky); }
.legs-ph:first-child li:first-child::before { top: 50%; }
.legs-ph:last-child li:last-child::before { bottom: 50%; }
.leg-r { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 10px 8px 10px 4px; border-radius: var(--r-l); color: var(--text); text-decoration: none; }
.leg-r .dm { position: relative; justify-self: center; width: 14px; height: 14px; }
.leg-r > .ic { color: var(--muted); }
.legs li.next .leg-r { background: var(--sky-d); }
:root[data-theme="day"] .legs li.next .leg-r { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } /* ฟ้าบนพื้นฟ้าอ่อนกลางวันได้แค่ 4.1:1 */
.leg-t { display: grid; gap: 1px; min-width: 0; }
.leg-t small { font-size: 12px; color: var(--muted); }
.leg-t b { font: 600 16px/1.35 var(--f-d); }
.leg-t em { font-style: normal; font-size: 13px; color: var(--muted); }
.legs li.done em { color: var(--text2); }
.legs li.next em { color: var(--sky); font-weight: 600; }

@media (min-width: 700px) {
  .rmap-hud-wrap { display: block; margin: 8px 0 24px; }
  .legs { display: none; }
}
@media (min-width: 1024px) {
  .rt { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .rmap-hud-wrap { margin: 0; }
}

.brief.lsn .b-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--text2); font-weight: 500; }
.ls-ic { flex: none; width: 32px; height: 32px; border-radius: var(--r); display: grid; place-items: center; background: var(--c); color: #fff; }
.ls-ic .ic { width: 18px; height: 18px; }
.lmain { align-self: center; justify-self: center; width: 100%; max-width: 1100px; min-height: 0; max-height: 100%; overflow: auto; }
@keyframes ls-in { from { opacity: 0; } }
.ls { animation: ls-in .25s var(--ease) both; font-size: clamp(15px, min(1.5vw, 2.6vh), 22px); line-height: 1.6; }
.ls .ptitle { font-size: clamp(26px, min(3.6vw, 6.4vh), 60px); }
.ls .plab { font-size: clamp(14px, min(1.5vw, 2.6vh), 22px); }
.ls-h { margin-bottom: .7em; font: 600 clamp(20px, min(2.6vw, 4.4vh), 40px)/1.3 var(--f-d); }
.ls-hrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.ls-hrow .btn { min-height: 48px; font-size: 14px; }
.ls-cap { margin-top: .9em; font-size: .88em; line-height: 1.6; color: var(--muted); }
.ls-hrow + .ls-cap { margin: -.3em 0 .9em; }
.ls-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .7em; margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--line); }
.ls-stat b { font: 600 clamp(36px, min(5vw, 8vh), 88px)/1.25 var(--f-d); color: var(--gold); }
.ls-stat span { max-width: 40ch; color: var(--text2); }

.ls-pts { display: grid; gap: 1em; }
.ls-pts li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: .6em; }
.ls-pts .n { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--sky-d); color: var(--sky); font: 600 .85em/1 var(--f-m); }
.ls-pts b { display: block; margin-bottom: .15em; font-family: var(--f-d); font-weight: 600; font-size: 1.08em; }
.ls-pts p { color: var(--text2); }

.ls-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.ls-side { padding: 1em 1.1em; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); }
.ls-side h3 { margin-bottom: .6em; font: 600 1.1em/1.35 var(--f-d); }
.ls-side.a h3 { color: var(--sky); }
.ls-side.b h3 { color: var(--gold); }
.ls-side li { position: relative; padding-left: 1em; margin-bottom: .45em; color: var(--text2); }
.ls-side li::before { content: ""; position: absolute; left: 0; top: .65em; width: .35em; height: .35em; border-radius: 50%; background: var(--muted); }

.ls-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.ls-cards.many { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
@media (orientation: landscape) { .ls-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 8 ใบ: 4 × 2 บนจอแนวนอน */
.ls-card {
  display: grid; align-content: start; gap: .25em; min-height: 56px; padding: .9em 1em;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); text-align: left; font-size: .95em;
}
.ls-card > b { font: 600 1.1em/1.35 var(--f-d); }
.ls-card small { font-size: .82em; color: var(--muted); }
.ls-card p { color: var(--text2); }
.ls-card.flip { min-height: 7.2em; cursor: pointer; color: var(--text); }
.ls-card.flip:hover { border-color: var(--sky); }
.ls-card.flip .fr { display: grid; gap: .2em; align-content: center; height: 100%; }
.ls-card.flip .fr b { font: 600 1.35em/1.25 var(--f-d); }
.ls-card.flip .fr::after { content: "แตะเพื่อดู"; margin-top: .3em; font-size: .75em; color: var(--sky); }
.ls-card.flip .bk { display: none; font-size: .92em; line-height: 1.55; color: var(--text); }
.ls-card.flip .bk small { display: block; margin-bottom: .2em; color: var(--gold); font-weight: 600; }
.ls-card.flip.on { background: var(--surface2); border-color: var(--line2); }
.ls-card.flip.on .fr { display: none; }
.ls-card.flip.on .bk { display: block; animation: enter .2s var(--ease) both; }
:root[data-theme="day"] .ls-card.flip.on { background: var(--bg); }

.ls-q { margin-bottom: .9em; font: 600 clamp(20px, min(2.6vw, 4.4vh), 40px)/1.4 var(--f-d); }
.ls-opts { display: grid; gap: 10px; }
.ls-opt {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: center; gap: .7em;
  min-height: 56px; padding: .6em 1em; border: 1px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); text-align: left; font-size: 1em; line-height: 1.5; color: var(--text);
}
.ls-opt:hover:not([aria-disabled="true"]) { border-color: var(--sky); }
.ls-opt .k { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); font: 600 .85em/1 var(--f-b); color: var(--text2); }
.ls-opt .k .ic { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.ls-opt[aria-disabled="true"] { cursor: default; }
.ls-opt.right { border-color: var(--ok); background: var(--ok-d); }
.ls-opt.right .k { border-color: var(--ok); color: var(--ok); }
.ls-opt.wrong { border-color: var(--bad); background: var(--bad-d); }
.ls-opt.wrong .k { border-color: var(--bad); color: var(--bad); }
.ls-opt.dim { opacity: .55; }
.ls-why { margin-top: 14px; padding: .9em 1.1em; border-radius: var(--r-l); background: var(--surface2); animation: enter .2s var(--ease) both; }
:root[data-theme="day"] .ls-why { background: var(--surface); border: 1px solid var(--line); }
.ls-why .r { margin-bottom: .3em; font-family: var(--f-d); font-weight: 600; }
.ls-why .r.ok { color: var(--ok); }
.ls-why .r.no { color: var(--bad); }
.ls-why p:not(.r) { color: var(--text2); }

.ls-score { margin-top: 1.2em; font-weight: 600; color: var(--sky); }
.ls-refs { margin-top: 1em; padding-top: .8em; border-top: 1px solid var(--line); }
.ls-refs .k { margin-bottom: .2em; font-size: .85em; color: var(--muted); }
.ls-refs a { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .2em 0; color: var(--sky); font-size: .92em; }
.ls-refs a .ic { width: 1em; height: 1em; flex: none; }
.ls-again { margin-top: 1em; min-height: 48px; }
.ls-refs a > span { line-height: 1.4; }
.ls-refs sup { margin-left: .15em; font: 600 .85em/1 var(--f-m); color: var(--text2); }
.ls-refs .nt { margin-left: 1.2em; font-size: .92em; color: var(--muted); }
@media (min-width: 900px) { .ls-refs ul.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6em; } }

/* ข้อความต้นฉบับ · ตัวเลขพร้อมที่มา · กราฟ (theory.js quote / stats / chart) — ทุกชิ้นลงท้ายด้วยลิงก์ที่มาพร้อมเลขหน้า */
.ls a.src { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: var(--sky); font: 500 .8em/1.35 var(--f-m); }
.ls a.src .ic { width: 1em; height: 1em; flex: none; }
.ls a.src:hover span { text-decoration: underline; text-underline-offset: 3px; }

.ls-qs { display: grid; gap: clamp(14px, 2.4vw, 32px); }
.ls-qs.two { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ls-quote { display: grid; align-content: start; gap: .45em; margin: 0; padding-left: 1.1em; border-left: 3px solid var(--gold); }
.ls-quote blockquote { margin: 0; }
.ls-quote blockquote p { max-width: 62ch; font-size: 1.06em; line-height: 1.6; color: var(--text); }
.ls-qs:not(.two) blockquote p { font-size: 1.22em; }
.ls-quote blockquote p::before { content: open-quote; margin-right: .08em; color: var(--gold); font-weight: 600; }
.ls-quote blockquote p::after { content: close-quote; margin-left: .04em; color: var(--gold); font-weight: 600; }
.ls-quote .th { max-width: 62ch; font-size: .88em; color: var(--text2); }
.ls-quote figcaption { margin-top: -.2em; }

.ls-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.ls-stats li { display: grid; grid-template-rows: auto auto 1fr auto; gap: .3em; padding: .8em 1em .3em; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); }
.ls-stats b { font: 600 clamp(28px, min(3.2vw, 5.4vh), 54px)/1.15 var(--f-d); color: var(--gold); font-variant-numeric: tabular-nums; }
.ls-stats span { line-height: 1.5; color: var(--text); }
.ls-stats q { font-size: .84em; line-height: 1.5; color: var(--text2); }

/* แท่งแนวนอน: ชุด 1 ทึบสีฟ้า · ชุด 2 ลายทแยงสีทอง มีกรอบ — แยกได้แม้มองไม่เห็นสี · ค่าพิมพ์ต่อท้ายทุกแท่ง */
.hbc { display: grid; gap: .6em; margin: 0; font-size: .86em; }
.hb-key { display: flex; flex-wrap: wrap; gap: .2em 1.6em; color: var(--text2); }
.hb-key li { display: inline-flex; align-items: center; gap: .5em; }
.hb-key i { width: 1.8em; height: .85em; border-radius: 2px; flex: none; }
.hbc .s0 i, .hb-key i.s0 { background: var(--sky); }
.hbc .s1 i, .hb-key i.s1 { background: repeating-linear-gradient(135deg, var(--gold) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--gold); }
.hb-gs { display: grid; gap: .5em; }
.hb-g { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 0 1em; padding-top: .5em; border-top: 1px solid var(--line); }
.hb-g.nog { grid-template-columns: minmax(0, 1fr); padding-top: 0; border-top: 0; }
.hb-gl { padding-top: .1em; font: 600 .86em/1.35 var(--f-d); color: var(--text2); }
.hb-g ul { display: grid; gap: .4em; }
.hb-r { display: grid; grid-template-columns: minmax(9em, 18em) minmax(0, 1fr); gap: 1em; align-items: center; }
.hb-l { line-height: 1.35; }
.hb-l small { margin-left: .5em; font-size: .86em; color: var(--muted); }
.hb-bs { display: grid; gap: 3px; }
.hb-b { display: flex; align-items: center; gap: .45em; height: 1.2em; }
.hb-b i { flex: none; width: calc(var(--w) * (100% - 4em)); min-width: 2px; height: .85em; border-radius: 0 3px 3px 0; }
.hb-b b { font: 600 .86em/1 var(--f-m); font-variant-numeric: tabular-nums; color: var(--text); }
.is-chart .ls-h { margin-bottom: .45em; }
.hbc.multi { gap: .4em; }
.hbc.multi .hb-r { grid-template-columns: minmax(9em, 24em) minmax(0, 1fr); }
.hbc.multi .hb-gs { gap: .35em; }
.hbc.multi .hb-g { grid-template-columns: 11.5em minmax(0, 1fr); padding-top: .35em; }
.hbc.multi .hb-g ul { gap: .3em; }
.hbc.multi .hb-bs { gap: 2px; }
.hbc.multi .hb-b { height: .95em; }
.hbc.multi .hb-b i { height: .72em; }
.hbc:not(.multi) .hb-b { height: 1.7em; }
.hbc:not(.multi) .hb-b i { height: 1.25em; }
.hbc:not(.multi) .hb-r { grid-template-columns: minmax(12em, 26em) minmax(0, 1fr); }

/* แถบ 24 ชั่วโมง (แผนภาพ) · ช่วงทึบ = มาก ลายทแยง = รองลงมา · ความหมายอยู่ในรายการใต้แถบเสมอ */
.ckc { display: grid; gap: 1em; margin: 0; }
.ck-r { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: .3em 1.2em; }
.ck-l { grid-row: span 2; padding-top: .3em; font: 600 .95em/1.4 var(--f-d); }
.ck-top { margin-bottom: -.6em; }
.ck-ax { position: relative; height: 1.3em; font: 500 .74em/1 var(--f-m); color: var(--muted); }
.ck-ax span { position: absolute; top: 0; transform: translateX(-50%); }
.ck-ax span:first-child { transform: none; }
.ck-ax span:last-child { transform: translateX(-100%); }
.ck-band { position: relative; height: 2.2em; overflow: hidden; border: 1px solid var(--line2); border-radius: 6px; background: var(--surface2); }
:root[data-theme="day"] .ck-band { background: var(--bg); }
.ck-t { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line2); }
.ck-z { position: absolute; top: 0; bottom: 0; }
.ck-z.bad, .ck-sw.bad { background: var(--bad); }
.ck-z.warn, .ck-sw.warn { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--warn); }
.ck-d { display: flex; flex-wrap: wrap; gap: .15em 1.6em; font-size: .88em; color: var(--text2); }
.ck-d li { display: inline-flex; align-items: center; gap: .5em; }
.ck-sw { flex: none; width: 1.3em; height: .85em; border-radius: 2px; }
.ck-d b { font: 600 .92em/1.4 var(--f-m); color: var(--text); font-variant-numeric: tabular-nums; }

/* หน้าจบบท: แผ่นชีสของบทนี้ รูหดจนปิด (theory.js holeMask) · แถวล่าง = 11 แผ่นของทั้งเส้นทาง */
@property --hr { syntax: '<number>'; inherits: true; initial-value: 1; }
.ce { display: grid; grid-template-columns: 10em minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.2em 2em; align-items: start; }
.ce-sum { grid-column: 2; grid-row: 1 / span 2; }
.ce-act { grid-column: 1; grid-row: 2; display: grid; justify-items: center; gap: .5em; text-align: center; }
.ce-act .ls-score, .ce-act .ls-again { margin: 0; }
.ce-fig { display: grid; justify-items: center; gap: .9em; margin: 0; padding-top: .4em; }
.ce-slice {
  --hr: 0; position: relative; display: grid; align-content: end; gap: .1em; width: 9em; height: 12em; padding: .8em .9em;
  border: 2px solid var(--gold); border-radius: var(--r-l); background: linear-gradient(160deg, #f6d89a, #e9b94f); color: #3b2a00;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ce-slice small { font: 500 .72em/1.2 var(--f-m); letter-spacing: .08em; }
.ce-slice b { font: 600 1em/1.3 var(--f-d); }
.ce-slice.closing { animation: ce-close 1.2s .4s var(--ease) both; }
.ce-slice.closed { -webkit-mask-image: none !important; mask-image: none !important; }
@keyframes ce-close { from { --hr: 1; } to { --hr: 0; } }
.ce-fig figcaption { display: grid; justify-items: center; gap: .1em; text-align: center; }
.ce-fig figcaption b { font-weight: 600; color: var(--text); }
.ce-fig figcaption span { font-size: .85em; color: var(--muted); }
.ce-row { display: flex; gap: 4px; }
.ce-row li { width: 9px; height: 13px; border: 1.5px solid var(--muted); border-radius: 2px; }
.ce-row li.on { border-color: var(--gold); background: var(--gold); }
.ce-row li.cur { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ภาพโต้ตอบ */
.lw { margin-top: .2em; }
.lw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.lw-bar .btn { min-height: 48px; font-size: 14px; }
.lw-st { flex: 1 1 260px; color: var(--text2); }
.lw-st b { color: var(--text); }
.lw-st.ok b { color: var(--ok); }

/* สวิสชีส: 6 ช่องกว้างเท่ากัน — อันตราย · 4 แผ่น · ปลายทาง */
.sw-stage {
  --swh: clamp(150px, 30vh, 280px);
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: var(--swh) auto;
  column-gap: 4px; row-gap: 10px;
}
.sw-src, .sw-out {
  grid-row: 1; align-self: center; z-index: 2; display: grid; place-items: center; min-height: 64px; padding: 6px 4px;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface);
  font: 600 clamp(12px, 1.3vw, 17px)/1.3 var(--f-d); text-align: center;
}
.sw-src { grid-column: 1; color: var(--bad); }
.sw-out { grid-column: 6; }
.sw-out.bad { border-color: var(--bad); background: var(--bad-d); color: var(--bad); }
.sw-out.ok { border-color: var(--ok); background: var(--ok-d); color: var(--ok); }
.sw-sl { grid-row: 1; position: relative; z-index: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.sw-sl::before {
  content: ""; position: absolute; inset: 0 18%; border-radius: 10px;
  background: var(--gold-d); border: 2px solid var(--gold);
}
.sw-sl .h { position: absolute; z-index: 1; left: 34%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); border: 1px solid var(--gold); }
.sw-sl .h.sm { left: 48%; width: 14%; }
.sw-sl .h.main { top: 50%; left: 50%; width: 38%; height: 16%; aspect-ratio: auto; transform: translate(-50%, -50%); }
.sw-sl.plug { z-index: 2; }
.sw-sl.plug::before { background: var(--gold); }
.sw-sl.plug .h { background: var(--gold); border-color: var(--on-pri); opacity: .5; }
.sw-sl.plug .h.main { opacity: 1; border: 2px dashed var(--on-pri); }
.sw-sl:hover::before { border-width: 3px; }
.sw-sl:focus-visible { outline: none; }
.sw-sl:focus-visible::before { outline: 3px solid var(--sky); outline-offset: 2px; }
.sw-ray {
  position: absolute; z-index: 1; top: calc(var(--swh) / 2 - 3px); left: calc(100% / 12); height: 6px;
  border-radius: 3px; background: var(--bad); pointer-events: none; transition: width .35s var(--ease);
}
.sw-ray::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-left: 13px solid var(--bad); border-right: 0;
}
.sw-l { grid-row: 2; font-size: clamp(11.5px, 1.15vw, 15px); line-height: 1.35; text-align: center; color: var(--text2); overflow-wrap: anywhere; }

/* HFACS: Tactical Causal Stack + Live Nanocode Inspector */
.hf-wrap {
  border: 1px solid var(--line2);
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: hidden;
}
.hf-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--line2);
  font: 500 13px/1.45 var(--f-b);
  color: var(--muted);
}
.hf-strip-tag { display: flex; align-items: center; gap: 8px; }
.hf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.hf-sub { color: var(--gold); font-weight: 600; }
.hf-grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  align-items: stretch;
}
.hf-pyr-col {
  padding: 20px 18px;
  background: var(--bg);
  border-right: 1px solid var(--line2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}
.pyr-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 500 12.5px/1.45 var(--f-b);
  color: var(--muted);
}
.pyr-legend span { display: flex; align-items: center; gap: 5px; }
.pyr-legend .arr { color: var(--bad); font-weight: 600; }
.pyr-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  flex: 1;
  justify-content: center;
}
.causal-line {
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, #818cf8 0%, #38bdf8 33%, #fbbf24 66%, #f43f5e 100%);
  opacity: .6;
  z-index: 1;
}
.causal-arrow {
  position: absolute;
  left: 18px;
  bottom: 13px;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #f43f5e;
  border-right: 2px solid #f43f5e;
  transform: rotate(45deg);
  z-index: 2;
}
.tier-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 38px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line2);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-align: left;
  color: var(--text);
  z-index: 3;
}
.tier-card:hover {
  background: var(--surface2);
  border-color: var(--line);
}
.tier-card.active {
  background: var(--surface2);
  border-color: var(--sky);
}
.tier-card[data-t="4"].active { border-color: #818cf8; }
.tier-card[data-t="3"].active { border-color: #38bdf8; }
.tier-card[data-t="2"].active { border-color: #fbbf24; }
.tier-card[data-t="1"].active { border-color: #f43f5e; }
.tc-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font: 600 13px/1 var(--f-m);
  flex: none;
}
.tier-card[data-t="4"] .tc-badge { background: rgba(129, 140, 248, .16); color: #818cf8; border: 1px solid rgba(129, 140, 248, .35); }
.tier-card[data-t="3"] .tc-badge { background: rgba(56, 189, 248, .16); color: #38bdf8; border: 1px solid rgba(56, 189, 248, .35); }
.tier-card[data-t="2"] .tc-badge { background: rgba(251, 191, 36, .16); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .35); }
.tier-card[data-t="1"] .tc-badge { background: rgba(244, 63, 94, .16); color: #f43f5e; border: 1px solid rgba(244, 63, 94, .35); }
.tc-info { flex: 1; min-width: 0; }
.tc-title {
  font: 600 14.5px/1.3 var(--f-d);
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.tc-en { font: 400 12px/1.4 var(--f-b); color: var(--muted); margin-top: 2px; }
.tc-type { font: 500 12px/1.4 var(--f-b); padding: 2px 7px; border-radius: var(--r-s); white-space: nowrap; }
.tc-type.latent { background: rgba(129, 140, 248, .15); color: #818cf8; }
.tc-type.active-fail { background: rgba(244, 63, 94, .18); color: #fb7185; }
:root[data-theme="day"] .tc-type.latent { color: #4338ca; }
:root[data-theme="day"] .tc-type.active-fail { color: #be123c; }
.tc-arrow { color: var(--muted); font: 600 18px/1 var(--f-b); }
.tier-card.active .tc-arrow { color: var(--text); }
.mishap-band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r);
  background: rgba(244, 63, 94, .1);
  border: 1px dashed rgba(244, 63, 94, .4);
  font: 400 13px/1.5 var(--f-b);
  color: var(--text2);
}
.mishap-band b { color: #f43f5e; font-weight: 600; }
:root[data-theme="day"] .mishap-band b { color: #be123c; }
.mishap-icon { flex: none; width: 16px; height: 16px; color: #f43f5e; }

/* Right Inspector Column */
.hf-insp-col {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
}
.dt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line2);
  padding-bottom: 12px;
}
.dt-level-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1.45 var(--f-b);
  color: var(--sky);
  margin-bottom: 4px;
}
.hf-wrap .dt-title { font: 600 20px/1.3 var(--f-d); color: var(--text); margin: 0; }
.dt-en { font: 400 14px/1.4 var(--f-b); color: var(--muted); }
.dt-cat-count {
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--sky-d);
  border: 1px solid var(--sky);
  font: 500 12.5px/1.4 var(--f-b);
  font-variant-numeric: tabular-nums;
  color: var(--sky);
  white-space: nowrap;
}
.dt-desc { font: 400 14px/1.6 var(--f-b); color: var(--text2); margin: 0; }
.dt-ask-box {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: var(--sky-d);
  border-left: 3px solid var(--sky);
  font: 400 14px/1.6 var(--f-b);
  color: var(--text);
}
.dt-ask-box b { font-weight: 600; }
.dt-ask-lbl {
  font: 600 13px/1.7 var(--f-b);
  color: var(--sky);
  white-space: nowrap;
}
.dt-cats-title {
  font: 600 13.5px/1.45 var(--f-b);
  color: var(--muted);
}
.dt-cats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hf-cat-item {
  border-radius: var(--r);
  background: var(--surface2);
  border: 1px solid var(--line2);
  padding: 12px 14px;
  transition: border-color var(--t-fast);
}
.hf-cat-item:hover {
  border-color: var(--sky);
}
.hf-cat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hf-cat-code {
  font: 600 12px/1.4 var(--f-m);
  color: var(--sky);
  padding: 1px 6px;
  background: var(--sky-d);
  border-radius: var(--r-s);
}
.hf-cat-nano-badge { font: 500 12px/1.4 var(--f-b); font-variant-numeric: tabular-nums; color: var(--muted); }
.hf-cat-name { font: 600 15px/1.35 var(--f-d); color: var(--text); }
.hf-cat-en { font: 400 12.5px/1.4 var(--f-b); color: var(--muted); margin-left: 4px; }
.hf-cat-desc { font: 400 14px/1.6 var(--f-b); color: var(--text2); margin: 6px 0 0; }
.hf-c {
  margin-top: 8px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  background: var(--surface);
}
.hf-c summary {
  padding: 6px 10px;
  cursor: pointer;
  list-style: none;
  font: 500 13px/1.5 var(--f-b);
  color: var(--sky);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hf-c summary::-webkit-details-marker { display: none; }
.hf-c summary span::after { content: ' ▾'; }
.hf-c[open] summary span::after { content: ' ▴'; }
.hf-c ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 6px 14px;
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px dashed var(--line2);
  list-style: none;
}
.hf-c li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr);
  gap: 8px;
  font: 400 13px/1.5 var(--f-b);
}
.hf-c code { font: 500 12px/1.65 var(--f-m); color: var(--sky); }
.hf-c li small { display: block; font: 400 12px/1.4 var(--f-b); color: var(--muted); }

@media (max-width: 768px) {
  .hf-grid { grid-template-columns: minmax(0, 1fr); }
  .hf-pyr-col { border-right: none; border-bottom: 1px solid var(--line2); }
  .causal-line, .causal-arrow { display: none; }
  .tier-card { padding-left: 14px; }
  .hf-insp-col { padding: 18px 14px; }
}

/* SHELL */
.sh { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.sh-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". s ." "h c e" ". l ."; gap: 6px; max-width: 300px; }
.sh-b {
  aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 2px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); color: var(--muted); transition: border-color var(--t-fast), background-color var(--t-fast);
}
.sh-b b { font: 600 clamp(24px, 3vw, 40px)/1 var(--f-d); }
.sh-b small { margin-top: .2em; font-size: 11.5px; line-height: 1.2; }
.sh-b.hi { border-color: var(--gold); background: var(--gold-d); color: var(--text); }
.sh-b.hi b { color: var(--gold); }
.sh-seg { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.sh-seg button { font: 600 15px/1 var(--f-m); }
.sh-seg button[aria-pressed="true"] { background: var(--gold-d); color: var(--text); box-shadow: inset 0 -3px 0 var(--gold); }
.sh-info h3 { margin-bottom: .35em; font: 600 1.1em/1.35 var(--f-d); }
.sh-info p { color: var(--text2); }
.sh-info .ex { margin-top: .7em; padding: .7em .9em; border-radius: var(--r); background: var(--surface2); color: var(--text); }
:root[data-theme="day"] .sh-info .ex { background: var(--surface); border: 1px solid var(--line); }
.sh-info .ex span { display: block; font-size: .8em; color: var(--muted); }

/* TEM: ภัยคุกคาม → ความผิดพลาด → สภาพเครื่อง → ผลลัพธ์ */
.tm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tm-n {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: .5em; padding: .9em 1em;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); transition: opacity var(--t-med);
}
.tm-n:not(:last-child)::after {
  content: "→"; position: absolute; right: -19px; top: 50%; transform: translateY(-50%);
  font: 600 16px/1 var(--f-m); color: var(--muted);
}
.tm-h b { display: block; font: 600 1.02em/1.35 var(--f-d); }
.tm-h small { font-size: .78em; color: var(--muted); }
.tm-t { font-size: .92em; color: var(--text2); }
.tm-n.off { opacity: .4; }
.tm-n.off .tm-t { text-decoration: line-through; }
.tm-n.cut { border-color: var(--ok); }
.tm-n.cut .tm-t { color: var(--text); }
.tm-m {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line2); border-radius: var(--r); background: none; font-size: .88em; font-weight: 500; color: var(--text2);
}
.tm-m[aria-pressed="true"] { border-color: var(--ok); background: var(--ok-d); color: var(--ok); font-weight: 600; }
.tm-m:disabled { opacity: .5; cursor: default; }
.tm-m .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.tm-end.bad { border-color: var(--bad); background: var(--bad-d); }
.tm-end.bad .tm-h b { color: var(--bad); }
.tm-end.ok { border-color: var(--ok); background: var(--ok-d); }
.tm-end.ok .tm-h b { color: var(--ok); }
.tm-end { grid-template-rows: auto 1fr; }

/* ตารางความเสี่ยง FAA */
.mx-wrap { overflow-x: auto; }
.mx { width: 100%; min-width: 340px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.mx th { padding: 4px; font: 600 clamp(12px, 1.2vw, 16px)/1.3 var(--f-d); color: var(--text2); text-align: center; vertical-align: bottom; }
.mx th small { display: block; font: 400 .78em/1.3 var(--f-b); color: var(--muted); }
.mx tbody th { text-align: left; vertical-align: middle; }
.mx thead th:first-child { width: 22%; text-align: left; }
.mx-ax { font: 400 11.5px/1.3 var(--f-b); color: var(--muted); }
.mx-c {
  width: 100%; min-height: clamp(48px, 6vh, 64px); border: 1px solid transparent; border-radius: var(--r);
  font: 600 clamp(13px, 1.25vw, 17px)/1.2 var(--f-d); transition: transform .12s var(--ease);
}
.lv-H { background: var(--bad-d); border-color: var(--bad); color: var(--bad); }
.lv-S { background: var(--warn-d); border-color: var(--warn); color: var(--warn); }
.lv-M { background: var(--gold-d); border-color: var(--gold); color: var(--gold); }
.lv-L { background: var(--ok-d); border-color: var(--ok); color: var(--ok); }
.mx-c.on { outline: 3px solid var(--text); outline-offset: 1px; }
.mx-scen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mx-scen .btn { min-height: 48px; height: auto; padding: .5em .9em; font-size: .85em; line-height: 1.45; text-align: left; white-space: normal; }
.mx-scen .btn[aria-pressed="true"] { border-color: var(--sky); background: var(--sky-d); color: var(--text); }
.mx-out { margin-top: 10px; padding: .8em 1em; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface); color: var(--text2); }
.mx-lv { display: inline-block; margin-bottom: .3em; padding: .15em .6em; border: 1px solid; border-radius: var(--r-s); font-family: var(--f-d); }

/* IMSAFE */
.ims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 8px; }
.ims-r {
  width: 100%; min-height: 56px; display: grid; grid-template-columns: 2em minmax(0, 1fr) 1.6em; align-items: center; gap: .8em;
  padding: .5em .9em; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); text-align: left; color: var(--text);
}
.ims-r .l { font: 600 1.5em/1 var(--f-d); color: var(--sky); text-align: center; }
.ims-r .t { font-size: .9em; line-height: 1.45; color: var(--text2); }
.ims-r .t b { display: block; font-size: 1.05em; color: var(--text); }
.ims-r .c { width: 1.6em; height: 1.6em; display: grid; place-items: center; border: 2px solid var(--line2); border-radius: 6px; }
.ims-r .c .ic { width: 1em; height: 1em; stroke-width: 3; }
.ims-r.on { border-color: var(--ok); background: var(--ok-d); }
.ims-r.on .c { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.ims-n { margin-top: 10px; font-size: .82em; color: var(--muted); }

/* ป้ายสถานะร่วม (ระยะห่างอำนาจ · หูชั้นใน) — มีไอคอน + ข้อความ ไม่พึ่งสีอย่างเดียว */
.gr-tag { display: inline-flex; align-items: center; gap: .45em; margin-bottom: .5em; padding: .2em .7em; border: 1px solid; border-radius: var(--r-pill); font: 600 .9em/1.5 var(--f-d); }
.gr-tag .ic { width: 1.05em; height: 1.05em; stroke-width: 2.6; }
.gr-tag.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-d); }
.gr-tag.bad { color: var(--warn); border-color: var(--warn); background: var(--warn-d); }

/* ระยะห่างของอำนาจ */
.gr, .ln { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.gr-v { width: 100%; max-height: clamp(150px, 34vh, 280px); }
.gr-base { stroke: var(--line2); stroke-width: 2; stroke-dasharray: 4 6; }
.gr-ln { stroke: var(--warn); stroke-width: 4; stroke-linecap: round; transition: all .35s var(--ease); }
.gr-ln.ok { stroke: var(--ok); }
.gr-p { transition: transform .35s var(--ease); }
.gr-p circle { fill: var(--gold); }
.gr-p.fo circle { fill: var(--sky); }
.gr-p text { font: 600 11px/1 var(--f-b); text-anchor: middle; fill: var(--bg); }
.gr-d .seg { margin-bottom: 14px; }
.gr-d .seg button, .ln-seg button { min-height: 48px; padding: 0 8px; font-size: 14px; line-height: 1.25; }
.gr-info > p:not(.gr-tag) { color: var(--text); }
.gr-info ul { margin-top: .5em; display: grid; gap: .35em; }
.gr-info li { position: relative; padding-left: 1.1em; color: var(--text2); font-size: .94em; }
.gr-info li::before { content: ""; position: absolute; left: 0; top: .65em; width: .4em; height: .4em; border-radius: 50%; background: var(--muted); }

/* SA 3 ขั้น: ขั้นบนต่อยอดจากขั้นล่าง */
.sa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.sa-l { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); transition: border-color var(--t-med); }
.sa-l.open { border-color: var(--sky); }
.sa-b { min-height: 56px; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: center; gap: .6em; padding: .6em .9em; border: 0; background: none; text-align: left; color: var(--text); }
.sa-b:disabled { cursor: default; opacity: .55; }
.sa-b .n { width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: var(--sky-d); color: var(--sky); font: 600 .9em/1 var(--f-m); }
.sa-l.open .sa-b .n { background: var(--sky); color: var(--bg); }
.sa-b b { display: block; font: 600 1.05em/1.35 var(--f-d); }
.sa-b small { font-size: .78em; color: var(--muted); }
.sa-t { padding: 0 1em 1em; font-size: .94em; color: var(--muted); }
.sa-l.open .sa-t { color: var(--text); animation: enter .2s var(--ease) both; }

/* DECIDE */
.dc-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.dc-l {
  min-height: 64px; display: grid; place-content: center; gap: 2px; padding: 4px; border: 1px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); color: var(--text2); text-align: center;
}
.dc-l b { font: 600 clamp(22px, 2.6vw, 34px)/1 var(--f-d); color: var(--text); }
.dc-l small { font-size: clamp(10.5px, 1vw, 12.5px); color: var(--muted); }
.dc-l[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-d); box-shadow: inset 0 -3px 0 var(--gold); }
.dc-l[aria-pressed="true"] b { color: var(--gold); }
.dc-p { padding: .9em 1.1em; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); animation: enter .2s var(--ease) both; }
.dc-p h3 { display: flex; align-items: center; gap: .6em; margin-bottom: .3em; font: 600 1.1em/1.35 var(--f-d); }
.dc-p h3 span { width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: var(--r); background: var(--gold); color: var(--on-pri); }
.dc-p > p { color: var(--text2); }
.dc-p .ex { margin-top: .7em; padding: .7em .9em; border-radius: var(--r); background: var(--surface2); color: var(--text); }
:root[data-theme="day"] .dc-p .ex { background: var(--bg); }
.dc-p .ex span { display: block; font-size: .8em; color: var(--muted); }

/* ทัศนคติอันตราย: จับคู่ซ้าย ↔ ขวา */
.at { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 18px; }
.at-c { display: grid; gap: 6px; align-content: start; }
.at-b {
  width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6em;
  padding: .45em .9em; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); text-align: left; color: var(--text); font-size: .92em;
}
.at-b b { font: 600 1em/1.35 var(--f-d); }
.at-b small { grid-column: 1; font-size: .78em; color: var(--muted); }
.at-b q { grid-column: 1; font-size: .88em; color: var(--text2); }
.at-b > .ic { grid-column: 2; grid-row: 1 / span 3; width: 18px; height: 18px; stroke-width: 2.8; color: var(--ok); }
.at-b[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-d); box-shadow: inset 3px 0 0 var(--gold); }
.at-b.anti { line-height: 1.4; }
@media (orientation: landscape) { /* จอแนวนอน: ชื่ออังกฤษต่อท้ายบรรทัดเดียวกับชื่อไทย ไม่ให้สไลด์ล้นจอ */
  .at-b:not(.anti) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .at-b:not(.anti) small { grid-column: 2; grid-row: 1; }
  .at-b:not(.anti) q { grid-column: 1 / 3; }
  .at-b:not(.anti) > .ic { grid-column: 3; grid-row: 1 / span 2; }
}
.at-b.anti:disabled:not(.ok) { opacity: .6; cursor: default; }
.at-b.ok { border-color: var(--ok); background: var(--ok-d); cursor: default; }
.at-b.no { border-color: var(--bad); background: var(--bad-d); animation: shake .3s var(--ease); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* หูชั้นใน: เครื่องจริง vs ความรู้สึก */
.ln-v { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ln-ai { margin: 0; text-align: center; }
.ln-ai svg { width: 100%; max-width: 190px; max-height: clamp(120px, 28vh, 200px); }
.ln-ai figcaption { margin-top: .3em; font-size: .9em; color: var(--text2); }
.ln-ai figcaption b { display: block; font: 600 1em/1.35 var(--f-d); color: var(--text); }
.ln-h { transform-box: view-box; transform-origin: 70px 70px; transition: transform .6s var(--ease); }
.ln-h .sky { fill: #2f6fa8; }
.ln-h .gnd { fill: #7a4f2a; }
.ln-h line { stroke: #fff; stroke-width: 2; }
.ln-ai .rim { fill: none; stroke: var(--line2); stroke-width: 4; }
.ln-ai .ac { fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ln-seg { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.ln-info > p:not(.gr-tag) { color: var(--text2); }

/* ตื่นติดต่อกัน */
.aw-track { position: relative; height: 48px; display: flex; align-items: center; }
.aw-z { position: absolute; top: 10px; bottom: 10px; border-radius: var(--r-s); pointer-events: none; }
.aw-z.wf { background: var(--bad-d); border: 1px dashed var(--bad); }
.aw-z.wocl { background: var(--warn-d); border: 1px dashed var(--warn); }
.aw-track input { position: relative; width: 100%; height: 48px; margin: 0; accent-color: var(--gold); cursor: pointer; background: none; }
.aw-ax { position: relative; height: 1.4em; font-size: 11.5px; color: var(--muted); }
.aw-ax span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.aw-ax span:first-child { left: 0; transform: none; }
.aw-ax span:last-child { right: 0; transform: none; }
.aw-live { margin-top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 22px; align-items: start; }
.aw-n { font: 600 1em/1.2 var(--f-d); color: var(--text2); }
.aw-n b { font: 600 clamp(40px, 5vw, 64px)/1 var(--f-m); color: var(--text); font-variant-numeric: tabular-nums; }
.aw-n span { display: block; margin-top: .3em; font: 500 .95em/1 var(--f-m); color: var(--muted); }
.aw-fx { display: grid; gap: 8px; }
.aw-fx li { display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: .6em; padding: .55em .8em; border: 1px solid var(--line2); border-left-width: 4px; border-radius: var(--r); background: var(--surface); font-size: .94em; color: var(--text); }
.aw-fx li.warn { border-left-color: var(--warn); }
.aw-fx li.bad { border-left-color: var(--bad); }
.aw-fx li .ic { width: 1.1em; height: 1.1em; margin-top: .15em; color: var(--warn); }
.aw-fx li.bad .ic { color: var(--bad); }
.aw-fx small { display: block; font-size: .8em; color: var(--muted); }
.aw-ok { color: var(--text2); }

@media (orientation: portrait) and (max-width: 760px) {
  .ls-cmp, .sh, .gr, .ln, .sa { grid-template-columns: minmax(0, 1fr); }
  .hb-g, .hb-r, .hbc.multi .hb-g, .hbc.multi .hb-r, .hbc:not(.multi) .hb-r, .ck-r { grid-template-columns: minmax(0, 1fr); }
  .hb-g { gap: .3em; }
  .hb-r { gap: .15em; }
  .hb-gl { padding-top: 0; color: var(--gold); }
  .ck-l { grid-row: auto; padding-top: 0; }
  .ck-top > span { display: none; }
  .ck-top { margin-bottom: -.8em; }
  .gr-v { max-height: 130px; }
  .ln-ai svg { max-height: 120px; }
  .sa-t { padding-top: 0; }
  .at { gap: 6px 8px; }
  .at-b { padding: .4em .6em; font-size: .85em; }
  .at-b small { display: none; }
  .dc-l small { display: none; }
  .aw-live { grid-template-columns: minmax(0, 1fr); }
  .sh-g { max-width: 220px; justify-self: center; }
  .tm { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tm-n { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; }
  .tm-h { grid-column: 1; }
  .tm-t { grid-column: 1 / -1; grid-row: 2; }
  .tm-m { grid-column: 2; grid-row: 1; padding: 0 12px; }
  .tm-n:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%); }
  .brief.lsn .brief-foot { gap: 10px; }
  .brief.lsn .brief-foot .btn-primary { padding: 0 16px; font-size: 16px; }
  .lroute { margin: 0 6px; height: 28px; }
  .ce { grid-template-columns: minmax(0, 1fr); gap: 1.4em; }
  .ce-sum, .ce-act { grid-column: auto; grid-row: auto; }
  .ce-act { justify-items: start; text-align: left; }
  .ce-fig { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: .4em 1em; padding: 0; }
  .ce-slice { grid-row: span 2; font-size: .7em; }
  .ce-fig figcaption { justify-items: start; text-align: left; }
  .brief.lsn .brief-foot .pos { min-width: 0; }
  .ls-cards.many .ls-card.flip { min-height: 6.2em; padding: .7em .8em; }
}

/* ── ประวัติเหตุ บน.2 (#/history · แผงในหน้าเคส) ───────────────
   แหล่งของเรื่องมีคำกำกับเสมอ สีเป็นตัวช่วยเท่านั้น · ไม่มีปุ่มทองในหน้านี้ */
.hv .sec-h, .histp .sec-h { display: block; }
.hv .sec-h > span { margin-left: 6px; font: 400 13px/1.4 var(--f-b); color: var(--muted); }
.hv .sec-h > .ic, .histp .sec-h > .ic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; color: var(--sky); }
.hv > .status-line { margin: -8px 0 16px; }

.h-tabs { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1px solid var(--line2); }
.h-tabs a {
  min-height: 48px; margin-bottom: -1px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent; color: var(--text2); font: 600 15px/1.4 var(--f-d); text-decoration: none;
}
.h-tabs a:hover { color: var(--text); }
.h-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--gold); }
.h-tabs .ic { width: 18px; height: 18px; }
.h-imgtg {
  margin: 0 0 6px auto; min-height: 48px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; align-self: center;
  border: 1px solid var(--line2); border-radius: var(--r-pill); background: none; color: var(--text2); font: 600 14px/1.4 var(--f-d); cursor: pointer;
}
.h-imgtg b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.h-imgtg .ck { display: none; width: 14px; height: 14px; stroke-width: 2.6; }
.h-imgtg:hover { color: var(--text); border-color: var(--sky); }
.h-imgtg[aria-pressed="true"] { color: var(--text); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.h-imgtg[aria-pressed="true"] .ck { display: inline; }
.h-imgnote { margin: -12px 0 18px; }
@media (max-width: 480px) { .h-imgtg { padding: 0 10px; font-size: 13px; } .h-tabs a { padding: 0 10px; } }
/* 4 แถบในบรรทัดเดียวบนมือถือ: ซ่อนไอคอน */
@media (max-width: 440px) { .h-tabs { gap: 0; } .h-tabs a { padding: 0 8px; font-size: 14.5px; } .h-tabs a .ic { display: none; } }

/* ป้ายแหล่ง: m แบบฟอร์ม+ประชุม · e ประชุมอย่างเดียว · r เหตุ ทอ. · f แบบฟอร์มอย่างเดียว (ประชุม = เส้นประ) */
.h-src {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 6px;
  border: 1px solid var(--line2); border-radius: var(--r-s); font-size: 12px; line-height: 1.4; color: var(--text2); white-space: nowrap;
}
.h-src .ic { width: 12px; height: 12px; }
.h-src.m { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }
.h-src.e { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); border-style: dashed; }
.h-src.r { color: var(--seg-r); border-color: color-mix(in srgb, var(--seg-r) 55%, transparent); border-style: dashed; }
.meta .h-src { height: 22px; padding: 0 8px; font-size: 12px; }
.seg-k { display: inline-block; flex: none; background: var(--seg-f); }
.seg-k.m { background: var(--seg-m); }
.seg-k.e { background: var(--seg-e); }
.seg-k.r { background: var(--seg-r); }

/* แบบ B: เส้นเวลารายปีงบ */
.hv-l > .sec-h:first-child, .hv-r > .sec-h:first-child { margin-top: 0; }
.h-tls { display: grid; gap: 2px; }
.h-tl {
  width: 100%; min-height: 48px; padding: 0 8px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 10px; align-items: center;
  border: 0; border-radius: var(--r); background: none; text-align: left;
}
.h-tl:hover { box-shadow: inset 0 0 0 1px var(--line2); }
.h-tl .fy { font: 500 13px/1 var(--f-m); color: var(--text2); }
.h-tl .n { font: 500 13px/1 var(--f-m); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.h-tl .bar { display: flex; height: 16px; }
.h-tl .seg-k { height: 100%; }
.h-tl .seg-k:first-child { border-radius: 3px 0 0 3px; }
.h-tl .seg-k:last-child { border-radius: 0 3px 3px 0; }
.h-tl .seg-k:only-child { border-radius: 3px; }
.h-tl .seg-k + .seg-k { border-left: 1px solid var(--bg); }
.h-tl[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2), inset 3px 0 0 var(--gold); }
.h-tl[aria-pressed="true"] .fy, .h-tl[aria-pressed="true"] .n { color: var(--text); font-weight: 600; }
.h-tl[aria-pressed="true"] .seg-k + .seg-k { border-left-color: var(--surface); }
.h-keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.h-keys span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--text2); }
.h-keys .seg-k { width: 12px; height: 12px; border-radius: 3px; }
.gap-note { margin-top: 12px; }

.hv-r { margin-top: 30px; }
#hlist { scroll-margin-top: calc(var(--head-h) + env(safe-area-inset-top, 0px) + 12px); }
.h-ystat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
/* มือถือ: 4 ช่องแคบจนคำไทยตัดเป็น 3–4 บรรทัด จึงเรียง 2×2 */
@media (max-width: 480px) { .h-ystat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-ystat button {
  position: relative; min-height: 72px; padding: 10px 8px 9px; display: grid; align-content: start; gap: 5px;
  border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.h-ystat b { font: var(--kpi-w) var(--fs-kpi-s)/var(--kpi-lh) var(--f-m); font-variant-numeric: tabular-nums; }
.h-ystat span { display: flex; align-items: flex-start; gap: 5px; font-size: var(--fs-2xs); line-height: var(--kpi-lab-lh); color: var(--text2); }
.h-ystat span .seg-k { width: 9px; height: 9px; margin-top: 3px; border-radius: 2px; }
.h-ystat .ck { position: absolute; top: 8px; right: 7px; width: 15px; height: 15px; stroke-width: 2.6; }
.h-ystat button[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.h-ystat button[aria-pressed="true"] span { color: inherit; }
.h-ystat button[disabled] { opacity: .45; cursor: default; }

/* รายการเรื่อง: หัวกลุ่มติดขอบบนตอนเลื่อน */
.hg { margin-top: 18px; }
.yh {
  position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); z-index: 5;
  display: flex; align-items: center; gap: 8px; padding: 10px 0 8px;
  background: var(--bg); border-bottom: 1px solid var(--line2); font: 600 15px/1.3 var(--f-d);
}
.yh .n { margin-left: auto; font: 500 12.5px/1.4 var(--f-m); color: var(--muted); }
.evs li { border-bottom: 1px solid var(--line); }
.ev {
  min-height: 48px; padding: 11px 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 5px 10px; align-items: center;
  text-decoration: none;
}
.ev .t { grid-column: 1; font-size: 15px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.ev:hover .t { text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.ev .m { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ev .m .ic { width: 14px; height: 14px; }
.ev .ty, .ev .card-l, .ev .img-n { display: inline-flex; align-items: center; gap: 5px; }
.ev .ty { color: var(--text2); }
.ev .card-l { color: var(--sky); }
.ev .img-n { color: var(--text2); }
.ev .yr { padding: 0; font-size: 12.5px; }
.ev .go { grid-column: 2; grid-row: 1 / 3; width: 18px; height: 18px; color: var(--muted); }
/* คำที่ปิดไว้ตอนทำความสะอาดข้อมูล เช่น [ชื่อ] */
.h-ph { padding: 0 3px; border-radius: 3px; background: var(--surface2); color: var(--muted); font-size: .9em; }

/* แบบ C: ตารางหัวข้อ × ปีงบ · ช่องสีเข้มขึ้นตามจำนวน ตัวเลขอยู่ในช่องเสมอ */
.chips.h-sq { margin-bottom: 12px; }
/* ป้ายบอกว่าตารางกว้างเลื่อนซ้าย–ขวาได้ แสดงเฉพาะจอที่ตารางล้น (DECISIONS: ตรวจ UX มือถือ) */
.sx-hint { display: none; margin: 0 0 6px; font: 500 12.5px/1.4 var(--f-b); color: var(--muted); }
.sx-hint::before { content: "↔ "; color: var(--sky); }
@media (max-width: 700px) { .hv .sx-hint { display: block; } }
@media (max-width: 560px) { .pap-grid-w .sx-hint { display: block; } }
.hm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.hm { border-collapse: separate; border-spacing: 2px; margin: 4px; }
/* ความกว้างคอลัมน์ปีคงที่ ปีที่ไม่มีเรื่องเลย (เช่น ฝูง 202 ก่อนปีงบ 63) จะได้ไม่บีบหัวคอลัมน์ติดกัน */
.hm thead th { min-width: 26px; padding: 8px 0 6px; font: 500 12px/1.4 var(--f-m); color: var(--muted); text-align: center; }
.hm thead th.tp { padding-left: 6px; font-family: var(--f-b); text-align: left; }
.hm th.tp { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.hm th.tp button {
  display: block; width: 100%; min-width: 112px; max-width: 168px; min-height: 36px; padding: 4px 8px 4px 6px;
  border: 0; border-radius: var(--r-s); background: none; text-align: left; font: 500 13px/1.3 var(--f-b); color: var(--text);
}
.hm th.tp button:hover { background: var(--surface2); }
.hm th.tp button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.hm td { padding: 0; text-align: center; }
.hm td button {
  position: relative; width: 100%; min-width: 26px; height: 36px; padding: 0 2px;
  border: 0; border-radius: var(--r-s); font: 600 12px/1 var(--f-m); font-variant-numeric: tabular-nums;
}
.hm td button:hover { filter: brightness(1.12); }
.hm td button[aria-pressed="true"] { z-index: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.hm .l1 { background: color-mix(in srgb, var(--warn) 14%, var(--surface2)); color: var(--text); }
.hm .l2 { background: color-mix(in srgb, var(--warn) 28%, var(--surface2)); color: var(--text); }
.hm .l3 { background: color-mix(in srgb, var(--warn) 42%, var(--surface2)); color: var(--text); }
.hm .l4 { background: color-mix(in srgb, var(--warn) 85%, var(--surface2)); color: var(--hm-hi); }
.hm .l5 { background: var(--warn); color: var(--hm-hi); }
.hm .z { color: var(--line2); font: 12px/1 var(--f-m); }
.hm .tot { padding: 0 8px 0 6px; font: 600 12.5px/1.4 var(--f-m); color: var(--text2); text-align: right; }
.hm-wrap + .note { margin-top: 10px; }

/* รายเดือน/ฤดู: สีฤดู ร้อน = ทอง ฝน = ฟ้า หนาว = ม่วง */
.h-seas { display: grid; gap: 10px; margin: 14px 0 28px; }
.h-sea { --sc: var(--gold); padding: 0 0 2px; border: 1px solid var(--line); border-left: 4px solid var(--sc); border-radius: var(--r-l); background: var(--surface); }
.h-sea.rain { --sc: var(--sky); }
.h-sea.cool { --sc: var(--seg-r); }
.h-sea-b {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 12px 14px;
  border: 0; border-radius: var(--r-l); background: none; text-align: left; color: var(--text);
}
.h-sea-b:hover { background: var(--surface2); }
.h-sea-b[aria-pressed="true"] { background: color-mix(in srgb, var(--sc) 14%, var(--surface)); }
.h-sea-b .nm { font: 600 16px/1.3 var(--f-d); }
.h-sea-b .rg { font: 500 12px/1.6 var(--f-m); color: var(--muted); text-align: right; }
.h-sea-b .v { font-size: 14px; color: var(--text2); }
.h-sea-b .v b { font: 600 22px/1.1 var(--f-m); color: var(--text); font-variant-numeric: tabular-nums; }
.h-sea-b .cmp { align-self: end; font: 500 12.5px/1.4 var(--f-b); color: var(--muted); text-align: right; }
.h-sea-b .cmp.up { color: var(--warn); font-weight: 600; }
.h-sea-b .ty { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.h-sea .lb { margin: 2px 14px 6px; font-size: 12px; color: var(--muted); }
.h-sea .chips { gap: 6px; margin: 0 12px 10px; }
.h-sea .chip { min-height: 44px; padding: 4px 10px; font-size: 13px; }
.h-sea .chip b { font: 600 12px/1 var(--f-m); color: var(--sc); }
.h-sea .chip[aria-pressed="true"] b { color: inherit; }

.h-mos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 190px; margin-top: 8px; }
.h-mb {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0 1px 4px;
  border: 0; border-radius: 6px; background: none; color: var(--text2);
}
.h-mb:hover:not([disabled]) { background: var(--surface2); }
.h-mb[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.h-mb[disabled] { cursor: default; }
.h-mb .n { padding: 4px 0 3px; font: 600 11.5px/1 var(--f-m); text-align: center; font-variant-numeric: tabular-nums; }
.h-mb .col { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; margin: 0 18%; }
.h-mb .col .sg:last-child { border-radius: 4px 4px 0 0; }
.h-mb .mn { padding-top: 5px; font: 500 12px/1.4 var(--f-b); text-align: center; white-space: nowrap; }
.h-mb.now .mn { color: var(--gold); font-weight: 600; }
.h-mb .mn::after { content: ""; display: block; width: 5px; height: 5px; margin: 3px auto 0; border-radius: 50%; }
.h-mb.now .mn::after { background: var(--gold); }
.sg { display: block; flex: none; min-height: 2px; background: var(--muted); }
.sg.bad { background: var(--bad); }
.sg.warn { background: var(--warn); }
.sg.ring { background: color-mix(in srgb, var(--warn) 32%, var(--surface2)); }
.h-band { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 0; margin: 6px 0 0; }
.h-band i {
  height: 22px; font: 600 12px/22px var(--f-b); font-style: normal; text-align: center; overflow: hidden;
  border-top: 3px solid; color: var(--muted);
}
.h-band .hot { border-color: var(--gold); }
.h-band .rain { border-color: var(--sky); }
.h-band .cool { border-color: var(--seg-r); }
.h-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 28px; font-size: 12.5px; color: var(--muted); }
.h-keys span { display: inline-flex; align-items: center; gap: 6px; }
.h-keys .sg { width: 10px; height: 10px; border-radius: 2px; }
.hm.mo thead th { border-bottom: 3px solid transparent; }
.hm.mo thead th.s-hot { border-color: var(--gold); }
.hm.mo thead th.s-rain { border-color: var(--sky); }
.hm.mo thead th.s-cool { border-color: var(--seg-r); }
.btn.more[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* รายละเอียดหนึ่งเรื่อง */
.hd-h { margin-bottom: 14px; font: 600 23px/1.38 var(--f-d); overflow-wrap: anywhere; }
.banner {
  margin: 0 0 18px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px;
  border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: var(--r-l); background: var(--gold-d);
  font-size: 14px; line-height: 1.6; color: var(--text2);
}
.banner .ic { margin-top: 2px; color: var(--gold); }
.banner b { color: var(--text); }
.seg.h-mode { margin-bottom: 4px; }
.para { font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere; }
.para + .para { margin-top: 10px; }
.ptag { display: inline-flex; align-items: center; height: 20px; margin-right: 8px; padding: 0 6px; border-radius: var(--r-s); font: 600 11px/1 var(--f-b); vertical-align: 2px; }
.ptag.fm { color: var(--sky); background: var(--sky-d); }
.ptag.mt { color: var(--gold); background: var(--gold-d); }
.h-orig { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.h-orig .note { flex: 1 1 260px; margin: 0; }
.h-orig .btn { flex: none; }
.hd-side { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.hd-side .kv { margin-top: 0; }
.prov { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: var(--text2); }
.prov .k { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.prov .auto { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.hd-side > .note { margin-top: 14px; }
.lnk {
  min-height: 56px; margin-top: 14px; padding: 10px 12px; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 10px; align-items: center;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface);
  color: var(--sky); font-size: 14.5px; font-weight: 600; line-height: 1.4; text-decoration: none;
}
.lnk:hover { border-color: var(--sky); }
.lnk small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text2); }
.lnk .go { width: 18px; height: 18px; color: var(--muted); }

/* ภาพจากเอกสาร (เฉพาะ dev server · DECISIONS.md "ประวัติเหตุ บน.2") */
.h-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.h-img a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface2); }
.h-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-img + .note { margin-top: 8px; }
.h-img.mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.h-img.mini a { aspect-ratio: 1; }

/* แบบ D: แผง "เกิดใน บน.2 มาแล้ว" ท้ายหน้าเคส */
.sec.histp { margin: 28px 0; padding: 16px 16px 6px; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); }
.histp .sec-h { margin-bottom: 4px; }
.histp > .note { margin-bottom: 4px; }
.histp .evs li:last-child { border-bottom: 0; }
.histp .more { margin-top: 8px; }
.cmore { margin-top: 22px; }
.cmore .sec-h .n { margin-left: auto; font: 500 12px/1.4 var(--f-b); color: var(--muted); }
.cm { padding: 12px 0; border-top: 1px solid var(--line); }
.cm-h { display: flex; flex-direction: column; gap: 3px; color: var(--sky); font-weight: 600; text-decoration: none; }
.cm-h small { font-weight: 400; font-size: 12px; color: var(--muted); }
.cm ul { margin: 8px 0 0; padding-left: 20px; }
.cm li { font-size: 14.5px; line-height: 1.65; }
.cm li + li { margin-top: 4px; }
.h-hide {
  display: block; width: 100%; min-height: 48px; border: 0; background: none;
  font-size: 13px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px;
}
.h-hide:hover { color: var(--text2); }

@media (min-width: 720px) {
  .hd-h { font-size: 27px; }
}

@media (min-width: 720px) {
  main { padding-top: 32px; }
  .page-h { font-size: 32px; }
  .case h1 { font-size: 27px; }
}

/* ── จอคอมฯ ≥1024px (DECISIONS.md "หน้าตาแอป") ─────────────────
   เมนูขึ้นไปอยู่ในหัวแอป · เนื้อหา 2 คอลัมน์ กว้างสุด 1240px · ปุ่มหลักอยู่ในแผงขวา ไม่มีแถบล่าง */
@media (min-width: 1024px) {
  :root { --head-h: 64px; }
  .annun { padding-left: max(24px, calc((100% - 1240px) / 2)); padding-right: max(24px, calc((100% - 1240px) / 2)); gap: 16px; }
  .tabbar {
    position: static; height: auto; padding: 0; margin-left: 20px; gap: 4px; justify-content: flex-start;
    background: none; border: 0;
  }
  .tabbar a { flex: none; max-width: none; min-height: 48px; flex-direction: row; gap: 8px; padding: 0 14px; border-radius: var(--r); font-size: 14.5px; color: var(--text2); }
  .tabbar a:hover { background: var(--surface); color: var(--text); }
  .tabbar .pill { width: auto; height: auto; border-radius: 0; }
  .tabbar .pill .ic { width: 18px; height: 18px; }
  .tabbar a[aria-current="page"] { background: var(--surface2); color: var(--text); }
  .tabbar a[aria-current="page"] .pill,
  :root[data-theme="day"] .tabbar a[aria-current="page"] .pill { background: none; }
  :root[data-theme="day"] .tabbar a[aria-current="page"] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); }

  main { max-width: calc(1240px + 48px); padding: 32px 24px 64px; }
  /* หน้าคอลัมน์เดียว (พื้นที่ ข้อมูล ไม่พบหน้า) ชิดซ้ายแนวเดียวกับหน้าอื่น อ่านง่ายที่ ~760px */
  main > .view:not(.case):not(.dash):not(.theory):not(.hv), .lay.solo > .view,
  main > .view.hv.hs, main > .view.hv:has(> .empty) { max-width: 760px; }
  /* แท็บคู่มือ PAP: ผังสั่งการต้องกว้าง ส่วนอื่นในแท็บยังกว้างอ่านง่าย 760px */
  main > .view.pap:has(.wd-sec):not(#_) { max-width: 1240px; }
  .view.pap:has(.wd-sec) > * > :not(.wd-sec) { max-width: 760px; }

  .lay { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .lay.solo { display: block; }
  .side {
    position: sticky; top: calc(var(--head-h) + 24px);
    max-height: calc(100vh - var(--head-h) - 48px); display: flex; flex-direction: column; gap: 14px;
  }
  .side-sum { display: block; min-height: 0; overflow: auto; padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
  .side .actbar { position: static; padding: 0; border: 0; background: none; }
  .side .actbar-in { max-width: none; }

  /* หน้าเลือกเที่ยวบิน: แผงขวาแทนแถบขั้นด้านบน */
  .filter > .steps { display: none; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  /* หน้าเคส: ซ้าย = เรื่อง/ปัจจัย/ที่มา · ขวา = ทำวันนี้ + คำถามบรีฟ + เลื่อนเคส */
  .case { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto 1fr; column-gap: 48px; align-items: start; }
  .case-head { grid-column: 1; grid-row: 1; }
  .case-more { grid-column: 1; grid-row: 2; }
  .case-side { grid-column: 2; grid-row: 1 / 3; }
  .case-side > .sec:first-child { margin-top: 0; }
  .case-side .ask { margin-bottom: 16px; }
  .side-nav { display: grid; }
  .case-nav { display: none; }
  /* จอ 1024–1279: แผงขวาแคบลงให้คอลัมน์เรื่อง (และภาพจำลอง) กว้างพอ */
  @media (max-width: 1279px) { .case { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px; } }

  /* ประวัติเหตุ: รายปี = เส้นเวลาซ้าย รายการขวา · ตามหัวข้อ = ตารางซ้าย รายการขวา · รายละเอียด = เนื้อหา + แผงขวา */
  .hv-grid { display: grid; gap: 48px; align-items: start; }
  .hv-grid.y { grid-template-columns: 420px minmax(0, 1fr); }
  .hv-grid.t { grid-template-columns: minmax(0, 1fr) 400px; }
  .hv-grid .hv-r { margin-top: 0; }
  .hv-d { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
  .hv-d .hd-main > :first-child { margin-top: 0; }
  .hd-side {
    position: sticky; top: calc(var(--head-h) + 24px); margin-top: 0;
    padding: 18px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface);
  }
  .hd-side .lnk { background: var(--bg); }
}
/* เส้นเวลาติดอยู่กับที่ตอนเลื่อนรายการ เฉพาะจอที่สูงพอให้เห็นครบทั้งแผง */
@media (min-width: 1024px) and (min-height: 860px) {
  .hv-grid.y .hv-l { position: sticky; top: calc(var(--head-h) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .annun, .tabbar, .actbar, .case-nav, aside.side, .side-nav { display: none !important; }
}

/* จอแคบมาก: ซ่อนเวอร์ชันข้อมูลในหัวแอป (ยังดูได้ที่หน้า ข้อมูล) */
@media (max-width: 400px) { .net .ver { display: none; } }

/* ── หน้าเข้าสู่ระบบ (login.js) ─────────────────────────────────
   DECISIONS.md หัวข้อ "หน้าเข้าสู่ระบบ": แก้ 22 ต.ค. 2569 เป็นพื้นหลังวิดีโอ ฮ. กลางวัน + ชุดสีกลางวันเสมอ
   ทุก class ขึ้นต้น g- และอยู่ใต้ .gate จะได้ไม่ชนกับหน้าอื่นของแอป */
:root { --app-bg: var(--bg); } /* พื้นของแอปตามธีมที่เลือก ให้ตอนปลดล็อกจางไปเป็นสีเดียวกับแอป */
body.gated { overflow: hidden; background: #f4efe4; }
/* ซ่อนแอปข้างหลังทั้งจากสายตา การกด Tab และโปรแกรมอ่านหน้าจอ */
body.gated > :not(.gate) { visibility: hidden; }
.gate {
  /* ชุดสีกลางวันของแอป (:root[data-theme="day"]) ใช้ทุกครั้งไม่ว่าแอปตั้งธีมอะไร ให้เข้ากับภาพกลางวัน */
  --bg: #f4efe4;
  --surface: #faf6ec;
  --line: rgb(40 35 25 / .12);
  --line2: rgb(40 35 25 / .26);
  --text: #1b1f27;
  --text2: #3b4250;
  --muted: #5a606e;
  --sky: #0d64a6;
  --gold: #8a5d00;
  --ok: #17744b;
  --bad: #b3311c;
  --on-pri: hsl(40 100% 5%);
  --g-pri: linear-gradient(180deg, hsl(41 100% 82%), hsl(40 84% 69%) 55%, hsl(37 58% 51%) 140%); /* = --d-pri-bg ใน desk.css */
  --g-flag: linear-gradient(90deg, hsl(355 74% 53%) 0 16.6%, hsl(220 33% 97%) 0 33.3%, hsl(231 51% 36%) 0 66.6%, hsl(220 33% 97%) 0 83.3%, hsl(355 74% 53%) 0);
  --g-bar: 32px;
  color-scheme: light;
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.6 var(--f-b);
  -webkit-font-smoothing: antialiased;
  transition: opacity .45s var(--ease);
}
.gate.out { opacity: 0; pointer-events: none; }

/* ภาพพื้นหลัง: ภาพนิ่งอยู่ล่าง วิดีโอ (จอคอมฯ) ค่อย ๆ ขึ้นทับเมื่อเริ่มเล่น · ตัวเครื่องอยู่ครึ่งขวาของภาพ */
.g-media { position: absolute; inset: 0; overflow: hidden; background: #8c9db1; }
.g-media img, .g-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
  transition: transform 1.6s var(--ease);
}
.g-media video { opacity: 0; transition: opacity .8s var(--ease), transform 1.6s var(--ease); }
.g-media video.on { opacity: 1; }
/* ฝั่งการ์ดเป็นท้องฟ้าโล่ง ไล่สีครีมบาง ๆ ให้การ์ดกลืนกับภาพ ฝั่งตัวเครื่องไม่ถูกบัง */
.g-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(244 239 228 / .5) 0%, rgb(244 239 228 / .18) 36%, transparent 56%),
              linear-gradient(0deg, rgb(244 239 228 / .3), transparent 28%);
}
/* ปลดล็อกสำเร็จ: ภาพค่อย ๆ ขยายเข้าหาเครื่องเล็กน้อยก่อนจางเข้าแอป */
.gate.pass .g-media img, .gate.pass .g-media video { transform: scale(1.04); }

/* แถบชั้นความลับ: พื้นกรมท่า ตัวทอง โทนเดียวกับไอคอนทางลัด (.app-ic) */
.g-cls {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  height: var(--g-bar);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px;
  background: rgb(13 21 40 / .9);
  border-bottom: 1px solid rgb(242 198 109 / .4);
  color: #f2c66d;
  font-size: 12.5px; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-cls b { font-weight: 600; }
.g-cls span { color: #c9d3e6; overflow: hidden; text-overflow: ellipsis; }

/* การ์ดกระจกสีครีม */
.g-stage {
  position: absolute; inset: var(--g-bar) 0 0 0; z-index: 4;
  display: flex; align-items: center;
  padding: 24px 24px 24px max(6vw, 40px);
  pointer-events: none;
}
.g-box {
  pointer-events: auto;
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 30px 28px 22px;
  background: rgb(250 246 236 / .88);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: var(--r-l);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 0 0 1px rgb(40 35 25 / .05), 0 30px 60px -24px rgb(16 32 56 / .5);
  animation: g-rise .7s var(--ease) both;
}
/* แถบธงชาติบนขอบการ์ด เหมือนปกหน้าหลักจอคอมฯ */
.g-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--g-flag); opacity: .9; }
@keyframes g-rise { from { opacity: 0; transform: translateY(14px); } }

.g-cover { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.g-cover img { width: 42px; height: auto; display: block; flex: none; filter: drop-shadow(0 2px 3px rgb(40 35 25 / .25)); }
.g-who { line-height: 1.3; }
.g-who b { display: block; font: 600 15px/1.3 var(--f-k, var(--f-d)); color: var(--text); }
.g-who small { color: var(--muted); font-size: 12.5px; }

.g-kick { margin: 0 0 6px; color: var(--sky); font-size: 13px; font-weight: 500; }
.gate h1 { margin: 0; font: 600 34px/1.22 var(--f-k, var(--f-d)); letter-spacing: -.005em; color: var(--text); }
.gate h1 span { color: var(--gold); display: block; }
.g-sub {
  margin: 10px 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text2); font-size: 14.5px; line-height: 1.65;
}

.g-lbl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text2); }
.g-lbl small { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.g-pw { position: relative; }
.g-pw input {
  width: 100%; height: 54px;
  padding: 0 56px 0 16px;
  background: rgb(255 255 255 / .92); color: var(--text);
  border: 1px solid var(--line2); border-radius: var(--r);
  font-size: 17px; letter-spacing: .04em;
  outline: none;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.g-pw input::placeholder { color: var(--muted); letter-spacing: 0; font-size: 15px; }
.g-pw input:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgb(13 100 166 / .18); }
.g-pw input:disabled { opacity: .7; }
.gate.err .g-pw input { border-color: var(--bad); box-shadow: 0 0 0 3px rgb(179 49 28 / .16); }
.g-eye {
  position: absolute; right: 3px; top: 3px;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 6px; color: var(--muted);
}
.g-eye:hover, .g-eye:focus-visible { color: var(--text); background: rgb(40 35 25 / .06); outline: none; }
.g-eye svg { width: 20px; height: 20px; }

.g-rem {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; margin: 4px 0 6px;
  font-size: 14px; color: var(--text2); cursor: pointer;
}
.g-rem input { width: 20px; height: 20px; margin: 0; accent-color: var(--sky); }
.g-rem small { color: var(--muted); font-size: 12.5px; }

/* ปุ่มทองไล่สีแบบปุ่มหลักจอคอมฯ (.d-btn.pri) */
.g-go {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--g-pri); color: var(--on-pri);
  border: 0; border-radius: var(--r);
  box-shadow: 0 10px 24px -12px rgb(150 100 10 / .75), inset 0 1px 0 rgb(255 255 255 / .55);
  font: 600 17px/1 var(--f-k, var(--f-d));
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast), box-shadow var(--t-med);
}
.g-go:hover { filter: brightness(1.04); box-shadow: 0 14px 30px -12px rgb(150 100 10 / .85), inset 0 1px 0 rgb(255 255 255 / .55); }
.g-go:active { transform: translateY(1px); }
.g-go:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.g-go[disabled] { cursor: progress; filter: saturate(.75) brightness(.96); }
/* ปลดล็อกแล้ว: ปุ่มเป็นสีเขียว */
.g-go.ok, .g-go.ok[disabled] { background: var(--ok); color: #fff; filter: none; cursor: default; box-shadow: 0 10px 24px -12px rgb(23 116 75 / .7); }
.g-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(26 17 0 / .25); border-top-color: var(--on-pri); animation: g-sp .7s linear infinite; display: none; }
.g-go.busy .g-spin { display: block; }
@keyframes g-sp { to { transform: rotate(360deg); } }

.g-msg { min-height: 24px; margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.g-msg.bad { color: var(--bad); }
.g-msg.ok { color: var(--ok); }

/* ติดตั้งลงหน้าจอ: ปุ่มรองแบบเส้นขอบ ไม่แย่งปุ่มทอง · วิธีทำกางใต้ปุ่ม (login.js) */
.g-ins {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgb(255 255 255 / .55); color: var(--text);
  border: 1px solid var(--line2, rgb(40 35 25 / .22)); border-radius: var(--r);
  font: 500 15px/1.3 var(--f-b);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.g-ins:hover { background: rgb(255 255 255 / .8); border-color: var(--text2); }
.g-ins:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.g-ins svg { width: 20px; height: 20px; flex: none; color: var(--sky); }
.g-how { margin-top: 10px; padding: 12px 14px; border-radius: var(--r); background: rgb(13 100 166 / .07); font-size: 14px; line-height: 1.6; color: var(--text2); }
.g-how ol { margin: 0; padding-left: 20px; list-style: decimal; }
.g-how li::marker { color: var(--sky); font-weight: 600; }
.g-how li + li { margin-top: 4px; }
.g-how b { color: var(--text); font-weight: 600; }
.g-how p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.g-how p:only-child { margin: 0; font-size: 14px; color: var(--ok); }
.g-share svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--sky); }

.g-foot {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.g-foot dt { color: var(--muted); }
.g-foot dd { margin: 0; color: var(--text2); }
.g-m { font-family: var(--f-m); font-size: 12px; }

/* รหัสผิด: การ์ดสั่น + ขอบจอแดง 900ms */
.g-box.shake { animation: g-shake .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes g-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.g-edge { position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 2px solid var(--bad); opacity: 0; transition: opacity var(--t-slow); }
.gate.err .g-edge { opacity: 1; }

/* ปลดล็อกสำเร็จ: จางเป็นพื้นของแอปตามธีมที่ตั้งไว้ ไม่วาบขาว (ห้องบรีฟกลางคืนมืด) */
.g-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: var(--app-bg); }
.gate.flash .g-flash { animation: g-flash .95s var(--ease) forwards; }
@keyframes g-flash { to { opacity: 1; } }

/* จอแคบ: ภาพอยู่บน การ์ดอยู่ล่าง · สูงไม่เกินราวความกว้างจอ ตัวเครื่องจึงอยู่ในภาพทั้งลำ */
@media (max-width: 899px) {
  .g-media { inset: 0 0 auto; height: min(50vh, 96vw); }
  .g-media::after { background: linear-gradient(180deg, transparent 55%, var(--bg) 96%); } /* ทึบก่อนถึงขอบ ไม่ให้เห็นรอยต่อเศษพิกเซล */
  .g-stage { align-items: flex-end; justify-content: center; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); }
  .g-box { width: min(480px, 100%); padding: 24px 20px 16px; }
  .gate h1 { font-size: 28px; }
  .gate h1 span { display: inline; }
}
@media (max-width: 899px) and (max-height: 860px) {
  .g-cover { margin-bottom: 12px; }
  .g-cover img { width: 36px; }
  .g-sub { display: none; }
  .gate h1 { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .g-msg { margin-top: 4px; min-height: 22px; }
  .g-foot { grid-template-columns: 1fr; }
  .g-foot dt, .g-foot dd:nth-of-type(2) { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .g-who small, .g-kick { display: none; }
}
/* โน้ตบุ๊ก 1366×768 ที่ใช้กันในหน่วย: ตัดคำอธิบายออก ให้การ์ดพอดีจอไม่ต้องเลื่อน */
@media (min-width: 900px) and (max-height: 820px) {
  .g-stage { padding-top: 16px; padding-bottom: 16px; }
  .g-cover { margin-bottom: 14px; }
  .g-sub { display: none; }
  .gate h1 { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .g-cls span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .g-box, .g-box.shake { animation: none; }
  .gate.pass .g-media img { transform: none; }
  .gate.flash .g-flash { animation: none; opacity: 1; }
}

/* กลางคืน: ปุ่มกรอง ป้ายในรายการ กราฟรายชั่วโมง */
.h-tgs { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: center; }
.h-tgs .h-imgtg { margin: 0 0 6px; }
.h-imgtg .ic:not(.ck) { width: 16px; height: 16px; }
.h-ntsub { gap: 6px; margin: -12px 0 6px; justify-content: flex-end; }
.h-ntsub .chip { min-height: 44px; padding: 4px 12px; font-size: 13px; }
.h-ntsub .chip b { font: 600 12px/1 var(--f-m); font-variant-numeric: tabular-nums; }
.h-ntsub + .h-imgnote { margin-top: 2px; text-align: right; }
.ev .m .nt-n { display: inline-flex; align-items: center; gap: 4px; color: var(--sky); }
.ev .m .nt-n .ic { width: 13px; height: 13px; }
.nt-ic { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--sky); }

.h-hrs { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 170px; margin-top: 8px; }
.h-hb {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0 0 4px;
  border: 0; border-radius: 5px; background: none; color: var(--text2);
}
.h-hb.dk { background: color-mix(in srgb, var(--sky) 11%, transparent); }
.h-hb.tw { background: color-mix(in srgb, var(--sky) 5%, transparent); }
.h-hb:hover:not([disabled]) { background: var(--surface2); }
.h-hb[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.h-hb[disabled] { cursor: default; }
.h-hb .n { padding: 4px 0 3px; font: 600 10.5px/1 var(--f-m); text-align: center; font-variant-numeric: tabular-nums; }
.h-hb .col { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; margin: 0 14%; }
.h-hb .col .sg:last-child { border-radius: 3px 3px 0 0; }
.h-hb .mn { height: 22px; padding-top: 5px; font: 500 11px/1.4 var(--f-m); text-align: center; white-space: nowrap; color: var(--muted); }
.h-keys .sw { width: 12px; height: 12px; border-radius: 3px; }
.h-keys .sw.dk { background: color-mix(in srgb, var(--sky) 22%, transparent); }
.h-keys .sw.tw { background: color-mix(in srgb, var(--sky) 10%, transparent); }
.h-hrs.big { height: 230px; }
.h-sea.p-dk { --sc: var(--sky); }
.h-sea.p-tw { --sc: color-mix(in srgb, var(--sky) 50%, var(--gold)); }
.hm.hr thead th { border-bottom: 3px solid transparent; }
.hm.hr thead th.p-dk { border-color: var(--sky); }
@media (max-width: 480px) {
  .h-hrs { gap: 1px; height: 150px; }
  .h-hrs.big { height: 180px; }
  .h-hb .n { font-size: 9px; }
  .h-hb .col { margin: 0 8%; }
  .h-tabs:has(.h-tgs) { flex-wrap: wrap; }
  .h-tgs { order: -1; margin-left: 0; flex-basis: 100%; justify-content: flex-end; }
  .h-ntsub { justify-content: flex-start; flex-wrap: nowrap; }
  .h-ntsub .chip { padding: 4px 10px; font-size: 12.5px; }
  .h-ntsub + .h-imgnote { text-align: left; }
}
/* กราฟรายชั่วโมงในคอลัมน์แคบ (แถบข้างจอคอมฯ) ตัวเลขชนกัน ซ่อนไว้ ดูจากป้ายเมื่อชี้ */
.h-hrs { container-type: inline-size; }
@container (max-width: 300px) { .h-hb .n { visibility: hidden; } .h-hb .col { margin: 0 6%; } }
/* แท็บรายชั่วโมงบนมือถือ: เลข 3 หลักกว้างกว่าแท่ง แสดงเฉพาะแท่งที่เลือก */
@container (max-width: 480px) { .h-hrs.big .h-hb .n { visibility: hidden; } .h-hrs.big .h-hb[aria-pressed="true"] .n { visibility: visible; overflow: visible; } }

/* ค้นหาประวัติเหตุ (DECISIONS.md "ข้อเสนอแนะนักบินรอบแรก" ข้อ 5) */
.h-q { margin: 0 0 18px; }
.h-q label { position: relative; display: block; }
.h-q .ic { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.h-q input {
  width: 100%; min-height: 48px; padding: 0 14px 0 42px; border: 1px solid var(--line2); border-radius: var(--r-l);
  background: var(--surface); color: var(--text); font: 400 16px/1.3 var(--f-b);
}
.h-q input::placeholder { color: var(--muted); }
.h-q input:focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px var(--sky-d); }
.h-qn { margin: 0 0 14px; }
.h-qn b { color: var(--text); font-variant-numeric: tabular-nums; }
/* จำนวนเคสบนชิปภารกิจ */
.chip b.cn { font: 600 var(--fs-2xs)/1 var(--f-m); color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] b.cn { color: inherit; opacity: .75; }
.chip.zero { color: var(--muted); }

/* กฎระเบียบและคู่มือ (#/regs) — ลิงก์ออกไปเอกสารต้นฉบับ */
.rg-lede { margin: -8px 0 18px; font-size: 14.5px; color: var(--text2); }
.rg-chips { margin-bottom: 14px; }
.rg-note { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; color: var(--text2); }
.rg-sec { margin-top: 22px; }
.rg-sec .sec-h span { font: 500 12.5px/1.4 var(--f-m); color: var(--muted); }
.rg-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rg-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color var(--t-fast), transform .1s;
}
.rg-card:hover { border-color: var(--line2); }
.rg-card:active { transform: scale(.99); }
.rg-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--sky-d); color: var(--sky); }
.rg-ic .ic { width: 20px; height: 20px; }
.rg-b { display: grid; gap: 4px; min-width: 0; }
.rg-n { font: 600 12px/1.4 var(--f-m); color: var(--gold); letter-spacing: .02em; }
.rg-t { font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.rg-m { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.rg-m .rg-old { color: var(--warn); }
.rg-m .rg-f { font: 600 11px/1.5 var(--f-m); padding: 0 6px; border: 1px solid var(--line2); border-radius: var(--r-s); }
.rg-x { font-size: 13px; color: var(--text2); }
.rg-go { color: var(--muted); }
.rg-go .ic { width: 18px; height: 18px; }
.rg-src { margin: 26px 0 8px; font-size: 12.5px; color: var(--muted); }
.rg-src a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--sky); }

/* ── Wing 2 Airmanship + นโยบาย เสธ.ทอ. ───────────────────────
   DECISIONS.md หัวข้อ "Wing 2 Airmanship และนโยบาย เสธ.ทอ.": ข้อความคัดตามต้นฉบับ วาดเป็น HTML ไม่ใช้ภาพโปสเตอร์ */
.policy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 6px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 12%, var(--bg2)), var(--bg2) 70%);
  color: var(--text); text-decoration: none; font: 500 12px/1.3 var(--f-d);
}
.policy small { margin-right: 8px; font: inherit; font-size: 12px; color: var(--muted); white-space: nowrap; }
.policy b { font: 600 12px/1.3 var(--f-d); letter-spacing: .14em; color: var(--gold); white-space: nowrap; }
.policy b i { font-style: normal; margin: 0 .35em; color: var(--muted); }
.policy .pol-l { display: flex; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.policy .pol-th, .policy .pol-r { display: none; }
.policy:hover b { text-decoration: underline; text-underline-offset: 3px; }
.policy:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
body.briefing .policy, body.lesson .policy { display: none; }
@media (max-width: 380px) { .policy small { display: none; } .policy b { letter-spacing: .08em; } }
@media (min-width: 760px) {
  .policy .pol-th { display: inline; margin-left: 12px; color: var(--text2); }
  .policy .pol-r { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .policy .pol-r b { color: var(--text); letter-spacing: .1em; }
}

/* หน้า #/airmanship · ออกแบบใหม่ 22 ต.ค. 2569 (DECISIONS หัวข้อ Airmanship ข้อ 9) · จอคอมฯ จัดเพิ่มใน desk.css */
.air { max-width: 980px; margin: 0 auto; }
.air-hero { position: relative; padding: 26px 20px calc(48vw - 20px); border: 1px solid var(--line); border-radius: var(--r-xl); text-align: center; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%), var(--air-img-s) 50% 100% / 100% auto no-repeat, var(--bg2); }
@media (min-width: 760px) { .air-hero { padding: 34px 24px 150px; background: var(--air-scrim), var(--air-img) 60% 100% / cover no-repeat, var(--bg2); } }
.air-emb { display: block; margin: 0 auto 10px; width: 46px; height: auto; }
.air-eye { font: 500 var(--fs-xs)/1.4 var(--f-b); color: var(--muted); }
.air-hero h1 { margin: 6px 0 4px; font: 600 clamp(30px, 8vw, 52px)/1.3 var(--f-d); letter-spacing: .04em; }
.air-hero h1 em { font-style: normal; color: var(--gold); }
.air-sub { font: 600 clamp(17px, 4.4vw, 22px)/1.4 var(--f-d); }
/* ค่านิยม 5 คำ: ชิปเรียงต่อกัน */
.air-vals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.air-vals li { padding: 4px 12px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: var(--r-pill); font: 500 var(--fs-sm)/1.4 var(--f-b); background: color-mix(in srgb, var(--bg2) 55%, transparent); }

/* นโยบาย เสธ.ทอ. K·S·D: ตัวอักษรใหญ่จาง ๆ มุมการ์ดเป็นของตกแต่ง (data-k) */
.air-ksd { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.air-ksd h2 { font: 600 var(--fs-md)/1.4 var(--f-d); color: var(--gold); }
.air-ksd ul { display: grid; gap: 10px; margin-top: 12px; }
.air-ksd li { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px; border: 1px solid transparent; border-radius: var(--r-l); background: var(--surface2); }
.air-ksd li::after { content: attr(data-k); position: absolute; z-index: -1; right: 8px; top: -18px; font: 600 104px/1 var(--f-d); color: var(--gold); opacity: .09; pointer-events: none; }
.air-ksd li > b { font: 600 var(--fs-ui)/1.3 var(--f-d); letter-spacing: .08em; }
.air-ksd li .th { grid-column: 2; font: 400 var(--fs-md)/1.4 var(--f-b); color: var(--text2); }
.air-ksd li .air-ic { grid-row: 1 / 3; }
.air-ksd li p { grid-column: 1 / -1; margin-top: 10px; font-size: var(--fs-md); line-height: 1.6; color: var(--text2); }
.air-gos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 14px; margin-top: 10px; }
.air-in { padding: 1px 6px; border: 1px solid var(--line2); border-radius: var(--r-s); font: 500 var(--fs-2xs)/1.4 var(--f-b); color: var(--muted); }
.air-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-l); color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.air-ic .ic { width: 22px; height: 22px; }
.air-ic.big { width: 52px; height: 52px; } .air-ic.big .ic { width: 28px; height: 28px; }
/* ลิงก์ในแอป: พื้นที่แตะสูง 48px แต่ margin ติดลบให้ระยะที่ตาเห็นเท่าเดิม */
.air-go { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; min-width: 44px; margin-block: -8px; font: 500 var(--fs-sm)/1.4 var(--f-b); color: var(--sky); text-decoration: none; }
.air-go .ic { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease); }
.air-go:hover { text-decoration: underline; } .air-go:hover .ic { transform: translateX(3px); }

/* หัวข้อส่วน: เลขบนโปสเตอร์ = จำนวนข้อ → เลขใหญ่ + หน่วย แทนวงกลม */
.air-sec { margin-top: 32px; }
.air-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 var(--fs-xl)/1.3 var(--f-d); }
.air-h b { font-weight: 600; color: var(--gold); letter-spacing: .04em; }
.air-n { display: flex; align-items: baseline; gap: 6px; flex: none; padding-right: 14px; border-right: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.air-h .air-n b { font: 600 var(--fs-kpi-m)/1 var(--f-m); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--gold); }
.air-n small { font: 500 var(--fs-sm)/1.4 var(--f-b); color: var(--muted); }
.air-grid { display: grid; gap: 10px; }
.air-grid.g4, .air-grid.g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.air-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.air-card > b, .air-card div > b { font: 600 var(--fs-md)/1.3 var(--f-d); letter-spacing: .06em; }
.air-card > span:not(.air-ic), .air-card div > span { font-size: var(--fs-md); line-height: 1.5; color: var(--text2); }
.air-card .air-go { margin-top: auto; }
.air-card.wide { flex-direction: row; align-items: center; gap: 14px; } .air-card.wide div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .air-card.wide b { font-size: var(--fs-lg); }
.air-hub { display: none; }

/* นำไปใช้ก่อนและระหว่างบิน: เส้นทางบิน 5 จุด · จอแคบเป็นแนวตั้ง เส้นเข้าขั้น 5 (เสี่ยงเกินควบคุม) เป็นเส้นประสีเตือน */
.air-steps li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-bottom: 18px; }
.air-steps li:last-child { padding-bottom: 0; }
.air-steps .air-ic { position: relative; z-index: 1; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--surface); }
.air-steps .air-ic .ic { width: 20px; height: 20px; }
.air-steps .n { padding-top: 2px; font: 600 var(--fs-sm)/1.4 var(--f-m); color: var(--gold); }
.air-steps .t { font-size: var(--fs-ui); line-height: 1.5; }
.air-steps li:not(:last-child)::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--gold) 35%, transparent); }
.air-steps li:nth-last-child(2)::before { width: 0; border-left: 2px dashed var(--warn); background: none; }
.air-steps li.hot .air-ic { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
.air-steps li.hot .n { color: var(--warn); }
.air-steps li.hot .t { margin-top: 4px; padding: 8px 12px; border-radius: var(--r); font-weight: 600; background: color-mix(in srgb, var(--warn) 12%, transparent); }

.air-motto { margin-top: 32px; padding: 26px 18px; border: 1px solid var(--line); border-radius: var(--r-xl); text-align: center; overflow: hidden;
  background: linear-gradient(color-mix(in srgb, var(--bg2) 80%, transparent), color-mix(in srgb, var(--bg2) 94%, transparent)), var(--air-img-s) 50% 60% / cover no-repeat, var(--bg2); }
.air-motto .m { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-ui); line-height: 1.5; }
.air-motto .m b { font: 600 var(--fs-ui)/1.4 var(--f-d); letter-spacing: .1em; color: var(--gold); }
.air-motto .big { margin: 16px 0 14px; font: 600 clamp(22px, 5.6vw, 34px)/1.3 var(--f-d); letter-spacing: .06em; }
.air-motto .foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.air-note { margin: 14px 4px 0; font-size: var(--fs-md); line-height: 1.6; color: var(--muted); }

/* การเคลื่อนไหว: ยกการ์ดเมื่อชี้ + การ์ดค่อย ๆ ขึ้นเมื่อเลื่อนถึง (JS ใส่ .rv เฉพาะเมื่อไม่ได้ตั้งลดการเคลื่อนไหว) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .air-card, .air-ksd li { transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow), border-color var(--t-slow); }
  .air-card:hover, .air-ksd li:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line2); }
}
.air.rv :is(.air-ksd, .air-sec):not(.in) li { opacity: 0; }
.air.rv :is(.air-ksd, .air-sec).in li { animation: air-rise .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes air-rise { from { opacity: 0; transform: translateY(14px); } }
@media print { .air.rv li { opacity: 1 !important; animation: none !important; } }
@media (min-width: 760px) {
  .air-ksd ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .air-ksd li { align-content: start; }
  .air-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .air-grid.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .air-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .air-motto { padding: 34px 24px; background: linear-gradient(color-mix(in srgb, var(--bg2) 78%, transparent), color-mix(in srgb, var(--bg2) 92%, transparent)), var(--air-img) 50% 60% / cover no-repeat, var(--bg2); }
}

/* Airmanship · ชั้นความสวยงาม 22 ต.ค. 2569 (DECISIONS หัวข้อ Airmanship ข้อ 10): ตกแต่งและเคลื่อนไหวเท่านั้น ไม่มีข้อความใหม่
   ทองไล่เฉด · กรอบเล็งแบบ HUD · ภาพฮีโร่ซูมช้า · ไฟวิ่งตามเส้น · วงเรดาร์กลางเสาหลัก · เส้นประเตือนเดินเข้าขั้น 5 · แสงตามเมาส์ */
@property --spot { syntax: '<number>'; inherits: false; initial-value: 0; }
.air { --gold-hi: #fff2cc; }
:root[data-theme="day"] .air { --gold-hi: #b07a1a; }
.air-hero h1 em { background: linear-gradient(100deg, var(--gold) 0 40%, var(--gold-hi) 50%, var(--gold) 60% 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.air-motto .big { background: linear-gradient(100deg, var(--text) 0 42%, var(--gold-hi) 50%, var(--text) 58% 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.air-h .air-n b { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.air-emb { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 45%, transparent)); }
/* ภาพฮีโร่อยู่ใน ::before (สืบพื้นหลังเดิมทั้งชุด) เพื่อซูมช้าได้ · ::after เป็นมุมกรอบเล็ง */
.air-hero, .air-motto { position: relative; isolation: isolate; }
.air-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; transform-origin: 72% 62%; }
.air-hero::after, .air-motto::after { content: ''; position: absolute; inset: 10px; z-index: -1; pointer-events: none;
  --c: color-mix(in srgb, var(--gold) 70%, transparent); --l: 20px;
  background: linear-gradient(var(--c) 0 0) 0 0 / var(--l) 2px, linear-gradient(var(--c) 0 0) 0 0 / 2px var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) 2px, linear-gradient(var(--c) 0 0) 100% 0 / 2px var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) 2px, linear-gradient(var(--c) 0 0) 0 100% / 2px var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) 2px, linear-gradient(var(--c) 0 0) 100% 100% / 2px var(--l);
  background-repeat: no-repeat; }
/* หัวข้อส่วน: เส้นทองบางลากต่อท้าย */
.air-h::after { content: ''; flex: 1 1 0; min-width: 0; height: 1px; margin-left: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 60%, transparent), transparent); transform-origin: left; }
/* ไอคอน: ทองไล่เฉดมีขอบใน (เส้นทางบินคงแบบวงกลมเดิม) */
.air-ic { background: linear-gradient(145deg, color-mix(in srgb, var(--gold) 26%, transparent), color-mix(in srgb, var(--gold) 7%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent); }
.air-steps .air-ic { box-shadow: none; }
/* K·S·D: ตัวอักษรใหญ่เป็นเส้นขอบทอง เติมทองจาง ๆ จากบนลงล่าง */
.air-ksd li::after { color: transparent; opacity: 1; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--gold) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, transparent), transparent 72%); -webkit-background-clip: text; background-clip: text; }
/* เส้นประเตือนเข้าขั้น 5 วาดด้วยไล่สีซ้ำ (ภาพนิ่งเท่าเส้นประเดิม) เพื่อให้เดินได้ */
.air-steps li:nth-last-child(2)::before { border-left: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--warn) 0 6px, transparent 6px 12px); }

@media (prefers-reduced-motion: no-preference) {
  .air-hero::before { animation: air-kb 32s ease-in-out infinite alternate; }
  .air-hero-in > :not(.air-vals) { animation: air-rise .9s var(--ease) backwards; }
  .air-hero-in > :nth-child(2) { animation-delay: .08s; }
  .air-hero-in > :nth-child(3) { animation-delay: .16s; }
  .air-hero-in > :nth-child(4) { animation-delay: .24s; }
  .air-vals li { animation: air-rise .7s var(--ease) backwards; animation-delay: calc(.34s + var(--i, 0) * 70ms); }
  .air-hero h1 em { animation: air-shine 7s ease-in-out 1.2s infinite; }
  .air-motto .big { animation: air-shine 8s ease-in-out 2s infinite; }
  .air-steps li.hot .air-ic::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--warn); border-radius: 50%; pointer-events: none; animation: air-ping 2.4s var(--ease) infinite; }
  .air-steps li:nth-last-child(2)::before { animation: air-march-y 1s linear infinite; }
  .air.rv .air-sec:not(.in) .air-h { opacity: 0; }
  .air.rv .air-sec.in .air-h { animation: air-rise .6s var(--ease) backwards; }
  .air.rv .air-sec.in .air-h::after { animation: air-draw 1.2s var(--ease) .25s backwards; }
  .air.rv .air-sec.in .air-steps li:not(:last-child)::before { transform-origin: top; animation: air-draw-y .6s var(--ease) backwards; animation-delay: calc(var(--i) * 120ms + .3s); }
  .air.rv .air-sec.in .air-steps li:nth-last-child(2)::before { animation: air-draw-y .6s var(--ease) backwards, air-march-y 1s linear infinite; animation-delay: .66s, 0s; }
}
/* แสงตามเมาส์: ขอบทองสว่างตรงจุดที่ชี้ + แสงจาง ๆ ในการ์ด (JS ใส่ --mx/--my) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .air-card { position: relative; }
  .air-card, .air-ksd li { transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow), border-color var(--t-slow), --spot .35s; }
  .air-card:hover, .air-ksd li:hover { --spot: 1; }
  .air-card { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--gold) calc(var(--spot) * 11%), transparent), transparent 70%), var(--surface); }
  .air-ksd li { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--gold) calc(var(--spot) * 11%), transparent), transparent 70%), var(--surface2); }
  .air-card::before, .air-ksd li::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), var(--gold-hi), color-mix(in srgb, var(--gold) 55%, transparent) 38%, transparent 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s; }
  .air-ksd li::before { inset: 0; } /* li ตัดล้นที่ขอบใน */
  .air-card:hover::before, .air-ksd li:hover::before { opacity: 1; }
  .air-ksd li::after { transition: transform .7s var(--ease), -webkit-text-stroke-color .4s; }
  .air-ksd li:hover::after { transform: translate(-6px, 6px) scale(1.05); -webkit-text-stroke-color: color-mix(in srgb, var(--gold) 70%, transparent); }
}
@keyframes air-kb { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.2%, -1%); } }
@keyframes air-shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes air-ping { from { transform: scale(1); opacity: .75; } to { transform: scale(1.75); opacity: 0; } }
@keyframes air-draw { from { transform: scaleX(0); } }
@keyframes air-draw-y { from { transform: scaleY(0); } }
@keyframes air-march-y { to { background-position: 0 12px; } }
@keyframes air-march { to { background-position: 12px 0; } }
@keyframes air-flow { to { background-position: 170% 0, 0 0; } }
@keyframes air-flow-y { to { background-position: 0 170%, 0 0; } }
@keyframes air-spin { to { transform: rotate(1turn); } }
@media print, (forced-colors: active) {
  .air :is(.air-hero h1 em, .air-motto .big, .air-n b) { -webkit-text-fill-color: currentColor; background: none; }
}
@media print { .air *, .air *::before, .air *::after { animation: none !important; } .air.rv .air-h { opacity: 1 !important; } }

/* ท้ายโหมดบรีฟ: 5 ขั้นของ Wing 2 Airmanship ขนาดตามจอโปรเจกเตอร์ */
.end-air { margin-top: clamp(14px, 3vh, 36px); padding: clamp(12px, 2vh, 24px) clamp(14px, 1.6vw, 28px); border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.end-air .h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: clamp(14px, min(1.3vw, 2.3vh), 26px); }
.end-air .h b { font-family: var(--f-d); letter-spacing: .1em; color: var(--gold); }
.end-air .h span { color: var(--text2); }
.endq .end-air ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr)); gap: clamp(6px, 1vh, 14px); margin-top: clamp(8px, 1.4vh, 18px); border: 0; }
.endq .end-air li { display: flex; gap: .5em; align-items: baseline; padding: 0; border: 0; font: 500 clamp(14px, min(1.25vw, 2.3vh), 26px)/1.4 var(--f-d); }
.endq .end-air li .n { font: 700 1em/1 var(--f-d); color: var(--gold); }
.endq .end-air li.hot, .endq .end-air li.hot .n { color: var(--warn); }
.end-air .m { margin-top: clamp(8px, 1.4vh, 18px); font: 700 clamp(15px, min(1.5vw, 2.6vh), 30px)/1.2 var(--f-d); letter-spacing: .08em; }

/* ── แผน PAP (#/pap) ─────────────────────────────────────────
   DECISIONS.md หัวข้อ "แผน PAP": ข้อมูลเข้ารหัสทั้งไฟล์ · ไม่มีแผนที่ Crash Grid ข่ายวิทยุ เบอร์โทร ชื่อบุคคล */
.pap-tabs { display: flex; gap: 6px; margin: 4px 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pap-tabs a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 10px; color: var(--text2); text-decoration: none; font: 600 14px/1.4 var(--f-d); }
.pap-tabs a .ic { width: 17px; height: 17px; }
.pap-tabs a[aria-current="page"] { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pap-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pap-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text2); text-decoration: none; font-size: 13px; }
.pap-jump a:hover { border-color: var(--sky); color: var(--text); }
.pap-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pap-lv { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-l); background: var(--surface); }
.pap-lv b { display: block; font: 600 15px/1.3 var(--f-d); }
.pap-lv p { margin: 4px 0 0; font-size: 13.5px; color: var(--text2); }
.pap-lv p.a { color: var(--text); }
.pap-sec { margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); scroll-margin-top: 70px; }
.pap-sec > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; }
.pap-sec > summary::-webkit-details-marker { display: none; }
.pap-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface2); color: var(--tile-orange); }
.pap-ic .ic { width: 18px; height: 18px; }
.pap-h { flex: 1; font: 600 15.5px/1.3 var(--f-d); }
.pap-sec .cn { font: 600 12px/1 var(--f-m); color: var(--muted); }
.pap-chev { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t-med); }
details[open] > summary .pap-chev { transform: rotate(180deg); }
.pap-in { padding: 0 14px 14px; }
.pap-p { margin-left: 6px; font: 400 12.5px/1.4 var(--f-b); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.pap-ul, .pap-num { margin: 0; padding-left: 20px; }
.pap-ul li, .pap-num li { margin: 5px 0; line-height: 1.55; }
.pap-sh { margin: 14px 0 4px; font: 600 14px/1.3 var(--f-d); color: var(--text2); }
.pap-sh:first-child { margin-top: 0; }
/* ผังสั่งการ (wiring diagram) — รางซ้าย = สั่งการ/สนับสนุน, รางขวา = ข้อมูล/รถรับส่ง */
.wd-sec { margin: 0 0 16px; scroll-margin-top: 70px; }
.wd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.wd-seg { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.wd-seg button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--text2); font: 600 14px/1.3 var(--f-b); cursor: pointer; }
.wd-seg button[aria-pressed="true"] { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.wd-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font: 400 12.5px/1.4 var(--f-b); color: var(--muted); }
.wd-lg li { display: inline-flex; align-items: center; gap: 5px; }
.wd-lg svg { width: 26px; height: 8px; }
.wd-host { position: relative; padding: 14px 22px 18px; border: 1px solid var(--line); border-radius: var(--r-l); background-color: var(--surface);
  background-image: linear-gradient(color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.wd-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wd-grid { position: relative; z-index: 1; }
.wd-tier { --c: var(--sky); }
.wd-tier + .wd-tier { margin-top: 26px; }
.wd-tier.t0 { --c: var(--bad); } .wd-tier.t2 { --c: var(--gold); } .wd-tier.t3 { --c: var(--warn); } .wd-tier.t4 { --c: var(--ok); }
.wd-tl { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px; padding: 2px 9px 2px 7px; border-left: 3px solid var(--c); border-radius: 0 6px 6px 0; background: var(--surface); font: 600 13px/1.4 var(--f-b); color: var(--text2); }
.wd-tn { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line2); border-radius: 10px; font: 600 12px/1 var(--f-m); color: var(--text2); }
.wd-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 10px; }
.wd-n { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 140px; max-width: 230px; min-width: 0; padding: 8px 11px 9px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px; background: var(--surface2); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
button.wd-n:hover, .wd-n.lk { border-color: var(--c); }
.wd-n[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.wd-n:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.wd-n.t0 { flex: 0 1 230px; align-items: center; text-align: center; cursor: default; background: color-mix(in srgb, var(--bad) 12%, var(--surface2)); }
.wd-n.hub { background: color-mix(in srgb, var(--gold) 10%, var(--surface2)); }
.wd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.wd-no { padding: 2px 7px; white-space: nowrap; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c) 18%, transparent); font: 600 12px/1.3 var(--f-m); color: var(--text); }
.wd-hb { display: inline-block; white-space: nowrap; padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--gold) 18%, transparent); font: 600 12px/1.4 var(--f-b); color: var(--text); vertical-align: middle; }
.wd-n b { font: 600 14px/1.4 var(--f-b); }
.wd-tg { font: 400 12.5px/1.45 var(--f-b); color: var(--text2); }
.wd-n .pap-p { margin-left: 0; font-size: 12px; }
.wd-sec path { fill: none; stroke-width: 1.6; }
.wd-sec path.cmd { stroke: var(--sky); }
.wd-sec path.co { stroke: var(--gold); stroke-dasharray: 6 4; }
.wd-sec path.sup { stroke: var(--ok); stroke-dasharray: 3 4; }
.wd-sec path.info { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 1 4; stroke-linecap: round; }
.wd-sec path.car { stroke: var(--warn); stroke-dasharray: 8 3; }
.wire { opacity: .6; transition: opacity var(--t-med), stroke-width var(--t-med); }
.wire.x { display: none; }
.wire.x.on { display: inline; }
.focusing .wire { opacity: .15; }
.focusing .wire.on { opacity: 1; stroke-width: 2.4; }
.wd-dx { margin-top: 10px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.wd-dx:empty { display: none; }
.wd-dk { display: flex; align-items: center; gap: 7px; margin: 0; font: 600 12.5px/1.4 var(--f-b); color: var(--muted); }
.wd-dx h3 { margin: 6px 0 2px; font: 600 18px/1.35 var(--f-d); }
.wd-dt { margin: 0 0 10px; font: 400 13.5px/1.5 var(--f-b); color: var(--text2); }
.wd-dx h4 { margin: 16px 0 6px; font: 600 15px/1.35 var(--f-d); color: var(--text2); }
.wd-steps { margin: 0; padding: 0; list-style: none; }
.wd-steps li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.wd-steps li:first-child { border-top: 0; padding-top: 2px; }
.wd-sn { flex: none; align-self: flex-start; min-width: 34px; padding: 3px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tile-orange) 85%, #000); color: #fff; text-align: center; font: 600 12px/1.3 var(--f-m); white-space: nowrap; }
.wd-steps p, .wd-brief li { margin: 0; font: 400 14px/1.6 var(--f-b); color: var(--text); }
.wd-brief { margin: 0; padding-left: 22px; }
.wd-links { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-links button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface2); color: var(--text); font: 500 13px/1.4 var(--f-b); cursor: pointer; }
.wd-links button:hover { border-color: var(--sky); }
.wd-links svg { width: 22px; height: 8px; flex: none; }
.wd-links small { font: 400 12px/1.4 var(--f-b); color: var(--muted); }
.wd-hint { margin: 8px 0 0; font: 400 12.5px/1.5 var(--f-b); color: var(--muted); }
@media (min-width: 1024px) {
  .wd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
  .wd-dx { position: sticky; top: calc(var(--head-h) + 24px); margin-top: 0; max-height: calc(100vh - var(--head-h) - 48px); overflow: auto; }
}
.pap-flow { margin: 0; padding: 0; list-style: none; }
.pap-flow li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.pap-flow li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.pap-flow li:last-child::before { display: none; }
.pap-st { position: relative; display: grid; place-items: center; flex: none; align-self: flex-start; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; white-space: nowrap; background: var(--tile-orange); color: #fff; font: 600 13px/1 var(--f-m); }
.pap-flow b { font: 600 14.5px/1.4 var(--f-d); }
.pap-flow p { margin: 3px 0 0; line-height: 1.55; color: var(--text2); }
.pap-t { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface2); font: 500 12px/1.3 var(--f-m); color: var(--warn); }
.pap-t .ic { width: 12px; height: 12px; }
.pap-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.pap-role { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface2); }
.pap-role h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 14.5px/1.35 var(--f-d); }
.pap-vest { flex: none; width: 14px; height: 18px; border-radius: 3px 3px 5px 5px; background: var(--v); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); }
.pap-vt { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.pap-role ul { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; }
.pap-role li { margin: 3px 0; line-height: 1.5; }
.pap-photos { columns: 2 220px; column-gap: 24px; }
.pap-photos li { break-inside: avoid; }
.pap-tri { display: grid; gap: 6px; }
.pap-tri > div { display: flex; align-items: baseline; gap: 10px; }
.pap-tri i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--v); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25); transform: translateY(1px); }
.pap-tri b { flex: none; min-width: 60px; }
.pap-tri span { color: var(--text2); }
.pap-tb { width: 100%; border-collapse: collapse; font-size: 14px; }
.pap-tb th, .pap-tb td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.pap-tb th { width: 55%; font-weight: 500; color: var(--text2); }
.pap-dl dt { margin-top: 10px; font-weight: 600; }
.pap-dl dd { margin: 2px 0 0; color: var(--text2); line-height: 1.55; }
.pap-form { display: grid; gap: 10px; }
.pap-form label { display: grid; gap: 4px; font-size: 13.5px; color: var(--text2); }
.pap-form input, .pap-form select, .pap-form textarea { width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); font: inherit; font-size: 15px; }
.pap-form textarea { resize: vertical; }
.pap-form :focus { border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px var(--sky-d); }
.pap-fb { display: flex; gap: 8px; flex-wrap: wrap; }
.pap-fb .btn .ic { width: 17px; height: 17px; }
.btn.ghost { background: transparent; color: var(--text2); box-shadow: inset 0 0 0 1px var(--line); }
.btn.sm { min-height: 30px; padding: 4px 10px; font-size: var(--fs-sm); }
.pap-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
@media (min-width: 760px) { .pap-form { grid-template-columns: 1fr 1fr; } .pap-form label:has(textarea), .pap-fb, .pap-form .pap-note { grid-column: 1 / -1; } }

/* ตารางการซ้อมรายเดือน */
.pap-grid-w { margin-bottom: 20px; }
.pap-gscroll { overflow-x: auto; margin: 0 -2px; padding: 2px; }
.pap-grid { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 3px; font: 500 12px/1 var(--f-m); }
.pap-grid th { padding: 4px 2px; color: var(--muted); font-weight: 500; line-height: 1.4; text-align: center; white-space: nowrap; }
.pap-grid tbody th { color: var(--text2); text-align: right; padding-right: 6px; }
.pap-grid td { padding: 0; }
.pap-grid td button { position: relative; display: block; width: 100%; height: 32px; border: 0; border-radius: 6px; background: var(--surface2); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.pap-grid td.ok button { background: var(--ok); }
.pap-grid td.tt button { background: transparent; box-shadow: inset 0 0 0 2px var(--ok); color: var(--ok); }
.pap-grid td.pl button { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.pap-grid td.fu button { background: transparent; opacity: .35; box-shadow: inset 0 0 0 1px var(--line); }
.pap-grid td button i { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--surface); }
.pap-grid td button:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.pap-grid td.sum { padding: 0 6px; color: var(--muted); text-align: center; white-space: nowrap; }
.pap-grid td.sum.good { color: var(--ok); }
.pap-grid td.sum .ic { width: 15px; height: 15px; }
.pap-grid td.sum.rp { color: var(--sky); }
.pap-grid td button u { position: absolute; left: 50%; bottom: 3px; width: 12px; height: 2.5px; margin-left: -6px; border-radius: 2px; background: var(--sky); box-shadow: 0 0 0 1px var(--surface); }
.pap-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 12.5px; color: var(--text2); }
.pap-leg .lg { font-style: normal; white-space: nowrap; }
.pap-leg span { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.pap-leg .ok { background: var(--ok); }
.pap-leg .o { border-radius: 50%; width: 8px; height: 8px; background: var(--gold); }
.pap-leg .tt { box-shadow: inset 0 0 0 2px var(--ok); }
.pap-leg .pl { box-shadow: inset 0 0 0 1.5px var(--muted); }
.pap-leg .no { background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); }
.pap-leg .rp { width: 12px; height: 3px; border-radius: 2px; background: var(--sky); vertical-align: 3px; }
.pap-fy { margin-bottom: 14px; }

/* รายการการซ้อม */
.pap-dl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pap-dc details { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.pap-dc summary { display: flex; align-items: flex-start; gap: 12px; padding: 12px; list-style: none; cursor: pointer; }
.pap-dc details.flat summary { cursor: default; }
.pap-dc summary::-webkit-details-marker { display: none; }
.pap-dd { flex: none; width: 66px; }
.pap-dd b { display: block; font: 600 14px/1.4 var(--f-d); }
.view.pap b { font-weight: 600; } /* กัน b{bolder} ดัน 600 เป็น 900 */
.pap-dd small { font: 500 12px/1.4 var(--f-m); color: var(--muted); }
.pap-db { flex: 1; min-width: 0; display: grid; gap: 5px; }
.pap-dt { font-weight: 500; line-height: 1.45; }
.pap-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pap-tags span { padding: 2px 7px; border-radius: 6px; background: var(--surface2); font-size: 12px; color: var(--text2); }
.pap-tags .l-out { color: var(--gold); }
.pap-tags .s-planned, .pap-tags .s-postponed { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.pap-pl { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pap-pl .ic { width: 13px; height: 13px; }
.pap-dx { padding: 0 12px 12px 90px; font-size: 14px; line-height: 1.55; }
.pap-dx p { margin: 6px 0 0; }
.pap-dx ul { margin: 4px 0 0; padding-left: 18px; }
.pap-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 10px; }
.pap-imgs a { display: block; border-radius: var(--r); overflow: hidden; }
.pap-imgs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--surface2); }
.pap-tags .pap-ph { display: inline-flex; align-items: center; gap: 3px; color: var(--tile-orange); }
.pap-tags .pap-ph .ic { width: 13px; height: 13px; }
.pap-tags .pap-rp { display: inline-flex; align-items: center; gap: 3px; color: var(--sky); }
.pap-tags .pap-rp .ic { width: 13px; height: 13px; }
@media (max-width: 560px) { .pap-dx { padding-left: 12px; } .pap-dd { width: 56px; } }

/* วางแผนซ้อม */
.pap-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 18px; }
.pap-kpis > div { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.pap-kpis small { display: block; font-size: var(--fs-xs); line-height: var(--kpi-lab-lh); color: var(--muted); }
.pap-kpis b { display: block; margin: 4px 0; font: var(--kpi-w) var(--fs-kpi-s)/1.4 var(--f-b); font-variant-numeric: tabular-nums; }
.pap-kpis span { font-size: var(--fs-sm); color: var(--text2); }
.pap-sec2 { margin-bottom: 20px; }
/* มือถือ: คำอธิบายใต้หัวข้อขึ้นบรรทัดใหม่ ไม่เบียดหัวข้อเป็นสองคอลัมน์ */
@media (max-width: 560px) {
  .pap-sec2 .sec-h, #pap-g-h { flex-wrap: wrap; }
  .pap-sec2 .sec-h > span, #pap-g-h > span { flex-basis: 100%; margin-left: 0; }
}
.pap-scn { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.pap-scn li { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.pap-scn li:first-child { border-top: 0; }
.pap-scn span { flex: 1; line-height: 1.45; }
.pap-scn b { flex: none; font: 600 13px/1.4 var(--f-m); color: var(--ok); }
.pap-scn li.zero b { color: var(--bad); }
.pap-scn small { flex: none; min-width: 84px; text-align: right; font-size: 12px; color: var(--muted); }
/* ข้อเน้นย้ำจากการซ้อม: การ์ดต่อเรื่อง เรื่องที่พบซ้ำหลายปีงบมีแถบซ้ายสีส้ม */
.pap-lsn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pap-lsn-i { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.pap-lsn-i.rep { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.pap-lsn-h { display: flex; align-items: flex-start; gap: 10px; }
.pap-lsn-h h3 { flex: 1; margin: 0; font: 600 16px/1.35 var(--f-d); color: var(--text); }
.pap-lsn-n { flex: none; margin-top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface2); font: 600 13px/1 var(--f-m); color: var(--text2); }
.pap-lsn-n:empty { display: none; }
.rep .pap-lsn-n { background: var(--warn-d); color: var(--warn); }
.pap-lsn-b { flex: none; padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); font: 500 12px/1.4 var(--f-b); font-variant-numeric: tabular-nums; color: var(--muted); }
.rep .pap-lsn-b { border-color: var(--warn); background: var(--warn-d); color: var(--warn); }
.pap-lsn-do { margin: 0; font: 500 15px/1.65 var(--f-b); color: var(--text); }
.pap-lsn-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pap-lsn-fy { display: flex; flex-wrap: wrap; gap: 2px; }
.pap-lsn-fy span { min-width: 21px; padding: 2px 0; border-radius: var(--r-s); text-align: center; font: 500 11px/1.3 var(--f-m); color: var(--muted); background: var(--surface2); opacity: .55; }
.pap-lsn-fy span.on { opacity: 1; background: var(--warn-d); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); }
.pap-lsn-i details { border-top: 1px solid var(--line); margin-top: auto; }
.pap-lsn-i summary { padding: 12px 0; cursor: pointer; font: 500 13px/1.5 var(--f-b); font-variant-numeric: tabular-nums; color: var(--text2); }
.pap-lsn-i details ul { margin: 8px 0 0; padding: 0; list-style: none; }
.pap-lsn-i details li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line); }
.pap-lsn-i details li:first-child { border-top: 0; }
.pap-lsn-d { flex: none; width: 76px; font: 500 12px/1.6 var(--f-b); font-variant-numeric: tabular-nums; color: var(--muted); }
.pap-lsn-i details li div { flex: 1; }
.pap-lsn-i details p { margin: 0 0 4px; font: 400 14px/1.6 var(--f-b); color: var(--text2); }
.pap-lsn-i details p:last-child { margin-bottom: 0; }

/* ── แถบผังพิจารณาประเภทรายงาน (หัวหน้าประวัติเหตุ) · คู่มือการสอบสวน อ.อุบัติเหตุ หน้า ๔ ข้อ ๕ ── */
/* สี 4 ผลลัพธ์ตามผังต้นฉบับ แดง/ส้ม/เหลือง/ม่วง ใช้เป็นจุดสี ขอบ และพื้นจาง ตัวอักษรเป็น --text เสมอ (ชื่อประเภทเป็นคำทุกครั้ง)
   เส้นต่อ (--fl-w) วาดด้วย ::before เป็นเส้น + ::after เป็นหัวลูกศร · ผังเปลี่ยนรูปตามความกว้างของแถบเอง (container fl) ไม่ใช่ความกว้างจอ
   ≥860 สองสายคู่กันมีราวแยกทาง · 520–859 สายเดียว ลูกศร "ใช่" แนวนอน · <520 ลูกศร "ใช่" และ "ไม่ใช่" แนวตั้งคนละช่อง */
:root, :root[data-theme="night"] { --fl-acc: #ff6b6b; --fl-ser: #f4a259; --fl-inc: #f2d24b; --fl-haz: #b993ff; --fl-w: #7cc4ff; }
:root[data-theme="day"] { --fl-acc: #c62828; --fl-ser: #d9730d; --fl-inc: #b89200; --fl-haz: #6d3fc0; --fl-w: #2f6db5; }
.h-flow { margin: 14px 0 0; container: fl / inline-size; border: 1px solid color-mix(in srgb, var(--fl-w) 45%, var(--line2)); border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fl-w) 9%, var(--surface)), var(--surface)); overflow: hidden; }
.hv-top > .h-flow { grid-column: 1 / -1; }
.h-flow > summary { list-style: none; cursor: pointer; min-height: 56px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.h-flow > summary::-webkit-details-marker { display: none; }
.h-flow > summary > .ic { flex: none; width: 22px; height: 22px; color: var(--fl-w); }
.fl-sum { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.fl-sum > b { font: 600 16px/1.4 var(--f-d); color: var(--text); }
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-hint { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--fl-w) 55%, transparent); color: var(--fl-w); font: 600 13px/1.4 var(--f-b); }
.fl-hint .o, .h-flow[open] .fl-hint .c { display: none; }
.h-flow[open] .fl-hint .o { display: inline; }
.fl-cv { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.h-flow[open] .fl-cv { transform: rotate(180deg); }
.fl-out { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: var(--r-pill);
  font: 600 13px/1.4 var(--f-b); color: var(--text); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.fl-out > i, .fl-node > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
:is(.fl-out, .fl-node).acc { --c: var(--fl-acc); } :is(.fl-out, .fl-node).ser { --c: var(--fl-ser); }
:is(.fl-out, .fl-node).inc { --c: var(--fl-inc); } :is(.fl-out, .fl-node).haz { --c: var(--fl-haz); }

/* ผืนผัง: ตารางจุดจาง ๆ แบบกระดาษผังวงจร */
.fl-body { padding: 18px 16px 16px; display: grid; border-top: 1px solid var(--line);
  background: radial-gradient(circle, color-mix(in srgb, var(--text2) 22%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--surface); }

/* เส้นต่อ — ค่าเริ่มแนวตั้ง หัวลูกศรชี้ลง */
.fl-wire { position: relative; display: grid; place-items: center; min-height: 34px; min-width: 24px; }
.fl-wire::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 6px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fl-w); }
.fl-wire::after { content: ''; position: absolute; left: 50%; bottom: 0; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top: 7px solid var(--fl-w); }
.fl-lb { position: relative; z-index: 1; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--fl-w); background: var(--surface);
  font: 600 12px/1.5 var(--f-b); color: var(--text); white-space: nowrap; }

/* จุดเริ่ม → คำถามแยกทาง */
.fl-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fl-start { padding: 6px 16px; border-radius: var(--r-pill); border: 2px solid var(--text2); background: var(--surface2); font: 600 14px/1.5 var(--f-b); color: var(--text); }
.fl-dec { position: relative; max-width: 30em; padding: 10px 18px 10px 34px; border-radius: 10px; border: 2px solid var(--fl-w); background: var(--surface2);
  font: 600 15px/1.5 var(--f-b); color: var(--text); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-w) 14%, transparent); }
.fl-dec::before { content: ''; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -5px; transform: rotate(45deg); border: 2px solid var(--fl-w); }

/* สองสาย */
.fl-cols { --fo: 212px; --g: 28px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.fl-col { min-width: 0; }
.fl-col ol { margin: 0; padding: 0; list-style: none; }
.fl-br { display: flex; flex-direction: column; align-items: center; }
.fl-chip { position: relative; padding: 4px 14px; border-radius: var(--r-pill); background: var(--fl-w); color: var(--surface); font: 600 14px/1.4 var(--f-b); }
.fl-br > .fl-wire { min-height: 26px; }
.fl-col:first-child { margin-top: 22px; }
.fl-col:first-child .fl-chip::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 22px; margin-left: -1px; background: var(--fl-w); }
.fl-col + .fl-col { padding-top: 18px; border-top: 1px dashed var(--line2); }

/* ขั้นเกณฑ์: กล่อง → (ใช่) → ผล · ใต้กล่อง (ไม่ใช่) → กล่องถัดไป */
.fl-step { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.fl-q { grid-column: 1 / -1; padding: 10px 14px; border: 1.5px solid var(--line2); border-radius: 10px; background: var(--surface2);
  font: 400 14px/1.6 var(--f-b); color: var(--text); }
.fl-q b { font-weight: 600; }
.fl-q ul { margin: 4px 0 0; padding-left: 18px; }
.fl-q li { margin: 2px 0; }
.fl-fn { display: block; margin-top: 6px; font: 400 13px/1.5 var(--f-b); color: var(--muted); }
.fl-no { grid-column: 1; grid-row: 2; display: grid; width: 64px; }
.fl-no > .fl-wire { min-height: 100%; }
.fl-yes { grid-column: 2; grid-row: 2; justify-self: end; display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; }
.fl-yes > .fl-wire { min-height: 30px; }
.fl-node { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 18%, var(--surface)); font: 600 14px/1.4 var(--f-b); color: var(--text); }
.fl-node > i { width: 10px; height: 10px; }

/* ผู้สอบสวน */
.fl-inv { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line2); display: grid; gap: 12px; }
.fl-invh { margin: 0; font: 600 14px/1.4 var(--f-b); color: var(--text2); }
.fl-iv { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.fl-ivn { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-iv > .fl-wire { width: 64px; }
.fl-ivt { margin: 0; justify-self: stretch; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--line2); background: var(--surface2);
  font: 400 14px/1.6 var(--f-b); color: var(--text); }
.fl-ivt b { font-weight: 600; }
.fl-ref { margin: 16px 0 0; }
.fl-ref a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--sky); }

/* ลูกศรแนวนอน (ใช่ → ผล, ผล → ผู้สอบสวน) เมื่อแถบกว้าง ≥520 */
@container fl (min-width: 520px) {
  .fl-step { grid-template-columns: minmax(0, 1fr) var(--fo); align-items: center; }
  .fl-q { grid-column: 1; grid-row: 1; }
  .fl-yes { grid-column: 2; grid-row: 1; justify-self: stretch; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; padding: 0; }
  .fl-no { grid-column: 1; width: auto; }
  .fl-no > .fl-wire { min-height: 40px; }
  .fl-br { width: calc(100% - var(--fo)); }
  .fl-x { min-height: 30px; }
  .fl-x::before { left: 0; right: 6px; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; }
  .fl-x::after { left: auto; right: 0; top: 50%; bottom: auto; margin: -6px 0 0; border: 6px solid transparent; border-right: 0; border-left: 7px solid var(--fl-w); }
  .fl-x > .fl-lb { transform: translateY(-15px); }
  .fl-iv { grid-template-columns: 172px 58px minmax(0, 1fr); align-items: center; }
  .fl-ivn { flex-direction: column; align-items: stretch; }
  .fl-iv > .fl-wire { width: auto; }
}
/* สองสายคู่กัน: คำถาม ─┬─ ราวแยกทางไปกลางช่องกล่องเกณฑ์ของแต่ละสาย */
@container fl (min-width: 860px) {
  .fl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--g); padding-top: 22px; }
  .fl-cols::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; margin-left: -1px; background: var(--fl-w); }
  .fl-cols::after { content: ''; position: absolute; top: 20px; height: 2px; border-radius: 1px; background: var(--fl-w);
    left: calc((50% - var(--g) / 2 - var(--fo)) / 2); width: calc(50% + var(--g) / 2); }
  .fl-col:first-child { margin-top: 0; }
  .fl-col + .fl-col { padding-top: 0; border-top: 0; }
  .fl-col .fl-chip::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 14px; margin-left: -1px; background: var(--fl-w); }
  .fl-br { padding-top: 14px; }
}
@media (max-width: 639px) {
  .hv-top > .h-flow { margin-bottom: 10px; }
  .h-flow > summary { align-items: flex-start; flex-wrap: wrap; }
  .fl-hint { margin-left: 34px; }
}

/* ── คลิปบทเรียน (#/clips) ──────────────────────────────────
   แดชบอร์ด: ตัวเลขรวม + ปุ่ม "ดูต่อ" · แถบหมวด (มือถือ = ชิปเลื่อนแนวนอน / ≥1024px = แผงซ้ายติดจอ) · ตารางภาพปก
   กดภาพปกเปิดหน้าต่างเล่น (มือถือเต็มจอ / ≥760px กล่องกลางจอ คลิปซ้าย ข้อมูลขวา) — DECISIONS.md หัวข้อ "คลิปบทเรียน" */
.view.clips b { font-weight: 600; } /* กัน b{bolder} ดัน 600 เป็น 900 */
.cl-bar { position: relative; display: block; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.cl-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--gold); }

/* ภาพรวม */
.cl-top { display: grid; gap: 12px; margin-bottom: 24px; }
.stats.cl-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-kpi b small { margin-left: 2px; font-size: .6em; font-weight: 500; color: var(--muted); }
.cl-kpi .cl-bar { margin-top: 8px; }
.cl-next { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px;
  border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); text-align: left; transition: border-color var(--t-fast), transform .1s; }
.cl-next:hover { border-color: var(--gold); }
.cl-next:active { transform: scale(.99); }
.cl-nimg { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #0b1220; }
.cl-nimg img, .cl-pv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 39%; } /* ข้ามแถบชิปบนปก เริ่มที่ชื่อตอน */
.cl-ntx { display: grid; gap: 2px; min-width: 0; }
.cl-nk { font: 600 12.5px/1.4 var(--f-m); color: var(--gold); }
.cl-nt { font: 600 17px/1.35 var(--f-d); }
.cl-ns { font-size: 13px; line-height: 1.4; color: var(--muted); }
.cl-ngo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--on-pri); }
.cl-ngo .ic { width: 20px; height: 20px; }
.cl-alldone { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); font-size: 14.5px; color: var(--text2); }
.cl-alldone .ic { flex: none; width: 20px; height: 20px; color: var(--gold); }

/* แถบหมวด — มือถือ: ชิปเลื่อนแนวนอนชนขอบจอ */
.cl-nav { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px 8px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
.cl-nav::-webkit-scrollbar { display: none; }
.cl-nv { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; white-space: nowrap;
  border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface); font-size: var(--fs-ui); line-height: 1.4; text-align: left;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.cl-nv .nm, .cl-nv .cl-bar { display: none; }
.cl-nv b.cn { font: 600 var(--fs-2xs)/1 var(--f-m); color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-nv[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.cl-nv[aria-pressed="true"] b.cn { color: inherit; opacity: .75; }
.cl-nv.ser:not(:first-child) { margin-left: 8px; }

/* ด้านของคลิป (การบิน · ภาคพื้น · ความรู้ทั่วไป) — DECISIONS 4 พ.ย. 2569 แบบ B
   สีประจำด้านใช้ซ้ำในหน้าหลัก: การบิน = ทอง/กรมท่า · ภาคพื้น = เหลือง/ดำแถบเตือนภัย · ทั่วไป = เทา */
.cl-dom { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
.cl-dom::-webkit-scrollbar { display: none; }
.cl-dm { flex: none; white-space: nowrap; }
.cl-dm i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.cl-dm.d-all i { display: none; }
.cl-dm.d-flight i { background: #f2c66d; box-shadow: inset 0 0 0 1px #a8720c; }
.cl-dm.d-ground i { background: repeating-linear-gradient(-45deg, #EF9F27 0 3px, #2C2C2A 3px 6px); }
.cl-dm.d-general i { background: #8a93a3; }
.cl-dmb { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 4px; background: #8a93a3; }
.d-flight .cl-dmb { background: #f2c66d; }
.d-ground .cl-dmb { height: 6px; background: repeating-linear-gradient(-45deg, #EF9F27 0 6px, #2C2C2A 6px 12px); }

.cl-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.cl-tools .h-q { flex: 1; min-width: 0; margin: 0; }
.cl-uns { flex: none; }

/* รายการ */
.cl-sec + .cl-sec { margin-top: 44px; }
.cl-sh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 600 20px/1.3 var(--f-d); }
.cl-n { font: 500 13px/1.4 var(--f-m); color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-sl { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.cl-th { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 12px; font: 600 15.5px/1.4 var(--f-d); color: var(--text2); }
.cl-found { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.cl-found b { color: var(--text); font-variant-numeric: tabular-nums; }
.cl-empty { margin: 0; padding: 28px 16px; border: 1px dashed var(--line2); border-radius: var(--r-l); text-align: center; font-size: 14.5px; color: var(--muted); }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
.cl-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; border-radius: var(--r-l); }
.cl-tile:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.cl-pv { position: relative; display: block; aspect-ratio: 4 / 5; margin-bottom: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-l); background: #0b1220; transition: transform .1s; }
.cl-pv img { transition: transform var(--t-slow) ease; }
.cl-tile:hover .cl-pv img { transform: scale(1.04); }
.cl-tile:active .cl-pv { transform: scale(.98); }
.cl-epb, .cl-durb { position: absolute; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgb(0 0 0 / .66); color: #fff; font: 600 12px/1.4 var(--f-m); font-variant-numeric: tabular-nums; }
.cl-epb { left: 8px; }
.cl-durb { right: 8px; }
.cl-epb .ic, .cl-durb .ic { width: 12px; height: 12px; }
.cl-epb .ic { display: none; stroke-width: 3; }
.is-seen .cl-epb { background: var(--gold); color: var(--on-pri); }
.is-seen .cl-epb .ic { display: inline-block; }
/* ตอนต้นแบบ (draft) — ป้ายเหนือเลขตอน (มุมบนทับชื่อตอนบนปก) + กรอบเส้นประ */
.cl-drb { position: absolute; bottom: 36px; left: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--gold); color: var(--on-pri); font: 600 11.5px/1.4 var(--f-b); letter-spacing: .01em; }
.is-draft .cl-pv { border-style: dashed; border-color: var(--gold); }
.cl-tt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 15px/1.35 var(--f-d); }
.cl-ts { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* หน้าต่างเล่น — มือถือเต็มจอ คลิปเต็มความสูงที่เหลือ ข้อมูลเลื่อนอ่านต่อด้านล่าง */
.cl-dlg { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); }
.cl-dlg[open] { display: flex; flex-direction: column; }
.cl-dlg::backdrop { background: rgb(2 6 23 / .75); }
.cl-dbar { flex: none; display: flex; align-items: center; gap: 2px; padding: max(6px, env(safe-area-inset-top)) 8px 6px 16px; border-bottom: 1px solid var(--line); }
.cl-dbar .btn { border-color: transparent; background: transparent; }
.cl-dbar .btn:hover:not(:disabled) { background: var(--surface2); }
/* ปุ่มส่งต่อบนแถบหัว — สีหลัก เด่นกว่าปุ่มไอคอนข้าง ๆ */
.cl-dsend:empty { display: none; }
.cl-dbar .cl-dsb { min-height: 40px; margin-right: 6px; padding: 0 14px 0 11px; gap: 6px; border-color: var(--gold); border-radius: var(--r-pill); background: var(--gold); color: var(--on-pri); font: 600 14px/1.4 var(--f-b); white-space: nowrap; text-decoration: none; }
.cl-dbar .cl-dsb:hover:not(:disabled) { background: var(--gold); filter: brightness(1.06); }
.cl-dk { flex: 1; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--text2); }
.cl-dk b { font: 600 13.5px/1.4 var(--f-m); color: var(--gold); }
.cl-dk span { margin-left: 6px; font: 500 12px/1.4 var(--f-m); color: var(--muted); }
.cl-dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.cl-card { display: grid; gap: 18px; }
.cl-frame { width: min(100%, 420px, calc((100svh - 96px) * 9 / 16)); aspect-ratio: 9 / 16; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #000; }
.cl-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cl-meta { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cl-h { margin: 0; font: 600 22px/1.3 var(--f-d); }
.cl-sub { margin: -8px 0 0; font-size: 15px; color: var(--text2); }
.cl-dur { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface2); color: var(--muted); font: 500 12px/1.5 var(--f-m); white-space: nowrap; vertical-align: 1px; }
.cl-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cl-pts li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 14.5px; line-height: 1.4; }
.cl-pts li b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--gold); color: var(--on-pri); font: 700 16px/1 var(--f-m); }
.cl-voice { justify-self: start; }
.cl-voice button { min-width: 112px; }
.cl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-acts .btn { flex: 1 1 150px; }
.cl-acts .cl-share { flex-basis: 100%; min-height: 52px; gap: 8px; font-size: 16px; text-decoration: none; }
.cl-lnh { margin: -4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.cl-drn { margin: 0; padding: 10px 12px; border: 1px dashed var(--gold); border-radius: var(--r); font-size: 13.5px; line-height: 1.55; color: var(--text2); }
.cl-drn b { margin-right: 6px; color: var(--gold); }
.cl-msg { margin: 0; font-size: 13.5px; color: var(--sky); }
.cl-msg:empty { display: none; }
.cl-src { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted); }

@media (min-width: 560px) {
  .stats.cl-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .cl-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 22px 16px; }
  .cl-dlg { width: min(94vw, 980px); height: auto; max-height: 92vh; margin: auto; border: 1px solid var(--line2); border-radius: var(--r-l); background: var(--surface); }
  .cl-dbar { padding: 8px 10px 8px 22px; }
  .cl-dbody { padding: 22px 26px 26px; }
  .cl-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 28px; }
  .cl-frame { width: min(380px, calc((92vh - 120px) * 9 / 16)); margin: 0; }
  .cl-h { font-size: 26px; }
}
/* จอคอมฯ: แผงหมวดซ้ายติดจอ ชื่อเต็ม + แถบดูแล้วต่อหมวด */
@media (min-width: 1024px) {
  main > .view.clips:not(#_) { max-width: none; } /* ใช้เต็มความกว้าง main เหมือนหน้าหลัก ไม่บีบ 760px แบบหน้าคอลัมน์เดียว */
  .cl-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
  .cl-nav { position: sticky; top: 24px; flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .cl-nv { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; min-height: 44px; padding: 9px 12px;
    border-color: transparent; background: transparent; white-space: normal; font-size: 14.5px; }
  .cl-nv:hover { background: var(--surface); }
  .cl-nv .nm, .cl-nv .cl-bar { display: block; }
  .cl-nv .sh { display: none; }
  .cl-nv .cl-bar { grid-column: 1 / -1; height: 3px; }
  .cl-nv.ser { margin-top: 14px; font: 600 16px/1.35 var(--f-d); }
  .cl-nv.ser:not(:first-child) { margin-left: 0; }
  .cl-nv.sub { padding-left: 24px; color: var(--text2); }
  .cl-nv[aria-pressed="true"] { background: var(--surface2); border-color: var(--line2); color: var(--text); }
  .cl-nv[aria-pressed="true"] b.cn { color: var(--gold); opacity: 1; }
}
@media (min-width: 1280px) {
  .cl-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  .cl-next { height: 100%; grid-template-columns: 72px minmax(0, 1fr) auto; padding: 12px 18px 12px 12px; }
}
@media (min-width: 1440px) {
  .cl-wrap { grid-template-columns: 270px minmax(0, 1fr); gap: 40px; }
  .cl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 18px; }
}

/* อันตรายประจำพื้นที่ · ORM · SPI (ops.js) — ใช้โครง .pap-* ร่วม เพิ่มเฉพาะระดับความเสี่ยง ปฏิทินเดือน และการ์ด */
.ops .pap-ic.ops-ic { color: var(--sky); }
.ops-h2 { margin: 22px 0 10px; font: 600 var(--fs-lg)/1.35 var(--f-d); }
.ops-p { margin: 0 0 10px; line-height: 1.6; }
.ops-sub { margin: 10px 0 4px; font: 600 var(--fs-sm)/1.4 var(--f-d); color: var(--text2); }
.ops-src { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.ops-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ops-tag, .ops-alt { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text2); }
.ops-alt .ic { width: 14px; height: 14px; }
.ops-chips { margin: 0 0 14px; }
.ops-chips .chip .n { font: 500 var(--fs-2xs)/1 var(--f-m); color: var(--muted); }
.ops-own { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* ระดับความเสี่ยง 1 ต่ำ · 2 ปานกลาง · 3 สูง · 4 สูงมาก */
.ops-rk { display: inline-flex; align-items: center; min-height: 22px; margin-left: 8px; padding: 1px 9px; border-radius: var(--r-pill); font: 600 var(--fs-2xs)/1.3 var(--f-b); vertical-align: middle; border: 1px solid currentColor; }
.rk-0 { color: var(--muted); }
.rk-1 { color: var(--ok); }
.rk-2 { color: var(--warn); }
.rk-3 { color: var(--bad); }
.rk-4 { color: #fff; background: var(--bad); border-color: var(--bad); }
.ops-hz { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; margin-bottom: 14px; }
.ops-hz article, .ops-spi article { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.ops-hz h3, .ops-spi h3 { margin: 0 0 6px; font: 600 var(--fs-ui)/1.4 var(--f-d); }
.ops-hz p, .ops-spi p { margin: 0 0 6px; font-size: var(--fs-md); line-height: 1.55; color: var(--text2); }
.ops-res { margin-top: 8px !important; font-size: var(--fs-sm) !important; }
.ops-spi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-bottom: 8px; }
.ops-spi dl { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.ops-spi dt { font-size: var(--fs-2xs); color: var(--muted); }
.ops-spi dd { margin: 0; font: 600 var(--fs-md)/1.3 var(--f-b); font-variant-numeric: tabular-nums; }
.ops-tw { overflow-x: auto; }
.ops-tb { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ops-tb th, .ops-tb td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ops-tb th:first-child { text-align: left; }
.ops-tb thead th { color: var(--muted); font-weight: 600; }
.ops-tb [title] { cursor: help; }
/* กล่องคำอธิบาย · คู่ค่า dt/dd · รหัสตามแฟ้ม (ไม่แปลงเป็นสี) */
.ops-co { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); font-size: var(--fs-sm); line-height: 1.6; color: var(--text2); }
.ops-co .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
.ops-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 16px; margin: 8px 0 10px; }
.ops-dl dt { font-size: var(--fs-2xs); color: var(--muted); }
.ops-dl dd { margin: 0; font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.ops-code { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface2); font: 600 var(--fs-xs)/1.4 var(--f-m); color: var(--text); }
.ops-hz .ops-rr { font-size: var(--fs-sm); }
.ops-rr small { color: var(--muted); }
.ops-no { display: inline-block; min-width: 1.6em; margin-right: 6px; font: 600 var(--fs-xs)/1.4 var(--f-m); color: var(--muted); }
.ops-na, .ops-hz p.ops-na { color: var(--muted); font-style: italic; }
.ops-lv { list-style: none; margin: 0 0 10px; padding: 0; }
.ops-lv li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ops-lv .ops-rk { margin-left: 0; }
.ops-lv li > span { font: 600 var(--fs-sm)/1.3 var(--f-m); color: var(--text2); }
.ops-lv li > p { flex-basis: 100%; margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--text2); }
.ops-h3 { margin: 14px 0 6px; font: 600 var(--fs-md)/1.4 var(--f-d); }
.ops-mhead { margin: 0 0 12px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.ops-mhead .ops-h2 { margin-top: 6px; }
/* ปฏิทินนก: แถวหัวเดือน + แถวละช่วงเฝ้าระวัง (ช่องทึบ = เดือนที่เข้าข่าย) + แถวนกชน (ตัวเลข สีเข้มตามจำนวน) */
.ops-calwrap { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.ops-calrow p { margin: 0 0 4px; font-size: var(--fs-sm); line-height: 1.5; }
.ops-calrow p b { font: 600 var(--fs-sm)/1.4 var(--f-d); }
.ops-calrow p span { color: var(--muted); font-size: var(--fs-xs); }
.ops-cal, .ops-mon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.ops-mon { gap: 4px; margin-bottom: 12px; }
.ops-cal i { display: grid; place-items: center; height: 18px; border-radius: 4px; background: var(--surface2); font: 600 10px/1 var(--f-b); font-style: normal; font-variant-numeric: tabular-nums; color: var(--text); }
.ops-cal i.hd { height: auto; padding: 2px 0; background: none; font: 600 var(--fs-2xs)/1.2 var(--f-d); color: var(--muted); }
.ops-cal i.on { background: color-mix(in srgb, var(--warn) 85%, var(--surface)); }
.ops-cal i.n.lv-1 { background: color-mix(in srgb, var(--bad) 35%, var(--surface)); }
.ops-cal i.n.lv-2 { background: color-mix(in srgb, var(--bad) 62%, var(--surface)); }
.ops-cal i.n.lv-3 { background: var(--bad); color: var(--bg); }
.ops-cal i.hd.now { color: var(--gold); }
.ops-cal i.now:not(.hd), .ops-mon .now { box-shadow: inset 0 0 0 2px var(--gold); }
.ops-proc > li > .pap-num { margin-top: 6px; }
/* ที่มาท้ายรายการยาวได้หลายเอกสาร ให้ตัดบรรทัด (.pap-p เดิม nowrap สำหรับเลขหน้า) */
.pap-p.ops-ref { white-space: normal; }
.ops-mon button { position: relative; min-height: 48px; padding: 4px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: 600 var(--fs-xs)/1.2 var(--f-d); cursor: pointer; }
.ops-mon button.no { color: var(--muted); }
.ops-mon button[aria-pressed="true"] { background: var(--surface2); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.ops-mon button i { display: block; margin-top: 2px; font: 500 10px/1 var(--f-b); font-style: normal; color: var(--gold); }
.ops-spl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-sp { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ops-sp p { margin: 4px 0 0; font-size: var(--fs-md); color: var(--text2); }
@media (max-width: 640px) {
  .ops-mon { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ops-calwrap { padding: 10px 8px; }
  .ops-cal { gap: 2px; }
}