/* =========================================================================
   供应链体系 · 一屏栏目（v3.10 · 2026-09-24）
   本版按老大四条反馈改：
     ① 网页提示「不支持 WebGL」→ js/supply37.js 改成双通道：能跑 WebGL 走立体版，
        跑不了自动退「平面版」js/map_flat.js（动效与交互照旧，不再只弹提示＋静态图）
     ② 屏幕下方的入口条盖住原有内容 → 入口条改「左侧竖排」，屏底整条让出来
     ③ 右侧文本看不清（半透明底压地图）→ 仓点清单/统计/图例全部改实心面板
     ④ 仓点清单、统计、图例统一归到右侧；左下留给操作提示，屏底只留版权条
   依赖：css/map_single.css（地图自带 UI）、css/subscreen.css（子屏）
   ========================================================================= */

/* ---------- 一屏容器：占满视口、不产生滚动 ---------- */
/* 页眉是 fixed（overlay），所以这里直接用 100vh，并给地图 HUD 让出页眉高度 */
#pin{height:100vh !important;min-height:0 !important;margin:0}
/* 取消 map_single.css 里「矮屏 height:auto」的规则：那会把容器压到 78vh，
   而 canvas 仍按 window.innerHeight 建 → 底部被裁掉（笔记本上最容易踩） */
@media (max-height:780px){ #pin{height:100vh !important} }
html.onepage,html.onepage body{overflow:hidden;height:100%}
/* 页眉 sticky（占 92px 流内高度）会把地图整体下压 → 一屏版改成 fixed 覆盖式，地图从 y=0 起铺满视口
   （首页 .deck 是同一思路；这里不引入 flex 列，省得地图 canvas 仍按 window 尺寸建、被容器裁掉） */
html.onepage header.nav{position:fixed;top:0;left:0;right:0}

/* ---------- 地图 HUD：左侧＝标题 + 入口竖排；右侧＝仓点清单 + 统计 + 图例 ---------- */
#pin #hudTop{left:54px;top:calc(var(--nav-h,76px) + 26px);max-width:none}
#pin #hubList{top:calc(var(--nav-h,76px) + 30px)}
#pin #brand{display:none}          /* 页眉已有 logo，屏内不再重复 */
/* 图例：底部横排一条（4 项一行），不再占左下四行 */
#pin #legend{left:auto;right:44px;bottom:38px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  font-size:12.5px;line-height:1.5;padding:9px 16px;border-radius:999px;
  background:rgba(6,28,19,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 30px rgba(0,0,0,.45)}
#pin #legend .veg{color:#CDE86B;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#pin #legend .veg img{width:19px;height:19px;display:inline-block;vertical-align:middle}
/* 统计：右侧、图例之上，实心面板 */
#pin #stats{left:54px;right:auto;bottom:78px;
  background:rgba(6,28,19,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.45);font-size:13px;line-height:1.95}

/* ---------- 地图加载中 / 失败兜底 ---------- */
#pin .map-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;color:#7fb8a8;font-size:13px;letter-spacing:.2em;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;transition:opacity .45s}
#pin .map-loading.hide{opacity:0;pointer-events:none}
#pin .map-loading .pct{font-family:var(--latin,Inter,sans-serif);font-size:22px;color:#CDE86B;letter-spacing:.04em}
#pin .map-loading .bar{width:220px;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
#pin .map-loading .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fe08f,#39c9ff,#ffb03a);transition:width .3s}
#pin .map-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:#062418 center/cover no-repeat;z-index:5}
#pin .map-fallback.on{display:flex}
#pin .map-fallback img{width:100%;height:100%;object-fit:cover;opacity:.92}
#pin .map-fallback .msg{position:absolute;left:50%;bottom:calc(var(--nav-h,76px) + 24px);transform:translateX(-50%);
  background:rgba(6,36,24,.9);border:1px solid rgba(205,232,107,.4);color:#eafff5;font-size:12.5px;
  padding:9px 16px;border-radius:999px;display:flex;gap:12px;align-items:center;white-space:nowrap}
