/*
 * 介绍页（其余 A 期页面）共用排版：science / course / about / faq / privacy / terms / 404。
 * 首页专用的 home.css 不在这里复用。
 * 颜色、字号、间距、动效一律取 tokens.css 的变量；动效只用 site.css 的 .reveal / .slide-in / .draw-x / .draw-y / .pop。
 *
 * 介绍页是"一夜里安静的一页"：入夜色背景、宽留白、琥珀只用在关键处，比首页更朴素，以读为主。
 */
@import url("tokens.css");

/* ---------- 页面骨架 ---------- */
.page {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--sp-8) var(--sp-10);
  /* 页面顶部一层极淡的月光，往下就没了：让"一页"有上沿，不靠边框 */
  background: radial-gradient(60% 34rem at 50% -8rem, var(--c-amber-a06), transparent 78%);
}
.page-main { display: grid; gap: var(--sp-8); }

/* 页头：页面名、主标题、导语。和正文之间用一条细线收住 */
.page-hero {
  display: grid; gap: var(--sp-5);
  max-width: 44rem;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--c-line);
}
.page-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--c-faint);
}
.page-kicker::before {          /* 和 logo 缺口里那个光点同一个形状 */
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-amber); flex-shrink: 0;
}
.page-lead { max-width: var(--measure); }
.page-hero .btn-row { margin-top: var(--sp-2); }

/* ---------- 两栏：左边目录，右边正文（电脑）；手机上下排 ---------- */
.layout { display: grid; gap: var(--sp-8); }
.layout-body { display: grid; gap: var(--sp-9); min-width: 0; }
@media (min-width: 56.25em) {
  .layout { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
  .layout-toc { position: sticky; top: 6.5rem; }   /* 顶栏 5rem + 一点呼吸 */
}

/* ---------- 目录 ----------
 * 电脑：常显的竖排目录。手机：收进 <details>，点开才占地方（不开 JS 也能展开）。
 * 状态：默认 / 悬停 / 聚焦 / 当前读到的位置由锚点自身承担，不加 JS 高亮。
 */
.toc { font-size: var(--fs-small); line-height: 1.6; }
.toc-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--c-faint);
}
.toc-list { display: grid; gap: var(--sp-1); }
.toc-list a {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 1px solid var(--c-line);
  color: var(--c-muted);
}
.toc-list a:hover, .toc-list a.is-hover { color: var(--c-text); border-left-color: var(--c-amber-a55); }
.toc-list a:active, .toc-list a.is-active { color: var(--c-amber); }

/* 手机上的目录：<details> 包住同一个列表 */
.toc-fold { display: block; }
.toc-fold > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--c-text-soft);
  cursor: pointer;
}
.toc-fold > summary::-webkit-details-marker { display: none; }
.toc-fold > summary:hover { color: var(--c-text); }
.toc-fold-icon { position: relative; width: 10px; height: 10px; flex-shrink: 0; }
.toc-fold-icon::before, .toc-fold-icon::after {
  content: ""; position: absolute; background: var(--c-amber);
}
.toc-fold-icon::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.toc-fold-icon::after {
  top: 0; bottom: 0; left: 4.5px; width: 1px;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.toc-fold[open] .toc-fold-icon::after { transform: scaleY(0); }
.toc-fold .toc { padding-top: var(--sp-4); }
@media (min-width: 56.25em) {
  .toc-fold > summary, .toc-fold-icon { display: none; }
  .toc-fold .toc { padding-top: 0; }
  /* 电脑上目录常显：<details> 不带 open 也把内容显示出来（作者样式优先于浏览器的兜底隐藏） */
  .toc-fold > .toc { display: block; }
}

/* ---------- 小节 ---------- */
.sec { display: grid; gap: var(--sp-5); scroll-margin-top: 6rem; }
.sec-head { display: grid; gap: var(--sp-2); }
.sec-mark {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--c-faint);
}
.sec-mark b {
  font-weight: var(--fw-regular); color: var(--c-amber);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.sec-mark i { display: block; width: 1.5rem; height: 1px; background: var(--c-amber-a30); flex-shrink: 0; }

/* 文章正文：一段一段排，不挤在一起 */
.prose { display: grid; gap: var(--sp-4); max-width: var(--measure); color: var(--c-text-soft); }
.prose > * + * { margin-top: 0; }
.prose h3 { color: var(--c-text); }
.prose strong { font-weight: var(--fw-regular); color: var(--c-text); }   /* 强调靠颜色，不加粗 */
.prose ul, .prose ol { display: grid; gap: var(--sp-2); }
.prose ul > li { position: relative; padding-left: var(--sp-5); }
.prose ul > li::before {         /* 行首一道琥珀短线，代替圆点 */
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: var(--sp-3); height: 1px; background: var(--c-amber-a55);
}
.prose ol { counter-reset: ol; }
.prose ol > li { position: relative; padding-left: var(--sp-6); counter-increment: ol; }
.prose ol > li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: var(--fs-label); line-height: var(--lh-body); color: var(--c-amber);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}

