/* css/shell.css · โครงหน้าทั้ง 7 layout (lane U1 · 4-design/app-redesign · DESIGN-TOKENS.md §5–§6 · §8)
   workbench · inbox = แถบเมนูซ้าย (.sb) · ledger · board = แถบบน (.tb) + เมนูโมดูล · command = รางไอคอน (.ir)
   portal (พนักงาน) · public (ไม่ต้องล็อกอิน · หน้าเข้าสู่ระบบสองแผง) · หน้าต่างเกี่ยวกับระบบ / ช่วยเหลือเริ่มต้น
   สีจากตัวแปรเท่านั้น · ระยะเป็นจังหวะ 4/8 · ข้อความไทยไม่ถ่างตัวอักษร · ไม่มี overflow:hidden บนข้อความไทยบรรทัดแคบ */

/* ── ทางลัดแป้นพิมพ์ (มองเห็นเมื่อได้โฟกัส) ── */
.skips { position: absolute; left: 0; top: 0; z-index: 60; }
.skip { position: absolute; left: -999px; top: 0; white-space: nowrap; }
.skip:focus { left: 8px; top: 8px; background: var(--surf); color: var(--fg); padding: 8px 12px; border-radius: var(--r-md); border: 2px solid var(--ring); box-shadow: var(--shadow-2); }

