/* html-ppt :: mobile.css — 移动端适配（纯增量共享资产：不改 base.css，桌面端零影响）
 *
 * 两种模式：
 *  A) 竖屏重排：@media (max-width:860px) and (orientation:portrait) 命中（手机竖屏）
 *     缩字号/间距、多列网格塌成单列、表格与代码块横向滚动、slide 内容超高时页内竖滚
 *  B) 缩放适配：mobile.js 在「非竖屏重排且视口小于 1280×720 设计分辨率」时给 .deck 加 .ms
 *     slide 按 1280×720 渲染后整体 scale 居中（手机横屏 / 平板 / 窄桌面窗口），视觉与桌面一致
 *
 * deck 接入要求：本文件的 <link> 必须放在 deck 内联 <style> 之后——
 * 对 deck 约定类（.tbl/.qa/pre.code 等复制粘贴的同名类）的覆盖依赖「同特异性、后定义胜出」。
 */

/* ================= B) 缩放适配（mobile.js 加 .ms 才生效） ================= */
/* 特异性 0,3,0，高于 base.css 与各 deck 内联的翻页位移覆盖（0,2,0 / 0,1,0），无条件胜出；
 * 竖向翻页的 30px 位移动画保留（calc 叠加在居中位移之后）。 */
.deck.ms .slide {
  inset: auto;
  left: 50%; top: 50%;
  width: 1280px; height: 720px;
  transform: translate(-50%, calc(-50% + 30px)) scale(var(--ms-scale, 1));
}
.deck.ms .slide.is-prev { transform: translate(-50%, calc(-50% - 30px)) scale(var(--ms-scale, 1)); }
.deck.ms .slide.is-active { transform: translate(-50%, -50%) scale(var(--ms-scale, 1)); }

/* 点按放大提示默认隐藏，仅在竖屏重排断点内显示（见下方 media 块） */
.fig-zoom-hint { display: none; }

/* ================= 大图 lightbox（mobile.js 打开，全设备可用） ================= */
.fig-lightbox {
  position: fixed; inset: 0; z-index: 80;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: rgba(10, 12, 18, 0.94);
}
.fig-lightbox-inner { width: max-content; margin: 0 auto; padding: 20px 12px 28px; }
.fig-lightbox-inner svg { max-width: none; }
.fig-lightbox-close {
  position: fixed; top: 14px; right: 14px; z-index: 81;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}

/* ================= 翻页按钮（mobile.js 注入，全端显示） =================
 * 桌面：右下角低调半透明、悬停提亮；移动布局（body.mobile-ui）：高可见。
 * bottom:52 避开 deck-footer（bottom:24）与右侧页面索引条（垂直居中，15 页 deck 约 500px 高）。 */
.deck-nav {
  position: fixed; right: 14px; bottom: 52px; z-index: 30;
  display: flex; gap: 10px;
}
.deck-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-1);
  box-shadow: var(--shadow); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s var(--ease), transform .1s var(--ease);
}
.deck-nav-btn:active { transform: scale(0.94); }
.deck-nav-btn:disabled { opacity: 0.3 !important; cursor: default; }
/* 桌面（可悬停指针）默认低调，悬停提亮 */
@media (hover: hover) {
  .deck-nav-btn { opacity: 0.35; }
  .deck-nav-btn:hover { opacity: 1; }
}
/* 移动布局（竖屏重排 / 缩放模式）保持高可见 */
body.mobile-ui .deck-nav-btn { opacity: 0.92; }
@media print { .deck-nav { display: none !important; } }

/* ================= A) 竖屏重排（手机竖屏） ================= */
@media (max-width: 860px) and (orientation: portrait) {
  /* 页框：收 padding、内容顶对齐、超高时页内竖滚（mobile.js 竖滑翻页会判断滚动余量） */
  .slide {
    padding: 52px 20px 60px;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* base.css 排版类按窄屏收敛 */
  .eyebrow { font-size: 11px; }
  .kicker { font-size: 12px; }
  h1.title, .h1 { font-size: 34px; line-height: 1.12; }
  h2.title, .h2 { font-size: 27px; line-height: 1.16; }
  h3, .h3 { font-size: 21px; }
  h4, .h4 { font-size: 16px; }
  .lede { font-size: 15px; line-height: 1.6; max-width: none; }

  /* 布局原语：多列塌成单列、间距收敛 */
  .grid { gap: 14px; }
  /* !important 压过 deck 里常见的内联 style="grid-template-columns:1.05fr 1fr" —— 竖屏下任何多列比例都失去意义 */
  .g2, .g3, .g4 { grid-template-columns: 1fr !important; }
  /* grid/flex 子项 min-width 默认为 auto，会被 pre 长行/表格撑宽导致整列溢出视口，必须归零 */
  .grid > *, .row > * { min-width: 0; }
  .row { flex-wrap: wrap; gap: 14px; }
  .stack > * + * { margin-top: 10px; }
  .card { padding: 16px 18px; }
  .pill { font-size: 11px; }

  /* chrome 收敛，保留页码与进度条 */
  .deck-header { top: 14px; left: 20px; right: 20px; font-size: 10px; }
  .deck-footer { bottom: 14px; left: 20px; right: 20px; font-size: 10.5px; }

  /* deck 约定类（各 deck 复制粘贴的同名 deck-scoped 类，按 mobile.css 后置顺序胜出） */
  .tbl { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th { font-size: 10px; padding: 6px 10px; }
  .tbl td { padding: 7px 10px; }
  pre.code { font-size: 11.5px; line-height: 1.6; padding: 12px 14px; }
  /* 大信息量 SVG 图：竖屏保持完整入屏（不裁切、不越界），细节由 mobile.js 的「点按放大」lightbox 承担 */
  .fig { position: relative; }
  .fig-zoom-hint {
    display: inline-flex; align-items: center;
    position: absolute; right: 10px; bottom: 10px;
    font-family: var(--font-mono); font-size: 10px; color: var(--accent);
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 3px 10px; box-shadow: var(--shadow);
    pointer-events: none;
  }
  .qa h4 { font-size: 13.5px; }
  .qa p, .step p { font-size: 12px; }
  .stat b { font-size: 22px; }
  .footnote { font-size: 10px; }
}