/* ==========================================================================
   GooseBlog × Redefine —— Goose 遗留能力的皮肤
   做三件事：
     1. 承载 Goose 组件所需样式（分享 / Toast / 链接卡片）
     2. 微调 giscus 评论区（宽度、加载留白、iframe 边框）
     3. 沿用 Redefine 的 CSS 变量，深浅色自动跟随

   颜色一律走主题 CSS 变量（--primary-color 等），不写死色值 ——
   这样改主色时全站跟着变，不用挨个找。

   字体默认走主题 CSS 变量与系统字体栈。第 8 节只补 tailwind 的一处变量，
   不覆盖任何组件的 font-family —— 中文字体（LXGW WenKai Screen）的接管
   是在主题 styl 里做的，这样 Chillax / Geist 这些西文字体能原样保留。
   ========================================================================== */

/* ---------- 2. 分享（工具栏内）+ 面板 ---------- */
/* 分享：按钮挂在主题自带的右下角工具栏里（#gooseShareTool），
   由主题 side-tools.styl 统一给尺寸/圆角/hover，这里只补两件事：
     1. 非文章页隐藏
     2. 面板贴着按钮左侧弹出（坐标由 share.js 按按钮位置算，不写死）
实测不好使！！！！！！！！！！！！！！！！！！！！！！！！！！！！	 */
.tool-goose-share.hidden,
#gooseShareTool.hidden {
  display: none;
}

/* 位置由 share.js 按按钮 rect 算出来写在行内 style 上；
   这里给一份右下角兜底，按钮 rect 为 0（工具栏收起 / 刚被 swup 换掉）时用，
   免得面板没拿到坐标、以 static 姿态掉到页面最底部看不见。 */
.goose-share-panel {
  position: fixed;
  right: 78px;
  bottom: 16px;
  z-index: 897;
  background: var(--background-color-transparent-80);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 8px;
  min-width: 140px;
  box-shadow: 0 8px 32px var(--shadow-color-2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.goose-share-panel.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.goose-share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--second-text-color);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.goose-share-item:hover {
  background: var(--third-background-color);
  color: var(--primary-color);
}
.goose-share-item svg {
  flex-shrink: 0;
}

/* 窄屏：工具栏本身由主题缩小了，按钮不用管；
   面板要防止贴到屏幕边缘，给它一个最小右边距。
   注意面板坐标由 share.js 按按钮位置算，这里只做兜底约束。 */
@media (max-width: 768px) {
  .goose-share-panel {
    max-width: calc(100vw - 28px);
  }
}

/* ---------- 3. Toast ---------- */
.goose-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  padding: 10px 24px;
  border-radius: 20px;
  background: var(--primary-color);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.goose-toast.active {
  opacity: 1;
}

/* ---------- 4. 海报弹层 ---------- */
.goose-poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.goose-poster-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.goose-poster-box {
  position: relative;
  max-width: 340px;
  width: calc(100% - 48px);
}
.goose-poster-close {
  position: absolute;
  top: -32px;
  right: 0;
  font-size: 28px;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: none;
  cursor: pointer;
}
.goose-poster-close:hover {
  color: #fff;
}
.goose-poster-download {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  border-radius: 8px;
  border: none;
  background: var(--primary-color);
  color: #fff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.goose-poster-download:hover {
  opacity: 0.85;
}

.goose-poster-html {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #15131f;
  color: #f4f0fb;
  /* ── 字体：整块海报一律走系统字体栈，不碰站点的 Geist / Chillax ──
     三个理由，都跟 html2canvas 的脾气有关：
       1. Geist / Chillax 是 webfont，靠 @font-face 懒加载。海报 DOM 是
          点按钮才建的，建完立刻截图，字体常常还没下完 —— 截图里就
          变成系统默认字体，且不报错，只觉得"看着不对劲"。
       2. html2canvas 对 @font-face 的支持本来就弱，就算下载完了也
          可能渲染不出来。
       3. 这俩字体**没有中文字形**。海报标题是中文，实际渲染时本来就
          要回退到 PingFang / 微软雅黑 —— 也就是说，写不写它们，
          中文那部分长得一模一样，纯粹多担一份风险。
     系统字体是访客机器本地就有的，零下载、零等待、零失败可能。 */
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
               'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif;
}
/* 只有真配了 ttf（share.js 的 POSTER_FONT_URL 非空）时，
   .goose-poster-has-font 才会加到这个节点上，此时切自定义字体。 */
.goose-poster-has-font {
  font-family: 'GoosePoster', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', '微软雅黑', sans-serif;
}
.goose-poster-html-bg {
  width: 100%;
  height: 200px;
  background-color: var(--second-background-color);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.goose-poster-html-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.goose-poster-html-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #15131f);
}
.goose-poster-html-title {
  padding: 8px 20px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #f4f0fb;
  /* font-family 由 .goose-poster-html / .goose-poster-has-font 在容器层
     统一给，这里不再重复声明 —— 否则将来换字体要改两处，容易漏。 */
}
/* 自定义字体通常比系统字体瘦一圈，稍微放开点行距，两行标题不打架 */
.goose-poster-has-font .goose-poster-html-title {
  line-height: 1.45;
}
.goose-poster-html-divider {
  margin: 12px 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.goose-poster-html-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 20px;
}
.goose-poster-html-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.goose-poster-html-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.goose-poster-html-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.goose-poster-html-domain {
  font-size: 12px;
  color: #f4f0fb;
}
.goose-poster-html-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}
.goose-poster-html-qr {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  flex-shrink: 0;
  background: #fff;
  padding: 3px;
}