/* 小提示块：一句补充，比正文弱一级 */
.note {
  display: grid; gap: var(--sp-2);
  max-width: var(--measure);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-small); line-height: 1.9; color: var(--c-muted);
}
.note b { font-weight: var(--fw-regular); color: var(--c-text-soft); }

/* 草案横幅：隐私政策、用户协议用。琥珀左边一道实线，和免责声明块同一套读法 */
.draft-banner {
  display: grid; gap: var(--sp-1);
  max-width: var(--measure);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--c-amber-a55);
}
.draft-banner b { font-weight: var(--fw-regular); color: var(--c-amber); letter-spacing: 0.06em; }
.draft-banner p { font-size: var(--fs-small); line-height: 1.9; color: var(--c-muted); }

/* ---------- 问答折叠（<details>，不开 JS 也能点开） ----------
 * 状态：合上 / 悬停 / 键盘焦点 / 展开。展开后加号收成一道横线（竖线转 90 度叠上去），只动 transform。
 */
.qa-list { display: grid; }
.qa { border-top: 1px solid var(--c-line); }
.qa:last-child { border-bottom: 1px solid var(--c-line); }
.qa > summary {
  list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  color: var(--c-text);
  cursor: pointer;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover, .qa > summary.is-hover { color: var(--c-amber-hover); }
.qa > summary:focus-visible, .qa > summary.is-focus { outline: 2px solid var(--c-amber); outline-offset: 4px; }
.qa-q { font-size: var(--fs-h3); line-height: 1.6; letter-spacing: 0.04em; }
.qa-icon { position: relative; width: 12px; height: 12px; margin-top: 0.55em; flex-shrink: 0; }
.qa-icon::before, .qa-icon::after {
  content: ""; position: absolute; background: var(--c-amber);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.qa-icon::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.qa-icon::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.qa[open] .qa-icon::after { transform: rotate(90deg); }
.qa-a {
  display: grid; gap: var(--sp-3);
  max-width: var(--measure);
  padding: 0 0 var(--sp-6);
  color: var(--c-text-soft);
}
.qa-a p:last-child { margin-bottom: 0; }

/* ---------- 参考文献列表 ---------- */
.refs { display: grid; gap: var(--sp-4); max-width: 44rem; counter-reset: ref; }
.refs > li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3);
  align-items: baseline;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line-faint);
  font-size: var(--fs-small); line-height: 1.85; color: var(--c-muted);
  counter-increment: ref;
}
.refs > li::before {
  content: "[" counter(ref) "]";
  font-size: var(--fs-label); color: var(--c-faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.refs .ref-title { color: var(--c-text-soft); }
.refs .ref-meta { display: block; color: var(--c-faint); }

/* ---------- 课程结构图（代码画，标"示意"） ----------
 * 只用直线和圆点（和首页第 3、5 屏同一套画法），线条用 scaleY 自上而下拉开。
 */
.map { display: grid; gap: var(--sp-5); max-width: 34rem; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map-caption {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-faint);
}
.map-caption::before { content: ""; width: var(--sp-3); height: 1px; background: var(--c-amber-a30); }

/* 课程清单：编号 + 课题，一条一条 */
.lessons { display: grid; gap: 0; max-width: var(--measure); }
.lessons li {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line-faint);
  color: var(--c-text-soft);
}
.lessons li:first-child { border-top: 1px solid var(--c-line); }
.lessons .lesson-no {
  font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--c-amber);
  font-variant-numeric: tabular-nums;
}

/* ---------- 四步（沿用首页第 5 屏的读法：序号 + 一句说明） ---------- */
.steps { display: grid; gap: var(--sp-6); max-width: 44rem; counter-reset: step; }
.steps > li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-4);
  align-items: start;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-size: var(--fs-label); line-height: 1.9; color: var(--c-amber);
  font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.steps h3 { color: var(--c-text); }
.steps p { margin-top: var(--sp-2); color: var(--c-text-soft); font-size: var(--fs-small); line-height: 1.9; }

/* ---------- 404 ---------- */
.page-404 {
  display: grid; place-items: center; align-content: center; gap: var(--sp-6);
  min-height: calc(100svh - 4rem);
  margin-top: -4rem;
  padding-block: var(--sp-9);
  text-align: center;
}
@media (min-width: 56.25em) {
  .page-404 { min-height: calc(100svh - 5rem); margin-top: -5rem; }
}
.ring-404 { position: relative; width: min(46vw, 12rem); aspect-ratio: 1; }
.ring-404 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-404 .ring-main { stroke: var(--c-amber); }
.ring-404 .ring-faint { stroke: var(--c-amber-a12); }
.ring-404 .ring-dot { fill: var(--c-amber); }
.ring-404 .ring-halo {
  position: absolute; inset: -28%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(233, 184, 114, 0.16), rgba(233, 184, 114, 0.05) 55%, transparent 72%);
}
.page-404 .t-h1 { max-width: 14em; }
.page-404 .page-404-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }