/* ==========================================================================
   Liquid Glass Design System — Article & readability
   --------------------------------------------------------------------------
   The article stays glass. Readability is bought with geometry and contrast
   instead — a wide safe zone between the refracting rim and the first
   character, a calmer background under long text (background.css), a higher
   tint, and ink that is genuinely dark rather than "dark-ish".
   ========================================================================== */

#post.glass,
#page.glass,
#archive.glass,
#tag.glass,
#category.glass {
  padding: var(--g-pad) calc(var(--g-pad) + 6px);
  background: var(--g-tint);
  box-shadow: var(--g-shine), var(--g-shadow);
  border-radius: var(--g-radius, var(--g-r-lg));
}

/* The safe zone. Body text never comes within --g-pad of the rim, which is
   exactly the band the displacement map bends (see --g-band). */
#post .article-container,
#page .page-content {
  max-width: 46rem;
  margin: 0 auto;
}

#article-container {
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--g-ink);
}

#article-container p {
  margin: 0 0 1.2em;
}

#article-container a {
  color: var(--g-accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--g-dur-fast) var(--g-ease);
}

#article-container a:hover {
  border-bottom-color: var(--g-accent);
}

/* ---- Headings ---------------------------------------------------------- */

#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6 {
  color: var(--g-ink);
  font-weight: 700;
  letter-spacing: 0.01em;
  scroll-margin-top: calc(var(--g-nav-h) + 24px);
}

#article-container h1 { font-size: 1.7rem; }
#article-container h2 { font-size: 1.42rem; }
#article-container h3 { font-size: 1.2rem; }

/* A warm rule under h2 ties headings to the palette without a coloured slab. */
#article-container h2 {
  padding-bottom: 0.32em;
  border-bottom: 1px solid color-mix(in srgb, var(--g-accent) 32%, transparent);
}

#article-container h1 .headerlink,
#article-container h2 .headerlink,
#article-container h3 .headerlink,
#article-container h4 .headerlink,
#article-container h5 .headerlink,
#article-container h6 .headerlink {
  color: var(--g-ink-mute);
}

/* ---- Post header ------------------------------------------------------- */

#post .post-title,
#page .page-title {
  border-bottom: none;
  font-size: 2rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--g-ink);
  margin-bottom: 0.5em;
}

#post .post-meta,
#post #post-info .post-meta {
  color: var(--g-ink-dim);
  font-size: 0.85rem;
}

#post #post-info {
  text-align: left;
  max-width: 46rem;
  margin: 0 auto 1.8em;
  padding-bottom: 1.2em;
  border-bottom: 1px solid color-mix(in srgb, var(--g-ink) 12%, transparent);
}

/* ---- Prose furniture --------------------------------------------------- */

#article-container img {
  border-radius: var(--g-r-md);
  box-shadow: 0 6px 20px rgba(96, 56, 26, 0.16);
}

#article-container hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--g-accent) 45%, transparent),
    transparent
  );
  margin: 2.2em 0;
}

#article-container ul,
#article-container ol {
  padding-left: 1.5em;
}

#article-container li::marker {
  color: var(--g-accent);
}

/* Inline code is not a glass surface — it is type. Giving 8-character spans
   their own backdrop-filter is how you make a page drop frames. */
#article-container p code,
#article-container li code,
#article-container td code,
#article-container h1 code,
#article-container h2 code,
#article-container h3 code {
  background: color-mix(in srgb, var(--g-accent) 16%, transparent);
  color: color-mix(in srgb, var(--g-ink) 88%, var(--g-accent));
  border-radius: 6px;
  padding: 0.12em 0.42em;
  font-size: 0.9em;
}

/* ---- Quote: dense glass ------------------------------------------------ */

#article-container blockquote.glass {
  border: 1px solid var(--g-edge);
  border-left: 3px solid var(--g-accent);
  border-radius: var(--g-r-md);
  padding: 1.15em 1.5em;
  margin: 1.6em 0;
  color: var(--g-code-ink);
}

#article-container blockquote.glass p:last-child {
  margin-bottom: 0;
}

/* ---- Code: dark dense glass -------------------------------------------- */

/* A 20px corner against Butterfly's stock 10px of vertical padding leaves the
   first and last lines running into the arc -- horizontally there is room, but
   the curve eats the corner exactly where the text starts. These surfaces are
   rounder than the theme was drawn for, so the content is inset to roughly the
   radius before it begins.

   figure.highlight and a bare pre need different treatment: the figure wraps a
   table (line numbers make it one) plus a toolbar Butterfly injects at runtime,
   so the inset is split between the wrapper and the table. A bare pre is the
   content itself, so it just takes a larger padding than the theme's 10px 20px
   -- setting a small one here would override the theme's and make it tighter,
   not roomier. */
#article-container figure.highlight.glass,
#article-container pre.glass {
  border: 1px solid var(--g-code-edge);
  border-radius: var(--g-r-md);
  overflow: hidden;
  margin: 1.6em 0;
}

