/* blog-rs app.css — 单一样式表，三主题（UI IA §11）。无框架，无 JS。 */

/* ---------- 主题变量 ---------- */
:root, html[data-theme="a"] {
  --measure: 60rem; --paper: #FAFAF7; --ink: #1A1A1A; --muted: #6B665E;
  --accent: #C0392B; --code-bg: #F5F4F0; --rule: #D8D4CC;
  --serif: Georgia, "Times New Roman", "Source Han Serif SC", serif;
  --sans: -apple-system, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --c-keyword: #cf222e; --c-string: #0a3069; --c-comment: #57606a;
  --c-func: #8250df; --c-const: #0550ae; --c-type: #953800;
}
@media (prefers-color-scheme: dark) {
  :root, html[data-theme="a"] {
    --paper: #1F1E1C; --ink: #E8E5E0; --muted: #9A948A;
    --accent: #D9634F; --code-bg: #2A2926; --rule: #3A3835;
    --c-keyword: #ff7b72; --c-string: #a5d6ff; --c-comment: #8b949e;
    --c-func: #d2a8ff; --c-const: #79c0ff; --c-type: #ffa657;
  }
}
html[data-theme="b"] {
  --paper: #FFFFFF; --ink: #111111; --muted: #777777;
  --accent: #111111; --code-bg: #FFFFFF; --rule: #EBEBEB;
  --sans: -apple-system, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --c-keyword: #111111; --c-string: #333333; --c-comment: #999999;
  --c-func: #111111; --c-const: #333333; --c-type: #111111;
}
html[data-theme="c"] {
  --measure: 60rem; --paper: #121216; --ink: #D8D8D0; --muted: #7A7A72;
  --accent: #33D17A; --code-bg: #0A0A0D; --rule: #333338;
  --sans: -apple-system, "Segoe UI", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Noto Sans Mono CJK SC", monospace;
  --c-keyword: #33D17A; --c-string: #A8D7A8; --c-comment: #5A5A55;
  --c-func: #66D9E8; --c-const: #66AADD; --c-type: #DDAA66;
}

/* ---------- 骨架 ---------- */
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0; padding-bottom: 4rem;
  background: var(--paper); color: var(--ink);
  font: 1rem/1.8 var(--sans);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .4rem .8rem; z-index: 9;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site {
  max-width: calc(var(--measure, 60rem) + 22rem); margin: 0 auto;
  padding: 1.2rem 1.5rem;
  display: flex; justify-content: space-between; align-items: baseline;
  position: relative;
}
.site::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0;
  border-bottom: 1px solid var(--rule);
}
.site-name { font: 600 1.15rem var(--serif, inherit); color: var(--ink); letter-spacing: .02em; }
html[data-theme="b"] .site-name, html[data-theme="c"] .site-name { font-family: var(--sans); }
html[data-theme="b"] .site { max-width: 36rem; } /* proto theme-b.css:15 全局 header 宽度 */
.site-name a { color: inherit; }
.tools { font-size: .9rem; }
.tools button.linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; text-decoration: none;
}
.tools button.linklike:hover { text-decoration: underline; }

.page {
  max-width: calc(var(--measure, 60rem) + 22rem); margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid; grid-template-columns: minmax(0, var(--measure)) 16rem; gap: 3rem;
}
html[data-theme="b"] .page { display: block; max-width: 36rem; }
main { min-width: 0; }

