/* 引擎骨架：舞台、翻頁動畫、控制列、狀態、編輯模式。
   —— 這一份屬於引擎，換一場簡報不需要動它。 */
*{box-sizing:border-box}

/* 左上角品牌標。放在 #stage 內、slide 之前，靠 z-index 浮在投影片之上，
   所以 .slide 的 padding-top 加到 70px 讓出位置。 */
#brand{position:absolute;left:60px;top:24px;height:30px;width:auto;z-index:5;
  opacity:.92;pointer-events:none;user-select:none}
/* iOS（Safari／Chrome／LINE 內建都是 WebKit）看到 1280 寬的版面塞進 375 寬的手機，
   會自作主張把內文放大一到兩成好讀，行高跟著長高，往下累積就把最後一列擠出 720 的
   舞台外被裁掉（2026-09-06 實測：今日流程頁的 10:30 整列不見、10:20 被切一半；
   逐列回推放大約 1.19 倍）。關掉它，手機才跟投影機、存檔版是同一個版面。
   順帶關掉點兩下自動縮放：誤觸時整頁會歪掉，這裡沒有任何功能需要雙擊。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;background:#EFE7DF;font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}
/* 進了放大模式才把手勢還給瀏覽器；離開時這條規則消失，上面那行的 manipulation 立刻復位 */
html.zoomable,html.zoomable body{touch-action:auto}
body{display:grid;place-items:center;overflow:hidden}

/* ---------- 舞台：固定 1280x720，等比縮放，投影機與手機看到完全一樣的版面 ---------- */
#viewport{position:fixed;inset:0;overflow:hidden}
/* 舞台比視窗寬時，grid 置中對超寬元素不可靠（實測手機直式會被推出畫面外），
   所以自己用絕對定位加 translate 算中心，縮放倍率由 JS 給。 */
#stage{width:1280px;height:720px;position:absolute;left:0;top:0;
  transform-origin:0 0;
  border-radius:18px;overflow:hidden;background:var(--bg);box-shadow:0 24px 60px rgba(60,44,38,.28)}

.slide{position:absolute;inset:0;padding:70px 64px 56px;opacity:0;visibility:hidden;
  background:var(--bg);display:flex;flex-direction:column;
  /* 進場一律從下方浮起；離場方向由 JS 掛的 leave-* 決定，翻頁看得出前進或後退。
     visibility 的 0s 延遲要等位移跑完，否則離場動畫會被直接砍掉。 */
  transform:translate3d(0,16px,0);
  transition:opacity .34s ease, transform .46s cubic-bezier(.22,.61,.36,1), visibility 0s linear .46s}
.slide.on{opacity:1;visibility:visible;transform:none;
  transition:opacity .42s ease, transform .56s cubic-bezier(.22,.61,.36,1), visibility 0s}
.slide.leave-fwd,.slide.leave-back{visibility:visible;opacity:0;
  transition:opacity .28s ease, transform .38s cubic-bezier(.4,0,.7,.2), visibility 0s linear .38s}
.slide.leave-fwd{transform:translate3d(0,-14px,0)}
.slide.leave-back{transform:translate3d(0,14px,0)}
[hidden]{display:none!important}

/* ---------- 控制列 ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:linear-gradient(180deg,transparent,rgba(48,36,32,.55));z-index:20;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
#hud.show{opacity:1;pointer-events:auto}
/* 放大鏡：平常只是第三顆按鈕，按下去才把捏放的門打開，按鈕自己也換成被按住的樣子 */
#zoom{display:inline-flex;align-items:center;gap:7px}
#zoom svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#zoom[aria-pressed="true"]{background:var(--ink);color:#fff}
body.clean #zoom,body.editing #zoom{display:none}
.btn{appearance:none;border:0;border-radius:999px;padding:11px 20px;font-family:inherit;
  font-size:15px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.94);
  box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;
  min-height:44px;min-width:44px}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.24)}
.btn:active{transform:none;scale:.97}
.btn:focus-visible{outline:3px solid var(--peach);outline-offset:3px}
.btn[disabled]{opacity:.42;cursor:default;transform:none!important;box-shadow:none}
.btn.ghost{background:rgba(255,255,255,.24);color:#fff}

#status{position:fixed;top:12px;right:12px;z-index:20;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.94);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.16);color:var(--muted)}
#status .dot{width:9px;height:9px;border-radius:50%;background:#c9c2bd;flex:none}
#status.live .dot{background:#5BA45B}
#status.live{color:#3c6b3c}
#status.off .dot{background:#C9705F}

#counter{position:fixed;top:12px;left:12px;z-index:20;background:rgba(255,255,255,.9);
  border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--muted);
  box-shadow:0 4px 12px rgba(0,0,0,.16)}

/* 匯出存檔版時把所有操作介面拿掉，只留投影片本身 */
body.clean #hud,body.clean #status,body.clean #counter,body.clean #follow{display:none!important}
body.clean #stage{border-radius:0;box-shadow:none}

/* ---------- 編輯模式（店長長按啟用，平常畫面上不留任何按鈕） ---------- */
#editbar{position:fixed;top:12px;left:50%;translate:-50% 0;z-index:40;display:none;
  align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px);
  background:rgba(48,36,32,.94);color:#fff;border-radius:999px;padding:8px 10px;
  box-shadow:0 10px 26px rgba(0,0,0,.34)}
