/* Insight Page Styles - 直读阅读器布局：左侧文集目录 + 文章正文（平板/移动端文集目录降级为顶部横向滚动）
   文章分为三块同色独立背景容器：头部（标题+作者+目录）/ 正文 / 底部引用说明，外层文章容器不填充背景
   配色与 index 首页深色主题一致：深墨绿底 #17201D + 米白文字 #F4F1EA，本地变量取值与 index.css :root 对齐 */

/* ==================== 页面级主题变量（与 index.css 对齐） ==================== */
:root {
    --bg-color: #000000;                         /* 页面背景：与全站活动页面统一的纯黑 */
    --insight-nav-width: 280px;                  /* 桌面端左侧目录宽度 */
    /* 文字配色：米白降档分档，降低正文对比度提升长文可读性（参照 meta 作者栏/引用说明块的文字亮度设置） */
    --text-color: rgba(244, 241, 234, 0.82);    /* 正文主文字：柔和米白 */
    --text-strong: rgba(244, 241, 234, 0.95);   /* 标题/强调：接近 index 正文标题的95%亮度 */
    --text-light: rgba(244, 241, 234, 0.62);    /* 次要文字：作者栏/引用说明同档亮度 */
    --text-hover: #FFFFFF;                       /* 悬停/选中文字 */
    --border-color: rgba(244, 241, 234, 0.16);   /* 分隔线（index --line-on-dark） */
    --line-strong: rgba(244, 241, 234, 0.28);    /* 导航栏下方贯通分隔线：提高一档确保可见 */
    --bg-block: rgba(244, 241, 234, 0.10);       /* 三块背景容器共用此档（并列不嵌套，无叠加变深问题） */
    --card-pad-x: calc(clamp(1.25rem, 3vw, 3rem) + 8px);  /* 容器横向内边距：三块统一，保证文字栏左右对齐 */
    /* 目录项状态背景：基于米白色的半透明分档 */
    --toc-hover-bg: rgba(244, 241, 234, 0.06);         /* 悬停 */
    --toc-active-bg: rgba(244, 241, 234, 0.10);        /* 当前文章 */
    --toc-active-hover-bg: rgba(244, 241, 234, 0.16);  /* 当前文章上的悬停 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* 覆盖 layout.css 的 .page-wrapper 白色背景，与深色主题一致 */
.page-wrapper {
    background-color: var(--bg-color);
}

body {
    width: 100%;
    min-height: 100vh;
    background: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100vw;
}

/* ==================== 加载指示器（深色底 + 米白文字） ==================== */
.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-indicator.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(244, 241, 234, 0.16);
    border-top-color: rgba(244, 241, 234, 0.68);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 20px;
    color: var(--text-light);
    font-family: var(--font-family);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-base);
}

/* ====================
   顶部导航容器：不透明底色与页面背景一致，悬浮最上层，
   滚动时文章内容滑入其下被遮蔽（非叠加显示）；
   底缘通过 ::after 绘制贯通横向分隔线；
   阅读类页面禁用 topbar.js 的滚动消隐，导航栏与分隔线始终固定在屏幕上
   ==================== */
.topbar-container {
    background: var(--bg-color);
    /* topbar.css 默认为 pointer-events:none 悬浮穿透，改为不透明遮蔽层后恢复自身点击 */
    pointer-events: auto;
}

.topbar-container--hidden {
    opacity: 1;
    visibility: visible;
}

.topbar-container::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 1px;
    background: var(--line-strong);
    pointer-events: none;
}

/* ====================
   左侧文集目录（桌面端 ≥1024px）：列出全部文章用于切换阅读
   固定在左侧、topbar 下方，超出高度时原生纵向滚动
   ==================== */
.insight-nav {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: var(--insight-nav-width);
    z-index: 9000;
    overflow-y: auto;
    padding: 1.5rem 1rem 2rem;
    background: var(--bg-color);
}

.insight-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insight-nav__item + .insight-nav__item {
    margin-top: 0.25rem;
}

