/*
 * 前台文章正文排版
 *
 * 来源：Vditor v3.11.2 的 .vditor-reset 规则（dist/index.css）
 *       + content-theme/light.css 的配色覆盖
 * 生成方式：一次性抽取，不是手写
 *
 * 为什么要单独抽一份：后台文章用 Vditor 编辑，正文存的是 Markdown，
 * 保存时由编辑器的 getHTML() 渲染成 HTML 存库，前台详情页直接输出。
 * 要让前台的排版和编辑器里看到的一致，就得用同一套 .vditor-reset 样式。
 *
 * 直接引 dist/index.css 不行：那里面绝大部分是编辑器 UI（工具栏、弹层、
 * 面板）的样式，前台一个都用不上，体积大还可能和 blog.css 打架。
 *
 * 所有规则都挂在 .vditor-reset 下，作用域封死在正文容器里，
 * 不会影响页面其它部分。
 *
 * 升级 Vditor 后如需同步，重新从 dist 抽一遍即可。
 */
.vditor-preview > .vditor-reset {
    padding: 10px;
    
  margin: 0 auto;
    
}

.vditor-reset {
    color: #24292e;
    
  font-variant-ligatures: no-common-ligatures;
    
  font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    
  word-wrap: break-word;
    
  overflow: auto;
    
  line-height: 1.5;
    
  font-size: 16px;
    
  word-break: break-word;
    
}

.vditor-reset--anchor {
    padding-left: 20px;
    
}

.vditor-reset--error {
    color: #d23f31;
    
  font-size: 12px;
    
  display: block;
    
  line-height: 16px;
    
}

.vditor-reset ul ul ul {
    list-style-type: square;
    
}

.vditor-reset ul ul {
    list-style-type: circle;
    
}

.vditor-reset ul {
    list-style-type: disc;
    
}

.vditor-reset ul, .vditor-reset ol {
    padding-left: 2em;
    
  margin-top: 0;
    
  margin-bottom: 16px;
    
}

.vditor-reset li + li {
    margin-top: 0.25em;
    
}

.vditor-reset li p {
    margin-top: 16px;
    
}

.vditor-reset audio {
    max-width: 100%;
    
}

.vditor-reset audio:focus {
    outline: none;
    
}

.vditor-reset video {
    max-height: 90vh;
    
  max-width: 100%;
    
}

.vditor-reset img {
    max-width: 100%;
    
}

.vditor-reset img.emoji {
    cursor: auto;
    
  max-width: 20px;
    
  vertical-align: sub;
    
}

.vditor-reset h1, .vditor-reset h2, .vditor-reset h3, .vditor-reset h4, .vditor-reset h5, .vditor-reset h6 {
    margin-top: 24px;
    
  margin-bottom: 16px;
    
  font-weight: 600;
    
  line-height: 1.25;
    
}

.vditor-reset h1:hover .vditor-anchor svg, .vditor-reset h2:hover .vditor-anchor svg, .vditor-reset h3:hover .vditor-anchor svg, .vditor-reset h4:hover .vditor-anchor svg, .vditor-reset h5:hover .vditor-anchor svg, .vditor-reset h6:hover .vditor-anchor svg {
    visibility: visible;
    
}

.vditor-reset h1 {
    font-size: 1.75em;
    
}

.vditor-reset h2 {
    font-size: 1.55em;
    
}

.vditor-reset h3 {
    font-size: 1.38em;
    
}

.vditor-reset h4 {
    font-size: 1.25em;
    
}

.vditor-reset h5 {
    font-size: 1.13em;
    
}

.vditor-reset h6 {
    font-size: 1em;
    
}

.vditor-reset hr {
    height: 2px;
    
  padding: 0;
    
  margin: 24px 0;
    
  background-color: #eaecef;
    
  border: 0;
    
}

.vditor-reset p {
    margin-top: 0;
    
  margin-bottom: 16px;
    
}

