/* ==========================================================================
   格物 GRID —— 结构层自定义样式 (grid-custom.css)
   --------------------------------------------------------------------------
   和主题文件的分工：

     theme-grid-light.css / theme-grid-dark.css / theme-grid-auto.css
         → 只管「颜色与字体」，覆写 Gitea 的主题变量

     grid-custom.css（本文件）
         → 只管「结构与文字」：导航栏站名、页脚信息条、关于页版式

   为什么单独放一个外部 CSS 文件，而不是写进 head 里的 style 块：
     Gitea 1.27 引入了带 nonce 的 Content-Security-Policy。内联 script 标签
     从 1.27 起必须写成 nonce="{{ctx.CspScriptNonce}}" 才执行（官方标注的
     BREAKING 变更），裸 script 标签会被静默拦掉——不报错、不执行、很难查。
     内联 style 块的安全性取决于实例的 CSP 配置。
     走同源外部文件由 style-src 'self' 覆盖，这两条路都不沾。

   注意：上面这两段刻意不写出 script / style 的尖括号字面量。本文件会被
   tools/build_preview.py 整段内联进预览页的 style 块里，注释里的尖括号
   字面量会被「删脚本」的正则当成真的标签起点，把后面一大段一起吃掉。

   本文件由 tools/build_deploy.py 生成。要改内容请改脚本再重跑，
   直接改这里会在下次生成时被整体覆盖。

   改了本文件之后，把引用它的版本号递增（当前 ?v=4）——改
   build_deploy.py 顶部的 CSS_VER 即可，header.tmpl 与 about.html
   两处引用会自动同步。不递增的话浏览器会继续吃旧缓存。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · 品牌文字
   -------------------------------------------------------------------------- */
:root {
  /* 站名。只给「关于页」这类不经过 Gitea 模板管线的独立页面用。
     导航栏与登录页的站名现在由模板直接输出 {{AppName}}（取自 app.ini），
     不再在这里维护第二份——避免两处叫法不一致。 */
  --grid-wordmark: "格物 GRID";
}


/* --------------------------------------------------------------------------
   2 · 导航栏站名
   Gitea 1.22 起，内置导航栏只渲染 30×30 的 logo 图片，不输出站名文本
   （见 templates/base/head_navbar.tmpl：navbar-left 里只有 <img>）。
   本方案直接改了这个模板，在 logo 的 <a> 里补了一个真实 DOM 节点：
       <span class="not-mobile grid-wordmark">{{AppName}}</span>

   为什么不用 CSS 伪元素 content 去补（本方案第一版就是这么做的）：
     · 伪元素内容对屏幕阅读器不可见
     · 不能被选中、复制
     · 页面源码里一个字都搜不到，SEO 与站内搜索都拿不到站名
     站名是品牌的第一载体，不该靠装饰层实现。既然已经要改模板，
     就用真实节点；`.not-mobile` 是 Gitea 自带的响应式类，
     移动端自动收起，不需要自己写媒体查询。
   -------------------------------------------------------------------------- */
.navbar-left #navbar-logo {
  display: inline-flex;
  align-items: center;
}

