/* /talk 講座簡報
   同一份內容兩種看法：
   - 文件（預設）：一張一張往下捲，手機可讀，每張下面有 .more 補充說明與連結。
   - 簡報（?deck 或按「播放簡報」）：960×540 畫布等比放大，一次一張。
   框只有 .slide 一層（DESIGN.md「框只能一層」），投影片裡面只用分隔線、粗細與字級分層。
   字級只用 tokens：文件模式內文 1rem、標題 2rem；簡報模式內文 1.5rem（在 540 高的畫布上約 24pt）。 */

/* ── 頂列（文件模式） ───────────────────────────── */
.tk-bar { position: sticky; top: 0; z-index: 20; background: var(--bg-ink); color: var(--text-inverse); }
.tk-bar-in { width: calc(100% - 32px); max-width: 1000px; min-height: 56px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-brand { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
  color: var(--text-inverse); text-decoration: none; white-space: nowrap; }
.tk-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-inverse-sub); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-btn { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: var(--text-inverse);
  background: transparent; border: 2px solid #AAAAAA; border-radius: 4px; padding: 6px 12px; cursor: pointer;
  white-space: nowrap; }
.tk-btn:hover, .tk-btn:focus-visible { border-color: #FFFFFF; }
.tk-btn.main { background: var(--bg-surface); color: var(--text-ink); border-color: #FFFFFF; }

/* ── 文件模式版面 ───────────────────────────────── */
.tk-doc { width: calc(100% - 32px); max-width: 1000px; margin: 24px auto 0; }
.slide { position: relative; background: var(--bg-surface); border: var(--border-strong);
  padding: 32px 36px 20px; margin: 0 0 24px; scroll-margin-top: 72px; overflow-wrap: anywhere; }
.slide.dark { background: var(--bg-ink); color: var(--text-inverse); border-color: #111111; }

.eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-sub);
  margin: 0 0 8px; padding-right: 5em; }
.dark .eyebrow { color: var(--text-inverse-sub); }
.slide h1 { font-size: var(--fs-display); font-weight: 900; line-height: 1.2; margin: 0 0 16px; }
.slide h2 { font-size: var(--fs-xl); font-weight: 900; line-height: 1.3; margin: 0 0 20px; }
.slide h3 { font-size: var(--fs-md); font-weight: 900; line-height: 1.4; margin: 0 0 8px; }
.slide p, .slide li, .slide td, .slide th { font-size: var(--fs-base); line-height: 1.75; }
.slide p { margin: 0 0 12px; }
.slide ul, .slide ol { margin: 0; padding: 0; list-style: none; }
.slide a { color: inherit; }
.lede { font-size: var(--fs-md); color: var(--text-sub); }
.dark .lede { color: var(--text-inverse-sub); }
.sub { color: var(--text-sub); }
.dark .sub { color: var(--text-inverse-sub); }
.mono { font-family: var(--font-mono); }
.red { color: var(--text-alert); font-weight: 700; }
b, strong { font-weight: 900; }

/* 頁碼與出處 */
.pno { position: absolute; right: 16px; top: 12px; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--text-sub); text-decoration: none; }
.dark .pno { color: var(--text-inverse-sub); }
/* 每一頁右上角：這份簡報與 ALL PASS 首頁的 QR（talk.js 產生）。簡報模式與列印才顯示，文件模式不放。
   QR 圖本身有白底與留白，深色頁上也掃得到 */
