/* ==========================================================================
   一脉出海 H5 · components.css
   符号四读法 / 装饰层（经纬网格、等深线）/ 图标 / 按钮 / 数据卡 / 分割线 /
   页码标签 / 来源角标 / 常驻层控件（身份切换、音频、航线尺）/ 表单 / 视图切换 /
   骨架内容族
   规格来源：02 手册第三节「图形组件规格」、01 文档 · 二.4
   色值只允许 var(--…)；rgba 仅出现在 tokens.css。
   ========================================================================== */

/* ---------------------------------------------------------------
   一、装饰层
   经纬网格 90px 方格 / 1px / 12%；等深线 2px / 22%（低于任何内容层）
   --------------------------------------------------------------- */
:root{
  --img-grid:
    repeating-linear-gradient(to right, var(--lane-12) 0 var(--sw-grid), transparent var(--sw-grid) 90px),
    repeating-linear-gradient(to bottom, var(--lane-12) 0 var(--sw-grid), transparent var(--sw-grid) 90px);
  --img-isobath:
    repeating-radial-gradient(ellipse at 78% 16%, transparent 0 46px, var(--lane-22) 46px 48px),
    repeating-radial-gradient(ellipse at 12% 84%, transparent 0 62px, var(--lane-22) 62px 64px);
}
body::before{                       /* 全片经纬网格：海图纸感基底 */
  content:'';position:fixed;inset:0;z-index:var(--z-deco);pointer-events:none;
  background-image:var(--img-grid);
}
.deco-grid{background-image:var(--img-grid)}
.deco-isobath{                      /* 等深线：有机同心弧（环宽 2px） */
  position:absolute;inset:0;z-index:var(--z-deco);pointer-events:none;overflow:hidden;
  background-image:var(--img-isobath);
}

/* ---------------------------------------------------------------
   二、符号四读法 + 形态层 —— 交接块，照抄自 tools/line-harness.html
   （符号引擎交活时写在验证台里的权威块；read-* 管颜色，元素类管形态与可见性。
     参数出处：02 手册「图形组件规范」组件表；描边值与总则「1/2/7 三档」的
     张力已在 tokens.css 注释里记过 —— 组件表是明细，总则是类别，以组件表为准。）
   —— .line-node / .line-ray 的 opacity:0 是有意的：由引擎按进度**内联**揭示
      （line.js:814 / 821），别重写。
   —— .line-pulse 由引擎切换 .is-on（line.js:844 / 876）。
   —— r / cx / cy 为 SVG2 几何属性（Chrome / Safari / Firefox 均支持）；
      vector-effect 由引擎写在 path 属性上（makePathEl），此处不再重复。
   --------------------------------------------------------------- */
.line-seg{fill:none;stroke-width:var(--sw-line);stroke-linecap:round;stroke-linejoin:round}
.read-water{stroke:var(--pulse)}
.read-circuit{stroke:var(--pulse);stroke-linejoin:miter;stroke-linecap:square}
.read-energy{stroke:var(--pulse)}
.read-route{stroke:var(--lane)}

.line-vein{fill:none;stroke:var(--pulse);stroke-width:2.4px;stroke-linecap:round;opacity:.5}
.line-node{r:11px;fill:var(--ink);stroke:var(--pulse);stroke-width:4px;opacity:0}
.line-ray{fill:none;stroke:var(--lane);stroke-width:2.6px;stroke-dasharray:var(--dash-route);stroke-linecap:round;opacity:0}
.line-pulse{r:7px;fill:var(--sun);opacity:0}
.line-pulse.is-on{opacity:1}

/* ---------------------------------------------------------------
   三、图标（48×48 网格 / 2px 描边 / 圆头端点 / 1 个脉线端点圆点 r=4）
   --------------------------------------------------------------- */
.icon{display:inline-flex;width:var(--size-icon);height:var(--size-icon)}
.icon svg{
  width:100%;height:100%;fill:none;
  stroke:var(--lane);stroke-width:var(--sw-icon);
  stroke-linecap:round;stroke-linejoin:round;
}
.icon-dot{fill:var(--pulse);stroke:none}   /* 符号家族特征：端点圆点 */