.grid-wordmark {
  margin-left: 9px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   3 · 页脚信息条
   由 templates/custom/footer.tmpl 输出。它挂在 Gitea 自带
   <footer class="page-footer"> 的「外面」（官方模板里 {{template "custom/footer" .}}
   的位置在 </footer> 之后、</body> 之前），所以这里要自己补背景与上边框，
   让它和自带页脚条看起来是连续的一条。
   -------------------------------------------------------------------------- */
.grid-footer-strip {
  padding: 14px 16px;
  border-top: 1px solid var(--color-secondary);
  background: var(--color-footer);
  color: var(--color-text-light-2);
  font-size: 12px;
  line-height: 1.9;
}

.grid-footer-strip .grid-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.grid-footer-strip a {
  color: var(--color-text-light-2);
  text-decoration: none;
}

.grid-footer-strip a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.grid-footer-strip .grid-dot {
  color: var(--color-secondary-dark-3);
}


/* --------------------------------------------------------------------------
   4 · 关于页版式（public/assets/about.html）

   这是一张独立页面，不经过 Gitea 的模板管线，所以版式要在这里自己给。

   它同时是全套主题的「活体验证」：页面里引用了 theme-grid-auto.css，
   而该主题内部 @import 同目录的 theme-grid-light/dark.css。打开它是靛蓝配色、
   卡片带边框和圆角，就说明「custom 覆盖内置资源」这条链在你的实例上是通的。
   -------------------------------------------------------------------------- */
body.grid-page {
  margin: 0;
  min-height: 100vh;
  background: var(--color-body);
  color: var(--color-text);
  font-family: var(--fonts-proportional);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.grid-page a { color: var(--color-primary); }

.gp-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- 4.1 顶栏 ---- */
.gp-bar {
  border-bottom: 1px solid var(--color-secondary);
  background: var(--color-nav-bg);
}

.gp-bar .gp-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
}

.gp-bar img { width: 28px; height: 28px; display: block; }

.gp-bar .gp-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.gp-bar .gp-back {
  margin-left: auto;
  font-size: 13px;
  text-decoration: none;
}

/* ---- 4.2 页头 ---- */
.gp-hero {
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--color-secondary);
}

.gp-hero .gp-mark {
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 22px;
}

.gp-hero h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.gp-hero .gp-slogan {
  margin: 0;
  font-size: 16px;
  color: var(--color-primary);
  font-weight: 500;
}

.gp-hero .gp-lead {
  margin: 22px 0 0;
  color: var(--color-text-light-2);
  max-width: 40em;
}

.gp-hero .gp-meta {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--color-text-light-3);
}

/* ---- 4.3 目录 ---- */
.gp-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 4px;
}

.gp-toc a {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--color-text-light-2);
  transition: border-color .15s ease, color .15s ease;
}

.gp-toc a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---- 4.4 正文章节 ---- */
.gp-sec {
  padding: 34px 0;
  border-bottom: 1px solid var(--color-secondary);
  scroll-margin-top: 16px;
}

.gp-sec:last-of-type { border-bottom: none; }

.gp-sec > h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* 章节序号：用主色小方块，纯装饰，不进无障碍树 */
.gp-sec > h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 15px;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--color-primary);
  vertical-align: -1px;
}

.gp-sec h3 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.gp-sec p { margin: 0 0 12px; color: var(--color-text-light-2); }
.gp-sec p:last-child { margin-bottom: 0; }
.gp-sec strong { color: var(--color-text); font-weight: 600; }

.gp-sec ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--color-text-light-2);
}

.gp-sec li { margin: 5px 0; }

.gp-sec code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-markup-code-inline);
  font-family: var(--fonts-monospace);
  font-size: 13px;
  color: var(--color-text);
}

/* 需要被看见的提醒（例如「别把本站当唯一副本」） */
.gp-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 6px 6px 0;
  background: var(--color-primary-alpha-10);
  color: var(--color-text-light-2);
  font-size: 14px;
}

/* ---- 4.5 能力卡片 ---- */
.gp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.gp-card {
  padding: 16px 18px;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  background: var(--color-box-body);
}

.gp-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.gp-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-light-2);
}

/* ---- 4.6 页脚 ---- */
.gp-foot {
  border-top: 1px solid var(--color-secondary);
  background: var(--color-footer);
  padding: 18px 0;
  margin-top: 20px;
}

.gp-foot .gp-wrap {
  font-size: 12px;
  color: var(--color-text-light-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: center;
  text-align: center;
}

.gp-foot a { color: var(--color-text-light-2); text-decoration: none; }
.gp-foot a:hover { color: var(--color-primary); text-decoration: underline; }


/* --------------------------------------------------------------------------
   5 · 登录页品牌区
   由 templates/user/auth/signin.tmpl 输出，位置在登录表单上方。
   这是未登录访客「必经」的一页——收藏夹、分享链接、强制登录跳转，
   最终都会落到这里。所以它承担的是门面的职责，而不是一个表单容器。

   样式刻意做得克制：只放 logo、站名、标语三行，不加背景图、不加动效。
   登录页的第一目标是让人快速完成登录，任何分心的元素都是成本。
   -------------------------------------------------------------------------- */
.grid-signin-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
  text-align: center;
}

