/* =========================================================
   内容元素：hr / blockquote / kbd 的 Typecho 风格美化 / 右侧目录按标题折叠（补充 50）。
   （原 custom.css 拆分；"补充 N" 是历史编号，站内注释按编号引用，不要重排）
   ========================================================= */

/* =========================================================
   
   ========================================================= */

/* =========================================================
   
   ------------------------------------------------------------------
   
   先说清"参考"到什么程度 —— 参照站是 **Butterfly 的 Typecho 版**，和本站同源，
   所以它的 `hr`（蓝色虚线 + 剪刀图标）、`blockquote`、`kbd`、`blockquote` 配色
   
   的 ref-html-tags.png 与 my-html-tags-before.png 并排）。
   真正"素"的只有这几处，也是这次改的对象：

     · `details / summary` —— 本站完全没样式，就是一个三角形 + 一行字
       （测试页自己都写着"这个标签浏览器原生支持，但主题没做美化，样式会比较素"）；
       参照站给它做了卡片：1px 浅边框 + 圆角，摘要行浅灰底、加粗、带展开指示。
       **这是这次改动里最重要的一项。**
     · `mark` —— 浏览器默认的纯黄 (#ff0) + 黑字，没内边距没圆角，很刺眼。
     · `kbd` —— 主题已有键帽样式，但底色 #f8f8f8 + 边框 #b4b4b4 + 3px 阴影 + 内部白色高光，
       偏"拟物"，这里收敛成更干净的键帽。
     · `abbr / u / ins / del / sup / sub / dl / dt / dd / figcaption / q / samp`
       —— 全是浏览器默认，逐个补齐。

    刻意不做彩色化：这一批只用中性灰阶（灰线 / 灰底 / 灰字），不引入任何色相。
    `hr` 保持原样：它就是主题那个蓝色虚线 + 剪刀，参照站一模一样，动了反而背离"参考"。
    所有规则都挂在 `#article-container` 下，不碰页脚 / 侧栏 / 评论区。
   ========================================================= */

/* ---------- 1) details / summary：卡片 + 摘要行 ---------- */
#article-container details {
    margin: 18px 0;
    border: 1px solid #e9ecf1;
    border-radius: 8px;
    background: #fbfcfd;
    /* overflow:hidden 顺手把圆角裁干净，也让内部最后一段的 margin 不塌到盒子外面 */
    overflow: hidden;
    transition: border-color 0.25s ease;
}

#article-container details:hover {
    border-color: #dee3ea;
}

#article-container summary {
    position: relative;
    display: block; /* 去掉默认的 list-item 盒子（::marker 也就跟着没了） */
    padding: 12px 16px 12px 38px;
    background: #f6f7f9;
    color: var(--zx-text-1);
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s ease;
}

#article-container summary:hover {
    background: #eef1f5;
}

/* 展开指示：一个小折角箭头，展开时转 180° */
#article-container summary::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--zx-text-4);
    border-bottom: 2px solid var(--zx-text-4);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.25s ease;
}

#article-container details[open] > summary::before {
    transform: translateY(-50%) rotate(-135deg);
}

/* 兜底：万一上面的 display:block 被别的规则盖掉，这里再把原生三角藏一次 */
#article-container summary::-webkit-details-marker {
    display: none;
}

#article-container details[open] > summary {
    border-bottom: 1px solid #eef1f5;
}

/* 展开区：左右留白用 margin 给（内部可能是 p / ul / table，统一处理） */
#article-container details > :not(summary) {
    margin: 0 16px;
}

#article-container details > summary + :not(summary) {
    margin-top: 14px;
}

#article-container details > :not(summary) + :not(summary) {
    margin-top: 12px;
}

#article-container details > :not(summary):last-child {
    margin-bottom: 16px;
}

/* ---------- 2) mark：柔和高亮，不再是纯黄 ----------
    选择器必须排除 `.hl-label`，别把它改成 `#article-container mark`：
      `{% label 文本 颜色 %}` 标签插件渲染出来的也是 **mark**（`<mark class="hl-label blue">`），
      而本规则带 ID 前缀、特异性 (1,0,1) —— **一个 ID 就能压过任意多个类名**，
      所以主题给 7 个变体写的 `.hl-label.default/.blue/.pink/…`（0,2,0）会被整片盖掉，
      
      `:not(.hl-label)` 之后这些元素完全不匹配本规则，配色/内边距回到主题（主题用 --tags-*-color 变量）。
      （`:not(.hl-label)` 是 CSS3 里最基础的一档，比这里已在用的 `details > :not(summary)` 还简单。） */
