/* ==========================================================================
   Typlog Browse Page Styles (CSS Isolation Prefix: hl-index-)
   ========================================================================== */

.hl-index-intro {
  margin-bottom: 2em;
  color: inherit;
}

.hl-index-section {
  margin-bottom: 3.5em;
}

.hl-index-title {
  margin-bottom: 1em;
  font-size: 1.5em;
  font-weight: bold;
}

/* 核心主题区 */
.hl-index-topic-group {
  margin-bottom: 1.8em;
}

.hl-index-topic-group-title {
  font-weight: 600;
  margin-bottom: 1em;
  font-size: 1.05em;
  letter-spacing: 0.05em;
  opacity: 0.9;
  padding-bottom: 0.4em;
  border-bottom: 1px dashed rgba(128, 128, 128, 0.25);
}

.hl-index-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 1.2em;
}

/* 隐藏本页头部的日期 (Typlog Page 默认会显示日期) */
.entry-meta {
  display: none !important;
}

/* 标签基础样式 (去下划线，改用微弱背景，适配移动端点击) */
html body .yue a.hl-index-tag,
html body .e-content a.hl-index-tag {
  color: inherit !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
  background-color: rgba(128, 128, 128, 0.06) !important;
  padding: 0.35em 0.7em !important;
  border-radius: 6px !important;
  transition: background-color 0.2s, color 0.2s, transform 0.1s !important;
  display: inline-flex !important;
  align-items: baseline !important;
  line-height: 1.4 !important;
  -webkit-tap-highlight-color: transparent !important; /* 移除移动端原生高亮 */
}

/* Hover/Focus 状态，提供平滑反馈 */
html body .yue a.hl-index-tag:hover,
html body .yue a.hl-index-tag:focus,
html body .e-content a.hl-index-tag:hover,
html body .e-content a.hl-index-tag:focus {
  text-decoration: none !important;
  background-color: rgba(128, 128, 128, 0.12) !important;
  color: var(--primary-color-hex, #DD3C3F) !important;
}

/* 移动端/鼠标按下状态，提供下陷物理反馈，消除 Hover 粘滞感 */
html body .yue a.hl-index-tag:active,
html body .e-content a.hl-index-tag:active {
  background-color: rgba(128, 128, 128, 0.18) !important;
  transform: scale(0.97) !important;
}

.hl-index-tag-count {
  font-size: 0.85em;
  opacity: 0.6;
  margin-left: 0.3em;
  /* 移除等宽字体，使其与正文更和谐 */
}

/* 全部标签区控制条 */
.hl-index-tags-controls {
  display: flex;
  gap: 1.5em;
  margin-bottom: 1.5em;
  align-items: center;
  flex-wrap: wrap;
}

#hl-tags-search {
  padding: 0.5em 0;
  border: none;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.95em;
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* 防止 iOS 输入框默认阴影和圆角 */
  -webkit-appearance: none;
  box-shadow: none;
}

#hl-tags-search:focus {
  outline: none;
  border-bottom-color: var(--primary-color-hex, #DD3C3F);
}

.hl-index-toggle-btn {
  padding: 0.5em 0;
  border: none;
  background: transparent;
  color: var(--primary-color-hex, #DD3C3F);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 500;
  transition: opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.hl-index-toggle-btn:hover,
.hl-index-toggle-btn:focus {
  opacity: 0.7;
}

/* 全部标签容器 */
.hl-index-all-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1em;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.hl-index-collapsed {
  /* 初始折叠状态，由 JS 动态计算或这里给个默认值 */
  max-height: 250px; /* 大约 5-6 行标签的高度 */
  position: relative;
}

/* 折叠时的渐变遮罩 */
.hl-index-collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

.hl-index-loading {
  opacity: 0.7;
  font-size: 0.95em;
}

/* 按年份浏览区域 */
.hl-index-years {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
}

/* 年份胶囊按钮 (模仿系统 /archive/ 样式) */
html body .yue a.hl-index-year-tag,
html body .e-content a.hl-index-year-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.2em 0.8em !important;
  font-size: 0.9em !important;
  border: 1px solid rgba(128, 128, 128, 0.35) !important;
  border-radius: 20px !important;
  color: var(--primary-color-hex, #DD3C3F) !important;
  font-weight: 600 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .yue a.hl-index-year-tag:hover,
html body .e-content a.hl-index-year-tag:hover,
html body .yue a.hl-index-year-tag:focus,
html body .e-content a.hl-index-year-tag:focus {
  background-color: rgba(128, 128, 128, 0.08) !important;
  border-color: rgba(128, 128, 128, 0.6) !important;
  text-decoration: none !important;
}

html body .yue a.hl-index-year-tag:active,
html body .e-content a.hl-index-year-tag:active {
  background-color: rgba(128, 128, 128, 0.12) !important;
  transform: scale(0.97) !important;
}

/* Fallback 旧链接（当 JS 加载失败时显示） */
html body .yue a.hl-index-year-link,
html body .e-content a.hl-index-year-link {
  display: inline-block !important;
  margin-top: 0.5em !important;
  color: var(--primary-color-hex, #DD3C3F) !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
html body .yue a.hl-index-year-link:hover,
html body .e-content a.hl-index-year-link:hover {
  text-decoration: underline !important;
  background-image: none !important;
}

/* 无障碍相关 */
@media (prefers-reduced-motion: reduce) {
  .hl-index-all-tags {
    transition: none;
  }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .hl-index-collapsed::after {
    /* 假设主题深色背景为接近纯黑，可根据 Nezu 实际情况继承或使用自定义变量 */
    background: linear-gradient(to bottom, rgba(30, 30, 30, 0), var(--bg-color, #1a1a1a));
  }
  
  html body .yue a.hl-index-tag,
  html body .e-content a.hl-index-tag {
    background-color: rgba(255, 255, 255, 0.08) !important;
  }
  html body .yue a.hl-index-tag:hover,
  html body .e-content a.hl-index-tag:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
  }
  html body .yue a.hl-index-tag:active,
  html body .e-content a.hl-index-tag:active {
    background-color: rgba(255, 255, 255, 0.16) !important;
  }
}

/* Typlog Nezu 中如果有 .dark-theme 类 */
html.dark-theme .hl-index-collapsed::after {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0), #121212);
}
html.dark-theme body .yue a.hl-index-tag,
html.dark-theme body .e-content a.hl-index-tag {
  background-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-theme body .yue a.hl-index-tag:hover,
html.dark-theme body .e-content a.hl-index-tag:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark-theme body .yue a.hl-index-tag:active,
html.dark-theme body .e-content a.hl-index-tag:active {
  background-color: rgba(255, 255, 255, 0.16) !important;
}