@charset "UTF-8";
/* ==========================================================================
   讨论详情 discuss/view
   --------------------------------------------------------------------------
   页头（P 题号 + 标题 + 页签）、卡片、分页、右侧信息栏全部复用
   problem-sub.css 的 .pd- 类，这里只写帖子特有的部分（.dc-）。
   两份样式由 view.php 一起注册，problem-sub.css 在前，本文件在后。
   ========================================================================== */

/* ------------------------------------------------------------------ 骨架 */
/* 与旧版题目页（.pd-classic）同一套 1fr + 286px 栅格：
   左侧读帖，右侧常驻题目信息，滚动时不跟丢 */
.dc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    align-items: start;
    gap: 18px;
    padding-top: 18px;
}
.dc-main {
    min-width: 0;
}
.dc-side {
    position: sticky;
    top: 16px;
}

/* -------------------------------------------------------------- 主贴卡片 */
.dc-post {
    padding: 20px 22px 22px;
}

/* 帖子标题是整页的主标题（页头里的 16px 题名只是定位用），这里给到 20px */
.dc-post-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 一行元信息：头像 作者 · 时间 · 浏览 · 回复，编辑/删除推到最右 */
.dc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 9px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11.5px;
}

.dc-avatar {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--line-soft);
    object-fit: cover;
    vertical-align: middle;
}
.dc-avatar.is-lg {
    width: 32px;
    height: 32px;
}

.dc-author {
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}
.dc-author:hover {
    color: var(--brand);
    text-decoration: none;
}

/* 分隔点用 --line 而不是 --muted，避免一行里点太多抢注意力 */
.dc-dot {
    color: #C9D0CA;
}

/* 帖子/楼层上的计数小标签（浏览 128、#3 这类） */
.dc-tag {
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--ink-3);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 17px;
}

/* 编辑 / 删除：常态是灰字，hover 才变色，不做成按钮免得跟"回复"抢重点 */
.dc-ops {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.dc-op {
    color: var(--muted);
    font-size: 11.5px;
    text-decoration: none;
}
.dc-op:hover {
    color: var(--brand);
    text-decoration: none;
}
.dc-op.is-danger:hover {
    color: var(--danger);
}

.dc-post-body {
    padding-top: 16px;
}

/* 楼层（回复） */
/* overflow:hidden 只给楼层卡：:target 的高亮底色要跟着 4px 圆角收边。
   不加在 .pd-card 上，是因为回复框那张卡里有 editormd，裁切风险更大 */
.dc-replies {
    overflow: hidden;
}

.dc-floors {
    margin: 0;
    padding: 0;
    list-style: none;
}
.dc-floor {
    padding: 16px 22px 18px;
}
.dc-floor + .dc-floor {
    border-top: 1px solid var(--line-soft);
}
/* 从别的页面跳过来（#floor-123）时高亮一下，不然找不到落在哪一层 */
.dc-floor:target {
    background: #FBFCFA;
    box-shadow: inset 2px 0 0 var(--brand);
}

.dc-floor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
    margin-bottom: 11px;
    color: var(--muted);
    font-size: 11.5px;
}
.dc-floor-no {
    flex: none;
    padding: 0 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 17px;
}
.dc-floor-time {
    color: var(--muted);
}

/* 楼主在回复里出现时给个淡标记，方便顺着对话看 */
.dc-floor-owner {
    padding: 0 5px;
    border-radius: 3px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10.5px;
    line-height: 17px;
}

/* 回复内容比题面小半档：楼层多，行距太松会读不出结构 */
.dc-floor-body {
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.8;
}

/* ------------------------------------------------------------ 回复编辑器 */
.dc-editor-b {
    padding: 16px 22px 18px;
}

