/* lab-theme.css — 依 presentation/design/slide_style_spec.md 實作的 Reveal.js 主題
   色彩：米白底 #F5F0E8 / 海軍藍 #1A2744 / 鈷藍 #1565C0 / 青 #00BCD4 / 琥珀 #E07B39 / 銅 #A07030 */

:root {
  --bg: #F5F0E8;
  --navy: #1A2744;
  --navy2: #1E3A5F;
  --blue: #1565C0;
  --cyan: #00BCD4;
  --amber: #E07B39;
  --copper: #A07030;
  --card: #FBF8F2;
}

.reveal-viewport {
  background: var(--bg);
  background-image:
    linear-gradient(rgba(26,39,68,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,39,68,.06) 1px, transparent 1px);
  background-size: 26px 26px;
}

.reveal {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Source Sans 3", sans-serif;
  font-size: 26px;
  color: var(--navy);
  line-height: 1.5;
}
.reveal .slides { text-align: left; }
.reveal .slides section {
  height: 100%;
  padding: 30px 46px 18px;
  box-sizing: border-box;
}
/* Reveal 以 inline style 設 display:block，須用 !important 取回 flex；
   只作用於 .present，避免蓋掉隱藏頁的 display:none */
.reveal .slides section.present {
  display: flex !important;
  flex-direction: column;
}

/* ── 標題區（左上、琥珀底線）── */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: inherit; color: var(--navy);
  font-weight: 800; letter-spacing: .01em;
  text-transform: none; margin: 0 0 6px;
}
.reveal h1 { font-size: 1.9em; line-height: 1.25; }
.reveal h2 { font-size: 1.28em; }
.reveal h2 .sub, .reveal h1 .sub {
  display: block; font-size: .58em; font-weight: 500; color: #4a5670; margin-top: 6px;
}
.s-head { border-bottom: 4px solid var(--amber); padding-bottom: 8px; margin-bottom: 20px; flex: 0 0 auto; }
.s-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; }

/* ── 底部結論帶（每頁必有，spec §2.3）── */
.s-concl {
  flex: 0 0 auto; margin-top: 14px;
  background: var(--navy); color: var(--bg);
  font-weight: 700; font-size: .82em; text-align: center;
  padding: 10px 18px; border-radius: 8px;
}
.s-concl.warn { background: var(--amber); color: var(--navy); }

/* ── 封面 ── */
section.cover { justify-content: center; }
section.cover .chip {
  display: inline-block; background: var(--navy); color: var(--bg);
  font-size: .55em; font-weight: 700; letter-spacing: .12em;
  padding: 5px 18px; border-radius: 999px; margin-bottom: 22px; width: max-content;
}
section.cover h1 { font-size: 2.1em; }
section.cover .course { color: var(--copper); font-size: .66em; margin-top: 26px; font-weight: 600; }
section.cover .coverviz { position: absolute; right: 40px; bottom: 60px; width: 420px; opacity: .92; }