/* ---------------------------------------------------------------
   四、按钮（胶囊 / 高 52px / 高于 44px 触控标准；只动 transform）
   --------------------------------------------------------------- */
.btn-primary,.btn-secondary,.btn-text{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-sm);
  min-height:var(--h-touch);border-radius:999px;
  font-size:var(--fs-2);font-weight:700;line-height:1;
  transition:transform var(--dur-in) var(--ease);
}
.btn-primary{background:var(--pulse);color:var(--ink);padding:0 var(--gap-block)}
.btn-secondary{background:transparent;border:var(--sw-btn) solid var(--pulse);color:var(--pulse);padding:0 var(--gap-block)}
.btn-text{color:var(--pulse);padding:0 var(--gap-sm);text-decoration:underline;text-underline-offset:4px}
.btn-primary:active,.btn-secondary:active,.btn-text:active{transform:scale(.97)}

/* ---------------------------------------------------------------
   五、数据卡（圆角 12 / 底靛蓝 / 左上 3px 脉线绿短标 / 内边距 20）
   --------------------------------------------------------------- */
.card{
  position:relative;display:flex;flex-direction:column;gap:var(--gap-col);
  background:var(--deep);border-radius:var(--r-card);
  padding:var(--pad-card);overflow:hidden;color:var(--paper);
}
.card::before{
  content:'';position:absolute;left:0;top:0;
  width:var(--sw-tick);height:28px;background:var(--pulse);
}
.card--sun::before{background:var(--sun)}   /* 赣味橙限用：每屏 ≤1 次（06 屏） */

/* ---------------------------------------------------------------
   六、分割线（航迹线：dasharray 1 14 / 2.6px / 航路青 55%）
   --------------------------------------------------------------- */
.rule{
  height:var(--sw-dash);
  background-image:repeating-linear-gradient(90deg, var(--lane-55) 0 1px, transparent 1px 15px);
}

/* ---------------------------------------------------------------
   七、页码标签 / 来源角标 / 减碳读数（页脚三件套）
   --------------------------------------------------------------- */
.page-label{font-family:var(--font-num);font-weight:600;font-size:var(--fs-3);line-height:1;color:var(--mute);white-space:nowrap}
/* 触控目标 ≥52（02 手册 · 四）与页脚 24pt 行高并存：
   元素盒 52pt + 上下负外边距（(24−52)/2 = −14px），行高贡献仍是 24pt，
   命中区 52pt 落在盒上（不是伪元素）——验收仪器量 getBoundingClientRect 也能过 */
.src-tag{
  display:inline-flex;align-items:center;
  min-height:var(--h-touch);
  margin-block:calc((var(--h-foot) - var(--h-touch)) / 2);
  padding:0 var(--gap-base);
  font-size:var(--fs-1);line-height:1.5;color:var(--lane);white-space:nowrap;
}
.src-tag:active{opacity:.6}
/* 刀 3.11（N3）：读数由 span 改为 button —— **读数本身是「示意口径」的入口**
   （点开底部抽屉看算式；文案与算式真源 js/interact/carbon.js）。
   触控 ≥52 与页脚 24pt 行高并存：同 .src-tag 的负外边距判例（盒外命中区，仪器量盒）。
   折行纪律（实测）：容器允许折行、两段各自 nowrap —— 320 档 s10 可用宽仅 119px，
   「全片传输 X KB · 约 X g」单行放不下时折两行；320 档页脚本就是 52 实盒，
   零高度代价。375 档实测 165.8px ≤ s10 余量 174px（单行）、430 档富余。 */
.carbon-readout{
  display:inline-flex;flex-wrap:wrap;align-items:center;
  min-height:var(--h-touch);
  margin-block:calc((var(--h-foot) - var(--h-touch)) / 2);
  padding:0;                      /* 不留横向内边距：封底页脚可用宽实测 173.6px，
                                     整串 165.8px —— 多 8px 内边距就折行（实测） */
  font-size:var(--fs-1);line-height:1.5;color:var(--mute);
  min-width:0;white-space:normal;text-align:left;
}
.carbon-readout .cr-a,.carbon-readout .cr-b{
  white-space:nowrap;
  text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--lane-55);text-underline-offset:3px;
}
.carbon-readout:active{color:var(--paper-87)}
@media (max-height:760px){ .carbon-readout{margin-block:0} }   /* 吸附页脚：实盒 52，不再补贴 */

