/* ===== Blog Frontend Styles ===== */

/* Layout */
.blog-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px clamp(12px, 3vw, 20px);
}
.front-page .blog-container {
    min-height: 100vh;
    background: var(--color-bg-app);
}
.post-page .blog-container {
    min-height: 100vh;
    background: var(--color-bg-app);
    flex: 1 1 auto;
    order: 2;
    max-width: 960px;
    min-width: 0;
}

/* Post page shell — three-column flex (nav | container | toc). Container
   grows from 720→960px as viewport widens. Sidebars use position: sticky so
   they follow the article and naturally release at the footer. */
.post-page-shell {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: flex-start;
    padding: 0 clamp(8px, 1.5vw, 24px);
    max-width: 1600px;
    margin: 0 auto;
}
.blog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border-strong);
    margin-bottom: 30px;
}
.blog-header h1 {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}
.blog-header h1 a { color: var(--color-text-primary) }
.blog-header h1 a:hover { color: var(--color-primary) }

/* Language switcher */
.front-header-tools {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}
.lang-switcher {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    outline: none;
}
.lang-switcher:hover { border-color: var(--color-primary) }
.lang-switcher:focus { border-color: var(--color-primary) }

/* Visitor theme preferences */
.front-theme-toggle,
.front-theme-close,
.front-theme-row-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    cursor: pointer;
}
.front-theme-toggle {
    width: 34px;
    height: 34px;
}
.front-theme-toggle:hover,
.front-theme-toggle[aria-expanded="true"],
.front-theme-close:hover,
.front-theme-row-reset:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.front-theme-toggle svg,
.front-theme-close svg,
.front-theme-row-reset svg {
    width: 18px;
    height: 18px;
}
.front-theme-panel[hidden] { display: none }
.front-theme-panel {
    position: fixed;
    top: clamp(56px, 8vh, 86px);
    right: clamp(12px, 3vw, 24px);
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(420px, calc(100vw - 24px));
    max-height: min(74vh, 680px);
    padding: 14px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: 8px;
    box-shadow: var(--box-shadow);
}
.front-theme-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.front-theme-panel-head h2 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 1.3;
}
.front-theme-close,
.front-theme-row-reset {
    width: 30px;
    height: 30px;
}
.front-theme-list {
    overflow-y: auto;
    padding-right: 2px;
}
.front-theme-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(112px, 176px) 30px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid var(--color-border);
}
.front-theme-row:first-child { border-top: none }
.front-theme-row-meta {
    min-width: 0;
    line-height: 1.25;
}
.front-theme-label,
.front-theme-key {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.front-theme-label {
    font-size: 13px;
    color: var(--color-text-primary);
}
.front-theme-key {
    font-size: 11px;
    color: var(--color-text-tertiary);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.front-theme-picker {
    width: 34px;
    height: 30px;
    padding: 0;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    cursor: pointer;
}
.front-theme-text {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: 4px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
}
.front-theme-text:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.front-theme-text.invalid {
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.front-theme-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
}
.front-theme-save,
.front-theme-clear {
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.front-theme-save {
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary);
}
.front-theme-save:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.front-theme-clear {
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-strong);
}
.front-theme-clear:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.front-theme-status {
    min-height: 18px;
    padding-top: 6px;
    color: var(--color-success);
    font-size: 12px;
    text-align: right;
}
.front-theme-status.is-error { color: var(--color-danger) }

/* Tag-filter banner (?tag=xxx) */
.tag-filter-banner {
    max-width: 720px;
    margin: 0 auto 14px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}
.tag-filter-banner[hidden] { display: none }
.tag-filter-name {
    font-weight: 700;
    color: #2C3A50;
    padding: 2px 8px;
    background: var(--color-bg-surface);
    border: 1.5px solid var(--tag-c1);
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--tag-c1);
    font-size: 12.5px;
}
.tag-filter-clear {
    margin-left: auto;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: #8F8579;
    cursor: pointer;
    font-size: 13px;
    transition: color .15s, border-color .15s;
}
.tag-filter-clear:hover { color: var(--color-text-secondary); border-color: var(--paper-500) }

/* Article list */
.article-list {
    max-width: 720px;
    margin: 0 auto;
    list-style: none;
}
.article-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.article-item:last-child { border-bottom: none }
.article-item h2 {
    line-height: 1.28;
    margin-bottom: 2px;
}
.article-item h2 a { color: var(--color-text-primary) }
.article-item h2 a:hover { color: var(--color-primary) }
.article-item .meta {
    font-size: 14px;
    color: var(--color-text-tertiary);
    margin-bottom: 2px;
}
.article-item .summary {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.45;
}

/* Article page */
.post-header { margin-bottom: 30px }
.post-header h1 {
    font-size: clamp(30px, 5vw, 42px);
    text-align: left;
    line-height: 1.2;
    margin-bottom: 14px;
}
.post-meta {
    font-size: 14px;
    color: var(--color-text-tertiary);
}
.post-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 10px;
    vertical-align: middle;
}
.post-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-hover);
    border-radius: 10px;
}
.post-summary {
    margin-top: 14px;
    padding: 10px 14px;
    background-color: var(--color-bg-subtle);
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-secondary);
    font-size: 15px;
    line-height: 1.6;
}
.post-content {
    line-height: 1.8;
    font-size: 16px;
}
.post-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-strong);
}
.post-footer a { color: var(--color-primary) }
.post-footer a:hover { text-decoration: underline }

/* Transitional safeguard — legacy posts/*.html generated before
   .post-page-shell wrapper render .post-toc / .post-nav as direct body
   children. Without the flex shell parent, the sticky-flex layout below
   would break catastrophically. Hide them until the user re-runs the
   admin「扫描已发表」, at which point the new template adds the shell
   wrapper and these selectors no longer match. */
body.post-page > .post-toc,
body.post-page > .post-nav { display: none }

/* Post TOC — wide: sticky right column in .post-page-shell flex.
   Narrow (≤1280px): collapses to floating bottom-right button + popup. */
.post-toc {
    /* Symmetric with .post-nav: 220px at the 1281px entry point,
       240px at 1440px, and 260px at 1600px. */
    flex: 0 0 clamp(220px, calc(12.5vw + 60px), 260px);
    order: 3;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.8;
    border-left: 2px solid var(--color-border);
    padding-left: 12px;
}
.post-toc .toc-toggle { display: none }
.post-toc .toc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}
.post-toc ul { margin: 0; padding: 0 }
.post-toc li a {
    display: block;
    padding: 2px 0;
    color: var(--color-text-tertiary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}
.post-toc li a:hover { color: var(--color-text-primary) }
.post-toc li a.active { color: var(--color-primary) }
.post-toc .toc-level-3 { padding-left: 12px }
.post-toc .toc-level-4 { padding-left: 24px }

@media (max-width: 1280px) {
    .post-page-shell {
        display: block;
        padding: 0;
        max-width: none;
    }
    .post-page .blog-container {
        max-width: 720px;
    }
    .post-toc {
        position: fixed;
        top: auto;
        left: auto;
        bottom: 24px;
        right: 24px;
        flex: none;
        width: auto;
        max-height: none;
        overflow: visible;
        border: none;
        padding: 0;
    }
    .post-toc .toc-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        background: var(--color-bg-surface);
        color: var(--color-primary);
        border: 1px solid var(--color-border-strong);
        box-shadow: var(--box-shadow);
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .post-toc .toc-toggle:hover { background: var(--color-bg-subtle) }
    .post-toc .toc-toggle svg { width: 22px; height: 22px }
    .post-toc .toc-panel {
        display: none;
        position: absolute;
        bottom: 56px;
        right: 0;
        width: min(260px, calc(100vw - 48px));
        max-height: 60vh;
        overflow-y: auto;
        padding: 14px 18px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border-strong);
        border-radius: 8px;
        box-shadow: var(--box-shadow);
    }
    .post-toc.open .toc-panel { display: block }
    /* Legacy markup (pre-regen posts) has title/ul as direct children — hide
       them on narrow viewports since the toggle/panel are absent. Re-scan
       admin posts to upgrade to the collapsible floating button. */
    .post-toc > .toc-title,
    .post-toc > ul { display: none }
}

/* Post Nav — symmetric left counterpart to .post-toc. Tags / archive / latest.
   Wide: sticky left column in .post-page-shell flex with soft card bg.
   Narrow (≤1280px): collapses to floating bottom-left button + popup. */
