/* ==========================================================================
   anydoc — 网页应用样式表

   组织结构：
     1. CSS 变量          — 颜色、字体、间距、圆角、阴影等设计令牌
     2. 基础重置          — 全局重置与基础元素样式
     3. 首页 / 落地页     — 首页布局、拖放区、错误提示
     4. 阅读器视图       — 全屏阅读器（顶栏 + 大纲 + 正文）
     5. 顶栏组件         — 顶栏按钮、文件名、格式徽章、切换器
     6. 文档内容渲染     — 文档内容渲染样式（标题、段落、列表、表格等）
     7. 分享界面         — 分享横幅与模态对话框
     8. 响应式适配       — 移动端适配（≤720px）
     9. 无障碍支持       — 减弱动画偏好支持
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量
   设计令牌：所有颜色、字体、间距等以变量定义，方便统一修改和暗色模式覆盖。
   -------------------------------------------------------------------------- */
:root {
  /* 品牌色与语义颜色 */
  --heat: #fa5d19;            /* 主强调色（橙色），用于按钮、链接、聚焦 */
  --bg: #ffffff;               /* 页面背景色 */
  --surface: #f7f7f6;          /* 卡片/面板背景色（比 bg 稍暗） */
  --text: #1a1a1a;             /* 主文本色 */
  --text-muted: #6b6b6b;       /* 次要文本色（描述、元信息） */
  --border-faint: #e7e7e6;     /* 浅边框（分隔线、卡片边框） */
  --border-loud: #c9c9c7;      /* 深边框（拖放区虚线、输入框） */
  --error: #d83a3a;            /* 错误提示色 */

  /* 字体栈：优先使用系统字体，保证加载速度 */
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* 间距体系（4px 基准） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* 圆角 */
  --radius-sm: 4px;            /* 小元素：徽章、按钮 */
  --radius-md: 8px;            /* 中等元素：代码块、卡片 */
  --radius-lg: 12px;           /* 大元素：拖放区、模态框 */

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);   /* 轻微浮起 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);   /* 模态框等 */

  /* 布局尺寸 */
  --topbar-h: 56px;            /* 顶栏高度 */
  --reader-max: 820px;         /* 正文最大宽度（阅读舒适区） */
  --outline-w: 240px;          /* 大纲侧边栏宽度 */
}

/* 暗色模式：覆盖颜色变量，保持其他令牌不变 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1b1b;
    --surface: #242424;
    --text: #ececec;
    --text-muted: #9a9a9a;
    --border-faint: #2e2e2e;
    --border-loud: #3d3d3d;
    --error: #ff6b6b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* --------------------------------------------------------------------------
   2. 基础重置
   全局重置：移除浏览器默认 margin/padding，设置统一的盒模型和基础样式。
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;       /* 使用 border-box，宽度包含 padding 和 border */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;  /* macOS 字体平滑 */
  text-rendering: optimizeLegibility;   /* 启用字距优化 */
}

/* 媒体元素默认自适应宽度 */
img,
svg,
video {
  max-width: 100%;
  display: block;
}

/* 链接使用品牌色，hover 时显示下划线 */
a {
  color: var(--heat);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* 键盘聚焦时显示橙色轮廓（无障碍） */
:focus-visible {
  outline: 2px solid var(--heat);
  outline-offset: 2px;
}

/* 按钮重置：继承字体，移除默认边框和背景 */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 禁用状态：降低透明度，禁止点击 */
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   3. 首页 / 落地页
   首页布局：左对齐流式布局，内容占满视口宽度，包含顶部品牌栏、标题、说明、拖放区和页脚。
   -------------------------------------------------------------------------- */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5) var(--space-5);
  max-width: 1080px;            /* 桌面端内容最大宽度，更宽 */
  margin: 0 auto;               /* 外部居中，但子内容自身左对齐 */
}

/* 顶部 logo + 品牌名 */
.top {
  display: flex;
  align-items: center;
  gap: var(--space-1);          /* 图标与文字间距 4px，紧凑 */
  margin-bottom: var(--space-4);  /* 顶部与下方内容间距缩小 */
}

.top .logo {
  width: 28px;
  height: 28px;
}

.top .wordmark {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;     /* 紧凑字距，品牌感 */
}

/* 主标题 */
h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;     /* 大标题更紧凑 */
  margin: 0 0 var(--space-2);
  text-align: left;
}

/* 副标题/说明文字 */
.lede {
  max-width: 640px;            /* 限制阅读宽度，官网 640px */
  color: var(--text-muted);
  text-align: left;
  margin: 0 0 var(--space-5);
  font-size: 14px;
  line-height: 1.6;
}

/* 拖放区：虚线边框的交互区域 */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;            /* 内容居中显示 */
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 160px;
  padding: var(--space-5) var(--space-6);
  border: 2px dashed var(--border-loud);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-muted);
  transition: border-color 0.15s, background 0.15s;
  font-size: 15px;
}

/* hover 或拖拽中：高亮边框和背景 */
.drop:hover,
.drop.is-drag {
  border-color: var(--heat);
  background: rgba(250, 93, 25, 0.06);
  color: var(--text);
}

