/* Mogged Sports - Unified AOT Production Stylesheet
   Combines Global Defense Layer & Broadsheet News Layout (NYT/FT Style)
   Strict compliance with Fighter 7 Size Limit (<= 100KB) and Zero Play CDN rule. */

:root {
    --color-bg: #f9f9f8;
    --color-text: #111111;
    --color-summary-text: #333333;
    --color-meta: #666666;
    --color-border: #e5e5e5;
    --color-entity: #f0f0f0;
    --color-entity-border: #e0e0e0;
    --color-panel-bg: #ffffff;
    /* 修复：补充 preview.html 所需的管理后台安全变量 */
    --color-surface: #ffffff;
    --color-text-main: #111111;
    --color-accent: #58a6ff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #111111;
        --color-text: #f0f0f0;
        --color-summary-text: #cccccc;
        --color-meta: #b0b0b0;
        --color-border: #2d2d2d;
        --color-entity: #1e1e1e;
        --color-entity-border: #333333;
        --color-panel-bg: #1a1a1a;
        /* 修复：补充 preview.html 所需的管理后台安全变量 (暗黑模式) */
        --color-surface: #161b22;
        --color-text-main: #c9d1d9;
        --color-accent: #58a6ff;
    }
}

/* ==========================================================================
   1. Global Defense & Reset Layer (抗物理拉伸变形)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
p, span, h1, h2, h3, h4, article {
    overflow-wrap: anywhere;
}

/* ==========================================================================
   2. Broadsheet Masthead & Typography (纸媒社论美学)
   ========================================================================== */
.masthead {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
    border-bottom: 4px solid var(--color-text);
    text-align: center;
}
.masthead h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
.masthead p {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-meta);
    font-weight: 600;
}

/* Container */
.feed-container, .article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* ==========================================================================
   3. News Feed Cards & Detail Layout (一文五讯排版)
   ========================================================================== */
.feed-card {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.feed-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.meta-data {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-meta);
    margin-bottom: 0.75rem;
}
.meta-data time { display: flex; align-items: center; }
.meta-data time::before {
    content: "■";
    font-size: 0.5rem;
    margin-right: 0.4rem;
    color: var(--color-text);
    speak: none;
}

.headline {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    line-height: 1.25;
    font-weight: 800;
    margin-bottom: 1rem;
}
.headline a { color: var(--color-text); text-decoration: none; }
.headline a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.headline a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* 100词空间锁死防线：Jinja2切片加前端多行文本截断双保险 */
.summary {
    font-size: 0.95rem;
    color: var(--color-summary-text);
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 深度详情页专属：一文五讯视觉层级 */
.prose-h2 {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 1.5rem 0 0.75rem;
    border-left: 3px solid var(--color-text);
    padding-left: 0.5rem;
}
.prose-h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-meta);
    margin: 1rem 0 0.5rem;
}

/* ==========================================================================
   4. Entity Graph & Tags (知识图谱标签)
   ========================================================================== */
.entity-graph { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.qid-tag {
    background-color: var(--color-entity);
    color: var(--color-meta);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--color-entity-border);
}
.qid-tag:hover, .qid-tag:focus {
    color: var(--color-text);
    border-color: var(--color-meta);
    outline: 2px solid var(--color-text);
    outline-offset: 1px;
}

/* ==========================================================================
   5. Admin Preview Dashboard (后台审核冷峻暗黑极客风)
   ========================================================================== */
.admin-container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.accordion-item {
    background-color: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    margin-bottom: 1rem;
    border-radius: 4px;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: var(--color-entity);
}
.accordion-header:focus {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
}

/* ==========================================================================
   6. Accessibility & Utilities */
.skip-link {
    position: absolute; top: -40px; left: 0; background: var(--color-text);
    color: var(--color-bg); padding: 8px 12px; z-index: 100; transition: top 0.2s;
}
.skip-link:focus { top: 0; }
.feed-card.empty-state { text-align: center; padding: 3rem 1rem; color: var(--color-meta); }

@media (max-width: 600px) {
    .masthead { padding: 2rem 1rem 1rem; }
    .masthead h1 { font-size: 1.75rem; }
    .headline { font-size: 1.25rem; }
    .feed-container, .article-container { padding: 1.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}