/* ==========================================================================
   personal-translation · 阅读主题
   颜色、字号全部走 CSS 变量。新增文档库时直接引用这些变量，
   不要在页面里写死颜色。
     配色：html[data-theme] = anthropic | html | github | mocha
     字体：html[data-font]  = auto | sans | serif
     字号：html 上的 --fs（14px ~ 22px），settings.js 负责写入
   ========================================================================== */

:root {
  --fs: 16px;
  --lh: 1.75;
  --header-h: 48px;
  --radius: 6px;
  --font-sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;
  --font-body: var(--font-sans);
}

/* ---------- 配色 ---------- */

/* Anthropic 护眼亮色：象牙纸底 + 陶土色强调 */
html[data-theme="anthropic"] {
  color-scheme: light;
  --bg: #FAF9F5;
  --bg-soft: #F1EFE8;
  --bg-code: #F0EFEA;
  --fg: #141413;
  --fg-muted: #5E5D59;
  --fg-faint: #87867F;
  --border: #E5E2D8;
  --accent: #D97757;
  --accent-strong: #C6613F;
  --link: #B4512F;
  --link-visited: #8C6A52;
  --mark: #EBDBBC;
  --mark-fg: #141413;
  --sel: #E3DACC;
  --shadow: 0 1px 2px rgba(20, 20, 19, .07);
}

/* 标准 HTML 亮色：白底黑字，默认链接蓝，直角，衬线 */
html[data-theme="html"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-soft: #F2F2F2;
  --bg-code: #F5F5F5;
  --fg: #000000;
  --fg-muted: #3F3F3F;
  --fg-faint: #767676;
  --border: #C0C0C0;
  --accent: #0000EE;
  --accent-strong: #0000EE;
  --link: #0000EE;
  --link-visited: #551A8B;
  --mark: #FFFF00;
  --mark-fg: #000000;
  --sel: #B3D4FF;
  --shadow: none;
  --radius: 0px;
}

/* GitHub 暗色 */
html[data-theme="github"] {
  color-scheme: dark;
  --bg: #0D1117;
  --bg-soft: #161B22;
  --bg-code: #161B22;
  --fg: #E6EDF3;
  --fg-muted: #9198A1;
  --fg-faint: #7D8590;
  --border: #30363D;
  --accent: #58A6FF;
  --accent-strong: #79C0FF;
  --link: #58A6FF;
  --link-visited: #D2A8FF;
  --mark: #BB800959;
  --mark-fg: #E6EDF3;
  --sel: #264F78;
  --shadow: 0 1px 2px rgba(1, 4, 9, .6);
}

/* Catppuccin Mocha 暗色 */
html[data-theme="mocha"] {
  color-scheme: dark;
  --bg: #1E1E2E;
  --bg-soft: #181825;
  --bg-code: #181825;
  --fg: #CDD6F4;
  --fg-muted: #A6ADC8;
  --fg-faint: #7F849C;
  --border: #313244;
  --accent: #CBA6F7;
  --accent-strong: #B4BEFE;
  --link: #89B4FA;
  --link-visited: #CBA6F7;
  --mark: #F9E2AF;
  --mark-fg: #1E1E2E;
  --sel: #45475A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---------- 设置项 ---------- */

html[data-font="auto"],
html[data-font="sans"] { --font-body: var(--font-sans); }
html[data-font="serif"] { --font-body: var(--font-serif); }
/* 标准 HTML 主题的默认字体是衬线；用户显式选过字体就不覆盖 */
html[data-theme="html"][data-font="auto"] { --font-body: var(--font-serif); }

/* ---------- 基础 ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs);
  line-height: var(--lh);
}

::selection { background: var(--sel); }

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: .2em;
}
a:hover { color: var(--accent-strong); }
a:visited { color: var(--link-visited); }
a:visited:hover { color: var(--accent-strong); }

img,
video { max-width: 100%; height: auto; }

figure img,
figure video { display: block; }

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--accent-strong); }
.brand .brand-sep { color: var(--fg-faint); font-weight: 400; }

.topbar-spacer { flex: 1; }

.btn {
  font: inherit;
  font-size: .875em;
  line-height: 1;
  padding: .5em .7em;
  color: var(--fg-muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { color: var(--fg); border-color: var(--accent); }
.btn[aria-expanded="true"] { color: var(--accent-strong); border-color: var(--accent); }

.toc-btn { display: none; }

/* ---------- 正文排版 ---------- */

.article {
  padding: 32px 24px 96px;
}

.article > :first-child { margin-top: 0; }

h1, h2, h3, h4 {
  line-height: 1.35;
  margin: 2em 0 .6em;
  font-weight: 650;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

h1 { font-size: 1.6em; margin-top: 0; }
h2 { font-size: 1.25em; padding-bottom: .25em; border-bottom: 1px solid var(--border); }
h3 { font-size: 1.08em; }
h4 { font-size: 1em; color: var(--fg-muted); }

p, ul, ol, blockquote, table, pre, figure { margin: 0 0 1em; }

ul, ol { padding-left: 1.5em; }
li + li { margin-top: .25em; }
li > ul, li > ol { margin: .25em 0 0; }

blockquote {
  margin: 0 0 1em;
  padding: .1em 1em;
  color: var(--fg-muted);
  border-left: 3px solid var(--border);
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

mark { background: var(--mark); color: var(--mark-fg); padding: 0 .15em; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: .9em;
}

code {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .1em .35em;
}

pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; }

table {
  border-collapse: collapse;
  width: 100%;
  display: block;
  overflow-x: auto;
}
th, td {
  border: 1px solid var(--border);
  padding: .4em .7em;
  text-align: left;
}
th { background: var(--bg-soft); }

.doc-meta,
.page-nav {
  margin-top: 3em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
  font-size: .85em;
  color: var(--fg-muted);
}
.doc-meta a { color: var(--link); }

.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.page-nav span { color: var(--fg-faint); }

/* ---------- 文档页：侧栏 ---------- */

.layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  align-items: start;
}

.sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 24px 12px 24px 16px;
  border-right: 1px solid var(--border);
  font-size: .9em;
}

