/* ============================================================
   索引页外壳 · 一张印在纸上的书目
   ------------------------------------------------------------
   索引页（各栏目的 index.html）原来各自带一份 4.5 KB 的内联样式，
   是 2026-09 那套圆角+浅灰的「App 卡片」语言。这一版把它换成和
   正文页、门户、游戏厅、大学书架同一套「印张」语言。

   好在四个索引页用的是同一套类名（.wrap / .sub / .warn / .hint /
   .card / .icon / .body / .name / .desc / .go / .badge / .stage /
   .num / .title / .topics），所以这一个文件就能同时驱动它们——
   页面 HTML 只把内联 <style> 换成 <link> 到这个文件，一个字不用改。

   黑白里怎么分层（和游戏厅、书架同一条规矩）——靠线型：
     我为你写的  .badge.mine  实线（且翻成负片）
     免费资源    .badge.free  点线
     站外链接    .badge.link  虚线
   指到哪一张卡片，那一张整张翻成负片（纸墨互换），和书架上抽出一本书
   是同一个动作。

   变量名与 正文.css 完全一致；另外把 --ink-faint / --line 等旧名也留成
   别名，因为索引页正文里还有 4 处内联 style="…var(--line)…"。
   ============================================================ */

:root {
  color-scheme: light dark;

  --paper: #ffffff;
  --desk:  #fafafc;
  --ink:   #0a0a0b;
  --mut:   rgb(10 10 11 / 56%);
  --dim:   rgb(10 10 11 / 40%);
  --mesh:  rgb(10 10 11 / 8%);
  --rule:  rgb(10 10 11 / 15%);
  --rule2: rgb(10 10 11 / 42%);
  --plate: rgb(10 10 11 / 80%);
  --cloth: rgb(10 10 11 / 5.5%);
  --code-bg: #0a0a0b;
  --code-fg: #f4f4f5;

  --r: 2px;

  /* 旧变量名别名 —— 只为不改动页面正文里的内联 style */
  --bg: var(--desk);
  --surface: var(--cloth);
  --surface-2: color-mix(in srgb, var(--ink) 9%, transparent);
  --hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --ink-soft: var(--mut);
  --ink-faint: var(--dim);
  --line: var(--rule);
  --line-2: var(--rule2);
  --mark: var(--ink);
  --inverse-bg: var(--ink);
  --inverse-fg: var(--paper);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0b0c;
    --desk:  #0f1013;
    --ink:   #f4f4f5;
    --mut:   rgb(244 244 245 / 56%);
    --dim:   rgb(244 244 245 / 42%);
    --mesh:  rgb(244 244 245 / 7%);
    --rule:  rgb(244 244 245 / 15%);
    --rule2: rgb(244 244 245 / 34%);
    --plate: rgb(244 244 245 / 26%);
    --cloth: rgb(244 244 245 / 5.5%);
    --code-bg: #f4f4f5;
    --code-fg: #0a0a0b;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 30px 22px 70px;
  background: var(--desk); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 16px; line-height: 1.78; letter-spacing: .002em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
::selection { background: var(--ink); color: var(--paper); }

/* ——— 印张本体：细框 + 13px 网点 + 四角套准角线 ——— */
.wrap {
  position: relative; isolation: isolate;
  max-width: 880px; margin: 0 auto; padding: 40px 36px 38px;
  background-color: var(--paper);
  background-image: radial-gradient(circle, var(--mesh) 0 .9px, transparent 1.15px);
  background-size: 13px 13px;
  border: 1px solid var(--plate);
  border-radius: var(--r);
}
.wrap::before {
  content: ''; position: absolute; inset: 9px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2)),
    linear-gradient(var(--rule2), var(--rule2)), linear-gradient(var(--rule2), var(--rule2));
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px,
                   13px 1px, 1px 13px, 13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top,
                       left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.wrap > * { position: relative; z-index: 1; }

/* ——— 标题 ——— */
h1 {
  font-size: 31px; font-weight: 700; letter-spacing: .01em; line-height: 1.26;
  margin: 0 0 0; padding-bottom: 16px; position: relative;
}
h1::after {
  content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule2);
}
.sub { color: var(--mut); font-size: 13.5px; margin: 16px 0 38px; letter-spacing: .02em; }

/* 分组标题：一条细线 + 线上那截加重墨块（和门户页头同一个记号） */
h2 {
  position: relative; display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mut); margin: 54px 0 10px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
h2::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 52px; height: 2px; background: var(--ink);
}