/* ---------------------------------------------------------------
   八、常驻层控件
   --------------------------------------------------------------- */
/* 身份切换（N4）：只改 body[data-view]；按钮本身不带 data-view，避免被显隐规则误伤 */
.vs-btn{
  min-height:var(--h-touch);padding:0 var(--gap-md);border-radius:999px;
  border:var(--sw-btn) solid var(--pulse);color:var(--pulse);
  font-size:var(--fs-1);line-height:1;display:inline-flex;align-items:center;
}
.vs-btn[aria-pressed="true"]{background:var(--pulse);color:var(--ink);font-weight:700}

/* 音频开关：默认静音（aria-pressed=false 显示斜杠，开启显示声波） */
.icon-btn{
  width:var(--h-touch);height:var(--h-touch);border-radius:999px;
  border:var(--sw-btn) solid var(--lane-55);color:var(--mute);
  display:inline-flex;align-items:center;justify-content:center;
}
.icon-btn[aria-pressed="true"]{border-color:var(--pulse);color:var(--pulse)}
.icon-btn svg{
  width:24px;height:24px;fill:none;stroke:currentColor;
  stroke-width:var(--sw-icon);stroke-linecap:round;stroke-linejoin:round;
}
.icon-btn .icon-wave{display:none}
.icon-btn[aria-pressed="true"] .icon-wave{display:inline}
.icon-btn[aria-pressed="true"] .icon-slash{display:none}

/* 航线进度尺（N1「滚动即航行」；scroll.js 驱动 #rr-fill / #rr-marker / #rr-km） */
.ruler-rail{position:relative;flex:1 1 auto;width:100%}
.ruler-track,.ruler-fill,.ruler-marker{position:absolute;left:50%;transform:translateX(-50%)}
.ruler-track{top:0;bottom:0;width:var(--sw-grid);background:var(--lane-12)}
.ruler-fill{top:0;width:var(--sw-icon);height:0;background:var(--pulse);border-radius:999px}
.ruler-marker{top:0;width:8px;height:8px;border-radius:50%;background:var(--pulse)}
.ruler-ticks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center}
.ruler-ticks li{width:12px;height:var(--sw-grid);background:var(--lane-22)}
.ruler-readout{
  writing-mode:vertical-rl;padding-top:var(--gap-col);
  font-size:var(--fs-1);line-height:1;color:var(--mute);
}

/* ---------------------------------------------------------------
   九、视图切换（契约 §5）：容器留 min-height 防布局跳动
   --------------------------------------------------------------- */
.view-slot{min-height:48px}
.view-demo{display:flex;flex-direction:column;gap:var(--gap-sm)}
body[data-view="visitor"] [data-view="buyer"],
body[data-view="buyer"]  [data-view="visitor"]{display:none}

/* 卡内次要文字：靛蓝底上灰蓝对比仅约 3.7:1（AA 不足），卡内一律升到 87% 白 */
.card .t-l4,.card .label,.card .badge-quiet,.card .map-stage{color:var(--paper-87)}

/* 非 live 功能入口的显式标注（契约 §6 诚实纪律） */
.badge-quiet{
  display:inline-flex;align-items:center;
  border:var(--sw-grid) solid var(--lane-22);border-radius:999px;
  padding:0 var(--gap-sm);font-size:var(--fs-1);line-height:1.6;color:var(--mute);white-space:nowrap;
}

/* ---------------------------------------------------------------
   十、骨架内容族
   --------------------------------------------------------------- */
/* 封面 */
.cover-kicker{font-size:var(--fs-1);line-height:1.5;color:var(--lane)}
.cover-title{font-size:var(--fs-5);font-weight:700;line-height:1.2;color:var(--paper)}
.cover-sub{font-size:var(--fs-3);line-height:1.5;color:var(--paper)}
.cover-en{font-size:var(--fs-2);line-height:1.5;color:var(--mute)}
.zone-chips{display:flex;flex-wrap:wrap;gap:var(--gap-sm)}
.zone-chip{
  min-height:var(--h-touch);display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--gap-md);border:var(--sw-btn) solid var(--lane);border-radius:999px;
  font-size:var(--fs-1);color:var(--lane);
}

