/* ============================================================
   新闻 / 通知详情页（/news/view?id=xxx）
   风格：清爽学术风 —— 与 theme.css / news.css 共用变量，
        无渐变、无大投影、hover 只改颜色不位移
   作用域：所有规则限定在 .nv-page 内，不污染全站
   ============================================================ */

/* ---------------------------------------------------------------- 先解除一个坑 */
/* site.css 里有一条老模板遗留规则：
       .news-view { max-width: 700px; margin: auto; }
   而 views/layouts/main.php 给 <body> 打的类名恰好是「controller-action」，
   详情页正好就是 body.news-view —— 于是整页被压成 700px 宽并居中，
   里面的 .container(1240px) 直接溢出到视口外（实测 scrollWidth 1573 > 1366）。
   这也是原版详情页「正文偏窄、右侧被切」的根因之一。这里显式解除。 */
body.news-view {
    max-width: none;
    margin: 0;
}

.nv-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    align-items: start;
    padding-bottom: 6px;
}

/* 面包屑横跨两列（grid 会把第一个子元素塞进第一列） */
.nv-page > .breadcrumb {
    grid-column: 1 / -1;
    /* theme.css 的分隔符用 --line(#E4E7E4)，在白底上几乎看不见，压深一档 */
    color: var(--muted, #8A9490);
}

.nv-page > .breadcrumb > li + li::before {
    color: var(--muted, #8A9490);
}

/* ---------------------------------------------------------------- 正文卡片 */
.nv-main {
    min-width: 0;
}

.nv-article {
    padding: 30px 34px 26px;
    background: var(--paper, #FFF);
    border: 1px solid var(--line, #E4E7E4);
    border-radius: 4px;
}

/* 分类标签：新闻 = 品牌青，通知 = 琥珀（与列表页色点、区块竖条同一套色彩编码） */
.nv-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--brand, #0F5C6B);
    background: var(--brand-soft, #EAF1F0);
    border-radius: 2px;
}

.nv-cat .nv-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.nv-cat-notice {
    color: #8C6420;
    background: #FAF4E9;
}

/* 侧栏「本文信息」里的小标签：去掉底色，只留文字与色点 */
.nv-cat.is-plain {
    padding: 0;
    background: transparent;
    font-size: 12.5px;
}

.nv-title {
    margin: 10px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    color: var(--ink, #16202A);
    /* 长标题（含英文/编号）允许在任意位置折行，避免撑破卡片 */
    word-break: break-word;
}

.nv-head {
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

/* meta 行：日期 · 发布者 · 浏览 · 评论，全部带图标——
   原来这一行只有裸数字（浏览量、评论数各一个数字），看不出是什么 */
.nv-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-size: 12px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

.nv-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nv-meta-link {
    color: var(--muted, #8A9490);
    text-decoration: none;
    transition: color .16s ease;
}

.nv-meta-link:hover,
.nv-meta-link:focus {
    color: var(--brand, #0F5C6B);
    text-decoration: none;
}

.nv-meta-sep {
    color: #D7DCD8;
}

.nv-ico {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: var(--ink-3, #5C6A66);
}

.nv-meta-link:hover .nv-ico {
    color: var(--brand, #0F5C6B);
}

/* ------------------------------------------------------- 正文排版（.nv-md） */
/* 老模板的 .markdown 样式挂在 layout/style.css 里，本页已不再引入，
   所以正文排版（标题/段落/图片/表格/代码/引用）必须由这里自带一套。 */
.nv-md {
    font-size: 15px;
    line-height: 1.9;
    color: var(--ink-2, #3D4A52);
    /* 长链接、超长英文串不撑破卡片 */
    overflow-wrap: break-word;
}

.nv-md > :first-child {
    margin-top: 0;
}

.nv-md > :last-child {
    margin-bottom: 0;
}

.nv-md p {
    margin: 0 0 1.05em;
    text-align: justify;
}

.nv-md h1,
.nv-md h2,
.nv-md h3,
.nv-md h4 {
    margin: 1.7em 0 .65em;
    padding-bottom: .3em;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ink, #16202A);
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

.nv-md h1 {
    font-size: 19px;
}

.nv-md h2 {
    font-size: 17px;
}

.nv-md h3 {
    font-size: 15.5px;
    padding-bottom: .25em;
}

.nv-md h4 {
    font-size: 15px;
    border-bottom: 0;
}

/* 正文图片：宽度自适应卡片，居中；1px 细边避免白图与白底糊在一起。
   老模板的 img{max-width:110%} 是横向溢出的直接原因，已彻底删除 */
.nv-md img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 18px auto;
    border: 1px solid var(--line, #E4E7E4);
    border-radius: 3px;
    background: var(--paper, #FFF);
}

/* 图片本身是链接时，避免嵌套边框产生双线 */
.nv-md a > img {
    margin-bottom: 6px;
}

.nv-md a {
    color: var(--brand, #0F5C6B);
    text-decoration: none;
    border-bottom: 1px solid rgba(15, 92, 107, .28);
}

.nv-md a:hover {
    color: var(--brand-dark, #0A4149);
    border-bottom-color: var(--brand-dark, #0A4149);
}

.nv-md ul,
.nv-md ol {
    margin: 0 0 1.05em;
    padding-left: 1.5em;
}

.nv-md li {
    margin: .3em 0;
}

.nv-md li > p {
    margin-bottom: .4em;
}

.nv-md blockquote {
    margin: 1.2em 0;
    padding: 2px 0 2px 16px;
    color: var(--ink-3, #5C6A66);
    /* --brand-soft(#EAF1F0) 在白底上几乎看不出竖线，压深一档 */
    border-left: 3px solid #C6D8D4;
    background: #FBFCFB;
}

.nv-md blockquote p:last-child {
    margin-bottom: 0;
}

.nv-md hr {
    margin: 1.8em 0;
    border: 0;
    border-top: 1px solid var(--line, #E4E7E4);
}

.nv-md code {
    padding: 1px 5px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #8A3B2E;
    background: #F6F4F2;
    border: 1px solid #EDE7E3;
    border-radius: 2px;
}

/* 代码块：highlight.js 用的是 monokai-sublime 深色主题，底色必须给深色。
   注意必须显式给文字颜色——那个主题只给 .hljs-* 各种 token 上色，
   普通文本不设色，会继承 .nv-md 的深灰，在 #23241F 上等于看不见。 */
.nv-md pre {
    margin: 1.2em 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.7;
    color: #F8F8F2;
    background: #23241F;
    border: 0;
    border-radius: 3px;
}

.nv-md pre code {
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    font-size: 13px;
    white-space: pre;
}

/* 正文里的表格：1px 网格 + 浅底色表头，和页面其他表格保持同一套边框 */
.nv-md table {
    width: 100%;
    margin: 1.2em 0;
    border-collapse: collapse;
    font-size: 13.5px;
    line-height: 1.7;
}

.nv-md table th,
.nv-md table td {
    padding: 8px 11px;
    border: 1px solid var(--line, #E4E7E4);
}

.nv-md table th {
    font-weight: 600;
    color: var(--ink, #16202A);
    background: #F4F6F5;
}

.nv-md table tr:nth-child(even) td {
    background: #FBFCFB;
}

/* 公式块可能比正文宽，允许横向滚动而不是撑破卡片 */
.nv-md .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

.nv-md iframe,
.nv-md video {
    max-width: 100%;
}

/* ---------------------------------------------------------------- 上一篇 / 下一篇 */
.nv-adj {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft, #F0F2F0);
}

.nv-adj-item {
    display: block;
    min-width: 0;
    padding: 9px 12px;
    background: #FBFCFB;
    border: 1px solid var(--line-soft, #F0F2F0);
    border-radius: 3px;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.nv-adj-item.is-next {
    text-align: right;
}

.nv-adj-label {
    display: block;
    font-size: 11px;
    color: var(--muted, #8A9490);
}

.nv-adj-title {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2, #3D4A52);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.nv-adj-item:hover {
    background: var(--brand-soft, #EAF1F0);
    border-color: #CFE0DE;
}

a.nv-adj-item:hover .nv-adj-title {
    color: var(--brand, #0F5C6B);
}

/* 首篇 / 末篇：保持占位但不可点，视觉上退到最浅 */
.nv-adj-item.is-empty {
    background: #FAFBFA;
    border-style: dashed;
}

.nv-adj-item.is-empty .nv-adj-title {
    color: #AEB6B2;
}

/* ---------------------------------------------------------------- 区块（评论） */
.nv-sec {
    margin-top: 30px;
}

.nv-sec-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line, #E4E7E4);
}

.nv-sec-title {
    position: relative;
    margin: 0;
    padding-left: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #16202A);
}

/* 与列表页区块标题同款：3px 品牌色竖条做视觉锚点 */
.nv-sec-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 13px;
    margin-top: -6.5px;
    background: var(--brand, #0F5C6B);
    border-radius: 2px;
}

.nv-sec-num {
    font-size: 11px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

.nv-sec-note {
    margin-left: auto;
    padding: 1px 8px;
    font-size: 11px;
    line-height: 18px;
    color: var(--muted, #8A9490);
    background: #F4F6F5;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 评论列表 */
.nv-comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nv-comment {
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

.nv-comment:last-child {
    border-bottom: 0;
}

.nv-comment-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-soft, #EAF1F0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--brand, #0F5C6B);
    text-decoration: none;
}

.nv-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nv-avatar.is-anon {
    color: var(--muted, #8A9490);
    background: #F0F2F0;
}

.nv-comment-who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nv-comment-user {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #16202A);
    text-decoration: none;
}

.nv-comment-user:hover {
    color: var(--brand, #0F5C6B);
}

.nv-comment-user.is-anon {
    color: var(--muted, #8A9490);
    font-weight: 400;
}

.nv-comment-time {
    font-size: 11px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

.nv-comment-rel {
    margin-left: 6px;
    color: #AEB6B2;
}

/* 编辑 / 删除：平时是浅灰小字，hover 才上色，避免评论区被操作项打断 */
.nv-comment-act {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-act {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    color: var(--muted, #8A9490);
    text-decoration: none;
    transition: color .16s ease;
}

.nv-act .nv-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: currentColor;
}

.nv-act:hover,
.nv-act:focus {
    color: var(--brand, #0F5C6B);
    text-decoration: none;
}

.nv-act.is-danger:hover,
.nv-act.is-danger:focus {
    color: var(--danger, #A32D2D);
}

/* 评论正文与头像对齐（左缩进 42px = 32px 头像 + 10px 间距） */
.nv-comment-body {
    margin: 10px 0 0 42px;
    font-size: 14px;
    line-height: 1.85;
}

.nv-comment-body p {
    margin-bottom: .7em;
}

.nv-empty {
    margin: 0;
    padding: 30px 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted, #8A9490);
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

/* ---------------------------------------------------------------- 发表评论 */
/* editormd 的根节点默认没有宽度约束，窄屏容易把工具栏撑出卡片，这里统一收进容器 */
.nv-editor {
    max-width: 100%;
    overflow: hidden;
}

.nv-editor .editormd {
    width: 100% !important;
    max-width: 100%;
    border-color: var(--line, #E4E7E4);
    border-radius: 3px;
    overflow: hidden;
}

.nv-editor .CodeMirror {
    border-radius: 0;
}

.nv-reply-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.nv-btn {
    padding: 6px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #FFF;
    background: var(--brand, #0F5C6B);
    border: 1px solid var(--brand, #0F5C6B);
    border-radius: 3px;
    transition: background-color .16s ease, border-color .16s ease;
}

.nv-btn:hover,
.nv-btn:focus {
    color: #FFF;
    background: var(--brand-dark, #0A4149);
    border-color: var(--brand-dark, #0A4149);
    outline: 0;
}

.nv-reply-hint {
    font-size: 11.5px;
    color: var(--muted, #8A9490);
}

/* 未登录：虚线框 + 一个明确按钮，比原来一行灰字「请先登录」好用 */
.nv-login-tip {
    margin-top: 14px;
    padding: 24px 20px;
    text-align: center;
    background: #FBFCFB;
    border: 1px dashed var(--line, #E4E7E4);
    border-radius: 3px;
}

.nv-login-tip p {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--ink-3, #5C6A66);
}

/* ---------------------------------------------------------------- 分页 */
/* 整条水平居中：flex 顺带消掉 li 之间的 inline 空白；
   必须解除 Bootstrap 的 float，否则 li 宽度塌陷、居中失效 */
.nv-pager {
    margin: 18px 0 0;
    text-align: center;
}

.nv-page .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding-left: 0;
}

.nv-page .pagination > li {
    display: block;
}

.nv-page .pagination > li > a,
.nv-page .pagination > li > span {
    position: relative;
    display: block;
    float: none;
    padding: 5px 11px;
    margin-left: -1px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-2, #3D4A52);
    background-color: var(--paper, #FFF);
    border: 1px solid var(--line, #E4E7E4);
}

.nv-page .pagination > li:first-child > a,
.nv-page .pagination > li:first-child > span {
    margin-left: 0;
    border-radius: 3px 0 0 3px;
}

.nv-page .pagination > li:last-child > a,
.nv-page .pagination > li:last-child > span {
    border-radius: 0 3px 3px 0;
}

.nv-page .pagination > li > a:hover,
.nv-page .pagination > li > a:focus {
    color: var(--brand, #0F5C6B);
    background-color: var(--brand-soft, #EAF1F0);
    border-color: var(--line, #E4E7E4);
}

.nv-page .pagination > .active > a,
.nv-page .pagination > .active > span,
.nv-page .pagination > .active > a:hover {
    z-index: 2;
    color: #FFF;
    background-color: var(--brand, #0F5C6B);
    border-color: var(--brand, #0F5C6B);
    cursor: default;
}

.nv-page .pagination > .disabled > span,
.nv-page .pagination > .disabled > span:hover {
    color: var(--muted, #8A9490);
    background-color: var(--page, #F6F7F5);
    border-color: var(--line, #E4E7E4);
    cursor: default;
}

/* ---------------------------------------------------------------- 侧栏 */
.nv-side {
    /* 滚动时侧栏跟随，但不超出内容高度 */
    position: sticky;
    top: 72px;
}

.nv-side-card {
    padding: 15px 17px;
    margin-bottom: 16px;
    background: var(--paper, #FFF);
    border: 1px solid var(--line, #E4E7E4);
    border-radius: 4px;
}

.nv-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line-soft, #F0F2F0);
}

.nv-side-head h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #16202A);
}

.nv-side-all {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--muted, #8A9490);
    text-decoration: none;
    transition: color .16s ease;
}

.nv-side-all span {
    margin-left: 2px;
}

.nv-side-all:hover {
    color: var(--brand, #0F5C6B);
}

.nv-side-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nv-side-list li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-soft, #F0F2F0);
}

.nv-side-list li:last-child {
    padding-bottom: 2px;
    border-bottom: 0;
}

.nv-side-list a {
    display: block;
    text-decoration: none;
}

.nv-side-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2, #3D4A52);
    transition: color .16s ease;
}

.nv-side-list a:hover .nv-side-title {
    color: var(--brand, #0F5C6B);
}

.nv-side-date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted, #8A9490);
    font-variant-numeric: tabular-nums;
}

.nv-side-empty {
    margin: 0;
    padding: 18px 0;
    text-align: center;
    font-size: 12px;
    color: var(--muted, #8A9490);
}

/* 本文信息：dt/dd 两列，dt 固定 62px，数字右对齐靠 tabular-nums 对齐 */
.nv-side-meta dl {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px 8px;
    margin: 12px 0 0;
}

.nv-side-meta dt {
    font-size: 11.5px;
    line-height: 1.75;
    color: var(--muted, #8A9490);
}

.nv-side-meta dd {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--ink-2, #3D4A52);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width: 1199px) {
    .nv-page {
        grid-template-columns: minmax(0, 1fr) 264px;
        gap: 24px;
    }

    .nv-article {
        padding: 26px 26px 22px;
    }
}

/* 991 以下侧栏收到正文下方，避免正文被压到 400px 以内；
   此时容器变宽，两张侧栏卡片并排比拉满整行更好看 */
@media (max-width: 991px) {
    .nv-page {
        display: block;
    }

    .nv-side {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 22px;
    }

    .nv-side-card {
        margin-bottom: 0;
    }

    .nv-adj {
        grid-template-columns: 1fr;
    }

    .nv-adj-item.is-next {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .nv-article {
        padding: 18px 15px 16px;
    }

    .nv-title {
        font-size: 18px;
    }

    .nv-md {
        font-size: 14.5px;
        line-height: 1.85;
    }

    .nv-md p {
        text-align: left;
    }

    .nv-md img {
        margin: 14px auto;
    }

    /* 窄屏正文缩进会挤掉一半宽度，评论正文顶格 */
    .nv-comment-body {
        margin-left: 0;
    }

    .nv-meta {
        font-size: 11.5px;
        row-gap: 5px;
    }

    /* 换行后「·」会孤立地落在行尾，窄屏直接去掉，靠图标分隔即可 */
    .nv-meta-sep {
        display: none;
    }

    .nv-comment-head {
        flex-wrap: wrap;
    }

    .nv-comment-act {
        width: 100%;
        padding-left: 42px;
    }
}

/* 更窄（手机）时侧栏两张卡也堆叠 */
@media (max-width: 639px) {
    .nv-side {
        grid-template-columns: 1fr;
    }
}