.slide-qr { display: none; position: absolute; right: 16px; top: 34px; gap: 8px; }
.slide-qr figure { margin: 0; text-align: center; }
.slide-qr img { display: block; width: 60px; height: 60px; }
.slide-qr figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.2; color: var(--text-sub); margin-top: 2px; }
.dark .slide-qr figcaption { color: var(--text-inverse-sub); }
body[data-mode="deck"] .slide-qr { display: flex; }
.src { font-size: var(--fs-xs); color: var(--text-sub); border-top: var(--border-thin); margin-top: 20px; padding-top: 8px; }
.dark .src { color: var(--text-inverse-sub); border-top-color: #666666; }

/* 文件模式才有的補充說明 */
.more { border-top: var(--border-thin); margin-top: 20px; padding-top: 16px; }
.more p, .more li { font-size: var(--fs-sm); }
.more li { padding-left: 1em; text-indent: -1em; }
.more li::before { content: '・'; }
.dark .more { border-top-color: #666666; }

/* ── 版面元件（都不是框） ───────────────────────── */
.cols { display: grid; gap: 24px; }
.cols > *, .rows > li > * { min-width: 0; }
.c2 { grid-template-columns: 1fr 1fr; }
.c3 { grid-template-columns: 1fr 1fr 1fr; }
.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.side { grid-template-columns: 1fr auto; align-items: end; }

/* 一行一件事，用細線分開 */
.rows > li { border-top: var(--border-thin); padding: 10px 0; display: grid; grid-template-columns: 2.2em 1fr; gap: 12px;
  align-items: baseline; }
.rows > li:last-child { border-bottom: var(--border-thin); }
.dark .rows > li { border-top-color: #666666; }
.rows .n { font-family: var(--font-mono); font-weight: 700; color: var(--text-sub); }
.dark .rows .n { color: var(--text-inverse-sub); }
.rows.wide > li { grid-template-columns: 9em 1fr; }
.rows.w13 > li { grid-template-columns: 13em 1fr; }
.rows.label > li { grid-template-columns: 3.4em 1fr; }

/* 大數字 */
.big { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 700; line-height: 1.1; display: block; }
.k { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-sub); display: block; margin-top: 4px; }
.dark .k { color: var(--text-inverse-sub); }

/* 頂端粗線的欄（時間軸、案例、評分三欄） */
.bar-top { border-top: 4px solid #111111; padding-top: 10px; }
.dark .bar-top { border-top-color: #FFFFFF; }
.bar-top.red-line { border-top-color: #FF2A2A; }

/* 左側粗線（引文、示範） */
.quote { border-left: 4px solid #111111; padding-left: 16px; margin: 0 0 16px; }

/* 以前 → 現在 */
.chg > li { border-top: var(--border-thin); padding: 8px 0; display: grid; grid-template-columns: 11em 1fr 1fr; gap: 12px; align-items: baseline; }
.chg > li:last-child { border-bottom: var(--border-thin); }
.chg .old { color: var(--text-sub); text-decoration: line-through; }
.chg .new { font-weight: 900; }

/* 表格 */
.tk-table-wrap { overflow-x: auto; }
.tk-table { width: 100%; min-width: 600px; border-collapse: collapse; overflow-wrap: normal; }
.tk-table th, .tk-table td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: var(--border-thin); }
.tk-table thead th { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-sub); border-bottom: 2px solid #111111; }
.tk-table tbody th { font-weight: 900; min-width: 5.5em; }
/* 發想用的四格表：欄少，窄螢幕也不用橫向捲動 */
.tk-table.matrix { min-width: 0; }
.tk-table.matrix td { width: 40%; }

/* 時間軸 */
.tl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.tl li { border-top: 4px solid #111111; padding-top: 8px; }
.tl .when { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; color: var(--text-sub); display: block; }
.tl li.red-line { border-top-color: #FF2A2A; }
.tl.five { grid-template-columns: repeat(5, 1fr); }

/* 勾選清單 */
.check > li { position: relative; padding: 6px 0 6px 32px; border-top: var(--border-thin); }
.check > li:last-child { border-bottom: var(--border-thin); }
.check > li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 18px; height: 18px; border: 2px solid #111111; }

/* QR */
.qr { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; }
.qr figure { margin: 0; width: 132px; }
.qr img { display: block; width: 100%; height: auto; }
.qr figcaption { font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: 4px; word-break: break-all; }

/* 封面與章節頁 */
.cover-meta { margin-top: 32px; }
.chapter .big { font-size: var(--fs-display); }
.chapter h2 { margin-top: 12px; }

/* 手機 */
@media (max-width: 720px) {
  .slide { padding: 24px 16px 16px; }
  .slide h2 { font-size: var(--fs-lg); }
  .c2, .c3, .c4 { grid-template-columns: 1fr; }
  .tl, .tl.five { grid-template-columns: 1fr 1fr; }
  .chg > li { grid-template-columns: 1fr 1fr; }
  .chg > li > :first-child { grid-column: 1 / -1; }
  .rows.wide > li, .rows.w13 > li { grid-template-columns: 1fr; gap: 2px; }
  .side { grid-template-columns: 1fr; }
  .tk-name { display: none; }
}

/* ── 簡報模式 ───────────────────────────────────── */
body[data-mode="deck"] { background: var(--bg-ink); overflow: hidden; height: 100vh; padding: 0; }
body[data-mode="deck"] .tk-bar { display: none; }
body[data-mode="deck"] .tk-doc { position: fixed; left: 50%; top: 50%; width: 960px; height: 540px; margin: 0;
  max-width: none; transform-origin: center center; }
body[data-mode="deck"] .slide { position: absolute; inset: 0; margin: 0; border: 0; padding: 36px 48px 24px;
  display: none; flex-direction: column; overflow: hidden; }
body[data-mode="deck"] .slide.on { display: flex; }
body[data-mode="deck"] .more { display: none; }
body[data-mode="deck"] .src { margin-top: auto; }
body[data-mode="deck"] .slide p, body[data-mode="deck"] .slide li { font-size: var(--fs-lg); line-height: 1.5; }
body[data-mode="deck"] .slide td, body[data-mode="deck"] .slide th { font-size: var(--fs-md); line-height: 1.45; }
body[data-mode="deck"] .slide .matrix td, body[data-mode="deck"] .slide .matrix tbody th { font-size: var(--fs-lg); padding-top: 14px; padding-bottom: 14px; }
body[data-mode="deck"] .slide .dense p, body[data-mode="deck"] .slide .dense li { font-size: var(--fs-md); }
body[data-mode="deck"] .slide h2 { margin-bottom: 18px; }
/* 上面那條把 .slide 裡的 p 都放大了，小標、出處、標籤要用更明確的選擇器拉回來 */
body[data-mode="deck"] .slide .eyebrow { font-size: var(--fs-sm); line-height: 1.4; }
body[data-mode="deck"] .slide .src { font-size: var(--fs-xs); line-height: 1.4; }
body[data-mode="deck"] .slide .lede { font-size: var(--fs-lg); }
body[data-mode="deck"] .slide h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
body[data-mode="deck"] .slide .dense h3 { font-size: var(--fs-md); }
body[data-mode="deck"] .slide .k, body[data-mode="deck"] .slide .tl .when { font-size: var(--fs-sm); }
body[data-mode="deck"] .chapter { justify-content: center; }
body[data-mode="deck"] .qr figure { width: 150px; }
body[data-mode="deck"] .c2 { grid-template-columns: 1fr 1fr; }
body[data-mode="deck"] .c3 { grid-template-columns: 1fr 1fr 1fr; }
body[data-mode="deck"] .c4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
body[data-mode="deck"] .side { grid-template-columns: 1fr auto; }
body[data-mode="deck"] .tl { grid-template-columns: repeat(6, 1fr); }
body[data-mode="deck"] .tl.five { grid-template-columns: repeat(5, 1fr); }

/* 簡報模式的控制列：平常淡淡的，滑過才清楚 */
.tk-deckbar { display: none; }
body[data-mode="deck"] .tk-deckbar { display: flex; position: fixed; right: 12px; bottom: 10px; z-index: 30; gap: 8px;
  align-items: center; opacity: 0.25; transition: opacity 0.2s; }
body[data-mode="deck"] .tk-deckbar:hover, body[data-mode="deck"] .tk-deckbar:focus-within { opacity: 1; }
.tk-prog { display: none; }
body[data-mode="deck"] .tk-prog { display: block; position: fixed; left: 0; bottom: 0; height: 4px; width: 0;
  background: var(--bg-surface); z-index: 30; }

/* ── 列印／存 PDF：一張一頁，用簡報版面 ─────────── */
@media print {
  @page { size: 254mm 142.875mm; margin: 0; }
  body, body[data-mode="deck"] { background: var(--bg-surface); height: auto; overflow: visible; padding: 0; }
  .tk-bar, .tk-deckbar, .tk-prog, .more, body[data-mode="deck"] .tk-deckbar, body[data-mode="deck"] .tk-prog { display: none; }
  .tk-doc, body[data-mode="deck"] .tk-doc { position: static; transform: none; width: 960px; height: auto; margin: 0; max-width: none; }
  .slide, body[data-mode="deck"] .slide { display: flex; flex-direction: column; position: relative; inset: auto; width: 960px; height: 540px;
    margin: 0; border: 0; padding: 36px 48px 24px; overflow: hidden; break-after: page; }
  .slide.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .slide-qr { display: flex; }
}