.grid-signin-brand img {
  width: 56px;
  height: 56px;
  display: block;
}

.grid-signin-brand .grid-signin-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.grid-signin-brand .grid-signin-slogan {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}


/* --------------------------------------------------------------------------
   6 · 首页版式
   由 templates/home.tmpl 输出。整块版式在这里实现，模板里只留结构。

   版式参考 GitHub / Gitee 那类代码托管站的门面：居中 hero + 大搜索框，
   下面接「最近更新」的仓库卡片流，再是产品主张卡，最后一条行动带。

   为什么要自己写一整套，而不是复用 Gitea 的类：
   内置首页用的是 Semantic UI 的 `ui stackable middle very relaxed page grid`
   ＋ `eight wide center column` —— 那是老一代栅格，间距靠一堆修饰类堆出来。
   而 Gitea 正在往 Tailwind 迁（同一个模板里已经出现 tw-* 工具类），这种
   混用状态下的 Semantic 栅格随时可能变。自己用 CSS Grid 写一层，类名清楚、
   不依赖上游，反而更稳。

   三条纪律：
   · 全部类名带 `grid-home-` 前缀，不复用通用类名（`.hero` / `.bar` /
     `.card` …）。通用类带全局副作用：曾经用 `.bar` 做强度条，撞上页面原有
     筛选条的 backdrop-filter: blur，整块文字被虚化，排查了很久。
   · 颜色一律走主题变量，不写死色值。亮色/深色因此自动生效 ——
     深色下 `--color-primary-contrast` 会变成深色，主按钮自动变成浅底深字。
   · hero **不做全幅出血**。`role="main"` 的第一个子元素会被
     `.page-content > :first-child:not(.secondary-nav)` 加上 margin-top，
     想把 hero 提成第一个子元素就得用 !important 去压它。不值得，
     改成在 .grid-home 容器内用一层淡主色径向光晕，边缘自然淡出，没有接缝。
   -------------------------------------------------------------------------- */

.grid-home {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* hidden 属性必须能压住后续可能加的 display 声明。
   仓库区块默认 hidden，脚本拿到数据才显示；漏了这条会「空标题一直挂着」。 */
.grid-home [hidden] {
  display: none !important;
}

/* ---- 6.1 品牌 hero ---- */
.grid-home-hero {
  padding: 44px 0 46px;
  text-align: center;
  /* 顶部一团淡主色光晕，代替背景图：有层次感，又不需要额外资源 */
  background-image: radial-gradient(58% 100% at 50% 0%,
    var(--color-primary-alpha-10) 0%, transparent 72%);
}

.grid-home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 26px;
  padding: 5px 14px 5px 11px;
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  background: var(--color-box-body);
  font-size: 12.5px;
  color: var(--color-text-light-2);
}

.grid-home-eyebrow svg {
  width: 14px;
  height: 14px;
  fill: var(--color-primary);
}

.grid-home-logo {
  width: 84px;
  height: 84px;
  display: block;
  margin: 0 auto 20px;
  filter: drop-shadow(0 10px 26px var(--color-primary-alpha-20));
}

.grid-home-title {
  margin: 0;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.grid-home-slogan {
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.grid-home-lead {
  max-width: 38em;
  margin: 16px auto 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--color-text-light-2);
}

/* ---- 6.2 大搜索框 ----
   Gitee 式的入口：一个 GET 表单直接提交到 /explore/repos?q=，
   不需要任何脚本就能用。焦点态画在外层容器上（:focus-within），
   输入框自身的边框/阴影全部清零，避免出现「双框」。 */
.grid-home .grid-home-search {
  display: flex;
  align-items: stretch;
  max-width: 620px;
  margin: 34px auto 0;
  border: 1px solid var(--color-input-border);
  border-radius: 10px;
  background: var(--color-input-background);
  box-shadow: 0 1px 2px var(--color-shadow);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.grid-home .grid-home-search:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}

.grid-home-search-icon {
  display: flex;
  align-items: center;
  padding-left: 15px;
  color: var(--color-text-light-3);
}

.grid-home-search-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.grid-home .grid-home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;              /* 焦点态由容器的 :focus-within 表达 */
  font-size: 15px;
  color: var(--color-text);
}