/* ---------- 5. 链接卡片（原 Goose link-card.js，去后端后走静态渲染） ---------- */
.goose-link-card {
  display: flex;
  gap: 0;
  margin: 16px 0;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  background: var(--second-background-color);
  text-decoration: none;
  color: var(--first-text-color);
  transition: border-color 0.15s, box-shadow 0.15s;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.5;
}
.goose-link-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--redefine-box-shadow-flat);
}
.goose-link-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.goose-link-card-domain {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--third-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 站点标识位：favicon 拿不到时显示首字母标（纯 CSS，零网络，不会出怪图标） */
.goose-link-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.goose-link-card-favicon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  object-fit: contain;
}

.goose-link-card-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--third-background-color);
  color: var(--third-text-color);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.goose-link-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--first-text-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  word-break: break-word;
}
.goose-link-card-desc {
  font-size: 12px;
  color: var(--third-text-color);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⚠️ 下划线必须在这里用 !important + 更高优先级压掉。
   主题 markdown.styl 里写的是 `.markdown-body a:not(.not-markdown) { text-decoration: underline }`，
   hover/focus 还是 `text-decoration: underline !important`。
   而 goose-skin.css 在 head 里排在主题 style.css 之前，同优先级会被主题反超，
   !important 也会被主题的 !important 同分打平、按加载顺序输掉。
   所以这里：多叠一个 .goose-link-card 类提高优先级 + 自己也写 !important。 */
.markdown-body a.goose-link-card:not(.not-markdown),
.markdown-body a.goose-link-card:not(.not-markdown):hover,
.markdown-body a.goose-link-card:not(.not-markdown):focus {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  padding-bottom: 0;
}

/* 缩略图：由 worker/link-preview 抓到的 og:image，加载成功才显示 */
.goose-link-card-thumb {
  flex-shrink: 0;
  width: 120px;
  align-self: stretch;
  overflow: hidden;
  background: var(--third-background-color);
}
.goose-link-card-thumb[hidden] {
  display: none;
}
.goose-link-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 480px) {
  .goose-link-card {
    flex-direction: column;
    font-size: 12px;
  }
  .goose-link-card.has-thumb .goose-link-card-thumb {
    width: 100%;
    height: 160px;
    order: -1;   /* 窄屏时图放上面，文字在下更好读 */
  }
}

/* ---------- 6. 微调：文章内音视频播放器（原站 Worker 渲染的同款） ---------- */
.markdown-body audio,
.markdown-body video {
  width: 100%;
  border-radius: 10px;
  margin: 12px 0;
}

/* ---------- 7. giscus 评论区微调 ---------- */
/* 只做容器层面的占位与对齐，iframe 内部的样式由 giscus 自己的 default.css 负责。
   两点别碰：
     - 不要给 iframe 设 opacity：client.js 自己会在 load 时清掉内联 opacity，
       CSS 里再写死会让评论区永久隐形。
     - 不要写 color-scheme：主题自带的 lightDarkSwitch.js 会在切换深浅色时
       用 postMessage 把新 theme 推给 giscus，这里插手反而会打架。 */
#giscus-container {
  width: 100%;
  min-height: 180px;   /* 懒加载未触发时占位，避免滚到底时页面跳动 */
}

#giscus-container iframe.giscus-frame {
  width: 100%;
  border: none;
}

/* ---------- 7.5 代码高亮补漏 ----------
   Redefine 的 highlight.styl 漏了 operator（+ - * / = 这类符号），
   全站 11 处不上色。这里补一条，沿用主题的 CSS 变量，深浅色自动跟随。
   .emphasis / .strong 主题已给 italic / bold，只是没颜色，保持原样即可。 */
.highlight pre .operator,
.markdown-body pre .operator {
  color: var(--highlight-keyword);
}

/* ---------- 7.6 友链页网站截图 ----------
   主题给了 thumbnail 位，但原站 friends 表没有截图字段，导入后是空的。
   现在由 friends-thumb.js 拿链接预览 Worker 的 og:image 来填。
   抓不到就整块 hidden，所以这里只做两件事：
     1. 淡入，避免图片突然蹦出来
     2. 图片加载失败时兜底隐藏（JS 里也处理了，这里是双保险） */