#pin .map-fallback .msg button{all:unset;cursor:pointer;color:#CDE86B;font-weight:600;text-decoration:underline}

/* 平面版提示（此设备没有 3D 渲染能力时的一行说明，不是报错）：左下角，小字 */
#pin #flatNote{position:absolute;left:54px;bottom:12px;z-index:6;pointer-events:none;
  font-size:11.5px;letter-spacing:.04em;color:#8fb0a4;
  background:rgba(6,28,19,.72);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:5px 12px}

/* ---------- 一屏入口条（默认：屏底横排，供服务 / 品牌 / 关于各页共用） ---------- */
.ss-entries{position:absolute;left:50%;transform:translateX(-50%);bottom:38px;
  display:flex;gap:11px;z-index:9;pointer-events:auto;flex-wrap:nowrap;justify-content:center;
  width:min(94vw,1000px)}
.ss-entry{all:unset;cursor:pointer;box-sizing:border-box;flex:1 1 0;min-width:0;
  padding:11px 15px 10px;border-radius:14px;text-align:left;
  background:rgba(6,30,21,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(205,232,107,.34);box-shadow:0 14px 34px rgba(0,0,0,.42);
  transition:transform .22s ease,border-color .22s ease,background .22s ease}
.ss-entry:hover{transform:translateY(-3px);border-color:rgba(205,232,107,.85);background:rgba(10,44,30,.78)}
.ss-entry:focus-visible{outline:3px solid var(--lime,#CDE86B);outline-offset:3px}
.ss-entry .k{display:block;font-size:15px;font-weight:700;color:#fff;letter-spacing:.06em}
.ss-entry .k:after{content:"→";margin-left:8px;color:#CDE86B;font-weight:600}
.ss-entry span.s{display:block;margin-top:5px;font-size:11.5px;color:#8fd9c2;letter-spacing:.04em}
/* 桌面端仓点清单已在屏内右侧列出 → 该入口只在手机出现 */
.ss-entry.only-mob{display:none}
@media (max-width:820px){ .ss-entry.only-mob{display:block} }
/* 供应链页的合作入口与其余入口保持同一外观，不做默认高亮（2026-10-21 老大要求） */
body[data-page="supply"] .ss-entry.cta{border-color:rgba(205,232,107,.34);background:rgba(6,30,21,.9)}
.ss-entry.cta .k:after{content:"↗"}

/* ---------- 供应链页专用：入口条改「左侧竖排」（2026-09-24 老大：底部横条盖住原有内容） ----------
   只作用于 body[data-page="supply"]，其余栏目仍走上面的屏底横排（否则会连带压住品牌栏图鉴的翻页键） */
body[data-page="supply"] .ss-entries{left:54px;top:calc(var(--nav-h,76px) + 152px);bottom:auto;
  transform:none;display:flex;flex-direction:column;gap:9px;z-index:9;pointer-events:auto;
  width:278px;flex-wrap:nowrap;justify-content:flex-start}
body[data-page="supply"] .ss-entry{width:100%;flex:0 0 auto;padding:10px 14px 9px;
  background:rgba(6,30,21,.90)}
body[data-page="supply"] .ss-entry:hover{background:rgba(10,44,30,.94)}
body[data-page="supply"] .ss-entry .k{font-size:14.5px}
body[data-page="supply"] .ss-entry span.s{margin-top:4px;font-size:11px;color:#93bcae}

/* 操作提示：左下（入口竖排之下），一条小字，不再居中压地图 */
#pin #hint{left:54px;right:auto;bottom:44px;text-align:left;color:#8fb0a4;
  background:rgba(6,28,19,.72);border:1px solid rgba(255,255,255,.10);border-radius:999px;
  padding:6px 14px;font-size:12px;letter-spacing:.06em}

/* 屏内版权条（这一栏不再有 footer） */
.pin-foot{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:11px;color:#4f7a70;
  letter-spacing:.08em;pointer-events:none;z-index:6}

/* ---------- 子屏里的小版式（子屏面板是深墨绿 → 一律浅字，勿用深色） ---------- */
.qc-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.qc-strip figure{margin:0}
.qc-strip img{width:100%;height:clamp(112px,17vh,158px);object-fit:cover;border-radius:10px;display:block;
  background:#0d3a29}
.qc-strip figcaption{font-size:12px;color:#A7CCBA;margin-top:6px;line-height:1.55}
.certs-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.certs-row span{font-size:12px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#DCE9E0}
table.ss-facts{width:100%;border-collapse:collapse;margin-top:6px}
table.ss-facts th,table.ss-facts td{border-bottom:1px solid rgba(255,255,255,.14);padding:7px 4px;
  font-size:13px;text-align:left;vertical-align:top}
table.ss-facts th{width:150px;color:#CDE86B;font-weight:600}
table.ss-facts td{color:#EAF3EC}
.ss-content p.note,.ss-content .note{color:#9EB8AA;font-size:12.5px;line-height:1.8;margin-top:14px}

/* ---------- 窄屏 / 笔记本矮屏 ---------- */
@media (max-width:1280px){
  #pin #hudTop{left:34px;max-width:52vw}
  #pin #hudTop .t1{font-size:30px}
  #pin #hubList{right:28px}
  body[data-page="supply"] .ss-entries{left:34px;width:252px}
  #pin #stats{left:34px;right:auto}#pin #legend{right:28px}
}
@media (max-width:1080px){
  #pin #hudTop .t1{font-size:26px}#pin #hudTop .t3{display:none}
  body[data-page="supply"] .ss-entries{left:26px;width:232px;top:calc(var(--nav-h,76px) + 138px)}
  body[data-page="supply"] .ss-entry{padding:9px 12px 8px}
  body[data-page="supply"] .ss-entry .k{font-size:13.5px}
  body[data-page="supply"] .ss-entry span.s{font-size:10.5px}
  #pin #hint{left:26px}
  #pin #stats{left:26px;right:auto}
  #pin #flatNote{left:26px}
}
/* 矮屏（笔记本 1280×720 / 1440×800）：仓点清单收一档，别和右下统计打架 */
@media (max-height:860px){
  #pin #hubList .hintline{display:none}
  #pin #hubList button{padding:5px 8px}
  #pin #hubList .gl{margin:8px 0 5px}
  #pin #stats{line-height:1.75;padding:10px 14px;font-size:12.5px}
}
@media (max-height:720px){
  body[data-page="supply"] .ss-entry span.s{display:none}
  #pin #hubList button span{display:none}
  #pin #hint{display:none !important}
}
/* ---------- 手机：入口条回到底部两列（竖排会挡住地图），清单/图例收进子屏 ---------- */
@media (max-width:820px){
  #pin #hubList{display:none}                 /* 手机：仓点清单收进子屏（入口条里的「仓点清单」） */
  #pin #hudTop{left:18px;top:calc(var(--nav-h,64px) + 16px);max-width:none}
  #pin #hudTop .t1{font-size:22px;letter-spacing:1px}
  #pin #hudTop .t2{font-size:12.5px;letter-spacing:1.4px;margin-top:7px}
  #pin #hudTop .t3{display:none}
  #pin #legend{display:none}
  /* 手机：统计压到 3 行、贴左下（放在入口条上方，不占屏中间） */
  #pin #stats{left:18px;right:auto;bottom:auto;top:calc(var(--nav-h,64px) + 118px);width:230px;
    font-size:11.5px;line-height:1.8;padding:9px 12px}
  #pin #stats > div:nth-child(n+4){display:none}
  #pin #hint{display:none !important}
  #pin #flatNote{left:18px;bottom:auto;top:calc(var(--nav-h,64px) + 88px);font-size:10.5px}
  body[data-page="supply"] .ss-entries{left:14px;right:14px;top:auto;bottom:12px;width:auto;max-width:none;
    flex-direction:row;flex-wrap:wrap;gap:8px}
  body[data-page="supply"] .ss-entry{width:auto;flex:1 1 calc(50% - 8px);padding:9px 11px}
  .ss-entry .k{font-size:12.5px}.ss-entry span.s{font-size:10.5px;display:block}
  .pin-foot{display:none}
  .qc-strip{grid-template-columns:1fr}
}