/* ══════════ แถบเมนูซ้าย (workbench · inbox) ══════════ */
.wb-shell, .ib-shell { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.wb-shell.has-peek { grid-template-columns: var(--sb-w) minmax(0, 1fr) 360px; }
.sb { position: sticky; top: 0; height: 100vh; height: 100dvh; max-height: none; display: flex; flex-direction: column; gap: 0; padding: 0; background: var(--rail); border-right: 1px solid var(--line); min-width: 0; overflow: visible; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 12px 16px; }
.sb-head .sh-brand { padding: 4px; margin: -4px; border-radius: var(--r-md); }
.sb-head .sh-brand:hover { background: var(--sel); }
.sb-toggle { width: 30px; height: 30px; color: var(--muted); }
.sb-new { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 10px; margin: 0; flex-direction: row; }
.sb-new .sb-main { flex: 1 1 0; justify-content: flex-start; padding: 0 12px; min-width: 0; }
.sb-new .sb-main span { overflow: hidden; text-overflow: ellipsis; padding-block: 2px; }
.sb-new .sb-main kbd { margin-left: auto; background: transparent; color: var(--on-brand); border-color: var(--on-brand); opacity: .9; }
.sb-new .sb-quick { border-color: var(--input); }
.sb-new .sb-more { flex: 1 1 100%; justify-content: flex-start; }
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 10px 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.zone, .wb-zone { font-size: 12px; font-weight: 600; color: var(--muted); padding: 12px 8px 4px; letter-spacing: .02em; }
:lang(th) .zone, :lang(th) .wb-zone { letter-spacing: 0; }
.sb-nav > .zone:first-child { padding-top: 4px; }
.wb-groups, .wb-items { list-style: none; margin: 0; padding: 0; }
.ni { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 8px; border-radius: var(--r-md); color: var(--ink2); text-decoration: none; font-size: 13.5px; font-weight: 400; cursor: pointer; width: 100%; background: transparent; }
.ni:hover { background: var(--sel); color: var(--ink); }
.ni .ico { color: var(--muted); }
.ni-t { flex: 1 1 auto; min-width: 0; line-height: 1.4; padding-block: 3px; }
.ni .count { margin-left: auto; }
.ni .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.ni .count + .chev { margin-left: 6px; }
.ni.on { background: transparent; color: var(--ink); font-weight: 600; }
.ni.on > .ico:first-child { color: var(--fg); }
a.ni[aria-current="page"] { background: var(--soft); color: var(--fg); }
details[open] > summary.ni { color: var(--ink); font-weight: 600; }
details[open] > summary.ni > .ico:first-child { color: var(--fg); }
details[open] > summary.ni .chev { transform: rotate(90deg); }
summary.ni, summary.tn-link, summary.ir-i { list-style: none; }
summary.ni::-webkit-details-marker, summary.tn-link::-webkit-details-marker, summary.ir-i::-webkit-details-marker { display: none; }
summary.ni::after { content: none; }
.sub, .sb .wb-items { margin: 2px 0 6px; padding: 0 0 0 18px; position: relative; }
.sb .wb-items::before { content: ""; position: absolute; left: 17px; top: 2px; bottom: 4px; width: 1px; background: var(--line); }
.si { display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 0 8px 0 18px; border-radius: 7px; color: var(--ink2); text-decoration: none; font-size: 13px; position: relative; }
.si-t { flex: 1 1 auto; min-width: 0; line-height: 1.4; padding-block: 3px; }
.si:hover { background: var(--sel); color: var(--ink); }
.si.on, .si[aria-current="page"] { background: var(--soft); color: var(--fg); font-weight: 600; }
.sb .si[aria-current="page"]::before { content: ""; position: absolute; left: -2px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--brand); }
.si .count { margin-left: auto; }
.sep, .wb-sep { font-size: 12px; color: var(--muted); padding: 8px 8px 2px 18px; }
.wb-items.flat { padding: 0; }
.wb-items.flat::before { content: none; }
.wb-items.flat .si { padding-left: 10px; }
.rail-h { font-size: 12px; font-weight: 600; color: var(--muted); margin: 4px 8px 6px; }
.sb-foot { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-foot .oi { width: 32px; height: 32px; border-radius: 9px; background: var(--surf2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink2); flex: none; }
.sb-foot .org { min-width: 0; flex: 1; }
.sb-foot .org b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.sb-foot .org small { display: block; font: 12px/1.45 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }

/* แถบเมนูแบบย่อ (ปุ่ม "ย่อเมนู" · app.js ตั้ง html[data-sb="rail"] และจำในเครื่อง): สัญลักษณ์อย่างเดียว · byline อยู่ใน aria-label */
@media (min-width: 901px) {
[data-sb="rail"] .wb-shell, [data-sb="rail"] .ib-shell { grid-template-columns: var(--sb-w-rail) minmax(0, 1fr); }
[data-sb="rail"] .wb-shell.has-peek { grid-template-columns: var(--sb-w-rail) minmax(0, 1fr) 360px; }
[data-sb="rail"] .sb-head { flex-direction: column; padding: 14px 0 10px; gap: 10px; }
[data-sb="rail"] .sb .lockup .tx, [data-sb="rail"] .zone, [data-sb="rail"] .sb .wb-items, [data-sb="rail"] .ni .chev, [data-sb="rail"] .ni .count,
[data-sb="rail"] .sb-foot .org, [data-sb="rail"] .sb-main kbd { display: none; }
/* ข้อความของลิงก์ซ่อนแบบที่โปรแกรมอ่านจอยังอ่านได้ (ชื่อของลิงก์ · axe link-name) */
[data-sb="rail"] .ni-t, [data-sb="rail"] .sb-main span, [data-sb="rail"] .sb-more span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-sb="rail"] .sb-new { flex-direction: column; align-items: center; padding: 2px 0 10px; }
[data-sb="rail"] .sb-new .btn { flex: none; width: 40px; padding: 0; justify-content: center; }
[data-sb="rail"] .sb-nav { padding: 4px 12px; }
[data-sb="rail"] .ni { justify-content: center; padding: 0; width: 40px; min-height: 40px; border-radius: 10px; }
[data-sb="rail"] .ni.on { background: var(--soft); }
[data-sb="rail"] .wb-group + .wb-group { margin-top: 2px; }
[data-sb="rail"] .wb-groups + .zone + .wb-groups { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
[data-sb="rail"] .sb-foot { justify-content: center; padding: 10px 0; }
/* กลุ่มที่มีเมนูย่อย: เปิดเป็นป็อปโอเวอร์ข้างราง (app.js ปิดเมื่อคลิกนอก) */
[data-sb="rail"] .sb-nav { overflow: visible; }
[data-sb="rail"] .wb-group { position: relative; }
[data-sb="rail"] .sb details[open] > .wb-items { display: block; position: absolute; left: calc(100% + 10px); top: 0; min-width: 15rem; max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); z-index: 40; }
[data-sb="rail"] .sb details[open] > .wb-items::before { content: none; }
[data-sb="rail"] .sb details[open] > .wb-items .si { padding-left: 10px; }
}

