/* ============================================================
 * Daily — 单栏极简自适应主题
 * ============================================================ */

/* ---------- 1. 主题变量 ---------- */
:root {
    /* 颜色 */
    --bg:          #ffffff;
    --bg-soft:     #fafafa;
    --bg-card:     #ffffff;
    --fg:          #2c2f33;
    --fg-soft:     #555b66;
    --fg-muted:    #a3a8b3;
    --border:      #ececec;
    --border-soft: #f0f0f0;
    --accent:      #2c3e50;
    --accent-soft: #4f6079;
    --link:        #2c3e50;
    --link-hover:  #1f2d3d;
    --highlight:   #fbf3d4;

    --code-bg:     #f6f8fa;
    --code-border: #e9ecef;
    --kbd-bg:      #fafbfc;
    --kbd-border:  #d1d5da;

    --traffic-red:    #ff5f56;
    --traffic-yellow: #ffbd2e;
    --traffic-green:  #27c93f;

    /* 间距 / 字体 */
    --content-width: 720px;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 5rem;

    --font-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', '宋体', serif;
    --font-sans:  'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono',
                  Menlo, monospace;

    --radius:    6px;
    --radius-sm: 4px;

    --duration:  180ms;
    --easing:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 2. 暗色覆盖（跟随系统 / 手动 data-theme） ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:          #16181d;
        --bg-soft:     #1d2025;
        --bg-card:     #1d2025;
        --fg:          #e6e8ea;
        --fg-soft:     #b1b6be;
        --fg-muted:    #7a8089;
        --border:      #2a2e35;
        --border-soft: #23262c;
        --accent:      #d8dee9;
        --accent-soft: #b3bccd;
        --link:        #d8dee9;
        --link-hover:  #ffffff;
        --highlight:   #443a1d;

        --code-bg:     #21252b;
        --code-border: #2a2e35;
        --kbd-bg:      #2a2e35;
        --kbd-border:  #3a3f47;

        --traffic-red:    #ff6b62;
        --traffic-yellow: #ffc44d;
        --traffic-green:  #43d967;
    }
}

:root[data-theme="dark"] {
    --bg:          #16181d;
    --bg-soft:     #1d2025;
    --bg-card:     #1d2025;
    --fg:          #e6e8ea;
    --fg-soft:     #b1b6be;
    --fg-muted:    #7a8089;
    --border:      #2a2e35;
    --border-soft: #23262c;
    --accent:      #d8dee9;
    --accent-soft: #b3bccd;
    --link:        #d8dee9;
    --link-hover:  #ffffff;
    --highlight:   #443a1d;

    --code-bg:     #21252b;
    --code-border: #2a2e35;
    --kbd-bg:      #2a2e35;
    --kbd-border:  #3a3f47;

    --traffic-red:    #ff6b62;
    --traffic-yellow: #ffc44d;
    --traffic-green:  #43d967;
}

/* ---------- 3. Reset + 基础排版 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.8;
    color: var(--fg);
    background: var(--bg);
    word-break: break-word;
    transition: background-color var(--duration) var(--easing),
                color var(--duration) var(--easing);
}
body.force-dark { color-scheme: dark; }
img, video, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; transition: color var(--duration) var(--easing); }
a:hover { color: var(--link-hover); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
::selection { background: var(--highlight); color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--fg-muted) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--fg-muted); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- 4. 单栏外壳 ---------- */
.page-wrap {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-body {
    flex: 1 0 auto;
    padding: var(--space-5) 0 var(--space-6);
}

/* ---------- 5. 顶部 Head ---------- */
.site-head {
    padding: var(--space-5) 0 var(--space-3);
    text-align: center;
}

.traffic-lights {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-3);
}
.traffic-lights .dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: opacity var(--duration) var(--easing);
}
.traffic-lights .dot:hover { opacity: 0.75; }
.traffic-lights .dot-red    { background: var(--traffic-red); }
.traffic-lights .dot-yellow { background: var(--traffic-yellow); }
.traffic-lights .dot-green  { background: var(--traffic-green); }

.site-head__inner {
    margin-bottom: var(--space-3);
}
.site-title {
    display: inline-block;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-decoration: none;
    transition: opacity var(--duration) var(--easing);
}
.site-title:hover { opacity: 0.7; }
.site-subtitle {
    margin: var(--space-1) 0 0;
    font-size: 0.95rem;
    color: var(--fg-muted);
    letter-spacing: 0.05em;
}