/* ── 版型 B：卡片陣列 ── */
.cards { display: grid; gap: 16px; }
.cards.c2 { grid-template-columns: 1fr 1fr; }
.cards.c3 { grid-template-columns: 1fr 1fr 1fr; }
.card {
  background: var(--card); border: 2px solid var(--navy); border-radius: 12px;
  padding: 14px 18px; font-size: .78em; line-height: 1.55;
}
.card b.t { display: block; font-size: 1.05em; color: var(--navy); margin-bottom: 6px; }
.card.accent { border-color: var(--amber); background: #FAEFE2; }
.card.blue { border-color: var(--blue); }

/* ── 版型 A：左右對比 ── */
.cols { display: flex; gap: 26px; align-items: stretch; }
.cols > div { flex: 1; min-width: 0; }
.vs-old { color: #6b7287; }
.vs-old .card { border-color: #9aa0b0; background: #efece4; }

/* ── 流程管線（版型 D）── */
.pipe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .74em; }
.pipe .step {
  background: var(--card); border: 2px solid var(--navy); border-radius: 10px;
  padding: 10px 14px; font-weight: 700; text-align: center;
}
.pipe .step.hot { background: var(--blue); border-color: var(--blue); color: #fff; }
.pipe .step.amb { background: var(--amber); border-color: var(--amber); color: var(--navy); }
.pipe .arr { color: var(--blue); font-weight: 800; font-size: 1.25em; }

/* ── 警告（雙重標記：琥珀 + ⚠，spec §3.3）── */
.warnbox {
  background: #F6E3CF; border: 2.5px solid var(--amber); border-radius: 12px;
  padding: 12px 18px; font-size: .8em; font-weight: 600;
}
.warnbox::before { content: "⚠ "; font-weight: 800; color: var(--amber); }

/* ── 洞見框 ── */
.insight {
  border: 2.5px solid var(--navy); border-radius: 12px; background: var(--card);
  padding: 12px 20px; font-weight: 700; font-size: .9em;
}

/* ── 超大數字（spec §3.4）── */
.kpi { display: flex; gap: 30px; justify-content: center; align-items: stretch; }
.kpi .item { text-align: center; background: var(--card); border: 2px solid var(--navy); border-radius: 14px; padding: 18px 30px; }
.kpi .num { font-size: 2.6em; font-weight: 800; color: var(--blue); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .num.bad { color: var(--amber); }
.kpi .lab { font-size: .68em; color: #4a5670; margin-top: 6px; }

/* ── 表格（標題列深色底，spec 禁止無底色標題欄）── */
.reveal table { border-collapse: collapse; font-size: .68em; margin: 0; width: 100%; }
.reveal th { background: var(--navy); color: var(--bg); padding: 8px 14px; text-align: left; font-weight: 700; }
.reveal td { border-bottom: 1px solid #cfc8b8; padding: 7px 14px; }
.reveal tr.hl td { background: #F6E3CF; font-weight: 700; }
.reveal td.ok { color: #1f7a4d; font-weight: 700; }
.reveal td.no { color: #b3541e; font-weight: 700; }

/* ── 程式碼 ── */
.reveal pre {
  width: 100%; margin: 0; box-shadow: none;
  background: var(--navy); border-radius: 12px; padding: 4px 0;
}
.reveal pre code {
  background: transparent; color: #dce6f5;
  font-family: Consolas, "Cascadia Code", monospace; font-size: .62em; line-height: 1.55;
  padding: 14px 22px; max-height: 480px; display: block; overflow-x: auto;
}
.reveal code.inline {
  font-family: Consolas, monospace; font-size: .85em;
  background: #e9e3d5; color: var(--navy2); padding: 1px 8px; border-radius: 6px;
}

/* ── 清單 ── */
.reveal ul, .reveal ol { margin: 0 0 0 1.1em; font-size: .85em; }
.reveal li { margin: .35em 0; }
.reveal li::marker { color: var(--blue); }
.reveal strong { color: var(--blue); }
.reveal .em-amber { color: var(--amber); font-weight: 800; }

/* ── 圖 ── */
.s-body img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; border-radius: 8px; }
.figwrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* ── 小字來源 ── */
.src { font-size: .55em; color: var(--copper); margin-top: 4px; }

/* demo 操作劇本 */
.playbook { counter-reset: pb; font-size: .8em; }
.playbook .pstep { display: flex; gap: 14px; align-items: baseline; margin: 10px 0; }
.playbook .pstep::before {
  counter-increment: pb; content: counter(pb);
  background: var(--blue); color: #fff; font-weight: 800;
  border-radius: 50%; width: 1.5em; height: 1.5em; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: .9em;
}

/* slide number / 控制鍵著色 */
.reveal .slide-number { background: transparent; color: var(--copper); font-size: 16px; right: 14px; bottom: 10px; }
.reveal .controls { color: var(--blue); }
.reveal .progress { color: var(--amber); height: 4px; }