.insight-nav__link {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 5px;
    color: var(--text-color);
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    transition: var(--transition);
}

.insight-nav__link:hover {
    color: var(--text-hover);
    background: var(--toc-hover-bg);
}

.insight-nav__num {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-light);
}

.insight-nav__item--active .insight-nav__link {
    color: var(--text-hover);
    background: var(--toc-active-bg);
    font-weight: var(--font-weight-medium);
}

/* 当前文章项再悬停时加深一档，避免悬停反馈被上一条规则同色吞掉 */
.insight-nav__item--active .insight-nav__link:hover {
    background: var(--toc-active-hover-bg);
}

.insight-nav__item--active .insight-nav__num {
    color: var(--text-hover);
}

/* ====================
   文章正文容器（外层仅做宽度与位置约束，不再整体填充背景）
   宽屏：目录固定 280px，文章容器占满剩余宽度并左右预留间隔，不与目录重叠；
   内部分三块上下并列、同色独立背景容器（由 js/article-blocks.js 拆分）：
   .article-head（标题+作者+文内目录）/ .article-main（正文各章节）/ .article-references（引用说明）
   ==================== */
.article-content {
    max-width: calc(100vw - var(--insight-nav-width) - 8rem);
    margin: 2.5rem 4rem 4rem calc(var(--insight-nav-width) + 4rem);
    /* 为固定定位的 topbar 与横向分隔线留出顶部空间 */
    margin-top: calc(2.5rem + 60px);
}

.article-head,
.article-main,
.article-references {
    background: var(--bg-block);
    border-radius: 5px;
    padding: clamp(2rem, 4vw, 3.5rem) var(--card-pad-x);
}

/* 正文与引用说明各自成块，块间拉开固定间隔 */
.article-main,
.article-references {
    margin-top: 1.5rem;
}

/* 引用说明内容较短，纵向留白比正文卡片收一档 */
.article-references {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* 卡片内首行元素重置顶部外边距，避免与容器内边距叠加 */
.article-content .article-head > :first-child,
.article-content .article-main > :first-child > h2:first-child,
.article-content .article-references > h2 {
    margin-top: 0;
}

/* ====================
   文章排版（与 insights/article.css 同款规则，颜色引用全局变量）
   ==================== */
.article-content h1 {
    font-size: 2.0rem;
    margin-bottom: 0.5rem;
    color: var(--text-strong);
}

.article-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.3rem;
    color: var(--text-strong);
}