/* 菜单 */
.site-menu { margin-top: var(--space-2); }
.site-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}
.site-menu__item { margin: 0; }
.site-menu__link {
    font-size: 0.95rem;
    color: var(--fg-soft);
    position: relative;
    padding: 4px 2px;
}
.site-menu__link::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transform: translateX(-50%);
    transition: width var(--duration) var(--easing);
}
.site-menu__link:hover,
.site-menu__link.is-active { color: var(--accent); }
.site-menu__link:hover::after,
.site-menu__link.is-active::after { width: 100%; }

/* ---------- 6. 文章列表 ---------- */
.post-list {
    margin-top: var(--space-4);
}
.post-list__item {
    border-bottom: 1px dashed var(--border-soft);
}
.post-list__item:last-child { border-bottom: 0; }

.post-list__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    color: var(--fg);
    transition: color var(--duration) var(--easing),
                padding var(--duration) var(--easing);
}
.post-list__link:hover {
    color: var(--link-hover);
    padding-left: 6px;
}
.post-list__title {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-list__date {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- 7. 页面标题（归档 / 分类 / 标签 / about） ---------- */
.page-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    margin: var(--space-4) 0 var(--space-3);
    letter-spacing: 0.02em;
}
.page__body { color: var(--fg-soft); }

/* ---------- 8. 文章页 ---------- */
.post__head { margin-bottom: var(--space-4); }
.post__title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    color: var(--accent);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.post__head-meta {
    font-size: 0.9rem;
    color: var(--fg-muted);
}
.post__head-meta .post__meta-split { margin: 0 0.4em; color: var(--fg-muted); }

.post__body {
    color: var(--fg);
    font-size: 1rem;
}
.post__body > * { margin: var(--space-3) 0; }

/* Markdown 渲染 */
.post__body h1, .post__body h2, .post__body h3,
.post__body h4, .post__body h5, .post__body h6 {
    font-family: var(--font-serif);
    color: var(--accent);
    line-height: 1.4;
    margin: var(--space-5) 0 var(--space-2);
    font-weight: 700;
}
.post__body h1 { font-size: 1.8rem; }
.post__body h2 {
    font-size: 1.5rem;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--border);
}
.post__body h3 { font-size: 1.25rem; }
.post__body h4 { font-size: 1.1rem; }
.post__body h5 { font-size: 1rem; }
.post__body h6 { font-size: 0.95rem; color: var(--fg-soft); }

.post__body p { margin: 1em 0; color: var(--fg); }

.post__body blockquote {
    margin: var(--space-3) 0;
    padding: 0.6em 1em;
    color: var(--fg-soft);
    border-left: 3px solid var(--border);
    background: var(--bg-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post__body blockquote p { margin: 0.4em 0; }

.post__body code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    background: var(--code-bg);
    color: var(--fg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-sm);
}
.post__body pre {
    margin: var(--space-3) 0;
    padding: var(--space-2) var(--space-3);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
}
.post__body pre code {
    padding: 0;
    background: transparent;
    border: 0;
    font-size: inherit;
    color: inherit;
}
.post__body kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--kbd-bg);
    border: 1px solid var(--kbd-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85em;
    box-shadow: 0 1px 0 var(--kbd-border);
}

