/* ==========================================================================
   矿农网 · 原型外壳 · 实操模式
   --------------------------------------------------------------------------
   这套原型的本体是「设计稿浏览册」：顶栏挂设计导航、左侧屏目录、中间小标题、
   舞台里套一个手机壳 / 浏览器机箱、底部全屏画廊 —— 给人看设计稿很合适，
   但当成产品验收时显得像说明书。

   实操模式只收起外壳，产品本体一个像素都不动：
     · 隐藏屏目录 / 小标题 / 设计导航（收进顶栏「设计稿」按钮）
     · PC 端与后台：去掉浏览器机箱，直接铺满窗口，等同真网站 / 真后台
     · 移动端：桌面保留手机壳居中；窄屏去掉手机壳铺满整屏，等同真机
     · ?design=1 回到设计册原样（此前的老行为）
   颜色 / 字体 / 圆角 / 间距 / 组件仍全部取自 tokens.css 与 shell.css。
   由 assets/live.js 给 body 挂 is-live；是否手机形态由 body.has-device 区分。
   ========================================================================== */

/* ---------- 1. 收起设计稿外壳 ---------- */
body.is-live .sidebar { display: none; }
body.is-live .wb-body { display: block; }
body.is-live .canv-cap { display: none; }
/* 顶栏（品牌 + 端链接 + 行业频道 + 全部页面）整条收起：它是展陈用的导航，
   不是产品的一部分。切端 / 切行业改由右下角浮动菜单承担 */
body.is-live .topbar { display: none; }
/* 手机系统状态栏（9:41 / 信号 / 电量）同理：属于手机壳的装饰，不在产品里 */
body.is-live .stage .statusbar { display: none; }
/* 状态栏没了，灵动岛就会直接压在 App 顶栏上，一并去掉 */
body.is-live.has-device .stage .device .island { display: none; }

/* 设计总览 / 设计规范两条链接收进「设计稿」按钮，顶栏只留产品入口 */
body.is-live .tb-links a[href*="index.html"] { display: none; }

/* 屏目录按钮：与「全部页面」区分，用次级样式，尺寸沿用 .tb-btn */
#navBtn { background: rgba(255, 255, 255, .16); color: #fff; }
#navBtn.on { background: #fff; color: var(--blue-800); }

/* 顶栏挤进实操/设计稿开关后不许换行：两行按钮比换行更难看 */
body.is-live .tb-links { flex-wrap: nowrap; min-width: 0; }
body.is-live .tb-link,
body.is-live .tb-btn,
body.is-live .seg button,
body.is-live .tb-group > span { white-space: nowrap; }

/* ---------- 2. 屏目录改为抽屉（按需唤出） ---------- */
body.is-live.nav-on .sidebar {
  display: block;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 236px;
  max-height: none;
  z-index: 160;
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(6, 22, 49, .16);
}
body.is-live.nav-on .canvas { padding-left: 254px; }

/* ---------- 3. 移动端：手机壳居中，四周留白 ---------- */
body.is-live.has-device .canvas { padding: 20px 16px 44px; }

/* ---------- 4. PC 端与后台：铺满窗口，不留机箱 ----------
   机箱（.browser 的红黄绿点 + 假地址栏）是设计稿的展陈道具，实操时全部去掉；
   各端 fitStage() 给 .stage 写的 inline transform / 宽高在这里被压掉，
   产品本体按 100% 宽高自适应 —— 与浏览器里打开真网站、真后台一致。 */
