/*
Theme Name: Paperline / 纸序
Theme URI: https://typecho.org/
Description: 为 Typecho 设计的安静、轻量且 Typora 友好的写作主题。
Version: 1.1.1
Author: OpenAI
License: MIT
*/

:root {
  color-scheme: light;
  --bg: #fafaf9;
  --paper: #fff;
  --text: #242b34;
  --heading: #202731;
  --muted: #818995;
  --subtle: #a6adb5;
  --line: #e9ecef;
  --line-strong: #dde3e8;
  --soft: #f3f5f7;
  --accent: #365f90;
  --accent-rgb: 54, 95, 144;
  --reader-font-size: 17px;
  --radius: 12px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
:root[data-accent="sage"] { --accent:#477669; --accent-rgb:71,118,105; }
:root[data-accent="violet"] { --accent:#74618c; --accent-rgb:116,97,140; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#15191e; --paper:#1a2027; --text:#d5dbe2; --heading:#eef2f5;
  --muted:#9aa5b1; --subtle:#788390; --line:#2e363f; --line-strong:#3b4651; --soft:#222b34;
  --accent:#91b9ec; --accent-rgb:145,185,236;
}
:root[data-theme="dark"][data-accent="sage"] {--accent:#8bc9b8; --accent-rgb:139,201,184}
:root[data-theme="dark"][data-accent="violet"] {--accent:#c6b0ee; --accent-rgb:198,176,238}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#15191e; --paper:#1a2027; --text:#d5dbe2; --heading:#eef2f5;
    --muted:#9aa5b1; --subtle:#788390; --line:#2e363f; --line-strong:#3b4651; --soft:#222b34;
    --accent:#91b9ec; --accent-rgb:145,185,236;
  }
  :root:not([data-theme])[data-accent="sage"] {--accent:#8bc9b8; --accent-rgb:139,201,184}
  :root:not([data-theme])[data-accent="violet"] {--accent:#c6b0ee; --accent-rgb:198,176,238}
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:rgba(var(--accent-rgb),.18); }
.sr-only, .skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:12px; left:12px; z-index:900; padding:8px 14px; background:var(--paper); border:1px solid var(--accent); border-radius:6px; }
.site-shell { min-height:100vh; display:flex; flex-direction:column; }
.site-main { flex:1; width:100%; }
.content-container { width:min(100% - 64px, 820px); margin-inline:auto; }
.site-header { position:relative; z-index:50; border-bottom:1px solid var(--line); background:var(--paper); }
.header-inner { width:min(100% - 64px, 1160px); min-height:78px; margin:auto; display:flex; align-items:center; gap:44px; }
.brand { flex-shrink:0; display:flex; align-items:center; gap:13px; font-size:18px; font-weight:740; color:var(--heading); white-space:nowrap; letter-spacing:-.025em; }
.brand-glyph { display:flex; width:33px; height:33px; padding:9px 8px; border-radius:9px; flex-direction:column; justify-content:space-between; background:var(--accent); }
.brand-glyph span { display:block; width:100%; height:2px; border-radius:2px; background:white; }
.brand-glyph span:nth-child(2) { width:78%; }.brand-glyph span:nth-child(3) { width:55%; }
.main-nav { display:flex; flex:1; gap:26px; align-items:center; min-width:0; overflow-x:auto; scrollbar-width:none; }
.main-nav::-webkit-scrollbar { display:none; }
.main-nav a { flex-shrink:0; font-size:13.5px; color:var(--muted); transition:color .2s; padding:7px 0; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color:var(--accent); }
.header-actions { margin-left:auto; display:flex; gap:8px; }
.icon-button { display:grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); }
.icon-button:hover { background:var(--soft); color:var(--heading); }
.icon-button svg { width:19px; height:19px; }
.sun-icon { display:none; }
:root[data-theme="dark"] .sun-icon { display:block; }
:root[data-theme="dark"] .moon-icon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .sun-icon { display:block; }
  :root:not([data-theme]) .moon-icon { display:none; }
}
.search-panel { width:min(100% - 64px, 820px); margin:0 auto; padding:0 0 18px; }
.search-panel[hidden], [hidden] { display:none !important; }
.search-panel form { display:flex; align-items:center; gap:14px; background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:9px 10px 9px 16px; }
.search-panel svg { width:17px; height:17px; flex-shrink:0; color:var(--muted); }
.search-panel input { flex:1; min-width:0; background:transparent; color:var(--text); border:0; outline:0; font-size:14px; }
.search-panel button { flex-shrink:0; background:var(--accent); color:white; border:0; border-radius:7px; padding:7px 16px; font-size:13px; }
.hero { padding:92px 0 54px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:10.5px; font-weight:750; letter-spacing:.19em; margin:0 0 20px; }
.tiny-accent { display:inline-block; width:19px; height:2px; background:var(--accent); border-radius:5px; }
.hero h1 { margin:0; font-size:clamp(30px,4.4vw,45px); line-height:1.37; letter-spacing:-.043em; font-weight:740; color:var(--heading); }
.hero h1 span { color:var(--accent); }
.hero-description { margin:21px 0 0; color:var(--muted); font-size:15px; line-height:1.9; }
.hero-rule { display:flex; align-items:center; margin:51px 0 0; height:1px; background:var(--line); }
.hero-rule span { width:63px; height:2px; background:var(--accent); }
.posts-section { margin-bottom:70px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:9px 0 12px; }
.section-heading h2 { color:var(--heading); font-size:20px; letter-spacing:-.025em; margin:0; font-weight:720; }
.section-heading>span { color:var(--subtle); font-size:10.5px; letter-spacing:.16em; font-weight:600; }
.entry { padding:30px 0 32px; border-bottom:1px solid var(--line); }
.entry:last-child { border-bottom:0; }
.entry-meta, .single-meta { display:flex; align-items:center; flex-wrap:wrap; gap:11px; color:var(--muted); font-size:12px; }
.entry-meta a:hover { color:var(--accent); }
.meta-dot { width:3px; height:3px; border-radius:50%; background:var(--subtle); }
.entry-title { margin:11px 0 8px; font-size:clamp(19px,2.4vw,22px); line-height:1.42; letter-spacing:-.018em; font-weight:710; color:var(--heading); overflow-wrap:anywhere; }
.entry-title a:hover { color:var(--accent); }
.entry-excerpt { color:var(--muted); font-size:13.5px; line-height:1.85; overflow-wrap:anywhere; }
.entry-excerpt p { margin:.2em 0; }
.read-more { display:inline-flex; gap:6px; font-size:12.5px; font-weight:650; color:var(--accent); margin-top:11px; }
.read-more span { transition:transform .2s; }.read-more:hover span { transform:translate(2px,-2px); }
.page-nav-wrap { margin:25px 0 65px; }
.page-navigator { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; list-style:none; margin:0; padding:0; }
.page-navigator li { list-style:none; margin:0; padding:0; }
.page-navigator li a, .page-navigator li span { display:inline-flex; align-items:center; justify-content:center; min-width:37px; min-height:37px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.page-navigator li a:hover, .page-navigator .current a { border-color:var(--accent); color:var(--accent); }
.page-navigator li.current a { color:var(--paper); background:var(--accent); border-color:var(--accent); }
.empty-state { text-align:center; padding:86px 20px; }
.empty-mark { color:var(--accent); font-size:27px; }.empty-state h2 { font-size:21px; color:var(--heading); margin:12px 0 6px; }.empty-state p { color:var(--muted); }
.empty-state a { display:inline-block; margin-top:14px; color:var(--accent); }
.listing-heading { padding:70px 0 34px; border-bottom:1px solid var(--line); }
.listing-heading h1 { margin:0 0 10px; font-size:34px; line-height:1.4; font-weight:740; color:var(--heading); letter-spacing:-.025em; overflow-wrap:anywhere; }
.listing-heading>p:last-child { margin:0; color:var(--muted); font-size:14px; }
.listing-page { padding-bottom:40px; }
.single-header { padding:66px 0 35px; position:relative; }
.single-breadcrumb { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
.single-breadcrumb a:hover { color:var(--accent); }
.single-title { margin:21px 0 19px; color:var(--heading); font-size:clamp(30px,4.5vw,43px); letter-spacing:-.035em; font-weight:750; line-height:1.36; overflow-wrap:anywhere; }
.reading-settings { display:flex; gap:8px; align-items:center; color:var(--subtle); font-size:12px; margin-top:22px; }
.reading-settings button { display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); border-radius:6px; color:var(--muted); height:28px; min-width:35px; }
.reading-settings button:hover { color:var(--accent); border-color:var(--accent); }
.post-layout { max-width:1140px; width:calc(100% - 64px); margin:0 auto; display:grid; grid-template-columns:minmax(0,820px) minmax(150px,210px); column-gap:52px; align-items:start; grid-template-areas:'article toc'; }
.article-content { grid-area:article; min-width:0; }
/* Article table of contents: the ASIDE is the sticky grid item.
 * Avoid negative link margins inside an overflow container: they clipped Chinese glyphs. */
.toc-panel {
  grid-area:toc;
  min-width:0;
  align-self:start;
  position:sticky;
  top:32px;
  max-height:calc(100vh - 64px);
  color:var(--text);
}
.toc-sticky { position:static; }
.toc-panel details { min-width:0; border-left:1px solid var(--line-strong); padding-left:14px; }
.toc-panel summary {
  cursor:pointer;
  list-style:none;
  color:var(--heading);
  font-size:13px;
  font-weight:750;
  line-height:1.6;
  letter-spacing:.02em;
  padding:3px 0 12px 10px;
}
.toc-panel summary::-webkit-details-marker { display:none; }
#article-toc {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  max-height:calc(100vh - 142px);
  padding:2px 5px 6px 0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}
#article-toc a {
  display:block;
  position:relative;
  min-width:0;
  margin:0;  /* never move text to the clipped left side of the scrollbox */
  padding:7px 10px;
  border:0;
  border-radius:6px;
  color:var(--text);
  font-size:13.5px;
  font-weight:450;
  line-height:1.65;
  text-indent:0;
  overflow-wrap:anywhere;
  word-break:normal;
  transition:background-color .15s, color .15s;
}
/* Relative depth: H2 starts at the first level if the article has no H1. */
#article-toc a[data-depth="1"] { padding-left:20px; }
#article-toc a[data-depth="2"] { padding-left:30px; }
#article-toc a[data-depth="3"] { padding-left:40px; }
#article-toc a[data-depth="4"], #article-toc a[data-depth="5"] { padding-left:48px; }
#article-toc a:hover,
#article-toc a.is-active { color:var(--accent); background:rgba(var(--accent-rgb),.09); }
#article-toc a:focus-visible { outline-offset:-2px; }
.article-end { display:flex; justify-content:center; align-items:center; gap:8px; margin:42px 0; color:var(--subtle); font-size:12px; letter-spacing:.18em; }
.article-end span:first-child { font-size:18px; color:var(--accent); }
.post-tags { border-top:1px solid var(--line); padding:21px 0; font-size:12px; color:var(--muted); }
.post-tags>span { color:var(--subtle); margin-right:13px; }
.post-tags a { color:var(--accent); }
.post-neighbors { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:18px 0 35px; }
.post-neighbors>div { min-width:0; font-size:13px; color:var(--muted); }
.post-neighbors>div:last-child { text-align:right; }
.post-neighbors span { display:block; font-size:11px; color:var(--subtle); margin-bottom:5px; }
.post-neighbors a { display:block; color:var(--heading); overflow-wrap:anywhere; }
.post-neighbors a:hover { color:var(--accent); }
.comments { border-top:1px solid var(--line); padding:30px 0 80px; }
.comments-title { display:flex; gap:8px; align-items:center; color:var(--heading); font-size:20px; font-weight:730; margin:0 0 22px; }
.comments-title span { font-size:12px; color:var(--subtle); font-weight:500; }
.comments-empty { font-size:13px; color:var(--muted); margin:10px 0 30px; }
.comment-list, .comment-list ol { list-style:none; margin:0; padding:0; }
.comment-list li { list-style:none; border-top:1px solid var(--line); padding:22px 0 0; }
.comment-list li:first-child { border-top:0; }
.comment-list .comment-children { padding:6px 0 0 26px; }
.comment-author { display:flex; gap:11px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--heading); }
.comment-author .avatar { width:36px; height:36px; object-fit:cover; border-radius:50%; }
.comment-author a:hover { color:var(--accent); }
.comment-meta, .comment-reply { color:var(--muted); font-size:11px; margin:7px 0 6px; }
.comment-meta a:hover, .comment-reply a:hover { color:var(--accent); }
.comment-content { margin:10px 0; color:var(--text); font-size:14px; overflow-wrap:anywhere; }
.comment-content p { margin:.45em 0; }.comment-content img { max-width:100%; }
.comment-reply { margin-bottom:14px; }.comment-reply a { color:var(--accent); }
.comment-pages { padding:16px 0; }.respond { margin-top:32px; }
.respond h3 { font-size:18px; color:var(--heading); margin:0 0 18px; }
.cancel-comment-reply { font-size:12px; margin-bottom:10px; color:var(--accent); }
.comment-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.comment-fields label,.comment-message-label { display:block; color:var(--muted); font-size:12px; }
.comment-fields label>span,.comment-message-label span { color:var(--accent); }
.comment-fields input,.respond textarea { display:block; width:100%; color:var(--text); background:var(--paper); border:1px solid var(--line-strong); border-radius:8px; padding:11px 12px; margin:7px 0 14px; outline:none; font-size:13px; }
.respond textarea { resize:vertical; min-height:124px; }
.comment-fields input:focus,.respond textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08); }
.submit-comment { display:inline-flex; align-items:center; gap:12px; border:0; border-radius:8px; padding:10px 18px; background:var(--accent); color:white; font-size:13px; font-weight:650; }
.submit-comment:hover { filter:brightness(1.08); }
.logged-in-as { font-size:13px; color:var(--muted); }.logged-in-as a { color:var(--accent); }
.archive-index-page { padding-bottom:75px; }.archive-year { margin:28px 0 35px; }
.archive-year h2 { border-bottom:1px solid var(--line); margin:0 0 14px; padding-bottom:11px; color:var(--heading); font-size:20px; }
.archive-year ol { list-style:none; padding:0; margin:0; }
.archive-year li { display:flex; align-items:baseline; gap:24px; border-bottom:1px solid var(--line); padding:12px 0; }
.archive-year time { font-size:12px; color:var(--muted); font-family:var(--mono); }
.archive-year a { font-size:14px; color:var(--heading); flex:1; overflow-wrap:anywhere; }
.archive-year a:hover { color:var(--accent); }
.error-page { text-align:center; padding:130px 0 155px; }
.error-page>span { color:var(--accent); font-size:80px; font-weight:780; letter-spacing:-.07em; }
.error-page h1 { color:var(--heading); font-size:24px; margin:0 0 8px; }.error-page p { color:var(--muted); }.error-page a { color:var(--accent); display:inline-block; margin-top:18px; }
.site-footer { border-top:1px solid var(--line); background:var(--paper); }
/* 整个页脚以页面视口中心线对齐，避免回到顶部按钮挤偏文字。 */
.footer-inner { position:relative; width:min(100% - 64px,1160px); margin:0 auto; padding:28px 0 34px; text-align:center; }
.footer-row { display:flex; width:100%; justify-content:center; gap:12px; flex-wrap:wrap; align-items:center; text-align:center; color:var(--muted); font-size:11.5px; }
.footer-separator { color:var(--subtle); }
.back-to-top { position:absolute; top:28px; right:0; margin:0; color:var(--accent); white-space:nowrap; font-size:11.5px; }
.footer-extra { margin:10px auto 0; color:var(--muted); font-size:11.5px; text-align:center; }
/* 备案信息：编号与图标位于同一链接，居中显示，手机端自动换行。 */
.site-footer .footer-inner .filing-row { display:flex; width:100%; max-width:100%; margin:16px auto 0; padding:0; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:24px; row-gap:10px; color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.site-footer .filing-row .filing-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:inherit; text-decoration:none; white-space:nowrap; }
.filing-row .filing-link:hover { color:var(--accent); }
.filing-row .filing-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.filing-row .filing-logo { display:inline-flex; flex:0 0 18px; width:18px; height:18px; align-items:center; justify-content:center; box-sizing:border-box; vertical-align:middle; }
/* ICP 标识是主题自绘装饰，并非工信部官方认证徽章。 */
.filing-row .filing-logo--icp { border:1px solid var(--line); border-radius:4px; color:var(--accent); font:700 8px/1 system-ui,-apple-system,sans-serif; letter-spacing:-.5px; }
.filing-row img.filing-logo--police { display:block; object-fit:contain; border:0; border-radius:0; }
/* 尚未放置官方公安备案图标时使用中性占位符，上传后会自动显示实际图标。 */
.filing-row .filing-logo--police-placeholder { border:1px solid var(--line); border-radius:4px; font:600 11px/1 sans-serif; color:var(--accent); }
@media (max-width:600px) { .site-footer .footer-inner .filing-row { flex-direction:column; row-gap:8px; } }
@media (min-width:1101px) { .single-header { max-width:1140px; width:calc(100% - 64px); } .single-header > * { max-width:820px; } }
@media (max-width:1100px) {
  .post-layout { max-width:820px; grid-template-columns:minmax(0,1fr); grid-template-areas:'toc' 'article'; gap:0; }
  .toc-panel { position:static; max-height:none; margin:4px 0 28px; }
  .toc-sticky { position:static; }
  .toc-panel details { border:1px solid var(--line); border-radius:10px; padding:9px 14px; background:var(--paper); }
  .toc-panel summary { padding:3px 0; }
  #article-toc { max-height:320px; margin-top:9px; padding-right:6px; }
}
@media (max-width:640px) {
  .content-container,.post-layout,.header-inner,.footer-inner,.search-panel { width:calc(100% - 38px); }
  .header-inner { min-height:65px; gap:18px; }
  .brand { font-size:16px; gap:8px; }.brand-glyph { width:28px; height:28px; padding:7px; border-radius:7px; }
  .main-nav { gap:17px; }.main-nav a { font-size:12px; }
  .header-actions { gap:0; }.icon-button { width:32px; height:32px; }.icon-button svg { width:18px; height:18px; }
  .hero { padding:65px 0 38px; }.hero h1 { font-size:32px; }
  .hero-rule { margin-top:36px; }.posts-section { margin-bottom:40px; }
  .entry { padding:24px 0 26px; }.entry-title { font-size:20px; }.entry-excerpt { font-size:13px; }
  .single-header { padding:39px 0 27px; }.single-title { font-size:29px; }
  .listing-heading { padding:44px 0 27px; }.listing-heading h1 { font-size:28px; }
  .comments { padding-bottom:55px; }.comment-fields { grid-template-columns:1fr; gap:0; }
  .post-neighbors { gap:15px; }.footer-inner { padding:22px 0 25px; }
  .footer-row { gap:8px; }.back-to-top { position:static; display:inline-block; width:auto; margin:10px auto 0; }
  .archive-year li { gap:14px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:0.01ms !important; animation-duration:0.01ms !important; } }
@media print {
  :root { color-scheme:light;--bg:#fff;--paper:#fff;--text:#000;--heading:#000;--muted:#666;--line:#ddd;--soft:#fff;--accent:#000; }
  body { background:white; }.site-header,.site-footer,.toc-panel,.comments,.reading-settings,.post-neighbors,.post-tags { display:none!important; }
  .post-layout { display:block; width:100%; }.single-header { padding:0 0 18px; }.article-content { width:100%; }
  .single-title { font-size:27px; }
}
/* Guard against overly long site names on small screens. */
@media (max-width:640px) {
  .brand-name { max-width:132px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}