.vditor-reset blockquote {
    padding: 0 1em;
    
  color: #6a737d;
    
  border-left: 0.25em solid #eaecef;
    
  margin: 0 0 16px 0;
    
}

.vditor-reset blockquote > :first-child {
    margin-top: 0;
    
}

.vditor-reset blockquote > :last-child {
    margin-bottom: 0;
    
}

.vditor-reset ins > iframe {
    border: 0;
    
}

.vditor-reset iframe {
    border: 1px solid #d1d5da;
    
  max-width: 100%;
    
  box-sizing: border-box;
    
}

.vditor-reset iframe.iframe__video {
    min-width: 80%;
    
  min-height: 36vh;
    
}

.vditor-reset table {
    border-collapse: collapse;
    
  empty-cells: show;
    
  margin-bottom: 16px;
    
  overflow: auto;
    
  border-spacing: 0;
    
  display: block;
    
  word-break: keep-all;
    
  width: 100%;
    
}

.vditor-reset table tr {
    background-color: #fafbfc;
    
  border-top: 1px solid #c6cbd1;
    
}

.vditor-reset table td, .vditor-reset table th {
    padding: 6px 13px;
    
  border: 1px solid #dfe2e5;
    
  word-break: normal;
    
  white-space: nowrap;
    
}

.vditor-reset table td:first-child::after, .vditor-reset table th:first-child::after {
    content: "";
    
  display: inline-block;
    
  vertical-align: top;
    
  min-height: 24px;
    
}

.vditor-reset table th {
    font-weight: 600;
    
}

.vditor-reset table tbody tr:nth-child(2n) {
    background-color: #fff;
    
}

.vditor-reset code:not(.hljs):not(.highlight-chroma) {
    padding: 0.2em 0.4em;
    
  margin: 0;
    
  font-size: 85%;
    
  border-radius: 3px;
    
  font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    
  word-break: break-word;
    
  background-size: 20px 20px;
    
  white-space: pre-wrap;
    
}

.vditor-reset pre {
    margin: 1em 0;
    
}

.vditor-reset pre > code {
    margin: 0;
    
  font-size: 85%;
    
  padding: 0.5em;
    
  border-radius: 5px;
    
  display: block;
    
  overflow: auto;
    
  white-space: pre;
    
  font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    
  background-size: 20px 20px;
    
  background-image: url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
    
  word-break: initial;
    
  word-wrap: normal;
    
}

.vditor-reset pre:hover div.vditor-copy {
    display: block;
    
}

.vditor-reset .language-math, .vditor-reset .language-echarts, .vditor-reset .language-mindmap, .vditor-reset .language-plantuml, .vditor-reset .language-mermaid, .vditor-reset .language-smiles, .vditor-reset .language-markmap, .vditor-reset .language-abc, .vditor-reset .language-flowchart, .vditor-reset .language-graphviz {
    margin-bottom: 16px;
    
}

.vditor-reset .language-math mjx-container:focus {
    outline: none;
    
  cursor: context-menu;
    
}

.vditor-reset .language-math .katex-display > .katex > .katex-html > .tag {
    display: inline-block;
    
  font-size: 1.21rem;
    
  right: 2px;
    
}

.vditor-reset .language-echarts, .vditor-reset .language-mindmap {
    overflow: hidden;
    
  height: 420px;
    
}

.vditor-reset .language-mermaid, .vditor-reset .language-markmap, .vditor-reset .language-flowchart, .vditor-reset .language-graphviz {
    text-align: center;
    
}

.vditor-reset .language-graphviz parsererror {
    overflow: auto;
    
}

.vditor-reset kbd {
    display: inline-block;
    
  padding: 3px 5px;
    
  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
    
  line-height: 10px;
    
  color: #24292e;
    
  vertical-align: middle;
    
  background-color: #fafbfc;
    
  border: solid 1px #d1d5da;
    
  border-radius: 3px;
    
  box-shadow: inset 0 -1px 0 #d1d5da;
    
}