body.is-live:not(.has-device) .canvas {
  display: block;
  height: 100vh;
  padding: 0;
  overflow: hidden;
}
body.is-live:not(.has-device) .stage {
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
}
body.is-live:not(.has-device) .stage .browser {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
body.is-live:not(.has-device) .stage .br-bar { display: none; }
/* 产品本体撑满：页面根是 flex 子项，宽度原本由内容撑开（1200 / 1189），
   铺满后会靠左、右侧留一道空白；给它 100% 宽，内部各大区块自带
   max-width + margin auto（.wt-in 1240 / .a-main 1430），自然居中并随窗口伸缩 */
body.is-live:not(.has-device) .stage .br-body > div > * {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* ---------- 5. 真机：窄屏去掉手机壳，铺满整屏 ---------- */
@media (max-width: 700px) {
  body.is-live .topbar { height: 50px; padding: 0 10px; gap: 8px; }
  body.is-live .tb-sep,
  body.is-live .tb-group > span { display: none; }
  body.is-live .tb-brand { font-size: 14px; }

  /* 真机上就只看这一个端：端跳转、屏目录、设计稿、全部页面全部让位给行业频道 */
  body.is-live .tb-links,
  body.is-live #navBtn,
  body.is-live #modeGroup,
  body.is-live #viewBtn { display: none; }

  /* ⚠️ 必须带上 .has-device：§3 的 `body.is-live.has-device .canvas` 特异性更高，
     只写 `body.is-live .canvas` 压不住它 —— 真机上就会留下左右 16px + 上 20px 下 44px 的留白，
     看着仍是"一块面板"而不是真机铺满。高度也要一起给，否则手机形态下 canvas 由内容撑开。 */
  body.is-live .canvas,
  body.is-live.has-device .canvas { padding: 0; height: 100vh; overflow: hidden; }
  body.is-live .wb-body { min-height: 0; }

  /* 移动端：去壳铺满 */
  body.is-live.has-device .stage {
    transform: none !important;
    width: 100% !important;
    height: 100vh !important;
    display: block;
  }
  body.is-live.has-device .stage .device {
    width: 100%; height: 100%;
    border-radius: 0; padding: 0;
    background: transparent; box-shadow: none;
  }
  body.is-live.has-device .stage .device::after,
  body.is-live.has-device .stage .device .island { display: none; }
  body.is-live.has-device .stage .device .phone-inner {
    width: 100%; height: 100%; border-radius: 0;
  }

  body.is-live:not(.has-device) .canvas { height: 100vh; }
  body.is-live.nav-on .canvas { padding-left: 0; }
  body.is-live.nav-on .sidebar { width: 78%; top: 0; }
}

/* ---------- 6. 浮动切换器：顶栏收起后的原型菜单 ----------
   配色 / 圆角全部取自 tokens.css（blue-800 / blue-50 / line），与产品同族，
   不引入新的视觉语言；设计稿模式下不出现（顶栏自带全部控件）。 */
/* 工具球（切端 / 行业频道 / 视图）已从产品形态移除：
   它本质上是原型切换器，不是产品功能 —— 挂在 App 右下角会让人以为那是产品里的按钮，
   而实操模式的目的是"看着就是在用的产品"。?design=1 时顶栏自带全部控件，同样不需要它。
   需要恢复时把这条 display 改回 block 即可。 */
.lv-fab { display: none; }
body.is-live .lv-fab {
  display: none;
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 300;
  font-family: var(--font);
}
.lv-fab-btn {
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--blue-800); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .92;
  box-shadow: 0 8px 20px rgba(6, 22, 49, .28);
}
.lv-fab-btn:hover { opacity: 1; }
.lv-panel {
  display: none;
  position: absolute; right: 0; bottom: 52px;
  width: 216px; padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(6, 22, 49, .24);
}
.lv-fab.on .lv-panel { display: block; }
.lv-sec + .lv-sec {
  margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.lv-t { font-size: 11.5px; font-weight: 800; color: var(--ink-500); margin-bottom: 7px; }
.lv-ends, .lv-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lv-end, .lv-i, .lv-b {
  display: block;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--blue-50);
  color: var(--blue-800);
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.lv-end:hover, .lv-i:hover, .lv-b:hover { background: var(--blue-100); }
.lv-end.on, .lv-i.on, .lv-b.on {
  background: var(--blue-800); border-color: var(--blue-800); color: #fff;
}
@media (max-width: 700px) {
  .lv-fab { right: 10px; bottom: 12px; }
  .lv-fab-btn { width: 38px; height: 38px; }
  .lv-panel { width: 200px; bottom: 46px; }
}