/* ═══════════════════════════════════════════════════════════════════════════
   统一提示窗（toast）—— 全站唯一源 · 雅之林®（2026-10-04）
   ===========================================================================
   🔴🔴 用户令（原话）：「最后这张图片下面显示的灰色提示窗口，需要进行全面修改。
      1. 颜色调整：检查全站所有需要出现的提示窗口，不要统一使用这种灰色，
         要换成每个站点、每个页面相对应的颜色。
      2. 位置与大小：提示窗口要放在页面的中间，并且尺寸稍微大一点。
      3. 统一设计：要改用一种统一的形式。现在提示的那个条太难看了，需要重新设计一下。」

   本文件只定义**长相**；行为（建节点 / 写文案 / 定时收掉）在 `_toast.js`。
   两个文件必须**成对引入**（`<link>` + `<script>` 都要有）。

   ══ 为什么做成独立文件、而不放进 `yzl.css`（这是本轮验收实测踩出来的，务必记住）══
   **商品详情.html 与 支付.html 根本没有加载 `yzl.css`**
     （它们只引 `_footer.css` + 自己的内联 `<style>`，`<html>` 上也没有 data-tone）。
   ⇒ 如果样式放在 `yzl.css` 里，这两个页面上：
        · `.yz-toast` 这条规则不存在 ⇒ 节点退化成"挂在文档最末尾的一条无样式文字"；
        · `--brand` / `--brand-ink` 也不存在 ⇒ 连颜色都取不到。
     实测就是：底色透明、字号 16px、宽度撑满视口、位置跑到文档末尾（y≈5300）——
     **用户根本看不见**，正好复现本项目踩过一次的老坑（见商品详情里那段历史留档）。
   ⇒ 结论：提示窗是"**每个页面都必须有**"的组件，它的样式必须跟它自己的 JS 放一起，
      由 8 个页面**各自显式引入**，⛔ 不依赖某个页面是否装了设计系统。
   栏目色令牌（`--brand` 四色轴）的**唯一源仍然是 `yzl.css`**，本文件只消费它。

   ══ 配色 ═══════════════════════════════════════════════════════════════════
   取 `var(--brand)` / `var(--brand-ink)` ⇒ 每页按 `html[data-tone]` **自动**取到自己那一色：
     home  克莱因蓝 #002FA7 ｜ clock 紫罗兰 #4C1D95
     admin 玫红紫   #8E2361 ｜ me    胭脂红 #7A1226
   ⛔ 不要在本文件里按站点写死 hex —— 那样"一站一色"又变回手工维护，将来加站点必漏。
   ⚠️ 唯一的例外是 `var(--brand, #002FA7)` 里的那个**兜底值**：
      给"没加载 yzl.css 的页面"（当前就是商品详情 / 支付两页，二者同属 home 组）
      一个正确的降级色。⚠️ 若将来这两个页面换了栏目色，必须同步改这个兜底值。
   ═══════════════════════════════════════════════════════════════════════════ */

.yz-toast{
  position:fixed; left:50%; top:50%;
  /* 起点：略微下移 + 轻微缩小，进场时收拢到正中（只动 transform，不触发重排）。 */
  transform:translate(-50%, calc(-50% + 10px)) scale(.96);
  z-index:10050;
  max-width:min(80vw, 300px);
  padding:15px 22px; border-radius:16px;
  background:var(--brand, #002FA7); color:var(--brand-ink, #FFFFFF);
  font:800 14.5px/1.6 var(--f, "PingFang SC","HarmonyOS Sans SC","HarmonyOS Sans","MiSans","OPPO Sans","vivo Sans","Source Han Sans SC","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",-apple-system,sans-serif);
  text-align:center; letter-spacing:.1px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.38);
  /* ⚠️ 位置在屏幕正中 ⇒ 一定会盖住内容。`pointer-events:none` 保证它**只挡视线、不挡点击**，
     否则用户会以为页面卡死（本项目对这种"点不动"的反馈极其敏感）。 */
  opacity:0; pointer-events:none;
  transition:opacity .22s cubic-bezier(.22,.61,.36,1),
             transform .28s cubic-bezier(.22,.61,.36,1);
}
.yz-toast.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }


@media (prefers-reduced-motion:reduce){
  .yz-toast{ transition:opacity .12s linear; }
}