:root {
    --xc-code-background-color: rgba(214, 51, 132, 0.1);
    --bs-body-line-height: 1.65;
    --bs-body-font-size: 1rem;
    font-size: 18px;
}
h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, dl, dt, dd, span, div, pre, code, a {
    text-autospace: normal; /* Some browsers may encounter inconsistencies when handling */
    -ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis;
}
a, a:hover {
    text-underline-offset: 0.25rem;
}
a {
    overflow-wrap: break-word;
    word-break: break-word;
}
h1 { 
    font-size: 2.25rem;
}
h2::after, h3::after {
    color: gray;
    font-weight: lighter;
    font-size: 0.8rem;
}
h2::after {
    content: " h2";
}
.card-title::after {
    content: "";
}
h3::after {
    content: " h3";
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}
code {
    background-color: var(--xc-code-background-color);
    padding: 2px;
    border-radius: 4px;
}
pre {
    border: 1px solid gray;
    padding: 8px;
    flex-direction: column;
    display: flex;
    background-color: var(--xc-code-background-color);
    border-radius: 0.5rem;
    white-space: pre;
    text-wrap: wrap; /* 这一行必须在最后 */
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}
p {
    word-break: break-word;
    line-height: 1.86;
    margin-bottom: 1.2rem;
}
ul p, ol p, li p {
    margin-bottom: 0;
}
pre code {
    background-color: unset;
}
pre,
table {
    max-width: 100%;
    overflow-x: auto;
}
/* table {
    display: block;
    white-space: nowrap;
} */
blockquote {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-width: 4px;
    border-left-color: gray;
    border-left-style: solid;
}
blockquote > :last-child {
    margin-bottom: 0;
}
.blockquote_callout > :first-child {
    margin-top: 1rem;
}
/* div > :last-child {
    margin-bottom: 0;
} */
img, video {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    height: auto;
    margin-inline: auto;
}
/* * :not(h1) {
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
} */

/* Code below only works for specific Typecho themes */
/* Site wide style */
.footer-link {
    text-decoration: none;
    color: rgba(var(--bs-link-color-rgb), 75%);
}

#article-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "header"
    "table_of_content"
    "post";
}

@media (min-width: 993px) { /* 如需修改，同步修改 page.js */
    #article-container {
        display: grid;
        gap: 1rem 2rem;
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto 1fr;
        grid-template-areas: 
        "header table_of_content"
        "post   table_of_content";
    }
}

.crumbs_patch {
    color: rgba(var(--bs-body-color-rgb), 60%);
}
.crumbs_patch a {
    color: rgba(var(--bs-body-color-rgb), 80%);
    text-decoration: none;
}
.crumbs_patch {
    margin-top: 0.5rem;
}


/* post.php and page.php specific */
.comment-list {
    list-style: none;
}
/** github style alert **/
.blockquote_note {
    border-left-color: #2E67D3;
}
.blockquote_note::before {
    content: "ℹ️ Note";
    color: #2E67D3;
    font-weight: bold;
}
.blockquote_tip {
    border-left-color: #428646;
}
.blockquote_tip::before {
    content: "💡 Tip";
    color: #428646;
    font-weight: bold;
}
.blockquote_important {
    border-left-color: #7B52D7;
}
.blockquote_important::before {
    content: "🔔 Important";
    color: #7B52D7;
    font-weight: bold;
}
.blockquote_warning {
    border-left-color: #936921;
}
.blockquote_warning::before {
    content: "⚠️ Warning";
    color: #936921;
    font-weight: bold;
}
.blockquote_caution {
    border-left-color: #BE3536;
}
.blockquote_caution::before {
    content: "⛔️ Caution";
    color: #BE3536;
    font-weight: bold;
}

.post-properties-container {
    display: flex;
    flex-wrap: wrap;
    color: rgba(var(--bs-body-color-rgb), 80%);
}
.post-properties-container > * {
    flex-shrink: 0;
    margin: 0.2rem 0;
}

.content-container {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* 兜底安全网 */
    max-width: 1000px;
    grid-area: post;
    min-width: 0;
    /* 允许 Grid 子项在必要时收缩 */
    margin-inline: auto;
}
.entry-header {
    grid-area: header;
}
.entry-content {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    /* 英文单词自动连字符 */
}

/** TOC **/
.toc-container {
    grid-column: 1 / -1;
    grid-row: auto;
    grid-area: table_of_content;

    font-size: 0.8rem;
    position: static;
    max-height: none;
    overflow: visible;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}