.article-content p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.article-content a {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-content a:hover {
    color: var(--text-hover);
}

.article-content .meta {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

/* ====================
   文内章节目录（注入自文章 HTML，位于头部卡片内：作者信息之下、正文引言之前）
   与标题、作者同属 .article-head 一块背景，自身不再做内嵌面板填充，
   仅用一条分隔线与上方作者信息区分；
   与 insights/article.css 的 .article-toc-inline 保持同款规则
   ==================== */
.article-content .article-toc-inline {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.article-content .article-toc-inline h2 {
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 2px;
    margin-top: 0;
    margin-bottom: 0.8rem;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--text-light);
}

.article-content .article-toc-inline ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.article-content .article-toc-inline li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
}

.article-content .article-toc-inline li:last-child {
    margin-bottom: 0;
}

.article-content .article-toc-inline a {
    color: var(--text-color);
    text-decoration: none;
}

.article-content .article-toc-inline a:hover {
    color: var(--text-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 引用说明已独立成背景容器，列表自身不再二次填充 */
.article-content .reference-list {
    background: none;
    padding: 0;
    list-style-position: outside;
}

.article-content .reference-list li {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.article-content cite {
    font-style: italic;
}

/* 章节锚点定位时避开固定 topbar（60px）与其底缘分隔线 */
.article-content section[id] {
    scroll-margin-top: 76px;
}

/* 正文切换时的轻量加载/错误提示 */
.article-loading,
.article-error {
    padding: 4rem 0;
    text-align: center;
    color: var(--text-light);
    font-size: var(--font-size-medium);
}

.article-error a {
    color: var(--text-hover);
}

/* ==================== 响应式断点（桌面 → 平板 → 移动 → 小屏） ==================== */

/* 平板端 (768px-1023px)：目录降级为 topbar 下方横向滚动条，加大各区块间隔使布局更松散 */
@media (min-width: 768px) and (max-width: 1023px) {
    .insight-nav {
        position: static;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 1.5rem var(--page-padding-mobile);
        margin-top: 60px;
    }

    .insight-nav__list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        /* 隐藏横向滑动条，靠手势左右滑动切换 */
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* 旧版 Edge / IE */
    }

    .insight-nav__list::-webkit-scrollbar {
        display: none;               /* Chrome / Safari */
        width: 0;
        height: 0;
    }

    .insight-nav__item {
        position: relative;
        flex-shrink: 0;
    }

    .insight-nav__item + .insight-nav__item {
        margin-top: 0;
    }

    /* 标题之间用竖向分割线分隔 */
    .insight-nav__item + .insight-nav__item::before {
        content: '';
        position: absolute;
        left: -0.25rem;   /* 居中于列表 0.5rem 的 gap 中 */
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1.1em;
        background: var(--border-color);
    }

    .insight-nav__link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 5px;
    }

    .insight-nav__num {
        display: none;
    }

    .article-content {
        max-width: 900px;
        margin: 2.5rem var(--page-padding-mobile) 3rem;
        /* 静态横向目录已占据顶部空间，重置固定避让留白 */
        margin-top: 2.5rem;
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 2rem 1.75rem;
    }

    .article-content h1 {
        font-size: 1.6rem;
    }

    .article-content h2 {
        font-size: 1.3rem;
    }

    .article-content p {
        font-size: 1rem;
    }
}

/* 移动端 (≤767px)：覆盖 style.css 的激进缩小，目录/正文间隔进一步拉开 */
@media (max-width: 767px) {
    .insight-nav {
        position: static;
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 1.25rem var(--page-padding-mobile);
        margin-top: 50px;
    }

    .insight-nav__list {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .insight-nav__list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .insight-nav__item {
        position: relative;
        flex-shrink: 0;
    }

    .insight-nav__item + .insight-nav__item {
        margin-top: 0;
    }

    .insight-nav__item + .insight-nav__item::before {
        content: '';
        position: absolute;
        left: -0.25rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1.1em;
        background: var(--border-color);
    }

    .insight-nav__link {
        white-space: nowrap;
        padding: 0.4rem 0.75rem;
        border: none;
        border-radius: 5px;
        font-size: 0.85rem;
    }

    .insight-nav__num {
        display: none;
    }

    .article-content {
        max-width: none;
        margin: 2rem var(--page-padding-mobile) 2.5rem;
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 1.75rem 1.25rem;
        border-radius: 5px;
    }

    .article-content h1 {
        font-size: 1.4rem;
    }

    .article-content h2 {
        font-size: 1.2rem;
        margin-top: 2rem;
    }

    .article-content p {
        font-size: 1rem;
        line-height: 1.75;
    }

    .article-content .meta {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    /* 移动端 topbar 高度降为 50px，锚点避让同步下调 */
    .article-content section[id] {
        scroll-margin-top: 66px;
    }

    /* 移动端收紧目录与作者信息的间隔（相邻外边距会折叠，需同步收 .meta 的底部外边距） */
    .article-content .article-toc-inline {
        padding-top: 1.25rem;
    }

    .article-content .reference-list li {
        font-size: 0.85rem;
    }
}

/* 小屏幕 (≤480px) */
@media (max-width: 480px) {
    .article-content {
        margin: 1.5rem var(--page-padding-small) 2rem;
    }

    .article-head,
    .article-main,
    .article-references {
        padding: 1.5rem 1rem;
    }

    .article-content h1 {
        font-size: 1.25rem;
    }

    .article-content h2 {
        font-size: 1.1rem;
    }

    .article-content p {
        font-size: 0.95rem;
    }
}