body.editing #editbar{display:flex}
#editbar .lab{font-size:13px;font-weight:700;letter-spacing:.08em;padding:0 8px;color:#FFC988}
.ebtn{appearance:none;border:0;border-radius:999px;padding:9px 15px;font-family:inherit;
  font-size:14px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer;
  min-height:38px;transition:transform .18s ease,opacity .18s ease}
.ebtn:hover{transform:translateY(-1px)}
.ebtn:active{transform:none;scale:.97}
.ebtn:focus-visible{outline:3px solid var(--peach);outline-offset:2px}
.ebtn.danger{background:#C9705F;color:#fff}
.ebtn.ghost{background:rgba(255,255,255,.18);color:#fff}
.ebtn[disabled]{opacity:.4;cursor:default}

body.editing [data-eid]{outline:1px dashed rgba(65,56,56,.32);outline-offset:3px;border-radius:4px}
body.editing [data-eid]:hover{outline-color:rgba(231,151,150,.9);background:rgba(255,201,136,.14)}
body.editing [data-eid]:focus{outline:2px solid var(--peach);outline-offset:3px;
  background:rgba(255,255,255,.7)}
body.editing .figure{cursor:grab}
body.editing .figure.picking{outline:3px solid var(--peach);outline-offset:2px;cursor:grabbing}
/* 被刪掉的頁在編輯模式下仍看得到，但整頁壓灰並蓋一條紅字，好按復原 */
body.editing .slide.dropped{filter:grayscale(.85) opacity(.5)}
.dropmark{position:absolute;inset:auto 0 0 0;display:none;justify-content:center;z-index:6;
  padding:14px 0;font-size:15px;font-weight:900;letter-spacing:.1em;color:#fff;
  background:rgba(201,112,95,.92)}
body.editing .slide.dropped .dropmark{display:flex}
#toast{position:fixed;left:50%;bottom:96px;translate:-50% 0;z-index:41;
  background:rgba(48,36,32,.94);color:#fff;border-radius:999px;padding:11px 22px;
  font-size:14px;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transition:opacity .22s ease}
#toast.show{opacity:1}
/* 全螢幕不可用時的替代：把邊框與陰影收掉，把畫面讓給投影片 */
body.solo #counter,body.solo #status{display:none}
body.solo #stage{border-radius:0;box-shadow:none}
body.rotated #stage{border-radius:0}
/* 手機的網址列會收合，dvh 才量得到真正可用的高度 */
@supports (height:100dvh){ html,body{height:100dvh} }

/* 這顆會壓在投影片上，所以跟上一頁／下一頁同進退：碰一下畫面才出現，靜止 2.6 秒淡出。
   離開跟隨的狀態本身由右上角那顆狀態燈負責，不需要一直杵著擋內容。 */
#follow{position:fixed;right:14px;bottom:74px;z-index:21;
  background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;border:0;font-family:inherit;min-height:44px;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
#ui:has(#hud.show) #follow{opacity:1;pointer-events:auto}

/* 舞台轉 90 度時，控制列與角落資訊若留在螢幕座標系，就會出現「內容躺著、
   按鈕站著」的錯亂（實測 LINE 內建瀏覽器直握時就是這樣）。把它們全部收進
   #ui，套同一組 transform 一起轉；transform 會讓子層的 position:fixed 改以
   #ui 為基準，所以底下每一顆的定位寫法都不必動。 */
#ui{position:fixed;left:0;top:0;width:100%;height:100%;transform-origin:0 0;
  pointer-events:none;z-index:20}
/* pointer-events 會繼承，可按的三個要自己開回來 */
#editbar,#openhint{pointer-events:auto}   /* #follow 的開關交給上面的 :has 規則 */

/* LINE／FB／IG 內建瀏覽器的工具列在橫向會吃掉近三成高度，是同仁看到的畫面
   比投影機小一大截的主因。偵測到就掛一條可關掉的提示，指到系統瀏覽器。 */
#openhint{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:22;display:none;
  align-items:center;gap:10px;max-width:calc(100% - 32px);
  background:rgba(48,36,32,.9);color:#fff;border-radius:999px;padding:9px 10px 9px 16px;
  font-size:13px;font-weight:700;line-height:1.5;box-shadow:0 8px 20px rgba(0,0,0,.3);
  transition:bottom .2s ease}
/* 控制列冒出來時把提示往上讓，兩者都在畫面底部 */
#ui:has(#hud.show) #openhint{bottom:80px}
body.inapp #openhint{display:flex}
body.clean #openhint,body.editing #openhint{display:none!important}
#openhint b{color:#FFC988}
#openhint button{appearance:none;border:0;background:rgba(255,255,255,.18);color:#fff;
  border-radius:999px;width:32px;height:32px;flex:none;font-size:16px;font-family:inherit;
  cursor:pointer;line-height:1}

@media (hover:none){ .btn:hover{transform:none;box-shadow:0 4px 12px rgba(0,0,0,.2)} }
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important;animation-duration:.01ms!important} }