/* 02 问题屏 */
.issue-list{display:flex;flex-direction:column;gap:var(--gap-sm)}
.issue-row{
  display:flex;align-items:center;gap:var(--gap-col);
  min-height:var(--h-touch);font-size:var(--fs-3);font-weight:700;color:var(--paper);
}
.issue-mark{width:8px;height:8px;border-radius:50%;background:var(--pulse);flex:0 0 auto}
.warn-ring{                         /* 警示环：赣味橙，每屏 ≤1 次 */
  position:absolute;right:-44px;bottom:88px;width:168px;height:168px;
  border:var(--sw-icon) solid var(--sun);border-radius:50%;
  opacity:.55;pointer-events:none;
}

/* 大数字锚点 / 支撑行 */
.stat{display:flex;flex-direction:column;gap:var(--gap-sm)}
.stat-unit{font-size:var(--fs-3);line-height:1.5;color:var(--paper-87)}
.stat-rows{display:flex;flex-direction:column;gap:var(--gap-sm);font-size:var(--fs-2);line-height:1.7;color:var(--paper-87)}

/* 12 链图谱（N5） */
.chain-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-sm)}
.chain-chip{
  min-height:var(--h-touch);display:flex;align-items:center;justify-content:center;
  padding:0 var(--gap-sm);border:var(--sw-btn) solid var(--lane-55);border-radius:999px;
  font-size:var(--fs-1);color:var(--lane);text-align:center;
}
.chain-chip[aria-pressed="true"]{background:var(--pulse);border-color:var(--pulse);color:var(--ink);font-weight:700}
.is-dim{opacity:.2}                  /* N5：未选中链降至 20% */

/* 清单 / 排行 */
.check-list{display:flex;flex-direction:column;gap:var(--gap-sm)}
.check-row{
  display:flex;align-items:center;gap:var(--gap-col);
  min-height:var(--h-touch);font-size:var(--fs-2);color:var(--paper);
}
.check-mark{width:8px;height:8px;border-radius:50%;border:var(--sw-icon) solid var(--lane);flex:0 0 auto}
.rank-rows{display:flex;flex-direction:column;gap:var(--gap-sm)}
.rank-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-col);
  min-height:40px;font-size:var(--fs-2);color:var(--paper);
}
.rank-val{font-size:var(--fs-1);color:var(--mute)}
.rank-val .num{font-size:var(--fs-3);color:var(--pulse)}

/* 地图占位（交互层接管的容器） */
.map-stage{
  min-height:120px;display:grid;place-items:center;padding:var(--gap-md);
  border:var(--sw-grid) solid var(--lane-22);border-radius:var(--r-card);
  font-size:var(--fs-1);color:var(--mute);text-align:center;
}
.pulse-dot{position:absolute;right:var(--pad-card);top:var(--pad-card);width:12px;height:12px;border-radius:50%;background:var(--pulse)}

/* 表单 / 滑杆 / 承诺 */
.field{display:flex;flex-direction:column;gap:var(--gap-sm)}
.field .label{font-size:var(--fs-1);color:var(--mute)}
.input{
  width:100%;min-height:var(--h-touch);padding:0 var(--gap-md);
  background:transparent;border:var(--sw-btn) solid var(--lane-22);border-radius:var(--r-card);
  font-size:var(--fs-2);color:var(--paper);
}
.input::placeholder{color:var(--mute)}
.input:focus{border-color:var(--pulse);outline:none}
.slider{width:100%;min-height:var(--h-touch);accent-color:var(--pulse);background:transparent}
/* 承诺开关：整体是一个 52pt 触控按钮（不用原生 checkbox —— 其命中区达不到 52pt） */
.pledge{
  display:flex;align-items:center;gap:var(--gap-col);width:100%;
  min-height:var(--h-touch);font-size:var(--fs-2);color:var(--paper-87);text-align:left;
}
.pledge .check-mark{width:20px;height:20px}
.pledge[aria-pressed="true"] .check-mark{background:var(--pulse);border-color:var(--pulse)}