.vditor-reset summary {
    cursor: pointer;
    
}

.vditor-reset summary:focus {
    outline: none;
    
}

.vditor-reset svg {
    height: auto;
    
  width: auto;
    
  stroke-width: initial;
    
}

.vditor-reset p:last-child, .vditor-reset blockquote:last-child, .vditor-reset pre:last-child, .vditor-reset ul:last-child, .vditor-reset ol:last-child, .vditor-reset hr:last-child {
    margin-bottom: 0;
    
}

.vditor-wysiwyg pre.vditor-reset {
    background-color: var(--panel-background-color);
    
  margin: 0;
    
  white-space: pre-wrap;
    
  height: 100%;
    
  box-sizing: border-box;
    
}

.vditor-wysiwyg pre.vditor-reset[contenteditable="false"] {
    opacity: 0.3;
    
  cursor: not-allowed;
    
}

.vditor-wysiwyg pre.vditor-reset:empty::before {
    content: attr(placeholder);
    
  color: var(--second-color);
    
}

.vditor-wysiwyg pre.vditor-reset:focus {
    outline: none;
    
  background-color: var(--textarea-background-color);
    
}

.vditor-wysiwyg pre.vditor-reset:after {
    content: "";
    
  height: var(--editor-bottom);
    
  display: block;
    
}

.vditor-wysiwyg > .vditor-reset > h1:before, .vditor-wysiwyg > .vditor-reset > h2:before, .vditor-wysiwyg > .vditor-reset > h3:before, .vditor-wysiwyg > .vditor-reset > h4:before, .vditor-wysiwyg > .vditor-reset > h5:before, .vditor-wysiwyg > .vditor-reset > h6:before, .vditor-wysiwyg div.vditor-wysiwyg__block:before, .vditor-wysiwyg div[data-type="link-ref-defs-block"]:before, .vditor-wysiwyg div[data-type="footnotes-block"]:before, .vditor-wysiwyg .vditor-toc:before {
    float: left;
    
  padding-right: 4px;
    
  margin-left: -29px;
    
  content: 'H1';
    
  font-size: 0.85rem;
    
  font-weight: normal;
    
  color: var(--second-color);
    
}

.vditor-wysiwyg > .vditor-reset > h2:before {
    content: 'H2';
    
}

.vditor-wysiwyg > .vditor-reset > h3:before {
    content: 'H3';
    
}

.vditor-wysiwyg > .vditor-reset > h4:before {
    content: 'H4';
    
}

.vditor-wysiwyg > .vditor-reset > h5:before {
    content: 'H5';
    
}

.vditor-wysiwyg > .vditor-reset > h6:before {
    content: 'H6';
    
}

.vditor-ir pre.vditor-reset {
    background-color: var(--panel-background-color);
    
  margin: 0;
    
  white-space: pre-wrap;
    
  height: 100%;
    
  box-sizing: border-box;
    
}

.vditor-ir pre.vditor-reset[contenteditable="false"] {
    opacity: 0.3;
    
  cursor: not-allowed;
    
}

.vditor-ir pre.vditor-reset:empty::before {
    content: attr(placeholder);
    
  color: var(--second-color);
    
}

.vditor-ir pre.vditor-reset:focus {
    outline: none;
    
  background-color: var(--textarea-background-color);
    
}

.vditor-ir pre.vditor-reset:after {
    content: "";
    
  height: var(--editor-bottom);
    
  display: block;
    
}

.vditor-ir pre.vditor-reset pre {
    margin: 0;
    
}