/* ══════════ แถบบน (ทุก layout ที่ล็อกอินแล้ว · สูง 56 · โปร่ง 92% + blur) ══════════ */
.wb-work, .ib-work, .cm-work, .lg-work, .bd-work { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.top { position: sticky; top: 0; z-index: 20; min-height: var(--top-h); display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; padding: 0 20px 0 24px; background: color-mix(in srgb, var(--surf) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; min-width: 0; flex: 0 0 auto; max-width: 40%; }
.crumb b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; padding-block: 4px; }
.crumb .ico { color: var(--muted); }
.top-search { display: flex; align-items: center; gap: 8px; width: 320px; height: var(--ctl-h); border: 1px solid var(--input); border-radius: 9px; padding: 0 6px 0 11px; color: var(--muted); background: var(--surf); margin: 0 0 0 auto; flex: 0 1 320px; min-width: 160px; }
.top-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font-size: 13px; color: var(--ink); padding: 0; height: 100%; }
.top-search input::placeholder { color: var(--muted); }
.top-search input::-webkit-search-cancel-button { display: none; }
.top-search:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; }
.top-r { display: flex; align-items: center; gap: 6px; flex: none; }
.crumb + .top-r, .cmdk-open + .top-r { margin-left: auto; }
.vr { width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.bell .ico { width: 20px; height: 20px; }

/* ผู้ใช้ (avatar + ชื่อ + บัญชี) + เมนู */
.me-menu { position: relative; }
.me { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 3px 8px 3px 4px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink); }
.me::-webkit-details-marker { display: none; }
.me:hover, .me-menu[open] > .me { background: var(--surf2); }
.me-who { display: flex; flex-direction: column; min-width: 0; max-width: 160px; }
.me-who b { font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 1px; }
.me-who small { font-size: 12px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me .me-chev { color: var(--muted); }
.me-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 15rem; padding: 6px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); z-index: 40; display: grid; gap: 2px; }
.me-id { margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.me-id b { display: block; font-size: 13.5px; line-height: 1.45; }
.me-id small { display: block; color: var(--muted); font: 12px/1.45 var(--font-mono); }
.me-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink2); text-decoration: none; font-size: 13.5px; cursor: pointer; text-align: left; }
.me-link:hover, .me-link[aria-current="page"] { background: var(--sel); color: var(--ink); }
.me-link .ico { color: var(--muted); }
.me-pop .logout { margin: 0; }
.me-pop .logout button.me-link { padding: 0 10px; border: 0; border-radius: var(--r-md); color: var(--ink2); font-size: 13.5px; }
.me-pop .qp { margin: 0 0 4px; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.me-pop:has(.qp) { min-width: 18.5rem; }

/* ภาษา · โหมดสี (เมนูผู้ใช้ · ท้ายลิ้นชัก · NAV-AUDIT ข้อตัดสินใจ 2) */
.qp { display: grid; gap: 2px; }
.qp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 4px 0 10px; }
.qp-l { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink2); white-space: nowrap; }
.qp-l .ico { color: var(--muted); }

/* จอแคบ: ปุ่มเมนูเปิดลิ้นชัก (ไม่มี JS = ลิงก์ไป #nav) */
.m-menu { display: none; }

/* ══════════ ลิ้นชักเมนู (≤ 900 · <dialog> modal จากซ้าย · IA เดียวกับแถบซ้าย) ══════════ */
.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(88vw, 340px); max-width: none; height: 100vh; height: 100dvh; max-height: none; padding: 0; border: 0; border-right: 1px solid var(--line); background: var(--rail); color: var(--ink); box-shadow: var(--shadow-3); flex-direction: column; overflow: hidden; }
.drawer[open] { display: flex; }
.drawer::backdrop { background: var(--scrim); }
.dw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 16px; flex: none; }
.dw-head form { margin: 0; }
.dw-mark .mk { width: 21px; height: 32px; }
.dw-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; }
.dw-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.dw-nav .sb-nav { overflow: visible; flex: none; }
.dw-nav .wb-items { margin: 2px 0 6px; padding: 0 0 0 18px; position: relative; }
.dw-nav .wb-items::before { content: ""; position: absolute; left: 17px; top: 2px; bottom: 4px; width: 1px; background: var(--line); }
.dw-nav .si[aria-current="page"]::before { content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--brand); }
.drawer .ni, .dw-nav .si, .drawer .sb-new .btn, .drawer .sb-new .iconbtn { min-height: 44px; }
.drawer .sb-new .iconbtn { width: 44px; }
/* ปุ่มสร้างอื่น (เคสความมั่นคง · ครุภัณฑ์) อยู่ในกลุ่มของมันแล้ว · ลิ้นชักเหลือ "เปิดเคสใหม่" + งานด่วน ให้เมนูขึ้นก่อน */
.drawer .sb-new .sb-more { display: none; }
.dw-foot { flex: none; display: grid; gap: 2px; padding: 6px 10px 10px; border-top: 1px solid var(--line); }
.dw-foot .qp-row { padding-left: 8px; }
.dw-foot .toggle button { min-height: 36px; min-width: 44px; }