.grid-home .grid-home-search-input:focus {
  border: 0;
  box-shadow: none;
}

.grid-home-search-input::placeholder {
  color: var(--color-text-light-3);
}

.grid-home .grid-home-search-btn {
  flex: 0 0 auto;
  margin: 6px;
  padding: 0 22px;
  border: 1px solid var(--color-primary);
  border-radius: 7px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.grid-home .grid-home-search-btn:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.grid-home-quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 13.5px;
}

.grid-home-quick a {
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  color: var(--color-text-light-2);
  text-decoration: none;
}

.grid-home-quick a:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---- 6.3 分区外壳 ---- */
.grid-home-sec {
  margin-top: 52px;
}

.grid-home-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-secondary);
}

.grid-home-sec-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}

.grid-home-sec-more {
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.grid-home-sec-more:hover {
  text-decoration: underline;
}

/* ---- 6.4 仓库卡片流 ----
   结构与 Gitea 的 explore 列表不同：这里刻意做成等宽卡片网格，
   一屏能看到更多仓库，也更接近 GitHub 的 dashboard 观感。 */
.grid-home-repo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid-home-repo {
  display: flex;
  flex-direction: column;
  min-height: 118px;
  padding: 16px 18px;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  background: var(--color-box-body);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.grid-home-repo:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px var(--color-shadow);
  transform: translateY(-2px);
}

.grid-home-repo-name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
}

.grid-home-repo-name:hover {
  text-decoration: underline;
}

.grid-home-repo-desc {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text-light-2);
}

.grid-home-repo-desc-empty {
  font-style: italic;
  color: var(--color-text-light-3);
}

.grid-home-repo-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-light-3);
}

/* 语言点与语言名必须同组：meta 是 flex + gap，拆开会把点与名字拉开 */
.grid-home-repo-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.grid-home-repo-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* 具体色值由脚本按语言写入 style，这里只兜底 */
  background: var(--color-text-light-3);
}

/* ---- 6.5 四张主张卡 ---- */
.grid-home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 16px;
}

.grid-home-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  background: var(--color-box-body);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.grid-home-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px var(--color-shadow);
  transform: translateY(-2px);
}

.grid-home-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 9px;
  background: var(--color-primary-alpha-10);
  color: var(--color-primary);
}

/* 图标由 {{svg "octicon-*"}} 输出，默认是 16px 且靠 fill 上色 */
.grid-home-card-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.grid-home-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
}

.grid-home-card-en {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light-3);
}

.grid-home-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-light-2);
}

/* ---- 6.6 底部行动带 ---- */
.grid-home-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 52px;
  padding: 26px 30px;
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  background-color: var(--color-box-body);
  background-image: linear-gradient(120deg,
    var(--color-primary-alpha-10), transparent 68%);
}

.grid-home-band h2 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 600;
  color: var(--color-text);
}

.grid-home-band p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light-2);
}

.grid-home-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---- 6.7 按钮 ----
   这里要用 !important 压住 Gitea 的全局链接色（`a { color: var(--color-primary) }`
   以及 .page-content 下的更具体规则）。按钮的底色与文字色是一对，只改一半
   就会出现「主色底 + 主色字」这种看不见文字的情况。 */
.grid-home-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  border: 1px solid var(--color-secondary);
  border-radius: 8px;
  background: var(--color-button);
  color: var(--color-text) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.grid-home-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

.grid-home-btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast) !important;
}

.grid-home-btn-primary:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast) !important;
}