/* 封底 */
.cta-stack{display:flex;flex-direction:column;gap:var(--gap-col);align-items:stretch}
.cta-stack > *{width:100%}
.cta-row{display:flex;align-items:center;justify-content:center;gap:var(--gap-sm)}
.qr-box{
  width:160px;height:160px;display:grid;place-items:center;padding:var(--gap-md);
  border:var(--sw-btn) solid var(--lane-22);border-radius:var(--r-card);
  font-size:var(--fs-1);line-height:1.5;color:var(--mute);text-align:center;
}
.src-ledger{width:100%}
.src-ledger summary{
  min-height:var(--h-touch);display:flex;align-items:center;gap:var(--gap-sm);
  font-size:var(--fs-2);color:var(--lane);cursor:pointer;
}
.src-ledger ol{
  display:flex;flex-direction:column;gap:var(--gap-sm);
  padding:var(--gap-col) 0 0 var(--pad-x);list-style:decimal;
}
.src-ledger li{font-size:var(--fs-1);line-height:1.5;color:var(--mute)}

/* ===============================================================
   刀 3.10 · 03 屏上下游图谱（N5 做全）／ 05 屏赣品弹卡
   —— 依据：契约 §6.5「创新方案不许降级」——功能做完整，数据照旧标注。
   —— 视觉语言与「一脉」一致：只描边、无填充色块、无投影；色只用
      var(--pulse) / var(--lane) 族与既有透明度档；过渡只落在
      opacity / transform / stroke-dashoffset（末项仅图谱连线用）。
   —— reduced-motion 照旧：过渡只写在 body:not(.is-reduced) 下，
      降级后类切换即时到终态（不新增判定入口，判定仍在 motion.js）。
   =============================================================== */

/* —— 03 图谱：网格 3 列（上游材料 / 本链 / 下游产品）+ 绝对定位的连线层 ——
   320 档实测：屏体 252（320 − 2×20 页边 − 28 航线尺预留）− 虚线块内边 18 =
   图谱 234；两列间 8×2 + 中列 66（4 字 56 + 内边 8 + 描边 2）→ 左/右列各 76，
   4 字标签（净需 66）单行可纳；5 字（净需 80）会折 —— 数据端已约 ≤4 字。 */
.chain-graph{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:var(--gap-sm);row-gap:var(--gap-base);
}
/* 标题行 line-height 取 1（14px 整）：图谱竖向预算按「375×812 定高屏」实测扣的
   （图谱实测 101 = 标题 14 + 行距 4 + 三行 83），标题按 1.5 行高（21px）就会把
   面板多顶 7px —— 定高屏里这 7px 直通页脚 */
.chain-cap{font-size:var(--fs-1);line-height:1;color:var(--lane);text-align:center}
/* 列内居中、不定宽：节点各自收缩为内容宽（同 .chain-chip 的胶囊观感），
   两侧留白 + 列间 8px 就是连线的走廊（4 字节点实测：375 档 ≈27px、430 档 ≈40px；
   若让节点撑满列宽，走廊只剩列间的 8px，连线会退化成小短棍 —— 已实测踩过）。 */
.chain-col{display:flex;flex-direction:column;align-items:center;gap:var(--gap-base);min-width:0}
.chain-col--mid{align-self:center}
.chain-node{
  display:flex;align-items:center;justify-content:center;
  min-height:24px;padding:1px var(--gap-base);   /* 行高 21 + 内边 2 + 描边 2 = 25（实测）；24 只是下限兜底 */
  border:var(--sw-grid) solid var(--lane-55);border-radius:999px;
  font-size:var(--fs-1);line-height:1.5;color:var(--paper);text-align:center;
}
.chain-node--core{
  border:var(--sw-btn) solid var(--pulse);color:var(--pulse);
  font-weight:700;padding-inline:var(--gap-base);
}
.chain-graph-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.chain-graph-line{
  fill:none;stroke:var(--lane);stroke-width:var(--sw-icon);stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;      /* pathLength=1 归一化：1 = 全线长 */
  vector-effect:non-scaling-stroke;
}
.chain-detail.is-open .chain-graph-line{stroke-dashoffset:0}