/* ---------- 列表页（40rem 窄列） ---------- */
.list { max-width: 40rem; }
.list .year { font: 600 1.1rem var(--serif, inherit); color: var(--muted); margin: 2rem 0 .6rem; }
.list .item { margin: .9rem 0; }
.list .item .head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.list .item .date { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.list .item p { margin: .15rem 0 0; color: var(--muted); font-size: .92rem; }
.list .tags { font-size: .82rem; margin-left: .5rem; }
.list .tags a { color: var(--muted); margin-right: .4rem; }

/* 列表页窄列与详情解耦（UI IA §4.2；proto :has 覆写移植，theme-a.css:91-92 / theme-c.css:91-92） */
.page:has(main.list) { display: block; max-width: 62rem; }
body:has(main.list) .site { max-width: 62rem; }
html[data-theme="c"] .page:has(main.list) { max-width: 64rem; }
html[data-theme="c"] body:has(main.list) .site { max-width: 64rem; }
html[data-theme="b"] .page:has(main.list) { max-width: 36rem; }
html[data-theme="b"] body:has(main.list) .site { max-width: 36rem; } /* b 保护：列表页 header 不落 62rem */

/* ---------- 可见性徽标（线框，不靠颜色，UI IA §9 #8 / §10 #2） ---------- */
.badge {
  font-size: .72rem; padding: .05em .45em; margin-left: .5em;
  vertical-align: .1em; white-space: nowrap;
}
.badge.semi { border: 1px dashed var(--muted); }
.badge.hidden { border: 1px solid var(--muted); }

/* ---------- 详情页 ---------- */
.post-meta { color: var(--muted); font-size: .88rem; margin: .3rem 0 2rem; }
.post-meta .tags a { color: var(--muted); margin-right: .5rem; }
h1.title { font: 600 1.75rem/1.35 var(--serif, inherit); margin: 0 0 .2rem; }
main h2 { font-size: 1.375rem; margin: 2.2rem 0 .7rem; }
main h3 { font-size: 1.1875rem; margin: 1.8rem 0 .6rem; }
main h4, main h5, main h6 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
main h2, main h3, main h4, main h5, main h6 { font-weight: 600; line-height: 1.35; }
main h2 a, main h3 a, main h4 a, main h5 a, main h6 a { color: inherit; }

/* ---------- TOC（宽屏侧栏 / 窄屏 details；规则 .toc 与 .toc-mobile 共享，proto theme-a.css:40-42） ---------- */
.toc, .toc-mobile { font-size: .88rem; }
.toc ul, .toc-mobile ul { margin: .2rem 0; padding-left: 1.1em; list-style: none; }
.toc > ul, .toc-mobile > ul { padding-left: 0; }
.toc li, .toc-mobile li { margin: .28rem 0; }
.toc li.lv3, .toc-mobile li.lv3 { padding-left: 1rem; }
.toc li.lv4, .toc-mobile li.lv4 { padding-left: 2rem; }
.toc li.lv5, .toc-mobile li.lv5 { padding-left: 3rem; }
.toc li.lv6, .toc-mobile li.lv6 { padding-left: 4rem; }
.toc a, .toc-mobile a { color: var(--ink); }
.toc a:hover, .toc-mobile a:hover { color: var(--accent); text-decoration: none; }
@media (min-width: 72em) {
  .toc { position: sticky; top: 2rem; align-self: start; }
  .toc-mobile { display: none; }
}
@media (max-width: 71.99em) {
  .page { display: block; }
  .toc { display: none; }
  .toc-mobile { margin: 1rem 0 2rem; font-size: .88rem; }
  .toc-mobile summary { cursor: pointer; color: var(--muted); }
}

/* ---------- 代码（UI IA §4.4：无行号、横向滚动、0.9375rem） ---------- */
pre.src, pre.sourceCode, pre.example {
  background: var(--code-bg); padding: .75em 1em; overflow-x: auto;
  font: .9375rem/1.6 var(--mono); margin: 1.2em 0;
}
pre.src code, pre.sourceCode code, pre.example code { background: transparent; padding: 0; }
code { font-family: var(--mono); }
pre code span.keyword, pre code span.operator { color: var(--c-keyword); }
pre code span.string { color: var(--c-string); }
pre code span.comment { color: var(--c-comment); }
pre code span.entity.name.function, pre code span.support.function,
pre code span.support.macro { color: var(--c-func); }
pre code span.constant { color: var(--c-const); }
pre code span.type, pre code span.variable { color: var(--c-type); }

/* ---------- 数学 / 图片 / 表格 / 引用 ---------- */
.katex-display { margin: 1.1em 0; overflow-x: auto; overflow-y: hidden; padding: .15em 0; }
main img { max-width: 100%; height: auto; display: block; margin: 1.2em auto; }
main table { display: block; width: max-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; margin: 1.2em 0; }
main th, main td { border-top: 1px solid var(--rule); padding: .45em .8em; }
main th { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 600; }
main tr:last-child td { border-bottom: 2px solid var(--ink); }
blockquote { margin: 1.2em 0; padding: .1em 0 .1em 1.2em;
  border-left: 2px solid var(--rule); color: var(--ink); }
blockquote p { margin: .4em 0; }

/* ---------- 登录卡片 ---------- */
.login-card { max-width: 22rem; margin: 12vh auto 0; }
.login-card h1 { font: 600 1.3rem var(--serif, inherit); margin-bottom: 1.2rem; }
.login-card label { display: block; font-size: .9rem; margin: .8rem 0 .2rem; }
.login-card input {
  width: 100%; padding: .45em .6em; font: 1rem var(--sans);
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
}
.login-card button {
  margin-top: 1.2rem; padding: .5em 1.2em; font: 1rem var(--sans);
  background: var(--ink); color: var(--paper); border: none; cursor: pointer;
}
.login-card .error { color: var(--accent); font-size: .9rem; margin-top: .8rem; }

/* ---------- 页脚（含主题行，UI IA §11.3） ---------- */
footer.site-foot {
  max-width: calc(var(--measure, 60rem) + 22rem); margin: 3rem auto 0;
  padding: 1rem 1.5rem 0; font-size: .85rem; color: var(--muted);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
html[data-theme="b"] footer.site-foot { max-width: 36rem; }
footer.site-foot .theme-switch a { color: var(--muted); margin: 0 .2rem; }
footer.site-foot .theme-switch strong { color: var(--ink); font-weight: 600; margin: 0 .2rem; }

/* ---------- C 主题装饰（终端：零圆角） ---------- */
html[data-theme="c"] * { border-radius: 0 !important; }

/* ---------- 打印（一律回落 A 浅色，UI IA §11.1） ---------- */
@media print {
  :root, html[data-theme="a"], html[data-theme="b"], html[data-theme="c"] {
    --paper: #FAFAF7; --ink: #1A1A1A; --muted: #6B665E;
    --accent: #C0392B; --code-bg: #F5F4F0; --rule: #D8D4CC;
    --c-keyword: #cf222e; --c-string: #0a3069; --c-comment: #57606a;
    --c-func: #8250df; --c-const: #0550ae; --c-type: #953800;
  }
  .site, .toc, .toc-mobile, footer.site-foot, .skip-link { display: none; }
  .page { display: block; max-width: none; padding: 0; }
}