#article-container mark:not(.hl-label) {
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255, 208, 0, 0.28);
    color: inherit;
    /* 跨行时两段的圆角和内边距各自完整，不会被切成半截 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- 3) kbd：干净一点的键帽 ---------- */
#article-container kbd {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 7px;
    border: 1px solid #d8dde4;
    border-bottom-width: 2px; /* 底边厚一点，就是"键帽"那点立体感 */
    border-radius: 5px;
    background: #fff;
    color: #3c4858;
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.84em;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: 0.05em;
    box-shadow: 0 1px 2px rgba(15, 23, 32, 0.06);
}

/* ---------- 4) abbr：悬停看全称的那种虚线 ---------- */
#article-container abbr[title] {
    border-bottom: 1px dashed #b9c2cc;
    text-decoration: none;
    cursor: help;
}

/* ---------- 5) u / ins / del：三种下划线/删除线 ---------- */
#article-container u,
#article-container ins {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: #c2cad3;
}

#article-container del,
#article-container s {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #b9c2cc;
    color: #8d99a6;
}

/* ---------- 6) sup / sub：不撑高行距 ---------- */
#article-container sup,
#article-container sub {
    position: relative;
    font-size: 0.72em;
    line-height: 0; /* 关键是这句：不加的话行高会被上下标顶开 */
    vertical-align: baseline;
}

#article-container sup {
    top: -0.52em;
}

#article-container sub {
    bottom: -0.26em;
}

/* ---------- 7) dl / dt / dd：术语 + 缩进解释 ---------- */
#article-container dl {
    margin: 16px 0 20px;
}

#article-container dt {
    margin-top: 12px;
    color: var(--zx-text-1);
    font-weight: 600;
}

#article-container dd {
    margin: 6px 0 0;
    padding-left: 14px;
    border-left: 2px solid #eef1f5;
    color: var(--zx-text-3);
}

/* ---------- 8) figure / figcaption ---------- */
#article-container figcaption {
    margin-top: 8px;
    color: #8592a0;
    font-size: 0.86em;
    text-align: center;
}

/* ---------- 9) q：中文引号（浏览器默认给的是英文直角引号） ---------- */
#article-container q {
    quotes: '「' '」' '『' '』';
}

/* ---------- 10) small / samp ---------- */
#article-container small {
    font-size: 0.86em;
    color: #8592a0;
}

#article-container samp {
    font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
}

/* ---------- 11) 暗色主题 ---------- */
html[data-theme='dark'] #article-container details {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

html[data-theme='dark'] #article-container details:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

html[data-theme='dark'] #article-container summary {
    background: var(--zx-d-fill-2);
    color: var(--zx-d-text-strong);
}

html[data-theme='dark'] #article-container summary:hover {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme='dark'] #article-container details[open] > summary {
    border-bottom-color: var(--zx-d-fill-1);
}

html[data-theme='dark'] #article-container summary::before {
    border-right-color: rgba(255, 255, 255, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

html[data-theme='dark'] #article-container mark:not(.hl-label) {
    background: rgba(255, 208, 0, 0.22);
    color: #ffe9a8;
}

html[data-theme='dark'] #article-container kbd {
    border-color: rgba(255, 255, 255, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.28);
    background: var(--zx-d-fill-1);
    color: var(--zx-d-text-strong);
    box-shadow: none;
}

html[data-theme='dark'] #article-container abbr[title] {
    border-bottom-color: var(--zx-d-line);
}

html[data-theme='dark'] #article-container u,
html[data-theme='dark'] #article-container ins {
    text-decoration-color: var(--zx-d-line);
}

html[data-theme='dark'] #article-container del,
html[data-theme='dark'] #article-container s {
    text-decoration-color: var(--zx-d-line);
    color: rgba(255, 255, 255, 0.45);
}

html[data-theme='dark'] #article-container dt {
    color: var(--zx-d-text-strong);
}

html[data-theme='dark'] #article-container dd {
    border-left-color: var(--zx-d-fill-3);
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme='dark'] #article-container figcaption,
html[data-theme='dark'] #article-container small {
    color: rgba(255, 255, 255, 0.5);
}