/* "browse" 文字链接样式 */
.drop .pick {
  color: var(--heat);
  text-decoration: underline;
  cursor: pointer;
}

/* 错误提示 */
.err {
  margin-top: var(--space-5);
  color: var(--error);
  font-weight: 500;
  text-align: left;
}

/* 错误详情：等宽字体，便于阅读技术信息 */
.err-detail {
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
  text-align: left;
  white-space: pre-wrap;       /* 保留换行 */
  word-break: break-word;      /* 长文本自动换行 */
}

/* 页脚 */
footer {
  margin-top: auto;            /* 推到底部 */
  padding-top: var(--space-6);
  color: var(--text-muted);
  font-size: 13px;
  text-align: left;
}

/* --------------------------------------------------------------------------
   4. 阅读器视图
   全屏阅读器：固定定位铺满屏幕，顶栏 + 可选分享横幅 + 主体（大纲 + 正文）。
   -------------------------------------------------------------------------- */
.reader {
  position: fixed;
  inset: 0;                    /* 等同 top/right/bottom/left: 0 */
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* 顶栏：固定高度，包含返回按钮、文件名、操作按钮 */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border-faint);
  flex-shrink: 0;              /* 不被 flex 压缩 */
}

/* 主体区域：大纲 + 正文水平排列 */
.reader-body {
  flex: 1;
  display: flex;
  min-height: 0;               /* flex 子项溢出滚动需要 */
  overflow: hidden;
}

/* 大纲侧边栏 */
.outline {
  width: var(--outline-w);
  flex-shrink: 0;
  border-right: 1px solid var(--border-faint);
  background: var(--surface);
  overflow-y: auto;            /* 独立滚动 */
  padding: var(--space-4) var(--space-3);
}

.outline h2 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.outline ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 大纲条目：可点击跳转 */
.outline li {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.outline li:hover {
  background: var(--bg);
  color: var(--text);
}

/* 当前可见标题对应的条目高亮 */
.outline li.active {
  color: var(--heat);
  font-weight: 500;
}

/* 二级标题缩进 */
.outline li.lvl-2 {
  padding-left: var(--space-4);
}

/* 三级标题缩进 */
.outline li.lvl-3 {
  padding-left: var(--space-6);
}

/* 正文滚动区域 */
.reader-main {
  flex: 1;
  min-width: 0;                /* 防止内容撑开 flex 容器 */
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  justify-content: center;
}

/* 文档纸张容器：限制最大宽度，模拟纸张阅读体验 */
.paper {
  width: 100%;
  max-width: var(--reader-max);
  background: var(--bg);
  padding: var(--space-6);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   5. 顶栏组件
   顶栏内的各类按钮、文件信息显示、多文件切换器。
   -------------------------------------------------------------------------- */

/* 通用顶栏按钮 */
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s;
}

.tb-btn:hover {
  background: var(--border-faint);
}

.tb-btn:disabled {
  opacity: 0.4;
}

/* 分享按钮：橙色强调 */
.tb-share {
  background: var(--heat);
  color: #fff;
  font-weight: 600;
}

.tb-share:hover {
  background: #e84e0c;         /* 比 --heat 稍深 */
}

/* 文件名区域 */
.tb-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;                /* 允许文本截断 */
}

/* 文件名：超长时省略号 */
.tb-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 格式徽章：圆角小标签 */
.tb-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-loud);
  border-radius: 10px;         /* 胶囊形 */
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* 转换统计信息（格式 · 大小 · 耗时） */
.tb-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 弹性间隔：把右侧按钮推到最右 */
.spacer {
  flex: 1;
}

/* 多文件切换器：药丸形按钮组 */
.switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
}

.switcher-pill {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.switcher-pill:hover {
  color: var(--text);
}

/* 当前激活的文件 pill */
.switcher-pill.active {
  background: var(--surface);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   6. 文档内容渲染
   文档内容渲染样式：对应 renderer.js 输出的 HTML 结构。
   class="doc-render" 是文档内容的根容器。
   -------------------------------------------------------------------------- */
.doc-render {
  font-size: 16px;
  line-height: 1.65;           /* 稍宽松的行高，便于阅读 */
  color: var(--text);
}

/* 标题样式 */
.doc-render h1,
.doc-render h2,
.doc-render h3,
.doc-render h4,
.doc-render h5,
.doc-render h6 {
  font-weight: 600;
  line-height: 1.25;
  margin: var(--space-6) 0 var(--space-3);
  letter-spacing: -0.01em;
}

.doc-render h1 {
  font-size: 28px;
  margin-top: 0;               /* 第一个标题不需要顶部间距 */
}

.doc-render h2 {
  font-size: 22px;
  border-bottom: 1px solid var(--border-faint);  /* 二级标题下划线 */
  padding-bottom: var(--space-2);
}

.doc-render h3 {
  font-size: 18px;
}

.doc-render h4 {
  font-size: 16px;
}

/* 段落 */
.doc-render p {
  margin: 0 0 var(--space-4);
}

/* 链接 */
.doc-render a {
  color: var(--heat);
  text-decoration: underline;
  text-underline-offset: 2px;  /* 下划线与文字间距 */
}

/* 行内代码 */
.doc-render code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-faint);
}