/* พื้นที่เนื้อหา · หัวหน้า (.ph) */
.wb-main, .lg-main, .cm-main, .bd-main, .main { padding: 20px 24px 40px; flex: 1; min-width: 0; }
.ib-main { padding: 0; flex: 1; min-width: 0; }
.ph { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ph h1 { margin: 0; font-size: 22px; }
.ph .sum { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.ph .note { margin-left: auto; }
.ph-own { margin-bottom: 8px; }
.ib-main > .ph { margin: 16px 20px 12px; }
.sum { color: var(--muted); font-size: 13px; }
.note { font-size: 12px; color: var(--muted); }
.wb-main .card, .lg-main .card, .bd-main .card, .cm-main .card, .ib-main .card { background: var(--surf); }
.wb-peek { border-left: 1px solid var(--line); background: var(--surf); padding: 16px 18px; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.foot { padding: 14px 24px 20px; text-align: left; font-size: 12px; color: var(--muted); }
.foot .mono { font-size: 12px; }

/* ⌘K */
.cmdk-open { display: inline-flex; gap: 8px; align-items: center; min-height: var(--ctl-h); border: 1px solid var(--input); background: var(--surf); color: var(--ink2); border-radius: 9px; padding: 0 6px 0 10px; font: 500 13px/1 var(--font-sans); cursor: pointer; margin-left: auto; flex: none; }
.cmdk-open:hover { background: var(--surf2); color: var(--ink); }
[data-layout="command"] .cmdk-open { color: var(--fg); border-color: var(--brand); }
.cmdk { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 0; width: min(36rem, 92vw); background: var(--surf); color: var(--ink); box-shadow: var(--shadow-3); }
.cmdk::backdrop { background: var(--scrim); }
.cmdk-box { display: grid; gap: 6px; padding: 12px; }
.cmdk input { width: 100%; height: var(--ctl-h-lg); padding: 0 12px; border: 1px solid var(--input); border-radius: 10px; background: var(--surf); color: var(--ink); font: inherit; }
.cmdk-list a { border-radius: var(--r-md); }

/* density compact */
[data-density="compact"] .ni { min-height: 30px; }
[data-density="compact"] .si { min-height: 28px; }
[data-density="compact"] .wb-main, [data-density="compact"] .lg-main, [data-density="compact"] .cm-main, [data-density="compact"] .bd-main { padding: 12px 16px 28px; }

/* ══════════ แถบบนแถวเดียว (ledger · board · NAV-AUDIT แบบ D · 4-design/nav) ══════════
   รายการระดับบน ≤ 6 (nav.Top) · แผง = <details data-menu> ตำแหน่งอิงแถบบน (li ไม่เป็น containing block) · app.js เลื่อนแผงไม่ให้ล้นขวา */
.tb { gap: 20px; padding: 0 16px 0 20px; background: var(--rail); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tb .sh-brand { flex: none; padding: 4px; margin: -4px; border-radius: var(--r-md); }
.tb .sh-brand:hover { background: var(--sel); }
.tb .top-r { margin-left: auto; }
.tn { flex: 1 1 auto; min-width: 0; }
.tn-list { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; margin: 0; padding: 0; }
.tn-li { position: static; flex: none; }
.tn-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink2); text-decoration: none; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; list-style: none; }
.tn-link .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
.tn-link:hover, .tn-g[open] > .tn-link { background: var(--surf2); color: var(--ink); }
.tn-g[open] > .tn-link .chev { transform: rotate(180deg); }
.tn-link.on { background: var(--soft); color: var(--fg); font-weight: 600; }
.tn-link.on .chev { color: var(--fg); }
.tn-link.on .count { background: var(--surf); color: var(--fg); }
.tn-g { position: static; }
.tn-panel { position: absolute; left: auto; top: calc(100% + 6px); z-index: 40; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--top-h) - 24px); max-height: calc(100dvh - var(--top-h) - 24px); overflow: auto; overscroll-behavior: contain; padding: 8px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); color: var(--ink); font-weight: 400; }
/* ไม่มี JS: แผงชิดซ้ายของแถบบน (ไม่ล้นขวา) · มี JS: app.js ตั้ง left ตามปุ่ม */
html:not([data-js]) .tn-panel { left: 12px; }
.tn-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 232px); gap: 4px; }
.tn-col { padding: 6px 4px 4px; min-width: 0; }
.tn-col + .tn-col { border-left: 1px solid var(--line); padding-left: 8px; }
.tn-ch { display: flex; align-items: center; gap: 8px; margin: 0; padding: 2px 8px 6px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.tn-ch .ico { width: 16px; height: 16px; color: var(--muted); }
.tn-ch .count { margin-left: auto; }
.tn-sep { margin: 0; padding: 10px 8px 2px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.tn-items { list-style: none; margin: 0; padding: 0; }
.tn-panel .si { min-height: 34px; padding: 0 8px; font-size: 13.5px; line-height: 1.4; }
.tn-panel .si[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); }
.tn-panel .si.new { color: var(--fg); }
.tn-panel .si .ico { width: 16px; height: 16px; flex: none; }
.tn-panel .si .ext { width: 14px; height: 14px; color: var(--muted); }
.tn-panel .si kbd { margin-left: auto; }
.tn-panel .si kbd + .count { margin-left: 6px; }
.tn-foot { margin: 6px 4px 0; padding: 6px 4px 0; border-top: 1px solid var(--line); }
.tn-find { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.tn-find:hover { background: var(--sel); color: var(--ink); }
html:not([data-js]) .tn-foot { display: none; }
/* ⚙ ตั้งค่าระบบ (place: utility) · ชุดขวาของทุก layout */
.util-link[aria-current="page"] { background: var(--soft); color: var(--fg); }
.lg-top { display: flex; align-items: center; gap: 12px; padding: 12px 24px 0; }
.lg-top .top-search { margin-left: auto; }
.lg-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.lg-rail { border-right: 1px solid var(--line); padding: 16px 10px; background: var(--rail); }
.bd-work { min-height: calc(100vh - var(--top-h)); }

/* ══════════ รางไอคอน (command) ══════════ */
.cm-shell { display: grid; grid-template-columns: var(--sb-w-rail) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ir { background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 10px; position: sticky; top: 0; height: 100vh; height: 100dvh; max-height: none; }
.ir-brand { margin-bottom: 10px; padding: 4px 6px; border-radius: var(--r-md); }
.ir-brand:hover { background: var(--sel); }
.ir-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ir-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink2); cursor: pointer; text-decoration: none; }
.ir-i:hover { background: var(--sel); color: var(--ink); }
.ir-i.on { background: var(--soft); color: var(--fg); }
.ir-g { position: relative; }
.ir-z { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.ir-fly { position: absolute; left: calc(100% + 8px); top: 0; min-width: 15rem; max-height: 80vh; overflow-y: auto; padding: 8px; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); z-index: 30; }

/* ══════════ หน้าต่าง: เกี่ยวกับระบบ · ช่วยเหลือเริ่มต้น (<dialog> · กักโฟกัสโดยเบราว์เซอร์ · Esc ปิด) ══════════ */
.about { padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surf); color: var(--ink); box-shadow: var(--shadow-3); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.about::backdrop { background: var(--scrim); -webkit-backdrop-filter: saturate(.8) blur(2px); backdrop-filter: saturate(.8) blur(2px); }
.ab-h { display: flex; align-items: flex-start; gap: 16px; padding: 28px 28px 20px; }
.ab-close { margin: 0 0 0 auto; }
.close { border: 1px solid var(--line); background: var(--surf); }
.ab-b { padding: 0 28px 20px; }
.tag2 { margin: 0 0 16px; color: var(--ink2); font-size: 14px; }
.ab-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surf2); }
.ab-kv dt { color: var(--muted); }
.ab-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ab-kv a { color: var(--fg); text-underline-offset: 2px; }
.ab-vendor { display: flex; align-items: center; gap: 16px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surf2); }
.ab-vendor small { display: block; font-size: 12px; color: var(--muted); }
.ab-vendor b { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; }
.ab-credit { display: block; font-size: 12px; color: var(--muted); }
.about-page { max-width: 46rem; padding: 0; overflow: hidden; }
.about-page h1 { margin: 0 0 4px; font-size: 22px; }
.about-page h2 { margin: 20px 0 6px; font-size: 14px; }
.ab-oss { margin: 0; padding-left: 1.2rem; color: var(--ink2); font-size: 13px; display: grid; gap: 4px; }
.lic-brand { margin: -2px 0 14px; }
.lic-page .ab-vendor { margin: 16px -16px -14px; border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ══════════ พอร์ทัลพนักงาน: หัว (สัญลักษณ์แทนกล่อง C เดิม) ══════════ */
.pt-brand .mk { width: 21px; height: 32px; flex: none; }
.pt-who { display: inline-flex; align-items: center; gap: 8px; }

/* ══════════ หน้าที่ไม่ต้องล็อกอิน (public) ══════════ */
.pub .topbar { display: flex; align-items: center; gap: 12px; min-height: var(--top-h); padding: 0 20px; background: var(--surf); border-bottom: 1px solid var(--line); }
.pub .topbar .tenant { font: 12px/1.4 var(--font-mono); color: var(--muted); padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.pub .topbar .logout { margin-left: auto; }
.pub-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px 24px; }
.pub-foot .lockup .tx { flex-direction: row; align-items: center; gap: 8px; }

/* หน้าเข้าสู่ระบบ / 2FA / ตั้งรหัส: เต็มจอ (ฉาก + การ์ดแก้ว · screens-login.css · M19) */
.pub-auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.pub-auth main#main { padding: 0; max-width: none; width: 100%; margin: 0; flex: 1; display: flex; flex-direction: column; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: 12px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ══════════ จอแคบ ══════════ */
@media (max-width: 1180px) {
  .wb-shell.has-peek, [data-sb="rail"] .wb-shell.has-peek { grid-template-columns: var(--sb-w) minmax(0, 1fr); }
  [data-sb="rail"] .wb-shell.has-peek { grid-template-columns: var(--sb-w-rail) minmax(0, 1fr); }
  .wb-peek { display: none; }
  .top-search { width: 240px; }
}
/* แถบบน 1101–1280: ซ่อนชื่อผู้ใช้ เหลือ avatar (ชื่ออยู่ในเมนูผู้ใช้) · ที่ว่างคืนให้ป้ายเมนู (NAV-AUDIT §5.6) */
@media (max-width: 1280px) {
  .tb .me-who { display: none; }
}
@media (max-width: 1100px) {
  .me-who { display: none; }
  /* แผงโซน 4 คอลัมน์ → 2 × 2 (ไม่ล้นจอ 901–1100) */
  .tn-cols:has(> .tn-col:nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(208px, 232px)); }
  .tn-cols:has(> .tn-col:nth-child(4)) > .tn-col:nth-child(odd) { border-left: 0; padding-left: 4px; }
  .tn-cols:has(> .tn-col:nth-child(4)) > .tn-col:nth-child(n+3) { border-top: 1px solid var(--line); }
}
/* แถบบน 901–1100: โลโก้เหลือสัญลักษณ์ · ระยะในปุ่มแคบลง → ยังแถวเดียวที่ 1024 */
@media (min-width: 901px) and (max-width: 1100px) {
  .tb { gap: 12px; }
  .tb .sh-brand .tx { display: none; }
  .tn-link { padding: 0 8px; gap: 4px; }
  .tb .top-r { gap: 2px; }
}
/* 901–1023 (แท็บเล็ตแนวนอน): ตัวอักษร/ระยะแคบลงอีกขั้น ให้ยังแถวเดียว (อังกฤษยาวสุด) */
@media (min-width: 901px) and (max-width: 1023px) {
  .tb { gap: 8px; padding: 0 10px 0 14px; }
  .tn-link { padding: 0 6px; font-size: 13px; }
  .tn-link .chev { display: none; }
}
/* ≤ 900px: เมนูหลักอยู่ในลิ้นชัก (shell/drawer · ปุ่มเมนูขวาบน) ทุก layout ·
   ไม่มี JS: แถบซ้าย/รางไอคอนไปท้ายหน้า · แถบบนแสดงเมนูเป็นแถวที่ตัดบรรทัดได้ · ปุ่มเมนูเป็นลิงก์ไป #nav */
