/* 拾光·暗室 —— 扩展样式
   说明：主样式 main-*.css 为外部构建产物，不可编辑。
   本文件承载后续新增功能的样式，复用主样式已定义的 CSS 变量，
   保证视觉语言一致，且不会被下一次构建覆盖。
*/

/* ============ 搜索星（星图上的一颗搜索子星） ============
   注意：不可使用 a.star 类名——主 JS 会 querySelectorAll('a.star') 参与星座连线计算。
   这里沿用 .map-audio 同款浮动播钮体系：跟随 star-map 展开而显形。 */
.map-search {
  z-index: 43;
  cursor: pointer;
  background: hsl(var(--surface) / 0.85);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: 40px;
  height: 40px;
  color: hsl(var(--accent-soft));
  box-shadow: 0 0 16px hsl(var(--accent) / 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth), transform 0.55s var(--ease-bounce),
    color 0.3s, box-shadow 0.3s;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
  position: fixed;
  bottom: 26px;
  right: 26px;
  transform: translate(0) scale(0.2);
}
/* 音效钮上移 82px，搜索星再往上一格，三者列成一串旋钮 */
.star-map.open ~ .map-search {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-4px, -140px) scale(1);
}
.star-map.open ~ .map-search:hover {
  color: hsl(var(--accent));
  box-shadow: 0 0 22px hsl(var(--accent) / 0.5);
  transform: translate(-4px, -140px) scale(1.12);
}
body.modal-open .map-search,
body.framed .map-search {
  display: none !important;
}

/* ============ 照片 EXIF 底片参数卡 ============ */
.exif {
  border-top: 1px solid var(--border);
  margin-top: 34px;
  padding-top: 26px;
}
.exif-head {
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: hsl(var(--accent-soft));
  font-size: 12px;
  margin-bottom: 16px;
}
.exif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.exif-item {
  background: hsl(var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.exif-item:hover {
  border-color: hsl(var(--accent) / 0.45);
  box-shadow: 0 10px 30px hsl(var(--accent) / 0.14);
}
.exif-k {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--text-dim));
  font-size: 10px;
  margin-bottom: 5px;
}
.exif-v {
  color: hsl(var(--text));
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ 友链头像 ============ */
.link-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lk-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: hsl(var(--bg-2));
}
/* 站点无 logo 时的占位光斑 */
.lk-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: hsl(var(--accent-soft));
  background: hsl(var(--accent) / 0.12);
  border: 1px solid hsl(var(--accent) / 0.3);
}

/* ============ 瞬间列表内嵌评论区收口 ============ */
.moment-card .comments {
  margin-top: 26px;
  padding-top: 22px;
}

/* ============ 作者页 / 分类总览页 通用头部 ============ */
.author-head,
.cats-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.author-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: hsl(var(--bg-2));
  flex-shrink: 0;
}
.author-name {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
}
.author-bio {
  color: hsl(var(--text-dim));
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
}
/* 作者无头像时的首字占位光斑（沿用主 .author-avatar 尺寸） */
.author-avatar.is-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: hsl(var(--accent-soft));
  background: hsl(var(--accent) / 0.12);
  border: 1px solid hsl(var(--accent) / 0.3);
}

/* ============ 分类总览：树形折叠 ============ */
.cats-tree {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.cat-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: hsl(var(--surface));
  padding: 20px 22px;
}
.cat-block > .cat-name {
  font-size: 20px;
  font-weight: 800;
  color: hsl(var(--accent-soft));
  text-decoration: none;
  transition: color 0.25s;
}
.cat-block > .cat-name:hover {
  color: hsl(var(--accent));
}
.cat-children {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.cat-children a {
  font-size: 13px;
  color: hsl(var(--text-dim));
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  transition: color 0.25s, border-color 0.25s;
}
.cat-children a:hover {
  color: hsl(var(--accent-soft));
  border-color: hsl(var(--accent) / 0.4);
}

/* ============ 文章目录 TOC（暗室风格，右侧固定侧栏） ============ */
.toc-dock {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: hsl(var(--surface) / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  z-index: 40;
  font-size: 0.82rem;
  line-height: 1.7;
  box-shadow: 0 12px 40px hsl(var(--bg) / 0.5);
}
.toc-dock::-webkit-scrollbar { width: 6px; }
.toc-dock::-webkit-scrollbar-thumb {
  background: hsl(var(--accent) / 0.4);
  border-radius: 3px;
}
.toc-head {
  color: hsl(var(--accent));
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid hsl(var(--border));
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item a {
  display: block;
  color: hsl(var(--text-dim));
  text-decoration: none;
  padding: 0.18rem 0.5rem;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-item.lv3 a { padding-left: 1.4rem; }
.toc-item.lv4 a { padding-left: 2.3rem; }
.toc-item a:hover {
  color: hsl(var(--text));
  background: hsl(var(--accent) / 0.12);
}
.toc-item a.active {
  color: hsl(var(--accent));
  border-left-color: hsl(var(--accent));
  background: hsl(var(--accent) / 0.14);
  text-shadow: 0 0 12px hsl(var(--accent) / 0.6);
}
.post-body h2,
.post-body h3,
.post-body h4 { scroll-margin-top: 90px; }
@media (max-width: 1200px) {
  .toc-dock { display: none; }
}

/* ============ 阅读进度条（文章页顶部） ============ */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 999;
  background: linear-gradient(90deg, hsl(var(--accent-deep)), hsl(var(--accent)), hsl(var(--accent-soft)));
  box-shadow: 0 0 12px hsl(var(--accent) / 0.8);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ============ 代码块一键复制 ============ */
pre {
  position: relative;
}
.code-copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: hsl(var(--text-dim));
  background: hsl(var(--surface) / 0.7);
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s;
}
pre:hover .code-copy {
  opacity: 1;
}
.code-copy:hover {
  color: hsl(var(--accent));
  border-color: hsl(var(--accent) / 0.6);
}
.code-copy.copied {
  color: hsl(var(--accent));
  border-color: hsl(var(--accent) / 0.6);
  opacity: 1;
}

/* ============ 标签云（tags 页） ============ */
.filterbar.wrap.tag-cloud {
  justify-content: center;
  gap: 0.7rem;
}
.tag-cloud .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: hsl(var(--surface) / 0.6);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--text));
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  line-height: 1.2;
  transform: none;
  transition: transform 0.2s var(--ease-bounce), border-color 0.2s, color 0.2s,
    box-shadow 0.2s;
}
.tag-cloud .chip:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: hsl(var(--accent) / 0.7);
  color: hsl(var(--accent));
  box-shadow: 0 0 18px hsl(var(--accent) / 0.35);
}