.vditor-ir .vditor-reset > h1:before, .vditor-ir .vditor-reset > h2:before, .vditor-ir .vditor-reset > h3:before, .vditor-ir .vditor-reset > h4:before, .vditor-ir .vditor-reset > h5:before, .vditor-ir .vditor-reset > h6:before, .vditor-ir div[data-type="link-ref-defs-block"]:before, .vditor-ir div[data-type="footnotes-block"]:before, .vditor-ir .vditor-toc:before {
    float: left;
    
  padding-right: 4px;
    
  margin-left: -29px;
    
  content: 'H1';
    
  font-size: 0.85rem;
    
  font-weight: normal;
    
  color: var(--second-color);
    
}

.vditor-ir .vditor-reset > h2:before {
    content: 'H2';
    
}

.vditor-ir .vditor-reset > h3:before {
    content: 'H3';
    
}

.vditor-ir .vditor-reset > h4:before {
    content: 'H4';
    
}

.vditor-ir .vditor-reset > h5:before {
    content: 'H5';
    
}

.vditor-ir .vditor-reset > h6:before {
    content: 'H6';
    
}

.vditor-reset h1, .vditor-reset h2 {
    padding-bottom: 0.3em;
    
    border-bottom: 1px solid #eaecef;
    
}

.vditor-reset hr {
    background-color: #eaecef;
    
}

.vditor-reset blockquote {
    color: #6a737d;
    
    border-left: .25em solid #eaecef
}

.vditor-reset iframe {
    border: 1px solid #d1d5da
}

.vditor-reset table tr {
    border-top: 1px solid #c6cbd1;
    
    background-color: #fafbfc
}

.vditor-reset table td, .vditor-reset table th {
    border: 1px solid #dfe2e5
}

.vditor-reset table tbody tr:nth-child(2n) {
    background-color: #fff
}

.vditor-reset code:not(.hljs):not(.highlight-chroma) {
    background-color: rgba(27, 31, 35, .05);
    
}

.vditor-reset kbd {
    color: #24292e;
    
    background-color: #fafbfc;
    
    border: solid 1px #d1d5da;
    
    box-shadow: inset 0 -1px 0 #d1d5da;
    
}

/* ==========================================================================
   文章正文的自适应收口

   上面那些是从 Vditor dist 原样抽出来的，直接用在前台有两个问题：

   1) 表格单元格是 white-space: nowrap，加上 table 上的 word-break: keep-all，
      单元格永远不换行。内容一长就把宽度撑爆，窄屏下整页横向溢出。
   2) blog.css 在 max-width:1024px 下把 .detail-layout 改成了
      grid-template-columns: 1fr。1fr 的隐含最小宽度是 auto，
      轨道不肯收缩到内容宽度以下，于是撑爆的表格会顶着整页变宽。

   这一段只做收口，不改观感。写在文件末尾是因为前面那段会随 Vditor 升级
   重新生成，写在里面会被覆盖掉。
   ========================================================================== */

/* grid 轨道能收缩到内容宽度以下，正文里再宽的东西也顶不动页面 */
.detail-article {
    min-width: 0;
}

/* 长网址、长英文串在窄屏下要能断开，否则一行顶出去 */
.vditor-reset {
    overflow-wrap: anywhere;
}

/* 表格：单元格正常换行；实在还是太宽就让表格自己横向滚动，不连累整页 */
.vditor-reset table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    word-break: normal;
    -webkit-overflow-scrolling: touch;
}

.vditor-reset table td,
.vditor-reset table th {
    white-space: normal;
    word-break: break-word;
}

/* 代码块不换行是对的（换行会改变代码含义），但要能横向滚动 */
.vditor-reset pre {
    max-width: 100%;
    overflow-x: auto;
}

/* 图片、视频、内嵌页跟着容器走，别按原始尺寸撑开 */
.vditor-reset img,
.vditor-reset video,
.vditor-reset iframe {
    max-width: 100%;
    height: auto;
}

/* 窄屏下表格给个最小可读宽度：挤成一列字反而更难看，此时让它横向滚动 */
@media (max-width: 640px) {
    .vditor-reset table {
        min-width: 100%;
    }

    .vditor-reset table td,
    .vditor-reset table th {
        min-width: 90px;
    }
}