/* 入场：节点按列向中心点入（6px 平移）+ 连线自上游向下游依次「画入」。
   错峰一律走 transition-delay（≈ --dur-stagger 60ms 一档）——不写任何 JS 计时器。 */
.chain-cap,.chain-node{opacity:0}
.chain-col--up .chain-node{transform:translateX(-6px)}
.chain-col--down .chain-node{transform:translateX(6px)}
.chain-node--core{transform:translateY(6px)}
.chain-detail.is-open .chain-cap{opacity:1}
.chain-detail.is-open .chain-node{opacity:1;transform:none}
body:not(.is-reduced) .chain-cap,
body:not(.is-reduced) .chain-node{transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease)}
body:not(.is-reduced) .chain-graph-line{transition:stroke-dashoffset var(--dur-draw) var(--ease)}
/* ⚠️ 错峰的 transition-delay 必须写在 body:not(.is-reduced) 之下（吃到同一条件的
   更高优先级）——两个都已实测踩过：
   · 只写 .goods-item:nth-child(n)：优先级低于上面的 transition 简写，简写里的
     delay 0s 反杀长写 —— 错峰静默失效；
   · 降级态里若留下裸的 delay（无 duration）：Chromium 仍会建「0 时长 + 正延迟」
     的过渡 —— 属性在延迟期内停在旧值，几毫秒里被验成「中间态」。 */
body:not(.is-reduced) .chain-col .chain-node:nth-child(2){transition-delay:var(--dur-stagger)}
body:not(.is-reduced) .chain-col .chain-node:nth-child(3){transition-delay:calc(var(--dur-stagger) * 2)}
/* 下行比上行晚两档（连线：上游 0/1/2 档画入 → 下游 2/3/4 档展开） */
body:not(.is-reduced) .chain-col--down .chain-node:nth-child(1){transition-delay:calc(var(--dur-stagger) * 2)}
body:not(.is-reduced) .chain-col--down .chain-node:nth-child(2){transition-delay:calc(var(--dur-stagger) * 3)}
body:not(.is-reduced) .chain-col--down .chain-node:nth-child(3){transition-delay:calc(var(--dur-stagger) * 4)}
body:not(.is-reduced) .chain-graph-line:nth-of-type(1){transition-delay:0ms}
body:not(.is-reduced) .chain-graph-line:nth-of-type(2){transition-delay:var(--dur-stagger)}
body:not(.is-reduced) .chain-graph-line:nth-of-type(3){transition-delay:calc(var(--dur-stagger) * 2)}
body:not(.is-reduced) .chain-graph-line:nth-of-type(4){transition-delay:calc(var(--dur-stagger) * 2)}
body:not(.is-reduced) .chain-graph-line:nth-of-type(5){transition-delay:calc(var(--dur-stagger) * 3)}
body:not(.is-reduced) .chain-graph-line:nth-of-type(6){transition-delay:calc(var(--dur-stagger) * 4)}

/* —— 05 赣品弹卡：块整体上浮入场，条目依次亮起 ——
   卡内灰蓝（--mute）对比不足 4.5（对 --deep 实算 ≈3.7），说明文字升 87% 白
   （判例同 .card .demo-caveat）。产地/产业带说明右对齐成一列，便于逐行扫读。 */
.demo-pop{opacity:0;transform:translateY(8px)}
.demo-pop.is-open{opacity:1;transform:none}
body:not(.is-reduced) .demo-pop{transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease)}
.goods-title{font-size:var(--fs-2);font-weight:700;line-height:1.5;color:var(--paper)}
.goods-list{display:flex;flex-direction:column;gap:var(--gap-base)}
.goods-item{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--gap-sm);
  font-size:var(--fs-1);line-height:1.5;
  opacity:0;transform:translateY(6px);
}
.goods-item::before{
  content:'';flex:0 0 auto;align-self:center;width:8px;height:8px;
  border-radius:999px;background:var(--pulse);
}
.goods-name{color:var(--paper)}
.goods-note{color:var(--paper-87);margin-left:auto;text-align:right}
.demo-pop.is-open .goods-item{opacity:1;transform:none}
body:not(.is-reduced) .goods-item{transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease)}
/* 延迟与图谱同因：必须在 body:not(.is-reduced) 之下（见图谱段注释） */
body:not(.is-reduced) .goods-item:nth-child(2){transition-delay:var(--dur-stagger)}
body:not(.is-reduced) .goods-item:nth-child(3){transition-delay:calc(var(--dur-stagger) * 2)}
body:not(.is-reduced) .goods-item:nth-child(4){transition-delay:calc(var(--dur-stagger) * 3)}