/* 代码块 */
.doc-render pre {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;            /* 长代码横向滚动 */
  margin: 0 0 var(--space-4);
}

/* pre 内的 code 不需要额外边框 */
.doc-render pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* 引用块 */
.doc-render blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--border-loud);
  color: var(--text-muted);
}

/* 表格 */
.doc-render table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-4);
  font-size: 14px;
}

.doc-render th,
.doc-render td {
  border: 1px solid var(--border-faint);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: top;
}

/* 表头行 */
.doc-render th {
  background: var(--surface);
  font-weight: 600;
}

/* 列表 */
.doc-render ul,
.doc-render ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.doc-render li {
  margin: var(--space-1) 0;
}

/* 列表标记类型：对应 renderer.js 中的 MARKER_CLASS 映射 */
.doc-render ul.mk-bullet {
  list-style: disc;
}

.doc-render ul.mk-square {
  list-style: square;
}

.doc-render ol.mk-decimal {
  list-style: decimal;
}

.doc-render ol.mk-lower-alpha {
  list-style: lower-alpha;
}

.doc-render ol.mk-upper-alpha {
  list-style: upper-alpha;
}

.doc-render ol.mk-lower-roman {
  list-style: lower-roman;
}

.doc-render ol.mk-upper-roman {
  list-style: upper-roman;
}

/* 任务列表（checkbox 风格） */
.doc-render ul.task-items {
  list-style: none;
  padding-left: 0;
}

.doc-render .task-items li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

/* 未勾选的 checkbox：空方框 */
.doc-render .task-items li::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border: 1px solid var(--border-loud);
  border-radius: 3px;
  flex-shrink: 0;
}

/* 已勾选的 checkbox：橙色填充 */
.doc-render .task-items li.checked::before {
  background: var(--heat);
  border-color: var(--heat);
}

/* 文档内图片 */
.doc-render img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: var(--space-3) 0;
}

/* 脚注引用（上标数字） */
.doc-render .noteref {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--heat);
  text-decoration: none;
  padding: 0 1px;
}

/* 脚注区域 */
.doc-render .notes {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-faint);
  font-size: 13px;
  color: var(--text-muted);
}

/* 脚注返回链接 */
.doc-render .note-back {
  color: var(--heat);
  text-decoration: none;
}

/* 水平分割线 */
.doc-render hr {
  border: none;
  border-top: 1px solid var(--border-faint);
  margin: var(--space-5) 0;
}

/* --------------------------------------------------------------------------
   7. 分享界面
   分享横幅（显示在阅读器顶部）和分享对话框（模态弹窗）。
   -------------------------------------------------------------------------- */

/* 分享横幅：橙色背景条，显示过期日期 */
.share-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--heat);
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}

/* 模态遮罩层：半透明黑色背景，居中弹窗 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--space-4);
}

/* 模态框主体 */
.modal {
  width: 100%;
  max-width: 460px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}

.modal h3 {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  font-weight: 600;
}

/* 分享链接输入行：URL 输入框 + 复制按钮 */
.share-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* 分享 URL 输入框：等宽字体，只读 */
.share-url {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 var(--space-3);
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-sm);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 状态提示行 */
.share-status-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--text-muted);
  min-height: 20px;
}

/* 成功状态 */
.share-status.ok {
  color: #2c8a4a;
}

/* 错误状态 */
.share-status.err {
  color: var(--error);
}

/* --------------------------------------------------------------------------
   8. 响应式适配
   平板端适配（≤960px）：取消外部最大宽度，直接占满屏幕。
   移动端适配（≤720px）：缩小字号、更紧凑内边距、隐藏次要元素、移除大纲侧边栏。
   -------------------------------------------------------------------------- */

/* 平板端：内容占满屏幕，去掉 1280 最大宽度限制 */
@media (max-width: 1280px) {
  .page {
    max-width: none;
    margin: 0;
  }
}

/* 移动端：全宽自适应，更紧凑 */
@media (max-width: 720px) {
  .page {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  h1 {
    font-size: 24px;
  }

  .lede {
    font-size: 14px;
    max-width: 100%;
    line-height: 1.55;
  }

  .drop {
    min-height: 140px;
    padding: var(--space-4);
  }

  /* 顶栏紧凑化 */
  .topbar {
    height: 48px;
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  /* 移动端隐藏统计信息和格式徽章，节省空间 */
  .tb-meta,
  .tb-badge {
    display: none;
  }

  /* 移动端隐藏大纲侧边栏 */
  .outline {
    display: none;
  }

  .reader-main {
    padding: var(--space-4) var(--space-3);
  }

  .paper {
    padding: var(--space-4);
  }

  /* 缩小标题字号 */
  .doc-render h1 {
    font-size: 22px;
  }

  .doc-render h2 {
    font-size: 18px;
  }

  /* 代码块字号缩小 */
  .doc-render pre {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   9. 无障碍支持
   尊重用户的减弱动画偏好（系统设置），将所有动画/过渡时间降至最低。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;  /* 禁用平滑滚动 */
  }
}