@media (max-width: 720px) {
  .grid-home { padding: 0 16px 56px; }
  .grid-home-hero { padding: 32px 0 34px; }
  .grid-home-eyebrow { margin-bottom: 20px; }
  .grid-home-logo { width: 68px; height: 68px; margin-bottom: 16px; }
  .grid-home-title { font-size: 30px; }
  .grid-home-slogan { font-size: 16px; }
  .grid-home-search { max-width: none; }
  .grid-home-search-btn { padding: 0 16px; }
  .grid-home-sec { margin-top: 42px; }
  .grid-home-repo-list { grid-template-columns: 1fr; }
  .grid-home-band { padding: 22px 20px; }
  .grid-home-btn { flex: 1 1 auto; justify-content: center; }
}


/* --------------------------------------------------------------------------
   7 · 贡献热力图（user/heatmap）
   --------------------------------------------------------------------------
   这块 UI 不是模板渲染出来的静态结构，而是前端组件 ActivityHeatmap.vue
   现画的 SVG：每个格子是一个 rect 元素，class 固定为 heatmap-day，
   颜色**不走 CSS 类**，而是 JS 写内联 style="fill: var(--color-xxx)"。

   这一个事实决定了能做什么、不能做什么：

     · 改不了「按等级分别设色」。JS 只写 class 和一段内联 fill，没有
       data-level 之类的钩子，CSS 选不中第 N 档。要调色阶只能改主题变量
       （--color-primary-light-4 / -light-2 / --color-primary / -dark-2），
       那是主题文件的职责，不是这里。
     · 能改的是形状与排版：圆角、光标、轴标签、图例、页脚。
     · 这里**不要**去写 fill。内联样式只压得过同优先级的普通声明，
       写了不仅没用，还会跟内联样式互相打架，很难查。

   ⚠️ 开头那段变量兜底是有来历的，别删：
     官方主题把「空格子颜色」--color-secondary-alpha-60 放在**基线变量表**里。
     基线一旦整段缺失（真实事故：主题靠 @import 引官方文件，@import 取不到会
     被浏览器**静默跳过**，不报错），这个变量就没人定义 → 内联的 var() 解析
     失败 → SVG 的 fill 退回初始值 black → 整张热力图变成黑底。
     所以这里在热力图子树里重新定义一次，并且**只用品牌块里一定存在的变量
     派生**（--color-primary 属于品牌覆写块，基线缺失时它仍然在）。
     这样最坏情况只是配色不同，不会再退化成一片黑。
     顺带把空格子从上游的中性灰换成极淡的品牌色，和导航栏那一层淡紫更统一。
   -------------------------------------------------------------------------- */
#user-heatmap {
  --color-secondary-alpha-60: #d0d7de99;
  --color-secondary-alpha-60: color-mix(in srgb, var(--color-primary) 14%, transparent);

  padding: 4px 0 2px;
}

/* 圆角格子 —— 现代托管站的惯例（GitHub 用的就是圆角方块）。
   rx / ry 在 SVG2 里是合法的 CSS 属性，主流浏览器都认；
   老浏览器忽略这两条，退回直角，不影响可用性。 */
#user-heatmap .heatmap-day {
  rx: 2.5px;
  ry: 2.5px;
  /* 上游给每一格都绑了点击（按日期筛选下方订阅流），却没给光标，
     用户完全看不出这玩意儿能点。 */
  cursor: pointer;
}

/* 悬停描边换成品牌色。上游用的是 --color-text，深色主题下和背景糊成一片。 */
#user-heatmap .heatmap-day:hover {
  outline: 1.5px solid var(--color-primary);
}

/* 轴标签是 9px 的 text 元素，上游让它跟正文同色，视觉噪音偏大。
   注意上游有一条 `#user-heatmap text { fill: currentcolor !important }`，
   带着 !important，所以这里改用 color 去影响它（currentcolor 跟随 color）。 */
#user-heatmap .heatmap-month-label,
#user-heatmap .heatmap-day-label {
  color: var(--color-text);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

/* 页脚：左边是「一年内 N 次贡献」，右边是图例 */
#user-heatmap .heatmap-footer {
  margin-top: 10px;
  color: var(--color-text);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* 图例小块跟格子保持同一套观感 */
#user-heatmap .heatmap-legend-svg {
  margin-right: -8px;
  overflow: visible;
}

#user-heatmap .heatmap-legend-svg rect {
  rx: 2.5px;
  ry: 2.5px;
}