/* ==========================================================================
   snowhite 博客 —— 文章详情页样式
   依赖 main.css 里的主题变量（--bg/--ink/--muted/--accent/--glass/--border...）
   深浅色通过 html[data-theme=dark] 自动切换，这里不重复定义颜色。
   ========================================================================== */

/* ---------------------------------------------------------------- 容器 */
.post-view {
  max-width: 46rem;
  margin: 0 auto;
  padding: 8px 0 64px;
}

.post-view[hidden] { display: none; }

/* 顶栏工具区：返回 + 元信息 */
.post-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.post-back:hover { color: var(--ink); background: var(--glass-strong); }

.post-meta-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--soft);
  letter-spacing: .04em;
}
.post-meta-line .dot { opacity: .5; }

/* ---------------------------------------------------------------- 标题 */
.post-header { margin-bottom: 34px; }

.post-title {
  font-size: clamp(26px, 4.6vw, 42px);
  line-height: 1.24;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--ink);
  /* 长英文/URL 不撑破容器 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-section-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  background: var(--glass);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ------------------------------------------------------------ 正文排版 */
.post-body {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
  /* 关键：任何超长内容都不允许把页面撑出横向滚动 */
  overflow-wrap: anywhere;
}

.post-body > *:first-child { margin-top: 0; }
.post-body > *:last-child { margin-bottom: 0; }

.post-body p { margin: 0 0 1.15em; }

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  margin: 1.9em 0 .7em;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.post-body h1 { font-size: 1.62em; }
.post-body h2 { font-size: 1.38em; }
.post-body h3 { font-size: 1.18em; }
.post-body h4 { font-size: 1.05em; }
.post-body h5,
.post-body h6 { font-size: 1em; color: var(--muted); }

/* 二级标题加个短下划线，阅读时好定位 */
.post-body h2 {
  padding-bottom: .35em;
  border-bottom: 1px solid var(--border);
}

.post-body ul,
.post-body ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.post-body li { margin: .35em 0; }
.post-body li > ul,
.post-body li > ol { margin: .35em 0; }

.post-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  overflow-wrap: anywhere;
}
.post-body a:hover { border-bottom-color: var(--accent); }

.post-body strong { font-weight: 650; }
.post-body em { font-style: italic; }
.post-body del { color: var(--soft); }

.post-body mark {
  background: color-mix(in srgb, var(--accent2) 38%, transparent);
  color: inherit;
  padding: 0 .18em;
  border-radius: 4px;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.2em 0;
}

.post-body blockquote {
  margin: 1.4em 0;
  padding: .7em 1.15em;
  border-left: 3px solid var(--accent);
  background: var(--glass);
  border-radius: 0 12px 12px 0;
  color: var(--muted);
}
.post-body blockquote > *:last-child { margin-bottom: 0; }

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 1.4em auto;
  border: 1px solid var(--border);
}

.post-body figure { margin: 1.4em 0; }
.post-body figcaption {
  text-align: center;
  font-size: 13.5px;
  color: var(--soft);
  margin-top: .6em;
}

/* ---------------------------------------------------------------- 代码 */
/* 行内代码 */
.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .89em;
  background: var(--glass-strong);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .12em .38em;
  overflow-wrap: anywhere;
}

/* 代码块：横向滚动而不是撑破布局（手机端关键） */
.post-body pre {
  margin: 1.4em 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--glass-strong);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.post-body pre code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre;
  overflow-wrap: normal;   /* 代码不折行，靠容器滚动 */
  color: inherit;
}

/* highlight.js 主题：浅色/深色各引一份，用媒体+data-theme 控制 */
/* 主题 CSS 已在 blog 页按需引入（见 blog/index.html） */

/* ---------------------------------------------------------------- 表格 */
.post-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.post-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  margin: 0;
}
.post-body th,
.post-body td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  overflow-wrap: anywhere;
}
.post-body th {
  background: var(--glass);
  font-weight: 650;
  white-space: nowrap;
}
.post-body tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- 状态 */
.post-state {
  text-align: center;
  padding: 72px 20px;
  color: var(--muted);
}
.post-state .big {
  font-size: 46px;
  display: block;
  margin-bottom: 14px;
  opacity: .55;
}
.post-state a { color: var(--accent); }

.post-loading {
  text-align: center;
  padding: 64px 20px;
  color: var(--soft);
  font-size: 14.5px;
}

/* 管理员查看草稿时的提示条 */
.post-draft-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent2) 55%, transparent);
  background: color-mix(in srgb, var(--accent2) 12%, transparent);
  color: var(--muted);
  font-size: 13.5px;
}

/* ------------------------------------------------------------ 移动端 */
@media (max-width: 640px) {
  .post-view { padding-bottom: 44px; }
  .post-body { font-size: 16px; line-height: 1.8; }
  .post-body pre { padding: 13px 14px; border-radius: 12px; }
  .post-body pre code { font-size: 12.5px; }
  .post-title { font-size: clamp(23px, 7vw, 32px); }
  .post-toolbar { margin-bottom: 22px; }
  .post-body h2 { margin-top: 1.7em; }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .post-back { transition: none; }
}