/* 黑白灰单色。无渐变、无阴影、无彩色、无 emoji。语义靠明度与线宽。 */
/* 骨架：首页全宽索引台账，详情页双栏卷宗（侧栏编号/meta/目录 + 主栏内容）。 */
/* 动效只做功能性的（入场 / 反馈 / 过渡），时长克制；prefers-reduced-motion 全关。 */
:root {
  --ink: #111111;
  --ink-soft: #6b6b6b;
  --ink-faint: #9a9a9a;
  --line: #e3e3e3;
  --line-strong: #111111;
  --surface: #ffffff;
  --surface-soft: #fafafa;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
a:hover { border-bottom-color: var(--ink); }

/* 桌面放开宽度：台账与卷宗都需要横向空间 */
.wrap { max-width: 1100px; margin: 0 auto; padding: 48px 32px 96px; }

/* ── 入场动效 ── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* fill 用 backwards：动画结束后不占用 transform，避免压住后续 hover 位移 */
  body[data-slug] .wrap { animation: page-in 260ms ease-out backwards; }
  .row { animation: page-in 340ms cubic-bezier(0.22, 0.7, 0.24, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
}

/* ── 首页头部 ── */
.site-head { border-bottom: 1px solid var(--line-strong); padding-bottom: 22px; margin-bottom: 8px; }
/* mono 眉头索引行：仪器面板语言 */
.index-line {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.site-head h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: 0.02em; font-weight: 600; }
.muted { color: var(--ink-soft); font-size: 14px; margin: 0; }

.crumb { margin-bottom: 28px; font-size: 14px; font-family: var(--mono); }
.crumb a { border-bottom: none; color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

/* ── 难度信号格（1~5，实心格数 = 难度）── */
.bars {
  font-family: var(--mono);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: inherit;
  white-space: nowrap;
}

/* ── 首页台账：每期一行，编号列与内容列对齐 ── */
.ledger { border-bottom: 1px solid var(--line-strong); }
.row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 20px 16px;
  margin: 0 -16px;               /* 反色块出血，选中行更整 */
  border-top: 1px solid var(--line);
  border-bottom: none;
  transition: background-color 100ms linear;
}
.row-no {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 100ms linear;
}
.row-main { min-width: 0; }
.row-meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 5px;
  transition: color 100ms linear;
}
.row-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  transition: color 100ms linear;
}
.row-summary {
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  /* 台账重索引轻摘要：单行截断，各行严格同构 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 100ms linear;
}
/* hover 反色：终端选中行，黑白灰里最强的 hover 语言 */
.row:hover { background: var(--ink); }
.row:hover .row-no,
.row:hover .row-title { color: #ffffff; }
.row:hover .row-meta,
.row:hover .row-summary { color: #b8b8b8; }

/* ── 详情页：双栏卷宗 ── */
.dossier {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.dossier-side { position: sticky; top: 40px; }
/* 超大浅灰档案编号：卷宗的视觉主体 */
.ep-no {
  font-family: var(--mono);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #d9d9d9;
  margin-bottom: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  /* 仪器开机感：字距从宽收拢，一次性 */
  .ep-no { animation: ep-no-in 420ms ease-out backwards; }
}
@keyframes ep-no-in {
  from { opacity: 0; letter-spacing: 0.3em; }
  to { opacity: 1; letter-spacing: 0.05em; }
}
/* 侧栏 meta 竖排堆叠 */
.dossier-side .meta { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin: 0; }
.dossier-side .meta .mi { display: block; padding: 2px 0; white-space: nowrap; }
.dossier-side .tags { margin-top: 14px; }
.tag {
  display: inline-block;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 12px;
  padding: 0 6px;
  margin: 0 6px 6px 0;
  line-height: 1.6;
}
/* 侧栏目录：纯锚点 */
.dossier-toc { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 12px; }
.dossier-toc a {
  display: block;
  border-bottom: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  padding: 5px 0;
}
.dossier-toc a:hover { color: var(--ink); }
section[id], details[id] { scroll-margin-top: 24px; }

.ep-title { font-size: 27px; margin: 4px 0 28px; font-weight: 600; line-height: 1.4; }

/* ── 区块 ── */
.block { margin-bottom: 44px; }
.block h2 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.sec-no { font-family: var(--mono); color: var(--ink-faint); letter-spacing: 0.1em; }
.block > p { margin: 0 0 12px; white-space: pre-wrap; }

.links { list-style: none; padding: 0; margin: 8px 0 0; }
.links li { margin-bottom: 6px; font-size: 14px; }

/* ── 微博：去盒化记录流，元信息归左、动作归右 ── */
.post { border: none; border-top: 1px solid var(--line); padding: 22px 0; margin-bottom: 0; }
.post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.head-break { display: none; }
.role {
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
}
.post[data-role="复盘"] .role,
.post[data-role="解答"] .role {
  /* 浅灰细斜纹 + 黑字：纹路只做区分，不再压住笔画 */
  background: repeating-linear-gradient(45deg, #e9e9e9 0 1.5px, #ffffff 1.5px 5px);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.post[data-role="补充"] .role,
.post[data-role="提示"] .role {
  background: #fff;
  color: var(--ink-soft);
  border-color: var(--line);
}
.post-date { font-size: 12px; color: var(--ink-faint); font-family: var(--mono); }
/* 出处紧跟日期，同属元信息组 */
.post-link { font-size: 12px; border-bottom: none; color: var(--ink-soft); }
.post-link::before { content: "· "; color: var(--ink-faint); }
.post-link:hover { color: var(--ink); }
.post-body { white-space: pre-wrap; font-size: 15px; word-break: break-word; }
.post-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 14px; }
.post-images img { width: 100%; height: auto; display: block; border: 1px solid var(--line); cursor: zoom-in; }
.post-images:has(img:only-child) { display: block; max-width: 460px; }

/* ── 配图灯箱：淡入缩放，点任意处 / Esc / × 关闭 ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(255, 255, 255, 0.94);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--line);
  background: #fff;
  transform: scale(0.985);
  transition: transform 180ms ease-out;
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1;
}

/* ── 按钮 ── */
button {
  font: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
button:hover { background: var(--ink); color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: #fff; color: var(--ink); }
button.copy { margin-left: auto; min-width: 5.5em; text-align: center; }
button.copy.copied { background: var(--ink); color: #fff; pointer-events: none; }

/* ── 解答（默认折叠，防剧透）── */
.solution { border: 1px solid var(--line); padding: 0 16px; margin-bottom: 44px; }
.solution > summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 14px 0;
}
.solution > summary::-webkit-details-marker { display: none; }
.solution > summary::after { content: " ＋"; font-family: var(--mono); }
.solution[open] > summary::after { content: " －"; }
.solution[open] > summary { border-bottom: 1px solid var(--line); }
.solution-body { padding: 16px 0 20px; }
/* 拆卷：展开后内容左侧一道黑线引导 */
.solution[open] .solution-body {
  border-left: 2px solid var(--ink);
  padding-left: 20px;
  margin-left: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .solution[open] .solution-body { animation: sol-in 250ms ease-out; }
}
@keyframes sol-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.sol-section { margin-bottom: 20px; }
.sol-section h3 { font-size: 15px; margin: 0 0 6px; font-weight: 600; }
.sol-section p { margin: 0; white-space: pre-wrap; font-size: 15px; }

/* 行内强调：解答/谜面里的 **粗体** 与 `行内代码` */
strong { font-weight: 600; color: var(--ink); }
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  padding: 0 4px;
  word-break: break-all;
}

/* 无序列表：解答与谜面里的「- 」列表 */
.sol-section ul,
.block > ul {
  margin: 10px 0 14px;
  padding-left: 22px;
}
.sol-section li,
.block > ul li {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
}
.sol-section li::marker,
.block > ul li::marker {
  color: var(--ink-faint);
}

/* ── 解答里的代码块 ── */
.code-block { position: relative; margin-top: 14px; }
.code-block button.copy { position: absolute; top: 8px; right: 8px; margin-left: 0; background: #fff; }
pre.code {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}

/* ── 口令校验：终端化（> 前缀 + 底线输入 + 扫描线）── */
.verify-form { display: flex; gap: 10px; margin-top: 14px; position: relative; align-items: baseline; }
.verify-form .prompt { font-family: var(--mono); font-size: 15px; color: var(--ink-faint); }
.verify-form input {
  flex: 1;
  font: inherit;
  font-family: var(--mono);
  font-size: 15px;
  padding: 8px 2px;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
/* focus 加粗用投影补第二像素，避免布局跳动 */
.verify-form input:focus { outline: none; box-shadow: 0 1px 0 var(--ink); }
.verify-form::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33%;
  height: 1px;
  background: var(--ink);
  opacity: 0;
}
.verify-item.loading .verify-form::after {
  opacity: 1;
  animation: scan 1s linear infinite;
}
@keyframes scan {
  from { left: -33%; }
  to { left: 100%; }
}
.verify-result { min-height: 24px; margin: 12px 0 0; font-size: 14px; }
.verify-result[data-state="ok"] { color: var(--ink); font-weight: 600; }
.verify-result[data-state="ok"]::before { content: "■ "; font-family: var(--mono); }
.verify-result[data-state="no"] { color: var(--ink-soft); }
.verify-result[data-state="no"]::before { content: "□ "; font-family: var(--mono); color: var(--ink-faint); }
.verify-result[data-state="err"] { color: var(--ink-soft); }

/* ── 页脚：档案馆的封底 ── */
.site-foot {
  margin-top: 72px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ── 平板：卷宗回落单栏 ── */
@media (max-width: 900px) {
  .dossier { grid-template-columns: 1fr; gap: 0; }
  .dossier-side { position: static; margin-bottom: 6px; }
  .ep-no { font-size: 40px; margin-bottom: 14px; }
  /* meta 回横排：项间恢复竖线分隔 */
  .dossier-side .meta .mi { display: inline; padding: 0; }
  .dossier-side .meta .mi + .mi::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.85em;
    background: var(--line);
    margin: 0 12px;
    vertical-align: -0.08em;
  }
  .dossier-side .tags { display: inline; margin-top: 0; margin-left: 8px; }
  .dossier-toc { display: none; }
}

/* ── 手机（≤600px）── */
@media (max-width: 600px) {
  .wrap { padding: 28px 16px 64px; }
  .site-head h1 { font-size: 22px; }
  .ep-title { font-size: 20px; margin-bottom: 22px; }
  /* 台账行折为上下排，期号退回 mono 小字 */
  .row { grid-template-columns: 1fr; gap: 2px; padding: 16px 12px; margin: 0 -12px; }
  .row-no { font-size: 13px; font-weight: 400; color: var(--ink-faint); }
  .row-title { font-size: 17px; }
  /* 窄屏摘要放宽到两行 */
  .row-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .post-head { row-gap: 6px; }
  .head-break { display: block; flex-basis: 100%; height: 0; }
  button { min-height: 40px; padding: 8px 16px; }
  .verify-form { flex-wrap: wrap; }
  .verify-form input { flex: 1 1 100%; order: -1; }
  .lightbox { padding: 8px; }
  .site-foot { margin-top: 56px; }
}

/* ── 减少动态偏好：全部动效关闭 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}