/* —— 03 屏展开态的竖向预算（375×812 定高屏实测扣账，2026-10-14）——
   展开图谱后 03 屏内容超过定高屏：未收束时实测 +47px（无刘海）／+106px（刘海
   sat59），会压在页脚上（屏是 height:100dvh + overflow:hidden，压了就是真的盖住）。
   两层处置，全部实测驱动：
   ① 展开即收束（本段，静态的物理量）：屏内块距 12→8、链格 8→4、真实行内边距
      8→4、面板两段间 8→4 —— 与矮屏档（layout.css ≤760）同一判例，只作用于展开态；
   ② 让位（chains.js 读布局逐级判定）：提示/口径注 → 口号「聚链成势」→ L1 锚点。
   收束后实测：375×812 无刘海余 36.6px；刘海 sat59 走到「口号让位」档、余 12.6px。 */
#s03.is-expanded .screen-body{gap:var(--gap-sm)}     /* 12 → 8 */
#s03.is-expanded #s03-chains{gap:var(--gap-base)}    /* 8 → 4（同矮屏档） */
#s03-detail{gap:var(--gap-base)}                     /* 面板两段间 8 → 4 */
#s03-detail .chain-detail-line{padding-block:var(--gap-base)}  /* 真实行内边距 8 → 4 */
#s03.is-tight #s03-sub{display:none}
#s03.is-tight2 #s03-sub{display:block}   /* 锚点让位比口号彻底：够地方就把口号放回来 */
#s03.is-tight2 .stat{display:none}

/* —— 05 屏选中态的让位（fitCard 现测现判，见 interact/map.js 注释）——
   ① 图例退场：位次/增速看得见（选中地在读数行、其余两点在地图 ①②③ 标注 + 命中区）；
   ② 兜底：L1 锚点再退。430 档余 83px，不动；375×812 实测只走到 ①。 */
#s05.is-tight .map-legend{display:none}
#s05.is-tight2 .stat{display:none}

/* ===============================================================
   刀 3.11 · ① N6 三层海图纵深（05）／③ 封底联系方式与中 / EN 切换
   —— 依据：契约 §6.5「创新方案不许降级」+ 设计 01 N6 / §八。
   —— 纪律：色值一律 var(--…)；字号只六档；圆角只 12px / 全圆 / 50%；
      过渡只落在 transform / opacity，且只写在 body:not(.is-reduced) 下
      （reduced 判定入口仍只在 motion.js 一处）。
   =============================================================== */

/* —— ① 三层视差（等深线 0.12 / 地图 0.45 / 航线与标签 1.0 倍位移；
      复测后压低远层、放大近层 —— 等深线 1.1px / 地图 4.1px / 航线 9.0px）——
   位移值由 js/interact/map.js 写内联 transform。
   ⚠️ SVG 组内联的 px 是**用户单位**（受 viewBox 缩放，375 档实测 ÷0.2563）——
      map.js 用 stage 实测宽度把「屏幕 px」换算回用户单位，所以 CSS 这边不写死比例。
   过渡 140ms linear 只做事件抖动平滑（真机 deviceorientation 有噪声），
   不是补间动画：无 rAF、无 setTimeout；reduced 下过渡与位移都不存在。 */
body:not(.is-reduced) #s05-iso,
body:not(.is-reduced) #s05-world,
body:not(.is-reduced) #s05-route-layer,
body:not(.is-reduced) .map-labels{transition:transform 140ms linear}

/* 拖动面：竖向留给原生滚动（pan-y），横向手势才进 JS —— 拖得动、也滚得动。
   user-select 关掉：拖动时不要顺手选中地图旁的正文（选择在触摸浏览器里会抢手势）。 */