.friends-link-container .thumbnail img.goose-thumb-lazy {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.friends-link-container .thumbnail img.goose-thumb-lazy.is-loaded {
  opacity: 1;
}
.friends-link-container .thumbnail[hidden] {
  display: none;
}

/* ---------- 8. 字体：这里只补 tailwind 一处，真正的修正在主题 styl 里 ----------
   ⚠️ 这里曾经写过 `html body [class] { font-family: inherit }`，是错的，已删。
      它把所有带 class 的元素一律改成继承，于是 .navbar-container /
      .home-banner-container / .site-name / .ml13 这几个**本来以
      Chillax-Variable 打头**的组件也被抹平，英文标题的 Chillax 直接丢失、
      退化成系统默认字体。教训：不要用通配去"统一"字体，西文和中文要分层。

   现在的解法是改主题源文件（variables.styl 2 处 + 硬编码 Chillax 的 4 处）：
     把 $chinese-font-family 插到 'Geist Variable' / 'Chillax-Variable' 之后、
     system-ui 之前。
   位置很讲究：
     · Chillax / Geist 只有西文字形，放最前面不会挡住中文；
     · system-ui（mac 上就是 SF Pro）、-apple-system、PingFang SC、微软雅黑
       全都自带中文字形，LXGW必须排在它们前面，否则中文永远轮不到它。
   CSS 是逐字符回退的，于是英文走 Chillax/Geist、中文走 LXGW，各走各的。

   改变量而不是在组件上逐个打补丁：markdown.styl / toc.styl / home-content.styl /
   article-copyright-info.styl 都是引用 $english-font-family 的，源头一改全跟着
   生效，不用去猜 stylus 嵌套后生成的选择器特异性。

   下面这条只针对 tailwind：tailwind.css 在 style.css **之后**加载，它 base 里的
   `html,:host { font-family: var(--default-font-family) }` 会把 <html> 盖回
   ui-sans-serif。body 及其子元素不受影响（basic.styl 有明确声明），
   这里改变量只是让 <html> 本身也一致。 */
:root {
  --goose-font-sans: 'Geist Variable', 'LXGW WenKai Screen', system-ui, -apple-system,
                     'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* html:root 特异性高于 tailwind base 的 :root */
html:root {
  --default-font-family: var(--goose-font-sans);
}

/* ---- 8.1 正文：英文也走文楷 ----
   文楷**自带完整拉丁字形**（实测 lxgw-wenkai-screen-web 的分片 0.woff2，
   unicode-range 含 U+20-7E；用 fontTools 查 cmap，A-Z / a-z / 0-9 全部有字形），
   所以想让正文的英文、数字也统一成文楷，只要把中文字体提到西文之前即可。
   这一层在主题 variables.styl 里新增的 $article-font-family 完成（LXGW → Geist → …），
   .markdown-body 及其标题引用它；UI（导航栏 / TOC / 卡片标题）仍用
   $default-font-family（Geist → LXGW → …），英文保持 Geist、Chillax 不变。
   这里不再写任何覆盖规则 —— 层级交给主题变量，比在 CSS 里抢特异性稳。

   ⚠️ 已知代价：文楷 web 分包**只有 400 一个字重**（result.css 里
   font-weight: 400，且 npm 包只有 screen / gbscreen / monoscreen 四个变体，
   没有 bold）。所以正文里的 **加粗** 是浏览器合成粗体（faux bold），
   文楷笔画细，合成后容易糊成一团。若嫌难看，取消下面这段注释，
   改用描边加粗（比合成粗体干净，代价是笔画略圆润）：

.markdown-body strong,
.markdown-body b {
  font-weight: 400;
  -webkit-text-stroke: 0.3px currentColor;
}

   真想要原生粗体只能自托管：下载 LXGW WenKai Bold 的 ttf，
   用 cn-font-split 分包后挂 @font-face，把上面的 font-weight 改成 700。 */

/* ---- 8.2 文章标题：英文同样走文楷 ----
   「文章标题」在站上有三个出处，全都改成了 $article-font-family（LXGW 打头）：
     · 文章页大标题   .article-title-cover / .article-title-regular
                     （ejs 里带 tailwind class 的 h1，在 .markdown-body 之外，
                       原本没声明 font-family，靠继承 → 英文是 Geist）
     · 首页卡片标题   .home-article-title
     · 归档/列表标题  span.article-title
   UI 上的标题（导航栏 logo、侧边栏站名、首页 banner）仍走 Chillax，不受影响。
   文章正文内的 h2~h6 由 markdown.styl 统一走 $article-font-family，
   加上这里的 h1，一篇文章里所有标题和正文的英文观感就是一致的。 */