/* ==========================================================================
   选址参谋 · 示例报告（屏幕预览页 /sample）
   --------------------------------------------------------------------------
   为什么单开一份：这些类只在示例页出现，塞进 app.css 会让全站多背 30 条
   用不到的选择器。

   为什么不能复用 sample.css：sample.css 服务的是「打印 / 下载版」（body.sample-print），
   那里必须整套写死纸面白底 —— 打印出来是一整页深灰，墨盒先受不了。
   本文件服务的是屏幕上的 /sample，它套的是站点布局，**必须跟着日夜主题走**。
   两份文件、两个用途，不要合并。

   本轮（v1.9.1）只做两件事：
     1. 深色底全部换成主题令牌 —— 原来的 linear-gradient(#111927,#0c121b)
        在日间模式下是一整块深色，标题压在深底上，属于「日间模式遗漏」；
     2. 字号改用 --fs-* 令牌 —— 原先是 11.5/12.5/13/20px 的写死值，
        v1.9.0 把全站字号放大 25% 后，这一页是唯一没跟上的。
   ========================================================================== */

.sample-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; flex-wrap: wrap;
    margin-bottom: 16px; padding: 22px; border: 1px solid var(--line-soft); border-radius: var(--radius);
    /* 深色下是「比页面底亮一档的卡片」，浅色下是「比纯白略灰一档」——
       同一个渐变方向，两种主题都读得出层次，不需要额外的 light 覆盖规则 */
    background: linear-gradient(135deg, var(--panel-2), var(--bg-soft));
}
.sample-hero h1 { font-size: var(--fs-lg); font-weight: 700; margin: 10px 0 8px; }
.sample-hero p { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.95; max-width: 680px; }
.sample-hero p b { color: var(--text); font-weight: 600; }

.sample-actions { display: flex; flex-direction: column; gap: 8px; min-width: 208px; }

.sample-paper {
    position: relative; overflow: hidden; padding: 22px;
    border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel);
}
/* 斜置水印：深色下用白色低透明度，浅色下必须换成深色 —— 
   rgba(255,255,255,.028) 压在白底上是纯白，等于水印直接消失。
   这是本文件唯一需要按主题分叉的地方（无法用单一令牌表达「当前背景的反色」）。 */
.sample-paper::before {
    content: "示例数据"; position: absolute; right: -16px; top: 150px; z-index: 0;
    font-size: 128px; font-weight: 800; letter-spacing: 12px;
    color: rgba(255, 255, 255, .028); transform: rotate(-18deg); pointer-events: none;
}
html[data-theme="light"] .sample-paper::before { color: rgba(23, 34, 51, .05); }
.sample-paper > * { position: relative; z-index: 1; }

/* 示例数据提示条：琥珀色系。用 --rgb-warn 而不是写死 240,169,46 ——
   浅色主题下这个三元组是 150,86,10，同一份 alpha 会自动落成浅棕底 + 深棕字 */
.sample-ribbon {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 18px; padding: 9px 13px; border-radius: 7px;
    border: 1px dashed rgba(var(--rgb-warn), .55); background: rgba(var(--rgb-warn), .10);
    color: var(--warn); font-size: var(--fs-xs); line-height: 1.6;
}
.sample-ribbon b { font-weight: 700; letter-spacing: 1px; }

.sample-foot { margin-top: 22px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.9; }
.sample-bottom { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 820px) {
    .sample-hero { padding: 18px; }
    .sample-actions { width: 100%; min-width: 0; }
    .sample-paper { padding: 14px; }
    /* 小屏上 128px 的斜水印会把正文盖住，手机上直接不要水印 */
    .sample-paper::before { display: none; }
}