/* fp.css — 磁吸页的溢出提示层（2026-11-02 Wave 5 建，同日 Wave 6 撤掉横轨只留这一件事）
 *
 * 🔴 Wave 6 撤除清单（用户看过实际效果后拍板"改回之前的样式"）：列轨、peek 列宽、
 * 两端渐隐遮罩、横轨滚动条、一次性轻推、miles-track 的 background-attachment:local 那套
 * ——**别当"顺手能加回来"的东西**：横轨要重新上，得先有新一次拍板与矩阵依据。
 * 留着的是这条账：2026-09-16 那次否决说「溢出屏要内部滚动才看全、无滚动提示形似断页」，
 * 而 `upgrade.css:174-175` 还把内滚条主动藏掉 ⇒ 真溢出的屏必须自己喊出来。
 *
 * 🔴 颜色只走现有令牌，且注意本站的反直觉命名：`--paper` 是**墨色文字**，页面底色是
 *    `--ink-950`。渐隐层拿错就成了一条黑带（brand-design-language 在案）。
 * 🔴 只在 `body.fp` 下生效：≤980 与 ≤700 的既有布局一律不动——断点体系是拍板过的。
 * 🔴 加载顺序必须在 upgrade.css 之后（判据 tests/test_fp_shared_assets_20261102.py 钉住），
 *    靠它覆盖 upgrade.css:174-175 那两条藏滚动条的规则。
 */

/* ── 0. 溢出屏必须"滚得到顶"（2026-11-02 Wave 6 实测修的真 bug） ──
 * `.screen{ justify-content:center }` 在内容高于视口时把溢出**上下各分一半**，
 * 而滚动容器的可滚区只向块结束方向延伸 ⇒ 上面那一截用户永远滚不到
 * （实测 1280×720 的 #products：上 80px / 下 81px，而 scrollHeight 只报 800＝720+81）。
 * 🔴 第一版我改成"容器 flex-start + 枚举子元素 margin-block:auto"，两处都错了：
 *   ① 枚举类名不可靠——`#top` 的第一个子元素 `.hero-grid` 是
 *     `position:absolute; inset:0` 的**装饰背景层**，真正的内容是 `.hero-wrap`，
 *     没进我的名单 ⇒ 首页整屏丢了居中（用户截图「整体偏上了」就是这么来的）；
 *   ② 就算名单齐了，`margin-block:auto` 是让**每个** in-flow 子元素各自居中，
 *     会把它们之间的空隙拉开，不是"整组居中"。
 * 正解按**状态**给而不按类名给，且两个门槛分开（见 fp.js 的 measure()）：
 * `data-over`（内容超出 >2px）才改成从顶开始——"有一截永远滚不到"本身就是 bug，
 * 不该设容忍阈值；`data-afford`（>24px ≈ 一行正文）才挂可见提示，
 * 差十几个像素丢的是留白，给整屏挂滚动条和箭头是噪声。
 * 🔴 只在 body.fp 下改：非磁吸模式（<980）本来就是自然长页，不碰它的居中。 */
body.fp .screen[data-over]{ justify-content:flex-start; }

/* 屏的上下内边距改视口相对：这是"自适应"里能白捡的那一段，不动字号所以不动可读性。
   90/70 是原值。🔴 系数按"720 高时确实变小"定：7vh@720=50 → 落到 56 的地板，
   5.5vh@720=40 → 落到 48 的地板，合计省 56px；≥1286 高时回到原值 90/70，高屏零变化。
   （第一版我写成 12.5vh/9.7vh——在 720 上恰好等于 90/70，一分没省，注释还写着"省 78px"，
     是照着意图写数而不是照着读数写数的典型，量具跑一遍就露馅。）
   只覆盖 body.fp，非磁吸模式的长页保持原样。 */
body.fp .screen-inner{
  padding-top:clamp(56px, 7vh, 90px);
  padding-bottom:clamp(48px, 5.5vh, 70px);
}

/* 溢出屏的可见提示：只对 fp.js 标了 data-afford 的屏生效，其余保持干净外观 */
body.fp .screen[data-afford="scroll-y"]{
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
body.fp .screen[data-afford="scroll-y"]::-webkit-scrollbar{ width:9px; }
body.fp .screen[data-afford="scroll-y"]::-webkit-scrollbar-thumb{
  background:var(--line); border-radius:9px; border:2px solid transparent;
  background-clip:padding-box;
}
/* 底缘渐隐 + 中性下箭头：不含任何文字，中英两页共用一条（文案不进 CSS，i18n 才不漂） */
body.fp .screen[data-afford="scroll-y"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(to bottom, rgba(245,241,236,0), var(--ink-950));
  pointer-events:none; z-index:3;
}
body.fp .screen[data-afford="scroll-y"]::before{
  content:"⌄"; position:absolute; right:50%; transform:translateX(50%); bottom:10px;
  font-family:var(--ff-mono, ui-monospace, monospace); font-size:20px; line-height:1;
  color:var(--paper-mute); pointer-events:none; z-index:4;
}