.post__body img {
    display: block;
    margin: var(--space-3) auto;
    border-radius: var(--radius);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
.post__body figure { margin: var(--space-3) 0; text-align: center; }
.post__body figcaption { color: var(--fg-muted); font-size: 0.85rem; margin-top: 0.5em; }

.post__body table {
    width: 100%;
    margin: var(--space-3) 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.post__body th, .post__body td {
    padding: 0.55em 0.9em;
    border: 1px solid var(--border);
    text-align: left;
}
.post__body th {
    background: var(--bg-soft);
    font-weight: 600;
}

.post__body ul, .post__body ol {
    margin: 1em 0;
    padding-left: 1.6em;
}
.post__body li { margin: 0.35em 0; }

.post__body a {
    border-bottom: 1px solid var(--border);
    transition: border-color var(--duration) var(--easing);
}
.post__body a:hover { border-bottom-color: var(--accent); }

/* 文章底部 meta（分类 / 标签 / 浏览次数） */
.post__meta {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    font-size: 0.9rem;
    color: var(--fg-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: baseline;
}
.post__meta-item { display: inline-flex; align-items: baseline; gap: 0.35em; }
.post__meta-label { color: var(--fg-muted); }
.post__meta-link { color: var(--fg-soft); }
.post__meta-link:hover { color: var(--accent); border-bottom: 1px solid var(--accent); }
.post__meta-split { color: var(--fg-muted); margin: 0 0.25em; }

/* ---------- 9. 归档页 ---------- */
.archive__year { margin-top: var(--space-4); }
.archive__year:first-child { margin-top: 0; }
.archive__year-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 var(--space-2);
}
.archive__list { list-style: none; margin: 0; padding: 0; }
.archive__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px dashed var(--border-soft);
}
.archive__item:last-child { border-bottom: 0; }
.archive__date {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
.archive__link {
    flex: 1 1 auto;
    color: var(--fg);
}
.archive__link:hover { color: var(--link-hover); }

/* ---------- 10. 分类 / 标签云 ---------- */
.taxonomy {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.taxonomy__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.4em 0.9em;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--fg-soft);
    font-size: 0.9rem;
    transition: all var(--duration) var(--easing);
}
.taxonomy__chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-soft);
}
.taxonomy__count {
    color: var(--fg-muted);
    font-size: 0.8em;
    font-family: var(--font-mono);
}

/* ---------- 11. 分页 ---------- */
.pagination {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    padding: 0;
}
.pagination__item { margin: 0; }
.pagination__item a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.8em;
    font-size: 0.9rem;
    color: var(--fg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--duration) var(--easing);
}
.pagination__item a:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.pagination__disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.4em 0.8em;
    font-size: 0.9rem;
    color: var(--fg-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}
.pagination__info { color: var(--fg-muted); }

/* ---------- 12. footer ---------- */
.site-footer {
    margin-top: var(--space-6);
    padding: var(--space-4) 0 var(--space-5);
    border-top: 1px solid var(--border-soft);
    color: var(--fg-muted);
    font-size: 0.85rem;
}
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
}
.site-footer__list li { display: inline-flex; align-items: center; gap: 0.3em; }
.site-footer__link {
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.site-footer__link:hover { color: var(--accent); }
.site-footer__badge { vertical-align: -2px; }
.busuanzi { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 暗色切换按钮 */
.theme-toggle {
    position: fixed;
    right: var(--space-3);
    bottom: var(--space-3);
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--fg-soft);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform var(--duration) var(--easing),
                color var(--duration) var(--easing),
                border-color var(--duration) var(--easing),
                background-color var(--duration) var(--easing);
    z-index: 10;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle[hidden] { display: none; }
/* 默认 light 模式：显示太阳，隐藏月亮 */
:root:not([data-theme="dark"]) .icon-sun  { display: inline-block; }
:root:not([data-theme="dark"]) .icon-moon { display: none; }
/* dark 模式：显示月亮 */
:root[data-theme="dark"] .icon-sun  { display: none; }
:root[data-theme="dark"] .icon-moon { display: inline-block; }

/* ---------- 13. 杂项 ---------- */
.empty {
    text-align: center;
    color: var(--fg-muted);
    padding: var(--space-5) 0;
}

/* ---------- 14. 响应式 ---------- */

/* ≤ 1024px：repo 自动从 720px 收回 */
@media (max-width: 1024px) {
    :root { --content-width: 92vw; }
}

/* ≤ 768px：横向空间更紧、字号缩 */
@media (max-width: 768px) {
    body { font-size: 15.5px; }
    .page-wrap { padding: 0 var(--space-2); }
    .site-head { padding: var(--space-4) 0 var(--space-2); }
    .post-list__link { gap: var(--space-1); }
    .post-list__title { font-size: 1rem; }
    .post-list__date { font-size: 0.8rem; }
    .post__meta { flex-direction: column; gap: var(--space-1); }
    .theme-toggle { right: var(--space-2); bottom: var(--space-2); }
}

/* ≤ 480px：标题更小，列表更紧凑 */
@media (max-width: 480px) {
    .site-title { font-size: 2.2rem; }
    .post-list__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: var(--space-2) 0;
    }
    .post__title { font-size: 1.6rem; }
    .site-menu__list { gap: var(--space-2); }
    .pagination { flex-direction: column; }
}

/* ---------- 15. 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}