/* ============================================================
   MIKASU — article page (load with style.css)
   ============================================================ */

/* ---------- 阅读进度条 ---------- */

#read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--acc);
  z-index: 80;
  pointer-events: none;
  transition: width .08s linear;
  opacity: .75;
}

/* ---------- 回顶按钮 ---------- */

.back-top {
  position: fixed;
  right: 26px; bottom: 30px;
  z-index: 70;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--tx-dim);
  background: rgba(8, 8, 8, .9);
  border: 1px solid var(--line-strong);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility 0s linear .25s, color .15s var(--ease), border-color .15s var(--ease);
  cursor: pointer;
}
.back-top.show {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              color .15s var(--ease), border-color .15s var(--ease);
}
.back-top:hover { color: var(--acc); border-color: var(--acc-dim); }

.art-top { margin-bottom: 36px; }

.art-back {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--tx-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s var(--ease), transform .18s var(--ease);
}
.art-back:hover { color: var(--acc); transform: translateX(-3px); }

.art-head { margin-top: 40px; }
.art-date { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--tx-dim); }
.art-title {
  margin-top: 14px;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .015em;
  color: var(--tx-hi);
}
.art-tags {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--tx-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 0;
}
.art-tags .tlabel { color: var(--tx-faint); margin-right: 10px; }
.art-tags a { color: var(--tx-dim); transition: color .15s var(--ease); }
.art-tags a:hover { color: var(--acc); }
.art-tags .sep { margin: 0 8px; color: #4C4C4C; }
.art-tags .rt { margin-left: 14px; color: var(--tx-faint); }
.art-rule { margin-top: 34px; height: 1px; background: var(--line); }

/* ---------- layout: body + toc ---------- */

.article-wrap { display: flex; gap: 56px; align-items: flex-start; }
.article-body { max-width: 760px; min-width: 0; flex: 1; }

.article-toc { display: none; }
@media (min-width: 1200px) {
  .article-toc {
    display: block;
    width: 190px;
    flex-shrink: 0;
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.toc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--tx-dim);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.toc-item {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--tx-dim);
  padding: 7px 0 7px 12px;
  border-left: 1px solid var(--line-soft);
  line-height: 1.5;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.toc-item:hover { color: var(--tx); }
.toc-item.on {
  color: var(--acc);
  border-left-color: var(--acc);
  background: rgba(122, 215, 209, .03);
}
.toc-item.sub { padding-left: 28px; }

/* ---------- content typography ---------- */

.article-body p {
  margin: 22px 0;
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: .01em;
  color: var(--tx);
  /* CJK 标点压缩（新浏览器生效，旧的忽略） */
  text-spacing-trim: space-first;
  hanging-punctuation: first allow-end;
}

.article-body h1, .article-body h2 {
  font-size: 20px;
  margin: 52px 0 4px;
  padding-top: 8px;
  letter-spacing: .02em;
  scroll-margin-top: 80px;
}
.article-body h2::before {
  content: "// ";
  color: var(--acc-dim);
  font-weight: 400;
}
.article-body h3 {
  font-size: 16px;
  margin: 38px 0 2px;
  scroll-margin-top: 80px;
}
.article-body h4, .article-body h5, .article-body h6 {
  font-size: 14px;
  margin: 30px 0 0;
  font-family: var(--font-mono);
  letter-spacing: .06em;
}

.article-body h1 .h-anchor, .article-body h2 .h-anchor, .article-body h3 .h-anchor {
  display: inline-block;
  width: 0;
  margin-left: -1.15em;
  padding-right: .35em;
  color: var(--acc-dim);
  font-weight: 400;
  opacity: 0;
  transition: opacity .15s var(--ease), color .15s var(--ease);
  overflow: hidden;
  vertical-align: baseline;
  font-size: .85em;
}
.article-body h1:hover .h-anchor, .article-body h2:hover .h-anchor, .article-body h3:hover .h-anchor { opacity: 1; }
.article-body .h-anchor:hover { color: var(--acc); }

.article-body a {
  color: var(--tx-hi);
  border-bottom: 1px solid var(--acc-dim);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.article-body a:hover { color: var(--acc); border-bottom-color: var(--acc); }

.article-body ul, .article-body ol { margin: 20px 0; padding-left: 24px; }
.article-body li { margin: 7px 0; padding-left: 4px; line-height: 1.85; }
.article-body li::marker { color: var(--tx-faint); }
.article-body ul ul, .article-body ol ol { margin: 6px 0; }

.article-body blockquote {
  margin: 26px 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line-strong);
  transition: border-color .2s var(--ease);
}
.article-body blockquote:hover { border-left-color: var(--acc-dim); }
.article-body blockquote p { margin: 10px 0; color: var(--tx-dim); font-size: 14px; }

.article-body hr { border: 0; height: 1px; background: var(--line); margin: 44px 0; }

.article-body img {
  display: block;
  margin: 30px auto;
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.article-body img:hover { border-color: var(--acc-dim); }

.article-body mark {
  background: rgba(122, 215, 209, .13);
  color: var(--tx-hi);
  padding: 0 .18em;
}
/* KaTeX：行间公式可横滚，防溢出 */
.article-body .katex { font-size: 1.05em; }
.article-body .katex-display {
  margin: 24px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
}

.article-body table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 13.5px; }
.article-body th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--tx-dim);
  font-weight: 500;
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--line-strong);
}
.article-body td {
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--tx);
  vertical-align: top;
  transition: background .15s var(--ease);
}
.article-body tbody tr:hover td { background: rgba(255,255,255,.015); }
.article-body td:last-child, .article-body th:last-child { padding-right: 0; }
@media (max-width: 767px) {
  .article-body table { display: block; overflow-x: auto; }
}