#article-container figure.highlight.glass {
  padding: 6px;
}

#article-container figure.highlight table {
  padding: 12px 16px;
}

#article-container pre.glass {
  padding: 18px 24px;
}

/* The toolbar sits above the code, so it only has the top corners to clear. */
#article-container figure.highlight .highlight-tools {
  padding: 6px 14px;
}

/* ---- 长代码块的展开按钮 ------------------------------------------------
   Butterfly 给它的是 var(--hlexpand-bg)：代码主题背景色 60% → 90% 的实心
   渐变。那是为不透明代码块画的——压在半透明玻璃上，会变成一条颜色对不上
   的实心条横在玻璃中间。

   改成从透明渐到玻璃自己的着色，读起来就是代码在薄雾下淡出。

   注意这里**不能**用 backdrop-filter：.glass 有 isolation: isolate，
   它是一个 backdrop root，子元素的 backdrop-filter 采样不到任何东西。 */

#article-container figure.highlight .code-expand-btn {
  /* 外层有 6px padding，绝对定位的 width:100% 会算到 padding box 上，
     导致右边溢出 6px。显式拉到两端。 */
  left: 0;
  right: 0;
  width: auto;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--g-tint) 55%, transparent) 42%,
    var(--g-tint) 100%
  );
  border-radius: 0 0 calc(var(--g-r-md) - 6px) calc(var(--g-r-md) - 6px);
}

#article-container figure.highlight .code-expand-btn i {
  color: var(--g-code-ink-dim);
}

/* 展开之后不再需要遮罩，只留下收起的箭头 */
#article-container figure.highlight .code-expand-btn.expand-done {
  background: none;
}

@media (prefers-reduced-motion: reduce) {
  #article-container figure.highlight .code-expand-btn i {
    animation: none;
    opacity: 0.7;
  }
}

#article-container figure.highlight .highlight-tools {
  background: transparent;
  color: var(--g-code-head);
}

#article-container figure.highlight table,
#article-container figure.highlight pre {
  background: transparent !important;
  color: var(--g-code-ink);
}

#article-container figure.highlight .gutter pre {
  color: var(--g-code-ink-dim);
}

#article-container figure.highlight .line {
  line-height: 1.7;
}

/* ---- Table: dense glass ------------------------------------------------ */

#article-container .table-wrap.glass {
  padding: 10px 14px;
  overflow-x: auto;
  margin: 1.6em 0;
}

#article-container .table-wrap table {
  background: transparent;
  border: none;
  margin: 0;
  color: var(--g-code-ink);
}

#article-container .table-wrap th,
#article-container .table-wrap td {
  border-color: var(--g-code-edge);
  background: transparent;
}

#article-container .table-wrap thead {
  background: var(--g-code-head-bg);
}

/* ---- Copyright / related ----------------------------------------------- */

/* The copyright block is small print sitting over whatever the background
   ornament happens to be doing, and on the brighter ribbons it was being read
   straight through. A tint that is 8% of anything is not a surface; this takes
   the medium weight's own tint so the text has something to sit on, and the
   labels and links take the ink tokens rather than Butterfly's blue. */
#post .post-copyright {
  --g-tint: rgba(255, 250, 243, 0.30);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r-md);
  background: var(--g-tint);
  max-width: 46rem;
  margin: 2.4em auto 0;
  padding: 14px 20px;
}

/* Butterfly stamps a second copyright glyph (\f1f9) on the block through
   ::before, on top of the per-row icons that already say the same thing. */
#post .post-copyright::before {
  content: none;
}

#post .post-copyright .post-copyright-meta {
  color: var(--g-accent);
}

#post .post-copyright .post-copyright-info,
#post .post-copyright .post-copyright-info a {
  color: var(--g-ink);
}

#post .post-copyright .post-copyright-info a {
  text-decoration-color: color-mix(in srgb, var(--g-ink) 40%, transparent);
}

#post .post-copyright .post-copyright-info a:hover {
  color: var(--g-accent);
}

/* ---- Post footer navigation: previous / next / related ------------------ */

#pagination.pagination-post .pagination-related.glass,
.relatedPosts .relatedPosts-list .pagination-related.glass {
  --g-radius: var(--g-r-md);
  overflow: hidden;
}

#pagination.pagination-post .pagination-related.glass .cover,
.relatedPosts .relatedPosts-list .pagination-related.glass .cover {
  border-radius: inherit;
}

/* The prev/next pair sit side by side; without a gap the two glass edges
   touch and read as one panel with a seam. */
#pagination.pagination-post {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap);
  background: none;
}

#pagination.pagination-post .pagination-related {
  flex: 1 1 260px;
  width: auto;
}

/* ---- Reading progress bar (Butterfly's) -------------------------------- */

.pace .pace-progress {
  background: var(--g-accent) !important;
}