/* ============================================================
   article.css — 万象生活 · 图文详情页
   用在 /article/{id} 上（全站唯一的文档形态详情页）。

   这份样式【逐字来自 design/prototype 的内联 <style>】，不是重新写的：
   原型那几页各自把样式写在页内（它们明确不引 app.css —— 那份带
   html,body{overflow:hidden}，会杀死阅读页的滚动），这里只是把它
   搬成独立文件，好让浏览器缓存它。

   与原型保持一致是硬要求（见 .scratch/prototype-parity/spec.md）：
   改这里的值等于改设计稿，先改原型或先在票面记差异。
   ============================================================ */

/* ===== T1 设计令牌 · news.html / app.css / article.html 三处必须一致（忽略行首缩进） ===== */
:root {
    --bg: #f4f5f9;          /* 全局背景 */
    --card: #ffffff;        /* 卡片底色 */
    --primary: #0052d9;     /* 资讯蓝 */
    --hot: #ff4d4f;         /* 热点 / 直播红 */
    --life: #00b578;        /* 生活绿 */
    --t1: #111;             /* 标题 */
    --t2: #888;             /* 次要描述 */
    --t3: #999;             /* 时间 */
    --t4: #bbb;             /* 播放量 / 图标默认 */
    --line: #f0f0f0;
    --gap: 8px;             /* 卡片间距 */
    --top-h: 52px;          /* 刷流页顶部栏高度 */
    --rail-w: 44px;         /* 刷流页右侧互动列宽度 */
    --sheet-r: 16px;        /* 底部弹层圆角 */
}
/* ===== /T1 ===== */

/* ================= 全局重置（注意：绝无 html,body{overflow:hidden}） ================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: var(--bg); color: #333; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); -webkit-tap-highlight-color: transparent; }
img { display: block; }

/* ===== T4 资讯卡组件 · news.html 与 article.html 必须一致（忽略行首缩进） ===== */
.top-bar { position: sticky; top: 0; z-index: 100; background: var(--card); height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; transition: box-shadow 0.25s ease; }
.top-bar.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.07); }
.icon-btn { background: none; border: none; padding: 2px; color: #666; cursor: pointer; display: flex; transition: color 0.2s ease; }
.icon-btn:active, .icon-btn.active { color: var(--primary); }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.section-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 5px 15px 10px; }
.section-header h2 { font-size: 17px; font-weight: 700; color: #222; display: flex; align-items: center; gap: 7px; }
.sh-bar { width: 3px; height: 14px; border-radius: 2px; background: var(--primary); flex-shrink: 0; }
.sh-bar.hot { background: var(--hot); }
.sh-bar.life { background: var(--life); }
.section-header .more { font-size: 13px; color: var(--t3); cursor: pointer; transition: color 0.2s ease; user-select: none; }
.section-header .more:active { color: var(--primary); }
.news-feed { padding: 0 12px; }
.news-card { background: var(--card); border-radius: 8px; padding: 12px; margin-bottom: var(--gap); box-shadow: 0 1px 4px rgba(0,0,0,0.03); display: flex; justify-content: space-between; gap: 12px; transition: background-color 0.18s ease; }
.news-card:active { background: #fafafa; }
.news-card .text-area { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.news-card .text-area h3 { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--t1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .img-wrap { width: 100px; height: 75px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #eee; }
.news-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.news-card .text-area .meta-bar { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--t3); margin-top: 8px; }
.news-card .text-area .meta-left { display: flex; gap: 10px; align-items: center; }
.news-card .text-area .meta-right { display: flex; gap: 12px; align-items: center; }
.hot-tag, .news-tag, .life-tag { display: inline-block; color: #fff; font-size: 11px; padding: 1px 4px; border-radius: 3px; margin-right: 4px; vertical-align: middle; font-weight: 500; }
.hot-tag { background: var(--hot); }
.news-tag { background: var(--primary); }
.life-tag { background: var(--life); }
/* ===== /T4 ===== */

/* ================= 详情页专属（news.html 没有，也不应该有） ================= */
.art-title { font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--t1); padding: 6px 16px 10px; }
.art-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; font-size: 12px; color: var(--t3); }
.art-meta .art-tag { color: #fff; font-size: 11px; padding: 1px 4px; border-radius: 3px; font-weight: 500; }

.art-hero { margin: 0 0 18px; }
.art-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ddd; }   /* 定比例，防加载中塌陷 */

.art-p { font-size: 16px; line-height: 1.75; color: #333; padding: 0 16px; margin-bottom: 18px; }
.art-h { font-size: 17px; font-weight: 700; color: var(--t1); padding: 0 16px; margin: 24px 0 12px; }
.art-fig { margin: 0 0 20px; }                                    /* 通栏出血，呼应 .hero-news 的语言 */
.art-fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; }
.art-fig figcaption { font-size: 12px; color: var(--t3); line-height: 1.5; padding: 8px 16px 0; }
.art-quote { margin: 0 16px 20px; padding: 12px 14px; background: #f7f8fa; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.7; color: #555; }   /* 3px 语义色条 = .sh-bar 的既有语言 */
.art-end { text-align: center; font-size: 12px; color: var(--t4); padding: 8px 0 20px; }

.news-card[data-key] { cursor: pointer; }                          /* 相关推荐可点 */

/* 底部常驻互动栏 */
.art-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; align-items: center; gap: 16px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }
.art-write { flex: 1; min-width: 0; height: 34px; border-radius: 17px; background: var(--bg); color: var(--t3); font-size: 13px; display: flex; align-items: center; padding: 0 14px; }
.art-share.done { color: var(--primary); }

/* ===== T2 线框图标 · news.html / app.css / article.html 三处必须一致（忽略行首缩进） ===== */
.meta-icon { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t4); cursor: pointer; transition: color 0.2s ease; user-select: none; }
.meta-icon .icon { font-size: 12px; display: inline-block; line-height: 1; font-weight: 400; }
.icon-comment::before { content: '☐'; font-size: 12px; }
.icon-like::before { content: '♡'; font-size: 13px; }
.icon-collect::before { content: '☆'; font-size: 13px; }
.icon-play::before { content: '▶'; font-size: 10px; }
.icon-view::before { content: '◉'; font-size: 12px; }
.meta-icon.active { color: var(--primary); }
.meta-icon.pop { animation: pop 0.28s ease; }
/* ===== /T2 ===== */

/* ===== T3 关键帧 · news.html / app.css / article.html 三处必须一致（忽略行首缩进） ===== */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* ===== /T3 ===== */

/* ================= 无障碍：遵循系统减弱动效偏好 ================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}