/* 未登录时的提示：不要做成整张虚化卡片，静一点 */
.dc-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 18px 22px;
}
.dc-login p {
    margin: 0;
    color: var(--ink-3);
    font-size: 12.5px;
}
.dc-login-btn {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid var(--brand);
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: none;
}
.dc-login-btn:hover {
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

/* editormd 的工具栏图标本身是 16px 木刻风，放在白卡里稍显碎；
   给工具栏补一条底线，让"工具栏 / 编辑区"读成两层 */
.dc-editor-b .editormd {
    border-radius: 3px;
}
.dc-editor-b .editormd-toolbar {
    border-bottom: 1px solid var(--line-soft);
    background: #FCFDFC;
}

/* -------------------------------------------------------------- Markdown 正文
   与 problem-sub.css 的 .pd-prose 同一套排版，只是不带外边距
   （主贴和楼层各自已有 padding，再叠一层会显空）
   ------------------------------------------------------------------ */
.dc-prose {
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.85;
    /* 学生常贴无空格长英文串，不加这条 375 下能把整页撑破 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 帖子里的 h1 由页面标题占位，正文只降到 h2/h3，避免和主标题打架 */
.dc-prose h1,
.dc-prose h2 {
    margin: 22px 0 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .3px;
}
.dc-prose h3,
.dc-prose h4 {
    margin: 18px 0 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.dc-prose h1:first-child,
.dc-prose h2:first-child,
.dc-prose h3:first-child {
    margin-top: 0;
}

.dc-prose p {
    margin: 0 0 11px;
}
.dc-prose p:last-child {
    margin-bottom: 0;
}

.dc-prose ul,
.dc-prose ol {
    margin: 0 0 11px;
    padding-left: 22px;
}
.dc-prose li {
    margin-bottom: 4px;
}

.dc-prose strong {
    color: var(--ink);
    font-weight: 600;
}

.dc-prose code {
    padding: 1px 5px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #F8FAF8;
    color: var(--ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
}
.dc-prose pre {
    margin: 0 0 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: #F8FAF8;
    color: var(--ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
}
.dc-prose pre code {
    padding: 0;
    border: 0;
    background: none;
}

.dc-prose table {
    margin: 0 0 12px;
    border-collapse: collapse;
    font-size: 12.5px;
}
.dc-prose table th,
.dc-prose table td {
    padding: 6px 11px;
    border: 1px solid var(--line);
    text-align: left;
}
.dc-prose table th {
    background: #F8FAF8;
    color: var(--ink-3);
    font-weight: 500;
}

.dc-prose img {
    max-width: 100%;
    height: auto;
}

.dc-prose blockquote {
    margin: 0 0 12px;
    padding: 8px 14px;
    border-left: 2px solid var(--brand);
    background: var(--brand-soft);
    color: var(--ink-3);
}
.dc-prose blockquote p:last-child {
    margin-bottom: 0;
}

/* 代码块不参与 .dc-prose 的 break-word：
   折行会把代码缩进压平、注释跑到行首，读起来比横向滚动更糟。
   pre 已经是 overflow-x:auto，长行在块内滚，不会撑破页面。
   ★ white-space 必须同时写在 pre code 上：bootstrap 3 的
     `pre code { white-space: pre-wrap }` 会把 pre 的 nowrap 又打开，
     只改 pre 的话长注释照样折行（2026-10-28 实测）。 */
.dc-prose pre,
.dc-prose pre code {
    white-space: pre;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
}

/* 代码块在窄屏会横向溢出，包一层滚动而不是撑破卡片 */
.dc-prose pre {
    max-width: 100%;
}

/* -------------------------------------------------------------- 右侧信息栏 */
/* 题目卡里的标题：两行截断，避免长题名把侧栏撑高 */
.dc-side-ptitle {
    display: -webkit-box;
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}
.dc-side-ptitle a {
    color: inherit;
    text-decoration: none;
}
.dc-side-ptitle a:hover {
    color: var(--brand);
    text-decoration: none;
}

/* 侧栏里的题号 + 难度一行 */
.dc-side-prow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11.5px;
}

/* 进入题目：整栏宽的主行动点（侧栏空间窄，按钮要够好点） */
.dc-side-go {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 11px;
    padding: 7px 10px;
    border: 1px solid var(--brand);
    border-radius: 3px;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}
.dc-side-go:hover {
    background: var(--brand-dark);
    color: #fff;
    text-decoration: none;
}

/* -------------------------------------------------------------- 编辑页 */
/* 从详情页点"编辑"进来，页头与详情页同一套 .pd-head，
   表单卡片跟回复框同样宽，不做居中收窄 —— 换页面不换视觉 */
.dc-edit-body {
    padding-top: 18px;
}

/* 取消：做成文字链接而不是按钮，避免和"保存"两个同重量按钮并列 */
.dc-cancel {
    color: var(--muted);
    font-size: 12.5px;
    text-decoration: none;
}
.dc-cancel:hover,
.dc-cancel:focus {
    color: var(--ink-2);
    text-decoration: none;
}

/* -------------------------------------------------------------- 响应式 */
/* 992 以下侧栏落到正文下方；再窄到 767 统一收到 10px 边距 */
@media (max-width: 991px) {
    .dc-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .dc-side {
        position: static;
    }
}

@media (max-width: 767px) {
    .dc-post,
    .dc-floor,
    .dc-editor-b {
        padding-left: 16px;
        padding-right: 16px;
    }
    .dc-post-title {
        font-size: 17px;
    }
    /* 楼层头上"时间"单独占一行会显得散，窄屏直接收进 gap */
    .dc-floor-head {
        gap: 4px 6px;
    }
    .dc-ops {
        margin-left: 0;
    }
    .dc-login {
        padding: 16px;
    }
}