/* ============================================================
   吃土皮皮虎 · 液态玻璃材质层（Liquid Glass）
   引入位置：base.css 之后、pages.css 之前
   ------------------------------------------------------------
   设计原则（性能红线，勿突破）：
   1. 玻璃 = 模糊「背后已有的东西」。所以必须先有氛围底层（第 0 层），
      否则背后是纯色，模糊无意义。
   2. 全站 backdrop-filter 数量必须受控。按视口分层：
      - 常驻视口内（header、侧栏 sticky、首屏）→ 真玻璃
      - 滚动才看到的列表卡片 → 半透明实色，不开 backdrop
      否则几十层毛玻璃会拖垮滚动。
   3. 必带 @supports 降级：不支持时回落实色，
      否则半透明卡片会「透出」正文，可读性直接崩。
   ============================================================ */

/* ------------------------------------------------------------
   第 0 层：氛围底层
   给全站提供可被玻璃折射的内容。
   原实现只覆盖首屏 hero（.hero::before 内的 radial-gradient），
   且在 900px 以下被 display:none —— 这里提升为全站常驻。
   ------------------------------------------------------------ */
body {
  background-image:
    radial-gradient(1100px 560px at 12% -8%, var(--accent-soft), transparent 62%),
    radial-gradient(760px 420px at 94% 4%, rgba(150, 190, 240, 0.07), transparent 60%),
    radial-gradient(700px 520px at 58% 104%, rgba(255, 186, 150, 0.07), transparent 64%);
  background-repeat: no-repeat;
  background-size: cover;
}
html[data-theme='dark'] body {
  background-image:
    radial-gradient(1100px 560px at 12% -8%, rgba(255, 107, 61, 0.15), transparent 62%),
    radial-gradient(760px 420px at 94% 4%, rgba(150, 190, 240, 0.07), transparent 60%),
    radial-gradient(700px 520px at 58% 104%, rgba(120, 214, 186, 0.07), transparent 64%);
}

/* hero 原有的局部光晕保留，但它现在与全站氛围层叠加。
   降低不透明度，避免首屏右侧出现明显的「橙 / 白」硬分界。 */
.hero::before {
  opacity: 0.55;
}

/* ------------------------------------------------------------
   第 1 层：玻璃材质基类
   ------------------------------------------------------------ */
.glass {
  position: relative;
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  box-shadow:
    /* 上边缘镜面高光：玻璃感的关键 */
    inset 0 1px 0 color-mix(in srgb, #fff 52%, transparent),
    0 8px 24px rgba(18, 20, 24, 0.08);
}
html[data-theme='dark'] .glass {
  background: color-mix(in srgb, var(--bg-elevated) 66%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.40);
}

/* ------------------------------------------------------------
   第 2 层：真正开启毛玻璃的部件（数量刻意控制）
   ------------------------------------------------------------ */
.glass-blur {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ------------------------------------------------------------
   第 3 层：交互光泽（区分度来源）
   ------------------------------------------------------------ */
.glass {
  overflow: hidden;
}
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  background: radial-gradient(
    190px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.30),
    transparent 62%
  );
}
.glass:hover::after {
  opacity: 1;
}
html[data-theme='dark'] .glass::after {
  background: radial-gradient(
    190px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.13),
    transparent 62%
  );
}

/* 指针光晕层：挂在实际组件上（不必每个都加 .glass 类）。
   pointer 光标位置由 site.js 通过 --mx / --my 注入。 */
.side-card,
.hero-stat,
.about-card,
.search-panel,
.note-card,
.cat-card,
.hm-card,
.video-card {
  position: relative;
}
.side-card::after,
.hero-stat::after,
.about-card::after,
.search-panel::after,
.note-card::after,
.cat-card::after,
.hm-card::after,
.video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  background: radial-gradient(
    190px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.26),
    transparent 62%
  );
}
.side-card:hover::after,
.hero-stat:hover::after,
.about-card:hover::after,
.search-panel:hover::after,
.note-card:hover::after,
.cat-card:hover::after,
.hm-card:hover::after,
.video-card:hover::after {
  opacity: 1;
}
html[data-theme='dark'] .side-card::after,
html[data-theme='dark'] .hero-stat::after,
html[data-theme='dark'] .about-card::after,
html[data-theme='dark'] .search-panel::after,
html[data-theme='dark'] .note-card::after,
html[data-theme='dark'] .cat-card::after,
html[data-theme='dark'] .hm-card::after,
html[data-theme='dark'] .video-card::after {
  background: radial-gradient(
    190px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.12),
    transparent 62%
  );
}

/* ------------------------------------------------------------
   组件落地
   ------------------------------------------------------------ */

/* 顶栏升级：模糊加强 + 内高光 + 底部发丝线 */
.header {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg-elevated) 76%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border) 70%, transparent);
}

/* 侧栏卡片：sticky 常驻视口内，值得用真玻璃 */
.sidebar .side-card {
  background: color-mix(in srgb, var(--bg-elevated) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 44%, transparent),
    0 6px 20px rgba(18, 20, 24, 0.07);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
}
html[data-theme='dark'] .sidebar .side-card {
  background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.38);
}