@media (min-width: 993px) { /* 如需修改，同步修改 page.js */
    .toc-container {
        max-width: 300px;
        position: relative;
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        min-width: 0;
        /* 防止目录自身内容撑开网格 */
    }
    .toc-only-container {
        height: 100%;
    }
    #post-toc {
        position: sticky;
        top: 2rem;
        max-height: calc(100vh - 4rem);
        overflow: auto;
    }
}
.toc-container-no-float {
    margin: 1rem auto;
    border-block-end: 1px solid rgba(var(--bs-body-color-rgb), 10%);
    padding-block-end: 2rem;
    max-width: 300px;
}
.post-tags {
    padding: 0 0.5rem;
}
.post-tags > p {
    padding-block-start: 0.5rem;
}
/* .toc-only-container:has(>div#post-toc>ul:empty) {
    display: none;
} */
.toc-only-container {
    display: none;
}
#post-toc {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: 
        "title toggle"
        "toc toc"
    ;
    column-gap: 1rem;
}
#post-toc > ul {
    margin-bottom: 0;
    padding: 0.5rem 0;
    grid-area: toc;
}
.post-sidebar-title {
    padding-inline-start: 0.5rem;
    grid-area: title;
}
#post-toc a {
    display: block;
    text-decoration: none;
    color: rgba(var(--bs-body-color-rgb), 0.75);
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
}
#post-toc a.active {
    background-color: rgba(var(--bs-body-color-rgb), .08) !important;
    color: rgba(var(--bs-body-color-rgb), 1) !important;
}
#post-toc a:hover, .post-toc-toggle:hover {
    background-color: rgba(var(--bs-body-color-rgb), .05);
    color: rgba(var(--bs-body-color-rgb), 0.9);
}
#post-toc a:active, .post-toc-toggle:active {
    background-color: rgba(var(--bs-body-color-rgb), .1) !important;
    color: rgba(var(--bs-body-color-rgb), 1) !important;
    border-color: transparent !important;
}
.post-toc-toggle {
    transition: none;
    font-size: 0.6rem;
    padding: 0.2rem;
    grid-area: toggle;
}
.post-content-info-hr {
    margin: 1rem 0;
}
.post-tags > p:last-child {
    margin-bottom: 0;
}

/* index.php specific */

#front {
    max-width: 1000px;
}

/** 默认单列 **/
#articles {
    /* column-count: 1; */
    display: grid;
    grid-template-columns: 1fr;
    /* grid-column-gap: 1.5rem; */
    /* row-gap: 1.5rem */
    gap: 1.5rem;
}
/** 在宽度大于 991px 且文章数量超过 2 篇时显示两列 **/
@media (min-width: 992px) {
    #articles:has(:nth-child(4)) {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 992px) and (min-width: 500px) {
    body {
        max-width: calc(100vw - (100vw - 500px) * 0.2);
    }
}

.article-tile-container {
    position: relative;
    /* border-color: rgba(var(--bs-card-border-color), 20%); */
    box-shadow: 0px 0px 40px rgba(var(--bs-body-color-rgb), 12%);
    border-width: 1px;
    border-color: rgba(var(--bs-body-color-rgb), 0%);
    border-radius: 1.3em;
}
[data-bs-theme=dark] .article-tile-container {
    border-width: 1px;
    border-color: rgba(var(--bs-body-color-rgb), 20%);
    box-shadow: none;
}
.article-property-pill {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    border-width: 0px;
    box-shadow: 0px 0px 20px rgba(var(--bs-body-color-rgb), 10%);
    display: inline-flex;
    align-items: center;
    cursor: default;
}
.article-property-pill-container {
    display: inline-flex;
    /* float: left; */
    align-items: center;
    text-decoration: none;
    /* margin-left: -0.75rem; */
}
.article-property-pill-container > * {
    text-decoration: none;
    color: unset;
}
.article-property-pill-container svg {
    flex-shrink: 0;
}
.article-tile-header {
    display: flex;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 16px;
    margin: 0.4em;
}
.article-tile-summary, .article-tile-summary-text {
    line-height: 1.6;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    flex-grow: 1;
}
.article-tile-summary-text {
    overflow: hidden;
    color: rgba(var(--bs-body-color-rgb), 60%);
}
.article-tile-content, .article-tile-url {
    display: flex;
    height: 100%;
    flex-direction: column;
    text-decoration: none;
    font-size: 0.9rem;
    color: unset;
}
.article-tile-title {
    font-size: 1.6rem;
}
.article-tile-date {
    margin-top: 0.5rem;
    color: rgba(var(--bs-body-color-rgb), 80%);
}
.article-tile-property {
    color: rgba(var(--bs-body-color-rgb), 80%);
}
.article-tile-property-enum > * {
    color: inherit;
    text-decoration: none;
}

/* katex specific */

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding: .75em;
    border: 1px solid rgba(var(--bs-body-color-rgb), 20%);
    border-radius: .5rem;
    max-width: 100%;
    box-sizing: border-box;
    scrollbar-gutter: stable;
}
/* span:has(.katex-display)::before {
    content: "Scrollable";
    font-size: 80%;
    color: rgba(var(--bs-body-color-rgb), 50%);
    text-align: left;
    display: inline-flex;
    position: sticky;
    left: 0;
} */