/* ——— 徽章：靠线型区分，不靠颜色 ——— */
.badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r);
  letter-spacing: .08em; text-transform: none; vertical-align: middle;
  border: 1px solid transparent;
}
.badge.mine { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.badge.free { border: 1px dotted var(--rule2); color: var(--mut); }
.badge.link { border: 1px dashed var(--rule2); color: var(--dim); }
.badge.zh   { border: 1px solid var(--rule2); color: var(--mut); }

.hint { color: var(--mut); font-size: 13.5px; margin: 12px 0 20px; }

/* ——— 书目卡片：指到哪一张，那一张翻成负片 ——— */
a.card, a.stage {
  display: flex; align-items: center; gap: 18px; padding: 15px 18px; margin: 9px 0;
  background: transparent; border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--rule);
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
a.stage { align-items: flex-start; }
a.card:hover, a.stage:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  box-shadow: none; transform: translateX(2px);
}
.card .icon {
  flex: 0 0 30px; font-size: 17px; text-align: center; color: var(--dim);
  transition: color .16s ease;
}
a.card:hover .icon { color: var(--paper); }
.card .body, .stage .body { flex: 1 1 auto; min-width: 0; }
.card .name, .stage .title {
  font-weight: 600; font-size: 15px; margin-bottom: 3px; letter-spacing: -.005em;
}
.card .desc, .stage .topics {
  color: var(--mut); font-size: 13.5px; line-height: 1.65;
  transition: color .16s ease, opacity .16s ease;
}
.card .desc strong, .stage .topics b { color: var(--mut); font-weight: 600; }
a.card:hover .desc, a.stage:hover .topics { color: inherit; opacity: .72; }
a.card:hover .desc strong, a.stage:hover .topics b { color: inherit; opacity: 1; }
.card .go, .stage .go {
  flex: 0 0 auto; color: var(--rule2); font-size: 16px;
  transition: color .16s ease, transform .16s ease;
}
a.card:hover .go, a.stage:hover .go { color: var(--paper); transform: translateX(3px); }

/* 阶段讲义：编号像刻度尺上的一格 */
.stage .num {
  flex: 0 0 40px; text-align: right; font-size: 12px; color: var(--dim);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  padding: 3px 12px 0 0; border-right: 1px dotted var(--rule2);
  align-self: stretch;
}
a.stage:hover .num { color: var(--paper); opacity: .7; border-right-color: var(--paper); }

/* ——— 旁注：一条点线 ——— */
.note, .warn {
  border-left: 3px dotted var(--rule2); background: var(--cloth);
  padding: 15px 20px; border-radius: 0; color: var(--mut);
  font-size: 14px; margin: 26px 0; line-height: 1.78;
}
.note strong, .warn strong { color: var(--ink); }

code {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, monospace; font-size: .88em;
  background: var(--cloth); color: var(--ink); padding: 2px 5px; border-radius: var(--r);
}

/* ——— 固定出入口：两张小票根（同正文页） ——— */
.backbtn, .shelfbtn {
  position: fixed; top: 14px; z-index: 200;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; border: 1.5px solid var(--plate); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
  text-decoration: none; border-bottom: 1.5px solid var(--plate);
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.backbtn { left: 14px; }
.shelfbtn { right: 14px; }
.backbtn:hover, .shelfbtn:hover {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.backbtn .arw { font-size: 13px; line-height: 1; padding-right: 9px; border-right: 1px dotted currentColor; }
.shelfbtn .arw { font-size: 13px; line-height: 1; padding-left: 9px; border-left: 1px dotted currentColor; order: 2; }

/* ——— 页脚 ——— */
.site-foot {
  margin: 40px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--dim); letter-spacing: .06em;
}

/* ——— 响应式 ——— */
@media (max-width: 900px) {
  body { padding: 22px 14px 56px; }
  .wrap {
    margin: 0; padding: 30px 18px 32px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .wrap::before { display: none; }
  h1 { font-size: 25px; padding-bottom: 14px; }
  h2 { margin-top: 46px; }
  .backbtn, .shelfbtn { top: 10px; padding: 6px 11px; font-size: 10.5px; letter-spacing: .1em; }
  .backbtn { left: 10px; }
  .shelfbtn { right: 10px; }
  a.card, a.stage { padding: 14px 15px; gap: 14px; }
  .card .icon { flex: 0 0 22px; font-size: 15px; }
  .stage .num { flex: 0 0 32px; padding-right: 9px; }
}

@media print {
  .backbtn, .shelfbtn, .navStrip { display: none; }
  body { background: var(--paper); color: var(--ink); padding: 0; font-size: 11pt; }
  .wrap { border: 0; background-image: none; max-width: none; padding: 0; }
  .wrap::before { display: none; }
  a.card, a.stage { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}