.toc-back {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--fg-muted);
  font-size: .9em;
  text-decoration: none;
}
.toc-back:hover { color: var(--accent-strong); }

.toc-lib {
  font-weight: 650;
  color: var(--fg);
  margin-bottom: 10px;
}

.toc ul, .toc ol { list-style: none; margin: 0; padding: 0; }
.toc-pages > li > a {
  display: block;
  padding: 3px 8px;
  border-radius: var(--radius);
  color: var(--fg-muted);
  text-decoration: none;
}
.toc-pages > li > a:hover { background: var(--bg-soft); color: var(--fg); }
.toc-pages > li.current > a {
  color: var(--fg);
  font-weight: 600;
  background: var(--bg-soft);
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.toc-subs { margin: 2px 0 8px 8px; border-left: 1px solid var(--border); }
.toc-subs li a {
  display: block;
  padding: 2px 8px;
  color: var(--fg-faint);
  text-decoration: none;
  font-size: .95em;
}
.toc-subs li a:hover { color: var(--fg); }
.toc-subs li a.active {
  color: var(--accent-strong);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--accent);
}

/* ---------- 目录页 ---------- */

.wrap {
  max-width: 44em;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.wrap h1 { margin-bottom: .3em; }

.lede {
  color: var(--fg-muted);
  margin: 0 0 1em;
}

.filter {
  font: inherit;
  font-size: .9em;
  width: 100%;
  padding: .5em .7em;
  margin-bottom: 1.5em;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter::placeholder { color: var(--fg-faint); }
.filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

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

.libs li {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.libs li:last-child { border-bottom: 1px solid var(--border); }

.lib-title {
  font-size: 1.08em;
  font-weight: 650;
  text-decoration: none;
}

.lib-desc {
  margin: .3em 0 0;
  color: var(--fg-muted);
  font-size: .92em;
}

.lib-meta {
  margin: .35em 0 0;
  font-size: .82em;
  color: var(--fg-faint);
}
.lib-meta a { color: var(--fg-faint); }
.lib-meta a:hover { color: var(--accent-strong); }
.lib-meta span + span::before { content: " · "; }

.empty {
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.footnote {
  margin-top: 3em;
  font-size: .85em;
  color: var(--fg-faint);
}

/* ---------- 设置面板 ---------- */

.settings {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  right: 16px;
  z-index: 40;
  width: 268px;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .9em;
}
.settings[hidden] { display: none; }

.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.settings-label {
  flex: 0 0 3em;
  color: var(--fg-muted);
  font-size: .92em;
}

.chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: .92em;
  padding: .25em .5em;
  color: var(--fg-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.chip:hover { color: var(--fg); }
.chip[aria-pressed="true"] {
  color: var(--fg);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.swatch {
  width: 12px;
  height: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-fg) 50%);
}

.settings input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.settings output {
  flex: 0 0 2.8em;
  text-align: right;
  color: var(--fg-muted);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
}

.settings-foot { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ---------- 窄屏 ---------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    z-index: 30;
    width: 264px;
    height: calc(100vh - var(--header-h));
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .15s ease;
  }
  body.nav-open .sidebar { transform: none; }

  .toc-btn { display: inline-block; }

  .article { padding: 24px 16px 72px; }
  .wrap { padding: 32px 16px 72px; }
}