/* auto-hide navigation bar · sits above the act bar, outside the scaled slide */
#nav{position:fixed;left:50%;bottom:70px;z-index:55;display:flex;align-items:center;gap:10px;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  background:rgba(250,249,245,.97);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 6px 24px rgba(20,20,19,.12);padding:7px 12px;font-family:var(--sans);color:var(--ink);font-size:14px;max-width:calc(100vw - 24px)}
#nav.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;visibility:visible;transition:opacity .2s ease,transform .2s ease,visibility 0s}
#nav .nb{appearance:none;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:600 15px/1 var(--sans);
  min-width:34px;height:34px;border-radius:999px;cursor:pointer;padding:0 9px}
#nav .nb:hover{border-color:var(--clay);color:var(--clay-ink)}
#nav .nb.on{background:var(--clay-ink);border-color:var(--clay-ink);color:#fff}
#nav .nb:disabled{opacity:.35;cursor:default}
#nav .nb[data-a="prev"],#nav .nb[data-a="next"]{font-size:22px;line-height:30px}
#nav .cnt{min-width:74px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--muted)}
#nav .dots{display:flex;align-items:flex-end;gap:12px;padding:0 6px;border-left:1px solid var(--line);border-right:1px solid var(--line);margin:0 2px}
#nav .grp{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
#nav .gl{font-size:11px;font-weight:600;color:var(--c);letter-spacing:.02em;line-height:1}
#nav .grp.brk .gl{color:var(--muted)}
#nav .gd{display:flex;gap:4px}
#nav .dot{appearance:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--c);background:transparent;padding:0;cursor:pointer;opacity:.75}
#nav .grp.brk .dot{border-style:dashed;border-color:var(--muted)}
#nav .dot.past{background:var(--c);opacity:.45}
#nav .dot.cur{background:var(--c);opacity:1;box-shadow:0 0 0 3px rgba(217,119,87,.28);transform:scale(1.15)}
#nav .dot:hover{opacity:1;transform:scale(1.2)}
#nav .dot.hid{border-style:dashed;opacity:.3;background:transparent}
#nav .dot.hid.cur{opacity:1;background:transparent;box-shadow:0 0 0 3px rgba(94,93,89,.25)}
.show-hidden #nav .dot.hid{opacity:.7}
/* toast + hidden-slide marker (outside the slide, so never part of layout checks) */
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;background:rgba(20,20,19,.9);color:#F0EEE6;font:500 15px/1.4 var(--sans);padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
.on-hidden body::after{content:"ซ่อน — ข้ามตอนนำเสนอ";position:fixed;left:16px;top:12px;z-index:41;font:600 14px/1 var(--sans);color:var(--muted);background:var(--bg);border:2px dashed var(--muted);border-radius:999px;padding:7px 14px}
.static #nav,.static #toast{display:none}
@media print{#nav,#toast{display:none}}