/* แถบเมนูซ้าย (วาดโดย nav.js) — ใช้ตัวแปรสีของแต่ละหน้า (--panel --line --accent …) จึงตามโหมดมืดของหน้านั้นเอง */
.shell{display:flex;align-items:stretch}
/* ทำไมต้องเป็น container query: แถบเมนูกินความกว้าง 56–208px media query วัดหน้าต่างทั้งหน้าจึงไม่รู้ว่าเนื้อหาเหลือเท่าไร —
   หน้ารายการจะเปลี่ยนเป็นการ์ดช้ากว่าที่ตารางล้นจริง จึงให้ .col เป็น container แล้ววัดที่นี่ */
.col{flex:1;min-width:0;display:flex;flex-direction:column;container-type:inline-size}
.side{flex:none;width:208px;position:sticky;top:0;height:100vh;align-self:flex-start;display:flex;flex-direction:column;gap:4px;
  padding:10px 8px;background:var(--panel);border-right:1px solid var(--line);z-index:25}
.side[hidden]{display:none}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 4px 10px}
.side-brand{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden}
.side-toggle{flex:none;width:30px;height:30px;border:1px solid var(--line);background:var(--panel);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);padding:0}
.side-toggle:hover{background:var(--panel-2)}
.side-toggle svg{transition:transform .15s}
.side-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:14px;white-space:nowrap;border:1px solid transparent}
.side-item:hover{background:var(--panel-2);color:var(--ink)}
.side-item[aria-current="page"]{background:var(--accent-2);color:var(--accent);font-weight:600;border-color:var(--accent)}
.side-item svg{flex:none;width:20px;height:20px}
/* ย่อ: เหลือแถบบางที่มีแต่ไอคอน — ชื่อเมนูยังอยู่ใน DOM (โปรแกรมอ่านจอ) และเมาส์ชี้ได้ title แต่ซ่อนจากสายตา */
html[data-nav="min"] .side{width:56px}
html[data-nav="min"] .side-brand,html[data-nav="min"] .side-item .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html[data-nav="min"] .side-top{justify-content:center;padding-left:0;padding-right:0}
html[data-nav="min"] .side-item{justify-content:center;padding:8px 0}
html[data-nav="min"] .side-toggle svg{transform:rotate(180deg)}
/* จอแคบ: เมนูกลายเป็นแถบบนแนวนอน (ไม่มีย่อ/ขยาย) เพื่อไม่กินความกว้างที่การ์ดต้องใช้ */
@media (max-width:760px){
  .shell{flex-direction:column}
  .side,html[data-nav="min"] .side{align-self:stretch;width:auto;height:auto;position:static;flex-direction:row;align-items:center;gap:6px;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .side-top{padding:0 6px 0 0}
  .side-toggle{display:none}
  html[data-nav] .side-brand,.side-brand{position:static;width:auto;height:auto;clip:auto;font-size:14px}
  .side-item,html[data-nav="min"] .side-item{padding:6px 10px;justify-content:flex-start}
  html[data-nav="min"] .side-item .lb{position:static;width:auto;height:auto;clip:auto}
}
@media (prefers-reduced-motion:reduce){.side-toggle svg{transition:none}}