/* 簡報模式「閱讀器外框」：左側章節目錄＋下方導覽列（參考菸酒 WAF 復盤分享頁的呈現方式）。
   只在 #present 加上 .reader 時生效，原本的簡報模式樣式不動。 */
#present.reader{--rd-side:#14140f;--rd-bg:#1a1a16;--rd-line:#2b2b22;--rd-mute:#5a5a4c;--rd-dim:#9c9c8c;--rd-fg:#eceadf;--rd-hi:#ffe14d;
  --rd-hand:"Caveat","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
  background:var(--rd-bg);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
#present.reader.on{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px;align-items:stretch;justify-content:stretch;transition:grid-template-columns .3s ease}
#present.reader.rd-full{grid-template-columns:0 minmax(0,1fr)}
#present.reader .pbar{display:none}

/* ---- 側欄 ---- */
#rdSide{display:none}
#present.reader #rdSide{display:flex;grid-row:1/3;grid-column:1;flex-direction:column;min-width:0;overflow:hidden;background:var(--rd-side);border-right:1px solid var(--rd-line)}
#present.reader.rd-full #rdSide{border-right:0}
.rd-hd{height:50px;flex:0 0 50px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--rd-line)}
.rd-logo{flex:1;min-width:0;font-size:11px;font-weight:700;letter-spacing:1px;color:#7a7a6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-btn{background:transparent;border:1px solid #33332a;color:#8c8c7d;font-size:11px;padding:4px 9px;border-radius:4px;font-weight:700;white-space:nowrap;transition:all .15s}
.rd-btn:hover:not(:disabled){background:var(--rd-hi);color:#15150f;border-color:var(--rd-hi)}
.rd-btn:disabled{opacity:.25;cursor:not-allowed}
.rd-btn[hidden]{display:none}
.rd-cur{margin:12px;flex:0 0 auto;border:1px solid var(--rd-line);border-radius:6px;padding:11px 13px;background:#1c1c15;cursor:pointer;text-align:left;color:inherit;width:auto}
.rd-cat{font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:#6b6b5c;margin-bottom:4px}
.rd-ttl{font-size:13.5px;font-weight:700;color:var(--rd-fg);line-height:1.35}
.rd-num{font-size:10.5px;color:var(--rd-mute);margin-top:7px;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.rd-dots{display:flex;gap:2px;overflow:hidden;max-width:110px}
.rd-dots i{width:4px;height:4px;border-radius:50%;background:#33332a;flex:0 0 4px}
.rd-dots i.on{background:var(--rd-hi)}
.rd-div{height:1px;background:var(--rd-line);margin:0 12px;flex:0 0 1px}
.rd-tree{flex:1;min-height:0;overflow-y:auto;padding:8px 0 16px;scrollbar-width:thin;scrollbar-color:#33332a transparent}
.rd-gh{display:flex;align-items:center;gap:7px;width:100%;padding:12px 14px 6px;background:none;border:0;color:var(--rd-mute);text-align:left}
.rd-gl{flex:1;font-size:9.5px;font-weight:800;letter-spacing:1.3px}
.rd-gc{font-size:9.5px;color:#4a4a3e;font-weight:700}
.rd-chev{font-size:8px;color:#3a3a30;transition:transform .2s}
.rd-chev.open{transform:rotate(90deg)}
.rd-items.collapsed{display:none}
.rd-it{display:flex;align-items:flex-start;gap:8px;width:100%;padding:6px 14px 6px 22px;background:none;border:0;border-left:2px solid transparent;color:var(--rd-dim);font-size:12.5px;line-height:1.35;text-align:left;transition:all .15s}
.rd-it:hover{color:var(--rd-fg);background:#1c1c15}
.rd-it.on{color:var(--rd-hi);border-left-color:var(--rd-hi);font-weight:700}
.rd-in{font-size:9.5px;color:#44443a;min-width:16px;padding-top:2px;font-variant-numeric:tabular-nums}
.rd-it.on .rd-in{color:var(--rd-hi)}

/* ---- 投影片區 ---- */
#rdStage{display:contents}
#present.reader #rdStage{display:flex;grid-row:1;grid-column:2;align-items:center;justify-content:center;padding:28px;min-width:0;min-height:0;overflow:hidden}
#present.reader.rd-full #rdStage{padding:12px}
#present.reader .pwrap{width:min(100%,calc((100vh - 100px) * 16 / 9));width:min(100%,calc((100dvh - 100px) * 16 / 9));height:auto;max-height:none;aspect-ratio:16/9;border-radius:4px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#present.reader .pwrap[data-ratio="4:3"]{width:min(100%,calc((100vh - 100px) * 4 / 3));width:min(100%,calc((100dvh - 100px) * 4 / 3));aspect-ratio:4/3}
#present.reader.rd-full .pwrap{width:min(100%,calc((100vh - 68px) * 16 / 9));width:min(100%,calc((100dvh - 68px) * 16 / 9))}
#present.reader.rd-full .pwrap[data-ratio="4:3"]{width:min(100%,calc((100vh - 68px) * 4 / 3));width:min(100%,calc((100dvh - 68px) * 4 / 3))}

/* ---- 導覽列 ---- */
#rdNav{display:none}
#present.reader #rdNav{display:flex;grid-row:2;grid-column:2;align-items:center;gap:8px;padding:0 14px;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--rd-side);border-top:1px solid var(--rd-line);min-width:0}
.rd-nb{font-size:12px;padding:5px 14px}
.rd-cnt{flex:1;text-align:center;font-family:var(--rd-hand);font-size:15px;letter-spacing:1px;color:var(--rd-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.rd-tools{display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.rd-tools::-webkit-scrollbar{display:none}
#present.reader .pnotes{left:250px;bottom:44px}
#present.reader.rd-full .pnotes{left:0}

@media (max-width:760px){
  #present.reader.on{grid-template-columns:0 minmax(0,1fr)}
  #present.reader:not(.rd-full) #rdSide{position:fixed;left:0;top:0;bottom:44px;width:min(280px,82vw);z-index:7;box-shadow:8px 0 30px rgba(0,0,0,.5)}
  #present.reader #rdStage{padding:8px}
  #present.reader .pwrap,#present.reader.rd-full .pwrap{width:100%}
  #present.reader .pnotes{left:0}
  .rd-tools .rd-opt{display:none}
}

/* ---- 手繪畫風加強（手繪筆記 sketch／現場手繪 draw） ---- */
/* 重點字改成黃色螢光筆劃過，字維持墨黑；簡報播放時螢光筆會從左刷到右 */
.stage[data-fam="sketch"] .rn[data-em]:not(:empty),
.stage[data-fam="draw"] .rn[data-em]:not(:empty){
  color:var(--s-fg) !important;padding:0 .08em;border-radius:0;
  background:linear-gradient(#FFE14D,#FFE14D) 0 64%/100% 46% no-repeat}
.stage.live[data-fam="sketch"] .rn[data-em]:not(:empty),
.stage.live[data-fam="draw"] .rn[data-em]:not(:empty){animation:rdHl .7s ease-out both;animation-delay:calc(var(--i,0) * var(--astag,90ms) + .45s)}
@keyframes rdHl{from{background-size:0% 46%}to{background-size:100% 46%}}
/* 線條加一點抖動，像麥克筆畫的（用 reader.js 注入的 #rdRough 濾鏡） */
.stage[data-fam="sketch"] .draw,.stage[data-fam="draw"] .draw{filter:url(#rdRough)}
@media (prefers-reduced-motion:reduce){.stage.live .rn[data-em]{animation:none !important}}