/* ==========================================================================
   WebTUI 终端主题 —— theme-webtui.css
   等宽字体 · ch/lh 字符网格 · oklch 低饱和配色 · 边框碎片方框 · 仿 Vim 状态栏
   规则：零阴影 · 零圆角 · 零位移（只允许颜色与透明度过渡）
   ========================================================================== */

/* ---------- 令牌层 ---------- */
html {
  --font-size: 16.5px;
  --border-line: 2px;

  --main-color: 260;
  --red-color: 20;
  --orange-color: 50;
  --yellow-color: 100;
  --green-color: 120;
  --aqua-color: 180;
  --blue-color: 210;
  --purple-color: 280;
  --pink-color: 340;

  --main-l: 60%;
  --chroma: 0.11;
  --super-chroma: 0.16;
  --high-chroma: 0.13;

  --bg: oklch(97.6% 0.012 262);
  --panel: oklch(94% 0.012 262);
  --panel-2: oklch(90.5% 0.012 262);
  --fg: oklch(24% 0 180);
  --fg-dim: oklch(48% 0.015 262);
  --fg-faint: oklch(62% 0.012 262);
  --bc: oklch(58% 0.04 262 / 0.62);
  --bc-soft: oklch(58% 0.04 262 / 0.3);

  --accent: oklch(var(--main-l) var(--chroma) var(--main-color));
  --accent-bg: oklch(88% 0.05 var(--main-color));
  --h1: oklch(56% var(--super-chroma) var(--red-color));
  --h2: oklch(60% var(--super-chroma) var(--orange-color));
  --h3: oklch(56% var(--super-chroma) var(--yellow-color));
  --h4: oklch(54% var(--super-chroma) var(--green-color));
  --link: oklch(52% var(--high-chroma) var(--blue-color));
  --status-bg: oklch(52% var(--high-chroma) var(--main-color));
  --status-fg: oklch(97% 0.01 var(--main-color));
}

html.dark {
  --main-l: 72%;
  --chroma: 0.095;
  --super-chroma: 0.14;
  --high-chroma: 0.115;

  --bg: oklch(16.5% 0.016 262);
  --panel: oklch(21.5% 0.016 262);
  --panel-2: oklch(25.5% 0.016 262);
  --fg: oklch(80% 0 180);
  --fg-dim: oklch(64% 0.014 262);
  --fg-faint: oklch(48% 0.012 262);
  --bc: oklch(66% 0.035 262 / 0.5);
  --bc-soft: oklch(66% 0.035 262 / 0.24);

  --accent-bg: oklch(30% 0.045 var(--main-color));
  --h1: oklch(72% var(--super-chroma) var(--red-color));
  --h2: oklch(76% var(--super-chroma) var(--orange-color));
  --h3: oklch(78% var(--super-chroma) var(--yellow-color));
  --h4: oklch(74% var(--super-chroma) var(--green-color));
  --link: oklch(72% var(--high-chroma) var(--blue-color));
  --status-bg: oklch(34% var(--high-chroma) var(--main-color));
  --status-fg: oklch(92% 0.02 var(--main-color));
}

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

html {
  font-family: "JetBrainsMonoNL NF", "JetBrains Mono", "Sarasa Mono SC",
    "Noto Sans Mono CJK SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",
    Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: var(--font-size);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  animation: none;
  transition: background-color .25s ease, color .25s ease;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: .25em; }

:focus-visible { outline: var(--border-line) solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-bg); color: var(--fg); }

* { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
::-webkit-scrollbar { width: .75ch; height: .75ch; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bc); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* 覆盖共享层的位移类动效：本主题只允许颜色与透明度过渡 */
main article, main .t-item, main .t-card {
  animation: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
main .t-item:hover, main article:hover { transform: none !important; }
button:active, .btn:active { transform: none !important; }

/* ---------- 主栏：84ch ---------- */
body > main.t-main {
  width: 100%;
  max-width: 84ch;
  margin-inline: auto;
  padding: 1.2lh 1.6ch 2.4lh;
  flex: 1 0 auto;
}

/* ---------- 顶栏（反色三段 + 斜切） ---------- */
.t-topbar {
  display: flex;
  align-items: stretch;
  height: 1.7lh;
  background: var(--status-bg);
  color: var(--status-fg);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.4ch) 100%, 0 100%);
  position: sticky;
  top: 0;
  z-index: 50;
}
.t-topbar > * {
  display: flex;
  align-items: center;
  padding-inline: 1.2ch;
  white-space: nowrap;
}
.t-topbar .t-brand {
  background: var(--bg);
  color: var(--accent);
  padding-inline: 1.6ch;
  text-decoration: none;
}
.t-topbar .t-brand:hover { text-decoration: none; opacity: .85; }
.t-topbar .t-mid {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .9;
}
.t-topbar .t-clock { opacity: .85; font-variant-numeric: tabular-nums; }
.t-topbar nav { gap: 0; padding-inline: .4ch; }
.t-topbar nav a {
  color: inherit;
  text-decoration: none;
  opacity: .82;
  padding-inline: .9ch;
  transition: opacity .18s ease;
}
.t-topbar nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .25em; }

#dark-toggle {
  background: transparent;
  border: var(--border-line) solid var(--status-fg);
  color: var(--status-fg);
  font: inherit;
  font-size: .9em;
  padding-inline: .8ch;
  margin-inline: 1ch;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color .18s ease, background-color .18s ease;
}
#dark-toggle:hover { color: var(--status-bg); background: var(--status-fg); }
#dark-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
#dark-toggle .icon-dark { display: none; }
html.dark #dark-toggle .icon-dark { display: block; }
html.dark #dark-toggle .icon-light { display: none; }

/* ---------- 抬头 ---------- */
.t-hero { margin: 1.4lh 0 2lh; }
.t-hero h1 {
  margin: 0;
  font-size: 1em;
  line-height: 1.4lh;
  letter-spacing: .02em;
  color: var(--h1);
}
.t-hero h1 .t-hash { color: var(--fg-faint); margin-right: .4ch; }
.t-hero h1 .t-big { font-size: 2.1em; letter-spacing: .06em; }
.t-cursor {
  display: inline-block;
  width: .62ch;
  height: 1.05em;
  margin-left: .35ch;
  background: var(--accent);
  vertical-align: -.16em;
  animation: t-blink 1.06s step-end infinite;
}
@keyframes t-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.t-lede { margin: .6lh 0 0; color: var(--fg-dim); overflow-wrap: anywhere; }

/* ---------- 分类筛选栏（覆盖共享圆角胶囊） ---------- */
.nb-cats { display: flex; gap: .8ch; flex-wrap: wrap; padding: .2lh 0 1.4lh; }
.nb-cat {
  border: var(--border-line) solid var(--bc);
  border-radius: 0;
  padding: .12lh 1.2ch;
  font-size: .84em;
  color: var(--fg-dim);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nb-cat:hover { opacity: 1; color: var(--accent); border-color: var(--accent); text-decoration: none; }
.nb-cat-active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
  font-weight: 700;
  background: var(--accent-bg);
}
.nb-cat-n { background: var(--panel-2); border-radius: 0; padding: 0 .6ch; font-size: .9em; opacity: .8; }