.article-body code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: #0E0E0E;
  border: 1px solid var(--line);
  padding: .12em .42em;
  color: #C9C9C9;
}

.article-body strong { color: var(--tx-hi); font-weight: 600; }

/* ---------- code block ---------- */

.codeblock {
  margin: 26px 0;
  border: 1px solid #191919;
  background: var(--bg-2);
  transition: border-color .2s var(--ease);
}
.codeblock:hover { border-color: var(--line-strong); }

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-bottom: 1px solid #151515;
}
.code-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--tx-faint);
  text-transform: uppercase;
}
.code-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--tx-faint);
  text-transform: uppercase;
  transition: color .15s var(--ease);
}
.code-copy:hover { color: var(--acc); }
.code-copy.done { color: var(--acc); }

.codeblock pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: #CECECE;
  tab-size: 4;
}
.codeblock code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }

/* 语法高亮：冷灰 + 极少量冷青 */
.tok-c { color: #747474; }
.tok-s { color: #73908C; }
.tok-k { color: #6FBDB8; }
.tok-n { color: #B0B0B0; }
.tok-p { color: #5C6E6C; }

/* ---------- prev / next ---------- */

.art-nav {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.art-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--tx-dim);
  max-width: 46%;
  transition: color .15s var(--ease);
}
.art-nav a:hover { color: var(--acc); }
.art-nav .nav-dir { display: block; font-size: 9.5px; letter-spacing: .24em; color: var(--tx-faint); margin-bottom: 5px; }
.art-nav .next { text-align: right; margin-left: auto; }

/* ---------- comments ---------- */

.comments { margin-top: 64px; }
.comments .sec-label { margin-bottom: 8px; }
.comments .count { color: var(--tx-faint); }

.c-notice {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--acc);
  letter-spacing: .05em;
}
.c-err {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #C0716E;
  letter-spacing: .05em;
}
.c-empty {
  padding: 24px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--tx-faint);
}

.c-item { padding: 18px 0 18px 12px; border-bottom: 1px solid var(--line-soft); transition: background .15s var(--ease); }
.c-item:hover { background: rgba(255,255,255,.012); }
.c-head { display: flex; align-items: baseline; gap: 14px; }
.c-name { font-size: 13px; color: var(--tx-hi); font-weight: 550; }
.c-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx-faint); letter-spacing: .06em; }
.c-body { margin-top: 8px; font-size: 13.5px; color: var(--tx-dim); line-height: 1.8; }

.c-form { margin-top: 32px; }
.c-form {
  margin-top: 46px;
  border: 1px solid var(--line);
  background: #070707;
  padding: 22px 24px;
}
@media (max-width: 640px) { .c-form { padding: 18px 16px; } }

.c-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.c-form-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--tx-dim);
}
.c-form-title::before { content: "// "; color: var(--acc-dim); }
.c-form-note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--tx-faint);
}

.c-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .c-grid { grid-template-columns: 1fr; } }

.c-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--tx-dim);
}
.c-form input, .c-form textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--tx-hi);
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 11px 13px;
  outline: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  resize: vertical;
}
.c-form input::placeholder, .c-form textarea::placeholder { color: var(--tx-faint); }
.c-form input:focus, .c-form textarea:focus { border-color: var(--focus); background: #0C0C0C; }
.c-form .c-msg { margin-bottom: 0; }

.c-form-foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.c-form-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--tx-faint);
}
.c-form .c-submit {
  color: var(--acc);
  border-color: var(--acc-line);
}
.c-form .c-submit:hover { border-color: var(--acc); background: rgba(122,215,209,.06); }

.c-err {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #C0716E;
  margin: -4px 0 16px;
  padding: 10px 14px;
  border-left: 2px solid #C0716E;
  background: rgba(192, 113, 110, .06);
}

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--tx);
  background: none;
  border: 1px solid var(--line-strong);
  padding: 11px 22px;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover { color: var(--acc); border-color: var(--acc-dim); }
@media (max-width: 767px) {
  .btn { min-height: 44px; padding: 12px 24px; }
}

/* ---------- 移动端目录（<details> 折叠，宽屏隐藏） ---------- */

.toc-mobile { display: none; }
@media (max-width: 1199px) {
  .toc-mobile {
    display: block;
    margin: 0 0 36px;
    border: 1px solid var(--line-soft);
    padding: 12px 16px;
  }
  .toc-mobile summary {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .26em;
    color: var(--tx-faint);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }
  .toc-mobile summary::before { content: "+ "; color: var(--acc-dim); }
  .toc-mobile[open] summary::before { content: "− "; }
  .toc-mobile summary:hover { color: var(--tx); }
  .toc-mobile .tocm-list { margin-top: 12px; display: flex; flex-direction: column; }
  .toc-mobile .toc-item { border-left: 1px solid var(--line-soft); }
}