/* 首屏统计卡：原本完全无背景无边框，是首屏最「空」的地方。
   注意：原站 .hero-stat 是 text-align:right（无卡片裸排版时代的遗留），
   玻璃化后变成卡片，必须显式改回居中，否则数字仍偏右。
   同时用 flex 纵向居中，宽度由 flex:1 均分，避免四张卡
   因内容长度不同而参差不齐（实测曾为 70/56/56/96px）。 */
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
  background: color-mix(in srgb, var(--bg-elevated) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius);
  padding: 12px 10px;
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.hero-stat b {
  display: block;
  line-height: 1.2;
}
.hero-stat span {
  display: block;
  white-space: nowrap;
}
html[data-theme='dark'] .hero-stat {
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 容器：让四张卡在可用宽度内均分，不再被内容长度带偏。
   hero 内层是 display:flex 的两栏（左文案 / 右统计），
   统计组本身不撑满，故设 flex:1 让卡片有均分依据。 */
.hero-stats {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 900px) {
  .hero-stats {
    gap: 10px;
  }
}

/* 关于本站卡片（移动端截图里的大白块） */
.about-card,
.search-panel {
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

/* 标签云胶囊：半透即可，不开 backdrop（数量多，会拖滚动） */
.tag-cloud a {
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tag-cloud a:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-1px);
}

/* 文章列表项：不卡片化（保留分隔线的文档流观感），
   但 hover 时浮起一层淡玻璃，作为「液态」的落点。 */
.article-item {
  position: relative;
  transition: background 0.24s var(--ease), box-shadow 0.24s var(--ease),
    border-radius 0.24s var(--ease), transform 0.24s var(--ease);
}
.article-item:hover {
  background: color-mix(in srgb, var(--bg-elevated) 62%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(18, 20, 24, 0.06);
  transform: translateY(-1px);
}

/* 笔记卡 / 分类卡：滚动才看到 → 半透明实色，不开 backdrop */
.note-card,
.cat-card,
.hm-card,
.video-card {
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.note-card:hover,
.cat-card:hover,
.hm-card:hover,
.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 20, 24, 0.09);
}
html[data-theme='dark'] .note-card,
html[data-theme='dark'] .cat-card,
html[data-theme='dark'] .hm-card,
html[data-theme='dark'] .video-card {
  background: color-mix(in srgb, var(--bg-elevated) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 悬浮按钮：本来就常驻视口，玻璃化后既是装饰也弱化遮挡感 */
.to-top,
.share-float,
.music-float,
.edit-float {
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 46%, transparent),
    0 6px 18px rgba(18, 20, 24, 0.10);
}
html[data-theme='dark'] .to-top,
html[data-theme='dark'] .share-float,
html[data-theme='dark'] .music-float,
html[data-theme='dark'] .edit-float {
  background: color-mix(in srgb, var(--bg-elevated) 64%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 6px 18px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   进场动效
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hero-stat {
    animation: glass-in 0.5s var(--ease) both;
  }
  .sidebar .side-card:nth-child(1) { animation: glass-in 0.5s var(--ease) 0.04s both; }
  .sidebar .side-card:nth-child(2) { animation: glass-in 0.5s var(--ease) 0.08s both; }
  .sidebar .side-card:nth-child(3) { animation: glass-in 0.5s var(--ease) 0.12s both; }
  @keyframes glass-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

/* ------------------------------------------------------------
   降级：不支持 backdrop-filter 时回落实色
   没有这一段，半透明卡片会在老浏览器上直接透出正文。
   ------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .header,
  .sidebar .side-card,
  .hero-stat,
  .about-card,
  .search-panel,
  .to-top,
  .share-float,
  .music-float,
  .edit-float {
    background: var(--bg-elevated) !important;
  }
  .note-card,
  .cat-card,
  .hm-card,
  .video-card,
  .tag-cloud a,
  .article-item:hover {
    background: var(--bg-elevated) !important;
  }
  .glass::after,
  .side-card::after,
  .hero-stat::after,
  .about-card::after,
  .search-panel::after,
  .note-card::after,
  .cat-card::after,
  .hm-card::after,
  .video-card::after {
    display: none;
  }
}

/* ============================================================
   批次 3：可读性与可点性补丁
   ------------------------------------------------------------
   1) 正文字号：原 15px。中文窄屏下偏小，提到 16px；
      并用 clamp() 让字号随视口温和缩放
      （实测站点 clamp() 使用次数为 0，此前完全固定）。
   2) 触达目标：实测桌面/移动端各有 33 个 a/button 尺寸 < 32px
      （.tag 8 个、.hot-link 6 个、.section-more 3 个、.brand 2 个、
      裸 <a> 14 个），最小仅 14px 高。
      仅在移动端提升，桌面端维持原样（鼠标指针精度足够）。
   ============================================================ */

/* 1) 字号 */
@media (max-width: 700px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: clamp(24px, 6.4vw, 32px);
  }
}

/* 2) 触达目标（仅移动端） */
@media (max-width: 900px) {
  .tag,
  .hot-link,
  .section-more,
  .nav-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .section-more {
    padding-left: 8px;
  }
  /* 裸链接（页脚/元信息里的）给足点击区，但不改变文字排版 */
  .footer-col a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  /* 归档页时间线：实测 129 个 .timeline-item 标题链接高仅 23px，
     数量最多、最难点中。宽度已足够，只需补高度。 */
  .timeline-item a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}