/* ---------- 文章列表（TUI 行） ---------- */
.t-list { display: flex; flex-direction: column; margin: 0; padding: 0; }
.t-item {
  display: flex;
  gap: 1.4ch;
  align-items: baseline;
  padding: .55lh .6ch;
  margin-inline: -.6ch;
  border-bottom: 1px dashed var(--bc-soft);
  transition: background-color .18s ease;
}
.t-item:last-child { border-bottom: 0; }
.t-item:hover { background: var(--panel); }
.t-item .t-date {
  flex: 0 0 10ch;
  color: var(--fg-faint);
  font-size: .82em;
  font-variant-numeric: tabular-nums;
}
.t-item .t-maincell { flex: 1 1 auto; min-width: 0; }
.t-item h2 { margin: 0; font-size: 1em; font-weight: 700; line-height: 1.5; }
.t-item h2 a { color: var(--fg); text-decoration: none; }
.t-item h2 a:hover { color: var(--accent); text-decoration: underline; }
.t-item .t-summary {
  margin: .15lh 0 0;
  color: var(--fg-dim);
  font-size: .86em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.t-item .t-tag {
  flex: 0 0 auto;
  border: var(--border-line) solid var(--bc-soft);
  color: var(--fg-faint);
  font-size: .74em;
  padding: 0 .6ch;
  line-height: 1.5;
  text-decoration: none;
}
.t-item .t-tag:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.t-item .t-arrow { flex: 0 0 auto; color: var(--fg-faint); transition: color .18s ease; }
.t-item:hover .t-arrow { color: var(--accent); }

/* 封面：固定尺寸，原图比例不影响卡片高度 */
.t-item .t-cover {
  flex: 0 0 10ch;
  width: 10ch;
  height: 6ch;
  position: relative;
  overflow: hidden;
  border: var(--border-line) solid var(--bc-soft);
  align-self: center;
}
.t-item .t-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.t-empty { color: var(--fg-faint); padding: 2lh 0; }

/* ---------- 分页（覆盖共享圆角胶囊） ---------- */
.nb-pager { display: flex; align-items: center; justify-content: center; gap: 1.2ch; padding: 1.8lh 0 2lh; flex-wrap: wrap; }
.nb-pager-link {
  border: var(--border-line) solid var(--bc);
  border-radius: 0;
  padding: .2lh 1.6ch;
  font-size: .86em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nb-pager-link:hover { opacity: 1; color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.nb-pager-info { color: var(--fg-faint); font-size: .82em; font-variant-numeric: tabular-nums; }

/* ---------- 方框：横线在标题处断开的碎片方案 ---------- */
.t-box { position: relative; display: flex; flex-direction: column; margin-top: 2.2lh; }
.t-box::before, .t-box::after {
  content: "";
  position: absolute;
  top: .5lh;
  bottom: 0;
  width: 0;
  border-left: var(--border-line) solid var(--bc);
  pointer-events: none;
}
.t-box::before { left: 0; }
.t-box::after { right: 0; }
.t-box-top { display: flex; align-items: center; height: 1lh; line-height: 1lh; }
.t-box-top .t-seg { flex: 1 1 auto; height: 0; border-top: var(--border-line) solid var(--bc); }
.t-box-top .t-ttl {
  flex: 0 0 auto;
  padding-inline: 1ch;
  white-space: nowrap;
  font-weight: 700;
  font-size: .92em;
  letter-spacing: .04em;
  color: var(--h2);
}
.t-box-top .t-ttl .t-mark { color: var(--fg-faint); margin-right: .5ch; }
.t-box-body { flex: 1 1 auto; padding: .8lh 2ch 1lh; border-bottom: var(--border-line) solid var(--bc); }

/* ---------- 文章页 ---------- */
.t-post { margin-top: 1.6lh; }
.t-post-header h1 {
  margin: 0;
  font-size: 1.5em;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--h1);
  overflow-wrap: anywhere;
}
.t-meta {
  display: flex;
  gap: 1.2ch;
  flex-wrap: wrap;
  margin: .7lh 0 0;
  color: var(--fg-faint);
  font-size: .82em;
  font-variant-numeric: tabular-nums;
}
.t-meta a { color: var(--link); }
.t-draft { color: var(--h2); border: var(--border-line) dashed var(--h2); padding: 0 .6ch; }

/* 正文 */
.post-body {
  margin-top: 2lh;
  font-size: 1em;
  line-height: 1.85;
  color: var(--fg);
  overflow-wrap: break-word;
}
.post-body p, .post-body .nb-p { margin: 0 0 1.05lh; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  margin: 2lh 0 .8lh;
  line-height: 1.5;
  letter-spacing: .02em;
}
.post-body h1, .post-body .nb-h2 { font-size: 1.28em; color: var(--h1); }
.post-body h2 { font-size: 1.16em; color: var(--h2); }
.post-body h3 { font-size: 1.04em; color: var(--h3); }
.post-body h4 { font-size: .98em; color: var(--h4); }
.post-body h2::before, .post-body h3::before, .post-body h4::before {
  content: "▸ ";
  color: var(--fg-faint);
  font-weight: 400;
}
.post-body blockquote, .post-body .nb-quote {
  margin: 1.2lh 0;
  padding: .6lh 1.6ch;
  border-left: var(--border-line) solid var(--accent);
  color: var(--fg-dim);
  background: var(--panel);
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body pre, .post-body .nb-code {
  margin: 1.2lh 0;
  padding: .8lh 1.4ch;
  background: var(--panel-2);
  border: var(--border-line) solid var(--bc-soft);
  overflow-x: auto;
  font-size: .9em;
  line-height: 1.7;
  white-space: pre;
}
.post-body code {
  font-family: inherit;
  background: var(--panel-2);
  border-radius: 0;
  padding: .05em .4ch;
  font-size: .92em;
}
.post-body pre code, .post-body .nb-code code { background: none; padding: 0; border-radius: 0; font-size: 1em; }

.post-body ul, .post-body ol, .post-body .nb-list { margin: 0 0 1.05lh; padding-left: 2.4ch; }
.post-body li { margin: .3lh 0; }
.post-body ul li::marker { color: var(--fg-faint); }
.post-body ol li::marker { color: var(--fg-faint); font-weight: 700; }

.post-body img, .post-body .nb-image { max-width: 100%; height: auto; border: var(--border-line) solid var(--bc-soft); display: block; margin: 1.2lh auto; }
.post-body hr { border: 0; border-top: var(--border-line) dashed var(--bc-soft); margin: 2lh 0; }

.nb-table-wrap { margin: 1.2lh 0; overflow-x: auto; }
.nb-table { border-collapse: collapse; width: 100%; font-size: .92em; }
.nb-table th, .nb-table td { border: 1px solid var(--bc-soft); padding: .35lh .8ch; text-align: left; vertical-align: top; }
.nb-table th { background: var(--panel-2); font-weight: 700; }

/* 上一篇 / 下一篇 */
.t-around {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2ch;
  margin-top: 2.6lh;
  padding-top: 1.2lh;
  border-top: var(--border-line) solid var(--bc-soft);
}
.t-around a {
  display: flex;
  flex-direction: column;
  gap: .2lh;
  color: var(--fg-dim);
  text-decoration: none;
  padding: .6lh 0;
  transition: color .18s ease;
}
.t-around a:hover { color: var(--accent); text-decoration: none; }
.t-around small { color: var(--fg-faint); font-size: .78em; }
.t-around b { font-size: .96em; color: inherit; }
.t-around .t-next { grid-column: 2; text-align: right; }

/* 推荐阅读 */
.t-reclist { list-style: none; margin: 0; padding: 0; }
.t-reclist li {
  display: flex;
  gap: 1.2ch;
  align-items: baseline;
  padding: .35lh .6ch;
  margin-inline: -.6ch;
  border-bottom: 1px dashed var(--bc-soft);
  transition: background-color .18s ease;
}
.t-reclist li:last-child { border-bottom: 0; }
.t-reclist li:hover { background: var(--panel); }
.t-reclist time { flex: 0 0 10ch; color: var(--fg-faint); font-size: .8em; font-variant-numeric: tabular-nums; }
.t-reclist a { color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.t-reclist a:hover { color: var(--accent); }

/* ==========================================================================
   评论模块 —— 平台 comment.js 动态注入，DOM 由 JS 生成，样式必须主题自备
   结构：
   section.nb-comments#nb-comments > h3.nb-comments-title
     div#nb-comment-list.nb-comment-list > .nb-comment-hint | .nb-comment*
     div#nb-comment-form.nb-comment-form > textarea#nb-comment-input + button#nb-comment-submit.nb-comment-btn
                                        | a.nb-comment-login
   ========================================================================== */
.nb-comments {
  margin-top: 3.2lh;
  padding-top: 1.4lh;
  border-top: var(--border-line) solid var(--bc);
}
.nb-comments-title {
  margin: 0 0 1.2lh;
  font-size: .95em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--h2);
}
.nb-comments-title::before { content: "▸ "; color: var(--fg-faint); font-weight: 400; }
.nb-comments-title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 8ch);
  margin-left: 1ch;
  border-top: var(--border-line) solid var(--bc-soft);
}

.nb-comment-list { display: flex; flex-direction: column; gap: 0; }

.nb-comment-hint {
  color: var(--fg-faint);
  font-size: .88em;
  padding: 1.4lh 0;
  text-align: center;
  border: var(--border-line) dashed var(--bc-soft);
  background: var(--panel);
}

.nb-comment {
  display: flex;
  gap: 1.4ch;
  align-items: flex-start;
  padding: .9lh 1ch;
  border-bottom: 1px dashed var(--bc-soft);
  transition: background-color .18s ease;
}
.nb-comment:last-child { border-bottom: 0; }
.nb-comment:hover { background: var(--panel); }

.nb-comment-avatar {
  flex: 0 0 3ch;
  width: 3ch;
  height: 3ch;
  display: block;
  object-fit: cover;
  border: var(--border-line) solid var(--bc);
  background: var(--panel-2);
  margin-top: .3lh;
}
.nb-comment-avatar-ph {
  display: block;
  background:
    repeating-linear-gradient(45deg, var(--bc-soft) 0 .5ch, transparent .5ch 1ch),
    var(--panel-2);
}

.nb-comment-body { flex: 1 1 auto; min-width: 0; }
.nb-comment-head {
  display: flex;
  align-items: baseline;
  gap: 1.2ch;
  flex-wrap: wrap;
  font-size: .86em;
}
.nb-comment-head b { color: var(--accent); font-weight: 700; }
.nb-comment-time { color: var(--fg-faint); font-size: .92em; font-variant-numeric: tabular-nums; }
.nb-comment-del {
  background: transparent;
  border: var(--border-line) solid var(--bc-soft);
  color: var(--fg-faint);
  font: inherit;
  font-size: .9em;
  padding: 0 .7ch;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nb-comment-del:hover { color: var(--h1); border-color: var(--h1); background: var(--panel-2); }

.nb-comment-content {
  margin-top: .35lh;
  color: var(--fg);
  font-size: .95em;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nb-comment-form {
  display: flex;
  flex-direction: column;
  gap: .9lh;
  margin-top: 1.6lh;
}
#nb-comment-input {
  width: 100%;
  min-height: 4lh;
  padding: .7lh 1.2ch;
  background: var(--panel);
  color: var(--fg);
  border: var(--border-line) solid var(--bc);
  border-radius: 0;
  font-family: inherit;
  font-size: .92em;
  line-height: 1.7;
  resize: vertical;
  transition: border-color .18s ease, background-color .18s ease;
}
#nb-comment-input::placeholder { color: var(--fg-faint); }
#nb-comment-input:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }

.nb-comment-btn {
  align-self: flex-start;
  background: transparent;
  border: var(--border-line) solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  font-family: inherit;
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3lh 1.8ch;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}
.nb-comment-btn:hover { background: var(--accent); color: var(--bg); }

.nb-comment-login {
  display: inline-block;
  align-self: flex-start;
  border: var(--border-line) dashed var(--bc);
  color: var(--fg-dim);
  font-size: .88em;
  padding: .5lh 1.6ch;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.nb-comment-login:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* ---------- 仿 Vim 状态栏 ---------- */
.t-statusbar {
  display: flex;
  align-items: stretch;
  height: 1.8lh;
  margin-top: auto;
  background: var(--status-bg);
  color: var(--status-fg);
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .05em;
}
.t-statusbar > * {
  display: flex;
  align-items: center;
  padding-inline: 1.2ch;
  white-space: nowrap;
}
.t-statusbar .t-mode {
  background: var(--bg);
  color: var(--accent);
  padding-right: 2.4ch;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.2ch) 100%, 0 100%);
}
.t-statusbar .t-file {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .95;
}
.t-statusbar .t-rest { opacity: .8; font-variant-numeric: tabular-nums; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
  html { --font-size: 15.5px; }
  .t-topbar .t-mid { display: none; }
  .t-topbar .t-clock { padding-inline: .8ch; }
  .t-topbar nav a { padding-inline: .6ch; }
  .t-item { flex-wrap: wrap; gap: .4lh 1.2ch; }
  .t-item .t-date { flex: 0 0 auto; }
  .t-item .t-cover { flex: 0 0 8ch; width: 8ch; height: 5ch; }
  .t-item .t-arrow { display: none; }
  .t-around { grid-template-columns: 1fr; gap: .4lh; }
  .t-around .t-next { grid-column: 1; text-align: left; }
  .t-reclist li { flex-wrap: wrap; }
  .t-reclist time { flex: 0 0 auto; }
  .nb-comment { gap: 1ch; padding-inline: .4ch; }
  .nb-comments-title::after { display: none; }
  .t-statusbar .t-rest { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .t-cursor { animation: none; }
}