/* ===================================================================
 * Stellar 1.41+ 首页文章卡片 hover 修正
 *
 * 背景：主题从 1.41 起在 source/css/_components/list.styl 里移除了
 * .post-card-wrap 的 hoverable-card()，改用标题下方一根 12px 高、
 * 50% 透明度的主题色横条（.post-title::after）作为唯一 hover 反馈。
 * 该效果按拉丁文字的降部空白设计，中文方块字撑满 em 框，
 * 横条会把字的下三分之一糊住，看起来像没渲染完。
 *
 * 本文件：去掉横条，恢复 1.38 的整卡 hover 反馈。
 * 选择器统一多加一层 .l_main 提高特异性，不依赖 CSS 加载顺序。
 * 删掉这个文件即可完全回到主题默认行为。
 * =================================================================== */

/* 1. 彻底去掉标题下的主题色横条 */
.l_main .post-list .post-card .post-title::after {
  display: none;
}

/* 顺带把标题盒子还原成 1.38 的整行块级（1.41 改成了 width: fit-content，
   那是为了让横条宽度贴合文字才加的，横条没了就不需要） */
.l_main .post-list .post-card .post-title {
  width: auto;
}

/* 2. 恢复整卡 hover 反馈，对应 1.38 的 hoverable-card() */
.l_main .post-list .post-card-wrap {
  transition: box-shadow 0.2s ease-out;
}

/* 亮色：阴影加深 */
:root[data-theme="light"] .l_main .post-list .post-card-wrap:hover {
  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15);
}

/* 暗色：主题色辉光 */
:root[data-theme="dark"] .l_main .post-list .post-card-wrap:hover {
  box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme);
}

/* 跟随系统配色时的兜底 */
:root:not([data-theme]) .l_main .post-list .post-card-wrap:hover {
  box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .l_main .post-list .post-card-wrap:hover {
    box-shadow: 0 0 4px -2px var(--theme), 0 0 24px -8px var(--theme);
  }
}

/* 3. 封面缩放动画改回 0.5s（1.41 拖长到了 1.5s，hover 时显得迟钝） */
.l_main .post-list .post-card img {
  transition: all 0.2s ease-out, transform 0.5s ease-out;
}


/* ===================================================================
 * Mermaid 时序图配色修正
 *
 * 背景：主题的 mermaid 主题是 neutral（全灰阶），消息文字和消息线都是
 * #333，而本站正文区是半透明背景图，深灰画在上面几乎看不清；主题自带的
 * css/plugins/mermaid.css 只覆盖了流程图（node/edge/cluster），
 * 时序图的 actor / note / messageText 一个都没管。
 *
 * 本文件：把时序图的颜色全部换成站点 CSS 变量，明暗两套配色自动跟随。
 * 变量来自主题 _defines/theme_base.styl：
 *   --theme / --theme-a10..a30 主题色，--text-p1..p4 正文文字四档透明度，
 *   --block / --block-border 块级底色与描边，--card 卡片底色。
 * =================================================================== */

/* 图整体：套一层磨砂面板，挡住正文区背后的背景图，文字才有干净的底 */
pre.mermaid {
  padding: 16px 8px;
  border: 1px solid var(--block-border);
  border-radius: 8px;
  background: var(--block);
  backdrop-filter: blur(16px) saturate(50%) brightness(1.75);
  -webkit-backdrop-filter: blur(16px) saturate(50%) brightness(1.75);
}

/* 暗色下把背后的背景图压暗，白字才压得住（亮色反之，见上面的默认值） */
:root[data-theme="dark"] pre.mermaid {
  backdrop-filter: blur(16px) saturate(80%) brightness(0.55);
  -webkit-backdrop-filter: blur(16px) saturate(80%) brightness(0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) pre.mermaid {
    backdrop-filter: blur(16px) saturate(80%) brightness(0.55);
    -webkit-backdrop-filter: blur(16px) saturate(80%) brightness(0.55);
  }
}

/* 文字：actor 名、消息文字、note 文字、loop 标签，统一用正文色 */
.mermaid text,
.mermaid text tspan,
.mermaid .messageText,
.mermaid .noteText,
.mermaid .noteText tspan,
.mermaid .labelText,
.mermaid .labelText tspan,
.mermaid .loopText,
.mermaid .loopText tspan,zuo
/* 参与者方框：卡片底 + 主题色描边 */
.mermaid rect.actor,
.mermaid .actor-top,
.mermaid .actor-bottom {
  fill: var(--block) !important;
  stroke: var(--theme) !important;
}

/* 参与者生命线：淡一档，别抢戏 */
.mermaid line.actor-line {
  stroke: var(--text-p4) !important;
}

/* 消息线与箭头：主题色，深色背景下也够亮 */
.mermaid .messageLine0,
.mermaid .messageLine1 {
  stroke: var(--theme) !important;
}

.mermaid marker path,
.mermaid marker circle,
.mermaid #arrowhead path {
  fill: var(--theme) !important;
  stroke: var(--theme) !important;
}

/* Note（状态标注）：主题色浅底 + 主题色描边 */
.mermaid rect.note {
  fill: var(--theme-a20) !important;
  stroke: var(--theme) !important;
}

/* loop / alt / opt 分组框 */
.mermaid .labelBox {
  fill: var(--block) !important;
  stroke: var(--theme) !important;
}

.mermaid .loopLine {
  stroke: var(--theme) !important;
}