.post-nav {
    /* Symmetric with .post-toc: 220px at the 1281px entry point,
       240px at 1440px, and 260px at 1600px. */
    flex: 0 0 clamp(220px, calc(12.5vw + 60px), 260px);
    order: 1;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.5;
    padding: 14px 12px 14px 14px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.post-nav .nav-toggle { display: none }
.post-nav .nav-section + .nav-section { margin-top: 22px }
/* A1 — section title: left accent bar (雾蓝), slightly larger + tighter letter-spacing */
.post-nav .nav-section-title {
    margin: 0 0 10px;
    padding-left: 2px;
    border-bottom: 1px dashed var(--tag-c1);
    font-size: 14px;
    font-weight: 600;
    color: #2C3A50;
    letter-spacing: 0.02em;
}
.post-nav ul { margin: 0; padding: 0; list-style: none }
.post-nav .nav-count {
    color: #8F8579;
    font-size: 11px;
    font-weight: 500;
}

/* Module 1 — tags chip cloud (brutalist offset shadow, multicolor Morandi).
   Color is set via .tag-c1..c6 on each <a>; border + box-shadow use
   currentColor so one color drives all three. */
.post-nav .nav-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    padding-bottom: 4px;
}
.post-nav .nav-tag-list a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    color: var(--tag-c1);
    background: var(--color-bg-surface);
    border: 2px solid currentColor;
    border-radius: 4px;
    box-shadow: 3px 3px 0 currentColor;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.post-nav .nav-tag-list a:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 currentColor;
}
.post-nav .nav-tag-list a:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 currentColor;
}
/* Active tag on /tag.html — inverted: filled background in tag color, white text. */
.post-nav .nav-tag-list a.current {
    color: var(--color-primary-text);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0,0,0,.15);
}
.post-nav .nav-tag-list a.current .nav-count { color: var(--color-primary-text); opacity: .85 }
.post-nav .nav-tag-list a.current.tag-c1 { background: var(--tag-c1); border-color: var(--tag-c1) }
.post-nav .nav-tag-list a.current.tag-c2 { background: var(--tag-c2); border-color: var(--tag-c2) }
.post-nav .nav-tag-list a.current.tag-c3 { background: var(--tag-c3); border-color: var(--tag-c3) }
.post-nav .nav-tag-list a.current.tag-c4 { background: var(--tag-c4); border-color: var(--tag-c4) }
.post-nav .nav-tag-list a.current.tag-c5 { background: var(--tag-c5); border-color: var(--tag-c5) }
.post-nav .nav-tag-list a.current.tag-c6 { background: var(--tag-c6); border-color: var(--tag-c6) }
.post-nav .nav-tag-list a.tag-c1 { color: var(--tag-c1) } /* 雾蓝 fog blue */
.post-nav .nav-tag-list a.tag-c2 { color: var(--tag-c2) } /* 藕粉 lotus */
.post-nav .nav-tag-list a.tag-c3 { color: var(--tag-c3) } /* 抹茶 matcha */
.post-nav .nav-tag-list a.tag-c4 { color: var(--tag-c4) } /* 奶咖 latte */
.post-nav .nav-tag-list a.tag-c5 { color: var(--tag-c5) } /* 雾青 olive-teal */
.post-nav .nav-tag-list a.tag-c6 { color: var(--tag-c6) } /* 灰紫 mauve */
.post-nav .nav-tag-list .nav-count { color: inherit; opacity: 0.65; font-weight: 600 }

/* Module 2 — archive (year/month) collapsible tree */
.post-nav .archive-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.post-nav .archive-toggle:hover { color: var(--color-primary) }
/* C — SVG chevron-right; rotates 90° to chevron-down when group is .open */
.post-nav .archive-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: var(--color-text-tertiary);
    transition: transform .2s ease;
}
.post-nav .archive-caret svg { width: 100%; height: 100%; display: block }
.post-nav .archive-group.open .archive-caret { transform: rotate(90deg) }
.post-nav .archive-toggle .nav-count { margin-left: auto }
.post-nav .archive-children {
    padding: 2px 0 4px 16px;
    margin-left: 5px;
    border-left: 1px dashed var(--color-border-strong);
}
.post-nav .archive-children a {
    display: block;
    padding: 2px 0;
    color: var(--color-text-tertiary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s;
}
.post-nav .archive-children a:hover { color: var(--color-text-primary) }
.post-nav .archive-children[hidden] { display: none }

/* Module 3 — latest posts */
.post-nav .nav-latest-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}
.post-nav .nav-latest-list li:last-child { border-bottom: none }
.post-nav .nav-latest-list a {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
}
.post-nav .nav-latest-list .latest-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    transition: color .15s;
}
.post-nav .nav-latest-list a:hover .latest-title { color: var(--color-primary) }
.post-nav .nav-latest-list time {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

@media (max-width: 1280px) {
    .post-nav {
        position: fixed;
        top: auto;
        right: auto;
        bottom: 24px;
        left: 24px;
        flex: none;
        width: auto;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    .post-nav .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        background: var(--color-bg-surface);
        color: var(--color-primary);
        border: 1px solid var(--color-border-strong);
        box-shadow: var(--box-shadow);
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .post-nav .nav-toggle:hover { background: var(--color-bg-hover) }
    .post-nav .nav-toggle svg { width: 22px; height: 22px }
    .post-nav .nav-panel {
        display: none;
        position: absolute;
        bottom: 56px;
        left: 0;
        width: min(280px, calc(100vw - 48px));
        max-height: 60vh;
        overflow-y: auto;
        padding: 14px 18px;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border-strong);
        border-radius: 8px;
        box-shadow: var(--box-shadow);
    }
    .post-nav.open .nav-panel { display: block }
}