/* ============ 归档时间轴增强（发光线 + 节点） ============ */
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, hsl(var(--accent) / 0.55), hsl(var(--accent) / 0.06));
}
.tl-node::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: hsl(var(--accent));
  box-shadow: 0 0 12px hsl(var(--accent) / 0.9);
  transform: translate(-50%, 0);
}
.tl-node:hover::before {
  box-shadow: 0 0 20px hsl(var(--accent));
}
.tl-node:hover .tl-title {
  color: hsl(var(--accent));
  text-shadow: 0 0 14px hsl(var(--accent) / 0.45);
}

/* ============ 上一篇 / 下一篇（缩略卡） ============ */
.post-nav .pn {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: hsl(var(--surface) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-decoration: none;
  color: hsl(var(--text));
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.post-nav .pn:hover {
  border-color: hsl(var(--accent) / 0.6);
  box-shadow: 0 0 18px hsl(var(--accent) / 0.22);
  transform: translateY(-2px);
}
.post-nav .pn.next {
  flex-direction: row-reverse;
  text-align: right;
}
.pn-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  flex: none;
  background: hsl(var(--bg-2));
  border: 1px solid hsl(var(--border));
}
.pn-txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.pn-txt .lab {
  color: hsl(var(--text-dim));
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.pn-txt .tt {
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============ 评论区（暗室外框，仅 light-DOM 可控） ============
   评论正文在 Shadow DOM 内（由 darkroom-ui.js 注入覆盖样式），
   这里只负责 light-DOM 外壳：面板底纹 + 圆角边框 + 标题。 */
.comments {
  margin-top: 50px;
  padding: 1.6rem 1.8rem 2rem;
  background: hsl(var(--surface) / 0.32);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.comments-head {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 18px;
  color: hsl(var(--text));
}
.comments-head::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: hsl(var(--accent));
  box-shadow: 0 0 10px hsl(var(--accent) / 0.9);
  vertical-align: middle;
}

/* ============ 正文排版补全（暗室体系收口） ============
   主样式只接管了 p / h2 / h3 / blockquote / img / pre / code，
   链接、表格、分隔线、列表、h4~h6 均无规则，正文一旦用到就是
   浏览器默认样式。此处统一收口到暗室体系。 */

/* 正文链接：强调色 + 细下划线，解决与正文同色、不可辨识的问题 */
.post-body a {
  color: hsl(var(--accent-soft));
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--accent) / 0.4);
  transition: color 0.22s var(--ease-smooth),
    border-color 0.22s var(--ease-smooth);
}
.post-body a:hover {
  color: hsl(var(--accent));
  border-bottom-color: hsl(var(--accent));
  text-shadow: 0 0 12px hsl(var(--accent) / 0.5);
}

/* 表格：暗色边框 + 表头底纹，窄屏横向滚动避免挤坏 */
.post-body table {
  width: 100%;
  margin: 22px 0;
  border-collapse: collapse;
  font-size: 15px;
}
.post-body th,
.post-body td {
  padding: 10px 14px;
  border: 1px solid hsl(var(--border));
  text-align: left;
}
.post-body th {
  background: hsl(var(--surface));
  font-weight: 600;
}
.post-body tbody tr:hover {
  background: hsl(var(--surface) / 0.5);
}
@media (max-width: 640px) {
  .post-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* 分隔线：渐隐光带，替代浏览器默认灰线 */
.post-body hr {
  margin: 32px 0;
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--accent) / 0.5),
    transparent
  );
}

/* 列表：统一缩进与行距，标记点染强调色 */
.post-body ul,
.post-body ol {
  margin: 16px 0;
  padding-left: 22px;
}
.post-body li {
  margin: 8px 0;
  line-height: 1.8;
}
.post-body li::marker {
  color: hsl(var(--accent));
}

/* h4~h6：补全字号层级（主样式仅给了 scroll-margin） */
.post-body h4 {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 600;
}
.post-body h5 {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 600;
}
.post-body h6 {
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: hsl(var(--text-dim));
}

/* ============ 星点导航按钮：去除写死基色，跟随主题随机强调色 ============
   原构建产物 .star-map a.star 用 hsl(var(--c,var(--h)) 80% 60% / .55)，
   其中 --c 由 nav.html 服务端写死 265 基色，导致星点颜色固定、不随主题
   随机色相变化。此处覆盖 border-color 为 var(--accent)，跟随全站随机强调色。
   星点文字色与底色沿用暗色体系（--text / --surface），仅描边随强调色呼吸。 */
.star-map a.star {
  border-color: hsl(var(--accent) / 0.55);
}