@media (max-width: 900px) {
  .wb-shell, .ib-shell, .wb-shell.has-peek, [data-sb="rail"] .wb-shell, [data-sb="rail"] .ib-shell { display: flex; flex-direction: column; }
  .wb-work, .ib-work { order: 1; }
  .sb { order: 2; position: static; height: auto; border-right: 0; border-top: 1px solid var(--line); }
  .sb-toggle { display: none; }
  .sb-nav { overflow: visible; }
  .m-menu { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--input); border-radius: 9px; color: var(--ink2); text-decoration: none; font-size: 13px; flex: none; }
  html[data-js] .wb-shell > .sb, html[data-js] .ib-shell > .sb, html[data-js] .cm-shell > .ir, html[data-js] .tb .tn { display: none; }
  /* ⚙ ตั้งค่าระบบอยู่ท้ายลิ้นชัก (แถบบนเหลือ ? · กระดิ่ง · ผู้ใช้ · เมนู) */
  html[data-js] .top-r .util-link { display: none; }
  .top { padding: 0 12px; gap: 8px; }
  .top-search { width: auto; flex: 1 1 auto; }
  .crumb { display: none; }
  .tb { position: static; padding: 0 12px; gap: 8px; }
  .tb .sh-brand .tx { display: none; }
  html:not([data-js]) .tb { flex-wrap: wrap; padding: 8px 12px; row-gap: 4px; }
  html:not([data-js]) .tb .tn { order: 5; flex: 1 1 100%; }
  html:not([data-js]) .tn-list { flex-wrap: wrap; }
  .lg-body { display: block; }
  .lg-rail { display: none; }
  .lg-top { padding: 12px 12px 0; }
  .cm-shell { display: block; }
  .ir { position: static; height: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .ir-list { flex-direction: row; flex-wrap: wrap; }
  .ir-brand { margin: 0 6px 0 0; }
  .ir-fly { left: 0; top: calc(100% + 4px); }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .wb-main, .lg-main, .cm-main, .bd-main, .main { padding: 12px 12px 40px; }
  .ib-main > .ph { margin: 12px 12px 8px; }
  .ph h1 { font-size: 19px; }
  .top { min-height: 56px; }
  .top-search { display: none; }
  .crumb { display: flex; flex: 1 1 auto; font-size: 13.5px; }
  .crumb > span, .crumb > .ico { display: none; }
  .m-menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ชื่อลิงก์ยังอ่านได้ (axe link-name) */
  .m-menu { width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
  .top-r { margin-left: auto; gap: 4px; }
  .top-r .iconbtn { width: 44px; height: 44px; border-radius: 12px; }
  .top-r .helpbtn { width: 40px; height: 40px; border-radius: 11px; }
  .me { min-height: 44px; }
  .me-chev { display: none; }
  .cmdk-open kbd { display: none; }
  .cmdk-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmdk-open { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .foot { padding: 12px 12px 20px; }
  .ab-h { padding: 20px 20px 16px; }
  .ab-b { padding: 0 20px 16px; }
  .ab-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ab-kv dd { margin-bottom: 8px; }
  .ab-vendor { padding: 14px 20px; flex-wrap: wrap; }
}
@media print {
  .wb-shell, .ib-shell, .lg-body, .cm-shell { display: block; }
  .sb, .wb-nav, .wb-peek, .tb, .top, .ir, .lg-rail, .lg-top, .cmdk-open, .skips, .m-menu, .about, .drawer { display: none; }
}