/* trend 趋势站样式
*
* 只有一个页面类型（数据面板），所以刻意保持小：主题变量 + 布局 + 面板 + 表格 + 几处特例。
* 零依赖、无构建步骤 —— 与站点整体取向一致。
*
* ── 主题为什么只跟随系统（2026-09-23 起的既有决定）──
* 这里原来是"跟随系统 / 亮 / 暗"三态 + 页头一个切换按钮，需要一段内联脚本
* 在 `` 之前写 `data-theme`（晚了就会闪白）。那个按钮被去掉了，
* 于是配色只由 `prefers-color-scheme` 决定：**无需 JS 参与，浏览器在首次绘制前
* 就定好了配色**，既没有闪烁，也不需要在 head 里插一段必须抢在绘制前跑的脚本。
*
* ── 颜色为什么要两套完整定义，而不是一套加滤镜 ──
* 靠 `filter: invert()` 反色会把上游卡片里的颜色、徽标、图片一起反掉，
* 也会让"已访问链接"的紫与正文糊在一起。这里是显式重定义语义变量。
*/
:root {
--ink: #18181b;
--muted: #71717a;
--line: #e4e4e7;
--bg: #fafafa;
--surface: #fff;
--accent: #4f46e5;
--accent-2: #7c3aed;
--accent-soft: #eef2ff;
--ok: #15803d;
--warn: #b45309;
--err: #b91c1c;
--gold: #d97706;
--silver: #64748b;
--bronze: #92400e;
--radius: 14px;
--shadow: 0 6px 24px rgba(0, 0, 0, .05);
--skeleton: linear-gradient(90deg, #ececef 25%, #f5f5f7 50%, #ececef 75%);
/* 让原生控件（滚动条、表单、时间选择器）跟随主题 */
color-scheme: light;
}
:root[data-theme='dark'] {
--ink: #f4f4f5;
--muted: #a1a1aa;
--line: #2e2e33;
--bg: #101012;
--surface: #1a1a1e;
--accent: #a5b4fc;
--accent-2: #c4b5fd;
--accent-soft: #23233a;
--ok: #4ade80;
--warn: #fbbf24;
--err: #f87171;
--gold: #fbbf24;
--silver: #94a3b8;
--bronze: #d97706;
--shadow: none;
--skeleton: linear-gradient(90deg, #232327 25%, #2c2c31 50%, #232327 75%);
color-scheme: dark;
}
/* 跟随系统（用户没手动选过时生效） */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--ink: #f4f4f5;
--muted: #a1a1aa;
--line: #2e2e33;
--bg: #101012;
--surface: #1a1a1e;
--accent: #a5b4fc;
--accent-2: #c4b5fd;
--accent-soft: #23233a;
--ok: #4ade80;
--warn: #fbbf24;
--err: #f87171;
--gold: #fbbf24;
--silver: #94a3b8;
--bronze: #d97706;
--shadow: none;
--skeleton: linear-gradient(90deg, #232327 25%, #2c2c31 50%, #232327 75%);
color-scheme: dark;
}
}
* { box-sizing: border-box; }
/* 图标兜底尺寸。
* icon() 产出的 svg 只有 viewBox、**不带 width/height**，所以在任何没有显式限尺的
* 上下文里都会退回默认的 300×150 —— 页面上表现为一个巨大的图形。
* 这条给所有图标一个合理默认；各处再用更具体的选择器覆盖成需要的尺寸。
* （2026-09-23：首页三卡的图标就踩了这个坑 —— 容器是 inline 元素，
* 宽高设了却不生效，于是 svg 撑成 300×150。） */
svg {
width: 1.15em;
height: 1.15em;
flex: none;
vertical-align: -0.15em; /* 让图标与相邻文字在视觉基线上对齐 */
}
/* 小字号上下文里的图标显式给尺寸 —— 那里 1.15em 只有 13px 左右，
* 会显得比周围文字还轻，看不出是个图标。 */
th svg,
.tag svg,
.rank svg { width: 12px; height: 12px; }
html {
/* 手机上横屏时有安全区（刘海/圆角），留出内边距 */
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 15px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
/* 主题切换时给一个短过渡，避免生硬跳变；reduced-motion 下会被关掉（见文末） */
transition: background-color .18s ease, color .18s ease;
}
a { color: var(--accent); }
.muted { color: var(--muted); }
.wrap {
max-width: 1100px;
margin: 0 auto;
padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right));
}
/* 视觉隐藏但可被读屏器读到（图标按钮的文本标签用它） */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ---------------- 页头 / 页脚 ---------------- */
.site-header {
border-bottom: 1px solid var(--line);
background: var(--surface);
position: sticky;
top: 0;
z-index: 10;
/* 移动端滚动时不要连页头一起弹跳 */
transition: background-color .18s ease, border-color .18s ease;
}
.header-inner {
display: flex;
align-items: center;
/* 页头的两个元素各就各位：左边 nav-home、右边 .site-nav。
它们都是 header-inner 的直接子元素，所以"左一个右一个"由这一行负责，
不需要在 CSS 里给语言切换写 `margin-left: auto` 这类补丁。 */
justify-content: space-between;
gap: 12px;
height: 58px;
}
/* ── 页头导航 ──────────────────────────────────────────────
* 由构建期生成（`src/site/nav.js` + `首页
`），不是手写在每个页面里。
*
* 三样：左边「首页」+「标签」，右边切换语言 —— 十二个榜单不进页头，它们在
* 首页的入口卡片里各有一张卡（见 `.entry-grid`）；「标签」是一条按来源/分类逛的
* 入口，不是榜单清单。页头的两个子元素靠 `header-inner` 的 `space-between` 各就各位。
*
* 两块链接的高度统一用 `--nav-h`：高度不一致是"这一排没对齐"最常见的原因，
* 而定成一个变量之后，改一处就全跟着走。
*/
.site-nav {
display: flex;
gap: 4px;
align-items: center;
font-size: 14px;
--nav-h: 36px;
}
.site-nav a {
display: inline-flex;
align-items: center;
height: var(--nav-h);
padding: 0 11px;
border-radius: 9px;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--bg); }
/* 首页：页头左侧那一项，和语言切换是同一级别，所以共用上面的尺寸。
★ 刻意**不**给 `[aria-current]` 加边框：它就在页头左侧、是那里唯一的东西，
加框只会让它看起来像一颗按钮；而"我在首页"这件事由页面内容本身说明
（一整屏入口卡片）。用 aria-current 是为了读屏器，不是为了画出来。
（榜单页的下拉菜单里曾经需要边框来标出当前项，那个下拉已经没有调用方了。） */
.nav-home { font-weight: 600; }
/* ── 语言切换 ──────────────────────────────────────────────
* 它和「首页」是同一排、但**不是同一类控件**：首页在本站内跳转，
* 这一个会换语言、跳到另一个地址。样式上让它自己说话：
*
* · 前面一条竖分隔线，视觉上断开"首页"与"切换"；
* · 地球图标 —— 站点本来就有内联 SVG（ui.js），同一个视觉语言，
* 比写一个 "EN" 缩写更省空间，也不用为两种语言各想一个缩写；
* · 收敛成"安静"的样子：不占满高度、hover 才抬起，不与首页争夺注意力。
*
* 分隔线用 ::before 画，而不是在 HTML 里写一个空 ：它纯粹是装饰，
* 不该出现在无障碍树里（读屏器念"竖线"没有意义）。
*/
.site-nav .lang {
display: inline-flex;
align-items: center;
gap: 6px;
/* 高度比导航项小一圈：它更"安静"，但仍然大于 24px 的可点下限 */
height: 28px;
margin-left: 10px;
padding: 0 10px 0 12px;
position: relative;
white-space: nowrap;
}
.site-nav .lang::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 18px;
background: var(--line);
}
.site-nav .lang .ic { display: inline-flex; color: currentColor; }
.site-nav .lang .ic svg { width: 15px; height: 15px; display: block; }
/* 「标签」那一项也带图标（与语言切换同一个视觉语言），尺寸同样收一档 */
.site-nav .nav-tags .ic { display: inline-flex; color: currentColor; }
.site-nav .nav-tags .ic svg { width: 15px; height: 15px; display: block; }
/* 图标按钮（主题切换 / 刷新）：★ 触控目标不小于 44×44，手机上好点 */
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--muted); background: var(--bg); }
.icon-btn:active { transform: scale(.96); }
.icon-btn svg { width: 19px; height: 19px; display: block; }
/* 键盘可达性：只在键盘聚焦时显示焦点环 */
.icon-btn:focus-visible,
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 页面底部的来源行页脚已移除：`Trend` 与面板导航都不再依赖它
（品牌在页头，面板间的跳转由 trend.js 生成的 .board-links 承担）。
留一段空规则会让人以为还有个页脚要维护，所以整块去掉。 */
/* 首屏（`hero-compact`）的样式已随大盘页一起删掉：拆成"一个面板一页"之后，
页面标题由 trend.js 渲染成面板头里的