#s05-map-stage{touch-action:pan-y;-webkit-user-select:none;user-select:none}

/* 等深线层：描边 2px（与 01 屏装饰等深线的 2px 环宽同档，见 --img-isobath）、
   航路青 22%（02 手册「等深线 22% 透明度」）。1px 太细 —— 复测时远层几乎读不出，
   2px 是本片等深线的既定画法，不是新造的线宽（描边仍只在 1/2/7 三档内）。 */
.map-iso path{
  fill:none;stroke:var(--lane-22);stroke-width:var(--sw-icon);
  vector-effect:non-scaling-stroke;
}
/* 标签组：整组与航线层同倍位移；不拦点选（命中区是 .map-cell 的 Voronoi 剖分块），
   包层后 % 定位的参照系仍是同尺寸的 .map-wrap（inset:0） */
.map-labels{position:absolute;inset:0;pointer-events:none}

/* 可见 affordance（无隐藏手势）：常驻在图上的一行小字，不是热区。
   字号 14 / paper-87（不落灰蓝 —— 图上对比要够）。
   文案三态由 map.js 写：正常 / 无倾斜信号（挂了监听但 2.5s 无读数）/ 已减少动态。
   max-width 兜底：320 档地图净宽仅 224px，句子长了折行，不许横溢出图外。 */
.map-hint{
  position:absolute;left:var(--gap-sm);bottom:var(--gap-sm);z-index:1;
  max-width:calc(100% - var(--gap-md));
  font-size:var(--fs-1);line-height:1.5;color:var(--paper-87);
  pointer-events:none;
}
/* iOS13+ 授权按钮（由 map.js 生成：**替换**上面那行提示，同一落位；
   只能在用户手势里 requestPermission）：压在地图上 → 给实底（--deep 同卡底）。
   ⚠️ 高度必须 ≥52（--h-touch）：验收仪器量的是**入场态**（卡片 0.96 缩放未跑完），
   44 的盒子被量成 42.24 → 判「触控目标过小」（实测踩过）；52 缩后 49.9 仍 ≥44。 */
.map-gyro{
  position:absolute;left:var(--gap-sm);bottom:var(--gap-sm);z-index:1;
  max-width:calc(100% - var(--gap-md));
  min-height:var(--h-touch);padding:0 var(--gap-sm);border-radius:999px;
  border:var(--sw-btn) solid var(--lane-55);background:var(--deep);color:var(--lane);
  font-size:var(--fs-1);line-height:1.3;text-align:left;
  display:inline-flex;align-items:center;
}
.map-gyro[aria-pressed="true"]{border-color:var(--pulse);color:var(--pulse)}

/* —— ③ 封底联系方式 + 中 / EN 切换（设计 01 §八）——
   布局是量出来的（375×812+刘海：封底竖向余量仅 10px、body 已超 14px）：
   联系方式与「回到首页」合占一行 —— 行高 = 按钮 52，联系方式柱（邮箱 21 行 +
   切换控件 52）**不增行高**。320 档本行折行，但 320 档屏可生长（非定高），零风险。 */
.s10-foot-row{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--gap-sm);
}
.s10-contact{
  display:flex;align-items:center;gap:var(--gap-sm);
  flex-wrap:wrap;justify-content:flex-end;min-width:0;
}
#s10-email{word-break:break-all}   /* 真地址公布后偏长时随行折，不撑行高 */

/* 语言切换：与 .vs-btn（身份切换）同语汇但走航路青 —— 身份用脉线绿、语言属资料层 */
.lang-switch{display:inline-flex;gap:var(--gap-base)}
.lang-btn{
  min-height:var(--h-touch);padding:0 var(--gap-sm);border-radius:999px;
  border:var(--sw-btn) solid var(--lane-55);color:var(--lane);
  font-size:var(--fs-1);line-height:1;display:inline-flex;align-items:center;
}
.lang-btn[aria-pressed="true"]{background:var(--lane);border-color:var(--lane);color:var(--ink);font-weight:700}
.lang-btn:active{transform:scale(.97)}
body:not(.is-reduced) .lang-btn{transition:transform var(--dur-in) var(--ease)}   /* 只动 transform */